@payfit/unity-components 0.0.0-alpha.11

package/dist/esm/components/data-table/DataTable.d.ts

@@ -0,0 +1,94 @@
+import { default as React } from 'react';
+import { Row, Table as TableType } from '@tanstack/react-table';
+import { TablePaginationProps } from '../table/parts/TablePagination.js';
+export interface DataTablePaginationLabels {
+    /** Label for the "rows per page" and pagination label dropdown */
+    itemLabel?: string;
+}
+export interface DataTablePaginationOptions {
+    /** Available options in the "rows per page" dropdown */
+    pageSizeOptions?: TablePaginationProps['pageSizeOptions'];
+    /** Custom labels for pagination */
+    labels?: DataTablePaginationLabels;
+}
+export interface DataTableProps<TData> {
+    /** The table instance from @tanstack/react-table */
+    table: TableType<TData>;
+    /** The minimum number of rows to display, affecting the minimum height */
+    minRows?: number;
+    /** The maximum number of rows to display, affecting the maximum height */
+    maxRows?: number;
+    /** Optional loading state */
+    isLoading?: boolean;
+    /** Optional error state */
+    error?: Error | null;
+    /** Custom empty state when there's no data */
+    emptyState?: React.ReactNode;
+    /** Custom loading state */
+    loadingState?: React.ReactNode;
+    /** Custom error state */
+    errorState?: React.ReactNode;
+    /** Pagination customization */
+    pagination?: DataTablePaginationOptions;
+    /** Render function for table rows */
+    children: (row: Row<TData>) => React.ReactNode;
+}
+/**
+ * A powerful and flexible data table component that integrates Unity's Table with @tanstack/react-table
+ *
+ * The DataTable component provides a standardized way to display tabular data with built-in support for
+ * pagination, sorting, filtering, and row selection. It handles common table patterns like loading states,
+ * empty states, and consistent table heights.
+ * @param props - The props for the `DataTable` component
+ * @param props.table - The table instance from @tanstack/react-table
+ * @param props.minRows - The minimum number of rows to display, affecting the minimum height
+ * @param props.maxRows - The maximum number of rows to display, affecting the maximum height
+ * @param props.isLoading - Custom loading state to show when isLoading is true
+ * @param props.error - Custom error state
+ * @param props.emptyState - Custom empty state to show when there's no data
+ * @param props.loadingState - Custom loading state to show when `isLoading` is true
+ * @param props.errorState - Custom error state to show when `error` is not null
+ * @param props.pagination - Optional pagination customization, see {@link DataTablePaginationOptions}
+ * @param props.children - Render function that takes care of rendering the table rows
+ * @see {@link DataTableProps} for all available props
+ * @example
+ * ```tsx
+ * import { DataTable, TableRow, TableCell } from '@payfit/unity-components'
+ * import { flexRender, useReactTable, getCoreRowModel, getPaginationRowModel } from '@tanstack/react-table'
+ * import { useState } from 'react'
+ *
+ * function EmployeeTable() {
+ *   const [pagination, setPagination] = useState({ pageIndex: 0, pageSize: 10 })
+ *
+ *   const table = useReactTable({
+ *     data: employees,
+ *     columns: employeeColumns,
+ *     state: { pagination },
+ *     onPaginationChange: setPagination,
+ *     getCoreRowModel: getCoreRowModel(),
+ *     getPaginationRowModel: getPaginationRowModel(),
+ *   })
+ *
+ *   return (
+ *     <DataTable table={table} minRows={5} maxRows={10}>
+ *       {row => (
+ *         <TableRow key={row.id}>
+ *           {row.getVisibleCells().map(cell => (
+ *             <TableCell key={cell.id}>
+ *               {flexRender(cell.column.columnDef.cell, cell.getContext())}
+ *             </TableCell>
+ *           ))}
+ *         </TableRow>
+ *       )}
+ *     </DataTable>
+ *   )
+ * }
+ * ```
+ * @remarks
+ * [API](https://unity-components.payfit.io/?path=/docs/data-datatable--docs) • [Demo](https://unity-components.payfit.io/?path=/docs/data-datatable--docs)
+ */
+declare function DataTable<TData extends object>({ table, isLoading, error, emptyState, loadingState, errorState, pagination, minRows, maxRows, children, }: DataTableProps<TData>): import("react/jsx-runtime").JSX.Element;
+declare namespace DataTable {
+    var displayName: string;
+}
+export { DataTable };

package/dist/esm/components/data-table/DataTable.js

@@ -0,0 +1,77 @@
+import { jsxs as d, jsx as e } from "react/jsx-runtime";
+import { useRef as w, useEffect as x } from "react";
+import { flexRender as g } from "@tanstack/react-table";
+import { TableBody as b } from "../table/parts/TableBody.js";
+import { TableColumnHeader as R } from "../table/parts/TableColumnHeader.js";
+import { TableEmptyStateLoading as D, TableEmptyStateError as E, TableEmptyStateNoData as y } from "../table/parts/TableEmptyState.js";
+import { TableHeader as z } from "../table/parts/TableHeader.js";
+import { TablePagination as H } from "../table/parts/TablePagination.js";
+import { TableRoot as M, Table as j } from "../table/Table.js";
+import { ColumnSortHeader as I } from "./parts/ColumnSortHeader.js";
+function N({
+  table: r,
+  isLoading: m,
+  error: l,
+  emptyState: a,
+  loadingState: i,
+  errorState: T,
+  pagination: n,
+  minRows: S,
+  maxRows: C,
+  children: P
+}) {
+  var p;
+  const u = w(null), { pageIndex: f, pageSize: c } = r.getState().pagination;
+  x(() => {
+    var t;
+    (t = u.current) == null || t.scrollToTop();
+  }, [f, c]);
+  const s = () => {
+    if (m)
+      return i ?? /* @__PURE__ */ e(D, {});
+    if (l)
+      return T ?? /* @__PURE__ */ e(E, {});
+  }, h = () => m || l ? s() : r.getRowModel().rows.length === 0 ? a ?? /* @__PURE__ */ e(y, {}) : a;
+  return /* @__PURE__ */ d(M, { minRows: S, maxRows: C, children: [
+    /* @__PURE__ */ d(j, { ref: u, children: [
+      /* @__PURE__ */ e(z, { children: r.getHeaderGroups().map(
+        (t) => t.headers.map((o) => /* @__PURE__ */ e(R, { children: o.column.getCanSort() ? /* @__PURE__ */ e(I, { header: o, children: /* @__PURE__ */ e("span", { children: g(
+          o.column.columnDef.header,
+          o.getContext()
+        ) }) }) : /* @__PURE__ */ e("span", { children: g(
+          o.column.columnDef.header,
+          o.getContext()
+        ) }) }, o.id))
+      ) }),
+      /* @__PURE__ */ e(
+        b,
+        {
+          renderEmptyState: h,
+          renderDataState: s,
+          children: !m && !l && r.getRowModel().rows.map(P)
+        }
+      )
+    ] }),
+    r.getPageCount() > 1 && /* @__PURE__ */ e(
+      H,
+      {
+        pageCount: r.getPageCount(),
+        rowCount: r.getPaginationRowModel().rows.length,
+        currentPage: f + 1,
+        rowsPerPage: c,
+        pageSizeOptions: n == null ? void 0 : n.pageSizeOptions,
+        onPageChange: (t) => {
+          r.setPageIndex(t - 1);
+        },
+        onPageSizeChange: (t) => {
+          r.setPageSize(t);
+        },
+        itemLabel: (p = n == null ? void 0 : n.labels) == null ? void 0 : p.itemLabel
+      }
+    )
+  ] });
+}
+N.displayName = "DataTable";
+export {
+  N as DataTable
+};

package/dist/esm/components/data-table/mocks/employee-columns.d.ts

@@ -0,0 +1,3 @@
+import { Employee } from './employee-data.js';
+export declare const employeeColumns: (import('@tanstack/table-core').AccessorKeyColumnDefBase<Employee, string> & Partial<import('@tanstack/table-core').IdIdentifier<Employee, string>>)[];
+export declare const employeeColumnsWithCheckbox: ((import('@tanstack/table-core').AccessorKeyColumnDefBase<Employee, string> & Partial<import('@tanstack/table-core').IdIdentifier<Employee, string>>) | import('@tanstack/table-core').DisplayColumnDef<Employee, unknown>)[];

package/dist/esm/components/data-table/mocks/employee-data.d.ts

@@ -0,0 +1,17 @@
+export type Employee = {
+    id: string;
+    name: string;
+    position: string;
+    avatarUrl: string;
+    team: string;
+    workingAgreement: 'Full-time' | 'Part-time' | 'Freelance' | 'Contractor';
+    startWorkingDate: string;
+    endWorkingDate: string;
+    status: 'active' | 'onboarding' | 'offboarding' | 'inactive' | 'retired';
+    manager: {
+        name: string;
+        position: string;
+        team: string;
+    } | null;
+};
+export declare const employees: Employee[];

package/dist/esm/components/data-table/parts/ColumnSortHeader.d.ts

@@ -0,0 +1,10 @@
+import { Header } from '@tanstack/react-table';
+import { ActionableProps } from '../../actionable/Actionable.js';
+export interface ColumnSortHeaderProps<TData, TValue> extends ActionableProps {
+    header: Header<TData, TValue>;
+}
+declare function ColumnSortHeader<TData, TValue>({ children, header, ...props }: ColumnSortHeaderProps<TData, TValue>): import("react/jsx-runtime").JSX.Element;
+declare namespace ColumnSortHeader {
+    var displayName: string;
+}
+export { ColumnSortHeader };

package/dist/esm/components/data-table/parts/ColumnSortHeader.js

@@ -0,0 +1,37 @@
+import { jsx as r, jsxs as m, Fragment as s } from "react/jsx-runtime";
+import { Actionable as c } from "../../actionable/Actionable.js";
+import { Icon as i } from "../../icon/Icon.js";
+function u({
+  children: t,
+  header: o,
+  ...n
+}) {
+  return /* @__PURE__ */ r(
+    c,
+    {
+      ...n,
+      className: "uy-flex uy-items-center uy-gap-50",
+      onPress: () => {
+        o.column.getCanSort() && o.column.toggleSorting();
+      },
+      children: ({ isHovered: e }) => {
+        const l = o.column.getCanSort() && (o.column.getIsSorted() || e);
+        return /* @__PURE__ */ m(s, { children: [
+          t,
+          l && /* @__PURE__ */ r(
+            i,
+            {
+              src: o.column.getIsSorted() === "asc" ? "ArrowUpOutlined" : "ArrowDownOutlined",
+              role: "presentation",
+              size: 20
+            }
+          )
+        ] });
+      }
+    }
+  );
+}
+u.displayName = "ColumnSortHeader";
+export {
+  u as ColumnSortHeader
+};

package/dist/esm/components/date-picker/DatePicker.d.ts

@@ -0,0 +1,67 @@
+import { CalendarDate } from '@internationalized/date';
+import { DatePickerProps as AriaDatePickerProps } from 'react-aria-components';
+export interface DatePickerProps extends Pick<AriaDatePickerProps<CalendarDate>, 'id' | 'firstDayOfWeek'> {
+    /** The currently selected date */
+    value?: CalendarDate;
+    /** The default selected date (uncontrolled) */
+    defaultValue?: CalendarDate;
+    /** The minimum allowed date */
+    minValue?: CalendarDate;
+    /** The maximum allowed date */
+    maxValue?: CalendarDate;
+    /** Callback fired when the date value changes */
+    onChange?: (value: CalendarDate | undefined) => void;
+    /** Callback fired when the clear button is clicked */
+    onClearButtonPress?: () => void;
+    /** Callback fired when the picker loses focus */
+    onBlur?: () => void;
+    /** Callback fired when the picker gains focus */
+    onFocus?: () => void;
+    /** Callback fired when the calendar overlay's open state changes */
+    onOpenChange?: (isOpen: boolean) => void;
+    /** Whether the picker is in an invalid state */
+    isInvalid?: boolean;
+    /** Whether the picker is in a loading state */
+    isLoading?: boolean;
+    /** Whether the picker is disabled */
+    isDisabled?: boolean;
+    /** Whether the picker is read-only */
+    isReadOnly?: boolean;
+    /** Function to determine if a date should be disabled */
+    isDateUnavailable?: (date: CalendarDate) => boolean;
+    /** Whether to force leading zeros for days and months */
+    shouldForceLeadingZeros?: boolean;
+    /** Whether to close the calendar after a date is selected */
+    shouldCloseOnSelect?: boolean;
+    /** Whether to open the calendar by default */
+    defaultOpen?: boolean;
+}
+/**
+ * The DatePicker component allows users to select a date either by typing it in directly or choosing from a calendar overlay, providing a standardized way to handle date selection across the application.
+ * @param {DatePickerProps} props - Props for configuring the DatePicker's behavior and appearance
+ * @see {@link DatePickerProps} for all available props
+ * @example
+ * ```tsx
+ * import { DatePicker } from '@payfit/unity-components'
+ * import { parseDate } from '@internationalized/date'
+ *
+ * function Example() {
+ *   const [selectedDate, setSelectedDate] = useState<CalendarDate>()
+ *
+ *   return (
+ *     <DatePicker
+ *       value={selectedDate}
+ *       onChange={setSelectedDate}
+ *       minValue={parseDate('2024-01-01')}  // Restrict dates before Jan 1, 2024
+ *       isDateUnavailable={(date) => date.dayOfWeek === 0}  // Disable Sundays
+ *     />
+ *   )
+ * }
+ * ```
+ * @remarks
+ * [API & Docs](https://master--66fe6715241b661107117e47.chromatic.com/?path=/docs/inputs-datepicker--docs) • [Design Guidelines](https://www.payfit.design/24f360409/p/719ac2-date-picker)
+ * @note
+ * This component requires `@internationalized/date` as a peer dependency. Make sure to install it in your project: `yarn add @internationalized/date`
+ */
+declare const DatePicker: import('react').ForwardRefExoticComponent<DatePickerProps & import('react').RefAttributes<HTMLDivElement>>;
+export { DatePicker };

package/dist/esm/components/date-picker/DatePicker.js

@@ -0,0 +1,164 @@
+import { jsxs as m, jsx as a } from "react/jsx-runtime";
+import { forwardRef as W } from "react";
+import { DatePicker as I, Group as P, Button as U, Popover as j } from "react-aria-components";
+import { useIntl as E } from "react-intl";
+import { tv as c } from "tailwind-variants";
+import { Icon as M } from "../icon/Icon.js";
+import { DateCalendar as O } from "./parts/DateCalendar.js";
+import { DateInput as R } from "./parts/DateInput.js";
+const G = c({
+  slots: {
+    base: [
+      "uy-group uy-flex uy-h-500 uy-border uy-border-solid uy-rounded-100",
+      "active:uy-border-border-form-active data-[focus-visible]:uy-border-border-form-active"
+    ],
+    inputWrapper: [
+      "uy-flex uy-grow uy-rounded-75 uy-outline-none",
+      // Show focus styles when input wrapper is focused AND button is not focused
+      "focus-within:uy-outline-2 focus-within:uy-outline-utility-focus-ring focus-within:uy-outline-offset-2",
+      // Hide focus styles when button is focused
+      "group-[:has(button:focus)]:data-[focus-within]:uy-outline-none group-[:has(button:focus)]:data-[focus-within]:uy-outline-offset-0 group-[:has(button:focus)]:data-[focus-within]:uy-outline-transparent"
+    ],
+    suffix: [
+      "uy-flex-grow-0 uy-content-center uy-pt-100 uy-pb-100 uy-pl-150 uy-pr-150 uy-border-l uy-border-solid uy-rounded-r-100",
+      "hover:uy-bg-surface-neutral-hover active:uy-bg-surface-neutral-pressed active:uy-border-border-form-active data-[pressed]:uy-bg-surface-neutral-pressed data-[pressed]:uy-border-border-form-active",
+      "focus-visible:uy-outline-2 focus-visible:uy-outline-utility-focus-ring focus-visible:uy-outline-offset-[3px]"
+    ]
+  },
+  variants: {
+    isInvalid: {
+      true: {
+        base: "uy-border-border-form-error uy-bg-surface-form-error",
+        suffix: "uy-bg-surface-form-error uy-border-border-form-error"
+      }
+    },
+    isReadOnly: {
+      true: {
+        base: "uy-border-border-form-disabled uy-bg-surface-form-disabled",
+        inputWrapper: "uy-border-border-form-disabled uy-bg-surface-form-disabled",
+        suffix: "uy-bg-surface-form-disabled uy-border-border-form-disabled uy-text-content-form-disabled"
+      }
+    },
+    isDisabled: {
+      true: {
+        base: "uy-border-border-form-disabled uy-bg-surface-form-disabled",
+        inputWrapper: "uy-bg-surface-form-disabled uy-text-content-form-disabled",
+        suffix: "uy-bg-surface-form-disabled uy-border-border-form-disabled uy-text-content-form-disabled"
+      }
+    }
+  },
+  compoundVariants: [
+    {
+      isInvalid: !1,
+      isDisabled: !1,
+      isReadOnly: !1,
+      className: {
+        base: "uy-border-border-form-enabled uy-bg-surface-form-enabled",
+        suffix: "uy-border-border-form-enabled uy-bg-surface-neutral-low uy-text-content-form-enabled"
+      }
+    }
+  ]
+}), $ = c({
+  base: "uy-overflow-auto uy-shadow-floating uy-border uy-border-solid uy-border-border-neutral uy-bg-surface-neutral uy-rounded-75",
+  variants: {
+    isEntering: {
+      true: "uy-animate-in uy-fade-in data-[placement-bottom]:uy-slide-in-from-top-1 data-[placement-top]:uy-slide-in-from-bottom-1 uy-duration-200 uy-ease-out"
+    },
+    isExiting: {
+      true: "uy-animate-out uy-fade-out data-[placement-bottom]:uy-slide-out-to-top-1 data-[placement-top]:uy-slide-out-to-bottom-1 uy-duration-150 uy-ease-in"
+    }
+  }
+}), q = W(
+  ({
+    value: l,
+    defaultValue: n,
+    isInvalid: b,
+    isLoading: p,
+    isDisabled: t,
+    isReadOnly: u,
+    onClearButtonPress: d,
+    onBlur: o,
+    onFocus: i,
+    onChange: s,
+    onOpenChange: f,
+    id: v,
+    ...e
+  }, z) => {
+    const g = E(), { base: x, inputWrapper: h, suffix: D } = G({
+      isInvalid: !!b,
+      isReadOnly: !!u,
+      isDisabled: !!t
+    }), y = (r) => {
+      s == null || s(r ?? void 0);
+    }, w = (r) => {
+      f == null || f(r), r ? i == null || i() : o == null || o();
+    }, k = (r) => e.isDateUnavailable ? e.isDateUnavailable(r) : !1, V = () => {
+      d == null || d();
+    };
+    return /* @__PURE__ */ m(
+      I,
+      {
+        "data-dd-privacy": "mask",
+        ...e,
+        className: x(),
+        value: l,
+        defaultValue: n,
+        minValue: e.minValue,
+        maxValue: e.maxValue,
+        isReadOnly: !!u,
+        isDisabled: !!t,
+        onChange: y,
+        onFocus: i,
+        onBlur: o,
+        onOpenChange: w,
+        isDateUnavailable: k,
+        children: [
+          /* @__PURE__ */ m(P, { className: h(), id: v, children: [
+            /* @__PURE__ */ a(
+              R,
+              {
+                isLoading: p,
+                isDisabled: t,
+                isReadOnly: u,
+                isInvalid: b,
+                onClearButtonPress: V
+              }
+            ),
+            /* @__PURE__ */ a(U, { className: D(), isDisabled: u || t, children: /* @__PURE__ */ a(
+              M,
+              {
+                src: "CalendarBlankOutlined",
+                color: "inherit",
+                alt: g.formatMessage({
+                  id: "unity:component:form-field:date-picker:calendar-button",
+                  defaultMessage: "Open Calendar"
+                })
+              }
+            ) })
+          ] }),
+          /* @__PURE__ */ a(
+            j,
+            {
+              className: ({ isEntering: r, isExiting: N }) => $({ isEntering: r, isExiting: N }),
+              children: /* @__PURE__ */ a(
+                O,
+                {
+                  value: l,
+                  defaultValue: n,
+                  minValue: e.minValue,
+                  maxValue: e.maxValue,
+                  onChange: y,
+                  firstDayOfWeek: e.firstDayOfWeek
+                }
+              )
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+q.displayName = "DatePicker";
+export {
+  q as DatePicker
+};

package/dist/esm/components/date-picker/hooks/useMonthsList.d.ts

@@ -0,0 +1,4 @@
+export declare function useMonthsList(): {
+    id: string;
+    name: string;
+}[];

package/dist/esm/components/date-picker/hooks/useMonthsList.js

@@ -0,0 +1,26 @@
+import { useMemo as l } from "react";
+import { createCalendar as d, today as i, getLocalTimeZone as a, CalendarDate as m } from "@internationalized/date";
+import { useLocale as u } from "react-aria-components";
+function f() {
+  const { locale: o } = u(), c = new Intl.DateTimeFormat().resolvedOptions().calendar, e = d(c);
+  return l(() => {
+    const t = i(a()), n = new m(
+      e,
+      t.year,
+      t.month,
+      t.day
+    );
+    return Array.from({ length: e.getMonthsInYear(n) }).map(
+      (g, s) => {
+        const r = new m(e, n.year, s + 1, 1);
+        return {
+          id: r.month.toString(),
+          name: r.toDate(a()).toLocaleString(o, { month: "long" })
+        };
+      }
+    );
+  }, [o, e]);
+}
+export {
+  f as useMonthsList
+};

package/dist/esm/components/date-picker/hooks/useYearsList.d.ts

@@ -0,0 +1,10 @@
+export interface UseYearsListOptions {
+    yearsBefore?: number;
+    yearsAfter?: number;
+    startYear?: number;
+    endYear?: number;
+}
+export declare function useYearsList({ yearsBefore, yearsAfter, startYear, endYear, }?: UseYearsListOptions): {
+    id: string;
+    name: string;
+}[];

package/dist/esm/components/date-picker/hooks/useYearsList.js

@@ -0,0 +1,33 @@
+import { useMemo as g } from "react";
+import { today as D, getLocalTimeZone as c, createCalendar as L, CalendarDate as d } from "@internationalized/date";
+import { useLocale as v } from "react-aria-components";
+function S({
+  yearsBefore: l = 100,
+  yearsAfter: s = 30,
+  startYear: m,
+  endYear: u
+} = {}) {
+  const { locale: o } = v(), a = D(c()), y = new Intl.DateTimeFormat().resolvedOptions().calendar, t = L(y), n = new d(
+    t,
+    a.year,
+    a.month,
+    a.day
+  );
+  let e = m, r = u;
+  return e === void 0 && (e = n.year - l), r === void 0 && (r = n.year + s), g(
+    () => Array.from({ length: r - e + 1 }).map((w, f) => {
+      const i = e + f, p = new d(t, i, 1, 1);
+      return {
+        id: i.toString(),
+        name: p.toDate(c()).toLocaleString(o, {
+          year: "numeric",
+          calendar: t.identifier
+        })
+      };
+    }),
+    [o, t, r, e]
+  );
+}
+export {
+  S as useYearsList
+};

package/dist/esm/components/date-picker/parts/DateCalendar.d.ts

@@ -0,0 +1,9 @@
+import { DateValue } from '@internationalized/date';
+import { CalendarProps as AriaDateCalendarProps } from 'react-aria-components';
+type PropsFromAriaCalendar<TDate extends DateValue> = AriaDateCalendarProps<TDate>;
+export type DateCalendarProps<TDate extends DateValue> = PropsFromAriaCalendar<TDate>;
+declare function DateCalendar<TDate extends DateValue>({ value, defaultValue, minValue, maxValue, ...props }: DateCalendarProps<TDate>): import("react/jsx-runtime").JSX.Element;
+declare namespace DateCalendar {
+    var displayName: string;
+}
+export { DateCalendar };