feat(SW-375): new tokens
new asset generation logic BREAKING CHANGE: New tokens.
This commit is contained in:
Michael Zetterberg
@@ -1,30 +1,120 @@
|
||||
# React + TypeScript + Vite
|
||||
# Scandic Design System
|
||||
|
||||
This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
|
||||
This repo contains the design system for Scandic Hotels.
|
||||
|
||||
Currently, two official plugins are available:
|
||||
It is built on Vite.
|
||||
|
||||
- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh
|
||||
- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
|
||||
The output is an NPM package.
|
||||
|
||||
## Expanding the ESLint configuration
|
||||
It is currently not published to any registry. Consumers are free to choose how to consume the distribution.
|
||||
|
||||
If you are developing a production application, we recommend updating the configuration to enable type aware lint rules:
|
||||
## The stack
|
||||
|
||||
- Configure the top-level `parserOptions` property like this:
|
||||
### Tech in this repository
|
||||
|
||||
```js
|
||||
export default {
|
||||
// other rules...
|
||||
parserOptions: {
|
||||
ecmaVersion: 'latest',
|
||||
sourceType: 'module',
|
||||
project: ['./tsconfig.json', './tsconfig.node.json'],
|
||||
tsconfigRootDir: __dirname,
|
||||
},
|
||||
}
|
||||
- [react-aria-components](https://react-spectrum.adobe.com/react-aria/components.html): Accessible components (set as peer dependency).
|
||||
- [Storybook](https://storybook.js.org/): Frontend workshop for building UI components and pages in isolation.
|
||||
- [Vite](https://vite.dev/): Build tool
|
||||
|
||||
## Usage
|
||||
|
||||
Most of the components in this design system are self explanatory, 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.
|
||||
|
||||
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/design-system.git
|
||||
cd design-system
|
||||
npm install
|
||||
```
|
||||
|
||||
- Replace `plugin:@typescript-eslint/recommended` to `plugin:@typescript-eslint/recommended-type-checked` or `plugin:@typescript-eslint/strict-type-checked`
|
||||
- Optionally add `plugin:@typescript-eslint/stylistic-type-checked`
|
||||
- Install [eslint-plugin-react](https://github.com/jsx-eslint/eslint-plugin-react) and add `plugin:react/recommended` & `plugin:react/jsx-runtime` to the `extends` list
|
||||
## Main script targets
|
||||
|
||||
### Develop
|
||||
|
||||
| Command | Action |
|
||||
| ------------------- | ------------------------------------------------------------------------------------------------------------------------------ |
|
||||
| `npm run 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. |
|
||||
| `npm run lint` | Lints the codebase using ESLint and TypeScript. |
|
||||
| `npm run lint:fix` | Automatically fixes linting issues wherever possible. |
|
||||
|
||||
### Build
|
||||
|
||||
| Command | Action |
|
||||
| --------------- | ---------------------------------------------------- |
|
||||
| `npm run build` | Builds the design system distribution into `./dist`. |
|
||||
|
||||
## Project Structure
|
||||
|
||||
### Overall folders
|
||||
|
||||
```
|
||||
├── .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
|
||||
└── storybook-static/ # Storybook managed internal folder
|
||||
```
|
||||
|
||||
### Component structure
|
||||
|
||||
```
|
||||
├── Compositions/ # A folder with Storybook stories to showcase compositions with other components
|
||||
├──── [CompositionX].stories.tsx #
|
||||
├── component.module.css # The CSS for the component
|
||||
├── [Component].stories.tsx # Storybook stories for the component (exclude compositions)
|
||||
├── [Component].tsx # The main component file
|
||||
├── index.tsx # Entrypoint for the component exports
|
||||
├── types.ts # TypeScript typings for the component
|
||||
└── variants.ts # Class Variance Authority configuration for variants of the component
|
||||
```
|
||||
|
||||
### Typescript configurations
|
||||
|
||||
This project uses two different `tsconfig.json`. One for developing and one for building. The main purpose of the `tsconfig.json` for building is to exclude all the files not needed for the distribution itself.
|
||||
|
||||
### Components
|
||||
|
||||
Each component of the design system is defined in `lib/components`.
|
||||
|
||||
Each component has an index.tsx file that exports the component and its optional subcomponents. Subcomponents are components that are mean to be used togther/nested with the component.
|
||||
|
||||
The components that are considered public API from a consumer standpoint must have Storybook stories that showcases and documents their use.
|
||||
|
||||
Styling is done with CSS modules.
|
||||
|
||||
Variants are implemented with Class Variance Authority.
|
||||
|
||||
The typings for each components live in their respective types.ts file inside the component folder.
|
||||
|
||||
Each component has a dedicated export declaration in `package.json` to facilitate tree shaking and importing component individually. This allows components that are _not_ client components to remain as such when imported in server components.
|
||||
|
||||
> Remember to add an export line to the `package.json` of this package when adding a new components.
|
||||
|
||||
### Storybook
|
||||
|
||||
Each component should have at least one Storybook story. A default story that showcases the component by itself in its default state. More stories are added to showcase other variants or usages of the component.
|
||||
|
||||
#### Compositions
|
||||
|
||||
Stories that involve other non-related components are compositions. These should be placed in the `Compositions/` folder where the composition has the best chance of discoverability, typically inside the component folder of the outermost component of the composition. Exporting the same composition in multiple places can be good for discoverability.
|
||||
|
||||
### Icons
|
||||
|
||||
Still a work in progress.
|
||||
|
||||
Reference in New Issue
Block a user