@userfrosting/sprinkle-core 6.0.0-alpha.5 → 6.0.0-beta.1

package/app/assets/composables/index.ts

@@ -1,2 +1,4 @@
-export { useSprunjer } from './sprunjer'
+export { useSprunjer } from './useSprunjer'
 export { useCsrf } from './useCsrf'
+export { useAxiosInterceptor } from './useAxiosInterceptor'
+export { useRuleSchemaAdapter } from './useRuleSchemaAdapter'

package/app/assets/composables/useAxiosInterceptor.ts

@@ -0,0 +1,30 @@
+import axios from 'axios'
+import { useAlertsStore } from '../stores/useAlertsStore'
+import { Severity } from '../interfaces'
+
+/**
+ * Axios Error Handler
+ *
+ * This composable sets up an Axios interceptor to handle errors globally using
+ * the Alerts store. It sends the error to the Alerts store, unless it's a 401
+ * error.
+ *
+ * @see https://axios-http.com/docs/interceptors
+ */
+export const useAxiosInterceptor = () => {
+    axios.interceptors.response.use(
+        (response) => response,
+        (error) => {
+            if (error.response.status !== 401) {
+                const alertStore = useAlertsStore()
+                alertStore.push({
+                    title: error.response.data.title ?? error.response?.statusText,
+                    description: error.response?.data?.description ?? error.message,
+                    style: Severity.Danger
+                })
+            }
+
+            return Promise.reject(error)
+        }
+    )
+}

package/app/assets/composables/useCsrf.ts

@@ -34,6 +34,14 @@ export const useCsrf = () => {
         axios.defaults.headers.patch[key_value.value] = token.value
     }
 
+    /**
+     * Fetch the CSRF token from the server
+     */
+    async function fetchCsrfToken() {
+        const response = await axios.get('/api/csrf')
+        updateFromHeaders(response.headers)
+    }
+
     /**
      * Get the CSRF token name and value keys from config.
      */
@@ -115,6 +123,7 @@ export const useCsrf = () => {
         name,
         token,
         isEnabled,
-        updateFromHeaders
+        updateFromHeaders,
+        fetchCsrfToken
     }
 }

package/app/assets/composables/useRuleSchemaAdapter.ts

@@ -0,0 +1,219 @@
+import { parse as YamlParse } from 'yaml'
+import {
+    withMessage,
+    required,
+    maxLength,
+    minLength,
+    email,
+    integer,
+    numeric,
+    url,
+    oneOf,
+    between,
+    regex,
+    not
+} from '@regle/rules'
+import { useTranslator } from '../stores'
+
+export function useRuleSchemaAdapter() {
+    /**
+     * Parse the YAML schema string into a JavaScript object.
+     *
+     * @param rawSchema The YAML schema string to parse.
+     * @returns RuleSchema The Regle schema object.
+     */
+    function adapt(rawSchema: string) {
+        // The YAML data parsed to a JavaScript object
+        const sourceSchema = parse(rawSchema)
+
+        // The Regle schema object to be returned
+        const regleSchema: any = {}
+
+        // Iterate over each field in the schema
+        for (const field in sourceSchema) {
+            // Check if the field is a direct property of the sourceSchema object
+            if (Object.prototype.hasOwnProperty.call(sourceSchema, field)) {
+                // Get the field rules from the source schema
+                const schemaFieldRules = sourceSchema[field]?.validators || {}
+
+                // The returned regle rules for the field
+                const regleRules: Record<string, any> = {}
+
+                // Iterate over each rule in the source schema field rules
+                for (const key of Object.keys(schemaFieldRules)) {
+                    adaptRule(key, schemaFieldRules, regleRules)
+                }
+
+                regleSchema[field] = regleRules
+            }
+        }
+
+        return regleSchema
+    }
+
+    /**
+     * Parse the YAML schema string into a JavaScript object.
+     *
+     * @param rawSchema The YAML schema string to parse.
+     * @returns The parsed YAML schema as a JavaScript object.
+     */
+    function parse(rawSchema: string): Record<string, any> {
+        return YamlParse(rawSchema)
+    }
+
+    function translateMessage(fieldRulesMeta: { message?: string; [key: string]: any }): string {
+        const { translate } = useTranslator()
+
+        // If there's no message, return an empty string
+        if (!fieldRulesMeta.message) {
+            return ''
+        }
+
+        // Copy the field rules meta to avoid mutation and remove the message key
+        const fieldRulesMetaCopy = { ...fieldRulesMeta }
+        delete fieldRulesMetaCopy.message
+
+        return translate(fieldRulesMeta.message, fieldRulesMetaCopy)
+    }
+
+    function adaptRule(key: string, schemaFieldRules: any, regleRules: Record<string, any>) {
+        // Required
+        if (key === 'required' && schemaFieldRules.required) {
+            const message: string = translateMessage(schemaFieldRules.required)
+            regleRules['required'] = message === '' ? required : withMessage(required, message)
+        }
+
+        // Email
+        if (key === 'email' && schemaFieldRules.email) {
+            const message: string = translateMessage(schemaFieldRules.email)
+            regleRules['email'] = withMessage(email, message)
+        }
+
+        // Length
+        if (key === 'length' && schemaFieldRules.length) {
+            if (schemaFieldRules.length.min !== undefined) {
+                const message: string = translateMessage(schemaFieldRules.length)
+                regleRules['minLength'] =
+                    message === ''
+                        ? minLength(schemaFieldRules.length.min)
+                        : withMessage(minLength(schemaFieldRules.length.min), message)
+            }
+            if (schemaFieldRules.length.max !== undefined) {
+                const message: string = translateMessage(schemaFieldRules.length)
+                regleRules['maxLength'] =
+                    message === ''
+                        ? maxLength(schemaFieldRules.length.max)
+                        : withMessage(maxLength(schemaFieldRules.length.max), message)
+            }
+        }
+
+        // TODO : matches
+        if (key === 'matches' && schemaFieldRules.matches) {
+            console.warn('Validation rule "matches" not implemented yet')
+            // console.debug('Matched rule: matches', schemaFieldRules.matches)
+            // sameAs: sameAs(() => form.value.password),
+        }
+
+        // TODO : equals
+        if (key === 'equals' && schemaFieldRules.equals) {
+            console.warn('Validation rule "equals" not implemented yet')
+        }
+
+        // Integer
+        if (key === 'integer' && schemaFieldRules.integer) {
+            const message: string = translateMessage(schemaFieldRules.integer)
+            regleRules['integer'] = message === '' ? integer : withMessage(integer, message)
+        }
+
+        // member_of
+        if (key === 'member_of' && schemaFieldRules.member_of) {
+            const message: string = translateMessage(schemaFieldRules.member_of)
+            regleRules['member_of'] =
+                message === ''
+                    ? oneOf(schemaFieldRules.member_of.values)
+                    : withMessage(oneOf(schemaFieldRules.member_of.values), message)
+        }
+
+        // no_leading_whitespace
+        if (key === 'no_leading_whitespace' && schemaFieldRules.no_leading_whitespace) {
+            const message: string = translateMessage(schemaFieldRules.no_leading_whitespace)
+            regleRules['no_leading_whitespace'] =
+                message === '' ? regex(/^\S.*$/) : withMessage(regex(/^\S.*$/), message)
+        }
+
+        // no_trailing_whitespace
+        if (key === 'no_trailing_whitespace' && schemaFieldRules.no_trailing_whitespace) {
+            const message: string = translateMessage(schemaFieldRules.no_trailing_whitespace)
+            regleRules['no_trailing_whitespace'] =
+                message === '' ? regex(/^.*\S$/) : withMessage(regex(/^.*\S$/), message)
+        }
+
+        // TODO : not_equals
+        if (key === 'not_equals' && schemaFieldRules.not_equals) {
+            console.warn('Validation rule "not_equals" not implemented yet')
+        }
+
+        // TODO : not_matches
+        if (key === 'not_matches' && schemaFieldRules.not_matches) {
+            console.warn('Validation rule "not_matches" not implemented yet')
+        }
+
+        // not_member_of
+        if (key === 'not_member_of' && schemaFieldRules.not_member_of) {
+            const message: string = translateMessage(schemaFieldRules.not_member_of)
+            regleRules['not_member_of'] =
+                message === ''
+                    ? not(oneOf(schemaFieldRules.not_member_of.values))
+                    : withMessage(not(oneOf(schemaFieldRules.not_member_of.values)), message)
+        }
+
+        // Numeric
+        if (key === 'numeric' && schemaFieldRules.numeric) {
+            const message: string = translateMessage(schemaFieldRules.numeric)
+            regleRules['numeric'] = message === '' ? numeric : withMessage(numeric, message)
+        }
+
+        // Range
+        if (key === 'range' && schemaFieldRules.range) {
+            const message: string = translateMessage(schemaFieldRules.range)
+            regleRules['range'] =
+                message === ''
+                    ? between(schemaFieldRules.range.min, schemaFieldRules.range.max)
+                    : withMessage(
+                          between(schemaFieldRules.range.min, schemaFieldRules.range.max),
+                          message
+                      )
+        }
+
+        // Regex
+        if (key === 'regex' && schemaFieldRules.regex) {
+            const message: string = translateMessage(schemaFieldRules.regex)
+            regleRules['regex'] =
+                message === ''
+                    ? regex(new RegExp(schemaFieldRules.regex.regex))
+                    : withMessage(regex(new RegExp(schemaFieldRules.regex.regex)), message)
+        }
+
+        // TODO : telephone
+        if (key === 'telephone' && schemaFieldRules.telephone) {
+            console.warn('Validation rule "telephone" not implemented yet')
+        }
+
+        // uri
+        if (key === 'uri' && schemaFieldRules.uri) {
+            const message: string = translateMessage(schemaFieldRules.uri)
+            regleRules['uri'] = message === '' ? url : withMessage(url, message)
+        }
+
+        // Username
+        if (key === 'username' && schemaFieldRules.username) {
+            const message: string = translateMessage(schemaFieldRules.username)
+            regleRules['username'] =
+                message === ''
+                    ? regex(/^([a-z0-9.\-_])+$/i)
+                    : withMessage(regex(/^([a-z0-9.\-_])+$/i), message)
+        }
+    }
+
+    return { adapt, parse, translateMessage }
+}

package/app/assets/composables/{sprunjer.ts → useSprunjer.ts}

@@ -33,7 +33,13 @@
  */
 import { ref, toValue, watchEffect, computed } from 'vue'
 import axios from 'axios'
-import type { AssociativeArray, Sprunjer, SprunjerData, SprunjerResponse } from '../interfaces'
+import type {
+    ApiErrorResponse,
+    AssociativeArray,
+    Sprunjer,
+    SprunjerData,
+    SprunjerResponse
+} from '../interfaces'
 
 export const useSprunjer = (
     dataUrl: string | (() => string),
@@ -60,6 +66,7 @@ export const useSprunjer = (
 
     // State
     const loading = ref<boolean>(false)
+    const error = ref<ApiErrorResponse | null>(null)
 
     /**
      * Api fetch function
@@ -87,8 +94,7 @@ export const useSprunjer = (
                 data.value.filterable = response.data.filterable ?? []
             })
             .catch((err) => {
-                // TODO : User toast alert, or export alert
-                console.error(err)
+                error.value = err.response.data as ApiErrorResponse
             })
             .finally(() => {
                 loading.value = false
@@ -169,6 +175,7 @@ export const useSprunjer = (
         data,
         fetch,
         loading,
+        error,
         downloadCsv,
         totalPages,
         countFiltered,

package/app/assets/index.ts

@@ -1,6 +1,7 @@
 import type { App } from 'vue'
 import { useConfigStore, useTranslator } from './stores'
 import { useCsrf } from './composables/useCsrf'
+import { useAxiosInterceptor } from './composables'
 
 /**
  * Core Sprinkle initialization recipe.
@@ -11,6 +12,13 @@ import { useCsrf } from './composables/useCsrf'
  */
 export default {
     install: (app: App) => {
+        /**
+         * Add Axios error handler.
+         * Load first to ensure that all axios requests are intercepted.
+         * This is important for the config loading and translator loading.
+         */
+        useAxiosInterceptor()
+
         /**
          * Load configuration
          */

package/app/assets/interfaces/ApiResponse.ts

@@ -4,5 +4,12 @@
  * Generic API Response interface.
  */
 export interface ApiResponse {
-    message: string
+    title: string
+    description?: string
+}
+
+export interface ApiErrorResponse {
+    title: string
+    description: string
+    status: number
 }

package/app/assets/interfaces/index.ts

@@ -27,4 +27,4 @@ export type { SprunjerRequest, SprunjerResponse } from './sprunjerApi'
 export type { DictionaryResponse, DictionaryEntries, DictionaryConfig } from './DictionaryApi'
 
 // Misc
-export type { ApiResponse } from './ApiResponse'
+export type { ApiResponse, ApiErrorResponse } from './ApiResponse'

package/app/assets/interfaces/sprunjer.ts

@@ -4,7 +4,7 @@
  * Represents the interface for the Sprunjer composable.
  */
 import type { Ref, ComputedRef } from 'vue'
-import type { AssociativeArray } from '.'
+import type { ApiErrorResponse, AssociativeArray } from '.'
 
 export interface Sprunjer {
     dataUrl: string | (() => string)
@@ -15,6 +15,7 @@ export interface Sprunjer {
     data: Ref<SprunjerData>
     fetch: () => void
     loading: Ref<boolean>
+    error: Ref<ApiErrorResponse | null>
     totalPages: ComputedRef<number>
     downloadCsv: () => void
     countFiltered: ComputedRef<number>

package/app/assets/routes/index.ts

@@ -12,7 +12,7 @@ export default [
             title: 'ERROR.404.TITLE',
             description: 'ERROR.404.DESCRIPTION'
         },
-        component: () => import('../views/404NotFound.vue')
+        component: () => import('../views/Page404NotFound.vue')
     },
     {
         path: '/:pathMatch(.*)*',
@@ -21,7 +21,7 @@ export default [
             title: 'ERROR.401.TITLE',
             description: 'ERROR.401.DESCRIPTION'
         },
-        component: () => import('../views/401Unauthorized.vue')
+        component: () => import('../views/Page401Unauthorized.vue')
     },
     {
         path: '/:pathMatch(.*)*',
@@ -30,7 +30,7 @@ export default [
             title: 'ERROR.403.TITLE',
             description: 'ERROR.403.DESCRIPTION'
         },
-        component: () => import('../views/403Forbidden.vue')
+        component: () => import('../views/Page403Forbidden.vue')
     },
     {
         path: '/:pathMatch(.*)*',
@@ -39,6 +39,6 @@ export default [
             title: 'ERROR.TITLE',
             description: 'ERROR.DESCRIPTION'
         },
-        component: () => import('../views/ErrorPage.vue')
+        component: () => import('../views/PageError.vue')
     }
 ]

package/app/assets/stores/index.ts

@@ -1,3 +1,4 @@
-export { useConfigStore } from './config'
+export { useConfigStore } from './useConfigStore'
 export { usePageMeta } from './usePageMeta'
 export { useTranslator } from './useTranslator'
+export { useAlertsStore } from './useAlertsStore'

package/app/assets/stores/useAlertsStore.ts

@@ -0,0 +1,30 @@
+import { defineStore } from 'pinia'
+import type { AlertInterface } from '../interfaces'
+
+/**
+ * Alerts Store
+ *
+ * Manages application alerts in a reactive store. Templates can use this
+ * store to display alerts to users, including errors, warnings,
+ * informational, or success messages. When an alert is added, templates
+ * should automatically update the interface to reflect the change.
+ */
+export const useAlertsStore = defineStore('alerts', {
+    state: () => ({
+        alerts: [] as AlertInterface[]
+    }),
+    actions: {
+        push(alert: AlertInterface) {
+            this.alerts.push(alert)
+        },
+        pop() {
+            return this.alerts.pop()
+        },
+        shift() {
+            return this.alerts.shift()
+        },
+        clear() {
+            this.alerts = []
+        }
+    }
+})

package/app/assets/tests/composables/useCsrf.test.ts

@@ -1,11 +1,11 @@
 import { describe, expect, beforeEach, afterEach, test, vi } from 'vitest'
 import axios from 'axios'
-import { useConfigStore } from '../../stores/config'
+import { useConfigStore } from '../../stores/useConfigStore'
 import { useCsrf } from '../../composables/useCsrf'
 import { nextTick } from 'vue'
 
 // Mock the config store
-vi.mock('../../stores/config')
+vi.mock('../../stores/useConfigStore')
 const mockUseConfigStore = {
     get: vi.fn()
 }

package/app/assets/tests/composables/useRuleSchemaAdapter.test.ts

@@ -0,0 +1,564 @@
+import { describe, test, expect, vi, afterEach } from 'vitest'
+import { useRuleSchemaAdapter } from '../../composables/useRuleSchemaAdapter'
+import { useRegle } from '@regle/core'
+
+// Mock the translator store
+const translateMock = vi.fn((key: string) => key || '')
+vi.mock('@userfrosting/sprinkle-core/stores', () => ({
+    useTranslator: () => ({
+        translate: translateMock
+    })
+}))
+
+describe('useRuleSchemaAdapter', () => {
+    afterEach(() => {
+        vi.clearAllMocks()
+    })
+
+    test('should parse a basic schema', () => {
+        const yamlInput = `
+            foo:
+                validators:
+                    length:
+                        min: 1
+                        max: 132
+                    required: true
+        `
+
+        const { r$ } = useRegle(
+            {
+                foo: ''
+            },
+            useRuleSchemaAdapter().adapt(yamlInput)
+        )
+
+        expect(r$.foo).toBeDefined()
+        expect(r$.foo.$rules.required).toBeDefined()
+        expect(r$.foo.$rules.minLength).toBeDefined()
+        expect(r$.foo.$rules.maxLength).toBeDefined()
+    })
+
+    test('should parse a schema with a custom message', () => {
+        const yamlInput = `
+            name:
+                validators:
+                    length:
+                        min: 2
+                        max: 20
+                    required: true
+            email:
+                validators:
+                    length:
+                        min: 1
+                        max: 30
+                    email: true
+        `
+
+        const { r$ } = useRegle(
+            {
+                name: '',
+                email: ''
+            },
+            useRuleSchemaAdapter().adapt(yamlInput)
+        )
+
+        expect(r$.name).toBeDefined()
+        expect(r$.name.$rules.required).toBeDefined()
+        expect(r$.name.$rules.minLength).toBeDefined()
+        expect(r$.name.$rules.maxLength).toBeDefined()
+        expect(r$.email).toBeDefined()
+        expect(r$.email.$rules.required).not.toBeDefined()
+        expect(r$.email.$rules.minLength).toBeDefined()
+        expect(r$.email.$rules.maxLength).toBeDefined()
+    })
+
+    test('should parse a bad schema without errors', () => {
+        // N.B.: The schema is missing the 'validators' key
+        const yamlInput = `
+            foo:
+                length:
+                    min: 1
+                    max: 132
+                required: true
+        `
+
+        const { r$ } = useRegle(
+            {
+                foo: ''
+            },
+            useRuleSchemaAdapter().adapt(yamlInput)
+        )
+
+        expect(r$.foo).toBeDefined()
+        expect(r$.foo.$rules.required).not.toBeDefined()
+        expect(r$.foo.$rules.minLength).not.toBeDefined()
+        expect(r$.foo.$rules.maxLength).not.toBeDefined()
+    })
+
+    test('required rule', () => {
+        const yamlInput = `
+            first_name:
+                validators:
+                    required:
+                        label: "&FIRST_NAME"
+                        message: VALIDATE.REQUIRED
+            last_name:
+                validators:
+                    required: true
+        `
+
+        const { r$ } = useRegle(
+            {
+                first_name: '',
+                last_name: ''
+            },
+            useRuleSchemaAdapter().adapt(yamlInput)
+        )
+
+        // Set translator expectations
+        expect(translateMock).toHaveBeenCalledExactlyOnceWith('VALIDATE.REQUIRED', {
+            label: '&FIRST_NAME'
+        })
+
+        expect(r$.first_name.$rules.required.$message).toBe('VALIDATE.REQUIRED') // Custom message
+        expect(r$.last_name.$rules.required.$message).toBe('This field is required') // Default message
+    })
+
+    test('email rule', () => {
+        const yamlInput = `
+            email:
+                validators:
+                    email:
+                        message: VALIDATE.INVALID_EMAIL
+            email2:
+                validators:
+                    email: true
+        `
+
+        const { r$ } = useRegle(
+            {
+                email: '',
+                email2: ''
+            },
+            useRuleSchemaAdapter().adapt(yamlInput)
+        )
+
+        // Set translator expectations
+        expect(translateMock).toHaveBeenCalledExactlyOnceWith('VALIDATE.INVALID_EMAIL', {})
+
+        expect(r$.email.$rules.email.$message).toBe('VALIDATE.INVALID_EMAIL') // Custom message
+        expect(r$.email2.$rules.email.$message).toBe('This field is not valid') // Default message
+    })
+
+    test('length rule', () => {
+        const yamlInput = `
+            tooShort:
+                validators:
+                    length:
+                        min: 5
+            tooLong:
+                validators:
+                    length:
+                        max: 2
+            tooShortWithMessage:
+                validators:
+                    length:
+                        min: 5
+                        message: VALIDATE.LENGTH_RANGE
+            tooLongWithMessage:
+                validators:
+                    length:
+                        max: 2
+                        message: VALIDATE.LENGTH_RANGE
+        `
+
+        const { r$ } = useRegle(
+            {
+                tooShort: '1',
+                tooLong: '123',
+                tooShortWithMessage: '1',
+                tooLongWithMessage: '123'
+            },
+            useRuleSchemaAdapter().adapt(yamlInput)
+        )
+
+        // Set translator expectations
+        expect(translateMock).toHaveBeenNthCalledWith(1, 'VALIDATE.LENGTH_RANGE', { min: 5 })
+        expect(translateMock).toHaveBeenNthCalledWith(2, 'VALIDATE.LENGTH_RANGE', { max: 2 })
+
+        expect(r$.tooShort.$silentErrors).toEqual(['The value length should be at least 5']) // Custom message
+        expect(r$.tooLong.$silentErrors).toEqual(['The value length should not exceed 2']) // Default message
+        expect(r$.tooShortWithMessage.$silentErrors).toEqual(['VALIDATE.LENGTH_RANGE']) // Custom message
+        expect(r$.tooLongWithMessage.$silentErrors).toEqual(['VALIDATE.LENGTH_RANGE']) // Default message
+    })
+
+    test('integer rule', () => {
+        const yamlInput = `
+            foo:
+                validators:
+                    integer: true
+            bar:
+                validators:
+                    integer: 
+                        message: VALIDATE.INVALID_INTEGER
+            foobar:
+                validators:
+                    integer: true
+        `
+
+        const { r$ } = useRegle(
+            {
+                foo: 'one',
+                bar: 'two',
+                foobar: 92
+            },
+            useRuleSchemaAdapter().adapt(yamlInput)
+        )
+
+        // Set translator expectations
+        expect(translateMock).toHaveBeenCalledExactlyOnceWith('VALIDATE.INVALID_INTEGER', {})
+
+        expect(r$.foo.$silentErrors).toEqual(['The value must be an integer']) // Custom message
+        expect(r$.bar.$silentErrors).toEqual(['VALIDATE.INVALID_INTEGER']) // Default message
+        expect(r$.foobar.$silentErrors).toEqual([]) // Valid
+    })
+
+    test('member_of rule', () => {
+        const yamlInput = `
+            genus:
+                validators:
+                    member_of:
+                        values:
+                        - Megascops
+                        - Bubo
+                        - Glaucidium
+                        - Tyto
+                        - Athene
+                        message: Sorry, that is not one of the permitted genuses.
+            owls:
+                validators:
+                    member_of:
+                        values:
+                        - Foo
+                        - Bar
+            valid:
+                validators:
+                    member_of:
+                        values:
+                        - Foo
+                        - Bar
+        `
+
+        const { r$ } = useRegle(
+            {
+                genus: 'Foo',
+                owls: 'Hedwig',
+                valid: 'Foo'
+            },
+            useRuleSchemaAdapter().adapt(yamlInput)
+        )
+
+        // Set translator expectations
+        expect(translateMock).toHaveBeenCalledExactlyOnceWith(
+            'Sorry, that is not one of the permitted genuses.',
+            {
+                values: ['Megascops', 'Bubo', 'Glaucidium', 'Tyto', 'Athene']
+            }
+        )
+
+        expect(r$.genus.$silentErrors).toEqual(['Sorry, that is not one of the permitted genuses.']) // Custom message
+        expect(r$.owls.$silentErrors).toEqual([
+            'The value should be one of those options: Foo, Bar.'
+        ]) // Default message
+        expect(r$.valid.$silentErrors).toEqual([]) // Valid
+    })
+
+    test('not_member_of rule', () => {
+        const yamlInput = `
+            genus:
+                validators:
+                    not_member_of:
+                        values:
+                        - Megascops
+                        - Bubo
+                        - Glaucidium
+                        - Tyto
+                        - Athene
+                        message: VALIDATE.NOT_MEMBER_OF
+            owls:
+                validators:
+                    not_member_of:
+                        values:
+                        - Foo
+                        - Bar
+            valid:
+                validators:
+                    not_member_of:
+                        values:
+                        - Foo
+                        - Bar
+        `
+
+        const { r$ } = useRegle(
+            {
+                genus: 'Megascops',
+                owls: 'Foo',
+                valid: 'Hedwig'
+            },
+            useRuleSchemaAdapter().adapt(yamlInput)
+        )
+
+        // Set translator expectations
+        expect(translateMock).toHaveBeenCalledExactlyOnceWith('VALIDATE.NOT_MEMBER_OF', {
+            values: ['Megascops', 'Bubo', 'Glaucidium', 'Tyto', 'Athene']
+        })
+
+        expect(r$.genus.$silentErrors).toEqual(['VALIDATE.NOT_MEMBER_OF']) // Custom message
+        expect(r$.owls.$silentErrors).toEqual(['Error']) // Default message
+        expect(r$.valid.$silentErrors).toEqual([]) // Valid
+    })
+
+    test('no_leading_whitespace rule', () => {
+        const yamlInput = `
+            withMessage:
+                validators:
+                    no_leading_whitespace:
+                        label: "&USERNAME"
+                        message: VALIDATE.NO_LEAD_WS
+            defaultMessage:
+                validators:
+                    no_leading_whitespace: true
+            valid:
+                validators:
+                    no_leading_whitespace: true
+        `
+
+        const { r$ } = useRegle(
+            {
+                withMessage: ' Foo',
+                defaultMessage: ' Foo',
+                valid: 'Foo'
+            },
+            useRuleSchemaAdapter().adapt(yamlInput)
+        )
+
+        // Set translator expectations
+        expect(translateMock).toHaveBeenCalledExactlyOnceWith('VALIDATE.NO_LEAD_WS', {
+            label: '&USERNAME'
+        })
+
+        expect(r$.withMessage.$silentErrors).toEqual(['VALIDATE.NO_LEAD_WS']) // Custom message
+        expect(r$.defaultMessage.$silentErrors).toEqual([
+            'The value does not match the required pattern'
+        ]) // Default message
+        expect(r$.valid.$silentErrors).toEqual([]) // Valid
+    })
+
+    test('no_trailing_whitespace rule', () => {
+        const yamlInput = `
+            withMessage:
+                validators:
+                    no_trailing_whitespace:
+                        label: "&USERNAME"
+                        message: VALIDATE.NO_TRAIL_WS
+            defaultMessage:
+                validators:
+                    no_trailing_whitespace: true
+            valid:
+                validators:
+                    no_trailing_whitespace: true
+        `
+
+        const { r$ } = useRegle(
+            {
+                withMessage: 'Foo ',
+                defaultMessage: 'Foo ',
+                valid: 'Foo'
+            },
+            useRuleSchemaAdapter().adapt(yamlInput)
+        )
+
+        // Set translator expectations
+        expect(translateMock).toHaveBeenCalledExactlyOnceWith('VALIDATE.NO_TRAIL_WS', {
+            label: '&USERNAME'
+        })
+
+        expect(r$.withMessage.$silentErrors).toEqual(['VALIDATE.NO_TRAIL_WS']) // Custom message
+        expect(r$.defaultMessage.$silentErrors).toEqual([
+            'The value does not match the required pattern'
+        ]) // Default message
+        expect(r$.valid.$silentErrors).toEqual([]) // Valid
+    })
+
+    test('numeric rule', () => {
+        const yamlInput = `
+            withMessage:
+                validators:
+                    numeric:
+                        message: VALIDATE.INVALID_NUMERIC
+            defaultMessage:
+                validators:
+                    numeric: true
+            valid:
+                validators:
+                    numeric: true
+        `
+
+        const { r$ } = useRegle(
+            {
+                withMessage: 'Foo',
+                defaultMessage: 'Foo',
+                valid: '10.2'
+            },
+            useRuleSchemaAdapter().adapt(yamlInput)
+        )
+
+        // Set translator expectations
+        expect(translateMock).toHaveBeenCalledExactlyOnceWith('VALIDATE.INVALID_NUMERIC', {})
+
+        expect(r$.withMessage.$silentErrors).toEqual(['VALIDATE.INVALID_NUMERIC']) // Custom message
+        expect(r$.defaultMessage.$silentErrors).toEqual(['The value must be numeric']) // Default message
+        expect(r$.valid.$silentErrors).toEqual([]) // Valid
+    })
+
+    test('range rule', () => {
+        const yamlInput = `
+            withMessage:
+                validators:
+                    range:
+                        min: 0
+                        max: 10
+                        message: VALIDATE.INVALID_RANGE
+            defaultMessage:
+                validators:
+                    range: 
+                        min: 0
+                        max: 10
+            valid:
+                validators:
+                    range: 
+                        min: 0
+                        max: 10
+        `
+
+        const { r$ } = useRegle(
+            {
+                withMessage: 92,
+                defaultMessage: 92,
+                valid: 9
+            },
+            useRuleSchemaAdapter().adapt(yamlInput)
+        )
+
+        // Set translator expectations
+        expect(translateMock).toHaveBeenCalledExactlyOnceWith('VALIDATE.INVALID_RANGE', {
+            min: 0,
+            max: 10
+        })
+
+        expect(r$.withMessage.$silentErrors).toEqual(['VALIDATE.INVALID_RANGE']) // Custom message
+        expect(r$.defaultMessage.$silentErrors).toEqual(['The value must be between 0 and 10']) // Default message
+        expect(r$.valid.$silentErrors).toEqual([]) // Valid
+    })
+
+    test('regex rule', () => {
+        const yamlInput = `
+            withMessage:
+                validators:
+                    regex:
+                        regex: ^who(o*)$
+                        message: VALIDATE.INVALID_VALUE
+            defaultMessage:
+                validators:
+                    regex: 
+                        regex: ^who(o*)$
+            valid:
+                validators:
+                    regex: 
+                        regex: ^who(o*)$
+        `
+
+        const { r$ } = useRegle(
+            {
+                withMessage: 'hum',
+                defaultMessage: 'hello',
+                valid: 'whooo'
+            },
+            useRuleSchemaAdapter().adapt(yamlInput)
+        )
+        r$.$validate()
+
+        // Set translator expectations
+        expect(translateMock).toHaveBeenCalledExactlyOnceWith('VALIDATE.INVALID_VALUE', {
+            regex: '^who(o*)$'
+        })
+
+        expect(r$.withMessage.$errors).toEqual(['VALIDATE.INVALID_VALUE']) // Custom message
+        expect(r$.defaultMessage.$errors).toEqual(['The value does not match the required pattern']) // Default message
+        expect(r$.valid.$correct).toEqual(true) // Valid
+    })
+
+    test('uri rule', () => {
+        const yamlInput = `
+            withMessage:
+                validators:
+                    uri:
+                        message: VALIDATE.INVALID_URL
+            defaultMessage:
+                validators:
+                    uri: true
+            valid:
+                validators:
+                    uri: true
+        `
+
+        const { r$ } = useRegle(
+            {
+                withMessage: 'foo',
+                defaultMessage: 'bar@example.com',
+                valid: 'http://example.com'
+            },
+            useRuleSchemaAdapter().adapt(yamlInput)
+        )
+
+        // Set translator expectations
+        expect(translateMock).toHaveBeenCalledExactlyOnceWith('VALIDATE.INVALID_URL', {})
+
+        expect(r$.withMessage.$silentErrors).toEqual(['VALIDATE.INVALID_URL']) // Custom message
+        expect(r$.defaultMessage.$silentErrors).toEqual(['The value is not a valid URL address']) // Default message
+        expect(r$.valid.$silentErrors).toEqual([]) // Valid
+    })
+
+    test('username rule', () => {
+        const yamlInput = `
+            withMessage:
+                validators:
+                    username:
+                        message: VALIDATE.INVALID_USERNAME
+            defaultMessage:
+                validators:
+                    username: true
+            valid:
+                validators:
+                    username: true
+        `
+
+        const { r$ } = useRegle(
+            {
+                withMessage: 'My Name',
+                defaultMessage: 'bar@example.com',
+                valid: 'foo.bar-bax_123'
+            },
+            useRuleSchemaAdapter().adapt(yamlInput)
+        )
+
+        // Set translator expectations
+        expect(translateMock).toHaveBeenCalledExactlyOnceWith('VALIDATE.INVALID_USERNAME', {})
+
+        expect(r$.withMessage.$silentErrors).toEqual(['VALIDATE.INVALID_USERNAME']) // Custom message
+        expect(r$.defaultMessage.$silentErrors).toEqual([
+            'The value does not match the required pattern'
+        ]) // Default message
+        expect(r$.valid.$silentErrors).toEqual([]) // Valid
+    })
+})

package/app/assets/tests/plugin.test.ts

@@ -1,8 +1,8 @@
 import { describe, expect, test, vi } from 'vitest'
 import { createApp } from 'vue'
-import { useConfigStore } from '../stores/config'
+import { useConfigStore } from '../stores/useConfigStore'
 import plugin from '..'
-import * as Config from '../stores/config'
+import * as Config from '../stores/useConfigStore'
 import * as Translator from '../stores/useTranslator'
 
 const mockConfigStore = {

package/app/assets/tests/stores/config.test.ts

@@ -1,7 +1,7 @@
 import { describe, expect, beforeEach, test, vi } from 'vitest'
 import { setActivePinia, createPinia } from 'pinia'
 import axios from 'axios'
-import { useConfigStore } from '../../stores/config'
+import { useConfigStore } from '../../stores/useConfigStore'
 
 const testConfig = {
     name: 'Test Config',

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@userfrosting/sprinkle-core",
-    "version": "6.0.0-alpha.5",
+    "version": "6.0.0-beta.1",
     "type": "module",
     "description": "Core Sprinkle for UserFrosting",
     "funding": "https://opencollective.com/userfrosting",
@@ -34,8 +34,11 @@
         "app/assets/"
     ],
     "dependencies": {
+        "@regle/core": "^1.6.0",
+        "@regle/rules": "^1.6.0",
         "dot-prop": "^9.0.0",
-        "luxon": "^3.5.0"
+        "luxon": "^3.5.0",
+        "yaml": "^2.8.0"
     },
     "peerDependencies": {
         "axios": "^1.5.0",
@@ -59,7 +62,7 @@
         "happy-dom": "^15.11.6",
         "less": "^4.2.0",
         "npm-run-all2": "^6.1.2",
-        "prettier": "^3.2.5",
+        "prettier": "^3.6.2",
         "vite": "^6.2",
         "vite-plugin-dts": "^4.0.0",
         "vitest": "^3.1.1",