add storybook with typescript

.gitignore

@@ -4,4 +4,5 @@ public
 .DS_Store
 static/data/
 !static/data/.gitkeep
-src/styles/fonts.css
+src/styles/fonts.css
+*storybook.log

.storybook/fonts.css

@@ -0,0 +1,20 @@
+
+@font-face {
+  font-family: "Satoshi-Variable";
+  src: url("../static/fonts/Satoshi-Variable.woff2") format("woff2"),
+    url("../static/fonts/Satoshi-Variable.woff") format("woff"),
+    url("../static/fonts/Satoshi-Variable.ttf") format("truetype");
+  font-weight: 300 900;
+  font-display: swap;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: "Satoshi-VariableItalic";
+  src: url("../static/fonts/Satoshi-VariableItalic.woff2") format("woff2"),
+    url("../static/fonts/Satoshi-VariableItalic.woff") format("woff"),
+    url("../static/fonts/Satoshi-VariableItalic.ttf") format("truetype");
+  font-weight: 300 900;
+  font-display: swap;
+  font-style: italic;
+}

.storybook/main.ts

@@ -0,0 +1,35 @@
+import type { StorybookConfig } from "@storybook/react-webpack5"
+
+const config: StorybookConfig = {
+  stories: ["../src/**/*.stories.@(js|jsx|mjs|ts|tsx)"],
+  addons: [
+    "@storybook/addon-webpack5-compiler-swc",
+    "@storybook/addon-links",
+    "@storybook/addon-essentials",
+    "@chromatic-com/storybook",
+    "@storybook/addon-interactions",
+  ],
+  framework: {
+    name: "@storybook/react-webpack5",
+    options: {},
+  },
+  staticDirs: ["../static"],
+  core: {
+    builder: "webpack5",
+  },
+  webpackFinal: async (config) => {
+    // Transpile Gatsby module because Gatsby includes un-transpiled ES6 code.
+    config.module.rules[0].exclude = [
+      /node_modules\/(?!(gatsby|gatsby-script)\/)/,
+    ]
+    // Remove core-js to prevent issues with Storybook
+    config.module.rules[0].exclude = [/core-js/]
+    // Use babel-plugin-remove-graphql-queries to remove static queries from components when rendering in storybook
+    // config.module.rules[0].use[0].options.plugins.push(
+    //   require.resolve("babel-plugin-remove-graphql-queries"),
+    // )
+    config.resolve.mainFields = ["browser", "module", "main"]
+    return config
+  },
+}
+export default config

.storybook/preview-head.html

@@ -0,0 +1,7 @@
+<link
+  rel="preload"
+  href="/fonts/Satoshi-Variable.woff2"
+  as="font"
+  type="font/woff2"
+  crossorigin="anonymous"
+/>

.storybook/preview.ts

@@ -0,0 +1,18 @@
+import type { Preview } from "@storybook/react"
+
+import "./fonts.css"
+import "bootstrap/dist/css/bootstrap.min.css"
+import "../src/styles/style.css"
+
+const preview: Preview = {
+  parameters: {
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/i,
+      },
+    },
+  },
+}
+
+export default preview

createfontscss.js

@@ -1,5 +1,6 @@
 const fs = require("fs")
 const FontsCssFilePath = "./src/styles/fonts.css"
+const StoryBookFontsCssFilePath = "./.storybook/fonts.css"
 
 let basepath = process.env.GATSBY_PATH_PREFIX || ""
 
@@ -12,7 +13,7 @@ console.log("GATSBY_PATH_PREFIX", process.env.GATSBY_PATH_PREFIX)
 console.log("fonts.css path:", FontsCssFilePath)
 console.log("basepath:", basepath)
 
-const fonts = `
+const fonts = (basepath) => `
 @font-face {
   font-family: "Satoshi-Variable";
   src: url("${basepath}/fonts/Satoshi-Variable.woff2") format("woff2"),
@@ -33,6 +34,9 @@ const fonts = `
   font-style: italic;
 }
 `
-console.log("fonts.css expected contents:", fonts)
-fs.writeFileSync(FontsCssFilePath, fonts)
+console.log("fonts.css expected contents:", fonts(basepath))
+fs.writeFileSync(FontsCssFilePath, fonts(basepath))
 console.log("fonts.css updated.")
+
+fs.writeFileSync(StoryBookFontsCssFilePath, fonts("../static"))
+console.log(`${StoryBookFontsCssFilePath} updated.`)

package.json

@@ -13,7 +13,9 @@
     "start": "yarn run createfontscss && gatsby develop",
     "build": "yarn run createfontscss && gatsby build --prefix-paths",
     "serve": "yarn run createfontscss && gatsby serve --prefix-paths",
-    "clean": "gatsby clean"
+    "clean": "gatsby clean",
+    "storybook": "yarn run createfontscss && storybook dev -p 6006",
+    "build-storybook": "yarn run createfontscss && storybook build"
   },
   "dependencies": {
     "@codemirror/lang-python": "^6.1.4",
@@ -46,8 +48,19 @@
     "zustand": "^4.5.2"
   },
   "devDependencies": {
+    "@chromatic-com/storybook": "^1.6.1",
+    "@storybook/addon-essentials": "^8.2.9",
+    "@storybook/addon-interactions": "^8.2.9",
+    "@storybook/addon-links": "^8.2.9",
+    "@storybook/addon-webpack5-compiler-swc": "^1.0.5",
+    "@storybook/blocks": "^8.2.9",
+    "@storybook/react": "^8.2.9",
+    "@storybook/react-webpack5": "^8.2.9",
+    "@storybook/test": "^8.2.9",
     "cors": "^2.8.5",
     "express": "^4.19.2",
-    "http-proxy-middleware": "^3.0.0"
+    "http-proxy-middleware": "^3.0.0",
+    "prop-types": "^15.8.1",
+    "storybook": "^8.2.9"
   }
 }

src/components/UserArea.js → src/components/UserArea.tsx

@@ -5,23 +5,19 @@ import { Button } from "react-bootstrap"
 import { ModalLoginView, useBrowserStore, usePersistentStore } from "../store"
 import UserCard from "./UserCard"
 import { versionService } from "../services"
-import { use } from "marked"
 
 const UserArea = () => {
   const [view, setView] = useBrowserStore((state) => [
     state.view,
     state.setView,
   ])
+
   useEffect(() => {
     versionService.find().then((data) => {
       console.info("[UserArea] version", data)
     })
   }, [])
-  //   userService.find().then((data) => {
-  //     console.info("[UserArea] data", data)
-  //     return data
-  //   })
-  // }, [])
+
   const user = usePersistentStore((state) => state.user)
   return (
     <div className="UserArea me-3 d-flex">

src/components/UserCard.js → src/components/UserCard.tsx

@@ -2,7 +2,15 @@ import React from "react"
 import "./UserCard.css"
 import Avatar from "boring-avatars"
 
-const UserCard = ({ user }) => {
+export interface User {
+  username: string
+  isStaff: boolean
+  profile?: {
+    pattern: string[]
+  }
+}
+
+const UserCard = ({ user }: { user: User }) => {
   return (
     <div className="UserCard d-flex align-items-center">
       <div className="me-2">

src/stories/components/Token.stories.ts

@@ -0,0 +1,14 @@
+import type { Meta, StoryObj } from "@storybook/react"
+import { fn } from "@storybook/test"
+import Token from "../../components/Token"
+
+const meta: Meta<typeof Token> = {
+  component: Token,
+}
+
+export default meta
+type Story = StoryObj<typeof Token>
+
+export const Default: Story = {
+  args: {},
+}

src/stories/components/UserArea.stories.ts

@@ -0,0 +1,14 @@
+import type { Meta, StoryObj } from "@storybook/react"
+import { fn } from "@storybook/test"
+import UserArea from "../../components/UserArea"
+
+const meta: Meta<typeof UserArea> = {
+  component: UserArea,
+}
+
+export default meta
+type Story = StoryObj<typeof UserArea>
+
+export const Default: Story = {
+  args: {},
+}

src/stories/components/UserCard.stories.ts

@@ -0,0 +1,23 @@
+import type { Meta, StoryObj } from "@storybook/react"
+import { fn } from "@storybook/test"
+import UserCard from "../../components/UserCard"
+import type { User } from "../../components/UserCard"
+
+const meta: Meta<typeof UserCard> = {
+  component: UserCard,
+}
+
+export default meta
+type Story = StoryObj<typeof UserCard>
+
+export const Default: Story = {
+  args: {
+    user: {
+      username: "user",
+      isStaff: false,
+      profile: {
+        pattern: ["#000000", "#FFFFFF"],
+      },
+    } as User,
+  },
+}