@m5kdev/web-ui 0.4.0 → 0.5.0

package/dist/src/modules/auth/components/OrganizationPreferences.d.ts

@@ -0,0 +1,19 @@
+import { type ReactElement } from "react";
+import type { z } from "zod";
+import type { UseBackendTRPC } from "../../../types";
+import { type ControlsFor, type PreferenceEditorLabels } from "./PreferencesEditor";
+type OrganizationPreferenceLabels = PreferenceEditorLabels & {
+    noActiveOrganization: string;
+    loadError: string;
+};
+export type OrganizationPreferencesTarget = "preferences" | "flags";
+export type OrganizationPreferencesProps<S extends z.ZodObject<z.ZodRawShape>> = {
+    useTRPC: UseBackendTRPC;
+    schema: S;
+    controls: ControlsFor<z.infer<S>>;
+    target?: OrganizationPreferencesTarget;
+    labels?: Partial<OrganizationPreferenceLabels>;
+    onInvalidateScopedQueries?: () => void | Promise<void>;
+};
+export declare function OrganizationPreferences<S extends z.ZodObject<z.ZodRawShape>>({ useTRPC, schema, controls, target, labels, onInvalidateScopedQueries, }: OrganizationPreferencesProps<S>): ReactElement;
+export {};

package/dist/src/modules/auth/components/OrganizationPreferences.js

@@ -0,0 +1,133 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Card, CardBody, CardHeader } from "@heroui/react";
+import { useSession } from "@m5kdev/frontend/modules/auth/hooks/useSession";
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+import { useCallback, useMemo } from "react";
+import { useTranslation } from "react-i18next";
+import { PreferencesEditor, } from "./PreferencesEditor";
+function OrganizationStateCard({ title, message }) {
+    return (_jsx("div", { className: "p-6", children: _jsxs(Card, { children: [_jsx(CardHeader, { className: "text-lg font-semibold", children: title }), _jsx(CardBody, { children: message })] }) }));
+}
+function getFlagValues(controls, flags) {
+    const activeFlags = new Set(flags);
+    return Object.fromEntries(Object.keys(controls).map((key) => [key, activeFlags.has(key)]));
+}
+function getFlagsFromValues(values) {
+    return Object.entries(values)
+        .filter(([, value]) => value === true)
+        .map(([key]) => key);
+}
+export function OrganizationPreferences({ useTRPC, schema, controls, target = "preferences", labels, onInvalidateScopedQueries, }) {
+    const { data: session, isLoading: isSessionLoading } = useSession();
+    const { t } = useTranslation("web-ui");
+    const trpc = useTRPC();
+    const queryClient = useQueryClient();
+    const activeOrganizationId = session?.session.activeOrganizationId ?? "";
+    const labelKeyPrefix = target === "flags" ? "web-ui:organization.flags" : "web-ui:organization.preferences";
+    const resolvedLabels = useMemo(() => ({
+        title: labels?.title ?? t(`${labelKeyPrefix}.title`),
+        submit: labels?.submit ?? t(`${labelKeyPrefix}.submit`),
+        updated: labels?.updated ?? t(`${labelKeyPrefix}.updated`),
+        updateError: labels?.updateError ?? t(`${labelKeyPrefix}.updateError`),
+        loading: labels?.loading ?? t(`${labelKeyPrefix}.loading`),
+        noActiveOrganization: labels?.noActiveOrganization ?? t(`${labelKeyPrefix}.noActive`),
+        loadError: labels?.loadError ?? t(`${labelKeyPrefix}.loadError`),
+    }), [labelKeyPrefix, labels, t]);
+    const preferencesQuery = useQuery({
+        ...trpc.auth.getOrganizationPreferences.queryOptions(),
+        enabled: target === "preferences" && Boolean(activeOrganizationId),
+    });
+    const flagsQuery = useQuery({
+        ...trpc.auth.getOrganizationFlags.queryOptions(),
+        enabled: target === "flags" && Boolean(activeOrganizationId),
+    });
+    const setPreferencesMutation = useMutation(trpc.auth.setOrganizationPreferences.mutationOptions());
+    const setFlagsMutation = useMutation(trpc.auth.setOrganizationFlags.mutationOptions());
+    const currentValues = useMemo(() => {
+        if (target === "flags") {
+            return getFlagValues(controls, flagsQuery.data ?? []);
+        }
+        return (preferencesQuery.data ?? {});
+    }, [controls, flagsQuery.data, preferencesQuery.data, target]);
+    const updateValues = useCallback((partialValues, options) => {
+        if (target === "flags") {
+            const nextValues = {
+                ...currentValues,
+                ...partialValues,
+            };
+            const nextFlags = getFlagsFromValues(nextValues);
+            if (!options.noOptimisticUpdate) {
+                queryClient.setQueryData(trpc.auth.getOrganizationFlags.queryKey(), nextFlags);
+            }
+            setFlagsMutation.mutate(nextFlags, {
+                onSuccess: async (result) => {
+                    queryClient.setQueryData(trpc.auth.getOrganizationFlags.queryKey(), result);
+                    if (activeOrganizationId) {
+                        await queryClient.invalidateQueries({
+                            queryKey: ["auth-organization-details", activeOrganizationId],
+                        });
+                    }
+                    await onInvalidateScopedQueries?.();
+                    options.onSuccess?.();
+                },
+                onError: async (error) => {
+                    if (!options.noOptimisticUpdate) {
+                        await queryClient.invalidateQueries({
+                            queryKey: trpc.auth.getOrganizationFlags.queryKey(),
+                        });
+                    }
+                    options.onError?.(error);
+                },
+            });
+            return;
+        }
+        const nextPreferences = {
+            ...(preferencesQuery.data ?? {}),
+            ...partialValues,
+        };
+        if (!options.noOptimisticUpdate) {
+            queryClient.setQueryData(trpc.auth.getOrganizationPreferences.queryKey(), nextPreferences);
+        }
+        setPreferencesMutation.mutate(nextPreferences, {
+            onSuccess: async (result) => {
+                queryClient.setQueryData(trpc.auth.getOrganizationPreferences.queryKey(), result);
+                if (activeOrganizationId) {
+                    await queryClient.invalidateQueries({
+                        queryKey: ["auth-organization-details", activeOrganizationId],
+                    });
+                }
+                await onInvalidateScopedQueries?.();
+                options.onSuccess?.();
+            },
+            onError: async (error) => {
+                if (!options.noOptimisticUpdate) {
+                    await queryClient.invalidateQueries({
+                        queryKey: trpc.auth.getOrganizationPreferences.queryKey(),
+                    });
+                }
+                options.onError?.(error);
+            },
+        });
+    }, [
+        activeOrganizationId,
+        currentValues,
+        onInvalidateScopedQueries,
+        preferencesQuery.data,
+        queryClient,
+        setFlagsMutation,
+        setPreferencesMutation,
+        target,
+        trpc.auth.getOrganizationFlags,
+        trpc.auth.getOrganizationPreferences,
+    ]);
+    const isLoading = isSessionLoading || (target === "flags" ? flagsQuery.isLoading : preferencesQuery.isLoading);
+    const isPending = target === "flags" ? setFlagsMutation.isPending : setPreferencesMutation.isPending;
+    const queryError = target === "flags" ? flagsQuery.error : preferencesQuery.error;
+    if (!isSessionLoading && !activeOrganizationId) {
+        return (_jsx(OrganizationStateCard, { title: resolvedLabels.title, message: resolvedLabels.noActiveOrganization }));
+    }
+    if (queryError) {
+        return (_jsx(OrganizationStateCard, { title: resolvedLabels.title, message: queryError instanceof Error ? queryError.message : resolvedLabels.loadError }));
+    }
+    return (_jsx(PreferencesEditor, { schema: schema, controls: controls, values: currentValues, isLoading: isLoading, isPending: isPending, labels: resolvedLabels, updateValues: updateValues }));
+}

package/dist/src/modules/auth/components/PreferencesEditor.d.ts

@@ -0,0 +1,38 @@
+import type { ReactElement } from "react";
+import type { z } from "zod";
+export type UpdatePreferencesOptions = {
+    noOptimisticUpdate?: boolean;
+    onSuccess?: () => void;
+    onError?: (error: unknown) => void;
+};
+export interface ControlDefinition {
+    label: string;
+    element: "switch" | "select" | "number";
+    options?: {
+        label: string;
+        value: string;
+    }[];
+    min?: number;
+    max?: number;
+    step?: number;
+}
+export type ControlsFor<Preferences> = {
+    [K in keyof Preferences]: ControlDefinition;
+};
+export type PreferenceEditorLabels = {
+    title: string;
+    submit: string;
+    updated: string;
+    updateError: string;
+    loading?: string;
+};
+export type PreferenceEditorProps<S extends z.ZodObject<z.ZodRawShape>> = {
+    schema: S;
+    controls: ControlsFor<z.infer<S>>;
+    values: Partial<z.infer<S>>;
+    isLoading: boolean;
+    isPending: boolean;
+    labels: PreferenceEditorLabels;
+    updateValues: (partialValues: Partial<z.infer<S>>, options: UpdatePreferencesOptions) => void;
+};
+export declare function PreferencesEditor<S extends z.ZodObject<z.ZodRawShape>>({ schema, controls, values, isLoading, isPending, labels, updateValues, }: PreferenceEditorProps<S>): ReactElement;

package/dist/src/modules/auth/components/PreferencesEditor.js

@@ -0,0 +1,61 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Button, Form, Input, Select, SelectItem, Switch } from "@heroui/react";
+import { toast } from "sonner";
+export function PreferencesEditor({ schema, controls, values, isLoading, isPending, labels, updateValues, }) {
+    function handleSubmit(event) {
+        event.preventDefault();
+        const formData = new FormData(event.currentTarget);
+        const keys = Object.keys(controls);
+        const raw = {};
+        for (const key of keys) {
+            const control = controls[key];
+            if (control.element === "switch") {
+                raw[String(key)] = formData.get(String(key)) != null;
+            }
+            if (control.element === "select") {
+                raw[String(key)] = formData.get(String(key));
+            }
+            if (control.element === "number") {
+                const value = formData.get(String(key));
+                raw[String(key)] = value == null || value === "" ? undefined : Number(value);
+            }
+        }
+        const result = schema.safeParse(raw);
+        if (result.success) {
+            updateValues(result.data, {
+                noOptimisticUpdate: true,
+                onSuccess: () => {
+                    toast.success(labels.updated);
+                },
+                onError: () => {
+                    toast.error(labels.updateError);
+                },
+            });
+        }
+        else {
+            // eslint-disable-next-line no-console
+            console.error(result.error);
+        }
+    }
+    const keys = Object.keys(controls);
+    const formKey = keys
+        .map((key) => `${String(key)}:${String(values[key])}`)
+        .join("|");
+    if (isLoading) {
+        return _jsx("div", { children: labels.loading ?? "Loading..." });
+    }
+    return (_jsxs(Form, { onSubmit: handleSubmit, className: "flex flex-col gap-4 p-6", children: [_jsx("h1", { className: "text-2xl font-bold", children: labels.title }), keys.map((key) => {
+                const control = controls[key];
+                const value = values[key];
+                switch (control.element) {
+                    case "switch":
+                        return (_jsx(Switch, { name: String(key), value: "on", defaultSelected: Boolean(value), children: control.label }, String(key)));
+                    case "select":
+                        return (_jsx(Select, { name: String(key), label: control.label, labelPlacement: "outside-top", defaultSelectedKeys: value == null || value === "" ? [] : [String(value)], children: (control.options ?? []).map((option) => (_jsx(SelectItem, { children: option.label }, option.value))) }, String(key)));
+                    case "number":
+                        return (_jsx(Input, { name: String(key), type: "number", label: control.label, labelPlacement: "outside-top", defaultValue: value == null ? "" : String(value), min: control.min, max: control.max, step: control.step }, String(key)));
+                    default:
+                        return _jsx("div", { children: "Invalid control" }, String(key));
+                }
+            }), _jsx(Button, { type: "submit", color: "success", isLoading: isPending, children: labels.submit })] }, formKey));
+}

package/dist/src/modules/auth/components/UserPreferences.d.ts

@@ -1,24 +1,7 @@
 import type { ReactElement } from "react";
 import type { z } from "zod";
-type UpdatePreferencesOptions = {
-    noOptimisticUpdate?: boolean;
-    onSuccess?: () => void;
-    onError?: (error: unknown) => void;
-};
-interface ControlDefinition {
-    label: string;
-    element: "switch" | "select" | "number";
-    options?: {
-        label: string;
-        value: string;
-    }[];
-    min?: number;
-    max?: number;
-    step?: number;
-}
-type ControlsFor<Preferences> = {
-    [K in keyof Preferences]: ControlDefinition;
-};
+import { type ControlsFor, type UpdatePreferencesOptions } from "./PreferencesEditor";
+export type { ControlDefinition, ControlsFor, PreferenceEditorLabels, UpdatePreferencesOptions, } from "./PreferencesEditor";
 export declare function UserPreferences<S extends z.ZodObject<z.ZodRawShape>>({ schema, controls, preferences, isLoading, isPending, updatePreferences, }: {
     schema: S;
     controls: ControlsFor<z.infer<S>>;
@@ -27,4 +10,3 @@ export declare function UserPreferences<S extends z.ZodObject<z.ZodRawShape>>({
     isPending: boolean;
     updatePreferences: (partialPreferences: Partial<z.infer<S>>, options: UpdatePreferencesOptions) => void;
 }): ReactElement;
-export {};

package/dist/src/modules/auth/components/UserPreferences.js

@@ -1,60 +1,14 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Button, Form, Input, Select, SelectItem, Switch } from "@heroui/react";
+import { jsx as _jsx } from "react/jsx-runtime";
 import { useTranslation } from "react-i18next";
-import { toast } from "sonner";
+import { PreferencesEditor, } from "./PreferencesEditor";
 export function UserPreferences({ schema, controls, preferences, isLoading, isPending, updatePreferences, }) {
     const { t } = useTranslation("web-ui");
-    function handleSubmit(event) {
-        event.preventDefault();
-        const formData = new FormData(event.currentTarget);
-        const keys = Object.keys(controls);
-        const raw = {};
-        for (const key of keys) {
-            const control = controls[key];
-            if (control.element === "switch") {
-                raw[String(key)] = formData.get(String(key)) != null;
-            }
-            if (control.element === "select") {
-                raw[String(key)] = formData.get(String(key));
-            }
-            if (control.element === "number") {
-                const value = formData.get(String(key));
-                raw[String(key)] = value == null || value === "" ? undefined : Number(value);
-            }
-        }
-        const result = schema.safeParse(raw);
-        if (result.success) {
-            updatePreferences(result.data, {
-                noOptimisticUpdate: true,
-                onSuccess: () => {
-                    toast.success("Preferences updated");
-                },
-                onError: () => {
-                    toast.error("Failed to update preferences");
-                },
-            });
-        }
-        else {
-            // eslint-disable-next-line no-console
-            console.error(result.error);
-        }
-    }
-    const keys = Object.keys(controls);
-    if (isLoading) {
-        // FIXME: Add a loading state
-        return _jsx("div", { children: "Loading..." });
-    }
-    return (_jsxs(Form, { onSubmit: handleSubmit, className: "p-6 flex flex-col gap-4", children: [_jsx("h1", { className: "text-2xl font-bold", children: t("web-ui:preferences.title") }), keys.map((key) => {
-                const control = controls[key];
-                switch (control.element) {
-                    case "switch":
-                        return (_jsx(Switch, { name: String(key), value: "on", defaultSelected: Boolean(preferences[key]), children: control.label }, String(key)));
-                    case "select":
-                        return (_jsx(Select, { name: String(key), label: control.label, labelPlacement: "outside-top", defaultSelectedKeys: [String(preferences[key])], children: (control.options ?? []).map((option) => (_jsx(SelectItem, { children: option.label }, option.value))) }, String(key)));
-                    case "number":
-                        return (_jsx(Input, { name: String(key), type: "number", label: control.label, labelPlacement: "outside-top", defaultValue: String(preferences[key] ?? ""), min: control.min, max: control.max, step: control.step }, String(key)));
-                    default:
-                        return _jsx("div", { children: "Invalid control" }, String(key));
-                }
-            }), _jsx(Button, { type: "submit", color: "success", isLoading: isPending, children: t("web-ui:preferences.submit") })] }));
+    const labels = {
+        title: t("web-ui:preferences.title"),
+        submit: t("web-ui:preferences.submit"),
+        updated: t("web-ui:preferences.updated"),
+        updateError: t("web-ui:preferences.updateError"),
+        loading: t("web-ui:preferences.loading"),
+    };
+    return (_jsx(PreferencesEditor, { schema: schema, controls: controls, values: preferences, isLoading: isLoading, isPending: isPending, labels: labels, updateValues: updatePreferences }));
 }

package/dist/translations/en/web-ui.json

@@ -74,6 +74,9 @@
   "auth.resetPassword.error": "Failed to reset password",
   "preferences.title": "Preferences",
   "preferences.submit": "Save",
+  "preferences.updated": "Preferences updated",
+  "preferences.updateError": "Failed to update preferences",
+  "preferences.loading": "Loading preferences...",
   "billing.beta.badge": "Beta",
   "billing.title": "Billing & Pricing",
   "billing.subtitle": "{{appName}} is currently free to use during the beta. We’re finalizing pricing for the production launch.",
@@ -136,6 +139,20 @@
   "organization.settings.updateSuccess": "Organization updated",
   "organization.settings.updateError": "Failed to update organization",
   "organization.settings.loadError": "Failed to load organization",
+  "organization.preferences.title": "Organization preferences",
+  "organization.preferences.submit": "Save preferences",
+  "organization.preferences.updated": "Organization preferences updated",
+  "organization.preferences.updateError": "Failed to update organization preferences",
+  "organization.preferences.noActive": "No active organization selected.",
+  "organization.preferences.loadError": "Failed to load organization preferences",
+  "organization.preferences.loading": "Loading organization preferences...",
+  "organization.flags.title": "Organization flags",
+  "organization.flags.submit": "Save flags",
+  "organization.flags.updated": "Organization flags updated",
+  "organization.flags.updateError": "Failed to update organization flags",
+  "organization.flags.noActive": "No active organization selected.",
+  "organization.flags.loadError": "Failed to load organization flags",
+  "organization.flags.loading": "Loading organization flags...",
   "organization.members.loadError": "Failed to load organization",
   "organization.members.title": "Organization members",
   "organization.members.noActive": "No active organization selected.",