@timeax/form-palette 0.0.3 → 0.0.5

package/src/variants/helpers/selection-summary.tsx

@@ -1,236 +0,0 @@
-import * as React from "react";
-import { X } from "lucide-react";
-import { cn } from "@/lib/utils";
-import {
-   Popover,
-   PopoverTrigger,
-   PopoverContent,
-} from "@/presets/ui/popover";
-
-type NormalizedMultiItem = {
-   key: string;
-   value: string | number;
-   labelNode: React.ReactNode;
-   labelText: string; // Used for width calculation
-   disabled?: boolean;
-};
-
-export interface SelectionSummaryProps {
-   selectedItems: NormalizedMultiItem[];
-   placeholder?: React.ReactNode;
-   onRemoveValue?: (value: NormalizedMultiItem) => void;
-}
-
-/**
- * Helper: Measure text width using a canvas.
- * Much faster than rendering hidden DOM elements.
- */
-function getTextWidth(text: string, font: string) {
-   if (typeof window === "undefined") return 0;
-   const canvas =
-      (window as any).__canvas ||
-      ((window as any).__canvas = document.createElement("canvas"));
-   const context = canvas.getContext("2d");
-   context.font = font;
-   const metrics = context.measureText(text);
-   return metrics.width;
-}
-
-export const SelectionSummary: React.FC<SelectionSummaryProps> = ({
-   selectedItems,
-   placeholder,
-   onRemoveValue,
-}) => {
-   const containerRef = React.useRef<HTMLSpanElement | null>(null);
-   const [visibleCount, setVisibleCount] = React.useState(0);
-   const [moreOpen, setMoreOpen] = React.useState(false);
-
-   // Measure available width and calculate how many items fit
-   React.useLayoutEffect(() => {
-      const el = containerRef.current;
-      if (!el) return;
-
-      const computeVisibleItems = () => {
-         const containerWidth = el.clientWidth;
-
-         // 1. Get current font styles to ensure accurate measurement
-         const computedStyle = window.getComputedStyle(el);
-         const font = `${computedStyle.fontWeight} ${computedStyle.fontSize} ${computedStyle.fontFamily}`;
-
-         // 2. Calculate the "Buffer" (12 characters width)
-         // This is the space reserved for the "+ N more" trigger if truncation happens.
-         // We use 'M' or '0' as an average widest character approximation, or a standard string.
-         const bufferWidth = getTextWidth("000000000000", font);
-
-         // 3. Width of the separator (e.g., ", ")
-         const commaWidth = getTextWidth(", ", font);
-
-         let usedWidth = 0;
-         let count = 0;
-         const totalItems = selectedItems.length;
-
-         for (let i = 0; i < totalItems; i++) {
-            const item = selectedItems[i];
-            const itemWidth = getTextWidth(item.labelText, font);
-
-            // Is this the very last item in the entire list?
-            const isLastItem = i === totalItems - 1;
-
-            // If it's the last item, we don't need the buffer space.
-            // If it's NOT the last item, we must ensure we have space for this item AND the buffer.
-            // (Because if we can't fit the *next* item, we'll need the buffer to show the badge).
-            const spaceNeeded = isLastItem
-               ? itemWidth
-               : itemWidth + commaWidth + bufferWidth;
-
-            if (usedWidth + spaceNeeded <= containerWidth) {
-               usedWidth += itemWidth + commaWidth;
-               count++;
-            } else {
-               // No more space
-               break;
-            }
-         }
-
-         // Ensure we show at least 1 item if there are items, 
-         // unless even the first item is wider than the container (then CSS truncation handles it).
-         setVisibleCount(Math.max(1, count));
-      };
-
-      computeVisibleItems();
-
-      const ro = new ResizeObserver(computeVisibleItems);
-      ro.observe(el);
-      return () => ro.disconnect();
-   }, [selectedItems, selectedItems.length]); // Re-run if items change
-
-   const totalCount = selectedItems.length;
-
-   if (!totalCount) {
-      return (
-         <span ref={containerRef} className="truncate text-muted-foreground w-full block">
-            {placeholder ?? "Select options…"}
-         </span>
-      );
-   }
-
-   const visibleItems = selectedItems.slice(0, visibleCount);
-   // If visible count covers everything, overflow is 0
-   const overflowCount = totalCount - visibleItems.length;
-
-   // Safety check: if our calculation says we can show X, but X < Total, 
-   // strictly ensure we render the "More" chip.
-   // If calculation resulted in showing all items, overflow is 0.
-   const showMore = overflowCount > 0;
-
-   const handleRemove = (value: NormalizedMultiItem) => {
-      if (!onRemoveValue) return;
-      onRemoveValue(value);
-   };
-
-   return (
-      <span
-         ref={containerRef}
-         className="flex items-center w-full overflow-hidden whitespace-nowrap"
-      >
-         {/* Render Visible Items */}
-         {visibleItems.map((item, index) => (
-            <React.Fragment key={item.key}>
-               <span className="truncate flex-shrink-0">
-                  {item.labelNode}
-               </span>
-               {/* Add comma if it's not the last visible item */}
-               {index < visibleItems.length - 1 && (
-                  <span className="text-muted-foreground mr-1">,</span>
-               )}
-            </React.Fragment>
-         ))}
-
-         {/* Render Separator before "More" if needed */}
-         {showMore && (
-            <span className="text-muted-foreground mr-1">,</span>
-         )}
-
-         {/* Render "+N more" Chip */}
-         {showMore && (
-            <Popover open={moreOpen} onOpenChange={setMoreOpen}>
-               <PopoverTrigger asChild>
-                  <button
-                     type="button"
-                     className="inline-flex items-center gap-1 text-xs text-muted-foreground hover:text-foreground underline underline-offset-2 flex-shrink-0"
-                     onClick={(e) => e.stopPropagation()}
-                  >
-                     +{overflowCount} more
-                  </button>
-               </PopoverTrigger>
-               <PopoverContent
-                  align="start"
-                  className="w-56 max-h-64 overflow-y-auto p-2 text-sm"
-                  onClick={(e) => e.stopPropagation()}
-               >
-                  <div className="flex items-center justify-between mb-1">
-                     <span className="font-medium text-xs text-muted-foreground">
-                        Selected ({totalCount})
-                     </span>
-                     <button
-                        type="button"
-                        className="p-1 rounded hover:bg-muted"
-                        onClick={() => setMoreOpen(false)}
-                     >
-                        <X className="h-3 w-3" />
-                     </button>
-                  </div>
-
-                  <div className="space-y-1">
-                     {selectedItems.map((item) => (
-                        <div
-                           key={item.key}
-                           className={cn(
-                              "flex items-center justify-between gap-2 rounded px-2 py-1",
-                              "bg-muted/40"
-                           )}
-                        >
-                           <span className="truncate">{item.labelNode}</span>
-                           {onRemoveValue && (
-                              <button
-                                 type="button"
-                                 className="flex h-4 w-4 shrink-0 items-center justify-center rounded hover:bg-muted text-muted-foreground hover:text-foreground"
-                                 onClick={(e) => {
-                                    e.stopPropagation();
-                                    handleRemove(item);
-                                 }}
-                              >
-                                 <X className="h-3 w-3" />
-                              </button>
-                           )}
-                        </div>
-                     ))}
-                  </div>
-               </PopoverContent>
-            </Popover>
-         )}
-      </span>
-   );
-};
-
-
-// src/variants/select-utils.ts (or wherever you keep small helpers)
-
-export type SelectPrimitive = string | number;
-
-/**
- * Remove a single value from a selection array.
- *
- * - Works even if the selection is undefined/null.
- * - Compares using String() so "1" and 1 are treated consistently.
- */
-export function removeSelectValue<T extends SelectPrimitive>(
-   current: readonly T[] | undefined | null,
-   valueToRemove: T
-): T[] {
-   if (!current || current.length === 0) return [];
-
-   const target = String(valueToRemove);
-
-   return current.filter((v) => String(v) !== target);
-}

package/src/variants/index.ts

@@ -1,75 +0,0 @@
-// src/variants/index.ts
-
-import {
-    registerVariant as _register,
-    getVariant as _get,
-    listVariants as _list,
-} from "@/variants/registry";
-import type {
-    VariantKey,
-    VariantModule,
-    VariantValueFor,
-    VariantPropsFor,
-} from "@/schema/variant";
-import { textVariant } from "@/variants/core/text";
-import { numberVariant } from "./core/number";
-import { PhoneVariantModule } from "./core/phone";
-import { ColorVariantModule } from "./core/color";
-import passwordVariant from "./core/password";
-import { dateVariant } from "./core/date";
-import { chipVariant } from "./core/chips";
-import { textareaVariant } from "./core/textarea";
-import ToggleVariantModule from "./core/toggle";
-import { radioVariantModule } from "./core/radio";
-import { checkboxModule } from "./core/checkbox";
-import { selectModule } from "./core/select";
-import multiSelectVariantModule from "./core/multiselect";
-import sliderModule from './core/slider'
-import { keyValueModule } from "./core/keyvalue";
-import customVariant from "./core/custom";
-import treeselectModule from "./core/treeselect";
-import { fileManagerModule } from "./core/file";
-
-export type { VariantKey, VariantModule, VariantValueFor, VariantPropsFor };
-export {
-    _register as registerVariant,
-    _get as getVariant,
-    _list as listVariants,
-};
-export { textVariant };
-
-
-const variants = [
-    textVariant,
-    numberVariant,
-    PhoneVariantModule,
-    ColorVariantModule,
-    passwordVariant,
-    dateVariant,
-    chipVariant,
-    textareaVariant,
-    ToggleVariantModule,
-    radioVariantModule,
-    checkboxModule,
-    selectModule,
-    multiSelectVariantModule,
-    sliderModule,
-    keyValueModule,
-    customVariant,
-    treeselectModule,
-    fileManagerModule
-]
-
-/**
- * Register all core/built-in variants.
- *
- * Hosts can call this once at bootstrap:
- *
- *   import { registerCoreVariants } from "@timeax/form-palette/variants";
- *   registerCoreVariants();
- */
-export function registerCoreVariants(): void {
-    variants.forEach(item => _register(item as any))
-}
-
-registerCoreVariants();

package/src/variants/registry.ts

@@ -1,38 +0,0 @@
-// src/variants/registry.ts
-
-import type { VariantKey, VariantModule } from "@/schema/variant";
-
-/**
- * Internal storage for registered variants.
- */
-const registry = new Map<VariantKey, VariantModule<any>>();
-
-/**
- * Register (or overwrite) a variant module.
- *
- * Typically called from presets, e.g.:
- *
- *   registerVariant(textVariant);
- *   registerVariant(numberVariant);
- */
-export function registerVariant<K extends VariantKey>(
-    module: VariantModule<K>
-): void {
-    registry.set(module.variant, module as VariantModule<any>);
-}
-
-/**
- * Look up a variant module by key.
- */
-export function getVariant<K extends VariantKey>(
-    key: K
-): VariantModule<K> | undefined {
-    return registry.get(key) as VariantModule<K> | undefined;
-}
-
-/**
- * List all registered variant modules.
- */
-export function listVariants(): VariantModule<VariantKey>[] {
-    return Array.from(registry.values()) as VariantModule<VariantKey>[];
-}

package/src/variants/shared.ts

@@ -1,126 +0,0 @@
-// src/variants/shared.ts
-
-import React from "react";
-
-/**
- * Size hint for field variants.
- *
- * Presets can interpret these however they like (font size, padding, etc.).
- */
-export type FieldSize = "sm" | "md" | "lg";
-
-/**
- * Density hint for field variants.
- *
- * - "compact"     → tight vertical spacing
- * - "comfortable" → default spacing
- * - "loose"       → extra breathing room
- */
-export type FieldDensity = "compact" | "comfortable" | "loose";
-
-/**
- * Logical source of a change event.
- *
- * Variants and utilities can tag changes to help the host reason
- * about where a value came from.
- */
-export type ChangeSource =
-    | "variant"
-    | "paste"
-    | "programmatic"
-    | "util"
-    | (string & {}); // allow custom tags
-
-/**
- * Additional context passed along with value changes.
- */
-export interface ChangeDetail<TMeta = unknown, TRaw = unknown> {
-    /**
-     * Logical source for this change.
-     */
-    source: ChangeSource;
-
-    /**
-     * Optional raw input that produced this value.
-     *
-     * Example: original keyboard input or pasted string.
-     */
-    raw?: TRaw;
-
-    nativeEvent?: React.SyntheticEvent;
-    /**
-     * Variant-specific metadata (e.g. cursor position).
-     */
-    meta?: TMeta;
-}
-
-/**
- * Base props shared by all variant components.
- *
- * Each variant module will extend this with its own props type.
- */
-export interface VariantBaseProps<TValue> {
-    /**
-     * Current logical value for this field.
-     */
-    value?: TValue | undefined;
-
-    /**
-     * Called whenever the variant wants to update the value.
-     *
-     * The detail payload describes where the change came from.
-     */
-    onValue?(value: TValue | undefined, detail?: ChangeDetail): void;
-
-    /**
-     * State flags.
-     */
-    disabled?: boolean;
-    defaultValue?: TValue;
-    readOnly?: boolean;
-    required?: boolean;
-
-    alias?: string;
-    main?: boolean;
-    /**
-     * Current error message for this field, if any.
-     */
-    error?: string;
-
-    /**
-     * Size & density hints.
-     *
-     * Variants are free to ignore these, but presets (e.g. Shadcn)
-     * will typically honour them.
-     */
-    size?: FieldSize;
-    density?: FieldDensity;
-}
-
-export interface Extras {
-    trailingIcons?: React.ReactNode[];
-    leadingIcons?: React.ReactNode[];
-    icon?: React.ReactNode;
-    iconGap?: number;
-    trailingIconSpacing?: number;
-    leadingIconSpacing?: number;
-    trailingControl?: React.ReactNode;
-    leadingControl?: React.ReactNode;
-    /**
-     * Optional className applied to the container that wraps the leading control.
-     * This does not affect the control node itself, only the wrapper div.
-     */
-    leadingControlClassName?: string;
-    /**
-     * Optional className applied to the container that wraps the trailing control.
-     * This does not affect the control node itself, only the wrapper div.
-     */
-    trailingControlClassName?: string;
-    px?: number;
-    py?: number
-    pb?: number;
-    pe?: number;
-    ps?: number;
-}
-
-export type ExtraFieldProps<Props> = Extras & Props;

package/tsconfig.json

@@ -1,14 +0,0 @@
-{
-   "extends": "../../tsconfig.base.json",
-   "compilerOptions": {
-      "outDir": "dist",
-      "declaration": true,
-      "declarationMap": true,
-      "sourceMap": true,
-      "rootDir": "src",
-      "jsx": "react-jsx"
-   },
-   "include": [
-      "src"
-   ]
-}