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>

Table Component

import React from 'react';
import { Card } from '../Card';
import { Table, TableTitle, TableHeader, TableBody } from './';
import Text from '../Text';
import { discussionsHeaderData, discussionData } from '../../utils/data';

...

const column =
  'minmax(80px, 7%) minmax(300px, 39%) minmax(120px, 13%) minmax(120px, 12%) minmax(176px, 16%) minmax(140px, 13%)';

return (
  <Card>
    <TableTitle>
      <Text font="h3Bold" mr="8px">
        Active Discussions
      </Text>
    </TableTitle>
    <Table>
      <TableHeader column={column} headers={discussionsHeaderData} />
      {discussionData.map((element, id) => (
        <TableBody key={id} column={column}>
          <Text font="captionRegular" mx="24px">
            {id + 1}
          </Text>
          <div style={{ margin: '0 24px' }}>
            <Text font="body2Medium" mb="8px">
              {element.title}
            </Text>
            <Text font="captionRegular" color="tdSecondary">
              {element.content}
            </Text>
          </div>
          <Text font="captionRegular" mx="24px">
            {element.comments}
          </Text>
          <Text font="captionRegular" mx="24px">
            {element.changes}
          </Text>
          <Text font="captionRegular" mx="24px">
            {element.date}
          </Text>
          <Text font="captionRegular" mx="24px">
            {element.timeActive}
          </Text>
        </TableBody>
      ))}
    </Table>
  </Card>
);