@aerogel/core 0.0.0-next.d824b40e5d06757cd9f47c9f771d916185df4f05 → 0.0.0-next.e4c0d5bd2801fbe93545477ea515af53df69b522

package/src/forms/FormController.test.ts

@@ -0,0 +1,110 @@
+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 {
+    numberInput,
+    objectInput,
+    requiredObjectInput,
+    requiredStringInput,
+    stringInput,
+} from '@aerogel/core/forms/utils';
+import { useForm } from '@aerogel/core/utils/composition/forms';
+
+describe('FormController', () => {
+
+    it('defines magic fields', () => {
+        const form = useForm({
+            name: requiredStringInput(),
+            age: numberInput(),
+        });
+
+        expectTypeOf(form.name).toEqualTypeOf<string>();
+        expectTypeOf(form.age).toEqualTypeOf<number | null>();
+    });
+
+    it('validates required fields', () => {
+        // Arrange
+        const form = useForm({
+            name: {
+                type: 'string',
+                rules: 'required',
+            },
+        });
+
+        // Act
+        form.submit();
+
+        // Assert
+        expect(form.valid).toBe(false);
+        expect(form.submitted).toBe(true);
+        expect(form.errors.name).toEqual(['required']);
+    });
+
+    it('resets form', () => {
+        // Arrange
+        const form = useForm({
+            name: {
+                type: 'string',
+                rules: 'required',
+            },
+        });
+
+        form.name = 'Foo bar';
+        form.submit();
+
+        // Act
+        form.reset();
+
+        // Assert
+        expect(form.valid).toBe(true);
+        expect(form.submitted).toBe(false);
+        expect(form.name).toBeNull();
+    });
+
+    it('trims values', () => {
+        // Arrange
+        const form = useForm({
+            trimmed: {
+                type: 'string',
+                rules: 'required',
+            },
+            untrimmed: {
+                type: 'string',
+                rules: 'required',
+                trim: false,
+            },
+        });
+
+        // Act
+        form.trimmed = '   ';
+        form.untrimmed = '   ';
+
+        form.submit();
+
+        // Assert
+        expect(form.valid).toBe(false);
+        expect(form.submitted).toBe(true);
+        expect(form.trimmed).toEqual('');
+        expect(form.untrimmed).toEqual('   ');
+        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/FormController.ts

@@ -0,0 +1,246 @@
+import { computed, nextTick, reactive, readonly, ref } from 'vue';
+import { MagicObject, arrayRemove, fail, toString } from '@noeldemartin/utils';
+import type { ComputedRef, DeepReadonly, Ref, UnwrapNestedRefs } from 'vue';
+
+import { validate } from './validation';
+
+export const __objectType: unique symbol = Symbol();
+
+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 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, infer TObjectType>
+        ? TRules extends 'required'
+            ? GetFormFieldValue<TType, TObjectType>
+            : GetFormFieldValue<TType, TObjectType> | null
+        : never;
+};
+
+export type FormErrors<T> = {
+    [k in keyof T]: string[] | null;
+};
+
+export type GetFormFieldValue<TType, TObjectType = object> = TType extends 'string'
+    ? string
+    : 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 FormController<Fields extends FormFieldDefinitions = FormFieldDefinitions> extends MagicObject {
+
+    public errors: DeepReadonly<UnwrapNestedRefs<FormErrors<Fields>>>;
+
+    private _fields: Fields;
+    private _data: FormData<Fields>;
+    private _submitted: Ref<boolean>;
+    private _errors: FormErrors<Fields>;
+    private _listeners: { focus?: FocusFormListener[]; submit?: SubmitFormListener[] } = {};
+
+    constructor(fields: Fields) {
+        super();
+
+        this._fields = fields;
+        this._submitted = ref(false);
+        this._data = this.getInitialData(fields);
+        this._errors = this.getInitialErrors(fields);
+
+        validForms.set(
+            this,
+            computed(() => !Object.values(this._errors).some((error) => error !== null)),
+        );
+
+        this.errors = readonly(this._errors);
+    }
+
+    public get valid(): boolean {
+        return !!validForms.get(this)?.value;
+    }
+
+    public get submitted(): boolean {
+        return this._submitted.value;
+    }
+
+    public setFieldValue<T extends keyof Fields>(field: T, value: FormData<Fields>[T]): void {
+        const definition =
+            this._fields[field] ?? fail<FormFieldDefinition>(`Trying to set undefined '${toString(field)}' field`);
+
+        this._data[field] =
+            definition.type === 'string' && (definition.trim ?? true)
+                ? (toString(value).trim() as FormData<Fields>[T])
+                : value;
+
+        if (this._submitted.value) {
+            this.validate();
+        }
+    }
+
+    public getFieldValue<T extends keyof Fields>(field: T): GetFormFieldValue<Fields[T]['type']> {
+        return this._data[field] as unknown as GetFormFieldValue<Fields[T]['type']>;
+    }
+
+    public getFieldRules<T extends keyof Fields>(field: T): string[] {
+        return this._fields[field]?.rules?.split('|') ?? [];
+    }
+
+    public data(): FormData<Fields> {
+        return { ...this._data };
+    }
+
+    public validate(): boolean {
+        const errors = Object.entries(this._fields).reduce(
+            (formErrors, [name, definition]) => {
+                formErrors[name] = this.getFieldErrors(name, definition);
+
+                return formErrors;
+            },
+            {} as Record<string, string[] | null>,
+        );
+
+        this.resetErrors(errors);
+
+        return this.valid;
+    }
+
+    public reset(options: { keepData?: boolean; keepErrors?: boolean } = {}): void {
+        this._submitted.value = false;
+
+        options.keepData || this.resetData();
+        options.keepErrors || this.resetErrors();
+    }
+
+    public submit(): boolean {
+        this._submitted.value = true;
+
+        const valid = this.validate();
+
+        valid && this._listeners['submit']?.forEach((listener) => listener());
+
+        return valid;
+    }
+
+    public on(event: 'focus', listener: FocusFormListener): () => void;
+    public on(event: 'submit', listener: SubmitFormListener): () => void;
+    public on(event: 'focus' | 'submit', listener: FocusFormListener | SubmitFormListener): () => void {
+        this._listeners[event] ??= [];
+
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        this._listeners[event]?.push(listener as any);
+
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        return () => this.off(event as any, listener);
+    }
+
+    public off(event: 'focus', listener: FocusFormListener): void;
+    public off(event: 'submit', listener: SubmitFormListener): void;
+    public off(event: 'focus' | 'submit', listener: FocusFormListener | SubmitFormListener): void {
+        arrayRemove(this._listeners[event] ?? [], listener);
+    }
+
+    public async focus(input: string): Promise<void> {
+        await nextTick();
+
+        this._listeners['focus']?.forEach((listener) => listener(input));
+    }
+
+    protected override __get(property: string): unknown {
+        if (!(property in this._fields)) {
+            return super.__get(property);
+        }
+
+        return this.getFieldValue(property);
+    }
+
+    protected override __set(property: string, value: unknown): void {
+        if (!(property in this._fields)) {
+            super.__set(property, value);
+
+            return;
+        }
+
+        this.setFieldValue(property, value as FormData<Fields>[string]);
+    }
+
+    private getFieldErrors(name: keyof Fields, definition: FormFieldDefinition): string[] | null {
+        const errors = [];
+        const value = this._data[name];
+        const rules = definition.rules?.split('|') ?? [];
+
+        for (const rule of rules) {
+            if (rule !== 'required' && (value === null || value === undefined)) {
+                continue;
+            }
+
+            errors.push(...validate(value, rule));
+        }
+
+        return errors.length > 0 ? errors : null;
+    }
+
+    private getInitialData(fields: Fields): FormData<Fields> {
+        if (this.static().isConjuring()) {
+            return {} as FormData<Fields>;
+        }
+
+        const data = Object.entries(fields).reduce((initialData, [name, definition]) => {
+            initialData[name as keyof Fields] = (definition.default ?? null) as FormData<Fields>[keyof Fields];
+
+            return initialData;
+        }, {} as FormData<Fields>);
+
+        return reactive(data) as FormData<Fields>;
+    }
+
+    private getInitialErrors(fields: Fields): FormErrors<Fields> {
+        if (this.static().isConjuring()) {
+            return {} as FormErrors<Fields>;
+        }
+
+        const errors = Object.keys(fields).reduce((formErrors, name) => {
+            formErrors[name as keyof Fields] = null;
+
+            return formErrors;
+        }, {} as FormErrors<Fields>);
+
+        return reactive(errors) as FormErrors<Fields>;
+    }
+
+    private resetData(): void {
+        for (const [name, field] of Object.entries(this._fields)) {
+            this._data[name as keyof Fields] = (field.default ?? null) as FormData<Fields>[keyof Fields];
+        }
+    }
+
+    private resetErrors(errors?: Record<string, string[] | null>): void {
+        Object.keys(this._errors).forEach((key) => delete this._errors[key as keyof Fields]);
+
+        errors && Object.assign(this._errors, errors);
+    }
+
+}

package/src/forms/index.ts

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

package/src/forms/utils.ts

@@ -1,53 +1,84 @@
-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 requiredBooleanInput(
-    defaultValue?: boolean,
-): FormFieldDefinition<typeof FormFieldTypes.Boolean, 'required'> {
+export function dateInput(defaultValue?: Date, options: { rules?: string } = {}): FormFieldDefinition<'date'> {
     return {
         default: defaultValue,
-        type: FormFieldTypes.Boolean,
+        type: 'date',
+        rules: options.rules,
+    };
+}
+
+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 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,19 @@
+import { arrayFrom } from '@noeldemartin/utils';
+
+const builtInRules: Record<string, FormFieldValidator> = {
+    required: (value) => (value ? undefined : 'required'),
+};
+
+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 validate(value: unknown, rule: string): string[] {
+    const errors = validators[rule]?.(value);
+
+    return errors ? arrayFrom(errors) : [];
+}

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/{main.ts → index.ts}

@@ -1,9 +1,12 @@
 export * from './bootstrap';
 export * from './components';
+export * from './directives';
 export * from './errors';
 export * from './forms';
+export * from './jobs';
 export * from './lang';
 export * from './plugins';
 export * from './services';
+export * from './testing';
 export * from './ui';
 export * from './utils';