{"_id":"5ire-ui-kit","_rev":"1-002133e87db90458d3e0b5b965151bb3","name":"5ire-ui-kit","dist-tags":{"latest":"1.0.1"},"versions":{"1.0.1":{"name":"5ire-ui-kit","version":"1.0.1","description":"This is the ui-kit for 5ire","main":"dist/index.js","types":"dist/types/index.d.ts","dependencies":{"@testing-library/jest-dom":"^5.11.4","@testing-library/react":"^11.1.0","@testing-library/user-event":"^12.1.10","@types/jest":"^26.0.15","@types/node":"^12.0.0","@types/react":"^17.0.0","@types/react-dom":"^17.0.0","@types/react-router-dom":"^5.1.8","@types/react-router-hash-link":"^2.4.5","@types/styled-components":"^5.1.17","@types/styled-system":"^5.1.15","path":"^0.12.7","react":"^17.0.2","react-dom":"^17.0.2","react-router-dom":"^5.2.0","react-router-hash-link":"^2.4.3","react-scripts":"4.0.3","styled-components":"^5.3.3","styled-system":"^5.1.5","typescript":"^4.1.2","web-vitals":"^1.0.1"},"scripts":{"start":"react-scripts start","build":"react-scripts build","test":"react-scripts test","eject":"react-scripts eject","lint":"eslint ./","lint-fix":"eslint ./ --fix","format":"prettier --write \"**/*.{js,jsx,json,md}\"","stylelint":"stylelint 'src/**/*.scss' --fix","storybook":"start-storybook -p 6006 -s public","build-storybook":"build-storybook -s public","build-lib":"rollup -c"},"repository":{"type":"git","url":"git+https://github.com/fullDev9233/5ire-ui-toolkit.git"},"keywords":["5ire-ui-kit"],"author":{"name":"Maznichenko Anatolii"},"license":"MIT","bugs":{"url":"https://github.com/fullDev9233/5ire-ui-toolkit/issues"},"homepage":"https://5ire.org/","eslintConfig":{"extends":["react-app","react-app/jest"],"overrides":[{"files":["**/*.stories.*"],"rules":{"import/no-anonymous-default-export":"off"}}]},"browserslist":{"production":[">0.2%","not dead","not op_mini all"],"development":["last 1 chrome version","last 1 firefox version","last 1 safari version"]},"devDependencies":{"@babel/plugin-proposal-private-property-in-object":"^7.16.7","@rollup/plugin-babel":"^5.3.1","@rollup/plugin-commonjs":"^21.0.1","@rollup/plugin-image":"^2.1.1","@rollup/plugin-json":"^4.1.0","@rollup/plugin-node-resolve":"^13.1.3","@rollup/plugin-typescript":"^8.3.0","@rollup/plugin-url":"^6.1.0","@storybook/addon-actions":"^6.4.18","@storybook/addon-essentials":"^6.4.18","@storybook/addon-links":"^6.4.18","@storybook/core-client":"^6.4.18","@storybook/node-logger":"^6.4.18","@storybook/preset-create-react-app":"^3.2.0","@storybook/react":"^6.4.18","@svgr/rollup":"^6.2.1","@types/rollup-plugin-peer-deps-external":"^2.2.1","@types/storybook-react-router":"^1.0.1","@typescript-eslint/eslint-plugin":"^4.28.2","@typescript-eslint/parser":"^4.28.2","eslint":"^7.30.0","eslint-config-prettier":"^8.3.0","eslint-import-resolver-typescript":"^2.5.0","eslint-plugin-import":"^2.25.2","eslint-plugin-jsx-a11y":"^6.4.1","eslint-plugin-prettier":"^4.0.0","eslint-plugin-react":"^7.24.0","eslint-plugin-react-hooks":"^4.2.0","eslint-plugin-storybook":"^0.5.6","prettier":"^2.4.1","rollup":"^2.68.0","rollup-plugin-delete":"^2.0.0","rollup-plugin-peer-deps-external":"^2.2.4","rollup-plugin-postcss":"^4.0.2","rollup-plugin-terser":"^7.0.2","storybook-react-router":"^1.0.8","stylelint":"^13.13.1","stylelint-config-standard":"^22.0.0","themeprovider-storybook":"^1.8.0"},"gitHead":"6e1beff5bde77362b10b621ab7fed6099b531df1","_id":"5ire-ui-kit@1.0.1","_nodeVersion":"16.13.1","_npmVersion":"8.1.2","dist":{"integrity":"sha512-U7aGn1ytv9uHZztiXSmxYgegipi1+ag3m5to9eb7lOHadK2HbM2t6OWj0FvHzAsWjg0uouYT6rB7KKuGgyyERw==","shasum":"49af7d2d63dc5fad822273f4e0fd0b123869859b","tarball":"https://registry.npmjs.org/5ire-ui-kit/-/5ire-ui-kit-1.0.1.tgz","fileCount":79,"unpackedSize":880476,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiKkRWACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmpjvw//eOkVSn6SsDYDLWZ4UxMfTyc+yhpxNOqnCaZ2qT0RSbYPht6n\r\nzAqPRJulpBNb6THq1AvLx1wnVIDvzfRmUgTYYIoazyprxEVZU2ZXyRiak2Cn\r\ng8zZvrmlGfXd8juKXvZC8HAYXwWsf87h9vo+de/IjdApQZXOpEVAgsTEOsqq\r\nxqYjDpTYnZT133nHAOKajd5IPaBv1w2+c0Ucpeawweu+Ns0P4e1mfAtPA9tg\r\nCKQ0muhLB5h/u7oDfnhh4ncLJ4/Gsl6KahHB2r6goDSNX0yawhxBKROGAzvk\r\n3gcVTvyCaceITsOPhgL9Dd4XAQPw7BZct6c6c9ZEDUw8xnHYxopreUpHj8fw\r\ntaXyR9KDVeRzlh0OHobgj5gKDbEPTLkijLJAadmGRhpq/9+13gaj6ClgsxjF\r\nRliKlqRI/9wtjzWDsH3dyv7lkiVq3Lscl/kmRaM8nrMWcjpHXgA5EbrPhOJf\r\nvGbncSQiz72AONc6tpp0ojUqHsYj+qkH5dv37CuersHQ+yNkzblZmk4iHtLP\r\n/BhC+lo7VjyBbmNVwSbTCfYsUKFVWPpNRoyY051G6R5t5V15u0mpqvnGT+Nd\r\nTu1neZe+WGv/1q+DW1ekayZkQvMZEgFJBLipiIzmLtUwLB5VE4/XwdlzeVYz\r\nY5pMTWwhiBueGPeTMyAY0m1T5+XBauGT4UU=\r\n=XL0S\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHSJM1wYKfcsbsMzqyzPHecg4gDj08ES1cUz85Ph7e+VAiEArsy5RzqlmOwftLjsoWL9EnavZh2R9ER6jlIO6jIvhEE="}]},"_npmUser":{"name":"fulldev9233","email":"jimyy9211@gmail.com"},"directories":{},"maintainers":[{"name":"fulldev9233","email":"jimyy9211@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/5ire-ui-kit_1.0.1_1646937173894_0.733388694437068"},"_hasShrinkwrap":false}},"time":{"created":"2022-03-10T18:32:53.893Z","1.0.1":"2022-03-10T18:32:54.100Z","modified":"2022-04-04T10:23:16.737Z"},"maintainers":[{"name":"fulldev9233","email":"jimyy9211@gmail.com"}],"description":"This is the ui-kit for 5ire","homepage":"https://5ire.org/","keywords":["5ire-ui-kit"],"repository":{"type":"git","url":"git+https://github.com/fullDev9233/5ire-ui-toolkit.git"},"author":{"name":"Maznichenko Anatolii"},"bugs":{"url":"https://github.com/fullDev9233/5ire-ui-toolkit/issues"},"license":"MIT","readme":"# Official UI-KIT of 5ire Applications\n\nThis 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.\n\n## Install node modules\n\n```\nyarn install\n```\n\n## How to run the project\n\n```\nyarn start\n```\n\n## How to run Storybook components\n\n```\nyarn storybook\n```\n\n## How to deploy UI-KIT to npm\n```\nnpm run build-lib\nnpm publish --access public\n```\n\n## How to use UI-KIT components\n\n### BUTTON Component\n\n```\nimport { Button, IconButton } from './components';\nimport InformationIcon from './Svg/icons';\n\n- Size: Small | Medium | Large\n<Button size=\"Small\">\n  button\n</Button>\n\n- Disabled\n<Button size=\"Medium\" disabled>\n  button\n</Button>\n\n- Button with Icon\n<IconButton size=\"Large\" Icon={InformationIcon}>\n  button\n</IconButton>\n```\n\n### INPUT Component\n```\n- Default\n<Input\n  id=\"email\"\n  label=\"Email\"\n  name={input.name}\n  value={input.value}\n  cbHandler={changeHandler}\n/>\n\n- Input with Hint\n<Input\n  id=\"email\"\n  label=\"Email\"\n  name={input.name}\n  value={input.value}\n  hint=\"Hello world!\"\n  cbHandler={changeHandler}\n/>\n\n- Error with Text\n<Input\n  id=\"email\"\n  label=\"Email\"\n  name={input.name}\n  value={input.value}\n  error=\"Email is required!\"\n  cbHandler={changeHandler}\n/>\n\n- Error without Text\n<Input\n  id=\"email\"\n  label=\"Email\"\n  name={input.name}\n  value={input.value}\n  isError\n  cbHandler={changeHandler}\n/>\n```\n\n### COLOR\n```\nimport { Text } from './components';\n\n1) In React Components\n- Primary color\n<Text font='h1Bold' color='primary' />\n\n- Secondary color\n<Text font='h1Bold' color='secondary' />\n\n2) In Styled-Components\nimport styled from 'styled-components';\n\nconst Card = styled.div`\n  align-items: flex-start;\n  background: ${({ theme }) => theme.colors.primary};\n`;\n```\n\n### SHADOWS\n```\nimport styled from 'styled-components';\n\n- shadow03 Shadow\nconst Card = styled.div`\n  align-items: flex-start;\n  background: ${({ theme }) => theme.colors.primary};\n  box-shadow: ${({ theme }) => theme.shadows.shadow03};\n`;\n\n- shadow12 Shadow\n\nconst Card = styled.div`\n  align-items: flex-start;\n  background: ${({ theme }) => theme.colors.primary};\n  box-shadow: ${({ theme }) => theme.shadows.shadow12};\n`;\n```\n\n### TYPOGRAPHY\n```\nimport { Text } from './components';\n\n- h1Bold Typography\n<Text font='h1Bold' color='primary' />\n\n- body2Medium Typography\n<Text font='h1Bold' color='body2Medium' />\n```\n\n### TEXT Component\n```\nimport { Text } from './components';\n\n- h1Bold Typography\n<Text font='h1Bold' color='primary' />\n```\n\n### IMAGE Component\n```\nimport Image from './components';\nimport Avatar from './assets/image.png';\n\n- Image with auto width and hight\n<Image src={Avatar} alt='Avatar'>\n\n- Image with predefined width and hight\n<Image src={Avatar} width={200} height={200} alt='Avatar'>\n```\n\n### LINK, EXTERNALLINK, HASHLINK Component\n```\nimport { Link, ExternalLink, HashLink } from './components';\n\n- Link\n<Link to='/dashboard'>Dashboard</Link>\n\n- External Link\n<ExternalLink href=\"https://example.com\" target=\"_blank\">\n\n- HashLink Link\n<HashLink to='/home#Hero'>Hero</HashLink>\n```\n\n### FLEX Component\n```\nimport { Flex } from './components';\n\n- Default\n<Flex>\n  <div1>Text1</div1>\n  <div2>Text1</div2>\n</Flex>\n\n- align props: center | flex-start | flex-end\n<Flex align='flex-start'>\n  <div1>Text1</div1>\n  <div2>Text1</div2>\n</Flex>\n```\n","readmeFilename":"README.md"}