docs: add links to storybook

.storybook/addons/button/githubButton.tsx

@@ -0,0 +1,30 @@
+import { Button } from '@storybook/components'
+import { GithubIcon } from '@storybook/icons'
+import { addons, types } from '@storybook/manager-api'
+import React from 'react'
+
+const ADDON_ID = 'github-link'
+const TOOL_ID = `${ADDON_ID}/tool`
+
+const REPO_URL = 'https://github.com/rustic-ai/rustic-ui-components'
+
+function GitHubButton() {
+  return (
+    <Button
+      title="View on GitHub"
+      onClick={() => window.open(REPO_URL, '_blank')}
+      size="small"
+    >
+      <GithubIcon />
+    </Button>
+  )
+}
+
+addons.register(ADDON_ID, () => {
+  addons.add(TOOL_ID, {
+    type: types.TOOL,
+    title: 'View on GitHub',
+    match: ({ viewMode }) => !!(viewMode && viewMode.match(/^(story|docs)$/)),
+    render: () => <GitHubButton />,
+  })
+})

.storybook/addons/button/logo.tsx

@@ -0,0 +1,104 @@
+import { addons } from '@storybook/manager-api'
+
+const logoDataAttribute = 'data-storybook-logo-id'
+const logoId = 'storybook-sidebar-custom-logo'
+const navSelector = 'nav'
+const scrollContainerSelector = 'nav > div'
+const scrollContainerPaddingClass = 'storybook-scroll-padding'
+
+const initialCheckInterval = 100
+const uiSettleTimeout = 300
+
+const bottomPadding = 10
+
+const logoUrl = '/images/dragonscale-logo.svg'
+const websiteUrl = 'https://www.dragonscale.ai'
+
+const addLogoToSidebar = () => {
+  const sidebar = document.querySelector(navSelector)
+  if (!sidebar) {
+    return false
+  }
+
+  const existingLogo = sidebar.querySelector(
+    `[${logoDataAttribute}="${logoId}"]`
+  )
+  if (existingLogo) {
+    ;(existingLogo as HTMLElement).style.display = 'flex'
+    return true
+  }
+
+  const logoContainer = document.createElement('div')
+  logoContainer.setAttribute(logoDataAttribute, logoId)
+  logoContainer.className = 'storybook-logo-container'
+
+  const logo = document.createElement('img')
+  logo.src = window.location.origin + logoUrl
+  logo.alt = 'Build by Dragonscale'
+  logo.className = 'storybook-logo-image'
+
+  logo.onclick = () => {
+    window.open(websiteUrl, '_blank')
+  }
+
+  logoContainer.appendChild(logo)
+  sidebar.appendChild(logoContainer)
+
+  const scrollContainer = document.querySelector(
+    scrollContainerSelector
+  ) as HTMLElement
+  if (scrollContainer) {
+    const logoHeight = logoContainer.offsetHeight
+    scrollContainer.classList.add(scrollContainerPaddingClass)
+    document.documentElement.style.setProperty(
+      '--scroll-padding-bottom',
+      `${logoHeight + bottomPadding}px`
+    )
+  }
+
+  return true
+}
+
+const init = () => {
+  const checkInterval = setInterval(() => {
+    if (addLogoToSidebar()) {
+      clearInterval(checkInterval)
+
+      const bodyObserver = new MutationObserver(() => {
+        addLogoToSidebar()
+      })
+
+      bodyObserver.observe(document.body, {
+        childList: true,
+        subtree: true,
+      })
+
+      window.addEventListener('resize', () => {
+        setTimeout(() => {
+          addLogoToSidebar()
+
+          const sidebar = document.querySelector(navSelector)
+          const logoContainer = sidebar?.querySelector(
+            `[${logoDataAttribute}="${logoId}"]`
+          )
+          const scrollContainer = document.querySelector(
+            scrollContainerSelector
+          ) as HTMLElement
+
+          if (scrollContainer && logoContainer) {
+            const currentLogoHeight = (logoContainer as HTMLElement)
+              .offsetHeight
+            document.documentElement.style.setProperty(
+              '--scroll-padding-bottom',
+              `${currentLogoHeight + bottomPadding}px`
+            )
+          }
+        }, uiSettleTimeout)
+      })
+    }
+  }, initialCheckInterval)
+}
+
+addons.register('sidebar-logo', () => {
+  init()
+})

.storybook/addons/button/manager.ts

@@ -0,0 +1,2 @@
+import './viewSourceButton.tsx'
+import './githubButton.tsx'

.storybook/addons/button/viewSourceButton.tsx

@@ -0,0 +1,65 @@
+import { Button } from '@storybook/components'
+import { addons, type API, types } from '@storybook/manager-api'
+import React, { useEffect, useState } from 'react'
+import type { API_LeafEntry } from 'storybook/internal/types'
+
+const ADDON_ID = 'github-source-link'
+const TOOL_ID = `${ADDON_ID}/tool`
+
+function ViewSourceButton({ api }: Readonly<{ api: API }>) {
+  const [storyData, setStoryData] = useState<API_LeafEntry>()
+
+  useEffect(() => {
+    const updateStoryData = () => {
+      const uiSettleTimeout = 100
+      setTimeout(() => {
+        try {
+          const currentStoryData = api.getCurrentStoryData()
+          if (currentStoryData && currentStoryData.importPath) {
+            setStoryData(currentStoryData)
+          }
+        } catch (error) {
+          console.error('Error getting story data:', error)
+        }
+      }, uiSettleTimeout)
+    }
+
+    updateStoryData()
+
+    const removeStoryChangedListener = api.on('storyChanged', updateStoryData)
+    const removeRenderedListener = api.on('STORY_RENDERED', updateStoryData)
+
+    return () => {
+      removeStoryChangedListener()
+      removeRenderedListener()
+    }
+  }, [api])
+
+  if (!storyData || !storyData.importPath) {
+    return null
+  }
+
+  const url = [
+    'https://github.com/rustic-ai/rustic-ui-components/blob/main',
+    storyData.importPath.replace(/\.\//, ''),
+  ].join('/')
+
+  return (
+    <Button
+      title="View source on GitHub"
+      onClick={() => window.open(url, '_blank')}
+      size="small"
+    >
+      View source
+    </Button>
+  )
+}
+
+addons.register(ADDON_ID, (api) => {
+  addons.add(TOOL_ID, {
+    type: types.TOOL,
+    title: 'View source on GitHub',
+    match: ({ viewMode }) => !!(viewMode && viewMode.match(/^(story|docs)$/)),
+    render: () => <ViewSourceButton api={api} />,
+  })
+})

.storybook/main.ts

@@ -1,5 +1,7 @@
+/* eslint-disable storybook/no-uninstalled-addons */
 import type { StorybookConfig } from '@storybook/react-webpack5'
-const path = require('path')
+import path from 'path'
+
 const config: StorybookConfig = {
   stories: ['../src/**/*.stories.@(tsx)', '../docs/*.mdx'],
   addons: [
@@ -11,6 +13,7 @@ const config: StorybookConfig = {
       options: { transcludeMarkdown: true },
     },
     '@storybook/addon-webpack5-compiler-swc',
+    './addons/button',
   ],
   framework: {
     name: '@storybook/react-webpack5',

.storybook/manager-head.html

@@ -1 +1,2 @@
 <link rel="shortcut icon" href="images/favicon.jpg" />
+<link rel="stylesheet" href="css/logo.css" />

.storybook/manager.js → .storybook/manager.ts

@@ -1,4 +1,7 @@
+import './addons/button/logo.tsx'
+
 import { addons } from '@storybook/manager-api'
+
 import rusticTheme from './rusticTheme'
 
 addons.setConfig({

public/css/logo.css

@@ -0,0 +1,22 @@
+.storybook-logo-container {
+  position: absolute;
+  bottom: 15px;
+  left: 0;
+  right: 0;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding-top: 10px;
+  z-index: 1;
+  pointer-events: auto;
+}
+
+.storybook-logo-image {
+  max-width: 80%;
+  height: 20px;
+  cursor: pointer;
+}
+
+.storybook-scroll-padding {
+  padding-bottom: var(--scroll-padding-bottom, 30px);
+}