@nokkel/components v1.0.4

Nokkel Components Directory

This is the repo for shared web components within the Nokkel ecosystem.

Component files are all named using Pascal Case.

Nokkel components are structured like so:

src/
├── components/
│   └── [Component]/
│       ├── [Component].css
│       ├── [Component].stories.tsx
│       ├── [Component].tsx
│       ├── index.ts
│       └── types.ts
├── icons/
│   ├── [Icon]
│   └── index.ts
├── styles/
│   └── global.css
├── 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.