ui-thing 0.0.4 → 0.0.5

package/src/templates/prettier.ts

@@ -1,16 +1,16 @@
-export const PRETTIER_CONFIG = `{
-  "arrowParens": "always",
-  "endOfLine": "lf",
-  "plugins": ["@ianvs/prettier-plugin-sort-imports", "prettier-plugin-tailwindcss"],
-  "printWidth": 100,
-  "semi": true,
-  "singleQuote": false,
-  "tabWidth": 2,
-  "trailingComma": "es5",
-  "useTabs": false,
-  "vueIndentScriptAndStyle": true,
-  "tailwindFunctions": ["tv"],
-  "importOrder": ["<BUILTIN_MODULES>", "<THIRD_PARTY_MODULES>", "<TYPES>", "", "^[.]"]
-}
-
-`;
+export const PRETTIER_CONFIG = `{
+  "arrowParens": "always",
+  "endOfLine": "lf",
+  "plugins": ["@ianvs/prettier-plugin-sort-imports", "prettier-plugin-tailwindcss"],
+  "printWidth": 100,
+  "semi": true,
+  "singleQuote": false,
+  "tabWidth": 2,
+  "trailingComma": "es5",
+  "useTabs": false,
+  "vueIndentScriptAndStyle": true,
+  "tailwindFunctions": ["tv"],
+  "importOrder": ["<BUILTIN_MODULES>", "<THIRD_PARTY_MODULES>", "<TYPES>", "", "^[.]"]
+}
+
+`;

package/src/templates/tailwind.ts

@@ -1,101 +1,101 @@
-export const TAILWIND_CONFIG_JS = `const { fontFamily } = require("tailwindcss/defaultTheme");
-
-/**@type {import('tailwindcss').Config} */
-module.exports = {
-  darkMode: "class",
-  theme: {
-    extend: {
-      container: {
-        center: true,
-        padding: {
-          DEFAULT: "1rem",
-          sm: "2rem",
-          lg: "4rem",
-        },
-        screens: {
-          "2xl": "1440px",
-        },
-      },
-      fontFamily: {
-        sans: ["Inter var", "Inter", ...fontFamily.sans],
-      },
-      borderRadius: {
-        lg: "var(--radius)",
-        md: "calc(var(--radius) - 2px)",
-        sm: "calc(var(--radius) - 4px)",
-      },
-      keyframes: {
-        "accordion-down": {
-          from: { height: "0px" },
-          to: { height: "var(--radix-accordion-content-height)" },
-        },
-        "accordion-up": {
-          from: { height: "var(--radix-accordion-content-height)" },
-          to: { height: "0px" },
-        },
-        fadeIn: {
-          from: { opacity: "0" },
-          to: { opacity: "1" },
-        },
-        fadeOut: {
-          from: { opacity: "1" },
-          to: { opacity: "0" },
-        },
-        "collapse-down": {
-          from: { height: "0px" },
-          to: { height: "var(--radix-collapsible-content-height)" },
-        },
-        "collapse-up": {
-          from: { height: "var(--radix-collapsible-content-height)" },
-          to: { height: "0px" },
-        },
-      },
-      animation: {
-        "accordion-down": "accordion-down 0.2s ease-out",
-        "accordion-up": "accordion-up 0.2s ease-out",
-        fadeIn: "fadeIn 0.2s ease-out",
-        fadeOut: "fadeOut 0.2s ease-out",
-        "collapse-down": "collapse-down 0.2s ease-out",
-        "collapse-up": "collapse-up 0.2s ease-out",
-      },
-      colors: {
-        border: "hsl(var(--border))",
-        input: "hsl(var(--input))",
-        ring: "hsl(var(--ring))",
-        background: "hsl(var(--background))",
-        foreground: "hsl(var(--foreground))",
-        primary: {
-          DEFAULT: "hsl(var(--primary))",
-          foreground: "hsl(var(--primary-foreground))",
-        },
-        secondary: {
-          DEFAULT: "hsl(var(--secondary))",
-          foreground: "hsl(var(--secondary-foreground))",
-        },
-        destructive: {
-          DEFAULT: "hsl(var(--destructive))",
-          foreground: "hsl(var(--destructive-foreground))",
-        },
-        muted: {
-          DEFAULT: "hsl(var(--muted))",
-          foreground: "hsl(var(--muted-foreground))",
-        },
-        accent: {
-          DEFAULT: "hsl(var(--accent))",
-          foreground: "hsl(var(--accent-foreground))",
-        },
-        popover: {
-          DEFAULT: "hsl(var(--popover))",
-          foreground: "hsl(var(--popover-foreground))",
-        },
-        card: {
-          DEFAULT: "hsl(var(--card))",
-          foreground: "hsl(var(--card-foreground))",
-        },
-      },
-    },
-  },
-  plugins: [require("tailwindcss-animate")],
-};
-
-`;
+export const TAILWIND_CONFIG_JS = `const { fontFamily } = require("tailwindcss/defaultTheme");
+
+/**@type {import('tailwindcss').Config} */
+module.exports = {
+  darkMode: "class",
+  theme: {
+    extend: {
+      container: {
+        center: true,
+        padding: {
+          DEFAULT: "1rem",
+          sm: "2rem",
+          lg: "4rem",
+        },
+        screens: {
+          "2xl": "1440px",
+        },
+      },
+      fontFamily: {
+        sans: ["Inter var", "Inter", ...fontFamily.sans],
+      },
+      borderRadius: {
+        lg: "var(--radius)",
+        md: "calc(var(--radius) - 2px)",
+        sm: "calc(var(--radius) - 4px)",
+      },
+      keyframes: {
+        "accordion-down": {
+          from: { height: "0px" },
+          to: { height: "var(--radix-accordion-content-height)" },
+        },
+        "accordion-up": {
+          from: { height: "var(--radix-accordion-content-height)" },
+          to: { height: "0px" },
+        },
+        fadeIn: {
+          from: { opacity: "0" },
+          to: { opacity: "1" },
+        },
+        fadeOut: {
+          from: { opacity: "1" },
+          to: { opacity: "0" },
+        },
+        "collapse-down": {
+          from: { height: "0px" },
+          to: { height: "var(--radix-collapsible-content-height)" },
+        },
+        "collapse-up": {
+          from: { height: "var(--radix-collapsible-content-height)" },
+          to: { height: "0px" },
+        },
+      },
+      animation: {
+        "accordion-down": "accordion-down 0.2s ease-out",
+        "accordion-up": "accordion-up 0.2s ease-out",
+        fadeIn: "fadeIn 0.2s ease-out",
+        fadeOut: "fadeOut 0.2s ease-out",
+        "collapse-down": "collapse-down 0.2s ease-out",
+        "collapse-up": "collapse-up 0.2s ease-out",
+      },
+      colors: {
+        border: "hsl(var(--border))",
+        input: "hsl(var(--input))",
+        ring: "hsl(var(--ring))",
+        background: "hsl(var(--background))",
+        foreground: "hsl(var(--foreground))",
+        primary: {
+          DEFAULT: "hsl(var(--primary))",
+          foreground: "hsl(var(--primary-foreground))",
+        },
+        secondary: {
+          DEFAULT: "hsl(var(--secondary))",
+          foreground: "hsl(var(--secondary-foreground))",
+        },
+        destructive: {
+          DEFAULT: "hsl(var(--destructive))",
+          foreground: "hsl(var(--destructive-foreground))",
+        },
+        muted: {
+          DEFAULT: "hsl(var(--muted))",
+          foreground: "hsl(var(--muted-foreground))",
+        },
+        accent: {
+          DEFAULT: "hsl(var(--accent))",
+          foreground: "hsl(var(--accent-foreground))",
+        },
+        popover: {
+          DEFAULT: "hsl(var(--popover))",
+          foreground: "hsl(var(--popover-foreground))",
+        },
+        card: {
+          DEFAULT: "hsl(var(--card))",
+          foreground: "hsl(var(--card-foreground))",
+        },
+      },
+    },
+  },
+  plugins: [require("tailwindcss-animate")],
+};
+
+`;

package/src/types.ts

@@ -1,13 +1,13 @@
-export type UIConfig = {
-  theme: string;
-  tailwindCSSLocation: string;
-  tailwindConfigLocation: string;
-  componentsLocation: string;
-  composablesLocation: string;
-  utilsLocation: string;
-  force: boolean;
-  useDefaultFilename: boolean;
-  packageManager: string;
-};
-
-export type InitOptions = { force?: boolean };
+export type UIConfig = {
+  theme: string;
+  tailwindCSSLocation: string;
+  tailwindConfigLocation: string;
+  componentsLocation: string;
+  composablesLocation: string;
+  utilsLocation: string;
+  force: boolean;
+  useDefaultFilename: boolean;
+  packageManager: string;
+};
+
+export type InitOptions = { force?: boolean };

package/src/utils/addPrettierConfig.ts

@@ -1,24 +1,24 @@
-import { $ } from "execa";
-import fse from "fs-extra";
-import ora from "ora";
-import prompts from "prompts";
-
-import { PRETTIER_CONFIG } from "../templates/prettier";
-
-export const addPrettierConfig = async (cwd = process.cwd(), format: boolean = true) => {
-  if (fse.existsSync(`${cwd}/.prettierrc`)) {
-    const res = await prompts({
-      name: "overwrite",
-      type: "confirm",
-      message: "A prettier config file already exists. Overwrite?",
-      initial: true,
-    });
-    if (!res.overwrite) return false;
-  }
-  await fse.writeFile(`${cwd}/.prettierrc`, PRETTIER_CONFIG, "utf-8");
-  if (!format) return true;
-  const spinner = ora("Formatting files with prettier...").start();
-  await $`npx prettier --write .`;
-  spinner.succeed("Files formatted with prettier");
-  return true;
-};
+import { $ } from "execa";
+import fse from "fs-extra";
+import ora from "ora";
+import prompts from "prompts";
+
+import { PRETTIER_CONFIG } from "../templates/prettier";
+
+export const addPrettierConfig = async (cwd = process.cwd(), format: boolean = true) => {
+  if (fse.existsSync(`${cwd}/.prettierrc`)) {
+    const res = await prompts({
+      name: "overwrite",
+      type: "confirm",
+      message: "A prettier config file already exists. Overwrite?",
+      initial: true,
+    });
+    if (!res.overwrite) return false;
+  }
+  await fse.writeFile(`${cwd}/.prettierrc`, PRETTIER_CONFIG, "utf-8");
+  if (!format) return true;
+  const spinner = ora("Formatting files with prettier...").start();
+  await $`npx prettier --write .`;
+  spinner.succeed("Files formatted with prettier");
+  return true;
+};

package/src/utils/compareUIConfig.ts

@@ -1,35 +1,35 @@
-import { UIConfig } from "../types";
-import { getUIConfig } from "./config";
-
-/**
- * Compares the UI config with a temporary config to see if any properties are missing
- * @returns {boolean} - Returns true if all properties are present
- */
-export const compareUIConfig = async () => {
-  // Get ui config
-  let userConfig: UIConfig = await getUIConfig();
-  const tempConfig: UIConfig = {
-    theme: "string",
-    tailwindCSSLocation: "string",
-    tailwindConfigLocation: "string",
-    componentsLocation: "string",
-    composablesLocation: "string",
-    utilsLocation: "string",
-    force: true,
-    useDefaultFilename: true,
-    packageManager: "string",
-  };
-
-  const missingProperties: string[] = [];
-
-  for (const key of Object.keys(tempConfig)) {
-    if (userConfig[key as keyof UIConfig] === undefined) {
-      missingProperties.push(key);
-    }
-  }
-
-  if (missingProperties.length > 0) {
-    return false;
-  }
-  return true;
-};
+import { UIConfig } from "../types";
+import { getUIConfig } from "./config";
+
+/**
+ * Compares the UI config with a temporary config to see if any properties are missing
+ * @returns {boolean} - Returns true if all properties are present
+ */
+export const compareUIConfig = async () => {
+  // Get ui config
+  let userConfig: UIConfig = await getUIConfig();
+  const tempConfig: UIConfig = {
+    theme: "string",
+    tailwindCSSLocation: "string",
+    tailwindConfigLocation: "string",
+    componentsLocation: "string",
+    composablesLocation: "string",
+    utilsLocation: "string",
+    force: true,
+    useDefaultFilename: true,
+    packageManager: "string",
+  };
+
+  const missingProperties: string[] = [];
+
+  for (const key of Object.keys(tempConfig)) {
+    if (userConfig[key as keyof UIConfig] === undefined) {
+      missingProperties.push(key);
+    }
+  }
+
+  if (missingProperties.length > 0) {
+    return false;
+  }
+  return true;
+};

package/src/utils/config.ts

@@ -1,84 +1,84 @@
-import { join } from "path";
-import { loadConfig } from "c12";
-import fse from "fs-extra";
-import kleur from "kleur";
-import _ from "lodash";
-import { loadFile, ProxifiedModule, writeFile } from "magicast";
-import { addNuxtModule, getDefaultExportOptions } from "magicast/helpers";
-import prompts from "prompts";
-
-import { InitOptions, UIConfig } from "../types";
-import { initPrompts } from "./uiConfigPrompt";
-
-const currentDir = process.cwd();
-const uiConfigFilename = "ui-thing.config.ts";
-
-export const getNuxtConfig = async () => {
-  if (!fse.existsSync("nuxt.config.ts")) {
-    console.log(kleur.red(`No ${kleur.bgWhite(`nuxt.config.ts`)} file found. Exiting...`));
-    return process.exit(0);
-  }
-  const nuxtConfig = await loadFile(join(currentDir, "nuxt.config.ts"));
-  const defaultExport = getDefaultExportOptions(nuxtConfig);
-  return { nuxtConfig, defaultExport };
-};
-
-export const getUIConfig = async (options?: InitOptions) => {
-  const configFileExists = fse.existsSync(uiConfigFilename);
-  let uiConfig: UIConfig = {} as UIConfig;
-
-  if (!configFileExists || options?.force) {
-    uiConfig = await initPrompts();
-    await fse.writeFile(uiConfigFilename, `export default ${JSON.stringify(uiConfig, null, 2)}`);
-    // Check if user chose pnpm as package manager
-    if (uiConfig.packageManager === "pnpm") {
-      // check if a .npmrc file exists
-      const npmrcExists = fse.existsSync(".npmrc");
-      // as the user if they want to create a .npmrc file
-      if (npmrcExists) {
-        const { confirmCreateNpmrc } = await prompts({
-          type: "confirm",
-          name: "confirmCreateNpmrc",
-          message: "A .npmrc file already exists. Do you want to overwrite it?",
-          initial: false,
-        });
-        if (confirmCreateNpmrc) {
-          await fse.writeFile(".npmrc", "shamefully-hoist=true\nstrict-peer-dependencies=false\n");
-        }
-      } else {
-        await fse.writeFile(".npmrc", "shamefully-hoist=true\nstrict-peer-dependencies=false\n");
-      }
-    }
-  } else {
-    const data = await loadConfig({
-      configFile: uiConfigFilename.replace(".ts", ""),
-    });
-    uiConfig = data.config as UIConfig;
-  }
-  if (_.isEmpty(uiConfig)) {
-    await getUIConfig({ force: true });
-  }
-  createConfigPaths(uiConfig);
-  return uiConfig;
-};
-
-export const createConfigPaths = (uiConfig: UIConfig) => {
-  // Esnure files exists
-  if (uiConfig.tailwindCSSLocation) fse.ensureFileSync(uiConfig.tailwindConfigLocation);
-  if (uiConfig.tailwindConfigLocation) fse.ensureFileSync(uiConfig.tailwindCSSLocation);
-  if (uiConfig.componentsLocation) fse.ensureDirSync(uiConfig.componentsLocation);
-  if (uiConfig.composablesLocation) fse.ensureDirSync(uiConfig.composablesLocation);
-  if (uiConfig.utilsLocation) fse.ensureDirSync(uiConfig.utilsLocation);
-};
-
-export const addModuleToConfig = (cfg: ProxifiedModule, modules: string[] | string) => {
-  if (typeof modules === "string") {
-    modules = [modules];
-  }
-  modules.forEach((m) => addNuxtModule(cfg, m));
-  return cfg;
-};
-
-export const updateConfig = async (cfg: ProxifiedModule, fileName = "nuxt.config.ts") => {
-  await writeFile(cfg.$ast, fileName);
-};
+import { join } from "path";
+import { loadConfig } from "c12";
+import fse from "fs-extra";
+import kleur from "kleur";
+import _ from "lodash";
+import { loadFile, ProxifiedModule, writeFile } from "magicast";
+import { addNuxtModule, getDefaultExportOptions } from "magicast/helpers";
+import prompts from "prompts";
+
+import { InitOptions, UIConfig } from "../types";
+import { initPrompts } from "./uiConfigPrompt";
+
+const currentDir = process.cwd();
+const uiConfigFilename = "ui-thing.config.ts";
+
+export const getNuxtConfig = async () => {
+  if (!fse.existsSync("nuxt.config.ts")) {
+    console.log(kleur.red(`No ${kleur.bgWhite(`nuxt.config.ts`)} file found. Exiting...`));
+    return process.exit(0);
+  }
+  const nuxtConfig = await loadFile(join(currentDir, "nuxt.config.ts"));
+  const defaultExport = getDefaultExportOptions(nuxtConfig);
+  return { nuxtConfig, defaultExport };
+};
+
+export const getUIConfig = async (options?: InitOptions) => {
+  const configFileExists = fse.existsSync(uiConfigFilename);
+  let uiConfig: UIConfig = {} as UIConfig;
+
+  if (!configFileExists || options?.force) {
+    uiConfig = await initPrompts();
+    await fse.writeFile(uiConfigFilename, `export default ${JSON.stringify(uiConfig, null, 2)}`);
+    // Check if user chose pnpm as package manager
+    if (uiConfig.packageManager === "pnpm") {
+      // check if a .npmrc file exists
+      const npmrcExists = fse.existsSync(".npmrc");
+      // as the user if they want to create a .npmrc file
+      if (npmrcExists) {
+        const { confirmCreateNpmrc } = await prompts({
+          type: "confirm",
+          name: "confirmCreateNpmrc",
+          message: "A .npmrc file already exists. Do you want to overwrite it?",
+          initial: false,
+        });
+        if (confirmCreateNpmrc) {
+          await fse.writeFile(".npmrc", "shamefully-hoist=true\nstrict-peer-dependencies=false\n");
+        }
+      } else {
+        await fse.writeFile(".npmrc", "shamefully-hoist=true\nstrict-peer-dependencies=false\n");
+      }
+    }
+  } else {
+    const data = await loadConfig({
+      configFile: uiConfigFilename.replace(".ts", ""),
+    });
+    uiConfig = data.config as UIConfig;
+  }
+  if (_.isEmpty(uiConfig)) {
+    await getUIConfig({ force: true });
+  }
+  createConfigPaths(uiConfig);
+  return uiConfig;
+};
+
+export const createConfigPaths = (uiConfig: UIConfig) => {
+  // Esnure files exists
+  if (uiConfig.tailwindCSSLocation) fse.ensureFileSync(uiConfig.tailwindConfigLocation);
+  if (uiConfig.tailwindConfigLocation) fse.ensureFileSync(uiConfig.tailwindCSSLocation);
+  if (uiConfig.componentsLocation) fse.ensureDirSync(uiConfig.componentsLocation);
+  if (uiConfig.composablesLocation) fse.ensureDirSync(uiConfig.composablesLocation);
+  if (uiConfig.utilsLocation) fse.ensureDirSync(uiConfig.utilsLocation);
+};
+
+export const addModuleToConfig = (cfg: ProxifiedModule, modules: string[] | string) => {
+  if (typeof modules === "string") {
+    modules = [modules];
+  }
+  modules.forEach((m) => addNuxtModule(cfg, m));
+  return cfg;
+};
+
+export const updateConfig = async (cfg: ProxifiedModule, fileName = "nuxt.config.ts") => {
+  await writeFile(cfg.$ast, fileName);
+};

package/src/utils/constants.ts

@@ -1,36 +1,36 @@
-export const INIT_DEPS = ["radix-vue", "tailwind-variants"];
-export const INIT_DEV_DEPS = [
-  "typescript",
-  "tailwindcss-animate",
-  "nuxt-icon",
-  "nuxt-lodash",
-  "prettier-plugin-tailwindcss",
-  "prettier",
-  "@nuxtjs/tailwindcss",
-  "@nuxtjs/color-mode",
-  "@ianvs/prettier-plugin-sort-imports",
-  "@vueuse/nuxt",
-];
-
-export const INIT_MODULES = [
-  "@nuxtjs/tailwindcss",
-  "@nuxtjs/color-mode",
-  "@vueuse/nuxt",
-  "nuxt-lodash",
-  "nuxt-icon",
-];
-
-export const CSS_THEME_OPTIONS = [
-  { title: "Zinc", value: "zinc" },
-  { title: "Slate", value: "slate" },
-  { title: "Stone", value: "stone" },
-  { title: "Gray", value: "gray" },
-  { title: "Neutral", value: "neutral" },
-  { title: "Red", value: "red" },
-  { title: "Rose", value: "rose" },
-  { title: "Orange", value: "orange" },
-  { title: "Green", value: "green" },
-  { title: "Blue", value: "blue" },
-  { title: "Yellow", value: "yellow" },
-  { title: "Violet", value: "violet" },
-];
+export const INIT_DEPS = ["radix-vue", "tailwind-variants"];
+export const INIT_DEV_DEPS = [
+  "typescript",
+  "tailwindcss-animate",
+  "nuxt-icon",
+  "nuxt-lodash",
+  "prettier-plugin-tailwindcss",
+  "prettier",
+  "@nuxtjs/tailwindcss",
+  "@nuxtjs/color-mode",
+  "@ianvs/prettier-plugin-sort-imports",
+  "@vueuse/nuxt",
+];
+
+export const INIT_MODULES = [
+  "@nuxtjs/tailwindcss",
+  "@nuxtjs/color-mode",
+  "@vueuse/nuxt",
+  "nuxt-lodash",
+  "nuxt-icon",
+];
+
+export const CSS_THEME_OPTIONS = [
+  { title: "Zinc", value: "zinc" },
+  { title: "Slate", value: "slate" },
+  { title: "Stone", value: "stone" },
+  { title: "Gray", value: "gray" },
+  { title: "Neutral", value: "neutral" },
+  { title: "Red", value: "red" },
+  { title: "Rose", value: "rose" },
+  { title: "Orange", value: "orange" },
+  { title: "Green", value: "green" },
+  { title: "Blue", value: "blue" },
+  { title: "Yellow", value: "yellow" },
+  { title: "Violet", value: "violet" },
+];

package/src/utils/fileExists.ts

@@ -1,10 +1,10 @@
-import fs from "node:fs";
-
-export const fileExists = async (path: string) => {
-  try {
-    await fs.promises.access(path, fs.constants.F_OK || fs.constants.W_OK);
-    return true;
-  } catch (error) {
-    return false;
-  }
-};
+import fs from "node:fs";
+
+export const fileExists = async (path: string) => {
+  try {
+    await fs.promises.access(path, fs.constants.F_OK || fs.constants.W_OK);
+    return true;
+  } catch (error) {
+    return false;
+  }
+};