@clicktap/ui 0.14.12 → 0.14.13

package/components/Image/Image.tsx

@@ -0,0 +1,32 @@
+'use client';
+
+import type { ImageProps } from 'next/image';
+import { useState, useEffect } from 'react';
+import NextImage from 'next/image';
+import { cn } from '../../utils/cn';
+
+export function Image({ src, className, ...rest }: ImageProps) {
+  const [loadingImg, setLoadingImg] = useState(true);
+  const [image, setImage] = useState(src);
+  const [isClient, setIsClient] = useState(false);
+
+  useEffect(() => setImage(src), [src]);
+  useEffect(() => setIsClient(true), []);
+
+  return (
+    <NextImage
+      src={image}
+      className={cn(
+        'transition-[filter] ease-linear duration-200',
+        isClient && loadingImg && 'blur-md',
+        className
+      )}
+      onError={() => setImage('/images/placeholder.jpg')}
+      onLoad={() => setLoadingImg(false)}
+      // eslint-disable-next-line react/jsx-props-no-spreading
+      {...rest}
+    />
+  );
+}
+
+export default Image;

package/components/Image/index.ts

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

package/components/Input/Input.tsx

@@ -0,0 +1,109 @@
+'use client';
+
+import {
+  FieldError,
+  Input as AriaInput,
+  Label,
+  Text,
+  TextField,
+} from 'react-aria-components';
+import { forwardRef } from 'react';
+import { cn } from '../../utils/cn';
+import type { InputProps } from './Input.types';
+import { Skeleton } from '../Skeleton/Skeleton';
+import { useIsClient } from '../../hooks/useIsClient';
+
+function InputSkeleton({
+  className,
+}: {
+  className: NonNullable<InputProps['classNames']>['skeleton'];
+}) {
+  return (
+    <Skeleton
+      className={cn('w-full h-10 rounded-md z-20 relative', className)}
+    />
+  );
+}
+
+export const Input = forwardRef<HTMLInputElement, InputProps>(
+  (
+    {
+      inputProps,
+      label,
+      description,
+      errorMessage,
+      placeholder,
+      className,
+      classNames,
+      ...props
+    },
+    ref
+  ) => {
+    const isClient = useIsClient();
+
+    if (!isClient) {
+      return (
+        <div className={cn('flex flex-col w-full text-slate-900', className)}>
+          {label ? (
+            <Label
+              className={cn('flex text-slate-500 text-xs', classNames?.label)}
+            >
+              {label}
+            </Label>
+          ) : null}
+          <InputSkeleton className={classNames?.skeleton} />
+        </div>
+      );
+    }
+
+    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>
+        <AriaInput
+          ref={ref}
+          placeholder={placeholder}
+          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',
+            classNames?.input
+          )}
+          // eslint-disable-next-line react/jsx-props-no-spreading
+          {...inputProps}
+        />
+
+        {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 Input;

package/components/Input/Input.types.ts

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

package/components/Input/index.ts

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

package/components/Link/Link.stories.tsx

@@ -0,0 +1,96 @@
+import { LinkProps } from 'react-aria-components';
+import type { Meta, StoryObj } from '@storybook/react';
+import { action } from '@storybook/addon-actions';
+import { Link } from './Link';
+
+type Story = StoryObj<typeof Link>;
+
+function Component({ children, ...props }: LinkProps) {
+  return <Link {...props}>{children}</Link>;
+}
+
+const meta: Meta<typeof Link> = {
+  component: Component,
+};
+
+export default meta;
+
+export const Example: Story = {
+  argTypes: {
+    href: {
+      control: 'text',
+    },
+    target: {
+      options: ['_blank', '_self', '_parent', '_top'],
+      control: 'select',
+    },
+    isDisabled: {
+      control: 'boolean',
+    },
+    autoFocus: {
+      control: 'boolean',
+    },
+    rel: {
+      control: 'text',
+    },
+    download: {
+      control: 'object',
+    },
+    ping: {
+      control: 'text',
+    },
+    referrerPolicy: {
+      options: [
+        'no-referrer',
+        'origin-when-cross-origin',
+        'same-origin',
+        'strict-origin',
+        'strict-origin-when-cross-origin',
+        'unsafe-url',
+      ],
+      control: 'select',
+    },
+    children: {
+      control: 'text',
+    },
+    className: {
+      control: 'object',
+    },
+    style: {
+      control: 'object',
+    },
+    onPress: {},
+    onBlur: {},
+    onFocus: {},
+    onFocusChange: {},
+    onHoverChange: {},
+    onHoverEnd: {},
+    onHoverStart: {},
+    onKeyDown: {},
+    onKeyUp: {},
+    onPressChange: {},
+    onPressEnd: {},
+    onPressStart: {},
+    onPressUp: {},
+  },
+  args: {
+    href: '/',
+    target: '_blank',
+    isDisabled: false,
+    autoFocus: false,
+    children: 'Press me',
+    onPress: action('onPress'),
+    onBlur: action('onBlur'),
+    onFocus: action('onFocus'),
+    onFocusChange: action('onFocusChange'),
+    onHoverChange: action('onHoverChange'),
+    onHoverEnd: action('onHoverEnd'),
+    onHoverStart: action('onHoverStart'),
+    onKeyDown: action('onKeyDown'),
+    onKeyUp: action('onKeyUp'),
+    onPressChange: action('onPressChange'),
+    onPressEnd: action('onPressEnd'),
+    onPressStart: action('onPressStart'),
+    onPressUp: action('onPressUp'),
+  },
+};

package/components/Link/Link.tsx

@@ -0,0 +1,34 @@
+'use client';
+
+import { forwardRef } from 'react';
+import { Link as UiLink } from 'react-aria-components';
+import { cn } from '../../utils/cn';
+import type { LinkProps } from './Link.types';
+
+export const Link = forwardRef<HTMLAnchorElement, LinkProps>(
+  ({ children, isDisabled, className, ...props }, ref) => (
+    <UiLink
+      // eslint-disable-next-line react/jsx-props-no-spreading
+      {...props}
+      isDisabled={isDisabled}
+      className={cn(
+        'flex items-center cursor-pointer',
+        'text-slate-500',
+        'no-underline',
+        'transition-colors duration-300',
+        'hover:text-slate-800',
+        [
+          'data-[disabled="true"]:cursor-default',
+          'data-[disabled="true"]:text-slate-300',
+          'data-[disabled="true"]:hover:text-slate-300',
+        ],
+        className
+      )}
+      ref={ref}
+    >
+      {children}
+    </UiLink>
+  )
+);
+
+export default Link;

package/components/Link/Link.types.ts

@@ -0,0 +1,3 @@
+import type { LinkProps as UILinkProps } from 'react-aria-components';
+
+export type LinkProps = UILinkProps;

package/components/Link/index.ts

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

package/components/Loader/CircularEasing.tsx

@@ -0,0 +1,66 @@
+'use client';
+
+import { motion } from 'framer-motion';
+import type { CSSProperties } from 'react';
+import { cn } from '../../utils/cn';
+import type { CircularEasingProps } from './CircularEasing.types';
+
+export function CircularEasing({
+  width,
+  stroke,
+  strokeLinecap = 'round',
+  strokeWidth = 5,
+  className,
+  style,
+  ...props
+}: CircularEasingProps) {
+  return (
+    <div
+      style={{ '--circularWidth': `${width}px`, ...style } as CSSProperties}
+      // eslint-disable-next-line react/jsx-props-no-spreading
+      {...props}
+      className={cn(
+        'relative',
+        'm-0',
+        'w-[--circularWidth]',
+        'aspect-square',
+        className
+      )}
+    >
+      <motion.svg
+        animate={{
+          transform: 'rotate(360deg)',
+          transition: { repeat: Infinity, duration: 2, ease: 'linear' },
+        }}
+        viewBox="25 25 50 50"
+        className={cn(
+          'w-full h-full',
+          'absolute inset-x-0 inset-y-0',
+          'origin-center',
+          'm-auto'
+        )}
+      >
+        <motion.circle
+          animate={{
+            strokeDasharray: ['1, 200', '89, 200', '89, 200'],
+            strokeDashoffset: [0, -35, -124],
+            transition: { repeat: Infinity, duration: 1.5, ease: 'easeInOut' },
+          }}
+          className="path"
+          cx="50"
+          cy="50"
+          fill="none"
+          r="20"
+          strokeDasharray="1, 200"
+          strokeDashoffset="0"
+          stroke={stroke}
+          strokeLinecap={strokeLinecap}
+          strokeMiterlimit="10"
+          strokeWidth={strokeWidth}
+        />
+      </motion.svg>
+    </div>
+  );
+}
+
+export default CircularEasing;

package/components/Loader/CircularEasing.types.ts

@@ -0,0 +1,8 @@
+import type { HTMLAttributes } from 'react';
+
+export type CircularEasingProps = HTMLAttributes<HTMLDivElement> & {
+  stroke: string;
+  strokeLinecap?: 'butt' | 'round' | 'square';
+  strokeWidth?: number;
+  width: number;
+};

package/components/Loader/Pulse.tsx

@@ -0,0 +1,45 @@
+'use client';
+
+import { motion } from 'framer-motion';
+import { cn } from '../../utils/cn';
+import type { PulseProps } from './Pulse.types';
+
+export function Pulse({ classNames }: PulseProps) {
+  return (
+    <span className={cn(classNames?.base)}>
+      {Array.from(new Array(3)).map((_, i) => (
+        <motion.div
+          // eslint-disable-next-line react/no-array-index-key
+          key={i}
+          animate={{
+            opacity: [1, 1, 0.7, 1, 1],
+            transform: [
+              'scale(1)',
+              'scale(1)',
+              'scale(0.1)',
+              'scale(1)',
+              'scale(1)',
+            ],
+            transition: {
+              repeat: Infinity,
+              duration: 0.75,
+              delay: i * 0.1,
+              // ease: [0.2, 0.68, 0.18, 1.08],
+            },
+          }}
+          className={cn(
+            'bg-slate-300',
+            'inline-block',
+            'w-2',
+            'h-2',
+            'm-0.5',
+            'rounded-lg',
+            classNames?.dot
+          )}
+        />
+      ))}
+    </span>
+  );
+}
+
+export default Pulse;

package/components/Loader/Pulse.types.ts

@@ -0,0 +1,5 @@
+import type { SlotsToClasses } from '../../types/SlotsToClasses';
+
+export interface PulseProps {
+  classNames?: SlotsToClasses<'base' | 'dot'>;
+}

package/components/Loader/index.ts

@@ -0,0 +1,4 @@
+export { CircularEasing } from './CircularEasing';
+export { Pulse } from './Pulse';
+export type { CircularEasingProps } from './CircularEasing.types';
+export type { PulseProps } from './Pulse.types';

package/components/Menu/ContextMenu.tsx

@@ -0,0 +1,83 @@
+'use client';
+
+import { cloneElement } from 'react';
+import { AnimatePresence } from 'framer-motion';
+import { cn } from '../../utils/cn';
+import { Menu } from './Menu';
+import type { MenuProps } from './Menu.types';
+
+export function ContextMenu({
+  slots,
+  role = 'tooltip',
+  arrow,
+  ...rest
+}: MenuProps) {
+  const arrowConfig = {
+    width: 24,
+    height: 8,
+    className: cn('fill-slate-50', arrow?.className),
+    ...arrow,
+  };
+
+  const ContentSlot = slots?.submenu
+    ? // eslint-disable-next-line @typescript-eslint/no-unsafe-argument
+      cloneElement(slots?.submenu, {
+        ...slots.submenu.props,
+      })
+    : null;
+
+  const SubmenuSlot = slots?.contentRoot ? (
+    cloneElement(
+      slots.contentRoot,
+      // eslint-disable-next-line @typescript-eslint/no-unsafe-argument
+      {
+        ...slots.contentRoot.props,
+      },
+      ContentSlot
+    )
+  ) : (
+    <div className="relative rounded-md py-4 px-6 bg-gray-50 shadow">
+      {ContentSlot}
+    </div>
+  );
+
+  return (
+    <AnimatePresence>
+      <Menu
+        role={role}
+        arrow={arrowConfig}
+        hidden={{
+          opacity: 0,
+          y: -5,
+          visibility: 'hidden',
+          transition: {
+            type: 'spring',
+            duration: 0.3,
+            bounce: 0,
+          },
+        }}
+        visible={{
+          opacity: 1,
+          y: 0,
+          visibility: 'visible',
+          transition: {
+            type: 'spring',
+            duration: 0.75,
+            bounce: 0,
+            staggerChildren: 0.075,
+            delayChildren: 0.1,
+          },
+        }}
+        slots={{
+          submenu: SubmenuSlot,
+          submenuRoot: slots?.submenuRoot,
+          content: slots?.content,
+        }}
+        // eslint-disable-next-line react/jsx-props-no-spreading
+        {...rest}
+      />
+    </AnimatePresence>
+  );
+}
+
+export default ContextMenu;

package/components/Menu/Menu.tsx

@@ -0,0 +1,143 @@
+'use client';
+
+import { cloneElement, useState, useRef, useId } from 'react';
+import { motion } from 'framer-motion';
+import {
+  flip,
+  shift,
+  arrow as arrowMiddleware,
+  offset as offsetMiddleware,
+  useFocus,
+  useRole,
+  useFloating,
+  useInteractions,
+  useHover,
+  useClick,
+  useDismiss,
+  useDelayGroupContext,
+  useDelayGroup,
+  FloatingArrow,
+  autoUpdate,
+} from '@floating-ui/react';
+import type { ButtonProps } from 'react-aria-components';
+import type { MenuProps } from './Menu.types';
+
+export function Menu({
+  closeDelay = 300,
+  offset = 20,
+  openDelay = 0,
+  placement = 'bottom-start',
+  slots,
+  trigger = ['hover', 'focus'],
+  withArrow = true,
+  arrow,
+  role = 'dialog',
+  visible = {},
+  hidden = {},
+  floatingOptions = {},
+  isOpen,
+  onOpenChange,
+}: MenuProps) {
+  const [isOpenUncontrolled, setIsOpenUncontrolled] = useState(false);
+  const arrowRef = useRef(null);
+  const id = useId();
+  const { x, y, strategy, refs, context } = useFloating({
+    placement,
+    middleware: [
+      offsetMiddleware(offset),
+      flip(),
+      shift(),
+      arrowMiddleware({
+        element: arrowRef,
+      }),
+    ],
+    open: isOpen || isOpenUncontrolled,
+    onOpenChange: onOpenChange || setIsOpenUncontrolled,
+    whileElementsMounted: autoUpdate,
+    ...floatingOptions,
+  });
+
+  const dismissConfig = useDismiss(context);
+  const roleConfig = useRole(context, {
+    role,
+  });
+  const { delay: delayGroup } = useDelayGroupContext();
+  const delay = {
+    open: openDelay,
+    close: closeDelay,
+  };
+  const hoverConfig = useHover(context, { delay: delayGroup || delay });
+  const focusConfig = useFocus(context);
+  const clickConfig = useClick(context);
+
+  const interactions = [
+    trigger.find((value) => value === 'hover') ? hoverConfig : undefined,
+    trigger.find((value) => value === 'click') ? clickConfig : undefined,
+    trigger.find((value) => value === 'focus') ? focusConfig : undefined,
+    dismissConfig,
+    roleConfig,
+  ];
+
+  const { getReferenceProps, getFloatingProps } = useInteractions(interactions);
+
+  useDelayGroup(context, { id });
+
+  // https://github.com/floating-ui/floating-ui/issues/2646
+  const { onClick, ...referenceProps } = getReferenceProps();
+  const keyboardEvents = String(
+    (slots?.content?.props as ButtonProps).className
+  ).includes('pressable')
+    ? { onPress: onClick }
+    : { onClick };
+
+  const ContentSlot = slots?.content ? (
+    // eslint-disable-next-line @typescript-eslint/no-unsafe-argument
+    cloneElement(slots.content, {
+      ...slots.content.props,
+      ref: refs.setReference,
+      ...referenceProps,
+      ...keyboardEvents,
+    })
+  ) : (
+    // eslint-disable-next-line react/jsx-props-no-spreading
+    <div ref={refs.setReference} {...getReferenceProps()}>
+      Menu Action
+    </div>
+  );
+
+  const SubmenuSlot = slots?.submenu ? (
+    <motion.nav
+      ref={refs.setFloating}
+      style={{
+        position: strategy,
+        top: y ?? 0,
+        left: x ?? 0,
+        width: 'max-content',
+        zIndex: 50,
+      }}
+      // eslint-disable-next-line react/jsx-props-no-spreading
+      {...getFloatingProps()}
+      variants={{ hidden, visible }}
+      initial="hidden"
+      animate={isOpen || isOpenUncontrolled ? 'visible' : 'hidden'}
+    >
+      {withArrow && (
+        // eslint-disable-next-line react/jsx-props-no-spreading
+        <FloatingArrow ref={arrowRef} context={context} {...arrow} />
+      )}
+
+      {slots.submenu}
+    </motion.nav>
+  ) : (
+    <nav>Submenu</nav>
+  );
+
+  return (
+    <>
+      {ContentSlot}
+      {SubmenuSlot}
+    </>
+  );
+}
+
+export default Menu;