@shipfox/react-ui 0.1.0 → 0.3.0

package/src/components/avatar/avatar.tsx

@@ -0,0 +1,215 @@
+import * as AvatarPrimitive from '@radix-ui/react-avatar';
+import {cva, type VariantProps} from 'class-variance-authority';
+import type {ComponentProps, ReactNode} from 'react';
+import {getInitial, getPlaceholderImageUrl} from 'utils';
+import {cn} from 'utils/cn';
+import {Icon} from '../icon/icon';
+
+export const avatarVariants = cva(
+  'relative flex shrink-0 overflow-hidden bg-background-button-neutral-default text-foreground-neutral-base ring-1 ring-border-neutral-base-component ring-offset-1 ring-offset-background-neutral-base shadow-button-neutral',
+  {
+    variants: {
+      radius: {
+        full: 'rounded-full',
+        rounded: 'rounded-6',
+      },
+      size: {
+        '3xs': 'size-[18px]',
+        '2xs': 'size-[20px]',
+        xs: 'size-[24px]',
+        sm: 'size-[28px]',
+        md: 'size-[32px]',
+        lg: 'size-[36px]',
+        xl: 'size-[40px]',
+        '2xl': 'size-[80px]',
+        '3xl': 'size-[120px]',
+      },
+    },
+    defaultVariants: {
+      radius: 'full',
+      size: 'md',
+    },
+  },
+);
+
+const avatarInnerVariants = cva('flex h-full w-full items-center justify-center', {
+  variants: {
+    size: {
+      '3xs': 'text-[10px] leading-[10px]',
+      '2xs': 'text-[11px] leading-[11px]',
+      xs: 'text-xs leading-4',
+      sm: 'text-xs leading-5',
+      md: 'text-sm leading-5',
+      lg: 'text-sm leading-5',
+      xl: 'text-base leading-6',
+      '2xl': 'text-2xl leading-8',
+      '3xl': 'text-4xl leading-[56px]',
+    },
+  },
+  defaultVariants: {
+    size: 'md',
+  },
+});
+
+export type AvatarContent = 'letters' | 'logo' | 'logoPlaceholder' | 'image' | 'upload';
+
+const UPLOAD_ICON_SIZE_MAP: Record<
+  NonNullable<VariantProps<typeof avatarVariants>['size']>,
+  string
+> = {
+  '3xs': 'size-[10px]',
+  '2xs': 'size-[12px]',
+  xs: 'size-[14px]',
+  sm: 'size-[16px]',
+  md: 'size-[18px]',
+  lg: 'size-[20px]',
+  xl: 'size-[24px]',
+  '2xl': 'size-[40px]',
+  '3xl': 'size-[60px]',
+} as const;
+
+function AvatarRoot({
+  className,
+  radius,
+  size,
+  ...props
+}: ComponentProps<typeof AvatarPrimitive.Root> & VariantProps<typeof avatarVariants>) {
+  return (
+    <AvatarPrimitive.Root
+      data-slot="avatar"
+      className={cn(avatarVariants({radius, size}), className)}
+      {...props}
+    />
+  );
+}
+
+function AvatarImage({className, ...props}: ComponentProps<typeof AvatarPrimitive.Image>) {
+  return (
+    <AvatarPrimitive.Image
+      data-slot="avatar-image"
+      className={cn('aspect-square size-full', className)}
+      {...props}
+    />
+  );
+}
+
+function AvatarFallback({className, ...props}: ComponentProps<typeof AvatarPrimitive.Fallback>) {
+  return (
+    <AvatarPrimitive.Fallback
+      data-slot="avatar-name"
+      className={cn('flex size-full items-center justify-center', className)}
+      {...props}
+    />
+  );
+}
+
+export type AvatarProps = ComponentProps<typeof AvatarPrimitive.Root> &
+  VariantProps<typeof avatarVariants> & {
+    content?: AvatarContent;
+    src?: string;
+    alt?: string;
+    fallback?: string;
+    animateOnHover?: boolean;
+  };
+
+export function Avatar({
+  className,
+  radius,
+  size = 'md',
+  content = 'letters',
+  src,
+  alt,
+  fallback,
+  animateOnHover = false,
+  ...props
+}: AvatarProps) {
+  const innerClassName =
+    'flex h-full w-full items-center justify-center rounded-inherit relative bg-background-neutral-base dark:bg-background-components-base text-foreground-neutral-subtle';
+
+  const renderContent = (): ReactNode => {
+    if (content === 'image') {
+      const imageSrc = src || getPlaceholderImageUrl(fallback);
+      return (
+        <>
+          <AvatarImage
+            src={imageSrc}
+            alt={alt || 'Avatar image'}
+            className="object-scale-down rounded-inherit"
+          />
+          <AvatarFallback className={innerClassName}>
+            <div
+              className={cn(
+                'absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2',
+                avatarInnerVariants({size}),
+              )}
+            >
+              <span className="font-medium">{getInitial(fallback)}</span>
+            </div>
+          </AvatarFallback>
+        </>
+      );
+    }
+
+    if (content === 'logo') {
+      return (
+        <AvatarFallback className={cn(innerClassName, 'p-[15%]')}>
+          <Icon name="shipfoxLogo" color="#FF4B00" className="h-full w-full p-2" />
+        </AvatarFallback>
+      );
+    }
+
+    if (content === 'logoPlaceholder') {
+      return (
+        <AvatarFallback className={cn(innerClassName, 'p-[15%]')}>
+          <Icon
+            name="shipfoxLogo"
+            color="var(--foreground-neutral-subtle, #a1a1aa)"
+            className="h-full w-full p-2 opacity-50"
+          />
+        </AvatarFallback>
+      );
+    }
+
+    if (content === 'letters') {
+      return (
+        <AvatarFallback className={innerClassName}>
+          <div
+            className={cn(
+              'absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2',
+              avatarInnerVariants({size}),
+            )}
+          >
+            <span className="font-medium">{getInitial(fallback)}</span>
+          </div>
+        </AvatarFallback>
+      );
+    }
+
+    if (content === 'upload') {
+      const iconSizeClass = UPLOAD_ICON_SIZE_MAP[size as keyof typeof UPLOAD_ICON_SIZE_MAP];
+      return (
+        <AvatarFallback className={innerClassName}>
+          <Icon name="imageAdd" className={cn('text-foreground-neutral-subtle', iconSizeClass)} />
+        </AvatarFallback>
+      );
+    }
+
+    return null;
+  };
+
+  return (
+    <AvatarRoot
+      className={cn(
+        animateOnHover ? 'hover:-translate-y-8 transition-transform duration-300 ease-out' : '',
+        className,
+      )}
+      radius={radius}
+      size={size}
+      {...props}
+    >
+      {renderContent()}
+    </AvatarRoot>
+  );
+}
+
+export {AvatarRoot, AvatarImage, AvatarFallback};

package/src/components/avatar/index.ts

@@ -0,0 +1,2 @@
+export * from './avatar';
+export * from './avatar-group';

package/src/components/icon/custom/index.ts

@@ -6,6 +6,7 @@ export * from './component-line';
 export * from './ellipse-mini-solid';
 export * from './info-tooltip-fill';
 export * from './resize';
+export * from './shipfox-logo';
 export * from './spinner';
 export * from './thunder';
 export * from './x-circle-solid';

package/src/components/icon/custom/shipfox-logo.tsx

@@ -0,0 +1,20 @@
+import type {RemixiconComponentType} from '@remixicon/react';
+import type {ComponentProps} from 'react';
+
+type ShipfoxLogoProps = ComponentProps<RemixiconComponentType> & {
+  color?: string;
+};
+
+export function ShipfoxLogo({color = '#FF4B00', ...props}: ShipfoxLogoProps) {
+  return (
+    <svg viewBox="0 0 88 88" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+      <title>Shipfox Logo</title>
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M17.9759 32.3751L39.0987 74.1549C41.1536 78.2196 46.847 78.2196 48.902 74.1549L70.0247 32.3751L81.2835 38.122C84.6511 39.8409 85.3794 44.4228 82.7171 47.1406L47.9008 82.684C45.7466 84.8831 42.254 84.8831 40.0999 82.684L5.28351 47.1406C2.62124 44.4227 3.34957 39.8409 6.7171 38.122L17.9759 32.3751ZM44.0003 19.0912L73.0051 4.28593C77.7786 1.84936 82.8214 7.06388 80.3737 11.9054L70.0247 32.3751L44.0003 19.0912ZM44.0003 19.0912L14.9955 4.28593C10.2221 1.84936 5.17926 7.06388 7.62699 11.9054L17.9759 32.3751L44.0003 19.0912Z"
+        fill={color}
+      />
+    </svg>
+  );
+}

package/src/components/icon/icon.tsx

@@ -1,4 +1,10 @@
-import {type RemixiconComponentType, RiGoogleFill, RiMicrosoftFill} from '@remixicon/react';
+import {
+  type RemixiconComponentType,
+  RiCloseLine,
+  RiGoogleFill,
+  RiImageAddFill,
+  RiMicrosoftFill,
+} from '@remixicon/react';
 import type {ComponentProps} from 'react';
 import {
   BadgeIcon,
@@ -9,6 +15,7 @@ import {
   EllipseMiniSolidIcon,
   InfoTooltipFillIcon,
   ResizeIcon,
+  ShipfoxLogo,
   SpinnerIcon,
   ThunderIcon,
   XCircleSolidIcon,
@@ -28,6 +35,9 @@ const iconsMap = {
   spinner: SpinnerIcon,
   ellipseMiniSolid: EllipseMiniSolidIcon,
   componentLine: ComponentLineIcon,
+  imageAdd: RiImageAddFill,
+  close: RiCloseLine,
+  shipfoxLogo: ShipfoxLogo,
 } as const satisfies Record<string, RemixiconComponentType>;
 
 export type IconName = keyof typeof iconsMap;

package/src/components/index.ts

@@ -1,4 +1,8 @@
+export * from './alert';
+export * from './avatar';
 export * from './button';
 export * from './icon';
+export * from './inline-tips';
+export * from './textarea';
 export * from './theme-provider';
 export * from './typography';

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

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

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

@@ -0,0 +1,126 @@
+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', 'destructive'],
+    },
+    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', 'destructive'] as const;
+const variants = ['primary', 'secondary'] as const;
+
+export const Default: Story = {
+  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'},
+      destructive: {title: "Don't's", description: 'Title'},
+    };
+
+    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

@@ -0,0 +1,132 @@
+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',
+      destructive: 'bg-tag-error-icon',
+    },
+  },
+  defaultVariants: {
+    type: 'default',
+  },
+});
+
+type InlineTipsProps = ComponentProps<'div'> &
+  VariantProps<typeof inlineTipsBaseVariants> & {
+    type?: 'default' | 'info' | 'success' | 'destructive';
+  };
+
+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/textarea/index.ts

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