Move integration tests into Storybook’s browser test harness

.github/workflows/CI.yml

@@ -19,6 +19,9 @@ jobs:
             - name: Setup Environment
               uses: nowely/action-setup-node@v1
 
+            - name: Install Playwright Browsers
+              run: pnpm dlx playwright install --with-deps chromium
+
             - name: Run Tests
               run: pnpm test
 

.gitignore

@@ -4,4 +4,5 @@ dist
 coverage
 storybook-static
 package-lock.json
-.pnpm-store/**
+.pnpm-store/**
+.vitest-attachments/

.prettierignore

@@ -5,6 +5,8 @@ package.json
 # Build outputs
 dist/
 coverage/
+packages/website/.vercel/
+packages/website/src/content/docs/
 
 # Dependencies
 node_modules/

README.md

@@ -4,7 +4,7 @@
 
 A React component that lets you combine editable text with any component using annotated text.
 
-**[Documentation](https://markput.vercel.app)** **[Storybook](https://marked-input.vercel.app)** 
+**[Documentation](https://markput.vercel.app)** **[Storybook](https://marked-input.vercel.app)**
 
 ## Feature
 

package.json

@@ -6,13 +6,11 @@
     "pnpm": ">=9"
   },
   "scripts": {
-    "dev": "pnpm -F app-react dev",
+    "dev": "pnpm -F @markput/react-app dev",
     "build": "pnpm -F rc-marked-input run build",
     "build:all": "pnpm -r run build",
-    "storybook:dev": "pnpm -F sb run dev",
-    "storybook:build": "pnpm -F sb run build",
-    "website:dev": "pnpm -F website run dev",
-    "website:build": "pnpm -F website run build",
+    "storybook:dev": "pnpm -F @markput/react-storybook run dev",
+    "website:dev": "pnpm -F @markput/website run dev",
     "clean:git": "git clean -xdf",
     "clean:git:dry": "git clean -xdn",
     "lint": "oxlint .",
@@ -24,12 +22,11 @@
     "test": "pnpm -r run test",
     "test:ui": "pnpm -r run test:ui",
     "test:watch": "pnpm -r run test:watch",
-    "test:integration": "pnpm -r run test:integration",
-    "test:coverage": "pnpm -r run test:coverage",
+    "test:coverage": "pnpm -r run coverage",
     "bench": "pnpm -r run bench",
-    "typecheck": "tsc --noEmit",
-    "use:local": "sed -i '' 's/\"rc-marked-input\": \"workspace:\\*\"/\"rc-marked-input\": \"file:..\\/markput\\/dist\"/g' packages/tests/package.json packages/storybook/package.json && pnpm install",
-    "use:workspace": "sed -i '' 's/\"rc-marked-input\": \"file:..\\\/markput\\\/dist\"/\"rc-marked-input\": \"workspace:*\"/g' packages/tests/package.json packages/storybook/package.json && pnpm install",
+    "typecheck": "tsc --noEmit && pnpm run -F @markput/website check",
+    "use:local": "sed -i '' 's/\"rc-marked-input\": \"workspace:\\*\"/\"rc-marked-input\": \"file:..\\/markput\\/dist\"/g' packages/storybook/package.json && pnpm install",
+    "use:workspace": "sed -i '' 's/\"rc-marked-input\": \"file:..\\/markput\\/dist\"/\"rc-marked-input\": \"workspace:*\"/g' packages/storybook/package.json && pnpm install",
     "preinstall": "npx only-allow pnpm",
     "publish": "pnpm -F rc-marked-input run publish"
   },
@@ -38,14 +35,14 @@
     "react-dom": "catalog:"
   },
   "devDependencies": {
+    "@microsoft/api-extractor": "^7.55.1",
     "@types/react": "catalog:",
     "@types/react-dom": "catalog:",
-    "@microsoft/api-extractor": "^7.55.0",
     "@vitejs/plugin-react-swc": "^4.2.2",
-    "oxlint": "^1.28.0",
-    "prettier": "3.6.2",
-    "typescript": "^5.9.2",
-    "vite": "^7.2.2",
+    "oxlint": "^1.31.0",
+    "prettier": "^3.7.4",
+    "typescript": "^5.9.3",
+    "vite": "^7.2.6",
     "vite-plugin-css-injected-by-js": "^3.5.2"
   }
 }

packages/app/package.json

@@ -1,5 +1,5 @@
 {
-  "name": "app-react",
+  "name": "@markput/react-app",
   "version": "1.0.0",
   "description": "E2E test application for marked-input",
   "license": "MIT",
@@ -10,15 +10,16 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "rc-marked-input": "workspace:*",
     "react": "catalog:",
     "react-dom": "catalog:"
   },
   "devDependencies": {
     "@types/react": "catalog:",
     "@types/react-dom": "catalog:",
     "@vitejs/plugin-react-swc": "^4.2.2",
-    "typescript": "^5.9.2",
-    "vite": "^7.2.2"
+    "typescript": "^5.9.3",
+    "vite": "^7.2.6"
   },
   "type": "module"
 }

packages/app/src/index.tsx

@@ -1,10 +1,92 @@
-import React from 'react'
+import React, {useState} from 'react'
 import ReactDOM from 'react-dom/client'
 import './style.css'
-import {Story} from '../../storybook/stories'
+import {createMarkedInput, denote} from 'rc-marked-input'
+import type {MarkToken, Markup} from 'rc-marked-input'
+
+const PrimaryMarkup: Markup = '@[__value__](primary:__meta__)'
+const DefaultMarkup: Markup = '@[__value__](default:__meta__)'
+
+const Button = ({label, primary, onClick}: {label: string; primary?: boolean; onClick?: () => void}) => (
+	<button
+		type="button"
+		onClick={onClick}
+		style={{
+			backgroundColor: primary ? '#1ea7fd' : 'transparent',
+			color: primary ? 'white' : '#333',
+			border: primary ? 'none' : '1px solid #ccc',
+			borderRadius: '3em',
+			padding: '0.5em 1em',
+			cursor: 'pointer',
+			fontSize: '14px',
+		}}
+	>
+		{label}
+	</button>
+)
+
+const ConfiguredMarkedInput = createMarkedInput({
+	Mark: Button,
+	options: [
+		{
+			markup: PrimaryMarkup,
+			slotProps: {
+				mark: ({value, meta}) => ({label: value || '', primary: true, onClick: () => alert(meta)}),
+				overlay: {
+					trigger: '@',
+					data: ['First', 'Second', 'Third', 'Fourth', 'Fifth', 'Sixth'],
+				},
+			},
+		},
+		{
+			markup: DefaultMarkup,
+			slotProps: {
+				mark: ({value}) => ({label: value || ''}),
+				overlay: {
+					trigger: '/',
+					data: ['Seventh', 'Eight', 'Ninth'],
+				},
+			},
+		},
+	],
+})
+
+const App = () => {
+	const [value, setValue] = useState(
+		"Enter the '@' for calling @[primary](primary:4) suggestions and '/' for @[default](default:7)!\n" +
+			'Mark is can be a any component with any logic. In this example it is the @[Button](primary:54): clickable primary or secondary.\n' +
+			'For found mark used @[annotations](default:123).'
+	)
+
+	const displayText = denote(value, (mark: MarkToken) => mark.value, [PrimaryMarkup, DefaultMarkup])
+
+	return (
+		<>
+			<ConfiguredMarkedInput
+				value={value}
+				onChange={setValue}
+				slotProps={{
+					container: {
+						onClick: () => console.log('onClick'),
+						onInput: () => console.log('onInput'),
+						onBlur: () => console.log('onBlur'),
+						onFocus: () => console.log('onFocus'),
+						onKeyDown: () => console.log('onKeyDown'),
+					},
+				}}
+			/>
+
+			<br />
+			<b>Plain text:</b>
+			<pre>{value}</pre>
+			<b>Display text (denoted):</b>
+			<pre>{displayText}</pre>
+		</>
+	)
+}
 
 ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
 	<React.StrictMode>
-		<Story.Base.Configured />
+		<App />
 	</React.StrictMode>
 )

packages/core/package.json

@@ -9,6 +9,7 @@
     "test:related": "vitest related",
     "test:ui": "vitest --ui",
     "test:coverage": "vitest run --coverage",
+    "coverage": "vitest run --coverage",
     "bench": "vitest bench --run"
   },
   "module": "./index.ts",

packages/core/src/features/parsing/README.md

@@ -7,20 +7,20 @@ Purpose: Handles parsing of text values into tokens and annotations
 ### Running Benchmarks
 
 ```bash
-# Запуск бенчмарков (результаты автоматически сохраняются в JSON)
+# Run benchmarks (results are saved to JSON automatically)
 pnpm run bench
 
-# Watch режим для разработки
+# Watch mode for development
 pnpm -F core run test:bench:watch
 ```
 
-**Примечание:** Бенчмарки используют единый файл `parser.bench.ts`. Результаты автоматически сохраняются в `parser.bench.result.json` после каждого запуска.
+**Note:** Benchmarks use the single file `parser.bench.ts`. Results are saved to `parser.bench.result.json` after each run.
 
 ### Benchmark Results Format
 
-Результаты бенчмарков сохраняются в `parser.bench.result.json` с расширенными метриками производительности.
+Benchmark results are stored in `parser.bench.result.json` with extended performance metrics.
 
-#### Структура JSON
+#### JSON structure
 
 ```json
 {
@@ -56,63 +56,63 @@ pnpm -F core run test:bench:watch
 }
 ```
 
-#### Метрики
+#### Metrics
 
-Каждый тест включает следующие метрики:
+Each test includes these metrics:
 
 **Operations (ops)**
 
-- `avg` - среднее количество операций в секунду
-- `min` - минимальное значение
-- `max` - максимальное значение
-- `p95` - 95-й перцентиль
-- `p99` - 99-й перцентиль
+- `avg` - average operations per second
+- `min` - minimum
+- `max` - maximum
+- `p95` - 95th percentile
+- `p99` - 99th percentile
 
 **Latency (latency)**
 
-- Время выполнения одной операции в миллисекундах
-- Те же статистики: avg, min, max, p95, p99
+- Execution time of one operation in milliseconds
+- Same stats: avg, min, max, p95, p99
 
 **Memory (memory)**
 
-- `heapUsed` - используемая heap память в KB
-- `external` - внешняя память в KB
+- `heapUsed` - heap memory used (KB)
+- `external` - external memory (KB)
 
 **Comparison**
 
-- `ratio` - соотношение производительности v1/v2
-- `winner` - какой парсер быстрее
-- `performanceGap` - разница в процентах
-- `latencyDiff` - соотношение latency
-- `memoryRatio` - соотношение потребления памяти
+- `ratio` - performance ratio v1/v2
+- `winner` - which parser is faster
+- `performanceGap` - percentage difference
+- `latencyDiff` - latency ratio
+- `memoryRatio` - memory usage ratio
 
-#### Категории тестов
+#### Test categories
 
 **scalability**
-Тесты масштабируемости с различным количеством marks (10, 50, 100, 500)
+Scalability tests with different counts of marks (10, 50, 100, 500)
 
 **realWorld**
-Реальные сценарии использования:
+Real-world scenarios:
 
-- social media - посты с упоминаниями и хэштегами
-- markdown-like - текст с markdown-подобной разметкой
-- code comments - комментарии кода с аннотациями
+- social media - posts with mentions and hashtags
+- markdown-like - text with markdown-like markup
+- code comments - code comments with annotations
 
 #### Trends
 
-Автоматический анализ изменений производительности между запусками:
+Automatic analysis of performance changes between runs:
 
-- `changeFromLast` - процентное изменение с последнего запуска
-- `regressions` - список тестов с деградацией производительности (>5%)
+- `changeFromLast` - percent change since the last run
+- `regressions` - list of tests with performance degradation (>5%)
 
-#### Интерпретация результатов
+#### How to read results
 
-1. **Высокий ops** - больше операций в секунду = лучше
-2. **Низкий latency** - меньше времени на операцию = лучше
-3. **Низкий memory** - меньше потребление памяти = лучше
-4. **p95/p99** - показывают стабильность производительности
-5. **Regressions** - требуют внимания при наличии
+1. **High ops** - more operations per second = better
+2. **Low latency** - less time per operation = better
+3. **Low memory** - lower memory usage = better
+4. **p95/p99** - show performance stability
+5. **Regressions** - need attention if present
 
-### История результатов
+### Results history
 
-Файл `parser.bench.result.json` хранит последние 10 запусков бенчмарков для анализа трендов и выявления регрессий.
+The file `parser.bench.result.json` stores the last 10 benchmark runs for trend analysis and regression detection.

packages/core/src/features/parsing/parser.profile.bench.ts

@@ -154,14 +154,14 @@ function createProfilingResult(currentRun: ProfilingRun, comparison?: ProfilingC
 	const testNames = Object.keys(currentRun.tests)
 	const totalDuration = testNames.reduce((sum, name) => sum + currentRun.tests[name].duration, 0)
 
-	// Расчет performance delta на основе comparison
+	// Calculate performance delta based on the comparison
 	let performanceDelta = '0.0%'
 
 	if (comparison) {
 		const avgChange =
 			comparison.differences.reduce((sum, diff) => sum + diff.durationChangePercent, 0) /
 			comparison.differences.length
-		// Инвертируем знак: положительное значение означает улучшение производительности
+		// Invert the sign: a positive value means performance improved
 		const performanceValue = -avgChange
 		performanceDelta = `${performanceValue >= 0 ? '+' : ''}${performanceValue.toFixed(1)}%`
 	}

packages/markput/src/types.ts

@@ -71,8 +71,9 @@ export interface Option<TMarkProps = MarkProps, TOverlayProps = OverlayProps> ex
 	}
 }
 
-export interface ConfiguredMarkedInput<TMarkProps = MarkProps, TOverlayProps = OverlayProps>
-	extends FunctionComponent<MarkedInputProps<TMarkProps, TOverlayProps>> {}
+export interface ConfiguredMarkedInput<TMarkProps = MarkProps, TOverlayProps = OverlayProps> extends FunctionComponent<
+	MarkedInputProps<TMarkProps, TOverlayProps>
+> {}
 
 /**
  * Available slots for customizing MarkedInput internal components

packages/storybook/main.ts → packages/storybook/.storybook/main.ts

@@ -1,8 +1,8 @@
 import type {StorybookConfig} from '@storybook/react-vite'
 
 const config: StorybookConfig = {
-	stories: ['./stories'],
-	staticDirs: ['./public'],
+	stories: ['../src/pages'],
+	staticDirs: ['../public'],
 	addons: ['@storybook/addon-links', '@storybook/addon-docs'],
 	framework: {
 		name: '@storybook/react-vite',