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

package/src/composables/useClickOutside.js

@@ -1,29 +0,0 @@
-import { ref, onMounted, onUnmounted } from 'vue'
-
-/**
- * Composable for detecting clicks outside an element
- * @param {Function} callback - Function to call when clicked outside
- * @returns {Object}
- */
-export function useClickOutside(callback) {
-  const elementRef = ref(null)
-
-  const handleClickOutside = (event) => {
-    if (elementRef.value && !elementRef.value.contains(event.target)) {
-      callback()
-    }
-  }
-
-  onMounted(() => {
-    document.addEventListener('click', handleClickOutside)
-  })
-
-  onUnmounted(() => {
-    document.removeEventListener('click', handleClickOutside)
-  })
-
-  return {
-    elementRef
-  }
-}
-

package/src/composables/useForm.js

@@ -1,89 +0,0 @@
-import { ref, computed } from 'vue'
-
-/**
- * Composable for form validation
- * @param {Object} initialValues - Initial form values
- * @param {Object} validationRules - Validation rules for each field
- * @returns {Object}
- */
-export function useForm(initialValues = {}, validationRules = {}) {
-  const formData = ref({ ...initialValues })
-  const errors = ref({})
-  const touched = ref({})
-
-  const isValid = computed(() => {
-    return Object.keys(errors.value).length === 0
-  })
-
-  const validateField = (fieldName) => {
-    const value = formData.value[fieldName]
-    const rules = validationRules[fieldName]
-
-    if (!rules) return true
-
-    for (const rule of rules) {
-      const result = rule.validator(value)
-      if (!result) {
-        errors.value[fieldName] = rule.message
-        return false
-      }
-    }
-
-    delete errors.value[fieldName]
-    return true
-  }
-
-  const validateForm = () => {
-    errors.value = {}
-    let isFormValid = true
-
-    Object.keys(validationRules).forEach(fieldName => {
-      if (!validateField(fieldName)) {
-        isFormValid = false
-      }
-    })
-
-    return isFormValid
-  }
-
-  const handleBlur = (fieldName) => {
-    touched.value[fieldName] = true
-    validateField(fieldName)
-  }
-
-  const handleChange = (fieldName, value) => {
-    formData.value[fieldName] = value
-    if (touched.value[fieldName]) {
-      validateField(fieldName)
-    }
-  }
-
-  const resetForm = () => {
-    formData.value = { ...initialValues }
-    errors.value = {}
-    touched.value = {}
-  }
-
-  const setFieldValue = (fieldName, value) => {
-    formData.value[fieldName] = value
-  }
-
-  const setFieldError = (fieldName, error) => {
-    errors.value[fieldName] = error
-  }
-
-  return {
-    formData,
-    errors,
-    touched,
-    isValid,
-    validateField,
-    validateForm,
-    handleBlur,
-    handleChange,
-    resetForm,
-    setFieldValue,
-    setFieldError
-  }
-}
-

package/src/composables/useLocalStorage.js

@@ -1,51 +0,0 @@
-import { ref, onMounted, onUnmounted } from 'vue'
-
-/**
- * Composable for managing localStorage
- * @param {string} key - Storage key
- * @param {*} defaultValue - Default value if key doesn't exist
- * @returns {Object}
- */
-export function useLocalStorage(key, defaultValue = null) {
-  const data = ref(defaultValue)
-
-  const read = () => {
-    try {
-      const item = window.localStorage.getItem(key)
-      return item ? JSON.parse(item) : defaultValue
-    } catch (error) {
-      console.error(`Error reading localStorage key "${key}":`, error)
-      return defaultValue
-    }
-  }
-
-  const write = (value) => {
-    try {
-      data.value = value
-      window.localStorage.setItem(key, JSON.stringify(value))
-    } catch (error) {
-      console.error(`Error writing localStorage key "${key}":`, error)
-    }
-  }
-
-  const remove = () => {
-    try {
-      window.localStorage.removeItem(key)
-      data.value = defaultValue
-    } catch (error) {
-      console.error(`Error removing localStorage key "${key}":`, error)
-    }
-  }
-
-  // Initialize
-  onMounted(() => {
-    data.value = read()
-  })
-
-  return {
-    data,
-    write,
-    remove
-  }
-}
-

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