design-system-demo.tsx

import 'react-app-polyfill/ie11';
import * as ReactDOM from 'react-dom';
import {
  theme,
  ArrowLeftIcon,
  ArrowRightIcon,
  ArrowDiagonalIcon,
  CollectionsIcon,
  Dropdown,
} from '../';
import {
  Box,
  Button,
  ChakraProvider,
  Heading,
  HStack,
  Input,
  Stack,
  Tab,
  TabList,
  Tabs,
  Text,
} from '@chakra-ui/react';
import { useState } from 'react';

const options = [
  {
    value: 'prod',
    label: 'Production',
  },
  {
    value: 'stage',
    label: 'Stage',
  },
  {
    value: 'dev',
    label: 'Dev',
  },
];

const App = () => {
  const [env, setEnv] = useState<string>();
  return (
    <ChakraProvider theme={theme}>
      <Box>
        <Stack spacing={12} p={12}>
          <HStack>
            <CollectionsIcon />
            <ArrowLeftIcon />
            <ArrowRightIcon />
            <ArrowDiagonalIcon />
          </HStack>
          <Box w="3xl">
            <Tabs>
              <TabList>
                <Tab>General</Tab>
                <Tab>Access</Tab>
                <Tab>Collaborators</Tab>
              </TabList>
            </Tabs>
          </Box>
          <Box maxW="2xs">
            <Dropdown
              placeholder="Environment"
              options={options}
              value={env}
              onChange={setEnv}
            />
          </Box>
          <Stack spacing={4}>
            <HStack>
              <Button variant="primary" size="lg">
                Primary Large
              </Button>
              <Button variant="secondary" size="lg">
                Secondary Large
              </Button>
              <Button variant="tertiary" size="lg">
                Tertiary Large
              </Button>
            </HStack>
            <HStack>
              <Button variant="primary" size="md">
                Primary Medium
              </Button>
              <Button variant="secondary" size="md">
                Secondary Medium
              </Button>
              <Button variant="tertiary" size="md">
                Tertiary Medium
              </Button>
            </HStack>
            <HStack>
              <Button variant="primary" size="sm">
                Primary Small
              </Button>
              <Button variant="secondary" size="sm">
                Secondary Small
              </Button>
              <Button variant="tertiary" size="sm">
                Tertiary Small
              </Button>
            </HStack>
            <HStack>
              <Button variant="primary" size="xs">
                Primary X-Small
              </Button>
              <Button variant="secondary" size="xs">
                Secondary X-Small
              </Button>
              <Button variant="tertiary" size="xs">
                Tertiary X-Small
              </Button>
            </HStack>
          </Stack>
          <Stack maxW="sm" spacing={4}>
            <HStack>
              <Input variant="light" placeholder="Search..." size="lg" />
              <Button variant="primary" size="lg">
                Submit
              </Button>
            </HStack>
            <HStack>
              <Input variant="light" placeholder="Search..." size="md" />
              <Button variant="primary" size="md">
                Submit
              </Button>
            </HStack>
            <HStack>
              <Input variant="light" placeholder="Search..." size="sm" />
              <Button variant="primary" size="sm">
                Submit
              </Button>
            </HStack>
            <HStack>
              <Input variant="light" placeholder="Search..." size="xs" />
              <Button variant="primary" size="xs">
                Submit
              </Button>
            </HStack>
            <HStack>
              <Input
                isDisabled
                variant="light"
                placeholder="Search..."
                size="xs"
              />
              <Button isDisabled variant="primary" size="xs">
                Submit
              </Button>
            </HStack>
          </Stack>
          <Stack maxW="sm" spacing={4}>
            <HStack>
              <Input variant="mid" placeholder="Search..." size="lg" />
              <Button variant="tertiary" size="lg">
                Submit
              </Button>
            </HStack>
            <HStack>
              <Input variant="mid" placeholder="Search..." size="md" />
              <Button variant="tertiary" size="md">
                Submit
              </Button>
            </HStack>
            <HStack>
              <Input variant="mid" placeholder="Search..." size="sm" />
              <Button variant="tertiary" size="sm">
                Submit
              </Button>
            </HStack>
            <HStack>
              <Input variant="mid" placeholder="Search..." size="xs" />
              <Button variant="tertiary" size="xs">
                Submit
              </Button>
            </HStack>
            <HStack>
              <Input
                isDisabled
                variant="mid"
                placeholder="Search..."
                size="xs"
              />
              <Button isDisabled variant="tertiary" size="xs">
                Submit
              </Button>
            </HStack>
          </Stack>
          <Box>
            <Heading textStyle="h1">Heading 1</Heading>
            <Heading textStyle="h2">Heading 2</Heading>
            <Heading textStyle="h3">Heading 3</Heading>
          </Box>
          <Box>
            <Text textStyle="text-lg">Text Large Regular</Text>
            <Text textStyle="text-lg-bold">Text Large Bold</Text>
            <Text textStyle="text-md">Text Medium Regular</Text>
            <Text textStyle="text-md-bold">Text Medium Bold</Text>
            <Text textStyle="text-sm">Text Small Regular</Text>
            <Text textStyle="text-sm-bold">Text Small Bold</Text>
          </Box>
          <Box>
            <Text textStyle="ui-lg">UI Large Regular</Text>
            <Text textStyle="ui-lg-bold">UI Large Bold</Text>
            <Text textStyle="ui-md">UI Medium Regular</Text>
            <Text textStyle="ui-md-bold">UI Medium Bold</Text>
            <Text textStyle="ui-sm">UI Small Regular</Text>
            <Text textStyle="ui-sm-bold">UI Small Bold</Text>
          </Box>
        </Stack>
      </Box>
    </ChakraProvider>
  );
};

ReactDOM.render(<App />, document.getElementById('root'));