[feat]: added theme css variables in init command

packages/cli/CHANGELOG.md

@@ -1,5 +1,11 @@
 # jsxpine
 
+## 1.1.0
+
+### Minor Changes
+
+-   Add theme css variables in init command
+
 ## 1.0.1
 
 ### Patch Changes

packages/cli/package.json

@@ -1,7 +1,7 @@
 {
 	"name": "jsxpine",
 	"description": "Add jsx components to your app.",
-	"version": "1.0.1",
+	"version": "1.1.0",
 	"publishConfig": {
 		"access": "public"
 	},

packages/cli/src/commands/init/config.ts

@@ -1,12 +1,19 @@
-import { existsSync } from "fs";
 import chalk from "chalk";
+import { existsSync } from "fs";
 import ora from "ora";
 import prompts from "prompts";
-import { DEFAULT_APP_SCRIPT_DIRECTORY, DEFAULT_COMMON_DIRECTORY, DEFAULT_COMPONENTS_DIRECTORY, DEFAULT_TAILWIND_CONFIG_FILE, DEFAULT_TAILWIND_CSS_FILE } from "../../utils/config/constants";
+import {
+	DEFAULT_APP_SCRIPT_DIRECTORY,
+	DEFAULT_COMMON_DIRECTORY,
+	DEFAULT_COMPONENTS_DIRECTORY,
+	DEFAULT_TAILWIND_BASE_COLOR,
+	DEFAULT_TAILWIND_CONFIG_FILE,
+	DEFAULT_TAILWIND_CSS_FILE
+} from "../../utils/config/constants";
 import { Config, RawConfig, rawConfigSchema } from "../../utils/config/schema";
 import { FileUtils } from "../../utils/file";
 import { LoggerUtils } from "../../utils/logger/index";
-
+import { RegistryUtils } from "../../utils/registry";
 
 export class InitConfig {
 	constructor(
@@ -18,8 +25,11 @@ export class InitConfig {
 
 	public async setConfigFromPrompts() {
 		// const styles = await getRegistryStyles();
-		// const baseColors = await getRegistryBaseColors();
+		const baseColors = RegistryUtils.getRegistryBaseColors();
 		const defaultOptions = {
+			tailwindBaseColor:
+				this.defaultConfig?.tailwind.baseColor ??
+				DEFAULT_TAILWIND_BASE_COLOR,
 			tailwindCss:
 				this.defaultConfig?.tailwind.css ?? DEFAULT_TAILWIND_CSS_FILE,
 			tailwindConfig:
@@ -48,17 +58,17 @@ export class InitConfig {
 					// 		value: style.name
 					// 	}))
 					// },
-					// {
-					// 	type: "select",
-					// 	name: "tailwindBaseColor",
-					// 	message: `Which color would you like to use as ${this.highlight(
-					// 		"base color"
-					// 	)}?`,
-					// 	choices: baseColors.map((color) => ({
-					// 		title: color.label,
-					// 		value: color.name
-					// 	}))
-					// },
+					{
+						type: "select",
+						name: "tailwindBaseColor",
+						message: `Which color would you like to use as ${this.highlight(
+							"base color"
+						)}?`,
+						choices: baseColors.map((color) => ({
+							title: color.label,
+							value: color.name
+						}))
+					},
 					{
 						type: "text",
 						name: "tailwindCss",
@@ -126,8 +136,8 @@ export class InitConfig {
 			// style: options.style,
 			tailwind: {
 				config: options.tailwindConfig,
-				css: options.tailwindCss
-				// baseColor: options.tailwindBaseColor
+				css: options.tailwindCss,
+				baseColor: options.tailwindBaseColor
 			},
 			aliases: {
 				scripts: options.scripts,
@@ -183,4 +193,4 @@ export class InitConfig {
 	private highlight(text: string) {
 		return chalk.cyan(text);
 	}
-}
+}

packages/cli/src/commands/init/dependencies.ts

@@ -7,9 +7,10 @@ import * as templates from "../../templates";
 import { Config } from "../../utils/config/schema";
 import { FileUtils } from "../../utils/file";
 import { handleError } from "../../utils/handle-error";
-import { LoggerUtils } from "../../utils/logger/index";
-import { BASE_URL } from "../../utils/registry/constants";
+import { LoggerUtils } from "../../utils/logger";
 import { RegistryUtils } from "../../utils/registry";
+import { BASE_URL } from "../../utils/registry/constants";
+
 
 export class InitDependencies {
 	private readonly DEPENDENCIES = [
@@ -19,36 +20,25 @@ export class InitDependencies {
 		"@alpinejs/collapse",
 		"@alpinejs/focus",
 		"alpinejs-manage",
-		"tailwindcss",
 		"clsx",
-		"tailwindcss-mosiui-mini",
 		"alpinejs"
 	] as const;
 
 	private readonly DEV_DEPENDENCIES = [
 		"@types/alpinejs",
 		"@kitajs/ts-html-plugin",
+		"tailwindcss",
 		"esbuild"
 	] as const;
 
-	private readonly cwd!: string;
-	private readonly config!: Config;
-	private readonly skip!: boolean;
-	private readonly logger!: LoggerUtils;
-
 	private isAliasPathUsed!: boolean;
 
 	constructor(
-		cwd: string,
-		config: Config,
-		skip: boolean = false,
-		logger: LoggerUtils
-	) {
-		this.cwd = cwd;
-		this.config = config;
-		this.skip = skip;
-		this.logger = logger;
-	}
+		private readonly cwd: string,
+		private readonly config: Config,
+		private readonly skip: boolean,
+		private readonly logger: LoggerUtils
+	) {}
 
 	/**
 	 * Prompts the user whether to use the alias path from the tsconfig file for
@@ -131,8 +121,12 @@ export class InitDependencies {
 					BASE_URL + "/registry/common.json"
 				);
 				const common = await commonRes.json();
+
 				await Promise.all(
-					await RegistryUtils.transformObjectToDirectory(common, dirname)
+					await RegistryUtils.transformObjectToDirectory(
+						common,
+						dirname
+					)
 				);
 			}
 
@@ -171,17 +165,13 @@ export class InitDependencies {
 	 *   the `aliases.alpine` path in the config.
 	 */
 	private async createRegistryFiles(config: Config, isAliasPathUsed = false) {
-		// Write app.ts script
-		await fs.writeFile(
-			`${config.resolvedPaths.scripts}/app.js`,
-			templates.APP_SCRIPT,
-			"utf8"
-		);
-
 		// Write tailwind config.
+		this.logger.info("\nWriting tailwind config file. This step extends tailwind theme by setting theme css variables and utility classes.");
 		await fs.writeFile(
 			config.resolvedPaths.tailwindConfig,
-			templates.TAILWIND_CONFIG,
+			templates.TAILWIND_CONFIG_WITH_VARIABLES(
+				config.tailwind.baseColor as templates.BaseColorType
+			),
 			"utf8"
 		);
 
@@ -194,12 +184,20 @@ export class InitDependencies {
 		await fs.unlink(cjsConfig).catch((e) => e); // throws when it DNE
 
 		// Write to global css file
+		this.logger.info("Writing global css file. This step adds theme css variables and theme classes.");
 		await fs.writeFile(
 			config.resolvedPaths.tailwindCss,
 			templates.STYLES,
 			"utf8"
 		);
 
+		// Write app.ts script
+		await fs.writeFile(
+			`${config.resolvedPaths.scripts}/app.js`,
+			templates.APP_SCRIPT,
+			"utf8"
+		);
+
 		let alpinePath = config.aliases.alpine;
 
 		if (isAliasPathUsed && !config.tsConfigAliases) {
@@ -247,7 +245,12 @@ export class InitDependencies {
 				[
 					packageManager === "npm" ? "install" : "add",
 					"-D",
-					...this.DEV_DEPENDENCIES
+					...this.DEV_DEPENDENCIES.map((dep) => {
+						if (dep === "tailwindcss") {
+							return `${dep}@3.4.17`;
+						}
+						return dep;
+					})
 				],
 				{
 					cwd: this.cwd
@@ -328,4 +331,4 @@ export class InitDependencies {
 
 		alpineDTSFileSpinner?.succeed("Added alpine.d.ts file successfully.");
 	}
-}
+}