Moraxa UI

🎮 Nowoczesna biblioteka komponentów React z futurystycznym designem inspirowanym motywami gaming i sci-fi.

✨ Funkcje

• 🎨 Trzy motywy kolorystyczne: Tear (czerwony), BFG (zielony), Plasma (niebieski)
• 🎮 Gaming design: Inspirowany estetyką gier i interfejsów sci-fi
• 📱 Responsive: Automatyczne skalowanie na urządzeniach mobilnych
• ♿ Dostępność: Pełne wsparcie dla screen readerów i nawigacji klawiaturą
• 🎯 TypeScript: Pełne wsparcie typów
• 🔧 Customizable: Łatwe nadpisywanie CSS variables
• 📦 Tree-shakable: Importuj tylko to czego potrzebujesz

📦 Instalacja

# npm
npm install @rip-tear/moraxa-ui

# pnpm
pnpm add @rip-tear/moraxa-ui

# yarn
yarn add @rip-tear/moraxa-ui

🚀 Szybki start

// main.tsx
import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
import '@rip-tear/moraxa-ui/index.css';

ReactDOM.createRoot(document.getElementById('root')!).render(<App />);

// App.tsx
import { Button, Theme, Block } from '@rip-tear/moraxa-ui';

export default function App() {
  return (
    <Theme>
      <Block>
        <h1>Witaj w Moraxa UI</h1>
        <div style={{ display: 'flex', gap: '1rem' }}>
          <Button>Domyślny</Button>
          <Button theme="bfg">BFG</Button>
          <Button theme="plasma" isLoading>Ładowanie</Button>
        </div>
      </Block>
    </Theme>
  );
}

🎨 Komponenty

Button

Wszechstronny przycisk z animacjami i trzema motywami.

<Button 
  theme="tear" 
  size={24}
  leftIcon={<FlameIcon />}
  isLoading={false}
  onClick={() => console.log('Clicked!')}
>
  Kliknij mnie
</Button>

Input

Stylowy input z walidacją i różnymi wariantami.

<Input 
  placeholder="Wprowadź tekst..."
  theme="plasma"
  error="To pole jest wymagane"
/>

Select

Dropdown z customowym stylingiem.

<Select 
  options={[
    { value: '1', label: 'Opcja 1' },
    { value: '2', label: 'Opcja 2' }
  ]}
  theme="bfg"
/>

Table

Tabela z sortowaniem i paginacją.

<Table 
  data={data}
  columns={columns}
  theme="tear"
  sortable
/>

Modal

Responsywne okno modalne.

<Modal 
  isOpen={isOpen}
  onClose={() => setIsOpen(false)}
  title="Tytuł"
>
  Zawartość modala
</Modal>

Navbar & Sidebar

Komponenty nawigacyjne.

<Navbar 
  brand="Moraxa"
  items={navItems}
  theme="plasma"
/>

<Sidebar 
  items={sidebarItems}
  isCollapsed={false}
/>

🎮 Motywy

Tear (Domyślny)

Czerwony motyw inspirowany klasycznymi grami FPS.

BFG

Zielony motyw przypominający interfejsy wojskowe.

Plasma

Niebieski motyw w stylu sci-fi.

// Używanie motywów
<Button theme="tear">Czerwony</Button>
<Button theme="bfg">Zielony</Button>
<Button theme="plasma">Niebieski</Button>

🎯 Ikony

Biblioteka zawiera zestaw ikon dopasowanych do designu:

import { 
  FlameIcon, 
  UserIcon, 
  SettingsIcon,
  ArrowLeftIcon,
  DashboardIcon 
} from '@rip-tear/moraxa-ui';

<Button leftIcon={<FlameIcon />}>
  Z ikoną
</Button>

📱 Responsive Design

Wszystkie komponenty automatycznie skalują się na urządzeniach mobilnych:

// Automatyczne zmniejszanie czcionek na mobile
.fs-24 { 
  font-size: 24px; 
  @media (max-width: 768px) { 
    font-size: 20px; 
  } 
}

🎨 Customizacja

CSS Variables

:root {
  --color-red: #ff2e5f;
  --color-green: #00ff7f;
  --color-blue: #00bfff;
  --bg-primary: #0a0a0a;
  --text-primary: #ffffff;
}

SASS Variables

$themes: (
  tear: #ff2e5f,
  bfg: #00ff7f,
  plasma: #00bfff
);

♿ Dostępność

• Pełne wsparcie dla screen readerów
• Nawigacja klawiaturą
• Wysokie kontrasty kolorów
• ARIA labels i role
• Focus management

📚 Storybook

Sprawdź wszystkie komponenty w akcji:

pnpm storybook

🔧 Development

# Klonowanie
git clone https://github.com/RIP-Tear/moraxa-ui.git

# Instalacja zależności
pnpm install

# Development
pnpm dev

# Build
pnpm build

# Testy
pnpm test

📄 Licencja

MIT © RIP-Tear

🤝 Wsparcie

• 🐛 Zgłoś błąd
• 💡 Zaproponuj funkcję
• 📖 Dokumentacja