From 4409e306861839c634d147a4aa0b736d63a3fa2a Mon Sep 17 00:00:00 2001
From: Drulikar <drathek@gmail.com>
Date: Wed, 15 May 2024 06:32:46 -0700
Subject: [PATCH] Fix theme and tab stories for kitchen sink

---
 tgui/packages/tgui/debug/KitchenSink.jsx      |  6 ++++--
 tgui/packages/tgui/stories/Tabs.stories.jsx   | 19 +++++++++----------
 tgui/packages/tgui/stories/Themes.stories.jsx |  8 +++-----
 3 files changed, 16 insertions(+), 17 deletions(-)

diff --git a/tgui/packages/tgui/debug/KitchenSink.jsx b/tgui/packages/tgui/debug/KitchenSink.jsx
index 19044ca98d0c..f933c6dec0d1 100644
--- a/tgui/packages/tgui/debug/KitchenSink.jsx
+++ b/tgui/packages/tgui/debug/KitchenSink.jsx
@@ -23,7 +23,7 @@ const getStories = () => r.keys().map((path) => r(path));
 
 export const KitchenSink = (props) => {
   const { panel } = props;
-  const [theme] = useState(null);
+  const [theme, setTheme] = useState(null);
   const [pageIndex, setPageIndex] = useState(0);
   const stories = getStories();
   const story = stories[pageIndex];
@@ -48,7 +48,9 @@ export const KitchenSink = (props) => {
           </Section>
         </Flex.Item>
         <Flex.Item position="relative" grow={1}>
-          <Layout.Content scrollable>{story.meta.render()}</Layout.Content>
+          <Layout.Content scrollable>
+            {story.meta.render(theme, setTheme)}
+          </Layout.Content>
         </Flex.Item>
       </Flex>
     </Layout>
diff --git a/tgui/packages/tgui/stories/Tabs.stories.jsx b/tgui/packages/tgui/stories/Tabs.stories.jsx
index 24290fedaa25..b7c1d94c3298 100644
--- a/tgui/packages/tgui/stories/Tabs.stories.jsx
+++ b/tgui/packages/tgui/stories/Tabs.stories.jsx
@@ -94,41 +94,40 @@ const Story = (props) => {
         </Button.Checkbox>
       </Section>
       <Section fitted>
-        <TabsPrefab />
+        <TabsPrefab tabProps={tabProps} />
       </Section>
       <Section title="Normal section">
-        <TabsPrefab />
+        <TabsPrefab tabProps={tabProps} />
         Some text
       </Section>
       <Section>
         Section-less tabs appear the same as tabs in a fitted section:
       </Section>
-      <TabsPrefab />
+      <TabsPrefab tabProps={tabProps} />
     </>
   );
 };
 
 const TabsPrefab = (props) => {
   const [tabIndex, setTabIndex] = useState(0);
-  const [tabProps] = useState({});
   return (
     <Tabs
-      vertical={tabProps.vertical}
-      fluid={tabProps.fluid}
-      textAlign={tabProps.centered && 'center'}
+      vertical={props.tabProps.vertical}
+      fluid={props.tabProps.fluid}
+      textAlign={props.tabProps.centered && 'center'}
     >
       {TAB_RANGE.map((text, i) => (
         <Tabs.Tab
           key={i}
           selected={i === tabIndex}
-          icon={tabProps.icon && 'info-circle'}
+          icon={props.tabProps.icon && 'info-circle'}
           leftSlot={
-            tabProps.leftSlot && (
+            props.tabProps.leftSlot && (
               <Button circular compact color="transparent" icon="times" />
             )
           }
           rightSlot={
-            tabProps.rightSlot && (
+            props.tabProps.rightSlot && (
               <Button circular compact color="transparent" icon="times" />
             )
           }
diff --git a/tgui/packages/tgui/stories/Themes.stories.jsx b/tgui/packages/tgui/stories/Themes.stories.jsx
index 1fec28829c7f..83967da0166d 100644
--- a/tgui/packages/tgui/stories/Themes.stories.jsx
+++ b/tgui/packages/tgui/stories/Themes.stories.jsx
@@ -4,24 +4,22 @@
  * @license MIT
  */
 
-import { useLocalState } from '../backend';
 import { Input, LabeledList, Section } from '../components';
 
 export const meta = {
   title: 'Themes',
-  render: () => <Story />,
+  render: (theme, setTheme) => <Story theme={theme} setTheme={setTheme} />,
 };
 
 const Story = (props) => {
-  const [theme, setTheme] = useLocalState('kitchenSinkTheme');
   return (
     <Section>
       <LabeledList>
         <LabeledList.Item label="Use theme">
           <Input
             placeholder="theme_name"
-            value={theme}
-            onInput={(e, value) => setTheme(value)}
+            value={props.theme}
+            onInput={(e, value) => props.setTheme(value)}
           />
         </LabeledList.Item>
       </LabeledList>