From 0dc810996af3f93bc67bfdf93d19e0d8148afdd9 Mon Sep 17 00:00:00 2001 From: Brandon Clark <98107867+bclark-p44@users.noreply.github.com> Date: Mon, 20 Mar 2023 14:36:38 -0700 Subject: [PATCH] feat: adding docs website (#317) * feat: adding docs website * feat: adding box docs (#296) * feat: adding skeleton docs (#295) Co-authored-by: Brandon Clark * feat: adding action docs (#297) * Feat: breadcrumbs and pagination docs (#300) * fix(breadcrumb): exports from core * feat(website): added breadcrumb docs * fix(website): pagination docs title * feat(website): menu docs (#301) * feat: adding layout docs (#303) * feat(website): side nav docs (#306) * docs: dialog docs (#307) * fix(website): consistent title formatting * feat(website): add card demo * feat(website): tooltip demo * feat(website): dialog docs * docs(website): spinner (#310) * docs: portal docs (#308) * docs(website): dropdown demo * docs(website): pagination demo * docs(website): portal docs * docs(website): fix pagination format ci failure --------- Co-authored-by: Brandon Clark <98107867+bclark-p44@users.noreply.github.com> * feat: improving website layout (#313) * feat: finishing component docs (#316) * feat: adding docs website * feat: finishing component docs * chore: wrapping up docs * chore: removing changesets * chore: adding changeset --------- Co-authored-by: Daniel --- .changeset/smart-bats-eat.md | 2 + .github/workflows/codeql-analysis.yml | 27 - .gitignore | 3 - .prettierignore | 4 +- apps/website/.eslintrc.js | 10 + apps/website/.gitignore | 20 + apps/website/README.md | 45 + apps/website/babel.config.js | 6 + apps/website/docs/actions/_category_.json | 5 + apps/website/docs/actions/action-card.mdx | 70 + apps/website/docs/actions/button-group.mdx | 64 + apps/website/docs/actions/button.mdx | 89 + apps/website/docs/actions/icon-button.mdx | 89 + apps/website/docs/actions/link.mdx | 26 + apps/website/docs/content/_category_.json | 5 + apps/website/docs/content/avatar.mdx | 35 + apps/website/docs/content/card.mdx | 84 + apps/website/docs/content/separator.mdx | 26 + apps/website/docs/content/skeleton.mdx | 26 + apps/website/docs/content/typography.mdx | 25 + apps/website/docs/core/_category_.json | 5 + apps/website/docs/core/colors.mdx | 68 + apps/website/docs/core/data-visualization.mdx | 11 + apps/website/docs/core/design-tokens.mdx | 6 + apps/website/docs/core/elevation.mdx | 12 + apps/website/docs/core/icons.mdx | 6 + apps/website/docs/core/layout.mdx | 17 + apps/website/docs/core/typography.mdx | 54 + .../website/docs/data-display/_category_.json | 5 + apps/website/docs/data-display/list-box.mdx | 139 + apps/website/docs/data-display/pill.mdx | 40 + apps/website/docs/data-display/table.mdx | 244 + apps/website/docs/data-display/tag.mdx | 24 + .../docs/date-and-time/_category_.json | 5 + .../docs/date-and-time/date-picker.mdx | 103 + .../docs/date-and-time/date-range-picker.mdx | 114 + .../docs/getting-started/_category_.json | 5 + .../docs/getting-started/installation.mdx | 38 + .../website/docs/getting-started/overview.mdx | 65 + apps/website/docs/inputs/_category_.json | 5 + apps/website/docs/inputs/checkbox.mdx | 91 + apps/website/docs/inputs/combobox.mdx | 259 + apps/website/docs/inputs/mult-combobox.mdx | 265 + apps/website/docs/inputs/multi-select.mdx | 250 + apps/website/docs/inputs/radio.mdx | 89 + apps/website/docs/inputs/select.mdx | 233 + apps/website/docs/inputs/switch.mdx | 45 + apps/website/docs/inputs/text-area.mdx | 55 + apps/website/docs/inputs/text-field.mdx | 59 + apps/website/docs/layout/_category_.json | 5 + apps/website/docs/layout/container.mdx | 51 + apps/website/docs/layout/flex.mdx | 91 + apps/website/docs/layout/grid.mdx | 73 + apps/website/docs/layout/stack.mdx | 50 + apps/website/docs/navigation/_category_.json | 5 + apps/website/docs/navigation/breadcrumb.mdx | 24 + apps/website/docs/navigation/menu.mdx | 71 + apps/website/docs/navigation/pagination.mdx | 45 + .../docs/navigation/side-navigation.mdx | 115 + apps/website/docs/overlays/_category_.json | 5 + apps/website/docs/overlays/dialog.mdx | 56 + apps/website/docs/overlays/dropdown.mdx | 201 + apps/website/docs/overlays/popover.mdx | 60 + apps/website/docs/overlays/toast.mdx | 159 + apps/website/docs/overlays/tooltip.mdx | 55 + apps/website/docs/utilities/_category_.json | 5 + apps/website/docs/utilities/box.mdx | 37 + apps/website/docs/utilities/spinner.mdx | 34 + .../docs/utilities/visually-hidden.mdx | 22 + apps/website/docusaurus.config.js | 60 + apps/website/moon.yml | 38 + apps/website/package.json | 57 + apps/website/scripts/.eslintrc.js | 7 + apps/website/scripts/propsDoc.mjs | 38 + apps/website/sidebars.js | 6 + .../BrowserWindow/BrowserWindow.tsx | 33 + .../src/components/BrowserWindow/index.ts | 1 + .../src/components/DocsCard/DocsCard.tsx | 59 + apps/website/src/components/DocsCard/index.ts | 1 + .../src/components/Elevation/Elevation.tsx | 17 + .../src/components/Elevation/index.tsx | 1 + .../src/components/IconGrid/IconGrid.tsx | 109 + apps/website/src/components/IconGrid/index.ts | 1 + .../src/components/Palette/Palette.tsx | 73 + apps/website/src/components/Palette/index.ts | 1 + .../src/components/PropsTable/PropsTable.tsx | 73 + .../src/components/PropsTable/index.ts | 1 + apps/website/src/components/Swatch/Swatch.tsx | 24 + apps/website/src/components/Swatch/index.ts | 1 + .../src/components/Swatches/Swatches.tsx | 29 + apps/website/src/components/Swatches/index.ts | 1 + apps/website/src/components/Token/Token.tsx | 173 + apps/website/src/components/Token/index.ts | 1 + .../components/TokensTable/TokensTable.tsx | 66 + .../src/components/TokensTable/index.ts | 1 + apps/website/src/components/index.ts | 8 + apps/website/src/styles/_base.scss | 32 + apps/website/src/styles/_components.scss | 9 + apps/website/src/styles/_docs.scss | 6 + apps/website/src/styles/_fonts.scss | 31 + apps/website/src/styles/_global.scss | 64 + apps/website/src/styles/_modules.scss | 9 + apps/website/src/styles/_typography.scss | 53 + .../styles/components/_browser-window.scss | 69 + apps/website/src/styles/components/_code.scss | 98 + .../src/styles/components/_docs-card.scss | 38 + .../src/styles/components/_elevation.scss | 8 + .../src/styles/components/_icon-grid.scss | 63 + .../src/styles/components/_markdown.scss | 10 + .../src/styles/components/_palette.scss | 24 + .../src/styles/components/_swatch.scss | 12 + .../website/src/styles/components/_token.scss | 21 + apps/website/src/styles/custom.scss | 70 + apps/website/src/styles/docs/_footer.scss | 3 + apps/website/src/styles/docs/_hero.scss | 22 + apps/website/src/styles/docs/_navbar.scss | 11 + apps/website/src/styles/docs/_pagination.scss | 27 + apps/website/src/styles/docs/_sidebar.scss | 83 + apps/website/src/styles/docs/_toc.scss | 15 + apps/website/src/styles/modules/_code.scss | 98 + .../src/styles/modules/_docs-card-grid.scss | 9 + .../src/styles/modules/_docs-card.scss | 38 + .../website/src/styles/modules/_features.scss | 25 + apps/website/src/styles/modules/_footer.scss | 6 + apps/website/src/styles/modules/_hero.scss | 46 + .../website/src/styles/modules/_markdown.scss | 10 + apps/website/src/styles/modules/_navbar.scss | 7 + apps/website/src/styles/modules/_what.scss | 3 + .../src/theme/DocSidebar/Desktop/index.tsx | 31 + .../DocSidebar/Desktop/styles.module.css | 37 + apps/website/src/theme/MDXComponents/index.ts | 28 + apps/website/src/theme/Playground/index.tsx | 28 + .../website/src/theme/ReactLiveScope/index.ts | 14 + apps/website/src/theme/Root.tsx | 14 + apps/website/static/.gitignore | 1 + apps/website/static/.nojekyll | 0 .../static/fonts/fira/FiraCode-Regular.woff2 | Bin 0 -> 103240 bytes .../static/fonts/inter/Inter-Bold.woff2 | Bin 0 -> 106140 bytes .../static/fonts/inter/Inter-Regular.woff2 | Bin 0 -> 98868 bytes .../static/fonts/inter/Inter-SemiBold.woff2 | Bin 0 -> 105804 bytes apps/website/static/img/favicon.ico | Bin 0 -> 15086 bytes apps/website/static/img/hero.svg | 9 + apps/website/static/img/logo.svg | 18 + apps/website/static/img/nekker.svg | 109 + apps/website/static/img/thumbnails/avatar.png | Bin 0 -> 8146 bytes apps/website/static/img/thumbnails/box.png | Bin 0 -> 3450 bytes apps/website/static/img/thumbnails/button.png | Bin 0 -> 7730 bytes apps/website/static/img/thumbnails/card.png | Bin 0 -> 5308 bytes .../static/img/thumbnails/checkbox.png | Bin 0 -> 2340 bytes apps/website/static/img/thumbnails/colors.png | Bin 0 -> 7900 bytes .../static/img/thumbnails/combobox.png | Bin 0 -> 5835 bytes .../static/img/thumbnails/container.png | Bin 0 -> 2977 bytes .../static/img/thumbnails/contributing.png | Bin 0 -> 18885 bytes .../static/img/thumbnails/date-picker.png | Bin 0 -> 11014 bytes .../img/thumbnails/date-range-picker.png | Bin 0 -> 11014 bytes .../static/img/thumbnails/datepicker.png | Bin 0 -> 11014 bytes .../static/img/thumbnails/designers.png | Bin 0 -> 10842 bytes .../static/img/thumbnails/developers.png | Bin 0 -> 6761 bytes .../static/img/thumbnails/dropdown.png | Bin 0 -> 4643 bytes apps/website/static/img/thumbnails/flex.png | Bin 0 -> 1621 bytes .../static/img/thumbnails/form-control.png | Bin 0 -> 4505 bytes apps/website/static/img/thumbnails/grid.png | Bin 0 -> 1970 bytes apps/website/static/img/thumbnails/link.png | Bin 0 -> 5929 bytes .../static/img/thumbnails/list-box.png | Bin 0 -> 2293 bytes .../static/img/thumbnails/pagination.png | Bin 0 -> 12324 bytes apps/website/static/img/thumbnails/pill.png | Bin 0 -> 5126 bytes .../website/static/img/thumbnails/popover.png | Bin 0 -> 3219 bytes apps/website/static/img/thumbnails/radio.png | Bin 0 -> 3143 bytes apps/website/static/img/thumbnails/radius.png | Bin 0 -> 1434 bytes apps/website/static/img/thumbnails/select.png | Bin 0 -> 5192 bytes .../static/img/thumbnails/separator.png | Bin 0 -> 1245 bytes apps/website/static/img/thumbnails/shadow.png | Bin 0 -> 2813 bytes .../website/static/img/thumbnails/spacing.png | Bin 0 -> 1585 bytes apps/website/static/img/thumbnails/stack.png | Bin 0 -> 8306 bytes apps/website/static/img/thumbnails/switch.png | Bin 0 -> 5963 bytes apps/website/static/img/thumbnails/table.png | Bin 0 -> 8727 bytes apps/website/static/img/thumbnails/tag.png | Bin 0 -> 2321 bytes .../static/img/thumbnails/text-area.png | Bin 0 -> 2600 bytes .../static/img/thumbnails/text-field.png | Bin 0 -> 5189 bytes .../website/static/img/thumbnails/tooltip.png | Bin 0 -> 3410 bytes .../static/img/thumbnails/typography.png | Bin 0 -> 4792 bytes .../static/img/thumbnails/visually-hidden.png | Bin 0 -> 11506 bytes apps/website/tsconfig.json | 32 + apps/website/types/docusaurus.d.ts | 1 + apps/website/types/global.d.ts | 3 + package.json | 1 + packages/react/components/avatar/docs.json | 2 +- .../components/avatar/docs/Avatar.docs.json | 28 + packages/react/components/link/docs.json | 9 +- packages/react/components/portal/docs.json | 2 +- .../components/side-navigation/docs.json | 2 +- packages/react/components/skeleton/moon.yml | 6 + packages/react/components/spinner/docs.json | 17 + packages/react/components/spinner/moon.yml | 6 + packages/react/components/table/docs.json | 2 +- packages/react/components/toast/docs.json | 17 + packages/react/components/toast/moon.yml | 6 + packages/react/components/tooltip/docs.json | 2 +- packages/react/core/docs.json | 107 +- packages/react/core/moon.yml | 1 + packages/react/core/package.json | 1 + packages/react/core/src/index.ts | 1 + packages/react/core/tsconfig.json | 3 + scripts/propsDoc.mjs | 13 +- tsconfig.eslint.json | 1 + tsconfig.json | 6 + yarn.lock | 4886 +++++++++++++++-- 207 files changed, 11053 insertions(+), 428 deletions(-) create mode 100644 .changeset/smart-bats-eat.md delete mode 100644 .github/workflows/codeql-analysis.yml create mode 100644 apps/website/.eslintrc.js create mode 100644 apps/website/.gitignore create mode 100644 apps/website/README.md create mode 100644 apps/website/babel.config.js create mode 100644 apps/website/docs/actions/_category_.json create mode 100644 apps/website/docs/actions/action-card.mdx create mode 100644 apps/website/docs/actions/button-group.mdx create mode 100644 apps/website/docs/actions/button.mdx create mode 100644 apps/website/docs/actions/icon-button.mdx create mode 100644 apps/website/docs/actions/link.mdx create mode 100644 apps/website/docs/content/_category_.json create mode 100644 apps/website/docs/content/avatar.mdx create mode 100644 apps/website/docs/content/card.mdx create mode 100644 apps/website/docs/content/separator.mdx create mode 100644 apps/website/docs/content/skeleton.mdx create mode 100644 apps/website/docs/content/typography.mdx create mode 100644 apps/website/docs/core/_category_.json create mode 100644 apps/website/docs/core/colors.mdx create mode 100644 apps/website/docs/core/data-visualization.mdx create mode 100644 apps/website/docs/core/design-tokens.mdx create mode 100644 apps/website/docs/core/elevation.mdx create mode 100644 apps/website/docs/core/icons.mdx create mode 100644 apps/website/docs/core/layout.mdx create mode 100644 apps/website/docs/core/typography.mdx create mode 100644 apps/website/docs/data-display/_category_.json create mode 100644 apps/website/docs/data-display/list-box.mdx create mode 100644 apps/website/docs/data-display/pill.mdx create mode 100644 apps/website/docs/data-display/table.mdx create mode 100644 apps/website/docs/data-display/tag.mdx create mode 100644 apps/website/docs/date-and-time/_category_.json create mode 100644 apps/website/docs/date-and-time/date-picker.mdx create mode 100644 apps/website/docs/date-and-time/date-range-picker.mdx create mode 100644 apps/website/docs/getting-started/_category_.json create mode 100644 apps/website/docs/getting-started/installation.mdx create mode 100644 apps/website/docs/getting-started/overview.mdx create mode 100644 apps/website/docs/inputs/_category_.json create mode 100644 apps/website/docs/inputs/checkbox.mdx create mode 100644 apps/website/docs/inputs/combobox.mdx create mode 100644 apps/website/docs/inputs/mult-combobox.mdx create mode 100644 apps/website/docs/inputs/multi-select.mdx create mode 100644 apps/website/docs/inputs/radio.mdx create mode 100644 apps/website/docs/inputs/select.mdx create mode 100644 apps/website/docs/inputs/switch.mdx create mode 100644 apps/website/docs/inputs/text-area.mdx create mode 100644 apps/website/docs/inputs/text-field.mdx create mode 100644 apps/website/docs/layout/_category_.json create mode 100644 apps/website/docs/layout/container.mdx create mode 100644 apps/website/docs/layout/flex.mdx create mode 100644 apps/website/docs/layout/grid.mdx create mode 100644 apps/website/docs/layout/stack.mdx create mode 100644 apps/website/docs/navigation/_category_.json create mode 100644 apps/website/docs/navigation/breadcrumb.mdx create mode 100644 apps/website/docs/navigation/menu.mdx create mode 100644 apps/website/docs/navigation/pagination.mdx create mode 100644 apps/website/docs/navigation/side-navigation.mdx create mode 100644 apps/website/docs/overlays/_category_.json create mode 100644 apps/website/docs/overlays/dialog.mdx create mode 100644 apps/website/docs/overlays/dropdown.mdx create mode 100644 apps/website/docs/overlays/popover.mdx create mode 100644 apps/website/docs/overlays/toast.mdx create mode 100644 apps/website/docs/overlays/tooltip.mdx create mode 100644 apps/website/docs/utilities/_category_.json create mode 100644 apps/website/docs/utilities/box.mdx create mode 100644 apps/website/docs/utilities/spinner.mdx create mode 100644 apps/website/docs/utilities/visually-hidden.mdx create mode 100644 apps/website/docusaurus.config.js create mode 100644 apps/website/moon.yml create mode 100644 apps/website/package.json create mode 100644 apps/website/scripts/.eslintrc.js create mode 100644 apps/website/scripts/propsDoc.mjs create mode 100644 apps/website/sidebars.js create mode 100644 apps/website/src/components/BrowserWindow/BrowserWindow.tsx create mode 100644 apps/website/src/components/BrowserWindow/index.ts create mode 100644 apps/website/src/components/DocsCard/DocsCard.tsx create mode 100644 apps/website/src/components/DocsCard/index.ts create mode 100644 apps/website/src/components/Elevation/Elevation.tsx create mode 100644 apps/website/src/components/Elevation/index.tsx create mode 100644 apps/website/src/components/IconGrid/IconGrid.tsx create mode 100644 apps/website/src/components/IconGrid/index.ts create mode 100644 apps/website/src/components/Palette/Palette.tsx create mode 100644 apps/website/src/components/Palette/index.ts create mode 100644 apps/website/src/components/PropsTable/PropsTable.tsx create mode 100644 apps/website/src/components/PropsTable/index.ts create mode 100644 apps/website/src/components/Swatch/Swatch.tsx create mode 100644 apps/website/src/components/Swatch/index.ts create mode 100644 apps/website/src/components/Swatches/Swatches.tsx create mode 100644 apps/website/src/components/Swatches/index.ts create mode 100644 apps/website/src/components/Token/Token.tsx create mode 100644 apps/website/src/components/Token/index.ts create mode 100644 apps/website/src/components/TokensTable/TokensTable.tsx create mode 100644 apps/website/src/components/TokensTable/index.ts create mode 100644 apps/website/src/components/index.ts create mode 100644 apps/website/src/styles/_base.scss create mode 100644 apps/website/src/styles/_components.scss create mode 100644 apps/website/src/styles/_docs.scss create mode 100644 apps/website/src/styles/_fonts.scss create mode 100644 apps/website/src/styles/_global.scss create mode 100644 apps/website/src/styles/_modules.scss create mode 100644 apps/website/src/styles/_typography.scss create mode 100644 apps/website/src/styles/components/_browser-window.scss create mode 100644 apps/website/src/styles/components/_code.scss create mode 100644 apps/website/src/styles/components/_docs-card.scss create mode 100644 apps/website/src/styles/components/_elevation.scss create mode 100644 apps/website/src/styles/components/_icon-grid.scss create mode 100644 apps/website/src/styles/components/_markdown.scss create mode 100644 apps/website/src/styles/components/_palette.scss create mode 100644 apps/website/src/styles/components/_swatch.scss create mode 100644 apps/website/src/styles/components/_token.scss create mode 100644 apps/website/src/styles/custom.scss create mode 100644 apps/website/src/styles/docs/_footer.scss create mode 100644 apps/website/src/styles/docs/_hero.scss create mode 100644 apps/website/src/styles/docs/_navbar.scss create mode 100644 apps/website/src/styles/docs/_pagination.scss create mode 100644 apps/website/src/styles/docs/_sidebar.scss create mode 100644 apps/website/src/styles/docs/_toc.scss create mode 100644 apps/website/src/styles/modules/_code.scss create mode 100644 apps/website/src/styles/modules/_docs-card-grid.scss create mode 100644 apps/website/src/styles/modules/_docs-card.scss create mode 100644 apps/website/src/styles/modules/_features.scss create mode 100644 apps/website/src/styles/modules/_footer.scss create mode 100644 apps/website/src/styles/modules/_hero.scss create mode 100644 apps/website/src/styles/modules/_markdown.scss create mode 100644 apps/website/src/styles/modules/_navbar.scss create mode 100644 apps/website/src/styles/modules/_what.scss create mode 100644 apps/website/src/theme/DocSidebar/Desktop/index.tsx create mode 100644 apps/website/src/theme/DocSidebar/Desktop/styles.module.css create mode 100644 apps/website/src/theme/MDXComponents/index.ts create mode 100644 apps/website/src/theme/Playground/index.tsx create mode 100644 apps/website/src/theme/ReactLiveScope/index.ts create mode 100644 apps/website/src/theme/Root.tsx create mode 100644 apps/website/static/.gitignore create mode 100644 apps/website/static/.nojekyll create mode 100644 apps/website/static/fonts/fira/FiraCode-Regular.woff2 create mode 100644 apps/website/static/fonts/inter/Inter-Bold.woff2 create mode 100644 apps/website/static/fonts/inter/Inter-Regular.woff2 create mode 100644 apps/website/static/fonts/inter/Inter-SemiBold.woff2 create mode 100644 apps/website/static/img/favicon.ico create mode 100644 apps/website/static/img/hero.svg create mode 100644 apps/website/static/img/logo.svg create mode 100644 apps/website/static/img/nekker.svg create mode 100644 apps/website/static/img/thumbnails/avatar.png create mode 100644 apps/website/static/img/thumbnails/box.png create mode 100644 apps/website/static/img/thumbnails/button.png create mode 100644 apps/website/static/img/thumbnails/card.png create mode 100644 apps/website/static/img/thumbnails/checkbox.png create mode 100644 apps/website/static/img/thumbnails/colors.png create mode 100644 apps/website/static/img/thumbnails/combobox.png create mode 100644 apps/website/static/img/thumbnails/container.png create mode 100644 apps/website/static/img/thumbnails/contributing.png create mode 100644 apps/website/static/img/thumbnails/date-picker.png create mode 100644 apps/website/static/img/thumbnails/date-range-picker.png create mode 100644 apps/website/static/img/thumbnails/datepicker.png create mode 100644 apps/website/static/img/thumbnails/designers.png create mode 100644 apps/website/static/img/thumbnails/developers.png create mode 100644 apps/website/static/img/thumbnails/dropdown.png create mode 100644 apps/website/static/img/thumbnails/flex.png create mode 100644 apps/website/static/img/thumbnails/form-control.png create mode 100644 apps/website/static/img/thumbnails/grid.png create mode 100644 apps/website/static/img/thumbnails/link.png create mode 100644 apps/website/static/img/thumbnails/list-box.png create mode 100644 apps/website/static/img/thumbnails/pagination.png create mode 100644 apps/website/static/img/thumbnails/pill.png create mode 100644 apps/website/static/img/thumbnails/popover.png create mode 100644 apps/website/static/img/thumbnails/radio.png create mode 100644 apps/website/static/img/thumbnails/radius.png create mode 100644 apps/website/static/img/thumbnails/select.png create mode 100644 apps/website/static/img/thumbnails/separator.png create mode 100644 apps/website/static/img/thumbnails/shadow.png create mode 100644 apps/website/static/img/thumbnails/spacing.png create mode 100644 apps/website/static/img/thumbnails/stack.png create mode 100644 apps/website/static/img/thumbnails/switch.png create mode 100644 apps/website/static/img/thumbnails/table.png create mode 100644 apps/website/static/img/thumbnails/tag.png create mode 100644 apps/website/static/img/thumbnails/text-area.png create mode 100644 apps/website/static/img/thumbnails/text-field.png create mode 100644 apps/website/static/img/thumbnails/tooltip.png create mode 100644 apps/website/static/img/thumbnails/typography.png create mode 100644 apps/website/static/img/thumbnails/visually-hidden.png create mode 100644 apps/website/tsconfig.json create mode 100644 apps/website/types/docusaurus.d.ts create mode 100644 apps/website/types/global.d.ts create mode 100644 packages/react/components/avatar/docs/Avatar.docs.json create mode 100644 packages/react/components/spinner/docs.json create mode 100644 packages/react/components/toast/docs.json diff --git a/.changeset/smart-bats-eat.md b/.changeset/smart-bats-eat.md new file mode 100644 index 00000000..a845151c --- /dev/null +++ b/.changeset/smart-bats-eat.md @@ -0,0 +1,2 @@ +--- +--- diff --git a/.github/workflows/codeql-analysis.yml b/.github/workflows/codeql-analysis.yml deleted file mode 100644 index 1d1fd8ca..00000000 --- a/.github/workflows/codeql-analysis.yml +++ /dev/null @@ -1,27 +0,0 @@ -name: CodeQL - -on: - schedule: - - cron: '0 2 * * *' - -jobs: - analyze: - name: Analyze - runs-on: ubuntu-latest - - permissions: - actions: read - contents: read - security-events: write - - steps: - - name: Checkout repository - uses: actions/checkout@v3 - - - name: Initialize CodeQL - uses: github/codeql-action/init@v2 - with: - languages: javascript, typescript - - - name: Perform CodeQL Analysis - uses: github/codeql-action/analyze@v2 diff --git a/.gitignore b/.gitignore index f2f43d75..1743ce0e 100644 --- a/.gitignore +++ b/.gitignore @@ -21,9 +21,6 @@ build/ .contentlayer .vercel -# ignore sitemap -apps/**/sitemap.xml - # Configs *.tsbuildinfo diff --git a/.prettierignore b/.prettierignore index 0fe4496f..cec06c5b 100644 --- a/.prettierignore +++ b/.prettierignore @@ -1,6 +1,5 @@ -.next/ +.docusaurus .cache/ -.contentlayer/ node_modules/ build/ coverage/ @@ -8,6 +7,7 @@ dist/ dts/ esm/ lib/ +generated/ CHANGELOG.md *.d.ts *.d.cts diff --git a/apps/website/.eslintrc.js b/apps/website/.eslintrc.js new file mode 100644 index 00000000..3101003d --- /dev/null +++ b/apps/website/.eslintrc.js @@ -0,0 +1,10 @@ +module.exports = { + rules: { + 'global-require': 'off', + 'import/no-commonjs': 'off', + 'import/no-default-export': 'off', + 'import/no-unresolved': 'off', + '@typescript-eslint/no-unsafe-assignment': 'off', + '@typescript-eslint/no-unsafe-member-access': 'off', + }, +}; diff --git a/apps/website/.gitignore b/apps/website/.gitignore new file mode 100644 index 00000000..b2d6de30 --- /dev/null +++ b/apps/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/apps/website/README.md b/apps/website/README.md new file mode 100644 index 00000000..fe034258 --- /dev/null +++ b/apps/website/README.md @@ -0,0 +1,45 @@ +# Website + +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/apps/website/babel.config.js b/apps/website/babel.config.js new file mode 100644 index 00000000..4e3997ee --- /dev/null +++ b/apps/website/babel.config.js @@ -0,0 +1,6 @@ +module.exports = { + presets: [ + require.resolve('@docusaurus/core/lib/babel/preset'), + ['@babel/preset-react', { runtime: 'automatic' }], + ], +}; diff --git a/apps/website/docs/actions/_category_.json b/apps/website/docs/actions/_category_.json new file mode 100644 index 00000000..f4cc1dd7 --- /dev/null +++ b/apps/website/docs/actions/_category_.json @@ -0,0 +1,5 @@ +{ + "label": "Actions", + "position": 3, + "collapsible": false +} diff --git a/apps/website/docs/actions/action-card.mdx b/apps/website/docs/actions/action-card.mdx new file mode 100644 index 00000000..1058486b --- /dev/null +++ b/apps/website/docs/actions/action-card.mdx @@ -0,0 +1,70 @@ +--- +title: Action Card +description: Used as a large call to action. +--- + +An action card is used as a large call to action. + +```jsx live + + + + Title + + Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut + labore et dolore magna aliqua. + + + +``` + +## Usage + +### Small Image + +The size of the image can be made to be smaller for dense layouts by sitting the `size` prop on the +`ActionCardImage` component to `small`. + +```jsx live + + + + Title + + Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut + labore et dolore magna aliqua. + + + +``` + +### Without Body + +An action card can be rendered without a body component. + +```jsx live + + + + Title + + +``` + +## Props + +### ActionCard + + + +### ActionCardBody + + + +### ActionCardHeader + + + +### ActionCardImage + + diff --git a/apps/website/docs/actions/button-group.mdx b/apps/website/docs/actions/button-group.mdx new file mode 100644 index 00000000..8cc8fcfc --- /dev/null +++ b/apps/website/docs/actions/button-group.mdx @@ -0,0 +1,64 @@ +--- +title: Button Group +description: Group related buttons. +--- + +Group related buttons. + +```jsx live + + + + +``` + +## Usage + +### Variant + +The button group can control the variant for all buttons within the group. + +```jsx live + + + + +``` + +### Small + +Small buttons are used when vertical spacing is limited. + +```jsx live + + + + +``` + +### Attached + +All buttons within a button group can be attached to each other. + +```jsx live + + + + +``` + +### Disabled state + +All buttons within a button group can be disabled to prevent a user from taking action on all +buttons within the group. + +```jsx live + + + + +``` + +## Props + + diff --git a/apps/website/docs/actions/button.mdx b/apps/website/docs/actions/button.mdx new file mode 100644 index 00000000..49227bc5 --- /dev/null +++ b/apps/website/docs/actions/button.mdx @@ -0,0 +1,89 @@ +--- +title: Button +description: Clickable elements that communicate actions that users can take. +--- + +Clickable elements that communicate actions that users can take. + +```jsx live + +``` + +## Usage + +### Primary + +Primary buttons are used to indicate the highest priority action a user can perform. + +```jsx live + +``` + +### Secondary + +Secondary buttons are second in priority to primary buttons and are used for important actions that +aren't the primary action. + +```jsx live + +``` + +### Tertiary + +Tertiary buttons are the lowest priority actions and should be used for less commonly used actions. + +```jsx live + +``` + +### Destructive + +Destructive buttons are used to indicate an action that is destructive and cannot be undone. + +```jsx live + +``` + +### Brand + +Brand buttons are used for project44 specific marketing moments and should be use sparingly. + +```jsx live + +``` + +### Small + +Small buttons are used when vertical spacing is limited. + +```jsx live + +``` + +### Start Icon + +Include an icon before the button label. + +```jsx live + +``` + +### End Icon + +Include an icon after the button label. + +```jsx live + +``` + +### Disabled State + +Set the `isDisabled` prop to prevent a user from pressing a button. + +```jsx live + +``` + +## Props + + diff --git a/apps/website/docs/actions/icon-button.mdx b/apps/website/docs/actions/icon-button.mdx new file mode 100644 index 00000000..2304f1db --- /dev/null +++ b/apps/website/docs/actions/icon-button.mdx @@ -0,0 +1,89 @@ +--- +title: Icon Button +description: Clickable elements that communicate actions that users can take. +--- + +Clickable elements that communicate actions that users can take. + +```jsx live + + + +``` + +## Usage + +### Primary + +Primary buttons are used to indicate the highest priority action a user can perform. + +```jsx live + + + +``` + +### Secondary + +Secondary buttons are second in priority to primary buttons and are used for important actions that +aren't the primary action. + +```jsx live + + + +``` + +### Tertiary + +Tertiary buttons are the lowest priority actions and should be used for less commonly used actions. + +```jsx live + + + +``` + +### Destructive + +Destructive buttons are used to indicate an action that is destructive and cannot be undone. + +```jsx live + + + +``` + +### Brand + +Brand buttons are used for project44 specific marketing moments and should be use sparingly. + +```jsx live + + + +``` + +### Small + +Small buttons are used when vertical spacing is limited. + +```jsx live + + + +``` + +### Disabled State + +Set the `isDisabled` prop to prevent a user from pressing a button. + +```jsx live + + + +``` + +## Props + + diff --git a/apps/website/docs/actions/link.mdx b/apps/website/docs/actions/link.mdx new file mode 100644 index 00000000..b810f369 --- /dev/null +++ b/apps/website/docs/actions/link.mdx @@ -0,0 +1,26 @@ +--- +title: Link +description: Navigate a user to another page or website. +--- + +Navigate a user to another page or website. + +```jsx live +Manifest Design System +``` + +## Usage + +### Inline + +Links can be rendered inline with text. + +```jsx live + + Visit the manifest design system website + +``` + +## Props + + diff --git a/apps/website/docs/content/_category_.json b/apps/website/docs/content/_category_.json new file mode 100644 index 00000000..aa989c2c --- /dev/null +++ b/apps/website/docs/content/_category_.json @@ -0,0 +1,5 @@ +{ + "label": "Content", + "position": 4, + "collapsible": false +} diff --git a/apps/website/docs/content/avatar.mdx b/apps/website/docs/content/avatar.mdx new file mode 100644 index 00000000..fef5c64a --- /dev/null +++ b/apps/website/docs/content/avatar.mdx @@ -0,0 +1,35 @@ +--- +title: Avatar +description: A visual representation of a user or entity. +--- + +An avatar is visual representation of a user or entity. + +```jsx live + +``` + +## Usage + +### Size + +Sizes are predefined and can be adjusted via the `size` prop. + +```jsx live + + + + +``` + +### Fallback + +Fallback text can be rendered if a `src` prop is not defined or if the image `url` does not load. + +```jsx live + +``` + +## Props + + diff --git a/apps/website/docs/content/card.mdx b/apps/website/docs/content/card.mdx new file mode 100644 index 00000000..010a7933 --- /dev/null +++ b/apps/website/docs/content/card.mdx @@ -0,0 +1,84 @@ +--- +title: Card +description: A container that groups related content and actions. +--- + +A container that groups related content and actions. + +```jsx live + + + + + Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut + labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco + laboris nisi ut aliquip ex ea commodo consequat. + + + + +``` + +## Usage + +### Header + +Use a header to provide more context of the cards purpose. + +```jsx live + + + Title + + + Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut + labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco + laboris nisi ut aliquip ex ea commodo consequat. + + + + +``` + +### Footer + +Cards can contain actions for a user to perform. + +```jsx live + + + Title + + + Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut + labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco + laboris nisi ut aliquip ex ea commodo consequat. + + + + + + + + + + +``` + +## Props + +### Card Props + + + +### CardBody Props + + + +### CardFooter Props + + + +### CardHeader Props + + diff --git a/apps/website/docs/content/separator.mdx b/apps/website/docs/content/separator.mdx new file mode 100644 index 00000000..13745961 --- /dev/null +++ b/apps/website/docs/content/separator.mdx @@ -0,0 +1,26 @@ +--- +title: Separator +description: Divide content in close proximity. +--- + +Divide content in close proximity. + +```jsx live + +``` + +## Usage + +### Vertical + +Set the `orientation` prop to adjust the layout of the separator. + +```jsx live + + + +``` + +## Props + + diff --git a/apps/website/docs/content/skeleton.mdx b/apps/website/docs/content/skeleton.mdx new file mode 100644 index 00000000..82d378e0 --- /dev/null +++ b/apps/website/docs/content/skeleton.mdx @@ -0,0 +1,26 @@ +--- +title: Skeleton +description: A visual placeholder for an element that is loading. +--- + +A visual placeholder for an element that is loading. + +```jsx live + + + + + +``` + +## Usage + +When you need to prevent Cumulative Layout Shift (CLS) or provide a visual placeholder for an +element that is loading. + +Create desired `rect` shapes using the [SkeletonReact tool](https://skeletonreact.com/) then pass it +as a child to the `Skeleton` component. + +## Props + + diff --git a/apps/website/docs/content/typography.mdx b/apps/website/docs/content/typography.mdx new file mode 100644 index 00000000..b5c1bfa7 --- /dev/null +++ b/apps/website/docs/content/typography.mdx @@ -0,0 +1,25 @@ +--- +title: Typography +description: A component implementing the manifest design system type styles. +--- + +A component implementing the manifest design system type styles. + +```jsx live + + Manifesting Project 44 experiences through design. + Manifesting Project 44 experiences through design. + Manifesting Project 44 experiences through design. + Manifesting Project 44 experiences through design. + Manifesting Project 44 experiences through design. + Manifesting Project 44 experiences through design. + Manifesting Project 44 experiences through design. + Manifesting Project 44 experiences through design. + Manifesting Project 44 experiences through design. + Manifesting Project 44 experiences through design. + +``` + +## Props + + diff --git a/apps/website/docs/core/_category_.json b/apps/website/docs/core/_category_.json new file mode 100644 index 00000000..a253aa11 --- /dev/null +++ b/apps/website/docs/core/_category_.json @@ -0,0 +1,5 @@ +{ + "label": "Core", + "position": 2, + "collapsible": false +} diff --git a/apps/website/docs/core/colors.mdx b/apps/website/docs/core/colors.mdx new file mode 100644 index 00000000..767dde2f --- /dev/null +++ b/apps/website/docs/core/colors.mdx @@ -0,0 +1,68 @@ +--- +title: Colors +description: Add color to your applications in a meaningful way. +--- + +Add color to your applications in a meaningful way. + +## Background + +Global background colors + + + +## Border + +Global border colors + + + +## Primary + +The primary application color + + + +## Text + +Global border colors + + + +## Palette + +These color palettes are designed to work together harmoniously, and can be used to develop your +applications palette. + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/apps/website/docs/core/data-visualization.mdx b/apps/website/docs/core/data-visualization.mdx new file mode 100644 index 00000000..d3695460 --- /dev/null +++ b/apps/website/docs/core/data-visualization.mdx @@ -0,0 +1,11 @@ +--- +title: Data Visualization +--- + +Graphical representation of information and data. + +## Palette + +The data visualization color palette colors that provide contrast from each other in a dataset. + + diff --git a/apps/website/docs/core/design-tokens.mdx b/apps/website/docs/core/design-tokens.mdx new file mode 100644 index 00000000..54cd9a24 --- /dev/null +++ b/apps/website/docs/core/design-tokens.mdx @@ -0,0 +1,6 @@ +--- +title: Design Tokens +hide_table_of_contents: true +--- + + diff --git a/apps/website/docs/core/elevation.mdx b/apps/website/docs/core/elevation.mdx new file mode 100644 index 00000000..06fd4dfd --- /dev/null +++ b/apps/website/docs/core/elevation.mdx @@ -0,0 +1,12 @@ +--- +title: Elevation +description: Provide emphasis to elements via elevation. +--- + +Provide emphasis to elements via elevation. + + + + + + diff --git a/apps/website/docs/core/icons.mdx b/apps/website/docs/core/icons.mdx new file mode 100644 index 00000000..52af8a5f --- /dev/null +++ b/apps/website/docs/core/icons.mdx @@ -0,0 +1,6 @@ +--- +title: Icons +hide_table_of_contents: true +--- + + diff --git a/apps/website/docs/core/layout.mdx b/apps/website/docs/core/layout.mdx new file mode 100644 index 00000000..3d0dbeed --- /dev/null +++ b/apps/website/docs/core/layout.mdx @@ -0,0 +1,17 @@ +--- +title: Layout +hide_table_of_contents: true +--- + +Spacing tokens are used for padding, margins, and position coordinates. + +The Manifest Design System spacing scale is based off 4px increments, anything within that range is +supported. Below is a collection of our most commonly used spacing tokens. + +| Name | Size | +| -------------- | ---- | ---------------------------------------------------------------------------------------------------- | +| $space-x-small | 4px |
| +| $space-small | 8px |
| +| $space-medium | 16px |
| +| $space-large | 24px |
| +| $space-x-large | 32px |
| diff --git a/apps/website/docs/core/typography.mdx b/apps/website/docs/core/typography.mdx new file mode 100644 index 00000000..71e59f27 --- /dev/null +++ b/apps/website/docs/core/typography.mdx @@ -0,0 +1,54 @@ +--- +title: Typography +--- + +Type hierarchy and scales + +import { BrowserWindow } from '@site/src/components'; + +## Type face + +The Manifest Design System type hierarchy and scale is designed leveraging the +[Inter](https://rsms.me/inter/) type face. + +![Inter Type Face](https://rsms.me/inter/samples/img/a-z-regular.svg) + +## Type scale + +The system provides the following type scales to create our type hierarchy. + + + + Display + Heading + Title + Subtitle + Body + Body Body + Subtext + Subtext Bold + Caption + Caption Bold + + + +| Name | Size | Weight | Line Height | Letter Spacing | +| ---------------------------------------------------- | ---- | ------ | ----------- | -------------- | +| Display | 32px | 700 | 42px | -0.03em | +| Heading | 24px | 700 | 32px | -0.02em | +| Title | 20px | 700 | 30px | -0.01em | +| Subtitle | 16px | 700 | 24px | -0.01em | +| Body | 16px | 400 | 24px | -0.01em | +| Subtext | 14px | 400 | 20px | -0.01em | +| Caption | 12px | 400 | 18px | -0.01em | + +## CDN + +Please be sure to include the font family link in the `` of your application's HTML. + +```html + +``` diff --git a/apps/website/docs/data-display/_category_.json b/apps/website/docs/data-display/_category_.json new file mode 100644 index 00000000..7ef89d80 --- /dev/null +++ b/apps/website/docs/data-display/_category_.json @@ -0,0 +1,5 @@ +{ + "label": "Data Display", + "position": 5, + "collapsible": false +} diff --git a/apps/website/docs/data-display/list-box.mdx b/apps/website/docs/data-display/list-box.mdx new file mode 100644 index 00000000..a4bbbe45 --- /dev/null +++ b/apps/website/docs/data-display/list-box.mdx @@ -0,0 +1,139 @@ +--- +title: List Box +description: A list of options that can allow selection of one or more. +--- + +A list of options that can allow selection of one or more. + +```jsx live + + United States + Canada + Mexico + +``` + +## Usage + +### Selection + +The listbox components supports either no selection, single and multiple selection modes using the +`selectionMode` prop. + +```jsx live +function Selection() { + const options = [ + { id: 1, name: 'United States' }, + { id: 2, name: 'Canada' }, + { id: 3, name: 'Mexico' }, + { id: 4, name: 'United Kingdom' }, + { id: 5, name: 'France' }, + { id: 6, name: 'China' }, + { id: 7, name: 'India' }, + { id: 8, name: 'Turkey' }, + ]; + + const [selected, setSelected] = React.useState(new Set(['Turkey'])); + + return ( + + {options.map((item) => ( + {item.name} + ))} + + ); +} +``` + +### Sections + +Group items within a dropdown using a section. + +```jsx live + + + United States + Canada + Mexico + + + United Kingdom + France + + + China + India + + +``` + +### Async + +Items can be loaded asynchronously use the `useAsyncData` hook. It also supports infinite scrolling +to load more data on demand as the user scrolls, via the onLoadMore prop. + +```jsx live +function Async() { + const list = useAsyncList({ + async load({ signal }) { + const res = await fetch('https://restcountries.com/v3.1/alpha?codes=US,CA,MX,GB,FR,CN,IN', { + signal, + }); + + const items = await res.json(); + + return { items }; + }, + }); + + return ( + + {(item) => {item.name.common}} + + ); +} +``` + +### Start Icon + +Items can be adorned with starting icons. + +```jsx live + + }>Truck + }>Train + }>Airplane + }>Ship + +``` + +### Disabled items + +Set the `disabledKeys` prop to disable certain items in the dropdown list. + +```jsx live + + United States + Canada + Mexico + +``` + +## Props + +### ListBox Props + + + +### ListBoxItem Props + + + +### ListBoxSection Props + + diff --git a/apps/website/docs/data-display/pill.mdx b/apps/website/docs/data-display/pill.mdx new file mode 100644 index 00000000..7787b6d1 --- /dev/null +++ b/apps/website/docs/data-display/pill.mdx @@ -0,0 +1,40 @@ +--- +title: Pill +description: Represents an object or status +--- + +Represents an object or status + +```jsx live + +``` + +## Usage + +### Icon + +Include an icon before the pill label. + +```jsx live +} label="In Transit" /> +``` + +### Color + +Use the `colorScheme` prop to adjust the color of the pill. + +```jsx live +} label="On Hold" /> +``` + +### Collapsible + +Set the `isCollapsible` prop to make the pill collapse by default. The label will display on hover. + +```jsx live +} isCollapsible label="In Transit" /> +``` + +## Props + + diff --git a/apps/website/docs/data-display/table.mdx b/apps/website/docs/data-display/table.mdx new file mode 100644 index 00000000..cfbbbe91 --- /dev/null +++ b/apps/website/docs/data-display/table.mdx @@ -0,0 +1,244 @@ +--- +title: Table +description: A component that displays rows of organized data. +--- + +A component that displays rows of organized data. + +```jsx live + + + + No. + Company name + Country + State + Status + + + + + 001 + Starbucks + United States + Washington + Active + + + 002 + Nike + Canada + Ottawa + Active + + + 003 + 09 + The Netherlands + Eindhoven + Active + + + 004 + 02 + United Kingdom + London + Pending + + + 005 + Paystack + Kenya + Nairobi + Pending + + + 006 + ING + Poland + Warsaw + Deactivated + + +
+``` + +## Usage + +### Dense + +Render a dense table with space is limited using the `isDense` prop. + +```jsx live + + + + No. + Company name + Country + State + Status + + + + + 001 + Starbucks + United States + Washington + Active + + + 002 + Nike + Canada + Ottawa + Active + + + 003 + 09 + The Netherlands + Eindhoven + Active + + + 004 + 02 + United Kingdom + London + Pending + + + 005 + Paystack + Kenya + Nairobi + Pending + + + 006 + ING + Poland + Warsaw + Deactivated + + +
+``` + +### Sort + +Table columns support displaying a visual indicator of sorting. + +```jsx live +function Sort() { + const [sortDirection, setSortDirection] = React.useState('asc'); + const [sortedColumn, setSortedColumn] = React.useState('name'); + + const handleSort = (column) => { + const isAsc = sortedColumn === column && sortDirection === 'asc'; + + setSortDirection(isAsc ? 'desc' : 'asc'); + setSortedColumn(column); + }; + + return ( + + + + No. + handleSort('name')} + sortDirection={sortDirection} + > + Company name + + Country + State + handleSort('status')} + sortDirection={sortDirection} + > + Status + + + + + + 001 + Starbucks + United States + Washington + Active + + + 002 + Nike + Canada + Ottawa + Active + + + 003 + 09 + The Netherlands + Eindhoven + Active + + + 004 + 02 + United Kingdom + London + Pending + + + 005 + Paystack + Kenya + Nairobi + Pending + + + 006 + ING + Poland + Warsaw + Deactivated + + +
+ ); +} +``` + +## Props + +### Table Props + + + +### TableBody Props + + + +### TableCell Props + + + +### TableColumn Props + + + +### TableFooter Props + + + +### TableHeader Props + + diff --git a/apps/website/docs/data-display/tag.mdx b/apps/website/docs/data-display/tag.mdx new file mode 100644 index 00000000..996fcb5a --- /dev/null +++ b/apps/website/docs/data-display/tag.mdx @@ -0,0 +1,24 @@ +--- +title: Tag +description: Label, categorize, or organize items using keywords that describe them. +--- + +Label, categorize, or organize items using keywords that describe them. + +```jsx live +Tag +``` + +## Usage + +### Removable + +Set the `isRemovable` prop to render a remove button within the tag. + +```jsx live +Tag +``` + +## Props + + diff --git a/apps/website/docs/date-and-time/_category_.json b/apps/website/docs/date-and-time/_category_.json new file mode 100644 index 00000000..6fa007e8 --- /dev/null +++ b/apps/website/docs/date-and-time/_category_.json @@ -0,0 +1,5 @@ +{ + "label": "Date and Time", + "position": 6, + "collapsible": false +} diff --git a/apps/website/docs/date-and-time/date-picker.mdx b/apps/website/docs/date-and-time/date-picker.mdx new file mode 100644 index 00000000..1c3dbc16 --- /dev/null +++ b/apps/website/docs/date-and-time/date-picker.mdx @@ -0,0 +1,103 @@ +--- +title: Date Picker +description: Choose a date from a visual calendar. +--- + +Choose a date from a visual calendar. + +```jsx live + +``` + +## Examples + +### Label + +Attach a label to the datepicker using the `label` prop. + +```jsx live + +``` + +### HelperText + +Add additional context as well as display error messages with the `helperText` prop. + +```jsx live + +``` + +### Small + +A small datepicker is used when vertical spacing is limited. + +```jsx live + +``` + +### Start Icon + +Include an icon before the input text. + +```jsx live +} /> +``` + +### Controlled + +A datepickers's state can be controlled by a parent React component by setting the `value` prop and +passing a handler to the `onChange` prop. + +:::info + +Date values are provided using objects in the +[@internationalized/date](https://react-spectrum.adobe.com/internationalized/date) package. This +library handles correct international date manipulation across calendars, time zones, and other +localization concerns. + +::: + +```jsx live +function Controlled() { + const [value, setValue] = React.useState(new CalendarDate(2022, 7, 12)); + + return ; +} +``` + +### Unavailable Dates + +Set the `isDateUnavailable` handler prop to make certain dates unavailable for selection. + +```jsx live +function Unavailable() { + const { locale } = useLocale(); + const isDateUnavailable = React.useCallback((date) => isWeekend(date, locale), [locale]); + + return ; +} +``` + +### Disabled State + +Set the `isDisabled` prop to prevent a user from interacting with the datepicker. + +```jsx live + +``` + +### Invalid State + +Set the `validationState` prop to `invalid` to render the datepicker in an invalid state. + +```jsx live + +``` + +## Props + + diff --git a/apps/website/docs/date-and-time/date-range-picker.mdx b/apps/website/docs/date-and-time/date-range-picker.mdx new file mode 100644 index 00000000..d32c49bb --- /dev/null +++ b/apps/website/docs/date-and-time/date-range-picker.mdx @@ -0,0 +1,114 @@ +--- +title: Date Range Picker +description: Choose a date range from a visual calendar. +--- + +Choose a date range from a visual calendar. + +```jsx live + +``` + +## Examples + +### Label + +Attach a label to the datepicker using the `label` prop. + +```jsx live + +``` + +### HelperText + +Add additional context as well as display error messages with the `helperText` prop. + +```jsx live + +``` + +### Small + +A small datepicker is used when vertical spacing is limited. + +```jsx live + +``` + +### Start Icon + +Include an icon before the input text. + +```jsx live +} /> +``` + +### Relative Ranges + +Set the `showRanges` prop to display a pre-set list of relative date ranges. + +```jsx live + +``` + +### Controlled + +A datepickers's state can be controlled by a parent React component by setting the `value` prop and +passing a handler to the `onChange` prop. + +:::info + +Date values are provided using objects in the +[@internationalized/date](https://react-spectrum.adobe.com/internationalized/date) package. This +library handles correct international date manipulation across calendars, time zones, and other +localization concerns. + +::: + +```jsx live +function ControlledExample() { + const [value, setValue] = React.useState({ + start: new CalendarDate(2022, 7, 2), + end: new CalendarDate(2022, 7, 12), + }); + + return ; +} +``` + +### Unavailable Dates + +Set the `isDateUnavailable` handler prop to make certain dates unavailable for selection. + +```jsx live +function UnavailableExample() { + const { locale } = useLocale(); + const isDateUnavailable = (date) => isWeekend(date, locale); + + return ; +} +``` + +### Disabled State + +Set the `isDisabled` prop to prevent a user from interacting with the datepicker. + +```jsx live + +``` + +### Invalid State + +Set the `validationState` prop to `invalid` to render the datepicker in an invalid state. + +```jsx live + +``` + +## Props + + diff --git a/apps/website/docs/getting-started/_category_.json b/apps/website/docs/getting-started/_category_.json new file mode 100644 index 00000000..8ca5718d --- /dev/null +++ b/apps/website/docs/getting-started/_category_.json @@ -0,0 +1,5 @@ +{ + "label": "Getting Started", + "position": 1, + "collapsible": false +} diff --git a/apps/website/docs/getting-started/installation.mdx b/apps/website/docs/getting-started/installation.mdx new file mode 100644 index 00000000..c21e5abe --- /dev/null +++ b/apps/website/docs/getting-started/installation.mdx @@ -0,0 +1,38 @@ +# Installation + +Quickly build experiences leveraging the Manifest Design System. + +## Install the core package + +```bash npm2yarn +npm install @project44-manifest/react react react-dom +``` + +## Setup fonts + +Manifest Design System was designed leveraging the Inter font. Please be sure to include the font +family link in the `` of your application's HTML. + +```html + +``` + +## Setup Provider + +For Manifest Design System to work properly, make sure to setup the Provider at the root of your +application. + +```tsx +import { Provider } from '@project44-manifest/react'; + +function MyApp() { + return ( + + + + ); +} +``` diff --git a/apps/website/docs/getting-started/overview.mdx b/apps/website/docs/getting-started/overview.mdx new file mode 100644 index 00000000..972ba25a --- /dev/null +++ b/apps/website/docs/getting-started/overview.mdx @@ -0,0 +1,65 @@ +--- +title: Overview +description: Manifest Design System +slug: / +sidebar_position: 1 +hide_title: true +hide_table_of_contents: true +--- + +import { Person, Grow, Route, Search } from '@project44-manifest/react-icons'; + +
+
+
+
+
+

Manifesting experiences through design

+

+ A shared design language for designing and building products at project44. +

+
+
+
+
+ Manifest Design System Documentation +
+
+
+
+
+ +
+
+
+ } title="Optimize for clarity"> + We choose to have an opinion about where to direct attention – optimize for clarity. Display + elements and content only when needed and use hierarchy to drive focus. + +
+
+ } title="Prefer adaptability"> + Our users need different experiences depending on the task at hand. Design with adaptability + in mind, enabling role-based customization. + +
+
+ } title="Lean on consistency"> + We opt for consistency in the details so we can focus on the higher-level UX challenges. + This frees us to innovate toward the best solution for our users in a more efficient way. + +
+
+ } title="Think inclusively"> + All users deserve an accessible and ethical experience within our products. The system is + built with accessibility in mind, not as the last step. + +
+
+
diff --git a/apps/website/docs/inputs/_category_.json b/apps/website/docs/inputs/_category_.json new file mode 100644 index 00000000..ddf800da --- /dev/null +++ b/apps/website/docs/inputs/_category_.json @@ -0,0 +1,5 @@ +{ + "label": "Inputs", + "position": 7, + "collapsible": false +} diff --git a/apps/website/docs/inputs/checkbox.mdx b/apps/website/docs/inputs/checkbox.mdx new file mode 100644 index 00000000..508a99d8 --- /dev/null +++ b/apps/website/docs/inputs/checkbox.mdx @@ -0,0 +1,91 @@ +--- +title: Checkbox +description: An input which allows users to select one or more options from a list of options. +--- + +An input which allows users to select one or more options from a list of options. + +```jsx live + +``` + +## Examples + +### Label + +Pass in a `string` as a child to render a label for the checkbox. + +```jsx live +Label +``` + +### Controlled + +A checkbox's state can be controlled by a parent React component by setting the `isSelected` prop +and passing a handler to the `onChange` prop. + +```jsx live +function ControlledExample() { + const [selected, setSelected] = React.useState(false); + + const handleChange = (isSelected) => { + setSelected(isSelected); + }; + + return ; +} +``` + +### Indeterminate + +Set the `isIndeterminate` prop to render the checkbox in an indeterminate state. + +```jsx live +function IndeterminateExample() { + const [selected, setSelected] = React.useState([false, false]); + + const handleParentChange = (isSelected) => { + setSelected([isSelected, isSelected]); + }; + + const handleFirstChange = (isSelected) => { + setSelected([isSelected, selected[1]]); + }; + + const handleSecondChange = (isSelected) => { + setSelected([selected[0], isSelected]); + }; + + return ( + + + Parent Checkbox + + + + Child Checkbox 1 + + + Child Checkbox 2 + + + + ); +} +``` + +### Disabled State + +Set the `isDisabled` prop to prevent a user from selecting a checkbox. + +```jsx live +Disabled +``` + +## Props + + diff --git a/apps/website/docs/inputs/combobox.mdx b/apps/website/docs/inputs/combobox.mdx new file mode 100644 index 00000000..34a004a2 --- /dev/null +++ b/apps/website/docs/inputs/combobox.mdx @@ -0,0 +1,259 @@ +--- +title: Combobox +description: An autocomplete input that allows a user to filter a list of selectable options. +--- + +An autocomplete input that allows a user to filter a list of selectable options. + +```jsx live live + + United States + Canada + Mexico + +``` + +## Usage + +### Selection + +Setting a selected option can be done by using the `defaultSelectedKey` or `selectedKey` prop + +```jsx live +function Selection() { + const options = [ + { id: 1, name: 'United States' }, + { id: 2, name: 'Canada' }, + { id: 3, name: 'Mexico' }, + { id: 4, name: 'United Kingdom' }, + { id: 5, name: 'France' }, + { id: 6, name: 'China' }, + { id: 7, name: 'India' }, + { id: 8, name: 'Turkey' }, + ]; + + const [selected, setSelected] = React.useState('Turkey'); + + return ( + + {options.map((item) => ( + {item.name} + ))} + + ); +} +``` + +### Sections + +Group items within a dropdown using a section. + +```jsx live + + + United States + Canada + Mexico + + + United Kingdom + France + + + China + India + + +``` + +### Async + +Items can be loaded asynchronously use the `useAsyncData` hook. It also supports infinite scrolling +to load more data on demand as the user scrolls, via the onLoadMore prop. + +```jsx live +function Async() { + const list = useAsyncList({ + async load({ signal }) { + const res = await fetch('https://restcountries.com/v3.1/alpha?codes=US,CA,MX,GB,FR,CN,IN', { + signal, + }); + + const items = await res.json(); + + return { items }; + }, + }); + + return ( + + {(item) => {item.name.common}} + + ); +} +``` + +### Label + +Attach a label to the combobox using the `label` prop. + +```jsx live + + United States + Canada + Mexico + +``` + +### HelperText + +Add additional context as well as display error messages with the `helperText` prop. + +```jsx live + + United States + Canada + Mexico + +``` + +### Small + +A small combobox is used when vertical spacing is limited. + +```jsx live + + United States + Canada + Mexico + +``` + +### Start Icon + +Include an icon before the input text. + +```jsx live +}> + United States + Canada + Mexico + +``` + +### Item Icon + +Include an icon before the item label on each item. + +```jsx live + + }>Truck + }>Train + }>Airplane + }>Ship + +``` + +### Controlled + +A combobox's state can be fully controlled including both the text input and item selection. + +```jsx live +function ControlledExample() { + const data = [ + { id: 1, name: 'United States' }, + { id: 2, name: 'Canada' }, + { id: 3, name: 'Mexico' }, + { id: 4, name: 'United Kingdom' }, + { id: 5, name: 'France' }, + { id: 6, name: 'China' }, + { id: 7, name: 'India' }, + { id: 8, name: 'Turkey' }, + ]; + + const list = useTreeData({ initialItems: data }); + + const [state, dispatch] = React.useReducer( + (state, action) => { + switch (action.type) { + case 'INPUT_CHANGE': + return { + inputValue: action.payload, + selectedId: action.payload === '' ? null : state.selectedId, + }; + case 'SELECTION_CHANGE': + return { + inputValue: action.payload ? list.getItem(action.payload).value.name : '', + selectedKey: action.payload, + }; + default: + throw new Error(); + } + }, + { inputValue: '', selectedKey: null }, + ); + + return ( + dispatch({ type: 'INPUT_CHANGE', payload: value })} + onSelectionChange={(key) => dispatch({ type: 'SELECTION_CHANGE', payload: key })} + selectedKey={state.selectedKey} + > + {(item) => {item.value.name}} + + ); +} +``` + +### Disabled State + +Set the `isDisabled` prop to prevent a user from interacting with the combobox. + +```jsx live + + United States + Canada + Mexico + +``` + +### Disabled items + +Set the `disabledKeys` prop to disable certain items in the combobox list. + +```jsx live + + United States + Canada + Mexico + +``` + +### Invalid State + +Set the `validationState` prop to `invalid` to render the combobox in an invalid state. + +```jsx live + + United States + Canada + Mexico + +``` + +## Props + +### Combobox Props + + + +### ComboboxItem Props + + + +### ComboboxSection Props + + diff --git a/apps/website/docs/inputs/mult-combobox.mdx b/apps/website/docs/inputs/mult-combobox.mdx new file mode 100644 index 00000000..7de0d83a --- /dev/null +++ b/apps/website/docs/inputs/mult-combobox.mdx @@ -0,0 +1,265 @@ +--- +title: MultiCombobox +description: An autocomplete input that allows a user to filter a list of selectable options. +--- + +An autocomplete input that allows a user to filter a list of selectable options. + +```jsx live live + + United States + Canada + Mexico + +``` + +## Usage + +### Selection + +Setting a selected option can be done by using the `defaultSelectedKey` or `selectedKey` prop + +```jsx live +function Selection() { + const options = [ + { id: 1, name: 'United States' }, + { id: 2, name: 'Canada' }, + { id: 3, name: 'Mexico' }, + { id: 4, name: 'United Kingdom' }, + { id: 5, name: 'France' }, + { id: 6, name: 'China' }, + { id: 7, name: 'India' }, + { id: 8, name: 'Turkey' }, + ]; + + const [selected, setSelected] = React.useState(new Set(['Turkey'])); + + return ( + + {options.map((item) => ( + {item.name} + ))} + + ); +} +``` + +### Sections + +Group items within a dropdown using a section. + +```jsx live + + + United States + Canada + Mexico + + + United Kingdom + France + + + China + India + + +``` + +### Async + +Items can be loaded asynchronously use the `useAsyncData` hook. It also supports infinite scrolling +to load more data on demand as the user scrolls, via the onLoadMore prop. + +```jsx live +function Async() { + const list = useAsyncList({ + async load({ signal }) { + const res = await fetch('https://restcountries.com/v3.1/alpha?codes=US,CA,MX,GB,FR,CN,IN', { + signal, + }); + + const items = await res.json(); + + return { items }; + }, + }); + + return ( + + {(item) => {item.name.common}} + + ); +} +``` + +### Label + +Attach a label to the combobox using the `label` prop. + +```jsx live + + United States + Canada + Mexico + +``` + +### HelperText + +Add additional context as well as display error messages with the `helperText` prop. + +```jsx live + + United States + Canada + Mexico + +``` + +### Small + +A small combobox is used when vertical spacing is limited. + +```jsx live + + United States + Canada + Mexico + +``` + +### Start Icon + +Include an icon before the input text. + +```jsx live +}> + United States + Canada + Mexico + +``` + +### Item Icon + +Include an icon before the item label on each item. + +```jsx live + + }>Truck + }>Train + }>Airplane + }>Ship + +``` + +### Controlled + +A combobox's state can be fully controlled including both the text input and item selection. + +```jsx live +function ControlledExample() { + const data = [ + { id: 1, name: 'United States' }, + { id: 2, name: 'Canada' }, + { id: 3, name: 'Mexico' }, + { id: 4, name: 'United Kingdom' }, + { id: 5, name: 'France' }, + { id: 6, name: 'China' }, + { id: 7, name: 'India' }, + { id: 8, name: 'Turkey' }, + ]; + + const list = useTreeData({ initialItems: data }); + + const [state, dispatch] = React.useReducer( + (state, action) => { + switch (action.type) { + case 'INPUT_CHANGE': + return { + inputValue: action.payload, + selectedKeys: action.payload === '' ? new Set(['']) : state.selectedKeys, + }; + case 'SELECTION_CHANGE': + return { + inputValue: action.payload ? list.getItem(action.payload).value.name : '', + selectedKeys: action.payload, + }; + default: + throw new Error(); + } + }, + { inputValue: '', selectedKeys: new Set(['Turkey']) }, + ); + + console.log(state.selectedKeys); + + return ( + dispatch({ type: 'INPUT_CHANGE', payload: value })} + onSelectionChange={(keys) => dispatch({ type: 'SELECTION_CHANGE', payload: keys })} + selectedKeys={state.selectedKeys} + > + {(item) => {item.value.name}} + + ); +} +``` + +### Disabled State + +Set the `isDisabled` prop to prevent a user from interacting with the combobox. + +```jsx live + + United States + Canada + Mexico + +``` + +### Disabled items + +Set the `disabledKeys` prop to disable certain items in the combobox list. + +```jsx live + + United States + Canada + Mexico + +``` + +### Invalid State + +Set the `validationState` prop to `invalid` to render the combobox in an invalid state. + +```jsx live + + United States + Canada + Mexico + +``` + +## Props + +### MultiCombobox Props + + + +### ComboboxItem Props + + + +### ComboboxSection Props + + diff --git a/apps/website/docs/inputs/multi-select.mdx b/apps/website/docs/inputs/multi-select.mdx new file mode 100644 index 00000000..e1a350c6 --- /dev/null +++ b/apps/website/docs/inputs/multi-select.mdx @@ -0,0 +1,250 @@ +--- +title: MultiSelect +description: Choose multiple options from a collapsible list of options. +--- + +Choose multiple options from a collapsible list of options. + +```jsx live + + United States + Canada + Mexico + +``` + +## Usage + +### Selection + +The listbox components supports either no selection, single and multiple selection modes using the +`selectionMode` prop. + +```jsx live +function Selection() { + const options = [ + { id: 1, name: 'United States' }, + { id: 2, name: 'Canada' }, + { id: 3, name: 'Mexico' }, + { id: 4, name: 'United Kingdom' }, + { id: 5, name: 'France' }, + { id: 6, name: 'China' }, + { id: 7, name: 'India' }, + { id: 8, name: 'Turkey' }, + ]; + + const [selected, setSelected] = React.useState(new Set(['Turkey'])); + + return ( + + {options.map((item) => ( + {item.name} + ))} + + ); +} +``` + +### Sections + +Group items within a dropdown using a section. + +```jsx live + + + United States + Canada + Mexico + + + United Kingdom + France + + + China + India + + +``` + +### Async + +Items can be loaded asynchronously use the `useAsyncData` hook. It also supports infinite scrolling +to load more data on demand as the user scrolls, via the onLoadMore prop. + +```jsx live +function Async() { + const list = useAsyncList({ + async load({ signal }) { + const res = await fetch('https://restcountries.com/v3.1/alpha?codes=US,CA,MX,GB,FR,CN,IN', { + signal, + }); + + const items = await res.json(); + + return { items }; + }, + }); + + return ( + + {(item) => {item.name.common}} + + ); +} +``` + +### Label + +Attach a label to the combobox using the `label` prop. + +```jsx live + + United States + Canada + Mexico + +``` + +### HelperText + +Add additional context as well as display error messages with the `helperText` prop. + +```jsx live + + United States + Canada + Mexico + +``` + +### Small + +A small select is used when vertical spacing is limited. + +```jsx live + + United States + Canada + Mexico + +``` + +### Start Icon + +Include an icon before the input text. + +```jsx live +}> + United States + Canada + Mexico + +``` + +### Item Icon + +Include an icon before the item label on each item. + +```jsx live + + }>Truck + }>Train + }>Airplane + }>Ship + +``` + +### Controlled + +A select's state can be controlled using the `selectedKeys` prop and `onSelectionChange` handler. + +```jsx live +function ControlledExample() { + const data = [ + { id: 1, name: 'United States' }, + { id: 2, name: 'Canada' }, + { id: 3, name: 'Mexico' }, + { id: 4, name: 'United Kingdom' }, + { id: 5, name: 'France' }, + { id: 6, name: 'China' }, + { id: 7, name: 'India' }, + { id: 8, name: 'Turkey' }, + ]; + + const [selected, setSelected] = React.useState(new Set(['Turkey'])); + + return ( + + {(item) => {item.name}} + + ); +} +``` + +### Disabled State + +Set the `isDisabled` prop to prevent a user from interacting with the select. + +```jsx live + + United States + Canada + Mexico + +``` + +### Disabled items + +Set the `disabledKeys` prop to disable certain items in the select list. + +```jsx live + + United States + Canada + Mexico + +``` + +### Invalid State + +Set the `validationState` prop to `invalid` to render the select in an invalid state. + +```jsx live + + United States + Canada + Mexico + +``` + +## Accessibility + +### Labeling + +If a visible label isn't specified, an aria-label must be provided to the select for accessibility. +If the field is labeled by a separate element, an aria-labelledby prop must be provided using the id +of the labeling element instead. + +## Props + +### MultiSelect Props + + + +### SelectItem Props + + + +### SelectSection Props + + diff --git a/apps/website/docs/inputs/radio.mdx b/apps/website/docs/inputs/radio.mdx new file mode 100644 index 00000000..e4d64f74 --- /dev/null +++ b/apps/website/docs/inputs/radio.mdx @@ -0,0 +1,89 @@ +--- +title: Radio +description: An input which allows users to select one or more options from a list of options. +--- + +An input which allows users to select one or more options from a list of options. + +```jsx live + + Shipper + Carrier + +``` + +## Usage + +### Orientation + +Set the `orientation` prop to adjust the layout of the radio options. + +```jsx live + + Shipper + Carrier + +``` + +### Controlled + +A radio group's state can be controlled by a parent React component by setting the `value` prop and +passing a handler to the `onChange` prop. + +```jsx live +function ControlledExample() { + const [selected, setSelected] = React.useState('shipper'); + + return ( + + Shipper + Carrier + + ); +} +``` + +### Disabled State + +Set the `isDisabled` prop to prevent a user from selecting a radio option. + +```jsx live + + Shipper + Carrier + +``` + +### Disabled items + +Set the `isDisabled` prop on an option to prevent a user from selecting that option. + +```jsx live + + Shipper + + Carrier + + +``` + +### Readonly + +Set the `isReadOnly` prop to render the radio items in a readonly mode. + +```jsx live + + Shipper + Carrier + +``` + +## Props + +### RadioGroup Props + + + +### Radio Props + + diff --git a/apps/website/docs/inputs/select.mdx b/apps/website/docs/inputs/select.mdx new file mode 100644 index 00000000..9af1afec --- /dev/null +++ b/apps/website/docs/inputs/select.mdx @@ -0,0 +1,233 @@ +--- +title: Select +description: Choose a single option from a collapsible list of options. +--- + +Choose a single option from a collapsible list of options. + +```jsx live + +``` + +## Usage + +### Selection + +The listbox components supports either no selection, single and multiple selection modes using the +`selectionMode` prop. + +```jsx live +function Selection() { + const options = [ + { id: 1, name: 'United States' }, + { id: 2, name: 'Canada' }, + { id: 3, name: 'Mexico' }, + { id: 4, name: 'United Kingdom' }, + { id: 5, name: 'France' }, + { id: 6, name: 'China' }, + { id: 7, name: 'India' }, + { id: 8, name: 'Turkey' }, + ]; + + const [selected, setSelected] = React.useState('Turkey'); + + return ( + + ); +} +``` + +### Sections + +Group items within a dropdown using a section. + +```jsx live + +``` + +### Async + +Items can be loaded asynchronously use the `useAsyncData` hook. It also supports infinite scrolling +to load more data on demand as the user scrolls, via the onLoadMore prop. + +```jsx live +function Async() { + const list = useAsyncList({ + async load({ signal }) { + const res = await fetch('https://restcountries.com/v3.1/alpha?codes=US,CA,MX,GB,FR,CN,IN', { + signal, + }); + + const items = await res.json(); + + return { items }; + }, + }); + + return ( + + ); +} +``` + +### Label + +Attach a label to the combobox using the `label` prop. + +```jsx live + +``` + +### HelperText + +Add additional context as well as display error messages with the `helperText` prop. + +```jsx live + +``` + +### Small + +A small select is used when vertical spacing is limited. + +```jsx live + +``` + +### Start Icon + +Include an icon before the input text. + +```jsx live + +``` + +### Item Icon + +Include an icon before the item label on each item. + +```jsx live + +``` + +### Controlled + +A select's state can be controlled using the `selectedKeys` prop and `onSelectionChange` handler. + +```jsx live +function ControlledExample() { + const data = [ + { id: 1, name: 'United States' }, + { id: 2, name: 'Canada' }, + { id: 3, name: 'Mexico' }, + { id: 4, name: 'United Kingdom' }, + { id: 5, name: 'France' }, + { id: 6, name: 'China' }, + { id: 7, name: 'India' }, + { id: 8, name: 'Turkey' }, + ]; + + const [selected, setSelected] = React.useState('Turkey'); + + return ( + + ); +} +``` + +### Disabled State + +Set the `isDisabled` prop to prevent a user from interacting with the select. + +```jsx live + +``` + +### Disabled items + +Set the `disabledKeys` prop to disable certain items in the select list. + +```jsx live + +``` + +### Invalid State + +Set the `validationState` prop to `invalid` to render the select in an invalid state. + +```jsx live + +``` + +## Props + +### Select Props + + + +### SelectItem Props + + + +### SelectSection Props + + diff --git a/apps/website/docs/inputs/switch.mdx b/apps/website/docs/inputs/switch.mdx new file mode 100644 index 00000000..041b2368 --- /dev/null +++ b/apps/website/docs/inputs/switch.mdx @@ -0,0 +1,45 @@ +--- +title: Switch +description: A controlled boolean input. +--- + +A controlled boolean input. + +```jsx live + +``` + +## Usage + +### Label + +Pass in a `string` as a child to render a label for the switch. + +```jsx live +Label +``` + +### Controlled + +A switch's state can be controlled by a parent React component by setting the `isSelected` prop and +passing a handler to the `onChange` prop. + +```jsx live +function ControlledExample() { + const [selected, setSelected] = React.useState(false); + + return ; +} +``` + +### Disabled State + +Set the `isDisabled` prop to prevent a user from selecting a switch. + +```jsx live +Disabled +``` + +## Props + + diff --git a/apps/website/docs/inputs/text-area.mdx b/apps/website/docs/inputs/text-area.mdx new file mode 100644 index 00000000..2524164b --- /dev/null +++ b/apps/website/docs/inputs/text-area.mdx @@ -0,0 +1,55 @@ +--- +title: Text Area +description: Allows users to enter and edit long form information. +--- + +Allows users to enter and edit long form information. + +```jsx live +