React Component Library

Це Storybook-базована бібліотека UI-компонентів для React.

Запуск

Встановити залежності:bash npm install npm run storybook Відкрити у браузері: http://localhost:6006

Компоненти

1. Input

Типи: text, password, number

• Можливість очищення (clearable)
• Для пароля: іконка toggle видимості

Приклад використання:

  type="text"
  placeholder="Enter text"
  clearable
  showPasswordToggle
    />;

Скріншоти:

• Input error
  

• Password input (toggle visibility)
  

---

2. Toast

Компонент сповіщень з анімаціями, авто-зникненням та гнучким позиціонуванням.

Приклад використання:

  type="success"
  title="Success!"
  message="Operation completed successfully"
  duration={3000}
/>;

• All Toasts
  

• Closable toast
  

---

3. Sidebar Menu

Слайдова бокова панель з вкладеними пунктами та адаптивним дизайном.

Приклад використання:

import { SidebarMenu } from "./components/SidebarMenu";

const menuItems = [
  { id: "home", label: "Home" },
  { id: "settings", label: "Settings" },
];

<SidebarMenu
  isOpen={true}
  onClose={() => console.log("Closed")}
  items={menuItems}
/>;

• Sidebar opened nested
  

• Sidebar opened 1lvl
  

💡 Поради

Використовуйте Storybook для швидкого прототипування UI.

Компоненти повністю контрольовані через пропси.

Додавайте нові компоненти за шаблоном існуючих у src/components.