diff --git a/CLAUDE.md b/CLAUDE.md index bab63fcf..e5a20535 100644 --- a/CLAUDE.md +++ b/CLAUDE.md @@ -81,18 +81,44 @@ Prefer action-driven updates, explicit handlers, and localized state transitions # Styles -Avoid `styled-components` for complex or large-scale styling. Prefer: +**Future direction (apply to all new code):** avoid `styled-components`. Prefer: 1. `createStyles` for component-scoped dynamic styles 2. CSS Modules (`xxx.module.less`) for structured static styles +Existing `styled-components` usage is legacy tech debt — do not migrate it wholesale, but do not add new `styled-components` either. Theme tokens (`var(--ant-color-*)`) work in all three approaches. + +# Naming conventions + +A page module lives under `src/pages/{module}` with this sub-structure: `components/`, `config/`, `forms/`, `hooks/`, `services/`, `index.tsx`. File naming: + +- **Create/edit modal**: `add-{feature}-modal.tsx` (keep the `-modal` suffix even when built with `FormDrawer`). +- **Table columns hook**: `use-{feature}-columns.tsx`. +- **Open/close & request hooks**: `use-{verb}-{noun}.ts` (e.g. `use-create-user.ts`, `use-query-user-list.ts`). +- **Complex table cell**: extract into `{feature}-cell.tsx`. + +# Config & types + +- `config/types.ts` — TypeScript types. Form shape → `FormData`; table/list row → `ListItem`. +- `config/index.ts` — static constants, enums, and value/label maps (e.g. `XxxStatusValueMap`, `XxxStatusLabelMap`). Keep constants out of `types.ts`. + # Common components -- **Drawer/Modal open/close**: `useBodyScroll` from `@gpustack/core-ui`. +Always check `@gpustack/core-ui` first. Frequently reused: + +- **Drawer/Modal open/close**: `useBodyScroll`. +- **Form drawer / footer**: `FormDrawer`, `ModalFooter`. +- **Delete confirmation**: `DeleteModal`. +- **Search + bulk actions bar**: `FilterBar`. +- **Form fields**: `BaseSelect`, `Input` (labeled). +- **Text overflow**: `AutoTooltip`. +- **Icons**: `IconFont`. - **Status display** (success/failed/processing/warning): `StatusTag`. - **Permission-gated visibility**: `Access` / `useAccess`. -- **Request hooks**: `useRequest` / `useQueryData` / `useQueryDataList` from `@gpustack/core-ui`. -- **Table data fetching**: `useTableFetch` from `@gpustack/core-ui`. +- **Request hooks**: `useRequest` / `useQueryData` / `useQueryDataList`. +- **Table data fetching**: `useTableFetch`. +- **Submit guard** (prevent double-submit): `useSubmitLock`. +- **Tabbed forms**: `ScrollSpyTabs`. # Dynamic add-item form fields