Rework the storybook
This commit is contained in:
Joseph Garrone
@ -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 (
|
||||
<>
|
||||
<style>{`
|
||||
body {
|
||||
padding: 0 !important;
|
||||
background-color: ${backgroundColor};
|
||||
}
|
||||
|
||||
.docs-story {
|
||||
background-color: ${backgroundColor};
|
||||
}
|
||||
[id^=story--] .container {
|
||||
border: 1px dashed #e8e8e8;
|
||||
}
|
||||
|
||||
.docblock-argstable-head th:nth-child(3), .docblock-argstable-body tr > td:nth-child(3) {
|
||||
visibility: collapse;
|
||||
}
|
||||
|
||||
.docblock-argstable-head th:nth-child(3), .docblock-argstable-body tr > td:nth-child(2) p {
|
||||
font-size: 13px;
|
||||
}
|
||||
`}</style>
|
||||
<BaseContainer
|
||||
context={{
|
||||
...context,
|
||||
"storyById": id => {
|
||||
const storyContext = context.storyById(id);
|
||||
return {
|
||||
...storyContext,
|
||||
"parameters": {
|
||||
...storyContext?.parameters,
|
||||
"docs": {
|
||||
...storyContext?.parameters?.docs,
|
||||
"theme": isStorybookUiDark ? darkTheme : lightTheme
|
||||
}
|
||||
}
|
||||
};
|
||||
}
|
||||
}}
|
||||
>
|
||||
{children}
|
||||
</BaseContainer>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
export function CanvasContainer({ children }) {
|
||||
|
||||
return (
|
||||
<>
|
||||
{children}
|
||||
</>
|
||||
);
|
||||
|
||||
}
|
||||
@ -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
|
||||
});
|
||||
33
.storybook/customTheme.ts
Normal file
33
.storybook/customTheme.ts
Normal file
@ -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
|
||||
};
|
||||
@ -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"]
|
||||
};
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
import { addons } from '@storybook/addons';
|
||||
|
||||
addons.setConfig({
|
||||
"selectedPanel": 'storybook/a11y/panel',
|
||||
"showPanel": false,
|
||||
selectedPanel: 'storybook/a11y/panel',
|
||||
showPanel: false
|
||||
});
|
||||
|
||||
@ -1,3 +1,9 @@
|
||||
<link rel="preload" href="/fonts/WorkSans/worksans-bold-webfont.woff2" as="font" crossorigin="anonymous">
|
||||
<link rel="preload" href="/fonts/WorkSans/worksans-medium-webfont.woff2" as="font" crossorigin="anonymous">
|
||||
<link rel="preload" href="/fonts/WorkSans/worksans-regular-webfont.woff2" as="font" crossorigin="anonymous">
|
||||
<link rel="preload" href="/fonts/WorkSans/worksans-semibold-webfont.woff2" as="font" crossorigin="anonymous">
|
||||
<link rel="stylesheet" type="text/css" href="/fonts/WorkSans/font.css">
|
||||
|
||||
<style>
|
||||
body.sb-show-main.sb-main-padded {
|
||||
padding: 0;
|
||||
|
||||
@ -1,116 +1,105 @@
|
||||
import { darkTheme, lightTheme } from "./customTheme";
|
||||
import { DocsContainer, CanvasContainer } from "./Containers";
|
||||
import { create as createTheme } from "@storybook/theming";
|
||||
|
||||
export const parameters = {
|
||||
"actions": { "argTypesRegex": "^on[A-Z].*" },
|
||||
"controls": {
|
||||
"matchers": {
|
||||
"color": /(background|color)$/i,
|
||||
"date": /Date$/,
|
||||
actions: { argTypesRegex: "^on[A-Z].*" },
|
||||
controls: {
|
||||
matchers: {
|
||||
color: /(background|color)$/i,
|
||||
date: /Date$/,
|
||||
},
|
||||
},
|
||||
"backgrounds": { "disable": true },
|
||||
"darkMode": {
|
||||
"light": lightTheme,
|
||||
"dark": darkTheme,
|
||||
backgrounds: { disable: true },
|
||||
darkMode: {
|
||||
light: createTheme(lightTheme),
|
||||
dark: createTheme(darkTheme),
|
||||
},
|
||||
"docs": {
|
||||
"container": DocsContainer
|
||||
controls: {
|
||||
disable: true,
|
||||
},
|
||||
"controls": {
|
||||
"disable": true,
|
||||
actions: {
|
||||
disable: true
|
||||
},
|
||||
"actions": {
|
||||
"disable": true
|
||||
},
|
||||
"viewport": {
|
||||
"viewports": {
|
||||
viewport: {
|
||||
viewports: {
|
||||
"1440p": {
|
||||
"name": "1440p",
|
||||
"styles": {
|
||||
"width": "2560px",
|
||||
"height": "1440px",
|
||||
name: "1440p",
|
||||
styles: {
|
||||
width: "2560px",
|
||||
height: "1440px",
|
||||
},
|
||||
},
|
||||
"fullHD": {
|
||||
"name": "Full HD",
|
||||
"styles": {
|
||||
"width": "1920px",
|
||||
"height": "1080px",
|
||||
fullHD: {
|
||||
name: "Full HD",
|
||||
styles: {
|
||||
width: "1920px",
|
||||
height: "1080px",
|
||||
},
|
||||
},
|
||||
"macBookProBig": {
|
||||
"name": "MacBook Pro Big",
|
||||
"styles": {
|
||||
"width": "1024px",
|
||||
"height": "640px",
|
||||
macBookProBig: {
|
||||
name: "MacBook Pro Big",
|
||||
styles: {
|
||||
width: "1024px",
|
||||
height: "640px",
|
||||
},
|
||||
},
|
||||
"macBookProMedium": {
|
||||
"name": "MacBook Pro Medium",
|
||||
"styles": {
|
||||
"width": "1440px",
|
||||
"height": "900px",
|
||||
macBookProMedium: {
|
||||
name: "MacBook Pro Medium",
|
||||
styles: {
|
||||
width: "1440px",
|
||||
height: "900px",
|
||||
},
|
||||
},
|
||||
"macBookProSmall": {
|
||||
"name": "MacBook Pro Small",
|
||||
"styles": {
|
||||
"width": "1680px",
|
||||
"height": "1050px",
|
||||
macBookProSmall: {
|
||||
name: "MacBook Pro Small",
|
||||
styles: {
|
||||
width: "1680px",
|
||||
height: "1050px",
|
||||
},
|
||||
},
|
||||
"pcAgent": {
|
||||
"name": "PC Agent",
|
||||
"styles": {
|
||||
"width": "960px",
|
||||
"height": "540px",
|
||||
pcAgent: {
|
||||
name: "PC Agent",
|
||||
styles: {
|
||||
width: "960px",
|
||||
height: "540px",
|
||||
},
|
||||
},
|
||||
"iphone12Pro": {
|
||||
"name": "Iphone 12 pro",
|
||||
"styles": {
|
||||
"width": "390px",
|
||||
"height": "844px",
|
||||
iphone12Pro: {
|
||||
name: "Iphone 12 pro",
|
||||
styles: {
|
||||
width: "390px",
|
||||
height: "844px",
|
||||
},
|
||||
},
|
||||
"iphone5se": {
|
||||
"name": "Iphone 5/SE",
|
||||
"styles": {
|
||||
"width": "320px",
|
||||
"height": "568px",
|
||||
iphone5se: {
|
||||
name: "Iphone 5/SE",
|
||||
styles: {
|
||||
width: "320px",
|
||||
height: "568px",
|
||||
},
|
||||
},
|
||||
"ipadPro": {
|
||||
"name": "Ipad pro",
|
||||
"styles": {
|
||||
"width": "1240px",
|
||||
"height": "1366px",
|
||||
ipadPro: {
|
||||
name: "Ipad pro",
|
||||
styles: {
|
||||
width: "1240px",
|
||||
height: "1366px",
|
||||
},
|
||||
},
|
||||
"Galaxy s9+": {
|
||||
"name": "Galaxy S9+",
|
||||
"styles": {
|
||||
"width": "320px",
|
||||
"height": "658px",
|
||||
name: "Galaxy S9+",
|
||||
styles: {
|
||||
width: "320px",
|
||||
height: "658px",
|
||||
},
|
||||
}
|
||||
},
|
||||
},
|
||||
"options": {
|
||||
"storySort": (a, b) =>
|
||||
options: {
|
||||
storySort: (a, b) =>
|
||||
getHardCodedWeight(b[1].kind) - getHardCodedWeight(a[1].kind),
|
||||
},
|
||||
};
|
||||
|
||||
export const decorators = [
|
||||
(Story) => (
|
||||
<CanvasContainer>
|
||||
<Story />
|
||||
</CanvasContainer>
|
||||
),
|
||||
];
|
||||
|
||||
const { getHardCodedWeight } = (() => {
|
||||
|
||||
const orderedPagesPrefix = [
|
||||
|
||||
Reference in New Issue
Block a user