@clicktap/ui 0.14.12 → 0.14.13

package/components/NumberTicker/DigitResolver.tsx

@@ -0,0 +1,119 @@
+'use client';
+
+import { memo, useId, useMemo, useCallback, useState } from 'react';
+import { motion } from 'framer-motion';
+import type { DigitProps, DigitResolverProps } from './DigitResolver.types';
+import { useColumnTransition } from './hooks/useColumnTransition';
+
+const NUMBER_REGEX = /^-?\d*\.?\d+$/;
+
+function Digit({
+  digit,
+  tickerMotionProps,
+  transition,
+  updateTransition,
+}: DigitProps) {
+  const [position, setPosition] = useState(0);
+
+  const updatePosition = useCallback(
+    (node: HTMLDivElement) => {
+      if (node !== null) {
+        setPosition(node.clientHeight * parseInt(digit, 10));
+      }
+    },
+    [digit]
+  );
+
+  return (
+    <span className="relative h-auto block" ref={updatePosition} aria-hidden>
+      <motion.span
+        className="absolute block bottom-0 h-[1000%]"
+        initial={{ x: 0, y: position }}
+        animate={{ x: 0, y: position }}
+        transition={{ ...transition }}
+        onAnimationComplete={updateTransition}
+        style={{ fontFeatureSettings: 'tnum' }}
+      >
+        {[9, 8, 7, 6, 5, 4, 3, 2, 1, 0].map((i) => (
+          <motion.span
+            className="block text-[inherit] leading-[inherit] tabular-nums"
+            key={i}
+            // eslint-disable-next-line react/jsx-props-no-spreading
+            {...tickerMotionProps}
+          >
+            {i}
+          </motion.span>
+        ))}
+      </motion.span>
+      <motion.span
+        className="block text-[inherit] leading-[inherit] invisible"
+        aria-hidden
+      >
+        0
+      </motion.span>
+    </span>
+  );
+}
+
+const DigitMemo = memo(Digit);
+
+export function DigitResolver({
+  delta,
+  digits,
+  isNegative,
+  tickerMotionProps,
+  ...transitionConfig
+}: DigitResolverProps) {
+  const id = useId();
+  const motionProps = useMemo(
+    () =>
+      typeof tickerMotionProps === 'function'
+        ? tickerMotionProps({ delta })
+        : tickerMotionProps,
+    [delta, tickerMotionProps]
+  );
+
+  const columnTransition = useColumnTransition({
+    ...transitionConfig,
+  });
+
+  return (
+    <>
+      {isNegative && (
+        <motion.span
+          className="block text-[inherit] leading-[inherit] tabular-nums"
+          aria-hidden
+          // eslint-disable-next-line react/jsx-props-no-spreading
+          {...motionProps}
+        >
+          -
+        </motion.span>
+      )}
+      {digits.map((digit, idx) =>
+        NUMBER_REGEX.test(digit) ? (
+          <DigitMemo
+            // eslint-disable-next-line react/no-array-index-key
+            key={`${id}_${idx}`}
+            digit={digit}
+            tickerMotionProps={motionProps}
+            // eslint-disable-next-line react/jsx-props-no-spreading
+            {...columnTransition}
+          />
+        ) : (
+          <motion.span
+            className="block text-[inherit] leading-[inherit] tabular-nums"
+            // eslint-disable-next-line react/no-array-index-key
+            key={`${id}_${idx}`}
+            aria-hidden
+            // eslint-disable-next-line react/jsx-props-no-spreading
+            {...motionProps}
+          >
+            {digit}
+          </motion.span>
+        )
+      )}
+    </>
+  );
+}
+
+export default DigitResolver;

package/components/NumberTicker/DigitResolver.types.ts

@@ -0,0 +1,18 @@
+import type { MotionProps, Transition } from 'framer-motion';
+import { NumberTickerProps, TickerMotionProps } from './NumberTicker.types';
+
+export type DigitResolverProps = Pick<
+  NumberTickerProps,
+  'tickerMotionProps' | 'skipFirstAnimation' | 'transition'
+> &
+  TickerMotionProps & {
+    digits: string[];
+    isNegative: boolean;
+  };
+
+export type DigitProps = Pick<NumberTickerProps, 'tickerMotionProps'> & {
+  digit: string;
+  tickerMotionProps: MotionProps | undefined;
+  transition: Transition;
+  updateTransition: () => void;
+};

package/components/NumberTicker/NumberTicker.tsx

@@ -0,0 +1,56 @@
+'use client';
+
+import { motion } from 'framer-motion';
+import { cn } from '../../utils/cn';
+import type { NumberTickerProps } from './NumberTicker.types';
+import { useNumberDelta } from './hooks/useNumberDelta';
+import { useNumberTicker } from './hooks/useNumberTicker';
+import { DigitResolver } from './DigitResolver';
+
+export function NumberTicker({
+  value,
+  asLocal,
+  localeConfig,
+  precision,
+  slots,
+  skipFirstAnimation,
+  transition,
+  tickerMotionProps,
+  className,
+  ...props
+}: NumberTickerProps) {
+  const { digits, isNegative } = useNumberTicker({
+    value,
+    asLocal,
+    localeConfig,
+    precision,
+  });
+  const delta = useNumberDelta(value);
+
+  return (
+    <motion.span
+      className={cn(
+        'flex h-auto flex-row flex-nowrap overflow-hidden relative text-[inherit]',
+        className
+      )}
+      aria-valuenow={value}
+      layout
+      layoutRoot
+      // eslint-disable-next-line react/jsx-props-no-spreading
+      {...props}
+    >
+      {slots?.startContent}
+      <DigitResolver
+        isNegative={isNegative}
+        digits={digits}
+        tickerMotionProps={tickerMotionProps}
+        skipFirstAnimation={skipFirstAnimation}
+        transition={transition}
+        delta={delta}
+      />
+      {slots?.endContent}
+    </motion.span>
+  );
+}
+
+export default NumberTicker;

package/components/NumberTicker/NumberTicker.types.ts

@@ -0,0 +1,96 @@
+import type { MotionProps, Transition } from 'framer-motion';
+import type { CSSProperties, ReactNode } from 'react';
+
+export type TickerMotionProps = {
+  delta: 'increase' | 'decrease' | 'same';
+};
+
+export type TransitionConfig = {
+  /**
+   * Whether the NumberTicker animation on render
+   * @default true
+   */
+  skipFirstAnimation?: boolean;
+  /**
+   * The transition props to modify the NumberTicker animation.
+   * Use the framer motion transition API to create your own transition.
+   */
+  transition?: Transition;
+};
+
+export interface NumberTickerConfig {
+  value: number;
+  /**
+   * Number of digits after the decimal point. Must be in the range 0 - 20, inclusive.
+   * @default 2
+   */
+  precision?: number;
+  /**
+   *  Whether the NumberTicker value as Intl.NumberFormat
+   *  @default false
+   */
+  asLocal?: boolean;
+  /**
+   *  The configuration for the NumberTicker value as Intl.NumberFormat
+   *  By default the object {
+        locale: 'en-US',
+        options: {
+          style: 'currency',
+          currency: 'USD',
+          minimumFractionDigits: 2,
+        },
+      }
+   */
+  localeConfig?: {
+    locale?: string;
+    options?: Intl.NumberFormatOptions | undefined;
+  };
+}
+
+export type NumberTickerProps = NumberTickerConfig &
+  TransitionConfig & {
+    style?: CSSProperties;
+    className?: string;
+    slots?: {
+      /**
+       * Element to be rendered in the left side of the NumberTicker.
+       */
+      startContent?: ReactNode;
+      /**
+       * Element to be rendered in the right side of the NumberTicker.
+       */
+      endContent?: ReactNode;
+    };
+
+    /**
+     * The motion props to modify the each Ticker animation.
+     * Use the framer motion API to create your own animation. With the possible to use the delta value
+     * Example:
+     * 
+     * const getColor = (delta: TickerMotionProps) => {
+          switch (d) {
+            case 'increase':
+              return '#48ff0b';
+            case 'decrease':
+              return '#F22613';
+            default:
+              return '#fff';
+          }
+        };
+
+        <NumberTicker
+          tickerMotionProps={({ delta }) => ({
+            animate: {
+              color: [getColor(delta), '#fff'],
+              transition: {
+                duration: 2,
+              },
+            },
+          })}
+        />
+     * 
+     */
+    tickerMotionProps?:
+      | MotionProps
+      | ((props: TickerMotionProps) => MotionProps);
+  };

package/components/NumberTicker/hooks/useColumnTransition.ts

@@ -0,0 +1,36 @@
+import { Transition } from 'framer-motion';
+import { useState, useMemo, useCallback } from 'react';
+import { TransitionConfig } from '../NumberTicker.types';
+
+export const useColumnTransition = ({
+  skipFirstAnimation = true,
+  transition: transitionProps,
+}: TransitionConfig) => {
+  const [firstAnimation, setFirstAnimation] = useState(skipFirstAnimation);
+
+  const transition = useMemo<Transition>(() => {
+    return firstAnimation
+      ? {
+          duration: 0.1,
+        }
+      : {
+          ...(transitionProps || {
+            type: 'spring',
+            stiffness: 50,
+          }),
+        };
+  }, [firstAnimation, transitionProps]);
+
+  const updateTransition = useCallback(() => {
+    if (skipFirstAnimation) {
+      setFirstAnimation(false);
+    }
+  }, [skipFirstAnimation]);
+
+  return {
+    transition,
+    updateTransition,
+  };
+};
+
+export default useColumnTransition;

package/components/NumberTicker/hooks/useNumberDelta.ts

@@ -0,0 +1,19 @@
+import { useRef, useEffect } from 'react';
+
+export const useNumberDelta = (value = 0) => {
+  const ref = useRef(value);
+  useEffect(() => {
+    ref.current = value;
+  }, [value]);
+
+  switch (true) {
+    case value > ref.current:
+      return 'increase';
+    case value < ref.current:
+      return 'decrease';
+    default:
+      return 'same';
+  }
+};
+
+export default useNumberDelta;

package/components/NumberTicker/hooks/useNumberTicker.ts

@@ -0,0 +1,36 @@
+import { useMemo } from 'react';
+import { NumberTickerConfig } from '../NumberTicker.types';
+
+export const useNumberTicker = ({
+  value = 0,
+  asLocal = false,
+  localeConfig = {
+    locale: 'en-US',
+    options: {
+      style: 'currency',
+      currency: 'USD',
+      minimumFractionDigits: 2,
+    },
+  },
+  precision = 2,
+}: NumberTickerConfig) => {
+  const parsed = parseFloat(`${Math.max(Math.abs(value), 0)}`).toFixed(
+    precision ?? 0
+  );
+
+  const number = asLocal
+    ? new Intl.NumberFormat(localeConfig?.locale, {
+        ...localeConfig?.options,
+      }).format(parseFloat(parsed))
+    : parsed;
+
+  return useMemo(
+    () => ({
+      digits: number.split(''),
+      isNegative: value < 0,
+    }),
+    [number, value]
+  );
+};
+
+export default useNumberTicker;

package/components/NumberTicker/index.ts

@@ -0,0 +1,10 @@
+export { DigitResolver } from './DigitResolver';
+export { NumberTicker } from './NumberTicker';
+
+export type { DigitProps, DigitResolverProps } from './DigitResolver.types';
+export type {
+  NumberTickerConfig,
+  NumberTickerProps,
+  TickerMotionProps,
+  TransitionConfig,
+} from './NumberTicker.types';

package/components/Pagination/Pagination.tsx

@@ -0,0 +1,44 @@
+'use client';
+
+import { Pagination as UiPagination } from '@nextui-org/pagination';
+import type { PaginationProps } from '@nextui-org/pagination';
+import { cn } from '../../utils/cn';
+
+const controlClassNames = cn(
+  'w-8 h-8 flex justify-center items-center cursor-pointer shadow-none',
+  'border border-slate-200 data-[disabled=true]:border-0',
+  'rounded transition-colors duration-300 data-[focus-visible="true"]:outline-white data-[focus-visible="true"]:outline-offset-4',
+  'hover:bg-slate-50 data-[disabled=true]:bg-slate-100 data-[disabled=true]:text-slate-400',
+  '[&>svg]:w-4.5 [&>svg]:h-auto'
+);
+
+export function Pagination({
+  showControls = true,
+  className,
+  classNames,
+  ...rest
+}: PaginationProps) {
+  return (
+    <UiPagination
+      showControls={showControls}
+      className={cn('text-slate-600', className)}
+      classNames={{
+        wrapper: cn('flex flex-nowrap gap-2 lg:gap-3', classNames?.wrapper),
+        item: cn(
+          'w-8 h-8 flex text-sm justify-center items-center cursor-pointer rounded shadow-none',
+          'border-solid border border-slate-100 bg-transparent transition-colors duration-300',
+          'data-[active=true]:bg-slate-500 data-[active=true]:text-white data-[focus-visible="true"]:outline-white data-[focus-visible="true"]:outline-offset-4',
+          '[&[data-hover=true]:not([data-active=true])]:border-slate-200',
+          classNames?.item
+        ),
+        prev: cn(controlClassNames, classNames?.prev),
+        next: cn(controlClassNames, classNames?.next),
+        ellipsis: cn('w-4 h-4.5 scale-110 translate-y-1', classNames?.ellipsis),
+      }}
+      // eslint-disable-next-line react/jsx-props-no-spreading
+      {...rest}
+    />
+  );
+}
+
+export default Pagination;

package/components/Pagination/index.ts

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

package/components/PasswordCheck/PasswordCheck.tsx

@@ -0,0 +1,59 @@
+'use client';
+
+import { cn } from '../../utils/cn';
+import type { PasswordCheckProps } from './PasswordCheck.types';
+import { checkStrength, getProgressText } from './PasswordCheck.utils';
+
+export function PasswordCheck({
+  value,
+  variant = 'default',
+}: PasswordCheckProps) {
+  const strength = checkStrength(value);
+
+  return (
+    <div>
+      <div
+        className={cn(
+          'relative w-full flex gap-x-2',
+          variant === 'default' && 'mb-8 -mt-1'
+        )}
+      >
+        {Array.from({ length: 5 }, (_, idx) => idx).map((v, idx) => (
+          <div
+            className={cn(
+              'grow shrink basis-1/5 h-1 rounded-full transition-colors duration-700 ease bg-slate-200',
+              strength <= idx && 'bg-slate-600',
+              (strength === 1 || strength === 2) && 'bg-red-600',
+              strength === 3 && 'bg-yellow-600',
+              strength === 4 && 'bg-green-600',
+              strength === 5 && 'bg-blue-600'
+            )}
+            key={v}
+          />
+        ))}
+        {variant === 'default' && (
+          <div
+            className={cn(
+              'inline-flex gap-x-1 absolute top-0 left-0 text-xs translate-y-2/4 text-slate-950',
+              strength ? 'opacity-100' : 'opacity-0'
+            )}
+          >
+            <span>Password Strength:</span>
+            <span
+              className={cn(
+                (strength === 1 || strength === 2) && 'text-red-600',
+                strength === 3 && 'text-yellow-600',
+                strength === 4 && 'text-green-600',
+                strength === 5 && 'text-blue-600'
+              )}
+            >
+              {getProgressText(strength)}
+            </span>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}
+
+export default PasswordCheck;

package/components/PasswordCheck/PasswordCheck.types.ts

@@ -0,0 +1,4 @@
+export type PasswordCheckProps = {
+  value: string;
+  variant?: 'default' | 'short';
+};

package/components/PasswordCheck/PasswordCheck.utils.ts

@@ -0,0 +1,47 @@
+/** @todo these functions should probably be passed as props to be able to extend */
+export const checkStrength = (value: string) => {
+  const isMinLength = value.length >= 8;
+  let strength = 0;
+  if (/^(?=.*[a-z])(?=.*[A-Z])/.test(value) && isMinLength) {
+    strength += 1;
+  }
+  if (/\d/.test(value) && isMinLength) {
+    strength += 1;
+  }
+  if (value.length >= 8) {
+    strength += 1;
+  }
+  if (value.length >= 11) {
+    strength += 1;
+  }
+  if (/[ `!@#$%^&*()_+\-=[\]{};':"\\|,.<>/?~]/.test(value) && isMinLength) {
+    strength += 1;
+  }
+  return strength;
+};
+
+export const getProgressText = (strength: number) => {
+  switch (strength) {
+    case 5:
+      return 'Very Strong';
+    case 4:
+      return 'Strong';
+    case 3:
+      return 'Good';
+    case 2:
+      return 'Weak';
+    case 1:
+      return 'Very Weak';
+    default:
+      return '';
+  }
+};
+
+/** @todo this doesn't look like it is used...remove? */
+export const getPasswordRequirements = (value = '') => {
+  return {
+    eightСharacters: value.length >= 8,
+    upLowCaseLetters: /^(?=.*[a-z])(?=.*[A-Z])/.test(value),
+    oneNumber: /\d/.test(value),
+  };
+};

package/components/PasswordCheck/index.ts

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