add comments in storybook

add storybook
fix light mode
2025-04-08 15:54:16 +02:00 · 2025-04-08 15:47:25 +02:00 · 2025-04-08 15:01:56 +02:00 · 2025-04-08 14:38:45 +02:00 · 2025-04-08 14:35:30 +02:00 · 2025-04-08 14:05:32 +02:00
66 changed files with 4063 additions and 658 deletions
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -0,0 +1,34 @@
+{
+  "editor.codeActionsOnSave": {
+    "source.addMissingImports": "always",
+    "source.fixAll": "always"
+  },
+  "editor.formatOnSave": true,
+  "editor.detectIndentation": false,
+  "editor.tabSize": 2,
+  "files.eol": "\n",
+  "search.exclude": {
+    "**/.next": true,
+    "**/node_modules": true,
+    "**/package-lock.json": true
+  },
+  "[css]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
+  },
+  "[javascript]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
+  },
+  "[json][jsonc]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
+  },
+  "[markdown]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
+  },
+  "[typescript]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
+  },
+  "[typescriptreact]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
+  },
+  "prettier.configPath": "react-advanced-tag1/.prettierrc.mjs"
+}
--- a/react-advanced-tag1/.gitignore
+++ b/react-advanced-tag1/.gitignore
@@ -22,3 +22,5 @@ dist-ssr
 *.njsproj
 *.sln
 *.sw?
+
+*storybook.log
--- a/react-advanced-tag1/.prettierrc.mjs
+++ b/react-advanced-tag1/.prettierrc.mjs
@@ -0,0 +1,12 @@
+/**
+ * @see https://prettier.io/docs/configuration
+ * @type {import("prettier").Config}
+ */
+const config = {
+  trailingComma: 'es5',
+  tabWidth: 2,
+  semi: true,
+  singleQuote: true,
+}
+
+export default config
--- a/react-advanced-tag1/.storybook/main.ts
+++ b/react-advanced-tag1/.storybook/main.ts
@@ -0,0 +1,19 @@
+import type { StorybookConfig } from '@storybook/react-vite';
+
+const config: StorybookConfig = {
+  "stories": [
+    "../src/**/*.mdx",
+    "../src/**/*.stories.@(js|jsx|mjs|ts|tsx)"
+  ],
+  "addons": [
+    "@storybook/addon-essentials",
+    "@storybook/addon-onboarding",
+    "@chromatic-com/storybook",
+    "@storybook/experimental-addon-test"
+  ],
+  "framework": {
+    "name": "@storybook/react-vite",
+    "options": {}
+  }
+};
+export default config;
--- a/react-advanced-tag1/.storybook/preview.ts
+++ b/react-advanced-tag1/.storybook/preview.ts
@@ -0,0 +1,15 @@
+import type { Preview } from '@storybook/react'
+
+const preview: Preview = {
+  parameters: {
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/i,
+      },
+    },
+  },
+  tags: ['autodocs'],
+}
+
+export default preview
--- a/react-advanced-tag1/.storybook/vitest.setup.ts
+++ b/react-advanced-tag1/.storybook/vitest.setup.ts
@@ -0,0 +1,9 @@
+import { beforeAll } from 'vitest';
+import { setProjectAnnotations } from '@storybook/react';
+import * as projectAnnotations from './preview';
+
+// This is an important step to apply the right configuration when testing your stories.
+// More info at: https://storybook.js.org/docs/api/portable-stories/portable-stories-vitest#setprojectannotations
+const project = setProjectAnnotations([projectAnnotations]);
+
+beforeAll(project.beforeAll);
--- a/react-advanced-tag1/index.html
+++ b/react-advanced-tag1/index.html
@@ -7,6 +7,7 @@
    <title>React Advanced Cours</title>
  </head>
  <body>
+    <div id="modal"></div>
    <div id="root"></div>
    <script type="module" src="/src/main.tsx"></script>
  </body>
--- a/react-advanced-tag1/package-lock.json
+++ b/react-advanced-tag1/package-lock.json
--- a/react-advanced-tag1/package.json
+++ b/react-advanced-tag1/package.json
@@ -5,6 +5,7 @@
  "type": "module",
  "scripts": {
    "dev": "vite",
+    "scan": "vite & npx react-scan@latest localhost:5173",
    "build": "tsc -b && vite build",
    "lint": "eslint .",
    "preview": "vite preview",
@@ -12,29 +13,55 @@
    "test:watch": "vitest --watch",
    "test:coverage": "vitest --coverage",
    "test:coverage:report": "vitest --coverage --reporter=html",
-    "test:coverage:report:open": "vitest --coverage --reporter=html && open coverage/index.html"
+    "test:coverage:report:open": "vitest --coverage --reporter=html && open coverage/index.html",
+    "prettier": "prettier ./src --write",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build"
  },
  "dependencies": {
+    "immer": "^10.1.1",
+    "mobx": "^6.13.7",
+    "mobx-react-lite": "^4.1.0",
    "react": "^19.0.0",
    "react-dom": "^19.0.0",
-    "react-router-dom": "^7.5.0"
+    "react-router-dom": "^7.5.0",
+    "react-scan": "^0.3.3",
+    "zustand": "^5.0.3"
  },
  "devDependencies": {
+    "@chromatic-com/storybook": "^3.2.6",
    "@eslint/js": "^9.21.0",
+    "@storybook/addon-essentials": "^8.6.12",
+    "@storybook/addon-onboarding": "^8.6.12",
+    "@storybook/blocks": "^8.6.12",
+    "@storybook/experimental-addon-test": "^8.6.12",
+    "@storybook/react": "^8.6.12",
+    "@storybook/react-vite": "^8.6.12",
+    "@storybook/test": "^8.6.12",
    "@testing-library/react": "^16.3.0",
    "@types/react": "^19.0.10",
    "@types/react-dom": "^19.0.4",
    "@vitejs/plugin-react": "^4.3.4",
+    "@vitest/browser": "^3.1.1",
    "@vitest/coverage-v8": "^3.1.1",
    "@vitest/ui": "^3.1.1",
    "eslint": "^9.21.0",
    "eslint-plugin-react-hooks": "^5.1.0",
    "eslint-plugin-react-refresh": "^0.4.19",
+    "eslint-plugin-storybook": "^0.12.0",
    "globals": "^15.15.0",
    "jsdom": "^26.0.0",
+    "playwright": "^1.51.1",
+    "prettier": "3.5.3",
+    "storybook": "^8.6.12",
    "typescript": "~5.7.2",
    "typescript-eslint": "^8.24.1",
    "vite": "^6.2.0",
    "vitest": "^3.1.1"
+  },
+  "eslintConfig": {
+    "extends": [
+      "plugin:storybook/recommended"
+    ]
  }
 }
--- a/react-advanced-tag1/src/App.css
+++ b/react-advanced-tag1/src/App.css
@@ -1,5 +1,3 @@
-
-
 .logo {
  height: 6em;
  padding: 1.5em;
@@ -36,7 +34,7 @@
  color: #888;
 }

-input[type="text"] {
+input[type='text'] {
  border-radius: 6px;
  padding: 1rem 0.5rem;
 }
--- a/react-advanced-tag1/src/App.tsx
+++ b/react-advanced-tag1/src/App.tsx
@@ -2,16 +2,21 @@ import { Route, Routes } from 'react-router-dom'
 import './App.css'
 // import EffectExercises from './components/exercises/EffectExercises'
 import MainLayout from './layouts/MainLayout'
-import HomePage from './routes/HomePage'
-import UsersPage from './routes/UsersPage'
-import EffectExercisesPage from './routes/EffectExercisesPage'
-import FormsPage from './routes/FormsPage'
-import MemoCallbackPage from './routes/MemoCallbackPage'
-import ComponentWrapperPage from './routes/ComponentWrapperPage'
+import HomePage from './pages/HomePage'
+import UsersPage from './pages/UsersPage'
+import EffectExercisesPage from './pages/EffectExercisesPage'
+import FormsPage from './pages/FormsPage'
+import MemoCallbackPage from './pages/MemoCallbackPage'
+import ComponentWrapperPage from './pages/ComponentWrapperPage'
+import ZustandCounterPage from './pages/ZustandCounterPage'
+import ModalPage from './pages/ModalPage'
+import { HocPage } from './pages/HocPage'
+import ImmerPage from './pages/ImmerPage'
+import MobXPage from './pages/MobXPage'

 function App() {
-
-  return <MainLayout>
+  return (
+    <MainLayout>
      <Routes>
        <Route path="/" element={<HomePage />} />
        <Route path="/user" element={<UsersPage />} />
@@ -19,9 +24,14 @@ function App() {
        <Route path="/forms" element={<FormsPage />} />
        <Route path="/memocallback" element={<MemoCallbackPage />} />
        <Route path="/componentwrapper" element={<ComponentWrapperPage />} />
-
+        <Route path="/modalpage" element={<ModalPage />} />
+        <Route path="/zustandcounterpage" element={<ZustandCounterPage />} />
+        <Route path="/hoc" element={<HocPage />} />
+        <Route path="/immer" element={<ImmerPage />} />
+        <Route path="/mobx" element={<MobXPage />} />
      </Routes>
    </MainLayout>
+  )
 }

 export default App
--- a/react-advanced-tag1/src/common/components/ComponentWrapper/ComponentWrapper.css
+++ b/react-advanced-tag1/src/common/components/ComponentWrapper/ComponentWrapper.css
@@ -17,3 +17,12 @@
  padding: 20px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
 }
+
+@media (prefers-color-scheme: light) {
+  .component-wrapper {
+    background-color: #f0f0f0;
+  }
+  .component-content {
+    background-color: #fff;
+  }
+}
--- a/react-advanced-tag1/src/common/components/ComponentWrapper/ComponentWrapper.tsx
+++ b/react-advanced-tag1/src/common/components/ComponentWrapper/ComponentWrapper.tsx
@@ -1,17 +1,28 @@
 import './ComponentWrapper.css'

 interface ComponentWrapperProps {
-    title?: string;
-    children: React.ReactNode;
+  /** Title to show */
+  title?: string
+  /** Description to show */
+  description?: string
+  /** Content to show */
+  children: React.ReactNode
 }
-export default function ComponentWrapper({ children, title }: ComponentWrapperProps): React.ReactElement {
-    console.log("ComponentWrapper rendered");
+
+/**
+ * A wrapper component that displays a title, description, and content.
+ */
+export default function ComponentWrapper({
+  children,
+  title,
+  description,
+}: ComponentWrapperProps): React.ReactElement {
+  console.log('ComponentWrapper rendered:', title)
  return (
-        <div className='component-wrapper'>
+    <section className="component-wrapper">
      {title && <h2>{title}</h2>}
-            <div className='component-content'>
-                {children}
-            </div>
-        </div>
-    );
+      {description && <p>{description}</p>}
+      <div className="component-content">{children}</div>
+    </section>
+  )
 }
--- a/react-advanced-tag1/src/common/components/Footer.test.tsx
+++ b/react-advanced-tag1/src/common/components/Footer.test.tsx
@@ -1,10 +1,10 @@
-import { render, screen } from "@testing-library/react";
-import Footer from "./Footer";
-import { describe, it, expect } from "vitest";
+import { render, screen } from '@testing-library/react'
+import Footer from './Footer'
+import { describe, it, expect } from 'vitest'

-describe("Footer Component", () => {
-    it("should render the footer with correct content", () => {
-        render(<Footer />);
-        expect(screen.getByText(/© 2025 Your Company/i)).toBeDefined();
-    });
-});
+describe('Footer Component', () => {
+  it('should render the footer with correct content', () => {
+    render(<Footer />)
+    expect(screen.getByText(/© 2025 Your Company/i)).toBeDefined()
+  })
+})
--- a/react-advanced-tag1/src/common/components/Footer.tsx
+++ b/react-advanced-tag1/src/common/components/Footer.tsx
@@ -1,10 +1,10 @@
 function Footer() {
-    console.log("Footer rendered");
+  console.log('Footer rendered')
  return (
    <footer>
      <p>&copy; 2025 Your Company</p>
    </footer>
-    );
+  )
 }

-export default Footer;
+export default Footer
--- a/react-advanced-tag1/src/common/components/Header/Navigation.tsx
+++ b/react-advanced-tag1/src/common/components/Header/Navigation.tsx
@@ -1,13 +1,43 @@
+import './Navigation.css'
+
 export default function Navigation() {
  return (
-        <nav>
+    <nav className="navigation">
      <ul>
-                <li><a href="/">Home</a></li>
-                <li><a href="/user">Users</a></li>
-                <li><a href="/effect">Effects</a></li>
-                <li><a href="/forms">Forms</a></li>
-                <li><a href="/memocallback">Memo und Callback</a></li>
-                <li><a href="/componentwrapper">Component Wrapper</a></li>
+        <li>
+          <a href="/">Home</a>
+        </li>
+        <li>
+          <a href="/user">Users</a>
+        </li>
+        <li>
+          <a href="/effect">Effects</a>
+        </li>
+        <li>
+          <a href="/forms">Forms</a>
+        </li>
+        <li>
+          <a href="/memocallback">Memo und Callback</a>
+        </li>
+        <li>
+          <a href="/componentwrapper">Component Wrapper</a>
+        </li>
+        <li>
+          <a href="/modalpage">Modal</a>
+        </li>
+        <li>
+          <a href="/zustandcounterpage">Store: Zustand</a>
+        </li>
+        <li>
+          <a href="/mobx">Store: MobX</a>
+        </li>
+        <li>
+          <a href="/hoc">HOC</a>
+        </li>
+        <li>
+          <a href="/immer">Immer</a>
+        </li>
      </ul>
-        </nav>);
+    </nav>
+  )
 }
--- a/react-advanced-tag1/src/common/components/Header/index.tsx
+++ b/react-advanced-tag1/src/common/components/Header/index.tsx
@@ -1,13 +1,13 @@
-import Navigation from "./Navigation";
+import Navigation from './Navigation'

 const Header = () => {
-    console.log("Header rendered");
+  console.log('Header rendered')
  return (
    <header>
      <h1>My Application</h1>
      <Navigation />
    </header>
-    );
+  )
 }

-export default Header;
+export default Header
--- a/react-advanced-tag1/src/common/components/Header/navigation.css
+++ b/react-advanced-tag1/src/common/components/Header/navigation.css
@@ -0,0 +1,44 @@
+.navigation {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 10px 20px;
+  background-color: #282c34;
+}
+.navigation a {
+  color: white;
+  text-decoration: none;
+  padding: 10px;
+}
+.navigation a:hover {
+  background-color: #057e9f;
+  border-radius: 5px;
+  transition: background-color 0.3s ease;
+  text-decoration: none;
+}
+.navigation ul {
+  list-style: none;
+  display: flex;
+  gap: 20px;
+  flex-wrap: wrap;
+  align-items: center;
+}
+.navigation ul li {
+  display: inline;
+}
+
+@media (prefers-color-scheme: light) {
+  .navigation {
+    background-color: #f0f0f0;
+  }
+  .navigation a {
+    color: #282c34;
+  }
+  .navigation a:hover {
+    background-color: #98e1f6;
+  }
+
+  .navigation ul li {
+    color: #282c34;
+  }
+}
--- a/react-advanced-tag1/src/common/components/Modal.css
+++ b/react-advanced-tag1/src/common/components/Modal.css
@@ -0,0 +1,18 @@
+.modal {
+  position: fixed;
+  background-color: rgba(0, 0, 0, 0.5);
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+}
+
+.modal .modal-content {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  background-color: red;
+  padding: 20px;
+  border-radius: 5px;
+}
--- a/react-advanced-tag1/src/common/components/Modal.tsx
+++ b/react-advanced-tag1/src/common/components/Modal.tsx
@@ -0,0 +1,25 @@
+import './Modal.css'
+
+interface ModalProps {
+  open?: boolean
+  onClose?: () => void
+}
+
+export default function Modal({
+  open = true,
+  onClose,
+}: ModalProps): React.ReactElement {
+  console.log('Modal rendered')
+  return (
+    <div
+      style={{ display: open ? 'block' : 'none' }}
+      className="modal"
+      onClick={() => onClose && onClose()}
+    >
+      <div className="modal-content">
+        <h2>Modal</h2>
+        <p>This is a modal component.</p>
+      </div>
+    </div>
+  )
+}
--- a/react-advanced-tag1/src/common/components/exercises/EffectExercises/index.tsx
+++ b/react-advanced-tag1/src/common/components/exercises/EffectExercises/index.tsx
@@ -1,20 +1,18 @@
-import { useEffect, useState } from "react"
+import { useEffect, useState } from 'react'

 export default function EffectExercises() {
-
-    const [counter, setCounter] = useState(0);
+  const [counter, setCounter] = useState(0)

  useEffect(() => {
-        console.log("EffectExercises mounted");
+    console.log('EffectExercises mounted')
    const interval = setInterval(() => {
-            setCounter(prevCounter => prevCounter + 1);
-        }
-        , 1000);
+      setCounter((prevCounter) => prevCounter + 1)
+    }, 1000)
    return () => {
-            console.log("EffectExercises unmounted");
-            clearInterval(interval);
+      console.log('EffectExercises unmounted')
+      clearInterval(interval)
    }
-    }, [counter]);
+  }, [counter])
  return (
    <section>
      <h2>Effect Exercises</h2>
--- a/react-advanced-tag1/src/common/components/exercises/HocExercise/DogImages.tsx
+++ b/react-advanced-tag1/src/common/components/exercises/HocExercise/DogImages.tsx
@@ -0,0 +1,17 @@
+import withLoader, { LoaderData } from './WithLoader'
+import './DogImages.css'
+interface DogImagesProps {
+  data: LoaderData
+}
+
+function DogImages({ data }: DogImagesProps) {
+  return data.message.map((img, index) => (
+    <img key={index} src={img} className="dog-image" />
+  ))
+}
+
+const DogImagesWithLoader = withLoader(
+  DogImages,
+  'https://dog.ceo/api/breed/labrador/images/random/6'
+)
+export default DogImagesWithLoader
--- a/react-advanced-tag1/src/common/components/exercises/HocExercise/WithLoader.tsx
+++ b/react-advanced-tag1/src/common/components/exercises/HocExercise/WithLoader.tsx
@@ -0,0 +1,44 @@
+import { ComponentType, useEffect, useState } from 'react'
+
+export type LoaderData = {
+  message: string[]
+  status: string
+}
+
+interface WithLoaderProps {
+  data: LoaderData
+}
+
+// HOC definition
+export default function withLoader<P>(
+  WrappedComponent: ComponentType<P & WithLoaderProps>,
+  url: string
+) {
+  return function WithLoaderComponent(props: P) {
+    const [data, setData] = useState<LoaderData | null>(null)
+
+    useEffect(() => {
+      async function fetchData() {
+        try {
+          const response = await fetch(url)
+          const json = await response.json()
+          // setData(json);
+
+          setTimeout(() => {
+            setData(json)
+          }, 5000)
+        } catch (error) {
+          console.error('Error fetching data:', error)
+        }
+      }
+
+      fetchData()
+    }, [])
+
+    if (!data) {
+      return <p>Loading...</p>
+    }
+
+    return <WrappedComponent {...(props as P)} data={data} />
+  }
+}
--- a/react-advanced-tag1/src/common/components/exercises/HocExercise/dogimages.css
+++ b/react-advanced-tag1/src/common/components/exercises/HocExercise/dogimages.css
@@ -0,0 +1,6 @@
+.dog-image {
+  width: 100px;
+  height: 100px;
+  border-radius: 50%;
+  margin: 10px;
+}
--- a/react-advanced-tag1/src/common/components/exercises/ImmerExercise/index.tsx
+++ b/react-advanced-tag1/src/common/components/exercises/ImmerExercise/index.tsx
@@ -0,0 +1,44 @@
+import { produce } from 'immer'
+import { useState } from 'react'
+
+export default function ImmerExercise() {
+  const [user, setUser] = useState({
+    name: 'Alice',
+
+    address: {
+      city: 'Wonderland',
+
+      zip: '12345',
+    },
+  })
+
+  const updateUser = () => {
+    // this is "normal" way to update state in objects
+    setUser((prevUser) => ({
+      ...prevUser,
+      address: {
+        ...prevUser.address,
+        city: 'New Wonderland',
+      },
+    }))
+  }
+
+  const updateUserWithImmer = () => {
+    // immer way
+    setUser((prevUser) =>
+      produce(prevUser, (draft) => {
+        draft.address.city = 'New Wonderland'
+      })
+    )
+  }
+
+  return (
+    <>
+      <p>
+        {user.address.city}: {user.name}
+      </p>
+      <button onClick={updateUser}>Update User</button>
+      <button onClick={updateUserWithImmer}>Update User with immerJs</button>
+    </>
+  )
+}
--- a/react-advanced-tag1/src/common/components/exercises/MemoCallback/Search.tsx
+++ b/react-advanced-tag1/src/common/components/exercises/MemoCallback/Search.tsx
@@ -1,12 +1,18 @@
-import React, { memo } from "react";
+import React, { memo } from 'react'

 interface SearchProps {
-    onChange: (text: string) => void;
+  onChange: (text: string) => void
 }

 function Search({ onChange }: SearchProps): React.ReactElement {
-    console.log("Search rendered");
-    return <input type="text" onChange={(e) => onChange(e.target.value)} placeholder="Search user..." />;
+  console.log('Search rendered')
+  return (
+    <input
+      type="text"
+      onChange={(e) => onChange(e.target.value)}
+      placeholder="Search user..."
+    />
+  )
 }

-export default memo(Search);
+export default memo(Search)
--- a/react-advanced-tag1/src/common/components/exercises/MemoCallback/index.test.tsx
+++ b/react-advanced-tag1/src/common/components/exercises/MemoCallback/index.test.tsx
@@ -1,42 +1,44 @@
-import { render, screen, fireEvent } from "@testing-library/react";
-import MemoCallback from "./index";
-import { describe, it, expect } from "vitest";
-import { users } from "../../../utils/shuffle";
+import { render, screen, fireEvent } from '@testing-library/react'
+import MemoCallback from './index'
+import { describe, it, expect } from 'vitest'
+import { users } from '../../../utils/shuffle'

-
-
-describe("MemoCallback Component", () => {
-    it("should render the component with initial users", () => {
-        render(<MemoCallback />);
+describe('MemoCallback Component', () => {
+  it('should render the component with initial users', () => {
+    render(<MemoCallback />)
    users.forEach((user) => {
-            expect(screen.getByText(user)).toBeDefined();
-        });
-    });
+      expect(screen.getByText(user)).toBeDefined()
+    })
+  })

-    it("should filter users based on search input", () => {
-        render(<MemoCallback />);
-        const searchInput = screen.getByPlaceholderText(/search/i);
+  it('should filter users based on search input', () => {
+    render(<MemoCallback />)
+    const searchInput = screen.getByPlaceholderText(/search/i)

-        fireEvent.change(searchInput, { target: { value: "a" } });
-        const filteredUsers = users.filter((user) => user.toLowerCase().includes("a"));
+    fireEvent.change(searchInput, { target: { value: 'a' } })
+    const filteredUsers = users.filter((user) =>
+      user.toLowerCase().includes('a')
+    )
    filteredUsers.forEach((user) => {
-            expect(screen.getByText(user)).toBeDefined();
-        });
+      expect(screen.getByText(user)).toBeDefined()
+    })

-        const nonMatchingUsers = users.filter((user) => !user.toLowerCase().includes("a"));
+    const nonMatchingUsers = users.filter(
+      (user) => !user.toLowerCase().includes('a')
+    )
    nonMatchingUsers.forEach((user) => {
-            expect(screen.queryByText(user)).not.toBeDefined();
-        });
-    });
+      expect(screen.queryByText(user)).not.toBeDefined()
+    })
+  })

-    it("should shuffle users when the shuffle button is clicked", () => {
-        render(<MemoCallback />);
-        const shuffleButton = screen.getByText(/shuffle/i);
+  it('should shuffle users when the shuffle button is clicked', () => {
+    render(<MemoCallback />)
+    const shuffleButton = screen.getByText(/shuffle/i)

-        const initialOrder = screen.getAllByText(/./).map((el) => el.textContent);
-        fireEvent.click(shuffleButton);
-        const shuffledOrder = screen.getAllByText(/./).map((el) => el.textContent);
+    const initialOrder = screen.getAllByText(/./).map((el) => el.textContent)
+    fireEvent.click(shuffleButton)
+    const shuffledOrder = screen.getAllByText(/./).map((el) => el.textContent)

-        expect(initialOrder).not.toEqual(shuffledOrder);
-    });
-});
+    expect(initialOrder).not.toEqual(shuffledOrder)
+  })
+})
--- a/react-advanced-tag1/src/common/components/exercises/MemoCallback/index.tsx
+++ b/react-advanced-tag1/src/common/components/exercises/MemoCallback/index.tsx
@@ -1,33 +1,31 @@
-import { useCallback, useState } from "react";
-import Search from "./Search";
-import { users, shuffleArray } from "../../../utils/shuffle";
+import { useCallback, useState } from 'react'
+import Search from './Search'
+import { users, shuffleArray } from '../../../utils/shuffle'

 export default function MemoCallback() {
-    console.log("MemoCallback rendered");
+  console.log('MemoCallback rendered')

-    const [allUsers, setAllUsers] = useState(users);
+  const [allUsers, setAllUsers] = useState(users)

  const handleSearch = useCallback((text: string) => {
    const filteredUsers = users.filter((user) => {
-            return user.toLowerCase().includes(text.toLowerCase());
-        });
-        setAllUsers(filteredUsers);
-    }, []);
+      return user.toLowerCase().includes(text.toLowerCase())
+    })
+    setAllUsers(filteredUsers)
+  }, [])

  const handleShuffle = () => {
-        setAllUsers(shuffleArray(users));
-    };
+    setAllUsers(shuffleArray(users))
+  }

  const ListOfUsers = allUsers.map((user) => {
-        return <p key={user}>{user}</p>;
-    });
+    return <p key={user}>{user}</p>
+  })
  return (
    <div>
      <button onClick={handleShuffle}>Shuffle</button>
      <Search onChange={handleSearch} />
-            <div>
-                {ListOfUsers}
+      <div>{ListOfUsers}</div>
    </div>
-        </div>
-    );
+  )
 }
--- a/react-advanced-tag1/src/common/components/exercises/RefExercise/index.tsx
+++ b/react-advanced-tag1/src/common/components/exercises/RefExercise/index.tsx
@@ -1,83 +1,114 @@
-import { FormEvent, useRef, useState } from "react";
-import useLocalStorage from "../../../hooks/useLocalStorage";
+import { FormEvent, useRef, useState } from 'react'
+import useLocalStorage from '../../../hooks/useLocalStorage'

 interface FormValues {
-    email: string;
-    password: string;
+  email: string
+  password: string
 }

 export default function RefExercise(): React.ReactElement {
-    console.log("RefExercise rendered");
+  console.log('RefExercise rendered')

-    const emailRef = useRef<HTMLInputElement>(null);
-    const passwordRef = useRef<HTMLInputElement>(null);
-    const {setStoredValue, value: formDataValues} = useLocalStorage<FormValues>("formdata", {
-        email: "",
-        password: ""
-    } );
+  const emailRef = useRef<HTMLInputElement>(null)
+  const passwordRef = useRef<HTMLInputElement>(null)
+  const { setStoredValue, value: formDataValues } = useLocalStorage<FormValues>(
+    'formdata',
+    {
+      email: '',
+      password: '',
+    }
+  )

  const handleSubmit = () => {
-        console.log("submit", {
+    console.log('submit', {
      email: emailRef.current?.value,
-            password: passwordRef.current?.value
-        });
+      password: passwordRef.current?.value,
+    })
    setStoredValue({
-            email: emailRef.current?.value || "",
-            password: passwordRef.current?.value || ""
-        });
-        passwordRef.current?.focus();
+      email: emailRef.current?.value || '',
+      password: passwordRef.current?.value || '',
+    })
+    passwordRef.current?.focus()
  }

  const [formData, setFormData] = useState({
-        strasse: "",
-        city: ""
-    });
+    strasse: '',
+    city: '',
+  })

  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
    setFormData({
      ...formData,
-            [event.target.name]: event.target.value
-        });
+      [event.target.name]: event.target.value,
+    })
  }

  const handleChangeSubmit = () => {
-        const strasse = document.querySelector('input[name="strasse"]') as HTMLInputElement;
-        const city = document.querySelector('input[name="city"]') as HTMLInputElement;
-        console.log("submit", {
+    // This is a bad way to handle form submission
+    const strasse = document.querySelector(
+      'input[name="strasse"]'
+    ) as HTMLInputElement
+    // This is a bad way to handle form submission
+    const city = document.querySelector(
+      'input[name="city"]'
+    ) as HTMLInputElement
+    console.log('submit', {
      strasse: strasse.value,
-            city: city.value
-        });
+      city: city.value,
+    })
  }

  function handleFormSubmit(e: FormEvent) {
-        e.preventDefault();
-        const data = new FormData(e.target as HTMLFormElement);
+    e.preventDefault()
+    const data = new FormData(e.target as HTMLFormElement)
    console.log('handleFormSubmit', {
      email: data.get('email'),
-            password: data.get('password')
-        });
+      password: data.get('password'),
+    })
  }
  return (
-        <div style={{ display: "flex", flexDirection: "column", gap: "3rem" }}>
-        <div style={{ display: "flex", flexDirection: "column", gap: "1rem" }}>
+    <div style={{ display: 'flex', flexDirection: 'column', gap: '3rem' }}>
+      <div style={{ display: 'flex', flexDirection: 'column', gap: '1rem' }}>
        <h3>values by ref</h3>
-            <input type="text" placeholder="email" ref={emailRef} defaultValue={formDataValues?.email}/>
-            <input type="text" placeholder="password" ref={passwordRef} defaultValue={formDataValues?.password}/>
+        <input
+          type="text"
+          placeholder="email"
+          ref={emailRef}
+          defaultValue={formDataValues?.email}
+        />
+        <input
+          type="text"
+          placeholder="password"
+          ref={passwordRef}
+          defaultValue={formDataValues?.password}
+        />
        <button onClick={handleSubmit}>Submit</button>
      </div>
-        <div style={{ display: "flex", flexDirection: "column", gap: "1rem" }}>
+      <div style={{ display: 'flex', flexDirection: 'column', gap: '1rem' }}>
        <h3>change event (bad way, but validation is possible)</h3>
-            <input type="text" name="strasse" placeholder="Strasse" onChange={handleChange} />
-            <input type="text" name="city" placeholder="Stadt" onChange={handleChange}/>
+        <input
+          type="text"
+          name="strasse"
+          placeholder="Strasse"
+          onChange={handleChange}
+        />
+        <input
+          type="text"
+          name="city"
+          placeholder="Stadt"
+          onChange={handleChange}
+        />
        <button onClick={handleChangeSubmit}>submit</button>
-
      </div>
-        <form onSubmit={handleFormSubmit} style={{ display: "flex", flexDirection: "column", gap: "1rem" }}>
+      <form
+        onSubmit={handleFormSubmit}
+        style={{ display: 'flex', flexDirection: 'column', gap: '1rem' }}
+      >
        <h3>By Form Event</h3>
        <input type="text" name="email" placeholder="Email" />
        <input type="text" name="password" placeholder="password" />
        <button type="submit">Send</button>
      </form>
    </div>
-    );
+  )
 }
--- a/react-advanced-tag1/src/common/components/exercises/UserEffect.tsx
+++ b/react-advanced-tag1/src/common/components/exercises/UserEffect.tsx
@@ -1,66 +1,95 @@
-import { useEffect, useState } from "react";
+import { useEffect, useState } from 'react'

 interface User {
-    id: number;
-    name: string;
-    email: string;
-    website: string;
+  id: number
+  name: string
+  email: string
+  website: string
 }

 export default function UserEffect() {
-    const [user, setUser] = useState<User>();
-    const [userId, setUserId] = useState<number>(0);
-    const [loading, setLoading] = useState<boolean>(false);
+  const [user, setUser] = useState<User>()
+  const [userId, setUserId] = useState<number>(0)
+  const [loading, setLoading] = useState<boolean>(false)

  useEffect(() => {
-        console.log("UserEffect mounted");
+    console.log('UserEffect mounted')

    if (userId === 0) {
-            return;
+      return
    }

-        const start = performance.now(); // Start measuring performance
+    const start = performance.now() // Start measuring performance

-        setLoading(true);
+    setLoading(true)

    // Using AbortController to cancel the fetch request if the component unmounts
    // or if the userId changes before the fetch completes
-        const controller = new AbortController();
-        const signal = controller.signal;
+    const controller = new AbortController()
+    const signal = controller.signal

-        fetch(`https://jsonplaceholder.typicode.com/users/${userId}`, {signal: signal}).then(response => {
+    fetch(`https://jsonplaceholder.typicode.com/users/${userId}`, {
+      signal: signal,
+    })
+      .then((response) => {
        if (!response.ok) {
-                throw new Error("Network response was not ok");
+          throw new Error('Network response was not ok')
        }
-            return response.json();
-        }).then(data => {
-            setUser(data);
-            const end = performance.now(); // End measuring performance
-            const timeTaken = end - start; // Calculate the time taken
-            console.log(`Fetch completed in ${Math.round(timeTaken)} milliseconds`);
-            setLoading(false);
-        }).catch(error => {
-            console.error("There was a problem with the fetch operation:", error);
-        });
+        return response.json()
+      })
+      .then((data) => {
+        setUser(data)
+        const end = performance.now() // End measuring performance
+        const timeTaken = end - start // Calculate the time taken
+        console.log(`Fetch completed in ${Math.round(timeTaken)} milliseconds`)
+        setLoading(false)
+      })
+      .catch((error) => {
+        console.error('There was a problem with the fetch operation:', error)
+      })
    return () => {
-            console.log("UserEffect unmounted");
+      console.log('UserEffect unmounted')
      // Cleanup function to abort the fetch request if the component unmounts
      // or if the userId changes before the fetch completes
-            controller.abort('Fetch aborted');
+      controller.abort('Fetch aborted')
    }
-    }, [userId]);
+  }, [userId])

  return (
    <section>
-            <h2>users Effect Exercise</h2>
-            
      {userId === 0 && <p>Please select a user</p>}
-            {loading || userId === 0 ? <p>Loading...</p> : <p>[{user?.id}] {user?.name}: {user?.website}</p>}
+      {loading || userId === 0 ? (
+        <p>Loading...</p>
+      ) : (
+        <p>
+          [{user?.id}] {user?.name}: {user?.website}
+        </p>
+      )}

-            <button onClick={() => setUserId(1)} style={{padding: 10, border: '1px solid gray'}}>User 1</button>
-            <button onClick={() => setUserId(2)} style={{padding: 10, border: '1px solid gray'}}>User 2</button>
-            <button onClick={() => setUserId(3)} style={{padding: 10, border: '1px solid gray'}}>User 3</button>
-            <button onClick={() => setUserId(4)} style={{padding: 10, border: '1px solid gray'}}>User 4</button>
+      <button
+        onClick={() => setUserId(1)}
+        style={{ padding: 10, border: '1px solid gray' }}
+      >
+        User 1
+      </button>
+      <button
+        onClick={() => setUserId(2)}
+        style={{ padding: 10, border: '1px solid gray' }}
+      >
+        User 2
+      </button>
+      <button
+        onClick={() => setUserId(3)}
+        style={{ padding: 10, border: '1px solid gray' }}
+      >
+        User 3
+      </button>
+      <button
+        onClick={() => setUserId(4)}
+        style={{ padding: 10, border: '1px solid gray' }}
+      >
+        User 4
+      </button>
    </section>
  )
 }
--- a/react-advanced-tag1/src/common/components/exercises/UserOverview.tsx
+++ b/react-advanced-tag1/src/common/components/exercises/UserOverview.tsx
@@ -1,33 +1,44 @@
-import { useFetch } from "../../hooks/useFetch";
-import { useMediaQuery } from "../../hooks/useMediaQuery";
+import { useFetch } from '../../hooks/useFetch'
+import { useMediaQuery } from '../../hooks/useMediaQuery'

 export function UserOverview() {
-    const {data, loading, error} = useFetch("https://jsonplaceholder.typicode.com/users");
+  const { data, loading, error } = useFetch(
+    'https://jsonplaceholder.typicode.com/users'
+  )

-    const isMobile = useMediaQuery('(max-width: 600px)');
+  const isMobile = useMediaQuery('(max-width: 600px)')

-    console.log("isMobile", isMobile);
+  console.log('isMobile', isMobile)

  if (error) {
-        return <p>Error: {error}</p>;
+    return <p>Error: {error}</p>
  }
  if (loading) {
-        return <p>Loading...</p>;
+    return <p>Loading...</p>
  }
  if (!data) {
-        return <p>No data available</p>;
+    return <p>No data available</p>
  }
  return (
    <div>
-            <h2>User Overview</h2>
      <ul>
-                {data.map((user: { id: number; name: string; email: string; website: string }) => (
+        {data.map(
+          (user: {
+            id: number
+            name: string
+            email: string
+            website: string
+          }) => (
            <li key={user.id}>
-                        <strong>{user.name}</strong> <div style={{display: isMobile ? 'none' : 'block' }}>({user.email}) - {user.website}</div>
+              <strong>{user.name}</strong>{' '}
+              <div style={{ display: isMobile ? 'none' : 'block' }}>
+                ({user.email}) - {user.website}
+              </div>
            </li>
-                ))}
+          )
+        )}
      </ul>
      <p>Total Users: {data.length}</p>
    </div>
-    );
+  )
 }
--- a/react-advanced-tag1/src/common/components/globals/Button.tsx
+++ b/react-advanced-tag1/src/common/components/globals/Button.tsx
@@ -0,0 +1,43 @@
+import { ComponentPropsWithoutRef, CSSProperties } from 'react'
+
+interface ButtonProps extends ComponentPropsWithoutRef<'button'> {
+  variant: 'primary' | 'secondary'
+  size: 'sm' | 'md' | 'lg'
+}
+/**
+ * Button component
+ */
+export const Button = ({
+  children,
+  variant,
+  size,
+  ...restProps
+}: ButtonProps) => {
+  const sizeStyles: Record<ButtonProps['size'], CSSProperties> = {
+    sm: {
+      padding: '0.5rem',
+    },
+    md: {
+      padding: '0.75rem',
+    },
+    lg: {
+      padding: '1rem',
+    },
+  }
+  const variantStyles: Record<ButtonProps['variant'], CSSProperties> = {
+    primary: {
+      backgroundColor: 'blue',
+    },
+    secondary: {
+      backgroundColor: 'gray',
+    },
+  }
+  return (
+    <button
+      {...restProps}
+      style={{ ...variantStyles[variant], ...sizeStyles[size] }}
+    >
+      {children}
+    </button>
+  )
+}
--- a/react-advanced-tag1/src/common/components/globals/Heading.tsx
+++ b/react-advanced-tag1/src/common/components/globals/Heading.tsx
@@ -1,8 +1,8 @@
-export default function Heading({title = "Hallo Teilnehmer"}: {title?: string}): React.ReactElement {
-    console.log("Heading rendered");
-    return (
-        <h2 >
-            {title}
-        </h2>
-    );
+export default function Heading({
+  title = 'Hallo Teilnehmer',
+}: {
+  title?: string
+}): React.ReactElement {
+  console.log('Heading rendered')
+  return <h2>{title}</h2>
 }
--- a/react-advanced-tag1/src/common/hooks/useFetch.ts
+++ b/react-advanced-tag1/src/common/hooks/useFetch.ts
@@ -1,16 +1,16 @@
-import { useEffect, useState } from "react";
+import { useEffect, useState } from 'react'

 interface User {
-    id: number;
-    name: string;
-    email: string;
-    website: string;
+  id: number
+  name: string
+  email: string
+  website: string
 }

 export function useFetch(url: string) {
-    const [data, setData] = useState<User[] | null>(null);
-    const [loading, setLoading] = useState(true);
-    const [error, setError] = useState<string | null>(null);
+  const [data, setData] = useState<User[] | null>(null)
+  const [loading, setLoading] = useState(true)
+  const [error, setError] = useState<string | null>(null)

  // alternativ
  // const [fetchValues, setFetchValues] = useState({
@@ -22,28 +22,23 @@ export function useFetch(url: string) {
  useEffect(() => {
    async function fetchData() {
      try {
-                const response = await fetch(url);
+        const response = await fetch(url)
        if (!response.ok) {
-                    setError("Network response was not ok");
-                    throw new Error("Network response was not ok");
+          setError('Network response was not ok')
+          throw new Error('Network response was not ok')
        }
-                const data = await response.json();
-                setData(data);
-                setError(null);
-
+        const data = await response.json()
+        setData(data)
+        setError(null)
      } catch (error) {
-                console.error("Error fetching data:", error);
-                setError("Error fetching data");
-            }
-            finally {
-                setLoading(false);
+        console.error('Error fetching data:', error)
+        setError('Error fetching data')
+      } finally {
+        setLoading(false)
      }
    }
-        fetchData();
-        
-
-    }, [url]);
-
-    return { data, loading, error };
+    fetchData()
+  }, [url])

+  return { data, loading, error }
 }
--- a/react-advanced-tag1/src/common/hooks/useLocalStorage.ts
+++ b/react-advanced-tag1/src/common/hooks/useLocalStorage.ts
@@ -1,39 +1,43 @@
-import { useState } from "react";
+import { useState } from 'react'

-export default function useLocalStorage<T>(key: string, initialValue: T | null) {
+export default function useLocalStorage<T>(
+  key: string,
+  initialValue: T | null
+) {
  const [value, setValue] = useState<T | null>(() => {
    try {
-            if (typeof window === "undefined") {
-                return initialValue;
+      if (typeof window === 'undefined') {
+        return initialValue
      }
-            const storedValue = localStorage.getItem(key);
-            return storedValue ? JSON.parse(storedValue) : initialValue;
+      const storedValue = localStorage.getItem(key)
+      return storedValue ? JSON.parse(storedValue) : initialValue
    } catch (error) {
-            console.error("Error reading from localStorage", error);
-            return initialValue;
+      console.error('Error reading from localStorage', error)
+      return initialValue
    }
-    });
+  })
  const setStoredValue = (newValue: T) => {
    try {
-            const valueToStore = newValue instanceof Function ? newValue(value) : newValue;
-            setValue(valueToStore);
-            if (typeof window !== "undefined") {
-                localStorage.setItem(key, JSON.stringify(valueToStore));
+      const valueToStore =
+        newValue instanceof Function ? newValue(value) : newValue
+      setValue(valueToStore)
+      if (typeof window !== 'undefined') {
+        localStorage.setItem(key, JSON.stringify(valueToStore))
      }
    } catch (error) {
-            console.error("Error writing to localStorage", error);
+      console.error('Error writing to localStorage', error)
    }
  }

  const removeStoredValue = () => {
    try {
-            if (typeof window !== "undefined") {
-                localStorage.removeItem(key);
+      if (typeof window !== 'undefined') {
+        localStorage.removeItem(key)
      }
-            setValue(null);
+      setValue(null)
    } catch (error) {
-            console.error("Error removing from localStorage", error);
+      console.error('Error removing from localStorage', error)
    }
  }
-    return {value, setStoredValue, removeStoredValue};
+  return { value, setStoredValue, removeStoredValue }
 }
--- a/react-advanced-tag1/src/common/hooks/useMediaQuery.ts
+++ b/react-advanced-tag1/src/common/hooks/useMediaQuery.ts
@@ -1,5 +1,4 @@
-import { useEffect, useState } from "react";
-
+import { useEffect, useState } from 'react'

 /**
 * Custom hook to check if a media query matches the current viewport.
@@ -7,25 +6,25 @@ import { useEffect, useState } from "react";
 * @returns A boolean indicating whether the media query matches.
 */
 export function useMediaQuery(query: string) {
-    const [matches, setMatches] = useState<boolean>(false);
+  const [matches, setMatches] = useState<boolean>(false)

  useEffect(() => {
-        const mediaQueryList = window.matchMedia(query);
+    const mediaQueryList = window.matchMedia(query)
    const handleChange = (event: MediaQueryListEvent) => {
-            setMatches(event.matches);
-        };
+      setMatches(event.matches)
+    }

    // Set the initial value
-        setMatches(mediaQueryList.matches);
+    setMatches(mediaQueryList.matches)

    // Add event listener
-        mediaQueryList.addEventListener('change', handleChange);
+    mediaQueryList.addEventListener('change', handleChange)

    // Cleanup function to remove the event listener
    return () => {
-            mediaQueryList.removeEventListener('change', handleChange);
-        };
-    }, [query]);
-
-    return matches;
+      mediaQueryList.removeEventListener('change', handleChange)
+    }
+  }, [query])
+
+  return matches
 }
--- a/react-advanced-tag1/src/common/stores/counter-store.ts
+++ b/react-advanced-tag1/src/common/stores/counter-store.ts
@@ -0,0 +1,15 @@
+import { create } from 'zustand'
+
+interface CounterState {
+  count: number
+  increment: () => void
+  decrement: () => void
+}
+
+const useCounterStore = create<CounterState>((set) => ({
+  count: 0,
+  increment: () => set((state) => ({ count: state.count + 1 })),
+  decrement: () => set((state) => ({ count: state.count - 1 })),
+}))
+
+export default useCounterStore
--- a/react-advanced-tag1/src/common/stores/mobx-store.ts
+++ b/react-advanced-tag1/src/common/stores/mobx-store.ts
@@ -0,0 +1,29 @@
+import { makeAutoObservable } from 'mobx'
+
+class CounterStore {
+  count = 0
+  message = 'Hello, MobX!'
+
+  constructor() {
+    makeAutoObservable(this)
+  }
+
+  increment() {
+    this.count++
+  }
+
+  decrement() {
+    this.count--
+  }
+
+  reset() {
+    this.count = 0
+  }
+
+  updateMessage(newMessage: string) {
+    this.message = newMessage
+  }
+}
+
+const counterStore = new CounterStore()
+export default counterStore
--- a/react-advanced-tag1/src/common/utils/shuffle.test.ts
+++ b/react-advanced-tag1/src/common/utils/shuffle.test.ts
@@ -1,22 +1,22 @@
-import { describe, it, expect } from 'vitest';
-import { shuffleArray, users } from './shuffle';
+import { describe, it, expect } from 'vitest'
+import { shuffleArray, users } from './shuffle'

 describe('shuffleArray', () => {
  it('should shuffle the array and return a new order', () => {
-        const originalArray = [...users];
-        const shuffledArray = shuffleArray([...users]);
+    const originalArray = [...users]
+    const shuffledArray = shuffleArray([...users])

-        expect(shuffledArray).not.toEqual(originalArray); // Ensure the order is different
-        expect(shuffledArray.sort()).toEqual(originalArray.sort()); // Ensure all elements are still present
-    });
+    expect(shuffledArray).not.toEqual(originalArray) // Ensure the order is different
+    expect(shuffledArray.sort()).toEqual(originalArray.sort()) // Ensure all elements are still present
+  })

  it('should return an empty array when input is empty', () => {
-        const result = shuffleArray([]);
-        expect(result).toEqual([]);
-    });
+    const result = shuffleArray([])
+    expect(result).toEqual([])
+  })

  it('should handle arrays with one element', () => {
-        const result = shuffleArray(['onlyElement']);
-        expect(result).toEqual(['onlyElement']);
-    });
-});
+    const result = shuffleArray(['onlyElement'])
+    expect(result).toEqual(['onlyElement'])
+  })
+})
--- a/react-advanced-tag1/src/common/utils/shuffle.ts
+++ b/react-advanced-tag1/src/common/utils/shuffle.ts
@@ -1,8 +1,7 @@
 export function shuffleArray(array: string[]) {
  for (let i = array.length - 1; i > 0; i--) {
- 
-        const j = Math.floor(Math.random()* (i +1));
-        [array[i], array[j]] = [array[j], array[i]];
+    const j = Math.floor(Math.random() * (i + 1))
+    ;[array[i], array[j]] = [array[j], array[i]]
  }

  return [...array]
--- a/react-advanced-tag1/src/layouts/MainLayout.css
+++ b/react-advanced-tag1/src/layouts/MainLayout.css
@@ -28,7 +28,9 @@ header nav a {
  text-decoration: none;
  font-weight: bold;
  padding: 0.5rem 1rem;
-    transition: background-color 0.3s, color 0.3s;
+  transition:
+    background-color 0.3s,
+    color 0.3s;
 }

 header nav a:hover {
@@ -38,8 +40,6 @@ header nav a.active {
  text-decoration: underline;
 }

-
-
 footer {
  background-color: #1a1a1a;
  color: #ffffff;
@@ -47,10 +47,27 @@ footer {
  text-align: center;
 }

-
 .content {
  max-width: 1280px;
  margin: 0 auto;
  padding: 2rem;
  text-align: center;
 }
+
+@media (prefers-color-scheme: light) {
+  header {
+    background-color: #f0f0f0;
+    color: #000000;
+  }
+  header nav a {
+    color: #000000;
+  }
+  footer {
+    background-color: #f0f0f0;
+    color: #000000;
+  }
+  .content {
+    background-color: #ffffff;
+    color: #000000;
+  }
+}
--- a/react-advanced-tag1/src/layouts/MainLayout.tsx
+++ b/react-advanced-tag1/src/layouts/MainLayout.tsx
@@ -1,20 +1,23 @@
-import { useState } from "react";
+import { useState } from 'react'
 import './MainLayout.css'
-import Footer from "../common/components/Footer";
-import Header from "../common/components/Header";
+import Footer from '../common/components/Footer'
+import Header from '../common/components/Header'
+import { Button } from '../common/components/globals/Button'

-export default function MainLayout({children}: {children: React.ReactNode | React.ReactElement | React.ReactElement[]}): React.ReactElement {
-  
-
-  const [clicked, setClicked] = useState(false);
+export default function MainLayout({
+  children,
+}: {
+  children: React.ReactNode | React.ReactElement | React.ReactElement[]
+}): React.ReactElement {
+  const [clicked, setClicked] = useState(false)

  function handleClick() {
-    setClicked(!clicked);
+    setClicked(!clicked)

-    console.log("clicked", clicked);
+    console.log('clicked', clicked)
  }

-  console.log("MainLayout rendered", clicked);
+  console.log('MainLayout rendered', clicked)
  return (
    <>
      <Header />
@@ -22,10 +25,12 @@ export default function MainLayout({children}: {children: React.ReactNode | Reac
      <div className="content">
        {children}

-            <button onClick={handleClick}>Click</button>
+        <Button onClick={handleClick} variant="secondary" size="sm">
+          Click
+        </Button>
      </div>

      <Footer />
    </>
-  );
+  )
 }
--- a/react-advanced-tag1/src/main.tsx
+++ b/react-advanced-tag1/src/main.tsx
@@ -3,11 +3,14 @@ import { createRoot } from 'react-dom/client'
 import './index.css'
 import App from './App.tsx'
 import { BrowserRouter } from 'react-router-dom'
+import { enableMapSet } from 'immer'
+
+enableMapSet()

 createRoot(document.getElementById('root')!).render(
  <StrictMode>
    <BrowserRouter>
      <App />
    </BrowserRouter>
-  </StrictMode>,
+  </StrictMode>
 )
--- a/react-advanced-tag1/src/pages/ComponentWrapperPage.tsx
+++ b/react-advanced-tag1/src/pages/ComponentWrapperPage.tsx
@@ -0,0 +1,11 @@
+import ComponentWrapper from '../common/components/ComponentWrapper/ComponentWrapper'
+
+export default function ComponentWrapperPage() {
+  return (
+    <div style={{ display: 'flex', flexDirection: 'column', gap: '3rem' }}>
+      <ComponentWrapper title="Komponenten Wrapper Test">
+        <h1>Hallo</h1>
+      </ComponentWrapper>
+    </div>
+  )
+}
--- a/react-advanced-tag1/src/pages/EffectExercisesPage.tsx
+++ b/react-advanced-tag1/src/pages/EffectExercisesPage.tsx
@@ -0,0 +1,10 @@
+import ComponentWrapper from '../common/components/ComponentWrapper/ComponentWrapper'
+import EffectExercises from '../common/components/exercises/EffectExercises'
+
+export default function EffectExercisesPage() {
+  return (
+    <ComponentWrapper title="Effekte">
+      <EffectExercises />
+    </ComponentWrapper>
+  )
+}
--- a/react-advanced-tag1/src/pages/FormsPage.tsx
+++ b/react-advanced-tag1/src/pages/FormsPage.tsx
@@ -0,0 +1,11 @@
+import RefExercise from '../common/components/exercises/RefExercise'
+import Heading from '../common/components/globals/Heading'
+
+export default function FormsPage() {
+  return (
+    <div>
+      <Heading title="Formulare" />
+      <RefExercise />
+    </div>
+  )
+}
--- a/react-advanced-tag1/src/pages/HocPage.tsx
+++ b/react-advanced-tag1/src/pages/HocPage.tsx
@@ -0,0 +1,10 @@
+import ComponentWrapper from '../common/components/ComponentWrapper/ComponentWrapper'
+import DogImagesWithLoader from '../common/components/exercises/HocExercise/DogImages'
+
+export function HocPage() {
+  return (
+    <ComponentWrapper title="HOC Example">
+      <DogImagesWithLoader />
+    </ComponentWrapper>
+  )
+}
--- a/react-advanced-tag1/src/pages/HomePage.tsx
+++ b/react-advanced-tag1/src/pages/HomePage.tsx
@@ -0,0 +1,9 @@
+import ComponentWrapper from '../common/components/ComponentWrapper/ComponentWrapper'
+
+export default function HomePage() {
+  return (
+    <ComponentWrapper title="Willkommen">
+      <p>Willkommen auf der Startseite!</p>
+    </ComponentWrapper>
+  )
+}
--- a/react-advanced-tag1/src/pages/ImmerPage.tsx
+++ b/react-advanced-tag1/src/pages/ImmerPage.tsx
@@ -0,0 +1,10 @@
+import ComponentWrapper from '../common/components/ComponentWrapper/ComponentWrapper'
+import ImmerExercise from '../common/components/exercises/ImmerExercise'
+
+export default function ImmerPage() {
+  return (
+    <ComponentWrapper title="Immer">
+      <ImmerExercise />
+    </ComponentWrapper>
+  )
+}
--- a/react-advanced-tag1/src/pages/MemoCallbackPage.tsx
+++ b/react-advanced-tag1/src/pages/MemoCallbackPage.tsx
@@ -0,0 +1,10 @@
+import ComponentWrapper from '../common/components/ComponentWrapper/ComponentWrapper'
+import MemoCallback from '../common/components/exercises/MemoCallback'
+
+export default function MemoCallbackPage() {
+  return (
+    <ComponentWrapper title="Memo und Callback">
+      <MemoCallback />
+    </ComponentWrapper>
+  )
+}
--- a/react-advanced-tag1/src/pages/MobXPage.tsx
+++ b/react-advanced-tag1/src/pages/MobXPage.tsx
@@ -0,0 +1,35 @@
+import { observer } from 'mobx-react-lite'
+import ComponentWrapper from '../common/components/ComponentWrapper/ComponentWrapper'
+import counterStore from '../common/stores/mobx-store'
+
+const MobXPage = observer(() => {
+  return (
+    <ComponentWrapper title="MobX">
+      <div>
+        <h3>Counter: {counterStore.count}</h3>
+        <button onClick={() => counterStore.increment()}>Increment</button>
+        <button onClick={() => counterStore.decrement()}>Decrement</button>
+      </div>
+      <div>
+        <h3>Message: {counterStore.message}</h3>
+        <MessageUpdater />
+        <button onClick={() => counterStore.reset()}>Reset</button>
+      </div>
+    </ComponentWrapper>
+  )
+})
+
+export default MobXPage
+
+function MessageUpdater() {
+  return (
+    <div>
+      <h3>Update Message</h3>
+      <input
+        type="text"
+        value={counterStore.message}
+        onChange={(e) => counterStore.updateMessage(e.target.value)}
+      />
+    </div>
+  )
+}
--- a/react-advanced-tag1/src/pages/ModalPage.tsx
+++ b/react-advanced-tag1/src/pages/ModalPage.tsx
@@ -0,0 +1,18 @@
+import { useState } from 'react'
+import { createPortal } from 'react-dom'
+import ComponentWrapper from '../common/components/ComponentWrapper/ComponentWrapper'
+import Modal from '../common/components/Modal'
+
+export default function ModalPage() {
+  const [modalOpen, setModalOpen] = useState(false)
+  return (
+    <ComponentWrapper title="Modal Test">
+      <button onClick={() => setModalOpen(!modalOpen)}>Toggle Modal</button>
+      {modalOpen &&
+        createPortal(
+          <Modal onClose={() => setModalOpen(false)} />,
+          document.getElementById('modal') as HTMLElement
+        )}
+    </ComponentWrapper>
+  )
+}
--- a/react-advanced-tag1/src/pages/UsersPage.tsx
+++ b/react-advanced-tag1/src/pages/UsersPage.tsx
@@ -0,0 +1,22 @@
+import ComponentWrapper from '../common/components/ComponentWrapper/ComponentWrapper'
+import UserEffect from '../common/components/exercises/UserEffect'
+import { UserOverview } from '../common/components/exercises/UserOverview'
+
+export default function UsersPage() {
+  return (
+    <div style={{ display: 'flex', flexDirection: 'column', gap: '3rem' }}>
+      <ComponentWrapper
+        title="Benutzer"
+        description="Load User with useEffect Hook"
+      >
+        <UserEffect />
+      </ComponentWrapper>
+      <ComponentWrapper
+        title="User Overview"
+        description="Load User List with useFetch Hook & use MeadiaQuery Hook"
+      >
+        <UserOverview />
+      </ComponentWrapper>
+    </div>
+  )
+}
--- a/react-advanced-tag1/src/pages/ZustandCounterPage.tsx
+++ b/react-advanced-tag1/src/pages/ZustandCounterPage.tsx
@@ -0,0 +1,18 @@
+import ComponentWrapper from '../common/components/ComponentWrapper/ComponentWrapper'
+import useCounterStore from '../common/stores/counter-store'
+
+export default function ZustandCounterPage() {
+  const { decrement, increment } = useCounterStore()
+  return (
+    <ComponentWrapper title="Zustand Counter">
+      <button onClick={increment}>Increment</button>
+      <button onClick={decrement}>Decrement</button>
+      <CounterValue />
+    </ComponentWrapper>
+  )
+}
+
+function CounterValue() {
+  const count = useCounterStore((state) => state.count)
+  return <p>Count: {count}</p>
+}
--- a/react-advanced-tag1/src/routes/ComponentWrapperPage.tsx
+++ b/react-advanced-tag1/src/routes/ComponentWrapperPage.tsx
@@ -1,15 +0,0 @@
-import ComponentWrapper from "../common/components/ComponentWrapper/ComponentWrapper";
-import EffectExercises from "../common/components/exercises/EffectExercises";
-
-export default function ComponentWrapperPage() {
-    return (
-        <div style={{ display: 'flex', flexDirection: 'column', gap: '3rem' }}>
-            <ComponentWrapper title='Komponenten Wrapper Test'>
-                <h1>Hallo</h1>
-            </ComponentWrapper>
-            <ComponentWrapper title='Komponenten Wrapper Test2'>
-                <EffectExercises />
-            </ComponentWrapper>
-    </div>
-    );
-}
--- a/react-advanced-tag1/src/routes/EffectExercisesPage.tsx
+++ b/react-advanced-tag1/src/routes/EffectExercisesPage.tsx
@@ -1,12 +0,0 @@
-import EffectExercises from "../common/components/exercises/EffectExercises";
-import Heading from "../common/components/globals/Heading";
-
-
-export default function EffectExercisesPage() {
-    return (
-        <div>
-            <Heading title="Effekte" />
-            <EffectExercises />
-        </div>
-    );
-}
--- a/react-advanced-tag1/src/routes/FormsPage.tsx
+++ b/react-advanced-tag1/src/routes/FormsPage.tsx
@@ -1,11 +0,0 @@
-import RefExercise from "../common/components/exercises/RefExercise";
-import Heading from "../common/components/globals/Heading";
-
-export default function FormsPage() {
-    return (
-        <div>
-            <Heading title="Formulare" />
-            <RefExercise />
-        </div>
-    );
-}
--- a/react-advanced-tag1/src/routes/HomePage.tsx
+++ b/react-advanced-tag1/src/routes/HomePage.tsx
@@ -1,10 +0,0 @@
-import Heading from "../common/components/globals/Heading";
-
-export default function HomePage() {
-    return (
-        <>
-            <Heading title="Willkommen" />
-            <p>Willkommen auf der Startseite!</p>
-        </>
-    );
-}
--- a/react-advanced-tag1/src/routes/MemoCallbackPage.tsx
+++ b/react-advanced-tag1/src/routes/MemoCallbackPage.tsx
@@ -1,11 +0,0 @@
-import MemoCallback from "../common/components/exercises/MemoCallback";
-import Heading from "../common/components/globals/Heading";
-
-export default function MemoCallbackPage() {
-    return (
-        <>
-            <Heading title="Memo und Callback" />
-            <MemoCallback />
-        </>
-    )
-}
--- a/react-advanced-tag1/src/routes/UsersPage.tsx
+++ b/react-advanced-tag1/src/routes/UsersPage.tsx
@@ -1,13 +0,0 @@
-import UserEffect from "../common/components/exercises/UserEffect";
-import { UserOverview } from "../common/components/exercises/UserOverview";
-import Heading from "../common/components/globals/Heading";
-
-export default function UsersPage() {
-    return (
-        <div>
-            <Heading title="Benutzer" />
-            <UserEffect />
-            <UserOverview />
-        </div>
-    );
-}
--- a/react-advanced-tag1/src/stories/Button.stories.tsx
+++ b/react-advanced-tag1/src/stories/Button.stories.tsx
@@ -0,0 +1,52 @@
+import { Button } from '../common/components/globals/Button'
+import { fn } from '@storybook/test'
+import { Meta, StoryObj } from '@storybook/react'
+
+const meta: Meta<typeof Button> = {
+  title: 'Elements/Button',
+  component: Button,
+  argTypes: {
+    variant: { control: 'radio', options: ['primary', 'secondary'] },
+    size: { control: 'radio', options: ['sm', 'md', 'lg'] },
+  },
+  args: {
+    onClick: fn(),
+  },
+}
+
+export default meta
+
+type Story = StoryObj<typeof Button>
+
+/** This is the primary Button */
+export const Primary: Story = {
+  args: {
+    children: 'Primary Button',
+    variant: 'primary',
+    size: 'md',
+  },
+}
+
+export const Secondary: Story = {
+  args: {
+    children: 'Secondary Button',
+    variant: 'secondary',
+    size: 'md',
+  },
+}
+
+export const Small: Story = {
+  args: {
+    children: 'Small Button',
+    variant: 'primary',
+    size: 'sm',
+  },
+}
+
+export const Large: Story = {
+  args: {
+    children: 'Large Button',
+    variant: 'primary',
+    size: 'lg',
+  },
+}
--- a/react-advanced-tag1/src/stories/ComponentWrapper.stories.tsx
+++ b/react-advanced-tag1/src/stories/ComponentWrapper.stories.tsx
@@ -0,0 +1,43 @@
+import ComponentWrapper from '../common/components/ComponentWrapper/ComponentWrapper'
+import { Meta, StoryObj } from '@storybook/react'
+
+const meta: Meta<typeof ComponentWrapper> = {
+  title: 'Wrapper/ComponentWrapper',
+  component: ComponentWrapper,
+  argTypes: {
+    title: { control: 'text' },
+    description: { control: 'text' },
+  },
+}
+
+export default meta
+
+type Story = StoryObj<typeof ComponentWrapper>
+
+export const Default: Story = {
+  args: {
+    title: 'Default Title',
+    description: 'This is a default description.',
+    children: <p>Default content goes here.</p>,
+  },
+}
+
+export const WithoutTitle: Story = {
+  args: {
+    description: 'This wrapper has no title.',
+    children: <p>Content without a title.</p>,
+  },
+}
+
+export const WithoutDescription: Story = {
+  args: {
+    title: 'Title Only',
+    children: <p>Content without a description.</p>,
+  },
+}
+
+export const Empty: Story = {
+  args: {
+    children: <p>Empty wrapper with only content.</p>,
+  },
+}
--- a/react-advanced-tag1/src/stories/Footer.stories.tsx
+++ b/react-advanced-tag1/src/stories/Footer.stories.tsx
@@ -0,0 +1,15 @@
+import { Meta, StoryObj } from '@storybook/react'
+import Footer from '../common/components/Footer'
+
+const meta: Meta<typeof Footer> = {
+  title: 'Common/Footer',
+  component: Footer,
+}
+
+export default meta
+
+type Story = StoryObj<typeof Footer>
+
+export const Default: Story = {
+  render: () => <Footer />,
+}
--- a/react-advanced-tag1/src/stories/Header.stories.tsx
+++ b/react-advanced-tag1/src/stories/Header.stories.tsx
@@ -0,0 +1,15 @@
+import Header from '../common/components/Header/index'
+import { Meta, StoryObj } from '@storybook/react'
+
+const meta: Meta<typeof Header> = {
+  title: 'Common/Header',
+  component: Header,
+}
+
+export default meta
+
+type Story = StoryObj<typeof Header>
+
+export const Default: Story = {
+  render: () => <Header />,
+}
--- a/react-advanced-tag1/vitest.shims.d.ts
+++ b/react-advanced-tag1/vitest.shims.d.ts
@@ -0,0 +1 @@
+/// <reference types="@vitest/browser/providers/playwright" />
--- a/react-advanced-tag1/vitest.workspace.ts
+++ b/react-advanced-tag1/vitest.workspace.ts
@@ -0,0 +1,34 @@
+import path from 'node:path';
+import { fileURLToPath } from 'node:url';
+
+import { defineWorkspace } from 'vitest/config';
+
+import { storybookTest } from '@storybook/experimental-addon-test/vitest-plugin';
+
+const dirname =
+  typeof __dirname !== 'undefined'
+    ? __dirname
+    : path.dirname(fileURLToPath(import.meta.url));
+
+// More info at: https://storybook.js.org/docs/writing-tests/test-addon
+export default defineWorkspace([
+  'vite.config.ts',
+  {
+    extends: 'vite.config.ts',
+    plugins: [
+      // The plugin will run tests for the stories defined in your Storybook config
+      // See options at: https://storybook.js.org/docs/writing-tests/test-addon#storybooktest
+      storybookTest({ configDir: path.join(dirname, '.storybook') }),
+    ],
+    test: {
+      name: 'storybook',
+      browser: {
+        enabled: true,
+        headless: true,
+        provider: 'playwright',
+        instances: [{ browser: 'chromium' }],
+      },
+      setupFiles: ['.storybook/vitest.setup.ts'],
+    },
+  },
+]);
Author	SHA1	Message	Date
e560248	49b67f7654	add comments in storybook	2025-04-08 15:54:16 +02:00
e560248	e6f57d3cbc	add storybook	2025-04-08 15:47:25 +02:00
e560248	456def177a	fix light mode	2025-04-08 15:01:56 +02:00
e560248	241ea51d34	use ComponentWrapper	2025-04-08 14:38:45 +02:00
e560248	554f14c8d9	use ComponentWrapper in UsersPage	2025-04-08 14:35:30 +02:00
e560248	d5c52968a6	add MobX	2025-04-08 14:05:32 +02:00
e560248	88de79086e	add immerJs example	2025-04-08 13:28:46 +02:00
e560248	6577698459	add prettier setup	2025-04-08 12:54:07 +02:00
e560248	419113541b	add Higher-Order Components	2025-04-08 11:52:10 +02:00
e560248	22031864fb	rename folder	2025-04-08 10:55:52 +02:00
e560248	832bc2b209	move Modal into Router	2025-04-08 10:54:33 +02:00
e560248	8b13335c6c	add Zustand Counter	2025-04-08 10:23:00 +02:00
e560248	0804eba920	add Modal example	2025-04-08 09:58:49 +02:00
e560248	6d7060aceb	add react-scan & VS Code Settings	2025-04-08 09:40:48 +02:00
				`@@ -0,0 +1 @@`
				`/// <reference types="@vitest/browser/providers/playwright" />`