Merge pull request #115 from datum-cloud/fix/storybook-docs-darkmode-container

fix(storybook): dark background for docs component previews

Author: yahyafakhroji

.changeset/fix-storybook-docs-darkmode.md

@@ -0,0 +1,9 @@
+---
+"@repo/storybook": patch
+---
+
+Fix docs dark mode. The component preview on a docs page now gets a dark
+background in dark mode (matching the dark-rendered component), while the rest
+of the docs chrome stays light. Removes the custom docs `DocsContainer`, which
+threw a "combining Storybook hooks with framework hooks" runtime error and
+themed the whole docs page (clashing with the light prose and tables).

apps/storybook/.storybook/preview.tsx

@@ -1,7 +1,6 @@
 import type { Preview } from 'storybook-react-rsbuild'
 import { ThemeProvider } from '@datum-cloud/datum-ui/theme'
 import { useEffect } from 'react'
-import { ThemedDocsContainer } from './themed-docs-container'
 import { datumViewports } from './viewport'
 import '../stories/storybook.css'
 
@@ -47,9 +46,6 @@ const preview: Preview = {
     },
   ],
   parameters: {
-    docs: {
-      container: ThemedDocsContainer,
-    },
     viewport: {
       viewports: datumViewports,
     },

apps/storybook/.storybook/themed-docs-container.tsx

@@ -37,3 +37,12 @@
  * --watch wipes dist before re-emitting hashed chunks. Storybook-only;
  * does not affect what's published to npm. */
 @source "../../../packages/datum-ui/src/**/*.{ts,tsx}";
+
+/* Docs dark mode: the preview decorator sets the `dark` class on the docs root
+ * when the `theme` global is dark, so the rendered component is dark. Give just
+ * the component preview surface a matching dark background; the rest of the docs
+ * chrome stays light. Colour matches datumDark appContentBg. */
+html.dark .sbdocs-preview,
+html.dark .docs-story {
+  background-color: #0c1d31 !important;
+}