@proyecto-viviana/solidaria-components 0.2.5 → 0.3.0

package/src/FileTrigger.tsx

@@ -0,0 +1,83 @@
+/**
+ * FileTrigger primitive for solidaria-components.
+ *
+ * Opens the native file picker from any pressable child.
+ * Parity target: react-aria-components/src/FileTrigger.tsx
+ */
+
+import { type JSX, createSignal, splitProps } from "solid-js";
+import { createPress, type PressEvent } from "@proyecto-viviana/solidaria";
+
+export interface FileTriggerProps extends Omit<
+  JSX.InputHTMLAttributes<HTMLInputElement>,
+  "type" | "onChange" | "children" | "onSelect"
+> {
+  /** Mime types accepted by the file picker. */
+  acceptedFileTypes?: ReadonlyArray<string>;
+  /** Whether multiple files can be selected. */
+  allowsMultiple?: boolean;
+  /** Default camera capture mode for mobile devices. */
+  defaultCamera?: "user" | "environment";
+  /** Enables directory selection in supported browsers. */
+  acceptDirectory?: boolean;
+  /** Called when user selection changes. */
+  onSelect?: (files: FileList | null) => void;
+  /** Trigger content (typically a button). */
+  children?: JSX.Element;
+}
+
+/**
+ * A FileTrigger allows a user to access the file system using a custom trigger.
+ */
+export function FileTrigger(props: FileTriggerProps): JSX.Element {
+  const [local, inputProps] = splitProps(props, [
+    "acceptedFileTypes",
+    "allowsMultiple",
+    "defaultCamera",
+    "acceptDirectory",
+    "onSelect",
+    "children",
+    "disabled",
+  ]);
+
+  const [inputRef, setInputRef] = createSignal<HTMLInputElement | null>(null);
+
+  const openFilePicker = () => {
+    const input = inputRef();
+    if (!input) return;
+    if (input.value) input.value = "";
+    input.click();
+  };
+
+  const { pressProps } = createPress({
+    get isDisabled() {
+      return !!local.disabled;
+    },
+    onPress: (_e: PressEvent) => {
+      openFilePicker();
+    },
+  });
+
+  const onInputChange: JSX.EventHandler<HTMLInputElement, Event> = (e) => {
+    local.onSelect?.(e.currentTarget.files);
+  };
+
+  return (
+    <>
+      <span {...pressProps}>{local.children}</span>
+      <input
+        {...inputProps}
+        ref={setInputRef}
+        type="file"
+        style={{ display: "none" }}
+        accept={local.acceptedFileTypes?.join(",")}
+        multiple={local.allowsMultiple}
+        capture={local.defaultCamera}
+        disabled={local.disabled}
+        // @ts-expect-error Non-standard attribute supported by WebKit browsers.
+        webkitdirectory={local.acceptDirectory ? "" : undefined}
+        onChange={onInputChange}
+      />
+    </>
+  );
+}

package/src/Focusable.tsx

@@ -0,0 +1,103 @@
+/**
+ * Focusable component for solidaria-components
+ *
+ * A render-prop component that wraps createFocusable to make an element
+ * focusable and capable of auto focus. Port of React Aria's Focusable.
+ */
+
+import {
+  type JSX,
+  children as resolveChildren,
+  createEffect,
+  onCleanup,
+  splitProps,
+} from "solid-js";
+import { createFocusable, type CreateFocusableProps } from "@proyecto-viviana/solidaria";
+
+export interface FocusableProps extends CreateFocusableProps {
+  /** A single child element to make focusable. */
+  children: JSX.Element;
+  /** Ref callback. */
+  ref?: HTMLElement | ((el: HTMLElement) => void);
+}
+
+/**
+ * Makes its child element focusable and capable of auto focus.
+ * Applies focus and keyboard event handlers from createFocusable.
+ *
+ * @example
+ * ```tsx
+ * <Focusable onFocus={() => console.log('focused')}>
+ *   <div tabIndex={0}>Focusable content</div>
+ * </Focusable>
+ * ```
+ */
+export function Focusable(props: FocusableProps): JSX.Element {
+  const [local, focusableProps] = splitProps(props, ["children", "ref"]);
+
+  let ref!: HTMLElement;
+  const { focusableProps: domProps } = createFocusable(focusableProps, () => ref);
+
+  const resolved = resolveChildren(() => local.children);
+
+  createEffect(() => {
+    const child = resolved() as HTMLElement;
+    if (child instanceof HTMLElement) {
+      ref = child;
+      if (typeof local.ref === "function") {
+        local.ref(child);
+      }
+
+      // Apply focusable props to the child element
+      const props = domProps;
+      const listeners: Array<[string, EventListener]> = [];
+      const addListener = (eventName: string, handler: unknown) => {
+        if (typeof handler === "function") {
+          const listener = handler as EventListener;
+          child.addEventListener(eventName, listener);
+          listeners.push([eventName, listener]);
+        }
+      };
+
+      addListener("focus", props.onFocus);
+      addListener("blur", props.onBlur);
+      addListener("keydown", props.onKeyDown);
+      addListener("keyup", props.onKeyUp);
+
+      // Apply non-event focusable props (e.g. tabIndex/aria/data attrs).
+      // Keep explicit child tabIndex to mirror mergeProps(child.props precedence).
+      for (const [key, value] of Object.entries(props)) {
+        if (key === "ref" || (key.startsWith("on") && typeof value === "function")) continue;
+
+        if (key === "tabIndex") {
+          if (child.hasAttribute("tabindex")) continue;
+          if (value == null || value === false) {
+            child.removeAttribute("tabindex");
+          } else {
+            child.tabIndex = Number(value);
+          }
+          continue;
+        }
+
+        if (key.startsWith("aria-") || key.startsWith("data-") || key === "id" || key === "role") {
+          if (child.hasAttribute(key)) continue;
+          if (value == null || value === false) {
+            child.removeAttribute(key);
+          } else if (value === true) {
+            child.setAttribute(key, "");
+          } else {
+            child.setAttribute(key, String(value));
+          }
+        }
+      }
+
+      onCleanup(() => {
+        for (const [eventName, listener] of listeners) {
+          child.removeEventListener(eventName, listener);
+        }
+      });
+    }
+  });
+
+  return <>{resolved()}</>;
+}

package/src/Form.tsx

@@ -0,0 +1,140 @@
+/**
+ * Form primitive for solidaria-components.
+ *
+ * Provides form-level validation behavior and server validation context.
+ * Port direction: react-aria-components/src/Form.tsx
+ */
+
+import { type JSX, createContext, splitProps } from "solid-js";
+import {
+  FormValidationContext,
+  type ValidationErrors,
+  type ValidationBehavior,
+} from "@proyecto-viviana/solid-stately";
+import {
+  type ClassNameOrFunction,
+  type StyleOrFunction,
+  type RenderChildren,
+  type SlotProps,
+  useRenderProps,
+  filterDOMProps,
+} from "./utils";
+
+type RefLike<T> = ((el: T) => void) | { current?: T | null } | undefined;
+
+function assignRef<T>(ref: RefLike<T>, el: T): void {
+  if (!ref) return;
+  if (typeof ref === "function") {
+    ref(el);
+  } else {
+    ref.current = el;
+  }
+}
+
+export interface FormRenderProps {
+  validationBehavior: ValidationBehavior;
+}
+
+export interface FormProps
+  extends
+    Omit<JSX.FormHTMLAttributes<HTMLFormElement>, "children" | "class" | "style" | "ref">,
+    SlotProps {
+  /** Server-side validation errors keyed by field name. */
+  validationErrors?: ValidationErrors;
+  /** Validation behavior mode. */
+  validationBehavior?: ValidationBehavior;
+  /** Character encodings accepted by the server. React-style alias for Solid's `accept-charset`. */
+  acceptCharset?: string;
+  /** Browser auto-capitalization hint. React-style alias for Solid's `autocapitalize`. */
+  autoCapitalize?: JSX.HTMLAttributes<HTMLFormElement>["autoCapitalize"];
+  /** Browser autocomplete behavior. React-style alias for Solid's `autocomplete`. */
+  autoComplete?: JSX.FormHTMLAttributes<HTMLFormElement>["autocomplete"];
+  /** Form encoding type. React-style alias for Solid's `enctype`. */
+  encType?: JSX.FormHTMLAttributes<HTMLFormElement>["enctype"];
+  /** The children of the component. */
+  children?: RenderChildren<FormRenderProps>;
+  /** The CSS className for the element. */
+  class?: ClassNameOrFunction<FormRenderProps>;
+  /** The inline style for the element. */
+  style?: StyleOrFunction<FormRenderProps>;
+  /** Ref for the underlying form element. */
+  ref?: RefLike<HTMLFormElement>;
+}
+
+export const FormContext = createContext<FormProps | null>(null);
+
+const formDOMPropNames = new Set([
+  "accept-charset",
+  "acceptCharset",
+  "action",
+  "autocapitalize",
+  "autoCapitalize",
+  "autocomplete",
+  "autoComplete",
+  "encoding",
+  "enctype",
+  "encType",
+  "method",
+  "name",
+  "rel",
+  "target",
+]);
+
+function filterFormDOMProps(props: object): Record<string, unknown> {
+  const filtered = filterDOMProps<Record<string, unknown>>(props, { global: true });
+
+  for (const key in props) {
+    if (Object.prototype.hasOwnProperty.call(props, key) && formDOMPropNames.has(key)) {
+      filtered[key] = (props as Record<string, unknown>)[key];
+    }
+  }
+
+  return filtered;
+}
+
+export function Form(props: FormProps): JSX.Element {
+  const [local, domProps] = splitProps(props, [
+    "validationErrors",
+    "validationBehavior",
+    "children",
+    "class",
+    "style",
+    "ref",
+    "slot",
+  ]);
+
+  const validationBehavior: ValidationBehavior = local.validationBehavior ?? "native";
+  const errors = local.validationErrors ?? {};
+  const renderProps = useRenderProps(
+    {
+      get children() {
+        return local.children;
+      },
+      class: local.class,
+      style: local.style,
+      defaultClassName: "solidaria-Form",
+    },
+    () => ({
+      validationBehavior,
+    }),
+  );
+
+  const filteredDomProps = filterFormDOMProps(domProps);
+
+  return (
+    <form
+      {...filteredDomProps}
+      ref={(el) => assignRef(local.ref, el)}
+      noValidate={validationBehavior !== "native"}
+      class={renderProps.class()}
+      style={renderProps.style()}
+      slot={local.slot}
+    >
+      <FormContext.Provider value={{ ...props, validationBehavior }}>
+        <FormValidationContext.Provider value={errors}>
+          {renderProps.renderChildren()}
+        </FormValidationContext.Provider>
+      </FormContext.Provider>
+    </form>
+  );
+}