@peerbots/core 0.1.0

package/src/charts/DistributionHistogram.tsx

@@ -0,0 +1,193 @@
+import {
+  VictoryChart,
+  VictoryAxis,
+  VictoryLabel,
+  VictoryLine,
+  VictoryHistogram,
+  VictoryTooltip,
+  VictoryVoronoiContainer,
+} from "victory";
+
+export interface DistributionHistogramData {
+  x: number;
+  text: string;
+}
+
+export interface DistributionHistogramProps {
+  data: DistributionHistogramData[];
+  alt: string;
+  label: string;
+  average?: number;
+  referenceLineValue?: number;
+  referenceLineLabel?: string;
+  chartWidth?: number;
+  chartHeight?: number;
+}
+
+export function DistributionHistogram({
+  data,
+  alt,
+  label,
+  average,
+  referenceLineValue,
+  referenceLineLabel = "Reference",
+  chartWidth = 600,
+  chartHeight = 400,
+}: DistributionHistogramProps) {
+  if (data.length === 0) return null;
+
+  const binSize = 10;
+  const maxLength = Math.max(
+    ...data.map((r) => r.x),
+    referenceLineValue ?? 0,
+    binSize,
+  );
+  const maxX = Math.ceil(maxLength / binSize) * binSize + binSize;
+
+  const boundaries = [];
+  for (let i = 0; i <= maxX; i += binSize) {
+    boundaries.push(i);
+  }
+
+  const padding = { left: 60, right: 30, top: 20, bottom: 70 };
+
+  return (
+    <div className="mb-6" role="img" aria-label={alt}>
+      <label className="text-xs uppercase font-bold text-gray-400 block mb-2 px-1">
+        {label}
+      </label>
+      <VictoryChart
+        width={chartWidth}
+        height={chartHeight}
+        padding={padding}
+        containerComponent={<VictoryVoronoiContainer />}
+      >
+        <VictoryAxis
+          label="Length"
+          tickValues={boundaries}
+          tickFormat={(x: number | string) =>
+            typeof x === "number" ? Math.round(x) : x
+          }
+          style={{
+            axis: { stroke: "#cbd5e1" },
+            axisLabel: {
+              fontSize: 18,
+              padding: 45,
+              fill: "#334155",
+              fontWeight: "bold",
+            },
+            tickLabels: {
+              fontSize: 18,
+              padding: 5,
+              fill: "#334155",
+              angle: 45,
+              textAnchor: "start",
+            },
+          }}
+        />
+        <VictoryAxis
+          dependentAxis
+          label="Count"
+          tickFormat={(x: number | string) =>
+            typeof x === "number" ? Math.round(x) : x
+          }
+          style={{
+            axis: { stroke: "#cbd5e1" },
+            axisLabel: {
+              fontSize: 18,
+              padding: 40,
+              fill: "#334155",
+              fontWeight: "bold",
+            },
+            tickLabels: {
+              fontSize: 18,
+              padding: 5,
+              fill: "#334155",
+            },
+            grid: { stroke: "#f1f5f9" },
+          }}
+        />
+        <VictoryHistogram
+          data={data}
+          bins={boundaries}
+          x="x"
+          labels={({
+            datum,
+          }: {
+            datum?: {
+              y: number;
+              binnedData?: { text: string }[];
+            };
+          }) => {
+            if (!datum || datum.y === 0 || !datum.binnedData) return "";
+            const items = datum.binnedData.map((d: { text: string }) => d.text);
+            const displayItems = items.slice(0, 5);
+            let labelText = displayItems.join("\n");
+            if (items.length > 5)
+              labelText += `\n...and ${items.length - 5} more`;
+            return labelText;
+          }}
+          labelComponent={
+            <VictoryTooltip
+              style={{ fontSize: 18 }}
+              flyoutStyle={{ fill: "white", stroke: "#cbd5e1" }}
+              pointerLength={5}
+              cornerRadius={2}
+              constrainToVisibleArea
+            />
+          }
+          style={{
+            data: {
+              fill: "#46d9d9",
+              stroke: "#fff",
+              strokeWidth: 1,
+              cursor: "pointer",
+            },
+          }}
+        />
+        {average !== undefined && (
+          <VictoryLine
+            x={() => average}
+            style={{
+              data: {
+                stroke: "#9ca3af",
+                strokeWidth: 2,
+                strokeDasharray: "4, 4",
+              },
+            }}
+            labels={["Average"]}
+            labelComponent={
+              <VictoryLabel
+                y={45}
+                style={{ fill: "#475569", fontSize: 18, fontWeight: "bold" }}
+                backgroundStyle={{ fill: "white" }}
+                backgroundPadding={12}
+              />
+            }
+          />
+        )}
+        {referenceLineValue !== undefined && (
+          <VictoryLine
+            x={() => referenceLineValue}
+            labels={[referenceLineLabel]}
+            labelComponent={
+              <VictoryLabel
+                y={45}
+                style={{ fill: "#ef4444", fontSize: 18, fontWeight: "bold" }}
+                backgroundStyle={{ fill: "white" }}
+                backgroundPadding={12}
+              />
+            }
+            style={{
+              data: {
+                stroke: "#ef4444",
+                strokeWidth: 2,
+                strokeDasharray: "4, 4",
+              },
+            }}
+          />
+        )}
+      </VictoryChart>
+    </div>
+  );
+}

package/src/charts/index.ts

@@ -0,0 +1,10 @@
+export { DistributionBarChart } from "./DistributionBarChart";
+export type {
+  DistributionBarChartProps,
+  DistributionBarData,
+} from "./DistributionBarChart";
+export { DistributionHistogram } from "./DistributionHistogram";
+export type {
+  DistributionHistogramProps,
+  DistributionHistogramData,
+} from "./DistributionHistogram";

package/src/global.d.ts

@@ -0,0 +1 @@
+declare module "*.css" {}

package/src/helpers/SEO.tsx

@@ -0,0 +1,41 @@
+interface SEOProps {
+  title: string;
+  description?: string;
+  image?: string;
+  url?: string;
+  type?: string;
+}
+
+export function SEO({
+  title,
+  description = "Peerbots platform: social robots for everyone, powered by experts.",
+  image = "/peerbots-logo.png", // Default image if one exists, customizable
+  url,
+  type = "website",
+}: SEOProps) {
+  const siteTitle = "Peerbots App";
+  const fullTitle = title === "Home" ? siteTitle : `${title} | ${siteTitle}`;
+  const currentUrl =
+    url || (typeof window !== "undefined" ? window.location.href : "");
+
+  return (
+    <>
+      <title>{fullTitle}</title>
+      <meta name="description" content={description} />
+
+      {/* Open Graph */}
+      <meta property="og:title" content={fullTitle} />
+      <meta property="og:description" content={description} />
+      <meta property="og:image" content={image} />
+      <meta property="og:url" content={currentUrl} />
+      <meta property="og:type" content={type} />
+      <meta property="og:site_name" content={siteTitle} />
+
+      {/* Twitter Card */}
+      <meta name="twitter:card" content="summary_large_image" />
+      <meta name="twitter:title" content={fullTitle} />
+      <meta name="twitter:description" content={description} />
+      <meta name="twitter:image" content={image} />
+    </>
+  );
+}

package/src/index.ts

@@ -0,0 +1,6 @@
+// src/index.ts
+import "./styles/theme.css"; // Ensure CSS is bundled
+
+export * from "./ui";
+export * from "./helpers/SEO";
+export * from "./charts";

package/src/styles/theme.css

@@ -0,0 +1,60 @@
+@import "tailwindcss";
+
+@theme {
+    --color-primary: #46d9d9;
+    /* --color-old-dark-primary: #5fc7cc; */
+    --color-dark-primary: var(--color-teal-700);
+    --color-secondary: #e86e8a;
+    --color-accent: #d9e021;
+    --color-accent-hc: #c4cc24;
+    --color-accent-two: #4273ff;
+    --color-accent-two-hc: #516eb5;
+    --color-accent-three: #3f8588;
+    --color-danger: #e86e8a;
+    --color-light-bg: #d8e7eb;
+    --sidebar-bg: #f9ffff;
+
+    --background-image-gradient-radial: radial-gradient(var(--tw-gradient-stops));
+    --background-image-gradient-conic: conic-gradient(from 180deg at 50% 50%,
+            var(--tw-gradient-stops));
+
+    --font-sans: "Avenir", "Nunito", sans-serif;
+}
+
+@utility input-base {
+    @apply bg-primary/10 border border-b-2 border-gray-300 focus:border-gray-600 py-2 px-2;
+}
+
+@utility btn-primary {
+    @apply bg-primary hover:bg-dark-primary text-gray-900 font-bold py-1 px-2 my-1 mx-2 rounded-md disabled:bg-gray-400 disabled:hover:bg-gray-300 disabled:cursor-not-allowed cursor-pointer;
+}
+
+@utility btn-secondary {
+    @apply bg-gray-100 hover:bg-gray-200 text-gray-800 font-normal py-1 px-2 my-1 mx-2 rounded-md disabled:bg-gray-400 disabled:hover:bg-gray-300 disabled:cursor-not-allowed cursor-pointer;
+}
+
+@utility btn-danger {
+    @apply bg-danger hover:opacity-80 text-gray-900 font-bold py-1 px-2 my-1 mx-2 rounded-md disabled:bg-gray-400 disabled:hover:bg-gray-300 disabled:cursor-not-allowed cursor-pointer;
+}
+
+@utility range-primary {
+    @apply accent-primary bg-gray-100 rounded-md cursor-pointer;
+}
+
+.range-vertical {
+    writing-mode: vertical-lr;
+}
+
+.tooltip,
+.tooltip-slow {
+    @apply absolute invisible opacity-0;
+}
+
+/* Using siblings so that hovering over the invisible tooltip doesn't trigger the tooltip */
+.has-tooltip:hover+.tooltip {
+    @apply visible opacity-100 z-50 transition-opacity delay-300 ease-in-out;
+}
+
+.has-tooltip:hover+.tooltip-slow {
+    @apply visible opacity-100 z-50 transition-opacity delay-1000 ease-in-out;
+}

package/src/ui/Alert.stories.tsx

@@ -0,0 +1,41 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { Alert } from "./Alert";
+import React from "react";
+
+const meta: Meta<typeof Alert> = {
+  title: "UI/Alert",
+  component: Alert,
+  parameters: {
+    layout: "centered",
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof Alert>;
+
+export const Default: Story = {
+  args: {
+    level: "Info",
+    message: "This is a simple informational alert.",
+  },
+};
+
+export const Variations: Story = {
+  render: () => (
+    <div className="flex flex-col gap-4 w-[600px] bg-gray-100 p-8">
+      <Alert
+        level="Error"
+        message="Critical connection failure!"
+        action={{ name: "Retry", callback: () => alert("Retrying...") }}
+      />
+      <Alert level="Warning" message="Your session is about to expire." />
+      <Alert level="Success" message="Settings saved successfully." />
+      <Alert
+        level="Info"
+        message="New firmware update available."
+        action={{ name: "View", callback: () => alert("Viewing update...") }}
+      />
+    </div>
+  ),
+};

package/src/ui/Alert.tsx

@@ -0,0 +1,72 @@
+import { useState } from "react";
+import { Button, Icon } from ".";
+
+export type AlertLevel = "Error" | "Warning" | "Success" | "Info";
+
+export interface AlertAction {
+  name: string;
+  callback: () => void;
+}
+
+export interface AlertUIProps {
+  level: AlertLevel;
+  message: React.ReactNode;
+  action?: AlertAction;
+}
+
+export function Alert({ level, message, action }: AlertUIProps) {
+  const [showAlert, setShowAlert] = useState(true);
+
+  return (
+    <div
+      className={
+        "flex w-full p-4 m-1 text-sm rounded-lg bg-white border border-solid transition-opacity ease-in-out delay-150 duration-300 " +
+        (showAlert ? " " : " hidden")
+      }
+    >
+      <span>
+        {level === "Error" && (
+          <Icon
+            name="exclamationCircle"
+            size="lg"
+            className="m-2"
+            stroke="red"
+          />
+        )}
+        {level === "Warning" && (
+          <Icon
+            name="exclamationTriangle"
+            size="lg"
+            className="m-2"
+            stroke="yellow"
+          />
+        )}
+        {level === "Success" && (
+          <Icon name="checkCircle" size="lg" className="m-2" stroke="green" />
+        )}
+        {level === "Info" && (
+          <Icon name="megaphone" size="lg" className="m-2" />
+        )}
+      </span>
+      <span className="flex flex-1 ml-2">{message}</span>
+      {action && (
+        <Button
+          onClick={() => {
+            action.callback();
+            setShowAlert(false);
+          }}
+        >
+          {action.name}
+        </Button>
+      )}
+      <span
+        className="cursor-pointer"
+        onClick={() => {
+          setShowAlert(false);
+        }}
+      >
+        <Icon name="xCircle" size="lg" className="m-1" />
+      </span>
+    </div>
+  );
+}

package/src/ui/Anchor.stories.tsx

@@ -0,0 +1,25 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { Anchor } from "./Anchor";
+
+const meta = {
+  title: "UI/Anchor",
+  component: Anchor,
+  parameters: {
+    layout: "centered",
+  },
+  tags: ["autodocs"],
+  argTypes: {
+    href: { control: "text" },
+    children: { control: "text" },
+  },
+} satisfies Meta<typeof Anchor>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    href: "https://peerbots.org",
+    children: "Visit Peerbots",
+  },
+};

package/src/ui/Anchor.tsx

@@ -0,0 +1,32 @@
+import * as React from "react";
+import { Link } from "react-router-dom";
+import { cn } from "./utils";
+
+export type AnchorProps = React.AnchorHTMLAttributes<HTMLAnchorElement>;
+
+const Anchor = React.forwardRef<HTMLAnchorElement, AnchorProps>(
+  ({ className, href, target, ...props }, ref) => {
+    const isInternal = href && !href.startsWith("http") && !target;
+    const commonClass = cn(
+      "font-medium text-teal-700 underline underline-offset-4 hover:text-teal-900 cursor-pointer",
+      className,
+    );
+
+    if (isInternal) {
+      return <Link to={href} ref={ref} className={commonClass} {...props} />;
+    } else {
+      return (
+        <a
+          href={href}
+          target={target}
+          ref={ref}
+          className={commonClass}
+          {...props}
+        />
+      );
+    }
+  },
+);
+Anchor.displayName = "Anchor";
+
+export { Anchor };

package/src/ui/AuthFormUI.stories.tsx

@@ -0,0 +1,67 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { AuthFormUI } from "./AuthFormUI";
+import { useState } from "react";
+
+const meta: Meta<typeof AuthFormUI> = {
+  title: "UI/AuthFormUI",
+  component: AuthFormUI,
+  parameters: {
+    layout: "centered",
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof AuthFormUI>;
+
+export const Default: Story = {
+  render: function Render() {
+    const [mode, setMode] = useState<
+      "signing up" | "signing in" | "resetting password"
+    >("signing in");
+    return (
+      <div className="w-[400px]">
+        <AuthFormUI
+          mode={mode}
+          onModeChange={setMode}
+          formAction={async () => {
+            await new Promise((resolve) => setTimeout(resolve, 1000));
+          }}
+          actionState={{ error: "", message: "" }}
+          onGoogleSignIn={() => alert("Google Sign In clicked")}
+          description="Sign in to simplify connecting to robots, and synchronize your work across devices."
+        />
+      </div>
+    );
+  },
+};
+
+export const Variations: Story = {
+  render: () => {
+    return (
+      <div className="flex flex-col gap-10 w-[400px]">
+        <AuthFormUI
+          mode="signing up"
+          onModeChange={() => {}}
+          formAction={async () => {}}
+          actionState={{ error: "", message: "" }}
+          onGoogleSignIn={() => {}}
+          description="Sign up description"
+        />
+        <AuthFormUI
+          mode="resetting password"
+          onModeChange={() => {}}
+          formAction={async () => {}}
+          actionState={{ error: "", message: "Email sent!" }}
+        />
+        <AuthFormUI
+          mode="signing in"
+          onModeChange={() => {}}
+          formAction={async () => {}}
+          actionState={{ error: "Invalid email or password", message: "" }}
+          description="Sign in description"
+        />
+      </div>
+    );
+  },
+};