# @5ire/ui-kit

> This is the ui-kit for 5ire

Latest version **2.1.4** (published 2022-11-01) · MIT license · 0 weekly downloads

## Install

```sh
npm install @5ire/ui-kit
pnpm add @5ire/ui-kit
yarn add @5ire/ui-kit
bun add @5ire/ui-kit
```

## Health

**Score 25/100 (F)** — status: abandoned.

Positive: has types; no vulnerabilities; high quality score.

Warnings: low downloads; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 2.1.4 |
| Published | 2022-11-01 |
| First published | 2022-02-24 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 21 |
| Unpacked size | 1 MB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Maznichenko Anatolii |
| Maintainers | 5ire, 5ire-npm |
| Keywords | @5ire/ui-kit |

## Links

- npm: https://www.npmjs.com/package/@5ire/ui-kit
- Repository: https://github.com/5ire-org/ui-kit
- Homepage: https://5ire.org/
- Issues: https://github.com/5ire-org/ui-kit/issues
- npm.io page: https://npm.io/package/@5ire/ui-kit

## Dependencies (21)

- [path](https://npm.io/package/path.md) ^0.12.7
- [react](https://npm.io/package/react.md) ^17.0.2
- [react-dom](https://npm.io/package/react-dom.md) ^17.0.2
- [typescript](https://npm.io/package/typescript.md) ^4.1.2
- [web-vitals](https://npm.io/package/web-vitals.md) ^1.0.1
- [@types/jest](https://npm.io/package/@types/jest.md) ^26.0.15
- [@types/node](https://npm.io/package/@types/node.md) ^12.0.0
- [@types/react](https://npm.io/package/@types/react.md) ^17.0.0
- [react-scripts](https://npm.io/package/react-scripts.md) 4.0.3
- [styled-system](https://npm.io/package/styled-system.md) ^5.1.5
- [@types/react-dom](https://npm.io/package/@types/react-dom.md) ^17.0.0
- [react-router-dom](https://npm.io/package/react-router-dom.md) ^5.2.0
- [styled-components](https://npm.io/package/styled-components.md) ^5.3.3
- [@types/styled-system](https://npm.io/package/@types/styled-system.md) ^5.1.15
- [@testing-library/react](https://npm.io/package/@testing-library/react.md) ^11.1.0
- [react-router-hash-link](https://npm.io/package/react-router-hash-link.md) ^2.4.3
- [@types/react-router-dom](https://npm.io/package/@types/react-router-dom.md) ^5.1.8
- [@types/styled-components](https://npm.io/package/@types/styled-components.md) ^5.1.17
- [@testing-library/jest-dom](https://npm.io/package/@testing-library/jest-dom.md) ^5.11.4
- [@testing-library/user-event](https://npm.io/package/@testing-library/user-event.md) ^12.1.10
- [@types/react-router-hash-link](https://npm.io/package/@types/react-router-hash-link.md) ^2.4.5

## Alternatives

- [@sveltejs/kit](https://npm.io/package/@sveltejs/kit.md) — 2.2M weekly downloads
- [@atlaskit/theme](https://npm.io/package/@atlaskit/theme.md) — 402.0K weekly downloads
- [@tangle-network/brand](https://npm.io/package/@tangle-network/brand.md) — 10.0K weekly downloads
- [seneca](https://npm.io/package/seneca.md) — 7.4K weekly downloads
- [@bsb/base](https://npm.io/package/@bsb/base.md) — 7.2K weekly downloads

## Recent versions

- 2.1.4 (latest) — 2022-11-01
- 2.1.3 — 2022-08-23
- 2.1.2 — 2022-08-22
- 2.1.1 — 2022-08-18
- 2.1.0 — 2022-08-10
- 2.0.9 — 2022-08-04
- 2.0.8 — 2022-08-04
- 2.0.7 — 2022-08-04
- 2.0.6 — 2022-05-20
- 2.0.5 — 2022-05-19
- 2.0.4 — 2022-04-26
- 2.0.3 — 2022-04-26
- 2.0.2 — 2022-04-26
- 2.0.1 — 2022-04-26
- 2.0.0 — 2022-04-19
- … 55 more at https://npm.io/package/@5ire/ui-kit/versions

## README

![image](https://user-images.githubusercontent.com/4479171/155844338-295fb01b-041b-41ad-84b7-a48b94bf18f3.png)

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

---
_Source: https://npm.io/package/@5ire/ui-kit · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._