Files
SCM-Manager/scm-ui/ui-components/.storybook/preview.js
Rene Pfeuffer 141e45aa06 Simplify local storage access
The caching for local storage seems way over-engineered.
With this the context for the local storage is removed
and the local storage is accessed directly.

Pushed-by: k8s-git-ops<admin@cloudogu.com>
Pushed-by: Rene Pfeuffer<rene.pfeuffer@cloudogu.com>
Co-authored-by: René Pfeuffer<rene.pfeuffer@cloudogu.com>
2024-10-28 15:05:13 +01:00

91 lines
2.3 KiB
JavaScript

/*
* Copyright (c) 2020 - present Cloudogu GmbH
*
* This program is free software: you can redistribute it and/or modify it under
* the terms of the GNU Affero General Public License as published by the Free
* Software Foundation, version 3.
*
* This program is distributed in the hope that it will be useful, but WITHOUT
* ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS
* FOR A PARTICULAR PURPOSE. See the GNU Affero General Public License for more
* details.
*
* You should have received a copy of the GNU Affero General Public License
* along with this program. If not, see https://www.gnu.org/licenses/.
*/
import i18next from "i18next";
import { initReactI18next } from "react-i18next";
import { withI18next } from "storybook-addon-i18next";
import React, { useEffect } from "react";
import withApiProvider from "./withApiProvider";
import { withThemes } from "storybook-addon-themes/react";
let i18n = i18next;
// only use fetch backend for storybook
// and not for storyshots
if (!process.env.JEST_WORKER_ID) {
const Backend = require("i18next-fetch-backend");
i18n = i18n.use(Backend);
}
i18n.use(initReactI18next).init({
whitelist: ["en", "de", "es"],
lng: "en",
fallbackLng: "en",
interpolation: {
escapeValue: false,
},
react: {
useSuspense: false,
},
backend: {
loadPath: "/locales/{{lng}}/{{ns}}.json",
init: {
credentials: "same-origin",
},
},
});
export const decorators = [
withI18next({
i18n,
languages: {
en: "English",
de: "Deutsch",
es: "Spanisch",
},
}),
withApiProvider,
withThemes,
];
const Decorator = ({ children, themeName }) => {
useEffect(() => {
const link = document.querySelector("#ui-theme");
if (link && link["data-theme"] !== themeName) {
link.href = `/ui-theme-${themeName}.css`;
link["data-theme"] = themeName;
}
}, [themeName]);
return <>{children}</>;
};
export const parameters = {
actions: { argTypesRegex: "^on[A-Z].*" },
themes: {
Decorator,
clearable: false,
default: "light",
list: [
{ name: "light", color: "#fff" },
{ name: "highcontrast", color: "#050514" },
{ name: "dark", color: "#121212" },
],
},
options: {
storySort: (a, b) => (a[1].kind === b[1].kind ? 0 : a[1].id.localeCompare(b[1].id, undefined, { numeric: true })),
},
};