3962ecd858
Feat/BOOK-426 campaign tag select hotel * fix(BOOK-426): do not show campaign tag if a regular booking code is used and the rate is a campaign * fix(BOOK-426): if no availability show booking code striketrough as default Approved-by: Erik Tiekstra
Scandic Design System
This repo contains the design system for Scandic Hotels.
Consumption is done via transpilePackages in Next.js.
The stack
Tech in this repository
- react-aria-components: Accessible components (set as peer dependency).
- Storybook: Frontend workshop for building UI components and pages in isolation.
- Vite: Build tool
Usage
Refer to the Storybook for reference and use cases.
Scripts
| 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
Overall folders
├── .storybook/ # Storybook scaffolding
├── dist/ # 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.jsonof 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 / Material Symbols
Read the README.md in the monorepo root.