UI-KIT for the Future Projects
Install node modules
yarn install
How to run the project
yarn start
How to run Storybook components
yarn storybook
How to run deploy UI-KIT to npm
npm run build-lib
npm publish --access public
How to use UI-KIT components
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>
- 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>
UI-KIT for the Future Projects
Install node modules
yarn install
How to run the project
yarn start
How to run Storybook components
yarn storybook
How to run deploy UI-KIT to npm
npm run build-lib
npm publish --access public
How to use UI-KIT components
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>
- 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>