From eebb5894efb16a86b367c2948a088556c8e08218 Mon Sep 17 00:00:00 2001
From: takuma-ru <kanekotakuma@team-lab.com>
Date: Thu, 25 Jan 2024 14:22:58 +0900
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20prettier=20=E3=81=A7=E3=83=95?=
 =?UTF-8?q?=E3=82=A9=E3=83=BC=E3=83=9E=E3=83=83=E3=83=88=E3=81=A7=E3=81=8D?=
 =?UTF-8?q?=E3=82=8B=E3=82=88=E3=81=86=E6=A9=9F=E8=83=BD=E6=9B=B4=E6=96=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 demo/react/.prettierrc.cjs                    | 13 +++++++++
 demo/react/.storybook/main.ts                 |  1 +
 .../src/components/Button/Button.stories.tsx  | 27 +++++++++++++++++++
 demo/react/src/components/Button/Button.tsx   |  2 +-
 .../{release-it.json => .release-it.json}     |  1 +
 packages/auto-story-generator/package.json    |  2 +-
 packages/auto-story-generator/src/index.ts    | 10 ++++---
 .../src/presets/lit/genLitStoryFile.ts        |  2 ++
 .../src/presets/react/genReactStoryFile.ts    |  2 ++
 .../src/types/GenStoryFileType.ts             |  1 +
 .../src/utils/genStoryFile.ts                 | 25 ++++++++++++++++-
 pnpm-lock.yaml                                | 12 ++++-----
 12 files changed, 86 insertions(+), 12 deletions(-)
 create mode 100644 demo/react/.prettierrc.cjs
 create mode 100644 demo/react/src/components/Button/Button.stories.tsx
 rename packages/auto-story-generator/{release-it.json => .release-it.json} (89%)

diff --git a/demo/react/.prettierrc.cjs b/demo/react/.prettierrc.cjs
new file mode 100644
index 0000000..5de6a06
--- /dev/null
+++ b/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;
diff --git a/demo/react/.storybook/main.ts b/demo/react/.storybook/main.ts
index fe0201f..2e123f6 100644
--- a/demo/react/.storybook/main.ts
+++ b/demo/react/.storybook/main.ts
@@ -26,6 +26,7 @@ const config: StorybookConfig = {
         autoStoryGenerator.vite({
           preset: "react",
           imports: ["**/src/components/**/*.tsx"],
+          prettierConfigPath: resolve(__dirname, "../.prettierrc"),
         }),
       ],
 
diff --git a/demo/react/src/components/Button/Button.stories.tsx b/demo/react/src/components/Button/Button.stories.tsx
new file mode 100644
index 0000000..99dfab8
--- /dev/null
+++ b/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 = {}
diff --git a/demo/react/src/components/Button/Button.tsx b/demo/react/src/components/Button/Button.tsx
index 4636f4a..12d07d8 100644
--- a/demo/react/src/components/Button/Button.tsx
+++ b/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}
diff --git a/packages/auto-story-generator/release-it.json b/packages/auto-story-generator/.release-it.json
similarity index 89%
rename from packages/auto-story-generator/release-it.json
rename to packages/auto-story-generator/.release-it.json
index 08ac035..607b99a 100644
--- a/packages/auto-story-generator/release-it.json
+++ b/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}"
diff --git a/packages/auto-story-generator/package.json b/packages/auto-story-generator/package.json
index e029f5b..5aaefa6 100644
--- a/packages/auto-story-generator/package.json
+++ b/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"
   }
diff --git a/packages/auto-story-generator/src/index.ts b/packages/auto-story-generator/src/index.ts
index 505dd54..50910b8 100644
--- a/packages/auto-story-generator/src/index.ts
+++ b/packages/auto-story-generator/src/index.ts
@@ -22,6 +22,8 @@ export type AsgOptions = {
    * `**\/src/components/**\/*.ts`
    */
   imports?: string[];
+
+  prettierConfigPath?: string;
 };
 
 const unplugin = createUnplugin((options: AsgOptions) => {
@@ -46,7 +48,7 @@ const unplugin = createUnplugin((options: AsgOptions) => {
       const componentName = fileName?.replace(`.${fileType}`, "");
       const relativeSourceFilePath = file.replace(projectRootDir, "");
 
-      if (!componentName) {
+      if (!componentName || !fileName) {
         return consola.error("Could not find component name");
       }
 
@@ -62,11 +64,12 @@ const unplugin = createUnplugin((options: AsgOptions) => {
         case "lit": {
           await genLitStoryFile({
             componentName,
-            fileName: fileName || "",
+            fileName: fileName,
             path: file,
             type: `.${fileType}`,
             relativeSourceFilePath,
             sourceFile,
+            prettierConfigPath: options.prettierConfigPath,
           });
 
           break;
@@ -75,11 +78,12 @@ const unplugin = createUnplugin((options: AsgOptions) => {
         case "react": {
           await genReactStoryFile({
             componentName,
-            fileName: fileName || "",
+            fileName: fileName,
             path: file,
             type: `.${fileType}`,
             relativeSourceFilePath,
             sourceFile,
+            prettierConfigPath: options.prettierConfigPath,
           });
 
           break;
diff --git a/packages/auto-story-generator/src/presets/lit/genLitStoryFile.ts b/packages/auto-story-generator/src/presets/lit/genLitStoryFile.ts
index 2f04b66..43485c0 100644
--- a/packages/auto-story-generator/src/presets/lit/genLitStoryFile.ts
+++ b/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",
diff --git a/packages/auto-story-generator/src/presets/react/genReactStoryFile.ts b/packages/auto-story-generator/src/presets/react/genReactStoryFile.ts
index 079e3cc..f2b2fb7 100644
--- a/packages/auto-story-generator/src/presets/react/genReactStoryFile.ts
+++ b/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",
diff --git a/packages/auto-story-generator/src/types/GenStoryFileType.ts b/packages/auto-story-generator/src/types/GenStoryFileType.ts
index 345de40..f641e70 100644
--- a/packages/auto-story-generator/src/types/GenStoryFileType.ts
+++ b/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}`;
diff --git a/packages/auto-story-generator/src/utils/genStoryFile.ts b/packages/auto-story-generator/src/utils/genStoryFile.ts
index fc259c7..2fadb97 100644
--- a/packages/auto-story-generator/src/utils/genStoryFile.ts
+++ b/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);
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 6208ea1..f19c9f9 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -98,6 +98,9 @@ importers:
       minimatch:
         specifier: ^9.0.3
         version: 9.0.3
+      prettier:
+        specifier: ^3.2.4
+        version: 3.2.4
       scule:
         specifier: ^1.1.1
         version: 1.2.0
@@ -126,9 +129,6 @@ importers:
       eslint-plugin-unused-imports:
         specifier: ^3.0.0
         version: 3.0.0(@typescript-eslint/eslint-plugin@6.19.0)(eslint@8.56.0)
-      prettier:
-        specifier: ^3.1.1
-        version: 3.1.1
       tsup:
         specifier: ^8.0.1
         version: 8.0.1(typescript@5.3.3)
@@ -7971,11 +7971,11 @@ packages:
     hasBin: true
     dev: true
 
-  /prettier@3.1.1:
-    resolution: {integrity: sha512-22UbSzg8luF4UuZtzgiUOfcGM8s4tjBv6dJRT7j275NXsy2jb4aJa4NNveul5x4eqlF1wuhuR2RElK71RvmVaw==}
+  /prettier@3.2.4:
+    resolution: {integrity: sha512-FWu1oLHKCrtpO1ypU6J0SbK2d9Ckwysq6bHj/uaCP26DxrPpppCLQRGVuqAxSTvhF00AcvDRyYrLNW7ocBhFFQ==}
     engines: {node: '>=14'}
     hasBin: true
-    dev: true
+    dev: false
 
   /pretty-format@27.5.1:
     resolution: {integrity: sha512-Qb1gy5OrP5+zDf2Bvnzdl3jsTf1qXVMazbvCoKhtKqVs4/YK4ozX4gKQJJVyNe+cajNPn0KoC0MC3FUmaHWEmQ==}