ui-thing 0.0.3

package/src/templates/tailwind.ts

@@ -0,0 +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")],
+};
+
+`;

package/src/types.ts

@@ -0,0 +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 };

package/src/utils/addPrettierConfig.ts

@@ -0,0 +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;
+};

package/src/utils/compareUIConfig.ts

@@ -0,0 +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;
+};

package/src/utils/config.ts

@@ -0,0 +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);
+};

package/src/utils/constants.ts

@@ -0,0 +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" },
+];

package/src/utils/fileExists.ts

@@ -0,0 +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;
+  }
+};

package/src/utils/installPackages.ts

@@ -0,0 +1,28 @@
+import { execa } from "execa";
+import _ from "lodash";
+import ora from "ora";
+
+export const installPackages = async (
+  packageManager: string,
+  deps?: string[] | string,
+  devDeps?: string | string[]
+) => {
+  if (typeof deps === "string") {
+    deps = [deps];
+  }
+  if (typeof devDeps === "string") {
+    devDeps = [devDeps];
+  }
+
+  const depsSpinner = ora("Installing dependencies...").start();
+  if (!_.isUndefined(deps) && !_.isEmpty(deps)) {
+    await execa(packageManager, [packageManager === "yarn" ? "add" : "install", ...deps]);
+  }
+  depsSpinner.text = "Installing dev dependencies...";
+  if (!_.isUndefined(devDeps) && !_.isEmpty(devDeps)) {
+    await execa(packageManager, [packageManager === "yarn" ? "add" : "install", "-D", ...devDeps]);
+  }
+  await execa(packageManager, ["run", "postinstall"]);
+
+  depsSpinner.succeed("Installed dependencies!");
+};

package/src/utils/printFancyBoxMessage.ts

@@ -0,0 +1,19 @@
+import boxen from "boxen";
+import figlet from "figlet";
+import type { Options } from "boxen";
+
+export const printFancyBoxMessage = (title: string, boxOptions?: Options, description?: string) => {
+  console.log("\n");
+  console.log(
+    boxen(figlet.textSync(title), {
+      borderColor: "greenBright",
+      padding: 1,
+      borderStyle: "round",
+      titleAlignment: "center",
+      ...boxOptions,
+    })
+  );
+  if (description) {
+    console.log(`\n${description}`);
+  }
+};

package/src/utils/promptForComponents.ts

@@ -0,0 +1,17 @@
+import prompts from "prompts";
+
+import allComponents from "../comp";
+
+export const promptUserForComponents = async (): Promise<string[]> => {
+  const { components } = await prompts({
+    type: "autocompleteMultiselect",
+    name: "components",
+    message: "Select the components you want to add",
+    choices: allComponents.map((c) => ({ title: c.name, value: c.value })),
+    onRender(kleur) {
+      // @ts-ignore
+      this.msg = kleur.bgCyan(" Choose components ") + "  Select the components you want to add";
+    },
+  });
+  return components;
+};

package/src/utils/uiConfigPrompt.ts

@@ -0,0 +1,73 @@
+import kleur from "kleur";
+import prompts from "prompts";
+
+import { CSS_THEME_OPTIONS } from "./constants";
+
+export const initPrompts = async () => {
+  const response = await prompts([
+    {
+      name: "theme",
+      type: "autocomplete",
+      message: "Which theme do you want to start with?",
+      choices: CSS_THEME_OPTIONS,
+    },
+    {
+      name: "tailwindCSSLocation",
+      type: "text",
+      message: "Where is your tailwind.css file located?",
+      initial: "assets/css/tailwind.css",
+    },
+    {
+      name: "tailwindConfigLocation",
+      type: "text",
+      message: "Where is your tailwind.config file located?",
+      initial: "tailwind.config.js",
+    },
+    {
+      name: "componentsLocation",
+      type: "text",
+      message: "Where should your components be stored?",
+      initial: "components/UI",
+    },
+    {
+      name: "composablesLocation",
+      type: "text",
+      message: "Where should your composables be stored?",
+      initial: "composables",
+    },
+    {
+      name: "utilsLocation",
+      type: "text",
+      message: "Where should your utils be stored?",
+      initial: "utils",
+    },
+    {
+      name: "force",
+      type: "confirm",
+      message: "Should we ask before overwriting files?",
+      initial: true,
+    },
+    {
+      name: "useDefaultFilename",
+      type: "confirm",
+      message: "Would you like to use the default filename when adding components?",
+      initial: true,
+    },
+    {
+      name: "packageManager",
+      type: "select",
+      message: "Which package manager do you use?",
+      choices: [
+        { title: "NPM", value: "npm" },
+        { title: "Yarn", value: "yarn" },
+        { title: "PNPM", value: "pnpm" },
+        { title: "Bun", value: "bun" },
+      ],
+    },
+  ]);
+  if (!response || Object.keys(response).length < 9) {
+    console.log(kleur.red("Incomplete configuration submitted. Exiting..."));
+    return process.exit(0);
+  }
+  return response;
+};

package/src/utils/writeFile.ts

@@ -0,0 +1,18 @@
+import fs from "node:fs";
+import path from "node:path";
+
+import { fileExists } from "./fileExists";
+
+export const writeFile = async (filePath: string, fileContent: string) => {
+  // check if the file exists
+  const exists = await fileExists(filePath);
+  // if it doesn't, create it
+  if (!exists) {
+    // if it doesn't, create it
+    const folderPath = path.dirname(filePath);
+    if (!fs.existsSync(folderPath)) {
+      fs.mkdirSync(folderPath, { recursive: true });
+    }
+  }
+  fs.writeFileSync(filePath, fileContent);
+};

package/tsconfig.json

@@ -0,0 +1,16 @@
+{
+  "include": ["src/**/*"],
+  "exclude": ["node_modules", "**/*.spec.ts", "dist"],
+  "compilerOptions": {
+    "target": "ESNext",
+    "module": "commonjs",
+    "outDir": "dist",
+    "rootDir": "src",
+    "strict": true,
+    "esModuleInterop": true,
+    "forceConsistentCasingInFileNames": true,
+    "declaration": true,
+    "sourceMap": true,
+    "allowSyntheticDefaultImports": true
+  }
+}

package/tsup.config.ts

@@ -0,0 +1,12 @@
+import { defineConfig } from "tsup";
+
+export default defineConfig({
+  sourcemap: true,
+  entry: ["src/index.ts"],
+  dts: true,
+  clean: true,
+  format: ["esm"],
+  minify: true,
+  target: "esnext",
+  outDir: "dist",
+});