@cryptlex/web-components 5.2.0 → 5.3.0-alpha01

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

@@ -1,233 +0,0 @@
-
-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

@@ -1,72 +0,0 @@
-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

@@ -1,130 +0,0 @@
-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

@@ -1,109 +0,0 @@
-"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

@@ -1,106 +0,0 @@
-"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>}
-  </>
-}