From 4a940ecaa0759bc55f1c13be1ea2715fe8c8f3d3 Mon Sep 17 00:00:00 2001 From: Cheton Wu <447801+cheton@users.noreply.github.com> Date: Tue, 21 Nov 2023 14:59:12 +0800 Subject: [PATCH] docs: enhance examples by replacing code blocks with the render function (#810) * ci: add MDX code block extractor * docs: update badge * docs: update box * docs: update checkbox-group * docs: update checkbox * docs: update code * docs: update divider * docs: remove `ControlBox` from docs * breaking: deprecate ControlBox * docs: update css-baseline * docs: update flex * docs: update grid * docs: update image * docs: update link * docs: update input-base * docs: update input-control * docs: update input-group * docs: update link-button * docs: update input * docs: update input-base * docs: update button-base * docs: update link * docs: update progress * chore: eslint warnings and errors * docs: update search-input * docs: update radio-group * docs: update radio * docs: update checkbox * docs: update switch * docs: update truncate * docs: update select * docs: update skeleton * docs: update space * docs: update spinner * docs: update stack * docs: update svg-icon * docs: update textarea * docs: update text * docs: update text-label * docs: update visually-hidden * docs: update alert * docs: update pagination * docs: update tag * docs: update menu * docs: update theme * docs: update lab * docs: update getting-started and styled-system * docs: update hooks --- packages/react-docs/config/sidebar-routes.js | 1 - .../pages/components/alert/alert-actions.js | 66 ++ ...rt-using-the-alertclosebutton-component.js | 17 + ...lose-an-alert-using-the-isclosable-prop.js | 16 + .../alert/customizing-the-background-color.js | 25 + .../pages/components/alert/formatted-text.js | 41 + .../pages/components/alert/index.page.mdx | 304 +------ .../pages/components/alert/pagination.js | 59 ++ .../pages/components/alert/severity-levels.js | 33 + .../pages/components/alert/the-icon-prop.js | 33 + .../components/alert/transition-effects.js | 25 + .../pages/components/alert/variant-outline.js | 10 + .../pages/components/alert/variant-solid.js | 10 + .../pages/components/badge.page.mdx | 320 ------- .../pages/components/badge/badge-alignment.js | 27 + .../components/badge/badge-visibility.js | 64 ++ .../pages/components/badge/basic.js | 50 ++ .../pages/components/badge/color.js | 34 + .../pages/components/badge/customization.js | 62 ++ .../react-docs/pages/components/badge/dot.js | 18 + .../pages/components/badge/index.page.mdx | 71 ++ .../react-docs/pages/components/badge/size.js | 18 + .../pages/components/badge/standalone.js | 14 + .../{box.page.mdx => box/index.page.mdx} | 66 +- .../box/using-pseudo-style-props.js | 26 + .../pages/components/box/using-style-props.js | 20 + .../pages/components/box/using-the-as-prop.js | 10 + .../pages/components/box/using-the-sx-prop.js | 26 + .../{disabled.js => attribute-disabled.js} | 0 .../components/button-base/index.page.mdx | 2 +- .../pages/components/checkbox-group.page.mdx | 194 ----- .../asynchronous-data-loading.js | 59 ++ .../pages/components/checkbox-group/colors.js | 14 + .../controlled-checkbox-group.js | 18 + .../checkbox-group/group-orientation.js | 14 + .../components/checkbox-group/index.page.mdx | 60 ++ .../pages/components/checkbox-group/sizes.js | 30 + .../pages/components/checkbox-group/states.js | 23 + .../uncontrolled-checkbox-group.js | 14 + .../components/checkbox/accessibility.js | 13 + .../pages/components/checkbox/basic.js | 10 + .../pages/components/checkbox/colors.js | 15 + .../components/checkbox/faq-input-ref.js | 23 + .../components/checkbox/flex-container.js | 23 + .../components/checkbox/indeterminate.js | 36 + .../index.page.mdx} | 133 +-- .../pages/components/checkbox/sizes.js | 18 + .../pages/components/checkbox/states.js | 31 + .../react-docs/pages/components/code/basic.js | 8 + .../{code.page.mdx => code/index.page.mdx} | 4 +- .../pages/components/control-box.page.mdx | 116 --- .../index.page.mdx} | 0 .../pages/components/divider/basic.js | 8 + .../pages/components/divider/composition.js | 14 + .../divider/horizontal-orientation.js | 12 + .../index.page.mdx} | 32 +- .../divider/vertical-orientation.js | 12 + .../react-docs/pages/components/flex.page.mdx | 225 ----- .../pages/components/flex/align-items.js | 31 + .../pages/components/flex/flex-direction.js | 31 + .../pages/components/flex/flex-none.js | 40 + .../pages/components/flex/flex-wrap.js | 33 + .../pages/components/flex/index.page.mdx | 67 ++ .../pages/components/flex/justify-content.js | 33 + .../react-docs/pages/components/grid.page.mdx | 543 ------------ .../pages/components/grid/grid-area.js | 37 + .../components/grid/grid-auto-columns.js | 38 + .../pages/components/grid/grid-auto-flow.js | 39 + .../pages/components/grid/grid-auto-rows.js | 39 + .../pages/components/grid/grid-column-gap.js | 39 + .../pages/components/grid/grid-column.js | 34 + .../pages/components/grid/grid-gap.js | 40 + .../pages/components/grid/grid-row-gap.js | 39 + .../pages/components/grid/grid-row.js | 34 + .../components/grid/grid-template-areas.js | 56 ++ .../components/grid/grid-template-columns.js | 38 + .../components/grid/grid-template-rows.js | 39 + .../pages/components/grid/index.page.mdx | 96 +++ .../pages/components/image/basic.js | 17 + .../pages/components/image/index.page.mdx | 28 + .../{image.page.mdx => image/inline-svg.js} | 43 +- .../pages/components/input-base.page.mdx | 86 -- .../input-base/attribute-disabled.js | 11 + .../input-base/attribute-readonly.js | 11 + .../input-base/attribute-required.js | 18 + .../components/input-base/attribute-type.js | 25 + .../pages/components/input-base/basic.js | 8 + .../components/input-base/index.page.mdx | 43 + .../pages/components/input-control.page.mdx | 236 ------ .../components/input-control/index.page.mdx | 46 + .../input-control/input-adornments.js | 71 ++ .../pages/components/input-control/usage.js | 146 ++++ .../pages/components/input-group.page.mdx | 291 ------- .../pages/components/input-group/basic.js | 30 + .../components/input-group/button-add-ons.js | 72 ++ .../components/input-group/date-inputs.js | 29 + .../components/input-group/index.page.mdx | 96 +++ .../input-group/multiple-add-ons.js | 27 + .../components/input-group/multiple-inputs.js | 14 + .../pages/components/input-group/sizes.js | 33 + .../components/input-group/variant-filled.js | 21 + .../components/input-group/variant-flush.js | 11 + .../components/input-group/variant-outline.js | 21 + .../input-group/variant-unstyled.js | 11 + .../pages/components/input.page.mdx | 224 ----- .../components/input/attribute-disabled.js | 11 + .../pages/components/input/attribute-list.js | 23 + .../components/input/attribute-readonly.js | 11 + .../components/input/attribute-required.js | 8 + .../pages/components/input/attribute-type.js | 25 + .../pages/components/input/basic.js | 12 + .../pages/components/input/index.page.mdx | 87 ++ .../pages/components/input/sizes.js | 21 + .../pages/components/input/validation.js | 66 ++ .../pages/components/input/variant-filled.js | 8 + .../pages/components/input/variant-flush.js | 8 + .../pages/components/input/variant-outline.js | 8 + .../components/input/variant-unstyled.js | 8 + .../pages/components/link-button/basic.js | 28 + .../index.page.mdx} | 26 +- .../react-docs/pages/components/link.page.mdx | 118 --- .../pages/components/link/default.js | 12 + .../pages/components/link/index.page.mdx | 42 + .../components/link/link-to-another-page.js | 22 + .../link/link-with-disabled-attribute.js | 22 + .../pages/components/link/link-with-icon.js | 24 + .../pages/components/link/underlined-link.js | 13 + .../react-docs/pages/components/menu/basic.js | 29 + .../components/menu/cascading-submenus.js | 127 +++ .../pages/components/menu/controlled.js | 64 ++ .../pages/components/menu/index.page.mdx | 789 +----------------- .../pages/components/menu/menubutton.js | 23 + .../pages/components/menu/menugroup.js | 52 ++ .../components/menu/menutoggle-popover.js | 44 + .../pages/components/menu/menutoggle.js | 84 ++ .../components/menu/menutoggleicon-custom.js | 44 + .../pages/components/menu/menutoggleicon.js | 23 + .../pages/components/menu/placement.js | 83 ++ .../pages/components/menu/positioning.js | 23 + .../pages/components/menu/scrolling-native.js | 51 ++ .../components/menu/scrolling-scrollbar.js | 54 ++ .../components/menu/sizing-fixed-width.js | 23 + .../components/menu/sizing-full-width.js | 23 + .../components/menu/sizing-max-content.js | 23 + .../components/menu/sizing-min-content.js | 23 + .../pages/components/menu/uncontrolled.js | 61 ++ .../pages/components/pagination/basic.js | 12 + .../pagination/controlled-pagination.js | 18 + .../pagination/customize-the-control-icons.js | 27 + .../components/pagination/index.page.mdx | 159 +--- .../pagination/pagination-buttons.js | 22 + .../pagination/pagination-ranges.js | 15 + .../components/pagination/table-pagination.js | 98 +++ .../components/pagination/usePagination.js | 48 ++ .../pagination/usePagination.page.mdx | 46 +- .../pages/components/progress.page.mdx | 205 ----- .../pages/components/progress/custom-color.js | 59 ++ .../pages/components/progress/index.page.mdx | 39 + .../pages/components/progress/usage.js | 118 +++ .../pages/components/radio-group.page.mdx | 197 ----- .../radio-group/asynchronous-data-loading.js | 63 ++ .../pages/components/radio-group/colors.js | 13 + .../radio-group/controlled-radio-group.js | 18 + .../radio-group/group-orientation.js | 14 + .../components/radio-group/index.page.mdx | 60 ++ .../pages/components/radio-group/sizes.js | 30 + .../pages/components/radio-group/states.js | 23 + .../radio-group/uncontrolled-radio-group.js | 14 + .../pages/components/radio/accessibility.js | 12 + .../pages/components/radio/basic.js | 10 + .../pages/components/radio/colors.js | 15 + .../pages/components/radio/faq-input-ref.js | 23 + .../pages/components/radio/flex-container.js | 23 + .../{radio.page.mdx => radio/index.page.mdx} | 93 +-- .../pages/components/radio/sizes.js | 18 + .../pages/components/radio/states.js | 25 + .../pages/components/search-input.page.mdx | 209 ----- .../search-input/attribute-disabled.js | 11 + .../search-input/attribute-readonly.js | 11 + .../search-input/attribute-required.js | 8 + .../pages/components/search-input/basic.js | 38 + .../components/search-input/index.page.mdx | 78 ++ .../components/search-input/keyword-search.js | 77 ++ .../pages/components/search-input/sizes.js | 12 + .../components/search-input/variant-filled.js | 8 + .../components/search-input/variant-flush.js | 8 + .../search-input/variant-outline.js | 8 + .../search-input/variant-unstyled.js | 8 + .../pages/components/select.page.mdx | 136 --- .../components/select/attribute-disabled.js | 10 + .../components/select/attribute-required.js | 12 + .../pages/components/select/basic.js | 21 + .../pages/components/select/index.page.mdx | 71 ++ .../components/select/multiple-options.js | 25 + .../pages/components/select/variant-filled.js | 11 + .../components/select/variant-outline.js | 11 + .../components/select/variant-unstyled.js | 11 + .../pages/components/skeleton.page.mdx | 182 ---- .../pages/components/skeleton/animations.js | 55 ++ .../pages/components/skeleton/color.js | 16 + .../pages/components/skeleton/index.page.mdx | 61 ++ .../components/skeleton/modal-skeletons.js | 44 + .../components/skeleton/profile-skeletons.js | 27 + .../pages/components/skeleton/variants.js | 13 + .../pages/components/space.page.mdx | 49 -- .../components/space/horizontal-spacing.js | 18 + .../pages/components/space/index.page.mdx | 29 + .../components/space/vertical-spacing.js | 14 + .../pages/components/spinner/basic.js | 8 + .../pages/components/spinner/customization.js | 18 + .../index.page.mdx} | 30 +- .../pages/components/spinner/sizes.js | 14 + .../pages/components/stack/index.page.mdx | 29 + .../{stack.page.mdx => stack/usage.js} | 69 +- .../pages/components/svg-icon.page.mdx | 59 -- .../pages/components/svg-icon/basic.js | 10 + .../pages/components/svg-icon/custom-icon.js | 28 + .../pages/components/svg-icon/index.page.mdx | 31 + ...{faq-input-element.js => faq-input-ref.js} | 7 +- .../pages/components/switch/index.page.mdx | 2 +- .../react-docs/pages/components/tag/basic.js | 8 + .../tag/{input-tag.js => creating-tags.js} | 0 .../pages/components/tag/custom-colors.js | 205 +++++ .../pages/components/tag/index.page.mdx | 283 +------ .../react-docs/pages/components/tag/sizes.js | 29 + .../react-docs/pages/components/tag/states.js | 19 + .../tag/using-the-isclosable-prop.js | 16 + .../tag/using-the-tagclosebutton-component.js | 17 + .../pages/components/tag/variants.js | 11 + .../pages/components/text-label/basic.js | 8 + .../index.page.mdx} | 4 +- .../react-docs/pages/components/text.page.mdx | 143 ---- .../pages/components/text/formatting-text.js | 23 + .../pages/components/text/headings.js | 16 + .../pages/components/text/index.page.mdx | 46 + .../react-docs/pages/components/text/sizes.js | 33 + .../pages/components/text/text-truncation.js | 14 + .../pages/components/text/the-as-prop.js | 33 + .../pages/components/textarea.page.mdx | 199 ----- .../components/textarea/attribute-disabled.js | 11 + .../components/textarea/attribute-readonly.js | 11 + .../components/textarea/attribute-required.js | 8 + .../pages/components/textarea/basic.js | 12 + .../pages/components/textarea/index.page.mdx | 78 ++ .../pages/components/textarea/sizing.js | 38 + .../pages/components/textarea/validation.js | 68 ++ .../components/textarea/variant-filled.js | 8 + .../components/textarea/variant-outline.js | 8 + .../components/textarea/variant-unstyled.js | 8 + .../pages/components/truncate.page.mdx | 147 ---- .../components/truncate/container-width.js | 12 + .../components/truncate/expand-on-hover.js | 44 + .../components/truncate/faq-line-clamp.js | 20 + .../pages/components/truncate/index.page.mdx | 47 ++ .../components/truncate/overflow-tooltip.js | 38 + .../components/truncate/truncate-width.js | 13 + .../pages/components/visually-hidden/basic.js | 13 + .../index.page.mdx} | 9 +- .../pages/getting-started/.gitignore | 1 - .../index.page.mdx} | 0 .../getting-started/css-variables.page.mdx | 68 -- .../css-variables/default-css-variables.js | 38 + .../css-variables/index.page.mdx | 33 + .../index.page.mdx} | 0 .../index.page.mdx} | 0 .../index.page.mdx} | 0 .../getting-started/the-sx-prop.page.mdx | 160 ---- .../the-sx-prop/array-of-callbacks.js | 21 + .../the-sx-prop/array-of-objects.js | 31 + .../the-sx-prop/creating-a-custom-button.js | 24 + .../defining-css-custom-properties.js | 19 + .../the-sx-prop/index.page.mdx | 43 + .../the-sx-prop/passing-the-sx-prop.js | 27 + .../the-sx-prop/using-media-queries.js | 29 + .../{ => usage}/components/AnimatedCube.js | 0 .../{ => usage}/components/FormulaOne.js | 0 .../{ => usage}/components/Rainbow.js | 0 .../{usage.page.mdx => usage/index.page.mdx} | 31 +- ...sing-style-props-and-pseudo-style-props.js | 35 + .../pages/getting-started/versions/.gitignore | 1 + .../index.page.mdx.template} | 0 .../react-docs/pages/hooks/useCallback.js | 27 + packages/react-docs/pages/hooks/useConst.js | 17 + .../react-docs/pages/hooks/useConst.page.mdx | 14 +- .../pages/hooks/useCopyToClipboard.js | 42 + .../pages/hooks/useCopyToClipboard.page.mdx | 39 +- .../react-docs/pages/hooks/useEffectOnce.js | 28 + .../pages/hooks/useEffectOnce.page.mdx | 25 +- .../pages/hooks/useEffectOnceWhen.js | 27 + .../pages/hooks/useEffectOnceWhen.page.mdx | 24 +- .../pages/hooks/useEventCallback.js | 28 + .../pages/hooks/useEventCallback.page.mdx | 48 +- .../pages/hooks/useEventListener.js | 37 + .../pages/hooks/useEventListener.page.mdx | 34 +- .../react-docs/pages/hooks/useHydrated.js | 14 + .../pages/hooks/useHydrated.page.mdx | 12 +- .../pages/hooks/useIsomorphicEffect.js | 17 + .../pages/hooks/useIsomorphicEffect.page.mdx | 14 +- .../react-docs/pages/hooks/useLatestRef.js | 40 + .../pages/hooks/useLatestRef.page.mdx | 37 +- .../react-docs/pages/hooks/useMediaQuery.js | 68 ++ .../pages/hooks/useMediaQuery.page.mdx | 65 +- .../react-docs/pages/hooks/useMergeRefs.js | 34 + .../pages/hooks/useMergeRefs.page.mdx | 30 +- packages/react-docs/pages/hooks/useOnce.js | 26 + .../react-docs/pages/hooks/useOnce.page.mdx | 23 +- .../react-docs/pages/hooks/useOnceWhen.js | 26 + .../pages/hooks/useOnceWhen.page.mdx | 23 +- .../react-docs/pages/hooks/useOutsideClick.js | 109 +++ .../pages/hooks/useOutsideClick.page.mdx | 106 +-- .../react-docs/pages/hooks/usePrevious.js | 21 + .../pages/hooks/usePrevious.page.mdx | 18 +- packages/react-docs/pages/hooks/useToggle.js | 15 + .../react-docs/pages/hooks/useToggle.page.mdx | 12 +- .../pages/lab/date-pickers/date-pickers.js | 44 + .../pages/lab/date-pickers/index.page.mdx | 70 +- .../pages/lab/date-pickers/native-pickers.js | 33 + .../react-docs/pages/styled-system/.gitignore | 2 - .../styled-system/pseudo-style-props.page.mdx | 416 --------- .../pseudo-style-props.page.mdx.template | 379 --------- .../pseudo-style-props/.gitignore | 1 + .../pseudo-style-props/_active.js | 27 + .../pseudo-style-props/_disabled.js | 56 ++ .../pseudo-style-props/_firstChild.js | 30 + .../pseudo-style-props/_focus.js | 22 + .../pseudo-style-props/_hover.js | 23 + .../pseudo-style-props/_lastChild.js | 30 + .../pseudo-style-props/_nthOfType.js | 34 + .../pseudo-style-props/_nthOfType_even.js | 27 + .../pseudo-style-props/_nthOfType_odd.js | 27 + .../pseudo-style-props/_visited.js | 36 + .../index.page.mdx.template | 93 +++ .../pseudo-style-props/pseudo-classes.js | 14 + .../pseudo-style-props/pseudo-elements.js | 19 + .../responsive-values.page.mdx | 0 .../pages/styled-system/style-props.page.mdx | 364 -------- .../styled-system/style-props/.gitignore | 1 + .../index.page.mdx.template} | 0 .../pages/system/pseudo-style-props.page.mdx | 414 --------- .../pages/system/style-props.page.mdx | 328 -------- .../react-docs/pages/theme/borders.page.mdx | 264 ------ .../pages/theme/borders/borders-keyword.js | 107 +++ .../theme/borders/borders-numeric-value.js | 96 +++ .../pages/theme/borders/index.page.mdx | 67 ++ .../pages/theme/breakpoints/breakpoints.js | 46 + .../index.page.mdx} | 46 +- .../index.page.mdx} | 4 +- .../pages/theme/font-sizes.page.mdx | 34 - .../pages/theme/font-sizes/font-sizes.js | 17 + .../pages/theme/font-sizes/index.page.mdx | 23 + .../pages/theme/font-weights.page.mdx | 24 - .../pages/theme/font-weights/font-weights.js | 18 + .../pages/theme/font-weights/index.page.mdx | 12 + .../react-docs/pages/theme/fonts.page.mdx | 17 - .../react-docs/pages/theme/fonts/fonts.js | 11 + .../pages/theme/fonts/index.page.mdx | 12 + .../index.page.mdx} | 2 +- .../pages/theme/line-heights.page.mdx | 38 - .../pages/theme/line-heights/index.page.mdx | 23 + .../pages/theme/line-heights/line-heights.js | 21 + .../react-docs/pages/theme/outlines.page.mdx | 193 ----- .../pages/theme/outlines/index.page.mdx | 68 ++ .../pages/theme/outlines/outlines-keyword.js | 67 ++ .../theme/outlines/outlines-numeric-value.js | 64 ++ .../react-docs/pages/theme/radii.page.mdx | 110 --- .../pages/theme/radii/border-radius-circle.js | 25 + .../pages/theme/radii/border-radius-lg.js | 25 + .../pages/theme/radii/border-radius-md.js | 25 + .../pages/theme/radii/border-radius-sm.js | 25 + .../pages/theme/radii/index.page.mdx | 26 + .../index.page.mdx} | 35 +- .../react-docs/pages/theme/shadows/shadows.js | 33 + .../{sizes.page.mdx => sizes/index.page.mdx} | 36 +- .../pages/theme/sizes/sizes-height.js | 20 + .../pages/theme/sizes/sizes-width.js | 20 + .../{space.page.mdx => space/index.page.mdx} | 27 +- .../react-docs/pages/theme/space/space.js | 27 + .../pages/theme/z-indices/index.page.mdx | 12 + .../z-indices.js} | 20 +- .../scripts/extract-mdx-code-block.js | 41 + packages/react-docs/scripts/update-docs.sh | 12 +- packages/react/__tests__/index.js | 2 +- packages/react/src/box/index.js | 2 - .../src/{box => deprecated}/ControlBox.js | 7 +- packages/react/src/index.js | 1 + 385 files changed, 9211 insertions(+), 9447 deletions(-) create mode 100644 packages/react-docs/pages/components/alert/alert-actions.js create mode 100644 packages/react-docs/pages/components/alert/close-an-alert-using-the-alertclosebutton-component.js create mode 100644 packages/react-docs/pages/components/alert/close-an-alert-using-the-isclosable-prop.js create mode 100644 packages/react-docs/pages/components/alert/customizing-the-background-color.js create mode 100644 packages/react-docs/pages/components/alert/formatted-text.js create mode 100644 packages/react-docs/pages/components/alert/pagination.js create mode 100644 packages/react-docs/pages/components/alert/severity-levels.js create mode 100644 packages/react-docs/pages/components/alert/the-icon-prop.js create mode 100644 packages/react-docs/pages/components/alert/transition-effects.js create mode 100644 packages/react-docs/pages/components/alert/variant-outline.js create mode 100644 packages/react-docs/pages/components/alert/variant-solid.js delete mode 100644 packages/react-docs/pages/components/badge.page.mdx create mode 100644 packages/react-docs/pages/components/badge/badge-alignment.js create mode 100644 packages/react-docs/pages/components/badge/badge-visibility.js create mode 100644 packages/react-docs/pages/components/badge/basic.js create mode 100644 packages/react-docs/pages/components/badge/color.js create mode 100644 packages/react-docs/pages/components/badge/customization.js create mode 100644 packages/react-docs/pages/components/badge/dot.js create mode 100644 packages/react-docs/pages/components/badge/index.page.mdx create mode 100644 packages/react-docs/pages/components/badge/size.js create mode 100644 packages/react-docs/pages/components/badge/standalone.js rename packages/react-docs/pages/components/{box.page.mdx => box/index.page.mdx} (60%) create mode 100644 packages/react-docs/pages/components/box/using-pseudo-style-props.js create mode 100644 packages/react-docs/pages/components/box/using-style-props.js create mode 100644 packages/react-docs/pages/components/box/using-the-as-prop.js create mode 100644 packages/react-docs/pages/components/box/using-the-sx-prop.js rename packages/react-docs/pages/components/button-base/{disabled.js => attribute-disabled.js} (100%) delete mode 100644 packages/react-docs/pages/components/checkbox-group.page.mdx create mode 100644 packages/react-docs/pages/components/checkbox-group/asynchronous-data-loading.js create mode 100644 packages/react-docs/pages/components/checkbox-group/colors.js create mode 100644 packages/react-docs/pages/components/checkbox-group/controlled-checkbox-group.js create mode 100644 packages/react-docs/pages/components/checkbox-group/group-orientation.js create mode 100644 packages/react-docs/pages/components/checkbox-group/index.page.mdx create mode 100644 packages/react-docs/pages/components/checkbox-group/sizes.js create mode 100644 packages/react-docs/pages/components/checkbox-group/states.js create mode 100644 packages/react-docs/pages/components/checkbox-group/uncontrolled-checkbox-group.js create mode 100644 packages/react-docs/pages/components/checkbox/accessibility.js create mode 100644 packages/react-docs/pages/components/checkbox/basic.js create mode 100644 packages/react-docs/pages/components/checkbox/colors.js create mode 100644 packages/react-docs/pages/components/checkbox/faq-input-ref.js create mode 100644 packages/react-docs/pages/components/checkbox/flex-container.js create mode 100644 packages/react-docs/pages/components/checkbox/indeterminate.js rename packages/react-docs/pages/components/{checkbox.page.mdx => checkbox/index.page.mdx} (60%) create mode 100644 packages/react-docs/pages/components/checkbox/sizes.js create mode 100644 packages/react-docs/pages/components/checkbox/states.js create mode 100644 packages/react-docs/pages/components/code/basic.js rename packages/react-docs/pages/components/{code.page.mdx => code/index.page.mdx} (90%) delete mode 100644 packages/react-docs/pages/components/control-box.page.mdx rename packages/react-docs/pages/components/{css-baseline.page.mdx => css-baseline/index.page.mdx} (100%) create mode 100644 packages/react-docs/pages/components/divider/basic.js create mode 100644 packages/react-docs/pages/components/divider/composition.js create mode 100644 packages/react-docs/pages/components/divider/horizontal-orientation.js rename packages/react-docs/pages/components/{divider.page.mdx => divider/index.page.mdx} (50%) create mode 100644 packages/react-docs/pages/components/divider/vertical-orientation.js delete mode 100644 packages/react-docs/pages/components/flex.page.mdx create mode 100644 packages/react-docs/pages/components/flex/align-items.js create mode 100644 packages/react-docs/pages/components/flex/flex-direction.js create mode 100644 packages/react-docs/pages/components/flex/flex-none.js create mode 100644 packages/react-docs/pages/components/flex/flex-wrap.js create mode 100644 packages/react-docs/pages/components/flex/index.page.mdx create mode 100644 packages/react-docs/pages/components/flex/justify-content.js delete mode 100644 packages/react-docs/pages/components/grid.page.mdx create mode 100644 packages/react-docs/pages/components/grid/grid-area.js create mode 100644 packages/react-docs/pages/components/grid/grid-auto-columns.js create mode 100644 packages/react-docs/pages/components/grid/grid-auto-flow.js create mode 100644 packages/react-docs/pages/components/grid/grid-auto-rows.js create mode 100644 packages/react-docs/pages/components/grid/grid-column-gap.js create mode 100644 packages/react-docs/pages/components/grid/grid-column.js create mode 100644 packages/react-docs/pages/components/grid/grid-gap.js create mode 100644 packages/react-docs/pages/components/grid/grid-row-gap.js create mode 100644 packages/react-docs/pages/components/grid/grid-row.js create mode 100644 packages/react-docs/pages/components/grid/grid-template-areas.js create mode 100644 packages/react-docs/pages/components/grid/grid-template-columns.js create mode 100644 packages/react-docs/pages/components/grid/grid-template-rows.js create mode 100644 packages/react-docs/pages/components/grid/index.page.mdx create mode 100644 packages/react-docs/pages/components/image/basic.js create mode 100644 packages/react-docs/pages/components/image/index.page.mdx rename packages/react-docs/pages/components/{image.page.mdx => image/inline-svg.js} (70%) delete mode 100644 packages/react-docs/pages/components/input-base.page.mdx create mode 100644 packages/react-docs/pages/components/input-base/attribute-disabled.js create mode 100644 packages/react-docs/pages/components/input-base/attribute-readonly.js create mode 100644 packages/react-docs/pages/components/input-base/attribute-required.js create mode 100644 packages/react-docs/pages/components/input-base/attribute-type.js create mode 100644 packages/react-docs/pages/components/input-base/basic.js create mode 100644 packages/react-docs/pages/components/input-base/index.page.mdx delete mode 100644 packages/react-docs/pages/components/input-control.page.mdx create mode 100644 packages/react-docs/pages/components/input-control/index.page.mdx create mode 100644 packages/react-docs/pages/components/input-control/input-adornments.js create mode 100644 packages/react-docs/pages/components/input-control/usage.js delete mode 100644 packages/react-docs/pages/components/input-group.page.mdx create mode 100644 packages/react-docs/pages/components/input-group/basic.js create mode 100644 packages/react-docs/pages/components/input-group/button-add-ons.js create mode 100644 packages/react-docs/pages/components/input-group/date-inputs.js create mode 100644 packages/react-docs/pages/components/input-group/index.page.mdx create mode 100644 packages/react-docs/pages/components/input-group/multiple-add-ons.js create mode 100644 packages/react-docs/pages/components/input-group/multiple-inputs.js create mode 100644 packages/react-docs/pages/components/input-group/sizes.js create mode 100644 packages/react-docs/pages/components/input-group/variant-filled.js create mode 100644 packages/react-docs/pages/components/input-group/variant-flush.js create mode 100644 packages/react-docs/pages/components/input-group/variant-outline.js create mode 100644 packages/react-docs/pages/components/input-group/variant-unstyled.js delete mode 100644 packages/react-docs/pages/components/input.page.mdx create mode 100644 packages/react-docs/pages/components/input/attribute-disabled.js create mode 100644 packages/react-docs/pages/components/input/attribute-list.js create mode 100644 packages/react-docs/pages/components/input/attribute-readonly.js create mode 100644 packages/react-docs/pages/components/input/attribute-required.js create mode 100644 packages/react-docs/pages/components/input/attribute-type.js create mode 100644 packages/react-docs/pages/components/input/basic.js create mode 100644 packages/react-docs/pages/components/input/index.page.mdx create mode 100644 packages/react-docs/pages/components/input/sizes.js create mode 100644 packages/react-docs/pages/components/input/validation.js create mode 100644 packages/react-docs/pages/components/input/variant-filled.js create mode 100644 packages/react-docs/pages/components/input/variant-flush.js create mode 100644 packages/react-docs/pages/components/input/variant-outline.js create mode 100644 packages/react-docs/pages/components/input/variant-unstyled.js create mode 100644 packages/react-docs/pages/components/link-button/basic.js rename packages/react-docs/pages/components/{link-button.page.mdx => link-button/index.page.mdx} (53%) delete mode 100644 packages/react-docs/pages/components/link.page.mdx create mode 100644 packages/react-docs/pages/components/link/default.js create mode 100644 packages/react-docs/pages/components/link/index.page.mdx create mode 100644 packages/react-docs/pages/components/link/link-to-another-page.js create mode 100644 packages/react-docs/pages/components/link/link-with-disabled-attribute.js create mode 100644 packages/react-docs/pages/components/link/link-with-icon.js create mode 100644 packages/react-docs/pages/components/link/underlined-link.js create mode 100644 packages/react-docs/pages/components/menu/basic.js create mode 100644 packages/react-docs/pages/components/menu/cascading-submenus.js create mode 100644 packages/react-docs/pages/components/menu/controlled.js create mode 100644 packages/react-docs/pages/components/menu/menubutton.js create mode 100644 packages/react-docs/pages/components/menu/menugroup.js create mode 100644 packages/react-docs/pages/components/menu/menutoggle-popover.js create mode 100644 packages/react-docs/pages/components/menu/menutoggle.js create mode 100644 packages/react-docs/pages/components/menu/menutoggleicon-custom.js create mode 100644 packages/react-docs/pages/components/menu/menutoggleicon.js create mode 100644 packages/react-docs/pages/components/menu/placement.js create mode 100644 packages/react-docs/pages/components/menu/positioning.js create mode 100644 packages/react-docs/pages/components/menu/scrolling-native.js create mode 100644 packages/react-docs/pages/components/menu/scrolling-scrollbar.js create mode 100644 packages/react-docs/pages/components/menu/sizing-fixed-width.js create mode 100644 packages/react-docs/pages/components/menu/sizing-full-width.js create mode 100644 packages/react-docs/pages/components/menu/sizing-max-content.js create mode 100644 packages/react-docs/pages/components/menu/sizing-min-content.js create mode 100644 packages/react-docs/pages/components/menu/uncontrolled.js create mode 100644 packages/react-docs/pages/components/pagination/basic.js create mode 100644 packages/react-docs/pages/components/pagination/controlled-pagination.js create mode 100644 packages/react-docs/pages/components/pagination/customize-the-control-icons.js create mode 100644 packages/react-docs/pages/components/pagination/pagination-buttons.js create mode 100644 packages/react-docs/pages/components/pagination/pagination-ranges.js create mode 100644 packages/react-docs/pages/components/pagination/table-pagination.js create mode 100644 packages/react-docs/pages/components/pagination/usePagination.js delete mode 100644 packages/react-docs/pages/components/progress.page.mdx create mode 100644 packages/react-docs/pages/components/progress/custom-color.js create mode 100644 packages/react-docs/pages/components/progress/index.page.mdx create mode 100644 packages/react-docs/pages/components/progress/usage.js delete mode 100644 packages/react-docs/pages/components/radio-group.page.mdx create mode 100644 packages/react-docs/pages/components/radio-group/asynchronous-data-loading.js create mode 100644 packages/react-docs/pages/components/radio-group/colors.js create mode 100644 packages/react-docs/pages/components/radio-group/controlled-radio-group.js create mode 100644 packages/react-docs/pages/components/radio-group/group-orientation.js create mode 100644 packages/react-docs/pages/components/radio-group/index.page.mdx create mode 100644 packages/react-docs/pages/components/radio-group/sizes.js create mode 100644 packages/react-docs/pages/components/radio-group/states.js create mode 100644 packages/react-docs/pages/components/radio-group/uncontrolled-radio-group.js create mode 100644 packages/react-docs/pages/components/radio/accessibility.js create mode 100644 packages/react-docs/pages/components/radio/basic.js create mode 100644 packages/react-docs/pages/components/radio/colors.js create mode 100644 packages/react-docs/pages/components/radio/faq-input-ref.js create mode 100644 packages/react-docs/pages/components/radio/flex-container.js rename packages/react-docs/pages/components/{radio.page.mdx => radio/index.page.mdx} (70%) create mode 100644 packages/react-docs/pages/components/radio/sizes.js create mode 100644 packages/react-docs/pages/components/radio/states.js delete mode 100644 packages/react-docs/pages/components/search-input.page.mdx create mode 100644 packages/react-docs/pages/components/search-input/attribute-disabled.js create mode 100644 packages/react-docs/pages/components/search-input/attribute-readonly.js create mode 100644 packages/react-docs/pages/components/search-input/attribute-required.js create mode 100644 packages/react-docs/pages/components/search-input/basic.js create mode 100644 packages/react-docs/pages/components/search-input/index.page.mdx create mode 100644 packages/react-docs/pages/components/search-input/keyword-search.js create mode 100644 packages/react-docs/pages/components/search-input/sizes.js create mode 100644 packages/react-docs/pages/components/search-input/variant-filled.js create mode 100644 packages/react-docs/pages/components/search-input/variant-flush.js create mode 100644 packages/react-docs/pages/components/search-input/variant-outline.js create mode 100644 packages/react-docs/pages/components/search-input/variant-unstyled.js delete mode 100644 packages/react-docs/pages/components/select.page.mdx create mode 100644 packages/react-docs/pages/components/select/attribute-disabled.js create mode 100644 packages/react-docs/pages/components/select/attribute-required.js create mode 100644 packages/react-docs/pages/components/select/basic.js create mode 100644 packages/react-docs/pages/components/select/index.page.mdx create mode 100644 packages/react-docs/pages/components/select/multiple-options.js create mode 100644 packages/react-docs/pages/components/select/variant-filled.js create mode 100644 packages/react-docs/pages/components/select/variant-outline.js create mode 100644 packages/react-docs/pages/components/select/variant-unstyled.js delete mode 100644 packages/react-docs/pages/components/skeleton.page.mdx create mode 100644 packages/react-docs/pages/components/skeleton/animations.js create mode 100644 packages/react-docs/pages/components/skeleton/color.js create mode 100644 packages/react-docs/pages/components/skeleton/index.page.mdx create mode 100644 packages/react-docs/pages/components/skeleton/modal-skeletons.js create mode 100644 packages/react-docs/pages/components/skeleton/profile-skeletons.js create mode 100644 packages/react-docs/pages/components/skeleton/variants.js delete mode 100644 packages/react-docs/pages/components/space.page.mdx create mode 100644 packages/react-docs/pages/components/space/horizontal-spacing.js create mode 100644 packages/react-docs/pages/components/space/index.page.mdx create mode 100644 packages/react-docs/pages/components/space/vertical-spacing.js create mode 100644 packages/react-docs/pages/components/spinner/basic.js create mode 100644 packages/react-docs/pages/components/spinner/customization.js rename packages/react-docs/pages/components/{spinner.page.mdx => spinner/index.page.mdx} (70%) create mode 100644 packages/react-docs/pages/components/spinner/sizes.js create mode 100644 packages/react-docs/pages/components/stack/index.page.mdx rename packages/react-docs/pages/components/{stack.page.mdx => stack/usage.js} (70%) delete mode 100644 packages/react-docs/pages/components/svg-icon.page.mdx create mode 100644 packages/react-docs/pages/components/svg-icon/basic.js create mode 100644 packages/react-docs/pages/components/svg-icon/custom-icon.js create mode 100644 packages/react-docs/pages/components/svg-icon/index.page.mdx rename packages/react-docs/pages/components/switch/{faq-input-element.js => faq-input-ref.js} (83%) create mode 100644 packages/react-docs/pages/components/tag/basic.js rename packages/react-docs/pages/components/tag/{input-tag.js => creating-tags.js} (100%) create mode 100644 packages/react-docs/pages/components/tag/custom-colors.js create mode 100644 packages/react-docs/pages/components/tag/sizes.js create mode 100644 packages/react-docs/pages/components/tag/states.js create mode 100644 packages/react-docs/pages/components/tag/using-the-isclosable-prop.js create mode 100644 packages/react-docs/pages/components/tag/using-the-tagclosebutton-component.js create mode 100644 packages/react-docs/pages/components/tag/variants.js create mode 100644 packages/react-docs/pages/components/text-label/basic.js rename packages/react-docs/pages/components/{text-label.page.mdx => text-label/index.page.mdx} (91%) delete mode 100644 packages/react-docs/pages/components/text.page.mdx create mode 100644 packages/react-docs/pages/components/text/formatting-text.js create mode 100644 packages/react-docs/pages/components/text/headings.js create mode 100644 packages/react-docs/pages/components/text/index.page.mdx create mode 100644 packages/react-docs/pages/components/text/sizes.js create mode 100644 packages/react-docs/pages/components/text/text-truncation.js create mode 100644 packages/react-docs/pages/components/text/the-as-prop.js delete mode 100644 packages/react-docs/pages/components/textarea.page.mdx create mode 100644 packages/react-docs/pages/components/textarea/attribute-disabled.js create mode 100644 packages/react-docs/pages/components/textarea/attribute-readonly.js create mode 100644 packages/react-docs/pages/components/textarea/attribute-required.js create mode 100644 packages/react-docs/pages/components/textarea/basic.js create mode 100644 packages/react-docs/pages/components/textarea/index.page.mdx create mode 100644 packages/react-docs/pages/components/textarea/sizing.js create mode 100644 packages/react-docs/pages/components/textarea/validation.js create mode 100644 packages/react-docs/pages/components/textarea/variant-filled.js create mode 100644 packages/react-docs/pages/components/textarea/variant-outline.js create mode 100644 packages/react-docs/pages/components/textarea/variant-unstyled.js delete mode 100644 packages/react-docs/pages/components/truncate.page.mdx create mode 100644 packages/react-docs/pages/components/truncate/container-width.js create mode 100644 packages/react-docs/pages/components/truncate/expand-on-hover.js create mode 100644 packages/react-docs/pages/components/truncate/faq-line-clamp.js create mode 100644 packages/react-docs/pages/components/truncate/index.page.mdx create mode 100644 packages/react-docs/pages/components/truncate/overflow-tooltip.js create mode 100644 packages/react-docs/pages/components/truncate/truncate-width.js create mode 100644 packages/react-docs/pages/components/visually-hidden/basic.js rename packages/react-docs/pages/components/{visually-hidden.page.mdx => visually-hidden/index.page.mdx} (79%) delete mode 100644 packages/react-docs/pages/getting-started/.gitignore rename packages/react-docs/pages/getting-started/{contributing.page.mdx => contributing/index.page.mdx} (100%) delete mode 100644 packages/react-docs/pages/getting-started/css-variables.page.mdx create mode 100644 packages/react-docs/pages/getting-started/css-variables/default-css-variables.js create mode 100644 packages/react-docs/pages/getting-started/css-variables/index.page.mdx rename packages/react-docs/pages/getting-started/{installation.page.mdx => installation/index.page.mdx} (100%) rename packages/react-docs/pages/getting-started/{migration-v0x.page.mdx => migration-v0x/index.page.mdx} (100%) rename packages/react-docs/pages/getting-started/{security.page.mdx => security/index.page.mdx} (100%) delete mode 100644 packages/react-docs/pages/getting-started/the-sx-prop.page.mdx create mode 100644 packages/react-docs/pages/getting-started/the-sx-prop/array-of-callbacks.js create mode 100644 packages/react-docs/pages/getting-started/the-sx-prop/array-of-objects.js create mode 100644 packages/react-docs/pages/getting-started/the-sx-prop/creating-a-custom-button.js create mode 100644 packages/react-docs/pages/getting-started/the-sx-prop/defining-css-custom-properties.js create mode 100644 packages/react-docs/pages/getting-started/the-sx-prop/index.page.mdx create mode 100644 packages/react-docs/pages/getting-started/the-sx-prop/passing-the-sx-prop.js create mode 100644 packages/react-docs/pages/getting-started/the-sx-prop/using-media-queries.js rename packages/react-docs/pages/getting-started/{ => usage}/components/AnimatedCube.js (100%) rename packages/react-docs/pages/getting-started/{ => usage}/components/FormulaOne.js (100%) rename packages/react-docs/pages/getting-started/{ => usage}/components/Rainbow.js (100%) rename packages/react-docs/pages/getting-started/{usage.page.mdx => usage/index.page.mdx} (95%) create mode 100644 packages/react-docs/pages/getting-started/usage/using-style-props-and-pseudo-style-props.js create mode 100644 packages/react-docs/pages/getting-started/versions/.gitignore rename packages/react-docs/pages/getting-started/{versions.page.mdx.template => versions/index.page.mdx.template} (100%) create mode 100644 packages/react-docs/pages/hooks/useCallback.js create mode 100644 packages/react-docs/pages/hooks/useConst.js create mode 100644 packages/react-docs/pages/hooks/useCopyToClipboard.js create mode 100644 packages/react-docs/pages/hooks/useEffectOnce.js create mode 100644 packages/react-docs/pages/hooks/useEffectOnceWhen.js create mode 100644 packages/react-docs/pages/hooks/useEventCallback.js create mode 100644 packages/react-docs/pages/hooks/useEventListener.js create mode 100644 packages/react-docs/pages/hooks/useHydrated.js create mode 100644 packages/react-docs/pages/hooks/useIsomorphicEffect.js create mode 100644 packages/react-docs/pages/hooks/useLatestRef.js create mode 100644 packages/react-docs/pages/hooks/useMediaQuery.js create mode 100644 packages/react-docs/pages/hooks/useMergeRefs.js create mode 100644 packages/react-docs/pages/hooks/useOnce.js create mode 100644 packages/react-docs/pages/hooks/useOnceWhen.js create mode 100644 packages/react-docs/pages/hooks/useOutsideClick.js create mode 100644 packages/react-docs/pages/hooks/usePrevious.js create mode 100644 packages/react-docs/pages/hooks/useToggle.js create mode 100644 packages/react-docs/pages/lab/date-pickers/date-pickers.js create mode 100644 packages/react-docs/pages/lab/date-pickers/native-pickers.js delete mode 100644 packages/react-docs/pages/styled-system/.gitignore delete mode 100644 packages/react-docs/pages/styled-system/pseudo-style-props.page.mdx delete mode 100644 packages/react-docs/pages/styled-system/pseudo-style-props.page.mdx.template create mode 100644 packages/react-docs/pages/styled-system/pseudo-style-props/.gitignore create mode 100644 packages/react-docs/pages/styled-system/pseudo-style-props/_active.js create mode 100644 packages/react-docs/pages/styled-system/pseudo-style-props/_disabled.js create mode 100644 packages/react-docs/pages/styled-system/pseudo-style-props/_firstChild.js create mode 100644 packages/react-docs/pages/styled-system/pseudo-style-props/_focus.js create mode 100644 packages/react-docs/pages/styled-system/pseudo-style-props/_hover.js create mode 100644 packages/react-docs/pages/styled-system/pseudo-style-props/_lastChild.js create mode 100644 packages/react-docs/pages/styled-system/pseudo-style-props/_nthOfType.js create mode 100644 packages/react-docs/pages/styled-system/pseudo-style-props/_nthOfType_even.js create mode 100644 packages/react-docs/pages/styled-system/pseudo-style-props/_nthOfType_odd.js create mode 100644 packages/react-docs/pages/styled-system/pseudo-style-props/_visited.js create mode 100644 packages/react-docs/pages/styled-system/pseudo-style-props/index.page.mdx.template create mode 100644 packages/react-docs/pages/styled-system/pseudo-style-props/pseudo-classes.js create mode 100644 packages/react-docs/pages/styled-system/pseudo-style-props/pseudo-elements.js rename packages/react-docs/pages/styled-system/{ => responsive-values}/responsive-values.page.mdx (100%) delete mode 100644 packages/react-docs/pages/styled-system/style-props.page.mdx create mode 100644 packages/react-docs/pages/styled-system/style-props/.gitignore rename packages/react-docs/pages/styled-system/{style-props.page.mdx.template => style-props/index.page.mdx.template} (100%) delete mode 100644 packages/react-docs/pages/system/pseudo-style-props.page.mdx delete mode 100644 packages/react-docs/pages/system/style-props.page.mdx delete mode 100644 packages/react-docs/pages/theme/borders.page.mdx create mode 100644 packages/react-docs/pages/theme/borders/borders-keyword.js create mode 100644 packages/react-docs/pages/theme/borders/borders-numeric-value.js create mode 100644 packages/react-docs/pages/theme/borders/index.page.mdx create mode 100644 packages/react-docs/pages/theme/breakpoints/breakpoints.js rename packages/react-docs/pages/theme/{breakpoints.page.mdx => breakpoints/index.page.mdx} (52%) rename packages/react-docs/pages/theme/{colors.page.mdx => colors/index.page.mdx} (84%) delete mode 100644 packages/react-docs/pages/theme/font-sizes.page.mdx create mode 100644 packages/react-docs/pages/theme/font-sizes/font-sizes.js create mode 100644 packages/react-docs/pages/theme/font-sizes/index.page.mdx delete mode 100644 packages/react-docs/pages/theme/font-weights.page.mdx create mode 100644 packages/react-docs/pages/theme/font-weights/font-weights.js create mode 100644 packages/react-docs/pages/theme/font-weights/index.page.mdx delete mode 100644 packages/react-docs/pages/theme/fonts.page.mdx create mode 100644 packages/react-docs/pages/theme/fonts/fonts.js create mode 100644 packages/react-docs/pages/theme/fonts/index.page.mdx rename packages/react-docs/pages/theme/{letter-spacings.page.mdx => letter-spacings/index.page.mdx} (76%) delete mode 100644 packages/react-docs/pages/theme/line-heights.page.mdx create mode 100644 packages/react-docs/pages/theme/line-heights/index.page.mdx create mode 100644 packages/react-docs/pages/theme/line-heights/line-heights.js delete mode 100644 packages/react-docs/pages/theme/outlines.page.mdx create mode 100644 packages/react-docs/pages/theme/outlines/index.page.mdx create mode 100644 packages/react-docs/pages/theme/outlines/outlines-keyword.js create mode 100644 packages/react-docs/pages/theme/outlines/outlines-numeric-value.js delete mode 100644 packages/react-docs/pages/theme/radii.page.mdx create mode 100644 packages/react-docs/pages/theme/radii/border-radius-circle.js create mode 100644 packages/react-docs/pages/theme/radii/border-radius-lg.js create mode 100644 packages/react-docs/pages/theme/radii/border-radius-md.js create mode 100644 packages/react-docs/pages/theme/radii/border-radius-sm.js create mode 100644 packages/react-docs/pages/theme/radii/index.page.mdx rename packages/react-docs/pages/theme/{shadows.page.mdx => shadows/index.page.mdx} (52%) create mode 100644 packages/react-docs/pages/theme/shadows/shadows.js rename packages/react-docs/pages/theme/{sizes.page.mdx => sizes/index.page.mdx} (62%) create mode 100644 packages/react-docs/pages/theme/sizes/sizes-height.js create mode 100644 packages/react-docs/pages/theme/sizes/sizes-width.js rename packages/react-docs/pages/theme/{space.page.mdx => space/index.page.mdx} (67%) create mode 100644 packages/react-docs/pages/theme/space/space.js create mode 100644 packages/react-docs/pages/theme/z-indices/index.page.mdx rename packages/react-docs/pages/theme/{z-indices.page.mdx => z-indices/z-indices.js} (83%) create mode 100644 packages/react-docs/scripts/extract-mdx-code-block.js rename packages/react/src/{box => deprecated}/ControlBox.js (92%) diff --git a/packages/react-docs/config/sidebar-routes.js b/packages/react-docs/config/sidebar-routes.js index 7a6b2d07f0..7f857d7043 100644 --- a/packages/react-docs/config/sidebar-routes.js +++ b/packages/react-docs/config/sidebar-routes.js @@ -142,7 +142,6 @@ export const routes = [ { title: 'LAYOUT', heading: true }, { title: 'Box', path: 'components/box' }, - //{ title: 'ControlBox', path: 'components/control-box' }, // XXX: internal use only { title: 'Flex', path: 'components/flex' }, { title: 'Grid', path: 'components/grid' }, { title: 'Space', path: 'components/space' }, diff --git a/packages/react-docs/pages/components/alert/alert-actions.js b/packages/react-docs/pages/components/alert/alert-actions.js new file mode 100644 index 0000000000..b544910553 --- /dev/null +++ b/packages/react-docs/pages/components/alert/alert-actions.js @@ -0,0 +1,66 @@ +import { Alert, Button, Flex, LinkButton, Stack, Text } from '@tonic-ui/react'; +import React, { forwardRef } from 'react'; + +const ActionButton = forwardRef((props, ref) => ( + + + + +); + +export default App; diff --git a/packages/react-docs/pages/components/alert/close-an-alert-using-the-alertclosebutton-component.js b/packages/react-docs/pages/components/alert/close-an-alert-using-the-alertclosebutton-component.js new file mode 100644 index 0000000000..7b58aa856a --- /dev/null +++ b/packages/react-docs/pages/components/alert/close-an-alert-using-the-alertclosebutton-component.js @@ -0,0 +1,17 @@ +import { Alert, AlertCloseButton, Collapse, Text } from '@tonic-ui/react'; +import { useToggle } from '@tonic-ui/react-hooks'; +import React from 'react'; + +const App = () => { + const [isOpen, onClose] = useToggle(true); + return ( + + + This is a success alert. + + + + ); +}; + +export default App; diff --git a/packages/react-docs/pages/components/alert/close-an-alert-using-the-isclosable-prop.js b/packages/react-docs/pages/components/alert/close-an-alert-using-the-isclosable-prop.js new file mode 100644 index 0000000000..d95a1df921 --- /dev/null +++ b/packages/react-docs/pages/components/alert/close-an-alert-using-the-isclosable-prop.js @@ -0,0 +1,16 @@ +import { Alert, Collapse, Text } from '@tonic-ui/react'; +import { useToggle } from '@tonic-ui/react-hooks'; +import React from 'react'; + +const App = () => { + const [isOpen, onClose] = useToggle(true); + return ( + + + This is a success alert. + + + ); +}; + +export default App; diff --git a/packages/react-docs/pages/components/alert/customizing-the-background-color.js b/packages/react-docs/pages/components/alert/customizing-the-background-color.js new file mode 100644 index 0000000000..713bc2afb6 --- /dev/null +++ b/packages/react-docs/pages/components/alert/customizing-the-background-color.js @@ -0,0 +1,25 @@ +import { Alert, Stack, Text } from '@tonic-ui/react'; +import React from 'react'; + +const App = () => ( + + + This is a promotion message + + + This is a promotion message + + +); + +export default App; diff --git a/packages/react-docs/pages/components/alert/formatted-text.js b/packages/react-docs/pages/components/alert/formatted-text.js new file mode 100644 index 0000000000..58c0a04799 --- /dev/null +++ b/packages/react-docs/pages/components/alert/formatted-text.js @@ -0,0 +1,41 @@ +import { Alert, Box, Stack, Text } from '@tonic-ui/react'; +import React from 'react'; + +const App = () => ( + + + + Success + + + This is a success alert. + + + + + Info + + + This is an info alert. + + + + + Warning + + + This is a warning alert. + + + + + Error + + + This is an error alert. + + + +); + +export default App; diff --git a/packages/react-docs/pages/components/alert/index.page.mdx b/packages/react-docs/pages/components/alert/index.page.mdx index 1f18f906d5..92186ad3a9 100644 --- a/packages/react-docs/pages/components/alert/index.page.mdx +++ b/packages/react-docs/pages/components/alert/index.page.mdx @@ -21,111 +21,30 @@ You can use the `variant` prop to change the appearance of the alert. The varian The `solid` variant is used to indicate an important message. -```jsx - - This is an important message. - -``` +{render('./variant-solid')} #### Outline The `outline` variant is useful for displaying a contextual alert that is not a part of the primary flow of the application. -```jsx - - This is a contextual alert. - -``` +{render('./variant-outline')} ### Severity levels The `severity` prop can be used to specify the severity level of the alert. The severity levels are: `success`, `info`, `warning`, and `error`. The default severity level is `success`. -```jsx - - - This is a success alert. - - - This is an info alert. - - - This is a warning alert. - - - This is an error alert. - - - This is a success alert. - - - This is an info alert. - - - This is a warning alert. - - - This is an error alert. - - -``` +{render('./severity-levels')} ### `icon` prop The `icon` prop allows you to specify an icon to be displayed in the alert. If not specified, the default icon will be used based on the `severity` prop. -```jsx - - - This is a success alert. - - - This is a success alert. - - }> - This is a success alert. - - - This is a success alert. - - - This is a success alert. - - - This is a success alert. - - }> - This is a success alert. - - - This is a success alert. - - -``` +{render('./the-icon-prop')} ### Customizing the background color -```jsx - - - This is a promotion message - - - This is a promotion message - - -``` +{render('./customizing-the-background-color')} ### How to close an alert @@ -139,18 +58,7 @@ The `isClosable` prop is used to make an alert closable by adding a close button ``` -```jsx noInline -render(() => { - const [isOpen, onClose] = useToggle(true); - return ( - - - This is a success alert. - - - ); -}); -``` +{render('./close-an-alert-using-the-isclosable-prop')} #### Using the `AlertCloseButton` component @@ -167,19 +75,7 @@ Besides the default functionality of the `AlertCloseButton`, you can also pass a When using the `AlertCloseButton` component, be sure to manually adjust its position. In the example above, the close button is positioned absolutely, with 3 pixels from the top and 7 pixels from the right of its parent element. -```jsx noInline -render(() => { - const [isOpen, onClose] = useToggle(true); - return ( - - - This is a success alert. - - - - ); -}); -``` +{render('./close-an-alert-using-the-alertclosebutton-component')} ### Alert actions @@ -187,203 +83,25 @@ An alert action is a button or link to trigger an action. It is used to provide The action button is usually aligned to the right of the alert. You can use `justifyContent` to align the action button to the right. -```jsx noInline -const ActionButton = React.forwardRef((props, ref) => ( - - - - - ); -} - -render(); -``` +{render('./alert-actions')} ### Formatted text You can use the `Text` component to format text. -```jsx - - - - Success - - - This is a success alert. - - - - - Info - - - This is an info alert. - - - - - Warning - - - This is a warning alert. - - - - - Error - - - This is an error alert. - - - -``` +{render('./formatted-text')} ### Pagination For some use cases, you may want to display a list of alerts using pagination to reduce the number of visible alerts on the screen. -```jsx noInline -const alerts = [ - { variant: 'solid', severity: 'success', icon: 'success', message: 'This is a success alert' }, - { variant: 'solid', severity: 'info', icon: 'info', message: 'This is an info alert' }, - { variant: 'solid', severity: 'warning', icon: 'warning-minor', message: 'This is a warning alert' }, - { variant: 'solid', severity: 'error', icon: 'error', message: 'This is an error alert' }, -]; -const pageMin = alerts.length > 0 ? 1 : 0; -const pageMax = alerts.length > 0 ? alerts.length : 0; - -const IconButton = (props) => ( - -); - -function Example() { - const [page, setPage] = React.useState(pageMin); - const alert = alerts[page - 1] || {}; - - return ( - - - {alert.message} - - setPage(Math.max(pageMin, page - 1))} - > - - - {page}/{pageMax} - = pageMax} - onClick={() => setPage(Math.min(pageMax, page + 1))} - > - - - - - - ); -} - -render(); -``` +{render('./pagination')} ### Transition effects To animate the alert, you can use a transition component to apply an animation effect. -```jsx -function Example() { - const [isOpen, setIsOpen] = React.useState(true); - const handleOpen = () => setIsOpen(true); - const handleClose = () => setIsOpen(false); - - return ( - <> - - - Click the close button on the right side. - - - - - - - ); -} -``` +{render('./transition-effects')} ## Props diff --git a/packages/react-docs/pages/components/alert/pagination.js b/packages/react-docs/pages/components/alert/pagination.js new file mode 100644 index 0000000000..81ea63fc28 --- /dev/null +++ b/packages/react-docs/pages/components/alert/pagination.js @@ -0,0 +1,59 @@ +import { Alert, ButtonBase, Flex, Icon, Text } from '@tonic-ui/react'; +import React, { useState } from 'react'; + +const alerts = [ + { variant: 'solid', severity: 'success', icon: 'success', message: 'This is a success alert' }, + { variant: 'solid', severity: 'info', icon: 'info', message: 'This is an info alert' }, + { variant: 'solid', severity: 'warning', icon: 'warning-minor', message: 'This is a warning alert' }, + { variant: 'solid', severity: 'error', icon: 'error', message: 'This is an error alert' }, +]; +const pageMin = alerts.length > 0 ? 1 : 0; +const pageMax = alerts.length > 0 ? alerts.length : 0; + +const IconButton = (props) => ( + +); + +const App = () => { + const [page, setPage] = useState(pageMin); + const alert = alerts[page - 1] || {}; + + return ( + + + {alert.message} + + setPage(Math.max(pageMin, page - 1))} + > + + + {page}/{pageMax} + = pageMax} + onClick={() => setPage(Math.min(pageMax, page + 1))} + > + + + + + + ); +}; + +export default App; diff --git a/packages/react-docs/pages/components/alert/severity-levels.js b/packages/react-docs/pages/components/alert/severity-levels.js new file mode 100644 index 0000000000..feb257f449 --- /dev/null +++ b/packages/react-docs/pages/components/alert/severity-levels.js @@ -0,0 +1,33 @@ +import { Alert, Stack, Text } from '@tonic-ui/react'; +import React from 'react'; + +const App = () => ( + + + This is a success alert. + + + This is an info alert. + + + This is a warning alert. + + + This is an error alert. + + + This is a success alert. + + + This is an info alert. + + + This is a warning alert. + + + This is an error alert. + + +); + +export default App; diff --git a/packages/react-docs/pages/components/alert/the-icon-prop.js b/packages/react-docs/pages/components/alert/the-icon-prop.js new file mode 100644 index 0000000000..660495a875 --- /dev/null +++ b/packages/react-docs/pages/components/alert/the-icon-prop.js @@ -0,0 +1,33 @@ +import { Alert, Icon, Stack } from '@tonic-ui/react'; +import React from 'react'; + +const App = () => ( + + + This is a success alert. + + + This is a success alert. + + }> + This is a success alert. + + + This is a success alert. + + + This is a success alert. + + + This is a success alert. + + }> + This is a success alert. + + + This is a success alert. + + +); + +export default App; diff --git a/packages/react-docs/pages/components/alert/transition-effects.js b/packages/react-docs/pages/components/alert/transition-effects.js new file mode 100644 index 0000000000..0b244d763a --- /dev/null +++ b/packages/react-docs/pages/components/alert/transition-effects.js @@ -0,0 +1,25 @@ +import { Alert, Box, Button, Collapse } from '@tonic-ui/react'; +import React, { useState } from 'react'; + +const App = () => { + const [isOpen, setIsOpen] = useState(true); + const handleOpen = () => setIsOpen(true); + const handleClose = () => setIsOpen(false); + + return ( + <> + + + Click the close button on the right side. + + + + + + + ); +}; + +export default App; diff --git a/packages/react-docs/pages/components/alert/variant-outline.js b/packages/react-docs/pages/components/alert/variant-outline.js new file mode 100644 index 0000000000..b2f8cb0d67 --- /dev/null +++ b/packages/react-docs/pages/components/alert/variant-outline.js @@ -0,0 +1,10 @@ +import { Alert, Text } from '@tonic-ui/react'; +import React from 'react'; + +const App = () => ( + + This is a contextual alert. + +); + +export default App; diff --git a/packages/react-docs/pages/components/alert/variant-solid.js b/packages/react-docs/pages/components/alert/variant-solid.js new file mode 100644 index 0000000000..5970c946b7 --- /dev/null +++ b/packages/react-docs/pages/components/alert/variant-solid.js @@ -0,0 +1,10 @@ +import { Alert, Text } from '@tonic-ui/react'; +import React from 'react'; + +const App = () => ( + + This is an important message. + +); + +export default App; diff --git a/packages/react-docs/pages/components/badge.page.mdx b/packages/react-docs/pages/components/badge.page.mdx deleted file mode 100644 index 1c6f55d9aa..0000000000 --- a/packages/react-docs/pages/components/badge.page.mdx +++ /dev/null @@ -1,320 +0,0 @@ -# Badge - -Badges are used to highlight an item's status for quick recognition. - -## Import - -```js -import { Badge } from '@tonic-ui/react'; -``` - -## Usage - -### Basic badge - -To display the badge on the top-right corner of the wrapped component, specify the `badgeContent` prop with the desired content. - -```jsx - - - - - - - - - - - - - - !} - > - - - - - - - - - - - - - - - !} - > - - - -``` - -### Dot badge - -Use `variant="dot"` to change a badge into a small dot. This can be used as a notification that something has changed without giving a count. - -```jsx - - // Pass `isInvisible` to make it invisible - - - - - - - - - - -``` - -### Standalone badge - -The badge can be used as a standalone component. This can be useful for displaying a badge without a surrounding element. - -```jsx - - - - - - } height="6x" /> - -``` - -### Badge alignment - -You can use the `placement` prop to move the badge to any corner of the wrapped element. The default placement is `top-right`. The `placement` prop can be one of `top-left`, `top-right`, `bottom-left`, `bottom-right`. - -```jsx - - - - - - - - - - - - - - -``` - -### Badge visibility - -The badge visibility can be controlled using the `isInvisible` prop. - -```jsx -function Example() { - const [count, setCount] = React.useState(1); - const [isInvisible, setIsInvisible] = React.useState(false); - - return ( - - - - 0)}> - - - - - - - - - - - - - - - - - { - setIsInvisible(!isInvisible); - }} - /> - - Show Badge - - - - - ); -} -``` - -### Color - -The color of the badge can be changed by passing the `backgroundColor` prop. See the [colors](../theme/colors) section to learn more about colors. - -```jsx -function Example() { - const colors = [ - 'red:60', - 'orange:50', - 'yellow:50', - 'green:60', - 'blue:60', - 'gray:60', - 'magenta:60', - 'purple:60', - 'teal:60', - 'cyan:60', - ]; - - return ( - - {colors.map(color => ( - - - - ))} - - ); -} -``` - -### Size - -The size of the badge can be changed by passing the `height` and `minWidth` props. - -```jsx - - - - - - - - - - - -``` - -### Customization - -You can customize the badge style by passing style props. See the following example to learn how to create a outline badge. - -```jsx noInline -const OutlineBadge = React.forwardRef((props, ref) => { - const [colorMode] = useColorMode(); - const backgroundColor = { - dark: 'gray:100', - light: 'white', - }[colorMode]; - const borderColor = { - dark: 'yellow:50', - light: 'yellow:50', - }[colorMode]; - const borderStyle = 'solid'; - const borderWidth = '2px'; - const color = { - dark: 'white:primary', - light: 'black:primary', - }[colorMode]; - const height = '5x'; - const minWidth = '5x'; - - return ( - - ); -}); - -function Example() { - return ( - - - - - - - - !} - > - - - - ); -} - -render(); -``` - -## Props - -### Badge - -| Name | Type | Default | Description | -| :--- | :--- | :------ | :---------- | -| children | ReactNode | | | -| badgeContent | ReactNode \| number \| string | | The badge content. | -| isInvisible | boolean | | Whether the badge is invisible. | -| placement | string | 'top-right' | The placement of the badge. One of: 'top-left', 'top-right', 'bottom-left', 'bottom-right'. | -| variant | string | 'solid' | One of: 'solid', 'dot' | diff --git a/packages/react-docs/pages/components/badge/badge-alignment.js b/packages/react-docs/pages/components/badge/badge-alignment.js new file mode 100644 index 0000000000..1a1237797e --- /dev/null +++ b/packages/react-docs/pages/components/badge/badge-alignment.js @@ -0,0 +1,27 @@ +import { Badge, Grid, Icon } from '@tonic-ui/react'; +import React from 'react'; + +const App = () => ( + + + + + + + + + + + + + + +); + +export default App; diff --git a/packages/react-docs/pages/components/badge/badge-visibility.js b/packages/react-docs/pages/components/badge/badge-visibility.js new file mode 100644 index 0000000000..04c5eb1446 --- /dev/null +++ b/packages/react-docs/pages/components/badge/badge-visibility.js @@ -0,0 +1,64 @@ +import { Badge, Box, Button, ButtonGroup, Flex, Icon, Space, Stack, Switch, Text, TextLabel } from '@tonic-ui/react'; +import React, { useState } from 'react'; + +const App = () => { + const [count, setCount] = useState(1); + const [isInvisible, setIsInvisible] = useState(false); + + return ( + + + + 0)}> + + + + + + + + + + + + + + + + + { + setIsInvisible(!isInvisible); + }} + /> + + Show Badge + + + + + ); +}; + +export default App; diff --git a/packages/react-docs/pages/components/badge/basic.js b/packages/react-docs/pages/components/badge/basic.js new file mode 100644 index 0000000000..3b85663a65 --- /dev/null +++ b/packages/react-docs/pages/components/badge/basic.js @@ -0,0 +1,50 @@ +import { Badge, Grid, Icon, Skeleton, Text } from '@tonic-ui/react'; +import React from 'react'; + +const App = () => ( + + + + + + + + + + + + + + !} + > + + + + + + + + + + + + + + + !} + > + + + +); + +export default App; diff --git a/packages/react-docs/pages/components/badge/color.js b/packages/react-docs/pages/components/badge/color.js new file mode 100644 index 0000000000..6cd73d8765 --- /dev/null +++ b/packages/react-docs/pages/components/badge/color.js @@ -0,0 +1,34 @@ +import { Badge, Grid, Skeleton } from '@tonic-ui/react'; +import React from 'react'; + +const App = () => { + const colors = [ + 'red:60', + 'orange:50', + 'yellow:50', + 'green:60', + 'blue:60', + 'gray:60', + 'magenta:60', + 'purple:60', + 'teal:60', + 'cyan:60', + ]; + + return ( + + {colors.map(color => ( + + + + ))} + + ); +}; + +export default App; diff --git a/packages/react-docs/pages/components/badge/customization.js b/packages/react-docs/pages/components/badge/customization.js new file mode 100644 index 0000000000..85e3c56619 --- /dev/null +++ b/packages/react-docs/pages/components/badge/customization.js @@ -0,0 +1,62 @@ +import { Badge, Grid, Skeleton, Text, useColorMode } from '@tonic-ui/react'; +import React from 'react'; + +const OutlineBadge = (props) => { + const [colorMode] = useColorMode(); + const backgroundColor = { + dark: 'gray:100', + light: 'white', + }[colorMode]; + const borderColor = { + dark: 'yellow:50', + light: 'yellow:50', + }[colorMode]; + const borderStyle = 'solid'; + const borderWidth = '2px'; + const color = { + dark: 'white:primary', + light: 'black:primary', + }[colorMode]; + const height = '5x'; + const minWidth = '5x'; + + return ( + + ); +}; + +const App = () => { + return ( + + + + + + + + !} + > + + + + ); +}; + +export default App; diff --git a/packages/react-docs/pages/components/badge/dot.js b/packages/react-docs/pages/components/badge/dot.js new file mode 100644 index 0000000000..47fc2a74b0 --- /dev/null +++ b/packages/react-docs/pages/components/badge/dot.js @@ -0,0 +1,18 @@ +import { Badge, Icon, Stack } from '@tonic-ui/react'; +import React from 'react'; + +const App = () => ( + + + + + + + + + + + +); + +export default App; diff --git a/packages/react-docs/pages/components/badge/index.page.mdx b/packages/react-docs/pages/components/badge/index.page.mdx new file mode 100644 index 0000000000..99830013de --- /dev/null +++ b/packages/react-docs/pages/components/badge/index.page.mdx @@ -0,0 +1,71 @@ +# Badge + +Badges are used to highlight an item's status for quick recognition. + +## Import + +```js +import { Badge } from '@tonic-ui/react'; +``` + +## Usage + +### Basic badge + +To display the badge on the top-right corner of the wrapped component, specify the `badgeContent` prop with the desired content. + +{render('./basic')} + +### Dot badge + +Use `variant="dot"` to change a badge into a small dot. This can be used as a notification that something has changed without giving a count. + +{render('./dot')} + +### Standalone badge + +The badge can be used as a standalone component. This can be useful for displaying a badge without a surrounding element. + +{render('./standalone')} + +### Badge alignment + +You can use the `placement` prop to move the badge to any corner of the wrapped element. The default placement is `top-right`. The `placement` prop can be one of `top-left`, `top-right`, `bottom-left`, `bottom-right`. + +{render('./badge-alignment')} + +### Badge visibility + +The badge visibility can be controlled using the `isInvisible` prop. + +{render('./badge-visibility')} + +### Color + +The color of the badge can be changed by passing the `backgroundColor` prop. See the [colors](../theme/colors) section to learn more about colors. + +{render('./color')} + +### Size + +The size of the badge can be changed by passing the `height` and `minWidth` props. + +{render('./size')} + +### Customization + +You can customize the badge style by passing style props. See the following example to learn how to create a outline badge. + +{render('./customization')} + +## Props + +### Badge + +| Name | Type | Default | Description | +| :--- | :--- | :------ | :---------- | +| children | ReactNode | | | +| badgeContent | ReactNode \| number \| string | | The badge content. | +| isInvisible | boolean | | Whether the badge is invisible. | +| placement | string | 'top-right' | The placement of the badge. One of: 'top-left', 'top-right', 'bottom-left', 'bottom-right'. | +| variant | string | 'solid' | One of: 'solid', 'dot' | diff --git a/packages/react-docs/pages/components/badge/size.js b/packages/react-docs/pages/components/badge/size.js new file mode 100644 index 0000000000..d55d815a63 --- /dev/null +++ b/packages/react-docs/pages/components/badge/size.js @@ -0,0 +1,18 @@ +import { Badge, Skeleton, Stack } from '@tonic-ui/react'; +import React from 'react'; + +const App = () => ( + + + + + + + + + + + +); + +export default App; diff --git a/packages/react-docs/pages/components/badge/standalone.js b/packages/react-docs/pages/components/badge/standalone.js new file mode 100644 index 0000000000..f61b1ecfc0 --- /dev/null +++ b/packages/react-docs/pages/components/badge/standalone.js @@ -0,0 +1,14 @@ +import { Badge, Icon, Stack } from '@tonic-ui/react'; +import React from 'react'; + +const App = () => ( + + + + + + } height="6x" /> + +); + +export default App; diff --git a/packages/react-docs/pages/components/box.page.mdx b/packages/react-docs/pages/components/box/index.page.mdx similarity index 60% rename from packages/react-docs/pages/components/box.page.mdx rename to packages/react-docs/pages/components/box/index.page.mdx index f8263c68d2..0b2ed86a99 100644 --- a/packages/react-docs/pages/components/box.page.mdx +++ b/packages/react-docs/pages/components/box/index.page.mdx @@ -14,11 +14,7 @@ import { Box } from '@tonic-ui/react'; By default, the `Box` component renders a `div` element. There might be cases where you want to render a different element, you can use the `as` prop to do that. -```jsx expanded - - Button - -``` +{render('./using-the-as-prop')} ### Using style props @@ -26,21 +22,7 @@ Style props provide a way to use CSS-in-JS styling technique to pass styles as p You can see the [Style Props](../styled-system/style-props) page to learn how to use style props. -```jsx expanded - - Button - -``` +{render('./using-style-props')} ### Using pseudo style props @@ -48,51 +30,11 @@ Styling elements with [pseudo-classes](https://developer.mozilla.org/en-US/docs/ You can see the [Pseudo Styled Props](../styled-system/pseudo-style-props) page to learn how to use pseudo style props. -```jsx expanded - - Button - -``` +{render('./using-pseudo-style-props')} ### Using the `sx` prop -```jsx expanded - -``` +{render('./using-the-sx-prop')} Read more on [the sx prop](../getting-started/the-sx-prop) page. diff --git a/packages/react-docs/pages/components/box/using-pseudo-style-props.js b/packages/react-docs/pages/components/box/using-pseudo-style-props.js new file mode 100644 index 0000000000..0d09511305 --- /dev/null +++ b/packages/react-docs/pages/components/box/using-pseudo-style-props.js @@ -0,0 +1,26 @@ +import { Box } from '@tonic-ui/react'; +import React from 'react'; + +const App = () => ( + + Button + +); + +export default App; diff --git a/packages/react-docs/pages/components/box/using-style-props.js b/packages/react-docs/pages/components/box/using-style-props.js new file mode 100644 index 0000000000..cf66b144a4 --- /dev/null +++ b/packages/react-docs/pages/components/box/using-style-props.js @@ -0,0 +1,20 @@ +import { Box } from '@tonic-ui/react'; +import React from 'react'; + +const App = () => ( + + Button + +); + +export default App; diff --git a/packages/react-docs/pages/components/box/using-the-as-prop.js b/packages/react-docs/pages/components/box/using-the-as-prop.js new file mode 100644 index 0000000000..cbefcb19f0 --- /dev/null +++ b/packages/react-docs/pages/components/box/using-the-as-prop.js @@ -0,0 +1,10 @@ +import { Box } from '@tonic-ui/react'; +import React from 'react'; + +const App = () => ( + + Button + +); + +export default App; diff --git a/packages/react-docs/pages/components/box/using-the-sx-prop.js b/packages/react-docs/pages/components/box/using-the-sx-prop.js new file mode 100644 index 0000000000..72d76101d9 --- /dev/null +++ b/packages/react-docs/pages/components/box/using-the-sx-prop.js @@ -0,0 +1,26 @@ +import { Button } from '@tonic-ui/react'; +import React from 'react'; + +const App = () => ( + +); + +export default App; diff --git a/packages/react-docs/pages/components/button-base/disabled.js b/packages/react-docs/pages/components/button-base/attribute-disabled.js similarity index 100% rename from packages/react-docs/pages/components/button-base/disabled.js rename to packages/react-docs/pages/components/button-base/attribute-disabled.js diff --git a/packages/react-docs/pages/components/button-base/index.page.mdx b/packages/react-docs/pages/components/button-base/index.page.mdx index a43c34b01d..11812d92f2 100644 --- a/packages/react-docs/pages/components/button-base/index.page.mdx +++ b/packages/react-docs/pages/components/button-base/index.page.mdx @@ -18,7 +18,7 @@ Standard button attributes are supported, e.g., `type`, `disabled`, etc. #### `disabled` -{render('./disabled')} +{render('./attribute-disabled')} ### Icon button diff --git a/packages/react-docs/pages/components/checkbox-group.page.mdx b/packages/react-docs/pages/components/checkbox-group.page.mdx deleted file mode 100644 index daf063787d..0000000000 --- a/packages/react-docs/pages/components/checkbox-group.page.mdx +++ /dev/null @@ -1,194 +0,0 @@ -# CheckboxGroup - -`CheckboxGroup` is used to group related checkboxes. - -## Import - -```js -import { CheckboxGroup } from '@tonic-ui/react'; -``` - -### Usage - -#### Uncontrolled checkbox group - -```jsx - - - Apple - Orange - Papaya - - -``` - -#### Controlled checkbox group - -```jsx -function Example() { - const [value, setValue] = React.useState(['apple']); - - return ( - setValue(value)}> - - Apple - Orange - Papaya - - - ); -} -``` - -### Group orientation - -Make a set of checkboxes appear horizontal stacked rather than vertically, by adding `flexDirection="row"` to the `Stack` component. - -```jsx - - - Apple - Orange - Papaya - - -``` - -### Colors - -Use the `variantColor` prop to change the color scheme of the Radio. `variantColor` can be any color key with key `50`(hover), `60`(checked) that exist in the `theme.colors`. - -```jsx - - - Apple - Orange - Papaya - - -``` - -### Sizes - -Use the `size` prop to change the size of the `CheckboxGroup`. You can set the value to `sm`, `md`, or `lg`. - -```jsx - - - - Apple - Orange - Papaya - - - - - Apple - Orange - Papaya - - - - - Apple - Orange - Papaya - - - -``` - -### States - -```jsx - - - - Apple - Orange - Papaya - - - - - Apple - Orange - Papaya - - - -``` - -### Asynchronous data loading - -```jsx -function Example() { - const [state, setState] = React.useState({ - state: 'idle', - fruits: [], - }); - const timerRef = React.useRef(null); - const fetchData = React.useCallback(() => { - setState(prevState => ({ ...prevState, state: 'loading' })); - - if (timerRef.current) { - clearTimeout(timerRef.current); - timerRef.current = null; - } - timerRef.current = setTimeout(() => { - setState({ - state: 'success', - fruits: ['apple'], - }); - - timerRef.current = null; - }, 2000); - }, []); - - React.useEffect(() => { - fetchData(); - }, [fetchData]); - - return ( - <> - - fetchData()}> - - - - Reload - - - - { - setState(prevState => ({ ...prevState, fruits: value })); - }} - > - - Apple - Orange - Papaya - - - - ); -} -``` - -## Props - -### CheckboxGroup - -| Name | Type | Default | Description | -| :--- | :--- | :------ | :---------- | -| children | ReactNode \| `(context) => ReactNode` | | A function child can be used intead of a React element. This function is called with the context object. | -| defaultValue | (string\|number)[] | | The initial value of the checkbox group. | -| disabled | boolean | false | If `true`, all checkboxes will be disabled. | -| name | string | | The name used to reference the value of the control. If you don't provide this prop, it falls back to a randomly generated name. | -| onChange | (event) => void | | A callback fired when any descendant `Checkbox` is checked or unchecked. | -| size | string | 'md' | The size (width and height) of the checkbox. One of: 'sm', 'md', 'lg' | -| value | (string\|number)[] | | The value of the checkbox group. | -| variantColor | string | | The color of the checkbox when it's checked. This should be one of the color keys in the theme (e.g. 'green', 'red') | diff --git a/packages/react-docs/pages/components/checkbox-group/asynchronous-data-loading.js b/packages/react-docs/pages/components/checkbox-group/asynchronous-data-loading.js new file mode 100644 index 0000000000..a3a12a4bd8 --- /dev/null +++ b/packages/react-docs/pages/components/checkbox-group/asynchronous-data-loading.js @@ -0,0 +1,59 @@ +import { Box, Checkbox, CheckboxGroup, Flex, Icon, LinkButton, Space, Stack } from '@tonic-ui/react'; +import React, { useCallback, useEffect, useRef, useState } from 'react'; + +const App = () => { + const [state, setState] = useState({ + state: 'idle', + fruits: [], + }); + const timerRef = useRef(null); + const fetchData = useCallback(() => { + setState(prevState => ({ ...prevState, state: 'loading' })); + + if (timerRef.current) { + clearTimeout(timerRef.current); + timerRef.current = null; + } + timerRef.current = setTimeout(() => { + setState({ + state: 'success', + fruits: ['apple'], + }); + + timerRef.current = null; + }, 2000); + }, []); + + useEffect(() => { + fetchData(); + }, [fetchData]); + + return ( + <> + + fetchData()}> + + + + Reload + + + + { + setState(prevState => ({ ...prevState, fruits: value })); + }} + > + + Apple + Orange + Papaya + + + + ); +}; + +export default App; diff --git a/packages/react-docs/pages/components/checkbox-group/colors.js b/packages/react-docs/pages/components/checkbox-group/colors.js new file mode 100644 index 0000000000..3fc54dc435 --- /dev/null +++ b/packages/react-docs/pages/components/checkbox-group/colors.js @@ -0,0 +1,14 @@ +import { Checkbox, CheckboxGroup, Stack } from '@tonic-ui/react'; +import React from 'react'; + +const App = () => ( + + + Apple + Orange + Papaya + + +); + +export default App; diff --git a/packages/react-docs/pages/components/checkbox-group/controlled-checkbox-group.js b/packages/react-docs/pages/components/checkbox-group/controlled-checkbox-group.js new file mode 100644 index 0000000000..9dc88613bd --- /dev/null +++ b/packages/react-docs/pages/components/checkbox-group/controlled-checkbox-group.js @@ -0,0 +1,18 @@ +import { Checkbox, CheckboxGroup, Stack } from '@tonic-ui/react'; +import React, { useState } from 'react'; + +const App = () => { + const [value, setValue] = useState(['apple']); + + return ( + setValue(value)}> + + Apple + Orange + Papaya + + + ); +}; + +export default App; diff --git a/packages/react-docs/pages/components/checkbox-group/group-orientation.js b/packages/react-docs/pages/components/checkbox-group/group-orientation.js new file mode 100644 index 0000000000..f86e4ed25e --- /dev/null +++ b/packages/react-docs/pages/components/checkbox-group/group-orientation.js @@ -0,0 +1,14 @@ +import { Checkbox, CheckboxGroup, Stack } from '@tonic-ui/react'; +import React from 'react'; + +const App = () => ( + + + Apple + Orange + Papaya + + +); + +export default App; diff --git a/packages/react-docs/pages/components/checkbox-group/index.page.mdx b/packages/react-docs/pages/components/checkbox-group/index.page.mdx new file mode 100644 index 0000000000..52e293da7d --- /dev/null +++ b/packages/react-docs/pages/components/checkbox-group/index.page.mdx @@ -0,0 +1,60 @@ +# CheckboxGroup + +`CheckboxGroup` is used to group related checkboxes. + +## Import + +```js +import { CheckboxGroup } from '@tonic-ui/react'; +``` + +### Usage + +#### Uncontrolled checkbox group + +{render('./uncontrolled-checkbox-group')} + +#### Controlled checkbox group + +{render('./controlled-checkbox-group')} + +### Group orientation + +Make a set of checkboxes appear horizontal stacked rather than vertically, by adding `flexDirection="row"` to the `Stack` component. + +{render('./group-orientation')} + +### Colors + +Use the `variantColor` prop to change the color scheme of the Radio. `variantColor` can be any color key with key `50`(hover), `60`(checked) that exist in the `theme.colors`. + +{render('./colors')} + +### Sizes + +Use the `size` prop to change the size of the `CheckboxGroup`. You can set the value to `sm`, `md`, or `lg`. + +{render('./sizes')} + +### States + +{render('./states')} + +### Asynchronous data loading + +{render('./asynchronous-data-loading')} + +## Props + +### CheckboxGroup + +| Name | Type | Default | Description | +| :--- | :--- | :------ | :---------- | +| children | ReactNode \| `(context) => ReactNode` | | A function child can be used intead of a React element. This function is called with the context object. | +| defaultValue | (string\|number)[] | | The initial value of the checkbox group. | +| disabled | boolean | false | If `true`, all checkboxes will be disabled. | +| name | string | | The name used to reference the value of the control. If you don't provide this prop, it falls back to a randomly generated name. | +| onChange | (event) => void | | A callback fired when any descendant `Checkbox` is checked or unchecked. | +| size | string | 'md' | The size (width and height) of the checkbox. One of: 'sm', 'md', 'lg' | +| value | (string\|number)[] | | The value of the checkbox group. | +| variantColor | string | | The color of the checkbox when it's checked. This should be one of the color keys in the theme (e.g. 'green', 'red') | diff --git a/packages/react-docs/pages/components/checkbox-group/sizes.js b/packages/react-docs/pages/components/checkbox-group/sizes.js new file mode 100644 index 0000000000..73fcde4e1a --- /dev/null +++ b/packages/react-docs/pages/components/checkbox-group/sizes.js @@ -0,0 +1,30 @@ +import { Checkbox, CheckboxGroup, Stack } from '@tonic-ui/react'; +import React from 'react'; + +const App = () => ( + + + + Apple + Orange + Papaya + + + + + Apple + Orange + Papaya + + + + + Apple + Orange + Papaya + + + +); + +export default App; diff --git a/packages/react-docs/pages/components/checkbox-group/states.js b/packages/react-docs/pages/components/checkbox-group/states.js new file mode 100644 index 0000000000..5b762d552f --- /dev/null +++ b/packages/react-docs/pages/components/checkbox-group/states.js @@ -0,0 +1,23 @@ +import { Checkbox, CheckboxGroup, Stack } from '@tonic-ui/react'; +import React from 'react'; + +const App = () => ( + + + + Apple + Orange + Papaya + + + + + Apple + Orange + Papaya + + + +); + +export default App; diff --git a/packages/react-docs/pages/components/checkbox-group/uncontrolled-checkbox-group.js b/packages/react-docs/pages/components/checkbox-group/uncontrolled-checkbox-group.js new file mode 100644 index 0000000000..bc4cabf7fb --- /dev/null +++ b/packages/react-docs/pages/components/checkbox-group/uncontrolled-checkbox-group.js @@ -0,0 +1,14 @@ +import { Checkbox, CheckboxGroup, Stack } from '@tonic-ui/react'; +import React from 'react'; + +const App = () => ( + + + Apple + Orange + Papaya + + +); + +export default App; diff --git a/packages/react-docs/pages/components/checkbox/accessibility.js b/packages/react-docs/pages/components/checkbox/accessibility.js new file mode 100644 index 0000000000..06f4637e2e --- /dev/null +++ b/packages/react-docs/pages/components/checkbox/accessibility.js @@ -0,0 +1,13 @@ +import { Checkbox } from '@tonic-ui/react'; +import React from 'react'; + +const App = () => ( + + +); + +export default App; \ No newline at end of file diff --git a/packages/react-docs/pages/components/checkbox/basic.js b/packages/react-docs/pages/components/checkbox/basic.js new file mode 100644 index 0000000000..5fc9970f47 --- /dev/null +++ b/packages/react-docs/pages/components/checkbox/basic.js @@ -0,0 +1,10 @@ +import { Checkbox } from '@tonic-ui/react'; +import React from 'react'; + +const App = () => ( + + Label + +); + +export default App; diff --git a/packages/react-docs/pages/components/checkbox/colors.js b/packages/react-docs/pages/components/checkbox/colors.js new file mode 100644 index 0000000000..9e361850df --- /dev/null +++ b/packages/react-docs/pages/components/checkbox/colors.js @@ -0,0 +1,15 @@ +import { Checkbox, Flex } from '@tonic-ui/react'; +import React from 'react'; + +const App = () => ( + + + Label + + + Label + + +); + +export default App; diff --git a/packages/react-docs/pages/components/checkbox/faq-input-ref.js b/packages/react-docs/pages/components/checkbox/faq-input-ref.js new file mode 100644 index 0000000000..f15b3fdc1a --- /dev/null +++ b/packages/react-docs/pages/components/checkbox/faq-input-ref.js @@ -0,0 +1,23 @@ +import { Button, Checkbox, Flex } from '@tonic-ui/react'; +import React, { useCallback, useRef } from 'react'; + +const App = () => { + const inputRef = useRef(); + const handleClick = useCallback(() => { + inputRef.current.focus(); + console.log(inputRef.current.checked); // => true + }, []); + + return ( + + + Label + + + + ); +}; + +export default App; diff --git a/packages/react-docs/pages/components/checkbox/flex-container.js b/packages/react-docs/pages/components/checkbox/flex-container.js new file mode 100644 index 0000000000..120fe3d022 --- /dev/null +++ b/packages/react-docs/pages/components/checkbox/flex-container.js @@ -0,0 +1,23 @@ +import { Box, Checkbox, Flex, Text } from '@tonic-ui/react'; +import React from 'react'; + +const App = () => ( + + + + + + Label + Helper text + + +); + +export default App; diff --git a/packages/react-docs/pages/components/checkbox/indeterminate.js b/packages/react-docs/pages/components/checkbox/indeterminate.js new file mode 100644 index 0000000000..d97f26b300 --- /dev/null +++ b/packages/react-docs/pages/components/checkbox/indeterminate.js @@ -0,0 +1,36 @@ +import { Checkbox, Stack } from '@tonic-ui/react'; +import React, { useState } from 'react'; + +const App = () => { + const [checkedItems, setCheckedItems] = useState([true, false]); + const allChecked = checkedItems.every(Boolean); + const isIndeterminate = checkedItems.some(Boolean) && !allChecked; + + return ( + <> + setCheckedItems([e.target.checked, e.target.checked])} + > + Parent + + + setCheckedItems([e.target.checked, checkedItems[1]])} + > + Child 1 + + setCheckedItems([checkedItems[0], e.target.checked])} + > + Child 2 + + + + ); +}; + +export default App; diff --git a/packages/react-docs/pages/components/checkbox.page.mdx b/packages/react-docs/pages/components/checkbox/index.page.mdx similarity index 60% rename from packages/react-docs/pages/components/checkbox.page.mdx rename to packages/react-docs/pages/components/checkbox/index.page.mdx index 068547a974..a1c0ae4be9 100644 --- a/packages/react-docs/pages/components/checkbox.page.mdx +++ b/packages/react-docs/pages/components/checkbox/index.page.mdx @@ -12,130 +12,31 @@ import { Checkbox } from '@tonic-ui/react'; ## Usage -```jsx - - Label - -``` +{render('./basic')} You can use a flex container to align a checkbox with other components. This allows you to easily control the positioning and spacing of all elements within the container. -```jsx - - - - - - Label - Helper text - - -``` +{render('./flex-container')} ### Colors Use the `variantColor` prop to change the color scheme of the checkbox. `variantColor` can be any color key with key `50` (hover) or `60` (checked, active) that exist in `theme.colors`. -```jsx - - - Label - - - Label - - -``` +{render('./colors')} ### Sizes Use the `size` prop to change the size of the checkbox. You can set the value to `sm`, `md`, or `lg`. -```jsx - - - Label - - - Label - - - Label - - -``` +{render('./sizes')} ### States -```jsx - - - - Label - - - Label - - - Label - - - - - Label - - - Label - - - Label - - - -``` +{render('./states')} ### Indeterminate -```jsx -function IndeterminateExample() { - const [checkedItems, setCheckedItems] = React.useState([true, false]); - const allChecked = checkedItems.every(Boolean); - const isIndeterminate = checkedItems.some(Boolean) && !allChecked; - - return ( - <> - setCheckedItems([e.target.checked, e.target.checked])} - > - Parent - - - setCheckedItems([e.target.checked, checkedItems[1]])} - > - Child 1 - - setCheckedItems([checkedItems[0], e.target.checked])} - > - Child 2 - - - - ); -} -``` +{render('./indeterminate')} ## Accessibility @@ -162,27 +63,7 @@ Once you have obtained the reference to the input element, you can access its pr Here's an example of how you can utilize the `inputRef` prop to access the input element and perform actions: -```jsx -function Example() { - const inputRef = React.useRef(); - - const handleClick = () => { - inputRef.current.focus(); - console.log(inputRef.current.checked); // => true - }; - - return ( - - - Label - - - - ); -} -``` +{render('./faq-input-ref')} ## Props diff --git a/packages/react-docs/pages/components/checkbox/sizes.js b/packages/react-docs/pages/components/checkbox/sizes.js new file mode 100644 index 0000000000..0f9af9081d --- /dev/null +++ b/packages/react-docs/pages/components/checkbox/sizes.js @@ -0,0 +1,18 @@ +import { Checkbox, Flex } from '@tonic-ui/react'; +import React from 'react'; + +const App = () => ( + + + Label + + + Label + + + Label + + +); + +export default App; diff --git a/packages/react-docs/pages/components/checkbox/states.js b/packages/react-docs/pages/components/checkbox/states.js new file mode 100644 index 0000000000..8592fa37f0 --- /dev/null +++ b/packages/react-docs/pages/components/checkbox/states.js @@ -0,0 +1,31 @@ +import { Checkbox, Flex, Stack } from '@tonic-ui/react'; +import React from 'react'; + +const App = () => ( + + + + Label + + + Label + + + Label + + + + + Label + + + Label + + + Label + + + +); + +export default App; diff --git a/packages/react-docs/pages/components/code/basic.js b/packages/react-docs/pages/components/code/basic.js new file mode 100644 index 0000000000..5630e8fa26 --- /dev/null +++ b/packages/react-docs/pages/components/code/basic.js @@ -0,0 +1,8 @@ +import { Code } from '@tonic-ui/react'; +import React from 'react'; + +const App = () => ( + Hello World +); + +export default App; diff --git a/packages/react-docs/pages/components/code.page.mdx b/packages/react-docs/pages/components/code/index.page.mdx similarity index 90% rename from packages/react-docs/pages/components/code.page.mdx rename to packages/react-docs/pages/components/code/index.page.mdx index 390df2d35e..4f74733ae1 100644 --- a/packages/react-docs/pages/components/code.page.mdx +++ b/packages/react-docs/pages/components/code/index.page.mdx @@ -10,9 +10,7 @@ import { Code } from '@tonic-ui/react'; ## Usage -```jsx -Hello World -``` +{render('./basic')} ## Props diff --git a/packages/react-docs/pages/components/control-box.page.mdx b/packages/react-docs/pages/components/control-box.page.mdx deleted file mode 100644 index 82f9e2bf77..0000000000 --- a/packages/react-docs/pages/components/control-box.page.mdx +++ /dev/null @@ -1,116 +0,0 @@ -# ControlBox - -`ControlBox` provides style props to change it's styles based on a sibling `checkbox` or `radio` input. It relies on a [common CSS technique](https://dev.to/lkopacz/create-custom-keyboard-accessible-checkboxes-2036) for styling custom controls. - -For this component to work, it should have a sibling `input` and be contained in a `label`. - -## Usage - -### Creating a custom checkbox - -```jsx - - - - - - - - Checkbox - - -``` - -### Creating a custom radio button - -```jsx - - - - - - - - Radio Button - - -``` - -## Props - -### ControlBox - -By default, it toggles the opacity of the `ControlBox` children by setting `_child` to `{ opacity: 0 }` and `_checkedAndChild` to `{ opacity: 1 }`. - -| Name | Selector | Description | -| :--- | :----------- | :---------- | -| \_child | `[input] + & > *` | Styles for the child of the `ControlBox`. | -| \_disabled | `[input]:disabled + &` | Styles for when the sibling `input` is disabled. | -| \_focus | `[input]:focus + &` | Styles for when the sibling `input` is focused. | -| \_hover | `[input]:hover:not(:disabled):not(:checked):not(:focus) + &` | Styles for when the sibling `input` is hovered. | -| \_checked | `[input]:checked + &` | Styles for when the sibling `input` is checked. | -| \_checkedAndActive | `[input]:checked:active:not(:disabled):not(:focus) + &` | Styles for when the sibling `input` is checked and actived. | -| \_checkedAndChild | `[input]:checked + & > *` | Styles for the child of the `ControlBox` when the sibling `input` is checked. | -| \_checkedAndDisabled | `[input]:checked:disabled + &` | Styles for when the sibling `input` is checked and disabled. | -| \_checkedAndFocus | `[input]:checked:focus + &` | Styles for when the sibling `input` is checked and focused. | -| \_checkedAndHover | `[input]:checked:hover:not(:disabled):not(:focus) + &` | Styles for when the sibling `input` is checked and hovered. | -| \_indeterminate | `[input][data-indeterminate=true] + &` | Styles for when the sibling `input` is indeterminate. | -| \_indeterminateAndActive | `[input][data-indeterminate=true]:active:not(:disabled):not(:focus) + &` | Styles for when the sibling `input` is indeterminate and actived. | -| \_indeterminateAndChild | `[input][data-indeterminate=true] + & > *` | Styles for the child of the `ControlBox` when the sibling `input` is indeterminate. | -| \_indeterminateAndDisabled | `[input][data-indeterminate=true]:disabled + &` | Styles for when the sibling `input` is indeterminate and disabled. | -| \_indeterminateAndFocus | `[input][data-indeterminate=true]:focus + &` | Styles for when the sibling `input` is indeterminate and focused. | -| \_indeterminateAndHover | `[input][data-indeterminate=true]:hover:not(:disabled):not(:focus) + &` | Styles for when the sibling `input` is indeterminate and hovered. | diff --git a/packages/react-docs/pages/components/css-baseline.page.mdx b/packages/react-docs/pages/components/css-baseline/index.page.mdx similarity index 100% rename from packages/react-docs/pages/components/css-baseline.page.mdx rename to packages/react-docs/pages/components/css-baseline/index.page.mdx diff --git a/packages/react-docs/pages/components/divider/basic.js b/packages/react-docs/pages/components/divider/basic.js new file mode 100644 index 0000000000..f887223f02 --- /dev/null +++ b/packages/react-docs/pages/components/divider/basic.js @@ -0,0 +1,8 @@ +import { Divider } from '@tonic-ui/react'; +import React from 'react'; + +const App = () => ( + +); + +export default App; \ No newline at end of file diff --git a/packages/react-docs/pages/components/divider/composition.js b/packages/react-docs/pages/components/divider/composition.js new file mode 100644 index 0000000000..96e571f025 --- /dev/null +++ b/packages/react-docs/pages/components/divider/composition.js @@ -0,0 +1,14 @@ +import { Divider, Flex, Icon } from '@tonic-ui/react'; +import React from 'react'; + +const App = () => ( + + + + + + + +); + +export default App; diff --git a/packages/react-docs/pages/components/divider/horizontal-orientation.js b/packages/react-docs/pages/components/divider/horizontal-orientation.js new file mode 100644 index 0000000000..781470b50d --- /dev/null +++ b/packages/react-docs/pages/components/divider/horizontal-orientation.js @@ -0,0 +1,12 @@ +import { Divider, Stack } from '@tonic-ui/react'; +import React from 'react'; + +const App = () => ( + + + + + +); + +export default App; diff --git a/packages/react-docs/pages/components/divider.page.mdx b/packages/react-docs/pages/components/divider/index.page.mdx similarity index 50% rename from packages/react-docs/pages/components/divider.page.mdx rename to packages/react-docs/pages/components/divider/index.page.mdx index a3706636fa..f3bf5009c4 100644 --- a/packages/react-docs/pages/components/divider.page.mdx +++ b/packages/react-docs/pages/components/divider/index.page.mdx @@ -12,43 +12,21 @@ import { Divider } from '@tonic-ui/react'; The `Divider` renders a thin line vertically or horizontally. -```jsx - -``` +{render('./basic')} ### Orientation Pass the `orientation` prop and set it to either `horizontal` or `vertical`. -```jsx - - - - - -``` +{render('./horizontal-orientation')} If the vertical orientation is used, make sure that the parent element is assigned a height. -```jsx - - - - - -``` +{render('./vertical-orientation')} -## Composition +### Composition -```jsx - - - - - - - -``` +{render('./composition')} ## Props diff --git a/packages/react-docs/pages/components/divider/vertical-orientation.js b/packages/react-docs/pages/components/divider/vertical-orientation.js new file mode 100644 index 0000000000..2cb50e5244 --- /dev/null +++ b/packages/react-docs/pages/components/divider/vertical-orientation.js @@ -0,0 +1,12 @@ +import { Divider, Stack } from '@tonic-ui/react'; +import React from 'react'; + +const App = () => ( + + + + + +); + +export default App; diff --git a/packages/react-docs/pages/components/flex.page.mdx b/packages/react-docs/pages/components/flex.page.mdx deleted file mode 100644 index d3f8a6d5ae..0000000000 --- a/packages/react-docs/pages/components/flex.page.mdx +++ /dev/null @@ -1,225 +0,0 @@ -# Flex - -`Flex` is a [`Box`](box) with `display: flex` and comes with helpful style shorthand props. - -## Import - -```js -import { Flex } from '@tonic-ui/react'; -``` - -## Usage - -Flex provides the following style shorthand props: - -| Shorthand Prop | Style Prop | CSS Property | Description | -| :------------- | :--------- | :----------- | :---------- | -| align | alignItems | [align-items](https://developer.mozilla.org/en-US/docs/Web/CSS/align-items) | Sets the `align-self` value on all direct children as a group. | -| direction | flexDirection | [flex-direction](https://developer.mozilla.org/en-US/docs/Web/CSS/flex-direction) | Sets how flex items are placed in the flex container. | -| wrap | flexWrap | [flex-wrap](https://developer.mozilla.org/en-US/docs/Web/CSS/flex-wrap) | Sets whether flex items are forced onto one line or can wrap onto multiple lines. | -| justify | justifyContent | [justify-content](https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content) | Defines how the browser distributes space between and around content items along the main axis of a flex container. | - -### Flex items - -You can use the `flex` property to set how a flex item will grow or shrink to fit the available space in its flex container. It is a shorthand for `flex-grow`, `flex-shrink`, and `flex-basis`. For most purposes, you should set `flex` to one of the following values: `auto`, `initial`, `none`, or a positive unitless number. - -#### Values - -##### `initial` -The item is sized according to its `width` and `height` properties. It shrinks to its minimum size to fit the container, but does not grow to absorb any extra free space in the flex container. This is equivalent to setting `flex: 0 1 auto`. - -##### `auto` -The item is sized according to its `width` and `height` properties, but grows to absorb any extra free space in the flex container, and shrinks to its minimum size to fit the container. This is equivalent to setting `flex: 1 1 auto`. - -##### `none` -The item is sized according to its `width` and `height` properties. It is fully inflexible: it neither shrinks nor grows in relation to the flex container. This is equivalent to setting `flex: 0 0 auto`. - -To see the effect of these values, try resizing the flex containers below: - -```jsx noInline -const FlexItem = (props) => ( - -); - -function Example() { - return ( - <> - - auto - auto - auto - - - auto - initial - initial - - - auto - auto - none - - - initial - none - none - - - 4 - 2 - 1 - - - ); -} - -render(); -``` - -### The `flexDirection` property - -```jsx noInline -const FlexItem = (props) => ( - -); - -function Example() { - const [value, setValue] = React.useState('row'); - - return ( - <> - - - - - - - 
-        {``}
-
- - One - Two - Three - - - ); -} - -render(); -``` - -### The `flexWrap` property - -```jsx noInline -const FlexItem = (props) => ( - -); - -function Example() { - const [value, setValue] = React.useState('nowrap'); - - return ( - <> - - - - - - 
-        {``}
-
- - One - Two - Three - Four - Five - Six - - - ); -} - -render(); -``` - -### The `alignItems` property - -```jsx noInline -const FlexItem = (props) => ( - -); - -function Example() { - const [value, setValue] = React.useState('stretch'); - - return ( - <> - - - - - - - 
-        {``}
-
- - One - Two - Three - - - ); -} - -render(); -``` - -### The `justifyContent` property - -```jsx noInline -const FlexItem = (props) => ( - -); - -function Example() { - const [value, setValue] = React.useState('start'); - - return ( - <> - - - - - - - - - 
-        {``}
-
- - One - Two - Three - - - ); -} - -render(); -``` - -## Props - -### Flex - -| Name | Type | Default | Description | -| :--- | :--- | :------ | :---------- | -| children | ReactNode | | | -| align | string | | A shorthand of the `alignItems` property that sets the alignment of flex items along the cross-axis of the flex container. Valid values include `flex-start`, `flex-end`, `center`, `baseline`, and `stretch`. | -| direction | string | | A shorthand of the `flexDirection` property that sets how flex items are placed in the flex container. Valid values include `row`, `row-reverse`, `column`, and `column-reverse`. | -| wrap | string | | A shorthand of the `flexWrap` property that sets whether flex items are forced onto one line or can wrap onto multiple lines. Valid values include `nowrap`, `wrap`, and `wrap-reverse`. | -| justify | string | | A shorthand of the `justifyContent` property that defines how the browser distributes space between and around content items along themain axis of a flex container. Valid values include `flex-start`, `flex-end`, `center`, `space-between`, `space-around`, and `space-evenly`. | diff --git a/packages/react-docs/pages/components/flex/align-items.js b/packages/react-docs/pages/components/flex/align-items.js new file mode 100644 index 0000000000..f8bf1abce8 --- /dev/null +++ b/packages/react-docs/pages/components/flex/align-items.js @@ -0,0 +1,31 @@ +import { Box, Button, Flex, Stack } from '@tonic-ui/react'; +import React, { useState } from 'react'; + +const FlexItem = (props) => ( + +); + +const App = () => { + const [value, setValue] = useState('stretch'); + + return ( + <> + + + + + + + 
+        {``}
+
+ + One + Two + Three + + + ); +}; + +export default App; diff --git a/packages/react-docs/pages/components/flex/flex-direction.js b/packages/react-docs/pages/components/flex/flex-direction.js new file mode 100644 index 0000000000..b8a2ac8e55 --- /dev/null +++ b/packages/react-docs/pages/components/flex/flex-direction.js @@ -0,0 +1,31 @@ +import { Box, Button, Flex, Stack } from '@tonic-ui/react'; +import React, { useState } from 'react'; + +const FlexItem = (props) => ( + +); + +const App = () => { + const [value, setValue] = useState('row'); + + return ( + <> + + + + + + + 
+        {``}
+
+ + One + Two + Three + + + ); +}; + +export default App; diff --git a/packages/react-docs/pages/components/flex/flex-none.js b/packages/react-docs/pages/components/flex/flex-none.js new file mode 100644 index 0000000000..02eed51264 --- /dev/null +++ b/packages/react-docs/pages/components/flex/flex-none.js @@ -0,0 +1,40 @@ +import { Box, Flex } from '@tonic-ui/react'; +import React from 'react'; + +const FlexItem = (props) => ( + +); + +const App = () => { + return ( + <> + + auto + auto + auto + + + auto + initial + initial + + + auto + auto + none + + + initial + none + none + + + 4 + 2 + 1 + + + ); +}; + +export default App; diff --git a/packages/react-docs/pages/components/flex/flex-wrap.js b/packages/react-docs/pages/components/flex/flex-wrap.js new file mode 100644 index 0000000000..b25458146f --- /dev/null +++ b/packages/react-docs/pages/components/flex/flex-wrap.js @@ -0,0 +1,33 @@ +import { Box, Button, Flex, Stack } from '@tonic-ui/react'; +import React, { useState } from 'react'; + +const FlexItem = (props) => ( + +); + +const App = () => { + const [value, setValue] = useState('nowrap'); + + return ( + <> + + + + + + 
+        {``}
+
+ + One + Two + Three + Four + Five + Six + + + ); +}; + +export default App; diff --git a/packages/react-docs/pages/components/flex/index.page.mdx b/packages/react-docs/pages/components/flex/index.page.mdx new file mode 100644 index 0000000000..379f3022cd --- /dev/null +++ b/packages/react-docs/pages/components/flex/index.page.mdx @@ -0,0 +1,67 @@ +# Flex + +`Flex` is a [`Box`](box) with `display: flex` and comes with helpful style shorthand props. + +## Import + +```js +import { Flex } from '@tonic-ui/react'; +``` + +## Usage + +Flex provides the following style shorthand props: + +| Shorthand Prop | Style Prop | CSS Property | Description | +| :------------- | :--------- | :----------- | :---------- | +| align | alignItems | [align-items](https://developer.mozilla.org/en-US/docs/Web/CSS/align-items) | Sets the `align-self` value on all direct children as a group. | +| direction | flexDirection | [flex-direction](https://developer.mozilla.org/en-US/docs/Web/CSS/flex-direction) | Sets how flex items are placed in the flex container. | +| wrap | flexWrap | [flex-wrap](https://developer.mozilla.org/en-US/docs/Web/CSS/flex-wrap) | Sets whether flex items are forced onto one line or can wrap onto multiple lines. | +| justify | justifyContent | [justify-content](https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content) | Defines how the browser distributes space between and around content items along the main axis of a flex container. | + +### Flex items + +You can use the `flex` property to set how a flex item will grow or shrink to fit the available space in its flex container. It is a shorthand for `flex-grow`, `flex-shrink`, and `flex-basis`. For most purposes, you should set `flex` to one of the following values: `auto`, `initial`, `none`, or a positive unitless number. + +#### Values + +##### `initial` +The item is sized according to its `width` and `height` properties. It shrinks to its minimum size to fit the container, but does not grow to absorb any extra free space in the flex container. This is equivalent to setting `flex: 0 1 auto`. + +##### `auto` +The item is sized according to its `width` and `height` properties, but grows to absorb any extra free space in the flex container, and shrinks to its minimum size to fit the container. This is equivalent to setting `flex: 1 1 auto`. + +##### `none` +The item is sized according to its `width` and `height` properties. It is fully inflexible: it neither shrinks nor grows in relation to the flex container. This is equivalent to setting `flex: 0 0 auto`. + +To see the effect of these values, try resizing the flex containers below: + +{render('./flex-none')} + +### The `flexDirection` property + +{render('./flex-direction')} + +### The `flexWrap` property + +{render('./flex-wrap')} + +### The `alignItems` property + +{render('./align-items')} + +### The `justifyContent` property + +{render('./justify-content')} + +## Props + +### Flex + +| Name | Type | Default | Description | +| :--- | :--- | :------ | :---------- | +| children | ReactNode | | | +| align | string | | A shorthand of the `alignItems` property that sets the alignment of flex items along the cross-axis of the flex container. Valid values include `flex-start`, `flex-end`, `center`, `baseline`, and `stretch`. | +| direction | string | | A shorthand of the `flexDirection` property that sets how flex items are placed in the flex container. Valid values include `row`, `row-reverse`, `column`, and `column-reverse`. | +| wrap | string | | A shorthand of the `flexWrap` property that sets whether flex items are forced onto one line or can wrap onto multiple lines. Valid values include `nowrap`, `wrap`, and `wrap-reverse`. | +| justify | string | | A shorthand of the `justifyContent` property that defines how the browser distributes space between and around content items along themain axis of a flex container. Valid values include `flex-start`, `flex-end`, `center`, `space-between`, `space-around`, and `space-evenly`. | diff --git a/packages/react-docs/pages/components/flex/justify-content.js b/packages/react-docs/pages/components/flex/justify-content.js new file mode 100644 index 0000000000..61b6fcafe1 --- /dev/null +++ b/packages/react-docs/pages/components/flex/justify-content.js @@ -0,0 +1,33 @@ +import { Box, Button, Flex, Stack } from '@tonic-ui/react'; +import React, { useState } from 'react'; + +const FlexItem = (props) => ( + +); + +const App = () => { + const [value, setValue] = useState('start'); + + return ( + <> + + + + + + + + + 
+        {``}
+
+ + One + Two + Three + + + ); +}; + +export default App; diff --git a/packages/react-docs/pages/components/grid.page.mdx b/packages/react-docs/pages/components/grid.page.mdx deleted file mode 100644 index d1cf0a69a7..0000000000 --- a/packages/react-docs/pages/components/grid.page.mdx +++ /dev/null @@ -1,543 +0,0 @@ -# Grid - -`Grid` is a [`Box`](box) with `display: grid` and comes with helpful style shorthand props. - -## Import - -```js -import { Grid } from '@tonic-ui/react'; -``` - -## Usage - -Grid provides the following style shorthand props: - -| Shorthand Prop | Style Prop | CSS Property | Description | -| :------------- | :--------- | :----------- | ----------- | -| gap | gridGap | [grid-gap](https://developer.mozilla.org/en-US/docs/Web/CSS/gap) | Sets the gaps (gutters) between rows and columns. It is a shorthand for `row-gap` and `column-gap`. | -| rowGap | gridRowGap | [grid-row-gap](https://developer.mozilla.org/en-US/docs/Web/CSS/row-gap) | Sets the size of the gap (gutter) between an element's grid rows. | -| columnGap | gridColumnGap | [grid-column-gap](https://developer.mozilla.org/en-US/docs/Web/CSS/column-gap) | Sets the size of the gap (gutter) between an element's columns. | -| row | gridRow | [grid-row](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row) | a shorthand property for `grid-row-start` and `grid-row-end`. | -| column | gridColumn | [grid-column](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column) | A shorthand property for `grid-column-start` and `grid-column-end`. | -| area | gridArea | [grid-area](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-area) | A shorthand property for `grid-row-start`, `grid-column-start`, `grid-row-end` and `grid-column-end`. | -| autoFlow | gridAutoFlow | [grid-auto-flow](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-auto-flow) | Controls how the auto-placement algorithm works. | -| autoRows | gridAutoRows | [grid-auto-rows](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-auto-rows) | Specifies the size of an implicitly-created grid row track or pattern of tracks. | -| autoColumns | gridAutoColumns | [grid-auto-columns](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-auto-columns) | Specifies the size of an implicitly-created grid column track or pattern of tracks. | -| templateRows | gridTemplateRows | [grid-template-rows](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-rows) | Defines the line names and track sizing functions of the grid rows. | -| templateColumns | gridTemplateColumns | [grid-template-columns](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-columns) | Defines the line names and track sizing functions of the grid columns. | -| templateAreas | gridTemplateAreas | [grid-template-areas](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-areas) | Specifies named grid areas. | - -### The `gap` (`gridGap`) property - -```jsx noInline -const GridItem = (props) => ( - -); - -function Example() { - const [value, setValue] = React.useState('0'); - - return ( - <> - - - - - - - - 
-        {``}
-
- - One - Two - Three - Four - Five - - - ); -} - -render(); -``` - -### The `rowGap` (`gridRowGap`) property - -```jsx noInline -const GridItem = (props) => ( - -); - -function Example() { - const [value, setValue] = React.useState('0'); - - return ( - <> - - - - - - - 
-        {``}
-
- - One - Two - Three - Four - Five - - - ); -} - -render(); -``` - -### The `columnGap` (`gridColumnGap`) property - -```jsx noInline -const GridItem = (props) => ( - -); - -function Example() { - const [value, setValue] = React.useState('0'); - - return ( - <> - - - - - - - 
-        {``}
-
- - One - Two - Three - Four - Five - - - ); -} - -render(); -``` - -### The `row` (`gridRow`) property - -```jsx noInline -const GridItem = (props) => ( - -); - -function Example() { - const [value, setValue] = React.useState('1'); - - return ( - <> - - - - - - - - One - Two - Three - - - ); -} - -render(); -``` - -### The `column` (`gridColumn`) property - -```jsx noInline -const GridItem = (props) => ( - -); - -function Example() { - const [value, setValue] = React.useState('1'); - - return ( - <> - - - - - - - - One - Two - Three - - - ); -} - -render(); -``` - -### The `area` (`gridArea`) property - -```jsx noInline -const GridItem = (props) => ( - -); - -function Example() { - const [value, setValue] = React.useState('a'); - - return ( - <> - - - - - - - - Example - - - ); -} - -render(); -``` - -### The `autoFlow` (`gridAutoFlow`) property - -```jsx noInline -const GridItem = (props) => ( - -); - -function Example() { - const [value, setValue] = React.useState('row'); - - return ( - <> - - - - - - 
-        {``}
-
- - One - Two - Three - Four - Five - - - ); -} - -render(); -``` - -### The `autoRows` (`gridAutoRows`) property - -```jsx noInline -const GridItem = (props) => ( - -); - -function Example() { - const [value, setValue] = React.useState('auto'); - - return ( - <> - - - - - - - 
-        {``}
-
- - One - Two - Three - Four - - - - ); -} - -render(); -``` - -### The `autoColumns` (`gridAutoColumns`) property - -```jsx noInline -const GridItem = (props) => ( - -); - -function Example() { - const [value, setValue] = React.useState('auto'); - - return ( - <> - - - - - - - 
-        {``}
-
- - One - Two - Three - Four - Five - - - ); -} - -render(); -``` - -### The `templateRows` (`gridTemplateRows`) property - -```jsx noInline -const GridItem = (props) => ( - -); - -function Example() { - const [value, setValue] = React.useState('auto'); - - return ( - <> - - - - - - - 
-        {``}
-
- - One - Two - Three - Four - Five - - - ); -} - -render(); -``` - -### The `templateColumns` (`gridTemplateColumns`) property - -```jsx noInline -const GridItem = (props) => ( - -); - -function Example() { - const [value, setValue] = React.useState('4rem 4rem'); - - return ( - <> - - - - - - - 
-        {``}
-
- - One - Two - Three - Four - Five - - - ); -} - -render(); -``` - -### The `templateAreas` (`gridTemplateAreas`) property - -```jsx noInline -const GridItem = (props) => ( - -); - -function Example() { - const [value, setValue] = React.useState('"a a a" "b c c" "b c c"'); - - return ( - <> - - - - - - 
-        {``}
-
- - One (a) - Two (b) - Three (c) - - - ); -} - -render(); -``` - -## Props - -### Grid - -| Name | Type | Default | Description | -| :--- | :--- | :------ | :---------- | -| children | ReactNode | | | -| gap | string | | A shorthand of the `gridGap` property that sets the gaps (gutters) between rows and columns. | -| rowGap | string | | A shorthand of the `gridRowGap` property that sets the size of the gap (gutter) between an element's grid rows. | -| columnGap | string | | A shorthand of the `gridColumnGap` property that sets the size of the gap (gutter) between an element's columns. | -| row | string | | A shorthand of the `gridRow` property that specifies the grid items\' location in terms of the grid\'s rows. | -| column | string | | A shorthand of the `gridColumn` property that specifies the grid items\' location in terms of the grid\'s columns. | -| area | string | | A shorthand of the `gridArea` property that specifies a grid item's size and location within the grid by referencing a named grid area. | -| autoFlow | string | | A shorthand of the `gridAutoFlow` property that controls how the auto-placement algorithm works. | -| autoRows | string | | A shorthand of the `gridAutoRows` property that specifies the size of an implicitly-created grid row track or pattern of tracks. | -| autoColumns | string | | A shorthand of the `gridAutoColumns` property that specifies the size of an implicitly-created grid column track or pattern of tracks. | -| templateRows | string | | A shorthand of the `gridTemplateRows` property that defines the line names and track sizing functions of the grid rows. | -| templateColumns | string | | A shorthand of the `gridTemplateColumns` property that defines the line names and track sizing functions of the grid columns. | -| templateAreas | string | | A shorthand of the `gridTemplateAreas` property that specifies named grid areas. | diff --git a/packages/react-docs/pages/components/grid/grid-area.js b/packages/react-docs/pages/components/grid/grid-area.js new file mode 100644 index 0000000000..78d1dc3de1 --- /dev/null +++ b/packages/react-docs/pages/components/grid/grid-area.js @@ -0,0 +1,37 @@ +import { Button, Grid, Stack } from '@tonic-ui/react'; +import React, { useState } from 'react'; + +const GridItem = (props) => ( + +); + +const App = () => { + const [value, setValue] = useState('a'); + + return ( + <> + + + + + + + + Example + + + ); +}; + +export default App; diff --git a/packages/react-docs/pages/components/grid/grid-auto-columns.js b/packages/react-docs/pages/components/grid/grid-auto-columns.js new file mode 100644 index 0000000000..fb98679038 --- /dev/null +++ b/packages/react-docs/pages/components/grid/grid-auto-columns.js @@ -0,0 +1,38 @@ +import { Button, Grid, Stack } from '@tonic-ui/react'; +import React, { useState } from 'react'; + +const GridItem = (props) => ( + +); + +const App = () => { + const [value, setValue] = useState('auto'); + + return ( + <> + + + + + + + 
+        {``}
+
+ + One + Two + Three + Four + Five + + + ); +}; + +export default App; diff --git a/packages/react-docs/pages/components/grid/grid-auto-flow.js b/packages/react-docs/pages/components/grid/grid-auto-flow.js new file mode 100644 index 0000000000..34815b42f1 --- /dev/null +++ b/packages/react-docs/pages/components/grid/grid-auto-flow.js @@ -0,0 +1,39 @@ +import { Button, Grid, Stack } from '@tonic-ui/react'; +import React, { useState } from 'react'; + +const GridItem = (props) => ( + +); + +const App = () => { + const [value, setValue] = useState('row'); + + return ( + <> + + + + + + 
+        {``}
+
+ + One + Two + Three + Four + Five + + + ); +}; + +export default App; diff --git a/packages/react-docs/pages/components/grid/grid-auto-rows.js b/packages/react-docs/pages/components/grid/grid-auto-rows.js new file mode 100644 index 0000000000..125fef6177 --- /dev/null +++ b/packages/react-docs/pages/components/grid/grid-auto-rows.js @@ -0,0 +1,39 @@ +import { Button, Grid, Stack } from '@tonic-ui/react'; +import React, { useState } from 'react'; + +const GridItem = (props) => ( + +); + +const App = () => { + const [value, setValue] = useState('auto'); + + return ( + <> + + + + + + + 
+        {``}
+
+ + One + Two + Three + Four + + + + ); +}; + +export default App; diff --git a/packages/react-docs/pages/components/grid/grid-column-gap.js b/packages/react-docs/pages/components/grid/grid-column-gap.js new file mode 100644 index 0000000000..dc4d735a84 --- /dev/null +++ b/packages/react-docs/pages/components/grid/grid-column-gap.js @@ -0,0 +1,39 @@ +import { Button, Grid, Stack } from '@tonic-ui/react'; +import React, { useState } from 'react'; + +const GridItem = (props) => ( + +); + +const App = () => { + const [value, setValue] = useState('0'); + + return ( + <> + + + + + + + 
+        {``}
+
+ + One + Two + Three + Four + Five + + + ); +}; + +export default App; diff --git a/packages/react-docs/pages/components/grid/grid-column.js b/packages/react-docs/pages/components/grid/grid-column.js new file mode 100644 index 0000000000..78c546664e --- /dev/null +++ b/packages/react-docs/pages/components/grid/grid-column.js @@ -0,0 +1,34 @@ +import { Button, Grid, Stack } from '@tonic-ui/react'; +import React, { useState } from 'react'; + +const GridItem = (props) => ( + +); + +const App = () => { + const [value, setValue] = useState('1'); + + return ( + <> + + + + + + + + One + Two + Three + + + ); +}; + +export default App; diff --git a/packages/react-docs/pages/components/grid/grid-gap.js b/packages/react-docs/pages/components/grid/grid-gap.js new file mode 100644 index 0000000000..b1a4ca8952 --- /dev/null +++ b/packages/react-docs/pages/components/grid/grid-gap.js @@ -0,0 +1,40 @@ +import { Button, Grid, Stack } from '@tonic-ui/react'; +import React, { useState } from 'react'; + +const GridItem = (props) => ( + +); + +const App = () => { + const [value, setValue] = useState('0'); + + return ( + <> + + + + + + + + 
+        {``}
+
+ + One + Two + Three + Four + Five + + + ); +}; + +export default App; diff --git a/packages/react-docs/pages/components/grid/grid-row-gap.js b/packages/react-docs/pages/components/grid/grid-row-gap.js new file mode 100644 index 0000000000..fc221cb33e --- /dev/null +++ b/packages/react-docs/pages/components/grid/grid-row-gap.js @@ -0,0 +1,39 @@ +import { Button, Grid, Stack } from '@tonic-ui/react'; +import React, { useState } from 'react'; + +const GridItem = (props) => ( + +); + +const App = () => { + const [value, setValue] = useState('0'); + + return ( + <> + + + + + + + 
+        {``}
+
+ + One + Two + Three + Four + Five + + + ); +}; + +export default App; diff --git a/packages/react-docs/pages/components/grid/grid-row.js b/packages/react-docs/pages/components/grid/grid-row.js new file mode 100644 index 0000000000..f2728dad30 --- /dev/null +++ b/packages/react-docs/pages/components/grid/grid-row.js @@ -0,0 +1,34 @@ +import { Button, Grid, Stack } from '@tonic-ui/react'; +import React, { useState } from 'react'; + +const GridItem = (props) => ( + +); + +const App = () => { + const [value, setValue] = useState('1'); + + return ( + <> + + + + + + + + One + Two + Three + + + ); +}; + +export default App; diff --git a/packages/react-docs/pages/components/grid/grid-template-areas.js b/packages/react-docs/pages/components/grid/grid-template-areas.js new file mode 100644 index 0000000000..f8fccc0253 --- /dev/null +++ b/packages/react-docs/pages/components/grid/grid-template-areas.js @@ -0,0 +1,56 @@ +/* eslint-disable react/no-unescaped-entities */ +import { Box, Button, Grid, Stack } from '@tonic-ui/react'; +import React, { useState } from 'react'; + +const GridItem = (props) => ( + +); + +const App = () => { + const [value, setValue] = useState('"a a a" "b c c" "b c c"'); + + return ( + <> + + + + + + 
+        {``}
+
+ + One (a) + Two (b) + Three (c) + + + ); +}; + +export default App; diff --git a/packages/react-docs/pages/components/grid/grid-template-columns.js b/packages/react-docs/pages/components/grid/grid-template-columns.js new file mode 100644 index 0000000000..dab0c93174 --- /dev/null +++ b/packages/react-docs/pages/components/grid/grid-template-columns.js @@ -0,0 +1,38 @@ +import { Button, Grid, Stack } from '@tonic-ui/react'; +import React, { useState } from 'react'; + +const GridItem = (props) => ( + +); + +const App = () => { + const [value, setValue] = useState('4rem 4rem'); + + return ( + <> + + + + + + + 
+        {``}
+
+ + One + Two + Three + Four + Five + + + ); +}; + +export default App; diff --git a/packages/react-docs/pages/components/grid/grid-template-rows.js b/packages/react-docs/pages/components/grid/grid-template-rows.js new file mode 100644 index 0000000000..b6dfbf39f1 --- /dev/null +++ b/packages/react-docs/pages/components/grid/grid-template-rows.js @@ -0,0 +1,39 @@ +import { Button, Grid, Stack } from '@tonic-ui/react'; +import React, { useState } from 'react'; + +const GridItem = (props) => ( + +); + +const App = () => { + const [value, setValue] = useState('auto'); + + return ( + <> + + + + + + + 
+        {``}
+
+ + One + Two + Three + Four + Five + + + ); +}; + +export default App; diff --git a/packages/react-docs/pages/components/grid/index.page.mdx b/packages/react-docs/pages/components/grid/index.page.mdx new file mode 100644 index 0000000000..134cdcd75d --- /dev/null +++ b/packages/react-docs/pages/components/grid/index.page.mdx @@ -0,0 +1,96 @@ +# Grid + +`Grid` is a [`Box`](box) with `display: grid` and comes with helpful style shorthand props. + +## Import + +```js +import { Grid } from '@tonic-ui/react'; +``` + +## Usage + +Grid provides the following style shorthand props: + +| Shorthand Prop | Style Prop | CSS Property | Description | +| :------------- | :--------- | :----------- | ----------- | +| gap | gridGap | [grid-gap](https://developer.mozilla.org/en-US/docs/Web/CSS/gap) | Sets the gaps (gutters) between rows and columns. It is a shorthand for `row-gap` and `column-gap`. | +| rowGap | gridRowGap | [grid-row-gap](https://developer.mozilla.org/en-US/docs/Web/CSS/row-gap) | Sets the size of the gap (gutter) between an element's grid rows. | +| columnGap | gridColumnGap | [grid-column-gap](https://developer.mozilla.org/en-US/docs/Web/CSS/column-gap) | Sets the size of the gap (gutter) between an element's columns. | +| row | gridRow | [grid-row](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row) | a shorthand property for `grid-row-start` and `grid-row-end`. | +| column | gridColumn | [grid-column](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column) | A shorthand property for `grid-column-start` and `grid-column-end`. | +| area | gridArea | [grid-area](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-area) | A shorthand property for `grid-row-start`, `grid-column-start`, `grid-row-end` and `grid-column-end`. | +| autoFlow | gridAutoFlow | [grid-auto-flow](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-auto-flow) | Controls how the auto-placement algorithm works. | +| autoRows | gridAutoRows | [grid-auto-rows](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-auto-rows) | Specifies the size of an implicitly-created grid row track or pattern of tracks. | +| autoColumns | gridAutoColumns | [grid-auto-columns](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-auto-columns) | Specifies the size of an implicitly-created grid column track or pattern of tracks. | +| templateRows | gridTemplateRows | [grid-template-rows](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-rows) | Defines the line names and track sizing functions of the grid rows. | +| templateColumns | gridTemplateColumns | [grid-template-columns](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-columns) | Defines the line names and track sizing functions of the grid columns. | +| templateAreas | gridTemplateAreas | [grid-template-areas](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-areas) | Specifies named grid areas. | + +### The `gap` (`gridGap`) property + +{render('./grid-gap')} + +### The `rowGap` (`gridRowGap`) property + +{render('./grid-row-gap')} + +### The `columnGap` (`gridColumnGap`) property + +{render('./grid-column-gap')} + +### The `row` (`gridRow`) property + +{render('./grid-row')} + +### The `column` (`gridColumn`) property + +{render('./grid-column')} + +### The `area` (`gridArea`) property + +{render('./grid-area')} + +### The `autoFlow` (`gridAutoFlow`) property + +{render('./grid-auto-flow')} + +### The `autoRows` (`gridAutoRows`) property + +{render('./grid-auto-rows')} + +### The `autoColumns` (`gridAutoColumns`) property + +{render('./grid-auto-columns')} + +### The `templateRows` (`gridTemplateRows`) property + +{render('./grid-template-rows')} + +### The `templateColumns` (`gridTemplateColumns`) property + +{render('./grid-template-columns')} + +### The `templateAreas` (`gridTemplateAreas`) property + +{render('./grid-template-areas')} + +## Props + +### Grid + +| Name | Type | Default | Description | +| :--- | :--- | :------ | :---------- | +| children | ReactNode | | | +| gap | string | | A shorthand of the `gridGap` property that sets the gaps (gutters) between rows and columns. | +| rowGap | string | | A shorthand of the `gridRowGap` property that sets the size of the gap (gutter) between an element's grid rows. | +| columnGap | string | | A shorthand of the `gridColumnGap` property that sets the size of the gap (gutter) between an element's columns. | +| row | string | | A shorthand of the `gridRow` property that specifies the grid items\' location in terms of the grid\'s rows. | +| column | string | | A shorthand of the `gridColumn` property that specifies the grid items\' location in terms of the grid\'s columns. | +| area | string | | A shorthand of the `gridArea` property that specifies a grid item's size and location within the grid by referencing a named grid area. | +| autoFlow | string | | A shorthand of the `gridAutoFlow` property that controls how the auto-placement algorithm works. | +| autoRows | string | | A shorthand of the `gridAutoRows` property that specifies the size of an implicitly-created grid row track or pattern of tracks. | +| autoColumns | string | | A shorthand of the `gridAutoColumns` property that specifies the size of an implicitly-created grid column track or pattern of tracks. | +| templateRows | string | | A shorthand of the `gridTemplateRows` property that defines the line names and track sizing functions of the grid rows. | +| templateColumns | string | | A shorthand of the `gridTemplateColumns` property that defines the line names and track sizing functions of the grid columns. | +| templateAreas | string | | A shorthand of the `gridTemplateAreas` property that specifies named grid areas. | diff --git a/packages/react-docs/pages/components/image/basic.js b/packages/react-docs/pages/components/image/basic.js new file mode 100644 index 0000000000..5752658e52 --- /dev/null +++ b/packages/react-docs/pages/components/image/basic.js @@ -0,0 +1,17 @@ +import { Image } from '@tonic-ui/react'; +import React from 'react'; + +const App = () => { + const imageSrc = 'https://github.githubassets.com/images/modules/logos_page/GitHub-Mark.png'; + + return ( + + ); +}; + +export default App; diff --git a/packages/react-docs/pages/components/image/index.page.mdx b/packages/react-docs/pages/components/image/index.page.mdx new file mode 100644 index 0000000000..1dd813cc87 --- /dev/null +++ b/packages/react-docs/pages/components/image/index.page.mdx @@ -0,0 +1,28 @@ +# Image + +`Image` is an `` tag replacement for displaying a static image. + +## Import + +```js +import { Image } from '@tonic-ui/react'; +``` + +## Usage + +### Basic + +{render('./basic')} + +### Inline SVG + +{render('./inline-svg')} + +## Props + +### Image + +| Name | Type | Default | Description | +| :--- | :--- | :------ | :---------- | +| alt | string | | Specifies an alternate text for the image, if the image for some reason cannot be displayed. | +| src | string | | Specifies the path to the image. | diff --git a/packages/react-docs/pages/components/image.page.mdx b/packages/react-docs/pages/components/image/inline-svg.js similarity index 70% rename from packages/react-docs/pages/components/image.page.mdx rename to packages/react-docs/pages/components/image/inline-svg.js index f71233dcba..429f501e28 100644 --- a/packages/react-docs/pages/components/image.page.mdx +++ b/packages/react-docs/pages/components/image/inline-svg.js @@ -1,37 +1,12 @@ -# Image - -`Image` is an `` tag replacement for displaying a static image. - -## Import - -```js import { Image } from '@tonic-ui/react'; -``` - -## Usage - -```jsx -function Example() { - const imageSrc = 'https://github.githubassets.com/images/modules/logos_page/GitHub-Mark.png'; - - return ( - - ); -} -``` - -### Inline SVG with data URI +import React from 'react'; -```jsx -function Example() { +const App = () => { const imageSrc = 'data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/PjxzdmcgaGVpZ2h0PSIxMDI0IiB3aWR0aD0iMTAyNCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNNTEyIDBDMjI5LjI1IDAgMCAyMjkuMjUgMCA1MTJjMCAyMjYuMjUgMTQ2LjY4OCA0MTguMTI1IDM1MC4xNTYgNDg1LjgxMiAyNS41OTQgNC42ODggMzQuOTM4LTExLjEyNSAzNC45MzgtMjQuNjI1IDAtMTIuMTg4LTAuNDY5LTUyLjU2Mi0wLjcxOS05NS4zMTJDMjQyIDkwOC44MTIgMjExLjkwNiA4MTcuNSAyMTEuOTA2IDgxNy41Yy0yMy4zMTItNTkuMTI1LTU2Ljg0NC03NC44NzUtNTYuODQ0LTc0Ljg3NS00Ni41MzEtMzEuNzUgMy41My0zMS4xMjUgMy41My0zMS4xMjUgNTEuNDA2IDMuNTYyIDc4LjQ3IDUyLjc1IDc4LjQ3IDUyLjc1IDQ1LjY4OCA3OC4yNSAxMTkuODc1IDU1LjYyNSAxNDkgNDIuNSA0LjY1NC0zMyAxNy45MDQtNTUuNjI1IDMyLjUtNjguMzc1QzMwNC45MDYgNzI1LjQzOCAxODUuMzQ0IDY4MS41IDE4NS4zNDQgNDg1LjMxMmMwLTU1LjkzOCAxOS45NjktMTAxLjU2MiA1Mi42NTYtMTM3LjQwNi01LjIxOS0xMy0yMi44NDQtNjUuMDk0IDUuMDYyLTEzNS41NjIgMCAwIDQyLjkzOC0xMy43NSAxNDAuODEyIDUyLjUgNDAuODEyLTExLjQwNiA4NC41OTQtMTcuMDMxIDEyOC4xMjUtMTcuMjE5IDQzLjUgMC4xODggODcuMzEyIDUuODc1IDEyOC4xODggMTcuMjgxIDk3LjY4OC02Ni4zMTIgMTQwLjY4OC01Mi41IDE0MC42ODgtNTIuNSAyOCA3MC41MzEgMTAuMzc1IDEyMi41NjIgNS4xMjUgMTM1LjUgMzIuODEyIDM1Ljg0NCA1Mi42MjUgODEuNDY5IDUyLjYyNSAxMzcuNDA2IDAgMTk2LjY4OC0xMTkuNzUgMjQwLTIzMy44MTIgMjUyLjY4OCAxOC40MzggMTUuODc1IDM0Ljc1IDQ3IDM0Ljc1IDk0Ljc1IDAgNjguNDM4LTAuNjg4IDEyMy42MjUtMC42ODggMTQwLjUgMCAxMy42MjUgOS4zMTIgMjkuNTYyIDM1LjI1IDI0LjU2MkM4NzcuNDM4IDkzMCAxMDI0IDczOC4xMjUgMTAyNCA1MTIgMTAyNCAyMjkuMjUgNzk0Ljc1IDAgNTEyIDB6Ii8+PC9zdmc+'; return ( ); -} -``` - -## Props - -### Image +}; -| Name | Type | Default | Description | -| :--- | :--- | :------ | :---------- | -| alt | string | | Specifies an alternate text for the image, if the image for some reason cannot be displayed. | -| src | string | | Specifies the path to the image. | +export default App; diff --git a/packages/react-docs/pages/components/input-base.page.mdx b/packages/react-docs/pages/components/input-base.page.mdx deleted file mode 100644 index ec077e9200..0000000000 --- a/packages/react-docs/pages/components/input-base.page.mdx +++ /dev/null @@ -1,86 +0,0 @@ -# InputBase - -`InputBase` does not have appearance settings including default border, color, outline, and padding. It aims to be a simple building block for creating an input. - -## Import - -```js -import { InputBase } from '@tonic-ui/react'; -``` - -## Usage - -```jsx - -``` - -### Attributes - -Standard input attributes are supported, e.g., `type`, `disabled`, `readOnly`, `required`, etc. - -#### `type` - -```jsx - - - Name: - - - - - - Password: - - - - - -``` - -#### `disabled` - -```jsx - - - - -``` - -#### `readOnly` - -```jsx - - - - -``` - -#### `required` - -```jsx - -``` - -## Props - -### InputBase - -| Name | Type | Default | Description | -| :--- | :--- | :------ | :---------- | -| disabled | boolean | | If `true`, the user cannot interact with the control. | -| readOnly | boolean | | If `true`, prevents the value of the input from being edited. | -| error | boolean | | If `true`, the input will indicate an error. | diff --git a/packages/react-docs/pages/components/input-base/attribute-disabled.js b/packages/react-docs/pages/components/input-base/attribute-disabled.js new file mode 100644 index 0000000000..a6603746ba --- /dev/null +++ b/packages/react-docs/pages/components/input-base/attribute-disabled.js @@ -0,0 +1,11 @@ +import { InputBase, Stack } from '@tonic-ui/react'; +import React from 'react'; + +const App = () => ( + + + + +); + +export default App; diff --git a/packages/react-docs/pages/components/input-base/attribute-readonly.js b/packages/react-docs/pages/components/input-base/attribute-readonly.js new file mode 100644 index 0000000000..69130e3ad3 --- /dev/null +++ b/packages/react-docs/pages/components/input-base/attribute-readonly.js @@ -0,0 +1,11 @@ +import { InputBase, Stack } from '@tonic-ui/react'; +import React from 'react'; + +const App = () => ( + + + + +); + +export default App; diff --git a/packages/react-docs/pages/components/input-base/attribute-required.js b/packages/react-docs/pages/components/input-base/attribute-required.js new file mode 100644 index 0000000000..79f13fb89a --- /dev/null +++ b/packages/react-docs/pages/components/input-base/attribute-required.js @@ -0,0 +1,18 @@ +import { InputBase } from '@tonic-ui/react'; +import React from 'react'; + +const App = () => ( + +); + +export default App; diff --git a/packages/react-docs/pages/components/input-base/attribute-type.js b/packages/react-docs/pages/components/input-base/attribute-type.js new file mode 100644 index 0000000000..18feeca2bc --- /dev/null +++ b/packages/react-docs/pages/components/input-base/attribute-type.js @@ -0,0 +1,25 @@ +import { Grid, InputBase, TextLabel } from '@tonic-ui/react'; +import React from 'react'; + +const App = () => ( + + + Name: + + + + + + Password: + + + + + +); + +export default App; diff --git a/packages/react-docs/pages/components/input-base/basic.js b/packages/react-docs/pages/components/input-base/basic.js new file mode 100644 index 0000000000..5a2991ad48 --- /dev/null +++ b/packages/react-docs/pages/components/input-base/basic.js @@ -0,0 +1,8 @@ +import { InputBase } from '@tonic-ui/react'; +import React from 'react'; + +const App = () => ( + +); + +export default App; diff --git a/packages/react-docs/pages/components/input-base/index.page.mdx b/packages/react-docs/pages/components/input-base/index.page.mdx new file mode 100644 index 0000000000..ebcf21f64a --- /dev/null +++ b/packages/react-docs/pages/components/input-base/index.page.mdx @@ -0,0 +1,43 @@ +# InputBase + +`InputBase` does not have appearance settings including default border, color, outline, and padding. It aims to be a simple building block for creating an input. + +## Import + +```js +import { InputBase } from '@tonic-ui/react'; +``` + +## Usage + +{render('./basic')} + +### Attributes + +Standard input attributes are supported, e.g., `type`, `disabled`, `readOnly`, `required`, etc. + +#### `type` + +{render('./attribute-type')} + +#### `disabled` + +{render('./attribute-disabled')} + +#### `readOnly` + +{render('./attribute-readonly')} + +#### `required` + +{render('./attribute-required')} + +## Props + +### InputBase + +| Name | Type | Default | Description | +| :--- | :--- | :------ | :---------- | +| disabled | boolean | | If `true`, the user cannot interact with the control. | +| readOnly | boolean | | If `true`, prevents the value of the input from being edited. | +| error | boolean | | If `true`, the input will indicate an error. | diff --git a/packages/react-docs/pages/components/input-control.page.mdx b/packages/react-docs/pages/components/input-control.page.mdx deleted file mode 100644 index 4bfb2fc604..0000000000 --- a/packages/react-docs/pages/components/input-control.page.mdx +++ /dev/null @@ -1,236 +0,0 @@ -# InputControl - -`InputControl` is built on top of the native `Input` with the same appearance and behavior, except that it allows you to customize the input in a more convenient way. For example, input adornments can be added to the start, end, or both sides of the input. - -See the [Input](input) component for more information about the native input. - -## Import - -```js -import { - InputAdornment, - InputControl, -} from '@tonic-ui/react'; -``` - -## Usage - -```jsx noInline -const FormGroup = (props) => ( - -); - -const useSelection = (defaultValue) => { - const [value, setValue] = React.useState(defaultValue); - const changeBy = (value) => () => setValue(value); - return [value, changeBy]; -}; - -render(() => { - const [size, changeSizeBy] = useSelection('md'); - const [variant, changeVariantBy] = useSelection('outline'); - const [disabled, toggleDisabled] = useToggle(false); - const [error, toggleError] = useToggle(false); - const [readOnly, toggleReadOnly] = useToggle(false); - const [required, toggleRequired] = useToggle(false); - - return ( - <> - - - InputControl props - - - - - - size - - - *:not(:first-of-type)': { - marginLeft: -1 - } - }} - > - {['sm', 'md', 'lg'].map(value => ( - - ))} - - - - - - variant - - - *:not(:first-of-type)': { - marginLeft: -1 - } - }} - > - {['outline', 'filled', 'flush', 'unstyled'].map(value => ( - - ))} - - - - - toggleDisabled()} - /> - - disabled - - - - - toggleError()} - /> - - error - - - - - toggleReadOnly()} - /> - - readOnly - - - - - toggleRequired()} - /> - - required - - - - - - ); -}); -``` - -### Input adornments - -The main way to prepend or append an input adornment is to use the `InputAdornment` component. This can be used to add a prefix, a suffix, or an action to an input. For instance, you can use an icon button to hide or reveal the password. - -```jsx -function Example() { - const [colorMode] = useColorMode(); - const [colorStyle] = useColorStyle({ colorMode }); - const [view, setView] = React.useState(false); - const toggleView = () => setView(view => !view); - const iconColor = colorStyle.color.tertiary; - const inputType = view ? 'text' : 'password'; - - return ( - - - - - )} - /> - - - - )} - /> - - $ - - )} - endAdornment={( - - - - )} - /> - - - - - - )} - /> - - ); -} -``` - -## Props - -### InputAdornment - -| Name | Type | Default | Description | -| :--- | :--- | :------ | :---------- | -| children | ReactNode | | | - -### InputControl - -| Name | Type | Default | Description | -| :--- | :--- | :------ | :---------- | -| disabled | boolean | | If `true`, the user cannot interact with the control. | -| error | boolean \| string | | If `true` or a non-empty string value is provided, the input will display an error state. The error message will also be set as the input's custom validity message using the `setCustomValidity()` method, allowing for form validation to be performed. | -| endAdornment | ReactNode | | End `InputAdornment` for this component. | -| inputComponent | ElementType | InputBase | The input component to render. | -| inputProps | object | | Additional props to be applied to the input element. | -| inputRef | RefObject | | A `ref` to access the input element. | -| size | string | 'md' | The visual size of the `input` element. One of: 'sm', 'md', 'lg' | -| variant | string | 'outline' | The variant of the input style to use. One of: 'outline', 'filled', 'flush', 'unstyled' | -| startAdornment | ReactNode | | Start `InputAdornment` for this component. | diff --git a/packages/react-docs/pages/components/input-control/index.page.mdx b/packages/react-docs/pages/components/input-control/index.page.mdx new file mode 100644 index 0000000000..31858cbb9f --- /dev/null +++ b/packages/react-docs/pages/components/input-control/index.page.mdx @@ -0,0 +1,46 @@ +# InputControl + +`InputControl` is built on top of the native `Input` with the same appearance and behavior, except that it allows you to customize the input in a more convenient way. For example, input adornments can be added to the start, end, or both sides of the input. + +See the [Input](input) component for more information about the native input. + +## Import + +```js +import { + InputAdornment, + InputControl, +} from '@tonic-ui/react'; +``` + +## Usage + +{render('./usage')} + +### Input adornments + +The main way to prepend or append an input adornment is to use the `InputAdornment` component. This can be used to add a prefix, a suffix, or an action to an input. For instance, you can use an icon button to hide or reveal the password. + +{render('./input-adornments')} + +## Props + +### InputAdornment + +| Name | Type | Default | Description | +| :--- | :--- | :------ | :---------- | +| children | ReactNode | | | + +### InputControl + +| Name | Type | Default | Description | +| :--- | :--- | :------ | :---------- | +| disabled | boolean | | If `true`, the user cannot interact with the control. | +| error | boolean \| string | | If `true` or a non-empty string value is provided, the input will display an error state. The error message will also be set as the input's custom validity message using the `setCustomValidity()` method, allowing for form validation to be performed. | +| endAdornment | ReactNode | | End `InputAdornment` for this component. | +| inputComponent | ElementType | InputBase | The input component to render. | +| inputProps | object | | Additional props to be applied to the input element. | +| inputRef | RefObject | | A `ref` to access the input element. | +| size | string | 'md' | The visual size of the `input` element. One of: 'sm', 'md', 'lg' | +| variant | string | 'outline' | The variant of the input style to use. One of: 'outline', 'filled', 'flush', 'unstyled' | +| startAdornment | ReactNode | | Start `InputAdornment` for this component. | diff --git a/packages/react-docs/pages/components/input-control/input-adornments.js b/packages/react-docs/pages/components/input-control/input-adornments.js new file mode 100644 index 0000000000..4526905f87 --- /dev/null +++ b/packages/react-docs/pages/components/input-control/input-adornments.js @@ -0,0 +1,71 @@ +import { + ButtonBase, + Flex, + Icon, + InputAdornment, + InputControl, + Text, + useColorMode, + useColorStyle, +} from '@tonic-ui/react'; +import React, { useState } from 'react'; + +const App = () => { + const [colorMode] = useColorMode(); + const [colorStyle] = useColorStyle({ colorMode }); + const [view, setView] = useState(false); + const toggleView = () => setView(view => !view); + const iconColor = colorStyle.color.tertiary; + + return ( + + + + + )} + /> + + + + )} + /> + + $ + + )} + endAdornment={( + + + + )} + /> + + + + + + )} + /> + + ); +}; + +export default App; diff --git a/packages/react-docs/pages/components/input-control/usage.js b/packages/react-docs/pages/components/input-control/usage.js new file mode 100644 index 0000000000..4665122256 --- /dev/null +++ b/packages/react-docs/pages/components/input-control/usage.js @@ -0,0 +1,146 @@ +import { + Box, + Button, + ButtonGroup, + Checkbox, + Divider, + InputControl, + Space, + Text, + TextLabel, +} from '@tonic-ui/react'; +import { useToggle } from '@tonic-ui/react-hooks'; +import React, { useState } from 'react'; + +const FormGroup = (props) => ( + +); + +const useSelection = (defaultValue) => { + const [value, setValue] = useState(defaultValue); + const changeBy = (value) => () => setValue(value); + return [value, changeBy]; +}; + +const App = () => { + const [size, changeSizeBy] = useSelection('md'); + const [variant, changeVariantBy] = useSelection('outline'); + const [disabled, toggleDisabled] = useToggle(false); + const [error, toggleError] = useToggle(false); + const [readOnly, toggleReadOnly] = useToggle(false); + const [required, toggleRequired] = useToggle(false); + + return ( + <> + + + InputControl props + + + + + + size + + + *:not(:first-of-type)': { + marginLeft: -1 + } + }} + > + {['sm', 'md', 'lg'].map(value => ( + + ))} + + + + + + variant + + + *:not(:first-of-type)': { + marginLeft: -1 + } + }} + > + {['outline', 'filled', 'flush', 'unstyled'].map(value => ( + + ))} + + + + + toggleDisabled()} + /> + + disabled + + + + + toggleError()} + /> + + error + + + + + toggleReadOnly()} + /> + + readOnly + + + + + toggleRequired()} + /> + + required + + + + + + ); +}; + +export default App; diff --git a/packages/react-docs/pages/components/input-group.page.mdx b/packages/react-docs/pages/components/input-group.page.mdx deleted file mode 100644 index 073ba281d9..0000000000 --- a/packages/react-docs/pages/components/input-group.page.mdx +++ /dev/null @@ -1,291 +0,0 @@ -# InputGroup - -`InputGroup` is used to group related add-ons and inputs. - -## Import - -```js -import { - InputGroup, - InputGroupAddon, - InputGroupAppend, - InputGroupPrepend, -} from '@tonic-ui/react'; -``` - -## Usage - -Use `InputGroup` to place an `InputGroupAddon` or `Button` on either side of an `Input`. You may also place one on both sides of an `Input`. - -```jsx - - - - @ - - - - - - - @example.com - - - - - $ - - - - .00 - - - -``` - -### Sizes - -Use the `size` prop to change the size of the input group. You can set the value to `sm`, `md`, or `lg`. - -```jsx - - - - sm - - - - - - md - - - - - - lg - - - - -``` - -### Variants - -The `InputGroup` component comes in 3 variants: `outline`, `filled`, `flush`, and `unstyled`. Pass the `variant` prop and set it to either of these values. - -#### `outline` - -```jsx - - - - @ - - - - - - @ - - - - -``` - -#### `filled` - -```jsx - - - - @ - - - - - - @ - - - - -``` - -#### `flush` - -```jsx - - @ - - -``` - -#### `unstyled` - -```jsx - - @ - - -``` - -### Multiple add-ons - -Multiple add-ons are supported and can be mixed with checkbox and radio input components. - -```jsx - - - - $ - - - 0.00 - - - - - - - $ - - - 0.00 - - - -``` - -### Multiple inputs - -While multiple ``s are supported visually, validation styles are only available for input groups with a single ``. - -```jsx - - - First and last name - - - - -``` - -### Date inputs - -```jsx - - - – - - – - - -``` - -### Button add-ons - -```jsx noInline -function Example() { - const [colorMode] = useColorMode(); - const dividerColor ={ - dark: 'gray:70', - light: 'gray:30', - }[colorMode]; - - return ( - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - ); -} - -render(); -``` - -## Props - -### InputGroup - -| Name | Type | Default | Description | -| :--- | :--- | :------ | :---------- | -| children | ReactNode \| `(context) => ReactNode` | | A function child can be used intead of a React element. This function is called with the context object. | -| size | string | 'md' | The relative size to the input group itself. One of: 'sm', 'md', 'lg' | -| variant | string | 'outline' | The variant of the input style to use. One of: 'outline', 'filled', 'flush', 'unstyled' | - -### InputGroupAddon - -| Name | Type | Default | Description | -| :--- | :--- | :------ | :---------- | -| children | ReactNode | | | -| size | string | 'md' | The relative size to the input group itself. One of: 'sm', 'md', 'lg' | -| variant | string | 'outline' | The variant of the input style to use. One of: 'outline', 'filled', 'flush', 'unstyled' | - -### InputGroupAppend - -| Name | Type | Default | Description | -| :--- | :--- | :------ | :---------- | -| children | ReactNode | | | - -### InputGroupPrepend - -| Name | Type | Default | Description | -| :--- | :--- | :------ | :---------- | -| children | ReactNode | | | diff --git a/packages/react-docs/pages/components/input-group/basic.js b/packages/react-docs/pages/components/input-group/basic.js new file mode 100644 index 0000000000..832cfca531 --- /dev/null +++ b/packages/react-docs/pages/components/input-group/basic.js @@ -0,0 +1,30 @@ +import { Input, InputGroup, InputGroupAddon, InputGroupAppend, InputGroupPrepend, Stack } from '@tonic-ui/react'; +import React from 'react'; + +const App = () => ( + + + + @ + + + + + + + @example.com + + + + + $ + + + + .00 + + + +); + +export default App; diff --git a/packages/react-docs/pages/components/input-group/button-add-ons.js b/packages/react-docs/pages/components/input-group/button-add-ons.js new file mode 100644 index 0000000000..39cbd780c3 --- /dev/null +++ b/packages/react-docs/pages/components/input-group/button-add-ons.js @@ -0,0 +1,72 @@ +import { + Button, + ButtonGroup, + Divider, + Icon, + Input, + InputGroup, + InputGroupAppend, + InputGroupPrepend, + Space, + Stack, + useColorMode, +} from '@tonic-ui/react'; +import React from 'react'; + +const App = () => { + const [colorMode] = useColorMode(); + const dividerColor ={ + dark: 'gray:70', + light: 'gray:30', + }[colorMode]; + + return ( + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + ); +}; + +export default App; diff --git a/packages/react-docs/pages/components/input-group/date-inputs.js b/packages/react-docs/pages/components/input-group/date-inputs.js new file mode 100644 index 0000000000..6c043685ae --- /dev/null +++ b/packages/react-docs/pages/components/input-group/date-inputs.js @@ -0,0 +1,29 @@ +import { Input, InputGroup, Text } from '@tonic-ui/react'; +import React from 'react'; + +const App = () => ( + + + – + + – + + +); + +export default App; diff --git a/packages/react-docs/pages/components/input-group/index.page.mdx b/packages/react-docs/pages/components/input-group/index.page.mdx new file mode 100644 index 0000000000..251d825dbe --- /dev/null +++ b/packages/react-docs/pages/components/input-group/index.page.mdx @@ -0,0 +1,96 @@ +# InputGroup + +`InputGroup` is used to group related add-ons and inputs. + +## Import + +```js +import { + InputGroup, + InputGroupAddon, + InputGroupAppend, + InputGroupPrepend, +} from '@tonic-ui/react'; +``` + +## Usage + +Use `InputGroup` to place an `InputGroupAddon` or `Button` on either side of an `Input`. You may also place one on both sides of an `Input`. + +{render('./basic')} + +### Sizes + +Use the `size` prop to change the size of the input group. You can set the value to `sm`, `md`, or `lg`. + +{render('./sizes')} + +### Variants + +The `InputGroup` component comes in 3 variants: `outline`, `filled`, `flush`, and `unstyled`. Pass the `variant` prop and set it to either of these values. + +#### `outline` + +{render('./variant-outline')} + +#### `filled` + +{render('./variant-filled')} + +#### `flush` + +{render('./variant-flush')} + +#### `unstyled` + +{render('./variant-unstyled')} + +### Multiple add-ons + +Multiple add-ons are supported and can be mixed with checkbox and radio input components. + +{render('./multiple-add-ons')} + +### Multiple inputs + +While multiple ``s are supported visually, validation styles are only available for input groups with a single ``. + +{render('./multiple-inputs')} + +### Date inputs + +{render('./date-inputs')} + +### Button add-ons + +{render('./button-add-ons')} + +## Props + +### InputGroup + +| Name | Type | Default | Description | +| :--- | :--- | :------ | :---------- | +| children | ReactNode \| `(context) => ReactNode` | | A function child can be used intead of a React element. This function is called with the context object. | +| size | string | 'md' | The relative size to the input group itself. One of: 'sm', 'md', 'lg' | +| variant | string | 'outline' | The variant of the input style to use. One of: 'outline', 'filled', 'flush', 'unstyled' | + +### InputGroupAddon + +| Name | Type | Default | Description | +| :--- | :--- | :------ | :---------- | +| children | ReactNode | | | +| size | string | 'md' | The relative size to the input group itself. One of: 'sm', 'md', 'lg' | +| variant | string | 'outline' | The variant of the input style to use. One of: 'outline', 'filled', 'flush', 'unstyled' | + +### InputGroupAppend + +| Name | Type | Default | Description | +| :--- | :--- | :------ | :---------- | +| children | ReactNode | | | + +### InputGroupPrepend + +| Name | Type | Default | Description | +| :--- | :--- | :------ | :---------- | +| children | ReactNode | | | diff --git a/packages/react-docs/pages/components/input-group/multiple-add-ons.js b/packages/react-docs/pages/components/input-group/multiple-add-ons.js new file mode 100644 index 0000000000..0ebccde6d5 --- /dev/null +++ b/packages/react-docs/pages/components/input-group/multiple-add-ons.js @@ -0,0 +1,27 @@ +import { Input, InputGroup, InputGroupAddon, InputGroupAppend, InputGroupPrepend, Stack } from '@tonic-ui/react'; +import React from 'react'; + +const App = () => ( + + + + $ + + + 0.00 + + + + + + + $ + + + 0.00 + + + +); + +export default App; diff --git a/packages/react-docs/pages/components/input-group/multiple-inputs.js b/packages/react-docs/pages/components/input-group/multiple-inputs.js new file mode 100644 index 0000000000..fa313a11f7 --- /dev/null +++ b/packages/react-docs/pages/components/input-group/multiple-inputs.js @@ -0,0 +1,14 @@ +import { Input, InputGroup, InputGroupAddon, InputGroupPrepend } from '@tonic-ui/react'; +import React from 'react'; + +const App = () => ( + + + First and last name + + + + +); + +export default App; diff --git a/packages/react-docs/pages/components/input-group/sizes.js b/packages/react-docs/pages/components/input-group/sizes.js new file mode 100644 index 0000000000..2a400f620d --- /dev/null +++ b/packages/react-docs/pages/components/input-group/sizes.js @@ -0,0 +1,33 @@ +import { + Input, + InputGroup, + InputGroupAddon, + InputGroupPrepend, + Stack, +} from '@tonic-ui/react'; +import React from 'react'; + +const App = () => ( + + + + sm + + + + + + md + + + + + + lg + + + + +); + +export default App; diff --git a/packages/react-docs/pages/components/input-group/variant-filled.js b/packages/react-docs/pages/components/input-group/variant-filled.js new file mode 100644 index 0000000000..0e20f54f4c --- /dev/null +++ b/packages/react-docs/pages/components/input-group/variant-filled.js @@ -0,0 +1,21 @@ +import { Input, InputGroup, InputGroupAddon, InputGroupPrepend, Stack } from '@tonic-ui/react'; +import React from 'react'; + +const App = () => ( + + + + @ + + + + + + @ + + + + +); + +export default App; diff --git a/packages/react-docs/pages/components/input-group/variant-flush.js b/packages/react-docs/pages/components/input-group/variant-flush.js new file mode 100644 index 0000000000..1ce2ce34fa --- /dev/null +++ b/packages/react-docs/pages/components/input-group/variant-flush.js @@ -0,0 +1,11 @@ +import { Input, InputGroup, InputGroupAddon } from '@tonic-ui/react'; +import React from 'react'; + +const App = () => ( + + @ + + +); + +export default App; diff --git a/packages/react-docs/pages/components/input-group/variant-outline.js b/packages/react-docs/pages/components/input-group/variant-outline.js new file mode 100644 index 0000000000..b80f023dbb --- /dev/null +++ b/packages/react-docs/pages/components/input-group/variant-outline.js @@ -0,0 +1,21 @@ +import { Input, InputGroup, InputGroupAddon, InputGroupPrepend, Stack } from '@tonic-ui/react'; +import React from 'react'; + +const App = () => ( + + + + @ + + + + + + @ + + + + +); + +export default App; diff --git a/packages/react-docs/pages/components/input-group/variant-unstyled.js b/packages/react-docs/pages/components/input-group/variant-unstyled.js new file mode 100644 index 0000000000..d2d4706dff --- /dev/null +++ b/packages/react-docs/pages/components/input-group/variant-unstyled.js @@ -0,0 +1,11 @@ +import { Input, InputGroup, InputGroupAddon } from '@tonic-ui/react'; +import React from 'react'; + +const App = () => ( + + @ + + +); + +export default App; diff --git a/packages/react-docs/pages/components/input.page.mdx b/packages/react-docs/pages/components/input.page.mdx deleted file mode 100644 index 517d92196e..0000000000 --- a/packages/react-docs/pages/components/input.page.mdx +++ /dev/null @@ -1,224 +0,0 @@ -# Input - -The `Input` component is used to get user input in a text field. - -Check out the [InputControl](input-control) component if you want to do more advanced stuff with the input. - -## Import - -```js -import { Input } from '@tonic-ui/react'; -``` - -## Usage - -```jsx -<> - Label: - - Help text for the text input - -``` - -### Sizes - -Use the `size` prop to change the size of the `Input`. You can set the value to `sm`, `md`, or `lg`. - -```jsx - - - Label: - - - - Label: - - - - Label: - - - -``` - -### Variants - -The `Input` component comes in 3 variants: `outline`, `filled`, `flush`, and `unstyled`. Pass the `variant` prop and set it to either of these values. - -#### `outline` - -```jsx - -``` - -#### `filled` - -```jsx - -``` - -#### `flush` - -```jsx - -``` - -#### `unstyled` - -```jsx - -``` - -### Attributes - -Standard input attributes are supported, e.g., `type`, `disabled`, `readOnly`, `required`, `list`, etc. - -#### `type` - -```jsx - - - Name: - - - - - - Password: - - - - - -``` - -#### `disabled` - -```jsx - - - - -``` - -#### `readOnly` - -```jsx - - - - -``` - -#### `required` - -```jsx - -``` - -#### `list` - -The value of `list` is the id attribute of the `` of autocomplete options. The HTML `` element contains a set of `