@clicktap/ui 0.14.12 → 0.14.13

package/components/CreditCardExpirationInput/CreditCardExpirationInput.tsx

@@ -0,0 +1,115 @@
+'use client';
+
+import { NumberFormatBase, NumberFormatValues } from 'react-number-format';
+import type { InputAttributes } from 'react-number-format';
+import {
+  FieldError,
+  Input,
+  Label,
+  Text,
+  TextField,
+} from 'react-aria-components';
+import { useEffect, useState } from 'react';
+import { cn } from '../../utils/cn';
+import type { CreditCardExpirationInputProps } from './CreditCardExpirationInput.types';
+
+function AriaInput({ className, ...props }: InputAttributes) {
+  return (
+    <Input
+      className={cn(
+        'border-solid border border-slate-300 rounded-md',
+        'text-sm text-slate-900 placeholder-slate-400',
+        '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',
+        className
+      )}
+      // eslint-disable-next-line react/jsx-props-no-spreading
+      {...props}
+    />
+  );
+}
+
+export function CreditCardExpirationInput({
+  label,
+  description,
+  errorMessage,
+  placeholder,
+  value,
+  className,
+  classNames,
+  onChange,
+  ...props
+}: CreditCardExpirationInputProps) {
+  const [inputValue, setInputValue] = useState(value || '');
+
+  useEffect(() => {
+    setInputValue(value || '');
+  }, [value]);
+
+  const format = (val: string) => {
+    if (val === '') return '';
+    let month = val.substring(0, 2);
+    const year = val.substring(2, 4);
+
+    if (month.length === 1 && Number(month[0]) > 1) {
+      month = `0${month[0]}`;
+    } else if (month.length === 2) {
+      // set the lower and upper boundary
+      if (Number(month) === 0) {
+        month = `01`;
+      } else if (Number(month) > 12) {
+        month = '12';
+      }
+    }
+
+    return `${month}/${year}`;
+  };
+
+  const handleValueChange = (values: NumberFormatValues) => {
+    setInputValue(values.formattedValue);
+    if (onChange) {
+      onChange(values.formattedValue);
+    }
+  };
+
+  return (
+    <TextField
+      className={cn('flex flex-col w-full text-slate-900', className)}
+      // eslint-disable-next-line react/jsx-props-no-spreading
+      {...props}
+    >
+      <Label className={cn('flex text-slate-500 text-xs', classNames?.label)}>
+        {label}
+      </Label>
+      <NumberFormatBase
+        format={format}
+        customInput={AriaInput}
+        className={cn(classNames?.input)}
+        placeholder={placeholder}
+        value={inputValue}
+        onValueChange={handleValueChange}
+      />
+      {description && (
+        <Text
+          className={cn('flex text-slate-500 text-sm', classNames?.description)}
+          slot="description"
+        >
+          {description}
+        </Text>
+      )}
+      <FieldError
+        className={cn('flex text-red-500 text-sm', classNames?.error)}
+      >
+        {errorMessage}
+      </FieldError>
+    </TextField>
+  );
+}
+
+export default CreditCardExpirationInput;

package/components/CreditCardExpirationInput/CreditCardExpirationInput.types.ts

@@ -0,0 +1,10 @@
+import type { TextFieldProps, ValidationResult } from 'react-aria-components';
+import type { SlotsToClasses } from '../../types/SlotsToClasses';
+
+export interface CreditCardExpirationInputProps extends TextFieldProps {
+  label?: string;
+  description?: string;
+  errorMessage?: string | ((validation: ValidationResult) => string);
+  placeholder?: string;
+  classNames?: SlotsToClasses<'label' | 'input' | 'description' | 'error'>;
+}

package/components/CreditCardExpirationInput/index.ts

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

package/components/CreditCardInput/CreditCardInput.tsx

@@ -0,0 +1,147 @@
+'use client';
+
+import { useState, useEffect } from 'react';
+import { NumberFormatBase } from 'react-number-format';
+import type { InputAttributes, NumberFormatValues } from 'react-number-format';
+import {
+  FieldError,
+  Input,
+  Label,
+  Text,
+  TextField,
+} from 'react-aria-components';
+import { cn } from '../../utils/cn';
+import type { CreditCardInputProps } from './CreditCardInput.types';
+
+const getCardFormat = (cardNumber: string) => {
+  const cardPatterns = [
+    { regex: /^4[0-9]{0,15}/, format: '#### #### #### ####' }, // Visa
+    { regex: /^5[1-5][0-9]{0,14}/, format: '#### #### #### ####' }, // MasterCard
+    { regex: /^3[47][0-9]{0,13}/, format: '#### ###### #####' }, // American Express
+    { regex: /^6(?:011|5[0-9]{2})[0-9]{0,12}/, format: '#### #### #### ####' }, // Discover
+    { regex: /^3(?:0[0-5]|[68][0-9])[0-9]{0,11}/, format: '#### ###### ####' }, // Diners Club
+    { regex: /^(?:2131|1800|35\d{3})\d{0,11}/, format: '#### #### #### ####' }, // JCB
+  ];
+
+  const matchingPattern = cardPatterns.find((cardPattern) =>
+    cardPattern.regex.test(cardNumber)
+  );
+  if (matchingPattern) {
+    return matchingPattern.format;
+  }
+
+  // Default format if no match found
+  return '#### #### #### #### ###';
+};
+
+function AriaInput({ className, ...props }: InputAttributes) {
+  return (
+    <Input
+      className={cn(
+        'border-solid border border-slate-300 rounded-md',
+        'text-sm text-slate-900 placeholder-slate-400',
+        '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',
+        className
+      )}
+      // eslint-disable-next-line react/jsx-props-no-spreading
+      {...props}
+    />
+  );
+}
+
+export function CreditCardInput({
+  label,
+  description,
+  errorMessage,
+  placeholder,
+  value,
+  onChange,
+  className,
+  classNames,
+  ...props
+}: CreditCardInputProps) {
+  const [inputValue, setInputValue] = useState(value || '');
+
+  useEffect(() => {
+    setInputValue(value || '');
+  }, [value]);
+
+  const format = (val: string) => {
+    if (val === '') return '';
+    const cleanedVal = val.replace(/\s+/g, '');
+    const cardFormat = getCardFormat(cleanedVal);
+
+    // Add spaces according to the format
+    let formattedVal = '';
+    let position = 0;
+
+    for (let i = 0; i < cardFormat.length; i += 1) {
+      if (cardFormat[i] === '#') {
+        if (position < cleanedVal.length) {
+          formattedVal += cleanedVal[position];
+          position += 1;
+        } else {
+          break;
+        }
+      } else {
+        formattedVal += cardFormat[i];
+      }
+    }
+
+    return formattedVal;
+  };
+
+  const handleValueChange = (values: NumberFormatValues) => {
+    const cleanedVal = values.value.replace(/\s+/g, '');
+    const cardFormat = getCardFormat(cleanedVal);
+    const maxLength = cardFormat.replace(/[^#]/g, '').length;
+    const truncatedVal = cleanedVal.slice(0, maxLength);
+
+    setInputValue(truncatedVal);
+    if (onChange) {
+      onChange(truncatedVal);
+    }
+  };
+
+  return (
+    <TextField
+      className={cn('flex flex-col w-full text-slate-900', className)}
+      // eslint-disable-next-line react/jsx-props-no-spreading
+      {...props}
+    >
+      <Label className={cn('flex text-slate-500 text-sm', classNames?.label)}>
+        {label}
+      </Label>
+      <NumberFormatBase
+        value={inputValue}
+        format={format}
+        customInput={AriaInput}
+        className={cn(classNames?.input)}
+        placeholder={placeholder}
+        onValueChange={handleValueChange}
+      />
+      {description && (
+        <Text
+          className={cn('flex text-slate-500 text-sm', classNames?.description)}
+          slot="description"
+        >
+          {description}
+        </Text>
+      )}
+      <FieldError
+        className={cn('flex text-red-500 text-sm', classNames?.error)}
+      >
+        {errorMessage}
+      </FieldError>
+    </TextField>
+  );
+}
+
+export default CreditCardInput;

package/components/CreditCardInput/CreditCardInput.types.ts

@@ -0,0 +1,12 @@
+import type { TextFieldProps, ValidationResult } from 'react-aria-components';
+import type { SlotsToClasses } from '../../types/SlotsToClasses';
+
+export interface CreditCardInputProps extends TextFieldProps {
+  label?: string;
+  description?: string;
+  errorMessage?: string | ((validation: ValidationResult) => string);
+  placeholder?: string;
+  value?: string;
+  onChange?: (value: string) => void;
+  classNames?: SlotsToClasses<'label' | 'input' | 'description' | 'error'>;
+}

package/components/CreditCardInput/index.ts

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

package/components/DateInput/DateInput.tsx

@@ -0,0 +1,81 @@
+'use client';
+
+import {
+  DateField,
+  DateInput as AriaDateInput,
+  DateSegment,
+  FieldError,
+  Label,
+  Text,
+} from 'react-aria-components';
+import { cn } from '../../utils/cn';
+import type { DateInputProps } from './DateInput.types';
+
+export function DateInput({
+  label,
+  description,
+  errorMessage,
+  className,
+  classNames,
+  ...props
+}: DateInputProps) {
+  return (
+    <DateField
+      className={cn('text-slate-900', className)}
+      // eslint-disable-next-line react/jsx-props-no-spreading
+      {...props}
+    >
+      <Label className={cn('flex text-slate-500 text-xs', classNames?.label)}>
+        {label}
+      </Label>
+      <AriaDateInput
+        className={cn(
+          'flex items-center',
+          'border-solid border border-slate-300 rounded-md',
+          'text-sm text-slate-900',
+          'h-10 px-1 py-0 m-0 w-full',
+          'bg-white',
+          'transition-all duration-200 ease-in-out',
+          'hover:border-slate-400',
+          'focus-within:outline-2 focus-within:outline focus-within:outline-slate-200 focus-within: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-within:border-red-600 invalid:focus-within:outline-red-200',
+          classNames?.input
+        )}
+      >
+        {(segment) => (
+          <DateSegment
+            segment={segment}
+            className={cn(
+              'p-1 tabular-nums text-end text-slate-900',
+              'invalid:text-red-500',
+              'disabled:cursor-default disabled:select-none disabled:text-slate-400',
+              'focus:text-slate-900 focus:bg-slate-200 focus:outline-0 focus:rounded-md focus:caret-transparent focus:invalid:bg-red-500 focus:invalid:text-white',
+              'type-literal:p-0',
+              'data-[placeholder]:text-slate-400 data-[placeholder]:invalid:text-red-500 data-[placeholder]:invalid:focus:text-white',
+              'aria-[readonly]:focus-visible:outline aria-[readonly]:focus-visible:outline-slate-500 aria-[readonly]:focus-visible:outline-1',
+              'aria-[readonly]:focus:outline aria-[readonly]:focus:outline-slate-500 aria-[readonly]:focus:bg-transparent aria-[readonly]:focus:outline-2',
+              classNames?.segment
+            )}
+          />
+        )}
+      </AriaDateInput>
+      {description && (
+        <Text
+          className={cn('flex text-slate-500 text-sm', classNames?.description)}
+          slot="description"
+        >
+          {description}
+        </Text>
+      )}
+      <FieldError
+        className={cn('flex text-red-500 text-sm', classNames?.error)}
+      >
+        {errorMessage}
+      </FieldError>
+    </DateField>
+  );
+}
+
+export default DateInput;

package/components/DateInput/DateInput.types.ts

@@ -0,0 +1,15 @@
+import type {
+  DateFieldProps,
+  DateValue,
+  ValidationResult,
+} from 'react-aria-components';
+import type { SlotsToClasses } from '../../types/SlotsToClasses';
+
+export interface DateInputProps extends DateFieldProps<DateValue> {
+  label?: string;
+  description?: string;
+  errorMessage?: string | ((validation: ValidationResult) => string);
+  classNames?: SlotsToClasses<
+    'label' | 'input' | 'description' | 'error' | 'segment'
+  >;
+}

package/components/DateInput/index.ts

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

package/components/DateTimeFormat/DateTimeFormat.tsx

@@ -0,0 +1,16 @@
+'use client';
+
+import type { DateTimeFormatProps } from './DateTimeFormat.types';
+
+export function DateTimeFormat({
+  locale = 'en-US',
+  fallback = '-',
+  children,
+  ...options
+}: DateTimeFormatProps) {
+  return children && !Number.isNaN(new Date(children).valueOf())
+    ? new Intl.DateTimeFormat(locale, options).format(new Date(children))
+    : fallback;
+}
+
+export default DateTimeFormat;

package/components/DateTimeFormat/DateTimeFormat.types.ts

@@ -0,0 +1,7 @@
+import type { ReactNode } from 'react';
+
+export type DateTimeFormatProps = Intl.DateTimeFormatOptions & {
+  locale?: string;
+  fallback?: ReactNode;
+  children?: string | Date;
+};

package/components/DateTimeFormat/index.ts

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

package/components/Dialog/Dialog.tsx

@@ -0,0 +1,65 @@
+'use client';
+
+import { forwardRef } from 'react';
+import type { Ref, ReactNode } from 'react';
+import { Dialog as AriaDialog } from 'react-aria-components';
+import { motion } from 'framer-motion';
+import { cn } from '../../utils/cn';
+import type { DialogProps } from './Dialog.types';
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+const ForwardedDialog = forwardRef<HTMLElement, any>(
+  ({ style, animationVariants, ...props }, ref: Ref<HTMLElement>) => {
+    // Separate the dynamic style logic
+    // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment, @typescript-eslint/no-unsafe-call
+    const ariaStyle = typeof style === 'function' ? style(props) : style;
+
+    return (
+      // Pass only static styles to framer-motion
+      // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment, react/jsx-props-no-spreading
+      <AriaDialog {...props} ref={ref} style={ariaStyle} />
+    );
+  }
+);
+
+const MotionDialog = motion.create(ForwardedDialog);
+
+export function Dialog({
+  className,
+  children,
+  animationVariants,
+  ...props
+}: DialogProps) {
+  return (
+    <MotionDialog
+      className={cn(
+        'p-8 outline-0 max-w-max w-screen absolute top-2/4 left-2/4',
+        'shadow-[0_8px_24px_rgba(0,0,0,0.1)] rounded-lg bg-white border border-solid border-slate-400',
+        'transform -translate-x-1/2 -translate-y-1/2',
+        className
+      )}
+      // eslint-disable-next-line react/jsx-props-no-spreading
+      {...props}
+      variants={
+        animationVariants || {
+          hidden: {
+            transform: 'translate(-50%, -50%) scale(0.8)',
+            transition: {
+              ease: 'backIn',
+            },
+          },
+          visible: {
+            transform: 'translate(-50%, -50%) scale(1)',
+            transition: {
+              ease: 'backOut',
+            },
+          },
+        }
+      }
+    >
+      {children as ReactNode}
+    </MotionDialog>
+  );
+}
+
+export default Dialog;

package/components/Dialog/Dialog.types.ts

@@ -0,0 +1,9 @@
+import type { Key } from 'react';
+import type { DialogProps as UIDialogProps } from 'react-aria-components';
+import { MotionStyle, Variants } from 'framer-motion';
+
+export type DialogProps = UIDialogProps & {
+  key?: Key;
+  style?: MotionStyle;
+  animationVariants?: Variants;
+};

package/components/Dialog/index.ts

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

package/components/DialogTrigger/DialogTrigger.tsx

@@ -0,0 +1,45 @@
+'use client';
+
+import { createContext, useState, useMemo, useContext } from 'react';
+import type { Dispatch, SetStateAction } from 'react';
+import { DialogTrigger as UIDialogTrigger } from 'react-aria-components';
+import type { DialogTriggerProps } from 'react-aria-components';
+import type { DriverAnimationState } from './DialogTrigger.types';
+
+const DialogTriggerContext = createContext<{
+  animation: DriverAnimationState;
+  setAnimation: Dispatch<SetStateAction<DriverAnimationState>>;
+  onOpenChange: (isOpen: boolean) => void;
+}>({
+  animation: 'unmounted',
+  setAnimation: () => {},
+  onOpenChange: () => {},
+});
+
+export const useDialogTrigger = () => useContext(DialogTriggerContext);
+
+export function DialogTrigger(props: DialogTriggerProps) {
+  const [animation, setAnimation] = useState<DriverAnimationState>('unmounted');
+
+  const onOpenChange = (isOpen: boolean) => {
+    setAnimation(isOpen ? 'visible' : 'hidden');
+  };
+
+  const value = useMemo(
+    () => ({
+      animation,
+      setAnimation,
+      onOpenChange,
+    }),
+    [animation]
+  );
+
+  return (
+    <DialogTriggerContext.Provider value={value}>
+      {/* eslint-disable-next-line react/jsx-props-no-spreading */}
+      <UIDialogTrigger {...props} onOpenChange={onOpenChange} />
+    </DialogTriggerContext.Provider>
+  );
+}
+
+export default DialogTrigger;

package/components/DialogTrigger/DialogTrigger.types.ts

@@ -0,0 +1,6 @@
+import type { DialogTriggerProps as UIDialogTriggerProps } from 'react-aria-components';
+
+/** @todo this feels like it should be renamed, maybe moved to modal directly */
+export type DriverAnimationState = 'unmounted' | 'visible' | 'hidden';
+
+export type DialogTriggerProps = UIDialogTriggerProps;

package/components/DialogTrigger/index.ts

@@ -0,0 +1,5 @@
+export { DialogTrigger, useDialogTrigger } from './DialogTrigger';
+export type {
+  DriverAnimationState,
+  DialogTriggerProps,
+} from './DialogTrigger.types';

package/components/Divider/Divider.stories.tsx

@@ -0,0 +1,37 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { SeparatorProps } from 'react-aria';
+import { Divider } from './Divider';
+
+type Story = StoryObj<typeof Divider>;
+
+function Component(props: SeparatorProps) {
+  const { orientation } = props;
+  const display = orientation === 'vertical' ? 'flex' : 'block';
+
+  return (
+    <div style={{ display }}>
+      <div>Lorem ipsum dolor sit amet consectetur, adipisicing elit.</div>
+      {/* eslint-disable-next-line react/jsx-props-no-spreading */}
+      <Divider {...props} />
+      <div>Lorem ipsum dolor sit amet consectetur, adipisicing elit.</div>
+    </div>
+  );
+}
+
+const meta: Meta<typeof Divider> = {
+  component: Component,
+};
+
+export default meta;
+
+export const Example: Story = {
+  argTypes: {
+    orientation: {
+      options: ['horizontal', 'vertical'],
+      control: 'select',
+    },
+  },
+  args: {
+    orientation: 'horizontal',
+  },
+};

package/components/Divider/Divider.tsx

@@ -0,0 +1,34 @@
+'use client';
+
+import { useSeparator } from 'react-aria';
+import { cn } from '../../utils/cn';
+import type { DividerProps } from './Divider.types';
+
+export function Divider({
+  orientation = 'horizontal',
+  className,
+  ...props
+}: DividerProps) {
+  const { separatorProps } = useSeparator({ ...props, orientation });
+  const combinedProps = { ...props, ...separatorProps };
+
+  return (
+    <div
+      // eslint-disable-next-line react/jsx-props-no-spreading
+      {...combinedProps}
+      className={cn(
+        'bg-slate-200',
+        ['w-full', 'h-px', 'my-4', 'mx-0'],
+        [
+          'aria-[orientation=vertical]:w-px',
+          'aria-[orientation=vertical]:h-auto',
+          'aria-[orientation=vertical]:my-0',
+          'aria-[orientation=vertical]:mx-4',
+        ],
+        className
+      )}
+    />
+  );
+}
+
+export default Divider;

package/components/Divider/Divider.types.ts

@@ -0,0 +1,5 @@
+import { SeparatorProps } from 'react-aria';
+
+export type DividerProps = SeparatorProps & {
+  className?: string;
+};

package/components/Divider/index.ts

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