From 5e738a50e741b446d0faf36e02894c5ffb4c9ede Mon Sep 17 00:00:00 2001 From: Cheton Wu <447801+cheton@users.noreply.github.com> Date: Mon, 10 Feb 2025 15:00:00 +0800 Subject: [PATCH] docs: enforce trailing slash configuration (#968) --- packages/react-docs/next.config.mjs | 1 + .../pages/components/badge/index.page.mdx | 2 +- .../pages/components/box/index.page.mdx | 6 ++-- .../pages/components/button/index.page.mdx | 6 ++-- .../components/color-mode/index.page.mdx | 2 +- .../components/color-style/index.page.mdx | 2 +- .../pages/components/flex/index.page.mdx | 2 +- .../pages/components/grid/index.page.mdx | 2 +- .../pages/components/icon/index.page.mdx | 2 +- .../components/input-control/index.page.mdx | 2 +- .../pages/components/input/index.page.mdx | 2 +- .../pages/components/space/index.page.mdx | 2 +- .../pages/components/spinner/index.page.mdx | 2 +- .../pages/components/svg-icon/index.page.mdx | 2 +- .../pages/components/switch/index.page.mdx | 2 +- .../pages/components/table/index.page.mdx | 2 +- .../pages/components/tag/index.page.mdx | 2 +- .../components/toast-manager/index.page.mdx | 2 +- .../react-components-part-1.page.mdx | 4 +-- .../react-components-part-2.page.mdx | 12 ++++---- .../react-documentation-site.page.mdx | 20 ++++++------- .../pages/contributing/react-icons.page.mdx | 2 +- .../getting-started/icons/index.page.mdx | 6 ++-- .../installation/index.page.mdx | 10 +++---- .../getting-started/usage/index.page.mdx | 18 +++++------ .../migrating-from-v0-to-v1.page.mdx | 30 +++++++++---------- .../migrating-from-v1-to-v2.page.mdx | 6 ++-- .../react-docs/pages/patterns/index.page.mdx | 2 +- .../patterns/notification/index.page.mdx | 8 ++--- .../patterns/table-display/index.page.mdx | 2 +- .../responsive-values/index.page.mdx | 2 +- .../pages/theme/borders/index.page.mdx | 2 +- .../pages/theme/outlines/index.page.mdx | 2 +- .../react-docs/scripts/update-style-props.mjs | 2 +- 34 files changed, 86 insertions(+), 85 deletions(-) diff --git a/packages/react-docs/next.config.mjs b/packages/react-docs/next.config.mjs index 1389eeea41..79fb9df8e8 100644 --- a/packages/react-docs/next.config.mjs +++ b/packages/react-docs/next.config.mjs @@ -341,6 +341,7 @@ const initialNextConfig = { distDir: process.env.NODE_ENV === 'production' ? 'dist' : 'build', output: process.env.NODE_ENV === 'production' ? 'export' : 'standalone', pageExtensions: ['page.js', 'page.mdx'], + trailingSlash: true, }; const transformNextConfig = () => plugins.reduce((acc, next) => next(acc), initialNextConfig); diff --git a/packages/react-docs/pages/components/badge/index.page.mdx b/packages/react-docs/pages/components/badge/index.page.mdx index 99830013de..e2b95be351 100644 --- a/packages/react-docs/pages/components/badge/index.page.mdx +++ b/packages/react-docs/pages/components/badge/index.page.mdx @@ -42,7 +42,7 @@ The badge visibility can be controlled using the `isInvisible` prop. ### 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. +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')} diff --git a/packages/react-docs/pages/components/box/index.page.mdx b/packages/react-docs/pages/components/box/index.page.mdx index 0b2ed86a99..6a1450e726 100644 --- a/packages/react-docs/pages/components/box/index.page.mdx +++ b/packages/react-docs/pages/components/box/index.page.mdx @@ -20,7 +20,7 @@ By default, the `Box` component renders a `div` element. There might be cases wh Style props provide a way to use CSS-in-JS styling technique to pass styles as props to style components without having to use a separate CSS file. -You can see the [Style Props](../styled-system/style-props) page to learn how to use style props. +You can see the [Style Props](../../styled-system/style-props) page to learn how to use style props. {render('./using-style-props')} @@ -28,7 +28,7 @@ You can see the [Style Props](../styled-system/style-props) page to learn how to Styling elements with [pseudo-classes](https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-classes) and [pseudo-elements](https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-elements) can be accomplished by prefixing the pseudo selector with one or two underscores (`_` for pseudo-classees or `__` for pseudo-elements). -You can see the [Pseudo Styled Props](../styled-system/pseudo-style-props) page to learn how to use pseudo style props. +You can see the [Pseudo Styled Props](../../styled-system/pseudo-style-props) page to learn how to use pseudo style props. {render('./using-pseudo-style-props')} @@ -36,7 +36,7 @@ You can see the [Pseudo Styled Props](../styled-system/pseudo-style-props) page {render('./using-the-sx-prop')} -Read more on [the sx prop](../getting-started/the-sx-prop) page. +Read more on [the sx prop](../../getting-started/the-sx-prop) page. ## Props diff --git a/packages/react-docs/pages/components/button/index.page.mdx b/packages/react-docs/pages/components/button/index.page.mdx index fc703d74ba..74f4949851 100644 --- a/packages/react-docs/pages/components/button/index.page.mdx +++ b/packages/react-docs/pages/components/button/index.page.mdx @@ -1,6 +1,6 @@ # Button -`Button` is used to trigger an action or event, such as submitting a form, opening a [`Modal`](modal), canceling an action, or performing a delete operation. +`Button` is used to trigger an action or event, such as submitting a form, opening a [`Modal`](../modal), canceling an action, or performing a delete operation. ## Import @@ -56,13 +56,13 @@ To customize the visual appearance of the selected state, pass the `_selected` s ### Icons -Icons are commonly used in toolbar buttons. You can use the `columnGap` style prop or the [Space](space) component to adjust the spacing between the icon and the label. +Icons are commonly used in toolbar buttons. You can use the `columnGap` style prop or the [Space](../space) component to adjust the spacing between the icon and the label. {render('./icons')} ### Customization -To create a custom button, you can use the style props for the [ButtonBase](button-base) component. +To create a custom button, you can use the style props for the [ButtonBase](../button-base) component. ## Props diff --git a/packages/react-docs/pages/components/color-mode/index.page.mdx b/packages/react-docs/pages/components/color-mode/index.page.mdx index 13d315dba8..4ff8cb3439 100644 --- a/packages/react-docs/pages/components/color-mode/index.page.mdx +++ b/packages/react-docs/pages/components/color-mode/index.page.mdx @@ -120,4 +120,4 @@ function App({ children }) { ## Managing Color Mode -To manage color mode in your application, you can use the [useColorMode](../components/color-mode/useColorMode) hook. +To manage color mode in your application, you can use the [useColorMode](../../components/color-mode/useColorMode) hook. diff --git a/packages/react-docs/pages/components/color-style/index.page.mdx b/packages/react-docs/pages/components/color-style/index.page.mdx index c5dcb26c7c..97f138f678 100644 --- a/packages/react-docs/pages/components/color-style/index.page.mdx +++ b/packages/react-docs/pages/components/color-style/index.page.mdx @@ -75,7 +75,7 @@ The full configuration is displayed below: {jsonPrettify(colorStyle)} -To manage color style in your application, you can use the [useColorStyle](../components/color-style/useColorStyle) hook. +To manage color style in your application, you can use the [useColorStyle](../../components/color-style/useColorStyle) hook. ### Overriding color style diff --git a/packages/react-docs/pages/components/flex/index.page.mdx b/packages/react-docs/pages/components/flex/index.page.mdx index 379f3022cd..6a1f4f9928 100644 --- a/packages/react-docs/pages/components/flex/index.page.mdx +++ b/packages/react-docs/pages/components/flex/index.page.mdx @@ -1,6 +1,6 @@ # Flex -`Flex` is a [`Box`](box) with `display: flex` and comes with helpful style shorthand props. +`Flex` is a [`Box`](../box) with `display: flex` and comes with helpful style shorthand props. ## Import diff --git a/packages/react-docs/pages/components/grid/index.page.mdx b/packages/react-docs/pages/components/grid/index.page.mdx index 134cdcd75d..6279c6906e 100644 --- a/packages/react-docs/pages/components/grid/index.page.mdx +++ b/packages/react-docs/pages/components/grid/index.page.mdx @@ -1,6 +1,6 @@ # Grid -`Grid` is a [`Box`](box) with `display: grid` and comes with helpful style shorthand props. +`Grid` is a [`Box`](../box) with `display: grid` and comes with helpful style shorthand props. ## Import diff --git a/packages/react-docs/pages/components/icon/index.page.mdx b/packages/react-docs/pages/components/icon/index.page.mdx index 9b0ba5c99b..b68b115612 100644 --- a/packages/react-docs/pages/components/icon/index.page.mdx +++ b/packages/react-docs/pages/components/icon/index.page.mdx @@ -12,7 +12,7 @@ import { > IMPORTANT NOTICE > -> All built-in icons were removed in v2. See the [migration guide](../migration-guide/migrating-from-v1-to-v2#icons) while upgrading from v0 or v1. If you are looking for the pre-defined Tonic icon components, visit the [React Icons](../icons) page. +> All built-in icons were removed in v2. See the [migration guide](../migration-guide/migrating-from-v1-to-v2#icons) while upgrading from v0 or v1. If you are looking for the pre-defined Tonic icon components, visit the [React Icons](../../icons) page. ## Import diff --git a/packages/react-docs/pages/components/input-control/index.page.mdx b/packages/react-docs/pages/components/input-control/index.page.mdx index 31858cbb9f..ba35213e50 100644 --- a/packages/react-docs/pages/components/input-control/index.page.mdx +++ b/packages/react-docs/pages/components/input-control/index.page.mdx @@ -2,7 +2,7 @@ `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. +See the [Input](../input) component for more information about the native input. ## Import diff --git a/packages/react-docs/pages/components/input/index.page.mdx b/packages/react-docs/pages/components/input/index.page.mdx index 60602f97ef..7d2260f95b 100644 --- a/packages/react-docs/pages/components/input/index.page.mdx +++ b/packages/react-docs/pages/components/input/index.page.mdx @@ -2,7 +2,7 @@ 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. +Check out the [InputControl](../input-control) component if you want to do more advanced stuff with the input. ## Import diff --git a/packages/react-docs/pages/components/space/index.page.mdx b/packages/react-docs/pages/components/space/index.page.mdx index 431afb243f..65f1c8c9bb 100644 --- a/packages/react-docs/pages/components/space/index.page.mdx +++ b/packages/react-docs/pages/components/space/index.page.mdx @@ -1,6 +1,6 @@ # Space -Space is [Box](box) with `display="inline-flex"`. You can specify either `width` or `height` to add space between two elements. +Space is [Box](../box) with `display="inline-flex"`. You can specify either `width` or `height` to add space between two elements. ## Import diff --git a/packages/react-docs/pages/components/spinner/index.page.mdx b/packages/react-docs/pages/components/spinner/index.page.mdx index c480b16df9..559a150676 100644 --- a/packages/react-docs/pages/components/spinner/index.page.mdx +++ b/packages/react-docs/pages/components/spinner/index.page.mdx @@ -44,7 +44,7 @@ The `color` prop supports both default and custom theme colors. To customize the ### Customization -For more extensive customization, consider using the [CircularProgress](./progress#circularprogress) component. +For more extensive customization, consider using the [CircularProgress](../progress#circularprogress) component. ## Props diff --git a/packages/react-docs/pages/components/svg-icon/index.page.mdx b/packages/react-docs/pages/components/svg-icon/index.page.mdx index 4417edd3a6..74032277bc 100644 --- a/packages/react-docs/pages/components/svg-icon/index.page.mdx +++ b/packages/react-docs/pages/components/svg-icon/index.page.mdx @@ -1,4 +1,4 @@ # SVGIcon -The `SVGIcon` component has been moved to `@tonic-ui/react-icons`. Please visit [SVGIcon](../icons/svg-icon) for more information. +The `SVGIcon` component has been moved to `@tonic-ui/react-icons`. Please visit [SVGIcon](../../icons/svg-icon) for more information. diff --git a/packages/react-docs/pages/components/switch/index.page.mdx b/packages/react-docs/pages/components/switch/index.page.mdx index 71943d05e5..bfed1b6b44 100644 --- a/packages/react-docs/pages/components/switch/index.page.mdx +++ b/packages/react-docs/pages/components/switch/index.page.mdx @@ -1,6 +1,6 @@ # Switch -The `Switch` component is used as an alternative to the [Checkbox](checkbox) component. You can use it to render a single option that can be turned on or off. +The `Switch` component is used as an alternative to the [Checkbox](../checkbox) component. You can use it to render a single option that can be turned on or off. ## Import diff --git a/packages/react-docs/pages/components/table/index.page.mdx b/packages/react-docs/pages/components/table/index.page.mdx index fa6c7b2f24..723c0fa1b2 100644 --- a/packages/react-docs/pages/components/table/index.page.mdx +++ b/packages/react-docs/pages/components/table/index.page.mdx @@ -259,7 +259,7 @@ And here's how you can use it in your code: ### TableScrollbar -The `TableScrollbar` component has the same set of props as the [Scrollbar](./scrollbar#props) component. +The `TableScrollbar` component has the same set of props as the [Scrollbar](../scrollbar#props) component. | Name | Type | Default | Description | | :--- | :--- | :------ | :---------- | diff --git a/packages/react-docs/pages/components/tag/index.page.mdx b/packages/react-docs/pages/components/tag/index.page.mdx index 205c5abc8a..42329df368 100644 --- a/packages/react-docs/pages/components/tag/index.page.mdx +++ b/packages/react-docs/pages/components/tag/index.page.mdx @@ -23,7 +23,7 @@ Use the `variant` prop to change the visual style of the `Tag`. You can set the ### Custom colors -The color of the tag can be changed by passing the `backgroundColor`, `borderColor`, and `color` props. See the [colors](../theme/colors) section to learn more about colors. +The color of the tag can be changed by passing the `backgroundColor`, `borderColor`, and `color` props. See the [colors](../../theme/colors) section to learn more about colors. {render('./custom-colors')} diff --git a/packages/react-docs/pages/components/toast-manager/index.page.mdx b/packages/react-docs/pages/components/toast-manager/index.page.mdx index ce343672a1..4ee06954ba 100644 --- a/packages/react-docs/pages/components/toast-manager/index.page.mdx +++ b/packages/react-docs/pages/components/toast-manager/index.page.mdx @@ -92,7 +92,7 @@ To remove a toast, you can use the `onClose` function, triggered by the user cli toast.remove(id); ``` -See the [useToastManager](./toast-manager/useToastManager) Hook for detailed usage. +See the [useToastManager](../toast-manager/useToastManager) Hook for detailed usage. ## Commonly Asked Questions diff --git a/packages/react-docs/pages/contributing/react-components-part-1.page.mdx b/packages/react-docs/pages/contributing/react-components-part-1.page.mdx index 3f33b609c5..82a1d30a89 100644 --- a/packages/react-docs/pages/contributing/react-components-part-1.page.mdx +++ b/packages/react-docs/pages/contributing/react-components-part-1.page.mdx @@ -5,7 +5,7 @@ import Code from '../components/code/index.page.mdx' ## Workflow -This example will walk you through the process of creating a [Code](../components/code) component. This component serves as a straightforward example to help you understand the entire development and documentation flow. +This example will walk you through the process of creating a [Code](../../components/code) component. This component serves as a straightforward example to help you understand the entire development and documentation flow. {render('./react-components-part-1-example')} @@ -184,7 +184,7 @@ Include the new documentation page in `packages/react-docs/config/sidebar-routes #### Step 3: API structure -Refer to the existing [Code component documentation](../components/code) for details. +Refer to the existing [Code component documentation](../../components/code) for details. diff --git a/packages/react-docs/pages/contributing/react-components-part-2.page.mdx b/packages/react-docs/pages/contributing/react-components-part-2.page.mdx index 51cae99052..2629f478b4 100644 --- a/packages/react-docs/pages/contributing/react-components-part-2.page.mdx +++ b/packages/react-docs/pages/contributing/react-components-part-2.page.mdx @@ -204,9 +204,9 @@ The `variant` prop offers various styles tailored to specific component needs. H Variant | Description | Used In :--- | :---------- | :------ -`solid` | The background and the border are filled with the same color. | [Alert](../components/alert), [Badge](../components/badge), [Divider](../components/divider), [Tag](../components/tag) -`filled` | The background and the border are filled with different colors. | [Input](../components/input), [InputControl](../components/input-control), [Select](../components/select), [Tabs](../components/tabs), [SearchInput](../components/search-input), [Textarea](../components/textarea) -`flush` | Only the bottom bordered is rendered. | [Input](../components/input), [InputControl](../components/input-control), [SearchInput](../components/search-input) -`outline` | Only the border is filled. | [Alert](../components/alert), [Input](../components/input), [InputControl](../components/input-control), [SearchInput](../components/search-input), [Select](../components/select), [Table](../components/table), [Tag](../components/tag), [Textarea](../components/textarea) -`unstyled` | No style is applied. | [Input](../components/input), [InputControl](../components/input-control), [SearchInput](../components/search-input), [Select](../components/select), [Tabs](../components/tabs), [Textarea](../components/textarea) -`default` | The component's default style. | [Button](../components/button), [Table](../components/table), [Tabs](../components/tabs) +`solid` | The background and the border are filled with the same color. | [Alert](../../components/alert), [Badge](../../components/badge), [Divider](../../components/divider), [Tag](../../components/tag) +`filled` | The background and the border are filled with different colors. | [Input](../../components/input), [InputControl](../../components/input-control), [Select](../../components/select), [Tabs](../../components/tabs), [SearchInput](../../components/search-input), [Textarea](../../components/textarea) +`flush` | Only the bottom bordered is rendered. | [Input](../../components/input), [InputControl](../../components/input-control), [SearchInput](../../components/search-input) +`outline` | Only the border is filled. | [Alert](../../components/alert), [Input](../../components/input), [InputControl](../../components/input-control), [SearchInput](../../components/search-input), [Select](../../components/select), [Table](../../components/table), [Tag](../../components/tag), [Textarea](../../components/textarea) +`unstyled` | No style is applied. | [Input](../../components/input), [InputControl](../../components/input-control), [SearchInput](../../components/search-input), [Select](../../components/select), [Tabs](../../components/tabs), [Textarea](../../components/textarea) +`default` | The component's default style. | [Button](../../components/button), [Table](../../components/table), [Tabs](../../components/tabs) diff --git a/packages/react-docs/pages/contributing/react-documentation-site.page.mdx b/packages/react-docs/pages/contributing/react-documentation-site.page.mdx index e85df18786..0b4d1394a6 100644 --- a/packages/react-docs/pages/contributing/react-documentation-site.page.mdx +++ b/packages/react-docs/pages/contributing/react-documentation-site.page.mdx @@ -1,6 +1,6 @@ # Contributing to Documentation Site -Visit [this page](../contributing#set-up-documentation-site) for instructions on setting up the development environment for the documentation site. +Visit [this page](../../contributing#set-up-documentation-site) for instructions on setting up the development environment for the documentation site. ## Overview @@ -11,15 +11,15 @@ Name | Description 404.page.js | Handles the 404 error page, displayed when a route is not found. _app.page.js | Custom `App` component that controls the page initialization and creates a shared layout between page changes. _document.page.js | Custom `Document` component that allows you to modify the initial HTML document structure. You can configure the `` and `` tags, set up meta tags, or add scripts and styles necessary for server-side rendering. -[getting-started/](../getting-started/usage) | Contains the getting started guide for Tonic UI. -[contributing/](../contributing) | Contains the contributing guidelines for Tonic UI. -[migrations/](../migrations) | Contains the migration guide for Tonic UI. -[patterns/](../patterns) | Contains documentation on design patterns and best practices for Tonic UI. -[components/](../components) | Contains documentation for Tonic UI React components: `@tonic-ui/react` -[hooks/](../hooks) | Contains documentation for Tonic UI React Hooks: `@tonic-ui/react-hooks` -[icons/](../icons) | Contains documentation for Tonic UI React Icons: `@tonic-ui/react-icons` -[styled-system/](../styled-system) | Contains documentation for Tonic UI Styled System: `@tonic-ui/styled-system` -[theme/](../theme) | Contains documentation for Tonic UI theme: `@tonic-ui/theme` +[getting-started/](../../getting-started/usage) | Contains the getting started guide for Tonic UI. +[contributing/](../../contributing) | Contains the contributing guidelines for Tonic UI. +[migrations/](../../migrations) | Contains the migration guide for Tonic UI. +[patterns/](../../patterns) | Contains documentation on design patterns and best practices for Tonic UI. +[components/](../../components) | Contains documentation for Tonic UI React components: `@tonic-ui/react` +[hooks/](../../hooks) | Contains documentation for Tonic UI React Hooks: `@tonic-ui/react-hooks` +[icons/](../../icons) | Contains documentation for Tonic UI React Icons: `@tonic-ui/react-icons` +[styled-system/](../../styled-system) | Contains documentation for Tonic UI Styled System: `@tonic-ui/styled-system` +[theme/](../../theme) | Contains documentation for Tonic UI theme: `@tonic-ui/theme` [playground/](../playground) | Demonstrates how to create interactive applications with Tonic UI. > Tip: Page extensions should be either `.page.js` or `.page.mdx`; otherwise, they will be treated as non-page files. If you need to use other page extensions, you can configure them in `next.config.js`. diff --git a/packages/react-docs/pages/contributing/react-icons.page.mdx b/packages/react-docs/pages/contributing/react-icons.page.mdx index 43d08e64e2..5d87c5361c 100644 --- a/packages/react-docs/pages/contributing/react-icons.page.mdx +++ b/packages/react-docs/pages/contributing/react-icons.page.mdx @@ -41,7 +41,7 @@ After generating the icons, it is important to verify that the new icons are cor yarn dev ``` -2. Open your browser and navigate to the documentation site (usually `http://localhost:3000`). Browse through the [React Icons](../icons) page to ensure they are displaying correctly. +2. Open your browser and navigate to the documentation site (usually `http://localhost:3000`). Browse through the [React Icons](../../icons) page to ensure they are displaying correctly. ## Submitting Your Contribution diff --git a/packages/react-docs/pages/getting-started/icons/index.page.mdx b/packages/react-docs/pages/getting-started/icons/index.page.mdx index 314c9e0e01..2ab11bf403 100644 --- a/packages/react-docs/pages/getting-started/icons/index.page.mdx +++ b/packages/react-docs/pages/getting-started/icons/index.page.mdx @@ -2,6 +2,6 @@ ## Quick Links -* Explore a variety of pre-defined icons with [React Icons](../icons). -* Discover how to create custom SVG icons using [SVGIcon](../icons/svg-icon). -* Learn about migrating icon components when upgrading from v1 to v2 [here](../migrations/migrating-from-v1-to-v2#icons). +* Explore a variety of pre-defined icons with [React Icons](../../icons). +* Discover how to create custom SVG icons using [SVGIcon](../../icons/svg-icon). +* Learn about migrating icon components when upgrading from v1 to v2 [here](../../migrations/migrating-from-v1-to-v2#icons). diff --git a/packages/react-docs/pages/getting-started/installation/index.page.mdx b/packages/react-docs/pages/getting-started/installation/index.page.mdx index 87fbe79bca..e58710e84f 100644 --- a/packages/react-docs/pages/getting-started/installation/index.page.mdx +++ b/packages/react-docs/pages/getting-started/installation/index.page.mdx @@ -28,10 +28,10 @@ It will install all the dependencies for you. | :--- | :------ | :---------- | :----- | :-- | :------------ | | `@tonic-ui/changelog-github` | {pkg_changelog_github.version} | {pkg_changelog_github.description} | [View](https://github.com/trendmicro-frontend/tonic-ui/tree/master/packages/changelog-github) | - | - | | `@tonic-ui/codemod` | {pkg_codemod.version} | {pkg_codemod.description} | [View](https://github.com/trendmicro-frontend/tonic-ui/tree/master/packages/codemod) | [View](https://www.npmjs.com/package/@tonic-ui/codemod) | - | -| `@tonic-ui/react` | {pkg_react.version} | {pkg_react.description} | [View](https://github.com/trendmicro-frontend/tonic-ui/tree/master/packages/react) | [View](https://www.npmjs.com/package/@tonic-ui/react) | [View](../components) | +| `@tonic-ui/react` | {pkg_react.version} | {pkg_react.description} | [View](https://github.com/trendmicro-frontend/tonic-ui/tree/master/packages/react) | [View](https://www.npmjs.com/package/@tonic-ui/react) | [View](../../components) | | `@tonic-ui/react-base` | {pkg_react_base.version} | {pkg_react_base.description} | [View](https://github.com/trendmicro-frontend/tonic-ui/tree/master/packages/react-base) | [View](https://www.npmjs.com/package/@tonic-ui/react-base) | - | -| `@tonic-ui/react-hooks` | {pkg_react_hooks.version} | {pkg_react_hooks.description} | [View](https://github.com/trendmicro-frontend/tonic-ui/tree/master/packages/react-hooks) | [View](https://www.npmjs.com/package/@tonic-ui/react-hooks) | [View](../hooks) | -| `@tonic-ui/react-icons` | {pkg_react_icons.version} | {pkg_react_icons.description} | [View](https://github.com/trendmicro-frontend/tonic-ui/tree/master/packages/react-icons) | [View](https://www.npmjs.com/package/@tonic-ui/react-icons) | [View](../icons) | -| `@tonic-ui/styled-system` | {pkg_styled_system.version} | {pkg_styled_system.description} | [View](https://github.com/trendmicro-frontend/tonic-ui/tree/master/packages/styled-system) | [View](https://www.npmjs.com/package/@tonic-ui/styled-system) | [View](../styled-system) | -| `@tonic-ui/theme` | {pkg_theme.version} | {pkg_theme.description} | [View](https://github.com/trendmicro-frontend/tonic-ui/tree/master/packages/theme) | [View](https://www.npmjs.com/package/@tonic-ui/theme) | [View](../theme) | +| `@tonic-ui/react-hooks` | {pkg_react_hooks.version} | {pkg_react_hooks.description} | [View](https://github.com/trendmicro-frontend/tonic-ui/tree/master/packages/react-hooks) | [View](https://www.npmjs.com/package/@tonic-ui/react-hooks) | [View](../../hooks) | +| `@tonic-ui/react-icons` | {pkg_react_icons.version} | {pkg_react_icons.description} | [View](https://github.com/trendmicro-frontend/tonic-ui/tree/master/packages/react-icons) | [View](https://www.npmjs.com/package/@tonic-ui/react-icons) | [View](../../icons) | +| `@tonic-ui/styled-system` | {pkg_styled_system.version} | {pkg_styled_system.description} | [View](https://github.com/trendmicro-frontend/tonic-ui/tree/master/packages/styled-system) | [View](https://www.npmjs.com/package/@tonic-ui/styled-system) | [View](../../styled-system) | +| `@tonic-ui/theme` | {pkg_theme.version} | {pkg_theme.description} | [View](https://github.com/trendmicro-frontend/tonic-ui/tree/master/packages/theme) | [View](https://www.npmjs.com/package/@tonic-ui/theme) | [View](../../theme) | | `@tonic-ui/utils` | {pkg_utils.version} | {pkg_utils.description} | [View](https://github.com/trendmicro-frontend/tonic-ui/tree/master/packages/utils) | [View](https://www.npmjs.com/package/@tonic-ui/utils) | - | diff --git a/packages/react-docs/pages/getting-started/usage/index.page.mdx b/packages/react-docs/pages/getting-started/usage/index.page.mdx index ce147cd910..69187ab8e1 100644 --- a/packages/react-docs/pages/getting-started/usage/index.page.mdx +++ b/packages/react-docs/pages/getting-started/usage/index.page.mdx @@ -163,9 +163,9 @@ function Layout(props) { } ``` -> Learn more about [Color Mode](../components/color-mode) in the documentation. +> Learn more about [Color Mode](../../components/color-mode) in the documentation. -> Learn more about [Color Style](../components/color-style) in the documentation. +> Learn more about [Color Style](../../components/color-style) in the documentation. > For the **`color-scheme`** CSS property, see [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/color-scheme) for more information. @@ -332,14 +332,14 @@ const brandColor = theme?.colors?.brand?.[90]; ### Design tokens in the theme -Visit [Styled System](../styled-system) and [Theme](../theme) sections to learn how the different CSS (and custom) properties are mapped to the theme keys. +Visit [Styled System](../../styled-system) and [Theme](../../theme) sections to learn how the different CSS (and custom) properties are mapped to the theme keys. ### How to use Box You can customize the styling and layout of your components using the various style props, pseudo-style props, and responsive values provided by `Box`: -* [Style props](../styled-system/style-props) -* [Pseudo style props](../styled-system/pseudo-style-props) -* [Responsive values](../styled-system/responsive-values) +* [Style props](../../styled-system/style-props) +* [Pseudo style props](../../styled-system/pseudo-style-props) +* [Responsive values](../../styled-system/responsive-values) #### Using style props and pseudo style props @@ -347,7 +347,7 @@ You can customize the styling and layout of your components using the various st #### Shorthands -There are some shorthands available for various CSS properties. These are documentated on the [style props](../styled-system/style-props) page. +There are some shorthands available for various CSS properties. These are documentated on the [style props](../../styled-system/style-props) page. ```jsx ``` -Read more on [the sx prop](the-sx-prop) page. +Read more on [the sx prop](../the-sx-prop) page. ### Advanced Box usage @@ -422,4 +422,4 @@ This example demonstrates how you can use responsive values to create a responsi ## Versioned Documentation -This documentation always reflects the latest version of Tonic UI. You can find older versions of the documentation [here](versions). +This documentation always reflects the latest version of Tonic UI. You can find older versions of the documentation [here](../versions). diff --git a/packages/react-docs/pages/migrations/migrating-from-v0-to-v1.page.mdx b/packages/react-docs/pages/migrations/migrating-from-v0-to-v1.page.mdx index 8c041a174f..c0fbb32fda 100644 --- a/packages/react-docs/pages/migrations/migrating-from-v0-to-v1.page.mdx +++ b/packages/react-docs/pages/migrations/migrating-from-v0-to-v1.page.mdx @@ -34,8 +34,8 @@ You can keep v0.x packages until you are ready to remove them. A `TonicProvider` is provided by the `@tonic-ui/react` package. It includes the following providers: * **ThemeProvider**: Provides the theming context for all components. -* **ColorModeProvider**: Provides color mode context to all components. [Learn more](../components/color-mode) -* **ColorStyleProvider**: Provides the color style context to all components. [Learn more](../components/color-style) +* **ColorModeProvider**: Provides color mode context to all components. [Learn more](../../components/color-mode) +* **ColorStyleProvider**: Provides the color style context to all components. [Learn more](../../components/color-style) Optionally via prop: @@ -58,13 +58,13 @@ Optionally via prop: + ``` -> See [Getting Started](../getting-started/usage) to learn more about the providers. +> See [Getting Started](../../getting-started/usage) to learn more about the providers. ### 3. Replace deprecated components and Hooks #### FlatButton component -💣 `FlatButton` is deprecated and will be removed in the next major release. Use [Button](../components/button) or [ButtonBase](../components/button-base) instead. +💣 `FlatButton` is deprecated and will be removed in the next major release. Use [Button](../../components/button) or [ButtonBase](../../components/button-base) instead. ```diff - @@ -107,7 +107,7 @@ const ActionButton = forwardRef((props, ref) => ( #### PseudoBox component -💣 `PseudoBox` is deprecated and its props can now be passed to `Box` directly. Use [Box](../components/box) instead. +💣 `PseudoBox` is deprecated and its props can now be passed to `Box` directly. Use [Box](../../components/box) instead. ```diff - ( #### ToggleSwitch component -💣 `ToggleSwitch` is deprecated and will be removed in the next major release. Use [Switch](../components/switch) instead. +💣 `ToggleSwitch` is deprecated and will be removed in the next major release. Use [Switch](../../components/switch) instead. ```diff - @@ -130,7 +130,7 @@ const ActionButton = forwardRef((props, ref) => ( #### useDisclosure Hook -💣 `useDisclosure` is deprecated and will be removed in the next major release. Use [useToggle](../hooks/use-toggle) instead. +💣 `useDisclosure` is deprecated and will be removed in the next major release. Use [useToggle](../../hooks/use-toggle) instead. ```js const [value, toggleValue] = useToggle(false); @@ -166,7 +166,7 @@ The following components changed the `display` property internally. Check whethe ### Theme -Removed dark and light shadows from the `theme.shadows` object in favor of `colorStyle.shadow`. See [shadows](../theme/shadows) to learn more. +Removed dark and light shadows from the `theme.shadows` object in favor of `colorStyle.shadow`. See [shadows](../../theme/shadows) to learn more. ```diff { @@ -370,13 +370,13 @@ The following components now have built-in transitions. Remember to remove all t | `ToastTransition` | built-in | false | | `Tooltip` | `Grow` | false | -* [Transitions](../components/transitions) -* [Collapse](../components/transitions/collapse) - internally used in `Accordion` and `Menu` -* [Fade](../components/transitions/fade) - internally used in `Modal` -* [Grow](../components/transitions/grow) - internally used in `Popover` and `Tooltip` -* [Scale](../components/transitions/scale) -* [Slide](../components/transitions/slide) - internally used in `Drawer` -* [Zoom](../components/transitions/zoom) +* [Transitions](../../components/transitions) +* [Collapse](../../components/transitions/collapse) - internally used in `Accordion` and `Menu` +* [Fade](../../components/transitions/fade) - internally used in `Modal` +* [Grow](../../components/transitions/grow) - internally used in `Popover` and `Tooltip` +* [Scale](../../components/transitions/scale) +* [Slide](../../components/transitions/slide) - internally used in `Drawer` +* [Zoom](../../components/transitions/zoom) ### Drawer diff --git a/packages/react-docs/pages/migrations/migrating-from-v1-to-v2.page.mdx b/packages/react-docs/pages/migrations/migrating-from-v1-to-v2.page.mdx index b8a80d7bda..738f48b8be 100644 --- a/packages/react-docs/pages/migrations/migrating-from-v1-to-v2.page.mdx +++ b/packages/react-docs/pages/migrations/migrating-from-v1-to-v2.page.mdx @@ -23,8 +23,8 @@ This section highlights the major updates and breaking changes in Tonic UI v2. Type | Key | Configuration :-- | :-- | :-- -[Severity (deprecated)](../components/color-style#severity-deprecated) | `colorStyle.severity.*` | [View](../components/color-style#severity-deprecated) -[Chart (deprecated)](../components/color-style#chart-deprecated) | `colorStyle.chart.classic.colors[]` | [View](../components/color-style#chart-deprecated) +[Severity (deprecated)](../../components/color-style#severity-deprecated) | `colorStyle.severity.*` | [View](../../components/color-style#severity-deprecated) +[Chart (deprecated)](../../components/color-style#chart-deprecated) | `colorStyle.chart.classic.colors[]` | [View](../../components/color-style#chart-deprecated) Let's see an example here: ```jsx @@ -163,7 +163,7 @@ const customColorStyle = merge(colorStyle, { ### Date Pickers -The [Calendar](../components/date-pickers/calendar) and [DatePicker](../components/date-pickers/date-picker) components have been moved from `@tonic-ui/react-lab` to `@tonic-ui/react`. You can import them as follows: +The [Calendar](../../components/date-pickers/calendar) and [DatePicker](../../components/date-pickers/date-picker) components have been moved from `@tonic-ui/react-lab` to `@tonic-ui/react`. You can import them as follows: ```js import { diff --git a/packages/react-docs/pages/patterns/index.page.mdx b/packages/react-docs/pages/patterns/index.page.mdx index 446242c9eb..f49e779d23 100644 --- a/packages/react-docs/pages/patterns/index.page.mdx +++ b/packages/react-docs/pages/patterns/index.page.mdx @@ -2,7 +2,7 @@ import { Text } from '@tonic-ui/react'; # Overview -## [Notification](patterns/notification) +## [Notification](../patterns/notification) Provides short, timely, and relevant information about the product to help users notice the important things and even take the follow-up actions. ## Table and Table Toolbar (Basic) diff --git a/packages/react-docs/pages/patterns/notification/index.page.mdx b/packages/react-docs/pages/patterns/notification/index.page.mdx index 404907ea29..e1224aa406 100644 --- a/packages/react-docs/pages/patterns/notification/index.page.mdx +++ b/packages/react-docs/pages/patterns/notification/index.page.mdx @@ -38,7 +38,7 @@ For more information, see [notification center guideline](https://www.figma.com/ #### Product-level alert -For product-level alerts, place an [alert](../components/alert) banner above the product name bar. The alert can be dismissed manually by the user or automatically by the system after the call to action is completed. +For product-level alerts, place an [alert](../../components/alert) banner above the product name bar. The alert can be dismissed manually by the user or automatically by the system after the call to action is completed. An alert has the following types: * Error: Informs users that a problem has occurred, for example, license expiration, and requires users to take actions. @@ -113,7 +113,7 @@ An in-app alert has the following types: ### Toast -[Toast](../components/toast) provides simple feedback for user-initiated actions or information that users need to complete the current task. Place a toast on the bottom right of a screen. Toasts can be chronologically piled up when there are multiple and pushed down when a previous toast is dismissed. +[Toast](../../components/toast) provides simple feedback for user-initiated actions or information that users need to complete the current task. Place a toast on the bottom right of a screen. Toasts can be chronologically piled up when there are multiple and pushed down when a previous toast is dismissed. A toast can be classified into the following types: * Success: The toast will be automatically dismissed after 5 seconds. @@ -146,8 +146,8 @@ To animate the toast when it is displayed or dismissed, you can use the `ToastTr React Components Patterns - * [Modal](../components/modal) - * [Drawer](../components/drawer) + * [Modal](../../components/modal) + * [Drawer](../../components/drawer) * [Error Handling](https://www.figma.com/file/N84ebgxXVKZTMVClV2x0VP/Pattern-guideline?node-id=820%3A26&t=azm7arGGygd4x13e-3&fuid=847002822432287235) diff --git a/packages/react-docs/pages/patterns/table-display/index.page.mdx b/packages/react-docs/pages/patterns/table-display/index.page.mdx index 3380ad7b93..e305c8f6cc 100644 --- a/packages/react-docs/pages/patterns/table-display/index.page.mdx +++ b/packages/react-docs/pages/patterns/table-display/index.page.mdx @@ -52,7 +52,7 @@ The footer should be fixed at the bottom of the screen to ensure consistent posi > React Components - * [Table](../components/table) + * [Table](../../components/table) diff --git a/packages/react-docs/pages/styled-system/responsive-values/index.page.mdx b/packages/react-docs/pages/styled-system/responsive-values/index.page.mdx index 8f79fadbe5..19031ab268 100644 --- a/packages/react-docs/pages/styled-system/responsive-values/index.page.mdx +++ b/packages/react-docs/pages/styled-system/responsive-values/index.page.mdx @@ -1,6 +1,6 @@ # Responsive Values -The responsive values rely on the [breakpoints](../theme/breakpoints) defined in the theme configuration. The breakpoints are used to generate the media queries that make the theme responsive. +The responsive values rely on the [breakpoints](../../theme/breakpoints) defined in the theme configuration. The breakpoints are used to generate the media queries that make the theme responsive. | Breakpoint | Media Query | | :--------- | :---------- | diff --git a/packages/react-docs/pages/theme/borders/index.page.mdx b/packages/react-docs/pages/theme/borders/index.page.mdx index 91da119fdd..6b8a15f07c 100644 --- a/packages/react-docs/pages/theme/borders/index.page.mdx +++ b/packages/react-docs/pages/theme/borders/index.page.mdx @@ -61,7 +61,7 @@ Note: Because the specification doesn't define the exact thickness denoted by ea ## Borders vs. Outlines -Borders and [outlines](./outlines) are very similar. However, outlines differ from borders in the following ways: +Borders and [outlines](../outlines) are very similar. However, outlines differ from borders in the following ways: * Outlines never take up space, as they are drawn outside of an element's content. * According to the spec, outlines don't have to be rectangular, although they usually are. diff --git a/packages/react-docs/pages/theme/outlines/index.page.mdx b/packages/react-docs/pages/theme/outlines/index.page.mdx index 977de2dfdc..ab45842b13 100644 --- a/packages/react-docs/pages/theme/outlines/index.page.mdx +++ b/packages/react-docs/pages/theme/outlines/index.page.mdx @@ -62,7 +62,7 @@ Note: Because the specification doesn't define the exact thickness denoted by ea ## Borders vs. outlines -[Borders](./borders) and outlines are very similar. However, outlines differ from borders in the following ways: +[Borders](../borders) and outlines are very similar. However, outlines differ from borders in the following ways: * Outlines never take up space, as they are drawn outside of an element's content. * According to the spec, outlines don't have to be rectangular, although they usually are. diff --git a/packages/react-docs/scripts/update-style-props.mjs b/packages/react-docs/scripts/update-style-props.mjs index d256eeb4ec..4fa36f1a09 100644 --- a/packages/react-docs/scripts/update-style-props.mjs +++ b/packages/react-docs/scripts/update-style-props.mjs @@ -43,7 +43,7 @@ try { const cells = [ '`' + x.prop + '`', '`' + x.properties.join('`, `') + '`', - x.scale ? `[${x.scale}](../theme/${kebabize(x.scale)})` : '', + x.scale ? `[${x.scale}](../../theme/${kebabize(x.scale)})` : '', ]; return '| ' + cells.join(' | ') + ' |'; }));