npm

@nokkel/components
TypeScript icon, indicating that this package has built-in type declarations

3.1.2 • Public • Published

React Components

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

Pre-requisites

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.

Readme

Keywords

Package Sidebar

Install

npm i @nokkel/components

Weekly Downloads

519

Version

3.1.2

License

MIT

Unpacked Size

927 kB

Total Files

641

Last publish

Collaborators

  • macru
  • nokkel-developer
  • chiara-nokkel
  • cshaw
  • chrisddonaldson_nokkel
  • curtishuangnokkel