UNGUESS Design System


Used by

- Unguess platform

Tech stack

Building components

- 🪴 Zendesk Garden as base design system
- ⚛️ React declarative component-centric UI
- 📚 Storybook for UI component development and auto-generated docs
- 👩‍🎤 Styled Components for component-scoped styling

Maintaining the system

- 📦 Yarn for package management
- 📦 NPM for distribution
- ✅ Chromatic to prevent UI bugs in components (by Storybook maintainers)

Why

The Unguess design system codifies existing UI components into a central, well-maintained repository. It is built to address having to paste the same components into multiple projects again and again. This simplifies building UI's with Storybook's design patterns.

Install

``bash
yarn
`

Global Styles

Components within the design system assume that a set of global styles have been configured. Depending upon the needs of the application, this can be done several ways:

#### Option 1: Render the GlobalStyle component

Useful when you don't need any custom body styling in the application, typically this would be placed in a layout component that wraps all pages, or a top-level App component.

`javascript
import { global } from '@storybook/design-system';
const { GlobalStyle } = global;
`

`javascript
/ Render the global styles once per page /

`

#### Option 2: Use the bodyStyles to apply styling

Useful when you want build upon the shared global styling.

`javascript
import { Global, css } from '@storybook/theming';
import { global } from '@storybook/design-system';
const { bodyStyles } = global;

const customGlobalStyle = css
body {
${bodyStyles}// Custom body styling for the app
}
;

const CustomGlobalStyle = () => ;
`

`javascript
/ Render the global styles once per page /

``