@illuminateeducation/dna-atd-frontend 1.0.1-DNAATD-2189.0 → 1.0.2-DNAATD-3045-v3-POC.0

package/src/composables/useWindowSize.js

@@ -1,30 +0,0 @@
-import { ref, onMounted, onUnmounted } from 'vue'
-import { debounce } from '../utils/helpers'
-
-/**
- * Composable for tracking window size
- * @returns {Object}
- */
-export function useWindowSize() {
-  const width = ref(window.innerWidth)
-  const height = ref(window.innerHeight)
-
-  const handleResize = debounce(() => {
-    width.value = window.innerWidth
-    height.value = window.innerHeight
-  }, 200)
-
-  onMounted(() => {
-    window.addEventListener('resize', handleResize)
-  })
-
-  onUnmounted(() => {
-    window.removeEventListener('resize', handleResize)
-  })
-
-  return {
-    width,
-    height
-  }
-}
-

package/src/config/app.config.js

@@ -1,79 +0,0 @@
-/**
- * Application Configuration
- */
-
-export const appConfig = {
-  // Application name
-  name: 'DNA ATD Frontend',
-  
-  // Version
-  version: '1.0.0',
-  
-  // API Configuration
-  api: {
-    baseURL: import.meta.env.VITE_API_BASE_URL || 'http://localhost:3000/api',
-    timeout: 30000,
-    headers: {
-      'Content-Type': 'application/json'
-    }
-  },
-  
-  // Theme Configuration
-  theme: {
-    default: 'light',
-    available: ['light', 'dark', 'auto']
-  },
-  
-  // Layout Configuration
-  layout: {
-    sidebarWidth: 250,
-    headerHeight: 64,
-    footerHeight: 48
-  },
-  
-  // Pagination
-  pagination: {
-    defaultPageSize: 10,
-    pageSizeOptions: [10, 20, 50, 100]
-  },
-  
-  // Date Format
-  dateFormat: {
-    short: 'MMM DD, YYYY',
-    long: 'MMMM DD, YYYY HH:mm',
-    time: 'HH:mm:ss'
-  },
-  
-  // Storage Keys
-  storageKeys: {
-    theme: 'app_theme',
-    locale: 'app_locale',
-    token: 'app_token',
-    user: 'app_user'
-  },
-  
-  // Feature Flags
-  features: {
-    darkMode: true,
-    notifications: true,
-    analytics: false
-  },
-  
-  // Validation Rules
-  validation: {
-    password: {
-      minLength: 8,
-      requireUppercase: true,
-      requireLowercase: true,
-      requireNumbers: true,
-      requireSpecialChars: true
-    },
-    username: {
-      minLength: 3,
-      maxLength: 20
-    }
-  }
-}
-
-export default appConfig
-

package/src/features/admin/customization/composables/useCustomization.js

@@ -1,19 +0,0 @@
-import { storeToRefs } from 'pinia'
-import { useCustomizationStore } from '../store/customizationStore'
-
-/**
- * Composable for customization feature
- */
-export function useCustomization() {
-  const customizationStore = useCustomizationStore()
-  const { settings, isLoading } = storeToRefs(customizationStore)
-  const { fetchSettings, updateSettings } = customizationStore
-  
-  return {
-    settings,
-    isLoading,
-    fetchSettings,
-    updateSettings
-  }
-}
-

package/src/features/admin/customization/store/customizationStore.js

@@ -1,30 +0,0 @@
-import { defineStore } from 'pinia'
-import { ref } from 'vue'
-
-/**
- * Customization Store - Basic Example
- */
-export const useCustomizationStore = defineStore('customization', () => {
-  // State
-  const settings = ref({})
-  const isLoading = ref(false)
-
-  // Actions
-  const fetchSettings = async () => {
-    isLoading.value = true
-    // Add your API call here
-    isLoading.value = false
-  }
-
-  const updateSettings = (newSettings) => {
-    settings.value = { ...settings.value, ...newSettings }
-  }
-
-  return {
-    settings,
-    isLoading,
-    fetchSettings,
-    updateSettings
-  }
-})
-

package/src/features/admin/customization/views/CustomizationView.vue

@@ -1,17 +0,0 @@
-<template>
-  <div class="customization-view">
-    <h2>Customization Module</h2>
-    <p>Customization feature content goes here.</p>
-  </div>
-</template>
-
-<script setup>
-// Customization module - basic implementation
-</script>
-
-<style scoped>
-.customization-view {
-  padding: 2rem;
-}
-</style>
-

package/src/features/admin/validation/composables/useValidation.js

@@ -1,18 +0,0 @@
-import { storeToRefs } from 'pinia'
-import { useValidationStore } from '../store/validationStore'
-
-/**
- * Composable for validation feature
- */
-export function useValidation() {
-  const validationStore = useValidationStore()
-  const { data, isLoading } = storeToRefs(validationStore)
-  const { fetchData } = validationStore
-  
-  return {
-    data,
-    isLoading,
-    fetchData
-  }
-}
-

package/src/features/admin/validation/store/validationStore.js

@@ -1,25 +0,0 @@
-import { defineStore } from 'pinia'
-import { ref } from 'vue'
-
-/**
- * Validation Store - Basic Example
- */
-export const useValidationStore = defineStore('validation', () => {
-  // State
-  const data = ref([])
-  const isLoading = ref(false)
-
-  // Actions
-  const fetchData = async () => {
-    isLoading.value = true
-    // Add your API call here
-    isLoading.value = false
-  }
-
-  return {
-    data,
-    isLoading,
-    fetchData
-  }
-})
-

package/src/features/admin/validation/views/ValidationView.vue

@@ -1,17 +0,0 @@
-<template>
-  <div class="validation-view">
-    <h2>Validation Module</h2>
-    <p>Validation feature content goes here.</p>
-  </div>
-</template>
-
-<script setup>
-// Validation module - basic implementation
-</script>
-
-<style scoped>
-.validation-view {
-  padding: 2rem;
-}
-</style>
-

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 }
-})