@aerogel/core 0.0.0-next.fd1bd21aea7a9ab8c4eab69a5f5776db5de8bf35 → 0.1.0

package/src/forms/utils.ts

@@ -1,68 +1,109 @@
-import { FormFieldTypes } from './Form';
-import type { FormFieldDefinition } from './Form';
+import type { FormFieldDefinition } from './FormController';
 
-export function booleanInput(defaultValue?: boolean): FormFieldDefinition<typeof FormFieldTypes.Boolean> {
+export function booleanInput(defaultValue?: boolean, options: { rules?: string } = {}): FormFieldDefinition<'boolean'> {
     return {
         default: defaultValue,
-        type: FormFieldTypes.Boolean,
+        type: 'boolean',
+        rules: options.rules,
     };
 }
 
-export function dateInput(defaultValue?: Date): FormFieldDefinition<typeof FormFieldTypes.Date> {
+export function dateInput(defaultValue?: Date, options: { rules?: string } = {}): FormFieldDefinition<'date'> {
     return {
         default: defaultValue,
-        type: FormFieldTypes.Date,
+        type: 'date',
+        rules: options.rules,
     };
 }
 
-export function requiredBooleanInput(
-    defaultValue?: boolean,
-): FormFieldDefinition<typeof FormFieldTypes.Boolean, 'required'> {
+export function enumInput<const T extends string>(
+    values: readonly T[],
+    defaultValue?: T,
+    options: { rules?: string } = {},
+): FormFieldDefinition<'enum', string, T> {
     return {
         default: defaultValue,
-        type: FormFieldTypes.Boolean,
+        type: 'enum',
+        rules: options.rules,
+        values,
+    };
+}
+
+export function requiredBooleanInput(defaultValue?: boolean): FormFieldDefinition<'boolean', 'required'> {
+    return {
+        default: defaultValue,
+        type: 'boolean',
+        rules: 'required',
+    };
+}
+
+export function requiredDateInput(defaultValue?: Date): FormFieldDefinition<'date', 'required'> {
+    return {
+        default: defaultValue,
+        type: 'date',
         rules: 'required',
     };
 }
 
-export function requiredDateInput(defaultValue?: Date): FormFieldDefinition<typeof FormFieldTypes.Date> {
+export function requiredEnumInput<const T extends string>(
+    values: readonly T[],
+    defaultValue?: T,
+): FormFieldDefinition<'enum', 'required', T> {
     return {
         default: defaultValue,
-        type: FormFieldTypes.Date,
+        type: 'enum',
         rules: 'required',
+        values,
     };
 }
 
-export function requiredNumberInput(
-    defaultValue?: number,
-): FormFieldDefinition<typeof FormFieldTypes.Number, 'required'> {
+export function requiredNumberInput(defaultValue?: number): FormFieldDefinition<'number', 'required'> {
     return {
         default: defaultValue,
-        type: FormFieldTypes.Number,
+        type: 'number',
         rules: 'required',
     };
 }
 
-export function requiredStringInput(
-    defaultValue?: string,
-): FormFieldDefinition<typeof FormFieldTypes.String, 'required'> {
+export function requiredObjectInput<T extends object>(defaultValue?: T): FormFieldDefinition<'object', 'required', T> {
     return {
         default: defaultValue,
-        type: FormFieldTypes.String,
+        type: 'object',
         rules: 'required',
     };
 }
 
-export function numberInput(defaultValue?: number): FormFieldDefinition<typeof FormFieldTypes.Number> {
+export function requiredStringInput(defaultValue?: string): FormFieldDefinition<'string', 'required'> {
+    return {
+        default: defaultValue,
+        type: 'string',
+        rules: 'required',
+    };
+}
+
+export function numberInput(defaultValue?: number, options: { rules?: string } = {}): FormFieldDefinition<'number'> {
+    return {
+        default: defaultValue,
+        type: 'number',
+        rules: options.rules,
+    };
+}
+
+export function objectInput<T extends object>(
+    defaultValue?: T,
+    options: { rules?: string } = {},
+): FormFieldDefinition<'object', string, T> {
     return {
         default: defaultValue,
-        type: FormFieldTypes.Number,
+        type: 'object',
+        rules: options.rules,
     };
 }
 
-export function stringInput(defaultValue?: string): FormFieldDefinition<typeof FormFieldTypes.String> {
+export function stringInput(defaultValue?: string, options: { rules?: string } = {}): FormFieldDefinition<'string'> {
     return {
         default: defaultValue,
-        type: FormFieldTypes.String,
+        type: 'string',
+        rules: options.rules,
     };
 }

package/src/forms/validation.ts

@@ -0,0 +1,50 @@
+import { arrayFrom } from '@noeldemartin/utils';
+
+import type { FormFieldDefinition } from '@aerogel/core/forms/FormController';
+
+const builtInRules: Record<string, FormFieldValidator> = {
+    required: (value) => (value ? undefined : 'required'),
+};
+
+function isValidType(value: unknown, definition: FormFieldDefinition): boolean {
+    if (value === undefined || value === null) {
+        return true;
+    }
+
+    switch (definition.type) {
+        case 'string':
+            return typeof value === 'string';
+        case 'enum':
+            return !!definition.values?.includes(value);
+        case 'number':
+            return typeof value === 'number';
+        case 'boolean':
+            return typeof value === 'boolean';
+        case 'date':
+            return value instanceof Date;
+        case 'object':
+            return typeof value === 'object';
+    }
+}
+
+export type FormFieldValidator<T = unknown> = (value: T) => string | string[] | undefined;
+
+export const validators: Record<string, FormFieldValidator> = { ...builtInRules };
+
+export function defineFormValidationRule<T>(rule: string, validator: FormFieldValidator<T>): void {
+    validators[rule] = validator as FormFieldValidator;
+}
+
+export function validateType(value: unknown, definition: FormFieldDefinition): string[] {
+    if (isValidType(value, definition)) {
+        return [];
+    }
+
+    return ['invalid_value'];
+}
+
+export function validate(value: unknown, rule: string): string[] {
+    const errors = validators[rule]?.(value);
+
+    return errors ? arrayFrom(errors) : [];
+}

package/src/index.css

@@ -0,0 +1,76 @@
+@import 'tailwindcss';
+
+@plugin '@tailwindcss/forms';
+@plugin '@tailwindcss/typography';
+
+@source './';
+
+@theme {
+    --color-primary: oklch(0.205 0 0);
+    --color-primary-50: color-mix(in oklab, var(--color-primary-600) 5%, transparent);
+    --color-primary-100: color-mix(in oklab, var(--color-primary-600) 15%, transparent);
+    --color-primary-200: color-mix(in oklab, var(--color-primary-600) 30%, transparent);
+    --color-primary-300: color-mix(in oklab, var(--color-primary-600) 50%, transparent);
+    --color-primary-400: color-mix(in oklab, var(--color-primary-600) 65%, transparent);
+    --color-primary-500: color-mix(in oklab, var(--color-primary-600) 80%, transparent);
+    --color-primary-600: var(--color-primary);
+    --color-primary-700: color-mix(in oklab, var(--color-primary-600) 90%, black);
+    --color-primary-800: color-mix(in oklab, var(--color-primary-600) 80%, black);
+    --color-primary-900: color-mix(in oklab, var(--color-primary-600) 70%, black);
+    --color-primary-950: color-mix(in oklab, var(--color-primary-600) 50%, black);
+
+    --color-background: oklch(1 0 0);
+    --color-links: var(--color-primary);
+
+    --breakpoint-content: var(--breakpoint-md);
+    --spacing-edge: 1rem;
+}
+
+.clickable {
+    position: relative;
+}
+
+.clickable::after {
+    --clickable-size: 44px;
+    --clickable-inset-by: min(0px, calc((100% - var(--clickable-size)) / 2));
+
+    content: '';
+    position: absolute;
+    top: var(--clickable-inset-by);
+    left: var(--clickable-inset-by);
+    right: var(--clickable-inset-by);
+    bottom: var(--clickable-inset-by);
+}
+
+input[type='number'].appearance-textfield {
+    appearance: textfield;
+}
+
+input[type='number'].appearance-textfield::-webkit-outer-spin-button,
+input[type='number'].appearance-textfield::-webkit-inner-spin-button {
+    appearance: none;
+}
+
+button[data-markdown-action] {
+    color: var(--tw-prose-links);
+    text-decoration: underline;
+    font-weight: 500;
+}
+
+@keyframes fade-in {
+    0% {
+        opacity: 0;
+    }
+    100% {
+        opacity: 1;
+    }
+}
+
+@keyframes grow {
+    0% {
+        scale: 0;
+    }
+    100% {
+        opacity: 1;
+    }
+}

package/src/jobs/Job.ts

@@ -1,5 +1,147 @@
-export default abstract class Job {
+import { ListenersManager, PromisedValue, round, tap, toError } from '@noeldemartin/utils';
+import type { Listeners } from '@noeldemartin/utils';
 
-    public abstract run(): Promise<void>;
+import JobCancelledError from '@aerogel/core/errors/JobCancelledError';
+
+import type { JobListener } from './listeners';
+import type { JobStatus } from './status';
+
+export default abstract class Job<
+    Listener extends JobListener = JobListener,
+    Status extends JobStatus = JobStatus,
+    SerializedStatus extends JobStatus = JobStatus,
+> {
+
+    protected status: Status;
+    protected _listeners: ListenersManager<JobListener>;
+    protected _progress?: number;
+    protected _cancelled?: PromisedValue<void>;
+    protected _started: PromisedValue<void>;
+    protected _completed: PromisedValue<void>;
+
+    constructor() {
+        this.status = this.getInitialStatus();
+        this._listeners = new ListenersManager();
+        this._started = new PromisedValue();
+        this._completed = new PromisedValue();
+    }
+
+    public async start(): Promise<void> {
+        this.beforeStart();
+        this._started.resolve();
+
+        try {
+            await this.updateProgress();
+            await this.run();
+            await this.updateProgress();
+
+            this._completed.resolve();
+        } catch (error) {
+            if (error instanceof JobCancelledError) {
+                return;
+            }
+
+            throw tap(toError(error), (realError) => {
+                this._completed.reject(realError);
+            });
+        }
+    }
+
+    public async cancel(): Promise<void> {
+        this._cancelled = new PromisedValue();
+
+        await this._cancelled;
+    }
+
+    public serialize(): SerializedStatus {
+        return this.serializeStatus(this.status);
+    }
+
+    public get listeners(): Listeners<Listener> {
+        return this._listeners;
+    }
+
+    public get progress(): number {
+        return this._progress ?? 0;
+    }
+
+    public get cancelled(): boolean {
+        return !!this._cancelled?.isResolved();
+    }
+
+    public get started(): Promise<void> {
+        return this._started;
+    }
+
+    public get completed(): Promise<void> {
+        return this._completed;
+    }
+
+    protected abstract run(): Promise<void>;
+
+    protected getInitialStatus(): Status {
+        return { completed: false } as Status;
+    }
+
+    protected beforeStart(): void {
+        if (!this._started.isResolved()) {
+            return;
+        }
+
+        if (this._cancelled) {
+            delete this._progress;
+            delete this._cancelled;
+
+            return;
+        }
+
+        throw new Error('Job already started!');
+    }
+
+    protected assertNotCancelled(): void {
+        if (!this._cancelled) {
+            return;
+        }
+
+        this._cancelled.resolve();
+
+        throw new JobCancelledError();
+    }
+
+    protected calculateCurrentProgress(status?: JobStatus): number {
+        status ??= this.status;
+
+        if (status.completed) {
+            return 1;
+        }
+
+        if (!status.children) {
+            return 0;
+        }
+
+        return round(
+            status.children.reduce((total, child) => total + this.calculateCurrentProgress(child), 0) /
+                status.children.length,
+            2,
+        );
+    }
+
+    protected async updateProgress(update?: (status: Status) => unknown): Promise<void> {
+        await update?.(this.status);
+
+        const progress = this.calculateCurrentProgress();
+
+        if (progress === this._progress) {
+            return;
+        }
+
+        this._progress = progress;
+
+        await this._listeners.emit('onUpdated', progress);
+    }
+
+    protected serializeStatus(status: Status): SerializedStatus {
+        return { ...status } as unknown as SerializedStatus;
+    }
 
 }

package/src/jobs/index.ts

@@ -1,7 +1,10 @@
 import Job from './Job';
 
 export { Job };
+export * from './Job';
+export * from './listeners';
+export * from './status';
 
 export async function dispatch(job: Job): Promise<void> {
-    await job.run();
+    await job.start();
 }

package/src/jobs/listeners.ts

@@ -0,0 +1,3 @@
+export interface JobListener {
+    onUpdated?(progress: number): unknown;
+}

package/src/jobs/status.ts

@@ -0,0 +1,4 @@
+export interface JobStatus {
+    completed: boolean;
+    children?: JobStatus[];
+}

package/src/lang/DefaultLangProvider.ts

@@ -0,0 +1,46 @@
+import { isDevelopment } from '@noeldemartin/utils';
+
+import type { LangProvider } from './Lang';
+
+export default class DefaultLangProvider implements LangProvider {
+
+    constructor(
+        private locale: string,
+        private fallbackLocale: string,
+    ) {}
+
+    public getLocale(): string {
+        return this.locale;
+    }
+
+    public async setLocale(locale: string): Promise<void> {
+        this.locale = locale;
+    }
+
+    public getFallbackLocale(): string {
+        return this.fallbackLocale;
+    }
+
+    public async setFallbackLocale(fallbackLocale: string): Promise<void> {
+        this.fallbackLocale = fallbackLocale;
+    }
+
+    public getLocales(): string[] {
+        return ['en'];
+    }
+
+    public translate(key: string): string {
+        // eslint-disable-next-line no-console
+        isDevelopment() && console.warn('Lang provider is missing');
+
+        return key;
+    }
+
+    public translateWithDefault(_: string, defaultMessage: string): string {
+        // eslint-disable-next-line no-console
+        isDevelopment() && console.warn('Lang provider is missing');
+
+        return defaultMessage;
+    }
+
+}

package/src/lang/Lang.state.ts

@@ -0,0 +1,11 @@
+import { defineServiceState } from '@aerogel/core/services/Service';
+
+export default defineServiceState({
+    name: 'lang',
+    persist: ['locale', 'fallbackLocale'],
+    initialState: {
+        locale: null as string | null,
+        locales: ['en'],
+        fallbackLocale: 'en',
+    },
+});

package/src/lang/Lang.ts

@@ -1,11 +1,16 @@
 import { facade } from '@noeldemartin/utils';
 
-import App from '@/services/App';
-import Service from '@/services/Service';
+import DefaultLangProvider from './DefaultLangProvider';
+import Service from './Lang.state';
 
 export interface LangProvider {
-    translate(key: string, parameters?: Record<string, unknown>): string;
-    translateWithDefault(key: string, defaultMessage: string, parameters?: Record<string, unknown>): string;
+    getLocale(): string;
+    setLocale(locale: string): Promise<void>;
+    getFallbackLocale(): string;
+    setFallbackLocale(fallbackLocale: string): Promise<void>;
+    getLocales(): string[];
+    translate(key: string, parameters?: Record<string, unknown> | number): string;
+    translateWithDefault(key: string, defaultMessage: string, parameters?: Record<string, unknown> | number): string;
 }
 
 export class LangService extends Service {
@@ -15,34 +20,56 @@ export class LangService extends Service {
     constructor() {
         super();
 
-        this.provider = {
-            translate: (key) => {
-                // eslint-disable-next-line no-console
-                App.development && console.warn('Lang provider is missing');
-
-                return key;
-            },
-            translateWithDefault: (_, defaultMessage) => {
-                // eslint-disable-next-line no-console
-                App.development && console.warn('Lang provider is missing');
-
-                return defaultMessage;
-            },
-        };
+        this.provider = new DefaultLangProvider(
+            this.getState('locale') ?? this.getBrowserLocale(),
+            this.getState('fallbackLocale'),
+        );
     }
 
-    public setProvider(provider: LangProvider): void {
+    public async setProvider(provider: LangProvider): Promise<void> {
         this.provider = provider;
+        this.locales = provider.getLocales();
+
+        await provider.setLocale(this.locale ?? this.getBrowserLocale());
+        await provider.setFallbackLocale(this.fallbackLocale);
     }
 
-    public translate(key: string, parameters?: Record<string, unknown>): string {
+    public translate(key: string, parameters?: Record<string, unknown> | number): string {
         return this.provider.translate(key, parameters) ?? key;
     }
 
-    public translateWithDefault(key: string, defaultMessage: string, parameters: Record<string, unknown> = {}): string {
+    public translateWithDefault(
+        key: string,
+        defaultMessage: string,
+        parameters: Record<string, unknown> | number = {},
+    ): string {
         return this.provider.translateWithDefault(key, defaultMessage, parameters);
     }
 
+    public getBrowserLocale(): string {
+        const locales = this.getState('locales');
+
+        return navigator.languages.find((locale) => locales.includes(locale)) ?? 'en';
+    }
+
+    protected override async boot(): Promise<void> {
+        if (!globalThis.document) {
+            return;
+        }
+
+        this.requireStore().$subscribe(
+            async () => {
+                await this.provider.setLocale(this.locale ?? this.getBrowserLocale());
+                await this.provider.setFallbackLocale(this.fallbackLocale);
+
+                this.locale
+                    ? document.querySelector('html')?.setAttribute('lang', this.locale)
+                    : document.querySelector('html')?.removeAttribute('lang');
+            },
+            { immediate: true },
+        );
+    }
+
 }
 
 export default facade(LangService);

package/src/lang/index.ts

@@ -1,10 +1,14 @@
-import { bootServices } from '@/services';
-import { definePlugin } from '@/plugins';
+import App from '@aerogel/core/services/App';
+import { bootServices } from '@aerogel/core/services';
+import { definePlugin } from '@aerogel/core/plugins';
 
-import Lang, { LangProvider } from './Lang';
+import Lang from './Lang';
+import settings from './settings';
 import { translate, translateWithDefault } from './utils';
+import type { LangProvider } from './Lang';
 
-export { Lang, LangProvider, translate, translateWithDefault };
+export { Lang, translate, translateWithDefault };
+export type { LangProvider };
 
 const services = { $lang: Lang };
 
@@ -15,15 +19,17 @@ export default definePlugin({
         app.config.globalProperties.$t ??= translate;
         app.config.globalProperties.$td = translateWithDefault;
 
+        settings.forEach((setting) => App.addSetting(setting));
+
         await bootServices(app, services);
     },
 });
 
-declare module '@/services' {
+declare module '@aerogel/core/services' {
     export interface Services extends LangServices {}
 }
 
-declare module '@vue/runtime-core' {
+declare module 'vue' {
     interface ComponentCustomProperties {
         $td: typeof translateWithDefault;
     }

package/src/lang/settings/Language.vue

@@ -0,0 +1,48 @@
+<template>
+    <Select
+        v-model="$lang.locale"
+        class="flex flex-col items-start md:flex-row"
+        as="div"
+        :options
+        :render-option="renderLocale"
+    >
+        <div class="grow">
+            <SelectLabel class="text-base font-semibold">
+                {{ $td('settings.locale', 'Language') }}
+            </SelectLabel>
+            <Markdown
+                lang-key="settings.localeDescription"
+                lang-default="Choose the application's language."
+                class="mt-1 text-sm text-gray-500"
+            />
+        </div>
+        <Button variant="ghost" :as="SelectTrigger" class="grid w-auto outline-none" />
+        <SelectOptions />
+    </Select>
+</template>
+
+<script setup lang="ts">
+import Aerogel from 'virtual:aerogel';
+
+import { computed } from 'vue';
+
+import Markdown from '@aerogel/core/components/ui/Markdown.vue';
+import Button from '@aerogel/core/components/ui/Button.vue';
+import Select from '@aerogel/core/components/ui/Select.vue';
+import SelectLabel from '@aerogel/core/components/ui/SelectLabel.vue';
+import SelectTrigger from '@aerogel/core/components/ui/SelectTrigger.vue';
+import SelectOptions from '@aerogel/core/components/ui/SelectOptions.vue';
+import { Lang, translateWithDefault } from '@aerogel/core/lang';
+
+const browserLocale = Lang.getBrowserLocale();
+const options = computed(() => [null, ...Lang.locales]);
+
+function renderLocale(locale: string | null): string {
+    return (
+        (locale && Aerogel.locales[locale]) ??
+        translateWithDefault('settings.localeDefault', '{locale} (default)', {
+            locale: Aerogel.locales[browserLocale] ?? browserLocale,
+        })
+    );
+}
+</script>

package/src/lang/settings/index.ts

@@ -0,0 +1,10 @@
+import { defineSettings } from '@aerogel/core/services';
+
+import Language from './Language.vue';
+
+export default defineSettings([
+    {
+        priority: 100,
+        component: Language,
+    },
+]);