@shipfox/react-ui 0.3.0 → 0.4.0

package/src/components/icon/icon.tsx

@@ -1,9 +1,16 @@
 import {
   type RemixiconComponentType,
+  RiCheckLine,
   RiCloseLine,
+  RiFileCopyLine,
+  RiGithubFill,
   RiGoogleFill,
+  RiHomeSmileFill,
   RiImageAddFill,
+  RiInformationFill,
   RiMicrosoftFill,
+  RiMoneyDollarCircleLine,
+  RiSubtractLine,
 } from '@remixicon/react';
 import type {ComponentProps} from 'react';
 import {
@@ -16,7 +23,9 @@ import {
   InfoTooltipFillIcon,
   ResizeIcon,
   ShipfoxLogo,
+  SlackLogo,
   SpinnerIcon,
+  StripeLogo,
   ThunderIcon,
   XCircleSolidIcon,
 } from './custom';
@@ -37,7 +46,16 @@ const iconsMap = {
   componentLine: ComponentLineIcon,
   imageAdd: RiImageAddFill,
   close: RiCloseLine,
-  shipfoxLogo: ShipfoxLogo,
+  shipfox: ShipfoxLogo,
+  slack: SlackLogo,
+  stripe: StripeLogo,
+  github: RiGithubFill,
+  check: RiCheckLine,
+  subtractLine: RiSubtractLine,
+  info: RiInformationFill,
+  money: RiMoneyDollarCircleLine,
+  homeSmile: RiHomeSmileFill,
+  copy: RiFileCopyLine,
 } as const satisfies Record<string, RemixiconComponentType>;
 
 export type IconName = keyof typeof iconsMap;

package/src/components/index.ts

@@ -1,8 +1,16 @@
 export * from './alert';
 export * from './avatar';
+export * from './badge';
 export * from './button';
+export * from './checkbox';
+export * from './code-block';
+export * from './dynamic-item';
 export * from './icon';
 export * from './inline-tips';
+export * from './input';
+export * from './item';
+export * from './label';
 export * from './textarea';
-export * from './theme-provider';
+export * from './theme';
+export * from './toast';
 export * from './typography';

package/src/components/inline-tips/inline-tips.stories.tsx

@@ -16,7 +16,7 @@ const meta = {
   argTypes: {
     type: {
       control: 'select',
-      options: ['default', 'info', 'success', 'destructive'],
+      options: ['default', 'info', 'success', 'error'],
     },
     variant: {
       control: 'select',
@@ -33,7 +33,7 @@ export default meta;
 
 type Story = StoryObj<typeof meta>;
 
-const types = ['default', 'info', 'success', 'destructive'] as const;
+const types = ['default', 'info', 'success', 'error'] as const;
 const variants = ['primary', 'secondary'] as const;
 
 export const Default: Story = {
@@ -80,7 +80,7 @@ export const DesignMock: Story = {
       default: {title: 'Title', description: 'Description'},
       info: {title: 'Title', description: 'Description'},
       success: {title: 'Title', description: 'Description'},
-      destructive: {title: "Don't's", description: 'Title'},
+      error: {title: 'Title', description: 'Description'},
     };
 
     return (

package/src/components/inline-tips/inline-tips.tsx

@@ -21,7 +21,7 @@ const inlineTipsLineVariants = cva('w-4 self-stretch my-4 rounded-full', {
       default: 'bg-tag-neutral-icon',
       info: 'bg-tag-warning-icon',
       success: 'bg-tag-success-icon',
-      destructive: 'bg-tag-error-icon',
+      error: 'bg-tag-error-icon',
     },
   },
   defaultVariants: {
@@ -31,7 +31,7 @@ const inlineTipsLineVariants = cva('w-4 self-stretch my-4 rounded-full', {
 
 type InlineTipsProps = ComponentProps<'div'> &
   VariantProps<typeof inlineTipsBaseVariants> & {
-    type?: 'default' | 'info' | 'success' | 'destructive';
+    type?: 'default' | 'info' | 'success' | 'error';
   };
 
 function InlineTips({className, variant, type = 'default', children, ...props}: InlineTipsProps) {

package/src/components/input/index.ts

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

package/src/components/{input.tsx → input/input.tsx}

@@ -27,7 +27,7 @@ export function Input({className, type, variant, size, ...props}: InputProps) {
       type={type}
       data-slot="input"
       className={cn(
-        'placeholder:text-foreground-neutral-muted w-full min-w-0 rounded-6 px-8 text-sm leading-20 text-foreground-neutral-base shadow-border-base transition-[color,box-shadow] outline-none',
+        'placeholder:text-foreground-neutral-muted w-full min-w-0 rounded-6 px-8 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',
         'file:text-foreground-neutral-base file:inline-flex file:font-medium',

package/src/components/item/index.ts

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

package/src/components/item/item.stories.tsx

@@ -0,0 +1,150 @@
+import type {Meta, StoryObj} from '@storybook/react';
+import {Button} from 'components/button/button';
+import {Icon} from 'components/icon/icon';
+import {Input} from 'components/input/input';
+import {Label} from 'components/label/label';
+import {
+  Item,
+  ItemActions,
+  ItemContent,
+  ItemDescription,
+  ItemFooter,
+  ItemGroup,
+  ItemHeader,
+  ItemSeparator,
+  ItemTitle,
+} from './item';
+
+const meta = {
+  title: 'Components/Item',
+  component: Item,
+  tags: ['autodocs'],
+  argTypes: {
+    variant: {
+      control: 'select',
+      options: ['default', 'neutral'],
+    },
+    size: {
+      control: 'select',
+      options: ['default', 'sm'],
+    },
+  },
+  args: {
+    variant: 'default',
+    size: 'default',
+  },
+} satisfies Meta<typeof Item>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    variant: 'default',
+  },
+  render: (args) => (
+    <Item {...args} className="px-12 py-12">
+      <ItemContent>
+        <ItemTitle>Basic Item</ItemTitle>
+        <ItemDescription>A simple item with title and description.</ItemDescription>
+      </ItemContent>
+      <ItemActions className="pt-8">
+        <Button variant="secondary" size="sm">
+          Action
+        </Button>
+      </ItemActions>
+    </Item>
+  ),
+};
+
+export const Variants: Story = {
+  args: {},
+  render: () => (
+    <ItemGroup className="flex w-full max-w-md flex-col gap-12">
+      <Item variant="default" className="px-12 py-12">
+        <ItemContent>
+          <ItemTitle>Default Variant</ItemTitle>
+          <ItemDescription>Standard styling with subtle background and borders.</ItemDescription>
+        </ItemContent>
+        <ItemActions className="pt-8">
+          <Button variant="secondary" size="sm">
+            Action
+          </Button>
+        </ItemActions>
+      </Item>
+      <Item variant="neutral" className="px-12 py-12">
+        <ItemContent>
+          <ItemTitle>Neutral Variant</ItemTitle>
+          <ItemDescription>Neutral style with subtle background and borders.</ItemDescription>
+        </ItemContent>
+        <ItemActions className="pt-8">
+          <Button variant="primary" size="sm">
+            Action
+          </Button>
+        </ItemActions>
+      </Item>
+    </ItemGroup>
+  ),
+};
+
+export const ImportPastJobsModal: Story = {
+  args: {},
+  render: () => (
+    <div className="flex w-full max-w-lg flex-col">
+      <Item variant="neutral">
+        <ItemHeader className="justify-between px-24 py-16">
+          <ItemTitle className="text-lg font-medium text-foreground-neutral-base">
+            Import past jobs from Github
+          </ItemTitle>
+          <div className="flex items-center gap-8">
+            <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>
+            <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>
+          </div>
+        </ItemHeader>
+        <ItemSeparator />
+        <ItemContent className="px-24 py-16">
+          <ItemDescription className="mb-16 text-sm text-foreground-neutral-subtle">
+            Backfill your CI history by importing past runs from your Github repo. We'll handle the
+            rest by creating a background task to import the data for you.
+          </ItemDescription>
+          <div className="flex flex-col gap-20">
+            <div className="flex flex-col gap-8">
+              <Label htmlFor="repo-owner">Repository owner</Label>
+              <Input id="repo-owner" type="text" defaultValue="apache" />
+            </div>
+            <div className="flex flex-col gap-8">
+              <Label htmlFor="repo-name">Repository name</Label>
+              <Input id="repo-name" type="text" defaultValue="kafka" />
+            </div>
+            <div className="flex flex-col gap-8">
+              <Label htmlFor="start-date">Start date</Label>
+              <Input
+                id="start-date"
+                type="datetime-local"
+                defaultValue="September 5th, 2025"
+                className="pl-32"
+              />
+            </div>
+          </div>
+        </ItemContent>
+        <ItemSeparator />
+        <ItemFooter className="justify-end gap-8 px-24 py-16">
+          <Button variant="transparent" size="sm">
+            Cancel
+          </Button>
+          <Button variant="primary" size="sm">
+            Import
+          </Button>
+        </ItemFooter>
+      </Item>
+    </div>
+  ),
+};

package/src/components/item/item.tsx

@@ -0,0 +1,182 @@
+import {Slot} from '@radix-ui/react-slot';
+import {cva, type VariantProps} from 'class-variance-authority';
+import type {ComponentProps} from 'react';
+import {cn} from 'utils/cn';
+
+export const itemVariants = cva('transition-all duration-150 rounded-8', {
+  variants: {
+    variant: {
+      default:
+        'bg-background-components-base text-foreground-neutral-base border border-border-neutral-base shadow-button-neutral',
+      neutral:
+        'bg-background-neutral-base text-foreground-neutral-base border border-border-neutral-base shadow-button-neutral',
+    },
+    size: {
+      default: '',
+      sm: '',
+    },
+  },
+  defaultVariants: {
+    variant: 'default',
+    size: 'default',
+  },
+});
+
+export type ItemProps = ComponentProps<'div'> &
+  VariantProps<typeof itemVariants> & {
+    asChild?: boolean;
+  };
+
+export function Item({className, variant, size, asChild = false, children, ...props}: ItemProps) {
+  const Comp = asChild ? Slot : 'div';
+
+  return (
+    <Comp data-slot="item" className={cn(itemVariants({variant, size}), className)} {...props}>
+      {children}
+    </Comp>
+  );
+}
+
+// ItemGroup
+export type ItemGroupProps = ComponentProps<'div'>;
+
+export function ItemGroup({className, children, ...props}: ItemGroupProps) {
+  return (
+    <div data-slot="item-group" className={cn('flex flex-col', className)} {...props}>
+      {children}
+    </div>
+  );
+}
+
+// ItemActions
+export type ItemActionsProps = ComponentProps<'div'>;
+
+export function ItemActions({className, children, ...props}: ItemActionsProps) {
+  return (
+    <div
+      data-slot="item-actions"
+      className={cn('flex shrink-0 items-center gap-8', className)}
+      {...props}
+    >
+      {children}
+    </div>
+  );
+}
+
+// ItemContent
+export type ItemContentProps = ComponentProps<'div'>;
+
+export function ItemContent({className, children, ...props}: ItemContentProps) {
+  return (
+    <div
+      data-slot="item-content"
+      className={cn('flex min-w-0 flex-1 flex-col gap-4', className)}
+      {...props}
+    >
+      {children}
+    </div>
+  );
+}
+
+// ItemDescription
+export type ItemDescriptionProps = ComponentProps<'p'>;
+
+export function ItemDescription({className, children, ...props}: ItemDescriptionProps) {
+  return (
+    <p
+      data-slot="item-description"
+      className={cn(
+        'text-xs leading-20 text-foreground-neutral-subtle max-w-250 sm:max-w-fit line-clamp-3',
+        className,
+      )}
+      {...props}
+    >
+      {children}
+    </p>
+  );
+}
+
+// ItemFooter
+export type ItemFooterProps = ComponentProps<'div'>;
+
+export function ItemFooter({className, children, ...props}: ItemFooterProps) {
+  return (
+    <div
+      data-slot="item-footer"
+      className={cn('flex shrink-0 items-center gap-8 px-12 py-8', className)}
+      {...props}
+    >
+      {children}
+    </div>
+  );
+}
+
+// ItemHeader
+export type ItemHeaderProps = ComponentProps<'div'>;
+
+export function ItemHeader({className, children, ...props}: ItemHeaderProps) {
+  return (
+    <div
+      data-slot="item-header"
+      className={cn('flex shrink-0 items-center gap-8 px-12 py-8', className)}
+      {...props}
+    >
+      {children}
+    </div>
+  );
+}
+
+// ItemMedia
+export const itemMediaVariants = cva('flex shrink-0 items-center justify-center', {
+  variants: {
+    variant: {
+      default: '',
+      icon: 'text-foreground-neutral-base',
+      image: '',
+    },
+  },
+  defaultVariants: {
+    variant: 'default',
+  },
+});
+
+export type ItemMediaProps = ComponentProps<'div'> & VariantProps<typeof itemMediaVariants>;
+
+export function ItemMedia({className, variant, children, ...props}: ItemMediaProps) {
+  return (
+    <div data-slot="item-media" className={cn(itemMediaVariants({variant}), className)} {...props}>
+      {children}
+    </div>
+  );
+}
+
+// ItemTitle
+export type ItemTitleProps = ComponentProps<'h3'>;
+
+export function ItemTitle({className, children, ...props}: ItemTitleProps) {
+  return (
+    <h3
+      data-slot="item-title"
+      className={cn(
+        'text-sm font-medium leading-20 text-foreground-neutral-base truncate',
+        className,
+      )}
+      {...props}
+    >
+      {children}
+    </h3>
+  );
+}
+
+// ItemSeparator
+export type ItemSeparatorProps = ComponentProps<'div'>;
+
+export function ItemSeparator({className, ...props}: ItemSeparatorProps) {
+  return (
+    <div
+      data-slot="item-separator"
+      className={cn('h-px bg-border-neutral-base', className)}
+      {...props}
+    />
+  );
+}

package/src/components/label/index.ts

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

package/src/components/label/label.stories.tsx

@@ -0,0 +1,67 @@
+import type {Meta, StoryObj} from '@storybook/react';
+import {Checkbox} from 'components/checkbox';
+import {Input} from 'components/input/input';
+import {Textarea} from 'components/textarea';
+import {Label} from './label';
+
+const meta = {
+  title: 'Components/Label',
+  component: Label,
+  tags: ['autodocs'],
+  argTypes: {
+    htmlFor: {control: 'text'},
+  },
+} satisfies Meta<typeof Label>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  render: () => (
+    <div className="flex flex-col gap-8">
+      <Label htmlFor="email">Email</Label>
+      <Input id="email" type="email" placeholder="Enter your email" />
+    </div>
+  ),
+};
+
+export const WithCheckbox: Story = {
+  render: () => (
+    <div className="flex items-center gap-8">
+      <Checkbox id="terms" />
+      <Label htmlFor="terms">Accept terms and conditions</Label>
+    </div>
+  ),
+};
+
+export const WithTextarea: Story = {
+  render: () => (
+    <div className="flex flex-col gap-8">
+      <Label htmlFor="message">Message</Label>
+      <Textarea id="message" placeholder="Enter your message" />
+    </div>
+  ),
+};
+
+export const Required: Story = {
+  render: () => (
+    <div className="flex flex-col gap-8">
+      <Label htmlFor="required-field">
+        Required Field <span className="text-foreground-highlight-error">*</span>
+      </Label>
+      <Input id="required-field" type="text" placeholder="This field is required" />
+    </div>
+  ),
+};
+
+export const Disabled: Story = {
+  render: () => (
+    <div className="flex flex-col gap-8">
+      <Label htmlFor="disabled-field" className="opacity-50">
+        Disabled Field
+      </Label>
+      <Input id="disabled-field" type="text" placeholder="Disabled input" disabled />
+    </div>
+  ),
+};

package/src/components/label/label.tsx

@@ -0,0 +1,15 @@
+import * as LabelPrimitive from '@radix-ui/react-label';
+import {cva, type VariantProps} from 'class-variance-authority';
+import type {ComponentProps} from 'react';
+import {cn} from 'utils/cn';
+
+export const labelVariants = cva(
+  'text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70',
+);
+
+export type LabelProps = ComponentProps<typeof LabelPrimitive.Root> &
+  VariantProps<typeof labelVariants>;
+
+export function Label({className, ...props}: LabelProps) {
+  return <LabelPrimitive.Root className={cn(labelVariants(), className)} {...props} />;
+}

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

@@ -0,0 +1,67 @@
+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/textarea/textarea.tsx

@@ -27,7 +27,7 @@ export function Textarea({className, variant, size, ...props}: TextareaProps) {
     <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-border-base transition-[color,box-shadow] outline-none',
+        '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',

package/src/components/theme/index.ts

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

package/src/components/toast/index.ts

@@ -0,0 +1,2 @@
+export {Toaster, type ToasterProps, toast} from './toast';
+export {ToastCustom, type ToastCustomProps} from './toast-custom';