docs: new contribution guideline for client structure #2793
Conversation
ogzhanolguncu
requested review from
perkinsjr,
chronark,
mcstepp and
MichaelUnkey
as code owners
|
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
1 Skipped Deployment
|
📝 WalkthroughWalkthroughThis pull request introduces a formatting change in the JSON configuration for "Unkey Docs" and adds a new documentation file about client-side structure for the Unkey project. The Changes
Possibly related PRs
Suggested labels
Suggested reviewers
Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media? 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
|
Thank you for following the naming conventions for pull request titles! 🙏 |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (4)
apps/engineering/content/docs/contributing/client-structure.mdx (4)
14-38: Consider adding validation rules for the directory structure.While the directory structure is well-documented, it would be helpful to add information about:
- Required vs. optional directories
- Maximum nesting depth recommendations
- File size/complexity guidelines
62-82: Enhance the example with more realistic implementation details.The current example is quite basic. Consider:
- Adding error handling examples
- Showing how to handle loading states
- Demonstrating proper type usage
- Including comments about key architectural decisions
export default function FeaturePage() { + const { data, isLoading, error } = useFeatureData(); + + if (error) { + return <ErrorComponent error={error} />; + } + return ( <div> <Navbar>{/* Navigation content */}</Navbar> <PageContent> - {/* Entry to our actual component. This one is usually a client-side component */} - <FeatureComponent /> + {isLoading ? ( + <LoadingSpinner /> + ) : ( + <FeatureComponent data={data} /> + )} </PageContent> </div> ); }
104-108: Add examples for import/export best practices.The import/export guidelines would benefit from concrete examples showing:
- How to structure barrel exports
- When to use named vs. default exports
- How to handle circular dependency prevention
// Good example for index.ts export { FeatureList } from './feature-list'; export type { FeatureItem } from './types'; export { useFeatureData } from './hooks'; // Avoid this pattern that can lead to circular dependencies export * from './feature-list';
128-148: Add error handling and type safety to the example implementation.The example implementation could be improved to demonstrate best practices for:
- Error boundaries
- Type safety
- Input validation
// Enhanced example with better practices import { z } from 'zod'; import type { Feature } from './types/feature'; // Validation schema const featureSchema = z.object({ id: z.string(), name: z.string().min(1), // ... other fields }); // Type-safe implementation export function FeatureList() { const { data, error } = useFeatures(); if (error) { return <ErrorBoundary error={error} />; } return ( // Implementation ); } // Type-safe server action export async function createFeature(input: z.infer<typeof featureSchema>) { const validated = featureSchema.parse(input); // Implementation }
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (3)
apps/docs/mint.json(1 hunks)apps/engineering/content/docs/contributing/client-structure.mdx(1 hunks)apps/engineering/content/docs/contributing/meta.json(1 hunks)
⏰ Context from checks skipped due to timeout of 90000ms (17)
- GitHub Check: Test Packages / Test ./packages/rbac
- GitHub Check: Test Packages / Test ./packages/nextjs
- GitHub Check: Test Packages / Test ./packages/hono
- GitHub Check: Test Packages / Test ./packages/cache
- GitHub Check: Test Packages / Test ./packages/api
- GitHub Check: Test Packages / Test ./internal/clickhouse
- GitHub Check: Test Packages / Test ./internal/resend
- GitHub Check: Test Packages / Test ./internal/keys
- GitHub Check: Test Packages / Test ./internal/id
- GitHub Check: Test Packages / Test ./internal/hash
- GitHub Check: Test Packages / Test ./internal/encryption
- GitHub Check: Test Packages / Test ./internal/billing
- GitHub Check: Test API / API Test Local
- GitHub Check: Test Agent Local / test_agent_local
- GitHub Check: Build / Build
- GitHub Check: autofix
- GitHub Check: Analyze (javascript-typescript)
🔇 Additional comments (3)
apps/engineering/content/docs/contributing/meta.json (1)
6-6: LGTM! Clean integration of the new documentation page.The addition of "client-structure" to the pages array is well-organized and maintains consistency with the existing structure.
apps/engineering/content/docs/contributing/client-structure.mdx (1)
1-4: LGTM! Clear and well-structured frontmatter.The metadata is properly formatted and provides clear context for the documentation page.
apps/docs/mint.json (1)
417-417: LGTM! Well-placed addition to the navigation structure.The new documentation page is correctly integrated into the Contributing section of the navigation.
apps/engineering/content/docs/contributing/client-structure.mdx
Outdated
Show resolved
Hide resolved
apps/engineering/content/docs/contributing/client-structure.mdx
Outdated
Show resolved
Hide resolved
apps/engineering/content/docs/contributing/client-structure.mdx
Outdated
Show resolved
Hide resolved
apps/engineering/content/docs/contributing/client-structure.mdx
Outdated
Show resolved
Hide resolved
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (2)
apps/engineering/content/docs/contributing/client-structure.mdx (2)
12-38: Consider adding test file locations to the directory structure.The directory structure is well-organized, but it could benefit from showing where test files should be placed. Consider adding examples like:
feature-name/ ├── components/ │ ├── component-name/ │ │ ├── index.tsx │ │ ├── index.test.tsx # Component tests │ │ └── sub-component.tsx
98-98: Fix grammar in the sentence.Add the article "the" before "public API".
- - Use index.ts files to expose public API of complex components + - Use index.ts files to expose the public API of complex components🧰 Tools
🪛 LanguageTool
[uncategorized] ~98-~98: You might be missing the article “the” here.
Context: ...rpose - Use index.ts files to expose public API of complex components - Colocate...(AI_EN_LECTOR_MISSING_DETERMINER_THE)
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (2)
apps/docs/mint.json(1 hunks)apps/engineering/content/docs/contributing/client-structure.mdx(1 hunks)
✅ Files skipped from review due to trivial changes (1)
- apps/docs/mint.json
🧰 Additional context used
🪛 LanguageTool
apps/engineering/content/docs/contributing/client-structure.mdx
[uncategorized] ~98-~98: You might be missing the article “the” here.
Context: ...rpose - Use index.ts files to expose public API of complex components - Colocate...
(AI_EN_LECTOR_MISSING_DETERMINER_THE)
⏰ Context from checks skipped due to timeout of 90000ms (17)
- GitHub Check: Test Packages / Test ./packages/rbac
- GitHub Check: Test Packages / Test ./packages/nextjs
- GitHub Check: Test Packages / Test ./packages/hono
- GitHub Check: Test Packages / Test ./packages/cache
- GitHub Check: Test Packages / Test ./packages/api
- GitHub Check: Test Packages / Test ./internal/clickhouse
- GitHub Check: Test Packages / Test ./internal/resend
- GitHub Check: Test Packages / Test ./internal/keys
- GitHub Check: Test Packages / Test ./internal/id
- GitHub Check: Test Packages / Test ./internal/hash
- GitHub Check: Test Agent Local / test_agent_local
- GitHub Check: Test Packages / Test ./internal/encryption
- GitHub Check: Test Packages / Test ./internal/billing
- GitHub Check: Test API / API Test Local
- GitHub Check: Build / Build
- GitHub Check: autofix
- GitHub Check: Analyze (javascript-typescript)
🔇 Additional comments (5)
apps/engineering/content/docs/contributing/client-structure.mdx (5)
1-11: LGTM! Clear and concise introduction.The frontmatter and overview effectively communicate the purpose and scope of the documentation.
58-80: LGTM! Clear and practical example.The example effectively demonstrates the recommended page structure and proper use of imports.
109-147: LGTM! Well-structured shared code guidelines.The section effectively explains shared code organization and provides clear, practical examples.
149-151: LGTM! Welcoming conclusion.Good addition to encourage community engagement and support.
46-46: 🛠️ Refactor suggestionUpdate package reference for consistency.
Use
@unkey/uiinstead ofunkey/uito maintain consistency with the package naming convention.- - Use shared components from the global `/components` directory or `unkey/ui` package for common UI elements + - Use shared components from the global `/components` directory or `@unkey/ui` package for common UI elementsLikely invalid or redundant comment.
What does this PR do?
Fixes # (issue)
If there is not an issue for this, please create one first. This is used to tracking purposes and also helps use understand why this PR exists
Type of change
How should this be tested?
Checklist
Required
pnpm buildpnpm fmtconsole.logsgit pull origin mainAppreciated
Summary by CodeRabbit