From 3d5862c88034e981dca04be346b014c4cb7b5c90 Mon Sep 17 00:00:00 2001 From: Elenor Date: Mon, 29 Mar 2021 08:44:08 -0700 Subject: [PATCH] :tada: feat: initial public commit --- .babelrc | 27 + .browserslistrc | 4 + .changelogrc.js | 3 + .commitlintrc.js | 1 + .docker/prod/Dockerfile | 14 + .docker/prod/nginx.conf | 11 + .dockerignore | 1 + .editorconfig | 13 + .eslintignore | 11 + .eslintrc | 97 + .github/workflows/ci.yml | 27 + .github/workflows/docs.yml | 33 + .github/workflows/publish.yml | 49 + .gitignore | 25 + .prettierignore | 14 + .prettierrc | 17 + .releaserc | 49 + .stylelintignore | 6 + .stylelintrc | 19 + .svgo.yml | 51 + CHANGELOG.md | 8 + CONTRIBUTING.md | 134 + LICENSE | 21 + README.md | 27 + __mocks__/file.mock.js | 1 + __mocks__/style.mock.js | 1 + __tests__/.eslintrc.json | 5 + __tests__/components/Avatar/Avatar.test.tsx | 20 + __tests__/components/Badge/Badge.test.tsx | 15 + __tests__/components/Button/Button.test.tsx | 35 + .../components/Button/ButtonGroup.test.tsx | 59 + .../components/Button/IconButton.test.tsx | 43 + __tests__/components/Card/Card.test.tsx | 10 + __tests__/components/Card/CardBody.test.tsx | 10 + __tests__/components/Card/CardEdge.test.tsx | 10 + __tests__/components/Card/CardTitle.test.tsx | 10 + __tests__/components/Divider/Divider.test.tsx | 10 + __tests__/components/Flex/Flex.test.tsx | 10 + __tests__/components/Footer/Footer.test.tsx | 10 + .../Form/Checkbox/Checkbox.test.tsx | 19 + .../Form/Checkbox/CheckboxGroup.test.tsx | 57 + .../Form/Fieldset/Fieldset.test.tsx | 16 + .../components/Form/Label/Label.test.tsx | 10 + .../Form/LabelWrapper/LabelWrapper.test.tsx | 22 + .../Form/Notification/Notification.test.tsx | 11 + .../components/Form/Radio/Radio.test.tsx | 19 + .../components/Form/Radio/RadioGroup.test.tsx | 71 + .../components/Form/Select/Select.test.tsx | 37 + .../components/Form/Slider/Slider.test.tsx | 24 + .../components/Form/Stepper/Stepper.test.tsx | 22 + .../Form/Textarea/Textarea.test.tsx | 20 + .../components/Form/Textbox/Password.test.tsx | 20 + .../components/Form/Textbox/Textbox.test.tsx | 20 + .../components/Form/Toggle/Toggle.test.tsx | 20 + __tests__/components/Header/Header.test.tsx | 10 + .../components/IconText/IconText.test.tsx | 11 + .../components/LineLoader/LineLoader.test.tsx | 10 + __tests__/components/Link/Link.test.tsx | 13 + .../components/Link/LinkContainer.test.tsx | 27 + __tests__/components/List/List.test.tsx | 31 + __tests__/components/Loader/Loader.test.tsx | 10 + .../components/Panels/MainPanel.test.tsx | 10 + .../components/Panels/PanelContainer.test.tsx | 10 + __tests__/components/Panels/Panels.test.tsx | 26 + .../Panels/PermanentSidePanel.test.tsx | 10 + .../Panels/PermanentStackPanel.test.tsx | 10 + .../components/Panels/SidePanel.test.tsx | 14 + .../components/Panels/StackPanel.test.tsx | 14 + __tests__/components/Paper/Paper.test.tsx | 10 + __tests__/components/Portal/Portal.test.tsx | 33 + .../components/Position/Position.test.tsx | 10 + .../components/Progress/Progress.test.tsx | 10 + __tests__/components/Rhythm/Rhythm.test.tsx | 10 + __tests__/components/Tag/Tag.test.tsx | 35 + __tests__/components/Tag/TagGroup.test.tsx | 43 + .../components/Triangle/Triangle.test.tsx | 10 + .../components/Typography/Typography.test.tsx | 10 + .../compositions/Accordion/Accordion.test.tsx | 42 + __tests__/compositions/Banner/Banner.test.tsx | 14 + .../Banner/BannerContainer.test.tsx | 32 + .../Dropdown/InlineDropdown.test.tsx | 38 + .../Dropover/InlineDropover.test.tsx | 30 + .../compositions/IconGroup/IconGroup.test.tsx | 19 + .../InteractiveList/InteractiveList.test.tsx | 33 + __tests__/compositions/Modal/Modal.test.tsx | 27 + .../Navigation/Navigation.test.tsx | 23 + .../Pagination/Pagination.test.tsx | 13 + .../Popover/InlinePopover.test.tsx | 44 + __tests__/compositions/Tabs/Tabs.test.tsx | 26 + __tests__/compositions/Toast/Toast.test.tsx | 15 + .../Tooltip/InlineTooltip.test.tsx | 46 + __tests__/jest.d.ts | 4 + __tests__/tsconfig.ci.json | 8 + __tests__/tsconfig.json | 10 + doczrc.js | 80 + gatsby-config.js | 24 + gatsby-node.js | 43 + jest-setup.js | 3 + jest.config.ci.js | 20 + jest.config.js | 27 + package.json | 191 + postcss.config.js | 30 + public/favicon/android-chrome-192x192.png | Bin 0 -> 11778 bytes public/favicon/android-chrome-512x512.png | Bin 0 -> 33798 bytes public/favicon/apple-touch-icon.png | Bin 0 -> 3840 bytes public/favicon/browserconfig.xml | 9 + public/favicon/favicon-16x16.png | Bin 0 -> 1014 bytes public/favicon/favicon-32x32.png | Bin 0 -> 1535 bytes public/favicon/favicon.ico | Bin 0 -> 15086 bytes public/favicon/mstile-150x150.png | Bin 0 -> 4191 bytes public/favicon/safari-pinned-tab.svg | 54 + public/favicon/site.webmanifest | 19 + public/icons/arrow-double-left.svg | 5 + public/icons/arrow-double-right.svg | 5 + public/icons/arrow-down.svg | 4 + public/icons/arrow-left.svg | 4 + public/icons/arrow-right.svg | 4 + public/icons/arrow-up-down.svg | 5 + public/icons/arrow-up.svg | 4 + public/icons/eye-slash.svg | 16 + public/icons/eye.svg | 4 + public/icons/internal/blobbr.svg | 4 + public/icons/internal/check.svg | 4 + public/icons/internal/github.svg | 4 + public/icons/internal/help.svg | 5 + public/icons/internal/left-panel.svg | 4 + public/icons/internal/light-off.svg | 8 + public/icons/internal/light-on.svg | 16 + public/icons/internal/phork.svg | 4 + public/icons/internal/right-panel.svg | 4 + public/icons/internal/tag.svg | 4 + public/icons/internal/top-panel.svg | 4 + public/icons/minus.svg | 4 + public/icons/pencil-slash.svg | 7 + public/icons/pin.svg | 4 + public/icons/plus.svg | 5 + public/icons/search.svg | 4 + public/icons/spinner.svg | 12 + public/icons/times.svg | 4 + public/images/avatar.jpg | Bin 0 -> 21084 bytes public/images/phork.svg | 6 + rollup.config.js | 197 + scripts/generate-component-info.js | 102 + scripts/generate-config-json.js | 13 + scripts/generate-lib-index.js | 16 + scripts/generate-lib-package.js | 41 + scripts/generate-postcss-vars-json.js | 18 + scripts/generate-svg-icons.js | 59 + scripts/scaffold-component-test.js | 54 + scripts/scaffold-component.js | 106 + scripts/utils/exec.js | 31 + .../rollup-plugin-local-external-module.js | 21 + scripts/utils/svg-icon-template.js | 14 + scripts/utils/write-file.js | 18 + src/assetTypes.d.ts | 14 + src/components/Avatar/Avatar.tsx | 72 + src/components/Avatar/StyledAvatar.ts | 14 + src/components/Avatar/docs/avatar.mdx | 140 + src/components/Avatar/index.ts | 2 + .../Avatar/styles/Avatar.module.css | 113 + src/components/Badge/Badge.tsx | 52 + src/components/Badge/ColoredBadge.ts | 25 + src/components/Badge/StyledBadge.ts | 18 + src/components/Badge/docs/badge.mdx | 125 + src/components/Badge/index.ts | 3 + src/components/Badge/styles/Badge.module.css | 126 + src/components/Button/Button.tsx | 151 + src/components/Button/ButtonGroup.tsx | 118 + src/components/Button/IconButton.tsx | 42 + src/components/Button/IconTextButton.tsx | 48 + src/components/Button/StyledButton.ts | 17 + src/components/Button/docs/button.mdx | 292 + src/components/Button/docs/buttonGroup.mdx | 439 + src/components/Button/docs/iconButton.mdx | 96 + src/components/Button/index.ts | 5 + .../Button/styles/Button.module.css | 318 + .../Button/styles/ButtonGroup.module.css | 139 + src/components/Button/styles/mixins.css | 112 + src/components/Card/Card.tsx | 61 + src/components/Card/CardBody.tsx | 35 + src/components/Card/CardEdge.tsx | 36 + src/components/Card/CardTitle.tsx | 35 + src/components/Card/StyledCard.tsx | 23 + src/components/Card/docs/card.mdx | 161 + src/components/Card/index.ts | 5 + src/components/Card/styles/Card.module.css | 78 + .../Card/styles/CardBody.module.css | 11 + .../Card/styles/CardEdge.module.css | 22 + .../Card/styles/CardTitle.module.css | 8 + .../Card/styles/mixins/addRaised.css | 26 + src/components/Divider/ColoredDivider.ts | 24 + src/components/Divider/Divider.tsx | 40 + src/components/Divider/docs/divider.mdx | 93 + src/components/Divider/index.ts | 2 + .../Divider/styles/Divider.module.css | 65 + src/components/Draggable/Draggable.ts | 223 + src/components/Draggable/index.ts | 1 + .../ErrorBoundary/ErrorBoundary.tsx | 128 + src/components/ErrorBoundary/index.ts | 1 + .../EventListener/EventListenerConsumer.ts | 3 + .../EventListener/EventListenerContext.ts | 19 + .../EventListener/EventListenerProvider.tsx | 130 + .../EventListener/docs/eventListener.mdx | 143 + .../EventListener/docs/helpers/HookDemo.js | 75 + .../EventListener/eventListenerActions.ts | 30 + .../EventListener/eventListenerReducer.ts | 85 + src/components/EventListener/index.ts | 7 + src/components/EventListener/types.ts | 24 + .../EventListener/useEventListener.ts | 37 + src/components/Flex/Flex.tsx | 62 + src/components/Flex/StyledFlex.ts | 18 + src/components/Flex/docs/flex.mdx | 237 + src/components/Flex/docs/helpers/FlexBox.js | 45 + src/components/Flex/index.ts | 2 + src/components/Flex/styles/Flex.module.css | 159 + src/components/Footer/Footer.tsx | 40 + src/components/Footer/StyledFooter.ts | 23 + src/components/Footer/docs/footer.mdx | 94 + src/components/Footer/index.ts | 2 + .../Footer/styles/Footer.module.css | 58 + src/components/Form/Checkbox/Checkbox.tsx | 119 + .../Form/Checkbox/CheckboxGroup.tsx | 79 + .../Form/Checkbox/NotifiedCheckboxGroup.ts | 6 + .../Form/Checkbox/docs/checkbox.mdx | 185 + .../Form/Checkbox/docs/helpers/utils.js | 26 + src/components/Form/Checkbox/index.ts | 3 + .../Form/Checkbox/styles/Checkbox.module.css | 155 + .../Checkbox/styles/CheckboxGroup.module.css | 22 + src/components/Form/Fieldset/Fieldset.tsx | 40 + src/components/Form/Fieldset/index.ts | 1 + .../Form/Fieldset/styles/Fieldset.module.css | 9 + src/components/Form/Formbox/Formbox.tsx | 263 + src/components/Form/Formbox/index.ts | 1 + .../Form/Formbox/styles/Formbox.module.css | 450 + src/components/Form/Label/Label.tsx | 57 + src/components/Form/Label/docs/label.mdx | 60 + src/components/Form/Label/index.ts | 1 + .../Form/Label/styles/Label.module.css | 55 + .../Form/LabelWrapper/LabelWrapper.tsx | 64 + .../Form/LabelWrapper/docs/labelWrapper.mdx | 81 + src/components/Form/LabelWrapper/index.ts | 1 + .../styles/LabelWrapper.module.css | 51 + .../Form/Notification/Notification.tsx | 48 + .../Form/Notification/docs/notification.mdx | 44 + src/components/Form/Notification/index.ts | 1 + .../styles/Notification.module.css | 67 + .../Form/Radio/NotifiedRadioGroup.ts | 6 + src/components/Form/Radio/Radio.tsx | 110 + src/components/Form/Radio/RadioGroup.tsx | 73 + .../Form/Radio/docs/helpers/utils.js | 20 + src/components/Form/Radio/docs/radio.mdx | 151 + src/components/Form/Radio/index.ts | 3 + .../Form/Radio/styles/Radio.module.css | 126 + .../Form/Radio/styles/RadioGroup.module.css | 22 + src/components/Form/Select/NotifiedSelect.ts | 4 + src/components/Form/Select/Select.tsx | 143 + .../Form/Select/docs/helpers/options.js | 9 + .../Form/Select/docs/helpers/variants.js | 1 + src/components/Form/Select/docs/select.mdx | 343 + src/components/Form/Select/index.ts | 2 + .../Form/Slider/MultiColorSlider.tsx | 89 + .../Form/Slider/MultiColorSliderTick.tsx | 50 + .../Form/Slider/MultiColorSliderTrack.tsx | 71 + src/components/Form/Slider/NotifiedSlider.ts | 4 + src/components/Form/Slider/Slider.tsx | 290 + src/components/Form/Slider/StyledSlider.ts | 34 + src/components/Form/Slider/docs/slider.mdx | 232 + src/components/Form/Slider/index.ts | 6 + .../styles/MultiColorSliderTick.module.css | 15 + .../Form/Slider/styles/Slider.module.css | 167 + .../Form/Stepper/NotifiedStepper.ts | 4 + src/components/Form/Stepper/Stepper.tsx | 141 + .../Form/Stepper/docs/helpers/variants.js | 1 + src/components/Form/Stepper/docs/stepper.mdx | 150 + src/components/Form/Stepper/index.ts | 2 + .../Form/Stepper/styles/Stepper.module.css | 8 + .../Form/Textarea/NotifiedTextarea.ts | 4 + src/components/Form/Textarea/Textarea.tsx | 90 + .../Form/Textarea/docs/helpers/variants.js | 1 + .../Form/Textarea/docs/textarea.mdx | 220 + src/components/Form/Textarea/index.ts | 2 + .../Form/Textbox/NotifiedPassword.ts | 4 + .../Form/Textbox/NotifiedTextbox.ts | 4 + src/components/Form/Textbox/Password.tsx | 94 + src/components/Form/Textbox/Textbox.tsx | 183 + .../Form/Textbox/docs/helpers/variants.js | 1 + src/components/Form/Textbox/docs/password.mdx | 156 + src/components/Form/Textbox/docs/textbox.mdx | 283 + src/components/Form/Textbox/index.ts | 4 + .../Form/Textbox/styles/Textbox.module.css | 14 + src/components/Form/Toggle/NotifiedToggle.ts | 4 + src/components/Form/Toggle/Toggle.tsx | 117 + src/components/Form/Toggle/docs/toggle.mdx | 114 + src/components/Form/Toggle/index.ts | 2 + .../Form/Toggle/styles/Toggle.module.css | 181 + src/components/Form/docs/form.mdx | 333 + .../Form/docs/helpers/FormComponentDemo.js | 35 + src/components/Form/docs/helpers/FormDemo.js | 57 + src/components/Form/docs/helpers/useForm.js | 24 + src/components/Form/hoc/index.ts | 1 + src/components/Form/hoc/withNotification.tsx | 34 + src/components/Form/index.ts | 13 + src/components/ForwardProps/ForwardProps.tsx | 13 + src/components/ForwardProps/index.ts | 1 + src/components/Header/Header.tsx | 46 + src/components/Header/StyledHeader.ts | 23 + src/components/Header/docs/header.mdx | 105 + src/components/Header/index.ts | 2 + .../Header/styles/Header.module.css | 71 + src/components/Hoverable/Hoverable.ts | 30 + src/components/Hoverable/index.ts | 1 + src/components/IconText/IconText.tsx | 36 + src/components/IconText/docs/iconText.mdx | 46 + src/components/IconText/index.ts | 1 + .../IconText/styles/IconText.module.css | 22 + .../InteractiveGroupConsumer.ts | 3 + .../InteractiveGroupContext.ts | 17 + .../InteractiveGroup/InteractiveGroupItem.ts | 16 + .../InteractiveGroupProvider.tsx | 84 + .../generateInteractiveGroupActions.ts | 157 + src/components/InteractiveGroup/index.ts | 12 + .../interactiveGroupActions.ts | 117 + .../interactiveGroupItemsFactory.ts | 87 + .../interactiveGroupReducer.ts | 296 + .../interactiveGroupSelector.ts | 33 + src/components/InteractiveGroup/types.ts | 6 + .../InteractiveGroup/useInteractiveGroup.ts | 325 + .../useInteractiveGroupItem.ts | 27 + .../LineLoader/ColoredLineLoader.ts | 24 + src/components/LineLoader/LineLoader.tsx | 83 + src/components/LineLoader/StyledLineLoader.ts | 16 + src/components/LineLoader/docs/lineLoader.mdx | 188 + src/components/LineLoader/index.ts | 4 + .../LineLoader/styles/LineLoader.module.css | 49 + src/components/LineLoader/useLineLoader.tsx | 84 + src/components/Link/Link.tsx | 44 + src/components/Link/LinkContainer.tsx | 41 + src/components/Link/StyledLink.ts | 24 + src/components/Link/docs/link.mdx | 106 + src/components/Link/index.ts | 3 + src/components/Link/styles/Link.module.css | 72 + src/components/List/List.tsx | 98 + src/components/List/ListItem.tsx | 64 + src/components/List/docs/list.mdx | 302 + src/components/List/index.ts | 3 + src/components/List/styles/List.module.css | 345 + src/components/List/types.ts | 9 + .../ListRegistry/ListRegistryConsumer.ts | 3 + .../ListRegistry/ListRegistryContext.ts | 14 + .../ListRegistry/ListRegistryItem.tsx | 24 + .../ListRegistry/ListRegistryProvider.tsx | 52 + .../ListRegistry/docs/listRegistry.mdx | 88 + src/components/ListRegistry/index.ts | 8 + .../ListRegistry/listRegistryActions.ts | 27 + .../ListRegistry/listRegistryReducer.ts | 31 + src/components/ListRegistry/types.ts | 1 + .../ListRegistry/useListRegistryItem.ts | 25 + src/components/Loader/Loader.tsx | 62 + src/components/Loader/StyledLoader.ts | 12 + src/components/Loader/docs/loader.mdx | 63 + src/components/Loader/index.ts | 2 + .../Loader/styles/Loader.module.css | 34 + src/components/Panels/MainPanel/MainPanel.tsx | 22 + src/components/Panels/MainPanel/index.ts | 1 + .../MainPanel/styles/MainPanel.module.css | 9 + .../Panels/PanelContainer/PanelContainer.tsx | 41 + src/components/Panels/PanelContainer/index.ts | 1 + .../styles/PanelContainer.module.css | 53 + .../Panels/SidePanel/PermanentSidePanel.tsx | 35 + src/components/Panels/SidePanel/SidePanel.tsx | 73 + src/components/Panels/SidePanel/index.ts | 2 + .../SidePanel/styles/SidePanel.module.css | 20 + .../Panels/StackPanel/PermanentStackPanel.tsx | 35 + .../Panels/StackPanel/StackPanel.tsx | 73 + src/components/Panels/StackPanel/index.ts | 2 + .../StackPanel/styles/StackPanel.module.css | 21 + .../Panels/docs/helpers/SidePanelDemo.js | 40 + .../Panels/docs/helpers/StackPanelDemo.js | 40 + src/components/Panels/docs/panels.mdx | 339 + src/components/Panels/index.ts | 4 + src/components/Paper/ColoredPaper.ts | 28 + src/components/Paper/Paper.tsx | 65 + src/components/Paper/StyledPaper.ts | 19 + src/components/Paper/docs/paper.mdx | 178 + src/components/Paper/index.ts | 3 + src/components/Paper/styles/Paper.module.css | 166 + src/components/Portal/Portal.tsx | 98 + src/components/Portal/index.ts | 1 + .../Portal/styles/Portal.module.css | 9 + src/components/Position/Position.tsx | 43 + src/components/Position/docs/position.mdx | 68 + src/components/Position/index.ts | 1 + .../Position/styles/Position.module.css | 146 + src/components/Progress/Progress.tsx | 83 + src/components/Progress/StyledProgress.ts | 17 + src/components/Progress/docs/progress.mdx | 163 + src/components/Progress/index.ts | 2 + .../Progress/styles/Progress.module.css | 129 + src/components/Rhythm/Rhythm.tsx | 118 + .../Rhythm/docs/helpers/RhythmBox.js | 46 + src/components/Rhythm/docs/rhythm.mdx | 98 + src/components/Rhythm/index.ts | 1 + .../Rhythm/styles/Rhythm.module.css | 8 + src/components/Tags/ColoredTag.ts | 34 + src/components/Tags/StyledTag.ts | 21 + src/components/Tags/Tag.tsx | 46 + src/components/Tags/TagGroup.tsx | 40 + src/components/Tags/docs/tag.mdx | 160 + src/components/Tags/docs/tagGroup.mdx | 36 + src/components/Tags/index.ts | 4 + src/components/Tags/styles/Tags.module.css | 100 + src/components/Triangle/Triangle.tsx | 89 + src/components/Triangle/docs/triangle.mdx | 35 + src/components/Triangle/index.ts | 1 + src/components/Typography/Typography.tsx | 109 + .../Typography/TypographyWithSvg.tsx | 8 + src/components/Typography/docs/typography.mdx | 296 + src/components/Typography/index.ts | 2 + .../Typography/styles/Typography.module.css | 28 + src/components/Typography/styles/align.css | 11 + src/components/Typography/styles/colors.css | 95 + src/components/Typography/styles/elements.css | 45 + src/components/Typography/styles/sizes.css | 35 + src/components/Typography/styles/utils.css | 85 + src/components/Typography/styles/variants.css | 20 + src/components/Typography/styles/weight.css | 28 + src/components/index.ts | 30 + src/compositions/Accordion/Accordion.tsx | 129 + .../Accordion/AccordionContainer.tsx | 47 + .../Accordion/AccordionContent.tsx | 107 + src/compositions/Accordion/AccordionLabel.tsx | 73 + src/compositions/Accordion/AccordionList.tsx | 152 + src/compositions/Accordion/docs/accordion.mdx | 132 + src/compositions/Accordion/index.ts | 6 + .../Accordion/styles/Accordion.module.css | 38 + .../styles/AccordionContent.module.css | 13 + .../styles/AccordionLabel.module.css | 74 + .../Accordion/styles/AccordionList.module.css | 78 + src/compositions/Accordion/types.ts | 9 + src/compositions/Banner/Banner.tsx | 95 + src/compositions/Banner/BannerConsumer.ts | 3 + src/compositions/Banner/BannerContainer.tsx | 22 + src/compositions/Banner/BannerContext.ts | 16 + src/compositions/Banner/BannerFromContext.ts | 23 + src/compositions/Banner/BannerProvider.tsx | 53 + src/compositions/Banner/Banners.tsx | 39 + src/compositions/Banner/bannerActions.ts | 24 + src/compositions/Banner/bannerReducer.ts | 31 + src/compositions/Banner/docs/banner.mdx | 108 + src/compositions/Banner/index.ts | 10 + .../Banner/styles/Banner.module.css | 35 + src/compositions/Banner/types.ts | 3 + src/compositions/Dropdown/Dropdown.tsx | 379 + src/compositions/Dropdown/DropdownContent.tsx | 125 + src/compositions/Dropdown/DropdownEmpty.tsx | 48 + .../Dropdown/DropdownWithTags.tsx | 127 + src/compositions/Dropdown/InlineDropdown.tsx | 7 + src/compositions/Dropdown/docs/dropdown.mdx | 257 + .../Dropdown/docs/dropdownWithTags.mdx | 143 + .../docs/helpers/MultiVariantDropdown.js | 41 + .../Dropdown/docs/helpers/options.js | 29 + .../Dropdown/docs/helpers/variants.js | 1 + src/compositions/Dropdown/dropdownActions.ts | 116 + src/compositions/Dropdown/dropdownReducer.ts | 143 + src/compositions/Dropdown/index.ts | 8 + .../Dropdown/styles/Dropdown.module.css | 205 + .../Dropdown/styles/DropdownEmpty.module.css | 21 + src/compositions/Dropdown/types.ts | 14 + src/compositions/Dropover/Dropover.tsx | 123 + src/compositions/Dropover/DropoverContent.tsx | 32 + .../Dropover/DropoverInputLabel.tsx | 23 + src/compositions/Dropover/DropoverLabel.tsx | 58 + src/compositions/Dropover/InlineDropover.tsx | 7 + src/compositions/Dropover/PortalDropover.tsx | 7 + src/compositions/Dropover/docs/dropover.mdx | 226 + src/compositions/Dropover/index.ts | 6 + .../Dropover/styles/Dropover.module.css | 35 + src/compositions/IconGroup/IconGroup.tsx | 20 + src/compositions/IconGroup/docs/iconGroup.mdx | 90 + src/compositions/IconGroup/index.ts | 1 + .../InteractiveList/InteractiveList.tsx | 166 + .../InteractiveList/InteractiveListItem.tsx | 70 + .../InteractiveList/docs/helpers/options.js | 16 + .../InteractiveList/docs/interactiveList.mdx | 264 + src/compositions/InteractiveList/index.ts | 2 + src/compositions/Modal/Modal.tsx | 123 + src/compositions/Modal/ModalConsumer.ts | 3 + src/compositions/Modal/ModalContainer.tsx | 31 + src/compositions/Modal/ModalContent.tsx | 29 + src/compositions/Modal/ModalContext.ts | 24 + src/compositions/Modal/ModalFooter.tsx | 23 + src/compositions/Modal/ModalFromContext.ts | 24 + src/compositions/Modal/ModalHeader.tsx | 36 + src/compositions/Modal/ModalProvider.tsx | 80 + src/compositions/Modal/Modals.tsx | 32 + src/compositions/Modal/docs/modal.mdx | 188 + src/compositions/Modal/index.ts | 14 + src/compositions/Modal/modalActions.ts | 49 + src/compositions/Modal/modalReducer.ts | 76 + .../Modal/styles/Modal.module.css | 110 + .../Modal/styles/ModalContainer.module.css | 22 + src/compositions/Modal/types.ts | 8 + .../Modal/useModalComponentIds.ts | 20 + .../Navigation/InnerNavigation.tsx | 169 + src/compositions/Navigation/Navigation.tsx | 72 + .../Navigation/NavigationItem.tsx | 78 + .../Navigation/StyledNavigation.ts | 52 + .../Navigation/docs/navigation.mdx | 502 + src/compositions/Navigation/index.ts | 4 + .../Navigation/styles/Navigation.module.css | 267 + src/compositions/Navigation/styles/mixins.css | 28 + src/compositions/Pagination/Pagination.tsx | 169 + .../Pagination/PaginationEllipsis.tsx | 19 + .../Pagination/PaginationJump.tsx | 57 + .../Pagination/PaginationPage.tsx | 49 + .../Pagination/docs/pagination.mdx | 76 + src/compositions/Pagination/index.ts | 5 + src/compositions/Pagination/usePagination.ts | 73 + src/compositions/Popover/InlinePopover.tsx | 7 + src/compositions/Popover/Popover.tsx | 277 + .../Popover/PopoverContentInline.tsx | 88 + src/compositions/Popover/PortalPopover.tsx | 7 + .../Popover/docs/helpers/config.js | 2 + src/compositions/Popover/docs/popover.mdx | 908 + src/compositions/Popover/index.ts | 5 + .../Popover/styles/Popover.module.css | 114 + .../Popover/usePopoverComponentIds.ts | 31 + src/compositions/Tabs/ColoredTabs.ts | 34 + src/compositions/Tabs/Tab.tsx | 81 + src/compositions/Tabs/TabList.tsx | 143 + src/compositions/Tabs/TabPanel.tsx | 36 + src/compositions/Tabs/TabPanelGroup.tsx | 87 + src/compositions/Tabs/Tabs.tsx | 134 + src/compositions/Tabs/TabsContainer.tsx | 55 + src/compositions/Tabs/docs/tabs.mdx | 225 + src/compositions/Tabs/index.ts | 8 + .../Tabs/styles/TabPanel.module.css | 11 + .../Tabs/styles/TabPanelGroup.module.css | 37 + src/compositions/Tabs/styles/Tabs.module.css | 228 + .../Tabs/styles/TabsContainer.module.css | 53 + src/compositions/Tabs/types.ts | 1 + src/compositions/Toast/Toast.tsx | 131 + src/compositions/Toast/ToastConsumer.ts | 3 + src/compositions/Toast/ToastContainer.tsx | 33 + src/compositions/Toast/ToastContext.ts | 18 + src/compositions/Toast/ToastCountdownBar.tsx | 58 + src/compositions/Toast/ToastFromContext.ts | 31 + src/compositions/Toast/ToastProvider.tsx | 103 + src/compositions/Toast/Toasts.tsx | 44 + src/compositions/Toast/docs/toast.mdx | 131 + src/compositions/Toast/index.ts | 12 + .../Toast/styles/Toast.module.css | 114 + .../Toast/styles/ToastContainer.module.css | 46 + .../Toast/styles/ToastCountdownBar.module.css | 36 + src/compositions/Toast/toastActions.ts | 34 + src/compositions/Toast/toastReducer.ts | 39 + src/compositions/Toast/types.ts | 8 + .../Toast/useToastComponentIds.ts | 20 + .../Tooltip/InlineTextTooltip.tsx | 7 + src/compositions/Tooltip/InlineTooltip.tsx | 7 + .../Tooltip/PortalTextTooltip.tsx | 7 + src/compositions/Tooltip/PortalTooltip.tsx | 7 + src/compositions/Tooltip/TextTooltip.tsx | 89 + src/compositions/Tooltip/Tooltip.tsx | 175 + src/compositions/Tooltip/docs/tooltip.mdx | 823 + src/compositions/Tooltip/index.ts | 6 + .../Tooltip/styles/Tooltip.module.css | 102 + src/compositions/index.ts | 13 + src/config/index.ts | 4 + src/config/themes/dark.ts | 5 + src/config/themes/index.ts | 20 + src/config/themes/light.ts | 5 + .../Accessibility/AccessibilityContext.ts | 15 + .../Accessibility/AccessibilityProvider.tsx | 67 + src/context/Accessibility/index.ts | 3 + src/context/Accessibility/useAccessibility.ts | 7 + src/context/Scale/ScaleContext.ts | 12 + src/context/Scale/ScaleProvider.tsx | 19 + src/context/Scale/index.ts | 2 + src/context/Theme/ThemeContext.ts | 12 + src/context/Theme/ThemeProvider.tsx | 37 + src/context/Theme/index.ts | 3 + src/context/Theme/withTheme.tsx | 20 + src/context/index.ts | 3 + src/docs/colors.mdx | 147 + src/docs/helpers/ColorLooper.js | 39 + src/docs/helpers/ColorSwatch.js | 115 + src/docs/helpers/ColorTheme.js | 86 + src/docs/helpers/DocsWrapper.js | 35 + src/docs/helpers/IconLooper.js | 13 + src/docs/helpers/ListProps.js | 11 + src/docs/helpers/Looper.js | 33 + src/docs/helpers/PageTitle.js | 35 + src/docs/helpers/StateWrapper.js | 24 + src/docs/helpers/ThemeWrapper.js | 72 + src/docs/helpers/TimeoutWrapper.js | 22 + src/docs/helpers/Version.js | 6 + src/docs/helpers/propTypes.js | 5 + src/docs/helpers/styles.css | 9 + src/docs/icons.mdx | 39 + src/docs/index.mdx | 31 + src/docs/playground.mdx | 997 + .../components/Logo/index.js | 16 + src/gatsby-theme-docz/wrapper.js | 3 + src/hooks/index.ts | 19 + src/hooks/useAbsoluteCoords.ts | 70 + src/hooks/useAnimationLoop.ts | 223 + src/hooks/useClickAndEscape.ts | 40 + src/hooks/useComponentId.ts | 24 + src/hooks/useComponentVisible.ts | 91 + src/hooks/useDeepFocus.ts | 112 + src/hooks/useDimensions.ts | 74 + src/hooks/useElementEventListener.ts | 26 + src/hooks/useFocusReturn.ts | 39 + src/hooks/useIconSize.ts | 42 + src/hooks/useInitializer.ts | 52 + src/hooks/useInterval.ts | 20 + src/hooks/useMousePosition.ts | 23 + src/hooks/usePanelCollapser.ts | 212 + src/hooks/usePopoverPosition.ts | 74 + src/hooks/useRefEventListener.ts | 21 + src/hooks/useSafeTimeout.ts | 45 + src/hooks/useScrollIntoView.ts | 20 + src/hooks/useThemeId.ts | 8 + src/hooks/useTranslations.ts | 16 + src/icons/ArrowDoubleLeftIcon.tsx | 29 + src/icons/ArrowDoubleRightIcon.tsx | 29 + src/icons/ArrowDownIcon.tsx | 21 + src/icons/ArrowLeftIcon.tsx | 21 + src/icons/ArrowRightIcon.tsx | 25 + src/icons/ArrowUpDownIcon.tsx | 25 + src/icons/ArrowUpIcon.tsx | 21 + src/icons/EyeIcon.tsx | 17 + src/icons/EyeSlashIcon.tsx | 26 + src/icons/MinusIcon.tsx | 14 + src/icons/PencilSlashIcon.tsx | 24 + src/icons/PinIcon.tsx | 17 + src/icons/PlusIcon.tsx | 15 + src/icons/SearchIcon.tsx | 21 + src/icons/SpinnerIcon.tsx | 26 + src/icons/TimesIcon.tsx | 17 + src/icons/index.ts | 16 + src/icons/internal/BlobbrIcon.tsx | 21 + src/icons/internal/CheckIcon.tsx | 14 + src/icons/internal/GithubIcon.tsx | 21 + src/icons/internal/HelpIcon.tsx | 21 + src/icons/internal/LeftPanelIcon.tsx | 21 + src/icons/internal/LightOffIcon.tsx | 20 + src/icons/internal/LightOnIcon.tsx | 24 + src/icons/internal/PhorkIcon.tsx | 17 + src/icons/internal/RightPanelIcon.tsx | 25 + src/icons/internal/TagIcon.tsx | 17 + src/icons/internal/TopPanelIcon.tsx | 21 + src/icons/internal/index.ts | 11 + src/index.ts | 8 + src/postcss/mixins.js | 252 + src/postcss/vars/common.js | 43 + src/postcss/vars/common.json | 30 + src/postcss/vars/darkTheme.js | 173 + src/postcss/vars/darkTheme.json | 172 + src/postcss/vars/index.js | 19 + src/postcss/vars/lightTheme.js | 169 + src/postcss/vars/lightTheme.json | 172 + src/postcss/vars/utils/color.js | 57 + src/styles/common.css | 18 + src/styles/common/Scrollbar.module.css | 33 + src/styles/common/mixins/addScrollbar.css | 39 + src/styles/fonts.css | 156 + src/styles/fonts/roboto-latin-100.woff | Bin 0 -> 19936 bytes src/styles/fonts/roboto-latin-100.woff2 | Bin 0 -> 15316 bytes src/styles/fonts/roboto-latin-100italic.woff | Bin 0 -> 21268 bytes src/styles/fonts/roboto-latin-100italic.woff2 | Bin 0 -> 16644 bytes src/styles/fonts/roboto-latin-300.woff | Bin 0 -> 19916 bytes src/styles/fonts/roboto-latin-300.woff2 | Bin 0 -> 15440 bytes src/styles/fonts/roboto-latin-300italic.woff | Bin 0 -> 21776 bytes src/styles/fonts/roboto-latin-300italic.woff2 | Bin 0 -> 17124 bytes src/styles/fonts/roboto-latin-400.woff | Bin 0 -> 19824 bytes src/styles/fonts/roboto-latin-400.woff2 | Bin 0 -> 15344 bytes src/styles/fonts/roboto-latin-400italic.woff | Bin 0 -> 21528 bytes src/styles/fonts/roboto-latin-400italic.woff2 | Bin 0 -> 16944 bytes src/styles/fonts/roboto-latin-500.woff | Bin 0 -> 20012 bytes src/styles/fonts/roboto-latin-500.woff2 | Bin 0 -> 15552 bytes src/styles/fonts/roboto-latin-500italic.woff | Bin 0 -> 21564 bytes src/styles/fonts/roboto-latin-500italic.woff2 | Bin 0 -> 16940 bytes src/styles/fonts/roboto-latin-700.woff | Bin 0 -> 19888 bytes src/styles/fonts/roboto-latin-700.woff2 | Bin 0 -> 15436 bytes src/styles/fonts/roboto-latin-700italic.woff | Bin 0 -> 21132 bytes src/styles/fonts/roboto-latin-700italic.woff2 | Bin 0 -> 16572 bytes src/styles/fonts/roboto-latin-900.woff | Bin 0 -> 19936 bytes src/styles/fonts/roboto-latin-900.woff2 | Bin 0 -> 15340 bytes src/styles/fonts/roboto-latin-900italic.woff | Bin 0 -> 21856 bytes src/styles/fonts/roboto-latin-900italic.woff2 | Bin 0 -> 17156 bytes src/styles/normalize.css | 351 + src/types/index.ts | 5 + src/types/observer.ts | 12 + src/types/props.ts | 7 + src/types/svgIcon.ts | 6 + src/types/ui.ts | 32 + src/types/utils.ts | 23 + src/utils/boundsObservable.ts | 82 + src/utils/case.ts | 62 + src/utils/combineRefs.ts | 7 + src/utils/easings.ts | 6 + src/utils/getAbsoluteCoords.ts | 165 + src/utils/getFocusableElements.ts | 28 + src/utils/getPositionOffset.ts | 61 + src/utils/getTabIndex.ts | 7 + src/utils/index.ts | 13 + src/utils/isElementFocusable.ts | 43 + src/utils/isElementVisible.ts | 20 + src/utils/measureDomNode.ts | 64 + src/utils/renderFromProp.tsx | 65 + src/utils/setStyle.ts | 7 + tsconfig.cjs.json | 8 + tsconfig.esm.json | 8 + tsconfig.json | 29 + tsconfig.rollup.json | 4 + yarn.lock | 19981 ++++++++++++++++ 718 files changed, 59250 insertions(+) create mode 100644 .babelrc create mode 100644 .browserslistrc create mode 100644 .changelogrc.js create mode 100644 .commitlintrc.js create mode 100755 .docker/prod/Dockerfile create mode 100644 .docker/prod/nginx.conf create mode 100644 .dockerignore create mode 100644 .editorconfig create mode 100644 .eslintignore create mode 100755 .eslintrc create mode 100644 .github/workflows/ci.yml create mode 100644 .github/workflows/docs.yml create mode 100644 .github/workflows/publish.yml create mode 100644 .gitignore create mode 100644 .prettierignore create mode 100644 .prettierrc create mode 100644 .releaserc create mode 100644 .stylelintignore create mode 100644 .stylelintrc create mode 100644 .svgo.yml create mode 100644 CHANGELOG.md create mode 100644 CONTRIBUTING.md create mode 100644 LICENSE create mode 100644 README.md create mode 100644 __mocks__/file.mock.js create mode 100644 __mocks__/style.mock.js create mode 100644 __tests__/.eslintrc.json create mode 100644 __tests__/components/Avatar/Avatar.test.tsx create mode 100644 __tests__/components/Badge/Badge.test.tsx create mode 100644 __tests__/components/Button/Button.test.tsx create mode 100644 __tests__/components/Button/ButtonGroup.test.tsx create mode 100644 __tests__/components/Button/IconButton.test.tsx create mode 100644 __tests__/components/Card/Card.test.tsx create mode 100644 __tests__/components/Card/CardBody.test.tsx create mode 100644 __tests__/components/Card/CardEdge.test.tsx create mode 100644 __tests__/components/Card/CardTitle.test.tsx create mode 100644 __tests__/components/Divider/Divider.test.tsx create mode 100644 __tests__/components/Flex/Flex.test.tsx create mode 100644 __tests__/components/Footer/Footer.test.tsx create mode 100644 __tests__/components/Form/Checkbox/Checkbox.test.tsx create mode 100644 __tests__/components/Form/Checkbox/CheckboxGroup.test.tsx create mode 100644 __tests__/components/Form/Fieldset/Fieldset.test.tsx create mode 100644 __tests__/components/Form/Label/Label.test.tsx create mode 100644 __tests__/components/Form/LabelWrapper/LabelWrapper.test.tsx create mode 100644 __tests__/components/Form/Notification/Notification.test.tsx create mode 100644 __tests__/components/Form/Radio/Radio.test.tsx create mode 100644 __tests__/components/Form/Radio/RadioGroup.test.tsx create mode 100644 __tests__/components/Form/Select/Select.test.tsx create mode 100644 __tests__/components/Form/Slider/Slider.test.tsx create mode 100644 __tests__/components/Form/Stepper/Stepper.test.tsx create mode 100644 __tests__/components/Form/Textarea/Textarea.test.tsx create mode 100644 __tests__/components/Form/Textbox/Password.test.tsx create mode 100644 __tests__/components/Form/Textbox/Textbox.test.tsx create mode 100644 __tests__/components/Form/Toggle/Toggle.test.tsx create mode 100644 __tests__/components/Header/Header.test.tsx create mode 100644 __tests__/components/IconText/IconText.test.tsx create mode 100644 __tests__/components/LineLoader/LineLoader.test.tsx create mode 100644 __tests__/components/Link/Link.test.tsx create mode 100644 __tests__/components/Link/LinkContainer.test.tsx create mode 100644 __tests__/components/List/List.test.tsx create mode 100644 __tests__/components/Loader/Loader.test.tsx create mode 100644 __tests__/components/Panels/MainPanel.test.tsx create mode 100644 __tests__/components/Panels/PanelContainer.test.tsx create mode 100644 __tests__/components/Panels/Panels.test.tsx create mode 100644 __tests__/components/Panels/PermanentSidePanel.test.tsx create mode 100644 __tests__/components/Panels/PermanentStackPanel.test.tsx create mode 100644 __tests__/components/Panels/SidePanel.test.tsx create mode 100644 __tests__/components/Panels/StackPanel.test.tsx create mode 100644 __tests__/components/Paper/Paper.test.tsx create mode 100644 __tests__/components/Portal/Portal.test.tsx create mode 100644 __tests__/components/Position/Position.test.tsx create mode 100644 __tests__/components/Progress/Progress.test.tsx create mode 100644 __tests__/components/Rhythm/Rhythm.test.tsx create mode 100644 __tests__/components/Tag/Tag.test.tsx create mode 100644 __tests__/components/Tag/TagGroup.test.tsx create mode 100644 __tests__/components/Triangle/Triangle.test.tsx create mode 100644 __tests__/components/Typography/Typography.test.tsx create mode 100644 __tests__/compositions/Accordion/Accordion.test.tsx create mode 100644 __tests__/compositions/Banner/Banner.test.tsx create mode 100644 __tests__/compositions/Banner/BannerContainer.test.tsx create mode 100644 __tests__/compositions/Dropdown/InlineDropdown.test.tsx create mode 100644 __tests__/compositions/Dropover/InlineDropover.test.tsx create mode 100644 __tests__/compositions/IconGroup/IconGroup.test.tsx create mode 100644 __tests__/compositions/InteractiveList/InteractiveList.test.tsx create mode 100644 __tests__/compositions/Modal/Modal.test.tsx create mode 100644 __tests__/compositions/Navigation/Navigation.test.tsx create mode 100644 __tests__/compositions/Pagination/Pagination.test.tsx create mode 100644 __tests__/compositions/Popover/InlinePopover.test.tsx create mode 100644 __tests__/compositions/Tabs/Tabs.test.tsx create mode 100644 __tests__/compositions/Toast/Toast.test.tsx create mode 100644 __tests__/compositions/Tooltip/InlineTooltip.test.tsx create mode 100644 __tests__/jest.d.ts create mode 100644 __tests__/tsconfig.ci.json create mode 100644 __tests__/tsconfig.json create mode 100755 doczrc.js create mode 100644 gatsby-config.js create mode 100644 gatsby-node.js create mode 100644 jest-setup.js create mode 100644 jest.config.ci.js create mode 100644 jest.config.js create mode 100644 package.json create mode 100644 postcss.config.js create mode 100644 public/favicon/android-chrome-192x192.png create mode 100644 public/favicon/android-chrome-512x512.png create mode 100644 public/favicon/apple-touch-icon.png create mode 100644 public/favicon/browserconfig.xml create mode 100644 public/favicon/favicon-16x16.png create mode 100644 public/favicon/favicon-32x32.png create mode 100644 public/favicon/favicon.ico create mode 100644 public/favicon/mstile-150x150.png create mode 100644 public/favicon/safari-pinned-tab.svg create mode 100644 public/favicon/site.webmanifest create mode 100644 public/icons/arrow-double-left.svg create mode 100644 public/icons/arrow-double-right.svg create mode 100644 public/icons/arrow-down.svg create mode 100644 public/icons/arrow-left.svg create mode 100644 public/icons/arrow-right.svg create mode 100644 public/icons/arrow-up-down.svg create mode 100644 public/icons/arrow-up.svg create mode 100644 public/icons/eye-slash.svg create mode 100644 public/icons/eye.svg create mode 100644 public/icons/internal/blobbr.svg create mode 100644 public/icons/internal/check.svg create mode 100644 public/icons/internal/github.svg create mode 100644 public/icons/internal/help.svg create mode 100644 public/icons/internal/left-panel.svg create mode 100644 public/icons/internal/light-off.svg create mode 100644 public/icons/internal/light-on.svg create mode 100644 public/icons/internal/phork.svg create mode 100644 public/icons/internal/right-panel.svg create mode 100644 public/icons/internal/tag.svg create mode 100644 public/icons/internal/top-panel.svg create mode 100644 public/icons/minus.svg create mode 100644 public/icons/pencil-slash.svg create mode 100644 public/icons/pin.svg create mode 100644 public/icons/plus.svg create mode 100644 public/icons/search.svg create mode 100644 public/icons/spinner.svg create mode 100644 public/icons/times.svg create mode 100644 public/images/avatar.jpg create mode 100644 public/images/phork.svg create mode 100644 rollup.config.js create mode 100644 scripts/generate-component-info.js create mode 100644 scripts/generate-config-json.js create mode 100644 scripts/generate-lib-index.js create mode 100644 scripts/generate-lib-package.js create mode 100644 scripts/generate-postcss-vars-json.js create mode 100644 scripts/generate-svg-icons.js create mode 100644 scripts/scaffold-component-test.js create mode 100644 scripts/scaffold-component.js create mode 100644 scripts/utils/exec.js create mode 100644 scripts/utils/rollup-plugin-local-external-module.js create mode 100644 scripts/utils/svg-icon-template.js create mode 100644 scripts/utils/write-file.js create mode 100644 src/assetTypes.d.ts create mode 100644 src/components/Avatar/Avatar.tsx create mode 100644 src/components/Avatar/StyledAvatar.ts create mode 100644 src/components/Avatar/docs/avatar.mdx create mode 100644 src/components/Avatar/index.ts create mode 100644 src/components/Avatar/styles/Avatar.module.css create mode 100644 src/components/Badge/Badge.tsx create mode 100644 src/components/Badge/ColoredBadge.ts create mode 100644 src/components/Badge/StyledBadge.ts create mode 100644 src/components/Badge/docs/badge.mdx create mode 100644 src/components/Badge/index.ts create mode 100644 src/components/Badge/styles/Badge.module.css create mode 100644 src/components/Button/Button.tsx create mode 100644 src/components/Button/ButtonGroup.tsx create mode 100644 src/components/Button/IconButton.tsx create mode 100644 src/components/Button/IconTextButton.tsx create mode 100644 src/components/Button/StyledButton.ts create mode 100644 src/components/Button/docs/button.mdx create mode 100644 src/components/Button/docs/buttonGroup.mdx create mode 100644 src/components/Button/docs/iconButton.mdx create mode 100644 src/components/Button/index.ts create mode 100644 src/components/Button/styles/Button.module.css create mode 100644 src/components/Button/styles/ButtonGroup.module.css create mode 100644 src/components/Button/styles/mixins.css create mode 100644 src/components/Card/Card.tsx create mode 100644 src/components/Card/CardBody.tsx create mode 100644 src/components/Card/CardEdge.tsx create mode 100644 src/components/Card/CardTitle.tsx create mode 100644 src/components/Card/StyledCard.tsx create mode 100644 src/components/Card/docs/card.mdx create mode 100644 src/components/Card/index.ts create mode 100644 src/components/Card/styles/Card.module.css create mode 100644 src/components/Card/styles/CardBody.module.css create mode 100644 src/components/Card/styles/CardEdge.module.css create mode 100644 src/components/Card/styles/CardTitle.module.css create mode 100644 src/components/Card/styles/mixins/addRaised.css create mode 100644 src/components/Divider/ColoredDivider.ts create mode 100644 src/components/Divider/Divider.tsx create mode 100755 src/components/Divider/docs/divider.mdx create mode 100644 src/components/Divider/index.ts create mode 100644 src/components/Divider/styles/Divider.module.css create mode 100644 src/components/Draggable/Draggable.ts create mode 100644 src/components/Draggable/index.ts create mode 100644 src/components/ErrorBoundary/ErrorBoundary.tsx create mode 100644 src/components/ErrorBoundary/index.ts create mode 100644 src/components/EventListener/EventListenerConsumer.ts create mode 100644 src/components/EventListener/EventListenerContext.ts create mode 100644 src/components/EventListener/EventListenerProvider.tsx create mode 100644 src/components/EventListener/docs/eventListener.mdx create mode 100644 src/components/EventListener/docs/helpers/HookDemo.js create mode 100644 src/components/EventListener/eventListenerActions.ts create mode 100644 src/components/EventListener/eventListenerReducer.ts create mode 100644 src/components/EventListener/index.ts create mode 100644 src/components/EventListener/types.ts create mode 100644 src/components/EventListener/useEventListener.ts create mode 100644 src/components/Flex/Flex.tsx create mode 100644 src/components/Flex/StyledFlex.ts create mode 100644 src/components/Flex/docs/flex.mdx create mode 100644 src/components/Flex/docs/helpers/FlexBox.js create mode 100644 src/components/Flex/index.ts create mode 100644 src/components/Flex/styles/Flex.module.css create mode 100644 src/components/Footer/Footer.tsx create mode 100644 src/components/Footer/StyledFooter.ts create mode 100644 src/components/Footer/docs/footer.mdx create mode 100644 src/components/Footer/index.ts create mode 100644 src/components/Footer/styles/Footer.module.css create mode 100644 src/components/Form/Checkbox/Checkbox.tsx create mode 100644 src/components/Form/Checkbox/CheckboxGroup.tsx create mode 100644 src/components/Form/Checkbox/NotifiedCheckboxGroup.ts create mode 100644 src/components/Form/Checkbox/docs/checkbox.mdx create mode 100644 src/components/Form/Checkbox/docs/helpers/utils.js create mode 100644 src/components/Form/Checkbox/index.ts create mode 100644 src/components/Form/Checkbox/styles/Checkbox.module.css create mode 100644 src/components/Form/Checkbox/styles/CheckboxGroup.module.css create mode 100644 src/components/Form/Fieldset/Fieldset.tsx create mode 100644 src/components/Form/Fieldset/index.ts create mode 100644 src/components/Form/Fieldset/styles/Fieldset.module.css create mode 100644 src/components/Form/Formbox/Formbox.tsx create mode 100644 src/components/Form/Formbox/index.ts create mode 100644 src/components/Form/Formbox/styles/Formbox.module.css create mode 100644 src/components/Form/Label/Label.tsx create mode 100644 src/components/Form/Label/docs/label.mdx create mode 100644 src/components/Form/Label/index.ts create mode 100644 src/components/Form/Label/styles/Label.module.css create mode 100644 src/components/Form/LabelWrapper/LabelWrapper.tsx create mode 100644 src/components/Form/LabelWrapper/docs/labelWrapper.mdx create mode 100644 src/components/Form/LabelWrapper/index.ts create mode 100644 src/components/Form/LabelWrapper/styles/LabelWrapper.module.css create mode 100644 src/components/Form/Notification/Notification.tsx create mode 100644 src/components/Form/Notification/docs/notification.mdx create mode 100644 src/components/Form/Notification/index.ts create mode 100644 src/components/Form/Notification/styles/Notification.module.css create mode 100644 src/components/Form/Radio/NotifiedRadioGroup.ts create mode 100644 src/components/Form/Radio/Radio.tsx create mode 100644 src/components/Form/Radio/RadioGroup.tsx create mode 100644 src/components/Form/Radio/docs/helpers/utils.js create mode 100644 src/components/Form/Radio/docs/radio.mdx create mode 100644 src/components/Form/Radio/index.ts create mode 100644 src/components/Form/Radio/styles/Radio.module.css create mode 100644 src/components/Form/Radio/styles/RadioGroup.module.css create mode 100644 src/components/Form/Select/NotifiedSelect.ts create mode 100644 src/components/Form/Select/Select.tsx create mode 100644 src/components/Form/Select/docs/helpers/options.js create mode 100644 src/components/Form/Select/docs/helpers/variants.js create mode 100644 src/components/Form/Select/docs/select.mdx create mode 100644 src/components/Form/Select/index.ts create mode 100644 src/components/Form/Slider/MultiColorSlider.tsx create mode 100644 src/components/Form/Slider/MultiColorSliderTick.tsx create mode 100644 src/components/Form/Slider/MultiColorSliderTrack.tsx create mode 100644 src/components/Form/Slider/NotifiedSlider.ts create mode 100644 src/components/Form/Slider/Slider.tsx create mode 100644 src/components/Form/Slider/StyledSlider.ts create mode 100644 src/components/Form/Slider/docs/slider.mdx create mode 100644 src/components/Form/Slider/index.ts create mode 100644 src/components/Form/Slider/styles/MultiColorSliderTick.module.css create mode 100644 src/components/Form/Slider/styles/Slider.module.css create mode 100644 src/components/Form/Stepper/NotifiedStepper.ts create mode 100644 src/components/Form/Stepper/Stepper.tsx create mode 100644 src/components/Form/Stepper/docs/helpers/variants.js create mode 100644 src/components/Form/Stepper/docs/stepper.mdx create mode 100644 src/components/Form/Stepper/index.ts create mode 100644 src/components/Form/Stepper/styles/Stepper.module.css create mode 100644 src/components/Form/Textarea/NotifiedTextarea.ts create mode 100644 src/components/Form/Textarea/Textarea.tsx create mode 100644 src/components/Form/Textarea/docs/helpers/variants.js create mode 100644 src/components/Form/Textarea/docs/textarea.mdx create mode 100644 src/components/Form/Textarea/index.ts create mode 100644 src/components/Form/Textbox/NotifiedPassword.ts create mode 100644 src/components/Form/Textbox/NotifiedTextbox.ts create mode 100644 src/components/Form/Textbox/Password.tsx create mode 100644 src/components/Form/Textbox/Textbox.tsx create mode 100644 src/components/Form/Textbox/docs/helpers/variants.js create mode 100644 src/components/Form/Textbox/docs/password.mdx create mode 100644 src/components/Form/Textbox/docs/textbox.mdx create mode 100644 src/components/Form/Textbox/index.ts create mode 100644 src/components/Form/Textbox/styles/Textbox.module.css create mode 100644 src/components/Form/Toggle/NotifiedToggle.ts create mode 100644 src/components/Form/Toggle/Toggle.tsx create mode 100644 src/components/Form/Toggle/docs/toggle.mdx create mode 100644 src/components/Form/Toggle/index.ts create mode 100644 src/components/Form/Toggle/styles/Toggle.module.css create mode 100644 src/components/Form/docs/form.mdx create mode 100644 src/components/Form/docs/helpers/FormComponentDemo.js create mode 100644 src/components/Form/docs/helpers/FormDemo.js create mode 100644 src/components/Form/docs/helpers/useForm.js create mode 100644 src/components/Form/hoc/index.ts create mode 100644 src/components/Form/hoc/withNotification.tsx create mode 100644 src/components/Form/index.ts create mode 100644 src/components/ForwardProps/ForwardProps.tsx create mode 100644 src/components/ForwardProps/index.ts create mode 100644 src/components/Header/Header.tsx create mode 100644 src/components/Header/StyledHeader.ts create mode 100644 src/components/Header/docs/header.mdx create mode 100644 src/components/Header/index.ts create mode 100644 src/components/Header/styles/Header.module.css create mode 100644 src/components/Hoverable/Hoverable.ts create mode 100644 src/components/Hoverable/index.ts create mode 100755 src/components/IconText/IconText.tsx create mode 100644 src/components/IconText/docs/iconText.mdx create mode 100644 src/components/IconText/index.ts create mode 100755 src/components/IconText/styles/IconText.module.css create mode 100644 src/components/InteractiveGroup/InteractiveGroupConsumer.ts create mode 100755 src/components/InteractiveGroup/InteractiveGroupContext.ts create mode 100644 src/components/InteractiveGroup/InteractiveGroupItem.ts create mode 100755 src/components/InteractiveGroup/InteractiveGroupProvider.tsx create mode 100755 src/components/InteractiveGroup/generateInteractiveGroupActions.ts create mode 100644 src/components/InteractiveGroup/index.ts create mode 100644 src/components/InteractiveGroup/interactiveGroupActions.ts create mode 100755 src/components/InteractiveGroup/interactiveGroupItemsFactory.ts create mode 100755 src/components/InteractiveGroup/interactiveGroupReducer.ts create mode 100644 src/components/InteractiveGroup/interactiveGroupSelector.ts create mode 100644 src/components/InteractiveGroup/types.ts create mode 100755 src/components/InteractiveGroup/useInteractiveGroup.ts create mode 100644 src/components/InteractiveGroup/useInteractiveGroupItem.ts create mode 100644 src/components/LineLoader/ColoredLineLoader.ts create mode 100644 src/components/LineLoader/LineLoader.tsx create mode 100644 src/components/LineLoader/StyledLineLoader.ts create mode 100755 src/components/LineLoader/docs/lineLoader.mdx create mode 100755 src/components/LineLoader/index.ts create mode 100644 src/components/LineLoader/styles/LineLoader.module.css create mode 100755 src/components/LineLoader/useLineLoader.tsx create mode 100644 src/components/Link/Link.tsx create mode 100644 src/components/Link/LinkContainer.tsx create mode 100644 src/components/Link/StyledLink.ts create mode 100644 src/components/Link/docs/link.mdx create mode 100644 src/components/Link/index.ts create mode 100644 src/components/Link/styles/Link.module.css create mode 100644 src/components/List/List.tsx create mode 100755 src/components/List/ListItem.tsx create mode 100644 src/components/List/docs/list.mdx create mode 100644 src/components/List/index.ts create mode 100644 src/components/List/styles/List.module.css create mode 100644 src/components/List/types.ts create mode 100644 src/components/ListRegistry/ListRegistryConsumer.ts create mode 100644 src/components/ListRegistry/ListRegistryContext.ts create mode 100644 src/components/ListRegistry/ListRegistryItem.tsx create mode 100644 src/components/ListRegistry/ListRegistryProvider.tsx create mode 100644 src/components/ListRegistry/docs/listRegistry.mdx create mode 100644 src/components/ListRegistry/index.ts create mode 100644 src/components/ListRegistry/listRegistryActions.ts create mode 100644 src/components/ListRegistry/listRegistryReducer.ts create mode 100644 src/components/ListRegistry/types.ts create mode 100644 src/components/ListRegistry/useListRegistryItem.ts create mode 100644 src/components/Loader/Loader.tsx create mode 100644 src/components/Loader/StyledLoader.ts create mode 100644 src/components/Loader/docs/loader.mdx create mode 100644 src/components/Loader/index.ts create mode 100644 src/components/Loader/styles/Loader.module.css create mode 100644 src/components/Panels/MainPanel/MainPanel.tsx create mode 100644 src/components/Panels/MainPanel/index.ts create mode 100644 src/components/Panels/MainPanel/styles/MainPanel.module.css create mode 100644 src/components/Panels/PanelContainer/PanelContainer.tsx create mode 100644 src/components/Panels/PanelContainer/index.ts create mode 100644 src/components/Panels/PanelContainer/styles/PanelContainer.module.css create mode 100755 src/components/Panels/SidePanel/PermanentSidePanel.tsx create mode 100644 src/components/Panels/SidePanel/SidePanel.tsx create mode 100644 src/components/Panels/SidePanel/index.ts create mode 100644 src/components/Panels/SidePanel/styles/SidePanel.module.css create mode 100755 src/components/Panels/StackPanel/PermanentStackPanel.tsx create mode 100644 src/components/Panels/StackPanel/StackPanel.tsx create mode 100644 src/components/Panels/StackPanel/index.ts create mode 100644 src/components/Panels/StackPanel/styles/StackPanel.module.css create mode 100644 src/components/Panels/docs/helpers/SidePanelDemo.js create mode 100644 src/components/Panels/docs/helpers/StackPanelDemo.js create mode 100644 src/components/Panels/docs/panels.mdx create mode 100644 src/components/Panels/index.ts create mode 100644 src/components/Paper/ColoredPaper.ts create mode 100644 src/components/Paper/Paper.tsx create mode 100644 src/components/Paper/StyledPaper.ts create mode 100644 src/components/Paper/docs/paper.mdx create mode 100644 src/components/Paper/index.ts create mode 100644 src/components/Paper/styles/Paper.module.css create mode 100644 src/components/Portal/Portal.tsx create mode 100644 src/components/Portal/index.ts create mode 100644 src/components/Portal/styles/Portal.module.css create mode 100644 src/components/Position/Position.tsx create mode 100644 src/components/Position/docs/position.mdx create mode 100644 src/components/Position/index.ts create mode 100644 src/components/Position/styles/Position.module.css create mode 100644 src/components/Progress/Progress.tsx create mode 100644 src/components/Progress/StyledProgress.ts create mode 100644 src/components/Progress/docs/progress.mdx create mode 100644 src/components/Progress/index.ts create mode 100644 src/components/Progress/styles/Progress.module.css create mode 100644 src/components/Rhythm/Rhythm.tsx create mode 100644 src/components/Rhythm/docs/helpers/RhythmBox.js create mode 100644 src/components/Rhythm/docs/rhythm.mdx create mode 100644 src/components/Rhythm/index.ts create mode 100644 src/components/Rhythm/styles/Rhythm.module.css create mode 100644 src/components/Tags/ColoredTag.ts create mode 100644 src/components/Tags/StyledTag.ts create mode 100644 src/components/Tags/Tag.tsx create mode 100644 src/components/Tags/TagGroup.tsx create mode 100644 src/components/Tags/docs/tag.mdx create mode 100644 src/components/Tags/docs/tagGroup.mdx create mode 100644 src/components/Tags/index.ts create mode 100755 src/components/Tags/styles/Tags.module.css create mode 100644 src/components/Triangle/Triangle.tsx create mode 100644 src/components/Triangle/docs/triangle.mdx create mode 100644 src/components/Triangle/index.ts create mode 100644 src/components/Typography/Typography.tsx create mode 100644 src/components/Typography/TypographyWithSvg.tsx create mode 100644 src/components/Typography/docs/typography.mdx create mode 100644 src/components/Typography/index.ts create mode 100644 src/components/Typography/styles/Typography.module.css create mode 100644 src/components/Typography/styles/align.css create mode 100644 src/components/Typography/styles/colors.css create mode 100644 src/components/Typography/styles/elements.css create mode 100644 src/components/Typography/styles/sizes.css create mode 100644 src/components/Typography/styles/utils.css create mode 100644 src/components/Typography/styles/variants.css create mode 100644 src/components/Typography/styles/weight.css create mode 100755 src/components/index.ts create mode 100755 src/compositions/Accordion/Accordion.tsx create mode 100644 src/compositions/Accordion/AccordionContainer.tsx create mode 100644 src/compositions/Accordion/AccordionContent.tsx create mode 100644 src/compositions/Accordion/AccordionLabel.tsx create mode 100755 src/compositions/Accordion/AccordionList.tsx create mode 100755 src/compositions/Accordion/docs/accordion.mdx create mode 100644 src/compositions/Accordion/index.ts create mode 100644 src/compositions/Accordion/styles/Accordion.module.css create mode 100644 src/compositions/Accordion/styles/AccordionContent.module.css create mode 100644 src/compositions/Accordion/styles/AccordionLabel.module.css create mode 100644 src/compositions/Accordion/styles/AccordionList.module.css create mode 100644 src/compositions/Accordion/types.ts create mode 100644 src/compositions/Banner/Banner.tsx create mode 100644 src/compositions/Banner/BannerConsumer.ts create mode 100644 src/compositions/Banner/BannerContainer.tsx create mode 100644 src/compositions/Banner/BannerContext.ts create mode 100644 src/compositions/Banner/BannerFromContext.ts create mode 100644 src/compositions/Banner/BannerProvider.tsx create mode 100644 src/compositions/Banner/Banners.tsx create mode 100644 src/compositions/Banner/bannerActions.ts create mode 100644 src/compositions/Banner/bannerReducer.ts create mode 100644 src/compositions/Banner/docs/banner.mdx create mode 100644 src/compositions/Banner/index.ts create mode 100644 src/compositions/Banner/styles/Banner.module.css create mode 100644 src/compositions/Banner/types.ts create mode 100644 src/compositions/Dropdown/Dropdown.tsx create mode 100644 src/compositions/Dropdown/DropdownContent.tsx create mode 100644 src/compositions/Dropdown/DropdownEmpty.tsx create mode 100644 src/compositions/Dropdown/DropdownWithTags.tsx create mode 100644 src/compositions/Dropdown/InlineDropdown.tsx create mode 100644 src/compositions/Dropdown/docs/dropdown.mdx create mode 100644 src/compositions/Dropdown/docs/dropdownWithTags.mdx create mode 100644 src/compositions/Dropdown/docs/helpers/MultiVariantDropdown.js create mode 100644 src/compositions/Dropdown/docs/helpers/options.js create mode 100644 src/compositions/Dropdown/docs/helpers/variants.js create mode 100644 src/compositions/Dropdown/dropdownActions.ts create mode 100644 src/compositions/Dropdown/dropdownReducer.ts create mode 100644 src/compositions/Dropdown/index.ts create mode 100644 src/compositions/Dropdown/styles/Dropdown.module.css create mode 100644 src/compositions/Dropdown/styles/DropdownEmpty.module.css create mode 100644 src/compositions/Dropdown/types.ts create mode 100644 src/compositions/Dropover/Dropover.tsx create mode 100644 src/compositions/Dropover/DropoverContent.tsx create mode 100644 src/compositions/Dropover/DropoverInputLabel.tsx create mode 100644 src/compositions/Dropover/DropoverLabel.tsx create mode 100644 src/compositions/Dropover/InlineDropover.tsx create mode 100644 src/compositions/Dropover/PortalDropover.tsx create mode 100644 src/compositions/Dropover/docs/dropover.mdx create mode 100644 src/compositions/Dropover/index.ts create mode 100644 src/compositions/Dropover/styles/Dropover.module.css create mode 100644 src/compositions/IconGroup/IconGroup.tsx create mode 100644 src/compositions/IconGroup/docs/iconGroup.mdx create mode 100644 src/compositions/IconGroup/index.ts create mode 100755 src/compositions/InteractiveList/InteractiveList.tsx create mode 100644 src/compositions/InteractiveList/InteractiveListItem.tsx create mode 100644 src/compositions/InteractiveList/docs/helpers/options.js create mode 100755 src/compositions/InteractiveList/docs/interactiveList.mdx create mode 100644 src/compositions/InteractiveList/index.ts create mode 100644 src/compositions/Modal/Modal.tsx create mode 100644 src/compositions/Modal/ModalConsumer.ts create mode 100644 src/compositions/Modal/ModalContainer.tsx create mode 100644 src/compositions/Modal/ModalContent.tsx create mode 100644 src/compositions/Modal/ModalContext.ts create mode 100644 src/compositions/Modal/ModalFooter.tsx create mode 100644 src/compositions/Modal/ModalFromContext.ts create mode 100644 src/compositions/Modal/ModalHeader.tsx create mode 100644 src/compositions/Modal/ModalProvider.tsx create mode 100644 src/compositions/Modal/Modals.tsx create mode 100755 src/compositions/Modal/docs/modal.mdx create mode 100644 src/compositions/Modal/index.ts create mode 100644 src/compositions/Modal/modalActions.ts create mode 100644 src/compositions/Modal/modalReducer.ts create mode 100644 src/compositions/Modal/styles/Modal.module.css create mode 100644 src/compositions/Modal/styles/ModalContainer.module.css create mode 100644 src/compositions/Modal/types.ts create mode 100644 src/compositions/Modal/useModalComponentIds.ts create mode 100644 src/compositions/Navigation/InnerNavigation.tsx create mode 100644 src/compositions/Navigation/Navigation.tsx create mode 100644 src/compositions/Navigation/NavigationItem.tsx create mode 100644 src/compositions/Navigation/StyledNavigation.ts create mode 100644 src/compositions/Navigation/docs/navigation.mdx create mode 100644 src/compositions/Navigation/index.ts create mode 100644 src/compositions/Navigation/styles/Navigation.module.css create mode 100644 src/compositions/Navigation/styles/mixins.css create mode 100644 src/compositions/Pagination/Pagination.tsx create mode 100644 src/compositions/Pagination/PaginationEllipsis.tsx create mode 100644 src/compositions/Pagination/PaginationJump.tsx create mode 100644 src/compositions/Pagination/PaginationPage.tsx create mode 100644 src/compositions/Pagination/docs/pagination.mdx create mode 100644 src/compositions/Pagination/index.ts create mode 100644 src/compositions/Pagination/usePagination.ts create mode 100644 src/compositions/Popover/InlinePopover.tsx create mode 100644 src/compositions/Popover/Popover.tsx create mode 100644 src/compositions/Popover/PopoverContentInline.tsx create mode 100644 src/compositions/Popover/PortalPopover.tsx create mode 100644 src/compositions/Popover/docs/helpers/config.js create mode 100644 src/compositions/Popover/docs/popover.mdx create mode 100644 src/compositions/Popover/index.ts create mode 100644 src/compositions/Popover/styles/Popover.module.css create mode 100644 src/compositions/Popover/usePopoverComponentIds.ts create mode 100644 src/compositions/Tabs/ColoredTabs.ts create mode 100644 src/compositions/Tabs/Tab.tsx create mode 100644 src/compositions/Tabs/TabList.tsx create mode 100644 src/compositions/Tabs/TabPanel.tsx create mode 100644 src/compositions/Tabs/TabPanelGroup.tsx create mode 100644 src/compositions/Tabs/Tabs.tsx create mode 100644 src/compositions/Tabs/TabsContainer.tsx create mode 100644 src/compositions/Tabs/docs/tabs.mdx create mode 100644 src/compositions/Tabs/index.ts create mode 100644 src/compositions/Tabs/styles/TabPanel.module.css create mode 100644 src/compositions/Tabs/styles/TabPanelGroup.module.css create mode 100755 src/compositions/Tabs/styles/Tabs.module.css create mode 100644 src/compositions/Tabs/styles/TabsContainer.module.css create mode 100644 src/compositions/Tabs/types.ts create mode 100644 src/compositions/Toast/Toast.tsx create mode 100644 src/compositions/Toast/ToastConsumer.ts create mode 100644 src/compositions/Toast/ToastContainer.tsx create mode 100644 src/compositions/Toast/ToastContext.ts create mode 100644 src/compositions/Toast/ToastCountdownBar.tsx create mode 100644 src/compositions/Toast/ToastFromContext.ts create mode 100644 src/compositions/Toast/ToastProvider.tsx create mode 100644 src/compositions/Toast/Toasts.tsx create mode 100644 src/compositions/Toast/docs/toast.mdx create mode 100644 src/compositions/Toast/index.ts create mode 100644 src/compositions/Toast/styles/Toast.module.css create mode 100644 src/compositions/Toast/styles/ToastContainer.module.css create mode 100644 src/compositions/Toast/styles/ToastCountdownBar.module.css create mode 100644 src/compositions/Toast/toastActions.ts create mode 100644 src/compositions/Toast/toastReducer.ts create mode 100644 src/compositions/Toast/types.ts create mode 100644 src/compositions/Toast/useToastComponentIds.ts create mode 100644 src/compositions/Tooltip/InlineTextTooltip.tsx create mode 100644 src/compositions/Tooltip/InlineTooltip.tsx create mode 100644 src/compositions/Tooltip/PortalTextTooltip.tsx create mode 100644 src/compositions/Tooltip/PortalTooltip.tsx create mode 100644 src/compositions/Tooltip/TextTooltip.tsx create mode 100644 src/compositions/Tooltip/Tooltip.tsx create mode 100644 src/compositions/Tooltip/docs/tooltip.mdx create mode 100644 src/compositions/Tooltip/index.ts create mode 100644 src/compositions/Tooltip/styles/Tooltip.module.css create mode 100644 src/compositions/index.ts create mode 100644 src/config/index.ts create mode 100644 src/config/themes/dark.ts create mode 100644 src/config/themes/index.ts create mode 100644 src/config/themes/light.ts create mode 100644 src/context/Accessibility/AccessibilityContext.ts create mode 100644 src/context/Accessibility/AccessibilityProvider.tsx create mode 100644 src/context/Accessibility/index.ts create mode 100644 src/context/Accessibility/useAccessibility.ts create mode 100644 src/context/Scale/ScaleContext.ts create mode 100644 src/context/Scale/ScaleProvider.tsx create mode 100644 src/context/Scale/index.ts create mode 100644 src/context/Theme/ThemeContext.ts create mode 100644 src/context/Theme/ThemeProvider.tsx create mode 100644 src/context/Theme/index.ts create mode 100644 src/context/Theme/withTheme.tsx create mode 100644 src/context/index.ts create mode 100644 src/docs/colors.mdx create mode 100644 src/docs/helpers/ColorLooper.js create mode 100644 src/docs/helpers/ColorSwatch.js create mode 100644 src/docs/helpers/ColorTheme.js create mode 100644 src/docs/helpers/DocsWrapper.js create mode 100644 src/docs/helpers/IconLooper.js create mode 100644 src/docs/helpers/ListProps.js create mode 100644 src/docs/helpers/Looper.js create mode 100644 src/docs/helpers/PageTitle.js create mode 100644 src/docs/helpers/StateWrapper.js create mode 100644 src/docs/helpers/ThemeWrapper.js create mode 100644 src/docs/helpers/TimeoutWrapper.js create mode 100644 src/docs/helpers/Version.js create mode 100644 src/docs/helpers/propTypes.js create mode 100644 src/docs/helpers/styles.css create mode 100644 src/docs/icons.mdx create mode 100644 src/docs/index.mdx create mode 100644 src/docs/playground.mdx create mode 100644 src/gatsby-theme-docz/components/Logo/index.js create mode 100644 src/gatsby-theme-docz/wrapper.js create mode 100644 src/hooks/index.ts create mode 100644 src/hooks/useAbsoluteCoords.ts create mode 100644 src/hooks/useAnimationLoop.ts create mode 100644 src/hooks/useClickAndEscape.ts create mode 100644 src/hooks/useComponentId.ts create mode 100644 src/hooks/useComponentVisible.ts create mode 100644 src/hooks/useDeepFocus.ts create mode 100644 src/hooks/useDimensions.ts create mode 100644 src/hooks/useElementEventListener.ts create mode 100644 src/hooks/useFocusReturn.ts create mode 100644 src/hooks/useIconSize.ts create mode 100644 src/hooks/useInitializer.ts create mode 100644 src/hooks/useInterval.ts create mode 100644 src/hooks/useMousePosition.ts create mode 100644 src/hooks/usePanelCollapser.ts create mode 100644 src/hooks/usePopoverPosition.ts create mode 100644 src/hooks/useRefEventListener.ts create mode 100644 src/hooks/useSafeTimeout.ts create mode 100644 src/hooks/useScrollIntoView.ts create mode 100644 src/hooks/useThemeId.ts create mode 100644 src/hooks/useTranslations.ts create mode 100644 src/icons/ArrowDoubleLeftIcon.tsx create mode 100644 src/icons/ArrowDoubleRightIcon.tsx create mode 100644 src/icons/ArrowDownIcon.tsx create mode 100644 src/icons/ArrowLeftIcon.tsx create mode 100644 src/icons/ArrowRightIcon.tsx create mode 100644 src/icons/ArrowUpDownIcon.tsx create mode 100644 src/icons/ArrowUpIcon.tsx create mode 100644 src/icons/EyeIcon.tsx create mode 100644 src/icons/EyeSlashIcon.tsx create mode 100644 src/icons/MinusIcon.tsx create mode 100644 src/icons/PencilSlashIcon.tsx create mode 100644 src/icons/PinIcon.tsx create mode 100644 src/icons/PlusIcon.tsx create mode 100644 src/icons/SearchIcon.tsx create mode 100644 src/icons/SpinnerIcon.tsx create mode 100644 src/icons/TimesIcon.tsx create mode 100644 src/icons/index.ts create mode 100644 src/icons/internal/BlobbrIcon.tsx create mode 100644 src/icons/internal/CheckIcon.tsx create mode 100644 src/icons/internal/GithubIcon.tsx create mode 100644 src/icons/internal/HelpIcon.tsx create mode 100644 src/icons/internal/LeftPanelIcon.tsx create mode 100644 src/icons/internal/LightOffIcon.tsx create mode 100644 src/icons/internal/LightOnIcon.tsx create mode 100644 src/icons/internal/PhorkIcon.tsx create mode 100644 src/icons/internal/RightPanelIcon.tsx create mode 100644 src/icons/internal/TagIcon.tsx create mode 100644 src/icons/internal/TopPanelIcon.tsx create mode 100644 src/icons/internal/index.ts create mode 100644 src/index.ts create mode 100755 src/postcss/mixins.js create mode 100644 src/postcss/vars/common.js create mode 100644 src/postcss/vars/common.json create mode 100755 src/postcss/vars/darkTheme.js create mode 100644 src/postcss/vars/darkTheme.json create mode 100644 src/postcss/vars/index.js create mode 100644 src/postcss/vars/lightTheme.js create mode 100644 src/postcss/vars/lightTheme.json create mode 100644 src/postcss/vars/utils/color.js create mode 100755 src/styles/common.css create mode 100644 src/styles/common/Scrollbar.module.css create mode 100644 src/styles/common/mixins/addScrollbar.css create mode 100644 src/styles/fonts.css create mode 100644 src/styles/fonts/roboto-latin-100.woff create mode 100644 src/styles/fonts/roboto-latin-100.woff2 create mode 100644 src/styles/fonts/roboto-latin-100italic.woff create mode 100644 src/styles/fonts/roboto-latin-100italic.woff2 create mode 100644 src/styles/fonts/roboto-latin-300.woff create mode 100644 src/styles/fonts/roboto-latin-300.woff2 create mode 100644 src/styles/fonts/roboto-latin-300italic.woff create mode 100644 src/styles/fonts/roboto-latin-300italic.woff2 create mode 100644 src/styles/fonts/roboto-latin-400.woff create mode 100644 src/styles/fonts/roboto-latin-400.woff2 create mode 100644 src/styles/fonts/roboto-latin-400italic.woff create mode 100644 src/styles/fonts/roboto-latin-400italic.woff2 create mode 100644 src/styles/fonts/roboto-latin-500.woff create mode 100644 src/styles/fonts/roboto-latin-500.woff2 create mode 100644 src/styles/fonts/roboto-latin-500italic.woff create mode 100644 src/styles/fonts/roboto-latin-500italic.woff2 create mode 100644 src/styles/fonts/roboto-latin-700.woff create mode 100644 src/styles/fonts/roboto-latin-700.woff2 create mode 100644 src/styles/fonts/roboto-latin-700italic.woff create mode 100644 src/styles/fonts/roboto-latin-700italic.woff2 create mode 100644 src/styles/fonts/roboto-latin-900.woff create mode 100644 src/styles/fonts/roboto-latin-900.woff2 create mode 100644 src/styles/fonts/roboto-latin-900italic.woff create mode 100644 src/styles/fonts/roboto-latin-900italic.woff2 create mode 100644 src/styles/normalize.css create mode 100644 src/types/index.ts create mode 100644 src/types/observer.ts create mode 100644 src/types/props.ts create mode 100644 src/types/svgIcon.ts create mode 100644 src/types/ui.ts create mode 100644 src/types/utils.ts create mode 100644 src/utils/boundsObservable.ts create mode 100644 src/utils/case.ts create mode 100644 src/utils/combineRefs.ts create mode 100644 src/utils/easings.ts create mode 100644 src/utils/getAbsoluteCoords.ts create mode 100644 src/utils/getFocusableElements.ts create mode 100644 src/utils/getPositionOffset.ts create mode 100644 src/utils/getTabIndex.ts create mode 100644 src/utils/index.ts create mode 100644 src/utils/isElementFocusable.ts create mode 100644 src/utils/isElementVisible.ts create mode 100644 src/utils/measureDomNode.ts create mode 100644 src/utils/renderFromProp.tsx create mode 100644 src/utils/setStyle.ts create mode 100644 tsconfig.cjs.json create mode 100644 tsconfig.esm.json create mode 100644 tsconfig.json create mode 100644 tsconfig.rollup.json create mode 100644 yarn.lock diff --git a/.babelrc b/.babelrc new file mode 100644 index 00000000..f2dc763b --- /dev/null +++ b/.babelrc @@ -0,0 +1,27 @@ +{ + "exclude": "node_modules/**", + "presets": [ + ["@babel/preset-react", { "runtime": "automatic" }], + [ + "@babel/preset-env", + { + "modules": false, + "targets": { + "browsers": ["last 2 versions"] + } + } + ] + ], + "plugins": [ + "@babel/plugin-proposal-class-properties", + "@babel/plugin-proposal-object-rest-spread", + "@babel/plugin-syntax-dynamic-import", + "@babel/plugin-transform-runtime", + "@emotion/babel-plugin" + ], + "env": { + "test": { + "plugins": ["@babel/plugin-transform-modules-commonjs"] + } + } +} diff --git a/.browserslistrc b/.browserslistrc new file mode 100644 index 00000000..c5030369 --- /dev/null +++ b/.browserslistrc @@ -0,0 +1,4 @@ +>0.2%, +not dead, +not ie <= 11, +not op_mini all diff --git a/.changelogrc.js b/.changelogrc.js new file mode 100644 index 00000000..d6c18831 --- /dev/null +++ b/.changelogrc.js @@ -0,0 +1,3 @@ +module.exports = { + displayTypes: ['feat', 'fix', 'perf', 'refactor', 'revert'], +}; diff --git a/.commitlintrc.js b/.commitlintrc.js new file mode 100644 index 00000000..5af671a1 --- /dev/null +++ b/.commitlintrc.js @@ -0,0 +1 @@ +module.exports = { extends: ['gitmoji'] }; diff --git a/.docker/prod/Dockerfile b/.docker/prod/Dockerfile new file mode 100755 index 00000000..b6bfb41e --- /dev/null +++ b/.docker/prod/Dockerfile @@ -0,0 +1,14 @@ +FROM node:latest as builder + +WORKDIR /opt/app +COPY . /opt/app/ + +RUN yarn build-docs + +# Serve + +FROM nginx:1.15-alpine +COPY --from=builder /opt/app/.docz/dist /usr/share/nginx/html +COPY --from=builder /opt/app/.docker/prod/nginx.conf /etc/nginx/conf.d/default.conf + +EXPOSE 80 diff --git a/.docker/prod/nginx.conf b/.docker/prod/nginx.conf new file mode 100644 index 00000000..c2f5bebc --- /dev/null +++ b/.docker/prod/nginx.conf @@ -0,0 +1,11 @@ +server { + listen 80; + + location / { + root /usr/share/nginx/html; + index index.html; + try_files $uri $uri/ /index.html =404; + } + + include /etc/nginx/extra-conf.d/*.conf; +} diff --git a/.dockerignore b/.dockerignore new file mode 100644 index 00000000..c2658d7d --- /dev/null +++ b/.dockerignore @@ -0,0 +1 @@ +node_modules/ diff --git a/.editorconfig b/.editorconfig new file mode 100644 index 00000000..c2e41c4d --- /dev/null +++ b/.editorconfig @@ -0,0 +1,13 @@ +# http://editorconfig.org +root = true + +[*] +indent_style = space +indent_size = 2 +end_of_line = lf +charset = utf-8 +trim_trailing_whitespace = true +insert_final_newline = true + +[*.md, *.mdx] +trim_trailing_whitespace = false diff --git a/.eslintignore b/.eslintignore new file mode 100644 index 00000000..a2783d22 --- /dev/null +++ b/.eslintignore @@ -0,0 +1,11 @@ +*.json +.docz/ +lib/ +postcss.config.js +scripts/ +src/**/*.test.js +src/styles/ +src/icons/ +webpack.*.js +jest.config.js +jest.config.ci.js \ No newline at end of file diff --git a/.eslintrc b/.eslintrc new file mode 100755 index 00000000..bd5f9427 --- /dev/null +++ b/.eslintrc @@ -0,0 +1,97 @@ +{ + "extends": ["prettier", "prettier/react", "plugin:jsx-a11y/recommended"], + "parser": "@babel/eslint-parser", + "parserOptions": { + "ecmaVersion": 2018, + "sourceType": "module", + "ecmaFeatures": { + "jsx": true + } + }, + "env": { + "browser": true, + "es6": true, + "node": true, + "jest": true + }, + "plugins": ["react", "prettier", "json", "react-hooks", "jsx-a11y", "import", "jest"], + "rules": { + "arrow-parens": 0, + "camelcase": 0, + "import/first": 0, + "import/newline-after-import": ["error", { "count": 1 }], + "import/no-named-default": 0, + "import/prefer-default-export": 0, + "import/order": [ + "error", + { + "groups": [["builtin", "external"], "internal", ["parent", "sibling", "index"]] + } + ], + "no-console": 2, + "no-param-reassign": [2, { "props": false }], + "no-shadow": 0, + "no-underscore-dangle": ["error", { "allow": ["_id"] }], + "no-unused-expressions": 0, + "react-hooks/rules-of-hooks": 2, + "react-hooks/exhaustive-deps": "warn", + "react/forbid-prop-types": 0, + "react/jsx-curly-brace-presence": 0, + "react/jsx-filename-extension": 0, + "react/jsx-props-no-spreading": 0, + "jsx-a11y/anchor-is-valid": ["error", { "components": ["Link"], "specialLink": ["onClick", "to"] }] + }, + "globals": { + "document": true, + "window": true + }, + "settings": { + "import/resolver": { + "node": { + "paths": ["src"], + "extensions": [".js", ".jsx", ".ts", ".tsx"] + } + } + }, + "overrides": [ + { + "files": ["**/*.ts", "**/*.tsx"], + "parser": "@typescript-eslint/parser", + "parserOptions": { + "ecmaVersion": 2018, + "sourceType": "module", + "ecmaFeatures": { + "jsx": true + }, + "project": ["./tsconfig.json"] + }, + "plugins": ["@typescript-eslint", "react", "prettier", "json", "react-hooks", "jsx-a11y"], + "rules": { + "arrow-parens": 0, + "camelcase": 0, + "import/first": 0, + "import/no-named-default": 0, + "import/prefer-default-export": 0, + "import/order": [ + "error", + { + "groups": [["builtin", "external"], "internal", ["parent", "sibling", "index"]] + } + ], + "no-console": 2, + "no-param-reassign": [2, { "props": false }], + "no-shadow": 0, + "no-underscore-dangle": ["error", { "allow": ["_id"] }], + "no-unused-expressions": 0, + "no-void": 0, + "react-hooks/rules-of-hooks": 2, + "react-hooks/exhaustive-deps": "warn", + "react/forbid-prop-types": 0, + "react/jsx-curly-brace-presence": 0, + "react/jsx-filename-extension": 0, + "react/jsx-props-no-spreading": 0, + "jsx-a11y/anchor-is-valid": ["error", { "components": ["Link"], "specialLink": ["onClick", "to"] }] + } + } + ] +} diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml new file mode 100644 index 00000000..b725aa11 --- /dev/null +++ b/.github/workflows/ci.yml @@ -0,0 +1,27 @@ +name: CI + +on: + push: + branches: [develop] + workflow_dispatch: + +jobs: + build: + runs-on: ubuntu-latest + + steps: + - name: Git checkout + uses: actions/checkout@v2 + - name: Setup node + uses: actions/setup-node@v2 + with: + node-version: '15' + + - name: Install dependencies + run: yarn install --frozen-lockfile + + - name: Build library + run: yarn build-lib + + - name: Run tests + run: yarn test --ci --coverage diff --git a/.github/workflows/docs.yml b/.github/workflows/docs.yml new file mode 100644 index 00000000..408909c7 --- /dev/null +++ b/.github/workflows/docs.yml @@ -0,0 +1,33 @@ +name: Docs + +on: + release: + branches: [main] + workflow_dispatch: + +jobs: + build: + runs-on: ubuntu-latest + + steps: + - name: Git checkout + uses: actions/checkout@v2 + - name: Setup node + uses: actions/setup-node@v2 + with: + node-version: '15' + + - name: Install dependencies + run: yarn install --frozen-lockfile + + - name: Build library + run: yarn build-docs + + - uses: burnett01/rsync-deployments@4.1 + with: + switches: -avz --delete + path: .docz/dist + remote_path: ./phorkit/ + remote_host: phork.org + remote_user: phorkit + remote_key: ${{ secrets.DEPLOY_KEY }} diff --git a/.github/workflows/publish.yml b/.github/workflows/publish.yml new file mode 100644 index 00000000..537366b9 --- /dev/null +++ b/.github/workflows/publish.yml @@ -0,0 +1,49 @@ +name: Publish + +on: + push: + branches: [main] + +jobs: + build: + runs-on: ubuntu-latest + + steps: + - name: Git checkout + uses: actions/checkout@v2 + - name: Setup node + uses: actions/setup-node@v2 + with: + node-version: '15' + + - name: Install dependencies + run: yarn install --frozen-lockfile + + - name: Build library + run: yarn build-lib + + - name: Run tests + run: yarn test --ci --coverage + + - uses: actions/setup-node@v2 + with: + registry-url: 'https://npm.pkg.github.com' + + - name: Publish and tag + run: | + # We need npm 7.7.0 or higher; see https://github.com/npm/cli/issues/2834 + npm install -g npm@latest + + git config user.name github-actions + git config user.email github-actions@github.com + + # Create the changelog, update the version and publish using the config from .releaserc + npx semantic-release + + env: + NODE_AUTH_TOKEN: ${{ secrets.GITHUB_TOKEN }} + GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }} + GIT_AUTHOR_NAME: phorkish + GIT_AUTHOR_EMAIL: github@phork.org + GIT_COMMITTER_NAME: phorkish + GIT_COMMITTER_EMAIL: github@phork.org diff --git a/.gitignore b/.gitignore new file mode 100644 index 00000000..635c6284 --- /dev/null +++ b/.gitignore @@ -0,0 +1,25 @@ +# dependencies +node_modules/ + +# production +/.docz +/lib + +# rollup +.rollup.cache +component-info.json +.size-snapshot.json + +# privacy +.env +.npmrc + +# logs +npm-debug.log* +yarn-debug.log* +yarn-error.log* +tsconfig.tsbuildinfo + +# development +.DS_Store +.vscode \ No newline at end of file diff --git a/.prettierignore b/.prettierignore new file mode 100644 index 00000000..c6fc06c5 --- /dev/null +++ b/.prettierignore @@ -0,0 +1,14 @@ +*.json +.docz/ +scripts/ +config/ +lib/ +src/icons/ +src/styles/fonts/** +src/components/ErrorBoundary/ErrorBoundary.tsx +src/**/docs/* +src/gatsby-theme-docz/ +*.d.ts +*.mdx +.rollup.cache +`` diff --git a/.prettierrc b/.prettierrc new file mode 100644 index 00000000..54db3496 --- /dev/null +++ b/.prettierrc @@ -0,0 +1,17 @@ +{ + "printWidth": 120, + "singleQuote": true, + "trailingComma": "all", + "arrowParens": "avoid", + "importOrder": [ + "^[./]*types(.*)$", + "^[./]*config(.*)$", + "^[./]*context(.*)$", + "^[./]*hooks(.*)$", + "^[./]*utils(.*)$", + "^[./]*icons(.*)$", + "^[./]", + "^[./]*styles(.*)$" + ], + "importOrderSeparation": false +} diff --git a/.releaserc b/.releaserc new file mode 100644 index 00000000..c0e1a864 --- /dev/null +++ b/.releaserc @@ -0,0 +1,49 @@ +{ + "branches": [ + "main" + ], + "plugins": [ + [ + "@semantic-release/commit-analyzer", + { + "config": "conventional-changelog-gitmoji-config", + "releaseRules": [ + { + "type": "build", + "release": "patch" + } + ] + } + ], + [ + "@semantic-release/release-notes-generator", + { + "config": "conventional-changelog-gitmoji-config" + } + ], + [ + "@semantic-release/changelog", + { + "changelogFile": "CHANGELOG.md", + "changelogTitle": "# Changelog" + } + ], + [ + "@semantic-release/npm", + { + "registry": "https://npm.pkg.github.com", + "pkgRoot": "./lib" + } + ], + [ + "@semantic-release/git", + { + "assets": [ + "package.json", + "CHANGELOG.md" + ], + "message": ":bookmark: chore(release): ${nextRelease.version} [skip ci]\n\n${nextRelease.notes}" + } + ] + ] +} diff --git a/.stylelintignore b/.stylelintignore new file mode 100644 index 00000000..26562919 --- /dev/null +++ b/.stylelintignore @@ -0,0 +1,6 @@ +**/*.js +**/*.ts +**/*.tsx +src/styles/fonts/** +lib/ +node_modules/* diff --git a/.stylelintrc b/.stylelintrc new file mode 100644 index 00000000..2aaa4f17 --- /dev/null +++ b/.stylelintrc @@ -0,0 +1,19 @@ +{ + "extends": [ + "stylelint-config-recommended", + "stylelint-config-prettier" + ], + "rules": { + "no-descending-specificity": null, + "at-rule-no-unknown": [ + true, + { + "ignoreAtRules": [ + "mixin", + "import", + "define-mixin" + ] + } + ] + } +} \ No newline at end of file diff --git a/.svgo.yml b/.svgo.yml new file mode 100644 index 00000000..d992223f --- /dev/null +++ b/.svgo.yml @@ -0,0 +1,51 @@ +plugins: + - removeDoctype + - removeXMLProcInst + - removeComments + - removeMetadata + - removeXMLNS + - removeEditorsNSData + - cleanupAttrs + - inlineStyles + - minifyStyles + - convertStyleToAttrs + - cleanupIDs + - prefixIds: + prefixClassNames: false + - removeRasterImages + - removeUselessDefs + - cleanupNumericValues: false + - cleanupListOfValues + - convertColors + - removeUnknownsAndDefaults + - removeNonInheritableGroupAttrs + - removeUselessStrokeAndFill + - removeViewBox: false + - cleanupEnableBackground + - removeHiddenElems + - removeEmptyText + - convertShapeToPath + - convertEllipseToCircle + - moveElemsAttrsToGroup + - moveGroupAttrsToElems + - collapseGroups + - convertPathData + - convertTransform + - removeEmptyAttrs + - removeEmptyContainers + - mergePaths + - removeUnusedNS + - sortAttrs + - sortDefsChildren + - removeTitle: false + - removeDesc + - removeDimensions + - removeAttrs + - removeAttributesBySelector + - removeElementsByAttr + - addClassesToSVGElement + - removeStyleElement + - removeScriptElement + - addAttributesToSVGElement + - removeOffCanvasPaths + - reusePaths diff --git a/CHANGELOG.md b/CHANGELOG.md new file mode 100644 index 00000000..0cb279a8 --- /dev/null +++ b/CHANGELOG.md @@ -0,0 +1,8 @@ +# Changelog + +# 1.0.0 (2021-03-28) + + +### ✨ Features + +* initial public commit ([4a3f6fa](https://github.com/phork/phorkit/commit/4a3f6fa)) diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md new file mode 100644 index 00000000..cdaac84b --- /dev/null +++ b/CONTRIBUTING.md @@ -0,0 +1,134 @@ +# Contributing to phork/it + +## Requirements + +- Node.js >= 15 +- yarn +- npx + +## Getting started + +To start a development server go to the project root and run: + +```bash +$ yarn install +$ yarn start +``` + +Open [http://localhost:4000](http://localhost:4000) in your browser. The page will reload when the app has been edited. + +#### Building the library + +To build the component library run: + +```bash +$ yarn build-lib +``` + +To build a development bundle run: + +```bash +$ yarn build-lib-debug +``` + +#### Building the documention + +To build the docs run: + +```bash +$ yarn build-docs +``` + +To build and preview the docs with Docker run: + +```bash +$ docker build -f .docker/prod/Dockerfile . -t phork/phorkit +$ docker run -p 3000:80 phork/phorkit +``` + +Open [http://localhost:3000](http://localhost:3000) in your browser. + +## Development + +The phork/it library is broken down into several categories. + +### Components + +Components are nearly completely self-contained. They should define all their styles as CSS modules and should not rely on global styles. A component is allowed to use global `context`, `hooks`, `utils` and `icons`. + +> When a component (or anything) from this library includes something else from this library the import must use a relative path. This will allow rollup to treat the import as an external dependency and not include it in the bundle. + +If a component has been wrapped with a higher order component (for example `withTheme`) then the original, unwrapped component should be exported as `ComponentName` and the wrapped component should be exported as `[Enhanced]ComponentName`. For example `ColoredBadge`. + +If a component can have style props passed to it and applied via Emotion then that component should be named `StyledComponentName`. For example `StyledBadge`. + +### Compositions + +Compositions are like components in every way except they can also include one or more components. The most commonly included components are `Rhythm`, `Flex` and `Button`. These imports must be included with their relative path. + +### Context + +Context includes providers and consumers of top-level application context (eg. the `themeId`). Any component-level context should be contained within the component's scope (see `Toasts`). + +### Icons + +Icon components are generated automatically from the svg files in `public/icons`. Icons used for the documentation are in `public/icons/internal`. + +### Hooks and Utils + +These are common hooks and utilities that are shared by components and compositions. + +### Config + +The config files are bundled together into `config.json` at the project root, as well as in the the `config` folder of each package. Most configuration is actually done in the `postcss` files. + +### Styles + +The normalize styles, common styles and fonts have been bundled into `styles`. Additionally there's a `modules` folder containing some common CSS classes that will be exported as modules. + +### PostCSS + +All color, sizing and spacing definitions comes from the `postcss` files. Only the `*.js` files should be edited. _Do not edit the `_.json` files.\* They will be overwritten during the build cycle. + +## Theming + +Any component that deals with color should have a light and dark theme. Most colors are applied by CSS custom properties. The component should include the `useThemeId` hook, or (for styled components) be named and exported as `ComponentName` along side a component wrapped with the `withTheme` HOC named `ColoredComponentName`. + +Many components also have an optional `contrast` property. These components use one of the primary colors as the background color and the contrast color in varying shades as the foreground colors. The default primary color is the theme's primary accent color but can be overridden with the CSS custom property `--contrast-color`. This value cascades to all children components so use it wisely. + +### Commits + +All commits abide by the rules of the [conventional changelog](https://github.com/conventional-changelog/commitlint) and must be in the following format: + +```bash +$ git commit -m ':gitmoji: type: short commit message starting with lowercase' +``` + +For a breaking change add an exclamation point after the type. + +```bash +$ git commit -m ':gitmoji: type!: short commit message starting with lowercase' +``` + +Using a pre-defined [Gitmoji](https://gitmoji.dev/) and then one of these following types. + +- **build**: Changes that affect the build system or external dependencies +- **ci**: Changes to the CI configuration files and scripts +- **docs**: Documentation only changes +- **feat**: A new feature +- **fix**: A bug fix +- **perf**: A code change that improves performance +- **refactor**: A code change that neither fixes a bug nor adds a feature +- **revert**: Revert a previous commit +- **style**: Changes that do not affect the meaning of the code (white-space, formatting, missing semi-colons, etc) +- **test**: Adding missing tests or correcting existing tests + +For example + +```bash +$ git commit -m ':bug: fix: broken button width' +``` + +### Publishing + +Publishing is automated by Github actions. Any pushes to the `main` branch will be automatically versioned and published by [semantic-release](https://semantic-release.gitbook.io/semantic-release/). diff --git a/LICENSE b/LICENSE new file mode 100644 index 00000000..f8e1472b --- /dev/null +++ b/LICENSE @@ -0,0 +1,21 @@ +MIT License + +Copyright (c) 2021 Phork Works + +Permission is hereby granted, free of charge, to any person obtaining a copy +of this software and associated documentation files (the "Software"), to deal +in the Software without restriction, including without limitation the rights +to use, copy, modify, merge, publish, distribute, sublicense, and/or sell +copies of the Software, and to permit persons to whom the Software is +furnished to do so, subject to the following conditions: + +The above copyright notice and this permission notice shall be included in all +copies or substantial portions of the Software. + +THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR +IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, +FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE +AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER +LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, +OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE +SOFTWARE. \ No newline at end of file diff --git a/README.md b/README.md new file mode 100644 index 00000000..a8c7e5b5 --- /dev/null +++ b/README.md @@ -0,0 +1,27 @@ +# Phork/it + +[![Tests](https://github.com/phork/phorkit/actions/workflows/ci.yml/badge.svg)](https://github.com/phork/phorkit/actions/workflows/ci.yml) [![Publish](https://github.com/phork/phorkit/actions/workflows/publish.yml/badge.svg)](https://github.com/phork/phorkit/actions/workflows/publish.yml) + +To see examples and documentation go to [https://phorkit.phork.org/](https://phorkit.phork.org/). + +## Getting started + +Include the common styles and fonts in `index.js`. + +``` +import '@phork/phorkit/lib/styles/normalize.css'; +import '@phork/phorkit/lib/styles/fonts.css'; +import '@phork/phorkit/lib/styles/common.css'; +``` + +Include the basic providers in `App.js`. + +``` + + + hello world + + +``` + +[Contribution guidelines for this project](CONTRIBUTING.md) diff --git a/__mocks__/file.mock.js b/__mocks__/file.mock.js new file mode 100644 index 00000000..86059f36 --- /dev/null +++ b/__mocks__/file.mock.js @@ -0,0 +1 @@ +module.exports = 'test-file-stub'; diff --git a/__mocks__/style.mock.js b/__mocks__/style.mock.js new file mode 100644 index 00000000..f053ebf7 --- /dev/null +++ b/__mocks__/style.mock.js @@ -0,0 +1 @@ +module.exports = {}; diff --git a/__tests__/.eslintrc.json b/__tests__/.eslintrc.json new file mode 100644 index 00000000..6cfb9546 --- /dev/null +++ b/__tests__/.eslintrc.json @@ -0,0 +1,5 @@ +{ + "parserOptions": { + "project": "./__tests__/tsconfig.json" + } +} diff --git a/__tests__/components/Avatar/Avatar.test.tsx b/__tests__/components/Avatar/Avatar.test.tsx new file mode 100644 index 00000000..222070df --- /dev/null +++ b/__tests__/components/Avatar/Avatar.test.tsx @@ -0,0 +1,20 @@ +import { render } from '@testing-library/react'; +import { Avatar } from 'lib'; +import * as React from 'react'; + +describe('', () => { + it('should render a basic avatar', () => { + const { container } = render(); + expect(container.firstChild?.nodeName).toBe('DIV'); + }); + + it('should render an avatar as a button', () => { + const { container } = render(); + expect(container.firstChild?.nodeName).toBe('BUTTON'); + }); + + it('should render an avatar as a link', () => { + const { container } = render( as="a" href="#avatar" initials="EC" />); + expect(container.firstChild?.nodeName).toBe('A'); + }); +}); diff --git a/__tests__/components/Badge/Badge.test.tsx b/__tests__/components/Badge/Badge.test.tsx new file mode 100644 index 00000000..370227c1 --- /dev/null +++ b/__tests__/components/Badge/Badge.test.tsx @@ -0,0 +1,15 @@ +import { render } from '@testing-library/react'; +import { Badge } from 'lib'; +import * as React from 'react'; + +describe('', () => { + it('should render a basic badge', () => { + const { container } = render(); + expect(container.firstChild?.nodeName).toBe('DIV'); + }); + + it('should render a basic badge with children', () => { + const { getByText } = render(213); + expect(getByText('213')).toBeTruthy(); + }); +}); diff --git a/__tests__/components/Button/Button.test.tsx b/__tests__/components/Button/Button.test.tsx new file mode 100644 index 00000000..8067f441 --- /dev/null +++ b/__tests__/components/Button/Button.test.tsx @@ -0,0 +1,35 @@ +import '@testing-library/jest-dom/extend-expect'; +import { fireEvent, render } from '@testing-library/react'; +import { Button } from 'lib'; +import * as React from 'react'; + +describe('); + expect(container.firstChild?.nodeName).toBe('BUTTON'); + expect(getByText('Click me!')).toBeTruthy(); + }); + + it('should render a button as an anchor', () => { + const { container, getByText } = render( + as="a" href="#button"> + Click me! + , + ); + expect(container.firstChild?.nodeName).toBe('A'); + expect(container.firstChild).toHaveAttribute('href', '#button'); + expect(getByText('Click me!')).toBeTruthy(); + }); + + it('should be clickable', () => { + const onClick = jest.fn(); + const { getByRole } = render(); + + expect(onClick).not.toHaveBeenCalled(); + + const button = getByRole('button'); + fireEvent.click(button); + + expect(onClick).toHaveBeenCalledTimes(1); + }); +}); diff --git a/__tests__/components/Button/ButtonGroup.test.tsx b/__tests__/components/Button/ButtonGroup.test.tsx new file mode 100644 index 00000000..84677253 --- /dev/null +++ b/__tests__/components/Button/ButtonGroup.test.tsx @@ -0,0 +1,59 @@ +import '@testing-library/jest-dom/extend-expect'; +import { fireEvent, render } from '@testing-library/react'; +import { ButtonGroup } from 'lib'; +import * as React from 'react'; + +describe('', () => { + it('should render a basic button group', () => { + const { container, getByText } = render( + {}} + overlap + spacing="joined" + />, + ); + expect(container.querySelectorAll('button').length).toBe(4); + expect(getByText('First')).toBeTruthy(); + expect(getByText('Second')).toBeTruthy(); + expect(getByText('Third')).toBeTruthy(); + expect(getByText('Fourth')).toBeTruthy(); + }); + + it('should be clickable', () => { + const onClick = jest.fn(); + const { getAllByRole } = render( + , + ); + + expect(onClick).not.toHaveBeenCalled(); + + const buttons = getAllByRole('button'); + fireEvent.click(buttons[0]); + + expect(onClick).toHaveBeenCalledTimes(1); + expect(onClick.mock.calls[onClick.mock.calls.length - 1][1]).toBe('first'); + + fireEvent.click(buttons[1]); + + expect(onClick).toHaveBeenCalledTimes(2); + expect(onClick.mock.calls[onClick.mock.calls.length - 1][1]).toBe('second'); + }); +}); diff --git a/__tests__/components/Button/IconButton.test.tsx b/__tests__/components/Button/IconButton.test.tsx new file mode 100644 index 00000000..aa9b83b4 --- /dev/null +++ b/__tests__/components/Button/IconButton.test.tsx @@ -0,0 +1,43 @@ +import '@testing-library/jest-dom/extend-expect'; +import { fireEvent, render } from '@testing-library/react'; +import { IconButton, TimesIcon } from 'lib'; +import * as React from 'react'; + +describe('', () => { + it('should render a basic icon button', () => { + const { container } = render( + + + , + ); + expect(container.firstChild?.nodeName).toBe('BUTTON'); + expect(container.querySelector('svg')).toBeTruthy(); + }); + + it('should render an icon button as an anchor', () => { + const { container } = render( + as="a" href="#iconbutton"> + + , + ); + expect(container.firstChild?.nodeName).toBe('A'); + expect(container.firstChild).toHaveAttribute('href', '#iconbutton'); + expect(container.querySelector('svg')).toBeTruthy(); + }); + + it('should be clickable', () => { + const onClick = jest.fn(); + const { getByRole } = render( + + + , + ); + + expect(onClick).not.toHaveBeenCalled(); + + const button = getByRole('button'); + fireEvent.click(button); + + expect(onClick).toHaveBeenCalledTimes(1); + }); +}); diff --git a/__tests__/components/Card/Card.test.tsx b/__tests__/components/Card/Card.test.tsx new file mode 100644 index 00000000..fb4f69a9 --- /dev/null +++ b/__tests__/components/Card/Card.test.tsx @@ -0,0 +1,10 @@ +import { render } from '@testing-library/react'; +import { Card } from 'lib'; +import * as React from 'react'; + +describe('', () => { + it('should render a basic card', () => { + const { getByText } = render(Hello world); + expect(getByText('Hello world')).toBeTruthy(); + }); +}); diff --git a/__tests__/components/Card/CardBody.test.tsx b/__tests__/components/Card/CardBody.test.tsx new file mode 100644 index 00000000..e6b099c8 --- /dev/null +++ b/__tests__/components/Card/CardBody.test.tsx @@ -0,0 +1,10 @@ +import { render } from '@testing-library/react'; +import { CardBody } from 'lib'; +import * as React from 'react'; + +describe('', () => { + it('should render a basic card body', () => { + const { getByText } = render(Hello world); + expect(getByText('Hello world')).toBeTruthy(); + }); +}); diff --git a/__tests__/components/Card/CardEdge.test.tsx b/__tests__/components/Card/CardEdge.test.tsx new file mode 100644 index 00000000..63f3a2a7 --- /dev/null +++ b/__tests__/components/Card/CardEdge.test.tsx @@ -0,0 +1,10 @@ +import { render } from '@testing-library/react'; +import { CardEdge } from 'lib'; +import * as React from 'react'; + +describe('', () => { + it('should render a basic card edge', () => { + const { getByText } = render(Hello world); + expect(getByText('Hello world')).toBeTruthy(); + }); +}); diff --git a/__tests__/components/Card/CardTitle.test.tsx b/__tests__/components/Card/CardTitle.test.tsx new file mode 100644 index 00000000..d4f31c2f --- /dev/null +++ b/__tests__/components/Card/CardTitle.test.tsx @@ -0,0 +1,10 @@ +import { render } from '@testing-library/react'; +import { CardTitle } from 'lib'; +import * as React from 'react'; + +describe('', () => { + it('should render a basic card title', () => { + const { getByText } = render(Hello world); + expect(getByText('Hello world')).toBeTruthy(); + }); +}); diff --git a/__tests__/components/Divider/Divider.test.tsx b/__tests__/components/Divider/Divider.test.tsx new file mode 100644 index 00000000..cd1aefec --- /dev/null +++ b/__tests__/components/Divider/Divider.test.tsx @@ -0,0 +1,10 @@ +import { render } from '@testing-library/react'; +import { Divider } from 'lib'; +import * as React from 'react'; + +describe('', () => { + it('should render a basic avatar', () => { + const { container } = render(); + expect(container.firstChild?.nodeName).toBe('DIV'); + }); +}); diff --git a/__tests__/components/Flex/Flex.test.tsx b/__tests__/components/Flex/Flex.test.tsx new file mode 100644 index 00000000..2e09ba5e --- /dev/null +++ b/__tests__/components/Flex/Flex.test.tsx @@ -0,0 +1,10 @@ +import { render } from '@testing-library/react'; +import { Flex } from 'lib'; +import * as React from 'react'; + +describe('', () => { + it('should render a basic flex container', () => { + const { getByText } = render(Hello world); + expect(getByText('Hello world')).toBeTruthy(); + }); +}); diff --git a/__tests__/components/Footer/Footer.test.tsx b/__tests__/components/Footer/Footer.test.tsx new file mode 100644 index 00000000..64d830e0 --- /dev/null +++ b/__tests__/components/Footer/Footer.test.tsx @@ -0,0 +1,10 @@ +import { render } from '@testing-library/react'; +import { Footer } from 'lib'; +import * as React from 'react'; + +describe('