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 @@ + + + + + +