@element-software/ui.components v0.1.0

Storybook, and Tailwind Component Library with TypeScript support.

To use this template:

• Clone it
• Remove the .git folder
• Run git init .
• Then run git add .
• And finally run git commit -m "First commit"

Structure of the template

.
├── LICENSE
├── README.md
├── jest.config.js
├── package.json
├── postcss.config.js
├── public
│   ├── next.svg
│   └── vercel.svg
├── rollup.config.js
├── setup-tests.js
├── src
│   ├── assets
│   ├── components
│   ├── stories
│   └── styles
├── tailwind.config.js
└── tsconfig.json

Getting Started

First, install the packages:

npm install
# or
yarn install
# or
pnpm install

Then run the Storybook development server:

npm run storybook
# or
yarn storybook
# or
pnpm storybook

Open http://localhost:6006 with your browser to see the Storybook dev server.

You can start creating components or modifying existing ones and the changes will hot-reload and update in the browser.

Developing Components

Components are built in isolation and design to run on their own. To create a new component you should create a folder in the components folder named after the component e.g. Table, and the folder will have the below structure:

├── components
    └── Table
        ├── table.css
        ├── Table.spec.tsx
        ├── Table.types.ts
        └── index.tsx

The index.tsx file contains the component itself. Types for the component can be defined in Table.types.ts. Unit tests are written in Table.spec.tsx, and finally the table.css file contains the base Tailwind class imports, plus any additional CSS if required for the component.

Copy the below into your Table.css file:

@tailwind base;
@tailwind components;
@tailwind utilities;

Testing

After adding unit tests you can run npm run test:watch to run tests in watch mode. When testing you should consider what you are testing and why.