Fixed storyboo error in scaffolding- yarn approach

Author: del22123

packages/venia-concept/src/.storybook/config.js

@@ -0,0 +1,109 @@
+module.exports = {
+  stories: [
+    '../../node_modules/@magento/venia-ui/lib/**/__stories__/*.js',
+    '../**/__stories__/*.js'
+  ],
+  addons: [],
+  
+  // Fix for Manager webpack build (Storybook UI)
+  managerWebpack: async (config, options) => {
+    
+    // Add babel rule for react-draggable in manager build
+    config.module.rules.push({
+      test: /\.js$/,
+      include: /node_modules\/react-draggable/,
+      use: {
+        loader: 'babel-loader',
+        options: {
+          presets: [
+            ['@babel/preset-env', {
+              targets: {
+                browsers: ['last 2 versions', 'ie >= 11']
+              }
+            }]
+          ]
+        }
+      }
+    });
+    
+    return config;
+  },
+  
+  // Fix for Preview webpack build (Story iframe)
+  webpackFinal: async (config, { configType }) => {
+    // Import the existing webpack config logic
+    const path = require('path');
+    const {
+        graphQL: {
+            getPossibleTypes,
+            getStoreConfigData,
+            getAvailableStoresConfigData
+        },
+        Utilities: { loadEnvironment }
+    } = require('@magento/pwa-buildpack');
+    const baseWebpackConfig = require('../../webpack.config');
+    const { DefinePlugin, EnvironmentPlugin } = require('webpack');
+    const ReactRefreshWebpackPlugin = require('@pmmmwh/react-refresh-webpack-plugin');
+
+    const projectConfig = await loadEnvironment(
+        path.resolve(__dirname, '../..')
+    );
+
+    if (projectConfig.error) {
+        throw projectConfig.error;
+    }
+
+    const possibleTypes = await getPossibleTypes();
+    const storeConfigData = await getStoreConfigData();
+    const { availableStores } = await getAvailableStoresConfigData();
+    global.LOCALE = storeConfigData.locale.replace('_', '-');
+
+    const [webpackConfig] = await baseWebpackConfig(configType);
+
+    config.module = webpackConfig.module;
+    config.resolve = webpackConfig.resolve;
+
+    // Add babel rule for react-draggable in preview build too
+    config.module.rules.push({
+        test: /\.js$/,
+        include: /node_modules\/react-draggable/,
+        use: {
+            loader: 'babel-loader',
+            options: {
+                presets: [
+                    ['@babel/preset-env', {
+                        targets: {
+                            browsers: ['last 2 versions', 'ie >= 11']
+                        }
+                    }]
+                ]
+            }
+        }
+    });
+
+    // Make sure to provide any plugins that UI code may depend on.
+    config.plugins = [
+        ...config.plugins,
+        new DefinePlugin({
+            __fetchLocaleData__: async () => {
+                // no-op in storybook
+            },
+            POSSIBLE_TYPES: JSON.stringify(possibleTypes),
+            STORE_NAME: JSON.stringify('Storybook'),
+            STORE_VIEW_LOCALE: JSON.stringify(global.LOCALE),
+            STORE_VIEW_CODE: process.env.STORE_VIEW_CODE
+                ? JSON.stringify(process.env.STORE_VIEW_CODE)
+                : JSON.stringify(storeConfigData.code),
+            AVAILABLE_STORE_VIEWS: JSON.stringify(availableStores),
+            DEFAULT_LOCALE: JSON.stringify(global.LOCALE),
+            DEFAULT_COUNTRY_CODE: JSON.stringify(
+                process.env.DEFAULT_COUNTRY_CODE || 'US'
+            )
+        }),
+        new EnvironmentPlugin(projectConfig.env),
+        new ReactRefreshWebpackPlugin()
+    ];
+
+    return config;
+  },
+}; 

packages/venia-concept/src/.storybook/main.js

@@ -0,0 +1,143 @@
+import React from 'react';
+import { MemoryRouter } from 'react-router-dom';
+import Adapter from '@magento/venia-ui/lib/components/Adapter';
+import { Form } from 'informed';
+import store from '../store';
+import '@magento/venia-ui/lib/index.module.css';
+import 'tailwindcss/tailwind.css';
+
+// Mock browser APIs that components might expect
+if (typeof window !== 'undefined') {
+  // Ensure URLSearchParams is available with comprehensive methods
+  if (!window.URLSearchParams) {
+    window.URLSearchParams = class URLSearchParams {
+      constructor(search = '') {
+        this.params = new Map();
+        if (typeof search === 'string') {
+          if (search.startsWith('?')) search = search.slice(1);
+          if (search) {
+            search.split('&').forEach(param => {
+              const [key, value] = param.split('=');
+              if (key) this.params.set(decodeURIComponent(key), decodeURIComponent(value || ''));
+            });
+          }
+        }
+      }
+      get(key) { return this.params.get(key); }
+      set(key, value) { this.params.set(key, value); }
+      delete(key) { this.params.delete(key); }
+      has(key) { return this.params.has(key); }
+      append(key, value) { this.params.set(key, value); }
+      toString() {
+        const entries = Array.from(this.params.entries());
+        return entries.map(([k, v]) => `${encodeURIComponent(k)}=${encodeURIComponent(v)}`).join('&');
+      }
+      forEach(callback) { this.params.forEach(callback); }
+      keys() { return this.params.keys(); }
+      values() { return this.params.values(); }
+      entries() { return this.params.entries(); }
+    };
+  }
+  
+  // Create comprehensive URL object mock
+  if (!window.URL) {
+    window.URL = class URL {
+      constructor(url, base) {
+        this.href = url || 'http://localhost:9001/?page=1';
+        this.origin = 'http://localhost:9001';
+        this.protocol = 'http:';
+        this.host = 'localhost:9001';
+        this.hostname = 'localhost';
+        this.port = '9001';
+        this.pathname = '/';
+        this.search = '?page=1';
+        this.hash = '';
+      }
+      toString() { return this.href; }
+    };
+  }
+  
+  // Mock location.search and other properties that might be undefined
+  try {
+    if (!window.location.search || window.location.search === '') {
+      Object.defineProperty(window.location, 'search', {
+        value: '?page=1',
+        writable: true,
+        configurable: true
+      });
+    }
+    if (!window.location.pathname || window.location.pathname === '') {
+      Object.defineProperty(window.location, 'pathname', {
+        value: '/',
+        writable: true,
+        configurable: true  
+      });
+    }
+  } catch (e) {
+    // Some browsers don't allow modifying location
+    console.warn('Could not mock location properties:', e);
+  }
+  
+  // Global string replacement protection
+  const originalStringReplace = String.prototype.replace;
+  String.prototype.replace = function(...args) {
+    if (this == null || this === undefined) {
+      console.warn('Attempted to call replace on undefined/null value');
+      return '';
+    }
+    return originalStringReplace.apply(this, args);
+  };
+}
+
+const origin = process.env.MAGENTO_BACKEND_URL || 'https://master-7rqtwti-c5v7sxvquxwl4.eu-4.magentosite.cloud/';
+
+// Form wrapper for components that need form context
+const FormWrapper = ({ children }) => {
+  return (
+    <Form>
+      {children}
+    </Form>
+  );
+};
+
+// Router wrapper for components that need routing context
+const RouterWrapper = ({ children }) => {
+  // Provide initial location with comprehensive data that components might expect
+  const initialEntries = [
+    {
+      pathname: '/',
+      search: '?page=1',
+      hash: '',
+      state: null,
+      key: 'default'
+    }
+  ];
+  
+  return (
+    <MemoryRouter initialEntries={initialEntries}>
+      {children}
+    </MemoryRouter>
+  );
+};
+
+export const decorators = [
+  (Story) => (
+    <RouterWrapper>
+      <Adapter origin={origin} store={store}>
+        <FormWrapper>
+          <Story />
+        </FormWrapper>
+      </Adapter>
+    </RouterWrapper>
+  ),
+];
+
+export const parameters = {
+  actions: { argTypesRegex: "^on[A-Z].*" },
+  controls: {
+    matchers: {
+      color: /(background|color)$/i,
+      date: /Date$/,
+    },
+  },
+};