@cryptlex/web-components 5.1.0 → 5.2.0

package/lib/components/inputs/select.tsx

@@ -0,0 +1,140 @@
+"use client"
+import {
+  ListBox as AriaListBox,
+  ListBoxProps as AriaListBoxProps,
+  PopoverProps as AriaPopoverProps,
+  Select as AriaSelect,
+  SelectProps as AriaSelectProps,
+  SelectValue as AriaSelectValue,
+  SelectValueProps as AriaSelectValueProps,
+  composeRenderProps
+} from "react-aria-components"
+
+import { FormField, type FormFieldProps } from "lib/components/inputs/field"
+import type { SelectOption } from "lib/components/inputs/select-options"
+import { Button } from "lib/components/ui/button"
+import { useFieldContext } from "lib/utils/form-context"
+import { getFieldErrorMessage } from "lib/utils/form-hook"
+import { cn } from "lib/utils/primitives"
+import { ChevronDown } from "lucide-react"
+import {
+  ListBoxCollection,
+  ListBoxHeader,
+  ListBoxItem,
+} from "../ui/list-box"
+import { Popover } from "../ui/popover"
+
+const ASelect = AriaSelect
+export const SelectItem = ListBoxItem
+export const SelectHeader = ListBoxHeader
+export const SelectCollection = ListBoxCollection
+
+export const SelectValue = <T extends object>({
+  className,
+  ...props
+}: AriaSelectValueProps<T>) => (
+  <AriaSelectValue
+    className={composeRenderProps(className, (className) =>
+      cn(
+        "line-clamp-1 data-[placeholder]:text-muted-foreground",
+        /* Description */
+        "[&>[slot=description]]:hidden",
+        className
+      )
+    )}
+    {...props}
+  />
+)
+
+function SelectTrigger({ className, children, ...props }: React.ComponentProps<typeof Button>) {
+  return (
+    <Button {...props}>
+      {composeRenderProps(children, (children) => (
+        <>
+          {children}
+          <ChevronDown aria-hidden="true" className="size-icon opacity-50" />
+        </>
+      ))}
+    </Button>
+  )
+}
+
+export function SelectPopover({ className, ...props }: AriaPopoverProps) {
+  return (
+    <Popover
+      className={composeRenderProps(className, (className) =>
+        cn("w-auto min-w-[--trigger-width]", className)
+      )}
+      {...props}
+    />
+  )
+}
+
+function SelectListBox<T extends object>({
+  className,
+  ...props
+}: AriaListBoxProps<T>) {
+  return (
+    <AriaListBox
+      className={composeRenderProps(className, (className) =>
+        cn(
+          "overflow-auto p-1 outline-none [clip-path:inset(0_0_0_0_round_calc(var(--radius)-2px))]",
+          className
+        )
+      )}
+      {...props}
+    />
+  )
+}
+
+export interface SingleSelectProps<T extends SelectOption> extends Omit<AriaSelectProps<T>, "children">, FormFieldProps {
+  items: Iterable<T>
+  children: React.ReactNode | ((item: T) => React.ReactNode)
+}
+
+export function SingleSelect<T extends SelectOption>({
+  label,
+  description,
+  errorMessage,
+  children,
+  className,
+  items,
+  ...props
+}: SingleSelectProps<T>) {
+  return (
+    <ASelect
+      className={composeRenderProps(className, (className) =>
+        cn("group form-field", className)
+      )}
+      {...props}
+    >
+      <FormField label={label} description={description} errorMessage={errorMessage}>
+        <SelectTrigger>
+          <SelectValue />
+        </SelectTrigger>
+        <SelectPopover>
+          <SelectListBox items={items}>{children}</SelectListBox>
+        </SelectPopover>
+      </FormField>
+    </ASelect>
+  )
+}
+
+
+type TfSingleSelectProps<T extends SelectOption> = Omit<SingleSelectProps<T>, "value" | "setValue" | 'children'>;
+
+export function TfSingleSelect<T extends SelectOption>({ ...props }: TfSingleSelectProps<T>) {
+  const field = useFieldContext<string>();
+
+  return (
+    <SingleSelect
+      selectedKey={field.state.value}
+      onSelectionChange={(e) => field.handleChange(e!.toString())}
+      onBlur={field.handleBlur}
+      errorMessage={getFieldErrorMessage(field)}
+      {...props}
+    >
+      {(item) => <SelectItem id={item.id} key={item.id}>{item.label}</SelectItem>}
+    </SingleSelect>
+  );
+}

package/lib/components/inputs/textfield.tsx

@@ -0,0 +1,96 @@
+import {
+  Input as AriaInput,
+  InputProps as AriaInputProps,
+  TextArea as AriaTextArea,
+  TextAreaProps as AriaTextAreaProps,
+  TextField as AriaTextField,
+  TextFieldProps as AriaTextFieldProps,
+  composeRenderProps
+} from "react-aria-components"
+
+
+import { useFieldContext } from "lib/utils/form-context"
+import { getFieldErrorMessage } from "lib/utils/form-hook"
+import { cn } from "lib/utils/primitives"
+import { FormField, type FormFieldProps } from "./field"
+
+const ATextField = AriaTextField
+
+function Input({ className, ...props }: AriaInputProps) {
+  return (
+    <AriaInput
+      className={composeRenderProps(className, (className) =>
+        cn(
+          "flex input-dim w-full border border-input bg-card ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground",
+          /* Disabled */
+          "disabled-muted",
+          /* Focused */
+          "focus-ring",
+          className
+        )
+      )}
+      {...props}
+    />
+  )
+}
+
+function TextArea({ className, ...props }: AriaTextAreaProps) {
+  return (
+    <AriaTextArea
+      className={composeRenderProps(className, (className) =>
+        cn(
+          "flex min-h-32 w-full border border-input bg-card px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground",
+          /* Focused */
+          "focus-ring",
+          /* Disabled */
+          "disabled-muted",
+          className
+        )
+      )}
+      {...props}
+    />
+  )
+}
+
+export interface TextFieldProps extends AriaTextFieldProps, FormFieldProps {
+  textArea?: boolean
+}
+
+export function TextField({
+  label,
+  description,
+  errorMessage,
+  textArea,
+  className,
+  ...props
+}: TextFieldProps) {
+  return (
+    <ATextField
+      className={composeRenderProps(className, (className) =>
+        cn("group form-field", className)
+      )}
+      {...props}
+    >
+      <FormField label={label} errorMessage={errorMessage} description={description}>
+        {textArea ? <TextArea /> : <Input />}
+      </FormField>
+    </ATextField>
+  )
+}
+
+export function TfTextField({ isDisabled, ...props }: React.ComponentProps<typeof TextField>) {
+  const field = useFieldContext<string>();
+
+  return (
+    <TextField
+      isDisabled={isDisabled || field.form.state.isSubmitting}
+      value={field.state.value}
+      id={field.name}
+      name={field.name}
+      onBlur={field.handleBlur}
+      onChange={field.handleChange}
+      errorMessage={getFieldErrorMessage(field)}
+      {...props} />)
+}
+
+

package/lib/components/key-value-card/key-value-card.tsx

@@ -0,0 +1,115 @@
+import { formatDate } from "lib/components/data-table/table-commons";
+import { Badge } from "lib/components/ui/badge";
+import { Card, CardContent, CardHeader, CardTitle } from "lib/components/ui/card";
+import { Skeleton } from "lib/components/ui/skeleton";
+
+// Utility type to handle nested keys (dot notation) in any object
+type NestedKeyOf<T> = T extends object
+	? {
+		[K in keyof T]: K extends string | number
+		? `${K & string}` | `${K & string}.${NestedKeyOf<T[K]>}`
+		: never;
+	}[keyof T]
+	: never;
+
+// DisplayField type that works with nested keys
+export type DisplayField<T> = {
+	display: string;
+	accessor: NestedKeyOf<T>;
+	type?:
+	| "text"
+	| "badge"
+	| "boolean"
+	| "date"
+	| "yesno"
+	| "copyButton"
+	| "link"; // Field types
+	transform?: (value: any) => React.ReactNode;
+};
+
+export interface KeyValueCardProps<T> {
+	data: T; // Ensure data is of type T
+	label: string;
+	fields: DisplayField<T>[];
+	className?: string;
+}
+
+export const KeyValueCard = <T extends {}>({
+	data,
+	label,
+	fields,
+}: KeyValueCardProps<T>) => {
+	const renderValue = (field: DisplayField<T>, value: any) => {
+		if (field.transform) {
+			return field.transform(value);
+		}
+		if (value === undefined || value === null) {
+			return "-";
+		}
+		switch (field.type) {
+			case "date":
+				return <span>{formatDate(value)}</span>;
+			case "yesno":
+				return <span>{value ? "Yes" : "No"}</span>;
+			case "badge":
+				return (
+					<div className="flex flex-wrap gap-1">
+						{Array.isArray(value)
+							? value.map((item, index) => (
+								<Badge key={index}>
+									{typeof item === "object" ? item?.name || item?.id : item}
+								</Badge>
+							))
+							: value}
+					</div>
+				);
+
+			case "boolean":
+				return <span>{value.toString()}</span>;
+			default:
+				return <span>{value}</span>;
+		}
+	};
+
+	return (
+		<Card>
+			<CardHeader>
+				<CardTitle>{label}</CardTitle>
+			</CardHeader>
+			<CardContent>
+				<div className="flex flex-col gap-2">
+					{data
+						? fields.map((field) => {
+							// TODO: improve this
+							const value = field.accessor
+								? field.accessor
+									.split(".")
+									.reduce(
+										(obj, key) =>
+											obj && key in obj ? obj[key] : undefined,
+										data as Record<string, any>,
+									)
+								: null;
+
+							return (
+								<div
+									key={field.display}
+									className="flex w-full flex-col md:flex-row justify-between first:pt-0 last:pb-0"
+								>
+									<p className="text-sm flex w-full justify-start col-span-1">
+										{field.display}
+									</p>
+									<div className="text-sm flex w-full justify-start text-wrap break-all">
+										{renderValue(field, value)}
+									</div>
+								</div>
+							);
+						})
+						: fields.map((_, index) => (
+							<Skeleton key={index} className="h-12 w-full" />
+						))}
+				</div>
+			</CardContent>
+		</Card>
+	);
+};

package/lib/components/ui/alert.tsx

@@ -0,0 +1,32 @@
+import { cva, type VariantProps } from "class-variance-authority";
+import { cn } from "lib/utils/primitives";
+import { type LucideIcon } from "lucide-react";
+
+export const alertVariants = cva(
+    `transition-colors border border-dotted p-2 text-foreground text-sm inline-flex items-start gap-2`,
+    {
+        variants: {
+            variant: {
+                destructive: "bg-destructive-foreground/20 text-destructive border-destructive",
+                success: "bg-success-foreground/20 text-success border-success",
+                muted: "bg-muted-foreground/20 text-muted border-muted",
+            },
+        },
+        defaultVariants: {
+            variant: "muted",
+        },
+    },
+);
+
+export function Alert({ children, className, variant, icon: Icon, ...props }: React.ComponentProps<'div'> & VariantProps<typeof alertVariants> & {
+    icon?: LucideIcon
+}) {
+
+    return (
+        <div role="alert" className={cn(alertVariants({ variant }), className)} {...props}>
+            {Icon && <Icon className="size-icon mt-1" />}
+            <span className="w-full">
+                {children}
+            </span>
+        </div>)
+}

package/lib/components/ui/avatar.tsx

@@ -0,0 +1,22 @@
+import { cn } from "lib/utils/primitives";
+import type * as React from "react";
+
+interface InitialString {
+	initials: string[2];
+}
+export interface AvatarProps
+	extends Omit<React.ComponentProps<"div">, "children">,
+	InitialString { }
+export function Avatar({ className, initials, ...props }: AvatarProps) {
+	return (
+		<div
+			className={cn(
+				"relative text-xs font-mono font-bold flex items-center leading-none justify-center bg-accent text-accent-foreground select-none size-input shrink-0 overflow-hidden rounded-full",
+				className,
+			)}
+			{...props}
+		>
+			{initials}
+		</div>
+	);
+}

package/lib/components/ui/badge.tsx

@@ -0,0 +1,19 @@
+import { cn } from "lib/utils/primitives";
+import type * as React from "react";
+
+export function Badge({ className, children, ...props }: React.ComponentProps<"span">) {
+	return (
+		<span
+			className={cn(
+				"text-muted leading-none text-sm px-1 inline-flex items-center justify-center select-none bg-card border h-input focus:outline-hidden focus:ring-1 focus:ring-ring",
+				className,
+			)}
+			{...props}
+		>
+			{/* Contents */}
+			<span>
+				{children}
+			</span>
+		</span>
+	);
+}

package/lib/components/ui/breadcrumbs.tsx

@@ -0,0 +1,104 @@
+import {
+  Breadcrumb as AriaBreadcrumb,
+  BreadcrumbProps as AriaBreadcrumbProps,
+  Breadcrumbs as AriaBreadcrumbs,
+  BreadcrumbsProps as AriaBreadcrumbsProps,
+  Link as AriaLink,
+  LinkProps as AriaLinkProps,
+  composeRenderProps,
+} from "react-aria-components"
+
+import { cn } from "lib/utils/primitives"
+import { ChevronRight, DotSquare } from "lucide-react"
+
+export function Breadcrumbs<T extends object>({
+  className,
+  ...props
+}: AriaBreadcrumbsProps<T>) {
+  return (
+    <AriaBreadcrumbs
+      className={cn(
+        "flex flex-wrap items-center gap-1.5 break-words text-sm text-muted-foreground sm:gap-2.5",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export function BreadcrumbItem({ className, ...props }: AriaBreadcrumbProps) {
+  return (
+    <AriaBreadcrumb
+      className={cn("inline-flex items-center gap-1.5 sm:gap-2.5", className)}
+      {...props}
+    />
+  )
+}
+
+export function BreadcrumbLink({ className, ...props }: AriaLinkProps) {
+  return (
+    <AriaLink
+      className={composeRenderProps(className, (className) =>
+        cn(
+          "transition-colors",
+          /* Hover */
+          "data-[hovered]:text-foreground",
+          /* Disabled */
+          "data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+          /* Current */
+          "data-[current]:pointer-events-auto data-[current]:opacity-100",
+          className
+        )
+      )}
+      {...props}
+    />
+  )
+}
+
+export function BreadcrumbSeparator({
+  children,
+  className,
+  ...props
+}: React.ComponentProps<"span">) {
+  return (
+    <span
+      role="presentation"
+      aria-hidden="true"
+      className={cn("[&>svg]:size-3.5", className)}
+      {...props}
+    >
+      {children || <ChevronRight />}
+    </span>
+  )
+}
+
+export function BreadcrumbEllipsis({
+  className,
+  ...props
+}: React.ComponentProps<"span">) {
+  return (
+    <span
+      role="presentation"
+      aria-hidden="true"
+      className={cn("flex size-9 items-center justify-center", className)}
+      {...props}
+    >
+      <DotSquare className="size-4" />
+      <span className="sr-only">More</span>
+    </span>
+  )
+}
+
+interface BreadcrumbPageProps extends Omit<AriaLinkProps, "href"> { }
+
+export function BreadcrumbPage({ className, ...props }: BreadcrumbPageProps) {
+  return (
+    <AriaLink
+      className={composeRenderProps(className, (className) =>
+        cn("font-normal text-foreground", className)
+      )}
+      {...props}
+    />
+  )
+}
+

package/lib/components/ui/button.tsx

@@ -0,0 +1,66 @@
+"use client"
+import { cva, type VariantProps } from "class-variance-authority";
+import { cn } from "lib/utils/primitives";
+import {
+	Button as AriaButton,
+	composeRenderProps,
+	type ButtonProps as AriaButtonProps,
+} from "react-aria-components";
+import { Loader } from "./loader";
+
+export const buttonVariants = cva(
+	"btn inline-flex gap-1 text-ellipsis overflow-hidden items-center justify-center font-medium transition-colors",
+	{
+		variants: {
+			variant: {
+				primary: "btn-primary",
+				secondary: "btn-secondary",
+				destructive: "btn-destructive",
+				neutral: "btn-neutral",
+				ghost: "btn-ghost",
+				link: "text-primary underline-offset-4 hover:underline",
+			},
+			size: {
+				default: "input-dim",
+				icon: "size-input",
+				none: ""
+			},
+		},
+		defaultVariants: {
+			variant: "neutral",
+			size: "default",
+		},
+	},
+);
+
+export type ButtonProps = AriaButtonProps & VariantProps<typeof buttonVariants> & {
+	ref?: React.Ref<HTMLButtonElement>
+	active?: boolean
+}
+
+export function Button({ className: additionalClasses, variant, size, children, isPending, active, ...props }: ButtonProps) {
+	return (
+		<AriaButton
+			{...props}
+			className={composeRenderProps(additionalClasses, (className) =>
+				cn(
+					buttonVariants({
+						variant,
+						size,
+						className,
+					}),
+					additionalClasses
+				)
+			)}
+		>
+			{composeRenderProps(children, (children) => (<>
+				{isPending && <Loader />}
+				{!isPending && <>
+					{children}
+					{/* TODO active indication */}
+				</>}
+			</>))}
+		</AriaButton>
+	)
+}
+