Upgrade to storybook v8 + vite

This remove dependency to outdated CRA/webpack
Collaborne · Mar 22, 2024 · a839379 · a839379
1 parent 3d51cab
commit a839379
Show file tree

Hide file tree

Showing 19 changed files with 19,479 additions and 57,465 deletions.
diff --git a/.storybook/main.js b/.storybook/main.js
diff --git a/.storybook/main.ts b/.storybook/main.ts
@@ -0,0 +1,15 @@
+import type { StorybookConfig } from '@storybook/react-vite';
+
+const config: StorybookConfig = {
+	stories: ['./stories/**/*.stories.@(ts|tsx)'],
+	addons: [
+		'@storybook/addon-actions',
+		'@storybook/addon-controls',
+		'@storybook/addon-toolbars',
+	],
+	framework: {
+		name: '@storybook/react-vite',
+		options: {},
+	},
+};
+export default config;
diff --git a/.storybook/preview.js b/.storybook/preview.js
diff --git a/.storybook/preview.ts b/.storybook/preview.ts
@@ -0,0 +1,21 @@
+import type { Preview } from '@storybook/react';
+
+const preview: Preview = {
+	parameters: {
+		backgrounds: {
+			default: 'light',
+			values: [
+				{
+					name: 'light',
+					value: '#fafafa',
+				},
+				{
+					name: 'dark',
+					value: '#303030',
+				},
+			],
+		},
+	},
+};
+
+export default preview;
diff --git a/.storybook/stories/basic.stories.tsx b/.storybook/stories/basic.stories.tsx
@@ -3,7 +3,6 @@ import { useCallback } from 'react';
 
 import { Board, Card, Column } from '../../src';
 
-import { withDescription } from '../utils';
 import { useColumns, COLUMNS } from './utils/columns';
 import { withTheme } from './utils/with-theme';
 
@@ -52,7 +51,4 @@ function BasicStory() {
 	);
 }
 
-export const Basic = withDescription(
-	'The Kanban board provides columns and cards that can be dragged around',
-	() => <BasicStory />,
-);
+export const Basic = () => <BasicStory />;
diff --git a/.storybook/stories/custom-add-column-button.stories.tsx b/.storybook/stories/custom-add-column-button.stories.tsx
@@ -1,6 +1,5 @@
 import { Board } from '../../src';
 
-import { withDescription } from '../utils';
 import { useColumns, COLUMNS } from './utils/columns';
 import { withTheme } from './utils/with-theme';
 
@@ -24,7 +23,4 @@ function AddColumnButtonStory() {
 	);
 }
 
-export const AddColumnButton = withDescription(
-	'Add button can be changed',
-	() => <AddColumnButtonStory />,
-);
+export const AddColumnButton = () => <AddColumnButtonStory />;
diff --git a/.storybook/stories/custom-card.stories.tsx b/.storybook/stories/custom-card.stories.tsx
@@ -2,7 +2,6 @@ import { DraggableProvided } from 'react-beautiful-dnd';
 
 import { Board, Card } from '../../src';
 
-import { withDescription } from '../utils';
 import { useColumns, COLUMNS } from './utils/columns';
 import { withTheme } from './utils/with-theme';
 
@@ -46,7 +45,4 @@ function CustomCardStory() {
 	);
 }
 
-export const CustomCard = withDescription(
-	'Card renderer can be changed',
-	() => <CustomCardStory />,
-);
+export const CustomCard = () => <CustomCardStory />;
diff --git a/.storybook/stories/custom-column.stories.tsx b/.storybook/stories/custom-column.stories.tsx
@@ -5,7 +5,6 @@ import CallToAction from '@mui/icons-material/CallToAction';
 
 import { Board, Column } from '../../src';
 
-import { withDescription } from '../utils';
 import { useColumns, COLUMNS } from './utils/columns';
 import { withTheme } from './utils/with-theme';
 
@@ -40,10 +39,7 @@ function ColumnActionsStory() {
 	);
 }
 
-export const ColumnActions = withDescription(
-	'The column header (actions) can be customized',
-	() => <ColumnActionsStory />,
-);
+export const ColumnActions = () => <ColumnActionsStory />;
 
 function ColumnNameStory() {
 	const [columns, setColumns, createColumn, createCard] = useColumns(COLUMNS);
@@ -61,7 +57,4 @@ function ColumnNameStory() {
 	);
 }
 
-export const ColumnName = withDescription(
-	'The column header (name) can be customized',
-	() => <ColumnNameStory />,
-);
+export const ColumnName = () => <ColumnNameStory />;
diff --git a/.storybook/stories/empty.stories.tsx b/.storybook/stories/empty.stories.tsx
@@ -1,6 +1,5 @@
 import { Board, Column } from '../../src';
 
-import { withDescription } from '../utils';
 import { useColumns } from './utils/columns';
 import { withTheme } from './utils/with-theme';
 
@@ -25,6 +24,4 @@ function EmptyStory() {
 	);
 }
 
-export const Empty = withDescription('A board can be empty initially', () => (
-	<EmptyStory />
-));
+export const Empty = () => <EmptyStory />;
diff --git a/.storybook/stories/external-change.stories.tsx b/.storybook/stories/external-change.stories.tsx
@@ -3,7 +3,6 @@ import Button from '@mui/material/Button';
 
 import { Board } from '../../src';
 
-import { withDescription } from '../utils';
 import { useColumns, COLUMNS } from './utils/columns';
 import { withTheme } from './utils/with-theme';
 
@@ -31,7 +30,4 @@ function ExternalChangeStory() {
 	);
 }
 
-export const ExternalChange = withDescription(
-	'Changing the data from the outside requires re-creating the component',
-	() => <ExternalChangeStory />,
-);
+export const ExternalChange = () => <ExternalChangeStory />;
diff --git a/.storybook/stories/generic-data.stories.tsx b/.storybook/stories/generic-data.stories.tsx
@@ -4,7 +4,6 @@ import CardContent from '@mui/material/CardContent';
 
 import { Board, Card, Column } from '../../src';
 
-import { withDescription } from '../utils';
 import { COLUMNS } from './utils/columns';
 import { withTheme } from './utils/with-theme';
 
@@ -66,7 +65,4 @@ function GenericDataStory() {
 	);
 }
 
-export const GenericData = withDescription(
-	'The board handles generic data types and provides the correctly typed "card" in the render prop',
-	() => <GenericDataStory />,
-);
+export const GenericData = () => <GenericDataStory />;
diff --git a/.storybook/stories/i18n.stories.tsx b/.storybook/stories/i18n.stories.tsx
@@ -1,6 +1,5 @@
 import { Board, Intl } from '../../src';
 
-import { withDescription } from '../utils';
 import { useColumns, COLUMNS } from './utils/columns';
 import { withTheme } from './utils/with-theme';
 
@@ -29,8 +28,5 @@ function I18nStory() {
 	);
 }
 
-export const I18n = withDescription(
-	'The `intl` parameter can be used to configure the texts in the board controls',
-	() => <I18nStory />,
-);
+export const I18n = () => <I18nStory />;
 I18n.storyName = 'I18n';
diff --git a/.storybook/stories/readonly.stories.tsx b/.storybook/stories/readonly.stories.tsx
@@ -1,6 +1,5 @@
 import { Board } from '../../src';
 
-import { withDescription } from '../utils';
 import { useColumns, COLUMNS } from './utils/columns';
 import { withTheme } from './utils/with-theme';
 
@@ -16,18 +15,12 @@ function ReadOnlyStory() {
 	return <Board columns={columns} onChange={setColumns} />;
 }
 
-export const ReadOnly = withDescription(
-	'By not providing the `createColumn` and/or `createCard` parameters the board no longer allows creating columns and cards, respectively.',
-	() => <ReadOnlyStory />,
-);
+export const ReadOnly = () => <ReadOnlyStory />;
 
 function ViewOnlyStory() {
 	const [columns] = useColumns(COLUMNS);
 
 	return <Board columns={columns} />;
 }
 
-export const ViewOnly = withDescription(
-	'By not providing any callbacks the board will only show the content',
-	() => <ViewOnlyStory />,
-);
+export const ViewOnly = () => <ViewOnlyStory />;
diff --git a/.storybook/stories/styling.stories.tsx b/.storybook/stories/styling.stories.tsx
@@ -2,7 +2,6 @@ import { makeStyles } from 'tss-react/mui';
 
 import { Board, Column } from '../../src';
 
-import { withDescription } from '../utils';
 import { useColumns } from './utils/columns';
 import { withTheme } from './utils/with-theme';
 
@@ -87,7 +86,4 @@ function StylingStory() {
 	);
 }
 
-export const Styling = withDescription(
-	'The columns of the board can be styled',
-	() => <StylingStory />,
-);
+export const Styling = () => <StylingStory />;
diff --git a/.storybook/stories/utils/with-theme.tsx b/.storybook/stories/utils/with-theme.tsx
@@ -1,7 +1,8 @@
 import { createTheme, CssBaseline } from '@mui/material';
 import { ThemeProvider } from '@mui/material/styles';
+import { StoryFn } from '@storybook/react';
 
-import { StoryContext } from '@storybook/addons';
+import type { StoryContext } from '@storybook/types';
 
 const theme = createTheme({
 	components: {
@@ -17,8 +18,10 @@ const theme = createTheme({
 	},
 });
 
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-export const withTheme = (Story: any, context: StoryContext): JSX.Element => {
+export const withTheme = (
+	Story: StoryFn,
+	context: StoryContext,
+): JSX.Element => {
 	return (
 		<ThemeProvider theme={theme}>
 			<CssBaseline />

diff --git a/.storybook/utils.ts b/.storybook/utils.ts