@dasidev/dasi-ui 1.0.22 → 1.0.23

package/README.md

@@ -1,5 +1,408 @@
-# Vue 3 + TypeScript + Vite
+<!-- # Vue 3 + TypeScript + Vite
 
 This template should help get you started developing with Vue 3 and TypeScript in Vite. The template uses Vue 3 `<script setup>` SFCs, check out the [script setup docs](https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup) to learn more.
 
-Learn more about the recommended Project Setup and IDE Support in the [Vue Docs TypeScript Guide](https://vuejs.org/guide/typescript/overview.html#project-setup).
+Learn more about the recommended Project Setup and IDE Support in the [Vue Docs TypeScript Guide](https://vuejs.org/guide/typescript/overview.html#project-setup). -->
+
+# @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.
+
+## 🚀 Quick Start
+
+Make sure you guys use node v20 or above
+
+### Create New Project
+
+```sh
+# Using npm (recommended)
+npx @dasidev/dasi-ui create my-admin-app
+
+# Using yarn
+yarn create @dasidev/dasi-ui my-admin-app
+
+# Using pnpm
+pnpm create @dasidev/dasi-ui my-admin-app
+```
+<!-- 
+### Install as Library
+
+```sh
+# Using npm
+npm install @dasidev/dasi-ui
+
+# Using yarn
+yarn add @dasidev/dasi-ui
+
+# Using pnpm
+pnpm add @dasidev/dasi-ui
+``` -->
+
+### Requirements
+- Node.js: v20 or above
+-Package Manager: npm v10+, yarn, or pnpm
+
+## 📦 Usage
+
+```sh
+# 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
+
+This framework follows a **configuration-driven architecture** where pages are defined through schemas and configurations, making it highly reusable and maintainable.
+
+<!-- ### Core Flow
+
+```
+Route → PageActivity → Schema → Table → DataTableCell
+  ↓         ↓          ↓        ↓         ↓
+Config → PageConfig → Columns → Render → Display
+```
+
+### Key Components
+
+- **PageActivity.vue** - Main page container
+- **DataTable.vue** - Unified table component
+- **DataTableCell.vue** - Smart cell renderer
+- **BaseSelector.vue** - Unified selector component
+- **DateSelectorElement.vue** - Unified date picker -->
+
+## 📋 Configuration System
+
+### 1. Application Configuration
+
+Create your app configuration in `src/config/my-app.config.ts`:
+
+```typescript
+export default {
+  app: {
+    name: "My Application",
+    version: "1.0.2"
+  },
+  api: {
+    baseUrl: process.env.VITE_API_URL || "http://localhost:3000/api",
+    timeout: 10000
+  },
+  branding: {
+    companyName: "My Company",
+    logo: "/logo.svg"
+  }
+}
+```
+
+### 2. Page Configuration
+
+Create page-specific configs in `src/vueform/config/{endpoint}.ts`:
+
+```typescript
+export default {
+  endpoint: "/users",
+  title: "User Management",
+  columns: [
+    { key: "name", header: "Name", visible: true },
+    { key: "email", header: "Email", visible: true }
+  ]
+}
+```
+
+### 3. Form Schema
+
+Define your form schemas in `src/vueform/schemas/{pageCode}/{schema}.ts`:
+
+```typescript
+export default {
+  schema: {
+    name: {
+      type: "text",
+      label: "Full Name",
+      rules: ["required"],
+      showInTable: true
+    },
+    organizationId: {
+      type: "selector",
+      endpoint: "/organizations",
+      label: "Organization",
+      showAvatar: true,
+      condition: { levels: "admin" },
+      showInTable: true
+    },
+    birthDate: {
+      type: "date_selector",
+      label: "Birth Date",
+      pickerType: "date",
+      showInTable: true
+    }
+  }
+}
+```
+
+## 🎯 Unified Components
+
+### BaseSelector
+
+A unified selector component that handles all selection needs:
+
+```typescript
+// Single selection
+{
+  type: "selector",
+  endpoint: "/users",
+  showAvatar: true,
+  nameField: "name"
+}
+
+// Multiple selection
+{
+  type: "selector",
+  endpoint: "/users",
+  multiple: true,
+  showAvatar: true,
+  returnObject: true
+}
+
+// With conditions and sorting
+{
+  type: "selector",
+  endpoint: "/organizations",
+  condition: { levels: "admin" },
+  orderBy: "name",
+  sort: "asc"
+}
+```
+
+### DateSelectorElement
+
+A unified date picker supporting all date types:
+
+```typescript
+// Single date
+{
+  type: "date_selector",
+  pickerType: "date",
+  label: "Select Date"
+}
+
+// Date range
+{
+  type: "date_selector",
+  pickerType: "date",
+  range: true,
+  label: "Select Date Range"
+}
+
+// DateTime with time picker
+{
+  type: "date_selector",
+  pickerType: "datetime",
+  enableTimePicker: true,
+  label: "Select Date & Time"
+}
+
+// Month picker
+{
+  type: "date_selector",
+  pickerType: "month",
+  label: "Select Month"
+}
+
+// Year picker
+{
+  type: "date_selector",
+  pickerType: "year",
+  yearRange: [2020, 2030],
+  label: "Select Year"
+}
+```
+
+## 📊 Table System
+
+### Automatic Column Generation
+
+The framework automatically generates table columns from your form schema:
+
+```typescript
+// Schema definition
+{
+  name: {
+    type: "text",
+    label: "Name",
+    showInTable: true,
+    textAlign: "left"
+  },
+  organizationId: {
+    type: "selector",
+    endpoint: "/organizations",
+    showAvatar: true,
+    showInTable: true
+  }
+}
+
+// Automatically becomes table columns
+// - Name (text column)
+// - Organization (selector with avatar)
+```
+
+### Cell Types
+
+The `DataTableCell.vue` component automatically handles different cell types:
+
+- **`text`** - Plain text display
+- **`selector`** - Selector with avatar support
+- **`date_selector`** - Date picker with all variants
+- **`toggle`** - Boolean toggle display
+- **`checkboxgroup`** - Checkbox group display
+- **`radiogroup`** - Radio group display
+- **`select`** - Select dropdown display
+
+## 🔧 Development Workflow
+
+### 1. Create New Page
+
+1. **Add Route**: Define route in `src/router/index.ts`
+2. **Create Schema**: Add schema in `src/vueform/schemas/{pageCode}/`
+3. **Create Config**: Add page config in `src/vueform/config/`
+4. **Test**: The page will automatically work with the framework
+
+### 2. Add New Field
+
+1. **Define in Schema**: Add field to your form schema
+2. **Set Properties**: Configure `showInTable`, `cellType`, etc.
+3. **Test**: Field automatically appears in both form and table
+
+### 3. Custom Cell Rendering
+
+```typescript
+// Custom cell renderer
+{
+  name: {
+    type: "text",
+    cellRender: (i: number, row: any) => {
+      return `<strong>${row.name}</strong>`;
+    }
+  }
+}
+```
+
+## 🎨 Styling & Theming
+
+### Tailwind CSS
+
+The framework uses Tailwind CSS with custom configuration:
+
+- **Dark Mode**: Automatic dark mode support
+- **Custom Colors**: Brand-specific color schemes
+- **Responsive**: Mobile-first responsive design
+
+### Component Styling
+
+Components are styled with Tailwind classes and support:
+
+- **Hover States**: Interactive hover effects
+- **Focus States**: Keyboard navigation 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
+- **TypeScript** - Type safety and better DX
+- **Tailwind CSS** - Utility-first CSS framework
+- **Shadcn-vue** - Component library
+- **Lucide Vue** - Icon library
+- **Vueform** - Form handling
+- **Pinia** - State management
+- **Vue Router** - Client-side routing
+- **Axios** - HTTP client
+- **Moment.js** - Date manipulation
+
+## 🤝 Contribution
+
+1. **Clone** the repository
+2. **Create** a new branch for your feature: `git checkout -b feature-name`
+3. **Develop** your feature following the framework patterns
+4. **Test** your changes thoroughly
+5. **Create** a pull request to the `dev` branch
+
+### Branch Naming
+
+Use descriptive branch names:
+- `feature/user-management`
+- `fix/date-picker-bug`
+- `enhancement/table-performance`
+
+## 📖 Documentation
+
+- **Framework Guide**: See `FRAMEWORK_GUIDE.md` for detailed documentation
+- **Quick Start**: See `QUICK_START.md` for getting started
+- **API Reference**: Check component documentation in code
+
+## 🔧 Customization
+
+### Environment Variables
+
+Create `.env.local`:
+
+```env
+VITE_API_URL=http://localhost:3000/api
+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.
+
+---
+
+**Built with ❤️ using Vue 3, TypeScript, and modern web technologies.**