@peerbots/core 0.1.0

package/src/ui/Typography.tsx

@@ -0,0 +1,80 @@
+import React from "react";
+import { clsx, type ClassValue } from "clsx";
+import { twMerge } from "tailwind-merge";
+
+function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs));
+}
+
+const headingSizes = {
+  1: "text-4xl font-bold",
+  2: "text-3xl font-bold",
+  3: "text-2xl font-bold",
+  4: "text-xl font-bold",
+  5: "text-lg font-bold",
+  6: "text-base font-bold",
+};
+
+const textVariants = {
+  default: "text-base text-slate-950",
+  muted: "text-sm text-slate-600",
+  error: "text-sm text-red-600 font-medium",
+  small: "text-xs text-slate-600",
+};
+
+interface HeadingProps extends React.HTMLAttributes<HTMLHeadingElement> {
+  level?: 1 | 2 | 3 | 4 | 5 | 6;
+  children?: React.ReactNode;
+}
+
+export const Heading = ({
+  level = 1,
+  className,
+  children,
+  ...props
+}: HeadingProps) => {
+  return React.createElement(
+    `h${level}`,
+    { className: cn(headingSizes[level], className), ...props },
+    children,
+  );
+};
+
+interface TextProps extends React.HTMLAttributes<HTMLElement> {
+  variant?: "default" | "muted" | "error" | "small";
+  as?: React.ElementType;
+  children?: React.ReactNode;
+}
+
+export const Text = ({
+  variant = "default",
+  as: Component = "p",
+  className,
+  children,
+  ...props
+}: TextProps) => {
+  return React.createElement(
+    Component,
+    { className: cn(textVariants[variant], className), ...props },
+    children,
+  );
+};
+
+export const TypographyList = ({ args }: { args: Record<string, unknown> }) => {
+  return (
+    <div
+      className="space-y-4"
+      {...(args as React.HTMLAttributes<HTMLDivElement>)}
+    >
+      <Heading level={1}>Heading 1</Heading>
+      <Heading level={2}>Heading 2</Heading>
+      <Heading level={3}>Heading 3</Heading>
+      <Text>Body text</Text>
+      <Text variant="muted">Caption text</Text>
+      <Text variant="small">Small text</Text>
+      <Text variant="small" as="span">
+        Small span text
+      </Text>
+    </div>
+  );
+};

package/src/ui/index.ts

@@ -0,0 +1,28 @@
+export * from "./Button";
+export * from "./Input";
+export * from "./Select";
+export * from "./Typography";
+export * from "./Icon";
+export * from "./Slider";
+export * from "./SliderWithNumberField";
+export * from "./Tooltip";
+export * from "./utils";
+export * from "./Dialog";
+export * from "./Popover";
+export * from "./Dropdown";
+export * from "./Collapsible";
+export * from "./Switch";
+export * from "./Label";
+export * from "./BasePanel";
+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";

package/src/ui/utils.ts

@@ -0,0 +1,6 @@
+import { type ClassValue, clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs));
+}

package/tsconfig.json

@@ -0,0 +1,12 @@
+{
+    "compilerOptions": {
+        "target": "es2020",
+        "jsx": "react-jsx",
+        "moduleResolution": "bundler",
+        "ignoreDeprecations": "6.0",
+        "strict": true,
+        "declaration": true,
+        "skipLibCheck": true,
+        "esModuleInterop": true
+    }
+}

package/vitest.config.ts

@@ -0,0 +1,36 @@
+import path from 'node:path';
+import { fileURLToPath } from 'node:url';
+
+import { defineConfig } from 'vitest/config';
+
+import { storybookTest } from '@storybook/addon-vitest/vitest-plugin';
+
+import { playwright } from '@vitest/browser-playwright';
+
+const dirname =
+  typeof __dirname !== 'undefined' ? __dirname : path.dirname(fileURLToPath(import.meta.url));
+
+// More info at: https://storybook.js.org/docs/next/writing-tests/integrations/vitest-addon
+export default defineConfig({
+  test: {
+    projects: [
+      {
+        extends: true,
+        plugins: [
+          // The plugin will run tests for the stories defined in your Storybook config
+          // See options at: https://storybook.js.org/docs/next/writing-tests/integrations/vitest-addon#storybooktest
+          storybookTest({ configDir: path.join(dirname, '.storybook') }),
+        ],
+        test: {
+          name: 'storybook',
+          browser: {
+            enabled: true,
+            headless: true,
+            provider: playwright({}),
+            instances: [{ browser: 'chromium' }],
+          },
+        },
+      },
+    ],
+  },
+});

package/vitest.shims.d.ts

@@ -0,0 +1 @@
+/// <reference types="@vitest/browser-playwright" />