# @element-software/ui.components

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

Latest version **0.1.0** (published 2023-08-03) · 0 weekly downloads

## Install

```sh
npm install @element-software/ui.components
pnpm add @element-software/ui.components
yarn add @element-software/ui.components
bun add @element-software/ui.components
```

## Health

**Score 25/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.1.0 |
| Published | 2023-08-03 |
| First published | 2023-08-03 |
| Weekly downloads | 0 |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 14 |
| Unpacked size | 8.6 MB |
| Known vulnerabilities | 0 (+37 in 1 direct dependencies) |
| Install scripts | no |
| Maintainers | element-software |

## Links

- npm: https://www.npmjs.com/package/@element-software/ui.components
- npm.io page: https://npm.io/package/@element-software/ui.components

## Dependencies (14)

- [yup](https://npm.io/package/yup.md) ^1.2.0
- [next](https://npm.io/package/next.md) 13.4.9
- [react](https://npm.io/package/react.md) 18.2.0
- [eslint](https://npm.io/package/eslint.md) 8.44.0
- [next-auth](https://npm.io/package/next-auth.md) ^4.22.3
- [react-dom](https://npm.io/package/react-dom.md) 18.2.0
- [classnames](https://npm.io/package/classnames.md) ^2.3.2
- [typescript](https://npm.io/package/typescript.md) 5.1.6
- [@types/node](https://npm.io/package/@types/node.md) 20.4.1
- [tailwindcss](https://npm.io/package/tailwindcss.md) 3.3.2
- [autoprefixer](https://npm.io/package/autoprefixer.md) 10.4.14
- [@heroicons/react](https://npm.io/package/@heroicons/react.md) ^2.0.18
- [@headlessui/react](https://npm.io/package/@headlessui/react.md) ^1.7.15
- [eslint-config-next](https://npm.io/package/eslint-config-next.md) 13.4.9

## Recent versions

- 0.1.0 (latest) — 2023-08-03

## README

# [Storybook](https://storybook.js.org/), and [Tailwind](https://www.tailwindcss.com) 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

```bash
.
├── 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:

```bash
npm install
# or
yarn install
# or
pnpm install
```

Then run the Storybook development server:

```bash
npm run storybook
# or
yarn storybook
# or
pnpm storybook
```

Open [http://localhost:6006](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:

``` bash
├── 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:
``` css
@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.

---
_Source: https://npm.io/package/@element-software/ui.components · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._