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

package/src/__tests__/App.spec.js

@@ -0,0 +1,26 @@
+import { describe, it, expect } from 'vitest'
+import { mount } from '@vue/test-utils'
+import { createMemoryHistory, createRouter } from 'vue-router'
+import App from '../App.vue'
+
+describe('App', () => {
+  it('renders properly', () => {
+    const router = createRouter({
+      history: createMemoryHistory(),
+      routes: [
+        {
+          path: '/',
+          component: { template: '<div>Home</div>' }
+        }
+      ]
+    })
+
+    const wrapper = mount(App, {
+      global: {
+        plugins: [router]
+      }
+    })
+
+    expect(wrapper.find('#app').exists()).toBe(true)
+  })
+})

package/src/components/common/BaseButton.vue

@@ -0,0 +1,20 @@
+<template>
+  <button class="btn" @click="$emit('click')">
+    <slot />
+  </button>
+</template>
+
+<script setup>
+defineEmits(['click'])
+</script>
+
+<style scoped>
+.btn {
+  padding: 0.5rem 1rem;
+  border: 1px solid #ddd;
+  border-radius: 4px;
+  cursor: pointer;
+  background: white;
+}
+</style>
+

package/src/components/common/BaseInput.vue

@@ -0,0 +1,27 @@
+<template>
+  <input
+    :value="modelValue"
+    class="input"
+    @input="$emit('update:modelValue', $event.target.value)"
+  />
+</template>
+
+<script setup>
+defineProps({
+  modelValue: {
+    type: String,
+    default: ''
+  }
+})
+
+defineEmits(['update:modelValue'])
+</script>
+
+<style scoped>
+.input {
+  padding: 0.5rem;
+  border: 1px solid #ddd;
+  border-radius: 4px;
+}
+</style>
+

package/src/components/common/BaseModal.vue

@@ -0,0 +1,37 @@
+<template>
+  <div v-if="show" class="modal">
+    <div class="modal-content">
+      <slot />
+    </div>
+  </div>
+</template>
+
+<script setup>
+defineProps({
+  show: {
+    type: Boolean,
+    default: false
+  }
+})
+</script>
+
+<style scoped>
+.modal {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: rgba(0, 0, 0, 0.5);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.modal-content {
+  background: white;
+  padding: 2rem;
+  border-radius: 4px;
+}
+</style>
+

package/src/composables/useAsync.js

@@ -0,0 +1,34 @@
+import { ref, onMounted, onUnmounted } from 'vue'
+
+/**
+ * Composable for handling async operations
+ * @param {Function} asyncFunction - Async function to execute
+ * @returns {Object}
+ */
+export function useAsync(asyncFunction) {
+  const data = ref(null)
+  const error = ref(null)
+  const isLoading = ref(false)
+
+  const execute = async (...args) => {
+    isLoading.value = true
+    error.value = null
+    try {
+      data.value = await asyncFunction(...args)
+      return data.value
+    } catch (err) {
+      error.value = err
+      throw err
+    } finally {
+      isLoading.value = false
+    }
+  }
+
+  return {
+    data,
+    error,
+    isLoading,
+    execute
+  }
+}
+

package/src/composables/useClickOutside.js

@@ -0,0 +1,29 @@
+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

@@ -0,0 +1,89 @@
+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

@@ -0,0 +1,51 @@
+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

@@ -0,0 +1,30 @@
+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

@@ -0,0 +1,79 @@
+/**
+ * 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

@@ -0,0 +1,19 @@
+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

@@ -0,0 +1,30 @@
+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

@@ -0,0 +1,17 @@
+<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

@@ -0,0 +1,18 @@
+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

@@ -0,0 +1,25 @@
+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

@@ -0,0 +1,17 @@
+<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

@@ -0,0 +1,53 @@
+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'