@thebestco/ui-kit

BestPrice UI Kit

Getting started

Install

yarn add @thebestco/ui-kit styled-components

Storybook

yarn storybook

Testing

yarn test

Build icons from Figma

The icons are exported from Bestprice Figma Icons

yarn build:icons

Sync colors from Figma

The colors are exported from Bestprice Figma colors

Those colors are also in-sync with BestPrice.gr, bp-scripts and more repos.

Peer dependencies

UI kit uses styled-components as peer dependency. You should install styled-components in your project in order to execute the ui-kit.

Designs

All the components are designed in BestPrice Figma ui-kit page

Theme

UI-kit is fully customizable, the user can configured most of the dimensions and all of the colors. Take a look on the bestprice theme preset src/theme/bestPrice/index.ts.

  breakpoints: {
    [string]: {
      fonts: {
        small: {
          size: string,
          lineHeight: string,
          fontWeight: string,
        },
        ...
      },
      inputs: {
        textarea: {
          padding: string,
        },
      }
      buttons: {
        primary: {
          padding: string,
          fontWeight: string,
          borderRadius: string,
        },
        ...
      },
    }
  supportedBreakpoints: [string],
  heuristicBreakpoints: {
    small: [string],
    medium: [string],
    large: [string],
  },
  sizes: {
    default: [number],
  },
  palette: {
    font: {
      light: [string],
    },
    inputBg: {
      light: [string],
      dark: [string],
    },
    inputBorder: {
      light: [string],
      dark: [string],
    },
    ...
  },
  colors: {},
  darkDefaults: {},
  opacity: [number],

breakpoints

The breakpoints object contains dimensions for every breakpoint. The smaller breakpoint is the base and the rest breakpoints override it. Hence, if only the smaller breakpoint exist, all the breakpoints will have the smaller presets.

palette

Colors are always keys from the theme.color. The color object (palette.[type].{color}) schema can be

• A simple string that is always the specific color.
• An {light: string} object, that gives the specific color in light theme, and gives the corresponding dark default in the dark theme.
• An {light: string, dark: string} object,that gives the specific color in light theme, and the specific color in the dark theme.

Colors

An object that maps the color name to the hex value. For instance,

colors: {
  velvet: '#dfafb4',
  porcelain: '#f5f7f8',
  codGray: '#111111'
}

darkDefaults

An object that maps the color name to the color key name in the dark theme. If a color is missing, its dark variation will be the same value. For instance,

darkDefaults: {
  velvet: 'codGray'
}

Providers

Responsive provider

Provides hooks and utilities regarding the current viewport dimensions.

const breakpoint = useBreakpoint(); // for instance 'xs' | 'sm' | 'md'
const {isXS, isSM, isMD, ...} = useResponsive();
const {isSmall, isMedium, isLarge} = useHeuristic();

Theme provider

Provides the evaluated theme that is required to the ui-kit components. The theme is propagated using the styled-components ThemeProvider

const theme = useTheme();

Components

• Box
• Buttons
  • Primary
  • Secondary
  • Nav
  • Naked
• Icons
• Inputs
  • Checkbox
  • Field
  • RadioButton
  • TextArea
• Typography
  • Title
  • Primary
  • Secondary
  • Tertiary
  • Subheading
  • Text
  • Small
  • Paragraph