vira 32.0.0-beta.0 → 32.0.0

package/src/util/vira-form-fields.ts

@@ -1,195 +0,0 @@
-import {check} from '@augment-vir/assert';
-import {addSuffix, getObjectTypedValues, type PartialWithUndefined} from '@augment-vir/common';
-import {type FullDate, type Timezone} from 'date-vir';
-import {type HtmlInterpolation} from 'element-vir';
-import {type ViraIconSvg} from '../icons/icon-svg.js';
-import {type ViraSelectOption} from './vira-select-option.js';
-
-/**
- * Form field types for {@link ViraFormField}.
- *
- * @category Internal
- */
-export enum ViraFormFieldType {
-    Text = 'text',
-    /** Allows auto complete for _existing_ passwords used on this website (for login). */
-    ExistingPassword = 'existing-password',
-    /** Allows auto complete for _new_ passwords used on this website (for login). */
-    NewPassword = 'new-password',
-    /** Uses a password input without any attributes applied for auto complete hints. */
-    PlainPassword = 'plain-password',
-    Email = 'email',
-    Number = 'number',
-    Select = 'select',
-    Checkbox = 'checkbox',
-    TextArea = 'text-area',
-    Date = 'date',
-}
-
-/**
- * {@link ViraFormField} properties that are shared between all field types.
- *
- * @category Internal
- */
-export type CommonViraFormFields = {
-    label: string;
-} & PartialWithUndefined<{
-    /** Applies a test id to the form field element. */
-    testId: string;
-    /**
-     * When `true`, visually indicates the form field as required and affects form validation.
-     *
-     * @default false
-     */
-    isRequired: boolean;
-    /**
-     * When `true`, marks this form field element with error styling.
-     *
-     * @default false
-     */
-    hasError: boolean;
-    /**
-     * When `true`, hides this form field entirely.
-     *
-     * @default false
-     */
-    isHidden: boolean;
-    /**
-     * When `true`, continues showing the form field but prevents edits.
-     *
-     * @default false
-     */
-    isDisabled: boolean;
-}>;
-
-/**
- * An individual form field for {@link ViraFormFields}.
- *
- * @category Internal
- */
-export type ViraFormField =
-    | ({
-          type:
-              | ViraFormFieldType.Text
-              | ViraFormFieldType.ExistingPassword
-              | ViraFormFieldType.NewPassword
-              | ViraFormFieldType.PlainPassword
-              | ViraFormFieldType.Email;
-          value: string | undefined;
-      } & PartialWithUndefined<{
-          placeholder: string;
-          icon: ViraIconSvg;
-          isUsername: boolean;
-      }> &
-          CommonViraFormFields)
-    | ({
-          type: ViraFormFieldType.Select;
-          value: string | undefined;
-          options: ReadonlyArray<Readonly<ViraSelectOption>>;
-      } & PartialWithUndefined<{
-          placeholder: string;
-          icon: ViraIconSvg;
-      }> &
-          CommonViraFormFields)
-    | ({
-          type: ViraFormFieldType.Checkbox;
-          value: boolean | undefined;
-          /**
-           * Label for the checkbox. Unlike other field types, this accepts arbitrary HTML so the
-           * checkbox's label slot can be filled with rich content.
-           */
-          label: HtmlInterpolation;
-      } & PartialWithUndefined<{
-          /** The checkbox will be filled with a form selection color when it is checked. */
-          fillWhenChecked: boolean;
-          /** The checkbox will be filled with a form error color when it is unchecked. */
-          fillWhenUnchecked: boolean;
-      }> &
-          Omit<CommonViraFormFields, 'label'>)
-    | ({
-          type: ViraFormFieldType.Number;
-          value: number | undefined;
-      } & PartialWithUndefined<{
-          placeholder: string;
-          icon: ViraIconSvg;
-          min: number;
-          max: number;
-          step: number;
-      }> &
-          CommonViraFormFields)
-    | ({
-          type: ViraFormFieldType.TextArea;
-          value: string | undefined;
-      } & PartialWithUndefined<{
-          placeholder: string;
-          rows: number;
-          preventResize: boolean;
-      }> &
-          CommonViraFormFields)
-    | ({
-          type: ViraFormFieldType.Date;
-          value: FullDate | undefined;
-      } & PartialWithUndefined<{
-          /** Lower bound for selectable dates. Defaults to `1800-01-01` when omitted. */
-          min: FullDate;
-          /** Upper bound for selectable dates. Defaults to 10 years from now when omitted. */
-          max: FullDate;
-          /** Timezone used to interpret the selected date. Defaults to the user's timezone. */
-          timezone: Timezone;
-          /** Only show the date part of the selected date when in readonly mode. */
-          showDateOnly: boolean;
-          /** Only show the time part of the selected date when in readonly mode. */
-          showTimeOnly: boolean;
-      }> &
-          CommonViraFormFields);
-
-/**
- * A collection of form fields for `ViraForm`.
- *
- * @category Internal
- */
-export type ViraFormFields = Record<string, ViraFormField>;
-
-/**
- * Appends a `'*'` to a label if it exist sand if it is required.
- *
- * @category Internal
- */
-export function applyRequiredLabel(
-    label: string | undefined,
-    isRequired: boolean,
-): string | undefined {
-    if (label) {
-        if (isRequired) {
-            return addSuffix({
-                value: label,
-                suffix: '*',
-            });
-        } else {
-            return label;
-        }
-    } else {
-        return undefined;
-    }
-}
-
-/**
- * Checks if all the {@link ViraFormField} entries in a given {@link ViraFormFields} are valid through
- * the following checks:
- *
- * - Checks that required fields are provided (not `undefined`)
- * - Ignores hidden fields
- *
- * @category Internal
- */
-export function areFormFieldsValid(formFields: Readonly<ViraFormFields>) {
-    return getObjectTypedValues(formFields).every((formField) => {
-        if (formField.isHidden || !formField.isRequired) {
-            return true;
-        } else if (check.isString(formField.value)) {
-            return !!formField.value;
-        } else {
-            return formField.value != undefined;
-        }
-    });
-}

package/src/util/vira-theme-client.ts

@@ -1,140 +0,0 @@
-import {assert} from '@augment-vir/assert';
-import {type MaybePromise, type PartialWithUndefined} from '@augment-vir/common';
-import {LocalStorageClient} from '@electrovir/local-storage-client';
-import {defineShape, enumShape} from 'object-shape-tester';
-import {applyColorThemeViaStyleElement} from 'theme-vir/dist/color-theme/apply-color-theme.js';
-import {listenTo} from 'typed-event-target';
-import {viraTheme, viraThemeDarkOverride} from '../styles/vira-color-theme.js';
-
-/**
- * A user-facing selection of which theme to display. `Auto` follows the system color scheme; the
- * other values force a specific theme regardless of system preference.
- *
- * @category Internal
- */
-export enum ViraThemeSelection {
-    Light = 'light',
-    Dark = 'dark',
-    Auto = 'auto',
-}
-
-/**
- * Used by {@link ViraThemeClient} to apply themes. By default, vira themes will be applied (via
- * {@link defaultApplyThemeCallback}).
- *
- * @category Internal
- * @default `defaultApplyThemeCallback`
- */
-export type ApplyThemeCallback = (params: Readonly<{useDarkTheme: boolean}>) => MaybePromise<void>;
-
-/**
- * Default implementation of {@link ApplyThemeCallback}, which simply applies Vira themes.
- *
- * @category Internal
- */
-export const defaultApplyThemeCallback: ApplyThemeCallback = ({useDarkTheme}) => {
-    applyColorThemeViaStyleElement(viraTheme, useDarkTheme ? viraThemeDarkOverride : undefined);
-};
-
-/**
- * Constructor params for {@link ViraThemeClient}.
- *
- * @category Internal
- */
-export type ViraThemeClientParams = PartialWithUndefined<{
-    /**
-     * Called whenever the effective theme should change. If not provided, the default Vira themes
-     * will be used.
-     */
-    applyTheme: ApplyThemeCallback;
-    /**
-     * Override the LocalStorage store name used for theme persistence. Useful if a single page
-     * hosts multiple isolated theme clients.
-     *
-     * @default 'vira-theme'
-     */
-    storeName: string;
-}>;
-
-const darkSchemeMediaQuery = '(prefers-color-scheme: dark)';
-
-const themeStorageShapes = {
-    selectedTheme: defineShape({
-        theme: enumShape(ViraThemeSelection),
-    }),
-};
-
-/**
- * Tracks the user's {@link ViraThemeSelection} and bridges it to a consumer-supplied `applyTheme`
- * callback. Persists the selection in LocalStorage via an internal `LocalStorageClient`, and
- * listens for system color-scheme changes to re-apply the theme in auto mode without persisting.
- *
- * The initial theme is applied during construction.
- *
- * @category Util
- */
-export class ViraThemeClient {
-    /** The callback that will be called to apply a new theme. */
-    protected readonly applyThemeCallback: ApplyThemeCallback = defaultApplyThemeCallback;
-    /** Contains the user's last selected theme, saving and loading it to disk for persistence. */
-    protected readonly localStorageClient: LocalStorageClient<typeof themeStorageShapes>;
-    /** A callback to remove the global theme preference listener. */
-    protected readonly removeThemePreferenceListener = listenTo(
-        globalThis.matchMedia(darkSchemeMediaQuery),
-        'change',
-        (event) => {
-            assert.instanceOf(event, MediaQueryListEvent);
-
-            if (this.currentTheme === ViraThemeSelection.Auto) {
-                void this.applyThemeCallback({
-                    useDarkTheme: event.matches,
-                });
-            }
-        },
-    );
-
-    constructor(params: Readonly<ViraThemeClientParams> = {}) {
-        if (params.applyTheme) {
-            this.applyThemeCallback = params.applyTheme;
-        }
-        this.localStorageClient = new LocalStorageClient(themeStorageShapes, {
-            storeName: params.storeName || 'vira-theme',
-        });
-
-        this.applySelection(this.currentTheme);
-    }
-
-    /**
-     * The currently selected theme. If you use multiple clients to set the same theme, this might
-     * get out of sync.
-     */
-    public get currentTheme(): ViraThemeSelection {
-        return this.localStorageClient.get.selectedTheme()?.theme || ViraThemeSelection.Auto;
-    }
-
-    /** Set the selected theme. */
-    public setSelectedTheme(selection: ViraThemeSelection): void {
-        this.applySelection(selection);
-        this.localStorageClient.set.selectedTheme({
-            theme: selection,
-        });
-    }
-
-    /** Cleanup internal state and listeners. */
-    public destroy(): void {
-        this.removeThemePreferenceListener();
-        this.localStorageClient.destroy();
-    }
-
-    /** Apply the currently selected theme. */
-    protected applySelection(selection: ViraThemeSelection): void {
-        const useDarkTheme =
-            selection === ViraThemeSelection.Dark ||
-            (selection === ViraThemeSelection.Auto &&
-                globalThis.matchMedia(darkSchemeMediaQuery).matches);
-
-        void this.applyThemeCallback({
-            useDarkTheme,
-        });
-    }
-}