@aerogel/core 0.0.0-next.f9394854509d71d644498ac087706a2f8f8eea1c → 0.0.0-next.fb0f08b1df2e4aff5b34e23b9927b06b58484c98

package/src/forms/{Form.test.ts → FormController.test.ts}

@@ -1,10 +1,18 @@
 import { describe, expect, expectTypeOf, it } from 'vitest';
+import { tt } from '@noeldemartin/testing';
+import type { Equals } from '@noeldemartin/utils';
+import type { Expect } from '@noeldemartin/testing';
 
-import { useForm } from './composition';
-import { FormFieldTypes } from '@/main';
-import { numberInput, requiredStringInput } from '@/forms/utils';
+import {
+    numberInput,
+    objectInput,
+    requiredObjectInput,
+    requiredStringInput,
+    stringInput,
+} from '@aerogel/core/forms/utils';
+import { useForm } from '@aerogel/core/utils/composition/forms';
 
-describe('Form', () => {
+describe('FormController', () => {
 
     it('defines magic fields', () => {
         const form = useForm({
@@ -20,7 +28,7 @@ describe('Form', () => {
         // Arrange
         const form = useForm({
             name: {
-                type: FormFieldTypes.String,
+                type: 'string',
                 rules: 'required',
             },
         });
@@ -38,7 +46,7 @@ describe('Form', () => {
         // Arrange
         const form = useForm({
             name: {
-                type: FormFieldTypes.String,
+                type: 'string',
                 rules: 'required',
             },
         });
@@ -59,11 +67,11 @@ describe('Form', () => {
         // Arrange
         const form = useForm({
             trimmed: {
-                type: FormFieldTypes.String,
+                type: 'string',
                 rules: 'required',
             },
             untrimmed: {
-                type: FormFieldTypes.String,
+                type: 'string',
                 rules: 'required',
                 trim: false,
             },
@@ -83,4 +91,20 @@ describe('Form', () => {
         expect(form.errors).toEqual({ trimmed: ['required'], untrimmed: null });
     });
 
+    it('infers field types', () => {
+        const form = useForm({
+            one: stringInput(),
+            two: requiredStringInput(),
+            three: objectInput(),
+            four: requiredObjectInput<{ foo: string; bar?: number }>(),
+        });
+
+        tt<
+            | Expect<Equals<typeof form.one, string | null>>
+            | Expect<Equals<typeof form.two, string>>
+            | Expect<Equals<typeof form.three, object | null>>
+            | Expect<Equals<typeof form.four, { foo: string; bar?: number }>>
+        >();
+    });
+
 });

package/src/forms/{Form.ts → FormController.ts}

@@ -1,33 +1,32 @@
 import { computed, nextTick, reactive, readonly, ref } from 'vue';
 import { MagicObject, arrayRemove, fail, toString } from '@noeldemartin/utils';
-import { validate } from './validation';
-import type { ObjectValues } from '@noeldemartin/utils';
 import type { ComputedRef, DeepReadonly, Ref, UnwrapNestedRefs } from 'vue';
 
-export const FormFieldTypes = {
-    String: 'string',
-    Number: 'number',
-    Boolean: 'boolean',
-    Object: 'object',
-    Date: 'date',
-} as const;
+import { validate } from './validation';
+
+export const __objectType: unique symbol = Symbol();
 
-export interface FormFieldDefinition<TType extends FormFieldType = FormFieldType, TRules extends string = string> {
+export interface FormFieldDefinition<
+    TType extends FormFieldType = FormFieldType,
+    TRules extends string = string,
+    TObjectType = object,
+> {
     type: TType;
     trim?: boolean;
     default?: GetFormFieldValue<TType>;
     rules?: TRules;
+    [__objectType]?: TObjectType;
 }
 
-export type FormFieldDefinitions = Record<string, FormFieldDefinition>;
-export type FormFieldType = ObjectValues<typeof FormFieldTypes>;
+export type FormFieldType = 'string' | 'number' | 'boolean' | 'object' | 'date';
 export type FormFieldValue = GetFormFieldValue<FormFieldType>;
+export type FormFieldDefinitions = Record<string, FormFieldDefinition>;
 
 export type FormData<T> = {
-    -readonly [k in keyof T]: T[k] extends FormFieldDefinition<infer TType, infer TRules>
+    -readonly [k in keyof T]: T[k] extends FormFieldDefinition<infer TType, infer TRules, infer TObjectType>
         ? TRules extends 'required'
-            ? GetFormFieldValue<TType>
-            : GetFormFieldValue<TType> | null
+            ? GetFormFieldValue<TType, TObjectType>
+            : GetFormFieldValue<TType, TObjectType> | null
         : never;
 };
 
@@ -35,24 +34,26 @@ export type FormErrors<T> = {
     [k in keyof T]: string[] | null;
 };
 
-export type GetFormFieldValue<TType> = TType extends typeof FormFieldTypes.String
+export type GetFormFieldValue<TType, TObjectType = object> = TType extends 'string'
     ? string
-    : TType extends typeof FormFieldTypes.Number
-    ? number
-    : TType extends typeof FormFieldTypes.Boolean
-    ? boolean
-    : TType extends typeof FormFieldTypes.Object
-    ? object
-    : TType extends typeof FormFieldTypes.Date
-    ? Date
-    : never;
-
-const validForms: WeakMap<Form, ComputedRef<boolean>> = new WeakMap();
+    : TType extends 'number'
+      ? number
+      : TType extends 'boolean'
+        ? boolean
+        : TType extends 'object'
+          ? TObjectType extends object
+              ? TObjectType
+              : object
+          : TType extends 'date'
+            ? Date
+            : never;
+
+const validForms: WeakMap<FormController, ComputedRef<boolean>> = new WeakMap();
 
 export type SubmitFormListener = () => unknown;
 export type FocusFormListener = (input: string) => unknown;
 
-export default class Form<Fields extends FormFieldDefinitions = FormFieldDefinitions> extends MagicObject {
+export default class FormController<Fields extends FormFieldDefinitions = FormFieldDefinitions> extends MagicObject {
 
     public errors: DeepReadonly<UnwrapNestedRefs<FormErrors<Fields>>>;
 
@@ -91,7 +92,7 @@ export default class Form<Fields extends FormFieldDefinitions = FormFieldDefinit
             this._fields[field] ?? fail<FormFieldDefinition>(`Trying to set undefined '${toString(field)}' field`);
 
         this._data[field] =
-            definition.type === FormFieldTypes.String && (definition.trim ?? true)
+            definition.type === 'string' && (definition.trim ?? true)
                 ? (toString(value).trim() as FormData<Fields>[T])
                 : value;
 
@@ -113,11 +114,14 @@ export default class Form<Fields extends FormFieldDefinitions = FormFieldDefinit
     }
 
     public validate(): boolean {
-        const errors = Object.entries(this._fields).reduce((formErrors, [name, definition]) => {
-            formErrors[name] = this.getFieldErrors(name, definition);
+        const errors = Object.entries(this._fields).reduce(
+            (formErrors, [name, definition]) => {
+                formErrors[name] = this.getFieldErrors(name, definition);
 
-            return formErrors;
-        }, {} as Record<string, string[] | null>);
+                return formErrors;
+            },
+            {} as Record<string, string[] | null>,
+        );
 
         this.resetErrors(errors);
 
@@ -165,7 +169,7 @@ export default class Form<Fields extends FormFieldDefinitions = FormFieldDefinit
         this._listeners['focus']?.forEach((listener) => listener(input));
     }
 
-    protected __get(property: string): unknown {
+    protected override __get(property: string): unknown {
         if (!(property in this._fields)) {
             return super.__get(property);
         }
@@ -173,7 +177,7 @@ export default class Form<Fields extends FormFieldDefinitions = FormFieldDefinit
         return this.getFieldValue(property);
     }
 
-    protected __set(property: string, value: unknown): void {
+    protected override __set(property: string, value: unknown): void {
         if (!(property in this._fields)) {
             super.__set(property, value);
 
@@ -204,10 +208,10 @@ export default class Form<Fields extends FormFieldDefinitions = FormFieldDefinit
             return {} as FormData<Fields>;
         }
 
-        const data = Object.entries(fields).reduce((formData, [name, definition]) => {
-            formData[name as keyof Fields] = (definition.default ?? null) as FormData<Fields>[keyof Fields];
+        const data = Object.entries(fields).reduce((initialData, [name, definition]) => {
+            initialData[name as keyof Fields] = (definition.default ?? null) as FormData<Fields>[keyof Fields];
 
-            return formData;
+            return initialData;
         }, {} as FormData<Fields>);
 
         return reactive(data) as FormData<Fields>;

package/src/forms/index.ts

@@ -1,5 +1,4 @@
-export * from './composition';
-export * from './Form';
+export * from './FormController';
 export * from './utils';
 export * from './validation';
-export { default as Form } from './Form';
+export { default as FormController } from './FormController';

package/src/forms/utils.ts

@@ -1,84 +1,84 @@
-import { FormFieldTypes } from './Form';
-import type { FormFieldDefinition } from './Form';
+import type { FormFieldDefinition } from './FormController';
 
-export function booleanInput(
-    defaultValue?: boolean,
-    options: { rules?: string } = {},
-): 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,
-    options: { rules?: string } = {},
-): 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 requiredBooleanInput(defaultValue?: boolean): FormFieldDefinition<'boolean', 'required'> {
     return {
         default: defaultValue,
-        type: FormFieldTypes.Boolean,
+        type: 'boolean',
         rules: 'required',
     };
 }
 
-export function requiredDateInput(defaultValue?: Date): FormFieldDefinition<typeof FormFieldTypes.Date> {
+export function requiredDateInput(defaultValue?: Date): FormFieldDefinition<'date', 'required'> {
     return {
         default: defaultValue,
-        type: FormFieldTypes.Date,
+        type: 'date',
         rules: 'required',
     };
 }
 
-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,
-    options: { rules?: string } = {},
-): FormFieldDefinition<typeof FormFieldTypes.Number> {
+export function requiredStringInput(defaultValue?: string): FormFieldDefinition<'string', 'required'> {
     return {
         default: defaultValue,
-        type: FormFieldTypes.Number,
+        type: 'string',
+        rules: 'required',
+    };
+}
+
+export function numberInput(defaultValue?: number, options: { rules?: string } = {}): FormFieldDefinition<'number'> {
+    return {
+        default: defaultValue,
+        type: 'number',
         rules: options.rules,
     };
 }
 
-export function stringInput(
-    defaultValue?: string,
+export function objectInput<T extends object>(
+    defaultValue?: T,
     options: { rules?: string } = {},
-): FormFieldDefinition<typeof FormFieldTypes.String> {
+): FormFieldDefinition<'object', string, T> {
+    return {
+        default: defaultValue,
+        type: 'object',
+        rules: options.rules,
+    };
+}
+
+export function stringInput(defaultValue?: string, options: { rules?: string } = {}): FormFieldDefinition<'string'> {
     return {
         default: defaultValue,
-        type: FormFieldTypes.String,
+        type: 'string',
         rules: options.rules,
     };
 }

package/src/index.css

@@ -0,0 +1,73 @@
+@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);
+}
+
+.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

@@ -1,10 +1,13 @@
-import App from '@/services/App';
+import { isDevelopment } from '@noeldemartin/utils';
 
 import type { LangProvider } from './Lang';
 
 export default class DefaultLangProvider implements LangProvider {
 
-    constructor(private locale: string, private fallbackLocale: string) {}
+    constructor(
+        private locale: string,
+        private fallbackLocale: string,
+    ) {}
 
     public getLocale(): string {
         return this.locale;
@@ -28,14 +31,14 @@ export default class DefaultLangProvider implements LangProvider {
 
     public translate(key: string): string {
         // eslint-disable-next-line no-console
-        App.development && console.warn('Lang provider is missing');
+        isDevelopment() && console.warn('Lang provider is missing');
 
         return key;
     }
 
     public translateWithDefault(_: string, defaultMessage: string): string {
         // eslint-disable-next-line no-console
-        App.development && console.warn('Lang provider is missing');
+        isDevelopment() && console.warn('Lang provider is missing');
 
         return defaultMessage;
     }

package/src/lang/Lang.state.ts

@@ -1,4 +1,4 @@
-import { defineServiceState } from '@/services/Service';
+import { defineServiceState } from '@aerogel/core/services/Service';
 
 export default defineServiceState({
     name: 'lang',

package/src/lang/Lang.ts

@@ -52,7 +52,7 @@ export class LangService extends Service {
         return navigator.languages.find((locale) => locales.includes(locale)) ?? 'en';
     }
 
-    protected async boot(): Promise<void> {
+    protected override async boot(): Promise<void> {
         if (!globalThis.document) {
             return;
         }