@clicktap/ui 0.14.12 → 0.14.13

package/components/ToggleButton/ToggleButton.stories.tsx

@@ -0,0 +1,89 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { action } from '@storybook/addon-actions';
+import { ToggleButtonProps } from 'react-aria-components';
+import { ToggleButton } from './ToggleButton';
+
+type Story = StoryObj<typeof ToggleButton>;
+
+function Component({ children, ...props }: ToggleButtonProps) {
+  return <ToggleButton {...props}>{children}</ToggleButton>;
+}
+
+const meta: Meta<typeof ToggleButton> = {
+  component: Component,
+};
+
+export default meta;
+
+export const Example: Story = {
+  argTypes: {
+    variant: {
+      options: ['solid', 'outline', 'ghost'],
+      control: 'select',
+    },
+    size: {
+      options: ['sm', 'md', 'lg'],
+      control: 'select',
+    },
+    isSelected: {
+      control: 'boolean',
+    },
+    isDisabled: {
+      control: 'boolean',
+    },
+    defaultSelected: {
+      control: 'boolean',
+    },
+    autoFocus: {
+      control: 'boolean',
+    },
+    type: {
+      options: ['button', 'submit', 'reset'],
+      control: { type: 'radio' },
+    },
+    excludeFromTabOrder: {
+      control: 'boolean',
+    },
+    children: {
+      control: 'text',
+    },
+    className: {
+      control: 'object',
+    },
+    style: {
+      control: 'object',
+    },
+    onChange: {},
+    onPress: {},
+    onPressStart: {},
+    onPressEnd: {},
+    onPressChange: {},
+    onPressUp: {},
+    onFocus: {},
+    onBlur: {},
+    onFocusChange: {},
+    onKeyDown: {},
+    onKeyUp: {},
+  },
+  args: {
+    variant: 'solid',
+    size: 'md',
+    isSelected: false,
+    isDisabled: false,
+    autoFocus: false,
+    defaultSelected: false,
+    excludeFromTabOrder: false,
+    type: 'button',
+    children: 'Press me',
+    onPress: action('onPress'),
+    onPressStart: action('onPressStart'),
+    onPressEnd: action('onPressEnd'),
+    onPressChange: action('onPressChange'),
+    onPressUp: action('onPressUp'),
+    onFocus: action('onFocus'),
+    onBlur: action('onBlur'),
+    onFocusChange: action('onFocusChange'),
+    onKeyDown: action('onKeyDown'),
+    onKeyUp: action('onKeyUp'),
+  },
+};

package/components/ToggleButton/ToggleButton.tsx

@@ -0,0 +1,69 @@
+'use client';
+
+import { ToggleButton as AriaToggleButton } from 'react-aria-components';
+import { cn } from '../../utils/cn';
+import { ToggleButtonProps } from './ToggleButton.types';
+
+export function ToggleButton({
+  children,
+  size = 'md',
+  variant = 'solid',
+  className,
+  ...props
+}: ToggleButtonProps) {
+  return (
+    <AriaToggleButton
+      className={(renderProps) => {
+        const { isDisabled } = renderProps;
+        return cn(
+          'flex items-center justify-center',
+          'font-semibold text-sm',
+          'rounded-md border-solid border',
+          'px-4',
+          'transition-all duration-200 ease-in-out',
+          'focus:outline-2 focus:outline focus:outline-slate-200 pressed:scale-95',
+          {
+            'h-8': size === 'sm',
+            'h-10': size === 'md',
+            'h-12': size === 'lg',
+          },
+          [
+            variant === 'ghost' && [
+              'bg-transparent hover:bg-transparent focus:bg-transparent disabled:bg-transparent',
+              'border-transparent hover:border-transparent focus:border-transparent disabled:border-transparent',
+              'text-slate-900 disabled:text-slate-400',
+              isDisabled && ['disabled:text-slate-900', 'opacity-75'],
+            ],
+            variant === 'outline' && [
+              'bg-transparent hover:bg-transparent focus:bg-transparent disabled:bg-transparent',
+              'border-slate-300 hover:border-slate-400 focus:border-slate-400 disabled:border-slate-200',
+              'text-slate-900 disabled:text-slate-500',
+              isDisabled && [
+                'disabled:border-slate-300',
+                'disabled:text-slate-900',
+                'opacity-75',
+              ],
+            ],
+            variant === 'solid' && [
+              'bg-slate-800 hover:bg-slate-900 focus:bg-slate-900 disabled:bg-slate-900',
+              'border-slate-800 hover:border-slate-900 focus:border-slate-900 disabled:border-slate-200',
+              'text-white disabled:text-slate-400',
+              isDisabled && [
+                'disabled:border-slate-900',
+                'disabled:text-white',
+                'opacity-75',
+              ],
+            ],
+          ],
+          typeof className === 'function' ? className(renderProps) : className
+        );
+      }}
+      // eslint-disable-next-line react/jsx-props-no-spreading
+      {...props}
+    >
+      {children}
+    </AriaToggleButton>
+  );
+}
+
+export default ToggleButton;

package/components/ToggleButton/ToggleButton.types.ts

@@ -0,0 +1,6 @@
+import { ToggleButtonProps as AriaToggleButtonProps } from 'react-aria-components';
+
+export type ToggleButtonProps = AriaToggleButtonProps & {
+  variant?: 'solid' | 'outline' | 'ghost';
+  size?: 'sm' | 'md' | 'lg';
+};

package/components/ToggleButton/index.ts

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

package/components/Tooltip/Tooltip.tsx

@@ -0,0 +1,59 @@
+'use client';
+
+import { forwardRef } from 'react';
+import { Tooltip as UiTooltip } from '@nextui-org/tooltip';
+import { cn } from '../../utils/cn';
+import type { TooltipProps } from './Tooltip.types';
+
+export const Tooltip = forwardRef<HTMLDivElement, TooltipProps>(
+  function Tooltip(
+    { classNames, placement, showArrow = false, ...props },
+    ref
+  ) {
+    return (
+      <UiTooltip
+        classNames={{
+          base: [
+            cn([
+              'z-0 relative bg-transparent outline-none',
+              'focus-visible:z-10 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-slate-500',
+
+              // arrow styles
+              'before:absolute before:rotate-45 before:w-2.5 before:h-2.5 before:rounded-sm before:bg-slate-500 before:shadow-sm',
+              'before:hidden data-[arrow=true]:before:block',
+              'data-[placement=bottom]:before:-top-1 data-[placement=bottom]:before:left-1/2 data-[placement=bottom]:before:rotate-45 data-[placement=bottom]:before:-translate-x-1/2',
+              'data-[placement=bottom-end]:before:-top-1 data-[placement=bottom-end]:before:left-1/2 data-[placement=bottom-end]:before:rotate-45 data-[placement=bottom-end]:before:-translate-x-1/2',
+              'data-[placement=bottom-start]:before:-top-1 data-[placement=bottom-start]:before:left-1/2 data-[placement=bottom-start]:before:rotate-45 data-[placement=bottom-start]:before:-translate-x-1/2',
+              'data-[placement=left]:before:-right-1 data-[placement=left]:before:top-1/2 data-[placement=left]:before:-translate-y-1/2',
+              'data-[placement=left-end]:before:-right-1 data-[placement=left-end]:before:top-1/2 data-[placement=left-end]:before:-translate-y-1/2',
+              'data-[placement=left-start]:before:-right-1 data-[placement=left-start]:before:top-1/2 data-[placement=left-start]:before:-translate-y-1/2',
+              'data-[placement=right]:before:-left-1 data-[placement=right]:before:top-1/2 data-[placement=right]:before:-translate-y-1/2',
+              'data-[placement=right-end]:before:-left-1 data-[placement=right-end]:before:top-1/2 data-[placement=right-end]:before:-translate-y-1/2',
+              'data-[placement=right-start]:before:-left-1 data-[placement=right-start]:before:top-1/2 data-[placement=right-start]:before:-translate-y-1/2',
+              'data-[placement=top]:before:-bottom-1 data-[placement=top]:before:left-1/2 data-[placement=top]:before:rotate-45 data-[placement=top]:before:-translate-x-1/2',
+              'data-[placement=top-end]:before:-bottom-1 data-[placement=top-end]:before:left-1/2 data-[placement=top-end]:before:rotate-45 data-[placement=top-end]:before:-translate-x-1/2',
+              'data-[placement=top-start]:before:-bottom-1 data-[placement=top-start]:before:left-1/2 data-[placement=top-start]:before:rotate-45 data-[placement=top-start]:before:-translate-x-1/2',
+
+              classNames?.base,
+            ]),
+          ],
+          content: [
+            cn([
+              'inline-flex flex-col items-center justify-center outline-none',
+              'w-full py-1 px-2.5 z-10 box-border bg-slate-500 rounded-md shadow-sm',
+              'text-sm text-white subpixel-antialiased',
+              classNames?.content,
+            ]),
+          ],
+        }}
+        placement={placement}
+        showArrow={showArrow}
+        // eslint-disable-next-line react/jsx-props-no-spreading
+        {...props}
+        ref={ref}
+      />
+    );
+  }
+);
+
+export default Tooltip;

package/components/Tooltip/Tooltip.types.ts

@@ -0,0 +1,3 @@
+import type { TooltipProps as UITooltipProps } from '@nextui-org/tooltip';
+
+export type TooltipProps = UITooltipProps;

package/components/Tooltip/index.ts

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

package/components/UploadImage/UploadImage.tsx

@@ -0,0 +1,206 @@
+'use client';
+
+import { forwardRef, useState } from 'react';
+import type { ChangeEvent } from 'react';
+import { motion } from 'framer-motion';
+import Image from 'next/image';
+
+import { FieldError } from 'react-aria-components';
+import { cn } from '../../utils/cn';
+import type { UploadImageProps } from './UploadImage.types';
+import { useIsClient } from '../../hooks/useIsClient';
+import { Skeleton } from '../Skeleton';
+
+function UploadImageLoader({
+  hasTitle,
+  className,
+}: {
+  hasTitle: boolean;
+  className: NonNullable<UploadImageProps['classNames']>['skeleton'];
+}) {
+  return (
+    <div className="w-full h-full flex flex-col gap-4">
+      {hasTitle && <Skeleton className="w-1/2 h-8 mx-auto rounded-md z-20" />}
+      <Skeleton
+        className={cn('w-full h-56 rounded-md z-20 relative', className)}
+      />
+    </div>
+  );
+}
+
+export const UploadImage = forwardRef<HTMLInputElement, UploadImageProps>(
+  (
+    {
+      title,
+      description = 'Preview will display here.',
+      fileExtension,
+      actionTitle = 'select file',
+      variant,
+      errorMessage,
+      defaultImagePath,
+      classNames,
+      ...props
+    },
+    ref
+  ) => {
+    const isClient = useIsClient();
+    const [image, setImage] = useState<{
+      src: string | null;
+      alt: string | null;
+    }>({
+      src: null,
+      alt: null,
+    });
+
+    const invalid = !!errorMessage;
+
+    const accept = fileExtension
+      ? fileExtension
+          .split(',')
+          .map((val) => `image/${val.trim()}`)
+          .join(', ')
+      : 'image/*';
+
+    return (
+      <div className={cn('w-full h-full', 'flex flex-col gap-4')}>
+        {isClient ? (
+          <>
+            {title && (
+              <h6 className={cn('text-center', 'text-2xl', 'm-0 mb-4')}>
+                {title}
+              </h6>
+            )}
+            <div
+              className={cn(
+                'w-full h-full',
+                'flex flex-col justify-between gap-5 items-center',
+                ['bg-slate-100', variant === 'base' && 'bg-transparent'],
+                'rounded-md',
+                [variant === 'base' && 'rounded-none'],
+                ['p-6 lg:p-7', variant === 'base' && 'p-0 lg:p-0']
+              )}
+            >
+              <label
+                htmlFor={`${props?.name}-upload-file`}
+                aria-label="image upload"
+                // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+                // @ts-ignore
+                onChange={(e: ChangeEvent<HTMLInputElement>) => {
+                  const {
+                    target: { files },
+                  } = e;
+                  if (files) {
+                    setImage({
+                      src: URL.createObjectURL(files[0]),
+                      alt: files[0].name,
+                    });
+                  }
+                }}
+                className={cn(
+                  'inline-flex justify-center items-center',
+                  'uppercase text-base border-slate-200',
+                  'bg-transparent',
+                  'border-1 border-solid',
+                  'px-4 py-0',
+                  'rounded-2xl',
+                  'cursor-pointer',
+                  'w-full h-9',
+                  ['max-w-48', variant === 'base' && 'max-w-none'],
+                  'my-0 mx-auto',
+                  'has-[:disabled]:bg-transparent has-[:disabled]:text-slate-950',
+                  'hover:bg-slate-100s hover:text-black',
+                  classNames?.label
+                )}
+              >
+                {actionTitle}
+                <input
+                  id={`${props?.name}-upload-file`}
+                  accept={accept}
+                  type="file"
+                  hidden
+                  // eslint-disable-next-line react/jsx-props-no-spreading
+                  {...props}
+                  ref={ref}
+                  className="hidden"
+                />
+              </label>
+
+              {defaultImagePath && !image.src ? (
+                <div className="flex justify-center items-center w-60">
+                  <a href={defaultImagePath} target="_blank" rel="noreferrer">
+                    <img
+                      src={defaultImagePath}
+                      alt=""
+                      className="w-full h-auto"
+                    />
+                  </a>
+                </div>
+              ) : (
+                <>
+                  <motion.div
+                    initial={{ opacity: 0 }}
+                    animate={{ opacity: 1 }}
+                    transition={{ type: 'spring', duration: 3, bounce: 0 }}
+                    key={image.src}
+                    className="flex justify-center items-center w-52 h-auto"
+                  >
+                    {image.src ? (
+                      <Image
+                        src={image.src}
+                        height={96}
+                        width={200}
+                        alt={image.alt || ''}
+                        className="max-h-full object-contain"
+                      />
+                    ) : (
+                      <svg
+                        xmlns="http://www.w3.org/2000/svg"
+                        width="31"
+                        height="55"
+                        viewBox="0 0 31 55"
+                        fill="none"
+                      >
+                        <g clipPath="url(#clip0_15607_32844)">
+                          <path
+                            d="M15.9521 0.721924C24.2431 0.721924 30.9521 7.36392 30.9521 15.5719V43.9219C30.9521 49.8889 26.0703 54.7219 20.0431 54.7219C14.0158 54.7219 9.13397 49.8889 9.13397 43.9219V20.9719C9.13397 17.2459 12.1885 14.2219 15.9521 14.2219C19.7158 14.2219 22.7703 17.2459 22.7703 20.9719V41.2219H17.3158V20.7289C17.3158 19.2439 14.5885 19.2439 14.5885 20.7289V43.9219C14.5885 46.8919 17.0431 49.3219 20.0431 49.3219C23.0431 49.3219 25.4976 46.8919 25.4976 43.9219V15.5719C25.4976 10.3609 21.2158 6.12192 15.9521 6.12192C10.6885 6.12192 6.40669 10.3609 6.40669 15.5719V41.2219H0.952148V15.5719C0.952148 7.36392 7.66124 0.721924 15.9521 0.721924Z"
+                            fill="#646464"
+                          />
+                        </g>
+                        <defs>
+                          <clipPath id="clip0_15607_32844">
+                            <rect
+                              width="30"
+                              height="54"
+                              fill="white"
+                              transform="translate(0.952148 0.721924)"
+                            />
+                          </clipPath>
+                        </defs>
+                      </svg>
+                    )}
+                  </motion.div>
+                  <p className="m-0 text-slate-950 text-center">
+                    {image.alt || description}
+                  </p>
+                </>
+              )}
+            </div>
+          </>
+        ) : (
+          <UploadImageLoader
+            hasTitle={Boolean(title)}
+            className={classNames?.skeleton}
+          />
+        )}
+
+        {invalid && (
+          <FieldError className={cn('-mt-2', 'self-start')}>
+            {errorMessage}
+          </FieldError>
+        )}
+      </div>
+    );
+  }
+);
+
+export default UploadImage;

package/components/UploadImage/UploadImage.types.ts

@@ -0,0 +1,15 @@
+import type { ReactNode } from 'react';
+import type { UseFormRegisterReturn } from 'react-hook-form';
+import type { SlotsToClasses } from '../../types/SlotsToClasses';
+
+export type UploadImageProps = UseFormRegisterReturn & {
+  title?: string;
+  description?: ReactNode;
+  name?: string;
+  fileExtension?: string;
+  actionTitle?: string;
+  errorMessage?: string;
+  defaultImagePath?: string;
+  variant?: 'default' | 'base';
+  classNames?: SlotsToClasses<'label' | 'skeleton'>;
+};

package/components/UploadImage/index.ts

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@clicktap/ui",
-  "version": "0.14.12",
+  "version": "0.14.13",
   "private": false,
   "author": "Clicktap",
   "description": "A library of React UI components and low-level hooks.",

package/tailwind.config.js

@@ -1,4 +1,6 @@
+const path = require('path');
+
 /** @type {import('tailwindcss').Config} */
 module.exports = {
-    content: ['./src/components/**/*.{js,jsx,ts,tsx}'],
+    content: [path.resolve(__dirname, './components/**/*.{js,jsx,ts,tsx}')],
 };