@shipfox/react-ui 0.14.0 → 0.16.0

package/src/components/tabs/tabs.tsx

@@ -1,380 +0,0 @@
-import {type HTMLMotionProps, motion, type Transition} from 'framer-motion';
-import {
-  Children,
-  type ComponentProps,
-  createContext,
-  forwardRef,
-  isValidElement,
-  type ReactElement,
-  type ReactNode,
-  useCallback,
-  useContext,
-  useEffect,
-  useImperativeHandle,
-  useMemo,
-  useRef,
-  useState,
-} from 'react';
-import {cn} from 'utils/cn';
-import {debounce} from 'utils/debounce';
-
-type TabsContextType<T extends string = string> = {
-  activeValue: T;
-  handleValueChange: (value: T) => void;
-  registerTrigger: (value: string, node: HTMLElement | null) => void;
-  getTriggerElement: (value: string) => HTMLElement | undefined;
-  getAllTriggerValues: () => string[];
-};
-
-const TabsContext = createContext<TabsContextType<string> | undefined>(undefined);
-
-function useTabs<T extends string = string>(): TabsContextType<T> {
-  const context = useContext(TabsContext);
-  if (!context) {
-    throw new Error('useTabs must be used within a Tabs component');
-  }
-  return context as unknown as TabsContextType<T>;
-}
-
-type BaseTabsProps = ComponentProps<'div'> & {
-  children: ReactNode;
-};
-
-type UnControlledTabsProps<T extends string = string> = BaseTabsProps & {
-  defaultValue?: T;
-  value?: never;
-  onValueChange?: never;
-};
-
-type ControlledTabsProps<T extends string = string> = BaseTabsProps & {
-  value: T;
-  onValueChange?: (value: T) => void;
-  defaultValue?: never;
-};
-
-type TabsProps<T extends string = string> = UnControlledTabsProps<T> | ControlledTabsProps<T>;
-
-function Tabs<T extends string = string>({
-  defaultValue,
-  value,
-  onValueChange,
-  children,
-  className,
-  ...props
-}: TabsProps<T>) {
-  const [activeValue, setActiveValue] = useState<T | undefined>(defaultValue ?? undefined);
-  const triggersRef = useRef(new Map<string, HTMLElement>());
-  const initialSet = useRef(false);
-  const isControlled = value !== undefined;
-
-  useEffect(() => {
-    if (
-      !isControlled &&
-      activeValue === undefined &&
-      triggersRef.current.size > 0 &&
-      !initialSet.current
-    ) {
-      const firstTab = Array.from(triggersRef.current.keys())[0];
-      setActiveValue(firstTab as T);
-      initialSet.current = true;
-    }
-  }, [activeValue, isControlled]);
-
-  const registerTrigger = useCallback(
-    (value: string, node: HTMLElement | null) => {
-      if (node) {
-        triggersRef.current.set(value, node);
-        if (!isControlled && activeValue === undefined && !initialSet.current) {
-          setActiveValue(value as T);
-          initialSet.current = true;
-        }
-      } else {
-        triggersRef.current.delete(value);
-      }
-    },
-    [isControlled, activeValue],
-  );
-
-  const handleValueChange = useCallback(
-    (val: T) => {
-      if (!isControlled) setActiveValue(val);
-      else onValueChange?.(val);
-    },
-    [isControlled, onValueChange],
-  );
-
-  const getTriggerElement = useCallback((val: string) => {
-    return triggersRef.current.get(val);
-  }, []);
-
-  const getAllTriggerValues = useCallback(() => {
-    return Array.from(triggersRef.current.keys());
-  }, []);
-
-  const resolvedActiveValue: T = useMemo(() => {
-    if (value !== undefined) return value;
-    if (activeValue !== undefined) return activeValue;
-    const firstKey = Array.from(triggersRef.current.keys())[0];
-    return (firstKey ?? '') as T;
-  }, [value, activeValue]);
-
-  return (
-    <TabsContext.Provider
-      value={{
-        activeValue: resolvedActiveValue as string,
-        handleValueChange: handleValueChange as (value: string) => void,
-        registerTrigger,
-        getTriggerElement,
-        getAllTriggerValues,
-      }}
-    >
-      <div
-        data-slot="tabs"
-        className={cn('flex flex-col gap-2', className)}
-        {...(props as ComponentProps<'div'>)}
-      >
-        {children}
-      </div>
-    </TabsContext.Provider>
-  );
-}
-
-type TabsListProps = ComponentProps<'div'> & {
-  children: ReactNode;
-  activeClassName?: string;
-  transition?: Transition;
-};
-
-function TabsList({
-  children,
-  className,
-  activeClassName,
-  transition = {
-    type: 'spring',
-    stiffness: 400,
-    damping: 30,
-  },
-  ...props
-}: TabsListProps) {
-  const {activeValue, getTriggerElement} = useTabs();
-  const [indicatorStyle, setIndicatorStyle] = useState<{
-    left: number;
-    width: number;
-  } | null>(null);
-  const listRef = useRef<HTMLDivElement>(null);
-
-  const updateIndicator = useCallback(() => {
-    const activeTrigger = getTriggerElement(activeValue);
-
-    if (activeTrigger && listRef.current) {
-      const listRect = listRef.current.getBoundingClientRect();
-      const triggerRect = activeTrigger.getBoundingClientRect();
-      setIndicatorStyle({
-        left: triggerRect.left - listRect.left,
-        width: triggerRect.width,
-      });
-    }
-  }, [activeValue, getTriggerElement]);
-
-  useEffect(() => {
-    const debouncedUpdate = debounce(updateIndicator, 100);
-    window.addEventListener('resize', debouncedUpdate);
-    requestAnimationFrame(updateIndicator);
-
-    return () => {
-      window.removeEventListener('resize', debouncedUpdate);
-    };
-  }, [updateIndicator]);
-
-  return (
-    <div
-      ref={listRef}
-      role="tablist"
-      data-slot="tabs-list"
-      className={cn('relative inline-flex items-center gap-8', className)}
-      {...(props as ComponentProps<'div'>)}
-    >
-      {children}
-      {indicatorStyle && (
-        <motion.div
-          className={cn(
-            'absolute bottom-0 h-2 bg-foreground-highlight-interactive',
-            activeClassName,
-          )}
-          initial={false}
-          animate={{
-            left: indicatorStyle.left,
-            width: indicatorStyle.width,
-          }}
-          transition={transition}
-        />
-      )}
-    </div>
-  );
-}
-
-type TabsTriggerProps = Omit<HTMLMotionProps<'button'>, 'ref'> & {
-  value: string;
-  children: ReactNode;
-};
-
-const TabsTrigger = forwardRef<HTMLButtonElement, TabsTriggerProps>(
-  ({value, children, className, onKeyDown, ...props}, ref) => {
-    const {
-      activeValue,
-      handleValueChange,
-      registerTrigger,
-      getAllTriggerValues,
-      getTriggerElement,
-    } = useTabs();
-
-    const localRef = useRef<HTMLButtonElement | null>(null);
-    useImperativeHandle(ref, () => localRef.current as HTMLButtonElement);
-
-    useEffect(() => {
-      registerTrigger(value, localRef.current);
-      return () => registerTrigger(value, null);
-    }, [value, registerTrigger]);
-
-    const isActive = activeValue === value;
-
-    const handleKeyDown = useCallback(
-      (event: React.KeyboardEvent<HTMLButtonElement>) => {
-        onKeyDown?.(event);
-
-        const allValues = getAllTriggerValues();
-        const currentIndex = allValues.indexOf(value);
-
-        if (currentIndex === -1) return;
-
-        let targetIndex = currentIndex;
-        let shouldPreventDefault = true;
-
-        switch (event.key) {
-          case 'ArrowLeft': {
-            targetIndex = currentIndex > 0 ? currentIndex - 1 : allValues.length - 1;
-            break;
-          }
-          case 'ArrowRight': {
-            targetIndex = currentIndex < allValues.length - 1 ? currentIndex + 1 : 0;
-            break;
-          }
-          case 'Home': {
-            targetIndex = 0;
-            break;
-          }
-          case 'End': {
-            targetIndex = allValues.length - 1;
-            break;
-          }
-          default: {
-            shouldPreventDefault = false;
-            return;
-          }
-        }
-
-        if (shouldPreventDefault) {
-          event.preventDefault();
-          const targetValue = allValues[targetIndex];
-          if (targetValue) {
-            handleValueChange(targetValue);
-            const targetElement = getTriggerElement(targetValue);
-            targetElement?.focus();
-          }
-        }
-      },
-      [value, getAllTriggerValues, getTriggerElement, handleValueChange, onKeyDown],
-    );
-
-    return (
-      <motion.button
-        ref={localRef}
-        data-slot="tabs-trigger"
-        role="tab"
-        tabIndex={isActive ? 0 : -1}
-        whileTap={{scale: 0.95}}
-        onClick={() => handleValueChange(value)}
-        onKeyDown={handleKeyDown}
-        data-state={isActive ? 'active' : 'inactive'}
-        aria-selected={isActive}
-        aria-controls={`tabpanel-${value}`}
-        id={`tab-${value}`}
-        className={cn(
-          'relative inline-flex cursor-pointer items-center justify-center whitespace-nowrap px-0 py-10 text-sm font-medium transition-colors outline-none focus-visible:shadow-border-interactive-with-active focus-visible:rounded-2 disabled:pointer-events-none disabled:opacity-50',
-          isActive ? 'text-foreground-neutral-base' : 'text-foreground-neutral-muted',
-          className,
-        )}
-        {...props}
-      >
-        {children}
-      </motion.button>
-    );
-  },
-);
-
-TabsTrigger.displayName = 'TabsTrigger';
-
-type TabsContentsProps = ComponentProps<'div'> & {
-  children: ReactNode;
-};
-
-function TabsContents({children, className, ...props}: TabsContentsProps) {
-  const {activeValue} = useTabs();
-  const childrenArray = Children.toArray(children);
-
-  const activeChild = childrenArray.find(
-    (child): child is ReactElement<{value: string}> =>
-      isValidElement(child) &&
-      typeof child.props === 'object' &&
-      child.props !== null &&
-      'value' in child.props &&
-      child.props.value === activeValue,
-  );
-
-  return (
-    <div data-slot="tabs-contents" className={cn(className)} {...(props as ComponentProps<'div'>)}>
-      {activeChild}
-    </div>
-  );
-}
-
-type TabsContentProps = ComponentProps<'div'> & {
-  value: string;
-  children: ReactNode;
-};
-
-function TabsContent({children, value, className, ...props}: TabsContentProps) {
-  const {activeValue} = useTabs();
-  const isActive = activeValue === value;
-
-  if (!isActive) {
-    return null;
-  }
-
-  return (
-    <div
-      role="tabpanel"
-      data-slot="tabs-content"
-      aria-labelledby={`tab-${value}`}
-      className={cn(className)}
-      {...props}
-    >
-      {children}
-    </div>
-  );
-}
-
-export {
-  Tabs,
-  TabsList,
-  TabsTrigger,
-  TabsContents,
-  TabsContent,
-  useTabs,
-  type TabsContextType,
-  type TabsProps,
-  type TabsListProps,
-  type TabsTriggerProps,
-  type TabsContentsProps,
-  type TabsContentProps,
-};

package/src/components/textarea/index.ts

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

package/src/components/textarea/textarea.stories.tsx

@@ -1,196 +0,0 @@
-import {argosScreenshot} from '@argos-ci/storybook/vitest';
-import type {Meta, StoryObj} from '@storybook/react';
-import {Code, Header} from 'components/typography';
-import {Textarea} from './textarea';
-
-const meta = {
-  title: 'Components/Textarea',
-  component: Textarea,
-  tags: ['autodocs'],
-  argTypes: {
-    placeholder: {control: 'text'},
-    disabled: {control: 'boolean'},
-    'aria-invalid': {control: 'boolean'},
-    rows: {control: 'number'},
-    cols: {control: 'number'},
-  },
-  args: {
-    placeholder: 'Type something…',
-    disabled: false,
-    'aria-invalid': false,
-    rows: 4,
-  },
-} satisfies Meta<typeof Textarea>;
-
-export default meta;
-
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = {
-  play: async (ctx) => {
-    await new Promise((resolve) => setTimeout(resolve, 100));
-    await argosScreenshot(ctx, 'Textarea Default');
-  },
-};
-
-const variants = ['base', 'component'] as const;
-const sizes = ['base', 'small'] as const;
-
-export const States: Story = {
-  render: (args) => (
-    <div className="flex flex-col gap-32">
-      {variants.map((variant) =>
-        sizes.map((size) => (
-          <div key={variant + size} className="flex flex-col gap-16">
-            <Header variant="h3">
-              {variant} {size}
-            </Header>
-            <div className="flex flex-col gap-8">
-              <Code variant="label" className="text-foreground-neutral-subtle">
-                Default
-              </Code>
-
-              <Textarea {...args} variant={variant} size={size} />
-            </div>
-
-            <div className="flex flex-col gap-8">
-              <Code variant="label" className="text-foreground-neutral-subtle">
-                Hover
-              </Code>
-
-              <Textarea {...args} className="hover" variant={variant} size={size} />
-            </div>
-            <div className="flex flex-col gap-8">
-              <Code variant="label" className="text-foreground-neutral-subtle">
-                Active
-              </Code>
-
-              <Textarea
-                {...args}
-                className="active"
-                defaultValue="The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog."
-                variant={variant}
-                size={size}
-              />
-            </div>
-            <div className="flex flex-col gap-8">
-              <Code variant="label" className="text-foreground-neutral-subtle">
-                Focus
-              </Code>
-
-              <Textarea {...args} className="focus" variant={variant} size={size} />
-            </div>
-            <div className="flex flex-col gap-8">
-              <Code variant="label" className="text-foreground-neutral-subtle">
-                Disabled
-              </Code>
-
-              <Textarea {...args} disabled variant={variant} size={size} />
-            </div>
-            <div className="flex flex-col gap-8">
-              <Code variant="label" className="text-foreground-neutral-subtle">
-                Invalid
-              </Code>
-
-              <Textarea {...args} aria-invalid variant={variant} size={size} />
-            </div>
-          </div>
-        )),
-      )}
-    </div>
-  ),
-};
-
-States.parameters = {
-  pseudo: {
-    hover: '.hover',
-    active: '.active',
-    focusVisible: '.focus',
-  },
-};
-
-export const Sizes: Story = {
-  render: (args) => (
-    <div className="flex flex-col gap-32">
-      <div className="flex flex-col gap-8">
-        <Code variant="label" className="text-foreground-neutral-subtle">
-          Rows: 2
-        </Code>
-        <Textarea {...args} rows={2} />
-      </div>
-      <div className="flex flex-col gap-8">
-        <Code variant="label" className="text-foreground-neutral-subtle">
-          Rows: 4 (default)
-        </Code>
-        <Textarea {...args} rows={4} />
-      </div>
-      <div className="flex flex-col gap-8">
-        <Code variant="label" className="text-foreground-neutral-subtle">
-          Rows: 6
-        </Code>
-        <Textarea {...args} rows={6} />
-      </div>
-      <div className="flex flex-col gap-8">
-        <Code variant="label" className="text-foreground-neutral-subtle">
-          Rows: 10
-        </Code>
-        <Textarea {...args} rows={10} />
-      </div>
-    </div>
-  ),
-};
-
-export const DesignMock: Story = {
-  render: () => {
-    const variants = [
-      {key: 'base', label: 'Primary'},
-      {key: 'component', label: 'Secondary'},
-    ] as const;
-    const states = [
-      {name: 'Default', props: {}},
-      {name: 'Hover', props: {className: 'hover'}},
-      {name: 'Focus', props: {className: 'focus'}},
-      {name: 'Filled', props: {defaultValue: 'Placeholder'}},
-      {name: 'Filled Hover', props: {defaultValue: 'Placeholder', className: 'hover'}},
-      {name: 'Disabled', props: {disabled: true}},
-      {name: 'Error', props: {'aria-invalid': true}},
-    ] as const;
-
-    return (
-      <div className="flex flex-col gap-32 pb-64 pt-32 px-32">
-        <Header variant="h3" className="text-foreground-neutral-subtle">
-          TEXT AREA
-        </Header>
-        <div className="flex flex-row gap-32">
-          {variants.map((variant) => (
-            <div key={variant.key} className="flex flex-col gap-32">
-              {states.map((state) => (
-                <div key={state.name} className="flex flex-col gap-8">
-                  <Code variant="label" className="text-foreground-neutral-subtle">
-                    Size=Base (32), State={state.name}, Color={variant.label}
-                  </Code>
-                  <div className="w-280">
-                    <Textarea
-                      placeholder="Placeholder"
-                      variant={variant.key}
-                      size="base"
-                      rows={2}
-                      {...state.props}
-                    />
-                  </div>
-                </div>
-              ))}
-            </div>
-          ))}
-        </div>
-      </div>
-    );
-  },
-};
-
-DesignMock.parameters = {
-  pseudo: {
-    hover: '.hover',
-    focusVisible: '.focus',
-  },
-};

package/src/components/textarea/textarea.tsx

@@ -1,42 +0,0 @@
-import {cva, type VariantProps} from 'class-variance-authority';
-import type {ComponentProps} from 'react';
-import {cn} from 'utils/cn';
-
-export const textareaVariants = cva('', {
-  variants: {
-    variant: {
-      base: 'bg-background-field-base',
-      component: 'bg-background-field-component',
-    },
-    size: {
-      base: 'py-6',
-      small: 'py-4',
-    },
-  },
-  defaultVariants: {
-    variant: 'base',
-    size: 'base',
-  },
-});
-
-type TextareaProps = Omit<ComponentProps<'textarea'>, 'size'> &
-  VariantProps<typeof textareaVariants>;
-
-export function Textarea({className, variant, size, ...props}: TextareaProps) {
-  return (
-    <textarea
-      data-slot="textarea"
-      className={cn(
-        'textarea-resize-custom placeholder:text-foreground-neutral-muted w-full min-w-0 rounded-6 px-8 pr-24 text-sm leading-20 text-foreground-neutral-base shadow-button-neutral transition-[color,box-shadow] outline-none',
-        'hover:bg-background-field-hover',
-        'selection:bg-background-accent-neutral-soft selection:text-foreground-neutral-on-inverted',
-        'disabled:pointer-events-none disabled:cursor-not-allowed disabled:bg-background-neutral-disabled disabled:shadow-none disabled:text-foreground-neutral-disabled',
-        'focus-visible:shadow-border-interactive-with-active',
-        'aria-invalid:shadow-border-error',
-        textareaVariants({variant, size}),
-        className,
-      )}
-      {...props}
-    />
-  );
-}

package/src/components/theme/index.ts

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

package/src/components/theme/theme-provider.tsx

@@ -1,50 +0,0 @@
-import {type ReactNode, useEffect, useState} from 'react';
-import {type Theme, ThemeProviderContext} from 'state/theme';
-
-type ThemeProviderProps = {
-  children: ReactNode;
-  defaultTheme?: Theme;
-  storageKey?: string;
-};
-
-export function ThemeProvider({
-  children,
-  defaultTheme = 'system',
-  storageKey = 'shipfox-theme',
-  ...props
-}: ThemeProviderProps) {
-  const [theme, setTheme] = useState<Theme>(
-    () => (localStorage.getItem(storageKey) as Theme) || defaultTheme,
-  );
-
-  useEffect(() => {
-    const root = window.document.documentElement;
-
-    root.classList.remove('light', 'dark');
-
-    if (theme === 'system') {
-      const systemTheme = window.matchMedia('(prefers-color-scheme: dark)').matches
-        ? 'dark'
-        : 'light';
-
-      root.classList.add(systemTheme);
-      return;
-    }
-
-    root.classList.add(theme);
-  }, [theme]);
-
-  const value = {
-    theme,
-    setTheme: (theme: Theme) => {
-      localStorage.setItem(storageKey, theme);
-      setTheme(theme);
-    },
-  };
-
-  return (
-    <ThemeProviderContext.Provider {...props} value={value}>
-      {children}
-    </ThemeProviderContext.Provider>
-  );
-}

package/src/components/toast/index.ts

@@ -1,2 +0,0 @@
-export * from './toast';
-export * from './toast-custom';