create-dovite 2.0.0 → 2.2.0

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,17 @@
 {
   "name": "create-dovite",
-  "version": "2.0.0",
+  "version": "2.2.0",
   "description": "Vite template featuring Tailwind (v4), ShadCN (Canary), and DOMO integration.",
   "main": "index.js",
   "bin": {
     "create-dovite": "index.js"
   },
   "files": [
-    "template",
+    "templates/react-js",
+    "templates/react-ts",
+    "templates/index.jsx",
+    "templates/index.css",
+    "src",
     "index.js"
   ],
   "keywords": [
@@ -23,7 +27,7 @@
   "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

@@ -0,0 +1,111 @@
+const fs = require("fs");
+const path = require("path");
+
+function copyTemplateFiles(projectName, templateType) {
+  // __dirname is .../src
+  // templates are in .../templates
+  const templateDir = path.join(__dirname, "..", "templates", templateType);
+  const destDir = projectName; // Relative to CWD
+
+  if (fs.existsSync(templateDir)) {
+    console.log(`Copying ${templateType} template files...`);
+    const copyRecursive = (src, dest) => {
+      if (fs.statSync(src).isDirectory()) {
+        if (!fs.existsSync(dest)) {
+          fs.mkdirSync(dest, { recursive: true });
+        }
+        const files = fs.readdirSync(src);
+        for (const file of files) {
+          copyRecursive(path.join(src, file), path.join(dest, file));
+        }
+      } else {
+        fs.copyFileSync(src, dest);
+      }
+    };
+    copyRecursive(templateDir, destDir);
+  } else {
+    console.warn(`Template directory not found: ${templateDir}`);
+  }
+}
+
+function updateManifest(projectName) {
+  const publicDir = path.join(projectName, "public");
+  const manifestJsPath = path.join(publicDir, "manifest.js");
+  const manifestJsonPath = path.join(publicDir, "manifest.json");
+
+  if (fs.existsSync(manifestJsPath)) {
+    // Legacy/JS template handling
+    console.log("Updating manifest.js with project name...");
+    let manifestContent = fs.readFileSync(manifestJsPath, "utf8");
+    manifestContent = manifestContent.replace(
+      /name:\s*["']([^"']*)["']/g,
+      `name: "${projectName}"`
+    );
+    fs.writeFileSync(manifestJsPath, manifestContent);
+  } else if (fs.existsSync(manifestJsonPath)) {
+    // TS/JSON template handling
+    console.log("Updating manifest.json with project name...");
+    const manifestContent = JSON.parse(
+      fs.readFileSync(manifestJsonPath, "utf8")
+    );
+    manifestContent.name = projectName;
+    fs.writeFileSync(
+      manifestJsonPath,
+      JSON.stringify(manifestContent, null, 2)
+    );
+  } else {
+    // Create if missing (fallback)
+    if (!fs.existsSync(publicDir)) {
+      fs.mkdirSync(publicDir, { recursive: true });
+    }
+    // Default to JSON for new setup
+    console.log("Creating manifest.json with project name...");
+    const basicManifest = {
+      name: projectName,
+      version: "1.0.0",
+      description: `${projectName} application`,
+    };
+    fs.writeFileSync(manifestJsonPath, JSON.stringify(basicManifest, null, 2));
+  }
+}
+
+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

@@ -0,0 +1,52 @@
+const prompts = require("prompts");
+
+async function getProjectDetails(initialProjectName) {
+  let projectName = initialProjectName;
+  let templateType = "react-js"; // default
+
+  const questions = [];
+
+  if (!projectName) {
+    questions.push({
+      type: "text",
+      name: "projectName",
+      message: "Project name:",
+      initial: "my-dovite-app",
+    });
+  }
+
+  questions.push({
+    type: "select",
+    name: "template",
+    message: "Select a template:",
+    choices: [
+      { title: "React JavaScript", value: "react-js" },
+      { title: "React TypeScript", value: "react-ts" },
+      // Vue templates coming soon in a future release
+      // { title: "Vue JavaScript", value: "vue-js" },
+      // { title: "Vue TypeScript", value: "vue-ts" },
+    ],
+    initial: 0,
+  });
+
+  if (questions.length > 0) {
+    const response = await prompts(questions, {
+      onCancel: () => {
+        console.log("Operation cancelled");
+        process.exit(0);
+      },
+    });
+
+    if (!projectName) projectName = response.projectName || projectName;
+    templateType = response.template;
+  }
+
+  if (!projectName) {
+    console.error("Please specify a project name");
+    process.exit(1);
+  }
+
+  return { projectName, templateType };
+}
+
+module.exports = { getProjectDetails };

package/src/setup.js

@@ -0,0 +1,129 @@
+const { execSync } = require("child_process");
+const fs = require("fs");
+const path = require("path");
+
+function createViteProject(projectName, templateType) {
+  console.log(
+    `Creating new project: ${projectName} with template ${templateType}`
+  );
+
+  // 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`,
+    {
+      stdio: "inherit",
+    }
+  );
+}
+
+function updatePackageJson(projectName, templateType) {
+  console.log("Updating package name and scripts...");
+  const packageJsonPath = path.join(projectName, "package.json");
+  const packageJson = JSON.parse(fs.readFileSync(packageJsonPath, "utf8"));
+
+  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: 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 ..",
+  };
+
+  fs.writeFileSync(packageJsonPath, JSON.stringify(packageJson, null, 2));
+}
+
+function installDependencies(projectName, templateType) {
+  console.log("Installing dependencies...");
+  const options = { stdio: "inherit", cwd: projectName };
+  const isVue = templateType === "vue-js" || templateType === "vue-ts";
+
+  execSync("yarn", options);
+
+  console.log("Installing additional dependencies...");
+
+  // 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, templateType) {
+  console.log("Initializing shadcn...");
+  const options = { stdio: "inherit", cwd: projectName };
+  const isVue = templateType === "vue-js" || templateType === "vue-ts";
+
+  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 "${shadcnCmd}" manually if initialization failed.`
+    );
+  }
+}
+
+function initializeGit(projectName) {
+  console.log("Initializing git");
+  const options = { stdio: "inherit", cwd: projectName };
+  try {
+    execSync("git init", options);
+    execSync("git add .", options);
+    execSync(`git commit -m "first commit"`, options);
+    execSync("git checkout -b main", options);
+  } catch (e) {
+    console.log("Git initialization failed or skipped.");
+  }
+}
+
+module.exports = {
+  createViteProject,
+  updatePackageJson,
+  installDependencies,
+  initializeShadcn,
+  initializeGit,
+};

package/templates/react-js/jsconfig.json

@@ -0,0 +1,7 @@
+{
+  "compilerOptions": {
+    "paths": {
+      "@/*": ["./src/*"]
+    }
+  }
+}

package/templates/react-js/public/manifest.json

@@ -0,0 +1,12 @@
+{
+  "name": "project-name",
+  "version": "0.0.1",
+  "size": {
+    "width": 3,
+    "height": 3
+  },
+  "mapping": [],
+  "collections": [],
+  "workflowMapping": [],
+  "packagesMapping": []
+}

package/templates/react-js/src/API/currentUserContext.jsx

@@ -0,0 +1,56 @@
+/* eslint-disable react/prop-types */
+import { createContext, useState, useEffect } from "react";
+import DomoApi from "./DomoAPI";
+
+export const UserContext = createContext();
+
+export const UserProvider = ({ children }) => {
+  const [currentUser, setCurrentUser] = useState("");
+  const [currentUserId, setCurrentUserId] = useState("");
+  const [avatarKey, setAvatarKey] = useState("");
+  const [customer, setCustomer] = useState("");
+  const [host, setHost] = useState("");
+
+  useEffect(() => {
+    let isUserFetched = false;
+
+    DomoApi.GetCurrentUser().then((data) => {
+      // console.log("User Data",data);
+      
+      if (!isUserFetched) {
+        const userId = data?.userId;
+        const displayName = data?.displayName;
+        const avatarKey = data?.avatarKey;
+        const customer=data?.customer;
+        const host=data?.host;
+
+        setCurrentUser(displayName || "");
+        setCurrentUserId(userId || "");
+        setAvatarKey(avatarKey || "");
+        setCustomer(customer || "");
+        setHost(host || "");
+
+
+        isUserFetched = true;
+      }
+    });
+
+    return () => {
+      isUserFetched = true;
+    };
+  }, []);
+
+  return (
+    <UserContext.Provider
+      value={{
+        currentUser,
+        currentUserId,
+        avatarKey,
+        customer,
+        host
+      }}
+    >
+      {children}
+    </UserContext.Provider>
+  );
+};