@cryptlex/web-components 5.1.0 → 5.2.0

package/lib/components/data-table/table-commons.tsx

@@ -0,0 +1,233 @@
+
+import type { components, operations, paths } from "@cryptlex/web-api-types";
+import type { PaginationState, SortingState, Table } from "@tanstack/react-table";
+import { createColumnHelper } from "@tanstack/react-table";
+import { intervalToDuration } from "date-fns";
+import { Checkbox } from "lib/components/inputs/checkbox";
+import type { LucideIcon } from "lucide-react";
+import type createClient from "openapi-fetch";
+import type { PressEvent } from "react-aria-components";
+
+const cH = createColumnHelper<any>();
+export const TABLE_CHECK_BOX_COLUMN = [
+	cH.accessor("checkbox", {
+		header: ({ table }) => (
+			<Checkbox
+				isIndeterminate={table.getIsSomeRowsSelected() && !table.getIsAllPageRowsSelected()}
+				isSelected={
+					table.getIsAllPageRowsSelected() || table.getIsSomePageRowsSelected()
+				}
+				onChange={() => table.toggleAllPageRowsSelected()}
+				aria-label="Select all"
+			/>
+		),
+
+		cell: ({ row }) => (
+			<Checkbox
+				isSelected={row.getIsSelected()}
+				onChange={() => row.toggleSelected()}
+				aria-label="Select row"
+			/>
+		),
+		enableSorting: false,
+		enableHiding: false,
+	}),
+];
+
+export const TABLE_ID_COLUMN = [
+	cH.accessor("id", {
+		header: () => "ID",
+	}),
+];
+export const TABLE_DEFAULT_DATE_COLUMNS = [
+	cH.accessor("createdAt", {
+		header: () => "Creation Date",
+		cell: ({ row }) => {
+			const date = row.getValue("createdAt") satisfies
+				| string
+				| null
+				| undefined;
+			return formatDate(date);
+		},
+		enableHiding: false,
+	}),
+	cH.accessor("updatedAt", {
+		header: () => "Last Updated",
+		cell: ({ row }) => {
+			const date = row.getValue("updatedAt") satisfies
+				| string
+				| null
+				| undefined;
+			return formatDate(date);
+		},
+		enableHiding: false,
+	}),
+];
+
+// TODO, i18n
+export function formatDate(date: string | null | undefined) {
+	if (!date) return null;
+	const _date = new Date(date);
+	return new Intl.DateTimeFormat(undefined, {
+		dateStyle: "medium",
+		timeStyle: "short",
+	}).format(_date);
+}
+/**
+ * Format multiple license parameters (expired, suspended, revoked) into a single status
+ */
+export function getLicenseStatus(license: any): string {
+	const licenseExpired =
+		license.expiresAt && new Date(license.expiresAt) < new Date();
+	// Status Column
+	switch (true) {
+		case license.revoked && license.suspended && licenseExpired:
+			return "Revoked, Suspended, Expired";
+		case license.revoked && license.suspended:
+			return "Revoked, Suspended";
+		case license.revoked && licenseExpired:
+			return "Revoked, Expired";
+		case license.suspended && licenseExpired:
+			return "Suspended, Expired";
+		case license.suspended:
+			return "Suspended";
+		case license.revoked:
+			return "Revoked";
+		case licenseExpired:
+			return "Expired";
+		default:
+			return "Active";
+	}
+}
+
+export function getValidityDisplay(validity: number | undefined) {
+	if (validity === 0 || !validity) {
+		return "Lifetime";
+	} else {
+		return secondsToDuration(validity);
+	}
+}
+export function secondsToDuration(seconds: number): string {
+	//@ts-ignore
+	const duration = intervalToDuration({
+		start: 0,
+		end: seconds * 1000,
+	});
+
+	const parts = [
+		duration.years && `${duration.years}y`,
+		duration.months && `${duration.months}m`,
+		duration.days && `${duration.days}d`,
+		duration.hours && `${duration.hours}h`,
+	];
+
+	// Filter out undefined values and join
+	return parts.filter(Boolean).join(" ").trim();
+}
+
+export function getValueFromData(
+	data: any,
+	accessor: string | number | symbol,
+) {
+	const accessors = accessor.toString().split(".");
+	let value = data;
+	for (const acc of accessors) {
+		value = value?.[acc];
+	}
+	return value;
+}
+export const ALL_OS: { [key: string]: string } = {
+	windows: "Windows",
+	macos: "macOS",
+	linux: "Linux",
+	ios: "iOS",
+	android: "Android",
+};
+
+export type VisibilityState<T> = {
+	[K in keyof T]?: boolean;
+};
+
+export type TableActions = ({
+	onClick: (e: PressEvent, t: Table<any>) => void
+	bulk: boolean;
+	icon: LucideIcon
+	tooltip?: string;
+})[]
+
+export type TableFetchFn<TData, TOperation extends keyof operations> = (
+	p: PaginationState,
+	s: SortingState,
+	q: string,
+	f: ApiFilters<TOperation>
+) => Promise<{
+	total: number;
+	data: TData[] | undefined;
+}>;
+/*** Type for hide some of the columns based on the dto of the particular page
+ ** `id`, `updatedAt` are by default hidden
+ */
+export type DefaultVisibilityState<T> = {
+	[K in keyof T]?: boolean;
+};
+
+
+type Client = ReturnType<typeof createClient<paths>>;
+
+// Helper type to extract valid GET paths
+type GetPaths = {
+	[P in keyof paths]: paths[P] extends { get: any } ? P : never;
+}[keyof paths];
+
+export type ApiSchema<T extends keyof components['schemas']> = components['schemas'][T];
+export type ApiQuery<T extends keyof operations> = NonNullable<operations[T]['parameters']['query']>;
+export type ApiGetAllParameters = {
+	page: number;
+	limit: number;
+	search?: string;
+	sort?: string;
+}
+
+
+export type ApiFilter<T extends keyof operations> = Omit<ApiQuery<T>, 'page' | 'limit' | 'sort' | 'search'>
+export type ApiFilters<T extends keyof operations> = NonNullable<Omit<ApiQuery<T>, 'page' | 'limit' | 'sort' | 'search'>>
+
+export function createTableFetchFn<Return, Operation extends keyof operations>(
+	ctxclient: Client,
+	path: GetPaths,
+): TableFetchFn<Return, Operation> {
+	return async (pagination, sorting, searching, filters) => {
+		const query: ApiQuery<Operation> = {
+			...filters,
+			page: pagination.pageIndex + 1,
+			limit: pagination.pageSize,
+			sort: generateSortParam(sorting[0]),
+			search: searching,
+		};
+
+		// const pathParams = merge(_baseQueryObject, params);
+
+		return ctxclient.GET(path, { query }).then((value) => {
+			const rowCount = Number.parseInt(
+				value.response.headers.get("Pagination-Count") || "0",
+			);
+			return { total: rowCount, data: value.data };
+		});
+	};
+}
+
+function generateSortParam(
+	sort: { id: string; desc: boolean } | undefined,
+): string {
+	if (sort) {
+		if (sort.desc) {
+			return `-${sort.id}`;
+		} else {
+			return `+${sort.id}`;
+		}
+	} else {
+		return "-createdAt";
+	}
+}
+
+

package/lib/components/inputs/checkbox.tsx

@@ -0,0 +1,72 @@
+import {
+  Checkbox as AriaCheckbox,
+  CheckboxGroup as AriaCheckboxGroup,
+  composeRenderProps,
+  type CheckboxProps as AriaCheckboxProps
+} from "react-aria-components";
+
+import { FormField, labelVariants, type FormFieldProps } from "lib/components/inputs/field";
+import { useFieldContext } from "lib/utils/form-context";
+import { cn } from "lib/utils/primitives";
+import { Check, Minus } from "lucide-react";
+
+export const CheckboxGroup = AriaCheckboxGroup
+type CheckboxProps = AriaCheckboxProps & FormFieldProps;
+export function Checkbox({ className, label, description, errorMessage, ...props }: Omit<CheckboxProps, 'children'>) {
+  return (
+    <div className="group form-field">
+      <FormField label={label} description={description} errorMessage={errorMessage}>
+        <AriaCheckbox
+          className={composeRenderProps(className, (className) =>
+            cn(
+              "group/checkbox cursor-pointer focus-ring flex items-center gap-x-2",
+              /* Disabled */
+              "disabled-muted",
+              labelVariants,
+              className
+            )
+          )}
+          {...props}
+        >
+          {composeRenderProps(<></>, (_, renderProps) => (
+            <>
+              <div
+                className={cn(
+                  "flex size-input shrink-0 items-center bg-card justify-center border border-input text-current ring-offset-background",
+                  /* Selected */
+                  "group-data-[indeterminate]/checkbox:bg-primary group-data-[selected]/checkbox:bg-primary group-data-[indeterminate]/checkbox:text-primary-foreground  group-data-[selected]/checkbox:text-primary-foreground",
+                  /* Disabled */
+                  "group-data-[disabled]/checkbox:cursor-not-allowed group-data-[disabled]/checkbox:opacity-50",
+                  /* Invalid */
+                  "group-data-[invalid]/checkbox:border-destructive group-data-[invalid]/checkbox:group-data-[selected]/checkbox:bg-destructive group-data-[invalid]/checkbox:group-data-[selected]/checkbox:text-destructive-foreground",
+                  /* Resets */
+                  "focus:outline-none focus-visible:outline-none"
+                )}
+              >
+                {renderProps.isIndeterminate ? (
+                  <Minus className="size-icon" />
+                ) : renderProps.isSelected ? (
+                  <Check className="size-icon" />
+                ) : null}
+              </div>
+            </>
+          ))}
+        </AriaCheckbox>
+      </FormField>
+    </div>
+  )
+}
+
+export type TfCheckboxProps = Omit<React.ComponentProps<typeof Checkbox>, "onChange" | "onBlur" | "isChecked">
+export function TfCheckbox({ ...props }: TfCheckboxProps) {
+  const field = useFieldContext<boolean>();
+  return (
+    <Checkbox
+      isSelected={field.state.value}
+      isDisabled={field.form.state.isSubmitting || props.isDisabled}
+      onChange={() => field.handleChange(!field.state.value)}
+      onBlur={field.handleBlur}
+      {...props}
+    />
+  );
+};

package/lib/components/inputs/date-picker.tsx

@@ -0,0 +1,130 @@
+import { CalendarIcon } from "lucide-react"
+import {
+  DatePicker as AriaDatePicker,
+  DatePickerProps as AriaDatePickerProps,
+  DateRangePicker as AriaDateRangePicker,
+  DateRangePickerProps as AriaDateRangePickerProps,
+  DateValue as AriaDateValue,
+  Dialog as AriaDialog,
+  DialogProps as AriaDialogProps,
+  PopoverProps as AriaPopoverProps,
+  composeRenderProps,
+  Popover
+} from "react-aria-components"
+
+import { getLocalTimeZone, parseAbsolute, type ZonedDateTime } from "@internationalized/date"
+import { DateInput } from "lib/components/inputs/datefield"
+import { FieldGroup, FormField, type FormFieldProps } from "lib/components/inputs/field"
+import { Button } from "lib/components/ui/button"
+import { Calendar, RangeCalendar } from "lib/components/ui/calendar"
+import { useFieldContext } from "lib/utils/form-context"
+import { getFieldErrorMessage } from "lib/utils/form-hook"
+import { cn } from "lib/utils/primitives"
+
+const DatePickerContent = ({
+  className,
+  popoverClassName,
+  ...props
+}: AriaDialogProps & { popoverClassName?: AriaPopoverProps["className"] }) => (
+  <Popover
+    className={composeRenderProps(popoverClassName, (className) =>
+      cn("w-auto p-3", className)
+    )}
+  >
+    <AriaDialog
+      className={cn(
+        "flex w-full flex-col gap-y-2 outline-none sm:flex-row sm:gap-x-icon sm:gap-y-0",
+        className
+      )}
+      {...props}
+    />
+  </Popover>
+)
+
+interface DatePickerProps<T extends AriaDateValue> extends AriaDatePickerProps<T>, FormFieldProps { }
+
+export function DatePicker<T extends AriaDateValue>({
+  label,
+  description,
+  errorMessage,
+  className,
+  ...props
+}: DatePickerProps<T>) {
+  return (
+    <AriaDatePicker
+      className={composeRenderProps(className, (className) =>
+        cn("group flex flex-col gap-2", className)
+      )}
+      {...props}
+    >
+      <FormField label={label} description={description} errorMessage={errorMessage}>
+        <FieldGroup aria-label={label}>
+          <DateInput className="flex-1" variant="ghost" />
+          <Button
+            variant="ghost"
+            size="icon"
+            className={'-me-2 ms-2'}
+          >
+            <CalendarIcon aria-hidden />
+          </Button>
+        </FieldGroup>
+      </FormField>
+      <DatePickerContent>
+        <Calendar />
+      </DatePickerContent>
+    </AriaDatePicker>
+  )
+}
+
+export function TfDatePicker({ ...props }: Omit<DatePickerProps<ZonedDateTime>, 'value' | 'onChange' | 'onBlur' | 'isInvalid' | 'errorMessage'>) {
+  const field = useFieldContext<string | null>();
+  return (
+    <DatePicker
+      hideTimeZone
+      value={field.state.value ? parseAbsolute(field.state.value, getLocalTimeZone()) : null}
+      onChange={(v) => v ? field.handleChange(v.toAbsoluteString()) : field.handleChange(null)}
+      onBlur={field.handleBlur}
+      isInvalid={!!getFieldErrorMessage(field)}
+      errorMessage={getFieldErrorMessage(field)}
+      {...props}
+    />)
+}
+
+interface DateRangePickerProps<T extends AriaDateValue> extends AriaDateRangePickerProps<T>, FormFieldProps { }
+export function DateRangePicker<T extends AriaDateValue>({
+  label,
+  description,
+  errorMessage,
+  className,
+  ...props
+}: DateRangePickerProps<T>) {
+  return (
+    <AriaDateRangePicker
+      className={composeRenderProps(className, (className) =>
+        cn("group flex flex-col gap-2", className)
+      )}
+      {...props}
+    >
+      <FormField label={label} errorMessage={errorMessage} description={description}>
+        <FieldGroup>
+          <DateInput variant="ghost" slot={"start"} />
+          <span aria-hidden className="px-2 text-sm text-muted-foreground">
+            -
+          </span>
+          <DateInput className="flex-1" variant="ghost" slot={"end"} />
+          <Button
+            variant="ghost"
+            size="icon"
+            className="mr-1 data-[focus-visible]:ring-offset-0"
+          >
+            <CalendarIcon aria-hidden />
+          </Button>
+        </FieldGroup>
+      </FormField>
+      <DatePickerContent>
+        <RangeCalendar />
+      </DatePickerContent>
+    </AriaDateRangePicker>
+  )
+}
+

package/lib/components/inputs/datefield.tsx

@@ -0,0 +1,109 @@
+"use client"
+
+import { VariantProps } from "class-variance-authority"
+import {
+  DateField as AriaDateField,
+  DateFieldProps as AriaDateFieldProps,
+  DateInput as AriaDateInput,
+  DateInputProps as AriaDateInputProps,
+  DateSegment as AriaDateSegment,
+  DateSegmentProps as AriaDateSegmentProps,
+  DateValue as AriaDateValue,
+  TimeField as AriaTimeField,
+  TimeFieldProps as AriaTimeFieldProps,
+  TimeValue as AriaTimeValue,
+  composeRenderProps
+} from "react-aria-components"
+
+
+import { cn } from "lib/utils/primitives"
+import { fieldGroupVariants, FormField, type FormFieldProps } from "./field"
+
+export function DateSegment({ className, ...props }: AriaDateSegmentProps) {
+  return (
+    <AriaDateSegment
+      className={composeRenderProps(className, (className) =>
+        cn(
+          "inline caret-transparent outline-0",
+          /* Placeholder */
+          "data-[placeholder]:text-muted-foreground",
+          /* Disabled */
+          "disabled-muted",
+          /* Focused */
+          "data-[focused]:bg-accent data-[focused]:text-accent-foreground",
+          /* Invalid */
+          "data-[invalid]:data-[focused]:bg-destructive data-[invalid]:data-[focused]:data-[placeholder]:text-destructive-foreground data-[invalid]:data-[focused]:text-destructive-foreground data-[invalid]:data-[placeholder]:text-destructive data-[invalid]:text-destructive",
+          className
+        )
+      )}
+      {...props}
+    />
+  )
+}
+
+interface DateInputProps
+  extends AriaDateInputProps,
+  VariantProps<typeof fieldGroupVariants> { }
+
+export function DateInput({
+  className,
+  variant,
+  ...props
+}: Omit<DateInputProps, "children">) {
+  return (
+    <AriaDateInput
+      className={composeRenderProps(className, (className) =>
+        cn(fieldGroupVariants({ variant }), "text-sm", className)
+      )}
+      {...props}
+    >
+      {(segment) => <DateSegment segment={segment} />}
+    </AriaDateInput>
+  )
+}
+
+interface DateFieldProps<T extends AriaDateValue> extends AriaDateFieldProps<T>, FormFieldProps { }
+
+export function DateField<T extends AriaDateValue>({
+  label,
+  description,
+  className,
+  errorMessage,
+  ...props
+}: DateFieldProps<T>) {
+  return (
+    <AriaDateField
+      className={composeRenderProps(className, (className) =>
+        cn("group form-field", className)
+      )}
+      {...props}
+    >
+      <FormField label={label} description={description} errorMessage={errorMessage}>
+        <DateInput />
+      </FormField>
+    </AriaDateField>
+  )
+}
+
+interface TimeFieldProps<T extends AriaTimeValue> extends AriaTimeFieldProps<T>, FormFieldProps { }
+
+export function TimeField<T extends AriaTimeValue>({
+  label,
+  description,
+  errorMessage,
+  className,
+  ...props
+}: TimeFieldProps<T>) {
+  return (
+    <AriaTimeField
+      className={composeRenderProps(className, (className) =>
+        cn("group form-field", className)
+      )}
+      {...props}
+    >
+      <FormField label={label} description={description} errorMessage={errorMessage}>
+        <DateInput />
+      </FormField>
+    </AriaTimeField>
+  )
+}

package/lib/components/inputs/field.tsx

@@ -0,0 +1,106 @@
+"use client"
+
+import { cva, type VariantProps } from "class-variance-authority"
+import {
+  Group as AriaGroup,
+  GroupProps as AriaGroupProps,
+  Label as AriaLabel,
+  LabelProps as AriaLabelProps,
+  Text as AriaText,
+  TextProps as AriaTextProps,
+  composeRenderProps
+} from "react-aria-components"
+
+import { cn } from "lib/utils/primitives"
+import { CircleX, Info } from "lucide-react"
+import type React from "react"
+
+export const labelVariants = cva([
+  "select-none text-sm font-medium leading-none",
+  /* Disabled */
+  "disabled-muted",
+  /* Invalid */
+  "group-data-[invalid]:text-destructive",
+])
+
+export function FieldLabel({ className, ...props }: AriaLabelProps) {
+  return (
+    <AriaLabel className={cn(labelVariants(), className)} {...props} />
+  )
+}
+
+export function FieldDescription({ className, children, ...props }: AriaTextProps) {
+  return (
+    <AriaText
+      className={cn("text-sm text-muted leading-tight", className)}
+      {...props}
+      slot="description"
+    >
+      {children}<Info className="inline size-2 align-text-top ms-0.5" />
+    </AriaText>
+  )
+}
+// TODO, if we were to use AriaFieldError, it would use the internal ValidationState Context object, which might be useful for composing inputs but
+// this would have significant overlap with what Tanstack Form is already doing for us. It has pros and cons, needs to be discussed and explored.
+export function FieldError({ className, children, ...props }: React.ComponentPropsWithRef<'div'>) {
+  return (
+    <div
+      className={cn("text-sm leading-tight text-destructive duration-150 animate-in transition-transform  slide-in-from-top-5 fade-in", className)}
+      {...props}
+    >
+      {children}<CircleX className="inline size-2 align-text-top ms-0.5" />
+    </div>
+  )
+}
+
+export const fieldGroupVariants = cva("", {
+  variants: {
+    variant: {
+      default: [
+        // TODO standardize the padding here
+        "relative flex h-input w-full items-center overflow-hidden border border-input bg-card px-2 py-2 text-sm ring-offset-background",
+        /* Focus Within */
+        "focus-ring",
+        /* Disabled */
+        "disabled-muted",
+      ],
+      ghost: "",
+    },
+  },
+  defaultVariants: {
+    variant: "default",
+  },
+})
+
+export interface GroupProps
+  extends AriaGroupProps,
+  VariantProps<typeof fieldGroupVariants> { }
+
+export function FieldGroup({ className, variant, ...props }: GroupProps) {
+  return (
+    <AriaGroup
+      className={composeRenderProps(className, (className) =>
+        cn(fieldGroupVariants({ variant }), className)
+      )}
+      {...props}
+    />
+  )
+}
+
+export type FormFieldProps = {
+  label?: string
+  description?: React.ReactNode
+  errorMessage?: string
+  // | ((validation: AriaValidationResult) => string)
+}
+
+export function FormField({ label, description, errorMessage, children }: FormFieldProps & {
+  children: React.ReactNode
+}) {
+  return <>
+    {label && <FieldLabel>{label}</FieldLabel>}
+    {children}
+    {description && (<FieldDescription>{description}</FieldDescription>)}
+    {errorMessage && <FieldError>{errorMessage}</FieldError>}
+  </>
+}