@peerbots/core 0.2.6 → 1.0.0

package/src/ui/foundations/SocialLinks.tsx

@@ -0,0 +1,117 @@
+import React from "react";
+import { cn } from "../utils";
+import { Icon, IconName } from "./Icon";
+
+export interface SocialLinkItem {
+  name: string;
+  url: string;
+  ariaLabel?: string;
+  icon?: IconName;
+}
+
+export const DEFAULT_PEERBOTS_SOCIAL_LINKS: SocialLinkItem[] = [
+  {
+    name: "Facebook",
+    url: "https://www.facebook.com/peerbots",
+    ariaLabel: "Peerbots on Facebook",
+    icon: "facebook",
+  },
+  {
+    name: "Instagram",
+    url: "https://www.instagram.com/peerbots",
+    ariaLabel: "Peerbots on Instagram",
+    icon: "instagram",
+  },
+  {
+    name: "LinkedIn",
+    url: "https://www.linkedin.com/company/peerbots",
+    ariaLabel: "Peerbots on LinkedIn",
+    icon: "linkedin",
+  },
+  {
+    name: "Twitter",
+    url: "https://twitter.com/peerbots",
+    ariaLabel: "Peerbots on Twitter / X",
+    icon: "twitter",
+  },
+  {
+    name: "YouTube",
+    url: "https://www.youtube.com/@peerbots",
+    ariaLabel: "Peerbots on YouTube",
+    icon: "youtube",
+  },
+  {
+    name: "BlueSky",
+    url: "https://bsky.app/profile/peerbots.bsky.social",
+    ariaLabel: "Peerbots on BlueSky",
+    icon: "bluesky",
+  },
+  {
+    name: "GitHub",
+    url: "https://github.com/peerbots",
+    ariaLabel: "Peerbots on GitHub",
+    icon: "github",
+  },
+];
+
+export interface SocialLinksProps {
+  className?: string;
+  links?: SocialLinkItem[];
+  size?: "sm" | "md" | "lg";
+  variant?: "default" | "white" | "teal" | "dark" | "muted";
+}
+
+export const SocialLinks: React.FC<SocialLinksProps> = ({
+  className,
+  links = DEFAULT_PEERBOTS_SOCIAL_LINKS,
+  size = "md",
+  variant = "default",
+}) => {
+  const sizeClasses = {
+    sm: "pb:w-4 pb:h-4",
+    md: "pb:w-5 pb:h-5",
+    lg: "pb:w-6 pb:h-6",
+  }[size];
+
+  const variantClasses = {
+    default:
+      "pb:text-gray-500 pb:hover:text-peerbots-darkteal pb:hover:bg-peerbots-teal/10",
+    white: "pb:text-white/80 pb:hover:text-white pb:hover:bg-white/10",
+    teal: "pb:text-peerbots-teal pb:hover:text-peerbots-darkteal pb:hover:bg-peerbots-teal/15",
+    dark: "pb:text-gray-900 pb:hover:text-peerbots-teal pb:hover:bg-gray-100",
+    muted: "pb:text-gray-400 pb:hover:text-gray-700 pb:hover:bg-gray-100",
+  }[variant];
+
+  const buttonSizeClasses = {
+    sm: "pb:p-1.5 pb:rounded-lg",
+    md: "pb:p-2 pb:rounded-xl",
+    lg: "pb:p-2.5 pb:rounded-2xl",
+  }[size];
+
+  return (
+    <div className={cn("pb:flex pb:flex-wrap pb:items-center pb:gap-1.5", className)}>
+      {links.map((link) => {
+        const iconName = (link.icon ||
+          link.name.toLowerCase().replace(/[^a-z0-9]/g, "")) as IconName;
+
+        return (
+          <a
+            key={link.name}
+            href={link.url}
+            target="_blank"
+            rel="noopener noreferrer"
+            className={cn(
+              "pb:inline-flex pb:items-center pb:justify-center pb:transition-all pb:duration-200 pb:cursor-pointer",
+              variantClasses,
+              buttonSizeClasses,
+            )}
+            aria-label={link.ariaLabel || `Visit Peerbots on ${link.name}`}
+            title={link.name}
+          >
+            <Icon name={iconName} className={sizeClasses} />
+          </a>
+        );
+      })}
+    </div>
+  );
+};

package/src/ui/foundations/Typography.stories.tsx

@@ -0,0 +1,58 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { Heading, Text } from "./Typography";
+import React from "react";
+
+const meta: Meta = {
+  title: "Foundations/Typography",
+  tags: ["autodocs"],
+};
+
+export default meta;
+
+export const Variations: StoryObj = {
+  render: () => (
+    <div className="pb:flex pb:flex-col pb:gap-8 pb:p-6 pb:bg-white pb:max-w-4xl">
+      <div>
+        <span className="pb:text-xs pb:font-bold pb:text-gray-700 pb:uppercase pb:tracking-wider pb:block pb:mb-3">
+          Heading Scale & Semantic Tags
+        </span>
+        <div className="pb:space-y-3">
+          <Heading level={1}>Heading 1 (Hero Title)</Heading>
+          <Heading level={2}>Heading 2 (Section Title)</Heading>
+          <Heading level={3}>Heading 3 (Card Title)</Heading>
+          <Heading level={4}>Heading 4 (Panel Title)</Heading>
+          <Heading level={5}>Heading 5 (Subsection)</Heading>
+          <Heading level={6}>Heading 6 (Micro Title)</Heading>
+        </div>
+      </div>
+
+      <div>
+        <span className="pb:text-xs pb:font-bold pb:text-gray-700 pb:uppercase pb:tracking-wider pb:block pb:mb-3">
+          Heading Brand Colors & Gradient
+        </span>
+        <div className="pb:space-y-3">
+          <Heading level={2} color="teal">Teal Brand Heading</Heading>
+          <Heading level={2} color="pink">Pink Brand Heading</Heading>
+          <Heading level={2} color="darkblue">Dark Blue Primary Heading</Heading>
+          <Heading level={2} color="gradient">Peerbots Hero Gradient Heading</Heading>
+        </div>
+      </div>
+
+      <div>
+        <span className="pb:text-xs pb:font-bold pb:text-gray-700 pb:uppercase pb:tracking-wider pb:block pb:mb-3">
+          Text Scale & Composable Colors
+        </span>
+        <div className="pb:space-y-3">
+          <Text size="lead">Lead paragraph text for introductory overview sections.</Text>
+          <Text size="md">Body regular text (md scale, dark slate color for high readability).</Text>
+          <Text size="sm" color="muted">Muted caption text (sm scale, subtle gray color).</Text>
+          <Text size="xs" color="muted">Extra small microcopy / metadata.</Text>
+          <Text size="md" color="teal" weight="bold">Teal bold callout message.</Text>
+          <Text size="md" color="pink" weight="semibold">Pink accent notice message.</Text>
+          <Text size="sm" color="error">Error validation message.</Text>
+          <Text size="sm" color="success">Success confirmation message.</Text>
+        </div>
+      </div>
+    </div>
+  ),
+};

package/src/ui/foundations/Typography.tsx

@@ -0,0 +1,163 @@
+import React from "react";
+import { cn } from "../utils";
+import { BrandColor, ComponentColor, ComponentSize } from "../types";
+
+const headingSizes: Record<number, string> = {
+  1: "pb:text-4xl sm:pb:text-5xl pb:font-bold pb:leading-tight",
+  2: "pb:text-3xl sm:pb:text-4xl pb:font-bold pb:leading-snug",
+  3: "pb:text-2xl sm:pb:text-3xl pb:font-bold pb:leading-snug",
+  4: "pb:text-xl sm:pb:text-2xl pb:font-bold pb:leading-snug",
+  5: "pb:text-lg sm:pb:text-xl pb:font-bold",
+  6: "pb:text-base sm:pb:text-lg pb:font-bold",
+};
+
+const headingColorClasses: Record<string, string> = {
+  default: "",
+  teal: "pb:text-peerbots-darkteal",
+  pink: "pb:text-rose-800",
+  primary: "pb:text-dark-primary",
+  darkteal: "pb:text-peerbots-darkteal",
+  darkblue: "pb:text-peerbots-darkblue",
+  olive: "pb:text-[#636814]",
+  dark: "pb:text-peerbots-dark",
+  white: "pb:text-white",
+  gradient:
+    "pb:bg-clip-text pb:text-transparent pb:bg-gradient-to-r pb:from-peerbots-teal pb:via-peerbots-pink pb:to-peerbots-darkblue",
+};
+
+const textColorClasses: Record<string, string> = {
+  default: "pb:text-slate-950",
+  neutral: "pb:text-gray-800",
+  muted: "pb:text-gray-600",
+  error: "pb:text-red-700 pb:font-medium",
+  success: "pb:text-emerald-800 pb:font-medium",
+  teal: "pb:text-peerbots-darkteal",
+  pink: "pb:text-rose-800",
+  primary: "pb:text-dark-primary",
+  darkteal: "pb:text-peerbots-darkteal",
+  darkblue: "pb:text-peerbots-darkblue",
+  olive: "pb:text-[#636814]",
+  dark: "pb:text-peerbots-dark",
+  white: "pb:text-white",
+};
+
+const textSizeClasses: Record<string, string> = {
+  xs: "pb:text-xs pb:leading-normal",
+  sm: "pb:text-sm pb:leading-relaxed",
+  md: "pb:text-base pb:leading-relaxed",
+  lg: "pb:text-lg pb:leading-relaxed",
+  xl: "pb:text-xl pb:leading-relaxed",
+  lead: "pb:text-lg sm:pb:text-xl pb:leading-relaxed pb:text-slate-700",
+};
+
+const weightClasses = {
+  normal: "pb:font-normal",
+  medium: "pb:font-medium",
+  semibold: "pb:font-semibold",
+  bold: "pb:font-bold",
+};
+
+export interface HeadingProps extends React.HTMLAttributes<HTMLHeadingElement> {
+  /** Semantic HTML heading level (h1 - h6) */
+  level?: 1 | 2 | 3 | 4 | 5 | 6;
+  /** Visual heading scale override (defaults to level) */
+  size?: 1 | 2 | 3 | 4 | 5 | 6;
+  /** Palette color or gradient text fill */
+  color?: BrandColor | "gradient" | "default";
+  /** Legacy variant prop (alias for color) */
+  variant?: BrandColor | "gradient" | "default";
+  /** Font weight */
+  weight?: "normal" | "medium" | "semibold" | "bold";
+  children?: React.ReactNode;
+}
+
+export const Heading = ({
+  level = 1,
+  size,
+  color,
+  variant,
+  weight,
+  className,
+  children,
+  ...props
+}: HeadingProps) => {
+  const visualScale = size !== undefined ? size : level;
+  const resolvedColor = color || variant || "default";
+
+  return React.createElement(
+    `h${level}`,
+    {
+      className: cn(
+        headingSizes[visualScale],
+        headingColorClasses[resolvedColor] || "",
+        weight && weightClasses[weight],
+        className,
+      ),
+      ...props,
+    },
+    children,
+  );
+};
+
+export interface TextProps extends React.HTMLAttributes<HTMLElement> {
+  /** HTML rendering tag */
+  as?: React.ElementType;
+  /** Typography scale */
+  size?: ComponentSize | "lead";
+  /** Text color / intent */
+  color?: ComponentColor | "muted" | "error" | "success" | "default";
+  /** Legacy variant prop for convenience / backward compatibility */
+  variant?: "default" | "muted" | "small" | "large" | "lead" | "error" | "success";
+  /** Font weight */
+  weight?: "normal" | "medium" | "semibold" | "bold";
+  /** Text alignment */
+  align?: "left" | "center" | "right";
+  children?: React.ReactNode;
+}
+
+export const Text = ({
+  as: Component = "p",
+  size,
+  color,
+  variant,
+  weight,
+  align,
+  className,
+  children,
+  ...props
+}: TextProps) => {
+  const resolvedSize =
+    size ||
+    (variant === "small"
+      ? "sm"
+      : variant === "large"
+        ? "lg"
+        : variant === "lead"
+          ? "lead"
+          : "md");
+
+  const resolvedColor =
+    color ||
+    (variant === "muted"
+      ? "muted"
+      : variant === "error"
+        ? "error"
+        : variant === "success"
+          ? "success"
+          : "default");
+
+  return React.createElement(
+    Component,
+    {
+      className: cn(
+        textSizeClasses[resolvedSize] || textSizeClasses.md,
+        textColorClasses[resolvedColor] || textColorClasses.default,
+        weight && weightClasses[weight],
+        align && `pb:text-${align}`,
+        className,
+      ),
+      ...props,
+    },
+    children,
+  );
+};

package/src/ui/foundations/index.ts

@@ -0,0 +1,6 @@
+export * from "./Typography";
+export * from "./Icon";
+export { iconPaths } from "./IconRegistry";
+export * from "./SocialLinks";
+export * from "./CodeBlock";
+export * from "./Anchor";

package/src/ui/index.ts

@@ -1,28 +1,8 @@
-export * from "./Button";
-export * from "./Input";
-export * from "./Select";
-export * from "./Typography";
-export { iconPaths } from "./IconRegistry";
-export * from "./Icon";
-export * from "./Slider";
-export * from "./SliderWithNumberField";
-export * from "./Tooltip";
+export * from "./types";
 export * from "./utils";
-export * from "./Dialog";
-export * from "./Popover";
-export * from "./Dropdown";
-export * from "./Collapsible";
-export * from "./Switch";
-export * from "./Label";
-export * from "./TabRadio";
-export * from "./NumberField";
-export * from "./Field";
-export * from "./Anchor";
-export * from "./TextArea";
-export * from "./Checkbox";
-export * from "./SettingsPanel";
-export * from "./Separator";
-export * from "./Skeleton";
-export * from "./AuthFormUI";
-export * from "./Alert";
-export * from "./TabSelection";
+export * from "./foundations";
+export * from "./forms";
+export * from "./layout";
+export * from "./media";
+export * from "./feedback";
+export * from "./patterns";

package/src/ui/layout/Accordion.stories.tsx

@@ -0,0 +1,86 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { Accordion } from "./Accordion";
+import { Button } from "../forms/Button";
+import { Input } from "../forms/Input";
+import React from "react";
+
+const meta: Meta<typeof Accordion> = {
+  title: "Layout/Accordion",
+  component: Accordion,
+  parameters: {
+    layout: "centered",
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof Accordion>;
+
+export const Default: Story = {
+  args: {
+    className: "pb:w-[480px]",
+    items: [
+      {
+        question: "What is Peerbots?",
+        answer: "Peerbots is an open-source platform designed to make social robotics accessible to educators, researchers, and therapists.",
+        isOpenDefault: true,
+      },
+      {
+        question: "How do I connect a controller to a robot face?",
+        answer: "You can pair controller and face apps using the same network or Peerbots cloud relay.",
+      },
+      {
+        question: "Is Peerbots open source?",
+        answer: "Yes, Peerbots core packages and tools are open-source under GPL/MIT licenses.",
+      },
+    ],
+    allowMultiple: false,
+  },
+};
+
+export const SingleDisclosure: Story = {
+  render: () => (
+    <div className="pb:w-[480px]">
+      <Accordion title="Advanced Configuration" defaultOpen={true}>
+        <div className="pb:space-y-3 pb:py-2">
+          <Input placeholder="Custom WebSocket URL" />
+          <Button variant="primary" size="sm">Save Config</Button>
+        </div>
+      </Accordion>
+    </div>
+  ),
+};
+
+export const Variants: Story = {
+  render: () => (
+    <div className="pb:w-[540px] pb:space-y-6 pb:p-6 pb:bg-gray-50 pb:rounded-2xl">
+      <div>
+        <h4 className="pb:text-xs pb:font-bold pb:text-gray-500 pb:uppercase pb:mb-2">Default Card</h4>
+        <Accordion
+          items={[
+            { question: "Item 1", answer: "Clean rounded card with shadow." },
+            { question: "Item 2", answer: "Second item." },
+          ]}
+        />
+      </div>
+      <div>
+        <h4 className="pb:text-xs pb:font-bold pb:text-gray-500 pb:uppercase pb:mb-2">Bordered 2px</h4>
+        <Accordion
+          variant="bordered"
+          items={[
+            { question: "Bordered Item 1", answer: "Clear border styling." },
+          ]}
+        />
+      </div>
+      <div>
+        <h4 className="pb:text-xs pb:font-bold pb:text-gray-500 pb:uppercase pb:mb-2">Flat Background</h4>
+        <Accordion
+          variant="flat"
+          items={[
+            { question: "Flat Item 1", answer: "Gray background without border." },
+          ]}
+        />
+      </div>
+    </div>
+  ),
+};

package/src/ui/layout/Accordion.tsx

@@ -0,0 +1,205 @@
+import React, { useState, useId } from "react";
+import { cn } from "../utils";
+import { Icon } from "../foundations/Icon";
+import { Text } from "../foundations/Typography";
+
+export interface AccordionItem {
+  id?: string;
+  question?: React.ReactNode;
+  title?: React.ReactNode;
+  answer?: React.ReactNode;
+  content?: React.ReactNode;
+  description?: React.ReactNode;
+  bodyHtml?: string;
+  isOpenDefault?: boolean;
+}
+
+export interface AccordionProps {
+  /** List of accordion items for multi-item list mode */
+  items?: AccordionItem[];
+  /** Allow multiple items to be opened simultaneously */
+  allowMultiple?: boolean;
+  /** Visual style variant */
+  variant?: "default" | "bordered" | "flat";
+  /** Single-item mode: title for the disclosure */
+  title?: React.ReactNode;
+  /** Single-item mode: content/children for the disclosure */
+  children?: React.ReactNode;
+  /** Single-item mode: default open state */
+  defaultOpen?: boolean;
+  /** Controlled open state for single-item mode */
+  isOpen?: boolean;
+  /** Controlled toggle callback for single-item mode */
+  onToggle?: (open: boolean) => void;
+  className?: string;
+  headerClassName?: string;
+  contentClassName?: string;
+}
+
+export const Accordion: React.FC<AccordionProps> = ({
+  items,
+  allowMultiple = false,
+  variant = "default",
+  title,
+  children,
+  defaultOpen = false,
+  isOpen: controlledIsOpen,
+  onToggle,
+  className,
+  headerClassName,
+  contentClassName,
+}) => {
+  const baseId = useId();
+
+  // Normalize single-item props vs items array
+  const resolvedItems: AccordionItem[] =
+    items ||
+    (title || children
+      ? [
+          {
+            id: "single",
+            title,
+            content: children,
+            isOpenDefault: defaultOpen,
+          },
+        ]
+      : []);
+
+  const [openIndices, setOpenIndices] = useState<number[]>(() => {
+    const initial: number[] = [];
+    resolvedItems.forEach((item, index) => {
+      if (item.isOpenDefault || (index === 0 && defaultOpen)) {
+        initial.push(index);
+      }
+    });
+    return initial;
+  });
+
+  const toggleItem = (index: number) => {
+    const isCurrentlyOpen =
+      controlledIsOpen !== undefined && resolvedItems.length === 1
+        ? controlledIsOpen
+        : openIndices.includes(index);
+    const willBeOpen = !isCurrentlyOpen;
+
+    if (onToggle && resolvedItems.length === 1) {
+      onToggle(willBeOpen);
+    }
+
+    if (controlledIsOpen === undefined) {
+      if (allowMultiple) {
+        setOpenIndices((prev) =>
+          prev.includes(index)
+            ? prev.filter((i) => i !== index)
+            : [...prev, index],
+        );
+      } else {
+        setOpenIndices((prev) => (prev.includes(index) ? [] : [index]));
+      }
+    }
+  };
+
+  return (
+    <div className={cn("pb:w-full pb:space-y-3 pb:box-border", className)}>
+      {resolvedItems.map((item, index) => {
+        const isOpen =
+          controlledIsOpen !== undefined && resolvedItems.length === 1
+            ? controlledIsOpen
+            : openIndices.includes(index);
+
+        const headingContent =
+          item.question || item.title || `Section ${index + 1}`;
+        const bodyContent =
+          item.content || item.answer || item.description;
+
+        const headerId = `${baseId}-header-${index}`;
+        const panelId = `${baseId}-panel-${index}`;
+
+        return (
+          <div
+            key={item.id || index}
+            className={cn(
+              "pb:w-full pb:rounded-2xl pb:border pb:transition-all pb:duration-300 pb:overflow-hidden pb:box-border",
+              isOpen
+                ? "pb:bg-white pb:border-peerbots-teal/40 pb:shadow-xs"
+                : "pb:bg-white/80 pb:hover:bg-white pb:border-gray-200/80",
+              variant === "bordered" && "pb:border-2",
+              variant === "flat" && "pb:border-none pb:bg-gray-100",
+            )}
+          >
+            <div className="pb:w-full pb:m-0 pb:p-0">
+              <button
+                type="button"
+                id={headerId}
+                aria-expanded={isOpen}
+                aria-controls={panelId}
+                onClick={() => toggleItem(index)}
+                className={cn(
+                  "pb:w-full pb:box-border pb:px-5 pb:py-4 sm:pb:px-6 sm:pb:py-4.5 pb:text-left pb:flex pb:items-center pb:justify-between pb:gap-4 pb:font-bold pb:text-gray-900 pb:hover:text-peerbots-darkteal pb:transition-colors pb:focus:outline-none pb:focus-visible:ring-2 pb:focus-visible:ring-peerbots-teal pb:cursor-pointer",
+                  headerClassName,
+                )}
+              >
+                <div className="pb:text-base sm:pb:text-lg pb:font-bold pb:leading-snug pb:flex-1 pb:min-w-0">
+                  {typeof headingContent === "string" ? (
+                    <span>{headingContent}</span>
+                  ) : (
+                    headingContent
+                  )}
+                </div>
+                <span
+                  className={cn(
+                    "pb:w-7 pb:h-7 pb:rounded-full pb:flex pb:items-center pb:justify-center pb:flex-shrink-0 pb:transition-transform pb:duration-300 pb:ease-in-out",
+                    isOpen
+                      ? "pb:bg-peerbots-teal pb:text-white pb:rotate-180"
+                      : "pb:bg-gray-100 pb:text-gray-600",
+                  )}
+                  aria-hidden="true"
+                >
+                  <Icon
+                    name="chevronDownSmall"
+                    className="pb:w-4 pb:h-4"
+                  />
+                </span>
+              </button>
+            </div>
+
+            {/* Smooth animated expand / collapse container */}
+            <div
+              id={panelId}
+              role="region"
+              aria-labelledby={headerId}
+              className={cn(
+                "pb:grid pb:transition-all pb:duration-300 pb:ease-in-out",
+                isOpen
+                  ? "pb:grid-rows-[1fr] pb:opacity-100"
+                  : "pb:grid-rows-[0fr] pb:opacity-0",
+              )}
+            >
+              <div className="pb:overflow-hidden">
+                <div
+                  className={cn(
+                    "pb:w-full pb:box-border pb:px-5 pb:pb-5 pb:pt-2 sm:pb:px-6 pb:text-gray-700 pb:leading-relaxed pb:border-t pb:border-gray-100",
+                    contentClassName,
+                  )}
+                >
+                  {item.bodyHtml ? (
+                    <div
+                      className="pb:text-base pb:leading-relaxed"
+                      dangerouslySetInnerHTML={{ __html: item.bodyHtml }}
+                    />
+                  ) : typeof bodyContent === "string" ? (
+                    <Text className="pb:text-base pb:text-gray-700 pb:leading-relaxed">
+                      {bodyContent}
+                    </Text>
+                  ) : (
+                    bodyContent
+                  )}
+                </div>
+              </div>
+            </div>
+          </div>
+        );
+      })}
+    </div>
+  );
+};