@valentinkolb/cloud 0.4.0 → 0.5.0

package/src/ui/input/DateTimeInput.tsx

@@ -1,3 +1,4 @@
+import { dates, type DateContext } from "@valentinkolb/stdlib";
 import { InputWrapper, createInputA11y } from "./util";
 
 type DateTimeInputProps = {
@@ -11,15 +12,25 @@ type DateTimeInputProps = {
   disabled?: boolean;
   /** Use date-only input instead of datetime-local */
   dateOnly?: boolean;
+  /** Optional stdlib date context. When set, datetime values are edited in this timezone. */
+  dateConfig?: DateContext;
+  /** Convenience override for dateConfig.timeZone. */
+  timeZone?: string;
 };
 
+const hasInstantOffset = (value: string) => /[T\s].*([zZ]|[+-]\d{2}:?\d{2})$/.test(value);
+
 /**
- * Date/DateTime input component using native browser inputs
+ * Date/DateTime input component using native browser inputs.
+ *
+ * @deprecated Use `DatePicker` or `DateTimePicker` from `@valentinkolb/cloud/ui`
+ * for new UI. This component stays exported for compatibility with older apps.
+ *
  * @param label - Optional label text
  * @param description - Optional description text
  * @param placeholder - Placeholder text (not shown in date inputs)
  * @param value - Reactive value getter (ISO string or datetime-local format)
- * @param onChange - Called on change event with datetime-local format string
+ * @param onChange - Called with a date key, local datetime string, or UTC instant when dateConfig/timeZone is set
  * @param error - Reactive error message getter
  * @param required - Show required asterisk after label
  * @param disabled - Disable the input
@@ -30,13 +41,22 @@ const DateTimeInput = (props: DateTimeInputProps) => {
   const dateOnly = () => props.dateOnly ?? false;
   const icon = () => (dateOnly() ? "ti ti-calendar" : "ti ti-calendar-time");
   const a11y = createInputA11y({ description: props.description, error: props.error });
+  const dateContext = (): DateContext => ({
+    ...props.dateConfig,
+    timeZone: props.timeZone ?? props.dateConfig?.timeZone,
+  });
+  const timezone = () => dateContext().timeZone;
 
   // Convert ISO string to input format if needed
   const inputValue = () => {
     const v = props.value?.();
     if (!v) return "";
     // If it's already in the right format, return as-is
-    if (!v.includes("Z") && !v.includes("+")) return v;
+    if (!hasInstantOffset(v)) return v;
+    if (timezone()) {
+      if (dateOnly()) return dates.formatDateKey(v, dateContext());
+      return dates.instantToZonedInput(v, timezone()!);
+    }
     // Convert ISO to local datetime-local format
     const d = new Date(v);
     if (dateOnly()) {
@@ -51,6 +71,11 @@ const DateTimeInput = (props: DateTimeInputProps) => {
     return `${year}-${month}-${day}T${hours}:${minutes}`;
   };
 
+  const outputValue = (value: string) => {
+    if (!value || dateOnly() || !timezone()) return value;
+    return dates.zonedDateTimeToInstant(value, timezone()!, { disambiguation: "compatible" });
+  };
+
   return (
     <InputWrapper
       label={props.label}
@@ -70,7 +95,7 @@ const DateTimeInput = (props: DateTimeInputProps) => {
           type={dateOnly() ? "date" : "datetime-local"}
           class={`input w-full pl-9 ${disabled() ? "cursor-not-allowed opacity-50" : ""}`}
           value={inputValue()}
-          onChange={(e) => props.onChange?.(e.currentTarget.value)}
+          onChange={(e) => props.onChange?.(outputValue(e.currentTarget.value))}
           disabled={disabled()}
           aria-label={!props.label ? props.placeholder : undefined}
           aria-describedby={a11y.ariaDescribedBy()}

package/src/ui/input/FileDropzone.tsx

@@ -0,0 +1,116 @@
+import { dropzone } from "@valentinkolb/stdlib/solid";
+import { type Accessor, type JSX, Show } from "solid-js";
+import { createInputA11y, InputWrapper } from "./util";
+
+export type FileDropzoneProps = {
+  label?: string | JSX.Element;
+  description?: string | JSX.Element;
+  ariaLabel?: string;
+  accept?: string;
+  multiple?: boolean;
+  required?: boolean;
+  disabled?: boolean;
+  busy?: boolean | Accessor<boolean>;
+  error?: string | Accessor<string | null | undefined>;
+  icon?: string;
+  title?: string;
+  subtitle?: string;
+  hint?: string;
+  class?: string;
+  onDrop: (files: File[]) => void | Promise<void>;
+};
+
+const resolveMaybe = <T,>(value: T | Accessor<T> | undefined): T | undefined =>
+  typeof value === "function" ? (value as Accessor<T>)() : value;
+
+export default function FileDropzone(props: FileDropzoneProps) {
+  let inputRef: HTMLInputElement | undefined;
+  const busy = () => resolveMaybe(props.busy) ?? false;
+  const disabled = () => (props.disabled ?? false) || busy();
+  const error = () => resolveMaybe(props.error) ?? undefined;
+  const a11y = createInputA11y({ description: props.description, error });
+
+  const emitFiles = (files: File[]) => {
+    if (disabled() || files.length === 0) return;
+    void props.onDrop(props.multiple === false ? files.slice(0, 1) : files);
+  };
+
+  const dz = dropzone.create({
+    accept: props.accept,
+    onDrop: emitFiles,
+  });
+
+  const zoneClass = () => {
+    const base =
+      "group relative flex min-h-28 w-full flex-col items-center justify-center gap-2 rounded-lg border px-4 py-5 text-center text-sm transition-[background-color,border-color,box-shadow,color] duration-150 focus-ui";
+    const enabled = disabled() ? "cursor-not-allowed opacity-60" : "cursor-pointer";
+    const state = dz.invalidDrag()
+      ? "border-red-400 bg-red-50/80 text-red-700 dark:border-red-500/70 dark:bg-red-950/35 dark:text-red-200"
+      : dz.isDragging()
+        ? "border-blue-400 bg-blue-50/80 text-blue-700 dark:border-blue-500/70 dark:bg-blue-950/35 dark:text-blue-200"
+        : "border-zinc-200/80 bg-zinc-50/80 text-secondary hover:border-zinc-300 hover:bg-white dark:border-zinc-800 dark:bg-zinc-900/55 dark:hover:border-zinc-700 dark:hover:bg-zinc-900";
+
+    return `${base} ${enabled} ${state} ${props.class ?? ""}`;
+  };
+
+  const title = () => {
+    if (busy()) return "Uploading...";
+    if (dz.invalidDrag()) return "File type not accepted";
+    if (dz.isDragging()) return "Drop to upload";
+    return props.title ?? "Drop files or click to choose";
+  };
+
+  const subtitle = () => {
+    if (dz.invalidDrag()) return "Choose a file that matches this field.";
+    return props.subtitle;
+  };
+
+  return (
+    <InputWrapper
+      label={props.label}
+      description={props.description}
+      error={error()}
+      required={props.required}
+      inputId={a11y.inputId}
+      descriptionId={a11y.descriptionId}
+      errorId={a11y.errorId}
+    >
+      <button
+        id={a11y.inputId}
+        type="button"
+        class={zoneClass()}
+        onClick={() => inputRef?.click()}
+        disabled={disabled()}
+        aria-label={props.ariaLabel ?? (typeof props.label === "string" ? props.label : props.title)}
+        aria-describedby={a11y.ariaDescribedBy()}
+        {...dz.handlers}
+      >
+        <span class="flex h-10 w-10 items-center justify-center rounded-lg bg-white text-lg text-blue-600 shadow-[var(--theme-shadow-elevated)] transition-colors group-hover:text-blue-700 dark:bg-zinc-950 dark:text-blue-300">
+          <i class={`ti ${busy() ? "ti-loader-2 animate-spin" : (props.icon ?? "ti-cloud-upload")}`} aria-hidden="true" />
+        </span>
+        <span class="flex flex-col gap-0.5">
+          <span class="font-medium text-primary">{title()}</span>
+          <Show when={subtitle()}>
+            <span class="text-xs text-dimmed">{subtitle()}</span>
+          </Show>
+          <Show when={props.hint}>
+            <span class="text-[11px] text-dimmed">{props.hint}</span>
+          </Show>
+        </span>
+      </button>
+      <input
+        ref={inputRef}
+        type="file"
+        class="hidden"
+        accept={props.accept}
+        multiple={props.multiple ?? true}
+        disabled={disabled()}
+        onChange={(event) => {
+          const files = Array.from(event.currentTarget.files ?? []);
+          event.currentTarget.value = "";
+          emitFiles(files);
+        }}
+      />
+    </InputWrapper>
+  );
+}

package/src/ui/input/IconInput.tsx

@@ -0,0 +1,116 @@
+import { fuzzy } from "@valentinkolb/stdlib";
+import { ICON_OPTIONS, type IconOption } from "../../shared/icons";
+import SelectInput from "./Select";
+
+type IconInputProps = {
+  label?: string;
+  description?: string;
+  placeholder?: string;
+  /**
+   * The currently-selected icon class string (e.g. `"ti ti-currency-euro"`).
+   * Empty / undefined means "no icon picked". Stored as the full Tabler
+   * class so consumers can render directly via `<i class={value}>`
+   * without prepending `ti ` themselves; render sites that DO prepend
+   * produce a duplicate-token (`ti ti ti-foo`) which the browser
+   * tolerates as a no-op.
+   */
+  value?: () => string | undefined;
+  onChange?: (next: string) => void;
+  error?: () => string | undefined;
+  required?: boolean;
+  /** Default true — empty selection is a valid state for icons. */
+  clearable?: boolean;
+  disabled?: boolean;
+  /**
+   * Override the icon catalogue. Defaults to the curated `ICON_OPTIONS`
+   * exported from `cloud/shared/icons.ts`. Useful for app-specific
+   * sub-sets (e.g. only finance icons in a finance picker).
+   */
+  options?: IconOption[];
+  /**
+   * How many results the fuzzy search returns at most. Default 50 —
+   * enough to scroll through, not so many that the dropdown becomes a
+   * wall of icons. Empty queries bypass this cap and show the full
+   * catalogue alphabetically.
+   */
+  searchLimit?: number;
+};
+
+/**
+ * Searchable icon picker — wraps `SelectInput` in `fetchData` mode and
+ * runs `fuzzy.filter` from `@valentinkolb/stdlib` over the catalogue
+ * locally. No network: the icon list is bundled, the "fetcher" is a
+ * synchronous filter wrapped in a Promise so it slots into
+ * SelectInput's async loader contract.
+ *
+ * Each icon entry carries a `keywords` synonym list — searching "money"
+ * matches `ti ti-currency-euro`, `ti ti-coin`, `ti ti-wallet`, etc.
+ * Symbol forms work too: typing `€` finds the Euro icon.
+ *
+ * Empty query (dropdown just opened, user hasn't typed) returns the
+ * full catalogue sorted alphabetically by label so the user can
+ * browse-not-search if they prefer.
+ *
+ * The picker stores the full Tabler class string as the value (e.g.
+ * `"ti ti-currency-euro"`). Render the selected icon with
+ * `<i class={value}>` — no need to add `ti ` yourself.
+ */
+export default function IconInput(props: IconInputProps) {
+  const options = () => props.options ?? ICON_OPTIONS;
+  const limit = () => props.searchLimit ?? 50;
+
+  // Pre-compute the searchable string per option once per render of
+  // the catalogue. Since the catalogue is a constant in the common
+  // case, this memoizes effectively across edit sessions.
+  const searchKey = (entry: IconOption) =>
+    [entry.label, ...entry.keywords].join(" ").toLowerCase();
+
+  const fetcher = (query: string): Promise<IconOption[]> => {
+    const trimmed = query.trim();
+    if (trimmed.length === 0) {
+      // No query: alphabetical-by-label, full catalogue. Browsers
+      // happily render hundreds of dropdown rows at this size; if it
+      // ever becomes a perf concern we'd switch to virtualisation
+      // rather than truncating the list.
+      const all = [...options()].sort((a, b) =>
+        a.label.localeCompare(b.label, undefined, { sensitivity: "base" }),
+      );
+      return Promise.resolve(all);
+    }
+    const matches = fuzzy.filter(trimmed.toLowerCase(), options(), {
+      key: searchKey,
+      limit: limit(),
+    });
+    return Promise.resolve(matches.map((m) => m.item));
+  };
+
+  // Resolve the selected option's label so the trigger renders the
+  // friendly name (and dropdown glyph) immediately, even before the
+  // user opens the picker.
+  const selectedLabel = () => {
+    const v = props.value?.();
+    if (!v) return undefined;
+    return options().find((o) => o.id === v)?.label;
+  };
+
+  return (
+    <SelectInput
+      label={props.label}
+      description={props.description}
+      placeholder={props.placeholder ?? "Pick an icon…"}
+      icon="ti ti-icons"
+      value={props.value}
+      onChange={props.onChange}
+      error={props.error}
+      required={props.required}
+      clearable={props.clearable ?? true}
+      disabled={props.disabled}
+      fetchData={fetcher}
+      selectedLabel={selectedLabel}
+      // No debounce: filtering is local + sub-millisecond, debouncing
+      // just adds latency. SelectInput's default 200ms is built for
+      // network calls.
+      fetchDebounceMs={0}
+    />
+  );
+}

package/src/ui/input/ImageInput.tsx

@@ -14,6 +14,22 @@ type ImageInputProps = {
   error?: () => string | undefined;
   required?: boolean;
   disabled?: boolean;
+  /**
+   * Custom file→data-URL transform applied to the picked file before
+   * emitting via `onChange`. Default = `img.presets.avatar` which
+   * produces a 512×512 cropped WebP — fine for square avatars but
+   * the wrong shape for banners / title images. Pass a custom
+   * transform (e.g. one that preserves aspect ratio and caps the
+   * longest side) to override. Receives the user-picked `File`,
+   * returns a base64 data-URL string.
+   */
+  transform?: (file: File) => Promise<string>;
+  /**
+   * File-picker `accept` attribute. Default matches the common
+   * raster formats the avatar preset handles. Override when a
+   * caller needs to allow / restrict different formats.
+   */
+  accept?: string;
 };
 
 /**
@@ -42,8 +58,9 @@ const ImageInput = (props: ImageInputProps) => {
 
   const selectImage = () => {
     if (disabled()) return;
-    showFileDialog({ accept: ".jpg,.jpeg,.png,.gif,.webp" })
-      .then((file) => img.presets.avatar(file))
+    const transform = props.transform ?? ((f: File) => img.presets.avatar(f));
+    showFileDialog({ accept: props.accept ?? ".jpg,.jpeg,.png,.gif,.webp" })
+      .then(transform)
       .then((image) => props.onChange?.(image));
   };