fix: updated storybook to v7

.changeset/purple-bobcats-yell.md

@@ -0,0 +1,5 @@
+---
+'storybook-manifest': minor
+---
+
+Upgraded storybook to v7

.lintstagedrc

@@ -1,9 +1,8 @@
 {
-	"**/*.{ts,tsx,js,jsx}": [
-		"prettier --write",
-		"eslint --fix --max-warnings 0"
-	],
-	"**/*.{md,mdx,yml,json}": [
+	"**/*.{ts,tsx,js,jsx,md,mdx,yml,json}": [
 		"prettier --write"
+	],
+	"**/*.{ts,tsx,js,jsx} !(**/.storybook/*.js)": [
+		"eslint --fix --max-warnings 0"
 	]
-}
+}

apps/storybook/.storybook/main.js

@@ -1,8 +1,24 @@
-module.exports = {
+import { dirname, join } from 'path';
+const config = {
   stories: ['../../../packages/**/*.stories.@(js|jsx|ts|tsx|mdx)'],
-  addons: ['@storybook/addon-links', '@storybook/addon-essentials', '@storybook/addon-a11y'],
-  framework: '@storybook/react',
-  core: {
-    builder: 'webpack5',
+  addons: [
+    getAbsolutePath('@storybook/addon-links'),
+    getAbsolutePath('@storybook/addon-essentials'),
+    getAbsolutePath('@storybook/addon-a11y'),
+  ],
+
+  framework: {
+    name: getAbsolutePath('@storybook/react-webpack5'),
+    options: {},
+  },
+
+  docs: {
+    autodocs: true,
   },
 };
+
+export default config;
+
+function getAbsolutePath(value) {
+  return dirname(require.resolve(join(value, 'package.json')));
+}

apps/storybook/.storybook/preview.jsx

@@ -8,6 +8,11 @@ export const decorators = [
   ),
 ];
 
-export const parameters = {
-  actions: { argTypesRegex: '^on[A-Z].*' },
+const parameters = {
+  decorators: decorators,
+  parameters: {
+    actions: { argTypesRegex: '^on[A-Z].*' },
+  },
 };
+
+export default parameters;

apps/storybook/babel.config.json

@@ -0,0 +1,18 @@
+{
+  "sourceType": "unambiguous",
+  "presets": [
+    [
+      "@babel/preset-env",
+      {
+        "targets": {
+          "chrome": 100,
+          "safari": 15,
+          "firefox": 91
+        }
+      }
+    ],
+    "@babel/preset-typescript",
+    "@babel/preset-react"
+  ],
+  "plugins": []
+}

apps/storybook/package.json

@@ -1,21 +1,26 @@
 {
-  "name": "storybook",
+  "name": "storybook-manifest",
   "version": "0.0.10",
   "private": true,
   "scripts": {
-    "build": "build-storybook -c .storybook -o ./build",
-    "dev": "start-storybook -p 8000 --quiet"
+    "build": "storybook build -c .storybook -o ./build",
+    "dev": "storybook dev -p 8000 --quiet"
   },
   "dependencies": {
     "@project44-manifest/react": "^3.18.1",
     "@project44-manifest/react-icons": "^2.0.0",
-    "@storybook/addon-a11y": "^6.5.16",
-    "@storybook/addon-essentials": "^6.5.16",
-    "@storybook/addon-links": "^6.5.16",
-    "@storybook/builder-webpack5": "^6.5.16",
-    "@storybook/manager-webpack5": "^6.5.16",
-    "@storybook/react": "^6.5.16",
+    "@storybook/addon-a11y": "^7.5.3",
+    "@storybook/addon-essentials": "^7.5.3",
+    "@storybook/addon-links": "^7.5.3",
+    "@storybook/react": "^7.5.3",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
+  },
+  "devDependencies": {
+    "@babel/preset-env": "^7.23.3",
+    "@babel/preset-react": "^7.23.3",
+    "@babel/preset-typescript": "^7.23.3",
+    "@storybook/react-webpack5": "^7.5.3",
+    "storybook": "next"
   }
 }

packages/react/stories/Calendar.stories.tsx

@@ -24,8 +24,15 @@ export const Range = Template.bind({});
 
 Range.decorators = [
   () => (
-    <Box css={{ width: 324 }}>
-      <CalendarRange />
+    <Box css={{ width: 450 }}>
+      <CalendarRange
+        showCalendar
+        showRanges
+        value={{
+          start: new CalendarDate(2022, 7, 2),
+          end: new CalendarDate(2022, 7, 12),
+        }}
+      />
     </Box>
   ),
 ];
@@ -97,7 +104,7 @@ ControlledRange.decorators = [
 
     return (
       <Box css={{ width: 324 }}>
-        <CalendarRange value={value} onChange={setValue} />
+        <CalendarRange showCalendar value={value} onChange={setValue} />
       </Box>
     );
   },