@payfit/unity-components 0.0.0-alpha.11

package/dist/esm/components/flex/Flex.variants.js

@@ -0,0 +1,218 @@
+import { tv as s } from "tailwind-variants";
+const u = s(
+  {
+    base: "uy-flex",
+    variants: {
+      inline: {
+        true: "uy-inline-flex",
+        false: "uy-flex"
+      },
+      direction: {
+        row: "uy-flex-row",
+        col: "uy-flex-col"
+      },
+      isReversed: {
+        true: null,
+        false: null
+      },
+      wrap: {
+        wrap: "uy-flex-wrap",
+        "wrap-reverse": "uy-flex-wrap-reverse",
+        nowrap: "uy-flex-nowrap"
+      },
+      gap: {
+        0: "uy-gap-0",
+        25: "uy-gap-25",
+        50: "uy-gap-50",
+        75: "uy-gap-75",
+        100: "uy-gap-100",
+        125: "uy-gap-125",
+        150: "uy-gap-150",
+        200: "uy-gap-200",
+        250: "uy-gap-250",
+        300: "uy-gap-300",
+        400: "uy-gap-400",
+        500: "uy-gap-500",
+        600: "uy-gap-600",
+        800: "uy-gap-800",
+        1e3: "uy-gap-1000"
+      },
+      gapX: {
+        0: "uy-gap-x-0",
+        25: "uy-gap-x-25",
+        50: "uy-gap-x-50",
+        75: "uy-gap-x-75",
+        100: "uy-gap-x-100",
+        125: "uy-gap-x-125",
+        150: "uy-gap-x-150",
+        200: "uy-gap-x-200",
+        250: "uy-gap-x-250",
+        300: "uy-gap-x-300",
+        400: "uy-gap-x-400",
+        500: "uy-gap-x-500",
+        600: "uy-gap-x-600",
+        800: "uy-gap-x-800",
+        1e3: "uy-gap-x-1000"
+      },
+      gapY: {
+        0: "uy-gap-y-0",
+        25: "uy-gap-y-25",
+        50: "uy-gap-y-50",
+        75: "uy-gap-y-75",
+        100: "uy-gap-y-100",
+        125: "uy-gap-y-125",
+        150: "uy-gap-y-150",
+        200: "uy-gap-y-200",
+        250: "uy-gap-y-250",
+        300: "uy-gap-y-300",
+        400: "uy-gap-y-400",
+        500: "uy-gap-y-500",
+        600: "uy-gap-y-600",
+        800: "uy-gap-y-800",
+        1e3: "uy-gap-y-1000"
+      },
+      justify: {
+        start: "uy-justify-start",
+        end: "uy-justify-end",
+        center: "uy-justify-center",
+        between: "uy-justify-between",
+        around: "uy-justify-around",
+        evenly: "uy-justify-evenly"
+      },
+      align: {
+        start: "uy-items-start",
+        end: "uy-items-end",
+        center: "uy-items-center",
+        baseline: "uy-items-baseline",
+        stretch: "uy-items-stretch"
+      },
+      alignContent: {
+        start: "uy-content-start",
+        end: "uy-content-end",
+        center: "uy-content-center",
+        between: "uy-content-between",
+        around: "uy-content-around",
+        evenly: "uy-content-evenly"
+      }
+    },
+    defaultVariants: {
+      inline: !1,
+      direction: "row",
+      wrap: "nowrap",
+      justify: "start",
+      align: "stretch",
+      isReversed: !1
+    },
+    compoundVariants: [
+      {
+        isReversed: !0,
+        direction: "row",
+        className: "uy-flex-row-reverse"
+      },
+      {
+        isReversed: !0,
+        direction: void 0,
+        className: "uy-flex-row-reverse"
+      },
+      {
+        isReversed: !0,
+        direction: "col",
+        className: "uy-flex-col-reverse"
+      }
+    ]
+  },
+  {
+    /*
+     * FIXME: won't work because of tailwind-variants limitation.
+     *  Add the basic layout classes (flexbox) to tailwind's safelist
+     */
+    responsiveVariants: ["sm", "md", "lg", "xl"]
+  }
+), a = s(
+  {
+    variants: {
+      grow: {
+        0: "uy-grow-0",
+        1: "uy-grow"
+      },
+      shrink: {
+        0: "uy-shrink-0",
+        1: "uy-shrink"
+      },
+      basis: {
+        auto: "uy-basis-auto",
+        min: "uy-basis-min",
+        max: "uy-basis-max",
+        fit: "uy-basis-fit",
+        full: "uy-basis-full",
+        "1/2": "uy-basis-1/2",
+        "1/3": "uy-basis-1/3",
+        "2/3": "uy-basis-2/3",
+        "1/4": "uy-basis-1/4",
+        "2/4": "uy-basis-2/4",
+        "3/4": "uy-basis-3/4",
+        "1/6": "uy-basis-1/6",
+        "2/6": "uy-basis-2/6",
+        "3/6": "uy-basis-3/6",
+        "4/6": "uy-basis-4/6",
+        "5/6": "uy-basis-5/6",
+        "1/12": "uy-basis-1/12",
+        "2/12": "uy-basis-2/12",
+        "3/12": "uy-basis-3/12",
+        "4/12": "uy-basis-4/12",
+        "5/12": "uy-basis-5/12",
+        "6/12": "uy-basis-6/12",
+        "7/12": "uy-basis-7/12",
+        "8/12": "uy-basis-8/12",
+        "9/12": "uy-basis-9/12",
+        "10/12": "uy-basis-10/12",
+        "11/12": "uy-basis-11/12",
+        0: "uy-basis-0",
+        25: "uy-basis-25",
+        50: "uy-basis-50",
+        75: "uy-basis-75",
+        100: "uy-basis-100",
+        125: "uy-basis-125",
+        150: "uy-basis-150",
+        200: "uy-basis-200",
+        250: "uy-basis-250",
+        300: "uy-basis-300",
+        400: "uy-basis-400",
+        500: "uy-basis-500",
+        600: "uy-basis-600",
+        800: "uy-basis-800",
+        1e3: "uy-basis-1000"
+      },
+      order: {
+        first: "uy-order-first",
+        last: "uy-order-last",
+        none: "uy-order-none"
+      },
+      self: {
+        auto: "uy-self-auto",
+        start: "uy-self-start",
+        end: "uy-self-end",
+        center: "uy-self-center",
+        stretch: "uy-self-stretch",
+        baseline: "uy-self-baseline"
+      }
+    },
+    defaultVariants: {
+      grow: 0,
+      shrink: 1,
+      order: "none",
+      self: "auto"
+    }
+  },
+  {
+    /*
+     * FIXME: won't work because of tailwind-variants limitation.
+     *  Add the basic layout classes (flexbox) to tailwind's safelist
+     */
+    responsiveVariants: ["sm", "md", "lg", "xl"]
+  }
+);
+export {
+  u as flex,
+  a as flexItem
+};

package/dist/esm/components/flex/FlexItem.d.ts

@@ -0,0 +1,40 @@
+import { VariantProps } from 'tailwind-variants';
+import { flexItem } from './Flex.variants.js';
+export type FlexItemVariantProps = VariantProps<typeof flexItem>;
+type ElementType = 'div' | 'span' | 'section' | 'nav' | 'aside' | 'header' | 'footer' | 'main' | 'article';
+export interface FlexItemProps {
+    /** Render the flex item as a specific HTML element */
+    asElement?: ElementType;
+    /** Control if the item grows to fill available space. Use 1 to allow growing, 0 to prevent it */
+    grow?: FlexItemVariantProps['grow'];
+    /** Control if the item shrinks when space is limited. Use 1 to allow shrinking, 0 to prevent it */
+    shrink?: FlexItemVariantProps['shrink'];
+    /** Set the initial size of the item before remaining space is distributed. Use pixel values or fractions */
+    basis?: FlexItemVariantProps['basis'];
+    /** Change the item's position in the flex container. Use 'first', 'last', or 'none' */
+    order?: FlexItemVariantProps['order'];
+    /** Override the container's align-items value for this item. Use 'start', 'center', 'end', 'stretch', or 'baseline' */
+    self?: FlexItemVariantProps['self'];
+    /** Add custom classes to the flex item */
+    className?: string;
+    /** The content of the flex item */
+    children?: React.ReactNode;
+}
+/**
+ * Use FlexItem to control how individual items behave within a Flex container.
+ * This component provides props to manage growing, shrinking, sizing, and positioning of flex items.
+ * @example
+ * ```tsx
+ * <Flex gap="100">
+ *   <FlexItem grow={1}>
+ *     <div>Flexible content</div>
+ *   </FlexItem>
+ *   <FlexItem basis="200" shrink={0}>
+ *     <div>Fixed width content</div>
+ *   </FlexItem>
+ * </Flex>
+ * ```
+ */
+export declare const FlexItem: import('react').ForwardRefExoticComponent<FlexItemProps & Omit<import('react').HTMLAttributes<HTMLElement>, keyof FlexItemProps> & import('react').RefAttributes<HTMLDivElement>>;
+export declare const StackItem: import('react').ForwardRefExoticComponent<FlexItemProps & Omit<import('react').HTMLAttributes<HTMLElement>, keyof FlexItemProps> & import('react').RefAttributes<HTMLDivElement>>;
+export {};

package/dist/esm/components/flex/FlexItem.js

@@ -0,0 +1,32 @@
+import { jsx as p } from "react/jsx-runtime";
+import { forwardRef as x } from "react";
+import { flexItem as I } from "./Flex.variants.js";
+const e = x(
+  ({
+    asElement: t = "div",
+    children: m,
+    className: o,
+    grow: r,
+    shrink: s,
+    basis: a,
+    order: l,
+    self: f,
+    ...c
+  }, i) => {
+    const n = I({
+      grow: r,
+      shrink: s,
+      basis: a,
+      order: l,
+      self: f,
+      className: o
+    });
+    return /* @__PURE__ */ p(t, { ref: i, className: n, ...c, children: m });
+  }
+);
+e.displayName = "FlexItem";
+const N = e;
+export {
+  e as FlexItem,
+  N as StackItem
+};

package/dist/esm/components/form/Form.context.d.ts

@@ -0,0 +1,12 @@
+import { PropsWithChildren } from 'react';
+import { UseFormReturn } from 'react-hook-form';
+import { infer as ZodInfer } from 'zod';
+import { Schema } from '../../hooks/use-form.types.js';
+interface UnityFormContextValue<TSchema extends Schema> {
+    schema: TSchema;
+    form: UseFormReturn<ZodInfer<TSchema>>;
+}
+export declare const UnityFormContext: import('react').Context<UnityFormContextValue<Schema> | null>;
+export declare function UnityFormProvider<TSchema extends Schema>({ children, schema, form, }: PropsWithChildren<UnityFormContextValue<TSchema>>): import("react/jsx-runtime").JSX.Element;
+export declare function useUnityFormProvider<TSchema extends Schema>(): UnityFormContextValue<TSchema>;
+export {};

package/dist/esm/components/form/Form.context.js

@@ -0,0 +1,30 @@
+import { jsx as n } from "react/jsx-runtime";
+import { createContext as i, useContext as m } from "react";
+const o = i(null);
+function c({
+  children: t,
+  schema: r,
+  form: e
+}) {
+  return /* @__PURE__ */ n(
+    o.Provider,
+    {
+      value: {
+        schema: r,
+        form: e
+      },
+      children: t
+    }
+  );
+}
+function x() {
+  const t = m(o);
+  if (!t)
+    throw new Error("useFormContext must be used within a Form component");
+  return t;
+}
+export {
+  o as UnityFormContext,
+  c as UnityFormProvider,
+  x as useUnityFormProvider
+};

package/dist/esm/components/form/Form.d.ts

@@ -0,0 +1,33 @@
+import { PropsWithChildren } from 'react';
+import { FormProps as AriaFormProps } from 'react-aria-components';
+import { UseFormReturn } from 'react-hook-form';
+import { ZodError, infer as ZodInfer } from 'zod';
+import { Schema, TFormValues } from '../../hooks/use-form.types.js';
+type AllowedAriaFormProps = Omit<AriaFormProps, 'action' | 'onSubmit' | 'method' | 'target' | 'validationErrors' | 'onInvalid'>;
+export interface FormProps<TSchema extends Schema, TForm extends TFormValues = ZodInfer<TSchema>> extends PropsWithChildren<AllowedAriaFormProps> {
+    /** The form instance from react-hook-form */
+    form: UseFormReturn<TForm>;
+    /** The schema to validate the form data */
+    schema: TSchema;
+    /** The operations to execute when the form is submitted and the input data is valid */
+    action: (values: TForm) => Promise<void> | void;
+    /** Handle successful form submission (when `action` callback resolves its promise or does not throw an error) */
+    onSuccess?: (data: TForm) => void;
+    /** Handle form submission errors (when `action` callback rejects its promise or throws an error) */
+    onError?: (error: ZodError | Error) => void;
+    /** Enable or disable `react-hook-form`'s devtools (only in development mode) */
+    debug?: boolean;
+}
+/**
+ * The `Form` component provides full state management for complex forms with validation, by following a schema-based approach.
+ *
+ * Use this component to create complex form with validation and error handling, alongside the [`FormField` component](/?path=/docs/forms-formfield--docs).
+ *
+ * Under the hood, the `Form` component is a wrapper around the `react-hook-form` library, which takes care of form state management. Additionally, it uses the `zod` library to define a schema used for form data validation. To use the `Form` component correctly, **you must install Zod and react-hook-form** as dependencies in your project:
+ *
+ * ```bash
+ * $ yarn add zod react-hook-form
+ * ```
+ */
+declare const Form: import('react').ForwardRefExoticComponent<FormProps<Schema, TFormValues> & import('react').RefAttributes<HTMLFormElement>>;
+export { Form };

package/dist/esm/components/form/Form.js

@@ -0,0 +1,58 @@
+import { jsx as a, jsxs as b, Fragment as g } from "react/jsx-runtime";
+import { forwardRef as u, useMemo as j, Suspense as k, lazy as x } from "react";
+import { Form as D } from "react-aria-components";
+import { FormProvider as w } from "react-hook-form";
+import { UnityFormProvider as O } from "./Form.context.js";
+const P = x(
+  () => import("@hookform/devtools").then((t) => ({ default: t.DevTool }))
+), S = u(
+  ({
+    form: t,
+    schema: n,
+    onSuccess: m,
+    onError: s,
+    action: l,
+    children: d,
+    className: f,
+    onReset: c,
+    debug: p = !1,
+    ...h
+  }, v) => {
+    const y = j(() => {
+      const e = t.formState.errors;
+      if (!Object.keys(e).length) return;
+      const o = {};
+      return Object.entries(e).forEach(([i, r]) => {
+        r != null && r.message && typeof r.message == "string" && (o[i] = r.message);
+      }), o;
+    }, [t.formState.errors]), F = (e) => {
+      e.preventDefault(), t.handleSubmit(async (o) => {
+        try {
+          await l(o), m == null || m(o);
+        } catch (i) {
+          console.error(i), s == null || s(i);
+        }
+      })(e);
+    };
+    return /* @__PURE__ */ a(O, { schema: n, form: t, children: /* @__PURE__ */ b(w, { ...t, children: [
+      p && /* @__PURE__ */ a(k, { fallback: /* @__PURE__ */ a(g, {}), children: /* @__PURE__ */ a(P, { control: t.control }) }),
+      /* @__PURE__ */ a(
+        D,
+        {
+          ...h,
+          ref: v,
+          onSubmit: F,
+          className: f,
+          validationErrors: y,
+          onReset: c,
+          "data-dd-privacy": "mask",
+          children: d
+        }
+      )
+    ] }) });
+  }
+);
+S.displayName = "Form";
+export {
+  S as Form
+};

package/dist/esm/components/form-field/FormField.context.d.ts

@@ -0,0 +1,38 @@
+import { PropsWithChildren } from 'react';
+import { FieldPath, FieldValues } from 'react-hook-form';
+interface FormFieldContextValue<TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>> {
+    id: string;
+    name: TName;
+    isRequired?: boolean;
+    isInvalid?: boolean;
+    isLoading?: boolean;
+    isReadOnly?: boolean;
+    isDisabled?: boolean;
+    hasHelperText?: boolean;
+    hasContextualLink?: boolean;
+}
+export declare const FormFieldContext: import('react').Context<FormFieldContextValue<FieldValues, string>>;
+export declare function FormFieldProvider({ children, id, name, isRequired, isInvalid, isLoading, isReadOnly, isDisabled, hasHelperText, hasContextualLink, }: PropsWithChildren<FormFieldContextValue>): import("react/jsx-runtime").JSX.Element;
+export declare function useFormField(): {
+    fieldState: {
+        isRequired: boolean | undefined;
+        isInvalid: boolean | undefined;
+        isLoading: boolean | undefined;
+        isReadOnly: boolean | undefined;
+        isDisabled: boolean | undefined;
+        isDirty: boolean;
+        isTouched: boolean;
+        error?: import('react-hook-form').FieldError;
+    };
+    formState: import('react-hook-form').UseFormStateReturn<FieldValues>;
+    id: string;
+    name: string;
+    hasHelperText: boolean | undefined;
+    hasContextualLink: boolean | undefined;
+    formLabelId: string;
+    formItemId: string;
+    formDescriptionId: string | undefined;
+    formMessageId: string;
+    formContextualLinkId: string | undefined;
+};
+export {};

package/dist/esm/components/form-field/FormField.context.js

@@ -0,0 +1,81 @@
+import { jsx as F } from "react/jsx-runtime";
+import { createContext as x, useContext as p } from "react";
+import { useFormContext as I, useFormState as v } from "react-hook-form";
+const u = x({
+  id: "",
+  name: ""
+});
+function $({
+  children: o,
+  id: i,
+  name: t,
+  isRequired: s,
+  isInvalid: r,
+  isLoading: e,
+  isReadOnly: n,
+  isDisabled: d,
+  hasHelperText: m,
+  hasContextualLink: a
+}) {
+  return /* @__PURE__ */ F(
+    u.Provider,
+    {
+      value: {
+        id: i,
+        name: t,
+        isRequired: s,
+        isInvalid: r,
+        isLoading: e,
+        isReadOnly: n,
+        isDisabled: d,
+        hasHelperText: m,
+        hasContextualLink: a
+      },
+      children: o
+    }
+  );
+}
+function k() {
+  const o = p(u), { getFieldState: i } = I(), t = v({ name: o.name }), { invalid: s, ...r } = i(
+    o.name,
+    t
+  ), {
+    id: e,
+    isRequired: n,
+    isInvalid: d,
+    isLoading: m,
+    isReadOnly: a,
+    isDisabled: c,
+    hasHelperText: l,
+    hasContextualLink: f
+  } = o;
+  if (!o)
+    throw new Error("useFormField should be used within <FormField> component");
+  return {
+    ...{
+      id: e,
+      name: o.name,
+      hasHelperText: l,
+      hasContextualLink: f,
+      formLabelId: `${e}-form-field-label`,
+      formItemId: `${e}-form-item`,
+      formDescriptionId: l ? `${e}-form-field-description` : void 0,
+      formMessageId: `${e}-form-field-feedback-text`,
+      formContextualLinkId: f ? `${e}-form-field-contextual-link` : void 0
+    },
+    fieldState: {
+      ...r,
+      isRequired: n,
+      isInvalid: d,
+      isLoading: m,
+      isReadOnly: a,
+      isDisabled: c
+    },
+    formState: t
+  };
+}
+export {
+  u as FormFieldContext,
+  $ as FormFieldProvider,
+  k as useFormField
+};

package/dist/esm/components/form-field/FormField.d.ts

@@ -0,0 +1,61 @@
+import { default as React } from 'react';
+import { Control, FieldPath, FieldValues } from 'react-hook-form';
+export interface FormFieldProps<TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>> extends React.PropsWithChildren<object> {
+    /** The form control from react-hook-form */
+    control: Control<TFieldValues>;
+    /** The name of the field in the form */
+    name: TName;
+    /** Whether the field is required */
+    isRequired?: boolean;
+    /** Whether the field is in an invalid state */
+    isInvalid?: boolean;
+    /** Whether the field is in a loading state */
+    isLoading?: boolean;
+    /** Whether the field is disabled */
+    isDisabled?: boolean;
+    /** Whether the field is read-only */
+    isReadOnly?: boolean;
+    /** Additional class name */
+    className?: string;
+}
+/**
+ * The `FormField` component represents a single field in a Unity form. It provides a set of features to manage the state of the field and its interactions, as well as a deep integration with its parent `Form` component.
+ * Use this component to create a field in a form with a schema-based approach. It will only work if it is a child of a [`Form` component](/?path=/docs/forms-formfield--docs).
+ * @param {FormFieldProps} props - component props to control the field name, and the reference to its form control
+ * @see {@link FormFieldProps} for all available props
+ * @example
+ * ```tsx
+ * import { Button, Input, FormLabel, FormControl, FormHelperText, FormFeedbackText } from '@payfit/unity-components'
+ * import { useUnityForm } from '@payfit/unity-components'
+ * import { z } from 'zod'
+ *
+ * const loginSchema = z.object({
+ *   email: z.string().email('Invalid email address'),
+ *   password: z.string().min(8, 'Password must be at least 8 characters'),
+ * })
+ *
+ * const MyForm = () => {
+ *   const { Form, FormField } = useUnityForm(loginSchema)
+ *
+ *   const submitForm = (values: z.infer<typeof loginSchema>) => {
+ *     console.log(values)
+ *   }
+ *
+ *   return (
+ *     <Form action={submitForm}>
+ *       <FormField name="email">
+ *         <FormLabel>Email</FormLabel>
+ *         <FormHelperText>Enter your primary email address</FormHelperText>
+ *         <FormControl>
+ *          <Input type="email"/>
+ *         </FormControl>
+ *         <FormFeedbackText/>
+ *       </FormField>
+ *    </Form>
+ *   )
+ * }
+ * ```
+ * @note Use this component directly from the `useUnityForm` hook to have type-safety based on the form schema.
+ */
+declare const FormField: React.ForwardRefExoticComponent<FormFieldProps<FieldValues, string> & React.RefAttributes<HTMLDivElement>>;
+export { FormField };

package/dist/esm/components/form-field/FormField.js

@@ -0,0 +1,60 @@
+import { jsx as a } from "react/jsx-runtime";
+import d, { forwardRef as T, useMemo as p } from "react";
+import { useController as I } from "react-hook-form";
+import { tv as P } from "tailwind-variants";
+import g from "../../hooks/use-id.js";
+import { useUnityFormProvider as j } from "../form/Form.context.js";
+import { FormFieldProvider as D } from "./FormField.context.js";
+import { FormContextualLink as E } from "./parts/FormContextualLink.js";
+import { FormHelperText as N } from "./parts/FormHelperText.js";
+import { isFieldRequired as _ } from "./utils/isFieldRequired.js";
+const w = P({
+  slots: {
+    base: "uy-flex uy-flex-col uy-gap-100"
+  }
+}), M = T(
+  ({
+    children: o,
+    control: f,
+    name: r,
+    isInvalid: u,
+    isLoading: c,
+    isReadOnly: x,
+    className: F,
+    isRequired: h,
+    isDisabled: y
+  }, b) => {
+    const C = g(), { schema: t } = j(), {
+      fieldState: { invalid: v },
+      formState: i
+    } = I({ name: r, control: f }), R = p(
+      () => _(t, r),
+      [t, r]
+    ), { hasHelperText: k, hasContextualLink: q } = p(() => {
+      let s = !1, l = !1;
+      const m = (S) => {
+        d.Children.forEach(S, (n) => {
+          if (!d.isValidElement(n)) return;
+          const e = n;
+          e.type === N ? s = !0 : e.type === E && (l = !0), e.props && typeof e.props == "object" && "children" in e.props && m(e.props.children);
+        });
+      };
+      return m(o), { hasHelperText: s, hasContextualLink: l };
+    }, [o]), H = {
+      name: r,
+      isLoading: c,
+      isReadOnly: x,
+      hasHelperText: k,
+      hasContextualLink: q,
+      id: C,
+      isRequired: h ?? R,
+      isInvalid: u ?? v,
+      isDisabled: y ?? (i.isSubmitting || i.disabled)
+    }, { base: L } = w();
+    return /* @__PURE__ */ a("div", { ref: b, className: L({ className: F }), children: /* @__PURE__ */ a(D, { ...H, children: o }) });
+  }
+);
+M.displayName = "FormField";
+export {
+  M as FormField
+};