DesignSystems.one | Comprehensive Design Systems Resources

File Structure

Organize files consistently to make the codebase navigable and maintainable

Directory Structure

app/                  # Next.js App Router
├── (routes)/          # App routes
├── components/        # Shared components
│   ├── ui/            # Base UI components
│   └── [feature]/     # Feature-specific components
├── hooks/             # Custom React hooks
├── lib/               # Utility functions and libraries
├── styles/            # Global styles
└── types/             # TypeScript type definitions

Naming Conventions

Files: Use kebab-case for file names (e.g., button-group.tsx)
Components: Use PascalCase for component names (e.g., ButtonGroup)
Hooks: Prefix with "use" (e.g., useMediaQuery)
Utilities: Use camelCase (e.g., formatDate)

Do

// button.tsx
export function Button({ children }) {
  return <button>{children}</button>;
}

Don't

// Button_Component.tsx
export default function button_component({ children }) {
  return <button>{children}</button>;
}

Code Formatting

Consistent formatting improves readability and reduces cognitive load

Tools

Prettier: Use for automatic code formatting
ESLint: Use for code quality and style enforcement
TypeScript: Use strict mode for type checking

Configuration Files

// .prettierrc
{
  "semi": false,
  "singleQuote": true,
  "tabWidth": 2,
  "trailingComma": "es5"
}

// .eslintrc
{
  "extends": [
    "next/core-web-vitals",
    "prettier"
  ],
  "rules": {
    "react/no-unescaped-entities": "off"
  }
}

Commit Hooks

Use Husky and lint-staged to enforce code standards before commits. This ensures all code in the repository meets our standards.

Code Standards