From cd4304f01679a57c37c61ffde6a4ea781affd473 Mon Sep 17 00:00:00 2001 From: Iveta Date: Mon, 23 Oct 2023 13:03:02 -0400 Subject: [PATCH] New SDS website built with Docusaurus (#158) * Updated gitignore * Website Docusaurus config (#157) * Node v18 + update eslint * Update prettier + tsconfig * Minor dep updates * Some major dep updates * More major dep updates * Fix eslint import errors in SDS web * Upgrade React 17 to 18 * Update GH action to use Node v18 * Updated colors * SDS v2: typography (#125) * Updated typography + pxToRem function * Fix asset path when refreshing sub-pages * Remove Link + Code from Typography + add descriptions * Temp file to trigger PR preview * Replace IBM Plex Sans font (#126) * Replace icons + optimize logos (#127) * ThemeSwitch component (#128) * Replace icons + optimize logos * New theme switch + SVG cleanup * Cleanup * Updated Button component (#131) * Updated Button component * Update colors, border radius, padding * Updated Input component (#132) * Input update in progress * Updated Input component * Updated Link component (#133) * Updated Icon component * Use left arrow on the left side * Update Notification component (#134) * Update Notification component * Update icon size * SDS version 1.0.0-beta.0 * Update logos SVGs + cleanup * SDS version 1.0.0-beta.1 * Updated Card, Input, and Button components + small tweaks (#135) * Card component + small tweaks * Button: add isPill prop * Input: add isPill prop * Button: add isExtraPadding prop * Badge component (#137) * Updated Checkbox and RadioButton components (#136) * Updated Checkbox * Update RadioButton * Checkbox fieldSize prop * RadioButton fieldSize prop * Updated Select component (#138) * Updated Textarea component (#139) * Updated Textarea component * Cleanup * Minor global CSS updates * SDS version 1.0.0-beta.2 * Banner component (#140) * Rename StatusBar to Banner * Fix typo * Banner component * Various small tweaks (#141) * Checkbox without label * Make Button label optional * Add error without message prop to form components * SDS version 1.0.0-beta.3 * Updated Tooltip + some tweaks (#142) * Updated Badge * Floater component + updated Tooltip and CopyText * Updated Avatar + small tweaks (#143) * Extra padding for form inputs * Avatar + AssetIcon components * Profile component * Profile copy address * SDS version 1.0.0-beta.4 * Floater fix + SDS version 1.0.0-beta.5 * Another floater fix + SDS version 1.0.0-beta.6 * Serve stellar-identicon-js locally (#144) * Floater and tooltip color update and small fix (#145) * SDS version 1.0.0-beta.7 * Optional title for ProjectLogo and Layout.Header (#147) * allows for optional title in ProjectLogo and Layout.Header * turns boolean expression to ternary for optional title and updates props on website details * SDS version 1.0.0-beta.8 * SDS version 1.0.0-beta.9 * rename classNames prop to addlClassName (#148) * rename classNames prop to addlClasses * renames addlClasses to addlClassName * bumps version tag for sds * picks out addlClassName from props before spreading onto dom nodes (#149) * picks out addlClassName from props before spreading onto dom nodes * updates website props for typography components * SDS version 1.0.0-beta.11 * Button: update tertiary colors (#150) * Toggle updated + small tweaks (#151) * Button: destructive/error/success variants (#152) * Button: destructive/error/success variants * Update Button gap * Updated Card component * Updated Modal component (#153) * SDS version 1.0.0-beta.12 * Add new icons (#154) * SDS version 1.0.0-beta.13 * Input password preset (#155) * Remove icon added (#156) * SDS version 1.0.0-beta.14 * Basic Docusaurus setup * Basic SDS example * Make docs initial page * Fix broken link * Temp rename * Enable Docusaurus website --------- Co-authored-by: aristides Co-authored-by: Aristides Staffieri * Quick example creating docs with TypeDoc (#159) * Quick example creating docs with TypeDoc * Attempt to fix broken build * Fix gitignore * Style main layout (#160) * Style main layout * Fix logo font * Main categories with placeholder pages + styled typography (#161) * Main categories + page placeholders * Update typography styles * Component doc template (#162) * Component doc template * Fix build * Component preview (#163) * Preview component example with Button * Remove link page for now * Add Link page * Fix SSR * Icon dropdown * Updated controls UI * Update controls UI * Component preview: Link (#164) * Social card image + small preview tweaks * ProjectLogo preview (#165) * Typography docs + preview (#166) * Heading docs + preview * Caption docs + preview * Paragraph docs + preview * Title docs + preview * Notification docs + preview (#167) * Notification docs + preview * Cleanup * Update Stellar logo (#168) * Banner docs + preview (#169) * Avatar docs + preview (#171) * Badge docs + preview (#170) * Profile docs + preview (#172) * Loader docs + preview (#173) * AssetIcon docs + preview (#174) * AssetIcon docs + preview * Cleanup * Tooltip docs + preview (#175) * Tooltip docs + preview * Trigger PR preview * Input docs + preview (#176) * Input docs + preview * Disabled preview * Select docs + preview (#177) * Select docs + preview * Disabled preview * Textarea docs + preview (#178) * Textarea docs + preview * Fix styles * Checkbox docs + preview (#179) * RadioButton docs + preview (#180) * Toggle docs + preview (#181) * IconButton and ButtonPreset docs + preview (#182) * IconButton docs + preview * ButtonPreset docs + preview * NavButton docs + preview (#183) * CopyText docs + preview (#184) * Pagination docs + preview (#186) * Card docs + preview (#185) * Modal docs + preview (#187) * Layout docs + preview (#188) * Table docs + preview (#189) * Icon and Logo docs + preview (#190) * Icon and Logo docs + preview * Fix server side rendering * Updated intro + readme (#191) * Updated intro + readme * Updated text * Editorial (#192) * intro editorial * components - buttons * components - accents * components - branding * components - containers * components - elements * components - inputs * components - layout * components - notifications * components - profile * foundations - typography * SDS website: add component short descriptions (#193) * Website: small UI tweaks (#194) * SDS v1.0.0 --------- Co-authored-by: aristides Co-authored-by: Aristides Staffieri Co-authored-by: Bri Wylde <92327786+briwylde08@users.noreply.github.com> --- .gitignore | 4 + @stellar/design-system-website/.gitignore | 20 + @stellar/design-system-website/README.md | 27 +- .../design-system-website/babel.config.js | 21 +- .../docs/components/_category_.json | 4 + .../docs/components/accents/_category_.json | 6 + .../docs/components/accents/badge.mdx | 20 + .../docs/components/accents/tooltip.mdx | 22 + .../docs/components/branding/_category_.json | 6 + .../docs/components/branding/project-logo.mdx | 20 + .../docs/components/buttons/_category_.json | 6 + .../docs/components/buttons/button-preset.mdx | 20 + .../docs/components/buttons/button.mdx | 22 + .../docs/components/buttons/copy-text.mdx | 20 + .../docs/components/buttons/icon-button.mdx | 20 + .../docs/components/buttons/link.mdx | 20 + .../docs/components/buttons/nav-button.mdx | 25 + .../components/containers/_category_.json | 6 + .../docs/components/containers/card.mdx | 20 + .../docs/components/containers/modal.mdx | 66 + .../docs/components/elements/_category_.json | 6 + .../docs/components/elements/asset-icon.mdx | 28 + .../docs/components/elements/avatar.mdx | 20 + .../docs/components/elements/icon.mdx | 10 + .../docs/components/elements/loader.mdx | 20 + .../docs/components/elements/logo.mdx | 10 + .../docs/components/inputs/_category_.json | 6 + .../docs/components/inputs/checkbox.mdx | 20 + .../docs/components/inputs/input.mdx | 20 + .../docs/components/inputs/radio-button.mdx | 20 + .../docs/components/inputs/select.mdx | 23 + .../docs/components/inputs/textarea.mdx | 20 + .../docs/components/inputs/toggle.mdx | 20 + .../docs/components/layout/_category_.json | 6 + .../docs/components/layout/layout.mdx | 79 + .../docs/components/layout/pagination.mdx | 25 + .../docs/components/layout/table.mdx | 70 + .../components/notifications/_category_.json | 6 + .../docs/components/notifications/banner.mdx | 20 + .../components/notifications/notification.mdx | 20 + .../docs/components/profile/_category_.json | 6 + .../docs/components/profile/profile.mdx | 23 + .../docs/foundations/_category_.json | 4 + .../foundations/typography/_category_.json | 7 + .../docs/foundations/typography/caption.mdx | 20 + .../docs/foundations/typography/heading.mdx | 22 + .../docs/foundations/typography/paragraph.mdx | 20 + .../docs/foundations/typography/title.mdx | 20 + .../docs/get-started/_category_.json | 4 + .../docs/get-started/introduction.mdx | 112 + .../docusaurus.config.js | 85 + @stellar/design-system-website/package.json | 103 +- .../design-system-website/public/logo192.png | Bin 3843 -> 0 bytes .../design-system-website/public/logo512.png | Bin 11240 -> 0 bytes .../public/manifest.json | 25 - .../design-system-website/public/robots.txt | 3 - @stellar/design-system-website/sidebars.js | 33 + @stellar/design-system-website/src/App.tsx | 114 - .../src/componentPreview/assetIconPreview.tsx | 31 + .../src/componentPreview/avatarPreview.tsx | 5 + .../src/componentPreview/badgePreview.tsx | 32 + .../src/componentPreview/bannerPreview.tsx | 32 + .../componentPreview/buttonPresetPreview.tsx | 89 + .../src/componentPreview/buttonPreview.tsx | 106 + .../src/componentPreview/captionPreview.tsx | 28 + .../src/componentPreview/cardPreview.tsx | 39 + .../src/componentPreview/checkboxPreview.tsx | 79 + .../src/componentPreview/copyTextPreview.tsx | 5 + .../src/componentPreview/headingPreview.tsx | 66 + .../componentPreview/iconButtonPreview.tsx | 87 + .../src/componentPreview/inputPreview.tsx | 131 + .../src/componentPreview/layoutPreview.tsx | 5 + .../src/componentPreview/linkPreview.tsx | 79 + .../src/componentPreview/loaderPreview.tsx | 24 + .../src/componentPreview/modalPreview.tsx | 5 + .../src/componentPreview/navButtonPreview.tsx | 16 + .../componentPreview/notificationPreview .tsx | 65 + .../componentPreview/paginationPreview.tsx | 5 + .../src/componentPreview/paragraphPreview.tsx | 33 + .../src/componentPreview/profilePreview.tsx | 84 + .../componentPreview/projectLogoPreview.tsx | 5 + .../componentPreview/radioButtonPreview.tsx | 29 + .../src/componentPreview/selectPreview.tsx | 94 + .../src/componentPreview/tablePreview.tsx | 31 + .../src/componentPreview/textareaPreview.tsx | 104 + .../src/componentPreview/titlePreview.tsx | 28 + .../src/componentPreview/togglePreview.tsx | 26 + .../src/componentPreview/tooltipPreview.tsx | 94 + .../AssetPreview/index.tsx} | 68 +- .../src/components/AssetPreview/styles.css | 36 + .../components/ComponentDescription/index.tsx | 25 + .../src/components/ComponentProps/index.tsx | 101 + .../src/components/ComponentsList/index.tsx | 41 - .../src/components/ComponentsList/styles.scss | 38 - .../src/components/Details/index.tsx | 263 - .../src/components/Details/styles.scss | 109 - .../src/components/Element.tsx | 66 + .../src/components/ElementCode/index.tsx | 145 - .../src/components/ElementCode/styles.scss | 16 - .../src/components/ElementPropType.tsx | 44 + .../src/components/ParseSummary.tsx | 12 + .../src/components/PreviewBlock/index.tsx | 373 + .../src/components/PreviewBlock/styles.css | 137 + .../src/components/SideNav/index.tsx | 101 - .../src/components/SideNav/styles.scss | 54 - .../src/constants/componentDetails.ts | 60 - .../src/constants/componentsInDisplayOrder.ts | 121 - .../src/constants/details/assetIcons.tsx | 114 - .../src/constants/details/avatars.tsx | 40 - .../src/constants/details/badges.tsx | 63 - .../src/constants/details/banners.tsx | 63 - .../src/constants/details/branding.tsx | 36 - .../src/constants/details/buttons.tsx | 636 -- .../src/constants/details/cards.tsx | 65 - .../src/constants/details/checkboxes.tsx | 290 - .../src/constants/details/copyTexts.tsx | 96 - .../src/constants/details/iconButtons.tsx | 267 - .../src/constants/details/inputs.tsx | 457 - .../src/constants/details/layout.tsx | 204 - .../src/constants/details/links.tsx | 832 -- .../src/constants/details/loaders.tsx | 35 - .../src/constants/details/mocks.tsx | 4 - .../src/constants/details/modals.tsx | 369 - .../src/constants/details/navButtons.tsx | 135 - .../src/constants/details/notifications.tsx | 211 - .../src/constants/details/pagination.tsx | 59 - .../src/constants/details/pieProgress.tsx | 51 - .../src/constants/details/profiles.tsx | 226 - .../src/constants/details/radioButtons.tsx | 219 - .../src/constants/details/selects.tsx | 283 - .../src/constants/details/tables.tsx | 228 - .../src/constants/details/textareas.tsx | 420 - .../src/constants/details/toggles.tsx | 109 - .../src/constants/details/tooltips.tsx | 97 - .../src/constants/details/typography.tsx | 242 - .../src/constants/variables.ts | 6 - .../src/context/SideNav.ts | 21 - .../design-system-website/src/css/custom.css | 264 + .../src/generated/gitInfo.ts | 1 - .../src/helpers/getComponentDetailsLink.ts | 4 - .../src/hooks/useSideNavEnabled.ts | 13 - @stellar/design-system-website/src/index.html | 32 - @stellar/design-system-website/src/index.tsx | 15 - .../src/pages/ComponentDetails.tsx | 47 - .../src/pages/Landing.tsx | 242 - .../src/react-app-env.d.ts | 1 - .../design-system-website/src/setupTests.ts | 5 - .../design-system-website/src/styles.scss | 125 - .../src/theme/DocCard/index.js | 87 + .../src/theme/DocCard/styles.module.css | 27 + .../src/theme/MDXComponents.js | 13 + .../src/theme/Playground/index.js | 102 + .../src/theme/Playground/styles.module.css | 45 + .../design-system-website/src/types/types.ts | 113 - .../design-system-website/static/.nojekyll | 0 .../static/img/check-icon.svg | 1 + .../static/img/editor-icon.svg | 3 + .../{public => static/img}/favicon.ico | Bin .../static/img/sds-v2-social-card.png | Bin 0 -> 137937 bytes .../static/img/stellar.svg | 10 + @stellar/design-system-website/tsconfig.json | 16 +- .../design-system-website/webpack.common.js | 157 - @stellar/design-system-website/webpack.dev.js | 15 - .../design-system-website/webpack.prod.js | 7 - @stellar/design-system/README.md | 99 +- @stellar/design-system/package.json | 8 +- .../src/assets/logos/stellar.svg | 11 +- .../src/components/AssetIcon/index.tsx | 17 +- .../src/components/Avatar/index.tsx | 9 +- .../src/components/Badge/index.tsx | 8 +- .../src/components/Banner/index.tsx | 8 +- .../src/components/Button/index.tsx | 27 +- .../src/components/ButtonPreset/index.tsx | 72 + .../src/components/Card/index.tsx | 10 +- .../src/components/Checkbox/index.tsx | 24 +- .../src/components/CopyText/index.tsx | 30 +- .../src/components/IconButton/index.tsx | 101 +- .../src/components/Input/index.tsx | 28 +- .../src/components/Layout/index.tsx | 63 +- .../src/components/Link/index.tsx | 26 +- .../src/components/Loader/index.tsx | 7 +- .../src/components/Modal/index.tsx | 27 +- .../src/components/NavButton/index.tsx | 14 +- .../src/components/Notification/index.tsx | 18 +- .../src/components/Notification/styles.scss | 1 + .../src/components/Pagination/index.tsx | 30 +- .../src/components/Profile/index.tsx | 18 +- .../src/components/ProjectLogo/index.tsx | 8 +- .../src/components/RadioButton/index.tsx | 19 +- .../src/components/Select/index.tsx | 28 +- .../src/components/Table/index.tsx | 21 +- .../src/components/Textarea/index.tsx | 28 +- .../src/components/ThemeSwitch/index.tsx | 14 +- .../src/components/Toggle/index.tsx | 23 +- .../src/components/Tooltip/index.tsx | 27 +- .../src/components/Typography/index.tsx | 81 +- .../src/components/Typography/styles.scss | 3 +- .../design-system/src/components/index.ts | 1 + @stellar/design-system/src/theme.scss | 25 +- @stellar/design-system/typedoc.json | 6 + README.md | 15 +- package.json | 3 +- yarn.lock | 8933 ++++++++++++----- 203 files changed, 11048 insertions(+), 10758 deletions(-) create mode 100644 @stellar/design-system-website/.gitignore create mode 100644 @stellar/design-system-website/docs/components/_category_.json create mode 100644 @stellar/design-system-website/docs/components/accents/_category_.json create mode 100644 @stellar/design-system-website/docs/components/accents/badge.mdx create mode 100644 @stellar/design-system-website/docs/components/accents/tooltip.mdx create mode 100644 @stellar/design-system-website/docs/components/branding/_category_.json create mode 100644 @stellar/design-system-website/docs/components/branding/project-logo.mdx create mode 100644 @stellar/design-system-website/docs/components/buttons/_category_.json create mode 100644 @stellar/design-system-website/docs/components/buttons/button-preset.mdx create mode 100644 @stellar/design-system-website/docs/components/buttons/button.mdx create mode 100644 @stellar/design-system-website/docs/components/buttons/copy-text.mdx create mode 100644 @stellar/design-system-website/docs/components/buttons/icon-button.mdx create mode 100644 @stellar/design-system-website/docs/components/buttons/link.mdx create mode 100644 @stellar/design-system-website/docs/components/buttons/nav-button.mdx create mode 100644 @stellar/design-system-website/docs/components/containers/_category_.json create mode 100644 @stellar/design-system-website/docs/components/containers/card.mdx create mode 100644 @stellar/design-system-website/docs/components/containers/modal.mdx create mode 100644 @stellar/design-system-website/docs/components/elements/_category_.json create mode 100644 @stellar/design-system-website/docs/components/elements/asset-icon.mdx create mode 100644 @stellar/design-system-website/docs/components/elements/avatar.mdx create mode 100644 @stellar/design-system-website/docs/components/elements/icon.mdx create mode 100644 @stellar/design-system-website/docs/components/elements/loader.mdx create mode 100644 @stellar/design-system-website/docs/components/elements/logo.mdx create mode 100644 @stellar/design-system-website/docs/components/inputs/_category_.json create mode 100644 @stellar/design-system-website/docs/components/inputs/checkbox.mdx create mode 100644 @stellar/design-system-website/docs/components/inputs/input.mdx create mode 100644 @stellar/design-system-website/docs/components/inputs/radio-button.mdx create mode 100644 @stellar/design-system-website/docs/components/inputs/select.mdx create mode 100644 @stellar/design-system-website/docs/components/inputs/textarea.mdx create mode 100644 @stellar/design-system-website/docs/components/inputs/toggle.mdx create mode 100644 @stellar/design-system-website/docs/components/layout/_category_.json create mode 100644 @stellar/design-system-website/docs/components/layout/layout.mdx create mode 100644 @stellar/design-system-website/docs/components/layout/pagination.mdx create mode 100644 @stellar/design-system-website/docs/components/layout/table.mdx create mode 100644 @stellar/design-system-website/docs/components/notifications/_category_.json create mode 100644 @stellar/design-system-website/docs/components/notifications/banner.mdx create mode 100644 @stellar/design-system-website/docs/components/notifications/notification.mdx create mode 100644 @stellar/design-system-website/docs/components/profile/_category_.json create mode 100644 @stellar/design-system-website/docs/components/profile/profile.mdx create mode 100644 @stellar/design-system-website/docs/foundations/_category_.json create mode 100644 @stellar/design-system-website/docs/foundations/typography/_category_.json create mode 100644 @stellar/design-system-website/docs/foundations/typography/caption.mdx create mode 100644 @stellar/design-system-website/docs/foundations/typography/heading.mdx create mode 100644 @stellar/design-system-website/docs/foundations/typography/paragraph.mdx create mode 100644 @stellar/design-system-website/docs/foundations/typography/title.mdx create mode 100644 @stellar/design-system-website/docs/get-started/_category_.json create mode 100644 @stellar/design-system-website/docs/get-started/introduction.mdx create mode 100644 @stellar/design-system-website/docusaurus.config.js mode change 100755 => 100644 @stellar/design-system-website/package.json delete mode 100644 @stellar/design-system-website/public/logo192.png delete mode 100644 @stellar/design-system-website/public/logo512.png delete mode 100644 @stellar/design-system-website/public/manifest.json delete mode 100644 @stellar/design-system-website/public/robots.txt create mode 100644 @stellar/design-system-website/sidebars.js delete mode 100644 @stellar/design-system-website/src/App.tsx create mode 100644 @stellar/design-system-website/src/componentPreview/assetIconPreview.tsx create mode 100644 @stellar/design-system-website/src/componentPreview/avatarPreview.tsx create mode 100644 @stellar/design-system-website/src/componentPreview/badgePreview.tsx create mode 100644 @stellar/design-system-website/src/componentPreview/bannerPreview.tsx create mode 100644 @stellar/design-system-website/src/componentPreview/buttonPresetPreview.tsx create mode 100644 @stellar/design-system-website/src/componentPreview/buttonPreview.tsx create mode 100644 @stellar/design-system-website/src/componentPreview/captionPreview.tsx create mode 100644 @stellar/design-system-website/src/componentPreview/cardPreview.tsx create mode 100644 @stellar/design-system-website/src/componentPreview/checkboxPreview.tsx create mode 100644 @stellar/design-system-website/src/componentPreview/copyTextPreview.tsx create mode 100644 @stellar/design-system-website/src/componentPreview/headingPreview.tsx create mode 100644 @stellar/design-system-website/src/componentPreview/iconButtonPreview.tsx create mode 100644 @stellar/design-system-website/src/componentPreview/inputPreview.tsx create mode 100644 @stellar/design-system-website/src/componentPreview/layoutPreview.tsx create mode 100644 @stellar/design-system-website/src/componentPreview/linkPreview.tsx create mode 100644 @stellar/design-system-website/src/componentPreview/loaderPreview.tsx create mode 100644 @stellar/design-system-website/src/componentPreview/modalPreview.tsx create mode 100644 @stellar/design-system-website/src/componentPreview/navButtonPreview.tsx create mode 100644 @stellar/design-system-website/src/componentPreview/notificationPreview .tsx create mode 100644 @stellar/design-system-website/src/componentPreview/paginationPreview.tsx create mode 100644 @stellar/design-system-website/src/componentPreview/paragraphPreview.tsx create mode 100644 @stellar/design-system-website/src/componentPreview/profilePreview.tsx create mode 100644 @stellar/design-system-website/src/componentPreview/projectLogoPreview.tsx create mode 100644 @stellar/design-system-website/src/componentPreview/radioButtonPreview.tsx create mode 100644 @stellar/design-system-website/src/componentPreview/selectPreview.tsx create mode 100644 @stellar/design-system-website/src/componentPreview/tablePreview.tsx create mode 100644 @stellar/design-system-website/src/componentPreview/textareaPreview.tsx create mode 100644 @stellar/design-system-website/src/componentPreview/titlePreview.tsx create mode 100644 @stellar/design-system-website/src/componentPreview/togglePreview.tsx create mode 100644 @stellar/design-system-website/src/componentPreview/tooltipPreview.tsx rename @stellar/design-system-website/src/{constants/details/assets.tsx => components/AssetPreview/index.tsx} (82%) create mode 100644 @stellar/design-system-website/src/components/AssetPreview/styles.css create mode 100644 @stellar/design-system-website/src/components/ComponentDescription/index.tsx create mode 100644 @stellar/design-system-website/src/components/ComponentProps/index.tsx delete mode 100644 @stellar/design-system-website/src/components/ComponentsList/index.tsx delete mode 100644 @stellar/design-system-website/src/components/ComponentsList/styles.scss delete mode 100644 @stellar/design-system-website/src/components/Details/index.tsx delete mode 100644 @stellar/design-system-website/src/components/Details/styles.scss create mode 100644 @stellar/design-system-website/src/components/Element.tsx delete mode 100644 @stellar/design-system-website/src/components/ElementCode/index.tsx delete mode 100644 @stellar/design-system-website/src/components/ElementCode/styles.scss create mode 100644 @stellar/design-system-website/src/components/ElementPropType.tsx create mode 100644 @stellar/design-system-website/src/components/ParseSummary.tsx create mode 100644 @stellar/design-system-website/src/components/PreviewBlock/index.tsx create mode 100644 @stellar/design-system-website/src/components/PreviewBlock/styles.css delete mode 100644 @stellar/design-system-website/src/components/SideNav/index.tsx delete mode 100644 @stellar/design-system-website/src/components/SideNav/styles.scss delete mode 100644 @stellar/design-system-website/src/constants/componentDetails.ts delete mode 100644 @stellar/design-system-website/src/constants/componentsInDisplayOrder.ts delete mode 100644 @stellar/design-system-website/src/constants/details/assetIcons.tsx delete mode 100644 @stellar/design-system-website/src/constants/details/avatars.tsx delete mode 100644 @stellar/design-system-website/src/constants/details/badges.tsx delete mode 100644 @stellar/design-system-website/src/constants/details/banners.tsx delete mode 100644 @stellar/design-system-website/src/constants/details/branding.tsx delete mode 100644 @stellar/design-system-website/src/constants/details/buttons.tsx delete mode 100644 @stellar/design-system-website/src/constants/details/cards.tsx delete mode 100644 @stellar/design-system-website/src/constants/details/checkboxes.tsx delete mode 100644 @stellar/design-system-website/src/constants/details/copyTexts.tsx delete mode 100644 @stellar/design-system-website/src/constants/details/iconButtons.tsx delete mode 100644 @stellar/design-system-website/src/constants/details/inputs.tsx delete mode 100644 @stellar/design-system-website/src/constants/details/layout.tsx delete mode 100644 @stellar/design-system-website/src/constants/details/links.tsx delete mode 100644 @stellar/design-system-website/src/constants/details/loaders.tsx delete mode 100644 @stellar/design-system-website/src/constants/details/mocks.tsx delete mode 100644 @stellar/design-system-website/src/constants/details/modals.tsx delete mode 100644 @stellar/design-system-website/src/constants/details/navButtons.tsx delete mode 100644 @stellar/design-system-website/src/constants/details/notifications.tsx delete mode 100644 @stellar/design-system-website/src/constants/details/pagination.tsx delete mode 100644 @stellar/design-system-website/src/constants/details/pieProgress.tsx delete mode 100644 @stellar/design-system-website/src/constants/details/profiles.tsx delete mode 100644 @stellar/design-system-website/src/constants/details/radioButtons.tsx delete mode 100644 @stellar/design-system-website/src/constants/details/selects.tsx delete mode 100644 @stellar/design-system-website/src/constants/details/tables.tsx delete mode 100644 @stellar/design-system-website/src/constants/details/textareas.tsx delete mode 100644 @stellar/design-system-website/src/constants/details/toggles.tsx delete mode 100644 @stellar/design-system-website/src/constants/details/tooltips.tsx delete mode 100644 @stellar/design-system-website/src/constants/details/typography.tsx delete mode 100644 @stellar/design-system-website/src/constants/variables.ts delete mode 100644 @stellar/design-system-website/src/context/SideNav.ts create mode 100644 @stellar/design-system-website/src/css/custom.css delete mode 100644 @stellar/design-system-website/src/generated/gitInfo.ts delete mode 100644 @stellar/design-system-website/src/helpers/getComponentDetailsLink.ts delete mode 100644 @stellar/design-system-website/src/hooks/useSideNavEnabled.ts delete mode 100644 @stellar/design-system-website/src/index.html delete mode 100644 @stellar/design-system-website/src/index.tsx delete mode 100644 @stellar/design-system-website/src/pages/ComponentDetails.tsx delete mode 100644 @stellar/design-system-website/src/pages/Landing.tsx delete mode 100644 @stellar/design-system-website/src/react-app-env.d.ts delete mode 100644 @stellar/design-system-website/src/setupTests.ts delete mode 100644 @stellar/design-system-website/src/styles.scss create mode 100644 @stellar/design-system-website/src/theme/DocCard/index.js create mode 100644 @stellar/design-system-website/src/theme/DocCard/styles.module.css create mode 100644 @stellar/design-system-website/src/theme/MDXComponents.js create mode 100644 @stellar/design-system-website/src/theme/Playground/index.js create mode 100644 @stellar/design-system-website/src/theme/Playground/styles.module.css delete mode 100644 @stellar/design-system-website/src/types/types.ts create mode 100644 @stellar/design-system-website/static/.nojekyll create mode 100644 @stellar/design-system-website/static/img/check-icon.svg create mode 100644 @stellar/design-system-website/static/img/editor-icon.svg rename @stellar/design-system-website/{public => static/img}/favicon.ico (100%) create mode 100644 @stellar/design-system-website/static/img/sds-v2-social-card.png create mode 100644 @stellar/design-system-website/static/img/stellar.svg delete mode 100644 @stellar/design-system-website/webpack.common.js delete mode 100644 @stellar/design-system-website/webpack.dev.js delete mode 100644 @stellar/design-system-website/webpack.prod.js create mode 100644 @stellar/design-system/src/components/ButtonPreset/index.tsx create mode 100644 @stellar/design-system/typedoc.json diff --git a/.gitignore b/.gitignore index d3a57d88..0cbbfc84 100644 --- a/.gitignore +++ b/.gitignore @@ -13,6 +13,9 @@ node_modules */**/dist */**/build +# SDS docs +@stellar/design-system/docs + # misc .DS_Store .env @@ -20,6 +23,7 @@ node_modules .env.development.local .env.test.local .env.production.local +.docusaurus npm-debug.log* yarn-debug.log* diff --git a/@stellar/design-system-website/.gitignore b/@stellar/design-system-website/.gitignore new file mode 100644 index 00000000..b2d6de30 --- /dev/null +++ b/@stellar/design-system-website/.gitignore @@ -0,0 +1,20 @@ +# Dependencies +/node_modules + +# Production +/build + +# Generated files +.docusaurus +.cache-loader + +# Misc +.DS_Store +.env.local +.env.development.local +.env.test.local +.env.production.local + +npm-debug.log* +yarn-debug.log* +yarn-error.log* diff --git a/@stellar/design-system-website/README.md b/@stellar/design-system-website/README.md index 3c67f5b6..dded1470 100644 --- a/@stellar/design-system-website/README.md +++ b/@stellar/design-system-website/README.md @@ -1,3 +1,28 @@ # Stellar Design System Website -TODO +This website is built using [Docusaurus 2](https://docusaurus.io/), a modern +static website generator. + +## Installation + +```bash +yarn install +``` + +## Local Development + +```bash +yarn start +``` + +This command starts a local development server and opens up a browser window. +Most changes are reflected live without having to restart the server. + +## Build + +```bash +yarn build +``` + +This command generates static content into the `build` directory and can be +served using any static contents hosting service. diff --git a/@stellar/design-system-website/babel.config.js b/@stellar/design-system-website/babel.config.js index c742e964..bfd75dbd 100644 --- a/@stellar/design-system-website/babel.config.js +++ b/@stellar/design-system-website/babel.config.js @@ -1,22 +1,3 @@ module.exports = { - presets: [ - "@babel/preset-react", - "@babel/preset-typescript", - [ - "@babel/preset-env", - { - targets: { - browsers: "last 2 versions", - }, - modules: false, - loose: false, - }, - ], - ], - plugins: ["transform-class-properties", "react-hot-loader/babel"], - env: { - test: { - plugins: ["transform-es2015-modules-commonjs"], - }, - }, + presets: [require.resolve("@docusaurus/core/lib/babel/preset")], }; diff --git a/@stellar/design-system-website/docs/components/_category_.json b/@stellar/design-system-website/docs/components/_category_.json new file mode 100644 index 00000000..e57a8385 --- /dev/null +++ b/@stellar/design-system-website/docs/components/_category_.json @@ -0,0 +1,4 @@ +{ + "label": "Components", + "position": 3 +} diff --git a/@stellar/design-system-website/docs/components/accents/_category_.json b/@stellar/design-system-website/docs/components/accents/_category_.json new file mode 100644 index 00000000..f7f060ff --- /dev/null +++ b/@stellar/design-system-website/docs/components/accents/_category_.json @@ -0,0 +1,6 @@ +{ + "label": "Accents", + "link": { + "type": "generated-index" + } +} diff --git a/@stellar/design-system-website/docs/components/accents/badge.mdx b/@stellar/design-system-website/docs/components/accents/badge.mdx new file mode 100644 index 00000000..ce5b16b1 --- /dev/null +++ b/@stellar/design-system-website/docs/components/accents/badge.mdx @@ -0,0 +1,20 @@ +--- +slug: /badge +description: "Used to label or categorize items." +--- + +# Badge + + + +## Example + +```tsx live + + Label + +``` + +## Props + + diff --git a/@stellar/design-system-website/docs/components/accents/tooltip.mdx b/@stellar/design-system-website/docs/components/accents/tooltip.mdx new file mode 100644 index 00000000..8fa582ef --- /dev/null +++ b/@stellar/design-system-website/docs/components/accents/tooltip.mdx @@ -0,0 +1,22 @@ +--- +slug: /tooltip +description: "Tooltip is used to display info in a bubble." +--- + +# Tooltip + + + +## Example + +```tsx live + + Tooltip trigger}> + Lorem ipsum dolor sit + + +``` + +## Props + + diff --git a/@stellar/design-system-website/docs/components/branding/_category_.json b/@stellar/design-system-website/docs/components/branding/_category_.json new file mode 100644 index 00000000..430e647a --- /dev/null +++ b/@stellar/design-system-website/docs/components/branding/_category_.json @@ -0,0 +1,6 @@ +{ + "label": "Branding", + "link": { + "type": "generated-index" + } +} diff --git a/@stellar/design-system-website/docs/components/branding/project-logo.mdx b/@stellar/design-system-website/docs/components/branding/project-logo.mdx new file mode 100644 index 00000000..7100eea7 --- /dev/null +++ b/@stellar/design-system-website/docs/components/branding/project-logo.mdx @@ -0,0 +1,20 @@ +--- +slug: /project-logo +description: "Project’s logo with a name and a link." +--- + +# Project logo + + + +## Example + +```tsx live + + + +``` + +## Props + + diff --git a/@stellar/design-system-website/docs/components/buttons/_category_.json b/@stellar/design-system-website/docs/components/buttons/_category_.json new file mode 100644 index 00000000..a4dbc2c8 --- /dev/null +++ b/@stellar/design-system-website/docs/components/buttons/_category_.json @@ -0,0 +1,6 @@ +{ + "label": "Buttons", + "link": { + "type": "generated-index" + } +} diff --git a/@stellar/design-system-website/docs/components/buttons/button-preset.mdx b/@stellar/design-system-website/docs/components/buttons/button-preset.mdx new file mode 100644 index 00000000..e9afc015 --- /dev/null +++ b/@stellar/design-system-website/docs/components/buttons/button-preset.mdx @@ -0,0 +1,20 @@ +--- +slug: /button-preset +description: "Copy and download button presets." +--- + +# Button preset + + + +## Example + +```tsx live + + + +``` + +## Props + + diff --git a/@stellar/design-system-website/docs/components/buttons/button.mdx b/@stellar/design-system-website/docs/components/buttons/button.mdx new file mode 100644 index 00000000..8552d9f7 --- /dev/null +++ b/@stellar/design-system-website/docs/components/buttons/button.mdx @@ -0,0 +1,22 @@ +--- +slug: /button +description: "Used to trigger an action that is not opening a link." +--- + +# Button + + + +## Example + +```tsx live + + + +``` + +## Props + + diff --git a/@stellar/design-system-website/docs/components/buttons/copy-text.mdx b/@stellar/design-system-website/docs/components/buttons/copy-text.mdx new file mode 100644 index 00000000..d8168134 --- /dev/null +++ b/@stellar/design-system-website/docs/components/buttons/copy-text.mdx @@ -0,0 +1,20 @@ +--- +slug: /copy-text +description: "Copy text component with an optional tooltip." +--- + +# Copy text + + + +## Example + +```tsx live + + Copy text + +``` + +## Props + + diff --git a/@stellar/design-system-website/docs/components/buttons/icon-button.mdx b/@stellar/design-system-website/docs/components/buttons/icon-button.mdx new file mode 100644 index 00000000..a74261ac --- /dev/null +++ b/@stellar/design-system-website/docs/components/buttons/icon-button.mdx @@ -0,0 +1,20 @@ +--- +slug: /icon-button +description: "Button with icon as a label." +--- + +# Icon button + + + +## Example + +```tsx live + + } /> + +``` + +## Props + + diff --git a/@stellar/design-system-website/docs/components/buttons/link.mdx b/@stellar/design-system-website/docs/components/buttons/link.mdx new file mode 100644 index 00000000..70cd34e7 --- /dev/null +++ b/@stellar/design-system-website/docs/components/buttons/link.mdx @@ -0,0 +1,20 @@ +--- +slug: /link +description: "Trigger an action to open links or navigate to other pages." +--- + +# Link + + + +## Example + +```tsx live + + Link + +``` + +## Props + + diff --git a/@stellar/design-system-website/docs/components/buttons/nav-button.mdx b/@stellar/design-system-website/docs/components/buttons/nav-button.mdx new file mode 100644 index 00000000..a5a6e1a6 --- /dev/null +++ b/@stellar/design-system-website/docs/components/buttons/nav-button.mdx @@ -0,0 +1,25 @@ +--- +slug: /nav-button +description: "Trigger actions like toggle dark mode, close a modal, etc." +--- + +# Navigation button + + + +## Example + +```tsx live + + } + id="nav-button" + onClick={() => {}} + title="Menu" + /> + +``` + +## Props + + diff --git a/@stellar/design-system-website/docs/components/containers/_category_.json b/@stellar/design-system-website/docs/components/containers/_category_.json new file mode 100644 index 00000000..1984a2a6 --- /dev/null +++ b/@stellar/design-system-website/docs/components/containers/_category_.json @@ -0,0 +1,6 @@ +{ + "label": "Containers", + "link": { + "type": "generated-index" + } +} diff --git a/@stellar/design-system-website/docs/components/containers/card.mdx b/@stellar/design-system-website/docs/components/containers/card.mdx new file mode 100644 index 00000000..7e6e8773 --- /dev/null +++ b/@stellar/design-system-website/docs/components/containers/card.mdx @@ -0,0 +1,20 @@ +--- +slug: /card +description: "Container for any type of content." +--- + +# Card + + + +## Example + +```tsx live + + Content + +``` + +## Props + + diff --git a/@stellar/design-system-website/docs/components/containers/modal.mdx b/@stellar/design-system-website/docs/components/containers/modal.mdx new file mode 100644 index 00000000..cd400f3a --- /dev/null +++ b/@stellar/design-system-website/docs/components/containers/modal.mdx @@ -0,0 +1,66 @@ +--- +slug: /modal +description: "A dialog window with an overlay background." +--- + +# Modal + + + +## Example + +```tsx live + + <> + {}} parentId="preview-block"> +

+ Lorem ipsum dolor sit amet consectetur adipisicing elit. Pariatur eius + beatae sint dolorem, excepturi quos enim, et ullam suscipit voluptates + voluptas accusantium repellendus amet explicabo, iure veritatis aperiam + alias molestiae. +

+ + + {}} parentId="preview-block"> + Modal heading + +

+ Lorem ipsum dolor sit amet consectetur adipisicing elit. Pariatur eius + beatae sint dolorem, excepturi quos enim, et ullam suscipit voluptates + voluptas accusantium repellendus amet explicabo, iure veritatis + aperiam alias molestiae. +

+ +

+ Lorem ipsum dolor sit amet consectetur adipisicing elit. Pariatur eius + beatae sint dolorem, excepturi quos enim, et ullam suscipit voluptates + voluptas accusantium repellendus amet explicabo, iure veritatis + aperiam alias molestiae. +

+ +

+ Lorem ipsum dolor sit amet consectetur adipisicing elit. Pariatur eius + beatae sint dolorem, excepturi quos enim, et ullam suscipit voluptates + voluptas accusantium repellendus amet explicabo, iure veritatis + aperiam alias molestiae. +

+ + + + + + + + +``` + +## Props + + diff --git a/@stellar/design-system-website/docs/components/elements/_category_.json b/@stellar/design-system-website/docs/components/elements/_category_.json new file mode 100644 index 00000000..55441b99 --- /dev/null +++ b/@stellar/design-system-website/docs/components/elements/_category_.json @@ -0,0 +1,6 @@ +{ + "label": "Elements", + "link": { + "type": "generated-index" + } +} diff --git a/@stellar/design-system-website/docs/components/elements/asset-icon.mdx b/@stellar/design-system-website/docs/components/elements/asset-icon.mdx new file mode 100644 index 00000000..8bc65fc8 --- /dev/null +++ b/@stellar/design-system-website/docs/components/elements/asset-icon.mdx @@ -0,0 +1,28 @@ +--- +slug: /asset-icon +description: "Asset image displayed in a circle." +--- + +# Asset icon + + + +## Example + +```tsx live + + + +``` + +## Props + + diff --git a/@stellar/design-system-website/docs/components/elements/avatar.mdx b/@stellar/design-system-website/docs/components/elements/avatar.mdx new file mode 100644 index 00000000..be60af41 --- /dev/null +++ b/@stellar/design-system-website/docs/components/elements/avatar.mdx @@ -0,0 +1,20 @@ +--- +slug: /avatar +description: "Identicon as an avatar." +--- + +# Avatar + + + +## Example + +```tsx live + + + +``` + +## Props + + diff --git a/@stellar/design-system-website/docs/components/elements/icon.mdx b/@stellar/design-system-website/docs/components/elements/icon.mdx new file mode 100644 index 00000000..d926ef58 --- /dev/null +++ b/@stellar/design-system-website/docs/components/elements/icon.mdx @@ -0,0 +1,10 @@ +--- +slug: /icon +description: "SVG icon component." +--- + +# Icon + +SVG icon components, which are styled in CSS. + + diff --git a/@stellar/design-system-website/docs/components/elements/loader.mdx b/@stellar/design-system-website/docs/components/elements/loader.mdx new file mode 100644 index 00000000..e0738322 --- /dev/null +++ b/@stellar/design-system-website/docs/components/elements/loader.mdx @@ -0,0 +1,20 @@ +--- +slug: /loader +description: "Loading state indicator." +--- + +# Loader + + + +## Example + +```tsx live + + + +``` + +## Props + + diff --git a/@stellar/design-system-website/docs/components/elements/logo.mdx b/@stellar/design-system-website/docs/components/elements/logo.mdx new file mode 100644 index 00000000..643c62b2 --- /dev/null +++ b/@stellar/design-system-website/docs/components/elements/logo.mdx @@ -0,0 +1,10 @@ +--- +slug: /logo +description: "SVG logo component." +--- + +# Logo + +SVG logo components, which can be styled in CSS if necessary. + + diff --git a/@stellar/design-system-website/docs/components/inputs/_category_.json b/@stellar/design-system-website/docs/components/inputs/_category_.json new file mode 100644 index 00000000..8127ad62 --- /dev/null +++ b/@stellar/design-system-website/docs/components/inputs/_category_.json @@ -0,0 +1,6 @@ +{ + "label": "Inputs", + "link": { + "type": "generated-index" + } +} diff --git a/@stellar/design-system-website/docs/components/inputs/checkbox.mdx b/@stellar/design-system-website/docs/components/inputs/checkbox.mdx new file mode 100644 index 00000000..0e2560ee --- /dev/null +++ b/@stellar/design-system-website/docs/components/inputs/checkbox.mdx @@ -0,0 +1,20 @@ +--- +slug: /checkbox +description: "Form input for single and multiple selections." +--- + +# Checkbox + + + +## Example + +```tsx live + + + +``` + +## Props + + diff --git a/@stellar/design-system-website/docs/components/inputs/input.mdx b/@stellar/design-system-website/docs/components/inputs/input.mdx new file mode 100644 index 00000000..8481f284 --- /dev/null +++ b/@stellar/design-system-website/docs/components/inputs/input.mdx @@ -0,0 +1,20 @@ +--- +slug: /input +description: "Form input for a single line of text." +--- + +# Input + + + +## Example + +```tsx live + + + +``` + +## Props + + diff --git a/@stellar/design-system-website/docs/components/inputs/radio-button.mdx b/@stellar/design-system-website/docs/components/inputs/radio-button.mdx new file mode 100644 index 00000000..569e8319 --- /dev/null +++ b/@stellar/design-system-website/docs/components/inputs/radio-button.mdx @@ -0,0 +1,20 @@ +--- +slug: /radio-button +description: "Form input for a single selection." +--- + +# Radio button + + + +## Example + +```tsx live + + + +``` + +## Props + + diff --git a/@stellar/design-system-website/docs/components/inputs/select.mdx b/@stellar/design-system-website/docs/components/inputs/select.mdx new file mode 100644 index 00000000..e472af69 --- /dev/null +++ b/@stellar/design-system-website/docs/components/inputs/select.mdx @@ -0,0 +1,23 @@ +--- +slug: /select +description: "Form input for selecting a single option from a list." +--- + +# Select + + + +## Example + +```tsx live + + + +``` + +## Props + + diff --git a/@stellar/design-system-website/docs/components/inputs/textarea.mdx b/@stellar/design-system-website/docs/components/inputs/textarea.mdx new file mode 100644 index 00000000..f0151675 --- /dev/null +++ b/@stellar/design-system-website/docs/components/inputs/textarea.mdx @@ -0,0 +1,20 @@ +--- +slug: /textarea +description: "Form input for multiple lines of text." +--- + +# Textarea + + + +## Example + +```tsx live + + + +``` + +## Props + + diff --git a/@stellar/design-system-website/docs/components/inputs/toggle.mdx b/@stellar/design-system-website/docs/components/inputs/toggle.mdx new file mode 100644 index 00000000..a7bb88cb --- /dev/null +++ b/@stellar/design-system-website/docs/components/inputs/toggle.mdx @@ -0,0 +1,20 @@ +--- +slug: /toggle +description: "Toggle a setting on or off." +--- + +# Toggle + + + +## Example + +```tsx live + + + +``` + +## Props + + diff --git a/@stellar/design-system-website/docs/components/layout/_category_.json b/@stellar/design-system-website/docs/components/layout/_category_.json new file mode 100644 index 00000000..1e81c3aa --- /dev/null +++ b/@stellar/design-system-website/docs/components/layout/_category_.json @@ -0,0 +1,6 @@ +{ + "label": "Layout", + "link": { + "type": "generated-index" + } +} diff --git a/@stellar/design-system-website/docs/components/layout/layout.mdx b/@stellar/design-system-website/docs/components/layout/layout.mdx new file mode 100644 index 00000000..7d1b908c --- /dev/null +++ b/@stellar/design-system-website/docs/components/layout/layout.mdx @@ -0,0 +1,79 @@ +--- +slug: /layout +description: "Elements to build page layouts." +--- + +# Layout + + + +## Header + + + +### Example + +```tsx live + + + +``` + +### Props + + + +## Content + + + +### Example + +```tsx live + + Content + +``` + +### Props + + + +## Inset + + + +### Example + +```tsx live + + + Content with inset + + +``` + +### Props + + + +## Footer + + + +### Example + +```tsx live + + + +``` + +### Props + + diff --git a/@stellar/design-system-website/docs/components/layout/pagination.mdx b/@stellar/design-system-website/docs/components/layout/pagination.mdx new file mode 100644 index 00000000..43cf8711 --- /dev/null +++ b/@stellar/design-system-website/docs/components/layout/pagination.mdx @@ -0,0 +1,25 @@ +--- +slug: /pagination +description: "Range of pages for long lists." +--- + +# Pagination + + + +## Example + +```tsx live + + {}} + /> + +``` + +## Props + + diff --git a/@stellar/design-system-website/docs/components/layout/table.mdx b/@stellar/design-system-website/docs/components/layout/table.mdx new file mode 100644 index 00000000..483a9e36 --- /dev/null +++ b/@stellar/design-system-website/docs/components/layout/table.mdx @@ -0,0 +1,70 @@ +--- +slug: /table +description: "Display data in a table." +--- + +# Table + + + +## Example + +```tsx live + + ( + <> + + + + + )} + breakpoint={400} + pageSize={2} + /> + +``` + +## Props + + diff --git a/@stellar/design-system-website/docs/components/notifications/_category_.json b/@stellar/design-system-website/docs/components/notifications/_category_.json new file mode 100644 index 00000000..534b0b43 --- /dev/null +++ b/@stellar/design-system-website/docs/components/notifications/_category_.json @@ -0,0 +1,6 @@ +{ + "label": "Notifications", + "link": { + "type": "generated-index" + } +} diff --git a/@stellar/design-system-website/docs/components/notifications/banner.mdx b/@stellar/design-system-website/docs/components/notifications/banner.mdx new file mode 100644 index 00000000..5642b7dd --- /dev/null +++ b/@stellar/design-system-website/docs/components/notifications/banner.mdx @@ -0,0 +1,20 @@ +--- +slug: /banner +description: "Display message at the top of the page." +--- + +# Banner + + + +## Example + +```tsx live + + Banner message + +``` + +## Props + + diff --git a/@stellar/design-system-website/docs/components/notifications/notification.mdx b/@stellar/design-system-website/docs/components/notifications/notification.mdx new file mode 100644 index 00000000..4ca9f44c --- /dev/null +++ b/@stellar/design-system-website/docs/components/notifications/notification.mdx @@ -0,0 +1,20 @@ +--- +slug: /notification +description: "Draw user attention." +--- + +# Notification + + + +## Example + +```tsx live + + + +``` + +## Props + + diff --git a/@stellar/design-system-website/docs/components/profile/_category_.json b/@stellar/design-system-website/docs/components/profile/_category_.json new file mode 100644 index 00000000..17a31ef9 --- /dev/null +++ b/@stellar/design-system-website/docs/components/profile/_category_.json @@ -0,0 +1,6 @@ +{ + "label": "Profile", + "link": { + "type": "generated-index" + } +} diff --git a/@stellar/design-system-website/docs/components/profile/profile.mdx b/@stellar/design-system-website/docs/components/profile/profile.mdx new file mode 100644 index 00000000..f496fcdf --- /dev/null +++ b/@stellar/design-system-website/docs/components/profile/profile.mdx @@ -0,0 +1,23 @@ +--- +slug: /profile +description: "Avatar with Stellar address." +--- + +# Profile + + + +## Example + +```tsx live + + + +``` + +## Props + + diff --git a/@stellar/design-system-website/docs/foundations/_category_.json b/@stellar/design-system-website/docs/foundations/_category_.json new file mode 100644 index 00000000..8bb8c04b --- /dev/null +++ b/@stellar/design-system-website/docs/foundations/_category_.json @@ -0,0 +1,4 @@ +{ + "label": "Foundations", + "position": 2 +} diff --git a/@stellar/design-system-website/docs/foundations/typography/_category_.json b/@stellar/design-system-website/docs/foundations/typography/_category_.json new file mode 100644 index 00000000..c99f54a5 --- /dev/null +++ b/@stellar/design-system-website/docs/foundations/typography/_category_.json @@ -0,0 +1,7 @@ +{ + "label": "Typography", + "link": { + "type": "generated-index", + "description": "Typography (including headings, paragraph, and other text types) examples and documentation. These components don’t have any special props, and inherit their native HTML attributes." + } +} diff --git a/@stellar/design-system-website/docs/foundations/typography/caption.mdx b/@stellar/design-system-website/docs/foundations/typography/caption.mdx new file mode 100644 index 00000000..aecda01e --- /dev/null +++ b/@stellar/design-system-website/docs/foundations/typography/caption.mdx @@ -0,0 +1,20 @@ +--- +slug: /caption +description: "Text for single-line scenarios." +--- + +# Caption + + + +## Example + +```tsx live + + + +``` + +## Props + + diff --git a/@stellar/design-system-website/docs/foundations/typography/heading.mdx b/@stellar/design-system-website/docs/foundations/typography/heading.mdx new file mode 100644 index 00000000..b1efef6c --- /dev/null +++ b/@stellar/design-system-website/docs/foundations/typography/heading.mdx @@ -0,0 +1,22 @@ +--- +slug: /heading +description: "HTML headings h1 through h6." +--- + +# Heading + + + +## Example + +```tsx live + + + Heading + + +``` + +## Props + + diff --git a/@stellar/design-system-website/docs/foundations/typography/paragraph.mdx b/@stellar/design-system-website/docs/foundations/typography/paragraph.mdx new file mode 100644 index 00000000..bb19ed9e --- /dev/null +++ b/@stellar/design-system-website/docs/foundations/typography/paragraph.mdx @@ -0,0 +1,20 @@ +--- +slug: /paragraph +description: "Text paragraph is an HTML p tag, not a custom component." +--- + +# Paragraph + + + +## Example + +```tsx live + + Paragraph + +``` + +## Props + + diff --git a/@stellar/design-system-website/docs/foundations/typography/title.mdx b/@stellar/design-system-website/docs/foundations/typography/title.mdx new file mode 100644 index 00000000..c653fc6d --- /dev/null +++ b/@stellar/design-system-website/docs/foundations/typography/title.mdx @@ -0,0 +1,20 @@ +--- +slug: /title +description: "Non-semantic heading (banner title, navigation item, label)." +--- + +# Title + + + +## Example + +```tsx live + + Title + +``` + +## Props + + diff --git a/@stellar/design-system-website/docs/get-started/_category_.json b/@stellar/design-system-website/docs/get-started/_category_.json new file mode 100644 index 00000000..1bf165d4 --- /dev/null +++ b/@stellar/design-system-website/docs/get-started/_category_.json @@ -0,0 +1,4 @@ +{ + "label": "Get Started", + "position": 1 +} diff --git a/@stellar/design-system-website/docs/get-started/introduction.mdx b/@stellar/design-system-website/docs/get-started/introduction.mdx new file mode 100644 index 00000000..7da8c5dd --- /dev/null +++ b/@stellar/design-system-website/docs/get-started/introduction.mdx @@ -0,0 +1,112 @@ +--- +slug: / +sidebar_position: 1 +--- + +# Introduction + +Stellar Design System (SDS) is an opinionated React component library (we hope +it will grow into a full-featured design system in the future) used in the Stellar +Development Foundation’s web projects. It's meant to be used internally to keep +our web products consistent. + +## Current version + + + npm version + + +## Tech stack + +- TypeScript +- React for UI +- Sass for CSS styling +- Yarn +- Webpack + +## Get started + +Install SDS by using the package manager of your choice. + +```bash npm2yarn +npm install @stellar/design-system +``` + +Add Google Fonts (`Inter Tight`, `Inter`, and `Roboto Mono`) to the `index.html` +file. + +```html + + + +``` + +Add the main CSS file to your project (for example, the main `index` file of +your React project). + +```javascript +import "@stellar/design-system/build/styles.min.css"; +``` + +Import components in your project. + +```javascript +import { Button, Input } from "@stellar/design-system"; +``` + +## Local development + +The design system repo has two parts: + +- `@stellar/design-system` - everything for the design system + ([repo](https://github.com/stellar/stellar-design-system/tree/main/%40stellar/design-system)) +- `@stellar/design-system-website` - website for the design system (what you are + looking at now) + ([repo](https://github.com/stellar/stellar-design-system/tree/main/%40stellar/design-system-website)) + +To run Stellar Design System locally: + +- Clone the repo + +```bash +git clone git@github.com:stellar/stellar-design-system.git +``` + +- Install dependencies + +```bash npm2yarn +npm install +``` + +### Scripts to develop and build locally + +- `build:sds` - build Stellar Design System (sds) project only +- `build:sds-web` - build Stellar Design System website (sds-web) project only +- `build` - build both projects +- `start:sds` - start sds project for local development +- `start:sds-web` - start sds-web project for local development +- `clean` - delete node_modules and build directories in the whole repo + +:::info + +You need to run each `start` command in its own window or tab. + +::: + +## Developer notes + +- Use the Stellar Design System components "as is", don’t modify existing ones to fit + your needs if the component doesn’t allow it. +- If a component doesn’t exist, it’s okay to create it locally for your project + (we’ll keep adding more components to SDS as we go). +- If you are creating a component locally, use only color variables available in + the SDS palette (in `theme.scss`). This is very important for the light and + dark modes to work. When in doubt, please check with the Design team. +- `styled-components` are not currently supported, but you can use them as + wrappers/containers for SDS components. diff --git a/@stellar/design-system-website/docusaurus.config.js b/@stellar/design-system-website/docusaurus.config.js new file mode 100644 index 00000000..dc12ce9a --- /dev/null +++ b/@stellar/design-system-website/docusaurus.config.js @@ -0,0 +1,85 @@ +// @ts-check +// Note: type annotations allow type checking and IDEs autocompletion + +const lightCodeTheme = require("prism-react-renderer/themes/github"); +const darkCodeTheme = require("prism-react-renderer/themes/dracula"); + +/** @type {import('@docusaurus/types').Config} */ +const config = { + title: "Design System", + tagline: "", + favicon: "img/favicon.ico", + + // Set the production url of your site here + url: "https://design-system.stellar.org", + // Set the // pathname under which your site is served + // For GitHub pages deployment, it is often '//' + baseUrl: "/", + + // GitHub pages deployment config. + // If you aren't using GitHub pages, you don't need these. + organizationName: "stellar", // Usually your GitHub org/user name. + projectName: "stellar-design-system", // Usually your repo name. + + onBrokenLinks: "throw", + onBrokenMarkdownLinks: "warn", + + // Even if you don't use internalization, you can use this field to set useful + // metadata like html lang. For example, if your site is Chinese, you may want + // to replace "en" with "zh-Hans". + i18n: { + defaultLocale: "en", + locales: ["en"], + }, + + presets: [ + [ + "classic", + { + docs: { + routeBasePath: "/", + sidebarPath: require.resolve("./sidebars.js"), + remarkPlugins: [ + [require("@docusaurus/remark-plugin-npm2yarn"), { sync: true }], + ], + // Please change this to your repo. + // Remove this to remove the "edit this page" links. + // TODO: update repo + // editUrl: + // "https://github.com/facebook/docusaurus/tree/main/packages/create-docusaurus/templates/shared/", + }, + theme: { + customCss: require.resolve("./src/css/custom.css"), + }, + }, + ], + ], + + plugins: ["@docusaurus/theme-live-codeblock"], + + themeConfig: + /** @type {import('@docusaurus/preset-classic').ThemeConfig} */ + ({ + image: "img/sds-v2-social-card.png", + navbar: { + title: "Design System", + logo: { + alt: "Stellar logo", + src: "img/stellar.svg", + }, + items: [ + { + href: "https://github.com/stellar/stellar-design-system", + label: "GitHub", + position: "right", + }, + ], + }, + prism: { + theme: lightCodeTheme, + darkTheme: darkCodeTheme, + }, + }), +}; + +module.exports = config; diff --git a/@stellar/design-system-website/package.json b/@stellar/design-system-website/package.json old mode 100755 new mode 100644 index 0142201b..a60f4937 --- a/@stellar/design-system-website/package.json +++ b/@stellar/design-system-website/package.json @@ -4,88 +4,52 @@ "author": "Stellar Development Foundation ", "description": "Stellar Development Foundation’s design system website", "license": "Apache-2.0", - "engines": { - "node": ">=18.0.0" - }, "scripts": { - "git-info": "rm -rf src/generated/ && mkdir src/generated/ && echo export default \"{\\\"commitHash\\\": \\\"$(git rev-parse --short HEAD)\\\"};\" > src/generated/gitInfo.ts", - "start": "yarn git-info && webpack serve --open --config webpack.dev.js", - "build": "yarn git-info && NODE_ENV=production webpack --config webpack.prod.js", - "test": "react-scripts test", - "eject": "react-scripts eject", - "lint-tsc": "tsc --noEmit" + "docusaurus": "docusaurus", + "start": "docusaurus start", + "build": "docusaurus build", + "swizzle": "docusaurus swizzle", + "deploy": "docusaurus deploy", + "clear": "docusaurus clear", + "serve": "docusaurus serve", + "write-translations": "docusaurus write-translations", + "write-heading-ids": "docusaurus write-heading-ids", + "lint-tsc": "tsc --noEmit --moduleResolution node", + "git-info": "rm -rf src/generated/ && mkdir src/generated/ && echo export default \"{\\\"commitHash\\\": \\\"$(git rev-parse --short HEAD)\\\"};\" > src/generated/gitInfo.ts" }, "dependencies": { - "@stellar/design-system": "^1.0.0-beta.14", - "@svgr/webpack": "^6.5.1", - "assert": "^2.0.0", - "buffer": "^6.0.3", - "crypto-browserify": "^3.12.0", - "https-browserify": "^1.0.0", - "lodash": "^4.17.21", - "os-browserify": "^0.3.0", + "@docusaurus/core": "2.4.1", + "@docusaurus/preset-classic": "2.4.1", + "@docusaurus/remark-plugin-npm2yarn": "^2.4.3", + "@docusaurus/theme-live-codeblock": "^2.4.1", + "@mdx-js/react": "^1.6.22", + "@stellar/design-system": "^1.0.0", + "clsx": "^1.2.1", "prism-react-renderer": "^1.3.5", - "react": "^18.2.0", - "react-dom": "^18.2.0", + "react": "^17.0.2", + "react-dom": "^17.0.2", "react-element-to-jsx-string": "^15.0.0", - "react-router-dom": "^6.8.0", - "stream-browserify": "^3.0.0", - "stream-http": "^3.2.0", - "tslib": "^2.5.0", - "typescript": "~4.9.5", - "url": "^0.11.0" + "rehype-parse": "^8.0.4", + "rehype-react": "^7.2.0", + "rehype-sanitize": "^5.0.1", + "unified": "^10.1.2" }, "devDependencies": { - "@babel/core": "^7.20.12", - "@babel/preset-env": "^7.20.2", - "@babel/preset-react": "^7.18.6", - "@babel/preset-typescript": "^7.18.6", - "@testing-library/jest-dom": "^5.16.5", - "@testing-library/react": "^13.4.0", - "@testing-library/user-event": "^14.4.3", - "@types/jest": "^29.4.0", - "@types/lodash": "^4.14.191", - "@types/node": "^18.11.18", - "@types/react": "^18.0.27", - "@types/react-dom": "^18.0.10", - "@types/react-router-dom": "^5.3.3", - "babel-loader": "^9.1.2", - "babel-plugin-transform-class-properties": "^6.24.1", - "babel-plugin-transform-es2015-modules-commonjs": "^6.26.2", - "clean-webpack-plugin": "^4.0.0", - "concurrently": "^7.6.0", - "copy-webpack-plugin": "^11.0.0", - "css-loader": "^6.7.3", - "eslint": "^8.33.0", - "eslint-config-prettier": "^8.6.0", - "eslint-config-react": "^1.1.7", - "eslint-config-react-app": "^7.0.1", - "eslint-import-resolver-typescript": "^3.5.3", + "@docusaurus/module-type-aliases": "2.4.1", + "@tsconfig/docusaurus": "^1.0.5", + "eslint": "^8.44.0", + "eslint-config-prettier": "^8.8.0", "eslint-plugin-import": "^2.27.5", "eslint-plugin-jsx-a11y": "^6.7.1", + "eslint-plugin-mdx": "^2.1.0", "eslint-plugin-react": "^7.32.2", "eslint-plugin-react-hooks": "^4.6.0", - "eslint-webpack-plugin": "^3.2.0", - "fork-ts-checker-webpack-plugin": "^7.3.0", - "html-webpack-plugin": "^5.5.0", - "husky": "^8.0.3", - "lint-staged": "^13.1.0", - "mini-css-extract-plugin": "^2.7.2", - "npm-run-all": "^4.1.5", - "prettier": "^2.8.3", - "pretty-quick": "^3.1.3", - "react-hot-loader": "^4.13.1", - "sass-loader": "^13.2.0", - "style-loader": "^3.3.1", - "ts-loader": "^9.4.2", - "tsconfig-paths-webpack-plugin": "^4.0.0", - "webpack": "^5.75.0", - "webpack-cli": "^5.0.1", - "webpack-dev-server": "^4.11.1" + "eslint-webpack-plugin": "^4.0.1", + "typescript": "^4.7.4" }, "browserslist": { "production": [ - ">0.2%", + ">0.5%", "not dead", "not op_mini all" ], @@ -94,5 +58,8 @@ "last 1 firefox version", "last 1 safari version" ] + }, + "engines": { + "node": ">=18.0.0" } } diff --git a/@stellar/design-system-website/public/logo192.png b/@stellar/design-system-website/public/logo192.png deleted file mode 100644 index 476ff8d02ec31c87b274f5e06efa3d8df9d56b9e..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 3843 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 bHzj~oZVvw)4Y`!F6o8(#k=APs`-uMm+|?z~ diff --git a/@stellar/design-system-website/public/logo512.png b/@stellar/design-system-website/public/logo512.png deleted file mode 100644 index 41427a2f0ee6dae7d1a19bde8b4699badc7022e9..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 11240 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 XUl6;W%L%0-RRF4rnhKS2AA|o7lzflw diff --git a/@stellar/design-system-website/public/manifest.json b/@stellar/design-system-website/public/manifest.json deleted file mode 100644 index de1f080f..00000000 --- a/@stellar/design-system-website/public/manifest.json +++ /dev/null @@ -1,25 +0,0 @@ -{ - "short_name": "Design System", - "name": "Stellar Design System", - "icons": [ - { - "src": "favicon.ico", - "sizes": "64x64 32x32 24x24 16x16", - "type": "image/x-icon" - }, - { - "src": "logo192.png", - "type": "image/png", - "sizes": "192x192" - }, - { - "src": "logo512.png", - "type": "image/png", - "sizes": "512x512" - } - ], - "start_url": ".", - "display": "standalone", - "theme_color": "#000000", - "background_color": "#ffffff" -} diff --git a/@stellar/design-system-website/public/robots.txt b/@stellar/design-system-website/public/robots.txt deleted file mode 100644 index e9e57dc4..00000000 --- a/@stellar/design-system-website/public/robots.txt +++ /dev/null @@ -1,3 +0,0 @@ -# https://www.robotstxt.org/robotstxt.html -User-agent: * -Disallow: diff --git a/@stellar/design-system-website/sidebars.js b/@stellar/design-system-website/sidebars.js new file mode 100644 index 00000000..8f1e3da2 --- /dev/null +++ b/@stellar/design-system-website/sidebars.js @@ -0,0 +1,33 @@ +/** + * Creating a sidebar enables you to: + - create an ordered group of docs + - render a sidebar for each doc of that group + - provide next/previous navigation + + The sidebars can be generated from the filesystem, or explicitly defined here. + + Create as many sidebars as you want. + */ + +// @ts-check + +/** @type {import('@docusaurus/plugin-content-docs').SidebarsConfig} */ +const sidebars = { + // By default, Docusaurus generates a sidebar from the docs folder structure + tutorialSidebar: [{ type: "autogenerated", dirName: "." }], + + // But you can create a sidebar manually + /* + tutorialSidebar: [ + 'intro', + 'hello', + { + type: 'category', + label: 'Tutorial', + items: ['tutorial-basics/create-a-document'], + }, + ], + */ +}; + +module.exports = sidebars; diff --git a/@stellar/design-system-website/src/App.tsx b/@stellar/design-system-website/src/App.tsx deleted file mode 100644 index 3d703321..00000000 --- a/@stellar/design-system-website/src/App.tsx +++ /dev/null @@ -1,114 +0,0 @@ -import { useMemo, useState, useLayoutEffect, useEffect } from "react"; -import { Routes, Route } from "react-router-dom"; -import { Layout } from "@stellar/design-system"; - -import { Landing } from "pages/Landing"; -import { ComponentDetails } from "pages/ComponentDetails"; -import { SideNavContext } from "context/SideNav"; -import { - BREAKPOINT_SMALL, - CSS_CLASS_SMALL_SCREEN, - CSS_CLASS_SIDE_NAV_OPEN_TRIGGER, - CSS_CLASS_SIDE_NAV_OPEN, - CSS_CLASS_DISABLE_BODY_SCROLL, -} from "constants/variables"; - -import "styles.scss"; - -export const App = () => { - const [sideNavState, setSideNavState] = useState({ - isEnabled: false, - isOpen: false, - }); - const sideNavStateValue = useMemo( - () => ({ sideNavState, setSideNavState }), - [sideNavState, setSideNavState], - ); - - // Handle media query for small/large page UI - useLayoutEffect(() => { - const mediaQuery = window.matchMedia(`(max-width: ${BREAKPOINT_SMALL}px)`); - - const handleMediaQuery = () => { - if (mediaQuery.matches) { - document.body.classList.add(CSS_CLASS_SMALL_SCREEN); - } else { - document.body.classList.remove( - CSS_CLASS_SMALL_SCREEN, - CSS_CLASS_SIDE_NAV_OPEN_TRIGGER, - CSS_CLASS_SIDE_NAV_OPEN, - CSS_CLASS_DISABLE_BODY_SCROLL, - ); - } - }; - - handleMediaQuery(); - mediaQuery.addEventListener("change", handleMediaQuery); - - return () => { - mediaQuery.removeEventListener("change", handleMediaQuery); - }; - }, []); - - // Handle SideNav open/close state - useEffect(() => { - if (sideNavState.isOpen) { - document.body.classList.add( - CSS_CLASS_SIDE_NAV_OPEN_TRIGGER, - CSS_CLASS_SIDE_NAV_OPEN, - CSS_CLASS_DISABLE_BODY_SCROLL, - ); - } else { - document.body.classList.remove( - CSS_CLASS_SIDE_NAV_OPEN, - CSS_CLASS_DISABLE_BODY_SCROLL, - ); - - const delay = setTimeout(() => { - document.body.classList.remove(CSS_CLASS_SIDE_NAV_OPEN_TRIGGER); - clearTimeout(delay); - }, 300); - } - }, [sideNavState.isOpen]); - - const toggleSideNav = (isOpen: boolean) => { - setSideNavState({ - isEnabled: sideNavState.isEnabled, - isOpen, - }); - }; - - return ( - - toggleSideNav(true), - }} - /> - - - - } /> - - - } - /> - - {/* TODO: add 404 */} - - - - - - ); -}; diff --git a/@stellar/design-system-website/src/componentPreview/assetIconPreview.tsx b/@stellar/design-system-website/src/componentPreview/assetIconPreview.tsx new file mode 100644 index 00000000..ce47e8a3 --- /dev/null +++ b/@stellar/design-system-website/src/componentPreview/assetIconPreview.tsx @@ -0,0 +1,31 @@ +import { ComponentPreview } from "@site/src/components/PreviewBlock"; + +export const assetIconPreview: ComponentPreview = { + options: [ + { + type: "select", + prop: "source", + customValue: [ + { + altText: "XLM", + image: "https://cryptologos.cc/logos/stellar-xlm-logo.svg?v=024", + imageSize: "80%", + }, + { + altText: "USDC", + image: "https://cryptologos.cc/logos/usd-coin-usdc-logo.svg?v=024", + }, + ], + options: [ + { + value: "", + label: "Single", + }, + { + value: "pair", + label: "Pair", + }, + ], + }, + ], +}; diff --git a/@stellar/design-system-website/src/componentPreview/avatarPreview.tsx b/@stellar/design-system-website/src/componentPreview/avatarPreview.tsx new file mode 100644 index 00000000..7ada7139 --- /dev/null +++ b/@stellar/design-system-website/src/componentPreview/avatarPreview.tsx @@ -0,0 +1,5 @@ +import { ComponentPreview } from "@site/src/components/PreviewBlock"; + +export const avatarPreview: ComponentPreview = { + options: [], +}; diff --git a/@stellar/design-system-website/src/componentPreview/badgePreview.tsx b/@stellar/design-system-website/src/componentPreview/badgePreview.tsx new file mode 100644 index 00000000..f7bdcc4f --- /dev/null +++ b/@stellar/design-system-website/src/componentPreview/badgePreview.tsx @@ -0,0 +1,32 @@ +import { ComponentPreview } from "@site/src/components/PreviewBlock"; + +export const badgePreview: ComponentPreview = { + options: [ + { + type: "select", + prop: "variant", + options: [ + { + value: "default", + label: "Default", + }, + { + value: "success", + label: "Success", + }, + { + value: "warning", + label: "Warning", + }, + { + value: "pending", + label: "Pending", + }, + { + value: "error", + label: "Error", + }, + ], + }, + ], +}; diff --git a/@stellar/design-system-website/src/componentPreview/bannerPreview.tsx b/@stellar/design-system-website/src/componentPreview/bannerPreview.tsx new file mode 100644 index 00000000..50eb8f7e --- /dev/null +++ b/@stellar/design-system-website/src/componentPreview/bannerPreview.tsx @@ -0,0 +1,32 @@ +import { ComponentPreview } from "@site/src/components/PreviewBlock"; + +export const bannerPreview: ComponentPreview = { + options: [ + { + type: "select", + prop: "variant", + options: [ + { + value: "default", + label: "Default", + }, + { + value: "primary", + label: "Primary", + }, + { + value: "success", + label: "Success", + }, + { + value: "error", + label: "Error", + }, + { + value: "warning", + label: "Warning", + }, + ], + }, + ], +}; diff --git a/@stellar/design-system-website/src/componentPreview/buttonPresetPreview.tsx b/@stellar/design-system-website/src/componentPreview/buttonPresetPreview.tsx new file mode 100644 index 00000000..28f6f574 --- /dev/null +++ b/@stellar/design-system-website/src/componentPreview/buttonPresetPreview.tsx @@ -0,0 +1,89 @@ +import { ComponentPreview } from "@site/src/components/PreviewBlock"; + +export const buttonPresetPreview: ComponentPreview = { + options: [ + { + type: "checkbox", + prop: "disabled", + label: "Disabled", + }, + { + type: "select", + prop: "preset", + options: [ + { + value: "copy", + label: "Copy", + }, + { + value: "download", + label: "Download", + }, + ], + }, + { + type: "select", + prop: "variant", + options: [ + { + value: "default", + label: "Default", + }, + { + value: "highlight", + label: "Highlight", + }, + ], + }, + { + type: "select", + prop: "label", + options: [ + { + value: "", + label: "Default label", + }, + { + value: "Label", + label: "Custom label", + }, + ], + }, + { + type: "select", + prop: "customSize", + options: [ + { + value: "", + label: "Default size", + }, + { + value: "2rem", + label: "2 rem", + }, + { + value: "3rem", + label: "3 rem", + }, + ], + }, + { + type: "select", + prop: "customColor", + options: [ + { + value: "", + label: "Default color", + }, + { + value: "var(--color-green-50)", + label: "Green", + }, + { + value: "var(--color-yellow-50)", + label: "Yellow", + }, + ], + }, + ], +}; diff --git a/@stellar/design-system-website/src/componentPreview/buttonPreview.tsx b/@stellar/design-system-website/src/componentPreview/buttonPreview.tsx new file mode 100644 index 00000000..a8e9d023 --- /dev/null +++ b/@stellar/design-system-website/src/componentPreview/buttonPreview.tsx @@ -0,0 +1,106 @@ +import React from "react"; +import { ComponentPreview } from "@site/src/components/PreviewBlock"; +import CheckIconSvg from "@site/static/img/check-icon.svg"; + +export const buttonPreview: ComponentPreview = { + options: [ + { + type: "select", + prop: "variant", + options: [ + { + value: "primary", + label: "Primary", + }, + { + value: "secondary", + label: "Secondary", + }, + { + value: "tertiary", + label: "Tertiary", + }, + { + value: "destructive", + label: "Destructive", + }, + { + value: "error", + label: "Error", + }, + { + value: "success", + label: "Success", + }, + ], + }, + { + type: "select", + prop: "size", + options: [ + { + value: "md", + label: "MD", + }, + { + value: "sm", + label: "SM", + }, + { + value: "xs", + label: "XS", + }, + ], + }, + { + type: "checkbox", + prop: "disabled", + label: "Disabled", + }, + { + type: "checkbox", + prop: "isExtraPadding", + label: "Extra padding", + }, + { + type: "checkbox", + prop: "isFullWidth", + label: "Full width", + }, + { + type: "checkbox", + prop: "isLoading", + label: "Loading", + }, + { + type: "checkbox", + prop: "isPill", + label: "Pill", + }, + { + type: "checkbox", + prop: "isUppercase", + label: "Uppercase", + }, + { + type: "select", + prop: "icon", + customValue: , + clearProp: "iconPosition", + options: [ + { + value: "", + label: "No icon", + }, + { + value: '{"iconPosition": "right"}', + label: "Icon right", + }, + { + value: '{"iconPosition": "left"}', + label: "Icon left", + }, + ], + }, + ], +}; diff --git a/@stellar/design-system-website/src/componentPreview/captionPreview.tsx b/@stellar/design-system-website/src/componentPreview/captionPreview.tsx new file mode 100644 index 00000000..0882a4be --- /dev/null +++ b/@stellar/design-system-website/src/componentPreview/captionPreview.tsx @@ -0,0 +1,28 @@ +import { ComponentPreview } from "@site/src/components/PreviewBlock"; + +export const captionPreview: ComponentPreview = { + options: [ + { + type: "select", + prop: "size", + options: [ + { + value: "xs", + label: "XS", + }, + { + value: "sm", + label: "SM", + }, + { + value: "md", + label: "MD", + }, + { + value: "lg", + label: "LG", + }, + ], + }, + ], +}; diff --git a/@stellar/design-system-website/src/componentPreview/cardPreview.tsx b/@stellar/design-system-website/src/componentPreview/cardPreview.tsx new file mode 100644 index 00000000..aedc7283 --- /dev/null +++ b/@stellar/design-system-website/src/componentPreview/cardPreview.tsx @@ -0,0 +1,39 @@ +import { ComponentPreview } from "@site/src/components/PreviewBlock"; + +export const cardPreview: ComponentPreview = { + options: [ + { + type: "select", + prop: "variant", + options: [ + { + value: "primary", + label: "Primary", + }, + { + value: "secondary", + label: "Secondary", + }, + ], + }, + { + type: "select", + prop: "borderRadiusSize", + options: [ + { + value: "md", + label: "Medium radius", + }, + { + value: "sm", + label: "Small radius", + }, + ], + }, + { + type: "checkbox", + prop: "noPadding", + label: "No padding", + }, + ], +}; diff --git a/@stellar/design-system-website/src/componentPreview/checkboxPreview.tsx b/@stellar/design-system-website/src/componentPreview/checkboxPreview.tsx new file mode 100644 index 00000000..341a3d8b --- /dev/null +++ b/@stellar/design-system-website/src/componentPreview/checkboxPreview.tsx @@ -0,0 +1,79 @@ +import { ComponentPreview } from "@site/src/components/PreviewBlock"; + +export const checkboxPreview: ComponentPreview = { + options: [ + { + type: "select", + prop: "label", + customValue: "Label", + options: [ + { + value: "", + label: "No label", + }, + { + value: "label", + label: "Label", + }, + ], + }, + { + type: "select", + prop: "fieldSize", + options: [ + { + value: "md", + label: "MD", + }, + { + value: "sm", + label: "SM", + }, + { + value: "xs", + label: "XS", + }, + ], + }, + { + type: "checkbox", + prop: "disabled", + label: "Disabled", + }, + { + type: "checkbox", + prop: "isError", + label: "Error", + }, + { + type: "select", + prop: "note", + customValue: "Note message", + options: [ + { + value: "", + label: "No note", + }, + { + value: "note", + label: "Note", + }, + ], + }, + { + type: "select", + prop: "error", + customValue: "Error message", + options: [ + { + value: "", + label: "No error", + }, + { + value: "error", + label: "Error", + }, + ], + }, + ], +}; diff --git a/@stellar/design-system-website/src/componentPreview/copyTextPreview.tsx b/@stellar/design-system-website/src/componentPreview/copyTextPreview.tsx new file mode 100644 index 00000000..06cde012 --- /dev/null +++ b/@stellar/design-system-website/src/componentPreview/copyTextPreview.tsx @@ -0,0 +1,5 @@ +import { ComponentPreview } from "@site/src/components/PreviewBlock"; + +export const copyTextPreview: ComponentPreview = { + options: [], +}; diff --git a/@stellar/design-system-website/src/componentPreview/headingPreview.tsx b/@stellar/design-system-website/src/componentPreview/headingPreview.tsx new file mode 100644 index 00000000..e2b787a9 --- /dev/null +++ b/@stellar/design-system-website/src/componentPreview/headingPreview.tsx @@ -0,0 +1,66 @@ +import { ComponentPreview } from "@site/src/components/PreviewBlock"; + +export const headingPreview: ComponentPreview = { + options: [ + { + type: "select", + prop: "as", + options: [ + { + value: "h1", + label: "h1", + }, + { + value: "h2", + label: "h2", + }, + { + value: "h3", + label: "h3", + }, + { + value: "h4", + label: "h4", + }, + { + value: "h5", + label: "h5", + }, + { + value: "h6", + label: "h6", + }, + ], + }, + { + type: "select", + prop: "size", + options: [ + { + value: "xs", + label: "XS", + }, + { + value: "sm", + label: "SM", + }, + { + value: "md", + label: "MD", + }, + { + value: "lg", + label: "LG", + }, + { + value: "xl", + label: "XL", + }, + { + value: "xxl", + label: "XXL", + }, + ], + }, + ], +}; diff --git a/@stellar/design-system-website/src/componentPreview/iconButtonPreview.tsx b/@stellar/design-system-website/src/componentPreview/iconButtonPreview.tsx new file mode 100644 index 00000000..d4f7248f --- /dev/null +++ b/@stellar/design-system-website/src/componentPreview/iconButtonPreview.tsx @@ -0,0 +1,87 @@ +import { ComponentPreview } from "@site/src/components/PreviewBlock"; + +export const iconButtonPreview: ComponentPreview = { + options: [ + { + type: "checkbox", + prop: "disabled", + label: "Disabled", + }, + { + type: "select", + prop: "variant", + options: [ + { + value: "default", + label: "Default", + }, + { + value: "error", + label: "Error", + }, + { + value: "success", + label: "Success", + }, + { + value: "warning", + label: "Warning", + }, + { + value: "highlight", + label: "Highlight", + }, + ], + }, + { + type: "select", + prop: "label", + options: [ + { + value: "", + label: "No label", + }, + { + value: "Label", + label: "Label", + }, + ], + }, + { + type: "select", + prop: "customSize", + options: [ + { + value: "", + label: "Default size", + }, + { + value: "2rem", + label: "2 rem", + }, + { + value: "3rem", + label: "3 rem", + }, + ], + }, + { + type: "select", + prop: "customColor", + options: [ + { + value: "", + label: "Default color", + }, + { + value: "var(--color-purple-50)", + label: "Purple", + }, + { + value: "var(--color-yellow-50)", + label: "Yellow", + }, + ], + }, + ], +}; diff --git a/@stellar/design-system-website/src/componentPreview/inputPreview.tsx b/@stellar/design-system-website/src/componentPreview/inputPreview.tsx new file mode 100644 index 00000000..1b03f732 --- /dev/null +++ b/@stellar/design-system-website/src/componentPreview/inputPreview.tsx @@ -0,0 +1,131 @@ +import React from "react"; +import { ComponentPreview } from "@site/src/components/PreviewBlock"; +import CheckIconSvg from "@site/static/img/check-icon.svg"; + +export const inputPreview: ComponentPreview = { + options: [ + { + type: "select", + prop: "label", + customValue: "Label", + options: [ + { + value: "", + label: "No label", + }, + { + value: "label", + label: "Label", + }, + ], + }, + { + type: "select", + prop: "placeholder", + customValue: "Placeholder", + options: [ + { + value: "", + label: "No placeholder", + }, + { + value: "placeholder", + label: "Placeholder", + }, + ], + }, + { + type: "select", + prop: "fieldSize", + options: [ + { + value: "md", + label: "MD", + }, + { + value: "sm", + label: "SM", + }, + { + value: "xs", + label: "XS", + }, + ], + }, + { + type: "checkbox", + prop: "disabled", + label: "Disabled", + }, + { + type: "checkbox", + prop: "isLabelUppercase", + label: "Uppercase label", + }, + { + type: "checkbox", + prop: "isPill", + label: "Pill", + }, + { + type: "checkbox", + prop: "isError", + label: "Error", + }, + { + type: "checkbox", + prop: "isExtraPadding", + label: "Extra padding", + }, + { + type: "checkbox", + prop: "isPassword", + label: "Password", + }, + { + type: "select", + prop: "rightElement", + customValue: , + options: [ + { + value: "", + label: "No element", + }, + { + value: "element", + label: "Element", + }, + ], + }, + { + type: "select", + prop: "note", + customValue: "Note message", + options: [ + { + value: "", + label: "No note", + }, + { + value: "note", + label: "Note", + }, + ], + }, + { + type: "select", + prop: "error", + customValue: "Error message", + options: [ + { + value: "", + label: "No error", + }, + { + value: "error", + label: "Error", + }, + ], + }, + ], +}; diff --git a/@stellar/design-system-website/src/componentPreview/layoutPreview.tsx b/@stellar/design-system-website/src/componentPreview/layoutPreview.tsx new file mode 100644 index 00000000..126598a7 --- /dev/null +++ b/@stellar/design-system-website/src/componentPreview/layoutPreview.tsx @@ -0,0 +1,5 @@ +import { ComponentPreview } from "@site/src/components/PreviewBlock"; + +export const layoutPreview: ComponentPreview = { + options: [], +}; diff --git a/@stellar/design-system-website/src/componentPreview/linkPreview.tsx b/@stellar/design-system-website/src/componentPreview/linkPreview.tsx new file mode 100644 index 00000000..d50e35c0 --- /dev/null +++ b/@stellar/design-system-website/src/componentPreview/linkPreview.tsx @@ -0,0 +1,79 @@ +import React from "react"; +import { ComponentPreview } from "@site/src/components/PreviewBlock"; +import CheckIconSvg from "@site/static/img/check-icon.svg"; + +export const linkPreview: ComponentPreview = { + options: [ + { + type: "select", + prop: "variant", + options: [ + { + value: "primary", + label: "Primary", + }, + { + value: "secondary", + label: "Secondary", + }, + ], + }, + { + type: "select", + prop: "size", + options: [ + { + value: "md", + label: "MD", + }, + { + value: "sm", + label: "SM", + }, + { + value: "xs", + label: "XS", + }, + { + value: "", + label: "Inherit", + }, + ], + }, + { + type: "checkbox", + prop: "isDisabled", + label: "Disabled", + }, + { + type: "checkbox", + prop: "isUnderline", + label: "Underline", + }, + { + type: "checkbox", + prop: "isUppercase", + label: "Uppercase", + }, + { + type: "select", + prop: "icon", + customValue: , + clearProp: "iconPosition", + options: [ + { + value: "", + label: "No icon", + }, + { + value: '{"iconPosition": "right"}', + label: "Icon right", + }, + { + value: '{"iconPosition": "left"}', + label: "Icon left", + }, + ], + }, + ], +}; diff --git a/@stellar/design-system-website/src/componentPreview/loaderPreview.tsx b/@stellar/design-system-website/src/componentPreview/loaderPreview.tsx new file mode 100644 index 00000000..48469188 --- /dev/null +++ b/@stellar/design-system-website/src/componentPreview/loaderPreview.tsx @@ -0,0 +1,24 @@ +import { ComponentPreview } from "@site/src/components/PreviewBlock"; + +export const loaderPreview: ComponentPreview = { + options: [ + { + type: "select", + prop: "size", + options: [ + { + value: "", + label: "Default size", + }, + { + value: "2rem", + label: "2 rem", + }, + { + value: "3rem", + label: "3 rem", + }, + ], + }, + ], +}; diff --git a/@stellar/design-system-website/src/componentPreview/modalPreview.tsx b/@stellar/design-system-website/src/componentPreview/modalPreview.tsx new file mode 100644 index 00000000..ab041db8 --- /dev/null +++ b/@stellar/design-system-website/src/componentPreview/modalPreview.tsx @@ -0,0 +1,5 @@ +import { ComponentPreview } from "@site/src/components/PreviewBlock"; + +export const modalPreview: ComponentPreview = { + options: [], +}; diff --git a/@stellar/design-system-website/src/componentPreview/navButtonPreview.tsx b/@stellar/design-system-website/src/componentPreview/navButtonPreview.tsx new file mode 100644 index 00000000..2dc371cd --- /dev/null +++ b/@stellar/design-system-website/src/componentPreview/navButtonPreview.tsx @@ -0,0 +1,16 @@ +import { ComponentPreview } from "@site/src/components/PreviewBlock"; + +export const navButtonPreview: ComponentPreview = { + options: [ + { + type: "checkbox", + prop: "disabled", + label: "Disabled", + }, + { + type: "checkbox", + prop: "showBorder", + label: "Show border", + }, + ], +}; diff --git a/@stellar/design-system-website/src/componentPreview/notificationPreview .tsx b/@stellar/design-system-website/src/componentPreview/notificationPreview .tsx new file mode 100644 index 00000000..b30b3062 --- /dev/null +++ b/@stellar/design-system-website/src/componentPreview/notificationPreview .tsx @@ -0,0 +1,65 @@ +import React from "react"; +import { ComponentPreview } from "@site/src/components/PreviewBlock"; +import CheckIconSvg from "@site/static/img/check-icon.svg"; + +export const notificationPreview: ComponentPreview = { + options: [ + { + type: "select", + prop: "variant", + options: [ + { + value: "primary", + label: "Primary", + }, + { + value: "secondary", + label: "Secondary", + }, + { + value: "success", + label: "Success", + }, + { + value: "error", + label: "Error", + }, + { + value: "warning", + label: "Warning", + }, + ], + }, + { + type: "select", + prop: "icon", + customValue: , + options: [ + { + value: "", + label: "Default icon", + }, + { + value: "customIcon", + label: "Custom icon", + }, + ], + }, + { + type: "select", + prop: "children", + customValue: + "Lorem ipsum dolor sit amet consectetur, adipisicing elit. Tenetur asperiores autem excepturi doloremque esse, dicta sunt soluta! Quia quis eos beatae et optio facere voluptatum. Labore illum molestiae corporis id?", + options: [ + { + value: "", + label: "No message", + }, + { + value: "Message", + label: "Message", + }, + ], + }, + ], +}; diff --git a/@stellar/design-system-website/src/componentPreview/paginationPreview.tsx b/@stellar/design-system-website/src/componentPreview/paginationPreview.tsx new file mode 100644 index 00000000..8ae9fac3 --- /dev/null +++ b/@stellar/design-system-website/src/componentPreview/paginationPreview.tsx @@ -0,0 +1,5 @@ +import { ComponentPreview } from "@site/src/components/PreviewBlock"; + +export const paginationPreview: ComponentPreview = { + options: [], +}; diff --git a/@stellar/design-system-website/src/componentPreview/paragraphPreview.tsx b/@stellar/design-system-website/src/componentPreview/paragraphPreview.tsx new file mode 100644 index 00000000..61659f4c --- /dev/null +++ b/@stellar/design-system-website/src/componentPreview/paragraphPreview.tsx @@ -0,0 +1,33 @@ +import { ComponentPreview } from "@site/src/components/PreviewBlock"; + +export const paragraphPreview: ComponentPreview = { + options: [ + { + type: "select", + prop: "size", + options: [ + { + value: "xs", + label: "XS", + }, + { + value: "sm", + label: "SM", + }, + { + value: "md", + label: "MD", + }, + { + value: "lg", + label: "LG", + }, + ], + }, + { + type: "checkbox", + prop: "asDiv", + label: "As div", + }, + ], +}; diff --git a/@stellar/design-system-website/src/componentPreview/profilePreview.tsx b/@stellar/design-system-website/src/componentPreview/profilePreview.tsx new file mode 100644 index 00000000..a1b5e21e --- /dev/null +++ b/@stellar/design-system-website/src/componentPreview/profilePreview.tsx @@ -0,0 +1,84 @@ +import { ComponentPreview } from "@site/src/components/PreviewBlock"; + +export const profilePreview: ComponentPreview = { + options: [ + { + type: "select", + prop: "size", + options: [ + { + value: "md", + label: "MD", + }, + { + value: "sm", + label: "SM", + }, + { + value: "xs", + label: "XS", + }, + ], + }, + { + type: "select", + prop: "federatedAddress", + customValue: "test*stellar.org", + options: [ + { + value: "", + label: "No federated", + }, + { + value: "Federated", + label: "Federated", + }, + ], + }, + { + type: "checkbox", + prop: "isShort", + label: "Short", + }, + { + type: "select", + prop: "href", + customValue: "https://stellar.org", + options: [ + { + value: "", + label: "No link", + }, + { + value: "link", + label: "Link", + }, + ], + }, + { + type: "checkbox", + prop: "hideAvatar", + label: "Hide avatar", + }, + { + type: "checkbox", + prop: "isCopy", + label: "Copy", + }, + { + type: "select", + prop: "onClick", + customValue: () => alert("Click!"), + options: [ + { + value: "", + label: "No click", + }, + { + value: "Click", + label: "Click", + }, + ], + }, + ], +}; diff --git a/@stellar/design-system-website/src/componentPreview/projectLogoPreview.tsx b/@stellar/design-system-website/src/componentPreview/projectLogoPreview.tsx new file mode 100644 index 00000000..ca6a90c0 --- /dev/null +++ b/@stellar/design-system-website/src/componentPreview/projectLogoPreview.tsx @@ -0,0 +1,5 @@ +import { ComponentPreview } from "@site/src/components/PreviewBlock"; + +export const projectLogoPreview: ComponentPreview = { + options: [], +}; diff --git a/@stellar/design-system-website/src/componentPreview/radioButtonPreview.tsx b/@stellar/design-system-website/src/componentPreview/radioButtonPreview.tsx new file mode 100644 index 00000000..95184a59 --- /dev/null +++ b/@stellar/design-system-website/src/componentPreview/radioButtonPreview.tsx @@ -0,0 +1,29 @@ +import { ComponentPreview } from "@site/src/components/PreviewBlock"; + +export const radioButtonPreview: ComponentPreview = { + options: [ + { + type: "select", + prop: "fieldSize", + options: [ + { + value: "md", + label: "MD", + }, + { + value: "sm", + label: "SM", + }, + { + value: "xs", + label: "XS", + }, + ], + }, + { + type: "checkbox", + prop: "disabled", + label: "Disabled", + }, + ], +}; diff --git a/@stellar/design-system-website/src/componentPreview/selectPreview.tsx b/@stellar/design-system-website/src/componentPreview/selectPreview.tsx new file mode 100644 index 00000000..378da196 --- /dev/null +++ b/@stellar/design-system-website/src/componentPreview/selectPreview.tsx @@ -0,0 +1,94 @@ +import { ComponentPreview } from "@site/src/components/PreviewBlock"; + +export const selectPreview: ComponentPreview = { + options: [ + { + type: "select", + prop: "label", + customValue: "Label", + options: [ + { + value: "", + label: "No label", + }, + { + value: "label", + label: "Label", + }, + ], + }, + { + type: "select", + prop: "fieldSize", + options: [ + { + value: "md", + label: "MD", + }, + { + value: "sm", + label: "SM", + }, + { + value: "xs", + label: "XS", + }, + ], + }, + { + type: "checkbox", + prop: "disabled", + label: "Disabled", + }, + { + type: "checkbox", + prop: "isLabelUppercase", + label: "Uppercase label", + }, + { + type: "checkbox", + prop: "isPill", + label: "Pill", + }, + { + type: "checkbox", + prop: "isError", + label: "Error", + }, + { + type: "checkbox", + prop: "isExtraPadding", + label: "Extra padding", + }, + { + type: "select", + prop: "note", + customValue: "Note message", + options: [ + { + value: "", + label: "No note", + }, + { + value: "note", + label: "Note", + }, + ], + }, + { + type: "select", + prop: "error", + customValue: "Error message", + options: [ + { + value: "", + label: "No error", + }, + { + value: "error", + label: "Error", + }, + ], + }, + ], +}; diff --git a/@stellar/design-system-website/src/componentPreview/tablePreview.tsx b/@stellar/design-system-website/src/componentPreview/tablePreview.tsx new file mode 100644 index 00000000..0d3db5b3 --- /dev/null +++ b/@stellar/design-system-website/src/componentPreview/tablePreview.tsx @@ -0,0 +1,31 @@ +import { ComponentPreview } from "@site/src/components/PreviewBlock"; + +export const tablePreview: ComponentPreview = { + options: [ + { + type: "checkbox", + prop: "hideNumberColumn", + label: "Hide number column", + }, + { + type: "checkbox", + prop: "isLoading", + label: "Loading", + }, + { + type: "select", + prop: "data", + customValue: [], + options: [ + { + value: "", + label: "With data", + }, + { + value: "no-data", + label: "Without data", + }, + ], + }, + ], +}; diff --git a/@stellar/design-system-website/src/componentPreview/textareaPreview.tsx b/@stellar/design-system-website/src/componentPreview/textareaPreview.tsx new file mode 100644 index 00000000..c7e0885f --- /dev/null +++ b/@stellar/design-system-website/src/componentPreview/textareaPreview.tsx @@ -0,0 +1,104 @@ +import { ComponentPreview } from "@site/src/components/PreviewBlock"; + +export const textareaPreview: ComponentPreview = { + options: [ + { + type: "select", + prop: "label", + customValue: "Label", + options: [ + { + value: "", + label: "No label", + }, + { + value: "label", + label: "Label", + }, + ], + }, + { + type: "select", + prop: "placeholder", + customValue: "Placeholder", + options: [ + { + value: "", + label: "No placeholder", + }, + { + value: "placeholder", + label: "Placeholder", + }, + ], + }, + { + type: "select", + prop: "fieldSize", + options: [ + { + value: "md", + label: "MD", + }, + { + value: "sm", + label: "SM", + }, + { + value: "xs", + label: "XS", + }, + ], + }, + { + type: "checkbox", + prop: "disabled", + label: "Disabled", + }, + { + type: "checkbox", + prop: "isLabelUppercase", + label: "Uppercase label", + }, + { + type: "checkbox", + prop: "isError", + label: "Error", + }, + { + type: "checkbox", + prop: "isExtraPadding", + label: "Extra padding", + }, + { + type: "select", + prop: "note", + customValue: "Note message", + options: [ + { + value: "", + label: "No note", + }, + { + value: "note", + label: "Note", + }, + ], + }, + { + type: "select", + prop: "error", + customValue: "Error message", + options: [ + { + value: "", + label: "No error", + }, + { + value: "error", + label: "Error", + }, + ], + }, + ], +}; diff --git a/@stellar/design-system-website/src/componentPreview/titlePreview.tsx b/@stellar/design-system-website/src/componentPreview/titlePreview.tsx new file mode 100644 index 00000000..261f3a66 --- /dev/null +++ b/@stellar/design-system-website/src/componentPreview/titlePreview.tsx @@ -0,0 +1,28 @@ +import { ComponentPreview } from "@site/src/components/PreviewBlock"; + +export const titlePreview: ComponentPreview = { + options: [ + { + type: "select", + prop: "size", + options: [ + { + value: "xs", + label: "XS", + }, + { + value: "sm", + label: "SM", + }, + { + value: "md", + label: "MD", + }, + { + value: "lg", + label: "LG", + }, + ], + }, + ], +}; diff --git a/@stellar/design-system-website/src/componentPreview/togglePreview.tsx b/@stellar/design-system-website/src/componentPreview/togglePreview.tsx new file mode 100644 index 00000000..45d6c9b0 --- /dev/null +++ b/@stellar/design-system-website/src/componentPreview/togglePreview.tsx @@ -0,0 +1,26 @@ +import { ComponentPreview } from "@site/src/components/PreviewBlock"; + +export const togglePreview: ComponentPreview = { + options: [ + { + type: "checkbox", + prop: "disabled", + label: "Disabled", + }, + { + type: "select", + prop: "checked", + customValue: true, + options: [ + { + value: "", + label: "Off", + }, + { + value: "on", + label: "On", + }, + ], + }, + ], +}; diff --git a/@stellar/design-system-website/src/componentPreview/tooltipPreview.tsx b/@stellar/design-system-website/src/componentPreview/tooltipPreview.tsx new file mode 100644 index 00000000..88bcfb78 --- /dev/null +++ b/@stellar/design-system-website/src/componentPreview/tooltipPreview.tsx @@ -0,0 +1,94 @@ +import { ComponentPreview } from "@site/src/components/PreviewBlock"; + +export const tooltipPreview: ComponentPreview = { + options: [ + { + type: "select", + prop: "placement", + options: [ + { + value: "", + label: "Placement", + }, + { + value: "bottom", + label: "Bottom", + }, + { + value: "bottom-start", + label: "Bottom start", + }, + { + value: "bottom-end", + label: "Bottom end", + }, + { + value: "left", + label: "Left", + }, + { + value: "left-start", + label: "Left start", + }, + { + value: "left-end", + label: "Left end", + }, + { + value: "right", + label: "Right", + }, + { + value: "right-start", + label: "Right start", + }, + { + value: "right-end", + label: "Right end", + }, + { + value: "top", + label: "Top", + }, + { + value: "top-start", + label: "Top start", + }, + { + value: "top-end", + label: "Top end", + }, + ], + }, + { + type: "select", + prop: "isVisible", + customValue: false, + options: [ + { + value: "", + label: "Visible", + }, + { + value: "hidden", + label: "Hidden", + }, + ], + }, + { + type: "select", + prop: "isContrast", + customValue: false, + options: [ + { + value: "", + label: "Contrast", + }, + { + value: "noContrast", + label: "No contrast", + }, + ], + }, + ], +}; diff --git a/@stellar/design-system-website/src/constants/details/assets.tsx b/@stellar/design-system-website/src/components/AssetPreview/index.tsx similarity index 82% rename from @stellar/design-system-website/src/constants/details/assets.tsx rename to @stellar/design-system-website/src/components/AssetPreview/index.tsx index 7fcd6181..7dc52fb2 100644 --- a/@stellar/design-system-website/src/constants/details/assets.tsx +++ b/@stellar/design-system-website/src/components/AssetPreview/index.tsx @@ -1,17 +1,20 @@ -import { Icon, Logo } from "@stellar/design-system"; -import { ComponentDetails, ComponentDetailsId } from "types/types"; +import React, { useEffect, useState } from "react"; +import "./styles.css"; -export const assets: ComponentDetails = { - id: ComponentDetailsId.assets, - title: "Assets", - description: `Collection of icon and logo assets.`, - shortDescription: - "Collection of icon and partner logo assets used across product and brand", - examples: [ - { - title: "Icons", - description: <>SVG icon components, which are styled in CSS., - component: [ +export const AssetPreview = ({ type }: { type: "icon" | "logo" }) => { + const [sds, setSds] = useState({}); + const { Icon, Logo } = sds; + + // Importing SDS here because we need it async for server-side-rendering + useEffect(() => { + const initSds = async () => { + setSds(await import("@stellar/design-system")); + }; + initSds(); + }, []); + + const ICON = Icon + ? [ , , , @@ -162,26 +165,31 @@ export const assets: ComponentDetails = { , , , - ], - useGridLayout: true, - }, - { - title: "Logos", - description: - "SVG logo components, which can be styled in CSS if necessary.", - component: [ + ] + : []; + + const LOGO = Logo + ? [ , , , , , - ], - useGridLayout: true, - }, - ], - props: [], - externalProps: { - link: "", - label: "", - }, + ] + : []; + + const list = type === "icon" ? ICON : LOGO; + + return ( +
+ {list.map((l) => { + return ( +
+
{l}
+
{l.type.name}
+
+ ); + })} +
+ ); }; diff --git a/@stellar/design-system-website/src/components/AssetPreview/styles.css b/@stellar/design-system-website/src/components/AssetPreview/styles.css new file mode 100644 index 00000000..39090633 --- /dev/null +++ b/@stellar/design-system-website/src/components/AssetPreview/styles.css @@ -0,0 +1,36 @@ +.AssetPreview { + display: grid; + grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); + gap: 1rem; +} + +.AssetPreview__item { + height: 10rem; + background-color: var(--ifm-sds-icon-bg); + color: var(--ifm-sds-icon-fill); + border-radius: 4px; + padding: 1rem; + display: flex; + flex-direction: column; + justify-content: space-between; +} + +.AssetPreview__item__icon { + flex: 1; + display: flex; + align-items: center; + justify-content: center; +} + +.AssetPreview__item__icon svg { + width: auto; + height: 1.5rem; +} + +.AssetPreview__item__name { + color: var(--ifm-sds-icon-text); + font-size: 14px; + text-align: center; + font-family: var(--ifm-font-family-monospace); + fill: var(--ifm-sds-icon-fill); +} diff --git a/@stellar/design-system-website/src/components/ComponentDescription/index.tsx b/@stellar/design-system-website/src/components/ComponentDescription/index.tsx new file mode 100644 index 00000000..4e847bbf --- /dev/null +++ b/@stellar/design-system-website/src/components/ComponentDescription/index.tsx @@ -0,0 +1,25 @@ +import React from "react"; +import SdsDocs from "@stellar/design-system/docs/components.json"; +import { ParseSummary } from "@site/src/components/ParseSummary"; + +export const ComponentDescription = ({ + componentName, +}: { + componentName: string; +}) => { + const component = SdsDocs?.children?.find( + (c) => c.name === componentName && c.variant === "declaration", + ); + + if (!component) { + throw Error(`Component "${componentName}" description not found.`); + } + + return ( +

+ +

+ ); +}; diff --git a/@stellar/design-system-website/src/components/ComponentProps/index.tsx b/@stellar/design-system-website/src/components/ComponentProps/index.tsx new file mode 100644 index 00000000..9120bbe6 --- /dev/null +++ b/@stellar/design-system-website/src/components/ComponentProps/index.tsx @@ -0,0 +1,101 @@ +import React, { Fragment } from "react"; +import SdsDocs from "@stellar/design-system/docs/components.json"; +import { Element } from "@site/src/components/Element"; +import { ParseSummary } from "@site/src/components/ParseSummary"; +import { ElementPropType } from "@site/src/components/ElementPropType"; + +export const ComponentProps = ({ + componentName, + relatedType, +}: { + componentName: string; + // To associate custom types that are used in the component. For example, + // AssetIconSource in AssetIcon. + relatedType?: string[]; +}) => { + const component = SdsDocs?.children?.find( + (c) => c.name === `${componentName}Props` && c.variant === "declaration", + ); + + if (!component) { + throw Error(`Component "${componentName}" props not found.`); + } + + const relatedTypes = relatedType?.map((t) => + SdsDocs?.children?.find((c) => c.name === t && c.variant === "declaration"), + ); + + const PropRow = ({ p }: { p: any }) => { + const defaultVal = p.comment?.blockTags?.[0]?.content?.[0]; + + return ( + + + + + + + + ); + }; + + const props = component.children.map((p) => ); + + const relatedTypeProps = relatedTypes?.map((t) => { + const props = t.children || t?.type?.declaration?.children; + + return ( + + + + + {props?.map((t) => ( + + ))} + + ); + }); + + return ( +
+
{item.field1}{item.field2}{item.field3}
Caption
+ {p.name} + + + + {defaultVal ? ( + + ) : null} + {p?.flags?.isOptional ? "Yes" : ""} + +
+ {t.name} +
+ + + + + + + + + + + {props} + {relatedTypeProps} + +
PropTypeDefaultOptionalDescription
+ + {component.comment?.summary ? ( +

+ +

+ ) : null} + + ); +}; diff --git a/@stellar/design-system-website/src/components/ComponentsList/index.tsx b/@stellar/design-system-website/src/components/ComponentsList/index.tsx deleted file mode 100644 index 7ada4a26..00000000 --- a/@stellar/design-system-website/src/components/ComponentsList/index.tsx +++ /dev/null @@ -1,41 +0,0 @@ -import { Icon } from "@stellar/design-system"; -import { useNavigate } from "react-router-dom"; -import { componentDetails } from "constants/componentDetails"; -import { componentsInDisplayOrder } from "constants/componentsInDisplayOrder"; -import { Routes } from "types/types"; -import "./styles.scss"; - -export const ComponentsList = () => { - const navigate = useNavigate(); - - const goToComponentDetails = (componentId: string) => { - navigate(`/${Routes.component}/${componentId}`); - }; - - return ( -
- {componentsInDisplayOrder.map((key) => { - const comp = componentDetails[key.id]; - - if (!comp) { - return null; - } - - return ( -
goToComponentDetails(comp.id)} - role="button" - > -
- {comp.title} - -
-

{comp.shortDescription}

-
- ); - })} -
- ); -}; diff --git a/@stellar/design-system-website/src/components/ComponentsList/styles.scss b/@stellar/design-system-website/src/components/ComponentsList/styles.scss deleted file mode 100644 index df51ecb5..00000000 --- a/@stellar/design-system-website/src/components/ComponentsList/styles.scss +++ /dev/null @@ -1,38 +0,0 @@ -.ComponentsList { - margin-top: 1.5rem; - display: grid; - grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); - gap: 1.5rem; -} - -.ComponentCard { - border: 1px solid var(--color-gray-30); - background-color: var(--color-gray-10); - overflow: hidden; - height: 8rem; - padding: 1.5rem 1rem; - border-radius: 0.5rem; - cursor: pointer; - transition: border-color var(--anim-transition-default); - - @media (hover: hover) { - &:hover { - border-color: var(--color-gray-40); - } - } - - &__title { - font-weight: var(--font-weight-medium); - margin-bottom: 0.5rem; - display: flex; - align-items: center; - color: var(--color-gray-90); - - svg { - width: 1rem; - height: 1rem; - fill: var(--color-gray-90); - margin-left: 0.4rem; - } - } -} diff --git a/@stellar/design-system-website/src/components/Details/index.tsx b/@stellar/design-system-website/src/components/Details/index.tsx deleted file mode 100644 index 5c1b85d2..00000000 --- a/@stellar/design-system-website/src/components/Details/index.tsx +++ /dev/null @@ -1,263 +0,0 @@ -import { Heading, Link, Title } from "@stellar/design-system"; -import React from "react"; -import { ElementCode } from "components/ElementCode"; -import { componentDetails } from "constants/componentDetails"; -import { - ComponentExample, - ComponentProp, - ComponentDetailsId, - ComponentExternalProps, -} from "types/types"; - -import "./styles.scss"; - -export const Details = ({ - componentId, -}: { - componentId: ComponentDetailsId; -}) => { - if (!componentId || !componentDetails[componentId]) { - return ( -

- Component {componentId} does not exist. -

- ); - } - - const { - title, - description, - examples, - props, - externalProps, - notes, - subComponents, - } = componentDetails[componentId]; - - const renderPropType = (type: string[]) => - type.map((item, index) => ( - // eslint-disable-next-line react/no-array-index-key - {item} - )); - - const renderPropsTable = ( - renderProps: ComponentProp[], - renderExternalProps?: ComponentExternalProps, - ) => ( - <> -
- - - - - - - - - - - - {renderProps.map((componentProp, index) => { - if (componentProp.heading) { - return ( - - - - ); - } - - return ( - // eslint-disable-next-line react/no-array-index-key - - - - - - - - ); - })} - -
PropTypeDefaultOptionalDescription
- {componentProp.heading} -
- {componentProp.prop} - - {renderPropType(componentProp.type)} - - {componentProp.default ? ( - {componentProp.default} - ) : null} - {componentProp.optional ? "Yes" : null}{componentProp.description ?? null}
-
- {renderExternalProps?.link ? ( -
- Including all valid{" "} - - {renderExternalProps.label || "attributes"} - -
- ) : null} - - ); - - const renderExample = ( - components: React.ReactNode[], - options?: { - previewExampleOverride?: React.ReactNode[]; - useGridLayout?: boolean; - }, - ) => { - const { previewExampleOverride, useGridLayout } = options || {}; - - if (useGridLayout) { - return ( -
- {components.map((component, index) => ( -
-
- {previewExampleOverride?.[index] - ? previewExampleOverride[index] - : component} -
-
- -
-
- ))} -
- ); - } - - return components.map((component, index) => ( - // eslint-disable-next-line react/no-array-index-key -
-
-
- {previewExampleOverride?.[index] - ? previewExampleOverride[index] - : component} -
-
-
- -
-
- )); - }; - - return ( - <> - {/* heading */} -
- - {title} - - - {/* description */} -

{description}

-
- - {/* examples */} -
- - Examples - - - {examples.map((example: ComponentExample, index) => { - const { - title: exampleTitle, - description: exampleDescription, - component, - previewExampleOverride, - useGridLayout, - } = example; - - return ( - // eslint-disable-next-line react/no-array-index-key -
- {exampleTitle ? ( - - {exampleTitle} - - ) : null} - {exampleDescription ?

{exampleDescription}

: null} - - {renderExample(component, { - previewExampleOverride, - useGridLayout, - })} -
- ); - })} -
- - {/* props */} - {props.length ? ( -
- - Props - - {renderPropsTable(props, externalProps)} -
- ) : null} - - {/* sub-components */} - {subComponents?.components.length ? ( -
- - Sub-components - - -

{subComponents.description}

- - {subComponents.components.map((sub, index) => ( - // eslint-disable-next-line react/no-array-index-key -
- - {sub.component} - - -

{sub.description}

- - {renderPropsTable(sub.props)} - - {sub.notes ? ( -
- - Notes - - - {sub.notes.map((note, idx) => ( - // eslint-disable-next-line react/no-array-index-key - - {note} - - ))} -
- ) : null} -
- ))} -
- ) : null} - - {/* notes */} - {notes?.length ? ( -
- - Notes - - - {notes.map((note: React.ReactNode, index) => ( - // eslint-disable-next-line react/no-array-index-key - {note} - ))} -
- ) : null} - - ); -}; diff --git a/@stellar/design-system-website/src/components/Details/styles.scss b/@stellar/design-system-website/src/components/Details/styles.scss deleted file mode 100644 index 2302c4af..00000000 --- a/@stellar/design-system-website/src/components/Details/styles.scss +++ /dev/null @@ -1,109 +0,0 @@ -.Details { - &__example { - --Details-example-container-radius: 0.25rem; - - &__container { - display: block; - - &:not(:last-child) { - margin-bottom: 1rem; - } - - @media (min-width: 900px) { - display: grid; - grid-template-columns: 1fr 1fr; - gap: 1rem; - } - } - - &__details { - background-color: var(--color-gray-10); - padding: 1rem; - display: flex; - flex-direction: column; - border-top-left-radius: var(--Details-example-container-radius); - border-top-right-radius: var(--Details-example-container-radius); - - @media (min-width: 900px) { - border-radius: var(--Details-example-container-radius); - } - } - - &__component { - display: flex; - flex: 1; - justify-content: flex-start; - align-items: center; - flex-wrap: wrap; - } - - &__code { - background-color: #292d3e; - display: flex; - flex-wrap: wrap; - flex-direction: column; - overflow-x: auto; - justify-content: center; - border-bottom-left-radius: var(--Details-example-container-radius); - border-bottom-right-radius: var(--Details-example-container-radius); - - @media (min-width: 900px) { - border-radius: var(--Details-example-container-radius); - } - } - } - - &__grid { - display: grid; - grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); - gap: 1rem; - - &__container { - background-color: var(--color-gray-20); - border-radius: var(--Details-example-container-radius); - height: 10rem; - overflow: hidden; - display: flex; - flex-direction: column; - } - - &__icon { - flex: 1; - display: flex; - align-items: center; - justify-content: center; - padding: 2rem 1rem; - - svg { - width: auto; - height: 1.5rem; - fill: var(--color-gray-90); - } - } - - &__title { - padding: 1rem; - padding-top: 0; - padding-bottom: 1.5rem; - text-align: center; - color: var(--color-gray-70); - font-size: var(--font-size-secondary); - } - } -} - -td { - code { - word-break: normal; - } - - &.Table__props { - max-width: 18.75rem; - - code { - &:not(:last-child) { - margin-right: 0.5rem; - } - } - } -} diff --git a/@stellar/design-system-website/src/components/Element.tsx b/@stellar/design-system-website/src/components/Element.tsx new file mode 100644 index 00000000..f929ea92 --- /dev/null +++ b/@stellar/design-system-website/src/components/Element.tsx @@ -0,0 +1,66 @@ +import React, { Fragment, createElement } from "react"; +import Link from "@docusaurus/Link"; +import rehypeParse from "rehype-parse"; +import rehypeReact from "rehype-react"; +import rehypeSanitize from "rehype-sanitize"; +import { unified } from "unified"; + +export type ElementKind = "text" | "code" | "inline-tag"; + +export interface ElementProps { + text: string; + kind: ElementKind | string; + tag?: string; +} + +export const Element = ({ text, kind, tag }: ElementProps) => { + switch (kind) { + case "code": + // Remove `` + return {text.slice(1, -1)}; + case "inline-tag": + // Remove @ from tag to use as a slug for relative link + return {text}; + // text is default + default: + return parseMarkdownString(text); + } +}; + +const parseMarkdownString = (text: string): React.ReactElement => { + const matches = text.match(/\[.*?\)/g); + + if (matches) { + for (const m of matches) { + const linkText = m.match(/\[(.*?)\]/)[1]; + const linkUrl = m.match(/\((.*?)\)/)[1]; + + // TODO: can check if it's relative link + text = text.replace( + m, + `${linkText}`, + ); + } + } + + text = parseLineBreak(text); + + const file = unified() + .use(rehypeSanitize) + .use(rehypeParse, { fragment: true }) + .use(rehypeReact, { createElement, Fragment }) + .processSync(text); + + return file.result; +}; + +const parseLineBreak = (text: string) => { + const lineBreakPattern = /\n\n/i; + const matches = text.match(lineBreakPattern); + + if (matches) { + return `${text.replace(lineBreakPattern, `

`)}`; + } + + return text; +}; diff --git a/@stellar/design-system-website/src/components/ElementCode/index.tsx b/@stellar/design-system-website/src/components/ElementCode/index.tsx deleted file mode 100644 index acc94c84..00000000 --- a/@stellar/design-system-website/src/components/ElementCode/index.tsx +++ /dev/null @@ -1,145 +0,0 @@ -import React from "react"; -import Highlight, { defaultProps, PrismTheme } from "prism-react-renderer"; -import reactElementToJSXString from "react-element-to-jsx-string"; - -import "./styles.scss"; - -interface ElementCodeProps { - element: React.ReactNode; - id: number; - displayNameOnly?: boolean; -} - -export const ElementCode = ({ - element, - id, - displayNameOnly, -}: ElementCodeProps) => { - if (displayNameOnly) { - return <>{reactElementToJSXString(element).replace(/<(.*) \/>/, "$1")}; - } - - return ( -
- - {({ className, style, tokens, getLineProps, getTokenProps }) => ( - 
-            {tokens.map((line, i) => (
-              

-                {i + 1}
-                {line.map((token, key) => (
-                  
-                ))}
-              

-            ))}
-
- )} - -
- ); -}; - -// TODO: update theme to match -const customTheme: PrismTheme = { - plain: { - backgroundColor: "#292d3e", - color: "#9a86fd", - }, - styles: [ - { - types: ["comment", "prolog", "doctype", "cdata", "punctuation"], - style: { - color: "#6c6783", - }, - }, - { - types: ["namespace"], - style: { - opacity: 0.7, - }, - }, - { - types: ["tag", "operator", "number"], - style: { - color: "#e09142", - }, - }, - { - types: ["property", "function"], - style: { - color: "#9a86fd", - }, - }, - { - types: ["tag-id", "selector", "atrule-id"], - style: { - color: "#eeebff", - }, - }, - { - types: ["attr-name"], - style: { - color: "#c4b9fe", - }, - }, - { - types: [ - "boolean", - "string", - "entity", - "url", - "attr-value", - "keyword", - "control", - "directive", - "unit", - "statement", - "regex", - "at-rule", - "placeholder", - "variable", - ], - style: { - color: "#ffcc99", - }, - }, - { - types: ["deleted"], - style: { - textDecorationLine: "line-through", - }, - }, - { - types: ["inserted"], - style: { - textDecorationLine: "underline", - }, - }, - { - types: ["italic"], - style: { - fontStyle: "italic", - }, - }, - { - types: ["important", "bold"], - style: { - fontWeight: "bold", - }, - }, - { - types: ["important"], - style: { - color: "#c4b9fe", - }, - }, - ], -}; diff --git a/@stellar/design-system-website/src/components/ElementCode/styles.scss b/@stellar/design-system-website/src/components/ElementCode/styles.scss deleted file mode 100644 index ce7d6089..00000000 --- a/@stellar/design-system-website/src/components/ElementCode/styles.scss +++ /dev/null @@ -1,16 +0,0 @@ -.ElementCode { - pre { - line-height: 1.4rem; - padding: 1rem; - margin: 0; - } - - &__line-number { - font-family: var(--font-family-monospace); - margin-right: 0.2rem; - opacity: 0.5; - width: 2rem; - display: inline-block; - user-select: none; - } -} diff --git a/@stellar/design-system-website/src/components/ElementPropType.tsx b/@stellar/design-system-website/src/components/ElementPropType.tsx new file mode 100644 index 00000000..77b8ece5 --- /dev/null +++ b/@stellar/design-system-website/src/components/ElementPropType.tsx @@ -0,0 +1,44 @@ +import React, { Fragment } from "react"; + +export const ElementPropType = ({ type }: { type: any }) => { + switch (type.type) { + case "union": + return type.types.map((t, i) => ( + + {t.value}{" "} + + )); + case "reflection": + // TODO: improve parsing functions. This approach is very specific for a + // few cases we have. + if (type.declaration?.children?.length > 0) { + const props = type.declaration?.children + .map( + (c) => + `${c.name}: ${ + c.type.type === "intrinsic" ? c.type.name : "() => void" + }`, + ) + .join("; "); + return {`{ ${props} }`}; + } + + if (type.declaration?.signatures?.[0]?.parameters?.length > 0) { + const params = type.declaration?.signatures?.[0]?.parameters + .map((p) => `${p.name}: ${p.type.name}`) + .join(", "); + const returnType = type.declaration?.signatures?.[0].type.name; + + return {`(${params}) => ${returnType}`}; + } + + return {`() => void`}; + case "array": + return {`${type?.elementType?.name || ""}[]`}; + case "intrinsic": + case "reference": + return {type.name}; + default: + return ""; + } +}; diff --git a/@stellar/design-system-website/src/components/ParseSummary.tsx b/@stellar/design-system-website/src/components/ParseSummary.tsx new file mode 100644 index 00000000..dacabe1f --- /dev/null +++ b/@stellar/design-system-website/src/components/ParseSummary.tsx @@ -0,0 +1,12 @@ +import React from "react"; +import { Element } from "@site/src/components/Element"; + +export const ParseSummary = ({ summary }: { summary: any }) => { + return ( + <> + {summary?.map((s, i) => ( + + ))} + + ); +}; diff --git a/@stellar/design-system-website/src/components/PreviewBlock/index.tsx b/@stellar/design-system-website/src/components/PreviewBlock/index.tsx new file mode 100644 index 00000000..a7a19819 --- /dev/null +++ b/@stellar/design-system-website/src/components/PreviewBlock/index.tsx @@ -0,0 +1,373 @@ +import React, { cloneElement, useEffect, useState } from "react"; +import reactElementToJSXString from "react-element-to-jsx-string"; +import { PlaygroundEditor } from "@site/src/theme/Playground"; +import "./styles.css"; + +// ============================================================================= +// Preview imports +// ============================================================================= +import { assetIconPreview } from "@site/src/componentPreview/assetIconPreview"; +import { avatarPreview } from "@site/src/componentPreview/avatarPreview"; +import { badgePreview } from "@site/src/componentPreview/badgePreview"; +import { bannerPreview } from "@site/src/componentPreview/bannerPreview"; +import { buttonPreview } from "@site/src/componentPreview/buttonPreview"; +import { buttonPresetPreview } from "@site/src/componentPreview/buttonPresetPreview"; +import { captionPreview } from "@site/src/componentPreview/captionPreview"; +import { cardPreview } from "@site/src/componentPreview/cardPreview"; +import { checkboxPreview } from "@site/src/componentPreview/checkboxPreview"; +import { copyTextPreview } from "@site/src/componentPreview/copyTextPreview"; +import { headingPreview } from "@site/src/componentPreview/headingPreview"; +import { iconButtonPreview } from "@site/src/componentPreview/iconButtonPreview"; +import { inputPreview } from "@site/src/componentPreview/inputPreview"; +import { layoutPreview } from "@site/src/componentPreview/layoutPreview"; +import { linkPreview } from "@site/src/componentPreview/linkPreview"; +import { loaderPreview } from "@site/src/componentPreview/loaderPreview"; +import { modalPreview } from "@site/src/componentPreview/modalPreview"; +import { navButtonPreview } from "@site/src/componentPreview/navButtonPreview"; +import { notificationPreview } from "@site/src/componentPreview/notificationPreview "; +import { paginationPreview } from "@site/src/componentPreview/paginationPreview"; +import { paragraphPreview } from "@site/src/componentPreview/paragraphPreview"; +import { profilePreview } from "@site/src/componentPreview/profilePreview"; +import { projectLogoPreview } from "@site/src/componentPreview/projectLogoPreview"; +import { radioButtonPreview } from "@site/src/componentPreview/radioButtonPreview"; +import { selectPreview } from "@site/src/componentPreview/selectPreview"; +import { tablePreview } from "@site/src/componentPreview/tablePreview"; +import { textareaPreview } from "@site/src/componentPreview/textareaPreview"; +import { titlePreview } from "@site/src/componentPreview/titlePreview"; +import { togglePreview } from "@site/src/componentPreview/togglePreview"; +import { tooltipPreview } from "@site/src/componentPreview/tooltipPreview"; + +// ============================================================================= +// Component previews +// ============================================================================= +const previews: { [key: string]: ComponentPreview } = { + AssetIcon: assetIconPreview, + Avatar: avatarPreview, + Badge: badgePreview, + Banner: bannerPreview, + Button: buttonPreview, + ButtonPreset: buttonPresetPreview, + Caption: captionPreview, + Card: cardPreview, + Checkbox: checkboxPreview, + Content: layoutPreview, + CopyText: copyTextPreview, + Footer: layoutPreview, + Heading: headingPreview, + Header: layoutPreview, + IconButton: iconButtonPreview, + Input: inputPreview, + Inset: layoutPreview, + Layout: layoutPreview, + Link: linkPreview, + Loader: loaderPreview, + Modal: modalPreview, + NavButton: navButtonPreview, + Notification: notificationPreview, + Pagination: paginationPreview, + Paragraph: paragraphPreview, + Profile: profilePreview, + ProjectLogo: projectLogoPreview, + RadioButton: radioButtonPreview, + Select: selectPreview, + Table: tablePreview, + Textarea: textareaPreview, + Title: titlePreview, + Toggle: togglePreview, + Tooltip: tooltipPreview, +}; + +type Theme = "sds-theme-light" | "sds-theme-dark"; + +// Types +export type PreviewOptionType = "select" | "checkbox"; + +interface PreviewOptionBase { + type: PreviewOptionType; + prop: string; + clearProp?: string; + customValue?: any; +} + +interface PreviewOptionSelect extends PreviewOptionBase { + options: { + value: string; + label: string; + }[]; +} + +interface PreviewOptionCheckbox extends PreviewOptionBase { + label: string; +} + +export type ComponentPreview = { + options: (PreviewOptionSelect | PreviewOptionCheckbox)[]; +}; + +/** + * This file handles the layout and logic for the PreviewBlock to render + * components. + * + * Config file for every component is in /src/componentPreview/ directory. File + * names are [componentName]Preview. + */ +export const PreviewBlock = ({ + componentName, + children, +}: { + componentName: string; + children: React.ReactElement; +}) => { + const [sds, setSds] = useState({}); + const { Checkbox, Select, Notification, Button, Modal } = sds; + + // Importing SDS here because we need it async for server-side-rendering + useEffect(() => { + const initSds = async () => { + setSds(await import("@stellar/design-system")); + }; + initSds(); + }, []); + + const [theme, setTheme] = useState("sds-theme-light"); + + const compPreview = previews[componentName]; + + if (!compPreview) { + throw Error(`There is no preview for "${componentName}" component.`); + } + + const [props, setProps] = useState({}); + const [isModalOpen, setIsModalOpen] = useState(false); + const [isBasicModalOpen, setIsBasicModalOpen] = useState(false); + + const handleSelectChange = ( + event: React.ChangeEvent, + customValue: any, + clearProp: string, + ) => { + const { id, value } = event.target; + const _props = props; + + let valObj = {}; + + // If the value is object, assuming it's setting another prop. For example, + // icon dropdown is setting icon and icon position + try { + valObj = JSON.parse(value); + } catch (error) { + // do nothing + } + + if (value) { + setProps({ ..._props, [id]: customValue ?? value, ...valObj }); + } else { + delete _props[id]; + + if (clearProp) { + delete _props[clearProp]; + } + + setProps({ ..._props }); + } + }; + + const handleCheckboxChange = ( + event: React.ChangeEvent, + customValue: any, + clearProp: string, + ) => { + const { id, checked } = event.target; + const _props = props; + + if (!checked && clearProp && props[clearProp]) { + delete _props[clearProp]; + } + + setProps({ + ..._props, + [id]: checked ? customValue ?? true : false, + }); + }; + + const renderSelect = (option: PreviewOptionSelect) => { + return Select ? ( + + ) : null; + }; + + const renderCheckbox = (option: PreviewOptionCheckbox) => { + return Checkbox ? ( + + handleCheckboxChange(e, option.customValue, option.clearProp) + } + key={option.prop} + /> + ) : null; + }; + + // Default component with props + const component = cloneElement(children, { ...props }); + + const options = compPreview.options.reduce( + (res, cur) => { + if (cur.type === "checkbox") { + res.checkbox.push(cur); + } + + if (cur.type === "select") { + res.select.push(cur); + } + + return res; + }, + { checkbox: [], select: [] }, + ); + + const renderPreview = () => { + // Need to handle Notification manually because of name collision that + // breaks rendering + if (componentName === "Notification") { + return Notification ? ( + + ) : null; + } + + // Need to handle Modal manually because of button on click trigger to show + // or hide + if (componentName === "Modal") { + return Button && Modal ? ( +
+ + + + + setIsBasicModalOpen(false)} + parentId="preview-block" + visible={isBasicModalOpen} + > +

+ Lorem ipsum dolor sit amet consectetur adipisicing elit. Pariatur + eius beatae sint dolorem, excepturi quos enim, et ullam suscipit + voluptates voluptas accusantium repellendus amet explicabo, iure + veritatis aperiam alias molestiae. +

+ + + setIsModalOpen(false)} + parentId="preview-block" + visible={isModalOpen} + > + Modal heading + +

+ Lorem ipsum dolor sit amet consectetur adipisicing elit. + Pariatur eius beatae sint dolorem, excepturi quos enim, et ullam + suscipit voluptates voluptas accusantium repellendus amet + explicabo, iure veritatis aperiam alias molestiae. +

+ +

+ Lorem ipsum dolor sit amet consectetur adipisicing elit. + Pariatur eius beatae sint dolorem, excepturi quos enim, et ullam + suscipit voluptates voluptas accusantium repellendus amet + explicabo, iure veritatis aperiam alias molestiae. +

+ +

+ Lorem ipsum dolor sit amet consectetur adipisicing elit. + Pariatur eius beatae sint dolorem, excepturi quos enim, et ullam + suscipit voluptates voluptas accusantium repellendus amet + explicabo, iure veritatis aperiam alias molestiae. +

+ + + + + + +
+ ) : null; + } + + return component; + }; + + return ( + <> +
+
+
+ {Select ? ( + + ) : null} + + {options.select.map((o) => renderSelect(o))} +
+
+ +
{renderPreview()}
+ + {options.checkbox.length > 0 ? ( +
+
+ {options.checkbox.map((o) => renderCheckbox(o))} +
+
+ ) : null} +
+ + {reactElementToJSXString(component)} + + ); +}; diff --git a/@stellar/design-system-website/src/components/PreviewBlock/styles.css b/@stellar/design-system-website/src/components/PreviewBlock/styles.css new file mode 100644 index 00000000..c0b281c1 --- /dev/null +++ b/@stellar/design-system-website/src/components/PreviewBlock/styles.css @@ -0,0 +1,137 @@ +.PreviewBlock { + background-color: var(--color-gray-00); + background-image: radial-gradient(var(--color-gray-40) 10%, transparent 11%), + radial-gradient(var(--color-gray-40) 10%, transparent 11%); + background-size: 12px 12px; + background-position: 0 0, 12px 12px; + background-repeat: repeat; + padding: 1.5rem 1rem; + border-top-left-radius: 0.5rem; + border-top-right-radius: 0.5rem; + border: 1px solid var(--color-gray-40); + display: flex; + flex-direction: column; + gap: 0.5rem; +} + +.PreviewBlock__block { + display: flex; + align-items: center; + justify-content: center; + gap: 1rem; +} + +/* Selects */ +.PreviewBlock__selects__content { + display: flex; + align-items: center; + gap: 0.5rem; + flex-wrap: wrap; + flex: 1; +} + +.PreviewBlock__selects__content > *, +.PreviewBlock__checkbox__content > * { + flex-shrink: 0; +} + +.PreviewBlock__selects__content .Select { + width: 9rem; +} + +/* Checkboxes */ +.PreviewBlock__checkboxes__content { + border: 1px solid var(--color-gray-40); + background-color: var(--color-gray-00); + border-radius: 0.25rem; + padding: 0.75rem; + display: flex; + flex-wrap: wrap; + gap: 0.5rem 1.5rem; + width: fit-content; + color: var(--color-gray-80); +} + +.PreviewBlock__component { + min-height: 15rem; + display: flex; + align-items: center; + justify-content: center; + color: var(--color-gray-70); +} + +@media (max-width: 600px) { + .PreviewBlock__checkboxes__content, + .PreviewBlock__selects__content { + display: grid; + grid-template-columns: 1fr 1fr; + } + + .PreviewBlock__checkboxes__content { + width: auto; + } + + .PreviewBlock__selects__content .Select { + width: auto; + } +} + +/* ========================================================================== */ +/* SDS overrides +/* ========================================================================== */ +.PreviewBlock .Link--underline { + text-decoration: underline !important; +} + +.PreviewBlock .Heading, +.PreviewBlock .Caption, +.PreviewBlock .Paragraph, +.PreviewBlock .Title { + color: var(--color-gray-90); +} + +.PreviewBlock .Heading { + margin: 0 !important; +} + +.PreviewBlock .Input, +.PreviewBlock .Select, +.PreviewBlock .Textarea { + max-width: 24rem; +} + +.PreviewBlock .Checkbox__container label { + font-weight: var(--font-weight-regular); +} + +.PreviewBlock .Modal { + z-index: 1000; +} + +.PreviewBlock .Layout__header, +.PreviewBlock .Layout__footer { + width: 100%; +} + +.PreviewBlock .Table thead { + background-color: transparent; +} + +.PreviewBlock .Table thead tr { + border-bottom: none; +} + +.PreviewBlock .Table tr { + background: none; + border-top: none; +} + +.PreviewBlock .Table th { + background: none; + border: none; +} + +.PreviewBlock .Table td { + color: var(--color-gray-80); + border: none; +} diff --git a/@stellar/design-system-website/src/components/SideNav/index.tsx b/@stellar/design-system-website/src/components/SideNav/index.tsx deleted file mode 100644 index e4b1f069..00000000 --- a/@stellar/design-system-website/src/components/SideNav/index.tsx +++ /dev/null @@ -1,101 +0,0 @@ -import { useLayoutEffect, createRef, useState } from "react"; -import { NavButton, Icon } from "@stellar/design-system"; -import { debounce } from "lodash"; -import { componentsInDisplayOrder } from "constants/componentsInDisplayOrder"; -import { - CSS_CLASS_LAYOUT_CONTAINER, - BREAKPOINT_SMALL, -} from "constants/variables"; -import "./styles.scss"; - -interface SideNavProps { - activeItemId: string; - onClick: (id: string) => void; - onClose: () => void; -} - -export const SideNav = ({ activeItemId, onClick, onClose }: SideNavProps) => { - const sideNavRef = createRef(); - - const [containerOffsetTop, setContainerOffsetTop] = useState< - number | undefined - >(); - const [isSideNavFixed, setIsSideNavFixed] = useState(false); - - const scrollHandler = debounce(() => { - if (!containerOffsetTop) { - return; - } - - window.requestAnimationFrame(() => { - const isLargeScreen = window.matchMedia( - `(min-width: ${BREAKPOINT_SMALL}px)`, - ); - const isFixed = - isLargeScreen.matches && window.pageYOffset >= containerOffsetTop; - - setIsSideNavFixed(isFixed); - }); - }, 50); - - // Get and set offset top of the layout container - useLayoutEffect(() => { - if (sideNavRef?.current) { - const offsetTop = ( - sideNavRef?.current?.closest( - `.${CSS_CLASS_LAYOUT_CONTAINER}`, - ) as HTMLDivElement - )?.offsetTop; - setContainerOffsetTop(offsetTop || 0); - } - }, [sideNavRef]); - - // Handle scroll - useLayoutEffect(() => { - window.addEventListener("scroll", scrollHandler, true); - - return () => { - window.removeEventListener("scroll", scrollHandler, true); - }; - }, [scrollHandler]); - - const handleClick = (itemId: string) => { - onClick(itemId); - onClose(); - }; - - return ( -
-
- {componentsInDisplayOrder.map((item) => { - const isActive = activeItemId === item.id; - - return ( -
handleClick(item.id) })} - > - {item.label} -
- ); - })} -
- -
- } - /> -
-
- ); -}; diff --git a/@stellar/design-system-website/src/components/SideNav/styles.scss b/@stellar/design-system-website/src/components/SideNav/styles.scss deleted file mode 100644 index 17a77ec4..00000000 --- a/@stellar/design-system-website/src/components/SideNav/styles.scss +++ /dev/null @@ -1,54 +0,0 @@ -.SideNav { - width: calc(var(--SideNav-width) - 1rem); - // 8 rem is top + footer - height: calc(100% - 8rem); - overflow-y: auto; - position: relative; - top: 0; - transition: top var(--anim-transition-default); - - &--fixed { - position: fixed; - top: 1rem; - } - - @media (max-width: 600px) { - background-color: var(--color-gray-80); - width: var(--SideNav-width); - height: 100%; - } - - &__content { - @media (max-width: 600px) { - padding: 1.875rem 1rem; - } - } - - &__item { - font-size: 0.875rem; - line-height: 1.375rem; - color: var(--color-gray-90); - opacity: 0.4; - transition: opacity var(--anim-transition-default); - cursor: pointer; - margin-bottom: 0.75rem; - - &--active { - opacity: 1; - cursor: default; - font-weight: var(--font-weight-medium); - } - - @media (hover: hover) { - &:hover { - opacity: 1; - } - } - } - - &__close { - position: absolute; - top: 1rem; - right: 0.5rem; - } -} diff --git a/@stellar/design-system-website/src/constants/componentDetails.ts b/@stellar/design-system-website/src/constants/componentDetails.ts deleted file mode 100644 index 8c22d2f9..00000000 --- a/@stellar/design-system-website/src/constants/componentDetails.ts +++ /dev/null @@ -1,60 +0,0 @@ -import { assetIcons } from "constants/details/assetIcons"; -import { assets } from "constants/details/assets"; -import { avatars } from "constants/details/avatars"; -import { branding } from "constants/details/branding"; -import { badges } from "constants/details/badges"; -import { banners } from "constants/details/banners"; -import { buttons } from "constants/details/buttons"; -import { cards } from "constants/details/cards"; -import { checkboxes } from "constants/details/checkboxes"; -import { copyTexts } from "constants/details/copyTexts"; -import { iconButtons } from "constants/details/iconButtons"; -import { inputs } from "constants/details/inputs"; -import { layout } from "constants/details/layout"; -import { loaders } from "constants/details/loaders"; -import { modals } from "constants/details/modals"; -import { navButtons } from "constants/details/navButtons"; -import { notifications } from "constants/details/notifications"; -import { pagination } from "constants/details/pagination"; -import { profiles } from "constants/details/profiles"; -import { pieProgress } from "constants/details/pieProgress"; -import { radioButtons } from "constants/details/radioButtons"; -import { selects } from "constants/details/selects"; -import { tables } from "constants/details/tables"; -import { textareas } from "constants/details/textareas"; -import { links } from "constants/details/links"; -import { toggles } from "constants/details/toggles"; -import { tooltips } from "constants/details/tooltips"; -import { typography } from "constants/details/typography"; -import { ComponentDetailsList } from "types/types"; - -export const componentDetails: ComponentDetailsList = { - assetIcons, - assets, - avatars, - badges, - banners, - branding, - buttons, - cards, - checkboxes, - copyTexts, - iconButtons, - inputs, - layout, - links, - loaders, - modals, - navButtons, - notifications, - pagination, - profiles, - pieProgress, - radioButtons, - selects, - tables, - textareas, - toggles, - tooltips, - typography, -}; diff --git a/@stellar/design-system-website/src/constants/componentsInDisplayOrder.ts b/@stellar/design-system-website/src/constants/componentsInDisplayOrder.ts deleted file mode 100644 index 486f4c94..00000000 --- a/@stellar/design-system-website/src/constants/componentsInDisplayOrder.ts +++ /dev/null @@ -1,121 +0,0 @@ -import { ComponentDetailsId } from "types/types"; - -interface ComponentsInDisplayOrder { - id: ComponentDetailsId; - label: string; -} - -export const componentsInDisplayOrder: ComponentsInDisplayOrder[] = [ - { - id: ComponentDetailsId.typography, - label: "Typography", - }, - { - id: ComponentDetailsId.branding, - label: "Branding", - }, - { - id: ComponentDetailsId.assets, - label: "Assets", - }, - { - id: ComponentDetailsId.avatars, - label: "Avatars", - }, - { - id: ComponentDetailsId.profiles, - label: "Profiles", - }, - { - id: ComponentDetailsId.assetIcons, - label: "Asset icons", - }, - { - id: ComponentDetailsId.loaders, - label: "Loaders", - }, - { - id: ComponentDetailsId.notifications, - label: "Notifications", - }, - { - id: ComponentDetailsId.banners, - label: "Banners", - }, - { - id: ComponentDetailsId.buttons, - label: "Buttons", - }, - { - id: ComponentDetailsId.iconButtons, - label: "Icon buttons", - }, - { - id: ComponentDetailsId.navButtons, - label: "Navigation buttons", - }, - { - id: ComponentDetailsId.links, - label: "Links", - }, - { - id: ComponentDetailsId.inputs, - label: "Inputs", - }, - { - id: ComponentDetailsId.selects, - label: "Selects", - }, - { - id: ComponentDetailsId.textareas, - label: "Textareas", - }, - { - id: ComponentDetailsId.checkboxes, - label: "Checkboxes", - }, - { - id: ComponentDetailsId.radioButtons, - label: "Radio buttons", - }, - { - id: ComponentDetailsId.toggles, - label: "Toggles", - }, - { - id: ComponentDetailsId.badges, - label: "Badges", - }, - { - id: ComponentDetailsId.modals, - label: "Modals", - }, - { - id: ComponentDetailsId.cards, - label: "Cards", - }, - { - id: ComponentDetailsId.layout, - label: "Layout", - }, - { - id: ComponentDetailsId.tables, - label: "Tables", - }, - { - id: ComponentDetailsId.pagination, - label: "Pagination", - }, - { - id: ComponentDetailsId.pieProgress, - label: "Pie progress", - }, - { - id: ComponentDetailsId.tooltips, - label: "Tooltips", - }, - { - id: ComponentDetailsId.copyTexts, - label: "Copy text", - }, -]; diff --git a/@stellar/design-system-website/src/constants/details/assetIcons.tsx b/@stellar/design-system-website/src/constants/details/assetIcons.tsx deleted file mode 100644 index 4acd7a94..00000000 --- a/@stellar/design-system-website/src/constants/details/assetIcons.tsx +++ /dev/null @@ -1,114 +0,0 @@ -import { AssetIcon } from "@stellar/design-system"; -import { ComponentDetails, ComponentDetailsId } from "types/types"; - -export const assetIcons: ComponentDetails = { - id: ComponentDetailsId.assetIcons, - title: "Asset icons", - description: `Asset image displayed in a circle from a URL source. The component accepts multiple sources to show currency pair, for example.`, - shortDescription: "Asset image displayed in a circle", - examples: [ - { - title: "Single asset", - description: "", - component: [ - , - , - ], - }, - { - title: "Asset pair", - description: "", - component: [ - , - ], - }, - ], - props: [ - { - prop: "source", - type: ["AssetIconSource[]"], - default: null, - optional: false, - description: "Asset source data", - }, - { - prop: "borderColor", - type: ["string"], - default: null, - optional: true, - description: "Asset border color", - }, - // Adding a sub-title to indicate AssetIconSource types - { - prop: "AssetIconSource", - type: [], - default: null, - optional: false, - description: "", - }, - { - prop: "image", - type: ["string"], - default: null, - optional: false, - description: "Image URL", - }, - { - prop: "altText", - type: ["string"], - default: null, - optional: false, - description: "Image alt text", - }, - { - prop: "imageSize", - type: ["string"], - default: null, - optional: true, - description: "Custom size of the image inside the circle", - }, - { - prop: "backgroundColor", - type: ["string"], - default: null, - optional: true, - description: "Custom background color", - }, - ], - externalProps: { - link: "", - label: "", - }, -}; diff --git a/@stellar/design-system-website/src/constants/details/avatars.tsx b/@stellar/design-system-website/src/constants/details/avatars.tsx deleted file mode 100644 index fa5cac55..00000000 --- a/@stellar/design-system-website/src/constants/details/avatars.tsx +++ /dev/null @@ -1,40 +0,0 @@ -import { Avatar, Link } from "@stellar/design-system"; -import { ComponentDetails, ComponentDetailsId } from "types/types"; - -export const avatars: ComponentDetails = { - id: ComponentDetailsId.avatars, - title: "Avatars", - description: ( - <> - Unique identicon of public Stellar address. We’re using{" "} - - stellar-identicon-js - - . - - ), - shortDescription: "Identicon as an avatar", - examples: [ - { - title: "", - description: "", - component: [ - , - , - ], - }, - ], - props: [ - { - prop: "publicAddress", - type: ["string"], - default: null, - optional: false, - description: "Public Stellar address", - }, - ], - externalProps: { - link: "", - label: "", - }, -}; diff --git a/@stellar/design-system-website/src/constants/details/badges.tsx b/@stellar/design-system-website/src/constants/details/badges.tsx deleted file mode 100644 index 99fe81ce..00000000 --- a/@stellar/design-system-website/src/constants/details/badges.tsx +++ /dev/null @@ -1,63 +0,0 @@ -import { Badge } from "@stellar/design-system"; -import { ComponentDetails, ComponentDetailsId } from "types/types"; - -export const badges: ComponentDetails = { - id: ComponentDetailsId.badges, - title: "Badges", - description: ( - <> - Badge is used to label or categorize an item. There are five - variants of the Tag: default,{" "} - success, warning, pending, and{" "} - error. - - ), - shortDescription: "Used to label or categorize items", - examples: [ - { - title: "Default", - description: "", - component: [Label], - }, - { - title: "Success", - description: "", - component: [Label], - }, - { - title: "Warning", - description: "", - component: [Label], - }, - { - title: "Pending", - description: "", - component: [Label], - }, - { - title: "Error", - description: "", - component: [Label], - }, - ], - props: [ - { - prop: "children", - type: ["string"], - default: null, - optional: false, - description: "Label of the badge", - }, - { - prop: "variant", - type: ["default", "success", "warning", "pending", "error"], - default: "default", - optional: true, - description: "Variant of the badge", - }, - ], - externalProps: { - link: "", - label: "", - }, -}; diff --git a/@stellar/design-system-website/src/constants/details/banners.tsx b/@stellar/design-system-website/src/constants/details/banners.tsx deleted file mode 100644 index a3aca3b9..00000000 --- a/@stellar/design-system-website/src/constants/details/banners.tsx +++ /dev/null @@ -1,63 +0,0 @@ -import { Banner } from "@stellar/design-system"; -import { ComponentDetails, ComponentDetailsId } from "types/types"; - -export const banners: ComponentDetails = { - id: ComponentDetailsId.banners, - title: "Banners", - description: ( - <> - Use banner to display messages at the top of the page, stretching across - the whole width. There are five variants default,{" "} - primary,success, error, and{" "} - warning. - - ), - shortDescription: "Use banners to display messages at the top of the page", - examples: [ - { - title: "Default", - description: "", - component: [Default message], - }, - { - title: "Primary", - description: "", - component: [Primary message], - }, - { - title: "Success", - description: "", - component: [Success message], - }, - { - title: "Error", - description: "", - component: [Error message], - }, - { - title: "Warning", - description: "", - component: [Warning message], - }, - ], - props: [ - { - prop: "children", - type: ["string", "ReactNode"], - default: null, - optional: false, - description: "Message to display in the banner", - }, - { - prop: "variant", - type: ["default", "primary", "success", "error", "warning"], - default: null, - optional: false, - description: "Variant of the banner", - }, - ], - externalProps: { - link: "", - label: "", - }, -}; diff --git a/@stellar/design-system-website/src/constants/details/branding.tsx b/@stellar/design-system-website/src/constants/details/branding.tsx deleted file mode 100644 index d22b8cc3..00000000 --- a/@stellar/design-system-website/src/constants/details/branding.tsx +++ /dev/null @@ -1,36 +0,0 @@ -import { ProjectLogo } from "@stellar/design-system"; -import { ComponentDetails, ComponentDetailsId } from "types/types"; - -export const branding: ComponentDetails = { - id: ComponentDetailsId.branding, - title: "Branding", - description: `Branding components, such as project logo.`, - shortDescription: "Branding components, such as project logos", - examples: [ - { - title: "Project logo", - description: "Project’s logo with a name and link.", - component: [], - }, - ], - props: [ - { - prop: "title", - type: ["string"], - default: null, - optional: true, - description: "Project name", - }, - { - prop: "link", - type: ["string"], - default: "/", - optional: true, - description: "Project website link", - }, - ], - externalProps: { - link: "", - label: "", - }, -}; diff --git a/@stellar/design-system-website/src/constants/details/buttons.tsx b/@stellar/design-system-website/src/constants/details/buttons.tsx deleted file mode 100644 index b8f64604..00000000 --- a/@stellar/design-system-website/src/constants/details/buttons.tsx +++ /dev/null @@ -1,636 +0,0 @@ -import { Button, Icon } from "@stellar/design-system"; -import { ComponentDetails, ComponentDetailsId } from "types/types"; - -export const buttons: ComponentDetails = { - id: ComponentDetailsId.buttons, - title: "Buttons", - description: ( - <> - Button is used to trigger an action that is not opening a - link (use Link instead). There are three variants of the{" "} - Button: primary, secondary, and{" "} - tertiary. - - ), - shortDescription: "Used to trigger an action that is not opening a link", - examples: [ - { - title: "Primary, medium", - description: "", - component: [ - , - , - , - , - , - , - , - , - , - , - , - ], - }, - { - title: "Primary, small", - description: "", - component: [ - , - , - , - , - , - , - , - , - , - ], - }, - { - title: "Primary, extra-small", - description: "", - component: [ - , - , - , - , - , - , - , - , - , - ], - }, - - { - title: "Secondary, medium", - description: "", - component: [ - , - , - , - , - , - , - , - , - , - ], - }, - { - title: "Secondary, small", - description: "", - component: [ - , - , - , - , - , - , - , - , - , - ], - }, - { - title: "Secondary, extra-small", - description: "", - component: [ - , - , - , - , - , - , - , - , - , - ], - }, - { - title: "Tertiary, medium", - description: "", - component: [ - , - , - , - , - , - , - , - , - , - ], - }, - { - title: "Tertiary, small", - description: "", - component: [ - , - , - , - , - , - , - , - , - , - ], - }, - { - title: "Tertiary, extra-small", - description: "", - component: [ - , - , - , - , - , - , - , - , - , - ], - }, - { - title: "Destructive, medium", - description: "", - component: [ - , - , - , - , - , - , - , - , - , - ], - }, - { - title: "Error, medium", - description: "", - component: [ - , - , - , - , - , - , - , - , - , - ], - }, - { - title: "Success, medium", - description: "", - component: [ - , - , - , - , - , - , - , - , - , - ], - }, - ], - props: [ - { - prop: "variant", - type: [ - "primary", - "secondary", - "tertiary", - "destructive", - "error", - "success", - ], - default: null, - optional: false, - description: "Variant of the button", - }, - { - prop: "size", - type: ["md", "sm", "xs"], - default: null, - optional: false, - description: "Size of the button", - }, - { - prop: "children", - type: ["string", "ReactNode"], - default: null, - optional: true, - description: "Label of the button", - }, - { - prop: "icon", - type: ["ReactNode"], - default: null, - optional: true, - description: "Icon element", - }, - { - prop: "iconPosition", - type: ["left", "right"], - default: "right", - optional: true, - description: "Position of the icon", - }, - { - prop: "isLoading", - type: ["Boolean"], - default: null, - optional: true, - description: "Loading state indicator", - }, - { - prop: "isUppercase", - type: ["Boolean"], - default: null, - optional: true, - description: "Uppercase label", - }, - { - prop: "isFullWidth", - type: ["Boolean"], - default: null, - optional: true, - description: "Sets width of the button to parent container", - }, - { - prop: "isPill", - type: ["Boolean"], - default: null, - optional: true, - description: "Pill shaped button", - }, - { - prop: "isExtraPadding", - type: ["Boolean"], - default: null, - optional: true, - description: "Button with extra padding", - }, - ], - externalProps: { - link: "https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#attributes", - label: "button attributes", - }, -}; diff --git a/@stellar/design-system-website/src/constants/details/cards.tsx b/@stellar/design-system-website/src/constants/details/cards.tsx deleted file mode 100644 index 3521dc2e..00000000 --- a/@stellar/design-system-website/src/constants/details/cards.tsx +++ /dev/null @@ -1,65 +0,0 @@ -import { Card } from "@stellar/design-system"; -import { ComponentDetails, ComponentDetailsId } from "types/types"; - -export const cards: ComponentDetails = { - id: ComponentDetailsId.cards, - title: "Cards", - description: `Container with flexible dimensions for any type of content.`, - shortDescription: "Container for any type of content", - examples: [ - { - title: "Default/primary card", - description: "", - component: [Content], - }, - { - title: "Small border radius", - description: "", - component: [Content], - }, - { - title: "Card without padding and shadow", - description: "", - component: [Content], - }, - { - title: "Highlighted card", - description: "", - component: [Content], - }, - ], - props: [ - { - prop: "children", - type: ["ReactNode"], - default: null, - optional: false, - description: "Card content", - }, - { - prop: "variant", - type: ["primary", "secondary"], - default: "primary", - optional: true, - description: "Variant of the card", - }, - { - prop: "noPadding", - type: ["boolean"], - default: null, - optional: true, - description: "Remove card padding", - }, - { - prop: "borderRadiusSize", - type: ["sm", "md"], - default: "md", - optional: true, - description: "Card border radius", - }, - ], - externalProps: { - link: "", - label: "", - }, -}; diff --git a/@stellar/design-system-website/src/constants/details/checkboxes.tsx b/@stellar/design-system-website/src/constants/details/checkboxes.tsx deleted file mode 100644 index 7d29710f..00000000 --- a/@stellar/design-system-website/src/constants/details/checkboxes.tsx +++ /dev/null @@ -1,290 +0,0 @@ -import { Checkbox } from "@stellar/design-system"; -import { ComponentDetails, ComponentDetailsId } from "types/types"; - -export const checkboxes: ComponentDetails = { - id: ComponentDetailsId.checkboxes, - title: "Checkboxes", - description: ( - <> - Checkbox component is a form input element, which allows you - to select single values for submission. All native HTML{" "} - checkbox input attributes apply. - - ), - shortDescription: - "Form input element, which allows you to select single values for submission", - examples: [ - { - title: "Default, medium", - description: "", - component: [ - , - , - ], - }, - { - title: "Default, small", - description: "", - component: [ - , - , - ], - }, - { - title: "Default, extra-small", - description: "", - component: [ - , - , - ], - }, - { - title: "Checked, medium", - description: "", - component: [ - , - , - ], - }, - { - title: "Checked, small", - description: "", - component: [ - , - , - ], - }, - { - title: "Checked, extra-small", - description: "", - component: [ - , - , - ], - }, - { - title: "Checkbox with long label, medium", - description: "", - component: [ - , - , - ], - }, - { - title: "Checkbox with long label, small", - description: "", - component: [ - , - , - ], - }, - { - title: "Checkbox with long label, extra-small", - description: "", - component: [ - , - , - ], - }, - { - title: "Checkbox with note / error, medium", - description: "", - component: [ - , - , - , - ], - }, - { - title: "Checkbox with note / error, small", - description: "", - component: [ - , - , - , - ], - }, - { - title: "Checkbox with note / error, extra-small", - description: "", - component: [ - , - , - , - ], - }, - { - title: "Without label", - description: "", - component: [], - }, - ], - props: [ - { - prop: "id", - type: ["string"], - default: null, - optional: false, - description: "ID of the checkbox should be unique", - }, - { - prop: "fieldSize", - type: ["md", "sm", "xs"], - default: null, - optional: false, - description: "Size of the checkbox", - }, - { - prop: "label", - type: ["string", "ReactNode"], - default: null, - optional: true, - description: "Label of the checkbox", - }, - { - prop: "note", - type: ["string", "ReactNode"], - default: null, - optional: true, - description: "Note message of the checkbox", - }, - { - prop: "error", - type: ["string", "ReactNode"], - default: null, - optional: true, - description: "Error message of the checkbox", - }, - { - prop: "isError", - type: ["boolean"], - default: null, - optional: true, - description: "Checkbox error without a message", - }, - ], - externalProps: { - link: "https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attributes", - label: "input attributes", - }, -}; diff --git a/@stellar/design-system-website/src/constants/details/copyTexts.tsx b/@stellar/design-system-website/src/constants/details/copyTexts.tsx deleted file mode 100644 index 8b015eba..00000000 --- a/@stellar/design-system-website/src/constants/details/copyTexts.tsx +++ /dev/null @@ -1,96 +0,0 @@ -import { CopyText, Link, IconButton } from "@stellar/design-system"; -import { ComponentDetails, ComponentDetailsId } from "types/types"; - -export const copyTexts: ComponentDetails = { - id: ComponentDetailsId.copyTexts, - title: "Copy text", - description: ( - <> - Use CopyText component to copy a string. Done action label - can be displayed in a tooltip, by default it will replace component’s - label inline. We’re using{" "} - - react-copy-to-clipboard - {" "} - to do the copy magic. - - ), - shortDescription: "Copy text component with optional tooltip", - examples: [ - { - title: "With tooltip", - description: "Done label is shown in the tooltip instead of inline", - component: [ - - Copy with tooltip - , - ], - }, - { - title: "Using Icon button copy preset", - description: "Text link with copy icon and tooltip", - component: [ - - - , - ], - }, - ], - props: [ - { - prop: "textToCopy", - type: ["string"], - default: null, - optional: false, - description: "Text to copy", - }, - { - prop: "doneLabel", - type: ["string"], - default: "Copied", - optional: true, - description: "Label/text to display when copy action is done", - }, - { - prop: "tooltipPlacement", - type: [ - "bottom", - "bottom-start", - "bottom-end", - "left", - "left-start", - "left-end", - "right", - "right-start", - "right-end", - "top", - "top-start", - "top-end", - ], - default: "bottom", - optional: true, - description: "Position of the tooltip", - }, - { - prop: "title", - type: ["string"], - default: "Copy", - optional: true, - description: "Title text to show on hover", - }, - { - prop: "children", - type: ["ReactElement", "string"], - default: null, - optional: false, - description: "", - }, - ], - externalProps: { - link: "", - label: "", - }, -}; diff --git a/@stellar/design-system-website/src/constants/details/iconButtons.tsx b/@stellar/design-system-website/src/constants/details/iconButtons.tsx deleted file mode 100644 index 9dd39b6f..00000000 --- a/@stellar/design-system-website/src/constants/details/iconButtons.tsx +++ /dev/null @@ -1,267 +0,0 @@ -import { IconButton, Icon } from "@stellar/design-system"; -import { ComponentDetails, ComponentDetailsId } from "types/types"; - -export const iconButtons: ComponentDetails = { - id: ComponentDetailsId.iconButtons, - title: "Icon buttons", - description: ( - <> - IconButton is similar to the Button, and is used - to trigger an action. There are five variants (color is the only - difference): default, error,{" "} - success, warning, highlight; and - two presets: copy and download. - - ), - shortDescription: "Similar to the Button, and is used to trigger an action", - examples: [ - { - title: "Default", - description: "", - component: [ - } altText="Default" />, - } altText="Default" disabled />, - ], - }, - { - title: "Default with label", - description: "", - component: [ - } label="Default" altText="Default" />, - } - label="Default" - altText="Default" - disabled - />, - ], - }, - { - title: "Success", - description: "", - component: [ - } - altText="Success" - variant={IconButton.variant.success} - />, - } - altText="Success" - variant={IconButton.variant.success} - disabled - />, - ], - }, - { - title: "Error", - description: "", - component: [ - } - altText="Error" - variant={IconButton.variant.error} - />, - } - altText="Error" - variant={IconButton.variant.error} - disabled - />, - ], - }, - { - title: "Warning", - description: "", - component: [ - } - altText="Warning" - variant={IconButton.variant.warning} - />, - } - altText="Warning" - variant={IconButton.variant.warning} - disabled - />, - ], - }, - { - title: "Highlight", - description: "", - component: [ - } - altText="Highlight" - variant={IconButton.variant.highlight} - />, - } - altText="Highlight" - variant={IconButton.variant.highlight} - disabled - />, - ], - }, - { - title: "Preset: copy", - description: "", - component: [ - , - , - ], - }, - { - title: "Preset: download", - description: "", - component: [ - , - , - ], - }, - { - title: "Custom color", - description: "", - component: [ - } - altText="Custom color" - customColor="#f0f" - />, - } - altText="Custom color" - customColor="#f0f" - disabled - />, - ], - }, - { - title: "Custom size", - description: "", - component: [ - } - altText="Custom size" - customSize="2rem" - />, - } - altText="Custom size" - customSize="2rem" - disabled - />, - ], - }, - { - title: "Custom size with label", - description: "", - component: [ - } - altText="Custom size" - label="Custom" - customSize="2rem" - />, - } - altText="Custom size" - label="Custom" - customSize="2rem" - disabled - />, - ], - }, - ], - props: [ - { - prop: "IconButtonDefaultProps", - type: [], - default: null, - optional: false, - description: "", - }, - { - prop: "icon", - type: ["ReactNode"], - default: null, - optional: false, - description: "The icon element", - }, - { - prop: "altText", - type: ["string"], - default: null, - optional: false, - description: "Alternative text to show on hover", - }, - { - prop: "IconButtonPresetProps", - type: [], - default: null, - optional: false, - description: "", - }, - { - prop: "preset", - type: ["copy", "download"], - default: null, - optional: false, - description: "Predefined set of icon buttons", - }, - { - prop: "IconButtonBaseProps", - type: [], - default: null, - optional: false, - description: "", - }, - { - prop: "variant", - type: ["default", "error", "success", "warning", "highlight"], - default: "default", - optional: true, - description: "Variant of the component", - }, - { - prop: "label", - type: ["string"], - default: null, - optional: true, - description: "Component label", - }, - { - prop: "customColor", - type: ["string"], - default: null, - optional: true, - description: "Set custom color of the component", - }, - { - prop: "customSize", - type: ["string"], - default: null, - optional: true, - description: "Set custom size of the component", - }, - ], - externalProps: { - link: "", - label: "", - }, -}; diff --git a/@stellar/design-system-website/src/constants/details/inputs.tsx b/@stellar/design-system-website/src/constants/details/inputs.tsx deleted file mode 100644 index 6d52860e..00000000 --- a/@stellar/design-system-website/src/constants/details/inputs.tsx +++ /dev/null @@ -1,457 +0,0 @@ -import { Input, Icon } from "@stellar/design-system"; -import { ComponentDetails, ComponentDetailsId } from "types/types"; - -import { Field } from "./mocks"; - -export const inputs: ComponentDetails = { - id: ComponentDetailsId.inputs, - title: "Inputs", - description: ( - <> - Input component is a form input element, which inherits all - native HTML input element attributes. - - ), - shortDescription: - "Form input element, which inherits all native HTML input element attributes", - examples: [ - { - title: "Default", - description: "", - component: [ - , - , - ], - }, - { - title: "Input with label and placeholder, medium", - description: "", - component: [ - , - , - , - , - ], - }, - { - title: "Input with label and placeholder, small", - description: "", - component: [ - , - , - , - , - ], - }, - { - title: "Input with label and placeholder, extra-small", - description: "", - component: [ - , - , - , - , - ], - }, - { - title: "Input with label and value", - description: "", - component: [ - , - , - , - ], - }, - { - title: "Input with label and note / error, medium", - description: "", - component: [ - , - , - , - ], - }, - { - title: "Input with label and note / error, small", - description: "", - component: [ - , - , - , - ], - }, - { - title: "Input with label and note / error, extra-small", - description: "", - component: [ - , - , - , - ], - }, - { - title: "Input with elements, medium", - description: "", - component: [ - , - } - />, - } - isPill - />, - ], - }, - { - title: "Input with elements, small", - description: "", - component: [ - , - } - />, - } - isPill - />, - ], - }, - { - title: "Input with elements, extra-small", - description: "", - component: [ - , - } - />, - } - isPill - />, - ], - }, - { - title: "Password input", - description: "", - component: [ - , - , - , - ], - }, - { - title: "Input with custom input", - description: "", - component: [ - } - id="input-c-1" - label="Label" - placeholder="Placeholder" - />, - ], - }, - ], - props: [ - { - prop: "id", - type: ["string"], - default: null, - optional: false, - description: "ID of the input should be unique", - }, - { - prop: "fieldSize", - type: ["md", "sm", "xs"], - default: null, - optional: false, - description: "Size of the input", - }, - { - prop: "label", - type: ["string", "ReactNode"], - default: null, - optional: true, - description: "Label of the input", - }, - { - prop: "isLabelUppercase", - type: ["boolean"], - default: null, - optional: true, - description: "Make label uppercase", - }, - { - prop: "isPill", - type: ["boolean"], - default: null, - optional: true, - description: "Pill shaped input", - }, - { - prop: "isError", - type: ["boolean"], - default: null, - optional: true, - description: "Input error without a message", - }, - { - prop: "isExtraPadding", - type: ["Boolean"], - default: null, - optional: true, - description: "Input with extra padding", - }, - { - prop: "isPassword", - type: ["Boolean"], - default: null, - optional: true, - description: "Password input preset with show/hide button", - }, - { - prop: "rightElement", - type: ["string", "ReactNode"], - default: null, - optional: true, - description: "Right side element of the input", - }, - { - prop: "note", - type: ["string", "ReactNode"], - default: null, - optional: true, - description: "Note message of the input", - }, - { - prop: "error", - type: ["string", "ReactNode"], - default: null, - optional: true, - description: "Error message of the input", - }, - { - prop: "customInput", - type: ["React.ReactNode"], - default: null, - optional: true, - description: - "Use a specific input rather than a generic HTML input (useful for Formik or otherwise controlled inputs)", - }, - ], - externalProps: { - link: "https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attributes", - label: "input attributes", - }, -}; diff --git a/@stellar/design-system-website/src/constants/details/layout.tsx b/@stellar/design-system-website/src/constants/details/layout.tsx deleted file mode 100644 index 33bc97b0..00000000 --- a/@stellar/design-system-website/src/constants/details/layout.tsx +++ /dev/null @@ -1,204 +0,0 @@ -import { Layout } from "@stellar/design-system"; -import { ComponentDetails, ComponentDetailsId } from "types/types"; - -export const layout: ComponentDetails = { - id: ComponentDetailsId.layout, - title: "Layout", - description: ( - <> - Use Layout component’s sub-components, such as{" "} - Inset, Header, and Footer, to build - page layouts. - - ), - shortDescription: "Elements to build page layouts", - examples: [ - { - title: "Default header", - description: "", - component: [ - , - ], - }, - { - title: "Default footer", - description: "", - component: [], - }, - { - title: "Content with Inset", - description: "", - component: [ - - Content - , - ], - }, - ], - props: [], - subComponents: { - description: "", - components: [ - { - component: "Inset", - description: - "Inset defines width/max-width and horizontal margins. It is used in upper level block/section components to have consistent horizontal styling.", - props: [ - { - prop: "children", - type: ["ReactNode"], - default: null, - optional: false, - description: "Content of the component", - }, - ], - }, - { - component: "Content", - description: - "Page level content of the website (all other content goes in here). It is on the same level as header and footer.", - props: [ - { - prop: "children", - type: ["ReactNode"], - default: null, - optional: false, - description: "Content of the component", - }, - ], - }, - { - component: "Header", - description: "Header of the website.", - props: [ - { - prop: "projectId", - type: ["string"], - default: null, - optional: false, - description: "ID of the project", - }, - { - prop: "projectTitle", - type: ["string"], - default: null, - optional: true, - description: "Name of the project", - }, - { - prop: "projectLink", - type: ["string"], - default: null, - optional: true, - description: "Link of the project", - }, - { - prop: "hasThemeSwitch", - type: ["boolean"], - default: null, - optional: true, - description: "Show theme switch", - }, - { - prop: "onThemeSwitchActionEnd", - type: ["(isDarkMode: boolean) => void"], - default: null, - optional: true, - description: "Function to call at the end of the switch event", - }, - { - prop: "onSignOut", - type: ["() => void"], - default: null, - optional: true, - description: "Show sign out link if function is provided", - }, - { - prop: "showButtonBorder", - type: ["boolean"], - default: null, - optional: true, - description: "Show border around navigation buttons", - }, - { - prop: "contentCenter", - type: ["ReactElement"], - default: null, - optional: true, - description: "Custom content in the middle", - }, - { - prop: "contentRight", - type: ["ReactElement"], - default: null, - optional: true, - description: "Custom content on the right", - }, - { - prop: "menu", - type: ["{ isEnabled: boolean; onOpen: () => void; }"], - default: null, - optional: true, - description: "Show burger menu icon", - }, - ], - }, - { - component: "Footer", - description: "Footer of the website.", - props: [ - { - prop: "hideLegalLinks", - type: ["boolean"], - default: null, - optional: true, - description: "Hide legal links", - }, - { - prop: "hideTopBorder", - type: ["boolean"], - default: null, - optional: true, - description: "Hide top border", - }, - { - prop: "gitHubLink", - type: ["string"], - default: null, - optional: true, - description: "Link to GitHub repo", - }, - { - prop: "gitHubLabel", - type: ["string"], - default: null, - optional: true, - description: "Title/label of GitHub link (visible on hover)", - }, - { - prop: "marginTop", - type: ["string"], - default: null, - optional: true, - description: "Set custom margin top", - }, - { - prop: "children", - type: ["ReactNode"], - default: null, - optional: true, - description: "Custom content in the footer", - }, - ], - }, - ], - }, - externalProps: { - link: "", - label: "", - }, -}; diff --git a/@stellar/design-system-website/src/constants/details/links.tsx b/@stellar/design-system-website/src/constants/details/links.tsx deleted file mode 100644 index 7fbee114..00000000 --- a/@stellar/design-system-website/src/constants/details/links.tsx +++ /dev/null @@ -1,832 +0,0 @@ -/* eslint-disable react/jsx-no-comment-textnodes */ -import { Link, Icon } from "@stellar/design-system"; -import { ComponentDetails, ComponentDetailsId } from "types/types"; - -export const links: ComponentDetails = { - id: ComponentDetailsId.links, - title: "Links", - description: ( - <> - Link component is a styled HTML anchor (a) - element. Use Link to open links or to navigate to other - pages. There are two variants (primary and{" "} - secondary), and underline prop. - - ), - shortDescription: - "Used to trigger an action to open links or to navigate to other pages", - examples: [ - { - title: "Primary (default)", - description: "", - component: [ -

- Some text link more text -

, -

- Some text link more text -

, - ], - }, - { - title: "Primary (default) with icon on the left", - description: "", - component: [ -

- Some text{" "} - } iconPosition="left"> - link - {" "} - more text -

, -

- Some text{" "} - } iconPosition="left" isDisabled> - link - {" "} - more text -

, - ], - }, - { - title: "Primary (default) with icon on the right", - description: "", - component: [ -

- Some text{" "} - } iconPosition="right"> - link - {" "} - more text -

, -

- Some text{" "} - } iconPosition="right" isDisabled> - link - {" "} - more text -

, - ], - }, - { - title: "Primary (default) underline", - description: "", - component: [ -

- Some text link more text -

, -

- Some text{" "} - - link - {" "} - more text -

, - ], - }, - { - title: "Primary (default) underline with icon on the left", - description: "", - component: [ -

- Some text{" "} - } iconPosition="left"> - link - {" "} - more text -

, -

- Some text{" "} - } - iconPosition="left" - isDisabled - > - link - {" "} - more text -

, - ], - }, - { - title: "Primary (default) underline with icon on the right", - description: "", - component: [ -

- Some text{" "} - } iconPosition="right"> - link - {" "} - more text -

, -

- Some text{" "} - } - iconPosition="right" - isDisabled - > - link - {" "} - more text -

, - ], - }, - { - title: "Primary, medium", - description: "", - component: [ - Medium, - - Medium - , - - Medium - , - - Medium - , - - Medium - , - - Medium - , - - Medium - , - } iconPosition="right"> - Medium - , - } - iconPosition="right" - isUnderline - > - Medium - , - } - iconPosition="right" - isUnderline - isDisabled - > - Medium - , - } - iconPosition="right" - isUppercase - > - Medium - , - } - iconPosition="right" - isUnderline - isUppercase - > - Medium - , - } - iconPosition="right" - isUnderline - isUppercase - isDisabled - > - Medium - , - ], - }, - { - title: "Primary, small", - description: "", - component: [ - Small, - - Small - , - - Small - , - - Small - , - - Small - , - - Small - , - - Small - , - } iconPosition="right"> - Small - , - } - iconPosition="right" - isUnderline - > - Small - , - } - iconPosition="right" - isUnderline - isDisabled - > - Small - , - } - iconPosition="right" - isUppercase - > - Small - , - } - iconPosition="right" - isUnderline - isUppercase - > - Small - , - } - iconPosition="right" - isUnderline - isUppercase - isDisabled - > - Small - , - ], - }, - { - title: "Primary, extra-small", - description: "", - component: [ - Extra small, - - Extra small - , - - Extra small - , - - Extra small - , - - Extra small - , - - Extra small - , - - Extra small - , - } iconPosition="right"> - Extra small - , - } - iconPosition="right" - isUnderline - > - Extra small - , - } - iconPosition="right" - isUnderline - isDisabled - > - Extra small - , - } - iconPosition="right" - isUppercase - > - Extra small - , - } - iconPosition="right" - isUnderline - isUppercase - > - Extra small - , - } - iconPosition="right" - isUnderline - isUppercase - isDisabled - > - Extra small - , - ], - }, - { - title: "Secondary", - description: "", - component: [ -

- Some text link more text -

, -

- Some text{" "} - - link - {" "} - more text -

, - ], - }, - { - title: "Secondary with icon on the left", - description: "", - component: [ -

- Some text{" "} - } - iconPosition="left" - > - link - {" "} - more text -

, -

- Some text{" "} - } - iconPosition="left" - isDisabled - > - link - {" "} - more text -

, - ], - }, - { - title: "Secondary with icon on the right", - description: "", - component: [ -

- Some text{" "} - } - iconPosition="right" - > - link - {" "} - more text -

, -

- Some text{" "} - } - iconPosition="right" - isDisabled - > - link - {" "} - more text -

, - ], - }, - { - title: "Secondary underline", - description: "", - component: [ -

- Some text{" "} - - link - {" "} - more text -

, -

- Some text{" "} - - link - {" "} - more text -

, - ], - }, - { - title: "Secondary underline with icon on the left", - description: "", - component: [ -

- Some text{" "} - } - iconPosition="left" - > - link - {" "} - more text -

, -

- Some text{" "} - } - iconPosition="left" - isDisabled - > - link - {" "} - more text -

, - ], - }, - { - title: "Secondary underline with icon on the right", - description: "", - component: [ -

- Some text{" "} - } - iconPosition="right" - > - link - {" "} - more text -

, -

- Some text{" "} - } - iconPosition="right" - isDisabled - > - link - {" "} - more text -

, - ], - }, - { - title: "Secondary, medium", - description: "", - component: [ - - Medium - , - - Medium - , - - Medium - , - - Medium - , - - Medium - , - - Medium - , - - Medium - , - } - iconPosition="right" - > - Medium - , - } - iconPosition="right" - isUnderline - > - Medium - , - } - iconPosition="right" - isUnderline - isDisabled - > - Medium - , - } - iconPosition="right" - isUppercase - > - Medium - , - } - iconPosition="right" - isUnderline - isUppercase - > - Medium - , - } - iconPosition="right" - isUnderline - isUppercase - isDisabled - > - Medium - , - ], - }, - { - title: "Secondary, small", - description: "", - component: [ - - Small - , - - Small - , - - Small - , - - Small - , - - Small - , - - Small - , - - Small - , - } - iconPosition="right" - > - Small - , - } - iconPosition="right" - isUnderline - > - Small - , - } - iconPosition="right" - isUnderline - isDisabled - > - Small - , - } - iconPosition="right" - isUppercase - > - Small - , - } - iconPosition="right" - isUnderline - isUppercase - > - Small - , - } - iconPosition="right" - isUnderline - isUppercase - isDisabled - > - Small - , - ], - }, - { - title: "Secondary, extra-small", - description: "", - component: [ - - Extra-small - , - - Extra-small - , - - Extra-small - , - - Extra-small - , - - Extra-small - , - - Extra-small - , - - Extra-small - , - } - iconPosition="right" - > - Extra-small - , - } - iconPosition="right" - isUnderline - > - Extra-small - , - } - iconPosition="right" - isUnderline - isDisabled - > - Extra-small - , - } - iconPosition="right" - isUppercase - > - Extra-small - , - } - iconPosition="right" - isUnderline - isUppercase - > - Extra-small - , - } - iconPosition="right" - isUnderline - isUppercase - isDisabled - > - Extra-small - , - ], - }, - ], - props: [ - { - prop: "children", - type: ["string", "ReactNode"], - default: null, - optional: false, - description: "Content of the link", - }, - { - prop: "variant", - type: ["primary", "secondary"], - default: "primary", - optional: true, - description: "Variant of the link", - }, - { - prop: "size", - type: ["md", "sm", "xs"], - default: null, - optional: true, - description: "Size of the link, will inherit parent size if not set", - }, - { - prop: "icon", - type: ["ReactNode"], - default: null, - optional: true, - description: "Icon element", - }, - { - prop: "iconPosition", - type: ["left", "right"], - default: "right", - optional: true, - description: "Position of the icon", - }, - { - prop: "isDisabled", - type: ["Boolean"], - default: null, - optional: true, - description: "Disable the component", - }, - { - prop: "isUnderline", - type: ["Boolean"], - default: null, - optional: true, - description: "Underline the text", - }, - { - prop: "isUppercase", - type: ["Boolean"], - default: null, - optional: true, - description: "Make text uppercase", - }, - ], - externalProps: { - link: "https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#attributes", - label: "anchor element attributes", - }, - notes: [ -

- Link with external href (starting with{" "} - http(s) or //) will have attributes{" "} - rel="noreferrer noopener" and target="_blank"{" "} - automatically added. -

, - ], -}; diff --git a/@stellar/design-system-website/src/constants/details/loaders.tsx b/@stellar/design-system-website/src/constants/details/loaders.tsx deleted file mode 100644 index 7c9526b0..00000000 --- a/@stellar/design-system-website/src/constants/details/loaders.tsx +++ /dev/null @@ -1,35 +0,0 @@ -import { Loader } from "@stellar/design-system"; -import { ComponentDetails, ComponentDetailsId } from "types/types"; - -export const loaders: ComponentDetails = { - id: ComponentDetailsId.loaders, - title: "Loaders", - description: ` - Loading state indicators.`, - shortDescription: "Loading state indicators", - examples: [ - { - title: "Default", - description: ( - <> - Loader component color is set in CSS, and the size can also be set in - CSS or through the size prop. - - ), - component: [, ], - }, - ], - props: [ - { - prop: "size", - type: ["string"], - default: null, - optional: true, - description: "Set custom size of the component", - }, - ], - externalProps: { - link: "", - label: "", - }, -}; diff --git a/@stellar/design-system-website/src/constants/details/mocks.tsx b/@stellar/design-system-website/src/constants/details/mocks.tsx deleted file mode 100644 index e5a263a5..00000000 --- a/@stellar/design-system-website/src/constants/details/mocks.tsx +++ /dev/null @@ -1,4 +0,0 @@ -// used to illustrate a Formik in examples -export const Field = (props: any) => ; - -export const TextareaField = (props: any) => , - , - ], - }, - { - title: "Textarea with label and placeholder, medium", - description: "", - component: [ - , - , - , - ], - }, - { - title: "Textarea with label and long text, small", - description: "", - component: [ - , - , - , - ], - }, - { - title: "Textarea with label and long text, extra-small", - description: "", - component: [ - , - , - , - ], - }, - { - title: "Textarea with label and note / error, medium", - description: "", - component: [ - , - , - , - ], - }, - { - title: "Textarea with label and note / error, small", - description: "", - component: [ - , - , - , - ], - }, - { - title: "Textarea with label and note / error, extra-small", - description: "", - component: [ - , - , - , - ], - }, - { - title: "Textarea with custom input", - description: "", - component: [ -