diff --git a/packages/ui/.storybook/main.js b/packages/ui/.storybook/main.js
deleted file mode 100644
index 7ec0c6f1b..000000000
--- a/packages/ui/.storybook/main.js
+++ /dev/null
@@ -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'
-};
diff --git a/packages/ui/.storybook/main.ts b/packages/ui/.storybook/main.ts
new file mode 100644
index 000000000..0b3a19400
--- /dev/null
+++ b/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;
diff --git a/packages/ui/.storybook/preview-head.html b/packages/ui/.storybook/preview-head.html
new file mode 100644
index 000000000..05da1e9df
--- /dev/null
+++ b/packages/ui/.storybook/preview-head.html
@@ -0,0 +1,3 @@
+
\ No newline at end of file
diff --git a/packages/ui/.storybook/preview.js b/packages/ui/.storybook/preview.js
deleted file mode 100644
index 27ab38a36..000000000
--- a/packages/ui/.storybook/preview.js
+++ /dev/null
@@ -1,11 +0,0 @@
-import '../style/tailwind.pcss';
-
-export const parameters = {
- actions: { argTypesRegex: '^on[A-Z].*' },
- controls: {
- matchers: {
- color: /(background|color)$/i,
- date: /Date$/
- }
- }
-};
diff --git a/packages/ui/.storybook/preview.ts b/packages/ui/.storybook/preview.ts
new file mode 100644
index 000000000..21d717a8b
--- /dev/null
+++ b/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;
diff --git a/packages/ui/package.json b/packages/ui/package.json
index d225f02c4..db7fc4f99 100644
--- a/packages/ui/package.json
+++ b/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",
diff --git a/packages/ui/src/Button.stories.tsx b/packages/ui/src/Button.stories.tsx
index 077f11080..190ba9f8a 100644
--- a/packages/ui/src/Button.stories.tsx
+++ b/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;
+} as Meta;
const Template: ComponentStory = (args) => ;
diff --git a/packages/ui/src/Button.tsx b/packages/ui/src/Button.tsx
index 1b3bae47d..a34317807 100644
--- a/packages/ui/src/Button.tsx
+++ b/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',
diff --git a/packages/ui/tailwind.config.js b/packages/ui/tailwind.config.js
index 7db4f5f4e..4c7b03551 100644
--- a/packages/ui/tailwind.config.js
+++ b/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');
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index a9da943f1..9b15ef7c3 100644
Binary files a/pnpm-lock.yaml and b/pnpm-lock.yaml differ