@dasidev/dasi-ui 1.0.0 → 1.0.2

package/README.md

@@ -1,4 +1,4 @@
-# Framework Web
+# @dasidev/dasi-ui
 
 A starter Vue 3 + TypeScript framework for building configurable, enterprise-ready web apps. It ships with a configuration-driven architecture, unified components, and type-safe development. Forms are powered by Vueform, which serves as the built-in form builder across the project.
 
@@ -6,34 +6,73 @@ A starter Vue 3 + TypeScript framework for building configurable, enterprise-rea
 
 Make sure you guys use node v20 or above
 
-### Installation
+### Create New Project
 
 ```sh
-npm install
-```
+# Using npm (recommended)
+npx @dasidev/dasi-ui create my-admin-app
 
-### Development
+# Using yarn
+yarn create @dasidev/dasi-ui my-admin-app
 
-```sh
-npm run dev
+# Using pnpm
+pnpm create @dasidev/dasi-ui my-admin-app
 ```
 
-### Production Build
+### Install as Library
 
 ```sh
-npm run build
-```
+# Using npm
+npm install @dasidev/dasi-ui
 
-### Testing
+# Using yarn
+yarn add @dasidev/dasi-ui
 
-```sh
-npm run test:unit
+# Using pnpm
+pnpm add @dasidev/dasi-ui
 ```
 
-### Linting
+### Requirements
+- Node.js: v20 or above
+-Package Manager: npm v10+, yarn, or pnpm
+
+## 📦 Usage
 
 ```sh
-npm run lint
+# Create new project with interactive setup
+npx @dasidev/dasi-ui create my-admin-app
+
+# Follow the prompts to configure:
+# - Project title and description
+# - Template (default/minimal/full)
+# - Features (auth, charts, maps, forms)
+# - Package manager
+# - TypeScript support
+# - API configuration
+# - Dark mode
+
+# Navigate to project directory
+cd my-admin-app
+
+# Install dependencies
+npm install
+
+# Run development server
+npm run dev
+```
+
+### As Component Library
+``` typescript
+<template>
+  <DasiApp>
+    <PageActivity endpoint="/users" />
+  </DasiApp>
+</template>
+
+<script setup>
+import { DasiApp, PageActivity } from '@dasidev/dasi-ui'
+import '@dasidev/dasi-ui/style.css'
+</script>
 ```
 
 ## 🏗️ Architecture Overview
@@ -66,7 +105,7 @@ Create your app configuration in `src/config/my-app.config.ts`:
 export default {
   app: {
     name: "My Application",
-    version: "1.0.0"
+    version: "1.0.2"
   },
   api: {
     baseUrl: process.env.VITE_API_URL || "http://localhost:3000/api",
@@ -291,6 +330,21 @@ Components are styled with Tailwind classes and support:
 - **Disabled States**: Proper disabled styling
 - **Loading States**: Loading indicators
 
+## 🎯 CLI Features
+
+The CLI provides interactive setup with:
+- Template Selection: Default, Minimal, or Full-featured
+- Feature Toggles: Authentication, Charts, Maps, Forms
+- Package Manager: npm, yarn, or pnpm
+- TypeScript: Optional TypeScript support
+- API Configuration: Custom API endpoints
+- Theming: Dark mode support
+
+Available Templates
+- Default - Complete admin dashboard with all core features
+- Minimal - Basic admin setup with essential components
+- Full - All features including charts, maps, and advanced forms
+
 ## 📚 Key Libraries
 
 - **Vue 3** - Main framework with Composition API
@@ -337,6 +391,8 @@ VITE_APP_NAME=My Application
 VITE_COMPANY_NAME=My Company
 ```
 
+🚀 Ready to build your next admin dashboard? Start with npx @dasidev/dasi-ui create my-app!
+
 ### Vite Configuration
 
 See [Vite Configuration Reference](https://vitejs.dev/config/) for advanced configuration options.

package/bin/dasi-cli.cjs

@@ -125,33 +125,102 @@ program
 
             fs.mkdirSync(projectPath, { recursive: true });
             
-            const templatePath = path.join(__dirname, '../templates', answers.template);
-            await fs.copy(templatePath, projectPath);
-
-            const packagejsonPath = path.join(projectPath, 'package.json');
-            const packagejson = await fs.readJson(packagejsonPath);
-
-            packagejson.name = projectName;
-            packagejson.description = answers.description;
-            packagejson.author = answers.author;
-            packagejson.email = answers.email;
-            packagejson.version = '0.1.0';
-
-            await fs.writeJson(packagejsonPath, packagejson, { spaces: 2 });
-
-            const envExamplePath = path.join(projectPath, '.env.example');
-            let envContent = await fs.readFile(envExamplePath, 'utf-8');
-
-            envContent = envContent.replace(/VITE_APP_TITLE=.*/, `VITE_APP_TITLE=${answers.title}`);
-            envContent = envContent.replace(/VITE_APP_DESCRIPTION=.*/, `VITE_APP_DESCRIPTION=${answers.description}`);
-            envContent = envContent.replace(/VITE_APP_AUTHOR=.*/, `VITE_APP_AUTHOR=${answers.author}`);
-            envContent = envContent.replace(/VITE_APP_EMAIL=.*/, `VITE_APP_EMAIL=${answers.email}`);
-            envContent = envContent.replace(/VITE_API_URL=.*/, `VITE_API_URL=${answers.apiUrl}`);
-            envContent = envContent.replace(/VITE_API_KEY=.*/, `VITE_API_KEY=${answers.apiKey}`);
-            envContent = envContent.replace(/VITE_DARK_MODE=.*/, `VITE_DARK_MODE=${answers.darkMode}`);
+            await fs.ensureDir(path.join(projectPath, 'src'));
+            await fs.ensureDir(path.join(projectPath, 'public'));
+            // const templatePath = path.join(__dirname, '../templates', answers.template);
+            // await fs.copy(templatePath, projectPath);
+
+            const packagejson = {
+                name: projectName,
+                version: "0.1.0",
+                private: true,
+                type: "module",
+                description: answers.description,
+                author: answers.author,
+                scripts: {
+                    dev: "vite",
+                    build: "vite build", 
+                    preview: "vite preview"
+                },
+                dependencies: {
+                    "@dasidev/dasi-ui": "^1.0.1",
+                    "vue": "^3.4.0",
+                    "vue-router": "^4.2.0",
+                    "pinia": "^2.1.0"
+                },
+                devDependencies: {
+                    "@vitejs/plugin-vue": "^5.0.0",
+                    "vite": "^5.0.0"
+                }
+            }
 
-            await fs.writeFile(envPath, envContent);
-            await fs.copyFile(envExamplePath, path.join(projectPath, '.env'));
+            await fs.writeJson(path.join(projectPath, 'package.json'), packagejson, { spaces: 2 });
+
+            const envContent = `VITE_APP_TITLE=${answers.title}
+                VITE_APP_DESCRIPTION=${answers.description}
+                VITE_APP_AUTHOR=${answers.author}
+                VITE_APP_EMAIL=${answers.email}
+                VITE_API_URL=${answers.apiUrl}
+                VITE_API_KEY=
+                VITE_DARK_MODE=${answers.darkMode}`;
+
+            await fs.writeFile(path.join(projectPath, '.env.example'), envContent);
+            await fs.copyFile(path.join(projectPath, '.env.example'), path.join(projectPath, '.env'));
+
+            await fs.ensureDir(path.join(projectPath, 'src/components'));
+            await fs.ensureDir(path.join(projectPath, 'src/views'));
+            await fs.ensureDir(path.join(projectPath, 'src/router'));
+            await fs.ensureDir(path.join(projectPath, 'src/stores'));
+            await fs.ensureDir(path.join(projectPath, 'src/config'));
+            await fs.ensureDir(path.join(projectPath, 'src/vueform'));
+            await fs.ensureDir(path.join(projectPath, 'src/vueform/config'));
+            await fs.ensureDir(path.join(projectPath, 'src/vueform/schemas'));
+            
+            const mainJs = `import { createApp } from 'vue'
+                import { createRouter, createWebHistory } from 'vue-router'
+                import { createPinia } from 'pinia'
+                import { DasiApp, PageActivity } from '@dasidev/dasi-ui'
+                import '@dasidev/dasi-ui/style.css'
+                const app = createApp(DasiApp)
+                const router = createRouter({
+                    history: createWebHistory(),
+                    routes: [
+                        {
+                        path: '/',
+                        component: () => import('./views/Dashboard.vue')
+                        }
+                    ]
+                })
+                const pinia = createPinia()
+                app.use(router)
+                app.use(pinia)
+                app.mount('#app')`;
+                
+            await fs.writeFile(path.join(projectPath, 'src/main.js'), mainJs);
+
+            const indexHtml = `<!DOCTYPE html>
+            <html lang="en">
+            <head>
+                <meta charset="UTF-8">
+                <meta name="viewport" content="width=device-width, initial-scale=1.0">
+                <title>${answers.title}</title>
+            </head>
+            <body>
+                <div id="app"></div>
+                <script type="module" src="/src/main.js"></script>
+            </body>
+            </html>`;
+            await fs.writeFile(path.join(projectPath, 'index.html'), indexHtml);
+
+            const viteConfig = `import { defineConfig } from 'vite'
+                import vue from '@vitejs/plugin-vue'
+                export default defineConfig({
+                plugins: [vue()],
+                server: {
+                    port: 3000
+                }
+            })`;
+            await fs.writeFile(path.join(projectPath, 'vite.config.js'), viteConfig);
 
             if (options.git) {
                 execSync('git init', { cwd: projectPath, stdio: 'ignore' });
@@ -177,7 +246,9 @@ program
             console.log(chalk.green('\nHappy coding! 🚀 Your admin dashboard is ready!'));
         } catch (error) {
             spinner.fail('Failed to create project!');
-            console.error('Error:', error);
+            console.error(chalk.red('Error Details:'));
+            console.error(chalk.red(error.message));
+            console.error(chalk.red(error.stack));
             process.exit(1);
         }
         

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dasidev/dasi-ui",
-  "version": "1.0.0",
+  "version": "1.0.2",
   "private": false,
   "type": "module",
   "main": "dist/index.js",