React Components

A repository for re-usable, React-based components for use across web applications within the Nokkel ecosystem.

Pre-requisites

• asdf

Contributing

To create a component directory, run `npm run create:component --name="INSERT NAME HERE"

To create an icon, run `npm run create:icon --name="INSERT NAME HERE"

Nokkel components are structured like so:

src/
├── components/
│   └── [Component]/
│       ├── [Component].css
│       ├── [Component].stories.tsx
│       ├── [Component].tsx
│       ├── index.ts
│       └── types.ts
├── context/
│   ├── [context].tsx
│   └── index.ts
├── hooks/
│   ├── [hook].ts
│   └── index.ts
├── icons/
│   ├── [Icon]
|   ├── [Icon].stories.tsx
│   └── index.ts
├── styles/
│   └── global.css
├── sections/
│   └── [Section]/
│       ├── [Section].css
│       ├── [Section].stories.tsx
│       ├── [Section].tsx
│       ├── index.ts
│       └── types.ts
├── utils/
│   ├── [Util].ts
│   └── index.ts
└── index.ts

• Component.css is where the component classes are stored. We use tailwind styles with the @apply for styles.
  • For brands, use the [data-theme="[brand]"] selector in order to change that specific class for brands.
  • See Button.css for a good example.
• Component.stories.tsx is where the story for Storybook is stored.
  • Decorators may be used for containers in the case of responsive components.
  • Note: Storybook documentation oftentimes has a type issue with the satisfies Meta<typeof [Component]>. It's suggested to use the same pattern in Button.stories.tsx
  • The first story is used as the top example in Autodocs so it's best to ensure it has all the needed controls (though this can be manually added).
• Component.tsx contains the actual component.
  • Using a Multi-line comment before the main export will be used by Autodocs in Storybook.
  • Add a data-testid=[component] for testing purposes and identification of component.
  • MaterialUI is used as a base for many components.
  • Button.tsx is a model component.
• types.ts contains all the types such as props.
  • Comments before each props will be documented in storybook to help design know the fields that can be edited.
• index.ts exports the component and types. We use this to export the component to the parent folder.