🐛 🛠️ #5 discussion の問題解決

demo/react/src/components/TestA/TestA.stories.tsx

@@ -0,0 +1,16 @@
+import type { Meta, StoryObj } from '@storybook/react'
+
+import { TestA } from './TestA'
+
+const meta: Meta<typeof TestA> = {
+    title: 'components/TestA',
+    component: TestA,
+    tags: ['autodocs'],
+    args: { text: undefined },
+    argTypes: { text: { control: 'text' } },
+}
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Primary: Story = {}

demo/react/src/components/TestA/TestA.tsx

@@ -0,0 +1,8 @@
+export const TestA = ({ text }: { text: string }) => {
+  return (
+    <>
+      <div>TestA</div>
+      <p>{text}</p>
+    </>
+  )
+}

demo/react/src/components/TestB/TestB.stories.tsx

@@ -0,0 +1,16 @@
+import type { Meta, StoryObj } from '@storybook/react'
+
+import { TestB } from './TestB'
+
+const meta: Meta<typeof TestB> = {
+    title: 'components/TestB',
+    component: TestB,
+    tags: ['autodocs'],
+    args: { test: true },
+    argTypes: { test: { control: 'boolean' } },
+}
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Primary: Story = {}

demo/react/src/components/TestB/TestB.tsx

@@ -0,0 +1,13 @@
+import { FC, HTMLAttributes } from 'react'
+
+type Props = {
+  test: boolean
+} & HTMLAttributes<HTMLDivElement>
+
+export const TestB: FC<Props> = (props) => {
+  return (
+    <>
+      <div {...props}>TestB</div>
+    </>
+  )
+}

demo/react/src/components/TestC/index.stories.tsx

@@ -0,0 +1,16 @@
+import type { Meta, StoryObj } from '@storybook/react'
+
+import { TestC } from './index.tsx'
+
+const meta: Meta<typeof TestC> = {
+    title: 'components/TestC',
+    component: TestC,
+    tags: ['autodocs'],
+    args: { test: true },
+    argTypes: { test: { control: 'boolean' } },
+}
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Primary: Story = {}

demo/react/src/components/TestC/index.tsx

@@ -0,0 +1,13 @@
+import { FC, HTMLAttributes } from 'react'
+
+type Props = {
+  test: boolean
+} & HTMLAttributes<HTMLDivElement>
+
+export const TestC: FC<Props> = (props) => {
+  return (
+    <>
+      <div {...props}>TestB</div>
+    </>
+  )
+}

packages/auto-story-generator/src/index.ts

@@ -1,4 +1,4 @@
 import { consola } from "consola";
 import { loadFile } from "magicast";
 import { minimatch } from "minimatch";
 import { Project } from "ts-morph";
@@ -43,11 +43,14 @@
       const projectRootDir = process.cwd();
       const fileName = file.split("/").pop();
       const fileType = fileName?.split(".").slice(1).join(".");
-      const componentName = fileName?.replace(`.${fileType}`, "");
+      const componentName =
+        fileName?.replace(`.${fileType}`, "") === "index"
+          ? file.split("/").slice(-2)[0]
+          : fileName?.replace(`.${fileType}`, "");
       const relativeSourceFilePath = file.replace(projectRootDir, "");
 
       if (!componentName || !fileName) {
         return consola.error("Could not find component name");
       }
 
       // consola.info(`${componentName} component has been changed`);
@@ -56,7 +59,7 @@
       const project = new Project();
       const sourceFile = project.createSourceFile(fileName || "", mod.$code);
 
       consola.start(`${componentName} Story file is being generated ....`);
 
       switch (options.preset) {
         case "lit": {
@@ -88,17 +91,17 @@
         }
 
         case "vue": {
           consola.error("Not yet supported.");
           break;
         }
 
         case "custom": {
           consola.error("Not yet supported.");
           break;
         }
 
         default: {
           consola.error(
             `Preset ${options.preset} is not supported. Please use one of the following: lit, react, vue, custom`,
           );
         }

packages/auto-story-generator/src/presets/lit/genLitStoryFile.ts

@@ -1,7 +1,7 @@
 import { consola } from "consola";
 import { kebabCase, pascalCase } from "scule";
 
-import { genLitPropTypes } from "~/src/presets/lit/genLitPropTypes";
+import { getLitPropTypes } from "~/src/presets/lit/getLitPropTypes";
 import { GenStoryFileOptions } from "~/src/types/GenStoryFileType";
 import { genStoryFile } from "~/src/utils/genStoryFile";
 
@@ -14,10 +14,10 @@
   sourceFile,
   prettierConfigPath,
 }: GenStoryFileOptions["fileOptions"]) => {
-  const propTypes = genLitPropTypes({ sourceFile, componentName });
+  const propTypes = getLitPropTypes({ sourceFile, componentName });
   const pascalComponentName = pascalCase(componentName);
 
   if (!propTypes) return consola.error("Could not find argTypes");
 
   const initialCode = `
 import { html } from "lit";

packages/auto-story-generator/src/presets/lit/genLitPropTypes.ts → packages/auto-story-generator/src/presets/lit/getLitPropTypes.ts

@@ -6,7 +6,7 @@ import {
   GenReactPropTypesReturn,
 } from "~/src/types/GenPropTypeType";
 
-export const genLitPropTypes = ({
+export const getLitPropTypes = ({
   sourceFile,
   componentName,
 }: GenReactPropTypesOptions): GenReactPropTypesReturn => {

packages/auto-story-generator/src/presets/react/genReactStoryFile.ts

@@ -1,7 +1,7 @@
 import { consola } from "consola";
 import { pascalCase } from "scule";
 
-import { genReactPropTypes } from "~/src/presets/react/genReactPropTypes";
+import { getReactPropTypes } from "~/src/presets/react/getReactPropTypes";
 import { GenStoryFileOptions } from "~/src/types/GenStoryFileType";
 import { genStoryFile } from "~/src/utils/genStoryFile";
 
@@ -14,15 +14,18 @@ export const genReactStoryFile = async ({
   sourceFile,
   prettierConfigPath,
 }: GenStoryFileOptions["fileOptions"]) => {
-  const propTypes = genReactPropTypes({ sourceFile, componentName });
+  const { propTypes } = getReactPropTypes({
+    sourceFile,
+    componentName,
+  });
   const pascalComponentName = pascalCase(componentName);
 
   if (!propTypes) return consola.error("Could not find argTypes");
 
   const initialCode = `
 import type { Meta, StoryObj } from "@storybook/react";
 
-import { ${pascalComponentName} } from "./${pascalComponentName}";
+import { ${pascalComponentName} } from "./${fileName}";
 
 const meta: Meta<typeof ${pascalComponentName}> = {
   title: "components/${pascalComponentName}",

packages/auto-story-generator/src/presets/react/getReactPropTypes.ts

@@ -0,0 +1,124 @@
+import { pascalCase } from "scule";
+import { TypeFlags, ts, Symbol } from "ts-morph";
+
+import {
+  GenReactPropTypesOptions,
+  GenReactPropTypesReturn,
+} from "~/src/types/GenPropTypeType";
+
+const getTypeFlagsName = (flags: TypeFlags) => {
+  // Get all the keys of TypeFlags
+  const keys = Object.keys(TypeFlags) as (keyof typeof TypeFlags)[];
+
+  // Filter the keys where the flag is set
+  const setFlags = keys.find((key) => flags === TypeFlags[key]);
+
+  return setFlags || "err";
+};
+
+export const getReactPropTypes = ({
+  sourceFile,
+  componentName,
+}: GenReactPropTypesOptions): {
+  propsPattern?: "component-props" | "props" | "inline";
+  propTypes: GenReactPropTypesReturn;
+} => {
+  let propsPattern: "component-props" | "props" | "inline" = "component-props";
+
+  const pascalComponentName = pascalCase(componentName);
+
+  const propsType = sourceFile.getTypeAlias(`${pascalComponentName}Props`);
+  const propsInterface = sourceFile.getInterface(`${pascalComponentName}Props`);
+  const propsOnlyType = sourceFile.getTypeAlias("Props");
+  const propsOnlyInterface = sourceFile.getInterface("Props");
+  const propsInline = sourceFile
+    .getVariableDeclaration(pascalComponentName)
+    ?.getInitializerIfKindOrThrow(ts.SyntaxKind.ArrowFunction);
+
+  const props =
+    propsType?.getType() ||
+    propsInterface?.getType() ||
+    propsOnlyType?.getType() ||
+    propsOnlyInterface?.getType() ||
+    propsInline?.getParameters()[0].getType();
+
+  if (!props) {
+    return {
+      propTypes: undefined,
+    };
+  }
+
+  // eslint-disable-next-line @typescript-eslint/ban-types
+  let propsProperties: Symbol[] = [];
+  const isPropsIntersection = props.isIntersection();
+  if (isPropsIntersection) {
+    propsProperties = [];
+
+    const intersectionTypes = props.getIntersectionTypes();
+
+    intersectionTypes.forEach((intersectionType) => {
+      const intersectionTypeText = intersectionType.getText();
+
+      if (intersectionTypeText.includes("HTMLAttributes")) {
+        return;
+      }
+
+      return propsProperties.push(...intersectionType.getProperties());
+    });
+  } else {
+    propsProperties = props.getProperties();
+  }
+
+  if (propsOnlyType || propsOnlyInterface) {
+    propsPattern = "props";
+  }
+
+  if (propsInline) {
+    propsPattern = "inline";
+  }
+
+  const propTypes = propsProperties.map((prop) => {
+    const propName = prop.getName();
+    const propType = prop.getValueDeclaration()?.getType();
+
+    if (!propType) {
+      return {
+        name: propName,
+        type: ["err"],
+        isOptional: prop.isOptional(),
+        value: [],
+      };
+    }
+
+    if (propType.isUnion() && !propType.isBoolean()) {
+      const unionTypes = propType.getUnionTypes();
+
+      const type = Array.from(
+        new Set(
+          unionTypes.map((union) =>
+            getTypeFlagsName(union.getFlags().valueOf()),
+          ),
+        ),
+      );
+
+      return {
+        name: propName,
+        type,
+        isOptional: prop.isOptional(),
+        value: unionTypes.map((union) => union.getText().replace(/"/g, "")),
+      };
+    }
+
+    return {
+      name: propName,
+      type: [prop.getValueDeclaration()!.getType().getText()],
+      isOptional: prop.isOptional(),
+      value: [],
+    };
+  });
+
+  return {
+    propsPattern,
+    propTypes,
+  };
+};