React + TypeScript + Vite

This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.

Currently, two official plugins are available:

• @vitejs/plugin-react uses Babel for Fast Refresh
• @vitejs/plugin-react-swc uses SWC for Fast Refresh

Expanding the ESLint configuration

If you are developing a production application, we recommend updating the configuration to enable type-aware lint rules:

export default tseslint.config({
  extends: [
    // Remove ...tseslint.configs.recommended and replace with this
    ...tseslint.configs.recommendedTypeChecked,
    // Alternatively, use this for stricter rules
    ...tseslint.configs.strictTypeChecked,
    // Optionally, add this for stylistic rules
    ...tseslint.configs.stylisticTypeChecked,
  ],
  languageOptions: {
    // other options...
    parserOptions: {
      project: ['./tsconfig.node.json', './tsconfig.app.json'],
      tsconfigRootDir: import.meta.dirname,
    },
  },
})

You can also install eslint-plugin-react-x and eslint-plugin-react-dom for React-specific lint rules:

// eslint.config.js
import reactX from 'eslint-plugin-react-x'
import reactDom from 'eslint-plugin-react-dom'

export default tseslint.config({
  plugins: {
    // Add the react-x and react-dom plugins
    'react-x': reactX,
    'react-dom': reactDom,
  },
  rules: {
    // other rules...
    // Enable its recommended typescript rules
    ...reactX.configs['recommended-typescript'].rules,
    ...reactDom.configs.recommended.rules,
  },
})

Instalacja pakietu npm

Pakiet można zainstalować z rejestru npm:

npm install api-app-v27

lub

yarn add api-app-v27

Użycie

import React from 'react';
import { Counter, LanguageSelector, store } from 'api-app-v27';
import { Provider } from 'react-redux';

const App = () => {
  return (
    <Provider store={store}>
      <div className="App">
        <LanguageSelector />
        <Counter />
      </div>
    </Provider>
  );
};

export default App;

Struktura Projektu

src/
  ├── app/              # Konfiguracja Redux
  │   ├── hooks.ts      # Hooki Redux
  │   └── store.ts      # Konfiguracja store
  ├── assets/           # Statyczne zasoby (obrazy, ikony)
  ├── features/         # Funkcjonalności aplikacji
  │   ├── counter/      # Moduł licznika
  │   └── language/     # Moduł wyboru języka
  ├── stories/          # Komponenty Storybook
  ├── test/             # Konfiguracja testów
  │   ├── i18n.mock.ts  # Mock i18n dla testów
  │   └── setup.ts      # Konfiguracja testów
  ├── App.tsx           # Główny komponent aplikacji
  ├── i18n.ts           # Konfiguracja internacjonalizacji
  └── main.tsx          # Punkt wejścia aplikacji

Dostępne Komendy

Rozwój

• npm run dev - Uruchamia serwer deweloperski
• npm run build - Kompiluje TypeScript i buduje aplikację
• npm run preview - Podgląd zbudowanej aplikacji

Testowanie

• npm run test - Uruchamia testy
• npm run test:watch - Uruchamia testy w trybie watch

Linting i formatowanie

• npm run lint - Sprawdza kod pod kątem problemów

Storybook

• npm run storybook - Uruchamia Storybook
• npm run build-storybook - Buduje statyczną wersję Storybook

Wersjonowanie

• npm run version:patch - Zwiększa wersję patch
• npm run version:minor - Zwiększa wersję minor
• npm run version:major - Zwiększa wersję major

Automatyczne Wersjonowanie

Projekt używa automatycznego wersjonowania przy push do gałęzi main. System działa w następujący sposób:

1. Przy każdym push do gałęzi main, wersja projektu zostanie automatycznie zwiększona (patch).
2. Do ręcznego zwiększania wersji można użyć następujących komend:
   • npm run version:patch - zwiększa ostatnią cyfrę (np. 1.0.0 -> 1.0.1)
   • npm run version:minor - zwiększa środkową cyfrę (np. 1.0.0 -> 1.1.0)
   • npm run version:major - zwiększa pierwszą cyfrę (np. 1.0.0 -> 2.0.0)

Git hooks są skonfigurowane w folderze .githooks i są aktywowane przez komendę npm prepare przy instalacji projektu.

Konfiguracja VS Code

Projekt zawiera zoptymalizowaną konfigurację dla VS Code:

1. Pliki w folderze .vscode:

   • settings.json - ustawienia edytora, formatowania, ESLint, i18n, itp.
   • tasks.json - zadania dla VS Code (build, test, lint, itp.)

2. Zadania VS Code można uruchamiać przez:

   • Skrót Ctrl+Shift+B (domyślne zadanie budowania)
   • Menu Terminal > Run Task...
   • Paleta poleceń (Ctrl+Shift+P): Tasks: Run Task