From f01c12d4b633e70bd227eaf77c06f76066ed2ea0 Mon Sep 17 00:00:00 2001 From: Mohit Nagar Date: Wed, 11 Sep 2024 15:40:46 +0530 Subject: [PATCH 1/4] Initial commit --- README.md | 2 ++ 1 file changed, 2 insertions(+) create mode 100644 README.md diff --git a/README.md b/README.md new file mode 100644 index 0000000..e41c10b --- /dev/null +++ b/README.md @@ -0,0 +1,2 @@ +# shared-components +Lib of independent components that can be utilised by sophisticated ones in @armco/components From 87b8e4e942733948e1b2ce7b045c87a203de0fa8 Mon Sep 17 00:00:00 2001 From: mohiit1502 Date: Wed, 18 Sep 2024 17:47:10 +0530 Subject: [PATCH 2/4] shared-components build pipeline --- .gitignore | 48 + Dockerfile | 33 + LICENSE | 504 ++++++++++ build-tools/build.sh | 27 + build-tools/fix-styles.js | 27 + build-tools/generate-module.js | 31 + build-tools/post-processor.js | 25 + copy_files.sh | 56 ++ package.json | 142 +++ .../Component/Component.component.scss.hbs | 3 + .../Component/Component.test.ts.hbs | 8 + plop-templates/Component/Component.tsx.hbs | 8 + plop-templates/Component/index.ts.hbs | 3 + plop-templates/Page/Page.page.scss.hbs | 3 + plop-templates/Page/Page.slice.ts.hbs | 18 + plop-templates/Page/Page.test.ts.hbs | 8 + plop-templates/Page/Page.tsx.hbs | 9 + plop-templates/Page/index.ts.hbs | 3 + plop-templates/components.interface.ts.hbs | 2 + plop-templates/injectable-index.ts.hbs | 13 + plopfile.cjs | 261 +++++ publish.sh | 8 + src bkup/AboutUs/AboutUs.component.scss | 3 + src bkup/AboutUs/AboutUs.test.ts | 8 + src bkup/AboutUs/AboutUs.tsx | 8 + src bkup/AboutUs/index.ts | 3 + src bkup/Accordion/Accordion.component.scss | 32 + src bkup/Accordion/Accordion.test.ts | 8 + src bkup/Accordion/Accordion.tsx | 150 +++ src bkup/Accordion/index.ts | 3 + .../AdvancedColorPicker.component.scss | 3 + .../AdvancedColorPicker.test.ts | 8 + .../AdvancedColorPicker.tsx | 123 +++ .../AdvancedColorPicker/ColorPickerConfig.ts | 221 +++++ src bkup/AdvancedColorPicker/index.ts | 3 + src bkup/Alert/Alert.component.scss | 89 ++ src bkup/Alert/Alert.test.ts | 8 + src bkup/Alert/Alert.tsx | 92 ++ src bkup/Alert/index.ts | 3 + .../AlertStackManager.component.scss | 3 + .../AlertStackManager.test.ts | 8 + .../AlertStackManager/AlertStackManager.tsx | 13 + src bkup/AlertStackManager/index.ts | 3 + .../AlphabetFilter.component.scss | 3 + .../AlphabetFilter/AlphabetFilter.test.ts | 8 + src bkup/AlphabetFilter/AlphabetFilter.tsx | 35 + src bkup/AlphabetFilter/index.ts | 3 + src bkup/Anchor/Anchor.component.scss | 3 + src bkup/Anchor/Anchor.test.ts | 8 + src bkup/Anchor/Anchor.tsx | 13 + src bkup/Anchor/index.ts | 3 + .../AppAndToolsSelector.component.scss | 24 + .../AppAndToolsSelector.test.ts | 8 + .../AppAndToolsSelector.tsx | 79 ++ src bkup/AppAndToolsSelector/index.ts | 3 + .../Application/Application.component.scss | 3 + src bkup/Application/Application.test.ts | 8 + src bkup/Application/Application.tsx | 14 + src bkup/Application/index.ts | 3 + .../ArIconsViewer.component.scss | 25 + src bkup/ArIconsViewer/ArIconsViewer.test.ts | 8 + src bkup/ArIconsViewer/ArIconsViewer.tsx | 166 ++++ src bkup/ArIconsViewer/index.ts | 3 + src bkup/ArViz/ArViz.component.scss | 3 + src bkup/ArViz/ArViz.test.ts | 8 + src bkup/ArViz/ArViz.tsx | 45 + src bkup/ArViz/index.ts | 3 + .../ArmcoIamProvider.component.scss | 3 + .../ArmcoIamProvider/ArmcoIamProvider.test.ts | 6 + .../ArmcoIamProvider/ArmcoIamProvider.tsx | 20 + src bkup/ArmcoIamProvider/index.ts | 3 + src bkup/Badge/Badge.component.scss | 69 ++ src bkup/Badge/Badge.test.ts | 8 + src bkup/Badge/Badge.tsx | 25 + src bkup/Badge/index.ts | 3 + src bkup/Banner/Banner.component.scss | 3 + src bkup/Banner/Banner.test.ts | 8 + src bkup/Banner/Banner.tsx | 14 + src bkup/Banner/index.ts | 3 + src bkup/Benefits/Benefits.component.scss | 3 + src bkup/Benefits/Benefits.test.ts | 8 + src bkup/Benefits/Benefits.tsx | 14 + src bkup/Benefits/index.ts | 3 + src bkup/Blog/Blog.component.scss | 3 + src bkup/Blog/Blog.test.ts | 8 + src bkup/Blog/Blog.tsx | 14 + src bkup/Blog/index.ts | 3 + src bkup/Brands/Brands.component.scss | 3 + src bkup/Brands/Brands.test.ts | 8 + src bkup/Brands/Brands.tsx | 14 + src bkup/Brands/index.ts | 3 + src bkup/Breadcrumb/Breadcrumb.component.scss | 5 + src bkup/Breadcrumb/Breadcrumb.test.ts | 8 + src bkup/Breadcrumb/Breadcrumb.tsx | 55 ++ src bkup/Breadcrumb/index.ts | 3 + .../Breadcrumbs/Breadcrumbs.component.scss | 3 + src bkup/Breadcrumbs/Breadcrumbs.test.ts | 8 + src bkup/Breadcrumbs/Breadcrumbs.tsx | 14 + src bkup/Breadcrumbs/index.ts | 3 + .../BrowserIncompatibility.component.scss | 16 + .../BrowserIncompatibility.test.ts | 6 + .../BrowserIncompatibility.tsx | 62 ++ src bkup/BrowserIncompatibility/index.ts | 3 + .../BubbleChart/BubbleChart.component.scss | 3 + src bkup/BubbleChart/BubbleChart.test.ts | 8 + src bkup/BubbleChart/BubbleChart.tsx | 99 ++ src bkup/BubbleChart/index.ts | 3 + src bkup/BubbleViz/BubbleViz.component.scss | 3 + src bkup/BubbleViz/BubbleViz.test.ts | 8 + src bkup/BubbleViz/BubbleViz.tsx | 10 + src bkup/BubbleViz/index.ts | 3 + src bkup/Button/Button.component.scss | 235 +++++ src bkup/Button/Button.test.ts | 8 + src bkup/Button/Button.tsx | 173 ++++ src bkup/Button/index.ts | 3 + src bkup/Card/Card.component.scss | 4 + src bkup/Card/Card.test.ts | 8 + src bkup/Card/Card.tsx | 20 + src bkup/Card/index.ts | 3 + src bkup/Careers/Careers.component.scss | 3 + src bkup/Careers/Careers.test.ts | 8 + src bkup/Careers/Careers.tsx | 14 + src bkup/Careers/index.ts | 3 + src bkup/Carousel/Carousel.component.scss | 3 + src bkup/Carousel/Carousel.test.ts | 8 + src bkup/Carousel/Carousel.tsx | 907 ++++++++++++++++++ src bkup/Carousel/Thumbs.tsx | 378 ++++++++ src bkup/Carousel/animations.ts | 216 +++++ src bkup/Carousel/cssClasses.ts | 58 ++ src bkup/Carousel/index.ts | 3 + .../CategoryFilter.component.scss | 3 + .../CategoryFilter/CategoryFilter.test.ts | 8 + src bkup/CategoryFilter/CategoryFilter.tsx | 80 ++ src bkup/CategoryFilter/index.ts | 3 + src bkup/Checkbox/Checkbox.component.scss | 5 + src bkup/Checkbox/Checkbox.test.ts | 8 + src bkup/Checkbox/Checkbox.tsx | 33 + src bkup/Checkbox/index.ts | 3 + .../ColorPicker/ColorPicker.component.scss | 14 + src bkup/ColorPicker/ColorPicker.test.ts | 8 + src bkup/ColorPicker/ColorPicker.tsx | 34 + src bkup/ColorPicker/index.ts | 3 + .../ColorSelector.component.scss | 38 + src bkup/ColorSelector/ColorSelector.test.ts | 8 + src bkup/ColorSelector/ColorSelector.tsx | 62 ++ src bkup/ColorSelector/index.ts | 3 + .../Component_404.component.scss | 13 + src bkup/Component_404/Component_404.test.ts | 8 + src bkup/Component_404/Component_404.tsx | 22 + src bkup/Component_404/index.ts | 3 + src bkup/Contact/Contact.component.scss | 3 + src bkup/Contact/Contact.test.ts | 8 + src bkup/Contact/Contact.tsx | 14 + src bkup/Contact/index.ts | 3 + src bkup/Content/Content.component.scss | 3 + src bkup/Content/Content.test.ts | 6 + src bkup/Content/Content.tsx | 18 + src bkup/Content/index.ts | 3 + .../ContextMenu/ContextMenu.component.scss | 3 + src bkup/ContextMenu/ContextMenu.test.ts | 8 + src bkup/ContextMenu/ContextMenu.tsx | 69 ++ src bkup/ContextMenu/index.ts | 3 + src bkup/Cookies/Cookies.component.scss | 3 + src bkup/Cookies/Cookies.test.ts | 8 + src bkup/Cookies/Cookies.tsx | 14 + src bkup/Cookies/index.ts | 3 + src bkup/CronTab/CronTab.component.scss | 55 ++ src bkup/CronTab/CronTab.test.ts | 8 + src bkup/CronTab/CronTab.tsx | 94 ++ src bkup/CronTab/index.ts | 3 + src bkup/Cta/Cta.component.scss | 3 + src bkup/Cta/Cta.test.ts | 8 + src bkup/Cta/Cta.tsx | 14 + src bkup/Cta/index.ts | 3 + src bkup/Dashboard/Dashboard.component.scss | 3 + src bkup/Dashboard/Dashboard.test.ts | 8 + src bkup/Dashboard/Dashboard.tsx | 14 + src bkup/Dashboard/index.ts | 3 + src bkup/DateInput/DateInput.component.scss | 16 + src bkup/DateInput/DateInput.test.ts | 8 + src bkup/DateInput/DateInput.tsx | 51 + src bkup/DateInput/index.ts | 3 + .../DetailsPanel/DetailsPanel.component.scss | 3 + src bkup/DetailsPanel/DetailsPanel.test.ts | 8 + src bkup/DetailsPanel/DetailsPanel.tsx | 8 + src bkup/DetailsPanel/index.ts | 3 + src bkup/Dialog/Dialog.component.scss | 3 + src bkup/Dialog/Dialog.test.ts | 8 + src bkup/Dialog/Dialog.tsx | 8 + src bkup/Dialog/index.ts | 3 + src bkup/Download/Download.component.scss | 3 + src bkup/Download/Download.test.ts | 8 + src bkup/Download/Download.tsx | 14 + src bkup/Download/index.ts | 3 + src bkup/Draggable/Draggable.component.scss | 3 + src bkup/Draggable/Draggable.test.ts | 8 + src bkup/Draggable/Draggable.tsx | 87 ++ src bkup/Draggable/index.ts | 3 + src bkup/Drawer/Drawer.component.scss | 38 + src bkup/Drawer/Drawer.test.ts | 8 + src bkup/Drawer/Drawer.tsx | 68 ++ src bkup/Drawer/index.ts | 3 + src bkup/Dropdown/Dropdown.component.scss | 22 + src bkup/Dropdown/Dropdown.test.ts | 6 + src bkup/Dropdown/Dropdown.tsx | 376 ++++++++ src bkup/Dropdown/index.ts | 3 + src bkup/Droppable/Droppable.component.scss | 8 + src bkup/Droppable/Droppable.test.ts | 8 + src bkup/Droppable/Droppable.tsx | 83 ++ src bkup/Droppable/index.ts | 3 + .../DroppableContainer.component.scss | 3 + .../DroppableContainer.test.ts | 8 + .../DroppableContainer/DroppableContainer.tsx | 112 +++ src bkup/DroppableContainer/index.ts | 3 + .../EcommOrders/EcommOrders.component.scss | 3 + src bkup/EcommOrders/EcommOrders.test.ts | 8 + src bkup/EcommOrders/EcommOrders.tsx | 10 + src bkup/EcommOrders/index.ts | 3 + .../EcommProducts.component.scss | 3 + src bkup/EcommProducts/EcommProducts.test.ts | 8 + src bkup/EcommProducts/EcommProducts.tsx | 10 + src bkup/EcommProducts/index.ts | 3 + src bkup/Empty/Empty.component.scss | 3 + src bkup/Empty/Empty.test.ts | 8 + src bkup/Empty/Empty.tsx | 10 + src bkup/Empty/index.ts | 3 + .../ErrorBoundary.component.scss | 18 + src bkup/ErrorBoundary/ErrorBoundary.test.ts | 8 + src bkup/ErrorBoundary/ErrorBoundary.tsx | 54 ++ src bkup/ErrorBoundary/index.ts | 3 + .../FacetedFilter.component.scss | 3 + src bkup/FacetedFilter/FacetedFilter.test.ts | 8 + src bkup/FacetedFilter/FacetedFilter.tsx | 8 + src bkup/FacetedFilter/index.ts | 3 + src bkup/Faq/Faq.component.scss | 3 + src bkup/Faq/Faq.test.ts | 8 + src bkup/Faq/Faq.tsx | 10 + src bkup/Faq/index.ts | 3 + src bkup/Features/Features.component.scss | 3 + src bkup/Features/Features.test.ts | 8 + src bkup/Features/Features.tsx | 10 + src bkup/Features/index.ts | 3 + src bkup/Filters/Filters.component.scss | 2 + src bkup/Filters/Filters.test.ts | 8 + src bkup/Filters/Filters.tsx | 184 ++++ src bkup/Filters/index.ts | 3 + src bkup/FlexTools/FlexTools.component.scss | 12 + src bkup/FlexTools/FlexTools.test.ts | 8 + src bkup/FlexTools/FlexTools.tsx | 114 +++ src bkup/FlexTools/index.ts | 3 + src bkup/Footer/Footer.component.scss | 4 + src bkup/Footer/Footer.test.ts | 8 + src bkup/Footer/Footer.tsx | 37 + src bkup/Footer/index.ts | 3 + src bkup/Form/Form.component.scss | 3 + src bkup/Form/Form.test.ts | 8 + src bkup/Form/Form.tsx | 10 + src bkup/Form/index.ts | 3 + src bkup/Gallery/Gallery.component.scss | 3 + src bkup/Gallery/Gallery.test.ts | 8 + src bkup/Gallery/Gallery.tsx | 10 + src bkup/Gallery/index.ts | 3 + src bkup/Graph/Graph.component.scss | 3 + src bkup/Graph/Graph.test.ts | 8 + src bkup/Graph/Graph.tsx | 10 + src bkup/Graph/index.ts | 3 + src bkup/GraphTiles/GraphTiles.component.scss | 3 + src bkup/GraphTiles/GraphTiles.test.ts | 8 + src bkup/GraphTiles/GraphTiles.tsx | 10 + src bkup/GraphTiles/index.ts | 3 + src bkup/Header/Header.component.scss | 3 + src bkup/Header/Header.test.ts | 8 + src bkup/Header/Header.tsx | 50 + src bkup/Header/index.ts | 3 + src bkup/Hero/Hero.component.scss | 3 + src bkup/Hero/Hero.test.ts | 8 + src bkup/Hero/Hero.tsx | 40 + src bkup/Hero/index.ts | 3 + src bkup/HowItWorks/HowItWorks.component.scss | 3 + src bkup/HowItWorks/HowItWorks.test.ts | 8 + src bkup/HowItWorks/HowItWorks.tsx | 10 + src bkup/HowItWorks/index.ts | 3 + src bkup/HttpCode/HttpCode.component.scss | 3 + src bkup/HttpCode/HttpCode.test.ts | 8 + src bkup/HttpCode/HttpCode.tsx | 10 + src bkup/HttpCode/index.ts | 3 + src bkup/Image/Image.component.scss | 9 + src bkup/Image/Image.test.ts | 8 + src bkup/Image/Image.tsx | 112 +++ src bkup/Image/index.ts | 3 + src bkup/InlineMenu/InlineMenu.component.scss | 27 + src bkup/InlineMenu/InlineMenu.test.ts | 8 + src bkup/InlineMenu/InlineMenu.tsx | 50 + src bkup/InlineMenu/index.ts | 3 + .../InstaPhotos/InstaPhotos.component.scss | 3 + src bkup/InstaPhotos/InstaPhotos.test.ts | 8 + src bkup/InstaPhotos/InstaPhotos.tsx | 10 + src bkup/InstaPhotos/index.ts | 3 + .../Integrations/Integrations.component.scss | 3 + src bkup/Integrations/Integrations.test.ts | 8 + src bkup/Integrations/Integrations.tsx | 10 + src bkup/Integrations/index.ts | 3 + src bkup/Label/Label.component.scss | 3 + src bkup/Label/Label.test.ts | 8 + src bkup/Label/Label.tsx | 17 + src bkup/Label/index.ts | 3 + src bkup/LabelValue/LabelValue.component.scss | 6 + src bkup/LabelValue/LabelValue.test.ts | 8 + src bkup/LabelValue/LabelValue.tsx | 39 + src bkup/LabelValue/index.ts | 3 + .../LayoutGenerator.component.scss | 7 + .../LayoutGenerator/LayoutGenerator.test.ts | 8 + src bkup/LayoutGenerator/LayoutGenerator.tsx | 323 +++++++ src bkup/LayoutGenerator/index.ts | 3 + src bkup/LearnLink/LearnLink.component.scss | 3 + src bkup/LearnLink/LearnLink.test.ts | 8 + src bkup/LearnLink/LearnLink.tsx | 8 + src bkup/LearnLink/index.ts | 3 + src bkup/Link/Link.component.scss | 3 + src bkup/Link/Link.test.ts | 8 + src bkup/Link/Link.tsx | 41 + src bkup/Link/index.ts | 3 + src bkup/List/List.component.scss | 61 ++ src bkup/List/List.test.ts | 8 + src bkup/List/List.tsx | 101 ++ src bkup/List/index.ts | 3 + src bkup/Loader/Loader.component.scss | 122 +++ src bkup/Loader/Loader.test.ts | 8 + src bkup/Loader/Loader.tsx | 96 ++ src bkup/Loader/index.ts | 3 + .../LoginProvider.component.scss | 3 + src bkup/LoginProvider/LoginProvider.test.ts | 6 + src bkup/LoginProvider/LoginProvider.tsx | 28 + src bkup/LoginProvider/index.ts | 3 + src bkup/LogoClouds/LogoClouds.component.scss | 3 + src bkup/LogoClouds/LogoClouds.test.ts | 8 + src bkup/LogoClouds/LogoClouds.tsx | 10 + src bkup/LogoClouds/index.ts | 3 + src bkup/Main/Main.component.scss | 25 + src bkup/Main/Main.test.ts | 5 + src bkup/Main/Main.tsx | 53 + src bkup/Main/index.ts | 1 + src bkup/Mask/Mask.component.scss | 3 + src bkup/Mask/Mask.test.ts | 8 + src bkup/Mask/Mask.tsx | 8 + src bkup/Mask/index.ts | 3 + src bkup/Modal/Modal.component.scss | 78 ++ src bkup/Modal/Modal.test.ts | 8 + src bkup/Modal/Modal.tsx | 193 ++++ src bkup/Modal/index.ts | 3 + src bkup/Newsletter/Newsletter.component.scss | 3 + src bkup/Newsletter/Newsletter.test.ts | 8 + src bkup/Newsletter/Newsletter.tsx | 10 + src bkup/Newsletter/index.ts | 3 + .../Notification/Notification.component.scss | 3 + src bkup/Notification/Notification.test.ts | 8 + src bkup/Notification/Notification.tsx | 8 + src bkup/Notification/index.ts | 3 + .../Notifications.component.scss | 3 + src bkup/Notifications/Notifications.test.ts | 8 + src bkup/Notifications/Notifications.tsx | 10 + src bkup/Notifications/index.ts | 3 + .../NumericStepper.component.scss | 3 + .../NumericStepper/NumericStepper.test.ts | 8 + src bkup/NumericStepper/NumericStepper.tsx | 8 + src bkup/NumericStepper/index.ts | 3 + src bkup/Pagination/Pagination.component.scss | 3 + src bkup/Pagination/Pagination.test.ts | 8 + src bkup/Pagination/Pagination.tsx | 147 +++ src bkup/Pagination/index.ts | 3 + src bkup/Password/Password.component.scss | 3 + src bkup/Password/Password.test.ts | 8 + src bkup/Password/Password.tsx | 12 + src bkup/Password/index.ts | 3 + .../PickerRange/PickerRange.component.scss | 3 + src bkup/PickerRange/PickerRange.test.ts | 8 + src bkup/PickerRange/PickerRange.tsx | 8 + src bkup/PickerRange/index.ts | 3 + src bkup/Picklist/Picklist.component.scss | 3 + src bkup/Picklist/Picklist.test.ts | 8 + src bkup/Picklist/Picklist.tsx | 8 + src bkup/Picklist/index.ts | 3 + src bkup/Pill/Pill.component.scss | 17 + src bkup/Pill/Pill.test.ts | 8 + src bkup/Pill/Pill.tsx | 31 + src bkup/Pill/index.ts | 3 + src bkup/Pillbox/Pillbox.component.scss | 3 + src bkup/Pillbox/Pillbox.test.ts | 8 + src bkup/Pillbox/Pillbox.tsx | 45 + src bkup/Pillbox/index.ts | 3 + src bkup/Popover/Popover.component.scss | 3 + src bkup/Popover/Popover.test.ts | 5 + src bkup/Popover/Popover.tsx | 17 + src bkup/Popover/PopoverV1.component.scss | 57 ++ src bkup/Popover/PopoverV1.tsx | 241 +++++ src bkup/Popover/PopoverV2.component.scss | 85 ++ src bkup/Popover/PopoverV2.tsx | 316 ++++++ src bkup/Popover/index.ts | 3 + src bkup/Portal/Portal.component.scss | 4 + src bkup/Portal/Portal.test.ts | 8 + src bkup/Portal/Portal.tsx | 49 + src bkup/Portal/index.ts | 3 + src bkup/Portfolio/Portfolio.component.scss | 3 + src bkup/Portfolio/Portfolio.test.ts | 8 + src bkup/Portfolio/Portfolio.tsx | 10 + src bkup/Portfolio/index.ts | 3 + src bkup/Pricing/Pricing.component.scss | 3 + src bkup/Pricing/Pricing.test.ts | 8 + src bkup/Pricing/Pricing.tsx | 10 + src bkup/Pricing/index.ts | 3 + .../ProductDescriptionTile.component.scss | 3 + .../ProductDescriptionTile.test.ts | 8 + .../ProductDescriptionTile.tsx | 45 + src bkup/ProductDescriptionTile/index.ts | 3 + .../ProductInfo/ProductInfo.component.scss | 3 + src bkup/ProductInfo/ProductInfo.test.ts | 8 + src bkup/ProductInfo/ProductInfo.tsx | 10 + src bkup/ProductInfo/index.ts | 3 + .../ProgressIndicator.component.scss | 52 + .../ProgressIndicator.test.ts | 8 + .../ProgressIndicator/ProgressIndicator.tsx | 111 +++ src bkup/ProgressIndicator/index.ts | 3 + .../ProgressStepper.component.scss | 3 + .../ProgressStepper/ProgressStepper.test.ts | 8 + src bkup/ProgressStepper/ProgressStepper.tsx | 8 + src bkup/ProgressStepper/index.ts | 3 + .../ProgressiveBarChart.component.scss | 3 + .../ProgressiveBarChart.test.ts | 8 + .../ProgressiveBarChart.tsx | 141 +++ src bkup/ProgressiveBarChart/index.ts | 3 + src bkup/Projects/Projects.component.scss | 3 + src bkup/Projects/Projects.test.ts | 8 + src bkup/Projects/Projects.tsx | 10 + src bkup/Projects/index.ts | 3 + src bkup/Radio/Radio.component.scss | 3 + src bkup/Radio/Radio.test.ts | 8 + src bkup/Radio/Radio.tsx | 8 + src bkup/Radio/index.ts | 3 + .../RepeatRenderer.component.scss | 3 + .../RepeatRenderer/RepeatRenderer.test.ts | 8 + src bkup/RepeatRenderer/RepeatRenderer.tsx | 15 + src bkup/RepeatRenderer/index.ts | 3 + src bkup/Reviews/Reviews.component.scss | 3 + src bkup/Reviews/Reviews.test.ts | 8 + src bkup/Reviews/Reviews.tsx | 10 + src bkup/Reviews/index.ts | 3 + .../ScrollPagination.component.scss | 20 + .../ScrollPagination/ScrollPagination.test.ts | 6 + .../ScrollPagination/ScrollPagination.tsx | 184 ++++ src bkup/ScrollPagination/index.ts | 3 + .../SearchField/SearchField.component.scss | 51 + src bkup/SearchField/SearchField.test.ts | 8 + src bkup/SearchField/SearchField.tsx | 116 +++ src bkup/SearchField/index.ts | 3 + .../SecondaryNavigation.component.scss | 3 + .../SecondaryNavigation.test.ts | 8 + .../SecondaryNavigation.tsx | 12 + src bkup/SecondaryNavigation/index.ts | 3 + src bkup/SegmentedControl/Segment.tsx | 66 ++ .../SegmentedControl.component.scss | 29 + .../SegmentedControl/SegmentedControl.test.ts | 8 + .../SegmentedControl/SegmentedControl.tsx | 91 ++ src bkup/SegmentedControl/index.ts | 3 + src bkup/Select/Select.component.scss | 14 + src bkup/Select/Select.test.ts | 8 + src bkup/Select/Select.tsx | 93 ++ src bkup/Select/index.ts | 3 + .../SelectionPill.component.scss | 32 + src bkup/SelectionPill/SelectionPill.test.ts | 8 + src bkup/SelectionPill/SelectionPill.tsx | 30 + src bkup/SelectionPill/index.ts | 3 + src bkup/Services/Services.component.scss | 3 + src bkup/Services/Services.test.ts | 8 + src bkup/Services/Services.tsx | 10 + src bkup/Services/index.ts | 3 + src bkup/SidePanel/SidePanel.component.scss | 22 + src bkup/SidePanel/SidePanel.test.ts | 6 + src bkup/SidePanel/SidePanel.tsx | 72 ++ src bkup/SidePanel/index.ts | 3 + src bkup/SignInUp/SignInUp.component.scss | 3 + src bkup/SignInUp/SignInUp.test.ts | 8 + src bkup/SignInUp/SignInUp.tsx | 10 + src bkup/SignInUp/index.ts | 3 + src bkup/Slider/Slider.component.scss | 88 ++ src bkup/Slider/Slider.test.ts | 8 + src bkup/Slider/Slider.tsx | 122 +++ src bkup/Slider/index.ts | 3 + src bkup/Snackbar/Snackbar.component.scss | 3 + src bkup/Snackbar/Snackbar.test.ts | 8 + src bkup/Snackbar/Snackbar.tsx | 10 + src bkup/Snackbar/index.ts | 3 + src bkup/Splitter/Splitter.component.scss | 3 + src bkup/Splitter/Splitter.test.ts | 8 + src bkup/Splitter/Splitter.tsx | 8 + src bkup/Splitter/index.ts | 3 + src bkup/Stats/Stats.component.scss | 3 + src bkup/Stats/Stats.test.ts | 8 + src bkup/Stats/Stats.tsx | 10 + src bkup/Stats/index.ts | 3 + src bkup/Steps/Steps.component.scss | 3 + src bkup/Steps/Steps.test.ts | 8 + src bkup/Steps/Steps.tsx | 10 + src bkup/Steps/index.ts | 3 + .../StuffleIamProvider.component.scss | 3 + .../StuffleIamProvider.test.ts | 8 + .../StuffleIamProvider/StuffleIamProvider.tsx | 20 + src bkup/StuffleIamProvider/index.ts | 3 + .../Suggestions/Suggestions.component.scss | 72 ++ src bkup/Suggestions/Suggestions.test.ts | 8 + src bkup/Suggestions/Suggestions.tsx | 111 +++ src bkup/Suggestions/index.ts | 3 + src bkup/Swiper/Swiper.component.scss | 3 + src bkup/Swiper/Swiper.test.ts | 8 + src bkup/Swiper/Swiper.tsx | 229 +++++ src bkup/Swiper/index.ts | 3 + src bkup/TabBar/TabBar.component.scss | 62 ++ src bkup/TabBar/TabBar.test.ts | 8 + src bkup/TabBar/TabBar.tsx | 172 ++++ src bkup/TabBar/index.ts | 3 + src bkup/Table/Table.component.scss | 12 + src bkup/Table/Table.test.ts | 8 + src bkup/Table/Table.tsx | 172 ++++ src bkup/Table/index.ts | 3 + src bkup/Tag/Tag.component.scss | 3 + src bkup/Tag/Tag.test.ts | 8 + src bkup/Tag/Tag.tsx | 8 + src bkup/Tag/index.ts | 3 + src bkup/Tags/Tags.component.scss | 5 + src bkup/Tags/Tags.test.ts | 8 + src bkup/Tags/Tags.tsx | 50 + .../Testimonials/Testimonials.component.scss | 3 + .../Tags/Testimonials/Testimonials.test.ts | 8 + src bkup/Tags/Testimonials/Testimonials.tsx | 14 + src bkup/Tags/Testimonials/index.ts | 3 + src bkup/Tags/index.ts | 3 + src bkup/Team/Team.component.scss | 3 + src bkup/Team/Team.test.ts | 8 + src bkup/Team/Team.tsx | 10 + src bkup/Team/index.ts | 3 + src bkup/Text/Chunk.tsx | 69 ++ src bkup/Text/Text.component.scss | 38 + src bkup/Text/Text.test.ts | 159 +++ src bkup/Text/Text.tsx | 214 +++++ src bkup/Text/index.ts | 3 + src bkup/TextArea/TextArea.component.scss | 33 + src bkup/TextArea/TextArea.test.ts | 8 + src bkup/TextArea/TextArea.tsx | 59 ++ src bkup/TextArea/index.ts | 3 + src bkup/TextInput/TextInput.component.scss | 46 + src bkup/TextInput/TextInput.test.ts | 8 + src bkup/TextInput/TextInput.tsx | 251 +++++ src bkup/TextInput/index.ts | 3 + src bkup/Tiles/Tiles.component.scss | 3 + src bkup/Tiles/Tiles.test.ts | 6 + src bkup/Tiles/Tiles.tsx | 28 + src bkup/Tiles/index.ts | 3 + src bkup/TimeEntry/TimeEntry.component.scss | 5 + src bkup/TimeEntry/TimeEntry.test.ts | 8 + src bkup/TimeEntry/TimeEntry.tsx | 107 +++ src bkup/TimeEntry/index.ts | 3 + src bkup/Toast/Toast.component.scss | 3 + src bkup/Toast/Toast.test.ts | 8 + src bkup/Toast/Toast.tsx | 10 + src bkup/Toast/index.ts | 3 + src bkup/Toggle/Toggle.component.scss | 96 ++ src bkup/Toggle/Toggle.test.ts | 8 + src bkup/Toggle/Toggle.tsx | 79 ++ src bkup/Toggle/index.ts | 3 + src bkup/Toolbar/Toolbar.component.scss | 3 + src bkup/Toolbar/Toolbar.test.ts | 8 + src bkup/Toolbar/Toolbar.tsx | 8 + src bkup/Toolbar/index.ts | 3 + src bkup/Tooltip/Tooltip.component.scss | 3 + src bkup/Tooltip/Tooltip.test.ts | 8 + src bkup/Tooltip/Tooltip.tsx | 36 + src bkup/Tooltip/index.ts | 3 + .../TransferShuttle.component.scss | 7 + .../TransferShuttle/TransferShuttle.test.ts | 8 + src bkup/TransferShuttle/TransferShuttle.tsx | 245 +++++ src bkup/TransferShuttle/index.ts | 3 + src bkup/TreeList/TreeList.component.scss | 46 + src bkup/TreeList/TreeList.test.ts | 8 + src bkup/TreeList/TreeList.tsx | 318 ++++++ src bkup/TreeList/index.ts | 3 + src bkup/TypeAhead/TypeAhead.component.scss | 51 + src bkup/TypeAhead/TypeAhead.test.ts | 8 + src bkup/TypeAhead/TypeAhead.tsx | 321 +++++++ src bkup/TypeAhead/index.ts | 3 + .../UserOptions/UserOptions.component.scss | 13 + src bkup/UserOptions/UserOptions.test.ts | 5 + src bkup/UserOptions/UserOptions.tsx | 154 +++ src bkup/UserOptions/index.ts | 3 + src bkup/Users/Users.component.scss | 3 + src bkup/Users/Users.test.ts | 8 + src bkup/Users/Users.tsx | 10 + src bkup/Users/index.ts | 3 + src bkup/Widget/Widget.component.scss | 6 + src bkup/Widget/Widget.test.ts | 8 + src bkup/Widget/Widget.tsx | 69 ++ src bkup/Widget/index.ts | 3 + src bkup/Wizard/Wizard.component.scss | 91 ++ src bkup/Wizard/Wizard.test.ts | 8 + src bkup/Wizard/Wizard.tsx | 295 ++++++ src bkup/Wizard/index.ts | 3 + .../WizardModal/WizardModal.component.scss | 3 + src bkup/WizardModal/WizardModal.test.ts | 8 + src bkup/WizardModal/WizardModal.tsx | 161 ++++ src bkup/WizardModal/index.ts | 3 + src bkup/index.ts | 148 +++ src bkup/static/images/ARC_logo.jpeg | Bin 0 -> 34004 bytes .../images/Stubble Component Lib Snap.png | Bin 0 -> 99261 bytes src bkup/static/images/balloon.jpg | Bin 0 -> 21763 bytes src bkup/static/images/img_colormap.gif | Bin 0 -> 7074 bytes src bkup/static/images/index.ts | 6 + src bkup/static/index.ts | 1 + src bkup/styles/_animations.scss | 165 ++++ src bkup/styles/_global.scss | 4 + src bkup/styles/_mixins.scss | 16 + src bkup/styles/_variables.scss | 153 +++ src bkup/styles/bootstrap.min.css | 6 + src bkup/styles/index.scss | 517 ++++++++++ src/AboutUs.component.scss | 3 + src/AboutUs.tsx | 8 + src/Accordion.component.scss | 32 + src/Accordion.tsx | 150 +++ src/AdvancedColorPicker.component.scss | 3 + src/AdvancedColorPicker.tsx | 123 +++ src/Alert.component.scss | 89 ++ src/Alert.tsx | 92 ++ src/AlertStackManager.component.scss | 3 + src/AlertStackManager.tsx | 13 + src/AlphabetFilter.component.scss | 3 + src/AlphabetFilter.tsx | 35 + src/Anchor.component.scss | 3 + src/Anchor.tsx | 13 + src/AppAndToolsSelector.component.scss | 24 + src/AppAndToolsSelector.tsx | 79 ++ src/Application.component.scss | 3 + src/Application.tsx | 14 + src/ArIconsViewer.component.scss | 25 + src/ArIconsViewer.tsx | 166 ++++ src/ArViz.component.scss | 3 + src/ArViz.tsx | 45 + src/ArmcoIamProvider.component.scss | 3 + src/ArmcoIamProvider.tsx | 20 + src/Badge.component.scss | 69 ++ src/Badge.tsx | 25 + src/Banner.component.scss | 3 + src/Banner.tsx | 14 + src/Benefits.component.scss | 3 + src/Benefits.tsx | 14 + src/Blog.component.scss | 3 + src/Blog.tsx | 14 + src/Brands.component.scss | 3 + src/Brands.tsx | 14 + src/Breadcrumb.component.scss | 5 + src/Breadcrumb.tsx | 55 ++ src/Breadcrumbs.component.scss | 3 + src/Breadcrumbs.tsx | 14 + src/BrowserIncompatibility.component.scss | 16 + src/BrowserIncompatibility.tsx | 62 ++ src/BubbleChart.component.scss | 3 + src/BubbleChart.tsx | 99 ++ src/BubbleViz.component.scss | 3 + src/BubbleViz.tsx | 10 + src/Button.component.scss | 235 +++++ src/Button.tsx | 173 ++++ src/Card.component.scss | 4 + src/Card.tsx | 20 + src/Careers.component.scss | 3 + src/Careers.tsx | 14 + src/Carousel.component.scss | 3 + src/Carousel.tsx | 907 ++++++++++++++++++ src/CategoryFilter.component.scss | 3 + src/CategoryFilter.tsx | 80 ++ src/Checkbox.component.scss | 5 + src/Checkbox.tsx | 33 + src/Chunk.tsx | 69 ++ src/ColorPicker.component.scss | 14 + src/ColorPicker.tsx | 34 + src/ColorPickerConfig.ts | 221 +++++ src/ColorSelector.component.scss | 38 + src/ColorSelector.tsx | 62 ++ src/Component_404.component.scss | 13 + src/Component_404.tsx | 22 + src/Contact.component.scss | 3 + src/Contact.tsx | 14 + src/Content.component.scss | 3 + src/Content.tsx | 18 + src/ContextMenu.component.scss | 3 + src/ContextMenu.tsx | 69 ++ src/Cookies.component.scss | 3 + src/Cookies.tsx | 14 + src/CronTab.component.scss | 55 ++ src/CronTab.tsx | 94 ++ src/Cta.component.scss | 3 + src/Cta.tsx | 14 + src/Dashboard.component.scss | 3 + src/Dashboard.tsx | 14 + src/DateInput.component.scss | 16 + src/DateInput.tsx | 51 + src/DetailsPanel.component.scss | 3 + src/DetailsPanel.tsx | 8 + src/Dialog.component.scss | 3 + src/Dialog.tsx | 8 + src/Download.component.scss | 3 + src/Download.tsx | 14 + src/Draggable.component.scss | 3 + src/Draggable.tsx | 87 ++ src/Drawer.component.scss | 38 + src/Drawer.tsx | 68 ++ src/Dropdown.component.scss | 22 + src/Dropdown.tsx | 376 ++++++++ src/Droppable.component.scss | 8 + src/Droppable.tsx | 83 ++ src/DroppableContainer.component.scss | 3 + src/DroppableContainer.tsx | 112 +++ src/EcommOrders.component.scss | 3 + src/EcommOrders.tsx | 10 + src/EcommProducts.component.scss | 3 + src/EcommProducts.tsx | 10 + src/Empty.component.scss | 3 + src/Empty.tsx | 10 + src/ErrorBoundary.component.scss | 18 + src/ErrorBoundary.tsx | 54 ++ src/FacetedFilter.component.scss | 3 + src/FacetedFilter.tsx | 8 + src/Faq.component.scss | 3 + src/Faq.tsx | 10 + src/Features.component.scss | 3 + src/Features.tsx | 10 + src/Filters.component.scss | 2 + src/Filters.tsx | 184 ++++ src/FlexTools.component.scss | 12 + src/FlexTools.tsx | 114 +++ src/Footer.component.scss | 4 + src/Footer.tsx | 37 + src/Form.component.scss | 3 + src/Form.tsx | 10 + src/Gallery.component.scss | 3 + src/Gallery.tsx | 10 + src/Graph.component.scss | 3 + src/Graph.tsx | 10 + src/GraphTiles.component.scss | 3 + src/GraphTiles.tsx | 10 + src/Header.component.scss | 3 + src/Header.tsx | 50 + src/Hero.component.scss | 3 + src/Hero.tsx | 40 + src/HowItWorks.component.scss | 3 + src/HowItWorks.tsx | 10 + src/HttpCode.component.scss | 3 + src/HttpCode.tsx | 10 + src/Image.component.scss | 9 + src/Image.tsx | 112 +++ src/InlineMenu.component.scss | 28 + src/InlineMenu.tsx | 50 + src/InstaPhotos.component.scss | 3 + src/InstaPhotos.tsx | 10 + src/Integrations.component.scss | 3 + src/Integrations.tsx | 10 + src/Label.component.scss | 3 + src/Label.tsx | 17 + src/LabelValue.component.scss | 6 + src/LabelValue.tsx | 39 + src/LayoutGenerator.component.scss | 7 + src/LayoutGenerator.tsx | 323 +++++++ src/LearnLink.component.scss | 3 + src/LearnLink.tsx | 8 + src/Link.component.scss | 3 + src/Link.tsx | 41 + src/List.component.scss | 61 ++ src/List.tsx | 101 ++ src/ListItem.tsx | 159 +++ src/Loader.component.scss | 122 +++ src/Loader.tsx | 96 ++ src/LoginProvider.component.scss | 3 + src/LoginProvider.tsx | 28 + src/LogoClouds.component.scss | 3 + src/LogoClouds.tsx | 10 + src/Main.component.scss | 25 + src/Main.tsx | 53 + src/Mask.component.scss | 3 + src/Mask.tsx | 8 + src/Modal.component.scss | 79 ++ src/Modal.tsx | 193 ++++ src/Newsletter.component.scss | 3 + src/Newsletter.tsx | 10 + src/Notification.component.scss | 3 + src/Notification.tsx | 8 + src/Notifications.component.scss | 3 + src/Notifications.tsx | 10 + src/NumericStepper.component.scss | 3 + src/NumericStepper.tsx | 8 + src/Pagination.component.scss | 3 + src/Pagination.tsx | 147 +++ src/Password.component.scss | 3 + src/Password.tsx | 12 + src/PickerRange.component.scss | 3 + src/PickerRange.tsx | 8 + src/Picklist.component.scss | 3 + src/Picklist.tsx | 8 + src/Pill.component.scss | 18 + src/Pill.tsx | 31 + src/Pillbox.component.scss | 3 + src/Pillbox.tsx | 45 + src/Popover.component.scss | 3 + src/Popover.tsx | 17 + src/PopoverV1.component.scss | 57 ++ src/PopoverV1.tsx | 241 +++++ src/PopoverV2.component.scss | 85 ++ src/PopoverV2.tsx | 316 ++++++ src/Portal.component.scss | 4 + src/Portal.tsx | 49 + src/Portfolio.component.scss | 3 + src/Portfolio.tsx | 10 + src/Pricing.component.scss | 3 + src/Pricing.tsx | 10 + src/ProductDescriptionTile.component.scss | 3 + src/ProductDescriptionTile.tsx | 45 + src/ProductInfo.component.scss | 3 + src/ProductInfo.tsx | 10 + src/ProgressIndicator.component.scss | 52 + src/ProgressIndicator.tsx | 111 +++ src/ProgressStepper.component.scss | 3 + src/ProgressStepper.tsx | 8 + src/ProgressiveBarChart.component.scss | 3 + src/ProgressiveBarChart.tsx | 141 +++ src/Projects.component.scss | 3 + src/Projects.tsx | 10 + src/Radio.component.scss | 3 + src/Radio.tsx | 8 + src/RepeatRenderer.component.scss | 3 + src/RepeatRenderer.tsx | 15 + src/Reviews.component.scss | 3 + src/Reviews.tsx | 10 + src/ScrollPagination.component.scss | 20 + src/ScrollPagination.tsx | 184 ++++ src/SearchField.component.scss | 51 + src/SearchField.tsx | 116 +++ src/SecondaryNavigation.component.scss | 3 + src/SecondaryNavigation.tsx | 12 + src/Segment.tsx | 67 ++ src/SegmentedControl.component.scss | 29 + src/SegmentedControl.tsx | 91 ++ src/Select.component.scss | 14 + src/Select.tsx | 93 ++ src/SelectionPill.component.scss | 32 + src/SelectionPill.tsx | 30 + src/Services.component.scss | 3 + src/Services.tsx | 10 + src/SidePanel.component.scss | 22 + src/SidePanel.tsx | 72 ++ src/SignInUp.component.scss | 3 + src/SignInUp.tsx | 10 + src/Slider.component.scss | 88 ++ src/Slider.tsx | 122 +++ src/Snackbar.component.scss | 3 + src/Snackbar.tsx | 10 + src/Splitter.component.scss | 3 + src/Splitter.tsx | 8 + src/Stats.component.scss | 3 + src/Stats.tsx | 10 + src/Steps.component.scss | 3 + src/Steps.tsx | 10 + src/StuffleIamProvider.component.scss | 3 + src/StuffleIamProvider.tsx | 20 + src/Suggestions.component.scss | 72 ++ src/Suggestions.tsx | 111 +++ src/Swiper.component.scss | 3 + src/Swiper.tsx | 229 +++++ src/Tab.tsx | 98 ++ src/TabBar.component.scss | 62 ++ src/TabBar.tsx | 171 ++++ src/Table.component.scss | 12 + src/Table.tsx | 172 ++++ src/Tag.component.scss | 3 + src/Tag.tsx | 8 + src/Tags.component.scss | 5 + src/Tags.tsx | 50 + src/Team.component.scss | 3 + src/Team.tsx | 10 + src/Testimonials.component.scss | 3 + src/Testimonials.tsx | 14 + src/Text.component.scss | 38 + src/Text.tsx | 214 +++++ src/TextArea.component.scss | 33 + src/TextArea.tsx | 59 ++ src/TextInput.component.scss | 46 + src/TextInput.tsx | 251 +++++ src/Thumbs.tsx | 378 ++++++++ src/Tiles.component.scss | 3 + src/Tiles.tsx | 28 + src/TimeEntry.component.scss | 5 + src/TimeEntry.tsx | 107 +++ src/Toast.component.scss | 3 + src/Toast.tsx | 10 + src/Toggle.component.scss | 96 ++ src/Toggle.tsx | 79 ++ src/Toolbar.component.scss | 3 + src/Toolbar.tsx | 8 + src/Tooltip.component.scss | 3 + src/Tooltip.tsx | 36 + src/TransferShuttle.component.scss | 7 + src/TransferShuttle.tsx | 245 +++++ src/TreeList.component.scss | 46 + src/TreeList.tsx | 318 ++++++ src/TypeAhead.component.scss | 51 + src/TypeAhead.tsx | 321 +++++++ src/UserOptions.component.scss | 13 + src/UserOptions.tsx | 154 +++ src/Users.component.scss | 3 + src/Users.tsx | 10 + src/Widget.component.scss | 6 + src/Widget.tsx | 69 ++ src/Wizard.component.scss | 91 ++ src/Wizard.tsx | 295 ++++++ src/WizardModal.component.scss | 3 + src/WizardModal.tsx | 161 ++++ src/animations.ts | 216 +++++ src/cssClasses.ts | 58 ++ src/index.ts | 151 +++ src/static/ARC_logo.jpeg | Bin 0 -> 34004 bytes src/static/Stubble Component Lib Snap.png | Bin 0 -> 99261 bytes src/static/img_colormap.gif | Bin 0 -> 7074 bytes src/static/index.ts | 5 + src/styles/_animations.scss | 165 ++++ src/styles/_global.scss | 517 ++++++++++ src/styles/_mixins.scss | 16 + src/styles/_variables.scss | 153 +++ src/styles/index.scss | 5 + tsconfig.cjs.build.json | 12 + tsconfig.es.build.json | 11 + tsconfig.json | 4 + vite-css.config.ts | 21 + vite.config.ts | 44 + 936 files changed, 32906 insertions(+) create mode 100644 .gitignore create mode 100644 Dockerfile create mode 100644 LICENSE create mode 100755 build-tools/build.sh create mode 100644 build-tools/fix-styles.js create mode 100644 build-tools/generate-module.js create mode 100644 build-tools/post-processor.js create mode 100755 copy_files.sh create mode 100644 package.json create mode 100755 plop-templates/Component/Component.component.scss.hbs create mode 100755 plop-templates/Component/Component.test.ts.hbs create mode 100755 plop-templates/Component/Component.tsx.hbs create mode 100755 plop-templates/Component/index.ts.hbs create mode 100755 plop-templates/Page/Page.page.scss.hbs create mode 100644 plop-templates/Page/Page.slice.ts.hbs create mode 100755 plop-templates/Page/Page.test.ts.hbs create mode 100755 plop-templates/Page/Page.tsx.hbs create mode 100755 plop-templates/Page/index.ts.hbs create mode 100644 plop-templates/components.interface.ts.hbs create mode 100755 plop-templates/injectable-index.ts.hbs create mode 100644 plopfile.cjs create mode 100755 publish.sh create mode 100755 src bkup/AboutUs/AboutUs.component.scss create mode 100755 src bkup/AboutUs/AboutUs.test.ts create mode 100755 src bkup/AboutUs/AboutUs.tsx create mode 100755 src bkup/AboutUs/index.ts create mode 100755 src bkup/Accordion/Accordion.component.scss create mode 100755 src bkup/Accordion/Accordion.test.ts create mode 100755 src bkup/Accordion/Accordion.tsx create mode 100755 src bkup/Accordion/index.ts create mode 100755 src bkup/AdvancedColorPicker/AdvancedColorPicker.component.scss create mode 100755 src bkup/AdvancedColorPicker/AdvancedColorPicker.test.ts create mode 100755 src bkup/AdvancedColorPicker/AdvancedColorPicker.tsx create mode 100644 src bkup/AdvancedColorPicker/ColorPickerConfig.ts create mode 100755 src bkup/AdvancedColorPicker/index.ts create mode 100755 src bkup/Alert/Alert.component.scss create mode 100755 src bkup/Alert/Alert.test.ts create mode 100755 src bkup/Alert/Alert.tsx create mode 100755 src bkup/Alert/index.ts create mode 100755 src bkup/AlertStackManager/AlertStackManager.component.scss create mode 100755 src bkup/AlertStackManager/AlertStackManager.test.ts create mode 100755 src bkup/AlertStackManager/AlertStackManager.tsx create mode 100755 src bkup/AlertStackManager/index.ts create mode 100755 src bkup/AlphabetFilter/AlphabetFilter.component.scss create mode 100755 src bkup/AlphabetFilter/AlphabetFilter.test.ts create mode 100755 src bkup/AlphabetFilter/AlphabetFilter.tsx create mode 100755 src bkup/AlphabetFilter/index.ts create mode 100755 src bkup/Anchor/Anchor.component.scss create mode 100755 src bkup/Anchor/Anchor.test.ts create mode 100755 src bkup/Anchor/Anchor.tsx create mode 100755 src bkup/Anchor/index.ts create mode 100755 src bkup/AppAndToolsSelector/AppAndToolsSelector.component.scss create mode 100755 src bkup/AppAndToolsSelector/AppAndToolsSelector.test.ts create mode 100755 src bkup/AppAndToolsSelector/AppAndToolsSelector.tsx create mode 100755 src bkup/AppAndToolsSelector/index.ts create mode 100755 src bkup/Application/Application.component.scss create mode 100755 src bkup/Application/Application.test.ts create mode 100755 src bkup/Application/Application.tsx create mode 100755 src bkup/Application/index.ts create mode 100755 src bkup/ArIconsViewer/ArIconsViewer.component.scss create mode 100755 src bkup/ArIconsViewer/ArIconsViewer.test.ts create mode 100755 src bkup/ArIconsViewer/ArIconsViewer.tsx create mode 100755 src bkup/ArIconsViewer/index.ts create mode 100755 src bkup/ArViz/ArViz.component.scss create mode 100755 src bkup/ArViz/ArViz.test.ts create mode 100755 src bkup/ArViz/ArViz.tsx create mode 100755 src bkup/ArViz/index.ts create mode 100755 src bkup/ArmcoIamProvider/ArmcoIamProvider.component.scss create mode 100755 src bkup/ArmcoIamProvider/ArmcoIamProvider.test.ts create mode 100755 src bkup/ArmcoIamProvider/ArmcoIamProvider.tsx create mode 100755 src bkup/ArmcoIamProvider/index.ts create mode 100755 src bkup/Badge/Badge.component.scss create mode 100755 src bkup/Badge/Badge.test.ts create mode 100755 src bkup/Badge/Badge.tsx create mode 100755 src bkup/Badge/index.ts create mode 100755 src bkup/Banner/Banner.component.scss create mode 100755 src bkup/Banner/Banner.test.ts create mode 100755 src bkup/Banner/Banner.tsx create mode 100755 src bkup/Banner/index.ts create mode 100755 src bkup/Benefits/Benefits.component.scss create mode 100755 src bkup/Benefits/Benefits.test.ts create mode 100755 src bkup/Benefits/Benefits.tsx create mode 100755 src bkup/Benefits/index.ts create mode 100755 src bkup/Blog/Blog.component.scss create mode 100755 src bkup/Blog/Blog.test.ts create mode 100755 src bkup/Blog/Blog.tsx create mode 100755 src bkup/Blog/index.ts create mode 100755 src bkup/Brands/Brands.component.scss create mode 100755 src bkup/Brands/Brands.test.ts create mode 100755 src bkup/Brands/Brands.tsx create mode 100755 src bkup/Brands/index.ts create mode 100755 src bkup/Breadcrumb/Breadcrumb.component.scss create mode 100755 src bkup/Breadcrumb/Breadcrumb.test.ts create mode 100755 src bkup/Breadcrumb/Breadcrumb.tsx create mode 100755 src bkup/Breadcrumb/index.ts create mode 100755 src bkup/Breadcrumbs/Breadcrumbs.component.scss create mode 100755 src bkup/Breadcrumbs/Breadcrumbs.test.ts create mode 100755 src bkup/Breadcrumbs/Breadcrumbs.tsx create mode 100755 src bkup/Breadcrumbs/index.ts create mode 100755 src bkup/BrowserIncompatibility/BrowserIncompatibility.component.scss create mode 100755 src bkup/BrowserIncompatibility/BrowserIncompatibility.test.ts create mode 100755 src bkup/BrowserIncompatibility/BrowserIncompatibility.tsx create mode 100755 src bkup/BrowserIncompatibility/index.ts create mode 100755 src bkup/BubbleChart/BubbleChart.component.scss create mode 100755 src bkup/BubbleChart/BubbleChart.test.ts create mode 100755 src bkup/BubbleChart/BubbleChart.tsx create mode 100755 src bkup/BubbleChart/index.ts create mode 100755 src bkup/BubbleViz/BubbleViz.component.scss create mode 100755 src bkup/BubbleViz/BubbleViz.test.ts create mode 100755 src bkup/BubbleViz/BubbleViz.tsx create mode 100755 src bkup/BubbleViz/index.ts create mode 100755 src bkup/Button/Button.component.scss create mode 100755 src bkup/Button/Button.test.ts create mode 100755 src bkup/Button/Button.tsx create mode 100755 src bkup/Button/index.ts create mode 100755 src bkup/Card/Card.component.scss create mode 100755 src bkup/Card/Card.test.ts create mode 100755 src bkup/Card/Card.tsx create mode 100755 src bkup/Card/index.ts create mode 100755 src bkup/Careers/Careers.component.scss create mode 100755 src bkup/Careers/Careers.test.ts create mode 100755 src bkup/Careers/Careers.tsx create mode 100755 src bkup/Careers/index.ts create mode 100755 src bkup/Carousel/Carousel.component.scss create mode 100755 src bkup/Carousel/Carousel.test.ts create mode 100755 src bkup/Carousel/Carousel.tsx create mode 100644 src bkup/Carousel/Thumbs.tsx create mode 100644 src bkup/Carousel/animations.ts create mode 100644 src bkup/Carousel/cssClasses.ts create mode 100755 src bkup/Carousel/index.ts create mode 100755 src bkup/CategoryFilter/CategoryFilter.component.scss create mode 100755 src bkup/CategoryFilter/CategoryFilter.test.ts create mode 100755 src bkup/CategoryFilter/CategoryFilter.tsx create mode 100755 src bkup/CategoryFilter/index.ts create mode 100755 src bkup/Checkbox/Checkbox.component.scss create mode 100755 src bkup/Checkbox/Checkbox.test.ts create mode 100755 src bkup/Checkbox/Checkbox.tsx create mode 100755 src bkup/Checkbox/index.ts create mode 100755 src bkup/ColorPicker/ColorPicker.component.scss create mode 100755 src bkup/ColorPicker/ColorPicker.test.ts create mode 100755 src bkup/ColorPicker/ColorPicker.tsx create mode 100755 src bkup/ColorPicker/index.ts create mode 100755 src bkup/ColorSelector/ColorSelector.component.scss create mode 100755 src bkup/ColorSelector/ColorSelector.test.ts create mode 100755 src bkup/ColorSelector/ColorSelector.tsx create mode 100755 src bkup/ColorSelector/index.ts create mode 100755 src bkup/Component_404/Component_404.component.scss create mode 100755 src bkup/Component_404/Component_404.test.ts create mode 100755 src bkup/Component_404/Component_404.tsx create mode 100755 src bkup/Component_404/index.ts create mode 100755 src bkup/Contact/Contact.component.scss create mode 100755 src bkup/Contact/Contact.test.ts create mode 100755 src bkup/Contact/Contact.tsx create mode 100755 src bkup/Contact/index.ts create mode 100755 src bkup/Content/Content.component.scss create mode 100755 src bkup/Content/Content.test.ts create mode 100755 src bkup/Content/Content.tsx create mode 100755 src bkup/Content/index.ts create mode 100755 src bkup/ContextMenu/ContextMenu.component.scss create mode 100755 src bkup/ContextMenu/ContextMenu.test.ts create mode 100755 src bkup/ContextMenu/ContextMenu.tsx create mode 100755 src bkup/ContextMenu/index.ts create mode 100755 src bkup/Cookies/Cookies.component.scss create mode 100755 src bkup/Cookies/Cookies.test.ts create mode 100755 src bkup/Cookies/Cookies.tsx create mode 100755 src bkup/Cookies/index.ts create mode 100755 src bkup/CronTab/CronTab.component.scss create mode 100755 src bkup/CronTab/CronTab.test.ts create mode 100755 src bkup/CronTab/CronTab.tsx create mode 100755 src bkup/CronTab/index.ts create mode 100755 src bkup/Cta/Cta.component.scss create mode 100755 src bkup/Cta/Cta.test.ts create mode 100755 src bkup/Cta/Cta.tsx create mode 100755 src bkup/Cta/index.ts create mode 100755 src bkup/Dashboard/Dashboard.component.scss create mode 100755 src bkup/Dashboard/Dashboard.test.ts create mode 100755 src bkup/Dashboard/Dashboard.tsx create mode 100755 src bkup/Dashboard/index.ts create mode 100755 src bkup/DateInput/DateInput.component.scss create mode 100755 src bkup/DateInput/DateInput.test.ts create mode 100755 src bkup/DateInput/DateInput.tsx create mode 100755 src bkup/DateInput/index.ts create mode 100755 src bkup/DetailsPanel/DetailsPanel.component.scss create mode 100755 src bkup/DetailsPanel/DetailsPanel.test.ts create mode 100755 src bkup/DetailsPanel/DetailsPanel.tsx create mode 100755 src bkup/DetailsPanel/index.ts create mode 100755 src bkup/Dialog/Dialog.component.scss create mode 100755 src bkup/Dialog/Dialog.test.ts create mode 100755 src bkup/Dialog/Dialog.tsx create mode 100755 src bkup/Dialog/index.ts create mode 100755 src bkup/Download/Download.component.scss create mode 100755 src bkup/Download/Download.test.ts create mode 100755 src bkup/Download/Download.tsx create mode 100755 src bkup/Download/index.ts create mode 100755 src bkup/Draggable/Draggable.component.scss create mode 100755 src bkup/Draggable/Draggable.test.ts create mode 100755 src bkup/Draggable/Draggable.tsx create mode 100755 src bkup/Draggable/index.ts create mode 100755 src bkup/Drawer/Drawer.component.scss create mode 100755 src bkup/Drawer/Drawer.test.ts create mode 100755 src bkup/Drawer/Drawer.tsx create mode 100755 src bkup/Drawer/index.ts create mode 100755 src bkup/Dropdown/Dropdown.component.scss create mode 100755 src bkup/Dropdown/Dropdown.test.ts create mode 100755 src bkup/Dropdown/Dropdown.tsx create mode 100755 src bkup/Dropdown/index.ts create mode 100755 src bkup/Droppable/Droppable.component.scss create mode 100755 src bkup/Droppable/Droppable.test.ts create mode 100755 src bkup/Droppable/Droppable.tsx create mode 100755 src bkup/Droppable/index.ts create mode 100755 src bkup/DroppableContainer/DroppableContainer.component.scss create mode 100755 src bkup/DroppableContainer/DroppableContainer.test.ts create mode 100755 src bkup/DroppableContainer/DroppableContainer.tsx create mode 100755 src bkup/DroppableContainer/index.ts create mode 100755 src bkup/EcommOrders/EcommOrders.component.scss create mode 100755 src bkup/EcommOrders/EcommOrders.test.ts create mode 100755 src bkup/EcommOrders/EcommOrders.tsx create mode 100755 src bkup/EcommOrders/index.ts create mode 100755 src bkup/EcommProducts/EcommProducts.component.scss create mode 100755 src bkup/EcommProducts/EcommProducts.test.ts create mode 100755 src bkup/EcommProducts/EcommProducts.tsx create mode 100755 src bkup/EcommProducts/index.ts create mode 100755 src bkup/Empty/Empty.component.scss create mode 100755 src bkup/Empty/Empty.test.ts create mode 100755 src bkup/Empty/Empty.tsx create mode 100755 src bkup/Empty/index.ts create mode 100755 src bkup/ErrorBoundary/ErrorBoundary.component.scss create mode 100755 src bkup/ErrorBoundary/ErrorBoundary.test.ts create mode 100755 src bkup/ErrorBoundary/ErrorBoundary.tsx create mode 100755 src bkup/ErrorBoundary/index.ts create mode 100755 src bkup/FacetedFilter/FacetedFilter.component.scss create mode 100755 src bkup/FacetedFilter/FacetedFilter.test.ts create mode 100755 src bkup/FacetedFilter/FacetedFilter.tsx create mode 100755 src bkup/FacetedFilter/index.ts create mode 100755 src bkup/Faq/Faq.component.scss create mode 100755 src bkup/Faq/Faq.test.ts create mode 100755 src bkup/Faq/Faq.tsx create mode 100755 src bkup/Faq/index.ts create mode 100755 src bkup/Features/Features.component.scss create mode 100755 src bkup/Features/Features.test.ts create mode 100755 src bkup/Features/Features.tsx create mode 100755 src bkup/Features/index.ts create mode 100755 src bkup/Filters/Filters.component.scss create mode 100755 src bkup/Filters/Filters.test.ts create mode 100755 src bkup/Filters/Filters.tsx create mode 100755 src bkup/Filters/index.ts create mode 100755 src bkup/FlexTools/FlexTools.component.scss create mode 100755 src bkup/FlexTools/FlexTools.test.ts create mode 100755 src bkup/FlexTools/FlexTools.tsx create mode 100755 src bkup/FlexTools/index.ts create mode 100755 src bkup/Footer/Footer.component.scss create mode 100755 src bkup/Footer/Footer.test.ts create mode 100755 src bkup/Footer/Footer.tsx create mode 100755 src bkup/Footer/index.ts create mode 100755 src bkup/Form/Form.component.scss create mode 100755 src bkup/Form/Form.test.ts create mode 100755 src bkup/Form/Form.tsx create mode 100755 src bkup/Form/index.ts create mode 100755 src bkup/Gallery/Gallery.component.scss create mode 100755 src bkup/Gallery/Gallery.test.ts create mode 100755 src bkup/Gallery/Gallery.tsx create mode 100755 src bkup/Gallery/index.ts create mode 100755 src bkup/Graph/Graph.component.scss create mode 100755 src bkup/Graph/Graph.test.ts create mode 100755 src bkup/Graph/Graph.tsx create mode 100755 src bkup/Graph/index.ts create mode 100755 src bkup/GraphTiles/GraphTiles.component.scss create mode 100755 src bkup/GraphTiles/GraphTiles.test.ts create mode 100755 src bkup/GraphTiles/GraphTiles.tsx create mode 100755 src bkup/GraphTiles/index.ts create mode 100755 src bkup/Header/Header.component.scss create mode 100755 src bkup/Header/Header.test.ts create mode 100755 src bkup/Header/Header.tsx create mode 100755 src bkup/Header/index.ts create mode 100755 src bkup/Hero/Hero.component.scss create mode 100755 src bkup/Hero/Hero.test.ts create mode 100755 src bkup/Hero/Hero.tsx create mode 100755 src bkup/Hero/index.ts create mode 100755 src bkup/HowItWorks/HowItWorks.component.scss create mode 100755 src bkup/HowItWorks/HowItWorks.test.ts create mode 100755 src bkup/HowItWorks/HowItWorks.tsx create mode 100755 src bkup/HowItWorks/index.ts create mode 100755 src bkup/HttpCode/HttpCode.component.scss create mode 100755 src bkup/HttpCode/HttpCode.test.ts create mode 100755 src bkup/HttpCode/HttpCode.tsx create mode 100755 src bkup/HttpCode/index.ts create mode 100755 src bkup/Image/Image.component.scss create mode 100755 src bkup/Image/Image.test.ts create mode 100755 src bkup/Image/Image.tsx create mode 100755 src bkup/Image/index.ts create mode 100755 src bkup/InlineMenu/InlineMenu.component.scss create mode 100755 src bkup/InlineMenu/InlineMenu.test.ts create mode 100755 src bkup/InlineMenu/InlineMenu.tsx create mode 100755 src bkup/InlineMenu/index.ts create mode 100755 src bkup/InstaPhotos/InstaPhotos.component.scss create mode 100755 src bkup/InstaPhotos/InstaPhotos.test.ts create mode 100755 src bkup/InstaPhotos/InstaPhotos.tsx create mode 100755 src bkup/InstaPhotos/index.ts create mode 100755 src bkup/Integrations/Integrations.component.scss create mode 100755 src bkup/Integrations/Integrations.test.ts create mode 100755 src bkup/Integrations/Integrations.tsx create mode 100755 src bkup/Integrations/index.ts create mode 100755 src bkup/Label/Label.component.scss create mode 100755 src bkup/Label/Label.test.ts create mode 100755 src bkup/Label/Label.tsx create mode 100755 src bkup/Label/index.ts create mode 100755 src bkup/LabelValue/LabelValue.component.scss create mode 100755 src bkup/LabelValue/LabelValue.test.ts create mode 100755 src bkup/LabelValue/LabelValue.tsx create mode 100755 src bkup/LabelValue/index.ts create mode 100755 src bkup/LayoutGenerator/LayoutGenerator.component.scss create mode 100755 src bkup/LayoutGenerator/LayoutGenerator.test.ts create mode 100644 src bkup/LayoutGenerator/LayoutGenerator.tsx create mode 100755 src bkup/LayoutGenerator/index.ts create mode 100755 src bkup/LearnLink/LearnLink.component.scss create mode 100755 src bkup/LearnLink/LearnLink.test.ts create mode 100755 src bkup/LearnLink/LearnLink.tsx create mode 100755 src bkup/LearnLink/index.ts create mode 100755 src bkup/Link/Link.component.scss create mode 100755 src bkup/Link/Link.test.ts create mode 100755 src bkup/Link/Link.tsx create mode 100755 src bkup/Link/index.ts create mode 100755 src bkup/List/List.component.scss create mode 100755 src bkup/List/List.test.ts create mode 100755 src bkup/List/List.tsx create mode 100755 src bkup/List/index.ts create mode 100755 src bkup/Loader/Loader.component.scss create mode 100755 src bkup/Loader/Loader.test.ts create mode 100755 src bkup/Loader/Loader.tsx create mode 100755 src bkup/Loader/index.ts create mode 100755 src bkup/LoginProvider/LoginProvider.component.scss create mode 100755 src bkup/LoginProvider/LoginProvider.test.ts create mode 100755 src bkup/LoginProvider/LoginProvider.tsx create mode 100755 src bkup/LoginProvider/index.ts create mode 100755 src bkup/LogoClouds/LogoClouds.component.scss create mode 100755 src bkup/LogoClouds/LogoClouds.test.ts create mode 100755 src bkup/LogoClouds/LogoClouds.tsx create mode 100755 src bkup/LogoClouds/index.ts create mode 100755 src bkup/Main/Main.component.scss create mode 100755 src bkup/Main/Main.test.ts create mode 100755 src bkup/Main/Main.tsx create mode 100755 src bkup/Main/index.ts create mode 100755 src bkup/Mask/Mask.component.scss create mode 100755 src bkup/Mask/Mask.test.ts create mode 100755 src bkup/Mask/Mask.tsx create mode 100755 src bkup/Mask/index.ts create mode 100755 src bkup/Modal/Modal.component.scss create mode 100755 src bkup/Modal/Modal.test.ts create mode 100755 src bkup/Modal/Modal.tsx create mode 100755 src bkup/Modal/index.ts create mode 100755 src bkup/Newsletter/Newsletter.component.scss create mode 100755 src bkup/Newsletter/Newsletter.test.ts create mode 100755 src bkup/Newsletter/Newsletter.tsx create mode 100755 src bkup/Newsletter/index.ts create mode 100755 src bkup/Notification/Notification.component.scss create mode 100755 src bkup/Notification/Notification.test.ts create mode 100755 src bkup/Notification/Notification.tsx create mode 100755 src bkup/Notification/index.ts create mode 100755 src bkup/Notifications/Notifications.component.scss create mode 100755 src bkup/Notifications/Notifications.test.ts create mode 100755 src bkup/Notifications/Notifications.tsx create mode 100755 src bkup/Notifications/index.ts create mode 100755 src bkup/NumericStepper/NumericStepper.component.scss create mode 100755 src bkup/NumericStepper/NumericStepper.test.ts create mode 100755 src bkup/NumericStepper/NumericStepper.tsx create mode 100755 src bkup/NumericStepper/index.ts create mode 100755 src bkup/Pagination/Pagination.component.scss create mode 100755 src bkup/Pagination/Pagination.test.ts create mode 100755 src bkup/Pagination/Pagination.tsx create mode 100755 src bkup/Pagination/index.ts create mode 100755 src bkup/Password/Password.component.scss create mode 100755 src bkup/Password/Password.test.ts create mode 100755 src bkup/Password/Password.tsx create mode 100755 src bkup/Password/index.ts create mode 100755 src bkup/PickerRange/PickerRange.component.scss create mode 100755 src bkup/PickerRange/PickerRange.test.ts create mode 100755 src bkup/PickerRange/PickerRange.tsx create mode 100755 src bkup/PickerRange/index.ts create mode 100755 src bkup/Picklist/Picklist.component.scss create mode 100755 src bkup/Picklist/Picklist.test.ts create mode 100755 src bkup/Picklist/Picklist.tsx create mode 100755 src bkup/Picklist/index.ts create mode 100755 src bkup/Pill/Pill.component.scss create mode 100755 src bkup/Pill/Pill.test.ts create mode 100755 src bkup/Pill/Pill.tsx create mode 100755 src bkup/Pill/index.ts create mode 100755 src bkup/Pillbox/Pillbox.component.scss create mode 100755 src bkup/Pillbox/Pillbox.test.ts create mode 100755 src bkup/Pillbox/Pillbox.tsx create mode 100755 src bkup/Pillbox/index.ts create mode 100755 src bkup/Popover/Popover.component.scss create mode 100755 src bkup/Popover/Popover.test.ts create mode 100755 src bkup/Popover/Popover.tsx create mode 100755 src bkup/Popover/PopoverV1.component.scss create mode 100755 src bkup/Popover/PopoverV1.tsx create mode 100755 src bkup/Popover/PopoverV2.component.scss create mode 100755 src bkup/Popover/PopoverV2.tsx create mode 100755 src bkup/Popover/index.ts create mode 100755 src bkup/Portal/Portal.component.scss create mode 100755 src bkup/Portal/Portal.test.ts create mode 100755 src bkup/Portal/Portal.tsx create mode 100755 src bkup/Portal/index.ts create mode 100755 src bkup/Portfolio/Portfolio.component.scss create mode 100755 src bkup/Portfolio/Portfolio.test.ts create mode 100755 src bkup/Portfolio/Portfolio.tsx create mode 100755 src bkup/Portfolio/index.ts create mode 100755 src bkup/Pricing/Pricing.component.scss create mode 100755 src bkup/Pricing/Pricing.test.ts create mode 100755 src bkup/Pricing/Pricing.tsx create mode 100755 src bkup/Pricing/index.ts create mode 100755 src bkup/ProductDescriptionTile/ProductDescriptionTile.component.scss create mode 100755 src bkup/ProductDescriptionTile/ProductDescriptionTile.test.ts create mode 100755 src bkup/ProductDescriptionTile/ProductDescriptionTile.tsx create mode 100755 src bkup/ProductDescriptionTile/index.ts create mode 100755 src bkup/ProductInfo/ProductInfo.component.scss create mode 100755 src bkup/ProductInfo/ProductInfo.test.ts create mode 100755 src bkup/ProductInfo/ProductInfo.tsx create mode 100755 src bkup/ProductInfo/index.ts create mode 100755 src bkup/ProgressIndicator/ProgressIndicator.component.scss create mode 100755 src bkup/ProgressIndicator/ProgressIndicator.test.ts create mode 100755 src bkup/ProgressIndicator/ProgressIndicator.tsx create mode 100755 src bkup/ProgressIndicator/index.ts create mode 100755 src bkup/ProgressStepper/ProgressStepper.component.scss create mode 100755 src bkup/ProgressStepper/ProgressStepper.test.ts create mode 100755 src bkup/ProgressStepper/ProgressStepper.tsx create mode 100755 src bkup/ProgressStepper/index.ts create mode 100755 src bkup/ProgressiveBarChart/ProgressiveBarChart.component.scss create mode 100755 src bkup/ProgressiveBarChart/ProgressiveBarChart.test.ts create mode 100755 src bkup/ProgressiveBarChart/ProgressiveBarChart.tsx create mode 100755 src bkup/ProgressiveBarChart/index.ts create mode 100755 src bkup/Projects/Projects.component.scss create mode 100755 src bkup/Projects/Projects.test.ts create mode 100755 src bkup/Projects/Projects.tsx create mode 100755 src bkup/Projects/index.ts create mode 100755 src bkup/Radio/Radio.component.scss create mode 100755 src bkup/Radio/Radio.test.ts create mode 100755 src bkup/Radio/Radio.tsx create mode 100755 src bkup/Radio/index.ts create mode 100755 src bkup/RepeatRenderer/RepeatRenderer.component.scss create mode 100755 src bkup/RepeatRenderer/RepeatRenderer.test.ts create mode 100755 src bkup/RepeatRenderer/RepeatRenderer.tsx create mode 100755 src bkup/RepeatRenderer/index.ts create mode 100755 src bkup/Reviews/Reviews.component.scss create mode 100755 src bkup/Reviews/Reviews.test.ts create mode 100755 src bkup/Reviews/Reviews.tsx create mode 100755 src bkup/Reviews/index.ts create mode 100755 src bkup/ScrollPagination/ScrollPagination.component.scss create mode 100755 src bkup/ScrollPagination/ScrollPagination.test.ts create mode 100755 src bkup/ScrollPagination/ScrollPagination.tsx create mode 100755 src bkup/ScrollPagination/index.ts create mode 100755 src bkup/SearchField/SearchField.component.scss create mode 100755 src bkup/SearchField/SearchField.test.ts create mode 100755 src bkup/SearchField/SearchField.tsx create mode 100755 src bkup/SearchField/index.ts create mode 100755 src bkup/SecondaryNavigation/SecondaryNavigation.component.scss create mode 100755 src bkup/SecondaryNavigation/SecondaryNavigation.test.ts create mode 100755 src bkup/SecondaryNavigation/SecondaryNavigation.tsx create mode 100755 src bkup/SecondaryNavigation/index.ts create mode 100644 src bkup/SegmentedControl/Segment.tsx create mode 100755 src bkup/SegmentedControl/SegmentedControl.component.scss create mode 100755 src bkup/SegmentedControl/SegmentedControl.test.ts create mode 100755 src bkup/SegmentedControl/SegmentedControl.tsx create mode 100755 src bkup/SegmentedControl/index.ts create mode 100755 src bkup/Select/Select.component.scss create mode 100755 src bkup/Select/Select.test.ts create mode 100755 src bkup/Select/Select.tsx create mode 100755 src bkup/Select/index.ts create mode 100755 src bkup/SelectionPill/SelectionPill.component.scss create mode 100755 src bkup/SelectionPill/SelectionPill.test.ts create mode 100755 src bkup/SelectionPill/SelectionPill.tsx create mode 100755 src bkup/SelectionPill/index.ts create mode 100755 src bkup/Services/Services.component.scss create mode 100755 src bkup/Services/Services.test.ts create mode 100755 src bkup/Services/Services.tsx create mode 100755 src bkup/Services/index.ts create mode 100755 src bkup/SidePanel/SidePanel.component.scss create mode 100755 src bkup/SidePanel/SidePanel.test.ts create mode 100755 src bkup/SidePanel/SidePanel.tsx create mode 100755 src bkup/SidePanel/index.ts create mode 100755 src bkup/SignInUp/SignInUp.component.scss create mode 100755 src bkup/SignInUp/SignInUp.test.ts create mode 100755 src bkup/SignInUp/SignInUp.tsx create mode 100755 src bkup/SignInUp/index.ts create mode 100755 src bkup/Slider/Slider.component.scss create mode 100755 src bkup/Slider/Slider.test.ts create mode 100755 src bkup/Slider/Slider.tsx create mode 100755 src bkup/Slider/index.ts create mode 100755 src bkup/Snackbar/Snackbar.component.scss create mode 100755 src bkup/Snackbar/Snackbar.test.ts create mode 100755 src bkup/Snackbar/Snackbar.tsx create mode 100755 src bkup/Snackbar/index.ts create mode 100755 src bkup/Splitter/Splitter.component.scss create mode 100755 src bkup/Splitter/Splitter.test.ts create mode 100755 src bkup/Splitter/Splitter.tsx create mode 100755 src bkup/Splitter/index.ts create mode 100755 src bkup/Stats/Stats.component.scss create mode 100755 src bkup/Stats/Stats.test.ts create mode 100755 src bkup/Stats/Stats.tsx create mode 100755 src bkup/Stats/index.ts create mode 100755 src bkup/Steps/Steps.component.scss create mode 100755 src bkup/Steps/Steps.test.ts create mode 100755 src bkup/Steps/Steps.tsx create mode 100755 src bkup/Steps/index.ts create mode 100755 src bkup/StuffleIamProvider/StuffleIamProvider.component.scss create mode 100755 src bkup/StuffleIamProvider/StuffleIamProvider.test.ts create mode 100755 src bkup/StuffleIamProvider/StuffleIamProvider.tsx create mode 100755 src bkup/StuffleIamProvider/index.ts create mode 100755 src bkup/Suggestions/Suggestions.component.scss create mode 100755 src bkup/Suggestions/Suggestions.test.ts create mode 100755 src bkup/Suggestions/Suggestions.tsx create mode 100755 src bkup/Suggestions/index.ts create mode 100755 src bkup/Swiper/Swiper.component.scss create mode 100755 src bkup/Swiper/Swiper.test.ts create mode 100755 src bkup/Swiper/Swiper.tsx create mode 100755 src bkup/Swiper/index.ts create mode 100755 src bkup/TabBar/TabBar.component.scss create mode 100755 src bkup/TabBar/TabBar.test.ts create mode 100755 src bkup/TabBar/TabBar.tsx create mode 100755 src bkup/TabBar/index.ts create mode 100755 src bkup/Table/Table.component.scss create mode 100755 src bkup/Table/Table.test.ts create mode 100755 src bkup/Table/Table.tsx create mode 100755 src bkup/Table/index.ts create mode 100755 src bkup/Tag/Tag.component.scss create mode 100755 src bkup/Tag/Tag.test.ts create mode 100755 src bkup/Tag/Tag.tsx create mode 100755 src bkup/Tag/index.ts create mode 100755 src bkup/Tags/Tags.component.scss create mode 100755 src bkup/Tags/Tags.test.ts create mode 100755 src bkup/Tags/Tags.tsx create mode 100755 src bkup/Tags/Testimonials/Testimonials.component.scss create mode 100755 src bkup/Tags/Testimonials/Testimonials.test.ts create mode 100755 src bkup/Tags/Testimonials/Testimonials.tsx create mode 100755 src bkup/Tags/Testimonials/index.ts create mode 100755 src bkup/Tags/index.ts create mode 100755 src bkup/Team/Team.component.scss create mode 100755 src bkup/Team/Team.test.ts create mode 100755 src bkup/Team/Team.tsx create mode 100755 src bkup/Team/index.ts create mode 100755 src bkup/Text/Chunk.tsx create mode 100755 src bkup/Text/Text.component.scss create mode 100755 src bkup/Text/Text.test.ts create mode 100755 src bkup/Text/Text.tsx create mode 100755 src bkup/Text/index.ts create mode 100755 src bkup/TextArea/TextArea.component.scss create mode 100755 src bkup/TextArea/TextArea.test.ts create mode 100755 src bkup/TextArea/TextArea.tsx create mode 100755 src bkup/TextArea/index.ts create mode 100755 src bkup/TextInput/TextInput.component.scss create mode 100755 src bkup/TextInput/TextInput.test.ts create mode 100755 src bkup/TextInput/TextInput.tsx create mode 100755 src bkup/TextInput/index.ts create mode 100755 src bkup/Tiles/Tiles.component.scss create mode 100755 src bkup/Tiles/Tiles.test.ts create mode 100755 src bkup/Tiles/Tiles.tsx create mode 100755 src bkup/Tiles/index.ts create mode 100755 src bkup/TimeEntry/TimeEntry.component.scss create mode 100755 src bkup/TimeEntry/TimeEntry.test.ts create mode 100755 src bkup/TimeEntry/TimeEntry.tsx create mode 100755 src bkup/TimeEntry/index.ts create mode 100755 src bkup/Toast/Toast.component.scss create mode 100755 src bkup/Toast/Toast.test.ts create mode 100755 src bkup/Toast/Toast.tsx create mode 100755 src bkup/Toast/index.ts create mode 100755 src bkup/Toggle/Toggle.component.scss create mode 100755 src bkup/Toggle/Toggle.test.ts create mode 100755 src bkup/Toggle/Toggle.tsx create mode 100755 src bkup/Toggle/index.ts create mode 100755 src bkup/Toolbar/Toolbar.component.scss create mode 100755 src bkup/Toolbar/Toolbar.test.ts create mode 100755 src bkup/Toolbar/Toolbar.tsx create mode 100755 src bkup/Toolbar/index.ts create mode 100755 src bkup/Tooltip/Tooltip.component.scss create mode 100755 src bkup/Tooltip/Tooltip.test.ts create mode 100755 src bkup/Tooltip/Tooltip.tsx create mode 100755 src bkup/Tooltip/index.ts create mode 100755 src bkup/TransferShuttle/TransferShuttle.component.scss create mode 100755 src bkup/TransferShuttle/TransferShuttle.test.ts create mode 100755 src bkup/TransferShuttle/TransferShuttle.tsx create mode 100755 src bkup/TransferShuttle/index.ts create mode 100755 src bkup/TreeList/TreeList.component.scss create mode 100755 src bkup/TreeList/TreeList.test.ts create mode 100755 src bkup/TreeList/TreeList.tsx create mode 100755 src bkup/TreeList/index.ts create mode 100755 src bkup/TypeAhead/TypeAhead.component.scss create mode 100755 src bkup/TypeAhead/TypeAhead.test.ts create mode 100755 src bkup/TypeAhead/TypeAhead.tsx create mode 100755 src bkup/TypeAhead/index.ts create mode 100755 src bkup/UserOptions/UserOptions.component.scss create mode 100755 src bkup/UserOptions/UserOptions.test.ts create mode 100755 src bkup/UserOptions/UserOptions.tsx create mode 100755 src bkup/UserOptions/index.ts create mode 100755 src bkup/Users/Users.component.scss create mode 100755 src bkup/Users/Users.test.ts create mode 100755 src bkup/Users/Users.tsx create mode 100755 src bkup/Users/index.ts create mode 100755 src bkup/Widget/Widget.component.scss create mode 100755 src bkup/Widget/Widget.test.ts create mode 100755 src bkup/Widget/Widget.tsx create mode 100755 src bkup/Widget/index.ts create mode 100755 src bkup/Wizard/Wizard.component.scss create mode 100755 src bkup/Wizard/Wizard.test.ts create mode 100755 src bkup/Wizard/Wizard.tsx create mode 100755 src bkup/Wizard/index.ts create mode 100755 src bkup/WizardModal/WizardModal.component.scss create mode 100755 src bkup/WizardModal/WizardModal.test.ts create mode 100755 src bkup/WizardModal/WizardModal.tsx create mode 100755 src bkup/WizardModal/index.ts create mode 100644 src bkup/index.ts create mode 100644 src bkup/static/images/ARC_logo.jpeg create mode 100644 src bkup/static/images/Stubble Component Lib Snap.png create mode 100644 src bkup/static/images/balloon.jpg create mode 100644 src bkup/static/images/img_colormap.gif create mode 100644 src bkup/static/images/index.ts create mode 100644 src bkup/static/index.ts create mode 100644 src bkup/styles/_animations.scss create mode 100644 src bkup/styles/_global.scss create mode 100644 src bkup/styles/_mixins.scss create mode 100644 src bkup/styles/_variables.scss create mode 100644 src bkup/styles/bootstrap.min.css create mode 100644 src bkup/styles/index.scss create mode 100755 src/AboutUs.component.scss create mode 100755 src/AboutUs.tsx create mode 100755 src/Accordion.component.scss create mode 100755 src/Accordion.tsx create mode 100755 src/AdvancedColorPicker.component.scss create mode 100755 src/AdvancedColorPicker.tsx create mode 100755 src/Alert.component.scss create mode 100755 src/Alert.tsx create mode 100755 src/AlertStackManager.component.scss create mode 100755 src/AlertStackManager.tsx create mode 100755 src/AlphabetFilter.component.scss create mode 100755 src/AlphabetFilter.tsx create mode 100755 src/Anchor.component.scss create mode 100755 src/Anchor.tsx create mode 100755 src/AppAndToolsSelector.component.scss create mode 100755 src/AppAndToolsSelector.tsx create mode 100755 src/Application.component.scss create mode 100755 src/Application.tsx create mode 100755 src/ArIconsViewer.component.scss create mode 100755 src/ArIconsViewer.tsx create mode 100755 src/ArViz.component.scss create mode 100755 src/ArViz.tsx create mode 100755 src/ArmcoIamProvider.component.scss create mode 100755 src/ArmcoIamProvider.tsx create mode 100755 src/Badge.component.scss create mode 100755 src/Badge.tsx create mode 100755 src/Banner.component.scss create mode 100755 src/Banner.tsx create mode 100755 src/Benefits.component.scss create mode 100755 src/Benefits.tsx create mode 100755 src/Blog.component.scss create mode 100755 src/Blog.tsx create mode 100755 src/Brands.component.scss create mode 100755 src/Brands.tsx create mode 100755 src/Breadcrumb.component.scss create mode 100755 src/Breadcrumb.tsx create mode 100755 src/Breadcrumbs.component.scss create mode 100755 src/Breadcrumbs.tsx create mode 100755 src/BrowserIncompatibility.component.scss create mode 100755 src/BrowserIncompatibility.tsx create mode 100755 src/BubbleChart.component.scss create mode 100755 src/BubbleChart.tsx create mode 100755 src/BubbleViz.component.scss create mode 100755 src/BubbleViz.tsx create mode 100755 src/Button.component.scss create mode 100755 src/Button.tsx create mode 100755 src/Card.component.scss create mode 100755 src/Card.tsx create mode 100755 src/Careers.component.scss create mode 100755 src/Careers.tsx create mode 100755 src/Carousel.component.scss create mode 100755 src/Carousel.tsx create mode 100755 src/CategoryFilter.component.scss create mode 100755 src/CategoryFilter.tsx create mode 100755 src/Checkbox.component.scss create mode 100755 src/Checkbox.tsx create mode 100755 src/Chunk.tsx create mode 100755 src/ColorPicker.component.scss create mode 100755 src/ColorPicker.tsx create mode 100644 src/ColorPickerConfig.ts create mode 100755 src/ColorSelector.component.scss create mode 100755 src/ColorSelector.tsx create mode 100755 src/Component_404.component.scss create mode 100755 src/Component_404.tsx create mode 100755 src/Contact.component.scss create mode 100755 src/Contact.tsx create mode 100755 src/Content.component.scss create mode 100755 src/Content.tsx create mode 100755 src/ContextMenu.component.scss create mode 100755 src/ContextMenu.tsx create mode 100755 src/Cookies.component.scss create mode 100755 src/Cookies.tsx create mode 100755 src/CronTab.component.scss create mode 100755 src/CronTab.tsx create mode 100755 src/Cta.component.scss create mode 100755 src/Cta.tsx create mode 100755 src/Dashboard.component.scss create mode 100755 src/Dashboard.tsx create mode 100755 src/DateInput.component.scss create mode 100755 src/DateInput.tsx create mode 100755 src/DetailsPanel.component.scss create mode 100755 src/DetailsPanel.tsx create mode 100755 src/Dialog.component.scss create mode 100755 src/Dialog.tsx create mode 100755 src/Download.component.scss create mode 100755 src/Download.tsx create mode 100755 src/Draggable.component.scss create mode 100755 src/Draggable.tsx create mode 100755 src/Drawer.component.scss create mode 100755 src/Drawer.tsx create mode 100755 src/Dropdown.component.scss create mode 100755 src/Dropdown.tsx create mode 100755 src/Droppable.component.scss create mode 100755 src/Droppable.tsx create mode 100755 src/DroppableContainer.component.scss create mode 100755 src/DroppableContainer.tsx create mode 100755 src/EcommOrders.component.scss create mode 100755 src/EcommOrders.tsx create mode 100755 src/EcommProducts.component.scss create mode 100755 src/EcommProducts.tsx create mode 100755 src/Empty.component.scss create mode 100755 src/Empty.tsx create mode 100755 src/ErrorBoundary.component.scss create mode 100755 src/ErrorBoundary.tsx create mode 100755 src/FacetedFilter.component.scss create mode 100755 src/FacetedFilter.tsx create mode 100755 src/Faq.component.scss create mode 100755 src/Faq.tsx create mode 100755 src/Features.component.scss create mode 100755 src/Features.tsx create mode 100755 src/Filters.component.scss create mode 100755 src/Filters.tsx create mode 100755 src/FlexTools.component.scss create mode 100755 src/FlexTools.tsx create mode 100755 src/Footer.component.scss create mode 100755 src/Footer.tsx create mode 100755 src/Form.component.scss create mode 100755 src/Form.tsx create mode 100755 src/Gallery.component.scss create mode 100755 src/Gallery.tsx create mode 100755 src/Graph.component.scss create mode 100755 src/Graph.tsx create mode 100755 src/GraphTiles.component.scss create mode 100755 src/GraphTiles.tsx create mode 100755 src/Header.component.scss create mode 100755 src/Header.tsx create mode 100755 src/Hero.component.scss create mode 100755 src/Hero.tsx create mode 100755 src/HowItWorks.component.scss create mode 100755 src/HowItWorks.tsx create mode 100755 src/HttpCode.component.scss create mode 100755 src/HttpCode.tsx create mode 100755 src/Image.component.scss create mode 100755 src/Image.tsx create mode 100755 src/InlineMenu.component.scss create mode 100755 src/InlineMenu.tsx create mode 100755 src/InstaPhotos.component.scss create mode 100755 src/InstaPhotos.tsx create mode 100755 src/Integrations.component.scss create mode 100755 src/Integrations.tsx create mode 100755 src/Label.component.scss create mode 100755 src/Label.tsx create mode 100755 src/LabelValue.component.scss create mode 100755 src/LabelValue.tsx create mode 100755 src/LayoutGenerator.component.scss create mode 100644 src/LayoutGenerator.tsx create mode 100755 src/LearnLink.component.scss create mode 100755 src/LearnLink.tsx create mode 100755 src/Link.component.scss create mode 100755 src/Link.tsx create mode 100755 src/List.component.scss create mode 100755 src/List.tsx create mode 100644 src/ListItem.tsx create mode 100755 src/Loader.component.scss create mode 100755 src/Loader.tsx create mode 100755 src/LoginProvider.component.scss create mode 100755 src/LoginProvider.tsx create mode 100755 src/LogoClouds.component.scss create mode 100755 src/LogoClouds.tsx create mode 100755 src/Main.component.scss create mode 100755 src/Main.tsx create mode 100755 src/Mask.component.scss create mode 100755 src/Mask.tsx create mode 100755 src/Modal.component.scss create mode 100755 src/Modal.tsx create mode 100755 src/Newsletter.component.scss create mode 100755 src/Newsletter.tsx create mode 100755 src/Notification.component.scss create mode 100755 src/Notification.tsx create mode 100755 src/Notifications.component.scss create mode 100755 src/Notifications.tsx create mode 100755 src/NumericStepper.component.scss create mode 100755 src/NumericStepper.tsx create mode 100755 src/Pagination.component.scss create mode 100755 src/Pagination.tsx create mode 100755 src/Password.component.scss create mode 100755 src/Password.tsx create mode 100755 src/PickerRange.component.scss create mode 100755 src/PickerRange.tsx create mode 100755 src/Picklist.component.scss create mode 100755 src/Picklist.tsx create mode 100755 src/Pill.component.scss create mode 100755 src/Pill.tsx create mode 100755 src/Pillbox.component.scss create mode 100755 src/Pillbox.tsx create mode 100755 src/Popover.component.scss create mode 100755 src/Popover.tsx create mode 100755 src/PopoverV1.component.scss create mode 100755 src/PopoverV1.tsx create mode 100755 src/PopoverV2.component.scss create mode 100755 src/PopoverV2.tsx create mode 100755 src/Portal.component.scss create mode 100755 src/Portal.tsx create mode 100755 src/Portfolio.component.scss create mode 100755 src/Portfolio.tsx create mode 100755 src/Pricing.component.scss create mode 100755 src/Pricing.tsx create mode 100755 src/ProductDescriptionTile.component.scss create mode 100755 src/ProductDescriptionTile.tsx create mode 100755 src/ProductInfo.component.scss create mode 100755 src/ProductInfo.tsx create mode 100755 src/ProgressIndicator.component.scss create mode 100755 src/ProgressIndicator.tsx create mode 100755 src/ProgressStepper.component.scss create mode 100755 src/ProgressStepper.tsx create mode 100755 src/ProgressiveBarChart.component.scss create mode 100755 src/ProgressiveBarChart.tsx create mode 100755 src/Projects.component.scss create mode 100755 src/Projects.tsx create mode 100755 src/Radio.component.scss create mode 100755 src/Radio.tsx create mode 100755 src/RepeatRenderer.component.scss create mode 100755 src/RepeatRenderer.tsx create mode 100755 src/Reviews.component.scss create mode 100755 src/Reviews.tsx create mode 100755 src/ScrollPagination.component.scss create mode 100755 src/ScrollPagination.tsx create mode 100755 src/SearchField.component.scss create mode 100755 src/SearchField.tsx create mode 100755 src/SecondaryNavigation.component.scss create mode 100755 src/SecondaryNavigation.tsx create mode 100644 src/Segment.tsx create mode 100755 src/SegmentedControl.component.scss create mode 100755 src/SegmentedControl.tsx create mode 100755 src/Select.component.scss create mode 100755 src/Select.tsx create mode 100755 src/SelectionPill.component.scss create mode 100755 src/SelectionPill.tsx create mode 100755 src/Services.component.scss create mode 100755 src/Services.tsx create mode 100755 src/SidePanel.component.scss create mode 100755 src/SidePanel.tsx create mode 100755 src/SignInUp.component.scss create mode 100755 src/SignInUp.tsx create mode 100755 src/Slider.component.scss create mode 100755 src/Slider.tsx create mode 100755 src/Snackbar.component.scss create mode 100755 src/Snackbar.tsx create mode 100755 src/Splitter.component.scss create mode 100755 src/Splitter.tsx create mode 100755 src/Stats.component.scss create mode 100755 src/Stats.tsx create mode 100755 src/Steps.component.scss create mode 100755 src/Steps.tsx create mode 100755 src/StuffleIamProvider.component.scss create mode 100755 src/StuffleIamProvider.tsx create mode 100755 src/Suggestions.component.scss create mode 100755 src/Suggestions.tsx create mode 100755 src/Swiper.component.scss create mode 100755 src/Swiper.tsx create mode 100755 src/Tab.tsx create mode 100755 src/TabBar.component.scss create mode 100755 src/TabBar.tsx create mode 100755 src/Table.component.scss create mode 100755 src/Table.tsx create mode 100755 src/Tag.component.scss create mode 100755 src/Tag.tsx create mode 100755 src/Tags.component.scss create mode 100755 src/Tags.tsx create mode 100755 src/Team.component.scss create mode 100755 src/Team.tsx create mode 100755 src/Testimonials.component.scss create mode 100755 src/Testimonials.tsx create mode 100755 src/Text.component.scss create mode 100755 src/Text.tsx create mode 100755 src/TextArea.component.scss create mode 100755 src/TextArea.tsx create mode 100755 src/TextInput.component.scss create mode 100755 src/TextInput.tsx create mode 100644 src/Thumbs.tsx create mode 100755 src/Tiles.component.scss create mode 100755 src/Tiles.tsx create mode 100755 src/TimeEntry.component.scss create mode 100755 src/TimeEntry.tsx create mode 100755 src/Toast.component.scss create mode 100755 src/Toast.tsx create mode 100755 src/Toggle.component.scss create mode 100755 src/Toggle.tsx create mode 100755 src/Toolbar.component.scss create mode 100755 src/Toolbar.tsx create mode 100755 src/Tooltip.component.scss create mode 100755 src/Tooltip.tsx create mode 100755 src/TransferShuttle.component.scss create mode 100755 src/TransferShuttle.tsx create mode 100755 src/TreeList.component.scss create mode 100755 src/TreeList.tsx create mode 100755 src/TypeAhead.component.scss create mode 100755 src/TypeAhead.tsx create mode 100755 src/UserOptions.component.scss create mode 100755 src/UserOptions.tsx create mode 100755 src/Users.component.scss create mode 100755 src/Users.tsx create mode 100755 src/Widget.component.scss create mode 100755 src/Widget.tsx create mode 100755 src/Wizard.component.scss create mode 100755 src/Wizard.tsx create mode 100755 src/WizardModal.component.scss create mode 100755 src/WizardModal.tsx create mode 100644 src/animations.ts create mode 100644 src/cssClasses.ts create mode 100644 src/index.ts create mode 100644 src/static/ARC_logo.jpeg create mode 100644 src/static/Stubble Component Lib Snap.png create mode 100644 src/static/img_colormap.gif create mode 100644 src/static/index.ts create mode 100644 src/styles/_animations.scss create mode 100644 src/styles/_global.scss create mode 100644 src/styles/_mixins.scss create mode 100644 src/styles/_variables.scss create mode 100644 src/styles/index.scss create mode 100644 tsconfig.cjs.build.json create mode 100644 tsconfig.es.build.json create mode 100644 tsconfig.json create mode 100644 vite-css.config.ts create mode 100644 vite.config.ts diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..252f1f5 --- /dev/null +++ b/.gitignore @@ -0,0 +1,48 @@ +# Logs +logs +*.log +npm-debug.log* +yarn-debug.log* +yarn-error.log* +pnpm-debug.log* +lerna-debug.log* + +# Dependencies +node_modules +.yarn/* +!.yarn/patches +!.yarn/plugins +!.yarn/releases +!.yarn/sdks +!.yarn/versions +# Swap the comments on the following lines if you don't wish to use zero-installs +# Documentation here: https://yarnpkg.com/features/zero-installs +!.yarn/cache +#.pnp.* + +# Testing +coverage + +# Production +build +dist +lib +public + +# Miscellaneous +*.local +.DS_Store + +analyse.html +stats.html + +*.pem +*.d.ts + +analyticsrc.json + +Date +backlog.yml +Lottie Structure.txt +LottieSchema.json +.hintrc diff --git a/Dockerfile b/Dockerfile new file mode 100644 index 0000000..c79e0a1 --- /dev/null +++ b/Dockerfile @@ -0,0 +1,33 @@ +# pull the Node.js Docker image as dependencies +# ---- Dependencies Node ---- +FROM node:16-alpine AS build +# copy the package.json files from local machine to the workdir in container +COPY package.json . +# install node packages +RUN npm set progress=false && npm config set depth 0 +RUN npm install --legacy-peer-deps + +# # +# # ---- Test ---- +# # run linters, setup and tests +# FROM dependencies AS test +# COPY . . +# RUN npm run lint && npm run test +# copy app sources +COPY ./src ./src +COPY tsconfig.json vite.config.ts analyticsrc.json index.html / +RUN npm run build + +FROM node:16-alpine +# copy the generated modules and all other files to the container +WORKDIR /usr/src/app +RUN npm install -g serve +COPY cert.pem /etc/ssl/certificates/cert.pem +COPY chain.pem /etc/ssl/certificates/chain.pem +COPY fullchain.pem /etc/ssl/certificates/fullchain.pem +COPY privkey.pem /etc/ssl/certificates/privkey.pem +COPY --from=build build . +# our app is running on port 3000 within the container, so need to expose it +EXPOSE 3000 +# the command that starts our app +CMD ["serve", "-s", "."] diff --git a/LICENSE b/LICENSE new file mode 100644 index 0000000..8000a6f --- /dev/null +++ b/LICENSE @@ -0,0 +1,504 @@ + GNU LESSER GENERAL PUBLIC LICENSE + Version 2.1, February 1999 + + Copyright (C) 1991, 1999 Free Software Foundation, Inc. + 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301 USA + Everyone is permitted to copy and distribute verbatim copies + of this license document, but changing it is not allowed. + +[This is the first released version of the Lesser GPL. It also counts + as the successor of the GNU Library Public License, version 2, hence + the version number 2.1.] + + Preamble + + The licenses for most software are designed to take away your +freedom to share and change it. By contrast, the GNU General Public +Licenses are intended to guarantee your freedom to share and change +free software--to make sure the software is free for all its users. + + This license, the Lesser General Public License, applies to some +specially designated software packages--typically libraries--of the +Free Software Foundation and other authors who decide to use it. You +can use it too, but we suggest you first think carefully about whether +this license or the ordinary General Public License is the better +strategy to use in any particular case, based on the explanations below. + + When we speak of free software, we are referring to freedom of use, +not price. Our General Public Licenses are designed to make sure that +you have the freedom to distribute copies of free software (and charge +for this service if you wish); that you receive source code or can get +it if you want it; that you can change the software and use pieces of +it in new free programs; and that you are informed that you can do +these things. + + To protect your rights, we need to make restrictions that forbid +distributors to deny you these rights or to ask you to surrender these +rights. These restrictions translate to certain responsibilities for +you if you distribute copies of the library or if you modify it. + + For example, if you distribute copies of the library, whether gratis +or for a fee, you must give the recipients all the rights that we gave +you. You must make sure that they, too, receive or can get the source +code. If you link other code with the library, you must provide +complete object files to the recipients, so that they can relink them +with the library after making changes to the library and recompiling +it. And you must show them these terms so they know their rights. + + We protect your rights with a two-step method: (1) we copyright the +library, and (2) we offer you this license, which gives you legal +permission to copy, distribute and/or modify the library. + + To protect each distributor, we want to make it very clear that +there is no warranty for the free library. Also, if the library is +modified by someone else and passed on, the recipients should know +that what they have is not the original version, so that the original +author's reputation will not be affected by problems that might be +introduced by others. + + Finally, software patents pose a constant threat to the existence of +any free program. We wish to make sure that a company cannot +effectively restrict the users of a free program by obtaining a +restrictive license from a patent holder. Therefore, we insist that +any patent license obtained for a version of the library must be +consistent with the full freedom of use specified in this license. + + Most GNU software, including some libraries, is covered by the +ordinary GNU General Public License. This license, the GNU Lesser +General Public License, applies to certain designated libraries, and +is quite different from the ordinary General Public License. We use +this license for certain libraries in order to permit linking those +libraries into non-free programs. + + When a program is linked with a library, whether statically or using +a shared library, the combination of the two is legally speaking a +combined work, a derivative of the original library. The ordinary +General Public License therefore permits such linking only if the +entire combination fits its criteria of freedom. The Lesser General +Public License permits more lax criteria for linking other code with +the library. + + We call this license the "Lesser" General Public License because it +does Less to protect the user's freedom than the ordinary General +Public License. It also provides other free software developers Less +of an advantage over competing non-free programs. These disadvantages +are the reason we use the ordinary General Public License for many +libraries. However, the Lesser license provides advantages in certain +special circumstances. + + For example, on rare occasions, there may be a special need to +encourage the widest possible use of a certain library, so that it becomes +a de-facto standard. To achieve this, non-free programs must be +allowed to use the library. A more frequent case is that a free +library does the same job as widely used non-free libraries. In this +case, there is little to gain by limiting the free library to free +software only, so we use the Lesser General Public License. + + In other cases, permission to use a particular library in non-free +programs enables a greater number of people to use a large body of +free software. For example, permission to use the GNU C Library in +non-free programs enables many more people to use the whole GNU +operating system, as well as its variant, the GNU/Linux operating +system. + + Although the Lesser General Public License is Less protective of the +users' freedom, it does ensure that the user of a program that is +linked with the Library has the freedom and the wherewithal to run +that program using a modified version of the Library. + + The precise terms and conditions for copying, distribution and +modification follow. Pay close attention to the difference between a +"work based on the library" and a "work that uses the library". The +former contains code derived from the library, whereas the latter must +be combined with the library in order to run. + + GNU LESSER GENERAL PUBLIC LICENSE + TERMS AND CONDITIONS FOR COPYING, DISTRIBUTION AND MODIFICATION + + 0. This License Agreement applies to any software library or other +program which contains a notice placed by the copyright holder or +other authorized party saying it may be distributed under the terms of +this Lesser General Public License (also called "this License"). +Each licensee is addressed as "you". + + A "library" means a collection of software functions and/or data +prepared so as to be conveniently linked with application programs +(which use some of those functions and data) to form executables. + + The "Library", below, refers to any such software library or work +which has been distributed under these terms. A "work based on the +Library" means either the Library or any derivative work under +copyright law: that is to say, a work containing the Library or a +portion of it, either verbatim or with modifications and/or translated +straightforwardly into another language. (Hereinafter, translation is +included without limitation in the term "modification".) + + "Source code" for a work means the preferred form of the work for +making modifications to it. For a library, complete source code means +all the source code for all modules it contains, plus any associated +interface definition files, plus the scripts used to control compilation +and installation of the library. + + Activities other than copying, distribution and modification are not +covered by this License; they are outside its scope. The act of +running a program using the Library is not restricted, and output from +such a program is covered only if its contents constitute a work based +on the Library (independent of the use of the Library in a tool for +writing it). Whether that is true depends on what the Library does +and what the program that uses the Library does. + + 1. You may copy and distribute verbatim copies of the Library's +complete source code as you receive it, in any medium, provided that +you conspicuously and appropriately publish on each copy an +appropriate copyright notice and disclaimer of warranty; keep intact +all the notices that refer to this License and to the absence of any +warranty; and distribute a copy of this License along with the +Library. + + You may charge a fee for the physical act of transferring a copy, +and you may at your option offer warranty protection in exchange for a +fee. + + 2. You may modify your copy or copies of the Library or any portion +of it, thus forming a work based on the Library, and copy and +distribute such modifications or work under the terms of Section 1 +above, provided that you also meet all of these conditions: + + a) The modified work must itself be a software library. + + b) You must cause the files modified to carry prominent notices + stating that you changed the files and the date of any change. + + c) You must cause the whole of the work to be licensed at no + charge to all third parties under the terms of this License. + + d) If a facility in the modified Library refers to a function or a + table of data to be supplied by an application program that uses + the facility, other than as an argument passed when the facility + is invoked, then you must make a good faith effort to ensure that, + in the event an application does not supply such function or + table, the facility still operates, and performs whatever part of + its purpose remains meaningful. + + (For example, a function in a library to compute square roots has + a purpose that is entirely well-defined independent of the + application. Therefore, Subsection 2d requires that any + application-supplied function or table used by this function must + be optional: if the application does not supply it, the square + root function must still compute square roots.) + +These requirements apply to the modified work as a whole. If +identifiable sections of that work are not derived from the Library, +and can be reasonably considered independent and separate works in +themselves, then this License, and its terms, do not apply to those +sections when you distribute them as separate works. But when you +distribute the same sections as part of a whole which is a work based +on the Library, the distribution of the whole must be on the terms of +this License, whose permissions for other licensees extend to the +entire whole, and thus to each and every part regardless of who wrote +it. + +Thus, it is not the intent of this section to claim rights or contest +your rights to work written entirely by you; rather, the intent is to +exercise the right to control the distribution of derivative or +collective works based on the Library. + +In addition, mere aggregation of another work not based on the Library +with the Library (or with a work based on the Library) on a volume of +a storage or distribution medium does not bring the other work under +the scope of this License. + + 3. You may opt to apply the terms of the ordinary GNU General Public +License instead of this License to a given copy of the Library. To do +this, you must alter all the notices that refer to this License, so +that they refer to the ordinary GNU General Public License, version 2, +instead of to this License. (If a newer version than version 2 of the +ordinary GNU General Public License has appeared, then you can specify +that version instead if you wish.) Do not make any other change in +these notices. + + Once this change is made in a given copy, it is irreversible for +that copy, so the ordinary GNU General Public License applies to all +subsequent copies and derivative works made from that copy. + + This option is useful when you wish to copy part of the code of +the Library into a program that is not a library. + + 4. You may copy and distribute the Library (or a portion or +derivative of it, under Section 2) in object code or executable form +under the terms of Sections 1 and 2 above provided that you accompany +it with the complete corresponding machine-readable source code, which +must be distributed under the terms of Sections 1 and 2 above on a +medium customarily used for software interchange. + + If distribution of object code is made by offering access to copy +from a designated place, then offering equivalent access to copy the +source code from the same place satisfies the requirement to +distribute the source code, even though third parties are not +compelled to copy the source along with the object code. + + 5. A program that contains no derivative of any portion of the +Library, but is designed to work with the Library by being compiled or +linked with it, is called a "work that uses the Library". Such a +work, in isolation, is not a derivative work of the Library, and +therefore falls outside the scope of this License. + + However, linking a "work that uses the Library" with the Library +creates an executable that is a derivative of the Library (because it +contains portions of the Library), rather than a "work that uses the +library". The executable is therefore covered by this License. +Section 6 states terms for distribution of such executables. + + When a "work that uses the Library" uses material from a header file +that is part of the Library, the object code for the work may be a +derivative work of the Library even though the source code is not. +Whether this is true is especially significant if the work can be +linked without the Library, or if the work is itself a library. The +threshold for this to be true is not precisely defined by law. + + If such an object file uses only numerical parameters, data +structure layouts and accessors, and small macros and small inline +functions (ten lines or less in length), then the use of the object +file is unrestricted, regardless of whether it is legally a derivative +work. (Executables containing this object code plus portions of the +Library will still fall under Section 6.) + + Otherwise, if the work is a derivative of the Library, you may +distribute the object code for the work under the terms of Section 6. +Any executables containing that work also fall under Section 6, +whether or not they are linked directly with the Library itself. + + 6. As an exception to the Sections above, you may also combine or +link a "work that uses the Library" with the Library to produce a +work containing portions of the Library, and distribute that work +under terms of your choice, provided that the terms permit +modification of the work for the customer's own use and reverse +engineering for debugging such modifications. + + You must give prominent notice with each copy of the work that the +Library is used in it and that the Library and its use are covered by +this License. You must supply a copy of this License. If the work +during execution displays copyright notices, you must include the +copyright notice for the Library among them, as well as a reference +directing the user to the copy of this License. Also, you must do one +of these things: + + a) Accompany the work with the complete corresponding + machine-readable source code for the Library including whatever + changes were used in the work (which must be distributed under + Sections 1 and 2 above); and, if the work is an executable linked + with the Library, with the complete machine-readable "work that + uses the Library", as object code and/or source code, so that the + user can modify the Library and then relink to produce a modified + executable containing the modified Library. (It is understood + that the user who changes the contents of definitions files in the + Library will not necessarily be able to recompile the application + to use the modified definitions.) + + b) Use a suitable shared library mechanism for linking with the + Library. A suitable mechanism is one that (1) uses at run time a + copy of the library already present on the user's computer system, + rather than copying library functions into the executable, and (2) + will operate properly with a modified version of the library, if + the user installs one, as long as the modified version is + interface-compatible with the version that the work was made with. + + c) Accompany the work with a written offer, valid for at + least three years, to give the same user the materials + specified in Subsection 6a, above, for a charge no more + than the cost of performing this distribution. + + d) If distribution of the work is made by offering access to copy + from a designated place, offer equivalent access to copy the above + specified materials from the same place. + + e) Verify that the user has already received a copy of these + materials or that you have already sent this user a copy. + + For an executable, the required form of the "work that uses the +Library" must include any data and utility programs needed for +reproducing the executable from it. However, as a special exception, +the materials to be distributed need not include anything that is +normally distributed (in either source or binary form) with the major +components (compiler, kernel, and so on) of the operating system on +which the executable runs, unless that component itself accompanies +the executable. + + It may happen that this requirement contradicts the license +restrictions of other proprietary libraries that do not normally +accompany the operating system. Such a contradiction means you cannot +use both them and the Library together in an executable that you +distribute. + + 7. You may place library facilities that are a work based on the +Library side-by-side in a single library together with other library +facilities not covered by this License, and distribute such a combined +library, provided that the separate distribution of the work based on +the Library and of the other library facilities is otherwise +permitted, and provided that you do these two things: + + a) Accompany the combined library with a copy of the same work + based on the Library, uncombined with any other library + facilities. This must be distributed under the terms of the + Sections above. + + b) Give prominent notice with the combined library of the fact + that part of it is a work based on the Library, and explaining + where to find the accompanying uncombined form of the same work. + + 8. You may not copy, modify, sublicense, link with, or distribute +the Library except as expressly provided under this License. Any +attempt otherwise to copy, modify, sublicense, link with, or +distribute the Library is void, and will automatically terminate your +rights under this License. However, parties who have received copies, +or rights, from you under this License will not have their licenses +terminated so long as such parties remain in full compliance. + + 9. You are not required to accept this License, since you have not +signed it. However, nothing else grants you permission to modify or +distribute the Library or its derivative works. These actions are +prohibited by law if you do not accept this License. Therefore, by +modifying or distributing the Library (or any work based on the +Library), you indicate your acceptance of this License to do so, and +all its terms and conditions for copying, distributing or modifying +the Library or works based on it. + + 10. Each time you redistribute the Library (or any work based on the +Library), the recipient automatically receives a license from the +original licensor to copy, distribute, link with or modify the Library +subject to these terms and conditions. You may not impose any further +restrictions on the recipients' exercise of the rights granted herein. +You are not responsible for enforcing compliance by third parties with +this License. + + 11. If, as a consequence of a court judgment or allegation of patent +infringement or for any other reason (not limited to patent issues), +conditions are imposed on you (whether by court order, agreement or +otherwise) that contradict the conditions of this License, they do not +excuse you from the conditions of this License. If you cannot +distribute so as to satisfy simultaneously your obligations under this +License and any other pertinent obligations, then as a consequence you +may not distribute the Library at all. For example, if a patent +license would not permit royalty-free redistribution of the Library by +all those who receive copies directly or indirectly through you, then +the only way you could satisfy both it and this License would be to +refrain entirely from distribution of the Library. + +If any portion of this section is held invalid or unenforceable under any +particular circumstance, the balance of the section is intended to apply, +and the section as a whole is intended to apply in other circumstances. + +It is not the purpose of this section to induce you to infringe any +patents or other property right claims or to contest validity of any +such claims; this section has the sole purpose of protecting the +integrity of the free software distribution system which is +implemented by public license practices. Many people have made +generous contributions to the wide range of software distributed +through that system in reliance on consistent application of that +system; it is up to the author/donor to decide if he or she is willing +to distribute software through any other system and a licensee cannot +impose that choice. + +This section is intended to make thoroughly clear what is believed to +be a consequence of the rest of this License. + + 12. If the distribution and/or use of the Library is restricted in +certain countries either by patents or by copyrighted interfaces, the +original copyright holder who places the Library under this License may add +an explicit geographical distribution limitation excluding those countries, +so that distribution is permitted only in or among countries not thus +excluded. In such case, this License incorporates the limitation as if +written in the body of this License. + + 13. The Free Software Foundation may publish revised and/or new +versions of the Lesser General Public License from time to time. +Such new versions will be similar in spirit to the present version, +but may differ in detail to address new problems or concerns. + +Each version is given a distinguishing version number. If the Library +specifies a version number of this License which applies to it and +"any later version", you have the option of following the terms and +conditions either of that version or of any later version published by +the Free Software Foundation. If the Library does not specify a +license version number, you may choose any version ever published by +the Free Software Foundation. + + 14. If you wish to incorporate parts of the Library into other free +programs whose distribution conditions are incompatible with these, +write to the author to ask for permission. For software which is +copyrighted by the Free Software Foundation, write to the Free +Software Foundation; we sometimes make exceptions for this. Our +decision will be guided by the two goals of preserving the free status +of all derivatives of our free software and of promoting the sharing +and reuse of software generally. + + NO WARRANTY + + 15. BECAUSE THE LIBRARY IS LICENSED FREE OF CHARGE, THERE IS NO +WARRANTY FOR THE LIBRARY, TO THE EXTENT PERMITTED BY APPLICABLE LAW. +EXCEPT WHEN OTHERWISE STATED IN WRITING THE COPYRIGHT HOLDERS AND/OR +OTHER PARTIES PROVIDE THE LIBRARY "AS IS" WITHOUT WARRANTY OF ANY +KIND, EITHER EXPRESSED OR IMPLIED, INCLUDING, BUT NOT LIMITED TO, THE +IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR +PURPOSE. THE ENTIRE RISK AS TO THE QUALITY AND PERFORMANCE OF THE +LIBRARY IS WITH YOU. SHOULD THE LIBRARY PROVE DEFECTIVE, YOU ASSUME +THE COST OF ALL NECESSARY SERVICING, REPAIR OR CORRECTION. + + 16. IN NO EVENT UNLESS REQUIRED BY APPLICABLE LAW OR AGREED TO IN +WRITING WILL ANY COPYRIGHT HOLDER, OR ANY OTHER PARTY WHO MAY MODIFY +AND/OR REDISTRIBUTE THE LIBRARY AS PERMITTED ABOVE, BE LIABLE TO YOU +FOR DAMAGES, INCLUDING ANY GENERAL, SPECIAL, INCIDENTAL OR +CONSEQUENTIAL DAMAGES ARISING OUT OF THE USE OR INABILITY TO USE THE +LIBRARY (INCLUDING BUT NOT LIMITED TO LOSS OF DATA OR DATA BEING +RENDERED INACCURATE OR LOSSES SUSTAINED BY YOU OR THIRD PARTIES OR A +FAILURE OF THE LIBRARY TO OPERATE WITH ANY OTHER SOFTWARE), EVEN IF +SUCH HOLDER OR OTHER PARTY HAS BEEN ADVISED OF THE POSSIBILITY OF SUCH +DAMAGES. + + END OF TERMS AND CONDITIONS + + How to Apply These Terms to Your New Libraries + + If you develop a new library, and you want it to be of the greatest +possible use to the public, we recommend making it free software that +everyone can redistribute and change. You can do so by permitting +redistribution under these terms (or, alternatively, under the terms of the +ordinary General Public License). + + To apply these terms, attach the following notices to the library. It is +safest to attach them to the start of each source file to most effectively +convey the exclusion of warranty; and each file should have at least the +"copyright" line and a pointer to where the full notice is found. + + + Copyright (C) + + This library is free software; you can redistribute it and/or + modify it under the terms of the GNU Lesser General Public + License as published by the Free Software Foundation; either + version 2.1 of the License, or (at your option) any later version. + + This library is distributed in the hope that it will be useful, + but WITHOUT ANY WARRANTY; without even the implied warranty of + MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU + Lesser General Public License for more details. + + You should have received a copy of the GNU Lesser General Public + License along with this library; if not, write to the Free Software + Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301 + USA + +Also add information on how to contact you by electronic and paper mail. + +You should also get your employer (if you work as a programmer) or your +school, if any, to sign a "copyright disclaimer" for the library, if +necessary. Here is a sample; alter the names: + + Yoyodyne, Inc., hereby disclaims all copyright interest in the + library `Frob' (a library for tweaking knobs) written by James Random + Hacker. + + , 1 April 1990 + Ty Coon, President of Vice + +That's all there is to it! diff --git a/build-tools/build.sh b/build-tools/build.sh new file mode 100755 index 0000000..2a7aca1 --- /dev/null +++ b/build-tools/build.sh @@ -0,0 +1,27 @@ +#!/bin/bash + +# Get the directory of the current script +SCRIPT_DIR="$(cd "$(dirname "${BASH_SOURCE[0]}")" && pwd)" + +rm -rf build + +# Generate Styles (with unneeded js) +# vite build --config vite-css.config.ts + + +vite build + +# Generated source bundle +# tsc -p tsconfig.cjs.build.json +# tsc -p tsconfig.es.build.json + +# Cleanup unneeded js +rm -f build/*.js + +# Copy image files +find src/static -type f \( -name "*.jpg" -o -name "*.jpeg" -o -name "*.png" -o -name "*.gif" -o -name "*.svg" \) -exec cp {} build/cjs/static/ \; +find src/static -type f \( -name "*.jpg" -o -name "*.jpeg" -o -name "*.png" -o -name "*.gif" -o -name "*.svg" \) -exec cp {} build/es/static/ \; + +# Run Post processors: Update style imports in .js files, create component modules +node "$SCRIPT_DIR/post-processor.js" build/cjs +node "$SCRIPT_DIR/post-processor.js" build/es diff --git a/build-tools/fix-styles.js b/build-tools/fix-styles.js new file mode 100644 index 0000000..578987b --- /dev/null +++ b/build-tools/fix-styles.js @@ -0,0 +1,27 @@ +import { promises as fs } from "fs" +import { join } from "path" + +async function fixStyles(file, dir) { + const filePath = join(dir, file) + if (filePath.endsWith(".js") || filePath.endsWith(".d.ts")) { + try { + let content = await fs.readFile(filePath, "utf8") + // Remove lines that import or require .scss files + content = content + .split("\n") + .filter((line) => { + return !line.match(/import.*\.scss|require\(".*\.scss"\)/) + }) + .join("\n") + if (filePath.endsWith(".js")) { + // Add import "../style.css" at the top of js files + content = `import "../style.css";\n${content}` + } + await fs.writeFile(filePath, content, "utf8") + } catch (error) { + console.error(`Error processing file ${filePath}:`, error) + } + } +} + +export default fixStyles diff --git a/build-tools/generate-module.js b/build-tools/generate-module.js new file mode 100644 index 0000000..1e435e9 --- /dev/null +++ b/build-tools/generate-module.js @@ -0,0 +1,31 @@ +import { promises as fs } from "fs" +import { dirname, resolve } from "path" +import { fileURLToPath } from "url" + +const __filename = fileURLToPath(import.meta.url) +const __dirname = dirname(__filename) + +async function generateModule(fileName, parentDir) { + if (fileName.endsWith(".js")) { + const dir = fileName.slice(0, -3) + const name = `@armco/components/${dir}` + const packageJsonContent = { + name, + main: `../cjs/${dir}.js`, + module: `../es/${dir}.js`, + types: `../es/${dir}.d.ts`, + } + const dirPath = resolve(__dirname, `../build/${dir}`) + try { + await fs.mkdir(dirPath, { recursive: true }) + await fs.writeFile( + resolve(dirPath, "package.json"), + JSON.stringify(packageJsonContent, null, 2), + ) + } catch (error) { + console.error(`Error processing directory ${dirPath}:`, error) + } + } +} + +export default generateModule diff --git a/build-tools/post-processor.js b/build-tools/post-processor.js new file mode 100644 index 0000000..a34466c --- /dev/null +++ b/build-tools/post-processor.js @@ -0,0 +1,25 @@ +import { readdir } from "fs/promises" +import fixStyles from "./fix-styles.js" +import generateModule from "./generate-module.js" + +async function postProcessor(dir) { + try { + const files = await readdir(dir) + await Promise.all( + files.map(async (file) => { + await fixStyles(file, dir) + await generateModule(file, dir) + }), + ) + } catch (error) { + console.error(`Error processing directory ${dir}:`, error) + } +} + +const targetDir = process.argv[2] +if (targetDir) { + postProcessor(targetDir) +} else { + console.error("Please provide the build directory to run post processor on.") + process.exit(1) +} diff --git a/copy_files.sh b/copy_files.sh new file mode 100755 index 0000000..8479dcf --- /dev/null +++ b/copy_files.sh @@ -0,0 +1,56 @@ +#!/bin/bash + +# Function to split the string into an array based on a delimiter +split_string() { + local string="$1" + local delimiter="$2" + IFS="$delimiter" read -r -a array <<< "$string" + echo "${array[@]}" +} + +# Function to move files +copy_files() { + local input_path="$1" + local exclude_path="$2" + local destination_path="$3" + + # Split the exclude path into an array + local -a exclude_dirs=($(split_string "$exclude_path" ",")) + + # Iterate over each directory under the input path + for dir in "$input_path"/*; do + if [ -d "$dir" ]; then + dir_name=$(basename "$dir") + + # Check if the directory name is in the exclude array + if [[ " ${exclude_dirs[@]} " =~ " ${dir_name} " ]]; then + echo "Skipping directory: $dir_name" + continue + fi + + # Find and move .ts, .tsx, and .scss files to the destination path, excluding *.test.ts and index.ts + find "$dir" -type f \( -name "*.ts" -o -name "*.tsx" -o -name "*.scss" \) ! -name "*.test.ts" ! -name "index.ts" -exec cp {} "$destination_path" \; + fi + find "$input_path" -maxdepth 1 -type f ! -name "*.test.ts" ! -name "index.ts" -exec cp {} "$destination_path" \; + done +} + +# Main script execution +if [ "$#" -ne 3 ]; then + echo "Usage: $0 " + exit 1 +fi + +input_path="$1" +exclude_path="$2" +destination_path="$3" + +rm -rf $destination_path + +# Ensure the destination path exists +mkdir -p "$destination_path" + +# Call the move_files function +copy_files "$input_path" "$exclude_path" "$destination_path" + +echo "Files moved successfully." \ No newline at end of file diff --git a/package.json b/package.json new file mode 100644 index 0000000..b1a5f0b --- /dev/null +++ b/package.json @@ -0,0 +1,142 @@ +{ + "name": "@armco/shared-components", + "description": "React Component Lib of independent components that can be utilised by sophisticated ones in @armco/components", + "version": "0.0.47", + "type": "module", + "author": "Armco (@restruct-corporate-advantage)", + "scripts": { + "build": "./build-tools/build.sh", + "build:publish": "./scripts/build.sh", + "build:publish:compile": "tsc --p ./tsconfig-build.json && vite build --config vite-publish.config.ts", + "plop": "plop component", + "format": "prettier --write .", + "lint": "eslint .", + "type-check": "tsc", + "publish:dry": "npm publish --dry-run", + "publish:local": "./scripts/publish-local.sh", + "publish:public": "./scripts/publish.sh" + }, + "dependencies": { + "@armco/utils": "^0.0.0", + "@popperjs/core": "^2.11.8", + "bootstrap": "^5.3.0", + "classnames": "^2.3.2", + "d3": "^7.9.0", + "highcharts": "^11.2.0", + "highcharts-react-official": "^3.2.1", + "highlight.js": "^11.8.0", + "js-cookie": "^3.0.5", + "moment": "^2.29.4", + "react-app-polyfill": "^3.0.0", + "react-bootstrap": "^2.7.4", + "react-dev-utils": "^12.0.1", + "react-dnd": ">=16.0.0", + "react-dnd-html5-backend": ">=16.0.0", + "react-dnd-touch-backend": ">=16.0.0", + "react-draggable": "^4.4.6", + "react-redux": "^8.0.1", + "react-resizable": "^3.0.5", + "react-router-dom": "^6.13.0", + "react-table": "^7.8.0", + "resize-observer-polyfill": "^1.5.1", + "svgpath": "^2.6.0", + "uuid": "^9.0.0", + "vite-plugin-svgr": "^3.2.0" + }, + "devDependencies": { + "@armco/types": "^0.0.6", + "@babel/preset-env": "^7.24.5", + "@babel/preset-react": "^7.24.1", + "@babel/preset-typescript": "^7.24.1", + "@testing-library/dom": "^9.2.0", + "@testing-library/jest-dom": "^5.11.4", + "@testing-library/react": "^14.0.0", + "@testing-library/user-event": "^14.2.5", + "@types/bootstrap": "^5.2.6", + "@types/d3": "^7.4.0", + "@types/js-cookie": "^3.0.3", + "@types/react": "^18.0.15", + "@types/react-dom": "^18.2.18", + "@types/react-resizable": "^3.0.7", + "@types/react-table": "^7.7.19", + "@types/testing-library__jest-dom": "^5.14.5", + "@types/uuid": "^9.0.2", + "@vitejs/plugin-react": "^4.0.0", + "chalk": "^5.3.0", + "cherry-pick": "^0.5.0", + "cpy-cli": "^5.0.0", + "eslint": "^8.0.0", + "eslint-config-react-app": "^7.0.1", + "eslint-plugin-prettier": "^4.2.1", + "eslint-plugin-storybook": "^0.6.12", + "execa": "^8.0.1", + "fs-extra": "^11.2.0", + "glob": "^10.3.10", + "jest": "^29.7.0", + "jest-environment-jsdom": "^29.7.0", + "jsdom": "^21.1.0", + "plop": "^3.1.2", + "prettier": "^2.7.1", + "prettier-config-nick": "^1.0.2", + "prop-types": "^15.8.1", + "react": ">=16.8.0", + "react-dom": "^18.2.0", + "rollup-plugin-visualizer": "^5.12.0", + "sass": "^1.63.4", + "storybook": "^7.0.23", + "ts-jest": "^29.2.3", + "ts-node": "^10.9.2", + "typescript": "^5.0.2", + "vite": "^4.0.0", + "vite-plugin-dts": "^3.7.1", + "vitest": "^0.30.1" + }, + "peerDependencies": { + "react": ">=16.8.0", + "react-dnd": ">=16.0.0", + "react-dnd-html5-backend": ">=16.0.0", + "react-dnd-touch-backend": ">=16.0.0", + "react-redux": "^8.0.1", + "react-router-dom": "^6.13.0" + }, + "eslintConfig": { + "extends": [ + "react-app", + "react-app/jest", + "plugin:storybook/recommended" + ], + "plugins": [ + "prettier" + ], + "rules": { + "prettier/prettier": "error", + "react/jsx-no-target-blank": "off" + } + }, + "prettier": "prettier-config-nick", + "types": "build/es/index.d.ts", + "main": "build/cjs/index.js", + "module": "build/es/index.js", + "repository": { + "type": "git", + "url": "git+https://github.com/ReStruct-Corporate-Advantage/armory-react-components.git" + }, + "keywords": [ + "react", + "vite", + "reduxToolkit", + "sass", + "components", + "atomic", + "building-blocks", + "foundation" + ], + "files": [ + "build" + ], + "license": "ISC", + "bugs": { + "url": "https://github.com/ReStruct-Corporate-Advantage/armory-react-components/issues" + }, + "homepage": "https://github.com/ReStruct-Corporate-Advantage/armory-react-components#readme" +} diff --git a/plop-templates/Component/Component.component.scss.hbs b/plop-templates/Component/Component.component.scss.hbs new file mode 100755 index 0000000..2baf3c5 --- /dev/null +++ b/plop-templates/Component/Component.component.scss.hbs @@ -0,0 +1,3 @@ +.ar-{{pascalCase name}} { + +} diff --git a/plop-templates/Component/Component.test.ts.hbs b/plop-templates/Component/Component.test.ts.hbs new file mode 100755 index 0000000..ded95c0 --- /dev/null +++ b/plop-templates/Component/Component.test.ts.hbs @@ -0,0 +1,8 @@ +import React from "react" +import {{pascalCase name}} from "./{{pascalCase name}}" + +describe("{{pascalCase name}}", () => { + it("renders without error", () => { + + }) +}) diff --git a/plop-templates/Component/Component.tsx.hbs b/plop-templates/Component/Component.tsx.hbs new file mode 100755 index 0000000..bf62604 --- /dev/null +++ b/plop-templates/Component/Component.tsx.hbs @@ -0,0 +1,8 @@ +import { {{pascalCase name}}Props } from "@armco/types" +import "./{{pascalCase name}}.component.scss" + +const {{pascalCase name}} = (props: {{pascalCase name}}Props): JSX.Element => { + return
In Component {{pascalCase name}}
+} + +export default {{pascalCase name}} diff --git a/plop-templates/Component/index.ts.hbs b/plop-templates/Component/index.ts.hbs new file mode 100755 index 0000000..e87c569 --- /dev/null +++ b/plop-templates/Component/index.ts.hbs @@ -0,0 +1,3 @@ +import {{pascalCase name}} from "./{{pascalCase name}}" + +export default {{pascalCase name}} diff --git a/plop-templates/Page/Page.page.scss.hbs b/plop-templates/Page/Page.page.scss.hbs new file mode 100755 index 0000000..2baf3c5 --- /dev/null +++ b/plop-templates/Page/Page.page.scss.hbs @@ -0,0 +1,3 @@ +.ar-{{pascalCase name}} { + +} diff --git a/plop-templates/Page/Page.slice.ts.hbs b/plop-templates/Page/Page.slice.ts.hbs new file mode 100644 index 0000000..d373802 --- /dev/null +++ b/plop-templates/Page/Page.slice.ts.hbs @@ -0,0 +1,18 @@ +import { createSlice } from "@reduxjs/toolkit" + +export interface {{pascalCase name}}State {} + +const initialState: {{pascalCase name}}State = {} + +export const {{camelCase name}}Slice = createSlice({ + name: "{{camelCase name}}", + initialState, + reducers: { + increment: (state) => {}, + }, + extraReducers: (builder) => {}, +}) + +export const { increment } = {{camelCase name}}Slice.actions + +export default {{camelCase name}}Slice.reducer diff --git a/plop-templates/Page/Page.test.ts.hbs b/plop-templates/Page/Page.test.ts.hbs new file mode 100755 index 0000000..ded95c0 --- /dev/null +++ b/plop-templates/Page/Page.test.ts.hbs @@ -0,0 +1,8 @@ +import React from "react" +import {{pascalCase name}} from "./{{pascalCase name}}" + +describe("{{pascalCase name}}", () => { + it("renders without error", () => { + + }) +}) diff --git a/plop-templates/Page/Page.tsx.hbs b/plop-templates/Page/Page.tsx.hbs new file mode 100755 index 0000000..19b8cb5 --- /dev/null +++ b/plop-templates/Page/Page.tsx.hbs @@ -0,0 +1,9 @@ +import "./{{pascalCase name}}.page.scss" + +interface {{pascalCase name}}Props {} + +const {{pascalCase name}} = (props: {{pascalCase name}}Props): JSX.Element => { + return
In Page {{pascalCase name}}
+} + +export default {{pascalCase name}} diff --git a/plop-templates/Page/index.ts.hbs b/plop-templates/Page/index.ts.hbs new file mode 100755 index 0000000..e87c569 --- /dev/null +++ b/plop-templates/Page/index.ts.hbs @@ -0,0 +1,3 @@ +import {{pascalCase name}} from "./{{pascalCase name}}" + +export default {{pascalCase name}} diff --git a/plop-templates/components.interface.ts.hbs b/plop-templates/components.interface.ts.hbs new file mode 100644 index 0000000..1eb7881 --- /dev/null +++ b/plop-templates/components.interface.ts.hbs @@ -0,0 +1,2 @@ +/* PLOP_INJECT_INTERFACE */ + diff --git a/plop-templates/injectable-index.ts.hbs b/plop-templates/injectable-index.ts.hbs new file mode 100755 index 0000000..0bc5d7b --- /dev/null +++ b/plop-templates/injectable-index.ts.hbs @@ -0,0 +1,13 @@ +/* PLOP_INJECT_IMPORT */ + +import { + /* PLOP_INJECT_TYPE_IMPORT +} from "../types/components.interface" + +export { + /* PLOP_INJECT_EXPORT */ +} + +export { + /* PLOP_INJECT_TYPE_EXPORT */ +} \ No newline at end of file diff --git a/plopfile.cjs b/plopfile.cjs new file mode 100644 index 0000000..c4c8373 --- /dev/null +++ b/plopfile.cjs @@ -0,0 +1,261 @@ +module.exports = (plop) => { + plop.setGenerator("component", { + description: "Create a component", + prompts: [ + { + type: "input", + name: "name", + message: "What is your component name?", + }, + ], + actions: [ + { + type: "add", + path: "src/app/components/{{pascalCase name}}/{{pascalCase name}}.tsx", + templateFile: "plop-templates/Component/Component.tsx.hbs", + }, + { + type: "add", + path: "src/app/components/{{pascalCase name}}/{{pascalCase name}}.test.ts", + templateFile: "plop-templates/Component/Component.test.ts.hbs", + }, + { + type: "add", + path: "src/app/components/{{pascalCase name}}/{{pascalCase name}}.component.scss", + templateFile: "plop-templates/Component/Component.component.scss.hbs", + }, + { + type: "add", + path: "src/app/components/{{pascalCase name}}/index.ts", + templateFile: "plop-templates/Component/index.ts.hbs", + }, + { + type: "add", + path: "src/app/components/index.ts", + templateFile: "plop-templates/injectable-index.ts.hbs", + skipIfExists: true, + }, + { + type: "append", + path: "src/app/components/index.ts", + pattern: `/* PLOP_INJECT_IMPORT */`, + template: `import {{pascalCase name}} from "./{{pascalCase name}}"`, + }, + { + type: "append", + path: "src/app/components/index.ts", + pattern: `/* PLOP_INJECT_EXPORT */`, + template: ` {{pascalCase name}},`, + }, + { + type: "append", + path: "src/app/components/index.ts", + pattern: `/* PLOP_INJECT_TYPE_IMPORT */`, + template: ` {{pascalCase name}}Props,`, + }, + { + type: "append", + path: "src/app/components/index.ts", + pattern: `/* PLOP_INJECT_TYPE_EXPORT */`, + template: ` type {{pascalCase name}}Props,`, + }, + { + type: "append", + path: "src/app/types/components.interface.ts", + pattern: `/* PLOP_INJECT_INTERFACE */`, + template: `export interface {{pascalCase name}}Props extends BaseProps {\n}\n`, + }, + ], + }) + plop.setGenerator("atom", { + description: "Create a component", + prompts: [ + { + type: "input", + name: "name", + message: "What is your component name?", + }, + ], + actions: [ + { + type: "add", + path: "src/app/components/atoms/{{pascalCase name}}/{{pascalCase name}}.tsx", + templateFile: "plop-templates/Component/Component.tsx.hbs", + }, + { + type: "add", + path: "src/app/components/atoms/{{pascalCase name}}/{{pascalCase name}}.test.ts", + templateFile: "plop-templates/Component/Component.test.ts.hbs", + }, + { + type: "add", + path: "src/app/components/atoms/{{pascalCase name}}/{{pascalCase name}}.component.scss", + templateFile: "plop-templates/Component/Component.component.scss.hbs", + }, + { + type: "add", + path: "src/app/components/atoms/{{pascalCase name}}/index.ts", + templateFile: "plop-templates/Component/index.ts.hbs", + }, + { + type: "add", + path: "src/app/components/index.ts", + templateFile: "plop-templates/injectable-index.ts.hbs", + skipIfExists: true, + }, + { + type: "append", + path: "src/app/components/atoms/index.ts", + pattern: `/* PLOP_INJECT_IMPORT */`, + template: `import {{pascalCase name}} from "./{{pascalCase name}}"`, + }, + { + type: "append", + path: "src/app/components/atoms/index.ts", + pattern: `/* PLOP_INJECT_EXPORT */`, + template: ` {{pascalCase name}},`, + }, + { + type: "append", + path: "src/app/components/atoms/index.ts", + pattern: `/* PLOP_INJECT_TYPE_IMPORT */`, + template: ` {{pascalCase name}}Props,`, + }, + { + type: "append", + path: "src/app/components/atoms/index.ts", + pattern: `/* PLOP_INJECT_TYPE_EXPORT */`, + template: ` type {{pascalCase name}}Props,`, + }, + { + type: "append", + path: "src/app/types/components.interface.ts", + pattern: `/* PLOP_INJECT_INTERFACE */`, + template: `export interface {{pascalCase name}}Props extends BaseProps {\n}\n`, + }, + ], + }) + plop.setGenerator("molecule", { + description: "Create a rich component", + prompts: [ + { + type: "input", + name: "name", + message: "What is your component name?", + }, + ], + actions: [ + { + type: "add", + path: "src/app/components/molecules/{{pascalCase name}}/{{pascalCase name}}.tsx", + templateFile: "plop-templates/Component/Component.tsx.hbs", + }, + { + type: "add", + path: "src/app/components/molecules/{{pascalCase name}}/{{pascalCase name}}.test.ts", + templateFile: "plop-templates/Component/Component.test.ts.hbs", + }, + { + type: "add", + path: "src/app/components/molecules/{{pascalCase name}}/{{pascalCase name}}.component.scss", + templateFile: "plop-templates/Component/Component.component.scss.hbs", + }, + { + type: "add", + path: "src/app/components/molecules/{{pascalCase name}}/index.ts", + templateFile: "plop-templates/Component/index.ts.hbs", + }, + { + type: "add", + path: "src/app/components/index.ts", + templateFile: "plop-templates/injectable-index.ts.hbs", + skipIfExists: true, + }, + { + type: "append", + path: "src/app/components/molecules/index.ts", + pattern: `/* PLOP_INJECT_IMPORT */`, + template: `import {{pascalCase name}} from "./{{pascalCase name}}"`, + }, + { + type: "append", + path: "src/app/components/molecules/index.ts", + pattern: `/* PLOP_INJECT_EXPORT */`, + template: ` {{pascalCase name}},`, + }, + { + type: "append", + path: "src/app/components/molecules/index.ts", + pattern: `/* PLOP_INJECT_TYPE_IMPORT */`, + template: ` {{pascalCase name}}Props,`, + }, + { + type: "append", + path: "src/app/components/molecules/index.ts", + pattern: `/* PLOP_INJECT_TYPE_EXPORT */`, + template: ` type {{pascalCase name}}Props,`, + }, + { + type: "append", + path: "src/app/types/components.interface.ts", + pattern: `/* PLOP_INJECT_INTERFACE */`, + template: `export interface {{pascalCase name}}Props extends BaseProps {\n}\n`, + }, + ], + }) + plop.setGenerator("page", { + description: "Create a page", + prompts: [ + { + type: "input", + name: "name", + message: "What is your page name?", + }, + ], + actions: [ + { + type: "add", + path: "src/app/pages/{{pascalCase name}}/{{pascalCase name}}.tsx", + templateFile: "plop-templates/Page/Page.tsx.hbs", + }, + { + type: "add", + path: "src/app/pages/{{pascalCase name}}/{{pascalCase name}}.test.ts", + templateFile: "plop-templates/Page/Page.test.ts.hbs", + }, + { + type: "add", + path: "src/app/pages/{{pascalCase name}}/{{pascalCase name}}.page.scss", + templateFile: "plop-templates/Page/Page.page.scss.hbs", + }, + { + type: "add", + path: "src/app/pages/{{pascalCase name}}/index.ts", + templateFile: "plop-templates/Page/index.ts.hbs", + }, + { + type: "add", + path: "src/app/pages/{{pascalCase name}}/{{pascalCase name}}.slice.ts", + templateFile: "plop-templates/Page/Page.slice.ts.hbs", + }, + { + type: "add", + path: "src/app/pages/index.ts", + templateFile: "plop-templates/injectable-index.ts.hbs", + skipIfExists: true, + }, + { + type: "append", + path: "src/app/pages/index.ts", + pattern: `/* PLOP_INJECT_IMPORT */`, + template: `import {{pascalCase name}} from "./{{pascalCase name}}"`, + }, + { + type: "append", + path: "src/app/pages/index.ts", + pattern: `/* PLOP_INJECT_EXPORT */`, + template: ` {{pascalCase name}},`, + }, + ], + }) +} diff --git a/publish.sh b/publish.sh new file mode 100755 index 0000000..74657a8 --- /dev/null +++ b/publish.sh @@ -0,0 +1,8 @@ +#!/bin/sh + +semver=${1:-patch} + +set -e +source ./build-tools/build.sh +npm --no-git-tag-version version ${semver} +npm publish --access public diff --git a/src bkup/AboutUs/AboutUs.component.scss b/src bkup/AboutUs/AboutUs.component.scss new file mode 100755 index 0000000..c883e87 --- /dev/null +++ b/src bkup/AboutUs/AboutUs.component.scss @@ -0,0 +1,3 @@ +.ar-AboutUs { + +} diff --git a/src bkup/AboutUs/AboutUs.test.ts b/src bkup/AboutUs/AboutUs.test.ts new file mode 100755 index 0000000..8ed5475 --- /dev/null +++ b/src bkup/AboutUs/AboutUs.test.ts @@ -0,0 +1,8 @@ +import React from "react" +import AboutUs from "./AboutUs" + +describe("AboutUs", () => { + it("renders without error", () => { + + }) +}) \ No newline at end of file diff --git a/src bkup/AboutUs/AboutUs.tsx b/src bkup/AboutUs/AboutUs.tsx new file mode 100755 index 0000000..516fe73 --- /dev/null +++ b/src bkup/AboutUs/AboutUs.tsx @@ -0,0 +1,8 @@ +import { AboutUsProps } from "@armco/types" +import "./AboutUs.component.scss" + +const AboutUs = (props: AboutUsProps): JSX.Element => { + return
In Component AboutUs
+} + +export default AboutUs diff --git a/src bkup/AboutUs/index.ts b/src bkup/AboutUs/index.ts new file mode 100755 index 0000000..d4bd779 --- /dev/null +++ b/src bkup/AboutUs/index.ts @@ -0,0 +1,3 @@ +import AboutUs from "./AboutUs" + +export default AboutUs \ No newline at end of file diff --git a/src bkup/Accordion/Accordion.component.scss b/src bkup/Accordion/Accordion.component.scss new file mode 100755 index 0000000..ed5973e --- /dev/null +++ b/src bkup/Accordion/Accordion.component.scss @@ -0,0 +1,32 @@ +.ar-Accordion { + .ar-AccordionExpansionPanel { + .ar-AccordionExpansionPanel__content { + max-height: 0; + transition: max-height 0.3s; + overflow: auto; + } + .ar-AccordionExpansionPanel__title-expand-icon { + transition: transform 0.3s; + } + &.expanded { + .ar-AccordionExpansionPanel__title-expand-icon { + transform: rotateZ(90deg); + } + } + &.expanded:not(:last-child) .ar-AccordionExpansionPanel__title, &:not(:last-child) .ar-AccordionExpansionPanel__content { + border-bottom: var(--ar-border); + } + } + + &.stacked { + border-radius: 5px; + overflow: hidden; + border: var(--ar-border); + .ar-AccordionExpansionPanel { + .ar-AccordionExpansionPanel__title { + background-color: var(--ar-bg-mild); + + } + } + } +} diff --git a/src bkup/Accordion/Accordion.test.ts b/src bkup/Accordion/Accordion.test.ts new file mode 100755 index 0000000..ebd703d --- /dev/null +++ b/src bkup/Accordion/Accordion.test.ts @@ -0,0 +1,8 @@ +import React from "react" +import Accordion from "./Accordion" + +describe("Accordion", () => { + it("renders without error", () => { + + }) +}) diff --git a/src bkup/Accordion/Accordion.tsx b/src bkup/Accordion/Accordion.tsx new file mode 100755 index 0000000..8c14b4a --- /dev/null +++ b/src bkup/Accordion/Accordion.tsx @@ -0,0 +1,150 @@ +import { ReactNode, useEffect, useRef, useState } from "react" +import { + ArAccordionVariants, + ArThemes, + AccordionExpansionPanelProps, + AccordionProps, +} from "@armco/types" +import { Icon } from "@armco/icon" +import "./Accordion.component.scss" + +const AccordionExpansionPanel = ( + props: AccordionExpansionPanelProps, +): ReactNode => { + const { + classes, + content, + expanded: expandedPre, + id, + isRemovable, + setExpandedId, + shouldGrow, + theme, + title, + } = props + const contentRef = useRef(null) + const [expanded, setExpanded] = useState() + + useEffect(() => { + setExpanded(expandedPre) + }, [expandedPre]) + + useEffect(() => { + if (contentRef.current) { + contentRef.current.style.maxHeight = expanded + ? shouldGrow + ? "100%" + : contentRef.current.scrollHeight + 5 + "px" + : 0 + "px" + } + }, [expanded, shouldGrow]) + + return ( +
+
{ + setExpanded(!expanded) + setExpandedId && setExpandedId(id) + }} + > + + + + {title} + {isRemovable && ( + + )} +
+
+ {typeof content === "string" ? ( +
{content}
+ ) : ( + content + )} +
+
+ ) +} + +const Accordion = (props: AccordionProps): JSX.Element => { + const { + appearance, + classes, + data, + firstExpanded, + isRemovable, + theme, + variant, + } = props + const [expanded, setExpanded] = useState() + const [localData, setLocalData] = + useState>() + + useEffect(() => { + if (data) { + if (firstExpanded) { + data[0] && (data[0].expanded = true) + setExpanded(data[0].id) + } + setLocalData(data) + } + }, [data, firstExpanded]) + + useEffect(() => { + if (variant === ArAccordionVariants.LIMITED) { + const dataClone = [...data] + dataClone.forEach((item) => (item.expanded = expanded === item.id)) + setLocalData(dataClone) + } + }, [expanded, variant, data]) + + return ( +
+ {localData?.map((item, index) => { + item.setExpandedId = setExpanded + item.isRemovable = + item.isRemovable !== undefined ? item.isRemovable : !!isRemovable + return ( + + ) + })} +
+ ) +} + +export default Accordion diff --git a/src bkup/Accordion/index.ts b/src bkup/Accordion/index.ts new file mode 100755 index 0000000..eb5cbc1 --- /dev/null +++ b/src bkup/Accordion/index.ts @@ -0,0 +1,3 @@ +import Accordion from "./Accordion" + +export default Accordion diff --git a/src bkup/AdvancedColorPicker/AdvancedColorPicker.component.scss b/src bkup/AdvancedColorPicker/AdvancedColorPicker.component.scss new file mode 100755 index 0000000..48d147e --- /dev/null +++ b/src bkup/AdvancedColorPicker/AdvancedColorPicker.component.scss @@ -0,0 +1,3 @@ +.ar-AdvancedColorPicker { + +} diff --git a/src bkup/AdvancedColorPicker/AdvancedColorPicker.test.ts b/src bkup/AdvancedColorPicker/AdvancedColorPicker.test.ts new file mode 100755 index 0000000..b2f5bc4 --- /dev/null +++ b/src bkup/AdvancedColorPicker/AdvancedColorPicker.test.ts @@ -0,0 +1,8 @@ +import React from "react" +import AdvancedColorPicker from "./AdvancedColorPicker" + +describe("AdvancedColorPicker", () => { + it("renders without error", () => { + + }) +}) diff --git a/src bkup/AdvancedColorPicker/AdvancedColorPicker.tsx b/src bkup/AdvancedColorPicker/AdvancedColorPicker.tsx new file mode 100755 index 0000000..6735001 --- /dev/null +++ b/src bkup/AdvancedColorPicker/AdvancedColorPicker.tsx @@ -0,0 +1,123 @@ +import { useEffect, useState } from "react" +import { AdvancedColorPickerProps } from "@armco/types" +import { DomHelper } from "@armco/utils" +import { Slider } from ".." +import { ColorMapImage } from "../static" +import COLOR_PICKER_CONFIG from "./ColorPickerConfig" +import "./AdvancedColorPicker.component.scss" + +const AdvancedColorPicker = (props: AdvancedColorPickerProps): JSX.Element => { + const { demo, displaySample, id, onColorSelect, title } = props + const [color, setColor] = useState() + const [hue, setHue] = useState() + const [saturation, setSaturation] = useState() + const [lightness, setLightness] = useState() + + useEffect(() => { + if ( + hue !== undefined && + saturation !== undefined && + lightness !== undefined + ) { + const colorInHex = DomHelper.hslToHex(hue, saturation, lightness) + setColor(colorInHex) + onColorSelect && onColorSelect(colorInHex) + } + }, [hue, saturation, lightness, onColorSelect]) + + const getColorNameHsl = () => { + return hue !== undefined && + saturation !== undefined && + lightness !== undefined + ? "hsl(" + + Math.round(hue * 255) + + ", " + + Math.round(saturation * 100) + + "%, " + + Math.round(lightness * 100) + + "%)" + : "" + } + + return ( +
+ {title && ( + {title} + )} + {`colormap-${id}`} + + {COLOR_PICKER_CONFIG.map((config, index) => { + return ( + { + setColor(config.color) + const [h, s, l] = DomHelper.hexToHsl(config.color, true) + setHue(h as number) + setSaturation(s as number) + setLightness(l as number) + // onColorSelect && onColorSelect(config.color) + }} + alt={config.color} + /> + ) + })} + + {displaySample && color && ( +
+
+ {getColorNameHsl()} +
+ )} +
+ + setHue(parseInt((e.target as HTMLInputElement).value) / 255) + } + withManual + /> + + setSaturation(parseInt((e.target as HTMLInputElement).value) / 100) + } + withManual + /> + + setLightness(parseInt((e.target as HTMLInputElement).value) / 100) + } + withManual + /> +
+ {demo && ( +
+ )} +
+ ) +} + +export default AdvancedColorPicker diff --git a/src bkup/AdvancedColorPicker/ColorPickerConfig.ts b/src bkup/AdvancedColorPicker/ColorPickerConfig.ts new file mode 100644 index 0000000..a053840 --- /dev/null +++ b/src bkup/AdvancedColorPicker/ColorPickerConfig.ts @@ -0,0 +1,221 @@ +const colorPickerConfig = [ + { coord: "63,0,72,4,72,15,63,19,54,15,54,4", color: "#003366" }, + { coord: "81,0,90,4,90,15,81,19,72,15,72,4", color: "#336699" }, + { coord: "99,0,108,4,108,15,99,19,90,15,90,4", color: "#3366CC" }, + { coord: "117,0,126,4,126,15,117,19,108,15,108,4", color: "#003399" }, + { coord: "135,0,144,4,144,15,135,19,126,15,126,4", color: "#000099" }, + { coord: "153,0,162,4,162,15,153,19,144,15,144,4", color: "#0000CC" }, + { coord: "171,0,180,4,180,15,171,19,162,15,162,4", color: "#000066" }, + { coord: "54,15,63,19,63,30,54,34,45,30,45,19", color: "#006666" }, + { coord: "72,15,81,19,81,30,72,34,63,30,63,19", color: "#006699" }, + { coord: "90,15,99,19,99,30,90,34,81,30,81,19", color: "#0099CC" }, + { coord: "108,15,117,19,117,30,108,34,99,30,99,19", color: "#0066CC" }, + { coord: "126,15,135,19,135,30,126,34,117,30,117,19", color: "#0033CC" }, + { coord: "144,15,153,19,153,30,144,34,135,30,135,19", color: "#0000FF" }, + { coord: "162,15,171,19,171,30,162,34,153,30,153,19", color: "#3333FF" }, + { coord: "180,15,189,19,189,30,180,34,171,30,171,19", color: "#333399" }, + { coord: "45,30,54,34,54,45,45,49,36,45,36,34", color: "#669999" }, + { coord: "63,30,72,34,72,45,63,49,54,45,54,34", color: "#009999" }, + { coord: "81,30,90,34,90,45,81,49,72,45,72,34", color: "#33CCCC" }, + { coord: "99,30,108,34,108,45,99,49,90,45,90,34", color: "#00CCFF" }, + { coord: "117,30,126,34,126,45,117,49,108,45,108,34", color: "#0099FF" }, + { coord: "135,30,144,34,144,45,135,49,126,45,126,34", color: "#0066FF" }, + { coord: "153,30,162,34,162,45,153,49,144,45,144,34", color: "#3366FF" }, + { coord: "171,30,180,34,180,45,171,49,162,45,162,34", color: "#3333CC" }, + { coord: "189,30,198,34,198,45,189,49,180,45,180,34", color: "#666699" }, + { coord: "36,45,45,49,45,60,36,64,27,60,27,49", color: "#339966" }, + { coord: "54,45,63,49,63,60,54,64,45,60,45,49", color: "#00CC99" }, + { coord: "72,45,81,49,81,60,72,64,63,60,63,49", color: "#00FFCC" }, + { coord: "90,45,99,49,99,60,90,64,81,60,81,49", color: "#00FFFF" }, + { coord: "108,45,117,49,117,60,108,64,99,60,99,49", color: "#33CCFF" }, + { coord: "126,45,135,49,135,60,126,64,117,60,117,49", color: "#3399FF" }, + { coord: "144,45,153,49,153,60,144,64,135,60,135,49", color: "#6699FF" }, + { coord: "162,45,171,49,171,60,162,64,153,60,153,49", color: "#6666FF" }, + { coord: "180,45,189,49,189,60,180,64,171,60,171,49", color: "#6600FF" }, + { coord: "198,45,207,49,207,60,198,64,189,60,189,49", color: "#6600CC" }, + { coord: "27,60,36,64,36,75,27,79,18,75,18,64", color: "#339933" }, + { coord: "45,60,54,64,54,75,45,79,36,75,36,64", color: "#00CC66" }, + { coord: "63,60,72,64,72,75,63,79,54,75,54,64", color: "#00FF99" }, + { coord: "81,60,90,64,90,75,81,79,72,75,72,64", color: "#66FFCC" }, + { coord: "99,60,108,64,108,75,99,79,90,75,90,64", color: "#66FFFF" }, + { coord: "117,60,126,64,126,75,117,79,108,75,108,64", color: "#66CCFF" }, + { coord: "135,60,144,64,144,75,135,79,126,75,126,64", color: "#99CCFF" }, + { coord: "153,60,162,64,162,75,153,79,144,75,144,64", color: "#9999FF" }, + { coord: "171,60,180,64,180,75,171,79,162,75,162,64", color: "#9966FF" }, + { coord: "189,60,198,64,198,75,189,79,180,75,180,64", color: "#9933FF" }, + { coord: "207,60,216,64,216,75,207,79,198,75,198,64", color: "#9900FF" }, + { coord: "18,75,27,79,27,90,18,94,9,90,9,79", color: "#006600" }, + { coord: "36,75,45,79,45,90,36,94,27,90,27,79", color: "#00CC00" }, + { coord: "54,75,63,79,63,90,54,94,45,90,45,79", color: "#00FF00" }, + { coord: "72,75,81,79,81,90,72,94,63,90,63,79", color: "#66FF99" }, + { coord: "90,75,99,79,99,90,90,94,81,90,81,79", color: "#99FFCC" }, + { coord: "108,75,117,79,117,90,108,94,99,90,99,79", color: "#CCFFFF" }, + { coord: "126,75,135,79,135,90,126,94,117,90,117,79", color: "#CCCCFF" }, + { coord: "144,75,153,79,153,90,144,94,135,90,135,79", color: "#CC99FF" }, + { coord: "162,75,171,79,171,90,162,94,153,90,153,79", color: "#CC66FF" }, + { coord: "180,75,189,79,189,90,180,94,171,90,171,79", color: "#CC33FF" }, + { coord: "198,75,207,79,207,90,198,94,189,90,189,79", color: "#CC00FF" }, + { coord: "216,75,225,79,225,90,216,94,207,90,207,79", color: "#9900CC" }, + { coord: "9,90,18,94,18,105,9,109,0,105,0,94", color: "#003300" }, + { coord: "27,90,36,94,36,105,27,109,18,105,18,94", color: "#009933" }, + { coord: "45,90,54,94,54,105,45,109,36,105,36,94", color: "#33CC33" }, + { coord: "63,90,72,94,72,105,63,109,54,105,54,94", color: "#66FF66" }, + { coord: "81,90,90,94,90,105,81,109,72,105,72,94", color: "#99FF99" }, + { coord: "99,90,108,94,108,105,99,109,90,105,90,94", color: "#CCFFCC" }, + { coord: "117,90,126,94,126,105,117,109,108,105,108,94", color: "#FFFFFF" }, + { coord: "135,90,144,94,144,105,135,109,126,105,126,94", color: "#FFCCFF" }, + { coord: "153,90,162,94,162,105,153,109,144,105,144,94", color: "#FF99FF" }, + { coord: "171,90,180,94,180,105,171,109,162,105,162,94", color: "#FF66FF" }, + { coord: "189,90,198,94,198,105,189,109,180,105,180,94", color: "#FF00FF" }, + { coord: "207,90,216,94,216,105,207,109,198,105,198,94", color: "#CC00CC" }, + { coord: "225,90,234,94,234,105,225,109,216,105,216,94", color: "#660066" }, + { coord: "18,105,27,109,27,120,18,124,9,120,9,109", color: "#336600" }, + { coord: "36,105,45,109,45,120,36,124,27,120,27,109", color: "#009900" }, + { coord: "54,105,63,109,63,120,54,124,45,120,45,109", color: "#66FF33" }, + { coord: "72,105,81,109,81,120,72,124,63,120,63,109", color: "#99FF66" }, + { coord: "90,105,99,109,99,120,90,124,81,120,81,109", color: "#CCFF99" }, + { coord: "108,105,117,109,117,120,108,124,99,120,99,109", color: "#FFFFCC" }, + { + coord: "126,105,135,109,135,120,126,124,117,120,117,109", + color: "#FFCCCC", + }, + { + coord: "144,105,153,109,153,120,144,124,135,120,135,109", + color: "#FF99CC", + }, + { + coord: "162,105,171,109,171,120,162,124,153,120,153,109", + color: "#FF66CC", + }, + { + coord: "180,105,189,109,189,120,180,124,171,120,171,109", + color: "#FF33CC", + }, + { + coord: "198,105,207,109,207,120,198,124,189,120,189,109", + color: "#CC0099", + }, + { + coord: "216,105,225,109,225,120,216,124,207,120,207,109", + color: "#993399", + }, + { coord: "27,120,36,124,36,135,27,139,18,135,18,124", color: "#333300" }, + { coord: "45,120,54,124,54,135,45,139,36,135,36,124", color: "#669900" }, + { coord: "63,120,72,124,72,135,63,139,54,135,54,124", color: "#99FF33" }, + { coord: "81,120,90,124,90,135,81,139,72,135,72,124", color: "#CCFF66" }, + { coord: "99,120,108,124,108,135,99,139,90,135,90,124", color: "#FFFF99" }, + { + coord: "117,120,126,124,126,135,117,139,108,135,108,124", + color: "#FFCC99", + }, + { + coord: "135,120,144,124,144,135,135,139,126,135,126,124", + color: "#FF9999", + }, + { + coord: "153,120,162,124,162,135,153,139,144,135,144,124", + color: "#FF6699", + }, + { + coord: "171,120,180,124,180,135,171,139,162,135,162,124", + color: "#FF3399", + }, + { + coord: "189,120,198,124,198,135,189,139,180,135,180,124", + color: "#CC3399", + }, + { + coord: "207,120,216,124,216,135,207,139,198,135,198,124", + color: "#990099", + }, + { coord: "36,135,45,139,45,150,36,154,27,150,27,139", color: "#666633" }, + { coord: "54,135,63,139,63,150,54,154,45,150,45,139", color: "#99CC00" }, + { coord: "72,135,81,139,81,150,72,154,63,150,63,139", color: "#CCFF33" }, + { coord: "90,135,99,139,99,150,90,154,81,150,81,139", color: "#FFFF66" }, + { coord: "108,135,117,139,117,150,108,154,99,150,99,139", color: "#FFCC66" }, + { + coord: "126,135,135,139,135,150,126,154,117,150,117,139", + color: "#FF9966", + }, + { + coord: "144,135,153,139,153,150,144,154,135,150,135,139", + color: "#FF6666", + }, + { + coord: "162,135,171,139,171,150,162,154,153,150,153,139", + color: "#FF0066", + }, + { + coord: "180,135,189,139,189,150,180,154,171,150,171,139", + color: "#CC6699", + }, + { + coord: "198,135,207,139,207,150,198,154,189,150,189,139", + color: "#993366", + }, + { coord: "45,150,54,154,54,165,45,169,36,165,36,154", color: "#999966" }, + { coord: "63,150,72,154,72,165,63,169,54,165,54,154", color: "#CCCC00" }, + { coord: "81,150,90,154,90,165,81,169,72,165,72,154", color: "#FFFF00" }, + { coord: "99,150,108,154,108,165,99,169,90,165,90,154", color: "#FFCC00" }, + { + coord: "117,150,126,154,126,165,117,169,108,165,108,154", + color: "#FF9933", + }, + { + coord: "135,150,144,154,144,165,135,169,126,165,126,154", + color: "#FF6600", + }, + { + coord: "153,150,162,154,162,165,153,169,144,165,144,154", + color: "#FF5050", + }, + { + coord: "171,150,180,154,180,165,171,169,162,165,162,154", + color: "#CC0066", + }, + { + coord: "189,150,198,154,198,165,189,169,180,165,180,154", + color: "#660033", + }, + { coord: "54,165,63,169,63,180,54,184,45,180,45,169", color: "#996633" }, + { coord: "72,165,81,169,81,180,72,184,63,180,63,169", color: "#CC9900" }, + { coord: "90,165,99,169,99,180,90,184,81,180,81,169", color: "#FF9900" }, + { coord: "108,165,117,169,117,180,108,184,99,180,99,169", color: "#CC6600" }, + { + coord: "126,165,135,169,135,180,126,184,117,180,117,169", + color: "#FF3300", + }, + { + coord: "144,165,153,169,153,180,144,184,135,180,135,169", + color: "#FF0000", + }, + { + coord: "162,165,171,169,171,180,162,184,153,180,153,169", + color: "#CC0000", + }, + { + coord: "180,165,189,169,189,180,180,184,171,180,171,169", + color: "#990033", + }, + { coord: "63,180,72,184,72,195,63,199,54,195,54,184", color: "#663300" }, + { coord: "81,180,90,184,90,195,81,199,72,195,72,184", color: "#996600" }, + { coord: "99,180,108,184,108,195,99,199,90,195,90,184", color: "#CC3300" }, + { + coord: "117,180,126,184,126,195,117,199,108,195,108,184", + color: "#993300", + }, + { + coord: "135,180,144,184,144,195,135,199,126,195,126,184", + color: "#990000", + }, + { + coord: "153,180,162,184,162,195,153,199,144,195,144,184", + color: "#800000", + }, + { + coord: "171,180,180,184,180,195,171,199,162,195,162,184", + color: "#993333", + }, +] + +export default colorPickerConfig diff --git a/src bkup/AdvancedColorPicker/index.ts b/src bkup/AdvancedColorPicker/index.ts new file mode 100755 index 0000000..89647ca --- /dev/null +++ b/src bkup/AdvancedColorPicker/index.ts @@ -0,0 +1,3 @@ +import AdvancedColorPicker from "./AdvancedColorPicker" + +export default AdvancedColorPicker diff --git a/src bkup/Alert/Alert.component.scss b/src bkup/Alert/Alert.component.scss new file mode 100755 index 0000000..95d15ec --- /dev/null +++ b/src bkup/Alert/Alert.component.scss @@ -0,0 +1,89 @@ +.ar-Alert { + width: 20rem; + transition: all 0.3s; + border-radius: 0.2rem; + opacity: 0; + + &.show { + opacity: 1; + } + + &.top-right { + top: 1rem; + right: -8rem; + + &.show { + right: 1rem; + } + } + &.top-left { + top: 1rem; + left: -8rem; + + &.show { + left: 1rem; + } + } + &.bottom-right { + bottom: 1rem; + right: -8rem; + + &.show { + right: 1rem; + } + } + &.bottom-left { + bottom: 1rem; + left: -8rem; + + &.show { + left: 1rem; + } + } + &.top-center { + top: -5rem; + left: calc(50% - 7.5rem); + + &.show { + top: 1rem; + } + } + &.bottom-center { + bottom: -5rem; + left: calc(50% - 7.5rem); + + &.show { + bottom: 1rem; + } + } + &.warning { + background-color: rgba(237, 172, 61, 0.7); + } + &.information { + background-color: rgba(78, 205, 255, 0.7); + } + &.error { + background-color: rgba(246, 95, 95, 0.7); + } + &.success { + background-color: var(--ar-color-success-faded); + } + + .ar-Alert__icon { + width: 2rem; + height: 2rem; + } + + .ar-Alert__text { + max-width: calc(100% - 2rem); + overflow: auto; + line-height: 1rem; + // font-size: 0.85rem; + } + + .ar-Alert__close-icon { + top: 0.5rem; + right: 0.5rem; + cursor: pointer; + } +} diff --git a/src bkup/Alert/Alert.test.ts b/src bkup/Alert/Alert.test.ts new file mode 100755 index 0000000..f60b9e7 --- /dev/null +++ b/src bkup/Alert/Alert.test.ts @@ -0,0 +1,8 @@ +import React from "react" +import Alert from "./Alert" + +describe("Alert", () => { + it("renders without error", () => { + + }) +}) \ No newline at end of file diff --git a/src bkup/Alert/Alert.tsx b/src bkup/Alert/Alert.tsx new file mode 100755 index 0000000..fcb481f --- /dev/null +++ b/src bkup/Alert/Alert.tsx @@ -0,0 +1,92 @@ +import { useEffect, useState } from "react" +import { AlertProps, ArThemes } from "@armco/types" +import { Icon } from "@armco/icon" +import "./Alert.component.scss" + +let timeoutRef: any +const Alert = (props: AlertProps): JSX.Element => { + const { + classes, + closeable, + demo, + message, + position, + show: externalShow, + theme, + type, + timeout, + uid, + } = props + const [showClass, show] = useState() + + useEffect(() => { + if (externalShow || demo) { + setTimeout(() => show("show"), 0) + if (!demo || timeout) { + clearTimeout(timeoutRef) + timeoutRef = setTimeout(() => { + show("") + window.top?.postMessage({ ar: null }, "*") + }, timeout || 5000) + } + } + }, [demo, externalShow, timeout, uid]) + + let icon + switch (type) { + case "success": + icon = "bs/BsCheckCircle" + break + case "warning": + icon = "vsc/VscWarning" + break + case "error": + icon = "vsc/VscError" + break + case "information": + default: + icon = "vsc/VscInfo" + } + + return ( +
+ + + + + {message || "This is a dummy alert"} + + {closeable && ( + { + show("") + window.top?.postMessage({ ar: null }, "*") + }} + > + + + )} +
+ ) +} + +export default Alert diff --git a/src bkup/Alert/index.ts b/src bkup/Alert/index.ts new file mode 100755 index 0000000..d67f319 --- /dev/null +++ b/src bkup/Alert/index.ts @@ -0,0 +1,3 @@ +import Alert from "./Alert" + +export default Alert diff --git a/src bkup/AlertStackManager/AlertStackManager.component.scss b/src bkup/AlertStackManager/AlertStackManager.component.scss new file mode 100755 index 0000000..4c79836 --- /dev/null +++ b/src bkup/AlertStackManager/AlertStackManager.component.scss @@ -0,0 +1,3 @@ +.ar-AlertStackManager { + +} diff --git a/src bkup/AlertStackManager/AlertStackManager.test.ts b/src bkup/AlertStackManager/AlertStackManager.test.ts new file mode 100755 index 0000000..11133a0 --- /dev/null +++ b/src bkup/AlertStackManager/AlertStackManager.test.ts @@ -0,0 +1,8 @@ +import React from "react" +import AlertStackManager from "./AlertStackManager" + +describe("AlertStackManager", () => { + it("renders without error", () => { + + }) +}) diff --git a/src bkup/AlertStackManager/AlertStackManager.tsx b/src bkup/AlertStackManager/AlertStackManager.tsx new file mode 100755 index 0000000..fc69a35 --- /dev/null +++ b/src bkup/AlertStackManager/AlertStackManager.tsx @@ -0,0 +1,13 @@ +import "./AlertStackManager.component.scss" + +interface AlertStackManagerProps { + max?: number +} + +const AlertStackManager = (props: AlertStackManagerProps): JSX.Element => { + return ( +
In Component AlertStackManager
+ ) +} + +export default AlertStackManager diff --git a/src bkup/AlertStackManager/index.ts b/src bkup/AlertStackManager/index.ts new file mode 100755 index 0000000..90d87b8 --- /dev/null +++ b/src bkup/AlertStackManager/index.ts @@ -0,0 +1,3 @@ +import AlertStackManager from "./AlertStackManager" + +export default AlertStackManager diff --git a/src bkup/AlphabetFilter/AlphabetFilter.component.scss b/src bkup/AlphabetFilter/AlphabetFilter.component.scss new file mode 100755 index 0000000..cae1c75 --- /dev/null +++ b/src bkup/AlphabetFilter/AlphabetFilter.component.scss @@ -0,0 +1,3 @@ +.ar-AlphabetFilter { + +} diff --git a/src bkup/AlphabetFilter/AlphabetFilter.test.ts b/src bkup/AlphabetFilter/AlphabetFilter.test.ts new file mode 100755 index 0000000..4746738 --- /dev/null +++ b/src bkup/AlphabetFilter/AlphabetFilter.test.ts @@ -0,0 +1,8 @@ +import React from "react" +import AlphabetFilter from "./AlphabetFilter" + +describe("AlphabetFilter", () => { + it("renders without error", () => { + + }) +}) diff --git a/src bkup/AlphabetFilter/AlphabetFilter.tsx b/src bkup/AlphabetFilter/AlphabetFilter.tsx new file mode 100755 index 0000000..fc9650e --- /dev/null +++ b/src bkup/AlphabetFilter/AlphabetFilter.tsx @@ -0,0 +1,35 @@ +import { ArPillSizes, BasicFilterConfig } from "@armco/types" +import { SelectionPill } from ".." +import "./AlphabetFilter.component.scss" + +interface AlphabetFilterProps { + onSelectionChanged: Function +} + +const AlphabetFilter = (props: AlphabetFilterProps): JSX.Element => { + const { onSelectionChanged } = props + const alpha = Array.from(Array(26)).map((e, i) => i + 65) + const alphabet = alpha.map((x) => String.fromCharCode(x)) + + return ( +
+ +
+ {alphabet.map((char) => ( + + onSelectionChanged(data, "alphabet") + } + /> + ))} +
+
+ ) +} + +export default AlphabetFilter diff --git a/src bkup/AlphabetFilter/index.ts b/src bkup/AlphabetFilter/index.ts new file mode 100755 index 0000000..3e171ad --- /dev/null +++ b/src bkup/AlphabetFilter/index.ts @@ -0,0 +1,3 @@ +import AlphabetFilter from "./AlphabetFilter" + +export default AlphabetFilter diff --git a/src bkup/Anchor/Anchor.component.scss b/src bkup/Anchor/Anchor.component.scss new file mode 100755 index 0000000..78ef6ad --- /dev/null +++ b/src bkup/Anchor/Anchor.component.scss @@ -0,0 +1,3 @@ +.ar-Anchor { + +} diff --git a/src bkup/Anchor/Anchor.test.ts b/src bkup/Anchor/Anchor.test.ts new file mode 100755 index 0000000..bd048eb --- /dev/null +++ b/src bkup/Anchor/Anchor.test.ts @@ -0,0 +1,8 @@ +import React from "react" +import Anchor from "./Anchor" + +describe("Anchor", () => { + it("renders without error", () => { + + }) +}) diff --git a/src bkup/Anchor/Anchor.tsx b/src bkup/Anchor/Anchor.tsx new file mode 100755 index 0000000..d714c85 --- /dev/null +++ b/src bkup/Anchor/Anchor.tsx @@ -0,0 +1,13 @@ +import { AnchorProps } from "@armco/types" +import "./Anchor.component.scss" + +const Anchor = (props: AnchorProps): JSX.Element => { + const { classes, text, ...rest } = props + return ( + + {text} + + ) +} + +export default Anchor diff --git a/src bkup/Anchor/index.ts b/src bkup/Anchor/index.ts new file mode 100755 index 0000000..9c4a4b0 --- /dev/null +++ b/src bkup/Anchor/index.ts @@ -0,0 +1,3 @@ +import Anchor from "./Anchor" + +export default Anchor diff --git a/src bkup/AppAndToolsSelector/AppAndToolsSelector.component.scss b/src bkup/AppAndToolsSelector/AppAndToolsSelector.component.scss new file mode 100755 index 0000000..3b8a9ff --- /dev/null +++ b/src bkup/AppAndToolsSelector/AppAndToolsSelector.component.scss @@ -0,0 +1,24 @@ +.ar-AppAndToolsSelector { + width: 21rem; + max-height: 70vh; + overflow: auto; + .ar-AppTile { + height: 5rem; + padding: 0.6rem; + + &:hover { + .ar-AppTile__content { + background-color: var(--ar-bg-hover); + border-radius: 0.3rem; + overflow: hidden; + + } + } + .ar-AppTile__name { + max-width: 100%; + text-overflow: ellipsis; + white-space: nowrap; + overflow: hidden; + } + } +} diff --git a/src bkup/AppAndToolsSelector/AppAndToolsSelector.test.ts b/src bkup/AppAndToolsSelector/AppAndToolsSelector.test.ts new file mode 100755 index 0000000..74a7d11 --- /dev/null +++ b/src bkup/AppAndToolsSelector/AppAndToolsSelector.test.ts @@ -0,0 +1,8 @@ +import React from "react" +import AppAndToolsSelector from "./AppAndToolsSelector" + +describe("AppAndToolsSelector", () => { + it("renders without error", () => { + + }) +}) diff --git a/src bkup/AppAndToolsSelector/AppAndToolsSelector.tsx b/src bkup/AppAndToolsSelector/AppAndToolsSelector.tsx new file mode 100755 index 0000000..cf1ed7a --- /dev/null +++ b/src bkup/AppAndToolsSelector/AppAndToolsSelector.tsx @@ -0,0 +1,79 @@ +import { useNavigate } from "react-router-dom" +import { + ArThemes, + ArButtonVariants, + ArSizes, + AppAndToolsSelectorProps, + AppTileProps, +} from "@armco/types" +import { Icon } from "@armco/icon" +import { useTheme } from "@armco/utils" +import { Button } from ".." +import "./AppAndToolsSelector.component.scss" + +const AppTile = (props: AppTileProps) => { + const { classes, label, icon, url, theme } = props + const navigate = useNavigate() + return ( +
navigate(url || "/")} + > +
+ + {label} +
+
+ ) +} + +const AppAndToolsSelector = (props: AppAndToolsSelectorProps): JSX.Element => { + const { data } = props + const { theme } = useTheme() + return ( +
+
+ {data.map((category, index) => { + const items = category.items + return ( +
+ + {category.label as string} + +
+ {items?.map((item, indexInner) => ( + + ))} +
+
+ ) + })} +
+
+ ) +} + +export default AppAndToolsSelector diff --git a/src bkup/AppAndToolsSelector/index.ts b/src bkup/AppAndToolsSelector/index.ts new file mode 100755 index 0000000..1438656 --- /dev/null +++ b/src bkup/AppAndToolsSelector/index.ts @@ -0,0 +1,3 @@ +import AppAndToolsSelector from "./AppAndToolsSelector" + +export default AppAndToolsSelector diff --git a/src bkup/Application/Application.component.scss b/src bkup/Application/Application.component.scss new file mode 100755 index 0000000..f49f755 --- /dev/null +++ b/src bkup/Application/Application.component.scss @@ -0,0 +1,3 @@ +.ar-Application { + +} diff --git a/src bkup/Application/Application.test.ts b/src bkup/Application/Application.test.ts new file mode 100755 index 0000000..8f58cfa --- /dev/null +++ b/src bkup/Application/Application.test.ts @@ -0,0 +1,8 @@ +import React from "react" +import Application from "./Application" + +describe("Application", () => { + it("renders without error", () => { + + }) +}) \ No newline at end of file diff --git a/src bkup/Application/Application.tsx b/src bkup/Application/Application.tsx new file mode 100755 index 0000000..4f5aed0 --- /dev/null +++ b/src bkup/Application/Application.tsx @@ -0,0 +1,14 @@ +import React from "react" +import "./Application.component.scss" + +interface ApplicationProps {} + +const Application = (props: any): JSX.Element => { + return ( +
+ In Component Application +
+ ) +} + +export default Application \ No newline at end of file diff --git a/src bkup/Application/index.ts b/src bkup/Application/index.ts new file mode 100755 index 0000000..65984f1 --- /dev/null +++ b/src bkup/Application/index.ts @@ -0,0 +1,3 @@ +import Application from "./Application" + +export default Application diff --git a/src bkup/ArIconsViewer/ArIconsViewer.component.scss b/src bkup/ArIconsViewer/ArIconsViewer.component.scss new file mode 100755 index 0000000..34c825f --- /dev/null +++ b/src bkup/ArIconsViewer/ArIconsViewer.component.scss @@ -0,0 +1,25 @@ +.ar-ArIconsViewer { + grid-template-columns: minmax(10rem, 1fr); + + .ar-ScrollPagination__items-container.compact, .ar-ScrollPagination__items-container.comfy { + .ar-ArIconsViewer__icon-container:hover { + background-color: var(--ar-bg-hover); + } + } + .ar-ScrollPagination__items-container.compact { + grid-template-columns: repeat(auto-fill, minmax(3rem, 1fr)) !important; + gap: 1rem !important; + grid-auto-rows: minmax(3rem, auto) !important; + } + + .ar-ScrollPagination__items-container.list { + grid-template-columns: repeat(auto-fill, minmax(8rem, 1fr)) !important; + grid-auto-rows: 2.5rem !important; + gap: 1rem !important; + .ar-ArIconsViewer__label { + text-overflow: ellipsis; + white-space: nowrap; + overflow: hidden; + } + } +} diff --git a/src bkup/ArIconsViewer/ArIconsViewer.test.ts b/src bkup/ArIconsViewer/ArIconsViewer.test.ts new file mode 100755 index 0000000..e3866ff --- /dev/null +++ b/src bkup/ArIconsViewer/ArIconsViewer.test.ts @@ -0,0 +1,8 @@ +import React from "react" +import ArIconsViewer from "./ArIconsViewer" + +describe("ArIconsViewer", () => { + it("renders without error", () => { + + }) +}) diff --git a/src bkup/ArIconsViewer/ArIconsViewer.tsx b/src bkup/ArIconsViewer/ArIconsViewer.tsx new file mode 100755 index 0000000..f576000 --- /dev/null +++ b/src bkup/ArIconsViewer/ArIconsViewer.tsx @@ -0,0 +1,166 @@ +import { ChangeEvent, useEffect, useState } from "react" +import { + ArDndItemTypes, + ArIconTileTypes, + ArIconsViewerProps, + ArPopoverSlots, + ArThemes, + SegmentData, + IconResponse, + ArIconSourceTypes, +} from "@armco/types" +import { API_CONFIG, ENDPOINTS } from "@armco/configs" +import { Helper, useTheme } from "@armco/utils" +import { Icon } from "@armco/icon" +import { + ScrollPagination, + SearchField, + SegmentedControl, + Draggable, + Tooltip, +} from ".." +import "./ArIconsViewer.component.scss" + +const pageApi = + API_CONFIG.STATIC_HOST[process.env.NODE_ENV] + + ENDPOINTS.STATIC.ICON.ROOT + + ENDPOINTS.STATIC.ICON.PAGE + +const compactionStyles = [ + { + name: "comfy", + icon: "md/MdViewComfy", + tooltip: "View Comfortable", + }, + { + name: "compact", + icon: "md/MdViewCompact", + tooltip: "View Compact", + }, + { + name: "list", + icon: "io5/IoList", + tooltip: "Quick Peak", + }, +] + +const ArIconsViewer = (props: ArIconsViewerProps): JSX.Element => { + const { + demo, + view: externalView, + hasSearch, + hasViewSelector, + isDraggable, + } = props + const [view, setView] = useState(compactionStyles[0]) + const [searchText, setSearchText] = useState() + const { theme } = useTheme() + + useEffect(() => { + if (externalView) { + const foundView = compactionStyles.find( + (v) => v.name === externalView.name, + ) + foundView && setView(foundView) + } + }, [externalView]) + + const getItem = (icon: IconResponse) => ( + + + {view.name === ArIconTileTypes.LIST && ( + + {icon.name} + + )} + + ) + + return ( +
+ {(hasSearch || hasViewSelector) && ( +
+ {hasSearch && ( + ) => + setSearchText(event.target.value), + 1000, + )} + items={[]} + hidePopup + /> + )} + {hasViewSelector && ( + setView(view as SegmentData)} + demo={demo} + /> + )} +
+ )} +
+ { + const { icon } = props + let item = getItem(icon) + item = isDraggable ? ( + + {item} + + ) : ( + item + ) + item = + view.name !== ArIconTileTypes.LIST ? ( + + {item} + {icon.name} + + ) : ( + item + ) + return item + }} + filters={searchText !== undefined ? { search: searchText } : {}} + demo={demo} + gridClasses={view.name} + /> +
+
+ ) +} + +export default ArIconsViewer diff --git a/src bkup/ArIconsViewer/index.ts b/src bkup/ArIconsViewer/index.ts new file mode 100755 index 0000000..d31879f --- /dev/null +++ b/src bkup/ArIconsViewer/index.ts @@ -0,0 +1,3 @@ +import ArIconsViewer from "./ArIconsViewer" + +export default ArIconsViewer diff --git a/src bkup/ArViz/ArViz.component.scss b/src bkup/ArViz/ArViz.component.scss new file mode 100755 index 0000000..0198355 --- /dev/null +++ b/src bkup/ArViz/ArViz.component.scss @@ -0,0 +1,3 @@ +.ar-ArViz { + +} diff --git a/src bkup/ArViz/ArViz.test.ts b/src bkup/ArViz/ArViz.test.ts new file mode 100755 index 0000000..3632368 --- /dev/null +++ b/src bkup/ArViz/ArViz.test.ts @@ -0,0 +1,8 @@ +import React from "react" +import ArViz from "./ArViz" + +describe("ArViz", () => { + it("renders without error", () => { + + }) +}) diff --git a/src bkup/ArViz/ArViz.tsx b/src bkup/ArViz/ArViz.tsx new file mode 100755 index 0000000..7a7122b --- /dev/null +++ b/src bkup/ArViz/ArViz.tsx @@ -0,0 +1,45 @@ +import { useEffect, useRef } from "react" +import { select } from "d3" +import { ArVisualizationTypes, ArVizProps, ObjectType } from "@armco/types" +import { generateBubbleChart } from "@armco/utils" +import { BubbleChart } from ".." +import "./ArViz.component.scss" + +// TODO: Replace this with ArViz dummy in dummies.txt +const dataDummy = {} + +const ArViz = (props: ArVizProps): JSX.Element => { + const { clickHandler, type, data } = props + const svgContainerRef = useRef(null) + + useEffect(() => { + if (data && svgContainerRef.current) { + switch (type) { + case ArVisualizationTypes.BUBBLE: + generateBubbleChart(dataDummy) + } + const svg = svgContainerRef.current as SVGSVGElement + const boundingBox = svg.getBBox() + const svgToUpdate = select("#ar-ArViz__chart-container") + svgToUpdate.attr( + "viewBox", + `${boundingBox.x} ${boundingBox.y} ${boundingBox.width} ${boundingBox.height}`, + ) + } + }, [svgContainerRef, data, type]) + + return type === ArVisualizationTypes.BUBBLE ? ( + } clickHandler={clickHandler} /> + ) : ( +
+ +
+ ) +} + +export default ArViz diff --git a/src bkup/ArViz/index.ts b/src bkup/ArViz/index.ts new file mode 100755 index 0000000..eb3758b --- /dev/null +++ b/src bkup/ArViz/index.ts @@ -0,0 +1,3 @@ +import ArViz from "./ArViz" + +export default ArViz diff --git a/src bkup/ArmcoIamProvider/ArmcoIamProvider.component.scss b/src bkup/ArmcoIamProvider/ArmcoIamProvider.component.scss new file mode 100755 index 0000000..9f28dab --- /dev/null +++ b/src bkup/ArmcoIamProvider/ArmcoIamProvider.component.scss @@ -0,0 +1,3 @@ +.ar-ArmcoIamProvider { + +} diff --git a/src bkup/ArmcoIamProvider/ArmcoIamProvider.test.ts b/src bkup/ArmcoIamProvider/ArmcoIamProvider.test.ts new file mode 100755 index 0000000..ae3994b --- /dev/null +++ b/src bkup/ArmcoIamProvider/ArmcoIamProvider.test.ts @@ -0,0 +1,6 @@ +import React from "react" +import ArmcoIamProvider from "./ArmcoIamProvider" + +describe("ArmcoIamProvider", () => { + it("renders without error", () => {}) +}) diff --git a/src bkup/ArmcoIamProvider/ArmcoIamProvider.tsx b/src bkup/ArmcoIamProvider/ArmcoIamProvider.tsx new file mode 100755 index 0000000..766675f --- /dev/null +++ b/src bkup/ArmcoIamProvider/ArmcoIamProvider.tsx @@ -0,0 +1,20 @@ +import { ArmcoIamProviderProps, ArDefaultLoginPage } from "@armco/types" +import { WEB_CONFIG } from "@armco/configs" +import { LoginProvider } from ".." +import "./ArmcoIamProvider.component.scss" + +const ArmcoIamProvider = (props: ArmcoIamProviderProps): JSX.Element => { + const { defaultPage } = props + return ( + + ) +} + +export default ArmcoIamProvider diff --git a/src bkup/ArmcoIamProvider/index.ts b/src bkup/ArmcoIamProvider/index.ts new file mode 100755 index 0000000..18d9572 --- /dev/null +++ b/src bkup/ArmcoIamProvider/index.ts @@ -0,0 +1,3 @@ +import ArmcoIamProvider from "./ArmcoIamProvider" + +export default ArmcoIamProvider diff --git a/src bkup/Badge/Badge.component.scss b/src bkup/Badge/Badge.component.scss new file mode 100755 index 0000000..f6bc548 --- /dev/null +++ b/src bkup/Badge/Badge.component.scss @@ -0,0 +1,69 @@ +.ar-Badge { + --ar-badge-size-small: 8px; + --ar-badge-size-medium: 20px; + --ar-badge-size-large: 40px; + display: flex; + flex-flow: row wrap; + -webkit-box-pack: center; + place-content: center; + -webkit-box-align: center; + align-items: center; + position: absolute; + box-sizing: border-box; + font-family: Roboto, Helvetica, Arial, sans-serif; + font-weight: 500; + font-size: 0.75rem; + line-height: 1; + z-index: 1; + transition: transform 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; + background-color: rgb(206, 147, 216); + color: rgba(0, 0, 0, 0.87); + // top: 0px; + // right: 0px; + // transform: scale(1) translate(50%, -50%); + transform-origin: 100% 0%; + + &.small { + min-width: var(--ar-badge-size-small); + height: var(--ar-badge-size-small); + border-radius: calc(var(--ar-badge-size-small) / 2); + padding: 0; + } + + &.regular { + min-width: var(--ar-badge-size-medium); + height: var(--ar-badge-size-medium); + border-radius: calc(var(--ar-badge-size-medium) / 2); + padding: 0 6px; + } + + &.large { + min-width: var(--ar-badge-size-large); + height: var(--ar-badge-size-large); + border-radius: calc(var(--ar-badge-size-large) / 2); + padding: 0 12px; + } + + &.inprogress { + background-color: var(--ar-color-font-warning); + } + + &.complete { + background-color: var(--ar-color-font-success); + color: white; + } + + &.deferred { + background-color: #60202d; + color: white; + } + + &.atrisk { + background-color: var(--ar-color-font-danger); + color: white; + } + + &.shadow { + box-shadow: 0px 4px 8px var(--ar-shadow); + } +} diff --git a/src bkup/Badge/Badge.test.ts b/src bkup/Badge/Badge.test.ts new file mode 100755 index 0000000..6383b14 --- /dev/null +++ b/src bkup/Badge/Badge.test.ts @@ -0,0 +1,8 @@ +import React from "react" +import Badge from "./Badge" + +describe("Badge", () => { + it("renders without error", () => { + + }) +}) \ No newline at end of file diff --git a/src bkup/Badge/Badge.tsx b/src bkup/Badge/Badge.tsx new file mode 100755 index 0000000..5b60350 --- /dev/null +++ b/src bkup/Badge/Badge.tsx @@ -0,0 +1,25 @@ +import { BadgeProps } from "@armco/types" +import { Icon } from "@armco/icon" +import "./Badge.component.scss" + +const Badge = (props: BadgeProps): JSX.Element => { + const { classes, icon, size, shadow, style, text, type } = props + if (icon?.indexOf("/") === -1) { + console.warn( + "Not sufficient information to render icon, needed format /", + ) + } + return ( + + {icon && size !== "small" && } + {size !== "small" && (text || "+2")} + + ) +} + +export default Badge diff --git a/src bkup/Badge/index.ts b/src bkup/Badge/index.ts new file mode 100755 index 0000000..e26eecc --- /dev/null +++ b/src bkup/Badge/index.ts @@ -0,0 +1,3 @@ +import Badge from "./Badge" + +export default Badge diff --git a/src bkup/Banner/Banner.component.scss b/src bkup/Banner/Banner.component.scss new file mode 100755 index 0000000..3c4a4f7 --- /dev/null +++ b/src bkup/Banner/Banner.component.scss @@ -0,0 +1,3 @@ +.ar-Banner { + +} diff --git a/src bkup/Banner/Banner.test.ts b/src bkup/Banner/Banner.test.ts new file mode 100755 index 0000000..579cbae --- /dev/null +++ b/src bkup/Banner/Banner.test.ts @@ -0,0 +1,8 @@ +import React from "react" +import Banner from "./Banner" + +describe("Banner", () => { + it("renders without error", () => { + + }) +}) \ No newline at end of file diff --git a/src bkup/Banner/Banner.tsx b/src bkup/Banner/Banner.tsx new file mode 100755 index 0000000..cdb352f --- /dev/null +++ b/src bkup/Banner/Banner.tsx @@ -0,0 +1,14 @@ +import React from "react" +import "./Banner.component.scss" + +interface BannerProps {} + +const Banner = (props: any): JSX.Element => { + return ( +
+ In Component Banner +
+ ) +} + +export default Banner \ No newline at end of file diff --git a/src bkup/Banner/index.ts b/src bkup/Banner/index.ts new file mode 100755 index 0000000..21080f3 --- /dev/null +++ b/src bkup/Banner/index.ts @@ -0,0 +1,3 @@ +import Banner from "./Banner" + +export default Banner diff --git a/src bkup/Benefits/Benefits.component.scss b/src bkup/Benefits/Benefits.component.scss new file mode 100755 index 0000000..e152922 --- /dev/null +++ b/src bkup/Benefits/Benefits.component.scss @@ -0,0 +1,3 @@ +.ar-Benefits { + +} diff --git a/src bkup/Benefits/Benefits.test.ts b/src bkup/Benefits/Benefits.test.ts new file mode 100755 index 0000000..b16debc --- /dev/null +++ b/src bkup/Benefits/Benefits.test.ts @@ -0,0 +1,8 @@ +import React from "react" +import Benefits from "./Benefits" + +describe("Benefits", () => { + it("renders without error", () => { + + }) +}) \ No newline at end of file diff --git a/src bkup/Benefits/Benefits.tsx b/src bkup/Benefits/Benefits.tsx new file mode 100755 index 0000000..3ba5494 --- /dev/null +++ b/src bkup/Benefits/Benefits.tsx @@ -0,0 +1,14 @@ +import React from "react" +import "./Benefits.component.scss" + +interface BenefitsProps {} + +const Benefits = (props: any): JSX.Element => { + return ( +
+ In Component Benefits +
+ ) +} + +export default Benefits \ No newline at end of file diff --git a/src bkup/Benefits/index.ts b/src bkup/Benefits/index.ts new file mode 100755 index 0000000..8e1346c --- /dev/null +++ b/src bkup/Benefits/index.ts @@ -0,0 +1,3 @@ +import Benefits from "./Benefits" + +export default Benefits \ No newline at end of file diff --git a/src bkup/Blog/Blog.component.scss b/src bkup/Blog/Blog.component.scss new file mode 100755 index 0000000..cda0603 --- /dev/null +++ b/src bkup/Blog/Blog.component.scss @@ -0,0 +1,3 @@ +.ar-Blog { + +} diff --git a/src bkup/Blog/Blog.test.ts b/src bkup/Blog/Blog.test.ts new file mode 100755 index 0000000..e8f0df2 --- /dev/null +++ b/src bkup/Blog/Blog.test.ts @@ -0,0 +1,8 @@ +import React from "react" +import Blog from "./Blog" + +describe("Blog", () => { + it("renders without error", () => { + + }) +}) \ No newline at end of file diff --git a/src bkup/Blog/Blog.tsx b/src bkup/Blog/Blog.tsx new file mode 100755 index 0000000..c220b21 --- /dev/null +++ b/src bkup/Blog/Blog.tsx @@ -0,0 +1,14 @@ +import React from "react" +import "./Blog.component.scss" + +interface BlogProps {} + +const Blog = (props: any): JSX.Element => { + return ( +
+ In Component Blog +
+ ) +} + +export default Blog \ No newline at end of file diff --git a/src bkup/Blog/index.ts b/src bkup/Blog/index.ts new file mode 100755 index 0000000..1426661 --- /dev/null +++ b/src bkup/Blog/index.ts @@ -0,0 +1,3 @@ +import Blog from "./Blog" + +export default Blog diff --git a/src bkup/Brands/Brands.component.scss b/src bkup/Brands/Brands.component.scss new file mode 100755 index 0000000..fb5b004 --- /dev/null +++ b/src bkup/Brands/Brands.component.scss @@ -0,0 +1,3 @@ +.ar-Brands { + +} diff --git a/src bkup/Brands/Brands.test.ts b/src bkup/Brands/Brands.test.ts new file mode 100755 index 0000000..f739c70 --- /dev/null +++ b/src bkup/Brands/Brands.test.ts @@ -0,0 +1,8 @@ +import React from "react" +import Brands from "./Brands" + +describe("Brands", () => { + it("renders without error", () => { + + }) +}) \ No newline at end of file diff --git a/src bkup/Brands/Brands.tsx b/src bkup/Brands/Brands.tsx new file mode 100755 index 0000000..3fb3ec9 --- /dev/null +++ b/src bkup/Brands/Brands.tsx @@ -0,0 +1,14 @@ +import React from "react" +import "./Brands.component.scss" + +interface BrandsProps {} + +const Brands = (props: any): JSX.Element => { + return ( +
+ In Component Brands +
+ ) +} + +export default Brands \ No newline at end of file diff --git a/src bkup/Brands/index.ts b/src bkup/Brands/index.ts new file mode 100755 index 0000000..f9036fe --- /dev/null +++ b/src bkup/Brands/index.ts @@ -0,0 +1,3 @@ +import Brands from "./Brands" + +export default Brands diff --git a/src bkup/Breadcrumb/Breadcrumb.component.scss b/src bkup/Breadcrumb/Breadcrumb.component.scss new file mode 100755 index 0000000..473f047 --- /dev/null +++ b/src bkup/Breadcrumb/Breadcrumb.component.scss @@ -0,0 +1,5 @@ +.ar-Breadcrumb { + &>span { + font-size: 0.75rem; + } +} diff --git a/src bkup/Breadcrumb/Breadcrumb.test.ts b/src bkup/Breadcrumb/Breadcrumb.test.ts new file mode 100755 index 0000000..0728ac3 --- /dev/null +++ b/src bkup/Breadcrumb/Breadcrumb.test.ts @@ -0,0 +1,8 @@ +import React from "react" +import Breadcrumb from "./Breadcrumb" + +describe("Breadcrumb", () => { + it("renders without error", () => { + + }) +}) \ No newline at end of file diff --git a/src bkup/Breadcrumb/Breadcrumb.tsx b/src bkup/Breadcrumb/Breadcrumb.tsx new file mode 100755 index 0000000..d28e9a3 --- /dev/null +++ b/src bkup/Breadcrumb/Breadcrumb.tsx @@ -0,0 +1,55 @@ +import { useNavigate } from "react-router-dom" +import { + ArButtonVariants, + ArSizes, + BreadCrumbData, + BreadcrumbProps, +} from "@armco/types" +import { Button } from ".." +import "./Breadcrumb.component.scss" + +const Breadcrumb = (props: BreadcrumbProps): JSX.Element => { + const { classes, data, demo, separator, size, onClick } = props + const navigate = useNavigate() + + const demoDummy = [ + { label: "Home", route: "/home" }, + { + label: "Categories", + }, + { label: "Footwear" }, + { + label: "LikeMyShoe", + }, + ] + + const nodes = data || (demo && demoDummy) + + return ( +
+ {nodes.map((node: BreadCrumbData, index: number) => ( + <> +
+ ) +} + +export default Breadcrumb diff --git a/src bkup/Breadcrumb/index.ts b/src bkup/Breadcrumb/index.ts new file mode 100755 index 0000000..62f6795 --- /dev/null +++ b/src bkup/Breadcrumb/index.ts @@ -0,0 +1,3 @@ +import Breadcrumb from "./Breadcrumb" + +export default Breadcrumb diff --git a/src bkup/Breadcrumbs/Breadcrumbs.component.scss b/src bkup/Breadcrumbs/Breadcrumbs.component.scss new file mode 100755 index 0000000..d68b991 --- /dev/null +++ b/src bkup/Breadcrumbs/Breadcrumbs.component.scss @@ -0,0 +1,3 @@ +.ar-Breadcrumbs { + +} diff --git a/src bkup/Breadcrumbs/Breadcrumbs.test.ts b/src bkup/Breadcrumbs/Breadcrumbs.test.ts new file mode 100755 index 0000000..419fe56 --- /dev/null +++ b/src bkup/Breadcrumbs/Breadcrumbs.test.ts @@ -0,0 +1,8 @@ +import React from "react" +import Breadcrumbs from "./Breadcrumbs" + +describe("Breadcrumbs", () => { + it("renders without error", () => { + + }) +}) \ No newline at end of file diff --git a/src bkup/Breadcrumbs/Breadcrumbs.tsx b/src bkup/Breadcrumbs/Breadcrumbs.tsx new file mode 100755 index 0000000..4eab533 --- /dev/null +++ b/src bkup/Breadcrumbs/Breadcrumbs.tsx @@ -0,0 +1,14 @@ +import React from "react" +import "./Breadcrumbs.component.scss" + +interface BreadcrumbsProps {} + +const Breadcrumbs = (props: any): JSX.Element => { + return ( +
+ In Component Breadcrumbs +
+ ) +} + +export default Breadcrumbs \ No newline at end of file diff --git a/src bkup/Breadcrumbs/index.ts b/src bkup/Breadcrumbs/index.ts new file mode 100755 index 0000000..51d135e --- /dev/null +++ b/src bkup/Breadcrumbs/index.ts @@ -0,0 +1,3 @@ +import Breadcrumbs from "./Breadcrumbs" + +export default Breadcrumbs diff --git a/src bkup/BrowserIncompatibility/BrowserIncompatibility.component.scss b/src bkup/BrowserIncompatibility/BrowserIncompatibility.component.scss new file mode 100755 index 0000000..b7fd7ec --- /dev/null +++ b/src bkup/BrowserIncompatibility/BrowserIncompatibility.component.scss @@ -0,0 +1,16 @@ +.ar-BrowserIncompatibility { + border: var(--ar-border); + background-color: var(--ar-bg-base); + transition: box-shadow 0.3s; + font-size: 0.85rem; + &:hover { + box-shadow: 0px 4px 8px var(--ar-shadow); + } + .ar-BrowserIncompatibility__help-link { + border: var(--ar-border); + background-color: var(--ar-bg-hover); + border-radius: 3px; + font-size: 0.75rem; + cursor: pointer; + } +} diff --git a/src bkup/BrowserIncompatibility/BrowserIncompatibility.test.ts b/src bkup/BrowserIncompatibility/BrowserIncompatibility.test.ts new file mode 100755 index 0000000..2f836a6 --- /dev/null +++ b/src bkup/BrowserIncompatibility/BrowserIncompatibility.test.ts @@ -0,0 +1,6 @@ +import React from "react" +import BrowserIncompatibility from "./BrowserIncompatibility" + +describe("BrowserIncompatibility", () => { + it("renders without error", () => {}) +}) diff --git a/src bkup/BrowserIncompatibility/BrowserIncompatibility.tsx b/src bkup/BrowserIncompatibility/BrowserIncompatibility.tsx new file mode 100755 index 0000000..b414e32 --- /dev/null +++ b/src bkup/BrowserIncompatibility/BrowserIncompatibility.tsx @@ -0,0 +1,62 @@ +import { v4 as uuid } from "uuid" +import { ArThemes, BrowserIncompatibilityProps } from "@armco/types" +import { Icon } from "@armco/icon" +import { Helper } from "@armco/utils" +import { Alert, Link } from ".." +import "./BrowserIncompatibility.component.scss" + +const BrowserIncompatibility = ( + props: BrowserIncompatibilityProps, +): JSX.Element => { + const { applicationName, moreLink, theme } = props + const demoDummyLink = "https://notabuck.com/armco-design-system/docs/devices" + const demoAppName = '"My Awesome App"' + const helpLink = moreLink || demoDummyLink + const app = applicationName || demoAppName + const heroIconSize = "8rem" + + return ( +
+ +
{app} can not run on this browser
+

+ Supported browsers are Google Chrome v51+ & Microsoft's Edge v32+ +

+

For More details you can also check the below link

+ { + Helper.copyToClipboard(helpLink) + window.top?.postMessage( + { + ar: { + position: "bottom-left", + type: "success", + closeable: true, + message: "Link Copied!", + show: true, + }, + }, + "*", + ) + }} + preemptNavigation + /> + +
+ ) +} + +export default BrowserIncompatibility diff --git a/src bkup/BrowserIncompatibility/index.ts b/src bkup/BrowserIncompatibility/index.ts new file mode 100755 index 0000000..7a70809 --- /dev/null +++ b/src bkup/BrowserIncompatibility/index.ts @@ -0,0 +1,3 @@ +import BrowserIncompatibility from "./BrowserIncompatibility" + +export default BrowserIncompatibility diff --git a/src bkup/BubbleChart/BubbleChart.component.scss b/src bkup/BubbleChart/BubbleChart.component.scss new file mode 100755 index 0000000..cbe1e95 --- /dev/null +++ b/src bkup/BubbleChart/BubbleChart.component.scss @@ -0,0 +1,3 @@ +.ar-BubbleChart { + +} diff --git a/src bkup/BubbleChart/BubbleChart.test.ts b/src bkup/BubbleChart/BubbleChart.test.ts new file mode 100755 index 0000000..1b85277 --- /dev/null +++ b/src bkup/BubbleChart/BubbleChart.test.ts @@ -0,0 +1,8 @@ +import React from "react" +import BubbleChart from "./BubbleChart" + +describe("BubbleChart", () => { + it("renders without error", () => { + + }) +}) diff --git a/src bkup/BubbleChart/BubbleChart.tsx b/src bkup/BubbleChart/BubbleChart.tsx new file mode 100755 index 0000000..28cd34f --- /dev/null +++ b/src bkup/BubbleChart/BubbleChart.tsx @@ -0,0 +1,99 @@ +import { useEffect, useRef } from "react" +import Highcharts from "highcharts" +import HighchartsMore from "highcharts/highcharts-more" +import { BubbleChartProps, ObjectType } from "@armco/types" +import "./BubbleChart.component.scss" + +HighchartsMore(Highcharts) + +const BubbleChart = (props: BubbleChartProps): JSX.Element => { + const { clickHandler, data } = props + const chartRef = useRef(null) + + useEffect(() => { + if (chartRef.current && data) { + const labels = Object.keys(data) + const values = Object.values(data) + + const options = { + chart: { + type: "packedbubble", + }, + title: { + text: null, + }, + tooltip: { + formatter: function (): string { + return ( + "Tag: " + + ("point" in this && (this.point as ObjectType).name) + + "
Count: " + + ("y" in this && this.y) + + "" + ) + }, + }, + credits: { + enabled: false, + }, + plotOptions: { + packedbubble: { + minSize: "30%", + maxSize: "120%", + zMin: 0, + zMax: 1000, + layoutAlgorithm: { + splitSeries: false, + gravitationalConstant: 0.02, + }, + dataLabels: { + enabled: true, + format: "{point.name}", + filter: { + property: "y", + operator: ">", + value: 250, + }, + style: { + color: "black", + textOutline: "none", + fontWeight: "normal", + }, + }, + events: { + click: function (e: any) { + clickHandler && clickHandler(e) + }, + }, + }, + }, + series: [ + { + cursor: "pointer", + showInLegend: false, + data: labels.map((label, index) => ({ + // x: index, // X-axis position + // y: values[index], // Y-axis value + // z: values[index], // Bubble size value + value: values[index], + name: label, // Label for the bubble + })), + }, + ], + xAxis: { + visible: false, + }, + yAxis: { + visible: false, + }, + } + + // @ts-ignore + Highcharts.chart(chartRef.current, options) + } + }, [data]) // Re-render chart when data prop changes + + return
+} + +export default BubbleChart diff --git a/src bkup/BubbleChart/index.ts b/src bkup/BubbleChart/index.ts new file mode 100755 index 0000000..c93a212 --- /dev/null +++ b/src bkup/BubbleChart/index.ts @@ -0,0 +1,3 @@ +import BubbleChart from "./BubbleChart" + +export default BubbleChart diff --git a/src bkup/BubbleViz/BubbleViz.component.scss b/src bkup/BubbleViz/BubbleViz.component.scss new file mode 100755 index 0000000..372c4fe --- /dev/null +++ b/src bkup/BubbleViz/BubbleViz.component.scss @@ -0,0 +1,3 @@ +.ar-BubbleViz { + +} diff --git a/src bkup/BubbleViz/BubbleViz.test.ts b/src bkup/BubbleViz/BubbleViz.test.ts new file mode 100755 index 0000000..f76edf7 --- /dev/null +++ b/src bkup/BubbleViz/BubbleViz.test.ts @@ -0,0 +1,8 @@ +import React from "react" +import BubbleViz from "./BubbleViz" + +describe("BubbleViz", () => { + it("renders without error", () => { + + }) +}) diff --git a/src bkup/BubbleViz/BubbleViz.tsx b/src bkup/BubbleViz/BubbleViz.tsx new file mode 100755 index 0000000..77ce369 --- /dev/null +++ b/src bkup/BubbleViz/BubbleViz.tsx @@ -0,0 +1,10 @@ +import { BubbleVizProps } from "@armco/types" +import "./BubbleViz.component.scss" + +const BubbleViz = (props: BubbleVizProps): JSX.Element => { + const { classes } = props + + return
+} + +export default BubbleViz diff --git a/src bkup/BubbleViz/index.ts b/src bkup/BubbleViz/index.ts new file mode 100755 index 0000000..fde1482 --- /dev/null +++ b/src bkup/BubbleViz/index.ts @@ -0,0 +1,3 @@ +import BubbleViz from "./BubbleViz" + +export default BubbleViz diff --git a/src bkup/Button/Button.component.scss b/src bkup/Button/Button.component.scss new file mode 100755 index 0000000..d75ccdb --- /dev/null +++ b/src bkup/Button/Button.component.scss @@ -0,0 +1,235 @@ +.ar-Button { + padding: 0.5rem 0.9rem; + border-radius: 0.2rem; + background-color: var(--ar-color-primary-faded); + color: var(--ar-white); + border: 1px solid var(--ar-color-primary); + transition: all 0.3s; + font-size: 1rem; + max-height: 3rem !important; + + &:disabled, &.ar-secondary:disabled { + color: var(--ar-color-disabled); + border-color: var(--ar-color-disabled); + pointer-events: none; + } + + .ar-Button__icon { + border-right: var(--ar-bg); + } + + &:hover { + background-color: var(--ar-color-primary); + box-shadow: 0px 4px 8px var(--ar-shadow); + } + + &.ar-xsmall { + padding: 0.2rem 0.4rem; + border-radius: 0.2rem; + font-size: 0.875em; + } + + &.ar-small { + padding: 0.3rem 0.7rem; + border-radius: 0.2rem; + font-size: 0.875rem; + } + + &.ar-large { + padding: 0.6rem 1rem; + border-radius: 0.3rem; + font-size: 1.2rem; + } + &.search-button { + width: 2.625rem; + margin-left: -0.0625rem; + border-bottom-right-radius: 0.125rem; + border-top-right-radius: 0.125rem; + box-shadow: none; + border: var(--ar-border); + } + + &.ar-primary { + + } + + &.has-split-button { + border-top-right-radius: 0; + border-bottom-right-radius: 0; + + +.ar-Popover__anchor .ar-Button__split, +.ar-PopoverV1 .ar-Button__split { + border-top-left-radius: 0; + border-bottom-left-radius: 0; + border-left: none; + } + } + + .ar-Button__split { + transition: all 0.3s; + width: 2rem; + &.ar-xsmall { + width: 2rem; + padding: 0.2rem 0.4rem; + border-radius: 0.2rem; + font-size: 0.75rem; + } + + &.ar-small { + width: 2.275rem; + padding: 0.3rem 0.7rem; + border-radius: 0.2rem; + font-size: 0.875rem; + } + + &.ar-large { + width: 13rem; + padding: 0.6rem 1rem; + border-radius: 0.3rem; + font-size: 1.2rem; + } + } + + &+.ar-Popover { + .ar-Button__split-button { + width: 2rem; + transition: all 0.3s; + border-top-right-radius: 0.2rem; + border-bottom-right-radius: 0.2rem; + background-color: var(--ar-color-primary-faded); + border: 1px solid var(--ar-color-primary); + &.ar-link { + width: auto; + font-size: 0.8rem; + background-color: transparent; + color: var(--ar-color-font-link); + border: none; + &:hover { + text-decoration: underline; + background-color: transparent; + box-shadow: none; + } + } + + &.ar-warning { + background-color: var(--ar-color-font-warning-faded); + color: var(--ar-color-font-invert); + border-color: var(--ar-color-font-warning); + &:hover { + background-color: var(--ar-color-font-warning); + } + } + } + } + + &.ar-secondary { + background-color: var(--ar-bg); + color: var(--ar-color-primary); + + &:hover { + background-color: var(--ar-color-primary); + color: var(--ar-color-font-invert); + } + } + + &.ar-tertiary { + color: var(--ar-color-primary); + background-color: transparent; + border: none; + + &:hover { + text-decoration: underline; + } + } + + &.ar-danger { + background-color: var(--ar-color-font-danger-faded); + color: white; + border-color: var(--ar-color-font-danger); + &:hover { + background-color: var(--ar-color-font-danger); + } + } + + &.ar-success { + background-color: var(--ar-color-font-success-faded); + color: var(--ar-color-font-invert); + border-color: var(--ar-color-font-success); + &:hover { + background-color: var(--ar-color-font-success); + } + } + + &.ar-info { + background-color: var(--ar-color-font-info-faded); + color: var(--ar-color-font-invert); + border-color: var(--ar-color-font-info); + &:hover { + background-color: var(--ar-color-font-info); + } + } + + &.ar-warning { + background-color: var(--ar-color-font-warning-faded); + color: var(--ar-color-font-invert); + border-color: var(--ar-color-font-warning); + &+.ar-Popover { + --ar-color-highlight-2: var(--ar-color-font-warning); + } + &:hover { + background-color: var(--ar-color-font-warning); + } + } + + &.ar-dark { + background-color: var(--ar-color-font-dark-faded); + color: var(--ar-color-font-invert); + border-color: var(--ar-color-font-dark); + &:hover { + background-color: var(--ar-color-font-dark); + } + } + + &.ar-light { + background-color: var(--ar-color-font-light-faded); + color: var(--ar-color-font); + border-color: var(--ar-color-font); + &:hover { + background-color: var(--ar-color-font-light); + } + } + + &.ar-link { + width: auto; + font-size: 0.875em; + background-color: transparent; + color: var(--ar-color-font); + border: none; + &:hover { + text-decoration: underline; + background-color: transparent; + box-shadow: none; + } + } + + &.ar-link-hover { + width: auto; + font-size: 0.8rem; + background-color: transparent; + color: var(--ar-color-font); + border: none; + &:hover { + text-decoration: underline; + } + } + &.ar-link-native { + width: auto; + font-size: 0.7rem; + background-color: transparent; + color: var(--ar-color-font-link); + box-shadow: none; + border: none; + &:hover { + text-decoration: underline; + } + } +} diff --git a/src bkup/Button/Button.test.ts b/src bkup/Button/Button.test.ts new file mode 100755 index 0000000..77e1d03 --- /dev/null +++ b/src bkup/Button/Button.test.ts @@ -0,0 +1,8 @@ +import React from "react" +import Button from "./Button" + +describe("Button", () => { + it("renders without error", () => { + + }) +}) \ No newline at end of file diff --git a/src bkup/Button/Button.tsx b/src bkup/Button/Button.tsx new file mode 100755 index 0000000..b5eb553 --- /dev/null +++ b/src bkup/Button/Button.tsx @@ -0,0 +1,173 @@ +import { useState } from "react" +import { + ArAnimations, + ArButtonTypes, + ArButtonVariants, + ArPopoverPositions, + ArPopoverSlots, + ArPopoverTriggers, + ArSizes, + ArThemes, + ButtonProps, + ListItemContent, +} from "@armco/types" +import { Icon } from "@armco/icon" +import { List, Popover } from ".." +import "./Button.component.scss" + +const demoSplitOptions: Array = [ + { name: "Edit" }, + { name: "Preview" }, + { name: "Publish" }, +] + +const Button = (props: ButtonProps) => { + const { + classes, + color, + containerClasses, + contentClasses, + contentStyles, + content, + demo, + preIcon, + postIcon, + onClick, + onMouseEnter, + onMouseLeave, + size = ArSizes.SMALL, + splitButtonClasses, + splitOptions, + splitPopoverVersion, + splitTrigger, + type = ArButtonTypes.BUTTON, + theme, + variant, + ...rest + } = props + const [hovered, setHovered] = useState() + const useSplitOptions = demo + ? typeof splitOptions === "string" && splitOptions === "true" + ? demoSplitOptions + : splitOptions + : splitOptions + + let setColor = "" + const btnStyles: { color?: string } = {} + if (color) { + setColor = color + } else { + if (rest.disabled) { + setColor = theme === ArThemes.DARK1 ? "#7a7aa7" : "#cfcfcf" + } else if (variant === ArButtonVariants.LINKNATIVE) { + setColor = "#0d6efd" + } else if ( + variant === ArButtonVariants.LINK || + variant === ArButtonVariants.LINKHOVEREFFECT + ) { + setColor = "black" + } else if (variant === ArButtonVariants.SECONDARY) { + setColor = hovered + ? theme === ArThemes.DARK1 + ? "black" + : "white" + : theme === ArThemes.DARK1 + ? "white" + : "#3232d8" + } else { + setColor = "white" + } + } + btnStyles.color = setColor + const hasButton = content || preIcon || postIcon + + return ( +
+ {hasButton && ( + + )} + {useSplitOptions && ( + + + + + )} +
+ ) +} + +export default Button diff --git a/src bkup/Button/index.ts b/src bkup/Button/index.ts new file mode 100755 index 0000000..bc2f4a6 --- /dev/null +++ b/src bkup/Button/index.ts @@ -0,0 +1,3 @@ +import Button from "./Button" + +export default Button diff --git a/src bkup/Card/Card.component.scss b/src bkup/Card/Card.component.scss new file mode 100755 index 0000000..5d23f46 --- /dev/null +++ b/src bkup/Card/Card.component.scss @@ -0,0 +1,4 @@ +.ar-Card { + background-color: var(--ar-bg); + border-radius: 3px; +} diff --git a/src bkup/Card/Card.test.ts b/src bkup/Card/Card.test.ts new file mode 100755 index 0000000..3dad5a5 --- /dev/null +++ b/src bkup/Card/Card.test.ts @@ -0,0 +1,8 @@ +import React from "react" +import Card from "./Card" + +describe("Card", () => { + it("renders without error", () => { + + }) +}) \ No newline at end of file diff --git a/src bkup/Card/Card.tsx b/src bkup/Card/Card.tsx new file mode 100755 index 0000000..9633dee --- /dev/null +++ b/src bkup/Card/Card.tsx @@ -0,0 +1,20 @@ +import { CardProps } from "@armco/types" +import "./Card.component.scss" + +const Card = (props: CardProps): JSX.Element => { + const { children, classes, header } = props + return ( +
+ {header && ( +
{header}
+ )} +
{children}
+
+ ) +} + +export default Card diff --git a/src bkup/Card/index.ts b/src bkup/Card/index.ts new file mode 100755 index 0000000..c15bb2c --- /dev/null +++ b/src bkup/Card/index.ts @@ -0,0 +1,3 @@ +import Card from "./Card" + +export default Card \ No newline at end of file diff --git a/src bkup/Careers/Careers.component.scss b/src bkup/Careers/Careers.component.scss new file mode 100755 index 0000000..9f425e9 --- /dev/null +++ b/src bkup/Careers/Careers.component.scss @@ -0,0 +1,3 @@ +.ar-Careers { + +} diff --git a/src bkup/Careers/Careers.test.ts b/src bkup/Careers/Careers.test.ts new file mode 100755 index 0000000..c483cf5 --- /dev/null +++ b/src bkup/Careers/Careers.test.ts @@ -0,0 +1,8 @@ +import React from "react" +import Careers from "./Careers" + +describe("Careers", () => { + it("renders without error", () => { + + }) +}) \ No newline at end of file diff --git a/src bkup/Careers/Careers.tsx b/src bkup/Careers/Careers.tsx new file mode 100755 index 0000000..04bc05d --- /dev/null +++ b/src bkup/Careers/Careers.tsx @@ -0,0 +1,14 @@ +import React from "react" +import "./Careers.component.scss" + +interface CareersProps {} + +const Careers = (props: any): JSX.Element => { + return ( +
+ In Component Careers +
+ ) +} + +export default Careers \ No newline at end of file diff --git a/src bkup/Careers/index.ts b/src bkup/Careers/index.ts new file mode 100755 index 0000000..6f55a9e --- /dev/null +++ b/src bkup/Careers/index.ts @@ -0,0 +1,3 @@ +import Careers from "./Careers" + +export default Careers diff --git a/src bkup/Carousel/Carousel.component.scss b/src bkup/Carousel/Carousel.component.scss new file mode 100755 index 0000000..3c02c91 --- /dev/null +++ b/src bkup/Carousel/Carousel.component.scss @@ -0,0 +1,3 @@ +.ar-Carousel { + +} diff --git a/src bkup/Carousel/Carousel.test.ts b/src bkup/Carousel/Carousel.test.ts new file mode 100755 index 0000000..a2e327d --- /dev/null +++ b/src bkup/Carousel/Carousel.test.ts @@ -0,0 +1,8 @@ +import React from "react" +import Carousel from "./Carousel" + +describe("Carousel", () => { + it("renders without error", () => { + + }) +}) diff --git a/src bkup/Carousel/Carousel.tsx b/src bkup/Carousel/Carousel.tsx new file mode 100755 index 0000000..3bae2fa --- /dev/null +++ b/src bkup/Carousel/Carousel.tsx @@ -0,0 +1,907 @@ +import { Children, Component, ReactNode } from "react" +import { AnimationHandler, CarouselProps, SwiperProps } from "@armco/types" +import { DomHelper } from "@armco/utils" +import klass from "./cssClasses" +import Thumbs from "./Thumbs" +import { + slideAnimationHandler, + slideSwipeAnimationHandler, + slideStopSwipingHandler, + fadeAnimationHandler, +} from "./animations" +import { Swiper } from ".." +import "./Carousel.component.scss" + +export interface CarouselState { + autoPlay?: boolean + cancelClick: boolean + hasMount: boolean + initialized: boolean + isMouseEntered: boolean + itemSize: number + previousItem: number + selectedItem: number + swiping?: boolean + swipeMovementStarted: boolean + itemListStyle?: React.CSSProperties + slideStyle?: React.CSSProperties + selectedStyle?: React.CSSProperties + prevStyle?: React.CSSProperties +} + +const noop = () => {} + +const defaultStatusFormatter = (current: number, total: number) => + `${current} of ${total}` + +export default class Carousel extends Component { + private thumbsRef?: Thumbs + private carouselWrapperRef?: HTMLDivElement + // @ts-ignore + private listRef?: HTMLElement | HTMLUListElement + private itemsRef?: HTMLElement[] + private timer?: ReturnType + private animationHandler: AnimationHandler + + static displayName = "Carousel" + + static defaultProps: CarouselProps = { + ariaLabel: undefined, + axis: "horizontal", + centerSlidePercentage: 80, + interval: 3000, + labels: { + leftArrow: "previous slide / item", + rightArrow: "next slide / item", + item: "slide item", + }, + onClickItem: noop, + onClickThumb: noop, + onChange: noop, + onSwipeStart: () => {}, + onSwipeEnd: () => {}, + onSwipeMove: () => false, + preventMovementUntilSwipeScrollTolerance: false, + renderArrowPrev: ( + onClickHandler: () => void, + hasPrev: boolean, + label: string, + ) => ( +
+
+ ) + } +} diff --git a/src bkup/Carousel/animations.ts b/src bkup/Carousel/animations.ts new file mode 100644 index 0000000..6dbb007 --- /dev/null +++ b/src bkup/Carousel/animations.ts @@ -0,0 +1,216 @@ +import { Children } from "react" +import { + AnimationHandler, + StopSwipingHandler, + SwipeAnimationHandler, + AnimationHandlerResponse, +} from "@armco/types" +import { DomHelper } from "../.." + +/** + * Main animation handler for the default 'sliding' style animation + * @param props + * @param state + */ +export const slideAnimationHandler: AnimationHandler = ( + props, + state, +): AnimationHandlerResponse => { + const returnStyles: AnimationHandlerResponse = {} + const { selectedItem } = state + const previousItem = selectedItem + const lastPosition = Children.count(props.children) - 1 + const needClonedSlide = + props.infiniteLoop && (selectedItem < 0 || selectedItem > lastPosition) + + // Handle list position if it needs a clone + if (needClonedSlide) { + if (previousItem < 0) { + if ( + props.centerMode && + props.centerSlidePercentage && + props.axis === "horizontal" + ) { + returnStyles.itemListStyle = DomHelper.setPosition( + -(lastPosition + 2) * props.centerSlidePercentage - + (100 - props.centerSlidePercentage) / 2, + props.axis, + ) + } else { + returnStyles.itemListStyle = DomHelper.setPosition( + -(lastPosition + 2) * 100, + props.axis, + ) + } + } else if (previousItem > lastPosition) { + returnStyles.itemListStyle = DomHelper.setPosition(0, props.axis) + } + + return returnStyles + } + + const currentPosition = DomHelper.getPosition(selectedItem, props) + + // if 3d is available, let's take advantage of the performance of transform + const transformProp = DomHelper.translate(currentPosition, "%", props.axis) + + const transitionTime = props.transitionTime + "ms" + + returnStyles.itemListStyle = { + WebkitTransform: transformProp, + msTransform: transformProp, + OTransform: transformProp, + transform: transformProp, + } + + if (!state.swiping) { + returnStyles.itemListStyle = { + ...returnStyles.itemListStyle, + WebkitTransitionDuration: transitionTime, + MozTransitionDuration: transitionTime, + OTransitionDuration: transitionTime, + transitionDuration: transitionTime, + msTransitionDuration: transitionTime, + } + } + + return returnStyles +} + +/** + * Swiping animation handler for the default 'sliding' style animation + * @param delta + * @param props + * @param state + * @param setState + */ +export const slideSwipeAnimationHandler: SwipeAnimationHandler = ( + delta, + props, + state, + setState, +): AnimationHandlerResponse => { + const returnStyles: AnimationHandlerResponse = {} + const isHorizontal = props.axis === "horizontal" + const childrenLength = Children.count(props.children) + + const initialBoundry = 0 + + const currentPosition = DomHelper.getPosition(state.selectedItem, props) + const finalBoundry = props.infiniteLoop + ? DomHelper.getPosition(childrenLength - 1, props) - 100 + : DomHelper.getPosition(childrenLength - 1, props) + + const axisDelta = isHorizontal ? delta.x : delta.y + let handledDelta = axisDelta + + // prevent user from swiping left out of boundaries + if (currentPosition === initialBoundry && axisDelta > 0) { + handledDelta = 0 + } + + // prevent user from swiping right out of boundaries + if (currentPosition === finalBoundry && axisDelta < 0) { + handledDelta = 0 + } + + let position = currentPosition + 100 / (state.itemSize / handledDelta) + const hasMoved = Math.abs(axisDelta) > props.swipeScrollTolerance + + if (props.infiniteLoop && hasMoved) { + // When allowing infinite loop, if we slide left from position 0 we reveal the cloned last slide that appears before it + // if we slide even further we need to jump to other side so it can continue - and vice versa for the last slide + if (state.selectedItem === 0 && position > -100) { + position -= childrenLength * 100 + } else if ( + state.selectedItem === childrenLength - 1 && + position < -childrenLength * 100 + ) { + position += childrenLength * 100 + } + } + + if ( + !props.preventMovementUntilSwipeScrollTolerance || + hasMoved || + state.swipeMovementStarted + ) { + if (!state.swipeMovementStarted) { + setState({ swipeMovementStarted: true }) + } + + returnStyles.itemListStyle = DomHelper.setPosition(position, props.axis) + } + + //allows scroll if the swipe was within the tolerance + if (hasMoved && !state.cancelClick) { + setState({ + cancelClick: true, + }) + } + return returnStyles +} + +/** + * Default 'sliding' style animination handler for when a swipe action stops. + * @param props + * @param state + */ +export const slideStopSwipingHandler: StopSwipingHandler = ( + props, + state, +): AnimationHandlerResponse => { + const currentPosition = DomHelper.getPosition(state.selectedItem, props) + const itemListStyle = DomHelper.setPosition(currentPosition, props.axis) + + return { + itemListStyle, + } +} + +/** + * Main animation handler for the default 'fade' style animation + * @param props + * @param state + */ +export const fadeAnimationHandler: AnimationHandler = ( + props, + state, +): AnimationHandlerResponse => { + const transitionTime = props.transitionTime + "ms" + const transitionTimingFunction = "ease-in-out" + + let slideStyle: React.CSSProperties = { + position: "absolute", + display: "block", + zIndex: -2, + minHeight: "100%", + opacity: 0, + top: 0, + right: 0, + left: 0, + bottom: 0, + transitionTimingFunction: transitionTimingFunction, + msTransitionTimingFunction: transitionTimingFunction, + MozTransitionTimingFunction: transitionTimingFunction, + WebkitTransitionTimingFunction: transitionTimingFunction, + OTransitionTimingFunction: transitionTimingFunction, + } + + if (!state.swiping) { + slideStyle = { + ...slideStyle, + WebkitTransitionDuration: transitionTime, + MozTransitionDuration: transitionTime, + OTransitionDuration: transitionTime, + transitionDuration: transitionTime, + msTransitionDuration: transitionTime, + } + } + + return { + slideStyle, + selectedStyle: { ...slideStyle, opacity: 1, position: "relative" }, + prevStyle: { ...slideStyle }, + } +} diff --git a/src bkup/Carousel/cssClasses.ts b/src bkup/Carousel/cssClasses.ts new file mode 100644 index 0000000..f45cc66 --- /dev/null +++ b/src bkup/Carousel/cssClasses.ts @@ -0,0 +1,58 @@ +import classNames from "classnames" + +const klass = { + ROOT: (customClassName?: string) => + classNames({ + "carousel-root": true, + [customClassName || ""]: !!customClassName, + }), + + CAROUSEL: (isSlider?: boolean) => + classNames({ + carousel: true, + "carousel-slider": isSlider, + }), + + WRAPPER: (isSlider: boolean, axis?: "horizontal" | "vertical") => + classNames({ + "thumbs-wrapper": !isSlider, + "slider-wrapper": isSlider, + "axis-horizontal": axis === "horizontal", + "axis-vertical": axis !== "horizontal", + }), + + SLIDER: (isSlider: boolean, isSwiping?: boolean) => + classNames({ + thumbs: !isSlider, + slider: isSlider, + animated: !isSwiping, + }), + + ITEM: (isSlider: boolean, selected: boolean, previous?: boolean) => + classNames({ + thumb: !isSlider, + slide: isSlider, + selected: selected, + previous: previous, + }), + + ARROW_PREV: (disabled?: boolean) => + classNames({ + "control-arrow control-prev": true, + "control-disabled": disabled, + }), + + ARROW_NEXT: (disabled?: boolean) => + classNames({ + "control-arrow control-next": true, + "control-disabled": disabled, + }), + + DOT: (selected?: boolean) => + classNames({ + dot: true, + selected: selected, + }), +} + +export default klass diff --git a/src bkup/Carousel/index.ts b/src bkup/Carousel/index.ts new file mode 100755 index 0000000..0c1a8f7 --- /dev/null +++ b/src bkup/Carousel/index.ts @@ -0,0 +1,3 @@ +import Carousel from "./Carousel" + +export default Carousel diff --git a/src bkup/CategoryFilter/CategoryFilter.component.scss b/src bkup/CategoryFilter/CategoryFilter.component.scss new file mode 100755 index 0000000..074293d --- /dev/null +++ b/src bkup/CategoryFilter/CategoryFilter.component.scss @@ -0,0 +1,3 @@ +.ar-CategoryFilter { + +} diff --git a/src bkup/CategoryFilter/CategoryFilter.test.ts b/src bkup/CategoryFilter/CategoryFilter.test.ts new file mode 100755 index 0000000..f56398a --- /dev/null +++ b/src bkup/CategoryFilter/CategoryFilter.test.ts @@ -0,0 +1,8 @@ +import React from "react" +import CategoryFilter from "./CategoryFilter" + +describe("CategoryFilter", () => { + it("renders without error", () => { + + }) +}) diff --git a/src bkup/CategoryFilter/CategoryFilter.tsx b/src bkup/CategoryFilter/CategoryFilter.tsx new file mode 100755 index 0000000..4bd72a3 --- /dev/null +++ b/src bkup/CategoryFilter/CategoryFilter.tsx @@ -0,0 +1,80 @@ +import { ArPillSizes, BasicFilterConfig, BasicFilterType } from "@armco/types" +import { Helper } from "@armco/utils" +import { SelectionPill } from ".." +import "./CategoryFilter.component.scss" + +interface CategoryFilterProps { + categoryGroups: { [key: string]: { [key: string]: Array } } + currentCategoryFilters?: { [key: string]: Array } + onFilterChange: Function +} + +const CategoryFilter = (props: CategoryFilterProps): JSX.Element => { + const { categoryGroups, currentCategoryFilters, onFilterChange } = props + + const onCategorySelection = ( + data: BasicFilterConfig, + categoryType: string, + ) => { + let filters = currentCategoryFilters + if (!filters) { + filters = {} + } + let groupCategories = filters[ + categoryType as keyof BasicFilterType + ] as BasicFilterConfig[] + let selectedItemIndex = -1 + if (!groupCategories) { + groupCategories = [] + filters[categoryType as keyof BasicFilterType] = groupCategories + } else { + selectedItemIndex = groupCategories?.findIndex( + (category) => category.value === data.value, + ) + } + if (selectedItemIndex === -1) { + groupCategories.push(data) + } else { + groupCategories.splice(selectedItemIndex, 1) + } + onFilterChange(filters, "categories") + } + + const categoryRenders = ( + categories: { [key: string]: Array } | undefined, + group: string, + ) => { + return ( + categories && ( +
+ {Object.keys(categories).map((category) => ( + + onCategorySelection(data, group) + } + /> + ))} +
+ ) + ) + } + const groupRenders = Object.keys(categoryGroups).map((group: string) => { + return ( +
+ +
+ {categoryRenders(categoryGroups[group], group)} +
+
+ ) + }) + + return
{groupRenders}
+} + +export default CategoryFilter diff --git a/src bkup/CategoryFilter/index.ts b/src bkup/CategoryFilter/index.ts new file mode 100755 index 0000000..3766d24 --- /dev/null +++ b/src bkup/CategoryFilter/index.ts @@ -0,0 +1,3 @@ +import CategoryFilter from "./CategoryFilter" + +export default CategoryFilter diff --git a/src bkup/Checkbox/Checkbox.component.scss b/src bkup/Checkbox/Checkbox.component.scss new file mode 100755 index 0000000..042f183 --- /dev/null +++ b/src bkup/Checkbox/Checkbox.component.scss @@ -0,0 +1,5 @@ +.ar-Checkbox { + .ar-Checkbox__state { + font-size: 0.75rem; + } +} diff --git a/src bkup/Checkbox/Checkbox.test.ts b/src bkup/Checkbox/Checkbox.test.ts new file mode 100755 index 0000000..728b002 --- /dev/null +++ b/src bkup/Checkbox/Checkbox.test.ts @@ -0,0 +1,8 @@ +import React from "react" +import Checkbox from "./Checkbox" + +describe("Checkbox", () => { + it("renders without error", () => { + + }) +}) \ No newline at end of file diff --git a/src bkup/Checkbox/Checkbox.tsx b/src bkup/Checkbox/Checkbox.tsx new file mode 100755 index 0000000..983b38e --- /dev/null +++ b/src bkup/Checkbox/Checkbox.tsx @@ -0,0 +1,33 @@ +import { useState } from "react" +import { CheckboxProps } from "@armco/types" +import { Toggle } from ".." +import "./Checkbox.component.scss" + +const Checkbox = (props: CheckboxProps): JSX.Element => { + const { classes, label, id, onChange } = props + const [checked, setChecked] = useState() + const { type, ...toggleProps } = props + return type === "TOGGLE" ? ( + + ) : ( +
+ {label && ( + + )} + {/* {checked ? "On" : "Off"} */} + { + setChecked(!checked) + onChange && onChange() + }} + checked={checked} + /> +
+ ) +} + +export default Checkbox diff --git a/src bkup/Checkbox/index.ts b/src bkup/Checkbox/index.ts new file mode 100755 index 0000000..79bf531 --- /dev/null +++ b/src bkup/Checkbox/index.ts @@ -0,0 +1,3 @@ +import Checkbox from "./Checkbox" + +export default Checkbox diff --git a/src bkup/ColorPicker/ColorPicker.component.scss b/src bkup/ColorPicker/ColorPicker.component.scss new file mode 100755 index 0000000..aa3ae05 --- /dev/null +++ b/src bkup/ColorPicker/ColorPicker.component.scss @@ -0,0 +1,14 @@ +.ar-ColorPicker { + .ar-ColorPicker__label { + + } + + .ar-ColorPicker__input { + cursor: pointer; + border: var(--ar-border); + border-radius: 50%; + block-size: 1.5rem; + inline-size: 1.5rem; + overflow: hidden; + } +} diff --git a/src bkup/ColorPicker/ColorPicker.test.ts b/src bkup/ColorPicker/ColorPicker.test.ts new file mode 100755 index 0000000..fe52575 --- /dev/null +++ b/src bkup/ColorPicker/ColorPicker.test.ts @@ -0,0 +1,8 @@ +import React from "react" +import ColorPicker from "./ColorPicker" + +describe("ColorPicker", () => { + it("renders without error", () => { + + }) +}) \ No newline at end of file diff --git a/src bkup/ColorPicker/ColorPicker.tsx b/src bkup/ColorPicker/ColorPicker.tsx new file mode 100755 index 0000000..8fb7b7d --- /dev/null +++ b/src bkup/ColorPicker/ColorPicker.tsx @@ -0,0 +1,34 @@ +import { useState } from "react" +import { ColorPickerProps } from "@armco/types" +import { Helper } from "@armco/utils" +import "./ColorPicker.component.scss" + +const ColorPicker = (props: ColorPickerProps): JSX.Element => { + const { id, label, onChange, value: externalValue } = props + const [value, setValue] = useState(externalValue) + const idFinal = id || Helper.generateRandomId() + return ( +
+ {label && ( + + )} + { + setValue(e.target.value) + onChange && onChange(e.target.value) + }} + /> +
+ ) +} + +export default ColorPicker diff --git a/src bkup/ColorPicker/index.ts b/src bkup/ColorPicker/index.ts new file mode 100755 index 0000000..1c677f6 --- /dev/null +++ b/src bkup/ColorPicker/index.ts @@ -0,0 +1,3 @@ +import ColorPicker from "./ColorPicker" + +export default ColorPicker diff --git a/src bkup/ColorSelector/ColorSelector.component.scss b/src bkup/ColorSelector/ColorSelector.component.scss new file mode 100755 index 0000000..3c41b4c --- /dev/null +++ b/src bkup/ColorSelector/ColorSelector.component.scss @@ -0,0 +1,38 @@ +.ar-ColorSelector { + width: 2rem; + + .ar-ColorSelector__item { + flex: 1; + min-height: 1.5rem; + cursor: pointer; + opacity: 0.5; + transition: all 0.3s; + + &:hover { + opacity: 1; + } + + &:first-child { + border-radius: 0.5rem 0.5rem 0 0; + } + + &:last-child { + background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab); + background-size: 400% 400%; + animation: gradient 15s ease infinite; + } + } + + .ar-ColorSelector__picker { + flex: 1; + min-height: 1.5rem; + transition: all 0.3s; + border-radius: 0 0 0.5rem 0.5rem; + } + + @keyframes gradient { + 0% {background-position: 0% 50%;} + 50% {background-position: 100% 50%;} + 100% {background-position: 0% 50%;} + } +} diff --git a/src bkup/ColorSelector/ColorSelector.test.ts b/src bkup/ColorSelector/ColorSelector.test.ts new file mode 100755 index 0000000..a21cfb6 --- /dev/null +++ b/src bkup/ColorSelector/ColorSelector.test.ts @@ -0,0 +1,8 @@ +import React from "react" +import ColorSelector from "./ColorSelector" + +describe("ColorSelector", () => { + it("renders without error", () => { + + }) +}) diff --git a/src bkup/ColorSelector/ColorSelector.tsx b/src bkup/ColorSelector/ColorSelector.tsx new file mode 100755 index 0000000..d8d4fd3 --- /dev/null +++ b/src bkup/ColorSelector/ColorSelector.tsx @@ -0,0 +1,62 @@ +import { useState } from "react" +import { ColorSelectorProps } from "@armco/types" +import { TextInput } from ".." +import "./ColorSelector.component.scss" + +const ColorSelector = (props: ColorSelectorProps): JSX.Element => { + const { classes, label, onChange, withSample } = props + const [iconColor, setIconColor] = useState() + + const onColorChange = (color: string) => { + setIconColor(color) + onChange && onChange(color) + } + const selectors = [ + "#9400D3", + "pink", + "aquamarine", + "olive", + "brown", + "lightblue", + "#4B0082", + "#0000FF", + "#00FF00", + "#FFFF00", + "#FF7F00", + "#FF0000", + ].map((color: string) => { + return ( +
  • onColorChange(color)} + /> + ) + }) + return ( +
    + {label &&
    {label}
    } +
      + {selectors} + onColorChange((e.target as HTMLInputElement).value)} + /> +
    + {withSample && ( +
    + )} +
    + ) +} + +export default ColorSelector diff --git a/src bkup/ColorSelector/index.ts b/src bkup/ColorSelector/index.ts new file mode 100755 index 0000000..339e062 --- /dev/null +++ b/src bkup/ColorSelector/index.ts @@ -0,0 +1,3 @@ +import ColorSelector from "./ColorSelector" + +export default ColorSelector diff --git a/src bkup/Component_404/Component_404.component.scss b/src bkup/Component_404/Component_404.component.scss new file mode 100755 index 0000000..8997e16 --- /dev/null +++ b/src bkup/Component_404/Component_404.component.scss @@ -0,0 +1,13 @@ +.ar-Component_404 { + .ar-Component_404-content { + height: 30rem; + min-width: 30rem; + font-size: 0.8rem; + border: var(--ar-border); + background-color: var(--ar-bg-base); + transition: box-shadow 0.3s; + &:hover { + box-shadow: 0px 4px 8px var(--ar-shadow); + } + } +} diff --git a/src bkup/Component_404/Component_404.test.ts b/src bkup/Component_404/Component_404.test.ts new file mode 100755 index 0000000..e2279db --- /dev/null +++ b/src bkup/Component_404/Component_404.test.ts @@ -0,0 +1,8 @@ +import React from "react" +import Component_404 from "./Component_404" + +describe("Component_404", () => { + it("renders without error", () => { + + }) +}) diff --git a/src bkup/Component_404/Component_404.tsx b/src bkup/Component_404/Component_404.tsx new file mode 100755 index 0000000..b98aefe --- /dev/null +++ b/src bkup/Component_404/Component_404.tsx @@ -0,0 +1,22 @@ +import { Component_404Props } from "@armco/types" +import { Icon } from "@armco/icon" +import "./Component_404.component.scss" + +const Component_404 = (props: Component_404Props): JSX.Element => { + const { iconSize } = props + return ( +
    +
    + +
    Could not dig what you asked for
    +

    Please check the URL and try again.

    +

    + You may also use the tabs (right-top) to navigate if you're not sure + about the URL +

    +
    +
    + ) +} + +export default Component_404 diff --git a/src bkup/Component_404/index.ts b/src bkup/Component_404/index.ts new file mode 100755 index 0000000..6648eae --- /dev/null +++ b/src bkup/Component_404/index.ts @@ -0,0 +1,3 @@ +import Component_404 from "./Component_404" + +export default Component_404 diff --git a/src bkup/Contact/Contact.component.scss b/src bkup/Contact/Contact.component.scss new file mode 100755 index 0000000..6db1f2d --- /dev/null +++ b/src bkup/Contact/Contact.component.scss @@ -0,0 +1,3 @@ +.ar-Contact { + +} diff --git a/src bkup/Contact/Contact.test.ts b/src bkup/Contact/Contact.test.ts new file mode 100755 index 0000000..8adb96a --- /dev/null +++ b/src bkup/Contact/Contact.test.ts @@ -0,0 +1,8 @@ +import React from "react" +import Contact from "./Contact" + +describe("Contact", () => { + it("renders without error", () => { + + }) +}) \ No newline at end of file diff --git a/src bkup/Contact/Contact.tsx b/src bkup/Contact/Contact.tsx new file mode 100755 index 0000000..ce83b62 --- /dev/null +++ b/src bkup/Contact/Contact.tsx @@ -0,0 +1,14 @@ +import React from "react" +import "./Contact.component.scss" + +interface ContactProps {} + +const Contact = (props: any): JSX.Element => { + return ( +
    + In Component Contact +
    + ) +} + +export default Contact \ No newline at end of file diff --git a/src bkup/Contact/index.ts b/src bkup/Contact/index.ts new file mode 100755 index 0000000..61f8508 --- /dev/null +++ b/src bkup/Contact/index.ts @@ -0,0 +1,3 @@ +import Contact from "./Contact" + +export default Contact \ No newline at end of file diff --git a/src bkup/Content/Content.component.scss b/src bkup/Content/Content.component.scss new file mode 100755 index 0000000..49fc008 --- /dev/null +++ b/src bkup/Content/Content.component.scss @@ -0,0 +1,3 @@ +.ar-Content { + background-color: var(--ar-bg-secondary); +} diff --git a/src bkup/Content/Content.test.ts b/src bkup/Content/Content.test.ts new file mode 100755 index 0000000..23ead5c --- /dev/null +++ b/src bkup/Content/Content.test.ts @@ -0,0 +1,6 @@ +import React from "react" +import Content from "./Content" + +describe("Content", () => { + it("renders without error", () => {}) +}) diff --git a/src bkup/Content/Content.tsx b/src bkup/Content/Content.tsx new file mode 100755 index 0000000..e18524d --- /dev/null +++ b/src bkup/Content/Content.tsx @@ -0,0 +1,18 @@ +import { ReactNode } from "react" +import "./Content.component.scss" + +interface ContentProps { + children?: ReactNode + classes?: string +} + +const Content = (props: ContentProps): JSX.Element => { + const { children, classes } = props + return ( +
    + {children} +
    + ) +} + +export default Content diff --git a/src bkup/Content/index.ts b/src bkup/Content/index.ts new file mode 100755 index 0000000..6fc6e12 --- /dev/null +++ b/src bkup/Content/index.ts @@ -0,0 +1,3 @@ +import Content from "./Content" + +export default Content diff --git a/src bkup/ContextMenu/ContextMenu.component.scss b/src bkup/ContextMenu/ContextMenu.component.scss new file mode 100755 index 0000000..657d0f3 --- /dev/null +++ b/src bkup/ContextMenu/ContextMenu.component.scss @@ -0,0 +1,3 @@ +.ar-ContextMenu { + +} diff --git a/src bkup/ContextMenu/ContextMenu.test.ts b/src bkup/ContextMenu/ContextMenu.test.ts new file mode 100755 index 0000000..c919122 --- /dev/null +++ b/src bkup/ContextMenu/ContextMenu.test.ts @@ -0,0 +1,8 @@ +import React from "react" +import ContextMenu from "./ContextMenu" + +describe("ContextMenu", () => { + it("renders without error", () => { + + }) +}) \ No newline at end of file diff --git a/src bkup/ContextMenu/ContextMenu.tsx b/src bkup/ContextMenu/ContextMenu.tsx new file mode 100755 index 0000000..0570877 --- /dev/null +++ b/src bkup/ContextMenu/ContextMenu.tsx @@ -0,0 +1,69 @@ +import { useEffect, useRef, useState } from "react" +import { ContextMenuProps } from "@armco/types" +import { InlineMenu } from ".." +import "./ContextMenu.component.scss" + +const ContextMenu = (props: ContextMenuProps): JSX.Element => { + const { children, classes, data, demo, style } = props + const [clickCoordinates, setClickCoordinates] = useState<{ + [key: string]: number + }>({}) + const [clicked, setClicked] = useState() + const menuRef = useRef(null) + const dummyData = { + Create: { + onClick: () => setClicked(false), + }, + Delete: { + onClick: () => setClicked(false), + }, + Clone: { + onClick: () => setClicked(false), + }, + Suspend: { + onClick: () => setClicked(false), + }, + } + const finalData = data || (demo && dummyData) + + useEffect(() => { + let listener = (e: MouseEvent) => { + if (menuRef.current && !menuRef.current.contains(e.target as Node)) { + setClicked(false) + } + } + document.addEventListener("click", listener) + return () => document.removeEventListener("click", listener) + }, [menuRef]) + + return ( +
    +
    setClicked(false)} + onContextMenu={(e) => { + e.preventDefault() + setClicked(true) + setClickCoordinates({ x: e.pageX, y: e.pageY }) + }} + > + {children} +
    + {clicked && ( + + )} +
    + ) +} + +export default ContextMenu diff --git a/src bkup/ContextMenu/index.ts b/src bkup/ContextMenu/index.ts new file mode 100755 index 0000000..4e326a2 --- /dev/null +++ b/src bkup/ContextMenu/index.ts @@ -0,0 +1,3 @@ +import ContextMenu from "./ContextMenu" + +export default ContextMenu diff --git a/src bkup/Cookies/Cookies.component.scss b/src bkup/Cookies/Cookies.component.scss new file mode 100755 index 0000000..9e88a02 --- /dev/null +++ b/src bkup/Cookies/Cookies.component.scss @@ -0,0 +1,3 @@ +.ar-Cookies { + +} diff --git a/src bkup/Cookies/Cookies.test.ts b/src bkup/Cookies/Cookies.test.ts new file mode 100755 index 0000000..540977e --- /dev/null +++ b/src bkup/Cookies/Cookies.test.ts @@ -0,0 +1,8 @@ +import React from "react" +import Cookies from "./Cookies" + +describe("Cookies", () => { + it("renders without error", () => { + + }) +}) \ No newline at end of file diff --git a/src bkup/Cookies/Cookies.tsx b/src bkup/Cookies/Cookies.tsx new file mode 100755 index 0000000..6a1cf9d --- /dev/null +++ b/src bkup/Cookies/Cookies.tsx @@ -0,0 +1,14 @@ +import React from "react" +import "./Cookies.component.scss" + +interface CookiesProps {} + +const Cookies = (props: any): JSX.Element => { + return ( +
    + In Component Cookies +
    + ) +} + +export default Cookies \ No newline at end of file diff --git a/src bkup/Cookies/index.ts b/src bkup/Cookies/index.ts new file mode 100755 index 0000000..5fe8722 --- /dev/null +++ b/src bkup/Cookies/index.ts @@ -0,0 +1,3 @@ +import Cookies from "./Cookies" + +export default Cookies diff --git a/src bkup/CronTab/CronTab.component.scss b/src bkup/CronTab/CronTab.component.scss new file mode 100755 index 0000000..e53d479 --- /dev/null +++ b/src bkup/CronTab/CronTab.component.scss @@ -0,0 +1,55 @@ +.ar-CronTab { + .ar-CronTab__input { + width: 2rem; + font-size: 1.5rem; + input { + outline: none; + border: none; + text-align: center; + &::placeholder { + text-align: center; + font-style: normal; + font-weight: bold; + color: lightgrey; + } + + &::-ms-input-placeholder { + text-align: center; + font-style: normal; + font-weight: bold; + color: lightgrey; + } + + &.form-component { + border: none; + &:focus-visible { + border-bottom: none; + background-color: transparent; + } + } + } + } + + .ar-CronTab__help-text { + border-radius: 0.25rem; + background-color: var(--ar-bg-mild); + + header { + height: auto; + } + section { + max-height: 0; + overflow: hidden; + transition: all 0.3s; + &.expanded { + max-height: 30vh; + } + } + ol { + padding-left: 0.75rem; + li { + padding-bottom: 0.25rem; + } + } + } +} diff --git a/src bkup/CronTab/CronTab.test.ts b/src bkup/CronTab/CronTab.test.ts new file mode 100755 index 0000000..7cb84a8 --- /dev/null +++ b/src bkup/CronTab/CronTab.test.ts @@ -0,0 +1,8 @@ +import React from "react" +import CronTab from "./CronTab" + +describe("CronTab", () => { + it("renders without error", () => { + + }) +}) diff --git a/src bkup/CronTab/CronTab.tsx b/src bkup/CronTab/CronTab.tsx new file mode 100755 index 0000000..03834c3 --- /dev/null +++ b/src bkup/CronTab/CronTab.tsx @@ -0,0 +1,94 @@ +import { ChangeEvent, useEffect, useState } from "react" +import { CronTabProps, FunctionType } from "@armco/types" +import { Icon } from "@armco/icon" +import { TextInput } from ".." +import "./CronTab.component.scss" + +const cronFields = ["min", "hour", "day", "week", "month"] +const CronTab = (props: CronTabProps): JSX.Element => { + const { onChange, value } = props + const [cronTab, setCronTab] = useState<{ [key: string]: string }>({}) + const [helpExpanded, toggleHelpExpanded] = useState() + + useEffect(() => { + if (value) { + const actualValue = typeof value === "object" ? value.cron : value + const values = (actualValue as string).split("") + const cronTabState: { [key: string]: string } = {} + values.forEach((value: string, index) => { + cronTabState[cronFields[index]] = value + }) + setCronTab(cronTabState) + } + }, [value]) + + const handleChange = (e: ChangeEvent, type: string) => { + const currentValue = cronTab[type] + const newValue = (e.target as HTMLInputElement).value + const lastChar = newValue.charAt(newValue.length - 1) + if (newValue.length === 1 || currentValue !== lastChar) { + const newCronState = { ...cronTab, [type]: lastChar || "" } + setCronTab(newCronState) + onChange && onChange(newCronState) + } + } + + const cronFieldRenders = cronFields.map((cronField, index) => { + return ( + handleChange(e, cronField)) as FunctionType + } + value={cronTab[cronField]} + /> + ) + }) + return ( +
    +
    + {cronFieldRenders} +
    +
    +
    toggleHelpExpanded(!helpExpanded)} + > + Examples + +
    +
    + +
      +
    1. + 0 0 * * *: Every day at midnight. +
      2. +
    2. + 0 * * * *: Every hour. +
      3. +
    3. + 0 9 * * 1-5: Every weekday at 9 AM. +
      4. +
    4. + */15 * * * *: Every 15 minutes. +
      5. +
    5. + 0 0 1 * *: On the 1st day of every month at + midnight. +
      6. +
    +     +
    +
    +
    + ) +} + +export default CronTab diff --git a/src bkup/CronTab/index.ts b/src bkup/CronTab/index.ts new file mode 100755 index 0000000..9673e16 --- /dev/null +++ b/src bkup/CronTab/index.ts @@ -0,0 +1,3 @@ +import CronTab from "./CronTab" + +export default CronTab diff --git a/src bkup/Cta/Cta.component.scss b/src bkup/Cta/Cta.component.scss new file mode 100755 index 0000000..af4b580 --- /dev/null +++ b/src bkup/Cta/Cta.component.scss @@ -0,0 +1,3 @@ +.ar-Cta { + +} diff --git a/src bkup/Cta/Cta.test.ts b/src bkup/Cta/Cta.test.ts new file mode 100755 index 0000000..c58457b --- /dev/null +++ b/src bkup/Cta/Cta.test.ts @@ -0,0 +1,8 @@ +import React from "react" +import Cta from "./Cta" + +describe("Cta", () => { + it("renders without error", () => { + + }) +}) \ No newline at end of file diff --git a/src bkup/Cta/Cta.tsx b/src bkup/Cta/Cta.tsx new file mode 100755 index 0000000..0c42c81 --- /dev/null +++ b/src bkup/Cta/Cta.tsx @@ -0,0 +1,14 @@ +import React from "react" +import "./Cta.component.scss" + +interface CtaProps {} + +const Cta = (props: any): JSX.Element => { + return ( +
    + In Component Cta +
    + ) +} + +export default Cta \ No newline at end of file diff --git a/src bkup/Cta/index.ts b/src bkup/Cta/index.ts new file mode 100755 index 0000000..a50c3f1 --- /dev/null +++ b/src bkup/Cta/index.ts @@ -0,0 +1,3 @@ +import Cta from "./Cta" + +export default Cta diff --git a/src bkup/Dashboard/Dashboard.component.scss b/src bkup/Dashboard/Dashboard.component.scss new file mode 100755 index 0000000..9828c6e --- /dev/null +++ b/src bkup/Dashboard/Dashboard.component.scss @@ -0,0 +1,3 @@ +.ar-Dashboard { + +} diff --git a/src bkup/Dashboard/Dashboard.test.ts b/src bkup/Dashboard/Dashboard.test.ts new file mode 100755 index 0000000..3c2ff26 --- /dev/null +++ b/src bkup/Dashboard/Dashboard.test.ts @@ -0,0 +1,8 @@ +import React from "react" +import Dashboard from "./Dashboard" + +describe("Dashboard", () => { + it("renders without error", () => { + + }) +}) \ No newline at end of file diff --git a/src bkup/Dashboard/Dashboard.tsx b/src bkup/Dashboard/Dashboard.tsx new file mode 100755 index 0000000..4f81b1c --- /dev/null +++ b/src bkup/Dashboard/Dashboard.tsx @@ -0,0 +1,14 @@ +import React from "react" +import "./Dashboard.component.scss" + +interface DashboardProps {} + +const Dashboard = (props: any): JSX.Element => { + return ( +
    + In Component Dashboard +
    + ) +} + +export default Dashboard \ No newline at end of file diff --git a/src bkup/Dashboard/index.ts b/src bkup/Dashboard/index.ts new file mode 100755 index 0000000..dd89cf3 --- /dev/null +++ b/src bkup/Dashboard/index.ts @@ -0,0 +1,3 @@ +import Dashboard from "./Dashboard" + +export default Dashboard diff --git a/src bkup/DateInput/DateInput.component.scss b/src bkup/DateInput/DateInput.component.scss new file mode 100755 index 0000000..e28f4a3 --- /dev/null +++ b/src bkup/DateInput/DateInput.component.scss @@ -0,0 +1,16 @@ +.ar-DateInput { + border-top-left-radius: 0.125rem; + border-bottom-left-radius: 0.125rem; + .ar-DateInput__picker { + outline: none; + } + + .ar-DateInput__clear-button { + visibility: hidden; + padding: 0 0.75rem; + + &.has-value { + visibility: visible; + } + } +} diff --git a/src bkup/DateInput/DateInput.test.ts b/src bkup/DateInput/DateInput.test.ts new file mode 100755 index 0000000..c069921 --- /dev/null +++ b/src bkup/DateInput/DateInput.test.ts @@ -0,0 +1,8 @@ +import React from "react" +import DateInput from "./DateInput" + +describe("DateInput", () => { + it("renders without error", () => { + + }) +}) \ No newline at end of file diff --git a/src bkup/DateInput/DateInput.tsx b/src bkup/DateInput/DateInput.tsx new file mode 100755 index 0000000..98a2d73 --- /dev/null +++ b/src bkup/DateInput/DateInput.tsx @@ -0,0 +1,51 @@ +import { useEffect, useState } from "react" +import { DateInputProps } from "@armco/types" +import "./DateInput.component.scss" + +const DateInput = (props: DateInputProps): JSX.Element => { + const { + classes, + containerClasses, + id, + label, + labelClasses, + placeholder, + value, + } = props + const [localValue, setLocalValue] = useState() + + useEffect(() => { + setLocalValue(value as string) + }, [value]) + + return ( +
    + {label && ( + + )} + setLocalValue(e.target.value)} + placeholder={placeholder} + type="date" + value={localValue} + /> +
    + ) +} + +export default DateInput diff --git a/src bkup/DateInput/index.ts b/src bkup/DateInput/index.ts new file mode 100755 index 0000000..74c74ad --- /dev/null +++ b/src bkup/DateInput/index.ts @@ -0,0 +1,3 @@ +import DateInput from "./DateInput" + +export default DateInput diff --git a/src bkup/DetailsPanel/DetailsPanel.component.scss b/src bkup/DetailsPanel/DetailsPanel.component.scss new file mode 100755 index 0000000..02f48c1 --- /dev/null +++ b/src bkup/DetailsPanel/DetailsPanel.component.scss @@ -0,0 +1,3 @@ +.ar-DetailsPanel { + +} diff --git a/src bkup/DetailsPanel/DetailsPanel.test.ts b/src bkup/DetailsPanel/DetailsPanel.test.ts new file mode 100755 index 0000000..8d46ea5 --- /dev/null +++ b/src bkup/DetailsPanel/DetailsPanel.test.ts @@ -0,0 +1,8 @@ +import React from "react" +import DetailsPanel from "./DetailsPanel" + +describe("DetailsPanel", () => { + it("renders without error", () => { + + }) +}) \ No newline at end of file diff --git a/src bkup/DetailsPanel/DetailsPanel.tsx b/src bkup/DetailsPanel/DetailsPanel.tsx new file mode 100755 index 0000000..6d2d887 --- /dev/null +++ b/src bkup/DetailsPanel/DetailsPanel.tsx @@ -0,0 +1,8 @@ +import { DetailsPanelProps } from "@armco/types" +import "./DetailsPanel.component.scss" + +const DetailsPanel = (props: DetailsPanelProps): JSX.Element => { + return
    In Component DetailsPanel
    +} + +export default DetailsPanel diff --git a/src bkup/DetailsPanel/index.ts b/src bkup/DetailsPanel/index.ts new file mode 100755 index 0000000..c94d5c7 --- /dev/null +++ b/src bkup/DetailsPanel/index.ts @@ -0,0 +1,3 @@ +import DetailsPanel from "./DetailsPanel" + +export default DetailsPanel \ No newline at end of file diff --git a/src bkup/Dialog/Dialog.component.scss b/src bkup/Dialog/Dialog.component.scss new file mode 100755 index 0000000..c7f39de --- /dev/null +++ b/src bkup/Dialog/Dialog.component.scss @@ -0,0 +1,3 @@ +.ar-Dialog { + +} diff --git a/src bkup/Dialog/Dialog.test.ts b/src bkup/Dialog/Dialog.test.ts new file mode 100755 index 0000000..4d010be --- /dev/null +++ b/src bkup/Dialog/Dialog.test.ts @@ -0,0 +1,8 @@ +import React from "react" +import Dialog from "./Dialog" + +describe("Dialog", () => { + it("renders without error", () => { + + }) +}) \ No newline at end of file diff --git a/src bkup/Dialog/Dialog.tsx b/src bkup/Dialog/Dialog.tsx new file mode 100755 index 0000000..0313ea0 --- /dev/null +++ b/src bkup/Dialog/Dialog.tsx @@ -0,0 +1,8 @@ +import { DialogProps } from "@armco/types" +import "./Dialog.component.scss" + +const Dialog = (props: DialogProps): JSX.Element => { + return
    In Component Dialog
    +} + +export default Dialog diff --git a/src bkup/Dialog/index.ts b/src bkup/Dialog/index.ts new file mode 100755 index 0000000..b4913db --- /dev/null +++ b/src bkup/Dialog/index.ts @@ -0,0 +1,3 @@ +import Dialog from "./Dialog" + +export default Dialog diff --git a/src bkup/Download/Download.component.scss b/src bkup/Download/Download.component.scss new file mode 100755 index 0000000..e772d25 --- /dev/null +++ b/src bkup/Download/Download.component.scss @@ -0,0 +1,3 @@ +.ar-Download { + +} diff --git a/src bkup/Download/Download.test.ts b/src bkup/Download/Download.test.ts new file mode 100755 index 0000000..ccf1a0d --- /dev/null +++ b/src bkup/Download/Download.test.ts @@ -0,0 +1,8 @@ +import React from "react" +import Download from "./Download" + +describe("Download", () => { + it("renders without error", () => { + + }) +}) \ No newline at end of file diff --git a/src bkup/Download/Download.tsx b/src bkup/Download/Download.tsx new file mode 100755 index 0000000..20990f8 --- /dev/null +++ b/src bkup/Download/Download.tsx @@ -0,0 +1,14 @@ +import React from "react" +import "./Download.component.scss" + +interface DownloadProps {} + +const Download = (props: any): JSX.Element => { + return ( +
    + In Component Download +
    + ) +} + +export default Download \ No newline at end of file diff --git a/src bkup/Download/index.ts b/src bkup/Download/index.ts new file mode 100755 index 0000000..b33067c --- /dev/null +++ b/src bkup/Download/index.ts @@ -0,0 +1,3 @@ +import Download from "./Download" + +export default Download diff --git a/src bkup/Draggable/Draggable.component.scss b/src bkup/Draggable/Draggable.component.scss new file mode 100755 index 0000000..c2dad40 --- /dev/null +++ b/src bkup/Draggable/Draggable.component.scss @@ -0,0 +1,3 @@ +.ar-Draggable { + +} diff --git a/src bkup/Draggable/Draggable.test.ts b/src bkup/Draggable/Draggable.test.ts new file mode 100755 index 0000000..c7e36bc --- /dev/null +++ b/src bkup/Draggable/Draggable.test.ts @@ -0,0 +1,8 @@ +import React from "react" +import Draggable from "./Draggable" + +describe("Draggable", () => { + it("renders without error", () => { + + }) +}) diff --git a/src bkup/Draggable/Draggable.tsx b/src bkup/Draggable/Draggable.tsx new file mode 100755 index 0000000..d9f5984 --- /dev/null +++ b/src bkup/Draggable/Draggable.tsx @@ -0,0 +1,87 @@ +import { + Children, + MutableRefObject, + ReactElement, + cloneElement, + forwardRef, + useEffect, + useRef, +} from "react" +import { findDOMNode } from "react-dom" +import { useDrag } from "react-dnd" +import { ArDndItemTypes, DraggableProps } from "@armco/types" +import "./Draggable.component.scss" + +const dummyChildren = ( +
    +) + +const Draggable = forwardRef((props: DraggableProps, ref) => { + const { + canDrag, + children, + demo, + itemData, + itemType = ArDndItemTypes.GENERIC, + style, + } = props + + const localRef = useRef(null) + ref = ref || localRef + const useChildren = demo ? children || dummyChildren : children + let firstChild + if (typeof useChildren === "string") { + firstChild = {useChildren} + } else { + const childrenArray = Children.toArray(useChildren) + firstChild = childrenArray[0] + // Warn if more than one child is passed + if (childrenArray.length > 1) { + console.warn( + "More than one child is passed to Draggable component. Only the first child will be made draggable.", + ) + } + } + + const [{ isDragging }, drag] = useDrag( + () => ({ + type: itemType, + item: itemData, + collect: (monitor) => ({ + isDragging: !!monitor.isDragging(), + }), + canDrag: canDrag !== false, + }), + [canDrag, itemData], + ) + + useEffect(() => { + const node = findDOMNode((ref as MutableRefObject).current) + if (node && node.nodeType === Node.ELEMENT_NODE) { + drag(node as Element) + } + }, [drag]) + + const { + style: childStyles, + className: childClasses, + ...restProps + } = (firstChild as ReactElement)?.props || {} + + // Clone the first child and attach the drag function to it + return cloneElement(firstChild as ReactElement, { + ref, + style: { + cursor: "move", + opacity: isDragging ? 0.5 : 1, + ...(style || {}), + ...(childStyles || {}), + }, + className: `ar-Draggable ${childClasses || ""}`.trim(), + ...(restProps || {}), + }) +}) + +export default Draggable diff --git a/src bkup/Draggable/index.ts b/src bkup/Draggable/index.ts new file mode 100755 index 0000000..6dbc91b --- /dev/null +++ b/src bkup/Draggable/index.ts @@ -0,0 +1,3 @@ +import Draggable from "./Draggable" + +export default Draggable diff --git a/src bkup/Drawer/Drawer.component.scss b/src bkup/Drawer/Drawer.component.scss new file mode 100755 index 0000000..81aa012 --- /dev/null +++ b/src bkup/Drawer/Drawer.component.scss @@ -0,0 +1,38 @@ +.ar-Drawer { + border-right: 1px solid var(--ar-color-layout-border); + &.collapsed { + .ar-Drawer__expander { + right: 1rem; + } + } + .ar-Drawer__expander { + top: 4px; + right: 6px; + } + /* width */ + &::-webkit-scrollbar { + width: 4px; + } + + /* Track */ + &::-webkit-scrollbar-track { + background: #f1f1f1; + } + + /* Handle */ + &::-webkit-scrollbar-thumb { + background: #bbb; + border-radius: 2px; + &:hover { + background: #888; + } + } + + & + .ar-Content { + width: 85%; + } + + &:focus-visible { + outline: none; + } +} diff --git a/src bkup/Drawer/Drawer.test.ts b/src bkup/Drawer/Drawer.test.ts new file mode 100755 index 0000000..2e59a9f --- /dev/null +++ b/src bkup/Drawer/Drawer.test.ts @@ -0,0 +1,8 @@ +import React from "react" +import Drawer from "./Drawer" + +describe("Drawer", () => { + it("renders without error", () => { + + }) +}) \ No newline at end of file diff --git a/src bkup/Drawer/Drawer.tsx b/src bkup/Drawer/Drawer.tsx new file mode 100755 index 0000000..e007337 --- /dev/null +++ b/src bkup/Drawer/Drawer.tsx @@ -0,0 +1,68 @@ +import { useEffect, useRef } from "react" +import { ArThemes, DrawerProps } from "@armco/types" +import { Icon } from "@armco/icon" +import { Helper, useDrawerState, useSlotted, useTheme } from "@armco/utils" +import "./Drawer.component.scss" + +const isMobile = Helper.isMobile() +let clickedSelf: boolean + +const Drawer = (props: DrawerProps): JSX.Element => { + const { children, classes, isCollapsible } = props + const drawerRef = useRef(null) + const { drawerState, setDrawerState } = useDrawerState() + const { theme } = useTheme() + useSlotted("Drawer") + + useEffect(() => { + if (isMobile) { + if (!drawerState?.collapsed) { + drawerRef.current?.focus() + } + } + }, [drawerState]) + + return ( + + ) +} + +export default Drawer diff --git a/src bkup/Drawer/index.ts b/src bkup/Drawer/index.ts new file mode 100755 index 0000000..5b051e9 --- /dev/null +++ b/src bkup/Drawer/index.ts @@ -0,0 +1,3 @@ +import Drawer from "./Drawer" + +export default Drawer diff --git a/src bkup/Dropdown/Dropdown.component.scss b/src bkup/Dropdown/Dropdown.component.scss new file mode 100755 index 0000000..f642d70 --- /dev/null +++ b/src bkup/Dropdown/Dropdown.component.scss @@ -0,0 +1,22 @@ +.ar-Dropdown { + color: var(--ar-color-font) !important; + + &.disabled .ar-Dropdown__selection-anchor { + background-color: var(--ar-color-disabled-3); + } + + select:focus-visible { + outline: none; + border-bottom: var(--ar-border-bottom-focus-visible); + } + + &.small select { + height: 1.5rem; + } + + .ar-Dropdown__selection-anchor { + background-color: var(--ar-form-component-bg); + min-width: 7rem; + // height: 2rem; + } +} diff --git a/src bkup/Dropdown/Dropdown.test.ts b/src bkup/Dropdown/Dropdown.test.ts new file mode 100755 index 0000000..a9a6282 --- /dev/null +++ b/src bkup/Dropdown/Dropdown.test.ts @@ -0,0 +1,6 @@ +import React from "react" +import Dropdown from "./Dropdown" + +describe("Dropdown", () => { + it("renders without error", () => {}) +}) diff --git a/src bkup/Dropdown/Dropdown.tsx b/src bkup/Dropdown/Dropdown.tsx new file mode 100755 index 0000000..29a3547 --- /dev/null +++ b/src bkup/Dropdown/Dropdown.tsx @@ -0,0 +1,376 @@ +import { useEffect, useState } from "react" +import { + ArButtonVariants, + ArDropdownVariants, + ArPlacement, + ArPopoverPositions, + ArPopoverSlots, + ArThemes, + DropdownProps, + OptionType, + PRIMITIVES, +} from "@armco/types" +import { Icon } from "@armco/icon" +import { Button, List, Pill, Pillbox, Popover } from ".." +import "./Dropdown.component.scss" + +const demoOptions: Array = [ + { label: "New Delhi", name: "New Delhi", value: "DL" }, + { label: "Mumbai", name: "Mumbai", value: "MU" }, + { label: "Bangalore", name: "Bangalore", value: "BL" }, + { label: "Chennai", name: "Chennai", value: "CH" }, +] + +const Dropdown = (props: DropdownProps): JSX.Element => { + const { + assistiveContent, + anchorClasses, + classes, + contentClasses, + contentMatchAnchorWidth, + context, + demo, + hasBorder, + hideDropdownMarker = true, + labelClasses, + labelPlacement, + placeholder, + showCheckBoxes, + subtitle, + id, + isDisabled, + isMultiSelect, + label, + onSelectionChanged, + options, + required, + selected, + size, + stretch, + theme, + variant, + version, + } = props + + const [value, setValue] = useState>() + const [localOptions, setLocalOptions] = useState>() + const [isDropdownOpen, setIsDropdownOpen] = useState() + const useOptions = options ? options : demo ? demoOptions : [] + const isLabelLR = + labelPlacement === ArPlacement.LEFT || labelPlacement === ArPlacement.RIGHT + + useEffect(() => { + !localOptions && setLocalOptions(useOptions) + if (useOptions?.findIndex((o) => o.isSelected) > -1) { + setValue( + useOptions + .filter((o) => o.isSelected) + .map((o) => (o.label || o.name) as PRIMITIVES), + ) + } + // eslint-disable-next-line react-hooks/exhaustive-deps + }, [useOptions]) + + useEffect(() => { + if (selected) { + setValue(selected) + const data = localOptions?.filter( + (o) => selected.findIndex((s) => (o.name || o.label) === s) > -1, + ) + onSelectionChanged && + onSelectionChanged( + { + value: selected, + data, + }, + context, + ) + } + }, [selected, localOptions, onSelectionChanged, context]) + + const onLocalChange = ( + selectedItem: OptionType, + selections: Array, + ) => { + let valueStr, values: Array + if (selectedItem) { + valueStr = + selectedItem.name !== undefined ? selectedItem.name : selectedItem.label + } + if (valueStr !== undefined) { + values = value ? [...value] : [] + const existingItemIndex = values.findIndex( + (v) => v === (selectedItem.name || selectedItem.label), + ) + let state + if (existingItemIndex > -1) { + values.splice(existingItemIndex, 1) + state = "deleted" + } else { + state = "value" + if (isMultiSelect) { + values.push(valueStr as PRIMITIVES) + } else { + values.splice(0, 1, valueStr as PRIMITIVES) + setIsDropdownOpen(false) + } + } + setValue(values) + const data = localOptions?.filter((o) => { + const optionIsSelected = + values.findIndex((s) => (o.name || o.label) === s) > -1 + o.isSelected = optionIsSelected + return optionIsSelected + }) + localOptions && setLocalOptions([...localOptions]) + onSelectionChanged && + onSelectionChanged && + onSelectionChanged( + { + [state]: valueStr, + data, + }, + context, + ) + } + } + + const pillsRender = ( + <> + ({ label, deletable: true })) : []} + onChange={onLocalChange} + placeholder={ + !hasBorder && + } + /> + + + ) + + const assistiveContentRender = assistiveContent ? ( + "content" in assistiveContent && "onClick" in assistiveContent ? ( +