@shipfox/react-ui 0.2.0 → 0.4.0

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';

package/src/components/toast/toast-custom.tsx

@@ -0,0 +1,154 @@
+import {cva, type VariantProps} from 'class-variance-authority';
+import {Icon} from 'components/icon/icon';
+import type {ReactNode} from 'react';
+import {cn} from 'utils/cn';
+
+const toastCustomVariants = cva('group relative flex items-start gap-8', {
+  variants: {
+    variant: {
+      default: 'text-tag-neutral-icon',
+      info: 'text-tag-neutral-icon',
+      success: 'text-tag-success-icon',
+      warning: 'text-tag-warning-icon',
+      error: 'text-tag-error-icon',
+    },
+  },
+  defaultVariants: {
+    variant: 'default',
+  },
+});
+
+export type ToastAction = {
+  label: string;
+  onClick: () => void;
+};
+
+export type ToastCustomProps = VariantProps<typeof toastCustomVariants> & {
+  title?: string;
+  description?: string;
+  content?: string;
+  actions?: ToastAction[];
+  onClose?: () => void;
+  className?: string;
+};
+
+function getDefaultIcon(variant: ToastCustomProps['variant'] = 'default'): ReactNode {
+  switch (variant) {
+    case 'info':
+      return <Icon name="info" size={20} />;
+    case 'success':
+      return <Icon name="checkCircleSolid" size={20} />;
+    case 'warning':
+      return <Icon name="info" size={20} />;
+    case 'error':
+      return <Icon name="xCircleSolid" size={20} />;
+    default:
+      return <Icon name="info" size={20} />;
+  }
+}
+
+export function ToastCustom({
+  variant = 'default',
+  title,
+  description,
+  content,
+  actions,
+  onClose,
+  className,
+}: ToastCustomProps) {
+  const hasTitle = Boolean(title);
+  const hasDescription = Boolean(description);
+  const hasContent = Boolean(content);
+  const hasActions = Boolean(actions && actions.length > 0);
+  const isSimple = hasContent && !hasTitle && !hasDescription;
+
+  return (
+    <div data-slot="toast-custom" className={cn(toastCustomVariants({variant}), className)}>
+      <div className="w-20 h-20 rounded-full flex items-start justify-center shrink-0 pt-1">
+        {getDefaultIcon(variant)}
+      </div>
+
+      <div className="flex-1 min-w-0">
+        {hasTitle && (
+          <div
+            data-slot="toast-custom-title"
+            className="font-medium text-sm leading-20 text-foreground-neutral-base mb-4"
+          >
+            {title}
+          </div>
+        )}
+        {hasDescription && (
+          <div
+            data-slot="toast-custom-description"
+            className="text-xs leading-20 text-foreground-neutral-muted mb-8"
+          >
+            {description}
+          </div>
+        )}
+        {isSimple ? (
+          <div className="flex items-center justify-between gap-16 min-w-400 mr-30">
+            <div
+              data-slot="toast-custom-content"
+              className="text-sm leading-20 text-foreground-neutral-base"
+            >
+              {content}
+            </div>
+            {hasActions && (
+              <div data-slot="toast-custom-actions" className="flex items-center gap-16">
+                {actions?.map((action) => (
+                  <button
+                    key={action.label}
+                    data-slot="toast-custom-action"
+                    type="button"
+                    onClick={action.onClick}
+                    className="bg-transparent border-none p-0 cursor-pointer text-xs font-medium leading-20 text-foreground-neutral-base hover:text-foreground-neutral-subtle transition-colors duration-150 outline-none focus-visible:ring-2 focus-visible:ring-background-accent-blue-base focus-visible:ring-offset-2"
+                  >
+                    {action.label}
+                  </button>
+                ))}
+              </div>
+            )}
+          </div>
+        ) : (
+          <>
+            {hasContent && !hasTitle && (
+              <div
+                data-slot="toast-custom-content"
+                className="text-sm leading-20 text-foreground-neutral-base mb-8"
+              >
+                {content}
+              </div>
+            )}
+            {hasActions && (
+              <div data-slot="toast-custom-actions" className="flex items-center gap-16 mt-8">
+                {actions?.map((action) => (
+                  <button
+                    key={action.label}
+                    data-slot="toast-custom-action"
+                    type="button"
+                    onClick={action.onClick}
+                    className="bg-transparent border-none p-0 cursor-pointer text-xs font-medium leading-20 text-foreground-neutral-base hover:text-foreground-neutral-subtle transition-colors duration-150 outline-none focus-visible:ring-2 focus-visible:ring-background-accent-blue-base focus-visible:ring-offset-2"
+                  >
+                    {action.label}
+                  </button>
+                ))}
+              </div>
+            )}
+          </>
+        )}
+      </div>
+
+      {onClose && (
+        <button
+          data-slot="toast-custom-close"
+          type="button"
+          onClick={onClose}
+          className="absolute cursor-pointer -top-2 -right-2 rounded-4 p-4 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 shrink-0"
+          aria-label="Close"
+        >
+          <Icon name="close" className="w-16 h-16" />
+        </button>
+      )}
+    </div>
+  );
+}

package/src/components/toast/toast.stories.tsx

@@ -0,0 +1,369 @@
+import type {Meta, StoryObj} from '@storybook/react';
+import {Button} from 'components/button/button';
+import {Code} from 'components/typography';
+import {Toaster, toast} from './toast';
+import {ToastCustom} from './toast-custom';
+
+const meta = {
+  title: 'Components/Toast',
+  component: Toaster,
+  tags: ['autodocs'],
+  parameters: {
+    layout: 'centered',
+  },
+  decorators: [
+    (Story) => (
+      <>
+        <Story />
+        <div className="flex flex-wrap justify-center items-center gap-32">
+          {/* Regular Toasts */}
+          <div className="flex flex-col gap-8">
+            <Code variant="label" className="text-foreground-neutral-subtle text-center">
+              REGULAR TOASTS
+            </Code>
+            <Button
+              onClick={() => {
+                toast('Event has been created');
+              }}
+            >
+              Default Toast
+            </Button>
+            <Button
+              onClick={() => {
+                toast.success('Success! Your changes have been saved.');
+              }}
+            >
+              Success Toast
+            </Button>
+            <Button
+              onClick={() => {
+                toast.error('Error! Something went wrong.');
+              }}
+            >
+              Error Toast
+            </Button>
+            <Button
+              onClick={() => {
+                toast.warning('Warning! Please review your input.');
+              }}
+            >
+              Warning Toast
+            </Button>
+            <Button
+              onClick={() => {
+                toast.info('Info: This is an informational message.');
+              }}
+            >
+              Info Toast
+            </Button>
+            <Button
+              onClick={() => {
+                toast('Event has been created', {
+                  description: 'Sunday, December 03, 2023 at 9:00 AM',
+                });
+              }}
+            >
+              Toast with Description
+            </Button>
+            <Button
+              onClick={() => {
+                toast('Event has been created', {
+                  description: 'Sunday, December 03, 2023 at 9:00 AM',
+                  action: {
+                    label: 'Undo',
+                    onClick: () => {
+                      toast('Undo clicked');
+                    },
+                  },
+                });
+              }}
+            >
+              Toast with Action
+            </Button>
+            <Button
+              onClick={() => {
+                const promise = new Promise((resolve) => {
+                  setTimeout(() => {
+                    resolve({name: 'Sonner'});
+                  }, 2000);
+                });
+
+                toast.promise(promise, {
+                  loading: 'Loading...',
+                  success: (data) => {
+                    return `${(data as {name: string}).name} toast has been added`;
+                  },
+                  error: 'Error',
+                });
+              }}
+            >
+              Promise Toast
+            </Button>
+          </div>
+          {/* Custom Toasts */}
+          <div className="flex flex-col gap-8 text-center">
+            <Code variant="label" className="text-foreground-neutral-subtle">
+              CUSTOM TOASTS
+            </Code>
+            <Button
+              onClick={() => {
+                toast.custom(
+                  (t) => (
+                    <ToastCustom
+                      variant="success"
+                      title="Insert your alert title here"
+                      description="Insert the alert description here. It would look better as two lines of text."
+                      actions={[
+                        {
+                          label: 'Upgrade',
+                          onClick: () => {
+                            toast('Upgrade clicked');
+                            toast.dismiss(t);
+                          },
+                        },
+                        {
+                          label: 'Learn more',
+                          onClick: () => {
+                            toast('Learn more clicked');
+                            toast.dismiss(t);
+                          },
+                        },
+                      ]}
+                      onClose={() => toast.dismiss(t)}
+                    />
+                  ),
+                  {
+                    duration: Infinity,
+                  },
+                );
+              }}
+            >
+              Custom Toast (Success - Full)
+            </Button>
+            <Button
+              onClick={() => {
+                toast.custom(
+                  (t) => (
+                    <ToastCustom
+                      variant="info"
+                      title="Insert your alert title here"
+                      description="Insert the alert description here. It would look better as two lines of text."
+                      actions={[
+                        {
+                          label: 'Upgrade',
+                          onClick: () => {
+                            toast('Upgrade clicked');
+                            toast.dismiss(t);
+                          },
+                        },
+                        {
+                          label: 'Learn more',
+                          onClick: () => {
+                            toast('Learn more clicked');
+                            toast.dismiss(t);
+                          },
+                        },
+                      ]}
+                      onClose={() => toast.dismiss(t)}
+                    />
+                  ),
+                  {
+                    duration: Infinity,
+                  },
+                );
+              }}
+            >
+              Custom Toast (Info - Full)
+            </Button>
+            <Button
+              onClick={() => {
+                toast.custom(
+                  (t) => (
+                    <ToastCustom
+                      variant="warning"
+                      title="Insert your alert title here"
+                      description="Insert the alert description here. It would look better as two lines of text."
+                      actions={[
+                        {
+                          label: 'Upgrade',
+                          onClick: () => {
+                            toast('Upgrade clicked');
+                            toast.dismiss(t);
+                          },
+                        },
+                        {
+                          label: 'Learn more',
+                          onClick: () => {
+                            toast('Learn more clicked');
+                            toast.dismiss(t);
+                          },
+                        },
+                      ]}
+                      onClose={() => toast.dismiss(t)}
+                    />
+                  ),
+                  {
+                    duration: Infinity,
+                  },
+                );
+              }}
+            >
+              Custom Toast (Warning - Full)
+            </Button>
+            <Button
+              onClick={() => {
+                toast.custom(
+                  (t) => (
+                    <ToastCustom
+                      variant="error"
+                      title="Insert your alert title here"
+                      description="Insert the alert description here. It would look better as two lines of text."
+                      actions={[
+                        {
+                          label: 'Upgrade',
+                          onClick: () => {
+                            toast('Upgrade clicked');
+                            toast.dismiss(t);
+                          },
+                        },
+                        {
+                          label: 'Learn more',
+                          onClick: () => {
+                            toast('Learn more clicked');
+                            toast.dismiss(t);
+                          },
+                        },
+                      ]}
+                      onClose={() => toast.dismiss(t)}
+                    />
+                  ),
+                  {
+                    duration: Infinity,
+                  },
+                );
+              }}
+            >
+              Custom Toast (Error - Full)
+            </Button>
+            <Button
+              onClick={() => {
+                toast.custom(
+                  (t) => (
+                    <ToastCustom
+                      variant="success"
+                      content="Insert your alert content here"
+                      actions={[
+                        {
+                          label: 'Learn more',
+                          onClick: () => {
+                            toast('Learn more clicked');
+                            toast.dismiss(t);
+                          },
+                        },
+                      ]}
+                      onClose={() => toast.dismiss(t)}
+                    />
+                  ),
+                  {
+                    duration: Infinity,
+                  },
+                );
+              }}
+            >
+              Custom Toast (Success - Simple)
+            </Button>
+            <Button
+              onClick={() => {
+                toast.custom(
+                  (t) => (
+                    <ToastCustom
+                      variant="info"
+                      content="Insert your alert content here"
+                      actions={[
+                        {
+                          label: 'Learn more',
+                          onClick: () => {
+                            toast('Learn more clicked');
+                            toast.dismiss(t);
+                          },
+                        },
+                      ]}
+                      onClose={() => toast.dismiss(t)}
+                    />
+                  ),
+                  {
+                    duration: Infinity,
+                  },
+                );
+              }}
+            >
+              Custom Toast (Info - Simple)
+            </Button>
+            <Button
+              onClick={() => {
+                toast.custom(
+                  (t) => (
+                    <ToastCustom
+                      variant="warning"
+                      content="Insert your alert content here"
+                      actions={[
+                        {
+                          label: 'Learn more',
+                          onClick: () => {
+                            toast('Learn more clicked');
+                            toast.dismiss(t);
+                          },
+                        },
+                      ]}
+                      onClose={() => toast.dismiss(t)}
+                    />
+                  ),
+                  {
+                    duration: Infinity,
+                  },
+                );
+              }}
+            >
+              Custom Toast (Warning - Simple)
+            </Button>
+            <Button
+              onClick={() => {
+                toast.custom(
+                  (t) => (
+                    <ToastCustom
+                      variant="error"
+                      content="Insert your alert content here"
+                      actions={[
+                        {
+                          label: 'Learn more',
+                          onClick: () => {
+                            toast('Learn more clicked');
+                            toast.dismiss(t);
+                          },
+                        },
+                      ]}
+                      onClose={() => toast.dismiss(t)}
+                    />
+                  ),
+                  {
+                    duration: Infinity,
+                  },
+                );
+              }}
+            >
+              Custom Toast (Error - Simple)
+            </Button>
+          </div>
+        </div>
+      </>
+    ),
+  ],
+} satisfies Meta<typeof Toaster>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  render: () => <Toaster position="top-center" />,
+};