refactor(storybook): fix types in stories (#1551)

splunk · Jan 31, 2025 · c6b356d · c6b356d
1 parent 7286664
commit c6b356d
Show file tree

Hide file tree

Showing 4 changed files with 15 additions and 17 deletions.
diff --git a/ui/src/components/CheckboxGroup/stories/CheckboxGroupInputPage.stories.tsx b/ui/src/components/CheckboxGroup/stories/CheckboxGroupInputPage.stories.tsx
@@ -11,17 +11,15 @@ import InputPage from '../../../pages/Input/InputPage';
 const meta = {
     component: InputPage,
     title: 'CheckboxGroup/Page',
-    render: (args) => {
-        setUnifiedConfig(args.globalConfig);
+    render: (_args, { parameters }) => {
+        setUnifiedConfig(parameters.globalConfig);
         return <InputPage />;
     },
-    args: {
-        globalConfig: checkboxGroupConfig,
-    },
     parameters: {
         msw: {
             handlers: serverHandlers,
         },
+        globalConfig: checkboxGroupConfig,
     },
     play: async ({ canvasElement }) => {
         const canvas = within(canvasElement);
@@ -40,7 +38,7 @@ type Story = StoryObj<typeof BaseFormView>;
 export const InputPageView: Story = {};
 
 export const RequiredView: Story = {
-    args: {
+    parameters: {
         globalConfig: checkboxGroupRequiredConfig,
     },
     play: async ({ canvasElement }) => {

diff --git a/ui/src/components/CheckboxTree/stories/CheckboxTreeInputPage.stories.tsx b/ui/src/components/CheckboxTree/stories/CheckboxTreeInputPage.stories.tsx
@@ -11,14 +11,12 @@ import InputPage from '../../../pages/Input/InputPage';
 const meta = {
     component: InputPage,
     title: 'CheckboxTree/Page',
-    render: (args) => {
-        setUnifiedConfig(args.globalConfig);
+    render: (_args, { parameters }) => {
+        setUnifiedConfig(parameters.globalConfig);
         return <InputPage />;
     },
-    args: {
-        globalConfig: CheckboxTreeConfig,
-    },
     parameters: {
+        globalConfig: CheckboxTreeConfig,
         msw: {
             handlers: serverHandlers,
         },
@@ -40,7 +38,7 @@ type Story = StoryObj<typeof BaseFormView>;
 export const InputPageView: Story = {};
 
 export const RequiredView: Story = {
-    args: {
+    parameters: {
         globalConfig: CheckboxTreeRequiredConfig,
     },
     play: async ({ canvasElement }) => {

diff --git a/ui/src/components/table/stories/TableWrapper.stories.tsx b/ui/src/components/table/stories/TableWrapper.stories.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { ReactNode } from 'react';
 import type { Meta, StoryObj } from '@storybook/react';
 import { fn } from '@storybook/test';
 
@@ -23,7 +23,7 @@ const meta = {
         setUnifiedConfig(props.config);
         return (
             <TableContextProvider>
-                {(<TableWrapper {...props} />) as unknown as Node}
+                {(<TableWrapper {...props} />) as unknown as ReactNode}
             </TableContextProvider>
         );
     },

diff --git a/ui/src/pages/stories/GlobalConfigPlayground.stories.tsx b/ui/src/pages/stories/GlobalConfigPlayground.stories.tsx
@@ -1,6 +1,6 @@
 import type { Meta, StoryObj } from '@storybook/react';
 import { SplunkThemeProvider } from '@splunk/themes';
-import TabBar from '@splunk/react-ui/TabBar';
+import TabBar, { TabBarChangeHandler } from '@splunk/react-ui/TabBar';
 import React, { useCallback, useState } from 'react';
 import { http, HttpResponse } from 'msw';
 
@@ -27,8 +27,10 @@ const meta = {
         const pageKeys = Object.keys(config.pages);
         const [activeTabId, setActiveTabId] = useState(pageKeys[0]);
 
-        const handleChange = useCallback((e, { selectedTabId }) => {
-            setActiveTabId(selectedTabId);
+        const handleChange: TabBarChangeHandler = useCallback((e, { selectedTabId }) => {
+            if (selectedTabId !== undefined) {
+                setActiveTabId(selectedTabId);
+            }
         }, []);
 
         const page = pageMap[activeTabId];