Skip to content

Commit 6c395b0

Browse files
ExairnousExairnous
authored
Merge pull request #6563 from rebeckerspecialties/update-storybook
Update storybook
2 parents a60b2be + 45c9d41 commit 6c395b0

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

63 files changed

+23429
-25278
lines changed

‎.browserslistrc‎

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,12 @@
1-
last 2 major versions
2-
not <= 0.5%
3-
not dead
4-
# No WebRTC support (including datachannel
5-
not ios_saf < 11
6-
not safari < 11
1+
# Modern browsers - macOS 10.15 (Safari 15.6: 2012 MacBook compat) and iOS 14 (Safari 14.1: iPhone 6S, iPad Air 2 compat) minimum
2+
chrome >= 105 # Pico XR 4 device browser is 105, Meta Quest 1 is Chrome 112, HTC Vive (XRE|Focus Vision) is 121
3+
safari >= 14.1
4+
ios >= 14.5
5+
firefox >= 91 # Lowered to align with Safari 15 capabilities, bump to 115 (Wolvic on HTC) when possible
6+
edge >= 105 # last HoloLens 2 Chromium Edge build with working WebXR
7+
# Exclude legacy browsers
78
not ie >= 0
8-
not edge >= 0
99
not ie_mob >= 0
1010
not and_uc >= 0
1111
# No WebGL or WebRTC support
12-
not op_mini all
12+
not op_mini all

‎.gitignore‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -59,6 +59,11 @@ typings/
5959

6060
# Ignore dist folder with webpack build output
6161
dist/
62+
dist-types/
63+
64+
# local storybook files
65+
storybook-static/
66+
admin/storybook-static/
6267

6368
.DS_Store
6469

‎.storybook/main.js‎

Lines changed: 77 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
const path = require("path");
22
const fs = require("fs");
3+
const webpack = require("webpack");
34
const themesPath = path.resolve(__dirname, "..", "themes.json");
45
if (fs.existsSync(themesPath)) {
56
const appConfig = {};
@@ -10,8 +11,53 @@ if (fs.existsSync(themesPath)) {
1011
}
1112
module.exports = {
1213
stories: ["../src/react-components/**/*.stories.mdx", "../src/react-components/**/*.stories.js"],
13-
addons: ["@storybook/addon-links", "@storybook/addon-essentials"],
14+
addons: ["@storybook/addon-links", "@storybook/addon-docs"],
1415
webpackFinal: async config => {
16+
// Add explicit babel-loader rule for JS files with JSX at the beginning
17+
config.module.rules.unshift({
18+
test: /\.(js|jsx)$/,
19+
exclude: /node_modules/,
20+
use: {
21+
loader: "babel-loader",
22+
options: {
23+
presets: [
24+
["@babel/preset-env", { targets: "defaults" }],
25+
["@babel/preset-react", { runtime: "automatic" }]
26+
],
27+
plugins: [
28+
"formatjs",
29+
["@babel/plugin-proposal-private-property-in-object", { loose: true }],
30+
["@babel/plugin-proposal-private-methods", { loose: true }]
31+
]
32+
}
33+
}
34+
});
35+
36+
// Find and update the existing babel rule to handle JSX properly
37+
const jsRule = config.module.rules.find(
38+
rule => rule.test && rule.test.toString().includes("js") && !rule.test.toString().includes("node_modules")
39+
);
40+
41+
if (jsRule) {
42+
// Make sure it handles .js files with JSX
43+
jsRule.test = /\.(js|jsx|ts|tsx)$/;
44+
if (jsRule.use && Array.isArray(jsRule.use)) {
45+
const babelLoader = jsRule.use.find(
46+
loader => typeof loader === "object" && loader.loader && loader.loader.includes("babel")
47+
);
48+
if (babelLoader && babelLoader.options) {
49+
// Ensure React preset is configured for JSX
50+
babelLoader.options.presets = babelLoader.options.presets || [];
51+
const hasReactPreset = babelLoader.options.presets.some(preset =>
52+
Array.isArray(preset) ? preset[0].includes("react") : preset.includes("react")
53+
);
54+
if (!hasReactPreset) {
55+
babelLoader.options.presets.push(["@babel/preset-react", { runtime: "automatic" }]);
56+
}
57+
}
58+
}
59+
}
60+
1561
config.module.rules.push({
1662
test: /\.scss$/,
1763
use: [
@@ -23,7 +69,10 @@ module.exports = {
2369
localIdentName: "[name]__[local]__[hash:base64:5]",
2470
exportLocalsConvention: "camelCase",
2571
// TODO we ideally would be able to get rid of this but we have some global styles and many :local's that would become superfluous
26-
mode: "global"
72+
mode: "global",
73+
// Restore default export behavior for css-loader 7 compatibility
74+
namedExport: false,
75+
exportOnlyLocals: false
2776
}
2877
}
2978
},
@@ -69,10 +118,36 @@ module.exports = {
69118
use: ["file-loader"],
70119
include: path.resolve(__dirname, "../")
71120
});
121+
122+
// Add DefinePlugin to provide process.env variables
123+
config.plugins.push(
124+
new webpack.DefinePlugin({
125+
"process.env": {
126+
NODE_ENV: JSON.stringify("development"),
127+
RETICULUM_SERVER: JSON.stringify(""),
128+
THUMBNAIL_SERVER: JSON.stringify(""),
129+
CORS_PROXY_SERVER: JSON.stringify(""),
130+
NON_CORS_PROXY_DOMAINS: JSON.stringify(""),
131+
SENTRY_DSN: JSON.stringify(""),
132+
GA_TRACKING_ID: JSON.stringify(""),
133+
SHORTLINK_DOMAIN: JSON.stringify(""),
134+
BASE_ASSETS_PATH: JSON.stringify(""),
135+
UPLOADS_HOST: JSON.stringify(""),
136+
APP_CONFIG: JSON.stringify("")
137+
}
138+
})
139+
);
140+
72141
return config;
73142
},
74143
framework: {
75144
name: "@storybook/react-webpack5",
76145
options: {}
146+
},
147+
babel: async options => {
148+
return {
149+
...options,
150+
presets: [...options.presets, ["@babel/preset-react", { runtime: "automatic" }]]
151+
};
77152
}
78153
};

‎.storybook/preview.js‎

Lines changed: 4 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import React, { useEffect } from "react";
22
import { useAccessibleOutlineStyle } from "../src/react-components/input/useAccessibleOutlineStyle";
33
import { WrappedIntlProvider } from "../src/react-components/wrapped-intl-provider";
4-
import { MINIMAL_VIEWPORTS } from "@storybook/addon-viewport";
4+
import { MINIMAL_VIEWPORTS } from "storybook/viewport";
55
import { AVAILABLE_LOCALES } from "../src/assets/locales/locale_config";
66
import { setLocale } from "../src/utils/i18n";
77
import { themes } from "../src/utils/theme";
@@ -13,12 +13,9 @@ const Layout = ({ children, locale, theme }) => {
1313

1414
useAccessibleOutlineStyle();
1515

16-
useEffect(
17-
() => {
18-
setLocale(locale);
19-
},
20-
[locale]
21-
);
16+
useEffect(() => {
17+
setLocale(locale);
18+
}, [locale]);
2219

2320
return <WrappedIntlProvider>{children}</WrappedIntlProvider>;
2421
};

‎RetPageOriginDockerfile‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -23,8 +23,8 @@ copy admin/package-lock.json admin/
2323
run cd admin && npm ci --legacy-peer-deps && cd ..
2424
copy . .
2525
env BASE_ASSETS_PATH="{{rawhubs-base-assets-path}}"
26-
run npm run build 1> /dev/null
27-
run cd admin && npm run build 1> /dev/null && cp -R dist/* ../dist && cd ..
26+
run npm run build
27+
run cd admin && npm run build && cp -R dist/* ../dist && cd ..
2828
run mkdir -p dist/pages && mv dist/*.html dist/pages && mv dist/hub.service.js dist/pages && mv dist/schema.toml dist/pages
2929
run mkdir /hubs/rawhubs && mv dist/pages /hubs/rawhubs && mv dist/assets /hubs/rawhubs && mv dist/favicon.ico /hubs/rawhubs/pages
3030

‎admin/.storybook/main.js‎

Lines changed: 131 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,131 @@
1+
const path = require("path");
2+
const webpack = require("webpack");
3+
4+
module.exports = {
5+
stories: ["../src/react-components/**/*.stories.mdx", "../src/react-components/**/*.stories.js", "../stories/**/*.stories.js"],
6+
addons: ["@storybook/addon-links", "@storybook/addon-docs"],
7+
staticDirs: ["../src/assets", "./static"],
8+
webpackFinal: async config => {
9+
// Improve stack traces: use high-quality source maps in dev, full source maps in build
10+
config.devtool = config.mode === "development" ? "eval-source-map" : "source-map";
11+
12+
// Name chunks/modules for more readable stacks
13+
config.optimization = {
14+
...config.optimization,
15+
moduleIds: "named",
16+
chunkIds: "named"
17+
};
18+
19+
// Make sure source maps point to real files
20+
config.output = {
21+
...config.output,
22+
devtoolModuleFilenameTemplate: info => {
23+
// Prefer absolute paths for better mapping in Chrome/Playwright logs
24+
return `webpack:///${info.resourcePath}`;
25+
}
26+
};
27+
28+
// Add explicit babel-loader rule for JS/JSX/TS/TSX files at the beginning
29+
config.module.rules.unshift({
30+
test: /\.(js|jsx|ts|tsx)$/,
31+
exclude: /node_modules/,
32+
use: {
33+
loader: "babel-loader",
34+
options: {
35+
sourceMaps: true,
36+
presets: [
37+
["@babel/preset-env", { targets: "defaults" }],
38+
["@babel/preset-react", { runtime: "automatic" }],
39+
"@babel/preset-typescript"
40+
],
41+
plugins: [
42+
"formatjs",
43+
["@babel/plugin-proposal-private-property-in-object", { loose: true }],
44+
["@babel/plugin-proposal-private-methods", { loose: true }]
45+
]
46+
}
47+
}
48+
});
49+
50+
// Add SCSS support for admin styles
51+
config.module.rules.push({
52+
test: /\.scss$/,
53+
use: [
54+
"style-loader",
55+
{
56+
loader: "css-loader",
57+
options: {
58+
modules: false // Admin uses global styles
59+
}
60+
},
61+
"sass-loader"
62+
],
63+
include: [
64+
path.resolve(__dirname, "..", "src"),
65+
path.resolve(__dirname, "..", "..", "src") // Access main hubs styles if needed
66+
]
67+
});
68+
69+
// Handle SVG files
70+
const fileLoaderRule = config.module.rules.find(rule => rule.test && rule.test.test && rule.test.test(".svg"));
71+
if (fileLoaderRule) {
72+
fileLoaderRule.exclude = /\.svg$/;
73+
}
74+
75+
config.module.rules.push({
76+
test: /\.svg$/,
77+
use: ["@svgr/webpack", "url-loader"]
78+
});
79+
80+
// Handle other asset files - exclude PNG from file-loader to use static assets instead
81+
config.module.rules.push({
82+
test: /\.(jpg|jpeg|gif|ico)$/,
83+
use: ["file-loader"],
84+
include: path.resolve(__dirname, "../")
85+
});
86+
87+
// Add DefinePlugin to provide process.env variables for admin
88+
config.plugins.push(
89+
new webpack.DefinePlugin({
90+
"process.env": {
91+
NODE_ENV: JSON.stringify("development"),
92+
RETICULUM_SERVER: JSON.stringify(""),
93+
POSTGREST_SERVER: JSON.stringify(""),
94+
ITA_SERVER: JSON.stringify(""),
95+
BASE_ASSETS_PATH: JSON.stringify(""),
96+
STORYBOOK_APP_CONFIG: JSON.stringify("")
97+
}
98+
})
99+
);
100+
101+
// Resolve admin node_modules and parent node_modules
102+
config.resolve.modules = [
103+
path.resolve(__dirname, "..", "node_modules"),
104+
path.resolve(__dirname, "..", "..", "node_modules"),
105+
"node_modules"
106+
];
107+
108+
// Mock problematic modules for Storybook
109+
config.resolve.alias = {
110+
...config.resolve.alias,
111+
"../utils/configs": path.resolve(__dirname, "mocks", "configs.js"),
112+
"./configs": path.resolve(__dirname, "mocks", "configs.js"),
113+
"../utils/ita": path.resolve(__dirname, "mocks", "ita.js"),
114+
"./ita": path.resolve(__dirname, "mocks", "ita.js"),
115+
"../utils/feature_flags": path.resolve(__dirname, "mocks", "feature_flags.js"),
116+
"./feature_flags": path.resolve(__dirname, "mocks", "feature_flags.js")
117+
};
118+
119+
return config;
120+
},
121+
framework: {
122+
name: "@storybook/react-webpack5",
123+
options: {}
124+
},
125+
babel: async options => {
126+
return {
127+
...options,
128+
presets: [...options.presets, ["@babel/preset-react", { runtime: "automatic" }]]
129+
};
130+
}
131+
};

‎admin/.storybook/mocks/configs.js‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
// Mock configs for Storybook
2+
const mockConfigs = {
3+
CONFIGURABLE_SERVICES: "reticulum,spoke,hubs",
4+
CORS_PROXY_SERVER: "",
5+
DISABLE_BRANDING: "false",
6+
ITA_SERVER: "",
7+
POSTGREST_SERVER: "",
8+
RETICULUM_SERVER: "localhost:4000",
9+
TIER: "p0",
10+
IS_LOCAL_OR_CUSTOM_CLIENT: true
11+
};
12+
13+
export default mockConfigs;

‎admin/.storybook/mocks/feature_flags.js‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
// Mock feature flags for Storybook
2+
export function hasPaidFeature() {
3+
return true; // Enable all features in Storybook for testing
4+
}
5+
6+
export function isBrandingDisabled() {
7+
return false; // Show branding elements in Storybook
8+
}

‎admin/.storybook/mocks/ita.js‎

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
// Mock ita utils for Storybook
2+
const mockSchemaCategories = [
3+
"api_keys",
4+
"content",
5+
"email",
6+
"advanced",
7+
"translations",
8+
"features",
9+
"rooms",
10+
"images",
11+
"theme",
12+
"links",
13+
"auth"
14+
];
15+
16+
const mockServiceNames = ["reticulum", "spoke", "hubs"];
17+
18+
export const schemaByCategories = (schemas = {}) => schemas;
19+
export const schemaCategories = mockSchemaCategories;
20+
export const setAuthToken = (token) => {};
21+
export const getAdminInfo = () => Promise.resolve({ permissions: [] });
22+
export const getSchemas = () => Promise.resolve({});
23+
export const getServiceDisplayName = (service) => {
24+
const displayNames = {
25+
reticulum: "Reticulum",
26+
spoke: "Spoke",
27+
hubs: "Hubs"
28+
};
29+
return displayNames[service] || service;
30+
};

0 commit comments

Comments
 (0)