@simplysm/solid 13.0.74 → 13.0.76

package/src/components/form-control/state-preset/StatePreset.tsx

@@ -5,12 +5,13 @@ import clsx from "clsx";
 import { IconDeviceFloppy, IconStar, IconX } from "@tabler/icons-solidjs";
 import { objClone, objEqual } from "@simplysm/core-common";
 import { useSyncConfig } from "../../../hooks/useSyncConfig";
-import { useNotification } from "../../feedback/notification/NotificationContext";
+import { useNotification } from "../../feedback/notification/NotificationProvider";
 import { Icon } from "../../display/Icon";
-import { textPlaceholder } from "../../../styles/tokens.styles";
-import { useI18n } from "../../../providers/i18n/I18nContext";
-import type { ComponentSize } from "../../../styles/tokens.styles";
-import { iconButtonBase } from "../../../styles/patterns.styles";
+import { bg, text } from "../../../styles/base.styles";
+import { type ComponentSize, gap, pad } from "../../../styles/control.styles";
+import { themeTokens } from "../../../styles/theme.styles";
+import { Button } from "../Button";
+import { useI18n } from "../../../providers/i18n/I18nProvider";
 
 // ── Types ──
 
@@ -22,7 +23,7 @@ interface StatePresetItem<TValue> {
 type StatePresetSize = ComponentSize;
 
 export interface StatePresetProps<TValue> {
-  presetKey: string;
+  storageKey: string;
   value: TValue;
   onValueChange: (value: TValue) => void;
   size?: StatePresetSize;
@@ -32,74 +33,36 @@ export interface StatePresetProps<TValue> {
 
 // ── Style constants ──
 
-const baseClass = clsx("inline-flex items-center gap-1.5", "flex-wrap");
-
-const chipClass = clsx(
-  "inline-flex items-center gap-1",
-  "rounded-full",
-  "bg-base-200 dark:bg-base-700",
-  "text-base-800 dark:text-base-200",
-  "cursor-default",
-);
-
-const chipDefaultClass = "px-3 py-1";
-
 const chipSizeClasses: Record<StatePresetSize, string> = {
-  xs: "px-1.5 py-0 text-sm",
-  sm: "px-2 py-0.5",
-  lg: "px-4 py-2",
-  xl: "px-5 py-3 text-lg",
+  default: pad.default,
+  xs: clsx(pad.xs, "text-sm"),
+  sm: pad.sm,
+  lg: pad.lg,
+  xl: clsx(pad.xl, "text-lg"),
 };
 
-const chipNameBtnClass = clsx("cursor-pointer", "hover:underline", "focus:outline-none");
-
-const iconBtnClass = twMerge(iconButtonBase, "rounded-full");
-
-const iconBtnDefaultClass = "p-0.5";
-
 const iconBtnSizeClasses: Record<StatePresetSize, string> = {
+  default: "p-0.5",
   xs: "p-0",
   sm: "p-0.5",
   lg: "p-1",
   xl: "p-1.5",
 };
 
-const starBtnClass = clsx(
-  "inline-flex items-center justify-center",
-  "rounded-full",
-  "cursor-pointer",
-  "transition-colors",
-  "focus:outline-none",
-  "text-warning-500",
-  "hover:bg-warning-100 dark:hover:bg-warning-900/40",
-);
-
-const starBtnDefaultClass = "p-1";
-
 const starBtnSizeClasses: Record<StatePresetSize, string> = {
+  default: "p-1",
   xs: "p-0",
   sm: "p-0.5",
   lg: "p-1.5",
   xl: "p-2",
 };
 
-const inputClass = clsx(
-  "rounded-full",
-  "bg-base-200 dark:bg-base-700",
-  "text-base-800 dark:text-base-200",
-  "border border-transparent",
-  "focus:ring-1 focus:ring-primary-400",
-  "focus:outline-none",
-  textPlaceholder,
-);
-
-const inputDefaultClass = "px-3 py-1 w-24";
-
 const inputSizeClasses: Record<StatePresetSize, string> = {
-  xs: clsx("w-16 px-1 py-0 text-sm"),
-  sm: "px-2 py-0.5 w-20",
-  lg: "px-4 py-2 w-32",
-  xl: "px-5 py-3 w-36 text-lg",
+  default: clsx(pad.default, "w-24"),
+  xs: clsx("w-16", pad.xs, "text-sm"),
+  sm: clsx(pad.sm, "w-20"),
+  lg: clsx(pad.lg, "w-32"),
+  xl: clsx(pad.xl, "w-36 text-lg"),
 };
 
 const iconSize = "0.85em";
@@ -108,7 +71,7 @@ const iconSize = "0.85em";
 
 function StatePresetInner<TValue>(props: StatePresetProps<TValue>): JSX.Element {
   const [local] = splitProps(props, [
-    "presetKey",
+    "storageKey",
     "value",
     "onValueChange",
     "size",
@@ -119,13 +82,11 @@ function StatePresetInner<TValue>(props: StatePresetProps<TValue>): JSX.Element
   const notification = useNotification();
   const i18n = useI18n();
 
-  // presetKey is an identifier set only once at mount, evaluate immediately to capture
-  /* eslint-disable solid/reactivity */
+  // storageKey is an identifier set only once at mount, evaluate immediately to capture
   const [presets, setPresets] = useSyncConfig<StatePresetItem<TValue>[]>(
-    `state-preset.${local.presetKey}`,
+    `state-preset.${local.storageKey}`,
     [],
   );
-  /* eslint-enable solid/reactivity */
   const [adding, setAdding] = createSignal(false);
   const [inputValue, setInputValue] = createSignal("");
 
@@ -149,7 +110,10 @@ function StatePresetInner<TValue>(props: StatePresetProps<TValue>): JSX.Element
     }
 
     if (presets().some((p) => p.name === name)) {
-      notification.warning(i18n.t("statePreset.duplicateName"), i18n.t("statePreset.duplicateMessage"));
+      notification.warning(
+        i18n.t("statePreset.duplicateName"),
+        i18n.t("statePreset.duplicateMessage"),
+      );
       return;
     }
 
@@ -200,15 +164,19 @@ function StatePresetInner<TValue>(props: StatePresetProps<TValue>): JSX.Element
     const updated = snapshot.filter((_, i) => i !== index);
     setPresets(updated);
 
-    const notiId = notification.info(i18n.t("statePreset.deleted"), i18n.t("statePreset.deletedMessage", { name: presetName }), {
-      action: {
-        label: i18n.t("statePreset.undo"),
-        onClick: () => {
-          setPresets(snapshot);
-          notification.remove(notiId);
+    const notiId = notification.info(
+      i18n.t("statePreset.deleted"),
+      i18n.t("statePreset.deletedMessage", { name: presetName }),
+      {
+        action: {
+          label: i18n.t("statePreset.undo"),
+          onClick: () => {
+            setPresets(snapshot);
+            notification.remove(notiId);
+          },
         },
       },
-    });
+    );
   }
 
   function handleInputKeyDown(e: KeyboardEvent): void {
@@ -223,19 +191,26 @@ function StatePresetInner<TValue>(props: StatePresetProps<TValue>): JSX.Element
 
   // ── Render ──
 
-  const containerClass = () => twMerge(baseClass, local.class);
+  const containerClass = () => twMerge(clsx("inline-flex items-center", gap.lg, "flex-wrap"), local.class);
 
-  const resolvedChipClass = () =>
-    twMerge(chipClass, local.size ? chipSizeClasses[local.size] : chipDefaultClass);
+  const resolvedChipClass = () => twMerge(
+    clsx("inline-flex items-center", gap.default, "rounded-full", bg.subtle, text.default, "cursor-default"),
+    chipSizeClasses[local.size ?? "default"],
+  );
 
   const resolvedIconBtnClass = () =>
-    twMerge(iconBtnClass, local.size ? iconBtnSizeClasses[local.size] : iconBtnDefaultClass);
+    twMerge("rounded-full", iconBtnSizeClasses[local.size ?? "default"]);
 
   const resolvedStarBtnClass = () =>
-    twMerge(starBtnClass, local.size ? starBtnSizeClasses[local.size] : starBtnDefaultClass);
+    twMerge(
+      clsx("inline-flex cursor-pointer items-center justify-center rounded-full text-warning-500 transition-colors focus:outline-none", themeTokens.warning.hoverBg),
+      starBtnSizeClasses[local.size ?? "default"],
+    );
 
-  const resolvedInputClass = () =>
-    twMerge(inputClass, local.size ? inputSizeClasses[local.size] : inputDefaultClass);
+  const resolvedInputClass = () => twMerge(
+    clsx("rounded-full", bg.subtle, text.default, "border border-transparent focus:outline-none focus:ring-1 focus:ring-primary-400", text.placeholder),
+    inputSizeClasses[local.size ?? "default"],
+  );
 
   return (
     <div class={containerClass()} style={local.style}>
@@ -255,28 +230,30 @@ function StatePresetInner<TValue>(props: StatePresetProps<TValue>): JSX.Element
           <span class={resolvedChipClass()}>
             <button
               type="button"
-              class={chipNameBtnClass}
+              class="cursor-pointer hover:underline focus:outline-none"
               onClick={() => handleRestore(preset)}
               title={preset.name}
             >
               {preset.name}
             </button>
-            <button
-              type="button"
+            <Button
+              variant="ghost"
+              size="xs"
               class={resolvedIconBtnClass()}
               onClick={() => handleOverwrite(index())}
               title={i18n.t("statePreset.overwrite")}
             >
               <Icon icon={IconDeviceFloppy} size={iconSize} />
-            </button>
-            <button
-              type="button"
+            </Button>
+            <Button
+              variant="ghost"
+              size="xs"
               class={resolvedIconBtnClass()}
               onClick={() => handleDelete(index())}
               title={i18n.t("statePreset.deletePreset")}
             >
               <Icon icon={IconX} size={iconSize} />
-            </button>
+            </Button>
           </span>
         )}
       </For>

package/src/components/layout/FormGroup.tsx

@@ -19,16 +19,11 @@ export interface FormGroupItemProps extends JSX.HTMLAttributes<HTMLDivElement> {
 
 const FormGroupContext = createContext<{ inline: boolean }>({ inline: false });
 
-const baseClass = clsx("inline-flex flex-col gap-2");
-const inlineClass = clsx("inline-flex flex-row flex-wrap items-center gap-2");
-
-const itemInlineClass = clsx("flex flex-row items-center");
-
 const FormGroupItem: ParentComponent<FormGroupItemProps> = (props) => {
   const [local, rest] = splitProps(props, ["children", "class", "label"]);
   const ctx = useContext(FormGroupContext);
 
-  const getClassName = () => twMerge(ctx.inline ? itemInlineClass : undefined, local.class);
+  const getClassName = () => twMerge(ctx.inline ? "flex flex-row items-center" : undefined, local.class);
 
   return (
     <div class={getClassName()} data-form-group-item {...rest}>
@@ -44,14 +39,13 @@ const FormGroupItem: ParentComponent<FormGroupItemProps> = (props) => {
   );
 };
 
-interface FormGroupComponent extends ParentComponent<FormGroupProps> {
-  Item: typeof FormGroupItem;
-}
-
 const FormGroupBase: ParentComponent<FormGroupProps> = (props) => {
   const [local, rest] = splitProps(props, ["children", "class", "inline"]);
 
-  const getClassName = () => twMerge(local.inline ? inlineClass : baseClass, local.class);
+  const getClassName = () => twMerge(
+    local.inline ? "inline-flex flex-row flex-wrap items-center gap-2" : "inline-flex flex-col gap-2",
+    local.class,
+  );
 
   return (
     <FormGroupContext.Provider
@@ -68,5 +62,8 @@ const FormGroupBase: ParentComponent<FormGroupProps> = (props) => {
   );
 };
 
-export const FormGroup = FormGroupBase as FormGroupComponent;
-FormGroup.Item = FormGroupItem;
+//#region Export
+export const FormGroup = Object.assign(FormGroupBase, {
+  Item: FormGroupItem,
+});
+//#endregion

package/src/components/layout/FormTable.tsx

@@ -1,29 +1,50 @@
-import { type JSX, type ParentComponent, splitProps } from "solid-js";
-import clsx from "clsx";
+import { type JSX, type ParentComponent, Show, splitProps } from "solid-js";
 import { twMerge } from "tailwind-merge";
 
 export interface FormTableProps extends JSX.HTMLAttributes<HTMLTableElement> {}
 
-const baseClass = clsx(
-  "border-separate border-spacing-0 border-0",
-  // All cells: vertical center, right/bottom padding
-  "[&_td]:align-middle [&_th]:align-middle",
-  "[&_td]:pr-1.5 [&_th]:pr-1.5",
-  "[&_td]:pb-1 [&_th]:pb-1",
-  // Last cell in row: remove right padding
-  "[&_tr>*:last-child]:pr-0",
-  // Cells in last row: remove bottom padding
-  "[&_tr:last-child>*]:pb-0",
-  // th: right align, content width, prevent wrapping
-  "[&_th]:w-0 [&_th]:whitespace-nowrap [&_th]:pl-1 [&_th]:text-right",
-);
-
-export const FormTable: ParentComponent<FormTableProps> = (props) => {
+export interface FormTableItemProps extends JSX.TdHTMLAttributes<HTMLTableCellElement> {
+  label?: JSX.Element;
+}
+
+// -- Sub-components --
+
+const FormTableRow: ParentComponent<JSX.HTMLAttributes<HTMLTableRowElement>> = (props) => {
   const [local, rest] = splitProps(props, ["children", "class"]);
+  return <tr class={twMerge("[&>*:last-child]:pr-0 last:[&>*]:pb-0", local.class)} {...rest}>{local.children}</tr>;
+};
+
+const FormTableItem: ParentComponent<FormTableItemProps> = (props) => {
+  const [local, rest] = splitProps(props, ["children", "class", "label", "colspan"]);
+
+  const effectiveColspan = () => {
+    const base = local.colspan != null ? Number(local.colspan) : undefined;
+    if (local.label != null) return base;
+    return (base ?? 1) + 1;
+  };
 
   return (
-    <table data-form-table class={twMerge(baseClass, local.class)} {...rest}>
-      {local.children}
+    <>
+      <Show when={local.label}>
+        <th class="w-0 whitespace-nowrap pb-1 pl-1 pr-1.5 text-right align-middle">{local.label}</th>
+      </Show>
+      <td class={twMerge("pb-1 pr-1.5 align-middle", local.class)} colspan={effectiveColspan()} {...rest}>
+        {local.children}
+      </td>
+    </>
+  );
+};
+
+// -- Main component --
+
+const FormTableBase: ParentComponent<FormTableProps> = (props) => {
+  const [local, rest] = splitProps(props, ["children", "class"]);
+
+  return (
+    <table data-form-table class={twMerge("border-separate border-spacing-0 border-0", local.class)} {...rest}>
+      <tbody>{local.children}</tbody>
     </table>
   );
 };
+
+export const FormTable = Object.assign(FormTableBase, { Row: FormTableRow, Item: FormTableItem });