├── packages ├── button │ ├── README.md │ ├── src │ │ ├── index.ts │ │ ├── utils.ts │ │ ├── Button.spec.tsx │ │ ├── CircleButton.ts │ │ ├── constant.ts │ │ ├── LightButton.ts │ │ ├── SubtleButton.ts │ │ └── LinkButton.ts │ ├── tsconfig.json │ ├── rollup.config.js │ └── package.json ├── popup │ ├── .gitignore │ ├── src │ │ ├── index.less │ │ ├── index.ts │ │ └── Popup.stories.tsx │ ├── tsconfig.json │ ├── rollup.config.js │ └── package.json ├── tooltip │ ├── .gitignore │ ├── src │ │ ├── index.less │ │ ├── index.ts │ │ ├── Tooltip.stories.tsx │ │ └── Tooltip.spec.tsx │ ├── tsconfig.json │ ├── rollup.config.js │ └── package.json ├── badge │ ├── src │ │ ├── index.ts │ │ ├── index.js │ │ ├── index.js.map │ │ ├── Badge.stories.tsx │ │ ├── Badge.spec.tsx │ │ └── __snapshots__ │ │ │ └── Badge.spec.tsx.snap │ ├── tsconfig.json │ ├── rollup.config.js │ └── package.json ├── modal │ ├── src │ │ ├── index.ts │ │ └── ModalWrapper.tsx │ ├── tsconfig.json │ ├── rollup.config.js │ └── package.json ├── tabs │ ├── src │ │ ├── index.ts │ │ └── TabList.tsx │ ├── tsconfig.json │ ├── rollup.config.js │ └── package.json ├── form │ ├── src │ │ ├── slider │ │ │ ├── index.ts │ │ │ ├── types.ts │ │ │ ├── track │ │ │ │ ├── index.ts │ │ │ │ └── constants.ts │ │ │ ├── constants.ts │ │ │ ├── Slider.spec.tsx │ │ │ └── utils.ts │ │ ├── switch │ │ │ └── index.ts │ │ ├── textarea │ │ │ ├── index.ts │ │ │ └── TextArea.tsx │ │ ├── input │ │ │ ├── index.ts │ │ │ └── Input.tsx │ │ ├── radio │ │ │ ├── index.ts │ │ │ └── RadioContext.ts │ │ ├── checkbox │ │ │ ├── index.ts │ │ │ └── CheckboxContext.ts │ │ ├── select │ │ │ ├── index.ts │ │ │ ├── context.tsx │ │ │ └── icon │ │ │ │ ├── DownIcon.tsx │ │ │ │ └── CloseIcon.tsx │ │ └── components │ │ │ └── Addon.tsx │ ├── tsconfig.json │ └── rollup.config.js ├── utils │ ├── src │ │ ├── helpers │ │ │ ├── index.ts │ │ │ └── render.tsx │ │ ├── box │ │ │ ├── index.ts │ │ │ ├── Box.stories.tsx │ │ │ └── Flex.stories.tsx │ │ ├── math.ts │ │ └── index.ts │ ├── tsconfig.json │ ├── rollup.config.js │ └── package.json ├── card │ ├── src │ │ └── index.ts │ ├── tsconfig.json │ ├── rollup.config.js │ └── package.json ├── @vital-ui-lab │ ├── calendar │ │ ├── src │ │ │ └── index.ts │ │ └── package.json │ └── chart │ │ ├── progress-bar │ │ └── index.js │ │ └── package.json ├── menu │ ├── src │ │ └── index.ts │ ├── tsconfig.json │ ├── rollup.config.js │ └── package.json ├── pill │ ├── src │ │ ├── index.ts │ │ └── Pill.stories.tsx │ ├── tsconfig.json │ ├── rollup.config.js │ └── package.json ├── theme │ ├── README.md │ ├── src │ │ ├── theme │ │ │ ├── crm │ │ │ │ ├── index.ts │ │ │ │ └── token.ts │ │ │ └── default │ │ │ │ ├── index.ts │ │ │ │ └── token.ts │ │ ├── init.ts │ │ └── index.ts │ ├── tsconfig.json │ ├── rollup.config.js │ └── package.json ├── avatar │ ├── src │ │ ├── index.ts │ │ ├── constants.ts │ │ └── default-avatar │ │ │ ├── DefaultAvatar.tsx │ │ │ ├── index.ts │ │ │ └── DefaultAvatarO.tsx │ ├── tsconfig.json │ ├── rollup.config.js │ └── package.json ├── list │ ├── src │ │ ├── index.ts │ │ ├── Arrow.tsx │ │ ├── ListContent.ts │ │ └── SubListItem.tsx │ ├── tsconfig.json │ ├── rollup.config.js │ └── package.json ├── icon │ ├── tsconfig.json │ ├── assets │ │ ├── umbrella.svg │ │ ├── browser.svg │ │ ├── door_closed.svg │ │ ├── file_empty.svg │ │ ├── cachet.svg │ │ ├── clock.svg │ │ ├── filter.svg │ │ ├── check.svg │ │ ├── diamond.svg │ │ ├── more_option.svg │ │ ├── pen.svg │ │ ├── mail.svg │ │ ├── message_rounded.svg │ │ ├── notification.svg │ │ ├── finder_closed.svg │ │ ├── message_square_hint.svg │ │ ├── archive.svg │ │ ├── heart.svg │ │ ├── circle_check.svg │ │ ├── message_square_plus.svg │ │ ├── box_check.svg │ │ ├── box_duplicate.svg │ │ ├── message_square_content.svg │ │ ├── moon.svg │ │ ├── door_opened.svg │ │ ├── code.svg │ │ ├── house.svg │ │ ├── pin.svg │ │ ├── credit_card.svg │ │ ├── briefcase_1.svg │ │ ├── message_square.svg │ │ ├── trash.svg │ │ ├── export.svg │ │ ├── chart_piechart.svg │ │ ├── scale.svg │ │ ├── file_plus.svg │ │ ├── tag.svg │ │ ├── chart_linechart.svg │ │ ├── message_square_close.svg │ │ ├── box_s.svg │ │ ├── briefcase_2.svg │ │ ├── mail_read.svg │ │ ├── message_rounded_hint.svg │ │ ├── spanner.svg │ │ ├── sofa.svg │ │ ├── eye.svg │ │ ├── link.svg │ │ ├── message_rounded_plus.svg │ │ ├── message_rounded_content.svg │ │ ├── key.svg │ │ ├── file_duplicate.svg │ │ ├── finder_opened.svg │ │ ├── share.svg │ │ ├── lamp.svg │ │ ├── close.svg │ │ ├── magnifier.svg │ │ ├── message_square_smile.svg │ │ ├── calendar_empty.svg │ │ ├── chart_trend.svg │ │ ├── hard_drive_download.svg │ │ ├── message_square_more.svg │ │ ├── file_content.svg │ │ ├── message_rounded_close.svg │ │ ├── cloud.svg │ │ ├── flag.svg │ │ ├── water_drop.svg │ │ ├── file_paper.svg │ │ ├── finder_plus.svg │ │ ├── edit.svg │ │ ├── backward.svg │ │ ├── eye_o.svg │ │ ├── calendar_minus.svg │ │ ├── book.svg │ │ ├── camera.svg │ │ ├── chart_barchart.svg │ │ ├── message_rounded_smile.svg │ │ ├── file_content_duplicate.svg │ │ ├── news.svg │ │ ├── calendar_hint.svg │ │ ├── calendar_plus.svg │ │ ├── message_rounded_more.svg │ │ ├── first_aid.svg │ │ ├── bus.svg │ │ ├── calendar_checked.svg │ │ ├── file_code.svg │ │ ├── eye_blind.svg │ │ └── glasses.svg │ ├── rollup.config.js │ ├── src │ │ ├── Umbrella.tsx │ │ ├── Browser.tsx │ │ ├── FileEmpty.tsx │ │ ├── Diamond.tsx │ │ ├── Mail.tsx │ │ ├── MessageRounded.tsx │ │ ├── Check.tsx │ │ ├── FinderClosed.tsx │ │ ├── MoreOption.tsx │ │ ├── DoorClosed.tsx │ │ ├── Cachet.tsx │ │ ├── Pen.tsx │ │ ├── Heart.tsx │ │ ├── Briefcase1.tsx │ │ ├── Moon.tsx │ │ ├── Scale.tsx │ │ ├── Clock.tsx │ │ ├── Filter.tsx │ │ ├── MessageSquare.tsx │ │ ├── Code.tsx │ │ ├── Archive.tsx │ │ ├── Key.tsx │ │ ├── FinderOpened.tsx │ │ ├── Notification.tsx │ │ ├── Share.tsx │ │ ├── MessageSquareContent.tsx │ │ ├── BoxCheck.tsx │ │ ├── BoxDuplicate.tsx │ │ ├── CircleCheck.tsx │ │ ├── MessageSquarePlus.tsx │ │ ├── Trash.tsx │ │ ├── MessageSquareHint.tsx │ │ ├── CreditCard.tsx │ │ ├── Export.tsx │ │ ├── House.tsx │ │ ├── Close.tsx │ │ ├── ChartPiechart.tsx │ │ ├── Pin.tsx │ │ ├── FilePlus.tsx │ │ ├── Spanner.tsx │ │ ├── Briefcase2.tsx │ │ ├── Eye.tsx │ │ ├── ChartLinechart.tsx │ │ ├── MessageSquareClose.tsx │ │ ├── Sofa.tsx │ │ ├── Cloud.tsx │ │ ├── DoorOpened.tsx │ │ ├── MailRead.tsx │ │ ├── FileContent.tsx │ │ ├── MessageRoundedContent.tsx │ │ ├── Tag.tsx │ │ ├── Flag.tsx │ │ ├── Lamp.tsx │ │ ├── MessageRoundedPlus.tsx │ │ ├── MessageSquareSmile.tsx │ │ ├── Backward.tsx │ │ ├── FileDuplicate.tsx │ │ ├── MessageRoundedHint.tsx │ │ ├── MessageSquareMore.tsx │ │ └── BoxS.tsx │ └── package.json └── web │ ├── tsconfig.json │ ├── rollup.config.js │ └── src │ └── index.ts ├── .yarnrc ├── jest.setup.js ├── .vscode └── settings.json ├── assets ├── uwillx.png ├── card-header-pic.png ├── demo_screen_shot.png └── ui-kit-vital-logo.png ├── docs ├── favicon.ico ├── main.6eb97036d8af05216ff2.bundle.js.map ├── runtime~main.6eb97036d8af05216ff2.bundle.js.map ├── vendors~main.6eb97036d8af05216ff2.bundle.js.map └── main.4a92d72de52e6fe93b89.bundle.js ├── .prettierrc ├── .storybook ├── .babelrc ├── manager-head.html └── addons.js ├── .editorconfig ├── .prettierignore ├── @types └── types.d.ts ├── .npmignore ├── now.json ├── .gitignore ├── renovate.json ├── .github ├── ISSUE_TEMPLATE │ ├── issue-report.md │ └── feature_request.md └── issue_template.md ├── tsconfig.storybook.json ├── jest.config.js ├── lerna.json ├── examples └── with-next │ ├── package.json │ ├── next.config.js │ └── pages │ └── _document.js ├── tsconfig.json └── .babelrc /packages/button/README.md: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /.yarnrc: -------------------------------------------------------------------------------- 1 | workspaces-experimental true 2 | -------------------------------------------------------------------------------- /packages/popup/.gitignore: -------------------------------------------------------------------------------- 1 | src/index.css 2 | -------------------------------------------------------------------------------- /packages/tooltip/.gitignore: -------------------------------------------------------------------------------- 1 | src/index.css 2 | -------------------------------------------------------------------------------- /jest.setup.js: -------------------------------------------------------------------------------- 1 | import 'jest-styled-components'; 2 | -------------------------------------------------------------------------------- /packages/badge/src/index.ts: -------------------------------------------------------------------------------- 1 | export * from './Badge'; 2 | -------------------------------------------------------------------------------- /packages/modal/src/index.ts: -------------------------------------------------------------------------------- 1 | export * from './Modal'; 2 | -------------------------------------------------------------------------------- /packages/tabs/src/index.ts: -------------------------------------------------------------------------------- 1 | export * from './Tabs'; 2 | -------------------------------------------------------------------------------- /packages/form/src/slider/index.ts: -------------------------------------------------------------------------------- 1 | export * from './Slider'; 2 | -------------------------------------------------------------------------------- /packages/form/src/switch/index.ts: -------------------------------------------------------------------------------- 1 | export * from './Switch'; 2 | -------------------------------------------------------------------------------- /packages/form/src/textarea/index.ts: -------------------------------------------------------------------------------- 1 | export * from './TextArea'; 2 | -------------------------------------------------------------------------------- /packages/utils/src/helpers/index.ts: -------------------------------------------------------------------------------- 1 | export * from './render'; 2 | -------------------------------------------------------------------------------- /packages/card/src/index.ts: -------------------------------------------------------------------------------- 1 | export { default as Card } from './Card'; 2 | -------------------------------------------------------------------------------- /packages/popup/src/index.less: -------------------------------------------------------------------------------- 1 | @import "rc-trigger/assets/index.less"; 2 | -------------------------------------------------------------------------------- /.vscode/settings.json: -------------------------------------------------------------------------------- 1 | { 2 | "javascript.validate.enable": false 3 | } 4 | -------------------------------------------------------------------------------- /packages/@vital-ui-lab/calendar/src/index.ts: -------------------------------------------------------------------------------- 1 | export * from './Calendar'; 2 | -------------------------------------------------------------------------------- /packages/tooltip/src/index.less: -------------------------------------------------------------------------------- 1 | @import "rc-trigger/assets/index.less"; 2 | -------------------------------------------------------------------------------- /packages/form/src/slider/types.ts: -------------------------------------------------------------------------------- 1 | export type Size = 'large' | 'medium' | 'small'; 2 | -------------------------------------------------------------------------------- /packages/menu/src/index.ts: -------------------------------------------------------------------------------- 1 | export * from './Menu'; 2 | export * from './MenuItem'; 3 | -------------------------------------------------------------------------------- /packages/pill/src/index.ts: -------------------------------------------------------------------------------- 1 | export * from './PillsGroup'; 2 | export * from './Pill'; 3 | -------------------------------------------------------------------------------- /packages/utils/src/box/index.ts: -------------------------------------------------------------------------------- 1 | export * from './Box'; 2 | export * from './Flex'; 3 | -------------------------------------------------------------------------------- /packages/popup/src/index.ts: -------------------------------------------------------------------------------- 1 | export * from './Popup'; 2 | export * from './PopupContent'; 3 | -------------------------------------------------------------------------------- /packages/tooltip/src/index.ts: -------------------------------------------------------------------------------- 1 | export * from './Tooltip'; 2 | export * from './styled'; 3 | -------------------------------------------------------------------------------- /assets/uwillx.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/GSS-FED/vital-ui-kit-react/HEAD/assets/uwillx.png -------------------------------------------------------------------------------- /docs/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/GSS-FED/vital-ui-kit-react/HEAD/docs/favicon.ico -------------------------------------------------------------------------------- /packages/@vital-ui-lab/chart/progress-bar/index.js: -------------------------------------------------------------------------------- 1 | export { default } from './ProgressBar'; 2 | -------------------------------------------------------------------------------- /packages/form/src/input/index.ts: -------------------------------------------------------------------------------- 1 | export * from './Input'; 2 | export * from './IconInput'; 3 | -------------------------------------------------------------------------------- /packages/form/src/radio/index.ts: -------------------------------------------------------------------------------- 1 | export * from './Radio'; 2 | export * from './RadioGroup'; 3 | -------------------------------------------------------------------------------- /.prettierrc: -------------------------------------------------------------------------------- 1 | { 2 | "singleQuote": true, 3 | "trailingComma": "all", 4 | "printWidth": 70 5 | } 6 | -------------------------------------------------------------------------------- /packages/form/src/slider/track/index.ts: -------------------------------------------------------------------------------- 1 | import Track from './Track'; 2 | 3 | export default Track; 4 | -------------------------------------------------------------------------------- /packages/theme/README.md: -------------------------------------------------------------------------------- 1 | ```sh 2 | node node_modules/@vital-ui/react-theme/cjs/init.js --ts 3 | ``` 4 | -------------------------------------------------------------------------------- /packages/badge/src/index.js: -------------------------------------------------------------------------------- 1 | export { default } from './Badge'; 2 | // # sourceMappingURL=index.js.map 3 | -------------------------------------------------------------------------------- /packages/form/src/checkbox/index.ts: -------------------------------------------------------------------------------- 1 | export * from './Checkbox'; 2 | export * from './CheckboxGroup'; 3 | -------------------------------------------------------------------------------- /.storybook/.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../.babelrc", 3 | "plugins": [["babel-plugin-styled-components"]] 4 | } 5 | -------------------------------------------------------------------------------- /assets/card-header-pic.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/GSS-FED/vital-ui-kit-react/HEAD/assets/card-header-pic.png -------------------------------------------------------------------------------- /assets/demo_screen_shot.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/GSS-FED/vital-ui-kit-react/HEAD/assets/demo_screen_shot.png -------------------------------------------------------------------------------- /assets/ui-kit-vital-logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/GSS-FED/vital-ui-kit-react/HEAD/assets/ui-kit-vital-logo.png -------------------------------------------------------------------------------- /packages/form/src/select/index.ts: -------------------------------------------------------------------------------- 1 | export * from './Select'; 2 | export * from './MultiSelect'; 3 | export * from './Tag'; 4 | -------------------------------------------------------------------------------- /packages/avatar/src/index.ts: -------------------------------------------------------------------------------- 1 | export * from './Avatar'; 2 | export * from './AvatarBadge'; 3 | export { defaultAvatarSets } from './default-avatar'; 4 | -------------------------------------------------------------------------------- /.editorconfig: -------------------------------------------------------------------------------- 1 | root = true 2 | 3 | [*] 4 | indent_style = space 5 | indent_size = 2 6 | end_of_line = lf 7 | charset = utf-8 8 | insert_final_newline = true 9 | -------------------------------------------------------------------------------- /packages/badge/src/index.js.map: -------------------------------------------------------------------------------- 1 | {"version":3,"file":"index.js","sourceRoot":"","sources":["index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,SAAS,CAAC"} -------------------------------------------------------------------------------- /packages/list/src/index.ts: -------------------------------------------------------------------------------- 1 | export { default as ListItem } from './ListItem'; 2 | export { default as ListContent } from './ListContent'; 3 | 4 | export * from './List'; 5 | -------------------------------------------------------------------------------- /.prettierignore: -------------------------------------------------------------------------------- 1 | node_modules/ 2 | dist/ 3 | storybook-static/ 4 | flow/ 5 | flow-typed/ 6 | package-lock.json 7 | package.json 8 | .git/ 9 | build/ 10 | esm/ 11 | cjs/ 12 | -------------------------------------------------------------------------------- /packages/theme/src/theme/crm/index.ts: -------------------------------------------------------------------------------- 1 | import * as defaultToken from './token'; 2 | import * as colors from './colors'; 3 | 4 | export default { 5 | colors, 6 | ...defaultToken, 7 | }; 8 | -------------------------------------------------------------------------------- /docs/main.6eb97036d8af05216ff2.bundle.js.map: -------------------------------------------------------------------------------- 1 | {"version":3,"file":"main.6eb97036d8af05216ff2.bundle.js","sources":["webpack:///main.6eb97036d8af05216ff2.bundle.js"],"mappings":"AAAA","sourceRoot":""} -------------------------------------------------------------------------------- /packages/theme/src/theme/default/index.ts: -------------------------------------------------------------------------------- 1 | import * as defaultToken from './token'; 2 | import * as colors from './colors'; 3 | 4 | export default { 5 | colors, 6 | ...defaultToken, 7 | }; 8 | -------------------------------------------------------------------------------- /@types/types.d.ts: -------------------------------------------------------------------------------- 1 | declare module '*.svg' { 2 | const content: any; 3 | export default content; 4 | } 5 | declare module '*.png' { 6 | const content: any; 7 | export default content; 8 | } 9 | -------------------------------------------------------------------------------- /.storybook/manager-head.html: -------------------------------------------------------------------------------- 1 | 2 | 7 | -------------------------------------------------------------------------------- /docs/runtime~main.6eb97036d8af05216ff2.bundle.js.map: -------------------------------------------------------------------------------- 1 | {"version":3,"file":"runtime~main.6eb97036d8af05216ff2.bundle.js","sources":["webpack:///runtime~main.6eb97036d8af05216ff2.bundle.js"],"mappings":"AAAA","sourceRoot":""} -------------------------------------------------------------------------------- /docs/vendors~main.6eb97036d8af05216ff2.bundle.js.map: -------------------------------------------------------------------------------- 1 | {"version":3,"file":"vendors~main.6eb97036d8af05216ff2.bundle.js","sources":["webpack:///vendors~main.6eb97036d8af05216ff2.bundle.js"],"mappings":";AAAA","sourceRoot":""} -------------------------------------------------------------------------------- /packages/form/src/slider/constants.ts: -------------------------------------------------------------------------------- 1 | export default { 2 | small: { 3 | handlerSize: '24px', 4 | }, 5 | medium: { 6 | handlerSize: '26px', 7 | }, 8 | large: { 9 | handlerSize: '28px', 10 | }, 11 | }; 12 | -------------------------------------------------------------------------------- /packages/utils/src/math.ts: -------------------------------------------------------------------------------- 1 | export const trunTo = (value: string | number): string | number => { 2 | const num = Number(value); 3 | if (!Number.isNaN(num)) { 4 | return num > 99 ? '99+' : num; 5 | } 6 | return value; 7 | }; 8 | -------------------------------------------------------------------------------- /packages/form/src/slider/track/constants.ts: -------------------------------------------------------------------------------- 1 | export default { 2 | small: { 3 | trackHeight: '8px', 4 | }, 5 | medium: { 6 | trackHeight: '10px', 7 | }, 8 | large: { 9 | trackHeight: '12px', 10 | }, 11 | }; 12 | -------------------------------------------------------------------------------- /.npmignore: -------------------------------------------------------------------------------- 1 | .babelrc 2 | .storybook 3 | assets 4 | build 5 | flow 6 | flow-typed 7 | stories 8 | storybook-static 9 | .bitmap 10 | .eslintrc 11 | .flowconfig 12 | bit.json 13 | yarn-error.log 14 | bundle-stats.html 15 | **/__mocks__/** 16 | -------------------------------------------------------------------------------- /packages/badge/src/Badge.stories.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { storiesOf } from '@storybook/react'; 3 | import { Badge } from './Badge'; 4 | 5 | storiesOf('Packages | Badge', module).add('Basic', () => ( 6 | 100 7 | )); 8 | -------------------------------------------------------------------------------- /now.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "speed-vital-react", 3 | "version": 2, 4 | "builds": [ 5 | { 6 | "src": "examples/speed/package.json", 7 | "use": "@now/static-build", 8 | "config": { "distDir": "build" } 9 | } 10 | ] 11 | } 12 | -------------------------------------------------------------------------------- /packages/button/src/index.ts: -------------------------------------------------------------------------------- 1 | export * from './Button'; 2 | export * from './ButtonGroup'; 3 | export * from './FlatButton'; 4 | export * from './SubtleButton'; 5 | export * from './CircleButton'; 6 | export * from './LinkButton'; 7 | export * from './LightButton'; 8 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | build 3 | node_modules/ 4 | *.log 5 | dist 6 | bundle-stats.html 7 | yarn-error.log 8 | esm/ 9 | .cache/ 10 | coverage/ 11 | .changelog/ 12 | cjs/ 13 | types/ 14 | js2tsx 15 | storybook-static 16 | .awcache 17 | 18 | # Next example 19 | .next 20 | -------------------------------------------------------------------------------- /packages/avatar/src/constants.ts: -------------------------------------------------------------------------------- 1 | export type AvatarSize = 2 | | 'xlarge' 3 | | 'large' 4 | | 'medium' 5 | | 'small' 6 | | 'xsmall'; 7 | 8 | export type BuiltinTheme = { 9 | [key in AvatarSize]: { 10 | size: string; 11 | borderRadius: string; 12 | } 13 | }; 14 | -------------------------------------------------------------------------------- /packages/button/src/utils.ts: -------------------------------------------------------------------------------- 1 | export const natureColor = (theme: any) => ({ 2 | default: theme.colors.secondary700, 3 | primary: theme.colors.primary, 4 | success: theme.colors.success, 5 | info: theme.colors.info, 6 | alarm: theme.colors.alarm, 7 | warning: theme.colors.warning, 8 | }); 9 | -------------------------------------------------------------------------------- /packages/utils/src/index.ts: -------------------------------------------------------------------------------- 1 | import { trunTo } from './math'; 2 | import withDeprecationWarnings from './withDeprecationWarnings'; 3 | 4 | export { trunTo, withDeprecationWarnings }; 5 | export * from './box'; 6 | export * from './style'; 7 | export * from './is'; 8 | export * from './Value'; 9 | export * from './helpers'; 10 | -------------------------------------------------------------------------------- /packages/popup/src/Popup.stories.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { storiesOf } from '@storybook/react'; 3 | import { Popup } from '.'; 4 | 5 | storiesOf('Packages | Popup', module).add('Basic', () => ( 6 | Popup !}> 7 | 8 | 9 | )); 10 | -------------------------------------------------------------------------------- /packages/theme/src/init.ts: -------------------------------------------------------------------------------- 1 | import fs from 'fs-extra'; 2 | import path from 'path'; 3 | 4 | let themePath = 'theme'; 5 | process.argv.forEach(arg => { 6 | if (arg.includes('--ts')) { 7 | themePath = '../src/theme'; 8 | } 9 | }); 10 | fs.copySync( 11 | path.join(__dirname, themePath), 12 | path.join(process.cwd(), 'theme'), 13 | ); 14 | -------------------------------------------------------------------------------- /.storybook/addons.js: -------------------------------------------------------------------------------- 1 | // import '@storybook/addon-actions/register'; 2 | import '@storybook/addon-links/register'; 3 | import '@storybook/addon-knobs/register'; 4 | import '@storybook/addon-notes/register'; 5 | import '@storybook/addon-options/register'; 6 | import 'storybook-styled-components/register'; 7 | import '@storybook/addon-storysource/register'; 8 | -------------------------------------------------------------------------------- /renovate.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": ["config:base"], 3 | "labels": ["renovate"], 4 | "ignorePaths": [ 5 | "examples", 6 | "packages/react-scripts", 7 | "packages/react-scripts-ts" 8 | ], 9 | "packageRules": [ 10 | { 11 | "packagePatterns": ["^eslint"], 12 | "groupName": "eslint packages" 13 | } 14 | ] 15 | } 16 | -------------------------------------------------------------------------------- /packages/badge/src/Badge.spec.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import rerender from 'react-test-renderer'; 3 | import { Badge } from './Badge'; 4 | 5 | describe('Badge', () => { 6 | it('should render with default styles', () => { 7 | const badge = rerender.create(1); 8 | expect(badge.toJSON()).toMatchSnapshot(); 9 | }); 10 | }); 11 | -------------------------------------------------------------------------------- /packages/button/src/Button.spec.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { Button } from './Button'; 3 | import { render } from '@testing-library/react'; 4 | 5 | describe('Button', () => { 6 | it('should render with default styles', () => { 7 | const button = render(); 8 | expect(button).toMatchSnapshot(); 9 | }); 10 | }); 11 | -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/issue-report.md: -------------------------------------------------------------------------------- 1 | --- 2 | name: Issue report 3 | about: Create a report to help us improve 4 | 5 | --- 6 | 7 | ## Version of library 8 | 9 | 10 | 11 | ## Steps to Reproduce the Problem 12 | 1. 13 | 1. 14 | 1. 15 | 16 | ## Expected Behavior 17 | 18 | 19 | ## Actual Behavior 20 | 21 | 22 | ## Other details 23 | -------------------------------------------------------------------------------- /packages/button/src/CircleButton.ts: -------------------------------------------------------------------------------- 1 | import styled from 'styled-components'; 2 | import { Button } from './Button'; 3 | 4 | export const CircleButton = styled(Button)` 5 | display: flex; 6 | justify-content: center; 7 | align-items: center; 8 | padding: 0; 9 | border-radius: 100%; 10 | width: 2.066rem; 11 | line-height: 2.066rem; 12 | height: 2.066rem; 13 | `; 14 | -------------------------------------------------------------------------------- /packages/badge/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../tsconfig.json", 3 | "compilerOptions": { 4 | "rootDir": "./src", 5 | "outDir": "./dist", 6 | "declarationDir": "./types" 7 | }, 8 | "include": ["src/**/*"], 9 | "exclude": [ 10 | "**/__tests__", 11 | "**/__mocks__", 12 | "**/*.test.tsx", 13 | "**/*.spec.tsx", 14 | "**/*.stories.tsx" 15 | ] 16 | } 17 | -------------------------------------------------------------------------------- /packages/card/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../tsconfig.json", 3 | "compilerOptions": { 4 | "rootDir": "./src", 5 | "outDir": "./dist", 6 | "declarationDir": "./types" 7 | }, 8 | "include": ["src/**/*"], 9 | "exclude": [ 10 | "**/__tests__", 11 | "**/__mocks__", 12 | "**/*.test.tsx", 13 | "**/*.test.tsx", 14 | "**/*.stories.tsx" 15 | ] 16 | } 17 | -------------------------------------------------------------------------------- /packages/icon/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../tsconfig.json", 3 | "compilerOptions": { 4 | "rootDir": "./src", 5 | "outDir": "./dist", 6 | "declarationDir": "./types" 7 | }, 8 | "include": ["src/**/*"], 9 | "exclude": [ 10 | "**/__tests__", 11 | "**/__mocks__", 12 | "**/*.test.tsx", 13 | "**/*.test.tsx", 14 | "**/*.stories.tsx" 15 | ] 16 | } 17 | -------------------------------------------------------------------------------- /packages/list/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../tsconfig.json", 3 | "compilerOptions": { 4 | "rootDir": "./src", 5 | "outDir": "./dist", 6 | "declarationDir": "./types" 7 | }, 8 | "include": ["src/**/*"], 9 | "exclude": [ 10 | "**/__tests__", 11 | "**/__mocks__", 12 | "**/*.test.tsx", 13 | "**/*.test.tsx", 14 | "**/*.stories.tsx" 15 | ] 16 | } 17 | -------------------------------------------------------------------------------- /packages/menu/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../tsconfig.json", 3 | "compilerOptions": { 4 | "rootDir": "./src", 5 | "outDir": "./dist", 6 | "declarationDir": "./types" 7 | }, 8 | "include": ["src/**/*"], 9 | "exclude": [ 10 | "**/__tests__", 11 | "**/__mocks__", 12 | "**/*.test.tsx", 13 | "**/*.test.tsx", 14 | "**/*.stories.tsx" 15 | ] 16 | } 17 | -------------------------------------------------------------------------------- /packages/pill/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../tsconfig.json", 3 | "compilerOptions": { 4 | "rootDir": "./src", 5 | "outDir": "./dist", 6 | "declarationDir": "./types" 7 | }, 8 | "include": ["src/**/*"], 9 | "exclude": [ 10 | "**/__tests__", 11 | "**/__mocks__", 12 | "**/*.test.tsx", 13 | "**/*.test.tsx", 14 | "**/*.stories.tsx" 15 | ] 16 | } 17 | -------------------------------------------------------------------------------- /packages/popup/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../tsconfig.json", 3 | "compilerOptions": { 4 | "rootDir": "./src", 5 | "outDir": "./dist", 6 | "declarationDir": "./types" 7 | }, 8 | "include": ["src/**/*"], 9 | "exclude": [ 10 | "**/__tests__", 11 | "**/__mocks__", 12 | "**/*.test.tsx", 13 | "**/*.test.tsx", 14 | "**/*.stories.tsx" 15 | ] 16 | } 17 | -------------------------------------------------------------------------------- /packages/tabs/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../tsconfig.json", 3 | "compilerOptions": { 4 | "rootDir": "./src", 5 | "outDir": "./dist", 6 | "declarationDir": "./types" 7 | }, 8 | "include": ["src/**/*"], 9 | "exclude": [ 10 | "**/__tests__", 11 | "**/__mocks__", 12 | "**/*.test.tsx", 13 | "**/*.test.tsx", 14 | "**/*.stories.tsx" 15 | ] 16 | } 17 | -------------------------------------------------------------------------------- /packages/theme/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../tsconfig.json", 3 | "compilerOptions": { 4 | "rootDir": "./src", 5 | "outDir": "./dist", 6 | "declarationDir": "./types" 7 | }, 8 | "include": ["src/**/*"], 9 | "exclude": [ 10 | "**/__tests__", 11 | "**/__mocks__", 12 | "**/*.test.tsx", 13 | "**/*.spec.tsx", 14 | "**/*.stories.tsx" 15 | ] 16 | } 17 | -------------------------------------------------------------------------------- /packages/utils/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../tsconfig.json", 3 | "compilerOptions": { 4 | "rootDir": "./src", 5 | "outDir": "./dist", 6 | "declarationDir": "./types" 7 | }, 8 | "include": ["src/**/*"], 9 | "exclude": [ 10 | "**/__tests__", 11 | "**/__mocks__", 12 | "**/*.test.tsx", 13 | "**/*.test.tsx", 14 | "**/*.stories.tsx" 15 | ] 16 | } 17 | -------------------------------------------------------------------------------- /packages/web/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../tsconfig.json", 3 | "compilerOptions": { 4 | "rootDir": "./src", 5 | "outDir": "./dist", 6 | "declarationDir": "./types" 7 | }, 8 | "include": ["src/**/*"], 9 | "exclude": [ 10 | "**/__tests__", 11 | "**/__mocks__", 12 | "**/*.test.tsx", 13 | "**/*.test.tsx", 14 | "**/*.stories.tsx" 15 | ] 16 | } 17 | -------------------------------------------------------------------------------- /packages/avatar/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../tsconfig.json", 3 | "compilerOptions": { 4 | "rootDir": "./src", 5 | "outDir": "./dist", 6 | "declarationDir": "./types" 7 | }, 8 | "include": ["src/**/*"], 9 | "exclude": [ 10 | "**/__tests__", 11 | "**/__mocks__", 12 | "**/*.test.tsx", 13 | "**/*.spec.tsx", 14 | "**/*.stories.tsx" 15 | ] 16 | } 17 | -------------------------------------------------------------------------------- /packages/form/src/radio/RadioContext.ts: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | interface RadioContextProps { 4 | disabled?: boolean; 5 | seletedValue?: any; 6 | name?: string; 7 | onChange?: (value: any) => void; 8 | } 9 | 10 | const Context = React.createContext({}); 11 | export const RadioProvider = Context.Provider; 12 | export const RadioConsumer = Context.Consumer; 13 | -------------------------------------------------------------------------------- /packages/tooltip/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../tsconfig.json", 3 | "compilerOptions": { 4 | "rootDir": "./src", 5 | "outDir": "./dist", 6 | "declarationDir": "./types" 7 | }, 8 | "include": ["src/**/*"], 9 | "exclude": [ 10 | "**/__tests__", 11 | "**/__mocks__", 12 | "**/*.test.tsx", 13 | "**/*.spec.tsx", 14 | "**/*.stories.tsx" 15 | ] 16 | } 17 | -------------------------------------------------------------------------------- /.github/issue_template.md: -------------------------------------------------------------------------------- 1 | 2 | ## Issue Type 3 | 4 | 5 | 6 | ## Version of Vital UI Kit Recact 7 | 8 | 9 | 10 | ## Steps to Reproduce the Problem 11 | 1. 12 | 1. 13 | 1. 14 | 15 | ## Expected Behavior 16 | 17 | 18 | ## Actual Behavior 19 | 20 | 21 | ## Other details 22 | 23 | -------------------------------------------------------------------------------- /packages/form/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../tsconfig.json", 3 | "compilerOptions": { 4 | "rootDir": "./src", 5 | "outDir": "./dist", 6 | "declarationDir": "./types" 7 | }, 8 | "include": ["src/**/*", "@types"], 9 | "exclude": [ 10 | "**/__tests__", 11 | "**/__mocks__", 12 | "**/*.spec.tsx", 13 | "**/*.test.tsx", 14 | "**/*.stories.tsx" 15 | ] 16 | } 17 | -------------------------------------------------------------------------------- /packages/modal/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../tsconfig.json", 3 | "compilerOptions": { 4 | "rootDir": "./src", 5 | "outDir": "./dist", 6 | "declarationDir": "./types" 7 | }, 8 | "include": ["src/**/*", "@types"], 9 | "exclude": [ 10 | "**/__tests__", 11 | "**/__mocks__", 12 | "**/*.test.tsx", 13 | "**/*.test.tsx", 14 | "**/*.stories.tsx" 15 | ] 16 | } 17 | -------------------------------------------------------------------------------- /packages/utils/src/box/Box.stories.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { storiesOf } from '@storybook/react'; 3 | 4 | import { Box } from '.'; 5 | 6 | storiesOf('utils | Box', module).add('Basic', () => ( 7 | 15 | This is a box! 16 | 17 | )); 18 | -------------------------------------------------------------------------------- /packages/utils/src/box/Flex.stories.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { storiesOf } from '@storybook/react'; 3 | 4 | import { Flex } from '.'; 5 | 6 | storiesOf('utils | Flex', module).add('Basic', () => ( 7 | 14 | Flexbox 15 | 16 | )); 17 | -------------------------------------------------------------------------------- /packages/button/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../tsconfig.json", 3 | "compilerOptions": { 4 | "rootDir": "./src", 5 | "outDir": "./dist", 6 | "declarationDir": "./types", 7 | "noImplicitAny": false 8 | }, 9 | "include": ["src/**/*"], 10 | "exclude": [ 11 | "**/__tests__", 12 | "**/__mocks__", 13 | "**/*.test.tsx", 14 | "**/*.spec.tsx", 15 | "**/*.stories.tsx" 16 | ] 17 | } 18 | -------------------------------------------------------------------------------- /packages/theme/src/theme/crm/token.ts: -------------------------------------------------------------------------------- 1 | export const defaultTransition = 'all 120ms ease-out'; 2 | 3 | // ----- break point ----- // 4 | export const bp = { 5 | desktop: '1440px', 6 | padLand: '1024px', 7 | padMiddle: ' 800px', 8 | padPortrait: ' 768px', 9 | phoneLand: ' 667px', 10 | phoneMiddle: ' 480px', 11 | phonePortrait: ' 320px', 12 | }; 13 | 14 | export const fontSize = [14 as 14, 18 as 18, 24 as 24]; 15 | -------------------------------------------------------------------------------- /packages/theme/src/theme/default/token.ts: -------------------------------------------------------------------------------- 1 | export const defaultTransition = 'all 120ms ease-out'; 2 | 3 | // ----- break point ----- // 4 | export const bp = { 5 | desktop: '1440px', 6 | padLand: '1024px', 7 | padMiddle: ' 800px', 8 | padPortrait: ' 768px', 9 | phoneLand: ' 667px', 10 | phoneMiddle: ' 480px', 11 | phonePortrait: ' 320px', 12 | }; 13 | 14 | export const fontSize = [14 as 14, 18 as 18, 24 as 24]; 15 | -------------------------------------------------------------------------------- /docs/main.4a92d72de52e6fe93b89.bundle.js: -------------------------------------------------------------------------------- 1 | (window.webpackJsonp = window.webpackJsonp || []).push([ 2 | [0], 3 | { 4 | 1462: function (n, o, c) { 5 | 'use strict'; 6 | c.r(o); 7 | c(1463), c(1466), c(1751), c(1756), c(1759), c(1762); 8 | }, 9 | 591: function (n, o, c) { 10 | c(592), c(805), (n.exports = c(1462)); 11 | }, 12 | 717: function (n, o) {}, 13 | }, 14 | [[591, 1, 2]], 15 | ]); 16 | -------------------------------------------------------------------------------- /packages/modal/src/ModalWrapper.tsx: -------------------------------------------------------------------------------- 1 | import styled, { keyframes } from 'styled-components'; 2 | import { Box } from '@vital-ui/react-utils'; 3 | 4 | const fadeIn = keyframes` 5 | 0% { 6 | opacity: 0; 7 | } 8 | 100% { 9 | opacity: 1; 10 | } 11 | `; 12 | 13 | const ModalWrapper = styled(Box)` 14 | position: fixed; 15 | z-index: 1000; 16 | animation: 0.5s ${fadeIn} ease-out; 17 | `; 18 | 19 | export default ModalWrapper; 20 | -------------------------------------------------------------------------------- /packages/badge/src/__snapshots__/Badge.spec.tsx.snap: -------------------------------------------------------------------------------- 1 | // Jest Snapshot v1, https://goo.gl/fbAQLP 2 | 3 | exports[`Badge should render with default styles 1`] = ` 4 | .c0 { 5 | display: inline-block; 6 | vertical-align: middle; 7 | padding: 0.25rem 0.75rem; 8 | border-radius: 0.75rem; 9 | font-size: 0.725rem; 10 | background-color: #00C3FF; 11 | color: #ffffff; 12 | } 13 | 14 | 17 | 1 18 | 19 | `; 20 | -------------------------------------------------------------------------------- /packages/button/src/constant.ts: -------------------------------------------------------------------------------- 1 | export type Nature = 2 | | 'default' 3 | | 'primary' 4 | | 'success' 5 | | 'info' 6 | | 'alarm' 7 | | 'warning'; 8 | 9 | export type ButtonSize = 10 | | 'xlarge' 11 | | 'large' 12 | | 'medium' 13 | | 'small' 14 | | 'xsmall'; 15 | 16 | export type BuiltinSize = { 17 | [key in ButtonSize]: { 18 | fontSize: string; 19 | borderRadius: string; 20 | padding: string; 21 | height: string; 22 | } 23 | }; 24 | -------------------------------------------------------------------------------- /packages/form/src/checkbox/CheckboxContext.ts: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { CheckboxProps } from './Checkbox'; 3 | 4 | export interface CheckboxContextProps { 5 | icon?: CheckboxProps['icon']; 6 | round?: CheckboxProps['round']; 7 | disabled?: CheckboxProps['disabled']; 8 | } 9 | 10 | const Context = React.createContext({}); 11 | export const CheckboxProvider = Context.Provider; 12 | export const CheckboxConsumer = Context.Consumer; 13 | -------------------------------------------------------------------------------- /packages/form/src/slider/Slider.spec.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import rerender from 'react-test-renderer'; 3 | import { Slider } from './Slider'; 4 | 5 | describe('Slider', () => { 6 | it('should render with default styles', () => { 7 | const slider = rerender.create( 8 | {}} 13 | value={1} 14 | />, 15 | ); 16 | expect(slider.toJSON()).toMatchSnapshot(); 17 | }); 18 | }); 19 | -------------------------------------------------------------------------------- /packages/icon/assets/umbrella.svg: -------------------------------------------------------------------------------- 1 | umbrella -------------------------------------------------------------------------------- /packages/utils/src/helpers/render.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { isElement, isReactComponent } from '../is'; 3 | 4 | export const render = ( 5 | Node: any, 6 | Wrapper: any = React.Fragment, 7 | props, 8 | ) => { 9 | if (isElement(Node)) { 10 | return {Node}; 11 | } 12 | if (typeof Node === 'function') { 13 | return Node(props); 14 | } 15 | if (isReactComponent(Node)) { 16 | return React.createElement(Node, props); 17 | } 18 | return Node; 19 | }; 20 | -------------------------------------------------------------------------------- /tsconfig.storybook.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "./tsconfig.json", 3 | "compilerOptions": { 4 | "forceConsistentCasingInFileNames": true, 5 | "noImplicitReturns": false, 6 | "noImplicitThis": false, 7 | "noImplicitAny": false, 8 | "strictNullChecks": false, 9 | "noUnusedLocals": false, 10 | "declaration": false, 11 | "noUnusedParameters": false, 12 | "rootDir": ".", 13 | "baseUrl": "./" 14 | }, 15 | "include": [ 16 | "packages/**/*" 17 | ], 18 | "exclude": ["node_modules"] 19 | } 20 | -------------------------------------------------------------------------------- /packages/button/src/LightButton.ts: -------------------------------------------------------------------------------- 1 | import styled, { css } from 'styled-components'; 2 | import { Button } from './Button'; 3 | import { natureColor } from './utils'; 4 | 5 | export const LightButton = styled(Button)` 6 | ${({ theme, nature }) => css` 7 | background: ${theme.button.light.bg}; 8 | color: ${natureColor(theme)[nature]}; 9 | 10 | &:hover { 11 | background: ${theme.button.light.hoverBg}; 12 | } 13 | &:active { 14 | background: ${theme.button.light.activeBg}; 15 | } 16 | `}; 17 | `; 18 | -------------------------------------------------------------------------------- /packages/avatar/src/default-avatar/DefaultAvatar.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | const DefaultAvatar = props => ( 4 | 5 | 6 | 7 | 8 | 12 | 13 | 14 | ); 15 | 16 | export default DefaultAvatar; 17 | -------------------------------------------------------------------------------- /jest.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | preset: 'ts-jest/presets/js-with-babel', 3 | testEnvironment: 'jsdom', 4 | setupFilesAfterEnv: ['./jest.setup.js'], 5 | testPathIgnorePatterns: [ 6 | '/examples/', 7 | '/node_modules/', 8 | ], 9 | // moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx', 'json'], 10 | moduleNameMapper: { 11 | '\\.(css|less)$': 'identity-obj-proxy', 12 | '\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$': 13 | 'identity-obj-proxy', 14 | }, 15 | }; 16 | -------------------------------------------------------------------------------- /packages/icon/assets/browser.svg: -------------------------------------------------------------------------------- 1 | browser -------------------------------------------------------------------------------- /packages/icon/assets/door_closed.svg: -------------------------------------------------------------------------------- 1 | door_closed -------------------------------------------------------------------------------- /packages/tooltip/src/Tooltip.stories.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { storiesOf } from '@storybook/react'; 3 | import { Tooltip } from '.'; 4 | import { Flex } from '../../web/src'; 5 | // import 'rc-trigger/assets/index.css'; 6 | 7 | storiesOf('Packages | Tooltip', module).add('Basic', () => ( 8 | 9 | hi} 12 | action={['click']} 13 | > 14 | 15 | 16 | 17 | )); 18 | -------------------------------------------------------------------------------- /packages/icon/assets/file_empty.svg: -------------------------------------------------------------------------------- 1 | file_empty -------------------------------------------------------------------------------- /packages/card/rollup.config.js: -------------------------------------------------------------------------------- 1 | import autoExternal from 'rollup-plugin-auto-external'; 2 | import typescript from 'rollup-plugin-typescript2'; 3 | 4 | const config = { 5 | input: 'src/index.ts', 6 | output: [ 7 | { 8 | file: 'dist/index.js', 9 | format: 'esm', 10 | sourcemap: true, 11 | }, 12 | { 13 | file: 'cjs/index.js', 14 | format: 'cjs', 15 | sourcemap: true, 16 | }, 17 | ], 18 | plugins: [ 19 | autoExternal(), 20 | typescript({ useTsconfigDeclarationDir: true }), 21 | ], 22 | }; 23 | 24 | export default config; 25 | -------------------------------------------------------------------------------- /packages/form/rollup.config.js: -------------------------------------------------------------------------------- 1 | import autoExternal from 'rollup-plugin-auto-external'; 2 | import typescript from 'rollup-plugin-typescript2'; 3 | 4 | const config = { 5 | input: 'src/index.ts', 6 | output: [ 7 | { 8 | file: 'dist/index.js', 9 | format: 'esm', 10 | sourcemap: true, 11 | }, 12 | { 13 | file: 'cjs/index.js', 14 | format: 'cjs', 15 | sourcemap: true, 16 | }, 17 | ], 18 | plugins: [ 19 | autoExternal(), 20 | typescript({ useTsconfigDeclarationDir: true }), 21 | ], 22 | }; 23 | 24 | export default config; 25 | -------------------------------------------------------------------------------- /packages/icon/assets/cachet.svg: -------------------------------------------------------------------------------- 1 | cachet -------------------------------------------------------------------------------- /packages/icon/assets/clock.svg: -------------------------------------------------------------------------------- 1 | clock -------------------------------------------------------------------------------- /packages/list/rollup.config.js: -------------------------------------------------------------------------------- 1 | import autoExternal from 'rollup-plugin-auto-external'; 2 | import typescript from 'rollup-plugin-typescript2'; 3 | 4 | const config = { 5 | input: 'src/index.ts', 6 | output: [ 7 | { 8 | file: 'dist/index.js', 9 | format: 'esm', 10 | sourcemap: true, 11 | }, 12 | { 13 | file: 'cjs/index.js', 14 | format: 'cjs', 15 | sourcemap: true, 16 | }, 17 | ], 18 | plugins: [ 19 | autoExternal(), 20 | typescript({ useTsconfigDeclarationDir: true }), 21 | ], 22 | }; 23 | 24 | export default config; 25 | -------------------------------------------------------------------------------- /packages/menu/rollup.config.js: -------------------------------------------------------------------------------- 1 | import autoExternal from 'rollup-plugin-auto-external'; 2 | import typescript from 'rollup-plugin-typescript2'; 3 | 4 | const config = { 5 | input: 'src/index.ts', 6 | output: [ 7 | { 8 | file: 'dist/index.js', 9 | format: 'esm', 10 | sourcemap: true, 11 | }, 12 | { 13 | file: 'cjs/index.js', 14 | format: 'cjs', 15 | sourcemap: true, 16 | }, 17 | ], 18 | plugins: [ 19 | autoExternal(), 20 | typescript({ useTsconfigDeclarationDir: true }), 21 | ], 22 | }; 23 | 24 | export default config; 25 | -------------------------------------------------------------------------------- /packages/pill/rollup.config.js: -------------------------------------------------------------------------------- 1 | import autoExternal from 'rollup-plugin-auto-external'; 2 | import typescript from 'rollup-plugin-typescript2'; 3 | 4 | const config = { 5 | input: 'src/index.ts', 6 | output: [ 7 | { 8 | file: 'dist/index.js', 9 | format: 'esm', 10 | sourcemap: true, 11 | }, 12 | { 13 | file: 'cjs/index.js', 14 | format: 'cjs', 15 | sourcemap: true, 16 | }, 17 | ], 18 | plugins: [ 19 | autoExternal(), 20 | typescript({ useTsconfigDeclarationDir: true }), 21 | ], 22 | }; 23 | 24 | export default config; 25 | -------------------------------------------------------------------------------- /packages/tabs/rollup.config.js: -------------------------------------------------------------------------------- 1 | import autoExternal from 'rollup-plugin-auto-external'; 2 | import typescript from 'rollup-plugin-typescript2'; 3 | 4 | const config = { 5 | input: 'src/index.ts', 6 | output: [ 7 | { 8 | file: 'dist/index.js', 9 | format: 'esm', 10 | sourcemap: true, 11 | }, 12 | { 13 | file: 'cjs/index.js', 14 | format: 'cjs', 15 | sourcemap: true, 16 | }, 17 | ], 18 | plugins: [ 19 | autoExternal(), 20 | typescript({ useTsconfigDeclarationDir: true }), 21 | ], 22 | }; 23 | 24 | export default config; 25 | -------------------------------------------------------------------------------- /packages/web/rollup.config.js: -------------------------------------------------------------------------------- 1 | import autoExternal from 'rollup-plugin-auto-external'; 2 | import typescript from 'rollup-plugin-typescript2'; 3 | 4 | const config = { 5 | input: 'src/index.ts', 6 | output: [ 7 | { 8 | file: 'dist/index.js', 9 | format: 'esm', 10 | sourcemap: true, 11 | }, 12 | { 13 | file: 'cjs/index.js', 14 | format: 'cjs', 15 | sourcemap: true, 16 | }, 17 | ], 18 | plugins: [ 19 | autoExternal(), 20 | typescript({ useTsconfigDeclarationDir: true }), 21 | ], 22 | }; 23 | 24 | export default config; 25 | -------------------------------------------------------------------------------- /packages/avatar/rollup.config.js: -------------------------------------------------------------------------------- 1 | import autoExternal from 'rollup-plugin-auto-external'; 2 | import typescript from 'rollup-plugin-typescript2'; 3 | 4 | const config = { 5 | input: 'src/index.ts', 6 | output: [ 7 | { 8 | file: 'dist/index.js', 9 | format: 'esm', 10 | sourcemap: true, 11 | }, 12 | { 13 | file: 'cjs/index.js', 14 | format: 'cjs', 15 | sourcemap: true, 16 | }, 17 | ], 18 | plugins: [ 19 | autoExternal(), 20 | typescript({ useTsconfigDeclarationDir: true }), 21 | ], 22 | }; 23 | 24 | export default config; 25 | -------------------------------------------------------------------------------- /packages/avatar/src/default-avatar/index.ts: -------------------------------------------------------------------------------- 1 | import DefaultAvatar from './DefaultAvatar'; 2 | import DefaultAvatarF from './DefaultAvatarF'; 3 | import DefaultAvatarFO from './DefaultAvatarFO'; 4 | import DefaultAvatarMO from './DefaultAvatarMO'; 5 | import DefaultAvatarM from './DefaultAvatarM'; 6 | import DefaultAvatarO from './DefaultAvatarO'; 7 | 8 | export const defaultAvatarSets = { 9 | default: DefaultAvatar, 10 | female: DefaultAvatarF, 11 | male: DefaultAvatarM, 12 | femaleOutline: DefaultAvatarFO, 13 | maleOutLine: DefaultAvatarMO, 14 | outline: DefaultAvatarO, 15 | }; 16 | -------------------------------------------------------------------------------- /packages/badge/rollup.config.js: -------------------------------------------------------------------------------- 1 | import autoExternal from 'rollup-plugin-auto-external'; 2 | import typescript from 'rollup-plugin-typescript2'; 3 | 4 | const config = { 5 | input: 'src/index.ts', 6 | output: [ 7 | { 8 | file: 'dist/index.js', 9 | format: 'esm', 10 | sourcemap: true, 11 | }, 12 | { 13 | file: 'cjs/index.js', 14 | format: 'cjs', 15 | sourcemap: true, 16 | }, 17 | ], 18 | plugins: [ 19 | autoExternal(), 20 | typescript({ useTsconfigDeclarationDir: true }), 21 | ], 22 | }; 23 | 24 | export default config; 25 | -------------------------------------------------------------------------------- /packages/button/rollup.config.js: -------------------------------------------------------------------------------- 1 | import autoExternal from 'rollup-plugin-auto-external'; 2 | import typescript from 'rollup-plugin-typescript2'; 3 | 4 | const config = { 5 | input: 'src/index.ts', 6 | output: [ 7 | { 8 | file: 'dist/index.js', 9 | format: 'esm', 10 | sourcemap: true, 11 | }, 12 | { 13 | file: 'cjs/index.js', 14 | format: 'cjs', 15 | sourcemap: true, 16 | }, 17 | ], 18 | plugins: [ 19 | autoExternal(), 20 | typescript({ useTsconfigDeclarationDir: true }), 21 | ], 22 | }; 23 | 24 | export default config; 25 | -------------------------------------------------------------------------------- /packages/icon/rollup.config.js: -------------------------------------------------------------------------------- 1 | import autoExternal from 'rollup-plugin-auto-external'; 2 | import typescript from 'rollup-plugin-typescript2'; 3 | 4 | const config = { 5 | input: 'src/index.tsx', 6 | output: [ 7 | { 8 | file: 'dist/index.js', 9 | format: 'esm', 10 | sourcemap: true, 11 | }, 12 | { 13 | file: 'cjs/index.js', 14 | format: 'cjs', 15 | sourcemap: true, 16 | }, 17 | ], 18 | plugins: [ 19 | autoExternal(), 20 | typescript({ useTsconfigDeclarationDir: true }), 21 | ], 22 | }; 23 | 24 | export default config; 25 | -------------------------------------------------------------------------------- /packages/modal/rollup.config.js: -------------------------------------------------------------------------------- 1 | import autoExternal from 'rollup-plugin-auto-external'; 2 | import typescript from 'rollup-plugin-typescript2'; 3 | 4 | const config = { 5 | input: 'src/index.ts', 6 | output: [ 7 | { 8 | file: 'dist/index.js', 9 | format: 'esm', 10 | sourcemap: true, 11 | }, 12 | { 13 | file: 'cjs/index.js', 14 | format: 'cjs', 15 | sourcemap: true, 16 | }, 17 | ], 18 | plugins: [ 19 | autoExternal(), 20 | typescript({ useTsconfigDeclarationDir: true }), 21 | ], 22 | }; 23 | 24 | export default config; 25 | -------------------------------------------------------------------------------- /packages/theme/rollup.config.js: -------------------------------------------------------------------------------- 1 | import autoExternal from 'rollup-plugin-auto-external'; 2 | import typescript from 'rollup-plugin-typescript2'; 3 | 4 | const config = { 5 | input: 'src/index.ts', 6 | output: [ 7 | { 8 | file: 'dist/index.js', 9 | format: 'esm', 10 | sourcemap: true, 11 | }, 12 | { 13 | file: 'cjs/index.js', 14 | format: 'cjs', 15 | sourcemap: true, 16 | }, 17 | ], 18 | plugins: [ 19 | autoExternal(), 20 | typescript({ useTsconfigDeclarationDir: true }), 21 | ], 22 | }; 23 | 24 | export default config; 25 | -------------------------------------------------------------------------------- /packages/utils/rollup.config.js: -------------------------------------------------------------------------------- 1 | import autoExternal from 'rollup-plugin-auto-external'; 2 | import typescript from 'rollup-plugin-typescript2'; 3 | 4 | const config = { 5 | input: 'src/index.ts', 6 | output: [ 7 | { 8 | file: 'dist/index.js', 9 | format: 'esm', 10 | sourcemap: true, 11 | }, 12 | { 13 | file: 'cjs/index.js', 14 | format: 'cjs', 15 | sourcemap: true, 16 | }, 17 | ], 18 | plugins: [ 19 | autoExternal(), 20 | typescript({ useTsconfigDeclarationDir: true }), 21 | ], 22 | }; 23 | 24 | export default config; 25 | -------------------------------------------------------------------------------- /packages/icon/assets/filter.svg: -------------------------------------------------------------------------------- 1 | filter -------------------------------------------------------------------------------- /packages/icon/src/Umbrella.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | const Umbrella = props => ( 4 | 5 | 10 | 11 | ); 12 | 13 | export default Umbrella; 14 | -------------------------------------------------------------------------------- /packages/icon/assets/check.svg: -------------------------------------------------------------------------------- 1 | check -------------------------------------------------------------------------------- /packages/icon/assets/diamond.svg: -------------------------------------------------------------------------------- 1 | diamond -------------------------------------------------------------------------------- /packages/icon/assets/more_option.svg: -------------------------------------------------------------------------------- 1 | more_option -------------------------------------------------------------------------------- /lerna.json: -------------------------------------------------------------------------------- 1 | { 2 | "lerna": "2.9.1", 3 | "packages": [ 4 | "packages/*" 5 | ], 6 | "npmClient": "yarn", 7 | "useWorkspaces": true, 8 | "publish": { 9 | "access": "public" 10 | }, 11 | "version": "0.10.6", 12 | "changelog": { 13 | "repo": "GSS-FED/vital-ui-kit-react", 14 | "labels": { 15 | "enhancement": ":rocket: Enhancement", 16 | "bug": ":bug: Bug Fix", 17 | "internal": ":house: Internal", 18 | "breaking change": ":boom: Breaking Change" 19 | }, 20 | "cacheDir": ".changelog", 21 | "ignoreCommitters": [ 22 | "renovate" 23 | ] 24 | } 25 | } 26 | -------------------------------------------------------------------------------- /packages/tooltip/src/Tooltip.spec.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { render } from '@testing-library/react'; 3 | import { Tooltip } from './Tooltip'; 4 | import { Button } from '@vital-ui/react-button/src'; 5 | 6 | describe('Tooltip', () => { 7 | it('should render with default styles', () => { 8 | const tooltip = render( 9 | 10 | 11 | , 12 | ); 13 | 14 | const button = tooltip.getByText('Click'); 15 | button.click(); 16 | expect(tooltip).toMatchSnapshot(); 17 | }); 18 | }); 19 | -------------------------------------------------------------------------------- /packages/icon/assets/pen.svg: -------------------------------------------------------------------------------- 1 | pen -------------------------------------------------------------------------------- /packages/icon/assets/mail.svg: -------------------------------------------------------------------------------- 1 | mail -------------------------------------------------------------------------------- /packages/icon/assets/message_rounded.svg: -------------------------------------------------------------------------------- 1 | message_rounded -------------------------------------------------------------------------------- /packages/icon/src/Browser.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | const Browser = props => ( 4 | 5 | 10 | 11 | ); 12 | 13 | export default Browser; 14 | -------------------------------------------------------------------------------- /packages/avatar/src/default-avatar/DefaultAvatarO.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | const DefaultAvatarO = props => ( 4 | 5 | 6 | 7 | 8 | 9 | 13 | 14 | 15 | 16 | ); 17 | 18 | export default DefaultAvatarO; 19 | -------------------------------------------------------------------------------- /packages/theme/src/index.ts: -------------------------------------------------------------------------------- 1 | import defaultVariables from './theme/default'; 2 | import defaultComponentsTheme from './theme/default/components'; 3 | import * as globalStyle from './globalStyle'; 4 | import { colorPaletteGenerator } from './helper'; 5 | 6 | const defaultTheme = { 7 | ...defaultVariables, 8 | ...defaultComponentsTheme(defaultVariables), 9 | }; 10 | 11 | export { 12 | default as ThemeProvider, 13 | combinedWithComponent, 14 | combineTheme, 15 | } from './ThemeProvider'; 16 | export { 17 | defaultVariables, 18 | defaultComponentsTheme, 19 | defaultTheme, 20 | globalStyle, 21 | colorPaletteGenerator, 22 | }; 23 | -------------------------------------------------------------------------------- /packages/icon/assets/notification.svg: -------------------------------------------------------------------------------- 1 | notification -------------------------------------------------------------------------------- /packages/icon/assets/finder_closed.svg: -------------------------------------------------------------------------------- 1 | finder_closed -------------------------------------------------------------------------------- /packages/icon/src/FileEmpty.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | const FileEmpty = props => ( 4 | 5 | 10 | 11 | ); 12 | 13 | export default FileEmpty; 14 | -------------------------------------------------------------------------------- /packages/icon/assets/message_square_hint.svg: -------------------------------------------------------------------------------- 1 | message_square_hint -------------------------------------------------------------------------------- /packages/form/src/select/context.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { ControllerStateAndHelpers, DownshiftProps } from 'downshift'; 3 | 4 | const Context = React.createContext< 5 | ControllerStateAndHelpers & DownshiftProps 6 | // @ts-ignore 7 | >(undefined); 8 | export const SelectProvider = Context.Provider; 9 | export const SelectConsumer = Context.Consumer; 10 | 11 | export const withContext = ( 12 | Component: React.ComponentType, 13 | get: (n: any) => any = (n) => n, 14 | ) => (props: T) => ( 15 | 16 | {(value) => } 17 | 18 | ); 19 | -------------------------------------------------------------------------------- /packages/form/src/select/icon/DownIcon.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | export const DownIcon = (props: any) => ( 4 | 12 | 16 | 17 | ); 18 | -------------------------------------------------------------------------------- /packages/icon/assets/archive.svg: -------------------------------------------------------------------------------- 1 | archive -------------------------------------------------------------------------------- /packages/icon/assets/heart.svg: -------------------------------------------------------------------------------- 1 | heart -------------------------------------------------------------------------------- /packages/tooltip/rollup.config.js: -------------------------------------------------------------------------------- 1 | import autoExternal from 'rollup-plugin-auto-external'; 2 | import typescript from 'rollup-plugin-typescript2'; 3 | import postcss from 'rollup-plugin-postcss'; 4 | 5 | const config = { 6 | input: 'src/index.ts', 7 | output: [ 8 | { 9 | file: 'dist/index.js', 10 | format: 'esm', 11 | sourcemap: true, 12 | }, 13 | { 14 | file: 'cjs/index.js', 15 | format: 'cjs', 16 | sourcemap: true, 17 | }, 18 | ], 19 | plugins: [ 20 | autoExternal(), 21 | typescript({ useTsconfigDeclarationDir: true }), 22 | postcss(), 23 | ], 24 | }; 25 | 26 | export default config; 27 | -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/feature_request.md: -------------------------------------------------------------------------------- 1 | --- 2 | name: Feature request 3 | about: Suggest an idea for this project 4 | 5 | --- 6 | 7 | **Is your feature request related to a problem? Please describe.** 8 | A clear and concise description of what the problem is. Ex. I'm always frustrated when [...] 9 | 10 | **Describe the solution you'd like** 11 | A clear and concise description of what you want to happen. 12 | 13 | **Describe alternatives you've considered** 14 | A clear and concise description of any alternative solutions or features you've considered. 15 | 16 | **Additional context** 17 | Add any other context or screenshots about the feature request here. 18 | -------------------------------------------------------------------------------- /packages/icon/assets/circle_check.svg: -------------------------------------------------------------------------------- 1 | circle_check -------------------------------------------------------------------------------- /packages/icon/assets/message_square_plus.svg: -------------------------------------------------------------------------------- 1 | message_square_plus -------------------------------------------------------------------------------- /examples/with-next/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@gssfed/with-next", 3 | "version": "1.0.0", 4 | "description": "", 5 | "scripts": { 6 | "dev": "next", 7 | "build": "next build", 8 | "start": "next start" 9 | }, 10 | "keywords": [], 11 | "author": "", 12 | "license": "MIT", 13 | "peerDependencies": { 14 | "react": "^16.13.1", 15 | "react-dom": "^16.13.1", 16 | "styled-components": "^5.2.1" 17 | }, 18 | "dependencies": { 19 | "@zeit/next-css": "^1.0.1", 20 | "next": "11.1.1", 21 | "next-compose-plugins": "^2.2.1" 22 | }, 23 | "devDependencies": { 24 | "babel-plugin-styled-components": "1.5.1" 25 | } 26 | } 27 | -------------------------------------------------------------------------------- /packages/icon/assets/box_check.svg: -------------------------------------------------------------------------------- 1 | box_check -------------------------------------------------------------------------------- /packages/icon/assets/box_duplicate.svg: -------------------------------------------------------------------------------- 1 | box_duplicate -------------------------------------------------------------------------------- /packages/icon/assets/message_square_content.svg: -------------------------------------------------------------------------------- 1 | message_square_content -------------------------------------------------------------------------------- /packages/icon/src/Diamond.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | const Diamond = props => ( 4 | 5 | 10 | 11 | ); 12 | 13 | export default Diamond; 14 | -------------------------------------------------------------------------------- /packages/icon/assets/moon.svg: -------------------------------------------------------------------------------- 1 | moon -------------------------------------------------------------------------------- /packages/icon/assets/door_opened.svg: -------------------------------------------------------------------------------- 1 | door_opened -------------------------------------------------------------------------------- /packages/@vital-ui-lab/chart/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@vital-ui/react-chart", 3 | "version": "0.8.0", 4 | "description": "", 5 | "main": "cjs/index.js", 6 | "module": "dist/index.js", 7 | "scripts": { 8 | "compile": "tsc && tsc --module commonjs --outdir cjs" 9 | }, 10 | "author": "Eric Yip (https://github.com/ericyip)", 11 | "peerDependencies": { 12 | "react": "^16", 13 | "react-dom": "^16", 14 | "styled-components": "*" 15 | }, 16 | "dependencies": { 17 | "@vital-ui/react-theme": "^0.10.0", 18 | "@vital-ui/react-utils": "^0.10.0", 19 | "classnames": "^2.2.6" 20 | }, 21 | "devDependencies": { 22 | "typescript": "3.8.3" 23 | } 24 | } 25 | -------------------------------------------------------------------------------- /packages/icon/src/Mail.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | const Mail = props => ( 4 | 5 | 10 | 11 | ); 12 | 13 | export default Mail; 14 | -------------------------------------------------------------------------------- /packages/form/src/textarea/TextArea.tsx: -------------------------------------------------------------------------------- 1 | import styled from 'styled-components'; 2 | import { defaultTheme } from '@vital-ui/react-theme'; 3 | 4 | import baseStyle from '../components/FieldBase'; 5 | import { BoxProps } from '@vital-ui/react-utils'; 6 | 7 | export interface TextAreaProps extends BoxProps { 8 | alarm?: boolean; 9 | warning?: boolean; 10 | resize?: boolean; 11 | } 12 | 13 | export const TextArea = styled.textarea` 14 | ${baseStyle}; 15 | height: auto; 16 | ${props => !props.resize && 'resize: none'}; 17 | `; 18 | 19 | TextArea.defaultProps = { 20 | alarm: false, 21 | rows: 3, 22 | resize: false, 23 | warning: false, 24 | theme: defaultTheme, 25 | }; 26 | -------------------------------------------------------------------------------- /packages/icon/assets/code.svg: -------------------------------------------------------------------------------- 1 | code -------------------------------------------------------------------------------- /packages/list/src/Arrow.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | export const Arrow = () => ( 4 | 19 | ); 20 | -------------------------------------------------------------------------------- /packages/icon/assets/house.svg: -------------------------------------------------------------------------------- 1 | house -------------------------------------------------------------------------------- /packages/icon/assets/pin.svg: -------------------------------------------------------------------------------- 1 | pin -------------------------------------------------------------------------------- /packages/icon/assets/credit_card.svg: -------------------------------------------------------------------------------- 1 | credit_card -------------------------------------------------------------------------------- /packages/icon/src/MessageRounded.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | const MessageRounded = props => ( 4 | 5 | 10 | 11 | ); 12 | 13 | export default MessageRounded; 14 | -------------------------------------------------------------------------------- /packages/icon/assets/briefcase_1.svg: -------------------------------------------------------------------------------- 1 | briefcase_1 -------------------------------------------------------------------------------- /packages/icon/assets/message_square.svg: -------------------------------------------------------------------------------- 1 | message_square -------------------------------------------------------------------------------- /packages/icon/assets/trash.svg: -------------------------------------------------------------------------------- 1 | trash -------------------------------------------------------------------------------- /packages/icon/src/Check.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | const Check = props => ( 4 | 10 | 15 | 16 | ); 17 | 18 | export default Check; 19 | -------------------------------------------------------------------------------- /packages/popup/rollup.config.js: -------------------------------------------------------------------------------- 1 | import autoExternal from 'rollup-plugin-auto-external'; 2 | import typescript from 'rollup-plugin-typescript2'; 3 | import postcss from 'rollup-plugin-postcss'; 4 | 5 | const config = { 6 | external: ['react', 'react-dom', 'styled-components'], 7 | input: 'src/index.ts', 8 | output: [ 9 | { 10 | file: 'dist/index.js', 11 | format: 'esm', 12 | sourcemap: true, 13 | }, 14 | { 15 | file: 'cjs/index.js', 16 | format: 'cjs', 17 | sourcemap: true, 18 | }, 19 | ], 20 | plugins: [ 21 | autoExternal(), 22 | typescript({ useTsconfigDeclarationDir: true }), 23 | postcss(), 24 | ], 25 | }; 26 | 27 | export default config; 28 | -------------------------------------------------------------------------------- /packages/icon/assets/export.svg: -------------------------------------------------------------------------------- 1 | export -------------------------------------------------------------------------------- /packages/icon/assets/chart_piechart.svg: -------------------------------------------------------------------------------- 1 | chart_piechart -------------------------------------------------------------------------------- /packages/icon/src/FinderClosed.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | const FinderClosed = props => ( 4 | 5 | 10 | 11 | ); 12 | 13 | export default FinderClosed; 14 | -------------------------------------------------------------------------------- /packages/utils/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@vital-ui/react-utils", 3 | "version": "0.10.6", 4 | "description": "", 5 | "main": "cjs/index.js", 6 | "module": "dist/index.js", 7 | "types": "types/index.d.ts", 8 | "scripts": { 9 | "clean": "rimraf dist cjs types", 10 | "compile": "rollup --config", 11 | "watch": "rollup --config --watch" 12 | }, 13 | "author": "", 14 | "license": "MIT", 15 | "peerDependencies": { 16 | "react": "^16", 17 | "react-dom": "^16", 18 | "styled-components": "*" 19 | }, 20 | "devDependencies": { 21 | }, 22 | "dependencies": { 23 | "@vital-ui/react-theme": "^0.10.6", 24 | "classnames": "^2.2.6", 25 | "styled-system": "^4.2.3" 26 | } 27 | } 28 | -------------------------------------------------------------------------------- /packages/button/src/SubtleButton.ts: -------------------------------------------------------------------------------- 1 | import styled from 'styled-components'; 2 | import { Button } from './Button'; 3 | import { Nature } from './constant'; 4 | import { natureColor } from './utils'; 5 | 6 | interface Props { 7 | selected?: boolean; 8 | nature?: Nature; 9 | } 10 | 11 | export const SubtleButton = styled(Button)` 12 | background: ${props => 13 | props.selected ? props.theme.button.subtle.bg : 'transparent'}; 14 | color: ${({ nature, theme }) => 15 | nature === 'default' 16 | ? theme.button.subtle.color 17 | : natureColor(theme)[nature]}; 18 | border: 1px solid transparent; 19 | 20 | &:hover { 21 | background: ${({ theme }) => theme.button.subtle.hoverBg}; 22 | } 23 | `; 24 | -------------------------------------------------------------------------------- /packages/icon/src/MoreOption.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | const MoreOption = props => ( 4 | 5 | 6 | 7 | 8 | 12 | 13 | 14 | 15 | ); 16 | 17 | export default MoreOption; 18 | -------------------------------------------------------------------------------- /packages/list/src/ListContent.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * Copyright © 2018 Galaxy Software Services https://github.com/GSS-FED/vital-ui-kit-react 3 | * MIT license 4 | */ 5 | 6 | import styled from 'styled-components'; 7 | import { defaultTheme } from '@vital-ui/react-theme'; 8 | 9 | const ListContent = styled.div` 10 | display: block; 11 | font-size: 1.2rem; 12 | border-left: ${({ border, theme }) => 13 | border ? theme.border : 'none'}; 14 | border-right: ${({ border, theme }) => 15 | border ? theme.border : 'none'}; 16 | padding: 0.928rem 2.856rem 0.928rem 1.428rem; 17 | line-height: 1.866rem; 18 | `; 19 | 20 | ListContent.defaultProps = { 21 | theme: defaultTheme, 22 | }; 23 | 24 | export default ListContent; 25 | -------------------------------------------------------------------------------- /packages/icon/assets/scale.svg: -------------------------------------------------------------------------------- 1 | scale -------------------------------------------------------------------------------- /packages/icon/src/DoorClosed.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | const DoorClosed = props => ( 4 | 5 | 6 | 7 | 8 | 12 | 13 | 14 | 15 | 16 | ); 17 | 18 | export default DoorClosed; 19 | -------------------------------------------------------------------------------- /packages/menu/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@vital-ui/react-menu", 3 | "version": "0.10.6", 4 | "description": "", 5 | "main": "cjs/index.js", 6 | "module": "dist/index.js", 7 | "types": "types/index.d.ts", 8 | "scripts": { 9 | "clean": "rimraf dist cjs types", 10 | "compile": "rollup --config", 11 | "watch": "rollup --config --watch" 12 | }, 13 | "author": "", 14 | "license": "MIT", 15 | "peerDependencies": { 16 | "react": "^16", 17 | "react-dom": "^16", 18 | "styled-components": "*" 19 | }, 20 | "dependencies": { 21 | "@vital-ui/react-button": "^0.10.6", 22 | "@vital-ui/react-theme": "^0.10.6", 23 | "classnames": "^2.2.6" 24 | }, 25 | "devDependencies": { 26 | } 27 | } 28 | -------------------------------------------------------------------------------- /packages/icon/assets/file_plus.svg: -------------------------------------------------------------------------------- 1 | file_plus -------------------------------------------------------------------------------- /packages/icon/assets/tag.svg: -------------------------------------------------------------------------------- 1 | tag -------------------------------------------------------------------------------- /packages/@vital-ui-lab/calendar/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@vital-ui/react-calendar", 3 | "version": "0.9.15", 4 | "description": "", 5 | "main": "cjs/index.js", 6 | "module": "dist/index.js", 7 | "scripts": { 8 | "clean": "rm -rf dist cjs", 9 | "compile": "tsc && tsc --module commonjs --outdir cjs" 10 | }, 11 | "files": [ 12 | "dist", 13 | "cjs", 14 | "src" 15 | ], 16 | "peerDependencies": { 17 | "react": "^16", 18 | "react-dom": "^16", 19 | "styled-components": "*" 20 | }, 21 | "dependencies": { 22 | "@vital-ui/react-theme": "^0.10.0", 23 | "@vital-ui/react-utils": "^0.10.0", 24 | "classnames": "^2.2.6" 25 | }, 26 | "devDependencies": { 27 | "typescript": "3.8.3" 28 | } 29 | } 30 | -------------------------------------------------------------------------------- /packages/icon/assets/chart_linechart.svg: -------------------------------------------------------------------------------- 1 | chart_linechart -------------------------------------------------------------------------------- /packages/icon/assets/message_square_close.svg: -------------------------------------------------------------------------------- 1 | message_square_close -------------------------------------------------------------------------------- /examples/with-next/next.config.js: -------------------------------------------------------------------------------- 1 | const withPlugins = require('next-compose-plugins'); 2 | const withCSS = require('@zeit/next-css'); 3 | 4 | const nextConfig = { 5 | webpack5: false, 6 | }; 7 | 8 | // fix: prevents error when .css files are required by node 9 | if (typeof require !== 'undefined') { 10 | require.extensions['.css'] = (file) => {}; 11 | } 12 | /* Without CSS Modules, with PostCSS */ 13 | module.exports = withPlugins([[withCSS()]], nextConfig); 14 | 15 | /* With CSS Modules */ 16 | // module.exports = withCSS({ cssModules: true }) 17 | 18 | /* With additional configuration on top of CSS Modules */ 19 | /* 20 | module.exports = withCSS({ 21 | cssModules: true, 22 | webpack: function (config) { 23 | return config; 24 | } 25 | }); 26 | */ 27 | -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "allowSyntheticDefaultImports": true, 4 | "declaration": true, 5 | "experimentalDecorators": true, 6 | "emitDecoratorMetadata": true, 7 | "jsx": "react", 8 | "target": "es5", 9 | "lib": ["es2015", "dom"], 10 | "module": "esnext", 11 | "moduleResolution": "node", 12 | "noFallthroughCasesInSwitch": true, 13 | "noImplicitReturns": true, 14 | "noImplicitThis": true, 15 | "noUnusedLocals": true, 16 | "pretty": true, 17 | "removeComments": false, 18 | "sourceMap": true, 19 | "strictNullChecks": false, 20 | "stripInternal": true, 21 | "skipLibCheck": true, 22 | "esModuleInterop": true, 23 | }, 24 | "exclude": ["node_modules", "dist", "cjs"] 25 | } 26 | -------------------------------------------------------------------------------- /packages/badge/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@vital-ui/react-badge", 3 | "version": "0.10.6", 4 | "description": "", 5 | "main": "cjs/index.js", 6 | "module": "dist/index.js", 7 | "types": "types/index.d.ts", 8 | "scripts": { 9 | "clean": "rimraf dist cjs types", 10 | "compile": "rollup --config", 11 | "watch": "rollup --config --watch" 12 | }, 13 | "author": "Eric Yip (https://github.com/ericyip)", 14 | "license": "MIT", 15 | "peerDependencies": { 16 | "react": "^16", 17 | "react-dom": "^16", 18 | "styled-components": "*" 19 | }, 20 | "dependencies": { 21 | "@vital-ui/react-theme": "^0.10.6", 22 | "@vital-ui/react-utils": "^0.10.6", 23 | "classnames": "^2.2.6" 24 | }, 25 | "devDependencies": { 26 | } 27 | } 28 | -------------------------------------------------------------------------------- /packages/icon/assets/box_s.svg: -------------------------------------------------------------------------------- 1 | box_s -------------------------------------------------------------------------------- /packages/icon/assets/briefcase_2.svg: -------------------------------------------------------------------------------- 1 | briefcase_2 -------------------------------------------------------------------------------- /packages/icon/assets/mail_read.svg: -------------------------------------------------------------------------------- 1 | mail_read -------------------------------------------------------------------------------- /packages/icon/src/Cachet.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | const Cachet = props => ( 4 | 10 | 11 | 12 | 13 | 17 | 18 | 19 | 20 | ); 21 | 22 | export default Cachet; 23 | -------------------------------------------------------------------------------- /packages/icon/src/Pen.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | const Pen = props => ( 4 | 5 | 6 | 7 | 8 | 12 | 13 | 14 | 15 | ); 16 | 17 | export default Pen; 18 | -------------------------------------------------------------------------------- /.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": [ 3 | "@babel/preset-react", 4 | ["@babel/preset-env", { "modules": false }] 5 | ], 6 | "plugins": [ 7 | "@babel/plugin-proposal-class-properties", 8 | "@babel/plugin-proposal-object-rest-spread", 9 | "babel-plugin-styled-components" 10 | ], 11 | "env": { 12 | "development": { 13 | "plugins": [["babel-plugin-styled-components"]] 14 | }, 15 | "test": { 16 | "presets": [ 17 | ["@babel/preset-env", { "modules": "commonjs" }], 18 | "@babel/preset-react" 19 | ], 20 | "plugins": [ 21 | "babel-plugin-styled-components", 22 | "@babel/plugin-proposal-class-properties", 23 | "@babel/plugin-proposal-object-rest-spread" 24 | ] 25 | } 26 | } 27 | } 28 | -------------------------------------------------------------------------------- /packages/icon/src/Heart.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | const Heart = props => ( 4 | 10 | 15 | 16 | ); 17 | 18 | export default Heart; 19 | -------------------------------------------------------------------------------- /packages/icon/assets/message_rounded_hint.svg: -------------------------------------------------------------------------------- 1 | message_rounded_hint -------------------------------------------------------------------------------- /packages/icon/assets/spanner.svg: -------------------------------------------------------------------------------- 1 | spanner -------------------------------------------------------------------------------- /packages/tabs/src/TabList.tsx: -------------------------------------------------------------------------------- 1 | /** 2 | * Copyright © 2018 Galaxy Software Services https://github.com/GSS-FED/vital-ui-kit-react 3 | * MIT license 4 | */ 5 | import * as React from 'react'; 6 | import styled from 'styled-components'; 7 | import cn from 'classnames'; 8 | 9 | const Root = styled.ul` 10 | display: inline-block; 11 | `; 12 | 13 | type Props = { 14 | children?: React.ReactNode; 15 | style?: React.CSSProperties; 16 | /** default: `vital-tab-list` */ 17 | className?: string; 18 | }; 19 | 20 | const TabList = ({ style, className, children, ...props }: Props) => ( 21 | 26 | {children} 27 | 28 | ); 29 | 30 | export default TabList; 31 | -------------------------------------------------------------------------------- /packages/icon/assets/sofa.svg: -------------------------------------------------------------------------------- 1 | sofa -------------------------------------------------------------------------------- /packages/icon/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@vital-ui/react-icon", 3 | "version": "0.10.6", 4 | "description": "", 5 | "main": "cjs/index.js", 6 | "module": "dist/index.js", 7 | "types": "types/index.d.ts", 8 | "scripts": { 9 | "gen:icons": "svgr -d src assets --ext tsx --icon --replace-attr-values '#27aae1=currentColor'", 10 | "clean": "rimraf dist cjs types", 11 | "compile": "rollup --config", 12 | "watch": "rollup --config --watch" 13 | }, 14 | "author": "Eric Yip (https://github.com/ericyip)", 15 | "license": "MIT", 16 | "peerDependencies": { 17 | "react": "^16", 18 | "styled-components": "*" 19 | }, 20 | "devDependencies": { 21 | "@svgr/cli": "5.4.0" 22 | }, 23 | "dependencies": { 24 | "classnames": "^2.2.6" 25 | } 26 | } 27 | -------------------------------------------------------------------------------- /packages/icon/assets/eye.svg: -------------------------------------------------------------------------------- 1 | eye -------------------------------------------------------------------------------- /packages/icon/assets/link.svg: -------------------------------------------------------------------------------- 1 | link -------------------------------------------------------------------------------- /packages/icon/assets/message_rounded_plus.svg: -------------------------------------------------------------------------------- 1 | message_rounded_plus -------------------------------------------------------------------------------- /packages/icon/src/Briefcase1.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | const Briefcase1 = props => ( 4 | 5 | 10 | 11 | ); 12 | 13 | export default Briefcase1; 14 | -------------------------------------------------------------------------------- /packages/list/src/SubListItem.tsx: -------------------------------------------------------------------------------- 1 | /** 2 | * Copyright © 2018 Galaxy Software Services https://github.com/GSS-FED/vital-ui-kit-react 3 | * MIT license 4 | */ 5 | 6 | import * as React from 'react'; 7 | 8 | type Props = { 9 | children: React.ReactNode; 10 | level: number; 11 | isChildren: boolean; 12 | themed?: 'light' | 'dark'; 13 | }; 14 | 15 | const SubListItem = ({ 16 | children, 17 | level, 18 | isChildren, 19 | themed, 20 | }: Props) => { 21 | const renderChildren = () => 22 | React.Children.map(children, (child: any) => 23 | React.cloneElement(child, { 24 | level, 25 | isChildren, 26 | themed, 27 | }), 28 | ); 29 | return {renderChildren()}; 30 | }; 31 | 32 | export default SubListItem; 33 | -------------------------------------------------------------------------------- /packages/pill/src/Pill.stories.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { storiesOf } from '@storybook/react'; 3 | import { action } from '@storybook/addon-actions'; 4 | import { linkTo } from '@storybook/addon-links'; 5 | import { 6 | withKnobs, 7 | text, 8 | boolean, 9 | number, 10 | select, 11 | } from '@storybook/addon-knobs/react'; 12 | 13 | import { Pill, PillsGroup } from '.'; 14 | 15 | storiesOf('Packages | Pill', module) 16 | .addDecorator(withKnobs) 17 | .add('Basic', () => ( 18 | 19 | Dashboard 20 | Projects 21 | Issues 22 | Reports 23 | User Center 24 | 25 | )); 26 | -------------------------------------------------------------------------------- /packages/web/src/index.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * Copyright © 2018 Galaxy Software Services https://github.com/GSS-FED/vital-ui-kit-react 3 | * MIT license 4 | */ 5 | 6 | import * as Icon from '@vital-ui/react-icon'; 7 | 8 | export * from '@vital-ui/react-theme'; 9 | export * from '@vital-ui/react-button'; 10 | export * from '@vital-ui/react-badge'; 11 | export * from '@vital-ui/react-card'; 12 | export * from '@vital-ui/react-form'; 13 | export * from '@vital-ui/react-avatar'; 14 | export * from '@vital-ui/react-modal'; 15 | export * from '@vital-ui/react-list'; 16 | export * from '@vital-ui/react-tooltip'; 17 | export * from '@vital-ui/react-menu'; 18 | export * from '@vital-ui/react-tabs'; 19 | export * from '@vital-ui/react-pill'; 20 | export * from '@vital-ui/react-utils'; 21 | export { Icon }; 22 | -------------------------------------------------------------------------------- /packages/form/src/select/icon/CloseIcon.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | export const CloseIcon = (props: any) => ( 4 | 12 | 16 | 17 | ); 18 | -------------------------------------------------------------------------------- /packages/icon/assets/message_rounded_content.svg: -------------------------------------------------------------------------------- 1 | message_rounded_content -------------------------------------------------------------------------------- /packages/icon/src/Moon.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | const Moon = props => ( 4 | 10 | 15 | 16 | ); 17 | 18 | export default Moon; 19 | -------------------------------------------------------------------------------- /packages/icon/assets/key.svg: -------------------------------------------------------------------------------- 1 | key -------------------------------------------------------------------------------- /packages/icon/assets/file_duplicate.svg: -------------------------------------------------------------------------------- 1 | file_duplicate -------------------------------------------------------------------------------- /packages/icon/assets/finder_opened.svg: -------------------------------------------------------------------------------- 1 | finder_opened -------------------------------------------------------------------------------- /examples/with-next/pages/_document.js: -------------------------------------------------------------------------------- 1 | import Document, { 2 | Html, 3 | Head, 4 | Main, 5 | NextScript, 6 | } from 'next/document'; 7 | import { ServerStyleSheet } from 'styled-components'; 8 | 9 | export default class MyDocument extends Document { 10 | static getInitialProps({ renderPage }) { 11 | const sheet = new ServerStyleSheet(); 12 | const page = renderPage((App) => (props) => 13 | sheet.collectStyles(), 14 | ); 15 | const styleTags = sheet.getStyleElement(); 16 | return { ...page, styleTags }; 17 | } 18 | 19 | render() { 20 | return ( 21 | 22 | {this.props.styleTags} 23 | 24 |
25 | 26 | 27 | 28 | ); 29 | } 30 | } 31 | -------------------------------------------------------------------------------- /packages/icon/assets/share.svg: -------------------------------------------------------------------------------- 1 | share -------------------------------------------------------------------------------- /packages/icon/src/Scale.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | const Scale = props => ( 4 | 5 | 10 | 11 | ); 12 | 13 | export default Scale; 14 | -------------------------------------------------------------------------------- /packages/card/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@vital-ui/react-card", 3 | "version": "0.10.6", 4 | "description": "", 5 | "main": "cjs/index.js", 6 | "module": "dist/index.js", 7 | "types": "types/index.d.ts", 8 | "scripts": { 9 | "clean": "rimraf dist cjs types", 10 | "compile": "rollup --config", 11 | "watch": "rollup --config --watch" 12 | }, 13 | "author": "Eric Yip (https://github.com/ericyip)", 14 | "license": "MIT", 15 | "peerDependencies": { 16 | "react": "^16", 17 | "react-dom": "^16", 18 | "styled-components": "*" 19 | }, 20 | "dependencies": { 21 | "@vital-ui/react-badge": "^0.10.6", 22 | "@vital-ui/react-theme": "^0.10.6", 23 | "@vital-ui/react-utils": "^0.10.6", 24 | "classnames": "^2.2.6" 25 | }, 26 | "devDependencies": { 27 | } 28 | } 29 | -------------------------------------------------------------------------------- /packages/modal/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@vital-ui/react-modal", 3 | "version": "0.10.6", 4 | "description": "", 5 | "main": "cjs/index.js", 6 | "module": "dist/index.js", 7 | "types": "types/index.d.ts", 8 | "scripts": { 9 | "clean": "rimraf dist cjs types", 10 | "compile": "rollup --config", 11 | "watch": "rollup --config --watch" 12 | }, 13 | "author": "Eric Yip (https://github.com/ericyip)", 14 | "license": "MIT", 15 | "peerDependencies": { 16 | "react": "^16", 17 | "react-dom": "^16", 18 | "styled-components": "*" 19 | }, 20 | "dependencies": { 21 | "@vital-ui/react-theme": "^0.10.6", 22 | "@vital-ui/react-utils": "^0.10.6", 23 | "classnames": "^2.2.6", 24 | "react-resize-detector": "^4.0.0" 25 | }, 26 | "devDependencies": { 27 | } 28 | } 29 | -------------------------------------------------------------------------------- /packages/tabs/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@vital-ui/react-tabs", 3 | "version": "0.10.6", 4 | "description": "", 5 | "main": "cjs/index.js", 6 | "module": "dist/index.js", 7 | "types": "types/index.d.ts", 8 | "scripts": { 9 | "clean": "rimraf dist cjs types", 10 | "compile": "rollup --config", 11 | "watch": "rollup --config --watch" 12 | }, 13 | "author": "Eric Yip (https://github.com/ericyip)", 14 | "license": "MIT", 15 | "peerDependencies": { 16 | "react": "^16", 17 | "react-dom": "^16", 18 | "styled-components": "*" 19 | }, 20 | "dependencies": { 21 | "@vital-ui/react-badge": "^0.10.6", 22 | "@vital-ui/react-theme": "^0.10.6", 23 | "@vital-ui/react-utils": "^0.10.6", 24 | "classnames": "^2.2.6" 25 | }, 26 | "devDependencies": { 27 | } 28 | } 29 | -------------------------------------------------------------------------------- /packages/icon/src/Clock.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | const Clock = props => ( 4 | 5 | 6 | 7 | 8 | 12 | 16 | 17 | 18 | 19 | ); 20 | 21 | export default Clock; 22 | -------------------------------------------------------------------------------- /packages/tooltip/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@vital-ui/react-tooltip", 3 | "version": "0.10.6", 4 | "description": "", 5 | "main": "cjs/index.js", 6 | "module": "dist/index.js", 7 | "types": "types/index.d.ts", 8 | "sideEffects": [ 9 | "*.css" 10 | ], 11 | "scripts": { 12 | "clean": "rimraf dist cjs types", 13 | "compile": "rollup --config", 14 | "watch": "rollup --config --watch" 15 | }, 16 | "author": "", 17 | "license": "MIT", 18 | "peerDependencies": { 19 | "react": "^16", 20 | "react-dom": "^16", 21 | "styled-components": "*" 22 | }, 23 | "dependencies": { 24 | "@vital-ui/react-theme": "^0.10.6", 25 | "classnames": "^2.2.6", 26 | "rc-trigger": "v4.4.3" 27 | }, 28 | "devDependencies": { 29 | "rollup-plugin-postcss": "^3.1.8" 30 | } 31 | } 32 | -------------------------------------------------------------------------------- /packages/icon/assets/lamp.svg: -------------------------------------------------------------------------------- 1 | lamp -------------------------------------------------------------------------------- /packages/icon/src/Filter.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | const Filter = props => ( 4 | 5 | 6 | 7 | 8 | 12 | 16 | 17 | 18 | 19 | ); 20 | 21 | export default Filter; 22 | -------------------------------------------------------------------------------- /packages/form/src/slider/utils.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * Clamp value between max and min 3 | */ 4 | export const clamp = (value: number, max: number, min: number) => 5 | Math.min(Math.max(value, min), max); 6 | 7 | /** 8 | * @name toFixed safeguard with negative support 9 | * @param fixed number to fixed => 10 | * @return @param num 11 | */ 12 | export const toFixed = (fixed: number) => (num: number): number => { 13 | const re = new RegExp('^-?\\d+(?:.\\d{0,' + (fixed || -1) + '})?'); 14 | return parseFloat(num.toString().match(re)![0]); 15 | }; 16 | 17 | export const noop = () => {}; 18 | 19 | /** 20 | * Count the nubmers of decimals from value 21 | * @param value number 22 | */ 23 | export const countDecimals = (value: number) => { 24 | if (value % 1 === 0) return 0; 25 | return value.toString().split('.')[1].length; 26 | }; 27 | -------------------------------------------------------------------------------- /packages/icon/assets/close.svg: -------------------------------------------------------------------------------- 1 | close -------------------------------------------------------------------------------- /packages/icon/assets/magnifier.svg: -------------------------------------------------------------------------------- 1 | magnifier -------------------------------------------------------------------------------- /packages/button/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@vital-ui/react-button", 3 | "version": "0.10.6", 4 | "description": "", 5 | "main": "cjs/index.js", 6 | "module": "dist/index.js", 7 | "types": "types/index.d.ts", 8 | "scripts": { 9 | "clean": "rimraf dist cjs types", 10 | "compile": "rollup --config", 11 | "watch": "rollup --config --watch" 12 | }, 13 | "author": "Eric Yip (https://github.com/ericyip)", 14 | "license": "MIT", 15 | "peerDependencies": { 16 | "react": "^16", 17 | "react-dom": "^16", 18 | "styled-components": "*" 19 | }, 20 | "dependencies": { 21 | "@vital-ui/react-theme": "^0.10.6", 22 | "@vital-ui/react-utils": "^0.10.6", 23 | "classnames": "^2.2.6", 24 | "polished": "^3.0.0", 25 | "styled-map": "^3.2.0-rc.1" 26 | }, 27 | "devDependencies": { 28 | } 29 | } 30 | -------------------------------------------------------------------------------- /packages/icon/assets/message_square_smile.svg: -------------------------------------------------------------------------------- 1 | message_square_smile -------------------------------------------------------------------------------- /packages/icon/src/MessageSquare.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | const MessageSquare = props => ( 4 | 10 | 15 | 16 | ); 17 | 18 | export default MessageSquare; 19 | -------------------------------------------------------------------------------- /packages/list/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@vital-ui/react-list", 3 | "version": "0.10.6", 4 | "description": "", 5 | "main": "cjs/index.js", 6 | "module": "dist/index.js", 7 | "types": "types/index.d.ts", 8 | "scripts": { 9 | "clean": "rimraf dist cjs types", 10 | "compile": "rollup --config", 11 | "watch": "rollup --config --watch" 12 | }, 13 | "author": "Eric Yip (https://github.com/ericyip)", 14 | "license": "MIT", 15 | "peerDependencies": { 16 | "react": "^16", 17 | "react-dom": "^16", 18 | "styled-components": "*" 19 | }, 20 | "dependencies": { 21 | "@vital-ui/react-badge": "^0.10.6", 22 | "@vital-ui/react-theme": "^0.10.6", 23 | "@vital-ui/react-utils": "^0.10.6", 24 | "classnames": "^2.2.6", 25 | "popmotion": "8.7.3" 26 | }, 27 | "devDependencies": { 28 | } 29 | } 30 | -------------------------------------------------------------------------------- /packages/popup/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@vital-ui/react-popup", 3 | "version": "0.10.6", 4 | "description": "", 5 | "main": "cjs/index.js", 6 | "module": "dist/index.js", 7 | "types": "types/index.d.ts", 8 | "scripts": { 9 | "clean": "rimraf dist cjs types", 10 | "compile": "rollup --config", 11 | "watch": "rollup --config --watch" 12 | }, 13 | "author": "Eric Yip (https://github.com/ericyip)", 14 | "license": "MIT", 15 | "peerDependencies": { 16 | "react": "^16", 17 | "react-dom": "^16", 18 | "styled-components": "*" 19 | }, 20 | "dependencies": { 21 | "@vital-ui/react-theme": "^0.10.6", 22 | "@vital-ui/react-utils": "^0.10.6", 23 | "classnames": "^2.2.6", 24 | "rc-trigger": "v4.4.3" 25 | }, 26 | "devDependencies": { 27 | "rollup-plugin-postcss": "^3.1.8" 28 | } 29 | } 30 | -------------------------------------------------------------------------------- /packages/icon/assets/calendar_empty.svg: -------------------------------------------------------------------------------- 1 | calendar_empty -------------------------------------------------------------------------------- /packages/icon/src/Code.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | const Code = props => ( 4 | 10 | 11 | 12 | 13 | 17 | 18 | 19 | 20 | ); 21 | 22 | export default Code; 23 | -------------------------------------------------------------------------------- /packages/icon/src/Archive.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | const Archive = props => ( 4 | 5 | 6 | 7 | 8 | 12 | 16 | 17 | 18 | 19 | ); 20 | 21 | export default Archive; 22 | -------------------------------------------------------------------------------- /packages/pill/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@vital-ui/react-pill", 3 | "version": "0.10.6", 4 | "description": "", 5 | "main": "cjs/index.js", 6 | "module": "dist/index.js", 7 | "types": "types/index.d.ts", 8 | "scripts": { 9 | "clean": "rimraf dist cjs types", 10 | "compile": "rollup --config", 11 | "watch": "rollup --config --watch" 12 | }, 13 | "author": "", 14 | "license": "MIT", 15 | "peerDependencies": { 16 | "react": "^16", 17 | "react-dom": "^16", 18 | "styled-components": "*" 19 | }, 20 | "dependencies": { 21 | "@vital-ui/react-badge": "^0.10.6", 22 | "@vital-ui/react-popup": "^0.10.6", 23 | "@vital-ui/react-theme": "^0.10.6", 24 | "@vital-ui/react-utils": "^0.10.6", 25 | "classnames": "^2.2.6", 26 | "react-priority-navigation": "1.0.2" 27 | }, 28 | "devDependencies": { 29 | } 30 | } 31 | -------------------------------------------------------------------------------- /packages/icon/src/Key.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | const Key = props => ( 4 | 5 | 10 | 11 | ); 12 | 13 | export default Key; 14 | -------------------------------------------------------------------------------- /packages/icon/assets/chart_trend.svg: -------------------------------------------------------------------------------- 1 | chart_trend -------------------------------------------------------------------------------- /packages/icon/assets/hard_drive_download.svg: -------------------------------------------------------------------------------- 1 | hard_drive_download -------------------------------------------------------------------------------- /packages/icon/assets/message_square_more.svg: -------------------------------------------------------------------------------- 1 | message_square_more -------------------------------------------------------------------------------- /packages/icon/src/FinderOpened.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | const FinderOpened = props => ( 4 | 5 | 10 | 11 | ); 12 | 13 | export default FinderOpened; 14 | -------------------------------------------------------------------------------- /packages/icon/assets/file_content.svg: -------------------------------------------------------------------------------- 1 | file_content -------------------------------------------------------------------------------- /packages/icon/assets/message_rounded_close.svg: -------------------------------------------------------------------------------- 1 | message_rounded_close -------------------------------------------------------------------------------- /packages/icon/src/Notification.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | const Notification = props => ( 4 | 5 | 6 | 7 | 8 | 12 | 16 | 17 | 18 | 19 | ); 20 | 21 | export default Notification; 22 | -------------------------------------------------------------------------------- /packages/icon/src/Share.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | const Share = props => ( 4 | 5 | 10 | 11 | ); 12 | 13 | export default Share; 14 | -------------------------------------------------------------------------------- /packages/theme/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@vital-ui/react-theme", 3 | "version": "0.10.6", 4 | "description": "", 5 | "main": "cjs/index.js", 6 | "module": "dist/index.js", 7 | "types": "types/index.d.ts", 8 | "sideEffects": false, 9 | "scripts": { 10 | "clean": "rimraf dist cjs types", 11 | "compile": "rollup --config", 12 | "watch": "rollup --config --watch" 13 | }, 14 | "author": "Eric Yip (https://github.com/ericyip)", 15 | "license": "MIT", 16 | "devDependencies": { 17 | "@types/fs-extra": "9.0.1", 18 | "@types/lodash.merge": "4.6.6", 19 | "copyfiles": "2.3.0", 20 | "fs-extra": "9.0.0" 21 | }, 22 | "peerDependencies": { 23 | "react": "^16", 24 | "styled-components": "*" 25 | }, 26 | "dependencies": { 27 | "classnames": "^2.2.6", 28 | "lodash.merge": "^4.6.1", 29 | "polished": "^3.0.0" 30 | } 31 | } 32 | -------------------------------------------------------------------------------- /packages/icon/assets/cloud.svg: -------------------------------------------------------------------------------- 1 | cloud -------------------------------------------------------------------------------- /packages/icon/assets/flag.svg: -------------------------------------------------------------------------------- 1 | flag -------------------------------------------------------------------------------- /packages/icon/assets/water_drop.svg: -------------------------------------------------------------------------------- 1 | water_drop -------------------------------------------------------------------------------- /packages/icon/src/MessageSquareContent.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | const MessageSquareContent = props => ( 4 | 5 | 6 | 7 | 8 | 12 | 16 | 17 | 18 | 19 | ); 20 | 21 | export default MessageSquareContent; 22 | -------------------------------------------------------------------------------- /packages/icon/assets/file_paper.svg: -------------------------------------------------------------------------------- 1 | file_paper -------------------------------------------------------------------------------- /packages/icon/assets/finder_plus.svg: -------------------------------------------------------------------------------- 1 | finder_plus -------------------------------------------------------------------------------- /packages/icon/src/BoxCheck.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | const BoxCheck = props => ( 4 | 5 | 6 | 7 | 8 | 12 | 16 | 17 | 18 | 19 | ); 20 | 21 | export default BoxCheck; 22 | -------------------------------------------------------------------------------- /packages/icon/src/BoxDuplicate.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | const BoxDuplicate = props => ( 4 | 5 | 6 | 7 | 8 | 12 | 16 | 17 | 18 | 19 | ); 20 | 21 | export default BoxDuplicate; 22 | -------------------------------------------------------------------------------- /packages/icon/src/CircleCheck.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | const CircleCheck = props => ( 4 | 5 | 6 | 7 | 8 | 12 | 16 | 17 | 18 | 19 | ); 20 | 21 | export default CircleCheck; 22 | -------------------------------------------------------------------------------- /packages/icon/src/MessageSquarePlus.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | const MessageSquarePlus = props => ( 4 | 5 | 6 | 7 | 8 | 12 | 16 | 17 | 18 | 19 | ); 20 | 21 | export default MessageSquarePlus; 22 | -------------------------------------------------------------------------------- /packages/icon/src/Trash.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | const Trash = props => ( 4 | 5 | 6 | 7 | 8 | 12 | 16 | 17 | 18 | 19 | ); 20 | 21 | export default Trash; 22 | -------------------------------------------------------------------------------- /packages/icon/assets/edit.svg: -------------------------------------------------------------------------------- 1 | edit -------------------------------------------------------------------------------- /packages/icon/src/MessageSquareHint.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | const MessageSquareHint = props => ( 4 | 5 | 6 | 7 | 8 | 12 | 16 | 17 | 18 | 19 | 20 | ); 21 | 22 | export default MessageSquareHint; 23 | -------------------------------------------------------------------------------- /packages/icon/assets/backward.svg: -------------------------------------------------------------------------------- 1 | backward -------------------------------------------------------------------------------- /packages/icon/assets/eye_o.svg: -------------------------------------------------------------------------------- 1 | eye_o -------------------------------------------------------------------------------- /packages/icon/src/CreditCard.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | const CreditCard = props => ( 4 | 5 | 6 | 7 | 8 | 12 | 16 | 17 | 18 | 19 | ); 20 | 21 | export default CreditCard; 22 | -------------------------------------------------------------------------------- /packages/icon/assets/calendar_minus.svg: -------------------------------------------------------------------------------- 1 | calendar_minus -------------------------------------------------------------------------------- /packages/icon/src/Export.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | const Export = props => ( 4 | 5 | 6 | 7 | 8 | 12 | 16 | 17 | 18 | 19 | ); 20 | 21 | export default Export; 22 | -------------------------------------------------------------------------------- /packages/form/src/input/Input.tsx: -------------------------------------------------------------------------------- 1 | import styled from 'styled-components'; 2 | import { BoxProps, superBoxStyle } from '@vital-ui/react-utils'; 3 | import cn from 'classnames'; 4 | import { defaultTheme } from '@vital-ui/react-theme'; 5 | import fieldBase from '../components/FieldBase'; 6 | 7 | interface InputElementProps extends BoxProps { 8 | /** Alarm state */ 9 | alarm?: boolean; 10 | /** Warning State */ 11 | warning?: boolean; 12 | /** Left Icon name, or Icon component */ 13 | leftIcon?: any; 14 | /** Right Icon name, or Icon component */ 15 | rightIcon?: any; 16 | } 17 | 18 | export const Input = styled.input.attrs(props => ({ 19 | className: cn('vital__input', props.className), 20 | }))` 21 | ${fieldBase}; 22 | ${superBoxStyle}; 23 | ${props => 24 | props.theme.form.inputStyle && props.theme.form.inputStyle}; 25 | `; 26 | 27 | Input.defaultProps = { 28 | theme: defaultTheme, 29 | }; 30 | -------------------------------------------------------------------------------- /packages/form/src/components/Addon.tsx: -------------------------------------------------------------------------------- 1 | import cn from 'classnames'; 2 | import { defaultTheme } from '@vital-ui/react-theme'; 3 | import { superBoxStyle, BoxProps } from '@vital-ui/react-utils'; 4 | import styled from 'styled-components'; 5 | 6 | export const Addon = styled.div.attrs(props => ({ 7 | className: cn('vital__addon', props.className), 8 | }))` 9 | padding: 0.46633rem 0.8rem; 10 | font-size: 1rem; 11 | font-weight: 400; 12 | line-height: 1; 13 | height: 1.93267rem; 14 | color: ${({ theme }) => theme.labelColor}; 15 | text-align: center; 16 | background-color: ${({ theme }) => theme.form.addon.bg}; 17 | border: ${({ theme }) => `1px solid ${theme.form.borderColor}`}; 18 | border-radius: 4px; 19 | z-index: 5; 20 | position: relative; 21 | box-sizing: border-box; 22 | ${superBoxStyle}; 23 | `; 24 | 25 | Addon.defaultProps = { 26 | theme: defaultTheme, 27 | }; 28 | 29 | export default Addon; 30 | -------------------------------------------------------------------------------- /packages/icon/src/House.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | const House = props => ( 4 | 5 | 6 | 7 | 8 | 12 | 16 | 17 | 18 | 19 | ); 20 | 21 | export default House; 22 | -------------------------------------------------------------------------------- /packages/icon/src/Close.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | const Close = props => ( 4 | 10 | 15 | 16 | ); 17 | 18 | export default Close; 19 | -------------------------------------------------------------------------------- /packages/icon/assets/book.svg: -------------------------------------------------------------------------------- 1 | book -------------------------------------------------------------------------------- /packages/icon/src/ChartPiechart.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | const ChartPiechart = props => ( 4 | 5 | 6 | 7 | 8 | 12 | 16 | 17 | 18 | 19 | ); 20 | 21 | export default ChartPiechart; 22 | -------------------------------------------------------------------------------- /packages/icon/src/Pin.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | const Pin = props => ( 4 | 10 | 11 | 12 | 13 | 17 | 21 | 22 | 23 | 24 | ); 25 | 26 | export default Pin; 27 | -------------------------------------------------------------------------------- /packages/icon/assets/camera.svg: -------------------------------------------------------------------------------- 1 | camera -------------------------------------------------------------------------------- /packages/icon/assets/chart_barchart.svg: -------------------------------------------------------------------------------- 1 | chart_barchart -------------------------------------------------------------------------------- /packages/icon/assets/message_rounded_smile.svg: -------------------------------------------------------------------------------- 1 | message_rounded_smile -------------------------------------------------------------------------------- /packages/icon/src/FilePlus.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | const FilePlus = props => ( 4 | 5 | 6 | 7 | 8 | 12 | 16 | 17 | 18 | 19 | ); 20 | 21 | export default FilePlus; 22 | -------------------------------------------------------------------------------- /packages/icon/src/Spanner.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | const Spanner = props => ( 4 | 10 | 11 | 12 | 13 | 17 | 18 | 19 | 20 | ); 21 | 22 | export default Spanner; 23 | -------------------------------------------------------------------------------- /packages/icon/src/Briefcase2.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | const Briefcase2 = props => ( 4 | 5 | 6 | 7 | 8 | 12 | 16 | 17 | 18 | 19 | ); 20 | 21 | export default Briefcase2; 22 | -------------------------------------------------------------------------------- /packages/icon/assets/file_content_duplicate.svg: -------------------------------------------------------------------------------- 1 | file_content_duplicate -------------------------------------------------------------------------------- /packages/icon/src/Eye.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | const Eye = props => ( 4 | 5 | 6 | 7 | 8 | 9 | 13 | 14 | 15 | 16 | ); 17 | 18 | export default Eye; 19 | -------------------------------------------------------------------------------- /packages/button/src/LinkButton.ts: -------------------------------------------------------------------------------- 1 | import styled, { css } from 'styled-components'; 2 | import { Button } from './Button'; 3 | 4 | const underlineStyle = ({ underline }: Props) => 5 | underline && 6 | css` 7 | &:hover { 8 | text-decoration: underline; 9 | } 10 | `; 11 | 12 | interface Props { 13 | underline?: boolean; 14 | dark?: boolean; 15 | } 16 | 17 | export const LinkButton = styled(Button)` 18 | background: ${props => props.theme.button.link.bg}; 19 | color: ${props => props.theme.button.link.color}; 20 | border: 1px solid transparent; 21 | 22 | &:hover { 23 | background: ${props => props.theme.button.link.hoverBg}; 24 | color: ${props => props.theme.button.link.hoverColor}; 25 | } 26 | 27 | ${underlineStyle}; 28 | ${props => 29 | props.dark && 30 | css` 31 | color: ${props.theme.button.link.darkColor}; 32 | &:hover { 33 | color: ${props.theme.button.link.hoverDarkColor}; 34 | } 35 | `} 36 | `; 37 | -------------------------------------------------------------------------------- /packages/icon/assets/news.svg: -------------------------------------------------------------------------------- 1 | news -------------------------------------------------------------------------------- /packages/avatar/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@vital-ui/react-avatar", 3 | "version": "0.10.6", 4 | "description": "", 5 | "main": "cjs/index.js", 6 | "module": "dist/index.js", 7 | "types": "types/index.d.ts", 8 | "scripts": { 9 | "gen:assets": "svgr -d default-avatar assets --ext tsx --icon", 10 | "clean": "rimraf dist cjs types", 11 | "compile": "rollup --config", 12 | "watch": "rollup --config --watch" 13 | }, 14 | "files": [ 15 | "dist", 16 | "cjs", 17 | "types", 18 | "src" 19 | ], 20 | "sideEffects": false, 21 | "author": "Eric Yip (https://github.com/ericyip)", 22 | "license": "MIT", 23 | "peerDependencies": { 24 | "react": "^16", 25 | "react-dom": "^16", 26 | "styled-components": "*" 27 | }, 28 | "dependencies": { 29 | "@vital-ui/react-theme": "^0.10.6", 30 | "@vital-ui/react-utils": "^0.10.6", 31 | "classnames": "^2.2.6" 32 | }, 33 | "devDependencies": { 34 | "@svgr/cli": "5.4.0" 35 | } 36 | } 37 | -------------------------------------------------------------------------------- /packages/icon/assets/calendar_hint.svg: -------------------------------------------------------------------------------- 1 | calendar_hint -------------------------------------------------------------------------------- /packages/icon/src/ChartLinechart.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | const ChartLinechart = props => ( 4 | 5 | 6 | 7 | 8 | 12 | 16 | 17 | 18 | 19 | ); 20 | 21 | export default ChartLinechart; 22 | -------------------------------------------------------------------------------- /packages/icon/src/MessageSquareClose.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | const MessageSquareClose = props => ( 4 | 5 | 6 | 7 | 8 | 12 | 16 | 17 | 18 | 19 | ); 20 | 21 | export default MessageSquareClose; 22 | -------------------------------------------------------------------------------- /packages/icon/src/Sofa.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | const Sofa = props => ( 4 | 5 | 6 | 7 | 8 | 12 | 16 | 17 | 18 | 19 | ); 20 | 21 | export default Sofa; 22 | -------------------------------------------------------------------------------- /packages/icon/src/Cloud.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | const Cloud = props => ( 4 | 10 | 15 | 16 | ); 17 | 18 | export default Cloud; 19 | -------------------------------------------------------------------------------- /packages/icon/src/DoorOpened.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | const DoorOpened = props => ( 4 | 5 | 6 | 7 | 8 | 12 | 19 | 23 | 24 | 25 | 26 | ); 27 | 28 | export default DoorOpened; 29 | -------------------------------------------------------------------------------- /packages/icon/assets/calendar_plus.svg: -------------------------------------------------------------------------------- 1 | calendar_plus -------------------------------------------------------------------------------- /packages/icon/assets/message_rounded_more.svg: -------------------------------------------------------------------------------- 1 | message_rounded_more -------------------------------------------------------------------------------- /packages/icon/src/MailRead.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | const MailRead = props => ( 4 | 5 | 6 | 7 | 8 | 12 | 16 | 17 | 18 | 19 | ); 20 | 21 | export default MailRead; 22 | -------------------------------------------------------------------------------- /packages/icon/assets/first_aid.svg: -------------------------------------------------------------------------------- 1 | first_aid -------------------------------------------------------------------------------- /packages/icon/src/FileContent.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | const FileContent = props => ( 4 | 5 | 6 | 7 | 8 | 12 | 16 | 17 | 18 | 19 | ); 20 | 21 | export default FileContent; 22 | -------------------------------------------------------------------------------- /packages/icon/src/MessageRoundedContent.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | const MessageRoundedContent = props => ( 4 | 5 | 6 | 7 | 8 | 12 | 16 | 17 | 18 | 19 | ); 20 | 21 | export default MessageRoundedContent; 22 | -------------------------------------------------------------------------------- /packages/icon/src/Tag.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | const Tag = props => ( 4 | 10 | 11 | 12 | 13 | 17 | 21 | 22 | 23 | 24 | ); 25 | 26 | export default Tag; 27 | -------------------------------------------------------------------------------- /packages/icon/assets/bus.svg: -------------------------------------------------------------------------------- 1 | bus -------------------------------------------------------------------------------- /packages/icon/assets/calendar_checked.svg: -------------------------------------------------------------------------------- 1 | calendar_checked -------------------------------------------------------------------------------- /packages/icon/assets/file_code.svg: -------------------------------------------------------------------------------- 1 | file_code -------------------------------------------------------------------------------- /packages/icon/src/Flag.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | const Flag = props => ( 4 | 5 | 6 | 7 | 8 | 12 | 13 | 14 | 15 | ); 16 | 17 | export default Flag; 18 | -------------------------------------------------------------------------------- /packages/icon/src/Lamp.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | const Lamp = props => ( 4 | 5 | 6 | 7 | 8 | 12 | 16 | 17 | 18 | 19 | ); 20 | 21 | export default Lamp; 22 | -------------------------------------------------------------------------------- /packages/icon/src/MessageRoundedPlus.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | const MessageRoundedPlus = props => ( 4 | 5 | 6 | 7 | 8 | 12 | 16 | 17 | 18 | 19 | ); 20 | 21 | export default MessageRoundedPlus; 22 | -------------------------------------------------------------------------------- /packages/icon/src/MessageSquareSmile.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | const MessageSquareSmile = props => ( 4 | 5 | 6 | 7 | 8 | 12 | 16 | 17 | 18 | 19 | ); 20 | 21 | export default MessageSquareSmile; 22 | -------------------------------------------------------------------------------- /packages/icon/assets/eye_blind.svg: -------------------------------------------------------------------------------- 1 | eye_blind -------------------------------------------------------------------------------- /packages/icon/src/Backward.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | const Backward = props => ( 4 | 10 | 15 | 16 | ); 17 | 18 | export default Backward; 19 | -------------------------------------------------------------------------------- /packages/icon/src/FileDuplicate.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | const FileDuplicate = props => ( 4 | 5 | 6 | 7 | 8 | 12 | 16 | 17 | 18 | 19 | ); 20 | 21 | export default FileDuplicate; 22 | -------------------------------------------------------------------------------- /packages/icon/src/MessageRoundedHint.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | const MessageRoundedHint = props => ( 4 | 5 | 6 | 7 | 8 | 12 | 16 | 17 | 18 | 19 | 20 | ); 21 | 22 | export default MessageRoundedHint; 23 | -------------------------------------------------------------------------------- /packages/icon/assets/glasses.svg: -------------------------------------------------------------------------------- 1 | glasses -------------------------------------------------------------------------------- /packages/icon/src/MessageSquareMore.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | const MessageSquareMore = props => ( 4 | 5 | 6 | 7 | 8 | 12 | 16 | 17 | 18 | 19 | ); 20 | 21 | export default MessageSquareMore; 22 | -------------------------------------------------------------------------------- /packages/icon/src/BoxS.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | const BoxS = props => ( 4 | 5 | 6 | 7 | 8 | 12 | 16 | 20 | 21 | 22 | 23 | ); 24 | 25 | export default BoxS; 26 | --------------------------------------------------------------------------------