Browse Source
- 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>sprint/3
AR 15 M4
1 week ago
9 changed files with 1428 additions and 6 deletions
@ -0,0 +1,434 @@ |
|||||||
|
import type { Metadata } from "next"; |
||||||
|
import { Button } from "@/components/ui/Button"; |
||||||
|
import { CodeCopy } from "@/components/ui/CodeCopy"; |
||||||
|
import { LlmBlock, LlmSection, LlmTable, LlmRules } from "@/components/llm/LlmBlock"; |
||||||
|
|
||||||
|
export const metadata: Metadata = { |
||||||
|
title: "Кнопки. Цифровой брендбук Клиники ухо, горло, нос им. проф. Е.Н.Оленевой", |
||||||
|
}; |
||||||
|
|
||||||
|
function Section({ |
||||||
|
id, |
||||||
|
title, |
||||||
|
subtitle, |
||||||
|
children, |
||||||
|
}: { |
||||||
|
id?: string; |
||||||
|
title: string; |
||||||
|
subtitle?: string; |
||||||
|
children: React.ReactNode; |
||||||
|
}) { |
||||||
|
return ( |
||||||
|
<section id={id} className="mb-12"> |
||||||
|
<div className="mb-6"> |
||||||
|
<h2 className="text-xl font-semibold" style={{ color: "var(--bb-text)" }}> |
||||||
|
{title} |
||||||
|
</h2> |
||||||
|
{subtitle && ( |
||||||
|
<p className="mt-1 text-sm" style={{ color: "var(--bb-text-muted)" }}> |
||||||
|
{subtitle} |
||||||
|
</p> |
||||||
|
)} |
||||||
|
</div> |
||||||
|
{children} |
||||||
|
</section> |
||||||
|
); |
||||||
|
} |
||||||
|
|
||||||
|
const VARIANT_INFO = [ |
||||||
|
{ |
||||||
|
variant: "primary" as const, |
||||||
|
label: "Primary", |
||||||
|
cssClass: ".bb-btn-primary", |
||||||
|
bg: "#5b7b87", |
||||||
|
text: "#fff", |
||||||
|
description: "Основная кнопка призыва к действию. Тёмный бирюзово-серый фон, белый текст.", |
||||||
|
useCase: "Записаться · Подтвердить", |
||||||
|
}, |
||||||
|
{ |
||||||
|
variant: "secondary" as const, |
||||||
|
label: "Secondary", |
||||||
|
cssClass: ".bb-btn-secondary", |
||||||
|
bg: "прозрачный", |
||||||
|
text: "#5b7b87", |
||||||
|
description: "Второстепенное действие. Контурная кнопка с фирменным цветом.", |
||||||
|
useCase: "Узнать подробнее · Редактировать", |
||||||
|
}, |
||||||
|
{ |
||||||
|
variant: "ghost" as const, |
||||||
|
label: "Ghost", |
||||||
|
cssClass: ".bb-btn-ghost", |
||||||
|
bg: "прозрачный", |
||||||
|
text: "#5b7b87", |
||||||
|
description: "Третичное действие. Без фона и видимой рамки, текстовый акцент.", |
||||||
|
useCase: "Отмена · Назад · Ещё...", |
||||||
|
}, |
||||||
|
{ |
||||||
|
variant: "danger" as const, |
||||||
|
label: "Danger", |
||||||
|
cssClass: ".bb-btn-danger", |
||||||
|
bg: "#dc2626", |
||||||
|
text: "#fff", |
||||||
|
description: "Деструктивные и необратимые действия. Красный фон.", |
||||||
|
useCase: "Удалить · Отменить запись", |
||||||
|
}, |
||||||
|
]; |
||||||
|
|
||||||
|
const LLM_BUTTONS_TEXT = `КНОПКИ — LLM-спецификация
|
||||||
|
Версия: v1.0 · /components/buttons |
||||||
|
|
||||||
|
ВАРИАНТЫ |
||||||
|
Вариант | CSS класс | Фон | Текст | Граница | Применение |
||||||
|
primary | .bb-btn-primary | #5b7b87 | #fff | #5b7b87 | Главный CTA: «Записаться», «Подтвердить» |
||||||
|
secondary | .bb-btn-secondary | прозрачный | #5b7b87 | #5b7b87 | Второстепенное: «Подробнее», «Редактировать» |
||||||
|
ghost | .bb-btn-ghost | прозрачный | #5b7b87 | нет | Третичное: «Отмена», «Назад» |
||||||
|
danger | .bb-btn-danger | #dc2626 | #fff | #dc2626 | Деструктивное: «Удалить», «Отменить запись» |
||||||
|
|
||||||
|
РАЗМЕРЫ |
||||||
|
Размер | CSS класс | padding | font-size | border-radius | Применение |
||||||
|
sm | .bb-btn-sm | 5px 12px | 13px | 6px | Компактные интерфейсы, таблицы |
||||||
|
md | .bb-btn-md | 8px 18px | 14px | 8px | Стандарт (по умолчанию) |
||||||
|
lg | .bb-btn-lg | 12px 26px | 16px | 10px | Главные CTA на Hero-блоках |
||||||
|
|
||||||
|
СОСТОЯНИЯ |
||||||
|
default — без изменений |
||||||
|
hover — filter: brightness(0.9) |
||||||
|
active — filter: brightness(0.82) |
||||||
|
loading — spinner (animation: bb-spin 0.65s linear infinite) + opacity: 0.5 + disabled |
||||||
|
disabled — opacity: 0.5, cursor: not-allowed |
||||||
|
|
||||||
|
CSS BASE (globals.css) |
||||||
|
.bb-btn { font-family: Fira Sans; font-weight: 500; display: inline-flex; align-items: center; gap: 7px; transition: filter 0.15s; } |
||||||
|
.bb-btn:hover:not(:disabled) { filter: brightness(0.9); } |
||||||
|
.bb-btn:active:not(:disabled) { filter: brightness(0.82); } |
||||||
|
.bb-btn:disabled { cursor: not-allowed; opacity: 0.5; } |
||||||
|
.bb-btn:focus-visible { outline: 2px solid #7ecfca; outline-offset: 2px; } |
||||||
|
|
||||||
|
ПРАВИЛА ПРИМЕНЕНИЯ |
||||||
|
✓ Не более одной primary-кнопки на видимый экран в контексте одной задачи |
||||||
|
✓ Текст кнопки — глагол или чёткий призыв: «Записаться», «Узнать цену» |
||||||
|
✓ Primary → главное действие (форма записи, подтверждение) |
||||||
|
✓ Secondary → второстепенное (подробнее, редактировать) |
||||||
|
✓ Ghost → отмена, навигационная ссылка без акцента |
||||||
|
✓ Danger → только деструктивные действия (удалить, отменить запись) |
||||||
|
✕ Не менять цвета произвольно — только варианты из фирменной палитры |
||||||
|
✕ Не добавлять тени к кнопкам |
||||||
|
✕ Не использовать Danger для нейтральных действий`.trim();
|
||||||
|
|
||||||
|
export default function ButtonsPage() { |
||||||
|
const codeHtml = `<!-- HTML — базовые классы из globals.css -->
|
||||||
|
<button class="bb-btn bb-btn-md bb-btn-primary">Записаться</button> |
||||||
|
<button class="bb-btn bb-btn-md bb-btn-secondary">Узнать подробнее</button> |
||||||
|
<button class="bb-btn bb-btn-md bb-btn-ghost">Отмена</button> |
||||||
|
<button class="bb-btn bb-btn-md bb-btn-danger">Удалить</button> |
||||||
|
|
||||||
|
<!-- Размеры --> |
||||||
|
<button class="bb-btn bb-btn-sm bb-btn-primary">Маленькая</button> |
||||||
|
<button class="bb-btn bb-btn-md bb-btn-primary">Средняя</button> |
||||||
|
<button class="bb-btn bb-btn-lg bb-btn-primary">Большая</button>`;
|
||||||
|
|
||||||
|
const codeReact = `import { Button } from "@/components/ui/Button";
|
||||||
|
|
||||||
|
// Варианты
|
||||||
|
<Button variant="primary">Записаться</Button> |
||||||
|
<Button variant="secondary">Узнать подробнее</Button> |
||||||
|
<Button variant="ghost">Отмена</Button> |
||||||
|
<Button variant="danger">Удалить</Button> |
||||||
|
|
||||||
|
// Размеры
|
||||||
|
<Button size="sm">Маленькая</Button> |
||||||
|
<Button size="md">Средняя</Button> {/* по умолчанию */} |
||||||
|
<Button size="lg">Большая</Button> |
||||||
|
|
||||||
|
// Состояния
|
||||||
|
<Button loading>Загрузка...</Button> |
||||||
|
<Button disabled>Недоступно</Button>`;
|
||||||
|
|
||||||
|
return ( |
||||||
|
<div className="max-w-4xl mx-auto px-8 py-10"> |
||||||
|
{/* Заголовок */} |
||||||
|
<div className="mb-10 pb-6 border-b" style={{ borderColor: "var(--bb-border)" }}> |
||||||
|
<p |
||||||
|
className="text-xs font-semibold uppercase tracking-widest mb-2" |
||||||
|
style={{ color: "var(--brand-053m)" }} |
||||||
|
> |
||||||
|
Компоненты → 3.1 |
||||||
|
</p> |
||||||
|
<h1 className="text-3xl font-semibold mb-3" style={{ color: "var(--bb-text)" }}> |
||||||
|
Кнопки |
||||||
|
</h1> |
||||||
|
<p className="text-base max-w-2xl" style={{ color: "var(--bb-text-muted)" }}> |
||||||
|
Все варианты кнопок, применяемых на сайте клиники. |
||||||
|
Кнопки — основной элемент призыва к действию в интерфейсе. |
||||||
|
</p> |
||||||
|
</div> |
||||||
|
|
||||||
|
{/* 1. Варианты */} |
||||||
|
<Section |
||||||
|
id="variants" |
||||||
|
title="Варианты" |
||||||
|
subtitle="Четыре визуальных типа кнопок для разных контекстов." |
||||||
|
> |
||||||
|
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 mb-6"> |
||||||
|
{VARIANT_INFO.map(({ variant, label, description, useCase }) => ( |
||||||
|
<div |
||||||
|
key={variant} |
||||||
|
className="rounded-xl border p-5 flex flex-col gap-4" |
||||||
|
style={{ borderColor: "var(--bb-border)" }} |
||||||
|
> |
||||||
|
<div |
||||||
|
className="flex items-center justify-center py-6 rounded-lg" |
||||||
|
style={{ background: "var(--bb-sidebar-bg)" }} |
||||||
|
> |
||||||
|
<Button variant={variant}>{label}</Button> |
||||||
|
</div> |
||||||
|
<div> |
||||||
|
<p className="font-medium text-sm mb-1" style={{ color: "var(--bb-text)" }}> |
||||||
|
{label} |
||||||
|
</p> |
||||||
|
<p |
||||||
|
className="text-xs mb-3 leading-relaxed" |
||||||
|
style={{ color: "var(--bb-text-muted)" }} |
||||||
|
> |
||||||
|
{description} |
||||||
|
</p> |
||||||
|
<span |
||||||
|
className="inline-block text-[11px] px-2 py-0.5 rounded" |
||||||
|
style={{ background: "#e0f5f4", color: "var(--brand-073m)" }} |
||||||
|
> |
||||||
|
{useCase} |
||||||
|
</span> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
))} |
||||||
|
</div> |
||||||
|
</Section> |
||||||
|
|
||||||
|
{/* 2. Размеры */} |
||||||
|
<Section |
||||||
|
id="sizes" |
||||||
|
title="Размеры" |
||||||
|
subtitle="Три размера для разных уровней иерархии интерфейса." |
||||||
|
> |
||||||
|
<div |
||||||
|
className="rounded-xl border overflow-hidden" |
||||||
|
style={{ borderColor: "var(--bb-border)" }} |
||||||
|
> |
||||||
|
{( |
||||||
|
[ |
||||||
|
{ |
||||||
|
size: "sm" as const, |
||||||
|
label: "Small", |
||||||
|
hint: "padding: 5px 12px · font: 13px · radius: 6px", |
||||||
|
use: "Компактные интерфейсы, действия в таблицах", |
||||||
|
}, |
||||||
|
{ |
||||||
|
size: "md" as const, |
||||||
|
label: "Medium", |
||||||
|
hint: "padding: 8px 18px · font: 14px · radius: 8px", |
||||||
|
use: "Стандартный размер (по умолчанию)", |
||||||
|
}, |
||||||
|
{ |
||||||
|
size: "lg" as const, |
||||||
|
label: "Large", |
||||||
|
hint: "padding: 12px 26px · font: 16px · radius: 10px", |
||||||
|
use: "Главные CTA на Hero-блоках", |
||||||
|
}, |
||||||
|
] as const |
||||||
|
).map(({ size, label, hint, use }, i) => ( |
||||||
|
<div |
||||||
|
key={size} |
||||||
|
className="flex items-center gap-6 px-5 py-4" |
||||||
|
style={{ borderTop: i > 0 ? "1px solid var(--bb-border)" : undefined }} |
||||||
|
> |
||||||
|
<div className="w-36 shrink-0"> |
||||||
|
<Button variant="primary" size={size}> |
||||||
|
Записаться |
||||||
|
</Button> |
||||||
|
</div> |
||||||
|
<div className="flex-1 min-w-0"> |
||||||
|
<p className="text-sm font-medium mb-0.5" style={{ color: "var(--bb-text)" }}> |
||||||
|
{label} |
||||||
|
</p> |
||||||
|
<p className="text-xs font-mono" style={{ color: "var(--bb-text-muted)" }}> |
||||||
|
{hint} |
||||||
|
</p> |
||||||
|
</div> |
||||||
|
<p |
||||||
|
className="text-xs hidden lg:block" |
||||||
|
style={{ color: "var(--bb-text-muted)", maxWidth: 200 }} |
||||||
|
> |
||||||
|
{use} |
||||||
|
</p> |
||||||
|
</div> |
||||||
|
))} |
||||||
|
</div> |
||||||
|
</Section> |
||||||
|
|
||||||
|
{/* 3. Состояния */} |
||||||
|
<Section |
||||||
|
id="states" |
||||||
|
title="Состояния" |
||||||
|
subtitle="Поведение кнопки при разных условиях взаимодействия." |
||||||
|
> |
||||||
|
<div className="grid grid-cols-1 sm:grid-cols-2 gap-4"> |
||||||
|
{( |
||||||
|
[ |
||||||
|
{ |
||||||
|
label: "Default", |
||||||
|
node: <Button variant="primary">Записаться</Button>, |
||||||
|
hint: "Стандартное состояние", |
||||||
|
}, |
||||||
|
{ |
||||||
|
label: "Hover", |
||||||
|
node: ( |
||||||
|
<Button variant="primary" style={{ filter: "brightness(0.9)" }}> |
||||||
|
Записаться |
||||||
|
</Button> |
||||||
|
), |
||||||
|
hint: "filter: brightness(0.9) при наведении курсора", |
||||||
|
}, |
||||||
|
{ |
||||||
|
label: "Loading", |
||||||
|
node: <Button variant="primary" loading>Загрузка...</Button>, |
||||||
|
hint: "Спиннер + opacity: 0.5 + кнопка заблокирована", |
||||||
|
}, |
||||||
|
{ |
||||||
|
label: "Disabled", |
||||||
|
node: <Button variant="primary" disabled>Недоступно</Button>, |
||||||
|
hint: "opacity: 0.5, cursor: not-allowed", |
||||||
|
}, |
||||||
|
] as const |
||||||
|
).map(({ label, node, hint }) => ( |
||||||
|
<div |
||||||
|
key={label} |
||||||
|
className="rounded-xl border p-5" |
||||||
|
style={{ borderColor: "var(--bb-border)" }} |
||||||
|
> |
||||||
|
<div |
||||||
|
className="flex items-center justify-center py-6 mb-3 rounded-lg" |
||||||
|
style={{ background: "var(--bb-sidebar-bg)" }} |
||||||
|
> |
||||||
|
{node} |
||||||
|
</div> |
||||||
|
<p className="text-sm font-medium mb-1" style={{ color: "var(--bb-text)" }}> |
||||||
|
{label} |
||||||
|
</p> |
||||||
|
<p className="text-xs" style={{ color: "var(--bb-text-muted)" }}> |
||||||
|
{hint} |
||||||
|
</p> |
||||||
|
</div> |
||||||
|
))} |
||||||
|
</div> |
||||||
|
</Section> |
||||||
|
|
||||||
|
{/* 4. Все варианты вместе */} |
||||||
|
<Section |
||||||
|
id="all" |
||||||
|
title="Все варианты и размеры" |
||||||
|
subtitle="Сводная таблица — визуальное сравнение." |
||||||
|
> |
||||||
|
<div |
||||||
|
className="rounded-xl border overflow-hidden" |
||||||
|
style={{ borderColor: "var(--bb-border)" }} |
||||||
|
> |
||||||
|
<div |
||||||
|
className="px-5 py-3 text-xs font-medium border-b" |
||||||
|
style={{ |
||||||
|
color: "var(--bb-text-muted)", |
||||||
|
background: "var(--bb-sidebar-bg)", |
||||||
|
borderColor: "var(--bb-border)", |
||||||
|
}} |
||||||
|
> |
||||||
|
Вариант / Размер |
||||||
|
</div> |
||||||
|
{VARIANT_INFO.map(({ variant, label }, vi) => ( |
||||||
|
<div |
||||||
|
key={variant} |
||||||
|
className="flex items-center gap-5 px-5 py-3" |
||||||
|
style={{ borderTop: vi > 0 ? "1px solid var(--bb-border)" : undefined }} |
||||||
|
> |
||||||
|
<span |
||||||
|
className="w-20 text-xs font-mono shrink-0" |
||||||
|
style={{ color: "var(--bb-text-muted)" }} |
||||||
|
> |
||||||
|
{label} |
||||||
|
</span> |
||||||
|
<div className="flex items-center gap-3 flex-wrap"> |
||||||
|
<Button variant={variant} size="sm"> |
||||||
|
Маленькая |
||||||
|
</Button> |
||||||
|
<Button variant={variant} size="md"> |
||||||
|
Средняя |
||||||
|
</Button> |
||||||
|
<Button variant={variant} size="lg"> |
||||||
|
Большая |
||||||
|
</Button> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
))} |
||||||
|
</div> |
||||||
|
</Section> |
||||||
|
|
||||||
|
{/* 5. Примеры кода */} |
||||||
|
<Section |
||||||
|
id="code" |
||||||
|
title="Примеры кода" |
||||||
|
subtitle="Скопируйте HTML или JSX для использования в проекте." |
||||||
|
> |
||||||
|
<div className="space-y-4"> |
||||||
|
<CodeCopy lang="HTML (CSS-классы из globals.css)" code={codeHtml} /> |
||||||
|
<CodeCopy lang="JSX (React / Next.js)" code={codeReact} /> |
||||||
|
</div> |
||||||
|
</Section> |
||||||
|
|
||||||
|
{/* LLM-блок */} |
||||||
|
<LlmBlock path="/components/buttons" version="v1.0" specText={LLM_BUTTONS_TEXT}> |
||||||
|
<LlmSection title="Варианты" /> |
||||||
|
<LlmTable |
||||||
|
headers={["Вариант", "CSS класс", "Фон", "Текст", "Применение"]} |
||||||
|
rows={VARIANT_INFO.map((v) => [ |
||||||
|
v.variant, |
||||||
|
v.cssClass, |
||||||
|
v.bg, |
||||||
|
v.text, |
||||||
|
v.useCase, |
||||||
|
])} |
||||||
|
/> |
||||||
|
<LlmSection title="Размеры" /> |
||||||
|
<LlmTable |
||||||
|
headers={["Размер", "CSS класс", "padding", "font-size", "radius", "Применение"]} |
||||||
|
rows={[ |
||||||
|
["sm", ".bb-btn-sm", "5px 12px", "13px", "6px", "Компактные интерфейсы, таблицы"], |
||||||
|
["md", ".bb-btn-md", "8px 18px", "14px", "8px", "Стандарт (по умолчанию)"], |
||||||
|
["lg", ".bb-btn-lg", "12px 26px", "16px", "10px", "Hero CTA"], |
||||||
|
]} |
||||||
|
/> |
||||||
|
<LlmSection title="Состояния" /> |
||||||
|
<LlmTable |
||||||
|
headers={["Состояние", "CSS / Поведение"]} |
||||||
|
rows={[ |
||||||
|
["default", "без изменений"], |
||||||
|
["hover", "filter: brightness(0.9)"], |
||||||
|
["active", "filter: brightness(0.82)"], |
||||||
|
["loading", "spinner bb-spin + opacity: 0.5 + disabled=true"], |
||||||
|
["disabled", "opacity: 0.5 + cursor: not-allowed"], |
||||||
|
]} |
||||||
|
/> |
||||||
|
<LlmSection title="Правила применения" /> |
||||||
|
<LlmRules |
||||||
|
rules={[ |
||||||
|
{ ok: true, text: "Не более одной primary-кнопки на один экран в контексте задачи" }, |
||||||
|
{ ok: true, text: "Текст — глагол или призыв: «Записаться», «Узнать цену»" }, |
||||||
|
{ ok: true, text: "Primary → главное действие формы или подтверждения" }, |
||||||
|
{ ok: true, text: "Ghost → отмена и навигационные ссылки без акцента" }, |
||||||
|
{ ok: true, text: "Danger → только деструктивные действия" }, |
||||||
|
{ ok: false, text: "Не менять цвета произвольно вне фирменной палитры" }, |
||||||
|
{ ok: false, text: "Не добавлять тени к кнопкам" }, |
||||||
|
{ ok: false, text: "Не использовать Danger для нейтральных действий" }, |
||||||
|
]} |
||||||
|
/> |
||||||
|
</LlmBlock> |
||||||
|
</div> |
||||||
|
); |
||||||
|
} |
||||||
@ -0,0 +1,589 @@ |
|||||||
|
import type { Metadata } from "next"; |
||||||
|
import { Toggle } from "@/components/ui/Toggle"; |
||||||
|
import { CodeCopy } from "@/components/ui/CodeCopy"; |
||||||
|
import { LlmBlock, LlmSection, LlmTable, LlmRules } from "@/components/llm/LlmBlock"; |
||||||
|
|
||||||
|
export const metadata: Metadata = { |
||||||
|
title: "Форм-контролы. Цифровой брендбук Клиники ухо, горло, нос им. проф. Е.Н.Оленевой", |
||||||
|
}; |
||||||
|
|
||||||
|
function Section({ |
||||||
|
id, |
||||||
|
title, |
||||||
|
subtitle, |
||||||
|
children, |
||||||
|
}: { |
||||||
|
id?: string; |
||||||
|
title: string; |
||||||
|
subtitle?: string; |
||||||
|
children: React.ReactNode; |
||||||
|
}) { |
||||||
|
return ( |
||||||
|
<section id={id} className="mb-12"> |
||||||
|
<div className="mb-6"> |
||||||
|
<h2 className="text-xl font-semibold" style={{ color: "var(--bb-text)" }}> |
||||||
|
{title} |
||||||
|
</h2> |
||||||
|
{subtitle && ( |
||||||
|
<p className="mt-1 text-sm" style={{ color: "var(--bb-text-muted)" }}> |
||||||
|
{subtitle} |
||||||
|
</p> |
||||||
|
)} |
||||||
|
</div> |
||||||
|
{children} |
||||||
|
</section> |
||||||
|
); |
||||||
|
} |
||||||
|
|
||||||
|
function FieldLabel({ text, required }: { text: string; required?: boolean }) { |
||||||
|
return ( |
||||||
|
<label |
||||||
|
className="block text-sm font-medium mb-1.5" |
||||||
|
style={{ color: "var(--bb-text)" }} |
||||||
|
> |
||||||
|
{text} |
||||||
|
{required && <span style={{ color: "#dc2626", marginLeft: 2 }}>*</span>} |
||||||
|
</label> |
||||||
|
); |
||||||
|
} |
||||||
|
|
||||||
|
function FieldHint({ text }: { text: string }) { |
||||||
|
return ( |
||||||
|
<p className="mt-1.5 text-xs" style={{ color: "var(--bb-text-muted)" }}> |
||||||
|
{text} |
||||||
|
</p> |
||||||
|
); |
||||||
|
} |
||||||
|
|
||||||
|
function FieldError({ text }: { text: string }) { |
||||||
|
return ( |
||||||
|
<p className="mt-1.5 text-xs" style={{ color: "#dc2626" }}> |
||||||
|
{text} |
||||||
|
</p> |
||||||
|
); |
||||||
|
} |
||||||
|
|
||||||
|
function StateCard({ |
||||||
|
label, |
||||||
|
hint, |
||||||
|
children, |
||||||
|
}: { |
||||||
|
label: string; |
||||||
|
hint: string; |
||||||
|
children: React.ReactNode; |
||||||
|
}) { |
||||||
|
return ( |
||||||
|
<div className="rounded-xl border p-4" style={{ borderColor: "var(--bb-border)" }}> |
||||||
|
<div className="mb-3">{children}</div> |
||||||
|
<p className="text-sm font-medium mb-0.5" style={{ color: "var(--bb-text)" }}> |
||||||
|
{label} |
||||||
|
</p> |
||||||
|
<p className="text-xs" style={{ color: "var(--bb-text-muted)" }}> |
||||||
|
{hint} |
||||||
|
</p> |
||||||
|
</div> |
||||||
|
); |
||||||
|
} |
||||||
|
|
||||||
|
const LLM_FORMS_TEXT = `ФОРМ-КОНТРОЛЫ — LLM-спецификация
|
||||||
|
Версия: v1.0 · /components/forms |
||||||
|
|
||||||
|
ТЕКСТОВОЕ ПОЛЕ (Input) |
||||||
|
CSS класс: .bb-input |
||||||
|
Высота: ~40px (padding: 9px 12px) |
||||||
|
border: 1.5px solid #e5e7eb · border-radius: 8px · font: Fira Sans 14px |
||||||
|
Состояния: |
||||||
|
default: border #e5e7eb |
||||||
|
focus: border #7ecfca + box-shadow 0 0 0 3px rgba(126,207,202,0.2) |
||||||
|
error: border #dc2626 + класс .bb-error |
||||||
|
disabled: opacity 0.5 + cursor not-allowed + bg #f8f9fa |
||||||
|
|
||||||
|
МНОГОСТРОЧНЫЙ ТЕКСТ (Textarea) |
||||||
|
CSS класс: .bb-textarea |
||||||
|
Те же состояния что у Input |
||||||
|
min-height: 100px · resize: vertical |
||||||
|
|
||||||
|
ВЫПАДАЮЩИЙ СПИСОК (Select) |
||||||
|
CSS класс: .bb-select |
||||||
|
Стрелка: SVG background-image (data URI) · padding-right: 36px |
||||||
|
Те же состояния что у Input |
||||||
|
|
||||||
|
ФЛАЖОК (Checkbox) |
||||||
|
CSS класс: .bb-checkbox |
||||||
|
size: 16×16px · accent-color: #5b7b87 |
||||||
|
HTML: <input type="checkbox" class="bb-checkbox" /> |
||||||
|
Состояния: unchecked / checked / disabled / checked+disabled |
||||||
|
|
||||||
|
ПЕРЕКЛЮЧАТЕЛЬ ВАРИАНТА (Radio) |
||||||
|
CSS класс: .bb-radio |
||||||
|
size: 16×16px · accent-color: #5b7b87 |
||||||
|
HTML: <input type="radio" class="bb-radio" name="group" /> |
||||||
|
Всегда в группе — один выбранный из нескольких |
||||||
|
|
||||||
|
ТУМБЛЕР (Toggle/Switch) |
||||||
|
Компонент: @/components/ui/Toggle (React, "use client") |
||||||
|
Ширина трека: 44px · Высота: 24px · Бегунок: 20×20px |
||||||
|
Выкл: track #d1d5db · Вкл: track #5b7b87 |
||||||
|
CSS: .bb-toggle-track / .bb-toggle-thumb |
||||||
|
HTML-аналог: <input type="checkbox" role="switch" /> |
||||||
|
|
||||||
|
ОБЩИЕ ПРАВИЛА |
||||||
|
✓ Метка (label) всегда над полем, font-weight: 500 |
||||||
|
✓ Обязательные поля помечены * красным цветом (#dc2626) |
||||||
|
✓ Подсказка (hint) серым текстом под полем — font-size: 12px |
||||||
|
✓ Сообщение об ошибке красным (#dc2626) под полем вместо hint |
||||||
|
✓ Focus outline — тёмный бирюзовый #7ecfca (--brand-053m) |
||||||
|
✓ Группы checkbox/radio — вертикальный список с gap: 10px |
||||||
|
✓ Toggle — для булевых настроек включить/выключить |
||||||
|
✕ Не использовать placeholder вместо label |
||||||
|
✕ Не скрывать обязательность поля |
||||||
|
✕ Не делать поля шире контейнера`.trim();
|
||||||
|
|
||||||
|
export default function FormsPage() { |
||||||
|
const codeInput = `<!-- HTML -->
|
||||||
|
<label class="bb-label">Имя пациента <span style="color:#dc2626">*</span></label> |
||||||
|
<input class="bb-input" type="text" placeholder="Иван Иванов" /> |
||||||
|
<p class="bb-hint">Укажите имя как в паспорте</p> |
||||||
|
|
||||||
|
<!-- Error-состояние --> |
||||||
|
<input class="bb-input bb-error" type="text" value="ива" /> |
||||||
|
<p style="color:#dc2626;font-size:12px">Минимум 3 символа</p> |
||||||
|
|
||||||
|
<!-- Password --> |
||||||
|
<input class="bb-input" type="password" placeholder="Введите пароль" />`;
|
||||||
|
|
||||||
|
const codeTextarea = `<label class="bb-label">Комментарий к записи</label>
|
||||||
|
<textarea class="bb-textarea" rows="4" placeholder="Опишите симптомы..."></textarea>`;
|
||||||
|
|
||||||
|
const codeSelect = `<label class="bb-label">Специализация</label>
|
||||||
|
<select class="bb-select"> |
||||||
|
<option value="">Выберите специализацию</option> |
||||||
|
<option value="lor">ЛОР — ухо, горло, нос</option> |
||||||
|
<option value="aud">Аудиология</option> |
||||||
|
</select>`;
|
||||||
|
|
||||||
|
const codeCheckbox = `<!-- Одиночный -->
|
||||||
|
<label style="display:flex;align-items:center;gap:8px"> |
||||||
|
<input class="bb-checkbox" type="checkbox" /> |
||||||
|
<span>Согласен с условиями</span> |
||||||
|
</label> |
||||||
|
|
||||||
|
<!-- Группа --> |
||||||
|
<div style="display:flex;flex-direction:column;gap:10px"> |
||||||
|
<label style="display:flex;align-items:center;gap:8px"> |
||||||
|
<input class="bb-checkbox" type="checkbox" checked /> ЛОР |
||||||
|
</label> |
||||||
|
<label style="display:flex;align-items:center;gap:8px"> |
||||||
|
<input class="bb-checkbox" type="checkbox" /> Аудиология |
||||||
|
</label> |
||||||
|
</div>`;
|
||||||
|
|
||||||
|
const codeRadio = `<div style="display:flex;flex-direction:column;gap:10px" role="radiogroup">
|
||||||
|
<label style="display:flex;align-items:center;gap:8px"> |
||||||
|
<input class="bb-radio" type="radio" name="visit" value="first" checked /> |
||||||
|
Первичный приём |
||||||
|
</label> |
||||||
|
<label style="display:flex;align-items:center;gap:8px"> |
||||||
|
<input class="bb-radio" type="radio" name="visit" value="repeat" /> |
||||||
|
Повторный приём |
||||||
|
</label> |
||||||
|
<label style="display:flex;align-items:center;gap:8px"> |
||||||
|
<input class="bb-radio" type="radio" name="visit" value="online" /> |
||||||
|
Онлайн-консультация |
||||||
|
</label> |
||||||
|
</div>`;
|
||||||
|
|
||||||
|
const codeToggle = `import { Toggle } from "@/components/ui/Toggle";
|
||||||
|
|
||||||
|
// Базовый тумблер
|
||||||
|
<Toggle /> |
||||||
|
|
||||||
|
// С меткой
|
||||||
|
<Toggle label="Получать уведомления" /> |
||||||
|
|
||||||
|
// По умолчанию включён
|
||||||
|
<Toggle defaultChecked label="Email-рассылка" /> |
||||||
|
|
||||||
|
// Заблокирован
|
||||||
|
<Toggle disabled label="Настройка недоступна" />`;
|
||||||
|
|
||||||
|
return ( |
||||||
|
<div className="max-w-4xl mx-auto px-8 py-10"> |
||||||
|
{/* Заголовок */} |
||||||
|
<div className="mb-10 pb-6 border-b" style={{ borderColor: "var(--bb-border)" }}> |
||||||
|
<p |
||||||
|
className="text-xs font-semibold uppercase tracking-widest mb-2" |
||||||
|
style={{ color: "var(--brand-053m)" }} |
||||||
|
> |
||||||
|
Компоненты → 3.2 |
||||||
|
</p> |
||||||
|
<h1 className="text-3xl font-semibold mb-3" style={{ color: "var(--bb-text)" }}> |
||||||
|
Форм-контролы |
||||||
|
</h1> |
||||||
|
<p className="text-base max-w-2xl" style={{ color: "var(--bb-text-muted)" }}> |
||||||
|
Элементы ввода данных: текстовые поля, выпадающие списки, флажки, переключатели. |
||||||
|
Применяются в формах записи, фильтрах и настройках. |
||||||
|
</p> |
||||||
|
</div> |
||||||
|
|
||||||
|
{/* 1. Input */} |
||||||
|
<Section |
||||||
|
id="input" |
||||||
|
title="Текстовое поле" |
||||||
|
subtitle="Базовый элемент ввода текста. Класс .bb-input." |
||||||
|
> |
||||||
|
<div className="grid grid-cols-1 sm:grid-cols-2 gap-4 mb-4"> |
||||||
|
<StateCard label="Default" hint="Стандартное состояние"> |
||||||
|
<FieldLabel text="Имя пациента" required /> |
||||||
|
<input className="bb-input" type="text" placeholder="Иван Иванов" readOnly /> |
||||||
|
<FieldHint text="Укажите имя как в паспорте" /> |
||||||
|
</StateCard> |
||||||
|
|
||||||
|
<StateCard label="Focus" hint="border #7ecfca + box-shadow rgba(126,207,202,0.2)"> |
||||||
|
<FieldLabel text="Имя пациента" required /> |
||||||
|
<input |
||||||
|
className="bb-input" |
||||||
|
type="text" |
||||||
|
defaultValue="Иван" |
||||||
|
readOnly |
||||||
|
style={{ |
||||||
|
borderColor: "var(--brand-053m)", |
||||||
|
boxShadow: "0 0 0 3px rgba(126,207,202,0.2)", |
||||||
|
}} |
||||||
|
/> |
||||||
|
<FieldHint text="Укажите имя как в паспорте" /> |
||||||
|
</StateCard> |
||||||
|
|
||||||
|
<StateCard label="Error" hint="border #dc2626 + .bb-error + сообщение об ошибке"> |
||||||
|
<FieldLabel text="Имя пациента" required /> |
||||||
|
<input |
||||||
|
className="bb-input bb-error" |
||||||
|
type="text" |
||||||
|
defaultValue="ив" |
||||||
|
readOnly |
||||||
|
/> |
||||||
|
<FieldError text="Минимум 3 символа" /> |
||||||
|
</StateCard> |
||||||
|
|
||||||
|
<StateCard label="Disabled" hint="opacity: 0.5 + cursor: not-allowed"> |
||||||
|
<FieldLabel text="Email (только чтение)" /> |
||||||
|
<input |
||||||
|
className="bb-input" |
||||||
|
type="text" |
||||||
|
defaultValue="ivan@example.com" |
||||||
|
disabled |
||||||
|
/> |
||||||
|
<FieldHint text="Email нельзя изменить" /> |
||||||
|
</StateCard> |
||||||
|
</div> |
||||||
|
|
||||||
|
{/* Password */} |
||||||
|
<div |
||||||
|
className="rounded-xl border p-4" |
||||||
|
style={{ borderColor: "var(--bb-border)", background: "var(--bb-sidebar-bg)" }} |
||||||
|
> |
||||||
|
<p className="text-xs font-semibold uppercase tracking-widest mb-3" style={{ color: "var(--bb-text-muted)" }}> |
||||||
|
Тип password |
||||||
|
</p> |
||||||
|
<div className="max-w-sm"> |
||||||
|
<FieldLabel text="Пароль" required /> |
||||||
|
<input className="bb-input" type="password" placeholder="Введите пароль" readOnly /> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</Section> |
||||||
|
|
||||||
|
{/* 2. Textarea */} |
||||||
|
<Section |
||||||
|
id="textarea" |
||||||
|
title="Многострочный текст" |
||||||
|
subtitle="Поле для длинного ввода. Класс .bb-textarea." |
||||||
|
> |
||||||
|
<div className="grid grid-cols-1 sm:grid-cols-2 gap-4"> |
||||||
|
<StateCard label="Default" hint="Стандартное состояние · resize: vertical"> |
||||||
|
<FieldLabel text="Комментарий к записи" /> |
||||||
|
<textarea |
||||||
|
className="bb-textarea" |
||||||
|
rows={3} |
||||||
|
placeholder="Опишите симптомы или пожелания..." |
||||||
|
readOnly |
||||||
|
/> |
||||||
|
</StateCard> |
||||||
|
|
||||||
|
<StateCard label="Focus" hint="border #7ecfca + box-shadow"> |
||||||
|
<FieldLabel text="Комментарий к записи" /> |
||||||
|
<textarea |
||||||
|
className="bb-textarea" |
||||||
|
rows={3} |
||||||
|
defaultValue="Беспокоит боль в горле..." |
||||||
|
readOnly |
||||||
|
style={{ |
||||||
|
borderColor: "var(--brand-053m)", |
||||||
|
boxShadow: "0 0 0 3px rgba(126,207,202,0.2)", |
||||||
|
}} |
||||||
|
/> |
||||||
|
</StateCard> |
||||||
|
</div> |
||||||
|
</Section> |
||||||
|
|
||||||
|
{/* 3. Select */} |
||||||
|
<Section |
||||||
|
id="select" |
||||||
|
title="Выпадающий список" |
||||||
|
subtitle="Выбор из предопределённых вариантов. Класс .bb-select." |
||||||
|
> |
||||||
|
<div className="grid grid-cols-1 sm:grid-cols-2 gap-4"> |
||||||
|
<StateCard label="Default" hint="Нативный select с кастомной стрелкой"> |
||||||
|
<FieldLabel text="Специализация" /> |
||||||
|
<select className="bb-select"> |
||||||
|
<option value="">Выберите специализацию</option> |
||||||
|
<option value="lor">ЛОР — ухо, горло, нос</option> |
||||||
|
<option value="aud">Аудиология</option> |
||||||
|
<option value="ped">ЛОР (детская)</option> |
||||||
|
</select> |
||||||
|
</StateCard> |
||||||
|
|
||||||
|
<StateCard label="Выбрано значение" hint="Нативное поведение браузера"> |
||||||
|
<FieldLabel text="Специализация" /> |
||||||
|
<select className="bb-select" defaultValue="lor"> |
||||||
|
<option value="">Выберите специализацию</option> |
||||||
|
<option value="lor">ЛОР — ухо, горло, нос</option> |
||||||
|
<option value="aud">Аудиология</option> |
||||||
|
<option value="ped">ЛОР (детская)</option> |
||||||
|
</select> |
||||||
|
</StateCard> |
||||||
|
</div> |
||||||
|
</Section> |
||||||
|
|
||||||
|
{/* 4. Checkbox */} |
||||||
|
<Section |
||||||
|
id="checkbox" |
||||||
|
title="Флажок" |
||||||
|
subtitle="Независимый выбор одного или нескольких вариантов. Класс .bb-checkbox." |
||||||
|
> |
||||||
|
<div className="grid grid-cols-1 sm:grid-cols-2 gap-4"> |
||||||
|
<StateCard label="Одиночный флажок" hint="Согласие с условиями, подтверждение"> |
||||||
|
<div className="flex flex-col gap-3"> |
||||||
|
<label className="flex items-center gap-2 cursor-pointer"> |
||||||
|
<input type="checkbox" className="bb-checkbox" /> |
||||||
|
<span className="text-sm" style={{ color: "var(--bb-text)" }}> |
||||||
|
Согласен с условиями |
||||||
|
</span> |
||||||
|
</label> |
||||||
|
<label className="flex items-center gap-2 cursor-pointer"> |
||||||
|
<input type="checkbox" className="bb-checkbox" defaultChecked /> |
||||||
|
<span className="text-sm" style={{ color: "var(--bb-text)" }}> |
||||||
|
Получать уведомления |
||||||
|
</span> |
||||||
|
</label> |
||||||
|
<label |
||||||
|
className="flex items-center gap-2" |
||||||
|
style={{ opacity: 0.5, cursor: "not-allowed" }} |
||||||
|
> |
||||||
|
<input type="checkbox" className="bb-checkbox" disabled /> |
||||||
|
<span className="text-sm" style={{ color: "var(--bb-text)" }}> |
||||||
|
Недоступная опция |
||||||
|
</span> |
||||||
|
</label> |
||||||
|
</div> |
||||||
|
</StateCard> |
||||||
|
|
||||||
|
<StateCard label="Группа флажков" hint="Выбор нескольких специализаций"> |
||||||
|
<FieldLabel text="Интересующие направления" /> |
||||||
|
<div className="flex flex-col gap-2.5 mt-1"> |
||||||
|
{["ЛОР — ухо, горло, нос", "Аудиология", "ЛОР (детская)", "Слухопротезирование"].map( |
||||||
|
(item, i) => ( |
||||||
|
<label key={item} className="flex items-center gap-2 cursor-pointer"> |
||||||
|
<input |
||||||
|
type="checkbox" |
||||||
|
className="bb-checkbox" |
||||||
|
defaultChecked={i === 0} |
||||||
|
/> |
||||||
|
<span className="text-sm" style={{ color: "var(--bb-text)" }}> |
||||||
|
{item} |
||||||
|
</span> |
||||||
|
</label> |
||||||
|
) |
||||||
|
)} |
||||||
|
</div> |
||||||
|
</StateCard> |
||||||
|
</div> |
||||||
|
</Section> |
||||||
|
|
||||||
|
{/* 5. Radio */} |
||||||
|
<Section |
||||||
|
id="radio" |
||||||
|
title="Переключатель варианта" |
||||||
|
subtitle="Выбор одного из взаимоисключающих вариантов. Класс .bb-radio." |
||||||
|
> |
||||||
|
<div className="grid grid-cols-1 sm:grid-cols-2 gap-4"> |
||||||
|
<StateCard label="Тип приёма" hint="Один выбранный из нескольких"> |
||||||
|
<FieldLabel text="Тип приёма" /> |
||||||
|
<div className="flex flex-col gap-2.5 mt-1" role="radiogroup"> |
||||||
|
{[ |
||||||
|
{ value: "first", label: "Первичный приём", checked: true }, |
||||||
|
{ value: "repeat", label: "Повторный приём", checked: false }, |
||||||
|
{ value: "online", label: "Онлайн-консультация", checked: false }, |
||||||
|
].map(({ value, label, checked }) => ( |
||||||
|
<label key={value} className="flex items-center gap-2 cursor-pointer"> |
||||||
|
<input |
||||||
|
type="radio" |
||||||
|
className="bb-radio" |
||||||
|
name="visit-type-demo" |
||||||
|
defaultChecked={checked} |
||||||
|
/> |
||||||
|
<span className="text-sm" style={{ color: "var(--bb-text)" }}> |
||||||
|
{label} |
||||||
|
</span> |
||||||
|
</label> |
||||||
|
))} |
||||||
|
</div> |
||||||
|
</StateCard> |
||||||
|
|
||||||
|
<StateCard label="С отключённым вариантом" hint="disabled скрывает недоступный выбор"> |
||||||
|
<FieldLabel text="Способ контакта" /> |
||||||
|
<div className="flex flex-col gap-2.5 mt-1" role="radiogroup"> |
||||||
|
{[ |
||||||
|
{ value: "phone", label: "Телефон", disabled: false, checked: true }, |
||||||
|
{ value: "sms", label: "SMS", disabled: false, checked: false }, |
||||||
|
{ value: "whatsapp", label: "WhatsApp (скоро)", disabled: true, checked: false }, |
||||||
|
].map(({ value, label, disabled, checked }) => ( |
||||||
|
<label |
||||||
|
key={value} |
||||||
|
className="flex items-center gap-2" |
||||||
|
style={{ cursor: disabled ? "not-allowed" : "pointer", opacity: disabled ? 0.5 : 1 }} |
||||||
|
> |
||||||
|
<input |
||||||
|
type="radio" |
||||||
|
className="bb-radio" |
||||||
|
name="contact-demo" |
||||||
|
disabled={disabled} |
||||||
|
defaultChecked={checked} |
||||||
|
/> |
||||||
|
<span className="text-sm" style={{ color: "var(--bb-text)" }}> |
||||||
|
{label} |
||||||
|
</span> |
||||||
|
</label> |
||||||
|
))} |
||||||
|
</div> |
||||||
|
</StateCard> |
||||||
|
</div> |
||||||
|
</Section> |
||||||
|
|
||||||
|
{/* 6. Toggle */} |
||||||
|
<Section |
||||||
|
id="toggle" |
||||||
|
title="Тумблер" |
||||||
|
subtitle="Булевый переключатель «включено / выключено». Компонент Toggle." |
||||||
|
> |
||||||
|
<div className="grid grid-cols-1 sm:grid-cols-2 gap-4"> |
||||||
|
<div |
||||||
|
className="rounded-xl border p-5" |
||||||
|
style={{ borderColor: "var(--bb-border)" }} |
||||||
|
> |
||||||
|
<p className="text-sm font-medium mb-4" style={{ color: "var(--bb-text)" }}> |
||||||
|
Интерактивные примеры |
||||||
|
</p> |
||||||
|
<div className="flex flex-col gap-4"> |
||||||
|
<Toggle label="Получать уведомления" /> |
||||||
|
<Toggle defaultChecked label="Email-рассылка" /> |
||||||
|
<Toggle defaultChecked label="Push-уведомления" /> |
||||||
|
<Toggle disabled label="Недоступная настройка" /> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
|
||||||
|
<div |
||||||
|
className="rounded-xl border p-5" |
||||||
|
style={{ borderColor: "var(--bb-border)" }} |
||||||
|
> |
||||||
|
<p className="text-sm font-medium mb-4" style={{ color: "var(--bb-text)" }}> |
||||||
|
Состояния |
||||||
|
</p> |
||||||
|
<div className="flex flex-col gap-4"> |
||||||
|
<div className="flex items-center justify-between"> |
||||||
|
<span className="text-sm" style={{ color: "var(--bb-text-muted)" }}>Выкл (default)</span> |
||||||
|
<Toggle /> |
||||||
|
</div> |
||||||
|
<div className="flex items-center justify-between"> |
||||||
|
<span className="text-sm" style={{ color: "var(--bb-text-muted)" }}>Вкл (defaultChecked)</span> |
||||||
|
<Toggle defaultChecked /> |
||||||
|
</div> |
||||||
|
<div className="flex items-center justify-between"> |
||||||
|
<span className="text-sm" style={{ color: "var(--bb-text-muted)" }}>Disabled</span> |
||||||
|
<Toggle disabled /> |
||||||
|
</div> |
||||||
|
<div className="flex items-center justify-between"> |
||||||
|
<span className="text-sm" style={{ color: "var(--bb-text-muted)" }}>Disabled + вкл</span> |
||||||
|
<Toggle disabled defaultChecked /> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</Section> |
||||||
|
|
||||||
|
{/* 7. Примеры кода */} |
||||||
|
<Section |
||||||
|
id="code" |
||||||
|
title="Примеры кода" |
||||||
|
subtitle="Скопируйте HTML или JSX для использования в проекте." |
||||||
|
> |
||||||
|
<div className="space-y-4"> |
||||||
|
<CodeCopy lang="HTML — Input" code={codeInput} /> |
||||||
|
<CodeCopy lang="HTML — Textarea" code={codeTextarea} /> |
||||||
|
<CodeCopy lang="HTML — Select" code={codeSelect} /> |
||||||
|
<CodeCopy lang="HTML — Checkbox" code={codeCheckbox} /> |
||||||
|
<CodeCopy lang="HTML — Radio" code={codeRadio} /> |
||||||
|
<CodeCopy lang="JSX (React) — Toggle" code={codeToggle} /> |
||||||
|
</div> |
||||||
|
</Section> |
||||||
|
|
||||||
|
{/* LLM-блок */} |
||||||
|
<LlmBlock path="/components/forms" version="v1.0" specText={LLM_FORMS_TEXT}> |
||||||
|
<LlmSection title="Элементы ввода" /> |
||||||
|
<LlmTable |
||||||
|
headers={["Элемент", "CSS класс", "Тег", "Высота", "Описание"]} |
||||||
|
rows={[ |
||||||
|
["Input", ".bb-input", "<input>", "~40px", "Текстовое поле, email, password"], |
||||||
|
["Textarea", ".bb-textarea", "<textarea>", "≥100px", "Многострочный ввод, resize:vertical"], |
||||||
|
["Select", ".bb-select", "<select>", "~40px", "Выбор из списка, кастомная стрелка"], |
||||||
|
["Checkbox", ".bb-checkbox", "<input type=checkbox>", "16×16px", "Независимый выбор"], |
||||||
|
["Radio", ".bb-radio", "<input type=radio>", "16×16px", "Выбор одного из группы"], |
||||||
|
["Toggle", ".bb-toggle-track", "React-компонент", "24px", "Булев переключатель"], |
||||||
|
]} |
||||||
|
/> |
||||||
|
<LlmSection title="Состояния полей (Input / Textarea / Select)" /> |
||||||
|
<LlmTable |
||||||
|
headers={["Состояние", "Стиль"]} |
||||||
|
rows={[ |
||||||
|
["default", "border: 1.5px solid #e5e7eb"], |
||||||
|
["focus", "border: #7ecfca + box-shadow: 0 0 0 3px rgba(126,207,202,0.2)"], |
||||||
|
["error", "border: #dc2626 (+ класс .bb-error)"], |
||||||
|
["disabled", "opacity: 0.5 + cursor: not-allowed + bg: #f8f9fa"], |
||||||
|
]} |
||||||
|
/> |
||||||
|
<LlmSection title="Параметры Toggle" /> |
||||||
|
<LlmTable |
||||||
|
headers={["Параметр", "Тип", "По умолч.", "Описание"]} |
||||||
|
rows={[ |
||||||
|
["defaultChecked", "boolean", "false", "Начальное состояние"], |
||||||
|
["disabled", "boolean", "false", "Блокирует взаимодействие"], |
||||||
|
["label", "string", "—", "Текстовая метка справа от тумблера"], |
||||||
|
["onChange", "(checked: boolean) => void", "—", "Колбэк при изменении"], |
||||||
|
]} |
||||||
|
/> |
||||||
|
<LlmSection title="Правила применения" /> |
||||||
|
<LlmRules |
||||||
|
rules={[ |
||||||
|
{ ok: true, text: "Метка (label) всегда над полем, font-weight: 500" }, |
||||||
|
{ ok: true, text: "Обязательные поля помечены * красным (#dc2626)" }, |
||||||
|
{ ok: true, text: "Hint-текст серым под полем (font-size: 12px)" }, |
||||||
|
{ ok: true, text: "Ошибка — красный текст вместо hint" }, |
||||||
|
{ ok: true, text: "Checkbox-группы — вертикальный список с gap: 10px" }, |
||||||
|
{ ok: true, text: "Toggle — для булевых настроек включить/выключить" }, |
||||||
|
{ ok: false, text: "Не использовать placeholder вместо label" }, |
||||||
|
{ ok: false, text: "Не скрывать признак обязательности поля" }, |
||||||
|
]} |
||||||
|
/> |
||||||
|
</LlmBlock> |
||||||
|
</div> |
||||||
|
); |
||||||
|
} |
||||||
@ -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> |
||||||
|
); |
||||||
|
} |
||||||
Loading…
Reference in new issue