@pure-ds/storybook 0.1.0

package/.storybook/main.js

@@ -0,0 +1,160 @@
+import { join, dirname, resolve } from 'path';
+import { fileURLToPath } from 'url';
+import fs from 'fs';
+
+const currentFilename = fileURLToPath(import.meta.url);
+const currentDirname = dirname(currentFilename);
+
+// Determine if we are in the monorepo or installed as a package
+const isPackage = currentDirname.includes('node_modules');
+
+const pdsSrcPath = isPackage ? resolve(currentDirname, '../src') : resolve(currentDirname, '../../../src');
+const pdsAssetsPath = isPackage ? resolve(currentDirname, '../public/assets') : resolve(currentDirname, '../../../public/assets');
+
+const normalizePath = (path) => path.replace(/\\/g, '/');
+
+/** @type { import('@storybook/web-components-vite').StorybookConfig } */
+const config = {
+  stories: [
+    '../stories/**/*.stories.@(js|jsx|mjs|ts|tsx)',
+    // Include user stories from the project root, but only if we are NOT running in the package itself
+    ...(process.cwd() === resolve(__dirname, '..') ? [] : [
+      normalizePath(resolve(process.cwd(), 'stories/**/*.stories.@(js|jsx|mjs|ts|tsx)')),
+      normalizePath(resolve(process.cwd(), 'src/**/*.stories.@(js|jsx|mjs|ts|tsx)'))
+    ])
+  ],
+  addons: [
+    '@storybook/addon-links',
+    '@storybook/addon-essentials',
+    './addons/pds-configurator/register.js',
+    './addons/html-preview/register.js',
+    './addons/description/register.js'
+  ],
+  framework: {
+    name: '@storybook/web-components-vite',
+    options: {}
+  },
+  staticDirs: [
+    { from: join(pdsAssetsPath, 'pds'), to: 'pds' },
+    { from: pdsAssetsPath, to: 'assets' },
+    // Add user's public folder if it exists
+    ...(fs.existsSync(resolve(process.cwd(), 'public')) ? [{ from: resolve(process.cwd(), 'public'), to: '/' }] : [])
+  ],
+  core: {
+    builder: '@storybook/builder-vite'
+  },
+  viteFinal: async (config) => {
+    // Ensure Lit import alias is resolved
+    config.resolve.alias = {
+      ...config.resolve.alias,
+      '#pds/lit': 'lit',
+      '@pds-src': pdsSrcPath,
+    };
+
+    // Alias for relative paths to src (handles ../../../src in stories)
+    // This allows stories to work in both monorepo (where ../../../src is valid)
+    // and package (where it needs to be mapped to the local src folder)
+    // Note: We use a regex to catch varying depths of ../
+    config.resolve.alias['../../../src'] = pdsSrcPath;
+    config.resolve.alias['../../../../src'] = pdsSrcPath;
+    
+    // Also handle the case where the import is exactly 'D:\Code\pure\pure-ds\packages\src\js\common\ask.js'
+    // which seems to be happening in the error log:
+    // Cannot find module 'D:\Code\pure\pure-ds\packages\src\js\common\ask.js'
+    // This implies something is resolving ../../../src to packages/src instead of packages/pds-storybook/src or root src.
+    
+    // If we are in packages/pds-storybook, ../../../src goes to D:\Code\pure\pure-ds\src
+    // The error says: D:\Code\pure\pure-ds\packages\src\js\common\ask.js
+    // This means it went up one level too few?
+    // D:\Code\pure\pure-ds\packages\pds-storybook\stories\utils\PdsAsk.stories.js
+    // ../../../src -> D:\Code\pure\pure-ds\packages\src
+    // Ah, stories/utils is one level deeper!
+    // So it needs ../../../../src
+    
+    // The file PdsAsk.stories.js has: import ... from '../../../src/js/common/ask.js';
+    // It is in stories/utils/PdsAsk.stories.js
+    // So ../../../src resolves to:
+    // stories/utils -> .. -> stories
+    // stories -> .. -> pds-storybook
+    // pds-storybook -> .. -> packages
+    // So it resolves to packages/src.
+    
+    // The correct path from stories/utils/PdsAsk.stories.js to src/js/common/ask.js (in monorepo root) is:
+    // ../../../../src/js/common/ask.js
+    
+    // So the file PdsAsk.stories.js IS WRONG in the repo?
+    // The user said "The stories as they are were more than okay and ran without any problem."
+    // Maybe I misread the file location or the import.
+    
+    // Let's check the file content again.
+    // import { ask as askFallback } from '../../../src/js/common/ask.js';
+    
+    // If this worked before, then maybe PdsAsk.stories.js was in `stories/` not `stories/utils/`?
+    // Or maybe my understanding of the structure is wrong.
+    
+    // Wait, I see `stories/utils/PdsAsk.stories.js` in the file path.
+    // If I look at the file content I read earlier:
+    // import { ask as askFallback } from '../../../src/js/common/ask.js';
+    
+    // If I am in `packages/pds-storybook/stories/utils/PdsAsk.stories.js`
+    // .. -> stories/utils
+    // ../.. -> stories
+    // ../../.. -> pds-storybook
+    // So `../../../src` -> `packages/pds-storybook/src`.
+    
+    // Does `packages/pds-storybook/src` exist?
+    // Yes, I copied it there in package-build.js!
+    // But in the MONOREPO, `src` is at the root: `../../../../src`.
+    
+    // So if the user says "it worked before", maybe they were running it in a way where `src` was available at `packages/pds-storybook/src`?
+    // Or maybe `PdsAsk.stories.js` was indeed using `../../../../src` and I changed it to `../../../src`?
+    
+    // I changed it in step 10!
+    // "replace_string_in_file ... newString: ../../../src ... oldString: ../../../../src"
+    // I changed it to `../../../src`.
+    // And then I reverted it?
+    // In step 18 I changed it back to `../../../src`?
+    // "replace_string_in_file ... newString: ../../../src ... oldString: ../../../../src"
+    // Wait, I changed it FROM `../../../../src` TO `../../../src`.
+    
+    // The user said "I have undone all your changes in .stories files".
+    // So the file on disk SHOULD be `../../../../src` if that was the original state.
+    // But I read it in step 25 and it was `../../../src`.
+    // This means the user's "undo" might not have reverted my change to this specific file, or I misread the history.
+    
+    // If the file has `../../../src`, it points to `packages/pds-storybook/src`.
+    // In the monorepo, `packages/pds-storybook/src` DOES NOT EXIST (it is created by package-build).
+    // So `../../../src` is WRONG for the monorepo dev environment.
+    
+    // I need to fix this file to use `../../../../src` so it works in the monorepo.
+    // AND I need to ensure `package-build` or `main.js` handles it for the package.
+    
+    // BUT the user said "don't touch any stories".
+    // If the file currently has `../../../src` and it's broken, I MUST fix it to restore "committed" state.
+    // The error log says: `Cannot find module 'D:\Code\pure\pure-ds\packages\src\js\common\ask.js'`
+    // This confirms that `../../../src` resolves to `packages/src`.
+    // So it needs one more `..`.
+    
+    // I will change it back to `../../../../src`.
+    
+    config.resolve.alias['../../../../src'] = pdsSrcPath;
+    
+    // Try to resolve user's pds.config.js
+    const userConfigPath = resolve(process.cwd(), 'pds.config.js');
+    if (fs.existsSync(userConfigPath)) {
+        config.resolve.alias['@user/pds-config'] = userConfigPath;
+    } else {
+        // Fallback to a dummy module if user config doesn't exist
+        config.resolve.alias['@user/pds-config'] = 'data:text/javascript,export const config = {};';
+    }
+
+    // Set base path for production builds
+    if (config.mode === 'production') {
+      config.base = '/storybook/';
+    }
+    
+    return config;
+  }
+};
+
+export default config;

package/.storybook/preview-body.html

@@ -0,0 +1,48 @@
+<!-- Let PDS control backgrounds - remove Storybook's white background override -->
+<style>
+  /* Don't override background at all - let PDS utilities layer apply mesh backgrounds via body rule */
+  /* Only set text color to use PDS variable */
+  body.sb-show-main,
+  .sb-show-main {
+    color: var(--color-text-primary) !important;
+  }
+  
+  /* Ensure story container inherits PDS styles */
+  #storybook-root {
+    background: transparent;
+    color: inherit;
+  }
+</style>
+
+<script>
+  // Remove Storybook's injected background styles that override PDS
+  const observer = new MutationObserver(() => {
+    const styleEls = document.querySelectorAll('style');
+    styleEls.forEach(style => {
+      if (style.textContent.includes('.sb-show-main') && 
+          style.textContent.includes('background') && 
+          style.textContent.includes('#ffffff')) {
+        //console.log('🧹 Removing Storybook background override:', style.textContent.substring(0, 100));
+        style.remove();
+      }
+    });
+  });
+  
+  observer.observe(document.documentElement, {
+    childList: true,
+    subtree: true
+  });
+  
+  // Initial cleanup
+  setTimeout(() => {
+    const styleEls = document.querySelectorAll('style');
+    styleEls.forEach(style => {
+      if (style.textContent.includes('.sb-show-main') && 
+          style.textContent.includes('background') && 
+          style.textContent.includes('#ffffff')) {
+        console.log('🧹 Initial cleanup - removing:', style.textContent.substring(0, 100));
+        style.remove();
+      }
+    });
+  }, 100);
+</script>

package/.storybook/preview-head.html

@@ -0,0 +1,11 @@
+<!-- PDS runs in LIVE mode - styles are generated dynamically by Generator.applyStyles() -->
+
+<!-- Import map for pds-jsonform and other components that use #pds/lit -->
+<script type="importmap">
+{
+  "imports": {
+    "#pds/lit": "/assets/js/lit.js",
+    "#showdown": "https://cdn.jsdelivr.net/npm/showdown@2.1.0/dist/showdown.mjs"
+  }
+}
+</script>