Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/jameslnewell/design-system-example
A demonstration of the tooling setup for a React based Design System.
https://github.com/jameslnewell/design-system-example
design-system react
Last synced: 9 days ago
JSON representation
A demonstration of the tooling setup for a React based Design System.
- Host: GitHub
- URL: https://github.com/jameslnewell/design-system-example
- Owner: jameslnewell
- Created: 2019-08-21T05:03:57.000Z (about 5 years ago)
- Default Branch: master
- Last Pushed: 2023-01-26T15:37:23.000Z (almost 2 years ago)
- Last Synced: 2024-10-12T03:18:39.537Z (25 days ago)
- Topics: design-system, react
- Language: TypeScript
- Homepage:
- Size: 6.55 MB
- Stars: 1
- Watchers: 3
- Forks: 0
- Open Issues: 28
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
Awesome Lists containing this project
README
# design-system-example
[](https://github.com/jameslnewell/design-system-example/actions)
Components for building UI/UX.
| | |
| ---------- | --------------------------------------------------------------------------------------------------------------------- |
| Website | [design-system-example-website.jameslnewell.now.sh](https://design-system-example-website.jameslnewell.now.sh/) |
| Playground | [design-system-example-playground.jameslnewell.now.sh](https://design-system-example-playground.jameslnewell.now.sh/) |
## Installation
To install the necessary dependencies run:
```
nvm use
yarn
```
## Component playground
To start the component playground run:
```
yarn run start:playground
```
```
http://localhost:8000/
```
## Documentation website
To start the documentation website run:
```
yarn run start:website
```
Then browse to:
```
http://localhost:8001/
```
## Linting
To run the lint and type checks run:
```
yarn run lint
yarn run type
```
## Testing
To run the tests run:
```
yarn run test
```
## To Do
- bundle size comparison
- prop tables generated from typescript types - https://www.npmjs.com/package/gatsby-transformer-react-docgen
- notifications back to github e.g. dangerjs messages, bundle size, deployment urls