diff --git a/apps/docs/mint.json b/apps/docs/mint.json index e6511c771..4197e1aad 100644 --- a/apps/docs/mint.json +++ b/apps/docs/mint.json @@ -124,7 +124,10 @@ { "group": "Identities", "icon": "fingerprint", - "pages": ["concepts/identities/overview", "concepts/identities/ratelimits"] + "pages": [ + "concepts/identities/overview", + "concepts/identities/ratelimits" + ] } ] }, @@ -414,7 +417,6 @@ "contributing/editor-setup", "contributing/testing", "contributing/sdk-development", - "contributing/client-structure", { "group": "Services", "pages": [ diff --git a/apps/engineering/content/docs/contributing/client-structure.mdx b/apps/engineering/content/docs/contributing/client-structure.mdx index 7dc914b33..e976f286b 100644 --- a/apps/engineering/content/docs/contributing/client-structure.mdx +++ b/apps/engineering/content/docs/contributing/client-structure.mdx @@ -16,25 +16,25 @@ Each feature (typically corresponding to a Next.js page) should be organized as ``` feature-name/ ├── components/ # Feature-specific React components -│ ├── component-name/ # Complex components get their own directory +│ ├── component-name/ # Complex components get their own directory │ │ ├── index.tsx │ │ └── sub-component.tsx │ └── simple-component.tsx -├── hooks/ # Custom hooks for the feature -│ ├── queries/ # API query hooks +├── hooks/ # Custom hooks for the feature +│ ├── queries/ # API query hooks │ │ ├── use-feature-list.ts │ │ └── use-feature-details.ts │ └── use-feature-logic.ts -├── actions/ # Server actions and API calls +├── actions/ # Server actions and API calls │ └── feature-actions.ts -├── types/ # TypeScript types and interfaces +├── types/ # TypeScript types and interfaces │ └── feature.ts -├── schemas/ # Validation schemas +├── schemas/ # Validation schemas │ └── feature.ts -├── utils/ # Helper functions +├── utils/ # Helper functions │ └── feature-helpers.ts -├── constants.ts # Feature-specific constants -└── page.tsx # Main page component +├── constants.ts # Feature-specific constants +└── page.tsx # Main page component ``` ## Key Principles @@ -43,7 +43,7 @@ feature-name/ - Keep all related code within the feature directory - Don't import feature-specific components into other features - - Use shared components from the global `/components` directory or `unkey/ui` repo for common UI elements + - Use shared components from the global `/components` directory or `unkey/ui` package for common UI elements 2. **Component Organization** @@ -63,8 +63,6 @@ Here's an example of how to structure a typical page component: import { Navbar } from "@/components/navbar"; // Global shared component import { PageContent } from "@/components/page-content"; import { FeatureComponent } from "./components/feature-component"; -import { useFeatureData } from "./hooks/use-feature-data"; -import { featureAction } from "./actions/feature-actions"; export default function FeaturePage() { // Page implementation @@ -88,8 +86,8 @@ export default function FeaturePage() { - Use kebab-case for directory and file names - The directory structure itself provides context, so explicit suffixes are optional - If you choose to use suffixes for additional clarity, common patterns include: - - `.schema.ts` or just `.ts` for validation schemas - - `.type.ts` or just `.ts` for type definitions + - `auth.schema.ts` or just `auth-schema.ts` for validation schemas + - `auth.type.ts` or just `auth-types.ts` for type definitions - `.client.tsx` for client-specific components - `.server.ts` for server-only code - `.action.ts` for server actions @@ -103,6 +101,7 @@ export default function FeaturePage() { 3. **Imports and Exports** - Use absolute imports for shared components (`@/components`) + - Never use default exports unless it's absolutely necessary - Use relative imports within a feature - Export complex components through index files - Avoid circular dependencies @@ -112,7 +111,7 @@ export default function FeaturePage() { Global shared code should be placed in root-level directories: ``` -/components # Shared React components +/components # Shared React components /hooks # Shared custom hooks /utils # Shared utilities /types # Shared TypeScript types