diff --git a/packages/manager-react-components/.storybook/CustomDocsPage.mdx b/packages/manager-react-components/.storybook/CustomDocsPage.mdx new file mode 100644 index 000000000000..389d2f91df73 --- /dev/null +++ b/packages/manager-react-components/.storybook/CustomDocsPage.mdx @@ -0,0 +1,24 @@ +import { + Title, + Subtitle, + Description, + Primary, + ArgsTable, + Stories, +} from '@storybook/addon-docs'; + +
+ +</div> + +<Subtitle /> + +<Description /> + +<Primary /> + +## Properties + +<ArgsTable /> + +<Stories /> diff --git a/packages/manager-react-components/.storybook/main.ts b/packages/manager-react-components/.storybook/main.ts index aa9258722f86..a0aa033683e6 100644 --- a/packages/manager-react-components/.storybook/main.ts +++ b/packages/manager-react-components/.storybook/main.ts @@ -4,6 +4,7 @@ const config: StorybookConfig = { stories: [ '../src/**/*.stories.@(js|jsx|ts|tsx|mdx)', '../src/docs/*.mdx', + '../src/**/*.mdx', '../src/docs/whatsnew/migration-guide/*.mdx', ], addons: [ @@ -22,7 +23,11 @@ const config: StorybookConfig = { }, }, docs: { - autodocs: 'tag', + autodocs: true, + defaultName: 'Technical information', + }, + typescript: { + reactDocgen: 'react-docgen-typescript', // Necessary for extracting TypeScript types }, }; export default config; diff --git a/packages/manager-react-components/.storybook/preview.tsx b/packages/manager-react-components/.storybook/preview.tsx index 17d03e3237e1..456596012845 100644 --- a/packages/manager-react-components/.storybook/preview.tsx +++ b/packages/manager-react-components/.storybook/preview.tsx @@ -6,6 +6,8 @@ import { Preview } from '@storybook/react'; import '../src/tailwind/theme.css'; import i18n from './i18n'; import './storybook.css'; +import CustomDocsPage from './CustomDocsPage.mdx'; +import { themes } from '@storybook/theming'; const mockQueryClient = new QueryClient({ defaultOptions: { @@ -21,19 +23,19 @@ const preview: Preview = { docs: { toc: { contentsSelector: '.sbdocs-content', - headingSelector: 'h2, h3', + headingSelector: 'h1, h2, h3', disable: false, }, source: { excludeDecorators: true, }, + page: CustomDocsPage, + theme: themes.light, }, actions: { argTypesRegex: '^on[A-Z].*' }, controls: { - matchers: { - color: /(background|color)$/i, - date: /Date$/, - }, + expanded: true, + hideNoControlsWarning: true, }, options: { storySort: { diff --git a/packages/manager-react-components/package.json b/packages/manager-react-components/package.json index 5f6ff98bc213..8e3233091cd4 100644 --- a/packages/manager-react-components/package.json +++ b/packages/manager-react-components/package.json @@ -24,7 +24,7 @@ "build:storybook": "storybook build", "prepare": "tsc && vite build", "prettier": "prettier --write \"src/**/*.{ts,tsx,js,mdx}\"", - "start": "storybook dev -p 6006", + "start": "rm -rf dist/.cache/storybook && storybook dev -p 6006", "test": "vitest run", "test:cov": "vitest run --coverage", "test:watch": "vitest" diff --git a/packages/manager-react-components/src/components/ManagerButton/ManagerButton.stories.tsx b/packages/manager-react-components/src/components/ManagerButton/ManagerButton.stories.tsx index 630af0e54be5..00477fe18ac5 100644 --- a/packages/manager-react-components/src/components/ManagerButton/ManagerButton.stories.tsx +++ b/packages/manager-react-components/src/components/ManagerButton/ManagerButton.stories.tsx @@ -13,6 +13,14 @@ export const Default = { const managerSimpleButton: Meta<ManagerButtonProps> = { title: 'Components/Manager Button', component: ManagerButton, + parameters: { + docs: { + description: { + component: + 'The `ManagerButton` component is used to trigger an action or event.', + }, + }, + }, }; export default managerSimpleButton; diff --git a/packages/manager-react-components/src/components/datagrid/datagrid-cursor.stories.tsx b/packages/manager-react-components/src/components/datagrid/datagrid-cursor.stories.tsx index 3d72b96065b8..6270ec05f07e 100644 --- a/packages/manager-react-components/src/components/datagrid/datagrid-cursor.stories.tsx +++ b/packages/manager-react-components/src/components/datagrid/datagrid-cursor.stories.tsx @@ -1,7 +1,6 @@ import React, { useState } from 'react'; import { ColumnSort } from '@tanstack/react-table'; import { withRouter } from 'storybook-addon-react-router-v6'; -import { useSearchParams } from 'react-router-dom'; import { Datagrid } from './datagrid.component'; import { DataGridTextCell } from './text-cell.component'; @@ -27,19 +26,12 @@ const columns = [ }, ]; -const DatagridStory = ({ - items, - isSortable, -}: { - items: Item[]; - isSortable: boolean; -}) => { +const DatagridStory = (args) => { const [sorting, setSorting] = useState<ColumnSort>(); - const [data, setData] = useState(items); - const [searchParams] = useSearchParams(); + const [data, setData] = useState(args.items); const fetchNextPage = () => { - const itemsIndex = data.length; + const itemsIndex = data?.length; const tmp = [...Array(10).keys()].map((_, i) => ({ label: `Item #${i + itemsIndex}`, price: Math.floor(1 + Math.random() * 100), @@ -49,19 +41,13 @@ const DatagridStory = ({ return ( <> - {`${searchParams}` && ( - <> - <pre>Search params: ?{`${searchParams}`}</pre> - <hr /> - </> - )} <Datagrid columns={columns} items={data} - totalItems={data.length} - hasNextPage={data.length > 0 && data.length < 30} + totalItems={data?.length} + hasNextPage={data?.length > 0 && data.length < 30} onFetchNextPage={fetchNextPage} - {...(isSortable + {...(args.isSortable ? { sorting, onSortChange: setSorting, @@ -73,34 +59,39 @@ const DatagridStory = ({ ); }; -export const Empty: any = { - args: { - items: [], - }, +export const Basic = DatagridStory.bind({}); + +Basic.args = { + columns: columns, + items: [...Array(10).keys()].map((_, i) => ({ + label: `Item #${i}`, + price: Math.floor(1 + Math.random() * 100), + })), + totalItems: 20, + isSortable: false, + onFetchNextPage: true, }; -export const Basic = { - args: { - items: [...Array(10).keys()].map((_, i) => ({ - label: `Item #${i}`, - price: Math.floor(1 + Math.random() * 100), - })), - isSortable: false, - }, +export const Empty = DatagridStory.bind({}); + +Empty.args = { + columns: columns, + items: [], }; -export const Sortable = { - args: { - items: [...Array(10).keys()].map((_, i) => ({ - label: `Item #${i}`, - price: Math.floor(1 + Math.random() * 100), - })), - isSortable: true, - }, +export const Sortable = DatagridStory.bind({}); + +Sortable.args = { + columns: columns, + items: [...Array(10).keys()].map((_, i) => ({ + label: `Item #${i}`, + price: Math.floor(1 + Math.random() * 100), + })), + isSortable: true, }; export default { title: 'Components/Datagrid Cursor', - component: DatagridStory, + component: Datagrid, decorators: [withRouter], }; diff --git a/packages/manager-react-components/src/components/datagrid/datagrid.stories.tsx b/packages/manager-react-components/src/components/datagrid/datagrid.stories.tsx index 582934f980fa..3d3ac09ab539 100644 --- a/packages/manager-react-components/src/components/datagrid/datagrid.stories.tsx +++ b/packages/manager-react-components/src/components/datagrid/datagrid.stories.tsx @@ -84,44 +84,38 @@ const DatagridStory = ({ ); }; -export const Empty: any = { - args: { - items: [], - }, -}; +export const Basic = DatagridStory.bind({}); -export const Basic = { - args: { - items: [...Array(15).keys()].map((_, i) => ({ - label: `Item #${i}`, - price: Math.floor(1 + Math.random() * 100), - })), - }, +Basic.args = { + columns: columns, + items: [...Array(50).keys()].map((_, i) => ({ + label: `Item #${i}`, + price: Math.floor(1 + Math.random() * 100), + })), + isPaginated: true, + isSortable: true, }; -export const Sortable = { - args: { - items: [...Array(15).keys()].map((_, i) => ({ - label: `Item #${i}`, - price: Math.floor(1 + Math.random() * 100), - })), - isSortable: true, - }, +export const Empty = DatagridStory.bind({}); + +Empty.args = { + columns: columns, + items: [], }; -export const Pagination = { - args: { - items: [...Array(50).keys()].map((_, i) => ({ - label: `Item #${i}`, - price: Math.floor(1 + Math.random() * 100), - })), - isPaginated: true, - isSortable: true, - }, +export const Sortable = DatagridStory.bind({}); + +Sortable.args = { + columns: columns, + items: [...Array(10).keys()].map((_, i) => ({ + label: `Item #${i}`, + price: Math.floor(1 + Math.random() * 100), + })), + isSortable: true, }; export default { title: 'Components/Datagrid Paginated', - component: DatagridStory, + component: Datagrid, decorators: [withRouter], }; diff --git a/packages/manager-react-components/src/docs/introduction.mdx b/packages/manager-react-components/src/docs/introduction.mdx index 9980f0f42b4a..afafd0510af0 100644 --- a/packages/manager-react-components/src/docs/introduction.mdx +++ b/packages/manager-react-components/src/docs/introduction.mdx @@ -1,6 +1,6 @@ import { Meta } from '@storybook/addon-docs/blocks'; import { Links, LinkType } from './../index.ts'; -import { version, dependencies } from './../../package.json'; +import { version, devDependencies } from './../../package.json'; <Meta title="Manager React Components/Introduction" /> @@ -19,7 +19,7 @@ import { version, dependencies } from './../../package.json'; <div> <Links type={LinkType.external} - label={`@ovhcloud/ods-components and @ovhcloud/ods-themes version ${dependencies['@ovhcloud/ods-components']}`} + label={`@ovhcloud/ods-components and @ovhcloud/ods-themes version ${devDependencies['@ovhcloud/ods-components']}`} href="https://ovh.github.io/design-system/v18.3.0/?path=/docs/ovhcloud-design-system-welcome--docs" target="_blank" />