fix: update readme for design system

This commit is contained in:
Michael Zetterberg
2025-03-12 15:34:01 +01:00
parent d50cf829e6
commit bb599d4679

View File

@@ -36,27 +36,60 @@ One such notable component is the `Typography` component. Read the documentation
To get started with the project, clone the repository and install the dependencies: To get started with the project, clone the repository and install the dependencies:
```bash ```bash
git clone git@bitbucket.org:scandic-swap/design-system.git git clone git@bitbucket.org:scandic-swap/web.git
cd design-system cd web
npm install yarn
```
### Do your changes
Work your magic.
### Build the project
```bash
yarn workspace @scandic-hotels/design-system build
```
### Push the build output to origin
```bash
git add packages/design-system/
git commit
git push
``` ```
## Main script targets ## Main script targets
Run the following script targets either from the project root with:
```bash
yarn workspace @scandic-hotels/design-system <script target>
```
Or run them from the package directory:
```bash
cd packages/design-system
yarn <script target>
```
Both approaches give the same result.
### Develop ### Develop
| Command | Action | | Script target | Action |
| ------------------- | ------------------------------------------------------------------------------------------------------------------------------ | | ------------- | ------------------------------------------------------------------------------------------------------------------------------ |
| `npm run dev` | Runs the example project through Vite in dev mode. This command will start a local development server that serves `./example`. | | `dev` | Runs the example project through Vite in dev mode. This command will start a local development server that serves `./example`. |
| `npm run storybook` | Starts the Storybook server and launches into the Storybook UI. | | `storybook` | Starts the Storybook server and launches into the Storybook UI. |
| `npm run lint` | Lints the codebase using ESLint and TypeScript. | | `lint` | Lints the codebase using ESLint and TypeScript. |
| `npm run lint:fix` | Automatically fixes linting issues wherever possible. | | `lint:fix` | Automatically fixes linting issues wherever possible. |
### Build ### Build
| Command | Action | | Script target | Action |
| --------------- | ---------------------------------------------------- | | ------------- | ---------------------------------------------------- |
| `npm run build` | Builds the design system distribution into `./dist`. | | `build` | Builds the design system distribution into `./dist`. |
## Project Structure ## Project Structure