Nuwe component library - v2

Rebuilding Nuwe's material-based component system (IN PROGRESS)

Table of Contents

• Nuwe component library - v2
  • Table of Contents
  • Installation
    • Deploying with Vercel
  • Directives for building new components (in progress)
  • Usage
    • Installation
    • Storybook
  • Publishing

Installation

In the host project:

npm i @nuwe/component-library

You will also need the following peer dependencies installed in the host project:

"react"
"react-dom"
"@mui/material"

Deploying with Vercel

Directives for building new components (in progress)

• Avoid exporting styled-components directly unless it's really necessary.
• Never export styled component css snippets.
• Annotate the component props with relevant info to help understand how to use them.
• Export theme as a variable with a list of constants.
• Write unit tests for complex components. Visually check everything else in Storybook.
• Add stories for components as they would appear in the app. This should go in a [component].stories.tsx file.
• Add documentation for the component to explain its usage. This should go in a [component].stories.mdx file.
• Use storybook parameters to set up common background colours/layouts where a component could be used.
• Use storybook controls to allow for users to test the props variant where possible.

Usage

import { NavBar } from "@nuwe/component-library";

Installation

Storybook

To get going with Storybook:

npm run storybook

This should create a local server (usually on localhost:6006) with the interface. The environment makes use of hot reloading, so there is no need to refresh your browser as you build.

Publishing

Follow the instructions outlined here