From 39bea16f6b5f711fb479464d94f56e1e955964f5 Mon Sep 17 00:00:00 2001 From: mohiit1502 Date: Wed, 5 Nov 2025 02:33:29 +0530 Subject: [PATCH] First Commit --- .gitignore | 368 +++++++ Dockerfile | 33 + LICENSE | 504 ++++++++++ README.md | 2 + TreeViz/package.json | 6 + build-tools/build.sh | 36 + build-tools/fix-styles.js | 27 + build-tools/generate-module.js | 31 + build-tools/post-processor.js | 24 + copy_files.sh | 56 ++ package.json | 84 ++ .../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 | 36 + publish-local.sh | 16 + publish.sh | 16 + 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 | 126 +++ 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 | 81 ++ src/Application.component.scss | 3 + src/Application.tsx | 14 + src/ArIconsViewer.component.scss | 26 + src/ArIconsViewer.tsx | 165 ++++ 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 | 65 ++ src/BubbleChart.component.scss | 3 + src/BubbleChart.tsx | 107 ++ src/BubbleViz.component.scss | 3 + src/BubbleViz.tsx | 10 + src/Button.component.scss | 203 ++++ src/Button.tsx | 112 +++ 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 | 911 ++++++++++++++++++ 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 | 93 ++ src/Drawer.component.scss | 45 + src/Drawer.tsx | 84 ++ src/Dropdown.component.scss | 22 + src/Dropdown.tsx | 382 ++++++++ src/Droppable.component.scss | 8 + src/Droppable.tsx | 83 ++ src/DroppableContainer.component.scss | 3 + src/DroppableContainer.tsx | 129 +++ 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 | 188 ++++ src/FlexTools.component.scss | 13 + src/FlexTools.tsx | 135 +++ src/Footer.component.scss | 4 + src/Footer.tsx | 46 + 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 | 43 + 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 | 69 ++ src/List.tsx | 105 ++ src/ListItem.tsx | 165 ++++ src/Loader.component.scss | 122 +++ src/Loader.tsx | 103 ++ src/LoginProvider.component.scss | 3 + src/LoginProvider.tsx | 28 + src/LogoClouds.component.scss | 3 + src/LogoClouds.tsx | 10 + src/Main.component.scss | 26 + src/Main.tsx | 75 ++ src/Mask.component.scss | 3 + src/Mask.tsx | 8 + src/MenuButton.component.scss | 33 + src/MenuButton.tsx | 126 +++ src/Modal.component.scss | 79 ++ src/Modal.tsx | 194 ++++ 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 | 18 + src/PopoverV1.component.scss | 57 ++ src/PopoverV1.tsx | 241 +++++ src/PopoverV2.component.scss | 69 ++ src/PopoverV2.tsx | 301 ++++++ src/Portal.component.scss | 4 + src/Portal.tsx | 43 + 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 | 143 +++ 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 | 180 ++++ src/SearchField.component.scss | 51 + src/SearchField.tsx | 118 +++ 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 | 75 ++ 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 | 225 +++++ src/Tab.component.scss | 43 + src/Tab.tsx | 96 ++ src/TabBar.component.scss | 66 ++ src/TabBar.tsx | 172 ++++ src/Table.component.scss | 12 + src/Table.tsx | 190 ++++ src/Tag.component.scss | 3 + src/Tag.tsx | 8 + src/Tags.component.scss | 5 + src/Tags.tsx | 51 + src/Team.component.scss | 3 + src/Team.tsx | 10 + src/Testimonials.component.scss | 3 + src/Testimonials.tsx | 14 + src/Text.component.scss | 39 + src/Text.tsx | 211 ++++ src/TextArea.component.scss | 33 + src/TextArea.tsx | 59 ++ src/TextInput.component.scss | 46 + src/TextInput.tsx | 265 +++++ src/Thumbs.tsx | 374 +++++++ 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 | 114 +++ src/Toolbar.component.scss | 3 + src/Toolbar.tsx | 8 + src/Tooltip.component.scss | 3 + src/Tooltip.tsx | 35 + src/TransferShuttle.component.scss | 7 + src/TransferShuttle.tsx | 249 +++++ src/TreeList.component.scss | 46 + src/TreeList.tsx | 322 +++++++ src/TreeViz.component.scss | 3 + src/TreeViz.tsx | 150 +++ src/TypeAhead.component.scss | 51 + src/TypeAhead.tsx | 324 +++++++ src/UserOptions.component.scss | 13 + src/UserOptions.tsx | 166 ++++ 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 | 163 ++++ src/animations.ts | 216 +++++ src/cssClasses.ts | 58 ++ src/enums.ts | 432 +++++++++ src/index.ts | 154 +++ src/styles/_animations.scss | 165 ++++ src/styles/_global.scss | 545 +++++++++++ src/styles/_mixins.scss | 16 + src/styles/_variables.scss | 155 +++ tsconfig.json | 27 + vite-dev.config.ts | 88 ++ vite.config.ts | 87 ++ 339 files changed, 17508 insertions(+) create mode 100644 .gitignore create mode 100644 Dockerfile create mode 100644 LICENSE create mode 100644 README.md create mode 100644 TreeViz/package.json 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-local.sh create mode 100755 publish.sh 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 100644 src/MenuButton.component.scss create mode 100644 src/MenuButton.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.component.scss 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/TreeViz.component.scss create mode 100755 src/TreeViz.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/enums.ts create mode 100644 src/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 tsconfig.json create mode 100644 vite-dev.config.ts create mode 100644 vite.config.ts diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..7ba8ae9 --- /dev/null +++ b/.gitignore @@ -0,0 +1,368 @@ +# 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 + + + +# Component Modules built for local dev using lerna should be ignored +AboutUs +Accordion +AdvancedColorPicker +Alert +AlertStackManager +AlphabetFilter +Anchor +AppAndToolsSelector +Application +ArIconsViewer +ArViz +ArmcoIamProvider +Badge +Banner +Benefits +Blog +Brands +Breadcrumb +Breadcrumbs +BrowserIncompatibility +BubbleChart +BubbleViz +Button +Card +Careers +Carousel +CategoryFilter +Checkbox +Chunk +ColorPicker +ColorPickerConfig +ColorSelector +Component_404 +Contact +Content +ContextMenu +Cookies +CronTab +Cta +Dashboard +DateInput +DetailsPanel +Dialog +Download +Draggable +Drawer +Dropdown +Droppable +DroppableContainer +EcommOrders +EcommProducts +Empty +ErrorBoundary +FacetedFilter +Faq +Features +Filters +FlexTools +Footer +Form +Gallery +Graph +GraphTiles +Header +Hero +HowItWorks +HttpCode +Image +InlineMenu +InstaPhotos +Integrations +Label +LabelValue +LayoutGenerator +LearnLink +Link +List +ListItem +Loader +LoginProvider +LogoClouds +Main +Mask +MenuButton +Modal +Newsletter +Notification +Notifications +NumericStepper +Pagination +Password +PickerRange +Picklist +Pill +Pillbox +Popover +PopoverV1 +PopoverV2 +Portal +Portfolio +Pricing +ProductDescriptionTile +ProductInfo +ProgressIndicator +ProgressStepper +ProgressiveBarChart +Projects +Radio +RepeatRenderer +Reviews +ScrollPagination +SearchField +SecondaryNavigation +Segment +SegmentedControl +Select +SelectionPill +Services +SidePanel +SignInUp +Slider +Snackbar +Splitter +Stats +Steps +StuffleIamProvider +Suggestions +Swiper +Tab +TabBar +Table +Tag +Tags +Team +Testimonials +Text +TextArea +TextInput +Thumbs +Tiles +TimeEntry +Toast +Toggle +Toolbar +Tooltip +TransferShuttle +TreeList +TypeAhead +UserOptions +Users +Widget +Wizard +WizardModal +animations +ass +cssClasses +index +Waiting for the debugger to disconnect... +Debugger attached. +AboutUs +Accordion +AdvancedColorPicker +Alert +AlertStackManager +AlphabetFilter +Anchor +AppAndToolsSelector +Application +ArIconsViewer +ArViz +ArmcoIamProvider +Badge +Banner +Benefits +Blog +Brands +Breadcrumb +Breadcrumbs +BrowserIncompatibility +BubbleChart +BubbleViz +Button +Card +Careers +Carousel +CategoryFilter +Checkbox +Chunk +ColorPicker +ColorPickerConfig +ColorSelector +Component_404 +Contact +Content +ContextMenu +Cookies +CronTab +Cta +Dashboard +DateInput +DetailsPanel +Dialog +Download +Draggable +Drawer +Dropdown +Droppable +DroppableContainer +EcommOrders +EcommProducts +Empty +ErrorBoundary +FacetedFilter +Faq +Features +Filters +FlexTools +Footer +Form +Gallery +Graph +GraphTiles +Header +Hero +HowItWorks +HttpCode +Image +InlineMenu +InstaPhotos +Integrations +Label +LabelValue +LayoutGenerator +LearnLink +Link +List +ListItem +Loader +LoginProvider +LogoClouds +Main +Mask +MenuButton +Modal +Newsletter +Notification +Notifications +NumericStepper +Pagination +Password +PickerRange +Picklist +Pill +Pillbox +Popover +PopoverV1 +PopoverV2 +Portal +Portfolio +Pricing +ProductDescriptionTile +ProductInfo +ProgressIndicator +ProgressStepper +ProgressiveBarChart +Projects +Radio +RepeatRenderer +Reviews +ScrollPagination +SearchField +SecondaryNavigation +Segment +SegmentedControl +Select +SelectionPill +Services +SidePanel +SignInUp +Slider +Snackbar +Splitter +Stats +Steps +StuffleIamProvider +Suggestions +Swiper +Tab +TabBar +Table +Tag +Tags +Team +Testimonials +Text +TextArea +TextInput +Thumbs +Tiles +TimeEntry +Toast +Toggle +Toolbar +Tooltip +TransferShuttle +TreeList +TypeAhead +UserOptions +Users +Widget +Wizard +WizardModal +animations +ass +cssClasses +index \ No newline at end of file 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/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 diff --git a/TreeViz/package.json b/TreeViz/package.json new file mode 100644 index 0000000..3084904 --- /dev/null +++ b/TreeViz/package.json @@ -0,0 +1,6 @@ +{ + "name": "@armco/components/TreeViz", + "main": "../build/cjs/TreeViz.js", + "module": "../build/es/TreeViz.js", + "types": "../build/types/TreeViz.d.ts" +} \ No newline at end of file diff --git a/build-tools/build.sh b/build-tools/build.sh new file mode 100755 index 0000000..35ca06b --- /dev/null +++ b/build-tools/build.sh @@ -0,0 +1,36 @@ +#!/bin/bash + +# Get the directory of the current script +SCRIPT_DIR="$(cd "$(dirname "${BASH_SOURCE[0]}")" && pwd)" + +# Default values +DEV_FLAG="" + +# Parse arguments +for arg in "$@" +do + case $arg in + --dev) + DEV_FLAG="--dev" + shift # Remove --dev from processing + ;; + esac +done + +echo "[BUILD:SH] Dev flag is: $DEV_FLAG" +echo "[BUILD:SH] Removing build if exists" +rm -rf build +echo "[BUILD:SH] Checking TS Types" +npx tsc +echo "[BUILD:SH] Initiating build..." +# Conditionally use vite-dev.config.ts if --dev flag is present +if [ "$DEV_FLAG" == "--dev" ]; then + vite build --config vite-dev.config.ts +else + vite build +fi + +echo "[BUILD:SH] Running post processor scripts..." +# Run Post processors: Update style imports in .js files, create component modules +node "$SCRIPT_DIR/post-processor.js" build/cjs $DEV_FLAG +node "$SCRIPT_DIR/post-processor.js" build/es $DEV_FLAG \ No newline at end of file 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..0c13dc5 --- /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, isDev) { + if (fileName.indexOf("-chunk") === -1 && !fileName.endsWith(".map")) { + const dir = fileName.slice(0, -3) + const name = `@armco/components/${dir}` + const packageJsonContent = { + name, + main: `../${isDev ? "build/" : ""}cjs/${dir}.js`, + module: `../${isDev ? "build/" : ""}es/${dir}.js`, + types: `../${isDev ? "build/" : ""}types/${dir}.d.ts`, + } + const dirPath = resolve(__dirname, `../${isDev ? "" : "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..064e193 --- /dev/null +++ b/build-tools/post-processor.js @@ -0,0 +1,24 @@ +import { readdir } from "fs/promises" +import generateModule from "./generate-module.js" + +async function postProcessor(dir, isDev) { + try { + const files = await readdir(dir) + await Promise.all( + files.map(async (file) => { + // await fixStyles(file, dir) + await generateModule(file, isDev) + }), + ) + } catch (error) { + console.error(`Error processing directory ${dir}:`, error) + } +} + +const targetDir = process.argv[2] +if (targetDir) { + postProcessor(targetDir, process.argv.includes("--dev")) +} 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..ea44b35 --- /dev/null +++ b/package.json @@ -0,0 +1,84 @@ +{ + "name": "@armco/shared-components", + "description": "React Component Lib of independent components that can be utilised by sophisticated ones in @armco/components", + "version": "0.0.57", + "type": "module", + "author": "Armco (@restruct-corporate-advantage)", + "types": "build/types/index.d.ts", + "main": "build/cjs/index.js", + "module": "build/es/index.js", + "scripts": { + "build": "./build-tools/build.sh", + "build:sm": "./build-tools/build.sh --dev", + "plop": "plop component", + "format": "prettier --write .", + "lint": "eslint .", + "type-check": "tsc", + "publish:dry": "npm publish --dry-run", + "publish:sh": "./publish.sh", + "publish:local": "./publish-local.sh" + }, + "peerDependencies": { + "@armco/types": "^0.0.18", + "@armco/configs": "^0.0.11", + "@armco/utils": "^0.0.29", + "@armco/icon": "^0.0.10", + "@tanstack/react-table": "^8.21.2", + "bootstrap": "^5.3.0", + "d3": "^7.9.0", + "highcharts": "^12.1.2", + "highcharts-react-official": "^3.2.1", + "highlight.js": "^11.8.0", + "moment": "^2.29.4", + "react-app-polyfill": "^3.0.0", + "react-dev-utils": "^12.0.1", + "react": ">=16.8.0", + "react-bootstrap": "^2.7.4", + "react-dnd": ">=16.0.0", + "react-dnd-html5-backend": ">=16.0.0", + "react-dnd-touch-backend": ">=16.0.0", + "react-dom": "^18.2.0", + "react-draggable": "^4.4.6", + "resize-observer-polyfill": "^1.5.1", + "react-resizable": "^3.0.5", + "react-router-dom": "^6.13.0", + "uuid": "^9.0.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", + "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..5241dc9 --- /dev/null +++ b/plopfile.cjs @@ -0,0 +1,36 @@ +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/{{pascalCase name}}.tsx", + templateFile: "plop-templates/Component/Component.tsx.hbs", + }, + { + type: "add", + path: "src/{{pascalCase name}}.component.scss", + templateFile: "plop-templates/Component/Component.component.scss.hbs", + }, + { + type: "add", + path: "src/index.ts", + templateFile: "plop-templates/injectable-index.ts.hbs", + skipIfExists: true, + }, + { + type: "append", + path: "src/index.ts", + pattern: `/* PLOP_INJECT_IMPORT */`, + template: `export { default as {{pascalCase name}} } from "./{{pascalCase name}}"`, + } + ], + }) +} diff --git a/publish-local.sh b/publish-local.sh new file mode 100755 index 0000000..46b66a6 --- /dev/null +++ b/publish-local.sh @@ -0,0 +1,16 @@ +#!/bin/sh + +semver=${1:-patch} + +set -e + +npm run build +cp package.json build/ +sed -i '' -E 's/"build"/"*"/' build/package.json + +sed -i '' 's#"build/cjs/index.js"#"cjs/index.js"#' build/package.json +sed -i '' 's#"build/es/index.js"#"es/index.js"#' build/package.json +sed -i '' 's#"build/types/index.d.ts"#"types/index.d.ts"#' build/package.json + +cd build +npm pack --pack-destination ~/__Projects__/Common \ No newline at end of file diff --git a/publish.sh b/publish.sh new file mode 100755 index 0000000..94621ea --- /dev/null +++ b/publish.sh @@ -0,0 +1,16 @@ +#!/bin/sh + +semver=${1:-patch} + +set -e +npm --no-git-tag-version version ${semver} +npm run build +cp package.json build/ +sed -i '' -E 's/"build"/"*"/' build/package.json + +sed -i '' 's#"build/cjs/index.js"#"cjs/index.js"#' build/package.json +sed -i '' 's#"build/es/index.js"#"es/index.js"#' build/package.json +sed -i '' 's#"build/types/index.d.ts"#"types/index.d.ts"#' build/package.json + +cd build +npm publish --access public --loglevel verbose diff --git a/src/AboutUs.component.scss b/src/AboutUs.component.scss new file mode 100755 index 0000000..c883e87 --- /dev/null +++ b/src/AboutUs.component.scss @@ -0,0 +1,3 @@ +.ar-AboutUs { + +} diff --git a/src/AboutUs.tsx b/src/AboutUs.tsx new file mode 100755 index 0000000..516fe73 --- /dev/null +++ b/src/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/Accordion.component.scss b/src/Accordion.component.scss new file mode 100755 index 0000000..ed5973e --- /dev/null +++ b/src/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/Accordion.tsx b/src/Accordion.tsx new file mode 100755 index 0000000..fd0208d --- /dev/null +++ b/src/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/AdvancedColorPicker.component.scss b/src/AdvancedColorPicker.component.scss new file mode 100755 index 0000000..48d147e --- /dev/null +++ b/src/AdvancedColorPicker.component.scss @@ -0,0 +1,3 @@ +.ar-AdvancedColorPicker { + +} diff --git a/src/AdvancedColorPicker.tsx b/src/AdvancedColorPicker.tsx new file mode 100755 index 0000000..f4e963d --- /dev/null +++ b/src/AdvancedColorPicker.tsx @@ -0,0 +1,126 @@ +import { useEffect, useState } from "react" +import { AdvancedColorPickerProps } from "@armco/types" +import { hslToHex, hexToHsl } from "@armco/utils/domHelper" +import Slider from "./Slider" +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 = 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] = 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/Alert.component.scss b/src/Alert.component.scss new file mode 100755 index 0000000..95d15ec --- /dev/null +++ b/src/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/Alert.tsx b/src/Alert.tsx new file mode 100755 index 0000000..a9956a6 --- /dev/null +++ b/src/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/AlertStackManager.component.scss b/src/AlertStackManager.component.scss new file mode 100755 index 0000000..4c79836 --- /dev/null +++ b/src/AlertStackManager.component.scss @@ -0,0 +1,3 @@ +.ar-AlertStackManager { + +} diff --git a/src/AlertStackManager.tsx b/src/AlertStackManager.tsx new file mode 100755 index 0000000..fc69a35 --- /dev/null +++ b/src/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/AlphabetFilter.component.scss b/src/AlphabetFilter.component.scss new file mode 100755 index 0000000..cae1c75 --- /dev/null +++ b/src/AlphabetFilter.component.scss @@ -0,0 +1,3 @@ +.ar-AlphabetFilter { + +} diff --git a/src/AlphabetFilter.tsx b/src/AlphabetFilter.tsx new file mode 100755 index 0000000..768ab17 --- /dev/null +++ b/src/AlphabetFilter.tsx @@ -0,0 +1,35 @@ +import { ArPillSizes, BasicFilterConfig } from "@armco/types" +import SelectionPill from "./SelectionPill" +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/Anchor.component.scss b/src/Anchor.component.scss new file mode 100755 index 0000000..78ef6ad --- /dev/null +++ b/src/Anchor.component.scss @@ -0,0 +1,3 @@ +.ar-Anchor { + +} diff --git a/src/Anchor.tsx b/src/Anchor.tsx new file mode 100755 index 0000000..d714c85 --- /dev/null +++ b/src/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/AppAndToolsSelector.component.scss b/src/AppAndToolsSelector.component.scss new file mode 100755 index 0000000..3b8a9ff --- /dev/null +++ b/src/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/AppAndToolsSelector.tsx b/src/AppAndToolsSelector.tsx new file mode 100755 index 0000000..ecdca3b --- /dev/null +++ b/src/AppAndToolsSelector.tsx @@ -0,0 +1,81 @@ +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/hooks" +import Button from "./Button" +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/Application.component.scss b/src/Application.component.scss new file mode 100755 index 0000000..f49f755 --- /dev/null +++ b/src/Application.component.scss @@ -0,0 +1,3 @@ +.ar-Application { + +} diff --git a/src/Application.tsx b/src/Application.tsx new file mode 100755 index 0000000..4f5aed0 --- /dev/null +++ b/src/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/ArIconsViewer.component.scss b/src/ArIconsViewer.component.scss new file mode 100755 index 0000000..3653f42 --- /dev/null +++ b/src/ArIconsViewer.component.scss @@ -0,0 +1,26 @@ +.ar-ArIconsViewer { + grid-template-columns: minmax(10rem, 1fr); + color: #0b8dfa; + + .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/ArIconsViewer.tsx b/src/ArIconsViewer.tsx new file mode 100755 index 0000000..2f77d0f --- /dev/null +++ b/src/ArIconsViewer.tsx @@ -0,0 +1,165 @@ +import { ChangeEvent, useEffect, useState } from "react" +import { + ArDndItemTypes, + ArIconTileTypes, + ArIconsViewerProps, + ArPopoverSlots, + ArThemes, + SegmentData, + IconResponse, + ArIconSourceTypes, +} from "@armco/types" +import { ENDPOINTS, STATIC_HOST } from "@armco/configs/endpoints" +import { useTheme } from "@armco/utils/hooks" +import { debounce } from "@armco/utils/helper" +import Icon from "@armco/icon" +import ScrollPagination from "./ScrollPagination" +import SearchField from "./SearchField" +import SegmentedControl from "./SegmentedControl" +import Draggable from "./Draggable" +import Tooltip from "./Tooltip" +import "./ArIconsViewer.component.scss" + +const pageApi = + 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/ArViz.component.scss b/src/ArViz.component.scss new file mode 100755 index 0000000..0198355 --- /dev/null +++ b/src/ArViz.component.scss @@ -0,0 +1,3 @@ +.ar-ArViz { + +} diff --git a/src/ArViz.tsx b/src/ArViz.tsx new file mode 100755 index 0000000..14d533d --- /dev/null +++ b/src/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/chartGenerators" +import BubbleChart from "./BubbleChart" +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/ArmcoIamProvider.component.scss b/src/ArmcoIamProvider.component.scss new file mode 100755 index 0000000..9f28dab --- /dev/null +++ b/src/ArmcoIamProvider.component.scss @@ -0,0 +1,3 @@ +.ar-ArmcoIamProvider { + +} diff --git a/src/ArmcoIamProvider.tsx b/src/ArmcoIamProvider.tsx new file mode 100755 index 0000000..87c3ff0 --- /dev/null +++ b/src/ArmcoIamProvider.tsx @@ -0,0 +1,20 @@ +import { ArmcoIamProviderProps, ArDefaultLoginPage } from "@armco/types" +import { WEB_CONFIG } from "@armco/configs/endpoints" +import LoginProvider from "./LoginProvider" +import "./ArmcoIamProvider.component.scss" + +const ArmcoIamProvider = (props: ArmcoIamProviderProps): JSX.Element => { + const { defaultPage } = props + return ( + + ) +} + +export default ArmcoIamProvider diff --git a/src/Badge.component.scss b/src/Badge.component.scss new file mode 100755 index 0000000..f6bc548 --- /dev/null +++ b/src/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/Badge.tsx b/src/Badge.tsx new file mode 100755 index 0000000..0a7f839 --- /dev/null +++ b/src/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/Banner.component.scss b/src/Banner.component.scss new file mode 100755 index 0000000..3c4a4f7 --- /dev/null +++ b/src/Banner.component.scss @@ -0,0 +1,3 @@ +.ar-Banner { + +} diff --git a/src/Banner.tsx b/src/Banner.tsx new file mode 100755 index 0000000..cdb352f --- /dev/null +++ b/src/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/Benefits.component.scss b/src/Benefits.component.scss new file mode 100755 index 0000000..e152922 --- /dev/null +++ b/src/Benefits.component.scss @@ -0,0 +1,3 @@ +.ar-Benefits { + +} diff --git a/src/Benefits.tsx b/src/Benefits.tsx new file mode 100755 index 0000000..3ba5494 --- /dev/null +++ b/src/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/Blog.component.scss b/src/Blog.component.scss new file mode 100755 index 0000000..cda0603 --- /dev/null +++ b/src/Blog.component.scss @@ -0,0 +1,3 @@ +.ar-Blog { + +} diff --git a/src/Blog.tsx b/src/Blog.tsx new file mode 100755 index 0000000..c220b21 --- /dev/null +++ b/src/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/Brands.component.scss b/src/Brands.component.scss new file mode 100755 index 0000000..fb5b004 --- /dev/null +++ b/src/Brands.component.scss @@ -0,0 +1,3 @@ +.ar-Brands { + +} diff --git a/src/Brands.tsx b/src/Brands.tsx new file mode 100755 index 0000000..3fb3ec9 --- /dev/null +++ b/src/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/Breadcrumb.component.scss b/src/Breadcrumb.component.scss new file mode 100755 index 0000000..473f047 --- /dev/null +++ b/src/Breadcrumb.component.scss @@ -0,0 +1,5 @@ +.ar-Breadcrumb { + &>span { + font-size: 0.75rem; + } +} diff --git a/src/Breadcrumb.tsx b/src/Breadcrumb.tsx new file mode 100755 index 0000000..9612a35 --- /dev/null +++ b/src/Breadcrumb.tsx @@ -0,0 +1,55 @@ +import { useNavigate } from "react-router-dom" +import { + ArButtonVariants, + ArSizes, + BreadCrumbData, + BreadcrumbProps, +} from "@armco/types" +import Button from "./Button" +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/Breadcrumbs.component.scss b/src/Breadcrumbs.component.scss new file mode 100755 index 0000000..d68b991 --- /dev/null +++ b/src/Breadcrumbs.component.scss @@ -0,0 +1,3 @@ +.ar-Breadcrumbs { + +} diff --git a/src/Breadcrumbs.tsx b/src/Breadcrumbs.tsx new file mode 100755 index 0000000..4eab533 --- /dev/null +++ b/src/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/BrowserIncompatibility.component.scss b/src/BrowserIncompatibility.component.scss new file mode 100755 index 0000000..b7fd7ec --- /dev/null +++ b/src/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/BrowserIncompatibility.tsx b/src/BrowserIncompatibility.tsx new file mode 100755 index 0000000..aa86d87 --- /dev/null +++ b/src/BrowserIncompatibility.tsx @@ -0,0 +1,65 @@ +import { v4 as uuid } from "uuid" +import { ArThemes, BrowserIncompatibilityProps } from "@armco/types" +import { copyToClipboard } from "@armco/utils/helper" +import { useTheme } from "@armco/utils/hooks" +import Icon from "@armco/icon" +import Alert from "./Alert" +import Link from "./Link" +import "./BrowserIncompatibility.component.scss" + +const BrowserIncompatibility = ( + props: BrowserIncompatibilityProps, +): JSX.Element => { + const { applicationName, moreLink } = props + const { theme } = useTheme() + 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

+ { + 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/BubbleChart.component.scss b/src/BubbleChart.component.scss new file mode 100755 index 0000000..cbe1e95 --- /dev/null +++ b/src/BubbleChart.component.scss @@ -0,0 +1,3 @@ +.ar-BubbleChart { + +} diff --git a/src/BubbleChart.tsx b/src/BubbleChart.tsx new file mode 100755 index 0000000..5c30367 --- /dev/null +++ b/src/BubbleChart.tsx @@ -0,0 +1,107 @@ +import { useEffect, useRef } from "react" +import Highcharts from "highcharts" +import "highcharts/highcharts-more" +import { BubbleChartProps, ObjectType } from "@armco/types" +import "./BubbleChart.component.scss" + +const BubbleChart = (props: BubbleChartProps): JSX.Element => { + const { clickHandler, data } = props + const chartRef = useRef(null) + + useEffect(() => { + if (!Highcharts) { + if (chartRef.current) { + ;(chartRef.current as HTMLDivElement).innerHTML = ` +
+ Highcharts is not installed. Please install highcharts to use BubbleChart. +
+ ` + } + return + } + 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/BubbleViz.component.scss b/src/BubbleViz.component.scss new file mode 100755 index 0000000..372c4fe --- /dev/null +++ b/src/BubbleViz.component.scss @@ -0,0 +1,3 @@ +.ar-BubbleViz { + +} diff --git a/src/BubbleViz.tsx b/src/BubbleViz.tsx new file mode 100755 index 0000000..77ce369 --- /dev/null +++ b/src/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/Button.component.scss b/src/Button.component.scss new file mode 100755 index 0000000..b0c2f36 --- /dev/null +++ b/src/Button.component.scss @@ -0,0 +1,203 @@ +.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-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/Button.tsx b/src/Button.tsx new file mode 100755 index 0000000..d212498 --- /dev/null +++ b/src/Button.tsx @@ -0,0 +1,112 @@ +import { useState } from "react" +import { + ArButtonTypes, + ArButtonVariants, + ArSizes, + ArThemes, + ButtonProps, +} from "@armco/types" +import Icon from "@armco/icon" +import "./Button.component.scss" + +const Button = (props: ButtonProps) => { + const { + classes, + color, + contentClasses, + contentStyles, + content, + demo, + preIcon, + postIcon, + onClick, + onMouseEnter, + onMouseLeave, + size = ArSizes.SMALL, + withSplitOptions, + type = ArButtonTypes.BUTTON, + theme, + variant, + ...rest + } = props + const [hovered, setHovered] = useState() + + 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 = theme === ArThemes.DARK1 ? "white" : "black" + } else if (variant === ArButtonVariants.SECONDARY) { + setColor = hovered + ? theme === ArThemes.DARK1 + ? "black" + : "white" + : theme === ArThemes.DARK1 + ? "white" + : "#3232d8" + } else { + setColor = "white" + } + } + btnStyles.color = setColor + + return ( + + ) +} + +export default Button diff --git a/src/Card.component.scss b/src/Card.component.scss new file mode 100755 index 0000000..5d23f46 --- /dev/null +++ b/src/Card.component.scss @@ -0,0 +1,4 @@ +.ar-Card { + background-color: var(--ar-bg); + border-radius: 3px; +} diff --git a/src/Card.tsx b/src/Card.tsx new file mode 100755 index 0000000..9633dee --- /dev/null +++ b/src/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/Careers.component.scss b/src/Careers.component.scss new file mode 100755 index 0000000..9f425e9 --- /dev/null +++ b/src/Careers.component.scss @@ -0,0 +1,3 @@ +.ar-Careers { + +} diff --git a/src/Careers.tsx b/src/Careers.tsx new file mode 100755 index 0000000..04bc05d --- /dev/null +++ b/src/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/Carousel.component.scss b/src/Carousel.component.scss new file mode 100755 index 0000000..3c02c91 --- /dev/null +++ b/src/Carousel.component.scss @@ -0,0 +1,3 @@ +.ar-Carousel { + +} diff --git a/src/Carousel.tsx b/src/Carousel.tsx new file mode 100755 index 0000000..002c7a3 --- /dev/null +++ b/src/Carousel.tsx @@ -0,0 +1,911 @@ +import { Children, Component, ReactNode } from "react" +import { AnimationHandler, CarouselProps, SwiperProps } from "@armco/types" +import { isKeyboardEvent } from "@armco/utils/domHelper" +import klass from "./cssClasses" +import Thumbs from "./Thumbs" +import { + slideAnimationHandler, + slideSwipeAnimationHandler, + slideStopSwipingHandler, + fadeAnimationHandler, +} from "./animations" +import Swiper from "./Swiper" +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, + ) => ( +
+
+
+ Component Lib +
+ + + ) +} + +export default Hero diff --git a/src/HowItWorks.component.scss b/src/HowItWorks.component.scss new file mode 100755 index 0000000..3a53b77 --- /dev/null +++ b/src/HowItWorks.component.scss @@ -0,0 +1,3 @@ +.ar-HowItWorks { + +} diff --git a/src/HowItWorks.tsx b/src/HowItWorks.tsx new file mode 100755 index 0000000..e86b1a2 --- /dev/null +++ b/src/HowItWorks.tsx @@ -0,0 +1,10 @@ +import React from "react" +import "./HowItWorks.component.scss" + +interface HowItWorksProps {} + +const HowItWorks = (props: any): JSX.Element => { + return
In Component HowItWorks
+} + +export default HowItWorks diff --git a/src/HttpCode.component.scss b/src/HttpCode.component.scss new file mode 100755 index 0000000..a4fa626 --- /dev/null +++ b/src/HttpCode.component.scss @@ -0,0 +1,3 @@ +.ar-HttpCode { + +} diff --git a/src/HttpCode.tsx b/src/HttpCode.tsx new file mode 100755 index 0000000..64a8693 --- /dev/null +++ b/src/HttpCode.tsx @@ -0,0 +1,10 @@ +import React from "react" +import "./HttpCode.component.scss" + +interface HttpCodeProps {} + +const HttpCode = (props: any): JSX.Element => { + return
In Component HttpCode
+} + +export default HttpCode diff --git a/src/Image.component.scss b/src/Image.component.scss new file mode 100755 index 0000000..c2582db --- /dev/null +++ b/src/Image.component.scss @@ -0,0 +1,9 @@ +.ar-Image { + transition: all 0.3s; + &.fill { + object-fit: cover; + &.preserveAspectRatio { + object-fit: contain; + } + } +} diff --git a/src/Image.tsx b/src/Image.tsx new file mode 100755 index 0000000..386441c --- /dev/null +++ b/src/Image.tsx @@ -0,0 +1,112 @@ +import { CSSProperties, ForwardedRef, forwardRef } from "react" +import { ImageProps } from "@armco/types" +import "./Image.component.scss" + +const getDomainFromUrl = (url: string) => { + const urlObj = new URL(url) + return urlObj.hostname +} + +// Function to determine crossOrigin value +const determineCrossOrigin = (url: string) => { + const domain = getDomainFromUrl(url) + if (domain === "localhost" || domain === "armco.dev") { + return "use-credentials" + } + return "anonymous" +} + +const Image = forwardRef( + (props: ImageProps, ref: ForwardedRef): JSX.Element => { + const { + alt, + blur, + brightness, + classes, + contrast, + customBgZIndex, + demo, + fill, + flipHorizontal, + flipVertical, + grayscale, + image, + isBackground, + opacity, + preserveAspectRatio, + rotateBy, + saturate, + scale, + sepia, + style, + title, + } = props + + const styles: CSSProperties = {} + if (scale !== undefined) { + styles.transform = `scale(${scale})` + } + if (flipHorizontal) { + styles.transform = `scaleX(-${scale !== undefined ? scale : 1})` + } + if (flipVertical) { + styles.transform = + (styles.transform ? styles.transform + " " : "") + + `scaleY(-${scale !== undefined ? scale : 1})` + } + if (rotateBy) { + styles.transform = + (styles.transform ? styles.transform + " " : "") + + `rotate(${rotateBy}deg)` + } + if (opacity) { + styles.opacity = opacity + } + if (brightness) { + styles.filter = `brightness(${brightness})` + } + if (contrast) { + styles.filter = + (styles.filter ? styles.filter + " " : "") + `contrast(${contrast})` + } + if (saturate) { + styles.filter = + (styles.filter ? styles.filter + " " : "") + `saturate(${saturate})` + } + if (blur) { + styles.filter = + (styles.filter ? styles.filter + " " : "") + `blur(${blur}px)` + } + if (grayscale) { + styles.filter = + (styles.filter ? styles.filter + " " : "") + `grayscale(${grayscale})` + } + if (sepia) { + styles.filter = + (styles.filter ? styles.filter + " " : "") + `sepia(${sepia})` + } + if (isBackground && customBgZIndex) { + styles.zIndex = `${customBgZIndex} !important` + } + + const src = demo ? image || "https://picsum.photos/200/300" : image + return ( + {alt + ) + }, +) + +export default Image diff --git a/src/InlineMenu.component.scss b/src/InlineMenu.component.scss new file mode 100755 index 0000000..c69bad9 --- /dev/null +++ b/src/InlineMenu.component.scss @@ -0,0 +1,28 @@ +.ar-InlineMenu { + height: 0; + width: 0; + transition: all 0.3s; + overflow: hidden; + background-color: var(--ar-bg-invert-fade); + -webkit-backdrop-filter: blur(20px); + backdrop-filter: blur(20px); + color: var(--ar-color-font-invert); + border-radius: 0.5rem; + font-size: 0.8rem; + z-index: 2001; + &.show { + height: 20rem; + width: 15rem; + overflow: auto; + border: var(--ar-border); + } + + .ar-InlineMenu__menu-item { + cursor: pointer; + border-radius: 3px; + line-height: 1.5rem; + &:hover { + background-color: var(--ar-color-highlight-2); + } + } +} diff --git a/src/InlineMenu.tsx b/src/InlineMenu.tsx new file mode 100755 index 0000000..7222e3a --- /dev/null +++ b/src/InlineMenu.tsx @@ -0,0 +1,50 @@ +import { useEffect, useState } from "react" +import { InlineMenuProps } from "@armco/types" +import List from "./List" +import "./InlineMenu.component.scss" + +const dummyData = { + Create: {}, + Delete: {}, + Clone: {}, + Suspend: {}, +} + +const InlineMenu = (props: InlineMenuProps): JSX.Element => { + const { classes, data, demo, ref, top, left, theme } = props + const [displayed, show] = useState() + + useEffect(() => { + setTimeout(() => show(true), 0) + return () => show(false) + }, []) + + const finalData = data || (demo && dummyData) + return ( +
+ {finalData && ( + { + const itemData = finalData[item] + const clickHandler = itemData.onClick + itemData.name = item + itemData.onClick = () => { + clickHandler && clickHandler() + show(false) + } + return itemData + })} + theme={theme} + /> + )} +
+ ) +} + +export default InlineMenu diff --git a/src/InstaPhotos.component.scss b/src/InstaPhotos.component.scss new file mode 100755 index 0000000..31ea969 --- /dev/null +++ b/src/InstaPhotos.component.scss @@ -0,0 +1,3 @@ +.ar-InstaPhotos { + +} diff --git a/src/InstaPhotos.tsx b/src/InstaPhotos.tsx new file mode 100755 index 0000000..13157be --- /dev/null +++ b/src/InstaPhotos.tsx @@ -0,0 +1,10 @@ +import React from "react" +import "./InstaPhotos.component.scss" + +interface InstaPhotosProps {} + +const InstaPhotos = (props: any): JSX.Element => { + return
In Component InstaPhotos
+} + +export default InstaPhotos diff --git a/src/Integrations.component.scss b/src/Integrations.component.scss new file mode 100755 index 0000000..4001e73 --- /dev/null +++ b/src/Integrations.component.scss @@ -0,0 +1,3 @@ +.ar-Integrations { + +} diff --git a/src/Integrations.tsx b/src/Integrations.tsx new file mode 100755 index 0000000..3a56a6e --- /dev/null +++ b/src/Integrations.tsx @@ -0,0 +1,10 @@ +import React from "react" +import "./Integrations.component.scss" + +interface IntegrationsProps {} + +const Integrations = (props: any): JSX.Element => { + return
In Component Integrations
+} + +export default Integrations diff --git a/src/Label.component.scss b/src/Label.component.scss new file mode 100755 index 0000000..224c7e9 --- /dev/null +++ b/src/Label.component.scss @@ -0,0 +1,3 @@ +.ar-Label { + +} diff --git a/src/Label.tsx b/src/Label.tsx new file mode 100755 index 0000000..e28d689 --- /dev/null +++ b/src/Label.tsx @@ -0,0 +1,17 @@ +import { LabelProps } from "@armco/types" +import "./Label.component.scss" + +const Label = (props: LabelProps): JSX.Element => { + const { htmlFor, label, style, classes } = props + return ( + + ) +} + +export default Label diff --git a/src/LabelValue.component.scss b/src/LabelValue.component.scss new file mode 100755 index 0000000..3ebc769 --- /dev/null +++ b/src/LabelValue.component.scss @@ -0,0 +1,6 @@ +.ar-LabelValue { + .ar-LabelValue__value { + font-size: 1.2rem; + color: var(--ar-color-disabled); + } +} diff --git a/src/LabelValue.tsx b/src/LabelValue.tsx new file mode 100755 index 0000000..bae0019 --- /dev/null +++ b/src/LabelValue.tsx @@ -0,0 +1,39 @@ +import { LabelValueProps, ArLabelValueVariants } from "@armco/types" +import "./LabelValue.component.scss" + +const LabelValue = (props: LabelValueProps): JSX.Element => { + const { classes, label, value, variant, demo } = props + const useLabel = label ? label : demo ? "First Name" : "" + const useValue = value !== undefined ? value : demo ? "SRK" : "" + + const isLeftLabel = + variant === ArLabelValueVariants.FLAT || + variant === ArLabelValueVariants.FLATBOXED + + const isBoxed = + variant === ArLabelValueVariants.FLATBOXED || + variant === ArLabelValueVariants.STACKBOXED + + return ( +
+ {useLabel && ( + + {useLabel} + + )} + {useValue !== undefined && ( + {useValue} + )} +
+ ) +} + +export default LabelValue diff --git a/src/LayoutGenerator.component.scss b/src/LayoutGenerator.component.scss new file mode 100755 index 0000000..9dfc225 --- /dev/null +++ b/src/LayoutGenerator.component.scss @@ -0,0 +1,7 @@ +.ar-LayoutGenerator { + transition: all 0.5s ease-in-out; + + &.header-main-footer-layout { + grid-template-columns: 1fr; + } +} diff --git a/src/LayoutGenerator.tsx b/src/LayoutGenerator.tsx new file mode 100644 index 0000000..fe0b1ab --- /dev/null +++ b/src/LayoutGenerator.tsx @@ -0,0 +1,323 @@ +import { CSSProperties, Children, cloneElement } from "react" +import { + ArComponentLevels, + ArLayoutSlots, + ArWebPageLayout, + LayoutGeneratorProps, +} from "@armco/types" +import { useSlotted } from "@armco/utils/hooks" +import { WebPageLayout } from "@armco/configs/constants" +import "./LayoutGenerator.component.scss" + +const getDummies = (count: number) => { + return Array(count) + .fill(null) + .map((_, index) =>
) +} + +const cloneAndStyleElement = ( + element: JSX.Element | null, + slot: ArLayoutSlots, + children?: Array, + style?: CSSProperties, + demo?: boolean, +) => { + if (element) { + children?.splice(children.indexOf(element), 1) + return cloneElement(element, { + className: demo + ? `border border-radius l2 m-05 p-1 ${element.props.className || ""}${ + slot === ArLayoutSlots.HEADER || slot === ArLayoutSlots.FOOTER + ? " mih-2" + : "" + }${ + slot === ArLayoutSlots.DRAWER || slot === ArLayoutSlots.SIDEPANEL + ? " miw-2" + : "" + }` + : element.props.className, + style, + slot, + }) + } + return null +} + +const getSlots = (args: { + children?: Array + demo?: boolean + drawerLevel?: ArComponentLevels + hasDrawer?: boolean + hasFooter?: boolean + hasHeader?: boolean + hasSidepanel?: boolean + sidepanelLevel?: ArComponentLevels +}) => { + const { + children, + demo, + // drawerLevel, + hasDrawer, + hasFooter, + hasHeader, + hasSidepanel, + // sidepanelLevel, + } = args + const slots: { [key: string]: JSX.Element | null } = { + header: null, + footer: null, + drawer: null, + sidepanel: null, + } + Children.forEach(children, (child) => { + child?.props?.slot && (slots[child.props.slot] = child) + }) + + if (!slots.header && hasHeader) { + slots.header = (children as Array)[0] + } + + if (!slots.footer && hasFooter) { + slots.footer = (children as Array)[ + (children as Array).length - 1 + ] + } + + // TODO: wrong child item calculated currently, good for phase 1, change in phase 2 when + // drawer and sidepanel can be at a higher level like header and footer + if (!slots.drawer && hasDrawer) { + slots.drawer = (children as Array)[1] + } + + if (!slots.sidepanel && hasSidepanel) { + slots.sidepanel = (children as Array)[ + (children as Array).length - 2 + ] + } + + let hasContainerGrid = false + let hasSecondaryGrid = false + + // Primary grid is needed if there's a header, footer, outer drawer, or outer sidepanel + if ( + hasHeader || + hasFooter + // hasFooter || + // (hasDrawer && drawerLevel === ArComponentLevels.PAGE) || + // (hasSidepanel && sidepanelLevel === ArComponentLevels.PAGE) + ) { + hasContainerGrid = true + } + + // Secondary grid is needed if there's an inner drawer or sidepanel + if ( + hasDrawer || + hasSidepanel + // (hasDrawer && drawerLevel === ArComponentLevels.MAIN) || + // (hasSidepanel && sidepanelLevel === ArComponentLevels.MAIN) + ) { + hasSecondaryGrid = true + } + slots.header = cloneAndStyleElement( + slots.header, + ArLayoutSlots.HEADER, + children, + { gridColumn: "1 / -1", gridRow: "1" }, + demo, + ) + slots.footer = cloneAndStyleElement( + slots.footer, + ArLayoutSlots.FOOTER, + children, + { gridColumn: "1 / -1", gridRow: "-1" }, + demo, + ) + slots.drawer = cloneAndStyleElement( + slots.drawer, + ArLayoutSlots.DRAWER, + children, + { gridColumn: "1", gridRow: "1 / -1" }, + demo, + ) + slots.sidepanel = cloneAndStyleElement( + slots.sidepanel, + ArLayoutSlots.SIDEPANEL, + children, + { gridColumn: "-1", gridRow: "1 / -1" }, + demo, + ) + + return { + header: slots.header, + footer: slots.footer, + drawer: slots.drawer, + sidepanel: slots.sidepanel, + hasContainerGrid, + hasSecondaryGrid, + } +} + +const LayoutGenerator = ({ + classes, + demo, + demoChildCount = 6, + cardSize, + children, + hasHeader, + hasFooter, + hasDrawer, + isFooterFixed, + drawerLevel, + sidepanelLevel, + hasSidepanel, + gridSize, + selectable, + variant, + ...gridProps +}: LayoutGeneratorProps) => { + useSlotted("LayoutGenerator") + let childCount = +demoChildCount + + hasHeader && (childCount += 1) + hasFooter && (childCount += 1) + hasDrawer && (childCount += 1) + hasSidepanel && (childCount += 1) + + const dummyChildren = getDummies(childCount) + const packagedChildren = + children && (Array.isArray(children) ? children : [children]) + const useChildren = [ + ...((demo ? packagedChildren || dummyChildren : packagedChildren) || []), + ] + + const style = { + ...WebPageLayout[variant || ArWebPageLayout.FULL], + ...gridProps, + } as CSSProperties + + let gridTemplateRows = hasHeader ? "auto " : "" + gridTemplateRows += "1fr " + gridTemplateRows += hasFooter ? "auto" : "" + + let gridTemplateColumns = hasDrawer ? "auto " : "" + gridTemplateColumns += "1fr " + gridTemplateColumns += hasSidepanel ? "auto " : "" + + const { + header, + footer, + drawer, + sidepanel, + hasContainerGrid, + hasSecondaryGrid, + } = getSlots({ + children: useChildren, + demo, + drawerLevel, + hasHeader, + hasFooter, + hasDrawer, + hasSidepanel, + sidepanelLevel, + }) + + if (variant === ArWebPageLayout.GRID && gridSize) { + style.gridTemplateColumns = `repeat(auto-fill, minmax(${gridSize}, 1fr))` + } + + if (variant === ArWebPageLayout.CARD && cardSize) { + style.gridTemplateColumns = `repeat(auto-fill, minmax(${cardSize}, 1fr))` + } + + const childRenders = Children.map(useChildren, (child, index) => { + let start, end, childStyle + // let useIndex = index + // header && (useIndex += useIndex) + switch (variant) { + case ArWebPageLayout.HEROLINEARCONTENTBLOCKS: + childStyle = { gridColumn: "2" } + break + case ArWebPageLayout.HEROSTAGGEREDARCONTENTBLOCKS: + start = index % 4 === 0 || index % 4 === 2 ? 2 : index % 4 === 1 ? 5 : 4 + end = index % 4 === 0 ? 5 : index % 4 === 2 ? 4 : 7 + childStyle = { gridColumn: `${start} / ${end}` } + break + case ArWebPageLayout.HEROSTAGGEREDREVERSEDARCONTENTBLOCKS: + start = index % 4 === 0 || index % 4 === 2 ? 2 : index % 4 === 1 ? 4 : 5 + end = index % 4 === 0 ? 4 : index % 4 === 2 ? 5 : 7 + childStyle = { gridColumn: `${start} / ${end}` } + break + case ArWebPageLayout.FULL: + default: + childStyle = {} + } + + return ( + child && + cloneElement(child, { + className: demo + ? `border ${ + header || + footer || + (variant !== ArWebPageLayout.FULL && + variant !== ArWebPageLayout.CAROUSEL) + ? "border-radius l2 m-05 p-1" + : "" + } ${child.props.className || ""}` + : child.props.className, + style: childStyle, + }) + ) + }) + + return ( +
+ {hasContainerGrid ? ( + <> + {header} + {/* {hasDrawer && drawerLevel === ArComponentLevels.PAGE && drawer} */} +
+ {hasSecondaryGrid ? ( + <> + {drawer} +
+ {childRenders} +
+ {sidepanel} + + ) : ( + childRenders + )} +
+ {footer} + + ) : hasSecondaryGrid ? ( + <> + {drawer} +
+ {childRenders} +
+ {sidepanel} + + ) : ( + childRenders + )} +
+ ) +} + +export default LayoutGenerator diff --git a/src/LearnLink.component.scss b/src/LearnLink.component.scss new file mode 100755 index 0000000..805ca70 --- /dev/null +++ b/src/LearnLink.component.scss @@ -0,0 +1,3 @@ +.ar-LearnLink { + +} diff --git a/src/LearnLink.tsx b/src/LearnLink.tsx new file mode 100755 index 0000000..adbd3ac --- /dev/null +++ b/src/LearnLink.tsx @@ -0,0 +1,8 @@ +import { LearnLinkProps } from "@armco/types" +import "./LearnLink.component.scss" + +const LearnLink = (props: LearnLinkProps): JSX.Element => { + return
In Component LearnLink
+} + +export default LearnLink diff --git a/src/Link.component.scss b/src/Link.component.scss new file mode 100755 index 0000000..7843112 --- /dev/null +++ b/src/Link.component.scss @@ -0,0 +1,3 @@ +.ar-Link { + +} diff --git a/src/Link.tsx b/src/Link.tsx new file mode 100755 index 0000000..37a7f67 --- /dev/null +++ b/src/Link.tsx @@ -0,0 +1,41 @@ +import { useNavigate } from "react-router-dom" +import { LinkProps } from "@armco/types" +import "./Link.component.scss" + +const Link = (props: LinkProps): JSX.Element => { + const { + classes, + label, + to, + children, + onClick, + openInNew, + preemptNavigation, + } = props + const navigate = useNavigate() + return ( +
{ + if (!preemptNavigation) { + if (to) { + if ( + to.startsWith("http://") || + to.startsWith("https://") || + openInNew + ) { + !openInNew ? window.open(to) : window.open(to, "_blank") + } else { + navigate(to) + } + } + } + onClick && onClick(e) + }} + > + {label || children} +
+ ) +} + +export default Link diff --git a/src/List.component.scss b/src/List.component.scss new file mode 100755 index 0000000..0256a1a --- /dev/null +++ b/src/List.component.scss @@ -0,0 +1,69 @@ +.ar-List { + border-radius: 0.5rem; + font-size: 0.8rem; + + .ar-List__item { + line-height: 1.5rem; + white-space: nowrap; + + > span { + max-width: 100%; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + } + + &.soft { + background-color: var(--ar-bg) !important; + line-height: 2rem; + color: var(--ar-color-font-dark-faded) !important; + &:hover { + background-color: var(--ar-color-disabled-4) !important; + } + } + + .hover-bg { + padding: 2px; + border-radius: 3px; + overflow: hidden; + &:hover { + background-color: var(--ar-bg-hover); + } + } + } + + &.invert-bg .ar-list__item { + &.soft { + background-color: var(--ar-bg-invert-1) !important; + color: var(--ar-color-font-dark-faded-invert) !important; + line-height: 2rem; + &:hover { + background-color: var(--ar-color-disabled-4-invert) !important; + } + } + } + + &:not(.is-raw) { + .ar-List__item { + &:not(.link):hover { + background-color: var(--ar-color-highlight-2); + color: var(--ar-color-hover); + } + &:hover { + background-color: var(--ar-color-font); + color: var(--ar-color-font-invert); + cursor: pointer; + .ar-Button { + color: var(--ar-color-font-invert) !important; + } + } + } + &:not(.with-check-boxes) { + .ar-List__item.is-selected { + background-color: var(--ar-bg-selected); + color: var(--ar-color-selected); + } + } + } + +} diff --git a/src/List.tsx b/src/List.tsx new file mode 100755 index 0000000..7ea6035 --- /dev/null +++ b/src/List.tsx @@ -0,0 +1,105 @@ +import { useEffect, useState } from "react" +import { v4 as uuid } from "uuid" +import { ArListStyles, ListItemContent, ListProps } from "@armco/types" +import ListItem from "./ListItem" +import "./List.component.scss" + +const dummyData = [ + { name: "Profile" }, + { name: "Settings" }, + { name: "My Stuff" }, + { name: "+ Organization" }, + { name: "+ Upload Icon" }, +] + +const List = (props: ListProps): JSX.Element => { + const { + actions, + isRaw, + classes, + data, + invertBg, + isMultiSelect, + itemClasses, + itemRenderer, + itemVariant = "dynamic", + onItemClick, + showCheckBoxes, + style, + variant, + } = props + let root + const [localItems, setLocalItems] = useState>() + const [selected, setSelected] = useState() + + useEffect(() => { + data && setLocalItems(data.map(item => { + if (!Array.isArray(item) && !item.uid) { + item.uid = uuid() + } + return item + })) + }, [data]) + + const getListItem = (item: ListItemContent, index: string) => { + if (Array.isArray(item)) { + return ( +
+ {item.map((subItem: ListItemContent, indexInner: number) => + getListItem(subItem, index + "-" + indexInner), + )} +
+ ) + } + return ( + localItems && ( + + ) + ) + } + + const content = localItems?.map((item: ListItemContent, index) => + getListItem(item, "" + index), + ) + + const commonClasses = `ar-List mb-0${invertBg ? " invert-bg" : '"'} ${ + classes ? " " + classes : "" + }${isRaw ? " is-raw" : ""}${showCheckBoxes ? " with-check-boxes" : ""}` + + switch (style) { + case ArListStyles.ORDERED as string: + root =
    {content}
+ break + case ArListStyles.UNORDERED as string: + root =
    {content}
+ break + case ArListStyles.UNSTYLED as string: + default: + root =
    {content}
+ } + + return root +} + +export default List diff --git a/src/ListItem.tsx b/src/ListItem.tsx new file mode 100644 index 0000000..50ce2ba --- /dev/null +++ b/src/ListItem.tsx @@ -0,0 +1,165 @@ +import { memo, useEffect, useState } from "react" +import { + ArButtonVariants, + ArListVariants, + ArSizes, + ArThemes, + FunctionType, + ListItemProps, + ObjectType, +} from "@armco/types" +import { search } from "@armco/utils/helper" +import { useTheme } from "@armco/utils/hooks" +import Icon from "@armco/icon" +import Button from "./Button" + +const ListItem = memo((props: ListItemProps) => { + const { + actions, + index, + isMultiSelect, + isRaw, + item = {}, + items, + itemClasses, + itemRenderer, + itemVariant, + onClick, + selected, + setItems, + setSelected, + showCheckBoxes, + variant, + } = props + const { label, name, color, preIcon, postIcon, uid } = !Array.isArray(item) + ? item + : { label: "", preIcon: "", postIcon: "", name: "", color: "" } + const [isSelected, setLocalSelected] = useState() + const { theme } = useTheme() + + useEffect(() => { + !Array.isArray(item) && setLocalSelected(item.isSelected) + }, [item]) + + return itemRenderer ? ( + itemRenderer(item, items) + ) : ( +
  • { + if (!isRaw) { + setLocalSelected(!isSelected) + if (isMultiSelect) { + const itemsClone = [...items] + const value = !Array.isArray(item) && (name || label) + const searchedItem = + typeof value === "string" && + search({ + obj: itemsClone as Array, + key: "name", + value, + }) + if (searchedItem) { + searchedItem.isSelected = !searchedItem.isSelected + setItems(itemsClone) + } + } else if (setSelected) { + setSelected(item) + } + onClick && onClick(item, items) + !Array.isArray(item) && + item.onClick && + (item.onClick as FunctionType)(item, items) + } + }} + > + {showCheckBoxes && !isRaw && ( + + )} + {preIcon && ( + + )} + { + + {variant === ArListVariants.LINK ? ( +
    • + ) +}) + +export default ListItem diff --git a/src/Loader.component.scss b/src/Loader.component.scss new file mode 100755 index 0000000..104960b --- /dev/null +++ b/src/Loader.component.scss @@ -0,0 +1,122 @@ +.ar-Loader { + z-index: 1001; + .ar-Loader-content { + position: absolute; + + &:not(.bar) { + background: rgba(255, 255, 255, 0.7); + } + + &.custom { + // top: calc(50% - 25px); + // left: calc(50% - 25px); + .loader { + width: 50px; + height: 50px; + animation: alter-rotating 5s infinite; + border-radius: 50%; + overflow: hidden; + } + } + + .shape { + --path: #2f3545; + --dot: #5628ee; + --duration: 3s; + width: 44px; + height: 44px; + position: relative; + display: inline-block; + + &:before { + content: ""; + width: 6px; + height: 6px; + border-radius: 50%; + position: absolute; + display: block; + background: var(--dot); + top: 37px; + left: 19px; + transform: translate(-18px, -18px); + animation: dotRect var(--duration) + cubic-bezier(0.785, 0.135, 0.15, 0.86) infinite; + } + + svg { + display: block; + width: 100%; + height: 100%; + rect, + polygon, + circle { + fill: none; + stroke: var(--path); + stroke-width: 10px; + stroke-linejoin: round; + stroke-linecap: round; + } + polygon { + stroke-dasharray: 145 (221 - 145) 145 (221 - 145); + stroke-dashoffset: 0; + animation: pathTriangle var(--duration) + cubic-bezier(0.785, 0.135, 0.15, 0.86) infinite; + } + rect { + stroke-dasharray: (calc(256 / 4) * 3) (calc(256 / 4)) (calc(256 / 4) * 3) (calc(256 / 4)); + stroke-dashoffset: 0; + animation: pathRect 3s cubic-bezier(0.785, 0.135, 0.15, 0.86) infinite; + } + circle { + stroke-dasharray: (calc(200 / 4) * 3) (calc(200 / 4)) (calc(200 / 4) * 3) (calc(200 / 4)); + stroke-dashoffset: 75; + animation: pathCircle var(--duration) + cubic-bezier(0.785, 0.135, 0.15, 0.86) infinite; + } + } + &.triangle { + width: 48px; + &:before { + left: 21px; + transform: translate(-10px, -18px); + animation: dotTriangle var(--duration) + cubic-bezier(0.785, 0.135, 0.15, 0.86) infinite; + } + } + } + + &.circle { + // top: calc(50% - 25px); + // left: calc(50% - 25px); + .loader { + width: 50px; + height: 50px; + animation: effect 1s linear infinite; + border-radius: 50%; + border: 6px solid #a3bdda; + border-top-color: #3b77bc; + } + } + + &.small .loader { + border-width: 4px; + top: calc(50% - 12.5px); + left: calc(50% - 12.5px); + width: 25px; + height: 25px; + } + + &.xsmall .loader { + border-width: 3px; + width: 20px; + height: 20px; + } + + &.large .loader { + top: calc(50% - 50px); + left: calc(50% - 50px); + width: 100px; + height: 100px; + } + } +} diff --git a/src/Loader.tsx b/src/Loader.tsx new file mode 100755 index 0000000..0287f64 --- /dev/null +++ b/src/Loader.tsx @@ -0,0 +1,103 @@ +import { ArIconSourceTypes, ArLoaderTypes, LoaderProps } from "@armco/types" +import ProgressIndicator from "./ProgressIndicator" +import Icon from "@armco/icon" +import "./Loader.component.scss" + +// Add ability to provide custom loader: an icon or image that rotates +const Loader = (props: LoaderProps): JSX.Element => { + const { + barVariant, + classes, + icon, + label, + progress, + rightEndContent, + size, + status, + type = ArLoaderTypes.CIRCLE, + } = props + let loaderContent + switch (type) { + case ArLoaderTypes.BAR: + loaderContent = ( + + ) + break + case ArLoaderTypes.CUSTOM: + loaderContent = ( + <> + + + + {label ? {label} : ""} + + ) + break + case ArLoaderTypes.SHAPES: + loaderContent = ( + <> +
    + + + +
    + +
    + + + +
    + +
    + + + +
    + + ) + break + case ArLoaderTypes.CIRCLE: + default: + loaderContent = ( + <> + + {label ? {label} : ""} + + ) + } + + return ( +
    +
    + {loaderContent} +
    +
    + ) +} + +export default Loader diff --git a/src/LoginProvider.component.scss b/src/LoginProvider.component.scss new file mode 100755 index 0000000..0002fb7 --- /dev/null +++ b/src/LoginProvider.component.scss @@ -0,0 +1,3 @@ +.ar-LoginProvider { + min-width: 25rem; +} diff --git a/src/LoginProvider.tsx b/src/LoginProvider.tsx new file mode 100755 index 0000000..075be43 --- /dev/null +++ b/src/LoginProvider.tsx @@ -0,0 +1,28 @@ +import { ArButtonVariants, ArSizes, LoginProviderProps } from "@armco/types" +import { IAMCLIENT } from "@armco/configs/endpoints" +import { usePanelContent } from "@armco/utils/hooks" +import Button from "./Button" +import "./LoginProvider.component.scss" + +const LoginProvider = (props: LoginProviderProps): JSX.Element => { + const { url } = props + const { setPanelContent: setRightPanelContent } = usePanelContent(false) + return ( +
    +