Pathfinder updates

.changeset/honest-mugs-fly.md

@@ -0,0 +1,24 @@
+---
+"@kode-frontend/pathfinder-web": minor
+"@kode-frontend/pathfinder-web-example": patch
+---
+
+- Доработан UI панели:
+  a. Поддержка мобильной версии 
+  b. Перетаскивание кнопки активации 
+  c. Изменение положения панели и ресайз 
+  d. Темная тема 
+  e. Правки багов UI 
+
+- Явный выбор глобального окружения — добавлена опция "Global" в все селекты, позволяющая явно выбрать использование глобального переопределения
+
+- Отображение активного baseUrl — под каждым селектом показывается текущий активный baseUrl (глобальный, кастомный или пустой), чтобы пользователь видел,
+какой URL будет использоваться
+- Синхронизация при смене глобального окружения — когда глобальное переопределение меняется, все эндпоинты с выбранной опцией "Global" автоматически
+обновляют отображаемый baseUrl
+- Внутренние улучшения — добавлены константы и утилит-функции для безопасной работы с маркерами переопределений, сделан рефакторинг компонентов для
+корректной работы с новой логикой
+- Правки сборки:
+a. Переведена сборка pathfinder-web на Vite с интеграцией в Turbo
+b. Добавлен standalone example приложение для локальной разработки и тестирования
+c. Обновлены зависимости в pnpm-workspace и package.json

CLAUDE.md

@@ -0,0 +1,102 @@
+# CLAUDE.md
+
+This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository.
+
+## Project Overview
+
+This is a **monorepo** managed with **Turborepo** and **pnpm** containing frontend utility packages from KODE. The repository includes:
+
+- **Shared configs**: ESLint, Prettier, Commitlint, TypeScript
+- **Interceptors & utilities**: Session interceptor (JWT), Timeout interceptor, SVG transformer
+- **React packages**: React Native push notifications, Feature toggle React, Pathfinder web
+
+## Environment & Commands
+
+**Package manager**: pnpm 9.15.0 (required, enforced in package.json engines)
+
+**Node version**: >=18
+
+### Common Commands
+
+- **Development**: `pnpm dev` - Start dev mode for all packages (persistent turbo watch)
+- **Build**: `pnpm build` - Build all packages with tsup
+- **Lint**: `pnpm lint` - Run ESLint across packages
+- **Type check**: `pnpm ts:check` - Check TypeScript errors
+- **Format**: `pnpm format` - Format with Prettier
+- **Clean**: `pnpm clean` - Remove turbo cache and dist folders
+- **Package checks**:
+  - `pnpm lint:packages` - Check package.json dependency consistency (syncpack)
+  - `pnpm lint:fix:packages` - Fix dependency mismatches and formatting
+
+### Changesets & Publishing
+
+- **Add changeset**: `pnpm add-changeset` or `pnpm changeset add`
+  - For new packages: mark as "major" version, write "new package $name" in description
+  - Description follows Markdown; only first line is formatted with hyphen
+- **Release cycle**: After merge to main, GitHub Actions creates a version PR
+- **Publish**: Merge the version PR to publish all non-private packages to npm
+
+## Architecture & Build System
+
+### Turbo Configuration (turbo.json)
+
+Defines task pipelines with dependencies:
+
+- `build` depends on `^build` (upstream packages must build first), outputs to `dist/**`
+- `lint` and `ts:check` are parallel tasks with upstream dependencies
+- `dev` runs in persistent mode (no caching)
+- `clean` removes build artifacts
+
+### Package Structure
+
+Each package in `packages/` follows this pattern:
+
+- **src/** - TypeScript source code
+- **dist/** - Built output (generated by tsup)
+- **tsconfig.json** - Extends from `@repo/config-typescript`
+- **tsup.config.ts** - Build configuration (format: CJS, dts enabled, tree-shaking)
+- **package.json** - Exports field points to `dist/index.js`
+
+### Internal Packages (internal/)
+
+- `@repo/config-typescript` - Provides base.json, nextjs.json, react-library.json tsconfigs
+- `@repo/config-eslint` - Provides library.js ESLint config (uses Vercel style guide, prettier integration)
+
+Both are private workspace dependencies (referenced as `workspace:*` in other packages).
+
+### Root Configuration
+
+- Root ESLint ignores all workspace packages (each has own config)
+- Root tsconfig extends from internal config (base)
+- All workspaces use consistent ESLint from internal config
+
+## Key Development Patterns
+
+### When Working on a Package
+
+1. Run `pnpm dev` at repo root for continuous builds
+2. Each package is independently buildable: changes in `src/` auto-build to `dist/`
+3. Turbo handles dependency resolution (e.g., building internal configs before packages)
+4. TypeScript checks are workspace-aware; use `pnpm ts:check` to catch cross-package issues
+
+### Testing & Validation
+
+- No Jest/Vitest configured at repo level; test patterns vary by package
+- Always run `pnpm ts:check` and `pnpm lint` before committing
+- Use `pnpm lint:fix:packages` if dependency versions become inconsistent
+
+### Adding or Modifying Packages
+
+- Keep dependencies synchronized across workspace with syncpack
+- Use workspace protocol (`workspace:*`) for internal dependencies
+- Update package versions only via changesets (not manual edits)
+
+## Dependency Management
+
+Syncpack ensures:
+
+- Consistent version ranges across packages
+- Matching semver ranges for shared dependencies
+- Proper formatting of package.json files
+
+Security overrides in root package.json prevent vulnerable versions of ws, braces (auto-enforced on install).

package.json

@@ -32,6 +32,9 @@
     "build": "turbo build",
     "clean": "turbo clean",
     "dev": "turbo dev",
+    "dev:pathfinder": "turbo run dev --filter=@kode-frontend/pathfinder-web",
+    "dev:pathfinder-example": "turbo run dev --filter=@kode-frontend/pathfinder-web-example",
+    "dev:pathfinder-all": "turbo run dev --filter=@kode-frontend/pathfinder-web --filter=@kode-frontend/pathfinder-web-example --parallel",
     "format": "prettier --write \"**/*.{ts,tsx,js,jsx,md}\"",
     "lint": "turbo lint",
     "lint:fix:packages": "npm-run-all --parallel lint:fix:packages:*",
@@ -47,6 +50,7 @@
   },
   "workspaces": [
     "packages/*",
+    "packages/*/example",
     "internal/*"
   ]
 }

packages/pathfinder-web/example/index.html

@@ -9,6 +9,6 @@
 
   <body>
     <div id="root"></div>
-    <script src="./index.tsx"></script>
+    <script type="module" src="./index.tsx"></script>
   </body>
 </html>

packages/pathfinder-web/example/index.tsx

@@ -1,6 +1,5 @@
-import 'react-app-polyfill/ie11'
-import * as React from 'react'
-import * as ReactDOM from 'react-dom'
+import React from 'react'
+import ReactDOM from 'react-dom/client'
 import { PathfinderProvider } from './pathfinder'
 import { TryForm } from './try-form'
 
@@ -13,4 +12,8 @@ const App = () => {
   )
 }
 
-ReactDOM.render(<App />, document.getElementById('root'))
+ReactDOM.createRoot(document.getElementById('root')!).render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>,
+)

packages/pathfinder-web/example/package.json

@@ -1,30 +1,25 @@
 {
-  "name": "example",
+  "name": "@kode-frontend/pathfinder-web-example",
   "version": "1.0.0",
-  "main": "index.js",
+  "private": true,
   "license": "MIT",
   "scripts": {
-    "start": "yarn link @kode-frontend/pathfinder-web && parcel index.html",
-    "build": "parcel build index.html"
+    "dev": "concurrently \"vite\" \"prism mock ./pathfinder/core.json --port 3100\"",
+    "build": "vite build",
+    "preview": "vite preview"
   },
   "dependencies": {
-    "@kode-frontend/pathfinder-web": "^0.2.0",
-    "react-app-polyfill": "^1.0.0"
-  },
-  "alias": {
-    "react": "../node_modules/react",
-    "react-dom": "../node_modules/react-dom/profiling",
-    "scheduler/tracing": "../node_modules/scheduler/tracing-profiling"
+    "@kode-frontend/pathfinder-web": "workspace:*",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
   },
   "devDependencies": {
-    "@babel/core": "^7.17.9",
-    "@types/react": "^16.9.11",
-    "@types/react-dom": "^16.8.4",
-    "parcel": "^1.12.3",
-    "postcss-modules": "^4.3.1",
-    "typescript": "^3.4.5"
-  },
-  "resolutions": {
-    "@babel/preset-env": "7.13.8"
+    "@types/react": "^18.2.0",
+    "@types/react-dom": "^18.2.0",
+    "@stoplight/prism-cli": "^5.0.0",
+    "@vitejs/plugin-react": "^4.2.0",
+    "concurrently": "^9.0.0",
+    "typescript": "^5.3.0",
+    "vite": "^5.0.0"
   }
 }