G-UI

Modern, elegant React UI library with authentication forms, toast notifications, and social buttons.

🚀 Funkcje

• ✅ Formularze logowania i rejestracji z wbudowaną walidacją
• ✅ System Toast alertów z różnymi typami powiadomień
• ✅ Przyciski społecznościowe (Discord, GitHub, Website, Custom)
• ✅ Zaawansowany system Captcha (custom matematyczna + Google reCAPTCHA)
• ✅ Lokalna baza danych do zarządzania użytkownikami w localStorage
• ✅ Discord Welcome System - automatyczne wiadomości powitalne
• ✅ EasyDiscordBot - uproszczony API do tworzenia botów Discord
• ✅ Pełne typowanie TypeScript
• ✅ Nowoczesny design z obsługą dark mode
• ✅ Responsywność na wszystkich urządzeniach
• ✅ Minimalne dependencies (React + opcjonalne peer dependencies)

📦 Instalacja

npm install g-ui

yarn add g-ui

pnpm add g-ui

🎯 Szybki start

1. Import stylów

import 'g-ui/dist/index.css';

2. Dodaj ToastProvider do swojej aplikacji

import React from 'react';
import { ToastProvider } from 'g-ui';
import App from './App';

function Root() {
  return (
    <ToastProvider position="top-right">
      <App />
    </ToastProvider>
  );
}

export default Root;

3. Użyj komponentów

import React from 'react';
import { LoginForm, RegisterForm, useToast } from 'g-ui';

function App() {
  const { showSuccessToast, showErrorToast } = useToast();

  const handleLoginSuccess = (data) => {
    showSuccessToast('Zalogowano pomyślnie!');
    console.log('Login data:', data);
  };

  const handleLoginError = (error) => {
    showErrorToast(error);
  };

  return (
    <div>
      <LoginForm
        onSuccess={handleLoginSuccess}
        onError={handleLoginError}
        fields={{
          email: true,
          password: true,
          rememberMe: true
        }}
      />
    </div>
  );
}

export default App;

📚 Dokumentacja komponentów

LoginForm

Komponent formularza logowania z walidacją.

import { LoginForm } from 'g-ui';

<LoginForm
  fields={{
    email: true,        // Pole email
    username: false,    // Pole username (opcjonalne)
    password: true,     // Pole hasła
    rememberMe: false   // Checkbox "Zapamiętaj mnie"
  }}
  customLabels={{
    email: 'Adres email',
    password: 'Hasło',
    submit: 'Zaloguj się'
  }}
  apiEndpoint="/api/login"  // Endpoint API (opcjonalny)
  onSubmit={(data) => console.log(data)}
  onSuccess={(data) => console.log('Success:', data)}
  onError={(error) => console.log('Error:', error)}
/>

RegisterForm

Komponent formularza rejestracji z obsługą captcha.

import { RegisterForm } from 'g-ui';

<RegisterForm
  fields={{
    email: true,
    username: true,
    password: true,
    confirmPassword: true
  }}
  showCaptcha={true}
  captchaProvider="recaptcha"
  captchaConfig={{
    siteKey: 'your-recaptcha-site-key'
  }}
  customLabels={{
    email: 'Adres email',
    username: 'Nazwa użytkownika',
    password: 'Hasło',
    confirmPassword: 'Potwierdź hasło',
    submit: 'Zarejestruj się'
  }}
  apiEndpoint="/api/register"
  onSuccess={(data) => console.log('Registered:', data)}
  onError={(error) => console.log('Error:', error)}
/>

Toast System

System powiadomień toast z różnymi typami.

import { useToast } from 'g-ui';

function MyComponent() {
  const { 
    showSuccessToast, 
    showErrorToast, 
    showWarningToast, 
    showInfoToast 
  } = useToast();

  return (
    <div>
      <button onClick={() => showSuccessToast('Operacja udana!')}>
        Success Toast
      </button>
      <button onClick={() => showErrorToast('Wystąpił błąd!')}>
        Error Toast
      </button>
      <button onClick={() => showWarningToast('Ostrzeżenie!')}>
        Warning Toast
      </button>
      <button onClick={() => showInfoToast('Informacja')}>
        Info Toast
      </button>
    </div>
  );
}

ToastProvider

Provider dla systemu toastów.

import { ToastProvider } from 'g-ui';

<ToastProvider
  position="top-right"    // top-left, top-right, top-center, bottom-left, bottom-right, bottom-center
  maxToasts={5}           // Maksymalna liczba toastów
  defaultDuration={5000}  // Czas wyświetlania w ms
>
  <YourApp />
</ToastProvider>

Przyciski społecznościowe

Gotowe, eleganckie przyciski z ikonami.

import { 
  DiscordButton, 
  GitHubButton, 
  WebsiteButton, 
  CustomLinkButton 
} from 'g-ui';

// Discord Button
<DiscordButton
  href="https://discord.gg/your-server"
  variant="filled"  // filled, outline, ghost
  size="md"        // sm, md, lg
>
  Dołącz do Discord
</DiscordButton>

// GitHub Button
<GitHubButton
  username="yourusername"
  repository="your-repo"  // opcjonalne
  variant="outline"
>
  GitHub Profile
</GitHubButton>

// Website Button
<WebsiteButton
  href="https://yourwebsite.com"
  variant="filled"
>
  Odwiedź stronę
</WebsiteButton>

// Custom Link Button
<CustomLinkButton
  href="https://example.com"
  icon={<YourCustomIcon />}  // opcjonalna custom ikona
  variant="ghost"
>
  Custom Link
</CustomLinkButton>

System Captcha

G-UI oferuje elastyczny system captcha z wyborem między różnymi dostawcami:

Użycie CaptchaWrapper (zalecane)

import { CaptchaWrapper } from 'g-ui';

function MyForm() {
  return (
    <CaptchaWrapper
      provider="custom" // lub "recaptcha"
      config={{
        difficulty: 'medium',
        refreshButton: true
      }}
      onChange={(token) => console.log('Captcha token:', token)}
    />
  );
}

Użycie CustomCaptcha (matematyczna captcha)

import { CustomCaptcha } from 'g-ui';

function MyForm() {
  return (
    <CustomCaptcha
      difficulty="hard"
      onChange={(verified, token) => {
        if (verified) {
          console.log('Captcha rozwiązana!', token);
        }
      }}
      onError={(error) => console.error(error)}
    />
  );
}

Użycie Google reCAPTCHA

import { GoogleReCAPTCHA } from 'g-ui';

function MyForm() {
  return (
    <GoogleReCAPTCHA
      siteKey="your-recaptcha-site-key"
      onChange={(token) => console.log('reCAPTCHA token:', token)}
      theme="dark"
    />
  );
}

Lokalna Baza Danych

G-UI zawiera wbudowany system lokalnej bazy danych do zarządzania użytkownikami w localStorage:

Hook useLocalDatabase

import { useLocalDatabase } from 'g-ui';

function UserManagement() {
  const {
    users,
    isLoading,
    error,
    registerUser,
    loginUser,
    getUserByEmail,
    clearAllUsers
  } = useLocalDatabase();

  const handleRegister = async () => {
    const success = await registerUser({
      email: '[email protected]',
      username: 'testuser',
      password: 'password123',
      isActive: true
    });
    
    if (success) {
      console.log('Użytkownik zarejestrowany!');
    }
  };

  const handleLogin = async () => {
    const user = await loginUser({
      email: '[email protected]',
      password: 'password123'
    });
    
    if (user) {
      console.log('Zalogowano:', user);
    }
  };

  return (
    <div>
      <h3>Zarządzanie użytkownikami</h3>
      <p>Liczba użytkowników: {users.length}</p>
      {error && <p style={{color: 'red'}}>{error}</p>}
      {isLoading && <p>Ładowanie...</p>}
      
      <button onClick={handleRegister}>Zarejestruj użytkownika</button>
      <button onClick={handleLogin}>Zaloguj użytkownika</button>
      <button onClick={clearAllUsers}>Wyczyść wszystkich</button>
    </div>
  );
}

Bezpośrednie użycie klasy LocalDatabase

import { LocalDatabase } from 'g-ui';

// Rejestracja
const success = LocalDatabase.createUser({
  email: '[email protected]',
  username: 'testuser',
  password: 'password123',
  isActive: true
});

// Logowanie
const user = LocalDatabase.validateUser({
  email: '[email protected]',
  password: 'password123'
});

// Pobranie statystyk
const stats = LocalDatabase.getStats();
console.log(`Użytkownicy: ${stats.totalUsers}, Aktywni: ${stats.activeUsers}`);

// Eksport/Import danych
const backup = LocalDatabase.exportData();
LocalDatabase.importData(backup);

Discord Welcome System

System automatycznych wiadomości powitalnych dla Discord:

import { DiscordWelcome, useLocalDatabase } from 'g-ui';

function MyApp() {
  const { registerUser } = useLocalDatabase();
  
  const discordConfig = {
    botToken: 'YOUR_BOT_TOKEN',
    channelId: 'CHANNEL_ID',
    enabled: true,
    customMessage: 'Witamy na serwerze!',
    embedColor: '#7289da',
    mentionUser: true
  };

  const handleUserRegistration = async (userData) => {
    const success = await registerUser(userData);
    
    if (success) {
      // Wyślij wiadomość powitalną na Discord
      await DiscordWelcome.sendWelcome(
        userData.username,
        userData.username,
        discordConfig
      );
    }
  };

  return (
    <div>
      {/* Twoja aplikacja */}
    </div>
  );
}

EasyDiscordBot - Uproszczony Bot Discord

Stwórz bota Discord w kilku liniach kodu:

import { EasyDiscordBot } from 'g-ui';

// Podstawowa konfiguracja
const bot = new EasyDiscordBot({
  token: 'YOUR_BOT_TOKEN',
  prefix: '!',
  activity: {
    name: 'g-ui bot!',
    type: 0 // Playing
  }
});

// Dodawanie komend
bot.addCommand('ping', async (message) => {
  await message.reply('🏓 Pong!');
});

bot.addCommand('hello', async (message, args) => {
  const user = args[0] || message.author.username;
  await message.reply(`👋 Cześć ${user}!`);
});

// Dodawanie handlerów eventów
bot.addEventHandler('guildMemberAdd', async (member) => {
  console.log(`👋 Nowy użytkownik: ${member.user.tag}`);
});

// Uruchomienie bota
await bot.start();

Dostępne metody EasyDiscordBot

• start() - Uruchamia bota
• stop() - Zatrzymuje bota
• addCommand(name, handler) - Dodaje komendę
• addEventHandler(event, handler) - Dodaje handler eventu
• setStatus(activity, type) - Ustawia status bota
• getBotInfo() - Zwraca informacje o bocie
• isReady() - Sprawdza czy bot jest gotowy

Przykład z callbackami

const bot = new EasyDiscordBot({
  token: 'YOUR_BOT_TOKEN',
  prefix: '!',
  
  onReady: (client) => {
    console.log(`Bot ${client.user.tag} jest gotowy!`);
  },
  
  onError: (error) => {
    console.error('Błąd bota:', error.message);
  }
});

Zaawansowany przykład z wieloma komendami

import { EasyDiscordBot } from 'g-ui';

const bot = new EasyDiscordBot({
  token: 'YOUR_BOT_TOKEN',
  prefix: '!',
  activity: { name: 'na serwerze', type: 3 } // Watching
});

// Komenda ping z pomiarem opóźnienia
bot.addCommand('ping', async (message) => {
  const sent = await message.reply('🏓 Ping...');
  const timeDiff = sent.createdTimestamp - message.createdTimestamp;
  await sent.edit(`🏓 Pong! Latency: ${timeDiff}ms`);
});

// Komenda info o bocie
bot.addCommand('info', async (message) => {
  const info = bot.getBotInfo();
  if (info) {
    const embed = {
      title: '🤖 Informacje o bocie',
      fields: [
        { name: 'Serwery', value: info.guilds.toString(), inline: true },
        { name: 'Użytkownicy', value: info.users.toString(), inline: true },
        { name: 'Uptime', value: `${Math.floor(info.uptime / 60000)} min`, inline: true },
      ],
      color: 0x5865F2,
      timestamp: new Date().toISOString(),
    };
    await message.reply({ embeds: [embed] });
  }
});

// Handler dla nowych członków
bot.addEventHandler('guildMemberAdd', async (member) => {
  const channel = member.guild.channels.cache.find(ch => ch.name === 'welcome');
  if (channel) {
    await channel.send(`🎉 Witamy ${member} na serwerze!`);
  }
});

await bot.start();

Sprawdź examples/discord-bot-example.js dla pełnego przykładu użycia.

🎨 Customizacja

CSS Custom Properties

Możesz dostosować kolory używając CSS custom properties:

:root {
  --g-ui-primary: #3b82f6;
  --g-ui-primary-hover: #2563eb;
  --g-ui-success: #10b981;
  --g-ui-error: #ef4444;
  --g-ui-warning: #f59e0b;
  --g-ui-info: #3b82f6;
}

Własne style

Wszystkie komponenty mają prefiksy klas CSS g-ui-*, które możesz nadpisać:

.g-ui-form {
  max-width: 500px; /* Zmień szerokość formularza */
}

.g-ui-button--discord {
  background: linear-gradient(45deg, #5865f2, #7289da);
}

.g-ui-toast--success {
  border-left-color: #00ff00;
}

🛠️ Hook useForm

Zaawansowany hook do zarządzania formularzami.

import { useForm } from 'g-ui';

function MyCustomForm() {
  const {
    values,
    errors,
    isSubmitting,
    handleChange,
    handleSubmit,
    setFieldError,
    clearErrors,
    reset
  } = useForm({
    initialValues: {
      name: '',
      email: ''
    },
    validationRules: {
      name: (value) => value.length < 2 ? 'Nazwa za krótka' : null,
      email: (value) => !/\S+@\S+\.\S+/.test(value) ? 'Nieprawidłowy email' : null
    },
    onSubmit: async (data) => {
      // Twoja logika wysyłania
      console.log('Form data:', data);
    }
  });

  return (
    <form onSubmit={handleSubmit}>
      <input
        value={values.name}
        onChange={(e) => handleChange('name', e.target.value)}
        placeholder="Nazwa"
      />
      {errors.name && <span>{errors.name}</span>}
      
      <input
        value={values.email}
        onChange={(e) => handleChange('email', e.target.value)}
        placeholder="Email"
      />
      {errors.email && <span>{errors.email}</span>}
      
      <button type="submit" disabled={isSubmitting}>
        {isSubmitting ? 'Wysyłanie...' : 'Wyślij'}
      </button>
    </form>
  );
}

🔗 Kompatybilność

• React >= 16.8.0
• TypeScript >= 4.0.0
• Wsparcie dla ESM i CommonJS
• Kompatybilność z Vite, Next.js, Create React App

🤝 Wsparcie

Jeśli potrzebujesz pomocy lub masz pytania:

• Sprawdź dokumentację
• Skontaktuj się z autorem

🎉 Przykładowa aplikacja

Sprawdź folder /examples w repozytorium, aby zobaczyć pełne przykłady użycia wszystkich komponentów.

Wykonane przez: G-UI Team
Wersja: 1.0.0