@cryptlex/web-components 5.2.0 → 5.3.0-alpha

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

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

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

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

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

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

@@ -1,303 +0,0 @@
-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],
-	};
-});