Velove Design System for React

Design tokens, theme, React components and helpers for Velove

Velove applications take advantage of the white-label Theme UI project, based on Emotion

This package contains a specific Theme UI theme branded for Velove, as well as shared, themed components.

Source code written in TypeScript, built to ESM, CJS and UMD formats thanks to preconstruct, tested with jest, documented with storybook.

Installation

yarn add theme-ui @velove/design-system
# or
npm install -S theme-ui @velove/design-system

Usage

Refer to Theme UI's Getting Started guide:

/** @jsx jsx */
import { ThemeProvider, jsx } from 'theme-ui';
import { SchedulingTheme } from '@velove/design-system';

const App: React.FC = ({ children }) => <ThemeProvider theme={ThemeProvider}>{children}</ThemeProvider>;

Regarding the different components and/or helpers as well as design guidelines, the Storybook should be the best place to look at.

Contributing

An automated workflow is in place for the publication: open a Pull-Request against the "master" branch (for the current stable version) or the "next" branch (for the next major version).

Ensure that your changes are tested and documented.

Also, since this project uses conventional commits, please follow the convention for commit messages (this is what will define the semantic version to publish with your changes).

Several scripts are available locally:

figmagic: fetch design tokens defined in Figma
figmagic:graphics: fetch SVG icons defined in Figma as graphics then generate React components from the code
lint: run eslint with --fix flag
lint:fix: run eslint with --fix flag
storybook: launch the storybook project
test: test using jest (and ts-jest), you can also use the --watch flag

Design handover with figmagic

figmagic is a CLI tool helping the Design <-> Development handover from a structured Figma document

We use it in this package for 2 main purposes:

design tokens (colors, spaces, fonts properties etc.)
icons (designed as SVG components in Figma)

The Figma document used for this Design System defines a set of tokens (in a page called "Design Tokens"), using Figma's Velove Design System under the hood (that designers use in Figma to design the different components), as well as SVG icons (in a page called "Graphics")

As mentioned earlier, there are 2 local scripts that can be used to sync those:

figmagic: sync the design tokens: will update the src/tokens files with updated values, then run prettier
figmagic:graphics: sync the SVG icons: will update the src/components/Icon/icons files with updated SVG code, then run svgr to generate React components from the SVG source code. svgr uses svgo under the hood to optimise SVG source code, which is configured in .svgo.yml

To use figmagic locally, you will need a local .env file in this folder containing

# The Figma document (URL) used to maintain tokens and graphics
FIGMA_URL='{FIGMA_DOCUMENT_URL}'
# Your personal Figma token: read only is enough - obviously, your account needs access to the referenced document for figmagic to work.
FIGMA_TOKEN='xxxxx-yyyyyyyy-zzzz-zzzz-zzzz-xxxxxxxxxxxx'

Then run one of the scripts above using yarn run