@timeax/form-palette 0.0.1

package/src/presets/shadcn-variants/color.tsx

@@ -0,0 +1,284 @@
+// src/presets/shadcn-variants/color.tsx
+
+import * as React from "react";
+
+import type { VariantModule } from "@/schema/variant";
+import type { VariantBaseProps, ChangeDetail } from "@/variants/shared";
+import type { ShadcnTextVariantProps } from "@/presets/shadcn-variants/text";
+import { Input } from "@/presets/ui/input";
+import { cn } from "@/lib/utils";
+import { Palette } from "lucide-react";
+
+type BaseProps = VariantBaseProps<string | undefined>;
+
+/**
+ * Extra options specific to the color variant.
+ */
+export interface ColorSpecificProps {
+   /**
+    * If false, we hide the colour preview box.
+    * Default: true
+    */
+   showPreview?: boolean;
+
+   /**
+    * If false, we hide the picker toggle control/icon.
+    * Default: true
+    */
+   showPickerToggle?: boolean;
+
+   /**
+    * Size of the colour swatch in pixels.
+    * Default: 18
+    */
+   previewSize?: number;
+
+   /**
+    * Optional className for the outer wrapper that hosts
+    * the Input + hidden color input.
+    */
+   wrapperClassName?: string;
+
+   /**
+    * Optional className for the preview button itself (around the swatch).
+    */
+   previewButtonClassName?: string;
+
+   /**
+    * Optional className for the swatch box inside the preview button.
+    */
+   previewSwatchClassName?: string;
+
+   /**
+    * Optional className for the hidden `<input type="color">`.
+    *
+    * By default this input is visually hidden and only used
+    * to invoke the browser/OS colour picker, but you can override
+    * this class to make it visible and style it.
+    */
+   pickerInputClassName?: string;
+
+   /**
+    * Custom icon shown in the trailing control as the picker toggle.
+    * If omitted, a tiny ▾ triangle is used.
+    */
+   pickerToggleIcon?: React.ReactNode;
+
+   className?: string;
+}
+
+/**
+ * We inherit the *visual/behavioural* props from ShadcnTextVariant,
+ * but control value / onValue / type / inputMode / leadingControl / trailingControl ourselves.
+ */
+type TextUiProps = Omit<
+   ShadcnTextVariantProps,
+   "type" | "inputMode" | "leadingControl" | "trailingControl" | "value" | "onValue"
+>;
+
+/**
+ * Full props for the color variant as seen by the form runtime.
+ */
+export type ShadcnColorVariantProps = TextUiProps &
+   ColorSpecificProps &
+   Pick<BaseProps, "value" | "onValue">;
+
+function normalizeColorForPicker(value: string | undefined): string {
+   // Very light sanity: accept #rgb or #rrggbb; otherwise fall back.
+   if (typeof value === "string" && /^#([0-9a-fA-F]{3}|[0-9a-fA-F]{6})$/.test(value)) {
+      return value;
+   }
+   return "#000000";
+}
+
+export const ShadcnColorVariant = React.forwardRef<
+   HTMLInputElement,
+   ShadcnColorVariantProps
+>(function ShadcnColorVariant(props, ref) {
+   const {
+      // variant contract
+      value,
+      onValue,
+
+      // colour-specific
+      showPreview = true,
+      showPickerToggle = true,
+      previewSize = 18,
+      wrapperClassName,
+      previewButtonClassName,
+      previewSwatchClassName,
+      pickerInputClassName,
+      pickerToggleIcon,
+
+      // from text variant UI
+      error,
+      joinControls = true,
+      extendBoxToControls = true,
+
+      // everything else → Input (size, density, className, icons, etc.)
+      ...restTextProps
+   } = props;
+
+   const [local, setLocal] = React.useState<string>(value ?? "");
+   const [pickerOpen, setPickerOpen] = React.useState(false);
+
+   React.useEffect(() => {
+      setLocal(value ?? "");
+   }, [value]);
+
+   const pickerRef = React.useRef<HTMLInputElement | null>(null);
+
+   const effectiveColor = normalizeColorForPicker(local || value);
+   const showError = Boolean(error);
+
+   const openSystemPicker = React.useCallback(() => {
+      setPickerOpen(true);
+      // Small timeout so state flushes before click; not strictly required but safe.
+      window.setTimeout(() => {
+         pickerRef.current?.click();
+      }, 0);
+   }, []);
+
+   const handleTextChange = React.useCallback(
+      (event: React.ChangeEvent<HTMLInputElement>) => {
+         const next = event.target.value ?? "";
+         setLocal(next);
+
+         if (onValue) {
+            const detail: ChangeDetail<{ source: "input" }> = {
+               source: "variant",
+               raw: next,
+               nativeEvent: event,
+               meta: { source: "input" },
+            };
+            onValue(next || undefined, detail);
+         }
+      },
+      [onValue]
+   );
+
+   const handlePickerChange = React.useCallback(
+      (event: React.ChangeEvent<HTMLInputElement>) => {
+         const next = event.target.value ?? "";
+         setLocal(next);
+
+         if (onValue) {
+            const detail: ChangeDetail<{ source: "picker" }> = {
+               source: "variant",
+               raw: next,
+               nativeEvent: event,
+               meta: { source: "picker" },
+            };
+            onValue(next || undefined, detail);
+         }
+
+         // Once the user picks a colour, the OS picker closes.
+         setPickerOpen(false);
+      },
+      [onValue]
+   );
+
+   const handlePickerBlur = React.useCallback(() => {
+      // If the user cancels the picker, blur fires and we can clear state.
+      setPickerOpen(false);
+   }, []);
+
+   // ———————————————————————————————
+   // Leading control: colour preview
+   // ———————————————————————————————
+
+   const leadingControl = showPreview ? (
+      <button
+         type="button"
+         onClick={openSystemPicker}
+         className={cn(
+            "flex h-full items-center px-3 border-r border-border/50",
+            "hover:bg-muted/50 transition-colors focus-visible:outline-none focus-visible:bg-muted/50",
+            previewButtonClassName
+         )}
+         tabIndex={-1}
+         aria-label="Open colour picker"
+      >
+         <span
+            className={cn(
+               "inline-flex rounded-sm shadow-sm ring-1 ring-inset ring-foreground/10",
+               previewSwatchClassName
+            )}
+            style={{
+               width: previewSize,
+               height: previewSize,
+               backgroundColor: effectiveColor,
+            }}
+         />
+      </button>
+   ) : undefined;
+
+   // ———————————————————————————————
+   // Trailing control: picker toggle icon
+   // ———————————————————————————————
+
+   const toggleNode =
+      pickerToggleIcon !== undefined ? (
+         pickerToggleIcon
+      ) : (
+         // Swapped the text caret for a Lucide Palette icon
+         <Palette className="h-4 w-4 opacity-50" />
+      );
+
+   const trailingControl = showPickerToggle ? (
+      <button
+         type="button"
+         onClick={openSystemPicker}
+         className="flex h-full items-center px-3 text-muted-foreground hover:text-foreground transition-colors"
+         tabIndex={-1}
+         aria-label={pickerOpen ? "Close colour picker" : "Open colour picker"}
+         data-open={pickerOpen ? "true" : "false"}
+      >
+         {toggleNode}
+      </button>
+   ) : undefined;
+
+   // ———————————————————————————————
+   // Render
+   // ———————————————————————————————
+
+   return (
+      <div className={cn("relative group/color", wrapperClassName)}>
+         <Input
+            ref={ref}
+            {...restTextProps}
+            type="text"
+            value={local}
+            onChange={handleTextChange}
+            leadingControl={leadingControl}
+            trailingControl={trailingControl}
+            joinControls={joinControls}
+            extendBoxToControls={extendBoxToControls}
+            aria-invalid={showError ? "true" : undefined}
+            // Added mono font and uppercase for cleaner hex code display
+            className={cn("font-mono uppercase", restTextProps.className)}
+            maxLength={9}
+         />
+
+         {/* Native color input – used to show the real browser/OS picker.
+                By default it's visually hidden; override pickerInputClassName
+                if you ever want to show/style it directly. */}
+         <input
+            ref={pickerRef}
+            type="color"
+            // hidden
+            className={cn(
+               "absolute h-0 w-0 opacity-0 pointer-events-none",
+               pickerInputClassName
+            )}
+            value={effectiveColor}
+            onChange={handlePickerChange}
+            onBlur={handlePickerBlur}
+            tabIndex={-1}
+            aria-hidden="true"
+         />
+      </div>
+   );
+});
+
+ShadcnColorVariant.displayName = "ShadcnColorVariant";

package/src/presets/shadcn-variants/custom.tsx

@@ -0,0 +1,227 @@
+// src/presets/shadcn-variants/custom.tsx
+
+import * as React from "react";
+import type { VariantBaseProps, ChangeDetail } from "@/variants/shared";
+
+/**
+ * Props for the generic "custom" variant.
+ *
+ * - The only special props we define are:
+ *   - component: the React component to render
+ *   - valueProp / changeProp / disabledProp / readOnlyProp / errorProp
+ *   - idProp / nameProp / placeholderProp
+ *   - mapValue / mapDetail (optional hooks)
+ *
+ * - All other props are treated as "component props" and forwarded
+ *   directly to the underlying component.
+ *
+ * The underlying component is expected to:
+ *   - accept the mapped `valueProp`
+ *   - call the mapped `changeProp` with the next value (first argument)
+ *   - optionally use disabled/readOnly/error/id/name/placeholder via the mapped names
+ */
+export interface ShadcnCustomVariantProps<TValue = unknown>
+   extends VariantBaseProps<TValue> {
+   /**
+    * The actual React component to render.
+    *
+    * Example:
+    *   component={MyToggle}
+    */
+   component: React.ComponentType<any>;
+
+   /**
+    * Prop name that carries the current value for the component.
+    * Default: "value".
+    */
+   valueProp?: string;
+
+   /**
+    * Prop name for the change handler that the component will call.
+    * Default: "onChange".
+    *
+    * The component is expected to call:
+    *   props[changeProp](nextValue, ...otherArgs?)
+    *
+    * The first argument is taken as the new value.
+    */
+   changeProp?: string;
+
+   /**
+    * Prop name for disabled state.
+    * Default: "disabled".
+    */
+   disabledProp?: string;
+
+   /**
+    * Prop name for read-only state.
+    * Default: "readOnly".
+    */
+   readOnlyProp?: string;
+
+   /**
+    * Prop name for passing error to the component (if it cares).
+    * If provided, we pass the `error` field as-is.
+    * Example values: "error", "isInvalid", "status".
+    */
+   errorProp?: string;
+
+   /**
+    * Prop name for the id attribute.
+    * Default: "id".
+    */
+   idProp?: string;
+
+   /**
+    * Prop name for the name attribute.
+    * Default: "name".
+    */
+   nameProp?: string;
+
+   /**
+    * Prop name for the placeholder attribute.
+    * Default: "placeholder".
+    */
+   placeholderProp?: string;
+
+   /**
+    * Optional transform for the raw next value before it hits the field.
+    *
+    * Receives the first argument that the component passes to the change
+    * handler, plus the full argument list for flexibility.
+    */
+   mapValue?: (raw: any, ...args: any[]) => TValue;
+
+   /**
+    * Optional builder for ChangeDetail, given the raw next value.
+    *
+    * If omitted, a default { source: "variant", raw } detail is used.
+    */
+   mapDetail?: (raw: any, ...args: any[]) => ChangeDetail;
+
+   /**
+    * Any other props are assumed to belong to the custom component.
+    */
+   [key: string]: unknown;
+}
+
+export const ShadcnCustomVariant = React.forwardRef<
+   any,
+   ShadcnCustomVariantProps<any>
+>(function ShadcnCustomVariant(props, ref) {
+   const {
+      // Variant base props we care about:
+      value,
+      onValue,
+      error,
+      disabled,
+      readOnly,
+      id,
+      name,
+      placeholder,
+
+      // Mapping props:
+      component: Component,
+      valueProp = "value",
+      changeProp = "onChange",
+      disabledProp = "disabled",
+      readOnlyProp = "readOnly",
+      errorProp,
+      idProp = "id",
+      nameProp = "name",
+      placeholderProp = "placeholder",
+
+      mapValue,
+      mapDetail,
+
+      // Everything else goes straight to the component:
+      ...rest
+   } = props as ShadcnCustomVariantProps<any>;
+
+   // If there is no component, bail out (dev-time safety).
+   if (!Component) {
+      if (process.env.NODE_ENV !== "production") {
+         // eslint-disable-next-line no-console
+         console.warn(
+            "[form-palette] ShadcnCustomVariant: `component` prop is required.",
+         );
+      }
+      return null;
+   }
+
+   const isDisabled = !!disabled;
+   const isReadOnly = !!readOnly;
+
+   /**
+    * Bridge from the component's change callback to the variant contract.
+    *
+    * We assume the custom component calls the mapped change prop
+    * with the **next value as its first argument**:
+    *
+    *   props[changeProp](nextValue, ...rest)
+    */
+   const handleChange = React.useCallback(
+      (...args: any[]) => {
+         if (!onValue) return;
+         if (isDisabled || isReadOnly) return;
+
+         const raw = args[0];
+
+         const next = mapValue
+            ? mapValue(raw, ...args)
+            : (raw as any);
+
+         const detail: ChangeDetail =
+            mapDetail?.(raw, ...args) ?? {
+               source: "variant",
+               raw,
+               nativeEvent: undefined,
+               meta: undefined,
+            };
+
+         (onValue as any)(next, detail);
+      },
+      [onValue, isDisabled, isReadOnly, mapValue, mapDetail],
+   );
+
+   // Build the props for the custom component.
+   const innerProps: Record<string, unknown> = {
+      ...rest, // ← all non-special props from InputField go directly to the component
+   };
+
+   // Map value → component[valueProp]
+   innerProps[valueProp] = value;
+
+   // Map handler → component[changeProp]
+   innerProps[changeProp] = handleChange;
+
+   // Map disabled / readOnly
+   if (disabledProp) {
+      innerProps[disabledProp] = isDisabled;
+   }
+   if (readOnlyProp) {
+      innerProps[readOnlyProp] = isReadOnly;
+   }
+
+   // Map error if a mapping key is provided
+   if (errorProp && error !== undefined) {
+      innerProps[errorProp] = error;
+   }
+
+   // Map id/name/placeholder if present
+   if (id !== undefined && idProp) {
+      innerProps[idProp] = id;
+   }
+   if (name !== undefined && nameProp) {
+      innerProps[nameProp] = name;
+   }
+   if (placeholder !== undefined && placeholderProp) {
+      innerProps[placeholderProp] = placeholder;
+   }
+
+   return <Component ref={ref} {...innerProps} />;
+});
+
+ShadcnCustomVariant.displayName = "ShadcnCustomVariant";
+
+export default ShadcnCustomVariant;