@shipfox/react-ui 0.8.0 → 0.10.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.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: {
@@ -76,6 +76,7 @@ export function Button({
       disabled={disabled || isLoading}
       aria-busy={isLoading}
       aria-live={isLoading ? 'polite' : undefined}
+      {...(asChild ? {'aria-disabled': disabled || isLoading} : {})}
       {...props}
     >
       {isLoading ? (

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: {
@@ -80,6 +80,7 @@ export function IconButton({
       disabled={disabled || isLoading}
       aria-busy={isLoading}
       aria-live={isLoading ? 'polite' : undefined}
+      {...(asChild ? {'aria-disabled': disabled || isLoading} : {})}
       {...props}
     >
       {isLoading ? (

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
         />

package/src/components/icon/icon.tsx

@@ -32,11 +32,26 @@ import {
   ThunderIcon,
   XCircleSolidIcon,
 } from './custom';
+import {remixiconMap} from './remixicon-registry';
 
-const iconsMap = {
+const commonRemixicons = {
+  addLine: RiAddLine,
+  close: RiCloseLine,
+  check: RiCheckLine,
+  copy: RiFileCopyLine,
+  info: RiInformationFill,
+  imageAdd: RiImageAddFill,
+  chevronRight: RiArrowRightSLine,
+  homeSmile: RiHomeSmileFill,
+  money: RiMoneyDollarCircleLine,
   google: RiGoogleFill,
   microsoft: RiMicrosoftFill,
   github: RiGithubFill,
+  subtractLine: RiSubtractLine,
+  bookOpen: RiBookOpenFill,
+} as const satisfies Record<string, RemixiconComponentType>;
+
+const customIconsMap = {
   shipfox: ShipfoxLogo,
   slack: SlackLogo,
   stripe: StripeLogo,
@@ -51,23 +66,18 @@ const iconsMap = {
   spinner: SpinnerIcon,
   thunder: ThunderIcon,
   xCircleSolid: XCircleSolidIcon,
-  addLine: RiAddLine,
-  bookOpen: RiBookOpenFill,
-  check: RiCheckLine,
-  chevronRight: RiArrowRightSLine,
-  close: RiCloseLine,
-  copy: RiFileCopyLine,
-  homeSmile: RiHomeSmileFill,
-  imageAdd: RiImageAddFill,
-  info: RiInformationFill,
-  money: RiMoneyDollarCircleLine,
-  subtractLine: RiSubtractLine,
 } as const satisfies Record<string, RemixiconComponentType>;
 
+const iconsMap = {
+  ...remixiconMap,
+  ...commonRemixicons,
+  ...customIconsMap,
+} as Record<string, RemixiconComponentType> & typeof customIconsMap;
+
 export type IconName = keyof typeof iconsMap;
 export const iconNames = Object.keys(iconsMap) as IconName[];
 
-type BaseIconProps = ComponentProps<typeof RiGoogleFill>;
+type BaseIconProps = ComponentProps<RemixiconComponentType>;
 type IconProps = {name: IconName} & Omit<BaseIconProps, 'name'>;
 
 export function Icon({name, ...props}: IconProps) {

package/src/components/icon/remixicon-registry.ts

@@ -0,0 +1,24 @@
+import type {RemixiconComponentType} from '@remixicon/react';
+import * as RemixIcons from '@remixicon/react';
+
+const remixiconEntries = Object.entries(RemixIcons).filter(
+  ([key, value]) => key.startsWith('Ri') && typeof value === 'function',
+) as Array<[string, RemixiconComponentType]>;
+
+function iconNameToKey(iconName: string): string {
+  const withoutPrefix = iconName.slice(2);
+  return withoutPrefix.charAt(0).toLowerCase() + withoutPrefix.slice(1);
+}
+
+const remixiconMapEntries = remixiconEntries.map(([name, component]) => [
+  iconNameToKey(name),
+  component,
+]) as Array<[string, RemixiconComponentType]>;
+
+export const remixiconMap = Object.fromEntries(remixiconMapEntries) as Record<
+  string,
+  RemixiconComponentType
+>;
+
+export type RemixIconName = keyof typeof remixiconMap;
+export const remixiconNames = Object.keys(remixiconMap) as RemixIconName[];