docs: Kzn 1058 how can we style storybook create a poc (#3347)

* docs(storybook config): style storybook config

* docs(storybook theme): add Kaizen logo svg

* docs(storybook theme): style subheadings with custom renderLabel prop

* docs(storybook theme): use png instead of svg

* docs(storybook theme): add type dec for theme object

* docs(tailwind theme): prettier fix

* docs(tailwind theme): specify /assets as a static dir

* docs: update root titles and brand image render method

* docs(storybook theme): use 13px and fontweight 600

* docs(storybook theme): change textMutedColor

* docs(storybook theme): add css escape hatch for storybook theme

* docs(storybook theme): remove unused files

* docs(storybook theme): style recently opened header

* docs(storybook theme): add comments explaining css hacks

---------

Co-authored-by: mcwinter07 <[email protected]>

package.json

@@ -8,7 +8,7 @@
     "node": ">=v16.13.1"
   },
   "scripts": {
-    "storybook": "start-storybook -p 6006 -c storybook",
+    "storybook": "IS_DEV=true start-storybook -p 6006 -c storybook",
     "storybook:build": "build-storybook -c storybook -o storybook/public --no-manager-cache",
     "eslint": "eslint . -c .eslintrc.js --ext .ts,.tsx",
     "prettier": "prettier --check '**/*'",

storybook/constants.ts

@@ -6,6 +6,17 @@ export const CATEGORIES = {
   deprecated: "Deprecated",
   tailwind: "Systems/Tailwind",
   systems: "Systems",
+  aio: "AIO",
+}
+
+export const CATEGORIES_ICON = {
+  [CATEGORIES.introduction]: "👋",
+  [CATEGORIES.components]: "⚙️",
+  [CATEGORIES.helpers]: "🤝",
+  [CATEGORIES.designTokens]: "🎨",
+  [CATEGORIES.deprecated]: "💣",
+  [CATEGORIES.systems]: "🤖",
+  [CATEGORIES.aio]: "📦",
 }
 
 export const SUB_CATEGORIES = {

storybook/main.ts

@@ -47,4 +47,5 @@ module.exports = {
     "storybook-addon-designs",
   ],
   presets: [path.resolve("./storybook/header-preset/preset")],
+  staticDirs: [{ from: "./assets", to: "/static/media" }],
 }

storybook/manager-head.html

@@ -0,0 +1,20 @@
+<link
+  rel="stylesheet"
+  href="./manager.css"
+/>
+
+
+<!--Styles to target and override storybook theme defaults-->
+<style>
+  body .sidebar-item:hover{background:#dfc9ea}
+  body .search-result-item:hover{background:#dfc9ea}
+  body .search-result-recentlyOpened{
+    text-transform: capitalize;
+    letter-spacing: normal;
+    font-size: 13px;
+    color: #554b5f;
+    margin-bottom: 8px;
+  }
+  body .search-result-back *,
+  body .search-result-clearHistory *{color:#2f2438}
+</style>

storybook/manager.tsx

@@ -0,0 +1,37 @@
+// This file is used by storybook to register installed addons.
+// See: https://storybook.js.org/docs/addons/using-addons/
+import React from "react"
+import { addons } from "@storybook/addons"
+import { defaultTheme } from "@kaizen/design-tokens"
+import { CATEGORIES_ICON } from "./constants"
+import KaizenTheme from "./theme"
+
+const colors = defaultTheme.color
+
+addons.setConfig({
+  theme: KaizenTheme,
+  analyticsGTM: {
+    gtmId: "GTM-KS4VWLT",
+  },
+  sidebar: {
+    renderLabel: item =>
+      item.type === "root" ? (
+        <span
+          style={{
+            color: colors.purple["800"],
+            textTransform: "capitalize",
+            fontSize: "13px",
+            letterSpacing: "normal",
+            fontWeight: 600,
+          }}
+        >
+          <span aria-hidden style={{ marginRight: defaultTheme.spacing[6] }}>
+            {CATEGORIES_ICON[item.name]}
+          </span>
+          {item.name}
+        </span>
+      ) : (
+        item.name
+      ),
+  },
+})

storybook/theme.ts

@@ -1,17 +1,38 @@
 /* eslint import/no-extraneous-dependencies: 0 */
-
-import { create } from "@storybook/theming/create"
+import { ThemeVars, create } from "@storybook/theming"
 import { defaultTheme } from "@kaizen/design-tokens"
+const logo = require("./assets/kaizen-badge.svg")
+const colors = defaultTheme.color
 
-export default create({
+// For styles that cannot be achieved through the folowing config, see
+// storybook/manager-head.html or storybook/manager.tsx
+const theme: ThemeVars = create({
   base: "light",
-  brandTitle: "🌱 Storybook",
-
+  colorSecondary: colors.purple["600"],
+  // UI
+  appBg: colors.purple["100"],
+  appContentBg: colors.white,
+  appBorderColor: colors.gray["300"],
+  appBorderRadius: 7,
   // Typography
   fontBase: '"Inter", "Noto Sans", Helvetica, Arial, sans-serif',
   fontCode: "monospace",
-
   // Text colors
-  // Doesn't seem to like CSS Variables wah
-  textColor: defaultTheme.color.purple["800"],
+  textColor: colors.purple["800"],
+  textInverseColor: colors.white,
+  textMutedColor: "rgba(85, 75, 95)",
+  // Toolbar default and active colors
+  barTextColor: colors.gray["600"],
+  barSelectedColor: colors.purple["600"],
+  barBg: colors.white,
+  // Form colors
+  inputBg: colors.white,
+  inputBorder: colors.gray["500"],
+  inputTextColor: colors.gray["600"],
+  inputBorderRadius: 20,
+  brandTitle: "Kaizen Storybook",
+  brandImage:
+    process.env.IS_DEV === "true" ? logo : "./static/media/kaizen-badge.svg",
 })
+
+export default theme