@appquality/unguess-design-system NPM

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

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.

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

/* Render the global styles once per page */
<GlobalStyle />

Option 2: Use the `bodyStyles` to apply styling

Useful when you want build upon the shared global styling.

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 = () => <Global styles={customGlobalStyle} />;

/* Render the global styles once per page */
<CustomGlobalStyle />

@everything-registry/sub-chunk-76 @appquality/unguess-streamplayer @infinitebrahmanuniverse/nolb-_appq @zalastax/nolb-_appq

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

3.1.106-update-tiptap-4

11 months ago

3.1.106-update-tiptap-3

11 months ago

3.1.106-update-tiptap-2

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

3.1.106-tiptap-update

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

3.1.91-test-media-errors

1 year ago

3.1.98-test-error-management

1 year ago

3.1.102--canary.cb6e665.0

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

3.1.91-highlighted-obs

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

3.1.88-bookmark-tooltip-changes-3

1 year ago

3.1.88-bookmark-tooltip-changes-2

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

3.1.88-bookmark-tooltip-changes

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

3.1.95-beta-attachments

1 year ago

3.1.94-beta-attachments

1 year ago

3.1.97-beta-attachments

1 year ago

3.1.98-beta-attachments

1 year ago

3.1.82

1 year ago

3.1.99-beta-attachments

1 year ago

3.1.96-beta-attachments

1 year ago

3.1.100-beta-attachments

1 year ago

3.1.92-beta-attachments

1 year ago

3.1.93-beta-attachments

1 year ago

3.1.81

1 year ago

3.1.90-beta-attachments

1 year ago

3.1.89-beta-attachments

1 year ago

3.1.91-beta-attachments

1 year ago

3.1.87-beta-attachments

1 year ago

3.1.80

1 year ago

3.1.88-beta-attachments

1 year ago

3.1.86-beta-attachments

1 year ago

3.1.85-beta-attachments

1 year ago

3.1.84-beta-attachments

1 year ago

3.1.79

1 year ago

3.1.83-beta-attachments

1 year ago

3.1.67-bookmarks

1 year ago

3.1.82-beta-attachments

1 year ago

3.1.81-beta-attachments

1 year ago

3.1.80-beta-attachments

1 year ago

3.1.79-beta-attachments

1 year ago

3.1.78-alpha-attachment

1 year ago

1 year ago

1 year ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

3.1.69--canary.d2f9e4a.0

2 years ago

3.1.70--canary.4dea67b.0

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

3.1.57--canary.fa0857b.0

2 years ago

3.1.57--canary.7d82a1f.1

2 years ago

3.1.57--canary.a16fabf.0

2 years ago

3.1.57--canary.c19f690.0

2 years ago

3.1.57--canary.0d57c58.0

2 years ago

3.1.57--canary.855afdd.0

2 years ago

3.1.57--canary.576d8e3.0

2 years ago

3.1.57--canary.7d82a1f.0

2 years ago

3.1.57--canary.62644e9.0

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

3.1.47-sentiment-beta

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

2.8.28--canary.41.1d4c57d.0

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

UNGUESS Design System

Used by

Tech stack

Why

Install

Global Styles

Option 1: Render the GlobalStyle component

Option 2: Use the bodyStyles to apply styling

Option 1: Render the `GlobalStyle` component

Option 2: Use the `bodyStyles` to apply styling