Skip to content

Commit f6af986

Browse files
del22123del22123
committed
Fixed storyboo error in scaffolding- yarn approach
1 parent 8bdb909 commit f6af986

File tree

4 files changed

+252
-91
lines changed

4 files changed

+252
-91
lines changed

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

Lines changed: 0 additions & 30 deletions
This file was deleted.

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

Lines changed: 109 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,109 @@
1+
module.exports = {
2+
stories: [
3+
'../../node_modules/@magento/venia-ui/lib/**/__stories__/*.js',
4+
'../**/__stories__/*.js'
5+
],
6+
addons: [],
7+
8+
// Fix for Manager webpack build (Storybook UI)
9+
managerWebpack: async (config, options) => {
10+
11+
// Add babel rule for react-draggable in manager build
12+
config.module.rules.push({
13+
test: /\.js$/,
14+
include: /node_modules\/react-draggable/,
15+
use: {
16+
loader: 'babel-loader',
17+
options: {
18+
presets: [
19+
['@babel/preset-env', {
20+
targets: {
21+
browsers: ['last 2 versions', 'ie >= 11']
22+
}
23+
}]
24+
]
25+
}
26+
}
27+
});
28+
29+
return config;
30+
},
31+
32+
// Fix for Preview webpack build (Story iframe)
33+
webpackFinal: async (config, { configType }) => {
34+
// Import the existing webpack config logic
35+
const path = require('path');
36+
const {
37+
graphQL: {
38+
getPossibleTypes,
39+
getStoreConfigData,
40+
getAvailableStoresConfigData
41+
},
42+
Utilities: { loadEnvironment }
43+
} = require('@magento/pwa-buildpack');
44+
const baseWebpackConfig = require('../../webpack.config');
45+
const { DefinePlugin, EnvironmentPlugin } = require('webpack');
46+
const ReactRefreshWebpackPlugin = require('@pmmmwh/react-refresh-webpack-plugin');
47+
48+
const projectConfig = await loadEnvironment(
49+
path.resolve(__dirname, '../..')
50+
);
51+
52+
if (projectConfig.error) {
53+
throw projectConfig.error;
54+
}
55+
56+
const possibleTypes = await getPossibleTypes();
57+
const storeConfigData = await getStoreConfigData();
58+
const { availableStores } = await getAvailableStoresConfigData();
59+
global.LOCALE = storeConfigData.locale.replace('_', '-');
60+
61+
const [webpackConfig] = await baseWebpackConfig(configType);
62+
63+
config.module = webpackConfig.module;
64+
config.resolve = webpackConfig.resolve;
65+
66+
// Add babel rule for react-draggable in preview build too
67+
config.module.rules.push({
68+
test: /\.js$/,
69+
include: /node_modules\/react-draggable/,
70+
use: {
71+
loader: 'babel-loader',
72+
options: {
73+
presets: [
74+
['@babel/preset-env', {
75+
targets: {
76+
browsers: ['last 2 versions', 'ie >= 11']
77+
}
78+
}]
79+
]
80+
}
81+
}
82+
});
83+
84+
// Make sure to provide any plugins that UI code may depend on.
85+
config.plugins = [
86+
...config.plugins,
87+
new DefinePlugin({
88+
__fetchLocaleData__: async () => {
89+
// no-op in storybook
90+
},
91+
POSSIBLE_TYPES: JSON.stringify(possibleTypes),
92+
STORE_NAME: JSON.stringify('Storybook'),
93+
STORE_VIEW_LOCALE: JSON.stringify(global.LOCALE),
94+
STORE_VIEW_CODE: process.env.STORE_VIEW_CODE
95+
? JSON.stringify(process.env.STORE_VIEW_CODE)
96+
: JSON.stringify(storeConfigData.code),
97+
AVAILABLE_STORE_VIEWS: JSON.stringify(availableStores),
98+
DEFAULT_LOCALE: JSON.stringify(global.LOCALE),
99+
DEFAULT_COUNTRY_CODE: JSON.stringify(
100+
process.env.DEFAULT_COUNTRY_CODE || 'US'
101+
)
102+
}),
103+
new EnvironmentPlugin(projectConfig.env),
104+
new ReactRefreshWebpackPlugin()
105+
];
106+
107+
return config;
108+
},
109+
};

‎packages/venia-concept/src/.storybook/preview.js

Lines changed: 143 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,143 @@
1+
import React from 'react';
2+
import { MemoryRouter } from 'react-router-dom';
3+
import Adapter from '@magento/venia-ui/lib/components/Adapter';
4+
import { Form } from 'informed';
5+
import store from '../store';
6+
import '@magento/venia-ui/lib/index.module.css';
7+
import 'tailwindcss/tailwind.css';
8+
9+
// Mock browser APIs that components might expect
10+
if (typeof window !== 'undefined') {
11+
// Ensure URLSearchParams is available with comprehensive methods
12+
if (!window.URLSearchParams) {
13+
window.URLSearchParams = class URLSearchParams {
14+
constructor(search = '') {
15+
this.params = new Map();
16+
if (typeof search === 'string') {
17+
if (search.startsWith('?')) search = search.slice(1);
18+
if (search) {
19+
search.split('&').forEach(param => {
20+
const [key, value] = param.split('=');
21+
if (key) this.params.set(decodeURIComponent(key), decodeURIComponent(value || ''));
22+
});
23+
}
24+
}
25+
}
26+
get(key) { return this.params.get(key); }
27+
set(key, value) { this.params.set(key, value); }
28+
delete(key) { this.params.delete(key); }
29+
has(key) { return this.params.has(key); }
30+
append(key, value) { this.params.set(key, value); }
31+
toString() {
32+
const entries = Array.from(this.params.entries());
33+
return entries.map(([k, v]) => `${encodeURIComponent(k)}=${encodeURIComponent(v)}`).join('&');
34+
}
35+
forEach(callback) { this.params.forEach(callback); }
36+
keys() { return this.params.keys(); }
37+
values() { return this.params.values(); }
38+
entries() { return this.params.entries(); }
39+
};
40+
}
41+
42+
// Create comprehensive URL object mock
43+
if (!window.URL) {
44+
window.URL = class URL {
45+
constructor(url, base) {
46+
this.href = url || 'http://localhost:9001/?page=1';
47+
this.origin = 'http://localhost:9001';
48+
this.protocol = 'http:';
49+
this.host = 'localhost:9001';
50+
this.hostname = 'localhost';
51+
this.port = '9001';
52+
this.pathname = '/';
53+
this.search = '?page=1';
54+
this.hash = '';
55+
}
56+
toString() { return this.href; }
57+
};
58+
}
59+
60+
// Mock location.search and other properties that might be undefined
61+
try {
62+
if (!window.location.search || window.location.search === '') {
63+
Object.defineProperty(window.location, 'search', {
64+
value: '?page=1',
65+
writable: true,
66+
configurable: true
67+
});
68+
}
69+
if (!window.location.pathname || window.location.pathname === '') {
70+
Object.defineProperty(window.location, 'pathname', {
71+
value: '/',
72+
writable: true,
73+
configurable: true
74+
});
75+
}
76+
} catch (e) {
77+
// Some browsers don't allow modifying location
78+
console.warn('Could not mock location properties:', e);
79+
}
80+
81+
// Global string replacement protection
82+
const originalStringReplace = String.prototype.replace;
83+
String.prototype.replace = function(...args) {
84+
if (this == null || this === undefined) {
85+
console.warn('Attempted to call replace on undefined/null value');
86+
return '';
87+
}
88+
return originalStringReplace.apply(this, args);
89+
};
90+
}
91+
92+
const origin = process.env.MAGENTO_BACKEND_URL || 'https://master-7rqtwti-c5v7sxvquxwl4.eu-4.magentosite.cloud/';
93+
94+
// Form wrapper for components that need form context
95+
const FormWrapper = ({ children }) => {
96+
return (
97+
<Form>
98+
{children}
99+
</Form>
100+
);
101+
};
102+
103+
// Router wrapper for components that need routing context
104+
const RouterWrapper = ({ children }) => {
105+
// Provide initial location with comprehensive data that components might expect
106+
const initialEntries = [
107+
{
108+
pathname: '/',
109+
search: '?page=1',
110+
hash: '',
111+
state: null,
112+
key: 'default'
113+
}
114+
];
115+
116+
return (
117+
<MemoryRouter initialEntries={initialEntries}>
118+
{children}
119+
</MemoryRouter>
120+
);
121+
};
122+
123+
export const decorators = [
124+
(Story) => (
125+
<RouterWrapper>
126+
<Adapter origin={origin} store={store}>
127+
<FormWrapper>
128+
<Story />
129+
</FormWrapper>
130+
</Adapter>
131+
</RouterWrapper>
132+
),
133+
];
134+
135+
export const parameters = {
136+
actions: { argTypesRegex: "^on[A-Z].*" },
137+
controls: {
138+
matchers: {
139+
color: /(background|color)$/i,
140+
date: /Date$/,
141+
},
142+
},
143+
};

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

Lines changed: 0 additions & 61 deletions
This file was deleted.

0 commit comments

Comments
 (0)