Merge pull request #261 from qwikifiers/pr-storybook

Author: shairez

cla-signs/v1/cla.json

@@ -217,4 +217,4 @@
       "pullRequestNo": 262
     }
   ]
-}
+}

package.json

@@ -31,13 +31,16 @@
     "@nrwl/storybook": "15.8.7",
     "@nrwl/vite": "15.8.7",
     "@nrwl/workspace": "15.8.7",
-    "@storybook/addon-essentials": "7.0.0-beta.30",
-    "@storybook/addon-interactions": "7.0.0-beta.30",
-    "@storybook/addon-links": "7.0.0-beta.30",
-    "@storybook/blocks": "7.0.0-beta.30",
-    "@storybook/builder-vite": "0.4.2",
-    "@storybook/html": "7.0.0-beta.30",
-    "@storybook/html-vite": "7.0.0-beta.30",
+    "@storybook/addon-a11y": "7.0.0-rc.10",
+    "@storybook/addon-essentials": "7.0.0-rc.7",
+    "@storybook/addon-interactions": "7.0.0-rc.7",
+    "@storybook/addon-links": "7.0.0-rc.7",
+    "@storybook/blocks": "7.0.0-rc.7",
+    "@storybook/builder-vite": "7.0.0-rc.7",
+    "@storybook/html": "7.0.0-rc.7",
+    "@storybook/html-vite": "7.0.0-rc.7",
+    "@storybook/jest": "0.0.10",
+    "@storybook/test-runner": "0.10.0-next.12",
     "@storybook/testing-library": "0.0.13",
     "@types/eslint": "8.21.3",
     "@types/node": "18.15.3",
@@ -47,18 +50,21 @@
     "@vitest/ui": "^0.28.5",
     "all-contributors-cli": "^6.24.0",
     "autoprefixer": "^10.4.13",
+    "axe-core": "4.6.3",
     "commitizen": "^4.3.0",
     "commitlint": "^17.4.3",
     "country-list-json": "1.1.0",
-    "cypress": "^12.6.0",
-    "cypress-ct-qwik": "0.0.5",
+    "cypress": "^12.9.0",
+    "cypress-axe": "1.4.0",
+    "cypress-ct-qwik": "0.3.0",
     "cz-conventional-changelog": "^3.3.0",
     "daisyui": "^2.50.1",
     "danger": "11.2.4",
     "eslint": "8.36.0",
     "eslint-config-prettier": "8.6.0",
     "eslint-plugin-cypress": "^2.12.1",
     "eslint-plugin-qwik": "0.23.0",
+    "eslint-plugin-storybook": "^0.6.11",
     "html-webpack-plugin": "^5.5.0",
     "husky": "^8.0.3",
     "jsdom": "~20.0.3",
@@ -72,14 +78,16 @@
     "prettier": "2.8.6",
     "pretty-quick": "^3.1.3",
     "qwik-nx": "0.14.0",
+    "react": "18.2.0",
+    "react-dom": "18.2.0",
     "sass": "1.58.1",
-    "storybook": "7.0.0-beta.30",
+    "storybook": "7.0.0-rc.7",
     "storybook-framework-qwik": "0.0.8",
     "tailwindcss": "^3.2.6",
     "ts-node": "10.9.1",
     "typescript": "5.0.2",
     "undici": "5.21.0",
-    "vite": "4.1.2",
+    "vite": "4.2.1",
     "vite-plugin-dts": "~1.7.3",
     "vite-plugin-eslint": "^1.8.1",
     "vite-tsconfig-paths": "4.0.7",

packages/headless/.storybook/main.ts

@@ -1,33 +1,44 @@
 import { qwikVite } from '@builder.io/qwik/optimizer';
-import { rootMain } from '../../../.storybook/main';
-
-import type { StorybookViteConfig } from '@storybook/builder-vite';
+import { resolve } from 'path';
+import { StorybookConfig } from 'storybook-framework-qwik';
+// import { rootMain } from '../../../.storybook/main';
 
 import { mergeConfig } from 'vite';
 import viteTsConfigPaths from 'vite-tsconfig-paths';
 
-const config: StorybookViteConfig = {
-  ...rootMain,
-  core: {
-    ...rootMain.core,
-    builder: '@storybook/builder-vite',
-  },
-  stories: [
-    ...rootMain.stories,
-    '../src/lib/**/*.stories.mdx',
-    '../src/lib/**/*.stories.@(js|jsx|ts|tsx)',
+const config: StorybookConfig = {
+  // ...rootMain,
+
+  addons: [
+    '@storybook/addon-links',
+    '@storybook/addon-essentials',
+    '@storybook/addon-interactions',
+    '@storybook/addon-a11y',
+    '@storybook/addon-coverage',
   ],
-  addons: ['@storybook/addon-essentials', ...(rootMain.addons || [])],
+  // addons: ['@storybook/addon-essentials', ...(rootMain.addons || [])],
+
   framework: {
     name: 'storybook-framework-qwik',
   },
+  core: {
+    // ...rootMain.core,
+    renderer: 'storybook-framework-qwik',
+  },
+  stories: [
+    // ...rootMain.stories,
+    '../src/components/**/*.stories.mdx',
+    '../src/components/**/*.stories.@(js|jsx|ts|tsx)',
+  ],
+
   viteFinal: async (config: any) => {
     return mergeConfig(config, {
       plugins: [
-        viteTsConfigPaths({
-          root: '../../../',
+        qwikVite({
+          vendorRoots: [__dirname],
+          srcDir: resolve(__dirname, '../src'),
         }),
-        qwikVite(),
+        viteTsConfigPaths(),
       ],
     });
   },

packages/headless/.storybook/preview-head.html

@@ -0,0 +1,3 @@
+<script>
+  window.global = window;
+</script>

packages/headless/.storybook/preview.ts

@@ -0,0 +1,37 @@
+// import { qwikCityDecorator } from 'storybook-framework-qwik/qwik-city-decorator';
+import { Parameters } from 'storybook-framework-qwik';
+import type { Preview } from '@storybook/types';
+// export const decorators: Decorator[] = [qwikCityDecorator];
+
+// const preview: Preview = {
+//   parameters: {
+//     backgrounds: {
+//       default: 'light'
+//     },
+//     actions: { argTypesRegex: '^on[A-Z].*' },
+//     controls: {
+//       matchers: {
+//         color: /(background|color)$/i,
+//         date: /Date$/
+//       }
+//     }
+//   }
+// }
+
+// export default preview
+
+export const parameters: Parameters = {
+  a11y: {
+    config: {},
+    options: {
+      checks: { 'color-contrast': { options: { noScroll: true } } },
+      restoreScroll: true,
+    },
+  },
+  options: {
+    showRoots: true,
+  },
+  docs: {
+    iframeHeight: '200px',
+  },
+};

packages/headless/.storybook/preview.tsx

@@ -4,14 +4,20 @@
     "emitDecoratorMetadata": true
   },
 
-  "exclude": ["../**/*.spec.ts"],
+  "exclude": [
+    "../**/*.spec.ts",
+    "../**/*.test.ts",
+    "../**/*.spec.tsx",
+    "../**/*.test.tsx"
+  ],
   "include": [
     "../src/**/*.stories.ts",
     "../src/**/*.stories.js",
     "../src/**/*.stories.jsx",
     "../src/**/*.stories.tsx",
     "../src/**/*.stories.mdx",
     "*.ts",
-    "*.js"
+    "*.js",
+    "preview.tsx"
   ]
 }

packages/headless/.storybook/tsconfig.json

@@ -1,17 +1,11 @@
 import { defineConfig } from 'cypress';
-import { mergeConfig } from 'vite';
-import viteConfig from './vite.config';
 
-const cypressConfig = {
+export default defineConfig({
   component: {
     specPattern: '**/*.spec.{js,jsx,ts,tsx}',
     devServer: {
+      framework: 'cypress-ct-qwik',
       bundler: 'vite',
-      viteConfig,
     },
   },
-};
-
-export default defineConfig(
-  cypressConfig as Cypress.ConfigOptions<typeof cypressConfig>
-);
+});

packages/headless/cypress.config.ts

@@ -4,124 +4,9 @@
     <meta charset="utf-8" />
     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
     <meta name="viewport" content="width=device-width,initial-scale=1.0" />
-    <title>headless Components App</title>
+    <title>Headless Components App</title>
   </head>
   <body>
     <div data-cy-root></div>
-    <script type="text/javascript">
-      ((e, t) => {
-        const n = '__q_context__',
-          o = window,
-          i = new Set(),
-          s = (t) => e.querySelectorAll(t),
-          r = (e, t, n = t.type) => {
-            s('[on' + e + '\\:' + n + ']').forEach((o) => f(o, e, t, n));
-          },
-          a = (e, t) => e.getAttribute(t),
-          l = (t) => {
-            if (void 0 === t._qwikjson_) {
-              let n = (t === e.documentElement ? e.body : t).lastElementChild;
-              for (; n; ) {
-                if ('SCRIPT' === n.tagName && 'qwik/json' === a(n, 'type')) {
-                  t._qwikjson_ = JSON.parse(
-                    n.textContent.replace(/\\x3C(\/?script)/g, '<$1')
-                  );
-                  break;
-                }
-                n = n.previousElementSibling;
-              }
-            }
-          },
-          c = (e, t) => new CustomEvent(e, { detail: t }),
-          f = async (t, o, i, s = i.type) => {
-            const r = 'on' + o + ':' + s;
-            t.hasAttribute('preventdefault:' + s) && i.preventDefault();
-            const c = t._qc_,
-              f = null == c ? void 0 : c.li.filter((e) => e[0] === r);
-            if (f && f.length > 0) {
-              for (const e of f)
-                await e[1].getFn([t, i], () => t.isConnected)(i, t);
-              return;
-            }
-            const d = a(t, r);
-            if (d) {
-              const o = t.closest('[q\\:container]'),
-                s = new URL(a(o, 'q:base'), e.baseURI);
-              for (const r of d.split('\n')) {
-                const a = new URL(r, s),
-                  c = a.hash.replace(/^#?([^?[|]*).*$/, '$1') || 'default',
-                  f = performance.now(),
-                  d = import(a.href.split('#')[0]);
-                l(o);
-                const p = b(await d, c),
-                  w = e[n];
-                if (t.isConnected)
-                  try {
-                    (e[n] = [t, i, a]),
-                      u('qsymbol', { symbol: c, element: t, reqTime: f }),
-                      await p(i, t);
-                  } finally {
-                    e[n] = w;
-                  }
-              }
-            }
-          },
-          u = (t, n) => {
-            e.dispatchEvent(c(t, n));
-          },
-          b = (e, t) => {
-            if (t in e) return e[t];
-            for (const n of Object.values(e))
-              if ('object' == typeof n && n && t in n) return n[t];
-          },
-          d = (e) => e.replace(/([A-Z])/g, (e) => '-' + e.toLowerCase()),
-          p = async (e) => {
-            let t = d(e.type),
-              n = e.target;
-            for (r('-document', e, t); n && n.getAttribute; )
-              await f(n, '', e, t),
-                (n =
-                  e.bubbles && !0 !== e.cancelBubble ? n.parentElement : null);
-          },
-          w = (e) => {
-            r('-window', e, d(e.type));
-          },
-          q = () => {
-            var n;
-            const r = e.readyState;
-            if (
-              !t &&
-              ('interactive' == r || 'complete' == r) &&
-              ((t = 1),
-              u('qinit'),
-              (null != (n = o.requestIdleCallback) ? n : o.setTimeout).bind(o)(
-                () => u('qidle')
-              ),
-              i.has('qvisible'))
-            ) {
-              const e = s('[on\\:qvisible]'),
-                t = new IntersectionObserver((e) => {
-                  for (const n of e)
-                    n.isIntersecting &&
-                      (t.unobserve(n.target),
-                      f(n.target, '', c('qvisible', n)));
-                });
-              e.forEach((e) => t.observe(e));
-            }
-          },
-          v = (e, t, n, o = !1) => e.addEventListener(t, n, { capture: o }),
-          y = (t) => {
-            for (const n of t)
-              i.has(n) || (v(e, n, p, !0), v(o, n, w), i.add(n));
-          };
-        if (!e.qR) {
-          const t = o.qwikevents;
-          Array.isArray(t) && y(t),
-            (o.qwikevents = { push: (...e) => y(e) }),
-            v(e, 'readystatechange', q),
-            q();
-        }
-      })(document);
-    </script>
   </body>
 </html>

packages/headless/cypress/support/component-index.html

@@ -13,5 +13,28 @@
 // https://on.cypress.io/configuration
 // ***********************************************************
 
+import { addQwikLoader, mount } from 'cypress-ct-qwik';
+
+addQwikLoader();
+
 // Import commands.ts using ES2015 syntax:
 import './commands';
+import 'cypress-axe';
+
+// Augment the Cypress namespace to include type definitions for
+// your custom command.
+// Alternatively, can be defined in cypress/support/component.d.ts
+// with a <reference path="./component" /> at the top of your spec.
+declare global {
+  // eslint-disable-next-line @typescript-eslint/no-namespace
+  namespace Cypress {
+    interface Chainable {
+      mount: typeof mount;
+    }
+  }
+}
+
+Cypress.Commands.add('mount', mount);
+
+// Example use:
+// cy.mount(MyComponent)