From 96275bd08a285f7844b56c10e53e9072425ac4cd Mon Sep 17 00:00:00 2001 From: Adarsh Pastakia Date: Sat, 24 Aug 2024 15:50:44 +0400 Subject: [PATCH] chore: update packages --- .codeclimate.json | 6 + .github/workflows/{master.yml => build.yml} | 13 +- .storybook/addon-theme/register.tsx | 367 +- .storybook/manager-head.html | 17 + .storybook/manager.ts | 9 +- .storybook/preview.tsx | 92 +- .storybook/styles/_overrides.css | 14 +- .storybook/styles/_prism.css | 2 +- README.md | 75 +- assets/browser/chrome.png | Bin 0 -> 24703 bytes assets/browser/edge.png | Bin 0 -> 13949 bytes assets/browser/firefox.png | Bin 0 -> 21575 bytes assets/browser/safari.png | Bin 0 -> 39570 bytes assets/gitposter.png | Bin 0 -> 46888 bytes assets/{ => samples}/small_video.mp4 | Bin git-conventional-commits.json | 3 + jest.config.json | 5 +- jest/TestWrapper.tsx | 7 +- jest/setup.ts | 1 + package.json | 7 +- packages/chart/LICENSE | 21 + packages/chart/README.md | 10 + packages/chart/package.json | 59 + packages/chart/src/charts/ActivityMap.tsx | 295 ++ packages/chart/src/charts/CountSeries.tsx | 186 + packages/chart/src/charts/DataSeries.tsx | 228 ++ packages/chart/src/charts/Generic.tsx | 190 + packages/chart/src/charts/MapSeries.tsx | 217 ++ packages/chart/src/charts/TimeSeries.tsx | 236 ++ packages/chart/src/charts/TimeSlider.tsx | 235 ++ packages/chart/src/charts/WordBubble.tsx | 105 + packages/chart/src/index.ts | 32 + packages/chart/src/theme/darkBase.ts | 400 +++ packages/chart/src/theme/index.ts | 122 + packages/chart/src/theme/lightBase.ts | 397 +++ packages/chart/src/theme/palettes.ts | 589 ++++ packages/chart/src/types/charts.ts | 32 + packages/chart/src/types/index.ts | 61 + packages/chart/src/types/utils.ts | 151 + packages/chart/src/types/world.svg.ts | 467 +++ packages/chart/src/wrapper/Chart.module.css | 90 + packages/chart/src/wrapper/ChartContainer.tsx | 217 ++ packages/chart/src/wrapper/ChartToolbar.tsx | 40 + packages/chart/src/wrapper/ChartWrapper.tsx | 46 + packages/chart/src/wrapper/PaletteSelect.tsx | 139 + packages/chart/stories/ActivityMap.mdx | 73 + .../chart/stories/ActivityMap.stories.tsx | 81 + packages/chart/stories/CountSeries.mdx | 54 + .../chart/stories/CountSeries.stories.tsx | 76 + packages/chart/stories/DataSeries.mdx | 54 + packages/chart/stories/DataSeries.stories.tsx | 99 + packages/chart/stories/GenericChart.mdx | 55 + .../chart/stories/GenericChart.stories.tsx | 167 + packages/chart/stories/MapSeries.mdx | 54 + packages/chart/stories/MapSeries.stories.tsx | 76 + packages/chart/stories/TimeSeries.mdx | 54 + packages/chart/stories/TimeSeries.stories.tsx | 103 + packages/chart/stories/TimeSlider.mdx | 54 + packages/chart/stories/TimeSlider.stories.tsx | 81 + packages/chart/stories/WordBubble.mdx | 54 + packages/chart/stories/WordBubble.stories.tsx | 77 + packages/chart/stories/coffee.ts | 797 +++++ packages/chart/stories/sankey.ts | 174 + packages/chart/tsconfig.build.json | 12 + packages/chart/tsconfig.json | 5 + packages/core/LICENSE | 21 + packages/core/README.md | 10 + packages/core/css/flags.rect.css | 1607 +++++++++ packages/core/css/flags.wavy.css | 1606 +++++++++ packages/core/css/index.js | 246 ++ packages/core/css/reset/_gradients.css | 51 + packages/core/css/reset/_reset.css | 398 +++ packages/core/css/reset/_text.css | 183 + packages/core/css/reset/_theme.css | 110 + packages/core/css/reset/index.css | 27 + packages/core/css/styles.css | 31 + packages/core/css/tailwind/colors.ts | 158 + packages/core/package.json | 60 + .../actionLabel/ActionLabel.module.css | 38 + .../components/actionLabel/ActionLabel.tsx | 94 + .../animations/Animations.module.css | 253 ++ .../src/components/animations/Animations.tsx | 192 ++ .../src/components/avatar/Avatar.module.css | 90 + .../core/src/components/avatar/Avatar.tsx | 217 ++ .../src/components/avatar/AvatarGroup.tsx | 140 + .../src/components/badge/Badge.module.css | 163 + packages/core/src/components/badge/Badge.tsx | 137 + .../breadcrumbs/Breadcrumbs.module.css | 189 + .../components/breadcrumbs/Breadcrumbs.tsx | 109 + .../src/components/button/Button.module.css | 345 ++ .../core/src/components/button/Button.tsx | 308 ++ .../src/components/button/ButtonGroup.tsx | 112 + .../src/components/button/ConfirmButton.tsx | 202 ++ .../components/button/ToggleButtonGroup.tsx | 161 + .../core/src/components/callout/Callout.tsx | 109 + .../core/src/components/card/Card.module.css | 152 + packages/core/src/components/card/Card.tsx | 154 + .../core/src/components/card/CardCover.tsx | 87 + .../core/src/components/chip/Chip.module.css | 116 + packages/core/src/components/chip/Chip.tsx | 195 ++ .../collapsable/Collapsable.module.css | 30 + .../components/collapsable/Collapsable.tsx | 153 + .../core/src/components/divider/Divider.tsx | 104 + .../components/dropdown/Dropdown.module.css | 39 + .../core/src/components/dropdown/Dropdown.tsx | 216 ++ .../src/components/empty/EmptyContent.tsx | 141 + .../core/src/components/icon/Icon.module.css | 71 + packages/core/src/components/icon/Icon.tsx | 188 + packages/core/src/components/index.ts | 59 + .../src/components/media/Media.module.css | 112 + packages/core/src/components/media/Media.tsx | 224 ++ .../core/src/components/menu/ContextMenu.tsx | 116 + .../core/src/components/menu/Menu.module.css | 104 + packages/core/src/components/menu/Menu.tsx | 243 ++ .../core/src/components/menu/MenuItem.tsx | 160 + packages/core/src/components/menu/types.ts | 100 + .../src/components/meter/Meter.module.css | 116 + packages/core/src/components/meter/Meter.tsx | 80 + .../src/components/navigator/Navigator.tsx | 77 + .../src/components/panel/Panel.module.css | 86 + packages/core/src/components/panel/Panel.tsx | 244 ++ .../core/src/components/panel/PanelGroup.tsx | 99 + .../components/progress/Progress.module.css | 70 + .../src/components/progress/ProgressBar.tsx | 113 + .../components/progress/ProgressCircle.tsx | 118 + packages/core/src/components/tabpanel/Tab.tsx | 151 + .../components/tabpanel/TabPanel.module.css | 179 + .../core/src/components/tabpanel/TabPanel.tsx | 153 + packages/core/src/context/Global.tsx | 241 ++ .../core/src/context/NotificationCenter.tsx | 223 ++ packages/core/src/core/aside/Aside.module.css | 230 ++ packages/core/src/core/aside/Aside.tsx | 262 ++ .../core/boundary/ErrorBoundary.module.css | 65 + .../core/src/core/boundary/ErrorBoundary.tsx | 146 + packages/core/src/core/boundary/ErrorIcon.tsx | 50 + .../core/src/core/content/Content.module.css | 40 + packages/core/src/core/content/Content.tsx | 91 + .../src/core/headfoot/HeadFoot.module.css | 38 + packages/core/src/core/headfoot/HeadFoot.tsx | 111 + packages/core/src/core/index.ts | 32 + packages/core/src/core/page/Page.module.css | 46 + packages/core/src/core/page/Page.tsx | 100 + .../src/core/responsive/Responsive.module.css | 85 + .../core/src/core/responsive/Responsive.tsx | 172 + .../core/src/core/section/Section.module.css | 28 + packages/core/src/core/section/Section.tsx | 44 + packages/core/src/core/theme/Theme.module.css | 30 + .../core/src/core/theme/ThemeProvider.tsx | 108 + .../src/core/viewport/Viewport.module.css | 32 + packages/core/src/core/viewport/Viewport.tsx | 43 + packages/core/src/hooks/useClientService.tsx | 29 + .../core/src/hooks/useControlledValue.tsx | 43 + packages/core/src/hooks/useDebounce.ts | 60 + packages/core/src/hooks/useEffectDebugger.ts | 152 + packages/core/src/hooks/useIsDark.ts | 50 + packages/core/src/hooks/useIsRtl.ts | 46 + packages/core/src/hooks/useNavigator.tsx | 54 + packages/core/src/hooks/useOverlayService.tsx | 51 + packages/core/src/hooks/usePropToggle.ts | 61 + packages/core/src/hooks/useResize.ts | 90 + packages/core/src/hooks/useResizeObserver.ts | 55 + packages/core/src/hooks/useStorage.ts | 80 + packages/core/src/hotkeys/HotKey.tsx | 39 + packages/core/src/hotkeys/HotKeyLabel.tsx | 61 + packages/core/src/hotkeys/HotKeyWrapper.tsx | 137 + packages/core/src/hotkeys/commons.ts | 74 + packages/core/src/i18n/ar.json | 21 + packages/core/src/i18n/en.json | 34 + packages/core/src/i18n/index.ts | 50 + packages/core/src/index.ts | 49 + .../core/src/overlays/alert/Alert.module.css | 44 + packages/core/src/overlays/alert/Alert.tsx | 229 ++ .../src/overlays/flyout/Flyout.module.css | 52 + packages/core/src/overlays/flyout/Flyout.tsx | 263 ++ packages/core/src/overlays/index.ts | 29 + .../src/overlays/message/Message.module.css | 37 + .../core/src/overlays/message/Message.tsx | 107 + .../core/src/overlays/modal/Modal.module.css | 53 + packages/core/src/overlays/modal/Modal.tsx | 244 ++ .../core/src/overlays/toast/Toast.module.css | 37 + packages/core/src/overlays/toast/Toast.tsx | 216 ++ .../src/overlays/tooltip/Tooltip.module.css | 53 + .../core/src/overlays/tooltip/Tooltip.tsx | 198 ++ packages/core/src/types/global.d.ts | 63 + packages/core/src/types/icons.ts | 310 ++ packages/core/src/types/index.ts | 240 ++ packages/core/src/typography/Abbr.tsx | 152 + packages/core/src/typography/Copy.tsx | 60 + packages/core/src/typography/Link.tsx | 110 + packages/core/src/typography/Mark.tsx | 122 + packages/core/src/typography/Text.tsx | 194 ++ packages/core/src/typography/Title.tsx | 126 + .../core/src/typography/Typography.module.css | 68 + packages/core/src/typography/index.ts | 29 + packages/core/src/typography/types.ts | 38 + .../core/src/utils/calculateDimensions.ts | 72 + packages/core/src/utils/getColor.ts | 49 + packages/core/src/utils/index.ts | 28 + packages/core/src/utils/nodeCheck.ts | 34 + .../core/stories/0.core/Aside.stories.tsx | 71 + .../core/stories/0.core/Content.stories.tsx | 78 + packages/core/stories/0.core/Core.mdx | 129 + .../stories/0.core/ErrorBoundary.stories.tsx | 78 + packages/core/stories/0.core/Page.stories.tsx | 67 + .../stories/0.core/Responsive.stories.tsx | 113 + .../core/stories/0.core/Section.stories.tsx | 92 + .../core/stories/0.core/Theme.stories.tsx | 466 +++ .../core/stories/0.core/Viewport.stories.tsx | 65 + .../stories/1.typography/Abbr.stories.tsx | 62 + .../stories/1.typography/Copy.stories.tsx | 61 + .../stories/1.typography/Link.stories.tsx | 42 + .../stories/1.typography/Mark.stories.tsx | 62 + .../stories/1.typography/Text.stories.tsx | 64 + .../stories/1.typography/Title.stories.tsx | 74 + .../core/stories/1.typography/Typography.mdx | 124 + .../components/actionLabel/ActionLabel.mdx | 61 + .../actionLabel/ActionLabel.stories.tsx | 150 + .../components/animations/Animations.mdx | 88 + .../animations/Animations.stories.tsx | 79 + .../components/animations/Bars.stories.tsx | 54 + .../animations/Skeleton.stories.tsx | 58 + .../components/animations/Spinner.stories.tsx | 54 + .../core/stories/components/avatar/Avatar.mdx | 75 + .../components/avatar/Avatar.stories.tsx | 74 + .../components/avatar/AvatarGroup.stories.tsx | 88 + .../core/stories/components/badge/Badge.mdx | 80 + .../components/badge/Badge.stories.tsx | 114 + .../components/breadcrumbs/Breadcrumbs.mdx | 75 + .../breadcrumbs/Breadcrumbs.stories.tsx | 117 + .../core/stories/components/button/Button.mdx | 129 + .../components/button/Button.stories.tsx | 210 ++ .../stories/components/button/ButtonGroup.mdx | 102 + .../components/button/ButtonGroup.stories.tsx | 105 + .../components/button/ConfirmButton.mdx | 81 + .../button/ConfirmButton.stories.tsx | 76 + .../components/button/Navigator.stories.tsx | 59 + .../components/button/ToggleButtonGroup.mdx | 91 + .../button/ToggleButtonGroup.stories.tsx | 131 + .../stories/components/callout/Callout.mdx | 80 + .../components/callout/Callout.stories.tsx | 150 + .../core/stories/components/card/Card.mdx | 97 + .../stories/components/card/Card.stories.tsx | 309 ++ .../core/stories/components/chip/Chip.mdx | 108 + .../stories/components/chip/Chip.stories.tsx | 148 + .../components/collapable/Collapsable.mdx | 71 + .../collapable/Collapsable.stories.tsx | 95 + .../stories/components/dropdown/Dropdown.mdx | 86 + .../components/dropdown/Dropdown.stories.tsx | 137 + .../core/stories/components/empty/Empty.mdx | 80 + .../components/empty/Empty.stories.tsx | 99 + .../core/stories/components/icon/Icon.mdx | 76 + .../stories/components/icon/Icon.stories.tsx | 111 + .../core/stories/components/menu/Menu.mdx | 80 + .../stories/components/menu/Menu.stories.tsx | 154 + .../core/stories/components/meter/Meter.mdx | 76 + .../components/meter/Meter.stories.tsx | 89 + .../notifications/Alert.stories.tsx | 89 + .../notifications/Message.stories.tsx | 95 + .../notifications/Notifications.mdx | 93 + .../notifications/Toast.stories.tsx | 107 + .../components/overlays/Flyout.stories.tsx | 80 + .../components/overlays/Modal.stories.tsx | 84 + .../stories/components/overlays/Overlays.mdx | 81 + .../core/stories/components/panel/Panel.mdx | 92 + .../components/panel/Panel.stories.tsx | 94 + .../components/panel/PanelGroup.stories.tsx | 145 + .../components/progress/Circle.stories.tsx | 66 + .../stories/components/progress/Progress.mdx | 81 + .../components/progress/Progress.stories.tsx | 94 + .../stories/components/tabPanel/TabPanel.mdx | 69 + .../components/tabPanel/TabPanel.stories.tsx | 73 + .../stories/components/tooltip/Tooltip.mdx | 80 + .../components/tooltip/Tooltip.stories.tsx | 130 + packages/core/tests/buttons/Button.test.tsx | 206 ++ .../core/tests/buttons/ButtonGroup.test.tsx | 81 + .../__snapshots__/Button.test.tsx.snap | 15 + .../__snapshots__/ButtonGroup.test.tsx.snap | 7 + packages/core/tsconfig.build.json | 12 + packages/core/tsconfig.json | 5 + packages/data/LICENSE | 21 + packages/data/README.md | 10 + packages/data/package.json | 58 + .../data/src/histogram/Histogram.module.css | 53 + packages/data/src/histogram/Histogram.tsx | 152 + packages/data/src/hooks/useFilteredList.tsx | 78 + packages/data/src/i18n/ar.json | 36 + packages/data/src/i18n/en.json | 36 + packages/data/src/i18n/index.ts | 28 + packages/data/src/index.ts | 31 + packages/data/src/json/JsonViewer.tsx | 346 ++ packages/data/src/virtual/Gallery.tsx | 314 ++ packages/data/src/virtual/List.tsx | 328 ++ packages/data/src/virtual/Scroller.tsx | 81 + .../data/stories/VirtualGallery.stories.tsx | 140 + packages/data/stories/VirtualList.stories.tsx | 163 + .../stories/histogram/Histogram.stories.tsx | 57 + .../data/stories/json/JsonViewer.stories.tsx | 91 + .../stories/useFilteredList/FilteredList.mdx | 80 + .../useFilteredList/FilteredList.stories.tsx | 99 + packages/data/tsconfig.build.json | 12 + packages/data/tsconfig.json | 5 + packages/form/LICENSE | 21 + packages/form/README.md | 10 + packages/form/package.json | 62 + packages/form/src/form/Controller.tsx | 107 + packages/form/src/form/Form.tsx | 161 + packages/form/src/i18n/ar.json | 23 + packages/form/src/i18n/en.json | 23 + packages/form/src/i18n/index.ts | 28 + packages/form/src/index.ts | 49 + packages/form/src/input/ArrayInput.module.css | 40 + packages/form/src/input/ArrayInput.tsx | 230 ++ packages/form/src/input/Checkbox.tsx | 165 + packages/form/src/input/ColorInput.tsx | 148 + .../form/src/input/ColorPicker.module.css | 51 + packages/form/src/input/ColorPicker.tsx | 210 ++ packages/form/src/input/Field.tsx | 93 + packages/form/src/input/File.module.css | 42 + packages/form/src/input/File.tsx | 169 + packages/form/src/input/Input.tsx | 117 + packages/form/src/input/Number.tsx | 129 + packages/form/src/input/Password.tsx | 152 + packages/form/src/input/Radio.tsx | 146 + packages/form/src/input/RadioGroup.tsx | 75 + packages/form/src/input/Range.tsx | 280 ++ packages/form/src/input/Search.tsx | 159 + packages/form/src/input/Slider.tsx | 286 ++ packages/form/src/input/Switch.tsx | 168 + packages/form/src/input/Textarea.tsx | 131 + packages/form/src/internal/ErrorIcon.tsx | 61 + packages/form/src/internal/Field.module.css | 114 + packages/form/src/internal/FieldWrapper.tsx | 78 + packages/form/src/internal/InputWrapper.tsx | 130 + packages/form/src/ranger/index.tsx | 514 +++ packages/form/src/ranger/utils.ts | 48 + packages/form/src/select/DualList.tsx | 231 ++ packages/form/src/select/List.tsx | 284 ++ packages/form/src/select/Options.tsx | 114 + packages/form/src/select/Select.tsx | 333 ++ packages/form/src/select/helpers.ts | 36 + packages/form/src/select/useSelect.tsx | 356 ++ packages/form/src/types/index.ts | 203 ++ packages/form/src/utils/eventHandlers.ts | 72 + packages/form/src/utils/getColor.ts | 47 + packages/form/src/utils/index.ts | 26 + packages/form/src/utils/yup.ts | 73 + .../form/stories/form/ArrayInput.stories.tsx | 128 + packages/form/stories/form/Form.mdx | 75 + packages/form/stories/form/Form.stories.tsx | 169 + .../form/stories/inputs/Checkbox.stories.tsx | 65 + .../stories/inputs/ColorInput.stories.tsx | 59 + packages/form/stories/inputs/File.stories.tsx | 58 + packages/form/stories/inputs/Input.mdx | 192 ++ .../form/stories/inputs/Input.stories.tsx | 82 + .../form/stories/inputs/Number.stories.tsx | 60 + .../form/stories/inputs/Others.stories.tsx | 93 + .../form/stories/inputs/Password.stories.tsx | 60 + .../form/stories/inputs/Radio.stories.tsx | 76 + .../form/stories/inputs/Search.stories.tsx | 62 + .../form/stories/inputs/Switch.stories.tsx | 61 + .../form/stories/inputs/Textarea.stories.tsx | 58 + .../form/stories/selects/DualList.stories.tsx | 73 + packages/form/stories/selects/List.mdx | 95 + .../form/stories/selects/List.stories.tsx | 165 + packages/form/stories/selects/Select.mdx | 94 + .../form/stories/selects/Select.stories.tsx | 199 ++ .../form/stories/sliders/Range.stories.tsx | 62 + packages/form/stories/sliders/Slider.mdx | 76 + .../form/stories/sliders/Slider.stories.tsx | 64 + packages/form/tsconfig.build.json | 12 + packages/form/tsconfig.json | 5 + packages/utilities/LICENSE | 21 + packages/utilities/README.md | 10 + packages/utilities/package.json | 49 + packages/utilities/src/_ascii.ts | 93 + packages/utilities/src/_boundingBox.ts | 72 + packages/utilities/src/_countries.ts | 3046 +++++++++++++++++ packages/utilities/src/_debounce.ts | 42 + packages/utilities/src/_dedupe.ts | 54 + packages/utilities/src/_fetch.ts | 109 + packages/utilities/src/_fileType.ts | 993 ++++++ packages/utilities/src/_format.ts | 141 + packages/utilities/src/_getByPath.ts | 108 + packages/utilities/src/_hash.ts | 54 + packages/utilities/src/_interpolate.ts | 42 + packages/utilities/src/_isEqual.ts | 102 + packages/utilities/src/_isType.ts | 104 + packages/utilities/src/_mergeRefs.ts | 33 + packages/utilities/src/_tokenize.ts | 69 + packages/utilities/src/getImageColorset.ts | 81 + packages/utilities/src/index.ts | 43 + packages/utilities/src/useLogger.ts | 304 ++ .../tests/__snapshots__/format.test.ts.snap | 11 + packages/utilities/tests/ascii.test.ts | 34 + packages/utilities/tests/boundingBox.test.ts | 42 + packages/utilities/tests/countries.test.ts | 65 + packages/utilities/tests/dedupe.test.ts | 93 + packages/utilities/tests/format.test.ts | 93 + packages/utilities/tests/getByPath.test.ts | 86 + packages/utilities/tests/hash.test.ts | 39 + packages/utilities/tests/interpolate.test.ts | 56 + packages/utilities/tests/isEqual.test.ts | 110 + packages/utilities/tests/isType.test.ts | 113 + packages/utilities/tests/tokenize.test.ts | 50 + packages/utilities/tsconfig.build.json | 12 + packages/utilities/tsconfig.json | 5 + stories/0.Introduction.mdx | 67 +- yarn.lock | 43 +- 408 files changed, 50196 insertions(+), 84 deletions(-) rename .github/workflows/{master.yml => build.yml} (77%) create mode 100644 assets/browser/chrome.png create mode 100644 assets/browser/edge.png create mode 100644 assets/browser/firefox.png create mode 100644 assets/browser/safari.png create mode 100644 assets/gitposter.png rename assets/{ => samples}/small_video.mp4 (100%) create mode 100644 packages/chart/LICENSE create mode 100644 packages/chart/README.md create mode 100644 packages/chart/package.json create mode 100644 packages/chart/src/charts/ActivityMap.tsx create mode 100644 packages/chart/src/charts/CountSeries.tsx create mode 100644 packages/chart/src/charts/DataSeries.tsx create mode 100644 packages/chart/src/charts/Generic.tsx create mode 100644 packages/chart/src/charts/MapSeries.tsx create mode 100644 packages/chart/src/charts/TimeSeries.tsx create mode 100644 packages/chart/src/charts/TimeSlider.tsx create mode 100644 packages/chart/src/charts/WordBubble.tsx create mode 100644 packages/chart/src/index.ts create mode 100644 packages/chart/src/theme/darkBase.ts create mode 100644 packages/chart/src/theme/index.ts create mode 100644 packages/chart/src/theme/lightBase.ts create mode 100644 packages/chart/src/theme/palettes.ts create mode 100644 packages/chart/src/types/charts.ts create mode 100644 packages/chart/src/types/index.ts create mode 100644 packages/chart/src/types/utils.ts create mode 100644 packages/chart/src/types/world.svg.ts create mode 100644 packages/chart/src/wrapper/Chart.module.css create mode 100644 packages/chart/src/wrapper/ChartContainer.tsx create mode 100644 packages/chart/src/wrapper/ChartToolbar.tsx create mode 100644 packages/chart/src/wrapper/ChartWrapper.tsx create mode 100644 packages/chart/src/wrapper/PaletteSelect.tsx create mode 100644 packages/chart/stories/ActivityMap.mdx create mode 100644 packages/chart/stories/ActivityMap.stories.tsx create mode 100644 packages/chart/stories/CountSeries.mdx create mode 100644 packages/chart/stories/CountSeries.stories.tsx create mode 100644 packages/chart/stories/DataSeries.mdx create mode 100644 packages/chart/stories/DataSeries.stories.tsx create mode 100644 packages/chart/stories/GenericChart.mdx create mode 100644 packages/chart/stories/GenericChart.stories.tsx create mode 100644 packages/chart/stories/MapSeries.mdx create mode 100644 packages/chart/stories/MapSeries.stories.tsx create mode 100644 packages/chart/stories/TimeSeries.mdx create mode 100644 packages/chart/stories/TimeSeries.stories.tsx create mode 100644 packages/chart/stories/TimeSlider.mdx create mode 100644 packages/chart/stories/TimeSlider.stories.tsx create mode 100644 packages/chart/stories/WordBubble.mdx create mode 100644 packages/chart/stories/WordBubble.stories.tsx create mode 100644 packages/chart/stories/coffee.ts create mode 100644 packages/chart/stories/sankey.ts create mode 100755 packages/chart/tsconfig.build.json create mode 100755 packages/chart/tsconfig.json create mode 100644 packages/core/LICENSE create mode 100644 packages/core/README.md create mode 100644 packages/core/css/flags.rect.css create mode 100644 packages/core/css/flags.wavy.css create mode 100644 packages/core/css/index.js create mode 100644 packages/core/css/reset/_gradients.css create mode 100644 packages/core/css/reset/_reset.css create mode 100644 packages/core/css/reset/_text.css create mode 100644 packages/core/css/reset/_theme.css create mode 100644 packages/core/css/reset/index.css create mode 100644 packages/core/css/styles.css create mode 100644 packages/core/css/tailwind/colors.ts create mode 100644 packages/core/package.json create mode 100644 packages/core/src/components/actionLabel/ActionLabel.module.css create mode 100644 packages/core/src/components/actionLabel/ActionLabel.tsx create mode 100644 packages/core/src/components/animations/Animations.module.css create mode 100644 packages/core/src/components/animations/Animations.tsx create mode 100644 packages/core/src/components/avatar/Avatar.module.css create mode 100644 packages/core/src/components/avatar/Avatar.tsx create mode 100644 packages/core/src/components/avatar/AvatarGroup.tsx create mode 100644 packages/core/src/components/badge/Badge.module.css create mode 100644 packages/core/src/components/badge/Badge.tsx create mode 100644 packages/core/src/components/breadcrumbs/Breadcrumbs.module.css create mode 100644 packages/core/src/components/breadcrumbs/Breadcrumbs.tsx create mode 100644 packages/core/src/components/button/Button.module.css create mode 100644 packages/core/src/components/button/Button.tsx create mode 100644 packages/core/src/components/button/ButtonGroup.tsx create mode 100644 packages/core/src/components/button/ConfirmButton.tsx create mode 100644 packages/core/src/components/button/ToggleButtonGroup.tsx create mode 100644 packages/core/src/components/callout/Callout.tsx create mode 100644 packages/core/src/components/card/Card.module.css create mode 100644 packages/core/src/components/card/Card.tsx create mode 100644 packages/core/src/components/card/CardCover.tsx create mode 100644 packages/core/src/components/chip/Chip.module.css create mode 100644 packages/core/src/components/chip/Chip.tsx create mode 100644 packages/core/src/components/collapsable/Collapsable.module.css create mode 100644 packages/core/src/components/collapsable/Collapsable.tsx create mode 100644 packages/core/src/components/divider/Divider.tsx create mode 100644 packages/core/src/components/dropdown/Dropdown.module.css create mode 100644 packages/core/src/components/dropdown/Dropdown.tsx create mode 100644 packages/core/src/components/empty/EmptyContent.tsx create mode 100644 packages/core/src/components/icon/Icon.module.css create mode 100644 packages/core/src/components/icon/Icon.tsx create mode 100644 packages/core/src/components/index.ts create mode 100644 packages/core/src/components/media/Media.module.css create mode 100644 packages/core/src/components/media/Media.tsx create mode 100644 packages/core/src/components/menu/ContextMenu.tsx create mode 100644 packages/core/src/components/menu/Menu.module.css create mode 100644 packages/core/src/components/menu/Menu.tsx create mode 100644 packages/core/src/components/menu/MenuItem.tsx create mode 100644 packages/core/src/components/menu/types.ts create mode 100644 packages/core/src/components/meter/Meter.module.css create mode 100644 packages/core/src/components/meter/Meter.tsx create mode 100644 packages/core/src/components/navigator/Navigator.tsx create mode 100644 packages/core/src/components/panel/Panel.module.css create mode 100644 packages/core/src/components/panel/Panel.tsx create mode 100644 packages/core/src/components/panel/PanelGroup.tsx create mode 100644 packages/core/src/components/progress/Progress.module.css create mode 100644 packages/core/src/components/progress/ProgressBar.tsx create mode 100644 packages/core/src/components/progress/ProgressCircle.tsx create mode 100644 packages/core/src/components/tabpanel/Tab.tsx create mode 100644 packages/core/src/components/tabpanel/TabPanel.module.css create mode 100644 packages/core/src/components/tabpanel/TabPanel.tsx create mode 100644 packages/core/src/context/Global.tsx create mode 100644 packages/core/src/context/NotificationCenter.tsx create mode 100644 packages/core/src/core/aside/Aside.module.css create mode 100644 packages/core/src/core/aside/Aside.tsx create mode 100644 packages/core/src/core/boundary/ErrorBoundary.module.css create mode 100644 packages/core/src/core/boundary/ErrorBoundary.tsx create mode 100644 packages/core/src/core/boundary/ErrorIcon.tsx create mode 100644 packages/core/src/core/content/Content.module.css create mode 100644 packages/core/src/core/content/Content.tsx create mode 100644 packages/core/src/core/headfoot/HeadFoot.module.css create mode 100644 packages/core/src/core/headfoot/HeadFoot.tsx create mode 100644 packages/core/src/core/index.ts create mode 100644 packages/core/src/core/page/Page.module.css create mode 100644 packages/core/src/core/page/Page.tsx create mode 100644 packages/core/src/core/responsive/Responsive.module.css create mode 100644 packages/core/src/core/responsive/Responsive.tsx create mode 100644 packages/core/src/core/section/Section.module.css create mode 100644 packages/core/src/core/section/Section.tsx create mode 100644 packages/core/src/core/theme/Theme.module.css create mode 100644 packages/core/src/core/theme/ThemeProvider.tsx create mode 100644 packages/core/src/core/viewport/Viewport.module.css create mode 100644 packages/core/src/core/viewport/Viewport.tsx create mode 100644 packages/core/src/hooks/useClientService.tsx create mode 100644 packages/core/src/hooks/useControlledValue.tsx create mode 100644 packages/core/src/hooks/useDebounce.ts create mode 100644 packages/core/src/hooks/useEffectDebugger.ts create mode 100644 packages/core/src/hooks/useIsDark.ts create mode 100755 packages/core/src/hooks/useIsRtl.ts create mode 100644 packages/core/src/hooks/useNavigator.tsx create mode 100644 packages/core/src/hooks/useOverlayService.tsx create mode 100644 packages/core/src/hooks/usePropToggle.ts create mode 100644 packages/core/src/hooks/useResize.ts create mode 100644 packages/core/src/hooks/useResizeObserver.ts create mode 100644 packages/core/src/hooks/useStorage.ts create mode 100644 packages/core/src/hotkeys/HotKey.tsx create mode 100644 packages/core/src/hotkeys/HotKeyLabel.tsx create mode 100644 packages/core/src/hotkeys/HotKeyWrapper.tsx create mode 100644 packages/core/src/hotkeys/commons.ts create mode 100755 packages/core/src/i18n/ar.json create mode 100755 packages/core/src/i18n/en.json create mode 100755 packages/core/src/i18n/index.ts create mode 100644 packages/core/src/index.ts create mode 100644 packages/core/src/overlays/alert/Alert.module.css create mode 100644 packages/core/src/overlays/alert/Alert.tsx create mode 100644 packages/core/src/overlays/flyout/Flyout.module.css create mode 100644 packages/core/src/overlays/flyout/Flyout.tsx create mode 100644 packages/core/src/overlays/index.ts create mode 100644 packages/core/src/overlays/message/Message.module.css create mode 100644 packages/core/src/overlays/message/Message.tsx create mode 100644 packages/core/src/overlays/modal/Modal.module.css create mode 100644 packages/core/src/overlays/modal/Modal.tsx create mode 100644 packages/core/src/overlays/toast/Toast.module.css create mode 100644 packages/core/src/overlays/toast/Toast.tsx create mode 100644 packages/core/src/overlays/tooltip/Tooltip.module.css create mode 100644 packages/core/src/overlays/tooltip/Tooltip.tsx create mode 100644 packages/core/src/types/global.d.ts create mode 100644 packages/core/src/types/icons.ts create mode 100644 packages/core/src/types/index.ts create mode 100644 packages/core/src/typography/Abbr.tsx create mode 100644 packages/core/src/typography/Copy.tsx create mode 100644 packages/core/src/typography/Link.tsx create mode 100644 packages/core/src/typography/Mark.tsx create mode 100644 packages/core/src/typography/Text.tsx create mode 100644 packages/core/src/typography/Title.tsx create mode 100644 packages/core/src/typography/Typography.module.css create mode 100644 packages/core/src/typography/index.ts create mode 100644 packages/core/src/typography/types.ts create mode 100644 packages/core/src/utils/calculateDimensions.ts create mode 100644 packages/core/src/utils/getColor.ts create mode 100644 packages/core/src/utils/index.ts create mode 100644 packages/core/src/utils/nodeCheck.ts create mode 100644 packages/core/stories/0.core/Aside.stories.tsx create mode 100644 packages/core/stories/0.core/Content.stories.tsx create mode 100644 packages/core/stories/0.core/Core.mdx create mode 100644 packages/core/stories/0.core/ErrorBoundary.stories.tsx create mode 100644 packages/core/stories/0.core/Page.stories.tsx create mode 100644 packages/core/stories/0.core/Responsive.stories.tsx create mode 100644 packages/core/stories/0.core/Section.stories.tsx create mode 100644 packages/core/stories/0.core/Theme.stories.tsx create mode 100644 packages/core/stories/0.core/Viewport.stories.tsx create mode 100644 packages/core/stories/1.typography/Abbr.stories.tsx create mode 100644 packages/core/stories/1.typography/Copy.stories.tsx create mode 100644 packages/core/stories/1.typography/Link.stories.tsx create mode 100644 packages/core/stories/1.typography/Mark.stories.tsx create mode 100644 packages/core/stories/1.typography/Text.stories.tsx create mode 100644 packages/core/stories/1.typography/Title.stories.tsx create mode 100644 packages/core/stories/1.typography/Typography.mdx create mode 100644 packages/core/stories/components/actionLabel/ActionLabel.mdx create mode 100644 packages/core/stories/components/actionLabel/ActionLabel.stories.tsx create mode 100644 packages/core/stories/components/animations/Animations.mdx create mode 100644 packages/core/stories/components/animations/Animations.stories.tsx create mode 100644 packages/core/stories/components/animations/Bars.stories.tsx create mode 100644 packages/core/stories/components/animations/Skeleton.stories.tsx create mode 100644 packages/core/stories/components/animations/Spinner.stories.tsx create mode 100644 packages/core/stories/components/avatar/Avatar.mdx create mode 100644 packages/core/stories/components/avatar/Avatar.stories.tsx create mode 100644 packages/core/stories/components/avatar/AvatarGroup.stories.tsx create mode 100644 packages/core/stories/components/badge/Badge.mdx create mode 100644 packages/core/stories/components/badge/Badge.stories.tsx create mode 100644 packages/core/stories/components/breadcrumbs/Breadcrumbs.mdx create mode 100644 packages/core/stories/components/breadcrumbs/Breadcrumbs.stories.tsx create mode 100644 packages/core/stories/components/button/Button.mdx create mode 100644 packages/core/stories/components/button/Button.stories.tsx create mode 100644 packages/core/stories/components/button/ButtonGroup.mdx create mode 100644 packages/core/stories/components/button/ButtonGroup.stories.tsx create mode 100644 packages/core/stories/components/button/ConfirmButton.mdx create mode 100644 packages/core/stories/components/button/ConfirmButton.stories.tsx create mode 100644 packages/core/stories/components/button/Navigator.stories.tsx create mode 100644 packages/core/stories/components/button/ToggleButtonGroup.mdx create mode 100644 packages/core/stories/components/button/ToggleButtonGroup.stories.tsx create mode 100644 packages/core/stories/components/callout/Callout.mdx create mode 100644 packages/core/stories/components/callout/Callout.stories.tsx create mode 100644 packages/core/stories/components/card/Card.mdx create mode 100644 packages/core/stories/components/card/Card.stories.tsx create mode 100644 packages/core/stories/components/chip/Chip.mdx create mode 100644 packages/core/stories/components/chip/Chip.stories.tsx create mode 100644 packages/core/stories/components/collapable/Collapsable.mdx create mode 100644 packages/core/stories/components/collapable/Collapsable.stories.tsx create mode 100644 packages/core/stories/components/dropdown/Dropdown.mdx create mode 100644 packages/core/stories/components/dropdown/Dropdown.stories.tsx create mode 100644 packages/core/stories/components/empty/Empty.mdx create mode 100644 packages/core/stories/components/empty/Empty.stories.tsx create mode 100644 packages/core/stories/components/icon/Icon.mdx create mode 100644 packages/core/stories/components/icon/Icon.stories.tsx create mode 100644 packages/core/stories/components/menu/Menu.mdx create mode 100644 packages/core/stories/components/menu/Menu.stories.tsx create mode 100644 packages/core/stories/components/meter/Meter.mdx create mode 100644 packages/core/stories/components/meter/Meter.stories.tsx create mode 100644 packages/core/stories/components/notifications/Alert.stories.tsx create mode 100644 packages/core/stories/components/notifications/Message.stories.tsx create mode 100644 packages/core/stories/components/notifications/Notifications.mdx create mode 100644 packages/core/stories/components/notifications/Toast.stories.tsx create mode 100644 packages/core/stories/components/overlays/Flyout.stories.tsx create mode 100644 packages/core/stories/components/overlays/Modal.stories.tsx create mode 100644 packages/core/stories/components/overlays/Overlays.mdx create mode 100644 packages/core/stories/components/panel/Panel.mdx create mode 100644 packages/core/stories/components/panel/Panel.stories.tsx create mode 100644 packages/core/stories/components/panel/PanelGroup.stories.tsx create mode 100644 packages/core/stories/components/progress/Circle.stories.tsx create mode 100644 packages/core/stories/components/progress/Progress.mdx create mode 100644 packages/core/stories/components/progress/Progress.stories.tsx create mode 100644 packages/core/stories/components/tabPanel/TabPanel.mdx create mode 100644 packages/core/stories/components/tabPanel/TabPanel.stories.tsx create mode 100644 packages/core/stories/components/tooltip/Tooltip.mdx create mode 100644 packages/core/stories/components/tooltip/Tooltip.stories.tsx create mode 100644 packages/core/tests/buttons/Button.test.tsx create mode 100644 packages/core/tests/buttons/ButtonGroup.test.tsx create mode 100644 packages/core/tests/buttons/__snapshots__/Button.test.tsx.snap create mode 100644 packages/core/tests/buttons/__snapshots__/ButtonGroup.test.tsx.snap create mode 100755 packages/core/tsconfig.build.json create mode 100755 packages/core/tsconfig.json create mode 100644 packages/data/LICENSE create mode 100644 packages/data/README.md create mode 100644 packages/data/package.json create mode 100644 packages/data/src/histogram/Histogram.module.css create mode 100644 packages/data/src/histogram/Histogram.tsx create mode 100644 packages/data/src/hooks/useFilteredList.tsx create mode 100755 packages/data/src/i18n/ar.json create mode 100755 packages/data/src/i18n/en.json create mode 100755 packages/data/src/i18n/index.ts create mode 100644 packages/data/src/index.ts create mode 100644 packages/data/src/json/JsonViewer.tsx create mode 100644 packages/data/src/virtual/Gallery.tsx create mode 100644 packages/data/src/virtual/List.tsx create mode 100644 packages/data/src/virtual/Scroller.tsx create mode 100644 packages/data/stories/VirtualGallery.stories.tsx create mode 100644 packages/data/stories/VirtualList.stories.tsx create mode 100644 packages/data/stories/histogram/Histogram.stories.tsx create mode 100644 packages/data/stories/json/JsonViewer.stories.tsx create mode 100644 packages/data/stories/useFilteredList/FilteredList.mdx create mode 100644 packages/data/stories/useFilteredList/FilteredList.stories.tsx create mode 100755 packages/data/tsconfig.build.json create mode 100755 packages/data/tsconfig.json create mode 100644 packages/form/LICENSE create mode 100644 packages/form/README.md create mode 100644 packages/form/package.json create mode 100644 packages/form/src/form/Controller.tsx create mode 100644 packages/form/src/form/Form.tsx create mode 100755 packages/form/src/i18n/ar.json create mode 100755 packages/form/src/i18n/en.json create mode 100755 packages/form/src/i18n/index.ts create mode 100644 packages/form/src/index.ts create mode 100644 packages/form/src/input/ArrayInput.module.css create mode 100644 packages/form/src/input/ArrayInput.tsx create mode 100644 packages/form/src/input/Checkbox.tsx create mode 100644 packages/form/src/input/ColorInput.tsx create mode 100644 packages/form/src/input/ColorPicker.module.css create mode 100644 packages/form/src/input/ColorPicker.tsx create mode 100644 packages/form/src/input/Field.tsx create mode 100644 packages/form/src/input/File.module.css create mode 100644 packages/form/src/input/File.tsx create mode 100644 packages/form/src/input/Input.tsx create mode 100644 packages/form/src/input/Number.tsx create mode 100644 packages/form/src/input/Password.tsx create mode 100644 packages/form/src/input/Radio.tsx create mode 100644 packages/form/src/input/RadioGroup.tsx create mode 100644 packages/form/src/input/Range.tsx create mode 100644 packages/form/src/input/Search.tsx create mode 100644 packages/form/src/input/Slider.tsx create mode 100644 packages/form/src/input/Switch.tsx create mode 100644 packages/form/src/input/Textarea.tsx create mode 100644 packages/form/src/internal/ErrorIcon.tsx create mode 100644 packages/form/src/internal/Field.module.css create mode 100644 packages/form/src/internal/FieldWrapper.tsx create mode 100644 packages/form/src/internal/InputWrapper.tsx create mode 100644 packages/form/src/ranger/index.tsx create mode 100644 packages/form/src/ranger/utils.ts create mode 100644 packages/form/src/select/DualList.tsx create mode 100644 packages/form/src/select/List.tsx create mode 100644 packages/form/src/select/Options.tsx create mode 100644 packages/form/src/select/Select.tsx create mode 100644 packages/form/src/select/helpers.ts create mode 100644 packages/form/src/select/useSelect.tsx create mode 100644 packages/form/src/types/index.ts create mode 100644 packages/form/src/utils/eventHandlers.ts create mode 100644 packages/form/src/utils/getColor.ts create mode 100644 packages/form/src/utils/index.ts create mode 100644 packages/form/src/utils/yup.ts create mode 100644 packages/form/stories/form/ArrayInput.stories.tsx create mode 100644 packages/form/stories/form/Form.mdx create mode 100644 packages/form/stories/form/Form.stories.tsx create mode 100644 packages/form/stories/inputs/Checkbox.stories.tsx create mode 100644 packages/form/stories/inputs/ColorInput.stories.tsx create mode 100644 packages/form/stories/inputs/File.stories.tsx create mode 100644 packages/form/stories/inputs/Input.mdx create mode 100644 packages/form/stories/inputs/Input.stories.tsx create mode 100644 packages/form/stories/inputs/Number.stories.tsx create mode 100644 packages/form/stories/inputs/Others.stories.tsx create mode 100644 packages/form/stories/inputs/Password.stories.tsx create mode 100644 packages/form/stories/inputs/Radio.stories.tsx create mode 100644 packages/form/stories/inputs/Search.stories.tsx create mode 100644 packages/form/stories/inputs/Switch.stories.tsx create mode 100644 packages/form/stories/inputs/Textarea.stories.tsx create mode 100644 packages/form/stories/selects/DualList.stories.tsx create mode 100644 packages/form/stories/selects/List.mdx create mode 100644 packages/form/stories/selects/List.stories.tsx create mode 100644 packages/form/stories/selects/Select.mdx create mode 100644 packages/form/stories/selects/Select.stories.tsx create mode 100644 packages/form/stories/sliders/Range.stories.tsx create mode 100644 packages/form/stories/sliders/Slider.mdx create mode 100644 packages/form/stories/sliders/Slider.stories.tsx create mode 100755 packages/form/tsconfig.build.json create mode 100755 packages/form/tsconfig.json create mode 100644 packages/utilities/LICENSE create mode 100644 packages/utilities/README.md create mode 100644 packages/utilities/package.json create mode 100644 packages/utilities/src/_ascii.ts create mode 100644 packages/utilities/src/_boundingBox.ts create mode 100644 packages/utilities/src/_countries.ts create mode 100644 packages/utilities/src/_debounce.ts create mode 100644 packages/utilities/src/_dedupe.ts create mode 100644 packages/utilities/src/_fetch.ts create mode 100644 packages/utilities/src/_fileType.ts create mode 100644 packages/utilities/src/_format.ts create mode 100644 packages/utilities/src/_getByPath.ts create mode 100644 packages/utilities/src/_hash.ts create mode 100644 packages/utilities/src/_interpolate.ts create mode 100644 packages/utilities/src/_isEqual.ts create mode 100755 packages/utilities/src/_isType.ts create mode 100644 packages/utilities/src/_mergeRefs.ts create mode 100644 packages/utilities/src/_tokenize.ts create mode 100644 packages/utilities/src/getImageColorset.ts create mode 100755 packages/utilities/src/index.ts create mode 100755 packages/utilities/src/useLogger.ts create mode 100644 packages/utilities/tests/__snapshots__/format.test.ts.snap create mode 100644 packages/utilities/tests/ascii.test.ts create mode 100644 packages/utilities/tests/boundingBox.test.ts create mode 100644 packages/utilities/tests/countries.test.ts create mode 100644 packages/utilities/tests/dedupe.test.ts create mode 100644 packages/utilities/tests/format.test.ts create mode 100644 packages/utilities/tests/getByPath.test.ts create mode 100644 packages/utilities/tests/hash.test.ts create mode 100644 packages/utilities/tests/interpolate.test.ts create mode 100644 packages/utilities/tests/isEqual.test.ts create mode 100644 packages/utilities/tests/isType.test.ts create mode 100644 packages/utilities/tests/tokenize.test.ts create mode 100755 packages/utilities/tsconfig.build.json create mode 100755 packages/utilities/tsconfig.json diff --git a/.codeclimate.json b/.codeclimate.json index aa9df5c..2adc48f 100644 --- a/.codeclimate.json +++ b/.codeclimate.json @@ -15,6 +15,7 @@ "**/stories/", "**/tests/", "**/dist/", + "**/css/", "**/LICENSE", "**/*.d.ts", "**/*.lock", @@ -27,6 +28,11 @@ ".gitignore", ".npmignore", ".codeclimate.json", + "**/darkBase.ts", + "**/lightBase.ts", + "**/palettes.ts", + "**/world.svg.ts", + "**/_fileType.ts", "**/_countries.ts", "**/hijri-date.js" ] diff --git a/.github/workflows/master.yml b/.github/workflows/build.yml similarity index 77% rename from .github/workflows/master.yml rename to .github/workflows/build.yml index ac33a45..7089f67 100644 --- a/.github/workflows/master.yml +++ b/.github/workflows/build.yml @@ -4,7 +4,7 @@ name: Build and Deploy on: # Triggers the workflow on push events for the master branch push: - branches: [WIP-v4] + branches: [main] # Allows you to run this workflow manually from the Actions tab workflow_dispatch: @@ -33,6 +33,14 @@ jobs: run: | yarn dist + # Collect test coverage + - name: Run coverage + uses: paambaati/codeclimate-action@v5.0.0 + env: + CC_TEST_REPORTER_ID: ${{ secrets.COVERAGE_TOKEN }} + with: + coverageCommand: yarn test --coverage --json --outputFile=./.storybook/jest-test-results.json + # Runs a set of commands using the runners shell - name: Build storybook run: | @@ -42,8 +50,7 @@ jobs: - name: Deploy to GitHub Pages # You may pin to the exact commit or the version. # uses: JamesIves/github-pages-deploy-action@5dc1d5a192aeb5ab5b7d5a77b7d36aea4a7f5c92 - uses: JamesIves/github-pages-deploy-action@4.1.5 + uses: JamesIves/github-pages-deploy-action@v4 with: branch: gh-pages - target-folder: v4 folder: build diff --git a/.storybook/addon-theme/register.tsx b/.storybook/addon-theme/register.tsx index d004815..3c67536 100644 --- a/.storybook/addon-theme/register.tsx +++ b/.storybook/addon-theme/register.tsx @@ -7,61 +7,374 @@ import { useGlobals, useParameter, useStorybookApi } from "@storybook/api"; import { IconButton } from "@storybook/components"; -import { SunIcon, MoonIcon } from "@storybook/icons"; -import { ThemeVars, themes } from "@storybook/theming"; +import { MoonIcon, SunIcon } from "@storybook/icons"; +import { themes, ThemeVars } from "@storybook/theming"; import React, { useCallback, useEffect, useState } from "react"; -const STORAGE_KEY = "storybook-theme"; +const STORAGE_KEY = "storybook-scheme"; +const THEME_KEY = "storybook-theme"; +const TINT_KEY = "storybook-tint"; +const ROUNDING_KEY = "storybook-rounding"; + const GLOBAL_KEY = "theme"; -enum THEME { + +enum COLOR_SCHEME { LIGHT = "light", DARK = "dark", } -interface ThemeToggleParams { +interface ColorSchemeToggleParams { lightTheme: ThemeVars; darkTheme: ThemeVars; } +enum THEME { + DENIM = "denim:jade", + IRIS = "iris:coral", + AVACADO = "avacado:wood", + PUMPKIN = "pumpkin:lilac", + SCARLET = "scarlet:marigold", +} +enum TINT { + SILVER = "silver", + STEEL = "steel", + OLIVE = "olive", + SAND = "sand", +} +enum ROUNDING { + SMALL = "sm", + NORMAL = "normal", + MEDIUM = "md", + FULL = "full", +} + export const ThemeToggle = () => { const api = useStorybookApi(); const [globals, updateGlobals] = useGlobals(); - const { darkTheme = themes.dark, lightTheme = themes.light } = useParameter< - Partial - >("themeToggle", {}); const [theme, setTheme] = useState( - (localStorage.getItem(STORAGE_KEY) as THEME) ?? THEME.LIGHT, + (localStorage.getItem(THEME_KEY) as THEME) ?? THEME.DENIM, + ); + const [tint, setTint] = useState( + (localStorage.getItem(TINT_KEY) as TINT) ?? TINT.SILVER, + ); + const [rounding, setRounding] = useState( + (localStorage.getItem(ROUNDING_KEY) as ROUNDING) ?? ROUNDING.NORMAL, + ); + const { darkTheme = themes.dark, lightTheme = themes.light } = useParameter< + Partial + >("schemeToggle", {}); + const [colorScheme, setColorScheme] = useState( + (localStorage.getItem(STORAGE_KEY) as COLOR_SCHEME) ?? COLOR_SCHEME.LIGHT, ); // Function that will update the global value and trigger a UI refresh. - const refreshAndUpdateGlobal = useCallback((key: THEME, theme: ThemeVars) => { - api.setOptions({ theme }); - // Updates Storybook global value - updateGlobals({ - [GLOBAL_KEY]: key, - }); - api.getChannel()?.emit("THEME_CHANGED", key); - }, []); + // Function that will update the global value and trigger a UI refresh. + const refreshAndUpdateGlobal = useCallback( + (key: COLOR_SCHEME, theme: ThemeVars) => { + api.setOptions({ theme }); + // Updates Storybook global value + updateGlobals({ + [GLOBAL_KEY]: key, + }); + api.getChannel()?.emit("SCHEME_CHANGED", key); + }, + [], + ); + + const changeTheme = useCallback( + (key: THEME = THEME.DENIM) => { + localStorage.setItem(THEME_KEY, key); + setTheme(key); + }, + [theme], + ); + + const changeTint = useCallback( + (key: TINT) => { + localStorage.setItem(TINT_KEY, key); + setTint(key); + }, + [theme], + ); - const toggleTheme = useCallback(() => { - const newTheme = theme === THEME.DARK ? THEME.LIGHT : THEME.DARK; + const changeRounding = useCallback( + (key: ROUNDING) => { + localStorage.setItem(ROUNDING_KEY, key); + setRounding(key); + }, + [theme], + ); + + const toggleColorScheme = useCallback(() => { + const newTheme = + colorScheme === COLOR_SCHEME.DARK + ? COLOR_SCHEME.LIGHT + : COLOR_SCHEME.DARK; localStorage.setItem(STORAGE_KEY, newTheme); - setTheme(newTheme); - }, [theme]); + setColorScheme(newTheme); + }, [colorScheme]); useEffect(() => { api.getChannel()?.emit("LOCALE_CHANGED", globals.locale); }, [globals.locale]); useEffect(() => { - refreshAndUpdateGlobal(theme, { - ...(theme === THEME.DARK ? darkTheme : lightTheme), + refreshAndUpdateGlobal(colorScheme, { + ...(colorScheme === COLOR_SCHEME.DARK ? darkTheme : lightTheme), }); - }, [theme, darkTheme, lightTheme, globals.primary, globals.accent]); + }, [colorScheme, darkTheme, lightTheme, globals.primary, globals.accent]); + + useEffect(() => { + const [primary, accent] = theme.split(":"); + api.getChannel()?.emit("THEME_CHANGED", primary, accent); + api.getChannel()?.emit("TINT_CHANGED", tint ?? TINT.SILVER); + api.getChannel()?.emit("ROUNDING_CHANGED", rounding ?? ROUNDING.NORMAL); + }, [theme, tint, rounding, colorScheme]); return ( - - {theme === THEME.DARK ? : } - + <> +
+ + {colorScheme === COLOR_SCHEME.DARK ? : } + +
+ + changeTheme(THEME.DENIM)} + > +
+ + + changeTheme(THEME.AVACADO)} + > +
+ + + changeTheme(THEME.SCARLET)} + > +
+ + + changeTheme(THEME.PUMPKIN)} + > +
+ + + changeTheme(THEME.IRIS)} + > +
+ + +
+ + changeTint(TINT.SILVER)} + > +
+ + + changeTint(TINT.STEEL)} + > +
+ + + changeTint(TINT.OLIVE)} + > +
+ + + changeTint(TINT.SAND)} + > +
+ + +
+ + changeRounding(ROUNDING.SMALL)} + > +
+ + + changeRounding(ROUNDING.NORMAL)} + > +
+ + + changeRounding(ROUNDING.MEDIUM)} + > +
+ + + changeRounding(ROUNDING.FULL)} + > +
+ + ); }; diff --git a/.storybook/manager-head.html b/.storybook/manager-head.html index 77f17d1..58da660 100644 --- a/.storybook/manager-head.html +++ b/.storybook/manager-head.html @@ -5,6 +5,23 @@