feat(sprint3): кнопки, форм-контролы, LLM-блоки — Sprint 3 v0.3.0

- components/ui/Button.tsx — компонент Button (primary/secondary/ghost/danger, sm/md/lg, loading/disabled) - components/ui/CodeCopy.tsx — компонент копирования кода (clipboard API) - components/ui/Toggle.tsx — тумблер (client component, bb-toggle-track/thumb) - globals.css — CSS-классы: bb-btn, bb-input/textarea/select, bb-checkbox/radio, bb-toggle, @keyframes bb-spin - app/components/buttons/page.tsx — страница «Кнопки» (варианты, размеры, состояния, code copy, LLM-блок) - app/components/forms/page.tsx — страница «Форм-контролы» (Input/Textarea/Select/Checkbox/Radio/Toggle, LLM-блок) - foundation/logo/page.tsx — добавлен LLM-блок v1.0 - Sidebar: убраны «скоро» с Кнопок и Форм-контролов, версия Sprint 3 · v0.3.0 - docs/LLM_CONTEXT.md → версия 3.0, добавлена секция 9a с компонентами Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
2026-03-22 20:20:41 +05:00
parent 0198947c4e
commit 0855892643
9 changed files with 1428 additions and 6 deletions
@@ -0,0 +1,45 @@
+"use client";
+
+import { ButtonHTMLAttributes, forwardRef } from "react";
+
+export type ButtonVariant = "primary" | "secondary" | "ghost" | "danger";
+export type ButtonSize = "sm" | "md" | "lg";
+
+export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+  variant?: ButtonVariant;
+  size?: ButtonSize;
+  loading?: boolean;
+}
+
+export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
+  function Button(
+    { variant = "primary", size = "md", loading = false, disabled, children, className = "", ...props },
+    ref
+  ) {
+    const isDisabled = disabled || loading;
+    return (
+      <button
+        ref={ref}
+        disabled={isDisabled}
+        className={`bb-btn bb-btn-${size} bb-btn-${variant} ${className}`.trim()}
+        {...props}
+      >
+        {loading && (
+          <span
+            style={{
+              width: 13,
+              height: 13,
+              border: "2px solid currentColor",
+              borderTopColor: "transparent",
+              borderRadius: "50%",
+              display: "inline-block",
+              animation: "bb-spin 0.65s linear infinite",
+              flexShrink: 0,
+            }}
+          />
+        )}
+        {children}
+      </button>
+    );
+  }
+);
@@ -0,0 +1,60 @@
+"use client";
+
+import { useState } from "react";
+
+export function CodeCopy({ code, lang = "jsx" }: { code: string; lang?: string }) {
+  const [copied, setCopied] = useState(false);
+
+  return (
+    <div style={{ borderRadius: 8, overflow: "hidden", border: "1px solid var(--bb-border)" }}>
+      <div
+        style={{
+          display: "flex",
+          justifyContent: "space-between",
+          alignItems: "center",
+          background: "var(--bb-sidebar-bg)",
+          padding: "6px 12px",
+          borderBottom: "1px solid var(--bb-border)",
+        }}
+      >
+        <span style={{ fontSize: 11, color: "var(--bb-text-muted)", fontFamily: "var(--font-mono)" }}>
+          {lang}
+        </span>
+        <button
+          onClick={() => {
+            navigator.clipboard.writeText(code);
+            setCopied(true);
+            setTimeout(() => setCopied(false), 2000);
+          }}
+          style={{
+            fontSize: 12,
+            background: copied ? "#d1fae5" : "var(--brand-053m)",
+            color: copied ? "#065f46" : "#fff",
+            border: "none",
+            borderRadius: 4,
+            padding: "3px 10px",
+            cursor: "pointer",
+            fontWeight: 500,
+            fontFamily: "var(--font-web)",
+          }}
+        >
+          {copied ? "✓ Скопировано" : "Скопировать"}
+        </button>
+      </div>
+      <pre
+        style={{
+          margin: 0,
+          padding: "12px 16px",
+          overflowX: "auto",
+          fontSize: 12,
+          fontFamily: "var(--font-mono)",
+          color: "var(--bb-text-muted)",
+          background: "#fff",
+          lineHeight: 1.6,
+        }}
+      >
+        <code>{code}</code>
+      </pre>
+    </div>
+  );
+}
@@ -0,0 +1,59 @@
+"use client";
+
+import { useState } from "react";
+
+interface ToggleProps {
+  defaultChecked?: boolean;
+  disabled?: boolean;
+  label?: string;
+  onChange?: (checked: boolean) => void;
+}
+
+export function Toggle({ defaultChecked = false, disabled = false, label, onChange }: ToggleProps) {
+  const [checked, setChecked] = useState(defaultChecked);
+
+  function handleToggle() {
+    if (disabled) return;
+    const next = !checked;
+    setChecked(next);
+    onChange?.(next);
+  }
+
+  return (
+    <div
+      style={{
+        display: "inline-flex",
+        alignItems: "center",
+        gap: 10,
+        cursor: disabled ? "not-allowed" : "pointer",
+        opacity: disabled ? 0.5 : 1,
+        userSelect: "none",
+      }}
+      onClick={handleToggle}
+      role="switch"
+      aria-checked={checked}
+      tabIndex={disabled ? -1 : 0}
+      onKeyDown={(e) => {
+        if (e.key === " " || e.key === "Enter") {
+          e.preventDefault();
+          handleToggle();
+        }
+      }}
+    >
+      <div
+        className="bb-toggle-track"
+        style={{ background: checked ? "var(--brand-073m)" : "#d1d5db" }}
+      >
+        <div
+          className="bb-toggle-thumb"
+          style={{ transform: checked ? "translateX(20px)" : "translateX(0)" }}
+        />
+      </div>
+      {label && (
+        <span style={{ fontSize: 14, color: "var(--bb-text)", fontFamily: "var(--font-web)" }}>
+          {label}
+        </span>
+      )}
+    </div>
+  );
+}