From eebe7cf4d1053eb23e154f6f8c05eb6639005ee2 Mon Sep 17 00:00:00 2001 From: Musab Sohail Date: Tue, 28 Apr 2026 19:34:52 +0500 Subject: [PATCH 1/7] remove ui folder --- docs/src/ui/_index.scss | 3 - docs/src/ui/_reset.scss | 182 ------ docs/src/ui/components/_index.scss | 39 -- .../src/ui/components/accordion/Accordion.tsx | 48 -- docs/src/ui/components/accordion/_index.scss | 15 - .../ui/components/accountMenu/AccountMenu.tsx | 49 -- .../src/ui/components/accountMenu/_index.scss | 21 - docs/src/ui/components/app/AppContent.tsx | 34 -- docs/src/ui/components/app/AppHeader.tsx | 27 - docs/src/ui/components/app/AppLayout.tsx | 32 - docs/src/ui/components/app/_index.scss | 4 - docs/src/ui/components/app/appContent.scss | 26 - docs/src/ui/components/app/appHeader.scss | 15 - docs/src/ui/components/app/appLayout.scss | 24 - .../components/app/appSideNav/AppSideNav.tsx | 102 ---- .../app/appSideNav/AppSideNavLink.tsx | 49 -- .../app/appSideNav/AppSideNavSections.tsx | 34 -- .../app/appSideNav/AppSideNavTree.tsx | 83 --- .../ui/components/app/appSideNav/_index.scss | 17 - .../components/app/appSideNav/appSideNav.scss | 73 --- .../app/appSideNav/appSideNavSections.scss | 33 -- .../app/appSideNav/appSideNavTree.scss | 25 - docs/src/ui/components/app/types.ts | 25 - docs/src/ui/components/badge/Badge.tsx | 46 -- docs/src/ui/components/badge/_index.scss | 64 -- docs/src/ui/components/button/BaseButton.tsx | 118 ---- .../ui/components/button/ButtonPrimary.tsx | 35 -- .../ui/components/button/ButtonSecondary.tsx | 37 -- .../ui/components/button/ButtonTertiary.tsx | 37 -- docs/src/ui/components/button/IconButton.tsx | 73 --- docs/src/ui/components/button/_index.scss | 5 - docs/src/ui/components/button/baseButton.scss | 94 --- .../ui/components/button/buttonPrimary.scss | 51 -- .../ui/components/button/buttonSecondary.scss | 54 -- .../ui/components/button/buttonTertiary.scss | 56 -- .../ui/components/button/createButtonIcon.ts | 34 -- docs/src/ui/components/button/iconButton.scss | 45 -- docs/src/ui/components/button/types.ts | 3 - docs/src/ui/components/callout/Callout.tsx | 76 --- docs/src/ui/components/callout/_index.scss | 49 -- docs/src/ui/components/callout/types.ts | 3 - docs/src/ui/components/card/Card.tsx | 63 -- docs/src/ui/components/card/_index.scss | 114 ---- docs/src/ui/components/chat/Chat.tsx | 320 ---------- docs/src/ui/components/chat/ChatInspector.tsx | 55 -- docs/src/ui/components/chat/ChatPanel.tsx | 45 -- .../ui/components/chat/ChatSearchResult.tsx | 61 -- docs/src/ui/components/chat/ChatTurn.tsx | 97 --- docs/src/ui/components/chat/_index.scss | 150 ----- docs/src/ui/components/chat/chatTurn.scss | 38 -- docs/src/ui/components/chat/types.ts | 38 -- docs/src/ui/components/code/Code.tsx | 69 --- docs/src/ui/components/code/_index.scss | 33 -- docs/src/ui/components/code/types.ts | 1 - .../ui/components/copyButton/CopyButton.tsx | 86 --- docs/src/ui/components/drawer/Drawer.tsx | 89 --- docs/src/ui/components/drawer/_index.scss | 62 -- docs/src/ui/components/flex/FlexContainer.tsx | 80 --- docs/src/ui/components/flex/FlexItem.tsx | 58 -- .../ui/components/flex/_flexContainer.scss | 79 --- docs/src/ui/components/flex/_flexItem.scss | 64 -- docs/src/ui/components/flex/_index.scss | 2 - docs/src/ui/components/flex/types.ts | 2 - docs/src/ui/components/form/_index.scss | 7 - .../ui/components/form/checkbox/Checkbox.tsx | 36 -- .../ui/components/form/checkbox/_index.scss | 3 - docs/src/ui/components/form/index.ts | 10 - .../ui/components/form/input/NumberInput.tsx | 94 --- .../ui/components/form/input/TextInput.tsx | 77 --- docs/src/ui/components/form/input/_index.scss | 24 - docs/src/ui/components/form/label/Label.tsx | 17 - docs/src/ui/components/form/label/_index.scss | 5 - .../form/radioButton/RadioButton.tsx | 37 -- .../components/form/radioButton/_index.scss | 3 - docs/src/ui/components/form/select/Select.tsx | 61 -- .../src/ui/components/form/select/_index.scss | 52 -- .../form/superRadioGroup/SuperRadioButton.tsx | 44 -- .../form/superRadioGroup/SuperRadioGroup.tsx | 20 - .../form/superRadioGroup/_index.scss | 23 - .../components/form/superRadioGroup/types.ts | 8 - .../ui/components/form/textArea/TextArea.tsx | 38 -- .../ui/components/form/textArea/_index.scss | 14 - .../src/ui/components/formGroup/FormGroup.tsx | 82 --- docs/src/ui/components/grid/Grid.tsx | 24 - docs/src/ui/components/grid/_index.scss | 51 -- .../horizontalRule/HorizontalRule.tsx | 9 - .../ui/components/horizontalRule/_index.scss | 40 -- docs/src/ui/components/icon/Icon.tsx | 44 -- docs/src/ui/components/icon/_index.scss | 25 - docs/src/ui/components/icon/types.ts | 13 - docs/src/ui/components/index.ts | 182 ------ .../src/ui/components/infoTable/InfoTable.tsx | 84 --- docs/src/ui/components/infoTable/_index.scss | 53 -- docs/src/ui/components/link/Link.test.tsx | 42 -- docs/src/ui/components/link/Link.tsx | 60 -- docs/src/ui/components/link/_index.scss | 12 - docs/src/ui/components/list/List.tsx | 48 -- docs/src/ui/components/list/_index.scss | 29 - docs/src/ui/components/menu/Menu.tsx | 9 - docs/src/ui/components/menu/MenuItem.tsx | 49 -- docs/src/ui/components/menu/_index.scss | 26 - docs/src/ui/components/modal/Modal.tsx | 90 --- docs/src/ui/components/modal/_index.scss | 74 --- .../components/notification/Notification.tsx | 84 --- .../components/notification/Notifications.tsx | 81 --- .../ui/components/notification/_index.scss | 99 ---- .../optionsButton/OptionsButton.tsx | 63 -- .../ui/components/optionsButton/_index.scss | 42 -- .../ui/components/optionsList/OptionsList.tsx | 59 -- .../optionsList/OptionsListItem.tsx | 85 --- .../src/ui/components/optionsList/_index.scss | 78 --- docs/src/ui/components/optionsList/types.ts | 17 - docs/src/ui/components/popover/Popover.tsx | 129 ---- docs/src/ui/components/popover/_index.scss | 27 - docs/src/ui/components/portal/Portal.tsx | 22 - .../ui/components/progressBar/ProgressBar.tsx | 41 -- .../src/ui/components/progressBar/_index.scss | 63 -- docs/src/ui/components/prompt/Prompt.tsx | 43 -- docs/src/ui/components/prompt/_index.scss | 70 --- .../ui/components/screenBlock/ScreenBlock.tsx | 13 - .../src/ui/components/screenBlock/_index.scss | 17 - .../ui/components/searchInput/SearchInput.tsx | 45 -- .../src/ui/components/searchInput/_index.scss | 49 -- .../searchResult/SearchResult.test.tsx | 339 ----------- .../components/searchResult/SearchResult.tsx | 93 --- .../ui/components/searchResult/_index.scss | 29 - .../components/searchSelect/SearchSelect.tsx | 130 ---- .../ui/components/searchSelect/_index.scss | 13 - docs/src/ui/components/setting/Setting.tsx | 87 --- docs/src/ui/components/spacer/Spacer.tsx | 11 - docs/src/ui/components/spacer/_index.scss | 20 - docs/src/ui/components/spacer/types.ts | 1 - docs/src/ui/components/spinner/Spinner.tsx | 66 --- docs/src/ui/components/spinner/_index.scss | 21 - docs/src/ui/components/spinner/types.ts | 1 - .../ui/components/summary/Summary.test.tsx | 557 ------------------ docs/src/ui/components/summary/Summary.tsx | 63 -- .../ui/components/summary/SummaryCitation.tsx | 20 - docs/src/ui/components/summary/_index.scss | 29 - docs/src/ui/components/table/Table.tsx | 311 ---------- .../ui/components/table/TableBulkActions.tsx | 65 -- docs/src/ui/components/table/TableCell.tsx | 7 - docs/src/ui/components/table/TableContent.tsx | 23 - .../ui/components/table/TableHeaderCell.tsx | 31 - docs/src/ui/components/table/TablePager.tsx | 53 -- .../ui/components/table/TablePagination.tsx | 83 --- .../ui/components/table/TableRowActions.tsx | 72 --- docs/src/ui/components/table/_index.scss | 70 --- .../components/table/createPagination.test.ts | 39 -- .../ui/components/table/createPagination.ts | 47 -- docs/src/ui/components/table/types.ts | 1 - docs/src/ui/components/tabs/Tab.tsx | 30 - docs/src/ui/components/tabs/TabbedRoutes.tsx | 42 -- docs/src/ui/components/tabs/Tabs.tsx | 19 - docs/src/ui/components/tabs/_index.scss | 55 -- docs/src/ui/components/tabs/types.ts | 2 - docs/src/ui/components/toggle/Toggle.tsx | 46 -- docs/src/ui/components/toggle/_index.scss | 55 -- .../ui/components/topicButton/TopicButton.tsx | 50 -- .../src/ui/components/topicButton/_index.scss | 21 - docs/src/ui/components/typography/Text.tsx | 34 -- .../ui/components/typography/TextColor.tsx | 14 - docs/src/ui/components/typography/Title.tsx | 27 - docs/src/ui/components/typography/_index.scss | 3 - docs/src/ui/components/typography/_text.scss | 128 ---- .../ui/components/typography/_textColor.scss | 15 - docs/src/ui/components/typography/_title.scss | 68 --- docs/src/ui/components/typography/types.ts | 6 - docs/src/ui/index.ts | 2 - docs/src/ui/styleUtils/_animation.scss | 1 - docs/src/ui/styleUtils/_app.scss | 1 - docs/src/ui/styleUtils/_borders.scss | 2 - docs/src/ui/styleUtils/_colors.scss | 21 - docs/src/ui/styleUtils/_depth.scss | 8 - docs/src/ui/styleUtils/_index.scss | 10 - docs/src/ui/styleUtils/_mixins.scss | 11 - docs/src/ui/styleUtils/_shadows.scss | 2 - docs/src/ui/styleUtils/_sizes.scss | 10 - docs/src/ui/styleUtils/_typography.scss | 19 - .../citations/applyCitationOrder.test.ts | 81 --- .../ui/utils/citations/applyCitationOrder.ts | 23 - .../utils/citations/extractCitations.test.ts | 46 -- .../ui/utils/citations/extractCitations.ts | 32 - docs/src/ui/utils/citations/index.ts | 4 - .../utils/citations/reorderCitations.test.ts | 9 - .../ui/utils/citations/reorderCitations.ts | 14 - .../utils/citations/sanitizeCitations.test.ts | 18 - .../ui/utils/citations/sanitizeCitations.ts | 37 -- docs/src/ui/utils/createId.ts | 11 - docs/src/ui/utils/getTrackingProps.ts | 18 - docs/src/ui/utils/index.ts | 1 - docs/src/ui/utils/truncateString.test.ts | 72 --- docs/src/ui/utils/truncateString.ts | 20 - 193 files changed, 9562 deletions(-) delete mode 100644 docs/src/ui/_index.scss delete mode 100644 docs/src/ui/_reset.scss delete mode 100644 docs/src/ui/components/_index.scss delete mode 100644 docs/src/ui/components/accordion/Accordion.tsx delete mode 100644 docs/src/ui/components/accordion/_index.scss delete mode 100644 docs/src/ui/components/accountMenu/AccountMenu.tsx delete mode 100644 docs/src/ui/components/accountMenu/_index.scss delete mode 100644 docs/src/ui/components/app/AppContent.tsx delete mode 100644 docs/src/ui/components/app/AppHeader.tsx delete mode 100644 docs/src/ui/components/app/AppLayout.tsx delete mode 100644 docs/src/ui/components/app/_index.scss delete mode 100644 docs/src/ui/components/app/appContent.scss delete mode 100644 docs/src/ui/components/app/appHeader.scss delete mode 100644 docs/src/ui/components/app/appLayout.scss delete mode 100644 docs/src/ui/components/app/appSideNav/AppSideNav.tsx delete mode 100644 docs/src/ui/components/app/appSideNav/AppSideNavLink.tsx delete mode 100644 docs/src/ui/components/app/appSideNav/AppSideNavSections.tsx delete mode 100644 docs/src/ui/components/app/appSideNav/AppSideNavTree.tsx delete mode 100644 docs/src/ui/components/app/appSideNav/_index.scss delete mode 100644 docs/src/ui/components/app/appSideNav/appSideNav.scss delete mode 100644 docs/src/ui/components/app/appSideNav/appSideNavSections.scss delete mode 100644 docs/src/ui/components/app/appSideNav/appSideNavTree.scss delete mode 100644 docs/src/ui/components/app/types.ts delete mode 100644 docs/src/ui/components/badge/Badge.tsx delete mode 100644 docs/src/ui/components/badge/_index.scss delete mode 100644 docs/src/ui/components/button/BaseButton.tsx delete mode 100644 docs/src/ui/components/button/ButtonPrimary.tsx delete mode 100644 docs/src/ui/components/button/ButtonSecondary.tsx delete mode 100644 docs/src/ui/components/button/ButtonTertiary.tsx delete mode 100644 docs/src/ui/components/button/IconButton.tsx delete mode 100644 docs/src/ui/components/button/_index.scss delete mode 100644 docs/src/ui/components/button/baseButton.scss delete mode 100644 docs/src/ui/components/button/buttonPrimary.scss delete mode 100644 docs/src/ui/components/button/buttonSecondary.scss delete mode 100644 docs/src/ui/components/button/buttonTertiary.scss delete mode 100644 docs/src/ui/components/button/createButtonIcon.ts delete mode 100644 docs/src/ui/components/button/iconButton.scss delete mode 100644 docs/src/ui/components/button/types.ts delete mode 100644 docs/src/ui/components/callout/Callout.tsx delete mode 100644 docs/src/ui/components/callout/_index.scss delete mode 100644 docs/src/ui/components/callout/types.ts delete mode 100644 docs/src/ui/components/card/Card.tsx delete mode 100644 docs/src/ui/components/card/_index.scss delete mode 100644 docs/src/ui/components/chat/Chat.tsx delete mode 100644 docs/src/ui/components/chat/ChatInspector.tsx delete mode 100644 docs/src/ui/components/chat/ChatPanel.tsx delete mode 100644 docs/src/ui/components/chat/ChatSearchResult.tsx delete mode 100644 docs/src/ui/components/chat/ChatTurn.tsx delete mode 100644 docs/src/ui/components/chat/_index.scss delete mode 100644 docs/src/ui/components/chat/chatTurn.scss delete mode 100644 docs/src/ui/components/chat/types.ts delete mode 100644 docs/src/ui/components/code/Code.tsx delete mode 100644 docs/src/ui/components/code/_index.scss delete mode 100644 docs/src/ui/components/code/types.ts delete mode 100644 docs/src/ui/components/copyButton/CopyButton.tsx delete mode 100644 docs/src/ui/components/drawer/Drawer.tsx delete mode 100644 docs/src/ui/components/drawer/_index.scss delete mode 100644 docs/src/ui/components/flex/FlexContainer.tsx delete mode 100644 docs/src/ui/components/flex/FlexItem.tsx delete mode 100644 docs/src/ui/components/flex/_flexContainer.scss delete mode 100644 docs/src/ui/components/flex/_flexItem.scss delete mode 100644 docs/src/ui/components/flex/_index.scss delete mode 100644 docs/src/ui/components/flex/types.ts delete mode 100644 docs/src/ui/components/form/_index.scss delete mode 100644 docs/src/ui/components/form/checkbox/Checkbox.tsx delete mode 100644 docs/src/ui/components/form/checkbox/_index.scss delete mode 100644 docs/src/ui/components/form/index.ts delete mode 100644 docs/src/ui/components/form/input/NumberInput.tsx delete mode 100644 docs/src/ui/components/form/input/TextInput.tsx delete mode 100644 docs/src/ui/components/form/input/_index.scss delete mode 100644 docs/src/ui/components/form/label/Label.tsx delete mode 100644 docs/src/ui/components/form/label/_index.scss delete mode 100644 docs/src/ui/components/form/radioButton/RadioButton.tsx delete mode 100644 docs/src/ui/components/form/radioButton/_index.scss delete mode 100644 docs/src/ui/components/form/select/Select.tsx delete mode 100644 docs/src/ui/components/form/select/_index.scss delete mode 100644 docs/src/ui/components/form/superRadioGroup/SuperRadioButton.tsx delete mode 100644 docs/src/ui/components/form/superRadioGroup/SuperRadioGroup.tsx delete mode 100644 docs/src/ui/components/form/superRadioGroup/_index.scss delete mode 100644 docs/src/ui/components/form/superRadioGroup/types.ts delete mode 100644 docs/src/ui/components/form/textArea/TextArea.tsx delete mode 100644 docs/src/ui/components/form/textArea/_index.scss delete mode 100644 docs/src/ui/components/formGroup/FormGroup.tsx delete mode 100644 docs/src/ui/components/grid/Grid.tsx delete mode 100644 docs/src/ui/components/grid/_index.scss delete mode 100644 docs/src/ui/components/horizontalRule/HorizontalRule.tsx delete mode 100644 docs/src/ui/components/horizontalRule/_index.scss delete mode 100644 docs/src/ui/components/icon/Icon.tsx delete mode 100644 docs/src/ui/components/icon/_index.scss delete mode 100644 docs/src/ui/components/icon/types.ts delete mode 100644 docs/src/ui/components/index.ts delete mode 100644 docs/src/ui/components/infoTable/InfoTable.tsx delete mode 100644 docs/src/ui/components/infoTable/_index.scss delete mode 100644 docs/src/ui/components/link/Link.test.tsx delete mode 100644 docs/src/ui/components/link/Link.tsx delete mode 100644 docs/src/ui/components/link/_index.scss delete mode 100644 docs/src/ui/components/list/List.tsx delete mode 100644 docs/src/ui/components/list/_index.scss delete mode 100644 docs/src/ui/components/menu/Menu.tsx delete mode 100644 docs/src/ui/components/menu/MenuItem.tsx delete mode 100644 docs/src/ui/components/menu/_index.scss delete mode 100644 docs/src/ui/components/modal/Modal.tsx delete mode 100644 docs/src/ui/components/modal/_index.scss delete mode 100644 docs/src/ui/components/notification/Notification.tsx delete mode 100644 docs/src/ui/components/notification/Notifications.tsx delete mode 100644 docs/src/ui/components/notification/_index.scss delete mode 100644 docs/src/ui/components/optionsButton/OptionsButton.tsx delete mode 100644 docs/src/ui/components/optionsButton/_index.scss delete mode 100644 docs/src/ui/components/optionsList/OptionsList.tsx delete mode 100644 docs/src/ui/components/optionsList/OptionsListItem.tsx delete mode 100644 docs/src/ui/components/optionsList/_index.scss delete mode 100644 docs/src/ui/components/optionsList/types.ts delete mode 100644 docs/src/ui/components/popover/Popover.tsx delete mode 100644 docs/src/ui/components/popover/_index.scss delete mode 100644 docs/src/ui/components/portal/Portal.tsx delete mode 100644 docs/src/ui/components/progressBar/ProgressBar.tsx delete mode 100644 docs/src/ui/components/progressBar/_index.scss delete mode 100644 docs/src/ui/components/prompt/Prompt.tsx delete mode 100644 docs/src/ui/components/prompt/_index.scss delete mode 100644 docs/src/ui/components/screenBlock/ScreenBlock.tsx delete mode 100644 docs/src/ui/components/screenBlock/_index.scss delete mode 100644 docs/src/ui/components/searchInput/SearchInput.tsx delete mode 100644 docs/src/ui/components/searchInput/_index.scss delete mode 100644 docs/src/ui/components/searchResult/SearchResult.test.tsx delete mode 100644 docs/src/ui/components/searchResult/SearchResult.tsx delete mode 100644 docs/src/ui/components/searchResult/_index.scss delete mode 100644 docs/src/ui/components/searchSelect/SearchSelect.tsx delete mode 100644 docs/src/ui/components/searchSelect/_index.scss delete mode 100644 docs/src/ui/components/setting/Setting.tsx delete mode 100644 docs/src/ui/components/spacer/Spacer.tsx delete mode 100644 docs/src/ui/components/spacer/_index.scss delete mode 100644 docs/src/ui/components/spacer/types.ts delete mode 100644 docs/src/ui/components/spinner/Spinner.tsx delete mode 100644 docs/src/ui/components/spinner/_index.scss delete mode 100644 docs/src/ui/components/spinner/types.ts delete mode 100644 docs/src/ui/components/summary/Summary.test.tsx delete mode 100644 docs/src/ui/components/summary/Summary.tsx delete mode 100644 docs/src/ui/components/summary/SummaryCitation.tsx delete mode 100644 docs/src/ui/components/summary/_index.scss delete mode 100644 docs/src/ui/components/table/Table.tsx delete mode 100644 docs/src/ui/components/table/TableBulkActions.tsx delete mode 100644 docs/src/ui/components/table/TableCell.tsx delete mode 100644 docs/src/ui/components/table/TableContent.tsx delete mode 100644 docs/src/ui/components/table/TableHeaderCell.tsx delete mode 100644 docs/src/ui/components/table/TablePager.tsx delete mode 100644 docs/src/ui/components/table/TablePagination.tsx delete mode 100644 docs/src/ui/components/table/TableRowActions.tsx delete mode 100644 docs/src/ui/components/table/_index.scss delete mode 100644 docs/src/ui/components/table/createPagination.test.ts delete mode 100644 docs/src/ui/components/table/createPagination.ts delete mode 100644 docs/src/ui/components/table/types.ts delete mode 100644 docs/src/ui/components/tabs/Tab.tsx delete mode 100644 docs/src/ui/components/tabs/TabbedRoutes.tsx delete mode 100644 docs/src/ui/components/tabs/Tabs.tsx delete mode 100644 docs/src/ui/components/tabs/_index.scss delete mode 100644 docs/src/ui/components/tabs/types.ts delete mode 100644 docs/src/ui/components/toggle/Toggle.tsx delete mode 100644 docs/src/ui/components/toggle/_index.scss delete mode 100644 docs/src/ui/components/topicButton/TopicButton.tsx delete mode 100644 docs/src/ui/components/topicButton/_index.scss delete mode 100644 docs/src/ui/components/typography/Text.tsx delete mode 100644 docs/src/ui/components/typography/TextColor.tsx delete mode 100644 docs/src/ui/components/typography/Title.tsx delete mode 100644 docs/src/ui/components/typography/_index.scss delete mode 100644 docs/src/ui/components/typography/_text.scss delete mode 100644 docs/src/ui/components/typography/_textColor.scss delete mode 100644 docs/src/ui/components/typography/_title.scss delete mode 100644 docs/src/ui/components/typography/types.ts delete mode 100644 docs/src/ui/index.ts delete mode 100644 docs/src/ui/styleUtils/_animation.scss delete mode 100644 docs/src/ui/styleUtils/_app.scss delete mode 100644 docs/src/ui/styleUtils/_borders.scss delete mode 100644 docs/src/ui/styleUtils/_colors.scss delete mode 100644 docs/src/ui/styleUtils/_depth.scss delete mode 100644 docs/src/ui/styleUtils/_index.scss delete mode 100644 docs/src/ui/styleUtils/_mixins.scss delete mode 100644 docs/src/ui/styleUtils/_shadows.scss delete mode 100644 docs/src/ui/styleUtils/_sizes.scss delete mode 100644 docs/src/ui/styleUtils/_typography.scss delete mode 100644 docs/src/ui/utils/citations/applyCitationOrder.test.ts delete mode 100644 docs/src/ui/utils/citations/applyCitationOrder.ts delete mode 100644 docs/src/ui/utils/citations/extractCitations.test.ts delete mode 100644 docs/src/ui/utils/citations/extractCitations.ts delete mode 100644 docs/src/ui/utils/citations/index.ts delete mode 100644 docs/src/ui/utils/citations/reorderCitations.test.ts delete mode 100644 docs/src/ui/utils/citations/reorderCitations.ts delete mode 100644 docs/src/ui/utils/citations/sanitizeCitations.test.ts delete mode 100644 docs/src/ui/utils/citations/sanitizeCitations.ts delete mode 100644 docs/src/ui/utils/createId.ts delete mode 100644 docs/src/ui/utils/getTrackingProps.ts delete mode 100644 docs/src/ui/utils/index.ts delete mode 100644 docs/src/ui/utils/truncateString.test.ts delete mode 100644 docs/src/ui/utils/truncateString.ts diff --git a/docs/src/ui/_index.scss b/docs/src/ui/_index.scss deleted file mode 100644 index 7261aab..0000000 --- a/docs/src/ui/_index.scss +++ /dev/null @@ -1,3 +0,0 @@ -// Hard reset to naked selectors -@import "reset"; -@import "./components/index"; diff --git a/docs/src/ui/_reset.scss b/docs/src/ui/_reset.scss deleted file mode 100644 index f308a6f..0000000 --- a/docs/src/ui/_reset.scss +++ /dev/null @@ -1,182 +0,0 @@ -body, -textarea { - font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", - "Droid Sans", "Helvetica Neue", sans-serif; -} - -// Adapted from Eric Meyer's reset (http://meyerweb.com/eric/tools/css/reset/, v2.0 | 20110126). */ - -*, -*:before, -*:after { - box-sizing: border-box; -} - -html, -body, -div, -span, -applet, -object, -iframe, -h1, -h2, -h3, -h4, -h5, -h6, -p, -blockquote, -pre, -a, -abbr, -acronym, -address, -big, -cite, -code, -del, -dfn, -em, -img, -ins, -kbd, -q, -s, -samp, -small, -strike, -strong, -sub, -sup, -tt, -var, -b, -u, -i, -center, -dl, -dt, -dd, -ol, -ul, -li, -fieldset, -form, -label, -legend, -table, -caption, -tbody, -tfoot, -thead, -tr, -th, -td, -article, -aside, -canvas, -details, -embed, -figure, -figcaption, -footer, -header, -hgroup, -menu, -nav, -output, -ruby, -section, -summary, -time, -mark, -audio, -video { - margin: 0; - padding: 0; - border: none; - vertical-align: baseline; -} - -h1, -h2, -h3, -h4, -h5, -h6, -p { - font-family: inherit; - font-weight: inherit; - font-size: inherit; -} - -/* HTML5 display-role reset for older browsers */ -article, -aside, -details, -figcaption, -figure, -footer, -header, -hgroup, -menu, -nav, -section { - display: block; -} - -a[href], -button, -[role="button"] { - cursor: pointer; -} - -button { - background: none; - border: none; - padding: 0; - margin: 0; - color: inherit; - border-radius: 0; - font-size: inherit; -} - -input { - margin: 0; - padding: 0; -} - -input:disabled { - opacity: 1; /* required on iOS */ -} - -ol, -ul { - list-style: none; -} - -blockquote, -q { - quotes: none; -} - -blockquote:before, -blockquote:after, -q:before, -q:after { - content: ""; -} - -table { - border-collapse: collapse; - border-spacing: 0; -} - -hr { - margin: 0; -} - -fieldset { - min-inline-size: auto; -} diff --git a/docs/src/ui/components/_index.scss b/docs/src/ui/components/_index.scss deleted file mode 100644 index 117ab67..0000000 --- a/docs/src/ui/components/_index.scss +++ /dev/null @@ -1,39 +0,0 @@ -@import "../styleUtils/index"; -@import "accordion/index"; -@import "app/index"; -@import "accountMenu/index"; -@import "badge/index"; -@import "button/index"; -@import "callout/index"; -@import "card/index"; -@import "chat/index"; -@import "code/index"; -@import "drawer/index"; -@import "flex/index"; -@import "form/index"; -@import "grid/index"; -@import "horizontalRule/index"; -@import "icon/index"; -@import "infoTable/index"; -@import "link/index"; -@import "list/index"; -@import "menu/index"; -@import "modal/index"; -@import "notification/index"; -@import "optionsButton/index"; -@import "optionsList/index"; -@import "popover/index"; -@import "progressBar/index"; -@import "prompt/index"; -@import "screenBlock/index"; -@import "searchInput/index"; -@import "searchResult/index"; -@import "searchSelect/index"; -@import "spacer/index"; -@import "spinner/index"; -@import "summary/index"; -@import "table/index"; -@import "tabs/index"; -@import "toggle/index"; -@import "topicButton/index"; -@import "typography/index"; diff --git a/docs/src/ui/components/accordion/Accordion.tsx b/docs/src/ui/components/accordion/Accordion.tsx deleted file mode 100644 index 97ddff3..0000000 --- a/docs/src/ui/components/accordion/Accordion.tsx +++ /dev/null @@ -1,48 +0,0 @@ -import { BiChevronDown, BiChevronRight } from "react-icons/bi"; -import { VuiFlexContainer } from "../flex/FlexContainer"; -import { VuiFlexItem } from "../flex/FlexItem"; -import { VuiIcon } from "../icon/Icon"; -import { createId } from "../../utils/createId"; - -type Props = { - header: React.ReactNode; - children: React.ReactNode; - isOpen: boolean; - setIsOpen: (isOpen: boolean) => void; -}; - -export const VuiAccordion = ({ header, children, isOpen, setIsOpen, ...rest }: Props) => { - const buttonId = createId(); - const contentId = createId(); - - return ( - <> - - - {isOpen && ( -
- {children} -
- )} - - ); -}; diff --git a/docs/src/ui/components/accordion/_index.scss b/docs/src/ui/components/accordion/_index.scss deleted file mode 100644 index ea6a93a..0000000 --- a/docs/src/ui/components/accordion/_index.scss +++ /dev/null @@ -1,15 +0,0 @@ -.vuiAccordionHeader { - font-size: $fontSizeStandard; - border-bottom: 1px solid $borderColor; - width: 100%; - padding: $sizeXs 0; - - &:hover { - text-decoration: underline; - background-color: $colorLightShade; - } -} - -.vuiAccordionHeader__title { - text-align: left; -} diff --git a/docs/src/ui/components/accountMenu/AccountMenu.tsx b/docs/src/ui/components/accountMenu/AccountMenu.tsx deleted file mode 100644 index 5a44f36..0000000 --- a/docs/src/ui/components/accountMenu/AccountMenu.tsx +++ /dev/null @@ -1,49 +0,0 @@ -import { VuiHorizontalRule } from "../horizontalRule/HorizontalRule"; -import { VuiPopover } from "../popover/Popover"; -import { VuiSpacer } from "../spacer/Spacer"; - -type AccountMenuInfo = Array<{ - title: string; - value: React.ReactNode; -}>; - -type Props = { - isOpen: boolean; - setIsOpen: (isOpen: boolean) => void; - button: React.ReactElement; - info?: AccountMenuInfo; - children?: React.ReactNode; -}; - -export const VuiAccountMenu = ({ isOpen, setIsOpen, button, info, children }: Props) => { - return ( - setIsOpen(!isOpen)} - button={button} - header={ - info && - info.length > 0 && ( -
- {info.map((item, index) => ( -
-
{item.title}
-
{item.value}
- {index < info.length - 1 && ( - <> - - - - - )} -
- ))} -
- ) - } - > - {children} - - ); -}; diff --git a/docs/src/ui/components/accountMenu/_index.scss b/docs/src/ui/components/accountMenu/_index.scss deleted file mode 100644 index 61ad6ff..0000000 --- a/docs/src/ui/components/accountMenu/_index.scss +++ /dev/null @@ -1,21 +0,0 @@ -.vuiAccountMenu { - min-width: 260px; -} - -.vuiAccounrMenuHeader { - padding: $sizeS; - border-bottom: 1px solid $borderColorLight; - background-color: $colorLightShade; -} - -.vuiAccountMenuHeaderItem__title { - font-size: $fontSizeSmall; - font-weight: $fontWeightBold; - color: $colorDarkerShade; -} - -.vuiAccountMenuHeaderItem__value { - font-size: $fontSizeStandard; - color: $colorDarkerShade; - margin-top: $sizeXxs; -} diff --git a/docs/src/ui/components/app/AppContent.tsx b/docs/src/ui/components/app/AppContent.tsx deleted file mode 100644 index 79e47a5..0000000 --- a/docs/src/ui/components/app/AppContent.tsx +++ /dev/null @@ -1,34 +0,0 @@ -import classNames from "classnames"; -import { AppContentPadding } from "./types"; - -type Props = { - children?: React.ReactNode; - className?: string; - fullWidth?: boolean; - padding?: AppContentPadding; -}; - -const paddingToClassNameMap = { - none: "vuiAppContent--paddingNone", - xs: "vuiAppContent--paddingXs", - s: "vuiAppContent--paddingS", - m: "vuiAppContent--paddingM", - l: "vuiAppContent--paddingL", - xl: "vuiAppContent--paddingXl" -}; - -export const VuiAppContent = ({ children, className, fullWidth, padding = "none", ...rest }: Props) => { - const classes = classNames( - "vuiAppContent", - paddingToClassNameMap[padding], - { - "vuiAppContent--fullWidth": fullWidth - }, - className - ); - return ( -
- {children} -
- ); -}; diff --git a/docs/src/ui/components/app/AppHeader.tsx b/docs/src/ui/components/app/AppHeader.tsx deleted file mode 100644 index 53be436..0000000 --- a/docs/src/ui/components/app/AppHeader.tsx +++ /dev/null @@ -1,27 +0,0 @@ -import { VuiFlexContainer } from "../flex/FlexContainer"; -import { VuiFlexItem } from "../flex/FlexItem"; - -type Props = { - left?: React.ReactNode; - right?: React.ReactNode; -}; - -export const VuiAppHeader = ({ left, right, ...rest }: Props) => { - return ( -
- - {Boolean(left) && ( - - {left} - - )} - - {Boolean(right) && ( - - {right} - - )} - -
- ); -}; diff --git a/docs/src/ui/components/app/AppLayout.tsx b/docs/src/ui/components/app/AppLayout.tsx deleted file mode 100644 index 674fe90..0000000 --- a/docs/src/ui/components/app/AppLayout.tsx +++ /dev/null @@ -1,32 +0,0 @@ -import { ForwardedRef, forwardRef } from "react"; -import classNames from "classnames"; -import { VuiAppSideNav, Props as VuiAppSideNavProps } from "./appSideNav/AppSideNav"; - -type Props = { - children: React.ReactNode; - navItems?: VuiAppSideNavProps["items"]; - navContent?: React.ReactNode; - full?: boolean; -}; - -export const VuiAppLayout = forwardRef( - ({ children, navItems, navContent, full }: Props, ref: ForwardedRef) => { - const classes = classNames("vuiAppLayout", { - "vuiAppLayout--full": full - }); - - return ( -
- {(navItems || navContent) && ( -
- -
- )} - -
- {children} -
-
- ); - } -); diff --git a/docs/src/ui/components/app/_index.scss b/docs/src/ui/components/app/_index.scss deleted file mode 100644 index 629bfb6..0000000 --- a/docs/src/ui/components/app/_index.scss +++ /dev/null @@ -1,4 +0,0 @@ -@import "./appContent"; -@import "./appHeader"; -@import "./appLayout"; -@import "./appSideNav/index"; diff --git a/docs/src/ui/components/app/appContent.scss b/docs/src/ui/components/app/appContent.scss deleted file mode 100644 index f53deee..0000000 --- a/docs/src/ui/components/app/appContent.scss +++ /dev/null @@ -1,26 +0,0 @@ -@use "sass:map"; - -.vuiAppContent { - width: 100%; - max-width: 1200px; -} - -.vuiAppContent--fullWidth { - max-width: 100%; -} - -// Padding -$padding: ( - None: 0, - Xs: $sizeXs $sizeXs * 1.25, - S: $sizeS $sizeS * 1.25, - M: $sizeM $sizeM * 1.25, - L: $sizeL $sizeL * 1.25, - Xl: $sizeXl $sizeXl * 1.25 -); - -@each $paddingName, $paddingValue in $padding { - .vuiAppContent--padding#{$paddingName} { - padding: #{$paddingValue}; - } -} diff --git a/docs/src/ui/components/app/appHeader.scss b/docs/src/ui/components/app/appHeader.scss deleted file mode 100644 index 1a321a3..0000000 --- a/docs/src/ui/components/app/appHeader.scss +++ /dev/null @@ -1,15 +0,0 @@ -.vuiAppHeader { - position: fixed; - display: flex; - align-items: center; - width: 100vw; - height: $appHeaderHeight; - background-color: $colorLightShade; - padding: $sizeXs $sizeM; - z-index: $appHeaderZIndex; - box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px; -} - -.vuiAppHeader__inner { - flex-grow: 1; -} diff --git a/docs/src/ui/components/app/appLayout.scss b/docs/src/ui/components/app/appLayout.scss deleted file mode 100644 index f8e2748..0000000 --- a/docs/src/ui/components/app/appLayout.scss +++ /dev/null @@ -1,24 +0,0 @@ -.vuiAppLayout { - display: flex; - flex-direction: row; - padding-top: $appHeaderHeight; - height: 100vh; -} - -.vuiAppLayout--full { - padding-top: 0; -} - -.vuiAppLayout__sideNav { - border-right: 1px solid $colorMediumShade; - flex-shrink: 0; - overflow-y: auto; -} - -.vuiAppLayout__content { - flex-grow: 1; - display: flex; - flex-direction: column; - align-items: center; - overflow-y: auto; -} diff --git a/docs/src/ui/components/app/appSideNav/AppSideNav.tsx b/docs/src/ui/components/app/appSideNav/AppSideNav.tsx deleted file mode 100644 index 022a78a..0000000 --- a/docs/src/ui/components/app/appSideNav/AppSideNav.tsx +++ /dev/null @@ -1,102 +0,0 @@ -import { useEffect, useRef, useState } from "react"; -import classNames from "classnames"; -import { BiChevronLeft, BiChevronRight } from "react-icons/bi"; -import { VuiIconButton } from "../../button/IconButton"; -import { VuiIcon } from "../../icon/Icon"; -import { buildSections } from "./AppSideNavSections"; -import { buildTree } from "./AppSideNavTree"; -import { Sections, Tree } from "../types"; -import { VuiFlexContainer } from "../../flex/FlexContainer"; -import { VuiFlexItem } from "../../flex/FlexItem"; - -export const buildSideNavItems = (items: Sections | Tree) => { - return isTree(items) ? buildTree(items) : buildSections(items); -}; - -// Type guard to determine if we have a Tree or Sections. -const isTree = (items: Tree | Sections): items is Tree => { - return (items as Tree).findIndex((item) => item.path) !== -1; -}; - -export type Props = { - items?: Sections | Tree; - content?: React.ReactNode; -}; - -export const VuiAppSideNav = ({ items = [], content }: Props) => { - const [isTouched, setIsTouched] = useState(false); - const [isCollapsed, setIsCollapsed] = useState(false); - const collapseButtonRef = useRef(null); - const expandButtonRef = useRef(null); - - useEffect(() => { - // Prevent the button from being focused when it first renders. - if (isTouched) { - if (isCollapsed) { - expandButtonRef.current?.focus(); - } else { - collapseButtonRef.current?.focus(); - } - } - }, [isTouched, isCollapsed]); - - const classes = classNames("vuiAppSideNav", { - "vuiAppSideNav-isCollapsed": isCollapsed - }); - - const contentClasses = classNames("vuiAppSideNavContent", { - "vuiAppSideNavContent-isHidden": isCollapsed - }); - - const navItems = buildSideNavItems(items); - - return ( -
-
- {isCollapsed ? ( - setIsCollapsed(false)} - className="vuiAppSideNavExpandButton" - color="neutral" - icon={ - - - - } - /> - ) : ( - <> - - - )} - - {/* @ts-expect-error React doesn't support inert yet */} -
- {navItems} - {content} -
-
-
- ); -}; diff --git a/docs/src/ui/components/app/appSideNav/AppSideNavLink.tsx b/docs/src/ui/components/app/appSideNav/AppSideNavLink.tsx deleted file mode 100644 index 5b78c48..0000000 --- a/docs/src/ui/components/app/appSideNav/AppSideNavLink.tsx +++ /dev/null @@ -1,49 +0,0 @@ -import classNames from "classnames"; -import { Link, useLocation } from "react-router-dom"; -import { VuiFlexContainer } from "../../flex/FlexContainer"; -import { VuiFlexItem } from "../../flex/FlexItem"; -import { VuiIcon } from "../../icon/Icon"; -import { TreeItem } from "../types"; - -type Props = Pick; - -export const VuiAppSideNavLink = ({ path, name, iconBefore, iconAfter, isActive, className, ...rest }: Props) => { - const location = useLocation(); - - const classes = classNames( - "vuiAppSideNavLink", - { - "vuiAppSideNavLink--active": isActive ?? path === location.pathname - }, - className - ); - - const content = - iconBefore || iconAfter ? ( - - {iconBefore && ( - - {iconBefore} - - )} - - - {name} - - - {iconAfter && ( - - {iconAfter} - - )} - - ) : ( - name - ); - - return ( - - {content} - - ); -}; diff --git a/docs/src/ui/components/app/appSideNav/AppSideNavSections.tsx b/docs/src/ui/components/app/appSideNav/AppSideNavSections.tsx deleted file mode 100644 index 1232d39..0000000 --- a/docs/src/ui/components/app/appSideNav/AppSideNavSections.tsx +++ /dev/null @@ -1,34 +0,0 @@ -import { Sections } from "../types"; -import { VuiAppSideNavLink } from "./AppSideNavLink"; - -export const buildSections = (sections: Sections) => { - return ( -
- {sections.map(({ name, pages }) => { - const renderedPages = pages.map(({ name, path }) => ( - - )); - - return ( - - {renderedPages} - - ); - })} -
- ); -}; - -type Props = { - name: string; - children: React.ReactNode; -}; - -const VuiAppSideNavSection = ({ name, children }: Props) => { - return ( -
-
{name}
-
{children}
-
- ); -}; diff --git a/docs/src/ui/components/app/appSideNav/AppSideNavTree.tsx b/docs/src/ui/components/app/appSideNav/AppSideNavTree.tsx deleted file mode 100644 index 18c7643..0000000 --- a/docs/src/ui/components/app/appSideNav/AppSideNavTree.tsx +++ /dev/null @@ -1,83 +0,0 @@ -import { useState } from "react"; -import { BiChevronDown, BiChevronUp } from "react-icons/bi"; -import { VuiIcon } from "../../icon/Icon"; -import { VuiIconButton } from "../../button/IconButton"; -import { VuiAppSideNavLink } from "./AppSideNavLink"; -import { Tree, TreeItem } from "../types"; - -export const buildTree = (items: Tree) => { - return
{buildTreeItems(items)}
; -}; - -const buildTreeItems = (items: Tree) => { - return items.map(({ name, pages, path, iconBefore, iconAfter, isActive, ...rest }) => { - if (path) { - if (pages) { - const childPages = buildTreeItems(pages); - - return ( - - {childPages} - - ); - } - - return ( - - ); - } - - return ( -
- {name} -
- ); - }); -}; - -type Props = Pick & { - children: React.ReactNode; -}; - -const AppSideNavTreeSection = ({ name, path, children, iconBefore, iconAfter, isActive, ...rest }: Props) => { - const [isOpen, setIsOpen] = useState(true); - - return ( -
- - - setIsOpen(!isOpen)} - color="neutral" - icon={{isOpen ? : }} - /> - - {isOpen &&
{children}
} -
- ); -}; diff --git a/docs/src/ui/components/app/appSideNav/_index.scss b/docs/src/ui/components/app/appSideNav/_index.scss deleted file mode 100644 index 4492d21..0000000 --- a/docs/src/ui/components/app/appSideNav/_index.scss +++ /dev/null @@ -1,17 +0,0 @@ -$appSideNavWidth: 240px; -$appSideNavWidthCollapsed: 60px; -$appSideNavLinkSpacing: $sizeXxs + 2px; - -@mixin appSideNavItem { - display: block; - color: $colorText; - font-size: $fontSizeStandard; - padding: 0 $sizeM; - margin-left: -$sizeM; - padding-top: $appSideNavLinkSpacing; - padding-bottom: $appSideNavLinkSpacing; -} - -@import "./appSideNav"; -@import "./appSideNavSections"; -@import "./appSideNavTree"; diff --git a/docs/src/ui/components/app/appSideNav/appSideNav.scss b/docs/src/ui/components/app/appSideNav/appSideNav.scss deleted file mode 100644 index c80e667..0000000 --- a/docs/src/ui/components/app/appSideNav/appSideNav.scss +++ /dev/null @@ -1,73 +0,0 @@ -.vuiAppSideNav { - width: $appSideNavWidth; - overflow-x: hidden; - transition: all $transitionSpeed; - line-height: 1; -} - -.vuiAppSideNav__inner { - // Prevent content from being squished as nav collapses. - width: $appSideNavWidth; - padding: 28px 32px 32px 33px; - margin-bottom: $sizeXxl * 4; - transition: all $transitionSpeed; -} - -.vuiAppSideNavContent { - opacity: 1; - transition: all $transitionSpeed; -} - -.vuiAppSideNavContent-isHidden { - pointer-events: none; - opacity: 0; -} - -.vuiAppSideNav-isCollapsed { - width: $appSideNavWidthCollapsed; - // Stop scrolling. - height: 100%; - overflow-y: hidden; - - .vuiAppSideNav__inner { - padding-left: $sizeM; - } -} - -.vuiAppSideNavCollapseButton { - display: block; - color: $colorSubdued; - font-size: $fontSizeStandard; - text-decoration: none; - padding: 0 $sizeM; - margin-left: -$sizeXxl; - margin-bottom: $sizeM; - - &:hover { - color: $colorPrimary; - text-decoration: underline; - } -} - -.vuiAppSideNavExpandButton { - margin-top: -$sizeXxs; - // Ensure the content below the expand/collapse button remains - // at the same vertical position when collapsed and expanded. - margin-bottom: 6px; -} - -.vuiAppSideNavLink { - @include truncateText; - @include appSideNavItem; - text-decoration: none; - - &:hover { - color: $colorPrimary; - text-decoration: underline; - } -} - -.vuiAppSideNavLink--active { - background-color: $colorPrimaryLightShade; - border-radius: $sizeM; -} diff --git a/docs/src/ui/components/app/appSideNav/appSideNavSections.scss b/docs/src/ui/components/app/appSideNav/appSideNavSections.scss deleted file mode 100644 index 16f04b8..0000000 --- a/docs/src/ui/components/app/appSideNav/appSideNavSections.scss +++ /dev/null @@ -1,33 +0,0 @@ -.vuiAppSideNavSections { - margin-top: $sizeL; -} - -.vuiAppSideNavContent-isHidden { - .vuiAppSideNavSections { - margin-top: $sizeXs; - } -} - -.vuiAppSideNavSection + .vuiAppSideNavSection { - margin-top: $sizeL; -} - -.vuiAppSideNavSection__title { - color: $colorText; - font-weight: $fontWeightBold; - font-size: $fontSizeStandard; -} - -.vuiAppSideNavSection__items { - margin-top: $sizeS; - - & > .vuiAppSideNavLink { - &:first-child { - margin-top: -$appSideNavLinkSpacing; - } - - &:last-child { - margin-bottom: -$appSideNavLinkSpacing; - } - } -} diff --git a/docs/src/ui/components/app/appSideNav/appSideNavTree.scss b/docs/src/ui/components/app/appSideNav/appSideNavTree.scss deleted file mode 100644 index c46c705..0000000 --- a/docs/src/ui/components/app/appSideNav/appSideNavTree.scss +++ /dev/null @@ -1,25 +0,0 @@ -.vuiAppSideNavTree { - margin-top: -$sizeXxs; -} - -.vuiAppSideNavTreeSection { - position: relative; -} - -.vuiAppSideNavTreeToggleButton { - position: absolute; - top: 0; - right: -30px; -} - -.vuiAppSideNavTreeChildren { - // Sized to match the width of the icons. - margin-left: 20px; -} - -.vuiAppSideNavTreeSection__subTitle { - @include appSideNavItem; - font-size: $fontSizeSmall; - font-weight: $fontWeightBold; - color: $colorDarkShade; -} diff --git a/docs/src/ui/components/app/types.ts b/docs/src/ui/components/app/types.ts deleted file mode 100644 index 77950db..0000000 --- a/docs/src/ui/components/app/types.ts +++ /dev/null @@ -1,25 +0,0 @@ -export const APP_CONTENT_PADDING = ["none", "xs", "s", "m", "l", "xl"] as const; -export type AppContentPadding = (typeof APP_CONTENT_PADDING)[number]; - -export type Tree = Array; - -export type TreeItem = { - name: string; - path?: string; - pages?: Tree; - iconBefore?: React.ReactNode; - iconAfter?: React.ReactNode; - isActive?: boolean; - className?: string; - "data-testid"?: string; -}; - -export type Sections = Array<{ - name: string; - pages: Array; -}>; - -export type SectionItem = { - name: string; - path: string; -}; diff --git a/docs/src/ui/components/badge/Badge.tsx b/docs/src/ui/components/badge/Badge.tsx deleted file mode 100644 index c0fade9..0000000 --- a/docs/src/ui/components/badge/Badge.tsx +++ /dev/null @@ -1,46 +0,0 @@ -import { MouseEvent } from "react"; -import classNames from "classnames"; -import { Link } from "react-router-dom"; -import { Props as LinkProps } from "../link/Link"; -import { getTrackingProps } from "../../utils/getTrackingProps"; - -export const BADGE_COLOR = ["accent", "primary", "danger", "warning", "success", "neutral"] as const; - -type Props = { - children: React.ReactNode; - className?: string; - color: (typeof BADGE_COLOR)[number]; - onClick?: (event: MouseEvent) => void; - href?: LinkProps["href"]; - target?: LinkProps["target"]; - track?: LinkProps["track"]; -}; - -export const VuiBadge = ({ children, className, color, onClick, href, target, track, ...rest }: Props) => { - const classes = classNames(className, "vuiBadge", `vuiBadge--${color}`, { - "vuiBadge--clickable": onClick ?? href - }); - - if (onClick) { - return ( - - ); - } - - if (href) { - return ( - // @ts-expect-error Type 'string' is not assignable to type 'HTMLAttributeReferrerPolicy | undefined'. - - {children} - - ); - } - - return ( -
- {children} -
- ); -}; diff --git a/docs/src/ui/components/badge/_index.scss b/docs/src/ui/components/badge/_index.scss deleted file mode 100644 index 5e845da..0000000 --- a/docs/src/ui/components/badge/_index.scss +++ /dev/null @@ -1,64 +0,0 @@ -@use "sass:map"; - -.vuiBadge { - display: inline-block; - font-size: $fontSizeSmall; - line-height: 1; - padding: $sizeXxs $sizeXs; - border-radius: $sizeS; - font-family: inherit; - white-space: nowrap; - text-decoration: none; -} - -.vuiBadge--clickable { - cursor: pointer; -} - -// Color -$color: ( - accent: ( - "color": $colorAccent, - "background-color": transparentize($colorAccent, 0.9), - "border-color": transparentize($colorAccent, 0.9) - ), - primary: ( - "color": $colorPrimary, - "background-color": transparentize($colorPrimary, 0.9), - "border-color": transparentize($colorPrimary, 0.9) - ), - success: ( - "color": $colorSuccess, - "background-color": transparentize($colorSuccess, 0.9), - "border-color": transparentize($colorSuccess, 0.9) - ), - warning: ( - "color": $colorWarning, - "background-color": transparentize($colorWarning, 0.9), - "border-color": transparentize($colorWarning, 0.9) - ), - danger: ( - "color": $colorDanger, - "background-color": transparentize($colorDanger, 0.9), - "border-color": transparentize($colorDanger, 0.9) - ), - neutral: ( - "color": $colorText, - "background-color": $colorLightShade, - "border-color": transparentize($colorText, 0.9) - ) -); - -@each $colorName, $colorValue in $color { - .vuiBadge--#{$colorName} { - color: #{map.get($colorValue, "color")} !important; - background-color: #{map.get($colorValue, "background-color")}; - border: 1px solid #{map.get($colorValue, "border-color")}; - transition: all $transitionSpeed; - - &.vuiBadge--clickable:hover { - border-color: #{map.get($colorValue, "color")}; - text-decoration: none; - } - } -} diff --git a/docs/src/ui/components/button/BaseButton.tsx b/docs/src/ui/components/button/BaseButton.tsx deleted file mode 100644 index 6b613a8..0000000 --- a/docs/src/ui/components/button/BaseButton.tsx +++ /dev/null @@ -1,118 +0,0 @@ -import { ReactElement, ReactNode, forwardRef } from "react"; -import classNames from "classnames"; -import { Props as LinkProps } from "../link/Link"; -import { Link } from "react-router-dom"; -import { getTrackingProps } from "../../utils/getTrackingProps"; -import { BUTTON_SIZE } from "./types"; - -const alignToClassMap = { - left: "vuiBaseButton--alignLeft", - center: "vuiBaseButton--alignCenter", - right: "vuiBaseButton--alignRight" -}; - -export type Props = { - children?: ReactNode; - icon?: ReactElement | null; - iconSide?: "left" | "right"; - align?: "left" | "center" | "right"; - className?: string; - size?: (typeof BUTTON_SIZE)[number]; - fullWidth?: boolean; - isSelected?: boolean; - isInert?: boolean; - isDisabled?: boolean; - onClick?: (e: React.MouseEvent) => void; - href?: LinkProps["href"]; - target?: LinkProps["target"]; - track?: LinkProps["track"]; - htmlFor?: string; - tabIndex?: number; - title?: string; - isSubmit?: boolean; -}; - -export const BaseButton = forwardRef( - ( - { - children, - icon, - iconSide = "left", - align = "center", - className, - size, - fullWidth, - onClick, - tabIndex, - isInert, - isDisabled, - href, - target, - track, - htmlFor, - isSubmit, - ...rest - }: Props, - ref - ) => { - const classes = classNames("vuiBaseButton", className, `vuiBaseButton--${size}`, alignToClassMap[align], { - "vuiBaseButton-isInert": isInert, - "vuiBaseButton-isDisabled": isDisabled, - "vuiBaseButton--fullWidth": fullWidth, - [`vuiBaseButton--${iconSide}`]: Boolean(icon) && Boolean(children) - }); - - const iconContainer = icon ? {icon} : null; - - // This is useful for controlling other elements, e.g. creating an - // for uploading files and adding a button to trigger it. - if (htmlFor) { - return ( - - ); - } - - if (href) { - const wrapperClasses = classNames("vuiBaseButtonLinkWrapper", { - "vuiBaseButtonLinkWrapper--fullWidth": fullWidth - }); - - return ( - // @ts-expect-error Type 'string' is not assignable to type 'HTMLAttributeReferrerPolicy | undefined'. - - {/* Wrap a button otherwise the flex layout breaks */} - - - ); - } - - const props = { - onClick, - tabIndex, - ["type"]: isSubmit ? "submit" : "button", - ...rest - }; - - return ( - // @ts-expect-error HTMLButtonElement conflict with HTMLAnchorElement - - ); - } -); diff --git a/docs/src/ui/components/button/ButtonPrimary.tsx b/docs/src/ui/components/button/ButtonPrimary.tsx deleted file mode 100644 index 1b90283..0000000 --- a/docs/src/ui/components/button/ButtonPrimary.tsx +++ /dev/null @@ -1,35 +0,0 @@ -import { forwardRef } from "react"; -import classNames from "classnames"; -import { BaseButton, Props as BaseButtonProps } from "./BaseButton"; -import { ButtonColor } from "./types"; -import { createButtonIcon } from "./createButtonIcon"; - -export type Props = BaseButtonProps & { - color: ButtonColor; -}; - -const colorToIconColorMap = { - accent: "empty", - primary: "empty", - success: "empty", - danger: "empty", - warning: "empty", - neutral: "neutral", - subdued: "subdued" -}; - -export const VuiButtonPrimary = forwardRef( - ({ children, icon, color, size = "m", className, isSelected, isDisabled, ...rest }: Props, ref) => { - const classes = classNames(className, "vuiButtonPrimary", `vuiButtonPrimary--${color}`, { - "vuiButtonPrimary-isSelected": isSelected - }); - - const buttonIcon = createButtonIcon(icon, size, color, colorToIconColorMap); - - return ( - - {children} - - ); - } -); diff --git a/docs/src/ui/components/button/ButtonSecondary.tsx b/docs/src/ui/components/button/ButtonSecondary.tsx deleted file mode 100644 index 966be04..0000000 --- a/docs/src/ui/components/button/ButtonSecondary.tsx +++ /dev/null @@ -1,37 +0,0 @@ -import { forwardRef } from "react"; -import classNames from "classnames"; -import { BaseButton, Props as BaseButtonProps } from "./BaseButton"; -import { ButtonColor } from "./types"; -import { createButtonIcon } from "./createButtonIcon"; - -export type Props = BaseButtonProps & { - color: ButtonColor; - solid?: boolean; -}; - -const colorToIconColorMap = { - accent: "accent", - primary: "primary", - success: "success", - danger: "danger", - warning: "warning", - neutral: "neutral", - subdued: "subdued" -}; - -export const VuiButtonSecondary = forwardRef( - ({ children, icon, color, size = "m", className, isSelected, isDisabled, solid, ...rest }: Props, ref) => { - const classes = classNames(className, "vuiButtonSecondary", `vuiButtonSecondary--${color}`, { - "vuiButtonSecondary-isSelected": isSelected, - "vuiButtonSecondary--solid": solid - }); - - const buttonIcon = createButtonIcon(icon, size, color, colorToIconColorMap); - - return ( - - {children} - - ); - } -); diff --git a/docs/src/ui/components/button/ButtonTertiary.tsx b/docs/src/ui/components/button/ButtonTertiary.tsx deleted file mode 100644 index 1c61bb1..0000000 --- a/docs/src/ui/components/button/ButtonTertiary.tsx +++ /dev/null @@ -1,37 +0,0 @@ -import { forwardRef } from "react"; -import classNames from "classnames"; -import { BaseButton, Props as BaseButtonProps } from "./BaseButton"; -import { ButtonColor } from "./types"; -import { createButtonIcon } from "./createButtonIcon"; - -export type Props = BaseButtonProps & { - color: ButtonColor; - noPadding?: boolean; -}; - -const colorToIconColorMap = { - accent: "accent", - primary: "primary", - success: "success", - danger: "danger", - warning: "warning", - neutral: "neutral", - subdued: "subdued" -}; - -export const VuiButtonTertiary = forwardRef( - ({ children, icon, color, size = "m", className, isSelected, isDisabled, noPadding, ...rest }: Props, ref) => { - const classes = classNames(className, "vuiButtonTertiary", `vuiButtonTertiary--${color}`, { - "vuiButtonTertiary-isSelected": isSelected, - "vuiButtonTertiary-noPadding": noPadding - }); - - const buttonIcon = createButtonIcon(icon, size, color, colorToIconColorMap); - - return ( - - {children} - - ); - } -); diff --git a/docs/src/ui/components/button/IconButton.tsx b/docs/src/ui/components/button/IconButton.tsx deleted file mode 100644 index 6572e4b..0000000 --- a/docs/src/ui/components/button/IconButton.tsx +++ /dev/null @@ -1,73 +0,0 @@ -import classNames from "classnames"; -import { ReactElement, forwardRef } from "react"; -import { Link } from "react-router-dom"; -import { getTrackingProps } from "../../utils/getTrackingProps"; -import { Props as LinkProps } from "../link/Link"; -import { ButtonColor, BUTTON_SIZE } from "./types"; -import { createButtonIcon } from "./createButtonIcon"; - -type Props = { - className?: string; - icon: ReactElement; - color?: ButtonColor; - size?: (typeof BUTTON_SIZE)[number]; - onClick?: () => void; - href?: LinkProps["href"]; - target?: LinkProps["target"]; - track?: LinkProps["track"]; - tabIndex?: number; - isAnchor?: boolean; -}; - -export const VuiIconButton = forwardRef( - ( - { - className, - icon, - color = "primary", - size = "m", - onClick, - href, - target, - track, - tabIndex, - isAnchor, - ...rest - }: Props, - ref - ) => { - const props = { - className: classNames("vuiIconButton", className, `vuiIconButton--${color}`, `vuiIconButton--${size}`), - onClick, - tabIndex, - ...rest - }; - - const buttonIcon = createButtonIcon(icon, size, color); - - if (href) { - // Uncouple from react-router. - if (isAnchor) { - return ( - // @ts-expect-error HTMLAnchorElement is not HTMLButtonElement. - - {buttonIcon} - - ); - } - - return ( - // @ts-expect-error Type 'string' is not assignable to type 'HTMLAttributeReferrerPolicy | undefined'. - - - - ); - } - - return ( - - ); - } -); diff --git a/docs/src/ui/components/button/_index.scss b/docs/src/ui/components/button/_index.scss deleted file mode 100644 index ea5bf76..0000000 --- a/docs/src/ui/components/button/_index.scss +++ /dev/null @@ -1,5 +0,0 @@ -@import "./baseButton"; -@import "./buttonPrimary"; -@import "./buttonSecondary"; -@import "./buttonTertiary"; -@import "./iconButton"; diff --git a/docs/src/ui/components/button/baseButton.scss b/docs/src/ui/components/button/baseButton.scss deleted file mode 100644 index db0e0b4..0000000 --- a/docs/src/ui/components/button/baseButton.scss +++ /dev/null @@ -1,94 +0,0 @@ -.vuiBaseButtonIconContainer { - // Ensures custom icons and vertically centered. - line-height: 0; -} - -.vuiBaseButtonLinkWrapper { - text-decoration: none; - - &:hover { - text-decoration: none; - } -} - -.vuiBaseButtonLinkWrapper--fullWidth { - width: 100%; -} - -.vuiBaseButton { - white-space: nowrap; - border-radius: $sizeXxs; - display: inline-flex; - align-items: center; - font-weight: 500; - box-shadow: $shadowSmallStart; - transition: all $transitionSpeed; - line-height: 1; - cursor: pointer; -} - -.vuiBaseButton--alignLeft { - justify-content: flex-start; -} - -.vuiBaseButton--alignCenter { - justify-content: center; -} - -.vuiBaseButton--alignRight { - justify-content: flex-end; -} - -.vuiBaseButton-isInert, -.vuiBaseButton-isDisabled { - cursor: default; - pointer-events: none; -} - -.vuiBaseButton-isDisabled { - opacity: 0.5; -} - -.vuiBaseButton--left { - .vuiBaseButtonIconContainer { - margin-right: $sizeXs; - } -} - -.vuiBaseButton--right { - flex-direction: row-reverse; - - .vuiBaseButtonIconContainer { - margin-left: $sizeXs; - margin-right: 0; - } -} - -.vuiBaseButton--fullWidth { - width: 100%; -} - -// Size -.vuiBaseButton--xs { - font-size: $fontSizeStandard; - padding: $sizeXxs $sizeXs; - height: 24px; -} - -.vuiBaseButton--s { - font-size: $fontSizeStandard; - padding: $sizeXs * 0.75 $sizeXs; - height: 28px; -} - -.vuiBaseButton--m { - font-size: $fontSizeMedium; - padding: $sizeXs $size; - height: 34px; -} - -.vuiBaseButton--l { - font-size: $fontSizeMedium; - padding: $sizeS $sizeL; - height: 47px; -} diff --git a/docs/src/ui/components/button/buttonPrimary.scss b/docs/src/ui/components/button/buttonPrimary.scss deleted file mode 100644 index 3c1a5ff..0000000 --- a/docs/src/ui/components/button/buttonPrimary.scss +++ /dev/null @@ -1,51 +0,0 @@ -@use "sass:map"; - -.vuiButtonPrimary { - &:hover { - box-shadow: $shadowSmallEnd; - } -} - -// Color -$color: ( - accent: ( - "color": #ffffff, - "background-color": $colorAccent - ), - primary: ( - "color": #ffffff, - "background-color": $colorPrimary - ), - success: ( - "color": #ffffff, - "background-color": $colorSuccess - ), - danger: ( - "color": #ffffff, - "background-color": $colorDanger - ), - warning: ( - "color": #ffffff, - "background-color": $colorWarning - ), - neutral: ( - "color": $colorText, - "background-color": transparentize($colorText, 0.9) - ), - subdued: ( - "color": $colorSubdued, - "background-color": transparentize($colorSubdued, 0.9) - ) -); - -@each $colorName, $colorValue in $color { - .vuiButtonPrimary--#{$colorName} { - color: #{map.get($colorValue, "color")}; - background-color: #{map.get($colorValue, "background-color")}; - border: 1px solid #{map.get($colorValue, "background-color")}; - - &.vuiButtonPrimary-isSelected { - box-shadow: inset rgba(50, 50, 93, 0.25) 0px 6px 8px -2px, inset rgba(0, 0, 0, 0.3) 0px 3px 4px -3px; - } - } -} diff --git a/docs/src/ui/components/button/buttonSecondary.scss b/docs/src/ui/components/button/buttonSecondary.scss deleted file mode 100644 index 72513ad..0000000 --- a/docs/src/ui/components/button/buttonSecondary.scss +++ /dev/null @@ -1,54 +0,0 @@ -@use "sass:map"; - -.vuiButtonSecondary { - &:hover { - box-shadow: $shadowSmallEnd; - } -} - -.vuiButtonSecondary--solid { - background-color: $colorEmptyShade; -} - -// Color -$color: ( - accent: ( - "border-color": transparentize($colorAccent, 0.5), - "color": $colorAccent - ), - primary: ( - "border-color": transparentize($colorPrimary, 0.5), - "color": $colorPrimary - ), - success: ( - "border-color": transparentize($colorSuccess, 0.5), - "color": $colorSuccess - ), - danger: ( - "border-color": transparentize($colorDanger, 0.5), - "color": $colorDanger - ), - warning: ( - "border-color": transparentize($colorWarning, 0.5), - "color": $colorWarning - ), - neutral: ( - "border-color": $borderColor, - "color": $colorText - ), - subdued: ( - "border-color": $borderColorLight, - "color": $colorSubdued - ) -); - -@each $colorName, $colorValue in $color { - .vuiButtonSecondary--#{$colorName} { - border: 1px solid #{map.get($colorValue, "border-color")}; - color: #{map.get($colorValue, "color")}; - - &.vuiButtonSecondary-isSelected { - box-shadow: inset rgba(0, 0, 0, 0.1) 0px 2px 2px; - } - } -} diff --git a/docs/src/ui/components/button/buttonTertiary.scss b/docs/src/ui/components/button/buttonTertiary.scss deleted file mode 100644 index 9109435..0000000 --- a/docs/src/ui/components/button/buttonTertiary.scss +++ /dev/null @@ -1,56 +0,0 @@ -@use "sass:map"; - -.vuiButtonTertiary { - padding-left: $sizeXs; - padding-right: $sizeXs; - - &:hover { - text-decoration: underline; - } -} - -.vuiButtonTertiary-noPadding { - padding: 0; -} - -// Color -$color: ( - accent: ( - "color": $colorAccent, - "selected-color": transparentize($colorAccent, 0.9) - ), - primary: ( - "color": $colorPrimary, - "selected-color": transparentize($colorPrimary, 0.9) - ), - success: ( - "color": $colorSuccess, - "selected-color": transparentize($colorSuccess, 0.9) - ), - danger: ( - "color": $colorDanger, - "selected-color": transparentize($colorDanger, 0.9) - ), - warning: ( - "color": $colorWarning, - "selected-color": transparentize($colorWarning, 0.9) - ), - neutral: ( - "color": $colorText, - "selected-color": transparentize($colorText, 0.9) - ), - subdued: ( - "color": $colorSubdued, - "selected-color": transparentize($colorSubdued, 0.9) - ) -); - -@each $colorName, $colorValue in $color { - .vuiButtonTertiary--#{$colorName} { - color: #{map.get($colorValue, "color")}; - - &.vuiButtonTertiary-isSelected { - background-color: #{map.get($colorValue, "selected-color")}; - } - } -} diff --git a/docs/src/ui/components/button/createButtonIcon.ts b/docs/src/ui/components/button/createButtonIcon.ts deleted file mode 100644 index f3be83b..0000000 --- a/docs/src/ui/components/button/createButtonIcon.ts +++ /dev/null @@ -1,34 +0,0 @@ -import { cloneElement } from "react"; -import { Props as BaseButtonProps } from "./BaseButton"; -import { ButtonColor } from "./types"; - -const sizeToIconSizeMap = { - xs: "xs", - s: "xs", - m: "s", - l: "m" -}; - -const defaultColorToIconColorMap = { - accent: "accent", - primary: "primary", - success: "success", - danger: "danger", - warning: "warning", - neutral: "neutral", - subdued: "subdued" -}; - -export const createButtonIcon = ( - icon: BaseButtonProps["icon"], - size: BaseButtonProps["size"], - color: ButtonColor, - colorToIconColorMap: Record = defaultColorToIconColorMap -) => { - return icon - ? cloneElement(icon, { - size: size ? sizeToIconSizeMap[size] : "s", - color: icon.props.color === "inherit" ? colorToIconColorMap[color] : icon.props.color - }) - : null; -}; diff --git a/docs/src/ui/components/button/iconButton.scss b/docs/src/ui/components/button/iconButton.scss deleted file mode 100644 index 06febdb..0000000 --- a/docs/src/ui/components/button/iconButton.scss +++ /dev/null @@ -1,45 +0,0 @@ -.vuiIconButton { - display: inline-block; - border-radius: $sizeXxs; - padding: $sizeXxs; - line-height: 1; -} - -// Color -$color: ( - accent: $colorAccent, - primary: $colorPrimary, - success: $colorSuccess, - warning: $colorWarning, - danger: $colorDanger, - neutral: $colorText, - subdued: $colorSubdued -); - -@each $colorName, $colorValue in $color { - .vuiIconButton--#{$colorName} { - color: $colorValue; - background-color: transparentize($color: $colorValue, $amount: 1); - transition: all $transitionSpeed; - - &:hover { - background-color: transparentize($color: $colorValue, $amount: 0.9); - } - } -} - -// Size -.vuiIconButton--xs { - padding: $sizeXxs; - height: 24px; -} - -.vuiIconButton--s { - padding: $sizeXs * 0.75; - height: 28px; -} - -.vuiIconButton--m { - padding: $sizeXs; - height: 34px; -} diff --git a/docs/src/ui/components/button/types.ts b/docs/src/ui/components/button/types.ts deleted file mode 100644 index c2085e8..0000000 --- a/docs/src/ui/components/button/types.ts +++ /dev/null @@ -1,3 +0,0 @@ -export const BUTTON_SIZE = ["xs", "s", "m", "l"] as const; -export const BUTTON_COLOR = ["accent", "primary", "success", "danger", "warning", "neutral", "subdued"] as const; -export type ButtonColor = (typeof BUTTON_COLOR)[number]; diff --git a/docs/src/ui/components/callout/Callout.tsx b/docs/src/ui/components/callout/Callout.tsx deleted file mode 100644 index 23d7cc8..0000000 --- a/docs/src/ui/components/callout/Callout.tsx +++ /dev/null @@ -1,76 +0,0 @@ -import { ReactNode } from "react"; -import classNames from "classnames"; -import { VuiSpacer } from "../spacer/Spacer"; -import { VuiTitle } from "../typography/Title"; -import { VuiTextColor } from "../typography/TextColor"; -import { VuiText } from "../typography/Text"; -import { CALLOUT_SIZE, CalloutColor } from "./types"; -import { VuiFlexContainer } from "../flex/FlexContainer"; -import { VuiFlexItem } from "../flex/FlexItem"; -import { VuiIconButton } from "../button/IconButton"; -import { BiX } from "react-icons/bi"; - -const HEADING_ELEMENT = ["h1", "h2", "h3", "h4", "h5", "h6", "p"] as const; - -type Props = { - children?: ReactNode; - title: string; - headingElement: (typeof HEADING_ELEMENT)[number]; - color: CalloutColor; - size?: (typeof CALLOUT_SIZE)[number]; - onDismiss?: () => void; -}; - -const sizeToTitleSizeMap = { - s: "xs", - m: "s" -} as const; - -const sizeToSpacerSizeMap = { - s: "xxs", - m: "xs" -} as const; - -const sizeToContentSizeMap = { - s: "xs", - m: "s" -} as const; - -export const VuiCallout = ({ children, title, headingElement, color, size = "m", onDismiss, ...rest }: Props) => { - const classes = classNames("vuiCallout", `vuiCallout--${color}`, `vuiCallout--${size}`); - const HeadingElement = headingElement as keyof JSX.IntrinsicElements; - - return ( -
- - - - - {title} - - - - - {onDismiss && ( - - } - size="s" - /> - - )} - - - {children && ( - <> - - {children} - - )} -
- ); -}; diff --git a/docs/src/ui/components/callout/_index.scss b/docs/src/ui/components/callout/_index.scss deleted file mode 100644 index 6ed2264..0000000 --- a/docs/src/ui/components/callout/_index.scss +++ /dev/null @@ -1,49 +0,0 @@ -@use "sass:map"; - -.vuiCallout { - width: 100%; -} - -.vuiCallout--m { - padding: $sizeM; - - .vuiCallout__closeButton { - margin: -$sizeM * 0.5; - } -} - -.vuiCallout--s { - padding: $sizeS; - - .vuiCallout__closeButton { - margin: -$sizeS * 0.5; - } -} - -// Color -$color: ( - accent: ( - "background-color": transparentize($colorAccent, 0.9) - ), - primary: ( - "background-color": $colorPrimaryLightShade - ), - success: ( - "background-color": transparentize($colorSuccess, 0.9) - ), - warning: ( - "background-color": transparentize($colorWarning, 0.9) - ), - danger: ( - "background-color": $colorDangerLightShade - ), - neutral: ( - "background-color": $colorLightShade - ) -); - -@each $colorName, $colorValue in $color { - .vuiCallout--#{$colorName} { - background-color: #{map.get($colorValue, "background-color")}; - } -} diff --git a/docs/src/ui/components/callout/types.ts b/docs/src/ui/components/callout/types.ts deleted file mode 100644 index ad68d63..0000000 --- a/docs/src/ui/components/callout/types.ts +++ /dev/null @@ -1,3 +0,0 @@ -export const CALLOUT_COLOR = ["accent", "primary", "success", "warning", "danger"] as const; -export const CALLOUT_SIZE = ["s", "m"] as const; -export type CalloutColor = (typeof CALLOUT_COLOR)[number]; diff --git a/docs/src/ui/components/card/Card.tsx b/docs/src/ui/components/card/Card.tsx deleted file mode 100644 index f91d1b8..0000000 --- a/docs/src/ui/components/card/Card.tsx +++ /dev/null @@ -1,63 +0,0 @@ -import classNames from "classnames"; - -type Props = { - header?: React.ReactNode; - body?: React.ReactNode; - footer?: React.ReactNode; - align?: "center" | "left" | "right"; - className?: string; - interactive?: boolean; - href?: string; - padding?: "s" | "m" | "l"; - highlight?: boolean; - ungrouped?: boolean; -}; - -export const VuiCard = ({ - header, - body, - footer, - align = "left", - interactive, - href, - className, - padding = "s", - highlight, - ungrouped, - ...rest -}: Props) => { - const classes = classNames( - "vuiCard", - `vuiCard--${align}`, - `vuiCard--${padding}`, - { - "vuiCard--interactive": interactive && !href, - "vuiCard--link": href, - "vuiCard--highlight": highlight, - "vuiCard--ungrouped": ungrouped - }, - className - ); - - const headerContent = header &&
{header}
; - const bodyContent = body &&
{body}
; - const footerContent = footer &&
{footer}
; - - if (href) { - return ( - - {headerContent} - {bodyContent} - {footerContent} - - ); - } - - return ( -
- {headerContent} - {bodyContent} - {footerContent} -
- ); -}; diff --git a/docs/src/ui/components/card/_index.scss b/docs/src/ui/components/card/_index.scss deleted file mode 100644 index 25e3792..0000000 --- a/docs/src/ui/components/card/_index.scss +++ /dev/null @@ -1,114 +0,0 @@ -.vuiCard { - display: flex; - flex-direction: column; - background-color: $colorEmptyShade; - border-radius: $sizeXs; - box-shadow: rgba(50, 50, 93, 0.25) 0px 0 0 0, rgba(0, 0, 0, 0.16) 0px 1px 4px; - width: 100%; - height: 100%; - transition: box-shadow $transitionSpeed; - overflow: hidden; -} - -.vuiCard--interactive { - &:hover { - box-shadow: rgba(50, 50, 93, 0.25) 0px 6px 12px -2px, rgba(0, 0, 0, 0.3) 0px 3px 7px -3px; - z-index: 1; - } -} - -.vuiCard--ungrouped { - height: auto; -} - -.vuiCard--center { - align-items: center; - text-align: center; - - .vuiCard__header, - .vuiCard__body, - .vuiCard__footer { - align-items: center; - text-align: center; - } -} - -.vuiCard--left { - align-items: flex-start; - text-align: left; - - .vuiCard__header, - .vuiCard__body, - .vuiCard__footer { - align-items: flex-start; - text-align: left; - } -} - -.vuiCard__header { - display: flex; - flex-direction: column; - width: 100%; - padding: $sizeM $sizeL; -} - -.vuiCard__body { - display: flex; - flex-direction: column; - width: 100%; - border-top: 1px solid $borderColorLight; - padding: $sizeM $sizeL; - flex-grow: 1; -} - -.vuiCard__footer { - display: flex; - flex-direction: column; - width: 100%; - padding: 0 $sizeL $sizeM; -} - -.vuiCard--s { - .vuiCard__header, - .vuiCard__body { - padding: $sizeM $sizeL; - } - - .vuiCard__footer { - padding: 0 $sizeL $sizeM; - } -} - -.vuiCard--m { - .vuiCard__header, - .vuiCard__body { - padding: $sizeL $sizeXl; - } - - .vuiCard__footer { - padding: 0 $sizeXl $sizeL; - } -} - -.vuiCard--l { - .vuiCard__header, - .vuiCard__body { - padding: $sizeXl $sizeXxl; - } - - .vuiCard__footer { - padding: 0 $sizeXxl $sizeXl; - } -} - -.vuiCard--highlight { - border: 2px solid $colorAccent; - - .vuiCard__header { - background-color: $colorAccentLightShade; - } - - .vuiCard__body { - border-top: $colorAccentLightShade; - } -} diff --git a/docs/src/ui/components/chat/Chat.tsx b/docs/src/ui/components/chat/Chat.tsx deleted file mode 100644 index 0260b1e..0000000 --- a/docs/src/ui/components/chat/Chat.tsx +++ /dev/null @@ -1,320 +0,0 @@ -import React, { useEffect, useRef, useState } from "react"; -import { BiChat, BiExpand, BiExpandVertical, BiPaperPlane, BiX } from "react-icons/bi"; -import classNames from "classnames"; -import { VuiFlexContainer } from "../flex/FlexContainer"; -import { VuiFlexItem } from "../flex/FlexItem"; -import { VuiIcon } from "../icon/Icon"; -import { VuiIconButton } from "../button/IconButton"; -import { VuiTextInput } from "../form"; -import { ChatStyle, ChatTurn, CHAT_STYLE_ORDER } from "./types"; -import { VuiButtonSecondary } from "../button/ButtonSecondary"; -import { VuiChatInspector } from "./ChatInspector"; -import { VuiSpacer } from "../spacer/Spacer"; -import { VuiButtonTertiary } from "../button/ButtonTertiary"; -import { VuiChatTurn } from "./ChatTurn"; -import { VuiChatPanel } from "./ChatPanel"; - -type Props = { - openPrompt: string; - chatStyle: ChatStyle; - setChatStyle: (chatStyle: ChatStyle) => void; - introduction?: string; - suggestions?: string[]; - onInput: (input: string) => void; - onRetry: (trun: ChatTurn) => void; - onReset: () => void; - conversation: ChatTurn[]; - settings?: React.ReactNode; - isInspectionEnabled?: boolean; -}; - -const chatStyleToIconMap = { - closed: , - condensed: , - tall: , - fullScreen: -} as const; - -export const VuiChat = ({ - openPrompt, - chatStyle, - setChatStyle, - introduction, - suggestions, - onInput, - onRetry, - onReset, - conversation, - settings, - isInspectionEnabled -}: Props) => { - const [isTouched, setIsTouched] = useState(false); - const [isSettingsOpen, setIsSettingsOpen] = useState(false); - const [input, setInput] = useState(""); - const [inspectedTurn, setInspectedTurn] = useState(); - const buttonRef = useRef(null); - const conversationRef = useRef(null); - const inputRef = useRef(null); - const isScrolledToBottomRef = useRef(true); - const prevConversationRef = useRef({ - isBottomQuestionLoading: true, - length: 0 - }); - - const isOpen = chatStyle !== "closed"; - - useEffect(() => { - const onScrollChat = (e: Event) => { - isScrolledToBottomRef.current = conversationRef.current - ? Math.abs( - conversationRef.current.scrollHeight - - conversationRef.current.clientHeight - - conversationRef.current.scrollTop - ) < 1 - : true; - }; - - // We're going to track the scroll position, which will determine - // or not the user is at the bottom of the chat. - conversationRef.current?.addEventListener("scroll", onScrollChat); - - return () => { - conversationRef.current?.removeEventListener("scroll", onScrollChat); - }; - }, []); - - useEffect(() => { - // Scrolling UX rules: - // * Scroll down if the last recorded scroll position was already - // at the bottom of the list and if the last question has resolved - // to an answer. - // * If the user has scrolled to another position, then don’t - // auto-scroll. - // * If the question that has resolved is not the last question, - // don’t auto-scroll. - // - // This way if the user takes control of the scroll position, they - // remain in control. If the user hasn’t taken control of the scroll - // position, then the scroll feels stable (by staying at the - // bottom) as opposed to scrolling unpredictably through the list - // as questions resolve. - - const hasBottomQuestionJustChanged = - // A new question has been added to the bottom of the list. - prevConversationRef.current.length !== conversation.length || - // The last question has just resolved to an answer. - prevConversationRef.current.isBottomQuestionLoading !== Boolean(conversation[conversation.length - 1]?.isLoading); - - // If the intro is really long, the chat can be in a state where - // the user is at the top of the chat and their first question is - // off-screen. In this case, we want to scroll to the bottom. - const shouldStickToBottom = - conversation.length === 1 || (isScrolledToBottomRef.current && hasBottomQuestionJustChanged); - - if (isOpen && shouldStickToBottom) { - // Scroll to the bottom of the chat to keep the latest turn in view. - conversationRef.current?.scrollTo({ - left: 0, - top: conversationRef.current?.scrollHeight, - behavior: "smooth" - }); - } - - prevConversationRef.current = { - length: conversation.length, - isBottomQuestionLoading: - conversation.length > 0 ? Boolean(conversation[conversation.length - 1].isLoading) : false - }; - }, [conversation]); - - useEffect(() => { - // Only autofocus if the user has interacted with the component. - // This prevents the component stealing focus when it first mounts. - if (isTouched) { - if (isOpen) { - inputRef.current?.focus(); - } else { - buttonRef.current?.focus(); - } - } - }, [isOpen]); - - const onSubmit = () => { - if (!input?.trim()) return; - onInput(input); - setInput(""); - }; - - const cycleChatStyle = () => { - setIsTouched(true); - const currentIndex = CHAT_STYLE_ORDER.indexOf(chatStyle); - setChatStyle( - currentIndex === CHAT_STYLE_ORDER.length - 1 ? CHAT_STYLE_ORDER[0] : CHAT_STYLE_ORDER[currentIndex + 1] - ); - }; - - const buttonClasses = classNames("vuiChatButton", { - "vuiChatButton-isHidden": isOpen - }); - - const classes = classNames("vuiChat", `vuiChat--${chatStyle}`); - - return ( - <> - - -
{ - if (e.key === "Escape") setChatStyle("closed"); - }} - > -
- - - - - - - - - - -
-

{openPrompt}

-
- - - - - {settings && ( - - setIsSettingsOpen(true)}> - Settings - - - )} - -
- -
- {(introduction || suggestions) && ( -
- {introduction} - - {introduction && } - - {suggestions?.map((suggestion) => ( -
- onInput(suggestion)} - noPadding - > - {suggestion} - -
- ))} - - {suggestions && suggestions.length > 0 && } -
- )} - - {conversation.length > 0 && ( -
- {conversation.map((turn, index) => ( - - ))} -
- )} - - {conversation.length > 0 && ( -
- - - - Start over - - - -
- )} -
- -
- - - { - setInput(e.currentTarget.value); - }} - onSubmit={onSubmit} - fullWidth - ref={inputRef} - /> - - - - - - - } - color="primary" - onClick={onSubmit} - /> - - - - {chatStyleToIconMap[chatStyle]}} - color="neutral" - onClick={cycleChatStyle} - /> - - -
- - {isSettingsOpen && ( - setIsSettingsOpen(false)}> - {settings} - - )} - - {Boolean(inspectedTurn) && ( - setInspectedTurn(undefined)} /> - )} -
- - ); -}; diff --git a/docs/src/ui/components/chat/ChatInspector.tsx b/docs/src/ui/components/chat/ChatInspector.tsx deleted file mode 100644 index 2fd6e53..0000000 --- a/docs/src/ui/components/chat/ChatInspector.tsx +++ /dev/null @@ -1,55 +0,0 @@ -import { VuiSpacer } from "../spacer/Spacer"; -import { VuiText } from "../typography/Text"; -import { VuiChatPanel } from "./ChatPanel"; -import { VuiChatSearchResult } from "./ChatSearchResult"; -import { ChatTurn } from "./types"; - -type Props = { - turn?: ChatTurn; - onClose: () => void; -}; - -export const VuiChatInspector = ({ turn, onClose }: Props) => { - return ( - - -

- You asked, "{turn?.question}" -

- - - - - -

- This was interpreted as: "{turn?.query}" -

- - - - - -

- This was the response: "{turn?.answer}" -

- - - - - -

- We created this response based on the preceding conversation and this information: -

- - - - - {turn?.results?.map((result, index) => ( - <> - - {index < (turn.results?.length ?? 0) - 1 && } - - ))} - - ); -}; diff --git a/docs/src/ui/components/chat/ChatPanel.tsx b/docs/src/ui/components/chat/ChatPanel.tsx deleted file mode 100644 index 6dd3f3a..0000000 --- a/docs/src/ui/components/chat/ChatPanel.tsx +++ /dev/null @@ -1,45 +0,0 @@ -import { BiX } from "react-icons/bi"; -import { VuiIconButton } from "../button/IconButton"; -import { VuiFlexContainer } from "../flex/FlexContainer"; -import { VuiFlexItem } from "../flex/FlexItem"; -import { VuiIcon } from "../icon/Icon"; -import { VuiSpacer } from "../spacer/Spacer"; -import { VuiTitle } from "../typography/Title"; - -type Props = { - title: React.ReactNode; - onClose: () => void; - children?: React.ReactNode; -}; - -export const VuiChatPanel = ({ title, onClose, children }: Props) => { - return ( -
- - - -

{title}

- - - - - - - - } - color="neutral" - onClick={() => onClose()} - /> - - - - - - {children} - - -
- ); -}; diff --git a/docs/src/ui/components/chat/ChatSearchResult.tsx b/docs/src/ui/components/chat/ChatSearchResult.tsx deleted file mode 100644 index 890691c..0000000 --- a/docs/src/ui/components/chat/ChatSearchResult.tsx +++ /dev/null @@ -1,61 +0,0 @@ -import { forwardRef } from "react"; -import classNames from "classnames"; -import { VuiLink } from "../link/Link"; -import { VuiText } from "../typography/Text"; -import { VuiTextColor } from "../typography/TextColor"; - -export type SearchResult = { - title?: string; - url?: string; - date?: string; - snippet: { - pre: string; - text: string; - post: string; - }; -}; - -type Props = { - result: SearchResult; - className?: string; -}; - -const highlightUrl = (url: string, text: string) => `${url}#:~:text=${text}`; - -export const VuiChatSearchResult = forwardRef( - ({ result, className, ...rest }: Props, ref) => { - const { - title, - url, - date, - snippet: { pre, post, text } - } = result; - - // Protect users' privacy in FullStory. - // https://help.fullstory.com/hc/en-us/articles/360020623574-How-do-I-protect-my-users-privacy-in-FullStory-#01F5DPW1AJHZHR8TBM9YQEDRMH - const classes = classNames("vuiChatSearchResult", "fs-mask", className); - - return ( -
- {(title || url) && ( - - {url ? ( - -

{title ?? url}

- - ) : ( -

{title}

- )} - - )} - - -

- {date && {date} — } - {pre} {text} {post} -

- -
- ); - } -); diff --git a/docs/src/ui/components/chat/ChatTurn.tsx b/docs/src/ui/components/chat/ChatTurn.tsx deleted file mode 100644 index ac355b3..0000000 --- a/docs/src/ui/components/chat/ChatTurn.tsx +++ /dev/null @@ -1,97 +0,0 @@ -import { BiError, BiListUl } from "react-icons/bi"; -import classNames from "classnames"; -import { VuiFlexContainer } from "../flex/FlexContainer"; -import { VuiFlexItem } from "../flex/FlexItem"; -import { VuiSpinner } from "../spinner/Spinner"; -import { VuiText } from "../typography/Text"; -import { VuiTextColor } from "../typography/TextColor"; -import { VuiIcon } from "../icon/Icon"; -import { VuiIconButton } from "../button/IconButton"; -import { VuiButtonSecondary } from "../button/ButtonSecondary"; -import { VuiSpacer } from "../spacer/Spacer"; -import { ChatTurn } from "./types"; - -type Props = { - turn: ChatTurn; - isInspectionEnabled?: boolean; - setInspectedTurn: (turn: ChatTurn) => void; - onRetry: (turn: ChatTurn) => void; -}; - -export const VuiChatTurn = ({ turn, isInspectionEnabled, setInspectedTurn, onRetry }: Props) => { - const turnClasses = classNames("vuiChatQuestion", { - "vuiChatQuestion--error": !turn.isLoading && turn.error - }); - - return ( -
- - -
-

{turn.question}

-
- - - {isInspectionEnabled && ( - - - - - } - onClick={() => setInspectedTurn(turn)} - /> - - )} - - -
- {turn.isLoading ? ( - - - - - - - -

- Thinking… -

- - - - ) : turn.error ? ( - <> - - - - - - - - - -

- {turn.error?.message} -

- - - - - - - onRetry(turn)}> - Ask again - - - ) : ( - turn.answer - )} -
-
- ); -}; diff --git a/docs/src/ui/components/chat/_index.scss b/docs/src/ui/components/chat/_index.scss deleted file mode 100644 index 1e38484..0000000 --- a/docs/src/ui/components/chat/_index.scss +++ /dev/null @@ -1,150 +0,0 @@ -@import "chatTurn"; - -$minChatHeight: 600px; -$minChatWidth: 600px; - -.vuiChatButton, -.vuiChat { - position: fixed; - right: $sizeXxs; - bottom: $sizeXxs; - z-index: $chatZIndex; -} - -.vuiChatButton-isHidden, -.vuiChat--closed { - // If we used display: none, then the button's animation would play every - // time the button is shown. - visibility: hidden; - // For some reason the buttons inside the header are visible for an extra frame - // after closing the chat. This fixes that flicker. - opacity: 0; -} - -.vuiChatButton { - padding: $sizeXs $sizeS; - font-size: $fontSizeStandard; - color: $colorText; - background-color: $colorPrimaryLightShade; - border: 1px solid $borderColor; - box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px; - transition: all $transitionSpeed; - animation: popUp 0.4s cubic-bezier(0.5, 0, 0.5, 1) 1; - - &:hover { - box-shadow: rgba(50, 50, 93, 0.25) 0px 6px 12px -2px, rgba(0, 0, 0, 0.3) 0px 3px 7px -3px; - translate: translateY(-20px); - } -} - -@keyframes popUp { - 0% { - transform: translateY(40px); - } - - 50% { - transform: translateY(-10px); - } - - 100% { - transform: translateY(0); - } -} - -.vuiChat { - display: flex; - flex-direction: column; - width: 100%; - max-width: 420px; - border-radius: $sizeXs; - overflow: hidden; - border: 1px solid $borderColor; - background-color: $colorLightShade; - - @media screen and (max-height: $minChatHeight) { - & { - bottom: $sizeXxs; - height: calc(100vh - 2 * #{$sizeXxs}); - } - - .vuiChat__conversation { - max-height: 100%; - } - } - - @media screen and (max-width: $minChatWidth) { - & { - right: $sizeXxs; - width: calc(100vw - 2 * #{$sizeXxs}); - max-width: 100% !important; - } - } -} - -.vuiChat--tall { - bottom: $sizeXxs; - height: calc(100vh - 2 * #{$sizeXxs}); - - .vuiChat__conversation { - max-height: 100%; - } -} - -.vuiChat--fullScreen { - height: calc(100vh - 2 * #{$sizeXxs}); - width: calc(100vw - 2 * #{$sizeXxs}); - max-width: 100% !important; - - .vuiChat__conversation { - max-height: 100%; - } -} - -.vuiChat__header { - padding: $sizeXs $sizeS; - font-size: $fontSizeStandard; - color: $colorText; - background-color: $colorPrimaryLightShade; - box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px; - // Ensure shadow overlaps on top of conversation. - z-index: 2; -} - -.vuiChat__conversation { - flex-grow: 1; - max-height: 400px; - overflow-y: auto; -} - -.vuiChat__introduction { - padding: $sizeM $sizeL 0; - font-size: $fontSizeStandard; - color: $colorFullShade; -} - -.vuiChat__turns { - font-size: $fontSizeStandard; -} - -.vuiChat__conversationActions { - padding: $sizeS; -} - -.vuiChat__input { - border-top: 1px solid $borderColorLight; - padding: $sizeXs $sizeS; -} - -.vuiChatPanel { - position: absolute; - z-index: 5; - top: $sizeXxs; - left: $sizeXxs; - right: $sizeXxs; - bottom: $sizeXxs; - padding: $sizeXxs $sizeS; - overflow-y: auto; - background-color: $colorEmptyShade; - border: 1px solid $borderColor; - box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px; -} diff --git a/docs/src/ui/components/chat/chatTurn.scss b/docs/src/ui/components/chat/chatTurn.scss deleted file mode 100644 index d78d39c..0000000 --- a/docs/src/ui/components/chat/chatTurn.scss +++ /dev/null @@ -1,38 +0,0 @@ -.vuiChatTurn { - position: relative; - left: 0; - box-shadow: rgba(50, 50, 93, 0.25) 0px 0 0 0, rgba(0, 0, 0, 0.16) 0px 1px 4px; - background-color: $colorEmptyShade; - padding: $sizeL $sizeS $sizeL $sizeL; - margin-right: $sizeXxs; - transition: all $transitionSpeed; - - &:hover { - box-shadow: rgba(50, 50, 93, 0.25) 0px 6px 12px -2px, rgba(0, 0, 0, 0.3) 0px 3px 7px -3px; - z-index: 1; - left: $sizeXxs; - } -} - -.vuiChatTurn + .vuiChatTurn { - margin-top: 1px; -} - -.vuiChatQuestion { - color: $colorAccent; - font-weight: $fontWeightBold; - font-size: $fontSizeStandard; - margin-bottom: $sizeXs; -} - -.vuiChatQuestion--error { - color: $colorDanger; -} - -.vuiChat__inspectButton { - margin-top: -$sizeXxs; -} - -.vuiChatAnswer { - color: $colorFullShade; -} diff --git a/docs/src/ui/components/chat/types.ts b/docs/src/ui/components/chat/types.ts deleted file mode 100644 index 15f2df2..0000000 --- a/docs/src/ui/components/chat/types.ts +++ /dev/null @@ -1,38 +0,0 @@ -import { SearchResult } from "../searchResult/SearchResult"; - -export type ChatTurn = { - question: string; - isLoading?: boolean; - error?: { - code?: string; - message: string; - }; - answer?: string; - query?: string; - language?: ChatLanguage; - results?: SearchResult[]; -}; - -export const CHAT_LANGUAGES = [ - "auto", - "eng", - "deu", - "fra", - "zho", - "kor", - "ara", - "rus", - "tha", - "nld", - "ita", - "por", - "spa", - "jpn", - "pol", - "tur", -] as const; - -export type ChatLanguage = (typeof CHAT_LANGUAGES)[number]; - -export const CHAT_STYLE_ORDER = ["closed", "condensed", "tall", "fullScreen"] as const; -export type ChatStyle = (typeof CHAT_STYLE_ORDER)[number]; diff --git a/docs/src/ui/components/code/Code.tsx b/docs/src/ui/components/code/Code.tsx deleted file mode 100644 index ffdf310..0000000 --- a/docs/src/ui/components/code/Code.tsx +++ /dev/null @@ -1,69 +0,0 @@ -import { useEffect } from "react"; -import Prism from "prismjs"; -import "prismjs/themes/prism.css"; -import "prismjs/components/prism-json"; -import "prismjs/components/prism-javascript"; -import "prismjs/components/prism-typescript"; -import "prismjs/components/prism-bash"; -import "prismjs/components/prism-jsx"; -import "prismjs/components/prism-tsx"; -import classNames from "classnames"; -import { BiClipboard } from "react-icons/bi"; -import { VuiIconButton } from "../button/IconButton"; -import { VuiIcon } from "../icon/Icon"; -import { CodeLanguage } from "./types"; - -type Props = { - language?: CodeLanguage; - onCopy?: () => void; - children?: string; - fullHeight?: boolean; - "data-testid"?: string; -}; - -// PrismJS clears highlighting when language-none is set. -export const VuiCode = ({ onCopy, language = "none", fullHeight, children = "", ...rest }: Props) => { - useEffect(() => { - Prism.highlightAll(); - }, [children, language]); - - const containerClasses = classNames("vuiCodeContainer", { - "vuiCodeContainer--fullHeight": fullHeight - }); - - const classes = classNames("vuiCode", `language-${language}`, { - "vuiCode--fullHeight": fullHeight - }); - - const testId = rest["data-testid"]; - - return ( -
- 
-        {children}
-
- - - - - } - aria-label="Copy to clipboard" - className="vuiCodeCopyButton" - onClick={() => { - navigator.clipboard.writeText(children); - if (onCopy) onCopy(); - }} - /> - - {/* Expose this for tests to assert against. */} - {testId && ( - - )} -
- ); -}; diff --git a/docs/src/ui/components/code/_index.scss b/docs/src/ui/components/code/_index.scss deleted file mode 100644 index 5e96028..0000000 --- a/docs/src/ui/components/code/_index.scss +++ /dev/null @@ -1,33 +0,0 @@ -.vuiCodeContainer { - position: relative; - border-left: $sizeXxs solid $colorMediumShade; - max-height: 480px; -} - -.vuiCodeContainer--fullHeight { - max-height: 100%; -} - -.vuiCodeCopyButton { - position: absolute; - right: $sizeXxs; - top: $sizeXxs; -} - -.vuiCodePre { - padding: 0 !important; - margin: 0 !important; - max-height: inherit; -} - -.vuiCode { - display: block; - width: 100%; - padding: $sizeM $sizeL; - background-color: $colorLightShade; - color: $colorText; - font-family: "Roboto Mono", monospace; - word-wrap: break-word; - white-space: pre-wrap; - font-size: $fontSizeSmall !important; -} diff --git a/docs/src/ui/components/code/types.ts b/docs/src/ui/components/code/types.ts deleted file mode 100644 index dd358f9..0000000 --- a/docs/src/ui/components/code/types.ts +++ /dev/null @@ -1 +0,0 @@ -export type CodeLanguage = "json" | "js" | "ts" | "jsx" | "tsx" | "bash" | "none"; diff --git a/docs/src/ui/components/copyButton/CopyButton.tsx b/docs/src/ui/components/copyButton/CopyButton.tsx deleted file mode 100644 index 7d0b07a..0000000 --- a/docs/src/ui/components/copyButton/CopyButton.tsx +++ /dev/null @@ -1,86 +0,0 @@ -import { useEffect, useState } from "react"; -import { VuiOptionsButton } from "../optionsButton/OptionsButton"; -import { Props as OptionsButtonProps } from "../optionsButton/OptionsButton"; -import { VuiIcon } from "../icon/Icon"; -import { BiCheck, BiClipboard } from "react-icons/bi"; -import { VuiButtonSecondary } from "../button/ButtonSecondary"; - -type Props = { - value: string; - options?: OptionsButtonProps["options"]; - size: OptionsButtonProps["size"]; - label?: string; - title?: string; -}; - -const sizeToIconSizeMap = { - xs: "s", - s: "s", - m: "m", - l: "m", - xl: "m" -} as const; - -export const VuiCopyButton = ({ value, options, label, size = "s", ...rest }: Props) => { - const [isOpen, setIsOpen] = useState(false); - const [isCopied, setIsCopied] = useState(false); - - useEffect(() => { - if (isCopied) { - const timeout = setTimeout(() => { - setIsCopied(false); - }, 2400); - - return () => clearTimeout(timeout); - } - }, [isCopied]); - - const icon = isCopied ? ( - - - - ) : ( - - - - ); - - const copy = (copyValue = value) => { - navigator.clipboard.writeText(copyValue); - setIsCopied(true); - }; - - return options ? ( - { - copy(); - }} - onSelectOption={(value) => { - copy(value); - setIsOpen(false); - }} - options={options} - {...rest} - > - {label} - - ) : ( - { - copy(value); - }} - {...rest} - > - {label} - - ); -}; diff --git a/docs/src/ui/components/drawer/Drawer.tsx b/docs/src/ui/components/drawer/Drawer.tsx deleted file mode 100644 index bd485bd..0000000 --- a/docs/src/ui/components/drawer/Drawer.tsx +++ /dev/null @@ -1,89 +0,0 @@ -import { ReactNode, useEffect, useRef } from "react"; -import classNames from "classnames"; -import { FocusOn } from "react-focus-on"; -import { VuiFlexContainer } from "../flex/FlexContainer"; -import { VuiFlexItem } from "../flex/FlexItem"; -import { VuiIconButton } from "../button/IconButton"; -import { VuiIcon } from "../icon/Icon"; -import { BiX } from "react-icons/bi"; -import { VuiPortal } from "../portal/Portal"; -import { VuiScreenBlock } from "../screenBlock/ScreenBlock"; - -const COLOR = ["primary", "danger"] as const; - -type Props = { - className?: string; - title: ReactNode; - children: ReactNode; - isOpen?: boolean; - onClose?: () => void; - color?: (typeof COLOR)[number]; -}; - -export const VuiDrawer = ({ className, color = "primary", title, children, isOpen, onClose, ...rest }: Props) => { - const returnFocusElRef = useRef(null); - - // Return focus on unmount. - useEffect(() => { - if (isOpen) { - returnFocusElRef.current = document.activeElement as HTMLElement; - } else { - returnFocusElRef.current?.focus(); - returnFocusElRef.current = null; - } - }, [isOpen]); - - // Allow contents to respond to blur events before unmounting. - const onCloseDelayed = () => { - window.setTimeout(() => { - onClose?.(); - }, 0); - }; - - const classes = classNames("vuiDrawer", `vuiDrawer--${color}`, className); - - return ( - - {isOpen && ( - - -
-
- - {title} - - {onClose && ( - - - - - } - /> - - )} - -
- -
-
{children}
-
-
- - - )} - - ); -}; diff --git a/docs/src/ui/components/drawer/_index.scss b/docs/src/ui/components/drawer/_index.scss deleted file mode 100644 index d6c9202..0000000 --- a/docs/src/ui/components/drawer/_index.scss +++ /dev/null @@ -1,62 +0,0 @@ -@use "sass:map"; - -$drawerWidth: 680px; - -@keyframes drawerIn { - 0% { - right: -$drawerWidth; - } - - 100% { - right: 0; - } -} - -.vuiDrawer { - display: flex; - flex-direction: column; - position: fixed; - top: 0; - right: 0; - bottom: 0; - width: 100%; - max-width: $drawerWidth; - background-color: $colorEmptyShade; - border-left: 1px solid $borderColor; - z-index: $drawerZIndex; - animation: drawerIn $transitionSpeed cubic-bezier(0, 1, 0, 1); -} - -.vuiDrawerHeader { - padding: $sizeL $sizeL; -} - -.vuiDrawerContent { - overflow-y: auto; - overscroll-behavior: contain; -} - -.vuiDrawerContent__inner { - padding: $sizeL $sizeL; -} - -// Color -$color: ( - primary: ( - "background-color": $colorPrimaryLightShade, - "color": $colorText - ), - danger: ( - "background-color": $colorDangerLightShade, - "color": $colorDanger - ) -); - -@each $colorName, $colorValue in $color { - .vuiDrawer--#{$colorName} { - .vuiDrawerHeader { - background-color: #{map.get($colorValue, "background-color")}; - color: #{map.get($colorValue, "color")}; - } - } -} diff --git a/docs/src/ui/components/flex/FlexContainer.tsx b/docs/src/ui/components/flex/FlexContainer.tsx deleted file mode 100644 index 82799b6..0000000 --- a/docs/src/ui/components/flex/FlexContainer.tsx +++ /dev/null @@ -1,80 +0,0 @@ -import { ReactNode } from "react"; -import classNames from "classnames"; -import { FlexSpacing } from "./types"; - -const alignItemsToClassNameMap = { - baseline: "vuiFlexContainer--alignItemsBaseline", - center: "vuiFlexContainer--alignItemsCenter", - end: "vuiFlexContainer--alignItemsEnd", - start: "vuiFlexContainer--alignItemsStart", - stretch: "vuiFlexContainer--alignItemsStretch" -} as const; - -const directionToClassNameMap = { - column: "vuiFlexContainer--directionColumn", - columnReverse: "vuiFlexContainer--directionColumnReverse", - row: "vuiFlexContainer--directionRow", - rowReverse: "vuiFlexContainer--directionRowReverse" -} as const; - -const justifyContentToClassNameMap = { - center: "vuiFlexContainer--justifyContentCenter", - end: "vuiFlexContainer--justifyContentEnd", - start: "vuiFlexContainer--justifyContentStart", - spaceAround: "vuiFlexContainer--justifyContentSpaceAround", - spaceBetween: "vuiFlexContainer--justifyContentSpaceBetween", - spaceEvenly: "vuiFlexContainer--justifyContentSpaceEvenly" -} as const; - -const spacingToClassNameMap: Record = { - none: "vuiFlexContainer--spacingNone", - xxs: "vuiFlexContainer--spacingXxs", - xs: "vuiFlexContainer--spacingXs", - s: "vuiFlexContainer--spacingS", - m: "vuiFlexContainer--spacingM", - l: "vuiFlexContainer--spacingL", - xl: "vuiFlexContainer--spacingXl", - xxl: "vuiFlexContainer--spacingXxl" -} as const; - -export type Props = { - children?: ReactNode; - alignItems?: keyof typeof alignItemsToClassNameMap; - direction?: keyof typeof directionToClassNameMap; - justifyContent?: keyof typeof justifyContentToClassNameMap; - spacing?: FlexSpacing; - wrap?: boolean; - className?: string; - fullWidth?: boolean; -}; - -export const VuiFlexContainer = ({ - children, - alignItems = "stretch", - direction = "row", - justifyContent = "start", - spacing = "m", - wrap, - className, - fullWidth, - ...rest -}: Props) => { - const classes = classNames( - className, - "vuiFlexContainer", - alignItemsToClassNameMap[alignItems], - directionToClassNameMap[direction], - justifyContentToClassNameMap[justifyContent], - spacingToClassNameMap[spacing], - { - "vuiFlexContainer--wrap": wrap, - "vuiFlexContainer--fullWidth": fullWidth - } - ); - - return ( -
- {children} -
- ); -}; diff --git a/docs/src/ui/components/flex/FlexItem.tsx b/docs/src/ui/components/flex/FlexItem.tsx deleted file mode 100644 index a4bc915..0000000 --- a/docs/src/ui/components/flex/FlexItem.tsx +++ /dev/null @@ -1,58 +0,0 @@ -import classNames from "classnames"; -import { ReactNode } from "react"; - -const GROW = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10] as const; -const SHRINK = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10] as const; -const BASIS = ["auto", "content", "fill", "maxContent", "minContent", "none"] as const; - -const alignItemsToClassNameMap = { - baseline: "vuiFlexItem--alignItemsBaseline", - center: "vuiFlexItem--alignItemsCenter", - end: "vuiFlexItem--alignItemsEnd", - start: "vuiFlexItem--alignItemsStart", - stretch: "vuiFlexItem--alignItemsStretch" -} as const; - -type Props = { - children?: ReactNode; - grow?: (typeof GROW)[number] | boolean; - shrink?: (typeof SHRINK)[number] | boolean; - basis?: (typeof BASIS)[number]; - alignItems?: keyof typeof alignItemsToClassNameMap; - className?: string; - truncate?: boolean; -}; - -export const VuiFlexItem = ({ - children, - grow, - shrink, - basis = "auto", - alignItems = "stretch", - className, - truncate, - ...rest -}: Props) => { - const isGrowNone = grow === false; - const isShrinkNone = shrink === false; - - const classes = classNames( - "vuiFlexItem", - `vuiFlexItem--${basis}`, - alignItemsToClassNameMap[alignItems], - { - [`vuiFlexItem--flexGrow${grow}`]: typeof grow === "number", - "vuiFlexItem--flexGrowNone": isGrowNone, - [`vuiFlexItem--flexShrink${shrink}`]: typeof shrink === "number", - "vuiFlexItem--flexShrinkNone": isShrinkNone, - "vuiFlexItem--truncate": truncate - }, - className - ); - - return ( -
- {children} -
- ); -}; diff --git a/docs/src/ui/components/flex/_flexContainer.scss b/docs/src/ui/components/flex/_flexContainer.scss deleted file mode 100644 index 3f2b2b3..0000000 --- a/docs/src/ui/components/flex/_flexContainer.scss +++ /dev/null @@ -1,79 +0,0 @@ -.vuiFlexContainer { - display: flex; - align-items: stretch; -} - -.vuiFlexContainer--fullWidth { - width: 100%; -} - -.vuiFlexContainer--wrap { - flex-wrap: wrap; -} - -// alignItems -$alignItems: ( - alignItemsBaseline: baseline, - alignItemsCenter: center, - alignItemsEnd: end, - alignItemsStart: start, - alignItemsStretch: stretch -); - -@each $alignItemsName, $alignItemsValue in $alignItems { - .vuiFlexContainer--#{$alignItemsName} { - align-items: $alignItemsValue; - } -} - -// direction -$direction: ( - directionColumn: column, - directionColumnReverse: column-reverse, - directionRow: row, - directionRowReverse: row-reverse -); - -@each $directionName, $directionValue in $direction { - .vuiFlexContainer--#{$directionName} { - flex-direction: $directionValue; - } -} - -// justifyContent -$justifyContent: ( - justifyContentCenter: center, - justifyContentEnd: end, - justifyContentStart: start, - justifyContentSpaceAround: space-around, - justifyContentSpaceBetween: space-between, - justifyContentSpaceEvenly: space-evenly -); - -@each $justifyContentName, $justifyContentValue in $justifyContent { - .vuiFlexContainer--#{$justifyContentName} { - justify-content: $justifyContentValue; - } -} - -// spacing -$spacing: ( - spacingNone: 0, - spacingXxs: $sizeXxs, - spacingXs: $sizeXs, - spacingS: $sizeS, - spacingM: $sizeM, - spacingL: $sizeL, - spacingXl: $sizeXl, - spacingXxl: $sizeXxl -); - -@each $spacingName, $spacingValue in $spacing { - .vuiFlexContainer--#{$spacingName} { - margin: -$spacingValue * 0.5; - - & > .vuiFlexItem { - margin: $spacingValue * 0.5; - } - } -} diff --git a/docs/src/ui/components/flex/_flexItem.scss b/docs/src/ui/components/flex/_flexItem.scss deleted file mode 100644 index 42eeccc..0000000 --- a/docs/src/ui/components/flex/_flexItem.scss +++ /dev/null @@ -1,64 +0,0 @@ -.vuiFlexItem { - display: flex; - flex-direction: column; - align-items: flex-start; -} - -.vuiFlexItem--truncate { - min-width: 40px; -} - -// alignItems -$alignItems: ( - alignItemsBaseline: baseline, - alignItemsCenter: center, - alignItemsEnd: end, - alignItemsStart: start, - alignItemsStretch: stretch -); - -@each $alignItemsName, $alignItemsValue in $alignItems { - .vuiFlexItem--#{$alignItemsName} { - align-items: $alignItemsValue; - } -} - -// Grow -@for $i from 0 through 10 { - .vuiFlexItem--flexGrow#{$i} { - flex-grow: $i; - } -} - -.vuiFlexItem--flexGrowNone { - flex-basis: auto; - flex-grow: 0; -} - -// Shrink -@for $i from 0 through 10 { - .vuiFlexItem--flexShrink#{$i} { - flex-shrink: $i; - } -} - -.vuiFlexItem--flexShrinkNone { - flex-basis: auto; - flex-shrink: 0; -} - -// Basis -$basis: ( - auto: auto, - content: content, - fill: fill, - maxContent: max-content, - minContent: min-content, - none: 0 -); - -@each $basisName, $basisValue in $basis { - .vuiFlexItem--#{$basisName} { - flex-basis: $basisValue; - } -} diff --git a/docs/src/ui/components/flex/_index.scss b/docs/src/ui/components/flex/_index.scss deleted file mode 100644 index 313513d..0000000 --- a/docs/src/ui/components/flex/_index.scss +++ /dev/null @@ -1,2 +0,0 @@ -@import "./flexContainer"; -@import "./flexItem"; diff --git a/docs/src/ui/components/flex/types.ts b/docs/src/ui/components/flex/types.ts deleted file mode 100644 index 33ec952..0000000 --- a/docs/src/ui/components/flex/types.ts +++ /dev/null @@ -1,2 +0,0 @@ -export const FLEX_SPACING = ["none", "xxs", "xs", "s", "m", "l", "xl", "xxl"] as const; -export type FlexSpacing = (typeof FLEX_SPACING)[number]; diff --git a/docs/src/ui/components/form/_index.scss b/docs/src/ui/components/form/_index.scss deleted file mode 100644 index ea6c115..0000000 --- a/docs/src/ui/components/form/_index.scss +++ /dev/null @@ -1,7 +0,0 @@ -@import "checkbox/index"; -@import "input/index"; -@import "label/index"; -@import "radioButton/index"; -@import "select/index"; -@import "superRadioGroup/index"; -@import "textArea/index"; diff --git a/docs/src/ui/components/form/checkbox/Checkbox.tsx b/docs/src/ui/components/form/checkbox/Checkbox.tsx deleted file mode 100644 index 019a012..0000000 --- a/docs/src/ui/components/form/checkbox/Checkbox.tsx +++ /dev/null @@ -1,36 +0,0 @@ -import { createId } from "../../../utils/createId"; -import { VuiFlexContainer } from "../../flex/FlexContainer"; -import { VuiFlexItem } from "../../flex/FlexItem"; - -type Props = { - checked: boolean; - onChange: () => void; - label?: string; - disabled?: boolean; -}; - -export const VuiCheckbox = ({ checked, onChange, label, disabled, ...rest }: Props) => { - const id = createId(); - - const checkbox = ( - - ); - - if (!label) { - return checkbox; - } - - return ( - - - {checkbox} - - - - - - - ); -}; diff --git a/docs/src/ui/components/form/checkbox/_index.scss b/docs/src/ui/components/form/checkbox/_index.scss deleted file mode 100644 index 9efd3b4..0000000 --- a/docs/src/ui/components/form/checkbox/_index.scss +++ /dev/null @@ -1,3 +0,0 @@ -.vuiCheckboxLabel { - font-size: $fontSizeStandard; -} diff --git a/docs/src/ui/components/form/index.ts b/docs/src/ui/components/form/index.ts deleted file mode 100644 index 555a677..0000000 --- a/docs/src/ui/components/form/index.ts +++ /dev/null @@ -1,10 +0,0 @@ -export { VuiCheckbox } from "./checkbox/Checkbox"; -export { VuiLabel } from "./label/Label"; -export { VuiNumberInput } from "./input/NumberInput"; -export { VuiRadioButton } from "./radioButton/RadioButton"; -export { VuiSelect } from "./select/Select"; -export { VuiSuperRadioGroup } from "./superRadioGroup/SuperRadioGroup"; -export { VuiTextInput } from "./input/TextInput"; -export { VuiTextArea } from "./textArea/TextArea"; - -export type { RadioButtonConfig } from "./superRadioGroup/types"; diff --git a/docs/src/ui/components/form/input/NumberInput.tsx b/docs/src/ui/components/form/input/NumberInput.tsx deleted file mode 100644 index 58dbcfd..0000000 --- a/docs/src/ui/components/form/input/NumberInput.tsx +++ /dev/null @@ -1,94 +0,0 @@ -import classNames from "classnames"; -import { forwardRef, useEffect, useState } from "react"; - -const SIZE = ["m", "l"] as const; - -type Props = { - className?: string; - id?: string; - isInvalid?: boolean; - value?: number; - size?: (typeof SIZE)[number]; - fullWidth?: boolean; - onChange: (value?: number) => void; - max?: number; - min?: number; - step?: number; - autoFocus?: boolean; -}; - -export const VuiNumberInput = forwardRef( - ( - { className, id, max, min, step, value, size = "m", onChange, fullWidth, isInvalid, autoFocus, ...rest }: Props, - ref - ) => { - const [localValue, setLocalValue] = useState(value); - - // This is a hacky solution to the number input misbehaving on Firefox. - // If we were to apply the value and onChange values directly to the - // value and onChange props of the input, then a user who: - // 1. Selects all - // 2. Types 1.0 - // will have the input show "0" as soon as they enter a decimal point. - // When that character is entered, onChange is called with undefined. - // This value gets stored in the value state, which resets the value to 0. - // For some reason, using a useState hook to store the value doesn't have - // this problem. - useEffect(() => { - // Reflect the upstream value when it changes. Ignore 0 - // because that indicates the user has entered a decimal point. - if (value !== 0) { - setLocalValue(value); - } - }, [value]); - - // Part of the hacky solution above. - useEffect(() => { - // Set value locally so an undefined value doesn't reset it to 0. - // Pass the value upstream, e.g. so it can be persisted. - onChange(localValue ?? 0); - }, [localValue]); - - const classes = classNames( - "vuiInput", - `vuiInput--${size}`, - { - "vuiInput-isInvalid": isInvalid, - "vuiInput--fullWidth": fullWidth - }, - className - ); - - const onChangeValue = (e: React.ChangeEvent) => { - // Enable resetting the value to undefined. - if (e.target.value === "") return setLocalValue(undefined); - - const numberValue = Number(e.target.value); - if (isNaN(numberValue)) return setLocalValue(undefined); - - setLocalValue(Number(e.target.value)); - }; - - const onBlur = () => { - if (min !== undefined && value !== undefined && value < min) onChange(min); - if (max !== undefined && value !== undefined && value > max) onChange(max); - }; - - return ( - - ); - } -); diff --git a/docs/src/ui/components/form/input/TextInput.tsx b/docs/src/ui/components/form/input/TextInput.tsx deleted file mode 100644 index d17cecc..0000000 --- a/docs/src/ui/components/form/input/TextInput.tsx +++ /dev/null @@ -1,77 +0,0 @@ -import classNames from "classnames"; -import { forwardRef } from "react"; - -const SIZE = ["m", "l"] as const; - -type Props = { - className?: string; - id?: string; - name?: string; - isInvalid?: boolean; - value?: string; - size?: (typeof SIZE)[number]; - fullWidth?: boolean; - onChange: (event: React.ChangeEvent) => void; - placeholder?: string; - onSubmit?: () => void; - maxLength?: number; - autoComplete?: boolean; - autoFocus?: boolean; -}; - -export const VuiTextInput = forwardRef( - ( - { - className, - id, - placeholder, - value, - size = "m", - onChange, - fullWidth, - onSubmit, - isInvalid, - name, - autoComplete, - autoFocus, - ...rest - }: Props, - ref - ) => { - const classes = classNames( - "vuiInput", - "vuiInput--text", - `vuiInput--${size}`, - { - "vuiInput-isInvalid": isInvalid, - "vuiInput--fullWidth": fullWidth - }, - className - ); - - const handleKeyDown = (e: React.KeyboardEvent) => { - if (e.key === "Enter") { - e.preventDefault(); - e.stopPropagation(); - onSubmit?.(); - } - }; - - return ( - - ); - } -); diff --git a/docs/src/ui/components/form/input/_index.scss b/docs/src/ui/components/form/input/_index.scss deleted file mode 100644 index ad7e3c9..0000000 --- a/docs/src/ui/components/form/input/_index.scss +++ /dev/null @@ -1,24 +0,0 @@ -.vuiInput { - appearance: none; - border-radius: $sizeXxs; - border: 1px solid $colorMediumShade; - background-color: $colorEmptyShade; -} - -.vuiInput--m { - padding: $sizeXs $size; - font-size: $fontSizeStandard; -} - -.vuiInput--l { - padding: $sizeS $sizeM; - font-size: $fontSizeLarge; -} - -.vuiInput--fullWidth { - width: 100%; -} - -.vuiInput-isInvalid { - border-color: $colorDanger; -} diff --git a/docs/src/ui/components/form/label/Label.tsx b/docs/src/ui/components/form/label/Label.tsx deleted file mode 100644 index a3ef8f1..0000000 --- a/docs/src/ui/components/form/label/Label.tsx +++ /dev/null @@ -1,17 +0,0 @@ -import classNames from "classnames"; - -type Props = { - className?: string; - labelFor?: string; - children: React.ReactNode; -}; - -export const VuiLabel = ({ className, labelFor, children, ...rest }: Props) => { - const classes = classNames("vuiLabel", className); - - return ( - - ); -}; diff --git a/docs/src/ui/components/form/label/_index.scss b/docs/src/ui/components/form/label/_index.scss deleted file mode 100644 index aa4a298..0000000 --- a/docs/src/ui/components/form/label/_index.scss +++ /dev/null @@ -1,5 +0,0 @@ -.vuiLabel { - font-size: $labelFontSize; - font-weight: $labelFontWeight; - color: $labelColor; -} diff --git a/docs/src/ui/components/form/radioButton/RadioButton.tsx b/docs/src/ui/components/form/radioButton/RadioButton.tsx deleted file mode 100644 index be07d59..0000000 --- a/docs/src/ui/components/form/radioButton/RadioButton.tsx +++ /dev/null @@ -1,37 +0,0 @@ -import { createId } from "../../../utils/createId"; -import { VuiFlexContainer } from "../../flex/FlexContainer"; -import { VuiFlexItem } from "../../flex/FlexItem"; - -type Props = { - checked: boolean; - onChange: () => void; - groupName: string; - label?: string; - disabled?: boolean; -}; - -export const VuiRadioButton = ({ checked, onChange, label, groupName, disabled, ...rest }: Props) => { - const id = createId(); - - const radioButton = ( - - ); - - if (!label) { - return radioButton; - } - - return ( - - - {radioButton} - - - - - - - ); -}; diff --git a/docs/src/ui/components/form/radioButton/_index.scss b/docs/src/ui/components/form/radioButton/_index.scss deleted file mode 100644 index 1c76f88..0000000 --- a/docs/src/ui/components/form/radioButton/_index.scss +++ /dev/null @@ -1,3 +0,0 @@ -.vuiRadioButtonLabel { - font-size: $fontSizeStandard; -} diff --git a/docs/src/ui/components/form/select/Select.tsx b/docs/src/ui/components/form/select/Select.tsx deleted file mode 100644 index 2323d53..0000000 --- a/docs/src/ui/components/form/select/Select.tsx +++ /dev/null @@ -1,61 +0,0 @@ -import classNames from "classnames"; -import { VuiIcon } from "../../icon/Icon"; -import { BiCaretDown } from "react-icons/bi"; -import { forwardRef } from "react"; - -const SIZE = ["m", "l"] as const; - -type Props = { - className?: string; - id?: string; - name?: string; - isInvalid?: boolean; - options: { - text: string; - value: string; - }[]; - value: string; - size?: (typeof SIZE)[number]; - onChange: (event: React.ChangeEvent) => void; -}; - -const sizeToIconSizeMap = { - m: "m", - l: "l" -} as const; - -export const VuiSelect = forwardRef( - ({ className, id, name, options, value, size = "m", onChange, isInvalid, ...rest }: Props, ref) => { - const classes = classNames( - "vuiSelect", - `vuiSelect--${size}`, - { - "vuiSelect-isInvalid": isInvalid - }, - className - ); - - const renderedOptions = options.map((option, index) => { - const { text, ...rest } = option; - return ( - - ); - }); - - return ( -
- - -
- - - -
-
- ); - } -); diff --git a/docs/src/ui/components/form/select/_index.scss b/docs/src/ui/components/form/select/_index.scss deleted file mode 100644 index 4776a43..0000000 --- a/docs/src/ui/components/form/select/_index.scss +++ /dev/null @@ -1,52 +0,0 @@ -.vuiSelect { - position: relative; - max-width: $sizeL * 10; - width: 100%; - - select { - background-color: $colorEmptyShade; - appearance: none; - border-radius: $sizeXxs; - border: 1px solid $colorMediumShade; - color: $colorFullShade; - width: 100%; - } -} - -.vuiSelect__caret { - pointer-events: none; - position: absolute; - bottom: 0; - left: auto; - right: 12px; -} - -.vuiSelect--m { - select { - padding: $sizeXs $size; - font-size: $fontSizeStandard; - padding-right: 32px; - } - - .vuiSelect__caret { - top: calc(50% - 10px); - } -} - -.vuiSelect--l { - select { - padding: $sizeS $sizeM; - font-size: $fontSizeLarge; - padding-right: 48px; - } - - .vuiSelect__caret { - top: calc(50% - 14px); - } -} - -.vuiSelect-isInvalid { - select { - border-color: $colorDanger; - } -} diff --git a/docs/src/ui/components/form/superRadioGroup/SuperRadioButton.tsx b/docs/src/ui/components/form/superRadioGroup/SuperRadioButton.tsx deleted file mode 100644 index 6edeff9..0000000 --- a/docs/src/ui/components/form/superRadioGroup/SuperRadioButton.tsx +++ /dev/null @@ -1,44 +0,0 @@ -import { createId } from "../../../utils/createId"; -import { VuiFlexContainer } from "../../flex/FlexContainer"; -import { VuiFlexItem } from "../../flex/FlexItem"; -import { VuiSpacer } from "../../spacer/Spacer"; -import { VuiText } from "../../typography/Text"; -import { VuiTextColor } from "../../typography/TextColor"; -import { RadioButtonConfig } from "./types"; - -type Props = RadioButtonConfig & { - groupName: string; - onChange: (value: string) => void; -}; - -export const VuiSuperRadioButton = ({ label, description, value, checked, onChange, groupName, ...rest }: Props) => { - const id = createId(); - - return ( - - ); -}; diff --git a/docs/src/ui/components/form/superRadioGroup/SuperRadioGroup.tsx b/docs/src/ui/components/form/superRadioGroup/SuperRadioGroup.tsx deleted file mode 100644 index 3b4b1f5..0000000 --- a/docs/src/ui/components/form/superRadioGroup/SuperRadioGroup.tsx +++ /dev/null @@ -1,20 +0,0 @@ -import { createId } from "../../../utils/createId"; -import { VuiSuperRadioButton } from "./SuperRadioButton"; -import { RadioButtonConfig } from "./types"; - -type Props = { - group: RadioButtonConfig[]; - onChange: (value: string) => void; -}; - -export const VuiSuperRadioGroup = ({ group, onChange }: Props) => { - const groupName = createId(); - - return ( -
- {group.map((item) => ( - - ))} -
- ); -}; diff --git a/docs/src/ui/components/form/superRadioGroup/_index.scss b/docs/src/ui/components/form/superRadioGroup/_index.scss deleted file mode 100644 index d8d0119..0000000 --- a/docs/src/ui/components/form/superRadioGroup/_index.scss +++ /dev/null @@ -1,23 +0,0 @@ -.vuiSuperRadioGroup { - display: grid; - gap: $sizeXs; -} - -.vuiSuperRadioButton { - display: block; - width: 100%; - border-radius: $sizeXs; - padding: $sizeS $sizeL; - cursor: pointer; - text-decoration: none; - transition: all $transitionSpeed; - text-decoration-color: $colorText; - text-align: left; - background-color: $colorLightShade; - - &:hover { - text-decoration: underline; - text-decoration-color: $colorText; - background-color: $colorPrimaryLightShade; - } -} diff --git a/docs/src/ui/components/form/superRadioGroup/types.ts b/docs/src/ui/components/form/superRadioGroup/types.ts deleted file mode 100644 index c29360d..0000000 --- a/docs/src/ui/components/form/superRadioGroup/types.ts +++ /dev/null @@ -1,8 +0,0 @@ -export type RadioButtonConfig = { - label: React.ReactNode; - description?: React.ReactNode; - value: string; - checked: boolean; - disabled?: boolean; - "data-testid"?: string; -}; diff --git a/docs/src/ui/components/form/textArea/TextArea.tsx b/docs/src/ui/components/form/textArea/TextArea.tsx deleted file mode 100644 index 215526b..0000000 --- a/docs/src/ui/components/form/textArea/TextArea.tsx +++ /dev/null @@ -1,38 +0,0 @@ -import { forwardRef } from "react"; -import classNames from "classnames"; - -type Props = { - className?: string; - id?: string; - name?: string; - value?: string; - fullWidth?: boolean; - onChange: (event: React.ChangeEvent) => void; - placeholder?: string; - maxLength?: number; -}; - -export const VuiTextArea = forwardRef( - ({ className, id, placeholder, value, onChange, fullWidth, name, ...rest }: Props, ref) => { - const classes = classNames( - "vuiTextArea", - { - "vuiTextArea--fullWidth": fullWidth - }, - className - ); - - return ( -