diff --git a/.storybook/Containers.js b/.storybook/Containers.js
deleted file mode 100644
index 09082b3a..00000000
--- a/.storybook/Containers.js
+++ /dev/null
@@ -1,70 +0,0 @@
-
-import React from "react";
-import { DocsContainer as BaseContainer } from "@storybook/addon-docs";
-import { useDarkMode } from "storybook-dark-mode";
-import { darkTheme, lightTheme } from "./customTheme";
-import "./static/fonts/WorkSans/font.css";
-
-export function DocsContainer({ children, context }) {
- const isStorybookUiDark = useDarkMode();
-
- const theme = isStorybookUiDark ? darkTheme : lightTheme;
-
- const backgroundColor = theme.appBg;
-
- return (
- <>
-
- {
- const storyContext = context.storyById(id);
- return {
- ...storyContext,
- "parameters": {
- ...storyContext?.parameters,
- "docs": {
- ...storyContext?.parameters?.docs,
- "theme": isStorybookUiDark ? darkTheme : lightTheme
- }
- }
- };
- }
- }}
- >
- {children}
-
- >
- );
-}
-
-export function CanvasContainer({ children }) {
-
- return (
- <>
- {children}
- >
- );
-
-}
diff --git a/.storybook/customTheme.js b/.storybook/customTheme.js
deleted file mode 100644
index a8d42aa8..00000000
--- a/.storybook/customTheme.js
+++ /dev/null
@@ -1,35 +0,0 @@
-import { create } from "@storybook/theming";
-
-const brandImage = "logo.png";
-const brandTitle = "Keycloakify";
-const brandUrl = "https://github.com/keycloakify/keycloakify";
-const fontBase = '"Work Sans", sans-serif';
-const fontCode = "monospace";
-
-export const darkTheme = create({
- "base": "dark",
- "appBg": "#1E1E1E",
- "appContentBg": "#161616",
- "barBg": "#161616",
- "colorSecondary": "#8585F6",
- "textColor": "#FFFFFF",
- brandImage,
- brandTitle,
- brandUrl,
- fontBase,
- fontCode
-});
-
-export const lightTheme = create({
- "base": "light",
- "appBg": "#F6F6F6",
- "appContentBg": "#FFFFFF",
- "barBg": "#FFFFFF",
- "colorSecondary": "#000091",
- "textColor": "#212121",
- brandImage,
- brandTitle,
- brandUrl,
- fontBase,
- fontCode
-});
\ No newline at end of file
diff --git a/.storybook/customTheme.ts b/.storybook/customTheme.ts
new file mode 100644
index 00000000..ed82bc37
--- /dev/null
+++ b/.storybook/customTheme.ts
@@ -0,0 +1,33 @@
+const brandImage = "logo.png";
+const brandTitle = "Keycloakify";
+const brandUrl = "https://github.com/keycloakify/keycloakify";
+const fontBase = '"Work Sans", sans-serif';
+const fontCode = "monospace";
+
+export const darkTheme = {
+ base: "dark",
+ appBg: "#1E1E1E",
+ appContentBg: "#161616",
+ barBg: "#161616",
+ colorSecondary: "#8585F6",
+ textColor: "#FFFFFF",
+ brandImage,
+ brandTitle,
+ brandUrl,
+ fontBase,
+ fontCode
+};
+
+export const lightTheme: typeof darkTheme = {
+ base: "light",
+ appBg: "#F6F6F6",
+ appContentBg: "#FFFFFF",
+ barBg: "#FFFFFF",
+ colorSecondary: "#000091",
+ textColor: "#212121",
+ brandImage,
+ brandTitle,
+ brandUrl,
+ fontBase,
+ fontCode
+};
diff --git a/.storybook/main.js b/.storybook/main.js
index 79e7d703..876e6396 100644
--- a/.storybook/main.js
+++ b/.storybook/main.js
@@ -1,15 +1,13 @@
module.exports = {
- "stories": [
- "../stories/**/*.stories.@(ts|tsx|mdx)"
+ stories: [
+ "../stories/**/*.stories.tsx"
],
- "addons": [
- "@storybook/addon-links",
- "@storybook/addon-essentials",
+ addons: [
"storybook-dark-mode",
"@storybook/addon-a11y"
],
- "core": {
- "builder": "webpack5"
+ core: {
+ builder: "webpack5"
},
- "staticDirs": ["./static"]
+ staticDirs: ["./static"]
};
diff --git a/.storybook/manager.js b/.storybook/manager.js
index 9b9d08e5..eea25121 100644
--- a/.storybook/manager.js
+++ b/.storybook/manager.js
@@ -1,6 +1,6 @@
import { addons } from '@storybook/addons';
addons.setConfig({
- "selectedPanel": 'storybook/a11y/panel',
- "showPanel": false,
+ selectedPanel: 'storybook/a11y/panel',
+ showPanel: false
});
diff --git a/.storybook/preview-head.html b/.storybook/preview-head.html
index 443a62d9..4b8fb699 100644
--- a/.storybook/preview-head.html
+++ b/.storybook/preview-head.html
@@ -1,3 +1,9 @@
+
+
+
+
+
+