DRM UI KIT

UI Kit package based on ChakraUI

Install package

npm i drm-ui-kit

Usage of components

import { DrmButton } from "drm-ui-kit"

For styling you can use Emotion library (https://emotion.sh/docs/introduction)

Inside components styles example

<DrmButton label={"Button with top tooltip"} w="300px" color="white"/>

Styled-components style

import styled from "@emotion/styled";

const StyledButton = styled(DrmButton)`
  width: 70vw;
  height: 60px;
`;

How to include fonts

Specify the fonts file

import { Global } from "@emotion/react"

const Fonts = () => (
  <Global
    styles={`
/* Copied from https://fonts.googleapis.com/css2?family=Open+Sans:wght@700&family=Raleway&display=swap */
/* latin-ext */
@font-face {
font-family: 'Open Sans';
font-style: normal;
font-weight: 700;
font-display: swap;
src: url(https://fonts.gstatic.com/s/opensans/v18/mem5YaGs126MiZpBA-UN7rgOXOhpKKSTj5PW.woff2) format('woff2');
unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: 'Open Sans';
font-style: normal;
font-weight: 700;
font-display: swap;
src: url(https://fonts.gstatic.com/s/opensans/v18/mem5YaGs126MiZpBA-UN7rgOUuhpKKSTjw.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(https://fonts.gstatic.com/s/raleway/v18/1Ptxg8zYS_SKggPN4iEgvnHyvveLxVvaorCGPrcVIT9d0c-dYA.woff) format('woff');
unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(https://fonts.gstatic.com/s/raleway/v18/1Ptxg8zYS_SKggPN4iEgvnHyvveLxVvaorCIPrcVIT9d0c8.woff) format('woff');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
`}
  />
)

Include in project

import * as React from "react"
import {
  ChakraProvider,
  extendTheme,
  Container,
  Stack,
} from "@chakra-ui/react"
import { Fonts } from "./Fonts"

//If you need to pass theme to Chakra Provider, you can take it from src/Common/theme.ts

const theme = extendTheme({
  fonts: {
    heading: "Open Sans",
    body: "Raleway",
  },
})
const App = () => (
  <ChakraProvider theme={theme}>
    <Fonts/>
    <Container>
      <Stack>
        <DrmHeading>The spectacle before us was indeed sublime.</DrmHeading>
        <DrmText>
          Apparently we had reached a great height in the atmosphere, for the
          sky was a dead black, and the stars had ceased to twinkle. By the same
          illusion which lifts the horizon of the sea to the level of the
          spectator on a hillside, the sable cloud beneath was dished out, and
          the car seemed to float in the middle of an immense dark sphere, whose
          upper half was strewn with silver. Looking down into the dark gulf
          below, I could see a ruddy light streaming through a rift in the
          clouds.
        </DrmText>
      </Stack>
    </Container>
  </ChakraProvider>
)

Working with forms

It is suggested to use React-Hook-Form library (https://react-hook-form.com/)

Usage example

import { useForm } from 'react-hook-form'
import {
  FormErrorMessage,
  FormLabel,
  FormControl,
  DrmInput,
  DrmButton,
} from '@chakra-ui/react'

export default function HookForm () {
  const {
    handleSubmit,
    register,
    formState: { errors, isSubmitting },
  } = useForm()

  function onSubmit (values) {
    return new Promise((resolve) => {
      setTimeout(() => {
        alert(JSON.stringify(values, null, 2))
        resolve()
      }, 3000)
    })
  }

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <DrmInput
        size={'sm'}
        placeholder={'Username'}
        id={'login'}
        register={register('login', {
          required: 'Provide username',
        })}
        errors={errors}
      />
      <DrmButton label={'Sign in'} size={'sm'} w={'100%'} mb={'65px'} isLoading={isSubmitting} type={'submit'}/>
      <DrmText label={version} textSize={'textXXSmall'} color={CommonColors.Gray500}/>
    </form>
  )
}

{/**You may use inline validation like in example or Yup library */}

const schema = yup.object().shape({
  email: yup.string().email().required(),
  password: yup.string().min(8).max(32).required(),
});

const { register, handleSubmit, formState: { errors }, reset } = useForm({
  resolver: yupResolver(schema),
});

Routing Library

In case to work with <DrmSidebar/> or <DrmBreadCrumbs/> you must use React Router Library and wrap you App in <Router> component

Icons

For icons you could use React Icons (https://react-icons.github.io/react-icons/) or SVG icons from design team

Theming

Client apps created using this library should have root wrapped in <UIKitProvider> with passed theme prop. Themes are imported from UI Kit. Omitting this rule will cause bugs with components layout.

Usage example

<UIKitProvider theme={GSTheme}>
  <App/>
</UIKitProvider>