@pnx-mixtape/mxds 0.0.30 → 0.1.0-rc.1

package/.storybook/main.ts

@@ -3,12 +3,15 @@ import { StorybookConfig } from "@storybook/html-vite"
 const config: StorybookConfig = {
   stories: ["../src/**/*.mdx", "../src/**/*.stories.ts", "../mockups/*.stories.ts"],
   staticDirs: ["./public"],
-  addons: ["@storybook/addon-a11y", "@storybook/addon-docs", "@storybook/addon-vitest"],
+  addons: [
+    "@storybook/addon-a11y",
+    "@storybook/addon-docs",
+    "@storybook/addon-vitest",
+    "@chromatic-com/storybook",
+  ],
   framework: "@storybook/html-vite",
-  refs: (config, { configType }) => {
-    if (configType === "DEVELOPMENT") {
-      return {}
-    }
+  refs: (ref, { configType }) => {
+    if (configType === "DEVELOPMENT") return {}
     return {
       react: {
         title: "React components",
@@ -16,17 +19,6 @@ const config: StorybookConfig = {
       },
     }
   },
-  async viteFinal(config) {
-    // Merge custom configuration into the default config
-    const { mergeConfig } = await import("vite")
-    return mergeConfig(config, {
-      // Add dependencies to pre-optimization
-      cacheDir: "node_modules/.vite-storybook",
-      build: {
-        cssMinify: "esbuild",
-      },
-    })
-  },
 }
 
 export default config

package/.storybook/modes.ts

@@ -0,0 +1,11 @@
+export const modes = {
+  xs: {
+    viewport: "xs",
+  },
+  md: {
+    viewport: "md",
+  },
+  xl: {
+    viewport: "xl",
+  },
+} as const

package/.storybook/preview.ts

@@ -21,7 +21,7 @@ const preview: Preview = {
       options: {
         runOnly: {
           type: "tag",
-          values: ["wcag2a", "wcag2aa"],
+          values: ["wcag2a", "wcag2aa", "wcag21a", "wcag21aa", "wcag22aa", "best-practice"],
         },
         resultTypes: ["violations"],
       },
@@ -34,6 +34,16 @@ const preview: Preview = {
       },
     },
     useBg: false,
+    viewport: {
+      options: {
+        xs: { name: "XSmall", styles: { width: "320px", height: "900px" } },
+        sm: { name: "Small", styles: { width: "640px", height: "900px" } },
+        md: { name: "Medium", styles: { width: "768px", height: "900px" } },
+        lg: { name: "Large", styles: { width: "1024px", height: "900px" } },
+        xl: { name: "XL", styles: { width: "1280px", height: "900px" } },
+        xxl: { name: "XXL", styles: { width: "1536px", height: "900px" } },
+      },
+    },
   },
   globalTypes: {
     background: {

package/.storybook/storybook.css

@@ -1,9 +1,12 @@
+@import url("https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,400..700;1,14..32,400..700&display=swap");
+
 .sbdocs-content {
   max-inline-size: 1440px !important;
 }
 
 :root {
   --storybook-accent: oklch(50% 0.3 320deg);
+  --font-family: "Inter", system-ui, sans-serif;
 }
 
 [id*="atom-spacing"] [class^="mx-spacing"],
@@ -33,3 +36,7 @@
     display: block;
   }
 }
+
+[id*="component-cookieconsent"] .mx-page {
+  min-block-size: 100px;
+}

package/.storybook/vitest.setup.ts

@@ -1,35 +1,17 @@
-import { beforeAll, afterEach, expect } from "vitest"
+import { afterEach, expect } from "vitest"
 import { page } from "vitest/browser"
-import { setProjectAnnotations } from "@storybook/html-vite"
-import * as a11yAddonAnnotations from "@storybook/addon-a11y/preview"
-import * as previewAnnotations from "./preview"
 
-// This is an important step to apply the right configuration when testing your stories.
-// More info at: https://storybook.js.org/docs/api/portable-stories/portable-stories-vitest#setprojectannotations
-const annotations = setProjectAnnotations([previewAnnotations, a11yAddonAnnotations])
-
-beforeAll(annotations.beforeAll)
-
-afterEach(async () => {
-  await new Promise(resolve => window.requestIdleCallback(resolve))
-  const pageEl = page.getByTestId("page")?.element()
-  if (!pageEl) return
-
-  // Find all elements with aria attributes or react-aria names
+export const normalizeGeneratedIds = (root: Element) => {
   const selector =
     '[aria-controls],[aria-labelledby],[aria-owns],[aria-describedby],[name^="react-aria"]'
-  const els = Array.from(pageEl.querySelectorAll(selector))
-
+  const els = Array.from(root.querySelectorAll(selector))
+  // Find all elements with aria attributes or react-aria names
   const attributes = ["aria-controls", "aria-labelledby", "aria-describedby", "aria-owns", "name"]
-
-  // Collect the original IDs
   const ids: string[] = []
-
   // Replace attribute values with unique-${ix}
   attributes.forEach(attr => {
     els.forEach((el, ix) => {
       if (!el.hasAttribute(attr)) return
-
       const originalValue = el.getAttribute(attr)
       if (originalValue && !ids.includes(originalValue)) {
         ids.push(originalValue)
@@ -37,17 +19,32 @@ afterEach(async () => {
       el.setAttribute(attr, `unique-${ix}`)
     })
   })
-
   // Replace the actual id attributes that match collected IDs
-  if (ids.length) {
-    ids.forEach((id, ix) => {
-      const idElements = pageEl.querySelectorAll(`[id="${id}"]`)
-      idElements.forEach(el => {
-        el.setAttribute("id", `unique-${ix}`)
-      })
+  ids.forEach((id, ix) => {
+    root.querySelectorAll(`[id="${id}"]`).forEach(el => {
+      el.setAttribute("id", `unique-${ix}`)
     })
-  }
+  })
+}
+
+export const waitForIdle = () => {
+  return new Promise<void>(resolve => {
+    if ("requestIdleCallback" in globalThis) {
+      globalThis.requestIdleCallback(() => setTimeout(resolve, 20))
+      return
+    }
+    setTimeout(resolve, 20)
+  })
+}
+
+afterEach(async () => {
+  await waitForIdle()
+
+  const root = page.getByTestId("page")?.element()
+  if (!root) return
+
+  normalizeGeneratedIds(root)
 
-  const element = pageEl.innerHTML
-  expect(element).toMatchSnapshot()
+  // oxlint-disable-next-line vitest/no-standalone-expect
+  expect(root.innerHTML).toMatchSnapshot()
 })

package/LICENSE

@@ -0,0 +1,22 @@
+MIT License
+
+Copyright (c) 2026 PreviousNext
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
+