A repository for re-usable, React-based components for use across web applications within the Nokkel ecosystem.
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.
- For brands, use the
-
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.