ui-thing 0.0.28 → 0.0.30

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ui-thing",
-  "version": "0.0.28",
+  "version": "0.0.30",
   "description": "CLI used to add Nuxt 3 components to a project",
   "type": "module",
   "types": "./dist/index.d.ts",
@@ -45,7 +45,7 @@
     "boxen": "^7.1.1",
     "build": "^0.1.4",
     "c12": "^1.9.0",
-    "commander": "^11.1.0",
+    "commander": "^12.0.0",
     "defu": "^6.1.4",
     "execa": "^8.0.1",
     "figlet": "^1.7.0",

package/src/commands/add.ts

@@ -30,8 +30,9 @@ export const add = new Command()
   .name("add")
   .command("add")
   .description("Add a list of components to your project.")
+  .option("-a --all", "Add all components to your project.", false)
   .argument("[componentNames...]", "Components that you want to add.")
-  .action(async (components: Array<string>) => {
+  .action(async (components: Array<string>, options: { all?: boolean }) => {
     // Get nuxt config
     const cfg = await getNuxtConfig();
     // Get ui config
@@ -48,7 +49,7 @@ export const add = new Command()
     let componentNames = components;
     // if no components are passed, prompt the user to select components
     if (componentNames.length === 0) {
-      const response = await promptUserForComponents();
+      const response = await promptUserForComponents(options.all);
       if ((response && response.length === 0) || !response) {
         consola.info("No components selected. Exiting...");
         process.exit(0);
@@ -277,16 +278,22 @@ export const add = new Command()
 
     // check if the foundDeps & foundDevDeps lists are not empty, ask the user to install them
     if (foundDeps.length > 0 || foundDevDeps.length > 0) {
-      const { confirmInstall } = await prompts({
-        type: "confirm",
-        name: "confirmInstall",
-        message: `Do you want to install the following packages: ${kleur.cyan(
-          foundDeps.join(", ")
-        )} ${kleur.cyan(foundDevDeps.join(", "))}`,
-        initial: true,
-      });
-      if (confirmInstall) {
+      // if the all option was passed, install the packages without asking
+      if (options.all) {
         await installPackages(uiConfig.packageManager, foundDeps, foundDevDeps);
+      } else {
+        // Ask the user to install the packages
+        const { confirmInstall } = await prompts({
+          type: "confirm",
+          name: "confirmInstall",
+          message: `Do you want to install the following packages: ${kleur.cyan(
+            foundDeps.join(", ")
+          )} ${kleur.cyan(foundDevDeps.join(", "))}`,
+          initial: true,
+        });
+        if (confirmInstall) {
+          await installPackages(uiConfig.packageManager, foundDeps, foundDevDeps);
+        }
       }
     }
 

package/src/commands/init.ts

@@ -19,6 +19,7 @@ export const init = new Command()
     "Initialize UI Thing in your Nuxt3 project. This will: 1. Create a tailwind.config.js file 2. Update your nuxt.config.ts file 3. Add the necessary dependencies 4. Create a ui-thing.config.ts file with the default configuration"
   )
   .option("-f --force", "Overwrite config file if it exists.", false)
+  .option("-y --yes", "Skip prompts and use default values.", false)
   .action(async (options: InitOptions) => {
     // Get nuxt config
     const cfg = await getNuxtConfig();

package/src/comps.ts

@@ -795,6 +795,64 @@ export default [
     composables: [],
     plugins: [],
   },
+  {
+    name: "Drawer",
+    value: "drawer",
+    deps: ["vaul-vue"],
+    files: [
+      {
+        fileName: "Drawer/Close.vue",
+        dirPath: "components/UI",
+        fileContent:
+          '<template>\n  <DrawerClose v-bind="props">\n    <slot />\n  </DrawerClose>\n</template>\n\n<script lang="ts" setup>\n  import { DrawerClose } from "vaul-vue";\n\n  interface Props\n    extends /* @vue-ignore */ Partial<Pick<InstanceType<typeof DrawerClose>, "$props">> {}\n  const props = defineProps<Props>();\n</script>\n',
+      },
+      {
+        fileName: "Drawer/Content.vue",
+        dirPath: "components/UI",
+        fileContent:
+          '<template>\n  <UiDrawerPortal>\n    <slot name="overlay">\n      <UiDrawerOverlay />\n    </slot>\n    <slot name="content">\n      <DrawerContent v-bind="{ ...props, ...$attrs }" :class="styles({ class: props.class })">\n        <slot name="knob">\n          <div\n            className="mx-auto cursor-grab active:cursor-grabbing my-5 h-2 w-[60px] rounded-full bg-muted"\n          />\n        </slot>\n        <slot />\n      </DrawerContent>\n    </slot>\n  </UiDrawerPortal>\n</template>\n\n<script lang="ts" setup>\n  import { DrawerContent } from "vaul-vue";\n\n  defineOptions({ inheritAttrs: false });\n\n  interface Props\n    extends /* @vue-ignore */ Partial<Pick<InstanceType<typeof DrawerContent>, "$props">> {}\n\n  const props = defineProps<Props & { class?: any }>();\n  const styles = tv({\n    base: "fixed bottom-0 left-0 right-0 z-50 mt-24 flex h-auto max-h-[95%] flex-col rounded-t-[10px] border bg-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary/40",\n  });\n</script>\n',
+      },
+      {
+        fileName: "Drawer/Description.vue",
+        dirPath: "components/UI",
+        fileContent:
+          '<template>\n  <DrawerDescription v-bind="props" :class="styles({ class: props.class })">\n    <slot>\n      {{ props.text }}\n    </slot>\n  </DrawerDescription>\n</template>\n\n<script lang="ts" setup>\n  import { DrawerDescription } from "vaul-vue";\n\n  interface Props\n    extends /* @vue-ignore */ Partial<Pick<InstanceType<typeof DrawerDescription>, "$props">> {\n    class?: any;\n    text?: string;\n  }\n\n  const props = defineProps<Props>();\n\n  const styles = tv({\n    base: "text-sm text-muted-foreground",\n  });\n</script>\n',
+      },
+      {
+        fileName: "Drawer/Drawer.vue",
+        dirPath: "components/UI",
+        fileContent:
+          '<template>\n  <DrawerRoot v-bind="props">\n    <slot />\n  </DrawerRoot>\n</template>\n\n<script lang="ts" setup>\n  import { DrawerRoot } from "vaul-vue";\n\n  interface Props\n    extends /* @vue-ignore */ Partial<Pick<InstanceType<typeof DrawerRoot>, "$props">> {}\n  const props = defineProps<Props>();\n</script>\n',
+      },
+      {
+        fileName: "Drawer/Overlay.vue",
+        dirPath: "components/UI",
+        fileContent:
+          '<template>\n  <DrawerOverlay v-bind="props" :class="styles({ class: props.class })" />\n</template>\n\n<script lang="ts" setup>\n  import { DrawerOverlay } from "vaul-vue";\n\n  interface Props\n    extends /* @vue-ignore */ Partial<Pick<InstanceType<typeof DrawerOverlay>, "$props">> {}\n\n  const props = defineProps<Props & { class?: any }>();\n\n  const styles = tv({\n    base: "fixed inset-0 z-50 bg-black/40 backdrop-blur",\n  });\n</script>\n',
+      },
+      {
+        fileName: "Drawer/Portal.vue",
+        dirPath: "components/UI",
+        fileContent:
+          '<template>\n  <DrawerPortal v-bind="props">\n    <slot />\n  </DrawerPortal>\n</template>\n\n<script lang="ts" setup>\n  import { DrawerPortal } from "vaul-vue";\n\n  interface Props\n    extends /* @vue-ignore */ Partial<Pick<InstanceType<typeof DrawerPortal>, "$props">> {}\n\n  const props = defineProps<Props>();\n</script>\n',
+      },
+      {
+        fileName: "Drawer/Title.vue",
+        dirPath: "components/UI",
+        fileContent:
+          '<template>\n  <DrawerTitle v-bind="props" :class="styles({ class: props.class })">\n    <slot>\n      {{ props.text }}\n    </slot>\n  </DrawerTitle>\n</template>\n\n<script lang="ts" setup>\n  import { DrawerTitle } from "vaul-vue";\n\n  interface Props\n    extends /* @vue-ignore */ Partial<Pick<InstanceType<typeof DrawerTitle>, "$props">> {\n    class?: any;\n    text?: string;\n  }\n\n  const props = defineProps<Props>();\n\n  const styles = tv({\n    base: "text-lg font-semibold leading-none tracking-tight",\n  });\n</script>\n',
+      },
+      {
+        fileName: "Drawer/Trigger.vue",
+        dirPath: "components/UI",
+        fileContent:
+          '<template>\n  <DrawerTrigger v-bind="props">\n    <slot />\n  </DrawerTrigger>\n</template>\n\n<script lang="ts" setup>\n  import { DrawerTrigger } from "vaul-vue";\n\n  interface Props\n    extends /* @vue-ignore */ Partial<Pick<InstanceType<typeof DrawerTrigger>, "$props">> {}\n\n  const props = defineProps<Props>();\n</script>\n',
+      },
+    ],
+    utils: [],
+    composables: [],
+    plugins: [],
+  },
   {
     name: "Dropdown Menu",
     value: "dropdown-menu",

package/src/types.ts

@@ -10,7 +10,7 @@ export type UIConfig = {
   packageManager: string;
 };
 
-export type InitOptions = { force?: boolean };
+export type InitOptions = { force?: boolean; yes?: boolean };
 
 export type Component = {
   name: string;

package/src/utils/config.ts

@@ -12,6 +12,17 @@ import { initPrompts } from "./uiConfigPrompt";
 
 const currentDir = process.cwd();
 const uiConfigFilename = "ui-thing.config.ts";
+const defaultConfig = {
+  theme: "zinc",
+  tailwindCSSLocation: "assets/css/tailwind.css",
+  tailwindConfigLocation: "tailwind.config.js",
+  componentsLocation: "components/Ui",
+  composablesLocation: "composables",
+  utilsLocation: "utils",
+  force: true,
+  useDefaultFilename: true,
+  packageManager: "npm",
+};
 
 export const getNuxtConfig = async () => {
   if (!fse.existsSync("nuxt.config.ts")) {
@@ -28,7 +39,12 @@ export const getUIConfig = async (options?: InitOptions) => {
   let uiConfig: UIConfig = {} as UIConfig;
 
   if (!configFileExists || options?.force) {
-    uiConfig = await initPrompts();
+    // if option yes is passed, use default values
+    if (options?.yes) {
+      uiConfig = defaultConfig;
+    } else {
+      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") {

package/src/utils/promptForComponents.ts

@@ -1,10 +1,11 @@
-import ora from "ora";
 import prompts from "prompts";
 
 import allComponents from "../comps";
 import { Component } from "../types";
 
-export const promptUserForComponents = async (): Promise<string[]> => {
+export const promptUserForComponents = async (all?: boolean): Promise<string[]> => {
+  // If all is true, return all components
+  if (all) return allComponents.map((c: Component) => c.value);
   const { components } = await prompts({
     type: "autocompleteMultiselect",
     name: "components",