@peerbots/core 0.1.0

package/src/ui/AuthFormUI.tsx

@@ -0,0 +1,217 @@
+import { useFormStatus } from "react-dom";
+import { Button, Input, Heading, Text, Icon, Field } from ".";
+
+function SubmitButton({ label }: { label: string }) {
+  const { pending } = useFormStatus();
+  return (
+    <Button
+      type="submit"
+      variant="primary"
+      isLoading={pending}
+      disabled={pending}
+    >
+      {label}
+    </Button>
+  );
+}
+
+export type AuthFormMode = "signing up" | "signing in" | "resetting password";
+
+export interface AuthFormUIProps {
+  mode: AuthFormMode;
+  onModeChange: (mode: AuthFormMode) => void;
+  formAction: (payload: FormData) => void;
+  actionState: { error: string; message: string };
+  onGoogleSignIn?: () => void;
+  title?: React.ReactNode;
+  description?: React.ReactNode;
+}
+
+export function AuthFormUI({
+  mode,
+  onModeChange,
+  formAction,
+  actionState,
+  onGoogleSignIn,
+  title,
+  description,
+}: AuthFormUIProps) {
+  const defaultTitle =
+    mode === "signing up"
+      ? "Sign up"
+      : mode === "signing in"
+        ? "Sign In"
+        : "Reset Password";
+
+  return (
+    <div className="text-left overflow-hidden">
+      <Heading level={2} className="text-center mb-2">
+        {title || defaultTitle}
+      </Heading>
+
+      <form className="md:m-10 sm:m-4 space-y-4" action={formAction}>
+        {description && (
+          <Text className="text-center mb-6" variant="muted">
+            {description}
+          </Text>
+        )}
+
+        {mode === "resetting password" && (
+          <Text className="text-center font-bold text-dark-primary">
+            {actionState.message}
+          </Text>
+        )}
+        <Text className="text-center" variant="error">
+          {actionState.error}
+        </Text>
+
+        <div className="space-y-4">
+          <Field
+            id="email"
+            label="Email"
+            error={
+              actionState.error && actionState.error.includes("email")
+                ? actionState.error
+                : ""
+            }
+          >
+            <Input
+              name="email"
+              type="email"
+              required
+              placeholder="Email"
+              leftIcon={<Icon name="envelope" />}
+            />
+          </Field>
+
+          {mode !== "resetting password" && (
+            <Field
+              id="password"
+              label="Password"
+              error={
+                actionState.error && actionState.error.includes("password")
+                  ? actionState.error
+                  : ""
+              }
+            >
+              <Input
+                name="password"
+                type="password"
+                required
+                placeholder="Password"
+                leftIcon={<Icon name="lockClosed" />}
+              />
+            </Field>
+          )}
+        </div>
+
+        <div className="text-center mt-6 space-y-4">
+          {mode === "signing up" && <SubmitButton label="Sign Up" />}
+          {mode === "signing in" && <SubmitButton label="Sign In" />}
+          {mode === "resetting password" && (
+            <SubmitButton label="Reset Password" />
+          )}
+
+          <div className="text-center text-sm text-gray-500">
+            {mode === "signing up" && (
+              <Text>
+                Already have an account?{" "}
+                <Button
+                  variant="ghost"
+                  size="sm"
+                  onClick={() => onModeChange("signing in")}
+                  className="underline p-0 h-auto hover:bg-transparent"
+                >
+                  Sign in
+                </Button>
+              </Text>
+            )}
+            {mode === "signing in" && (
+              <div className="flex flex-col gap-2">
+                <Text>
+                  Forgot your password?{" "}
+                  <Button
+                    variant="ghost"
+                    size="sm"
+                    onClick={() => onModeChange("resetting password")}
+                    className="underline p-0 h-auto hover:bg-transparent"
+                  >
+                    Reset password.
+                  </Button>
+                </Text>
+                <div className="relative">
+                  <div className="absolute inset-0 flex items-center">
+                    <div className="w-full border-t border-gray-300"></div>
+                  </div>
+                  <div className="relative flex justify-center text-sm">
+                    <span className="px-2 bg-white text-gray-500">or</span>
+                  </div>
+                </div>
+                <Text>
+                  Don&apos;t have an account?{" "}
+                  <Button
+                    variant="ghost"
+                    size="sm"
+                    onClick={() => onModeChange("signing up")}
+                    className="underline p-0 h-auto hover:bg-transparent"
+                  >
+                    Sign up
+                  </Button>
+                </Text>
+              </div>
+            )}
+            {mode === "resetting password" && (
+              <div className="flex flex-col gap-2">
+                <Text>
+                  Don&apos;t have an account?{" "}
+                  <Button
+                    variant="ghost"
+                    size="sm"
+                    onClick={() => onModeChange("signing up")}
+                    className="underline p-0 h-auto hover:bg-transparent"
+                  >
+                    Sign up
+                  </Button>
+                </Text>
+                <div className="relative">
+                  <div className="absolute inset-0 flex items-center">
+                    <div className="w-full border-t border-gray-300"></div>
+                  </div>
+                  <div className="relative flex justify-center text-sm">
+                    <span className="px-2 bg-white text-gray-500">or</span>
+                  </div>
+                </div>
+                <Text>
+                  Remembered your password?
+                  <Button
+                    variant="ghost"
+                    size="sm"
+                    onClick={() => onModeChange("signing in")}
+                    className="underline p-0 h-auto hover:bg-transparent"
+                  >
+                    Sign In
+                  </Button>
+                </Text>
+              </div>
+            )}
+          </div>
+        </div>
+
+        {mode !== "resetting password" && onGoogleSignIn && (
+          <div className="text-center mt-4">
+            <Button
+              variant="secondary"
+              onClick={onGoogleSignIn}
+              type="button"
+              className="w-full flex items-center justify-center gap-2"
+            >
+              <Icon name="google" stroke="none" />
+              {mode === "signing up" && <span>Sign up with Google</span>}
+              {mode === "signing in" && <span>Sign in with Google</span>}
+            </Button>
+          </div>
+        )}
+      </form>
+    </div>
+  );
+}

package/src/ui/BasePanel.stories.tsx

@@ -0,0 +1,36 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { BasePanel } from "./BasePanel";
+import { Text as UIText } from "./Typography";
+
+const meta = {
+  title: "UI/BasePanel",
+  component: BasePanel,
+  parameters: {
+    layout: "centered",
+  },
+  decorators: [
+    (Story) => (
+      <div className="w-[450px] border border-gray-200 rounded-lg shadow-sm bg-white overflow-hidden p-4">
+        <Story />
+      </div>
+    ),
+  ],
+  tags: ["autodocs"],
+} satisfies Meta<typeof BasePanel>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    title: "Example Panel",
+    children: (
+      <UIText
+        variant="small"
+        className="p-4 bg-gray-50 rounded-md border border-gray-100 text-black text-center"
+      >
+        Panel content goes here.
+      </UIText>
+    ),
+  },
+};

package/src/ui/BasePanel.tsx

@@ -0,0 +1,59 @@
+import { ReactNode } from "react";
+import { Heading, Button, Icon } from "./";
+
+export interface BasePanelProps {
+  title: string;
+  children: ReactNode;
+  onClose?: () => void;
+  className?: string;
+  headerClassName?: string;
+  headingLevel?: 1 | 2 | 3 | 4 | 5 | 6;
+  setPanel: (panel: string) => void;
+}
+
+export function BasePanel({
+  title,
+  children,
+  onClose,
+  className = "",
+  headerClassName = "",
+  headingLevel = 2,
+  setPanel = (panel: string) => { }
+}: BasePanelProps) {
+
+  const handleClose = () => {
+    if (onClose) {
+      onClose();
+    } else {
+      setPanel("None");
+    }
+  };
+
+  return (
+    <div className={`space-y-1 p-1 ${className}`}>
+      <div
+        className={`flex items-center justify-between px-1 mb-1 border-b border-solid border-gray-400 pb-1 ${headerClassName}`}
+      >
+        <Heading level={headingLevel} className="text-lg">
+          {title}
+        </Heading>
+        <Button
+          variant="ghost"
+          size="sm"
+          onClick={handleClose}
+          className="p-1 rounded hover:bg-gray-100 h-auto"
+          aria-label={`Close ${title} Panel`}
+        >
+          <Icon size="md" className="h-5 w-5">
+            <path
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              d="M6 18 18 6M6 6l12 12"
+            />
+          </Icon>
+        </Button>
+      </div>
+      {children}
+    </div>
+  );
+}

package/src/ui/Button.stories.tsx

@@ -0,0 +1,108 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { Button } from "./Button";
+import { Icon } from "./Icon";
+import { Heading } from "./Typography";
+
+const meta: Meta<typeof Button> = {
+  title: "UI/Button",
+  component: Button,
+  parameters: {
+    layout: "centered",
+  },
+  tags: ["autodocs"],
+  argTypes: {
+    variant: {
+      control: "select",
+      options: ["primary", "secondary", "danger", "ghost", "ghostly-danger"],
+    },
+    size: {
+      control: "select",
+      options: ["sm", "md", "lg"],
+    },
+    disabled: { control: "boolean" },
+    isLoading: { control: "boolean" },
+    onClick: { action: "clicked" },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof Button>;
+
+export const Default: Story = {
+  args: {
+    children: "Button",
+    variant: "primary",
+  },
+};
+
+export const Variations: Story = {
+  render: () => (
+    <div className="flex flex-col gap-8">
+      <div className="space-y-4">
+        <Heading level={4} className="text-sm font-medium text-black italic">
+          Variants
+        </Heading>
+        <div className="flex flex-wrap gap-4 items-center">
+          <Button variant="primary">Primary</Button>
+          <Button variant="secondary">Secondary</Button>
+          <Button variant="danger">Danger</Button>
+          <Button variant="ghost">Ghost</Button>
+          <Button variant="ghostly-danger">Ghostly Danger</Button>
+        </div>
+      </div>
+
+      <div className="space-y-4">
+        <Heading level={4} className="text-sm font-medium text-black italic">
+          Sizes
+        </Heading>
+        <div className="flex flex-wrap gap-4 items-end">
+          <Button size="sm">Small</Button>
+          <Button size="md">Medium</Button>
+          <Button size="lg">Large</Button>
+        </div>
+      </div>
+
+      <div className="space-y-4">
+        <Heading level={4} className="text-sm font-medium text-black italic">
+          States
+        </Heading>
+        <div className="flex flex-wrap gap-4 items-center">
+          <Button isLoading>Loading</Button>
+          <Button disabled>Disabled</Button>
+        </div>
+      </div>
+
+      <div className="space-y-4">
+        <Heading level={4} className="text-sm font-medium text-black italic">
+          With Icons
+        </Heading>
+        <div className="flex flex-wrap gap-4 items-center">
+          <Button leftIcon={<Icon name="cloudArrowUp" />}>Upload</Button>
+          <Button variant="secondary" rightIcon={<Icon name="chevronRight" />}>
+            Next
+          </Button>
+        </div>
+      </div>
+
+      <div className="space-y-4">
+        <Heading level={4} className="text-sm font-medium text-black italic">
+          Icon Only
+        </Heading>
+        <div className="flex flex-wrap gap-4 items-center">
+          <Button size="sm">
+            <Icon name="plus" />
+          </Button>
+          <Button size="md">
+            <Icon name="plus" />
+          </Button>
+          <Button size="lg">
+            <Icon name="plus" />
+          </Button>
+          <Button variant="ghost" size="sm" aria-label="Close">
+            <Icon name="close" />
+          </Button>
+        </div>
+      </div>
+    </div>
+  ),
+};

package/src/ui/Button.tsx

@@ -0,0 +1,121 @@
+import { Button as BaseButton } from "@base-ui/react";
+import React from "react";
+import { cn } from "./utils";
+
+export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+  variant?: "primary" | "secondary" | "danger" | "ghost" | "ghostly-danger";
+  size?: "sm" | "md" | "lg";
+  isLoading?: boolean;
+  leftIcon?: React.ReactNode;
+  rightIcon?: React.ReactNode;
+  render?: BaseButton.Props["render"];
+  nativeButton?: boolean;
+  isIconOnly?: boolean;
+}
+
+export const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
+  (
+    {
+      className,
+      variant = "primary",
+      size = "md",
+      isLoading = false,
+      leftIcon,
+      rightIcon,
+      children,
+      disabled,
+      render,
+      nativeButton,
+      isIconOnly,
+      ...props
+    },
+    ref,
+  ) => {
+    const isActuallyIconOnly =
+      isIconOnly || (!children && (!!leftIcon || !!rightIcon));
+
+    const variants = {
+      primary:
+        "bg-primary hover:bg-dark-primary text-gray-900 shadow-sm border border-transparent font-bold disabled:bg-gray-400 disabled:hover:bg-gray-300",
+      secondary:
+        "bg-gray-100 hover:bg-gray-200 text-gray-800 border-gray-200 border font-normal disabled:bg-gray-400 disabled:hover:bg-gray-300",
+      danger:
+        "bg-danger hover:opacity-80 text-gray-900 shadow-sm border border-transparent font-bold disabled:bg-gray-400 disabled:hover:bg-gray-300",
+      ghost:
+        "bg-transparent hover:bg-gray-100 text-gray-700 hover:text-gray-900 font-medium",
+      "ghostly-danger":
+        "bg-transparent hover:bg-danger/10 text-red-700 border border-red-700 font-medium disabled:border-gray-400 disabled:text-gray-400",
+    };
+
+    const sizes = {
+      sm: isActuallyIconOnly ? "p-1 text-xs" : "px-2 py-1 text-xs",
+      md: isActuallyIconOnly ? "p-2 text-sm" : "px-4 py-2 text-sm",
+      lg: isActuallyIconOnly ? "p-3 text-base" : "px-6 py-3 text-base",
+    };
+
+    return (
+      <BaseButton
+        ref={ref}
+        render={render}
+        nativeButton={nativeButton}
+        className={cn(
+          "inline-flex items-center justify-center rounded-md transition-colors focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-2 disabled:cursor-not-allowed cursor-pointer",
+          variants[variant],
+          sizes[size],
+          className,
+        )}
+        disabled={disabled || isLoading}
+        {...props}
+      >
+        {isLoading && (
+          <svg
+            className={cn(
+              "animate-spin h-4 w-4",
+              !isActuallyIconOnly && "mr-2 -ml-1",
+            )}
+            xmlns="http://www.w3.org/2000/svg"
+            fill="none"
+            viewBox="0 0 24 24"
+          >
+            <circle
+              className="opacity-25"
+              cx="12"
+              cy="12"
+              r="10"
+              stroke="currentColor"
+              strokeWidth="4"
+            ></circle>
+            <path
+              className="opacity-75"
+              fill="currentColor"
+              d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+            ></path>
+          </svg>
+        )}
+        {!isLoading && leftIcon && (
+          <span
+            className={cn(
+              "inline-flex items-center justify-center",
+              !isActuallyIconOnly && "mr-2 -ml-1",
+            )}
+          >
+            {leftIcon}
+          </span>
+        )}
+        {children}
+        {!isLoading && rightIcon && (
+          <span
+            className={cn(
+              "inline-flex items-center justify-center",
+              !isActuallyIconOnly && "ml-2 -mr-1",
+            )}
+          >
+            {rightIcon}
+          </span>
+        )}
+      </BaseButton>
+    );
+  },
+);
+
+Button.displayName = "Button";

package/src/ui/Checkbox.stories.tsx

@@ -0,0 +1,61 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { Checkbox } from "./Checkbox";
+import { Heading } from "./Typography";
+import React from "react";
+
+const meta: Meta<typeof Checkbox> = {
+  title: "UI/Checkbox",
+  component: Checkbox,
+  tags: ["autodocs"],
+};
+
+export default meta;
+type Story = StoryObj<typeof Checkbox>;
+
+const StatefulCheckbox = (
+  props: React.ComponentProps<typeof Checkbox> & { label?: string },
+) => {
+  const [checked, setChecked] = React.useState(props.checked || false);
+  return (
+    <div className="flex items-center space-x-2">
+      <Checkbox
+        {...props}
+        id="terms"
+        checked={checked}
+        onChange={(e) => setChecked(e.target.checked)}
+      />
+      <label
+        htmlFor="terms"
+        className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
+      >
+        {props.label || "Accept terms and conditions"}
+      </label>
+    </div>
+  );
+};
+
+export const Default: Story = {
+  render: () => <StatefulCheckbox />,
+};
+
+export const Variations: Story = {
+  render: () => (
+    <div className="flex flex-col gap-8 p-4">
+      <div className="space-y-4">
+        <Heading level={4} className="text-sm font-medium text-black uppercase">
+          States
+        </Heading>
+        <div className="flex flex-col gap-4">
+          <StatefulCheckbox label="Default Unchecked" />
+          <StatefulCheckbox label="Default Checked" checked={true} />
+          <StatefulCheckbox label="Disabled Unchecked" disabled={true} />
+          <StatefulCheckbox
+            label="Disabled Checked"
+            disabled={true}
+            checked={true}
+          />
+        </div>
+      </div>
+    </div>
+  ),
+};

package/src/ui/Checkbox.tsx

@@ -0,0 +1,45 @@
+import { Checkbox as BaseCheckbox } from "@base-ui/react";
+import React, { ComponentPropsWithoutRef } from "react";
+import { cn } from "./utils";
+import { Icon } from "./Icon";
+
+export type CheckboxProps = React.InputHTMLAttributes<HTMLInputElement>;
+
+export const Checkbox = React.forwardRef<HTMLButtonElement, CheckboxProps>(
+  ({ className, id, checked, onChange, ...props }, ref) => {
+    return (
+      <BaseCheckbox.Root
+        ref={ref}
+        id={id}
+        checked={checked}
+        onCheckedChange={(val) => {
+          if (onChange) {
+            // Mocking a change event since Base UI uses onCheckedChange
+            onChange({
+              target: { checked: val === true },
+            } as React.ChangeEvent<HTMLInputElement>);
+          }
+        }}
+        className={cn(
+          "flex h-5 w-5 shrink-0 items-center justify-center rounded border border-gray-300 bg-white shadow-sm transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
+          "hover:border-primary hover:bg-primary/5",
+          "data-[state=checked]:bg-primary data-[state=checked]:border-primary data-[state=checked]:text-white",
+          className,
+        )}
+        {...(props as ComponentPropsWithoutRef<typeof BaseCheckbox.Root>)}
+      >
+        <BaseCheckbox.Indicator>
+          <Icon size="sm" strokeWidth={3} className="text-dark-primary">
+            <path
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              d="m4.5 12.75 6 6 9-13.5"
+            />
+          </Icon>
+        </BaseCheckbox.Indicator>
+      </BaseCheckbox.Root>
+    );
+  },
+);
+
+Checkbox.displayName = "Checkbox";