@cleen/ui 0.1.0 → 0.1.2

package/src/components/creditCardInput/CreditCardInput.tsx

@@ -1,236 +0,0 @@
-import { InfoLabels } from '@/components/infoLabels';
-import { Input } from '@/components/input';
-import { Loader } from '@/components/loader';
-import { cn } from '@cleen/ui-core';
-import {
-  forwardRef,
-  useMemo,
-  useState,
-  type ChangeEvent,
-  type FocusEvent,
-} from 'react';
-import type { CardData } from './types/card';
-import type { CreditCardInputProps } from './types/props';
-import {
-  formatCardNumber,
-  formatCVC,
-  formatExpirationDate,
-  getIssuer,
-} from './util/format';
-
-/**
- * The `CreditCardInput` component provides a user interface for securely collecting credit card information.
- * It displays a visual representation of the card and includes input fields for the cardholder's card number, expiration date and CVC. The component handles formatting and validation for each field, displays error messages, and supports loading states for asynchronous operations.
- */
-export const CreditCardInput = forwardRef<HTMLDivElement, CreditCardInputProps>(
-  function CreditCardInput(
-    {
-      labels,
-      value,
-      isLoading,
-      errors,
-      className,
-      classNames,
-      style,
-      styles,
-      infoLabels,
-      onChange,
-      onFieldFocus,
-      ...props
-    },
-    ref
-  ) {
-    const [internalCardData, setInternalCardData] = useState<CardData>({
-      number: '',
-      expiry: '',
-      cvc: '',
-    });
-    const isControlled = !!value;
-    const cardData = isControlled ? value : internalCardData;
-
-    const issuer = useMemo(() => getIssuer(cardData.number), [cardData.number]);
-
-    const handleInputChange = (e: ChangeEvent<HTMLInputElement>) => {
-      const { name } = e.target;
-      let { value: newValue } = e.target;
-
-      switch (name) {
-        case 'number':
-          newValue = formatCardNumber(newValue, issuer);
-          break;
-
-        case 'expiry':
-          newValue = formatExpirationDate(newValue);
-          break;
-
-        case 'cvc':
-          newValue = formatCVC(newValue);
-          break;
-
-        default:
-          return;
-      }
-
-      if (!isControlled) {
-        setInternalCardData(prev => ({ ...prev, [name]: newValue }));
-      }
-
-      onChange?.({
-        ...value,
-        [name]: newValue,
-      } as CardData);
-    };
-
-    const handleInputFocus = (e: FocusEvent<HTMLInputElement>) => {
-      onFieldFocus?.(e.target.name as keyof CardData);
-    };
-
-    return (
-      <div
-        className={cn('cleen', className)}
-        style={style}
-        ref={ref}
-        {...props}
-      >
-        <div
-          className={cn(
-            'cleen-flex cleen-flex-wrap cleen-justify-center cleen-items-start cleen-gap-8 cleen-bg-background cleen-min-w-80 cleen-w-min cleen-border cleen-border-primary/20 cleen-rounded-[10px] cleen-shadow-lg',
-            classNames?.container
-          )}
-          style={styles?.container}
-        >
-          {isLoading ? (
-            <div
-              className={cn('cleen-py-4', classNames?.loader?.container)}
-              style={styles?.loader?.container}
-            >
-              <Loader
-                {...classNames?.loader?.component}
-                {...styles?.loader?.component}
-              />
-            </div>
-          ) : (
-            <form
-              className={cn(
-                'cleen-flex cleen-flex-col cleen-items-start cleen-gap-3 cleen-p-4',
-                classNames?.form?.container
-              )}
-              style={styles?.form?.container}
-              onSubmit={e => e.preventDefault()}
-            >
-              <Input
-                label={labels?.number}
-                name="number"
-                type="tel"
-                autoComplete="cc-number"
-                className={cn(
-                  'cleen-w-full',
-                  classNames?.form?.cardNumber?.className
-                )}
-                classNames={{
-                  ...classNames?.form?.cardNumber?.classNames,
-                  inputContainer: cn(
-                    {
-                      'cleen-border-error': errors?.number,
-                    },
-                    classNames?.form?.cardNumber?.classNames?.inputContainer
-                  ),
-                  input: cn(
-                    {
-                      'cleen-text-error': errors?.number,
-                    },
-                    classNames?.form?.cardNumber?.classNames?.input
-                  ),
-                }}
-                {...styles?.form?.cardNumber}
-                placeholder="1111 1111 1111 1111"
-                value={cardData.number}
-                onChange={handleInputChange}
-                onFocus={handleInputFocus}
-                infoLabels={{
-                  errorMessage: errors?.number,
-                }}
-              />
-
-              <div
-                className={cn(
-                  'cleen-flex cleen-justify-between cleen-items-start cleen-gap-3 cleen-w-full',
-                  classNames?.form?.cvcExpiryContainer
-                )}
-                style={styles?.form?.cvcExpiryContainer}
-              >
-                <Input
-                  label={labels?.expiry}
-                  name="expiry"
-                  type="tel"
-                  autoComplete="cc-exp"
-                  className={classNames?.form?.expiry?.className}
-                  classNames={{
-                    ...classNames?.form?.expiry?.classNames,
-                    inputContainer: cn(
-                      {
-                        'cleen-border-error': errors?.expiry,
-                      },
-                      classNames?.form?.expiry?.classNames?.inputContainer
-                    ),
-                    input: cn(
-                      {
-                        'cleen-text-error': errors?.expiry,
-                      },
-                      classNames?.form?.expiry?.classNames?.input
-                    ),
-                  }}
-                  {...styles?.form?.expiry}
-                  placeholder="00/00"
-                  value={cardData.expiry}
-                  onChange={handleInputChange}
-                  onFocus={handleInputFocus}
-                  infoLabels={{
-                    errorMessage: errors?.expiry,
-                  }}
-                />
-
-                <Input
-                  label={labels?.cvc}
-                  name="cvc"
-                  type="tel"
-                  inputMode="numeric"
-                  autoComplete="cc-csc"
-                  maxLength={issuer === 'amex' ? 4 : 3}
-                  className={classNames?.form?.cvc?.className}
-                  classNames={{
-                    ...classNames?.form?.cvc?.classNames,
-                    inputContainer: cn(
-                      {
-                        'cleen-border-error': errors?.cvc,
-                      },
-                      classNames?.form?.cvc?.classNames?.inputContainer
-                    ),
-                    input: cn(
-                      {
-                        'cleen-text-error': errors?.cvc,
-                      },
-                      classNames?.form?.cvc?.classNames?.input
-                    ),
-                  }}
-                  {...styles?.form?.cvc}
-                  placeholder="***"
-                  value={cardData.cvc}
-                  onChange={handleInputChange}
-                  onFocus={handleInputFocus}
-                  infoLabels={{
-                    errorMessage: errors?.cvc,
-                  }}
-                />
-              </div>
-
-              {(infoLabels?.infoMessage ||
-                infoLabels?.errorMessage ||
-                infoLabels?.subtitle) && <InfoLabels {...infoLabels} />}
-            </form>
-          )}
-        </div>
-      </div>
-    );
-  }
-);

package/src/components/creditCardInput/index.ts

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

package/src/components/creditCardInput/types/card.ts

@@ -1,13 +0,0 @@
-import type { ReactNode } from 'react';
-
-export interface CardData {
-  number: string;
-  expiry: string;
-  cvc: string;
-}
-
-export type CardLabels = {
-  [key in keyof CardData]?: ReactNode;
-};
-
-export type CardErrors = CardLabels;

package/src/components/creditCardInput/types/props.ts

@@ -1,44 +0,0 @@
-import type { InfoLabelsProps } from '@/components/infoLabels/InfoLabels';
-import type { InputProps } from '@/components/input/Input';
-import type { LoaderProps } from '@/components/loader/Loader';
-import type { ComponentClassnames, ComponentStyles } from '@cleen/ui-core';
-import type { ComponentProps, CSSProperties } from 'react';
-import type { CardData, CardErrors, CardLabels } from './card';
-
-export type CreditCardInputProps = Omit<ComponentProps<'div'>, 'onChange'> & {
-  isLoading?: boolean;
-  value?: CardData;
-  labels?: CardLabels;
-  errors?: CardErrors;
-  classNames?: {
-    container?: string;
-    loader?: {
-      container?: string;
-      component?: ComponentClassnames<LoaderProps>;
-    };
-    form?: {
-      container?: string;
-      cvcExpiryContainer?: string;
-      cardNumber?: ComponentClassnames<InputProps>;
-      expiry?: ComponentClassnames<InputProps>;
-      cvc?: ComponentClassnames<InputProps>;
-    };
-  };
-  styles?: {
-    container?: CSSProperties;
-    loader?: {
-      container?: CSSProperties;
-      component?: ComponentStyles<LoaderProps>;
-    };
-    form?: {
-      container?: CSSProperties;
-      cvcExpiryContainer?: CSSProperties;
-      cardNumber?: ComponentStyles<InputProps>;
-      expiry?: ComponentStyles<InputProps>;
-      cvc?: ComponentStyles<InputProps>;
-    };
-  };
-  infoLabels?: InfoLabelsProps;
-  onChange?: (value: CardData) => void;
-  onFieldFocus?: (fieldName: keyof CardData) => void;
-};

package/src/components/creditCardInput/util/format.ts

@@ -1,102 +0,0 @@
-export const clearNumber = (value = '') => {
-  return value.replace(/\D+/g, '');
-};
-
-export const getIssuer = (value: string) => {
-  switch (value.slice(0, 2)) {
-    case '34':
-    case '37':
-      return 'amex';
-
-    case '36':
-      return 'dinersclub';
-
-    default:
-      return 'other';
-  }
-};
-
-export function formatCardNumber(
-  value: string,
-  issuer: ReturnType<typeof getIssuer> = 'other'
-) {
-  if (!value) {
-    return value;
-  }
-
-  const clearValue = clearNumber(value);
-  let nextValue;
-
-  switch (issuer) {
-    case 'amex':
-      nextValue = `${clearValue.slice(0, 4)} ${clearValue.slice(4, 10)} ${clearValue.slice(10, 15)}`;
-      break;
-    case 'dinersclub':
-      nextValue = `${clearValue.slice(0, 4)} ${clearValue.slice(4, 10)} ${clearValue.slice(10, 14)}`;
-      break;
-    default:
-      nextValue = `${clearValue.slice(0, 4)} ${clearValue.slice(4, 8)} ${clearValue.slice(8, 12)} ${clearValue.slice(
-        12,
-        19
-      )}`;
-      break;
-  }
-
-  return nextValue.trim();
-}
-
-export const formatCVC = (value: string) => {
-  return clearNumber(value);
-};
-
-export function formatExpirationDate(value: string) {
-  const clearValue = clearNumber(value);
-
-  // If the value is empty or the first character is 2 or greater, return an empty string
-  if (!clearValue || parseInt(clearValue.charAt(0), 10) >= 2) {
-    return '';
-  }
-
-  // If the value is less than 2 characters, return it as is
-  if (clearValue.length < 2) {
-    return clearValue;
-  }
-
-  // Extract the month part
-  const month = clearValue.slice(0, 2);
-
-  // Check if the month is a valid number between 01 and 12
-  if (parseInt(month, 10) < 1 || parseInt(month, 10) > 12) {
-    return clearValue.slice(0, 1); // Return the first digit if the month is invalid
-  }
-
-  // If the value is between 2 and 4 characters, return the formatted MM
-  if (clearValue.length < 3) {
-    return month;
-  }
-
-  // If the value is 3 characters, return month/year format
-  if (clearValue.length === 3) {
-    return `${month}/${clearValue.charAt(2)}`;
-  }
-
-  // Extract the year part
-  const year =
-    clearValue.length === 6 ? clearValue.slice(-2) : clearValue.slice(2, 4);
-
-  // Get the current date
-  const now = new Date();
-  const currentYear = now.getFullYear() % 100; // Get last two digits of the current year
-  const currentMonth = now.getMonth() + 1; // Months are 0-based, so add 1
-
-  // Validate the year and month to ensure it's not in the past
-  if (
-    parseInt(year, 10) < currentYear ||
-    (parseInt(year, 10) === currentYear && parseInt(month, 10) < currentMonth)
-  ) {
-    return `${month}/${year.charAt(0)}`; // Return the month part with a single year digit if the year is invalid
-  }
-
-  // Format the expiration date as MM/YY
-  return `${month}/${year}`;
-}

package/src/components/datePicker/DatePicker.tsx

@@ -1,235 +0,0 @@
-import { Button } from '@/components/button';
-import { Card } from '@/components/card';
-import type { DatePickerProps } from '@/components/datePicker/types/props';
-import { selectMinMaxDate } from '@/components/datePicker/utils/date';
-import { Dropdown } from '@/components/dropdown';
-import { InfoLabels } from '@/components/infoLabels';
-import { cn } from '@cleen/ui-core';
-import { forwardRef, useMemo, useState } from 'react';
-import {
-  DayPicker,
-  type DateRange,
-  type DayPickerProps,
-  type Matcher,
-} from 'react-day-picker';
-
-/**
- * The `DatePicker` component is a controlled or uncontrolled date selection interface that combines a dropdown trigger with a calendar picker. It supports both single date and date range selection modes with customizable label, optional styling, and class name support for both the wrapper and internal DayPicker component.
- */
-export const DatePicker = forwardRef<HTMLDivElement, DatePickerProps>(
-  function DatePicker(
-    {
-      label,
-      placeholder,
-      infoLabels,
-      selected,
-      onSelect,
-      leftIcon,
-      rightIcon,
-      className,
-      style,
-      classNames,
-      styles,
-      mode = 'single',
-      min,
-      max,
-      ...props
-    }: DatePickerProps,
-    ref
-  ) {
-    const isControlled = selected !== undefined;
-    const isSingleMode = mode === 'single';
-
-    const [isOpen, setIsOpen] = useState(false);
-    const [internalSingleSelected, setInternalSingleSelected] =
-      useState<Date>();
-    const [internalRangeSelected, setInternalRangeSelected] =
-      useState<DateRange>();
-
-    const currentSelected = isControlled
-      ? selected
-      : isSingleMode
-        ? internalSingleSelected
-        : internalRangeSelected;
-
-    const [dayPickerSelected, setDayPickerSelected] = useState<
-      Date | DateRange
-    >();
-
-    const handleSelect = (value: Date | DateRange | undefined) => {
-      if (!isControlled) {
-        if (isSingleMode && (value === undefined || value instanceof Date)) {
-          setInternalSingleSelected(value as Date);
-        } else if (!isSingleMode) {
-          setInternalRangeSelected(value as DateRange);
-        }
-      }
-
-      if (isSingleMode) {
-        (onSelect as (value?: Date) => void)?.(value as Date);
-      } else {
-        (onSelect as (value?: DateRange) => void)?.(value as DateRange);
-      }
-    };
-
-    const selectorLabel = useMemo(() => {
-      if (!currentSelected) {
-        return placeholder;
-      }
-
-      if (isSingleMode) {
-        return (currentSelected as Date)?.toLocaleDateString();
-      } else {
-        const range = currentSelected as DateRange;
-        if (range.from && range.to) {
-          return `${range.from.toLocaleDateString()} - ${range.to.toLocaleDateString()}`;
-        } else if (range.from) {
-          return range.from.toLocaleDateString();
-        }
-      }
-
-      return placeholder;
-    }, [placeholder, currentSelected, isSingleMode]);
-
-    const sharedProps: Omit<DayPickerProps, 'mode'> = {
-      navLayout: 'around',
-      ...(props as Omit<DayPickerProps, 'classNames' | 'styles' | 'mode'>),
-      className: cn('cleen-text-black', classNames?.datePicker?.className),
-      classNames: {
-        ...classNames?.datePicker?.classNames,
-        nav: cn('cleen-text-error', classNames?.datePicker?.classNames?.nav),
-      },
-      disabled:
-        min || max
-          ? ({
-              before: min === 'today' ? new Date() : min,
-              after: max === 'today' ? new Date() : max,
-            } as Matcher)
-          : undefined,
-      ...styles?.datePicker,
-    };
-
-    return (
-      <div ref={ref} className={cn('cleen', className)} style={style}>
-        {label && (
-          <label
-            className={cn(
-              'cleen-block cleen-mb-1.5 cleen-font-medium cleen-text-gray/90 cleen-text-sm cleen-leading-6',
-              classNames?.label
-            )}
-            style={styles?.label}
-          >
-            {label}
-          </label>
-        )}
-
-        <Dropdown
-          label={selectorLabel}
-          isOpen={isOpen}
-          onOpenChange={value => {
-            setDayPickerSelected(currentSelected);
-            setIsOpen(value);
-          }}
-          leftIcon={leftIcon}
-          rightIcon={rightIcon}
-          className={classNames?.dropdown?.className}
-          classNames={{
-            ...classNames?.dropdown?.classNames,
-            dropdown: cn(
-              'cleen-p-0 cleen-border-0',
-              classNames?.dropdown?.classNames?.dropdown
-            ),
-          }}
-          {...styles?.dropdown}
-        >
-          <Card
-            footer={{
-              hasDivider: true,
-              content: (
-                <div className="cleen-flex cleen-justify-between cleen-items-center">
-                  <Button
-                    variant="secondary"
-                    onClick={() => setIsOpen(false)}
-                    styles={{
-                      container: {
-                        minWidth: 'max-content',
-                      },
-                    }}
-                  >
-                    Close
-                  </Button>
-
-                  <Button
-                    onClick={() => {
-                      handleSelect(dayPickerSelected);
-                      setIsOpen(false);
-                    }}
-                    styles={{
-                      container: {
-                        minWidth: 'max-content',
-                      },
-                    }}
-                  >
-                    Apply
-                  </Button>
-                </div>
-              ),
-            }}
-            {...classNames?.card}
-            {...styles?.card}
-          >
-            {isSingleMode ? (
-              <DayPicker
-                mode="single"
-                {...sharedProps}
-                selected={dayPickerSelected as Date | undefined}
-                onSelect={(date?: Date) => {
-                  if (min || max) {
-                    setDayPickerSelected(
-                      selectMinMaxDate(date, {
-                        min: min as Date | 'today',
-                        max: max as Date | 'today',
-                      })
-                    );
-
-                    return;
-                  }
-
-                  setDayPickerSelected(date);
-                }}
-              />
-            ) : (
-              <DayPicker
-                mode="range"
-                {...sharedProps}
-                selected={dayPickerSelected as DateRange | undefined}
-                onSelect={(range?: DateRange) => {
-                  if (min || max) {
-                    setDayPickerSelected({
-                      from: selectMinMaxDate(range?.from, {
-                        min: min as Date | 'today',
-                        max: max as Date | 'today',
-                      }),
-                      to: selectMinMaxDate(range?.to, {
-                        min: min as Date | 'today',
-                        max: max as Date | 'today',
-                      }),
-                    });
-
-                    return;
-                  }
-
-                  setDayPickerSelected(range);
-                }}
-              />
-            )}
-          </Card>
-        </Dropdown>
-
-        {(infoLabels?.errorMessage ||
-          infoLabels?.infoMessage ||
-          infoLabels?.subtitle) && <InfoLabels {...infoLabels} />}
-      </div>
-    );
-  }
-);

package/src/components/datePicker/index.ts

@@ -1,2 +0,0 @@
-export { DatePicker } from './DatePicker';
-export { type DatePickerProps } from './types/props';

package/src/components/datePicker/types/props.ts

@@ -1,47 +0,0 @@
-import type { CardProps } from '@/components/card/Card';
-import type { DropdownProps } from '@/components/dropdown/Dropdown';
-import type { InfoLabelsProps } from '@/components/infoLabels/InfoLabels';
-import type { ComponentClassnames, ComponentStyles } from '@cleen/ui-core';
-import { type CSSProperties, type ReactNode } from 'react';
-import type { DateRange, DayPickerProps } from 'react-day-picker';
-
-export type DatePickerMode = 'single' | 'range';
-
-export type DatePickerBase = Omit<
-  DayPickerProps,
-  'classNames' | 'styles' | 'mode'
-> & {
-  label?: ReactNode;
-  placeholder?: ReactNode;
-  min?: Date | 'today';
-  max?: Date | 'today';
-  infoLabels?: InfoLabelsProps;
-  leftIcon?: ReactNode;
-  rightIcon?: ReactNode;
-  classNames?: {
-    label?: string;
-    dropdown?: ComponentClassnames<DropdownProps>;
-    card?: ComponentClassnames<CardProps>;
-    datePicker?: ComponentClassnames<DayPickerProps>;
-  };
-  styles?: {
-    label?: CSSProperties;
-    dropdown?: ComponentStyles<DropdownProps>;
-    card?: ComponentStyles<CardProps>;
-    datePicker?: ComponentStyles<DayPickerProps>;
-  };
-};
-
-export type DatePickerSingleProps = DatePickerBase & {
-  mode?: 'single';
-  selected?: Date;
-  onSelect?: (value?: Date) => void;
-};
-
-export type DatePickerRangeProps = DatePickerBase & {
-  mode?: 'range';
-  selected?: DateRange;
-  onSelect?: (value?: DateRange) => void;
-};
-
-export type DatePickerProps = DatePickerSingleProps | DatePickerRangeProps;