Initial commit

Author: tylersmith-openai

.github/workflows/deploy-storybook.yml

@@ -0,0 +1,51 @@
+name: Build & deploy Storybook
+
+on:
+  push:
+    branches:
+      - main
+  workflow_dispatch:
+
+permissions:
+  contents: write
+  pages: write
+  id-token: write
+
+concurrency:
+  group: "pages"
+  cancel-in-progress: true
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+
+      - name: Set up Node
+        uses: actions/setup-node@v4
+        with:
+          node-version: "20"
+          cache: "npm"
+
+      - name: Install dependencies
+        run: npm ci
+
+      - name: Build Storybook
+        run: npm run build-storybook --output-dir storybook-static
+
+      - name: Upload Pages artifact
+        uses: actions/upload-pages-artifact@v3
+        with:
+          path: ./storybook-static
+
+  deploy:
+    needs: build
+    runs-on: ubuntu-latest
+    environment:
+      name: github-pages
+      url: ${{ steps.deployment.outputs.page_url }}
+    steps:
+      - name: Deploy to GitHub Pages
+        id: deployment
+        uses: actions/deploy-pages@v4

.gitignore

@@ -0,0 +1,16 @@
+*.egg-info
+*.tgz
+*.tsbuildinfo
+.DS_STORE
+
+__pycache__
+.egg-info
+.git
+.mypy_cache
+.next
+.pytest_cache
+.rollup.cache
+.ruff_cache
+
+dist
+node_modules

.prettierignore

@@ -0,0 +1 @@
+*.mdx

.storybook-base/addon-back-to-docs/index.tsx

@@ -0,0 +1,47 @@
+// organize-imports-ignore
+// @ts-expect-error -- React import is required here
+import React from "react"
+import { IconButton } from "@storybook/components"
+import { addons, types, useStorybookApi } from "@storybook/manager-api"
+
+addons.register("oai/back-to-docs", () => {
+  addons.add("oai/back-to-docs/tool", {
+    title: "Back to docs",
+    type: types.TOOL,
+
+    /* only show the button when someone is *inside* story view */
+    match: ({ viewMode }) => viewMode === "story",
+
+    render: () => <BackToDocs />,
+  })
+})
+
+export const BackToDocs = () => {
+  const api = useStorybookApi()
+  const story = api.getCurrentStoryData() // active story
+
+  if (!story) return null
+
+  // transform "...--base" → "...--docs"
+  const docsId = story.id.replace(/--[^-]+$/, "--docs")
+
+  // If the docs page actually exists, render a button
+  if (!api.getData(docsId, story.refId)) return null
+
+  return (
+    <span className="story-back-link">
+      <IconButton onClick={() => api.selectStory(docsId, undefined, { viewMode: "docs" })}>
+        <ArrowLeft /> Back to docs
+      </IconButton>
+    </span>
+  )
+}
+
+export const ArrowLeft = () => (
+  <svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path
+      d="M5.354 2.146a.5.5 0 010 .708L1.707 6.5H13.5a.5.5 0 010 1H1.707l3.647 3.646a.5.5 0 01-.708.708l-4.5-4.5a.5.5 0 010-.708l4.5-4.5a.5.5 0 01.708 0z"
+      fill="currentColor"
+    ></path>
+  </svg>
+)

.storybook-base/addon-theme/Tool.tsx

@@ -0,0 +1,81 @@
+// organize-imports-ignore
+// @ts-expect-error -- React import is required here
+import React from "react"
+import { IconButton } from "@storybook/components"
+import { type API, useGlobals } from "@storybook/manager-api"
+import { memo, useLayoutEffect, useState } from "react"
+import { type Theme } from "./constants"
+import { THEMES } from "./themes"
+import { applyManagerThemeClass, getThemeStore, setThemeStore } from "./themeStore"
+
+export const Tool = memo(({ api }: { api: API }) => {
+  const [, updateGlobals] = useGlobals()
+  const [theme, setTheme] = useState<Theme>(getThemeStore())
+
+  const toggleTheme = () => {
+    const nextTheme = theme === "light" ? "dark" : "light"
+    // Enable stories and docs to retrieve this value
+    updateGlobals({ theme: nextTheme })
+    // Visually apply the next theme
+    applyTheme(nextTheme)
+  }
+
+  const applyTheme = (themeToApply: Theme) => {
+    setTheme(themeToApply)
+    // Update persistent storage
+    setThemeStore(themeToApply)
+    // Update manager frame class
+    applyManagerThemeClass(themeToApply)
+    // Update global theme config styles
+    api.setOptions({ theme: THEMES[themeToApply] })
+  }
+
+  useLayoutEffect(() => {
+    // Ensure the correct class is applied to manager state on load
+    applyManagerThemeClass(theme)
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [])
+
+  return (
+    <IconButton
+      active={false}
+      title={`Switch to ${theme === "light" ? "Dark" : "Light"} Mode`}
+      onClick={toggleTheme}
+    >
+      {theme === "light" ? <LightMode /> : <DarkMode />}
+    </IconButton>
+  )
+})
+
+// Re-imported icons from our library, since we don't have the SVG Loader
+const DarkMode = () => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="16px"
+    height="16px"
+    fill="currentColor"
+    viewBox="0 0 24 24"
+  >
+    <path
+      fillRule="evenodd"
+      d="M12.784 2.47a1 1 0 0 1 .047.975A8 8 0 0 0 20 15h.057a1 1 0 0 1 .902 1.445A10 10 0 0 1 12 22C6.477 22 2 17.523 2 12c0-5.499 4.438-9.961 9.928-10a1 1 0 0 1 .856.47ZM10.41 4.158a8 8 0 1 0 7.942 12.707C13.613 16.079 10 11.96 10 7c0-.986.143-1.94.41-2.842Z"
+      clipRule="evenodd"
+    ></path>
+  </svg>
+)
+
+const LightMode = () => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="16px"
+    height="16px"
+    fill="currentColor"
+    viewBox="0 0 24 24"
+  >
+    <path
+      fillRule="evenodd"
+      d="M12 1a1 1 0 0 1 1 1v1a1 1 0 1 1-2 0V2a1 1 0 0 1 1-1ZM1 12a1 1 0 0 1 1-1h1a1 1 0 1 1 0 2H2a1 1 0 0 1-1-1Zm19 0a1 1 0 0 1 1-1h1a1 1 0 1 1 0 2h-1a1 1 0 0 1-1-1Zm-8 8a1 1 0 0 1 1 1v1a1 1 0 1 1-2 0v-1a1 1 0 0 1 1-1Zm0-12a4 4 0 1 0 0 8 4 4 0 0 0 0-8Zm-6 4a6 6 0 1 1 12 0 6 6 0 0 1-12 0Zm-.364-7.778a1 1 0 1 0-1.414 1.414l.707.707A1 1 0 0 0 6.343 4.93l-.707-.707ZM4.222 18.364a1 1 0 1 0 1.414 1.414l.707-.707a1 1 0 1 0-1.414-1.414l-.707.707ZM17.657 4.929a1 1 0 1 0 1.414 1.414l.707-.707a1 1 0 0 0-1.414-1.414l-.707.707Zm1.414 12.728a1 1 0 1 0-1.414 1.414l.707.707a1 1 0 0 0 1.414-1.414l-.707-.707Z"
+      clipRule="evenodd"
+    ></path>
+  </svg>
+)

.storybook-base/addon-theme/constants.ts

@@ -0,0 +1,2 @@
+export type Theme = "light" | "dark"
+export const DEFAULT_THEME: Theme = "light"

.storybook-base/addon-theme/index.tsx

@@ -0,0 +1,29 @@
+// organize-imports-ignore
+// @ts-expect-error -- React import is required here
+import React from "react"
+import { addons, types } from "@storybook/manager-api"
+import { THEMES } from "./themes"
+import { getThemeStore } from "./themeStore"
+import { Tool } from "./Tool"
+
+export const init = () => {
+  // Get initial theme from storage
+  const initialTheme = getThemeStore()
+
+  // Apply initial theme
+  addons.setConfig({
+    theme: {
+      ...THEMES[initialTheme],
+    },
+  })
+
+  // Register the toolbar action
+  addons.register("oai-storybook/theme-toggle", (api) => {
+    addons.add("oai-storybook/theme-toggle", {
+      title: "Theme toggle",
+      type: types.TOOL,
+      match: ({ viewMode }) => viewMode === "story" || viewMode === "docs",
+      render: () => <Tool api={api} />,
+    })
+  })
+}

.storybook-base/addon-theme/themeStore.ts

@@ -0,0 +1,41 @@
+export type { Theme } from "./constants"
+import { DEFAULT_THEME, type Theme } from "./constants"
+
+const STORAGE_KEY = "sb-addon-oai-theme-1"
+
+const getThemeFromUrl = (urlString: string): string | null => {
+  const url = new URL(urlString)
+  const params = url.searchParams
+  const globals = params.get("globals")
+  if (globals) {
+    const pairs = globals.split(";")
+    for (const pair of pairs) {
+      const [key, value] = pair.split(":")
+      if (key === "theme") {
+        return value
+      }
+    }
+  }
+  return null
+}
+
+export const setThemeStore = (theme: Theme) => {
+  window.localStorage.setItem(STORAGE_KEY, theme)
+}
+
+export const getThemeStore = (): Theme => {
+  const themeFromURL = getThemeFromUrl(window.location.href)
+  if (themeFromURL === "light" || themeFromURL === "dark") {
+    setThemeStore(themeFromURL)
+    return themeFromURL
+  }
+
+  const themeFromStorage = window.localStorage.getItem(STORAGE_KEY) as Theme | undefined
+  return themeFromStorage || DEFAULT_THEME
+}
+
+export const applyManagerThemeClass = (nextTheme: Theme) => {
+  const htmlTag = document.documentElement
+  htmlTag.setAttribute("data-theme", nextTheme)
+  htmlTag.style.colorScheme = nextTheme
+}

.storybook-base/addon-theme/themes.ts

@@ -0,0 +1,67 @@
+import { create, themes, type ThemeVars } from "@storybook/theming"
+import { type Theme } from "./constants"
+
+const light = create({
+  base: "light",
+  // Logo
+  brandTitle: "Apps SDK UI",
+  brandImage: "https://openai.github.io/apps-sdk-ui/logo-storybook.svg",
+  brandUrl: "https://developers.openai.com",
+  brandTarget: "_self",
+
+  // Typography
+  fontBase: `ui-sans-serif, -apple-system, system-ui, "Segoe UI", "Noto Sans", "Helvetica",
+    "Arial", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif`,
+  fontCode: `ui-monospace, "SFMono-Regular", "SF Mono", "Menlo", "Monaco", "Consolas",
+    "Liberation Mono", "DejaVu Sans Mono", "Courier New", monospace`,
+
+  // Variables
+  colorPrimary: "#3A10E5",
+  colorSecondary: "#585C6D",
+
+  // UI
+  appBg: "#ffffff",
+  appContentBg: "#ffffff",
+  appPreviewBg: "#ffffff",
+  appBorderColor: "#ededed",
+  appBorderRadius: 6,
+
+  // Toolbar default and active colors
+  barTextColor: "#6e6e80",
+  barBg: "#ffffff",
+})
+
+const dark = create({
+  ...themes.dark,
+  // Logo
+  brandTitle: "Apps SDK UI",
+  brandImage: "https://openai.github.io/apps-sdk-ui/logo-storybook-dark.svg",
+  brandUrl: "https://platform.openai.com",
+  brandTarget: "_self",
+
+  // Typography
+  fontBase: `ui-sans-serif, -apple-system, system-ui, "Segoe UI", "Noto Sans", "Helvetica",
+    "Arial", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif`,
+  fontCode: `ui-monospace, "SFMono-Regular", "SF Mono", "Menlo", "Monaco", "Consolas",
+    "Liberation Mono", "DejaVu Sans Mono", "Courier New", monospace`,
+
+  // Variables
+  colorPrimary: "#3A10E5",
+  colorSecondary: "#585C6D",
+
+  // UI
+  appBg: "#212121",
+  appContentBg: "#212121",
+  appPreviewBg: "#212121",
+  appBorderColor: "#393939",
+  appBorderRadius: 6,
+
+  // Toolbar default and active colors
+  barTextColor: "#c1c1c1",
+  barBg: "#212121",
+})
+
+export const THEMES: Record<Theme, ThemeVars> = {
+  light,
+  dark,
+}

.storybook-base/addon-title/index.ts

@@ -0,0 +1,36 @@
+import { addons } from "@storybook/manager-api"
+
+// SOURCE: https://github.com/storybookjs/storybook/issues/6339
+
+addons.register("TitleAddon", (api) => {
+  const STORYBOOK_TITLE = "Apps SDK UI"
+
+  const setTitle = () => {
+    let sectionTitle = ""
+    try {
+      const storyData = api.getCurrentStoryData()
+      // Grab the last piece of the title, which will exclude section headings (e.g., Overview, Concepts, Components)
+      const pageTitleArr = storyData.title.split("/")
+      sectionTitle = pageTitleArr[storyData.depth - 1]
+
+      // Add story suffix, if present
+      if (storyData.type === "story") {
+        sectionTitle += `/${storyData.name}`
+      }
+    } catch (e) {
+      // do nothing
+    }
+
+    document.title = sectionTitle ? `${sectionTitle} - ${STORYBOOK_TITLE}` : STORYBOOK_TITLE
+  }
+
+  return new MutationObserver(() => {
+    if (document.title.endsWith("Storybook")) {
+      setTitle()
+    }
+  }).observe(document.querySelector("title")!, {
+    childList: true,
+    subtree: true,
+    characterData: true,
+  })
+})