Skip to content

CODING STANDARDS

Coding Standards

  • Language: TypeScript (strict mode enabled).
  • Styling: Tailwind CSS with utility-first approach.
  • Theming: ⚠️ Follow the constellation theming charts by using only the color variables in global css that are present both in :root and :dark sections
  • Component Design: Follow atomic design principles:
  • Atomic: Smallest reusable elements (buttons, icons).
  • Molecules: Combinations of atomic components (forms, card headers).
  • Organisms: Sections of UI combining molecules (sidebars, panels).

Folder Naming and ordering

  • Use lowercase names with hyphens (e.g., side-panels).
  • For feature-specific folders, add them in features/ folder and group logically (e.g., editor/).
  • Ui reusable components are in the ui/ folder
  • Images and fonts are in public/ folder

File Naming

  • Components: PascalCase (e.g., Header.tsx, EditorComponents.tsx).
  • Utilities and Services: camelCase (e.g., apiClient.tsx).
  • Styles: Lowercase with hyphens (e.g., globals.css).

Imports

  • Use absolute imports when referencing files from app or components.
  • Example: import Header from '@/components/constellation/Header'.

Icons

  • Follow this structure for adding new icons:
  • Place svg files in the appropriate category (fill or outline).
  • Use descriptive names that reflect the icon's purpose.
  • You can also use lucide-react in the project

App internationalization

  • We use i18n to handle multiple languages in the app:
  • Import useTranslation from "react-i18next" at the start of every file with user faced text
  • use const { x } = useTranslation(${tranlsation_folder}); 
  • Translation folder are the following : "blog", "common", "constellation-editor", "dashboard", "header", "landing", "login", "map", "settings", "element". You can add some if you’re designing a whole new feature like "whiteboard" for example, but you need to add it in i18n.js file
  • wrap every text with x such as ("elementPage.story")
  • write the text in the different languages folder such as fr and en

Development Workflow

Getting Started

  1. Clone the repository.
  2. Install dependencies:
bun install
  1. Start the development server:
bun dev
  1. Access the application at http://localhost:3000.

Build and Deployment

  • Build the application:
bun build
  • Deploy using your preferred service (e.g., Vercel, Netlify).

Testing Guidelines

  • Use React Testing Library and Jest for component testing.
  • Ensure all components are tested in isolation.
  • Naming Convention: Test files should be named ComponentName.test.tsx.
  • Run the linter and a build before each push (you can use the constellation’s pre-push hooks)

Adding New Features

  • Place feature-specific pages in the feature/ directory.
  • Add reusable components to the components/ folder.
  • Follow the existing conventions for structure and naming.

Contributions

  • Branching Strategy: Use feature/{feature-name} for new features, use {nb_issue} + {issue description} for issue related branched
  • Commit Messages: Follow the convention [type]: [message] (e.g., feat: add sidebar component).
  • Pull Requests: Ensure all tests pass and documentation is updated.

References