fabric - Centrifuge Design System UI package

This package contains the implementation of the Centrifuge design system. It is home to:

• Color definitions
• Spacing units
• Icon components
• UI components (e.g. buttons, input controls, panels etc.)

Getting started

To start using Fabric, install the package and its peer dependencies:

# yarn
yarn add @centrifuge/fabric react react-dom styled-components

# npm
npm install --save @centrifuge/fabric react react-dom styled-components

Import the GlobalStyle component, a theme, and styled-components ThemeProvider component, and add them to the root of your React app.

import { GlobalStyle } from '@centrifuge/fabric'
import centrifugeLight from '@centrifuge/fabric/dist/theme/centrifugeLight'
import { ThemeProvider } from 'styled-components'

function App() {
  return (
    <ThemeProvider theme={centrifugeLight}>
      <GlobalStyle />
      {/* Rest of your React app */}
    </ThemeProvider>
  )
}

Integration in the monorepo

• Make sure the same version of react and styled-components is used (at moment of writing: [email protected])
• Add the package directory in apps/package.json under the workspaces prop
• Declare the module in apps/tinlake-ui/declarations.d.ts
• Add the dependency to apps/tinlake-ui/package.json:

  "@centrifuge/fabric": "workspace:*",

• Change the build:deps script in apps/tinlake-ui/package.json:
  • from

    "build:deps": "cd ../tinlake.js && yarn build && cd ../tinlake-ui"

  • to

    "build:deps:tinlake.js": "cd ../tinlake.js && yarn build && cd ../tinlake-ui",
    "build:deps:fabric": "cd ../fabric && yarn build && cd ../tinlake-ui",
    "build:deps": "yarn build:deps:tinlake.js && yarn build:deps:fabric"

Development

With Storybook

$ yarn storybook

Will start the Storybook to allow development of the components in isolation

Watch mode

$ yarn build --watch

Will build locally and listen for changes, allowing to see the changes directly when working on tinlake-ui, for example

Visual regression testing

This package uses Loki for visual regression testing.

To execute visual regression tests locally:

yarn storybook # starts storybook, needed for Loki locally to be able to operate on stories

yarn test

If the test fails (differences were spotted between the reference and current snapshots), the diff images will be created in .loki/difference. If all the changes were expected, the reference snapshots can be approved:

yarn approve

Publishing a new version

Create a new branch and run yarn bump, which bumps the package version, updates the changelog, creates a commit and tags it. Push the branch/tag, which should publish the version to NPM. Open a PR to merge the changes to main. For generating the changelog, make sure to use the conventional commits spec in your commits, with fabric as the scope, e.g.: feat(fabric): Add button component