@shipfox/react-ui 0.15.0 → 0.17.0

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

@@ -1,159 +0,0 @@
-import type {Meta, StoryObj} from '@storybook/react';
-import {Button} from 'components/button/button';
-import {DatePicker} from 'components/date-picker';
-import {Icon} from 'components/icon/icon';
-import {Input} from 'components/input/input';
-import {Label} from 'components/label/label';
-import {useState} from 'react';
-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>;
-
-const DEFAULT_START_DATE = new Date('2024-01-01T00:00:00.000Z');
-
-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: () => {
-    const [date, setDate] = useState<Date | undefined>(DEFAULT_START_DATE);
-
-    return (
-      <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>
-                <DatePicker
-                  id="start-date"
-                  date={date}
-                  onDateSelect={setDate}
-                  onClear={() => setDate(undefined)}
-                  placeholder="DD/MM/YYYY"
-                />
-              </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

@@ -1,182 +0,0 @@
-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/kbd/index.ts

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

package/src/components/kbd/kbd.stories.tsx

@@ -1,64 +0,0 @@
-import type {Meta, StoryObj} from '@storybook/react';
-import {Kbd, KbdGroup} from './kbd';
-
-const meta = {
-  title: 'Components/Kbd',
-  component: Kbd,
-  tags: ['autodocs'],
-} satisfies Meta<typeof Kbd>;
-
-export default meta;
-
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = {
-  render: () => (
-    <div className="flex flex-wrap gap-8">
-      <Kbd>Ctrl</Kbd>
-      <Kbd>Alt</Kbd>
-      <Kbd>Shift</Kbd>
-      <Kbd>⌘</Kbd>
-      <Kbd>⌥</Kbd>
-      <Kbd>⇧</Kbd>
-    </div>
-  ),
-};
-
-export const KeyCombination: Story = {
-  render: () => (
-    <div className="flex flex-wrap items-center gap-12">
-      <Kbd>⌘K</Kbd>
-      <KbdGroup>
-        <Kbd>Ctrl</Kbd>
-        <Kbd>Shift</Kbd>
-        <Kbd>P</Kbd>
-      </KbdGroup>
-      <KbdGroup>
-        <Kbd>Alt</Kbd>
-        <Kbd>Enter</Kbd>
-      </KbdGroup>
-    </div>
-  ),
-};
-
-export const InMenu: Story = {
-  render: () => (
-    <div className="max-w-400 rounded-10 border border-border-neutral-base p-8">
-      <div className="flex flex-col gap-4">
-        <div className="flex items-center justify-between p-8 rounded-6 hover:bg-background-components-hover transition-colors">
-          <span className="text-sm text-foreground-neutral-subtle">Copy</span>
-          <Kbd>⌘C</Kbd>
-        </div>
-        <div className="flex items-center justify-between p-8 rounded-6 hover:bg-background-components-hover transition-colors">
-          <span className="text-sm text-foreground-neutral-subtle">Paste</span>
-          <Kbd>⌘V</Kbd>
-        </div>
-        <div className="h-px bg-border-neutral-base my-4" />
-        <div className="flex items-center justify-between p-8 rounded-6 hover:bg-background-components-hover transition-colors">
-          <span className="text-sm text-foreground-neutral-subtle">Command Palette</span>
-          <Kbd>⌘K</Kbd>
-        </div>
-      </div>
-    </div>
-  ),
-};

package/src/components/kbd/kbd.tsx

@@ -1,32 +0,0 @@
-import type {ComponentProps} from 'react';
-import {cn} from 'utils/cn';
-
-type KbdProps = ComponentProps<'kbd'>;
-
-export function Kbd({className, ...props}: KbdProps) {
-  return (
-    <kbd
-      data-slot="kbd"
-      className={cn(
-        'pointer-events-none inline-flex h-20 w-fit min-w-20 items-center justify-center gap-1 rounded-4 px-4 font-display text-xs font-medium select-none',
-        'bg-background-components-base text-foreground-neutral-subtle border border-border-neutral-base shadow-button-neutral',
-        '[&_svg:not([class*="size-"])]:size-12',
-        'in-data-[slot=tooltip-content]:bg-background/20 in-data-[slot=tooltip-content]:text-background dark:in-data-[slot=tooltip-content]:bg-background/10',
-        className,
-      )}
-      {...props}
-    />
-  );
-}
-
-type KbdGroupProps = ComponentProps<'div'>;
-
-export function KbdGroup({className, ...props}: KbdGroupProps) {
-  return (
-    <div
-      data-slot="kbd-group"
-      className={cn('inline-flex items-center gap-4', className)}
-      {...props}
-    />
-  );
-}

package/src/components/label/index.ts

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

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

@@ -1,67 +0,0 @@
-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

@@ -1,15 +0,0 @@
-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/modal/index.ts

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