@ode-react-ui/components v2.1.1

Open Digital Education React Components

Getting Started

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

Build

yarn build

Lint

yarn lint

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

yarn fix

Prettier

yarn 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";

Dev

You can build your component using Storybook. See README