From f3e4bca46816121706dbc7f5cd831da51a778246 Mon Sep 17 00:00:00 2001 From: Joseph Garrone Date: Thu, 6 Jun 2024 07:41:01 +0200 Subject: [PATCH] Add script to copy over the stories --- scripts/build.ts | 12 +++++ src/bin/add-story.ts | 105 +++++++++++++++++++++++++++++++++++++++++++ src/bin/main.ts | 14 ++++++ 3 files changed, 131 insertions(+) create mode 100644 src/bin/add-story.ts diff --git a/scripts/build.ts b/scripts/build.ts index 86ed0f16..9399fb4a 100644 --- a/scripts/build.ts +++ b/scripts/build.ts @@ -139,6 +139,18 @@ fs.rmSync(join("dist", "src"), { recursive: true, force: true }); fs.cpSync("src", join("dist", "src"), { recursive: true }); +transformCodebase({ + srcDirPath: join("stories"), + destDirPath: join("dist", "stories"), + transformSourceCode: ({ fileRelativePath, sourceCode }) => { + if (!fileRelativePath.endsWith(".stories.tsx")) { + return undefined; + } + + return { modifiedSourceCode: sourceCode }; + } +}); + console.log(chalk.green(`✓ built in ${((Date.now() - startTime) / 1000).toFixed(2)}s`)); function run(command: string) { diff --git a/src/bin/add-story.ts b/src/bin/add-story.ts new file mode 100644 index 00000000..cd69b6e2 --- /dev/null +++ b/src/bin/add-story.ts @@ -0,0 +1,105 @@ +import { getThisCodebaseRootDirPath } from "./tools/getThisCodebaseRootDirPath"; +import cliSelect from "cli-select"; +import { + loginThemePageIds, + accountThemePageIds, + type LoginThemePageId, + type AccountThemePageId, + themeTypes, + type ThemeType +} from "./shared/constants"; +import { capitalize } from "tsafe/capitalize"; +import * as fs from "fs"; +import { join as pathJoin, relative as pathRelative, dirname as pathDirname } from "path"; +import { kebabCaseToCamelCase } from "./tools/kebabCaseToSnakeCase"; +import { assert, Equals } from "tsafe/assert"; +import { getThemeSrcDirPath } from "./shared/getThemeSrcDirPath"; +import type { CliCommandOptions } from "./main"; +import { readBuildOptions } from "./shared/buildOptions"; +import chalk from "chalk"; + +export async function command(params: { cliCommandOptions: CliCommandOptions }) { + const { cliCommandOptions } = params; + + const buildOptions = readBuildOptions({ + cliCommandOptions + }); + + console.log(chalk.cyan("Theme type:")); + + const { value: themeType } = await cliSelect({ + values: [...themeTypes] + }).catch(() => { + process.exit(-1); + }); + + console.log(`→ ${themeType}`); + + console.log(chalk.cyan("Select the page you want to create a Storybook for:")); + + const { value: pageId } = await cliSelect({ + values: (() => { + switch (themeType) { + case "login": + return [...loginThemePageIds]; + case "account": + return [...accountThemePageIds]; + } + assert>(false); + })() + }).catch(() => { + process.exit(-1); + }); + + console.log(`→ ${pageId}`); + + const { themeSrcDirPath } = getThemeSrcDirPath({ + reactAppRootDirPath: buildOptions.reactAppRootDirPath + }); + + const componentBasename = capitalize(kebabCaseToCamelCase(pageId)).replace( + /ftl$/, + "stories.tsx" + ); + + const targetFilePath = pathJoin( + themeSrcDirPath, + themeType, + "pages", + componentBasename + ); + + if (fs.existsSync(targetFilePath)) { + console.log(`${pathRelative(process.cwd(), targetFilePath)} already exists`); + + process.exit(-1); + } + + { + const targetDirPath = pathDirname(targetFilePath); + + if (!fs.existsSync(targetDirPath)) { + fs.mkdirSync(targetDirPath, { recursive: true }); + } + } + + const componentCode = fs + .readFileSync( + pathJoin( + getThisCodebaseRootDirPath(), + "stories", + themeType, + "pages", + componentBasename + ) + ) + .toString("utf8"); + + fs.writeFileSync(targetFilePath, Buffer.from(componentCode, "utf8")); + + console.log( + `${chalk.green("✓")} ${chalk.bold( + pathJoin(".", pathRelative(process.cwd(), targetFilePath)) + )} copy pasted from the Keycloakify source code into your project` + ); +} diff --git a/src/bin/main.ts b/src/bin/main.ts index 13589ff7..9fcb71d7 100644 --- a/src/bin/main.ts +++ b/src/bin/main.ts @@ -162,6 +162,20 @@ program } }); +program + .command({ + name: "add-story", + description: "Add *.stories.tsx file for a specific page to in your Storybook." + }) + .task({ + skip, + handler: async cliCommandOptions => { + const { command } = await import("./add-story"); + + await command({ cliCommandOptions }); + } + }); + program .command({ name: "initialize-email-theme",