@peerbots/core 0.1.0

package/src/ui/TabRadio.stories.tsx

@@ -0,0 +1,153 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { TabRadio, TabRadioOption } from "./TabRadio";
+import { useState } from "react";
+import { Icon } from "./Icon";
+import { Heading, Text } from "./Typography";
+import React from "react";
+
+const meta = {
+  title: "UI/TabRadio",
+  component: TabRadio,
+  parameters: {
+    layout: "centered",
+  },
+  tags: ["autodocs"],
+  argTypes: {
+    variant: {
+      control: "select",
+      options: ["default", "primary", "danger"],
+    },
+    onChange: { action: "changed" },
+  },
+} satisfies Meta<typeof TabRadio>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+// Wrapper to manage state in the story
+const TabRadioWithState = <T extends string>(
+  args: React.ComponentProps<typeof TabRadio<T>>,
+) => {
+  const [value, setValue] = useState(args.value);
+  return (
+    <TabRadio
+      {...args}
+      value={value}
+      onChange={(val) => {
+        setValue(val);
+        args.onChange?.(val);
+      }}
+    />
+  );
+};
+
+const textOptions = [
+  { value: "daily", label: "Daily" },
+  { value: "weekly", label: "Weekly" },
+  { value: "monthly", label: "Monthly" },
+] as const;
+
+export const Default: Story = {
+  args: {
+    options: textOptions as readonly TabRadioOption<string>[],
+    value: "daily",
+    onChange: () => {},
+  },
+  render: (args) => <TabRadioWithState {...args} />,
+};
+
+export const Variations: Story = {
+  args: {
+    options: textOptions as readonly TabRadioOption<string>[],
+    value: "daily",
+    onChange: () => {},
+  },
+  render: () => (
+    <div className="flex flex-col gap-12 p-4 min-w-[400px]">
+      <div className="space-y-4">
+        <Heading level={4} className="text-sm font-medium text-black uppercase">
+          Variants
+        </Heading>
+        <div className="space-y-6">
+          <div className="space-y-2">
+            <Text variant="small" className="italic">
+              Default
+            </Text>
+            <TabRadioWithState
+              options={textOptions as readonly TabRadioOption<string>[]}
+              value="daily"
+              variant="default"
+              onChange={() => {}}
+            />
+          </div>
+          <div className="space-y-2">
+            <Text variant="small" className="italic">
+              Primary
+            </Text>
+            <TabRadioWithState
+              options={textOptions as readonly TabRadioOption<string>[]}
+              value="daily"
+              variant="primary"
+              onChange={() => {}}
+            />
+          </div>
+          <div className="space-y-2">
+            <Text variant="small" className="italic">
+              Danger
+            </Text>
+            <TabRadioWithState
+              options={textOptions as readonly TabRadioOption<string>[]}
+              value="daily"
+              variant="danger"
+              onChange={() => {}}
+            />
+          </div>
+        </div>
+      </div>
+
+      <div className="space-y-4">
+        <Heading level={4} className="text-sm font-medium text-black uppercase">
+          With Icons
+        </Heading>
+        <TabRadioWithState
+          value="Message"
+          onChange={() => {}}
+          options={
+            [
+              {
+                value: "Message",
+                label: (
+                  <div className="flex items-center gap-1">
+                    <Icon size="sm" className="w-4 h-4">
+                      <path
+                        strokeLinecap="round"
+                        strokeLinejoin="round"
+                        d="M8.625 12a.375.375 0 11-.75 0 .375.375 0 01.75 0zm0 0H8.25m4.125 0a.375.375 0 11-.75 0 .375.375 0 01.75 0zm0 0H12m4.125 0a.375.375 0 11-.75 0 .375.375 0 01.75 0zm0 0h-.375M21 12c0 4.556-4.03 8.25-9 8.25a9.764 9.764 0 01-2.555-.337A5.972 5.972 0 015.41 20.97a5.969 5.969 0 01-.474-.065 4.48 4.48 0 00.978-2.025c.09-.457-.133-.901-.467-1.226C3.93 16.178 3 14.189 3 12c0-4.556 4.03-8.25 9-8.25s9 3.694 9 8.25z"
+                      />
+                    </Icon>
+                    Message
+                  </div>
+                ),
+              },
+              {
+                value: "Log",
+                label: (
+                  <div className="flex items-center gap-1">
+                    <Icon size="sm" className="w-4 h-4">
+                      <path
+                        strokeLinecap="round"
+                        strokeLinejoin="round"
+                        d="m16.862 4.487 1.687-1.688a1.875 1.875 0 1 1 2.652 2.652L10.582 16.07a4.5 4.5 0 0 1-1.897 1.13L6 18l.8-2.685a4.5 4.5 0 0 1 1.13-1.897l8.932-8.931Zm0 0L19.5 7.125M18 14v4.75A2.25 2.25 0 0 1 15.75 21H5.25A2.25 2.25 0 0 1 3 18.75V8.25A2.25 2.25 0 0 1 5.25 6H10"
+                      />
+                    </Icon>
+                    Log
+                  </div>
+                ),
+              },
+            ] as const
+          }
+        />
+      </div>
+    </div>
+  ),
+};

package/src/ui/TabRadio.tsx

@@ -0,0 +1,68 @@
+import { ReactNode } from "react";
+import { cn } from "./utils";
+import { Toggle, ToggleGroup } from "@base-ui/react";
+
+export interface TabRadioOption<T extends string> {
+  value: T;
+  label: ReactNode;
+  disabled?: boolean;
+}
+
+export interface TabRadioProps<T extends string> {
+  options: readonly TabRadioOption<T>[];
+  value: T | undefined | null;
+  onChange: (value: T | undefined) => void;
+  className?: string;
+  variant?: "default" | "primary" | "danger";
+  "aria-label"?: string;
+}
+
+const variantStyles = {
+  default:
+    "data-[pressed]:bg-white data-[pressed]:text-gray-900 data-[pressed]:shadow-sm data-[pressed]:ring-1 data-[pressed]:ring-gray-200",
+  primary:
+    "data-[pressed]:bg-primary/20 data-[pressed]:shadow-sm data-[pressed]:ring-1 data-[pressed]:ring-primary",
+  danger:
+    "data-[pressed]:bg-danger/20 data-[pressed]:shadow-sm data-[pressed]:ring-1 data-[pressed]:ring-danger",
+};
+
+export function TabRadio<T extends string>({
+  options,
+  value,
+  onChange,
+  className,
+  variant = "default",
+  "aria-label": ariaLabel,
+}: TabRadioProps<T>) {
+  return (
+    <ToggleGroup
+      value={value ? [value] : []}
+      onValueChange={(val) => {
+        onChange(val[0] as T | undefined);
+      }}
+      aria-label={ariaLabel}
+      className={cn(
+        "inline-flex p-1 space-x-1 bg-gray-100 rounded-lg border border-gray-200",
+        className,
+      )}
+    >
+      {options.map((option) => {
+        return (
+          <Toggle
+            key={option.value}
+            value={option.value}
+            disabled={option.disabled}
+            className={cn(
+              "relative cursor-pointer px-3 py-1.5 text-sm font-medium rounded-md transition-all flex items-center justify-center outline-none",
+              "text-gray-600 hover:text-gray-900 hover:bg-gray-200",
+              "disabled:opacity-50 disabled:cursor-not-allowed disabled:hover:bg-transparent disabled:hover:text-gray-600",
+              variantStyles[variant],
+            )}
+          >
+            {option.label}
+          </Toggle>
+        );
+      })}
+    </ToggleGroup>
+  );
+}

package/src/ui/TabSelection.stories.tsx

@@ -0,0 +1,44 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { TabSelection } from "./TabSelection";
+import React, { useState } from "react";
+
+const meta: Meta<typeof TabSelection> = {
+  title: "UI/TabSelection",
+  component: TabSelection,
+  parameters: {
+    layout: "centered",
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof TabSelection>;
+
+const mockTabs = [
+  { id: "1", label: "Default Template" },
+  { id: "2", label: "Robot Calibration" },
+  { id: "3", label: "Experimental Sequence" },
+];
+
+export const Default: Story = {
+  render: function Render() {
+    const [activeTab, setActiveTab] = useState<string>("1");
+
+    const tabsWithActions = mockTabs.map((tab) => ({
+      ...tab,
+      onEdit: () => alert(`Editing ${tab.label}`),
+      onClose: () => alert(`Closing ${tab.label}`),
+    }));
+
+    return (
+      <div className="w-[600px] border p-4 bg-gray-50">
+        <TabSelection
+          tabs={tabsWithActions}
+          activeTabId={activeTab}
+          onTabClick={setActiveTab}
+          onAddClick={() => alert("Add new tab clicked!")}
+        />
+      </div>
+    );
+  },
+};

package/src/ui/TabSelection.tsx

@@ -0,0 +1,91 @@
+import { Button, Icon } from ".";
+import React from "react";
+
+export interface TabItem {
+  id: string;
+  label: string;
+  onClose?: () => void;
+  onEdit?: () => void;
+}
+
+export interface TabSelectionProps {
+  tabs: TabItem[];
+  activeTabId: string | null;
+  onTabClick: (id: string) => void;
+  onAddClick?: () => void;
+  className?: string;
+}
+
+export function TabSelection({
+  tabs,
+  activeTabId,
+  onTabClick,
+  onAddClick,
+  className = "",
+}: TabSelectionProps) {
+  return (
+    <div
+      className={`overflow-x-auto max-h-20 text-sm whitespace-nowrap ${className}`}
+    >
+      {tabs.map((tab) => {
+        const isActive = tab.id === activeTabId;
+        return (
+          <div
+            key={tab.id}
+            className={
+              "inline-block align-middle m-1 px-2 py-2 cursor-pointer rounded-sm " +
+              (isActive
+                ? "font-bold bg-primary/30"
+                : "font-gray-300 bg-gray-200")
+            }
+            onClick={() => onTabClick(tab.id)}
+          >
+            <span className="inline-block align-middle">{tab.label}</span>
+
+            {isActive && (tab.onEdit || tab.onClose) && (
+              <span className="inline-flex items-center ml-2 align-middle">
+                {tab.onEdit && (
+                  <Button
+                    variant="ghost"
+                    size="sm"
+                    aria-label="Edit Tab"
+                    onClick={(e) => {
+                      e.stopPropagation();
+                      tab.onEdit!();
+                    }}
+                    leftIcon={<Icon name="edit" size="sm" />}
+                  />
+                )}
+                {tab.onEdit && tab.onClose && (
+                  <span className="opacity-10 align-middle mx-1">{" | "}</span>
+                )}
+                {tab.onClose && (
+                  <Button
+                    variant="ghost"
+                    size="sm"
+                    aria-label="Close Tab"
+                    onClick={(e) => {
+                      e.stopPropagation();
+                      tab.onClose!();
+                    }}
+                    leftIcon={<Icon name="close" size="sm" />}
+                  />
+                )}
+              </span>
+            )}
+          </div>
+        );
+      })}
+      {onAddClick && (
+        <Button
+          variant="primary"
+          size="sm"
+          aria-label="Create New Tab"
+          onClick={onAddClick}
+          leftIcon={<Icon name="plus" size="sm" />}
+          className="m-1 align-middle inline-flex"
+        />
+      )}
+    </div>
+  );
+}

package/src/ui/TextArea.stories.tsx

@@ -0,0 +1,64 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { TextArea } from "./TextArea";
+import { Heading, Text } from "./Typography";
+
+const meta: Meta<typeof TextArea> = {
+  title: "UI/TextArea",
+  component: TextArea,
+  tags: ["autodocs"],
+  argTypes: {},
+};
+
+export default meta;
+type Story = StoryObj<typeof TextArea>;
+
+export const Default: Story = {
+  args: {
+    placeholder: "Type your message here...",
+  },
+};
+
+export const Variations: Story = {
+  render: () => (
+    <div className="flex flex-col gap-12 p-4 max-w-lg">
+      <div className="space-y-4">
+        <Heading level={4} className="text-sm font-medium text-black uppercase">
+          Styles & Sizes
+        </Heading>
+        <div className="space-y-6">
+          <div className="space-y-1">
+            <Text variant="small" className="font-bold">
+              With Predefined Value
+            </Text>
+            <TextArea defaultValue="This is some predefined text in the textarea." />
+          </div>
+          <div className="space-y-1">
+            <Text variant="small" className="font-bold">
+              Large (10 rows)
+            </Text>
+            <TextArea
+              rows={10}
+              placeholder="A larger textarea for more content..."
+            />
+          </div>
+        </div>
+      </div>
+
+      <div className="space-y-4">
+        <Heading level={4} className="text-sm font-medium text-black uppercase">
+          States
+        </Heading>
+        <div className="space-y-1">
+          <Text variant="small" className="font-bold">
+            Disabled
+          </Text>
+          <TextArea
+            disabled
+            placeholder="Cannot type here"
+            defaultValue="Read only content"
+          />
+        </div>
+      </div>
+    </div>
+  ),
+};

package/src/ui/TextArea.tsx

@@ -0,0 +1,24 @@
+import { Input as BaseInput } from "@base-ui/react";
+import React, { ComponentPropsWithoutRef } from "react";
+import { cn } from "./utils";
+
+export type TextAreaProps = React.TextareaHTMLAttributes<HTMLTextAreaElement>;
+
+export const TextArea = React.forwardRef<HTMLTextAreaElement, TextAreaProps>(
+  ({ className, id, ...props }, ref) => {
+    return (
+      <BaseInput
+        render={<textarea />}
+        ref={ref as React.Ref<HTMLTextAreaElement>}
+        id={id}
+        className={cn(
+          "block w-full rounded-md border-0 px-1.5 py-1.5 text-gray-900 ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-primary sm:text-sm sm:leading-6 bg-primary/10 appearance-none",
+          className,
+        )}
+        {...(props as ComponentPropsWithoutRef<typeof BaseInput>)}
+      />
+    );
+  },
+);
+
+TextArea.displayName = "TextArea";

package/src/ui/Tooltip.stories.tsx

@@ -0,0 +1,84 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { Tooltip, HelperTooltip } from "./Tooltip";
+import { Button } from "./Button";
+import { Heading } from "./Typography";
+
+const meta: Meta<typeof Tooltip> = {
+  title: "UI/Tooltip",
+  component: Tooltip,
+  tags: ["autodocs"],
+  argTypes: {
+    content: { control: "text" },
+    delay: { control: "radio", options: ["normal", "slow"] },
+  },
+  decorators: [
+    (Story) => (
+      <div className="flex h-32 items-center justify-center">
+        <Story />
+      </div>
+    ),
+  ],
+};
+
+export default meta;
+type Story = StoryObj<typeof Tooltip>;
+
+export const Default: Story = {
+  args: {
+    content: "This is a tooltip",
+    children: <span>Hover me</span>,
+  },
+};
+
+export const Variations: Story = {
+  decorators: [
+    (Story) => (
+      <div className="p-12">
+        <Story />
+      </div>
+    ),
+  ],
+  render: () => (
+    <div className="flex flex-col gap-16">
+      <div className="space-y-4">
+        <Heading level={4} className="text-sm font-medium text-black uppercase">
+          Placements & Triggers
+        </Heading>
+        <div className="flex flex-wrap gap-8 items-center justify-center">
+          <Tooltip content="Tooltip on button">
+            <Button>On Button</Button>
+          </Tooltip>
+          <Tooltip content="Simple span trigger">
+            <span className="cursor-help underline decoration-dotted">
+              On Text
+            </span>
+          </Tooltip>
+        </div>
+      </div>
+
+      <div className="space-y-4">
+        <Heading level={4} className="text-sm font-medium text-black uppercase">
+          Configurations
+        </Heading>
+        <div className="flex flex-wrap gap-8 items-center justify-center">
+          <Tooltip content="I appear slowly" delay="slow">
+            <Button variant="secondary">Slow Delay (1s)</Button>
+          </Tooltip>
+          <Tooltip content="This is a very long tooltip message that should wrap nicely within the tooltip bounds instead of overflowing outside the container.">
+            <Button variant="ghost">Long Content wrapping</Button>
+          </Tooltip>
+        </div>
+      </div>
+
+      <div className="space-y-4">
+        <Heading level={4} className="text-sm font-medium text-black uppercase">
+          Helper Tooltip
+        </Heading>
+        <div className="flex flex-wrap gap-8 items-center justify-center">
+          <HelperTooltip content="I'm a helper" />
+          <HelperTooltip content="This is a much longer message that is trying to illustrate what happens when we have a long message for the helper tooltip." />
+        </div>
+      </div>
+    </div>
+  ),
+};

package/src/ui/Tooltip.tsx

@@ -0,0 +1,61 @@
+import React from "react";
+import { Tooltip as BaseTooltip } from "@base-ui/react";
+import { cn } from "./utils";
+import { Icon } from "./Icon";
+
+export interface TooltipProps {
+  content: React.ReactNode;
+  children: React.ReactNode;
+  className?: string;
+  delay?: "normal" | "slow";
+}
+
+export function Tooltip({
+  content,
+  children,
+  className,
+  delay = "normal",
+}: TooltipProps) {
+  return (
+    <BaseTooltip.Provider delay={delay === "slow" ? 1000 : 0}>
+      <BaseTooltip.Root>
+        {React.isValidElement(children) ? (
+          <BaseTooltip.Trigger render={children} />
+        ) : (
+          <BaseTooltip.Trigger>{children}</BaseTooltip.Trigger>
+        )}
+        <BaseTooltip.Portal>
+          <BaseTooltip.Positioner sideOffset={8}>
+            <BaseTooltip.Popup
+              className={cn(
+                "z-50 rounded shadow-lg bg-white p-2 text-xs text-center whitespace-normal max-w-xs text-gray-900 border border-gray-200",
+                className,
+              )}
+            >
+              {content}
+              <BaseTooltip.Arrow className="fill-white stroke-gray-200" />
+            </BaseTooltip.Popup>
+          </BaseTooltip.Positioner>
+        </BaseTooltip.Portal>
+      </BaseTooltip.Root>
+    </BaseTooltip.Provider>
+  );
+}
+export interface HelperTooltipProps {
+  content: React.ReactNode;
+  className?: string;
+}
+
+export function HelperTooltip({ content, className }: HelperTooltipProps) {
+  return (
+    <Tooltip content={content} className={className}>
+      <Icon size="md" className="text-gray-500 hover:text-gray-700 cursor-help">
+        <path
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          d="M9.879 7.519c1.171-1.025 3.071-1.025 4.242 0 1.172 1.025 1.172 2.687 0 3.712-.203.179-.43.326-.67.442-.745.361-1.45.999-1.45 1.827v.75M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Zm-9 5.25h.008v.008H12v-.008Z"
+        />
+      </Icon>
+    </Tooltip>
+  );
+}

package/src/ui/Typography.stories.tsx

@@ -0,0 +1,87 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { Heading, Text } from "./Typography";
+
+const meta: Meta = {
+  title: "UI/Typography",
+  tags: ["autodocs"],
+};
+
+export default meta;
+
+export const Default: StoryObj = {
+  render: () => (
+    <div className="space-y-4 max-w-lg">
+      <Heading level={2}>Core Typography</Heading>
+      <Text>
+        The quick brown fox jumps over the lazy dog. This is our standard body
+        text used across the application.
+      </Text>
+    </div>
+  ),
+};
+
+export const Variations: StoryObj = {
+  render: () => (
+    <div className="flex flex-col gap-12 p-4">
+      <div className="space-y-4">
+        <Heading
+          level={4}
+          className="text-sm font-medium text-black uppercase tracking-wider border-b pb-1"
+        >
+          Headings
+        </Heading>
+        <div className="space-y-4">
+          <Heading level={1}>Heading 1</Heading>
+          <Heading level={2}>Heading 2</Heading>
+          <Heading level={3}>Heading 3</Heading>
+          <Heading level={4}>Heading 4</Heading>
+          <Heading level={5}>Heading 5</Heading>
+          <Heading level={6}>Heading 6</Heading>
+        </div>
+      </div>
+
+      <div className="space-y-4">
+        <Heading
+          level={4}
+          className="text-sm font-medium text-black uppercase tracking-wider border-b pb-1"
+        >
+          Text Variants
+        </Heading>
+        <div className="space-y-4">
+          <div className="space-y-1">
+            <Text variant="small" className="italic font-bold">
+              Default
+            </Text>
+            <Text variant="default">
+              The quick brown fox jumps over the lazy dog.
+            </Text>
+          </div>
+          <div className="space-y-1">
+            <Text variant="small" className="italic font-bold">
+              Small
+            </Text>
+            <Text variant="small">
+              The quick brown fox jumps over the lazy dog.
+            </Text>
+          </div>
+          <div className="space-y-1">
+            <Text variant="small" className="italic font-bold">
+              Muted
+            </Text>
+            <Text variant="muted">
+              The quick brown fox jumps over the lazy dog.
+            </Text>
+          </div>
+          <div className="space-y-1">
+            <Text variant="small" className="italic font-bold">
+              Error
+            </Text>
+            <Text variant="error">
+              The quick brown fox jumps over the lazy dog.
+            </Text>
+          </div>
+        </div>
+      </div>
+    </div>
+  ),
+};