@illuminateeducation/dna-atd-frontend 1.0.1-DNAATD-2189.0 → 1.0.1

package/src/index.js

@@ -1,53 +0,0 @@
-import { createApp } from 'vue'
-import { createPinia } from 'pinia'
-import router from './router'
-import App from './App.vue'
-
-export function createDnaAtdApp(elementId = '#app') {
-  const app = createApp(App)
-  const pinia = createPinia()
-  app.use(pinia)
-  app.use(router)
-  return app.mount(elementId)
-}
-
-export function createDnaAtdAppInstance() {
-  const app = createApp(App)
-  const pinia = createPinia()
-  app.use(pinia)
-  app.use(router)
-  return app
-}
-
-export { default as App } from './App.vue'
-export { default as router } from './router'
-
-export { default as BaseButton } from './components/common/BaseButton.vue'
-export { default as BaseInput } from './components/common/BaseInput.vue'
-export { default as BaseModal } from './components/common/BaseModal.vue'
-
-export { default as AdminLayout } from './layouts/AdminLayout.vue'
-
-export { useAsync } from './composables/useAsync'
-export { useForm } from './composables/useForm'
-export { useClickOutside } from './composables/useClickOutside'
-export { useLocalStorage } from './composables/useLocalStorage'
-export { useWindowSize } from './composables/useWindowSize'
-
-export { useValidationStore } from './features/admin/validation/store/validationStore'
-export { useCustomizationStore } from './features/admin/customization/store/customizationStore'
-
-export { useValidation } from './features/admin/validation/composables/useValidation'
-export { useCustomization } from './features/admin/customization/composables/useCustomization'
-
-export { default as ValidationView } from './features/admin/validation/views/ValidationView.vue'
-export { default as CustomizationView } from './features/admin/customization/views/CustomizationView.vue'
-
-export { default as apiService } from './services/apiService'
-export { appConfig } from './config/app.config'
-
-export * from './utils/helpers'
-export * from './utils/validators'
-
-export { default as HomeView } from './views/HomeView.vue'
-export { default as NotFoundView } from './views/NotFoundView.vue'

package/src/layouts/AdminLayout.vue

@@ -1,146 +0,0 @@
-<template>
-  <div class="admin-layout">
-    <aside class="admin-sidebar">
-      <div class="sidebar-header">
-        <h2>Admin Panel</h2>
-      </div>
-      <nav class="sidebar-nav">
-        <router-link 
-          to="/admin/validation" 
-          class="nav-item"
-          active-class="active"
-        >
-          <span class="nav-icon">✓</span>
-          <span>Validation</span>
-        </router-link>
-        <router-link 
-          to="/admin/customization" 
-          class="nav-item"
-          active-class="active"
-        >
-          <span class="nav-icon">🎨</span>
-          <span>Customization</span>
-        </router-link>
-      </nav>
-      <div class="sidebar-footer">
-        <router-link to="/" class="back-link">
-          ← Back to Home
-        </router-link>
-      </div>
-    </aside>
-    
-    <main class="admin-content">
-      <div class="content-header">
-        <h1>{{ pageTitle }}</h1>
-      </div>
-      <div class="content-body">
-        <router-view />
-      </div>
-    </main>
-  </div>
-</template>
-
-<script setup>
-import { computed } from 'vue'
-import { useRoute } from 'vue-router'
-
-const route = useRoute()
-
-const pageTitle = computed(() => {
-  return route.meta.title || 'Admin'
-})
-</script>
-
-<style scoped>
-.admin-layout {
-  display: flex;
-  min-height: 100vh;
-  background-color: #f5f7fa;
-}
-
-.admin-sidebar {
-  width: 250px;
-  background-color: #2c3e50;
-  color: white;
-  display: flex;
-  flex-direction: column;
-}
-
-.sidebar-header {
-  padding: 2rem 1.5rem;
-  border-bottom: 1px solid rgba(255,255,255,0.1);
-}
-
-.sidebar-header h2 {
-  margin: 0;
-  font-size: 1.5rem;
-}
-
-.sidebar-nav {
-  flex: 1;
-  padding: 1rem 0;
-}
-
-.nav-item {
-  display: flex;
-  align-items: center;
-  gap: 1rem;
-  padding: 1rem 1.5rem;
-  color: rgba(255,255,255,0.8);
-  text-decoration: none;
-  transition: all 0.3s;
-}
-
-.nav-item:hover {
-  background-color: rgba(255,255,255,0.1);
-  color: white;
-}
-
-.nav-item.active {
-  background-color: #3498db;
-  color: white;
-  border-right: 3px solid #2ecc71;
-}
-
-.nav-icon {
-  font-size: 1.2rem;
-}
-
-.sidebar-footer {
-  padding: 1.5rem;
-  border-top: 1px solid rgba(255,255,255,0.1);
-}
-
-.back-link {
-  color: rgba(255,255,255,0.8);
-  text-decoration: none;
-  transition: color 0.3s;
-}
-
-.back-link:hover {
-  color: white;
-}
-
-.admin-content {
-  flex: 1;
-  display: flex;
-  flex-direction: column;
-}
-
-.content-header {
-  background: white;
-  padding: 1.5rem 2rem;
-  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
-}
-
-.content-header h1 {
-  margin: 0;
-  font-size: 1.5rem;
-  color: #2c3e50;
-}
-
-.content-body {
-  flex: 1;
-  overflow-y: auto;
-}
-</style>

package/src/main.js

@@ -1,41 +0,0 @@
-import { createApp } from 'vue'
-import { createPinia } from 'pinia'
-
-import App from './App.vue'
-import router from './router'
-
-// Backend Integration: Read data from DOM element attributes
-const appElement = document.getElementById('app')
-const configData = appElement?.getAttribute('data-config')
-const userData = appElement?.getAttribute('data-user')
-
-// Parse backend-provided data
-const backendConfig = configData ? JSON.parse(configData) : {}
-const backendUser = userData ? JSON.parse(userData) : {}
-
-// Create Vue app
-const app = createApp(App)
-
-// Make backend data available globally
-app.config.globalProperties.$config = backendConfig
-app.config.globalProperties.$user = backendUser
-
-// Setup plugins
-app.use(createPinia())
-app.use(router)
-
-// Mount app when DOM is ready
-document.addEventListener('DOMContentLoaded', () => {
-  // Add any DOM modifications needed for backend integration
-  const canvas = document.getElementById('canvas')
-  if (canvas) {
-    canvas.style.padding = '0'
-    canvas.classList.add('vue-app')
-  }
-  
-  // Mount the Vue app
-  if (appElement) {
-    app.mount('#app')
-  }
-})
-

package/src/router/index.js

@@ -1,57 +0,0 @@
-import { createRouter, createWebHistory } from 'vue-router'
-
-const router = createRouter({
-  history: createWebHistory(import.meta.env.BASE_URL),
-  routes: [
-    {
-      path: '/',
-      name: 'home',
-      component: () => import('../views/HomeView.vue')
-    },
-    {
-      path: '/admin',
-      name: 'admin',
-      component: () => import('../layouts/AdminLayout.vue'),
-      redirect: '/admin/validation',
-      children: [
-        {
-          path: 'validation',
-          name: 'admin-validation',
-          component: () => import('../features/admin/validation/views/ValidationView.vue'),
-          meta: {
-            title: 'Validation Management'
-          }
-        },
-        {
-          path: 'customization',
-          name: 'admin-customization',
-          component: () => import('../features/admin/customization/views/CustomizationView.vue'),
-          meta: {
-            title: 'UI Customization'
-          }
-        }
-      ],
-      meta: {
-        requiresAuth: true
-      }
-    },
-    {
-      path: '/:pathMatch(.*)*',
-      name: 'not-found',
-      component: () => import('../views/NotFoundView.vue')
-    }
-  ]
-})
-
-// Navigation guard for authentication
-router.beforeEach((to, from, next) => {
-  if (to.meta.requiresAuth) {
-    // Add your authentication logic here
-    // For now, we'll just allow access
-    next()
-  } else {
-    next()
-  }
-})
-
-export default router

package/src/services/apiService.js

@@ -1,72 +0,0 @@
-/**
- * API Service
- * Centralized API calls using fetch
- */
-
-const API_BASE_URL = import.meta.env.VITE_API_BASE_URL || 'http://localhost:3000/api'
-
-class ApiService {
-  constructor(baseURL = API_BASE_URL) {
-    this.baseURL = baseURL
-  }
-
-  async request(endpoint, options = {}) {
-    const url = `${this.baseURL}${endpoint}`
-    const config = {
-      headers: {
-        'Content-Type': 'application/json',
-        ...options.headers
-      },
-      ...options
-    }
-
-    try {
-      const response = await fetch(url, config)
-      
-      if (!response.ok) {
-        throw new Error(`HTTP error! status: ${response.status}`)
-      }
-      
-      return await response.json()
-    } catch (error) {
-      console.error('API request failed:', error)
-      throw error
-    }
-  }
-
-  get(endpoint, options = {}) {
-    return this.request(endpoint, { method: 'GET', ...options })
-  }
-
-  post(endpoint, data, options = {}) {
-    return this.request(endpoint, {
-      method: 'POST',
-      body: JSON.stringify(data),
-      ...options
-    })
-  }
-
-  put(endpoint, data, options = {}) {
-    return this.request(endpoint, {
-      method: 'PUT',
-      body: JSON.stringify(data),
-      ...options
-    })
-  }
-
-  patch(endpoint, data, options = {}) {
-    return this.request(endpoint, {
-      method: 'PATCH',
-      body: JSON.stringify(data),
-      ...options
-    })
-  }
-
-  delete(endpoint, options = {}) {
-    return this.request(endpoint, { method: 'DELETE', ...options })
-  }
-}
-
-export const apiService = new ApiService()
-export default apiService
-

package/src/services/integration.js

@@ -1,59 +0,0 @@
-/**
- * Integration Service
- * Handles communication between Vue app and backend
- */
-
-export class Integration {
-  constructor() {
-    this.config = this.getConfig()
-    this.user = this.getUser()
-  }
-
-  /**
-   * Get configuration from backend
-   */
-  getConfig() {
-    const appElement = document.getElementById('app')
-    const configData = appElement?.getAttribute('data-config')
-    return configData ? JSON.parse(configData) : {}
-  }
-
-  /**
-   * Get user data from backend
-   */
-  getUser() {
-    const appElement = document.getElementById('app')
-    const userData = appElement?.getAttribute('data-user')
-    return userData ? JSON.parse(userData) : {}
-  }
-
-  /**
-   * Get any custom data attribute
-   */
-  getData(attribute) {
-    const appElement = document.getElementById('app')
-    const data = appElement?.getAttribute(`data-${attribute}`)
-    return data ? JSON.parse(data) : null
-  }
-
-  /**
-   * Emit event to backend (via window for backend to listen)
-   */
-  emitToBackend(eventName, data) {
-    window.dispatchEvent(new CustomEvent(`vue:${eventName}`, { detail: data }))
-  }
-
-  /**
-   * Listen for backend events
-   */
-  listenFromBackend(eventName, callback) {
-    window.addEventListener(`backend:${eventName}`, (event) => {
-      callback(event.detail)
-    })
-  }
-}
-
-// Singleton instance
-export const integration = new Integration()
-export default integration
-

package/src/services/phpIntegration.js

@@ -1 +0,0 @@
-

package/src/stores/counter.js

@@ -1,12 +0,0 @@
-import { ref, computed } from 'vue'
-import { defineStore } from 'pinia'
-
-export const useCounterStore = defineStore('counter', () => {
-  const count = ref(0)
-  const doubleCount = computed(() => count.value * 2)
-  function increment() {
-    count.value++
-  }
-
-  return { count, doubleCount, increment }
-})

package/src/utils/helpers.js

@@ -1,119 +0,0 @@
-/**
- * Utility functions for common operations
- */
-
-/**
- * Debounce function to limit rate of function execution
- * @param {Function} func - Function to debounce
- * @param {number} wait - Delay in milliseconds
- * @returns {Function}
- */
-export function debounce(func, wait = 300) {
-  let timeout
-  return function executedFunction(...args) {
-    const later = () => {
-      clearTimeout(timeout)
-      func(...args)
-    }
-    clearTimeout(timeout)
-    timeout = setTimeout(later, wait)
-  }
-}
-
-/**
- * Throttle function to limit function execution frequency
- * @param {Function} func - Function to throttle
- * @param {number} limit - Time limit in milliseconds
- * @returns {Function}
- */
-export function throttle(func, limit = 300) {
-  let inThrottle
-  return function executedFunction(...args) {
-    if (!inThrottle) {
-      func.apply(this, args)
-      inThrottle = true
-      setTimeout(() => (inThrottle = false), limit)
-    }
-  }
-}
-
-/**
- * Deep clone an object
- * @param {*} obj - Object to clone
- * @returns {*}
- */
-export function deepClone(obj) {
-  if (obj === null || typeof obj !== 'object') return obj
-  if (obj instanceof Date) return new Date(obj.getTime())
-  if (obj instanceof Array) return obj.map(item => deepClone(item))
-  
-  const clonedObj = {}
-  for (const key in obj) {
-    if (obj.hasOwnProperty(key)) {
-      clonedObj[key] = deepClone(obj[key])
-    }
-  }
-  return clonedObj
-}
-
-/**
- * Format date to readable string
- * @param {Date|string} date - Date to format
- * @param {string} format - Format type ('short', 'long', 'time')
- * @returns {string}
- */
-export function formatDate(date, format = 'short') {
-  const d = new Date(date)
-  
-  const options = {
-    short: { year: 'numeric', month: 'short', day: 'numeric' },
-    long: { year: 'numeric', month: 'long', day: 'numeric', hour: '2-digit', minute: '2-digit' },
-    time: { hour: '2-digit', minute: '2-digit', second: '2-digit' }
-  }
-  
-  return d.toLocaleDateString('en-US', options[format] || options.short)
-}
-
-/**
- * Generate unique ID
- * @returns {string}
- */
-export function generateId() {
-  return `${Date.now()}-${Math.random().toString(36).substr(2, 9)}`
-}
-
-/**
- * Capitalize first letter of string
- * @param {string} str - String to capitalize
- * @returns {string}
- */
-export function capitalize(str) {
-  if (!str) return ''
-  return str.charAt(0).toUpperCase() + str.slice(1).toLowerCase()
-}
-
-/**
- * Truncate string to specified length
- * @param {string} str - String to truncate
- * @param {number} length - Max length
- * @param {string} suffix - Suffix to add
- * @returns {string}
- */
-export function truncate(str, length = 50, suffix = '...') {
-  if (!str || str.length <= length) return str
-  return str.substring(0, length).trim() + suffix
-}
-
-/**
- * Check if value is empty (null, undefined, empty string, empty array, empty object)
- * @param {*} value - Value to check
- * @returns {boolean}
- */
-export function isEmpty(value) {
-  if (value === null || value === undefined) return true
-  if (typeof value === 'string' && value.trim() === '') return true
-  if (Array.isArray(value) && value.length === 0) return true
-  if (typeof value === 'object' && Object.keys(value).length === 0) return true
-  return false
-}
-

package/src/utils/validators.js

@@ -1,131 +0,0 @@
-/**
- * Validation utility functions
- */
-
-/**
- * Validate email format
- * @param {string} email - Email to validate
- * @returns {boolean}
- */
-export function isValidEmail(email) {
-  const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/
-  return emailRegex.test(email)
-}
-
-/**
- * Validate phone number
- * @param {string} phone - Phone number to validate
- * @returns {boolean}
- */
-export function isValidPhone(phone) {
-  const phoneRegex = /^\d{10}$/
-  return phoneRegex.test(phone.replace(/[\s-()]/g, ''))
-}
-
-/**
- * Validate URL format
- * @param {string} url - URL to validate
- * @returns {boolean}
- */
-export function isValidUrl(url) {
-  try {
-    new URL(url)
-    return true
-  } catch {
-    return false
-  }
-}
-
-/**
- * Validate password strength
- * @param {string} password - Password to validate
- * @returns {Object} - { isValid: boolean, strength: string, message: string }
- */
-export function validatePassword(password) {
-  const minLength = 8
-  const hasUpperCase = /[A-Z]/.test(password)
-  const hasLowerCase = /[a-z]/.test(password)
-  const hasNumbers = /\d/.test(password)
-  const hasSpecialChar = /[!@#$%^&*(),.?":{}|<>]/.test(password)
-
-  if (password.length < minLength) {
-    return { isValid: false, strength: 'weak', message: `Password must be at least ${minLength} characters` }
-  }
-
-  let strength = 'weak'
-  let strengthScore = 0
-
-  if (hasUpperCase) strengthScore++
-  if (hasLowerCase) strengthScore++
-  if (hasNumbers) strengthScore++
-  if (hasSpecialChar) strengthScore++
-
-  if (strengthScore === 4) {
-    strength = 'strong'
-  } else if (strengthScore >= 2) {
-    strength = 'medium'
-  }
-
-  return {
-    isValid: true,
-    strength,
-    message: `Password strength: ${strength}`,
-    hasUpperCase,
-    hasLowerCase,
-    hasNumbers,
-    hasSpecialChar
-  }
-}
-
-/**
- * Validate required field
- * @param {*} value - Value to validate
- * @returns {boolean}
- */
-export function isRequired(value) {
-  if (value === null || value === undefined) return false
-  if (typeof value === 'string' && value.trim() === '') return false
-  if (Array.isArray(value) && value.length === 0) return false
-  return true
-}
-
-/**
- * Validate min length
- * @param {string} value - Value to validate
- * @param {number} min - Minimum length
- * @returns {boolean}
- */
-export function minLength(value, min) {
-  return value && value.length >= min
-}
-
-/**
- * Validate max length
- * @param {string} value - Value to validate
- * @param {number} max - Maximum length
- * @returns {boolean}
- */
-export function maxLength(value, max) {
-  return value && value.length <= max
-}
-
-/**
- * Validate numeric value
- * @param {*} value - Value to validate
- * @returns {boolean}
- */
-export function isNumeric(value) {
-  return !isNaN(parseFloat(value)) && isFinite(value)
-}
-
-/**
- * Validate value is within range
- * @param {number} value - Value to validate
- * @param {number} min - Minimum value
- * @param {number} max - Maximum value
- * @returns {boolean}
- */
-export function inRange(value, min, max) {
-  return value >= min && value <= max
-}
-