@marimo-team/islands 0.23.17-dev3 → 0.23.17-dev30

package/src/stories/theme.stories.tsx

@@ -4,11 +4,14 @@ import { python } from "@codemirror/lang-python";
 import { EditorState, type Extension } from "@codemirror/state";
 import { EditorView } from "@codemirror/view";
 import type { Meta, StoryObj } from "@storybook/react-vite";
-import React, { useEffect, useRef } from "react";
+import React, { useEffect, useRef, useState } from "react";
+import { ReadonlyCode } from "../components/editor/code/readonly-python-code";
 import { basicBundle, type CodeMirrorSetupOpts } from "../core/codemirror/cm";
+import { userConfigAtom } from "../core/config/config";
 import { darkTheme } from "../core/codemirror/theme/dark";
 import { lightTheme } from "../core/codemirror/theme/light";
 import { OverridingHotkeyProvider } from "../core/hotkeys/hotkeys";
+import { store } from "../core/state/jotai";
 
 // Partial config for storybook demo
 const demoConfig: Partial<CodeMirrorSetupOpts> = {
@@ -52,6 +55,11 @@ result = example.get_value()
 size = example.data_size
 `.trim();
 
+const READONLY_CONTENT = Array.from(
+  { length: 80 },
+  (_, index) => `value_${index + 1} = ${index + 1}`,
+).join("\n");
+
 const Editor = (opts: { extensions?: Extension[] }): React.ReactNode => {
   const ref = useRef<HTMLDivElement>(null);
   useEffect(() => {
@@ -110,3 +118,65 @@ export const ThemeComparison: Story = {
     </div>
   ),
 };
+
+const ReadonlyCodeThemeFixture = (): React.ReactNode => {
+  const [theme, setTheme] = useState<"light" | "dark">("light");
+  const [initialTheme] = useState(
+    () => store.get(userConfigAtom).display.theme,
+  );
+
+  useEffect(() => {
+    store.set(userConfigAtom, (config) => ({
+      ...config,
+      display: { ...config.display, theme },
+    }));
+  }, [theme]);
+
+  useEffect(() => {
+    // Leave Storybook's theme in the state it had before this fixture mounted.
+    return () => {
+      store.set(userConfigAtom, (config) => ({
+        ...config,
+        display: { ...config.display, theme: initialTheme },
+      }));
+    };
+  }, [initialTheme]);
+
+  return (
+    <div className="max-w-3xl space-y-3" style={{ colorScheme: theme }}>
+      <div className="flex items-center justify-between gap-4">
+        <div>
+          <h3 className="text-lg font-semibold">ReadonlyCode fixture</h3>
+          <p className="text-sm text-muted-foreground">
+            Select text, scroll, then switch themes to check that both remain.
+          </p>
+        </div>
+        <div className="flex gap-2" role="group" aria-label="Theme">
+          {(["light", "dark"] as const).map((nextTheme) => (
+            <button
+              aria-pressed={theme === nextTheme}
+              className="rounded border px-3 py-1 text-sm"
+              key={nextTheme}
+              onClick={() => setTheme(nextTheme)}
+              type="button"
+            >
+              {nextTheme}
+            </button>
+          ))}
+        </div>
+      </div>
+      <div className="h-64 overflow-hidden rounded border">
+        <ReadonlyCode
+          className="h-full [&_.cm-editor]:h-full [&_.cm-scroller]:h-full [&_.cm-theme-none]:h-full"
+          code={READONLY_CONTENT}
+          showCopyCode={false}
+          showHideCode={false}
+        />
+      </div>
+    </div>
+  );
+};
+
+export const ReadonlyCodeThemeReconfiguration: Story = {
+  render: () => <ReadonlyCodeThemeFixture />,
+};