add playwright CT tests

.gitignore

@@ -38,6 +38,7 @@ yarn-error.log*
 !/**/.yarn/plugins
 !/**/.yarn/sdks
 !/**/.yarn/versions
+!/**/.yarn/patches
 /**/.pnp.*
 /test-results/
 /playwright-report/

.storybook/interaction.tsx

@@ -1,7 +1,7 @@
 import { userEvent } from '@storybook/test'
 
 export function delay(ms: number) {
-  if (!!global.test) {
+  if (!!globalThis.test) {
     return new Promise((resolve) => resolve(undefined))
   } else {
     return new Promise((resolve) => {
@@ -12,7 +12,7 @@ export function delay(ms: number) {
 }
 
 export async function mouseTo(target: Element, delay = 1700) {
-  if (!!global.test || !target) {
+  if (!!globalThis.test || !target) {
     return new Promise((resolve) => resolve(undefined))
   } else {
     return new Promise((resolve) => {

.yarn/patches/@storybook-react-dom-shim-npm-8.1.0-alpha.7-7299464ecf.patch

@@ -0,0 +1,41 @@
+diff --git a/package.json b/package.json
+index 31c3f4b02ca2aedaf61584073dbab6ba295e537c..64d70f43655963002980a8eb1cbbc0f24c8310eb 100644
+--- a/package.json
++++ b/package.json
+@@ -22,10 +22,10 @@
+   "sideEffects": false,
+   "exports": {
+     ".": {
+-      "types": "./dist/react-18.d.ts",
+-      "node": "./dist/react-18.js",
+-      "require": "./dist/react-18.js",
+-      "import": "./dist/react-18.mjs"
++      "types": "./dist/react-16.d.ts",
++      "node": "./dist/react-16.js",
++      "require": "./dist/react-16.js",
++      "import": "./dist/react-16.mjs"
+     },
+     "./dist/react-16": {
+       "types": "./dist/react-16.d.ts",
+@@ -39,9 +39,9 @@
+     },
+     "./package.json": "./package.json"
+   },
+-  "main": "dist/react-18.js",
+-  "module": "dist/react-18.mjs",
+-  "types": "dist/react-18.d.ts",
++  "main": "dist/react-16.js",
++  "module": "dist/react-16.mjs",
++  "types": "dist/react-16.d.ts",
+   "files": [
+     "dist/**/*",
+     "README.md",
+@@ -68,7 +68,7 @@
+     "entries": [
+       "./src/preset.ts",
+       "./src/react-16.tsx",
+-      "./src/react-18.tsx"
++      "./src/react-16.tsx"
+     ]
+   },
+   "gitHead": "e6a7fd8a655c69780bc20b9749c2699e44beae17"

.yarn/patches/use-dark-mode-npm-2.3.1-99b223f5c4.patch

@@ -0,0 +1,21 @@
+diff --git a/dist/use-dark-mode.js b/dist/use-dark-mode.js
+index 4b2effa7b9a5bb6add878f105da23aee5f1d3b51..8829f2e10164674185aadadc7227be91114ad5a1 100644
+--- a/dist/use-dark-mode.js
++++ b/dist/use-dark-mode.js
+@@ -1 +1 @@
+-function e(e){return e&&"object"==typeof e&&"default"in e?e.default:e}var t=e(require("@use-it/event-listener")),r=require("react"),n=e(require("use-persisted-state")),a=function(){},u={classList:{add:a,remove:a}},i=function(e,t,a){void 0===a&&(a=global);var i=e?n(e,t):r.useState,o=a.matchMedia?a.matchMedia("(prefers-color-scheme: dark)"):{},s={addEventListener:function(e,t){return o.addListener&&o.addListener(t)},removeEventListener:function(e,t){return o.removeListener&&o.removeListener(t)}},d="(prefers-color-scheme: dark)"===o.media,c=a.document&&a.document.body||u;return{usePersistedDarkModeState:i,getDefaultOnChange:function(e,t,r){return void 0===e&&(e=c),void 0===t&&(t="dark-mode"),void 0===r&&(r="light-mode"),function(n){e.classList.add(n?t:r),e.classList.remove(n?r:t)}},mediaQueryEventTarget:s,getInitialValue:function(e){return d?o.matches:e}}};module.exports=function(e,n){void 0===e&&(e=!1),void 0===n&&(n={});var a=n.element,u=n.classNameDark,o=n.classNameLight,s=n.onChange,d=n.storageKey;void 0===d&&(d="darkMode");var c=n.storageProvider,l=n.global,f=r.useMemo(function(){return i(d,c,l)},[d,c,l]),m=f.getDefaultOnChange,v=f.mediaQueryEventTarget,g=(0,f.usePersistedDarkModeState)((0,f.getInitialValue)(e)),h=g[0],k=g[1],L=r.useMemo(function(){return s||m(a,u,o)},[s,a,u,o,m]);return r.useEffect(function(){L(h)},[L,h]),t("change",function(e){return k(e.matches)},v),{value:h,enable:r.useCallback(function(){return k(!0)},[k]),disable:r.useCallback(function(){return k(!1)},[k]),toggle:r.useCallback(function(){return k(function(e){return!e})},[k])}};
++function e(e){return e&&"object"==typeof e&&"default"in e?e.default:e}var t=e(require("@use-it/event-listener")),r=require("react"),n=e(require("use-persisted-state")),a=function(){},u={classList:{add:a,remove:a}},i=function(e,t,a){void 0===a&&(a=globalThis);var i=e?n(e,t):r.useState,o=a.matchMedia?a.matchMedia("(prefers-color-scheme: dark)"):{},s={addEventListener:function(e,t){return o.addListener&&o.addListener(t)},removeEventListener:function(e,t){return o.removeListener&&o.removeListener(t)}},d="(prefers-color-scheme: dark)"===o.media,c=a.document&&a.document.body||u;return{usePersistedDarkModeState:i,getDefaultOnChange:function(e,t,r){return void 0===e&&(e=c),void 0===t&&(t="dark-mode"),void 0===r&&(r="light-mode"),function(n){e.classList.add(n?t:r),e.classList.remove(n?r:t)}},mediaQueryEventTarget:s,getInitialValue:function(e){return d?o.matches:e}}};module.exports=function(e,n){void 0===e&&(e=!1),void 0===n&&(n={});var a=n.element,u=n.classNameDark,o=n.classNameLight,s=n.onChange,d=n.storageKey;void 0===d&&(d="darkMode");var c=n.storageProvider,l=n.globalThis,f=r.useMemo(function(){return i(d,c,l)},[d,c,l]),m=f.getDefaultOnChange,v=f.mediaQueryEventTarget,g=(0,f.usePersistedDarkModeState)((0,f.getInitialValue)(e)),h=g[0],k=g[1],L=r.useMemo(function(){return s||m(a,u,o)},[s,a,u,o,m]);return r.useEffect(function(){L(h)},[L,h]),t("change",function(e){return k(e.matches)},v),{value:h,enable:r.useCallback(function(){return k(!0)},[k]),disable:r.useCallback(function(){return k(!1)},[k]),toggle:r.useCallback(function(){return k(function(e){return!e})},[k])}};
+diff --git a/dist/use-dark-mode.m.js b/dist/use-dark-mode.m.js
+index 59223b27dbbc15e8039f829e0ad0aeb2a1c60c44..8dd5d919103713509a1fa60b58d10772be833869 100644
+--- a/dist/use-dark-mode.m.js
++++ b/dist/use-dark-mode.m.js
+@@ -1 +1 @@
+-import e from"@use-it/event-listener";import{useState as t,useEffect as r,useCallback as n,useMemo as a}from"react";import o from"use-persisted-state";var i=function(){},u={classList:{add:i,remove:i}},d=function(e,r,n){void 0===n&&(n=global);var a=e?o(e,r):t,i=n.matchMedia?n.matchMedia("(prefers-color-scheme: dark)"):{},d={addEventListener:function(e,t){return i.addListener&&i.addListener(t)},removeEventListener:function(e,t){return i.removeListener&&i.removeListener(t)}},s="(prefers-color-scheme: dark)"===i.media,c=n.document&&n.document.body||u;return{usePersistedDarkModeState:a,getDefaultOnChange:function(e,t,r){return void 0===e&&(e=c),void 0===t&&(t="dark-mode"),void 0===r&&(r="light-mode"),function(n){e.classList.add(n?t:r),e.classList.remove(n?r:t)}},mediaQueryEventTarget:d,getInitialValue:function(e){return s?i.matches:e}}};export default function(t,o){void 0===t&&(t=!1),void 0===o&&(o={});var i=o.element,u=o.classNameDark,s=o.classNameLight,c=o.onChange,m=o.storageKey;void 0===m&&(m="darkMode");var l=o.storageProvider,f=o.global,v=a(function(){return d(m,l,f)},[m,l,f]),g=v.getDefaultOnChange,h=v.mediaQueryEventTarget,L=(0,v.usePersistedDarkModeState)((0,v.getInitialValue)(t)),k=L[0],p=L[1],b=a(function(){return c||g(i,u,s)},[c,i,u,s,g]);return r(function(){b(k)},[b,k]),e("change",function(e){return p(e.matches)},h),{value:k,enable:n(function(){return p(!0)},[p]),disable:n(function(){return p(!1)},[p]),toggle:n(function(){return p(function(e){return!e})},[p])}}
++import e from"@use-it/event-listener";import{useState as t,useEffect as r,useCallback as n,useMemo as a}from"react";import o from"use-persisted-state";var i=function(){},u={classList:{add:i,remove:i}},d=function(e,r,n){void 0===n&&(n=globalThis);var a=e?o(e,r):t,i=n.matchMedia?n.matchMedia("(prefers-color-scheme: dark)"):{},d={addEventListener:function(e,t){return i.addListener&&i.addListener(t)},removeEventListener:function(e,t){return i.removeListener&&i.removeListener(t)}},s="(prefers-color-scheme: dark)"===i.media,c=n.document&&n.document.body||u;return{usePersistedDarkModeState:a,getDefaultOnChange:function(e,t,r){return void 0===e&&(e=c),void 0===t&&(t="dark-mode"),void 0===r&&(r="light-mode"),function(n){e.classList.add(n?t:r),e.classList.remove(n?r:t)}},mediaQueryEventTarget:d,getInitialValue:function(e){return s?i.matches:e}}};export default function(t,o){void 0===t&&(t=!1),void 0===o&&(o={});var i=o.element,u=o.classNameDark,s=o.classNameLight,c=o.onChange,m=o.storageKey;void 0===m&&(m="darkMode");var l=o.storageProvider,f=o.globalThis,v=a(function(){return d(m,l,f)},[m,l,f]),g=v.getDefaultOnChange,h=v.mediaQueryEventTarget,L=(0,v.usePersistedDarkModeState)((0,v.getInitialValue)(t)),k=L[0],p=L[1],b=a(function(){return c||g(i,u,s)},[c,i,u,s,g]);return r(function(){b(k)},[b,k]),e("change",function(e){return p(e.matches)},h),{value:k,enable:n(function(){return p(!0)},[p]),disable:n(function(){return p(!1)},[p]),toggle:n(function(){return p(function(e){return!e})},[p])}}
+diff --git a/dist/use-dark-mode.umd.js b/dist/use-dark-mode.umd.js
+index decdd2aa5a527e79c063e46484da95a0779fc57b..d56e402a4e81208f7807c30f7f5bd9853ffe3478 100644
+--- a/dist/use-dark-mode.umd.js
++++ b/dist/use-dark-mode.umd.js
+@@ -1 +1 @@
+-!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t(require("@use-it/event-listener"),require("react"),require("use-persisted-state")):"function"==typeof define&&define.amd?define(["@use-it/event-listener","react","use-persisted-state"],t):e.useDarkMode=t(e.useEventListener,e.react,e.createPersistedState)}(this,function(e,t,r){e=e&&e.hasOwnProperty("default")?e.default:e,r=r&&r.hasOwnProperty("default")?r.default:r;var n=function(){},a={classList:{add:n,remove:n}},u=function(e,n,u){void 0===u&&(u=global);var i=e?r(e,n):t.useState,o=u.matchMedia?u.matchMedia("(prefers-color-scheme: dark)"):{},s={addEventListener:function(e,t){return o.addListener&&o.addListener(t)},removeEventListener:function(e,t){return o.removeListener&&o.removeListener(t)}},d="(prefers-color-scheme: dark)"===o.media,c=u.document&&u.document.body||a;return{usePersistedDarkModeState:i,getDefaultOnChange:function(e,t,r){return void 0===e&&(e=c),void 0===t&&(t="dark-mode"),void 0===r&&(r="light-mode"),function(n){e.classList.add(n?t:r),e.classList.remove(n?r:t)}},mediaQueryEventTarget:s,getInitialValue:function(e){return d?o.matches:e}}};return function(r,n){void 0===r&&(r=!1),void 0===n&&(n={});var a=n.element,i=n.classNameDark,o=n.classNameLight,s=n.onChange,d=n.storageKey;void 0===d&&(d="darkMode");var c=n.storageProvider,l=n.global,f=t.useMemo(function(){return u(d,c,l)},[d,c,l]),m=f.getDefaultOnChange,v=f.mediaQueryEventTarget,g=(0,f.usePersistedDarkModeState)((0,f.getInitialValue)(r)),h=g[0],k=g[1],p=t.useMemo(function(){return s||m(a,i,o)},[s,a,i,o,m]);return t.useEffect(function(){p(h)},[p,h]),e("change",function(e){return k(e.matches)},v),{value:h,enable:t.useCallback(function(){return k(!0)},[k]),disable:t.useCallback(function(){return k(!1)},[k]),toggle:t.useCallback(function(){return k(function(e){return!e})},[k])}}});
++!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t(require("@use-it/event-listener"),require("react"),require("use-persisted-state")):"function"==typeof define&&define.amd?define(["@use-it/event-listener","react","use-persisted-state"],t):e.useDarkMode=t(e.useEventListener,e.react,e.createPersistedState)}(this,function(e,t,r){e=e&&e.hasOwnProperty("default")?e.default:e,r=r&&r.hasOwnProperty("default")?r.default:r;var n=function(){},a={classList:{add:n,remove:n}},u=function(e,n,u){void 0===u&&(u=globalThis);var i=e?r(e,n):t.useState,o=u.matchMedia?u.matchMedia("(prefers-color-scheme: dark)"):{},s={addEventListener:function(e,t){return o.addListener&&o.addListener(t)},removeEventListener:function(e,t){return o.removeListener&&o.removeListener(t)}},d="(prefers-color-scheme: dark)"===o.media,c=u.document&&u.document.body||a;return{usePersistedDarkModeState:i,getDefaultOnChange:function(e,t,r){return void 0===e&&(e=c),void 0===t&&(t="dark-mode"),void 0===r&&(r="light-mode"),function(n){e.classList.add(n?t:r),e.classList.remove(n?r:t)}},mediaQueryEventTarget:s,getInitialValue:function(e){return d?o.matches:e}}};return function(r,n){void 0===r&&(r=!1),void 0===n&&(n={});var a=n.element,i=n.classNameDark,o=n.classNameLight,s=n.onChange,d=n.storageKey;void 0===d&&(d="darkMode");var c=n.storageProvider,l=n.globalThis,f=t.useMemo(function(){return u(d,c,l)},[d,c,l]),m=f.getDefaultOnChange,v=f.mediaQueryEventTarget,g=(0,f.usePersistedDarkModeState)((0,f.getInitialValue)(r)),h=g[0],k=g[1],p=t.useMemo(function(){return s||m(a,i,o)},[s,a,i,o,m]);return t.useEffect(function(){p(h)},[p,h]),e("change",function(e){return k(e.matches)},v),{value:h,enable:t.useCallback(function(){return k(!0)},[k]),disable:t.useCallback(function(){return k(!1)},[k]),toggle:t.useCallback(function(){return k(function(e){return!e})},[k])}}});

package.json

@@ -18,6 +18,7 @@
     "typescript": "^4.9.5",
     "use-dark-mode": "^2.3.1"
   },
+  "type": "module",
   "scripts": {
     "start": "vite",
     "build": "tsc && vite build",
@@ -125,7 +126,9 @@
     "wait-on": "^7.2.0"
   },
   "resolutions": {
-    "@types/react": "^17.0.2"
+    "@types/react": "^17.0.2",
+    "@storybook/[email protected]": "patch:@storybook/react-dom-shim@npm%3A8.1.0-alpha.7#./.yarn/patches/@storybook-react-dom-shim-npm-8.1.0-alpha.7-7299464ecf.patch",
+    "use-dark-mode@^2.3.1": "patch:use-dark-mode@npm%3A2.3.1#./.yarn/patches/use-dark-mode-npm-2.3.1-99b223f5c4.patch"
   },
   "msw": {
     "workerDirectory": "public"

src/components/AnimatedIllustration/AnimatedIllustration.stories.portable.portable.ts

@@ -0,0 +1,5 @@
+import { composeStories } from '@storybook/react'
+
+import * as stories from './AnimatedIllustration.stories.portable'
+
+export default composeStories(stories)

src/components/AnimatedIllustration/AnimatedIllustration.stories.portable.ts

@@ -0,0 +1,5 @@
+import { composeStories } from '@storybook/react'
+
+import * as stories from './AnimatedIllustration.stories'
+
+export default composeStories(stories)

src/components/Badge/Badge.stories.portable.ts

@@ -0,0 +1,5 @@
+import { composeStories } from '@storybook/react'
+
+import * as stories from './Badge.stories'
+
+export default composeStories(stories)

src/components/Button/Button.stories.portable.ts

@@ -0,0 +1,5 @@
+import { composeStories } from '@storybook/react'
+
+import * as stories from './Button.stories'
+
+export default composeStories(stories)

src/components/Category/Category.stories.portable.ts

@@ -0,0 +1,5 @@
+import { composeStories } from '@storybook/react'
+
+import * as stories from './Category.stories'
+
+export default composeStories(stories)

src/components/ErrorBlock/ErrorBlock.stories.portable.ts

@@ -0,0 +1,5 @@
+import { composeStories } from '@storybook/react'
+
+import * as stories from './ErrorBlock.stories'
+
+export default composeStories(stories)

src/components/ErrorBlock/ErrorBlock.stories.tsx

@@ -23,13 +23,13 @@ Default.args = {
   buttonText: 'See all restaurants',
 }
 
-// export const Error500 = Template.bind({})
-// Error500.args = {
-//   title: 'Something went wrong!',
-//   body: 'Our bad, something went wrong on our side.',
-//   image: <AnimatedIllustration animation="Error" />,
-//   buttonText: 'Try again',
-// }
+export const Error500 = Template.bind({})
+Error500.args = {
+  title: 'Something went wrong!',
+  body: 'Our bad, something went wrong on our side.',
+  image: <AnimatedIllustration animation="Error" />,
+  buttonText: 'Try again',
+}
 
 export const Error404 = Template.bind({})
 Error404.args = {

src/components/Footer/Footer.stories.portable.ts

@@ -0,0 +1,5 @@
+import { composeStories } from '@storybook/react'
+
+import * as stories from './Footer.stories'
+
+export default composeStories(stories)

src/components/Header/Header.stories.portable.ts

@@ -0,0 +1,5 @@
+import { composeStories } from '@storybook/react'
+
+import * as stories from './Header.stories'
+
+export default composeStories(stories)

src/components/Icon/Icon.stories.portable.ts

@@ -0,0 +1,5 @@
+import { composeStories } from '@storybook/react'
+
+import * as stories from './Icon.stories'
+
+export default composeStories(stories)

src/components/IconButton/IconButton.stories.portable.ts

@@ -0,0 +1,5 @@
+import { composeStories } from '@storybook/react'
+
+import * as stories from './IconButton.stories'
+
+export default composeStories(stories)

src/components/Logo/Logo.stories.portable.ts

@@ -0,0 +1,5 @@
+import { composeStories } from '@storybook/react'
+
+import * as stories from './Logo.stories'
+
+export default composeStories(stories)

src/components/Modal/Modal.stories.portable.ts

@@ -0,0 +1,5 @@
+import { composeStories } from '@storybook/react'
+
+import * as stories from './Modal.stories'
+
+export default composeStories(stories)

src/components/PageSection/PageSection.stories.portable.ts

@@ -0,0 +1,5 @@
+import { composeStories } from '@storybook/react'
+
+import * as stories from './PageSection.stories'
+
+export default composeStories(stories)

src/components/RestaurantCard/RestaurantCard.stories.portable.ts

@@ -0,0 +1,5 @@
+import { composeStories } from '@storybook/react'
+
+import * as stories from './RestaurantCard.stories'
+
+export default composeStories(stories)

src/components/Review/Review.stories.portable.ts

@@ -0,0 +1,5 @@
+import { composeStories } from '@storybook/react'
+
+import * as stories from './Review.stories'
+
+export default composeStories(stories)

src/components/ShoppingCart/OrderSummary/OrderSummary.stories.portable.ts

@@ -0,0 +1,5 @@
+import { composeStories } from '@storybook/react'
+
+import * as stories from './OrderSummary.stories'
+
+export default composeStories(stories)

src/components/ShoppingCartMenu/ShoppingCartMenu.stories.portable.ts

@@ -0,0 +1,5 @@
+import { composeStories } from '@storybook/react'
+
+import * as stories from './ShoppingCartMenu.stories'
+
+export default composeStories(stories)

src/components/Sidebar/Sidebar.stories.portable.ts

@@ -0,0 +1,5 @@
+import { composeStories } from '@storybook/react'
+
+import * as stories from './Sidebar.stories'
+
+export default composeStories(stories)

src/components/Spinner/Spinner.stories.portable.ts

@@ -0,0 +1,5 @@
+import { composeStories } from '@storybook/react'
+
+import * as stories from './Spinner.stories'
+
+export default composeStories(stories)

src/components/TopBanner/TopBanner.stories.portable.ts

@@ -0,0 +1,5 @@
+import { composeStories } from '@storybook/react'
+
+import * as stories from './TopBanner.stories'
+
+export default composeStories(stories)

src/components/forms/Input.stories.portable.ts

@@ -0,0 +1,5 @@
+import { composeStories } from '@storybook/react'
+
+import * as stories from './Input.stories'
+
+export default composeStories(stories)

src/components/forms/Select.stories.portable.ts

@@ -0,0 +1,5 @@
+import { composeStories } from '@storybook/react'
+
+import * as stories from './Select.stories'
+
+export default composeStories(stories)

src/components/typography/Body.stories.portable.ts

@@ -0,0 +1,5 @@
+import { composeStories } from '@storybook/react'
+
+import * as stories from './Body.stories'
+
+export default composeStories(stories)

src/components/typography/Heading.stories.portable.ts

@@ -0,0 +1,5 @@
+import { composeStories } from '@storybook/react'
+
+import * as stories from './Heading.stories'
+
+export default composeStories(stories)

src/generate-playwright-tests.mjs

@@ -0,0 +1,63 @@
+import fs from 'fs';
+import path from 'path';
+
+const srcDirectory = path.join(process.cwd(), 'src');
+const testFilePath = path.join(srcDirectory, 'storybook.playwright.tsx');
+
+let imports = '';
+let tests = '';
+
+function camelCase(input) {
+    return input.toLowerCase().replace(/[^a-zA-Z0-9]+(.)/g, (m, chr) => chr.toUpperCase());
+}
+
+function extractNamedExports(content) {
+    const exportRegex = /export (const|function|class|let|var) (\w+)/g;
+    const matches = [];
+    let match;
+    while ((match = exportRegex.exec(content)) !== null) {
+        matches.push(match[2]);
+    }
+    return matches;
+}
+
+function prepareImportAndTest(filePath) {
+    const relativePath = path.relative(srcDirectory, filePath);
+    const fileName = path.basename(filePath, '.portable.ts');
+    const importName = camelCase(fileName.replace('.stories', '')) + 'Stories';
+    const importStatement = `import ${importName} from './${relativePath.replace(/\\/g, '/').replace(/\.[^/.]+$/, "")}';\n`;
+
+    const componentFilePath = filePath.replace('.portable.ts', '.tsx');
+    const componentContent = fs.readFileSync(componentFilePath, 'utf-8');
+    const namedExports = extractNamedExports(componentContent);
+
+    const componentName = fileName.replace('.stories', '');
+    let testCase = `test.describe('renders ${componentName} stories', async () => {\n`;
+    namedExports.forEach(exp => {
+        testCase += `  test('${exp}', async ({ mount }) => {\n` +
+                    `    await mount(<${importName}.${exp} />)\n` +
+                    `  })\n`;
+    });
+    testCase += `})\n\n`;
+
+    imports += importStatement;
+    tests += testCase;
+}
+
+function traverseDirectories(directory) {
+    fs.readdirSync(directory, { withFileTypes: true }).forEach(dirent => {
+        const fullPath = path.join(directory, dirent.name);
+        if (dirent.isDirectory()) {
+            traverseDirectories(fullPath);
+        } else if (dirent.isFile() && dirent.name.endsWith('.stories.portable.ts')) {
+            prepareImportAndTest(fullPath);
+        }
+    });
+}
+
+function generateTests() {
+    fs.writeFileSync(testFilePath, `// @ts-expect-error missing types\nimport { createTest } from '@storybook/react/experimental-playwright';\nimport { test as base } from '@playwright/experimental-ct-react17';\n\n` + imports + `\n\nconst test = createTest(base);\n\n` + tests, 'utf-8');
+}
+
+traverseDirectories(srcDirectory);
+generateTests();

src/pages/CategoryDetailPage/CategoryDetailPage.stories.portable.ts

@@ -0,0 +1,5 @@
+import { composeStories } from '@storybook/react'
+
+import * as stories from './CategoryDetailPage.stories'
+
+export default composeStories(stories)