storybook v7 (#645)

storybook b7

packages/ui/.storybook/main.js

@@ -1,34 +0,0 @@
-module.exports = {
-	stories: ['../src/**/*.stories.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
-	addons: [
-		'@storybook/addon-links',
-		'@storybook/addon-essentials',
-		'@storybook/addon-interactions',
-		'@storybook/preset-scss',
-		{
-			name: '@storybook/addon-postcss',
-			options: {
-				postcssLoaderOptions: {
-					implementation: require('postcss')
-				}
-			}
-		},
-		'storybook-tailwind-dark-mode'
-	],
-	webpackFinal: async (config) => {
-		config.module.rules.push({
-			test: /\.scss$/,
-			use: ['style-loader', 'css-loader', 'postcss-loader', 'sass-loader']
-		});
-		config.module.rules.push({
-			test: /\.pcss$/,
-			use: ['style-loader', 'css-loader', 'postcss-loader']
-		});
-
-		return config;
-	},
-	core: {
-		builder: '@storybook/builder-webpack5'
-	},
-	framework: '@storybook/react'
-};

packages/ui/.storybook/main.ts

@@ -0,0 +1,18 @@
+import type { StorybookConfig } from '@storybook/react-vite';
+
+const config: StorybookConfig = {
+	stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
+	addons: [
+		'@storybook/addon-links',
+		'@storybook/addon-essentials',
+		'@storybook/addon-interactions'
+	],
+	framework: {
+		name: '@storybook/react-vite',
+		options: {}
+	},
+	docs: {
+		autodocs: 'tag'
+	}
+};
+export default config;

packages/ui/.storybook/preview-head.html

@@ -0,0 +1,3 @@
+<script>
+  window.global = window;
+</script>

packages/ui/.storybook/preview.js

@@ -1,11 +0,0 @@
-import '../style/tailwind.pcss';
-
-export const parameters = {
-	actions: { argTypesRegex: '^on[A-Z].*' },
-	controls: {
-		matchers: {
-			color: /(background|color)$/i,
-			date: /Date$/
-		}
-	}
-};

packages/ui/.storybook/preview.ts

@@ -0,0 +1,16 @@
+import type { Preview } from '@storybook/react';
+import '../style/style.scss';
+
+const preview: Preview = {
+	parameters: {
+		actions: { argTypesRegex: '^on[A-Z].*' },
+		controls: {
+			matchers: {
+				color: /(background|color)$/i,
+				date: /Date$/
+			}
+		}
+	}
+};
+
+export default preview;

packages/ui/package.json

@@ -14,11 +14,11 @@
 		"./package.json": "./package.json"
 	},
 	"scripts": {
-		"storybook": "start-storybook -p 6006",
 		"storybook:build": "build-storybook",
 		"lint": "eslint src",
 		"typecheck": "tsc -b",
-		"build": "tsc"
+		"build": "tsc",
+		"build-storybook": "storybook build"
 	},
 	"dependencies": {
 		"@headlessui/react": "^1.7.3",
@@ -48,27 +48,24 @@
 	"devDependencies": {
 		"@babel/core": "^7.19.3",
 		"@sd/config": "workspace:*",
-		"@storybook/addon-actions": "^6.5.12",
-		"@storybook/addon-essentials": "^6.5.12",
-		"@storybook/addon-interactions": "^6.5.12",
-		"@storybook/addon-links": "^6.5.12",
-		"@storybook/addon-postcss": "2.0.0",
-		"@storybook/builder-webpack5": "^6.5.12",
-		"@storybook/manager-webpack5": "^6.5.12",
-		"@storybook/preset-scss": "^1.0.3",
-		"@storybook/react": "^6.5.12",
-		"@storybook/testing-library": "^0.0.13",
+		"@storybook/addon-essentials": "^7.0.0-rc.9",
+		"@storybook/addon-interactions": "^7.0.0-rc.9",
+		"@storybook/addon-links": "^7.0.0-rc.9",
+		"@storybook/blocks": "^7.0.0-rc.9",
+		"@storybook/react-vite": "^7.0.0-rc.9",
 		"@tailwindcss/line-clamp": "^0.4.2",
 		"@tailwindcss/typography": "^0.5.7",
+		"@types/node": "^18.15.1",
 		"@types/react": "^18.0.21",
 		"@types/react-dom": "^18.0.6",
 		"autoprefixer": "^10.4.12",
 		"babel-loader": "^8.2.5",
 		"css-loader": "^6.7.1",
 		"postcss-loader": "^7.0.1",
+		"prop-types": "^15.8.1",
 		"sass": "^1.55.0",
 		"sass-loader": "^13.0.2",
-		"storybook": "^6.5.12",
+		"storybook": "^7.0.0-rc.9",
 		"storybook-tailwind-dark-mode": "^1.0.15",
 		"style-loader": "^3.3.1",
 		"tailwindcss": "^3.1.8",

packages/ui/src/Button.stories.tsx

@@ -1,4 +1,4 @@
-import { ComponentMeta, ComponentStory } from '@storybook/react';
+import { ComponentStory, Meta } from '@storybook/react';
 import { Button } from './Button';
 
 export default {
@@ -13,7 +13,7 @@ export default {
 	args: {
 		children: 'Button'
 	}
-} as ComponentMeta<typeof Button>;
+} as Meta<typeof Button>;
 
 const Template: ComponentStory<typeof Button> = (args) => <Button {...args} />;
 

packages/ui/src/Button.tsx

@@ -29,9 +29,6 @@ const styles = cva(
 	],
 	{
 		variants: {
-			pressEffect: {
-				true: 'active:translate-y-[1px]'
-			},
 			size: {
 				icon: '!p-1',
 				lg: 'text-md py-1.5 px-3 font-medium',

packages/ui/tailwind.config.js

@@ -2,4 +2,4 @@
 // const plugin = require('tailwindcss/plugin');
 // const defaultTheme = require('tailwindcss/defaultTheme');
 
-module.exports = require('./style/tailwind');
+module.exports = require('./style/tailwind')('web');