✨ prettier でフォーマットできるよう機能更新

demo/react/.prettierrc.cjs

@@ -0,0 +1,13 @@
+/**
+ * @type {import('prettier').Config}
+ */
+const config = {
+  printWidth: 80,
+  tabWidth: 4,
+  semi: false,
+  singleQuote: true,
+  bracketSameLine: false,
+  singleAttributePerLine: true,
+};
+
+module.exports = config;

demo/react/.storybook/main.ts

@@ -26,6 +26,7 @@ const config: StorybookConfig = {
         autoStoryGenerator.vite({
           preset: "react",
           imports: ["**/src/components/**/*.tsx"],
+          prettierConfigPath: resolve(__dirname, "../.prettierrc"),
         }),
       ],
 

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

@@ -0,0 +1,27 @@
+import type { Meta, StoryObj } from '@storybook/react'
+
+import { Button } from './Button'
+
+const meta: Meta<typeof Button> = {
+    title: 'components/Button',
+    component: Button,
+    tags: ['autodocs'],
+    args: {
+        primary: undefined,
+        backgroundColor: undefined,
+        size: undefined,
+        label: undefined,
+        onClick: undefined,
+    },
+    argTypes: {
+        primary: { control: 'boolean' },
+        backgroundColor: { control: 'text' },
+        size: { control: 'select', options: ['small', 'medium', 'large'] },
+        label: { control: 'text' },
+    },
+}
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Primary: Story = {}

demo/react/src/components/Button/Button.tsx

@@ -41,7 +41,7 @@ export const Button: FC<ButtonProps> = ({
     <button
       type="button"
       className={["storybook-button", `storybook-button--${size}`, mode].join(
-        " "
+        " ",
       )}
       style={{ backgroundColor }}
       {...props}

packages/auto-story-generator/release-it.json → packages/auto-story-generator/.release-it.json

@@ -6,6 +6,7 @@
     "release": true
   },
   "git": {
+    "requireBranch": "release",
     "requireCleanWorkingDir": false,
     "addFiles": ["package.json"],
     "commitMessage": ":bookmark: release @takuma-ru/auto-story-generator@${version}"

packages/auto-story-generator/package.json

@@ -65,6 +65,7 @@
     "consola": "^3.2.3",
     "magicast": "^0.3.2",
     "minimatch": "^9.0.3",
+    "prettier": "^3.2.4",
     "scule": "^1.1.1",
     "ts-morph": "^21.0.1",
     "unplugin": "^1.5.1"
@@ -76,7 +77,6 @@
     "eslint": "^8.52.0",
     "eslint-plugin-import": "^2.29.1",
     "eslint-plugin-unused-imports": "^3.0.0",
-    "prettier": "^3.1.1",
     "tsup": "^8.0.1",
     "typescript": "^5.3.3"
   }

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";
@@ -22,6 +22,8 @@
    * `**\/src/components/**\/*.ts`
    */
   imports?: string[];
+
+  prettierConfigPath?: string;
 };
 
 const unplugin = createUnplugin((options: AsgOptions) => {
@@ -37,7 +39,7 @@
         : [true];
 
       if (!isMatches.includes(true)) {
         return consola.error("Not a target file for automatic generation");
       }
 
       const projectRootDir = process.cwd();
@@ -46,8 +48,8 @@
       const componentName = fileName?.replace(`.${fileType}`, "");
       const relativeSourceFilePath = file.replace(projectRootDir, "");
 
-      if (!componentName) {
+      if (!componentName || !fileName) {
         return consola.error("Could not find component name");
       }
 
       // consola.info(`${componentName} component has been changed`);
@@ -56,17 +58,18 @@
       const project = new Project();
       const sourceFile = project.createSourceFile(fileName || "", mod.$code);
 
       consola.start(`${componentName} Story file is being generated ....`);
 
       switch (options.preset) {
         case "lit": {
           await genLitStoryFile({
             componentName,
-            fileName: fileName || "",
+            fileName: fileName,
             path: file,
             type: `.${fileType}`,
             relativeSourceFilePath,
             sourceFile,
+            prettierConfigPath: options.prettierConfigPath,
           });
 
           break;
@@ -75,28 +78,29 @@
         case "react": {
           await genReactStoryFile({
             componentName,
-            fileName: fileName || "",
+            fileName: fileName,
             path: file,
             type: `.${fileType}`,
             relativeSourceFilePath,
             sourceFile,
+            prettierConfigPath: options.prettierConfigPath,
           });
 
           break;
         }
 
         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

@@ -12,6 +12,7 @@ export const genLitStoryFile = async ({
   type,
   relativeSourceFilePath,
   sourceFile,
+  prettierConfigPath,
 }: GenStoryFileOptions["fileOptions"]) => {
   const propTypes = genLitPropTypes({ sourceFile, componentName });
   const pascalComponentName = pascalCase(componentName);
@@ -132,6 +133,7 @@ export const Primary: ${pascalComponentName}Story = {};
       type,
       relativeSourceFilePath,
       sourceFile,
+      prettierConfigPath,
     },
     generateOptions: {
       fileType: ".stories.ts",

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

@@ -12,6 +12,7 @@ export const genReactStoryFile = async ({
   type,
   relativeSourceFilePath,
   sourceFile,
+  prettierConfigPath,
 }: GenStoryFileOptions["fileOptions"]) => {
   const propTypes = genReactPropTypes({ sourceFile, componentName });
   const pascalComponentName = pascalCase(componentName);
@@ -100,6 +101,7 @@ export const Primary: Story = {};
       type,
       relativeSourceFilePath,
       sourceFile,
+      prettierConfigPath,
     },
     generateOptions: {
       fileType: ".stories.tsx",

packages/auto-story-generator/src/types/GenStoryFileType.ts

@@ -8,6 +8,7 @@ export type GenStoryFileOptions = {
     type: `.${string}`;
     relativeSourceFilePath: string;
     sourceFile: SourceFile;
+    prettierConfigPath?: string;
   };
   generateOptions: {
     fileType: `.stories.${string}`;

packages/auto-story-generator/src/utils/genStoryFile.ts

@@ -1,6 +1,7 @@
 import fs from "fs";
 
 import { consola } from "consola";
+import * as prettier from "prettier";
 import { Project, SyntaxKind } from "ts-morph";
 
 import { GenStoryFileOptions } from "~/src/types/GenStoryFileType";
@@ -95,10 +96,32 @@ export const genStoryFile = async ({
     // ファイルを保存する
     await storiesProject
       .save()
-      .then(() => {
+      .then(async () => {
         consola.success(
           `Successfully updated args in ${storiesSourceFile.getFilePath()}`,
         );
+
+        const fileContent = fs.readFileSync(storiesFilePath, "utf-8");
+
+        const config: prettier.Options | null = fileOptions.prettierConfigPath
+          ? await prettier.resolveConfig(fileOptions.prettierConfigPath)
+          : {
+              semi: true,
+              trailingComma: "all",
+              singleQuote: false,
+              printWidth: 80,
+              tabWidth: 2,
+              endOfLine: "lf",
+            };
+
+        // Format the content using Prettier
+        const formattedContent = await prettier.format(fileContent, {
+          ...config,
+          parser: "typescript",
+        });
+
+        // Write the formatted content back to the file
+        fs.writeFileSync(storiesFilePath, formattedContent);
       })
       .catch((err) => {
         consola.error(err);