npm package: 5ire-ui-kit
Description: This is the ui-kit for 5ire
Author: Maznichenko Anatolii
Latest version: 1.0.1

# 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>
```