Update Storybook -> v7, but better

Author: thomasmost

packages/react-code-blocks/.babelrc.json

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

packages/react-code-blocks/.storybook/config.js renamed to packages/react-code-blocks/.storybook/config.ts

@@ -0,0 +1,24 @@
+// .storybook/main.ts
+
+// Replace your-framework with the framework you are using (e.g., react-webpack5, vue3-vite)
+import type { StorybookConfig } from '@storybook/react-webpack5';
+
+const config: StorybookConfig = {
+  framework: "@storybook/react-webpack5",
+  stories: ['../stories/**/*.stories.(ts|tsx)'],
+  addons: ["@storybook/addon-actions", "@storybook/addon-links", "@storybook/addon-docs", "@storybook/addon-knobs"],
+  features: {
+    storyStoreV7: false,
+  },
+  core: {
+    builder: {
+      name: '@storybook/builder-webpack5',
+      options: {
+        fsCache: true,
+        lazyCompilation: true,
+      },
+    },
+  },
+};
+
+export default config;

packages/react-code-blocks/.storybook/main.js

@@ -8,7 +8,9 @@
     "mdx"
   ],
   "author": "rajinwonderland",
-  "maintainers": ["thomasmost"],
+  "maintainers": [
+    "thomasmost"
+  ],
   "version": "0.1.2",
   "homepage": "https://react-code-blocks.rajinwonderland.vercel.app",
   "license": "MIT",
@@ -27,8 +29,8 @@
     "test": "tsdx test --passWithNoTests",
     "lint": "tsdx lint",
     "prepare": "tsdx build",
-    "storybook": "start-storybook -p 6006",
-    "build-storybook": "build-storybook"
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build"
   },
   "peerDependencies": {
     "react": ">=16"
@@ -46,16 +48,20 @@
   },
   "module": "dist/react-code-blocks.esm.js",
   "devDependencies": {
-    "@storybook/addon-actions": "^5.3.18",
-    "@storybook/addon-console": "^1.2.1",
-    "@storybook/addon-docs": "^5.3.18",
-    "@storybook/addon-info": "^5.3.18",
-    "@storybook/addon-knobs": "^5.3.19",
-    "@storybook/addon-links": "^5.3.18",
-    "@storybook/addon-storysource": "^5.3.18",
-    "@storybook/addon-viewport": "^5.3.18",
-    "@storybook/addons": "^5.3.18",
-    "@storybook/react": "^5.3.18",
+    "@babel/preset-env": "^7.22.9",
+    "@babel/preset-react": "^7.22.5",
+    "@babel/preset-typescript": "^7.22.5",
+    "@storybook/addon-actions": "^7.1.1",
+    "@storybook/addon-console": "^2.0.0",
+    "@storybook/addon-docs": "^7.1.1",
+    "@storybook/addon-info": "^5.3.21",
+    "@storybook/addon-knobs": "^7.0.2",
+    "@storybook/addon-links": "^7.1.1",
+    "@storybook/addon-storysource": "^7.1.1",
+    "@storybook/addon-viewport": "^7.1.1",
+    "@storybook/addons": "^7.1.1",
+    "@storybook/react": "^7.1.1",
+    "@storybook/react-webpack5": "^7.1.1",
     "@types/color": "^3.0.1",
     "@types/enzyme": "^3.10.5",
     "@types/he": "^1.1.1",
@@ -68,6 +74,7 @@
     "react": "^16.13.1",
     "react-docgen-typescript-loader": "^3.7.2",
     "react-dom": "^16.13.1",
+    "storybook": "^7.1.1",
     "ts-loader": "^6.2.2",
     "tsdx": "^0.13.2",
     "typescript": "^5.1.6",

packages/react-code-blocks/.storybook/main.ts

@@ -1,9 +1,4 @@
-import React, { PropsWithChildren } from 'react';
 import { withTheme } from 'styled-components';
-import Code, { CodeProps } from './components/Code';
+import Code from './components/Code';
 
-const CodeWithTheme = withTheme(Code);
-
-export default function(props: PropsWithChildren<CodeProps>) {
-  return <CodeWithTheme {...props} />;
-}
+export default withTheme(Code);

packages/react-code-blocks/package.json

@@ -1,9 +1,4 @@
-import React, { PropsWithChildren } from 'react';
 import { withTheme } from 'styled-components';
-import CodeBlock, { CodeBlockProps } from './components/CodeBlock';
+import CodeBlock from './components/CodeBlock';
 
-const CodeBlockWithTheme = withTheme(CodeBlock);
-
-export default function(props: PropsWithChildren<CodeBlockProps>) {
-  return <CodeBlockWithTheme {...props} />;
-}
+export default withTheme(CodeBlock);

packages/react-code-blocks/src/ThemedCode.tsx

@@ -1,8 +1,3 @@
-import React, { PropsWithChildren } from 'react';
 import { withTheme } from 'styled-components';
-import CopyBlock, { CopyBlockProps } from './components/CopyBlock';
-const CopyBlockWithTheme = withTheme(CopyBlock);
-
-export default function(props: PropsWithChildren<CopyBlockProps>) {
-  return <CopyBlockWithTheme {...props} />;
-}
+import CopyBlock from './components/CopyBlock';
+export default withTheme(CopyBlock);

packages/react-code-blocks/src/ThemedCodeBlock.tsx

@@ -1,11 +1,4 @@
-import { SnippetProps } from 'components/Snippet/Snippet';
-import React, { PropsWithChildren } from 'react';
 import { withTheme } from 'styled-components';
 import Snippet from './components/Snippet';
 
-// @ts-ignore
-const SnippetWithTheme = withTheme(Snippet);
-
-export default function(props: PropsWithChildren<SnippetProps>) {
-  return <SnippetWithTheme {...props} />;
-}
+export default withTheme(Snippet);