mozilla
/
hubs
зеркало из https://github.com/mozilla/hubs.git
1
0
Форкнуть 0
Код Задачи Пакеты Проекты Релизы Вики Активность

Fix Storybook

This commit is contained in:
netpro2k 2022-07-27 15:02:03 -07:00
Родитель ad443e4339
Коммит ede745eed3
6 изменённых файлов: 2014 добавлений и 392 удалений
Показать статистику Скачать Patch файл Скачать Diff файл Показать все файлы Свернуть все файлы

49
.eslintrc.js
Просмотреть файл

@ -13,51 +13,36 @@ module.exports = {
APP: true
},
plugins: ["prettier", "react", "react-hooks", "@calm/react-intl"],
// https://eslint.org/docs/rules/
rules: {
// https://github.com/prettier/eslint-plugin-prettier
"prettier/prettier": "error",
"prefer-const": "error",
"no-use-before-define": "error",
"no-var": "error",
"no-throw-literal": "error",
// Light console usage is useful but remove debug logs before merging to master.
"no-console": "off",
// https://www.npmjs.com/package/eslint-plugin-react-hooks
"react-hooks/rules-of-hooks": "error",
"react-hooks/exhaustive-deps": "warn",
// https://github.com/calm/eslint-plugin-react-intl
"@calm/react-intl/missing-formatted-message": [
"error",
{
noTrailingWhitespace: true,
ignoreLinks: true,
enforceLabels: true,
enforceImageAlts: true,
enforceInputProps: false
}
],
"@calm/react-intl/missing-attribute": [
"error",
{
noTrailingWhitespace: true,
noSpreadOperator: true,
requireDescription: false,
formatDefineMessages: true,
requireIdAsString: true,
requireDefaultMessage: true
}
],
"@calm/react-intl/missing-formatted-message": ["error", {
noTrailingWhitespace: true,
ignoreLinks: true,
enforceLabels: true,
enforceImageAlts: true,
enforceInputProps: false
}],
"@calm/react-intl/missing-attribute": ["error", {
noTrailingWhitespace: true,
noSpreadOperator: true,
requireDescription: false,
formatDefineMessages: true,
requireIdAsString: true,
requireDefaultMessage: true
}],
"@calm/react-intl/missing-values": "error"
},
extends: [
// https://github.com/prettier/eslint-config-prettier
"prettier",
"plugin:react/recommended",
"eslint:recommended"
]
};
extends: ["prettier", "plugin:react/recommended", "eslint:recommended", "plugin:storybook/recommended"]
};

46
.storybook/main.js
Просмотреть файл

@ -1,15 +1,14 @@
const path = require("path");
const fs = require("fs");
const themesPath = path.resolve(__dirname, "..", "themes.json");
if (fs.existsSync(themesPath)) {
const appConfig = {};
const themesString = fs.readFileSync(themesPath).toString();
appConfig.theme = {};
appConfig.theme.themes = JSON.parse(themesString);
process.env.STORYBOOK_APP_CONFIG = JSON.stringify(appConfig);
}
@ -24,17 +23,18 @@ module.exports = {
{
loader: "css-loader",
options: {
importLoaders: "1",
localIdentName: "[name]__[local]___[hash:base64:5]",
modules: true,
camelCase: true
modules: {
localIdentName: "[name]__[local]__[hash:base64:5]",
exportLocalsConvention: "camelCase",
// 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
mode: "global"
}
}
},
"sass-loader"
],
include: path.resolve(__dirname, "..", "src")
});
const fileLoaderRule = config.module.rules.find(rule => rule.test.test(".svg"));
fileLoaderRule.exclude = /\.svg$/;
config.module.rules.push({
@ -44,28 +44,36 @@ module.exports = {
loader: "@svgr/webpack",
options: {
titleProp: true,
replaceAttrValues: { "#000": "{props.color}" },
template: require("../src/react-components/icons/IconTemplate"),
replaceAttrValues: { "#000": "currentColor" },
exportType: "named",
svgo: true,
svgoConfig: {
plugins: {
removeViewBox: false,
mergePaths: false,
convertShapeToPath: false,
removeHiddenElems: false
}
plugins: [
{
name: "preset-default",
params: {
overrides: {
removeViewBox: false,
mergePaths: false,
convertShapeToPath: false,
removeHiddenElems: false
}
}
}
]
}
}
},
"url-loader"
}
]
});
config.module.rules.push({
test: /\.(glb|gltf)$/,
use: ["file-loader"],
include: path.resolve(__dirname, "../")
});
return config;
},
core: {
builder: "webpack5"
}
};

2198
package-lock.json сгенерированный
Просмотреть файл

Разница между файлами не показана из-за своего большого размера Загрузить разницу

3
package.json
Просмотреть файл

@ -160,6 +160,8 @@
"@storybook/addon-actions": "^6.5.9",
"@storybook/addon-essentials": "^6.5.9",
"@storybook/addon-links": "^6.5.9",
"@storybook/builder-webpack5": "^6.5.9",
"@storybook/manager-webpack5": "^6.5.9",
"@storybook/react": "^6.5.9",
"@storybook/storybook-deployer": "^2.8.12",
"@svgr/webpack": "^6.3.1",
@ -178,6 +180,7 @@
"eslint-plugin-prettier": "^4.2.1",
"eslint-plugin-react": "^7.30.1",
"eslint-plugin-react-hooks": "^4.6.0",
"eslint-plugin-storybook": "^0.6.1",
"esm": "^3.2.25",
"fast-plural-rules": "1.0.2",
"file-loader": "^6.2.0",

108
src/react-components/styles/theme.js поставляемый
Просмотреть файл

@ -17,9 +17,7 @@ if (!config) {
if (config?.theme?.error) {
console.error(
`Custom themes failed to load.\n${
config.theme.error
}\nIf you are an admin, reconfigure your themes in the admin panel.`
`Custom themes failed to load.\n${config.theme.error}\nIf you are an admin, reconfigure your themes in the admin panel.`
);
}
@ -37,33 +35,30 @@ function useDarkMode() {
[setDarkMode]
);
useEffect(
() => {
const darkmodeQuery = window.matchMedia("(prefers-color-scheme: dark)");
useEffect(() => {
const darkmodeQuery = window.matchMedia("(prefers-color-scheme: dark)");
setDarkMode(darkmodeQuery.matches);
setDarkMode(darkmodeQuery.matches);
// This is a workaround for old Safari.
// Prior to Safari 14, MediaQueryList is based on EventTarget, so you must use
// addListener() and removeListener() to observe media query lists.
// https://developer.mozilla.org/en-US/docs/Web/API/MediaQueryList/addListener
// We may remove this workaround when no one will use Safari 13 or before.
if (darkmodeQuery.addEventListener) {
darkmodeQuery.addEventListener("change", changeListener);
// This is a workaround for old Safari.
// Prior to Safari 14, MediaQueryList is based on EventTarget, so you must use
// addListener() and removeListener() to observe media query lists.
// https://developer.mozilla.org/en-US/docs/Web/API/MediaQueryList/addListener
// We may remove this workaround when no one will use Safari 13 or before.
if (darkmodeQuery.addEventListener) {
darkmodeQuery.addEventListener("change", changeListener);
} else {
darkmodeQuery.addListener(changeListener);
}
return () => {
if (darkmodeQuery.removeEventListener) {
darkmodeQuery.removeEventListener("change", changeListener);
} else {
darkmodeQuery.addListener(changeListener);
darkmodeQuery.removeListener(changeListener);
}
return () => {
if (darkmodeQuery.removeEventListener) {
darkmodeQuery.removeEventListener("change", changeListener);
} else {
darkmodeQuery.removeListener(changeListener);
}
};
},
[changeListener]
);
};
}, [changeListener]);
return darkMode;
}
@ -71,56 +66,53 @@ function useDarkMode() {
export function useTheme(themeId) {
const darkMode = useDarkMode();
useEffect(
() => {
// Themes can come from an external source. Ensure it is an array.
if (!Array.isArray(themes)) return;
useEffect(() => {
// Themes can come from an external source. Ensure it is an array.
if (!Array.isArray(themes)) return;
let theme;
let theme;
if (themeId) {
theme = themes.find(t => t.id === themeId);
}
if (themeId) {
theme = themes.find(t => t.id === themeId);
}
if (!theme && darkMode) {
theme = themes.find(t => t.darkModeDefault);
}
if (!theme && darkMode) {
theme = themes.find(t => t.darkModeDefault);
}
if (!theme) {
theme = themes.find(t => t.default);
}
if (!theme) {
theme = themes.find(t => t.default);
}
if (!theme) {
return;
}
if (!theme) {
return;
}
const variables = [];
const variables = [];
for (const key in theme.variables) {
if (!theme.variables.hasOwnProperty(key)) continue;
variables.push(`--${key}: ${theme.variables[key]};`);
}
for (const key in theme.variables) {
if (!theme.variables.hasOwnProperty(key)) continue;
variables.push(`--${key}: ${theme.variables[key]};`);
}
const styleTag = document.createElement("style");
const styleTag = document.createElement("style");
styleTag.innerHTML = `:root {
styleTag.innerHTML = `:root {
${variables.join("\n")}
}`;
document.head.appendChild(styleTag);
document.head.appendChild(styleTag);
return () => {
document.head.removeChild(styleTag);
};
},
[themeId, darkMode]
);
return () => {
document.head.removeChild(styleTag);
};
}, [themeId, darkMode]);
}
function getCurrentTheme() {
if (!Array.isArray(themes)) return;
const preferredThemeId = window.APP.store?.state?.preferences?.theme;
const preferredThemeId = window.APP?.store?.state?.preferences?.theme;
if (preferredThemeId) {
return themes.find(t => t.id === preferredThemeId);
} else {

2
src/utils/component-utils.js
Просмотреть файл

@ -29,7 +29,7 @@ export function getCurrentStreamer() {
}
export function getPlayerInfo(sessionId) {
const playerInfos = window.APP.componentRegistry["player-info"] || [];
const playerInfos = window.APP?.componentRegistry["player-info"] || [];
return playerInfos.find(info => {
return info.playerSessionId === sessionId;
});