From 8ddf2403b57960401f2dc8c81fb9cba6cc24ba4e Mon Sep 17 00:00:00 2001 From: Iveta Date: Thu, 6 Jul 2023 14:15:11 -0400 Subject: [PATCH] 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 --- @stellar/design-system-website/.gitignore | 20 + @stellar/design-system-website/README.md | 44 +- .../design-system-website/babel.config.js | 21 +- @stellar/design-system-website/docs/intro.md | 64 + .../docs/tutorial-basics/_category_.json | 8 + .../docs/tutorial-basics/congratulations.md | 30 + .../tutorial-basics/create-a-blog-post.md | 36 + .../docs/tutorial-basics/create-a-document.md | 58 + .../docs/tutorial-basics/create-a-page.md | 45 + .../docs/tutorial-basics/deploy-your-site.md | 35 + .../tutorial-basics/markdown-features.mdx | 157 + .../docs/tutorial-extras/_category_.json | 7 + .../img/docsVersionDropdown.png | Bin 0 -> 25427 bytes .../tutorial-extras/img/localeDropdown.png | Bin 0 -> 27841 bytes .../tutorial-extras/manage-docs-versions.md | 58 + .../tutorial-extras/translate-your-site.md | 90 + .../docusaurus.config.js | 100 + @stellar/design-system-website/package.json | 97 +- .../design-system-website/public/favicon.ico | Bin 7406 -> 0 bytes .../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/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/ElementCode/index.tsx | 145 - .../src/components/ElementCode/styles.scss | 16 - .../src/components/PreviewBlock/index.tsx | 6 + .../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/assets.tsx | 187 - .../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 | 33 + .../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/Playground/index.js | 90 + .../src/theme/Playground/styles.module.css | 33 + .../design-system-website/src/types/types.ts | 113 - .../design-system-website/static/.nojekyll | 0 .../static/img/docusaurus-social-card.jpg | Bin 0 -> 55746 bytes .../static/img/docusaurus.png | Bin 0 -> 5142 bytes .../static/img/favicon.ico | Bin 0 -> 3626 bytes .../design-system-website/static/img/logo.svg | 1 + .../static/img/undraw_docusaurus_mountain.svg | 171 + .../static/img/undraw_docusaurus_react.svg | 170 + .../static/img/undraw_docusaurus_tree.svg | 40 + @stellar/design-system-website/tsconfig.json | 15 +- .../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/package.json | 2 + @stellar/design-system/src/theme.scss | 25 +- yarn.lock | 8774 ++++++++++++----- 96 files changed, 7488 insertions(+), 10707 deletions(-) create mode 100644 @stellar/design-system-website/.gitignore create mode 100644 @stellar/design-system-website/docs/intro.md create mode 100644 @stellar/design-system-website/docs/tutorial-basics/_category_.json create mode 100644 @stellar/design-system-website/docs/tutorial-basics/congratulations.md create mode 100644 @stellar/design-system-website/docs/tutorial-basics/create-a-blog-post.md create mode 100644 @stellar/design-system-website/docs/tutorial-basics/create-a-document.md create mode 100644 @stellar/design-system-website/docs/tutorial-basics/create-a-page.md create mode 100644 @stellar/design-system-website/docs/tutorial-basics/deploy-your-site.md create mode 100644 @stellar/design-system-website/docs/tutorial-basics/markdown-features.mdx create mode 100644 @stellar/design-system-website/docs/tutorial-extras/_category_.json create mode 100644 @stellar/design-system-website/docs/tutorial-extras/img/docsVersionDropdown.png create mode 100644 @stellar/design-system-website/docs/tutorial-extras/img/localeDropdown.png create mode 100644 @stellar/design-system-website/docs/tutorial-extras/manage-docs-versions.md create mode 100644 @stellar/design-system-website/docs/tutorial-extras/translate-your-site.md 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/favicon.ico 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 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 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/PreviewBlock/index.tsx 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/assets.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/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/docusaurus-social-card.jpg create mode 100644 @stellar/design-system-website/static/img/docusaurus.png create mode 100644 @stellar/design-system-website/static/img/favicon.ico create mode 100644 @stellar/design-system-website/static/img/logo.svg create mode 100644 @stellar/design-system-website/static/img/undraw_docusaurus_mountain.svg create mode 100644 @stellar/design-system-website/static/img/undraw_docusaurus_react.svg create mode 100644 @stellar/design-system-website/static/img/undraw_docusaurus_tree.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 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..7533c99d 100644 --- a/@stellar/design-system-website/README.md +++ b/@stellar/design-system-website/README.md @@ -1,3 +1,45 @@ # Stellar Design System Website -TODO +This website is built using [Docusaurus 2](https://docusaurus.io/), a modern +static website generator. + +### Installation + +``` +$ yarn +``` + +### Local Development + +``` +$ 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 + +``` +$ yarn build +``` + +This command generates static content into the `build` directory and can be +served using any static contents hosting service. + +### Deployment + +Using SSH: + +``` +$ USE_SSH=true yarn deploy +``` + +Not using SSH: + +``` +$ GIT_USER= yarn deploy +``` + +If you are using GitHub pages for hosting, this command is a convenient way to +build the website and push to the `gh-pages` branch. 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/intro.md b/@stellar/design-system-website/docs/intro.md new file mode 100644 index 00000000..351b1b29 --- /dev/null +++ b/@stellar/design-system-website/docs/intro.md @@ -0,0 +1,64 @@ +--- +slug: / +sidebar_position: 1 +--- + +# Intro + +```tsx live + + + +``` + +Let's discover **Docusaurus in less than 5 minutes**. + +## Getting Started + +Get started by **creating a new site**. + +Or **try Docusaurus immediately** with +**[docusaurus.new](https://docusaurus.new)**. + +### What you'll need + +- [Node.js](https://nodejs.org/en/download/) version 16.14 or above: + - When installing Node.js, you are recommended to check all checkboxes related + to dependencies. + +## Generate a new site + +Generate a new Docusaurus site using the **classic template**. + +The classic template will automatically be added to your project after you run +the command: + +```bash +npm init docusaurus@latest my-website classic +``` + +You can type this command into Command Prompt, Powershell, Terminal, or any +other integrated terminal of your code editor. + +The command also installs all necessary dependencies you need to run Docusaurus. + +## Start your site + +Run the development server: + +```bash +cd my-website +npm run start +``` + +The `cd` command changes the directory you're working with. In order to work +with your newly created Docusaurus site, you'll need to navigate the terminal +there. + +The `npm run start` command builds your website locally and serves it through a +development server, ready for you to view at http://localhost:3000/. + +Open `docs/intro.md` (this page) and edit some lines: the site **reloads +automatically** and displays your changes. diff --git a/@stellar/design-system-website/docs/tutorial-basics/_category_.json b/@stellar/design-system-website/docs/tutorial-basics/_category_.json new file mode 100644 index 00000000..2e6db55b --- /dev/null +++ b/@stellar/design-system-website/docs/tutorial-basics/_category_.json @@ -0,0 +1,8 @@ +{ + "label": "Tutorial - Basics", + "position": 2, + "link": { + "type": "generated-index", + "description": "5 minutes to learn the most important Docusaurus concepts." + } +} diff --git a/@stellar/design-system-website/docs/tutorial-basics/congratulations.md b/@stellar/design-system-website/docs/tutorial-basics/congratulations.md new file mode 100644 index 00000000..7ae82fa0 --- /dev/null +++ b/@stellar/design-system-website/docs/tutorial-basics/congratulations.md @@ -0,0 +1,30 @@ +--- +sidebar_position: 6 +--- + +# Congratulations! + +You have just learned the **basics of Docusaurus** and made some changes to the +**initial template**. + +Docusaurus has **much more to offer**! + +Have **5 more minutes**? Take a look at +**[versioning](../tutorial-extras/manage-docs-versions.md)** and +**[i18n](../tutorial-extras/translate-your-site.md)**. + +Anything **unclear** or **buggy** in this tutorial? +[Please report it!](https://github.com/facebook/docusaurus/discussions/4610) + +## What's next? + +- Read the [official documentation](https://docusaurus.io/) +- Modify your site configuration with + [`docusaurus.config.js`](https://docusaurus.io/docs/api/docusaurus-config) +- Add navbar and footer items with + [`themeConfig`](https://docusaurus.io/docs/api/themes/configuration) +- Add a custom [Design and Layout](https://docusaurus.io/docs/styling-layout) +- Add a [search bar](https://docusaurus.io/docs/search) +- Find inspirations in the [Docusaurus showcase](https://docusaurus.io/showcase) +- Get involved in the + [Docusaurus Community](https://docusaurus.io/community/support) diff --git a/@stellar/design-system-website/docs/tutorial-basics/create-a-blog-post.md b/@stellar/design-system-website/docs/tutorial-basics/create-a-blog-post.md new file mode 100644 index 00000000..90f4f32b --- /dev/null +++ b/@stellar/design-system-website/docs/tutorial-basics/create-a-blog-post.md @@ -0,0 +1,36 @@ +--- +sidebar_position: 3 +--- + +# Create a Blog Post + +Docusaurus creates a **page for each blog post**, but also a **blog index +page**, a **tag system**, an **RSS** feed... + +## Create your first Post + +Create a file at `blog/2021-02-28-greetings.md`: + +```md title="blog/2021-02-28-greetings.md" +--- +slug: greetings +title: Greetings! +authors: + - name: Joel Marcey + title: Co-creator of Docusaurus 1 + url: https://github.com/JoelMarcey + image_url: https://github.com/JoelMarcey.png + - name: Sébastien Lorber + title: Docusaurus maintainer + url: https://sebastienlorber.com + image_url: https://github.com/slorber.png +tags: [greetings] +--- + +Congratulations, you have made your first post! + +Feel free to play around and edit this post as much you like. +``` + +A new blog post is now available at +[http://localhost:3000/blog/greetings](http://localhost:3000/blog/greetings). diff --git a/@stellar/design-system-website/docs/tutorial-basics/create-a-document.md b/@stellar/design-system-website/docs/tutorial-basics/create-a-document.md new file mode 100644 index 00000000..ccb78efd --- /dev/null +++ b/@stellar/design-system-website/docs/tutorial-basics/create-a-document.md @@ -0,0 +1,58 @@ +--- +sidebar_position: 2 +--- + +# Create a Document + +Documents are **groups of pages** connected through: + +- a **sidebar** +- **previous/next navigation** +- **versioning** + +## Create your first Doc + +Create a Markdown file at `docs/hello.md`: + +```md title="docs/hello.md" +# Hello + +This is my **first Docusaurus document**! +``` + +A new document is now available at +[http://localhost:3000/docs/hello](http://localhost:3000/docs/hello). + +## Configure the Sidebar + +Docusaurus automatically **creates a sidebar** from the `docs` folder. + +Add metadata to customize the sidebar label and position: + +```md title="docs/hello.md" {1-4} +--- +sidebar_label: "Hi!" +sidebar_position: 3 +--- + +# Hello + +This is my **first Docusaurus document**! +``` + +It is also possible to create your sidebar explicitly in `sidebars.js`: + +```js title="sidebars.js" +module.exports = { + tutorialSidebar: [ + "intro", + // highlight-next-line + "hello", + { + type: "category", + label: "Tutorial", + items: ["tutorial-basics/create-a-document"], + }, + ], +}; +``` diff --git a/@stellar/design-system-website/docs/tutorial-basics/create-a-page.md b/@stellar/design-system-website/docs/tutorial-basics/create-a-page.md new file mode 100644 index 00000000..818f8ac8 --- /dev/null +++ b/@stellar/design-system-website/docs/tutorial-basics/create-a-page.md @@ -0,0 +1,45 @@ +--- +sidebar_position: 1 +--- + +# Create a Page + +Add **Markdown or React** files to `src/pages` to create a **standalone page**: + +- `src/pages/index.js` → `localhost:3000/` +- `src/pages/foo.md` → `localhost:3000/foo` +- `src/pages/foo/bar.js` → `localhost:3000/foo/bar` + +## Create your first React Page + +Create a file at `src/pages/my-react-page.js`: + +```jsx title="src/pages/my-react-page.js" +import React from "react"; +import Layout from "@theme/Layout"; + +export default function MyReactPage() { + return ( + +

My React page

+

This is a React page

+ + ); +} +``` + +A new page is now available at +[http://localhost:3000/my-react-page](http://localhost:3000/my-react-page). + +## Create your first Markdown Page + +Create a file at `src/pages/my-markdown-page.md`: + +```mdx title="src/pages/my-markdown-page.md" +# My Markdown page + +This is a Markdown page +``` + +A new page is now available at +[http://localhost:3000/my-markdown-page](http://localhost:3000/my-markdown-page). diff --git a/@stellar/design-system-website/docs/tutorial-basics/deploy-your-site.md b/@stellar/design-system-website/docs/tutorial-basics/deploy-your-site.md new file mode 100644 index 00000000..0879a5f6 --- /dev/null +++ b/@stellar/design-system-website/docs/tutorial-basics/deploy-your-site.md @@ -0,0 +1,35 @@ +--- +sidebar_position: 5 +--- + +# Deploy your site + +Docusaurus is a **static-site-generator** (also called +**[Jamstack](https://jamstack.org/)**). + +It builds your site as simple **static HTML, JavaScript and CSS files**. + +## Build your site + +Build your site **for production**: + +```bash +npm run build +``` + +The static files are generated in the `build` folder. + +## Deploy your site + +Test your production build locally: + +```bash +npm run serve +``` + +The `build` folder is now served at +[http://localhost:3000/](http://localhost:3000/). + +You can now deploy the `build` folder **almost anywhere** easily, **for free** +or very small cost (read the +**[Deployment Guide](https://docusaurus.io/docs/deployment)**). diff --git a/@stellar/design-system-website/docs/tutorial-basics/markdown-features.mdx b/@stellar/design-system-website/docs/tutorial-basics/markdown-features.mdx new file mode 100644 index 00000000..cdcfe48a --- /dev/null +++ b/@stellar/design-system-website/docs/tutorial-basics/markdown-features.mdx @@ -0,0 +1,157 @@ +--- +sidebar_position: 4 +--- + +# Markdown Features + +Docusaurus supports +**[Markdown](https://daringfireball.net/projects/markdown/syntax)** and a few +**additional features**. + +## Front Matter + +Markdown documents have metadata at the top called +[Front Matter](https://jekyllrb.com/docs/front-matter/): + +```text title="my-doc.md" +// highlight-start +--- +id: my-doc-id +title: My document title +description: My document description +slug: /my-custom-url +--- +// highlight-end + +## Markdown heading + +Markdown text with [links](./hello.md) +``` + +## Links + +Regular Markdown links are supported, using url paths or relative file paths. + +```md +Let's see how to [Create a page](/create-a-page). +``` + +```md +Let's see how to [Create a page](./create-a-page.md). +``` + +**Result:** Let's see how to [Create a page](./create-a-page.md). + +## Images + +Regular Markdown images are supported. + +You can use absolute paths to reference images in the static directory +(`static/img/docusaurus.png`): + +```md +![Docusaurus logo](/img/docusaurus.png) +``` + +![Docusaurus logo](/img/docusaurus.png) + +You can reference images relative to the current file as well. This is +particularly useful to colocate images close to the Markdown files using them: + +```md +![Docusaurus logo](./img/docusaurus.png) +``` + +## Code Blocks + +Markdown code blocks are supported with Syntax highlighting. + + ```jsx title="src/components/HelloDocusaurus.js" + function HelloDocusaurus() { + return ( +

Hello, Docusaurus!

+ ) + } + ``` + +```jsx title="src/components/HelloDocusaurus.js" +function HelloDocusaurus() { + return

Hello, Docusaurus!

; +} +``` + +## Admonitions + +Docusaurus has a special syntax to create admonitions and callouts: + + :::tip My tip + + Use this awesome feature option + + ::: + + :::danger Take care + + This action is dangerous + + ::: + +:::tip My tip + +Use this awesome feature option + +::: + +:::danger Take care + +This action is dangerous + +::: + +## MDX and React Components + +[MDX](https://mdxjs.com/) can make your documentation more **interactive** and +allows using any **React components inside Markdown**: + +```jsx +export const Highlight = ({children, color}) => ( + { + alert(`You clicked the color ${color} with label ${children}`) + }}> + {children} + +); + +This is Docusaurus green ! + +This is Facebook blue ! +``` + +export const Highlight = ({ children, color }) => ( + { + alert(`You clicked the color ${color} with label ${children}`); + }} + > + {children} + +); + +This is Docusaurus green ! + +This is Facebook blue ! diff --git a/@stellar/design-system-website/docs/tutorial-extras/_category_.json b/@stellar/design-system-website/docs/tutorial-extras/_category_.json new file mode 100644 index 00000000..a8ffcc19 --- /dev/null +++ b/@stellar/design-system-website/docs/tutorial-extras/_category_.json @@ -0,0 +1,7 @@ +{ + "label": "Tutorial - Extras", + "position": 3, + "link": { + "type": "generated-index" + } +} diff --git a/@stellar/design-system-website/docs/tutorial-extras/img/docsVersionDropdown.png b/@stellar/design-system-website/docs/tutorial-extras/img/docsVersionDropdown.png new file mode 100644 index 0000000000000000000000000000000000000000..97e4164618b5f8beda34cfa699720aba0ad2e342 GIT binary patch literal 25427 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 literal 0 HcmV?d00001 diff --git a/@stellar/design-system-website/docs/tutorial-extras/img/localeDropdown.png b/@stellar/design-system-website/docs/tutorial-extras/img/localeDropdown.png new file mode 100644 index 0000000000000000000000000000000000000000..e257edc1f932985396bf59584c7ccfaddf955779 GIT binary patch literal 27841 zcmXt9WmFtZ(*=S%B)EHUciG??+-=biEVw%f7J?HT77G@f5ZpbB1Pku&vgoqxemw6v z-;X&{JzZV*cFmohnLgcd+M3FE*p%2vNJx09Dhj$tNXVWq2M^|}mn)^e9a~;bs1CC4 zWs#5?l5k+wXfI`CFI{Chq}oa9BP66(NZK0uiU1Kwn&3K0m`=xIMoxdVZ#+ zp?hKSLSSimjhdEzWp#6Tbpr;2A08YY9vwczVR!d;r)Q^kw|6h$pbtRyO;c2US2)Ho=#3q?{4m1GWOCI`k&9;zl9YDhH|l{oVck{{HdF$xGeh(%RX@ITa1V-QE4arPZ_3^N0KUo15FS^Rt74gNyU?f6HsD z>zmu#+n1LY=NIRf7Z*oIN2_aF7nc`%dwaXPyVf>#Q`56+>svGPi|1!&J3Bj8*0u|a zE61nDOKTge8(T{&>(jIU{?5$PF)%N#t}iaHQc%;Ky=4F7L{Hzy*Vp$Mj`%zGZ+7k< zCpRC^+V1HYCi6}{?rS`Ew80CL%d5-LF)(<1lJAQ_QE}I< z?$m+XE%JR|)Y|g5*Z=3YjLfXkvht|tSaC_|$oh1*A78S&%grr-Q|oi0ai*n%^?I3Z zz4Ifn)p1zW0ShuJU zjT*W!;4n~Y)3m5E=4m0n9;cN(k*j`y5!~j2)ij4x1#tx zB&it>z`(yY6BF>DU9?)rvOb2G!4AbPa`$!ju_}{}N=X3%ljy@XN?Dz5W~L8#vn;(% zS0y`!_FK8bT{5iuza9iPzyFntcC0hEUgCyxwZgrs_lXv54ZHujy!d4_U`~v!&Xq6w z_%CfMkDLt!D3SDYg>XEZ!YJH*s~-dg$LmS&Mt_;Y7X9a!>IDr+ded%2&q%}2^ODhk zoJMHe1;<*D7+WnelW=pb#;#*9m22_D0Uy+B;{x z(r=4T(e9>b$HL=1ZhtTnMZ8m?T*4WlE1nANJoY~M+S`a~oAzPxq?IY|K;|faC(Qf6 z6st=g2Oa&+>GJF*AU5<{Q1pIIjk9IOz}i1XThs0R)dBg}u}I!L^(JejuqE{$Bx0WH zK_L%2hekVKCo%({=C&4>8XPbm?HVjtj7;pR;Nl%bO7u_%gfl5w5S;(8b>qCb9KY=2 zcH1B8#T*pZQMR+_zF|mDvyu5p%arE^>?K|9F#FDuJCyu6$KPjjPBMq7j0f$|h@y!QXH+UdeH3iv*9ArYX^V-S2rxolaBRROkUH4!AxVghY-$mqUuOg%w5X}J1K z3LIKED&GtI+|Bu|l2OgJXS@ z##5m-UU-??q5BVBs3e%jt&;*!MXilSO_r%{gmW&qj$2WWx8M1Us?Tzp=Of?r=^y=m zDDr>5Z2+yUUf9O3Kqm?KxT9VJX#G6EP&E+e7EkxJF5QqcBPy@TsIFiD!!LWKz2ftR za<|^DinsXw>aBe|0DWOEi#5cV&B>!$i8?+vTr3ZDMK}XFeg)Ime5=*V++LLjj6sSf>5d+I|6V|cU`LfQPC z;p|(TN|j&~8CO`*qIi-79281;uL=cj-kt$ zx5MwWh>2LRlqjdUEGgk)P@$`Rs3-3sSlqxdxpG@!K`;a)V2m#wvau8$FIZuT9T00v znI8L>LHCkAZsu+5PUedUKs5fY2Ehv7Lqr}Ue$h;p6jBeeweEDUn2p#fwkvxk%Z<-6 zlgcD$>a-9H1#>^}Ku>>wLa`FkP^$V?ys$YQ&1L$o#0R}|{e?+I{K?~0CPz_*Bh#mo zh#!|PeV|ebfXa=JD#~>$?!*)i)b@eZZ`$qTk#-n$b{Cnhx2wH9N;PkqOwfS5FPe4A z!^5G+7=f|QUkN8gZmRRF-gxA&%`!7|FLGzf?uPu9E>P4d zrO@YSB$ z8Q{^@GSty5G&7xHSPy#pErSb3Yym^l5+QhvVlc)ItslUVgKOTQyYw8QX+2%`A%uhb zCJ{CE9{zUB(&-v8uRN|49S2Np{L4XRjFWz9R?)%ikl#d@WJtzM$=odVE^A1_CR5$l zs~b7y&?qM}RqSq1_-7&^wqiGh$yZuM2alHG{5LL=^QiF^u2prn!rcZ9%AF_!mJaxS9)8?8ha{9;`m^(Fx7`o(9*^- zI+OEv7<`;JEbKrNAh#EhBOA3x9E1Hr;lS)5pbY@p_LBMGn<&!Nxl41i9>dX%V}P+N zR;}+{G5WqCjnW#@f9ZNd^d5R<+ViQpx-L3$P}Nkiph3->K~K9)Sw$@INj*8YJLj@f z*+Rh+naB!_+NtSnzwWfLhq1;bmSozM80Xik(oGSLM*c)>iC_Wvd=JP|df1=roC3iU zoG&xR@$6d-6s0^VR}3V5OFQndgqfbboOay9Tf7RQmygGWgZ+DD(=|p9Aw+)O_j8?HRA#~+mIn^!H zQ6fcNW1FIjQ#SN_nK%EQV_F{VV77VfT5B(ea{vC|K#&-RTdcH#OR%(Mr#R1?jLzzq zSC-hN{(b^Ik^Q{uB|gq70;JUnM+#nmHCHA@PxC-sYqdnHZfEu1VHP*(8?jf)TsXH7 z`d(w{qU>V+81-UywGHL+AD7SV`|6-5PENL9RC02nnu15q_;*RRA_g8|!M(z88r&2? zCYs;1K=%c4QceJr-h+O=+K2tbY%HGQfyO1=9--HP5(yo2@2ad|TVK+$67(dBRpKI9 zcTvYDh?n^D9&qCvQhZoHb7DSvql}UJ8B+>~m5-ISatyypAR9WnfzbiDmXq*ctR3Xu z(~YwCAKYipx{EI8!HwsIlC6i`0rhcb>6<%+Cp)h@mK*_1d8_q6dg4>n}&ihP)NGiUvb81U?bXk&I< zbcqui@YB^CK-jFfu@*XpEERc^Mh(aJ)LBA@| ze4m|#Gs|Rc+0u4VvgE2s^$ ztYjCc@_u6&>iu~fe+ed*pr>hTdj(LcVf&SE`t2uXleZ(mhZd7kd|U$5HrJHPQ@IZ7 zz1w#&@Hi?VMVg$?DV~d{6LYoL8SFlWmuiYZxE8-M?^q32JSt7GoOVzZ8#I13;Ax`h zy=DXkH>H2B>%O@Ual0AO#Lh>Z`q=%r{iaZi3fZKcmBtmff&=e!GF%sO1~^L| z<3g?B>etUeZ?Suv6A<@bH;i=|KtG0mk@t4!qPRX4+^*osf+?77qg=U_OjVUxbTvh% z8DC!P=LlXRVFEd#m0i*Ka(b7e+3E&CC^Yv2#TgpoU(C>Wsp4))0%aRYtPxSr1x zO6uJUAMROWMj1L@;~jX6gRh(+e1ZqC_CTY4s&GfB-E;b?6+vEb;^bSE6j9xTFW;oq z9(1ndc$4}qdAB6ta4BN@p|T{**jB2P48}=Ya*Jc5#3mv|J&XRD;~yH>^DLwT>bp@)BbsVm+*3t=;598_Aj{ zF(?v`d_@ky*e%9dvu#A7+LtE~P$5VDCRJz{ZCt3Qh5aQ==>mF~k7bTCZxZg$!jnP8he7?WmJYT*1>c{*tJR|Ie+ScEevd4@gG>!gnL_ZL0 zKC)4$4wIXHIG~yE4+vZ~gh~Du9&92xJVUy91zt6P+$SZ9%)_wNU7KW~uGu2PF`KM6 z)UjHJQr%bRkMmIKABTD;BRcKhrdAbU;gFURvdg`TDW)T{)k8(vFbmtSAMueO{E8RHEQz-$F2C0;smk?8Q*e=qM%6O z6aGCJV;h1Tf3qvPEYi~fsz?&nlrg71v(eKqA!&F7d&p(^Xy#{`bl-!6%zc6pwsB;^ z+s#(uj7tu(L!ti&l1T51?Zuxg`16)sS-XNZm6tV-9#MfVeX#M39*XRuyFiJrxU@lO zA94#H%u0U~Ea9b26Qf{o;FeeG*!6uF*bYv#%%B^zN~9gqX{FS&&Ba|4AuSA${f^sf z7tg9}O%6m})g#&j5f%_eXA&}AZI!vQtzb=^sQxVZi~_}R^pgdM?5WD3%5Gx)%~qaP zgb4y1pEi3Ut}qG#QQ8SxhEkYe1Iy%QMz~|VS zKNsn5WGa%en;uc#7;LpDxYo4^@zL&dT*?Movr0f}Fry~2?+=LVy&$9SKV5+@SE-{M z4E!tmqebqFV%O~LO=L7??~zNUu90ECkq2Dut+Q$C#QJ*uQ33)=L?sH^oM|)e*HvE5J+C=qp79zhoRrLcNRA%1 zo?(m~(so82vOoC7`kQMWO5~^(`_b!C)8yq_VgnO5blD*sV`=DhQ}{$VtHxJJ@hixJ@hcZ z!Y6lPxZ6KphBnMJ)Ki2qFXY=iKs$GnX#1@Z7~hW~TuZju?)u=y?>z5W?Gv0-coA#k zCeo>mYl2HbT(xw!L&23l5KXaDk)yq}eBc&oPdWOPI`+f_o2cgW5QeU+)?Z2SHRplP z^{WM#a*z=ndtAjrTjbW0xE@*Ir~X+Bi-n#;6t1um9|^H4v%4b8X{_t71*TeupTOxB zM!=Yir}l!cM!GzQSnjS?@tOr){-JXhj8oH5p=g?cX47@jYyLLVq#|_Nsv3>>?X=ey zqHoKr;KTdI-GBAo?{+YUsVsacvsXS>8d?dLdU_)>MB*glDaE}%bBrd^98i+k4NQ8s zc0?8Fbqr&)Wq3Wd=YVyyUH$oZkbSRGYQQj1NofbRth{_t5aE##Z zRgYXbJ@On89x{nXLRlW`84WcfoXw=cPcZZH9T^b zcb#iuU7-qyv~G@U`}AkosbCYozUSeB3Hxyoirpqhcbvd|soGDf8>z48$4OE>XaW4E zM`Bd>uV&vA8~mC0n0*yWn z!;O|1HnCN1ghEB898BR#@4Bo&&oP9!4dcdtLZ@`un@&0 zzvF-GJhEY|FLF{hrM=dB7|h@3bEZZVJc3@GCJk0{ONwS8^g2F0`roJtV2uvN1O)|| zIfYh)=}lZzT`5BbTHcM6zo=WwB7-gyvx+Cm)a}&MT+1M^^h@h5kMVlZF*~3?Y5n)L zG9~s#<;5)1%>+_Ny*GZHAebop+bfp3&+eUH&4)I7Bc%5<40;DxP0G8{l|7Ufj)b!u zw?zWRNHyLJzYlCQj^pLwN#g~68@bp>+KA=l8QJkW-|B;3+XPeez-@9TIs${Q*6_9g zgZY+gF6*%)arn3AJUkn5bhfZ9zut{n6VIK=XKt|=rtOVmc&6zImd8%#b}Bw)vQ<=y zZ*)E`F>yPlf=T61Cm%u&Swgy**c63kVp0V|yM7_vkz7jkw+1H3?_NcbXa2QR`&1S! z+&YBgY5aZe3Oz3Y&y0-J_SoE$OJ?^Y5E^umyENba+t#hf=fjWb@y_QD-S_*?k6rg& zYCqi76Dk6v!l>?hqKLvuFrKkCcX`eYORriHtB{LekCARf*i6xO%HyN*j5mwg%*8!T z_-nF5R#R3`E%JC%un?Z*bLKZbmC(`y?h5hS4~y5*hgyC*ji|t|>+*|`-dcqG*G|Tt zEST8(?OF|TW>rp<0OymrGE9zAlwD*|y}VO>>~H8Z91s2Imik`Rq+^-6$BW;-O~_dA z!0~$@ir)8VZEok*1Z^bx^25FUR#w|5ZBYL3o!iz3!TIR!4dM0kJ3M$Uu6oT8;CKYy50-UD6m_X=r8s9+5$+sA0zy6pqH_&Z@W^+??+HTsDpji* zpJYPs-t|l<_3g9}ngwho*oRGjLvmgR^?mB%vOAB;nrI30-@eap3v)1iCsy6LJHpO1J< zyJZ4Wh4TL8e$;A)3J{xrvG(WSc=))?Jb7Ude7PQzrs^QKFUs80=y)usVamepIs@|w z`Iz`#mm;4!p8c?~+N=@YBv*C$SE3I503HJZ0R|PT!IyVtgvYdpEy__RjV?qXKeZS8 zQn;w-0EHEP$J1*7n@+9+ndkivReVrStsXO#HIyz74ueJ3uc5Y(sVEe}?RntR{lQiH z`Z!qQ;Og%AD&~>mulH;=Kz}3H2_E@LZb@~4srs2{vY?%@)Kl!Nap4D79D{9}Z!`{& z?#?MOm>og((zofbkjOl>6O9@pvqoooVcjc^C-#xV?L|D3rXAR!rX4PzRkgx;H70*D zI_Pqi!x-h~CVp;&e0Ji8#XXONI@+S1=SSfqMQ>WVhhw!ZpqKaFLfG@O*E!;9JweoR z?{TX1XS6B@-~)hQV+wZL_soD`{+?KKnJh{Y4z>ugj&n-b6_}jBe(jSLX6P z&9H{W>AHrLNjvzbPKRmV@tT%0mYUCuBT1kvP^GO=`ICpra+8UwYXrd(pWPuzm_4{& zWk{u~y0Zv8Qlt(vtPO(#zX5n?`VDW3Ct(plTSM;$<*Wqlw`Z7-AN6CITh2!btkaDu zrf!`e&u14f%tSP&(Dnr<9bp(XcXW%tYO*s963nBWA=#0746gunNA6vAeP1s zh3fwN_Xo-D)nJ}kr8L9iLhlp8zQQ{nY4Q$@E9VtETvY3caFqEe?wB~cpWg4cy=Whdd?Z? zXPs;EKDvGsP6*bHo;Asedj+UOAyPE`Cwl8av`E7KMRPx4{M5Nm)na^3~o1fyYQucv~N{FBO$#$%a?f> z_2b|tKXBB$5)5npHFNe?Zy-grTI8sM+$}L__i>e2nemkwx%9r!i}lDhBEL!$_8+d6 z#LJ6vr&OO=-?Wf@W*)yvCLByyX|NQV|ecCy7=VAOB)9BI*Nhl6$m2&;G5gX z7X%M-WD-iH8(`K^IByV*KC4pkE;Q%d_{*#4?^g1OlJz4do+x=4js7@ z4A1i5J{^EH#kWeooG$|j7@#2|@kwpNNOp2q5tS?TUv|0sCwg@^U#G?D|NVyEHk3@4 zh9QWPx@!?z6UooVSfd6QY0LCJiII2vLNZ0~Jqnz~Z^l-ou^A;QU;}AhM{s6oqmA>R zx?|OM=&u!W1Uio$0m&-Ry7O|=MSkJHZ2nMCm3cd2v986rcYhXj>{)~`rp~In^`jTf zFrXGkn7tKYRu$h+~JfC4LO`D=-Is- z`O52#2dQHUn`kg1yFQXPBn)1doD3>%Z#Qc1db!Om^YRfrJIQst z-;fRaT=uTy2I$-qS|{FdP~V|NDf7ik?ZkYCef!_RSVV*5*a4(SshTJnq8S~a`-xao zsx;}%hcFK5ULvK;gHS_-z^^qx#frvEWpEI~{rtfbuS8wSnx+wfU>o`2dC=x3`D zBhoCot?)M$PTo$u&5L;JYCKUEb(v4VM%h4az4C?X?!Y6cb3KdhwS}?e9dC7;HdnO7P%wI_DM;;s)@@Z%bXbtAz>;d_JUlP#%eF{9 z&G?mfv!)Kp4BGm-`S$V!e>YW%_7wOu6Y@dH03UOV54u#?t3zN87%+2DV4y8UA)tjRAF;L2r0P4{}i zS>CSrwAQsVg`0^P+-P9(t8Inr_eUS#5t?4*HluhdNj63cJr5&s250OW1_Y*Veacuo z)0zW>;IdzS14@>TV9}D^5NujBuLsVE+*^zGaRsMzd40GW&lUtN9c}wb{~oH-rn5i@ z8}x~^(V56NJ>0RjWulsd{#z*g#MP3;$Kift?|Xb^>Pq7n-uera3;fa&%Kqq+sTISU z>9I?T5p%nzkJI+%EB3-pvu^_`-K4BPitQJr=<|A1pF^2$^d||Im4!Lx+DZc#;0d%Z zU}NxmZU|4p(!59eAHdzA{rqw6Ka=ssc2YVTy@Kr%TweSx7~PHI0$Ux(MH2xP>83k; zbDo^brmW`!))Eo*!~#*~(W4nwS!=Y1;yzh_{9+ERu~TOO)jk9Zv~B;)rYQX6mHFEK z$FpwAYy(lY1r9y+I7I{>9?geW)UF1iXT09htM#|*5w)gCZMKyi*_Ji;8TO`jkr6_D z6d^;@Cn2~1@1t9zQh@LC&YnCIm}xot2eOM8;p8qUQN8+;{_dBN&^VM~s_~5G#LV6m z_E3xKqtq!foUe8JYAMWpG6L66c?}#MBe-snYIx34#${6zQ+joY8Si;6OdZ&ke9RI9 zhJVE8S27lRcxM1to&zo06ulR~=)s2%EoSb-}Kq8vZm%56`3bWG&{95m-EEyf%f3 zH>Hp1P(-{>oBt2RmrZ0^^02K|$)u`-lkn!CnYo`C98s@Jf)-Nt3YGS7qu+WJ#ig-Q zFrQrF(9BS8SkgJ;+Ad7Nb-pL%EFha^nT1{-?E>u#tIcaiqZ19=37#rTd8pgB7g#`{ z3R`W-FmER}xBCpl>6-zNKPtsGV+;sy5|;j2PzH**0v8xbiA$I)z;nGF=f0kD;9o80 zk9RY17@+hFh@PzHbGN#U;3$|?cr@7<-4>(%aAapZ`iHIwt+VtBy0LH(1}{C)3kg3a z$axD|Iyt-X`@2lAY5noiw7Ges2e_Qy#ZG7g7!r}~R1hs0kXTsZV6s<#V!mFs#>11$)A=<$Kuz z!efePeRv291X1dfQaDLD&pz&rySTeJ)gM_}RHN4$p39$|V&}Hy&}+?dW^|({y!MySY<7Jzg!O zf^s9Ppls*TLgM-SI9c;jdIIB_?_E}SC2dbL5<#e@~e!>h*T}3V7Qjuwb}kpd$k{i8yIhNxcWp5 zmhr}|T%BZqGQI3rUBDr76MVryhwI4_s>U>$O&%JFqpibpT73JynWfVyP9vAd8#TkF z@b21lX~Xp&JvEw!njH%gzR#bLZ(HQc-x>V%ncNiNZVJK&R)GfUJ{=r%@BYj|e?tAE z^QvUXJVicpo4=Ku(9&oBMNT}AFs6q4)YmcNKs}&Yl3qAPrANKvAX)cQ0-_JnGLH^% zib2!LEZ+!2?9Xjt;Vsr#lw0vn26t$134ju@;-k>6A|D<1f9{NA&6lpAq^(bHU;73`4+N|^gyuiqNV6V>4tiHuh2}gS>rpliJMYF> z8oV`hL{!l3Cr!jFuS`U(PLYOcg;mf+q*tapy-Rrq73i4^Zr_D8w5!nj+I0u!FF(jA zaa|Fie9MYyVD zY+|f$aJ?0^#q(7Bv(_Rf>!-!26{dkm`vv5_{yhqlfE=-JnrnR3CE&==9oG^BPJ~kT zwR#L%pm6XWo_o>~-xFwsnFCS-K3SEG*9n3OmOIw$y|;&`Jh_54%d_jy$;Tc2Y_spR zsaIH2IH@qw%s;q1T8%_~*JZ&ytt);Fy%vh>g z0w_CsOn#JW{R5GsH?OEs1xr47FZzM7B-{&lNe2bAnJ#CYkWk}CK065tB0jzXv_Ue+ z&!kU}(r(0*6z9AtXe^RO8lX0D<%I!#-wUlmC}2X3R^;0)cuXyXl#01U9aAYGBNq07 zQ0C`^>CvlIsr|X$a@#JlI=!B?psUQx$bJ$^?{z*pe0X~bm^`c#V&s{0MlZ2T-y>}F z;qPquk(Pkc+@>~ButddAyRL%Hp<*0=QjboBwPSW-PHOEB-@Y}(p8aa|yNnqY5iwd} zMW09Non<@D_S6*Yt^2H1H_*KaVR?1$sYP$fe%28z_TYR*uvmX_{;5wg$t{cwp()qhVL2-qx3)1wM*a1-Qko7WOS|m_n5#TglB_)$&TDF_|oOK~F z5`+$vb~~{DgX@<_1p#;oVwb#0EZ3TI6$r55L4sS>BE@dTA#G0aD>84pQZg}wEWXX` zi!o|(wQ#4Y+7TC_zH2&(JiwOOYq`B)ZMOS$()lGjP?Re|ONa!QYMvwZxST#y zqxy;V%ft%25Xi@T@m(kD!pOvW$-@7ISP-Y%N|Ru>0)+_1!Xqh6yx_LcFNm{O`PE!f z1~@)qX~N_wIEb^f5u-?lm)di~;Jr!!^i2p381+NQa^Cc41Q-KE0Pi#aTB>o!<@$c% z*Q&0@cBXHDTZ2s@7*To0m*BYhWJwxEsgU+sx@6~uz6~lY%RS;a{p~AC-LG>IUop{T zr=uIPav^B@XZ77ba;qQ)w|Dxt$Q-fY!I+bh=a*g~Nhdb4cY<~1N)F-&Ui>SR1l(Zm@ zU~{AX%FoF4u=?X-SNV(5k>HE$9dJyNJ1i`5o7!u7exC)~47YqFkDvB6Qvg#`GnW$m zy^C0qY~lL3`HdJoR6L$C-K(+><84eipiDHzaN)Qv$Lvk($43+H>IVoTphDA%<1OV7 zN*wIOIb>eQ)`8RyzvwEjennj>vn!@tYo7b3bB?40+SdR)E#yrS^OTn6TmN05HqK%l zP)ZuCwf1Dqt9nt}M75{7)xl28WCdmP&nv%F5L&v^Csh6lR4+6qW$%QBQl1y9g2m&zLQodlxDQe5t ze74A-pBpIlCOSp+vzs<1{?Jh<5)t`U7lpH47Ax0o_SFnzt-ale`H{M8h&qB)qshbx7Ad#HNB$| zo={%npyBI&{m}+3+ngQmW@l~dYovp+my{i|_PyEoYucnl>EfHm=~;&)!6SYGXW9S; zu#fmK+2v+_G46lfe~J+}-wMrzj+?*^#t`G>E$l*-E7%bPB)Ef578L#cU|%dTi4@hk zp;+bBv%g-&D%NlYIGgkRvGc3A&8QgDxkHez9M?flQx3A$cKc(&?EFW$uDMSdb(QMw9odi zQA?zO%QwiY&D&*2_|La;le8f+v*;YqftP=UX(~GO>fBxRS{^y4gbh*RyJXj3%v!%! zELfdXKw~e(B^eo_RBX;Th4TrEi|2p2@Hg*5bt%Y7ZIk$P-}GUj)gwz0gIBAGiFNn8 zU4&Na+V|69<~TqZyxqSPaeGkw<_`ynX{4vBxwIX_Ypq#9SqSJ=W^R4opKAeSa3L{m z&lHRtdQy{5Ggy~SFu34>`lJ%Zqqg`)p0E)ulwxhQ-;}L>tXPKb-xTPBQs}1)CSM*$ z)G0-&fr8_TI{4boZwExp&4Rt|u<&mI1_Iy+`yv2(?Zm>&!E#z5*xWy{v=^H#tjEA3 z;?O-=$gFu6kw*5=S@@t1PtJM?AR~Jb<+?`D@ni^f9@rf(6M@{G_~V?Cy-fQf^8)n? zQMliUqyBPjXiOCQo#z#uU#^qooR+z_tHzkiIsIG6rn#gWN}koO1iCdnJ2E?}15?Vb zHv1jpiRE-A-RvipUQ>D1lRSvmj z7W3Og%mVd(!g)KZzdxx03y^c4IMqbhs;z8!D&FY;i56b*oQ6$WJxRAsvOKW!wE>ua zD0mc=bW>_*_Ph03EUervAR2#dSHw8J{!GR_N!df0ZL;vK+=3WRYyZ#GgT>l0+k}~1qIqt zS6WmMZM)!rz7z_m`fK9CHVM8F$z&G%jWzFH!hm|FYpam-1QF?Z)lPOHi8}0f1o9EZ zDHf!)*@a?vnvbdJDr!`&Cqj=g-f;y=uFs7+Jzk$Lqc5IOB(A-BqFIgF5T*Qh4dUC& z&KPT!3?JZJ?!2FGI-p$Yz1pL2ZT@|G!_!$1J@*9lY>pk*)lpl#C(!j;vJ^FY@2K3n z2bIo|a*SE!HzHgWM{6~I(^a*s15DV0tUv$zES9Amg!xeS8?y}$1Z}K#^z*n0>1~He8ZPz~6(W>wyBjvX_I$UA!VL?CFEa)<61QoPZ6E_lJpjc$tmFIQ8ZC{iPDf zO2-9y&-i(=bBR|;{%~gM8=O_tg<9F|DLGA&TZU$Dmt&g50M3#7f)z&Uh;BRwc9Fuz z-1wDw3C{{c-~!Wkhp>&;jVmvmxQJZfG-RppOg1^@pFD4B;*!n~lLSmHhRBGUZW=wL zrq<~HsA?@Fl|25*Z_6NPzj7X+}j+I5Z=nZ2_bWFC7 zTuxY^a9H;EY7yk(wd>FO+r1&Q=A6pE#dPEy^vWSAqgg}SUq@acOCxOw#+d|Qm9XIz zRGFSu)D?W`_1iH$=?m+!uJ;FT$Ox9sW_Mi@heywtUNevsjY|GZ+9y&g$4FCA5uwfk% zf*2q%_Xk{=xlxR0V-lrZ<8c^ny0kflt5f{jx54mj|S>kwam*Tak1b3;( z5uPT_RKvI3-JN1xNUUV?slZ3MO>r6QL6oc6t-jxIO{GxTrzD(yK)QDPpLm+v`7|p} z2gy(VZGC&YNw^Sa`UGiI9uXm!9PVra7Ew3o^o&h~XSGDkY zs;^`*cxA6xHK0$Wic0L>UEZ->|DkX6j1#<+RIHQm=vtR9K&^UG7kBp zohssHdJ&9qvGa3a$c)-8t8?K+cH6&N!v~A?-<*cwix;^Kx->T5?74h9@7rrK!RqW( zo2vJoGt#1rN>*x0wCL^Iy~m|a9o+HOx%%|#GJ$IR^@H56PS~Nk&64x4VbME}59a@h zAqcjHo2qUpv4ru+gtljF5cq0UfGkddYadJBa9qH5nTqNu$*6Eyt0)uW)o4o zI;X)D{>#dI8(%wELz1GF@W7BU?iTh#pd^;0(7A|qgmkyuW5DgLce~io- ziyf8;ON`-an0(auAd<+A^E&OM70amakbMh9ou51y1A4-pKz;ftECew{C|lR<2EG2V zc_YNUU-=dDwpU#60DATW|2Y$&LhL{Md zgU?Q#<3)i(y#qZ1bzpAfA$a(p99$lv#>L?Q)GTy zvV36GhERupL#v>^msU5ZmKGe6Pb0Y50Z_*r_EQ}YYljZ+66G=_SknIB zZ29q((LiBZotu{WaHM14bGk|AaDkw7pRRF+J)Lu6k|cfbwnXs?-X|W_s!|@*zFqbI zKH(l_gt(*O6YGy(ey6N?m_zU{`f$GyG}a%6%QeTyYV_*9CTC!O*p|m9#!SnxQYjCr zx0?Pz4pbv$bbm($)?Vpu@0tzWHsS2>)v#t> z@)vmMMS@d6sl1*mp^|5P{sVa2Ydr|^bT4x;;m;G%!7jv|MnM$?)5Ax-e8U)PJP1|j zw%heI;oCzyygq;2y=EfJqsY192X~vsQkXUXIO-m*UbQ!I#`v`?SW-Wg`74otU4C1v*?+r{tKmsUFh+cJOFn%ei*x1dOd6 zFdTHO)IfMfuFw1>5}qFUpQ-y^y)mXc>I%0whfG<;p=IXi5i)%>S(gUE5DNjBWKBzr z_#Wcq8RL0%$M(|1pAfjAhgbM^y%{*VI1Cxpv0wt>7i8%;SsQ+%*i3Mo@%ohOIdc9n_pG$ewjs26kJ$SwQbo^Sk8@-{F@9Fe^jtAAGY004(QP$Jw zW%MMJ!r8%+p2x)wEYW>%pS&FodEgu=HP#p6`0Pp&o4ydp&i>(Z~^F0082|Xag}ZxCR2>ZQ5t; z>A|WQnDS?znrt%Ye7if=pzl|H131>3+~^IjMyPz5ZIm@Fg=5~D$N*x02W!5TwV`kb z5cs|uy{8RXJNs9M*y;%C*|n%;`^I*cHg&PuVYA{FO+N1V#OU2-1R1gU@ug@Xa?q>b ze*(Sl%OV@%(h7UJ-Bu0-x!o!4QqeLO#F)tNvHiyS;USp!I+M=xg@Z(rv47_0_;K4l zshut-0EL`c=&=BxhuXPiRDTm2%{M?W6#9@tfK~EMaZ8WoQZWLcVe@du#-RsW4+z}g zO%&Y$Psw`fY1m|z2k?BkJbNCMBPap;?iM?k=FSWB*Y9pWRVL?x;LPus(N-8_gAb^2 zM!(Sv0At)38Cm$o>ww`vVSsgov{ zCdYVS8Njokqj9l98H3CsY7CH3qo`^|-M;Kkwb$*2&=wdc*1-MVk+~=0au2!?|GVoi zlb*^0KS?Cd6dOGkZxX~LQMUMnNLwVqKjApVqAuG@J2V4|Fd>bG08(u4#?aCTUfwsl z{TWl42|bHA2xHp6o%d%^K-JUV6R+VEJtB_j^juRPb}G3*dpx1g1>G$4D|Q=s2G}3F z;M%u%O4iu*46HuCLsus<$^K?YHU&?^`|2hfnKp0+1Y(JBc(8|T9J{KMB=@c(b3ro2 zd}F1=?F9afZ~ia~4`SjA>gbccd%Z9QB@zWr+A5TT>sE|}xp#hA#&LC`+{fA1q~Mmx z+3>dUL=K{Nck=f3=8SQ@%l>15p%Xoytnks;MkrQJ`6T31H;fuO#pNAfE-KSZmMP3@ zdV?m2M1M4Ni5x`?cm$`5?d(F2Rn)Mc246oiYT~1vAZvcRa4>RjEnY z8NB%znB~)cz7NJ}j%6vQisQW~_;r>G41dCv^mugKaMV#j1*e|WaXQam%?@nx(d*kR z@V)Bo;iEq2(L+y3>yNCS^$`W~tUB=5o*d2ik0YLVGl&)hCY;~+g$9;+2nOIL&ClSa zTuN#y(f|?&^pdT#|Ez4cA^jTq_=Y?0|BCwVa5kW}eTrH&O080>)LunxYP43(*4|X@ zy@`aP_O8aBMb+LrYL6iH9yKCnjTi~R=Y7B5`2U<|Ki74x^W5h?g}(n)O**8@D0X7% zVv1o98ti#psHl7+4G@z!_b)r-6_a96mysLGA`sTw(Ba-7OH=r)+EA&MQ`L_4tX0x^ zh97RKX4$v-B12RoBIkh@0H=2|>nW{0opXR%ix!QX23G=kLL=*dp`Khm?uTVT%=5qU zl4gELxb+XDu+fPBS<+5c=0N?{hS8o(nA9d9b3JdK`8G~5DcxJQ00$!y=d99=`xY)w zp-=NHMv)Qjt9j(z87hEilFo(355}q1@Z61JoxzK+smK_6!asIS7%bE2S{&+M-m`xqaH!!UdGuQ{MHaAnI2l0j<#hiPzCyfQYWoGe0;pPvFm9 zT-J;f{>>*8e=-gaW$IrStoFN!%a~L;Qa~w)fv1KAARO8J#5#Sm8Z{j z#VBuH3O4+H@pkC~JCMTsw_Q%vgPKQz$H#I*U>;hwTpuL-h7cqpS2-lF(*F7RD~i67 zB&2SfG7B>msr15LAdW>s7Alqm5I~DQGk<7+a$^#JgrrLh9s~7$Xle9d(Mgo*vsD77 z{XEUQAQbTUUiSPIpf#1~#b0Qe-(P5Lc5fhIUulw)PBL~)2q*Ap5kw1*lb26_XnqN}@H)z34&U z?4Hgp4HD1g^PpCA;OR=)fDO?6y6cAq?_jC(#}EdCh`QU>IwX)KN;^qF`M~?}m)5JT zP`Yj~INK=K`7hKcie~x|80v(_XO498{ z%^s9ZU(A!qoHI=zrty!fwL9+QM|?owwFzMRf6~AS2FK|Vrouv>ZbLV&|7K8fNZY)u z_sZaM(dD5>N()A^cp|44v_qzt)7Vu!$_hUiHdi!+Gsi3aMT~4UHg=v|7Nr$)@50{9 z>sQQ{(kob4m;|9pD;r0~k%Nr~Vsm~KY04(B>;tCiYDmM}oAtAst`I3MB8-^1o2*4y zg=}#5@v$pYJIkkeVAjPefCS@EAtJ8tvw2n~bX5N#2M1`#1Ca#)q+jL=(#NqNRit|l zV;QlZ#8SMO5qsok2-sFZGbtrhPJ{>uIw=e`rw!G+gd*hp>*aCy>? zvFOe+_1UcHYR?BD$%7t)pjqZN4t<aVv#X#4^luROO`zvzKdla_cXG4rX=K-zCu|J>K`0jQkZn&>rh- z>q*zkKe)=0ROa|p#N4B4M6USBET+lU%s<_26PUl6swgZeP}E@(*;cNu1~k7XyBjLZ z`HpJ}_F3G%AAjI!fpx$zz!qTGfrip=ZgX!>06=%A<7x8awY>DVcI!75wXO&#Uzb9A zHpP!eJ}**?zDle*Ov-CgAC3N^=C%f#m_;69M2Pse-+jVicE?|p7pHyz$4(J<~(i=wYOGLEU<%oiQ19w`jb~5lv3X_mQZu-QAF5j zyURDVYTRjBr8W-84N##WY~6PKt5@Up{EN%>@?_At1##d*91dmXm79_9O;V`0J-&J- zpK)+*(;)3(T5-M#g*qaET^f{}zKnLz!3M-K{r>y{M~!|6dK$UU0{mKS1)jh089wp^ zYd{j+YOQw%d+yQ?e0FVr=dgLi!3zTw+BkM`_el7$gU;YJ$1KNg&gTayx7TlO%4d!M zt?uykNvryn@^{l4w$F`sbSjz%J*O15cln`|JisON88##nfPU9$(VI2@VJ)y4#^{%M z6js!13fnZP*!`ln;HMR^%EyNq@W#*DCvh1TYB6&#vZSlKwm19H~JQ6?WU;JO# z5kR7Ld^&MB&Ca1I>0t!MCA?GexWe&E#x3p=}c>M%Vwn0Sj)w5+(Zh1v781%P3 z*?dm@r{9L5rIzX@KJW$=;>v3tbcad25&#QagCiBE75^)48;W>{K&Dj_?+f*XXBZ!F zR_V>eQ`v_Q#P&x7ry?n1VXlqKT`eXnzX*Ztign-ZO&3fsm%QACV)MCjOiNwT=Rf@? zyE>F^p~Y9X(2UW~pQF3J5l>#Y@4~0|SZ<;CC`X;(%hUO7L*CnkziIFKcH-Xvw5TOh z`hM3OpEVQYrK*@}CPu^F?*}utYCbXE)Y)67QZjfd%Vop$A`N=Hdo30DIIr^(gHF1G zvq(BMeUX^Ne34-3H7~e>%PNPbHFdm}aWQ!^X#P(YL}d5S-T0_|l4n;p!5Gm?U+7fP z!jB{4W`p$yzKYNU-Cx{?4&c<=Xpg`J$C=E?Pll3-8jyKO;5-)-tLhVDbw&n{oQEfp zof$G!Uf&fSJbY-BLUn8LXFT7c=|_TU%MEA`XW4~ncv(2+JJ8ZUq^W_ev5BP!uL%Av z=w6fluf(qR<`3BpQd!vW)pW8Y%HvP2CAg_7n2!jK^-iTP%`tGDw?^{a6(7LAxz1Rv z3)Vtc$M>Et-r$@L&XwlS{{#* z%?2{~t{;8&ntME~&j1RJ1vVdO;f_^L8v1izz0`GA82%;8E0G;Q!Jbk=Rk*Q9ykP{9 zwvb)l!HhkuHYv7Ct~*nRc}1w4!c$`~1^wOja3=&Y)f{t1-=17-oH(8FS!4=SyXujR zcIH(75Xghz3@T(Jzoi37k;X zrbjpVDeqg4O?>>{{~ew0*i0`}sgF>o_H#p@!M32sD=a(I5fiV}V0=RFX)h@kwli7; z{v~k=mD0CJ@X^Ot(aifPRR8Z|g=rE&)N^HKn|fz(F`b91J~!2` zpdH(30GLb5bz4^RmU)Qg7O?xh9x>9j);4v{eWiVeBtoCjmo1|`ldGQ<_GkYnREV0? zsed4$`tejon3!}p!kRPMC4qh3`uXcD?cG!Wnq;f%-WdXr5n&=$7Hf3o7kgRFmrzTP za(2#kiBiBUD&q6^jT@>qc~U25YJpM&x~wo)d1K&e6S9=jH+B`JWUvQAqO;(17FZBK zcx^2vQ;a>m^3e;)2OBOjk*fw3<-QOGF4nJh-Fe7D@)QHwu-olV&mk**>sJ#6D_-mi z1iuSrns!P{xpKoTmeFUY_g+8@<#l$B09pU8vjyc5#dh9+T8)M76ckFg{#yX@SDV~_ z(eN_~_V>2%zB;6U?-2mK>NM_WQG4enWns>yR_=e-!J)2Xsl~^w{mOUq`;0#r6oN5}O5)y#~?c?S*h_@upl zQSy^#c-Szn|MpDkzu#dd+?fu+QO0NO2y=9U~R?6EJ(#tAM3y9Y}Pi`s}tCNwwa2 zq;(h27Sf=*EPTSC>bujBTN7ViPPcB#Ecj15jlExHvqY+ehUaeG>K1x~-ZQ!Nl=-kn zbP)|!kLykq(9nektRqYaa2aJ4Y+HX~@SiSv>0jRh`im5=!Js~^^?mSxJKTMHjY?v8 zVIE67<#Il@C2JLsypu8oPFN?4$Q&t=oadNY1q>5`q0I*^QX6R zD4HPWPxKb^tRKjS|8J1^U8ka6>G!fSg0%b(KS1{x<2i#afYzM<)w5L?N~eI>r8^bS zwB=5inr;qxZGSPSOpxdJUgs4XN6ekD1eco*;qL{MrcO!6N!%)#{81Sf_ZdZ0`s`&5J~>IzYFU(_%TMg&eCB69q)8it?8MkVAL;BV zxo%KgVZB&PE1{6*vo?tl;p6&BEidXAq~a!gR4^!UgbY4PvXoo}g@|oO-m(Et2NS!F zkxPjdsj0BVqIu_(Px80y`06F@sNN1iwwb6x_Vg18aeQURHJ&uTdSTCpvrO)&fEYq6 z3kicA_FqElr+57>tMvTaU`FZ;BtE3n-*3WeS*+rcB3msBs|q#%!*V=^&TH|tO#lug zbPPScgFy-h)yjm{HnbHr;gvzdYz}3F9Hr66nP~TxkIrmX8^Z`nJ)!Zys*x~i5yyiA zFG+l@ZEzN{bPSEKyJWqYPfKh0%D~e4Nnf9$+>x0>>jaPv0B}yxMjKK9dN#INB!6n$ z#~M#K9cC)sbjALErQN{AgfN~}r#G-nd^BSA!%)DPSJ#9DdyI8_|DY6uymG~$2jpi$ zQ>-1y;*M|Wxt4FZ0VYXZ%}P5%g)eAZQA2i3lr@%Rh9>Gi;cZ+?2|6M>ll z>J}}1wB{2?<>u6mTRIXu8b_BX{J-6><*dVT$eTBT8J{L&!+3C;BD1rvuYuhHF;8{8 zQ)^BjmNlgbTkeqPm6b2sPbI>@NHly0`qJ%m4~6m$k2 zIZ(#DZ)glNu@M>{^c+DeTglVV*KE3 zz`=sp7EzVg64RmB#$|Cuymg-H0)A)kf%y1%`aw98n5=6hg=p&P? z9q7RG#bI#wICqbtjv;#y(GF+nK1a}HbB-7tdu9GF$2Pgu_4T~DPkel(q8XK3CJq(1 zAC&RiyOk-5UhcMTr#5%4ji@2Unq*H7_EX#ugj1x}^sm_IViJ>6VtXUE;R+luu`SxS zid2!9y_hO<`fuf*arD<-?Ha_lOOseuPzM8$bU4?A*sC9cZMMek1n--73oL!8@)pjyO^GmWJ17DxbFwwZ?>PB5AxD)L!t0M6y6OJ=5Dsw^k3~)39Ki*1MN7*Gu^uS zcn2ap+}(4ZHAsif2>)KEH>p06lgOv6=0G_2N5}_XW_dM9l$k0lJwQQXB6!9yMal|@ zbXo@n?{+f2J1Zi(fb&EZvlPlPkN^fu8K=Oj}FISvK!kkR6w62xmiS0Lm;_ZMs)w*hs^uk@r zi!K5FkcuzOzxd}}b#6y?Y{2IK?54LDxNG%A1Hq!38nzu+3^^G z<9OWrZhVDE;@Z)L7>Oi}<6d6_9`57qhu@MG<&LdMm}#<#QEi@u&Rwx*`77q-=GEcA z5F^+3wRv~92WIm^XWqu4T34W-bOy5BHI>DC-7&le9XJIc-9a6loj73@iXV;nNy(qJ z_}?B;Rr^s#lI0NVq)>6Gt&Yoi$uQ7-F1?^sOvJTP^G;16O92yqCD%ml3T*6hMT^cD zRhluHrmM&l%HA}1HO(I6d}*G`{Da!T;rmwPC#YHqvN=t^<_i>b>q;Ga&Zq?e7X9hi z^?Kf3tyT`bv}nw;|Liab90mNtt3>fU=4x!t!~U%^>pt;8zx2nV9QVoSvRJMyNuDV4 zv5Vj@Ls|1FBE98xkWy@yx@M=zr+cT&=69&P=^Oe9ecMjl?YCGkkH3tAX6!->L<26a z-Kg!x>&h_wj#OmYG;#eU#N4-U&PK*y#A8;EmkrSyt!&*P^jcaJE-URVhK(k7!I#}7 zc=cQy|EzTJo#&*)%~(VeI)E)Fhz_~56ulIyB(s=2bG$Zhg}O%hcQ48ZpVFc$ty_g! z4u*znqi}Gr_df07jntKq-7VeVMQ z)(4M;)lp~vVqfa%Obd9n-rQ>an>tT`U`AzYOGZSDWm!PYkg=p9;0|orKEhTn=sgt0 zhEQj=P+%$H{P0mS#W^G^8rz;o_v)Z*!`XJw>E^K0rOCb_mN4MOJoyKdyMC7uIc9qs zcSVNQ;d+48Hzg}l)fE*^wjps=YV?!StX^Q@=F8I-e<4F+{+B)Oc60S=0(*9F(Hart!5pnRV_aE_nI zmVuGYkmwOX`_Pu(_Iy=PLlpa;@!Cpv8tCA_a?yVJ`_lSP840FezVboo0}!P7RvJ_R z%{uS@n$mvYl=vgv5%DPIfOfiRRw~*9b@9XND9E9zK|!HOJx+0-$jkGj_(bsap={g} zQgi#dC#hM3c>CmNhb(dN^QiHh$UML0pU2DRz+b5=D+ zsWOWdnM5vx4IeU1IiE;bL5t6G0A|xb+X}sS=8pMK%zk{f4%bmba?HMRt}ek7-rEj< z#fvb0@~Yr8mUaE@v77VUg8ua)b|$=-eH(N0^zd8^ZAeN-cw2_QKw=y(qF13Q6{n|f z|M!)oB>&Kr5_DKHr=^+*rB_gt7sZaMNyJ}&uajMfm8{TL@{0JBCfq;$D#C+yezLb; zd|T_|=f&VkKRy^BFvXaF=-a-5{Z`eS_5AaebP?Q=PG&*LD`(%8Pp%pH^}ee7-`+;_ zFL-A9o*_P$zCSMt-D2j$k$5#MG<@eFcOUf4^oNC|Q?dlH2houFlWYcmg=05|%bh7? zeM~}MtKI5_4Fr&Wj2)r15)|}*x_nSwq*UyI@@N`xST2oVpT5N!XHi{}D^t3LW z)QWYzln?}cv`F-@tpJ-bx;2s|w(^WsB^_*bQKh+#fV_AwFOu0j+L zhwf}0{96B>DmmoSin7%d_O_O{J?}3_-K{!xpZ7NQ_1O(piGa>BCsb~N8fz(%;B5`S z><96Y71j{(#eq3vk|K+edR73!{2M5dH}c1Qy|cIIhJzvK@RXPKN|HlJ7Jc}YZ)x@R z=6GiB+z>kK;_-@eC`_D*ELPO!BWtwUb{4TlSlBi^{-ZU3lRqhQOT4Oj1Jq$=W>0VM z+{dD6A_66!;&N;G?v>?NJnBa*+$P)Xf=(NM%N(uPBV1I>u+xMQdzMejPXd3a z9q)SU?37-g=>@v+(O*b`k6cy3-Gpik&WnP&pu)H1!R2pc?@srJhOS1qYmqM9$E}w4 z(b&5mLotm9<t93*u}%_?&I@<({Y~xI@y}YYbBk;1;BMyD z;^O|%)9HzryP2v{H^`S(=iy}m#Zv?v-Rx5NHb-kYv%5T}@YGaUER3yRC;>xehpD!es1gMDY)rLAZ4`DY_hw!C7jR>u(TKM-eB8GtSm3a zstZT$5maSzy-rWzwtu?^K)ymZW95bGe{|MtH1A7e^2Jj zh&aEAV%iw0dSO6u2A+JGRA_OB+bc^SPqbZ!3Txk_Z=2>rQN z=Vock1nN#SB$^R)M-Sle9ulB-9$_v3b(duYR-=9@OfkQ`+}vu!_ReUIg6erUr9` z7^=Hgn6q0LrwQ1a{$~BSfVntOrqCTWDg;%v-waLrPIGb1|1^KhHvi0K29+EG$LGB| zUTFD@uEmy}4Gw1v9*w+?J$S?KW>^EXx)N2+TC zhONu}Nda!+B~dT04W+#&CLTBJcxA6 zPcr?5?VaFqQp3@hM6^I-40PiJ{kS5$gGlOXz$JK?u_l-{sk z^&S$X))sE=9Q3;%q{FW@Czd1#hf#5VtC(ppQgOw7E`vkrTc^}|fQ-3!v_JhmiKM|HrA2=Bl&?)2e)`;lG^#ZViDV4_R$p6~Js? ztK4U6+^#q|xg*yn)6VP}v(xi9#8;AAr`&=Zn~=W#0?9ANmZ)LzXh=a~C+wtPXUDyM z6h@*TXZ5@<{^5>Hy!mSll$Etg)A9XMn_4$PVj>{!fBQm>(Uu>GWFg-A1U3%q- zIW{nU5#n6K@#^b}C`pGruWVi~g0^OSuGJqe-QckH;(U>ljsE?j&C@rLrKlj?dw~zF zSm$QbZSRUF!86E4BvL`}S%M4Jt+2-qE~L|xS~P;Wva@JQTSLutv&NZLtoo~^Vt0tb zmjFzeDM|3wz>BmVNP=3eCmeQOYTx*7sZ1kyw%Bu;z85%+ zq@9l@iwHik5aU-k`WKtEIk@&K@n2U<)!}T5MvHm-%|$QF;vQ0)G6^N?rpU-HIrwZR z;|I7qQ_QvKy}ZrK1%N&Zke^v|DL2$UYEX<&c;LkykuJR<52H7suV3J^j*J6JKh0PN z#Oy6qY&&6Fk5bo94sA$KmQvJsD9MwS`}qFif2tL-SS$0dpI?Zc(v;*oAHxCD4|MA- z4F(8{p5fONvZqT8@lF=nGL{2+4*D_s$B(k5}$UmeZ7|j zD(=(@Hiu`Ke7^e^)z#Ito@z{&pknX+4Hje$XR;()V40J6`k3|ScoU!Pabun5@9%mP zmE0H)8ujqF3@j`{ssH>D@QaMH5^8TCZ^LDO{!!%PNEn6MW7YyC+i#)^Ow8An7w4hu zJ@(nP%+vtDo!CBc0r?3jw%d0#ygUU24b7gQ#AL4HJ^wT?jFCKsgZ06I)s3?0qQi$N zB1!(9M3$G;5+Nl%L^iTl=&#ok5~E5*pOeBWrLW$koe8@$Zw6)W)1O4YY46?P5(SAV zQT%^;4ds0^Zq*?DWKH2F&`MIl^ zWEn%ensMHAjJ3`FI1qZl*{@K`N&MXJDJ!0e+qa*e+GM{4^Tk)bR+MV8-stG&VK7`i zKAqZPTO9O+%>d^;IPwo^(&- z+FY-X4}F7=lL%`%MHaXyLv>oz)~+?>bxYyv?uV!4Q$xcnTb0^<-wehR<%%U;Jo>Og9FXpA z7+m9CzO^|~+=lCrvnjn1kK-e#&g&3sd&NfXGTJ0kul{Ll{gzl81UqJ8_%IE*41!RmC`9Gbpt%HjA}7%@P?8(&foUCm1E*2&oP zA?!^}75N2RqeGh;addDgdKQg0I&z5<894GRqif|!!3NMzWJqa_F-WrD_LYmrp1Hn| z-7Lagf`8mNvVumy?6;R;ff`k9|FlT-ilx{F(5Q|&)E(*xCmJ>xaZjpw`2yF}9d;*_1R z_t7&i=K$3fV-{5>8-EF-Ja#@rS&T{rkI-8f{%WI`b)?cK3Er*wIuc1Bfos##&3)2p zP)wC7<6gKp`E7wy8J?h-et+SU-WxMo1qIc0l;u17=TaMHv%A&z!NcLz_iUq}^ALcRQGp zO3#doE5|#DE|A17N&RrT%=+<_Q}UAjR}>vMemq*pZZSq4keZc7wkj?Tyw0KDeUqAX zGZq}z9c5m3xA==aFv2W4<~sN*{{4?ULGuufMXW;sxyI+iSm?i7hO@%9UYV(+`Q>Nos%vF8g!Usd2P z;4~-_8`!v6@(tpz_4Q(RM26{pkU|)UyNr=ihw-ukPHw<UpU+AXw!RaEXpRZ`!! zYg8dc?5IoMJQ2hB>hz-+?AEJm77QYbCtHtF_p0^ms1x@`UMtAF;}i{5AxiVl9DDpj zl)*5)Ng<4^TDD4i$KlbhQ-E&f_bUF+KzD6OX^sBayL(UNNV{|$loE2{yD|2UlLV?J z@Ig(y`w&7yeCv-`?uUV^&4RXrHsy&k@i}adNm;XgZ!a@xnvjG)yI_LjRiUqV%gYIh zTK1D&S;x6J%jL!y86wNhlMbcxK=q;CDA?OTEGBAUdVZ$JYB=ElyA%2HUEC_MuhHw9 zfP)~1CR0x8cHDC6+A8>NSYxQ2z$vA2UJn>pzZdq@C^#Xoh zdqe|=^fm{HmPOP#EjbbH25nT$CZP%K7azkF(mG$3cnFnvV!sc|V%0fVJ$l8KpsRTu zO8L$dH*_-Z+K;9`{p&$Rca2+turcwk=8~cyK0rNk55^Im*gM#q=U-^i{<0)$3uHRn zH_J=aK6A*?VLE!3Hi&0;r$KN%3v1#-jxKH%pl+cXKmYXX5gm8@@y1#xCav0t9od(z z48bdZip}mIsrXig{8+&@W$YEwRGTr);Lw|2E0DvqPPPlK%Q*y-eRpGMtZQa*dHiOB zm&!{b3*PxxlCIhz1he8Qe_ituN*=VlqosmzZgl~c62oxde$5Fm7!q248t=D%7jc(T&EAIMN0uPq5-R!nvG8HJu)x# z2l7Bbq!k*ScO@_{>}1p$JUt%!O}$q309mlnN$TVTn`5E)<0cDkchxB5N9ij>^1C4R z#OSfF27Mj!AhRy0lnNE`7ddO(RS@~@s9$AV72Rat8_}SIGlyS`bO`b4OLVX-@+it2;l!x9Kc))(Q=DJL~4JFw^ z(QdVI!ny}MfWXZX+W7j09)ZfAZ3qAKqN*1(7zzgC2SM1%t1q&GJt^ZKz5~NjeW$5Z JrC|B>e*nH7H{}2T literal 0 HcmV?d00001 diff --git a/@stellar/design-system-website/docs/tutorial-extras/manage-docs-versions.md b/@stellar/design-system-website/docs/tutorial-extras/manage-docs-versions.md new file mode 100644 index 00000000..11bc8b79 --- /dev/null +++ b/@stellar/design-system-website/docs/tutorial-extras/manage-docs-versions.md @@ -0,0 +1,58 @@ +--- +sidebar_position: 1 +--- + +# Manage Docs Versions + +Docusaurus can manage multiple versions of your docs. + +## Create a docs version + +Release a version 1.0 of your project: + +```bash +npm run docusaurus docs:version 1.0 +``` + +The `docs` folder is copied into `versioned_docs/version-1.0` and +`versions.json` is created. + +Your docs now have 2 versions: + +- `1.0` at `http://localhost:3000/docs/` for the version 1.0 docs +- `current` at `http://localhost:3000/docs/next/` for the **upcoming, unreleased + docs** + +## Add a Version Dropdown + +To navigate seamlessly across versions, add a version dropdown. + +Modify the `docusaurus.config.js` file: + +```js title="docusaurus.config.js" +module.exports = { + themeConfig: { + navbar: { + items: [ + // highlight-start + { + type: "docsVersionDropdown", + }, + // highlight-end + ], + }, + }, +}; +``` + +The docs version dropdown appears in your navbar: + +![Docs Version Dropdown](./img/docsVersionDropdown.png) + +## Update an existing version + +It is possible to edit versioned docs in their respective folder: + +- `versioned_docs/version-1.0/hello.md` updates + `http://localhost:3000/docs/hello` +- `docs/hello.md` updates `http://localhost:3000/docs/next/hello` diff --git a/@stellar/design-system-website/docs/tutorial-extras/translate-your-site.md b/@stellar/design-system-website/docs/tutorial-extras/translate-your-site.md new file mode 100644 index 00000000..5cc908a1 --- /dev/null +++ b/@stellar/design-system-website/docs/tutorial-extras/translate-your-site.md @@ -0,0 +1,90 @@ +--- +sidebar_position: 2 +--- + +# Translate your site + +Let's translate `docs/intro.md` to French. + +## Configure i18n + +Modify `docusaurus.config.js` to add support for the `fr` locale: + +```js title="docusaurus.config.js" +module.exports = { + i18n: { + defaultLocale: "en", + locales: ["en", "fr"], + }, +}; +``` + +## Translate a doc + +Copy the `docs/intro.md` file to the `i18n/fr` folder: + +```bash +mkdir -p i18n/fr/docusaurus-plugin-content-docs/current/ + +cp docs/intro.md i18n/fr/docusaurus-plugin-content-docs/current/intro.md +``` + +Translate `i18n/fr/docusaurus-plugin-content-docs/current/intro.md` in French. + +## Start your localized site + +Start your site on the French locale: + +```bash +npm run start -- --locale fr +``` + +Your localized site is accessible at +[http://localhost:3000/fr/](http://localhost:3000/fr/) and the `Getting Started` +page is translated. + +:::caution + +In development, you can only use one locale at a same time. + +::: + +## Add a Locale Dropdown + +To navigate seamlessly across languages, add a locale dropdown. + +Modify the `docusaurus.config.js` file: + +```js title="docusaurus.config.js" +module.exports = { + themeConfig: { + navbar: { + items: [ + // highlight-start + { + type: "localeDropdown", + }, + // highlight-end + ], + }, + }, +}; +``` + +The locale dropdown now appears in your navbar: + +![Locale Dropdown](./img/localeDropdown.png) + +## Build your localized site + +Build your site for a specific locale: + +```bash +npm run build -- --locale fr +``` + +Or build your site to include all the locales at once: + +```bash +npm run build +``` diff --git a/@stellar/design-system-website/docusaurus.config.js b/@stellar/design-system-website/docusaurus.config.js new file mode 100644 index 00000000..29d66a21 --- /dev/null +++ b/@stellar/design-system-website/docusaurus.config.js @@ -0,0 +1,100 @@ +// @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", + /** @type {import('@docusaurus/preset-classic').Options} */ + ({ + docs: { + routeBasePath: "/", + sidebarPath: require.resolve("./sidebars.js"), + // 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} */ + ({ + // TODO: Replace with your project's social card + image: "img/docusaurus-social-card.jpg", + navbar: { + title: "Design System", + logo: { + alt: "Stellar logo", + // TODO: replace logo + src: "img/logo.svg", + }, + items: [ + { + href: "https://github.com/stellar/stellar-design-system", + label: "GitHub", + position: "right", + }, + ], + }, + footer: { + style: "dark", + links: [ + { + title: "More", + items: [ + { + label: "GitHub", + href: "https://github.com/stellar/stellar-design-system", + }, + ], + }, + ], + copyright: `Copyright © ${new Date().getFullYear()} Stellar Design System. Built with Docusaurus.`, + }, + 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..82642538 --- a/@stellar/design-system-website/package.json +++ b/@stellar/design-system-website/package.json @@ -4,88 +4,46 @@ "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", + "git-info": "rm -rf src/generated/ && mkdir src/generated/ && echo export default \"{\\\"commitHash\\\": \\\"$(git rev-parse --short HEAD)\\\"};\" > src/generated/gitInfo.ts" }, "dependencies": { + "@docusaurus/core": "2.4.1", + "@docusaurus/preset-classic": "2.4.1", + "@docusaurus/theme-live-codeblock": "^2.4.1", + "@mdx-js/react": "^1.6.22", "@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", + "clsx": "^1.2.1", "prism-react-renderer": "^1.3.5", - "react": "^18.2.0", - "react-dom": "^18.2.0", - "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" + "react": "^17.0.2", + "react-dom": "^17.0.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 +52,8 @@ "last 1 firefox version", "last 1 safari version" ] + }, + "engines": { + "node": ">=18.0.0" } } diff --git a/@stellar/design-system-website/public/favicon.ico b/@stellar/design-system-website/public/favicon.ico deleted file mode 100644 index 4f17c94a834735ea04cf72bff9589bf3f0a8bbcd..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 7406 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 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/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/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/PreviewBlock/index.tsx b/@stellar/design-system-website/src/components/PreviewBlock/index.tsx new file mode 100644 index 00000000..f359f30a --- /dev/null +++ b/@stellar/design-system-website/src/components/PreviewBlock/index.tsx @@ -0,0 +1,6 @@ +import React from "react"; + +export const PreviewBlock = ({ children }: { children: React.ReactNode }) => { + // TODO: theme switch + return
{children}
; +}; 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/assets.tsx b/@stellar/design-system-website/src/constants/details/assets.tsx deleted file mode 100644 index 7fcd6181..00000000 --- a/@stellar/design-system-website/src/constants/details/assets.tsx +++ /dev/null @@ -1,187 +0,0 @@ -import { Icon, Logo } from "@stellar/design-system"; -import { ComponentDetails, ComponentDetailsId } from "types/types"; - -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: [ - , - , - , - , - , - , - , - , - , - , - , - , - , - , - , - , - , - , - , - , - , - , - , - , - , - , - , - , - , - , - , - , - , - , - , - , - , - , - , - , - , - , - , - , - , - , - , - , - , - , - , - , - , - , - , - , - , - , - , - , - , - , - , - , - , - , - , - , - , - , - , - , - , - , - , - , - , - , - , - , - , - , - , - , - , - , - , - , - , - , - , - , - , - , - , - , - , - , - , - , - , - , - , - , - , - , - , - , - , - , - , - , - , - , - , - , - , - , - , - , - , - , - , - , - , - , - , - , - , - , - , - , - , - , - , - , - , - , - , - , - , - , - , - , - , - , - , - , - , - , - ], - useGridLayout: true, - }, - { - title: "Logos", - description: - "SVG logo components, which can be styled in CSS if necessary.", - component: [ - , - , - , - , - , - ], - useGridLayout: true, - }, - ], - props: [], - 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: [ -