@shipfox/react-ui 0.7.0 → 0.9.0

package/src/components/alert/alert.tsx

@@ -1,6 +1,16 @@
 import {cva, type VariantProps} from 'class-variance-authority';
 import {Icon} from 'components/icon';
-import type {ComponentProps} from 'react';
+import {AnimatePresence, motion, type Transition} from 'framer-motion';
+import {
+  type ComponentProps,
+  createContext,
+  type MouseEvent,
+  useCallback,
+  useContext,
+  useEffect,
+  useRef,
+  useState,
+} from 'react';
 import {cn} from 'utils/cn';
 
 const alertVariants = cva(
@@ -51,21 +61,137 @@ const closeIconVariants = cva('w-16 h-16', {
   },
 });
 
-type AlertProps = ComponentProps<'div'> & VariantProps<typeof alertVariants>;
+const alertDefaultTransition: Transition = {
+  duration: 0.2,
+  ease: 'easeInOut',
+};
+
+type AlertContextValue = {
+  isOpen: boolean;
+  onClose: () => void;
+  variant: VariantProps<typeof alertVariants>['variant'];
+};
+
+const AlertContext = createContext<AlertContextValue | null>(null);
+
+function useAlertContext() {
+  const context = useContext(AlertContext);
+  if (!context) {
+    throw new Error('Alert components must be used within an Alert component');
+  }
+  return context;
+}
+
+type AlertProps = ComponentProps<'div'> &
+  VariantProps<typeof alertVariants> & {
+    open?: boolean;
+    defaultOpen?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    animated?: boolean;
+    transition?: Transition;
+    autoClose?: number;
+  };
+
+function Alert({
+  className,
+  variant = 'default',
+  children,
+  open: controlledOpen,
+  defaultOpen = true,
+  onOpenChange,
+  animated = true,
+  transition = alertDefaultTransition,
+  autoClose,
+  ...props
+}: AlertProps) {
+  const [internalOpen, setInternalOpen] = useState(defaultOpen);
+  const isOpen = controlledOpen !== undefined ? controlledOpen : internalOpen;
+
+  const handleClose = useCallback(() => {
+    if (controlledOpen === undefined) {
+      setInternalOpen(false);
+    }
+    onOpenChange?.(false);
+  }, [controlledOpen, onOpenChange]);
+
+  const handleCloseRef = useRef(handleClose);
+  useEffect(() => {
+    handleCloseRef.current = handleClose;
+  }, [handleClose]);
+
+  useEffect(() => {
+    if (autoClose && isOpen && autoClose > 0) {
+      const timeoutId = setTimeout(() => {
+        handleCloseRef.current();
+      }, autoClose);
+
+      return () => {
+        clearTimeout(timeoutId);
+      };
+    }
+  }, [autoClose, isOpen]);
+
+  const contextValue: AlertContextValue = {
+    isOpen,
+    onClose: handleClose,
+    variant,
+  };
+
+  if (!animated) {
+    if (!isOpen) {
+      return null;
+    }
+
+    return (
+      <AlertContext.Provider value={contextValue}>
+        <div className="w-full flex items-start gap-4">
+          <div
+            data-slot="alert-line"
+            className={cn(alertLineVariants({variant}))}
+            aria-hidden="true"
+          />
+          <div
+            data-slot="alert"
+            role="alert"
+            className={cn(alertVariants({variant}), className)}
+            {...props}
+          >
+            {children}
+          </div>
+        </div>
+      </AlertContext.Provider>
+    );
+  }
 
-function Alert({className, variant, children, ...props}: AlertProps) {
   return (
-    <div className="w-full flex items-start gap-4">
-      <div data-slot="alert-line" className={cn(alertLineVariants({variant}))} aria-hidden="true" />
-      <div
-        data-slot="alert"
-        role="alert"
-        className={cn(alertVariants({variant}), className)}
-        {...props}
-      >
-        {children}
-      </div>
-    </div>
+    <AnimatePresence>
+      {isOpen && (
+        <motion.div
+          key="alert"
+          className="w-full flex items-start gap-4"
+          initial={{opacity: 0}}
+          animate={{opacity: 1}}
+          exit={{opacity: 0}}
+          transition={transition}
+        >
+          <AlertContext.Provider value={contextValue}>
+            <div
+              data-slot="alert-line"
+              className={cn(alertLineVariants({variant}))}
+              aria-hidden="true"
+            />
+            <div
+              data-slot="alert"
+              role="alert"
+              className={cn(alertVariants({variant}), className)}
+              {...props}
+            >
+              {children}
+            </div>
+          </AlertContext.Provider>
+        </motion.div>
+      )}
+    </AnimatePresence>
   );
 }
 
@@ -122,9 +248,18 @@ function AlertAction({className, ...props}: ComponentProps<'button'>) {
 
 function AlertClose({
   className,
-  variant = 'default',
+  variant: variantProp,
+  onClick,
   ...props
 }: ComponentProps<'button'> & VariantProps<typeof closeIconVariants>) {
+  const {onClose, variant: contextVariant} = useAlertContext();
+  const variant = variantProp ?? contextVariant ?? 'default';
+
+  const handleClick = (e: MouseEvent<HTMLButtonElement>) => {
+    onClose();
+    onClick?.(e);
+  };
+
   return (
     <button
       data-slot="alert-close"
@@ -134,6 +269,7 @@ function AlertClose({
         className,
       )}
       aria-label="Close"
+      onClick={handleClick}
       {...props}
     >
       <Icon name="close" className={cn(closeIconVariants({variant}))} />
@@ -141,4 +277,15 @@ function AlertClose({
   );
 }
 
-export {Alert, AlertContent, AlertTitle, AlertDescription, AlertActions, AlertAction, AlertClose};
+export {
+  Alert,
+  AlertContent,
+  AlertTitle,
+  AlertDescription,
+  AlertActions,
+  AlertAction,
+  AlertClose,
+  alertDefaultTransition,
+};
+
+export type {AlertProps};

package/src/components/button/button-link.tsx

@@ -5,7 +5,7 @@ import type {ComponentProps} from 'react';
 import {cn} from 'utils/cn';
 
 export const buttonLinkVariants = cva(
-  'inline-flex items-center justify-center gap-4 whitespace-nowrap transition-colors disabled:pointer-events-none outline-none font-medium',
+  'inline-flex items-center justify-center gap-4 whitespace-nowrap transition-colors cursor-pointer disabled:pointer-events-none outline-none font-medium',
   {
     variants: {
       variant: {

package/src/components/button/button.stories.tsx

@@ -26,6 +26,7 @@ const meta = {
       options: sizeOptions,
     },
     asChild: {control: 'boolean'},
+    isLoading: {control: 'boolean'},
   },
   args: {
     children: 'Click me',
@@ -118,3 +119,20 @@ export const Icons: Story = {
     </div>
   ),
 };
+
+export const Loading: Story = {
+  render: (args) => (
+    <div className="flex flex-col gap-16">
+      <div>
+        <Button {...args} isLoading>
+          Loading...
+        </Button>
+      </div>
+      <div>
+        <Button {...args} isLoading iconLeft="google">
+          Loading with left icon
+        </Button>
+      </div>
+    </div>
+  ),
+};

package/src/components/button/button.tsx

@@ -5,7 +5,7 @@ import type {ComponentProps} from 'react';
 import {cn} from 'utils/cn';
 
 export const buttonVariants = cva(
-  'rounded-6 inline-flex items-center justify-center whitespace-nowrap transition-colors disabled:pointer-events-none shrink-0 outline-none',
+  'rounded-6 inline-flex items-center justify-center whitespace-nowrap transition-colors cursor-pointer disabled:pointer-events-none shrink-0 outline-none',
   {
     variants: {
       variant: {
@@ -38,6 +38,15 @@ export const buttonVariants = cva(
   },
 );
 
+const spinnerSizeMap: Record<NonNullable<VariantProps<typeof buttonVariants>['size']>, string> = {
+  '2xs': 'size-10',
+  xs: 'size-10',
+  sm: 'size-12',
+  md: 'size-14',
+  lg: 'size-16',
+  xl: 'size-18',
+};
+
 export function Button({
   className,
   variant,
@@ -46,18 +55,35 @@ export function Button({
   children,
   iconLeft,
   iconRight,
+  isLoading = false,
+  disabled,
   ...props
 }: ComponentProps<'button'> &
   VariantProps<typeof buttonVariants> & {
     asChild?: boolean;
     iconLeft?: IconName;
     iconRight?: IconName;
+    isLoading?: boolean;
   }) {
   const Comp = asChild ? Slot : 'button';
+  const spinnerSize =
+    spinnerSizeMap[(size ?? 'md') as NonNullable<VariantProps<typeof buttonVariants>['size']>];
 
   return (
-    <Comp data-slot="button" className={cn(buttonVariants({variant, size, className}))} {...props}>
-      {iconLeft && <Icon name={iconLeft} />}
+    <Comp
+      data-slot="button"
+      className={cn(buttonVariants({variant, size, className}))}
+      disabled={disabled || isLoading}
+      aria-busy={isLoading}
+      aria-live={isLoading ? 'polite' : undefined}
+      {...(asChild ? {'aria-disabled': disabled || isLoading} : {})}
+      {...props}
+    >
+      {isLoading ? (
+        <Icon name="spinner" className={spinnerSize} />
+      ) : (
+        iconLeft && <Icon name={iconLeft} />
+      )}
       {children}
       {iconRight && <Icon name={iconRight} />}
     </Comp>

package/src/components/button/icon-button.stories.tsx

@@ -180,3 +180,49 @@ export const Sizes: Story = {
     </div>
   ),
 };
+
+export const Loading: Story = {
+  render: ({children: _children, ...args}) => (
+    <div className="flex flex-col gap-32">
+      <div className="flex flex-col gap-16">
+        <Code variant="label">Loading by Size:</Code>
+        <div className="flex gap-16 items-center">
+          {sizeOptions.map((size) => (
+            <div key={size} className="flex flex-col gap-8 items-center">
+              <Code variant="label" className="text-foreground-neutral-subtle text-xs">
+                {size}
+              </Code>
+              <IconButton {...args} icon="addLine" aria-label="Loading" size={size} isLoading />
+            </div>
+          ))}
+        </div>
+      </div>
+      <div className="flex flex-col gap-16">
+        <Code variant="label">Loading by Variant:</Code>
+        <div className="flex gap-16 items-center">
+          {variantOptions.map((variant) => (
+            <div key={variant} className="flex flex-col gap-8 items-center">
+              <Code variant="label" className="text-foreground-neutral-subtle text-xs">
+                {variant}
+              </Code>
+              <IconButton
+                {...args}
+                icon="addLine"
+                aria-label="Loading"
+                variant={variant}
+                isLoading
+              />
+            </div>
+          ))}
+        </div>
+      </div>
+      <div className="flex flex-col gap-16">
+        <Code variant="label">Normal vs Loading:</Code>
+        <div className="flex gap-16 items-center">
+          <IconButton {...args} icon="addLine" aria-label="Add" />
+          <IconButton {...args} icon="addLine" aria-label="Loading" isLoading />
+        </div>
+      </div>
+    </div>
+  ),
+};

package/src/components/button/icon-button.tsx

@@ -5,7 +5,7 @@ import type {ComponentProps} from 'react';
 import {cn} from 'utils/cn';
 
 export const iconButtonVariants = cva(
-  'inline-flex items-center justify-center whitespace-nowrap transition-colors disabled:pointer-events-none shrink-0 outline-none',
+  'inline-flex items-center justify-center whitespace-nowrap transition-colors cursor-pointer disabled:pointer-events-none shrink-0 outline-none',
   {
     variants: {
       variant: {
@@ -40,6 +40,18 @@ export const iconButtonVariants = cva(
   },
 );
 
+const spinnerSizeMap: Record<
+  NonNullable<VariantProps<typeof iconButtonVariants>['size']>,
+  string
+> = {
+  '2xs': 'size-8',
+  xs: 'size-10',
+  sm: 'size-12',
+  md: 'size-14',
+  lg: 'size-16',
+  xl: 'size-18',
+};
+
 export function IconButton({
   className,
   variant,
@@ -49,21 +61,35 @@ export function IconButton({
   asChild = false,
   children,
   icon,
+  isLoading = false,
+  disabled,
   ...props
 }: ComponentProps<'button'> &
   VariantProps<typeof iconButtonVariants> & {
     asChild?: boolean;
     icon?: IconName;
+    isLoading?: boolean;
   }) {
   const Comp = asChild ? Slot : 'button';
+  const spinnerSize = spinnerSizeMap[size ?? 'md'];
 
   return (
     <Comp
       data-slot="icon-button"
       className={cn(iconButtonVariants({variant, size, radius, muted}), className)}
+      disabled={disabled || isLoading}
+      aria-busy={isLoading}
+      aria-live={isLoading ? 'polite' : undefined}
+      {...(asChild ? {'aria-disabled': disabled || isLoading} : {})}
       {...props}
     >
-      {icon ? <Icon name={icon} /> : children}
+      {isLoading ? (
+        <Icon name="spinner" className={spinnerSize} />
+      ) : icon ? (
+        <Icon name={icon} />
+      ) : (
+        children
+      )}
     </Comp>
   );
 }

package/src/components/checkbox/checkbox-links.tsx

@@ -1,3 +1,4 @@
+import {buttonLinkVariants} from 'components/button/button-link';
 import {Label} from 'components/label';
 import {type ReactNode, useId} from 'react';
 import {cn} from 'utils/cn';
@@ -58,10 +59,12 @@ export function CheckboxLinks({
               {link.href ? (
                 <a
                   href={link.href}
+                  target="_blank"
+                  rel="noopener noreferrer"
                   onClick={link.onClick}
                   className={cn(
                     'text-sm leading-20 font-medium text-foreground-highlight-interactive',
-                    'hover:text-foreground-highlight-interactive-hover',
+                    'hover:text-foreground-highlight-interactive-hover transition-colors',
                     linkClassName,
                   )}
                 >
@@ -72,8 +75,7 @@ export function CheckboxLinks({
                   type="button"
                   onClick={link.onClick}
                   className={cn(
-                    'text-sm leading-20 font-medium text-foreground-highlight-interactive',
-                    'hover:text-foreground-highlight-interactive-hover',
+                    buttonLinkVariants({variant: 'interactive', size: 'sm'}),
                     linkClassName,
                   )}
                 >

package/src/components/checkbox/checkbox.stories.tsx

@@ -356,16 +356,32 @@ export const CheckboxLinksStory: StoryObj = {
           id="checkbox-links-default"
           label="Accept policies"
           links={[
-            {label: 'Terms of use', href: '#'},
-            {label: 'Privacy Policy', href: '#'},
+            {label: 'Terms of use', href: 'https://www.shipfox.io/legal/terms-of-service'},
+            {
+              label: 'Privacy Policy',
+              onClick: () =>
+                window.open(
+                  'https://www.shipfox.io/legal/privacy-policy',
+                  '_blank',
+                  'noopener,noreferrer',
+                ),
+            },
           ]}
         />
         <CheckboxLinks
           id="checkbox-links-checked"
           label="Accept policies"
           links={[
-            {label: 'Terms of use', href: '#'},
-            {label: 'Privacy Policy', href: '#'},
+            {label: 'Terms of use', href: 'https://www.shipfox.io/legal/terms-of-service'},
+            {
+              label: 'Privacy Policy',
+              onClick: () =>
+                window.open(
+                  'https://www.shipfox.io/legal/privacy-policy',
+                  '_blank',
+                  'noopener,noreferrer',
+                ),
+            },
           ]}
           checked
         />