fix(storybook): wrap story/decorator hooks in components (DeepSource JS-0820) (#231)

Both rules-of-hooks violations were Storybook patterns where hooks ran in a
story `render` callback / a decorator function — valid at Storybook runtime
(it renders them as components) but flagged by the react-hooks rule because
the function isn't a capitalized component. Fixed honestly (the recommended
Storybook pattern) rather than suppressed:
- stories/Tabs.stories.tsx: `useState` extracted into a `WithPanelsDemo`
  component; the story render returns `<WithPanelsDemo />`.
- .storybook/preview.tsx: the theme `useEffect` extracted into a
  `ThemeWrapper` component (theme/appearance passed as props); `withTheme`
  decorator renders `<ThemeWrapper>…<Story/></ThemeWrapper>`.

Rendered output unchanged. lint + typecheck green.

Co-authored-by: Claude Opus 4.8 <noreply@anthropic.com>

Author: qnbs

.storybook/preview.tsx

@@ -4,13 +4,21 @@ import '../index.css';
 
 const APPEARANCE_CLASSES = ['appearance-sepia', 'appearance-fantasy', 'appearance-romance'];
 
-const withTheme: DecoratorFunction = (Story, context) => {
+// QNBS-v3: the theme effect lives in a component, not the decorator callback (DeepSource JS-0820 /
+// rules-of-hooks). Storybook renders ThemeWrapper as a component, so useEffect is valid here.
+const ThemeWrapper = ({
+  theme,
+  appearance,
+  children,
+}: {
+  theme: string;
+  appearance: string;
+  children: React.ReactNode;
+}) => {
   useEffect(() => {
-    const theme = context.globals.theme ?? 'dark';
     document.body.classList.remove('light-theme', 'dark-theme');
     document.body.classList.add(`${theme}-theme`);
 
-    const appearance = context.globals.appearance ?? 'default';
     document.body.classList.remove(...APPEARANCE_CLASSES);
     if (appearance === 'sepia') document.body.classList.add('appearance-sepia');
     if (appearance === 'fantasy') document.body.classList.add('appearance-fantasy');
@@ -19,15 +27,22 @@ const withTheme: DecoratorFunction = (Story, context) => {
     return () => {
       document.body.classList.remove('light-theme', 'dark-theme', ...APPEARANCE_CLASSES);
     };
-  }, [context.globals.theme, context.globals.appearance]);
+  }, [theme, appearance]);
 
   return (
-    <div className="min-h-screen p-6 bg-sc-surface-base text-sc-text-primary">
-      <Story />
-    </div>
+    <div className="min-h-screen p-6 bg-sc-surface-base text-sc-text-primary">{children}</div>
   );
 };
 
+const withTheme: DecoratorFunction = (Story, context) => (
+  <ThemeWrapper
+    theme={context.globals.theme ?? 'dark'}
+    appearance={context.globals.appearance ?? 'default'}
+  >
+    <Story />
+  </ThemeWrapper>
+);
+
 const preview: Preview = {
   decorators: [withTheme],
   globalTypes: {

stories/Tabs.stories.tsx

@@ -56,34 +56,38 @@ export const Underline: Story = {
   render: () => <TabsDemo variant="underline" />,
 };
 
+// QNBS-v3: hooks belong in a component, not a story render callback (DeepSource JS-0820 /
+// rules-of-hooks). Storybook renders this as a component, so useState is valid here.
+const WithPanelsDemo = () => {
+  const [activeTab, setActiveTab] = useState('outline');
+  const groupId = 'story-tabs';
+  return (
+    <div className="space-y-4">
+      <Tabs
+        tabs={TABS}
+        activeTab={activeTab}
+        onChange={setActiveTab}
+        ariaLabel="Document sections"
+      />
+      <TabPanel tabId="outline" activeTab={activeTab} groupId={groupId}>
+        <div className="p-4 rounded-sc-lg bg-[var(--sc-surface-raised)] text-[var(--sc-text-primary)]">
+          Outline content
+        </div>
+      </TabPanel>
+      <TabPanel tabId="manuscript" activeTab={activeTab} groupId={groupId}>
+        <div className="p-4 rounded-sc-lg bg-[var(--sc-surface-raised)] text-[var(--sc-text-primary)]">
+          Manuscript content
+        </div>
+      </TabPanel>
+      <TabPanel tabId="notes" activeTab={activeTab} groupId={groupId}>
+        <div className="p-4 rounded-sc-lg bg-[var(--sc-surface-raised)] text-[var(--sc-text-primary)]">
+          Notes content
+        </div>
+      </TabPanel>
+    </div>
+  );
+};
+
 export const WithPanels: Story = {
-  render: () => {
-    const [activeTab, setActiveTab] = useState('outline');
-    const groupId = 'story-tabs';
-    return (
-      <div className="space-y-4">
-        <Tabs
-          tabs={TABS}
-          activeTab={activeTab}
-          onChange={setActiveTab}
-          ariaLabel="Document sections"
-        />
-        <TabPanel tabId="outline" activeTab={activeTab} groupId={groupId}>
-          <div className="p-4 rounded-sc-lg bg-[var(--sc-surface-raised)] text-[var(--sc-text-primary)]">
-            Outline content
-          </div>
-        </TabPanel>
-        <TabPanel tabId="manuscript" activeTab={activeTab} groupId={groupId}>
-          <div className="p-4 rounded-sc-lg bg-[var(--sc-surface-raised)] text-[var(--sc-text-primary)]">
-            Manuscript content
-          </div>
-        </TabPanel>
-        <TabPanel tabId="notes" activeTab={activeTab} groupId={groupId}>
-          <div className="p-4 rounded-sc-lg bg-[var(--sc-surface-raised)] text-[var(--sc-text-primary)]">
-            Notes content
-          </div>
-        </TabPanel>
-      </div>
-    );
-  },
+  render: () => <WithPanelsDemo />,
 };