@clicktap/ui 0.14.12 → 0.14.13

package/components/PhoneInput/PhoneInput.tsx

@@ -0,0 +1,191 @@
+'use client';
+
+import { useFilter } from 'react-aria';
+import { useEffect, useMemo, useRef, useState } from 'react';
+import {
+  CountryIso2,
+  defaultCountries,
+  parseCountry,
+  usePhoneInput,
+} from 'react-international-phone';
+import {
+  Button,
+  ListBox,
+  ListBoxItem,
+  Input as AriaInput,
+  DialogTrigger,
+} from 'react-aria-components';
+import type { TextFieldProps } from 'react-aria-components';
+import { cn } from '../../utils/cn';
+import { Input } from '../Input/Input';
+import type { SlotsToClasses } from '../../types/SlotsToClasses';
+
+interface PhoneInputProps extends Omit<TextFieldProps, 'type'> {
+  label?: string;
+  description?: string;
+  errorMessage?: string;
+  placeholder?: string;
+  classNames?: SlotsToClasses<'label' | 'input' | 'description' | 'error'>;
+  defaultCountry?: CountryIso2;
+}
+
+const options = defaultCountries.map(parseCountry);
+
+export function PhoneInput({
+  value,
+  onChange,
+  defaultCountry = 'us',
+  ...props
+}: PhoneInputProps) {
+  const triggerRef = useRef<HTMLDivElement>(null);
+  const searchRef = useRef<HTMLInputElement>(null);
+  const { inputValue, handlePhoneValueChange, inputRef, country, setCountry } =
+    usePhoneInput({
+      defaultCountry,
+      value,
+      countries: defaultCountries,
+      onChange: (data) => {
+        onChange?.(data.phone);
+      },
+      forceDialCode: true,
+    });
+  const dialCodeWithPrefix = `+${country.dialCode}`;
+
+  // eslint-disable-next-line @typescript-eslint/unbound-method
+  const { startsWith } = useFilter({ sensitivity: 'base' });
+  const [filterValue, setFilterValue] = useState('');
+  const [isOpen, onOpenChange] = useState(false);
+
+  const filteredItems = useMemo(
+    () => options.filter((item) => startsWith(item.name, filterValue)),
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [filterValue]
+  );
+
+  useEffect(() => {
+    if (isOpen) {
+      searchRef.current?.focus();
+    }
+  }, [isOpen]);
+
+  return (
+    <div
+      className={cn('flex relative', props.label ? 'pt-4' : '')}
+      aria-label={props['aria-label']}
+    >
+      <DialogTrigger isOpen={isOpen} onOpenChange={onOpenChange}>
+        <Button
+          aria-label="Select Country"
+          className="flex px-4 h-10 text-sm items-center rounded-l-md bg-slate-100 gap-2 uppercase [&[aria-expanded=false]_svg]:rotate-180 border border-r-0 border-slate-300"
+          excludeFromTabOrder
+        >
+          {country.iso2}
+          <svg
+            width="15"
+            height="8"
+            viewBox="0 0 15 8"
+            fill="none"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path d="M1 7L7.5 0.999999L14 7" stroke="currentColor" />
+          </svg>
+        </Button>
+
+        <div
+          className={cn(
+            'w-full grid absolute left-0 top-[calc(100%+.25rem)] bg-white z-50 rounded-md text-slate-600 border border-slate-300',
+            'shadow-inner',
+            isOpen ? 'block' : 'hidden'
+          )}
+          ref={triggerRef}
+        >
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            width="16"
+            height="16"
+            fill="none"
+            viewBox="0 0 17 16"
+            className="absolute top-4 left-[1.325rem]"
+          >
+            <path
+              fill="currentColor"
+              fillRule="evenodd"
+              d="M12.3 6.9a4.9 4.9 0 1 1-9.8 0 4.9 4.9 0 0 1 9.8 0Zm-1.1 5.7c-1.1.7-2.4 1.2-3.8 1.2a6.9 6.9 0 1 1 5.3-2.5l3 3-1.4 1.4-3.1-3Z"
+              clipRule="evenodd"
+            />
+          </svg>
+
+          <AriaInput
+            aria-label="Search for countries"
+            placeholder="Search for countries"
+            className={cn(
+              'pl-12 pr-5 py-4 w-full m-0 border-0 text-slate-950 transition-all duration-[0.25s] ease outline-0 bg-transparent',
+              'placeholder:text-slate-950 focus:outline-0',
+              'border-b border-slate-200'
+            )}
+            onChange={(event) => setFilterValue(event.target.value)}
+            onBlur={() => {
+              onOpenChange(false);
+              inputRef.current?.focus();
+            }}
+            value={filterValue}
+            ref={searchRef}
+          />
+
+          <div className="p-2.5">
+            <ListBox
+              className="text-slate-950 max-h-60 overflow-y-auto"
+              selectionMode="single"
+              aria-label="Countries List"
+              onSelectionChange={(selection) => {
+                setCountry(String([...selection][0]));
+                setFilterValue('');
+                onOpenChange(false);
+              }}
+            >
+              {(isOpen ? filteredItems : []).map((parsedCountry) => (
+                <ListBoxItem
+                  id={parsedCountry.iso2}
+                  key={parsedCountry.iso2}
+                  value={parsedCountry}
+                  textValue={parsedCountry.iso2}
+                  className="p-3 text-slate-900 data-[hovered]:bg-slate-100 rounded-md"
+                >
+                  {parsedCountry.name} (+{parsedCountry.dialCode})
+                </ListBoxItem>
+              ))}
+            </ListBox>
+          </div>
+        </div>
+      </DialogTrigger>
+
+      <Input
+        // eslint-disable-next-line react/jsx-props-no-spreading
+        {...props}
+        value={inputValue}
+        inputProps={{
+          onChange: handlePhoneValueChange,
+        }}
+        ref={inputRef}
+        classNames={{
+          input: cn(
+            'rounded-l-none',
+            inputValue.trim() === dialCodeWithPrefix ? 'text-slate-600' : ''
+          ),
+          label: 'absolute top-0 left-0',
+        }}
+      />
+    </div>
+  );
+}
+
+PhoneInput.defaultProps = {
+  label: undefined,
+  description: undefined,
+  errorMessage: undefined,
+  placeholder: undefined,
+  classNames: undefined,
+  defaultCountry: undefined,
+};
+
+export default PhoneInput;

package/components/PhoneInput/index.ts

@@ -0,0 +1,2 @@
+// eslint-disable-next-line import/prefer-default-export
+export { PhoneInput } from './PhoneInput';

package/components/PinInput/PinInput.tsx

@@ -0,0 +1,314 @@
+'use client';
+
+import { useEffect, useRef, useState } from 'react';
+import type { ChangeEvent, ClipboardEvent, KeyboardEvent } from 'react';
+import {
+  FieldError,
+  Group,
+  Input,
+  Label,
+  Text,
+  TextField,
+} from 'react-aria-components';
+import { cn } from '../../utils/cn';
+import type { PinInputProps } from './PinInput.types';
+
+/** based on https://github.com/chakra-ui/chakra-ui/blob/main/packages/components/src/pin-input/use-pin-input.ts */
+export function PinInput({
+  description,
+  errorMessage,
+  isDisabled = false,
+  isInvalid = false,
+  isMasked = false,
+  isRequired = true,
+  label,
+  length = 6,
+  name,
+  onChange: controlledOnChange,
+  value = '',
+  type = 'numeric',
+  validationBehavior = 'native',
+  className,
+  classNames,
+  ...props
+}: PinInputProps) {
+  // const [focusedIndex, setFocusedIndex] = useState(-1);
+  const [joinedValue, setJoinedValue] = useState(value);
+  const [values, setValues] = useState<string[]>(Array(length).fill(''));
+  const inputRefs = useRef<HTMLInputElement[]>([]);
+
+  useEffect(() => {
+    inputRefs.current = inputRefs.current.slice(0, length);
+  }, [length]);
+
+  useEffect(() => {
+    const updatedValue = values.join('');
+    setJoinedValue(updatedValue);
+    if (controlledOnChange) controlledOnChange(updatedValue);
+  }, [controlledOnChange, values]);
+
+  //   const onChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+  //     const eventValue = event.target.value;
+  //     const currentValue = values[index];
+  //     const nextValue = getNextValue(currentValue, eventValue);
+  //     const allItems = getAllItems(containerRef.current);
+
+  //     // if the value was removed using backspace
+  //     if (nextValue === '') {
+  //       setValue('', index);
+  //       return;
+  //     }
+
+  //     // in the case of an autocomplete or copy and paste
+  //     if (eventValue.length > 2) {
+  //       // see if we can use the string to fill out our values
+  //       if (validate(eventValue, type)) {
+  //         // Ensure the value matches the number of inputs
+  //         const nextValue = eventValue
+  //           .split('')
+  //           .filter((_, index) => index < allItems.length);
+
+  //         setValues(nextValue);
+  //         // if pasting fills the entire input fields, trigger `onComplete`
+  //         if (nextValue.length === allItems.length) {
+  //           onComplete?.(nextValue.join(''));
+  //         }
+  //       }
+  //     } else {
+  //       // only set if the new value is a number
+  //       if (validate(nextValue, type)) {
+  //         setValue(nextValue, index);
+  //       }
+
+  //       setMoveFocus(true);
+  //     }
+  //   };
+  const onChange = (event: ChangeEvent<HTMLInputElement>) => {
+    const inputValue = event.target.value;
+    const inputIndex = Number(
+      event.target.getAttribute('data-pin-input-index')
+    );
+
+    if (inputValue !== '' && inputIndex < values.length - 1) {
+      inputRefs.current?.[inputIndex + 1]?.focus();
+    }
+
+    const updatedValues = values.map((v, i) =>
+      i === inputIndex ? inputValue : v
+    );
+    setValues(updatedValues);
+
+    // return setValues(updatedValues);
+  };
+
+  const onKeyDown = (event: KeyboardEvent<HTMLInputElement>) => {
+    // const inputValue = event.currentTarget.value;
+    const inputIndex = Number(
+      event.currentTarget.getAttribute('data-pin-input-index')
+    );
+
+    // Allow standard keyboard shortcuts
+    if (event.ctrlKey || event.metaKey) {
+      return;
+    }
+
+    /** @todo is there a better way to pass through control keys? */
+    const allowedKeys = [
+      'Backspace',
+      'Delete',
+      'ArrowLeft',
+      'ArrowRight',
+      'ArrowUp',
+      'ArrowDown',
+      'Control',
+      'Alt',
+      'Meta',
+      'Shift',
+      'Tab',
+      'Enter',
+      'Escape',
+    ];
+
+    const regex = {
+      alpha: /^[a-z]$/i,
+      alphanumeric: /^[a-z0-9]$/i,
+      numeric: /^[0-9]$/i,
+    };
+
+    if (!event.key.match(regex[type]) && !allowedKeys.includes(event.key)) {
+      event.preventDefault();
+    }
+
+    if (
+      values[inputIndex] === '' &&
+      inputIndex > 0 &&
+      event.key === 'Backspace'
+    ) {
+      const updatedValues = values.map((v, i) =>
+        i === inputIndex - 1 ? '' : v
+      );
+      setValues(updatedValues);
+      inputRefs.current?.[inputIndex - 1]?.focus();
+      event.preventDefault();
+    }
+
+    if (
+      values[inputIndex] === '' &&
+      inputIndex < values.length - 1 &&
+      event.key === 'Delete'
+    ) {
+      const updatedValues = values.map((v, i) =>
+        i === inputIndex + 1 ? '' : v
+      );
+      setValues(updatedValues);
+      inputRefs.current?.[inputIndex + 1]?.focus();
+      event.preventDefault();
+    }
+
+    // const prevValues = value;
+    // prevValues[inputIndex] += inputValue;
+    // setValue(prevValues);
+  };
+
+  const onPaste = (event: ClipboardEvent<HTMLInputElement>) => {
+    const inputIndex = Number(
+      event.currentTarget.getAttribute('data-pin-input-index')
+    );
+
+    event.preventDefault();
+
+    const pasteData = event.clipboardData?.getData('text');
+    if (!pasteData) return;
+
+    /** @todo update to fail paste if contains invalid chars? */
+    const splitValue = pasteData.split('').filter((char) => {
+      switch (type) {
+        case 'alpha':
+          return /^[a-zA-Z]$/.test(char);
+        case 'alphanumeric':
+          return /^[a-z0-9]$/i.test(char);
+        case 'numeric':
+        default:
+          return /^[0-9]$/.test(char);
+      }
+    });
+
+    if (splitValue.length === 0) {
+      return;
+    }
+
+    const updatedValues = [...values];
+
+    let focusIndex = inputIndex;
+
+    // eslint-disable-next-line no-plusplus
+    for (let i = 0; i < splitValue.length && inputIndex + i < length; i++) {
+      updatedValues[inputIndex + i] = splitValue[i];
+      focusIndex = inputIndex + i;
+    }
+
+    setValues(updatedValues);
+
+    const nextInputIndex =
+      focusIndex + 1 < length ? focusIndex + 1 : length - 1;
+    inputRefs.current[nextInputIndex]?.focus();
+  };
+
+  return (
+    <Group
+      className={cn('flex flex-wrap gap-2', className)}
+      aria-label={label}
+      // eslint-disable-next-line react/jsx-props-no-spreading
+      {...props}
+    >
+      <Label
+        className={cn(
+          'flex text-slate-500 text-sm grow shrink-0 basis-full',
+          classNames?.label
+        )}
+      >
+        {label}
+      </Label>
+
+      {values.map((v, i) => (
+        <TextField
+          className={cn(
+            'flex flex-col w-full flex-1 text-slate-900',
+            classNames?.inputWrap
+          )}
+          // eslint-disable-next-line react/no-array-index-key
+          key={`pin-input-${i}`}
+          aria-label={`Pin Input Digit ${i + 1}`}
+          isDisabled={isDisabled}
+          isInvalid={isInvalid}
+          isRequired={isRequired}
+          validationBehavior={validationBehavior}
+        >
+          <Input
+            className={cn(
+              'border-solid border border-slate-300 rounded-md',
+              'text-sm text-slate-900 placeholder-slate-400 text-center',
+              'h-10 px-2 py-0 m-0 w-full',
+              'bg-white',
+              'transition-all duration-200 ease-in-out',
+              'hover:border-slate-400',
+              'focus:outline-2 focus:outline focus:outline-slate-200 focus:border-slate-400',
+              'disabled:border-slate-200 disabled:bg-slate-100',
+              'invalid:border-red-500 invalid:bg-red-100 invalid:text-red-600',
+              'invalid:hover:border-red-600 invalid:focus:border-red-600 invalid:focus:outline-red-200',
+              classNames?.input
+            )}
+            onChange={onChange}
+            onKeyDown={onKeyDown}
+            onPaste={onPaste}
+            type={isMasked ? 'password' : 'text'}
+            // eslint-disable-next-line no-return-assign
+            ref={(el) => (el ? (inputRefs.current[i] = el) : null)}
+            value={v}
+            maxLength={1}
+            name={name && `${name}-${i}`}
+            // pattern="[0-9]*"
+            data-pin-input-index={i}
+          />
+          {/* {description && (
+          <StyledText slot="description">{description}</StyledText>
+        )} */}
+        </TextField>
+      ))}
+      <TextField
+        className={cn(
+          'flex flex-row flex-wrap grow shrink-0 basis-full',
+          classNames?.textWrap
+        )}
+        aria-label="Pin Input"
+        isDisabled={isDisabled}
+        isInvalid={isInvalid}
+        isRequired={isRequired}
+        validationBehavior={validationBehavior}
+      >
+        {name && <Input type="hidden" name={name} value={joinedValue} />}
+        {description && (
+          <Text
+            className={cn(
+              'flex text-slate-500 text-sm grow shrink-0 basis-full',
+              classNames?.description
+            )}
+            slot="description"
+          >
+            {description}
+          </Text>
+        )}
+        <FieldError
+          className={cn(
+            'flex text-red-500 text-sm grow shrink-0 basis-full',
+            classNames?.error
+          )}
+        >
+          {errorMessage}
+        </FieldError>
+      </TextField>
+    </Group>
+  );
+}
+
+export default PinInput;

package/components/PinInput/PinInput.types.ts

@@ -0,0 +1,21 @@
+import type { GroupProps, ValidationResult } from 'react-aria-components';
+import type { SlotsToClasses } from '../../types/SlotsToClasses';
+
+/** @todo extend certain textfield props like name, validationBehavior and isRequired */
+export interface PinInputProps extends GroupProps {
+  description?: string;
+  errorMessage?: string | ((validation: ValidationResult) => string);
+  label?: string;
+  length?: number;
+  name?: string;
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  onChange?: (...event: any[]) => void;
+  value?: string;
+  isMasked?: boolean;
+  isRequired?: boolean;
+  type?: 'alpha' | 'alphanumeric' | 'numeric';
+  validationBehavior?: 'native' | 'aria';
+  classNames?: SlotsToClasses<
+    'label' | 'input' | 'description' | 'error' | 'inputWrap' | 'textWrap'
+  >;
+}

package/components/PinInput/index.ts

@@ -0,0 +1,2 @@
+export { PinInput } from './PinInput';
+export type { PinInputProps } from './PinInput.types';

package/components/Progressbar/CircularProgressbar.tsx

@@ -0,0 +1,71 @@
+'use client';
+
+import { ProgressBar, Label } from 'react-aria-components';
+import { cn } from '../../utils/cn';
+import type { CircularProgressbarProps } from './CircularProgressbar.types';
+
+export function CircularProgressbar({
+  label,
+  value = 0,
+  showValue = true,
+  size = 60,
+  strokeWidth = 6,
+  className,
+  classNames,
+  ...props
+}: CircularProgressbarProps) {
+  const center = size / 2;
+  const radius = center - strokeWidth;
+  const circumference = 2 * Math.PI * radius;
+
+  return (
+    <ProgressBar
+      aria-label="Loading..."
+      className={cn('flex', className)}
+      // eslint-disable-next-line react/jsx-props-no-spreading
+      {...props}
+      value={value}
+    >
+      {({ percentage = 0 }) => (
+        <div className={cn('flex items-center flex-col', classNames?.base)}>
+          <Label className={cn('text-sm', classNames?.label)}>{label}</Label>
+          <svg width={size} height={size} fill="none">
+            <circle
+              className={cn('stroke-slate-300')}
+              cx={center}
+              cy={center}
+              r={radius}
+              strokeWidth={strokeWidth}
+            />
+            <circle
+              className={cn(
+                'stroke-slate-800 transition-stroke-dashoffset duration-500 ease-in-out'
+              )}
+              cx={center}
+              cy={center}
+              r={radius}
+              strokeWidth={strokeWidth}
+              strokeDasharray={`${circumference} ${circumference}`}
+              strokeDashoffset={((100 - percentage) / 100) * circumference}
+              strokeLinecap="round"
+              transform={`rotate(-90 ${center} ${center})`}
+            />
+            {showValue && (
+              <text
+                className={cn('text-sm fill-slate-800', classNames?.value)}
+                x="50%"
+                y="50%"
+                alignmentBaseline="middle"
+                textAnchor="middle"
+              >
+                {percentage}%
+              </text>
+            )}
+          </svg>
+        </div>
+      )}
+    </ProgressBar>
+  );
+}
+
+export default CircularProgressbar;

package/components/Progressbar/CircularProgressbar.types.ts

@@ -0,0 +1,10 @@
+import type { ProgressBarProps } from 'react-aria-components';
+import type { SlotsToClasses } from '../../types/SlotsToClasses';
+
+export interface CircularProgressbarProps extends ProgressBarProps {
+  label?: string;
+  showValue?: boolean;
+  size?: number;
+  strokeWidth?: number;
+  classNames?: SlotsToClasses<'label' | 'base' | 'value'>;
+}

package/components/Progressbar/LinearProgressbar.tsx

@@ -0,0 +1,75 @@
+'use client';
+
+import { ProgressBar, Label } from 'react-aria-components';
+import { motion } from 'framer-motion';
+import { cn } from '../../utils/cn';
+import type { LinearProgressbarProps } from './LinearProgressbar.types';
+
+export function LinearProgressbar({
+  label,
+  isIndeterminate,
+  showValue = true,
+  width,
+  className,
+  classNames,
+  ...props
+}: LinearProgressbarProps) {
+  return (
+    <ProgressBar
+      style={{ width: width || '100%' }}
+      className={cn('overflow-hidden', className)}
+      // eslint-disable-next-line react/jsx-props-no-spreading
+      {...props}
+    >
+      {({ percentage, valueText }) => (
+        <>
+          <div
+            className={cn(
+              'flex items-center justify-between gap-2 mb-1',
+              classNames?.labelWrapper
+            )}
+          >
+            <Label className={cn('text-sm', classNames?.label)}>{label}</Label>
+            {showValue && (
+              <span className={cn('text-sm', classNames?.value)}>
+                {valueText}
+              </span>
+            )}
+          </div>
+          <div
+            className={cn(
+              'overflow-hidden forced-color-adjust-none h-2.5 rounded will-change-transform bg-slate-300',
+              classNames?.trackWrapper
+            )}
+          >
+            <motion.div
+              style={{
+                width:
+                  !isIndeterminate && typeof percentage === 'number'
+                    ? `${percentage}%`
+                    : '',
+              }}
+              // eslint-disable-next-line react/jsx-props-no-spreading
+              {...(isIndeterminate && {
+                animate: {
+                  x: ['-100%', '250px'],
+                },
+                transition: { repeat: Infinity, duration: 1.5 },
+              })}
+              className={cn(
+                'h-full bg-slate-800 rounded transition-width duration-500 ease-in-out',
+                {
+                  'w-1/2': isIndeterminate,
+                  'transition-none': isIndeterminate,
+                },
+                classNames?.track
+              )}
+            />
+          </div>
+        </>
+      )}
+    </ProgressBar>
+  );
+}
+
+export default LinearProgressbar;