create-szafir-app

Narzędzie CLI do tworzenia nowych aplikacji Vite z TypeScript, Tailwind CSS, zaawansowanymi komponentami fraktali i nowoczesnym zestawem narzędzi.

Instalacja

npm install -g create-szafir-app

Użycie

Podstawowe użycie:

npm create szafir-app@latest

Z konkretną nazwą projektu:

npm create szafir-app@latest moja-aplikacja

Alternatywnie:

npx create-szafir-app moja-aplikacja

Co zawiera szablon

• ⚡ Vite - szybki bundler dla aplikacji webowych
• 🔷 TypeScript - typowany JavaScript
• 🎨 Tailwind CSS - framework CSS z podejściem utility-first
• 🏗️ Preact - lekka alternatywa dla React z pełną kompatybilnością
• 🔄 Hot Module Replacement - natychmiastowe odświeżanie podczas developmentu
• 🧪 Vitest - szybkie testowanie jednostkowe
• 📚 Storybook - dokumentacja komponentów
• 🎯 Fractal Generation Library - zaawansowane generatory fraktali:
  • Operacje na liczbach zespolonych
  • Generator zbioru Mandelbrot
  • Generator zbioru Julia z predefiniowanymi presetami
  • Interaktywne komponenty z kontrolkami
  • System renderowania z paletami kolorów
  • Optymalizacje wydajnościowe
• 🎯 Modern ESLint - lintowanie kodu
• 🎭 TypeScript konfiguracja - pełna obsługa typów

Struktura projektu

moja-aplikacja/
├── src/
│   ├── components/          # Komponenty Preact + Komponenty fraktali
│   │   ├── FractalCanvas.tsx       # Canvas do renderowania fraktali
│   │   ├── MandelbrotViewer.tsx    # Interaktywny viewer Mandelbrot
│   │   ├── JuliaViewer.tsx         # Interaktywny viewer Julia
│   │   └── ...              # Inne komponenty UI
│   ├── fractals/            # Biblioteka matematyczna fraktali
│   │   ├── complex.ts       # Operacje na liczbach zespolonych
│   │   ├── mandelbrot.ts    # Generator zbioru Mandelbrot
│   │   ├── julia.ts         # Generator zbioru Julia
│   │   ├── renderer.ts      # System renderowania z paletami
│   │   └── types.ts         # Typy dla biblioteki
│   ├── pages/              # Strony aplikacji
│   ├── stores/             # Stan aplikacji (@preact/signals)
│   ├── styles/             # Style CSS i Tailwind
│   ├── types/              # Typy TypeScript
│   ├── hooks/              # Własne hooki Preact
│   └── assets/             # Zasoby (obrazki, ikony)
├── public/                 # Pliki publiczne
├── config/                 # Konfiguracja aplikacji
├── .storybook/            # Konfiguracja Storybook
├── index.html             # Główny plik HTML
├── package.json           # Zależności i skrypty
├── vite.config.ts         # Konfiguracja Vite
├── tsconfig.json          # Konfiguracja TypeScript
└── vitest.config.ts       # Konfiguracja Vitest

🎯 Przykłady użycia biblioteki fraktali

Podstawowe użycie komponentów:

import { MandelbrotViewer, JuliaViewer } from "./components/index.js";
import { JULIA_PRESETS } from "./fractals/index.js";

function App() {
  return (
    <div>
      {/* Interaktywny viewer Mandelbrot */}
      <MandelbrotViewer
        width={800}
        height={600}
        maxIterations={100}
        showControls={true}
      />

      {/* Julia z predefiniowanym presetem */}
      <JuliaViewer
        width={600}
        height={600}
        juliaC={JULIA_PRESETS.DRAGON}
        showControls={true}
      />
    </div>
  );
}

Programowe generowanie fraktali:

import {
  generateMandelbrot,
  generateJulia,
  JULIA_PRESETS,
} from "./fractals/index.js";

// Generator Mandelbrot
const mandelbrotResult = generateMandelbrot({
  width: 800,
  height: 600,
  maxIterations: 100,
  minReal: -2.5,
  maxReal: 1.0,
  minImaginary: -1.25,
  maxImaginary: 1.25,
});

// Generator Julia
const juliaResult = generateJulia({
  width: 600,
  height: 600,
  maxIterations: 100,
  juliaC: JULIA_PRESETS.SPIRAL,
});

console.log(`Mandelbrot wygenerowany w ${mandelbrotResult.generationTime}ms`);
console.log(`Julia wygenerowany w ${juliaResult.generationTime}ms`);

Dostępne skrypty

Po utworzeniu projektu, w katalogu projektu:

• npm run dev - uruchomienie serwera deweloperskiego
• npm run build - budowanie wersji produkcyjnej
• npm run preview - podgląd wersji produkcyjnej
• npm run test - uruchomienie testów
• npm run storybook - uruchomienie Storybook
• npm run build-storybook - budowanie Storybook

Przykład użycia

# Utworzenie nowego projektu
npm create szafir-app@latest moja-super-apka

# Przejście do katalogu
cd moja-super-apka

# Instalacja zależności
npm install

# Uruchomienie serwera deweloperskiego
npm run dev

Rozwój

Jeśli chcesz rozwijać ten generator:

1. Sklonuj repozytorium
2. Zmodyfikuj pliki w katalogu template/
3. Testuj zmiany lokalnie: node bin/create-szafir-app.js test-projekt

Licencja

MIT