Turn.io UI components library.

Install

npm install @turnio/storybook grommet styled-components --save

or

yarn add @turnio/storybook grommet styled-components

Usage

import { Form, FormField } from "grommet";
import { turnTheme, icons, UploadInput } from "@turnio/storybook";

const { Enlarge, Close, Check } = icons;

const App = () => (
  <Grommet theme={turnTheme}>
    <Box direction="row" gap="small" align="center">
      <Enlarge fill={turnTheme.global.colors["dark-4"]} />
      <Close fill={turnTheme.global.colors["dark-4"]} />
      <Check fill={turnTheme.global.colors["dark-4"]} />
    </Box>
    <Form>
      <FormField component={UploadInput} />
    </Form>
  </Grommet>
);

Demo

Live demo - storybook.turn.io

Components

List of exported components - https://github.com/turnhub/turnio-storybook/blob/master/src/components/shared/index.js

List of exported icons - https://github.com/turnhub/turnio-storybook/blob/master/src/components/shared/icons/index.js