5ire-ui-kit

Official UI-KIT of 5ire Applications

This UIKIT is designed and built based on the design system defined by the 5ire Technology Team. The purpose of this UIKIT is to create a standard look and feel for all 5ire Applications built either by the internal team or any external/community team.

Install node modules

yarn install

How to run the project

yarn start

How to run Storybook components

yarn storybook

How to deploy UI-KIT to npm

npm run build-lib
npm publish --access public

How to use UI-KIT components

BUTTON Component

import { Button, IconButton } from './components';
import InformationIcon from './Svg/icons';

- Size: Small | Medium | Large
<Button size="Small">
  button
</Button>

- Disabled
<Button size="Medium" disabled>
  button
</Button>

- Button with Icon
<IconButton size="Large" Icon={InformationIcon}>
  button
</IconButton>

INPUT Component

- Default
<Input
  id="email"
  label="Email"
  name={input.name}
  value={input.value}
  cbHandler={changeHandler}
/>

- Input with Hint
<Input
  id="email"
  label="Email"
  name={input.name}
  value={input.value}
  hint="Hello world!"
  cbHandler={changeHandler}
/>

- Error with Text
<Input
  id="email"
  label="Email"
  name={input.name}
  value={input.value}
  error="Email is required!"
  cbHandler={changeHandler}
/>

- Error without Text
<Input
  id="email"
  label="Email"
  name={input.name}
  value={input.value}
  isError
  cbHandler={changeHandler}
/>

COLOR

import { Text } from './components';

1) In React Components
- Primary color
<Text font='h1Bold' color='primary' />

- Secondary color
<Text font='h1Bold' color='secondary' />

2) In Styled-Components
import styled from 'styled-components';

const Card = styled.div`
  align-items: flex-start;
  background: ${({ theme }) => theme.colors.primary};
`;

SHADOWS

import styled from 'styled-components';

- shadow03 Shadow
const Card = styled.div`
  align-items: flex-start;
  background: ${({ theme }) => theme.colors.primary};
  box-shadow: ${({ theme }) => theme.shadows.shadow03};
`;

- shadow12 Shadow

const Card = styled.div`
  align-items: flex-start;
  background: ${({ theme }) => theme.colors.primary};
  box-shadow: ${({ theme }) => theme.shadows.shadow12};
`;

TYPOGRAPHY

import { Text } from './components';

- h1Bold Typography
<Text font='h1Bold' color='primary' />

- body2Medium Typography
<Text font='h1Bold' color='body2Medium' />

TEXT Component

import { Text } from './components';

- h1Bold Typography
<Text font='h1Bold' color='primary' />

IMAGE Component

import Image from './components';
import Avatar from './assets/image.png';

- Image with auto width and hight
<Image src={Avatar} alt='Avatar'>

- Image with predefined width and hight
<Image src={Avatar} width={200} height={200} alt='Avatar'>

LINK, EXTERNALLINK, HASHLINK Component

import { Link, ExternalLink, HashLink } from './components';

- Link
<Link to='/dashboard'>Dashboard</Link>

- External Link
<ExternalLink href="https://example.com" target="_blank">

- HashLink Link
<HashLink to='/home#Hero'>Hero</HashLink>

FLEX Component

import { Flex } from './components';

- Default
<Flex>
  <div1>Text1</div1>
  <div2>Text1</div2>
</Flex>

- align props: center | flex-start | flex-end
<Flex align='flex-start'>
  <div1>Text1</div1>
  <div2>Text1</div2>
</Flex>