From 048dac30edfd25db66e63beb47024d3f40fd2420 Mon Sep 17 00:00:00 2001 From: Jono M Date: Wed, 8 Nov 2023 12:33:18 +0000 Subject: [PATCH] Extracted AdminX design system to a separate package (#18878) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit refs https://github.com/TryGhost/Product/issues/4105 --- ### 🤖 Generated by Copilot at 2edba98 This pull request introduces a new monorepo package called `admin-x-design`, which contains components, design guidelines and documentation for building apps in Ghost Admin. It also moves some existing components and files from the deprecated `admin-x-settings` package to the new `admin-x-design` package, and updates some styles and rules to use TailwindCSS. The purpose of these changes is to improve the consistency, maintainability and usability of the Ghost Admin UI. --- .github/scripts/dev.js | 16 +- apps/admin-x-design/.eslintrc.cjs | 41 +++ apps/admin-x-design/.gitignore | 2 + .../.storybook}/Inter.ttf | Bin .../.storybook/adminx-theme.tsx | 0 .../.storybook/main.tsx | 13 +- .../.storybook/manager.tsx | 0 .../.storybook/preview.tsx | 16 +- .../.storybook}/storybook.css | 31 +- apps/admin-x-design/README.md | 23 ++ apps/admin-x-design/package.json | 75 +++++ apps/admin-x-design/postcss.config.js | 8 + .../styles => admin-x-design}/preflight.css | 8 +- .../src}/Boilerplate.stories.tsx | 0 .../src}/Boilerplate.tsx | 0 apps/admin-x-design/src/DesignSystemApp.tsx | 27 ++ .../src}/assets/icons/add.svg | 0 .../src}/assets/icons/align-center.svg | 0 .../src}/assets/icons/align-left.svg | 0 .../src}/assets/icons/angle-brackets.svg | 0 .../src}/assets/icons/arrow-bottom-left.svg | 0 .../src}/assets/icons/arrow-bottom-right.svg | 0 .../src}/assets/icons/arrow-down.svg | 0 .../src}/assets/icons/arrow-left.svg | 0 .../src}/assets/icons/arrow-right.svg | 0 .../src}/assets/icons/arrow-top-left.svg | 0 .../src}/assets/icons/arrow-top-right.svg | 0 .../src}/assets/icons/arrow-up.svg | 0 .../src}/assets/icons/at-sign.svg | 0 .../src}/assets/icons/baseline-chart.svg | 0 .../src}/assets/icons/bills.svg | 0 .../src}/assets/icons/book-open.svg | 0 .../src}/assets/icons/brackets.svg | 0 .../src}/assets/icons/check-circle.svg | 0 .../src}/assets/icons/check.svg | 0 .../src}/assets/icons/chevron-down.svg | 0 .../src}/assets/icons/chevron-left.svg | 0 .../src}/assets/icons/chevron-right.svg | 0 .../src}/assets/icons/chevron-up.svg | 0 .../src}/assets/icons/close.svg | 0 .../src}/assets/icons/comment.svg | 0 .../src}/assets/icons/crown.svg | 0 .../src}/assets/icons/discount.svg | 0 .../src}/assets/icons/duplicate.svg | 0 .../src}/assets/icons/ellipsis.svg | 0 .../src}/assets/icons/email-check.svg | 0 .../src}/assets/icons/email.svg | 0 .../src}/assets/icons/emailfield.svg | 0 .../src}/assets/icons/eyedropper.svg | 0 .../src}/assets/icons/facebook.svg | 0 .../src}/assets/icons/finger-up.svg | 0 .../src}/assets/icons/hamburger.svg | 0 .../src}/assets/icons/heart.svg | 0 .../src}/assets/icons/integration.svg | 0 .../src}/assets/icons/key.svg | 0 .../src}/assets/icons/labs-flask.svg | 0 .../src}/assets/icons/language.svg | 0 .../src}/assets/icons/laptop.svg | 0 .../src}/assets/icons/layer.svg | 0 .../src}/assets/icons/like.svg | 0 .../src}/assets/icons/link-broken.svg | 0 .../src}/assets/icons/lock-locked.svg | 0 .../src}/assets/icons/lock-unlocked.svg | 0 .../src}/assets/icons/magnifying-glass.svg | 0 .../src}/assets/icons/mail-block.svg | 0 .../src}/assets/icons/megaphone.svg | 0 .../src}/assets/icons/mobile.svg | 0 .../src}/assets/icons/modules-3.svg | 0 .../src}/assets/icons/money-bags.svg | 0 .../src}/assets/icons/navigation.svg | 0 .../src}/assets/icons/palette.svg | 0 .../src}/assets/icons/pen.svg | 0 .../src}/assets/icons/picture.svg | 0 .../src}/assets/icons/piggybank.svg | 0 .../src}/assets/icons/portal.svg | 0 .../src}/assets/icons/question-circle.svg | 0 .../src}/assets/icons/recepients.svg | 0 .../src}/assets/icons/single-user-block.svg | 0 .../src}/assets/icons/single-user-fill.svg | 0 .../src}/assets/icons/textfield.svg | 0 .../src}/assets/icons/thumbs-down.svg | 0 .../src}/assets/icons/thumbs-up.svg | 0 .../src}/assets/icons/time-back.svg | 0 .../src}/assets/icons/trash.svg | 0 .../src}/assets/icons/twitter-x.svg | 0 .../src}/assets/icons/unsplash-logo.svg | 0 .../src}/assets/icons/upload.svg | 0 .../src}/assets/icons/user-add.svg | 0 .../src}/assets/icons/user-page.svg | 0 .../src}/assets/icons/warning.svg | 0 .../src}/assets/icons/world-clock.svg | 0 .../src}/assets/images/facebook-logo.svg | 0 .../src}/assets/images/ghost-logo.svg | 0 .../src}/assets/images/ghost-orb.svg | 0 .../src}/assets/images/google-logo.svg | 0 .../src}/assets/images/twitter-logo.svg | 0 .../src}/assets/images/x-logo.svg | 0 .../src}/docs/Colors.mdx | 0 .../src}/docs/ErrorHandling.mdx | 0 .../src}/docs/Icons.mdx | 0 .../src}/docs/Welcome.mdx | 4 +- .../src}/docs/assets/adminx-screenshot.png | Bin .../src}/docs/assets/apps.svg | 0 .../src}/docs/assets/blocks.svg | 0 .../src}/docs/assets/circle-menu.svg | 0 .../src}/docs/assets/code-brackets.svg | 0 .../src}/docs/assets/colors.svg | 0 .../src}/docs/assets/comments.svg | 0 .../src}/docs/assets/direction.svg | 0 .../src}/docs/assets/ds-structure.png | Bin .../src}/docs/assets/flow.svg | 0 .../src}/docs/assets/global-error-example.png | Bin .../src}/docs/assets/local-error-example.png | Bin .../src}/docs/assets/page-error-example.png | Bin .../src}/docs/assets/plugin.svg | 0 .../src}/docs/assets/repo.svg | 0 .../src}/docs/assets/stackalt.svg | 0 .../src}/docs/assets/streamline-settings.png | Bin .../src}/docs/assets/style-guide-layout.png | Bin .../src}/docs/assets/style-guide.png | Bin .../src}/docs/assets/tower.svg | 0 .../src}/global/Avatar.stories.tsx | 0 .../src}/global/Avatar.tsx | 4 +- .../src}/global/Banner.stories.tsx | 0 .../src}/global/Banner.tsx | 6 +- .../src}/global/Breadcrumbs.stories.tsx | 0 .../src}/global/Breadcrumbs.tsx | 8 +- .../src}/global/Button.stories.tsx | 0 .../src}/global/Button.tsx | 0 .../src}/global/ButtonGroup.stories.tsx | 0 .../src}/global/ButtonGroup.tsx | 6 +- .../src}/global/ErrorBoundary.stories.tsx | 0 .../src}/global/ErrorBoundary.tsx | 9 +- .../src}/global/Heading.stories.tsx | 0 .../src}/global/Heading.tsx | 10 +- .../src}/global/Hint.stories.tsx | 0 .../src}/global/Hint.tsx | 4 +- .../src}/global/Icon.stories.tsx | 0 .../src}/global/Icon.tsx | 8 +- .../src}/global/IconLabel.stories.tsx | 0 .../src}/global/IconLabel.tsx | 6 +- .../global/InfiniteScrollListener.stories.tsx | 0 .../src}/global/InfiniteScrollListener.tsx | 12 +- .../src}/global/Link.stories.tsx | 0 .../src}/global/Link.tsx | 2 +- .../src}/global/List.stories.tsx | 0 .../src}/global/List.tsx | 8 +- .../src}/global/ListHeading.tsx | 6 +- .../src}/global/ListItem.stories.tsx | 0 .../src}/global/ListItem.tsx | 4 +- .../src}/global/LoadingIndicator.stories.tsx | 0 .../src}/global/LoadingIndicator.tsx | 4 +- .../src}/global/Menu.stories.tsx | 0 .../src}/global/Menu.tsx | 4 +- .../src}/global/NoValueLabel.stories.tsx | 0 .../src}/global/NoValueLabel.tsx | 6 +- .../src}/global/Pagination.stories.tsx | 0 .../src}/global/Pagination.tsx | 6 +- .../src}/global/Popover.stories.tsx | 0 .../src}/global/Popover.tsx | 16 +- .../src}/global/Separator.stories.tsx | 0 .../src}/global/Separator.tsx | 4 +- .../src}/global/SortableList.stories.tsx | 0 .../src}/global/SortableList.tsx | 0 .../src}/global/StickyFooter.stories.tsx | 0 .../src}/global/StickyFooter.tsx | 6 +- .../src}/global/TabView.stories.tsx | 0 .../src}/global/TabView.tsx | 4 +- .../src}/global/Table.stories.tsx | 0 .../src}/global/Table.tsx | 10 +- .../src}/global/TableCell.tsx | 4 +- .../src}/global/TableHead.tsx | 10 +- .../src}/global/TableRow.stories.tsx | 0 .../src}/global/TableRow.tsx | 4 +- .../src}/global/Toast.stories.tsx | 15 +- .../src}/global/Toast.tsx | 6 +- .../src}/global/Tooltip.stories.tsx | 0 .../src}/global/Tooltip.tsx | 6 +- .../global/chrome/DesktopChrome.stories.tsx | 0 .../src}/global/chrome/DesktopChrome.tsx | 2 +- .../chrome/DesktopChromeHeader.stories.tsx | 0 .../global/chrome/DesktopChromeHeader.tsx | 2 +- .../global/chrome/MobileChrome.stories.tsx | 0 .../src}/global/chrome/MobileChrome.tsx | 2 +- .../src}/global/form/Checkbox.stories.tsx | 0 .../src}/global/form/Checkbox.tsx | 0 .../global/form/CheckboxGroup.stories.tsx | 0 .../src}/global/form/CheckboxGroup.tsx | 8 +- .../src}/global/form/CodeEditor.stories.tsx | 0 .../src}/global/form/CodeEditor.tsx | 8 +- .../src}/global/form/CodeEditorView.tsx | 10 +- .../global/form/ColorIndicator.stories.tsx | 0 .../src}/global/form/ColorIndicator.tsx | 9 +- .../src}/global/form/ColorPicker.stories.tsx | 0 .../src}/global/form/ColorPicker.tsx | 14 +- .../global/form/ColorPickerField.stories.tsx | 0 .../src}/global/form/ColorPickerField.tsx | 14 +- .../global/form/CurrencyField.stories.tsx | 0 .../src}/global/form/CurrencyField.tsx | 7 +- .../src}/global/form/FileUpload.stories.tsx | 0 .../src}/global/form/FileUpload.tsx | 0 .../src}/global/form/Form.stories.tsx | 0 .../src}/global/form/Form.tsx | 10 +- .../src}/global/form/HtmlEditor.tsx | 10 +- .../src}/global/form/HtmlField.stories.tsx | 0 .../src}/global/form/HtmlField.tsx | 0 .../src}/global/form/ImageUpload.stories.tsx | 0 .../src}/global/form/ImageUpload.tsx | 8 +- .../src}/global/form/MultiSelect.stories.tsx | 0 .../src}/global/form/MultiSelect.tsx | 14 +- .../src}/global/form/Radio.stories.tsx | 0 .../src}/global/form/Radio.tsx | 4 +- .../src}/global/form/Select.stories.tsx | 0 .../src}/global/form/Select.tsx | 12 +- .../src}/global/form/TextArea.stories.tsx | 0 .../src}/global/form/TextArea.tsx | 6 +- .../src}/global/form/TextField.stories.tsx | 0 .../src}/global/form/TextField.tsx | 0 .../src}/global/form/Toggle.stories.tsx | 0 .../src}/global/form/Toggle.tsx | 6 +- .../src}/global/form/ToggleGroup.stories.tsx | 0 .../src}/global/form/ToggleGroup.tsx | 6 +- .../src}/global/form/URLTextField.stories.tsx | 0 .../src}/global/form/URLTextField.tsx | 18 +- .../src}/global/layout/PageHeader.stories.tsx | 0 .../src}/global/layout/PageHeader.tsx | 6 +- .../modal/ConfirmationModal.stories.tsx | 14 +- .../src}/global/modal/ConfirmationModal.tsx | 0 .../src}/global/modal/LimitModal.tsx | 10 +- .../src}/global/modal/Modal.stories.tsx | 29 +- .../src}/global/modal/Modal.tsx | 18 +- .../src}/global/modal/ModalPage.stories.tsx | 0 .../src}/global/modal/ModalPage.tsx | 8 +- .../global/modal/PreviewModal.stories.tsx | 16 +- .../src}/global/modal/PreviewModal.tsx | 22 +- .../src/hooks/useGlobalDirtyState.tsx | 0 .../src/hooks/usePagination.tsx | 25 +- apps/admin-x-design/src/index.ts | 159 ++++++++++ .../src}/providers/DesignSystemProvider.tsx | 27 +- .../src}/settings/SettingGroup.stories.tsx | 0 .../src}/settings/SettingGroup.tsx | 49 +-- .../settings/SettingGroupContent.stories.tsx | 0 .../src}/settings/SettingGroupContent.tsx | 9 +- .../settings/SettingGroupHeader.stories.tsx | 0 .../src}/settings/SettingGroupHeader.tsx | 15 +- .../src}/settings/SettingNavItem.stories.tsx | 0 .../src}/settings/SettingNavItem.tsx | 33 +- .../settings/SettingNavSection.stories.tsx | 0 .../src}/settings/SettingNavSection.tsx | 11 +- .../src}/settings/SettingSection.stories.tsx | 0 .../src}/settings/SettingSection.tsx | 13 +- .../settings/SettingSectionHeader.stories.tsx | 0 .../src}/settings/SettingSectionHeader.tsx | 8 +- .../src}/settings/SettingValue.stories.tsx | 0 .../src}/settings/SettingValue.tsx | 0 .../src}/settings/StripeButton.stories.tsx | 0 .../src}/settings/StripeButton.tsx | 6 +- apps/admin-x-design/src/typings.d.ts | 6 + .../src/utils/debounce.ts | 0 .../src/utils/modals.tsx | 2 +- apps/admin-x-design/styles.css | 99 ++++++ apps/admin-x-design/tailwind.cjs | 7 + apps/admin-x-design/tailwind.config.cjs | 295 +++++++++++++++++ apps/admin-x-design/test/.eslintrc.cjs | 7 + apps/admin-x-design/test/hello.test.ts | 8 + apps/admin-x-design/tsconfig.declaration.json | 11 + apps/admin-x-design/tsconfig.json | 23 ++ apps/admin-x-design/tsconfig.node.json | 10 + apps/admin-x-design/vite.config.ts | 65 ++++ apps/admin-x-settings/.eslintignore | 1 + apps/admin-x-settings/package.json | 50 ++- apps/admin-x-settings/src/App.tsx | 32 +- apps/admin-x-settings/src/MainContent.tsx | 3 +- .../experimental/BlurryStickyFooter.tsx | 49 --- .../experimental/ExampleButton.stories.ts | 44 --- .../admin-x-ds/experimental/ExampleButton.tsx | 47 --- .../admin-x-ds/experimental/Header.stories.ts | 26 -- .../src/admin-x-ds/experimental/Header.tsx | 54 ---- .../admin-x-ds/experimental/Page.stories.ts | 29 -- .../src/admin-x-ds/experimental/Page.tsx | 73 ----- .../admin-x-ds/experimental/Task.stories.tsx | 37 --- .../src/admin-x-ds/experimental/Task.tsx | 64 ---- .../experimental/Tasklist.stories.tsx | 47 --- .../src/admin-x-ds/experimental/Tasklist.tsx | 38 --- .../experimental/assets/code-brackets.svg | 1 - .../admin-x-ds/experimental/assets/colors.svg | 1 - .../experimental/assets/comments.svg | 1 - .../experimental/assets/direction.svg | 1 - .../admin-x-ds/experimental/assets/flow.svg | 1 - .../admin-x-ds/experimental/assets/plugin.svg | 1 - .../admin-x-ds/experimental/assets/repo.svg | 1 - .../experimental/assets/stackalt.svg | 1 - .../src/admin-x-ds/experimental/button.css | 30 -- .../src/admin-x-ds/experimental/header.css | 14 - .../src/admin-x-ds/experimental/page.css | 69 ---- .../src/admin-x-ds/global/ToastContainer.tsx | 15 - .../modal/ConfirmationModalContainer.tsx | 14 - .../global/modal/ModalContainer.tsx | 26 -- .../global/modal/PreviewModalContainer.tsx | 14 - .../src/components/ExitSettingsButton.tsx | 4 +- .../src/components/SearchableSection.tsx | 12 + .../src/components/Sidebar.tsx | 93 +++--- .../src/components/TopLevelGroup.tsx | 28 ++ .../settings/advanced/AdvancedSettings.tsx | 6 +- .../settings/advanced/CodeInjection.tsx | 11 +- .../components/settings/advanced/History.tsx | 7 +- .../settings/advanced/HistoryModal.tsx | 17 +- .../settings/advanced/Integrations.tsx | 16 +- .../src/components/settings/advanced/Labs.tsx | 11 +- .../settings/advanced/code/CodeModal.tsx | 3 +- .../advanced/integrations/APIKeys.tsx | 3 +- .../integrations/AddIntegrationModal.tsx | 5 +- .../advanced/integrations/AmpModal.tsx | 5 +- .../integrations/CustomIntegrationModal.tsx | 7 +- .../integrations/FirstPromoterModal.tsx | 5 +- .../advanced/integrations/PinturaModal.tsx | 6 +- .../advanced/integrations/SlackModal.tsx | 6 +- .../advanced/integrations/UnsplashModal.tsx | 4 +- .../advanced/integrations/WebhookModal.tsx | 6 +- .../advanced/integrations/WebhooksTable.tsx | 8 +- .../advanced/integrations/ZapierModal.tsx | 13 +- .../integrations/webhookEventOptions.tsx | 2 +- .../settings/advanced/labs/AlphaFeatures.tsx | 2 +- .../settings/advanced/labs/BetaFeatures.tsx | 5 +- .../settings/advanced/labs/FeatureToggle.tsx | 2 +- .../settings/advanced/labs/LabItem.tsx | 2 +- .../advanced/labs/MigrationOptions.tsx | 6 +- .../settings/email/DefaultRecipients.tsx | 11 +- .../settings/email/EmailSettings.tsx | 6 +- .../settings/email/EnableNewsletters.tsx | 12 +- .../src/components/settings/email/Mailgun.tsx | 13 +- .../components/settings/email/Newsletters.tsx | 11 +- .../email/newsletters/AddNewsletterModal.tsx | 8 +- .../newsletters/NewsletterDetailModal.tsx | 21 +- .../newsletters/NewsletterPreviewContent.tsx | 3 +- .../email/newsletters/NewslettersList.tsx | 6 +- .../email/useDefaultRecipientsOptions.tsx | 5 +- .../src/components/settings/general/About.tsx | 5 +- .../components/settings/general/Facebook.tsx | 12 +- .../settings/general/GeneralSettings.tsx | 6 +- .../settings/general/InviteUserModal.tsx | 5 +- .../components/settings/general/LockSite.tsx | 13 +- .../components/settings/general/Metadata.tsx | 15 +- .../settings/general/PublicationLanguage.tsx | 10 +- .../settings/general/SocialAccounts.tsx | 10 +- .../components/settings/general/TimeZone.tsx | 10 +- .../settings/general/TitleAndDescription.tsx | 10 +- .../components/settings/general/Twitter.tsx | 12 +- .../settings/general/UserDetailModal.tsx | 9 +- .../src/components/settings/general/Users.tsx | 15 +- .../general/users/ChangePasswordForm.tsx | 6 +- .../settings/general/users/CustomHeader.tsx | 2 +- .../general/users/EmailNotifications.tsx | 4 +- .../settings/general/users/ProfileBasics.tsx | 4 +- .../settings/general/users/ProfileDetails.tsx | 5 +- .../settings/general/users/RoleSelector.tsx | 4 +- .../settings/general/users/StaffToken.tsx | 3 +- .../components/settings/membership/Access.tsx | 11 +- .../settings/membership/Analytics.tsx | 11 +- .../membership/MembershipSettings.tsx | 6 +- .../components/settings/membership/Offers.tsx | 7 +- .../components/settings/membership/Portal.tsx | 7 +- .../settings/membership/Recommendations.tsx | 11 +- .../components/settings/membership/Tiers.tsx | 11 +- .../settings/membership/TipsOrDonations.tsx | 14 +- .../embedSignup/EmbedSignupForm.tsx | 6 +- .../embedSignup/EmbedSignupFormModal.tsx | 3 +- .../embedSignup/EmbedSignupSidebar.tsx | 13 +- .../membership/offers/AddOfferModal.tsx | 13 +- .../membership/offers/EditOfferModal.tsx | 13 +- .../membership/offers/OffersModal.tsx | 7 +- .../membership/portal/AccountPage.tsx | 3 +- .../membership/portal/LookAndFeel.tsx | 8 +- .../membership/portal/PortalLinks.tsx | 7 +- .../membership/portal/PortalModal.tsx | 4 +- .../membership/portal/SignupOptions.tsx | 6 +- .../AddRecommendationModal.tsx | 7 +- .../AddRecommendationModalConfirm.tsx | 3 +- .../EditRecommendationModal.tsx | 4 +- .../IncomingRecommendationList.tsx | 7 +- .../RecommendationDescriptionForm.tsx | 7 +- .../recommendations/RecommendationList.tsx | 9 +- .../membership/stripe/StripeConnectModal.tsx | 11 +- .../membership/tiers/TierDetailModal.tsx | 14 +- .../membership/tiers/TierDetailPreview.tsx | 4 +- .../settings/membership/tiers/TiersList.tsx | 3 +- .../settings/site/AnnouncementBar.tsx | 7 +- .../settings/site/AnnouncementBarModal.tsx | 8 +- .../components/settings/site/DesignModal.tsx | 5 +- .../settings/site/DesignSetting.tsx | 7 +- .../components/settings/site/Navigation.tsx | 7 +- .../settings/site/NavigationModal.tsx | 3 +- .../components/settings/site/SiteSettings.tsx | 6 +- .../components/settings/site/ThemeModal.tsx | 10 +- .../site/designAndBranding/BrandSettings.tsx | 8 +- .../site/designAndBranding/ThemeSettings.tsx | 9 +- .../site/navigation/NavigationEditForm.tsx | 4 +- .../site/navigation/NavigationItemEditor.tsx | 3 +- .../site/theme/AdvancedThemeSettings.tsx | 7 +- .../settings/site/theme/InvalidThemeModal.tsx | 6 +- .../settings/site/theme/OfficialThemes.tsx | 3 +- .../site/theme/ThemeInstalledModal.tsx | 7 +- .../settings/site/theme/ThemePreview.tsx | 9 +- apps/admin-x-settings/src/hooks/useForm.ts | 2 +- .../src/hooks/useScrollSection.tsx | 2 +- .../src/hooks/useSettingGroup.tsx | 3 +- apps/admin-x-settings/src/main.tsx | 1 + apps/admin-x-settings/src/styles/demo.css | 49 +-- apps/admin-x-settings/src/styles/index.css | 98 +----- .../src/utils/api/handleError.ts | 6 +- apps/admin-x-settings/src/utils/api/hooks.ts | 8 +- apps/admin-x-settings/src/utils/currency.ts | 2 +- apps/admin-x-settings/tailwind.config.cjs | 297 +----------------- yarn.lock | 34 +- 414 files changed, 1669 insertions(+), 2150 deletions(-) create mode 100644 apps/admin-x-design/.eslintrc.cjs create mode 100644 apps/admin-x-design/.gitignore rename apps/{admin-x-settings/src/admin-x-ds/assets/fonts => admin-x-design/.storybook}/Inter.ttf (100%) rename apps/{admin-x-settings => admin-x-design}/.storybook/adminx-theme.tsx (100%) rename apps/{admin-x-settings => admin-x-design}/.storybook/main.tsx (59%) rename apps/{admin-x-settings => admin-x-design}/.storybook/manager.tsx (100%) rename apps/{admin-x-settings => admin-x-design}/.storybook/preview.tsx (76%) rename apps/{admin-x-settings/src/admin-x-ds/assets/styles => admin-x-design/.storybook}/storybook.css (83%) create mode 100644 apps/admin-x-design/README.md create mode 100644 apps/admin-x-design/package.json create mode 100644 apps/admin-x-design/postcss.config.js rename apps/{admin-x-settings/src/styles => admin-x-design}/preflight.css (99%) rename apps/{admin-x-settings/src/admin-x-ds => admin-x-design/src}/Boilerplate.stories.tsx (100%) rename apps/{admin-x-settings/src/admin-x-ds => admin-x-design/src}/Boilerplate.tsx (100%) create mode 100644 apps/admin-x-design/src/DesignSystemApp.tsx rename apps/{admin-x-settings/src/admin-x-ds => admin-x-design/src}/assets/icons/add.svg (100%) rename apps/{admin-x-settings/src/admin-x-ds => admin-x-design/src}/assets/icons/align-center.svg (100%) rename apps/{admin-x-settings/src/admin-x-ds => admin-x-design/src}/assets/icons/align-left.svg (100%) rename apps/{admin-x-settings/src/admin-x-ds => admin-x-design/src}/assets/icons/angle-brackets.svg (100%) rename apps/{admin-x-settings/src/admin-x-ds => admin-x-design/src}/assets/icons/arrow-bottom-left.svg (100%) rename apps/{admin-x-settings/src/admin-x-ds => admin-x-design/src}/assets/icons/arrow-bottom-right.svg (100%) rename apps/{admin-x-settings/src/admin-x-ds => admin-x-design/src}/assets/icons/arrow-down.svg (100%) rename apps/{admin-x-settings/src/admin-x-ds => admin-x-design/src}/assets/icons/arrow-left.svg (100%) rename apps/{admin-x-settings/src/admin-x-ds => admin-x-design/src}/assets/icons/arrow-right.svg (100%) rename apps/{admin-x-settings/src/admin-x-ds => admin-x-design/src}/assets/icons/arrow-top-left.svg (100%) rename apps/{admin-x-settings/src/admin-x-ds => admin-x-design/src}/assets/icons/arrow-top-right.svg (100%) rename apps/{admin-x-settings/src/admin-x-ds => admin-x-design/src}/assets/icons/arrow-up.svg (100%) rename apps/{admin-x-settings/src/admin-x-ds => admin-x-design/src}/assets/icons/at-sign.svg (100%) rename apps/{admin-x-settings/src/admin-x-ds => admin-x-design/src}/assets/icons/baseline-chart.svg (100%) rename apps/{admin-x-settings/src/admin-x-ds => admin-x-design/src}/assets/icons/bills.svg (100%) rename apps/{admin-x-settings/src/admin-x-ds => admin-x-design/src}/assets/icons/book-open.svg (100%) rename apps/{admin-x-settings/src/admin-x-ds => admin-x-design/src}/assets/icons/brackets.svg (100%) rename apps/{admin-x-settings/src/admin-x-ds => admin-x-design/src}/assets/icons/check-circle.svg (100%) rename apps/{admin-x-settings/src/admin-x-ds => admin-x-design/src}/assets/icons/check.svg (100%) rename apps/{admin-x-settings/src/admin-x-ds => admin-x-design/src}/assets/icons/chevron-down.svg (100%) rename apps/{admin-x-settings/src/admin-x-ds => admin-x-design/src}/assets/icons/chevron-left.svg (100%) rename apps/{admin-x-settings/src/admin-x-ds => admin-x-design/src}/assets/icons/chevron-right.svg (100%) rename apps/{admin-x-settings/src/admin-x-ds => admin-x-design/src}/assets/icons/chevron-up.svg (100%) rename apps/{admin-x-settings/src/admin-x-ds => admin-x-design/src}/assets/icons/close.svg (100%) rename apps/{admin-x-settings/src/admin-x-ds => admin-x-design/src}/assets/icons/comment.svg (100%) rename apps/{admin-x-settings/src/admin-x-ds => admin-x-design/src}/assets/icons/crown.svg (100%) rename apps/{admin-x-settings/src/admin-x-ds => admin-x-design/src}/assets/icons/discount.svg (100%) rename apps/{admin-x-settings/src/admin-x-ds => admin-x-design/src}/assets/icons/duplicate.svg (100%) rename apps/{admin-x-settings/src/admin-x-ds => admin-x-design/src}/assets/icons/ellipsis.svg (100%) rename apps/{admin-x-settings/src/admin-x-ds => admin-x-design/src}/assets/icons/email-check.svg (100%) rename apps/{admin-x-settings/src/admin-x-ds => admin-x-design/src}/assets/icons/email.svg (100%) rename apps/{admin-x-settings/src/admin-x-ds => admin-x-design/src}/assets/icons/emailfield.svg (100%) rename apps/{admin-x-settings/src/admin-x-ds => admin-x-design/src}/assets/icons/eyedropper.svg (100%) rename apps/{admin-x-settings/src/admin-x-ds => admin-x-design/src}/assets/icons/facebook.svg (100%) rename apps/{admin-x-settings/src/admin-x-ds => admin-x-design/src}/assets/icons/finger-up.svg (100%) rename apps/{admin-x-settings/src/admin-x-ds => admin-x-design/src}/assets/icons/hamburger.svg (100%) rename apps/{admin-x-settings/src/admin-x-ds => admin-x-design/src}/assets/icons/heart.svg (100%) rename apps/{admin-x-settings/src/admin-x-ds => admin-x-design/src}/assets/icons/integration.svg (100%) rename apps/{admin-x-settings/src/admin-x-ds => admin-x-design/src}/assets/icons/key.svg (100%) rename apps/{admin-x-settings/src/admin-x-ds => admin-x-design/src}/assets/icons/labs-flask.svg (100%) rename apps/{admin-x-settings/src/admin-x-ds => admin-x-design/src}/assets/icons/language.svg (100%) rename apps/{admin-x-settings/src/admin-x-ds => admin-x-design/src}/assets/icons/laptop.svg (100%) rename apps/{admin-x-settings/src/admin-x-ds => admin-x-design/src}/assets/icons/layer.svg (100%) rename apps/{admin-x-settings/src/admin-x-ds => admin-x-design/src}/assets/icons/like.svg (100%) rename apps/{admin-x-settings/src/admin-x-ds => admin-x-design/src}/assets/icons/link-broken.svg (100%) rename apps/{admin-x-settings/src/admin-x-ds => admin-x-design/src}/assets/icons/lock-locked.svg (100%) rename apps/{admin-x-settings/src/admin-x-ds => admin-x-design/src}/assets/icons/lock-unlocked.svg (100%) rename apps/{admin-x-settings/src/admin-x-ds => admin-x-design/src}/assets/icons/magnifying-glass.svg (100%) rename apps/{admin-x-settings/src/admin-x-ds => admin-x-design/src}/assets/icons/mail-block.svg (100%) rename apps/{admin-x-settings/src/admin-x-ds => admin-x-design/src}/assets/icons/megaphone.svg (100%) rename apps/{admin-x-settings/src/admin-x-ds => admin-x-design/src}/assets/icons/mobile.svg (100%) rename apps/{admin-x-settings/src/admin-x-ds => admin-x-design/src}/assets/icons/modules-3.svg (100%) rename apps/{admin-x-settings/src/admin-x-ds => admin-x-design/src}/assets/icons/money-bags.svg (100%) rename apps/{admin-x-settings/src/admin-x-ds => admin-x-design/src}/assets/icons/navigation.svg (100%) rename apps/{admin-x-settings/src/admin-x-ds => admin-x-design/src}/assets/icons/palette.svg (100%) rename apps/{admin-x-settings/src/admin-x-ds => admin-x-design/src}/assets/icons/pen.svg (100%) rename apps/{admin-x-settings/src/admin-x-ds => admin-x-design/src}/assets/icons/picture.svg (100%) rename apps/{admin-x-settings/src/admin-x-ds => admin-x-design/src}/assets/icons/piggybank.svg (100%) rename apps/{admin-x-settings/src/admin-x-ds => admin-x-design/src}/assets/icons/portal.svg (100%) rename apps/{admin-x-settings/src/admin-x-ds => admin-x-design/src}/assets/icons/question-circle.svg (100%) rename apps/{admin-x-settings/src/admin-x-ds => admin-x-design/src}/assets/icons/recepients.svg (100%) rename apps/{admin-x-settings/src/admin-x-ds => admin-x-design/src}/assets/icons/single-user-block.svg (100%) rename apps/{admin-x-settings/src/admin-x-ds => admin-x-design/src}/assets/icons/single-user-fill.svg (100%) rename apps/{admin-x-settings/src/admin-x-ds => admin-x-design/src}/assets/icons/textfield.svg (100%) rename apps/{admin-x-settings/src/admin-x-ds => admin-x-design/src}/assets/icons/thumbs-down.svg (100%) rename apps/{admin-x-settings/src/admin-x-ds => admin-x-design/src}/assets/icons/thumbs-up.svg (100%) rename apps/{admin-x-settings/src/admin-x-ds => admin-x-design/src}/assets/icons/time-back.svg (100%) rename apps/{admin-x-settings/src/admin-x-ds => admin-x-design/src}/assets/icons/trash.svg (100%) rename apps/{admin-x-settings/src/admin-x-ds => admin-x-design/src}/assets/icons/twitter-x.svg (100%) rename apps/{admin-x-settings/src/admin-x-ds => admin-x-design/src}/assets/icons/unsplash-logo.svg (100%) rename apps/{admin-x-settings/src/admin-x-ds => admin-x-design/src}/assets/icons/upload.svg (100%) rename apps/{admin-x-settings/src/admin-x-ds => admin-x-design/src}/assets/icons/user-add.svg (100%) rename apps/{admin-x-settings/src/admin-x-ds => admin-x-design/src}/assets/icons/user-page.svg (100%) rename apps/{admin-x-settings/src/admin-x-ds => admin-x-design/src}/assets/icons/warning.svg (100%) rename apps/{admin-x-settings/src/admin-x-ds => admin-x-design/src}/assets/icons/world-clock.svg (100%) rename apps/{admin-x-settings/src/admin-x-ds => admin-x-design/src}/assets/images/facebook-logo.svg (100%) rename apps/{admin-x-settings/src/admin-x-ds => admin-x-design/src}/assets/images/ghost-logo.svg (100%) rename apps/{admin-x-settings/src/admin-x-ds => admin-x-design/src}/assets/images/ghost-orb.svg (100%) rename apps/{admin-x-settings/src/admin-x-ds => admin-x-design/src}/assets/images/google-logo.svg (100%) rename apps/{admin-x-settings/src/admin-x-ds => admin-x-design/src}/assets/images/twitter-logo.svg (100%) rename apps/{admin-x-settings/src/admin-x-ds => admin-x-design/src}/assets/images/x-logo.svg (100%) rename apps/{admin-x-settings/src/admin-x-ds => admin-x-design/src}/docs/Colors.mdx (100%) rename apps/{admin-x-settings/src/admin-x-ds => admin-x-design/src}/docs/ErrorHandling.mdx (100%) rename apps/{admin-x-settings/src/admin-x-ds => admin-x-design/src}/docs/Icons.mdx (100%) rename apps/{admin-x-settings/src/admin-x-ds => admin-x-design/src}/docs/Welcome.mdx (85%) rename apps/{admin-x-settings/src/admin-x-ds => admin-x-design/src}/docs/assets/adminx-screenshot.png (100%) rename apps/{admin-x-settings/src/admin-x-ds => admin-x-design/src}/docs/assets/apps.svg (100%) rename apps/{admin-x-settings/src/admin-x-ds => admin-x-design/src}/docs/assets/blocks.svg (100%) rename apps/{admin-x-settings/src/admin-x-ds => admin-x-design/src}/docs/assets/circle-menu.svg (100%) rename apps/{admin-x-settings/src/admin-x-ds => admin-x-design/src}/docs/assets/code-brackets.svg (100%) rename apps/{admin-x-settings/src/admin-x-ds => admin-x-design/src}/docs/assets/colors.svg (100%) rename apps/{admin-x-settings/src/admin-x-ds => admin-x-design/src}/docs/assets/comments.svg (100%) rename apps/{admin-x-settings/src/admin-x-ds => admin-x-design/src}/docs/assets/direction.svg (100%) rename apps/{admin-x-settings/src/admin-x-ds => admin-x-design/src}/docs/assets/ds-structure.png (100%) rename apps/{admin-x-settings/src/admin-x-ds => admin-x-design/src}/docs/assets/flow.svg (100%) rename apps/{admin-x-settings/src/admin-x-ds => admin-x-design/src}/docs/assets/global-error-example.png (100%) rename apps/{admin-x-settings/src/admin-x-ds => admin-x-design/src}/docs/assets/local-error-example.png (100%) rename apps/{admin-x-settings/src/admin-x-ds => admin-x-design/src}/docs/assets/page-error-example.png (100%) rename apps/{admin-x-settings/src/admin-x-ds => admin-x-design/src}/docs/assets/plugin.svg (100%) rename apps/{admin-x-settings/src/admin-x-ds => admin-x-design/src}/docs/assets/repo.svg (100%) rename apps/{admin-x-settings/src/admin-x-ds => admin-x-design/src}/docs/assets/stackalt.svg (100%) rename apps/{admin-x-settings/src/admin-x-ds => admin-x-design/src}/docs/assets/streamline-settings.png (100%) rename apps/{admin-x-settings/src/admin-x-ds => admin-x-design/src}/docs/assets/style-guide-layout.png (100%) rename apps/{admin-x-settings/src/admin-x-ds => admin-x-design/src}/docs/assets/style-guide.png (100%) rename apps/{admin-x-settings/src/admin-x-ds => admin-x-design/src}/docs/assets/tower.svg (100%) rename apps/{admin-x-settings/src/admin-x-ds => admin-x-design/src}/global/Avatar.stories.tsx (100%) rename apps/{admin-x-settings/src/admin-x-ds => admin-x-design/src}/global/Avatar.tsx (97%) rename apps/{admin-x-settings/src/admin-x-ds => admin-x-design/src}/global/Banner.stories.tsx (100%) rename apps/{admin-x-settings/src/admin-x-ds => admin-x-design/src}/global/Banner.tsx (95%) rename apps/{admin-x-settings/src/admin-x-ds => admin-x-design/src}/global/Breadcrumbs.stories.tsx (100%) rename apps/{admin-x-settings/src/admin-x-ds => admin-x-design/src}/global/Breadcrumbs.tsx (96%) rename apps/{admin-x-settings/src/admin-x-ds => admin-x-design/src}/global/Button.stories.tsx (100%) rename apps/{admin-x-settings/src/admin-x-ds => admin-x-design/src}/global/Button.tsx (100%) rename apps/{admin-x-settings/src/admin-x-ds => admin-x-design/src}/global/ButtonGroup.stories.tsx (100%) rename apps/{admin-x-settings/src/admin-x-ds => admin-x-design/src}/global/ButtonGroup.tsx (90%) rename apps/{admin-x-settings/src/admin-x-ds => admin-x-design/src}/global/ErrorBoundary.stories.tsx (100%) rename apps/{admin-x-settings/src/admin-x-ds => admin-x-design/src}/global/ErrorBoundary.tsx (91%) rename apps/{admin-x-settings/src/admin-x-ds => admin-x-design/src}/global/Heading.stories.tsx (100%) rename apps/{admin-x-settings/src/admin-x-ds => admin-x-design/src}/global/Heading.tsx (91%) rename apps/{admin-x-settings/src/admin-x-ds => admin-x-design/src}/global/Hint.stories.tsx (100%) rename apps/{admin-x-settings/src/admin-x-ds => admin-x-design/src}/global/Hint.tsx (96%) rename apps/{admin-x-settings/src/admin-x-ds => admin-x-design/src}/global/Icon.stories.tsx (100%) rename apps/{admin-x-settings/src/admin-x-ds => admin-x-design/src}/global/Icon.tsx (91%) rename apps/{admin-x-settings/src/admin-x-ds => admin-x-design/src}/global/IconLabel.stories.tsx (100%) rename apps/{admin-x-settings/src/admin-x-ds => admin-x-design/src}/global/IconLabel.tsx (87%) rename apps/{admin-x-settings/src/admin-x-ds => admin-x-design/src}/global/InfiniteScrollListener.stories.tsx (100%) rename apps/{admin-x-settings/src/admin-x-ds => admin-x-design/src}/global/InfiniteScrollListener.tsx (82%) rename apps/{admin-x-settings/src/admin-x-ds => admin-x-design/src}/global/Link.stories.tsx (100%) rename apps/{admin-x-settings/src/admin-x-ds => admin-x-design/src}/global/Link.tsx (89%) rename apps/{admin-x-settings/src/admin-x-ds => admin-x-design/src}/global/List.stories.tsx (100%) rename apps/{admin-x-settings/src/admin-x-ds => admin-x-design/src}/global/List.tsx (97%) rename apps/{admin-x-settings/src/admin-x-ds => admin-x-design/src}/global/ListHeading.tsx (94%) rename apps/{admin-x-settings/src/admin-x-ds => admin-x-design/src}/global/ListItem.stories.tsx (100%) rename apps/{admin-x-settings/src/admin-x-ds => admin-x-design/src}/global/ListItem.tsx (98%) rename apps/{admin-x-settings/src/admin-x-ds => admin-x-design/src}/global/LoadingIndicator.stories.tsx (100%) rename apps/{admin-x-settings/src/admin-x-ds => admin-x-design/src}/global/LoadingIndicator.tsx (97%) rename apps/{admin-x-settings/src/admin-x-ds => admin-x-design/src}/global/Menu.stories.tsx (100%) rename apps/{admin-x-settings/src/admin-x-ds => admin-x-design/src}/global/Menu.tsx (97%) rename apps/{admin-x-settings/src/admin-x-ds => admin-x-design/src}/global/NoValueLabel.stories.tsx (100%) rename apps/{admin-x-settings/src/admin-x-ds => admin-x-design/src}/global/NoValueLabel.tsx (88%) rename apps/{admin-x-settings/src/admin-x-ds => admin-x-design/src}/global/Pagination.stories.tsx (100%) rename apps/{admin-x-settings/src/admin-x-ds => admin-x-design/src}/global/Pagination.tsx (94%) rename apps/{admin-x-settings/src/admin-x-ds => admin-x-design/src}/global/Popover.stories.tsx (100%) rename apps/{admin-x-settings/src/admin-x-ds => admin-x-design/src}/global/Popover.tsx (85%) rename apps/{admin-x-settings/src/admin-x-ds => admin-x-design/src}/global/Separator.stories.tsx (100%) rename apps/{admin-x-settings/src/admin-x-ds => admin-x-design/src}/global/Separator.tsx (80%) rename apps/{admin-x-settings/src/admin-x-ds => admin-x-design/src}/global/SortableList.stories.tsx (100%) rename apps/{admin-x-settings/src/admin-x-ds => admin-x-design/src}/global/SortableList.tsx (100%) rename apps/{admin-x-settings/src/admin-x-ds => admin-x-design/src}/global/StickyFooter.stories.tsx (100%) rename apps/{admin-x-settings/src/admin-x-ds => admin-x-design/src}/global/StickyFooter.tsx (96%) rename apps/{admin-x-settings/src/admin-x-ds => admin-x-design/src}/global/TabView.stories.tsx (100%) rename apps/{admin-x-settings/src/admin-x-ds => admin-x-design/src}/global/TabView.tsx (98%) rename apps/{admin-x-settings/src/admin-x-ds => admin-x-design/src}/global/Table.stories.tsx (100%) rename apps/{admin-x-settings/src/admin-x-ds => admin-x-design/src}/global/Table.tsx (98%) rename apps/{admin-x-settings/src/admin-x-ds => admin-x-design/src}/global/TableCell.tsx (87%) rename apps/{admin-x-settings/src/admin-x-ds => admin-x-design/src}/global/TableHead.tsx (71%) rename apps/{admin-x-settings/src/admin-x-ds => admin-x-design/src}/global/TableRow.stories.tsx (100%) rename apps/{admin-x-settings/src/admin-x-ds => admin-x-design/src}/global/TableRow.tsx (98%) rename apps/{admin-x-settings/src/admin-x-ds => admin-x-design/src}/global/Toast.stories.tsx (83%) rename apps/{admin-x-settings/src/admin-x-ds => admin-x-design/src}/global/Toast.tsx (98%) rename apps/{admin-x-settings/src/admin-x-ds => admin-x-design/src}/global/Tooltip.stories.tsx (100%) rename apps/{admin-x-settings/src/admin-x-ds => admin-x-design/src}/global/Tooltip.tsx (95%) rename apps/{admin-x-settings/src/admin-x-ds => admin-x-design/src}/global/chrome/DesktopChrome.stories.tsx (100%) rename apps/{admin-x-settings/src/admin-x-ds => admin-x-design/src}/global/chrome/DesktopChrome.tsx (92%) rename apps/{admin-x-settings/src/admin-x-ds => admin-x-design/src}/global/chrome/DesktopChromeHeader.stories.tsx (100%) rename apps/{admin-x-settings/src/admin-x-ds => admin-x-design/src}/global/chrome/DesktopChromeHeader.tsx (98%) rename apps/{admin-x-settings/src/admin-x-ds => admin-x-design/src}/global/chrome/MobileChrome.stories.tsx (100%) rename apps/{admin-x-settings/src/admin-x-ds => admin-x-design/src}/global/chrome/MobileChrome.tsx (93%) rename apps/{admin-x-settings/src/admin-x-ds => admin-x-design/src}/global/form/Checkbox.stories.tsx (100%) rename apps/{admin-x-settings/src/admin-x-ds => admin-x-design/src}/global/form/Checkbox.tsx (100%) rename apps/{admin-x-settings/src/admin-x-ds => admin-x-design/src}/global/form/CheckboxGroup.stories.tsx (100%) rename apps/{admin-x-settings/src/admin-x-ds => admin-x-design/src}/global/form/CheckboxGroup.tsx (92%) rename apps/{admin-x-settings/src/admin-x-ds => admin-x-design/src}/global/form/CodeEditor.stories.tsx (100%) rename apps/{admin-x-settings/src/admin-x-ds => admin-x-design/src}/global/form/CodeEditor.tsx (84%) rename apps/{admin-x-settings/src/admin-x-ds => admin-x-design/src}/global/form/CodeEditorView.tsx (99%) rename apps/{admin-x-settings/src/admin-x-ds => admin-x-design/src}/global/form/ColorIndicator.stories.tsx (100%) rename apps/{admin-x-settings/src/admin-x-ds => admin-x-design/src}/global/form/ColorIndicator.tsx (94%) rename apps/{admin-x-settings/src/admin-x-ds => admin-x-design/src}/global/form/ColorPicker.stories.tsx (100%) rename apps/{admin-x-settings/src/admin-x-ds => admin-x-design/src}/global/form/ColorPicker.tsx (96%) rename apps/{admin-x-settings/src/admin-x-ds => admin-x-design/src}/global/form/ColorPickerField.stories.tsx (100%) rename apps/{admin-x-settings/src/admin-x-ds => admin-x-design/src}/global/form/ColorPickerField.tsx (91%) rename apps/{admin-x-settings/src/admin-x-ds => admin-x-design/src}/global/form/CurrencyField.stories.tsx (100%) rename apps/{admin-x-settings/src/admin-x-ds => admin-x-design/src}/global/form/CurrencyField.tsx (81%) rename apps/{admin-x-settings/src/admin-x-ds => admin-x-design/src}/global/form/FileUpload.stories.tsx (100%) rename apps/{admin-x-settings/src/admin-x-ds => admin-x-design/src}/global/form/FileUpload.tsx (100%) rename apps/{admin-x-settings/src/admin-x-ds => admin-x-design/src}/global/form/Form.stories.tsx (100%) rename apps/{admin-x-settings/src/admin-x-ds => admin-x-design/src}/global/form/Form.tsx (95%) rename apps/{admin-x-settings/src/admin-x-ds => admin-x-design/src}/global/form/HtmlEditor.tsx (95%) rename apps/{admin-x-settings/src/admin-x-ds => admin-x-design/src}/global/form/HtmlField.stories.tsx (100%) rename apps/{admin-x-settings/src/admin-x-ds => admin-x-design/src}/global/form/HtmlField.tsx (100%) rename apps/{admin-x-settings/src/admin-x-ds => admin-x-design/src}/global/form/ImageUpload.stories.tsx (100%) rename apps/{admin-x-settings/src/admin-x-ds => admin-x-design/src}/global/form/ImageUpload.tsx (99%) rename apps/{admin-x-settings/src/admin-x-ds => admin-x-design/src}/global/form/MultiSelect.stories.tsx (100%) rename apps/{admin-x-settings/src/admin-x-ds => admin-x-design/src}/global/form/MultiSelect.tsx (95%) rename apps/{admin-x-settings/src/admin-x-ds => admin-x-design/src}/global/form/Radio.stories.tsx (100%) rename apps/{admin-x-settings/src/admin-x-ds => admin-x-design/src}/global/form/Radio.tsx (98%) rename apps/{admin-x-settings/src/admin-x-ds => admin-x-design/src}/global/form/Select.stories.tsx (100%) rename apps/{admin-x-settings/src/admin-x-ds => admin-x-design/src}/global/form/Select.tsx (97%) rename apps/{admin-x-settings/src/admin-x-ds => admin-x-design/src}/global/form/TextArea.stories.tsx (100%) rename apps/{admin-x-settings/src/admin-x-ds => admin-x-design/src}/global/form/TextArea.tsx (97%) rename apps/{admin-x-settings/src/admin-x-ds => admin-x-design/src}/global/form/TextField.stories.tsx (100%) rename apps/{admin-x-settings/src/admin-x-ds => admin-x-design/src}/global/form/TextField.tsx (100%) rename apps/{admin-x-settings/src/admin-x-ds => admin-x-design/src}/global/form/Toggle.stories.tsx (100%) rename apps/{admin-x-settings/src/admin-x-ds => admin-x-design/src}/global/form/Toggle.tsx (99%) rename apps/{admin-x-settings/src/admin-x-ds => admin-x-design/src}/global/form/ToggleGroup.stories.tsx (100%) rename apps/{admin-x-settings/src/admin-x-ds => admin-x-design/src}/global/form/ToggleGroup.tsx (92%) rename apps/{admin-x-settings/src/admin-x-ds => admin-x-design/src}/global/form/URLTextField.stories.tsx (100%) rename apps/{admin-x-settings/src/admin-x-ds => admin-x-design/src}/global/form/URLTextField.tsx (96%) rename apps/{admin-x-settings/src/admin-x-ds => admin-x-design/src}/global/layout/PageHeader.stories.tsx (100%) rename apps/{admin-x-settings/src/admin-x-ds => admin-x-design/src}/global/layout/PageHeader.tsx (97%) rename apps/{admin-x-settings/src/admin-x-ds => admin-x-design/src}/global/modal/ConfirmationModal.stories.tsx (72%) rename apps/{admin-x-settings/src/admin-x-ds => admin-x-design/src}/global/modal/ConfirmationModal.tsx (100%) rename apps/{admin-x-settings/src/admin-x-ds => admin-x-design/src}/global/modal/LimitModal.tsx (81%) rename apps/{admin-x-settings/src/admin-x-ds => admin-x-design/src}/global/modal/Modal.stories.tsx (93%) rename apps/{admin-x-settings/src/admin-x-ds => admin-x-design/src}/global/modal/Modal.tsx (97%) rename apps/{admin-x-settings/src/admin-x-ds => admin-x-design/src}/global/modal/ModalPage.stories.tsx (100%) rename apps/{admin-x-settings/src/admin-x-ds => admin-x-design/src}/global/modal/ModalPage.tsx (89%) rename apps/{admin-x-settings/src/admin-x-ds => admin-x-design/src}/global/modal/PreviewModal.stories.tsx (87%) rename apps/{admin-x-settings/src/admin-x-ds => admin-x-design/src}/global/modal/PreviewModal.tsx (98%) rename apps/{admin-x-settings => admin-x-design}/src/hooks/useGlobalDirtyState.tsx (100%) rename apps/{admin-x-settings => admin-x-design}/src/hooks/usePagination.tsx (60%) create mode 100644 apps/admin-x-design/src/index.ts rename apps/{admin-x-settings/src/admin-x-ds => admin-x-design/src}/providers/DesignSystemProvider.tsx (52%) rename apps/{admin-x-settings/src/admin-x-ds => admin-x-design/src}/settings/SettingGroup.stories.tsx (100%) rename apps/{admin-x-settings/src/admin-x-ds => admin-x-design/src}/settings/SettingGroup.tsx (80%) rename apps/{admin-x-settings/src/admin-x-ds => admin-x-design/src}/settings/SettingGroupContent.stories.tsx (100%) rename apps/{admin-x-settings/src/admin-x-ds => admin-x-design/src}/settings/SettingGroupContent.tsx (71%) rename apps/{admin-x-settings/src/admin-x-ds => admin-x-design/src}/settings/SettingGroupHeader.stories.tsx (100%) rename apps/{admin-x-settings/src/admin-x-ds => admin-x-design/src}/settings/SettingGroupHeader.tsx (53%) rename apps/{admin-x-settings/src/admin-x-ds => admin-x-design/src}/settings/SettingNavItem.stories.tsx (100%) rename apps/{admin-x-settings/src/admin-x-ds => admin-x-design/src}/settings/SettingNavItem.tsx (50%) rename apps/{admin-x-settings/src/admin-x-ds => admin-x-design/src}/settings/SettingNavSection.stories.tsx (100%) rename apps/{admin-x-settings/src/admin-x-ds => admin-x-design/src}/settings/SettingNavSection.tsx (60%) rename apps/{admin-x-settings/src/admin-x-ds => admin-x-design/src}/settings/SettingSection.stories.tsx (100%) rename apps/{admin-x-settings/src/admin-x-ds => admin-x-design/src}/settings/SettingSection.tsx (67%) rename apps/{admin-x-settings/src/admin-x-ds => admin-x-design/src}/settings/SettingSectionHeader.stories.tsx (100%) rename apps/{admin-x-settings/src/admin-x-ds => admin-x-design/src}/settings/SettingSectionHeader.tsx (70%) rename apps/{admin-x-settings/src/admin-x-ds => admin-x-design/src}/settings/SettingValue.stories.tsx (100%) rename apps/{admin-x-settings/src/admin-x-ds => admin-x-design/src}/settings/SettingValue.tsx (100%) rename apps/{admin-x-settings/src/admin-x-ds => admin-x-design/src}/settings/StripeButton.stories.tsx (100%) rename apps/{admin-x-settings/src/admin-x-ds => admin-x-design/src}/settings/StripeButton.tsx (98%) create mode 100644 apps/admin-x-design/src/typings.d.ts rename apps/{admin-x-settings => admin-x-design}/src/utils/debounce.ts (100%) rename apps/{admin-x-settings => admin-x-design}/src/utils/modals.tsx (88%) create mode 100644 apps/admin-x-design/styles.css create mode 100644 apps/admin-x-design/tailwind.cjs create mode 100644 apps/admin-x-design/tailwind.config.cjs create mode 100644 apps/admin-x-design/test/.eslintrc.cjs create mode 100644 apps/admin-x-design/test/hello.test.ts create mode 100644 apps/admin-x-design/tsconfig.declaration.json create mode 100644 apps/admin-x-design/tsconfig.json create mode 100644 apps/admin-x-design/tsconfig.node.json create mode 100644 apps/admin-x-design/vite.config.ts create mode 100644 apps/admin-x-settings/.eslintignore delete mode 100644 apps/admin-x-settings/src/admin-x-ds/experimental/BlurryStickyFooter.tsx delete mode 100644 apps/admin-x-settings/src/admin-x-ds/experimental/ExampleButton.stories.ts delete mode 100644 apps/admin-x-settings/src/admin-x-ds/experimental/ExampleButton.tsx delete mode 100644 apps/admin-x-settings/src/admin-x-ds/experimental/Header.stories.ts delete mode 100644 apps/admin-x-settings/src/admin-x-ds/experimental/Header.tsx delete mode 100644 apps/admin-x-settings/src/admin-x-ds/experimental/Page.stories.ts delete mode 100644 apps/admin-x-settings/src/admin-x-ds/experimental/Page.tsx delete mode 100644 apps/admin-x-settings/src/admin-x-ds/experimental/Task.stories.tsx delete mode 100644 apps/admin-x-settings/src/admin-x-ds/experimental/Task.tsx delete mode 100644 apps/admin-x-settings/src/admin-x-ds/experimental/Tasklist.stories.tsx delete mode 100644 apps/admin-x-settings/src/admin-x-ds/experimental/Tasklist.tsx delete mode 100644 apps/admin-x-settings/src/admin-x-ds/experimental/assets/code-brackets.svg delete mode 100644 apps/admin-x-settings/src/admin-x-ds/experimental/assets/colors.svg delete mode 100644 apps/admin-x-settings/src/admin-x-ds/experimental/assets/comments.svg delete mode 100644 apps/admin-x-settings/src/admin-x-ds/experimental/assets/direction.svg delete mode 100644 apps/admin-x-settings/src/admin-x-ds/experimental/assets/flow.svg delete mode 100644 apps/admin-x-settings/src/admin-x-ds/experimental/assets/plugin.svg delete mode 100644 apps/admin-x-settings/src/admin-x-ds/experimental/assets/repo.svg delete mode 100644 apps/admin-x-settings/src/admin-x-ds/experimental/assets/stackalt.svg delete mode 100644 apps/admin-x-settings/src/admin-x-ds/experimental/button.css delete mode 100644 apps/admin-x-settings/src/admin-x-ds/experimental/header.css delete mode 100644 apps/admin-x-settings/src/admin-x-ds/experimental/page.css delete mode 100644 apps/admin-x-settings/src/admin-x-ds/global/ToastContainer.tsx delete mode 100644 apps/admin-x-settings/src/admin-x-ds/global/modal/ConfirmationModalContainer.tsx delete mode 100644 apps/admin-x-settings/src/admin-x-ds/global/modal/ModalContainer.tsx delete mode 100644 apps/admin-x-settings/src/admin-x-ds/global/modal/PreviewModalContainer.tsx create mode 100644 apps/admin-x-settings/src/components/SearchableSection.tsx create mode 100644 apps/admin-x-settings/src/components/TopLevelGroup.tsx diff --git a/.github/scripts/dev.js b/.github/scripts/dev.js index e022c50b55..057acac3b4 100644 --- a/.github/scripts/dev.js +++ b/.github/scripts/dev.js @@ -50,20 +50,26 @@ const COMMAND_TYPESCRIPT = { env: {} }; -const COMMAND_ADMINX = { +const COMMANDS_ADMINX = [{ + name: 'adminXDS', + command: 'nx watch --projects=apps/admin-x-design -- nx run \\$NX_PROJECT_NAME:build --skip-nx-cache', + cwd: path.resolve(__dirname, '../..'), + prefixColor: '#C35831', + env: {} +}, { name: 'adminX', - command: 'yarn dev', + command: 'yarn nx build && yarn dev', cwd: path.resolve(__dirname, '../../apps/admin-x-settings'), prefixColor: '#C35831', env: {} -}; +}]; if (DASH_DASH_ARGS.includes('ghost')) { commands = [COMMAND_GHOST, COMMAND_TYPESCRIPT]; } else if (DASH_DASH_ARGS.includes('admin')) { - commands = [COMMAND_ADMIN, COMMAND_ADMINX]; + commands = [COMMAND_ADMIN, ...COMMANDS_ADMINX]; } else { - commands = [COMMAND_GHOST, COMMAND_TYPESCRIPT, COMMAND_ADMIN, COMMAND_ADMINX]; + commands = [COMMAND_GHOST, COMMAND_TYPESCRIPT, COMMAND_ADMIN, ...COMMANDS_ADMINX]; } if (DASH_DASH_ARGS.includes('portal') || DASH_DASH_ARGS.includes('all')) { diff --git a/apps/admin-x-design/.eslintrc.cjs b/apps/admin-x-design/.eslintrc.cjs new file mode 100644 index 0000000000..27d400ede5 --- /dev/null +++ b/apps/admin-x-design/.eslintrc.cjs @@ -0,0 +1,41 @@ +module.exports = { + extends: [ + 'plugin:ghost/ts', + 'plugin:react/recommended', + 'plugin:react-hooks/recommended' + ], + plugins: [ + 'ghost', + 'react-refresh', + 'tailwindcss' + ], + settings: { + react: { + version: 'detect' + } + }, + rules: { + // suppress errors for missing 'import React' in JSX files, as we don't need it + 'react/react-in-jsx-scope': 'off', + // ignore prop-types for now + 'react/prop-types': 'off', + + 'react/jsx-sort-props': ['error', { + reservedFirst: true, + callbacksLast: true, + shorthandLast: true, + locale: 'en' + }], + 'react/button-has-type': 'error', + 'react/no-array-index-key': 'error', + 'react/jsx-key': 'off', + + 'tailwindcss/classnames-order': ['error', {config: 'tailwind.config.cjs'}], + 'tailwindcss/enforces-negative-arbitrary-values': ['warn', {config: 'tailwind.config.cjs'}], + 'tailwindcss/enforces-shorthand': ['warn', {config: 'tailwind.config.cjs'}], + 'tailwindcss/migration-from-tailwind-2': ['warn', {config: 'tailwind.config.cjs'}], + 'tailwindcss/no-arbitrary-value': 'off', + 'tailwindcss/no-custom-classname': 'off', + 'tailwindcss/no-contradicting-classname': ['error', {config: 'tailwind.config.cjs'}] + } +}; diff --git a/apps/admin-x-design/.gitignore b/apps/admin-x-design/.gitignore new file mode 100644 index 0000000000..62ac7b71aa --- /dev/null +++ b/apps/admin-x-design/.gitignore @@ -0,0 +1,2 @@ +es +types diff --git a/apps/admin-x-settings/src/admin-x-ds/assets/fonts/Inter.ttf b/apps/admin-x-design/.storybook/Inter.ttf similarity index 100% rename from apps/admin-x-settings/src/admin-x-ds/assets/fonts/Inter.ttf rename to apps/admin-x-design/.storybook/Inter.ttf diff --git a/apps/admin-x-settings/.storybook/adminx-theme.tsx b/apps/admin-x-design/.storybook/adminx-theme.tsx similarity index 100% rename from apps/admin-x-settings/.storybook/adminx-theme.tsx rename to apps/admin-x-design/.storybook/adminx-theme.tsx diff --git a/apps/admin-x-settings/.storybook/main.tsx b/apps/admin-x-design/.storybook/main.tsx similarity index 59% rename from apps/admin-x-settings/.storybook/main.tsx rename to apps/admin-x-design/.storybook/main.tsx index c80dfe7b94..53b7664ef0 100644 --- a/apps/admin-x-settings/.storybook/main.tsx +++ b/apps/admin-x-design/.storybook/main.tsx @@ -1,5 +1,5 @@ -import {resolve} from "path"; import type { StorybookConfig } from "@storybook/react-vite"; + const config: StorybookConfig = { stories: ["../src/**/*.mdx", "../src/**/*.stories.@(js|jsx|ts|tsx)"], addons: [ @@ -17,14 +17,11 @@ const config: StorybookConfig = { docs: { autodocs: "tag", }, - // staticDirs: ['../public/fonts'], - async viteFinal(config, options) { - config.resolve.alias = { - crypto: require.resolve('rollup-plugin-node-builtins'), - // @TODO: Remove this when @tryghost/nql is updated - mingo: resolve(__dirname, '../../../node_modules/mingo/dist/mingo.js') + async viteFinal(config, options) { + config.resolve!.alias = { + crypto: require.resolve('rollup-plugin-node-builtins') } return config; - }, + } }; export default config; diff --git a/apps/admin-x-settings/.storybook/manager.tsx b/apps/admin-x-design/.storybook/manager.tsx similarity index 100% rename from apps/admin-x-settings/.storybook/manager.tsx rename to apps/admin-x-design/.storybook/manager.tsx diff --git a/apps/admin-x-settings/.storybook/preview.tsx b/apps/admin-x-design/.storybook/preview.tsx similarity index 76% rename from apps/admin-x-settings/.storybook/preview.tsx rename to apps/admin-x-design/.storybook/preview.tsx index 268a8befcd..95bb20f5d3 100644 --- a/apps/admin-x-settings/.storybook/preview.tsx +++ b/apps/admin-x-design/.storybook/preview.tsx @@ -1,13 +1,11 @@ import React from 'react'; -import '../src/styles/demo.css'; -import type { Preview } from "@storybook/react"; -import '../src/admin-x-ds/providers/DesignSystemProvider'; -import DesignSystemProvider from '../src/admin-x-ds/providers/DesignSystemProvider'; -import adminxTheme from './adminx-theme'; -import { themes } from '@storybook/theming'; +import '../styles.css'; +import './storybook.css'; -import '../src/admin-x-ds/assets/styles/storybook.css'; +import type { Preview } from "@storybook/react"; +import DesignSystemProvider from '../src/providers/DesignSystemProvider'; +import adminxTheme from './adminx-theme'; const preview: Preview = { parameters: { @@ -33,12 +31,12 @@ const preview: Preview = { let {scheme} = context.globals; return ( -
{/* 👇 Decorators in Storybook also accept a function. Replace with Story() to enable it */} - + {}}>
); diff --git a/apps/admin-x-settings/src/admin-x-ds/assets/styles/storybook.css b/apps/admin-x-design/.storybook/storybook.css similarity index 83% rename from apps/admin-x-settings/src/admin-x-ds/assets/styles/storybook.css rename to apps/admin-x-design/.storybook/storybook.css index aecd958520..062e7a1056 100644 --- a/apps/admin-x-settings/src/admin-x-ds/assets/styles/storybook.css +++ b/apps/admin-x-design/.storybook/storybook.css @@ -1,3 +1,32 @@ +/* + * We load Inter in Ember admin, so loading it explicitly here makes the final rendering + * in Storybook match the final rendering when embedded in Ember + */ +@font-face { + font-family: "Inter"; + src: url("./Inter.ttf") format("truetype-variations"); + font-weight: 100 900; +} + +:root { + font-size: 62.5%; + line-height: 1.5; + -ms-text-size-adjust: 100%; + -webkit-text-size-adjust: 100%; + + text-rendering: optimizeLegibility; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + -webkit-text-size-adjust: 100%; +} + +html, body, #root { + width: 100%; + height: 100%; + margin: 0; + letter-spacing: unset; +} + .sbdocs-wrapper { padding: 3vmin !important; } @@ -211,4 +240,4 @@ display: grid; grid-template-columns: auto 240px; gap: 32px; -} \ No newline at end of file +} diff --git a/apps/admin-x-design/README.md b/apps/admin-x-design/README.md new file mode 100644 index 0000000000..a76239c6f2 --- /dev/null +++ b/apps/admin-x-design/README.md @@ -0,0 +1,23 @@ +# Admin X Design + +Components, design guidelines and documentation for building apps in Ghost Admin + + +## Usage + + +## Develop + +This is a monorepo package. + +Follow the instructions for the top-level repo. +1. `git clone` this repo & `cd` into it as usual +2. Run `yarn` to install top-level dependencies. + + + +## Test + +- `yarn lint` run just eslint +- `yarn test` run lint and tests + diff --git a/apps/admin-x-design/package.json b/apps/admin-x-design/package.json new file mode 100644 index 0000000000..d84342aaa4 --- /dev/null +++ b/apps/admin-x-design/package.json @@ -0,0 +1,75 @@ +{ + "name": "@tryghost/admin-x-design", + "type": "module", + "version": "0.0.0", + "repository": "https://github.com/TryGhost/Ghost/tree/main/packages/admin-x-design", + "author": "Ghost Foundation", + "private": true, + "main": "es/index.js", + "types": "types/index.d.ts", + "sideEffects": false, + "scripts": { + "build": "vite build && tsc -p tsconfig.declaration.json", + "prepare": "yarn build", + "test": "yarn test:types", + "test:types": "tsc --noEmit", + "lint:code": "eslint --ext .js,.ts,.cjs,.tsx src/ --cache", + "lint": "yarn lint:code && yarn lint:test", + "lint:test": "eslint -c test/.eslintrc.cjs --ext .js,.ts,.cjs,.tsx test/ --cache", + "storybook": "storybook dev -p 6006", + "build-storybook": "storybook build" + }, + "files": [ + "es", + "types", + "tailwind.cjs", + "tailwind.config.cjs" + ], + "devDependencies": { + "@codemirror/lang-html": "^6.4.5", + "@storybook/addon-essentials": "7.4.0", + "@storybook/addon-interactions": "7.4.0", + "@storybook/addon-links": "7.4.0", + "@storybook/addon-styling": "1.3.7", + "@storybook/blocks": "7.4.0", + "@storybook/react": "7.4.0", + "@storybook/react-vite": "7.4.0", + "@storybook/testing-library": "0.2.2", + "@vitejs/plugin-react": "4.1.1", + "c8": "8.0.1", + "eslint-plugin-react-hooks": "4.6.0", + "eslint-plugin-react-refresh": "0.4.3", + "eslint-plugin-tailwindcss": "3.13.0", + "mocha": "10.2.0", + "rollup-plugin-node-builtins": "2.1.2", + "sinon": "17.0.0", + "ts-node": "10.9.1", + "react": "^18.2.0", + "react-dom": "^18.2.0", + "storybook": "7.4.0", + "typescript": "5.2.2", + "vite": "4.5.0", + "vite-plugin-svgr": "3.3.0" + }, + "dependencies": { + "@dnd-kit/core": "6.0.8", + "@dnd-kit/sortable": "7.0.2", + "@ebay/nice-modal-react": "1.2.13", + "@sentry/react": "7.77.0", + "@tailwindcss/forms": "0.5.6", + "@tailwindcss/line-clamp": "0.4.4", + "@uiw/react-codemirror": "^4.21.9", + "autoprefixer": "10.4.16", + "clsx": "2.0.0", + "postcss": "8.4.31", + "postcss-import": "15.1.0", + "react-colorful": "^5.1.2", + "react-hot-toast": "2.4.1", + "react-select": "5.8.0", + "tailwindcss": "3.3.5" + }, + "peerDependencies": { + "react": "^18.2.0", + "react-dom": "^18.2.0" + } +} diff --git a/apps/admin-x-design/postcss.config.js b/apps/admin-x-design/postcss.config.js new file mode 100644 index 0000000000..3f15318da0 --- /dev/null +++ b/apps/admin-x-design/postcss.config.js @@ -0,0 +1,8 @@ +export default { + plugins: { + 'postcss-import': {}, + 'tailwindcss/nesting': {}, + tailwindcss: {}, + autoprefixer: {} + } +}; diff --git a/apps/admin-x-settings/src/styles/preflight.css b/apps/admin-x-design/preflight.css similarity index 99% rename from apps/admin-x-settings/src/styles/preflight.css rename to apps/admin-x-design/preflight.css index ff179a0650..894cd6629a 100644 --- a/apps/admin-x-settings/src/styles/preflight.css +++ b/apps/admin-x-design/preflight.css @@ -1,5 +1,4 @@ -.admin-x-settings { - +.admin-x-base { /* 1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4) 2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116) @@ -329,7 +328,7 @@ input::placeholder, textarea::placeholder { opacity: 1; /* 1 */ - color: theme('colors.grey.500'); /* 2 */ + @apply text-grey-500; /* 2 */ } button:focus-visible, @@ -364,5 +363,4 @@ max-width: 100%; height: auto; } - -} \ No newline at end of file +} diff --git a/apps/admin-x-settings/src/admin-x-ds/Boilerplate.stories.tsx b/apps/admin-x-design/src/Boilerplate.stories.tsx similarity index 100% rename from apps/admin-x-settings/src/admin-x-ds/Boilerplate.stories.tsx rename to apps/admin-x-design/src/Boilerplate.stories.tsx diff --git a/apps/admin-x-settings/src/admin-x-ds/Boilerplate.tsx b/apps/admin-x-design/src/Boilerplate.tsx similarity index 100% rename from apps/admin-x-settings/src/admin-x-ds/Boilerplate.tsx rename to apps/admin-x-design/src/Boilerplate.tsx diff --git a/apps/admin-x-design/src/DesignSystemApp.tsx b/apps/admin-x-design/src/DesignSystemApp.tsx new file mode 100644 index 0000000000..6606867af1 --- /dev/null +++ b/apps/admin-x-design/src/DesignSystemApp.tsx @@ -0,0 +1,27 @@ +import clsx from 'clsx'; +import React from 'react'; +import {FetchKoenigLexical} from './global/form/HtmlEditor'; +import DesignSystemProvider from './providers/DesignSystemProvider'; + +export interface DesignSystemAppProps extends React.HTMLProps { + darkMode: boolean; + fetchKoenigLexical: FetchKoenigLexical; +} + +const DesignSystemApp: React.FC = ({darkMode, fetchKoenigLexical, className, children, ...props}) => { + const appClassName = clsx( + 'admin-x-base', + darkMode && 'dark', + className + ); + + return ( +
+ + {children} + +
+ ); +}; + +export default DesignSystemApp; diff --git a/apps/admin-x-settings/src/admin-x-ds/assets/icons/add.svg b/apps/admin-x-design/src/assets/icons/add.svg similarity index 100% rename from apps/admin-x-settings/src/admin-x-ds/assets/icons/add.svg rename to apps/admin-x-design/src/assets/icons/add.svg diff --git a/apps/admin-x-settings/src/admin-x-ds/assets/icons/align-center.svg b/apps/admin-x-design/src/assets/icons/align-center.svg similarity index 100% rename from apps/admin-x-settings/src/admin-x-ds/assets/icons/align-center.svg rename to apps/admin-x-design/src/assets/icons/align-center.svg diff --git a/apps/admin-x-settings/src/admin-x-ds/assets/icons/align-left.svg b/apps/admin-x-design/src/assets/icons/align-left.svg similarity index 100% rename from apps/admin-x-settings/src/admin-x-ds/assets/icons/align-left.svg rename to apps/admin-x-design/src/assets/icons/align-left.svg diff --git a/apps/admin-x-settings/src/admin-x-ds/assets/icons/angle-brackets.svg b/apps/admin-x-design/src/assets/icons/angle-brackets.svg similarity index 100% rename from apps/admin-x-settings/src/admin-x-ds/assets/icons/angle-brackets.svg rename to apps/admin-x-design/src/assets/icons/angle-brackets.svg diff --git a/apps/admin-x-settings/src/admin-x-ds/assets/icons/arrow-bottom-left.svg b/apps/admin-x-design/src/assets/icons/arrow-bottom-left.svg similarity index 100% rename from apps/admin-x-settings/src/admin-x-ds/assets/icons/arrow-bottom-left.svg rename to apps/admin-x-design/src/assets/icons/arrow-bottom-left.svg diff --git a/apps/admin-x-settings/src/admin-x-ds/assets/icons/arrow-bottom-right.svg b/apps/admin-x-design/src/assets/icons/arrow-bottom-right.svg similarity index 100% rename from apps/admin-x-settings/src/admin-x-ds/assets/icons/arrow-bottom-right.svg rename to apps/admin-x-design/src/assets/icons/arrow-bottom-right.svg diff --git a/apps/admin-x-settings/src/admin-x-ds/assets/icons/arrow-down.svg b/apps/admin-x-design/src/assets/icons/arrow-down.svg similarity index 100% rename from apps/admin-x-settings/src/admin-x-ds/assets/icons/arrow-down.svg rename to apps/admin-x-design/src/assets/icons/arrow-down.svg diff --git a/apps/admin-x-settings/src/admin-x-ds/assets/icons/arrow-left.svg b/apps/admin-x-design/src/assets/icons/arrow-left.svg similarity index 100% rename from apps/admin-x-settings/src/admin-x-ds/assets/icons/arrow-left.svg rename to apps/admin-x-design/src/assets/icons/arrow-left.svg diff --git a/apps/admin-x-settings/src/admin-x-ds/assets/icons/arrow-right.svg b/apps/admin-x-design/src/assets/icons/arrow-right.svg similarity index 100% rename from apps/admin-x-settings/src/admin-x-ds/assets/icons/arrow-right.svg rename to apps/admin-x-design/src/assets/icons/arrow-right.svg diff --git a/apps/admin-x-settings/src/admin-x-ds/assets/icons/arrow-top-left.svg b/apps/admin-x-design/src/assets/icons/arrow-top-left.svg similarity index 100% rename from apps/admin-x-settings/src/admin-x-ds/assets/icons/arrow-top-left.svg rename to apps/admin-x-design/src/assets/icons/arrow-top-left.svg diff --git a/apps/admin-x-settings/src/admin-x-ds/assets/icons/arrow-top-right.svg b/apps/admin-x-design/src/assets/icons/arrow-top-right.svg similarity index 100% rename from apps/admin-x-settings/src/admin-x-ds/assets/icons/arrow-top-right.svg rename to apps/admin-x-design/src/assets/icons/arrow-top-right.svg diff --git a/apps/admin-x-settings/src/admin-x-ds/assets/icons/arrow-up.svg b/apps/admin-x-design/src/assets/icons/arrow-up.svg similarity index 100% rename from apps/admin-x-settings/src/admin-x-ds/assets/icons/arrow-up.svg rename to apps/admin-x-design/src/assets/icons/arrow-up.svg diff --git a/apps/admin-x-settings/src/admin-x-ds/assets/icons/at-sign.svg b/apps/admin-x-design/src/assets/icons/at-sign.svg similarity index 100% rename from apps/admin-x-settings/src/admin-x-ds/assets/icons/at-sign.svg rename to apps/admin-x-design/src/assets/icons/at-sign.svg diff --git a/apps/admin-x-settings/src/admin-x-ds/assets/icons/baseline-chart.svg b/apps/admin-x-design/src/assets/icons/baseline-chart.svg similarity index 100% rename from apps/admin-x-settings/src/admin-x-ds/assets/icons/baseline-chart.svg rename to apps/admin-x-design/src/assets/icons/baseline-chart.svg diff --git a/apps/admin-x-settings/src/admin-x-ds/assets/icons/bills.svg b/apps/admin-x-design/src/assets/icons/bills.svg similarity index 100% rename from apps/admin-x-settings/src/admin-x-ds/assets/icons/bills.svg rename to apps/admin-x-design/src/assets/icons/bills.svg diff --git a/apps/admin-x-settings/src/admin-x-ds/assets/icons/book-open.svg b/apps/admin-x-design/src/assets/icons/book-open.svg similarity index 100% rename from apps/admin-x-settings/src/admin-x-ds/assets/icons/book-open.svg rename to apps/admin-x-design/src/assets/icons/book-open.svg diff --git a/apps/admin-x-settings/src/admin-x-ds/assets/icons/brackets.svg b/apps/admin-x-design/src/assets/icons/brackets.svg similarity index 100% rename from apps/admin-x-settings/src/admin-x-ds/assets/icons/brackets.svg rename to apps/admin-x-design/src/assets/icons/brackets.svg diff --git a/apps/admin-x-settings/src/admin-x-ds/assets/icons/check-circle.svg b/apps/admin-x-design/src/assets/icons/check-circle.svg similarity index 100% rename from apps/admin-x-settings/src/admin-x-ds/assets/icons/check-circle.svg rename to apps/admin-x-design/src/assets/icons/check-circle.svg diff --git a/apps/admin-x-settings/src/admin-x-ds/assets/icons/check.svg b/apps/admin-x-design/src/assets/icons/check.svg similarity index 100% rename from apps/admin-x-settings/src/admin-x-ds/assets/icons/check.svg rename to apps/admin-x-design/src/assets/icons/check.svg diff --git a/apps/admin-x-settings/src/admin-x-ds/assets/icons/chevron-down.svg b/apps/admin-x-design/src/assets/icons/chevron-down.svg similarity index 100% rename from apps/admin-x-settings/src/admin-x-ds/assets/icons/chevron-down.svg rename to apps/admin-x-design/src/assets/icons/chevron-down.svg diff --git a/apps/admin-x-settings/src/admin-x-ds/assets/icons/chevron-left.svg b/apps/admin-x-design/src/assets/icons/chevron-left.svg similarity index 100% rename from apps/admin-x-settings/src/admin-x-ds/assets/icons/chevron-left.svg rename to apps/admin-x-design/src/assets/icons/chevron-left.svg diff --git a/apps/admin-x-settings/src/admin-x-ds/assets/icons/chevron-right.svg b/apps/admin-x-design/src/assets/icons/chevron-right.svg similarity index 100% rename from apps/admin-x-settings/src/admin-x-ds/assets/icons/chevron-right.svg rename to apps/admin-x-design/src/assets/icons/chevron-right.svg diff --git a/apps/admin-x-settings/src/admin-x-ds/assets/icons/chevron-up.svg b/apps/admin-x-design/src/assets/icons/chevron-up.svg similarity index 100% rename from apps/admin-x-settings/src/admin-x-ds/assets/icons/chevron-up.svg rename to apps/admin-x-design/src/assets/icons/chevron-up.svg diff --git a/apps/admin-x-settings/src/admin-x-ds/assets/icons/close.svg b/apps/admin-x-design/src/assets/icons/close.svg similarity index 100% rename from apps/admin-x-settings/src/admin-x-ds/assets/icons/close.svg rename to apps/admin-x-design/src/assets/icons/close.svg diff --git a/apps/admin-x-settings/src/admin-x-ds/assets/icons/comment.svg b/apps/admin-x-design/src/assets/icons/comment.svg similarity index 100% rename from apps/admin-x-settings/src/admin-x-ds/assets/icons/comment.svg rename to apps/admin-x-design/src/assets/icons/comment.svg diff --git a/apps/admin-x-settings/src/admin-x-ds/assets/icons/crown.svg b/apps/admin-x-design/src/assets/icons/crown.svg similarity index 100% rename from apps/admin-x-settings/src/admin-x-ds/assets/icons/crown.svg rename to apps/admin-x-design/src/assets/icons/crown.svg diff --git a/apps/admin-x-settings/src/admin-x-ds/assets/icons/discount.svg b/apps/admin-x-design/src/assets/icons/discount.svg similarity index 100% rename from apps/admin-x-settings/src/admin-x-ds/assets/icons/discount.svg rename to apps/admin-x-design/src/assets/icons/discount.svg diff --git a/apps/admin-x-settings/src/admin-x-ds/assets/icons/duplicate.svg b/apps/admin-x-design/src/assets/icons/duplicate.svg similarity index 100% rename from apps/admin-x-settings/src/admin-x-ds/assets/icons/duplicate.svg rename to apps/admin-x-design/src/assets/icons/duplicate.svg diff --git a/apps/admin-x-settings/src/admin-x-ds/assets/icons/ellipsis.svg b/apps/admin-x-design/src/assets/icons/ellipsis.svg similarity index 100% rename from apps/admin-x-settings/src/admin-x-ds/assets/icons/ellipsis.svg rename to apps/admin-x-design/src/assets/icons/ellipsis.svg diff --git a/apps/admin-x-settings/src/admin-x-ds/assets/icons/email-check.svg b/apps/admin-x-design/src/assets/icons/email-check.svg similarity index 100% rename from apps/admin-x-settings/src/admin-x-ds/assets/icons/email-check.svg rename to apps/admin-x-design/src/assets/icons/email-check.svg diff --git a/apps/admin-x-settings/src/admin-x-ds/assets/icons/email.svg b/apps/admin-x-design/src/assets/icons/email.svg similarity index 100% rename from apps/admin-x-settings/src/admin-x-ds/assets/icons/email.svg rename to apps/admin-x-design/src/assets/icons/email.svg diff --git a/apps/admin-x-settings/src/admin-x-ds/assets/icons/emailfield.svg b/apps/admin-x-design/src/assets/icons/emailfield.svg similarity index 100% rename from apps/admin-x-settings/src/admin-x-ds/assets/icons/emailfield.svg rename to apps/admin-x-design/src/assets/icons/emailfield.svg diff --git a/apps/admin-x-settings/src/admin-x-ds/assets/icons/eyedropper.svg b/apps/admin-x-design/src/assets/icons/eyedropper.svg similarity index 100% rename from apps/admin-x-settings/src/admin-x-ds/assets/icons/eyedropper.svg rename to apps/admin-x-design/src/assets/icons/eyedropper.svg diff --git a/apps/admin-x-settings/src/admin-x-ds/assets/icons/facebook.svg b/apps/admin-x-design/src/assets/icons/facebook.svg similarity index 100% rename from apps/admin-x-settings/src/admin-x-ds/assets/icons/facebook.svg rename to apps/admin-x-design/src/assets/icons/facebook.svg diff --git a/apps/admin-x-settings/src/admin-x-ds/assets/icons/finger-up.svg b/apps/admin-x-design/src/assets/icons/finger-up.svg similarity index 100% rename from apps/admin-x-settings/src/admin-x-ds/assets/icons/finger-up.svg rename to apps/admin-x-design/src/assets/icons/finger-up.svg diff --git a/apps/admin-x-settings/src/admin-x-ds/assets/icons/hamburger.svg b/apps/admin-x-design/src/assets/icons/hamburger.svg similarity index 100% rename from apps/admin-x-settings/src/admin-x-ds/assets/icons/hamburger.svg rename to apps/admin-x-design/src/assets/icons/hamburger.svg diff --git a/apps/admin-x-settings/src/admin-x-ds/assets/icons/heart.svg b/apps/admin-x-design/src/assets/icons/heart.svg similarity index 100% rename from apps/admin-x-settings/src/admin-x-ds/assets/icons/heart.svg rename to apps/admin-x-design/src/assets/icons/heart.svg diff --git a/apps/admin-x-settings/src/admin-x-ds/assets/icons/integration.svg b/apps/admin-x-design/src/assets/icons/integration.svg similarity index 100% rename from apps/admin-x-settings/src/admin-x-ds/assets/icons/integration.svg rename to apps/admin-x-design/src/assets/icons/integration.svg diff --git a/apps/admin-x-settings/src/admin-x-ds/assets/icons/key.svg b/apps/admin-x-design/src/assets/icons/key.svg similarity index 100% rename from apps/admin-x-settings/src/admin-x-ds/assets/icons/key.svg rename to apps/admin-x-design/src/assets/icons/key.svg diff --git a/apps/admin-x-settings/src/admin-x-ds/assets/icons/labs-flask.svg b/apps/admin-x-design/src/assets/icons/labs-flask.svg similarity index 100% rename from apps/admin-x-settings/src/admin-x-ds/assets/icons/labs-flask.svg rename to apps/admin-x-design/src/assets/icons/labs-flask.svg diff --git a/apps/admin-x-settings/src/admin-x-ds/assets/icons/language.svg b/apps/admin-x-design/src/assets/icons/language.svg similarity index 100% rename from apps/admin-x-settings/src/admin-x-ds/assets/icons/language.svg rename to apps/admin-x-design/src/assets/icons/language.svg diff --git a/apps/admin-x-settings/src/admin-x-ds/assets/icons/laptop.svg b/apps/admin-x-design/src/assets/icons/laptop.svg similarity index 100% rename from apps/admin-x-settings/src/admin-x-ds/assets/icons/laptop.svg rename to apps/admin-x-design/src/assets/icons/laptop.svg diff --git a/apps/admin-x-settings/src/admin-x-ds/assets/icons/layer.svg b/apps/admin-x-design/src/assets/icons/layer.svg similarity index 100% rename from apps/admin-x-settings/src/admin-x-ds/assets/icons/layer.svg rename to apps/admin-x-design/src/assets/icons/layer.svg diff --git a/apps/admin-x-settings/src/admin-x-ds/assets/icons/like.svg b/apps/admin-x-design/src/assets/icons/like.svg similarity index 100% rename from apps/admin-x-settings/src/admin-x-ds/assets/icons/like.svg rename to apps/admin-x-design/src/assets/icons/like.svg diff --git a/apps/admin-x-settings/src/admin-x-ds/assets/icons/link-broken.svg b/apps/admin-x-design/src/assets/icons/link-broken.svg similarity index 100% rename from apps/admin-x-settings/src/admin-x-ds/assets/icons/link-broken.svg rename to apps/admin-x-design/src/assets/icons/link-broken.svg diff --git a/apps/admin-x-settings/src/admin-x-ds/assets/icons/lock-locked.svg b/apps/admin-x-design/src/assets/icons/lock-locked.svg similarity index 100% rename from apps/admin-x-settings/src/admin-x-ds/assets/icons/lock-locked.svg rename to apps/admin-x-design/src/assets/icons/lock-locked.svg diff --git a/apps/admin-x-settings/src/admin-x-ds/assets/icons/lock-unlocked.svg b/apps/admin-x-design/src/assets/icons/lock-unlocked.svg similarity index 100% rename from apps/admin-x-settings/src/admin-x-ds/assets/icons/lock-unlocked.svg rename to apps/admin-x-design/src/assets/icons/lock-unlocked.svg diff --git a/apps/admin-x-settings/src/admin-x-ds/assets/icons/magnifying-glass.svg b/apps/admin-x-design/src/assets/icons/magnifying-glass.svg similarity index 100% rename from apps/admin-x-settings/src/admin-x-ds/assets/icons/magnifying-glass.svg rename to apps/admin-x-design/src/assets/icons/magnifying-glass.svg diff --git a/apps/admin-x-settings/src/admin-x-ds/assets/icons/mail-block.svg b/apps/admin-x-design/src/assets/icons/mail-block.svg similarity index 100% rename from apps/admin-x-settings/src/admin-x-ds/assets/icons/mail-block.svg rename to apps/admin-x-design/src/assets/icons/mail-block.svg diff --git a/apps/admin-x-settings/src/admin-x-ds/assets/icons/megaphone.svg b/apps/admin-x-design/src/assets/icons/megaphone.svg similarity index 100% rename from apps/admin-x-settings/src/admin-x-ds/assets/icons/megaphone.svg rename to apps/admin-x-design/src/assets/icons/megaphone.svg diff --git a/apps/admin-x-settings/src/admin-x-ds/assets/icons/mobile.svg b/apps/admin-x-design/src/assets/icons/mobile.svg similarity index 100% rename from apps/admin-x-settings/src/admin-x-ds/assets/icons/mobile.svg rename to apps/admin-x-design/src/assets/icons/mobile.svg diff --git a/apps/admin-x-settings/src/admin-x-ds/assets/icons/modules-3.svg b/apps/admin-x-design/src/assets/icons/modules-3.svg similarity index 100% rename from apps/admin-x-settings/src/admin-x-ds/assets/icons/modules-3.svg rename to apps/admin-x-design/src/assets/icons/modules-3.svg diff --git a/apps/admin-x-settings/src/admin-x-ds/assets/icons/money-bags.svg b/apps/admin-x-design/src/assets/icons/money-bags.svg similarity index 100% rename from apps/admin-x-settings/src/admin-x-ds/assets/icons/money-bags.svg rename to apps/admin-x-design/src/assets/icons/money-bags.svg diff --git a/apps/admin-x-settings/src/admin-x-ds/assets/icons/navigation.svg b/apps/admin-x-design/src/assets/icons/navigation.svg similarity index 100% rename from apps/admin-x-settings/src/admin-x-ds/assets/icons/navigation.svg rename to apps/admin-x-design/src/assets/icons/navigation.svg diff --git a/apps/admin-x-settings/src/admin-x-ds/assets/icons/palette.svg b/apps/admin-x-design/src/assets/icons/palette.svg similarity index 100% rename from apps/admin-x-settings/src/admin-x-ds/assets/icons/palette.svg rename to apps/admin-x-design/src/assets/icons/palette.svg diff --git a/apps/admin-x-settings/src/admin-x-ds/assets/icons/pen.svg b/apps/admin-x-design/src/assets/icons/pen.svg similarity index 100% rename from apps/admin-x-settings/src/admin-x-ds/assets/icons/pen.svg rename to apps/admin-x-design/src/assets/icons/pen.svg diff --git a/apps/admin-x-settings/src/admin-x-ds/assets/icons/picture.svg b/apps/admin-x-design/src/assets/icons/picture.svg similarity index 100% rename from apps/admin-x-settings/src/admin-x-ds/assets/icons/picture.svg rename to apps/admin-x-design/src/assets/icons/picture.svg diff --git a/apps/admin-x-settings/src/admin-x-ds/assets/icons/piggybank.svg b/apps/admin-x-design/src/assets/icons/piggybank.svg similarity index 100% rename from apps/admin-x-settings/src/admin-x-ds/assets/icons/piggybank.svg rename to apps/admin-x-design/src/assets/icons/piggybank.svg diff --git a/apps/admin-x-settings/src/admin-x-ds/assets/icons/portal.svg b/apps/admin-x-design/src/assets/icons/portal.svg similarity index 100% rename from apps/admin-x-settings/src/admin-x-ds/assets/icons/portal.svg rename to apps/admin-x-design/src/assets/icons/portal.svg diff --git a/apps/admin-x-settings/src/admin-x-ds/assets/icons/question-circle.svg b/apps/admin-x-design/src/assets/icons/question-circle.svg similarity index 100% rename from apps/admin-x-settings/src/admin-x-ds/assets/icons/question-circle.svg rename to apps/admin-x-design/src/assets/icons/question-circle.svg diff --git a/apps/admin-x-settings/src/admin-x-ds/assets/icons/recepients.svg b/apps/admin-x-design/src/assets/icons/recepients.svg similarity index 100% rename from apps/admin-x-settings/src/admin-x-ds/assets/icons/recepients.svg rename to apps/admin-x-design/src/assets/icons/recepients.svg diff --git a/apps/admin-x-settings/src/admin-x-ds/assets/icons/single-user-block.svg b/apps/admin-x-design/src/assets/icons/single-user-block.svg similarity index 100% rename from apps/admin-x-settings/src/admin-x-ds/assets/icons/single-user-block.svg rename to apps/admin-x-design/src/assets/icons/single-user-block.svg diff --git a/apps/admin-x-settings/src/admin-x-ds/assets/icons/single-user-fill.svg b/apps/admin-x-design/src/assets/icons/single-user-fill.svg similarity index 100% rename from apps/admin-x-settings/src/admin-x-ds/assets/icons/single-user-fill.svg rename to apps/admin-x-design/src/assets/icons/single-user-fill.svg diff --git a/apps/admin-x-settings/src/admin-x-ds/assets/icons/textfield.svg b/apps/admin-x-design/src/assets/icons/textfield.svg similarity index 100% rename from apps/admin-x-settings/src/admin-x-ds/assets/icons/textfield.svg rename to apps/admin-x-design/src/assets/icons/textfield.svg diff --git a/apps/admin-x-settings/src/admin-x-ds/assets/icons/thumbs-down.svg b/apps/admin-x-design/src/assets/icons/thumbs-down.svg similarity index 100% rename from apps/admin-x-settings/src/admin-x-ds/assets/icons/thumbs-down.svg rename to apps/admin-x-design/src/assets/icons/thumbs-down.svg diff --git a/apps/admin-x-settings/src/admin-x-ds/assets/icons/thumbs-up.svg b/apps/admin-x-design/src/assets/icons/thumbs-up.svg similarity index 100% rename from apps/admin-x-settings/src/admin-x-ds/assets/icons/thumbs-up.svg rename to apps/admin-x-design/src/assets/icons/thumbs-up.svg diff --git a/apps/admin-x-settings/src/admin-x-ds/assets/icons/time-back.svg b/apps/admin-x-design/src/assets/icons/time-back.svg similarity index 100% rename from apps/admin-x-settings/src/admin-x-ds/assets/icons/time-back.svg rename to apps/admin-x-design/src/assets/icons/time-back.svg diff --git a/apps/admin-x-settings/src/admin-x-ds/assets/icons/trash.svg b/apps/admin-x-design/src/assets/icons/trash.svg similarity index 100% rename from apps/admin-x-settings/src/admin-x-ds/assets/icons/trash.svg rename to apps/admin-x-design/src/assets/icons/trash.svg diff --git a/apps/admin-x-settings/src/admin-x-ds/assets/icons/twitter-x.svg b/apps/admin-x-design/src/assets/icons/twitter-x.svg similarity index 100% rename from apps/admin-x-settings/src/admin-x-ds/assets/icons/twitter-x.svg rename to apps/admin-x-design/src/assets/icons/twitter-x.svg diff --git a/apps/admin-x-settings/src/admin-x-ds/assets/icons/unsplash-logo.svg b/apps/admin-x-design/src/assets/icons/unsplash-logo.svg similarity index 100% rename from apps/admin-x-settings/src/admin-x-ds/assets/icons/unsplash-logo.svg rename to apps/admin-x-design/src/assets/icons/unsplash-logo.svg diff --git a/apps/admin-x-settings/src/admin-x-ds/assets/icons/upload.svg b/apps/admin-x-design/src/assets/icons/upload.svg similarity index 100% rename from apps/admin-x-settings/src/admin-x-ds/assets/icons/upload.svg rename to apps/admin-x-design/src/assets/icons/upload.svg diff --git a/apps/admin-x-settings/src/admin-x-ds/assets/icons/user-add.svg b/apps/admin-x-design/src/assets/icons/user-add.svg similarity index 100% rename from apps/admin-x-settings/src/admin-x-ds/assets/icons/user-add.svg rename to apps/admin-x-design/src/assets/icons/user-add.svg diff --git a/apps/admin-x-settings/src/admin-x-ds/assets/icons/user-page.svg b/apps/admin-x-design/src/assets/icons/user-page.svg similarity index 100% rename from apps/admin-x-settings/src/admin-x-ds/assets/icons/user-page.svg rename to apps/admin-x-design/src/assets/icons/user-page.svg diff --git a/apps/admin-x-settings/src/admin-x-ds/assets/icons/warning.svg b/apps/admin-x-design/src/assets/icons/warning.svg similarity index 100% rename from apps/admin-x-settings/src/admin-x-ds/assets/icons/warning.svg rename to apps/admin-x-design/src/assets/icons/warning.svg diff --git a/apps/admin-x-settings/src/admin-x-ds/assets/icons/world-clock.svg b/apps/admin-x-design/src/assets/icons/world-clock.svg similarity index 100% rename from apps/admin-x-settings/src/admin-x-ds/assets/icons/world-clock.svg rename to apps/admin-x-design/src/assets/icons/world-clock.svg diff --git a/apps/admin-x-settings/src/admin-x-ds/assets/images/facebook-logo.svg b/apps/admin-x-design/src/assets/images/facebook-logo.svg similarity index 100% rename from apps/admin-x-settings/src/admin-x-ds/assets/images/facebook-logo.svg rename to apps/admin-x-design/src/assets/images/facebook-logo.svg diff --git a/apps/admin-x-settings/src/admin-x-ds/assets/images/ghost-logo.svg b/apps/admin-x-design/src/assets/images/ghost-logo.svg similarity index 100% rename from apps/admin-x-settings/src/admin-x-ds/assets/images/ghost-logo.svg rename to apps/admin-x-design/src/assets/images/ghost-logo.svg diff --git a/apps/admin-x-settings/src/admin-x-ds/assets/images/ghost-orb.svg b/apps/admin-x-design/src/assets/images/ghost-orb.svg similarity index 100% rename from apps/admin-x-settings/src/admin-x-ds/assets/images/ghost-orb.svg rename to apps/admin-x-design/src/assets/images/ghost-orb.svg diff --git a/apps/admin-x-settings/src/admin-x-ds/assets/images/google-logo.svg b/apps/admin-x-design/src/assets/images/google-logo.svg similarity index 100% rename from apps/admin-x-settings/src/admin-x-ds/assets/images/google-logo.svg rename to apps/admin-x-design/src/assets/images/google-logo.svg diff --git a/apps/admin-x-settings/src/admin-x-ds/assets/images/twitter-logo.svg b/apps/admin-x-design/src/assets/images/twitter-logo.svg similarity index 100% rename from apps/admin-x-settings/src/admin-x-ds/assets/images/twitter-logo.svg rename to apps/admin-x-design/src/assets/images/twitter-logo.svg diff --git a/apps/admin-x-settings/src/admin-x-ds/assets/images/x-logo.svg b/apps/admin-x-design/src/assets/images/x-logo.svg similarity index 100% rename from apps/admin-x-settings/src/admin-x-ds/assets/images/x-logo.svg rename to apps/admin-x-design/src/assets/images/x-logo.svg diff --git a/apps/admin-x-settings/src/admin-x-ds/docs/Colors.mdx b/apps/admin-x-design/src/docs/Colors.mdx similarity index 100% rename from apps/admin-x-settings/src/admin-x-ds/docs/Colors.mdx rename to apps/admin-x-design/src/docs/Colors.mdx diff --git a/apps/admin-x-settings/src/admin-x-ds/docs/ErrorHandling.mdx b/apps/admin-x-design/src/docs/ErrorHandling.mdx similarity index 100% rename from apps/admin-x-settings/src/admin-x-ds/docs/ErrorHandling.mdx rename to apps/admin-x-design/src/docs/ErrorHandling.mdx diff --git a/apps/admin-x-settings/src/admin-x-ds/docs/Icons.mdx b/apps/admin-x-design/src/docs/Icons.mdx similarity index 100% rename from apps/admin-x-settings/src/admin-x-ds/docs/Icons.mdx rename to apps/admin-x-design/src/docs/Icons.mdx diff --git a/apps/admin-x-settings/src/admin-x-ds/docs/Welcome.mdx b/apps/admin-x-design/src/docs/Welcome.mdx similarity index 85% rename from apps/admin-x-settings/src/admin-x-ds/docs/Welcome.mdx rename to apps/admin-x-design/src/docs/Welcome.mdx index 6d5c1180e4..6867019375 100644 --- a/apps/admin-x-settings/src/admin-x-ds/docs/Welcome.mdx +++ b/apps/admin-x-design/src/docs/Welcome.mdx @@ -14,8 +14,6 @@ import AppsIcon from './assets/apps.svg';

Here you can find our design guidelines, component documentation, and resources for building apps in Ghost Admin.

-
This is a work in progress. As of today, the Storybook system is part of AdminX Settings app but it's about to be a separated into its own package.
- ### What's inside The AdminX Design System is a collection of React UI building blocks for designers and developers to create apps for Ghost Admin. Its main purpose is to provide a library of available components and maintain consistency across the whole product. @@ -46,4 +44,4 @@ The system uses Storybook — if you're new to it, we recommend reading about w

- \ No newline at end of file + diff --git a/apps/admin-x-settings/src/admin-x-ds/docs/assets/adminx-screenshot.png b/apps/admin-x-design/src/docs/assets/adminx-screenshot.png similarity index 100% rename from apps/admin-x-settings/src/admin-x-ds/docs/assets/adminx-screenshot.png rename to apps/admin-x-design/src/docs/assets/adminx-screenshot.png diff --git a/apps/admin-x-settings/src/admin-x-ds/docs/assets/apps.svg b/apps/admin-x-design/src/docs/assets/apps.svg similarity index 100% rename from apps/admin-x-settings/src/admin-x-ds/docs/assets/apps.svg rename to apps/admin-x-design/src/docs/assets/apps.svg diff --git a/apps/admin-x-settings/src/admin-x-ds/docs/assets/blocks.svg b/apps/admin-x-design/src/docs/assets/blocks.svg similarity index 100% rename from apps/admin-x-settings/src/admin-x-ds/docs/assets/blocks.svg rename to apps/admin-x-design/src/docs/assets/blocks.svg diff --git a/apps/admin-x-settings/src/admin-x-ds/docs/assets/circle-menu.svg b/apps/admin-x-design/src/docs/assets/circle-menu.svg similarity index 100% rename from apps/admin-x-settings/src/admin-x-ds/docs/assets/circle-menu.svg rename to apps/admin-x-design/src/docs/assets/circle-menu.svg diff --git a/apps/admin-x-settings/src/admin-x-ds/docs/assets/code-brackets.svg b/apps/admin-x-design/src/docs/assets/code-brackets.svg similarity index 100% rename from apps/admin-x-settings/src/admin-x-ds/docs/assets/code-brackets.svg rename to apps/admin-x-design/src/docs/assets/code-brackets.svg diff --git a/apps/admin-x-settings/src/admin-x-ds/docs/assets/colors.svg b/apps/admin-x-design/src/docs/assets/colors.svg similarity index 100% rename from apps/admin-x-settings/src/admin-x-ds/docs/assets/colors.svg rename to apps/admin-x-design/src/docs/assets/colors.svg diff --git a/apps/admin-x-settings/src/admin-x-ds/docs/assets/comments.svg b/apps/admin-x-design/src/docs/assets/comments.svg similarity index 100% rename from apps/admin-x-settings/src/admin-x-ds/docs/assets/comments.svg rename to apps/admin-x-design/src/docs/assets/comments.svg diff --git a/apps/admin-x-settings/src/admin-x-ds/docs/assets/direction.svg b/apps/admin-x-design/src/docs/assets/direction.svg similarity index 100% rename from apps/admin-x-settings/src/admin-x-ds/docs/assets/direction.svg rename to apps/admin-x-design/src/docs/assets/direction.svg diff --git a/apps/admin-x-settings/src/admin-x-ds/docs/assets/ds-structure.png b/apps/admin-x-design/src/docs/assets/ds-structure.png similarity index 100% rename from apps/admin-x-settings/src/admin-x-ds/docs/assets/ds-structure.png rename to apps/admin-x-design/src/docs/assets/ds-structure.png diff --git a/apps/admin-x-settings/src/admin-x-ds/docs/assets/flow.svg b/apps/admin-x-design/src/docs/assets/flow.svg similarity index 100% rename from apps/admin-x-settings/src/admin-x-ds/docs/assets/flow.svg rename to apps/admin-x-design/src/docs/assets/flow.svg diff --git a/apps/admin-x-settings/src/admin-x-ds/docs/assets/global-error-example.png b/apps/admin-x-design/src/docs/assets/global-error-example.png similarity index 100% rename from apps/admin-x-settings/src/admin-x-ds/docs/assets/global-error-example.png rename to apps/admin-x-design/src/docs/assets/global-error-example.png diff --git a/apps/admin-x-settings/src/admin-x-ds/docs/assets/local-error-example.png b/apps/admin-x-design/src/docs/assets/local-error-example.png similarity index 100% rename from apps/admin-x-settings/src/admin-x-ds/docs/assets/local-error-example.png rename to apps/admin-x-design/src/docs/assets/local-error-example.png diff --git a/apps/admin-x-settings/src/admin-x-ds/docs/assets/page-error-example.png b/apps/admin-x-design/src/docs/assets/page-error-example.png similarity index 100% rename from apps/admin-x-settings/src/admin-x-ds/docs/assets/page-error-example.png rename to apps/admin-x-design/src/docs/assets/page-error-example.png diff --git a/apps/admin-x-settings/src/admin-x-ds/docs/assets/plugin.svg b/apps/admin-x-design/src/docs/assets/plugin.svg similarity index 100% rename from apps/admin-x-settings/src/admin-x-ds/docs/assets/plugin.svg rename to apps/admin-x-design/src/docs/assets/plugin.svg diff --git a/apps/admin-x-settings/src/admin-x-ds/docs/assets/repo.svg b/apps/admin-x-design/src/docs/assets/repo.svg similarity index 100% rename from apps/admin-x-settings/src/admin-x-ds/docs/assets/repo.svg rename to apps/admin-x-design/src/docs/assets/repo.svg diff --git a/apps/admin-x-settings/src/admin-x-ds/docs/assets/stackalt.svg b/apps/admin-x-design/src/docs/assets/stackalt.svg similarity index 100% rename from apps/admin-x-settings/src/admin-x-ds/docs/assets/stackalt.svg rename to apps/admin-x-design/src/docs/assets/stackalt.svg diff --git a/apps/admin-x-settings/src/admin-x-ds/docs/assets/streamline-settings.png b/apps/admin-x-design/src/docs/assets/streamline-settings.png similarity index 100% rename from apps/admin-x-settings/src/admin-x-ds/docs/assets/streamline-settings.png rename to apps/admin-x-design/src/docs/assets/streamline-settings.png diff --git a/apps/admin-x-settings/src/admin-x-ds/docs/assets/style-guide-layout.png b/apps/admin-x-design/src/docs/assets/style-guide-layout.png similarity index 100% rename from apps/admin-x-settings/src/admin-x-ds/docs/assets/style-guide-layout.png rename to apps/admin-x-design/src/docs/assets/style-guide-layout.png diff --git a/apps/admin-x-settings/src/admin-x-ds/docs/assets/style-guide.png b/apps/admin-x-design/src/docs/assets/style-guide.png similarity index 100% rename from apps/admin-x-settings/src/admin-x-ds/docs/assets/style-guide.png rename to apps/admin-x-design/src/docs/assets/style-guide.png diff --git a/apps/admin-x-settings/src/admin-x-ds/docs/assets/tower.svg b/apps/admin-x-design/src/docs/assets/tower.svg similarity index 100% rename from apps/admin-x-settings/src/admin-x-ds/docs/assets/tower.svg rename to apps/admin-x-design/src/docs/assets/tower.svg diff --git a/apps/admin-x-settings/src/admin-x-ds/global/Avatar.stories.tsx b/apps/admin-x-design/src/global/Avatar.stories.tsx similarity index 100% rename from apps/admin-x-settings/src/admin-x-ds/global/Avatar.stories.tsx rename to apps/admin-x-design/src/global/Avatar.stories.tsx diff --git a/apps/admin-x-settings/src/admin-x-ds/global/Avatar.tsx b/apps/admin-x-design/src/global/Avatar.tsx similarity index 97% rename from apps/admin-x-settings/src/admin-x-ds/global/Avatar.tsx rename to apps/admin-x-design/src/global/Avatar.tsx index 6d0a30befa..f95801b0fa 100644 --- a/apps/admin-x-settings/src/admin-x-ds/global/Avatar.tsx +++ b/apps/admin-x-design/src/global/Avatar.tsx @@ -3,7 +3,7 @@ import {ReactComponent as UserIcon} from '../assets/icons/single-user-fill.svg'; type AvatarSize = 'sm' | 'md' | 'lg' | 'xl'; -interface AvatarProps { +export interface AvatarProps { image?: string; label?: string; @@ -57,4 +57,4 @@ const Avatar: React.FC = ({image, label, labelColor, bgColor, size, } }; -export default Avatar; \ No newline at end of file +export default Avatar; diff --git a/apps/admin-x-settings/src/admin-x-ds/global/Banner.stories.tsx b/apps/admin-x-design/src/global/Banner.stories.tsx similarity index 100% rename from apps/admin-x-settings/src/admin-x-ds/global/Banner.stories.tsx rename to apps/admin-x-design/src/global/Banner.stories.tsx diff --git a/apps/admin-x-settings/src/admin-x-ds/global/Banner.tsx b/apps/admin-x-design/src/global/Banner.tsx similarity index 95% rename from apps/admin-x-settings/src/admin-x-ds/global/Banner.tsx rename to apps/admin-x-design/src/global/Banner.tsx index ad74060d14..40b9608367 100644 --- a/apps/admin-x-settings/src/admin-x-ds/global/Banner.tsx +++ b/apps/admin-x-design/src/global/Banner.tsx @@ -1,7 +1,7 @@ -import React from 'react'; import clsx from 'clsx'; +import React from 'react'; -interface BannerProps { +export interface BannerProps { color?: 'grey' | 'blue' | 'green' | 'yellow' | 'red'; children?: React.ReactNode; className?: string; @@ -33,4 +33,4 @@ const Banner: React.FC = ({color = 'grey', children, className}) => ); }; -export default Banner; \ No newline at end of file +export default Banner; diff --git a/apps/admin-x-settings/src/admin-x-ds/global/Breadcrumbs.stories.tsx b/apps/admin-x-design/src/global/Breadcrumbs.stories.tsx similarity index 100% rename from apps/admin-x-settings/src/admin-x-ds/global/Breadcrumbs.stories.tsx rename to apps/admin-x-design/src/global/Breadcrumbs.stories.tsx diff --git a/apps/admin-x-settings/src/admin-x-ds/global/Breadcrumbs.tsx b/apps/admin-x-design/src/global/Breadcrumbs.tsx similarity index 96% rename from apps/admin-x-settings/src/admin-x-ds/global/Breadcrumbs.tsx rename to apps/admin-x-design/src/global/Breadcrumbs.tsx index 63b9443181..aa93dfafae 100644 --- a/apps/admin-x-settings/src/admin-x-ds/global/Breadcrumbs.tsx +++ b/apps/admin-x-design/src/global/Breadcrumbs.tsx @@ -1,13 +1,13 @@ -import Button from './Button'; -import React from 'react'; import clsx from 'clsx'; +import React from 'react'; +import Button from './Button'; export type BreadcrumbItem = { label: React.ReactNode; onClick?: () => void; } -interface BreadcrumbsProps { +export interface BreadcrumbsProps { items: BreadcrumbItem[]; backIcon?: boolean; onBack?: () => void; @@ -71,4 +71,4 @@ const Breadcrumbs: React.FC = ({ ); }; -export default Breadcrumbs; \ No newline at end of file +export default Breadcrumbs; diff --git a/apps/admin-x-settings/src/admin-x-ds/global/Button.stories.tsx b/apps/admin-x-design/src/global/Button.stories.tsx similarity index 100% rename from apps/admin-x-settings/src/admin-x-ds/global/Button.stories.tsx rename to apps/admin-x-design/src/global/Button.stories.tsx diff --git a/apps/admin-x-settings/src/admin-x-ds/global/Button.tsx b/apps/admin-x-design/src/global/Button.tsx similarity index 100% rename from apps/admin-x-settings/src/admin-x-ds/global/Button.tsx rename to apps/admin-x-design/src/global/Button.tsx diff --git a/apps/admin-x-settings/src/admin-x-ds/global/ButtonGroup.stories.tsx b/apps/admin-x-design/src/global/ButtonGroup.stories.tsx similarity index 100% rename from apps/admin-x-settings/src/admin-x-ds/global/ButtonGroup.stories.tsx rename to apps/admin-x-design/src/global/ButtonGroup.stories.tsx diff --git a/apps/admin-x-settings/src/admin-x-ds/global/ButtonGroup.tsx b/apps/admin-x-design/src/global/ButtonGroup.tsx similarity index 90% rename from apps/admin-x-settings/src/admin-x-ds/global/ButtonGroup.tsx rename to apps/admin-x-design/src/global/ButtonGroup.tsx index 1c8e54cd5d..bd86202daf 100644 --- a/apps/admin-x-settings/src/admin-x-ds/global/ButtonGroup.tsx +++ b/apps/admin-x-design/src/global/ButtonGroup.tsx @@ -1,9 +1,9 @@ -import Button from './Button'; import React from 'react'; +import Button from './Button'; import {ButtonProps} from './Button'; -interface ButtonGroupProps { +export interface ButtonGroupProps { buttons: Array; link?: boolean; linkWithPadding?: boolean; @@ -20,4 +20,4 @@ const ButtonGroup: React.FC = ({buttons, link, linkWithPadding ); }; -export default ButtonGroup; \ No newline at end of file +export default ButtonGroup; diff --git a/apps/admin-x-settings/src/admin-x-ds/global/ErrorBoundary.stories.tsx b/apps/admin-x-design/src/global/ErrorBoundary.stories.tsx similarity index 100% rename from apps/admin-x-settings/src/admin-x-ds/global/ErrorBoundary.stories.tsx rename to apps/admin-x-design/src/global/ErrorBoundary.stories.tsx diff --git a/apps/admin-x-settings/src/admin-x-ds/global/ErrorBoundary.tsx b/apps/admin-x-design/src/global/ErrorBoundary.tsx similarity index 91% rename from apps/admin-x-settings/src/admin-x-ds/global/ErrorBoundary.tsx rename to apps/admin-x-design/src/global/ErrorBoundary.tsx index 4fe0db91ad..a69b1e6d07 100644 --- a/apps/admin-x-settings/src/admin-x-ds/global/ErrorBoundary.tsx +++ b/apps/admin-x-design/src/global/ErrorBoundary.tsx @@ -1,12 +1,17 @@ import * as Sentry from '@sentry/react'; -import Banner from './Banner'; import React, {ComponentType, ErrorInfo, ReactNode} from 'react'; +import Banner from './Banner'; + +export interface ErrorBoundaryProps { + children: ReactNode; + name: ReactNode; +} /** * Catches errors in child components and displays a banner. Useful to prevent errors in one * section from crashing the entire page */ -class ErrorBoundary extends React.Component<{children: ReactNode, name: ReactNode}> { +class ErrorBoundary extends React.Component { state = {hasError: false}; constructor(props: {children: ReactNode, name: ReactNode}) { diff --git a/apps/admin-x-settings/src/admin-x-ds/global/Heading.stories.tsx b/apps/admin-x-design/src/global/Heading.stories.tsx similarity index 100% rename from apps/admin-x-settings/src/admin-x-ds/global/Heading.stories.tsx rename to apps/admin-x-design/src/global/Heading.stories.tsx diff --git a/apps/admin-x-settings/src/admin-x-ds/global/Heading.tsx b/apps/admin-x-design/src/global/Heading.tsx similarity index 91% rename from apps/admin-x-settings/src/admin-x-ds/global/Heading.tsx rename to apps/admin-x-design/src/global/Heading.tsx index ff378d3742..427213cea0 100644 --- a/apps/admin-x-settings/src/admin-x-ds/global/Heading.tsx +++ b/apps/admin-x-design/src/global/Heading.tsx @@ -1,6 +1,6 @@ +import clsx from 'clsx'; import React from 'react'; import Separator from './Separator'; -import clsx from 'clsx'; export type HeadingLevel = 1 | 2 | 3 | 4 | 5 | 6; @@ -44,7 +44,9 @@ export const Heading6StylesGrey = clsx( 'text-grey-900 dark:text-grey-500' ); -const Heading: React.FC = ({ +export type HeadingProps = Heading1to5Props | Heading6Props | HeadingLabelProps + +const Heading: React.FC = ({ level = 1, children, styles = '', @@ -88,8 +90,8 @@ const Heading: React.FC = const Element = React.createElement(newElement, {className: className, key: 'heading-elem', ...props}, children); if (separator) { - let gap = (!level || level === 1) ? 2 : 1; - let bottomMargin = (level === 6) ? 2 : 3; + const gap = (!level || level === 1) ? 2 : 1; + const bottomMargin = (level === 6) ? 2 : 3; return (
{Element} diff --git a/apps/admin-x-settings/src/admin-x-ds/global/Hint.stories.tsx b/apps/admin-x-design/src/global/Hint.stories.tsx similarity index 100% rename from apps/admin-x-settings/src/admin-x-ds/global/Hint.stories.tsx rename to apps/admin-x-design/src/global/Hint.stories.tsx diff --git a/apps/admin-x-settings/src/admin-x-ds/global/Hint.tsx b/apps/admin-x-design/src/global/Hint.tsx similarity index 96% rename from apps/admin-x-settings/src/admin-x-ds/global/Hint.tsx rename to apps/admin-x-design/src/global/Hint.tsx index a8c170b921..77dc0fbb89 100644 --- a/apps/admin-x-settings/src/admin-x-ds/global/Hint.tsx +++ b/apps/admin-x-design/src/global/Hint.tsx @@ -1,7 +1,7 @@ -import React from 'react'; import clsx from 'clsx'; +import React from 'react'; -interface HintProps { +export interface HintProps { children?: React.ReactNode; color?: 'red' | 'green' | 'default' | ''; className?: string; diff --git a/apps/admin-x-settings/src/admin-x-ds/global/Icon.stories.tsx b/apps/admin-x-design/src/global/Icon.stories.tsx similarity index 100% rename from apps/admin-x-settings/src/admin-x-ds/global/Icon.stories.tsx rename to apps/admin-x-design/src/global/Icon.stories.tsx diff --git a/apps/admin-x-settings/src/admin-x-ds/global/Icon.tsx b/apps/admin-x-design/src/global/Icon.tsx similarity index 91% rename from apps/admin-x-settings/src/admin-x-ds/global/Icon.tsx rename to apps/admin-x-design/src/global/Icon.tsx index 4a082527f9..bb3e71df4b 100644 --- a/apps/admin-x-settings/src/admin-x-ds/global/Icon.tsx +++ b/apps/admin-x-design/src/global/Icon.tsx @@ -1,11 +1,11 @@ -import React from 'react'; import clsx from 'clsx'; +import React from 'react'; const icons: Record>}> = import.meta.glob('../assets/icons/*.svg', {eager: true}); -export type IconSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | number; +export type IconSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'custom' | number; -interface IconProps { +export interface IconProps { name: string; /** @@ -34,6 +34,8 @@ const Icon: React.FC = ({name, size = 'md', colorClass = '', classNam if (!styles) { switch (size) { + case 'custom': + break; case 'xs': styles = 'w-3 h-3'; break; diff --git a/apps/admin-x-settings/src/admin-x-ds/global/IconLabel.stories.tsx b/apps/admin-x-design/src/global/IconLabel.stories.tsx similarity index 100% rename from apps/admin-x-settings/src/admin-x-ds/global/IconLabel.stories.tsx rename to apps/admin-x-design/src/global/IconLabel.stories.tsx diff --git a/apps/admin-x-settings/src/admin-x-ds/global/IconLabel.tsx b/apps/admin-x-design/src/global/IconLabel.tsx similarity index 87% rename from apps/admin-x-settings/src/admin-x-ds/global/IconLabel.tsx rename to apps/admin-x-design/src/global/IconLabel.tsx index d9ec84bfd7..ca66ff46c8 100644 --- a/apps/admin-x-settings/src/admin-x-ds/global/IconLabel.tsx +++ b/apps/admin-x-design/src/global/IconLabel.tsx @@ -1,7 +1,7 @@ -import Icon from './Icon'; import React from 'react'; +import Icon from './Icon'; -interface IconLabelProps { +export interface IconLabelProps { icon: string; iconColorClass?: string; children?: React.ReactNode; @@ -16,4 +16,4 @@ const IconLabel: React.FC = ({icon, iconColorClass, children}) = ); }; -export default IconLabel; \ No newline at end of file +export default IconLabel; diff --git a/apps/admin-x-settings/src/admin-x-ds/global/InfiniteScrollListener.stories.tsx b/apps/admin-x-design/src/global/InfiniteScrollListener.stories.tsx similarity index 100% rename from apps/admin-x-settings/src/admin-x-ds/global/InfiniteScrollListener.stories.tsx rename to apps/admin-x-design/src/global/InfiniteScrollListener.stories.tsx diff --git a/apps/admin-x-settings/src/admin-x-ds/global/InfiniteScrollListener.tsx b/apps/admin-x-design/src/global/InfiniteScrollListener.tsx similarity index 82% rename from apps/admin-x-settings/src/admin-x-ds/global/InfiniteScrollListener.tsx rename to apps/admin-x-design/src/global/InfiniteScrollListener.tsx index 632bc75ac9..08dd4d8d60 100644 --- a/apps/admin-x-settings/src/admin-x-ds/global/InfiniteScrollListener.tsx +++ b/apps/admin-x-design/src/global/InfiniteScrollListener.tsx @@ -1,15 +1,17 @@ import React, {useEffect, useRef} from 'react'; +export interface InfiniteScrollListenerProps { + /** How many pixels before the end of the container the callback should trigger */ + offset: number; + onTrigger: () => void; +} + /** * Triggers a callback when the user scrolls close to the end of an element * (exactly how close is configurable with `offset`). The parent element must have * position: relative/absolute/etc. */ -const InfiniteScrollListener: React.FC<{ - /** How many pixels before the end of the container the callback should trigger */ - offset: number - onTrigger: () => void -}> = ({offset, onTrigger}) => { +const InfiniteScrollListener: React.FC = ({offset, onTrigger}) => { const ref = useRef(null); useEffect(() => { diff --git a/apps/admin-x-settings/src/admin-x-ds/global/Link.stories.tsx b/apps/admin-x-design/src/global/Link.stories.tsx similarity index 100% rename from apps/admin-x-settings/src/admin-x-ds/global/Link.stories.tsx rename to apps/admin-x-design/src/global/Link.stories.tsx diff --git a/apps/admin-x-settings/src/admin-x-ds/global/Link.tsx b/apps/admin-x-design/src/global/Link.tsx similarity index 89% rename from apps/admin-x-settings/src/admin-x-ds/global/Link.tsx rename to apps/admin-x-design/src/global/Link.tsx index dc389789e5..476fa0244a 100644 --- a/apps/admin-x-settings/src/admin-x-ds/global/Link.tsx +++ b/apps/admin-x-design/src/global/Link.tsx @@ -1,6 +1,6 @@ import React from 'react'; -interface LinkProps extends React.ComponentPropsWithoutRef<'a'> { +export interface LinkProps extends React.ComponentPropsWithoutRef<'a'> { href: string; /** diff --git a/apps/admin-x-settings/src/admin-x-ds/global/List.stories.tsx b/apps/admin-x-design/src/global/List.stories.tsx similarity index 100% rename from apps/admin-x-settings/src/admin-x-ds/global/List.stories.tsx rename to apps/admin-x-design/src/global/List.stories.tsx diff --git a/apps/admin-x-settings/src/admin-x-ds/global/List.tsx b/apps/admin-x-design/src/global/List.tsx similarity index 97% rename from apps/admin-x-settings/src/admin-x-ds/global/List.tsx rename to apps/admin-x-design/src/global/List.tsx index a2e43abcd5..bbbb41dffa 100644 --- a/apps/admin-x-settings/src/admin-x-ds/global/List.tsx +++ b/apps/admin-x-design/src/global/List.tsx @@ -1,11 +1,11 @@ +import clsx from 'clsx'; +import React from 'react'; import Heading from './Heading'; import Hint from './Hint'; import ListHeading, {ListHeadingSize} from './ListHeading'; -import React from 'react'; import Separator from './Separator'; -import clsx from 'clsx'; -interface ListProps { +export interface ListProps { /** * If the list is the primary content on a page (e.g. Members list) then you can set a pagetitle to be consistent */ @@ -62,4 +62,4 @@ const List: React.FC = ({ ); }; -export default List; \ No newline at end of file +export default List; diff --git a/apps/admin-x-settings/src/admin-x-ds/global/ListHeading.tsx b/apps/admin-x-design/src/global/ListHeading.tsx similarity index 94% rename from apps/admin-x-settings/src/admin-x-ds/global/ListHeading.tsx rename to apps/admin-x-design/src/global/ListHeading.tsx index bf82d757db..50e6009590 100644 --- a/apps/admin-x-settings/src/admin-x-ds/global/ListHeading.tsx +++ b/apps/admin-x-design/src/global/ListHeading.tsx @@ -1,10 +1,10 @@ -import Heading from './Heading'; import React from 'react'; +import Heading from './Heading'; import Separator from './Separator'; export type ListHeadingSize = 'sm' | 'lg'; -interface ListHeadingProps { +export interface ListHeadingProps { title?: React.ReactNode; titleSize?: ListHeadingSize, actions?: React.ReactNode; @@ -44,4 +44,4 @@ const ListHeading: React.FC = ({ return <>; }; -export default ListHeading; \ No newline at end of file +export default ListHeading; diff --git a/apps/admin-x-settings/src/admin-x-ds/global/ListItem.stories.tsx b/apps/admin-x-design/src/global/ListItem.stories.tsx similarity index 100% rename from apps/admin-x-settings/src/admin-x-ds/global/ListItem.stories.tsx rename to apps/admin-x-design/src/global/ListItem.stories.tsx diff --git a/apps/admin-x-settings/src/admin-x-ds/global/ListItem.tsx b/apps/admin-x-design/src/global/ListItem.tsx similarity index 98% rename from apps/admin-x-settings/src/admin-x-ds/global/ListItem.tsx rename to apps/admin-x-design/src/global/ListItem.tsx index 8c1b0fffda..ca2b616ad6 100644 --- a/apps/admin-x-settings/src/admin-x-ds/global/ListItem.tsx +++ b/apps/admin-x-design/src/global/ListItem.tsx @@ -1,7 +1,7 @@ -import React from 'react'; import clsx from 'clsx'; +import React from 'react'; -interface ListItemProps { +export interface ListItemProps { id?: string; title?: React.ReactNode; detail?: React.ReactNode; diff --git a/apps/admin-x-settings/src/admin-x-ds/global/LoadingIndicator.stories.tsx b/apps/admin-x-design/src/global/LoadingIndicator.stories.tsx similarity index 100% rename from apps/admin-x-settings/src/admin-x-ds/global/LoadingIndicator.stories.tsx rename to apps/admin-x-design/src/global/LoadingIndicator.stories.tsx diff --git a/apps/admin-x-settings/src/admin-x-ds/global/LoadingIndicator.tsx b/apps/admin-x-design/src/global/LoadingIndicator.tsx similarity index 97% rename from apps/admin-x-settings/src/admin-x-ds/global/LoadingIndicator.tsx rename to apps/admin-x-design/src/global/LoadingIndicator.tsx index 1b77113acc..4f5f40fb75 100644 --- a/apps/admin-x-settings/src/admin-x-ds/global/LoadingIndicator.tsx +++ b/apps/admin-x-design/src/global/LoadingIndicator.tsx @@ -3,7 +3,7 @@ import React from 'react'; export type LoadingIndicatorSize = 'sm' | 'md' | 'lg'; export type LoadingIndicatorColor = 'light' | 'dark'; -type LoadingIndicatorProps = { +export interface LoadingIndicatorProps { size?: LoadingIndicatorSize; color?: LoadingIndicatorColor; delay?: number; @@ -60,4 +60,4 @@ export const LoadingIndicator: React.FC = ({size, color,
); } -}; \ No newline at end of file +}; diff --git a/apps/admin-x-settings/src/admin-x-ds/global/Menu.stories.tsx b/apps/admin-x-design/src/global/Menu.stories.tsx similarity index 100% rename from apps/admin-x-settings/src/admin-x-ds/global/Menu.stories.tsx rename to apps/admin-x-design/src/global/Menu.stories.tsx diff --git a/apps/admin-x-settings/src/admin-x-ds/global/Menu.tsx b/apps/admin-x-design/src/global/Menu.tsx similarity index 97% rename from apps/admin-x-settings/src/admin-x-ds/global/Menu.tsx rename to apps/admin-x-design/src/global/Menu.tsx index 042f51d479..480604eacc 100644 --- a/apps/admin-x-settings/src/admin-x-ds/global/Menu.tsx +++ b/apps/admin-x-design/src/global/Menu.tsx @@ -1,6 +1,6 @@ +import React from 'react'; import Button, {ButtonProps, ButtonSize} from './Button'; import Popover, {PopoverPosition} from './Popover'; -import React from 'react'; export type MenuItem = { id: string, @@ -8,7 +8,7 @@ export type MenuItem = { onClick?: () => void } -interface MenuProps { +export interface MenuProps { trigger?: React.ReactNode; triggerButtonProps?: ButtonProps; triggerSize?: ButtonSize; diff --git a/apps/admin-x-settings/src/admin-x-ds/global/NoValueLabel.stories.tsx b/apps/admin-x-design/src/global/NoValueLabel.stories.tsx similarity index 100% rename from apps/admin-x-settings/src/admin-x-ds/global/NoValueLabel.stories.tsx rename to apps/admin-x-design/src/global/NoValueLabel.stories.tsx diff --git a/apps/admin-x-settings/src/admin-x-ds/global/NoValueLabel.tsx b/apps/admin-x-design/src/global/NoValueLabel.tsx similarity index 88% rename from apps/admin-x-settings/src/admin-x-ds/global/NoValueLabel.tsx rename to apps/admin-x-design/src/global/NoValueLabel.tsx index 7b02360fe0..1a980acc14 100644 --- a/apps/admin-x-settings/src/admin-x-ds/global/NoValueLabel.tsx +++ b/apps/admin-x-design/src/global/NoValueLabel.tsx @@ -1,7 +1,7 @@ -import Icon from './Icon'; import React from 'react'; +import Icon from './Icon'; -interface NoValueLabelProps { +export interface NoValueLabelProps { icon?: string; children: React.ReactNode; } @@ -18,4 +18,4 @@ const NoValueLabel: React.FC = ({icon, children}) => { ); }; -export default NoValueLabel; \ No newline at end of file +export default NoValueLabel; diff --git a/apps/admin-x-settings/src/admin-x-ds/global/Pagination.stories.tsx b/apps/admin-x-design/src/global/Pagination.stories.tsx similarity index 100% rename from apps/admin-x-settings/src/admin-x-ds/global/Pagination.stories.tsx rename to apps/admin-x-design/src/global/Pagination.stories.tsx diff --git a/apps/admin-x-settings/src/admin-x-ds/global/Pagination.tsx b/apps/admin-x-design/src/global/Pagination.tsx similarity index 94% rename from apps/admin-x-settings/src/admin-x-ds/global/Pagination.tsx rename to apps/admin-x-design/src/global/Pagination.tsx index 6f2f6283f5..d994234d88 100644 --- a/apps/admin-x-settings/src/admin-x-ds/global/Pagination.tsx +++ b/apps/admin-x-design/src/global/Pagination.tsx @@ -1,8 +1,8 @@ -import Icon from './Icon'; import React from 'react'; -import {PaginationData} from '../../hooks/usePagination'; +import {PaginationData} from '../hooks/usePagination'; +import Icon from './Icon'; -type PaginationProps = PaginationData +export type PaginationProps = PaginationData const Pagination: React.FC = ({page, limit, total, prevPage, nextPage}) => { // Detect loading state diff --git a/apps/admin-x-settings/src/admin-x-ds/global/Popover.stories.tsx b/apps/admin-x-design/src/global/Popover.stories.tsx similarity index 100% rename from apps/admin-x-settings/src/admin-x-ds/global/Popover.stories.tsx rename to apps/admin-x-design/src/global/Popover.stories.tsx diff --git a/apps/admin-x-settings/src/admin-x-ds/global/Popover.tsx b/apps/admin-x-design/src/global/Popover.tsx similarity index 85% rename from apps/admin-x-settings/src/admin-x-ds/global/Popover.tsx rename to apps/admin-x-design/src/global/Popover.tsx index f84cb6dca1..01b25a2d3c 100644 --- a/apps/admin-x-settings/src/admin-x-ds/global/Popover.tsx +++ b/apps/admin-x-design/src/global/Popover.tsx @@ -1,10 +1,10 @@ -import React, {useRef, useState} from 'react'; import clsx from 'clsx'; +import React, {useRef, useState} from 'react'; import {createPortal} from 'react-dom'; export type PopoverPosition = 'left' | 'right'; -interface PopoverProps { +export interface PopoverProps { trigger: React.ReactNode; children: React.ReactNode; position?: PopoverPosition; @@ -32,14 +32,14 @@ const Popover: React.FC = ({ const handleTriggerClick = () => { if (!open && triggerRef.current) { const parentRect = getOffsetPosition(triggerRef.current); - let {x, y, width, height} = triggerRef.current.getBoundingClientRect(); - x -= parentRect.x; - y -= parentRect.y; + const {x, y, width, height} = triggerRef.current.getBoundingClientRect(); + const relativeX = x - parentRect.x; + const relativeY = y - parentRect.y; - const finalX = (position === 'left') ? x : window.innerWidth - (x + width); + const finalX = (position === 'left') ? relativeX : window.innerWidth - (relativeX + width); setOpen(true); setPositionX(finalX); - setPositionY(y + height); + setPositionY(relativeY + height); } else { setOpen(false); } @@ -89,7 +89,7 @@ const Popover: React.FC = ({
{children}
-
, triggerRef.current?.closest('.admin-x-settings') || document.body)} + , triggerRef.current?.closest('.admin-x-base') || document.body)} ); }; diff --git a/apps/admin-x-settings/src/admin-x-ds/global/Separator.stories.tsx b/apps/admin-x-design/src/global/Separator.stories.tsx similarity index 100% rename from apps/admin-x-settings/src/admin-x-ds/global/Separator.stories.tsx rename to apps/admin-x-design/src/global/Separator.stories.tsx diff --git a/apps/admin-x-settings/src/admin-x-ds/global/Separator.tsx b/apps/admin-x-design/src/global/Separator.tsx similarity index 80% rename from apps/admin-x-settings/src/admin-x-ds/global/Separator.tsx rename to apps/admin-x-design/src/global/Separator.tsx index 5df81e57e1..2f1b9c1847 100644 --- a/apps/admin-x-settings/src/admin-x-ds/global/Separator.tsx +++ b/apps/admin-x-design/src/global/Separator.tsx @@ -1,6 +1,6 @@ import React from 'react'; -interface SeparatorProps { +export interface SeparatorProps { className?: string; } @@ -11,4 +11,4 @@ const Separator: React.FC = ({className}) => { return
; }; -export default Separator; \ No newline at end of file +export default Separator; diff --git a/apps/admin-x-settings/src/admin-x-ds/global/SortableList.stories.tsx b/apps/admin-x-design/src/global/SortableList.stories.tsx similarity index 100% rename from apps/admin-x-settings/src/admin-x-ds/global/SortableList.stories.tsx rename to apps/admin-x-design/src/global/SortableList.stories.tsx diff --git a/apps/admin-x-settings/src/admin-x-ds/global/SortableList.tsx b/apps/admin-x-design/src/global/SortableList.tsx similarity index 100% rename from apps/admin-x-settings/src/admin-x-ds/global/SortableList.tsx rename to apps/admin-x-design/src/global/SortableList.tsx diff --git a/apps/admin-x-settings/src/admin-x-ds/global/StickyFooter.stories.tsx b/apps/admin-x-design/src/global/StickyFooter.stories.tsx similarity index 100% rename from apps/admin-x-settings/src/admin-x-ds/global/StickyFooter.stories.tsx rename to apps/admin-x-design/src/global/StickyFooter.stories.tsx diff --git a/apps/admin-x-settings/src/admin-x-ds/global/StickyFooter.tsx b/apps/admin-x-design/src/global/StickyFooter.tsx similarity index 96% rename from apps/admin-x-settings/src/admin-x-ds/global/StickyFooter.tsx rename to apps/admin-x-design/src/global/StickyFooter.tsx index ff951baf1e..9271689d40 100644 --- a/apps/admin-x-settings/src/admin-x-ds/global/StickyFooter.tsx +++ b/apps/admin-x-design/src/global/StickyFooter.tsx @@ -1,7 +1,7 @@ -import React from 'react'; import clsx from 'clsx'; +import React from 'react'; -interface StickyFooterProps { +export interface StickyFooterProps { shiftY?: string; footerBgColorClass?: string; contentBgColorClass?: string; @@ -68,4 +68,4 @@ const StickyFooter: React.FC = ({ ); }; -export default StickyFooter; \ No newline at end of file +export default StickyFooter; diff --git a/apps/admin-x-settings/src/admin-x-ds/global/TabView.stories.tsx b/apps/admin-x-design/src/global/TabView.stories.tsx similarity index 100% rename from apps/admin-x-settings/src/admin-x-ds/global/TabView.stories.tsx rename to apps/admin-x-design/src/global/TabView.stories.tsx diff --git a/apps/admin-x-settings/src/admin-x-ds/global/TabView.tsx b/apps/admin-x-design/src/global/TabView.tsx similarity index 98% rename from apps/admin-x-settings/src/admin-x-ds/global/TabView.tsx rename to apps/admin-x-design/src/global/TabView.tsx index aa959ce572..ca8fd8361e 100644 --- a/apps/admin-x-settings/src/admin-x-ds/global/TabView.tsx +++ b/apps/admin-x-design/src/global/TabView.tsx @@ -1,5 +1,5 @@ -import React from 'react'; import clsx from 'clsx'; +import React from 'react'; export type Tab = { id: ID; @@ -12,7 +12,7 @@ export type Tab = { contents?: React.ReactNode; } -interface TabViewProps { +export interface TabViewProps { tabs: readonly Tab[]; onTabChange: (id: ID) => void; selectedTab?: ID; diff --git a/apps/admin-x-settings/src/admin-x-ds/global/Table.stories.tsx b/apps/admin-x-design/src/global/Table.stories.tsx similarity index 100% rename from apps/admin-x-settings/src/admin-x-ds/global/Table.stories.tsx rename to apps/admin-x-design/src/global/Table.stories.tsx diff --git a/apps/admin-x-settings/src/admin-x-ds/global/Table.tsx b/apps/admin-x-design/src/global/Table.tsx similarity index 98% rename from apps/admin-x-settings/src/admin-x-ds/global/Table.tsx rename to apps/admin-x-design/src/global/Table.tsx index 68db36fa23..e7d21055b2 100644 --- a/apps/admin-x-settings/src/admin-x-ds/global/Table.tsx +++ b/apps/admin-x-design/src/global/Table.tsx @@ -1,19 +1,19 @@ +import clsx from 'clsx'; +import React from 'react'; +import {PaginationData} from '../hooks/usePagination'; import Heading from './Heading'; import Hint from './Hint'; +import {LoadingIndicator} from './LoadingIndicator'; import Pagination from './Pagination'; -import React from 'react'; import Separator from './Separator'; import TableRow from './TableRow'; -import clsx from 'clsx'; -import {LoadingIndicator} from './LoadingIndicator'; -import {PaginationData} from '../../hooks/usePagination'; export interface ShowMoreData { hasMore: boolean; loadMore: () => void; } -interface TableProps { +export interface TableProps { /** * If the table is the primary content on a page (e.g. Members table) then you can set a pagetitle to be consistent */ diff --git a/apps/admin-x-settings/src/admin-x-ds/global/TableCell.tsx b/apps/admin-x-design/src/global/TableCell.tsx similarity index 87% rename from apps/admin-x-settings/src/admin-x-ds/global/TableCell.tsx rename to apps/admin-x-design/src/global/TableCell.tsx index 0e284261ba..fe6e3bdcd2 100644 --- a/apps/admin-x-settings/src/admin-x-ds/global/TableCell.tsx +++ b/apps/admin-x-design/src/global/TableCell.tsx @@ -1,7 +1,7 @@ -import React, {HTMLProps} from 'react'; import clsx from 'clsx'; +import React, {HTMLProps} from 'react'; -interface TableCellProps extends HTMLProps { +export interface TableCellProps extends HTMLProps { padding?: boolean; } diff --git a/apps/admin-x-settings/src/admin-x-ds/global/TableHead.tsx b/apps/admin-x-design/src/global/TableHead.tsx similarity index 71% rename from apps/admin-x-settings/src/admin-x-ds/global/TableHead.tsx rename to apps/admin-x-design/src/global/TableHead.tsx index 78a6c0e092..248cb7b625 100644 --- a/apps/admin-x-settings/src/admin-x-ds/global/TableHead.tsx +++ b/apps/admin-x-design/src/global/TableHead.tsx @@ -1,8 +1,10 @@ -import Heading from './Heading'; -import React, {HTMLProps} from 'react'; import clsx from 'clsx'; +import React, {HTMLProps} from 'react'; +import Heading from './Heading'; -const TableHead: React.FC> = ({className, children, colSpan, ...props}) => { +export type TableHeadProps = HTMLProps + +const TableHead: React.FC = ({className, children, colSpan, ...props}) => { const tableCellClasses = clsx( '!py-2 !pl-0 !pr-6 text-left align-top', props.onClick && 'hover:cursor-pointer', @@ -16,4 +18,4 @@ const TableHead: React.FC> = ({className, childr ); }; -export default TableHead; \ No newline at end of file +export default TableHead; diff --git a/apps/admin-x-settings/src/admin-x-ds/global/TableRow.stories.tsx b/apps/admin-x-design/src/global/TableRow.stories.tsx similarity index 100% rename from apps/admin-x-settings/src/admin-x-ds/global/TableRow.stories.tsx rename to apps/admin-x-design/src/global/TableRow.stories.tsx diff --git a/apps/admin-x-settings/src/admin-x-ds/global/TableRow.tsx b/apps/admin-x-design/src/global/TableRow.tsx similarity index 98% rename from apps/admin-x-settings/src/admin-x-ds/global/TableRow.tsx rename to apps/admin-x-design/src/global/TableRow.tsx index bf7567ea64..d7831f3455 100644 --- a/apps/admin-x-settings/src/admin-x-ds/global/TableRow.tsx +++ b/apps/admin-x-design/src/global/TableRow.tsx @@ -1,7 +1,7 @@ -import React from 'react'; import clsx from 'clsx'; +import React from 'react'; -interface TableRowProps { +export interface TableRowProps { id?: string; action?: React.ReactNode; hideActions?: boolean; diff --git a/apps/admin-x-settings/src/admin-x-ds/global/Toast.stories.tsx b/apps/admin-x-design/src/global/Toast.stories.tsx similarity index 83% rename from apps/admin-x-settings/src/admin-x-ds/global/Toast.stories.tsx rename to apps/admin-x-design/src/global/Toast.stories.tsx index f806ef499c..6609b6c0b9 100644 --- a/apps/admin-x-settings/src/admin-x-ds/global/Toast.stories.tsx +++ b/apps/admin-x-design/src/global/Toast.stories.tsx @@ -1,8 +1,19 @@ -import {ReactNode} from 'react'; import type {Meta, StoryObj} from '@storybook/react'; +import {ReactNode} from 'react'; -import ToastContainer from './ToastContainer'; import {Toaster} from 'react-hot-toast'; +import Button from './Button'; +import {ShowToastProps, showToast} from './Toast'; + +const ToastContainer: React.FC = ({...props}) => { + return ( + <> + - ); -}; diff --git a/apps/admin-x-settings/src/admin-x-ds/experimental/Header.stories.ts b/apps/admin-x-settings/src/admin-x-ds/experimental/Header.stories.ts deleted file mode 100644 index 26f70b8aea..0000000000 --- a/apps/admin-x-settings/src/admin-x-ds/experimental/Header.stories.ts +++ /dev/null @@ -1,26 +0,0 @@ -import {Header} from './Header'; -import type {Meta, StoryObj} from '@storybook/react'; - -const meta = { - title: 'Experimental / Header', - component: Header, - // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/react/writing-docs/autodocs - tags: ['autodocs'], - parameters: { - // More on how to position stories at: https://storybook.js.org/docs/react/configure/story-layout - layout: 'fullscreen' - } -} satisfies Meta; - -export default meta; -type Story = StoryObj; - -export const LoggedIn: Story = { - args: { - user: { - name: 'Jane Doe' - } - } -}; - -export const LoggedOut: Story = {}; diff --git a/apps/admin-x-settings/src/admin-x-ds/experimental/Header.tsx b/apps/admin-x-settings/src/admin-x-ds/experimental/Header.tsx deleted file mode 100644 index b55ae7c02d..0000000000 --- a/apps/admin-x-settings/src/admin-x-ds/experimental/Header.tsx +++ /dev/null @@ -1,54 +0,0 @@ -import './header.css'; -import {ExampleButton} from './ExampleButton'; - -type User = { - name: string; -}; - -interface HeaderProps { - user?: User; - onLogin: () => void; - onLogout: () => void; - onCreateAccount: () => void; -} - -export const Header = ({user, onLogin, onLogout, onCreateAccount}: HeaderProps) => ( -
-
-
- - - - - - - -

Acme

-
-
- {user ? ( - <> - - Welcome, {user.name}! - - - - ) : ( - <> - - - - )} -
-
-
-); diff --git a/apps/admin-x-settings/src/admin-x-ds/experimental/Page.stories.ts b/apps/admin-x-settings/src/admin-x-ds/experimental/Page.stories.ts deleted file mode 100644 index 0da0255189..0000000000 --- a/apps/admin-x-settings/src/admin-x-ds/experimental/Page.stories.ts +++ /dev/null @@ -1,29 +0,0 @@ -import {userEvent, within} from '@storybook/testing-library'; -import type {Meta, StoryObj} from '@storybook/react'; - -import {Page} from './Page'; - -const meta = { - title: 'Experimental / Page', - component: Page, - parameters: { - // More on how to position stories at: https://storybook.js.org/docs/react/configure/story-layout - layout: 'fullscreen' - } -} satisfies Meta; - -export default meta; -type Story = StoryObj; - -export const LoggedOut: Story = {}; - -// More on interaction testing: https://storybook.js.org/docs/react/writing-tests/interaction-testing -export const LoggedIn: Story = { - play: async ({canvasElement}) => { - const canvas = within(canvasElement); - const loginButton = await canvas.getByRole('button', { - name: /Log in/i - }); - await userEvent.click(loginButton); - } -}; diff --git a/apps/admin-x-settings/src/admin-x-ds/experimental/Page.tsx b/apps/admin-x-settings/src/admin-x-ds/experimental/Page.tsx deleted file mode 100644 index b31ddf2ec2..0000000000 --- a/apps/admin-x-settings/src/admin-x-ds/experimental/Page.tsx +++ /dev/null @@ -1,73 +0,0 @@ -import React from 'react'; - -import './page.css'; -import {Header} from './Header'; - -type User = { - name: string; -}; - -export const Page: React.FC = () => { - const [user, setUser] = React.useState(); - - return ( -
-
setUser({name: 'Jane Doe'})} - onLogin={() => setUser({name: 'Jane Doe'})} - onLogout={() => setUser(undefined)} - /> - -
-

Pages in Storybook

-

- We recommend building UIs with a{' '} - - component-driven - {' '} - process starting with atomic components and ending with pages. -

-

- Render pages with mock data. This makes it easy to build and review page states without - needing to navigate to them in your app. Here are some handy patterns for managing page - data in Storybook: -

-
    -
  • - Use a higher-level connected component. Storybook helps you compose such data from the - "args" of child component stories -
    • -
  • - Assemble data in the page component from your services. You can mock these services out - using Storybook. -
    • -
-

- Get a guided tutorial on component-driven development at{' '} - - Storybook tutorials - - . Read more in the{' '} - - docs - - . -

-
- Tip Adjust the width of the canvas with the{' '} - - - - - - Viewports addon in the toolbar -
-
-
- ); -}; diff --git a/apps/admin-x-settings/src/admin-x-ds/experimental/Task.stories.tsx b/apps/admin-x-settings/src/admin-x-ds/experimental/Task.stories.tsx deleted file mode 100644 index 3ad8e8ca45..0000000000 --- a/apps/admin-x-settings/src/admin-x-ds/experimental/Task.stories.tsx +++ /dev/null @@ -1,37 +0,0 @@ -import Task from './Task'; - -const story = { - component: Task, - title: 'Experimental / Task', - tags: ['autodocs'] -}; - -export default story; - -export const Default = { - args: { - task: { - id: '1', - title: 'Test task', - state: 'TASK_INBOX' - } - } -}; - -export const Pinned = { - args: { - task: { - ...Default.args.task, - state: 'TASK_PINNED' - } - } -}; - -export const Archived = { - args: { - task: { - ...Default.args.task, - state: 'TASK_ARCHIVED' - } - } -}; \ No newline at end of file diff --git a/apps/admin-x-settings/src/admin-x-ds/experimental/Task.tsx b/apps/admin-x-settings/src/admin-x-ds/experimental/Task.tsx deleted file mode 100644 index 9960ad4aa1..0000000000 --- a/apps/admin-x-settings/src/admin-x-ds/experimental/Task.tsx +++ /dev/null @@ -1,64 +0,0 @@ -import React from 'react'; - -interface Props { - task: { - id: string, - title: string, - state: string, - } - onArchiveTask: (id: string) => void, - onPinTask: (id: string) => void, -} - -const Task: React.FC = ({task: {id, title, state}, onArchiveTask, onPinTask}) => { - return ( -
- - - - - {state !== 'TASK_ARCHIVED' && ( - - )} -
- ); -}; - -export default Task; \ No newline at end of file diff --git a/apps/admin-x-settings/src/admin-x-ds/experimental/Tasklist.stories.tsx b/apps/admin-x-settings/src/admin-x-ds/experimental/Tasklist.stories.tsx deleted file mode 100644 index e07cb3ed48..0000000000 --- a/apps/admin-x-settings/src/admin-x-ds/experimental/Tasklist.stories.tsx +++ /dev/null @@ -1,47 +0,0 @@ -import TaskList from './Tasklist'; -import {ReactNode} from 'react'; - -import * as TaskStories from './Task.stories'; - -const story = { - component: TaskList, - title: 'Experimental / Task List', - decorators: [(_story: () => ReactNode) =>
{_story()}
], - tags: ['autodocs'] -}; - -export default story; - -export const Default = { - args: { - tasks: [ - {...TaskStories.Default.args.task, id: '1', title: 'Task 1'}, - {...TaskStories.Default.args.task, id: '2', title: 'Task 2'}, - {...TaskStories.Default.args.task, id: '3', title: 'Task 3'}, - {...TaskStories.Default.args.task, id: '4', title: 'Task 4'} - ] - } -}; - -export const WithPinnedTasks = { - args: { - tasks: [ - ...Default.args.tasks.slice(0, 3), - {id: '6', title: 'Task 6 (pinned)', state: 'TASK_PINNED'} - ] - } -}; - -export const Loading = { - args: { - tasks: [], - loading: true - } -}; - -export const Empty = { - args: { - ...Loading.args, - loading: false - } -}; diff --git a/apps/admin-x-settings/src/admin-x-ds/experimental/Tasklist.tsx b/apps/admin-x-settings/src/admin-x-ds/experimental/Tasklist.tsx deleted file mode 100644 index 3bbae3876a..0000000000 --- a/apps/admin-x-settings/src/admin-x-ds/experimental/Tasklist.tsx +++ /dev/null @@ -1,38 +0,0 @@ -import React from 'react'; -import Task from './Task'; - -interface Props { - loading: boolean, - tasks: Array<{ - id: string, - title: string, - state: string, - }>, - onArchiveTask: (id: string) => void, - onPinTask: (id: string) => void, -} - -const TaskList: React.FC = ({loading, tasks, onPinTask, onArchiveTask}) => { - const events = { - onPinTask, - onArchiveTask - }; - - if (loading) { - return
Loading
; - } - - if (tasks.length === 0) { - return
empty
; - } - - return ( -
- {tasks.map(task => ( - - ))} -
- ); -}; - -export default TaskList; \ No newline at end of file diff --git a/apps/admin-x-settings/src/admin-x-ds/experimental/assets/code-brackets.svg b/apps/admin-x-settings/src/admin-x-ds/experimental/assets/code-brackets.svg deleted file mode 100644 index 73de947760..0000000000 --- a/apps/admin-x-settings/src/admin-x-ds/experimental/assets/code-brackets.svg +++ /dev/null @@ -1 +0,0 @@ -illustration/code-brackets \ No newline at end of file diff --git a/apps/admin-x-settings/src/admin-x-ds/experimental/assets/colors.svg b/apps/admin-x-settings/src/admin-x-ds/experimental/assets/colors.svg deleted file mode 100644 index 17d58d516e..0000000000 --- a/apps/admin-x-settings/src/admin-x-ds/experimental/assets/colors.svg +++ /dev/null @@ -1 +0,0 @@ -illustration/colors \ No newline at end of file diff --git a/apps/admin-x-settings/src/admin-x-ds/experimental/assets/comments.svg b/apps/admin-x-settings/src/admin-x-ds/experimental/assets/comments.svg deleted file mode 100644 index 6493a139f5..0000000000 --- a/apps/admin-x-settings/src/admin-x-ds/experimental/assets/comments.svg +++ /dev/null @@ -1 +0,0 @@ -illustration/comments \ No newline at end of file diff --git a/apps/admin-x-settings/src/admin-x-ds/experimental/assets/direction.svg b/apps/admin-x-settings/src/admin-x-ds/experimental/assets/direction.svg deleted file mode 100644 index 65676ac272..0000000000 --- a/apps/admin-x-settings/src/admin-x-ds/experimental/assets/direction.svg +++ /dev/null @@ -1 +0,0 @@ -illustration/direction \ No newline at end of file diff --git a/apps/admin-x-settings/src/admin-x-ds/experimental/assets/flow.svg b/apps/admin-x-settings/src/admin-x-ds/experimental/assets/flow.svg deleted file mode 100644 index 8ac27db403..0000000000 --- a/apps/admin-x-settings/src/admin-x-ds/experimental/assets/flow.svg +++ /dev/null @@ -1 +0,0 @@ -illustration/flow \ No newline at end of file diff --git a/apps/admin-x-settings/src/admin-x-ds/experimental/assets/plugin.svg b/apps/admin-x-settings/src/admin-x-ds/experimental/assets/plugin.svg deleted file mode 100644 index 29e5c690c0..0000000000 --- a/apps/admin-x-settings/src/admin-x-ds/experimental/assets/plugin.svg +++ /dev/null @@ -1 +0,0 @@ -illustration/plugin \ No newline at end of file diff --git a/apps/admin-x-settings/src/admin-x-ds/experimental/assets/repo.svg b/apps/admin-x-settings/src/admin-x-ds/experimental/assets/repo.svg deleted file mode 100644 index f386ee902c..0000000000 --- a/apps/admin-x-settings/src/admin-x-ds/experimental/assets/repo.svg +++ /dev/null @@ -1 +0,0 @@ -illustration/repo \ No newline at end of file diff --git a/apps/admin-x-settings/src/admin-x-ds/experimental/assets/stackalt.svg b/apps/admin-x-settings/src/admin-x-ds/experimental/assets/stackalt.svg deleted file mode 100644 index 9b7ad27435..0000000000 --- a/apps/admin-x-settings/src/admin-x-ds/experimental/assets/stackalt.svg +++ /dev/null @@ -1 +0,0 @@ -illustration/stackalt \ No newline at end of file diff --git a/apps/admin-x-settings/src/admin-x-ds/experimental/button.css b/apps/admin-x-settings/src/admin-x-ds/experimental/button.css deleted file mode 100644 index dc91dc7637..0000000000 --- a/apps/admin-x-settings/src/admin-x-ds/experimental/button.css +++ /dev/null @@ -1,30 +0,0 @@ -.storybook-button { - font-family: 'Nunito Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif; - font-weight: 700; - border: 0; - border-radius: 3em; - cursor: pointer; - display: inline-block; - line-height: 1; -} -.storybook-button--primary { - color: white; - background-color: #1ea7fd; -} -.storybook-button--secondary { - color: #333; - background-color: transparent; - box-shadow: rgba(0, 0, 0, 0.15) 0px 0px 0px 1px inset; -} -.storybook-button--small { - font-size: 12px; - padding: 10px 16px; -} -.storybook-button--medium { - font-size: 14px; - padding: 11px 20px; -} -.storybook-button--large { - font-size: 16px; - padding: 12px 24px; -} diff --git a/apps/admin-x-settings/src/admin-x-ds/experimental/header.css b/apps/admin-x-settings/src/admin-x-ds/experimental/header.css deleted file mode 100644 index 9fb414e504..0000000000 --- a/apps/admin-x-settings/src/admin-x-ds/experimental/header.css +++ /dev/null @@ -1,14 +0,0 @@ -.storybook-wrapper { - font-family: 'Nunito Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif; - border-bottom: 1px solid rgba(0, 0, 0, 0.1); - padding: 15px 20px; - display: flex; - align-items: center; - justify-content: space-between; -} - -.storybook-welcome { - color: #333; - font-size: 14px; - margin-right: 10px; -} diff --git a/apps/admin-x-settings/src/admin-x-ds/experimental/page.css b/apps/admin-x-settings/src/admin-x-ds/experimental/page.css deleted file mode 100644 index fb64fe4629..0000000000 --- a/apps/admin-x-settings/src/admin-x-ds/experimental/page.css +++ /dev/null @@ -1,69 +0,0 @@ -section { - font-family: 'Nunito Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif; - font-size: 14px; - line-height: 24px; - padding: 48px 20px; - margin: 0 auto; - max-width: 600px; - color: #333; -} - -section h2 { - font-weight: 700; - font-size: 32px; - line-height: 1; - margin: 0 0 4px; - display: inline-block; - vertical-align: top; -} - -section p { - margin: 1em 0; -} - -section a { - text-decoration: none; - color: #1ea7fd; -} - -section ul { - padding-left: 30px; - margin: 1em 0; -} - -section li { - margin-bottom: 8px; -} - -section .tip { - display: inline-block; - border-radius: 1em; - font-size: 11px; - line-height: 12px; - font-weight: 700; - background: #e7fdd8; - color: #66bf3c; - padding: 4px 12px; - margin-right: 10px; - vertical-align: top; -} - -section .tip-wrapper { - font-size: 13px; - line-height: 20px; - margin-top: 40px; - margin-bottom: 40px; -} - -section .tip-wrapper svg { - display: inline-block; - height: 12px; - width: 12px; - margin-right: 4px; - vertical-align: top; - margin-top: 3px; -} - -section .tip-wrapper svg path { - fill: #1ea7fd; -} diff --git a/apps/admin-x-settings/src/admin-x-ds/global/ToastContainer.tsx b/apps/admin-x-settings/src/admin-x-ds/global/ToastContainer.tsx deleted file mode 100644 index 36166a8a8c..0000000000 --- a/apps/admin-x-settings/src/admin-x-ds/global/ToastContainer.tsx +++ /dev/null @@ -1,15 +0,0 @@ -import Button from './Button'; -import React from 'react'; -import {ShowToastProps, showToast} from './Toast'; - -const ToastContainer: React.FC = ({...props}) => { - return ( - <> -