https://github.com/poimen/stencil-design-system-demo
Demo of Design System using StencilJS Component library
https://github.com/poimen/stencil-design-system-demo
Last synced: 4 days ago
JSON representation
Demo of Design System using StencilJS Component library
- Host: GitHub
- URL: https://github.com/poimen/stencil-design-system-demo
- Owner: Poimen
- License: mit
- Created: 2021-12-23T10:32:29.000Z (over 4 years ago)
- Default Branch: main
- Last Pushed: 2021-12-24T09:09:26.000Z (over 4 years ago)
- Last Synced: 2025-02-27T05:52:58.600Z (over 1 year ago)
- Language: JavaScript
- Size: 218 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# stencil-design-system-demo
Demo of Design System using StencilJS Component library.
The intent of this repo is to demonstrate the integration of a number of technology blocks. These are:
- [Style Dictionary](https://amzn.github.io/style-dictionary/#/)
- [StencilJS](https://stenciljs.com/)
- [Storybook](https://storybook.js.org/) with React wrappers
This repo is managed as a monorepo using [RushJS](https://rushjs.io/)
# Getting started
This guide assumes [RushJS](https://rushjs.io/) is installed globally. Please refer to the `rush` command line installation.
1. Clone the repo
2. Install all dependencies
Steps:
```bash
rush update
```
3. Build the packages:
```bash
rush build
```
This process will build all the necessary packages in order as well as the Storybook site.
## Playing with the component
There is a single button component developed as a demonstration with Style Dictionary creating Tailwind configuration. These styles could be generated from a Figma integration, etc. but for the sake of demonstration, the JSON files are preset.
In each of the package and site directories, there is a npm script:
```bash
npm run dev
```
that will start a development server.
The order of project dependency evaluation is:
```
packages/design-tokens --> packages/web-components --> packages/react-web-components --> sites/storybook
```