@shipfox/react-ui 0.14.0 → 0.16.0

package/src/components/modal/modal.tsx

@@ -1,311 +0,0 @@
-import * as DialogPrimitive from '@radix-ui/react-dialog';
-import {cva} from 'class-variance-authority';
-import {Button} from 'components/button';
-import {Icon} from 'components/icon';
-import {Text} from 'components/typography';
-import {motion, type Transition} from 'framer-motion';
-import {useMediaQuery} from 'hooks/useMediaQuery';
-import {type ComponentProps, createContext, useContext} from 'react';
-import {cn} from 'utils/cn';
-import {Drawer as VaulDrawer} from 'vaul';
-
-const modalDefaultTransition: Transition = {
-  type: 'spring',
-  stiffness: 300,
-  damping: 30,
-};
-
-type ModalContextValue = {
-  breakpoint: string;
-  isDesktop: boolean;
-};
-
-const ModalContext = createContext<ModalContextValue | null>(null);
-
-function useModalContext() {
-  const context = useContext(ModalContext);
-  if (!context) {
-    throw new Error('Modal components must be used within a Modal component');
-  }
-  return context;
-}
-
-const modalOverlayVariants = cva(
-  'fixed inset-0 z-40 bg-background-backdrop-backdrop data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0',
-);
-
-const modalContentVariants = cva(
-  'fixed left-1/2 top-1/2 z-50 flex flex-col overflow-clip bg-background-neutral-base rounded-16 w-full max-w-[576px] -translate-x-1/2 -translate-y-1/2 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 shadow-tooltip',
-);
-
-function Modal({
-  breakpoint = '(min-width: 768px)',
-  children,
-  ...props
-}: ComponentProps<typeof DialogPrimitive.Root> & {breakpoint?: string}) {
-  const isDesktop = useMediaQuery(breakpoint);
-
-  const contextValue: ModalContextValue = {
-    breakpoint,
-    isDesktop,
-  };
-
-  const Root = isDesktop ? DialogPrimitive.Root : VaulDrawer.Root;
-
-  return (
-    <ModalContext.Provider value={contextValue}>
-      <Root {...props}>{children}</Root>
-    </ModalContext.Provider>
-  );
-}
-
-function ModalTrigger(props: ComponentProps<typeof DialogPrimitive.Trigger>) {
-  const {isDesktop} = useModalContext();
-
-  if (isDesktop) {
-    return <DialogPrimitive.Trigger {...props} />;
-  }
-
-  return <VaulDrawer.Trigger {...props} />;
-}
-
-function ModalPortal(props: ComponentProps<typeof DialogPrimitive.Portal>) {
-  const {isDesktop} = useModalContext();
-
-  if (isDesktop) {
-    return <DialogPrimitive.Portal {...props} />;
-  }
-
-  return <VaulDrawer.Portal {...props} />;
-}
-
-function ModalClose(props: ComponentProps<typeof DialogPrimitive.Close>) {
-  const {isDesktop} = useModalContext();
-
-  if (isDesktop) {
-    return <DialogPrimitive.Close {...props} />;
-  }
-
-  return <VaulDrawer.Close {...props} />;
-}
-
-type ModalOverlayProps = ComponentProps<typeof DialogPrimitive.Overlay> & {
-  animated?: boolean;
-  transition?: Transition;
-};
-
-function ModalOverlay({
-  className,
-  animated = true,
-  transition = modalDefaultTransition,
-  ...props
-}: ModalOverlayProps) {
-  const {isDesktop} = useModalContext();
-
-  if (!isDesktop) {
-    return <VaulDrawer.Overlay className={cn(modalOverlayVariants(), className)} {...props} />;
-  }
-
-  if (animated) {
-    return (
-      <DialogPrimitive.Overlay className={cn(modalOverlayVariants(), className)} asChild {...props}>
-        <motion.div
-          initial={{opacity: 0}}
-          animate={{opacity: 1}}
-          exit={{opacity: 0}}
-          transition={transition}
-        />
-      </DialogPrimitive.Overlay>
-    );
-  }
-
-  return <DialogPrimitive.Overlay className={cn(modalOverlayVariants(), className)} {...props} />;
-}
-
-type ModalContentProps = ComponentProps<typeof DialogPrimitive.Content> & {
-  animated?: boolean;
-  transition?: Transition;
-  overlayClassName?: string;
-};
-
-function ModalContent({
-  className,
-  children,
-  animated = true,
-  transition = modalDefaultTransition,
-  overlayClassName,
-  ...props
-}: ModalContentProps) {
-  const {isDesktop} = useModalContext();
-
-  if (!isDesktop) {
-    return (
-      <ModalPortal>
-        <ModalOverlay animated={animated} transition={transition} className={overlayClassName} />
-        <VaulDrawer.Content
-          className={cn(
-            'fixed bottom-0 left-0 right-0 z-50 flex flex-col bg-background-neutral-base rounded-t-16 max-h-[85vh] shadow-tooltip',
-            className,
-          )}
-          {...props}
-        >
-          <div className="relative w-full h-full flex flex-col min-h-0">
-            <div className="pointer-events-none absolute inset-0 shadow-separator-inset rounded-t-16" />
-            <div className="flex items-center justify-center pt-8 pb-8 shrink-0">
-              <div className="bg-foreground-neutral-subtle w-32 h-4 rounded-full opacity-40" />
-            </div>
-            {children}
-          </div>
-        </VaulDrawer.Content>
-      </ModalPortal>
-    );
-  }
-
-  const baseClasses = cn(modalContentVariants(), className);
-
-  return (
-    <ModalPortal>
-      <ModalOverlay animated={animated} transition={transition} className={overlayClassName} />
-      <DialogPrimitive.Content className={baseClasses} {...props}>
-        <div className="relative size-full">
-          <div className="pointer-events-none absolute inset-0 shadow-separator-inset rounded-16" />
-          {children}
-        </div>
-      </DialogPrimitive.Content>
-    </ModalPortal>
-  );
-}
-
-type ModalHeaderProps = ComponentProps<'div'> & {
-  title?: string;
-  showEscIndicator?: boolean;
-  showClose?: boolean;
-};
-
-function ModalHeader({
-  className,
-  title,
-  showEscIndicator = true,
-  showClose = true,
-  children,
-  ...props
-}: ModalHeaderProps) {
-  const {isDesktop} = useModalContext();
-
-  return (
-    <div className="flex flex-col w-full shrink-0" {...props}>
-      <div className="bg-background-neutral-base flex items-center justify-center gap-20 overflow-clip px-24 py-16 w-full">
-        {title ? (
-          <Text size="lg" className="flex-1 overflow-ellipsis overflow-hidden whitespace-nowrap">
-            {title}
-          </Text>
-        ) : (
-          <div className="flex-1">{children}</div>
-        )}
-        <div className="flex items-center gap-8">
-          {isDesktop && showEscIndicator && (
-            <kbd className="flex items-center justify-center rounded-8 border border-border-neutral-base shadow-button-neutral bg-background-field-base text-xs text-foreground-neutral-subtle px-4">
-              esc
-            </kbd>
-          )}
-          {showClose && (
-            <ModalClose asChild>
-              <Button
-                variant="transparent"
-                size="xs"
-                className="rounded-4 p-2 cursor-pointer 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 w-24 h-24"
-              >
-                <Icon name="close" />
-              </Button>
-            </ModalClose>
-          )}
-        </div>
-      </div>
-      <div className="bg-border-neutral-strong h-[1px] w-full" />
-    </div>
-  );
-}
-
-function ModalBody({className, children, ...props}: ComponentProps<'div'>) {
-  const {isDesktop} = useModalContext();
-
-  return (
-    <div
-      className={cn(
-        'bg-background-neutral-base flex flex-col items-start px-24 pb-24 pt-16 w-full',
-        isDesktop ? 'overflow-clip' : 'overflow-y-auto overflow-x-clip flex-1',
-        className,
-      )}
-      {...props}
-    >
-      {children}
-    </div>
-  );
-}
-
-function ModalFooter({className, children, ...props}: ComponentProps<'div'>) {
-  return (
-    <div className="flex flex-col w-full shrink-0" {...props}>
-      <div className="bg-border-neutral-strong h-[1px] w-full" />
-      <div className="bg-background-neutral-base flex items-end justify-end gap-20 overflow-clip px-24 py-16 w-full">
-        <div className={cn('flex items-center gap-16', className)}>{children}</div>
-      </div>
-    </div>
-  );
-}
-
-type ModalTitleProps = ComponentProps<typeof DialogPrimitive.Title>;
-
-function ModalTitle({className, ...props}: ModalTitleProps) {
-  const {isDesktop} = useModalContext();
-
-  const titleClassName = cn(
-    'font-medium text-lg leading-20 overflow-ellipsis overflow-hidden text-foreground-neutral-base',
-    className,
-  );
-
-  if (!isDesktop) {
-    return <VaulDrawer.Title className={titleClassName} {...props} />;
-  }
-
-  return <DialogPrimitive.Title className={titleClassName} {...props} />;
-}
-
-type ModalDescriptionProps = ComponentProps<typeof DialogPrimitive.Description>;
-
-function ModalDescription({className, ...props}: ModalDescriptionProps) {
-  const {isDesktop} = useModalContext();
-
-  const descClassName = cn('text-sm leading-20 text-foreground-neutral-subtle', className);
-
-  if (!isDesktop) {
-    return <VaulDrawer.Description className={descClassName} {...props} />;
-  }
-
-  return <DialogPrimitive.Description className={descClassName} {...props} />;
-}
-
-export {
-  Modal,
-  ModalPortal,
-  ModalOverlay,
-  ModalTrigger,
-  ModalClose,
-  ModalContent,
-  ModalHeader,
-  ModalBody,
-  ModalFooter,
-  ModalTitle,
-  ModalDescription,
-  modalContentVariants,
-  modalOverlayVariants,
-  modalDefaultTransition,
-};
-
-export type {
-  ModalContentProps,
-  ModalHeaderProps,
-  ModalOverlayProps,
-  ModalTitleProps,
-  ModalDescriptionProps,
-};

package/src/components/moving-border/index.ts

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

package/src/components/moving-border/moving-border.tsx

@@ -1,67 +0,0 @@
-import {
-  motion,
-  useAnimationFrame,
-  useMotionTemplate,
-  useMotionValue,
-  useTransform,
-} from 'framer-motion';
-import type {ComponentProps} from 'react';
-import {useRef} from 'react';
-
-export type MovingBorderProps = {
-  children: React.ReactNode;
-  duration?: number;
-  rx?: string;
-  ry?: string;
-} & ComponentProps<'svg'>;
-
-export function MovingBorder({
-  children,
-  duration = 3000,
-  rx,
-  ry,
-  ...otherProps
-}: MovingBorderProps) {
-  const pathRef = useRef<SVGRectElement | null>(null);
-  const progress = useMotionValue<number>(0);
-
-  useAnimationFrame((time: number) => {
-    const length = pathRef.current?.getTotalLength();
-    if (length) {
-      const pxPerMillisecond = length / duration;
-      progress.set((time * pxPerMillisecond) % length);
-    }
-  });
-
-  const x = useTransform(progress, (val: number) => pathRef.current?.getPointAtLength(val)?.x ?? 0);
-  const y = useTransform(progress, (val: number) => pathRef.current?.getPointAtLength(val)?.y ?? 0);
-
-  const transform = useMotionTemplate`translateX(${x}px) translateY(${y}px) translateX(-50%) translateY(-50%)`;
-
-  return (
-    <>
-      <svg
-        xmlns="http://www.w3.org/2000/svg"
-        preserveAspectRatio="none"
-        className="absolute h-full w-full"
-        width="100%"
-        height="100%"
-        {...otherProps}
-      >
-        <title>Moving Border</title>
-        <rect fill="none" width="100%" height="100%" rx={rx} ry={ry} ref={pathRef} />
-      </svg>
-      <motion.div
-        style={{
-          position: 'absolute',
-          top: 0,
-          left: 0,
-          display: 'inline-block',
-          transform,
-        }}
-      >
-        {children}
-      </motion.div>
-    </>
-  );
-}

package/src/components/popover/index.ts

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

package/src/components/popover/popover.tsx

@@ -1,60 +0,0 @@
-import * as PopoverPrimitive from '@radix-ui/react-popover';
-import type {ComponentProps} from 'react';
-import {cn} from 'utils/cn';
-
-function Popover({...props}: ComponentProps<typeof PopoverPrimitive.Root>) {
-  return <PopoverPrimitive.Root {...props} />;
-}
-
-function PopoverTrigger({...props}: ComponentProps<typeof PopoverPrimitive.Trigger>) {
-  return <PopoverPrimitive.Trigger {...props} />;
-}
-
-function PopoverAnchor({...props}: ComponentProps<typeof PopoverPrimitive.Anchor>) {
-  return <PopoverPrimitive.Anchor {...props} />;
-}
-
-function PopoverPortal({...props}: ComponentProps<typeof PopoverPrimitive.Portal>) {
-  return <PopoverPrimitive.Portal {...props} />;
-}
-
-function PopoverContent({
-  className,
-  align = 'center',
-  sideOffset = 4,
-  ...props
-}: ComponentProps<typeof PopoverPrimitive.Content>) {
-  return (
-    <PopoverPortal>
-      <PopoverPrimitive.Content
-        align={align}
-        sideOffset={sideOffset}
-        className={cn(
-          'z-50 rounded-10 bg-background-neutral-overlay shadow-tooltip outline-none',
-          'data-[state=open]:animate-in data-[state=closed]:animate-out',
-          'data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0',
-          'data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95',
-          'data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2',
-          'data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
-          className,
-        )}
-        {...props}
-      />
-    </PopoverPortal>
-  );
-}
-
-function PopoverArrow({className, ...props}: ComponentProps<typeof PopoverPrimitive.Arrow>) {
-  return (
-    <PopoverPrimitive.Arrow
-      className={cn('fill-background-neutral-overlay', className)}
-      {...props}
-    />
-  );
-}
-
-function PopoverClose({...props}: ComponentProps<typeof PopoverPrimitive.Close>) {
-  return <PopoverPrimitive.Close {...props} />;
-}
-
-export {Popover, PopoverTrigger, PopoverAnchor, PopoverContent, PopoverArrow, PopoverClose};

package/src/components/renovate.json

@@ -1,23 +0,0 @@
-{
-  "$schema": "https://docs.renovatebot.com/renovate-schema.json",
-  "extends": [
-    "config:recommended",
-    "group:recommended",
-    "monorepo:turbo",
-    "monorepo:vitest",
-    "monorepo:react",
-    "packages:react",
-    "packages:vite",
-    "packages:unitTest",
-    "helpers:pinGitHubActionDigests",
-    "helpers:followTypescriptRc",
-    "customManagers:biomeVersions",
-    "customManagers:dockerfileVersions",
-    "replacements:all",
-    "security:openssf-scorecard",
-    ":configMigration",
-    "abandonments:recommended",
-    ":gitSignOff",
-    "schedule:daily"
-  ]
-}

package/src/components/shiny-text/index.ts

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

package/src/components/shiny-text/shiny-text.tsx

@@ -1,21 +0,0 @@
-import {cn} from 'utils/cn';
-
-type ShinyTextProps = {
-  text: string;
-  disabled?: boolean;
-  speed?: number;
-  className?: string;
-};
-
-function ShinyText({text, disabled = false, speed = 5, className = ''}: ShinyTextProps) {
-  const animationDuration = `${speed}s`;
-
-  return (
-    <span className={cn('shiny-text', {disabled: disabled}, className)} style={{animationDuration}}>
-      {text}
-    </span>
-  );
-}
-
-export {ShinyText};
-export type {ShinyTextProps};

package/src/components/tabs/index.ts

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

package/src/components/tabs/tabs.stories.tsx

@@ -1,100 +0,0 @@
-import type {Meta, StoryObj} from '@storybook/react';
-import {useState} from 'react';
-import {Tabs, TabsContent, TabsContents, TabsList, TabsTrigger} from '.';
-
-const meta = {
-  title: 'Components/Tabs',
-  component: Tabs,
-  parameters: {
-    layout: 'centered',
-  },
-  tags: ['autodocs'],
-} satisfies Meta<typeof Tabs>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = {
-  args: {defaultValue: 'analytics'} as never,
-  render: () => (
-    <div className="bg-background-neutral-background p-24 w-[80vw]">
-      <Tabs defaultValue="analytics">
-        <TabsList className="gap-12 border-b border-neutral-strong">
-          <TabsTrigger value="analytics">Analytics</TabsTrigger>
-          <TabsTrigger value="jobs">Jobs</TabsTrigger>
-        </TabsList>
-      </Tabs>
-    </div>
-  ),
-};
-
-export const Controlled: Story = {
-  args: {value: 'analytics', onValueChange: () => undefined} as never,
-  render: () => {
-    const [value, setValue] = useState('analytics');
-    return (
-      <div className="bg-background-neutral-background p-24 w-[80vw]">
-        <Tabs value={value} onValueChange={setValue}>
-          <TabsList className="gap-12 border-b border-neutral-strong">
-            <TabsTrigger value="analytics">Analytics</TabsTrigger>
-            <TabsTrigger value="jobs">Jobs</TabsTrigger>
-          </TabsList>
-          <TabsContents>
-            <TabsContent value="analytics">
-              <div className="py-16">
-                <p className="text-foreground-neutral-base">
-                  Analytics content - Current value: {value}
-                </p>
-              </div>
-            </TabsContent>
-            <TabsContent value="jobs">
-              <div className="py-16">
-                <p className="text-foreground-neutral-base">
-                  Jobs content - Current value: {value}
-                </p>
-              </div>
-            </TabsContent>
-          </TabsContents>
-        </Tabs>
-      </div>
-    );
-  },
-};
-
-export const MultipleTabs: Story = {
-  args: {defaultValue: 'tab1'} as never,
-  render: () => (
-    <div className="bg-background-neutral-background p-24 w-[80vw]">
-      <Tabs defaultValue="tab1">
-        <TabsList className="gap-12 border-b border-neutral-strong">
-          <TabsTrigger value="tab1">Tab 1</TabsTrigger>
-          <TabsTrigger value="tab2">Tab 2</TabsTrigger>
-          <TabsTrigger value="tab3">Tab 3</TabsTrigger>
-          <TabsTrigger value="tab4">Tab 4</TabsTrigger>
-        </TabsList>
-        <TabsContents>
-          <TabsContent value="tab1">
-            <div className="py-16">
-              <p className="text-foreground-neutral-base">Content for Tab 1</p>
-            </div>
-          </TabsContent>
-          <TabsContent value="tab2">
-            <div className="py-16">
-              <p className="text-foreground-neutral-base">Content for Tab 2</p>
-            </div>
-          </TabsContent>
-          <TabsContent value="tab3">
-            <div className="py-16">
-              <p className="text-foreground-neutral-base">Content for Tab 3</p>
-            </div>
-          </TabsContent>
-          <TabsContent value="tab4">
-            <div className="py-16">
-              <p className="text-foreground-neutral-base">Content for Tab 4</p>
-            </div>
-          </TabsContent>
-        </TabsContents>
-      </Tabs>
-    </div>
-  ),
-};