@cambridgecore/cup-pattern-library v0.1.4

Pattern Library

Pattern library PoC for HE, Core, OLS

Developing

Install dependencies Use --force flag for npm to ignore React dependency error form Storybook addon

npm install --force

// or

yarn install

Run

npm run dev 

Storybook

Storybook is used to document and test components in isolation.

Run Storybook locally and see in browser http://localhost:6006/

npm run storybook

Build static Storybook for online deployment

npm run build-storybook

Preview statice Storybook built

npx http-server ./path/to/build

npm package

PoC Pattern library is a npm package @cambridgecore/cup-pattern-library

Build / Publish

Include component to export in components/index.js Build npm package

npx vite build

Login to npm account

npm login

Publish npm package

npm publish

Usage

Install npm package

npm i @cambridgecore/cup-pattern-library

Tokens

Tokens are names for style values used in Figma and transformed into CSS variables (or other format e.g. JS, SCSS). Transformation process is done with Style Dictionary

Transformation

1. Export tokens from Figma Tokens plugin to figma-tokens.json in location src/assets/tokens/figma-tokens.json and push to GitLab repository

2. Transform figma-tokens.json from Figma format to Style Dictionary format with command

 npx token-transformer src/assets/tokens/figma-tokens.json src/assets/tokens/sd-tokens.json

3. Transform sd-tokens.json to CSS variables with command

node transform-tokens.js

Configuration

Configuration and additional transformation options are in file transform-tokens.js More details on configuration are in Style Dictionary documentation

Full configuration file for Style Dictionary transformation by Jan Six https://gist.github.com/six7/9cbce8bcbb16b308c5c87f3729392d21