@cryptlex/web-components 5.1.0 → 5.2.0

package/lib/components/inputs/id-search.tsx

@@ -0,0 +1,83 @@
+import { useQuery } from "@tanstack/react-query";
+import { SearchField } from "lib/components/inputs/searchfield";
+import { Button } from "lib/components/ui/button";
+import { Loader } from "lib/components/ui/loader";
+import { Menu, MenuItem } from "lib/components/ui/menu";
+import { Popover, PopoverTrigger } from "lib/components/ui/popover";
+import { useFieldContext } from "lib/utils/form-context";
+import { useId, useState } from "react";
+import { Autocomplete } from 'react-aria-components';
+
+export type SelectState = Set<number | string>;
+
+type SearchInputProps<T> = {
+    value: SelectState;
+    onChange: (v: SelectState) => void
+    onBlur?: (v: SelectState) => void
+    multiple: boolean
+    disabled?: boolean
+    idLookup?: (ids: string[]) => Promise<string[] | undefined>
+    searchFn: (q: string) => Promise<T[] | undefined>
+    accessor: 'id' | 'name';
+}
+export function IdSearchInput<T extends { id: string; name: string }>({ value, disabled = false, searchFn, multiple, onChange, onBlur, accessor = 'id', idLookup }: SearchInputProps<T>) {
+    const id = useId();
+    const [search, _setSearch] = useState('');
+    const { data, isError, isFetching, error } = useQuery({
+        queryKey: [id, search],
+        queryFn: () => searchFn(search)
+    })
+
+    const namesQuery = useQuery({
+        queryKey: [id, value],
+        queryFn: () => idLookup!(Array.from(value.keys()).map(id => id.toString())),
+        enabled: idLookup && value.size > 0
+    })
+
+    const renderButtonLabel = () => {
+        return namesQuery.data?.join(',');
+    };
+
+    return <>
+        <PopoverTrigger onOpenChange={(o) => {
+            if (!o) {
+                // searchInputRef.current?.focus();
+                onBlur?.(value);
+            }
+        }}>
+            <Button className={'min-w-3xs'} isDisabled={disabled}>{renderButtonLabel()}</Button>
+            <Popover className={'p-2'}>
+                <Autocomplete
+                    inputValue={search}
+                    onInputChange={_setSearch}
+                >
+                    <SearchField className={'mb-icon'} autoFocus />
+                    {isFetching && <Loader className="p-input" />}
+                    {!isFetching && !isError && <Menu selectedKeys={value} selectionMode={multiple ? "multiple" : 'single'} onSelectionChange={(s) => {
+                        if (typeof (s) === 'string') return;
+                        onChange(s)
+                    }} className={'text-sm'} items={data} renderEmptyState={() => 'No results found.'}>
+                        {(item) => (<MenuItem key={item['id']} id={item[accessor]}>{item.name}</MenuItem>)}
+                    </Menu>}
+                    {
+                        isError && <div className="text-destructive p-icon">{error.message}</div>
+                    }
+                </Autocomplete>
+            </Popover>
+        </PopoverTrigger >
+    </>
+
+}
+
+export function TfIdSearchInput<T extends { id: string; name: string }>({ disabled, ...props }: Omit<SearchInputProps<T>, 'value' | 'onChange'>) {
+    const field = useFieldContext<SelectState>();
+    return (
+        <IdSearchInput
+            {...props}
+            disabled={disabled || field.form.state.isSubmitting}
+            value={field.state.value}
+            onBlur={_ => field.handleBlur()}
+            onChange={(e) => field.handleChange(e)}
+        />
+    );
+}

package/lib/components/inputs/input-otp.tsx

@@ -0,0 +1,63 @@
+import { OTPInput, OTPInputContext } from "input-otp";
+import { cn } from "lib/utils/primitives";
+import { Minus } from "lucide-react";
+import * as React from "react";
+
+export function InputOTP({
+	className,
+	containerClassName,
+	...props
+}: React.ComponentProps<typeof OTPInput>) {
+	return (
+		<OTPInput
+			containerClassName={cn(
+				"flex items-center gap-2 has-disabled:opacity-50",
+				containerClassName,
+			)}
+			className={cn("disabled:cursor-not-allowed", className)}
+			{...props}
+		/>
+	);
+}
+
+export function InputOTPGroup({
+	className,
+	...props
+}: React.ComponentProps<"div">) {
+	return <div className={cn("flex items-center", className)} {...props} />;
+}
+
+export function InputOTPSlot({
+	index,
+	className,
+	...props
+}: React.ComponentProps<"div"> & { index: number }) {
+	const inputOTPContext = React.use(OTPInputContext);
+	const { char, hasFakeCaret, isActive } = inputOTPContext.slots[index];
+
+	return (
+		<div
+			className={cn(
+				"relative flex h-input w-9 items-center justify-center border-2 border-input body transition-all",
+				isActive ? "z-10  border-2 border-primary" : "",
+				className,
+			)}
+			{...props}
+		>
+			{char}
+			{hasFakeCaret && (
+				<div className="pointer-events-none absolute inset-0 flex items-center justify-center">
+					<div className="h-icon w-px animate-caret-blink bg-foreground duration-1000" />
+				</div>
+			)}
+		</div>
+	);
+}
+
+export function InputOTPSeparator({ ...props }: React.ComponentProps<"div">) {
+	return (
+		<div role="separator" {...props}>
+			<Minus />
+		</div>
+	);
+}

package/lib/components/inputs/multi-select.tsx

@@ -0,0 +1,62 @@
+import { FormField, type FormFieldProps } from "lib/components/inputs/field";
+import type { SelectOption } from "lib/components/inputs/select-options";
+import { EasyMenu, MenuItem } from "lib/components/ui/menu";
+import { useFieldContext } from "lib/utils/form-context";
+import { getFieldErrorMessage } from "lib/utils/form-hook";
+import React from "react";
+
+interface MultipleSelectionProps {
+	value: Set<string | number>;
+	onChange: (v: Set<string | number>) => void;
+	buttonLabel?: React.ReactNode;
+	items: SelectOption[];
+}
+
+export interface MultiSelectProps extends MultipleSelectionProps, FormFieldProps, Omit<React.ComponentProps<typeof EasyMenu>, 'label' | 'items'> { }
+
+export function MultiSelect({
+	items,
+	value,
+	onChange: setValue,
+	label,
+	errorMessage,
+	description,
+	...props
+}: MultiSelectProps) {
+	return (
+		<div className="group form-field">
+			<FormField {...{ label, description, errorMessage }}>
+				<EasyMenu
+					selectionMode="multiple"
+					selectedKeys={value}
+					onSelectionChange={(v) => {
+						if (typeof (v) === 'string') return
+						setValue(v)
+					}}
+					items={items}
+					label={value.size}
+					{...props}>
+					{(item) => <MenuItem id={item.id} key={item.id} isDisabled={item?.disabled}>{item.label}</MenuItem>}
+				</EasyMenu>
+			</FormField>
+		</div>
+	);
+};
+
+
+// TODO implement isDisabled
+export interface TfMultiSelectProps
+	extends Omit<MultiSelectProps, "value" | "onChange"> { }
+export function TfMultiSelect({ ...props }: TfMultiSelectProps) {
+	const field = useFieldContext<Set<number | string>>();
+
+	return (
+		<MultiSelect
+			value={field.state.value}
+			onChange={field.setValue}
+			onClose={field.handleBlur}
+			errorMessage={getFieldErrorMessage(field)}
+			{...props}
+		/>
+	);
+};

package/lib/components/inputs/numberfield.tsx

@@ -0,0 +1,110 @@
+import {
+  ButtonProps as AriaButtonProps,
+  Input as AriaInput,
+  InputProps as AriaInputProps,
+  NumberField as AriaNumberField,
+  NumberFieldProps as AriaNumberFieldProps,
+  composeRenderProps
+} from "react-aria-components"
+
+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, ChevronUp } from "lucide-react"
+import type React from "react"
+import { FieldGroup, FormField, type FormFieldProps } from "./field"
+
+const ANumberField = AriaNumberField
+
+function NumberFieldInput({ className, ...props }: AriaInputProps) {
+  return (
+    <AriaInput
+      className={composeRenderProps(className, (className) =>
+        cn(
+          "w-fit min-w-0 flex-1 border-r border-transparent bg-card pr-2 outline-0 placeholder:text-muted-foreground [&::-webkit-search-cancel-button]:hidden",
+          className
+        )
+      )}
+      {...props}
+    />
+  )
+}
+
+function NumberFieldSteppers({
+  className,
+  ...props
+}: React.ComponentProps<"div">) {
+  return (
+    <div
+      className={cn(
+        "absolute right-0 flex h-full flex-col border-l",
+        className
+      )}
+      {...props}
+    >
+      <NumberFieldStepper slot="increment">
+        <ChevronUp aria-hidden className="size-icon" />
+      </NumberFieldStepper>
+      <div className="border-b" />
+      <NumberFieldStepper slot="decrement">
+        <ChevronDown aria-hidden className="size-icon" />
+      </NumberFieldStepper>
+    </div>
+  )
+}
+
+function NumberFieldStepper({ className, ...props }: AriaButtonProps) {
+  return (
+    <Button
+      className={composeRenderProps(className, (className) =>
+        cn("w-auto grow h-3 px-0.5 text-muted-foreground", className)
+      )}
+      variant={"ghost"}
+      size={"none"}
+      {...props}
+    />
+  )
+}
+
+type NumberFieldProps = AriaNumberFieldProps & FormFieldProps
+export function NumberField({
+  label,
+  description,
+  errorMessage,
+  className,
+  ...props
+}: NumberFieldProps) {
+  return (
+    <ANumberField
+      className={composeRenderProps(className, (className) =>
+        cn("group form-field", className)
+      )}
+      {...props}
+    >
+      <FormField label={label} description={description} errorMessage={errorMessage}>
+        <FieldGroup>
+          <NumberFieldInput />
+          <NumberFieldSteppers />
+        </FieldGroup>
+      </FormField>
+    </ANumberField>
+  )
+}
+
+export function TfNumberField({ isDisabled, ...props }: Omit<React.ComponentProps<typeof NumberField>, 'value' | 'id' | 'onChange' | 'onBlur'>) {
+  const field = useFieldContext<number>();
+
+  return (
+    <NumberField
+      isInvalid={!!getFieldErrorMessage(field)}
+      isDisabled={isDisabled || field.form.state.isSubmitting}
+      value={field.state.value}
+      id={field.name}
+      onChange={field.handleChange}
+      onBlur={field.handleBlur}
+      errorMessage={getFieldErrorMessage(field)}
+      {...props}
+    />)
+}
+

package/lib/components/inputs/searchfield.tsx

@@ -0,0 +1,87 @@
+import { SearchIcon, XIcon } from "lucide-react"
+import {
+  Button as AriaButton,
+  ButtonProps as AriaButtonProps,
+  Input as AriaInput,
+  InputProps as AriaInputProps,
+  SearchField as AriaSearchField,
+  SearchFieldProps as AriaSearchFieldProps,
+  composeRenderProps
+} from "react-aria-components"
+
+import { cn } from "lib/utils/primitives"
+
+import { FieldGroup, FormField, type FormFieldProps } from "./field"
+
+function ASearchField({ className, ...props }: AriaSearchFieldProps) {
+  return (
+    <AriaSearchField
+      className={composeRenderProps(className, (className) =>
+        cn("group", className)
+      )}
+      {...props}
+    />
+  )
+}
+
+function ASearchFieldInput({ className, ...props }: AriaInputProps) {
+  return (
+    <AriaInput
+      className={composeRenderProps(className, (className) =>
+        cn(
+          "min-w-0 ring-0 focus-visible:outline-none flex-1 bg-card px-2 py-1.5 placeholder:text-muted-foreground [&::-webkit-search-cancel-button]:hidden",
+          className
+        )
+      )}
+      {...props}
+    />
+  )
+}
+
+function SearchFieldClear({ className, ...props }: AriaButtonProps) {
+  return (
+    <AriaButton
+      className={composeRenderProps(className, (className) =>
+        cn(
+          "mr-1 opacity-70 ring-offset-background transition-opacity",
+          /* Hover */
+          "data-[hovered]:opacity-100",
+          /* Disabled */
+          "data-[disabled]:pointer-events-none",
+          /* Empty */
+          "group-data-[empty]:invisible",
+          className
+        )
+      )}
+      {...props}
+    />
+  )
+}
+
+export interface SearchFieldProps extends AriaSearchFieldProps, FormFieldProps { };
+export function SearchField({
+  label,
+  description,
+  className,
+  errorMessage,
+  ...props
+}: SearchFieldProps) {
+  return (
+    <ASearchField
+      className={composeRenderProps(className, (className) =>
+        cn("group form-field", className)
+      )}
+      {...props}
+    >
+      <FormField label={label} description={description} errorMessage={errorMessage}>
+        <FieldGroup>
+          <SearchIcon aria-hidden className="size-icon text-muted-foreground" />
+          <ASearchFieldInput placeholder="" />
+          <SearchFieldClear>
+            <XIcon aria-hidden className="size-icon" />
+          </SearchFieldClear>
+        </FieldGroup>
+      </FormField>
+    </ASearchField>
+  )
+}

package/lib/components/inputs/select-options.tsx

@@ -0,0 +1,303 @@
+export type SelectOption = {
+	id: string
+	label: React.ReactNode,
+	disabled?: boolean
+}
+export const LICENSE_TYPE_OPTIONS: SelectOption[] = [
+	{
+		label: <>Node-locked</>,
+		id: "node-locked",
+	},
+	{
+		label: <>Hosted floating</>,
+		id: "hosted-floating",
+	},
+	{
+		label: <>LexFloatServer</>,
+		id: "on-premise-floating",
+	},
+];
+
+
+/**
+ * Creates Unicode flag from a two-letter ISO country code.
+ * https://stackoverflow.com/questions/24050671/how-to-put-japan-flag-character-in-a-string
+ * @param  {string} country — A two-letter ISO country code (case-insensitive).
+ * @return {string}
+ */
+function getCountryFlag(country: string) {
+	function getRegionalIndicatorSymbol(letter: string) {
+		return String.fromCodePoint(
+			0x1f1e6 - 65 + letter.toUpperCase().charCodeAt(0),
+		);
+	}
+
+	return (
+		getRegionalIndicatorSymbol(country[0]) +
+		getRegionalIndicatorSymbol(country[1])
+	);
+}
+
+const ALL_COUNTRIES: { [key: string]: string } = {
+	AF: "Afghanistan",
+	AX: "Åland Islands",
+	AL: "Albania",
+	DZ: "Algeria",
+	AS: "American Samoa",
+	AD: "Andorra",
+	AO: "Angola",
+	AI: "Anguilla",
+	AQ: "Antarctica",
+	AG: "Antigua and Barbuda",
+	AR: "Argentina",
+	AM: "Armenia",
+	AW: "Aruba",
+	AU: "Australia",
+	AT: "Austria",
+	AZ: "Azerbaijan",
+	BS: "Bahamas",
+	BH: "Bahrain",
+	BD: "Bangladesh",
+	BB: "Barbados",
+	BY: "Belarus",
+	BE: "Belgium",
+	BZ: "Belize",
+	BJ: "Benin",
+	BM: "Bermuda",
+	BT: "Bhutan",
+	BO: "Bolivia (Plurinational State of)",
+	BQ: "Bonaire, Sint Eustatius and Saba",
+	BA: "Bosnia and Herzegovina",
+	BW: "Botswana",
+	BV: "Bouvet Island",
+	BR: "Brazil",
+	IO: "British Indian Ocean Territory",
+	BN: "Brunei Darussalam",
+	BG: "Bulgaria",
+	BF: "Burkina Faso",
+	BI: "Burundi",
+	CV: "Caboe Verde",
+	KH: "Cambodia",
+	CM: "Cameroon",
+	CA: "Canada",
+	KY: "Cayman Islands",
+	CF: "Central African Republic",
+	TD: "Chad",
+	CL: "Chile",
+	CN: "China",
+	CX: "Christmas Island",
+	CC: "Cocos (Keeling) Islands",
+	CO: "Colombia",
+	KM: "Comoros",
+	CG: "Congo",
+	CD: "Congo, Democratic Republic of the",
+	CK: "Cook Islands",
+	CR: "Costa Rica",
+	CI: "Côte d'voire",
+	HR: "Croatia",
+	CU: "Cuba",
+	CW: "Curaçao",
+	CY: "Cyprus",
+	CZ: "Czechia",
+	DK: "Denmark",
+	DJ: "Djibouti",
+	DM: "Dominica",
+	DO: "Dominican Republic",
+	EC: "Ecuador",
+	EG: "Egypt",
+	SV: "El Salvador",
+	GQ: "Equatorial Guinea",
+	ER: "Eritrea",
+	EE: "Estonia",
+	SZ: "Eswatini",
+	ET: "Ethiopia",
+	FK: "Falkland Islands (Malvinas)",
+	FO: "Faroe Islands",
+	FJ: "Fiji",
+	FI: "Finland",
+	FR: "France",
+	GF: "French Guiana",
+	PF: "French Polynesia",
+	TF: "French Southern Territories",
+	GA: "Gabon",
+	GM: "Gambia",
+	GE: "Georgia",
+	DE: "Germany",
+	GH: "Ghana",
+	GI: "Gibraltar",
+	GR: "Greece",
+	GL: "Greenland",
+	GD: "Grenada",
+	GP: "Guadeloupe",
+	GU: "Guam",
+	GT: "Guatemala",
+	GG: "Guernsey",
+	GN: "Guinea",
+	GW: "Guinea-Bissau",
+	GY: "Guyana",
+	HT: "Haiti",
+	HM: "Heard Island and Mcdonald Islands",
+	VA: "Holy See",
+	HN: "Honduras",
+	HK: "Hong Kong",
+	HU: "Hungary",
+	IS: "Iceland",
+	IN: "India",
+	ID: "Indonesia",
+	IR: "Iran (Islamic Republic of)",
+	IQ: "Iraq",
+	IE: "Ireland",
+	IM: "Isle of Man",
+	IL: "Israel",
+	IT: "Italy",
+	JM: "Jamaica",
+	JP: "Japan",
+	JE: "Jersey",
+	JO: "Jordan",
+	KZ: "Kazakhstan",
+	KE: "Kenya",
+	KI: "Kiribati",
+	KP: "Korea (Democratic People's Republic of)",
+	KR: "Korea (Republic of)",
+	KW: "Kuwait",
+	KG: "Kyrgyzstan",
+	LA: "Lao People's Democratic Republic",
+	LV: "Latvia",
+	LB: "Lebanon",
+	LS: "Lesotho",
+	LR: "Liberia",
+	LY: "Libya",
+	LI: "Liechtenstein",
+	LT: "Lithuania",
+	LU: "Luxembourg",
+	MO: "Macao",
+	MG: "Madagascar",
+	MW: "Malawi",
+	MY: "Malaysia",
+	MV: "Maldives",
+	ML: "Mali",
+	MT: "Malta",
+	MH: "Marshall Islands",
+	MQ: "Martinique",
+	MR: "Mauritania",
+	MU: "Mauritius",
+	YT: "Mayotte",
+	MX: "Mexico",
+	FM: "Micronesia (Federated States of)",
+	MD: "Moldova, Republic of",
+	MC: "Monaco",
+	MN: "Mongolia",
+	ME: "Montenegro",
+	MS: "Montserrat",
+	MA: "Morocco",
+	MZ: "Mozambique",
+	MM: "Myanmar",
+	NA: "Namibia",
+	NR: "Nauru",
+	NP: "Nepal",
+	NL: "Netherlands, Kingdom of the",
+	NC: "New Caledonia",
+	NZ: "New Zealand",
+	NI: "Nicaragua",
+	NE: "Niger",
+	NG: "Nigeria",
+	NU: "Niue",
+	NF: "Norfolk Island",
+	MK: "North Macedonia",
+	MP: "Northern Mariana Islands",
+	NO: "Norway",
+	OM: "Oman",
+	PK: "Pakistan",
+	PW: "Palau",
+	PS: "Palestine, State of",
+	PA: "Panama",
+	PG: "Papua New Guinea",
+	PY: "Paraguay",
+	PE: "Peru",
+	PH: "Philippines",
+	PN: "Pitcairn",
+	PL: "Poland",
+	PT: "Portugal",
+	PR: "Puerto Rico",
+	QA: "Qatar",
+	RE: "Réunion",
+	RO: "Romania",
+	RU: "Russian Federation",
+	RW: "Rwanda",
+	BL: "Saint Barthélemy",
+	SH: "Saint Helena, Ascension Island, Tristan da Cunha",
+	KN: "Saint Kitts and Nevis",
+	LC: "Saint Lucia",
+	MF: "Saint Martin (French part)",
+	PM: "Saint Pierre and Miquelon",
+	VC: "Saint Vincent and the Grenadines",
+	WS: "Samoa",
+	SM: "San Marino",
+	ST: "Sao Tome and Principe",
+	SA: "Saudi Arabia",
+	SN: "Senegal",
+	RS: "Serbia",
+	SC: "Seychelles",
+	SL: "Sierra Leone",
+	SG: "Singapore",
+	SX: "Sint Maarten (Dutch part)",
+	SK: "Slovakia",
+	SI: "Slovenia",
+	SB: "Solomon Islands",
+	SO: "Somalia",
+	ZA: "South Africa",
+	GS: "South Georgia and the South Sandwich Islands",
+	SS: "South Sudan",
+	ES: "Spain",
+	LK: "Sri Lanka",
+	SD: "Sudan",
+	SR: "Suriname",
+	SJ: "Svalbard and Jan Mayen",
+	SE: "Sweden",
+	CH: "Switzerland",
+	SY: "Syrian Arab Republic",
+	TW: "Taiwan, Province of China",
+	TJ: "Tajikistan",
+	TZ: "Tanzania, United Republic of",
+	TH: "Thailand",
+	TL: "Timor-Leste",
+	TG: "Togo",
+	TK: "Tokelau",
+	TO: "Tonga",
+	TT: "Trinidad and Tobago",
+	TN: "Tunisia",
+	TR: "Türkiye",
+	TM: "Turkmenistan",
+	TC: "Turks and Caicos Islands",
+	TV: "Tuvalu",
+	UG: "Uganda",
+	UA: "Ukraine",
+	AE: "United Arab Emirates",
+	GB: "United Kingdom of Great Britain and Northern Ireland",
+	UM: "United States Minor Outlying Islands",
+	US: "United States of America",
+	UY: "Uruguay",
+	UZ: "Uzbekistan",
+	VU: "Vanuatu",
+	VE: "Venezuela (Bolivarian Republic of)",
+	VN: "Viet Nam",
+	VG: "Virgin Islands (British)",
+	VI: "Virgin Islands (U.S)",
+	WF: "Wallis and Futuna",
+	EH: "Western Sahara",
+	YE: "Yemen",
+	ZM: "Zambia",
+	ZW: "Zimbabwe",
+};
+
+/** Options for MultiSelect component */
+export const COUNTRY_OPTIONS: SelectOption[] = Object.entries(ALL_COUNTRIES).map((v) => {
+	return {
+		label: (
+			<>
+				{getCountryFlag(v[0])} {v[1]}
+			</>
+		),
+		id: v[0],
+	};
+});