diff --git a/apps/documentation/package.json b/apps/documentation/package.json index 405ae636..875e21c3 100644 --- a/apps/documentation/package.json +++ b/apps/documentation/package.json @@ -19,6 +19,7 @@ "clsx": "2.1.1", "react": "18.3.1", "react-dom": "18.3.1", + "remark-gfm": "4.0.0", "tuono": "npm:tuono@0.16.9" }, "devDependencies": { diff --git a/apps/documentation/src/components/MdxProvider/MdxProvider.tsx b/apps/documentation/src/components/MdxProvider/MdxProvider.tsx index 3588bf87..b4511698 100644 --- a/apps/documentation/src/components/MdxProvider/MdxProvider.tsx +++ b/apps/documentation/src/components/MdxProvider/MdxProvider.tsx @@ -7,6 +7,7 @@ import MdxQuote from './MdxQuote' import MdxCode from './MdxCode' import { h } from './MdxTitle' import MdxBold from './MdxBold' +import MdxTable from './MdxTable' interface MdxProviderProps { children: ReactNode @@ -30,6 +31,12 @@ export default function MdxProvider({ h5: h(5), h6: h(6), strong: MdxBold, + table: MdxTable, + thead: MdxTable.Thead, + tbody: MdxTable.Tbody, + tr: MdxTable.Tr, + th: MdxTable.Th, + td: MdxTable.Td, }} > {children} diff --git a/apps/documentation/src/components/MdxProvider/MdxTable/MdxTable.tsx b/apps/documentation/src/components/MdxProvider/MdxTable/MdxTable.tsx new file mode 100644 index 00000000..b1c2ef51 --- /dev/null +++ b/apps/documentation/src/components/MdxProvider/MdxTable/MdxTable.tsx @@ -0,0 +1,26 @@ +import type { DetailedHTMLProps, TableHTMLAttributes } from 'react' +import { Table } from '@mantine/core' +import type React from 'react' + +type MdxTableProps = DetailedHTMLProps< + TableHTMLAttributes, + HTMLTableElement +> + +function MdxTable(props: MdxTableProps): React.JSX.Element { + const { children, ...rest } = props + return ( + + {children} +
+ ) +} + +MdxTable.Thead = Table.Thead +MdxTable.Tbody = Table.Tbody +MdxTable.Tr = Table.Tr +MdxTable.Th = Table.Th +MdxTable.Td = Table.Td +MdxTable.Caption = Table.Caption + +export default MdxTable diff --git a/apps/documentation/src/components/MdxProvider/MdxTable/index.ts b/apps/documentation/src/components/MdxProvider/MdxTable/index.ts new file mode 100644 index 00000000..e97e565c --- /dev/null +++ b/apps/documentation/src/components/MdxProvider/MdxTable/index.ts @@ -0,0 +1,3 @@ +import MdxTable from './MdxTable' + +export default MdxTable diff --git a/apps/documentation/src/routes/documentation/components/link.mdx b/apps/documentation/src/routes/documentation/components/link.mdx index 1404aff9..2005ffef 100644 --- a/apps/documentation/src/routes/documentation/components/link.mdx +++ b/apps/documentation/src/routes/documentation/components/link.mdx @@ -32,6 +32,8 @@ For navigating to pages outside of your app (other websites), you should use the The `Link` component behaves similarly to the `` HTML tag, with a few additional features controlled by the following props: -- `href`: `string` (Required) - Relative path to the page in your application. Anchor names (links with hashtags) are also valid. -- `preload`: `boolean` (Defaults to `true`) - Whether to preload the page if the link is within the viewport. -- `scroll`: `boolean` (Defaults to `true`) - Whether to preserve scroll position between navigations. +| Prop | Type | Default value | Description | +| --------- | ------------------- | ------------- | ------------------------------------------------------------------------------------------------- | +| `href` | `string` (Required) | - | Relative path to the page in your application. Anchor names (links with hashtags) are also valid. | +| `preload` | `boolean` | `true` | Whether to preload the page if the link is within the viewport. | +| `scroll` | `boolean` | `true` | Whether to preserve scroll position between navigations. | diff --git a/apps/documentation/src/routes/documentation/hooks/use-router.mdx b/apps/documentation/src/routes/documentation/hooks/use-router.mdx index bec0de8f..c0bbe53d 100644 --- a/apps/documentation/src/routes/documentation/hooks/use-router.mdx +++ b/apps/documentation/src/routes/documentation/hooks/use-router.mdx @@ -7,22 +7,27 @@ import MetaTags from '@/components/MetaTags' import Breadcrumbs from '@/components/Breadcrumbs' - + # useRouter The `useRouter` hook provides access to various data about the current route, as well as methods to navigate between pages, as seen in the below example: -```typescript jsx +```tsx +import { JSX } from 'react' import { useRouter } from 'tuono' -export default function IndexPage() { +export default function IndexPage(): JSX.Element { const router = useRouter() return ( <>

pathname: {router.pathname}

- @@ -30,7 +35,7 @@ export default function IndexPage() { } ``` -## `router` object +## `useRouter` result - `pathname`: `string` - Returns the current path name - `query`: `Record` - This object contains all the query params of the current route @@ -45,6 +50,8 @@ Handles client side page navigation quickly. Useful for internal links, or for w router.push(path, options) ``` -- `path`: `string` - The path of the page you want to navigate to -- `options`: `PushOptions` - Optional config object for additional control - - `scroll`: `boolean` - If `false` the scroll offset will be kept across page navigation. Default `true` +| Prop | Type | Default value | Description | +| ---------------- | ------------------- | ------------- | ----------------------------------------------------------------- | +| `path` | `string` (Required) | - | The path of the page you want to navigate to. | +| `options` | `PushOptions` | - | Optional config object for additional control. | +| `options.scroll` | `boolean` | `true` | If `false` the scroll offset will be kept across page navigation. | diff --git a/apps/documentation/tuono.config.ts b/apps/documentation/tuono.config.ts index 1f516213..47085372 100644 --- a/apps/documentation/tuono.config.ts +++ b/apps/documentation/tuono.config.ts @@ -1,5 +1,6 @@ import type { TuonoConfig } from 'tuono/config' import mdx from '@mdx-js/rollup' +import remarkGfm from 'remark-gfm' const config: TuonoConfig = { vite: { @@ -8,7 +9,13 @@ const config: TuonoConfig = { '@tabler/icons-react': '@tabler/icons-react/dist/esm/icons/index.mjs', }, plugins: [ - { enforce: 'pre', ...mdx({ providerImportSource: '@mdx-js/react' }) }, + { + enforce: 'pre', + ...mdx({ + providerImportSource: '@mdx-js/react', + remarkPlugins: [remarkGfm], + }), + }, ], }, } diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 187f817a..5a8fec8a 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -68,6 +68,9 @@ importers: react-dom: specifier: 18.3.1 version: 18.3.1(react@18.3.1) + remark-gfm: + specifier: 4.0.0 + version: 4.0.0 tuono: specifier: npm:tuono@0.16.9 version: 0.16.9(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(rollup@4.25.0)(sugarss@4.0.1(postcss@8.5.0)) @@ -1591,6 +1594,10 @@ packages: resolution: {integrity: sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA==} engines: {node: '>=10'} + escape-string-regexp@5.0.0: + resolution: {integrity: sha512-/veY75JbMK4j1yjvuUxuVsiS/hr/4iHs9FTT6cgTexxdE0Ly/glccBAkloH/DofkjRbZU3bnoj38mOmhkZ0lHw==} + engines: {node: '>=12'} + eslint-import-resolver-node@0.3.9: resolution: {integrity: sha512-WFj2isz22JahUv+B788TlO3N6zL3nNJGU8CcZbPZvVEkBPaJdCV4vy5wyghty5ROFbCRnm132v8BScu5/1BQ8g==} @@ -2270,13 +2277,37 @@ packages: resolution: {integrity: sha512-o5vL7aDWatOTX8LzaS1WMoaoxIiLRQJuIKKe2wAw6IeULDHaqbiqiggmx+pKvZDb1Sj+pE46Sn1T7lCqfFtg1Q==} engines: {node: '>=16'} + markdown-table@3.0.4: + resolution: {integrity: sha512-wiYz4+JrLyb/DqW2hkFJxP7Vd7JuTDm77fvbM8VfEQdmSMqcImWeeRbHwZjBjIFki/VaMK2BhFi7oUUZeM5bqw==} + math-intrinsics@1.1.0: resolution: {integrity: sha512-/IXtbwEk5HTPyEwyKX6hGkYXxM9nbj64B+ilVJnC/R6B0pH5G4V3b0pVbL7DBj4tkhBAppbQUlf6F6Xl9LHu1g==} engines: {node: '>= 0.4'} + mdast-util-find-and-replace@3.0.2: + resolution: {integrity: sha512-Tmd1Vg/m3Xz43afeNxDIhWRtFZgM2VLyaf4vSTYwudTyeuTneoL3qtWMA5jeLyz/O1vDJmmV4QuScFCA2tBPwg==} + mdast-util-from-markdown@2.0.2: resolution: {integrity: sha512-uZhTV/8NBuw0WHkPTrCqDOl0zVe1BIng5ZtHoDk49ME1qqcjYmmLmOf0gELgcRMxN4w2iuIeVso5/6QymSrgmA==} + mdast-util-gfm-autolink-literal@2.0.1: + resolution: {integrity: sha512-5HVP2MKaP6L+G6YaxPNjuL0BPrq9orG3TsrZ9YXbA3vDw/ACI4MEsnoDpn6ZNm7GnZgtAcONJyPhOP8tNJQavQ==} + + mdast-util-gfm-footnote@2.0.0: + resolution: {integrity: sha512-5jOT2boTSVkMnQ7LTrd6n/18kqwjmuYqo7JUPe+tRCY6O7dAuTFMtTPauYYrMPpox9hlN0uOx/FL8XvEfG9/mQ==} + + mdast-util-gfm-strikethrough@2.0.0: + resolution: {integrity: sha512-mKKb915TF+OC5ptj5bJ7WFRPdYtuHv0yTRxK2tJvi+BDqbkiG7h7u/9SI89nRAYcmap2xHQL9D+QG/6wSrTtXg==} + + mdast-util-gfm-table@2.0.0: + resolution: {integrity: sha512-78UEvebzz/rJIxLvE7ZtDd/vIQ0RHv+3Mh5DR96p7cS7HsBhYIICDBCu8csTNWNO6tBWfqXPWekRuj2FNOGOZg==} + + mdast-util-gfm-task-list-item@2.0.0: + resolution: {integrity: sha512-IrtvNvjxC1o06taBAVJznEnkiHxLFTzgonUdy8hzFVeDun0uTjxxrRGVaNFqkU1wJR3RBPEfsxmU6jDWPofrTQ==} + + mdast-util-gfm@3.0.0: + resolution: {integrity: sha512-dgQEX5Amaq+DuUqf26jJqSK9qgixgd6rYDHAv4aTBuA92cTknZlKpPfa86Z/s8Dj8xsAQpFfBmPUHWJBWqS4Bw==} + mdast-util-mdx-expression@2.0.1: resolution: {integrity: sha512-J6f+9hUp+ldTZqKRSg7Vw5V6MqjATc+3E4gf3CFNcuZNWD8XdyI6zQ8GqH7f8169MM6P7hMBRDVGnn7oHB9kXQ==} @@ -2312,6 +2343,27 @@ packages: micromark-core-commonmark@2.0.2: resolution: {integrity: sha512-FKjQKbxd1cibWMM1P9N+H8TwlgGgSkWZMmfuVucLCHaYqeSvJ0hFeHsIa65pA2nYbes0f8LDHPMrd9X7Ujxg9w==} + micromark-extension-gfm-autolink-literal@2.1.0: + resolution: {integrity: sha512-oOg7knzhicgQ3t4QCjCWgTmfNhvQbDDnJeVu9v81r7NltNCVmhPy1fJRX27pISafdjL+SVc4d3l48Gb6pbRypw==} + + micromark-extension-gfm-footnote@2.1.0: + resolution: {integrity: sha512-/yPhxI1ntnDNsiHtzLKYnE3vf9JZ6cAisqVDauhp4CEHxlb4uoOTxOCJ+9s51bIB8U1N1FJ1RXOKTIlD5B/gqw==} + + micromark-extension-gfm-strikethrough@2.1.0: + resolution: {integrity: sha512-ADVjpOOkjz1hhkZLlBiYA9cR2Anf8F4HqZUO6e5eDcPQd0Txw5fxLzzxnEkSkfnD0wziSGiv7sYhk/ktvbf1uw==} + + micromark-extension-gfm-table@2.1.0: + resolution: {integrity: sha512-Ub2ncQv+fwD70/l4ou27b4YzfNaCJOvyX4HxXU15m7mpYY+rjuWzsLIPZHJL253Z643RpbcP1oeIJlQ/SKW67g==} + + micromark-extension-gfm-tagfilter@2.0.0: + resolution: {integrity: sha512-xHlTOmuCSotIA8TW1mDIM6X2O1SiX5P9IuDtqGonFhEK0qgRI4yeC6vMxEV2dgyr2TiD+2PQ10o+cOhdVAcwfg==} + + micromark-extension-gfm-task-list-item@2.1.0: + resolution: {integrity: sha512-qIBZhqxqI6fjLDYFTBIa4eivDMnP+OZqsNwmQ3xNLE4Cxwc+zfQEfbs6tzAo2Hjq+bh6q5F+Z8/cksrLFYWQQw==} + + micromark-extension-gfm@3.0.0: + resolution: {integrity: sha512-vsKArQsicm7t0z2GugkCKtZehqUm31oeGBV/KVSorWSy8ZlNAv7ytjFhvaryUiCUJYqs+NoE6AFhpQvBTM6Q4w==} + micromark-extension-mdx-expression@3.0.0: resolution: {integrity: sha512-sI0nwhUDz97xyzqJAbHQhp5TfaxEvZZZ2JDqUo+7NvyIYG6BZ5CPPqj2ogUoPJlmXHBnyZUzISg9+oUmU6tUjQ==} @@ -2755,6 +2807,9 @@ packages: rehype-recma@1.0.0: resolution: {integrity: sha512-lqA4rGUf1JmacCNWWZx0Wv1dHqMwxzsDWYMTowuplHF3xH0N/MmrZ/G3BDZnzAkRmxDadujCjaKM2hqYdCBOGw==} + remark-gfm@4.0.0: + resolution: {integrity: sha512-U92vJgBPkbw4Zfu/IiW2oTZLSL3Zpv+uI7My2eq8JxKgqraFdU8YUGicEJCEgSbeaG+QDFqIcwwfMTOEelPxuA==} + remark-mdx@3.1.0: resolution: {integrity: sha512-Ngl/H3YXyBV9RcRNdlYsZujAmhsxwzxpDzpDEhFBVAGthS4GDgnctpDjgFl/ULx5UEDzqtW1cyBSNKqYYrqLBA==} @@ -2764,6 +2819,9 @@ packages: remark-rehype@11.1.1: resolution: {integrity: sha512-g/osARvjkBXb6Wo0XvAeXQohVta8i84ACbenPpoSsxTOQH/Ae0/RGP4WZgnMH5pMLpsj4FG7OHmcIcXxpza8eQ==} + remark-stringify@11.0.0: + resolution: {integrity: sha512-1OSmLd3awB/t8qdoEOMazZkNsfVTeY4fTsgzcQFdXNq8ToTN4ZGwrMnlda4K6smTFKD+GRV6O48i6Z4iKgPPpw==} + resolve-dir@1.0.1: resolution: {integrity: sha512-R7uiTjECzvOsWSfdM0QKFNBVFcK27aHOUwdvK53BcW8zqnGdYp0Fbj82cy54+2A4P2tFM22J5kRfe1R+lM/1yg==} engines: {node: '>=0.10.0'} @@ -4972,6 +5030,8 @@ snapshots: escape-string-regexp@4.0.0: {} + escape-string-regexp@5.0.0: {} + eslint-import-resolver-node@0.3.9: dependencies: debug: 3.2.7 @@ -5767,8 +5827,17 @@ snapshots: markdown-extensions@2.0.0: {} + markdown-table@3.0.4: {} + math-intrinsics@1.1.0: {} + mdast-util-find-and-replace@3.0.2: + dependencies: + '@types/mdast': 4.0.4 + escape-string-regexp: 5.0.0 + unist-util-is: 6.0.0 + unist-util-visit-parents: 6.0.1 + mdast-util-from-markdown@2.0.2: dependencies: '@types/mdast': 4.0.4 @@ -5786,6 +5855,63 @@ snapshots: transitivePeerDependencies: - supports-color + mdast-util-gfm-autolink-literal@2.0.1: + dependencies: + '@types/mdast': 4.0.4 + ccount: 2.0.1 + devlop: 1.1.0 + mdast-util-find-and-replace: 3.0.2 + micromark-util-character: 2.1.1 + + mdast-util-gfm-footnote@2.0.0: + dependencies: + '@types/mdast': 4.0.4 + devlop: 1.1.0 + mdast-util-from-markdown: 2.0.2 + mdast-util-to-markdown: 2.1.2 + micromark-util-normalize-identifier: 2.0.1 + transitivePeerDependencies: + - supports-color + + mdast-util-gfm-strikethrough@2.0.0: + dependencies: + '@types/mdast': 4.0.4 + mdast-util-from-markdown: 2.0.2 + mdast-util-to-markdown: 2.1.2 + transitivePeerDependencies: + - supports-color + + mdast-util-gfm-table@2.0.0: + dependencies: + '@types/mdast': 4.0.4 + devlop: 1.1.0 + markdown-table: 3.0.4 + mdast-util-from-markdown: 2.0.2 + mdast-util-to-markdown: 2.1.2 + transitivePeerDependencies: + - supports-color + + mdast-util-gfm-task-list-item@2.0.0: + dependencies: + '@types/mdast': 4.0.4 + devlop: 1.1.0 + mdast-util-from-markdown: 2.0.2 + mdast-util-to-markdown: 2.1.2 + transitivePeerDependencies: + - supports-color + + mdast-util-gfm@3.0.0: + dependencies: + mdast-util-from-markdown: 2.0.2 + mdast-util-gfm-autolink-literal: 2.0.1 + mdast-util-gfm-footnote: 2.0.0 + mdast-util-gfm-strikethrough: 2.0.0 + mdast-util-gfm-table: 2.0.0 + mdast-util-gfm-task-list-item: 2.0.0 + mdast-util-to-markdown: 2.1.2 + transitivePeerDependencies: + - supports-color + mdast-util-mdx-expression@2.0.1: dependencies: '@types/estree-jsx': 1.0.5 @@ -5891,6 +6017,64 @@ snapshots: micromark-util-symbol: 2.0.1 micromark-util-types: 2.0.1 + micromark-extension-gfm-autolink-literal@2.1.0: + dependencies: + micromark-util-character: 2.1.1 + micromark-util-sanitize-uri: 2.0.1 + micromark-util-symbol: 2.0.1 + micromark-util-types: 2.0.1 + + micromark-extension-gfm-footnote@2.1.0: + dependencies: + devlop: 1.1.0 + micromark-core-commonmark: 2.0.2 + micromark-factory-space: 2.0.1 + micromark-util-character: 2.1.1 + micromark-util-normalize-identifier: 2.0.1 + micromark-util-sanitize-uri: 2.0.1 + micromark-util-symbol: 2.0.1 + micromark-util-types: 2.0.1 + + micromark-extension-gfm-strikethrough@2.1.0: + dependencies: + devlop: 1.1.0 + micromark-util-chunked: 2.0.1 + micromark-util-classify-character: 2.0.1 + micromark-util-resolve-all: 2.0.1 + micromark-util-symbol: 2.0.1 + micromark-util-types: 2.0.1 + + micromark-extension-gfm-table@2.1.0: + dependencies: + devlop: 1.1.0 + micromark-factory-space: 2.0.1 + micromark-util-character: 2.1.1 + micromark-util-symbol: 2.0.1 + micromark-util-types: 2.0.1 + + micromark-extension-gfm-tagfilter@2.0.0: + dependencies: + micromark-util-types: 2.0.1 + + micromark-extension-gfm-task-list-item@2.1.0: + dependencies: + devlop: 1.1.0 + micromark-factory-space: 2.0.1 + micromark-util-character: 2.1.1 + micromark-util-symbol: 2.0.1 + micromark-util-types: 2.0.1 + + micromark-extension-gfm@3.0.0: + dependencies: + micromark-extension-gfm-autolink-literal: 2.1.0 + micromark-extension-gfm-footnote: 2.1.0 + micromark-extension-gfm-strikethrough: 2.1.0 + micromark-extension-gfm-table: 2.1.0 + micromark-extension-gfm-tagfilter: 2.0.0 + micromark-extension-gfm-task-list-item: 2.1.0 + micromark-util-combine-extensions: 2.0.1 + micromark-util-types: 2.0.1 + micromark-extension-mdx-expression@3.0.0: dependencies: '@types/estree': 1.0.6 @@ -6465,6 +6649,17 @@ snapshots: transitivePeerDependencies: - supports-color + remark-gfm@4.0.0: + dependencies: + '@types/mdast': 4.0.4 + mdast-util-gfm: 3.0.0 + micromark-extension-gfm: 3.0.0 + remark-parse: 11.0.0 + remark-stringify: 11.0.0 + unified: 11.0.5 + transitivePeerDependencies: + - supports-color + remark-mdx@3.1.0: dependencies: mdast-util-mdx: 3.0.0 @@ -6489,6 +6684,12 @@ snapshots: unified: 11.0.5 vfile: 6.0.3 + remark-stringify@11.0.0: + dependencies: + '@types/mdast': 4.0.4 + mdast-util-to-markdown: 2.1.2 + unified: 11.0.5 + resolve-dir@1.0.1: dependencies: expand-tilde: 2.0.2