ian/startup 131 add styleguide to default repo creation

packages/analytics/src/datafast/datafast-provider.tsx

@@ -6,10 +6,7 @@ import type { AnalyticsPlugin } from "../types"
 
 declare global {
 	interface Window {
-		datafast?: (
-			event: string,
-			properties?: Record<string, unknown>
-		) => void
+		datafast?: (event: string, properties?: Record<string, unknown>) => void
 	}
 }
 

packages/analytics/src/gtm/gtm-provider.tsx

@@ -31,7 +31,8 @@ export function GoogleTagManagerProvider({
 		if (document.querySelector('script[src*="googletagmanager.com/gtm.js"]'))
 			return
 
-		const dataLayer = (window.dataLayer = window.dataLayer || [])
+		window.dataLayer = window.dataLayer || []
+		const dataLayer = window.dataLayer
 		dataLayer.push({
 			"gtm.start": new Date().getTime(),
 			event: "gtm.js"

packages/cli/package.json

@@ -9,17 +9,8 @@
 		"type": "git",
 		"url": "https://github.com/ian/startupkit"
 	},
-	"keywords": [
-		"startup",
-		"bootstrap",
-		"boilerplate",
-		"analytics",
-		"auth"
-	],
-	"files": [
-		"dist",
-		"templates"
-	],
+	"keywords": ["startup", "bootstrap", "boilerplate", "analytics", "auth"],
+	"files": ["dist", "templates"],
 	"type": "module",
 	"main": "dist/cli.js",
 	"bin": {

packages/cli/src/cmd/add.test.ts

@@ -35,6 +35,11 @@ const getTemplateInfo = (appType: string, repoArg?: string): TemplateInfo => {
 			type: "vite",
 			templatePath: repoArg || "ian/startupkit/templates/apps/vite",
 			replacementPattern: /PROJECT_VITE/g
+		},
+		storybook: {
+			type: "storybook",
+			templatePath: repoArg || "ian/startupkit/templates/apps/storybook",
+			replacementPattern: /NEVER_REPLACE_ANYTHING/g
 		}
 	}
 
@@ -138,6 +143,16 @@ describe("add command - unit tests", () => {
 			expect(result.replacementPattern).toEqual(/PROJECT_VITE/g)
 		})
 
+		it("should return correct info for storybook template", () => {
+			const result = getTemplateInfo("storybook")
+
+			expect(result.type).toBe("storybook")
+			expect(result.templatePath).toBe(
+				"ian/startupkit/templates/apps/storybook"
+			)
+			expect(result.replacementPattern).toEqual(/NEVER_REPLACE_ANYTHING/g)
+		})
+
 		it("should use custom repo when provided", () => {
 			const customRepo = "user/custom-repo/templates/apps/next"
 			const result = getTemplateInfo("next", customRepo)
@@ -222,7 +237,9 @@ describe("add command - unit tests", () => {
 		})
 
 		it("should detect existing config packages", () => {
-			fs.mkdirSync(path.join(testDir, "config/typescript"), { recursive: true })
+			fs.mkdirSync(path.join(testDir, "config/typescript"), {
+				recursive: true
+			})
 
 			const config = {
 				type: "app" as const,
@@ -238,7 +255,9 @@ describe("add command - unit tests", () => {
 
 		it("should handle both packages and config dependencies", () => {
 			fs.mkdirSync(path.join(testDir, "packages/auth"), { recursive: true })
-			fs.mkdirSync(path.join(testDir, "config/typescript"), { recursive: true })
+			fs.mkdirSync(path.join(testDir, "config/typescript"), {
+				recursive: true
+			})
 
 			const config = {
 				type: "app" as const,

packages/cli/src/cmd/add.ts

@@ -19,6 +19,7 @@ import { exec } from "../lib/system"
 const TEMPLATE_TYPES = [
 	{ name: "Next.js", value: "next" },
 	{ name: "Vite", value: "vite" },
+	{ name: "Storybook", value: "storybook" },
 	new inquirer.Separator("---- coming soon ----"),
 	{ name: "Expo", value: "expo", disabled: true },
 	{ name: "Capacitor Mobile", value: "capacitor", disabled: true },
@@ -80,6 +81,11 @@ function getTemplateInfo(appType: string, repoArg?: string): TemplateInfo {
 			type: "vite",
 			templatePath: repoArg || "ian/startupkit/templates/apps/vite",
 			replacementPattern: /PROJECT_VITE/g
+		},
+		storybook: {
+			type: "storybook",
+			templatePath: repoArg || "ian/startupkit/templates/apps/storybook",
+			replacementPattern: /NEVER_REPLACE_ANYTHING/g
 		}
 	}
 
@@ -375,7 +381,7 @@ async function addApp(options: AddOptions): Promise<void> {
 		appType = selected
 	}
 
-	if (!["next", "vite"].includes(appType)) {
+	if (!["next", "vite", "storybook"].includes(appType)) {
 		console.log(`\n${appType} support coming soon, we've recorded your vote!`)
 		return
 	}

packages/cli/src/cmd/init.test.ts

@@ -45,6 +45,9 @@ describe("init command - unit tests", () => {
 
 			expect(result.repoSource).toBe("ian/startupkit/templates/repo")
 			expect(result.packagesSource).toBe("ian/startupkit/templates/packages")
+			expect(result.storybookSource).toBe(
+				"ian/startupkit/templates/apps/storybook"
+			)
 		})
 
 		it("should handle branch names in degit sources", () => {
@@ -54,13 +57,19 @@ describe("init command - unit tests", () => {
 			expect(result.packagesSource).toBe(
 				"ian/startupkit/templates/packages#develop"
 			)
+			expect(result.storybookSource).toBe(
+				"ian/startupkit/templates/apps/storybook#develop"
+			)
 		})
 
 		it("should handle different repository paths", () => {
 			const result = buildDegitSources("user/repo#main")
 
 			expect(result.repoSource).toBe("user/repo/templates/repo#main")
 			expect(result.packagesSource).toBe("user/repo/templates/packages#main")
+			expect(result.storybookSource).toBe(
+				"user/repo/templates/apps/storybook#main"
+			)
 		})
 	})
 

packages/cli/src/cmd/init.ts

@@ -80,6 +80,7 @@ export function resolveDestDir(options: ResolveDestDirOptions): string {
 export function buildDegitSources(repoBase: string): {
 	repoSource: string
 	packagesSource: string
+	storybookSource: string
 } {
 	if (repoBase.includes("#")) {
 		const [userRepo, branch] = repoBase.split("#")
@@ -88,15 +89,17 @@ export function buildDegitSources(repoBase: string): {
 			.replace(/\/templates\/packages$/, "")
 		return {
 			repoSource: `${normalizedRepo}/templates/repo#${branch}`,
-			packagesSource: `${normalizedRepo}/templates/packages#${branch}`
+			packagesSource: `${normalizedRepo}/templates/packages#${branch}`,
+			storybookSource: `${normalizedRepo}/templates/apps/storybook#${branch}`
 		}
 	}
 	const normalizedRepo = repoBase
 		.replace(/\/templates\/repo$/, "")
 		.replace(/\/templates\/packages$/, "")
 	return {
 		repoSource: `${normalizedRepo}/templates/repo`,
-		packagesSource: `${normalizedRepo}/templates/packages`
+		packagesSource: `${normalizedRepo}/templates/packages`,
+		storybookSource: `${normalizedRepo}/templates/apps/storybook`
 	}
 }
 
@@ -173,9 +176,24 @@ export async function init(props: {
 
 	const isCurrentDir = destDir === cwd
 
+	// Step 3: Ask about Storybook
+	let includeStorybook = false
+	if (promptedForName) {
+		const { addStorybook } = await inquirer.prompt([
+			{
+				type: "confirm",
+				name: "addStorybook",
+				message: "Would you like to add Storybook for component documentation?",
+				default: true
+			}
+		])
+		includeStorybook = addStorybook
+	}
+
 	// --- USE DEGit TO CLONE THE REPO STRUCTURE AND PACKAGES ---
 	const repoBase = props.repoArg || "ian/startupkit"
-	const { repoSource, packagesSource } = buildDegitSources(repoBase)
+	const { repoSource, packagesSource, storybookSource } =
+		buildDegitSources(repoBase)
 
 	await spinner(
 		`Cloning template into ${isCurrentDir ? "current directory" : destDir}`,
@@ -193,6 +211,15 @@ export async function init(props: {
 				verbose: false
 			})
 			await packagesEmitter.clone(path.join(destDir, "packages"))
+
+			if (includeStorybook) {
+				const storybookEmitter = degit(storybookSource, {
+					cache: false,
+					force: true,
+					verbose: false
+				})
+				await storybookEmitter.clone(path.join(destDir, "apps", "storybook"))
+			}
 		}
 	)
 

packages/cli/src/cmd/upgrade.test.ts

@@ -317,10 +317,7 @@ describe("upgrade command - unit tests", () => {
 			const hadVersion = originalPkg.version !== undefined
 
 			const pkgWithVersion = { ...originalPkg, version: "0.6.4" }
-			fs.writeFileSync(
-				tsconfigPath,
-				JSON.stringify(pkgWithVersion, null, "\t")
-			)
+			fs.writeFileSync(tsconfigPath, JSON.stringify(pkgWithVersion, null, "\t"))
 
 			if (!hadVersion) {
 				const content = fs.readFileSync(tsconfigPath, "utf-8")

packages/cli/src/cmd/upgrade.ts

@@ -444,9 +444,7 @@ export async function upgrade(options: UpgradeOptions = {}): Promise<void> {
 			console.log(`   📋 Catalogs: ${catalogResult.updated.join(", ")}`)
 		}
 		if (catalogResult.skipped.length > 0 && options.dryRun) {
-			console.log(
-				`   ⚠️  Could not fetch: ${catalogResult.skipped.join(", ")}`
-			)
+			console.log(`   ⚠️  Could not fetch: ${catalogResult.skipped.join(", ")}`)
 		}
 	}