From 60963869bc6c055672de6c622e418a0c0954a1b7 Mon Sep 17 00:00:00 2001 From: Victor Fernandez de Alba Date: Sat, 16 Dec 2023 11:17:34 +0100 Subject: [PATCH 1/5] Transfer components to the monorepo --- .eslintignore | 2 + .github/workflows/changelog.yml | 35 +- .github/workflows/code-analysis.yml | 45 +- .github/workflows/unit.yml | 89 +- .lintstagedrc | 11 +- package.json | 7 +- packages/components/.eslintrc.cjs | 3 + packages/components/.gitignore | 16 + packages/components/.npmignore | 25 + packages/components/.prettierignore | 1 + packages/components/.prettierrc | 4 + packages/components/.release-it.json | 25 + packages/components/.storybook/main.ts | 31 + .../components/.storybook/preview-head.html | 3 + packages/components/.storybook/preview.ts | 14 + packages/components/.stylelintrc | 14 + packages/components/CHANGELOG.md | 85 + packages/components/LICENSE | 21 + packages/components/Makefile | 30 + packages/components/README.md | 55 + packages/components/news/.gitkeep | 0 packages/components/news/16.feature | 1 + packages/components/package.json | 133 + packages/components/setupTesting.ts | 3 + .../Views/RenderBlocks/DefaultBlockView.tsx | 5 + .../src/Views/RenderBlocks/RenderBlocks.tsx | 70 + .../Breadcrumbs/Breadcrumb.stories.tsx | 43 + .../Breadcrumbs/Breadcrumbs.test.tsx | 21 + .../components/Breadcrumbs/Breadcrumbs.tsx | 56 + .../src/components/Breadcrumbs/HomeIcon.tsx | 25 + .../src/components/Container/Container.tsx | 30 + .../src/components/Icon/Icon.stories.tsx | 42 + .../components/src/components/Icon/Icon.tsx | 90 + .../src/components/Icons/AddIcon.tsx | 19 + .../src/components/Icons/AligncenterIcon.tsx | 19 + .../src/components/Icons/AlignleftIcon.tsx | 19 + .../src/components/Icons/AlignrightIcon.tsx | 19 + .../src/components/Icons/ArchiveIcon.tsx | 24 + .../src/components/Icons/ArrowdownIcon.tsx | 19 + .../src/components/Icons/ArrowleftIcon.tsx | 19 + .../src/components/Icons/ArrowrightIcon.tsx | 19 + .../components/Icons/ArrowtoprightIcon.tsx | 19 + .../src/components/Icons/ArrowupIcon.tsx | 19 + .../src/components/Icons/AttachmentIcon.tsx | 19 + .../components/Icons/AutomatedcontentIcon.tsx | 19 + .../src/components/Icons/BackgroundIcon.tsx | 23 + .../src/components/Icons/BinIcon.tsx | 24 + .../src/components/Icons/BlindIcon.tsx | 23 + .../src/components/Icons/BoldIcon.tsx | 19 + .../src/components/Icons/CalendarIcon.tsx | 23 + .../src/components/Icons/CheckboxIcon.tsx | 23 + .../src/components/Icons/ChevrondownIcon.tsx | 23 + .../src/components/Icons/ChevronleftIcon.tsx | 23 + .../src/components/Icons/ChevronrightIcon.tsx | 23 + .../src/components/Icons/ChevronupIcon.tsx | 23 + .../src/components/Icons/CloseIcon.tsx | 19 + .../src/components/Icons/CodeIcon.tsx | 19 + .../src/components/Icons/CollectionIcon.tsx | 23 + .../src/components/Icons/ColumnafterIcon.tsx | 25 + .../src/components/Icons/ColumnbeforeIcon.tsx | 24 + .../src/components/Icons/ColumndeleteIcon.tsx | 20 + .../src/components/Icons/ColumnsIcon.tsx | 23 + .../src/components/Icons/CopyIcon.tsx | 24 + .../src/components/Icons/CutIcon.tsx | 23 + .../src/components/Icons/DashIcon.tsx | 19 + .../src/components/Icons/DiscussionIcon.tsx | 23 + .../src/components/Icons/DraggableIcon.tsx | 23 + .../src/components/Icons/EditIcon.tsx | 24 + .../src/components/Icons/EyeIcon.tsx | 24 + .../src/components/Icons/FilterIcon.tsx | 24 + .../src/components/Icons/FolderIcon.tsx | 23 + .../src/components/Icons/FooterIcon.tsx | 24 + .../src/components/Icons/ForegroundIcon.tsx | 23 + .../src/components/Icons/FullscreenIcon.tsx | 19 + .../src/components/Icons/HighlightIcon.tsx | 25 + .../src/components/Icons/HistoryIcon.tsx | 20 + .../src/components/Icons/HomeIcon.tsx | 23 + .../src/components/Icons/ImageIcon.tsx | 24 + .../src/components/Icons/ImagefitIcon.tsx | 25 + .../src/components/Icons/ImagefullIcon.tsx | 25 + .../src/components/Icons/ImageleftIcon.tsx | 24 + .../src/components/Icons/ImagerightIcon.tsx | 24 + .../src/components/Icons/InfoIcon.tsx | 24 + .../src/components/Icons/ItalicIcon.tsx | 23 + .../src/components/Icons/LanguageIcon.tsx | 23 + .../src/components/Icons/LeadingIcon.tsx | 24 + .../src/components/Icons/LeadingimageIcon.tsx | 23 + .../src/components/Icons/LinkIcon.tsx | 20 + .../src/components/Icons/ListIcon.tsx | 19 + .../src/components/Icons/ListnumbersIcon.tsx | 19 + .../src/components/Icons/MailIcon.tsx | 23 + .../src/components/Icons/MandatoryIcon.tsx | 23 + .../src/components/Icons/MapIcon.tsx | 24 + .../src/components/Icons/MenuIcon.tsx | 19 + .../src/components/Icons/MergedIcon.tsx | 23 + .../src/components/Icons/MoreoptionsIcon.tsx | 19 + .../src/components/Icons/NavigationIcon.tsx | 19 + .../src/components/Icons/NewsIcon.tsx | 29 + .../src/components/Icons/OutIcon.tsx | 20 + .../src/components/Icons/PageIcon.tsx | 23 + .../src/components/Icons/ParagraphIcon.tsx | 23 + .../src/components/Icons/PasteIcon.tsx | 20 + .../src/components/Icons/PauseIcon.tsx | 24 + .../src/components/Icons/PencilIcon.tsx | 23 + .../src/components/Icons/PlayIcon.tsx | 24 + .../src/components/Icons/PropertiesIcon.tsx | 19 + .../src/components/Icons/QuotesIcon.tsx | 23 + .../src/components/Icons/RadiobuttonIcon.tsx | 23 + .../src/components/Icons/RedoIcon.tsx | 23 + .../src/components/Icons/RenameIcon.tsx | 24 + .../src/components/Icons/ReverseIcon.tsx | 19 + .../src/components/Icons/ReviewIcon.tsx | 24 + .../src/components/Icons/RowafterIcon.tsx | 25 + .../src/components/Icons/RowbeforeIcon.tsx | 24 + .../src/components/Icons/RowdeleteIcon.tsx | 20 + .../src/components/Icons/SearchIcon.tsx | 23 + .../src/components/Icons/SecurityIcon.tsx | 23 + .../src/components/Icons/SettingsIcon.tsx | 24 + .../src/components/Icons/ShareIcon.tsx | 24 + .../src/components/Icons/SliderIcon.tsx | 25 + .../src/components/Icons/SocialIcon.tsx | 28 + .../src/components/Icons/SpacerIcon.tsx | 19 + .../src/components/Icons/StateIcon.tsx | 24 + .../src/components/Icons/SubtitleIcon.tsx | 24 + .../src/components/Icons/TableIcon.tsx | 23 + .../src/components/Icons/TagIcon.tsx | 24 + .../src/components/Icons/TextIcon.tsx | 19 + .../src/components/Icons/ThumbnailsIcon.tsx | 23 + .../src/components/Icons/TitleIcon.tsx | 24 + .../src/components/Icons/TocIcon.tsx | 23 + .../src/components/Icons/UndoIcon.tsx | 23 + .../src/components/Icons/UploadIcon.tsx | 20 + .../src/components/Icons/UserIcon.tsx | 23 + .../src/components/Icons/VideoIcon.tsx | 24 + .../src/components/Icons/VoltoIcon.tsx | 25 + .../src/components/Icons/WindowedIcon.tsx | 19 + .../src/components/Icons/WorldIcon.tsx | 23 + .../src/components/Input/Input.stories.tsx | 78 + .../src/components/Input/Input.test.tsx | 21 + .../components/src/components/Input/Input.tsx | 40 + .../src/components/Link/Link.stories.tsx | 27 + .../src/components/Link/Link.test.tsx | 17 + .../components/src/components/Link/Link.tsx | 19 + .../src/components/Select/Select.stories.tsx | 169 + .../src/components/Select/Select.test.tsx | 40 + .../src/components/Select/Select.tsx | 75 + .../src/components/Select/SelectItem.tsx | 17 + .../components/TextArea/TextArea.stories.tsx | 78 + .../src/components/TextArea/TextArea.test.tsx | 21 + .../src/components/TextArea/TextArea.tsx | 37 + .../components/src/components/helpers.tsx | 10 + packages/components/src/helpers/blocks.ts | 11 + packages/components/src/index.ts | 9 + .../src/providers/flattenToAppURL.tsx | 35 + .../components/src/stories/Colors.stories.tsx | 87 + .../components/src/stories/Icons.stories.tsx | 163 + packages/components/src/stories/Icons.tsx | 104 + .../components/src/styles/_container.scss | 13 + packages/components/src/styles/_layout.scss | 38 + .../components/src/styles/_typography.scss | 252 + .../src/styles/components/breadcrumbs.scss | 68 + .../src/styles/components/icons.scss | 106 + .../fonts/metropolis/Metropolis-Black.eot | Bin 0 -> 41736 bytes .../fonts/metropolis/Metropolis-Black.ttf | Bin 0 -> 41532 bytes .../fonts/metropolis/Metropolis-Black.woff | Bin 0 -> 22008 bytes .../fonts/metropolis/Metropolis-Black.woff2 | Bin 0 -> 17092 bytes .../metropolis/Metropolis-BlackItalic.eot | Bin 0 -> 41704 bytes .../metropolis/Metropolis-BlackItalic.ttf | Bin 0 -> 41488 bytes .../metropolis/Metropolis-BlackItalic.woff | Bin 0 -> 22808 bytes .../metropolis/Metropolis-BlackItalic.woff2 | Bin 0 -> 17716 bytes .../fonts/metropolis/Metropolis-Bold.eot | Bin 0 -> 41716 bytes .../fonts/metropolis/Metropolis-Bold.ttf | Bin 0 -> 41532 bytes .../fonts/metropolis/Metropolis-Bold.woff | Bin 0 -> 22204 bytes .../fonts/metropolis/Metropolis-Bold.woff2 | Bin 0 -> 17156 bytes .../metropolis/Metropolis-BoldItalic.eot | Bin 0 -> 42032 bytes .../metropolis/Metropolis-BoldItalic.ttf | Bin 0 -> 41820 bytes .../metropolis/Metropolis-BoldItalic.woff | Bin 0 -> 22944 bytes .../metropolis/Metropolis-BoldItalic.woff2 | Bin 0 -> 17800 bytes .../fonts/metropolis/Metropolis-ExtraBold.eot | Bin 0 -> 42012 bytes .../fonts/metropolis/Metropolis-ExtraBold.ttf | Bin 0 -> 41788 bytes .../metropolis/Metropolis-ExtraBold.woff | Bin 0 -> 22216 bytes .../metropolis/Metropolis-ExtraBold.woff2 | Bin 0 -> 17168 bytes .../metropolis/Metropolis-ExtraBoldItalic.eot | Bin 0 -> 42308 bytes .../metropolis/Metropolis-ExtraBoldItalic.ttf | Bin 0 -> 42072 bytes .../Metropolis-ExtraBoldItalic.woff | Bin 0 -> 22868 bytes .../Metropolis-ExtraBoldItalic.woff2 | Bin 0 -> 17716 bytes .../metropolis/Metropolis-ExtraLight.eot | Bin 0 -> 40492 bytes .../metropolis/Metropolis-ExtraLight.ttf | Bin 0 -> 40264 bytes .../metropolis/Metropolis-ExtraLight.woff | Bin 0 -> 21600 bytes .../metropolis/Metropolis-ExtraLight.woff2 | Bin 0 -> 16660 bytes .../Metropolis-ExtraLightItalic.eot | Bin 0 -> 40948 bytes .../Metropolis-ExtraLightItalic.ttf | Bin 0 -> 40708 bytes .../Metropolis-ExtraLightItalic.woff | Bin 0 -> 22388 bytes .../Metropolis-ExtraLightItalic.woff2 | Bin 0 -> 17288 bytes .../fonts/metropolis/Metropolis-Light.eot | Bin 0 -> 40348 bytes .../fonts/metropolis/Metropolis-Light.ttf | Bin 0 -> 40144 bytes .../fonts/metropolis/Metropolis-Light.woff | Bin 0 -> 21656 bytes .../fonts/metropolis/Metropolis-Light.woff2 | Bin 0 -> 16700 bytes .../metropolis/Metropolis-LightItalic.eot | Bin 0 -> 40872 bytes .../metropolis/Metropolis-LightItalic.ttf | Bin 0 -> 40656 bytes .../metropolis/Metropolis-LightItalic.woff | Bin 0 -> 22396 bytes .../metropolis/Metropolis-LightItalic.woff2 | Bin 0 -> 17284 bytes .../fonts/metropolis/Metropolis-Medium.eot | Bin 0 -> 41668 bytes .../fonts/metropolis/Metropolis-Medium.ttf | Bin 0 -> 41460 bytes .../fonts/metropolis/Metropolis-Medium.woff | Bin 0 -> 22116 bytes .../fonts/metropolis/Metropolis-Medium.woff2 | Bin 0 -> 17124 bytes .../metropolis/Metropolis-MediumItalic.eot | Bin 0 -> 41868 bytes .../metropolis/Metropolis-MediumItalic.ttf | Bin 0 -> 41648 bytes .../metropolis/Metropolis-MediumItalic.woff | Bin 0 -> 22740 bytes .../metropolis/Metropolis-MediumItalic.woff2 | Bin 0 -> 17652 bytes .../fonts/metropolis/Metropolis-Regular.eot | Bin 0 -> 42688 bytes .../fonts/metropolis/Metropolis-Regular.ttf | Bin 0 -> 42492 bytes .../fonts/metropolis/Metropolis-Regular.woff | Bin 0 -> 21912 bytes .../fonts/metropolis/Metropolis-Regular.woff2 | Bin 0 -> 16992 bytes .../metropolis/Metropolis-RegularItalic.eot | Bin 0 -> 42460 bytes .../metropolis/Metropolis-RegularItalic.ttf | Bin 0 -> 42252 bytes .../metropolis/Metropolis-RegularItalic.woff | Bin 0 -> 22580 bytes .../metropolis/Metropolis-RegularItalic.woff2 | Bin 0 -> 17552 bytes .../fonts/metropolis/Metropolis-SemiBold.eot | Bin 0 -> 42204 bytes .../fonts/metropolis/Metropolis-SemiBold.ttf | Bin 0 -> 41984 bytes .../fonts/metropolis/Metropolis-SemiBold.woff | Bin 0 -> 22276 bytes .../metropolis/Metropolis-SemiBold.woff2 | Bin 0 -> 17236 bytes .../metropolis/Metropolis-SemiBoldItalic.eot | Bin 0 -> 42556 bytes .../metropolis/Metropolis-SemiBoldItalic.ttf | Bin 0 -> 42324 bytes .../metropolis/Metropolis-SemiBoldItalic.woff | Bin 0 -> 22872 bytes .../Metropolis-SemiBoldItalic.woff2 | Bin 0 -> 17792 bytes .../fonts/metropolis/Metropolis-Thin.eot | Bin 0 -> 39940 bytes .../fonts/metropolis/Metropolis-Thin.ttf | Bin 0 -> 39740 bytes .../fonts/metropolis/Metropolis-Thin.woff | Bin 0 -> 21432 bytes .../fonts/metropolis/Metropolis-Thin.woff2 | Bin 0 -> 16648 bytes .../metropolis/Metropolis-ThinItalic.eot | Bin 0 -> 40604 bytes .../metropolis/Metropolis-ThinItalic.ttf | Bin 0 -> 40392 bytes .../metropolis/Metropolis-ThinItalic.woff | Bin 0 -> 22304 bytes .../metropolis/Metropolis-ThinItalic.woff2 | Bin 0 -> 17236 bytes .../src/styles/fonts/metropolis/demo.html | 685 ++ .../styles/fonts/metropolis/stylesheet.css | 251 + .../fundamentals/indicators/_scrollbars.scss | 76 + .../styles/fundamentals/inputs/_dropdown.scss | 201 + .../fundamentals/inputs/_ecosystem.scss | 45 + .../styles/fundamentals/inputs/_fields.scss | 337 + .../styles/fundamentals/inputs/_textarea.scss | 128 + packages/components/src/styles/main.scss | 24 + .../components/src/styles/rules/_bigbang.scss | 251 + .../src/styles/rules/_constitutives.scss | 117 + .../src/styles/rules/_variables.scss | 262 + .../components/src/styles/static/Volto.png | Bin 0 -> 17501 bytes .../components/src/styles/static/avatar.jpg | Bin 0 -> 72211 bytes .../components/src/styles/static/avatar2.jpg | Bin 0 -> 59155 bytes .../components/src/styles/static/quanta.svg | 4 + .../src/styles/static/scrolltransparent.png | Bin 0 -> 123 bytes .../src/styles/static/volto-2020.png | Bin 0 -> 47175 bytes packages/components/src/vite-env.d.ts | 1 + packages/components/towncrier.toml | 33 + packages/components/tsconfig.json | 32 + packages/components/tsconfig.node.json | 9 + packages/components/vite.config.ts | 31 + packages/components/vitest.config.ts | 14 + packages/types/src/content/index.d.ts | 4 +- pnpm-lock.yaml | 5758 ++++++++++++++++- 259 files changed, 12833 insertions(+), 318 deletions(-) create mode 100644 packages/components/.eslintrc.cjs create mode 100644 packages/components/.gitignore create mode 100644 packages/components/.npmignore create mode 100644 packages/components/.prettierignore create mode 100644 packages/components/.prettierrc create mode 100644 packages/components/.release-it.json create mode 100644 packages/components/.storybook/main.ts create mode 100644 packages/components/.storybook/preview-head.html create mode 100644 packages/components/.storybook/preview.ts create mode 100644 packages/components/.stylelintrc create mode 100644 packages/components/CHANGELOG.md create mode 100644 packages/components/LICENSE create mode 100644 packages/components/Makefile create mode 100644 packages/components/README.md create mode 100644 packages/components/news/.gitkeep create mode 100644 packages/components/news/16.feature create mode 100644 packages/components/package.json create mode 100644 packages/components/setupTesting.ts create mode 100644 packages/components/src/Views/RenderBlocks/DefaultBlockView.tsx create mode 100644 packages/components/src/Views/RenderBlocks/RenderBlocks.tsx create mode 100644 packages/components/src/components/Breadcrumbs/Breadcrumb.stories.tsx create mode 100644 packages/components/src/components/Breadcrumbs/Breadcrumbs.test.tsx create mode 100644 packages/components/src/components/Breadcrumbs/Breadcrumbs.tsx create mode 100644 packages/components/src/components/Breadcrumbs/HomeIcon.tsx create mode 100644 packages/components/src/components/Container/Container.tsx create mode 100644 packages/components/src/components/Icon/Icon.stories.tsx create mode 100644 packages/components/src/components/Icon/Icon.tsx create mode 100644 packages/components/src/components/Icons/AddIcon.tsx create mode 100644 packages/components/src/components/Icons/AligncenterIcon.tsx create mode 100644 packages/components/src/components/Icons/AlignleftIcon.tsx create mode 100644 packages/components/src/components/Icons/AlignrightIcon.tsx create mode 100644 packages/components/src/components/Icons/ArchiveIcon.tsx create mode 100644 packages/components/src/components/Icons/ArrowdownIcon.tsx create mode 100644 packages/components/src/components/Icons/ArrowleftIcon.tsx create mode 100644 packages/components/src/components/Icons/ArrowrightIcon.tsx create mode 100644 packages/components/src/components/Icons/ArrowtoprightIcon.tsx create mode 100644 packages/components/src/components/Icons/ArrowupIcon.tsx create mode 100644 packages/components/src/components/Icons/AttachmentIcon.tsx create mode 100644 packages/components/src/components/Icons/AutomatedcontentIcon.tsx create mode 100644 packages/components/src/components/Icons/BackgroundIcon.tsx create mode 100644 packages/components/src/components/Icons/BinIcon.tsx create mode 100644 packages/components/src/components/Icons/BlindIcon.tsx create mode 100644 packages/components/src/components/Icons/BoldIcon.tsx create mode 100644 packages/components/src/components/Icons/CalendarIcon.tsx create mode 100644 packages/components/src/components/Icons/CheckboxIcon.tsx create mode 100644 packages/components/src/components/Icons/ChevrondownIcon.tsx create mode 100644 packages/components/src/components/Icons/ChevronleftIcon.tsx create mode 100644 packages/components/src/components/Icons/ChevronrightIcon.tsx create mode 100644 packages/components/src/components/Icons/ChevronupIcon.tsx create mode 100644 packages/components/src/components/Icons/CloseIcon.tsx create mode 100644 packages/components/src/components/Icons/CodeIcon.tsx create mode 100644 packages/components/src/components/Icons/CollectionIcon.tsx create mode 100644 packages/components/src/components/Icons/ColumnafterIcon.tsx create mode 100644 packages/components/src/components/Icons/ColumnbeforeIcon.tsx create mode 100644 packages/components/src/components/Icons/ColumndeleteIcon.tsx create mode 100644 packages/components/src/components/Icons/ColumnsIcon.tsx create mode 100644 packages/components/src/components/Icons/CopyIcon.tsx create mode 100644 packages/components/src/components/Icons/CutIcon.tsx create mode 100644 packages/components/src/components/Icons/DashIcon.tsx create mode 100644 packages/components/src/components/Icons/DiscussionIcon.tsx create mode 100644 packages/components/src/components/Icons/DraggableIcon.tsx create mode 100644 packages/components/src/components/Icons/EditIcon.tsx create mode 100644 packages/components/src/components/Icons/EyeIcon.tsx create mode 100644 packages/components/src/components/Icons/FilterIcon.tsx create mode 100644 packages/components/src/components/Icons/FolderIcon.tsx create mode 100644 packages/components/src/components/Icons/FooterIcon.tsx create mode 100644 packages/components/src/components/Icons/ForegroundIcon.tsx create mode 100644 packages/components/src/components/Icons/FullscreenIcon.tsx create mode 100644 packages/components/src/components/Icons/HighlightIcon.tsx create mode 100644 packages/components/src/components/Icons/HistoryIcon.tsx create mode 100644 packages/components/src/components/Icons/HomeIcon.tsx create mode 100644 packages/components/src/components/Icons/ImageIcon.tsx create mode 100644 packages/components/src/components/Icons/ImagefitIcon.tsx create mode 100644 packages/components/src/components/Icons/ImagefullIcon.tsx create mode 100644 packages/components/src/components/Icons/ImageleftIcon.tsx create mode 100644 packages/components/src/components/Icons/ImagerightIcon.tsx create mode 100644 packages/components/src/components/Icons/InfoIcon.tsx create mode 100644 packages/components/src/components/Icons/ItalicIcon.tsx create mode 100644 packages/components/src/components/Icons/LanguageIcon.tsx create mode 100644 packages/components/src/components/Icons/LeadingIcon.tsx create mode 100644 packages/components/src/components/Icons/LeadingimageIcon.tsx create mode 100644 packages/components/src/components/Icons/LinkIcon.tsx create mode 100644 packages/components/src/components/Icons/ListIcon.tsx create mode 100644 packages/components/src/components/Icons/ListnumbersIcon.tsx create mode 100644 packages/components/src/components/Icons/MailIcon.tsx create mode 100644 packages/components/src/components/Icons/MandatoryIcon.tsx create mode 100644 packages/components/src/components/Icons/MapIcon.tsx create mode 100644 packages/components/src/components/Icons/MenuIcon.tsx create mode 100644 packages/components/src/components/Icons/MergedIcon.tsx create mode 100644 packages/components/src/components/Icons/MoreoptionsIcon.tsx create mode 100644 packages/components/src/components/Icons/NavigationIcon.tsx create mode 100644 packages/components/src/components/Icons/NewsIcon.tsx create mode 100644 packages/components/src/components/Icons/OutIcon.tsx create mode 100644 packages/components/src/components/Icons/PageIcon.tsx create mode 100644 packages/components/src/components/Icons/ParagraphIcon.tsx create mode 100644 packages/components/src/components/Icons/PasteIcon.tsx create mode 100644 packages/components/src/components/Icons/PauseIcon.tsx create mode 100644 packages/components/src/components/Icons/PencilIcon.tsx create mode 100644 packages/components/src/components/Icons/PlayIcon.tsx create mode 100644 packages/components/src/components/Icons/PropertiesIcon.tsx create mode 100644 packages/components/src/components/Icons/QuotesIcon.tsx create mode 100644 packages/components/src/components/Icons/RadiobuttonIcon.tsx create mode 100644 packages/components/src/components/Icons/RedoIcon.tsx create mode 100644 packages/components/src/components/Icons/RenameIcon.tsx create mode 100644 packages/components/src/components/Icons/ReverseIcon.tsx create mode 100644 packages/components/src/components/Icons/ReviewIcon.tsx create mode 100644 packages/components/src/components/Icons/RowafterIcon.tsx create mode 100644 packages/components/src/components/Icons/RowbeforeIcon.tsx create mode 100644 packages/components/src/components/Icons/RowdeleteIcon.tsx create mode 100644 packages/components/src/components/Icons/SearchIcon.tsx create mode 100644 packages/components/src/components/Icons/SecurityIcon.tsx create mode 100644 packages/components/src/components/Icons/SettingsIcon.tsx create mode 100644 packages/components/src/components/Icons/ShareIcon.tsx create mode 100644 packages/components/src/components/Icons/SliderIcon.tsx create mode 100644 packages/components/src/components/Icons/SocialIcon.tsx create mode 100644 packages/components/src/components/Icons/SpacerIcon.tsx create mode 100644 packages/components/src/components/Icons/StateIcon.tsx create mode 100644 packages/components/src/components/Icons/SubtitleIcon.tsx create mode 100644 packages/components/src/components/Icons/TableIcon.tsx create mode 100644 packages/components/src/components/Icons/TagIcon.tsx create mode 100644 packages/components/src/components/Icons/TextIcon.tsx create mode 100644 packages/components/src/components/Icons/ThumbnailsIcon.tsx create mode 100644 packages/components/src/components/Icons/TitleIcon.tsx create mode 100644 packages/components/src/components/Icons/TocIcon.tsx create mode 100644 packages/components/src/components/Icons/UndoIcon.tsx create mode 100644 packages/components/src/components/Icons/UploadIcon.tsx create mode 100644 packages/components/src/components/Icons/UserIcon.tsx create mode 100644 packages/components/src/components/Icons/VideoIcon.tsx create mode 100644 packages/components/src/components/Icons/VoltoIcon.tsx create mode 100644 packages/components/src/components/Icons/WindowedIcon.tsx create mode 100644 packages/components/src/components/Icons/WorldIcon.tsx create mode 100644 packages/components/src/components/Input/Input.stories.tsx create mode 100644 packages/components/src/components/Input/Input.test.tsx create mode 100644 packages/components/src/components/Input/Input.tsx create mode 100644 packages/components/src/components/Link/Link.stories.tsx create mode 100644 packages/components/src/components/Link/Link.test.tsx create mode 100644 packages/components/src/components/Link/Link.tsx create mode 100644 packages/components/src/components/Select/Select.stories.tsx create mode 100644 packages/components/src/components/Select/Select.test.tsx create mode 100644 packages/components/src/components/Select/Select.tsx create mode 100644 packages/components/src/components/Select/SelectItem.tsx create mode 100644 packages/components/src/components/TextArea/TextArea.stories.tsx create mode 100644 packages/components/src/components/TextArea/TextArea.test.tsx create mode 100644 packages/components/src/components/TextArea/TextArea.tsx create mode 100644 packages/components/src/components/helpers.tsx create mode 100644 packages/components/src/helpers/blocks.ts create mode 100644 packages/components/src/index.ts create mode 100644 packages/components/src/providers/flattenToAppURL.tsx create mode 100644 packages/components/src/stories/Colors.stories.tsx create mode 100644 packages/components/src/stories/Icons.stories.tsx create mode 100644 packages/components/src/stories/Icons.tsx create mode 100644 packages/components/src/styles/_container.scss create mode 100644 packages/components/src/styles/_layout.scss create mode 100644 packages/components/src/styles/_typography.scss create mode 100644 packages/components/src/styles/components/breadcrumbs.scss create mode 100644 packages/components/src/styles/components/icons.scss create mode 100644 packages/components/src/styles/fonts/metropolis/Metropolis-Black.eot create mode 100644 packages/components/src/styles/fonts/metropolis/Metropolis-Black.ttf create mode 100644 packages/components/src/styles/fonts/metropolis/Metropolis-Black.woff create mode 100644 packages/components/src/styles/fonts/metropolis/Metropolis-Black.woff2 create mode 100644 packages/components/src/styles/fonts/metropolis/Metropolis-BlackItalic.eot create mode 100644 packages/components/src/styles/fonts/metropolis/Metropolis-BlackItalic.ttf create mode 100644 packages/components/src/styles/fonts/metropolis/Metropolis-BlackItalic.woff create mode 100644 packages/components/src/styles/fonts/metropolis/Metropolis-BlackItalic.woff2 create mode 100644 packages/components/src/styles/fonts/metropolis/Metropolis-Bold.eot create mode 100644 packages/components/src/styles/fonts/metropolis/Metropolis-Bold.ttf create mode 100644 packages/components/src/styles/fonts/metropolis/Metropolis-Bold.woff create mode 100644 packages/components/src/styles/fonts/metropolis/Metropolis-Bold.woff2 create mode 100644 packages/components/src/styles/fonts/metropolis/Metropolis-BoldItalic.eot create mode 100644 packages/components/src/styles/fonts/metropolis/Metropolis-BoldItalic.ttf create mode 100644 packages/components/src/styles/fonts/metropolis/Metropolis-BoldItalic.woff create mode 100644 packages/components/src/styles/fonts/metropolis/Metropolis-BoldItalic.woff2 create mode 100644 packages/components/src/styles/fonts/metropolis/Metropolis-ExtraBold.eot create mode 100644 packages/components/src/styles/fonts/metropolis/Metropolis-ExtraBold.ttf create mode 100644 packages/components/src/styles/fonts/metropolis/Metropolis-ExtraBold.woff create mode 100644 packages/components/src/styles/fonts/metropolis/Metropolis-ExtraBold.woff2 create mode 100644 packages/components/src/styles/fonts/metropolis/Metropolis-ExtraBoldItalic.eot create mode 100644 packages/components/src/styles/fonts/metropolis/Metropolis-ExtraBoldItalic.ttf create mode 100644 packages/components/src/styles/fonts/metropolis/Metropolis-ExtraBoldItalic.woff create mode 100644 packages/components/src/styles/fonts/metropolis/Metropolis-ExtraBoldItalic.woff2 create mode 100644 packages/components/src/styles/fonts/metropolis/Metropolis-ExtraLight.eot create mode 100644 packages/components/src/styles/fonts/metropolis/Metropolis-ExtraLight.ttf create mode 100644 packages/components/src/styles/fonts/metropolis/Metropolis-ExtraLight.woff create mode 100644 packages/components/src/styles/fonts/metropolis/Metropolis-ExtraLight.woff2 create mode 100644 packages/components/src/styles/fonts/metropolis/Metropolis-ExtraLightItalic.eot create mode 100644 packages/components/src/styles/fonts/metropolis/Metropolis-ExtraLightItalic.ttf create mode 100644 packages/components/src/styles/fonts/metropolis/Metropolis-ExtraLightItalic.woff create mode 100644 packages/components/src/styles/fonts/metropolis/Metropolis-ExtraLightItalic.woff2 create mode 100644 packages/components/src/styles/fonts/metropolis/Metropolis-Light.eot create mode 100644 packages/components/src/styles/fonts/metropolis/Metropolis-Light.ttf create mode 100644 packages/components/src/styles/fonts/metropolis/Metropolis-Light.woff create mode 100644 packages/components/src/styles/fonts/metropolis/Metropolis-Light.woff2 create mode 100644 packages/components/src/styles/fonts/metropolis/Metropolis-LightItalic.eot create mode 100644 packages/components/src/styles/fonts/metropolis/Metropolis-LightItalic.ttf create mode 100644 packages/components/src/styles/fonts/metropolis/Metropolis-LightItalic.woff create mode 100644 packages/components/src/styles/fonts/metropolis/Metropolis-LightItalic.woff2 create mode 100644 packages/components/src/styles/fonts/metropolis/Metropolis-Medium.eot create mode 100644 packages/components/src/styles/fonts/metropolis/Metropolis-Medium.ttf create mode 100644 packages/components/src/styles/fonts/metropolis/Metropolis-Medium.woff create mode 100644 packages/components/src/styles/fonts/metropolis/Metropolis-Medium.woff2 create mode 100644 packages/components/src/styles/fonts/metropolis/Metropolis-MediumItalic.eot create mode 100644 packages/components/src/styles/fonts/metropolis/Metropolis-MediumItalic.ttf create mode 100644 packages/components/src/styles/fonts/metropolis/Metropolis-MediumItalic.woff create mode 100644 packages/components/src/styles/fonts/metropolis/Metropolis-MediumItalic.woff2 create mode 100644 packages/components/src/styles/fonts/metropolis/Metropolis-Regular.eot create mode 100644 packages/components/src/styles/fonts/metropolis/Metropolis-Regular.ttf create mode 100644 packages/components/src/styles/fonts/metropolis/Metropolis-Regular.woff create mode 100644 packages/components/src/styles/fonts/metropolis/Metropolis-Regular.woff2 create mode 100644 packages/components/src/styles/fonts/metropolis/Metropolis-RegularItalic.eot create mode 100644 packages/components/src/styles/fonts/metropolis/Metropolis-RegularItalic.ttf create mode 100644 packages/components/src/styles/fonts/metropolis/Metropolis-RegularItalic.woff create mode 100644 packages/components/src/styles/fonts/metropolis/Metropolis-RegularItalic.woff2 create mode 100644 packages/components/src/styles/fonts/metropolis/Metropolis-SemiBold.eot create mode 100644 packages/components/src/styles/fonts/metropolis/Metropolis-SemiBold.ttf create mode 100644 packages/components/src/styles/fonts/metropolis/Metropolis-SemiBold.woff create mode 100644 packages/components/src/styles/fonts/metropolis/Metropolis-SemiBold.woff2 create mode 100644 packages/components/src/styles/fonts/metropolis/Metropolis-SemiBoldItalic.eot create mode 100644 packages/components/src/styles/fonts/metropolis/Metropolis-SemiBoldItalic.ttf create mode 100644 packages/components/src/styles/fonts/metropolis/Metropolis-SemiBoldItalic.woff create mode 100644 packages/components/src/styles/fonts/metropolis/Metropolis-SemiBoldItalic.woff2 create mode 100644 packages/components/src/styles/fonts/metropolis/Metropolis-Thin.eot create mode 100644 packages/components/src/styles/fonts/metropolis/Metropolis-Thin.ttf create mode 100644 packages/components/src/styles/fonts/metropolis/Metropolis-Thin.woff create mode 100644 packages/components/src/styles/fonts/metropolis/Metropolis-Thin.woff2 create mode 100644 packages/components/src/styles/fonts/metropolis/Metropolis-ThinItalic.eot create mode 100644 packages/components/src/styles/fonts/metropolis/Metropolis-ThinItalic.ttf create mode 100644 packages/components/src/styles/fonts/metropolis/Metropolis-ThinItalic.woff create mode 100644 packages/components/src/styles/fonts/metropolis/Metropolis-ThinItalic.woff2 create mode 100644 packages/components/src/styles/fonts/metropolis/demo.html create mode 100644 packages/components/src/styles/fonts/metropolis/stylesheet.css create mode 100644 packages/components/src/styles/fundamentals/indicators/_scrollbars.scss create mode 100644 packages/components/src/styles/fundamentals/inputs/_dropdown.scss create mode 100644 packages/components/src/styles/fundamentals/inputs/_ecosystem.scss create mode 100644 packages/components/src/styles/fundamentals/inputs/_fields.scss create mode 100644 packages/components/src/styles/fundamentals/inputs/_textarea.scss create mode 100644 packages/components/src/styles/main.scss create mode 100644 packages/components/src/styles/rules/_bigbang.scss create mode 100644 packages/components/src/styles/rules/_constitutives.scss create mode 100644 packages/components/src/styles/rules/_variables.scss create mode 100644 packages/components/src/styles/static/Volto.png create mode 100644 packages/components/src/styles/static/avatar.jpg create mode 100644 packages/components/src/styles/static/avatar2.jpg create mode 100644 packages/components/src/styles/static/quanta.svg create mode 100644 packages/components/src/styles/static/scrolltransparent.png create mode 100644 packages/components/src/styles/static/volto-2020.png create mode 100644 packages/components/src/vite-env.d.ts create mode 100644 packages/components/towncrier.toml create mode 100644 packages/components/tsconfig.json create mode 100644 packages/components/tsconfig.node.json create mode 100644 packages/components/vite.config.ts create mode 100644 packages/components/vitest.config.ts diff --git a/.eslintignore b/.eslintignore index 3c0dcdf36a..b09e937dcc 100644 --- a/.eslintignore +++ b/.eslintignore @@ -1,5 +1,7 @@ node_modules build +storybook-static packages/volto packages/volto-guillotina packages/generator-volto/generators/app/templates +!.* diff --git a/.github/workflows/changelog.yml b/.github/workflows/changelog.yml index 7cba470da1..c6a16acd47 100644 --- a/.github/workflows/changelog.yml +++ b/.github/workflows/changelog.yml @@ -30,6 +30,10 @@ jobs: - 'packages/client/**' registry: - 'packages/registry/**' + components: + - 'packages/components/**' + types: + - 'packages/types/**' generator: - 'packages/generator-volto/**' scripts: @@ -53,9 +57,6 @@ jobs: - name: Client changelog check if: steps.filter.outputs.client == 'true' run: | - # Fetch the pull request' base branch so towncrier will be able to - # compare the current branch with the base branch. - # Source: https://github.com/actions/checkout/#fetch-all-branches. git fetch --no-tags origin main towncrier check --compare-with origin/main --dir packages/client env: @@ -64,20 +65,30 @@ jobs: - name: Registry changelog check if: steps.filter.outputs.registry == 'true' run: | - # Fetch the pull request' base branch so towncrier will be able to - # compare the current branch with the base branch. - # Source: https://github.com/actions/checkout/#fetch-all-branches. git fetch --no-tags origin main towncrier check --compare-with origin/main --dir packages/registry env: BASE_BRANCH: ${{ github.base_ref }} + - name: Components changelog check + if: steps.filter.outputs.components == 'true' + run: | + git fetch --no-tags origin main + towncrier check --compare-with origin/main --dir packages/components + env: + BASE_BRANCH: ${{ github.base_ref }} + + - name: Types changelog check + if: steps.filter.outputs.types == 'true' + run: | + git fetch --no-tags origin main + towncrier check --compare-with origin/main --dir packages/types + env: + BASE_BRANCH: ${{ github.base_ref }} + - name: Generator changelog check if: steps.filter.outputs.generator == 'true' run: | - # Fetch the pull request' base branch so towncrier will be able to - # compare the current branch with the base branch. - # Source: https://github.com/actions/checkout/#fetch-all-branches. git fetch --no-tags origin main towncrier check --compare-with origin/main --dir packages/generator-volto env: @@ -86,9 +97,6 @@ jobs: - name: scripts changelog check if: steps.filter.outputs.scripts == 'true' run: | - # Fetch the pull request' base branch so towncrier will be able to - # compare the current branch with the base branch. - # Source: https://github.com/actions/checkout/#fetch-all-branches. git fetch --no-tags origin main towncrier check --compare-with origin/main --dir packages/scripts env: @@ -97,9 +105,6 @@ jobs: - name: volto-slate changelog check if: steps.filter.outputs.voltoSlate == 'true' run: | - # Fetch the pull request' base branch so towncrier will be able to - # compare the current branch with the base branch. - # Source: https://github.com/actions/checkout/#fetch-all-branches. git fetch --no-tags origin main towncrier check --compare-with origin/main --dir packages/volto-slate env: diff --git a/.github/workflows/code-analysis.yml b/.github/workflows/code-analysis.yml index a77b23e2ea..92abbb3db2 100644 --- a/.github/workflows/code-analysis.yml +++ b/.github/workflows/code-analysis.yml @@ -76,9 +76,52 @@ jobs: - run: pnpm i - - name: ESlint check + - name: Main ESlint check run: pnpm lint + - name: Volto ESlint check + run: pnpm lint:volto + + stylelint: + if: github.event_name != 'pull_request' || github.event.pull_request.head.repo.full_name != github.event.pull_request.base.repo.full_name + name: Styleling + runs-on: ubuntu-latest + steps: + - uses: actions/checkout@v3 + + # node setup + - name: Use Node.js ${{ env.node-version }} + uses: actions/setup-node@v3 + with: + node-version: ${{ env.node-version }} + + - uses: pnpm/action-setup@v2 + name: Install pnpm + with: + version: 8 + run_install: false + + - name: Get pnpm store directory + shell: bash + run: | + echo "STORE_PATH=$(pnpm store path --silent)" >> $GITHUB_ENV + + - uses: actions/cache@v3 + name: Setup pnpm cache + with: + path: ${{ env.STORE_PATH }} + key: ${{ runner.os }}-pnpm-store-${{ hashFiles('**/pnpm-lock.yaml') }} + restore-keys: | + ${{ runner.os }}-pnpm-store- + + - run: pnpm i + + - name: Volto Stylelint check + run: pnpm --filter @plone/volto stylelint + + - name: Components Stylelint check + run: pnpm --filter @plone/components stylelint + i18n: if: github.event_name != 'pull_request' || github.event.pull_request.head.repo.full_name != github.event.pull_request.base.repo.full_name name: i18n diff --git a/.github/workflows/unit.yml b/.github/workflows/unit.yml index 05fb43147f..9f2ec8ec26 100644 --- a/.github/workflows/unit.yml +++ b/.github/workflows/unit.yml @@ -5,9 +5,9 @@ env: node-version: 20.x jobs: - unit: + volto: if: github.event_name != 'pull_request' || github.event.pull_request.head.repo.full_name != github.event.pull_request.base.repo.full_name - name: Core Unit Tests + name: '@plone/volto' runs-on: ubuntu-latest strategy: fail-fast: false @@ -46,9 +46,6 @@ jobs: # node test - run: pnpm --filter @plone/volto i18n:ci - - name: Run unit tests @plone/registry - run: pnpm --filter @plone/registry test - - name: Run unit tests Volto run: pnpm --filter @plone/volto test @@ -58,6 +55,88 @@ jobs: # with: # bundlewatch-github-token: ${{ secrets.BUNDLEWATCH_GITHUB_TOKEN }} + registry: + if: github.event_name != 'pull_request' || github.event.pull_request.head.repo.full_name != github.event.pull_request.base.repo.full_name + name: '@plone/registry' + runs-on: ubuntu-latest + strategy: + fail-fast: false + matrix: + node-version: [18.x, 20.x] + steps: + - uses: actions/checkout@v3 + + # node setup + - name: Use Node.js ${{ matrix.node-version }} + uses: actions/setup-node@v3 + with: + node-version: ${{ matrix.node-version }} + + - uses: pnpm/action-setup@v2 + name: Install pnpm + with: + version: 8 + run_install: false + + - name: Get pnpm store directory + shell: bash + run: | + echo "STORE_PATH=$(pnpm store path --silent)" >> $GITHUB_ENV + + - uses: actions/cache@v3 + name: Setup pnpm cache + with: + path: ${{ env.STORE_PATH }} + key: ${{ runner.os }}-pnpm-store-${{ hashFiles('**/pnpm-lock.yaml') }} + restore-keys: | + ${{ runner.os }}-pnpm-store- + + - run: pnpm i + + - name: Run unit tests @plone/registry + run: pnpm --filter @plone/registry test + + components: + if: github.event_name != 'pull_request' || github.event.pull_request.head.repo.full_name != github.event.pull_request.base.repo.full_name + name: '@plone/components' + runs-on: ubuntu-latest + strategy: + fail-fast: false + matrix: + node-version: [18.x, 20.x] + steps: + - uses: actions/checkout@v3 + + # node setup + - name: Use Node.js ${{ matrix.node-version }} + uses: actions/setup-node@v3 + with: + node-version: ${{ matrix.node-version }} + + - uses: pnpm/action-setup@v2 + name: Install pnpm + with: + version: 8 + run_install: false + + - name: Get pnpm store directory + shell: bash + run: | + echo "STORE_PATH=$(pnpm store path --silent)" >> $GITHUB_ENV + + - uses: actions/cache@v3 + name: Setup pnpm cache + with: + path: ${{ env.STORE_PATH }} + key: ${{ runner.os }}-pnpm-store-${{ hashFiles('**/pnpm-lock.yaml') }} + restore-keys: | + ${{ runner.os }}-pnpm-store- + + - run: pnpm i + + - name: Run unit tests @plone/registry + run: pnpm --filter @plone/components test + client: name: '@plone/client' runs-on: ubuntu-latest diff --git a/.lintstagedrc b/.lintstagedrc index 02884a67a8..e2d1cf3190 100644 --- a/.lintstagedrc +++ b/.lintstagedrc @@ -1,5 +1,5 @@ { - "packages/!volto/**/*.{js,jsx,ts,tsx}": [ + "packages/!(volto)/**/*.{js,jsx,ts,tsx}": [ "pnpm eslint --max-warnings=0 --fix", "pnpm prettier --single-quote --write" ], @@ -8,6 +8,11 @@ "pnpm --filter @plone/volto prettier:husky" ], "packages/volto/src/**/*.{jsx, tsx}": ["pnpm --filter @plone/volto i18n"], - "**/*.{css,less,scss}": ["pnpm stylelint --fix"], - "packages/volto/**/*.overrides": ["pnpm stylelint --fix"] + "packages/!(volto)/**/*.{css,less,scss}": ["pnpm stylelint --fix"], + "packages/volto/**/*.{css,less,scss}": [ + "pnpm --filter @plone/volto stylelint --fix" + ], + "packages/volto/**/*.overrides": [ + "pnpm --filter @plone/volto stylelint --fix" + ] } diff --git a/package.json b/package.json index 4a22c492a0..38822c3a2c 100644 --- a/package.json +++ b/package.json @@ -22,9 +22,9 @@ "husky:uninstall": "husky uninstall" }, "devDependencies": { - "@typescript-eslint/eslint-plugin": "6.7.0", - "@typescript-eslint/parser": "6.7.0", - "eslint": "^8.48.0", + "@typescript-eslint/eslint-plugin": "^6.8.0", + "@typescript-eslint/parser": "^6.8.0", + "eslint": "^8.53.0", "eslint-config-prettier": "9.0.0", "eslint-import-resolver-typescript": "^3.6.1", "eslint-plugin-import": "2.28.1", @@ -33,6 +33,7 @@ "husky": "^8.0.3", "lint-staged": "15.0.2", "prettier": "3.0.3", + "stylelint": "^15.11.0", "tsconfig": "workspace:*", "turbo": "latest", "typescript": "5.2.2", diff --git a/packages/components/.eslintrc.cjs b/packages/components/.eslintrc.cjs new file mode 100644 index 0000000000..b3d5c89b99 --- /dev/null +++ b/packages/components/.eslintrc.cjs @@ -0,0 +1,3 @@ +module.exports = { + extends: '../../.eslintrc.cjs', +}; diff --git a/packages/components/.gitignore b/packages/components/.gitignore new file mode 100644 index 0000000000..ead174f021 --- /dev/null +++ b/packages/components/.gitignore @@ -0,0 +1,16 @@ +node_modules/ +dist/ +stats.html +storybook-static +lib + +# yarn 3 +.pnp.* +.yarn/* +!.yarn/patches +!.yarn/plugins +!.yarn/releases +!.yarn/sdks +!.yarn/versions + +.parcel-cache/ diff --git a/packages/components/.npmignore b/packages/components/.npmignore new file mode 100644 index 0000000000..03b695ff2d --- /dev/null +++ b/packages/components/.npmignore @@ -0,0 +1,25 @@ +news +lib +towncrier.toml +.towncrier +.storybook +.changelog.draft +node_modules/ +.vscode +.github +coverage +storybook-static +stats.html +setupTesting.ts + +.prettierignore +.prettierrc +.release-it.json +.eslintrc.cjs +.stylelintrc +Makefile + +# yarn 3 +.yarnrc.yml +.pnp.* +.yarn diff --git a/packages/components/.prettierignore b/packages/components/.prettierignore new file mode 100644 index 0000000000..c9a3cb2906 --- /dev/null +++ b/packages/components/.prettierignore @@ -0,0 +1 @@ +src/styles/rules/* diff --git a/packages/components/.prettierrc b/packages/components/.prettierrc new file mode 100644 index 0000000000..6e778b4fb9 --- /dev/null +++ b/packages/components/.prettierrc @@ -0,0 +1,4 @@ +{ + "trailingComma": "all", + "singleQuote": true +} diff --git a/packages/components/.release-it.json b/packages/components/.release-it.json new file mode 100644 index 0000000000..4eceba65fc --- /dev/null +++ b/packages/components/.release-it.json @@ -0,0 +1,25 @@ +{ + "plugins": { + "../scripts/prepublish.js": {} + }, + "hooks": { + "after:bump": [ + "pipx run towncrier build --draft --yes --version ${version} > .changelog.draft && pipx run towncrier build --yes --version ${version}", + "yarn build" + ], + "after:release": "rm .changelog.draft" + }, + "git": { + "changelog": "pipx run towncrier build --draft --yes --version 0.0.0", + "requireUpstream": false, + "requireCleanWorkingDir": false, + "commitMessage": "Release @plone/components ${version}", + "tagName": "plone-components-${version}", + "tagAnnotation": "Release @plone/components ${version}" + }, + "github": { + "release": true, + "releaseName": "@plone/components ${version}", + "releaseNotes": "cat .changelog.draft" + } +} diff --git a/packages/components/.storybook/main.ts b/packages/components/.storybook/main.ts new file mode 100644 index 0000000000..abe5125094 --- /dev/null +++ b/packages/components/.storybook/main.ts @@ -0,0 +1,31 @@ +import type { StorybookConfig } from '@storybook/react-vite'; + +const config: StorybookConfig = { + // For some reason the property does not allow negation + // https://github.com/storybookjs/storybook/issues/11181#issuecomment-1535288804 + stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'], + addons: [ + '@storybook/addon-links', + '@storybook/addon-essentials', + '@storybook/addon-interactions', + '@storybook/addon-mdx-gfm', + ], + framework: { + name: '@storybook/react-vite', + options: {}, + }, + docs: { + autodocs: 'tag', + }, + typescript: { + reactDocgen: 'react-docgen-typescript', + reactDocgenTypescriptOptions: { + compilerOptions: { + allowSyntheticDefaultImports: false, + esModuleInterop: false, + }, + propFilter: () => true, + }, + }, +}; +export default config; diff --git a/packages/components/.storybook/preview-head.html b/packages/components/.storybook/preview-head.html new file mode 100644 index 0000000000..05da1e9dfb --- /dev/null +++ b/packages/components/.storybook/preview-head.html @@ -0,0 +1,3 @@ + \ No newline at end of file diff --git a/packages/components/.storybook/preview.ts b/packages/components/.storybook/preview.ts new file mode 100644 index 0000000000..503e74b3cd --- /dev/null +++ b/packages/components/.storybook/preview.ts @@ -0,0 +1,14 @@ +import '../src/styles/main.scss'; + +export const parameters = { + backgrounds: { + default: 'light', + }, + actions: { argTypesRegex: '^on[A-Z].*' }, + controls: { + matchers: { + color: /(background|color)$/i, + date: /Date$/, + }, + }, +}; diff --git a/packages/components/.stylelintrc b/packages/components/.stylelintrc new file mode 100644 index 0000000000..8ac62f8d0f --- /dev/null +++ b/packages/components/.stylelintrc @@ -0,0 +1,14 @@ +{ + "extends": ["stylelint-config-idiomatic-order"], + "plugins": ["stylelint-prettier"], + "overrides": [ + { + "files": ["**/*.scss"], + "customSyntax": "postcss-scss" + } + ], + "rules": { + "prettier/prettier": true, + "order/properties-alphabetical-order": null + } +} diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md new file mode 100644 index 0000000000..4a9e1acebd --- /dev/null +++ b/packages/components/CHANGELOG.md @@ -0,0 +1,85 @@ +# @plone/client Release Notes + + + + + +## 1.6.0 (2023-11-12) + +### Internal + +- Update Textarea with new FieldError component @sneridagh [#15](https://github.com/plone/components/issues/15) + +## 1.5.0 (2023-11-12) + +### Feature + +- Add Quanta icons as react components ready to use with the Icon component @sneridagh [#12](https://github.com/plone/components/issues/12) +- Basic `Select` component. + Introduce new FieldError component. + Other CSS fixes. @sneridagh [#14](https://github.com/plone/components/issues/14) + +### Internal + +- Update to `react-aria-components` RC. @sneridagh [#14](https://github.com/plone/components/issues/14) + +## 1.4.1 (2023-11-01) + +### Internal + +- Fixed wrong pointer to the new d.ts file @sneridagh [#0](https://github.com/plone/components/issues/0) + +## 1.4.0 (2023-11-01) + +### Feature + +- Add build process to the package, add the resultant build to the npm release @sneridagh [#11](https://github.com/plone/components/issues/11) + +### Internal + +- Update to latest @types/react @sneridagh [#10](https://github.com/plone/components/issues/10) + +## 1.3.0 (2023-10-31) + +### Feature + +- New component: `Link` + New provider: `FlattenToAppURLProvider` + Based on the `react-aria-components` `Link` component + It uses the new `FlattenToAppURLProvider` helper to flatten all the incoming URLs @sneridagh [#8](https://github.com/plone/components/issues/8) + +## 1.2.0 (2023-10-28) + +### Feature + +- New component: Icon + Styling for Breadcrumbs component. + Improve the Breadcrumbs component internally. @sneridagh [#7](https://github.com/plone/components/issues/7) + +## 1.1.0 (2023-10-24) + +### Feature + +- Breadcrumbs styling @sneridagh [#5](https://github.com/plone/components/issues/5) +- Color Palette @sneridagh + Stories cleanup @sneridagh [#6](https://github.com/plone/components/issues/6) + + +## 1.0.1 (2023-10-20) + +### Bugfix + +- Cleanup @sneridagh [#2](https://github.com/plone/components/issues/2) + + +## 1.0.0 (2023-10-20) + +### Feature + +- Initial release @sneridagh + Container component @sneridagh + Input component @sneridagh [#1](https://github.com/plone/components/issues/1) diff --git a/packages/components/LICENSE b/packages/components/LICENSE new file mode 100644 index 0000000000..c0af2b1b65 --- /dev/null +++ b/packages/components/LICENSE @@ -0,0 +1,21 @@ +MIT License + +Copyright (c) 2023 Plone Foundation + +Permission is hereby granted, free of charge, to any person obtaining a copy +of this software and associated documentation files (the "Software"), to deal +in the Software without restriction, including without limitation the rights +to use, copy, modify, merge, publish, distribute, sublicense, and/or sell +copies of the Software, and to permit persons to whom the Software is +furnished to do so, subject to the following conditions: + +The above copyright notice and this permission notice shall be included in all +copies or substantial portions of the Software. + +THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR +IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, +FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE +AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER +LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, +OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE +SOFTWARE. diff --git a/packages/components/Makefile b/packages/components/Makefile new file mode 100644 index 0000000000..8393f631a1 --- /dev/null +++ b/packages/components/Makefile @@ -0,0 +1,30 @@ +SHELL := /bin/bash +CURRENT_DIR:=$(shell dirname $(realpath $(lastword $(MAKEFILE_LIST)))) + + +# We like colors +# From: https://coderwall.com/p/izxssa/colored-makefile-for-golang-projects +RED=`tput setaf 1` +GREEN=`tput setaf 2` +RESET=`tput sgr0` +YELLOW=`tput setaf 3` + +DOCKER_IMAGE=plone/plone-backend:6.0.1 +TESTING_ADDONS=plone.app.robotframework==2.0.0 plone.app.testing==7.0.0 + +.PHONY: all +all: build + +# Add the following 'help' target to your Makefile +# And add help text after each target name starting with '\#\#' +.PHONY: help +help: ## This help message + @grep -E '^[a-zA-Z_-]+:.*?## .*$$' $(MAKEFILE_LIST) | sort | awk 'BEGIN {FS = ":.*?## "}; {printf "\033[36m%-30s\033[0m %s\n", $$1, $$2}' + +.PHONY: start-test-acceptance-server +start-test-acceptance-server: ## Start Test Acceptance Server Main Fixture (docker container) + docker run -i --rm -d -e ZSERVER_HOST=0.0.0.0 -e ZSERVER_PORT=55001 -p 55001:55001 -e ADDONS='$(TESTING_ADDONS)' -e APPLY_PROFILES=plone.app.contenttypes:plone-content,plone.restapi:default,plone.volto:default-homepage -e CONFIGURE_PACKAGES=plone.app.contenttypes,plone.restapi,plone.volto,plone.volto.cors $(DOCKER_IMAGE) ./bin/robot-server plone.app.robotframework.testing.VOLTO_ROBOT_TESTING + +.PHONY: build-storybook +build-storybook: ## Build Storybook + yarn && yarn build-storybook diff --git a/packages/components/README.md b/packages/components/README.md new file mode 100644 index 0000000000..5cb17b9c66 --- /dev/null +++ b/packages/components/README.md @@ -0,0 +1,55 @@ +# @plone/components + +[![NPM](https://img.shields.io/npm/v/@plone/components.svg)](https://www.npmjs.com/package/@plone/components) +[![Build Status](https://github.com/plone/components/actions/workflows/code.yml/badge.svg)](https://github.com/plone/components/actions) +[![Build Status](https://github.com/plone/components/actions/workflows/unit.yml/badge.svg)](https://github.com/plone/components/actions) +[![Netlify Status](https://api.netlify.com/api/v1/badges/ff1f19ce-9b19-48f9-94a8-d533b53d4a9a/deploy-status)](https://app.netlify.com/sites/plone-components/deploys) + +This package contains ReactJS components for use Plone as a headless CMS. + +The purpose of this package is to provide a third party design system free and agnostic set of baseline components to build upon. + +## Components list + +### Fundamentals + +- Container +- Input +- Icon + +### Structural + +- Breadcrumbs + +## Demo / Storybook + +https://plone-components.netlify.app/ + +## Development + +This package follows a style guide (Storybook) driven development. The components are developed in isolation, given their own Storybook stories. + +The components are expected to be data-driven-less. So they won't rely internally in any data retrieval facility or utilities. +They receive the necessary data as props. In that regard, they should be "dumb" components that only take care of rendering. This should be specially true for the most basic components. + +### Headless UI component library + +This package has the form of a headless UI component library. A headless UI component library provide "white label" components that you later can style with your own styles. It is not tied to any heavy specific styling nor any CSS framework. The vanilla CSS provided allow you to "drop-in" your own CSS framework, build and existing styling into the components. + +This post explains extensively its benefits: + +https://medium.com/@nirbenyair/headless-components-in-react-and-why-i-stopped-using-ui-libraries-a8208197c268 + +### `react-aria-components` + +`@plone/components` is based on Adobe's [`react-aria-components` library](https://react-spectrum.adobe.com/react-aria/react-aria-components.html). React Aria Components is a library of unstyled components built on top of the React Aria hooks. It provides a simpler way to build accessible components with custom styles, while offering the flexibility to drop down to hooks for even more customizability where needed. + +## Releases + +The release policy for this package follows a quick 1.0.0 release, as opposed to have a excessive long lasted alpha/beta road to 1.0.0. This is because the development of this package is expected to happen during the next years. + +Breaking changes will be stated properly using semantic versioning, however an upgrade guide won't be supplied until the package is considered "ready for production". The team will communicate this state properly when the moment comes. + +## PLIP #4352 + +This package is the result of the execution of the [Plone Improvement Proposal #4352](https://github.com/plone/volto/issues/4352). diff --git a/packages/components/news/.gitkeep b/packages/components/news/.gitkeep new file mode 100644 index 0000000000..e69de29bb2 diff --git a/packages/components/news/16.feature b/packages/components/news/16.feature new file mode 100644 index 0000000000..44df40e97e --- /dev/null +++ b/packages/components/news/16.feature @@ -0,0 +1 @@ +Introduce support views - Add `RenderBlocks` view @sneridagh diff --git a/packages/components/package.json b/packages/components/package.json new file mode 100644 index 0000000000..9907338401 --- /dev/null +++ b/packages/components/package.json @@ -0,0 +1,133 @@ +{ + "name": "@plone/components", + "description": "ReactJS components for Plone", + "maintainers": [ + { + "name": "Plone Foundation", + "url": "http://plone.org" + } + ], + "license": "MIT", + "version": "1.6.0", + "repository": { + "type": "git", + "url": "http://github.com/plone/components.git" + }, + "bugs": { + "url": "https://github.com/plone/components/issues" + }, + "type": "module", + "files": [ + "dist", + "src", + "README.md" + ], + "source": "./src/index.ts", + "main": "./dist/index.cjs", + "module": "./dist/index.js", + "types": "./dist/src/index.d.ts", + "exports": { + ".": { + "types": "./dist/src/index.d.ts", + "import": "./dist/index.js", + "require": "./dist/index.cjs" + }, + "./src/*": "./src/*" + }, + "homepage": "https://plone.org", + "keywords": [ + "volto", + "plone", + "plone6", + "react", + "cms", + "client", + "query", + "react-query" + ], + "scripts": { + "build": "parcel build", + "test": "vitest --no-threads --passWithNoTests", + "coverage": "vitest run --coverage --no-threads", + "lint": "pnpm eslint && pnpm prettier && pnpm stylelint", + "format": "pnpm eslint:fix && pnpm prettier:fix && pnpm stylelint:fix", + "eslint": "eslint 'src/**/*.{js,ts,tsx}' --quiet", + "eslint:fix": "eslint 'src/**/*.{js,ts,tsx}' --quiet --fix", + "prettier": "prettier --check 'src/**/*.{js,jsx,ts,tsx}'", + "prettier:fix": "prettier --write 'src/**/*.{js,jsx,ts,tsx}'", + "stylelint": "stylelint 'src/**/*.{css,scss,less}'", + "stylelint:fix": "stylelint 'src/**/*.{css,scss,less}' --fix", + "dry-release": "release-it --dry-run", + "release": "release-it", + "release-major-alpha": "release-it major --preRelease=alpha", + "release-alpha": "release-it --preRelease=alpha", + "storybook": "storybook dev -p 6006", + "build-storybook": "storybook build" + }, + "publishConfig": { + "access": "public" + }, + "devDependencies": { + "@parcel/packager-ts": "2.10.3", + "@parcel/transformer-typescript-types": "2.10.3", + "@plone/types": "workspace: *", + "@storybook/addon-essentials": "^7.5.1", + "@storybook/addon-interactions": "^7.5.1", + "@storybook/addon-links": "^7.5.1", + "@storybook/addon-mdx-gfm": "^7.5.1", + "@storybook/blocks": "^7.5.1", + "@storybook/react": "^7.5.1", + "@storybook/react-vite": "^7.5.1", + "@storybook/testing-library": "^0.2.2", + "@testing-library/jest-dom": "6.1.4", + "@testing-library/react": "14.0.0", + "@types/jest-axe": "^3.5.7", + "@types/lodash": "^4.14.201", + "@types/react": "^18", + "@types/react-dom": "^18", + "@typescript-eslint/eslint-plugin": "^6.8.0", + "@typescript-eslint/parser": "^6.8.0", + "@vitejs/plugin-react": "^4.1.0", + "@vitest/coverage-c8": "0.33.0", + "eslint": "^8.53.0", + "eslint-plugin-storybook": "^0.6.15", + "globby": "^14.0.0", + "history": "^5.3.0", + "jest-axe": "^8.0.0", + "jsdom": "^22.1.0", + "parcel": "^2.10.3", + "postcss-scss": "4.0.9", + "prettier": "3.0.3", + "release-it": "16.2.1", + "sass": "^1.69.4", + "storybook": "^7.5.1", + "stylelint": "15.11.0", + "stylelint-config-idiomatic-order": "9.0.0", + "stylelint-config-prettier": "9.0.5", + "stylelint-config-sass-guidelines": "10.0.0", + "stylelint-prettier": "4.0.2", + "typescript": "5.2.2", + "vite": "^4.5.0", + "vitest": "^0.34.6", + "vitest-axe": "^0.1.0" + }, + "dependencies": { + "@react-aria/utils": "^3.22.0", + "@react-spectrum/utils": "^3.11.1", + "classnames": "^2.3.2", + "clsx": "^2.0.0", + "lodash": "^4.17.21", + "react": "18.2.0", + "react-aria-components": "^1.0.0-rc.0", + "react-dom": "18.2.0" + }, + "peerDependencies": { + "react": "^16.8.0 || ^17.0.0 || ^18.0.0", + "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0" + }, + "peerDependenciesMeta": { + "react-dom": { + "optional": true + } + } +} diff --git a/packages/components/setupTesting.ts b/packages/components/setupTesting.ts new file mode 100644 index 0000000000..8bc87fa36e --- /dev/null +++ b/packages/components/setupTesting.ts @@ -0,0 +1,3 @@ +import '@testing-library/jest-dom'; +import { toHaveNoViolations } from 'jest-axe'; +expect.extend(toHaveNoViolations); diff --git a/packages/components/src/Views/RenderBlocks/DefaultBlockView.tsx b/packages/components/src/Views/RenderBlocks/DefaultBlockView.tsx new file mode 100644 index 0000000000..154530c6f4 --- /dev/null +++ b/packages/components/src/Views/RenderBlocks/DefaultBlockView.tsx @@ -0,0 +1,5 @@ +const DefaultBlockView = () => { + return <>This block has no view assigned; +}; + +export default DefaultBlockView; diff --git a/packages/components/src/Views/RenderBlocks/RenderBlocks.tsx b/packages/components/src/Views/RenderBlocks/RenderBlocks.tsx new file mode 100644 index 0000000000..e2447c1cc4 --- /dev/null +++ b/packages/components/src/Views/RenderBlocks/RenderBlocks.tsx @@ -0,0 +1,70 @@ +import { Fragment } from 'react'; +// import { defineMessages, useIntl } from 'react-intl'; + +import { map } from 'lodash'; +import { hasBlocksData } from '../../helpers/blocks'; +import DefaultBlockView from './DefaultBlockView'; +import type { Content } from '@plone/types'; +import type { BlocksConfig } from '@plone/types'; +import type { Location } from 'history'; + +type RenderBlocksProps = { + /** + * Plone content object + */ + content: Content; + /** + * Current blocks configuration object + * From the registry or local to this instance (eg. in a blocks in block container) + */ + blocksConfig: BlocksConfig; + /** + * Wrap the blocks in an enclosing tag + * From the registry or local to this instance (eg. in a blocks in block container) + */ + as: React.ElementType; + /** + * Router location object + */ + location: Location; + /** + * Metadata object + * In case of the blocks in block container use case, it's the metadata (content data) + * from the parent container, passed down to the contained blocks + */ + metadata?: Content; +}; + +const RenderBlocks = (props: RenderBlocksProps) => { + const { blocksConfig, content, location, metadata } = props; + const CustomTag = props.as || Fragment; + + return hasBlocksData(content) ? ( + + {map(content.blocks_layout.items, (block) => { + const blockData = content.blocks?.[block]; + const blockType = blockData?.['@type']; + const Block = blocksConfig[blockType]?.view || DefaultBlockView; + + return Block ? ( + + ) : blockData ? ( +
Unknown block found: {blockType}
+ ) : ( +
Invalid Block
+ ); + })} + + ) : ( + '' + ); +}; + +export default RenderBlocks; diff --git a/packages/components/src/components/Breadcrumbs/Breadcrumb.stories.tsx b/packages/components/src/components/Breadcrumbs/Breadcrumb.stories.tsx new file mode 100644 index 0000000000..9dcd611e6a --- /dev/null +++ b/packages/components/src/components/Breadcrumbs/Breadcrumb.stories.tsx @@ -0,0 +1,43 @@ +import BreadcrumbsComponent from './Breadcrumbs'; + +import type { Meta, StoryObj } from '@storybook/react'; + +// More on how to set up stories at: https://storybook.js.org/docs/7.0/react/writing-stories/introduction +const meta = { + title: 'Breadcrumbs', + component: BreadcrumbsComponent, + tags: ['autodocs'], + decorators: [ + (Story) => ( +
+ +
+ ), + ], +} satisfies Meta; + +export default meta; +type Story = StoryObj; + +// More on writing stories with args: https://storybook.js.org/docs/7.0/react/writing-stories/args +export const Default: Story = { + args: { + root: '/', + includeRoot: true, + items: [ + { '@id': '/folder', title: 'Folder' }, + { '@id': '/folder/page', title: 'Page' }, + ], + }, +}; + +export const NoRoot: Story = { + args: { + root: '/', + includeRoot: false, + items: [ + { '@id': '/folder', title: 'Folder' }, + { '@id': '/folder/page', title: 'Page' }, + ], + }, +}; diff --git a/packages/components/src/components/Breadcrumbs/Breadcrumbs.test.tsx b/packages/components/src/components/Breadcrumbs/Breadcrumbs.test.tsx new file mode 100644 index 0000000000..e1c033aca2 --- /dev/null +++ b/packages/components/src/components/Breadcrumbs/Breadcrumbs.test.tsx @@ -0,0 +1,21 @@ +import { render } from '@testing-library/react'; +import { axe, toHaveNoViolations } from 'jest-axe'; +import Breadcrumbs from './Breadcrumbs'; + +expect.extend(toHaveNoViolations); + +it('Breadcrumbs basic a11y test', async () => { + const { container } = render( + , + ); + + const results = await axe(container); + + expect(results).toHaveNoViolations(); +}); diff --git a/packages/components/src/components/Breadcrumbs/Breadcrumbs.tsx b/packages/components/src/components/Breadcrumbs/Breadcrumbs.tsx new file mode 100644 index 0000000000..dc917b0a3f --- /dev/null +++ b/packages/components/src/components/Breadcrumbs/Breadcrumbs.tsx @@ -0,0 +1,56 @@ +import { + Breadcrumbs as RACBreadcrumbs, + Breadcrumb, +} from 'react-aria-components'; +import Link from '../Link/Link'; +import HomeIcon from './HomeIcon'; +import type { BreadcrumbsProps as RACBreadcrumbsProps } from 'react-aria-components'; + +type Breadcrumb = { + '@id': string; + title: string; +}; + +interface BreadcrumbsProps extends RACBreadcrumbsProps { + /** + * Current navigation root URL (flattened) + */ + root?: string; + /** + * Whether include the root item in the breadcrubs (based on the root prop) + */ + includeRoot?: boolean; +} + +/** + * Breadcrumbs display a hierarchy of links to the current page or resource in an application. + */ +export default function Breadcrumbs({ + items, + root, + includeRoot, +}: BreadcrumbsProps) { + let itemsWithRoot: typeof items; + if (includeRoot) { + const rootItem: Breadcrumb = { + '@id': root || '/', + title: 'Home', + }; + itemsWithRoot = [rootItem, ...(items as Breadcrumb[])]; + } + + return ( + + ); +} diff --git a/packages/components/src/components/Breadcrumbs/HomeIcon.tsx b/packages/components/src/components/Breadcrumbs/HomeIcon.tsx new file mode 100644 index 0000000000..253c906d34 --- /dev/null +++ b/packages/components/src/components/Breadcrumbs/HomeIcon.tsx @@ -0,0 +1,25 @@ +import Icon from '../Icon/Icon'; +import type { IconPropsWithoutChildren } from '../Icon/Icon'; + +const HomeIcon = (props: IconPropsWithoutChildren) => { + return ( + + + + + + ); +}; + +export default HomeIcon; diff --git a/packages/components/src/components/Container/Container.tsx b/packages/components/src/components/Container/Container.tsx new file mode 100644 index 0000000000..14432899a2 --- /dev/null +++ b/packages/components/src/components/Container/Container.tsx @@ -0,0 +1,30 @@ +import { ReactNode } from 'react'; +import { getElementType } from '../helpers'; +import cx from 'classnames'; + +type ContainerProps = { + /** Primary content. */ + children: ReactNode; + /** An element type to render as (string or function). */ + as: ReactNode; + /** Additional classes. */ + className: string; + /** Layout size */ + layout: boolean; + /** Narrow size. */ + narrow: boolean; +}; + +const Container = (props: ContainerProps) => { + const { children, className, layout, narrow, ...rest } = props; + const classes = cx('a', 'container', className, { layout, narrow }); + + const Component = getElementType(Container, props); + return ( + + {children} + + ); +}; + +export default Container; diff --git a/packages/components/src/components/Icon/Icon.stories.tsx b/packages/components/src/components/Icon/Icon.stories.tsx new file mode 100644 index 0000000000..450d9bdb99 --- /dev/null +++ b/packages/components/src/components/Icon/Icon.stories.tsx @@ -0,0 +1,42 @@ +import Icon from './Icon'; + +import type { Meta, StoryObj } from '@storybook/react'; + +// More on how to set up stories at: https://storybook.js.org/docs/7.0/react/writing-stories/introduction +const meta = { + title: 'Icon', + component: Icon, + tags: ['autodocs'], + decorators: [ + (Story) => ( +
+ +
+ ), + ], + argTypes: { + size: { + options: ['XS', 'S', 'M', 'L', 'XL', 'XXL'], + control: { type: 'radio' }, + }, + color: { + options: ['informative', 'negative', 'notice', 'positive'], + control: { type: 'radio' }, + }, + }, +} satisfies Meta; + +export default meta; +type Story = StoryObj; + +// More on writing stories with args: https://storybook.js.org/docs/7.0/react/writing-stories/args +export const Default: Story = { + args: { + size: 'L', + children: ( + + + + ), + }, +}; diff --git a/packages/components/src/components/Icon/Icon.tsx b/packages/components/src/components/Icon/Icon.tsx new file mode 100644 index 0000000000..a5669fd87f --- /dev/null +++ b/packages/components/src/components/Icon/Icon.tsx @@ -0,0 +1,90 @@ +import { + AriaLabelingProps, + DOMProps, + IconColorValue, + StyleProps, +} from '@react-types/shared'; +import { + baseStyleProps, + StyleHandlers, + useSlotProps, + useStyleProps, +} from '@react-spectrum/utils'; +import { filterDOMProps } from '@react-aria/utils'; +import React, { ReactElement } from 'react'; +import _clsx from 'clsx'; + +export interface IconProps extends DOMProps, AriaLabelingProps, StyleProps { + /** + * A screen reader only label for the Icon. + */ + 'aria-label'?: string; + /** + * The content to display. Should be an SVG. + */ + children: ReactElement; + /** + * Size of Icon (changes based on scale). + */ + size?: 'XXS' | 'XS' | 'S' | 'M' | 'L' | 'XL' | 'XXL'; + /** + * A slot to place the icon in. + * @default 'icon' + */ + slot?: string; + /** + * Indicates whether the element is exposed to an accessibility API. + */ + 'aria-hidden'?: boolean | 'false' | 'true'; + /** + * Color of the Icon. + */ + color?: IconColorValue; +} + +export type IconPropsWithoutChildren = Omit; + +function iconColorValue(value: IconColorValue) { + return `var(--semantic-${value}-color-icon)`; +} + +const iconStyleProps: StyleHandlers = { + ...baseStyleProps, + color: ['color', iconColorValue], +}; + +/** + * Spectrum icons are clear, minimal, and consistent across platforms. They follow the focused and rational principles of the design system in both metaphor and style. + */ +export default function Icon(props: IconProps) { + props = useSlotProps(props, 'icon'); + let { + children, + size, + 'aria-label': ariaLabel, + 'aria-hidden': ariaHidden, + ...otherProps + } = props; + let { styleProps } = useStyleProps(otherProps, iconStyleProps); + + if (!ariaHidden) { + ariaHidden = undefined; + } + + let iconSize = size ? size : 'M'; + + return React.cloneElement(children, { + ...filterDOMProps(otherProps), + ...styleProps, + focusable: 'false', + 'aria-label': ariaLabel, + 'aria-hidden': ariaLabel ? ariaHidden || undefined : true, + role: 'img', + className: _clsx( + 'q icon', + `icon--size${iconSize}`, + children.props.className, + styleProps.className, + ), + }); +} diff --git a/packages/components/src/components/Icons/AddIcon.tsx b/packages/components/src/components/Icons/AddIcon.tsx new file mode 100644 index 0000000000..75c0f9d0b4 --- /dev/null +++ b/packages/components/src/components/Icons/AddIcon.tsx @@ -0,0 +1,19 @@ +import Icon from '../Icon/Icon'; +import type { IconPropsWithoutChildren } from '../Icon/Icon'; + +const Add = (props: IconPropsWithoutChildren) => { + return ( + + + + + + ); +}; + +export default Add; diff --git a/packages/components/src/components/Icons/AligncenterIcon.tsx b/packages/components/src/components/Icons/AligncenterIcon.tsx new file mode 100644 index 0000000000..eb1c606097 --- /dev/null +++ b/packages/components/src/components/Icons/AligncenterIcon.tsx @@ -0,0 +1,19 @@ +import Icon from '../Icon/Icon'; +import type { IconPropsWithoutChildren } from '../Icon/Icon'; + +const Aligncenter = (props: IconPropsWithoutChildren) => { + return ( + + + + + + ); +}; + +export default Aligncenter; diff --git a/packages/components/src/components/Icons/AlignleftIcon.tsx b/packages/components/src/components/Icons/AlignleftIcon.tsx new file mode 100644 index 0000000000..c9a6d3b9a7 --- /dev/null +++ b/packages/components/src/components/Icons/AlignleftIcon.tsx @@ -0,0 +1,19 @@ +import Icon from '../Icon/Icon'; +import type { IconPropsWithoutChildren } from '../Icon/Icon'; + +const Alignleft = (props: IconPropsWithoutChildren) => { + return ( + + + + + + ); +}; + +export default Alignleft; diff --git a/packages/components/src/components/Icons/AlignrightIcon.tsx b/packages/components/src/components/Icons/AlignrightIcon.tsx new file mode 100644 index 0000000000..90a0719681 --- /dev/null +++ b/packages/components/src/components/Icons/AlignrightIcon.tsx @@ -0,0 +1,19 @@ +import Icon from '../Icon/Icon'; +import type { IconPropsWithoutChildren } from '../Icon/Icon'; + +const Alignright = (props: IconPropsWithoutChildren) => { + return ( + + + + + + ); +}; + +export default Alignright; diff --git a/packages/components/src/components/Icons/ArchiveIcon.tsx b/packages/components/src/components/Icons/ArchiveIcon.tsx new file mode 100644 index 0000000000..44e754784d --- /dev/null +++ b/packages/components/src/components/Icons/ArchiveIcon.tsx @@ -0,0 +1,24 @@ +import Icon from '../Icon/Icon'; +import type { IconPropsWithoutChildren } from '../Icon/Icon'; + +const Archive = (props: IconPropsWithoutChildren) => { + return ( + + + + + + + ); +}; + +export default Archive; diff --git a/packages/components/src/components/Icons/ArrowdownIcon.tsx b/packages/components/src/components/Icons/ArrowdownIcon.tsx new file mode 100644 index 0000000000..4977e7c10e --- /dev/null +++ b/packages/components/src/components/Icons/ArrowdownIcon.tsx @@ -0,0 +1,19 @@ +import Icon from '../Icon/Icon'; +import type { IconPropsWithoutChildren } from '../Icon/Icon'; + +const Arrowdown = (props: IconPropsWithoutChildren) => { + return ( + + + + + + ); +}; + +export default Arrowdown; diff --git a/packages/components/src/components/Icons/ArrowleftIcon.tsx b/packages/components/src/components/Icons/ArrowleftIcon.tsx new file mode 100644 index 0000000000..50ff4fd8ab --- /dev/null +++ b/packages/components/src/components/Icons/ArrowleftIcon.tsx @@ -0,0 +1,19 @@ +import Icon from '../Icon/Icon'; +import type { IconPropsWithoutChildren } from '../Icon/Icon'; + +const Arrowleft = (props: IconPropsWithoutChildren) => { + return ( + + + + + + ); +}; + +export default Arrowleft; diff --git a/packages/components/src/components/Icons/ArrowrightIcon.tsx b/packages/components/src/components/Icons/ArrowrightIcon.tsx new file mode 100644 index 0000000000..b895cef1a9 --- /dev/null +++ b/packages/components/src/components/Icons/ArrowrightIcon.tsx @@ -0,0 +1,19 @@ +import Icon from '../Icon/Icon'; +import type { IconPropsWithoutChildren } from '../Icon/Icon'; + +const Arrowright = (props: IconPropsWithoutChildren) => { + return ( + + + + + + ); +}; + +export default Arrowright; diff --git a/packages/components/src/components/Icons/ArrowtoprightIcon.tsx b/packages/components/src/components/Icons/ArrowtoprightIcon.tsx new file mode 100644 index 0000000000..73d52cbaab --- /dev/null +++ b/packages/components/src/components/Icons/ArrowtoprightIcon.tsx @@ -0,0 +1,19 @@ +import Icon from '../Icon/Icon'; +import type { IconPropsWithoutChildren } from '../Icon/Icon'; + +const Arrowtopright = (props: IconPropsWithoutChildren) => { + return ( + + + + + + ); +}; + +export default Arrowtopright; diff --git a/packages/components/src/components/Icons/ArrowupIcon.tsx b/packages/components/src/components/Icons/ArrowupIcon.tsx new file mode 100644 index 0000000000..4f3454e4a1 --- /dev/null +++ b/packages/components/src/components/Icons/ArrowupIcon.tsx @@ -0,0 +1,19 @@ +import Icon from '../Icon/Icon'; +import type { IconPropsWithoutChildren } from '../Icon/Icon'; + +const Arrowup = (props: IconPropsWithoutChildren) => { + return ( + + + + + + ); +}; + +export default Arrowup; diff --git a/packages/components/src/components/Icons/AttachmentIcon.tsx b/packages/components/src/components/Icons/AttachmentIcon.tsx new file mode 100644 index 0000000000..1f55942470 --- /dev/null +++ b/packages/components/src/components/Icons/AttachmentIcon.tsx @@ -0,0 +1,19 @@ +import Icon from '../Icon/Icon'; +import type { IconPropsWithoutChildren } from '../Icon/Icon'; + +const Attachment = (props: IconPropsWithoutChildren) => { + return ( + + + + + + ); +}; + +export default Attachment; diff --git a/packages/components/src/components/Icons/AutomatedcontentIcon.tsx b/packages/components/src/components/Icons/AutomatedcontentIcon.tsx new file mode 100644 index 0000000000..615e8a7f1d --- /dev/null +++ b/packages/components/src/components/Icons/AutomatedcontentIcon.tsx @@ -0,0 +1,19 @@ +import Icon from '../Icon/Icon'; +import type { IconPropsWithoutChildren } from '../Icon/Icon'; + +const Automatedcontent = (props: IconPropsWithoutChildren) => { + return ( + + + + + + ); +}; + +export default Automatedcontent; diff --git a/packages/components/src/components/Icons/BackgroundIcon.tsx b/packages/components/src/components/Icons/BackgroundIcon.tsx new file mode 100644 index 0000000000..7784d06108 --- /dev/null +++ b/packages/components/src/components/Icons/BackgroundIcon.tsx @@ -0,0 +1,23 @@ +import Icon from '../Icon/Icon'; +import type { IconPropsWithoutChildren } from '../Icon/Icon'; + +const Background = (props: IconPropsWithoutChildren) => { + return ( + + + + + + ); +}; + +export default Background; diff --git a/packages/components/src/components/Icons/BinIcon.tsx b/packages/components/src/components/Icons/BinIcon.tsx new file mode 100644 index 0000000000..ed301b54f1 --- /dev/null +++ b/packages/components/src/components/Icons/BinIcon.tsx @@ -0,0 +1,24 @@ +import Icon from '../Icon/Icon'; +import type { IconPropsWithoutChildren } from '../Icon/Icon'; + +const Bin = (props: IconPropsWithoutChildren) => { + return ( + + + + + + + ); +}; + +export default Bin; diff --git a/packages/components/src/components/Icons/BlindIcon.tsx b/packages/components/src/components/Icons/BlindIcon.tsx new file mode 100644 index 0000000000..cecddc29a5 --- /dev/null +++ b/packages/components/src/components/Icons/BlindIcon.tsx @@ -0,0 +1,23 @@ +import Icon from '../Icon/Icon'; +import type { IconPropsWithoutChildren } from '../Icon/Icon'; + +const Blind = (props: IconPropsWithoutChildren) => { + return ( + + + + + + ); +}; + +export default Blind; diff --git a/packages/components/src/components/Icons/BoldIcon.tsx b/packages/components/src/components/Icons/BoldIcon.tsx new file mode 100644 index 0000000000..80893ef86c --- /dev/null +++ b/packages/components/src/components/Icons/BoldIcon.tsx @@ -0,0 +1,19 @@ +import Icon from '../Icon/Icon'; +import type { IconPropsWithoutChildren } from '../Icon/Icon'; + +const Bold = (props: IconPropsWithoutChildren) => { + return ( + + + + + + ); +}; + +export default Bold; diff --git a/packages/components/src/components/Icons/CalendarIcon.tsx b/packages/components/src/components/Icons/CalendarIcon.tsx new file mode 100644 index 0000000000..2cadc9f7dc --- /dev/null +++ b/packages/components/src/components/Icons/CalendarIcon.tsx @@ -0,0 +1,23 @@ +import Icon from '../Icon/Icon'; +import type { IconPropsWithoutChildren } from '../Icon/Icon'; + +const Calendar = (props: IconPropsWithoutChildren) => { + return ( + + + + + + ); +}; + +export default Calendar; diff --git a/packages/components/src/components/Icons/CheckboxIcon.tsx b/packages/components/src/components/Icons/CheckboxIcon.tsx new file mode 100644 index 0000000000..cab03e4b11 --- /dev/null +++ b/packages/components/src/components/Icons/CheckboxIcon.tsx @@ -0,0 +1,23 @@ +import Icon from '../Icon/Icon'; +import type { IconPropsWithoutChildren } from '../Icon/Icon'; + +const Checkbox = (props: IconPropsWithoutChildren) => { + return ( + + + + + + ); +}; + +export default Checkbox; diff --git a/packages/components/src/components/Icons/ChevrondownIcon.tsx b/packages/components/src/components/Icons/ChevrondownIcon.tsx new file mode 100644 index 0000000000..3cf3c86da3 --- /dev/null +++ b/packages/components/src/components/Icons/ChevrondownIcon.tsx @@ -0,0 +1,23 @@ +import Icon from '../Icon/Icon'; +import type { IconPropsWithoutChildren } from '../Icon/Icon'; + +const Chevrondown = (props: IconPropsWithoutChildren) => { + return ( + + + + + + ); +}; + +export default Chevrondown; diff --git a/packages/components/src/components/Icons/ChevronleftIcon.tsx b/packages/components/src/components/Icons/ChevronleftIcon.tsx new file mode 100644 index 0000000000..7b2a9e22b3 --- /dev/null +++ b/packages/components/src/components/Icons/ChevronleftIcon.tsx @@ -0,0 +1,23 @@ +import Icon from '../Icon/Icon'; +import type { IconPropsWithoutChildren } from '../Icon/Icon'; + +const Chevronleft = (props: IconPropsWithoutChildren) => { + return ( + + + + + + ); +}; + +export default Chevronleft; diff --git a/packages/components/src/components/Icons/ChevronrightIcon.tsx b/packages/components/src/components/Icons/ChevronrightIcon.tsx new file mode 100644 index 0000000000..e9aba2deaf --- /dev/null +++ b/packages/components/src/components/Icons/ChevronrightIcon.tsx @@ -0,0 +1,23 @@ +import Icon from '../Icon/Icon'; +import type { IconPropsWithoutChildren } from '../Icon/Icon'; + +const Chevronright = (props: IconPropsWithoutChildren) => { + return ( + + + + + + ); +}; + +export default Chevronright; diff --git a/packages/components/src/components/Icons/ChevronupIcon.tsx b/packages/components/src/components/Icons/ChevronupIcon.tsx new file mode 100644 index 0000000000..146c863c11 --- /dev/null +++ b/packages/components/src/components/Icons/ChevronupIcon.tsx @@ -0,0 +1,23 @@ +import Icon from '../Icon/Icon'; +import type { IconPropsWithoutChildren } from '../Icon/Icon'; + +const Chevronup = (props: IconPropsWithoutChildren) => { + return ( + + + + + + ); +}; + +export default Chevronup; diff --git a/packages/components/src/components/Icons/CloseIcon.tsx b/packages/components/src/components/Icons/CloseIcon.tsx new file mode 100644 index 0000000000..ea91e2f39c --- /dev/null +++ b/packages/components/src/components/Icons/CloseIcon.tsx @@ -0,0 +1,19 @@ +import Icon from '../Icon/Icon'; +import type { IconPropsWithoutChildren } from '../Icon/Icon'; + +const Close = (props: IconPropsWithoutChildren) => { + return ( + + + + + + ); +}; + +export default Close; diff --git a/packages/components/src/components/Icons/CodeIcon.tsx b/packages/components/src/components/Icons/CodeIcon.tsx new file mode 100644 index 0000000000..4b008b2fe3 --- /dev/null +++ b/packages/components/src/components/Icons/CodeIcon.tsx @@ -0,0 +1,19 @@ +import Icon from '../Icon/Icon'; +import type { IconPropsWithoutChildren } from '../Icon/Icon'; + +const Code = (props: IconPropsWithoutChildren) => { + return ( + + + + + + ); +}; + +export default Code; diff --git a/packages/components/src/components/Icons/CollectionIcon.tsx b/packages/components/src/components/Icons/CollectionIcon.tsx new file mode 100644 index 0000000000..9f6ee1b054 --- /dev/null +++ b/packages/components/src/components/Icons/CollectionIcon.tsx @@ -0,0 +1,23 @@ +import Icon from '../Icon/Icon'; +import type { IconPropsWithoutChildren } from '../Icon/Icon'; + +const Collection = (props: IconPropsWithoutChildren) => { + return ( + + + + + + ); +}; + +export default Collection; diff --git a/packages/components/src/components/Icons/ColumnafterIcon.tsx b/packages/components/src/components/Icons/ColumnafterIcon.tsx new file mode 100644 index 0000000000..4aa72a97a3 --- /dev/null +++ b/packages/components/src/components/Icons/ColumnafterIcon.tsx @@ -0,0 +1,25 @@ +import Icon from '../Icon/Icon'; +import type { IconPropsWithoutChildren } from '../Icon/Icon'; + +const Columnafter = (props: IconPropsWithoutChildren) => { + return ( + + + + + + + + ); +}; + +export default Columnafter; diff --git a/packages/components/src/components/Icons/ColumnbeforeIcon.tsx b/packages/components/src/components/Icons/ColumnbeforeIcon.tsx new file mode 100644 index 0000000000..738e2f7dab --- /dev/null +++ b/packages/components/src/components/Icons/ColumnbeforeIcon.tsx @@ -0,0 +1,24 @@ +import Icon from '../Icon/Icon'; +import type { IconPropsWithoutChildren } from '../Icon/Icon'; + +const Columnbefore = (props: IconPropsWithoutChildren) => { + return ( + + + + + + + ); +}; + +export default Columnbefore; diff --git a/packages/components/src/components/Icons/ColumndeleteIcon.tsx b/packages/components/src/components/Icons/ColumndeleteIcon.tsx new file mode 100644 index 0000000000..7c9542d12e --- /dev/null +++ b/packages/components/src/components/Icons/ColumndeleteIcon.tsx @@ -0,0 +1,20 @@ +import Icon from '../Icon/Icon'; +import type { IconPropsWithoutChildren } from '../Icon/Icon'; + +const Columndelete = (props: IconPropsWithoutChildren) => { + return ( + + + + + + + ); +}; + +export default Columndelete; diff --git a/packages/components/src/components/Icons/ColumnsIcon.tsx b/packages/components/src/components/Icons/ColumnsIcon.tsx new file mode 100644 index 0000000000..8ca71bb07b --- /dev/null +++ b/packages/components/src/components/Icons/ColumnsIcon.tsx @@ -0,0 +1,23 @@ +import Icon from '../Icon/Icon'; +import type { IconPropsWithoutChildren } from '../Icon/Icon'; + +const Columns = (props: IconPropsWithoutChildren) => { + return ( + + + + + + ); +}; + +export default Columns; diff --git a/packages/components/src/components/Icons/CopyIcon.tsx b/packages/components/src/components/Icons/CopyIcon.tsx new file mode 100644 index 0000000000..4708a33e78 --- /dev/null +++ b/packages/components/src/components/Icons/CopyIcon.tsx @@ -0,0 +1,24 @@ +import Icon from '../Icon/Icon'; +import type { IconPropsWithoutChildren } from '../Icon/Icon'; + +const Copy = (props: IconPropsWithoutChildren) => { + return ( + + + + + + + ); +}; + +export default Copy; diff --git a/packages/components/src/components/Icons/CutIcon.tsx b/packages/components/src/components/Icons/CutIcon.tsx new file mode 100644 index 0000000000..b47ec2629d --- /dev/null +++ b/packages/components/src/components/Icons/CutIcon.tsx @@ -0,0 +1,23 @@ +import Icon from '../Icon/Icon'; +import type { IconPropsWithoutChildren } from '../Icon/Icon'; + +const Cut = (props: IconPropsWithoutChildren) => { + return ( + + + + + + ); +}; + +export default Cut; diff --git a/packages/components/src/components/Icons/DashIcon.tsx b/packages/components/src/components/Icons/DashIcon.tsx new file mode 100644 index 0000000000..3395c9446e --- /dev/null +++ b/packages/components/src/components/Icons/DashIcon.tsx @@ -0,0 +1,19 @@ +import Icon from '../Icon/Icon'; +import type { IconPropsWithoutChildren } from '../Icon/Icon'; + +const Dash = (props: IconPropsWithoutChildren) => { + return ( + + + + + + ); +}; + +export default Dash; diff --git a/packages/components/src/components/Icons/DiscussionIcon.tsx b/packages/components/src/components/Icons/DiscussionIcon.tsx new file mode 100644 index 0000000000..eea7ae1123 --- /dev/null +++ b/packages/components/src/components/Icons/DiscussionIcon.tsx @@ -0,0 +1,23 @@ +import Icon from '../Icon/Icon'; +import type { IconPropsWithoutChildren } from '../Icon/Icon'; + +const Discussion = (props: IconPropsWithoutChildren) => { + return ( + + + + + + ); +}; + +export default Discussion; diff --git a/packages/components/src/components/Icons/DraggableIcon.tsx b/packages/components/src/components/Icons/DraggableIcon.tsx new file mode 100644 index 0000000000..5adbcea16c --- /dev/null +++ b/packages/components/src/components/Icons/DraggableIcon.tsx @@ -0,0 +1,23 @@ +import Icon from '../Icon/Icon'; +import type { IconPropsWithoutChildren } from '../Icon/Icon'; + +const Draggable = (props: IconPropsWithoutChildren) => { + return ( + + + + + + ); +}; + +export default Draggable; diff --git a/packages/components/src/components/Icons/EditIcon.tsx b/packages/components/src/components/Icons/EditIcon.tsx new file mode 100644 index 0000000000..8497b0525b --- /dev/null +++ b/packages/components/src/components/Icons/EditIcon.tsx @@ -0,0 +1,24 @@ +import Icon from '../Icon/Icon'; +import type { IconPropsWithoutChildren } from '../Icon/Icon'; + +const Edit = (props: IconPropsWithoutChildren) => { + return ( + + + + + + + ); +}; + +export default Edit; diff --git a/packages/components/src/components/Icons/EyeIcon.tsx b/packages/components/src/components/Icons/EyeIcon.tsx new file mode 100644 index 0000000000..195826866a --- /dev/null +++ b/packages/components/src/components/Icons/EyeIcon.tsx @@ -0,0 +1,24 @@ +import Icon from '../Icon/Icon'; +import type { IconPropsWithoutChildren } from '../Icon/Icon'; + +const Eye = (props: IconPropsWithoutChildren) => { + return ( + + + + + + + ); +}; + +export default Eye; diff --git a/packages/components/src/components/Icons/FilterIcon.tsx b/packages/components/src/components/Icons/FilterIcon.tsx new file mode 100644 index 0000000000..398b4b6257 --- /dev/null +++ b/packages/components/src/components/Icons/FilterIcon.tsx @@ -0,0 +1,24 @@ +import Icon from '../Icon/Icon'; +import type { IconPropsWithoutChildren } from '../Icon/Icon'; + +const Filter = (props: IconPropsWithoutChildren) => { + return ( + + + + + + + ); +}; + +export default Filter; diff --git a/packages/components/src/components/Icons/FolderIcon.tsx b/packages/components/src/components/Icons/FolderIcon.tsx new file mode 100644 index 0000000000..fde589bff4 --- /dev/null +++ b/packages/components/src/components/Icons/FolderIcon.tsx @@ -0,0 +1,23 @@ +import Icon from '../Icon/Icon'; +import type { IconPropsWithoutChildren } from '../Icon/Icon'; + +const Folder = (props: IconPropsWithoutChildren) => { + return ( + + + + + + ); +}; + +export default Folder; diff --git a/packages/components/src/components/Icons/FooterIcon.tsx b/packages/components/src/components/Icons/FooterIcon.tsx new file mode 100644 index 0000000000..7679f0342b --- /dev/null +++ b/packages/components/src/components/Icons/FooterIcon.tsx @@ -0,0 +1,24 @@ +import Icon from '../Icon/Icon'; +import type { IconPropsWithoutChildren } from '../Icon/Icon'; + +const Footer = (props: IconPropsWithoutChildren) => { + return ( + + + + + + + ); +}; + +export default Footer; diff --git a/packages/components/src/components/Icons/ForegroundIcon.tsx b/packages/components/src/components/Icons/ForegroundIcon.tsx new file mode 100644 index 0000000000..5bc9509973 --- /dev/null +++ b/packages/components/src/components/Icons/ForegroundIcon.tsx @@ -0,0 +1,23 @@ +import Icon from '../Icon/Icon'; +import type { IconPropsWithoutChildren } from '../Icon/Icon'; + +const Foreground = (props: IconPropsWithoutChildren) => { + return ( + + + + + + ); +}; + +export default Foreground; diff --git a/packages/components/src/components/Icons/FullscreenIcon.tsx b/packages/components/src/components/Icons/FullscreenIcon.tsx new file mode 100644 index 0000000000..38eac5c231 --- /dev/null +++ b/packages/components/src/components/Icons/FullscreenIcon.tsx @@ -0,0 +1,19 @@ +import Icon from '../Icon/Icon'; +import type { IconPropsWithoutChildren } from '../Icon/Icon'; + +const Fullscreen = (props: IconPropsWithoutChildren) => { + return ( + + + + + + ); +}; + +export default Fullscreen; diff --git a/packages/components/src/components/Icons/HighlightIcon.tsx b/packages/components/src/components/Icons/HighlightIcon.tsx new file mode 100644 index 0000000000..5a7722f54e --- /dev/null +++ b/packages/components/src/components/Icons/HighlightIcon.tsx @@ -0,0 +1,25 @@ +import Icon from '../Icon/Icon'; +import type { IconPropsWithoutChildren } from '../Icon/Icon'; + +const Highlight = (props: IconPropsWithoutChildren) => { + return ( + + + + + + + + ); +}; + +export default Highlight; diff --git a/packages/components/src/components/Icons/HistoryIcon.tsx b/packages/components/src/components/Icons/HistoryIcon.tsx new file mode 100644 index 0000000000..e2bee8f575 --- /dev/null +++ b/packages/components/src/components/Icons/HistoryIcon.tsx @@ -0,0 +1,20 @@ +import Icon from '../Icon/Icon'; +import type { IconPropsWithoutChildren } from '../Icon/Icon'; + +const History = (props: IconPropsWithoutChildren) => { + return ( + + + + + + + ); +}; + +export default History; diff --git a/packages/components/src/components/Icons/HomeIcon.tsx b/packages/components/src/components/Icons/HomeIcon.tsx new file mode 100644 index 0000000000..08d384a0e8 --- /dev/null +++ b/packages/components/src/components/Icons/HomeIcon.tsx @@ -0,0 +1,23 @@ +import Icon from '../Icon/Icon'; +import type { IconPropsWithoutChildren } from '../Icon/Icon'; + +const Home = (props: IconPropsWithoutChildren) => { + return ( + + + + + + ); +}; + +export default Home; diff --git a/packages/components/src/components/Icons/ImageIcon.tsx b/packages/components/src/components/Icons/ImageIcon.tsx new file mode 100644 index 0000000000..3389aaf4f3 --- /dev/null +++ b/packages/components/src/components/Icons/ImageIcon.tsx @@ -0,0 +1,24 @@ +import Icon from '../Icon/Icon'; +import type { IconPropsWithoutChildren } from '../Icon/Icon'; + +const Image = (props: IconPropsWithoutChildren) => { + return ( + + + + + + + ); +}; + +export default Image; diff --git a/packages/components/src/components/Icons/ImagefitIcon.tsx b/packages/components/src/components/Icons/ImagefitIcon.tsx new file mode 100644 index 0000000000..605a750129 --- /dev/null +++ b/packages/components/src/components/Icons/ImagefitIcon.tsx @@ -0,0 +1,25 @@ +import Icon from '../Icon/Icon'; +import type { IconPropsWithoutChildren } from '../Icon/Icon'; + +const Imagefit = (props: IconPropsWithoutChildren) => { + return ( + + + + + + + + ); +}; + +export default Imagefit; diff --git a/packages/components/src/components/Icons/ImagefullIcon.tsx b/packages/components/src/components/Icons/ImagefullIcon.tsx new file mode 100644 index 0000000000..60242f5795 --- /dev/null +++ b/packages/components/src/components/Icons/ImagefullIcon.tsx @@ -0,0 +1,25 @@ +import Icon from '../Icon/Icon'; +import type { IconPropsWithoutChildren } from '../Icon/Icon'; + +const Imagefull = (props: IconPropsWithoutChildren) => { + return ( + + + + + + + + ); +}; + +export default Imagefull; diff --git a/packages/components/src/components/Icons/ImageleftIcon.tsx b/packages/components/src/components/Icons/ImageleftIcon.tsx new file mode 100644 index 0000000000..a0423c3387 --- /dev/null +++ b/packages/components/src/components/Icons/ImageleftIcon.tsx @@ -0,0 +1,24 @@ +import Icon from '../Icon/Icon'; +import type { IconPropsWithoutChildren } from '../Icon/Icon'; + +const Imageleft = (props: IconPropsWithoutChildren) => { + return ( + + + + + + + ); +}; + +export default Imageleft; diff --git a/packages/components/src/components/Icons/ImagerightIcon.tsx b/packages/components/src/components/Icons/ImagerightIcon.tsx new file mode 100644 index 0000000000..95f89f7b57 --- /dev/null +++ b/packages/components/src/components/Icons/ImagerightIcon.tsx @@ -0,0 +1,24 @@ +import Icon from '../Icon/Icon'; +import type { IconPropsWithoutChildren } from '../Icon/Icon'; + +const Imageright = (props: IconPropsWithoutChildren) => { + return ( + + + + + + + ); +}; + +export default Imageright; diff --git a/packages/components/src/components/Icons/InfoIcon.tsx b/packages/components/src/components/Icons/InfoIcon.tsx new file mode 100644 index 0000000000..3e81d7a441 --- /dev/null +++ b/packages/components/src/components/Icons/InfoIcon.tsx @@ -0,0 +1,24 @@ +import Icon from '../Icon/Icon'; +import type { IconPropsWithoutChildren } from '../Icon/Icon'; + +const Info = (props: IconPropsWithoutChildren) => { + return ( + + + + + + + ); +}; + +export default Info; diff --git a/packages/components/src/components/Icons/ItalicIcon.tsx b/packages/components/src/components/Icons/ItalicIcon.tsx new file mode 100644 index 0000000000..8b64fbc372 --- /dev/null +++ b/packages/components/src/components/Icons/ItalicIcon.tsx @@ -0,0 +1,23 @@ +import Icon from '../Icon/Icon'; +import type { IconPropsWithoutChildren } from '../Icon/Icon'; + +const Italic = (props: IconPropsWithoutChildren) => { + return ( + + + + + + ); +}; + +export default Italic; diff --git a/packages/components/src/components/Icons/LanguageIcon.tsx b/packages/components/src/components/Icons/LanguageIcon.tsx new file mode 100644 index 0000000000..116cbf96e1 --- /dev/null +++ b/packages/components/src/components/Icons/LanguageIcon.tsx @@ -0,0 +1,23 @@ +import Icon from '../Icon/Icon'; +import type { IconPropsWithoutChildren } from '../Icon/Icon'; + +const Language = (props: IconPropsWithoutChildren) => { + return ( + + + + + + ); +}; + +export default Language; diff --git a/packages/components/src/components/Icons/LeadingIcon.tsx b/packages/components/src/components/Icons/LeadingIcon.tsx new file mode 100644 index 0000000000..7d7d462218 --- /dev/null +++ b/packages/components/src/components/Icons/LeadingIcon.tsx @@ -0,0 +1,24 @@ +import Icon from '../Icon/Icon'; +import type { IconPropsWithoutChildren } from '../Icon/Icon'; + +const Leading = (props: IconPropsWithoutChildren) => { + return ( + + + + + + + ); +}; + +export default Leading; diff --git a/packages/components/src/components/Icons/LeadingimageIcon.tsx b/packages/components/src/components/Icons/LeadingimageIcon.tsx new file mode 100644 index 0000000000..d7b0504057 --- /dev/null +++ b/packages/components/src/components/Icons/LeadingimageIcon.tsx @@ -0,0 +1,23 @@ +import Icon from '../Icon/Icon'; +import type { IconPropsWithoutChildren } from '../Icon/Icon'; + +const Leadingimage = (props: IconPropsWithoutChildren) => { + return ( + + + + + + ); +}; + +export default Leadingimage; diff --git a/packages/components/src/components/Icons/LinkIcon.tsx b/packages/components/src/components/Icons/LinkIcon.tsx new file mode 100644 index 0000000000..9d05d5223e --- /dev/null +++ b/packages/components/src/components/Icons/LinkIcon.tsx @@ -0,0 +1,20 @@ +import Icon from '../Icon/Icon'; +import type { IconPropsWithoutChildren } from '../Icon/Icon'; + +const Link = (props: IconPropsWithoutChildren) => { + return ( + + + + + + + ); +}; + +export default Link; diff --git a/packages/components/src/components/Icons/ListIcon.tsx b/packages/components/src/components/Icons/ListIcon.tsx new file mode 100644 index 0000000000..f9b7a94d88 --- /dev/null +++ b/packages/components/src/components/Icons/ListIcon.tsx @@ -0,0 +1,19 @@ +import Icon from '../Icon/Icon'; +import type { IconPropsWithoutChildren } from '../Icon/Icon'; + +const List = (props: IconPropsWithoutChildren) => { + return ( + + + + + + ); +}; + +export default List; diff --git a/packages/components/src/components/Icons/ListnumbersIcon.tsx b/packages/components/src/components/Icons/ListnumbersIcon.tsx new file mode 100644 index 0000000000..126dc20374 --- /dev/null +++ b/packages/components/src/components/Icons/ListnumbersIcon.tsx @@ -0,0 +1,19 @@ +import Icon from '../Icon/Icon'; +import type { IconPropsWithoutChildren } from '../Icon/Icon'; + +const Listnumbers = (props: IconPropsWithoutChildren) => { + return ( + + + + + + ); +}; + +export default Listnumbers; diff --git a/packages/components/src/components/Icons/MailIcon.tsx b/packages/components/src/components/Icons/MailIcon.tsx new file mode 100644 index 0000000000..79e0530772 --- /dev/null +++ b/packages/components/src/components/Icons/MailIcon.tsx @@ -0,0 +1,23 @@ +import Icon from '../Icon/Icon'; +import type { IconPropsWithoutChildren } from '../Icon/Icon'; + +const Mail = (props: IconPropsWithoutChildren) => { + return ( + + + + + + ); +}; + +export default Mail; diff --git a/packages/components/src/components/Icons/MandatoryIcon.tsx b/packages/components/src/components/Icons/MandatoryIcon.tsx new file mode 100644 index 0000000000..2f5f894f74 --- /dev/null +++ b/packages/components/src/components/Icons/MandatoryIcon.tsx @@ -0,0 +1,23 @@ +import Icon from '../Icon/Icon'; +import type { IconPropsWithoutChildren } from '../Icon/Icon'; + +const Mandatory = (props: IconPropsWithoutChildren) => { + return ( + + + + + + ); +}; + +export default Mandatory; diff --git a/packages/components/src/components/Icons/MapIcon.tsx b/packages/components/src/components/Icons/MapIcon.tsx new file mode 100644 index 0000000000..5b6d46dcf8 --- /dev/null +++ b/packages/components/src/components/Icons/MapIcon.tsx @@ -0,0 +1,24 @@ +import Icon from '../Icon/Icon'; +import type { IconPropsWithoutChildren } from '../Icon/Icon'; + +const Map = (props: IconPropsWithoutChildren) => { + return ( + + + + + + + ); +}; + +export default Map; diff --git a/packages/components/src/components/Icons/MenuIcon.tsx b/packages/components/src/components/Icons/MenuIcon.tsx new file mode 100644 index 0000000000..fc8c265baa --- /dev/null +++ b/packages/components/src/components/Icons/MenuIcon.tsx @@ -0,0 +1,19 @@ +import Icon from '../Icon/Icon'; +import type { IconPropsWithoutChildren } from '../Icon/Icon'; + +const Menu = (props: IconPropsWithoutChildren) => { + return ( + + + + + + ); +}; + +export default Menu; diff --git a/packages/components/src/components/Icons/MergedIcon.tsx b/packages/components/src/components/Icons/MergedIcon.tsx new file mode 100644 index 0000000000..924a2efddc --- /dev/null +++ b/packages/components/src/components/Icons/MergedIcon.tsx @@ -0,0 +1,23 @@ +import Icon from '../Icon/Icon'; +import type { IconPropsWithoutChildren } from '../Icon/Icon'; + +const Merged = (props: IconPropsWithoutChildren) => { + return ( + + + + + + ); +}; + +export default Merged; diff --git a/packages/components/src/components/Icons/MoreoptionsIcon.tsx b/packages/components/src/components/Icons/MoreoptionsIcon.tsx new file mode 100644 index 0000000000..de29db780c --- /dev/null +++ b/packages/components/src/components/Icons/MoreoptionsIcon.tsx @@ -0,0 +1,19 @@ +import Icon from '../Icon/Icon'; +import type { IconPropsWithoutChildren } from '../Icon/Icon'; + +const Moreoptions = (props: IconPropsWithoutChildren) => { + return ( + + + + + + ); +}; + +export default Moreoptions; diff --git a/packages/components/src/components/Icons/NavigationIcon.tsx b/packages/components/src/components/Icons/NavigationIcon.tsx new file mode 100644 index 0000000000..5994b3f4e8 --- /dev/null +++ b/packages/components/src/components/Icons/NavigationIcon.tsx @@ -0,0 +1,19 @@ +import Icon from '../Icon/Icon'; +import type { IconPropsWithoutChildren } from '../Icon/Icon'; + +const Navigation = (props: IconPropsWithoutChildren) => { + return ( + + + + + + ); +}; + +export default Navigation; diff --git a/packages/components/src/components/Icons/NewsIcon.tsx b/packages/components/src/components/Icons/NewsIcon.tsx new file mode 100644 index 0000000000..9cf475f071 --- /dev/null +++ b/packages/components/src/components/Icons/NewsIcon.tsx @@ -0,0 +1,29 @@ +import Icon from '../Icon/Icon'; +import type { IconPropsWithoutChildren } from '../Icon/Icon'; + +const News = (props: IconPropsWithoutChildren) => { + return ( + + + + + + + + ); +}; + +export default News; diff --git a/packages/components/src/components/Icons/OutIcon.tsx b/packages/components/src/components/Icons/OutIcon.tsx new file mode 100644 index 0000000000..213a19aad3 --- /dev/null +++ b/packages/components/src/components/Icons/OutIcon.tsx @@ -0,0 +1,20 @@ +import Icon from '../Icon/Icon'; +import type { IconPropsWithoutChildren } from '../Icon/Icon'; + +const Out = (props: IconPropsWithoutChildren) => { + return ( + + + + + + + ); +}; + +export default Out; diff --git a/packages/components/src/components/Icons/PageIcon.tsx b/packages/components/src/components/Icons/PageIcon.tsx new file mode 100644 index 0000000000..1324f23173 --- /dev/null +++ b/packages/components/src/components/Icons/PageIcon.tsx @@ -0,0 +1,23 @@ +import Icon from '../Icon/Icon'; +import type { IconPropsWithoutChildren } from '../Icon/Icon'; + +const Page = (props: IconPropsWithoutChildren) => { + return ( + + + + + + ); +}; + +export default Page; diff --git a/packages/components/src/components/Icons/ParagraphIcon.tsx b/packages/components/src/components/Icons/ParagraphIcon.tsx new file mode 100644 index 0000000000..acf878f75f --- /dev/null +++ b/packages/components/src/components/Icons/ParagraphIcon.tsx @@ -0,0 +1,23 @@ +import Icon from '../Icon/Icon'; +import type { IconPropsWithoutChildren } from '../Icon/Icon'; + +const Paragraph = (props: IconPropsWithoutChildren) => { + return ( + + + + + + ); +}; + +export default Paragraph; diff --git a/packages/components/src/components/Icons/PasteIcon.tsx b/packages/components/src/components/Icons/PasteIcon.tsx new file mode 100644 index 0000000000..60fcb22d7a --- /dev/null +++ b/packages/components/src/components/Icons/PasteIcon.tsx @@ -0,0 +1,20 @@ +import Icon from '../Icon/Icon'; +import type { IconPropsWithoutChildren } from '../Icon/Icon'; + +const Paste = (props: IconPropsWithoutChildren) => { + return ( + + + + + + + ); +}; + +export default Paste; diff --git a/packages/components/src/components/Icons/PauseIcon.tsx b/packages/components/src/components/Icons/PauseIcon.tsx new file mode 100644 index 0000000000..5407bc9db4 --- /dev/null +++ b/packages/components/src/components/Icons/PauseIcon.tsx @@ -0,0 +1,24 @@ +import Icon from '../Icon/Icon'; +import type { IconPropsWithoutChildren } from '../Icon/Icon'; + +const Pause = (props: IconPropsWithoutChildren) => { + return ( + + + + + + + ); +}; + +export default Pause; diff --git a/packages/components/src/components/Icons/PencilIcon.tsx b/packages/components/src/components/Icons/PencilIcon.tsx new file mode 100644 index 0000000000..29856a530a --- /dev/null +++ b/packages/components/src/components/Icons/PencilIcon.tsx @@ -0,0 +1,23 @@ +import Icon from '../Icon/Icon'; +import type { IconPropsWithoutChildren } from '../Icon/Icon'; + +const Pencil = (props: IconPropsWithoutChildren) => { + return ( + + + + + + ); +}; + +export default Pencil; diff --git a/packages/components/src/components/Icons/PlayIcon.tsx b/packages/components/src/components/Icons/PlayIcon.tsx new file mode 100644 index 0000000000..5d5749149e --- /dev/null +++ b/packages/components/src/components/Icons/PlayIcon.tsx @@ -0,0 +1,24 @@ +import Icon from '../Icon/Icon'; +import type { IconPropsWithoutChildren } from '../Icon/Icon'; + +const Play = (props: IconPropsWithoutChildren) => { + return ( + + + + + + + ); +}; + +export default Play; diff --git a/packages/components/src/components/Icons/PropertiesIcon.tsx b/packages/components/src/components/Icons/PropertiesIcon.tsx new file mode 100644 index 0000000000..04126cc94d --- /dev/null +++ b/packages/components/src/components/Icons/PropertiesIcon.tsx @@ -0,0 +1,19 @@ +import Icon from '../Icon/Icon'; +import type { IconPropsWithoutChildren } from '../Icon/Icon'; + +const Properties = (props: IconPropsWithoutChildren) => { + return ( + + + + + + ); +}; + +export default Properties; diff --git a/packages/components/src/components/Icons/QuotesIcon.tsx b/packages/components/src/components/Icons/QuotesIcon.tsx new file mode 100644 index 0000000000..38c019de58 --- /dev/null +++ b/packages/components/src/components/Icons/QuotesIcon.tsx @@ -0,0 +1,23 @@ +import Icon from '../Icon/Icon'; +import type { IconPropsWithoutChildren } from '../Icon/Icon'; + +const Quotes = (props: IconPropsWithoutChildren) => { + return ( + + + + + + ); +}; + +export default Quotes; diff --git a/packages/components/src/components/Icons/RadiobuttonIcon.tsx b/packages/components/src/components/Icons/RadiobuttonIcon.tsx new file mode 100644 index 0000000000..edea14944a --- /dev/null +++ b/packages/components/src/components/Icons/RadiobuttonIcon.tsx @@ -0,0 +1,23 @@ +import Icon from '../Icon/Icon'; +import type { IconPropsWithoutChildren } from '../Icon/Icon'; + +const Radiobutton = (props: IconPropsWithoutChildren) => { + return ( + + + + + + ); +}; + +export default Radiobutton; diff --git a/packages/components/src/components/Icons/RedoIcon.tsx b/packages/components/src/components/Icons/RedoIcon.tsx new file mode 100644 index 0000000000..6fc9f49edb --- /dev/null +++ b/packages/components/src/components/Icons/RedoIcon.tsx @@ -0,0 +1,23 @@ +import Icon from '../Icon/Icon'; +import type { IconPropsWithoutChildren } from '../Icon/Icon'; + +const Redo = (props: IconPropsWithoutChildren) => { + return ( + + + + + + ); +}; + +export default Redo; diff --git a/packages/components/src/components/Icons/RenameIcon.tsx b/packages/components/src/components/Icons/RenameIcon.tsx new file mode 100644 index 0000000000..5f761d1fe4 --- /dev/null +++ b/packages/components/src/components/Icons/RenameIcon.tsx @@ -0,0 +1,24 @@ +import Icon from '../Icon/Icon'; +import type { IconPropsWithoutChildren } from '../Icon/Icon'; + +const Rename = (props: IconPropsWithoutChildren) => { + return ( + + + + + + + ); +}; + +export default Rename; diff --git a/packages/components/src/components/Icons/ReverseIcon.tsx b/packages/components/src/components/Icons/ReverseIcon.tsx new file mode 100644 index 0000000000..ac78ae5d1c --- /dev/null +++ b/packages/components/src/components/Icons/ReverseIcon.tsx @@ -0,0 +1,19 @@ +import Icon from '../Icon/Icon'; +import type { IconPropsWithoutChildren } from '../Icon/Icon'; + +const Reverse = (props: IconPropsWithoutChildren) => { + return ( + + + + + + ); +}; + +export default Reverse; diff --git a/packages/components/src/components/Icons/ReviewIcon.tsx b/packages/components/src/components/Icons/ReviewIcon.tsx new file mode 100644 index 0000000000..b11aa88d41 --- /dev/null +++ b/packages/components/src/components/Icons/ReviewIcon.tsx @@ -0,0 +1,24 @@ +import Icon from '../Icon/Icon'; +import type { IconPropsWithoutChildren } from '../Icon/Icon'; + +const Review = (props: IconPropsWithoutChildren) => { + return ( + + + + + + + ); +}; + +export default Review; diff --git a/packages/components/src/components/Icons/RowafterIcon.tsx b/packages/components/src/components/Icons/RowafterIcon.tsx new file mode 100644 index 0000000000..1ddd0751a4 --- /dev/null +++ b/packages/components/src/components/Icons/RowafterIcon.tsx @@ -0,0 +1,25 @@ +import Icon from '../Icon/Icon'; +import type { IconPropsWithoutChildren } from '../Icon/Icon'; + +const Rowafter = (props: IconPropsWithoutChildren) => { + return ( + + + + + + + + ); +}; + +export default Rowafter; diff --git a/packages/components/src/components/Icons/RowbeforeIcon.tsx b/packages/components/src/components/Icons/RowbeforeIcon.tsx new file mode 100644 index 0000000000..203d699ab1 --- /dev/null +++ b/packages/components/src/components/Icons/RowbeforeIcon.tsx @@ -0,0 +1,24 @@ +import Icon from '../Icon/Icon'; +import type { IconPropsWithoutChildren } from '../Icon/Icon'; + +const Rowbefore = (props: IconPropsWithoutChildren) => { + return ( + + + + + + + ); +}; + +export default Rowbefore; diff --git a/packages/components/src/components/Icons/RowdeleteIcon.tsx b/packages/components/src/components/Icons/RowdeleteIcon.tsx new file mode 100644 index 0000000000..33c07a1de4 --- /dev/null +++ b/packages/components/src/components/Icons/RowdeleteIcon.tsx @@ -0,0 +1,20 @@ +import Icon from '../Icon/Icon'; +import type { IconPropsWithoutChildren } from '../Icon/Icon'; + +const Rowdelete = (props: IconPropsWithoutChildren) => { + return ( + + + + + + + ); +}; + +export default Rowdelete; diff --git a/packages/components/src/components/Icons/SearchIcon.tsx b/packages/components/src/components/Icons/SearchIcon.tsx new file mode 100644 index 0000000000..69d60319af --- /dev/null +++ b/packages/components/src/components/Icons/SearchIcon.tsx @@ -0,0 +1,23 @@ +import Icon from '../Icon/Icon'; +import type { IconPropsWithoutChildren } from '../Icon/Icon'; + +const Search = (props: IconPropsWithoutChildren) => { + return ( + + + + + + ); +}; + +export default Search; diff --git a/packages/components/src/components/Icons/SecurityIcon.tsx b/packages/components/src/components/Icons/SecurityIcon.tsx new file mode 100644 index 0000000000..ddc34ad9bd --- /dev/null +++ b/packages/components/src/components/Icons/SecurityIcon.tsx @@ -0,0 +1,23 @@ +import Icon from '../Icon/Icon'; +import type { IconPropsWithoutChildren } from '../Icon/Icon'; + +const Security = (props: IconPropsWithoutChildren) => { + return ( + + + + + + ); +}; + +export default Security; diff --git a/packages/components/src/components/Icons/SettingsIcon.tsx b/packages/components/src/components/Icons/SettingsIcon.tsx new file mode 100644 index 0000000000..69c5d3337b --- /dev/null +++ b/packages/components/src/components/Icons/SettingsIcon.tsx @@ -0,0 +1,24 @@ +import Icon from '../Icon/Icon'; +import type { IconPropsWithoutChildren } from '../Icon/Icon'; + +const Settings = (props: IconPropsWithoutChildren) => { + return ( + + + + + + + ); +}; + +export default Settings; diff --git a/packages/components/src/components/Icons/ShareIcon.tsx b/packages/components/src/components/Icons/ShareIcon.tsx new file mode 100644 index 0000000000..5eefbe74dd --- /dev/null +++ b/packages/components/src/components/Icons/ShareIcon.tsx @@ -0,0 +1,24 @@ +import Icon from '../Icon/Icon'; +import type { IconPropsWithoutChildren } from '../Icon/Icon'; + +const Share = (props: IconPropsWithoutChildren) => { + return ( + + + + + + + ); +}; + +export default Share; diff --git a/packages/components/src/components/Icons/SliderIcon.tsx b/packages/components/src/components/Icons/SliderIcon.tsx new file mode 100644 index 0000000000..031cf1b20a --- /dev/null +++ b/packages/components/src/components/Icons/SliderIcon.tsx @@ -0,0 +1,25 @@ +import Icon from '../Icon/Icon'; +import type { IconPropsWithoutChildren } from '../Icon/Icon'; + +const Slider = (props: IconPropsWithoutChildren) => { + return ( + + + + + + + + ); +}; + +export default Slider; diff --git a/packages/components/src/components/Icons/SocialIcon.tsx b/packages/components/src/components/Icons/SocialIcon.tsx new file mode 100644 index 0000000000..04bafc3e1a --- /dev/null +++ b/packages/components/src/components/Icons/SocialIcon.tsx @@ -0,0 +1,28 @@ +import Icon from '../Icon/Icon'; +import type { IconPropsWithoutChildren } from '../Icon/Icon'; + +const Social = (props: IconPropsWithoutChildren) => { + return ( + + + + + + + ); +}; + +export default Social; diff --git a/packages/components/src/components/Icons/SpacerIcon.tsx b/packages/components/src/components/Icons/SpacerIcon.tsx new file mode 100644 index 0000000000..5487aeb1ec --- /dev/null +++ b/packages/components/src/components/Icons/SpacerIcon.tsx @@ -0,0 +1,19 @@ +import Icon from '../Icon/Icon'; +import type { IconPropsWithoutChildren } from '../Icon/Icon'; + +const Spacer = (props: IconPropsWithoutChildren) => { + return ( + + + + + + ); +}; + +export default Spacer; diff --git a/packages/components/src/components/Icons/StateIcon.tsx b/packages/components/src/components/Icons/StateIcon.tsx new file mode 100644 index 0000000000..f54e491ba8 --- /dev/null +++ b/packages/components/src/components/Icons/StateIcon.tsx @@ -0,0 +1,24 @@ +import Icon from '../Icon/Icon'; +import type { IconPropsWithoutChildren } from '../Icon/Icon'; + +const State = (props: IconPropsWithoutChildren) => { + return ( + + + + + + + ); +}; + +export default State; diff --git a/packages/components/src/components/Icons/SubtitleIcon.tsx b/packages/components/src/components/Icons/SubtitleIcon.tsx new file mode 100644 index 0000000000..43e49f3105 --- /dev/null +++ b/packages/components/src/components/Icons/SubtitleIcon.tsx @@ -0,0 +1,24 @@ +import Icon from '../Icon/Icon'; +import type { IconPropsWithoutChildren } from '../Icon/Icon'; + +const Subtitle = (props: IconPropsWithoutChildren) => { + return ( + + + + + + + ); +}; + +export default Subtitle; diff --git a/packages/components/src/components/Icons/TableIcon.tsx b/packages/components/src/components/Icons/TableIcon.tsx new file mode 100644 index 0000000000..3eaf0c1e69 --- /dev/null +++ b/packages/components/src/components/Icons/TableIcon.tsx @@ -0,0 +1,23 @@ +import Icon from '../Icon/Icon'; +import type { IconPropsWithoutChildren } from '../Icon/Icon'; + +const Table = (props: IconPropsWithoutChildren) => { + return ( + + + + + + ); +}; + +export default Table; diff --git a/packages/components/src/components/Icons/TagIcon.tsx b/packages/components/src/components/Icons/TagIcon.tsx new file mode 100644 index 0000000000..58ea58908f --- /dev/null +++ b/packages/components/src/components/Icons/TagIcon.tsx @@ -0,0 +1,24 @@ +import Icon from '../Icon/Icon'; +import type { IconPropsWithoutChildren } from '../Icon/Icon'; + +const Tag = (props: IconPropsWithoutChildren) => { + return ( + + + + + + + ); +}; + +export default Tag; diff --git a/packages/components/src/components/Icons/TextIcon.tsx b/packages/components/src/components/Icons/TextIcon.tsx new file mode 100644 index 0000000000..ae444ba410 --- /dev/null +++ b/packages/components/src/components/Icons/TextIcon.tsx @@ -0,0 +1,19 @@ +import Icon from '../Icon/Icon'; +import type { IconPropsWithoutChildren } from '../Icon/Icon'; + +const Text = (props: IconPropsWithoutChildren) => { + return ( + + + + + + ); +}; + +export default Text; diff --git a/packages/components/src/components/Icons/ThumbnailsIcon.tsx b/packages/components/src/components/Icons/ThumbnailsIcon.tsx new file mode 100644 index 0000000000..2cb93b61b2 --- /dev/null +++ b/packages/components/src/components/Icons/ThumbnailsIcon.tsx @@ -0,0 +1,23 @@ +import Icon from '../Icon/Icon'; +import type { IconPropsWithoutChildren } from '../Icon/Icon'; + +const Thumbnails = (props: IconPropsWithoutChildren) => { + return ( + + + + + + ); +}; + +export default Thumbnails; diff --git a/packages/components/src/components/Icons/TitleIcon.tsx b/packages/components/src/components/Icons/TitleIcon.tsx new file mode 100644 index 0000000000..3e72cda7b2 --- /dev/null +++ b/packages/components/src/components/Icons/TitleIcon.tsx @@ -0,0 +1,24 @@ +import Icon from '../Icon/Icon'; +import type { IconPropsWithoutChildren } from '../Icon/Icon'; + +const Title = (props: IconPropsWithoutChildren) => { + return ( + + + + + + + ); +}; + +export default Title; diff --git a/packages/components/src/components/Icons/TocIcon.tsx b/packages/components/src/components/Icons/TocIcon.tsx new file mode 100644 index 0000000000..28ce6260e1 --- /dev/null +++ b/packages/components/src/components/Icons/TocIcon.tsx @@ -0,0 +1,23 @@ +import Icon from '../Icon/Icon'; +import type { IconPropsWithoutChildren } from '../Icon/Icon'; + +const Toc = (props: IconPropsWithoutChildren) => { + return ( + + + + + + ); +}; + +export default Toc; diff --git a/packages/components/src/components/Icons/UndoIcon.tsx b/packages/components/src/components/Icons/UndoIcon.tsx new file mode 100644 index 0000000000..cc94c331c1 --- /dev/null +++ b/packages/components/src/components/Icons/UndoIcon.tsx @@ -0,0 +1,23 @@ +import Icon from '../Icon/Icon'; +import type { IconPropsWithoutChildren } from '../Icon/Icon'; + +const Undo = (props: IconPropsWithoutChildren) => { + return ( + + + + + + ); +}; + +export default Undo; diff --git a/packages/components/src/components/Icons/UploadIcon.tsx b/packages/components/src/components/Icons/UploadIcon.tsx new file mode 100644 index 0000000000..392cc7672b --- /dev/null +++ b/packages/components/src/components/Icons/UploadIcon.tsx @@ -0,0 +1,20 @@ +import Icon from '../Icon/Icon'; +import type { IconPropsWithoutChildren } from '../Icon/Icon'; + +const Upload = (props: IconPropsWithoutChildren) => { + return ( + + + + + + + ); +}; + +export default Upload; diff --git a/packages/components/src/components/Icons/UserIcon.tsx b/packages/components/src/components/Icons/UserIcon.tsx new file mode 100644 index 0000000000..ee73e4f519 --- /dev/null +++ b/packages/components/src/components/Icons/UserIcon.tsx @@ -0,0 +1,23 @@ +import Icon from '../Icon/Icon'; +import type { IconPropsWithoutChildren } from '../Icon/Icon'; + +const User = (props: IconPropsWithoutChildren) => { + return ( + + + + + + ); +}; + +export default User; diff --git a/packages/components/src/components/Icons/VideoIcon.tsx b/packages/components/src/components/Icons/VideoIcon.tsx new file mode 100644 index 0000000000..81682ead95 --- /dev/null +++ b/packages/components/src/components/Icons/VideoIcon.tsx @@ -0,0 +1,24 @@ +import Icon from '../Icon/Icon'; +import type { IconPropsWithoutChildren } from '../Icon/Icon'; + +const Video = (props: IconPropsWithoutChildren) => { + return ( + + + + + + + ); +}; + +export default Video; diff --git a/packages/components/src/components/Icons/VoltoIcon.tsx b/packages/components/src/components/Icons/VoltoIcon.tsx new file mode 100644 index 0000000000..1570f4a60a --- /dev/null +++ b/packages/components/src/components/Icons/VoltoIcon.tsx @@ -0,0 +1,25 @@ +import Icon from '../Icon/Icon'; +import type { IconPropsWithoutChildren } from '../Icon/Icon'; + +const Volto = (props: IconPropsWithoutChildren) => { + return ( + + + + + + + + ); +}; + +export default Volto; diff --git a/packages/components/src/components/Icons/WindowedIcon.tsx b/packages/components/src/components/Icons/WindowedIcon.tsx new file mode 100644 index 0000000000..6685018cfe --- /dev/null +++ b/packages/components/src/components/Icons/WindowedIcon.tsx @@ -0,0 +1,19 @@ +import Icon from '../Icon/Icon'; +import type { IconPropsWithoutChildren } from '../Icon/Icon'; + +const Windowed = (props: IconPropsWithoutChildren) => { + return ( + + + + + + ); +}; + +export default Windowed; diff --git a/packages/components/src/components/Icons/WorldIcon.tsx b/packages/components/src/components/Icons/WorldIcon.tsx new file mode 100644 index 0000000000..474c6e3de3 --- /dev/null +++ b/packages/components/src/components/Icons/WorldIcon.tsx @@ -0,0 +1,23 @@ +import Icon from '../Icon/Icon'; +import type { IconPropsWithoutChildren } from '../Icon/Icon'; + +const World = (props: IconPropsWithoutChildren) => { + return ( + + + + + + ); +}; + +export default World; diff --git a/packages/components/src/components/Input/Input.stories.tsx b/packages/components/src/components/Input/Input.stories.tsx new file mode 100644 index 0000000000..d24f6cc043 --- /dev/null +++ b/packages/components/src/components/Input/Input.stories.tsx @@ -0,0 +1,78 @@ +import InputComponent from './Input'; + +import type { Meta, StoryObj } from '@storybook/react'; + +// More on how to set up stories at: https://storybook.js.org/docs/7.0/react/writing-stories/introduction +const meta = { + title: 'Input', + component: InputComponent, + tags: ['autodocs'], + decorators: [ + (Story) => ( +
+ +
+ ), + ], + argTypes: { + // controlled value prop + value: { + control: { + disable: true, + }, + }, + }, +} satisfies Meta; + +export default meta; +type Story = StoryObj; + +// More on writing stories with args: https://storybook.js.org/docs/7.0/react/writing-stories/args +export const Default: Story = { + // render: (args) => , + args: { + name: 'field-empty', + title: 'field 1 title', + description: 'Optional help text', + placeholder: 'Type something…', + }, +}; + +export const Required: Story = { + args: { + ...Default.args, + name: 'field-required', + isRequired: true, + }, +}; + +export const Filled: Story = { + args: { + ...Default.args, + name: 'field-filled', + title: 'Filled field title', + value: 'Filled with value A', + isRequired: true, + }, +}; + +export const Errored: Story = { + args: { + ...Default.args, + name: 'field-errored', + title: 'Errored field title', + value: 'Filled with value A', + error: ['This is the error'], + isInvalid: true, + isRequired: true, + }, +}; + +export const Disabled: Story = { + args: { + ...Default.args, + name: 'field-disabled', + title: 'Disabled field title', + isDisabled: true, + }, +}; diff --git a/packages/components/src/components/Input/Input.test.tsx b/packages/components/src/components/Input/Input.test.tsx new file mode 100644 index 0000000000..ac716b0f4b --- /dev/null +++ b/packages/components/src/components/Input/Input.test.tsx @@ -0,0 +1,21 @@ +import { render } from '@testing-library/react'; +import { axe, toHaveNoViolations } from 'jest-axe'; +import Input from './Input'; + +expect.extend(toHaveNoViolations); + +it('Input basic a11y test', async () => { + const { container } = render( + , + ); + + const results = await axe(container); + + expect(results).toHaveNoViolations(); +}); diff --git a/packages/components/src/components/Input/Input.tsx b/packages/components/src/components/Input/Input.tsx new file mode 100644 index 0000000000..2d7ee2fa75 --- /dev/null +++ b/packages/components/src/components/Input/Input.tsx @@ -0,0 +1,40 @@ +import type { TextFieldProps } from 'react-aria-components'; +import { + FieldError, + Input as RACInput, + Label, + Text, + TextField, +} from 'react-aria-components'; +import cx from 'classnames'; + +interface InputProps extends TextFieldProps { + title?: string; + description?: string; + error?: string[]; + placeholder: string; +} + +export default function Input({ + title, + description, + error, + ...props +}: InputProps) { + return ( + + + + {error} + {description && ( + + {description} + + )} + + ); +} diff --git a/packages/components/src/components/Link/Link.stories.tsx b/packages/components/src/components/Link/Link.stories.tsx new file mode 100644 index 0000000000..290fffa1a9 --- /dev/null +++ b/packages/components/src/components/Link/Link.stories.tsx @@ -0,0 +1,27 @@ +import Link from './Link'; +import type { Meta, StoryObj } from '@storybook/react'; + +// More on how to set up stories at: https://storybook.js.org/docs/7.0/react/writing-stories/introduction +const meta = { + title: 'Link', + component: Link, + tags: ['autodocs'], + decorators: [ + (Story) => ( +
+ +
+ ), + ], +} satisfies Meta; + +export default meta; +type Story = StoryObj; + +// More on writing stories with args: https://storybook.js.org/docs/7.0/react/writing-stories/args +export const Default: Story = { + args: { + href: '/', + children: 'The link', + }, +}; diff --git a/packages/components/src/components/Link/Link.test.tsx b/packages/components/src/components/Link/Link.test.tsx new file mode 100644 index 0000000000..0bf16d7393 --- /dev/null +++ b/packages/components/src/components/Link/Link.test.tsx @@ -0,0 +1,17 @@ +import { expect, it } from 'vitest'; +import { render, screen } from '@testing-library/react'; +import { axe, toHaveNoViolations } from 'jest-axe'; +import Link from './Link'; + +expect.extend(toHaveNoViolations); + +it('Link basic a11y test', async () => { + const { container } = render(The link); + + const asd = screen.getByText('The link'); + expect(asd).toHaveAttribute('href', '/'); + + const results = await axe(container); + + expect(results).toHaveNoViolations(); +}); diff --git a/packages/components/src/components/Link/Link.tsx b/packages/components/src/components/Link/Link.tsx new file mode 100644 index 0000000000..393d1a8416 --- /dev/null +++ b/packages/components/src/components/Link/Link.tsx @@ -0,0 +1,19 @@ +import { forwardRef, ForwardedRef } from 'react'; +import { Link as RACLink, LinkProps } from 'react-aria-components'; +import { useFlattenToAppURL } from '../../providers/flattenToAppURL'; + +type forwardRefType = typeof forwardRef; + +const Link = (props: LinkProps, ref: ForwardedRef) => { + const { flattenToAppURL } = useFlattenToAppURL(); + const flattenedURL = flattenToAppURL(props.href); + + return ( + + {props.children} + + ); +}; + +const _Link = /*#__PURE__*/ (forwardRef as forwardRefType)(Link); +export { _Link as default }; diff --git a/packages/components/src/components/Select/Select.stories.tsx b/packages/components/src/components/Select/Select.stories.tsx new file mode 100644 index 0000000000..536e651965 --- /dev/null +++ b/packages/components/src/components/Select/Select.stories.tsx @@ -0,0 +1,169 @@ +import Select from './Select'; +import { SelectItem } from './SelectItem'; +import type { Meta, StoryObj } from '@storybook/react'; + +export interface SelectItemObject { + label: string; + value: string; +} + +// More on how to set up stories at: https://storybook.js.org/docs/7.0/react/writing-stories/introduction +const meta = { + title: 'Select', + component: Select, + tags: ['autodocs'], + decorators: [ + (Story) => ( +
+ +
+ ), + ], +} satisfies Meta; + +export default meta; +type Story = StoryObj; + +/** + * Select gets a fixed children as JSX + */ +export const Default: Story = { + args: { + name: 'field-empty', + title: 'field 1 title', + description: 'Optional help text', + placeholder: 'Select...', + children: ( + <> + Hello + Lorem Ipsum + + ), + }, +}; + +/** + * Select renders options via render props `(item)=> React.ReactNode` + */ +export const Items: Story = { + render: (args) => ( + // @ts-ignore I assume this is a storybook bug when passing args + + ), + args: { + name: 'field-empty', + title: 'field 1 title', + description: 'Optional help text', + placeholder: 'Select...', + items: [ + { label: '1', value: 'Aerospace' }, + { label: '2', value: 'Mechanical' }, + { label: '3', value: 'Civil' }, + { label: '4', value: 'Biomedical' }, + { label: '5', value: 'Nuclear' }, + { label: '6', value: 'Industrial' }, + { label: '7', value: 'Chemical' }, + { label: '8', value: 'Agricultural' }, + { label: '9', value: 'Electrical' }, + { label: '10', value: 'Telco' }, + ], + children: null, + }, +}; + +export const LotsOfItems: Story = { + render: (args) => ( + // @ts-ignore I assume this is a storybook bug when passing args + + ), + args: { + name: 'field-empty', + title: 'field 1 title', + description: 'Optional help text', + placeholder: 'Select...', + items: [ + { label: '1', value: 'Aerospace' }, + { label: '2', value: 'Mechanical' }, + { label: '3', value: 'Civil' }, + { label: '4', value: 'Biomedical' }, + { label: '5', value: 'Nuclear' }, + { label: '6', value: 'Industrial' }, + { label: '7', value: 'Chemical' }, + { label: '8', value: 'Agricultural' }, + { label: '9', value: 'Electrical' }, + { label: '10', value: 'Telco' }, + { label: '11', value: 'Aerospace' }, + { label: '12', value: 'Mechanical' }, + { label: '13', value: 'Civil' }, + { label: '14', value: 'Biomedical' }, + { label: '15', value: 'Nuclear' }, + { label: '16', value: 'Industrial' }, + { label: '17', value: 'Chemical' }, + { label: '18', value: 'Agricultural' }, + { label: '19', value: 'Electrical' }, + { label: '20', value: 'Telco' }, + { label: '21', value: 'Aerospace' }, + { label: '22', value: 'Mechanical' }, + { label: '23', value: 'Civil' }, + { label: '24', value: 'Biomedical' }, + { label: '25', value: 'Nuclear' }, + { label: '26', value: 'Industrial' }, + { label: '27', value: 'Chemical' }, + { label: '28', value: 'Agricultural' }, + { label: '29', value: 'Electrical' }, + { label: '30', value: 'Telco' }, + ], + children: null, + }, +}; + +export const Required: Story = { + ...Items, + args: { + ...Items.args, + name: 'field-required', + isRequired: true, + }, +}; + +export const Filled: Story = { + ...Items, + args: { + ...Items.args, + name: 'field-filled', + title: 'Filled field title', + defaultSelectedKey: '10', + isRequired: true, + }, +}; + +export const Errored: Story = { + ...Items, + args: { + ...Items.args, + name: 'field-errored', + title: 'Errored field title', + defaultSelectedKey: '10', + error: ['This is the error'], + isInvalid: true, + isRequired: true, + }, +}; + +export const Disabled: Story = { + ...Items, + args: { + ...Items.args, + name: 'field-disabled', + title: 'Disabled field title', + isDisabled: true, + }, +}; diff --git a/packages/components/src/components/Select/Select.test.tsx b/packages/components/src/components/Select/Select.test.tsx new file mode 100644 index 0000000000..ad3e4729b1 --- /dev/null +++ b/packages/components/src/components/Select/Select.test.tsx @@ -0,0 +1,40 @@ +import { expect, it } from 'vitest'; +import { render, screen } from '@testing-library/react'; +import { axe, toHaveNoViolations } from 'jest-axe'; +import Select from './Select'; +import { SelectItem } from './SelectItem'; + +expect.extend(toHaveNoViolations); + +it('Select basic a11y test', async () => { + const items = [ + { label: '1', value: 'Aerospace' }, + { label: '2', value: 'Mechanical' }, + { label: '3', value: 'Civil' }, + { label: '4', value: 'Biomedical' }, + { label: '5', value: 'Nuclear' }, + { label: '6', value: 'Industrial' }, + { label: '7', value: 'Chemical' }, + { label: '8', value: 'Agricultural' }, + { label: '9', value: 'Electrical' }, + { label: '10', value: 'Telco' }, + ]; + + const { container } = render( + , + ); + screen.getByText('Select…'); + + const results = await axe(container); + + expect(results).toHaveNoViolations(); +}); diff --git a/packages/components/src/components/Select/Select.tsx b/packages/components/src/components/Select/Select.tsx new file mode 100644 index 0000000000..57f33e429b --- /dev/null +++ b/packages/components/src/components/Select/Select.tsx @@ -0,0 +1,75 @@ +import type { SelectProps as RACSelectProps } from 'react-aria-components'; +import { + Button, + FieldError, + Label, + ListBox, + Popover, + Select as RACSelect, + SelectValue, + Text, +} from 'react-aria-components'; +import cx from 'classnames'; +import ChevrondownIcon from '../Icons/ChevrondownIcon'; +import ChevronupIcon from '../Icons/ChevronupIcon'; + +interface SelectProps + extends Omit, 'children'> { + title?: string; + description?: string; + error?: string[]; + items?: Iterable; + children: React.ReactNode | ((item: T) => React.ReactNode); +} + +/** + * See https://react-spectrum.adobe.com/react-aria/Select.html + * + * An iterable list of options is passed to the Select using the items prop. Each item + * accepts an id prop, which is passed to the onSelectionChange handler to identify + * the selected item. Alternatively, if the item objects contain an id property, as + * shown in the example below, then this is used automatically and an id prop is not + * required. + * + * Setting a selected option can be done by using the defaultSelectedKey or selectedKey + * prop. The selected key corresponds to the id prop of an item. When Select is used + * with a dynamic collection as described above, the id of each item is derived from + * the data. + * + */ +export default function Select({ + title, + description, + error, + children, + items, + ...props +}: SelectProps) { + return ( + + {({ isOpen }) => ( + <> + + + {error} + {description && ( + + {description} + + )} + + + {children} + + + + )} + + ); +} diff --git a/packages/components/src/components/Select/SelectItem.tsx b/packages/components/src/components/Select/SelectItem.tsx new file mode 100644 index 0000000000..aef6385bc5 --- /dev/null +++ b/packages/components/src/components/Select/SelectItem.tsx @@ -0,0 +1,17 @@ +import type { ListBoxItemProps } from 'react-aria-components'; +import { ListBoxItem as RACListBoxItem } from 'react-aria-components'; +import cx from 'classnames'; + +export function SelectItem(props: ListBoxItemProps) { + return ( + + cx('option', { + focused: isFocused, + selected: isSelected, + }) + } + /> + ); +} diff --git a/packages/components/src/components/TextArea/TextArea.stories.tsx b/packages/components/src/components/TextArea/TextArea.stories.tsx new file mode 100644 index 0000000000..6a2f070f3a --- /dev/null +++ b/packages/components/src/components/TextArea/TextArea.stories.tsx @@ -0,0 +1,78 @@ +import TextAreaComponent from './TextArea'; + +import type { Meta, StoryObj } from '@storybook/react'; + +// More on how to set up stories at: https://storybook.js.org/docs/7.0/react/writing-stories/introduction +const meta = { + title: 'TextArea', + component: TextAreaComponent, + tags: ['autodocs'], + decorators: [ + (Story) => ( +
+ +
+ ), + ], + argTypes: { + // controlled value prop + value: { + control: { + disable: true, + }, + }, + }, +} satisfies Meta; + +export default meta; +type Story = StoryObj; + +// More on writing stories with args: https://storybook.js.org/docs/7.0/react/writing-stories/args +export const Default: Story = { + // render: (args) => , + args: { + name: 'field-empty', + title: 'field 1 title', + description: 'Optional help text', + placeholder: 'Type something…', + }, +}; + +export const Required: Story = { + args: { + ...Default.args, + name: 'field-required', + isRequired: true, + }, +}; + +export const Filled: Story = { + args: { + ...Default.args, + name: 'field-filled', + title: 'Filled field title', + value: 'Filled with value A', + isRequired: true, + }, +}; + +export const Errored: Story = { + args: { + ...Default.args, + name: 'field-errored', + title: 'Errored field title', + value: 'Filled with value A', + error: ['This is the error'], + isInvalid: true, + isRequired: true, + }, +}; + +export const Disabled: Story = { + args: { + ...Default.args, + name: 'field-disabled', + title: 'Disabled field title', + isDisabled: true, + }, +}; diff --git a/packages/components/src/components/TextArea/TextArea.test.tsx b/packages/components/src/components/TextArea/TextArea.test.tsx new file mode 100644 index 0000000000..e2f8e7800f --- /dev/null +++ b/packages/components/src/components/TextArea/TextArea.test.tsx @@ -0,0 +1,21 @@ +import { render } from '@testing-library/react'; +import { axe, toHaveNoViolations } from 'jest-axe'; +import TextArea from './TextArea'; + +expect.extend(toHaveNoViolations); + +it('TextArea basic a11y test', async () => { + const { container } = render( +