@shipfox/react-ui 0.1.0 → 0.3.0

package/src/components/textarea/textarea.stories.tsx

@@ -0,0 +1,190 @@
+import type {Meta, StoryObj} from '@storybook/react';
+import {Code, Header} from 'components/typography';
+import {Textarea} from './textarea';
+
+const meta = {
+  title: 'Components/Textarea',
+  component: Textarea,
+  tags: ['autodocs'],
+  argTypes: {
+    placeholder: {control: 'text'},
+    disabled: {control: 'boolean'},
+    'aria-invalid': {control: 'boolean'},
+    rows: {control: 'number'},
+    cols: {control: 'number'},
+  },
+  args: {
+    placeholder: 'Type something…',
+    disabled: false,
+    'aria-invalid': false,
+    rows: 4,
+  },
+} satisfies Meta<typeof Textarea>;
+
+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>
+
+              <Textarea {...args} variant={variant} size={size} />
+            </div>
+
+            <div className="flex flex-col gap-8">
+              <Code variant="label" className="text-foreground-neutral-subtle">
+                Hover
+              </Code>
+
+              <Textarea {...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>
+
+              <Textarea
+                {...args}
+                className="active"
+                defaultValue="The quick brown fox jumps over the lazy dog. 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>
+
+              <Textarea {...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>
+
+              <Textarea {...args} disabled variant={variant} size={size} />
+            </div>
+            <div className="flex flex-col gap-8">
+              <Code variant="label" className="text-foreground-neutral-subtle">
+                Invalid
+              </Code>
+
+              <Textarea {...args} aria-invalid variant={variant} size={size} />
+            </div>
+          </div>
+        )),
+      )}
+    </div>
+  ),
+};
+
+States.parameters = {
+  pseudo: {
+    hover: '.hover',
+    active: '.active',
+    focusVisible: '.focus',
+  },
+};
+
+export const Sizes: Story = {
+  render: (args) => (
+    <div className="flex flex-col gap-32">
+      <div className="flex flex-col gap-8">
+        <Code variant="label" className="text-foreground-neutral-subtle">
+          Rows: 2
+        </Code>
+        <Textarea {...args} rows={2} />
+      </div>
+      <div className="flex flex-col gap-8">
+        <Code variant="label" className="text-foreground-neutral-subtle">
+          Rows: 4 (default)
+        </Code>
+        <Textarea {...args} rows={4} />
+      </div>
+      <div className="flex flex-col gap-8">
+        <Code variant="label" className="text-foreground-neutral-subtle">
+          Rows: 6
+        </Code>
+        <Textarea {...args} rows={6} />
+      </div>
+      <div className="flex flex-col gap-8">
+        <Code variant="label" className="text-foreground-neutral-subtle">
+          Rows: 10
+        </Code>
+        <Textarea {...args} rows={10} />
+      </div>
+    </div>
+  ),
+};
+
+export const DesignMock: Story = {
+  render: () => {
+    const variants = [
+      {key: 'base', label: 'Primary'},
+      {key: 'component', label: 'Secondary'},
+    ] as const;
+    const states = [
+      {name: 'Default', props: {}},
+      {name: 'Hover', props: {className: 'hover'}},
+      {name: 'Focus', props: {className: 'focus'}},
+      {name: 'Filled', props: {defaultValue: 'Placeholder'}},
+      {name: 'Filled Hover', props: {defaultValue: 'Placeholder', className: 'hover'}},
+      {name: 'Disabled', props: {disabled: true}},
+      {name: 'Error', props: {'aria-invalid': true}},
+    ] as const;
+
+    return (
+      <div className="flex flex-col gap-32 pb-64 pt-32 px-32">
+        <Header variant="h3" className="text-foreground-neutral-subtle">
+          TEXT AREA
+        </Header>
+        <div className="flex flex-row gap-32">
+          {variants.map((variant) => (
+            <div key={variant.key} className="flex flex-col gap-32">
+              {states.map((state) => (
+                <div key={state.name} className="flex flex-col gap-8">
+                  <Code variant="label" className="text-foreground-neutral-subtle">
+                    Size=Base (32), State={state.name}, Color={variant.label}
+                  </Code>
+                  <div className="w-[280px]">
+                    <Textarea
+                      placeholder="Placeholder"
+                      variant={variant.key}
+                      size="base"
+                      rows={2}
+                      {...state.props}
+                    />
+                  </div>
+                </div>
+              ))}
+            </div>
+          ))}
+        </div>
+      </div>
+    );
+  },
+};
+
+DesignMock.parameters = {
+  pseudo: {
+    hover: '.hover',
+    focusVisible: '.focus',
+  },
+};

package/src/components/textarea/textarea.tsx

@@ -0,0 +1,42 @@
+import {cva, type VariantProps} from 'class-variance-authority';
+import type {ComponentProps} from 'react';
+import {cn} from 'utils/cn';
+
+export const textareaVariants = 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 TextareaProps = Omit<ComponentProps<'textarea'>, 'size'> &
+  VariantProps<typeof textareaVariants>;
+
+export function Textarea({className, variant, size, ...props}: TextareaProps) {
+  return (
+    <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',
+        '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',
+        'focus-visible:shadow-border-interactive-with-active',
+        'aria-invalid:shadow-border-error',
+        textareaVariants({variant, size}),
+        className,
+      )}
+      {...props}
+    />
+  );
+}

package/src/components/tooltip/tooltip.tsx

@@ -0,0 +1,52 @@
+import * as TooltipPrimitive from '@radix-ui/react-tooltip';
+import {cn} from 'utils/cn';
+
+function TooltipProvider({
+  delayDuration = 0,
+  ...props
+}: React.ComponentProps<typeof TooltipPrimitive.Provider>) {
+  return (
+    <TooltipPrimitive.Provider
+      data-slot="tooltip-provider"
+      delayDuration={delayDuration}
+      {...props}
+    />
+  );
+}
+
+function Tooltip({...props}: React.ComponentProps<typeof TooltipPrimitive.Root>) {
+  return (
+    <TooltipProvider>
+      <TooltipPrimitive.Root data-slot="tooltip" {...props} />
+    </TooltipProvider>
+  );
+}
+
+function TooltipTrigger({...props}: React.ComponentProps<typeof TooltipPrimitive.Trigger>) {
+  return <TooltipPrimitive.Trigger data-slot="tooltip-trigger" {...props} />;
+}
+
+function TooltipContent({
+  className,
+  sideOffset = 0,
+  children,
+  ...props
+}: React.ComponentProps<typeof TooltipPrimitive.Content>) {
+  return (
+    <TooltipPrimitive.Portal>
+      <TooltipPrimitive.Content
+        data-slot="tooltip-content"
+        sideOffset={sideOffset}
+        className={cn(
+          'rounded-8 bg-background-components-base text-foreground-neutral-base px-8 py-4 text-xs font-medium leading-20 shadow-button-neutral animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-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 z-50 w-fit origin-(--radix-tooltip-content-transform-origin) rounded-md text-balance',
+          className,
+        )}
+        {...props}
+      >
+        {children}
+      </TooltipPrimitive.Content>
+    </TooltipPrimitive.Portal>
+  );
+}
+
+export {Tooltip, TooltipTrigger, TooltipContent, TooltipProvider};

package/src/utils/avatar.ts

@@ -0,0 +1,27 @@
+const hashString = (str: string): number => {
+  let hash = 0;
+  for (let i = 0; i < str.length; i++) {
+    const char = str.charCodeAt(i);
+    hash = (hash << 5) - hash + char;
+    hash = hash & hash;
+  }
+  return Math.abs(hash);
+};
+
+export const getPlaceholderImageUrl = (name?: string): string => {
+  const backgroundColors = ['BFDFFF', 'BFEAFF', 'CFBFFF', 'FFBFC3', 'FFEABF', 'E3E6EA', 'EAEAEA'];
+
+  const seed = name?.trim() || 'avatar';
+
+  const colorIndex = hashString(seed) % backgroundColors.length;
+  const backgroundColor = backgroundColors[colorIndex];
+
+  return `https://api.dicebear.com/9.x/micah/svg?backgroundColor=${backgroundColor}&seed=${encodeURIComponent(seed)}`;
+};
+
+export const getInitial = (name?: string): string => {
+  if (name) {
+    return name.trim()[0]?.toUpperCase() ?? 'L';
+  }
+  return 'L';
+};

package/src/utils/index.ts

@@ -1,3 +1,4 @@
+export * from './avatar';
 export * from './clipboard';
 export * from './cn';
 export * from './date';