Edifice React Components
![bundlephobia](https://img.shields.io/bundlephobia/min/@edifice.io/react?style=flat-square)
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.
Interface description
- Always document typescript types and interface with JSDoc syntax. Used by Storybook to generate documentation.
export interface ButtonProps {
primary?: boolean;
backgroundColor?: string;
size?: "small" | "medium" | "large";
label: string;
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