0.1.10 • Published 4 months ago
redefine-ui-library v0.1.10
Code Structure and Conventions
This document outlines the coding standards and structure rules for this Next.js application to ensure consistency, readability, and maintainability across the codebase.
General JavaScript/TypeScript Conventions
- Variable Naming: Use
camelCase
for variable and function names.const userName = 'John'; function fetchData() {}
- Constants: Use
UPPER_SNAKE_CASE
for constants.const API_BASE_URL = 'https://example.com/api';
- Class Names: Use
PascalCase
for React components and classes.class UserProfile {} export default function UserCard() {}
- File Names: Use
camelCase
for file names.components/userCard.js pages/dashboard.js
Folder Structure
Organize the project into the following structure:
src/
├── app/ # Application routing and layout structure
│ ├── api/ # API routes
│ │ ├── [route]/ # Dynamic API routes
│ │ └── route.js # API route definitions
│ ├── layout.js # Root layout component
│ ├── page.js # Homepage (default route)
│ ├── [slug]/ # Dynamic route folder
│ │ ├── page.js # Page for the dynamic route
│ │ ├── layout.js # Layout specific to this route (optional)
│ │ └── loading.js # Loading state for the route (optional)
│ └── dashboard/ # Nested route folder (e.g., `/dashboard`)
│ ├── page.js # Dashboard main page
│ └── settings/ # Nested sub-route (e.g., `/dashboard/settings`)
│ └── page.js # Settings page
├── components/ # Reusable UI components with stories
│ ├── Button/ # Folder for the Button component
│ │ ├── Button.tsx # Button component implementation
│ │ ├── Button.stories.tsx # Storybook stories for Button
│ │ ├── Button.types.ts # Type definitions for Button
│ ├── Card/ # Folder for the Card component
│ │ ├── Card.tsx # Card component implementation
│ │ ├── Card.stories.tsx # Storybook stories for Card
│ │ ├── Card.types.ts # Type definitions for Card
│ ├── Input/ # Folder for the Input component
│ │ ├── Input.tsx # Input component implementation
│ │ ├── Input.stories.tsx # Storybook stories for Input
│ │ ├── Input.types.ts # Type definitions for Input
│ └── index.ts # Barrel file for exporting components
├── styles/ # Global and component-specific styles
├── hooks/ # Custom React hooks
├── public/ # Static assets like images, icons, and fonts
├── types/ # TypeScript type definitions
Component-Specific Rules
- Functional Components: Use functional components over class components.
const UserCard = () => { return <div>User Card</div>; }; export default UserCard;
- Component Files: Each file should contain one component. Name the file after the component (e.g.,
UserCard
→user-card.js
). - Props: Destructure props in function arguments for clarity.
const UserCard = ({ name, age }) => ( <div> {name}, {age} </div> );
CSS/Styling
- Use Tailwind CSS for styling wherever possible:
<div className="p-4 bg-gray-100 rounded-md"></div>
- For custom CSS, follow the BEM methodology or use
camelCase
for class names:.user-card__title { font-size: 16px; }
TypeScript (if applicable)
- Use
PascalCase
withi
at the start for types and interfaces.interface iUserProfile { id: number; name: string; }
- Store all type definitions in a
types/
folder.
Linting and Formatting
- Use Prettier for code formatting.
Extend the configuration with VSCode settings:
// .vscode/settings.json { "editor.formatOnSave": true, "editor.defaultFormatter": "esbenp.prettier-vscode" }
Dynamic Imports
Use dynamic imports for heavy components or libraries to optimize performance.
const Chart = dynamic(() => import('../components/Chart'), { ssr: false });
Alias Imports
Set up aliases in tsconfig.json
or jsconfig.json
for cleaner imports:
{
"compilerOptions": {
"baseUrl": ".",
"paths": {
"@/components/*": ["./src/components/*"],
"@/lib/*": ["./src/lib/*"]
}
}
}
Usage:
import UserCard from '@/components/usercard';
By following these conventions, the codebase will remain clean, maintainable, and easy to navigate for all contributors. For further clarifications or updates to these rules, refer to the contributing guidelines.