scandic/web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merged in feature/transpile-design-system (pull request #2621)

Browse Source 
Feature/transpile design system

* remove example, we should use storybook instead

* remove example, we should use storybook instead

* css-modules cannot have :root, moved affected css-variables to globals.css

* .

* scandic-web no longer depends on design-system#build

* * Update readme
* Remove test code


Approved-by: Anton Gunnarsson
This commit is contained in:
Joakim Jäderberg
2025-08-12 09:07:33 +00:00
parent 011f191c65
commit 855f795d50
44 changed files with 164 additions and 779 deletions
Download Patch File Download Diff File Expand all files Collapse all files

85
packages/design-system/README.md
View File

@@ -2,11 +2,7 @@
This repo contains the design system for Scandic Hotels.
It is built on Vite.
The output is an NPM package.
It is currently not published to any registry. Consumers are free to choose how to consume the distribution.
Consumption is done via `transpilePackages` in Next.js.
## The stack
@@ -18,78 +14,16 @@ It is currently not published to any registry. Consumers are free to choose how
## Usage
Most of the components in this design system are self explanatory, refer to the Storybook for reference and use cases.
Refer to the Storybook for reference and use cases.
However there are some components that benefit from a bit more documentation and these have more documentation attached to their Storybook.
### Scripts
One such notable component is the `Typography` component. Read the documentation in the docs for the components story in Storybook at `lib/components/Typography/Typography.docs.mdx` or read it in the deployed Storybook in a browser. For example: https://design-system-scandic-hotels.netlify.app/?path=/docs/components-typography--docs
## Contributing
- Clone the repository.
- Do your changes.
- Build the project.
- Push the build output to origin.
### Clone the repository
To get started with the project, clone the repository and install the dependencies:
```bash
git clone git@bitbucket.org:scandic-swap/web.git
cd web
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
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
| Script target | Action |
| ------------- | ------------------------------------------------------------------------------------------------------------------------------ |
| `dev` | Runs the example project through Vite in dev mode. This command will start a local development server that serves `./example`. |
| `storybook` | Starts the Storybook server and launches into the Storybook UI. |
| `lint` | Lints the codebase using ESLint and TypeScript. |
| `lint:fix` | Automatically fixes linting issues wherever possible. |
### Build
| Script target | Action |
| ------------- | ---------------------------------------------------- |
| `build` | Builds the design system distribution into `./dist`. |
| Script target | Action |
| ------------- | --------------------------------------------------------------- |
| `dev` | Starts the Storybook server and launches into the Storybook UI. |
| `build` | Builds the Storybook |
| `lint` | Lints the codebase using ESLint and TypeScript. |
| `lint:fix` | Automatically fixes linting issues wherever possible. |
## Project Structure
@@ -98,7 +32,6 @@ Both approaches give the same result.
```
├── .storybook/ # Storybook scaffolding
├── dist/ # The build output
├── example/ # The example project consuming the build output
├── generate/ # The code that generates the design system tokens output
├── lib/ # The design system source (tokens, components, etc.)
├── public/ # Public asset folder