@shipfox/react-ui 0.15.0 → 0.16.0

package/src/build-css-entry.ts

@@ -1,3 +0,0 @@
-// This file is only used for building CSS
-// It imports the CSS file which Vite will process and bundle
-import '../index.css';

package/src/colors.stories.conts.ts

@@ -1,164 +0,0 @@
-export const primitiveColors = {
-  neutral: {
-    variants: [
-      'bg-neutral-0',
-      'bg-neutral-50',
-      'bg-neutral-100',
-      'bg-neutral-200',
-      'bg-neutral-300',
-      'bg-neutral-400',
-      'bg-neutral-500',
-      'bg-neutral-600',
-      'bg-neutral-700',
-      'bg-neutral-800',
-      'bg-neutral-900',
-      'bg-neutral-950',
-      'bg-neutral-1000',
-    ],
-  },
-  purple: {
-    variants: [
-      'bg-purple-50',
-      'bg-purple-100',
-      'bg-purple-200',
-      'bg-purple-300',
-      'bg-purple-400',
-      'bg-purple-500',
-      'bg-purple-600',
-      'bg-purple-700',
-      'bg-purple-800',
-      'bg-purple-900',
-      'bg-purple-950',
-    ],
-  },
-  blue: {
-    variants: [
-      'bg-blue-50',
-      'bg-blue-100',
-      'bg-blue-200',
-      'bg-blue-300',
-      'bg-blue-400',
-      'bg-blue-500',
-      'bg-blue-600',
-      'bg-blue-700',
-      'bg-blue-800',
-      'bg-blue-900',
-      'bg-blue-950',
-    ],
-  },
-  green: {
-    variants: [
-      'bg-green-50',
-      'bg-green-100',
-      'bg-green-200',
-      'bg-green-300',
-      'bg-green-400',
-      'bg-green-500',
-      'bg-green-600',
-      'bg-green-700',
-      'bg-green-800',
-      'bg-green-900',
-      'bg-green-950',
-    ],
-  },
-  primary: {
-    variants: [
-      'bg-primary-50',
-      'bg-primary-100',
-      'bg-primary-200',
-      'bg-primary-300',
-      'bg-primary-400',
-      'bg-primary-500',
-      'bg-primary-600',
-      'bg-primary-700',
-      'bg-primary-800',
-      'bg-primary-900',
-      'bg-primary-950',
-    ],
-  },
-  red: {
-    variants: [
-      'bg-red-50',
-      'bg-red-100',
-      'bg-red-200',
-      'bg-red-300',
-      'bg-red-400',
-      'bg-red-500',
-      'bg-red-600',
-      'bg-red-700',
-      'bg-red-800',
-      'bg-red-900',
-      'bg-red-950',
-    ],
-  },
-  orange: {
-    variants: [
-      'bg-orange-50',
-      'bg-orange-100',
-      'bg-orange-200',
-      'bg-orange-300',
-      'bg-orange-400',
-      'bg-orange-500',
-      'bg-orange-600',
-      'bg-orange-700',
-      'bg-orange-800',
-      'bg-orange-900',
-      'bg-orange-950',
-    ],
-  },
-  accent: {
-    variants: [
-      'bg-accent-purple',
-      'bg-accent-indigo',
-      'bg-accent-mint',
-      'bg-accent-green',
-      'bg-accent-teal',
-      'bg-accent-brown',
-      'bg-accent-blue',
-      'bg-accent-orange',
-      'bg-accent-yellow',
-      'bg-accent-pink',
-      'bg-accent-gray',
-      'bg-accent-cyan',
-      'bg-accent-red',
-    ],
-  },
-  'alpha-white': {
-    variants: [
-      'bg-alpha-white-0',
-      'bg-alpha-white-2',
-      'bg-alpha-white-4',
-      'bg-alpha-white-6',
-      'bg-alpha-white-8',
-      'bg-alpha-white-10',
-      'bg-alpha-white-12',
-      'bg-alpha-white-16',
-      'bg-alpha-white-24',
-      'bg-alpha-white-40',
-      'bg-alpha-white-56',
-      'bg-alpha-white-64',
-      'bg-alpha-white-72',
-      'bg-alpha-white-80',
-      'bg-alpha-white-88',
-    ],
-  },
-  'alpha-black': {
-    variants: [
-      'bg-alpha-black-0',
-      'bg-alpha-black-2',
-      'bg-alpha-black-4',
-      'bg-alpha-black-6',
-      'bg-alpha-black-8',
-      'bg-alpha-black-10',
-      'bg-alpha-black-12',
-      'bg-alpha-black-16',
-      'bg-alpha-black-24',
-      'bg-alpha-black-40',
-      'bg-alpha-black-56',
-      'bg-alpha-black-64',
-      'bg-alpha-black-72',
-      'bg-alpha-black-80',
-      'bg-alpha-black-88',
-    ],
-  },
-} as const;

package/src/colors.stories.tsx

@@ -1,66 +0,0 @@
-import type {Meta, StoryObj} from '@storybook/react';
-import {Code, Header} from 'components/typography';
-import {cn} from 'utils/cn';
-import {primitiveColors} from './colors.stories.conts';
-
-const meta: Meta = {
-  title: 'Assets/Colors',
-};
-export default meta;
-
-type Story = StoryObj;
-
-interface ColorItemProps {
-  color: string;
-  variant: string;
-}
-
-function ColorItem({variant}: ColorItemProps) {
-  const value = variant.split('-').pop();
-  return (
-    <div className="flex flex-col items-center gap-1">
-      <div className={cn('h-24 w-full rounded-6 border border-border', variant)} />
-      <Code variant="label" className="text-foreground-neutral-subtle">
-        {value}
-      </Code>
-    </div>
-  );
-}
-
-interface ColorPaletteProps {
-  title: string;
-  rootKey: string;
-  variants: readonly string[];
-}
-
-function ColorPalette({title, rootKey, variants}: ColorPaletteProps) {
-  return (
-    <div className="grid grid-cols-16 gap-8">
-      <Code variant="label" className="text-foreground-neutral-subtle">
-        {title}
-      </Code>
-      {variants.map((variant) => (
-        <ColorItem key={variant} variant={variant} color={rootKey} />
-      ))}
-    </div>
-  );
-}
-
-export const Palette: Story = {
-  render: () => (
-    <div className="flex flex-col gap-16">
-      <section className="flex flex-col gap-8">
-        <Header variant="h2">Primitive Colors</Header>
-
-        {Object.entries(primitiveColors).map(([color, variants]) => (
-          <ColorPalette
-            key={color}
-            title={color.replace('-', ' ')}
-            rootKey={color}
-            variants={variants.variants as readonly string[]}
-          />
-        ))}
-      </section>
-    </div>
-  ),
-};

package/src/components/alert/alert.stories.tsx

@@ -1,178 +0,0 @@
-import {zodResolver} from '@hookform/resolvers/zod';
-import type {Meta, StoryObj} from '@storybook/react';
-import {Button} from 'components/button';
-import {Form, FormControl, FormField, FormItem, FormLabel, FormMessage} from 'components/form';
-import {Input} from 'components/input';
-import {Header} from 'components/typography';
-import {useState} from 'react';
-import {useForm} from 'react-hook-form';
-import {z} from 'zod';
-import {
-  Alert,
-  AlertAction,
-  AlertActions,
-  AlertClose,
-  AlertContent,
-  AlertDescription,
-  AlertTitle,
-} from './alert';
-
-const meta = {
-  title: 'Components/Alert',
-  component: Alert,
-  tags: ['autodocs'],
-  argTypes: {
-    variant: {
-      control: 'select',
-      options: ['default', 'info', 'success', 'warning', 'error'],
-    },
-  },
-  args: {
-    variant: 'default',
-  },
-} satisfies Meta<typeof Alert>;
-
-export default meta;
-
-type Story = StoryObj<typeof meta>;
-
-const variants = ['default', 'info', 'success', 'warning', 'error'] as const;
-
-export const Default: Story = {
-  render: (args) => {
-    return (
-      <Alert {...args}>
-        <AlertContent>
-          <AlertTitle>Title</AlertTitle>
-          <AlertDescription>Description</AlertDescription>
-          <AlertActions>
-            <AlertAction>Download</AlertAction>
-            <AlertAction>View</AlertAction>
-          </AlertActions>
-        </AlertContent>
-        <AlertClose />
-      </Alert>
-    );
-  },
-};
-
-const validationFormSchema = z.object({
-  email: z.string().email('Please enter a valid email address'),
-  password: z.string().min(8, 'Password must be at least 8 characters'),
-});
-
-type ValidationFormValues = z.infer<typeof validationFormSchema>;
-
-function ErrorValidationToasterExample() {
-  const [showError, setShowError] = useState(false);
-  const form = useForm<ValidationFormValues>({
-    resolver: zodResolver(validationFormSchema),
-    defaultValues: {
-      email: '',
-      password: '',
-    },
-  });
-
-  function onSubmit(data: ValidationFormValues) {
-    // biome-ignore lint/suspicious/noConsole: <we need to log the data for the story>
-    console.log('Form submitted:', data);
-    setShowError(false);
-  }
-
-  function onError() {
-    setShowError(true);
-  }
-
-  const errors = form.formState.errors;
-  const errorCount = Object.keys(errors).length;
-  const errorMessage =
-    errorCount > 0
-      ? `Please fix ${errorCount} error${errorCount > 1 ? 's' : ''} before submitting.`
-      : '';
-
-  return (
-    <div className="flex flex-col gap-16 w-full max-w-md">
-      {errorCount > 0 && (
-        <Alert variant="error" open={showError} autoClose={5000} onOpenChange={setShowError}>
-          <AlertContent>
-            <AlertTitle>Validation Error</AlertTitle>
-            <AlertDescription>{errorMessage}</AlertDescription>
-            <AlertActions>
-              <AlertAction
-                onClick={() => {
-                  form.clearErrors();
-                  setShowError(false);
-                }}
-              >
-                Dismiss
-              </AlertAction>
-            </AlertActions>
-          </AlertContent>
-          <AlertClose />
-        </Alert>
-      )}
-      <Form {...form}>
-        <form onSubmit={form.handleSubmit(onSubmit, onError)} className="space-y-8">
-          <FormField
-            control={form.control}
-            name="email"
-            render={({field}) => (
-              <FormItem>
-                <FormLabel>Email</FormLabel>
-                <FormControl>
-                  <Input type="email" placeholder="email@example.com" {...field} />
-                </FormControl>
-                <FormMessage />
-              </FormItem>
-            )}
-          />
-          <FormField
-            control={form.control}
-            name="password"
-            render={({field}) => (
-              <FormItem>
-                <FormLabel>Password</FormLabel>
-                <FormControl>
-                  <Input type="password" placeholder="Enter password" {...field} />
-                </FormControl>
-                <FormMessage />
-              </FormItem>
-            )}
-          />
-          <Button type="submit">Submit</Button>
-        </form>
-      </Form>
-    </div>
-  );
-}
-
-export const WithFormValidation: Story = {
-  render: () => <ErrorValidationToasterExample />,
-};
-
-export const DesignMock: Story = {
-  render: () => {
-    return (
-      <div className="flex flex-col gap-32 pb-64 pt-32 px-32 bg-background-neutral-base">
-        <Header variant="h3" className="text-foreground-neutral-subtle">
-          ALERTS
-        </Header>
-        <div className="flex flex-col gap-16">
-          {variants.map((variant) => (
-            <Alert key={variant} variant={variant}>
-              <AlertContent>
-                <AlertTitle>Title</AlertTitle>
-                <AlertDescription>Description</AlertDescription>
-                <AlertActions>
-                  <AlertAction>Download</AlertAction>
-                  <AlertAction>View</AlertAction>
-                </AlertActions>
-              </AlertContent>
-              <AlertClose />
-            </Alert>
-          ))}
-        </div>
-      </div>
-    );
-  },
-};

package/src/components/alert/alert.tsx

@@ -1,291 +0,0 @@
-import {cva, type VariantProps} from 'class-variance-authority';
-import {Icon} from 'components/icon';
-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(
-  'relative w-full rounded-l-4 rounded-r-8 px-16 py-12 text-sm flex gap-12 items-start border',
-  {
-    variants: {
-      variant: {
-        default: 'bg-tag-neutral-bg text-foreground-neutral-base border-tag-neutral-border',
-        info: 'bg-tag-blue-bg text-foreground-neutral-base border-tag-blue-border',
-        success: 'bg-tag-success-bg text-foreground-neutral-base border-tag-success-border',
-        warning: 'bg-tag-warning-bg text-foreground-neutral-base border-tag-warning-border',
-        error: 'bg-tag-error-bg text-foreground-neutral-base border-tag-error-border',
-      },
-    },
-    defaultVariants: {
-      variant: 'default',
-    },
-  },
-);
-
-const alertLineVariants = cva('w-4 self-stretch rounded-full', {
-  variants: {
-    variant: {
-      default: 'bg-tag-neutral-icon',
-      info: 'bg-tag-blue-icon',
-      success: 'bg-tag-success-icon',
-      warning: 'bg-tag-warning-icon',
-      error: 'bg-tag-error-icon',
-    },
-  },
-  defaultVariants: {
-    variant: 'default',
-  },
-});
-
-const closeIconVariants = cva('w-16 h-16', {
-  variants: {
-    variant: {
-      default: 'text-tag-neutral-icon',
-      info: 'text-tag-blue-icon',
-      success: 'text-tag-success-icon',
-      warning: 'text-tag-warning-icon',
-      error: 'text-tag-error-icon',
-    },
-  },
-  defaultVariants: {
-    variant: 'default',
-  },
-});
-
-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>
-    );
-  }
-
-  return (
-    <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>
-  );
-}
-
-function AlertContent({className, ...props}: ComponentProps<'div'>) {
-  return <div data-slot="alert-content" className={cn('flex-1 min-w-0', className)} {...props} />;
-}
-
-function AlertTitle({className, ...props}: ComponentProps<'div'>) {
-  return (
-    <div
-      data-slot="alert-title"
-      className={cn('font-medium text-sm leading-20 text-foreground-neutral-base mb-4', className)}
-      {...props}
-    />
-  );
-}
-
-function AlertDescription({className, ...props}: ComponentProps<'div'>) {
-  return (
-    <div
-      data-slot="alert-description"
-      className={cn(
-        'text-xs leading-20 text-foreground-neutral-base [&_p]:leading-relaxed',
-        className,
-      )}
-      {...props}
-    />
-  );
-}
-
-function AlertActions({className, ...props}: ComponentProps<'div'>) {
-  return (
-    <div
-      data-slot="alert-actions"
-      className={cn('flex items-center gap-8 mt-8', className)}
-      {...props}
-    />
-  );
-}
-
-function AlertAction({className, ...props}: ComponentProps<'button'>) {
-  return (
-    <button
-      data-slot="alert-action"
-      type="button"
-      className={cn(
-        'bg-transparent border-none p-0 cursor-pointer text-xs font-medium leading-20 text-foreground-neutral-base hover:text-foreground-neutral-subtle transition-colors duration-150 outline-none focus-visible:ring-2 focus-visible:ring-background-accent-blue-base focus-visible:ring-offset-2',
-        className,
-      )}
-      {...props}
-    />
-  );
-}
-
-function AlertClose({
-  className,
-  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"
-      type="button"
-      className={cn(
-        'absolute cursor-pointer top-12 right-12 rounded-4 p-4 bg-transparent border-none text-foreground-neutral-muted hover:text-foreground-neutral-base hover:bg-background-components-hover transition-colors duration-150 outline-none focus-visible:ring-2 focus-visible:ring-background-accent-blue-base focus-visible:ring-offset-2',
-        className,
-      )}
-      aria-label="Close"
-      onClick={handleClick}
-      {...props}
-    >
-      <Icon name="close" className={cn(closeIconVariants({variant}))} />
-    </button>
-  );
-}
-
-export {
-  Alert,
-  AlertContent,
-  AlertTitle,
-  AlertDescription,
-  AlertActions,
-  AlertAction,
-  AlertClose,
-  alertDefaultTransition,
-};
-
-export type {AlertProps};

package/src/components/alert/index.ts

@@ -1 +0,0 @@
-export * from './alert';