Revert "storybook v6 -> v7"

.eslintrc.js

@@ -168,7 +168,6 @@ module.exports = {
         // I realize it's silly of me, but I'll turn it off here for the sake of specs for once.
         "jsx-a11y/click-events-have-key-events": "off",
         "jsx-a11y/no-static-element-interactions": "off",
-        "react-hooks/rules-of-hooks": "off",
       },
     },
     {

.scaffdog/component.md

@@ -67,17 +67,15 @@ describe("{{ inputs.name | pascal }} component testing", () => {
 
 ```typescript
 import * as React from "react";
-import { StoryObj } from "@storybook/react";
+import { Story } from "@storybook/react/types-6-0";
 import {{ inputs.name | pascal }}, { {{ inputs.name | pascal }}Props } from "./{{ inputs.name | pascal }}";
 
 export default {
   title: "Components/〇〇/{{ inputs.name | pascal }}",
   component: {{ inputs.name | pascal }},
 };
 
-export const Example: StoryObj<{{ inputs.name | pascal }}Props> = {
-  render: (args) => (
-    <{{ inputs.name | pascal }} {...args} />
-  )
-};
+export const Example: Story<{{ inputs.name | pascal }}Props> = (args) => (
+  <{{ inputs.name | pascal }} {...args} />
+);
 ```

.storybook/main.js

@@ -8,25 +8,26 @@ module.exports = {
     "@storybook/addon-essentials",
     "@storybook/addon-links",
     "@storybook/addon-storysource",
+    "@storybook/addon-postcss",
     {
       // MEMO: included in addon-essentials
       name: "@storybook/addon-docs",
       options: {
-        csfPluginOptions: {
+        sourceLoaderOptions: {
           injectStoryParameters: false,
         },
       },
     },
-    "@storybook/addon-mdx-gfm",
   ],
-  features: {
-    babelModeV7: true,
+  reactOptions: {
+    // TODO: fix warn "Rendered more hooks than during the previous render."
+    // strictMode: true,
   },
-  framework: {
-    name: "@storybook/react-webpack5",
-    options: {},
-  },
-  docs: {
-    autodocs: true,
+  babel: async (options) => ({
+    ...options,
+    plugins: [["@babel/plugin-proposal-class-properties", { loose: true }]],
+  }),
+  core: {
+    builder: "webpack5",
   },
 };

.storybook/preview.js

@@ -1,5 +1,6 @@
 import * as React from "react";
 import { ThemeProvider, createTheme } from "../src/themes";
+import "@storybook/addon-console";
 
 const theme = createTheme();
 

package.json

@@ -18,8 +18,8 @@
     "build": "NODE_ENV=production rollup -c",
     "start": "rollup -c -w",
     "playground": "yarn build && cd testEnv && yarn install && yarn start",
-    "storybook": "storybook dev -p 6006",
-    "build-storybook": "storybook build",
+    "storybook": "start-storybook -p 6006",
+    "build-storybook": "build-storybook",
     "lint": "tsc && eslint 'src/**/*.{ts,tsx}' && prettier --check 'src/**/*.{ts,tsx}'",
     "format": "prettier --write 'src/**/*.{ts,tsx}'",
     "generate": "yarn scaffdog generate"
@@ -39,19 +39,18 @@
     "styled-components": ">= 5.X"
   },
   "devDependencies": {
-    "@babel/preset-env": "^7.21.4",
-    "@babel/preset-react": "^7.18.6",
-    "@babel/preset-typescript": "^7.21.4",
     "@rollup/plugin-commonjs": "24.1.0",
     "@rollup/plugin-node-resolve": "15.0.0",
     "@rollup/plugin-typescript": "11.1.0",
     "@rollup/plugin-url": "8.0.0",
-    "@storybook/addon-essentials": "7.1.0-alpha.8",
-    "@storybook/addon-links": "7.1.0-alpha.8",
-    "@storybook/addon-mdx-gfm": "7.1.0-alpha.8",
-    "@storybook/addon-storysource": "7.1.0-alpha.8",
-    "@storybook/react": "7.1.0-alpha.8",
-    "@storybook/react-webpack5": "7.1.0-alpha.8",
+    "@storybook/addon-console": "1.2.3",
+    "@storybook/addon-essentials": "6.5.9",
+    "@storybook/addon-links": "6.5.9",
+    "@storybook/addon-postcss": "2.0.0",
+    "@storybook/addon-storysource": "6.5.9",
+    "@storybook/builder-webpack5": "6.5.12",
+    "@storybook/manager-webpack5": "6.5.12",
+    "@storybook/react": "6.5.9",
     "@testing-library/jest-dom": "5.16.4",
     "@testing-library/react": "14.0.0",
     "@types/jest": "28.1.1",
@@ -81,7 +80,6 @@
     "rollup-plugin-peer-deps-external": "2.2.4",
     "rollup-plugin-terser": "7.0.2",
     "scaffdog": "2.5.0",
-    "storybook": "7.1.0-alpha.8",
     "styled-components": "5.3.5",
     "ts-jest": "28.0.4",
     "typescript": "4.9.3"

src/components/Accordion/Accordion.stories.tsx

@@ -1,5 +1,5 @@
 import * as React from "react";
-import { StoryObj } from "@storybook/react";
+import { Story } from "@storybook/react/types-6-0";
 import Accordion, { AccordionProps } from "./Accordion";
 
 export default {
@@ -13,22 +13,64 @@ export default {
   },
 };
 
-export const Example: StoryObj<AccordionProps> = {
-  render: (args) => (
+export const Example: Story<AccordionProps> = (args) => (
+  <>
     <Accordion
       title={args.title}
       disabled={args.disabled}
       expanded={args.expanded}
     >
       <div style={{ padding: "4px 8px" }}>{args.children}</div>
     </Accordion>
-  ),
-};
+  </>
+);
+
+export const Multiple: Story<AccordionProps> = () => (
+  <>
+    <Accordion title="title1">
+      <div style={{ padding: "4px 8px" }}>
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc velit
+        magna, dictum vel elementum ac, fermentum quis lorem. Aliquam sapien
+        augue, efficitur eget tincidunt non, accumsan et est. Aliquam lobortis
+        elit lorem, id ullamcorper libero elementum non. Sed rutrum porta enim,
+        et aliquet velit hendrerit ac. Morbi tincidunt eleifend elit.
+      </div>
+    </Accordion>
+    <Accordion title="title2">
+      <div style={{ padding: "4px 8px" }}>
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc velit
+        magna, dictum vel elementum ac, fermentum quis lorem. Aliquam sapien
+        augue, efficitur eget tincidunt non, accumsan et est. Aliquam lobortis
+        elit lorem, id ullamcorper libero elementum non. Sed rutrum porta enim,
+        et aliquet velit hendrerit ac. Morbi tincidunt eleifend elit.
+      </div>
+    </Accordion>
+    <Accordion disabled title="disabled">
+      <div style={{ padding: "4px 8px" }}>
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc velit
+        magna, dictum vel elementum ac, fermentum quis lorem. Aliquam sapien
+        augue, efficitur eget tincidunt non, accumsan et est. Aliquam lobortis
+        elit lorem, id ullamcorper libero elementum non. Sed rutrum porta enim,
+        et aliquet velit hendrerit ac. Morbi tincidunt eleifend elit.
+      </div>
+    </Accordion>
+  </>
+);
 
-export const Multiple: StoryObj<AccordionProps> = {
-  render: () => (
+export const Controlled: Story<AccordionProps> = () => {
+  const [expanded, setExpanded] = React.useState<string | false>(false);
+  const handleChange =
+    (panel: string) => (_: React.SyntheticEvent, newExpanded: boolean) => {
+      setExpanded(newExpanded ? panel : false);
+    };
+
+  return (
     <>
-      <Accordion title="title1">
+      <Accordion
+        title="title1"
+        expanded={expanded === "title1"}
+        onChange={handleChange("title1")}
+      >
         <div style={{ padding: "4px 8px" }}>
           Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc velit
           magna, dictum vel elementum ac, fermentum quis lorem. Aliquam sapien
@@ -37,7 +79,11 @@ export const Multiple: StoryObj<AccordionProps> = {
           enim, et aliquet velit hendrerit ac. Morbi tincidunt eleifend elit.
         </div>
       </Accordion>
-      <Accordion title="title2">
+      <Accordion
+        title="title2"
+        expanded={expanded === "title2"}
+        onChange={handleChange("title2")}
+      >
         <div style={{ padding: "4px 8px" }}>
           Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc velit
           magna, dictum vel elementum ac, fermentum quis lorem. Aliquam sapien
@@ -46,7 +92,11 @@ export const Multiple: StoryObj<AccordionProps> = {
           enim, et aliquet velit hendrerit ac. Morbi tincidunt eleifend elit.
         </div>
       </Accordion>
-      <Accordion disabled title="disabled">
+      <Accordion
+        title="title3"
+        expanded={expanded === "title3"}
+        onChange={handleChange("title3")}
+      >
         <div style={{ padding: "4px 8px" }}>
           Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc velit
           magna, dictum vel elementum ac, fermentum quis lorem. Aliquam sapien
@@ -56,62 +106,5 @@ export const Multiple: StoryObj<AccordionProps> = {
         </div>
       </Accordion>
     </>
-  ),
-};
-
-export const Controlled: StoryObj<AccordionProps> = {
-  render: () => {
-    const [expanded, setExpanded] = React.useState<string | false>(false);
-    const handleChange =
-      (panel: string) => (_: React.SyntheticEvent, newExpanded: boolean) => {
-        setExpanded(newExpanded ? panel : false);
-      };
-
-    return (
-      <>
-        <Accordion
-          title="title1"
-          expanded={expanded === "title1"}
-          onChange={handleChange("title1")}
-        >
-          <div style={{ padding: "4px 8px" }}>
-            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc velit
-            magna, dictum vel elementum ac, fermentum quis lorem. Aliquam sapien
-            augue, efficitur eget tincidunt non, accumsan et est. Aliquam
-            lobortis elit lorem, id ullamcorper libero elementum non. Sed rutrum
-            porta enim, et aliquet velit hendrerit ac. Morbi tincidunt eleifend
-            elit.
-          </div>
-        </Accordion>
-        <Accordion
-          title="title2"
-          expanded={expanded === "title2"}
-          onChange={handleChange("title2")}
-        >
-          <div style={{ padding: "4px 8px" }}>
-            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc velit
-            magna, dictum vel elementum ac, fermentum quis lorem. Aliquam sapien
-            augue, efficitur eget tincidunt non, accumsan et est. Aliquam
-            lobortis elit lorem, id ullamcorper libero elementum non. Sed rutrum
-            porta enim, et aliquet velit hendrerit ac. Morbi tincidunt eleifend
-            elit.
-          </div>
-        </Accordion>
-        <Accordion
-          title="title3"
-          expanded={expanded === "title3"}
-          onChange={handleChange("title3")}
-        >
-          <div style={{ padding: "4px 8px" }}>
-            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc velit
-            magna, dictum vel elementum ac, fermentum quis lorem. Aliquam sapien
-            augue, efficitur eget tincidunt non, accumsan et est. Aliquam
-            lobortis elit lorem, id ullamcorper libero elementum non. Sed rutrum
-            porta enim, et aliquet velit hendrerit ac. Morbi tincidunt eleifend
-            elit.
-          </div>
-        </Accordion>
-      </>
-    );
-  },
+  );
 };

src/components/ActionButton/ActionButton.stories.tsx

@@ -1,6 +1,6 @@
 import { action } from "@storybook/addon-actions";
 import { ArgsTable, Description, Stories, Title } from "@storybook/addon-docs";
-import { StoryObj } from "@storybook/react";
+import { Story } from "@storybook/react/types-6-0";
 import React from "react";
 import ActionButton, { ActionButtonProps } from "./ActionButton";
 
@@ -14,7 +14,7 @@ export default {
   },
   parameters: {
     docs: {
-      source: { language: "tsx" },
+      source: { type: "code" },
       page: () => (
         <>
           <Title />
@@ -27,20 +27,16 @@ export default {
   },
 };
 
-export const Primary: StoryObj<ActionButtonProps> = {
-  args: {
-    color: "primary",
-  },
-};
+const Template: Story<ActionButtonProps> = (args) => <ActionButton {...args} />;
 
-export const Warning: StoryObj<ActionButtonProps> = {
-  args: {
-    color: "warning",
-  },
+export const Primary = Template.bind({});
+
+export const Warning = Template.bind({});
+Warning.args = {
+  color: "warning",
 };
 
-export const Disabled: StoryObj<ActionButtonProps> = {
-  args: {
-    disabled: true,
-  },
+export const Disabled = Template.bind({});
+Disabled.args = {
+  disabled: true,
 };