@shipfox/react-ui 0.15.0 → 0.16.0

package/src/components/icon/icon.tsx

@@ -1,90 +0,0 @@
-import type {RemixiconComponentType} from '@remixicon/react';
-import {
-  RiAddLine,
-  RiArrowRightSLine,
-  RiBookOpenFill,
-  RiCheckLine,
-  RiCloseLine,
-  RiFileCopyLine,
-  RiGithubFill,
-  RiGoogleFill,
-  RiHomeSmileFill,
-  RiImageAddFill,
-  RiInformationFill,
-  RiMicrosoftFill,
-  RiMoneyDollarCircleLine,
-  RiSubtractLine,
-} from '@remixicon/react';
-import type {ComponentProps} from 'react';
-import {
-  BadgeIcon,
-  CheckCircleSolidIcon,
-  CircleDottedLineIcon,
-  ComponentFillIcon,
-  ComponentLineIcon,
-  EllipseMiniSolidIcon,
-  InfoTooltipFillIcon,
-  ResizeIcon,
-  ShipfoxLogo,
-  SlackLogo,
-  SpinnerIcon,
-  StripeLogo,
-  ThunderIcon,
-  XCircleSolidIcon,
-} from './custom';
-import {remixiconMap} from './remixicon-registry';
-
-const commonRemixicons = {
-  addLine: RiAddLine,
-  close: RiCloseLine,
-  check: RiCheckLine,
-  copy: RiFileCopyLine,
-  info: RiInformationFill,
-  imageAdd: RiImageAddFill,
-  chevronRight: RiArrowRightSLine,
-  homeSmile: RiHomeSmileFill,
-  money: RiMoneyDollarCircleLine,
-  google: RiGoogleFill,
-  microsoft: RiMicrosoftFill,
-  github: RiGithubFill,
-  subtractLine: RiSubtractLine,
-  bookOpen: RiBookOpenFill,
-} as const satisfies Record<string, RemixiconComponentType>;
-
-const customIconsMap = {
-  shipfox: ShipfoxLogo,
-  slack: SlackLogo,
-  stripe: StripeLogo,
-  badge: BadgeIcon,
-  checkCircleSolid: CheckCircleSolidIcon,
-  circleDottedLine: CircleDottedLineIcon,
-  componentFill: ComponentFillIcon,
-  componentLine: ComponentLineIcon,
-  ellipseMiniSolid: EllipseMiniSolidIcon,
-  infoTooltipFill: InfoTooltipFillIcon,
-  resize: ResizeIcon,
-  spinner: SpinnerIcon,
-  thunder: ThunderIcon,
-  xCircleSolid: XCircleSolidIcon,
-} as const satisfies Record<string, RemixiconComponentType>;
-
-const iconsMap = {
-  ...remixiconMap,
-  ...commonRemixicons,
-  ...customIconsMap,
-} as Record<string, RemixiconComponentType> & typeof customIconsMap;
-
-export type IconName = keyof typeof iconsMap;
-export const iconNames = Object.keys(iconsMap) as IconName[];
-
-type BaseIconProps = ComponentProps<RemixiconComponentType>;
-type IconProps = {name: IconName; size?: number | string} & Omit<
-  BaseIconProps,
-  'name' | 'size' | 'width' | 'height'
->;
-
-export function Icon({name, size, ...props}: IconProps) {
-  const IconComponent = iconsMap[name];
-  const svgProps = size && typeof size === 'number' ? {...props, width: size, height: size} : props;
-  return <IconComponent {...svgProps} />;
-}

package/src/components/icon/index.ts

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

package/src/components/icon/remixicon-registry.ts

@@ -1,24 +0,0 @@
-import type {RemixiconComponentType} from '@remixicon/react';
-import * as RemixIcons from '@remixicon/react';
-
-const remixiconEntries = Object.entries(RemixIcons).filter(
-  ([key, value]) => key.startsWith('Ri') && typeof value === 'function',
-) as Array<[string, RemixiconComponentType]>;
-
-function iconNameToKey(iconName: string): string {
-  const withoutPrefix = iconName.slice(2);
-  return withoutPrefix.charAt(0).toLowerCase() + withoutPrefix.slice(1);
-}
-
-const remixiconMapEntries = remixiconEntries.map(([name, component]) => [
-  iconNameToKey(name),
-  component,
-]) as Array<[string, RemixiconComponentType]>;
-
-export const remixiconMap = Object.fromEntries(remixiconMapEntries) as Record<
-  string,
-  RemixiconComponentType
->;
-
-export type RemixIconName = keyof typeof remixiconMap;
-export const remixiconNames = Object.keys(remixiconMap) as RemixIconName[];

package/src/components/index.ts

@@ -1,36 +0,0 @@
-export * from './alert';
-export * from './avatar';
-export * from './badge';
-export * from './button';
-export * from './button-group';
-export * from './calendar';
-export * from './checkbox';
-export * from './code-block';
-export * from './command';
-export * from './confetti';
-export * from './date-picker';
-export * from './date-time-range-picker';
-export * from './dot-grid';
-export * from './dropdown-menu';
-export * from './dynamic-item';
-export * from './form';
-export * from './icon';
-export * from './inline-tips';
-export * from './input';
-export * from './item';
-export * from './kbd';
-export * from './label';
-export * from './modal';
-export * from './moving-border';
-export * from './popover';
-export * from './search';
-export * from './select';
-export * from './shiny-text';
-export * from './skeleton';
-export * from './table';
-export * from './tabs';
-export * from './textarea';
-export * from './theme';
-export * from './toast';
-export * from './tooltip';
-export * from './typography';

package/src/components/inline-tips/index.ts

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

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

@@ -1,131 +0,0 @@
-import {argosScreenshot} from '@argos-ci/storybook/vitest';
-import type {Meta, StoryObj} from '@storybook/react';
-import {Code, Header} from 'components/typography';
-import {
-  InlineTips,
-  InlineTipsAction,
-  InlineTipsActions,
-  InlineTipsContent,
-  InlineTipsDescription,
-  InlineTipsTitle,
-} from './inline-tips';
-
-const meta = {
-  title: 'Components/InlineTips',
-  component: InlineTips,
-  tags: ['autodocs'],
-  argTypes: {
-    type: {
-      control: 'select',
-      options: ['default', 'info', 'success', 'error'],
-    },
-    variant: {
-      control: 'select',
-      options: ['primary', 'secondary'],
-    },
-  },
-  args: {
-    type: 'default',
-    variant: 'primary',
-  },
-} satisfies Meta<typeof InlineTips>;
-
-export default meta;
-
-type Story = StoryObj<typeof meta>;
-
-const types = ['default', 'info', 'success', 'error'] as const;
-const variants = ['primary', 'secondary'] as const;
-
-export const Default: Story = {
-  play: async (ctx) => {
-    await new Promise((resolve) => setTimeout(resolve, 100));
-    await argosScreenshot(ctx, 'InlineTips Default');
-  },
-  render: (args) => {
-    return (
-      <InlineTips {...args}>
-        <InlineTipsContent>
-          <InlineTipsTitle>Title</InlineTipsTitle>
-          <InlineTipsDescription>Description</InlineTipsDescription>
-        </InlineTipsContent>
-        <InlineTipsActions>
-          <InlineTipsAction variant={args.variant}>Label</InlineTipsAction>
-          <InlineTipsAction variant={args.variant}>Label</InlineTipsAction>
-        </InlineTipsActions>
-      </InlineTips>
-    );
-  },
-};
-
-export const Variants: Story = {
-  render: () => {
-    return (
-      <div className="flex flex-col gap-16">
-        {variants.map((variant) => (
-          <InlineTips key={variant} type="default" variant={variant}>
-            <InlineTipsContent>
-              <InlineTipsTitle>Title</InlineTipsTitle>
-              <InlineTipsDescription>Description</InlineTipsDescription>
-            </InlineTipsContent>
-            <InlineTipsActions>
-              <InlineTipsAction variant="primary">Label</InlineTipsAction>
-              <InlineTipsAction variant="secondary">Label</InlineTipsAction>
-            </InlineTipsActions>
-          </InlineTips>
-        ))}
-      </div>
-    );
-  },
-};
-
-export const DesignMock: Story = {
-  render: () => {
-    const content = {
-      default: {title: 'Title', description: 'Description'},
-      info: {title: 'Title', description: 'Description'},
-      success: {title: 'Title', description: 'Description'},
-      error: {title: 'Title', description: 'Description'},
-    };
-
-    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">
-          INLINE TIPS
-        </Header>
-        <div className="flex flex-col gap-16">
-          <Code variant="label" className="text-foreground-neutral-subtle">
-            Primary
-          </Code>
-          {types.map((type) => (
-            <InlineTips key={type} type={type} variant="primary">
-              <InlineTipsContent>
-                <InlineTipsTitle>{content[type].title}</InlineTipsTitle>
-                <InlineTipsDescription>{content[type].description}</InlineTipsDescription>
-              </InlineTipsContent>
-              <InlineTipsActions>
-                <InlineTipsAction variant="primary">Label</InlineTipsAction>
-                <InlineTipsAction variant="secondary">Label</InlineTipsAction>
-              </InlineTipsActions>
-            </InlineTips>
-          ))}
-          <Code variant="label" className="text-foreground-neutral-subtle">
-            Secondary
-          </Code>
-          {types.map((type) => (
-            <InlineTips key={type} type={type} variant="secondary">
-              <InlineTipsContent>
-                <InlineTipsTitle>{content[type].title}</InlineTipsTitle>
-                <InlineTipsDescription>{content[type].description}</InlineTipsDescription>
-              </InlineTipsContent>
-              <InlineTipsActions>
-                <InlineTipsAction variant="primary">Label</InlineTipsAction>
-                <InlineTipsAction variant="secondary">Label</InlineTipsAction>
-              </InlineTipsActions>
-            </InlineTips>
-          ))}
-        </div>
-      </div>
-    );
-  },
-};

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

@@ -1,132 +0,0 @@
-import {cva, type VariantProps} from 'class-variance-authority';
-import type {ComponentProps} from 'react';
-import {cn} from 'utils/cn';
-
-const inlineTipsBaseVariants = cva('w-full text-sm flex gap-12 items-center', {
-  variants: {
-    variant: {
-      primary:
-        'bg-background-components-base text-foreground-neutral-base border border-border-neutral-base shadow-button-neutral rounded-8 px-12 py-8',
-      secondary: 'bg-transparent text-foreground-neutral-base',
-    },
-  },
-  defaultVariants: {
-    variant: 'primary',
-  },
-});
-
-const inlineTipsLineVariants = cva('w-4 self-stretch my-4 rounded-full', {
-  variants: {
-    type: {
-      default: 'bg-tag-neutral-icon',
-      info: 'bg-tag-warning-icon',
-      success: 'bg-tag-success-icon',
-      error: 'bg-tag-error-icon',
-    },
-  },
-  defaultVariants: {
-    type: 'default',
-  },
-});
-
-type InlineTipsProps = ComponentProps<'div'> &
-  VariantProps<typeof inlineTipsBaseVariants> & {
-    type?: 'default' | 'info' | 'success' | 'error';
-  };
-
-function InlineTips({className, variant, type = 'default', children, ...props}: InlineTipsProps) {
-  return (
-    <div
-      data-slot="inline-tips"
-      className={cn(inlineTipsBaseVariants({variant}), className)}
-      {...props}
-    >
-      <div
-        data-slot="inline-tips-line"
-        className={cn(inlineTipsLineVariants({type}))}
-        aria-hidden="true"
-      />
-      {children}
-    </div>
-  );
-}
-
-function InlineTipsContent({className, ...props}: ComponentProps<'div'>) {
-  return (
-    <div data-slot="inline-tips-content" className={cn('flex-1 min-w-0', className)} {...props} />
-  );
-}
-
-function InlineTipsTitle({className, ...props}: ComponentProps<'div'>) {
-  return (
-    <div
-      data-slot="inline-tips-title"
-      className={cn('font-medium text-sm leading-20 text-foreground-neutral-base mb-4', className)}
-      {...props}
-    />
-  );
-}
-
-function InlineTipsDescription({className, ...props}: ComponentProps<'div'>) {
-  return (
-    <div
-      data-slot="inline-tips-description"
-      className={cn(
-        'text-xs leading-20 text-foreground-neutral-muted [&_p]:leading-relaxed',
-        className,
-      )}
-      {...props}
-    />
-  );
-}
-
-function InlineTipsActions({className, ...props}: ComponentProps<'div'>) {
-  return (
-    <div
-      data-slot="inline-tips-actions"
-      className={cn('flex items-center gap-8 shrink-0', className)}
-      {...props}
-    />
-  );
-}
-
-const inlineTipsActionVariants = cva(
-  'rounded-6 px-10 py-6 text-xs font-medium leading-20 transition-colors duration-150 outline-none focus-visible:ring-2 focus-visible:ring-background-accent-blue-base focus-visible:ring-offset-2',
-  {
-    variants: {
-      variant: {
-        primary:
-          'bg-background-button-inverted-default text-foreground-contrast-primary shadow-button-inverted hover:bg-background-button-inverted-hover active:bg-background-button-inverted-pressed focus-visible:shadow-button-inverted-focus disabled:bg-background-neutral-disabled disabled:text-foreground-neutral-disabled disabled:shadow-none ',
-        secondary:
-          'bg-background-button-neutral-default text-foreground-neutral-base shadow-button-neutral hover:bg-background-button-neutral-hover active:bg-background-button-neutral-pressed disabled:bg-background-neutral-disabled focus-visible:shadow-button-neutral-focus disabled:text-foreground-neutral-disabled disabled:shadow-none',
-      },
-    },
-    defaultVariants: {
-      variant: 'primary',
-    },
-  },
-);
-
-function InlineTipsAction({
-  className,
-  variant,
-  ...props
-}: ComponentProps<'button'> & VariantProps<typeof inlineTipsActionVariants>) {
-  return (
-    <button
-      data-slot="inline-tips-action"
-      type="button"
-      className={cn(inlineTipsActionVariants({variant}), className)}
-      {...props}
-    />
-  );
-}
-
-export {
-  InlineTips,
-  InlineTipsContent,
-  InlineTipsTitle,
-  InlineTipsDescription,
-  InlineTipsActions,
-  InlineTipsAction,
-};

package/src/components/input/index.ts

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

package/src/components/input/input.stories.tsx

@@ -1,138 +0,0 @@
-import type {Meta, StoryObj} from '@storybook/react';
-import {Code, Header} from 'components/typography';
-import {Input} from './input';
-
-const typeOptions = [
-  'text',
-  'email',
-  'password',
-  'number',
-  'search',
-  'url',
-  'tel',
-  'date',
-  'time',
-  'datetime-local',
-  'month',
-  'week',
-  'color',
-  'file',
-] as const;
-
-const meta = {
-  title: 'Components/Input',
-  component: Input,
-  tags: ['autodocs'],
-  argTypes: {
-    type: {
-      control: 'select',
-      options: typeOptions,
-    },
-    placeholder: {control: 'text'},
-    disabled: {control: 'boolean'},
-    'aria-invalid': {control: 'boolean'},
-  },
-  args: {
-    type: 'text',
-    placeholder: 'Type something…',
-    disabled: false,
-    'aria-invalid': false,
-  },
-} satisfies Meta<typeof Input>;
-
-export default meta;
-
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = {};
-
-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>
-
-              <Input {...args} variant={variant} size={size} />
-            </div>
-
-            <div className="flex flex-col gap-8">
-              <Code variant="label" className="text-foreground-neutral-subtle">
-                Hover
-              </Code>
-
-              <Input {...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>
-
-              <Input
-                {...args}
-                className="active"
-                defaultValue="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>
-
-              <Input {...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>
-
-              <Input {...args} disabled variant={variant} size={size} />
-            </div>
-            <div className="flex flex-col gap-8">
-              <Code variant="label" className="text-foreground-neutral-subtle">
-                Invalid
-              </Code>
-
-              <Input {...args} aria-invalid variant={variant} size={size} />
-            </div>
-          </div>
-        )),
-      )}
-    </div>
-  ),
-};
-
-States.parameters = {
-  pseudo: {
-    hover: '.hover',
-    active: '.active',
-    focusVisible: '.focus',
-  },
-};
-
-export const Types: Story = {
-  render: (args) => (
-    <div className="flex flex-col gap-32">
-      {typeOptions.map((t) => (
-        <div key={t} className="flex flex-col gap-8">
-          <Code variant="label" className="text-foreground-neutral-subtle">
-            {t}
-          </Code>
-          <Input {...args} type={t} />
-        </div>
-      ))}
-    </div>
-  ),
-};

package/src/components/input/input.tsx

@@ -1,43 +0,0 @@
-import {cva, type VariantProps} from 'class-variance-authority';
-import type {ComponentProps} from 'react';
-import {cn} from 'utils/cn';
-
-export const inputVariants = 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 InputProps = Omit<ComponentProps<'input'>, 'size'> & VariantProps<typeof inputVariants>;
-
-export function Input({className, type, variant, size, ...props}: InputProps) {
-  return (
-    <input
-      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-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',
-        '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',
-        inputVariants({variant, size}),
-        className,
-      )}
-      {...props}
-    />
-  );
-}

package/src/components/item/index.ts

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