Edifice React Components

Getting Started

We follow WAI ARIA rules and Bootstrap 5 guidelines when making our components

Build

pnpm run build

Lint

pnpm run lint

If pnpm run lint shows issues, run this command to fix them.

pnpm run fix

Prettier

pnpm run format

Structure

Component Folder

• Folder name always in PascalCase: Button
• Component file in PascalCase: Button.tsx
• Export types & interfaces inside Component file
• Stories file in PascalCase + *.stories.tsx : Button.stories.tsx

src
  -- ComponentFolder
    -- Component.tsx
    -- Component.stories.tsx
    -- index.ts

• Re-export the Component inside his own index file: index.ts
• Export everything if Component has types & interfaces

export { default as Component } from './Component';
export * from './Component';

Component Guideline

• Always document basic guideline of Component with JSDoc format. Used by Storybook to generate documentation.

/**
 * Primary UI component for user interaction
 */

Interface description

• Always document typescript types and interface with JSDoc syntax. Used by Storybook to generate documentation.

// Interface description (e.g: TreeViewProps.tsx)
export interface ButtonProps {
  /**
   * Is this the principal call to action on the page?
   */
  primary?: boolean;
  /**
   * What background color to use
   */
  backgroundColor?: string;
  /**
   * How large should the button be?
   */
  size?: "small" | "medium" | "large";
  /**
   * Button contents
   */
  label: string;
  /**
   * Optional click handler
   */
  onClick?: () => void;
}

Index file inside src folder

• Entry point of this React Library.
• Import your component inside index.ts file.

export * from './Button';

Adding Icons

https://edifice-community.atlassian.net/wiki/spaces/ODE/pages/4371611649/Overview#Ajout-de-l%E2%80%99ic%C3%B4ne

Dev

You can build your component using Storybook. See README