Merge branch 'infoshareacademy:main' into main

.gitignore

@@ -0,0 +1,4 @@
+.local
+node_modules
+package-lock.json
+pnpm-lock.yaml

README.md

@@ -2,9 +2,13 @@
 
 - [x] [JSX, podstawy budowania komponentów](docs/01-podstawy/README.md)
 - Interaktywność i dynamika aplikacji
-  - [x] [Stan komponentu (`useState`)](docs/02-stan-komponentu/README.md)
-  - [x] [Komunikacja z API](docs/03-http/README.md)
-  - [x] [Formularze](docs/04-form/README.md)
+    - [x] [Stan komponentu (`useState`)](docs/02-stan-komponentu/README.md)
+    - [x] [Komunikacja z API](docs/03-http/README.md)
+    - [x] [Formularze](docs/04-form/README.md)
 - [x] [Routing](docs/05-routing/README.md)
 - [x] [Globalny stan aplikacji - Context API](docs/06-context/README.md)
-- [ ] [TypeScript](docs/07-typescript/README.md)
+- [x] [TypeScript](docs/07-typescript/README.md)
+- [ ] [Testy jednostkowe](./docs/08-testy-jednostkowe/README.md)
+- [ ] [Testy E2E](./docs/09-testy-e2e/README.md)
+- Firebase
+    - [ ] [Podstawy](./docs/10-firebase-podstawy/README.md)

docs/08-testy-jednostkowe/README.md

@@ -0,0 +1,67 @@
+# Projekt: Testy jednostkowe
+
+Na potrzeby przeprowadzenia testów w katalogu [`dummy`](../../dummy) stworzona została przykładowa aplikacja.
+
+Przed przystąpieniem do zadań koniecznie zainstaluj zależności.
+
+Wszelkie ścieżki podane poniżej są relatywne dla katalogu wspomnianego projektu - [`dummy`](../../dummy).
+
+---
+
+Aplikację _Dummy_ uruchom z poziomu katalogu [`dummy`](../../dummy) poleceniem `npm run dev`.
+
+Testy jednostkowe możesz uruchomić z poziomu katalogu [`dummy`](../../dummy) poleceniem `npm run test`.
+
+---
+
+## Funkcje
+
+W pliku [`@/lib/form/get-data.ts`](../../dummy/@/lib/form/get-data.ts) znajduje się funkcja `getFormData`.
+
+Jej zadaniem jest zwrócenie wartości formularza.
+
+**Przykład**
+
+```tsx
+import {FormEvent} from 'react';
+import {getFormData} from './get-data';
+
+function onSubmit(event: FormEvent<HTMLFormElement>) {
+	const formDataJson = getFormData(event.currentTarget)
+	/*
+       {
+         query: 'whatever'
+       }
+     */
+}
+
+function Form() {
+	return (
+		<form onSubmit={onSubmit}>
+			<input name='query'/>
+			<button>Search</button>
+		</form>
+	)
+}
+```
+
+W pliku [`@/lib/form/get-data.ts`](../../dummy/@/lib/form/get-data.ts) napisz testy weryfikujące poprawność działania
+tej funkcji.
+
+## _React hooks_
+
+W pliku [`@/lib/use-toggle.ts`](../../dummy/@/lib/use-toggle.ts) znajduje się funkcja `useToggle`.
+
+Jej zadaniem jest zwrócenie stanu typu `boolean` oraz funkcji bezparametrowej zmieniającej ten stan na przeciwny.
+
+W pliku [`@/lib/use-toggle.test.tsx`](../../dummy/@/lib/use-toggle.test.tsx) napisz testy weryfikujące poprawność
+działania tej funkcji.
+
+## Interaktywne komponenty
+
+W pliku [`@/lib/auth/sign-in.tsx`](../../dummy/@/lib/auth/sign-in.tsx) znajduje się komponent `SignInForm`.
+
+Jego zadaniem jest wyświetlenie formularza zawierającego pola `email` oraz `password`.
+
+W pliku [`@/lib/auth/sign-in.test.tsx`](../../dummy/@/lib/auth/sign-in.test.tsx) napisz testy weryfikujące poprawność
+działania tego komponentu.

docs/09-testy-e2e/README.md

@@ -0,0 +1,29 @@
+# Projekt: Testy E2E
+
+Na potrzeby przeprowadzenia testów w katalogu [`dummy`](../../dummy) stworzona została przykładowa aplikacja, a w
+katalogu [`dummy-e2e`](../../dummy-e2e) projekt testów E2E.
+
+Przed przystąpieniem do zadań koniecznie zainstaluj zależności w obu projektach, a następnie uruchom aplikację _Dummy_ (
+jest wymagana do przeprowadzenia testów).
+
+Wszelkie ścieżki podane poniżej są relatywne dla katalogu wspomnianego projektu - [`dummy-e2e`](../../dummy-e2e).
+
+---
+
+Aplikację _Dummy_ uruchom z poziomu katalogu [`dummy`](../../dummy) poleceniem `npm run dev`.
+
+Konsolę Cypress możesz otworzyć z poziomu katalogu [`dummy-e2e`](../../dummy-e2e) poleceniem `npm run open`.
+
+Testy E2E możesz też uruchomić z poziomu katalogu [`dummy-e2e`](../../dummy-e2e) poleceniem `npm run e2e`.
+
+---
+
+## Strona logowania
+
+W pliku [`cypress/e2e/sign-in.cy.ts`](../../dummy-e2e/cypress/e2e/sign-in.cy.ts) napisz testy funkcjonalne strony
+logowania.
+
+## Profil użytkownika
+
+W pliku [`cypress/e2e/account.cy.ts`](../../dummy-e2e/cypress/e2e/account.cy.ts) napisz testy funkcjonalne strony
+profilu użytkownika.

docs/10-firebase-podstawy/README.md

@@ -0,0 +1,94 @@
+# Projekt: Firebase – podstawy
+
+## Nowy projekt Firebase
+
+Bez obaw, pracujemy nadal na aplikacji, którą wcześniej tworzyliśmy w ramach większości poprzednich zajęć 😃
+
+Załóż nowe konto Firebase, stwórz nowy projekt.
+
+## Firestore
+
+Załóż nową bazę Firestore i skonfiguruj reguły wstępne dostępu.
+
+```
+rules_version = '2';
+
+service cloud.firestore {
+  match /databases/{database}/documents {
+    match /{document=**} {
+      allow read, write: if true;
+    }
+  }
+}
+```
+
+---
+
+ℹ️ Powyższa konfiguracja umożliwia odczyt i zapis dowolnej osobie.
+
+---
+
+## Integracja z aplikacją
+
+Do aplikacji dodaj konfigurację połączenia z Firebase.
+
+---
+
+**⚠️ Pamiętaj**
+
+Klucze API i inne dane poufne zawsze zapisuj w plikach ignorowanych przez git.
+
+---
+
+Dzięki Vite, konfigurację można wstrzyknąć z pomocą zmiennych środowiskowych.
+
+```shell
+# .env.local
+# Firebase sensitive
+VITE_FIREBASE_API_KEY=
+VITE_FIREBASE_APP_ID=
+VITE_FIREBASE_DB_URL=
+VITE_FIREBASE_MSG_SENDER_ID=
+# Firebase non-sensitive
+VITE_AUTH_DOMAIN=
+VITE_PROJECT_ID=
+VITE_STORAGE_BUCKET=
+```
+
+```ts
+// src/firebase/app.ts
+import {initializeApp} from "firebase/app";
+
+const firebaseConfig = {
+	apiKey: import.meta.env.VITE_FIREBASE_API_KEY,
+	authDomain: import.meta.env.VITE_AUTH_DOMAIN,
+	databaseURL: import.meta.env.VITE_FIREBASE_DB_URL,
+	projectId: import.meta.env.VITE_PROJECT_ID,
+	storageBucket: import.meta.env.VITE_STORAGE_BUCKET,
+	messagingSenderId: import.meta.env.VITE_FIREBASE_MSG_SENDER_ID,
+	appId: import.meta.env.VITE_FIREBASE_APP_ID
+};
+
+export const app = initializeApp(firebaseConfig);
+```
+
+## Dynamiczne portfolio
+
+Skonfiguruj kolekcję dokumentów mającą na celu przechowanie informacji o zdjęciach wyświetlanych w portfolio.
+
+Załaduj obrazki przy użyciu API Firebase.
+
+![](./assets/01-portfolio.png)
+
+## Karta produktu
+
+Rozszerz kolekcję dokumentów o szczegóły zdjęcia, włączając w to informację o dostępnej ilości.
+
+![](./assets/02-image-card.png)
+
+Do karty produktu w aplikacji dodaj informację o aktualnym braku produktu (np. papierowej kopii fotografii).
+
+Informacja ta powinna zostać odzwierciedlona w aplikacji natychmiast po wykryciu braków
+(np. po ręcznej modyfikacji w Firestore).
+
+![](./assets/03-image-card-out-of-stock.png)

dummy-e2e/cypress.config.js

@@ -0,0 +1,10 @@
+const {defineConfig} = require("cypress");
+
+module.exports = defineConfig({
+	e2e: {
+		baseUrl: 'http://localhost:5173',
+		setupNodeEvents(on, config) {
+			// implement node event listeners here
+		},
+	},
+});

dummy-e2e/cypress/e2e/account.cy.ts

@@ -0,0 +1,6 @@
+describe('account page', () => {
+	it('should contain greeting', () => {
+	})
+	it('should log user out', () => {
+	})
+})

dummy-e2e/cypress/e2e/sign-in.cy.ts

@@ -0,0 +1,14 @@
+describe('sign-in page', () => {
+	it('should be opened by default', () => {
+		cy.visit('/')
+	})
+	it('should show invalid email error', () => {
+		cy.visit('/sign-in')
+	})
+	it('should show invalid password error', () => {
+		cy.visit('/sign-in')
+	})
+	it('should navigate to /account', () => {
+		cy.visit('/sign-in')
+	})
+})

dummy-e2e/cypress/support/commands.ts

@@ -0,0 +1,25 @@
+// ***********************************************
+// This example commands.js shows you how to
+// create various custom commands and overwrite
+// existing commands.
+//
+// For more comprehensive examples of custom
+// commands please read more here:
+// https://on.cypress.io/custom-commands
+// ***********************************************
+//
+//
+// -- This is a parent command --
+// Cypress.Commands.add('login', (email, password) => { ... })
+//
+//
+// -- This is a child command --
+// Cypress.Commands.add('drag', { prevSubject: 'element'}, (subject, options) => { ... })
+//
+//
+// -- This is a dual command --
+// Cypress.Commands.add('dismiss', { prevSubject: 'optional'}, (subject, options) => { ... })
+//
+//
+// -- This will overwrite an existing command --
+// Cypress.Commands.overwrite('visit', (originalFn, url, options) => { ... })

dummy-e2e/cypress/support/e2e.ts

@@ -0,0 +1,20 @@
+// ***********************************************************
+// This example support/e2e.js is processed and
+// loaded automatically before your test files.
+//
+// This is a great place to put global configuration and
+// behavior that modifies Cypress.
+//
+// You can change the location of this file or turn off
+// automatically serving support files with the
+// 'supportFile' configuration option.
+//
+// You can read more here:
+// https://on.cypress.io/configuration
+// ***********************************************************
+
+// Import commands.js using ES2015 syntax:
+import './commands'
+
+// Alternatively you can use CommonJS syntax:
+// require('./commands')

dummy-e2e/package.json

@@ -0,0 +1,12 @@
+{
+  "name": "dummy-e2e",
+  "version": "1.0.0",
+  "scripts": {
+    "open": "cypress open",
+    "e2e": "cypress run"
+  },
+  "devDependencies": {
+    "cypress": "^13.6.6",
+    "typescript": "^5.3.3"
+  }
+}

dummy-e2e/tsconfig.json

@@ -0,0 +1,16 @@
+{
+  "compilerOptions": {
+    "target": "es2022",
+    "lib": [
+      "es2022",
+      "dom"
+    ],
+    "types": [
+      "cypress",
+      "node"
+    ]
+  },
+  "include": [
+    "**/*.ts"
+  ]
+}