[ { "path": ".github/workflows/ci-rtk.yml", "content": "name: CI - RTK Query Build\n\non:\n push:\n branches:\n - develop\n paths:\n - 'apps/rtk-query/**'\n pull_request:\n paths:\n - 'apps/rtk-query/**'\n\njobs:\n build:\n runs-on: ubuntu-latest\n steps:\n - uses: actions/checkout@v4\n\n - uses: actions/setup-node@v4\n with:\n node-version: lts/*\n\n - uses: pnpm/action-setup@v4\n with:\n run_install: false\n\n - name: Install dependencies\n working-directory: apps/rtk-query\n run: pnpm install --no-frozen-lockfile\n\n - name: Build app\n working-directory: apps/rtk-query\n run: pnpm build\n" }, { "path": ".github/workflows/ci-tanstack.yml", "content": "name: CI - TanStack Query Build\n\non:\n push:\n branches:\n - develop\n paths:\n - 'apps/tanstack-query-zustand/**'\n pull_request:\n paths:\n - 'apps/tanstack-query-zustand/**'\n\njobs:\n build:\n runs-on: ubuntu-latest\n steps:\n - uses: actions/checkout@v4\n\n - uses: actions/setup-node@v4\n with:\n node-version: lts/*\n\n - uses: pnpm/action-setup@v4\n with:\n run_install: false\n\n - name: Install dependencies\n working-directory: apps/tanstack-query-zustand\n run: pnpm install --no-frozen-lockfile\n\n - name: Build app\n working-directory: apps/tanstack-query-zustand\n run: pnpm build\n" }, { "path": ".github/workflows/deploy-effector.yml", "content": "name: Deploy Effector App\n\non:\n workflow_dispatch:\n\nconcurrency:\n group: gh-pages-deploy\n cancel-in-progress: false\n\npermissions:\n contents: write\n\njobs:\n deploy:\n runs-on: ubuntu-latest\n steps:\n - uses: actions/checkout@v4\n\n - uses: actions/setup-node@v4\n with:\n node-version: lts/*\n\n - uses: pnpm/action-setup@v4\n with:\n run_install: false\n\n - name: Install dependencies\n working-directory: apps/react-effector-fsd\n run: pnpm install --no-frozen-lockfile\n\n - name: Build app\n working-directory: apps/react-effector-fsd\n run: pnpm build\n\n - name: Create SPA fallback\n working-directory: apps/react-effector-fsd/dist\n run: cp index.html 404.html\n\n - name: Deploy to GitHub Pages\n uses: JamesIves/github-pages-deploy-action@v4\n with:\n folder: apps/react-effector-fsd/dist\n target-folder: effector\n clean: false\n branch: gh-pages\n" }, { "path": ".github/workflows/deploy-reatom.yml", "content": "name: Deploy Reatom App\n\non:\n workflow_dispatch:\n\nconcurrency:\n group: gh-pages-deploy\n cancel-in-progress: false\n\npermissions:\n contents: write\n\njobs:\n deploy:\n runs-on: ubuntu-latest\n steps:\n - uses: actions/checkout@v4\n\n - uses: actions/setup-node@v4\n with:\n node-version: lts/*\n\n - uses: pnpm/action-setup@v4\n with:\n run_install: false\n\n - name: Install dependencies\n working-directory: apps/reatom\n run: pnpm install --no-frozen-lockfile\n\n - name: Build app\n working-directory: apps/reatom\n run: pnpm build\n\n - name: Create SPA fallback\n working-directory: apps/reatom/dist\n run: cp index.html 404.html\n\n - name: Deploy to GitHub Pages\n uses: JamesIves/github-pages-deploy-action@v4\n with:\n folder: apps/reatom/dist\n target-folder: reatom\n clean: false\n branch: gh-pages\n" }, { "path": ".github/workflows/deploy-root.yml", "content": "name: Deploy Root Landing Page\n\non:\n workflow_dispatch:\n\nconcurrency:\n group: gh-pages-deploy\n cancel-in-progress: false\n\npermissions:\n contents: write\n\njobs:\n deploy:\n runs-on: ubuntu-latest\n steps:\n - uses: actions/checkout@v4\n\n - name: Prepare root files\n run: |\n mkdir -p temp-root\n cp public/index.html temp-root/\n cp public/404.html temp-root/\n echo 'stg.musicfun.dev' > temp-root/CNAME\n touch temp-root/.nojekyll\n\n - name: Deploy to GitHub Pages\n uses: JamesIves/github-pages-deploy-action@v4\n with:\n folder: temp-root\n target-folder: .\n clean: false\n clean-exclude: |\n tanstackquery/\n rtkquery/\n reatom/\n effector/\n branch: gh-pages\n" }, { "path": ".github/workflows/deploy-rtk.yml", "content": "name: Deploy RTK Query App\n\non:\n workflow_dispatch:\n\nconcurrency:\n group: gh-pages-deploy\n cancel-in-progress: false\n\npermissions:\n contents: write\n\njobs:\n deploy:\n runs-on: ubuntu-latest\n steps:\n - uses: actions/checkout@v4\n\n - uses: actions/setup-node@v4\n with:\n node-version: lts/*\n\n - uses: pnpm/action-setup@v4\n with:\n run_install: false\n\n - name: Install dependencies\n working-directory: apps/rtk-query\n run: pnpm install --no-frozen-lockfile\n\n - name: Build app\n working-directory: apps/rtk-query\n run: pnpm build\n\n - name: Create SPA fallback\n working-directory: apps/rtk-query/dist\n run: cp index.html 404.html\n\n - name: Deploy to GitHub Pages\n uses: JamesIves/github-pages-deploy-action@v4\n with:\n folder: apps/rtk-query/dist\n target-folder: rtkquery\n clean: false\n branch: gh-pages\n" }, { "path": ".github/workflows/deploy-tanstack.yml", "content": "name: Deploy TanStack Query App\n\non:\n workflow_dispatch:\n\nconcurrency:\n group: gh-pages-deploy\n cancel-in-progress: false\n\npermissions:\n contents: write\n\njobs:\n deploy:\n runs-on: ubuntu-latest\n steps:\n - uses: actions/checkout@v4\n\n - uses: actions/setup-node@v4\n with:\n node-version: lts/*\n\n - uses: pnpm/action-setup@v4\n with:\n run_install: false\n\n - name: Install dependencies\n working-directory: apps/tanstack-query-zustand\n run: pnpm install --no-frozen-lockfile\n\n - name: Build app\n working-directory: apps/tanstack-query-zustand\n run: pnpm build\n\n - name: Create SPA fallback\n working-directory: apps/tanstack-query-zustand/dist\n run: cp index.html 404.html\n\n - name: Deploy to GitHub Pages\n uses: JamesIves/github-pages-deploy-action@v4\n with:\n folder: apps/tanstack-query-zustand/dist\n target-folder: tanstackquery\n clean: false\n branch: gh-pages\n" }, { "path": ".github/workflows/deploy.yml", "content": "name: Deploy MusicFun Apps to GitHub Pages\n\non:\n workflow_dispatch:\n\npermissions:\n contents: read\n pages: write\n id-token: write\n\nconcurrency:\n group: pages-deploy\n cancel-in-progress: true\n\njobs:\n deploy:\n runs-on: ubuntu-latest\n environment:\n name: github-pages\n url: ${{ steps.deployment.outputs.page_url }}\n\n steps:\n - uses: actions/checkout@v4\n\n - uses: actions/setup-node@v4\n with:\n node-version: lts/*\n\n - uses: pnpm/action-setup@v4\n with:\n run_install: false\n\n # === Install ===\n\n - name: Install deps for tanstack-query (folder renamed)\n working-directory: apps/tanstack-query-zustand\n run: pnpm install --no-frozen-lockfile\n\n - name: Install deps for rtk-query\n working-directory: apps/rtk-query\n run: pnpm install --no-frozen-lockfile\n\n - name: Install deps for reatom\n working-directory: apps/reatom\n run: pnpm install --no-frozen-lockfile\n\n - name: Install deps for effector\n working-directory: apps/react-effector-fsd\n run: pnpm install --no-frozen-lockfile\n\n # === Build ===\n\n - name: Build tanstack-query\n working-directory: apps/tanstack-query-zustand\n run: pnpm build\n\n - name: Build rtk-query\n working-directory: apps/rtk-query\n run: pnpm build\n\n - name: Build reatom\n working-directory: apps/reatom\n run: pnpm build\n\n - name: Build effector\n working-directory: apps/react-effector-fsd\n run: pnpm build\n\n # === Pages config ===\n\n - uses: actions/configure-pages@v5\n with:\n enablement: true\n\n # === SPA fallback ===\n\n - name: SPA fallback for tanstack-query\n working-directory: apps/tanstack-query-zustand/dist\n run: cp index.html 404.html\n\n - name: SPA fallback for rtk-query\n working-directory: apps/rtk-query/dist\n run: cp index.html 404.html\n\n - name: SPA fallback for reatom\n working-directory: apps/reatom/dist\n run: cp index.html 404.html\n\n - name: SPA fallback for effector\n working-directory: apps/react-effector-fsd/dist\n run: cp index.html 404.html\n\n # === Prepare deploy folder ===\n\n - name: Prepare deployment folder\n run: |\n mkdir -p dist/tanstackquery\n mkdir -p dist/rtkquery\n mkdir -p dist/reatom\n mkdir -p dist/effector\n\n cp -r apps/tanstack-query-zustand/dist/* dist/tanstackquery/\n cp -r apps/rtk-query/dist/* dist/rtkquery/\n cp -r apps/reatom/dist/* dist/reatom/\n cp -r apps/react-effector-fsd/dist/* dist/effector/\n\n touch dist/.nojekyll\n\n # === Root pages ===\n\n - name: Copy root index.html\n run: cp public/index.html dist/index.html\n\n - name: Copy root 404.html\n run: cp public/404.html dist/404.html\n\n - name: Add CNAME\n run: echo 'stg.musicfun.dev' > dist/CNAME\n\n - uses: actions/upload-pages-artifact@v3\n with:\n path: dist\n\n - id: deployment\n uses: actions/deploy-pages@v4\n" }, { "path": ".gitignore", "content": "# Logs\nlogs\n*.log\nnpm-debug.log*\nyarn-debug.log*\nyarn-error.log*\npnpm-debug.log*\nlerna-debug.log*\n\nnode_modules\ndist\ndist-ssr\n*.local\n\n# Editor directories and files\n.vscode/*\n!.vscode/extensions.json\n.idea\n.cursor\n.DS_Store\n*.suo\n*.ntvs*\n*.njsproj\n*.sln\n*.sw?\n.cursorignore\n\n# env files\n.env.local\n.env.development.local\n.env.test.local\n.env.production.local\n" }, { "path": ".husky/pre-commit", "content": "# ─── Auto-increment VITE_VERSION for rtk-query ──────────────────────────────\n#\n# If any staged file inside apps/rtk-query/ changed (excluding .env itself),\n# bump VITE_VERSION in .env by 1 and stage the updated file.\n# ─────────────────────────────────────────────────────────────────────────────\n\nENV_FILE=\"apps/rtk-query/.env\"\n\nif git diff --cached --name-only -- 'apps/rtk-query/' | grep -qv '\\.env$'; then\n CURRENT=$(grep \"^VITE_VERSION=\" \"$ENV_FILE\" | cut -d'=' -f2)\n NEW=$((CURRENT + 1))\n sed -i '' \"s/^VITE_VERSION=.*/VITE_VERSION=$NEW/\" \"$ENV_FILE\"\n git add \"$ENV_FILE\"\n echo \"✔ Bumped rtk-query VITE_VERSION: $CURRENT → $NEW\"\nfi\n\npnpm exec lint-staged\n" }, { "path": ".husky/pre-push", "content": "#!/usr/bin/env sh\n\n# This script runs automatically before every \"git push\".\n# If any build fails, the push is cancelled — broken code won't reach the remote.\n\n# ─── Step 1: Figure out which files were changed ───────────────────────────────\n#\n# @{push} is a git shorthand for \"the branch on the remote that we're pushing to\".\n# \"git diff --name-only @{push}..\" compares the remote state with our local HEAD\n# and outputs just the file paths (one per line) that differ.\n#\n# 2>/dev/null suppresses errors — for example, if the branch has no remote tracking\n# branch yet (first push), this command would fail.\n#\n# If it fails, we fall back to \"git diff --name-only HEAD~1\" which compares\n# the latest commit with the one before it (so at least we check the last commit).\n# ───────────────────────────────────────────────────────────────────────────────\nCHANGED=$(git diff --name-only @{push}.. 2>/dev/null || git diff --name-only HEAD~1)\n\n# ─── Step 2: Initialize flags for each project ────────────────────────────────\n#\n# We use two boolean flags to track whether each project needs to be built.\n# They start as \"false\" and will be set to \"true\" if relevant files were changed.\n# ───────────────────────────────────────────────────────────────────────────────\nRTK=false\nTANSTACK=false\n\n# ─── Step 3: Check which projects have changed files ──────────────────────────\n#\n# We pipe the list of changed files into grep.\n# -q flag means \"quiet\" — grep won't print anything, it just sets the exit code:\n# exit 0 (success) if a match is found, exit 1 (failure) if not.\n#\n# \"^apps/rtk-query/\" means \"line starts with apps/rtk-query/\" — so any file\n# inside that folder will match.\n#\n# \"&&\" means \"if the previous command succeeded (match found), run the next command\".\n# So if any changed file is inside apps/rtk-query/, we set RTK=true.\n# Same logic for tanstack-query-zustand.\n# ───────────────────────────────────────────────────────────────────────────────\necho \"$CHANGED\" | grep -q \"^apps/rtk-query/\" && RTK=true\necho \"$CHANGED\" | grep -q \"^apps/tanstack-query-zustand/\" && TANSTACK=true\n\n# ─── Step 4: Type-check only the projects that were changed ───────────────────\n#\n# We run only \"tsc -b\" (TypeScript compiler in build mode) instead of a full\n# \"pnpm build\" (which would also run Vite bundling). tsc catches type errors,\n# missing imports, wrong props, etc. Vite build is redundant here — it doesn't\n# check types, just bundles JS. Full build is done in CI instead.\n#\n# \"|| exit 1\" means: if tsc fails (returns non-zero exit code),\n# immediately exit this script with code 1. A non-zero exit from a pre-push\n# hook tells git to ABORT the push. This prevents pushing broken code.\n# ───────────────────────────────────────────────────────────────────────────────\n\nif [ \"$RTK\" = true ]; then\n echo \"▶ Type-checking rtk-query...\"\n pnpm --prefix apps/rtk-query exec tsc -b || exit 1\nfi\n\nif [ \"$TANSTACK\" = true ]; then\n echo \"▶ Type-checking tanstack-query-zustand...\"\n pnpm --prefix apps/tanstack-query-zustand exec tsc -b || exit 1\nfi\n\n# If we reach this point, either:\n# - No projects had changes (nothing to check), or\n# - All type checks passed.\n# In both cases the script exits with code 0 (success) and git proceeds with the push.\n" }, { "path": ".prettierignore", "content": "node_modules\ndist\nbuild\n.next\n.nuxt\ncoverage\n*.log\npnpm-lock.yaml\n" }, { "path": ".prettierrc", "content": "{\n \"singleQuote\": true,\n \"tabWidth\": 2,\n \"trailingComma\": \"es5\",\n \"bracketSameLine\": true,\n \"arrowParens\": \"always\",\n \"endOfLine\": \"auto\",\n \"printWidth\": 100,\n \"semi\": false\n}\n" }, { "path": "CONTRIBUTING.md", "content": "> [!NOTE]\n> We prefer English language for all communication.\n\n## Creating an issue\n\nBefore creating an issue please ensure that the problem is not [already reported](https://github.com/it-incubator/musicfun-react-all-stacks/issues).\n\nIf you want to report a bug, create a reproduction using StackBlitz or CodeSandbox. If you want to request a feature, add motivation section and some usage examples.\n\n## Sending a Pull Request\n\n1. fork and clone the repository\n > [!NOTE]\n > You can just clone the repository if you are a collaborator\n2. create a development branch from `main`\n3. run the following command in the project root (this will install dependencies for all apps and packages)\n > [!NOTE]\n > It is recommended to create a branch from the issue\n4. [make changes](#coding-guide) and [commit them](#commit-messages)\n5. upload feature branch and create a [Pull Request](https://github.com/it-incubator/musicfun-react-all-stacks/compare) to merge changes to `main`\n6. link your PR to the issue using a [closing keyword](https://help.github.com/en/articles/closing-issues-using-keywords) or provide changes description with motivation and explanation in the comment (example: `fix #74`)\n7. wait until a team member responds\n\n## Coding guide\n\n\n\n- use `// @ts-ignore` if you not sure why error appears or you think it could be better, use `// @ts-expect-error` if you sure that error is a mistake \n\n## Commit messages\n\nCommit messages should follow the [Conventional Commits](https://conventionalcommits.org) specification:\n\n```\n[optional scope]: \n```\n\n### Allowed ``\n\n- `chore`: any repository maintainance changes\n- `feat`: code change that adds a new feature\n- `fix`: bug fix\n- `perf`: code change that improves performance\n- `refactor`: code change that is neither a feature addition nor a bug fix nor a performance improvement\n- `docs`: documentation only changes\n- `ci`: a change made to CI configurations and scripts\n- `style`: cosmetic code change\n- `test`: change that only adds or corrects tests\n- `revert`: change that reverts previous commits\n\n### Allowed ``\n\nPackage directory name. Eg: `/packages/effects` is scoped as `effects`.\n\n### `` rules\n\n- should be written in English\n- should be in imperative mood (like `change` instead `changed` or `changes`)\n- should not be capitalized\n- should not have period (`.`) at the end\n\n### Commit message examples\n\n```\ndocs: fix typo in npm-react\nfix(core): add check for atoms with equal ids\n```\n" }, { "path": "FRONTEND_API_CHANGES.md", "content": "# Frontend API Changes - January 27-29, 2026\n\nThis document summarizes the API changes from the last 5 commits that require frontend updates.\n\n---\n\n## Table of Contents\n\n1. [New Endpoints](#new-endpoints)\n2. [Response Format Changes](#response-format-changes)\n3. [Request Payload Changes (Breaking)](#request-payload-changes-breaking)\n\n---\n\n## New Endpoints\n\n### 1. Get Playlists Count\n\n**Endpoint:** `GET /playlists/count/:userId`\n\nReturns the total number of playlists for a specific user.\n\n**Response:**\n\n```json\n{\n \"count\": 5\n}\n```\n\n**TypeScript Interface:**\n\n```typescript\ninterface GetPlaylistsCountOutput {\n count: number\n}\n```\n\n---\n\n### 2. Get Tracks Count\n\n**Endpoint:** `GET /playlists/tracks/count/:userId`\n\nReturns the total number of **published** tracks for a specific user.\n\n**Response:**\n\n```json\n{\n \"count\": 12\n}\n```\n\n**TypeScript Interface:**\n\n```typescript\ninterface GetTracksCountOutput {\n count: number\n}\n```\n\n> **Note:** Only published tracks are counted. Draft/unpublished tracks are excluded.\n\n---\n\n## Response Format Changes\n\n### 1. Playlists List - `description` Field Removed\n\n**Endpoint:** `GET /playlists`\n\nThe `description` field has been **removed** from the playlist list response.\n\n**Before:**\n\n```json\n{\n \"data\": [\n {\n \"id\": \"...\",\n \"type\": \"playlists\",\n \"attributes\": {\n \"title\": \"My Playlist\",\n \"description\": \"Playlist description\", // ❌ REMOVED\n \"tracksCount\": 10,\n ...\n }\n }\n ]\n}\n```\n\n**After:**\n\n```json\n{\n \"data\": [\n {\n \"id\": \"...\",\n \"type\": \"playlists\",\n \"attributes\": {\n \"title\": \"My Playlist\",\n \"tracksCount\": 10,\n ...\n }\n }\n ]\n}\n```\n\n> **Note:** The `description` field is still available when fetching a **single playlist** via `GET /playlists/:playlistId`.\n\n---\n\n### 2. Playlists - New `tracksCount` Field\n\n**Endpoints:**\n\n- `GET /playlists` (list)\n- `GET /playlists/:playlistId` (single)\n\nA new `tracksCount` field has been added to playlist responses.\n\n**Response:**\n\n```json\n{\n \"data\": {\n \"id\": \"...\",\n \"type\": \"playlists\",\n \"attributes\": {\n \"title\": \"My Playlist\",\n \"tracksCount\": 10, // ✅ NEW FIELD\n ...\n }\n }\n}\n```\n\n**TypeScript Update:**\n\n```typescript\ninterface PlaylistAttributes {\n // ... existing fields\n tracksCount: number // NEW\n}\n```\n\n---\n\n### 3. Tags - JSON:API Format\n\n**Endpoints:**\n\n- `POST /tags` (create)\n- `GET /tags/search` (search)\n\nTags endpoints now return JSON:API formatted responses.\n\n**Before (Create):**\n\n```json\n{\n \"id\": \"uuid\",\n \"name\": \"Rock\"\n}\n```\n\n**After (Create):**\n\n```json\n{\n \"data\": {\n \"id\": \"uuid\",\n \"type\": \"tags\",\n \"attributes\": {\n \"name\": \"Rock\"\n }\n }\n}\n```\n\n**Before (Search):**\n\n```json\n[\n { \"id\": \"uuid1\", \"name\": \"Rock\" },\n { \"id\": \"uuid2\", \"name\": \"Pop\" }\n]\n```\n\n**After (Search):**\n\n```json\n{\n \"data\": [\n {\n \"id\": \"uuid1\",\n \"type\": \"tags\",\n \"attributes\": { \"name\": \"Rock\" }\n },\n {\n \"id\": \"uuid2\",\n \"type\": \"tags\",\n \"attributes\": { \"name\": \"Pop\" }\n }\n ]\n}\n```\n\n**TypeScript Interfaces:**\n\n```typescript\ninterface TagAttributes {\n name: string\n}\n\ninterface TagResource {\n id: string\n type: 'tags'\n attributes: TagAttributes\n}\n\ninterface GetTagOutput {\n data: TagResource\n}\n\ninterface GetTagsOutput {\n data: TagResource[]\n}\n```\n\n---\n\n## Request Payload Changes (Breaking)\n\nAll create/update endpoints now use **JSON:API format** for request bodies.\n\n### 1. Create Tag\n\n**Endpoint:** `POST /tags`\n\n**Before:**\n\n```json\n{\n \"name\": \"Rock\"\n}\n```\n\n**After:**\n\n```json\n{\n \"data\": {\n \"type\": \"tags\",\n \"attributes\": {\n \"name\": \"Rock\"\n }\n }\n}\n```\n\n---\n\n### 2. Create Artist\n\n**Endpoint:** `POST /artists`\n\n**Before:**\n\n```json\n{\n \"name\": \"Artist Name\"\n}\n```\n\n**After:**\n\n```json\n{\n \"data\": {\n \"type\": \"artists\",\n \"attributes\": {\n \"name\": \"Artist Name\"\n }\n }\n}\n```\n\n---\n\n### 3. Create Playlist\n\n**Endpoint:** `POST /playlists`\n\n**Before:**\n\n```json\n{\n \"title\": \"My Playlist\",\n \"description\": \"Description\"\n}\n```\n\n**After:**\n\n```json\n{\n \"data\": {\n \"type\": \"playlists\",\n \"attributes\": {\n \"title\": \"My Playlist\",\n \"description\": \"Description\"\n }\n }\n}\n```\n\n---\n\n### 4. Update Playlist\n\n**Endpoint:** `PUT /playlists/:id`\n\n**Before:**\n\n```json\n{\n \"title\": \"Updated Title\",\n \"description\": \"Updated description\"\n}\n```\n\n**After:**\n\n```json\n{\n \"data\": {\n \"type\": \"playlists\",\n \"attributes\": {\n \"title\": \"Updated Title\",\n \"description\": \"Updated description\"\n }\n }\n}\n```\n\n---\n\n### 5. Upload Track\n\n**Endpoint:** `POST /tracks` (multipart/form-data)\n\n**Before:**\n\n```\ntitle: \"Track Title\"\nartists: [\"artist-id-1\", \"artist-id-2\"]\ntags: [\"tag-id-1\"]\n```\n\n**After:**\n\n```\ndata[type]: \"tracks\"\ndata[attributes][title]: \"Track Title\"\ndata[attributes][artists]: [\"artist-id-1\", \"artist-id-2\"]\ndata[attributes][tags]: [\"tag-id-1\"]\n```\n\n---\n\n### 6. Update Track\n\n**Endpoint:** `PATCH /tracks/:id`\n\n**Before:**\n\n```json\n{\n \"title\": \"Updated Title\",\n \"artists\": [\"artist-id\"],\n \"tags\": [\"tag-id\"]\n}\n```\n\n**After:**\n\n```json\n{\n \"data\": {\n \"type\": \"tracks\",\n \"attributes\": {\n \"title\": \"Updated Title\",\n \"artists\": [\"artist-id\"],\n \"tags\": [\"tag-id\"]\n }\n }\n}\n```\n\n---\n\n### 7. Add Track to Playlist\n\n**Endpoint:** `POST /playlists/:id/tracks`\n\n**Before:**\n\n```json\n{\n \"trackId\": \"track-uuid\"\n}\n```\n\n**After:**\n\n```json\n{\n \"data\": {\n \"type\": \"playlist-tracks\",\n \"attributes\": {\n \"trackId\": \"track-uuid\"\n }\n }\n}\n```\n\n---\n\n## Summary of Breaking Changes\n\n| Category | Change | Impact |\n| --------------- | --------------------------------------------------- | --------------------------------------------------- |\n| Request Format | All create/update payloads now use JSON:API wrapper | **HIGH** - All POST/PUT/PATCH requests need updates |\n| Response Format | Tags endpoints now return JSON:API format | **MEDIUM** - Update tag parsing logic |\n| Response Format | Playlist list no longer includes `description` | **LOW** - Remove usage or fetch single playlist |\n| New Field | `tracksCount` added to playlist responses | **LOW** - Can be used for UI display |\n| New Endpoints | `/playlists/count/:userId` | **NONE** - New feature |\n| New Endpoints | `/playlists/tracks/count/:userId` | **NONE** - New feature |\n\n---\n\n## Migration Checklist\n\n- [ ] Update all API request payloads to JSON:API format\n- [ ] Update tag response parsing (access via `response.data` / `response.data.attributes`)\n- [ ] Remove reliance on `description` field in playlist lists\n- [ ] Add `tracksCount` to playlist TypeScript interfaces\n- [ ] (Optional) Implement new count endpoints for user statistics\n\n---\n\n## TypeScript Helper Types\n\n```typescript\n// Generic JSON:API Request Wrapper\ninterface JsonApiRequest {\n data: {\n type: T\n attributes: A\n }\n}\n\n// Example usage:\ntype CreateTagRequest = JsonApiRequest<'tags', { name: string }>\ntype CreatePlaylistRequest = JsonApiRequest<\n 'playlists',\n {\n title: string\n description: string | null\n }\n>\ntype CreateArtistRequest = JsonApiRequest<'artists', { name: string }>\ntype UpdateTrackRequest = JsonApiRequest<\n 'tracks',\n {\n title?: string\n artists?: string[]\n tags?: string[]\n }\n>\n```\n" }, { "path": "README.md", "content": "[Figma](https://www.figma.com/design/AxTPd4AS8oAgdEF4dDgLis/MusicFun?node-id=9-353&p=f&t=I0svXbRE8kPWOUFB-0) • [ApiHub](https://apihub.it-incubator.io/en) • [Swagger](https://musicfun.it-incubator.app/api)\n\n# 🚀 Project Launch\n\nInformation on launching projects can be found in the `README.md` of each individual repository.\n\n## Actual projects\n\n- `youtube/rtk-query` - youtube lessons: rtk-query\n\n- `youtube/tanstack-query-router-fsd` - youtube lessons: tanstack-query\n\n- `apps/musicfun-ui-vanilla` - full project html/css/storybook vanilla without ui libraries\n\n- `apps/musicfun-tanstack-query` - full project with tanstack query\n\n- `apps/musicfun-rtk-query` - full project with rtk-query\n\n## ❌ Project Launch with SDK (Currently Unsupported)\n\n### 1. Installing Dependencies\n\nRun the following command in the project root (this will install dependencies for all apps and packages):\n\n```bash\npnpm i\n```\n\n### 2. SDK build\n\nThen build `musicfun-api-sdk`\n\n```bash\npnpm build:sdk\n```\n\n️⚠️ Note: Some scripts may not be cross-platform compatible:\n\n```json\n\"scripts\": {\n\"clean\": \"rm -rf dist\",\n\"build\": \"pnpm run clean && tsc\"\n}\n```\n\nIf so, try a simpler alternative command:\n\n```bash\npnpm build:sdk:simple\n```\n\n### 3. Starting the Project\n\n- 🎶musicfun на **tanstack**\n\n```bash\n pnpm start:musicfun-tanstack\n```\n\n- 🎶musicfun на **rtk-query**\n\n```bash\n pnpm start:musicfun-rtk\n```\n\n- 🎶musicfun на **nextjs**\n\n```bash\n pnpm start:musicfun-nextjs\n```\n\n## ✅ Рекомендованные форматы нейминга файлов в React/TypeScript проектах\n\n| Category | Recommended Format | Example |\n| --------------------- | ------------------ | ------------------------------------- |\n| **Components** | `PascalCase` | `UserCard.tsx` |\n| **Hooks** | `camelCase` | `useAuth.ts` |\n| **Utilities (utils)** | `kebab-case` | `format-date.ts`, `validate-email.ts` |\n| **Redux Slice/State** | `kebab-case` | `auth-slice.ts`, `user-slice.ts` |\n| **API files** | `kebab-case` | `playlists-api.ts`, `auth-api.ts` |\n| **Types/Interfaces** | `kebab-case` | `user.types.ts`, `auth.types.ts` |\n| **Services** | `kebab-case` | `auth-service.ts`, `user-service.ts` |\n| **Mocks (mock data)** | `kebab-case` | `user-mocks.ts`, `playlist-mocks.ts` |\n\n## Contributing\n\nPlease refer to our [Contributing guide](CONTRIBUTING.md) to learn about our development process, how to propose bugfixes\n\n### Happy hacking 🚀 🚀🚀\n" }, { "path": "apps/nextjs/.gitignore", "content": "# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.\n\n# dependencies\n/node_modules\n/.pnp\n.pnp.*\n.yarn/*\n!.yarn/patches\n!.yarn/plugins\n!.yarn/releases\n!.yarn/versions\n\n# testing\n/coverage\n\n# next.js\n/.next/\n/out/\n\n# production\n/build\n\n# misc\n.DS_Store\n*.pem\n\n# debug\nnpm-debug.log*\nyarn-debug.log*\nyarn-error.log*\n.pnpm-debug.log*\n\n# env files (can opt-in for committing if needed)\n.env*.local\n\n# vercel\n.vercel\n\n# typescript\n*.tsbuildinfo\nnext-env.d.ts\n" }, { "path": "apps/nextjs/README.md", "content": "This is a [Next.js](https://nextjs.org) project bootstrapped with [`create-next-app`](https://nextjs.org/docs/app/api-reference/cli/create-next-app).\n\n## Getting Started\n\nFirst, run the development server:\n\n```bash\nnpm run dev\n# or\nyarn dev\n# or\npnpm dev\n# or\nbun dev\n```\n\nOpen [http://localhost:3000](http://localhost:3000) with your browser to see the result.\n\nYou can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.\n\nThis project uses [`next/font`](https://nextjs.org/docs/app/building-your-application/optimizing/fonts) to automatically optimize and load [Geist](https://vercel.com/font), a new font family for Vercel.\n\n## Learn More\n\nTo learn more about Next.js, take a look at the following resources:\n\n- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.\n- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.\n\nYou can check out [the Next.js GitHub repository](https://github.com/vercel/next.js) - your feedback and contributions are welcome!\n\n## Deploy on Vercel\n\nThe easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.\n\nCheck out our [Next.js deployment documentation](https://nextjs.org/docs/app/building-your-application/deploying) for more details.\n" }, { "path": "apps/nextjs/eslint.config.mjs", "content": "import { FlatCompat } from '@eslint/eslintrc'\nimport { dirname } from 'path'\nimport { fileURLToPath } from 'url'\n\nconst __filename = fileURLToPath(import.meta.url)\nconst __dirname = dirname(__filename)\n\nconst compat = new FlatCompat({\n baseDirectory: __dirname,\n})\n\nconst eslintConfig = [...compat.extends('next/core-web-vitals', 'next/typescript')]\n\nexport default eslintConfig\n" }, { "path": "apps/nextjs/next.config.ts", "content": "import type { NextConfig } from 'next'\n\nconst nextConfig: NextConfig = {\n /* config options here */\n}\n\nexport default nextConfig\n" }, { "path": "apps/nextjs/package.json", "content": "{\n \"name\": \"musicfun-nextjs\",\n \"version\": \"0.1.0\",\n \"private\": true,\n \"scripts\": {\n \"dev\": \"NODE_OPTIONS='--inspect' next dev\",\n \"build\": \"next build\",\n \"start\": \"next start\",\n \"lint\": \"next lint\"\n },\n \"dependencies\": {\n \"react\": \"^19.0.0\",\n \"react-dom\": \"^19.0.0\",\n \"next\": \"15.3.3\",\n \"@it-incubator/musicfun-api-sdk\": \"workspace:*\"\n },\n \"devDependencies\": {\n \"typescript\": \"^5\",\n \"@types/node\": \"^20\",\n \"@types/react\": \"^19\",\n \"@types/react-dom\": \"^19\"\n }\n}\n" }, { "path": "apps/nextjs/src/app/actions/auth/logout.action.tsx", "content": "'use server'\nimport { cookies } from 'next/headers'\n\nexport async function logout() {\n const cookieStore = await cookies()\n // удаляем куки, задав maxAge: 0\n cookieStore.set('access-token', '', { httpOnly: true, maxAge: 0, path: '/' })\n cookieStore.set('refresh-token', '', { httpOnly: true, maxAge: 0, path: '/' })\n}\n" }, { "path": "apps/nextjs/src/app/api/oauth/callback/route.ts", "content": "import { cookies } from 'next/headers'\nimport { NextResponse } from 'next/server'\n\nimport { authApi } from '@/shared/api/auth-api'\nimport { redirectAfterOauthUri } from '@/shared/api/base'\nimport { createAccessTokenCookie, createRefreshTokenCookie } from '@/shared/utils/cookieHelpers'\n\nexport async function GET(request: Request) {\n const { searchParams } = new URL(request.url)\n const code = searchParams.get('code') as string\n\n const tokens = await authApi.login({\n code,\n redirectUri: redirectAfterOauthUri,\n accessTokenTTL: '1d',\n rememberMe: true,\n })\n\n const cookieStore = await cookies()\n\n cookieStore.set(createRefreshTokenCookie(tokens.refreshToken))\n cookieStore.set(createAccessTokenCookie(tokens.accessToken))\n\n return NextResponse.redirect(new URL('/', request.url), 307)\n}\n" }, { "path": "apps/nextjs/src/app/globals.css", "content": ":root {\n --background: #ffffff;\n --foreground: #171717;\n}\n\n@media (prefers-color-scheme: dark) {\n :root {\n --background: #0a0a0a;\n --foreground: #ededed;\n }\n}\n\nhtml,\nbody {\n max-width: 100vw;\n overflow-x: hidden;\n}\n\nbody {\n color: var(--foreground);\n background: var(--background);\n font-family: Arial, Helvetica, sans-serif;\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n}\n\n* {\n box-sizing: border-box;\n padding: 0;\n margin: 0;\n}\n\na {\n color: inherit;\n text-decoration: none;\n}\n\n@media (prefers-color-scheme: dark) {\n html {\n color-scheme: dark;\n }\n}\n" }, { "path": "apps/nextjs/src/app/layout.tsx", "content": "import './globals.css'\n\nimport type { Metadata } from 'next'\nimport { Geist, Geist_Mono } from 'next/font/google'\n\nconst geistSans = Geist({\n variable: '--font-geist-sans',\n subsets: ['latin'],\n})\n\nconst geistMono = Geist_Mono({\n variable: '--font-geist-mono',\n subsets: ['latin'],\n})\n\nexport const metadata: Metadata = {\n title: 'Create Next App',\n description: 'Generated by create next app',\n}\n\nexport default function RootLayout({\n children,\n}: Readonly<{\n children: React.ReactNode\n}>) {\n return (\n \n {children}\n \n )\n}\n" }, { "path": "apps/nextjs/src/app/page.module.css", "content": ".page {\n --gray-rgb: 0, 0, 0;\n --gray-alpha-200: rgba(var(--gray-rgb), 0.08);\n --gray-alpha-100: rgba(var(--gray-rgb), 0.05);\n\n --button-primary-hover: #383838;\n --button-secondary-hover: #f2f2f2;\n\n display: grid;\n grid-template-rows: 20px 1fr 20px;\n align-items: center;\n justify-items: center;\n min-height: 100svh;\n padding: 80px;\n gap: 64px;\n font-family: var(--font-geist-sans);\n}\n\n@media (prefers-color-scheme: dark) {\n .page {\n --gray-rgb: 255, 255, 255;\n --gray-alpha-200: rgba(var(--gray-rgb), 0.145);\n --gray-alpha-100: rgba(var(--gray-rgb), 0.06);\n\n --button-primary-hover: #ccc;\n --button-secondary-hover: #1a1a1a;\n }\n}\n\n.main {\n display: flex;\n flex-direction: column;\n gap: 32px;\n grid-row-start: 2;\n}\n\n.main ol {\n font-family: var(--font-geist-mono);\n padding-left: 0;\n margin: 0;\n font-size: 14px;\n line-height: 24px;\n letter-spacing: -0.01em;\n list-style-position: inside;\n}\n\n.main li:not(:last-of-type) {\n margin-bottom: 8px;\n}\n\n.main code {\n font-family: inherit;\n background: var(--gray-alpha-100);\n padding: 2px 4px;\n border-radius: 4px;\n font-weight: 600;\n}\n\n.ctas {\n display: flex;\n gap: 16px;\n}\n\n.ctas a {\n appearance: none;\n border-radius: 128px;\n height: 48px;\n padding: 0 20px;\n border: none;\n border: 1px solid transparent;\n transition:\n background 0.2s,\n color 0.2s,\n border-color 0.2s;\n cursor: pointer;\n display: flex;\n align-items: center;\n justify-content: center;\n font-size: 16px;\n line-height: 20px;\n font-weight: 500;\n}\n\na.primary {\n background: var(--foreground);\n color: var(--background);\n gap: 8px;\n}\n\na.secondary {\n border-color: var(--gray-alpha-200);\n min-width: 158px;\n}\n\n.footer {\n grid-row-start: 3;\n display: flex;\n gap: 24px;\n}\n\n.footer a {\n display: flex;\n align-items: center;\n gap: 8px;\n}\n\n.footer img {\n flex-shrink: 0;\n}\n\n/* Enable hover only on non-touch devices */\n@media (hover: hover) and (pointer: fine) {\n a.primary:hover {\n background: var(--button-primary-hover);\n border-color: transparent;\n }\n\n a.secondary:hover {\n background: var(--button-secondary-hover);\n border-color: transparent;\n }\n\n .footer a:hover {\n text-decoration: underline;\n text-underline-offset: 4px;\n }\n}\n\n@media (max-width: 600px) {\n .page {\n padding: 32px;\n padding-bottom: 80px;\n }\n\n .main {\n align-items: center;\n }\n\n .main ol {\n text-align: center;\n }\n\n .ctas {\n flex-direction: column;\n }\n\n .ctas a {\n font-size: 14px;\n height: 40px;\n padding: 0 16px;\n }\n\n a.secondary {\n min-width: auto;\n }\n\n .footer {\n flex-wrap: wrap;\n align-items: center;\n justify-content: center;\n }\n}\n\n@media (prefers-color-scheme: dark) {\n .logo {\n filter: invert();\n }\n}\n" }, { "path": "apps/nextjs/src/app/page.tsx", "content": "import { UserBlock } from '@/features/auth/ui/UserBlock'\nimport { tracksApi } from '@/shared/api/tracks/tracksApi'\n\nimport styles from './page.module.css'\n\nexport default async function Home() {\n const tracks = await tracksApi.fetchTracks({ pageNumber: 1, pageSize: 5 })\n\n return (\n
\n
\n \n
\n

Tracks:

\n {tracks.data.map((track) => (\n
  • {track.attributes.title}
    • \n ))}\n
    \n )\n}\n" }, { "path": "apps/nextjs/src/app/profile/page.tsx", "content": "import { cookies } from 'next/headers'\n\nimport { authApi } from '@/shared/api/auth-api'\nimport { MeResponseResponse } from '@/shared/api/authApi.types'\nimport { redirectAfterOauthUri } from '@/shared/api/base'\n\nexport default async function ProfilePage() {\n let meData: MeResponseResponse | null = null\n try {\n meData = await authApi.getMe()\n } catch (error) {}\n\n return meData ? (\n
    \n login: {meData.login}, userId: {meData.userId}\n
    \n ) : (\n
    Login
    \n )\n}\n" }, { "path": "apps/nextjs/src/app/redirect/page.tsx", "content": "import { cookies } from 'next/headers'\nimport { redirect } from 'next/navigation'\n\nimport { authApi } from '@/shared/api/auth-api'\nimport { MeResponseResponse } from '@/shared/api/authApi.types'\nimport { redirectAfterOauthUri } from '@/shared/api/base'\n\nexport default async function ProfilePage() {\n let meData: MeResponseResponse | null = null\n try {\n meData = await authApi.getMe()\n } catch (error) {}\n\n if (meData) {\n redirect('/profile')\n } else {\n redirect('/')\n }\n}\n" }, { "path": "apps/nextjs/src/features/auth/ui/Login/Login.tsx", "content": "import { authApi } from '@/shared/api/auth-api'\nimport { redirectAfterOauthUri } from '@/shared/api/base'\n\nexport const Login = () => {\n return Login via APIHUB\n}\n" }, { "path": "apps/nextjs/src/features/auth/ui/Logout/Logout.tsx", "content": "'use client'\nimport { useRouter } from 'next/navigation'\n\nimport { logout } from '@/app/actions/auth/logout.action'\n\nexport const Logout = () => {\n const router = useRouter()\n const logoutHandler = async () => {\n await logout()\n router.push('/')\n }\n\n return \n}\n" }, { "path": "apps/nextjs/src/features/auth/ui/MeInfo/MeInfo.tsx", "content": "import { Logout } from '@/features/auth/ui/Logout/Logout'\nimport { authApi } from '@/shared/api/auth-api'\n\nexport const MeInfo = async () => {\n const meData = await authApi.getMe()\n\n return (\n
    \n userLogin: {meData.login}\n \n
    \n )\n}\n" }, { "path": "apps/nextjs/src/features/auth/ui/UserBlock.tsx", "content": "import { Login } from '@/features/auth/ui/Login/Login'\nimport { MeInfo } from '@/features/auth/ui/MeInfo/MeInfo'\nimport { authApi } from '@/shared/api/auth-api'\nimport { MeResponseResponse } from '@/shared/api/authApi.types'\n\nexport const UserBlock = async () => {\n let meData: MeResponseResponse | null = null\n try {\n meData = await authApi.getMe()\n } catch (error) {}\n\n return (\n <>\n {!meData && }\n {meData && }\n \n )\n}\n" }, { "path": "apps/nextjs/src/middleware.ts", "content": "import { NextRequest, NextResponse } from 'next/server'\n\nimport { reauthMiddleware } from '@/reauth-middleware'\n\nexport async function middleware(request: NextRequest) {\n const url = request.nextUrl\n console.log('Middleware')\n const response = reauthMiddleware(request)\n if (response) return response\n\n return NextResponse.next()\n}\n\nexport const config = {\n matcher: ['/', '/profile', '/api/:path*'], // или любой другой набор путей\n}\n" }, { "path": "apps/nextjs/src/reauth-middleware.ts", "content": "import { NextRequest, NextResponse } from 'next/server'\n\nimport { authApi } from '@/shared/api/auth-api'\nimport { createAccessTokenCookie, createRefreshTokenCookie } from '@/shared/utils/cookieHelpers'\nimport { getJwtExpirationMaxAge, getSecondsToExpiration } from '@/shared/utils/jwt-util'\n\nconst refreshTokens = async (refreshToken: string) => {\n try {\n const { accessToken, refreshToken: newRefreshToken } = await authApi.refreshToken({\n refreshToken,\n })\n return { accessToken, refreshToken: newRefreshToken }\n } catch {\n return null\n }\n}\n\nexport async function reauthMiddleware(request: NextRequest) {\n const accessCookie = request.cookies.get('access-token')\n const refreshCookie = request.cookies.get('refresh-token')\n let tokens: { accessToken: string; refreshToken: string } | null = null\n\n if (accessCookie) {\n const secondsToExpiration = getSecondsToExpiration(accessCookie.value)\n if (secondsToExpiration < 20 && refreshCookie) {\n tokens = await refreshTokens(refreshCookie.value)\n }\n } else if (refreshCookie) {\n tokens = await refreshTokens(refreshCookie.value)\n }\n\n const requestHeaders = new Headers(request.headers)\n if (tokens) {\n requestHeaders.set('Authorization', 'Bearer ' + tokens.accessToken)\n }\n\n const response = NextResponse.next({\n request: { headers: requestHeaders },\n })\n\n if (tokens) {\n response.cookies.set(createAccessTokenCookie(tokens.accessToken))\n response.cookies.set(createRefreshTokenCookie(tokens.accessToken))\n }\n\n return response\n}\n" }, { "path": "apps/nextjs/src/shared/api/auth-api.ts", "content": "import { cookies } from 'next/headers'\n\nimport { baseUrl, jsonHeaders } from '@/shared/api/base'\n\nimport type {\n AuthTokensResponse,\n MeResponseResponse,\n OAuthLoginArgs,\n RefreshTokensArgs,\n} from './authApi.types'\n\n/**\n * Обёртка над fetch, которая проверяет response.ok\n */\nasync function checkResponse(response: Response): Promise {\n if (!response.ok) {\n const errorBody = await response.text()\n throw new Error(`Request failed with status ${response.status}: ${errorBody}`)\n }\n return (await response.json()) as T\n}\n\nexport const authApi = {\n // 1) Login → POST /auth/login\n async login(payload: OAuthLoginArgs): Promise {\n const response = await fetch(`${baseUrl}/auth/login`, {\n method: 'POST',\n headers: jsonHeaders,\n body: JSON.stringify(payload),\n })\n return checkResponse(response)\n },\n\n // 2) Logout → POST /auth/logout\n async logout(payload: RefreshTokensArgs): Promise {\n const response = await fetch(`${baseUrl}/auth/logout`, {\n method: 'POST',\n headers: jsonHeaders,\n body: JSON.stringify(payload),\n })\n // не ожидаем JSON в ответе\n if (!response.ok) {\n const errorBody = await response.text()\n throw new Error(`Logout failed with status ${response.status}: ${errorBody}`)\n }\n },\n\n // 3) Получить URL для OAuth-редиректа (без сетевого запроса)\n oauthUrl(redirectUrl: string): string {\n // Здесь предполагается, что authEndpoint — это что-то вроде '/api/auth'\n\n return `${baseUrl}/auth/oauth-redirect?callbackUrl=${encodeURIComponent(redirectUrl)}`\n },\n\n // 4) Refresh token → POST /auth/refresh\n async refreshToken(payload: RefreshTokensArgs): Promise {\n const response = await fetch(`${baseUrl}/auth/refresh`, {\n method: 'POST',\n headers: jsonHeaders,\n body: JSON.stringify(payload),\n })\n return checkResponse(response)\n },\n\n // 5) Get current user → GET /auth/me\n async getMe(): Promise {\n const cookieStore = await cookies()\n const token = cookieStore.get('access-token')?.value\n\n const response = await fetch(`${baseUrl}/auth/me`, {\n method: 'GET',\n headers: {\n ...jsonHeaders,\n Authorization: 'Bearer ' + token,\n },\n // Если нужен авторизационный заголовок — добавьте сюда:\n // headers: {\n // Authorization: `Bearer ${localStorage.getItem(\"accessToken\")}`,\n // },\n })\n return checkResponse(response)\n },\n}\n" }, { "path": "apps/nextjs/src/shared/api/authApi.types.ts", "content": "export type MeResponseResponse = {\n userId: string\n login: string\n}\n\nexport type AuthTokensResponse = {\n refreshToken: string\n accessToken: string\n}\n\nexport type RefreshTokensArgs = {\n refreshToken: string\n}\n\nexport type OAuthLoginArgs = {\n code: string\n redirectUri: string\n accessTokenTTL: string // e.g. \"3m\"\n rememberMe: boolean\n}\n\nexport const localStorageKeys = {\n refreshToken: 'musicfun-refresh-token',\n accessToken: 'musicfun-access-token',\n}\n" }, { "path": "apps/nextjs/src/shared/api/base.ts", "content": "export const baseUrl = process.env.BASE_URL!\nexport const apiKey = process.env.API_KEY!\n\nexport const jsonHeaders = {\n 'Content-Type': 'application/json',\n 'api-Key': apiKey,\n Origin: 'http://localhost:3000',\n}\n\nexport const formHeaders = {\n 'api-Key': apiKey,\n}\n\nexport const redirectAfterOauthUri = 'http://localhost:3000/api/oauth/callback'\n" }, { "path": "apps/nextjs/src/shared/api/tracks/tracksApi.ts", "content": "import { baseUrl, formHeaders, jsonHeaders } from '@/shared/api/base'\nimport { Nullable } from '@/shared/common.types'\n\nimport type {\n FetchPlaylistsTracksResponse,\n FetchTracksArgs,\n FetchTracksResponse,\n ReactionResponse,\n TrackDetailAttributes,\n TrackDetails,\n UpdateTrackArgs,\n} from './tracksApi.types.ts'\n\nexport const tracksApi = {\n async fetchTracks({ pageSize = 3, pageNumber, search = '' }: FetchTracksArgs) {\n const url = new URL(`${baseUrl}/playlists/tracks`)\n url.searchParams.set('pageSize', pageSize.toString())\n url.searchParams.set('pageNumber', pageNumber.toString())\n url.searchParams.set('search', search)\n\n const res = await fetch(url.toString(), { headers: jsonHeaders })\n return res.json() as Promise\n },\n\n async fetchTracksInPlaylist({ playlistId }: { playlistId: string }) {\n const url = `${baseUrl}/playlists/${playlistId}/tracks`\n const res = await fetch(url, { headers: jsonHeaders })\n return res.json() as Promise\n },\n\n async fetchTrackById(trackId: string) {\n const url = `${baseUrl}/playlists/tracks/${trackId}`\n const res = await fetch(url, { headers: jsonHeaders })\n return res.json() as Promise<{ data: TrackDetails }>\n },\n\n async createTrack({ title, file }: { title: string; file: File }) {\n const formData = new FormData()\n formData.append('title', title)\n formData.append('file', file)\n\n const url = `${baseUrl}/playlists/tracks/upload`\n const res = await fetch(url, {\n method: 'POST',\n headers: formHeaders,\n body: formData,\n })\n return res.json() as Promise<{ data: TrackDetails }>\n },\n\n async removeTrack(trackId: string) {\n const url = `${baseUrl}/playlists/tracks/${trackId}`\n await fetch(url, { method: 'DELETE', headers: jsonHeaders })\n },\n\n // async uploadTrackCover({ trackId, file }: { trackId: string; file: File }) {\n // const formData = new FormData()\n // formData.append('cover', file)\n //\n // const url = `${baseUrl}/playlists/tracks/${trackId}/cover`\n // const res = await fetch(url, {\n // method: 'POST',\n // headers: formHeaders,\n // body: formData,\n // })\n // return res.json() as Promise\n // },\n\n async updateTrack({ trackId, payload }: { trackId: string; payload: UpdateTrackArgs }) {\n const url = `${baseUrl}/playlists/tracks/${trackId}`\n const res = await fetch(url, {\n method: 'PUT',\n headers: jsonHeaders,\n body: JSON.stringify(payload),\n })\n return res.json() as Promise<{ data: TrackDetails }>\n },\n\n async addTrackToPlaylist({ playlistId, trackId }: { playlistId: string; trackId: string }) {\n const url = `${baseUrl}/playlists/${playlistId}/relationships/tracks`\n await fetch(url, {\n method: 'POST',\n headers: jsonHeaders,\n body: JSON.stringify({ trackId }),\n })\n },\n\n async removeTrackFromPlaylist({ playlistId, trackId }: { playlistId: string; trackId: string }) {\n const url = `${baseUrl}/playlists/${playlistId}/relationships/tracks/${trackId}`\n await fetch(url, { method: 'DELETE', headers: jsonHeaders })\n },\n\n async reorderTracks({\n trackId,\n playlistId,\n putAfterItemId,\n }: {\n trackId: string\n playlistId: string\n putAfterItemId: Nullable\n }) {\n const url = `${baseUrl}/playlists/${playlistId}/tracks/${trackId}/reorder`\n await fetch(url, {\n method: 'PUT',\n headers: jsonHeaders,\n body: JSON.stringify({ putAfterItemId }),\n })\n },\n\n async like(trackId: string) {\n const url = `${baseUrl}/playlists/tracks/${trackId}/like`\n const res = await fetch(url, {\n method: 'POST',\n headers: jsonHeaders,\n body: JSON.stringify({}),\n })\n return res.json() as Promise\n },\n\n async dislike(trackId: string) {\n const url = `${baseUrl}/playlists/tracks/${trackId}/dislike`\n const res = await fetch(url, {\n method: 'POST',\n headers: jsonHeaders,\n body: JSON.stringify({}),\n })\n return res.json() as Promise\n },\n}\n" }, { "path": "apps/nextjs/src/shared/api/tracks/tracksApi.types.ts", "content": "import { Meta, Nullable } from '../../common/types/common.types'\nimport { CurrentUserReaction } from '../../common/types/enums'\nimport { Images, User } from '../../common/types/playlists-tracks.types'\nimport { Artist } from '../artists/artistsApi.types'\nimport { Tag } from '../tags/tagsApi.types'\n\nexport type TrackDetails = {\n id: string\n type: 'tracks'\n attributes: T\n}\n\n// Attributes\nexport type BaseAttributes = {\n title: string\n addedAt: string\n attachments: TrackAttachment[]\n images: Images\n}\n\nexport type FetchTracksAttributes = BaseAttributes & {\n user: User\n}\n\nexport type TrackDetailAttributes = BaseAttributes & {\n lyrics: Nullable\n releaseDate: Nullable\n updatedAt: string\n duration: number\n processingStatus: TrackProcessingStatus\n visibility: TrackVisibility\n tags: Tag[]\n artists: Artist[]\n // likes\n currentUserReaction: CurrentUserReaction\n dislikesCount: number\n likesCount: number\n}\n\nexport type PlaylistItemAttributes = BaseAttributes & {\n updatedAt: string\n order: number\n}\n\n// Attachment\nexport type TrackAttachment = {\n id: string\n addedAt: string\n updatedAt: string\n version: number\n url: string\n contentType: string\n originalName: string\n originalKey: string\n fileSize: number\n}\n\n// Response\nexport type FetchTracksResponse = {\n data: TrackDetails[]\n meta: Meta\n}\n\nexport type FetchPlaylistsTracksResponse = {\n data: TrackDetails[]\n meta: Meta\n}\n\nexport type ReactionResponse = {\n objectId: string\n value: number\n likes: number\n dislikes: number\n}\n\n// Arguments\nexport type FetchTracksArgs = {\n pageSize?: number\n pageNumber: number\n search?: string\n}\n\nexport type UpdateTrackArgs = {\n title?: string\n lyrics?: string\n visibility?: TrackVisibility\n releaseDate?: string\n tagIds?: string[]\n artistsIds?: string[]\n}\n\n// Literal types\ntype TrackVisibility = 'private' | 'public'\n\ntype TrackProcessingStatus = 'uploaded' | 'converting' | 'ready'\n" }, { "path": "apps/nextjs/src/shared/common.types.ts", "content": "export type Nullable = T | null\n" }, { "path": "apps/nextjs/src/shared/utils/cookieHelpers.ts", "content": "// src/shared/utils/cookieHelpers.ts\n\nimport { getJwtExpirationMaxAge } from '@/shared/utils/jwt-util'\n\nexport interface CookieDef {\n name: string\n value: string\n httpOnly: boolean\n maxAge: number\n path: string\n}\n\n/**\n * Возвращает определение cookie для access-token\n */\nexport function createAccessTokenCookie(token: string): CookieDef {\n return {\n name: 'access-token',\n value: token,\n httpOnly: true,\n maxAge: getJwtExpirationMaxAge(token),\n path: '/',\n }\n}\n\n/**\n * Возвращает определение cookie для refresh-token\n */\nexport function createRefreshTokenCookie(token: string): CookieDef {\n return {\n name: 'refresh-token',\n value: token,\n httpOnly: true,\n maxAge: getJwtExpirationMaxAge(token),\n path: '/',\n }\n}\n" }, { "path": "apps/nextjs/src/shared/utils/jwt-util.ts", "content": "// src/shared/utils/jwtUtils.ts\n\n/**\n * Распарсить payload JWT и вернуть поле exp\n * @throws Error если формат токена некорректен или нет поля exp\n */\nfunction parseJwtExp(token: string): number {\n const parts = token.split('.')\n if (parts.length !== 3) {\n throw new Error('Invalid JWT format')\n }\n\n // Декодируем payload (в middle-segment)\n const payloadBase64 = parts[1].replace(/-/g, '+').replace(/_/g, '/')\n const payloadJson = Buffer.from(payloadBase64, 'base64').toString('utf-8')\n const payload = JSON.parse(payloadJson)\n\n if (typeof payload.exp !== 'number') {\n throw new Error('JWT payload missing exp claim')\n }\n\n return payload.exp\n}\n\n/**\n * Возвращает, сколько секунд осталось до истечения токена\n */\nexport function getSecondsToExpiration(token: string): number {\n const exp = parseJwtExp(token)\n const now = Math.floor(Date.now() / 1000)\n return exp - now\n}\n\n/**\n * Возвращает maxAge для установки в cookie, основанный на exp токена\n * @throws Error если токен уже истёк или exp–now ≤ 0\n */\nexport function getJwtExpirationMaxAge(token: string): number {\n const seconds = getSecondsToExpiration(token)\n if (seconds <= 0) {\n throw new Error('Token already expired')\n }\n return seconds\n}\n" }, { "path": "apps/nextjs/tsconfig.json", "content": "{\n \"compilerOptions\": {\n \"target\": \"ES2017\",\n \"lib\": [\"dom\", \"dom.iterable\", \"esnext\"],\n \"allowJs\": true,\n \"skipLibCheck\": true,\n \"strict\": true,\n \"noEmit\": true,\n \"esModuleInterop\": true,\n \"module\": \"esnext\",\n \"moduleResolution\": \"bundler\",\n \"resolveJsonModule\": true,\n \"isolatedModules\": true,\n \"jsx\": \"preserve\",\n \"incremental\": true,\n \"plugins\": [\n {\n \"name\": \"next\"\n }\n ],\n \"paths\": {\n \"@/*\": [\"./src/*\"]\n }\n },\n \"include\": [\"next-env.d.ts\", \"**/*.ts\", \"**/*.tsx\", \".next/types/**/*.ts\"],\n \"exclude\": [\"node_modules\"]\n}\n" }, { "path": "apps/react-effector-fsd/.gitignore", "content": "# Logs\nlogs\n*.log\nnpm-debug.log*\nyarn-debug.log*\nyarn-error.log*\npnpm-debug.log*\nlerna-debug.log*\n\nnode_modules\ndist\ndist-ssr\n*.local\n\n# Editor directories and files\n.vscode/*\n!.vscode/extensions.json\n.idea\n.DS_Store\n*.suo\n*.ntvs*\n*.njsproj\n*.sln\n*.sw?\n.DS_Store\n.env\n/node_modules/\n\n# React Router\n/.react-router/\n/build/\n" }, { "path": "apps/react-effector-fsd/README.md", "content": "# Welcome to React Router!\n\nA modern, production-ready template for building full-stack React applications using React Router.\n\n[![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/remix-run/react-router-templates/tree/main/default)\n\n## Features\n\n- 🚀 Server-side rendering\n- ⚡️ Hot Module Replacement (HMR)\n- 📦 Asset bundling and optimization\n- 🔄 Data loading and mutations\n- 🔒 TypeScript by default\n- 🎉 TailwindCSS for styling\n- 📖 [React Router docs](https://reactrouter.com/)\n\n## Getting Started\n\n### Installation\n\nInstall the dependencies:\n\n```bash\nnpm install\n```\n\n### Development\n\nStart the development server with HMR:\n\n```bash\nnpm run dev\n```\n\nYour application will be available at `http://localhost:5173`.\n\n## Building for Production\n\nCreate a production build:\n\n```bash\nnpm run build\n```\n\n## Deployment\n\n### Docker Deployment\n\nTo build and run using Docker:\n\n```bash\ndocker build -t my-app .\n\n# Run the container\ndocker run -p 3000:3000 my-app\n```\n\nThe containerized application can be deployed to any platform that supports Docker, including:\n\n- AWS ECS\n- Google Cloud Run\n- Azure Container Apps\n- Digital Ocean App Platform\n- Fly.io\n- Railway\n\n### DIY Deployment\n\nIf you're familiar with deploying Node applications, the built-in app server is production-ready.\n\nMake sure to deploy the output of `npm run build`\n\n```\n├── package.json\n├── package-lock.json (or pnpm-lock.yaml, or bun.lockb)\n├── build/\n│ ├── client/ # Static assets\n│ └── server/ # Server-side code\n```\n\n## Styling\n\nThis template comes with [Tailwind CSS](https://tailwindcss.com/) already configured for a simple default starting experience. You can use whatever CSS framework you prefer.\n\n---\n\nBuilt with ❤️ using React Router.\n" }, { "path": "apps/react-effector-fsd/eslint.config.js", "content": "import js from '@eslint/js'\nimport { defineConfig, globalIgnores } from 'eslint/config'\nimport reactHooks from 'eslint-plugin-react-hooks'\nimport reactRefresh from 'eslint-plugin-react-refresh'\nimport globals from 'globals'\nimport tseslint from 'typescript-eslint'\n\nexport default defineConfig([\n globalIgnores(['dist']),\n {\n files: ['**/*.{ts,tsx}'],\n extends: [\n js.configs.recommended,\n tseslint.configs.recommended,\n reactHooks.configs['recommended-latest'],\n reactRefresh.configs.vite,\n ],\n languageOptions: {\n ecmaVersion: 2020,\n globals: globals.browser,\n },\n },\n])\n" }, { "path": "apps/react-effector-fsd/index.html", "content": "\n\n \n \n \n \n Musicfun Effector\n \n \n \n \n
    \n \n \n\n" }, { "path": "apps/react-effector-fsd/package.json", "content": "{\n \"name\": \"react-effector-fsd\",\n \"private\": true,\n \"version\": \"0.0.1\",\n \"type\": \"module\",\n \"scripts\": {\n \"dev\": \"vite\",\n \"build\": \"tsc -b && vite build\",\n \"lint\": \"eslint .\",\n \"preview\": \"vite preview\",\n \"start\": \"vite ./build/server/index.js\",\n \"typecheck\": \"tsc --watch\",\n \"generate:api\": \"pnpm openapi-typescript https://musicfun.it-incubator.app/api-json -o ./src/shared/api/schema.ts --root-types --enum --enum-values --dedupe-enums\"\n },\n \"dependencies\": {\n \"@react-router/node\": \"^7.9.4\",\n \"@react-router/serve\": \"^7.9.4\",\n \"clsx\": \"^2.1.1\",\n \"effector\": \"^23.4.4\",\n \"effector-react\": \"^23.3.0\",\n \"isbot\": \"^5.1.31\",\n \"openapi-fetch\": \"^0.14.1\",\n \"react\": \"^19.2.0\",\n \"react-dom\": \"^19.2.0\",\n \"react-router\": \"^7.9.4\",\n \"react-toastify\": \"^11.0.5\"\n },\n \"devDependencies\": {\n \"@react-router/dev\": \"^7.9.4\",\n \"@storybook/react-vite\": \"^9.1.13\",\n \"@tailwindcss/vite\": \"^4.1.14\",\n \"@types/node\": \"^24.7.2\",\n \"@types/react\": \"^19.2.2\",\n \"@types/react-dom\": \"^19.2.1\",\n \"@vitejs/plugin-react\": \"^5.0.4\",\n \"babel-plugin-react-compiler\": \"^1.0.0\",\n \"openapi-typescript\": \"^7.9.1\",\n \"tailwindcss\": \"^4.1.14\",\n \"typescript\": \"^5.9.3\",\n \"vite\": \"npm:rolldown-vite@7.1.16\",\n \"vite-tsconfig-paths\": \"^5.1.4\"\n },\n \"overrides\": {\n \"vite\": \"npm:rolldown-vite@7.1.16\"\n }\n}\n" }, { "path": "apps/react-effector-fsd/src/app/App.tsx", "content": "import '@/app/styles/fonts.css'\nimport '@/app/styles/variables.css'\nimport '@/app/styles/reset.css'\nimport '@/app/styles/global.css'\n\nimport { useEffect } from 'react'\nimport { ToastContainer } from 'react-toastify'\n\nimport { appStarted } from './model/init.ts'\nimport { Routing } from './routes'\n\nexport default function App() {\n useEffect(() => {\n appStarted()\n }, [])\n\n return (\n <>\n \n \n \n )\n}\n" }, { "path": "apps/react-effector-fsd/src/app/main.tsx", "content": "import '@/app/styles/fonts.css'\nimport '@/app/styles/variables.css'\nimport '@/app/styles/reset.css'\nimport '@/app/styles/global.css'\nimport 'react-toastify/dist/ReactToastify.css'\n\nimport { StrictMode } from 'react'\nimport { createRoot } from 'react-dom/client'\nimport { BrowserRouter } from 'react-router'\n\nimport App from './App.tsx'\n\ncreateRoot(document.getElementById('root')!).render(\n \n \n \n \n \n)\n" }, { "path": "apps/react-effector-fsd/src/app/model/init.ts", "content": "import { createEvent, sample } from 'effector'\n\nimport { initApiClientFx } from '@/features/auth/model/model.ts'\n\nexport const appStarted = createEvent()\n\nsample({\n clock: appStarted,\n target: initApiClientFx,\n})\n" }, { "path": "apps/react-effector-fsd/src/app/routes/Routing.tsx", "content": "import { Route, Routes } from 'react-router'\n\nimport { OAuthCallback } from '@/pages/auth/OAuthRedirect/OAuthCallback.tsx'\nimport { Home } from '@/pages/home'\nimport { UserPage } from '@/pages/user'\nimport { Layout } from '@/widgets/layout'\n\nexport const Routing = () => (\n \n } />\n }>\n } />\n\n {/*} />*/}\n {/*} />*/}\n\n {/*} />*/}\n {/*} />*/}\n\n } />\n \n \n)\n" }, { "path": "apps/react-effector-fsd/src/app/routes/index.ts", "content": "export { Routing } from './Routing'\n" }, { "path": "apps/react-effector-fsd/src/app/styles/fonts.css", "content": "/*\n source: https://gwfh.mranftl.com/fonts/lato?subsets=latin\n*/\n\n/* lato-regular - latin */\n@font-face {\n font-family: Lato;\n font-weight: 400;\n font-style: normal;\n font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */\n src: url('../../shared/fonts/lato-v24-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */\n}\n\n/* lato-700 - latin */\n@font-face {\n font-family: Lato;\n font-weight: 700;\n font-style: normal;\n font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */\n src: url('../../shared/fonts/lato-v24-latin-700.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */\n}\n\n/* lato-900 - latin */\n@font-face {\n font-family: Lato;\n font-weight: 900;\n font-style: normal;\n font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */\n src: url('../../shared/fonts/lato-v24-latin-900.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */\n}\n" }, { "path": "apps/react-effector-fsd/src/app/styles/global.css", "content": ":root {\n font-family: Lato, sans-serif;\n font-weight: 400;\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n line-height: 100%;\n text-rendering: optimizelegibility;\n\n font-synthesis: none;\n}\n\n/* Scrollbar styles */\n* {\n scrollbar-color: var(--color-bg-secondary) var(--color-bg-primary);\n scrollbar-width: thin;\n}\n\nbody {\n margin: 0;\n color: var(--color-text-primary);\n background-color: var(--color-bg-primary);\n}\n" }, { "path": "apps/react-effector-fsd/src/app/styles/reset.css", "content": "/* Modern CSS Reset: https://piccalil.li/blog/a-more-modern-css-reset */\n\n/* Box sizing rules */\n*,\n*::before,\n*::after {\n box-sizing: border-box;\n}\n\n/* Prevent font size inflation */\nhtml {\n text-size-adjust: none;\n}\n\n/* Remove default margin in favour of better control in authored CSS */\nbody,\nh1,\nh2,\nh3,\nh4,\np,\nfigure,\nblockquote,\ndl,\ndd {\n margin-block-end: 0;\n}\n\nul,\nol {\n margin: 0;\n padding: 0;\n list-style: none;\n}\n\n/* Set core body defaults */\nbody {\n min-height: 100vh;\n line-height: 1.5;\n}\n\n/* Set shorter line heights on headings and interactive elements */\nh1,\nh2,\nh3,\nh4,\nbutton,\ninput,\nlabel {\n border: none;\n line-height: 1.1;\n}\n\n/* Balance text wrapping on headings */\nh1,\nh2,\nh3,\nh4 {\n text-wrap: balance;\n}\n\n/* A elements that don't have a class get default styles */\na {\n color: currentcolor;\n text-decoration: none;\n}\n\n/* Make images easier to work with */\nimg,\npicture {\n display: block;\n max-width: 100%;\n}\n\n/* Inherit fonts for inputs and buttons */\ninput,\nbutton,\ntextarea,\nselect {\n font-family: inherit;\n font-size: inherit;\n}\n\n/* Anything that has been anchored to should have extra scroll margin */\n:target {\n scroll-margin-block: 5ex;\n}\n" }, { "path": "apps/react-effector-fsd/src/app/styles/variables.css", "content": ":root {\n /*\n * Colors\n */\n --color-accent: #ff38b6;\n --color-disabled: #858585;\n --color-outline-focus: #1a75f5;\n\n /* Text */\n --color-text-primary: #fff;\n --color-text-primary-reverse: #000;\n --color-text-secondary: #b3b3b3;\n --color-text-label: #808080;\n --color-text-error: #f51a51;\n\n /* Backgrounds */\n --color-bg-primary: #000;\n --color-bg-secondary: #141414;\n --color-bg-primary-reverse: #fff;\n --color-bg-input-hover: #262626;\n --color-bg-card: rgb(7 7 7 / 50%);\n --color-bg-interactive-secondary: #333;\n\n /* Borders */\n --color-border-base: #7f7f7f;\n --color-border-input-primary: #4d4d4d;\n --color-border-input-active: #fffefe;\n\n /*\n * Typography\n */\n\n /* font-sizes */\n --font-size-xxxs: 12px;\n --font-size-xxs: 13px;\n --font-size-xs: 14px;\n --font-size-s: 16px;\n --font-size-m: 18px;\n --font-size-l: 20px;\n --font-size-xl: 24px;\n --font-size-xxl: 30px;\n --font-size-xxxl: 60px;\n\n /*\n * Layout\n */\n --header-height: 80px;\n --player-height: 112px;\n}\n" }, { "path": "apps/react-effector-fsd/src/features/auth/api/login.ts", "content": "import { api } from '@/shared/api/client'\n\nimport type { LoginRequestPayload, RefreshOutput } from '../model/auth-api.types'\n\nexport const loginApi = async (payload: LoginRequestPayload): Promise => {\n const res = await api().POST('/auth/login', {\n body: payload,\n })\n\n if (res.error) {\n throw new Error(res.error?.message)\n }\n\n return res.data\n}\n" }, { "path": "apps/react-effector-fsd/src/features/auth/api/logout.ts", "content": "import { api } from '@/shared/api/client'\n\nexport const logoutApi = async (refreshToken: string) => {\n await api().POST('/auth/logout', {\n body: { refreshToken },\n })\n}\n" }, { "path": "apps/react-effector-fsd/src/features/auth/api/me.ts", "content": "import { api } from '@/shared/api/client'\n\nimport type { User } from '../model/user.types'\n\nexport const meApi = async (): Promise => {\n const res = await api().GET('/auth/me')\n return res.data ?? null\n}\n" }, { "path": "apps/react-effector-fsd/src/features/auth/index.ts", "content": "export { getOauthRedirectUrl } from './model/auth-api.types'\nexport { $me, loginFx, logoutFx } from './model/model.ts'\nexport * from './ui'\n" }, { "path": "apps/react-effector-fsd/src/features/auth/model/auth-api.types.ts", "content": "import { getClientConfig } from '@/shared/api/client.ts'\nimport type { components } from '@/shared/api/schema.ts'\n\nexport type RefreshOutput = components['schemas']['RefreshOutput']\nexport type RefreshRequestPayload = components['schemas']['RefreshRequestPayload']\nexport type LoginRequestPayload = components['schemas']['LoginRequestPayload']\n\nexport const localStorageKeys = {\n refreshToken: 'spotifun-refresh-token',\n accessToken: 'spotifun-access-token',\n}\n\nexport const getOauthRedirectUrl = (redirectUrl: string) =>\n getClientConfig().baseURL + `/auth/oauth-redirect?callbackUrl=${redirectUrl}`\n" }, { "path": "apps/react-effector-fsd/src/features/auth/model/model.ts", "content": "import { createEffect, createStore, sample } from 'effector'\nimport { toast } from 'react-toastify'\n\nimport { setClientConfig } from '@/shared/api/client.ts'\nimport { API_BASE_URL, API_KEY } from '@/shared/config/config.ts'\n\nimport { loginApi } from '../api/login'\nimport { logoutApi } from '../api/logout'\nimport { meApi } from '../api/me'\nimport { localStorageKeys, type LoginRequestPayload, type RefreshOutput } from './auth-api.types'\nimport type { User } from './user.types'\n\nexport const initApiClientFx = createEffect(() => {\n setClientConfig({\n baseURL: API_BASE_URL,\n apiKey: API_KEY,\n getAccessToken: async () => localStorage.getItem(localStorageKeys.accessToken),\n getRefreshToken: async () => localStorage.getItem(localStorageKeys.refreshToken),\n saveAccessToken: async (token) =>\n token\n ? localStorage.setItem(localStorageKeys.accessToken, token)\n : localStorage.removeItem(localStorageKeys.accessToken),\n saveRefreshToken: async (token) =>\n token\n ? localStorage.setItem(localStorageKeys.refreshToken, token)\n : localStorage.removeItem(localStorageKeys.refreshToken),\n\n toManyRequestsErrorHandler: (message: string | null) => {\n toast(message)\n },\n logoutHandler: () => {},\n })\n})\n\nexport const fetchMeFx = createEffect(meApi)\nexport const loginFx = createEffect(loginApi)\nexport const logoutFx = createEffect(async () => {\n const refreshToken = localStorage.getItem(localStorageKeys.refreshToken)!\n await logoutApi(refreshToken)\n})\n\nconst saveTokensFx = createEffect((data: RefreshOutput) => {\n localStorage.setItem(localStorageKeys.refreshToken, data.refreshToken)\n localStorage.setItem(localStorageKeys.accessToken, data.accessToken)\n})\nconst clearTokensFx = createEffect(() => {\n localStorage.removeItem(localStorageKeys.accessToken)\n localStorage.removeItem(localStorageKeys.refreshToken)\n})\n\nexport const $me = createStore(null)\n .on(fetchMeFx.doneData, (_, me) => me)\n .reset(logoutFx.done)\n\nexport const $isAuthorized = createStore(false)\n .on(fetchMeFx.doneData, (_, me) => Boolean(me))\n .reset(logoutFx.done)\n\nsample({\n clock: initApiClientFx.done,\n filter: () => Boolean(localStorage.getItem(localStorageKeys.accessToken)),\n target: fetchMeFx,\n})\n\nsample({\n clock: loginFx.doneData,\n target: saveTokensFx,\n})\nsample({\n clock: saveTokensFx.done,\n target: fetchMeFx,\n})\n\nsample({\n clock: logoutFx.done,\n target: clearTokensFx,\n})\n" }, { "path": "apps/react-effector-fsd/src/features/auth/model/user.types.ts", "content": "import type { components } from '@/shared/api/schema.ts'\n\nexport type User = components['schemas']['GetMeOutput'] | null\n" }, { "path": "apps/react-effector-fsd/src/features/auth/ui/LoginButtonAndModal/LoginButtonAndModal.module.css", "content": ".dialog {\n width: 376px;\n padding-bottom: 22px;\n}\n\n.content {\n display: flex;\n flex-direction: column;\n gap: 32px;\n align-items: center;\n\n text-align: center;\n}\n\n.icon {\n display: flex;\n align-items: center;\n justify-content: center;\n\n width: 60px;\n height: 60px;\n border-radius: 50%;\n\n font-size: 24px;\n\n background-color: var(--color-accent);\n}\n\n.button {\n height: 55px;\n}\n\n.secondary {\n background-color: #555;\n}\n" }, { "path": "apps/react-effector-fsd/src/features/auth/ui/LoginButtonAndModal/LoginButtonAndModal.tsx", "content": "import clsx from 'clsx'\nimport { useUnit } from 'effector-react'\nimport { useState } from 'react'\n\nimport { getOauthRedirectUrl, loginFx } from '@/features/auth'\nimport { Button } from '@/shared/components/Button'\nimport { Dialog, DialogContent, DialogHeader } from '@/shared/components/Dialog'\nimport { Typography } from '@/shared/components/Typography'\nimport { CURRENT_APP_DOMAIN } from '@/shared/config/config'\n\nimport s from './LoginButtonAndModal.module.css'\n\nexport const LoginButtonAndModal = () => {\n const [isOpen, setIsOpen] = useState(false)\n const [login, loginPending] = useUnit([loginFx, loginFx.pending])\n\n const handleOpenModal = () => setIsOpen(true)\n const handleCloseModal = () => setIsOpen(false)\n\n const loginHandler = () => {\n const redirectUri = window.location.origin + CURRENT_APP_DOMAIN + 'oauth/callback' // todo: to config\n const url = getOauthRedirectUrl(redirectUri)\n window.open(url, 'oauthPopup', 'width=500,height=600')\n\n const receiveMessage = async (event: MessageEvent) => {\n if (event.origin !== window.location.origin) {\n // todo: to config\n return\n }\n\n const { code } = event.data\n if (code) {\n console.log('✅ code received:', code)\n window.removeEventListener('message', receiveMessage)\n\n // effector login\n login({ code, accessTokenTTL: '10m', redirectUri, rememberMe: true })\n handleCloseModal()\n }\n }\n\n window.addEventListener('message', receiveMessage)\n }\n\n return (\n <>\n \n\n \n \n\n \n \n Millions of Songs.
    Free on Musicfun.\n     \n\n
    😊
    \n\n \n \n {loginPending ? 'Signing in...' : 'Sign in with APIHub'}\n \n     \n     \n \n )\n}\n" }, { "path": "apps/react-effector-fsd/src/features/auth/ui/LoginButtonAndModal/index.ts", "content": "export { LoginButtonAndModal } from './LoginButtonAndModal'\n" }, { "path": "apps/react-effector-fsd/src/features/auth/ui/ProfileDropdownMenu/ProfileDropdownMenu.module.css", "content": ".trigger {\n cursor: pointer;\n display: flex;\n gap: 8px;\n align-items: center;\n}\n\n.avatar {\n overflow: hidden;\n width: 34px;\n height: 34px;\n border-radius: 50%;\n}\n\n.name {\n color: var(--color-text-primary);\n}\n" }, { "path": "apps/react-effector-fsd/src/features/auth/ui/ProfileDropdownMenu/ProfileDropdownMenu.stories.tsx", "content": "import type { Meta, StoryObj } from '@storybook/react-vite'\n\nimport { ProfileDropdownMenu } from './ProfileDropdownMenu'\n\nconst meta: Meta = {\n title: 'entities/ProfileDropdownMenu',\n component: ProfileDropdownMenu,\n parameters: {\n layout: 'centered',\n },\n}\n\nexport default meta\n\ntype Story = StoryObj\n\nexport const Default: Story = {\n args: {\n avatar: 'https://unsplash.it/182/182',\n },\n}\n" }, { "path": "apps/react-effector-fsd/src/features/auth/ui/ProfileDropdownMenu/ProfileDropdownMenu.tsx", "content": "import { useUnit } from 'effector-react'\nimport { Link } from 'react-router'\n\nimport { $me, logoutFx } from '@/features/auth'\nimport {\n DropdownMenu,\n DropdownMenuContent,\n DropdownMenuItem,\n DropdownMenuTrigger,\n Typography,\n} from '@/shared/components'\nimport { LogoutIcon, ProfileIcon } from '@/shared/icons'\n\nimport s from './ProfileDropdownMenu.module.css'\n\nexport const ProfileDropdownMenu = ({ avatar }: { avatar: string }) => {\n const [me, logout, logoutPending] = useUnit([$me, logoutFx, logoutFx.pending])\n\n const handleLogout = () => {\n logout()\n }\n\n return (\n \n \n
    \n {''}\n
    \n \n {me?.login ?? 'anonymous'}\n \n     \n \n \n \n My Profile\n \n \n \n {logoutPending ? 'Logging out...' : 'Logout'}\n \n \n     \n )\n}\n" }, { "path": "apps/react-effector-fsd/src/features/auth/ui/ProfileDropdownMenu/index.ts", "content": "export * from './ProfileDropdownMenu'\n" }, { "path": "apps/react-effector-fsd/src/features/auth/ui/index.ts", "content": "export * from './LoginButtonAndModal'\nexport * from './ProfileDropdownMenu'\n" }, { "path": "apps/react-effector-fsd/src/pages/auth/OAuthRedirect/OAuthCallback.module.css", "content": ".title {\n text-align: center;\n font-size: 250px;\n margin: 0;\n}\n\n.subtitle {\n text-align: center;\n font-size: 50px;\n margin: 0;\n text-transform: uppercase;\n}\n" }, { "path": "apps/react-effector-fsd/src/pages/auth/OAuthRedirect/OAuthCallback.tsx", "content": "import { useEffect } from 'react'\n\nexport const OAuthCallback = () => {\n useEffect(() => {\n const url = new URL(window.location.href)\n const code = url.searchParams.get('code') // или code/state, если flow другой\n\n if (code && window.opener) {\n window.opener.postMessage({ code }, '*') // Лучше заменить \"*\" на точный origin\n }\n\n window.close()\n }, [])\n\n return

    Welcome...

    \n}\n" }, { "path": "apps/react-effector-fsd/src/pages/home/Home.tsx", "content": "export function Home() {\n return
    Musicfun home page
    \n}\n" }, { "path": "apps/react-effector-fsd/src/pages/home/index.ts", "content": "export { Home } from './Home'\n" }, { "path": "apps/react-effector-fsd/src/pages/user/UserPage.tsx", "content": "export const UserPage = () => {\n return (\n
    \n
    UserPage
    \n
    \n )\n}\n" }, { "path": "apps/react-effector-fsd/src/pages/user/index.ts", "content": "export { UserPage } from './UserPage'\n" }, { "path": "apps/react-effector-fsd/src/shared/api/client.ts", "content": "import createClient, { type Middleware } from 'openapi-fetch'\n\nimport type { paths } from './schema.ts'\n\nconst config = {\n baseURL: null as string | null,\n apiKey: null as string | null,\n getAccessToken: null as (() => Promise) | null,\n saveAccessToken: null as ((accessToken: string | null) => Promise) | null,\n getRefreshToken: null as (() => Promise) | null,\n saveRefreshToken: null as ((refreshToken: string | null) => Promise) | null,\n toManyRequestsErrorHandler: null as ((message: string | null) => void) | null,\n logoutHandler: null as (() => void) | null,\n}\n\nexport const setClientConfig = (newConfig: Partial) => {\n Object.assign(config, newConfig)\n _client = undefined // пере-инициализируем\n}\n\nexport const getClientConfig = () => ({ ...config })\n\n/* ------------------------------------------------------------------ */\n/* 2. Mutex для refresh-а */\n/* ------------------------------------------------------------------ */\nlet refreshPromise: Promise | null = null\n\nexport function makeRefreshToken(): Promise {\n if (!refreshPromise) {\n // 1) создаём «замок» сразу\n refreshPromise = (async (): Promise => {\n const refreshToken = await config.getRefreshToken!()\n if (!refreshToken) throw new Error('No refresh token')\n\n const res = await fetch(`${config.baseURL}/auth/refresh`, {\n method: 'POST',\n headers: {\n 'Content-Type': 'application/json',\n 'API-KEY': config.apiKey!,\n },\n body: JSON.stringify({ refreshToken }),\n })\n if (res.status !== 201) throw new Error('Refresh failed')\n\n const { accessToken, refreshToken: newRT } = await res.json()\n await config.saveAccessToken!(accessToken)\n await config.saveRefreshToken!(newRT)\n\n return accessToken\n })().finally(() => {\n refreshPromise = null // 2) снимаем «замок»\n })\n }\n\n return refreshPromise\n}\n\nconst authMiddleware: Middleware = {\n /* ---------- REQUEST -------------------------------------------------- */\n async onRequest({ request }) {\n request.headers.set('API-KEY', config.apiKey!)\n\n const token = await config.getAccessToken?.()\n if (token) request.headers.set('Authorization', `Bearer ${token}`)\n ;(request as any)._retryClone = request.clone()\n\n return request\n },\n async onResponse({ request, response }) {\n const req = request as Request & { _retry: boolean }\n\n if (response.status === 429) {\n const { message } = await response.clone().json()\n config.toManyRequestsErrorHandler?.(message)\n }\n\n if (response.status !== 401 || request.url.includes('/auth/refresh')) {\n return response // всё ок\n }\n\n // уже пытались? -> отдаём 401 наружу, чтобы не зациклиться\n if (req._retry) return response\n req._retry = true\n\n try {\n const newToken = await makeRefreshToken()\n\n // повторяем исходный запрос с новым токеном\n const orig = (req as any)._retryClone as Request // клон с целым body\n const retry = new Request(orig, { headers: new Headers(orig.headers) })\n retry.headers.set('Authorization', `Bearer ${newToken}`)\n return await fetch(retry)\n } catch (error) {\n console.log(error)\n // refresh не удался → чистим хранилище, отдаём 401\n await config.saveAccessToken!(null)\n await config.saveRefreshToken!(null)\n await config.logoutHandler?.()\n return response\n }\n },\n}\n\nlet _client: ReturnType> | undefined\n\nconst LOCAL_HOSTNAMES = new Set(['localhost', '127.0.0.1', '::1', '0.0.0.0'])\n\nfunction isLocalClient(): boolean {\n if (typeof window === 'undefined') return false // не клиент\n const h = window.location.hostname\n return LOCAL_HOSTNAMES.has(h) || h.endsWith('.localhost')\n}\n\nexport function assertApiConfig() {\n if (!config.baseURL) {\n const msg = 'baseURL is required. Call setClientConfig({ baseURL })'\n console.error(msg)\n throw new Error(msg)\n }\n if (isLocalClient() && !config.apiKey) {\n const msg =\n 'apiKey is required when running client on localhost. Call setClientConfig({ apiKey })'\n console.error(msg)\n throw new Error(msg)\n }\n}\n\nexport const api = () => {\n if (_client) return _client\n\n assertApiConfig()\n\n const client = createClient({ baseUrl: config.baseURL! })\n client.use(authMiddleware)\n _client = client\n return _client\n}\n" }, { "path": "apps/react-effector-fsd/src/shared/api/schema.ts", "content": "/**\n * This file was auto-generated by openapi-typescript.\n * Do not make direct changes to the file.\n */\n\nexport interface paths {\n '/playlists/my': {\n parameters: {\n query?: never\n header?: never\n path?: never\n cookie?: never\n }\n /**\n * Get my playlists\n * @deprecated\n */\n get: operations['PlaylistsController_getMyPlaylists']\n put?: never\n post?: never\n delete?: never\n options?: never\n head?: never\n patch?: never\n trace?: never\n }\n '/playlists': {\n parameters: {\n query?: never\n header?: never\n path?: never\n cookie?: never\n }\n /**\n * Retrieve all playlists\n * @description Query parameters must conform to the **GetPlaylistsRequestPayload** schema.\n */\n get: operations['PlaylistsPublicController_getPlaylists']\n put?: never\n /** Create a new playlist */\n post: operations['PlaylistsController_createPlaylist']\n delete?: never\n options?: never\n head?: never\n patch?: never\n trace?: never\n }\n '/playlists/{playlistId}': {\n parameters: {\n query?: never\n header?: never\n path?: never\n cookie?: never\n }\n /** Get a single playlist by ID */\n get: operations['PlaylistsPublicController_getPlaylistById']\n /** Update a playlist */\n put: operations['PlaylistsController_updatePlaylist']\n post?: never\n /** Delete a playlist */\n delete: operations['PlaylistsController_deletePlaylist']\n options?: never\n head?: never\n patch?: never\n trace?: never\n }\n '/playlists/{playlistId}/reorder': {\n parameters: {\n query?: never\n header?: never\n path?: never\n cookie?: never\n }\n get?: never\n /** Reorder playlists */\n put: operations['PlaylistsController_reorderPlaylist']\n post?: never\n delete?: never\n options?: never\n head?: never\n patch?: never\n trace?: never\n }\n '/playlists/{playlistId}/images/main': {\n parameters: {\n query?: never\n header?: never\n path?: never\n cookie?: never\n }\n get?: never\n put?: never\n /**\n * Upload playlist cover\n * @description Minimum height — 500px; image must be square\n */\n post: operations['PlaylistsController_uploadMainImage']\n /** Delete playlist cover */\n delete: operations['PlaylistsController_deleteTrackCover']\n options?: never\n head?: never\n patch?: never\n trace?: never\n }\n '/playlists/tracks': {\n parameters: {\n query?: never\n header?: never\n path?: never\n cookie?: never\n }\n /**\n * Get list of all tracks in all playlists.\n * @description Query-parameters schema → [`GetTracksRequestPayload`](#model-GetTracksRequestPayload)\n */\n get: operations['TracksPublicController_getAllTracks']\n put?: never\n post?: never\n delete?: never\n options?: never\n head?: never\n patch?: never\n trace?: never\n }\n '/playlists/{playlistId}/tracks': {\n parameters: {\n query?: never\n header?: never\n path?: never\n cookie?: never\n }\n /** Get list of tracks in a playlist */\n get: operations['TracksPublicController_getPlaylistTracks']\n put?: never\n post?: never\n delete?: never\n options?: never\n head?: never\n patch?: never\n trace?: never\n }\n '/playlists/tracks/{trackId}': {\n parameters: {\n query?: never\n header?: never\n path?: never\n cookie?: never\n }\n /** Get track details by ID */\n get: operations['TracksPublicController_getTrackDetails']\n /** Update track information */\n put: operations['TracksController_updateTrack']\n post?: never\n /** Permanently delete a track */\n delete: operations['TracksController_deleteTrackCompletely']\n options?: never\n head?: never\n patch?: never\n trace?: never\n }\n '/playlists/tracks/{trackId}/likes': {\n parameters: {\n query?: never\n header?: never\n path?: never\n cookie?: never\n }\n get?: never\n put?: never\n /** Like or toggle like on a track */\n post: operations['TracksPublicController_likeTrack']\n delete?: never\n options?: never\n head?: never\n patch?: never\n trace?: never\n }\n '/playlists/tracks/{trackId}/dislikes': {\n parameters: {\n query?: never\n header?: never\n path?: never\n cookie?: never\n }\n get?: never\n put?: never\n /** Dislike or toggle dislike on a track */\n post: operations['TracksPublicController_dislikeTrack']\n delete?: never\n options?: never\n head?: never\n patch?: never\n trace?: never\n }\n '/playlists/tracks/{trackId}/reactions': {\n parameters: {\n query?: never\n header?: never\n path?: never\n cookie?: never\n }\n get?: never\n put?: never\n post?: never\n /** Remove user reaction from a track */\n delete: operations['TracksPublicController_removeTrackReaction']\n options?: never\n head?: never\n patch?: never\n trace?: never\n }\n '/playlists/{playlistId}/likes': {\n parameters: {\n query?: never\n header?: never\n path?: never\n cookie?: never\n }\n get?: never\n put?: never\n /** Like a playlist */\n post: operations['PlaylistsPublicController_likePlaylist']\n delete?: never\n options?: never\n head?: never\n patch?: never\n trace?: never\n }\n '/playlists/{playlistId}/dislikes': {\n parameters: {\n query?: never\n header?: never\n path?: never\n cookie?: never\n }\n get?: never\n put?: never\n /** Dislike a playlist */\n post: operations['PlaylistsPublicController_dislikePlaylist']\n delete?: never\n options?: never\n head?: never\n patch?: never\n trace?: never\n }\n '/playlists/{playlistId}/reactions': {\n parameters: {\n query?: never\n header?: never\n path?: never\n cookie?: never\n }\n get?: never\n put?: never\n post?: never\n /** Remove user reaction from a playlist */\n delete: operations['PlaylistsPublicController_removePlaylistReaction']\n options?: never\n head?: never\n patch?: never\n trace?: never\n }\n '/playlists/{playlistId}/tracks/{trackId}/reorder': {\n parameters: {\n query?: never\n header?: never\n path?: never\n cookie?: never\n }\n get?: never\n /** Reorder tracks in a playlist */\n put: operations['TracksController_reorderTrack']\n post?: never\n delete?: never\n options?: never\n head?: never\n patch?: never\n trace?: never\n }\n '/playlists/{playlistId}/relationships/tracks': {\n parameters: {\n query?: never\n header?: never\n path?: never\n cookie?: never\n }\n get?: never\n put?: never\n /** Add a track to your playlist */\n post: operations['TracksController_addTrackToPlaylist']\n delete?: never\n options?: never\n head?: never\n patch?: never\n trace?: never\n }\n '/playlists/{playlistId}/relationships/tracks/{trackId}': {\n parameters: {\n query?: never\n header?: never\n path?: never\n cookie?: never\n }\n get?: never\n put?: never\n post?: never\n /** Remove a track from your playlist */\n delete: operations['TracksController_unbindTrackFromPlaylist']\n options?: never\n head?: never\n patch?: never\n trace?: never\n }\n '/playlists/tracks/{trackId}/actions/publish': {\n parameters: {\n query?: never\n header?: never\n path?: never\n cookie?: never\n }\n get?: never\n put?: never\n /** Publish a track (make it publicly available) */\n post: operations['TracksController_publishTrack']\n delete?: never\n options?: never\n head?: never\n patch?: never\n trace?: never\n }\n '/playlists/tracks/{trackId}/cover': {\n parameters: {\n query?: never\n header?: never\n path?: never\n cookie?: never\n }\n get?: never\n put?: never\n /** Upload track cover */\n post: operations['TracksController_uploadTrackCover']\n /** Delete track cover */\n delete: operations['TracksController_deleteTrackCover']\n options?: never\n head?: never\n patch?: never\n trace?: never\n }\n '/playlists/tracks/upload': {\n parameters: {\n query?: never\n header?: never\n path?: never\n cookie?: never\n }\n get?: never\n put?: never\n /** Create a track with MP3 file upload */\n post: operations['TracksController_uploadTrackMp3']\n delete?: never\n options?: never\n head?: never\n patch?: never\n trace?: never\n }\n '/artists': {\n parameters: {\n query?: never\n header?: never\n path?: never\n cookie?: never\n }\n get?: never\n put?: never\n /** Create a new artist */\n post: operations['ArtistsController_createArtist']\n delete?: never\n options?: never\n head?: never\n patch?: never\n trace?: never\n }\n '/artists/search': {\n parameters: {\n query?: never\n header?: never\n path?: never\n cookie?: never\n }\n /** Search artists by substring */\n get: operations['ArtistsController_searchArtist']\n put?: never\n post?: never\n delete?: never\n options?: never\n head?: never\n patch?: never\n trace?: never\n }\n '/artists/{id}': {\n parameters: {\n query?: never\n header?: never\n path?: never\n cookie?: never\n }\n get?: never\n put?: never\n post?: never\n /** Delete an artist by ID */\n delete: operations['ArtistsController_deleteArtist']\n options?: never\n head?: never\n patch?: never\n trace?: never\n }\n '/auth/oauth-redirect': {\n parameters: {\n query?: never\n header?: never\n path?: never\n cookie?: never\n }\n /**\n * OAuth redirect\n * @description The callback URL to redirect after granting access, https://oauth.apihub.it-incubator.io/realms/apihub/protocol/openid-connect/auth?client_id=musicfun&response_type=code&redirect_uri=http://localhost:3000/oauth2/callback&scope=openid\n */\n get: operations['AuthController_OauthRedirect']\n put?: never\n post?: never\n delete?: never\n options?: never\n head?: never\n patch?: never\n trace?: never\n }\n '/auth/login': {\n parameters: {\n query?: never\n header?: never\n path?: never\n cookie?: never\n }\n get?: never\n put?: never\n /** Log in using the code received after OAuth authorization redirect */\n post: operations['AuthController_login']\n delete?: never\n options?: never\n head?: never\n patch?: never\n trace?: never\n }\n '/auth/refresh': {\n parameters: {\n query?: never\n header?: never\n path?: never\n cookie?: never\n }\n get?: never\n put?: never\n /** Refresh refresh/access token pair */\n post: operations['AuthController_refresh']\n delete?: never\n options?: never\n head?: never\n patch?: never\n trace?: never\n }\n '/auth/logout': {\n parameters: {\n query?: never\n header?: never\n path?: never\n cookie?: never\n }\n get?: never\n put?: never\n /** Deactivate refresh token */\n post: operations['AuthController_logout']\n delete?: never\n options?: never\n head?: never\n patch?: never\n trace?: never\n }\n '/auth/me': {\n parameters: {\n query?: never\n header?: never\n path?: never\n cookie?: never\n }\n /** Get current user by access token */\n get: operations['AuthController_getMe']\n put?: never\n post?: never\n delete?: never\n options?: never\n head?: never\n patch?: never\n trace?: never\n }\n '/tags': {\n parameters: {\n query?: never\n header?: never\n path?: never\n cookie?: never\n }\n get?: never\n put?: never\n /** Create a new tag */\n post: operations['TagsController_createTag']\n delete?: never\n options?: never\n head?: never\n patch?: never\n trace?: never\n }\n '/tags/search': {\n parameters: {\n query?: never\n header?: never\n path?: never\n cookie?: never\n }\n /** Search tags by substring */\n get: operations['TagsController_searchTags']\n put?: never\n post?: never\n delete?: never\n options?: never\n head?: never\n patch?: never\n trace?: never\n }\n '/tags/{id}': {\n parameters: {\n query?: never\n header?: never\n path?: never\n cookie?: never\n }\n get?: never\n put?: never\n post?: never\n /** Delete a tag by ID */\n delete: operations['TagsController_deleteTag']\n options?: never\n head?: never\n patch?: never\n trace?: never\n }\n}\nexport type webhooks = Record\nexport interface components {\n schemas: {\n UserRef: {\n /** @description Unique identifier of the user */\n id: string\n /** @description Name of the user */\n name: string\n }\n /**\n * @description Type of the image size (e.g., original, thumbnail variants)\n * @enum {string}\n */\n ImageSizeType: ImageSizeType\n ImageVariant: {\n /** @description Type of the image size (e.g., original, thumbnail variants) */\n type: components['schemas']['ImageSizeType']\n /** @description Image width in pixels */\n width: number\n /** @description Image height in pixels */\n height: number\n /** @description Image file size in bytes */\n fileSize: number\n /** @description Full public URL of the image */\n url: string\n }\n PlaylistImagesOutputDTO: {\n /** @description Original images and thumbnail previews */\n main?: components['schemas']['ImageVariant'][]\n }\n TagRef: {\n /** @description Unique identifier of the tag */\n id: string\n /** @description Original name of the tag */\n name: string\n }\n /**\n * @description User reaction: 0 – guest or no reaction; 1 – like; -1 – dislike\n * @enum {number}\n */\n ReactionValue: ReactionValue\n PlaylistListItemAttributes: {\n /** @description Title of the playlist */\n title: string\n /** @description Description of the playlist */\n description: string | null\n /**\n * Format: date-time\n * @description Date and time when the playlist was added (ISO 8601)\n */\n addedAt: string\n /**\n * Format: date-time\n * @description Date and time when the playlist was last updated (ISO 8601)\n */\n updatedAt: string\n /** @description Order index of the playlist */\n order: number\n /** @description User who created the playlist */\n user: components['schemas']['UserRef']\n /** @description Images associated with the playlist */\n images: components['schemas']['PlaylistImagesOutputDTO']\n /** @description Tags linked to the playlist */\n tags: components['schemas']['TagRef'][]\n /** @description Total number of likes for this playlist */\n likesCount: number\n /** @description Total number of dislikes for this playlist */\n dislikesCount: number\n /** @description User reaction: 0 – guest or no reaction; 1 – like; -1 – dislike */\n currentUserReaction: components['schemas']['ReactionValue']\n }\n PlaylistListItemResource: {\n /** @description Unique identifier of the playlist */\n id: string\n /**\n * @description Resource type (should be \"playlists\")\n * @example playlists\n */\n type: string\n attributes: components['schemas']['PlaylistListItemAttributes']\n }\n GetMyPlaylistsOutput: {\n /** @description Array of playlist resource objects owned by the current user */\n data: components['schemas']['PlaylistListItemResource'][]\n }\n CreatePlaylistRequestPayload: {\n /** @description Playlist title (1 to 100 characters) */\n title: string\n /** @description Playlist description (up to 1000 characters) */\n description: string | null\n }\n PlaylistAttributes: {\n /** @description Title of the playlist */\n title: string\n /** @description Description of the playlist */\n description: string | null\n /**\n * Format: date-time\n * @description Date and time when the playlist was added (ISO 8601)\n */\n addedAt: string\n /**\n * Format: date-time\n * @description Date and time when the playlist was last updated (ISO 8601)\n */\n updatedAt: string\n /** @description Order index of the playlist */\n order: number\n /** @description User who created the playlist */\n user: components['schemas']['UserRef']\n /** @description Images associated with the playlist */\n images: components['schemas']['PlaylistImagesOutputDTO']\n /** @description Tags linked to the playlist */\n tags: components['schemas']['TagRef'][]\n /** @description Total number of likes for this playlist */\n likesCount: number\n /** @description Total number of dislikes for this playlist */\n dislikesCount: number\n /** @description User reaction: 0 – guest or no reaction; 1 – like; -1 – dislike */\n currentUserReaction: components['schemas']['ReactionValue']\n }\n PlaylistResource: {\n /** @description Unique identifier of the playlist */\n id: string\n /**\n * @description Resource type (should be \"playlists\")\n * @example playlists\n */\n type: string\n attributes: components['schemas']['PlaylistAttributes']\n }\n GetPlaylistOutput: {\n data: components['schemas']['PlaylistResource']\n }\n UpdatePlaylistRequestPayload: {\n /** @description Playlist title (1 – 100 characters) */\n title: string\n /**\n * @description Playlist description (up to 1000 characters)\n * @example Cool playlist\n */\n description: string | null\n /** @description Tag IDs to associate with the playlist (0 – 5 items; [] = clear tags) */\n tagIds: string[]\n }\n ReorderPlaylistsRequestPayload: {\n /**\n * Format: uuid\n * @description ID of the playlist after which the current playlist should be inserted. Send null to place the playlist at the beginning of the list.\n */\n putAfterItemId: string | null\n }\n TrackImages: {\n /** @description List of original images and thumbnail versions (e.g., original, 320x180, etc.) */\n main?: components['schemas']['ImageVariant'][]\n }\n GetTracksRequestPayload: {\n /**\n * @description Page number for pagination (starting from 1)\n * @default 1\n */\n pageNumber: number\n /**\n * @description Page size for pagination (between 1 and 20)\n * @default 20\n */\n pageSize: number\n /** @description Search term for filtering playlists by name */\n search?: string\n /**\n * @description Field by which to sort tracks\n * @default publishedAt\n * @enum {string}\n */\n sortBy: PathsPlaylistsTracksGetParametersQuerySortBy\n /**\n * @description Sort direction (ascending or descending)\n * @default desc\n * @enum {string}\n */\n sortDirection: PathsPlaylistsGetParametersQuerySortDirection\n /** @description Filter by tag IDs (multiple values allowed) */\n tagsIds?: string[]\n /** @description Filter by artist IDs (multiple values allowed) */\n artistsIds?: string[]\n /** @description Filter by user ID (track creator's ID) */\n userId?: string\n /** @description If true, include unpublished tracks (drafts) of current user if userId === currentUserId */\n includeDrafts?: boolean\n /**\n * @description Pagination type: \"offset\" for page-number pagination; \"cursor\" for keyset/seek-based pagination.\n * @default offset\n * @enum {string}\n */\n paginationType: PathsPlaylistsTracksGetParametersQueryPaginationType\n /** @description Base64-encoded cursor for keyset pagination. Used only if paginationType is \"cursor\". */\n cursor?: string | null\n }\n JsonApiErrorSource: {\n /**\n * @description e.g. \"/data/attributes/field\"\n * @example /data/attributes/field\n */\n pointer?: string\n /**\n * @description e.g. \"?queryParam\"\n * @example ?queryParam\n */\n parameter?: string\n }\n JsonApiError: {\n /**\n * @description HTTP status code as a string\n * @example 404\n */\n status: string\n /**\n * @description Application-specific error code\n * @example E123\n */\n code?: Record\n /**\n * @description Short, human-readable summary\n * @example Not Found\n */\n title?: string\n /**\n * @description Detailed explanation\n * @example User with ID 123 not found\n */\n detail?: string\n /** @description Pointer to the associated entity in the request */\n source?: components['schemas']['JsonApiErrorSource']\n /** @description Any extra data */\n meta?: Record\n }\n JsonApiErrorDocument: {\n /** @description Array of one or more errors */\n errors: components['schemas']['JsonApiError'][]\n /** @description e.g. timestamp, path, traceId, etc. */\n meta?: Record\n }\n TrackAttachment: {\n /** @description Unique identifier of the entity */\n id: string\n /**\n * Format: date-time\n * @description Date and time when the entity was added\n */\n addedAt: string\n /**\n * Format: date-time\n * @description Date and time when the entity was last updated\n */\n updatedAt: string\n /** @description Version number of the entity (for concurrency control) */\n version: number\n /**\n * @description Public URL to access the uploaded file\n * @example https://cdn.example.com/uploads/track123/cover.jpg\n */\n url: string\n /**\n * @description MIME type of the file\n * @example image/jpeg\n */\n contentType: string\n /**\n * @description Original filename uploaded by the user\n * @example cover.jpg\n */\n originalName: string\n /**\n * @description Size of the file in bytes\n * @example 34872\n */\n fileSize: number\n }\n TrackListItemAttributes: {\n title: string\n /**\n * Format: date-time\n * @description Date and time when the track was added (ISO 8601)\n */\n addedAt: string\n likesCount: number\n attachments: components['schemas']['TrackAttachment'][]\n images: components['schemas']['TrackImages']\n user: components['schemas']['UserRef']\n /**\n * @description 0 – не залогинен или не реагировал; 1 – лайк; −1 – дизлайк\n * @enum {number}\n */\n currentUserReaction: ReactionValue\n isPublished: boolean\n /**\n * Format: date-time\n * @description Date and time when the track was published (ISO 8601)\n */\n publishedAt?: string | null\n }\n ArtistRelationship: {\n id: string\n type: string\n }\n ArtistsRelationship: {\n data: components['schemas']['ArtistRelationship'][]\n }\n TrackRelationships: {\n artists: components['schemas']['ArtistsRelationship']\n }\n TrackListItemResource: {\n id: string\n /** @example tracks */\n type: string\n attributes: components['schemas']['TrackListItemAttributes']\n relationships: components['schemas']['TrackRelationships']\n }\n JsonApiMetaWithPagingAndCursor: {\n page: number\n pageSize: number\n /** @description Total count may be absent when using keyset pagination */\n totalCount: number | null\n /** @description Total number of pages */\n pagesCount: number | null\n /** @description Cursor for the next page */\n nextCursor: string | null\n }\n OmitTypeClass: {\n /** @description Name of the artist */\n name: string\n }\n IncludedArtistOutput: {\n id: string\n type: string\n attributes: components['schemas']['OmitTypeClass']\n }\n GetTrackListOutput: {\n data: components['schemas']['TrackListItemResource'][]\n meta: components['schemas']['JsonApiMetaWithPagingAndCursor']\n included: components['schemas']['IncludedArtistOutput'][]\n }\n TrackListItemAttributesForPlaylist: {\n /** @description Title of the track */\n title: string\n /** @description Order index of the track in the playlist */\n order: number\n /**\n * Format: date-time\n * @description Date and time when the track was added (ISO 8601)\n */\n addedAt: string\n /**\n * Format: date-time\n * @description Date and time when the track was last updated (ISO 8601)\n */\n updatedAt: string\n /** @description Attachments related to the track */\n attachments: components['schemas']['TrackAttachment'][]\n /** @description Images associated with the track */\n images: components['schemas']['TrackImages']\n /**\n * @description User reaction: 0 – guest or no reaction; 1 – liked; -1 – disliked\n * @enum {number|null}\n */\n currentUserReaction: ReactionValue\n /**\n * Format: date-time\n * @description Date and time when the track was published (ISO 8601)\n */\n publishedAt?: string | null\n }\n TrackListItemResourceForPlaylist: {\n id: string\n /** @example tracks */\n type: string\n attributes: components['schemas']['TrackListItemAttributesForPlaylist']\n relationships: components['schemas']['TrackRelationships']\n }\n JsonApiMeta: {\n totalCount: number\n }\n GetTracksForPlaylistOutput: {\n data: components['schemas']['TrackListItemResourceForPlaylist'][]\n meta: components['schemas']['JsonApiMeta']\n included: components['schemas']['IncludedArtistOutput'][]\n }\n ArtistRef: {\n /** @description Unique identifier of the artist */\n id: string\n /** @description Name of the artist */\n name: string\n }\n TrackDetailsAttributes: {\n /** @description Track title */\n title: string\n /** @description Track lyrics text */\n lyrics?: string | null\n /**\n * Format: date-time\n * @description Release date in ISO 8601 format\n */\n releaseDate?: string | null\n /**\n * Format: date-time\n * @description Date and time when the track was added (ISO 8601)\n */\n addedAt: string\n /**\n * Format: date-time\n * @description Date and time when the track was last updated (ISO 8601)\n */\n updatedAt: string\n /** @description Duration of the track in seconds */\n duration: number\n /** @description Total number of likes for this track */\n likesCount: number\n /**\n * @deprecated\n * @description Total number of dislikes for this track\n */\n dislikesCount: number\n /** @description List of attachments related to the track */\n attachments: components['schemas']['TrackAttachment'][]\n images: components['schemas']['TrackImages']\n /** @description Tags associated with the track */\n tags: components['schemas']['TagRef'][]\n /** @description Artists associated with the track */\n artists: components['schemas']['ArtistRef'][]\n user: components['schemas']['UserRef']\n /** @description Publication status of the track */\n isPublished: boolean\n /**\n * Format: date-time\n * @description Publication date in ISO 8601 format\n */\n publishedAt?: string | null\n /**\n * @description User reaction: 0 – guest or no reaction; 1 – user liked; -1 – user disliked\n * @enum {number}\n */\n currentUserReaction: ReactionValue\n }\n TrackDetailsResource: {\n /** @description Unique identifier of the track */\n id: string\n /**\n * @description Resource type (should be \"tracks\")\n * @example tracks\n */\n type: string\n attributes: components['schemas']['TrackDetailsAttributes']\n }\n GetTrackDetailsOutput: {\n data: components['schemas']['TrackDetailsResource']\n }\n ReactionOutput: {\n objectId: string\n /** @enum {number} */\n value: ReactionValue\n likes: number\n dislikes: number\n }\n GetPlaylistsRequestPayload: {\n /**\n * @description Page number for pagination (starting from 1)\n * @default 1\n */\n pageNumber: number\n /**\n * @description Page size for pagination (between 1 and 20)\n * @default 20\n */\n pageSize: number\n /** @description Search term for filtering playlists by name */\n search?: string\n /**\n * @description Field by which to sort playlists\n * @default addedAt\n * @enum {string}\n */\n sortBy: PathsPlaylistsGetParametersQuerySortBy\n /**\n * @description Sort direction (ascending or descending)\n * @default desc\n * @enum {string}\n */\n sortDirection: PathsPlaylistsGetParametersQuerySortDirection\n /** @description Filter by tag IDs. Multiple values allowed, e.g.: tagsIds=tag1&tagsIds=tag2 */\n tagsIds?: string[]\n /** @description Filter by user ID (playlist creator’s ID) */\n userId?: string\n /** @description Filter by track ID – only playlists containing this track will be returned */\n trackId?: string\n }\n JsonApiMetaWithPaging: {\n totalCount: number\n page: number\n pageSize: number\n pagesCount: number\n }\n GetPlaylistsOutput: {\n /** @description Array of playlist resource objects */\n data: components['schemas']['PlaylistListItemResource'][]\n meta: components['schemas']['JsonApiMetaWithPaging']\n }\n ReorderTracksRequestPayload: {\n /**\n * Format: uuid\n * @description ID of the track after which the current track should be inserted. Send null to place the track at the beginning of the list.\n * @example a1b2c3d4-e5f6-7890-abcd-1234567890ef\n */\n putAfterItemId: string | null\n }\n UpdateTrackRequestPayload: {\n /** @description Track title (1 to 100 characters) */\n title: string\n /** @description Track lyrics (up to 5000 characters) */\n lyrics: string | null\n /**\n * Format: date-time\n * @description Release date in ISO 8601 format\n */\n releaseDate: string | null\n /** @description Array of tag IDs to associate with the track (up to 5) */\n tagIds: string[]\n /** @description Array of artist IDs to associate with the track (up to 5) */\n artistsIds: string[]\n }\n AddTrackToPlaylistRequestPayload: {\n /** @description ID of the track to add to the playlist */\n trackId: string\n }\n CreateArtistRequestPayload: {\n /** @description Artist name (must be between 2 and 30 characters) */\n name: string\n }\n LoginRequestPayload: {\n /** @description Authorization code received from OAuth server after redirect */\n code: string\n /**\n * @description Specify the same redirect URI used in the initial OAuth server request\n * @example http://localhost:3000/oauth2/callback\n */\n redirectUri: string\n /**\n * @description Access token lifetime (default \"3m\"); must be a string like \"60s\", \"3m\", \"2h\", or \"1d\"\n * @example 3m\n */\n accessTokenTTL?: string\n /** @description Refresh token lifetime: if true, 30 days; if false, 30 minutes. accessTokenTTL must not exceed the refresh token lifetime */\n rememberMe: boolean\n }\n RefreshOutput: {\n refreshToken: string\n accessToken: string\n }\n BadRequestException: Record\n UnauthorizedException: Record\n RefreshRequestPayload: {\n refreshToken: string\n }\n LogoutRequestPayload: {\n refreshToken: string\n }\n GetMeOutput: {\n userId: string\n login: string\n }\n CreateTagRequestPayload: {\n /** @description Tag name (2 to 30 characters) */\n name: string\n }\n /**\n * Format: binary\n * @description Файл в multipart/form-data\n */\n BinaryFile: string\n }\n responses: never\n parameters: never\n requestBodies: never\n headers: never\n pathItems: never\n}\nexport type SchemaUserRef = components['schemas']['UserRef']\nexport type SchemaImageVariant = components['schemas']['ImageVariant']\nexport type SchemaPlaylistImagesOutputDto = components['schemas']['PlaylistImagesOutputDTO']\nexport type SchemaTagRef = components['schemas']['TagRef']\nexport type SchemaPlaylistListItemAttributes = components['schemas']['PlaylistListItemAttributes']\nexport type SchemaPlaylistListItemResource = components['schemas']['PlaylistListItemResource']\nexport type SchemaGetMyPlaylistsOutput = components['schemas']['GetMyPlaylistsOutput']\nexport type SchemaCreatePlaylistRequestPayload =\n components['schemas']['CreatePlaylistRequestPayload']\nexport type SchemaPlaylistAttributes = components['schemas']['PlaylistAttributes']\nexport type SchemaPlaylistResource = components['schemas']['PlaylistResource']\nexport type SchemaGetPlaylistOutput = components['schemas']['GetPlaylistOutput']\nexport type SchemaUpdatePlaylistRequestPayload =\n components['schemas']['UpdatePlaylistRequestPayload']\nexport type SchemaReorderPlaylistsRequestPayload =\n components['schemas']['ReorderPlaylistsRequestPayload']\nexport type SchemaTrackImages = components['schemas']['TrackImages']\nexport type SchemaGetTracksRequestPayload = components['schemas']['GetTracksRequestPayload']\nexport type SchemaJsonApiErrorSource = components['schemas']['JsonApiErrorSource']\nexport type SchemaJsonApiError = components['schemas']['JsonApiError']\nexport type SchemaJsonApiErrorDocument = components['schemas']['JsonApiErrorDocument']\nexport type SchemaTrackAttachment = components['schemas']['TrackAttachment']\nexport type SchemaTrackListItemAttributes = components['schemas']['TrackListItemAttributes']\nexport type SchemaArtistRelationship = components['schemas']['ArtistRelationship']\nexport type SchemaArtistsRelationship = components['schemas']['ArtistsRelationship']\nexport type SchemaTrackRelationships = components['schemas']['TrackRelationships']\nexport type SchemaTrackListItemResource = components['schemas']['TrackListItemResource']\nexport type SchemaJsonApiMetaWithPagingAndCursor =\n components['schemas']['JsonApiMetaWithPagingAndCursor']\nexport type SchemaOmitTypeClass = components['schemas']['OmitTypeClass']\nexport type SchemaIncludedArtistOutput = components['schemas']['IncludedArtistOutput']\nexport type SchemaGetTrackListOutput = components['schemas']['GetTrackListOutput']\nexport type SchemaTrackListItemAttributesForPlaylist =\n components['schemas']['TrackListItemAttributesForPlaylist']\nexport type SchemaTrackListItemResourceForPlaylist =\n components['schemas']['TrackListItemResourceForPlaylist']\nexport type SchemaJsonApiMeta = components['schemas']['JsonApiMeta']\nexport type SchemaGetTracksForPlaylistOutput = components['schemas']['GetTracksForPlaylistOutput']\nexport type SchemaArtistRef = components['schemas']['ArtistRef']\nexport type SchemaTrackDetailsAttributes = components['schemas']['TrackDetailsAttributes']\nexport type SchemaTrackDetailsResource = components['schemas']['TrackDetailsResource']\nexport type SchemaGetTrackDetailsOutput = components['schemas']['GetTrackDetailsOutput']\nexport type SchemaReactionOutput = components['schemas']['ReactionOutput']\nexport type SchemaGetPlaylistsRequestPayload = components['schemas']['GetPlaylistsRequestPayload']\nexport type SchemaJsonApiMetaWithPaging = components['schemas']['JsonApiMetaWithPaging']\nexport type SchemaGetPlaylistsOutput = components['schemas']['GetPlaylistsOutput']\nexport type SchemaReorderTracksRequestPayload = components['schemas']['ReorderTracksRequestPayload']\nexport type SchemaUpdateTrackRequestPayload = components['schemas']['UpdateTrackRequestPayload']\nexport type SchemaAddTrackToPlaylistRequestPayload =\n components['schemas']['AddTrackToPlaylistRequestPayload']\nexport type SchemaCreateArtistRequestPayload = components['schemas']['CreateArtistRequestPayload']\nexport type SchemaLoginRequestPayload = components['schemas']['LoginRequestPayload']\nexport type SchemaRefreshOutput = components['schemas']['RefreshOutput']\nexport type SchemaBadRequestException = components['schemas']['BadRequestException']\nexport type SchemaUnauthorizedException = components['schemas']['UnauthorizedException']\nexport type SchemaRefreshRequestPayload = components['schemas']['RefreshRequestPayload']\nexport type SchemaLogoutRequestPayload = components['schemas']['LogoutRequestPayload']\nexport type SchemaGetMeOutput = components['schemas']['GetMeOutput']\nexport type SchemaCreateTagRequestPayload = components['schemas']['CreateTagRequestPayload']\nexport type SchemaBinaryFile = components['schemas']['BinaryFile']\nexport type $defs = Record\nexport interface operations {\n PlaylistsController_getMyPlaylists: {\n parameters: {\n query?: never\n header?: never\n path?: never\n cookie?: never\n }\n requestBody?: never\n responses: {\n /** @description OK: List of playlists retrieved successfully */\n 200: {\n headers: {\n [name: string]: unknown\n }\n content: {\n 'application/json': components['schemas']['GetMyPlaylistsOutput']\n }\n }\n /** @description Unauthorized: User not authenticated */\n 401: {\n headers: {\n [name: string]: unknown\n }\n content?: never\n }\n }\n }\n PlaylistsPublicController_getPlaylists: {\n parameters: {\n query?: {\n /** @description Page number for pagination (starting from 1) */\n pageNumber?: number\n /** @description Page size for pagination (between 1 and 20) */\n pageSize?: number\n /** @description Search term for filtering playlists by name */\n search?: string\n /** @description Field by which to sort playlists */\n sortBy?: PathsPlaylistsGetParametersQuerySortBy\n /** @description Sort direction (ascending or descending) */\n sortDirection?: PathsPlaylistsGetParametersQuerySortDirection\n /** @description Filter by tag IDs. Multiple values allowed, e.g.: tagsIds=tag1&tagsIds=tag2 */\n tagsIds?: string[]\n /** @description Filter by user ID (playlist creator’s ID) */\n userId?: string\n /** @description Filter by track ID – only playlists containing this track will be returned */\n trackId?: string\n }\n header?: never\n path?: never\n cookie?: never\n }\n requestBody?: never\n responses: {\n /** @description OK: JSON:API list of playlists with pagination */\n 200: {\n headers: {\n [name: string]: unknown\n }\n content: {\n 'application/json': components['schemas']['GetPlaylistsOutput']\n }\n }\n }\n }\n PlaylistsController_createPlaylist: {\n parameters: {\n query?: never\n header?: never\n path?: never\n cookie?: never\n }\n requestBody: {\n content: {\n 'application/json': components['schemas']['CreatePlaylistRequestPayload']\n }\n }\n responses: {\n /** @description Created: Playlist created successfully */\n 201: {\n headers: {\n [name: string]: unknown\n }\n content: {\n 'application/json': components['schemas']['GetPlaylistOutput']\n }\n }\n /** @description Forbidden: Playlist creation limit exceeded */\n 403: {\n headers: {\n [name: string]: unknown\n }\n content?: never\n }\n }\n }\n PlaylistsPublicController_getPlaylistById: {\n parameters: {\n query?: never\n header?: never\n path: {\n /** @description ID of the playlist */\n playlistId: string\n }\n cookie?: never\n }\n requestBody?: never\n responses: {\n /** @description OK: Playlist retrieved successfully */\n 200: {\n headers: {\n [name: string]: unknown\n }\n content: {\n 'application/json': components['schemas']['GetPlaylistOutput']\n }\n }\n /** @description Not Found: Playlist with the given ID not found */\n 404: {\n headers: {\n [name: string]: unknown\n }\n content?: never\n }\n }\n }\n PlaylistsController_updatePlaylist: {\n parameters: {\n query?: never\n header?: never\n path: {\n playlistId: string\n }\n cookie?: never\n }\n requestBody: {\n content: {\n 'application/json': components['schemas']['UpdatePlaylistRequestPayload']\n }\n }\n responses: {\n /** @description No Content: Playlist updated successfully */\n 204: {\n headers: {\n [name: string]: unknown\n }\n content?: never\n }\n /** @description Bad Request: Validation error (e.g., tag limit exceeded) */\n 400: {\n headers: {\n [name: string]: unknown\n }\n content?: never\n }\n /** @description Forbidden: You do not have permission to update this playlist */\n 403: {\n headers: {\n [name: string]: unknown\n }\n content?: never\n }\n }\n }\n PlaylistsController_deletePlaylist: {\n parameters: {\n query?: never\n header?: never\n path: {\n playlistId: string\n }\n cookie?: never\n }\n requestBody?: never\n responses: {\n /** @description No Content: Playlist deleted successfully */\n 204: {\n headers: {\n [name: string]: unknown\n }\n content?: never\n }\n /** @description Forbidden: Insufficient permissions to delete this playlist */\n 403: {\n headers: {\n [name: string]: unknown\n }\n content?: never\n }\n /** @description Not Found: Playlist not found */\n 404: {\n headers: {\n [name: string]: unknown\n }\n content?: never\n }\n }\n }\n PlaylistsController_reorderPlaylist: {\n parameters: {\n query?: never\n header?: never\n path: {\n playlistId: string\n }\n cookie?: never\n }\n requestBody: {\n content: {\n 'application/json': components['schemas']['ReorderPlaylistsRequestPayload']\n }\n }\n responses: {\n /** @description No Content: Playlist order updated successfully */\n 204: {\n headers: {\n [name: string]: unknown\n }\n content?: never\n }\n /** @description Not Found: Playlist or putAfterItemId not found */\n 404: {\n headers: {\n [name: string]: unknown\n }\n content?: never\n }\n }\n }\n PlaylistsController_uploadMainImage: {\n parameters: {\n query?: never\n header?: never\n path: {\n playlistId: string\n }\n cookie?: never\n }\n requestBody: {\n content: {\n 'multipart/form-data': {\n /** @description Maximum size 1 MB; minimum height 500px; image must be square */\n file: components['schemas']['BinaryFile']\n }\n }\n }\n responses: {\n /** @description OK: Cover uploaded successfully */\n 200: {\n headers: {\n [name: string]: unknown\n }\n content: {\n 'application/json': components['schemas']['TrackImages']\n }\n }\n /** @description Bad Request: Invalid image format or dimensions */\n 400: {\n headers: {\n [name: string]: unknown\n }\n content?: never\n }\n /** @description Forbidden: No permission to upload cover for this playlist */\n 403: {\n headers: {\n [name: string]: unknown\n }\n content?: never\n }\n }\n }\n PlaylistsController_deleteTrackCover: {\n parameters: {\n query?: never\n header?: never\n path: {\n playlistId: string\n }\n cookie?: never\n }\n requestBody?: never\n responses: {\n /** @description No Content: Cover deleted successfully */\n 204: {\n headers: {\n [name: string]: unknown\n }\n content?: never\n }\n /** @description Forbidden: Removing another user’s playlist cover is not allowed */\n 403: {\n headers: {\n [name: string]: unknown\n }\n content?: never\n }\n /** @description Not Found: Playlist not found */\n 404: {\n headers: {\n [name: string]: unknown\n }\n content?: never\n }\n }\n }\n TracksPublicController_getAllTracks: {\n parameters: {\n query?: {\n /** @description Page number for pagination (starting from 1) */\n pageNumber?: number\n /** @description Page size for pagination (between 1 and 20) */\n pageSize?: number\n /** @description Search term for filtering playlists by name */\n search?: string\n /** @description Field by which to sort tracks */\n sortBy?: PathsPlaylistsTracksGetParametersQuerySortBy\n /** @description Sort direction (ascending or descending) */\n sortDirection?: PathsPlaylistsGetParametersQuerySortDirection\n /** @description Filter by tag IDs (multiple values allowed) */\n tagsIds?: string[]\n /** @description Filter by artist IDs (multiple values allowed) */\n artistsIds?: string[]\n /** @description Filter by user ID (track creator's ID) */\n userId?: string\n /** @description If true, include unpublished tracks (drafts) of current user if userId === currentUserId */\n includeDrafts?: boolean\n /** @description Pagination type: \"offset\" for page-number pagination; \"cursor\" for keyset/seek-based pagination. */\n paginationType?: PathsPlaylistsTracksGetParametersQueryPaginationType\n /** @description Base64-encoded cursor for keyset pagination. Used only if paginationType is \"cursor\". */\n cursor?: string | null\n }\n header?: never\n path?: never\n cookie?: never\n }\n requestBody?: never\n responses: {\n /** @description OK: Paginated list of tracks */\n 200: {\n headers: {\n [name: string]: unknown\n }\n content: {\n 'application/json': components['schemas']['GetTrackListOutput']\n }\n }\n /** @description Bad Request: invalid query parameters */\n 400: {\n headers: {\n [name: string]: unknown\n }\n content: {\n 'application/json': components['schemas']['JsonApiErrorDocument']\n }\n }\n }\n }\n TracksPublicController_getPlaylistTracks: {\n parameters: {\n query?: never\n header?: never\n path: {\n /** @description ID of the playlist to retrieve tracks for */\n playlistId: string\n }\n cookie?: never\n }\n requestBody?: never\n responses: {\n /** @description OK: List of tracks in the playlist */\n 200: {\n headers: {\n [name: string]: unknown\n }\n content: {\n 'application/json': components['schemas']['GetTracksForPlaylistOutput']\n }\n }\n /** @description Not Found: Playlist with the specified ID not found */\n 404: {\n headers: {\n [name: string]: unknown\n }\n content?: never\n }\n }\n }\n TracksPublicController_getTrackDetails: {\n parameters: {\n query?: never\n header?: never\n path: {\n /** @description ID of the track to retrieve details for */\n trackId: string\n }\n cookie?: never\n }\n requestBody?: never\n responses: {\n /** @description OK: Track details with attachments */\n 200: {\n headers: {\n [name: string]: unknown\n }\n content: {\n 'application/json': components['schemas']['GetTrackDetailsOutput']\n }\n }\n /** @description Not Found: Track with the specified ID not found */\n 404: {\n headers: {\n [name: string]: unknown\n }\n content?: never\n }\n }\n }\n TracksController_updateTrack: {\n parameters: {\n query?: never\n header?: never\n path: {\n trackId: string\n }\n cookie?: never\n }\n requestBody: {\n content: {\n 'application/json': components['schemas']['UpdateTrackRequestPayload']\n }\n }\n responses: {\n /** @description OK: Track updated successfully */\n 200: {\n headers: {\n [name: string]: unknown\n }\n content: {\n 'application/json': components['schemas']['GetTrackDetailsOutput']\n }\n }\n /** @description Bad Request: Tag or artist limit exceeded */\n 400: {\n headers: {\n [name: string]: unknown\n }\n content?: never\n }\n /** @description Forbidden: Editing another user’s track is not allowed */\n 403: {\n headers: {\n [name: string]: unknown\n }\n content?: never\n }\n /** @description Not Found: Track or playlist not found */\n 404: {\n headers: {\n [name: string]: unknown\n }\n content?: never\n }\n }\n }\n TracksController_deleteTrackCompletely: {\n parameters: {\n query?: never\n header?: never\n path: {\n trackId: string\n }\n cookie?: never\n }\n requestBody?: never\n responses: {\n /** @description No Content: Track permanently deleted */\n 204: {\n headers: {\n [name: string]: unknown\n }\n content?: never\n }\n /** @description Forbidden: Deleting another user’s track is not allowed */\n 403: {\n headers: {\n [name: string]: unknown\n }\n content?: never\n }\n /** @description Not Found: Track not found */\n 404: {\n headers: {\n [name: string]: unknown\n }\n content?: never\n }\n }\n }\n TracksPublicController_likeTrack: {\n parameters: {\n query?: never\n header?: never\n path: {\n trackId: string\n }\n cookie?: never\n }\n requestBody?: never\n responses: {\n /** @description Created: User reaction recorded and counters updated */\n 201: {\n headers: {\n [name: string]: unknown\n }\n content: {\n 'application/json': components['schemas']['ReactionOutput']\n }\n }\n /** @description Bad Request: Invalid track ID */\n 400: {\n headers: {\n [name: string]: unknown\n }\n content?: never\n }\n /** @description Unauthorized: User not authenticated */\n 401: {\n headers: {\n [name: string]: unknown\n }\n content?: never\n }\n /** @description Not Found: Track not found */\n 404: {\n headers: {\n [name: string]: unknown\n }\n content?: never\n }\n }\n }\n TracksPublicController_dislikeTrack: {\n parameters: {\n query?: never\n header?: never\n path: {\n trackId: string\n }\n cookie?: never\n }\n requestBody?: never\n responses: {\n /** @description Created: User reaction recorded and counters updated */\n 201: {\n headers: {\n [name: string]: unknown\n }\n content: {\n 'application/json': components['schemas']['ReactionOutput']\n }\n }\n /** @description Bad Request: Invalid track ID */\n 400: {\n headers: {\n [name: string]: unknown\n }\n content?: never\n }\n /** @description Unauthorized: User not authenticated */\n 401: {\n headers: {\n [name: string]: unknown\n }\n content?: never\n }\n /** @description Not Found: Track not found */\n 404: {\n headers: {\n [name: string]: unknown\n }\n content?: never\n }\n }\n }\n TracksPublicController_removeTrackReaction: {\n parameters: {\n query?: never\n header?: never\n path: {\n trackId: string\n }\n cookie?: never\n }\n requestBody?: never\n responses: {\n /** @description OK: Reaction removed successfully */\n 200: {\n headers: {\n [name: string]: unknown\n }\n content: {\n 'application/json': components['schemas']['ReactionOutput']\n }\n }\n /** @description Unauthorized: User not authenticated */\n 401: {\n headers: {\n [name: string]: unknown\n }\n content?: never\n }\n }\n }\n PlaylistsPublicController_likePlaylist: {\n parameters: {\n query?: never\n header?: never\n path: {\n playlistId: string\n }\n cookie?: never\n }\n requestBody?: never\n responses: {\n /** @description Created: Like recorded successfully */\n 201: {\n headers: {\n [name: string]: unknown\n }\n content: {\n 'application/json': components['schemas']['ReactionOutput']\n }\n }\n /** @description Bad Request: Invalid playlist ID */\n 400: {\n headers: {\n [name: string]: unknown\n }\n content?: never\n }\n /** @description Unauthorized */\n 401: {\n headers: {\n [name: string]: unknown\n }\n content?: never\n }\n /** @description Not Found: Playlist not found */\n 404: {\n headers: {\n [name: string]: unknown\n }\n content?: never\n }\n }\n }\n PlaylistsPublicController_dislikePlaylist: {\n parameters: {\n query?: never\n header?: never\n path: {\n playlistId: string\n }\n cookie?: never\n }\n requestBody?: never\n responses: {\n /** @description Created: Dislike recorded successfully */\n 201: {\n headers: {\n [name: string]: unknown\n }\n content: {\n 'application/json': components['schemas']['ReactionOutput']\n }\n }\n /** @description Bad Request: Invalid playlist ID */\n 400: {\n headers: {\n [name: string]: unknown\n }\n content?: never\n }\n /** @description Unauthorized */\n 401: {\n headers: {\n [name: string]: unknown\n }\n content?: never\n }\n /** @description Not Found: Playlist not found */\n 404: {\n headers: {\n [name: string]: unknown\n }\n content?: never\n }\n }\n }\n PlaylistsPublicController_removePlaylistReaction: {\n parameters: {\n query?: never\n header?: never\n path: {\n playlistId: string\n }\n cookie?: never\n }\n requestBody?: never\n responses: {\n /** @description OK: Reaction removed successfully */\n 200: {\n headers: {\n [name: string]: unknown\n }\n content: {\n 'application/json': components['schemas']['ReactionOutput']\n }\n }\n /** @description Unauthorized */\n 401: {\n headers: {\n [name: string]: unknown\n }\n content?: never\n }\n /** @description Not Found: Playlist not found */\n 404: {\n headers: {\n [name: string]: unknown\n }\n content?: never\n }\n }\n }\n TracksController_reorderTrack: {\n parameters: {\n query?: never\n header?: never\n path: {\n playlistId: string\n trackId: string\n }\n cookie?: never\n }\n requestBody: {\n content: {\n 'application/json': components['schemas']['ReorderTracksRequestPayload']\n }\n }\n responses: {\n /** @description OK: Track order updated successfully */\n 200: {\n headers: {\n [name: string]: unknown\n }\n content?: never\n }\n /** @description Bad Request: Cannot place a track after itself */\n 400: {\n headers: {\n [name: string]: unknown\n }\n content?: never\n }\n /** @description Forbidden: No access to the playlist */\n 403: {\n headers: {\n [name: string]: unknown\n }\n content?: never\n }\n /** @description Not Found: Track or putAfterItemId not found */\n 404: {\n headers: {\n [name: string]: unknown\n }\n content?: never\n }\n }\n }\n TracksController_addTrackToPlaylist: {\n parameters: {\n query?: never\n header?: never\n path: {\n playlistId: string\n }\n cookie?: never\n }\n requestBody: {\n content: {\n 'application/json': components['schemas']['AddTrackToPlaylistRequestPayload']\n }\n }\n responses: {\n /** @description No Content: Track added to the playlist successfully */\n 204: {\n headers: {\n [name: string]: unknown\n }\n content?: never\n }\n /** @description Forbidden: No access to the playlist or track limit exceeded (max 10 tracks) */\n 403: {\n headers: {\n [name: string]: unknown\n }\n content?: never\n }\n /** @description Not Found: Playlist not found */\n 404: {\n headers: {\n [name: string]: unknown\n }\n content?: never\n }\n }\n }\n TracksController_unbindTrackFromPlaylist: {\n parameters: {\n query?: never\n header?: never\n path: {\n playlistId: string\n trackId: string\n }\n cookie?: never\n }\n requestBody?: never\n responses: {\n /** @description No Content: Track removed from the playlist */\n 204: {\n headers: {\n [name: string]: unknown\n }\n content?: never\n }\n /** @description Forbidden: No access to the playlist */\n 403: {\n headers: {\n [name: string]: unknown\n }\n content?: never\n }\n /** @description Not Found: Playlist not found */\n 404: {\n headers: {\n [name: string]: unknown\n }\n content?: never\n }\n }\n }\n TracksController_publishTrack: {\n parameters: {\n query?: never\n header?: never\n path: {\n trackId: string\n }\n cookie?: never\n }\n requestBody?: never\n responses: {\n /** @description No Content: Track published successfully */\n 204: {\n headers: {\n [name: string]: unknown\n }\n content?: never\n }\n /** @description Forbidden: Publishing another user’s track is not allowed */\n 403: {\n headers: {\n [name: string]: unknown\n }\n content?: never\n }\n /** @description Not Found: Track with the specified ID not found */\n 404: {\n headers: {\n [name: string]: unknown\n }\n content?: never\n }\n /** @description Conflict: Track is already published */\n 409: {\n headers: {\n [name: string]: unknown\n }\n content?: never\n }\n }\n }\n TracksController_uploadTrackCover: {\n parameters: {\n query?: never\n header?: never\n path: {\n /** @description ID of the track for which the cover is being uploaded */\n trackId: string\n }\n cookie?: never\n }\n /** @description Image file:
    \n * • Field name — cover
    \n * • Allowed MIME types — image/jpeg, image/png, image/gif
    \n * • Maximum size — 100 KB */\n requestBody: {\n content: {\n 'multipart/form-data': {\n /** Format: binary */\n cover: string\n }\n }\n }\n responses: {\n /** @description OK: Cover uploaded successfully */\n 200: {\n headers: {\n [name: string]: unknown\n }\n content: {\n 'application/json': components['schemas']['TrackImages']\n }\n }\n /** @description Bad Request: Invalid file or size exceeded */\n 400: {\n headers: {\n [name: string]: unknown\n }\n content?: never\n }\n /** @description Forbidden: Cannot upload a cover for another user’s track */\n 403: {\n headers: {\n [name: string]: unknown\n }\n content?: never\n }\n /** @description Not Found: Track not found */\n 404: {\n headers: {\n [name: string]: unknown\n }\n content?: never\n }\n }\n }\n TracksController_deleteTrackCover: {\n parameters: {\n query?: never\n header?: never\n path: {\n trackId: string\n }\n cookie?: never\n }\n requestBody?: never\n responses: {\n /** @description No Content: Cover deleted successfully */\n 204: {\n headers: {\n [name: string]: unknown\n }\n content?: never\n }\n /** @description Forbidden: Removing another user's track cover is not allowed */\n 403: {\n headers: {\n [name: string]: unknown\n }\n content?: never\n }\n /** @description Not Found: Track not found */\n 404: {\n headers: {\n [name: string]: unknown\n }\n content?: never\n }\n }\n }\n TracksController_uploadTrackMp3: {\n parameters: {\n query?: never\n header?: never\n path?: never\n cookie?: never\n }\n requestBody: {\n content: {\n 'multipart/form-data': {\n /** @example My cool track */\n title: string\n /** Format: binary */\n file: string\n }\n }\n }\n responses: {\n /** @description OK: Track created successfully */\n 200: {\n headers: {\n [name: string]: unknown\n }\n content: {\n 'application/json': components['schemas']['GetTrackDetailsOutput']\n }\n }\n /** @description Bad Request: Invalid file format or file size exceeded */\n 400: {\n headers: {\n [name: string]: unknown\n }\n content?: never\n }\n /** @description Internal Server Error: Error saving file or track */\n 500: {\n headers: {\n [name: string]: unknown\n }\n content?: never\n }\n }\n }\n ArtistsController_createArtist: {\n parameters: {\n query?: never\n header?: never\n path?: never\n cookie?: never\n }\n requestBody: {\n content: {\n 'application/json': components['schemas']['CreateArtistRequestPayload']\n }\n }\n responses: {\n /** @description Created: Artist created successfully */\n 201: {\n headers: {\n [name: string]: unknown\n }\n content: {\n 'application/json': components['schemas']['ArtistRef']\n }\n }\n /** @description Bad Request: Validation error or invalid input */\n 400: {\n headers: {\n [name: string]: unknown\n }\n content?: never\n }\n /** @description Unauthorized: User not authenticated */\n 401: {\n headers: {\n [name: string]: unknown\n }\n content?: never\n }\n /** @description Forbidden: Limit of 100 artists per user reached */\n 403: {\n headers: {\n [name: string]: unknown\n }\n content?: never\n }\n /** @description Conflict: Artist with the given name already exists */\n 409: {\n headers: {\n [name: string]: unknown\n }\n content?: never\n }\n }\n }\n ArtistsController_searchArtist: {\n parameters: {\n query: {\n search: string\n }\n header?: never\n path?: never\n cookie?: never\n }\n requestBody?: never\n responses: {\n /** @description OK: List of artists matching the search */\n 200: {\n headers: {\n [name: string]: unknown\n }\n content: {\n 'application/json': components['schemas']['ArtistRef'][]\n }\n }\n }\n }\n ArtistsController_deleteArtist: {\n parameters: {\n query?: never\n header?: never\n path: {\n id: string\n }\n cookie?: never\n }\n requestBody?: never\n responses: {\n /** @description No Content: Artist deleted successfully */\n 204: {\n headers: {\n [name: string]: unknown\n }\n content?: never\n }\n /** @description Forbidden: Artist is attached to tracks or was created by another user */\n 403: {\n headers: {\n [name: string]: unknown\n }\n content?: never\n }\n /** @description Not Found: Artist with the specified ID not found */\n 404: {\n headers: {\n [name: string]: unknown\n }\n content?: never\n }\n }\n }\n AuthController_OauthRedirect: {\n parameters: {\n query: {\n /** @description The callback URL to redirect after grand access,\n * https://oauth.apihub.it-incubator.io/realms/apihub/protocol/openid-connect/auth?client_id=musicfun&response_type=code&redirect_uri=http://localhost:3000/oauth2/callback&scope=openid */\n callbackUrl: string\n }\n header?: never\n path?: never\n cookie?: never\n }\n requestBody?: never\n responses: {\n /** @description OK: Redirect executed successfully */\n 200: {\n headers: {\n [name: string]: unknown\n }\n content?: never\n }\n }\n }\n AuthController_login: {\n parameters: {\n query?: never\n header?: never\n path?: never\n cookie?: never\n }\n requestBody: {\n content: {\n 'application/json': components['schemas']['LoginRequestPayload']\n }\n }\n responses: {\n /** @description OK: Token pair retrieved successfully */\n 200: {\n headers: {\n [name: string]: unknown\n }\n content: {\n 'application/json': components['schemas']['RefreshOutput']\n }\n }\n /** @description Bad Request: Invalid request format or required parameters are missing */\n 400: {\n headers: {\n [name: string]: unknown\n }\n content: {\n 'application/json': components['schemas']['BadRequestException']\n }\n }\n /** @description Unauthorized: Code is invalid, expired, missing, or redirectUri does not match */\n 401: {\n headers: {\n [name: string]: unknown\n }\n content: {\n 'application/json': components['schemas']['UnauthorizedException']\n }\n }\n }\n }\n AuthController_refresh: {\n parameters: {\n query?: never\n header?: never\n path?: never\n cookie?: never\n }\n requestBody: {\n content: {\n 'application/json': components['schemas']['RefreshRequestPayload']\n }\n }\n responses: {\n /** @description OK: Token pair refreshed successfully */\n 200: {\n headers: {\n [name: string]: unknown\n }\n content: {\n 'application/json': components['schemas']['RefreshOutput']\n }\n }\n /** @description Unauthorized: Refresh token is invalid, expired, or missing */\n 401: {\n headers: {\n [name: string]: unknown\n }\n content: {\n 'application/json': components['schemas']['UnauthorizedException']\n }\n }\n }\n }\n AuthController_logout: {\n parameters: {\n query?: never\n header?: never\n path?: never\n cookie?: never\n }\n requestBody: {\n content: {\n 'application/json': components['schemas']['LogoutRequestPayload']\n }\n }\n responses: {\n /** @description No Content: Refresh token deactivated; access token remains valid. */\n 204: {\n headers: {\n [name: string]: unknown\n }\n content?: never\n }\n }\n }\n AuthController_getMe: {\n parameters: {\n query?: never\n header?: never\n path?: never\n cookie?: never\n }\n requestBody?: never\n responses: {\n /** @description OK: Successfully retrieved user information */\n 200: {\n headers: {\n [name: string]: unknown\n }\n content: {\n 'application/json': components['schemas']['GetMeOutput']\n }\n }\n /** @description Unauthorized: access token is missing or invalid */\n 401: {\n headers: {\n [name: string]: unknown\n }\n content?: never\n }\n }\n }\n TagsController_createTag: {\n parameters: {\n query?: never\n header?: never\n path?: never\n cookie?: never\n }\n requestBody: {\n content: {\n 'application/json': components['schemas']['CreateTagRequestPayload']\n }\n }\n responses: {\n /** @description Created: Tag created successfully */\n 201: {\n headers: {\n [name: string]: unknown\n }\n content: {\n 'application/json': components['schemas']['TagRef']\n }\n }\n /** @description Bad Request: Validation error */\n 400: {\n headers: {\n [name: string]: unknown\n }\n content?: never\n }\n /** @description Unauthorized: User not authenticated */\n 401: {\n headers: {\n [name: string]: unknown\n }\n content?: never\n }\n /** @description Forbidden: Limit of 100 tags per user reached */\n 403: {\n headers: {\n [name: string]: unknown\n }\n content?: never\n }\n /** @description Conflict: Tag with the given name already exists */\n 409: {\n headers: {\n [name: string]: unknown\n }\n content?: never\n }\n }\n }\n TagsController_searchTags: {\n parameters: {\n query: {\n /** @description Substring to search tags by (using normalized name) */\n search: string\n }\n header?: never\n path?: never\n cookie?: never\n }\n requestBody?: never\n responses: {\n /** @description OK: List of matching tags */\n 200: {\n headers: {\n [name: string]: unknown\n }\n content: {\n 'application/json': components['schemas']['TagRef'][]\n }\n }\n /** @description Bad Request: Invalid search query */\n 400: {\n headers: {\n [name: string]: unknown\n }\n content?: never\n }\n }\n }\n TagsController_deleteTag: {\n parameters: {\n query?: never\n header?: never\n path: {\n /** @description ID of the tag to delete */\n id: string\n }\n cookie?: never\n }\n requestBody?: never\n responses: {\n /** @description No Content: Tag deleted successfully */\n 204: {\n headers: {\n [name: string]: unknown\n }\n content?: never\n }\n /** @description Unauthorized: User not authenticated */\n 401: {\n headers: {\n [name: string]: unknown\n }\n content?: never\n }\n /** @description Forbidden: Tag was created by another user or is attached to tracks or playlists */\n 403: {\n headers: {\n [name: string]: unknown\n }\n content?: never\n }\n /** @description Not Found: Tag with the specified ID not found */\n 404: {\n headers: {\n [name: string]: unknown\n }\n content?: never\n }\n }\n }\n}\nexport enum PathsPlaylistsGetParametersQuerySortBy {\n addedAt = 'addedAt',\n likesCount = 'likesCount',\n}\nexport enum PathsPlaylistsGetParametersQuerySortDirection {\n asc = 'asc',\n desc = 'desc',\n}\nexport enum PathsPlaylistsTracksGetParametersQuerySortBy {\n publishedAt = 'publishedAt',\n likesCount = 'likesCount',\n}\nexport enum PathsPlaylistsTracksGetParametersQueryPaginationType {\n offset = 'offset',\n cursor = 'cursor',\n}\nexport enum ImageSizeType {\n original = 'original',\n thumbnail = 'thumbnail',\n medium = 'medium',\n}\nexport enum ReactionValue {\n Value0 = 0,\n Value1 = 1,\n ValueMinus1 = -1,\n}\n" }, { "path": "apps/react-effector-fsd/src/shared/api/utils/json-api-error.ts", "content": "export interface JsonApiError {\n status: string\n code?: string | number\n title?: string\n detail?: string\n source?: { pointer?: string; parameter?: string }\n meta?: Record\n}\n\nexport interface JsonApiErrorDocument {\n errors: JsonApiError[]\n meta?: Record\n}\n\nexport type ExtractError = T extends { error?: infer E } ? E : unknown\n\n/* --- типы ошибок, совпадающие с фильтром -------------------------------- */\nexport interface JsonApiError {\n status: string\n code?: string | number\n title?: string\n detail?: string\n source?: { pointer?: string; parameter?: string }\n meta?: Record\n}\n\nexport interface JsonApiErrorDocument {\n errors: JsonApiError[]\n meta?: Record\n}\n\nexport function isJsonApiErrorDocument(error: unknown): error is JsonApiErrorDocument {\n return (\n typeof error === 'object' &&\n error !== null &&\n // @ts-expect-error type no matter\n Array.isArray(error.errors)\n )\n}\n\nexport function parseJsonApiErrors(errorDoc: JsonApiErrorDocument): {\n fieldErrors: Record\n globalErrors: string[]\n} {\n const fieldErrors: Record = {}\n const globalErrors: string[] = []\n\n for (const err of errorDoc.errors) {\n const msg = err.detail ?? err.title ?? 'Unknown error'\n const ptr = err.source?.pointer\n if (ptr) {\n // убираем префикс JSON:API\n const field = ptr.replace(/^\\/data\\/attributes\\//, '')\n fieldErrors[field] = msg\n } else {\n globalErrors.push(msg)\n }\n }\n\n return { fieldErrors, globalErrors }\n}\n" }, { "path": "apps/react-effector-fsd/src/shared/api/utils/request-wrapper.ts", "content": "// types/api.ts\n\nimport { type ExtractError } from './json-api-error.ts'\n\n//-----------------------------------------------------------------------------\n// utils/requestWrapper.ts\n//-----------------------------------------------------------------------------\n// «Умный» обёртчик: Infers Data и Error из P,\n// возвращает Promise, а в случае ошибки — throw Error\nexport type ExtractData = T extends { data?: infer D } ? NonNullable : never\n\nexport async function requestWrapper

    >(\n promise: P\n): Promise>> {\n const res = (await promise) as Awaited

    \n if ((res as { error?: unknown }).error) {\n // здесь E = ExtractError>\n throw (res as { error: ExtractError> }).error\n }\n return (res as { data: ExtractData> }).data\n}\n" }, { "path": "apps/react-effector-fsd/src/shared/components/AudioPlayer/AudioPlayer.module.css", "content": ".player {\n display: flex;\n gap: 16px;\n align-items: center;\n justify-content: space-between;\n\n width: 100%;\n min-height: 64px;\n\n background: var(--color-bg-primary);\n}\n\n.trackInfo {\n display: flex;\n gap: 12px;\n align-items: center;\n min-width: 200px;\n}\n\n.cover {\n width: 112px;\n height: 112px;\n border-radius: 4px;\n background: var(--color-bg-card);\n}\n\n.cover img {\n width: 100%;\n height: 100%;\n object-fit: cover;\n}\n\n.info {\n display: flex;\n flex-direction: column;\n gap: 2px;\n}\n\n.playerControls {\n display: flex;\n flex: 1;\n flex-direction: column;\n gap: 8px;\n align-items: center;\n}\n\n.controls {\n display: flex;\n gap: 16px;\n align-items: center;\n}\n\n.playPauseButton {\n width: 48px;\n height: 48px;\n}\n\n.active {\n color: var(--color-accent);\n}\n\n.iconButton.active:hover,\n.iconButton.active:focus {\n color: var(--color-accent);\n}\n\n.progressBar {\n display: flex;\n gap: 8px;\n align-items: center;\n\n width: 100%;\n max-width: 632px;\n}\n\n.time {\n min-width: 36px;\n font-size: var(--font-size-xs);\n color: var(--color-text-secondary);\n text-align: center;\n}\n\n.progress {\n cursor: pointer;\n\n height: 5px;\n border: none;\n border-radius: 4px;\n\n accent-color: var(--color-text-primary);\n}\n\n.trackProgress {\n width: 100%;\n max-width: 550px;\n}\n\n.volumeColumn {\n display: flex;\n align-items: center;\n justify-content: flex-end;\n\n min-width: 160px;\n padding-right: 32px;\n}\n\n.volumeProgress {\n width: 119px;\n}\n" }, { "path": "apps/react-effector-fsd/src/shared/components/AudioPlayer/AudioPlayer.stories.tsx", "content": "import type { Meta } from '@storybook/react-vite'\nimport { useState } from 'react'\n\nimport { AudioPlayer } from './AudioPlayer.tsx'\n\nconst meta = {\n title: 'Components/Player',\n component: AudioPlayer,\n parameters: {},\n args: {},\n} satisfies Meta\n\nexport default meta\n\nconst demoTrack = {\n src: 'https://cdn.uppbeat.io/audio-files/c636d7c86452449b1203fc0bded83e29/4358717fc9da477a52fb18a6cbd3afcc/d154b5ce5ff1a05ae8115a3c678062e8/STREAMING-dreamland-matrika-main-version-31140-02-25.mp3',\n cover: 'https://unsplash.it/112/112',\n title: 'Play It Safe',\n artist: 'Julia Wolf',\n}\n\nexport const Basic = {\n render: () => {\n const [isPlaying, setIsPlaying] = useState(false)\n const [isShuffle, setIsShuffle] = useState(false)\n const [isRepeat, setIsRepeat] = useState(false)\n\n const [track] = useState(demoTrack)\n return (\n {}}\n onPrevious={() => {}}\n isShuffle={isShuffle}\n isRepeat={isRepeat}\n onShuffle={() => setIsShuffle(!isShuffle)}\n onRepeat={() => setIsRepeat(!isRepeat)}\n />\n )\n },\n}\n" }, { "path": "apps/react-effector-fsd/src/shared/components/AudioPlayer/AudioPlayer.tsx", "content": "import { clsx } from 'clsx'\nimport { type ComponentProps, useRef, useState } from 'react'\n\nimport {\n PauseIcon,\n PlayIcon,\n RepeatIcon,\n ShuffleIcon,\n SkipNextIcon,\n SkipPreviousIcon,\n VolumeIcon,\n VolumeMuteIcon,\n} from '@/shared/icons'\n\nimport { IconButton } from '../IconButton'\nimport { Typography } from '../Typography'\nimport s from './AudioPlayer.module.css'\n\nexport type PlayerProps = {\n src: string\n cover: string\n title: string\n artist: string\n isPlaying: boolean\n setIsPlaying: (isPlaying: boolean) => void\n onNext: () => void\n onPrevious: () => void\n isShuffle: boolean\n isRepeat: boolean\n onShuffle: () => void\n onRepeat: () => void\n} & ComponentProps<'div'>\n\nexport const AudioPlayer = ({\n src,\n cover,\n title,\n artist,\n isPlaying,\n setIsPlaying,\n onNext,\n onPrevious,\n isShuffle,\n isRepeat,\n onShuffle,\n onRepeat,\n className,\n ...props\n}: PlayerProps) => {\n const audioRef = useRef(null)\n const [currentTime, setCurrentTime] = useState(0)\n const [volume, setVolume] = useState(1)\n const [duration, setDuration] = useState(0)\n\n const handlePlayPause = () => {\n const audio = audioRef.current\n if (!audio) return\n\n if (isPlaying) {\n audio.pause()\n } else {\n audio.play().catch((e) => {\n console.error('Audio play error:', e)\n })\n }\n\n setIsPlaying(!isPlaying)\n }\n\n const handleChangeTime = (e: React.ChangeEvent) => {\n const time = Number(e.target.value)\n setCurrentTime(time)\n if (audioRef.current) {\n audioRef.current.currentTime = time\n }\n }\n\n const handleVolume = (e: React.ChangeEvent) => {\n const newVolume = Number(e.target.value)\n setVolume(newVolume)\n if (audioRef.current) {\n audioRef.current.volume = newVolume\n }\n }\n\n const handleVolumeMute = () => {\n const newVolume = volume > 0 ? 0 : 1\n setVolume(newVolume)\n if (audioRef.current) {\n audioRef.current.volume = newVolume\n }\n }\n\n return (\n

    \n setCurrentTime(e.currentTarget.currentTime)}\n onLoadedMetadata={(e) => setDuration(e.currentTarget.duration)}\n />\n\n
    \n
    \n \"cover\"\n
    \n
    \n \n {title}\n \n \n {artist}\n \n
    \n
    \n\n
    \n
    \n \n \n \n \n \n \n \n {isPlaying ? : }\n \n \n \n \n \n \n \n
    \n\n
    \n {format(currentTime)}\n \n {format(duration)}\n
    \n
    \n\n
    \n \n {volume > 0 ? : }\n \n \n
    \n
    \n )\n}\n\nconst format = (sec: number) => {\n const m = Math.floor(sec / 60)\n const s = Math.floor(sec % 60)\n return `${m}:${s.toString().padStart(2, '0')}`\n}\n" }, { "path": "apps/react-effector-fsd/src/shared/components/AudioPlayer/index.ts", "content": "export * from './AudioPlayer.tsx'\n" }, { "path": "apps/react-effector-fsd/src/shared/components/Autocomplete/Autocomplete.module.css", "content": ".container {\n position: relative;\n display: flex;\n flex-direction: column;\n width: 100%;\n}\n\n.label {\n font-size: var(--font-size-s);\n line-height: 1.7;\n color: var(--color-text-label);\n}\n\n.labelError {\n color: var(--color-text-error);\n}\n\n.inputWrapper {\n position: relative;\n\n display: flex;\n flex-wrap: wrap;\n gap: 6px;\n align-items: center;\n\n min-height: 48px;\n padding: 4px 8px;\n border: 1px solid var(--color-border-input-primary);\n border-radius: 4px;\n\n background-color: var(--color-bg-primary);\n\n transition: all 200ms ease;\n}\n\n.inputWrapper:hover:not(.disabled) {\n background-color: var(--color-bg-input-hover);\n}\n\n.inputWrapper.focused {\n border-color: var(--color-border-input-active);\n background-color: var(--color-bg-primary);\n}\n\n.inputWrapper.error {\n border-color: var(--color-text-error);\n}\n\n.inputWrapper.disabled {\n cursor: not-allowed;\n background-color: var(--color-disabled);\n}\n\n.tag {\n display: flex;\n gap: 4px;\n align-items: center;\n\n padding: 2px 6px;\n border: 1px solid var(--color-border-base);\n border-radius: 16px;\n\n background-color: var(--color-bg-secondary);\n\n transition: all 200ms ease;\n}\n\n.tag:hover {\n background-color: var(--color-bg-input-hover);\n}\n\n.tagText {\n font-size: var(--font-size-s);\n font-weight: 500;\n color: var(--color-text-primary);\n white-space: nowrap;\n}\n\n.deleteButton {\n width: 16px;\n height: 16px;\n padding: 0;\n\n font-size: 10px;\n color: var(--color-text-secondary);\n\n background: transparent;\n\n transition: all 200ms ease;\n}\n\n.deleteButton:hover {\n color: var(--color-text-error);\n background-color: transparent;\n}\n\n.inputContainer {\n position: relative;\n\n display: flex;\n flex: 1;\n align-items: center;\n\n min-width: 120px;\n}\n\n.searchIcon {\n pointer-events: none;\n\n position: absolute;\n z-index: 1;\n left: 4px;\n\n width: 16px;\n height: 16px;\n\n color: var(--color-text-secondary);\n\n transition: color 200ms ease;\n}\n\n.input {\n width: 100%;\n padding: 4px 8px 4px 24px;\n border: none;\n\n font-size: var(--font-size-m);\n color: var(--color-text-primary);\n\n background: transparent;\n outline: none;\n\n transition: all 200ms ease;\n}\n\n.input::placeholder {\n color: var(--color-text-secondary);\n}\n\n.input:disabled {\n cursor: not-allowed;\n color: var(--color-disabled);\n}\n\n.dropdownIcon {\n cursor: pointer;\n\n width: 20px;\n height: 20px;\n margin-left: 4px;\n\n color: var(--color-text-secondary);\n\n transition: transform 200ms ease;\n}\n\n.dropdownIcon:hover {\n color: var(--color-text-primary);\n}\n\n.dropdownIconOpen {\n transform: rotate(180deg);\n}\n\n.dropdown {\n position: absolute;\n z-index: 50;\n top: 100%;\n left: 0;\n\n overflow-y: auto;\n\n width: 100%;\n max-height: 200px;\n margin-top: 4px;\n padding: 4px;\n border: 1px solid var(--color-border-base);\n border-radius: 4px;\n\n background-color: var(--color-bg-primary);\n box-shadow:\n 0 10px 38px -10px rgb(22 23 24 / 35%),\n 0 10px 20px -15px rgb(22 23 24 / 20%);\n\n animation: dropdown-show 200ms ease-out;\n}\n\n.option {\n cursor: pointer;\n\n display: flex;\n align-items: center;\n\n padding: 8px 12px;\n border-radius: 4px;\n\n transition: all 200ms ease;\n}\n\n.option:hover:not(.optionDisabled) {\n background-color: var(--color-bg-input-hover);\n}\n\n.optionFocused:not(.optionDisabled) {\n color: var(--color-bg-primary);\n background-color: var(--color-accent);\n}\n\n.optionDisabled {\n cursor: not-allowed;\n opacity: 0.5;\n}\n\n.noResults {\n padding: 12px;\n text-align: center;\n}\n\n.noResultsText {\n color: var(--color-text-secondary);\n}\n\n.errorMessage {\n margin-top: 4px;\n font-size: var(--font-size-s);\n color: var(--color-text-error);\n}\n\n.counter {\n margin-top: 4px;\n color: var(--color-text-secondary);\n}\n\n/* Animations */\n@keyframes dropdown-show {\n from {\n transform: translateY(-4px);\n opacity: 0;\n }\n\n to {\n transform: translateY(0);\n opacity: 1;\n }\n}\n" }, { "path": "apps/react-effector-fsd/src/shared/components/Autocomplete/Autocomplete.stories.tsx", "content": "import type { Meta, StoryObj } from '@storybook/react-vite'\nimport { useState } from 'react'\n\nimport { Button } from '../Button'\nimport { Card } from '../Card'\nimport { Dialog, DialogContent, DialogFooter, DialogHeader } from '../Dialog'\nimport { Typography } from '../Typography'\nimport { Autocomplete, type AutocompleteOption } from './Autocomplete'\n\nconst meta = {\n title: 'Components/Autocomplete',\n component: Autocomplete,\n parameters: {\n layout: 'centered',\n },\n args: {},\n} satisfies Meta\n\nexport default meta\ntype Story = StoryObj\n\n// Sample data\nconst programmingLanguages: AutocompleteOption[] = [\n { value: 'javascript', label: 'JavaScript' },\n { value: 'typescript', label: 'TypeScript' },\n { value: 'python', label: 'Python' },\n { value: 'java', label: 'Java' },\n { value: 'cpp', label: 'C++' },\n { value: 'csharp', label: 'C#' },\n { value: 'php', label: 'PHP' },\n { value: 'ruby', label: 'Ruby' },\n { value: 'go', label: 'Go' },\n { value: 'rust', label: 'Rust' },\n { value: 'kotlin', label: 'Kotlin' },\n { value: 'swift', label: 'Swift' },\n]\n\nconst musicGenres: AutocompleteOption[] = [\n { value: 'rock', label: 'Rock' },\n { value: 'pop', label: 'Pop' },\n { value: 'jazz', label: 'Jazz' },\n { value: 'classical', label: 'Classical' },\n { value: 'electronic', label: 'Electronic' },\n { value: 'hiphop', label: 'Hip Hop' },\n { value: 'country', label: 'Country' },\n { value: 'blues', label: 'Blues' },\n { value: 'reggae', label: 'Reggae' },\n { value: 'folk', label: 'Folk' },\n { value: 'metal', label: 'Metal' },\n { value: 'indie', label: 'Indie' },\n]\n\nconst skills: AutocompleteOption[] = [\n { value: 'frontend', label: 'Frontend Development' },\n { value: 'backend', label: 'Backend Development' },\n { value: 'fullstack', label: 'Full Stack Development' },\n { value: 'mobile', label: 'Mobile Development' },\n { value: 'devops', label: 'DevOps' },\n { value: 'testing', label: 'Testing & QA' },\n { value: 'design', label: 'UI/UX Design' },\n { value: 'pm', label: 'Project Management', disabled: true },\n { value: 'data', label: 'Data Science' },\n { value: 'ml', label: 'Machine Learning' },\n]\n\nexport const Basic = {\n render: () => {\n const [selectedValues, setSelectedValues] = useState([])\n\n return (\n
    \n \n
    \n )\n },\n}\n\nexport const WithMaxTags = {\n render: () => {\n const [selectedValues, setSelectedValues] = useState([])\n\n return (\n
    \n \n
    \n )\n },\n}\n\nexport const WithPreselected = {\n render: () => {\n const [selectedValues, setSelectedValues] = useState(['javascript', 'typescript'])\n\n return (\n
    \n \n
    \n )\n },\n}\n\nexport const WithDisabledOptions = {\n render: () => {\n const [selectedValues, setSelectedValues] = useState([])\n\n return (\n
    \n \n
    \n )\n },\n}\n\nexport const Disabled = {\n render: () => {\n const [selectedValues, setSelectedValues] = useState(['rock', 'jazz'])\n\n return (\n
    \n \n
    \n )\n },\n}\n\nexport const WithError = {\n render: () => {\n const [selectedValues, setSelectedValues] = useState([])\n\n return (\n
    \n \n
    \n )\n },\n}\n\nexport const Interactive = {\n render: () => {\n const [frontendSkills, setFrontendSkills] = useState(['javascript'])\n const [backendSkills, setBackendSkills] = useState([])\n const [genres, setGenres] = useState([])\n\n const frontendOptions: AutocompleteOption[] = [\n { value: 'html', label: 'HTML' },\n { value: 'css', label: 'CSS' },\n { value: 'javascript', label: 'JavaScript' },\n { value: 'typescript', label: 'TypeScript' },\n { value: 'react', label: 'React' },\n { value: 'vue', label: 'Vue.js' },\n { value: 'angular', label: 'Angular' },\n { value: 'svelte', label: 'Svelte' },\n ]\n\n const backendOptions: AutocompleteOption[] = [\n { value: 'nodejs', label: 'Node.js' },\n { value: 'python', label: 'Python' },\n { value: 'java', label: 'Java' },\n { value: 'csharp', label: 'C#' },\n { value: 'php', label: 'PHP' },\n { value: 'ruby', label: 'Ruby' },\n { value: 'go', label: 'Go' },\n { value: 'rust', label: 'Rust' },\n ]\n\n return (\n \n
    \n \n Developer Profile Setup\n \n
    \n\n \n\n \n\n \n\n \n \n Profile Summary\n \n\n
    \n \n Frontend:{' '}\n {frontendSkills.length > 0 ? frontendSkills.join(', ') : 'None'}\n \n \n Backend:{' '}\n {backendSkills.length > 0 ? backendSkills.join(', ') : 'None'}\n \n \n Music: {genres.length > 0 ? genres.join(', ') : 'None'}\n \n
    \n     \n \n )\n },\n}\n\nexport const AllStates = {\n render: () => {\n const [state1, setState1] = useState([])\n const [state2, setState2] = useState(['rock', 'jazz'])\n const [state3, setState3] = useState([])\n const [state4, setState4] = useState(['javascript'])\n\n return (\n \n
    \n \n Empty State\n \n \n
    \n\n
    \n \n With Selected Values\n \n \n
    \n\n
    \n \n With Error\n \n \n
    \n\n
    \n \n Disabled State\n \n \n
    \n \n )\n },\n}\n\nexport const InDialog = {\n render: () => {\n const [isOpen, setIsOpen] = useState(false)\n const [selectedSkills, setSelectedSkills] = useState([])\n const [selectedGenres, setSelectedGenres] = useState(['rock'])\n\n const handleSubmit = () => {\n console.log('Selected skills:', selectedSkills)\n console.log('Selected genres:', selectedGenres)\n setIsOpen(false)\n }\n\n const handleReset = () => {\n setSelectedSkills([])\n setSelectedGenres([])\n }\n\n return (\n <>\n \n\n setIsOpen(false)}>\n \n Edit Your Profile\n \n Update your skills and music preferences\n \n \n\n \n \n \n\n \n \n \n\n \n \n \n \n \n \n \n )\n },\n}\n" }, { "path": "apps/react-effector-fsd/src/shared/components/Autocomplete/Autocomplete.tsx", "content": "import { clsx } from 'clsx'\nimport {\n type ComponentProps,\n type KeyboardEvent,\n type ReactNode,\n useEffect,\n useRef,\n useState,\n} from 'react'\n\nimport { useGetId } from '@/shared/hooks'\nimport { ArrowDownIcon, DeleteIcon } from '@/shared/icons'\n\nimport { IconButton } from '../IconButton'\nimport { Typography } from '../Typography'\nimport s from './Autocomplete.module.css'\n\nexport type AutocompleteOption = {\n value: string\n label: string\n disabled?: boolean\n}\n\nexport type AutocompleteProps = {\n label?: ReactNode\n placeholder?: string\n options: AutocompleteOption[]\n value: string[]\n onChange: (value: string[]) => void\n disabled?: boolean\n maxTags?: number\n errorMessage?: string\n className?: string\n} & Omit, 'onChange'>\n\nexport const Autocomplete = ({\n label,\n placeholder = 'Search and select...',\n options,\n value,\n onChange,\n disabled = false,\n maxTags,\n errorMessage,\n className,\n ...props\n}: AutocompleteProps) => {\n const [isOpen, setIsOpen] = useState(false)\n const [searchTerm, setSearchTerm] = useState('')\n const [focusedIndex, setFocusedIndex] = useState(-1)\n\n // For detecting clicks outside component to close dropdown\n const containerRef = useRef(null)\n // For programmatic focus management (Escape key, focus after selection)\n const inputRef = useRef(null)\n\n const id = useGetId(props.id)\n\n const filteredOptions = options.filter(\n (option) =>\n option.label.toLowerCase().includes(searchTerm.toLowerCase()) && !value.includes(option.value)\n )\n\n const isMaxTagsReached = maxTags ? value.length >= maxTags : false\n const showError = Boolean(errorMessage)\n\n // Close dropdown on outside click\n useEffect(() => {\n if (!isOpen) return\n\n const handleClickOutside = (e: MouseEvent) => {\n if (containerRef.current && !containerRef.current.contains(e.target as Node)) {\n setIsOpen(false)\n setFocusedIndex(-1)\n }\n }\n\n document.addEventListener('mousedown', handleClickOutside)\n return () => document.removeEventListener('mousedown', handleClickOutside)\n }, [isOpen])\n\n // Handle keyboard navigation\n const handleKeyDown = (e: KeyboardEvent) => {\n if (disabled) return\n\n switch (e.key) {\n case 'ArrowDown':\n e.preventDefault()\n if (!isOpen) {\n setIsOpen(true)\n setFocusedIndex(0)\n } else {\n setFocusedIndex((prev) => (prev < filteredOptions.length - 1 ? prev + 1 : prev))\n }\n break\n\n case 'ArrowUp':\n e.preventDefault()\n setFocusedIndex((prev) => (prev > 0 ? prev - 1 : 0))\n break\n\n case 'Enter':\n e.preventDefault()\n if (isOpen && focusedIndex >= 0 && filteredOptions[focusedIndex]) {\n selectOption(filteredOptions[focusedIndex])\n }\n break\n\n case 'Escape':\n e.preventDefault()\n setIsOpen(false)\n setFocusedIndex(-1)\n inputRef.current?.blur()\n break\n\n case 'Backspace':\n if (!searchTerm && value.length > 0) {\n removeTag(value[value.length - 1])\n }\n break\n }\n }\n\n const selectOption = (option: AutocompleteOption) => {\n if (option.disabled || isMaxTagsReached) return\n\n onChange([...value, option.value])\n setSearchTerm('')\n setFocusedIndex(-1)\n inputRef.current?.focus()\n }\n\n const removeTag = (tagValue: string) => {\n onChange(value.filter((v) => v !== tagValue))\n }\n\n const handleInputFocus = () => {\n if (!disabled) {\n setIsOpen(true)\n }\n }\n\n const handleInputChange = (e: React.ChangeEvent) => {\n setSearchTerm(e.target.value)\n setIsOpen(true)\n setFocusedIndex(-1)\n }\n\n const selectedOptions = options.filter((option) => value.includes(option.value))\n\n return (\n
    \n {label && (\n \n {label}\n \n )}\n\n \n {/* Selected tags */}\n {selectedOptions.map((option) => (\n
    \n \n {option.label}\n \n {!disabled && (\n removeTag(option.value)}\n className={s.deleteButton}\n aria-label={`Remove ${option.label}`}\n type=\"button\"\n tabIndex={-1}>\n \n \n )}\n
    \n ))}\n\n {/* Search input */}\n
    \n \n
    \n\n {/* Dropdown arrow */}\n !disabled && setIsOpen(!isOpen)}\n />\n
    \n\n {/* Dropdown */}\n {isOpen && !disabled && (\n
    \n {filteredOptions.length > 0 ? (\n filteredOptions.map((option, index) => (\n !option.disabled && selectOption(option)}\n onMouseEnter={() => setFocusedIndex(index)}>\n {option.label}\n
    \n ))\n ) : (\n
    \n \n {searchTerm ? 'No options found' : 'All options selected'}\n \n
    \n )}\n \n )}\n\n {/* Error message */}\n {showError && (\n \n {errorMessage}\n \n )}\n\n {/* Tags counter */}\n {maxTags && (\n \n {value.length}/{maxTags} selected\n \n )}\n \n )\n}\n" }, { "path": "apps/react-effector-fsd/src/shared/components/Autocomplete/index.ts", "content": "export * from './Autocomplete'\n" }, { "path": "apps/react-effector-fsd/src/shared/components/Button/Button.module.css", "content": ".button {\n cursor: pointer;\n\n display: inline-flex;\n gap: 4px;\n align-items: center;\n justify-content: center;\n\n height: 40px;\n padding: 8px 16px;\n border-radius: 45px;\n\n font-size: var(--font-size-s);\n font-weight: 600;\n color: var(--color-text-primary);\n\n transition: opacity 200ms;\n}\n\n.button:focus-visible {\n outline: 2px solid var(--color-outline-focus);\n outline-offset: 2px;\n}\n\n.button:disabled {\n cursor: initial;\n background-color: var(--color-disabled);\n}\n\n.button:hover:not(:disabled),\n.button:focus:not(:disabled) {\n opacity: 0.8;\n}\n\n.primary {\n background-color: var(--color-accent);\n}\n\n.secondary {\n background-color: var(--color-bg-interactive-secondary);\n}\n\n.fullWidth {\n width: 100%;\n}\n" }, { "path": "apps/react-effector-fsd/src/shared/components/Button/Button.stories.tsx", "content": "import type { Meta, StoryObj } from '@storybook/react-vite'\n\nimport { Button } from './Button'\n\nconst meta = {\n title: 'Components/Button',\n component: Button,\n parameters: {\n layout: 'centered',\n },\n args: {},\n} satisfies Meta\n\nexport default meta\ntype Story = StoryObj\n\nexport const AllButtons: Story = {\n render: () => (\n \n \n \n \n \n \n \n ),\n}\n" }, { "path": "apps/react-effector-fsd/src/shared/components/Button/Button.tsx", "content": "import { clsx } from 'clsx'\nimport type { ComponentProps, ElementType } from 'react'\n\nimport s from './Button.module.css'\n\nexport type ButtonVariant = 'primary' | 'secondary'\n\nexport type ButtonProps = {\n as?: T\n fullWidth?: boolean\n variant?: ButtonVariant\n} & ComponentProps\n\nexport const Button = ({\n as: Component = 'button',\n children,\n className,\n fullWidth = false,\n variant = 'primary',\n ...props\n}: ButtonProps) => {\n const classNames = clsx(s.button, s[variant], fullWidth && s.fullWidth, className)\n\n return (\n \n {children}\n \n )\n}\n" }, { "path": "apps/react-effector-fsd/src/shared/components/Button/index.ts", "content": "export * from './Button'\n" }, { "path": "apps/react-effector-fsd/src/shared/components/Card/Card.module.css", "content": ".card {\n display: flex;\n flex-direction: column;\n padding: 8px;\n background: var(--color-bg-card);\n}\n" }, { "path": "apps/react-effector-fsd/src/shared/components/Card/Card.stories.tsx", "content": "import type { Meta, StoryObj } from '@storybook/react-vite'\n\nimport { Typography } from '../Typography'\nimport { Card } from './Card'\n\nconst meta = {\n title: 'Components/Card',\n component: Card,\n parameters: {\n layout: 'centered',\n },\n args: {},\n} satisfies Meta\n\nexport default meta\n\ntype Story = StoryObj\n\nexport const Basic: Story = {\n render: () => (\n \n Chill Mix\n \n Julia Wolf, Khalid, ayokay and more\n \n \n ),\n}\n\nexport const AsSection: Story = {\n render: () => (\n \n Card as section\n You can use any tag via 'as' prop\n \n ),\n}\n" }, { "path": "apps/react-effector-fsd/src/shared/components/Card/Card.tsx", "content": "import { clsx } from 'clsx'\nimport type { ComponentProps, ElementType, ReactNode } from 'react'\n\nimport s from './Card.module.css'\n\nexport type CardProps = {\n as?: T\n className?: string\n children?: ReactNode\n} & ComponentProps\n\nexport const Card = ({\n as: Component = 'div',\n className,\n children,\n ...props\n}: CardProps) => {\n return (\n \n {children}\n \n )\n}\n" }, { "path": "apps/react-effector-fsd/src/shared/components/Card/index.ts", "content": "export * from './Card'\n" }, { "path": "apps/react-effector-fsd/src/shared/components/Dialog/Dialog.module.css", "content": ".backdrop {\n position: fixed;\n z-index: 1;\n inset: 0;\n\n display: flex;\n align-items: center;\n justify-content: center;\n\n background-color: rgb(0 0 0 / 50%);\n\n animation: fade-in 200ms ease-out;\n}\n\n.dialog {\n overflow: hidden;\n display: flex;\n flex-direction: column;\n\n max-width: 745px;\n max-height: 90vh;\n border-radius: 4px;\n\n background-color: var(--color-bg-secondary);\n\n animation: slide-in 200ms ease-out;\n}\n\n.header {\n display: flex;\n gap: 16px;\n align-items: center;\n justify-content: space-between;\n\n padding: 18px 24px;\n}\n\n.closeButton {\n cursor: pointer;\n\n display: flex;\n align-items: center;\n justify-content: center;\n\n width: 32px;\n height: 32px;\n border-radius: 50%;\n\n font-size: 16px;\n color: var(--color-text-secondary);\n\n background: transparent;\n\n transition: all 200ms ease;\n}\n\n.closeButton:hover {\n color: var(--color-text-primary);\n background-color: var(--color-bg-input-hover);\n}\n\n.content {\n overflow-y: auto;\n flex: 1;\n padding: 20px 24px;\n}\n\n.footer {\n display: flex;\n gap: 12px;\n align-items: center;\n justify-content: space-between;\n\n margin-bottom: 8px;\n padding: 18px 24px;\n}\n\n/* Animations */\n@keyframes fade-in {\n from {\n opacity: 0;\n }\n\n to {\n opacity: 1;\n }\n}\n\n@keyframes slide-in {\n from {\n transform: translateY(-500px);\n opacity: 0;\n }\n\n to {\n transform: translateY(0);\n opacity: 1;\n }\n}\n\n/* Responsive */\n@media (width <= 768px) {\n .dialog {\n max-width: 95vw;\n margin: 20px;\n }\n\n .header,\n .content,\n .footer {\n padding-right: 16px;\n padding-left: 16px;\n }\n}\n" }, { "path": "apps/react-effector-fsd/src/shared/components/Dialog/Dialog.stories.tsx", "content": "import type { Meta } from '@storybook/react-vite'\nimport { useState } from 'react'\n\nimport { Button } from '../Button'\nimport { TextField } from '../TextField'\nimport { Typography } from '../Typography'\nimport { Dialog, DialogContent, DialogFooter, DialogHeader } from './index'\n\nconst meta = {\n title: 'Components/Dialog',\n component: Dialog,\n parameters: {\n layout: 'centered',\n },\n} satisfies Meta\n\nexport default meta\n\nexport const BasicDialog = {\n render: () => {\n const [open, setOpen] = useState(false)\n\n return (\n <>\n \n\n setOpen(false)}>\n \n Dialog Title\n \n\n \n \n This is dialog content. Here can be any content - text, forms, images and much more.\n \n \n\n \n \n \n \n \n \n )\n },\n}\n\nexport const FormDialog = {\n render: () => {\n const [open, setOpen] = useState(false)\n\n return (\n <>\n \n\n setOpen(false)}>\n \n Sign in to Spotifun\n \n\n \n \n \n \n \n \n\n \n \n \n \n \n \n )\n },\n}\n\nexport const WithoutCloseButton = {\n render: () => {\n const [open, setOpen] = useState(false)\n\n return (\n <>\n \n\n setOpen(false)}>\n \n Millions of songs.\n \n Free on Musicfun.\n \n \n\n \n
    \n \n 😊\n
    \n \n     \n\n \n \n \n \n \n \n     \n \n )\n },\n}\n\nexport const LongContent = {\n render: () => {\n const [open, setOpen] = useState(false)\n\n return (\n <>\n \n\n setOpen(false)}>\n \n Long Content\n \n\n \n
    \n {Array.from({ length: 20 }, (_, i) => (\n \n This is paragraph number {i + 1}. Lorem ipsum dolor sit amet, consectetur\n adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna\n aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.\n \n ))}\n
    \n     \n\n \n \n \n     \n \n )\n },\n}\n" }, { "path": "apps/react-effector-fsd/src/shared/components/Dialog/Dialog.tsx", "content": "import { clsx } from 'clsx'\nimport { createContext, type ReactNode, use, useEffect } from 'react'\nimport { createPortal } from 'react-dom'\n\nimport { IconButton } from '../IconButton'\nimport s from './Dialog.module.css'\n\ntype DialogContextType = {\n onClose?: () => void\n}\n\nconst DialogContext = createContext(null)\n\nconst useDialogContext = () => {\n const context = use(DialogContext)\n if (!context) {\n throw new Error('Dialog compound components must be used within Dialog component')\n }\n return context\n}\n\nexport type DialogProps = {\n children: ReactNode\n open: boolean\n onClose?: () => void\n className?: string\n}\n\nexport const Dialog = ({ children, open, onClose, className }: DialogProps) => {\n const handleBackdropClick = (e: React.MouseEvent) => {\n if (e.target === e.currentTarget) {\n onClose?.()\n }\n }\n\n // Add global keydown handler for ESC key\n useEffect(() => {\n if (!open) return\n\n const handleKeyDown = (e: KeyboardEvent) => {\n if (e.key === 'Escape') {\n onClose?.()\n }\n }\n\n document.addEventListener('keydown', handleKeyDown)\n\n return () => {\n document.removeEventListener('keydown', handleKeyDown)\n }\n }, [open, onClose])\n\n if (!open) return null\n\n const dialogContent = (\n
    \n
    \n {children}\n
    \n
    \n )\n\n return createPortal(dialogContent, document.body)\n}\n\n/*\n * DialogHeader\n */\n\nexport type DialogHeaderProps = {\n children?: ReactNode\n className?: string\n showCloseButton?: boolean\n}\n\nexport const DialogHeader = ({\n children,\n className,\n showCloseButton = true,\n}: DialogHeaderProps) => {\n const { onClose } = useDialogContext()\n\n return (\n
    \n
    {children}
    \n {showCloseButton && (\n \n ✕\n \n )}\n
    \n )\n}\n\n/*\n * DialogContent\n */\n\nexport type DialogContentProps = {\n children: ReactNode\n className?: string\n}\n\nexport const DialogContent = ({ children, className }: DialogContentProps) => {\n return
    {children}
    \n}\n\n/*\n * DialogFooter\n */\n\nexport type DialogFooterProps = {\n children: ReactNode\n className?: string\n}\n\nexport const DialogFooter = ({ children, className }: DialogFooterProps) => {\n return
    {children}
    \n}\n" }, { "path": "apps/react-effector-fsd/src/shared/components/Dialog/index.ts", "content": "export * from './Dialog'\n" }, { "path": "apps/react-effector-fsd/src/shared/components/DropdownMenu/DropdownMenu.module.css", "content": ".container {\n position: relative;\n display: inline-block;\n}\n\n.trigger {\n cursor: pointer;\n\n display: flex;\n align-items: center;\n justify-content: center;\n\n width: 32px;\n height: 32px;\n border-radius: 50%;\n\n font-size: var(--font-size-s);\n color: var(--color-text-secondary);\n\n background: transparent;\n\n transition: all 200ms ease;\n}\n\n.trigger:disabled {\n cursor: default;\n opacity: 0.5;\n}\n\n.trigger:enabled:hover,\n.trigger:enabled:focus-visible {\n color: var(--color-text-primary);\n background-color: var(--color-bg-input-hover);\n}\n\n.content {\n position: fixed;\n z-index: 50;\n\n min-width: 160px;\n padding: 4px;\n border-radius: 8px;\n\n background-color: var(--color-bg-primary);\n box-shadow:\n 0 10px 38px -10px rgb(22 23 24 / 35%),\n 0 10px 20px -15px rgb(22 23 24 / 20%);\n}\n\n.content.align-start {\n transform-origin: top left;\n}\n\n.content.align-center {\n transform-origin: top center;\n transform: translateX(-50%);\n}\n\n.content.align-end {\n transform-origin: top right;\n transform: translateX(-100%);\n}\n\n.content.side-top {\n transform-origin: bottom;\n}\n\n.content.side-top.align-center {\n transform: translateX(-50%) translateY(-100%);\n}\n\n.content.side-top.align-end {\n transform: translateX(-100%) translateY(-100%);\n}\n\n.content.side-top.align-start {\n transform: translateY(-100%);\n}\n\n.item {\n cursor: pointer;\n\n display: flex;\n gap: 8px;\n align-items: center;\n\n width: 100%;\n padding: 8px 12px;\n border: none;\n border-radius: 4px;\n\n font-size: var(--font-size-m);\n color: var(--color-text-primary);\n text-align: left;\n\n background: transparent;\n\n transition: all 200ms ease;\n}\n\n.item:focus-visible {\n background-color: var(--color-accent);\n outline: none;\n}\n\n.item:hover:not(:disabled) {\n background-color: var(--color-accent);\n}\n\n.itemDisabled {\n cursor: not-allowed;\n color: var(--color-text-secondary);\n opacity: 0.5;\n}\n\n.itemDisabled:hover {\n background: transparent;\n}\n\n.separator {\n height: 1px;\n margin: 4px 0;\n background-color: var(--color-border-base);\n}\n\n/* Animations */\n@keyframes dropdown-menu-show {\n from {\n transform: scale(0.95);\n opacity: 0;\n }\n\n to {\n transform: scale(1);\n opacity: 1;\n }\n}\n" }, { "path": "apps/react-effector-fsd/src/shared/components/DropdownMenu/DropdownMenu.stories.tsx", "content": "import type { Meta, StoryObj } from '@storybook/react-vite'\n\nimport { CreateIcon, MoreIcon, PlusIcon } from '@/shared/icons'\n\nimport { IconButton } from '../IconButton'\nimport { Typography } from '../Typography'\nimport {\n DropdownMenu,\n DropdownMenuContent,\n DropdownMenuItem,\n DropdownMenuSeparator,\n DropdownMenuTrigger,\n} from './DropdownMenu'\n\nconst meta: Meta = {\n title: 'Components/DropdownMenu',\n component: DropdownMenu,\n parameters: {\n layout: 'centered',\n },\n}\n\nexport default meta\ntype Story = StoryObj\n\nexport const BasicDropdownMenu: Story = {\n render: () => (\n \n \n \n \n\n \n alert('Edit clicked!')}>Edit\n alert('Add to playlist clicked!')}>\n Add to playlist\n \n alert('Show text song clicked!')}>\n Show text song\n \n \n \n ),\n}\n\nexport const WithIcons: Story = {\n args: {},\n render: () => (\n \n \n \n \n\n \n alert('Edit')}>\n \n Edit\n \n alert('Add to playlist')}>\n \n Add to playlist\n \n \n alert('Show text song')}>Show text song\n \n \n ),\n}\n\nexport const WithDisabledItem: Story = {\n args: {},\n render: () => (\n \n \n \n \n\n \n alert('Edit')}>Edit\n Add to playlist (disabled)\n alert('Show text song')}>Show text song\n \n \n ),\n}\n\nexport const CustomTrigger: Story = {\n args: {},\n render: () => (\n \n \n \n \n \n \n\n \n alert('Action 1')}>Action 1\n alert('Action 2')}>Action 2\n alert('Action 3')}>Action 3\n \n \n ),\n}\n\nexport const DifferentAlignments: Story = {\n args: {},\n render: () => (\n \n
    \n \n Align Start\n \n \n \n \n \n\n \n Edit\n Add to playlist\n Show text song\n \n \n
    \n\n
    \n \n Align Center\n \n \n \n \n \n\n \n Edit\n Add to playlist\n Show text song\n \n \n
    \n\n
    \n \n Align End (default)\n \n \n \n \n \n\n \n Edit\n Add to playlist\n Show text song\n \n \n
    \n \n ),\n}\n\nexport const WithLinks: Story = {\n args: {},\n render: () => (\n \n \n \n \n\n \n alert('Edit clicked')}>\n \n Edit\n \n console.log('Link clicked')}>\n \n Visit Website\n \n \n alert('Show text song')}>Show text song\n \n \n ),\n}\n\nexport const Interactive: Story = {\n args: {},\n render: () => (\n \n Click the menu buttons to test functionality\n\n
    \n \n \n \n \n\n \n console.log('Edit clicked')}>\n \n Edit track\n \n console.log('Add to playlist clicked')}>\n \n Add to playlist\n \n \n console.log('External link clicked')}>\n Show lyrics online\n \n console.log('Download clicked')}>\n Download\n \n \n Share (coming soon)\n \n \n\n \n \n \n \n \n \n\n \n console.log('Edit playlist')}>\n Edit playlist\n \n console.log('Share playlist')}>\n Share playlist\n \n console.log('Delete playlist')}>\n Delete playlist\n \n \n \n
    \n\n Open browser console to see click events\n \n ),\n}\n" }, { "path": "apps/react-effector-fsd/src/shared/components/DropdownMenu/DropdownMenu.tsx", "content": "import { clsx } from 'clsx'\nimport {\n type ComponentProps,\n createContext,\n type ElementType,\n type ReactNode,\n use,\n useEffect,\n useRef,\n useState,\n} from 'react'\nimport { createPortal } from 'react-dom'\n\nimport s from './DropdownMenu.module.css'\n\ntype DropdownMenuContextType = {\n isOpen: boolean\n onClose: () => void\n onToggle: () => void\n triggerRef: React.RefObject\n}\n\nconst DropdownMenuContext = createContext(null)\n\nconst useDropdownMenuContext = () => {\n const context = use(DropdownMenuContext)\n if (!context) {\n throw new Error('DropdownMenu compound components must be used within DropdownMenu component')\n }\n return context\n}\n\n/*\n * DropdownMenu\n */\n\nexport type DropdownMenuProps = {\n children: ReactNode\n className?: string\n}\n\nexport const DropdownMenu = ({ children, className }: DropdownMenuProps) => {\n const [isOpen, setIsOpen] = useState(false)\n const triggerRef = useRef(null)\n\n const onClose = () => setIsOpen(false)\n const onToggle = () => setIsOpen(!isOpen)\n\n useBlockScroll({ isOpen, triggerRef })\n\n // Close on escape key\n useEffect(() => {\n if (!isOpen) return\n\n const handleKeyDown = (e: KeyboardEvent) => {\n if (e.key === 'Escape') {\n onClose()\n }\n }\n\n document.addEventListener('keydown', handleKeyDown)\n return () => document.removeEventListener('keydown', handleKeyDown)\n }, [isOpen])\n\n // Close on click outside\n useEffect(() => {\n if (!isOpen) return\n\n const handleClickOutside = (e: MouseEvent) => {\n const target = e.target as Element\n if (\n triggerRef.current &&\n !triggerRef.current.contains(target) &&\n !target.closest('[data-dropdown-content]')\n ) {\n onClose()\n }\n }\n\n document.addEventListener('mousedown', handleClickOutside)\n return () => document.removeEventListener('mousedown', handleClickOutside)\n }, [isOpen])\n\n const contextValue = {\n isOpen,\n onClose,\n onToggle,\n triggerRef,\n }\n\n return (\n
    \n {children}\n
    \n )\n}\n\n/*\n * DropdownMenuTrigger\n */\n\nexport type DropdownMenuTriggerProps = {\n children: ReactNode\n className?: string\n asChild?: boolean\n}\n\nexport const DropdownMenuTrigger = ({\n children,\n className,\n asChild = false,\n}: DropdownMenuTriggerProps) => {\n const { onToggle, triggerRef } = useDropdownMenuContext()\n\n if (asChild) {\n return (\n }\n onClick={onToggle}\n className={className}>\n {children}\n \n )\n }\n\n return (\n }\n type=\"button\"\n onClick={onToggle}\n className={clsx(s.trigger, className)}>\n {children}\n \n )\n}\n\n/*\n * DropdownMenuContent\n */\n\nexport type DropdownMenuContentProps = {\n children: ReactNode\n className?: string\n align?: 'start' | 'center' | 'end'\n side?: 'top' | 'bottom' | 'left' | 'right'\n}\n\nexport const DropdownMenuContent = ({\n children,\n className,\n align = 'end',\n side = 'bottom',\n}: DropdownMenuContentProps) => {\n const { isOpen, triggerRef } = useDropdownMenuContext()\n const [position, setPosition] = useState({ top: 0, left: 0 })\n\n // it's needed to prevent flickering\n const [isPositioned, setIsPositioned] = useState(false)\n\n useEffect(() => {\n if (!isOpen || !triggerRef.current) {\n setIsPositioned(false)\n return\n }\n\n const triggerRect = triggerRef.current.getBoundingClientRect()\n const scrollTop = window.pageYOffset || document.documentElement.scrollTop\n const scrollLeft = window.pageXOffset || document.documentElement.scrollLeft\n\n let top = 0\n let left = 0\n\n // Calculate position based on side\n switch (side) {\n case 'bottom':\n top = triggerRect.bottom + scrollTop + 4\n break\n case 'top':\n top = triggerRect.top + scrollTop - 4\n break\n case 'right':\n left = triggerRect.right + scrollLeft + 4\n top = triggerRect.top + scrollTop\n break\n case 'left':\n left = triggerRect.left + scrollLeft - 4\n top = triggerRect.top + scrollTop\n break\n }\n\n // Calculate position based on align\n if (side === 'bottom' || side === 'top') {\n switch (align) {\n case 'start':\n left = triggerRect.left + scrollLeft\n break\n case 'center':\n left = triggerRect.left + scrollLeft + triggerRect.width / 2\n break\n case 'end':\n left = triggerRect.right + scrollLeft\n break\n }\n }\n\n setPosition({ top, left })\n setIsPositioned(true)\n }, [isOpen, align, side])\n\n if (!isOpen || !isPositioned) return null\n\n const content = (\n \n {children}\n \n )\n\n return createPortal(content, document.body)\n}\n\n/*\n * DropdownMenuItem\n */\n\nexport type DropdownMenuItemProps = {\n as?: T\n children: ReactNode\n onClick?: () => void\n className?: string\n disabled?: boolean\n} & ComponentProps\n\nexport const DropdownMenuItem = ({\n as: Component = 'button',\n children,\n onClick,\n className,\n disabled = false,\n ...props\n}: DropdownMenuItemProps) => {\n const { onClose } = useDropdownMenuContext()\n\n const handleClick = () => {\n if (disabled) return\n onClick?.()\n onClose()\n }\n\n const isButton = Component === 'button'\n\n return (\n \n {children}\n \n )\n}\n\n/*\n * DropdownMenuSeparator\n */\n\nexport type DropdownMenuSeparatorProps = {\n className?: string\n}\n\nexport const DropdownMenuSeparator = ({ className }: DropdownMenuSeparatorProps) => {\n return
    \n}\n\n/**\n * Block scroll when menu is open.\n */\nconst useBlockScroll = ({\n isOpen,\n triggerRef,\n}: {\n isOpen: boolean\n triggerRef: React.RefObject\n}) => {\n // Block scroll when menu is open\n useEffect(() => {\n if (!isOpen || !triggerRef.current) return\n\n const originalScrollElements: Array<{ element: Element; overflow: string }> = []\n\n // Find all scrollable parent elements\n const findScrollableParents = (element: Element) => {\n const scrollableElements: Element[] = []\n let parent = element.parentElement\n\n while (parent && parent !== document.body) {\n const style = window.getComputedStyle(parent)\n const hasVerticalScroll =\n style.overflowY === 'auto' ||\n style.overflowY === 'scroll' ||\n style.overflow === 'auto' ||\n style.overflow === 'scroll'\n\n if (hasVerticalScroll && parent.scrollHeight > parent.clientHeight) {\n scrollableElements.push(parent)\n }\n parent = parent.parentElement\n }\n\n return scrollableElements\n }\n\n // Block scroll on body\n const bodyOverflow = document.body.style.overflow\n document.body.style.overflow = 'hidden'\n originalScrollElements.push({ element: document.body, overflow: bodyOverflow })\n\n // Block scroll on scrollable parents\n const scrollableParents = findScrollableParents(triggerRef.current)\n scrollableParents.forEach((element) => {\n const originalOverflow = (element as HTMLElement).style.overflow\n ;(element as HTMLElement).style.overflow = 'hidden'\n originalScrollElements.push({ element, overflow: originalOverflow })\n })\n\n return () => {\n // Restore original overflow values\n originalScrollElements.forEach(({ element, overflow }) => {\n ;(element as HTMLElement).style.overflow = overflow\n })\n }\n }, [isOpen])\n}\n" }, { "path": "apps/react-effector-fsd/src/shared/components/DropdownMenu/index.ts", "content": "export * from './DropdownMenu'\n" }, { "path": "apps/react-effector-fsd/src/shared/components/Hashtag/Tag.module.css", "content": ".hashtag {\n cursor: pointer;\n\n display: inline-flex;\n align-items: center;\n justify-content: center;\n\n min-width: 73px;\n padding: 8px 12px;\n border: 1px solid var(--color-border-base);\n border-radius: 45px;\n\n font-size: var(--font-size-xxxs);\n font-weight: 500;\n color: var(--color-text-primary);\n text-decoration: none;\n\n background-color: var(--color-bg-primary);\n\n transition: all 200ms ease;\n}\n\n.hashtag:focus-visible {\n outline: 2px solid var(--color-outline-focus);\n outline-offset: 2px;\n}\n\n.hashtag:hover:not(:disabled) {\n background-color: var(--color-bg-input-hover);\n}\n\n.active {\n color: var(--color-bg-primary);\n background-color: var(--color-text-primary);\n}\n\n.active:hover:not(:disabled) {\n color: var(--color-bg-primary);\n opacity: 0.9;\n background-color: var(--color-text-primary);\n}\n" }, { "path": "apps/react-effector-fsd/src/shared/components/Hashtag/Tag.stories.tsx", "content": "import type { Meta, StoryObj } from '@storybook/react-vite'\n\nimport { Tag } from './Tag.tsx'\n\nconst meta = {\n title: 'Components/Hashtag',\n component: Tag,\n parameters: {\n layout: 'centered',\n },\n args: {\n tag: 'Playlists',\n },\n} satisfies Meta\n\nexport default meta\ntype Story = StoryObj\n\nexport const Default: Story = {}\n\nexport const Active: Story = {\n args: {\n active: true,\n },\n}\n\nexport const AsLink: Story = {\n args: {\n as: 'a',\n href: 'https://www.google.com',\n target: '_blank',\n },\n}\n\nexport const AllHashtags: Story = {\n render: () => (\n
    \n \n \n \n \n Podcasts & shows\n \n
    \n ),\n}\n" }, { "path": "apps/react-effector-fsd/src/shared/components/Hashtag/Tag.tsx", "content": "import { clsx } from 'clsx'\nimport type { ComponentProps, ElementType } from 'react'\n\nimport s from './Tag.module.css'\n\nexport type HashtagProps = {\n as?: T\n active?: boolean\n tag: string\n className?: string\n} & ComponentProps\n\nexport const Tag = ({\n as: Component = 'button',\n active = false,\n tag,\n className,\n ...props\n}: HashtagProps) => {\n const classNames = clsx(s.hashtag, active && s.active, className)\n\n return (\n \n #{tag}\n \n )\n}\n" }, { "path": "apps/react-effector-fsd/src/shared/components/Hashtag/index.ts", "content": "export * from './Tag.tsx'\n" }, { "path": "apps/react-effector-fsd/src/shared/components/IconButton/IconButton.module.css", "content": ".button {\n cursor: pointer;\n\n display: flex;\n align-items: center;\n justify-content: center;\n\n width: 32px;\n height: 32px;\n border-radius: 50%;\n\n font-size: var(--font-size-s);\n color: var(--color-text-secondary);\n\n background: transparent;\n\n transition: all 200ms ease;\n}\n\n.button:disabled {\n cursor: default;\n opacity: 0.5;\n}\n\n.button:enabled:hover,\n.button:enabled:focus-visible {\n color: var(--color-text-primary);\n background-color: var(--color-bg-input-hover);\n}\n" }, { "path": "apps/react-effector-fsd/src/shared/components/IconButton/IconButton.stories.tsx", "content": "import type { Meta, StoryObj } from '@storybook/react-vite'\n\nimport {\n DownloadIcon,\n HomeIcon,\n LikeIcon,\n MoreIcon,\n PlayIcon,\n PlusIcon,\n SearchIcon,\n} from '@/shared/icons'\n\nimport { IconButton } from './IconButton'\n\nconst meta = {\n title: 'Components/IconButton',\n component: IconButton,\n parameters: {\n layout: 'centered',\n },\n args: {},\n} satisfies Meta\n\nexport default meta\ntype Story = StoryObj\n\nexport const Basic: Story = {\n args: {\n children: ,\n 'aria-label': 'Play',\n },\n}\n\nexport const AllIcons = {\n render: () => (\n \n \n \n \n\n \n \n \n\n \n \n \n\n \n \n \n\n \n \n \n\n \n \n \n\n \n \n \n
    \n ),\n}\n\nexport const Disabled: Story = {\n args: {\n children: ,\n disabled: true,\n },\n}\n" }, { "path": "apps/react-effector-fsd/src/shared/components/IconButton/IconButton.tsx", "content": "import { clsx } from 'clsx'\nimport type { ComponentProps } from 'react'\n\nimport s from './IconButton.module.css'\n\ntype IconButtonProps = {\n children: React.ReactNode\n} & ComponentProps<'button'>\n\nexport const IconButton = ({ children, className, ...props }: IconButtonProps) => {\n return (\n \n )\n}\n" }, { "path": "apps/react-effector-fsd/src/shared/components/IconButton/index.ts", "content": "export * from './IconButton'\n" }, { "path": "apps/react-effector-fsd/src/shared/components/ImageUploader/ImageUploader.module.css", "content": ".container {\n width: 100%;\n}\n\n.dropZone {\n cursor: pointer;\n\n position: relative;\n\n display: flex;\n align-items: center;\n justify-content: center;\n\n width: 100%;\n min-height: 280px;\n border: 2px dashed var(--color-border-input-primary);\n border-radius: 8px;\n\n background-color: var(--color-bg-secondary);\n\n transition: all 200ms ease;\n}\n\n.dropZone:hover,\n.dropZone:focus-within {\n border-color: var(--color-border-input-active);\n background-color: var(--color-bg-input-hover);\n}\n\n.dropZone.dragOver {\n border-color: var(--color-accent);\n background-color: var(--color-bg-input-hover);\n}\n\n.dropZone.hasPreview {\n border-color: var(--color-border-input-active);\n border-style: solid;\n}\n\n.dropZone.error {\n border-color: var(--color-text-error);\n}\n\n.hiddenInput {\n position: absolute;\n\n overflow: hidden;\n\n width: 1px;\n height: 1px;\n\n opacity: 0;\n clip: rect(0, 0, 0, 0);\n}\n\n.uploadContent {\n display: flex;\n flex-direction: column;\n gap: 12px;\n align-items: center;\n\n padding: 32px 16px;\n}\n\n.uploadIcon {\n display: flex;\n align-items: center;\n justify-content: center;\n\n width: 48px;\n height: 48px;\n border-radius: 50%;\n\n color: var(--color-text-secondary);\n\n background-color: var(--color-bg-primary);\n\n transition: all 200ms ease;\n}\n\n.dropZone:hover .uploadIcon,\n.dropZone:focus-within .uploadIcon {\n color: var(--color-accent);\n background-color: var(--color-bg-card);\n}\n\n.uploadText {\n font-weight: 500;\n color: var(--color-text-secondary);\n transition: color 200ms ease;\n}\n\n.dropZone:hover .uploadText {\n color: var(--color-text-primary);\n}\n\n.previewContainer {\n position: relative;\n width: 100%;\n height: 100%;\n}\n\n.previewImage {\n width: 100%;\n height: 100%;\n min-height: 200px;\n border-radius: 6px;\n\n object-fit: cover;\n}\n\n.removeButton {\n position: absolute;\n top: 8px;\n right: 8px;\n}\n\n.removeButton:hover {\n opacity: 1;\n background-color: var(--color-text-error);\n}\n\n.removeButton:focus-visible {\n outline: 2px solid var(--color-outline-focus);\n outline-offset: 2px;\n}\n\n.errorMessage {\n margin-top: 8px;\n}\n\n/* States for different sizes */\n.dropZone.small {\n min-height: 120px;\n}\n\n.dropZone.large {\n min-height: 300px;\n}\n" }, { "path": "apps/react-effector-fsd/src/shared/components/ImageUploader/ImageUploader.stories.tsx", "content": "import type { Meta, StoryObj } from '@storybook/react-vite'\n\nimport { ImageUploader } from './ImageUploader'\n\nconst meta = {\n title: 'Components/ImageUploader',\n component: ImageUploader,\n parameters: {\n layout: 'centered',\n },\n args: {\n onImageSelect: () => {},\n },\n} satisfies Meta\n\nexport default meta\ntype Story = StoryObj\n\nexport const Default: Story = {\n args: {\n placeholder: 'Upload Cover Image',\n },\n render: (args) => (\n
    \n \n
    \n ),\n}\n\nexport const CustomPlaceholder: Story = {\n args: {\n placeholder: 'Choose your avatar',\n },\n render: (args) => (\n
    \n \n
    \n ),\n}\n\nexport const WithCustomLimits: Story = {\n args: {\n placeholder: 'Upload image (max 2MB)',\n maxSizeInMB: 2,\n acceptedFormats: ['image/jpeg', 'image/png'],\n },\n render: (args) => (\n
    \n \n
    \n ),\n}\n\nexport const AllowAllImages: Story = {\n args: {\n placeholder: 'Upload any image format',\n acceptedFormats: ['image/*'],\n maxSizeInMB: 10,\n },\n render: (args) => (\n
    \n \n
    \n ),\n}\n\nexport const Interactive: Story = {\n render: () => (\n \n
    \n

    Profile Avatar

    \n console.log('Avatar selected:', file.name)}\n maxSizeInMB={1}\n />\n
    \n\n
    \n

    Playlist Cover

    \n console.log('Cover selected:', file.name)}\n maxSizeInMB={5}\n />\n
    \n \n ),\n}\n" }, { "path": "apps/react-effector-fsd/src/shared/components/ImageUploader/ImageUploader.tsx", "content": "import { clsx } from 'clsx'\nimport { type ChangeEvent, type DragEvent, useRef, useState } from 'react'\n\nimport { ImageUploadIcon } from '@/shared/icons'\n\nimport { IconButton } from '../IconButton'\nimport { Typography } from '../Typography'\nimport s from './ImageUploader.module.css'\n\nexport type ImageUploaderProps = {\n onImageSelect: (file: File) => void\n className?: string\n acceptedFormats?: string[]\n maxSizeInMB?: number\n placeholder?: string\n}\n\nexport const ImageUploader = ({\n className,\n onImageSelect,\n acceptedFormats = ['image/jpeg', 'image/jpg', 'image/png', 'image/webp'],\n maxSizeInMB = 5,\n placeholder = 'Upload Cover Image',\n}: ImageUploaderProps) => {\n const [isDragOver, setIsDragOver] = useState(false)\n const [preview, setPreview] = useState(null)\n const [error, setError] = useState(null)\n const fileInputRef = useRef(null)\n\n const validateFile = (file: File): string | null => {\n if (!acceptedFormats.includes(file.type)) {\n return `Only ${acceptedFormats.join(', ')} files are allowed`\n }\n\n const maxSizeInBytes = maxSizeInMB * 1024 * 1024\n if (file.size > maxSizeInBytes) {\n return `File size must be less than ${maxSizeInMB}MB`\n }\n\n return null\n }\n\n const handleFileSelect = (file: File) => {\n const validationError = validateFile(file)\n\n if (validationError) {\n setError(validationError)\n setPreview(null)\n return\n }\n\n setError(null)\n\n // Create preview\n const reader = new FileReader()\n reader.onload = (e) => {\n setPreview(e.target?.result as string)\n }\n reader.readAsDataURL(file)\n\n onImageSelect(file)\n }\n\n const handleFileInputChange = (e: ChangeEvent) => {\n const file = e.target.files?.[0]\n if (file) {\n handleFileSelect(file)\n }\n }\n\n const handleDragOver = (e: DragEvent) => {\n e.preventDefault()\n setIsDragOver(true)\n }\n\n const handleDragLeave = (e: DragEvent) => {\n e.preventDefault()\n setIsDragOver(false)\n }\n\n const handleDrop = (e: DragEvent) => {\n e.preventDefault()\n setIsDragOver(false)\n\n const files = Array.from(e.dataTransfer.files)\n const imageFile = files.find((file) => file.type.startsWith('image/'))\n\n if (imageFile) {\n handleFileSelect(imageFile)\n }\n }\n\n const handleRemoveImage = (e: React.MouseEvent) => {\n e.preventDefault()\n e.stopPropagation()\n setPreview(null)\n setError(null)\n // Clear input value to allow selecting the same file again\n if (fileInputRef.current) {\n fileInputRef.current.value = ''\n }\n }\n\n return (\n
    \n \n \n\n {preview ? (\n
    \n \"Preview\"\n \n ✕\n \n
    \n ) : (\n
    \n
    \n \n
    \n \n {placeholder}\n \n
    \n )}\n \n\n {error && (\n \n {error}\n \n )}\n
    \n )\n}\n" }, { "path": "apps/react-effector-fsd/src/shared/components/ImageUploader/index.ts", "content": "export * from './ImageUploader'\n" }, { "path": "apps/react-effector-fsd/src/shared/components/Pagination/Pagination.module.css", "content": ".pagination {\n display: flex;\n gap: 6px;\n align-items: center;\n}\n\n.navButton {\n width: 40px;\n height: 40px;\n border-radius: 4px;\n\n color: var(--color-text-primary);\n\n background-color: var(--color-bg-secondary);\n\n transition: all 200ms ease;\n}\n\n.navButton:disabled {\n cursor: not-allowed;\n opacity: 0.5;\n background-color: var(--color-bg-secondary);\n}\n\n.navButton:enabled:hover,\n.navButton:enabled:focus {\n background-color: var(--color-bg-input-hover);\n}\n\n.pageNumbers {\n display: flex;\n gap: 4px;\n align-items: center;\n}\n\n.pageButton {\n cursor: pointer;\n\n display: flex;\n align-items: center;\n justify-content: center;\n\n width: 40px;\n height: 40px;\n border: none;\n border-radius: 8px;\n\n font-size: var(--font-size-m);\n font-weight: 500;\n color: var(--color-text-primary);\n\n background-color: var(--color-bg-secondary);\n\n transition: all 200ms ease;\n}\n\n.pageButton:focus-visible {\n outline: 2px solid var(--color-outline-focus);\n outline-offset: 2px;\n}\n\n.pageButton:hover:not(.active) {\n background-color: var(--color-bg-input-hover);\n}\n\n.pageButton.active {\n background-color: var(--color-accent);\n}\n\n.pageButton.active:hover {\n opacity: 0.9;\n}\n\n.ellipsis {\n display: flex;\n align-items: center;\n justify-content: center;\n\n width: 40px;\n height: 40px;\n\n font-size: var(--font-size-m);\n font-weight: 500;\n color: var(--color-text-secondary);\n}\n\n/* Responsive adjustments */\n@media (width <= 480px) {\n .pagination {\n gap: 2px;\n }\n\n .navButton,\n .pageButton,\n .ellipsis {\n width: 36px;\n height: 36px;\n }\n\n .pageButton,\n .ellipsis {\n font-size: var(--font-size-s);\n }\n}\n" }, { "path": "apps/react-effector-fsd/src/shared/components/Pagination/Pagination.stories.tsx", "content": "import type { Meta, StoryObj } from '@storybook/react-vite'\nimport { useState } from 'react'\n\nimport { Card } from '../Card'\nimport { Typography } from '../Typography'\nimport { Pagination } from './Pagination'\n\nconst meta = {\n title: 'Components/Pagination',\n component: Pagination,\n parameters: {\n layout: 'centered',\n },\n args: {},\n} satisfies Meta\n\nexport default meta\ntype Story = StoryObj\n\nexport const Basic: Story = {\n args: {\n page: 1,\n pagesCount: 3,\n onPageChange: () => {},\n },\n}\n\nexport const MiddlePage: Story = {\n args: {\n page: 5,\n pagesCount: 10,\n onPageChange: () => {},\n },\n}\n\nexport const LastPage: Story = {\n args: {\n page: 3,\n pagesCount: 3,\n onPageChange: () => {},\n },\n}\n\nexport const ManyPages: Story = {\n args: {\n page: 8,\n pagesCount: 20,\n onPageChange: () => {},\n },\n}\n\nexport const SinglePage: Story = {\n args: {\n page: 1,\n pagesCount: 1,\n onPageChange: () => {},\n },\n}\n\nexport const Interactive = {\n render: () => {\n const [currentPage, setCurrentPage] = useState(1)\n const totalCount = 95\n const pageSize = 10\n const pagesCount = Math.ceil(totalCount / pageSize)\n\n const handlePageChange = (page: number) => {\n setCurrentPage(page)\n }\n\n return (\n \n \n \n Interactive Pagination\n \n \n Current page: {currentPage}\n \n \n Total items: {totalCount}\n \n \n Items per page: {pageSize}\n \n \n\n \n\n \n Click on page numbers or arrows to navigate\n \n \n )\n },\n}\n\nexport const AllStates = {\n render: () => (\n \n
    \n \n First Page (3 pages total)\n \n {}} />\n
    \n\n
    \n \n Middle Page (10 pages total)\n \n {}} />\n
    \n\n
    \n \n Last Page (3 pages total)\n \n {}} />\n
    \n\n
    \n \n Many Pages (20 pages total)\n \n {}} />\n
    \n \n ),\n}\n" }, { "path": "apps/react-effector-fsd/src/shared/components/Pagination/Pagination.tsx", "content": "import { clsx } from 'clsx'\nimport type { ComponentProps } from 'react'\n\nimport { KeyboardArrowLeftIcon, KeyboardArrowRightIcon } from '@/shared/icons'\n\nimport { IconButton } from '../IconButton'\nimport s from './Pagination.module.css'\n\nexport type PaginationProps = {\n page: number\n pagesCount: number\n onPageChange: (page: number) => void\n className?: string\n} & Omit, 'children'>\n\nconst MAX_VISIBLE_PAGES = 5\n\nexport const Pagination = ({\n page,\n\n pagesCount,\n onPageChange,\n className,\n ...props\n}: PaginationProps) => {\n // Helper function to generate page numbers array\n const generatePageNumbers = () => {\n const pages: (number | 'ellipsis')[] = []\n\n if (pagesCount <= MAX_VISIBLE_PAGES) {\n // Show all pages if total is small\n for (let i = 1; i <= pagesCount; i++) {\n pages.push(i)\n }\n } else {\n // Always show first page\n pages.push(1)\n\n if (page > 3) {\n pages.push('ellipsis')\n }\n\n // Show pages around current page\n const start = Math.max(2, page - 1)\n const end = Math.min(pagesCount - 1, page + 1)\n\n for (let i = start; i <= end; i++) {\n if (i !== 1 && i !== pagesCount) {\n pages.push(i)\n }\n }\n\n if (page < pagesCount - 2) {\n pages.push('ellipsis')\n }\n\n // Always show last page if it's not already included\n if (pagesCount > 1) {\n pages.push(pagesCount)\n }\n }\n\n return pages\n }\n\n const handlePrevious = () => {\n if (page > 1) {\n onPageChange(page - 1)\n }\n }\n\n const handleNext = () => {\n if (page < pagesCount) {\n onPageChange(page + 1)\n }\n }\n\n const handlePageClick = (pageNumber: number) => {\n onPageChange(pageNumber)\n }\n\n if (pagesCount <= 1) {\n return null\n }\n\n const pageNumbers = generatePageNumbers()\n\n return (\n \n {/* Previous button */}\n \n \n \n\n {/* Page numbers */}\n
    \n {pageNumbers.map((pageNumber, index) => {\n if (pageNumber === 'ellipsis') {\n return (\n \n ...\n \n )\n }\n\n const isActive = pageNumber === page\n\n return (\n handlePageClick(pageNumber)}\n className={clsx(s.pageButton, isActive && s.active)}\n aria-label={`Go to page ${pageNumber}`}\n aria-current={isActive ? 'page' : undefined}\n type=\"button\">\n {pageNumber}\n \n )\n })}\n
    \n\n {/* Next button */}\n \n \n \n \n )\n}\n" }, { "path": "apps/react-effector-fsd/src/shared/components/Pagination/index.ts", "content": "export * from './Pagination'\n" }, { "path": "apps/react-effector-fsd/src/shared/components/Progress/Progress.module.css", "content": ".progress {\n overflow: hidden;\n\n width: 100%;\n height: 4px;\n border-radius: 4px;\n\n background-color: var(--color-border-base);\n}\n\n.progressBar {\n height: 100%;\n border-radius: 4px;\n background-color: var(--color-accent);\n transition: width 300ms ease;\n}\n" }, { "path": "apps/react-effector-fsd/src/shared/components/Progress/Progress.stories.tsx", "content": "import type { Meta, StoryObj } from '@storybook/react-vite'\nimport { useState } from 'react'\n\nimport { Button } from '../Button'\nimport { Card } from '../Card'\nimport { Typography } from '../Typography'\nimport { Progress } from './Progress'\n\nconst meta = {\n title: 'Components/Progress',\n component: Progress,\n parameters: {\n layout: 'centered',\n },\n args: {},\n} satisfies Meta\n\nexport default meta\ntype Story = StoryObj\n\nexport const Basic: Story = {\n args: {\n value: 75,\n },\n render: (args) => (\n
    \n \n
    \n ),\n}\n\nexport const CustomMax: Story = {\n args: {\n value: 15,\n max: 20,\n },\n render: (args) => (\n
    \n \n
    \n ),\n}\n\nexport const Empty: Story = {\n args: {\n value: 0,\n },\n render: (args) => (\n
    \n \n
    \n ),\n}\n\nexport const Full: Story = {\n args: {\n value: 100,\n },\n render: (args) => (\n
    \n \n
    \n ),\n}\n\nexport const AllStates = {\n render: () => (\n
    \n
    \n \n Empty (0%)\n \n \n
    \n\n
    \n \n Low (25%)\n \n \n
    \n\n
    \n \n Medium (50%)\n \n \n
    \n\n
    \n \n High (85%)\n \n \n
    \n\n
    \n \n Complete (100%)\n \n \n
    \n
    \n ),\n}\n\nexport const CustomSizes = {\n render: () => (\n
    \n
    \n \n Small (height: 4px)\n \n \n
    \n\n
    \n \n Default (height: 8px)\n \n \n
    \n\n
    \n \n Large (height: 12px)\n \n \n
    \n
    \n ),\n}\n\nexport const Interactive = {\n render: () => {\n const [progress, setProgress] = useState(0)\n\n const handleIncrease = () => {\n setProgress((prev) => Math.min(prev + 10, 100))\n }\n\n const handleDecrease = () => {\n setProgress((prev) => Math.max(prev - 10, 0))\n }\n\n const handleReset = () => {\n setProgress(0)\n }\n\n return (\n
    \n \n \n Interactive Progress\n \n\n
    \n \n Current progress: {progress}%\n \n \n
    \n\n
    \n \n \n \n
    \n     \n
    \n )\n },\n}\n\nexport const FileUploadExample = {\n render: () => (\n
    \n \n \n File Upload Progress\n \n\n
    \n
    \n
    \n image.jpg\n 75%\n
    \n \n
    \n\n
    \n
    \n document.pdf\n 100%\n
    \n \n
    \n\n
    \n
    \n video.mp4\n 32%\n
    \n \n
    \n
    \n     \n
    \n ),\n}\n" }, { "path": "apps/react-effector-fsd/src/shared/components/Progress/Progress.tsx", "content": "import { clsx } from 'clsx'\nimport type { ComponentProps } from 'react'\n\nimport s from './Progress.module.css'\n\nexport type ProgressProps = {\n value: number\n max?: number\n} & ComponentProps<'div'>\n\nexport const Progress = ({ value, max = 100, className, ...props }: ProgressProps) => {\n const percentage = Math.min(Math.max((value / max) * 100, 0), 100)\n\n return (\n \n
    \n
    \n )\n}\n" }, { "path": "apps/react-effector-fsd/src/shared/components/Progress/index.ts", "content": "export * from './Progress'\n" }, { "path": "apps/react-effector-fsd/src/shared/components/ReactionButtons/ReactionButtons.module.css", "content": ".container {\n display: flex;\n gap: 8px;\n align-items: start;\n}\n\n.button {\n width: 28px;\n height: 28px;\n padding: 0;\n transition: color 200ms ease;\n}\n\n.button.large {\n width: 40px;\n height: 40px;\n}\n\n.button.liked {\n color: var(--color-accent);\n}\n\n.button.disliked {\n color: var(--color-accent);\n}\n\n.button:enabled:hover:is(.liked, .disliked),\n.button:enabled:focus:is(.liked, .disliked) {\n color: var(--color-accent);\n background-color: var(--color-bg-input-hover);\n}\n\n.likesCountBox {\n display: flex;\n flex-direction: column;\n align-items: center;\n}\n\n.likesCount {\n font-size: 10px;\n color: var(--color-text-secondary);\n}\n" }, { "path": "apps/react-effector-fsd/src/shared/components/ReactionButtons/ReactionButtons.stories.tsx", "content": "import type { Meta, StoryObj } from '@storybook/react-vite'\nimport { useState } from 'react'\n\nimport { Card } from '../Card'\nimport { Typography } from '../Typography'\nimport { type CurrentUserReaction, ReactionButtons } from './ReactionButtons'\n\nconst meta = {\n title: 'Components/ReactionButtons',\n component: ReactionButtons,\n parameters: {\n layout: 'centered',\n },\n args: {},\n} satisfies Meta\n\nexport default meta\ntype Story = StoryObj\n\nexport const Default: Story = {\n args: {\n reaction: 0,\n onLike: () => console.log('Liked!'),\n onDislike: () => console.log('Disliked!'),\n },\n}\n\nexport const WithLikesCount: Story = {\n args: {\n reaction: 0,\n onLike: () => console.log('Liked!'),\n onDislike: () => console.log('Disliked!'),\n likesCount: 10,\n },\n}\n\nexport const LikedState: Story = {\n args: {\n reaction: 1,\n onLike: () => console.log('Unlike'),\n onDislike: () => console.log('Disliked!'),\n },\n}\n\nexport const DislikedState: Story = {\n args: {\n reaction: -1,\n onLike: () => console.log('Liked!'),\n onDislike: () => console.log('Remove dislike'),\n },\n}\n\nexport const Interactive = {\n render: () => {\n const [reaction, setReaction] = useState(0)\n\n const handleLike = () => {\n setReaction(reaction === 1 ? 0 : 1)\n }\n\n const handleDislike = () => {\n setReaction(reaction === -1 ? 0 : -1)\n }\n\n return (\n \n \n Interactive Reaction Buttons\n \n\n \n Try clicking the buttons below:\n \n\n
    \n \n
    \n\n \n Status: {reaction === 1 ? '👍 Liked' : reaction === -1 ? '👎 Disliked' : '😐 Neutral'}\n \n     \n )\n },\n}\n\nexport const AllStates = {\n render: () => (\n
    \n
    \n \n Default\n \n {}} onDislike={() => {}} />\n
    \n\n
    \n \n Liked\n \n {}} onDislike={() => {}} />\n
    \n\n
    \n \n Disliked\n \n {}} onDislike={() => {}} />\n
    \n\n
    \n \n With likes count\n \n {}} onDislike={() => {}} likesCount={10} />\n
    \n
    \n ),\n}\n" }, { "path": "apps/react-effector-fsd/src/shared/components/ReactionButtons/ReactionButtons.tsx", "content": "import { clsx } from 'clsx'\n\nimport type { ReactionValue } from '@/shared/api/schema.ts'\nimport { DislikeIcon, LikeIcon, LikeIconFill } from '@/shared/icons'\n\nimport { IconButton } from '../IconButton'\nimport s from './ReactionButtons.module.css'\n\n// duplication of the CurrentUserReaction type to decouple the shared layer from the features layer\nexport type CurrentUserReaction = ReactionValue\n\nexport type ReactionButtonsProps = {\n reaction?: CurrentUserReaction\n onLike: () => void\n onDislike: () => void\n likesCount?: number\n className?: string\n size?: keyof typeof SIZE_MAP\n}\n\nconst SIZE_MAP = {\n small: 28,\n large: 40,\n}\n\nexport const ReactionButtons = ({\n reaction = 0,\n onLike,\n onDislike,\n likesCount,\n className,\n size = 'small',\n}: ReactionButtonsProps) => {\n const isLiked = reaction === 1\n const isDisliked = reaction === -1\n\n const iconSize = SIZE_MAP[size]\n\n return (\n
    \n
    \n {\n e.preventDefault()\n onLike()\n }}\n className={clsx(s.button, isLiked && s.liked, size === 'large' && s.large)}\n aria-label={isLiked ? 'Remove like' : 'Like'}\n type=\"button\">\n {isLiked ? (\n \n ) : (\n \n )}\n \n {likesCount}\n
    \n\n {\n e.preventDefault()\n onDislike()\n }}\n className={clsx(s.button, isDisliked && s.disliked, size === 'large' && s.large)}\n aria-label={isDisliked ? 'Remove dislike' : 'Dislike'}\n type=\"button\">\n \n \n
    \n )\n}\n" }, { "path": "apps/react-effector-fsd/src/shared/components/ReactionButtons/index.ts", "content": "export * from './ReactionButtons'\n" }, { "path": "apps/react-effector-fsd/src/shared/components/SearchField/SearchField.module.css", "content": ".inputWrapper {\n position: relative;\n display: flex;\n align-items: center;\n}\n\n.searchIcon {\n pointer-events: none;\n\n position: absolute;\n z-index: 1;\n left: 12px;\n\n color: var(--color-text-secondary);\n\n transition: color 200ms ease;\n}\n\n.input {\n width: 100%;\n height: 52px;\n padding: 15px 16px 15px 62px;\n border: 1px solid var(--color-border-input-primary);\n border-radius: 26px;\n\n font-size: var(--font-size-m);\n color: var(--color-text-primary-reverse);\n\n background-color: var(--color-bg-primary-reverse);\n outline: none;\n\n transition:\n 200ms background-color,\n 200ms color,\n 200ms border-color;\n}\n\n.input::placeholder {\n font-size: var(--font-size-m);\n color: var(--color-text-secondary);\n}\n" }, { "path": "apps/react-effector-fsd/src/shared/components/SearchField/SearchField.stories.tsx", "content": "import type { Meta, StoryObj } from '@storybook/react-vite'\n\nimport { SearchField } from './SearchField'\n\nconst meta = {\n title: 'Components/SearchField',\n component: SearchField,\n parameters: {\n layout: 'centered',\n },\n args: {},\n} satisfies Meta\n\nexport default meta\ntype Story = StoryObj\n\nexport const Basic: Story = {\n args: {\n placeholder: 'Search for playlists...',\n },\n}\n" }, { "path": "apps/react-effector-fsd/src/shared/components/SearchField/SearchField.tsx", "content": "import { clsx } from 'clsx'\nimport type { ComponentProps, ReactNode } from 'react'\n\nimport { SearchIcon } from '@/shared/icons'\n\nimport s from './SearchField.module.css'\n\nexport type SearchFieldProps = {\n label?: ReactNode\n placeholder?: string\n} & ComponentProps<'input'>\n\nexport const SearchField = ({\n className,\n placeholder = 'Search...',\n ...props\n}: SearchFieldProps) => {\n return (\n
    \n \n \n
    \n )\n}\n" }, { "path": "apps/react-effector-fsd/src/shared/components/SearchField/index.ts", "content": "export * from './SearchField'\n" }, { "path": "apps/react-effector-fsd/src/shared/components/Select/Select.module.css", "content": ".container {\n display: flex;\n flex-direction: column;\n width: 100%;\n}\n\n.selectWrapper {\n position: relative;\n width: 100%;\n}\n\n.select {\n width: 100%;\n height: 40px;\n padding: 8px 36px 8px 12px;\n border: none;\n\n font-size: var(--font-size-m);\n color: var(--color-text-primary);\n text-decoration: underline;\n text-underline-offset: 3px;\n\n appearance: none;\n background-color: transparent;\n outline: none;\n\n transition:\n 200ms background-color,\n 200ms color;\n}\n\n.select:disabled {\n cursor: not-allowed;\n color: var(--color-disabled);\n}\n\n.select:focus-visible {\n background-color: var(--color-bg-input-hover);\n}\n\n.select:hover:not(:disabled) {\n background-color: var(--color-bg-input-hover);\n}\n\n.select.error {\n border-color: var(--color-text-error);\n}\n\n/* Style dropdown options */\n.select option {\n padding: 8px 12px;\n\n font-size: var(--font-size-m);\n color: var(--color-text-primary);\n\n background-color: var(--color-bg-secondary);\n\n transition: background-color 200ms ease;\n}\n\n.select option:hover {\n background-color: var(--color-bg-input-hover);\n}\n\n.select option:checked {\n font-weight: 600;\n color: var(--color-accent);\n background-color: var(--color-bg-input-hover);\n}\n\n.select option:disabled {\n color: var(--color-disabled);\n}\n\n/* Custom dropdown icon */\n.icon {\n pointer-events: none;\n\n position: absolute;\n top: 50%;\n right: 12px;\n transform: translateY(-50%);\n\n width: 20px;\n height: 20px;\n\n color: var(--color-text-secondary);\n\n transition:\n color 200ms ease,\n transform 200ms ease;\n}\n\n/* Rotate icon when dropdown is open */\n.select:open + .icon {\n transform: translateY(-50%) rotate(180deg);\n}\n\n.label.error {\n color: var(--color-text-error);\n}\n" }, { "path": "apps/react-effector-fsd/src/shared/components/Select/Select.stories.tsx", "content": "import type { Meta, StoryObj } from '@storybook/react-vite'\nimport { useState } from 'react'\n\nimport { Select } from './Select'\n\nconst meta = {\n title: 'Components/Select',\n component: Select,\n parameters: {\n layout: 'centered',\n },\n args: {},\n} satisfies Meta\n\nexport default meta\ntype Story = StoryObj\n\nconst commonOptions = [\n { value: 'react', label: 'React' },\n { value: 'vue', label: 'Vue.js' },\n { value: 'angular', label: 'Angular' },\n { value: 'svelte', label: 'Svelte' },\n { value: 'vanilla', label: 'Vanilla JS' },\n]\n\nconst genres = [\n { value: 'pop', label: 'Pop' },\n { value: 'rock', label: 'Rock' },\n { value: 'jazz', label: 'Jazz' },\n { value: 'classical', label: 'Classical' },\n { value: 'electronic', label: 'Electronic' },\n { value: 'hip-hop', label: 'Hip Hop' },\n { value: 'country', label: 'Country' },\n]\n\nexport const AllVariants = {\n render: () => (\n \n \n\n \n\n \n \n ),\n}\n\nexport const WithDefaultValue: Story = {\n args: {\n label: 'Preferred framework',\n options: commonOptions,\n defaultValue: 'react',\n },\n render: (args) => (\n
    \n \n
    \n ),\n}\n\nexport const WithError: Story = {\n args: {\n label: 'Framework',\n placeholder: 'Select a framework',\n options: commonOptions,\n errorMessage: 'Please select a framework',\n },\n render: (args) => (\n
    \n \n
    \n ),\n}\n\nexport const Controlled = {\n render: () => {\n const [value, setValue] = useState('')\n\n return (\n
    \n setValue(e.target.value)}\n />\n\n \n Selected value: {value || 'None'}\n
    \n \n )\n },\n}\n" }, { "path": "apps/react-effector-fsd/src/shared/components/Select/Select.tsx", "content": "import { clsx } from 'clsx'\nimport type { ComponentProps, ReactNode } from 'react'\n\nimport { ArrowDownIcon } from '@/shared/icons'\n\nimport { useGetId } from '../../hooks/useGetId'\nimport { Typography } from '../Typography'\nimport s from './Select.module.css'\n\nexport type SelectOption = {\n value: string\n label: string\n disabled?: boolean\n}\n\nexport type SelectProps = {\n label?: ReactNode\n errorMessage?: string\n options: SelectOption[]\n placeholder?: string\n} & ComponentProps<'select'>\n\nexport const Select = ({\n className,\n errorMessage,\n id,\n label,\n options,\n placeholder,\n ...props\n}: SelectProps) => {\n const showError = Boolean(errorMessage)\n const selectId = useGetId(id)\n\n return (\n
    \n {label && (\n \n {label}\n \n )}\n\n
    \n \n \n
    \n\n {showError && {errorMessage}}\n
    \n )\n}\n" }, { "path": "apps/react-effector-fsd/src/shared/components/Select/index.ts", "content": "export * from './Select'\n" }, { "path": "apps/react-effector-fsd/src/shared/components/SortSelect/Select.tsx", "content": "import { clsx } from 'clsx'\nimport type { ComponentProps, ReactNode } from 'react'\n\nimport { ArrowDownIcon } from '@/shared/icons'\n\nimport { useGetId } from '../../hooks/useGetId'\nimport { Typography } from '../Typography'\nimport s from './Select.module.css'\n\nexport type SelectOption = {\n value: string\n label: string\n disabled?: boolean\n}\n\nexport type SelectProps = {\n label?: ReactNode\n errorMessage?: string\n options: SelectOption[]\n placeholder?: string\n} & ComponentProps<'select'>\n\nexport const Select = ({\n className,\n errorMessage,\n id,\n label,\n options,\n placeholder,\n ...props\n}: SelectProps) => {\n const showError = Boolean(errorMessage)\n const selectId = useGetId(id)\n\n return (\n
    \n {label && (\n \n {label}\n \n )}\n\n
    \n \n \n
    \n\n {showError && {errorMessage}}\n
    \n )\n}\n" }, { "path": "apps/react-effector-fsd/src/shared/components/Table/Table.module.css", "content": ".table {\n table-layout: fixed;\n border-collapse: collapse;\n width: 100%;\n background: transparent;\n}\n\n.tableHead {\n border-bottom: 1px solid var(--color-border-base);\n}\n\n.tableHeaderCell {\n padding: 10px;\n border: none;\n\n font-size: var(--font-size-xs);\n font-weight: 500;\n color: var(--color-text-secondary);\n text-align: left;\n text-transform: uppercase;\n\n background: transparent;\n}\n\n.tableHeaderCell:first-child {\n padding-left: 16px;\n}\n\n.tableHeaderCell:last-child {\n padding-right: 16px;\n}\n\n.tableBody {\n background: transparent;\n}\n\n.tableRow {\n transition: background-color 200ms ease;\n}\n\n.tableBody .tableRow:hover {\n background-color: var(--color-bg-input-hover);\n}\n\n.tableCell {\n padding: 10px;\n border: none;\n\n font-size: var(--font-size-m);\n color: var(--color-text-primary);\n vertical-align: middle;\n\n background: transparent;\n}\n\n.tableCell:first-child {\n padding-left: 16px;\n}\n\n.tableCell:last-child {\n padding-right: 16px;\n}\n" }, { "path": "apps/react-effector-fsd/src/shared/components/Table/Table.stories.tsx", "content": "import type { Meta, StoryObj } from '@storybook/react-vite'\n\nimport { ReactionButtons } from '../ReactionButtons'\nimport { Typography } from '../Typography'\nimport { Table, TableBody, TableCell, TableHead, TableHeaderCell, TableRow } from './Table'\nimport s from './Table.module.css'\n\nconst meta = {\n title: 'Components/Table',\n component: Table,\n parameters: {\n layout: 'centered',\n },\n args: {},\n} satisfies Meta\n\nexport default meta\ntype Story = StoryObj\n\nconst trackData = [\n {\n id: 1,\n title: 'Play It Safe',\n artist: 'Julia Wolf',\n image: 'https://picsum.photos/40/40?random=1',\n dateAdded: '1 day ago',\n duration: '2:12',\n },\n {\n id: 2,\n title: 'Ocean Front Apt.',\n artist: 'ayokay',\n image: 'https://picsum.photos/40/40?random=2',\n dateAdded: '1 day ago',\n duration: '2:12',\n },\n {\n id: 3,\n title: 'Free Spirit',\n artist: 'Khalid',\n image: 'https://picsum.photos/40/40?random=3',\n dateAdded: '2 day ago',\n duration: '3:02',\n },\n {\n id: 4,\n title: 'Remind You',\n artist: 'FRENSHIP',\n image: 'https://picsum.photos/40/40?random=4',\n dateAdded: '3 day ago',\n duration: '4:25',\n },\n]\n\nexport const BasicTable = {\n render: () => (\n
    \n \n \n \n Name\n Email\n Role\n \n \n \n \n John Doe\n john@example.com\n Admin\n \n \n Jane Smith\n jane@example.com\n User\n \n \n Bob Johnson\n bob@example.com\n Editor\n \n \n
    \n
    \n ),\n}\n\nexport const EmptyTable = {\n render: () => (\n
    \n \n \n \n Column 1\n Column 2\n Column 3\n \n \n \n \n \n \n No data available\n \n \n \n \n
    \n
    \n ),\n}\n" }, { "path": "apps/react-effector-fsd/src/shared/components/Table/Table.tsx", "content": "import { clsx } from 'clsx'\nimport type { ComponentProps, ReactNode } from 'react'\n\nimport s from './Table.module.css'\n\n/*\n * Table\n */\n\nexport type TableProps = {\n children: ReactNode\n className?: string\n} & ComponentProps<'table'>\n\nexport const Table = ({ children, className, ...props }: TableProps) => {\n return (\n \n {children}\n
    \n )\n}\n\n/*\n * TableHead\n */\n\nexport type TableHeadProps = {\n children: ReactNode\n className?: string\n} & ComponentProps<'thead'>\n\nexport const TableHead = ({ children, className, ...props }: TableHeadProps) => {\n return (\n \n {children}\n \n )\n}\n\n/*\n * TableBody\n */\n\nexport type TableBodyProps = {\n children: ReactNode\n className?: string\n} & ComponentProps<'tbody'>\n\nexport const TableBody = ({ children, className, ...props }: TableBodyProps) => {\n return (\n \n {children}\n \n )\n}\n\n/*\n * TableRow\n */\n\nexport type TableRowProps = {\n children: ReactNode\n className?: string\n} & ComponentProps<'tr'>\n\nexport const TableRow = ({ children, className, ...props }: TableRowProps) => {\n return (\n \n {children}\n \n )\n}\n\n/*\n * TableHeaderCell\n */\n\nexport type TableHeaderCellProps = {\n children?: ReactNode\n className?: string\n} & ComponentProps<'th'>\n\nexport const TableHeaderCell = ({ children, className, ...props }: TableHeaderCellProps) => {\n return (\n \n {children}\n \n )\n}\n\n/*\n * TableCell\n */\n\nexport type TableCellProps = {\n children: ReactNode\n className?: string\n} & ComponentProps<'td'>\n\nexport const TableCell = ({ children, className, ...props }: TableCellProps) => {\n return (\n \n {children}\n \n )\n}\n" }, { "path": "apps/react-effector-fsd/src/shared/components/Table/index.ts", "content": "export * from './Table'\n" }, { "path": "apps/react-effector-fsd/src/shared/components/Tabs/Tabs.module.css", "content": ".tabsList {\n display: flex;\n width: 100%;\n border-bottom: 1px solid var(--color-text-secondary);\n}\n\n.tabsTrigger {\n cursor: pointer;\n\n position: relative;\n\n display: flex;\n flex: 1 1 0;\n align-items: center;\n justify-content: center;\n\n padding: 12px 16px;\n border: none;\n\n font-size: var(--font-size-m);\n font-weight: 500;\n color: var(--color-text-secondary);\n\n background: transparent;\n\n transition: all 200ms ease;\n}\n\n.tabsTrigger:focus-visible {\n outline: 2px solid var(--color-outline-focus);\n outline-offset: 2px;\n}\n\n.tabsTrigger:not(.active, :disabled):hover {\n opacity: 0.7;\n}\n\n.tabsTrigger.active {\n color: var(--color-accent);\n}\n\n.tabsTrigger.active::after {\n content: '';\n\n position: absolute;\n bottom: -1px;\n left: 0;\n\n width: 100%;\n height: 2px;\n\n background-color: var(--color-accent);\n}\n\n.tabsTrigger.disabled {\n cursor: default;\n color: var(--color-disabled);\n}\n\n.tabsContent {\n padding: 32px 0;\n}\n" }, { "path": "apps/react-effector-fsd/src/shared/components/Tabs/Tabs.stories.tsx", "content": "import type { Meta } from '@storybook/react-vite'\nimport { useState } from 'react'\n\nimport { Button } from '../Button'\nimport { Card } from '../Card'\nimport { Typography } from '../Typography'\nimport { Tabs, TabsContent, TabsList, TabsTrigger } from './Tabs'\n\nconst meta = {\n title: 'Components/Tabs',\n component: Tabs,\n parameters: {\n layout: 'centered',\n },\n args: {},\n} satisfies Meta\n\nexport default meta\n\nexport const BasicTabs = {\n render: () => (\n
    \n \n \n Account\n Password\n \n \n Make changes to your account here.\n \n \n Change your password here.\n \n \n
    \n ),\n}\n\nexport const ControlledTabs = {\n render: () => {\n const [activeTab, setActiveTab] = useState('tab1')\n\n return (\n
    \n \n \n Tab 1\n Tab 2\n Tab 3\n \n \n \n First Tab Content\n \n \n This is content for the first tab. You can put any React content here.\n \n \n \n \n Second Tab Content\n \n \n This is content for the second tab with different information.\n \n \n \n \n Third Tab Content\n \n \n And this is the third tab with its own unique content.\n \n \n \n\n \n \n Active tab: {activeTab}\n \n
    \n \n \n \n
    \n \n
    \n )\n },\n}\n\nexport const DisabledTab = {\n render: () => (\n
    \n \n \n Available\n \n Disabled\n \n Another\n \n \n This tab is available and active.\n \n \n This content should not be visible.\n \n \n This is another available tab.\n \n \n
    \n ),\n}\n" }, { "path": "apps/react-effector-fsd/src/shared/components/Tabs/Tabs.tsx", "content": "import { clsx } from 'clsx'\nimport { type ComponentProps, createContext, type ReactNode, use, useState } from 'react'\n\nimport s from './Tabs.module.css'\n\ntype TabsContextType = {\n value?: string\n onValueChange?: (value: string) => void\n}\n\nconst TabsContext = createContext(null)\n\nconst useTabsContext = () => {\n const context = use(TabsContext)\n if (!context) {\n throw new Error('Tabs compound components must be used within Tabs component')\n }\n return context\n}\n\n/*\n * Tabs\n */\n\nexport type TabsProps = {\n children: ReactNode\n defaultValue?: string\n value?: string\n onValueChange?: (value: string) => void\n} & ComponentProps<'div'>\n\nexport const Tabs = ({\n children,\n defaultValue,\n value: controlledValue,\n onValueChange,\n className,\n ...props\n}: TabsProps) => {\n const [internalValue, setInternalValue] = useState(defaultValue)\n\n const isControlled = controlledValue !== undefined\n const value = isControlled ? controlledValue : internalValue\n\n const handleValueChange = (newValue: string) => {\n if (!isControlled) {\n setInternalValue(newValue)\n }\n onValueChange?.(newValue)\n }\n\n return (\n
    \n {children}\n
    \n )\n}\n\n/*\n * TabsList\n */\n\nexport type TabsListProps = {\n children: ReactNode\n className?: string\n}\n\nexport const TabsList = ({ children, className }: TabsListProps) => {\n return
    {children}
    \n}\n\n/*\n * TabsTrigger\n */\n\nexport type TabsTriggerProps = {\n children: ReactNode\n value: string\n className?: string\n disabled?: boolean\n}\n\nexport const TabsTrigger = ({ children, value, className, disabled }: TabsTriggerProps) => {\n const { value: activeValue, onValueChange } = useTabsContext()\n const isActive = activeValue === value\n\n const handleClick = () => {\n if (!disabled) {\n onValueChange?.(value)\n }\n }\n\n return (\n \n {children}\n \n )\n}\n\n/*\n * TabsContent\n */\n\nexport type TabsContentProps = {\n children: ReactNode\n value: string\n className?: string\n}\n\nexport const TabsContent = ({ children, value, className }: TabsContentProps) => {\n const { value: activeValue } = useTabsContext()\n const isActive = activeValue === value\n\n if (!isActive) return null\n\n return
    {children}
    \n}\n" }, { "path": "apps/react-effector-fsd/src/shared/components/Tabs/index.ts", "content": "export * from './Tabs'\n" }, { "path": "apps/react-effector-fsd/src/shared/components/TagEditor/TagEditor.module.css", "content": ".container {\n display: flex;\n flex-direction: column;\n}\n\n.tagsContainer {\n display: flex;\n flex-wrap: wrap;\n gap: 8px;\n\n margin-top: 12px;\n padding: 8px 0;\n}\n\n.tag {\n display: flex;\n gap: 6px;\n align-items: center;\n\n padding: 4px 8px;\n border: 1px solid var(--color-border-input-primary);\n border-radius: 16px;\n\n background-color: var(--color-bg-secondary);\n\n transition: all 200ms ease;\n}\n\n.tag:hover {\n background-color: var(--color-bg-input-hover);\n}\n\n.tagText {\n font-size: var(--font-size-s);\n font-weight: 500;\n color: var(--color-text-primary);\n white-space: nowrap;\n}\n\n.deleteButton {\n width: 16px;\n height: 16px;\n padding: 0;\n\n font-size: 10px;\n color: var(--color-text-secondary);\n\n background: transparent;\n\n transition: all 200ms ease;\n}\n\n.deleteButton:disabled {\n cursor: not-allowed;\n opacity: 0.5;\n}\n\n.deleteButton:enabled:hover {\n color: var(--color-text-error);\n background-color: transparent;\n}\n\n.counter {\n margin-top: 8px;\n color: var(--color-text-secondary);\n}\n" }, { "path": "apps/react-effector-fsd/src/shared/components/TagEditor/TagEditor.stories.tsx", "content": "import type { Meta } from '@storybook/react-vite'\nimport { useState } from 'react'\n\nimport { Card } from '../Card'\nimport { Typography } from '../Typography'\nimport { TagEditor } from './TagEditor'\n\nconst meta = {\n title: 'Components/TagEditor',\n component: TagEditor,\n parameters: {\n layout: 'centered',\n },\n args: {},\n} satisfies Meta\n\nexport default meta\n\nexport const Basic = {\n render: () => {\n const [tags, setTags] = useState([])\n\n return (\n
    \n \n
    \n )\n },\n}\n\nexport const WithMaxTags = {\n render: () => {\n const [tags, setTags] = useState([])\n\n return (\n
    \n \n
    \n )\n },\n}\n\nexport const Disabled = {\n render: () => {\n const [tags, setTags] = useState(['React', 'TypeScript'])\n\n return (\n
    \n \n
    \n )\n },\n}\n\nexport const PrefilledTags = {\n render: () => {\n const [tags, setTags] = useState([\n 'JavaScript',\n 'TypeScript',\n 'React',\n 'Node.js',\n 'CSS',\n 'HTML',\n ])\n\n return (\n
    \n \n
    \n )\n },\n}\n\nexport const Interactive = {\n render: () => {\n const [frontendTags, setFrontendTags] = useState(['React', 'Vue.js'])\n const [backendTags, setBackendTags] = useState(['Node.js'])\n\n return (\n \n
    \n \n Frontend Technologies\n \n \n
    \n\n
    \n \n Backend Technologies\n \n \n
    \n\n \n \n Summary:\n \n \n Frontend: {frontendTags.length > 0 ? frontendTags.join(', ') : 'None'}\n \n \n Backend: {backendTags.length > 0 ? backendTags.join(', ') : 'None'}\n \n \n \n )\n },\n}\n" }, { "path": "apps/react-effector-fsd/src/shared/components/TagEditor/TagEditor.tsx", "content": "import { clsx } from 'clsx'\nimport type { ComponentProps, KeyboardEvent } from 'react'\nimport { useState } from 'react'\n\nimport { DeleteIcon } from '@/shared/icons'\n\nimport { IconButton } from '../IconButton'\nimport { TextField } from '../TextField'\nimport { Typography } from '../Typography'\nimport s from './TagEditor.module.css'\n\nexport type TagEditorProps = {\n label?: string\n placeholder?: string\n value: string[]\n onTagsChange: (tags: string[]) => void\n maxTags?: number\n disabled?: boolean\n} & ComponentProps<'div'>\n\nexport const TagEditor = ({\n label,\n placeholder = 'Add tag and press Enter',\n value,\n onTagsChange,\n className,\n maxTags,\n disabled = false,\n ...props\n}: TagEditorProps) => {\n const [inputValue, setInputValue] = useState('')\n\n const addTag = (tag: string) => {\n const trimmedTag = tag.trim()\n\n if (!trimmedTag) return\n if (value.includes(trimmedTag)) return\n if (maxTags && value.length >= maxTags) return\n\n onTagsChange([...value, trimmedTag])\n setInputValue('')\n }\n\n const removeTag = (tagToRemove: string) => {\n onTagsChange(value.filter((tag) => tag !== tagToRemove))\n }\n\n const handleKeyDown = (e: KeyboardEvent) => {\n if (e.key === 'Enter') {\n e.preventDefault()\n addTag(inputValue)\n }\n\n if (e.key === 'Backspace' && !inputValue && value.length > 0) {\n removeTag(value[value.length - 1])\n }\n }\n\n const isMaxTagsReached = maxTags ? value.length >= maxTags : false\n\n return (\n
    \n setInputValue(e.target.value)}\n onKeyDown={handleKeyDown}\n placeholder={isMaxTagsReached ? 'Max tags reached' : placeholder}\n disabled={disabled}\n />\n\n {value.length > 0 && (\n
      \n {value.map((tag) => (\n
    • \n \n {tag}\n \n removeTag(tag)}\n className={s.deleteButton}\n disabled={disabled}\n aria-label={`Remove tag ${tag}`}\n type=\"button\">\n \n \n
      • \n ))}\n
    \n )}\n\n {maxTags && (\n \n {value.length}/{maxTags} tags\n \n )}\n
    \n )\n}\n" }, { "path": "apps/react-effector-fsd/src/shared/components/TagEditor/index.ts", "content": "export * from './TagEditor'\n" }, { "path": "apps/react-effector-fsd/src/shared/components/TextField/TextField.module.css", "content": ".box {\n display: flex;\n flex-direction: column;\n width: 100%;\n}\n\n.inputWrapper {\n position: relative;\n display: flex;\n align-items: center;\n}\n\n.icon {\n position: absolute;\n top: 50%;\n left: 12px;\n transform: translateY(-50%);\n\n display: flex;\n\n color: var(--color-text-secondary);\n}\n\n.input {\n width: 100%;\n height: 40px;\n padding: 8px 12px;\n border: 1px solid var(--color-border-input-primary);\n border-radius: 4px;\n\n font-size: var(--font-size-m);\n color: var(--color-text-primary);\n\n background-color: var(--color-bg-primary);\n outline: none;\n\n transition:\n 200ms background-color,\n 200ms color,\n 200ms border-color;\n}\n\n.input.large {\n height: 56px;\n}\n\n.input:disabled {\n color: var(--color-disabled);\n}\n\n.input:focus,\n.input:active:enabled {\n border-color: var(--color-border-input-active);\n}\n\n.input:hover:not(:disabled) {\n background-color: var(--color-bg-input-hover);\n}\n\n.input::placeholder {\n color: var(--color-text-secondary);\n}\n\n.input.error {\n border-color: var(--color-text-error);\n}\n\n.input.withIcon {\n padding-left: 40px;\n}\n" }, { "path": "apps/react-effector-fsd/src/shared/components/TextField/TextField.stories.tsx", "content": "import type { Meta, StoryObj } from '@storybook/react-vite'\n\nimport { SearchIcon } from '@/shared/icons'\n\nimport { TextField } from './TextField'\n\nconst meta = {\n title: 'Components/TextField',\n component: TextField,\n parameters: {\n layout: 'centered',\n },\n args: {},\n} satisfies Meta\n\nexport default meta\ntype Story = StoryObj\n\nexport const Primary: Story = {\n args: {\n label: 'Some label',\n placeholder: 'Some placeholder',\n },\n}\n\nexport const Disabled: Story = {\n args: {\n label: 'Some label',\n placeholder: 'Some placeholder',\n disabled: true,\n },\n}\n\nexport const Error: Story = {\n args: {\n label: 'Some label',\n placeholder: 'Some placeholder',\n errorMessage: 'Some error message',\n },\n}\n\nexport const Search: Story = {\n args: {\n label: 'Some label',\n placeholder: 'Some placeholder',\n icon: ,\n inputSize: 'l',\n },\n}\n" }, { "path": "apps/react-effector-fsd/src/shared/components/TextField/TextField.tsx", "content": "import { clsx } from 'clsx'\nimport type { ComponentProps, ReactNode } from 'react'\n\nimport { useGetId } from '../../hooks/useGetId'\nimport { Typography } from '../Typography'\nimport s from './TextField.module.css'\n\nexport type TextFieldSize = 'm' | 'l'\n\nexport type TextFieldProps = {\n errorMessage?: string\n label?: ReactNode\n icon?: ReactNode\n inputSize?: TextFieldSize\n} & ComponentProps<'input'>\n\nexport const TextField = ({\n className,\n errorMessage,\n id,\n icon,\n label,\n inputSize = 'm',\n ...props\n}: TextFieldProps) => {\n const showError = Boolean(errorMessage)\n const inputId = useGetId(id)\n\n return (\n
    \n {label && (\n \n {label}\n \n )}\n\n
    \n {icon && {icon}}\n \n
    \n\n {showError && {errorMessage}}\n
    \n )\n}\n" }, { "path": "apps/react-effector-fsd/src/shared/components/TextField/index.ts", "content": "export * from './TextField'\n" }, { "path": "apps/react-effector-fsd/src/shared/components/Textarea/Textarea.module.css", "content": ".box {\n display: flex;\n flex-direction: column;\n width: 100%;\n}\n\n.textarea {\n resize: none;\n\n width: 100%;\n padding: 8px 12px;\n border: 1px solid var(--color-border-input-primary);\n border-radius: 4px;\n\n font-size: var(--font-size-m);\n color: var(--color-text-primary);\n\n background-color: var(--color-bg-primary);\n outline: none;\n\n transition:\n 200ms background-color,\n 200ms color,\n 200ms border-color;\n}\n\n.textarea:disabled {\n color: var(--color-disabled);\n}\n\n.textarea:focus,\n.textarea:active:enabled {\n border-color: var(--color-border-input-active);\n}\n\n.textarea:hover:not(:disabled) {\n background-color: var(--color-bg-input-hover);\n}\n\n.textarea::placeholder {\n color: var(--color-text-secondary);\n}\n\n.textarea.error {\n border-color: var(--color-text-error);\n}\n" }, { "path": "apps/react-effector-fsd/src/shared/components/Textarea/Textarea.stories.tsx", "content": "import type { Meta, StoryObj } from '@storybook/react-vite'\n\nimport { Textarea } from './Textarea'\n\nconst meta = {\n title: 'Components/Textarea',\n component: Textarea,\n parameters: {\n layout: 'centered',\n },\n args: {},\n} satisfies Meta\n\nexport default meta\ntype Story = StoryObj\n\nexport const Primary: Story = {\n args: {\n label: 'Some label',\n placeholder: 'Some placeholder',\n },\n}\n\nexport const Disabled: Story = {\n args: {\n label: 'Some label',\n placeholder: 'Some placeholder',\n disabled: true,\n },\n}\n\nexport const Error: Story = {\n args: {\n label: 'Some label',\n placeholder: 'Some placeholder',\n errorMessage: 'Some error message',\n },\n}\n\nexport const WithRows: Story = {\n args: {\n label: 'Some label',\n placeholder: 'Some placeholder',\n rows: 5,\n },\n}\n" }, { "path": "apps/react-effector-fsd/src/shared/components/Textarea/Textarea.tsx", "content": "import { clsx } from 'clsx'\nimport type { ComponentProps, ReactNode } from 'react'\n\nimport { useGetId } from '../../hooks/useGetId'\nimport { Typography } from '../Typography'\nimport s from './Textarea.module.css'\n\nexport type TextareaProps = {\n errorMessage?: string\n label?: ReactNode\n} & ComponentProps<'textarea'>\n\nexport const Textarea = ({ className, errorMessage, id, label, ...props }: TextareaProps) => {\n const showError = Boolean(errorMessage)\n const textareaId = useGetId(id)\n\n return (\n
    \n {label && (\n \n {label}\n \n )}\n\n \n

    \n {errors.description &&

    {errors.description.message}

    }\n\n \n {errors.root?.server &&

    {errors.root?.server.message}

    }\n \n )\n}\n" }, { "path": "youtube/tanstack-query-router-fsd/lesson1/src/features/playlists/delete-playlist/api/use-delete-mutation.ts", "content": "import { useMutation, useQueryClient } from '@tanstack/react-query'\n\nimport { client } from '../../../../shared/api/client.ts'\nimport { playlistsKeys } from '../../../../shared/api/keys-factories/playlists-keys-factory.ts'\nimport type { SchemaGetPlaylistsOutput } from '../../../../shared/api/schema.ts'\n\nexport const useDeleteMutation = () => {\n const queryClient = useQueryClient()\n return useMutation({\n mutationFn: async (playlistId: string) => {\n const response = await client.DELETE('/playlists/{playlistId}', {\n params: { path: { playlistId } },\n })\n return response.data\n },\n onSuccess: (_, playlistId) => {\n queryClient.setQueriesData(\n { queryKey: playlistsKeys.lists() },\n (oldData: SchemaGetPlaylistsOutput) => {\n return {\n ...oldData,\n data: oldData.data.filter((p) => p.id !== playlistId),\n }\n }\n )\n queryClient.removeQueries({ queryKey: playlistsKeys.detail(playlistId) })\n },\n })\n}\n" }, { "path": "youtube/tanstack-query-router-fsd/lesson1/src/features/playlists/delete-playlist/ui/delete-playlist.tsx", "content": "import { useDeleteMutation } from '../api/use-delete-mutation.ts'\n\ntype Props = {\n playlistId: string\n onDeleted: (playlistId: string) => void\n}\n\nexport const DeletePlaylist = ({ playlistId, onDeleted }: Props) => {\n const { mutate } = useDeleteMutation()\n\n const handleDeleteClick = () => {\n mutate(playlistId)\n onDeleted?.(playlistId)\n }\n\n return \n}\n" }, { "path": "youtube/tanstack-query-router-fsd/lesson1/src/features/playlists/edit-playlist/api/use-playlist-query.tsx", "content": "import { useQuery } from '@tanstack/react-query'\n\nimport { client } from '../../../../shared/api/client.ts'\n\nexport const usePlaylistQuery = (playlistId: string | null) => {\n return useQuery({\n queryKey: ['playlists', 'details', playlistId],\n queryFn: async () => {\n const response = await client.GET('/playlists/{playlistId}', {\n params: { path: { playlistId: playlistId! } },\n })\n return response.data!\n },\n enabled: !!playlistId,\n })\n}\n" }, { "path": "youtube/tanstack-query-router-fsd/lesson1/src/features/playlists/edit-playlist/api/use-update-playlist-mutation.ts", "content": "import { useMutation, useQueryClient } from '@tanstack/react-query'\n\nimport { client } from '../../../../shared/api/client.ts'\nimport { playlistsKeys } from '../../../../shared/api/keys-factories/playlists-keys-factory.ts'\nimport type {\n SchemaGetPlaylistsOutput,\n SchemaUpdatePlaylistRequestPayload,\n} from '../../../../shared/api/schema.ts'\nimport type { JsonApiErrorDocument } from '../../../../shared/util/json-api-error.ts'\n\ntype MutationVariables = SchemaUpdatePlaylistRequestPayload & { playlistId: string }\n\nexport const useUpdatePlaylistMutation = ({\n onSuccess,\n onError,\n}: {\n onSuccess?: () => void\n onError?: (error: JsonApiErrorDocument) => void\n}) => {\n const queryClient = useQueryClient()\n\n const key = playlistsKeys.myList()\n\n return useMutation({\n mutationFn: async (variables: MutationVariables) => {\n const { playlistId, ...rest } = variables\n const response = await client.PUT('/playlists/{playlistId}', {\n params: { path: { playlistId: playlistId } },\n body: { ...rest, tagIds: [] },\n })\n return response.data\n },\n onMutate: async (variables: MutationVariables) => {\n // Cancel any outgoing refetches\n // (so they don't overwrite our optimistic update)\n await queryClient.cancelQueries({ queryKey: playlistsKeys.all })\n // Snapshot the previous value\n const previousMyPlaylists = queryClient.getQueryData(key)\n // Optimistically update to the new value\n queryClient.setQueryData(key, (oldData: SchemaGetPlaylistsOutput) => {\n return {\n ...oldData,\n data: oldData.data.map((p) => {\n if (p.id === variables.playlistId)\n return {\n ...p,\n attributes: {\n ...p.attributes,\n description: variables.description,\n title: variables.title,\n },\n }\n else return p\n }),\n }\n })\n\n // Return a context with the previous and new todo\n return { previousMyPlaylists }\n },\n // If the mutation fails, use the context we returned above\n onError: (error, __: MutationVariables, context) => {\n queryClient.setQueryData(key, context!.previousMyPlaylists)\n onError?.(error as unknown as JsonApiErrorDocument)\n },\n onSuccess: () => {\n onSuccess?.()\n },\n // Always refetch after error or success:\n onSettled: (_, __, variables: MutationVariables) => {\n queryClient.invalidateQueries({\n queryKey: playlistsKeys.lists(),\n refetchType: 'all',\n })\n queryClient.invalidateQueries({\n queryKey: playlistsKeys.detail(variables.playlistId),\n refetchType: 'all',\n })\n },\n })\n}\n" }, { "path": "youtube/tanstack-query-router-fsd/lesson1/src/features/playlists/edit-playlist/ui/edit-playlist-form.tsx", "content": "import { useEffect } from 'react'\nimport { useForm } from 'react-hook-form'\n\nimport type { SchemaUpdatePlaylistRequestPayload } from '../../../../shared/api/schema.ts'\nimport { queryErrorHandlerForRHFFactory } from '../../../../shared/ui/util/query-error-handler-for-rhf-factory.ts'\nimport { usePlaylistQuery } from '../api/use-playlist-query.tsx'\nimport { useUpdatePlaylistMutation } from '../api/use-update-playlist-mutation.ts'\n\ntype Props = {\n playlistId: string | null\n onCancelEditing: () => void\n}\n\nexport const EditPlaylistForm = ({ playlistId, onCancelEditing }: Props) => {\n const {\n register,\n handleSubmit,\n reset,\n setError,\n formState: { errors },\n } = useForm()\n\n useEffect(() => {\n reset()\n }, [playlistId])\n\n const { data, isPending, isError } = usePlaylistQuery(playlistId)\n\n const { mutate } = useUpdatePlaylistMutation({\n onSuccess: () => {\n onCancelEditing()\n },\n onError: queryErrorHandlerForRHFFactory({ setError }),\n })\n\n const onSubmit = (data: SchemaUpdatePlaylistRequestPayload) => {\n mutate({ ...data, playlistId: playlistId! })\n }\n\n const handleCancelEditingClick = () => {\n onCancelEditing()\n }\n\n if (!playlistId) return <>\n if (isPending) return

    Loading...

    \n if (isError) return

    Error...

    \n\n return (\n
    \n

    Edit Playlist

    \n

    \n \n

    \n {errors.title &&

    {errors.title.message}

    }\n

    \n \n

    \n {errors.description &&

    {errors.description.message}

    }\n \n \n {errors.root?.server &&

    {errors.root?.server.message}

    }\n
    \n )\n}\n" }, { "path": "youtube/tanstack-query-router-fsd/lesson1/src/pages/auth/oauth-callback-page.tsx", "content": "import { useEffect } from 'react'\n\nexport function OAuthCallbackPage() {\n useEffect(() => {\n const url = new URL(window.location.href)\n const code = url.searchParams.get('code')\n\n if (code && window.opener) {\n window.opener.postMessage({ code }, window.location.origin)\n }\n\n window.close()\n }, [])\n\n return (\n <>\n

    OAuth2 Callback page

    \n \n )\n}\n" }, { "path": "youtube/tanstack-query-router-fsd/lesson1/src/pages/my-playlists-page.tsx", "content": "import { Navigate } from '@tanstack/react-router'\nimport { useState } from 'react'\n\nimport { useMeQuery } from '../features/auth/api/use-me-query.ts'\nimport { AddPlaylistForm } from '../features/playlists/add-playlist/ui/add-playlist-form.tsx'\nimport { EditPlaylistForm } from '../features/playlists/edit-playlist/ui/edit-playlist-form.tsx'\nimport { Playlists } from '../widgets/playlists/ui/playlists.tsx'\n\nexport function MyPlaylistsPage() {\n const { data, isPending } = useMeQuery()\n const [editingPlaylistId, setEditingPlaylistId] = useState(null)\n\n const handlePlaylistDelete = (playlistId: string) => {\n if (playlistId === editingPlaylistId) {\n setEditingPlaylistId(null)\n }\n }\n\n if (isPending) return
    Loading...
    \n\n if (!data) {\n return \n }\n\n return (\n
    \n

    My Playlists

    \n
    \n \n
    \n setEditingPlaylistId(playlistId)}\n onPlaylistDeleted={handlePlaylistDelete}\n />\n
    \n setEditingPlaylistId(null)}\n />\n
    \n )\n}\n" }, { "path": "youtube/tanstack-query-router-fsd/lesson1/src/pages/playlists-page.tsx", "content": "import { Playlists } from '../widgets/playlists/ui/playlists.tsx'\n\nexport function PlaylistsPage() {\n return (\n
    \n

    hello it-incubator!!!

    \n \n
    \n )\n}\n" }, { "path": "youtube/tanstack-query-router-fsd/lesson1/src/shared/api/client.ts", "content": "import createClient, { type Middleware } from 'openapi-fetch'\n\nimport { apiKey, baseUrl } from '../config/api-config.ts'\nimport { localStorageKeys } from '../config/localstorage-keys.ts' // generated by openapi-typescript\nimport type { paths } from './schema'\n\n// mutex\nlet refreshPromise: Promise | null = null\n\nfunction makeRefreshToken() {\n if (!refreshPromise) {\n refreshPromise = (async (): Promise => {\n const refreshToken = localStorage.getItem('musicfun-refresh-token')\n if (!refreshToken) throw new Error('No refresh token')\n\n const response = await fetch(baseUrl + 'auth/refresh', {\n method: 'POST',\n headers: {\n 'Content-Type': 'application/json',\n 'API-KEY': apiKey,\n },\n body: JSON.stringify({\n refreshToken: refreshToken,\n }),\n })\n\n if (!response.ok) {\n localStorage.removeItem(localStorageKeys.accessToken)\n localStorage.removeItem(localStorageKeys.refreshToken)\n throw new Error('Refresh token failed')\n }\n const data = await response.json()\n localStorage.setItem(localStorageKeys.accessToken, data.accessToken)\n localStorage.setItem(localStorageKeys.refreshToken, data.refreshToken)\n })()\n\n refreshPromise.finally(() => {\n refreshPromise = null\n })\n\n return refreshPromise\n }\n}\n\nconst authMiddleware: Middleware = {\n onRequest({ request }) {\n // set \"foo\" header\n const accessToken = localStorage.getItem(localStorageKeys.accessToken)\n if (accessToken) {\n request.headers.set('Authorization', 'Bearer ' + accessToken)\n }\n\n // @ts-expect-error hot fix\n request._retryRequest = request.clone()\n\n return request\n },\n async onResponse({ request, response }) {\n if (response.ok) return response\n if (!response.ok && response.status !== 401) {\n const errorBody = await response.json()\n throw errorBody\n }\n\n try {\n await makeRefreshToken()\n // @ts-expect-error ignore it\n const originalRequest: Request = request._retryRequest\n const retryRequest = new Request(originalRequest, {\n headers: new Headers(originalRequest.headers),\n })\n retryRequest.headers.set(\n 'Authorization',\n 'Bearer ' + localStorage.getItem(localStorageKeys.accessToken)\n )\n return fetch(retryRequest)\n } catch {\n return response\n }\n },\n}\n\nexport const client = createClient({\n baseUrl: baseUrl,\n headers: {\n 'api-key': apiKey,\n },\n})\n\nclient.use(authMiddleware)\n" }, { "path": "youtube/tanstack-query-router-fsd/lesson1/src/shared/api/keys-factories/auth-keys-factory.ts", "content": "export const authKeys = {\n all: ['auth'],\n me: () => [...authKeys.all, 'me'],\n}\n" }, { "path": "youtube/tanstack-query-router-fsd/lesson1/src/shared/api/keys-factories/playlists-keys-factory.ts", "content": "import type { SchemaGetPlaylistsRequestPayload } from '../schema.ts'\n\nexport const playlistsKeys = {\n all: ['playlists'],\n lists: () => [...playlistsKeys.all, 'lists'],\n myList: () => [...playlistsKeys.lists(), 'my'],\n list: (filters: Partial) => [...playlistsKeys.lists(), filters],\n details: () => [...playlistsKeys.all, 'details'],\n detail: (id: string) => [...playlistsKeys.details(), id],\n}\n" }, { "path": "youtube/tanstack-query-router-fsd/lesson1/src/shared/api/schema.ts", "content": "/**\n * This file was auto-generated by openapi-typescript.\n * Do not make direct changes to the file.\n */\n\nexport interface paths {\n '/playlists/my': {\n parameters: {\n query?: never\n header?: never\n path?: never\n cookie?: never\n }\n /**\n * Get my playlists\n * @deprecated\n */\n get: operations['PlaylistsController_getMyPlaylists']\n put?: never\n post?: never\n delete?: never\n options?: never\n head?: never\n patch?: never\n trace?: never\n }\n '/playlists': {\n parameters: {\n query?: never\n header?: never\n path?: never\n cookie?: never\n }\n /**\n * Retrieve all playlists\n * @description Query parameters must conform to the **GetPlaylistsRequestPayload** schema.\n */\n get: operations['PlaylistsPublicController_getPlaylists']\n put?: never\n /** Create a new playlist */\n post: operations['PlaylistsController_createPlaylist']\n delete?: never\n options?: never\n head?: never\n patch?: never\n trace?: never\n }\n '/playlists/{playlistId}': {\n parameters: {\n query?: never\n header?: never\n path?: never\n cookie?: never\n }\n /** Get a single playlist by ID */\n get: operations['PlaylistsPublicController_getPlaylistById']\n /** Update a playlist */\n put: operations['PlaylistsController_updatePlaylist']\n post?: never\n /** Delete a playlist */\n delete: operations['PlaylistsController_deletePlaylist']\n options?: never\n head?: never\n patch?: never\n trace?: never\n }\n '/playlists/{playlistId}/reorder': {\n parameters: {\n query?: never\n header?: never\n path?: never\n cookie?: never\n }\n get?: never\n /** Reorder playlists */\n put: operations['PlaylistsController_reorderPlaylist']\n post?: never\n delete?: never\n options?: never\n head?: never\n patch?: never\n trace?: never\n }\n '/playlists/{playlistId}/images/main': {\n parameters: {\n query?: never\n header?: never\n path?: never\n cookie?: never\n }\n get?: never\n put?: never\n /**\n * Upload playlist cover\n * @description Minimum height — 500px; image must be square\n */\n post: operations['PlaylistsController_uploadMainImage']\n /** Delete playlist cover */\n delete: operations['PlaylistsController_deleteTrackCover']\n options?: never\n head?: never\n patch?: never\n trace?: never\n }\n '/playlists/tracks': {\n parameters: {\n query?: never\n header?: never\n path?: never\n cookie?: never\n }\n /** Get list of all tracks in all playlists */\n get: operations['TracksPublicController_getAllTracks']\n put?: never\n post?: never\n delete?: never\n options?: never\n head?: never\n patch?: never\n trace?: never\n }\n '/playlists/{playlistId}/tracks': {\n parameters: {\n query?: never\n header?: never\n path?: never\n cookie?: never\n }\n /** Get list of tracks in a playlist */\n get: operations['TracksPublicController_getPlaylistTracks']\n put?: never\n post?: never\n delete?: never\n options?: never\n head?: never\n patch?: never\n trace?: never\n }\n '/playlists/tracks/{trackId}': {\n parameters: {\n query?: never\n header?: never\n path?: never\n cookie?: never\n }\n /** Get track details by ID */\n get: operations['TracksPublicController_getTrackDetails']\n /** Update track information */\n put: operations['TracksController_updateTrack']\n post?: never\n /** Permanently delete a track */\n delete: operations['TracksController_deleteTrackCompletely']\n options?: never\n head?: never\n patch?: never\n trace?: never\n }\n '/playlists/tracks/{trackId}/likes': {\n parameters: {\n query?: never\n header?: never\n path?: never\n cookie?: never\n }\n get?: never\n put?: never\n /** Like or toggle like on a track */\n post: operations['TracksPublicController_likeTrack']\n delete?: never\n options?: never\n head?: never\n patch?: never\n trace?: never\n }\n '/playlists/tracks/{trackId}/dislikes': {\n parameters: {\n query?: never\n header?: never\n path?: never\n cookie?: never\n }\n get?: never\n put?: never\n /** Dislike or toggle dislike on a track */\n post: operations['TracksPublicController_dislikeTrack']\n delete?: never\n options?: never\n head?: never\n patch?: never\n trace?: never\n }\n '/playlists/tracks/{trackId}/reactions': {\n parameters: {\n query?: never\n header?: never\n path?: never\n cookie?: never\n }\n get?: never\n put?: never\n post?: never\n /** Remove user reaction from a track */\n delete: operations['TracksPublicController_removeTrackReaction']\n options?: never\n head?: never\n patch?: never\n trace?: never\n }\n '/playlists/{playlistId}/likes': {\n parameters: {\n query?: never\n header?: never\n path?: never\n cookie?: never\n }\n get?: never\n put?: never\n /** Like a playlist */\n post: operations['PlaylistsPublicController_likePlaylist']\n delete?: never\n options?: never\n head?: never\n patch?: never\n trace?: never\n }\n '/playlists/{playlistId}/dislikes': {\n parameters: {\n query?: never\n header?: never\n path?: never\n cookie?: never\n }\n get?: never\n put?: never\n /** Dislike a playlist */\n post: operations['PlaylistsPublicController_dislikePlaylist']\n delete?: never\n options?: never\n head?: never\n patch?: never\n trace?: never\n }\n '/playlists/{playlistId}/reactions': {\n parameters: {\n query?: never\n header?: never\n path?: never\n cookie?: never\n }\n get?: never\n put?: never\n post?: never\n /** Remove user reaction from a playlist */\n delete: operations['PlaylistsPublicController_removePlaylistReaction']\n options?: never\n head?: never\n patch?: never\n trace?: never\n }\n '/playlists/{playlistId}/tracks/{trackId}/reorder': {\n parameters: {\n query?: never\n header?: never\n path?: never\n cookie?: never\n }\n get?: never\n /** Reorder tracks in a playlist */\n put: operations['TracksController_reorderTrack']\n post?: never\n delete?: never\n options?: never\n head?: never\n patch?: never\n trace?: never\n }\n '/playlists/{playlistId}/relationships/tracks': {\n parameters: {\n query?: never\n header?: never\n path?: never\n cookie?: never\n }\n get?: never\n put?: never\n /** Add a track to your playlist */\n post: operations['TracksController_addTrackToPlaylist']\n delete?: never\n options?: never\n head?: never\n patch?: never\n trace?: never\n }\n '/playlists/{playlistId}/relationships/tracks/{trackId}': {\n parameters: {\n query?: never\n header?: never\n path?: never\n cookie?: never\n }\n get?: never\n put?: never\n post?: never\n /** Remove a track from your playlist */\n delete: operations['TracksController_unbindTrackFromPlaylist']\n options?: never\n head?: never\n patch?: never\n trace?: never\n }\n '/playlists/tracks/{trackId}/actions/publish': {\n parameters: {\n query?: never\n header?: never\n path?: never\n cookie?: never\n }\n get?: never\n put?: never\n /** Publish a track (make it publicly available) */\n post: operations['TracksController_publishTrack']\n delete?: never\n options?: never\n head?: never\n patch?: never\n trace?: never\n }\n '/playlists/tracks/{trackId}/cover': {\n parameters: {\n query?: never\n header?: never\n path?: never\n cookie?: never\n }\n get?: never\n put?: never\n /** Upload track cover */\n post: operations['TracksController_uploadTrackCover']\n /** Delete track cover */\n delete: operations['TracksController_deleteTrackCover']\n options?: never\n head?: never\n patch?: never\n trace?: never\n }\n '/playlists/tracks/upload': {\n parameters: {\n query?: never\n header?: never\n path?: never\n cookie?: never\n }\n get?: never\n put?: never\n /** Create a track with MP3 file upload */\n post: operations['TracksController_uploadTrackMp3']\n delete?: never\n options?: never\n head?: never\n patch?: never\n trace?: never\n }\n '/artists': {\n parameters: {\n query?: never\n header?: never\n path?: never\n cookie?: never\n }\n get?: never\n put?: never\n /** Create a new artist */\n post: operations['ArtistsController_createArtist']\n delete?: never\n options?: never\n head?: never\n patch?: never\n trace?: never\n }\n '/artists/search': {\n parameters: {\n query?: never\n header?: never\n path?: never\n cookie?: never\n }\n /** Search artists by substring */\n get: operations['ArtistsController_searchArtist']\n put?: never\n post?: never\n delete?: never\n options?: never\n head?: never\n patch?: never\n trace?: never\n }\n '/artists/{id}': {\n parameters: {\n query?: never\n header?: never\n path?: never\n cookie?: never\n }\n get?: never\n put?: never\n post?: never\n /** Delete an artist by ID */\n delete: operations['ArtistsController_deleteArtist']\n options?: never\n head?: never\n patch?: never\n trace?: never\n }\n '/auth/oauth-redirect': {\n parameters: {\n query?: never\n header?: never\n path?: never\n cookie?: never\n }\n /**\n * OAuth редирект\n * @description The callback URL to redirect after grand access,\n * https://oauth.apihub.it-incubator.io/realms/apihub/protocol/openid-connect/auth?client_id=spotifun&response_type=code&redirect_uri=http://localhost:3000/oauth2/callback&scope=openid\n */\n get: operations['AuthController_OauthRedirect']\n put?: never\n post?: never\n delete?: never\n options?: never\n head?: never\n patch?: never\n trace?: never\n }\n '/auth/login': {\n parameters: {\n query?: never\n header?: never\n path?: never\n cookie?: never\n }\n get?: never\n put?: never\n /** Залогиниться с помощью кода, полученного после редиректа после авторизации через OAuth */\n post: operations['AuthController_login']\n delete?: never\n options?: never\n head?: never\n patch?: never\n trace?: never\n }\n '/auth/refresh': {\n parameters: {\n query?: never\n header?: never\n path?: never\n cookie?: never\n }\n get?: never\n put?: never\n /** Обновить пару refresh/access токенов */\n post: operations['AuthController_refresh']\n delete?: never\n options?: never\n head?: never\n patch?: never\n trace?: never\n }\n '/auth/logout': {\n parameters: {\n query?: never\n header?: never\n path?: never\n cookie?: never\n }\n get?: never\n put?: never\n /** Деактивировать refresh-token */\n post: operations['AuthController_logout']\n delete?: never\n options?: never\n head?: never\n patch?: never\n trace?: never\n }\n '/auth/me': {\n parameters: {\n query?: never\n header?: never\n path?: never\n cookie?: never\n }\n /** Получить текущего пользователя по access токену */\n get: operations['AuthController_getMe']\n put?: never\n post?: never\n delete?: never\n options?: never\n head?: never\n patch?: never\n trace?: never\n }\n '/tags': {\n parameters: {\n query?: never\n header?: never\n path?: never\n cookie?: never\n }\n get?: never\n put?: never\n /** Create a new tag */\n post: operations['TagsController_createTag']\n delete?: never\n options?: never\n head?: never\n patch?: never\n trace?: never\n }\n '/tags/search': {\n parameters: {\n query?: never\n header?: never\n path?: never\n cookie?: never\n }\n /** Search tags by substring */\n get: operations['TagsController_searchTags']\n put?: never\n post?: never\n delete?: never\n options?: never\n head?: never\n patch?: never\n trace?: never\n }\n '/tags/{id}': {\n parameters: {\n query?: never\n header?: never\n path?: never\n cookie?: never\n }\n get?: never\n put?: never\n post?: never\n /** Delete a tag by ID */\n delete: operations['TagsController_deleteTag']\n options?: never\n head?: never\n patch?: never\n trace?: never\n }\n}\nexport type webhooks = Record\nexport interface components {\n schemas: {\n UserOutputDTO: {\n /** @description Unique identifier of the user */\n id: string\n /** @description Name of the user */\n name: string\n }\n /**\n * @description Type of the image size (e.g., original, thumbnail variants)\n * @enum {string}\n */\n ImageSizeType: 'original' | 'thumbnail' | 'medium'\n ImageDto: {\n /** @description Type of the image size (e.g., original, thumbnail variants) */\n type: components['schemas']['ImageSizeType']\n /** @description Image width in pixels */\n width: number\n /** @description Image height in pixels */\n height: number\n /** @description Image file size in bytes */\n fileSize: number\n /** @description Full public URL of the image */\n url: string\n }\n PlaylistImagesOutputDTO: {\n /** @description Original images and thumbnail previews */\n main?: components['schemas']['ImageDto'][]\n }\n GetTagOutput: {\n /** @description Unique identifier of the tag */\n id: string\n /** @description Original name of the tag */\n name: string\n }\n /**\n * @description User reaction: 0 – guest or no reaction; 1 – like; -1 – dislike\n * @enum {number}\n */\n ReactionValue: 0 | 1 | -1\n PlaylistAttributesDto: {\n /** @description Title of the playlist */\n title: string\n /** @description Description of the playlist */\n description: string | null\n /**\n * Format: date-time\n * @description Date and time when the playlist was added (ISO 8601)\n */\n addedAt: string\n /**\n * Format: date-time\n * @description Date and time when the playlist was last updated (ISO 8601)\n */\n updatedAt: string\n /** @description Order index of the playlist */\n order: number\n /** @description User who created the playlist */\n user: components['schemas']['UserOutputDTO']\n /** @description Images associated with the playlist */\n images: components['schemas']['PlaylistImagesOutputDTO']\n /** @description Tags linked to the playlist */\n tags: components['schemas']['GetTagOutput'][]\n /** @description Total number of likes for this playlist */\n likesCount: number\n /** @description Total number of dislikes for this playlist */\n dislikesCount: number\n /** @description User reaction: 0 – guest or no reaction; 1 – like; -1 – dislike */\n currentUserReaction: components['schemas']['ReactionValue']\n }\n PlaylistListItemJsonApiData: {\n /** @description Unique identifier of the playlist */\n id: string\n /**\n * @description Resource type (should be \"playlists\")\n * @example playlists\n */\n type: string\n /** @description Attributes of the playlist resource */\n attributes: components['schemas']['PlaylistAttributesDto']\n }\n GetMyPlaylistsOutput: {\n /** @description Array of playlist resource objects owned by the current user */\n data: components['schemas']['PlaylistListItemJsonApiData'][]\n }\n CreatePlaylistRequestPayload: {\n /** @description Playlist title (1 to 100 characters) */\n title: string\n /** @description Playlist description (up to 1000 characters) */\n description: string | null\n }\n PlaylistOutputAttributes: {\n /** @description Title of the playlist */\n title: string\n /** @description Description of the playlist */\n description: string | null\n /**\n * Format: date-time\n * @description Date and time when the playlist was added (ISO 8601)\n */\n addedAt: string\n /**\n * Format: date-time\n * @description Date and time when the playlist was last updated (ISO 8601)\n */\n updatedAt: string\n /** @description Order index of the playlist */\n order: number\n /** @description User who created the playlist */\n user: components['schemas']['UserOutputDTO']\n /** @description Images associated with the playlist */\n images: components['schemas']['PlaylistImagesOutputDTO']\n /** @description Tags linked to the playlist */\n tags: components['schemas']['GetTagOutput'][]\n /** @description Total number of likes for this playlist */\n likesCount: number\n /** @description Total number of dislikes for this playlist */\n dislikesCount: number\n /** @description User reaction: 0 – guest or no reaction; 1 – like; -1 – dislike */\n currentUserReaction: components['schemas']['ReactionValue']\n }\n PlaylistOutput: {\n /** @description Unique identifier of the playlist */\n id: string\n /**\n * @description Resource type (should be \"playlists\")\n * @example playlists\n */\n type: string\n /** @description Playlist attributes object */\n attributes: components['schemas']['PlaylistOutputAttributes']\n }\n GetPlaylistOutput: {\n /** @description JSON:API single-resource response wrapper */\n data: components['schemas']['PlaylistOutput']\n }\n UpdatePlaylistRequestPayload: {\n /** @description Playlist title (1 – 100 characters) */\n title: string\n /**\n * @description Playlist description (up to 1000 characters)\n * @example Cool playlist\n */\n description: string | null\n /** @description Tag IDs to associate with the playlist (0 – 5 items; [] = clear tags) */\n tagIds: string[]\n }\n ReorderPlaylistsRequestPayload: {\n /**\n * Format: uuid\n * @description ID of the playlist after which the current playlist should be inserted. Send null to place the playlist at the beginning of the list.\n */\n putAfterItemId: string | null\n }\n GetImagesOutput: {\n /** @description List of original images and thumbnail versions (e.g., original, 320x180, etc.) */\n main?: components['schemas']['ImageDto'][]\n }\n GetTracksRequestPayload: {\n /**\n * @description Page number for pagination (starting from 1)\n * @default 1\n */\n pageNumber: number\n /**\n * @description Page size for pagination (between 1 and 20)\n * @default 20\n */\n pageSize: number\n /** @description Search term for filtering playlists by name */\n search?: string\n /**\n * @description Field by which to sort tracks\n * @default publishedAt\n * @enum {string}\n */\n sortBy: 'publishedAt' | 'likesCount'\n /**\n * @description Sort direction (ascending or descending)\n * @default desc\n * @enum {string}\n */\n sortDirection: 'asc' | 'desc'\n /** @description Filter by tag IDs (multiple values allowed) */\n tagsIds?: string[]\n /** @description Filter by artist IDs (multiple values allowed) */\n artistsIds?: string[]\n /** @description Filter by user ID (track creator's ID) */\n userId?: string\n /** @description If true, include unpublished tracks (drafts) of current user if userId === currentUserId */\n includeDrafts?: boolean\n /**\n * @description Pagination type: \"offset\" for page-number pagination; \"cursor\" for keyset/seek-based pagination.\n * @default offset\n * @enum {string}\n */\n paginationType: 'offset' | 'cursor'\n /** @description Base64-encoded cursor for keyset pagination. Used only if paginationType is \"cursor\". */\n cursor?: string | null\n }\n AttachmentDto: {\n /** @description Unique identifier of the entity */\n id: string\n /**\n * Format: date-time\n * @description Date and time when the entity was added\n */\n addedAt: string\n /**\n * Format: date-time\n * @description Date and time when the entity was last updated\n */\n updatedAt: string\n /** @description Version number of the entity (for concurrency control) */\n version: number\n /**\n * @description Public URL to access the uploaded file\n * @example https://cdn.example.com/uploads/track123/cover.jpg\n */\n url: string\n /**\n * @description MIME type of the file\n * @example image/jpeg\n */\n contentType: string\n /**\n * @description Original filename uploaded by the user\n * @example cover.jpg\n */\n originalName: string\n /**\n * @description Size of the file in bytes\n * @example 34872\n */\n fileSize: number\n }\n TrackListItemOutputAttributes: {\n title: string\n addedAt: string\n attachments: components['schemas']['AttachmentDto'][]\n images: components['schemas']['GetImagesOutput']\n user: components['schemas']['UserOutputDTO']\n /**\n * @description 0 – не залогинен или не реагировал; 1 – лайк; −1 – дизлайк\n * @enum {number}\n */\n currentUserReaction: 0 | 1 | -1\n isPublished: boolean\n publishedAt?: string\n }\n ArtistRelationship: {\n id: string\n type: string\n }\n ArtistsRelationship: {\n data: components['schemas']['ArtistRelationship'][]\n }\n TrackRelationships: {\n artists: components['schemas']['ArtistsRelationship']\n }\n TrackListItemOutput: {\n id: string\n /** @example tracks */\n type: string\n attributes: components['schemas']['TrackListItemOutputAttributes']\n relationships: components['schemas']['TrackRelationships']\n }\n JsonApiMetaWithPagingAndCursor: {\n page: number\n pageSize: number\n /** @description Total count may be absent when using keyset pagination */\n totalCount: number | null\n /** @description Total number of pages */\n pagesCount: number | null\n /** @description Cursor for the next page */\n nextCursor: string | null\n }\n OmitTypeClass: {\n /** @description Name of the artist */\n name: string\n }\n IncludedArtistOutput: {\n id: string\n type: string\n attributes: components['schemas']['OmitTypeClass']\n }\n GetTrackListOutput: {\n data: components['schemas']['TrackListItemOutput'][]\n meta: components['schemas']['JsonApiMetaWithPagingAndCursor']\n included: components['schemas']['IncludedArtistOutput'][]\n }\n PlaylistTrackAttributes: {\n /** @description Title of the track */\n title: string\n /** @description Order index of the track in the playlist */\n order: number\n /**\n * Format: date-time\n * @description Date and time when the track was added to the playlist (ISO 8601)\n */\n addedAt: string\n /**\n * Format: date-time\n * @description Date and time when the track was last updated in the playlist (ISO 8601)\n */\n updatedAt: string\n /** @description Attachments related to the track */\n attachments: components['schemas']['AttachmentDto'][]\n /** @description Images associated with the track */\n images: components['schemas']['GetImagesOutput']\n /**\n * @description User reaction: 0 – guest or no reaction; 1 – liked; -1 – disliked\n * @enum {number|null}\n */\n currentUserReaction: 0 | 1 | -1 | null\n }\n GetPlaylistTrackListOutputData: {\n id: string\n /** @example tracks */\n type: string\n attributes: components['schemas']['PlaylistTrackAttributes']\n relationships: components['schemas']['TrackRelationships']\n }\n JsonApiMeta: {\n totalCount: number\n }\n GetPlaylistTrackListOutput: {\n data: components['schemas']['GetPlaylistTrackListOutputData'][]\n meta: components['schemas']['JsonApiMeta']\n included: components['schemas']['IncludedArtistOutput'][]\n }\n GetArtistOutput: {\n /** @description Unique identifier of the artist */\n id: string\n /** @description Name of the artist */\n name: string\n }\n TrackDetailsAttributes: {\n /** @description Track title */\n title: string\n /** @description Track lyrics text */\n lyrics?: string | null\n /**\n * Format: date-time\n * @description Release date in ISO 8601 format\n */\n releaseDate?: string | null\n /**\n * Format: date-time\n * @description Date and time when the track was added (ISO 8601)\n */\n addedAt: string\n /**\n * Format: date-time\n * @description Date and time when the track was last updated (ISO 8601)\n */\n updatedAt: string\n /** @description Duration of the track in seconds */\n duration: number\n /** @description Total number of likes for this track */\n likesCount: number\n /** @description Total number of dislikes for this track */\n dislikesCount: number\n /** @description List of attachments related to the track */\n attachments: components['schemas']['AttachmentDto'][]\n /** @description Images associated with the track */\n images: components['schemas']['GetImagesOutput']\n /** @description Tags associated with the track */\n tags: components['schemas']['GetTagOutput'][]\n /** @description Artists associated with the track */\n artists: components['schemas']['GetArtistOutput'][]\n /** @description Publication status of the track */\n isPublished: boolean\n /**\n * Format: date-time\n * @description Publication date in ISO 8601 format\n */\n publishedAt?: string | null\n /**\n * @description User reaction: 0 – guest or no reaction; 1 – user liked; -1 – user disliked\n * @enum {number}\n */\n currentUserReaction: 0 | 1 | -1\n }\n TrackDetailsData: {\n /** @description Unique identifier of the track */\n id: string\n /**\n * @description Resource type (should be \"tracks\")\n * @example tracks\n */\n type: string\n /** @description Detailed attributes of the track resource */\n attributes: components['schemas']['TrackDetailsAttributes']\n }\n GetTrackDetailsOutput: {\n /** @description JSON:API single-track details response wrapper */\n data: components['schemas']['TrackDetailsData']\n }\n ReactionOutput: {\n objectId: string\n /** @enum {number} */\n value: 0 | 1 | -1\n likes: number\n dislikes: number\n }\n GetPlaylistsRequestPayload: {\n /**\n * @description Page number for pagination (starting from 1)\n * @default 1\n */\n pageNumber: number\n /**\n * @description Page size for pagination (between 1 and 20)\n * @default 20\n */\n pageSize: number\n /** @description Search term for filtering playlists by name */\n search?: string\n /**\n * @description Field by which to sort playlists\n * @default addedAt\n * @enum {string}\n */\n sortBy: 'addedAt' | 'likesCount'\n /**\n * @description Sort direction (ascending or descending)\n * @default desc\n * @enum {string}\n */\n sortDirection: 'asc' | 'desc'\n /** @description Filter by tag IDs. Multiple values allowed, e.g.: tagsIds=tag1&tagsIds=tag2 */\n tagsIds?: string[]\n /** @description Filter by user ID (playlist creator’s ID) */\n userId?: string\n /** @description Filter by track ID – only playlists containing this track will be returned */\n trackId?: string\n }\n JsonApiMetaWithPaging: {\n totalCount: number\n page: number\n pageSize: number\n pagesCount: number\n }\n GetPlaylistsOutput: {\n /** @description Array of playlist resource objects */\n data: components['schemas']['PlaylistListItemJsonApiData'][]\n /** @description Pagination metadata for the playlists list */\n meta: components['schemas']['JsonApiMetaWithPaging']\n }\n ReorderTracksRequestPayload: {\n /**\n * Format: uuid\n * @description ID of the track after which the current track should be inserted. Send null to place the track at the beginning of the list.\n * @example a1b2c3d4-e5f6-7890-abcd-1234567890ef\n */\n putAfterItemId: string | null\n }\n UpdateTrackRequestPayload: {\n /** @description Track title (1 to 100 characters) */\n title: string\n /** @description Track lyrics (up to 5000 characters) */\n lyrics: string | null\n /**\n * Format: date-time\n * @description Release date in ISO 8601 format\n */\n releaseDate: string | null\n /** @description Array of tag IDs to associate with the track (up to 5) */\n tagIds: string[]\n /** @description Array of artist IDs to associate with the track (up to 5) */\n artistsIds: string[]\n }\n TrackOutputAttributes: {\n /** @description Track title */\n title: string\n /** @description Track lyrics text */\n lyrics?: string | null\n /**\n * Format: date-time\n * @description Release date in ISO 8601 format\n */\n releaseDate?: string | null\n /**\n * Format: date-time\n * @description Date and time when the track was added (ISO 8601)\n */\n addedAt: string\n /**\n * Format: date-time\n * @description Date and time when the track was last updated (ISO 8601)\n */\n updatedAt: string\n /** @description Duration of the track in seconds */\n duration: number\n /** @description Total number of likes for this track */\n likesCount: number\n /** @description Total number of dislikes for this track */\n dislikesCount: number\n /** @description List of attachments related to the track */\n attachments: components['schemas']['AttachmentDto'][]\n /** @description Images associated with the track */\n images: components['schemas']['GetImagesOutput']\n /** @description Tags associated with the track */\n tags: components['schemas']['GetTagOutput'][]\n /** @description Artists associated with the track */\n artists: components['schemas']['GetArtistOutput'][]\n /** @description Publication status of the track */\n isPublished: boolean\n /**\n * Format: date-time\n * @description Publication date in ISO 8601 format\n */\n publishedAt?: string | null\n /**\n * @description User reaction: 0 – guest or no reaction; 1 – user liked; -1 – user disliked\n * @enum {number}\n */\n currentUserReaction: 0 | 1 | -1\n }\n TrackOutput: {\n /** @description Unique identifier of the track */\n id: string\n /**\n * @description Resource type (should be \"tracks\")\n * @example tracks\n */\n type: string\n /** @description Attributes of the track resource */\n attributes: components['schemas']['TrackOutputAttributes']\n }\n GetTrackOutput: {\n /** @description JSON:API single-track response wrapper */\n data: components['schemas']['TrackOutput']\n }\n AddTrackToPlaylistRequestPayload: {\n /** @description ID of the track to add to the playlist */\n trackId: string\n }\n CreateArtistRequestPayload: {\n /** @description Artist name (must be between 2 and 30 characters) */\n name: string\n }\n LoginRequestPayload: {\n /** @description Код, полученный от oauth-сервер после редиректа */\n code: string\n /**\n * @description Укажите тоже значение, что и во время первого запроса на oauth-сервер\n * @example http://localhost:3000/oauth2/callback\n */\n redirectUri: string\n /**\n * @description Срок жизни accessToken-а (по дефолту \"3m\"), Можно использовать значение в формате: be a string like \"60s\", \"3m\", \"2h\", \"1d\"\n * @example 3m\n */\n accessTokenTTL?: string\n /** @description Как долго будет жить refreshToken. Если true - 1 месяц, если false - 30 минут. Явно указанный accessTokenTTL не должен быть больше, чем время жизни refreshToken */\n rememberMe: boolean\n }\n RefreshOutput: {\n refreshToken: string\n accessToken: string\n }\n BadRequestException: Record\n UnauthorizedException: Record\n RefreshRequestPayload: {\n refreshToken: string\n }\n LogoutRequestPayload: {\n refreshToken: string\n }\n GetMeOutput: {\n userId: string\n login: string\n }\n CreateTagRequestPayload: {\n /** @description Tag name (2 to 30 characters) */\n name: string\n }\n /**\n * Format: binary\n * @description Файл в multipart/form-data\n */\n BinaryFile: string\n }\n responses: never\n parameters: never\n requestBodies: never\n headers: never\n pathItems: never\n}\nexport type SchemaUserOutputDto = components['schemas']['UserOutputDTO']\nexport type SchemaImageSizeType = components['schemas']['ImageSizeType']\nexport type SchemaImageDto = components['schemas']['ImageDto']\nexport type SchemaPlaylistImagesOutputDto = components['schemas']['PlaylistImagesOutputDTO']\nexport type SchemaGetTagOutput = components['schemas']['GetTagOutput']\nexport type SchemaReactionValue = components['schemas']['ReactionValue']\nexport type SchemaPlaylistAttributesDto = components['schemas']['PlaylistAttributesDto']\nexport type SchemaPlaylistListItemJsonApiData = components['schemas']['PlaylistListItemJsonApiData']\nexport type SchemaGetMyPlaylistsOutput = components['schemas']['GetMyPlaylistsOutput']\nexport type SchemaCreatePlaylistRequestPayload =\n components['schemas']['CreatePlaylistRequestPayload']\nexport type SchemaPlaylistOutputAttributes = components['schemas']['PlaylistOutputAttributes']\nexport type SchemaPlaylistOutput = components['schemas']['PlaylistOutput']\nexport type SchemaGetPlaylistOutput = components['schemas']['GetPlaylistOutput']\nexport type SchemaUpdatePlaylistRequestPayload =\n components['schemas']['UpdatePlaylistRequestPayload']\nexport type SchemaReorderPlaylistsRequestPayload =\n components['schemas']['ReorderPlaylistsRequestPayload']\nexport type SchemaGetImagesOutput = components['schemas']['GetImagesOutput']\nexport type SchemaGetTracksRequestPayload = components['schemas']['GetTracksRequestPayload']\nexport type SchemaAttachmentDto = components['schemas']['AttachmentDto']\nexport type SchemaTrackListItemOutputAttributes =\n components['schemas']['TrackListItemOutputAttributes']\nexport type SchemaArtistRelationship = components['schemas']['ArtistRelationship']\nexport type SchemaArtistsRelationship = components['schemas']['ArtistsRelationship']\nexport type SchemaTrackRelationships = components['schemas']['TrackRelationships']\nexport type SchemaTrackListItemOutput = components['schemas']['TrackListItemOutput']\nexport type SchemaJsonApiMetaWithPagingAndCursor =\n components['schemas']['JsonApiMetaWithPagingAndCursor']\nexport type SchemaOmitTypeClass = components['schemas']['OmitTypeClass']\nexport type SchemaIncludedArtistOutput = components['schemas']['IncludedArtistOutput']\nexport type SchemaGetTrackListOutput = components['schemas']['GetTrackListOutput']\nexport type SchemaPlaylistTrackAttributes = components['schemas']['PlaylistTrackAttributes']\nexport type SchemaGetPlaylistTrackListOutputData =\n components['schemas']['GetPlaylistTrackListOutputData']\nexport type SchemaJsonApiMeta = components['schemas']['JsonApiMeta']\nexport type SchemaGetPlaylistTrackListOutput = components['schemas']['GetPlaylistTrackListOutput']\nexport type SchemaGetArtistOutput = components['schemas']['GetArtistOutput']\nexport type SchemaTrackDetailsAttributes = components['schemas']['TrackDetailsAttributes']\nexport type SchemaTrackDetailsData = components['schemas']['TrackDetailsData']\nexport type SchemaGetTrackDetailsOutput = components['schemas']['GetTrackDetailsOutput']\nexport type SchemaReactionOutput = components['schemas']['ReactionOutput']\nexport type SchemaGetPlaylistsRequestPayload = components['schemas']['GetPlaylistsRequestPayload']\nexport type SchemaJsonApiMetaWithPaging = components['schemas']['JsonApiMetaWithPaging']\nexport type SchemaGetPlaylistsOutput = components['schemas']['GetPlaylistsOutput']\nexport type SchemaReorderTracksRequestPayload = components['schemas']['ReorderTracksRequestPayload']\nexport type SchemaUpdateTrackRequestPayload = components['schemas']['UpdateTrackRequestPayload']\nexport type SchemaTrackOutputAttributes = components['schemas']['TrackOutputAttributes']\nexport type SchemaTrackOutput = components['schemas']['TrackOutput']\nexport type SchemaGetTrackOutput = components['schemas']['GetTrackOutput']\nexport type SchemaAddTrackToPlaylistRequestPayload =\n components['schemas']['AddTrackToPlaylistRequestPayload']\nexport type SchemaCreateArtistRequestPayload = components['schemas']['CreateArtistRequestPayload']\nexport type SchemaLoginRequestPayload = components['schemas']['LoginRequestPayload']\nexport type SchemaRefreshOutput = components['schemas']['RefreshOutput']\nexport type SchemaBadRequestException = components['schemas']['BadRequestException']\nexport type SchemaUnauthorizedException = components['schemas']['UnauthorizedException']\nexport type SchemaRefreshRequestPayload = components['schemas']['RefreshRequestPayload']\nexport type SchemaLogoutRequestPayload = components['schemas']['LogoutRequestPayload']\nexport type SchemaGetMeOutput = components['schemas']['GetMeOutput']\nexport type SchemaCreateTagRequestPayload = components['schemas']['CreateTagRequestPayload']\nexport type SchemaBinaryFile = components['schemas']['BinaryFile']\nexport type $defs = Record\nexport interface operations {\n PlaylistsController_getMyPlaylists: {\n parameters: {\n query?: never\n header?: never\n path?: never\n cookie?: never\n }\n requestBody?: never\n responses: {\n /** @description OK: List of playlists retrieved successfully */\n 200: {\n headers: {\n [name: string]: unknown\n }\n content: {\n 'application/json': components['schemas']['GetMyPlaylistsOutput']\n }\n }\n /** @description Unauthorized: User not authenticated */\n 401: {\n headers: {\n [name: string]: unknown\n }\n content?: never\n }\n }\n }\n PlaylistsPublicController_getPlaylists: {\n parameters: {\n query?: {\n /** @description Page number for pagination (starting from 1) */\n pageNumber?: number\n /** @description Page size for pagination (between 1 and 20) */\n pageSize?: number\n /** @description Search term for filtering playlists by name */\n search?: string\n /** @description Field by which to sort playlists */\n sortBy?: 'addedAt' | 'likesCount'\n /** @description Sort direction (ascending or descending) */\n sortDirection?: 'asc' | 'desc'\n /** @description Filter by tag IDs. Multiple values allowed, e.g.: tagsIds=tag1&tagsIds=tag2 */\n tagsIds?: string[]\n /** @description Filter by user ID (playlist creator’s ID) */\n userId?: string\n /** @description Filter by track ID – only playlists containing this track will be returned */\n trackId?: string\n }\n header?: never\n path?: never\n cookie?: never\n }\n requestBody?: never\n responses: {\n /** @description OK: JSON:API list of playlists with pagination */\n 200: {\n headers: {\n [name: string]: unknown\n }\n content: {\n 'application/json': components['schemas']['GetPlaylistsOutput']\n }\n }\n }\n }\n PlaylistsController_createPlaylist: {\n parameters: {\n query?: never\n header?: never\n path?: never\n cookie?: never\n }\n requestBody: {\n content: {\n 'application/json': components['schemas']['CreatePlaylistRequestPayload']\n }\n }\n responses: {\n /** @description Created: Playlist created successfully */\n 201: {\n headers: {\n [name: string]: unknown\n }\n content: {\n 'application/json': components['schemas']['GetPlaylistOutput']\n }\n }\n /** @description Forbidden: Playlist creation limit exceeded */\n 403: {\n headers: {\n [name: string]: unknown\n }\n content?: never\n }\n }\n }\n PlaylistsPublicController_getPlaylistById: {\n parameters: {\n query?: never\n header?: never\n path: {\n /** @description ID of the playlist */\n playlistId: string\n }\n cookie?: never\n }\n requestBody?: never\n responses: {\n /** @description OK: Playlist retrieved successfully */\n 200: {\n headers: {\n [name: string]: unknown\n }\n content: {\n 'application/json': components['schemas']['GetPlaylistOutput']\n }\n }\n /** @description Not Found: Playlist with the given ID not found */\n 404: {\n headers: {\n [name: string]: unknown\n }\n content?: never\n }\n }\n }\n PlaylistsController_updatePlaylist: {\n parameters: {\n query?: never\n header?: never\n path: {\n playlistId: string\n }\n cookie?: never\n }\n requestBody: {\n content: {\n 'application/json': components['schemas']['UpdatePlaylistRequestPayload']\n }\n }\n responses: {\n /** @description No Content: Playlist updated successfully */\n 204: {\n headers: {\n [name: string]: unknown\n }\n content?: never\n }\n /** @description Bad Request: Validation error (e.g., tag limit exceeded) */\n 400: {\n headers: {\n [name: string]: unknown\n }\n content?: never\n }\n /** @description Forbidden: You do not have permission to update this playlist */\n 403: {\n headers: {\n [name: string]: unknown\n }\n content?: never\n }\n }\n }\n PlaylistsController_deletePlaylist: {\n parameters: {\n query?: never\n header?: never\n path: {\n playlistId: string\n }\n cookie?: never\n }\n requestBody?: never\n responses: {\n /** @description No Content: Playlist deleted successfully */\n 204: {\n headers: {\n [name: string]: unknown\n }\n content?: never\n }\n /** @description Forbidden: Insufficient permissions to delete this playlist */\n 403: {\n headers: {\n [name: string]: unknown\n }\n content?: never\n }\n /** @description Not Found: Playlist not found */\n 404: {\n headers: {\n [name: string]: unknown\n }\n content?: never\n }\n }\n }\n PlaylistsController_reorderPlaylist: {\n parameters: {\n query?: never\n header?: never\n path: {\n playlistId: string\n }\n cookie?: never\n }\n requestBody: {\n content: {\n 'application/json': components['schemas']['ReorderPlaylistsRequestPayload']\n }\n }\n responses: {\n /** @description No Content: Playlist order updated successfully */\n 204: {\n headers: {\n [name: string]: unknown\n }\n content?: never\n }\n /** @description Not Found: Playlist or putAfterItemId not found */\n 404: {\n headers: {\n [name: string]: unknown\n }\n content?: never\n }\n }\n }\n PlaylistsController_uploadMainImage: {\n parameters: {\n query?: never\n header?: never\n path: {\n playlistId: string\n }\n cookie?: never\n }\n requestBody: {\n content: {\n 'multipart/form-data': {\n /** @description Maximum size 1 MB; minimum height 500px; image must be square */\n file: components['schemas']['BinaryFile']\n }\n }\n }\n responses: {\n /** @description OK: Cover uploaded successfully */\n 200: {\n headers: {\n [name: string]: unknown\n }\n content: {\n 'application/json': components['schemas']['GetImagesOutput']\n }\n }\n /** @description Bad Request: Invalid image format or dimensions */\n 400: {\n headers: {\n [name: string]: unknown\n }\n content?: never\n }\n /** @description Forbidden: No permission to upload cover for this playlist */\n 403: {\n headers: {\n [name: string]: unknown\n }\n content?: never\n }\n }\n }\n PlaylistsController_deleteTrackCover: {\n parameters: {\n query?: never\n header?: never\n path: {\n playlistId: string\n }\n cookie?: never\n }\n requestBody?: never\n responses: {\n /** @description No Content: Cover deleted successfully */\n 204: {\n headers: {\n [name: string]: unknown\n }\n content?: never\n }\n /** @description Forbidden: Removing another user’s playlist cover is not allowed */\n 403: {\n headers: {\n [name: string]: unknown\n }\n content?: never\n }\n /** @description Not Found: Playlist not found */\n 404: {\n headers: {\n [name: string]: unknown\n }\n content?: never\n }\n }\n }\n TracksPublicController_getAllTracks: {\n parameters: {\n query?: {\n /** @description Page number for pagination (starting from 1) */\n pageNumber?: number\n /** @description Page size for pagination (between 1 and 20) */\n pageSize?: number\n /** @description Search term for filtering playlists by name */\n search?: string\n /** @description Field by which to sort tracks */\n sortBy?: 'publishedAt' | 'likesCount'\n /** @description Sort direction (ascending or descending) */\n sortDirection?: 'asc' | 'desc'\n /** @description Filter by tag IDs (multiple values allowed) */\n tagsIds?: string[]\n /** @description Filter by artist IDs (multiple values allowed) */\n artistsIds?: string[]\n /** @description Filter by user ID (track creator's ID) */\n userId?: string\n /** @description If true, include unpublished tracks (drafts) of current user if userId === currentUserId */\n includeDrafts?: boolean\n /** @description Pagination type: \"offset\" for page-number pagination; \"cursor\" for keyset/seek-based pagination. */\n paginationType?: 'offset' | 'cursor'\n /** @description Base64-encoded cursor for keyset pagination. Used only if paginationType is \"cursor\". */\n cursor?: string | null\n }\n header?: never\n path?: never\n cookie?: never\n }\n requestBody?: never\n responses: {\n /** @description OK: Paginated list of tracks */\n 200: {\n headers: {\n [name: string]: unknown\n }\n content: {\n 'application/json': components['schemas']['GetTrackListOutput']\n }\n }\n }\n }\n TracksPublicController_getPlaylistTracks: {\n parameters: {\n query?: never\n header?: never\n path: {\n /** @description ID of the playlist to retrieve tracks for */\n playlistId: string\n }\n cookie?: never\n }\n requestBody?: never\n responses: {\n /** @description OK: List of tracks in the playlist */\n 200: {\n headers: {\n [name: string]: unknown\n }\n content: {\n 'application/json': components['schemas']['GetPlaylistTrackListOutput']\n }\n }\n /** @description Not Found: Playlist with the specified ID not found */\n 404: {\n headers: {\n [name: string]: unknown\n }\n content?: never\n }\n }\n }\n TracksPublicController_getTrackDetails: {\n parameters: {\n query?: never\n header?: never\n path: {\n /** @description ID of the track to retrieve details for */\n trackId: string\n }\n cookie?: never\n }\n requestBody?: never\n responses: {\n /** @description OK: Track details with attachments */\n 200: {\n headers: {\n [name: string]: unknown\n }\n content: {\n 'application/json': components['schemas']['GetTrackDetailsOutput']\n }\n }\n /** @description Not Found: Track with the specified ID not found */\n 404: {\n headers: {\n [name: string]: unknown\n }\n content?: never\n }\n }\n }\n TracksController_updateTrack: {\n parameters: {\n query?: never\n header?: never\n path: {\n trackId: string\n }\n cookie?: never\n }\n requestBody: {\n content: {\n 'application/json': components['schemas']['UpdateTrackRequestPayload']\n }\n }\n responses: {\n /** @description OK: Track updated successfully */\n 200: {\n headers: {\n [name: string]: unknown\n }\n content: {\n 'application/json': components['schemas']['GetTrackOutput']\n }\n }\n /** @description Bad Request: Tag or artist limit exceeded */\n 400: {\n headers: {\n [name: string]: unknown\n }\n content?: never\n }\n /** @description Forbidden: Editing another user’s track is not allowed */\n 403: {\n headers: {\n [name: string]: unknown\n }\n content?: never\n }\n /** @description Not Found: Track or playlist not found */\n 404: {\n headers: {\n [name: string]: unknown\n }\n content?: never\n }\n }\n }\n TracksController_deleteTrackCompletely: {\n parameters: {\n query?: never\n header?: never\n path: {\n trackId: string\n }\n cookie?: never\n }\n requestBody?: never\n responses: {\n /** @description No Content: Track permanently deleted */\n 204: {\n headers: {\n [name: string]: unknown\n }\n content?: never\n }\n /** @description Forbidden: Deleting another user’s track is not allowed */\n 403: {\n headers: {\n [name: string]: unknown\n }\n content?: never\n }\n /** @description Not Found: Track not found */\n 404: {\n headers: {\n [name: string]: unknown\n }\n content?: never\n }\n }\n }\n TracksPublicController_likeTrack: {\n parameters: {\n query?: never\n header?: never\n path: {\n trackId: string\n }\n cookie?: never\n }\n requestBody?: never\n responses: {\n /** @description Created: User reaction recorded and counters updated */\n 201: {\n headers: {\n [name: string]: unknown\n }\n content: {\n 'application/json': components['schemas']['ReactionOutput']\n }\n }\n /** @description Bad Request: Invalid track ID */\n 400: {\n headers: {\n [name: string]: unknown\n }\n content?: never\n }\n /** @description Unauthorized: User not authenticated */\n 401: {\n headers: {\n [name: string]: unknown\n }\n content?: never\n }\n /** @description Not Found: Track not found */\n 404: {\n headers: {\n [name: string]: unknown\n }\n content?: never\n }\n }\n }\n TracksPublicController_dislikeTrack: {\n parameters: {\n query?: never\n header?: never\n path: {\n trackId: string\n }\n cookie?: never\n }\n requestBody?: never\n responses: {\n /** @description Created: User reaction recorded and counters updated */\n 201: {\n headers: {\n [name: string]: unknown\n }\n content: {\n 'application/json': components['schemas']['ReactionOutput']\n }\n }\n /** @description Bad Request: Invalid track ID */\n 400: {\n headers: {\n [name: string]: unknown\n }\n content?: never\n }\n /** @description Unauthorized: User not authenticated */\n 401: {\n headers: {\n [name: string]: unknown\n }\n content?: never\n }\n /** @description Not Found: Track not found */\n 404: {\n headers: {\n [name: string]: unknown\n }\n content?: never\n }\n }\n }\n TracksPublicController_removeTrackReaction: {\n parameters: {\n query?: never\n header?: never\n path: {\n trackId: string\n }\n cookie?: never\n }\n requestBody?: never\n responses: {\n /** @description OK: Reaction removed successfully */\n 200: {\n headers: {\n [name: string]: unknown\n }\n content: {\n 'application/json': components['schemas']['ReactionOutput']\n }\n }\n /** @description Unauthorized: User not authenticated */\n 401: {\n headers: {\n [name: string]: unknown\n }\n content?: never\n }\n }\n }\n PlaylistsPublicController_likePlaylist: {\n parameters: {\n query?: never\n header?: never\n path: {\n playlistId: string\n }\n cookie?: never\n }\n requestBody?: never\n responses: {\n /** @description Created: Like recorded successfully */\n 201: {\n headers: {\n [name: string]: unknown\n }\n content: {\n 'application/json': components['schemas']['ReactionOutput']\n }\n }\n /** @description Bad Request: Invalid playlist ID */\n 400: {\n headers: {\n [name: string]: unknown\n }\n content?: never\n }\n /** @description Unauthorized */\n 401: {\n headers: {\n [name: string]: unknown\n }\n content?: never\n }\n /** @description Not Found: Playlist not found */\n 404: {\n headers: {\n [name: string]: unknown\n }\n content?: never\n }\n }\n }\n PlaylistsPublicController_dislikePlaylist: {\n parameters: {\n query?: never\n header?: never\n path: {\n playlistId: string\n }\n cookie?: never\n }\n requestBody?: never\n responses: {\n /** @description Created: Dislike recorded successfully */\n 201: {\n headers: {\n [name: string]: unknown\n }\n content: {\n 'application/json': components['schemas']['ReactionOutput']\n }\n }\n /** @description Bad Request: Invalid playlist ID */\n 400: {\n headers: {\n [name: string]: unknown\n }\n content?: never\n }\n /** @description Unauthorized */\n 401: {\n headers: {\n [name: string]: unknown\n }\n content?: never\n }\n /** @description Not Found: Playlist not found */\n 404: {\n headers: {\n [name: string]: unknown\n }\n content?: never\n }\n }\n }\n PlaylistsPublicController_removePlaylistReaction: {\n parameters: {\n query?: never\n header?: never\n path: {\n playlistId: string\n }\n cookie?: never\n }\n requestBody?: never\n responses: {\n /** @description OK: Reaction removed successfully */\n 200: {\n headers: {\n [name: string]: unknown\n }\n content: {\n 'application/json': components['schemas']['ReactionOutput']\n }\n }\n /** @description Unauthorized */\n 401: {\n headers: {\n [name: string]: unknown\n }\n content?: never\n }\n /** @description Not Found: Playlist not found */\n 404: {\n headers: {\n [name: string]: unknown\n }\n content?: never\n }\n }\n }\n TracksController_reorderTrack: {\n parameters: {\n query?: never\n header?: never\n path: {\n playlistId: string\n trackId: string\n }\n cookie?: never\n }\n requestBody: {\n content: {\n 'application/json': components['schemas']['ReorderTracksRequestPayload']\n }\n }\n responses: {\n /** @description OK: Track order updated successfully */\n 200: {\n headers: {\n [name: string]: unknown\n }\n content?: never\n }\n /** @description Bad Request: Cannot place a track after itself */\n 400: {\n headers: {\n [name: string]: unknown\n }\n content?: never\n }\n /** @description Forbidden: No access to the playlist */\n 403: {\n headers: {\n [name: string]: unknown\n }\n content?: never\n }\n /** @description Not Found: Track or putAfterItemId not found */\n 404: {\n headers: {\n [name: string]: unknown\n }\n content?: never\n }\n }\n }\n TracksController_addTrackToPlaylist: {\n parameters: {\n query?: never\n header?: never\n path: {\n playlistId: string\n }\n cookie?: never\n }\n requestBody: {\n content: {\n 'application/json': components['schemas']['AddTrackToPlaylistRequestPayload']\n }\n }\n responses: {\n /** @description No Content: Track added to the playlist successfully */\n 204: {\n headers: {\n [name: string]: unknown\n }\n content?: never\n }\n /** @description Forbidden: No access to the playlist or track limit exceeded (max 10 tracks) */\n 403: {\n headers: {\n [name: string]: unknown\n }\n content?: never\n }\n /** @description Not Found: Playlist not found */\n 404: {\n headers: {\n [name: string]: unknown\n }\n content?: never\n }\n }\n }\n TracksController_unbindTrackFromPlaylist: {\n parameters: {\n query?: never\n header?: never\n path: {\n playlistId: string\n trackId: string\n }\n cookie?: never\n }\n requestBody?: never\n responses: {\n /** @description No Content: Track removed from the playlist */\n 204: {\n headers: {\n [name: string]: unknown\n }\n content?: never\n }\n /** @description Forbidden: No access to the playlist */\n 403: {\n headers: {\n [name: string]: unknown\n }\n content?: never\n }\n /** @description Not Found: Playlist not found */\n 404: {\n headers: {\n [name: string]: unknown\n }\n content?: never\n }\n }\n }\n TracksController_publishTrack: {\n parameters: {\n query?: never\n header?: never\n path: {\n trackId: string\n }\n cookie?: never\n }\n requestBody?: never\n responses: {\n /** @description No Content: Track published successfully */\n 204: {\n headers: {\n [name: string]: unknown\n }\n content?: never\n }\n /** @description Forbidden: Publishing another user’s track is not allowed */\n 403: {\n headers: {\n [name: string]: unknown\n }\n content?: never\n }\n /** @description Not Found: Track with the specified ID not found */\n 404: {\n headers: {\n [name: string]: unknown\n }\n content?: never\n }\n /** @description Conflict: Track is already published */\n 409: {\n headers: {\n [name: string]: unknown\n }\n content?: never\n }\n }\n }\n TracksController_uploadTrackCover: {\n parameters: {\n query?: never\n header?: never\n path: {\n /** @description ID of the track for which the cover is being uploaded */\n trackId: string\n }\n cookie?: never\n }\n /** @description Image file:
    \n * • Field name — cover
    \n * • Allowed MIME types — image/jpeg, image/png, image/gif
    \n * • Maximum size — 100 KB */\n requestBody: {\n content: {\n 'multipart/form-data': {\n /** Format: binary */\n cover: string\n }\n }\n }\n responses: {\n /** @description OK: Cover uploaded successfully */\n 200: {\n headers: {\n [name: string]: unknown\n }\n content: {\n 'application/json': components['schemas']['GetImagesOutput']\n }\n }\n /** @description Bad Request: Invalid file or size exceeded */\n 400: {\n headers: {\n [name: string]: unknown\n }\n content?: never\n }\n /** @description Forbidden: Cannot upload a cover for another user’s track */\n 403: {\n headers: {\n [name: string]: unknown\n }\n content?: never\n }\n /** @description Not Found: Track not found */\n 404: {\n headers: {\n [name: string]: unknown\n }\n content?: never\n }\n }\n }\n TracksController_deleteTrackCover: {\n parameters: {\n query?: never\n header?: never\n path: {\n trackId: string\n }\n cookie?: never\n }\n requestBody?: never\n responses: {\n /** @description No Content: Cover deleted successfully */\n 204: {\n headers: {\n [name: string]: unknown\n }\n content?: never\n }\n /** @description Forbidden: Removing another user's track cover is not allowed */\n 403: {\n headers: {\n [name: string]: unknown\n }\n content?: never\n }\n /** @description Not Found: Track not found */\n 404: {\n headers: {\n [name: string]: unknown\n }\n content?: never\n }\n }\n }\n TracksController_uploadTrackMp3: {\n parameters: {\n query?: never\n header?: never\n path?: never\n cookie?: never\n }\n requestBody: {\n content: {\n 'multipart/form-data': {\n /** @example My cool track */\n title: string\n /** Format: binary */\n file: string\n }\n }\n }\n responses: {\n /** @description OK: Track created successfully */\n 200: {\n headers: {\n [name: string]: unknown\n }\n content: {\n 'application/json': components['schemas']['GetTrackOutput']\n }\n }\n /** @description Bad Request: Invalid file format or file size exceeded */\n 400: {\n headers: {\n [name: string]: unknown\n }\n content?: never\n }\n /** @description Internal Server Error: Error saving file or track */\n 500: {\n headers: {\n [name: string]: unknown\n }\n content?: never\n }\n }\n }\n ArtistsController_createArtist: {\n parameters: {\n query?: never\n header?: never\n path?: never\n cookie?: never\n }\n requestBody: {\n content: {\n 'application/json': components['schemas']['CreateArtistRequestPayload']\n }\n }\n responses: {\n /** @description Created: Artist created successfully */\n 201: {\n headers: {\n [name: string]: unknown\n }\n content: {\n 'application/json': components['schemas']['GetArtistOutput']\n }\n }\n /** @description Bad Request: Validation error or invalid input */\n 400: {\n headers: {\n [name: string]: unknown\n }\n content?: never\n }\n /** @description Unauthorized: User not authenticated */\n 401: {\n headers: {\n [name: string]: unknown\n }\n content?: never\n }\n /** @description Forbidden: Limit of 100 artists per user reached */\n 403: {\n headers: {\n [name: string]: unknown\n }\n content?: never\n }\n /** @description Conflict: Artist with the given name already exists */\n 409: {\n headers: {\n [name: string]: unknown\n }\n content?: never\n }\n }\n }\n ArtistsController_searchArtist: {\n parameters: {\n query: {\n search: string\n }\n header?: never\n path?: never\n cookie?: never\n }\n requestBody?: never\n responses: {\n /** @description OK: List of artists matching the search */\n 200: {\n headers: {\n [name: string]: unknown\n }\n content: {\n 'application/json': components['schemas']['GetArtistOutput'][]\n }\n }\n }\n }\n ArtistsController_deleteArtist: {\n parameters: {\n query?: never\n header?: never\n path: {\n id: string\n }\n cookie?: never\n }\n requestBody?: never\n responses: {\n /** @description No Content: Artist deleted successfully */\n 204: {\n headers: {\n [name: string]: unknown\n }\n content?: never\n }\n /** @description Forbidden: Artist is attached to tracks or was created by another user */\n 403: {\n headers: {\n [name: string]: unknown\n }\n content?: never\n }\n /** @description Not Found: Artist with the specified ID not found */\n 404: {\n headers: {\n [name: string]: unknown\n }\n content?: never\n }\n }\n }\n AuthController_OauthRedirect: {\n parameters: {\n query?: {\n /** @description The callback URL to redirect after grand access,\n * https://oauth.apihub.it-incubator.io/realms/apihub/protocol/openid-connect/auth?client_id=spotifun&response_type=code&redirect_uri=http://localhost:3000/oauth2/callback&scope=openid */\n callbackUrl?: string\n }\n header?: never\n path?: never\n cookie?: never\n }\n requestBody?: never\n responses: {\n /** @description OK: Редирект выполнен */\n 200: {\n headers: {\n [name: string]: unknown\n }\n content?: never\n }\n }\n }\n AuthController_login: {\n parameters: {\n query?: never\n header?: never\n path?: never\n cookie?: never\n }\n requestBody: {\n content: {\n 'application/json': components['schemas']['LoginRequestPayload']\n }\n }\n responses: {\n /** @description OK: Успешно получена пара токенов */\n 200: {\n headers: {\n [name: string]: unknown\n }\n content: {\n 'application/json': components['schemas']['RefreshOutput']\n }\n }\n /** @description BadRequest: Неверный формат запроса или отсутствуют обязательные параметры */\n 400: {\n headers: {\n [name: string]: unknown\n }\n content: {\n 'application/json': components['schemas']['BadRequestException']\n }\n }\n /** @description Unauthorized: Код недействителен, истёк или не передан, или не совпадает redirectUri */\n 401: {\n headers: {\n [name: string]: unknown\n }\n content: {\n 'application/json': components['schemas']['UnauthorizedException']\n }\n }\n }\n }\n AuthController_refresh: {\n parameters: {\n query?: never\n header?: never\n path?: never\n cookie?: never\n }\n requestBody: {\n content: {\n 'application/json': components['schemas']['RefreshRequestPayload']\n }\n }\n responses: {\n /** @description OK: Успешное обновление пары токенов */\n 200: {\n headers: {\n [name: string]: unknown\n }\n content: {\n 'application/json': components['schemas']['RefreshOutput']\n }\n }\n /** @description Unauthorized: Refresh-token недействителен, истёк или не передан */\n 401: {\n headers: {\n [name: string]: unknown\n }\n content: {\n 'application/json': components['schemas']['UnauthorizedException']\n }\n }\n }\n }\n AuthController_logout: {\n parameters: {\n query?: never\n header?: never\n path?: never\n cookie?: never\n }\n requestBody: {\n content: {\n 'application/json': components['schemas']['LogoutRequestPayload']\n }\n }\n responses: {\n /** @description OK: refresh токен деактивирован, при этом access-токен остаётся ещё валидным. */\n 204: {\n headers: {\n [name: string]: unknown\n }\n content?: never\n }\n }\n }\n AuthController_getMe: {\n parameters: {\n query?: never\n header?: never\n path?: never\n cookie?: never\n }\n requestBody?: never\n responses: {\n /** @description OK: Успешное получение информации о пользователе */\n 200: {\n headers: {\n [name: string]: unknown\n }\n content: {\n 'application/json': components['schemas']['GetMeOutput']\n }\n }\n /** @description Unauthorized: access токен отсутствует или недействителен */\n 401: {\n headers: {\n [name: string]: unknown\n }\n content?: never\n }\n }\n }\n TagsController_createTag: {\n parameters: {\n query?: never\n header?: never\n path?: never\n cookie?: never\n }\n requestBody: {\n content: {\n 'application/json': components['schemas']['CreateTagRequestPayload']\n }\n }\n responses: {\n /** @description Created: Tag created successfully */\n 201: {\n headers: {\n [name: string]: unknown\n }\n content: {\n 'application/json': components['schemas']['GetTagOutput']\n }\n }\n /** @description Bad Request: Validation error */\n 400: {\n headers: {\n [name: string]: unknown\n }\n content?: never\n }\n /** @description Unauthorized: User not authenticated */\n 401: {\n headers: {\n [name: string]: unknown\n }\n content?: never\n }\n /** @description Forbidden: Limit of 100 tags per user reached */\n 403: {\n headers: {\n [name: string]: unknown\n }\n content?: never\n }\n /** @description Conflict: Tag with the given name already exists */\n 409: {\n headers: {\n [name: string]: unknown\n }\n content?: never\n }\n }\n }\n TagsController_searchTags: {\n parameters: {\n query: {\n /** @description Substring to search tags by (using normalized name) */\n search: string\n }\n header?: never\n path?: never\n cookie?: never\n }\n requestBody?: never\n responses: {\n /** @description OK: List of matching tags */\n 200: {\n headers: {\n [name: string]: unknown\n }\n content: {\n 'application/json': components['schemas']['GetTagOutput'][]\n }\n }\n /** @description Bad Request: Invalid search query */\n 400: {\n headers: {\n [name: string]: unknown\n }\n content?: never\n }\n }\n }\n TagsController_deleteTag: {\n parameters: {\n query?: never\n header?: never\n path: {\n /** @description ID of the tag to delete */\n id: string\n }\n cookie?: never\n }\n requestBody?: never\n responses: {\n /** @description No Content: Tag deleted successfully */\n 204: {\n headers: {\n [name: string]: unknown\n }\n content?: never\n }\n /** @description Unauthorized: User not authenticated */\n 401: {\n headers: {\n [name: string]: unknown\n }\n content?: never\n }\n /** @description Forbidden: Tag was created by another user or is attached to tracks or playlists */\n 403: {\n headers: {\n [name: string]: unknown\n }\n content?: never\n }\n /** @description Not Found: Tag with the specified ID not found */\n 404: {\n headers: {\n [name: string]: unknown\n }\n content?: never\n }\n }\n }\n}\n" }, { "path": "youtube/tanstack-query-router-fsd/lesson1/src/shared/config/api-config.ts", "content": "export const baseUrl = import.meta.env.VITE_BASE_URL\nexport const apiKey = import.meta.env.VITE_API_KEY\n" }, { "path": "youtube/tanstack-query-router-fsd/lesson1/src/shared/config/localstorage-keys.ts", "content": "export const localStorageKeys = {\n refreshToken: 'musicfun-refresh-token',\n accessToken: 'musicfun-access-token',\n}\n" }, { "path": "youtube/tanstack-query-router-fsd/lesson1/src/shared/ui/header/header.module.css", "content": ".header {\n border-bottom: #aaaaaa 1px solid;\n padding-bottom: 10px;\n}\n\n.container {\n max-width: 900px;\n margin: 0 auto;\n display: flex;\n flex-direction: row;\n justify-content: space-between;\n}\n\n.linksBlock {\n display: flex;\n gap: 10px;\n}\n" }, { "path": "youtube/tanstack-query-router-fsd/lesson1/src/shared/ui/header/header.tsx", "content": "import { Link } from '@tanstack/react-router'\nimport type { ReactNode } from 'react'\n\nimport styles from './header.module.css'\n\ntype Props = {\n renderAccountBar: () => ReactNode\n}\n\nexport const Header = ({ renderAccountBar }: Props) => (\n
    \n
    \n
    \n Playlists\n
    \n\n
    {renderAccountBar()}
    \n
    \n
    \n)\n" }, { "path": "youtube/tanstack-query-router-fsd/lesson1/src/shared/ui/pagination/pagination-nav/pagination-nav.module.css", "content": ".pagination {\n display: flex;\n gap: 8px;\n justify-content: center;\n}\n\n.pageButton {\n padding: 4px 10px;\n background: transparent;\n border: 1px solid #aaa;\n border-radius: 4px;\n cursor: pointer;\n font-weight: normal;\n transition:\n background 0.2s,\n color 0.2s;\n color: white;\n}\n\n.pageButtonActive {\n background: #ececec;\n font-weight: bold;\n cursor: default;\n color: black;\n}\n\n.ellipsis {\n padding: 4px 10px;\n user-select: none;\n}\n" }, { "path": "youtube/tanstack-query-router-fsd/lesson1/src/shared/ui/pagination/pagination-nav/pagination-nav.tsx", "content": "import { getPaginationPages } from '../utils/get-pagination-pages.ts'\nimport s from './pagination-nav.module.css'\n\ntype Props = {\n current: number\n pagesCount: number\n onChange: (page: number) => void\n isFetching: boolean\n}\n\nconst SIBLING_COUNT = 1\n\nexport const PaginationNav = ({ current, pagesCount, onChange }: Props) => {\n const pages = getPaginationPages(current, pagesCount, SIBLING_COUNT)\n\n return (\n
    \n {pages.map((item, idx) =>\n item === '...' ? (\n \n ...\n \n ) : (\n item !== current && onChange(Number(item))}\n disabled={item === current}\n type=\"button\">\n {item}\n \n )\n )}\n
    \n )\n}\n" }, { "path": "youtube/tanstack-query-router-fsd/lesson1/src/shared/ui/pagination/pagination.module.css", "content": ".container {\n display: flex;\n align-content: center;\n align-items: center;\n margin: 0 auto;\n gap: 40px;\n}\n" }, { "path": "youtube/tanstack-query-router-fsd/lesson1/src/shared/ui/pagination/pagination.tsx", "content": "import s from './Pagination.module.css'\nimport { PaginationNav } from './pagination-nav/pagination-nav.tsx'\n\ntype Props = {\n currentPage: number\n pagesCount: number\n onPageNumberChange: (page: number) => void\n isFetching: boolean\n}\n\nexport const Pagination = ({ currentPage, pagesCount, onPageNumberChange, isFetching }: Props) => {\n return (\n
    \n {' '}\n {isFetching && '⌛️'}\n
    \n )\n}\n" }, { "path": "youtube/tanstack-query-router-fsd/lesson1/src/shared/ui/pagination/utils/get-pagination-pages.ts", "content": "/**\n * Генерирует массив страниц для отображения пагинации с учётом троеточий\n */\nexport const getPaginationPages = (\n current: number,\n pagesCount: number,\n siblingCount: number\n): (number | '...')[] => {\n if (pagesCount <= 1) return []\n\n const pages: (number | '...')[] = []\n\n // Границы диапазона вокруг текущей страницы\n const leftSibling = Math.max(2, current - siblingCount)\n const rightSibling = Math.min(pagesCount - 1, current + siblingCount)\n\n // Всегда показываем первую страницу\n pages.push(1)\n\n // Троеточие слева\n if (leftSibling > 2) {\n pages.push('...')\n }\n\n // Соседние страницы вокруг текущей\n for (let page = leftSibling; page <= rightSibling; page++) {\n pages.push(page)\n }\n\n // Троеточие справа\n if (rightSibling < pagesCount - 1) {\n pages.push('...')\n }\n\n // Всегда показываем последнюю страницу (если больше одной)\n if (pagesCount > 1) {\n pages.push(pagesCount)\n }\n\n return pages\n}\n" }, { "path": "youtube/tanstack-query-router-fsd/lesson1/src/shared/ui/util/query-error-handler-for-rhf-factory.ts", "content": "import type { FieldValues, Path, UseFormSetError } from 'react-hook-form'\nimport { toast } from 'react-toastify'\n\nimport {\n isJsonApiErrorDocument,\n type JsonApiErrorDocument,\n parseJsonApiErrors,\n} from '../../util/json-api-error.ts'\n\nexport const queryErrorHandlerForRHFFactory = ({\n setError,\n}: {\n setError?: UseFormSetError\n}) => {\n return (err: JsonApiErrorDocument) => {\n // 400 от сервера в JSON:API формате\n if (isJsonApiErrorDocument(err)) {\n const { fieldErrors, globalErrors } = parseJsonApiErrors(err)\n\n // полевые ошибки\n for (const [field, message] of Object.entries(fieldErrors)) {\n setError?.(field as Path, { type: 'server', message })\n }\n\n // «глобальные» (без pointer)\n if (globalErrors.length > 0) {\n setError?.('root.server', {\n type: 'server',\n message: globalErrors.join('\\n'),\n })\n }\n }\n }\n}\n\nexport const mutationGlobalErrorHandler = (\n error: Error,\n _: unknown,\n __: unknown,\n mutation: unknown\n) => {\n // @ts-expect-error look at MutationMeta type\n if (mutation.meta.globalErrorHandler === 'off') {\n return\n }\n\n if (isJsonApiErrorDocument(error)) {\n const { globalErrors } = parseJsonApiErrors(error)\n\n // «глобальные» (без pointer)\n if (globalErrors.length > 0) {\n toast(globalErrors.join('\\n'))\n }\n }\n}\n" }, { "path": "youtube/tanstack-query-router-fsd/lesson1/src/shared/util/json-api-error.ts", "content": "export interface JsonApiError {\n status: string\n code?: string | number\n title?: string\n detail?: string\n source?: { pointer?: string; parameter?: string }\n meta?: Record\n}\n\nexport interface JsonApiErrorDocument {\n errors: JsonApiError[]\n meta?: Record\n}\n\nexport type ExtractError = T extends { error?: infer E } ? E : unknown\n\n/* --- типы ошибок, совпадающие с фильтром -------------------------------- */\nexport interface JsonApiError {\n status: string\n code?: string | number\n title?: string\n detail?: string\n source?: { pointer?: string; parameter?: string }\n meta?: Record\n}\n\nexport interface JsonApiErrorDocument {\n errors: JsonApiError[]\n meta?: Record\n}\n\nexport function isJsonApiErrorDocument(error: unknown): error is JsonApiErrorDocument {\n return (\n typeof error === 'object' &&\n error !== null &&\n // @ts-expect-error type no matter\n Array.isArray(error.errors)\n )\n}\n\nexport function parseJsonApiErrors(errorDoc: JsonApiErrorDocument): {\n fieldErrors: Record\n globalErrors: string[]\n} {\n const fieldErrors: Record = {}\n const globalErrors: string[] = []\n\n for (const err of errorDoc.errors) {\n const msg = err.detail ?? err.title ?? 'Unknown error'\n const ptr = err.source?.pointer\n if (ptr) {\n // убираем префикс JSON:API\n const field = ptr.replace(/^\\/data\\/attributes\\//, '')\n fieldErrors[field] = msg\n } else {\n globalErrors.push(msg)\n }\n }\n\n return { fieldErrors, globalErrors }\n}\n" }, { "path": "youtube/tanstack-query-router-fsd/lesson1/src/vite-env.d.ts", "content": "/// \n" }, { "path": "youtube/tanstack-query-router-fsd/lesson1/src/widgets/playlists/api/use-playlists-query.ts", "content": "import { keepPreviousData, useQuery } from '@tanstack/react-query'\n\nimport { client } from '../../../shared/api/client.ts'\nimport { playlistsKeys } from '../../../shared/api/keys-factories/playlists-keys-factory.ts'\nimport type { SchemaGetPlaylistsRequestPayload } from '../../../shared/api/schema.ts'\n\nexport const usePlaylistsQuery = (\n userId: string | undefined,\n filters: Partial\n) => {\n const key = userId ? playlistsKeys.myList() : playlistsKeys.list(filters)\n const queryParams = userId\n ? {\n userId,\n }\n : filters\n\n const query = useQuery({\n // eslint-disable-next-line @tanstack/query/exhaustive-deps\n queryKey: key,\n queryFn: async ({ signal }) => {\n const response = await client.GET('/playlists', {\n params: {\n query: queryParams,\n },\n signal,\n })\n if (response.error) {\n throw (response as unknown as { error: Error }).error\n }\n return response.data\n },\n placeholderData: keepPreviousData,\n })\n return query\n}\n" }, { "path": "youtube/tanstack-query-router-fsd/lesson1/src/widgets/playlists/ui/playlists.tsx", "content": "import { useState } from 'react'\n\nimport { DeletePlaylist } from '../../../features/playlists/delete-playlist/ui/delete-playlist.tsx'\nimport { Pagination } from '../../../shared/ui/pagination/pagination.tsx'\nimport { usePlaylistsQuery } from '../api/use-playlists-query.ts'\n\ntype Props = {\n userId?: string\n onPlaylistSelected?: (playlistId: string) => void\n onPlaylistDeleted?: (playlistId: string) => void\n isSearchActive?: boolean\n}\n\nexport const Playlists = ({\n userId,\n onPlaylistSelected,\n onPlaylistDeleted,\n isSearchActive,\n}: Props) => {\n const [pageNumber, setPageNumber] = useState(1)\n const [search, setSearch] = useState('')\n\n const query = usePlaylistsQuery(userId, { search, pageNumber })\n\n const handleSelectPlaylistClick = (playlistId: string) => {\n onPlaylistSelected?.(playlistId)\n }\n\n const handleDeletePlaylist = (playlistId: string) => {\n onPlaylistDeleted?.(playlistId)\n }\n\n if (query.isPending) return Loading...\n if (query.isError) return Error: {JSON.stringify(query.error.message)}\n\n return (\n
    \n {isSearchActive && (\n <>\n
    \n setSearch(e.currentTarget.value)}\n placeholder={'search...'}\n />\n
    \n
    \n \n )}\n\n \n
      \n {query.data.data.map((playlist) => (\n
    • \n handleSelectPlaylistClick(playlist.id)}>\n {playlist.attributes.title}\n {' '}\n \n
      • \n ))}\n
    \n
    \n )\n}\n" }, { "path": "youtube/tanstack-query-router-fsd/lesson1/tsconfig.app.json", "content": "{\n \"compilerOptions\": {\n \"tsBuildInfoFile\": \"./node_modules/.tmp/tsconfig.app.tsbuildinfo\",\n \"target\": \"ES2022\",\n \"useDefineForClassFields\": true,\n \"lib\": [\"ES2022\", \"DOM\", \"DOM.Iterable\"],\n \"module\": \"ESNext\",\n \"skipLibCheck\": true,\n\n /* Bundler mode */\n \"moduleResolution\": \"bundler\",\n \"allowImportingTsExtensions\": true,\n \"verbatimModuleSyntax\": true,\n \"moduleDetection\": \"force\",\n \"noEmit\": true,\n \"jsx\": \"react-jsx\",\n\n /* Linting */\n \"strict\": true,\n \"noUnusedLocals\": true,\n \"noUnusedParameters\": true,\n \"erasableSyntaxOnly\": true,\n \"noFallthroughCasesInSwitch\": true,\n \"noUncheckedSideEffectImports\": true,\n \"noUncheckedIndexedAccess\": true\n },\n \"include\": [\"src\"]\n}\n" }, { "path": "youtube/tanstack-query-router-fsd/lesson1/tsconfig.json", "content": "{\n \"files\": [],\n \"references\": [{ \"path\": \"./tsconfig.app.json\" }, { \"path\": \"./tsconfig.node.json\" }]\n}\n" }, { "path": "youtube/tanstack-query-router-fsd/lesson1/tsconfig.node.json", "content": "{\n \"compilerOptions\": {\n \"tsBuildInfoFile\": \"./node_modules/.tmp/tsconfig.node.tsbuildinfo\",\n \"target\": \"ES2023\",\n \"lib\": [\"ES2023\"],\n \"module\": \"ESNext\",\n \"skipLibCheck\": true,\n\n /* Bundler mode */\n \"moduleResolution\": \"bundler\",\n \"allowImportingTsExtensions\": true,\n \"verbatimModuleSyntax\": true,\n \"moduleDetection\": \"force\",\n \"noEmit\": true,\n\n /* Linting */\n \"strict\": true,\n \"noUnusedLocals\": true,\n \"noUnusedParameters\": true,\n \"erasableSyntaxOnly\": true,\n \"noFallthroughCasesInSwitch\": true,\n \"noUncheckedSideEffectImports\": true\n },\n \"include\": [\"vite.config.ts\"]\n}\n" }, { "path": "youtube/tanstack-query-router-fsd/lesson1/tsr.config.json", "content": "{\n \"routesDirectory\": \"./src/app/routes\",\n \"generatedRouteTree\": \"./src/app/routes/routeTree.gen.ts\"\n}\n" }, { "path": "youtube/tanstack-query-router-fsd/lesson1/vite.config.ts", "content": "import { tanstackRouter } from '@tanstack/router-plugin/vite'\nimport react from '@vitejs/plugin-react'\nimport { defineConfig } from 'vite'\n\n// https://vite.dev/config/\nexport default defineConfig({\n plugins: [\n tanstackRouter({\n target: 'react',\n autoCodeSplitting: true,\n }),\n react(),\n ],\n})\n" } ]