0.1.10 • Published 4 months ago

redefine-ui-library v0.1.10

Weekly downloads
-
License
-
Repository
-
Last release
4 months ago

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

  1. Variable Naming: Use camelCase for variable and function names.
    const userName = 'John';
    function fetchData() {}
  2. Constants: Use UPPER_SNAKE_CASE for constants.
    const API_BASE_URL = 'https://example.com/api';
  3. Class Names: Use PascalCase for React components and classes.
    class UserProfile {}
    export default function UserCard() {}
  4. 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

  1. Functional Components: Use functional components over class components.
    const UserCard = () => {
      return <div>User Card</div>;
    };
    export default UserCard;
  2. Component Files: Each file should contain one component. Name the file after the component (e.g., UserCarduser-card.js).
  3. Props: Destructure props in function arguments for clarity.
    const UserCard = ({ name, age }) => (
      <div>
        {name}, {age}
      </div>
    );

CSS/Styling

  1. Use Tailwind CSS for styling wherever possible:
    <div className="p-4 bg-gray-100 rounded-md"></div>
  2. For custom CSS, follow the BEM methodology or use camelCase for class names:
    .user-card__title {
      font-size: 16px;
    }

TypeScript (if applicable)

  1. Use PascalCase with i at the start for types and interfaces.
    interface iUserProfile {
      id: number;
      name: string;
    }
  2. Store all type definitions in a types/ folder.

Linting and Formatting

  1. Use Prettier for code formatting.
  2. 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.