create-dovite 2.0.1 → 2.2.2

package/README.md

@@ -1,20 +1,28 @@
 # create-dovite
 
-Vite template featuring Tailwind(v4), ShadCN, and DOMO integration.
+<!-- a detailed description of the package with all the features -->
 
-> **Note:** This package requires yarn and the DOMO CLI to be installed before use.
+**create-dovite** is a CLI tool designed to jumpstart the development of Domo Custom Apps. It provides a modern developer experience by combining the speed of **Vite** with the utility-first approach of **Tailwind CSS**. This starter kit comes pre-integrated with **shadcn/ui** for accessible components and includes built-in configurations for the **Domo Integrations**, ensuring a smooth transition from local development to production.
+
+# Features
+
+- ⚡️ Vite for fast development
+- ⚛️ React and Vue support
+- 📘 TypeScript and JavaScript support
+- 🎨 Tailwind CSS for styling
+- 🎯 shadcn/ui components
+- 🔄 DOMO integration
+- 📦 Preconfigured build setup
 
 ## Prerequisites
 
+> **Note:** This package requires yarn and the DOMO CLI to be installed before use.
+
 ```bash
-# Install yarn if you don't have it
-npm install -g yarn
+# Install yarn and DOMO CLI if you don't have them
+npm install -g yarn ryuu
 ```
 
-# For DOMO CLI installation, refer to:
-
-[DOMO CLI](https://developer.domo.com/portal/6hlzv1hinkq19-setup-and-installation)
-
 ## Usage
 
 ```bash
@@ -25,19 +33,15 @@ yarn create dovite my-app
 npx create-dovite my-app
 ```
 
-## Features
-
-- ⚡️ Vite for fast development
-- 🎨 Tailwind CSS for styling
-- 🎯 shadcn/ui components
-- 🔄 DOMO integration
-- 📦 Preconfigured build setup
-
 ## Requirements
 
 - Node.js 16.x or higher
 - npm or yarn
 
+## For DOMO CLI installation, refer to:
+
+[DOMO CLI](https://developer.domo.com/portal/6hlzv1hinkq19-setup-and-installation)
+
 ## Inspirations
 
 - [DOMO Starter Kits](https://developer.domo.com/portal/u8w475o2245yp-starter-kits)

package/index.js

@@ -1,4 +1,4 @@
-#!/usr/bin/env node
+#!/usr/bin/env node
 const { getProjectDetails } = require("./src/prompts");
 const {
   createViteProject,
@@ -7,7 +7,11 @@ const {
   initializeShadcn,
   initializeGit,
 } = require("./src/setup");
-const { copyTemplateFiles, updateManifest } = require("./src/files");
+const {
+  copyTemplateFiles,
+  updateManifest,
+  cleanupViteDefaults,
+} = require("./src/files");
 
 async function main() {
   try {
@@ -21,13 +25,15 @@ async function main() {
     // We pass projectName so they can resolve paths correctly relative to CWD
     updatePackageJson(projectName, templateType);
 
-    installDependencies(projectName);
+    installDependencies(projectName, templateType);
 
     copyTemplateFiles(projectName, templateType);
 
+    cleanupViteDefaults(projectName, templateType);
+
     updateManifest(projectName);
 
-    initializeShadcn(projectName);
+    initializeShadcn(projectName, templateType);
 
     initializeGit(projectName);
 

package/package.json

@@ -1,13 +1,16 @@
 {
   "name": "create-dovite",
-  "version": "2.0.1",
-  "description": "Vite template featuring Tailwind (v4), ShadCN (Canary), and DOMO integration.",
+  "version": "2.2.2",
+  "description": "Vite template featuring React, Vue, TailwindCSS, ShadCN, and DOMO integration.",
   "main": "index.js",
   "bin": {
     "create-dovite": "index.js"
   },
   "files": [
-    "templates",
+    "templates/react-js",
+    "templates/react-ts",
+    "templates/vue-js",
+    "templates/vue-ts",
     "src",
     "index.js"
   ],
@@ -18,13 +21,14 @@
     "shadcn",
     "domo",
     "react",
+    "vue",
     "create-vite"
   ],
   "author": "Ajay B",
   "license": "MIT",
   "repository": {
     "type": "git",
-    "url": "https://github.com/Ajay-Balu/create-dovite"
+    "url": "git+https://github.com/Ajay-Balu/create-dovite.git"
   },
   "dependencies": {
     "prompts": "^2.4.2"

package/src/files.js

@@ -69,4 +69,43 @@ function updateManifest(projectName) {
   }
 }
 
-module.exports = { copyTemplateFiles, updateManifest };
+function cleanupViteDefaults(projectName, templateType) {
+  const isVue = templateType === "vue-js" || templateType === "vue-ts";
+
+  if (isVue) {
+    // Clean up default style.css created by Vite Vue template
+    // Remove body/#app styles that conflict with our landing page
+    const styleCssPath = path.join(projectName, "src", "style.css");
+    if (fs.existsSync(styleCssPath)) {
+      console.log("Cleaning up default style.css...");
+      let content = fs.readFileSync(styleCssPath, "utf8");
+
+      // Remove body styles block
+      content = content.replace(
+        /body\s*\{[^}]*display:\s*flex[^}]*place-items:\s*center[^}]*\}/gs,
+        ""
+      );
+
+      // Remove #app styles block
+      content = content.replace(
+        /#app\s*\{[^}]*max-width:\s*1280px[^}]*\}/gs,
+        ""
+      );
+
+      // Clean up extra whitespace
+      content = content.replace(/\n{3,}/g, "\n\n").trim();
+
+      // Write back the cleaned content (or empty string if nothing left)
+      fs.writeFileSync(styleCssPath, content + "\n");
+    }
+  }
+
+  // Remove App.css if it exists (created by Vite React template)
+  const appCssPath = path.join(projectName, "src", "App.css");
+  if (fs.existsSync(appCssPath)) {
+    console.log("Removing default App.css...");
+    fs.unlinkSync(appCssPath);
+  }
+}
+
+module.exports = { copyTemplateFiles, updateManifest, cleanupViteDefaults };

package/src/prompts.js

@@ -22,6 +22,8 @@ async function getProjectDetails(initialProjectName) {
     choices: [
       { title: "React JavaScript", value: "react-js" },
       { title: "React TypeScript", value: "react-ts" },
+      { title: "Vue JavaScript", value: "vue-js" },
+      { title: "Vue TypeScript", value: "vue-ts" },
     ],
     initial: 0,
   });

package/src/setup.js

@@ -7,7 +7,15 @@ function createViteProject(projectName, templateType) {
     `Creating new project: ${projectName} with template ${templateType}`
   );
 
-  const viteTemplate = templateType === "react-ts" ? "react-ts" : "react";
+  // Map our template types to Vite's template names
+  const viteTemplateMap = {
+    "react-js": "react",
+    "react-ts": "react-ts",
+    "vue-js": "vue",
+    "vue-ts": "vue-ts",
+  };
+
+  const viteTemplate = viteTemplateMap[templateType] || "react";
   execSync(
     `yarn create vite ${projectName} --template ${viteTemplate} --no-interactive`,
     {
@@ -23,10 +31,21 @@ function updatePackageJson(projectName, templateType) {
 
   packageJson.name = projectName;
 
+  // TypeScript templates need tsc build step
+  const isTypeScript = templateType === "react-ts" || templateType === "vue-ts";
+  const buildCommand = isTypeScript ? "vue-tsc -b && vite build" : "vite build";
+  // React-ts uses tsc, Vue-ts uses vue-tsc
+  const tsBuildCommand =
+    templateType === "react-ts" ? "tsc -b && vite build" : buildCommand;
+
   packageJson.scripts = {
     ...packageJson.scripts,
     dev: "vite",
-    build: templateType === "react-ts" ? "tsc -b && vite build" : "vite build",
+    build: isTypeScript
+      ? templateType === "react-ts"
+        ? "tsc -b && vite build"
+        : "vue-tsc -b && vite build"
+      : "vite build",
     lint: "eslint .",
     preview: "vite preview",
     upload: "yarn run build && cd dist && domo publish && cd ..",
@@ -35,51 +54,55 @@ function updatePackageJson(projectName, templateType) {
   fs.writeFileSync(packageJsonPath, JSON.stringify(packageJson, null, 2));
 }
 
-function installDependencies(projectName) {
+function installDependencies(projectName, templateType) {
   console.log("Installing dependencies...");
-  // We need to run this inside the project directory
-  // But since we are passing projectName, we can use cwd option or chdir before calling this.
-  // However, the original script chdir'd into the project.
-  // Let's assume the caller will handle chdir or we pass cwd.
-  // To keep it simple and consistent with original flow, let's assume we are IN the project dir
-  // OR we pass the cwd to execSync.
-  // The original script did `process.chdir(projectName)`.
-
-  // Let's stick to the original flow where we chdir in the main script,
-  // OR we can make these functions robust.
-  // For now, let's assume we are inside the directory for these commands to work easily
-  // without passing cwd everywhere, BUT `updatePackageJson` used `path.join`.
-  // Let's make `updatePackageJson` work with relative path, and these commands too.
-
-  // Actually, `yarn` needs to run in the project dir.
-
   const options = { stdio: "inherit", cwd: projectName };
+  const isVue = templateType === "vue-js" || templateType === "vue-ts";
 
   execSync("yarn", options);
 
   console.log("Installing additional dependencies...");
-  execSync(
-    "yarn add tailwindcss @tailwindcss/vite @domoinc/ryuu-proxy ryuu.js tailwind-merge react-icons",
-    options
-  );
+
+  // Common dependencies for all templates
+  const commonDeps =
+    "tailwindcss @tailwindcss/vite @domoinc/ryuu-proxy ryuu.js tailwind-merge";
+
+  if (isVue) {
+    // Vue-specific dependencies
+    execSync(`yarn add ${commonDeps}`, options);
+  } else {
+    // React-specific dependencies
+    execSync(`yarn add ${commonDeps} react-icons`, options);
+  }
+
   execSync("yarn add -D @types/node", options);
 }
 
-function initializeShadcn(projectName) {
+function initializeShadcn(projectName, templateType) {
   console.log("Initializing shadcn...");
   const options = { stdio: "inherit", cwd: projectName };
-  try {
-    execSync("npx shadcn@latest init", options);
+  const isVue = templateType === "vue-js" || templateType === "vue-ts";
 
-    // Install new dependencies after shadcn (it might add some)
-    // The original script ran yarn again.
-    console.log("Installing final dependencies...");
-    execSync("yarn", options);
-
-    execSync("npx shadcn@latest add button", options);
+  try {
+    if (isVue) {
+      // Shadcn-vue uses a different initialization
+      execSync("npx shadcn-vue@latest init", options);
+      console.log("Installing final dependencies...");
+      execSync("yarn", options);
+      execSync("npx shadcn-vue@latest add button", options);
+    } else {
+      // React uses standard shadcn
+      execSync("npx shadcn@latest init", options);
+      console.log("Installing final dependencies...");
+      execSync("yarn", options);
+      execSync("npx shadcn@latest add button", options);
+    }
   } catch (error) {
+    const shadcnCmd = isVue
+      ? "npx shadcn-vue@latest init"
+      : "npx shadcn@latest init";
     console.log(
-      'Note: You may need to run "npx shadcn@latest init" manually if initialization failed.'
+      `Note: You may need to run "${shadcnCmd}" manually if initialization failed.`
     );
   }
 }

package/templates/react-js/src/App.jsx

@@ -1,13 +1,7 @@
-import { useState } from "react";
-import { Button } from "./components/ui/button";
-import "./App.css";
+import DefaultPage from "./pages/index";
+
 function App() {
-  const [count, setCount] = useState(0);
-  return (
-    <div className="App">
-      <Button onClick={() => setCount(count + 1)}>Count: {count}</Button>
-    </div>
-  );
+  return <DefaultPage />;
 }
 
 export default App;

package/templates/react-js/src/pages/index.css

@@ -0,0 +1,96 @@
+/* Landing Page Background */
+.landing-page {
+  background: linear-gradient(135deg, #0f0f23 0%, #1a1a2e 50%, #16213e 100%);
+}
+
+/* Logo Icon Base Styles */
+.logo-icon {
+  height: 4rem;
+  width: 4rem;
+  padding: 0.5rem;
+  will-change: filter, transform;
+  transition: filter 300ms, transform 300ms;
+}
+
+/* Logo Hover Effects with Glow */
+.logo-vite:hover {
+  filter: drop-shadow(0 0 2em rgba(189, 52, 254, 0.667));
+}
+
+.logo-react:hover {
+  filter: drop-shadow(0 0 2em rgba(97, 218, 251, 0.667));
+}
+
+.logo-domo:hover {
+  filter: drop-shadow(0 0 2em rgba(0, 181, 226, 0.667));
+}
+
+.logo-tailwind:hover {
+  filter: drop-shadow(0 0 2em rgba(6, 182, 212, 0.667));
+}
+
+.logo-shadcn {
+  color: #27272a;
+}
+
+.logo-shadcn:hover {
+  filter: drop-shadow(0 0 2em rgba(161, 161, 170, 0.667));
+}
+
+/* React Logo Spin Animation */
+@keyframes logo-spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+@media (prefers-reduced-motion: no-preference) {
+  .logo-react {
+    animation: logo-spin infinite 20s linear;
+  }
+}
+
+/* Gradient Text Animation */
+.gradient-text {
+  background: linear-gradient(
+    135deg,
+    #bd34fe 0%,
+    #41d1ff 25%,
+    #0072bc 50%,
+    #06b6d4 75%,
+    #a1a1aa 100%
+  );
+  background-size: 200% auto;
+  background-clip: text;
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  animation: gradient-shift 5s ease infinite;
+}
+
+@keyframes gradient-shift {
+  0%,
+  100% {
+    background-position: 0% 50%;
+  }
+  50% {
+    background-position: 100% 50%;
+  }
+}
+
+/* Responsive Logo Sizes */
+@media (max-width: 768px) {
+  .logo-icon {
+    height: 3rem;
+    width: 3rem;
+  }
+}
+
+@media (max-width: 480px) {
+  .logo-icon {
+    height: 2.5rem;
+    width: 2.5rem;
+  }
+}