# piste-ui

> A modular and configurable UI framework for web engineers

Latest version **0.0.4** (published 2022-08-10) · GPL-3.0 license · 0 weekly downloads

## Install

```sh
npm install piste-ui
pnpm add piste-ui
yarn add piste-ui
bun add piste-ui
```

## Health

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

Positive: has types; no vulnerabilities; high quality score.

Warnings: low downloads; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.0.4 |
| Published | 2022-08-10 |
| First published | 2022-08-09 |
| Weekly downloads | 0 |
| License | GPL-3.0 |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 153.8 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | Daniel Lucas |
| Maintainers | ddluc |
| Keywords | react, ui framework, design system, component, ui |

## Links

- npm: https://www.npmjs.com/package/piste-ui
- Repository: https://github.com/ddluc/piste-ui
- Issues: https://github.com/ddluc/piste-ui/issues
- npm.io page: https://npm.io/package/piste-ui

## Alternatives

- [@progress/kendo-ooxml](https://npm.io/package/@progress/kendo-ooxml.md) — 152.1K weekly downloads
- [@progress/kendo-react-ripple](https://npm.io/package/@progress/kendo-react-ripple.md) — 8.0K weekly downloads
- [@progress/kendo-react-orgchart](https://npm.io/package/@progress/kendo-react-orgchart.md) — 4.3K weekly downloads
- [@praxisui/dynamic-fields](https://npm.io/package/@praxisui/dynamic-fields.md) — 2.4K weekly downloads
- [@mesalvo/react-ui](https://npm.io/package/@mesalvo/react-ui.md) — 1.7K weekly downloads

## Recent versions

- 0.0.4 (latest) — 2022-08-10
- 0.0.3 — 2022-08-09
- 0.0.2 — 2022-08-09

## README

## Piste UI 

A hackable UI framework built with React + Typescript. A work in progress. 

View the [**Live Demo**](https://ddluc.github.io/piste-ui/?path=/story/core-button--as-default)

### Component Anatomy

All components are self contained (tests and stories are coeleseced with component implementation) for modular development. To create a new  component run the following command: 

```
~$: npm run scaffold:component -- Button
```

This will automatically generate a new `Button` component in `src/lib/component/` with the following structure: 

```
|--- Button/
|----- __mocks__/
|----- bin/
|---------- index.tsx
|----- stories/
|---------- Button.stories.tsx
|----- Button.tsx
|----- Button.test.tsx
|----- index.ts
```

* `__mocks__/`: Add mock data and assets neded for tests and stories 
* `bin/`: Add supplemental components which are not abstract or re-usable
* `stories/`: The components storybook implementation
* `Button.tsx`: The main component implementation. 
* `Button.test.tsx`: The component tests
* `index.ts`: Manage the export of the Component and prop types. 

#### Best Practices

* Define only one component and prop type per file.
* Implement test cases to maintain ~95% test coverage
* Provide default component styles from theme and expose theme overrides via props
* Export both the `Component` and the `ComponentProps` from the index file
* If the component is a series of exported components, add additional component files in the component root, 
* Don't export components in the `bin/` directory. If they are needed elsewhere, abstract them into a new component
* Don't group components by functionality. All components live in `src/lib/components`. 
* Add a `types.ts` file if a component introduces a new type associated with the component implementation 
* Add a `utils.ts` file if the compnent executes additional logic for improved testability.

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