@dasidev/dasi-ui 1.0.0

package/README.md

@@ -0,0 +1,346 @@
+# Framework Web
+
+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
+
+### Installation
+
+```sh
+npm install
+```
+
+### Development
+
+```sh
+npm run dev
+```
+
+### Production Build
+
+```sh
+npm run build
+```
+
+### Testing
+
+```sh
+npm run test:unit
+```
+
+### Linting
+
+```sh
+npm run lint
+```
+
+## 🏗️ 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.0"
+  },
+  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
+
+## 📚 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
+```
+
+### Vite Configuration
+
+See [Vite Configuration Reference](https://vitejs.dev/config/) for advanced configuration options.
+
+---
+
+**Built with ❤️ using Vue 3, TypeScript, and modern web technologies.**

package/bin/dasi-cli.cjs

@@ -0,0 +1,184 @@
+const { program } = require('commander');
+const inquirer = require('inquirer');
+const fs = require('fs-extra');
+const path = require('path');
+const chalk = require('chalk');
+const ora = require('ora');
+
+const { execSync } = require('child_process');
+program
+    .name('dasi-ui')
+    .description('DASI UI - Create admin dashboard projects')
+    .version('1.0.0')
+
+program
+    .command('create <project-name>')
+    .description('Create a new DASI UI project')
+    .option('-t --template <template>', 'Template to use', 'default')
+    .option('-p, --package-manager <pm>', 'Package manager to use', 'npm')
+    .option('--no-git', 'Skip git initialization')
+    .option('--no-install', 'Skip package installation')
+    .action(async (projectName, options) => {
+        console.log(chalk.blue.bold('🚀 Creating DASI UI project...'));
+
+        const questions = [
+            {
+                type: 'input',
+                name: 'title',
+                message: 'Enter project title:',
+                default: projectName
+            },
+            {
+                type: 'input',
+                name: 'description',
+                message: 'Enter project description:',
+                default: 'Admin dashboard built with DASI UI'
+            },
+            {
+                type: 'input',
+                name: 'author',
+                message: 'Author name:',
+                default: 'DASI Developer'
+            },
+            {
+                type: 'input',
+                name: 'email',
+                message: 'Author email:',
+                default: 'hello@dasi.co.id'
+            },
+            {
+                type: 'list',
+                name: 'packageManager',
+                message: 'Choose package manager:',
+                choices: ['npm', 'yarn', 'pnpm'],
+                default: options.packageManager
+            },
+            {
+                type: 'list',
+                name: 'template',
+                message: 'Choose template:',
+                choices: [
+                { name: 'Default - Complete admin dashboard', value: 'default' },
+                { name: 'Minimal - Basic admin setup', value: 'minimal' },
+                { name: 'Full - All features included', value: 'full' }
+                ],
+                default: options.template
+            },
+            {
+                type: 'confirm',
+                name: 'includeAuth',
+                message: 'Include authentication module?',
+                default: true
+            },
+            {
+                type: 'confirm',
+                name: 'includeCharts',
+                message: 'Include chart components?',
+                default: true
+            },
+            {
+                type: 'confirm',
+                name: 'includeMaps',
+                message: 'Include map components?',
+                default: false
+            },
+            {
+                type: 'confirm',
+                name: 'includeForms',
+                message: 'Include advanced form components?',
+                default: true
+            },
+            {
+                type: 'list',
+                name: 'typescript',
+                message: 'Use TypeScript?',
+                choices: [
+                { name: 'Yes - Recommended', value: true },
+                { name: 'No', value: false }
+                ],
+                default: true
+            },
+            {
+                type: 'input',
+                name: 'apiUrl',
+                message: 'API base URL:',
+                default: 'http://localhost:8080/api'
+            },
+            {
+                type: 'confirm',
+                name: 'darkMode',
+                message: 'Enable dark mode?',
+                default: true
+            }
+        ];
+        
+        const answers = await inquirer.prompt(questions);
+        const spinner = ora('Creating project...').start();
+        
+        try {
+            const projectPath = path.join(process.cwd(), projectName);
+
+            if (fs.existsSync(projectPath)) {
+                spinner.fail(`Directory ${projectName} already exists!`);
+                process.exit(1);
+            }
+
+            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.writeFile(envPath, envContent);
+            await fs.copyFile(envExamplePath, path.join(projectPath, '.env'));
+
+            if (options.git) {
+                execSync('git init', { cwd: projectPath, stdio: 'ignore' });
+                execSync('git add .', { cwd: projectPath, stdio: 'ignore' });
+                execSync('git commit -m "Initial commit"', { cwd: projectPath, stdio: 'ignore' });
+            }
+
+            if (options.install) {
+                spinner.text = 'Installing dependencies...';
+                execSync(`${answers.packageManager} install`, { cwd: projectPath, stdio: 'ignore' });
+            }
+
+            spinner.succeed(`Project ${projectName} created successfully!`);
+
+            console.log(chalk.green('\n✅ Next steps:'));
+            console.log(chalk.green(`  cd ${projectName}`));
+
+            if (!options.install) {
+                console.log(chalk.green(`  ${answers.packageManager} install`));
+            }
+
+            console.log(chalk.green(`  ${answers.packageManager} run dev`));
+            console.log(chalk.green('\nHappy coding! 🚀 Your admin dashboard is ready!'));
+        } catch (error) {
+            spinner.fail('Failed to create project!');
+            console.error('Error:', error);
+            process.exit(1);
+        }
+        
+    })

package/dist/date-selector-test-BlukYeWl.js

@@ -0,0 +1,91 @@
+const e = {
+  schema: {
+    // Test 1: Basic date picker
+    testDate: {
+      type: "DateSelectorElement",
+      label: "Test Date",
+      placeholder: "Select a date",
+      pickerType: "date",
+      rules: ["required"]
+    },
+    // Test 2: Date range
+    testDateRange: {
+      type: "DateSelectorElement",
+      label: "Test Date Range",
+      placeholder: "Select date range",
+      pickerType: "date",
+      range: !0
+    },
+    // Test 3: DateTime picker
+    testDateTime: {
+      type: "DateSelectorElement",
+      label: "Test DateTime",
+      placeholder: "Select date and time",
+      pickerType: "datetime",
+      timePickerInline: !0
+    },
+    // Test 4: DateTime range
+    testDateTimeRange: {
+      type: "DateSelectorElement",
+      label: "Test DateTime Range",
+      placeholder: "Select date time range",
+      pickerType: "datetime",
+      range: !0,
+      timePickerInline: !0
+    },
+    // Test 5: Month picker
+    testMonth: {
+      type: "DateSelectorElement",
+      label: "Test Month",
+      placeholder: "Select month",
+      pickerType: "month",
+      locale: "id"
+    },
+    // Test 6: Month range
+    testMonthRange: {
+      type: "DateSelectorElement",
+      label: "Test Month Range",
+      placeholder: "Select month range",
+      pickerType: "month",
+      range: !0,
+      locale: "id"
+    },
+    // Test 7: Year picker (using date picker with year navigation)
+    testYear: {
+      type: "DateSelectorElement",
+      label: "Test Year",
+      placeholder: "Select year",
+      pickerType: "year",
+      yearRange: [2020, 2030]
+    },
+    // Test 8: Year range (using date range picker with year navigation)
+    testYearRange: {
+      type: "DateSelectorElement",
+      label: "Test Year Range",
+      placeholder: "Select year range",
+      pickerType: "year",
+      range: !0,
+      yearRange: [2020, 2030]
+    },
+    // Test 9: Custom format
+    testCustomFormat: {
+      type: "DateSelectorElement",
+      label: "Test Custom Format",
+      placeholder: "Select date",
+      pickerType: "date",
+      displayFormat: "DD-MM-YYYY"
+    },
+    // Test 10: Disabled
+    testDisabled: {
+      type: "DateSelectorElement",
+      label: "Test Disabled",
+      placeholder: "This is disabled",
+      pickerType: "date",
+      disabled: !0,
+      default: "2024-01-01"
+    }
+  }
+};
+export {
+  e as dateSelectorTestSchema
+};