chore(graph): update the syntax of the stories (#18188)

graph/client/src/app/feature-projects/panels/collapse-edges-panel.stories.tsx

@@ -1,20 +1,20 @@
-import { ComponentMeta, ComponentStory } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react';
 import { CollapseEdgesPanel } from './collapse-edges-panel';
 
-export default {
+const meta: Meta<typeof CollapseEdgesPanel> = {
   component: CollapseEdgesPanel,
   title: 'Project Graph/CollapseEdgesPanel',
   argTypes: {
     collapseEdges: Boolean,
     collapseEdgesChanged: { action: 'collapseEdgesChanged' },
   },
-} as ComponentMeta<typeof CollapseEdgesPanel>;
-
-const Template: ComponentStory<typeof CollapseEdgesPanel> = (args) => (
-  <CollapseEdgesPanel {...args} />
-);
-
-export const Primary = Template.bind({});
-Primary.args = {
-  collapseEdges: false,
+};
+
+export default meta;
+type Story = StoryObj<typeof CollapseEdgesPanel>;
+
+export const Primary: Story = {
+  args: {
+    collapseEdges: false,
+  },
 };

graph/client/src/app/feature-projects/panels/rankdir-panel.stories.tsx

@@ -1,12 +1,14 @@
-import { ComponentMeta, ComponentStory } from '@storybook/react';
-import RankDirPanel from './rankdir-panel';
+import type { Meta, StoryObj } from '@storybook/react';
+import { RankdirPanel } from './rankdir-panel';
 
-export default {
-  component: RankDirPanel,
-  title: 'Project Graph/RankDirPanel',
-} as ComponentMeta<typeof RankDirPanel>;
+const meta: Meta<typeof RankdirPanel> = {
+  component: RankdirPanel,
+  title: 'Project Graph/RankdirPanel',
+};
 
-const Template: ComponentStory<typeof RankDirPanel> = () => <RankDirPanel />;
+export default meta;
+type Story = StoryObj<typeof RankdirPanel>;
 
-export const Primary = Template.bind({});
-Primary.args = {};
+export const Primary: Story = {
+  args: {},
+};

graph/client/src/app/feature-projects/panels/search-depth.stories.tsx

@@ -1,7 +1,7 @@
-import { ComponentMeta, ComponentStory } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react';
 import { SearchDepth } from './search-depth';
 
-export default {
+const meta: Meta<typeof SearchDepth> = {
   component: SearchDepth,
   title: 'Project Graph/SearchDepth',
   argTypes: {
@@ -11,14 +11,14 @@ export default {
     decrementDepthFilter: { action: 'decrementDepthFilter' },
     incrementDepthFilter: { action: 'incrementDepthFilter' },
   },
-} as ComponentMeta<typeof SearchDepth>;
-
-const Template: ComponentStory<typeof SearchDepth> = (args) => (
-  <SearchDepth {...args} />
-);
-
-export const Primary = Template.bind({});
-Primary.args = {
-  searchDepthEnabled: false,
-  searchDepth: 1,
+};
+
+export default meta;
+type Story = StoryObj<typeof SearchDepth>;
+
+export const Primary: Story = {
+  args: {
+    searchDepthEnabled: false,
+    searchDepth: 1,
+  },
 };

graph/client/src/app/feature-projects/panels/text-filter-panel.stories.tsx

@@ -1,7 +1,7 @@
-import { ComponentMeta, ComponentStory } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react';
 import { TextFilterPanel } from './text-filter-panel';
 
-export default {
+const meta: Meta<typeof TextFilterPanel> = {
   component: TextFilterPanel,
   title: 'Project Graph/TextFilterPanel',
   argTypes: {
@@ -13,14 +13,14 @@ export default {
       action: 'updateTextFilter',
     },
   },
-} as ComponentMeta<typeof TextFilterPanel>;
-
-const Template: ComponentStory<typeof TextFilterPanel> = (args) => (
-  <TextFilterPanel {...args} />
-);
-
-export const Primary = Template.bind({});
-Primary.args = {
-  includePath: false,
-  textFilter: 'some-lib',
+};
+
+export default meta;
+type Story = StoryObj<typeof TextFilterPanel>;
+
+export const Primary: Story = {
+  args: {
+    includePath: false,
+    textFilter: 'some-lib',
+  },
 };

graph/client/src/app/feature-projects/panels/theme-panel.stories.tsx

@@ -1,12 +1,14 @@
-import { ComponentMeta, ComponentStory } from '@storybook/react';
-import ThemePanel from './theme-panel';
+import type { Meta, StoryObj } from '@storybook/react';
+import { ThemePanel } from './theme-panel';
 
-export default {
+const meta: Meta<typeof ThemePanel> = {
   component: ThemePanel,
   title: 'Project Graph/ThemePanel',
-} as ComponentMeta<typeof ThemePanel>;
+};
 
-const Template: ComponentStory<typeof ThemePanel> = () => <ThemePanel />;
+export default meta;
+type Story = StoryObj<typeof ThemePanel>;
 
-export const Primary = Template.bind({});
-Primary.args = {};
+export const Primary: Story = {
+  args: {},
+};

graph/client/src/app/feature-projects/panels/tracing-panel.stories.tsx

@@ -1,7 +1,7 @@
-import { ComponentMeta, ComponentStory } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react';
 import { TracingPanel } from './tracing-panel';
 
-export default {
+const meta: Meta<typeof TracingPanel> = {
   component: TracingPanel,
   title: 'Project Graph/TracingPanel',
   argTypes: {
@@ -9,15 +9,15 @@ export default {
     resetStart: { action: 'resetStart' },
     setAlgorithm: { action: 'setAlgorithm' },
   },
-} as ComponentMeta<typeof TracingPanel>;
-
-const Template: ComponentStory<typeof TracingPanel> = (args) => (
-  <TracingPanel {...args} />
-);
-
-export const Primary = Template.bind({});
-Primary.args = {
-  end: 'shared-ui',
-  start: 'store',
-  algorithm: 'shortest',
+};
+
+export default meta;
+type Story = StoryObj<typeof TracingPanel>;
+
+export const Primary: Story = {
+  args: {
+    end: 'shared-ui',
+    start: 'store',
+    algorithm: 'shortest',
+  },
 };

graph/client/src/app/feature-tasks/task-list.stories.tsx

@@ -1,7 +1,7 @@
-import { ComponentMeta, ComponentStory } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react';
 import { TaskList, TaskListProps } from './task-list';
 
-const Story: ComponentMeta<typeof TaskList> = {
+const meta: Meta<typeof TaskList> = {
   component: TaskList,
   title: 'TaskList',
   argTypes: {
@@ -10,13 +10,10 @@ const Story: ComponentMeta<typeof TaskList> = {
     },
   },
 };
-export default Story;
 
-const Template: ComponentStory<typeof TaskList> = (args) => (
-  <TaskList {...args} />
-);
+export default meta;
+type Story = StoryObj<typeof TaskList>;
 
-export const Primary = Template.bind({});
 const args: Partial<TaskListProps> = {
   projects: [
     {
@@ -40,7 +37,7 @@ const args: Partial<TaskListProps> = {
         root: 'apps/nested/app',
         targets: { build: { configurations: { production: {} } } },
         files: [],
-      },
+      } as any,
     },
     {
       name: 'app1-e2e',
@@ -49,7 +46,7 @@ const args: Partial<TaskListProps> = {
         root: 'apps/app1-e2e',
         targets: { e2e: { configurations: { production: {} } } },
         files: [],
-      },
+      } as any,
     },
     {
       name: 'lib1',
@@ -58,7 +55,7 @@ const args: Partial<TaskListProps> = {
         root: 'libs/lib1',
         targets: { lint: { configurations: { production: {} } } },
         files: [],
-      },
+      } as any,
     },
   ],
 
@@ -71,4 +68,7 @@ const args: Partial<TaskListProps> = {
     'app1:build': 'Missing executor',
   },
 };
-Primary.args = args;
+
+export const Primary: Story = {
+  args,
+};

graph/client/src/app/ui-components/checkbox-panel.stories.tsx

@@ -1,20 +1,20 @@
-import { ComponentMeta, ComponentStory } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react';
 import { CheckboxPanel } from './checkbox-panel';
 
-export default {
+const meta: Meta<typeof CheckboxPanel> = {
   component: CheckboxPanel,
   title: 'Shared/CheckboxPanel',
   argTypes: { checkChanged: { action: 'checkChanged' } },
-} as ComponentMeta<typeof CheckboxPanel>;
-
-const Template: ComponentStory<typeof CheckboxPanel> = (args) => (
-  <CheckboxPanel {...args} />
-);
-
-export const Primary = Template.bind({});
-Primary.args = {
-  checked: false,
-  name: 'option-to-check',
-  label: 'Option to check',
-  description: 'You can check this option.',
+};
+
+export default meta;
+type Story = StoryObj<typeof CheckboxPanel>;
+
+export const Primary: Story = {
+  args: {
+    checked: false,
+    name: 'option-to-check',
+    label: 'Option to check',
+    description: 'You can check this option.',
+  },
 };

graph/client/src/app/ui-components/debugger-panel.stories.tsx

@@ -1,36 +1,36 @@
-import { ComponentMeta, ComponentStory } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react';
 import { DebuggerPanel } from './debugger-panel';
 
-export default {
+const meta: Meta<typeof DebuggerPanel> = {
   component: DebuggerPanel,
   title: 'Shell/DebuggerPanel',
   argTypes: {
     selectedProjectChange: { action: 'projectGraphChange' },
   },
-} as ComponentMeta<typeof DebuggerPanel>;
+};
 
-const Template: ComponentStory<typeof DebuggerPanel> = (args) => (
-  <DebuggerPanel {...args} />
-);
+export default meta;
+type Story = StoryObj<typeof DebuggerPanel>;
 
-export const Primary = Template.bind({});
-Primary.args = {
-  projectGraphs: [
-    {
-      url: 'some-graph.json',
-      label: 'Some graph',
-      id: 'some-graph',
+export const Primary: Story = {
+  args: {
+    projects: [
+      {
+        url: 'some-graph.json',
+        label: 'Some graph',
+        id: 'some-graph',
+      } as any,
+      {
+        url: 'another-graph.json',
+        label: 'Another graph',
+        id: 'another-graph',
+      } as any,
+    ],
+    selectedProject: 'another-graph',
+    lastPerfReport: {
+      numEdges: 20,
+      numNodes: 10,
+      renderTime: 500,
     },
-    {
-      url: 'another-graph.json',
-      label: 'Another graph',
-      id: 'another-graph',
-    },
-  ],
-  selectedProjectGraph: 'another-graph',
-  lastPerfReport: {
-    numEdges: 20,
-    numNodes: 10,
-    renderTime: 500,
   },
 };

graph/client/src/app/ui-components/focused-project-panel.stories.tsx

@@ -1,17 +1,17 @@
-import { ComponentMeta, ComponentStory } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react';
 import { FocusedPanel } from './focused-panel';
 
-export default {
+const meta: Meta<typeof FocusedPanel> = {
   component: FocusedPanel,
   title: 'Project Graph/FocusedProjectPanel',
   argTypes: { resetFocus: { action: 'resetFocus' } },
-} as ComponentMeta<typeof FocusedPanel>;
-
-const Template: ComponentStory<typeof FocusedPanel> = (args) => (
-  <FocusedPanel {...args} />
-);
-
-export const Primary = Template.bind({});
-Primary.args = {
-  focusedProject: 'store',
+};
+
+export default meta;
+type Story = StoryObj<typeof FocusedPanel>;
+
+export const Primary: Story = {
+  args: {
+    focusedLabel: 'store',
+  },
 };

graph/client/src/app/ui-components/show-hide-all.stories.tsx

@@ -1,7 +1,7 @@
-import { ComponentMeta, ComponentStory } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react';
 import { ShowHideAll } from './show-hide-all';
 
-export default {
+const meta: Meta<typeof ShowHideAll> = {
   component: ShowHideAll,
   title: 'Project Graph/ShowHideAllProjects',
   argTypes: {
@@ -9,18 +9,19 @@ export default {
     showAffected: { action: 'showAffectedProjects' },
     showAll: { action: 'showAllProjects' },
   },
-} as ComponentMeta<typeof ShowHideAll>;
-
-const Template: ComponentStory<typeof ShowHideAll> = (args) => (
-  <ShowHideAll {...args} />
-);
-
-export const Primary = Template.bind({});
-Primary.args = {
-  hasAffectedProjects: false,
 };
 
-export const Affected = Template.bind({});
-Affected.args = {
-  hasAffectedProjects: true,
+export default meta;
+type Story = StoryObj<typeof ShowHideAll>;
+
+export const Primary: Story = {
+  args: {
+    hasAffected: false,
+  },
+};
+
+export const Affected: Story = {
+  args: {
+    hasAffected: true,
+  },
 };

graph/ui-components/.storybook/preview.js

@@ -1,3 +1,3 @@
-import 'graph-client/.storybook/tailwind-imports.css';
+import 'graph/client/.storybook/tailwind-imports.css';
 
 export const parameters = {};

graph/ui-components/src/lib/debounced-text-input.stories.tsx

@@ -1,7 +1,7 @@
-import { ComponentMeta, ComponentStory } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react';
 import { DebouncedTextInput } from './debounced-text-input';
 
-const Story: ComponentMeta<typeof DebouncedTextInput> = {
+const meta: Meta<typeof DebouncedTextInput> = {
   component: DebouncedTextInput,
   title: 'Shared/DebouncedTextInput',
   argTypes: {
@@ -13,14 +13,13 @@ const Story: ComponentMeta<typeof DebouncedTextInput> = {
     },
   },
 };
-export default Story;
 
-const Template: ComponentStory<typeof DebouncedTextInput> = (args) => (
-  <DebouncedTextInput {...args} />
-);
+export default meta;
+type Story = StoryObj<typeof DebouncedTextInput>;
 
-export const Primary = Template.bind({});
-Primary.args = {
-  initialText: '',
-  placeholderText: '',
+export const Primary: Story = {
+  args: {
+    initialText: '',
+    placeholderText: '',
+  },
 };

graph/ui-components/src/lib/dropdown.stories.tsx

@@ -1,20 +1,22 @@
-import { ComponentMeta, ComponentStory } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react';
 import { Dropdown } from './dropdown';
 
-export default {
+const meta: Meta<typeof Dropdown> = {
   component: Dropdown,
   title: 'Shared/Dropdown',
   argTypes: {
     onChange: { action: 'onChange' },
   },
-} as ComponentMeta<typeof Dropdown>;
+};
 
-const Template: ComponentStory<typeof Dropdown> = (args) => (
-  <Dropdown {...args}>
-    <option value="Option 1">Option 1</option>
-    <option value="Option 2">Option 2</option>
-  </Dropdown>
-);
+export default meta;
+type Story = StoryObj<typeof Dropdown>;
 
-export const Primary = Template.bind({});
-Primary.args = {};
+export const Primary: Story = {
+  render: () => (
+    <Dropdown {...{}}>
+      <option value="Option 1">Option 1</option>
+      <option value="Option 2">Option 2</option>
+    </Dropdown>
+  ),
+};

graph/ui-components/src/lib/tag.stories.tsx

@@ -1,15 +1,16 @@
-import { ComponentMeta, ComponentStory } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react';
 import { Tag } from './tag';
 
-const Story: ComponentMeta<typeof Tag> = {
+const meta: Meta<typeof Tag> = {
   component: Tag,
   title: 'Shared/Tag',
 };
-export default Story;
 
-const Template: ComponentStory<typeof Tag> = (args) => <Tag>{args.text}</Tag>;
+export default meta;
+type Story = StoryObj<typeof Tag>;
 
-export const Primary = Template.bind({});
-Primary.args = {
-  text: 'tag',
+export const Primary: Story = {
+  args: {
+    content: 'tag',
+  },
 };

graph/ui-graph/src/lib/nx-project-graph-viz.stories.tsx

@@ -1,71 +1,70 @@
-import { ComponentStory, ComponentMeta } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react';
 import { NxProjectGraphViz } from './nx-project-graph-viz';
 
-const Story: ComponentMeta<typeof NxProjectGraphViz> = {
+const meta: Meta<typeof NxProjectGraphViz> = {
   component: NxProjectGraphViz,
   title: 'NxProjectGraphViz',
 };
-export default Story;
 
-const Template: ComponentStory<typeof NxProjectGraphViz> = (args) => (
-  <NxProjectGraphViz {...args} />
-);
+export default meta;
+type Story = StoryObj<typeof NxProjectGraphViz>;
 
-export const Primary = Template.bind({});
-Primary.args = {
-  projects: [
-    {
-      type: 'app',
-      name: 'app',
-      data: {
-        tags: ['scope:cart'],
-        description: 'This is your top-level app',
-        files: [
-          {
-            file: 'whatever.ts',
-            deps: ['lib'],
-          },
-        ],
+export const Primary: Story = {
+  args: {
+    projects: [
+      {
+        type: 'app',
+        name: 'app',
+        data: {
+          tags: ['scope:cart'],
+          description: 'This is your top-level app',
+          files: [
+            {
+              file: 'whatever.ts',
+              deps: ['lib'],
+            },
+          ],
+        },
+      } as any,
+      {
+        type: 'lib',
+        name: 'lib',
+        data: {
+          tags: ['scope:cart'],
+          description: 'This lib implements some type of feature for your app.',
+        },
       },
-    },
-    {
-      type: 'lib',
-      name: 'lib',
-      data: {
-        tags: ['scope:cart'],
-        description: 'This lib implements some type of feature for your app.',
+      {
+        type: 'lib',
+        name: 'lib2',
+        data: {
+          root: 'libs/nested-scope/lib2',
+          tags: ['scope:cart'],
+        },
       },
-    },
-    {
-      type: 'lib',
-      name: 'lib2',
-      data: {
-        root: 'libs/nested-scope/lib2',
-        tags: ['scope:cart'],
+      {
+        type: 'lib',
+        name: 'lib3',
+        data: {
+          root: 'libs/nested-scope/lib3',
+          tags: ['scope:cart'],
+        },
       },
-    },
-    {
-      type: 'lib',
-      name: 'lib3',
-      data: {
-        root: 'libs/nested-scope/lib3',
-        tags: ['scope:cart'],
-      },
-    },
-  ],
-  groupByFolder: true,
-  workspaceLayout: { appsDir: 'apps', libsDir: 'libs' },
-  dependencies: {
-    app: [{ target: 'lib', source: 'app', type: 'direct' }],
-    lib: [
-      { target: 'lib2', source: 'lib', type: 'implicit' },
-      { target: 'lib3', source: 'lib', type: 'direct' },
     ],
-    lib2: [],
-    lib3: [],
+    groupByFolder: true,
+    workspaceLayout: { appsDir: 'apps', libsDir: 'libs' },
+    dependencies: {
+      app: [{ target: 'lib', source: 'app', type: 'direct' }],
+      lib: [
+        { target: 'lib2', source: 'lib', type: 'implicit' },
+        { target: 'lib3', source: 'lib', type: 'direct' },
+      ],
+      lib2: [],
+      lib3: [],
+    },
+    affectedProjectIds: [],
+    theme: 'light',
+    height: '450px',
+    enableTooltips: true,
   },
-  affectedProjectIds: [],
-  theme: 'light',
-  height: '450px',
-  enableTooltips: true,
 };

graph/ui-graph/src/lib/nx-task-graph-viz.stories.tsx

@@ -1,113 +1,112 @@
-import type { ComponentStory, ComponentMeta } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react';
 import { NxTaskGraphViz } from './nx-task-graph-viz';
 
-const Story: ComponentMeta<typeof NxTaskGraphViz> = {
+const meta: Meta<typeof NxTaskGraphViz> = {
   component: NxTaskGraphViz,
   title: 'NxTaskGraphViz',
 };
-export default Story;
 
-const Template: ComponentStory<typeof NxTaskGraphViz> = (args) => (
-  <NxTaskGraphViz {...args} />
-);
+export default meta;
+type Story = StoryObj<typeof NxTaskGraphViz>;
 
-export const Primary = Template.bind({});
-Primary.args = {
-  projects: [
-    {
-      type: 'app',
-      name: 'app',
-      data: {
-        tags: ['scope:cart'],
-        targets: {
-          build: {
-            executor: '@nrwl/js:tsc',
+export const Primary: Story = {
+  args: {
+    projects: [
+      {
+        type: 'app',
+        name: 'app',
+        data: {
+          tags: ['scope:cart'],
+          targets: {
+            build: {
+              executor: '@nrwl/js:tsc',
+            },
+          },
+          description: 'The app uses this task to build itself.',
+        },
+      } as any,
+      {
+        type: 'lib',
+        name: 'lib1',
+        data: {
+          tags: ['scope:cart'],
+          targets: {
+            build: {
+              executor: '@nrwl/js:tsc',
+            },
+          },
+          description: 'The lib uses this task to build itself.',
+        },
+      },
+      {
+        type: 'lib',
+        name: 'lib2',
+        data: {
+          root: 'libs/nested-scope/lib2',
+          tags: ['scope:cart'],
+          targets: {
+            build: {
+              executor: '@nrwl/js:tsc',
+            },
           },
         },
-        description: 'The app uses this task to build itself.',
-      },
-    },
-    {
-      type: 'lib',
-      name: 'lib1',
-      data: {
-        tags: ['scope:cart'],
-        targets: {
-          build: {
-            executor: '@nrwl/js:tsc',
-          },
-        },
-        description: 'The lib uses this task to build itself.',
-      },
-    },
-    {
-      type: 'lib',
-      name: 'lib2',
-      data: {
-        root: 'libs/nested-scope/lib2',
-        tags: ['scope:cart'],
-        targets: {
-          build: {
-            executor: '@nrwl/js:tsc',
-          },
-        },
-      },
-    },
-    {
-      type: 'lib',
-      name: 'lib3',
-      data: {
-        root: 'libs/nested-scope/lib3',
-        tags: ['scope:cart'],
-        targets: {
-          build: {
-            executor: '@nrwl/js:tsc',
-          },
-        },
-      },
-    },
-  ],
-  taskGraphs: {
-    'app:build': {
-      tasks: {
-        'app:build': {
-          id: 'app:build',
-          target: {
-            project: 'app',
-            target: 'build',
-          },
-        },
-        'lib1:build': {
-          id: 'lib1:build',
-          target: {
-            project: 'lib1',
-            target: 'build',
-          },
-        },
-        'lib2:build': {
-          id: 'lib2:build',
-          target: {
-            project: 'lib2',
-            target: 'build',
-          },
-        },
-        'lib3:build': {
-          id: 'lib3:build',
-          target: {
-            project: 'lib3',
-            target: 'build',
-          },
-        },
-      },
-      dependencies: {
-        'app:build': ['lib1:build', 'lib2:build', 'lib3:build'],
-        'lib1:build': [],
-        'lib2:build': [],
-        'lib3:build': [],
       },
+      {
+        type: 'lib',
+        name: 'lib3',
+        data: {
+          root: 'libs/nested-scope/lib3',
+          tags: ['scope:cart'],
+          targets: {
+            build: {
+              executor: '@nrwl/js:tsc',
+            },
+          },
+        },
+      },
+    ],
+    taskGraphs: {
+      'app:build': {
+        tasks: {
+          'app:build': {
+            id: 'app:build',
+            target: {
+              project: 'app',
+              target: 'build',
+            },
+          } as any,
+          'lib1:build': {
+            id: 'lib1:build',
+            target: {
+              project: 'lib1',
+              target: 'build',
+            },
+          } as any,
+          'lib2:build': {
+            id: 'lib2:build',
+            target: {
+              project: 'lib2',
+              target: 'build',
+            },
+          } as any,
+          'lib3:build': {
+            id: 'lib3:build',
+            target: {
+              project: 'lib3',
+              target: 'build',
+            },
+          } as any,
+        },
+        dependencies: {
+          'app:build': ['lib1:build', 'lib2:build', 'lib3:build'],
+          'lib1:build': [],
+          'lib2:build': [],
+          'lib3:build': [],
+        },
+      } as any,
     },
+    taskId: 'app:build',
+    height: '450px',
+    enableTooltips: true,
   },
-  taskId: 'app:build',
-  height: '450px',
-  enableTooltips: true,
 };

graph/ui-tooltips/src/lib/project-edge-tooltip.stories.tsx

@@ -1,33 +1,36 @@
-import { ComponentMeta, ComponentStory } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react';
 import {
   ProjectEdgeNodeTooltip,
   ProjectEdgeNodeTooltipProps,
 } from './project-edge-tooltip';
 import { Tooltip } from './tooltip';
 
-export default {
+const meta: Meta<typeof ProjectEdgeNodeTooltip> = {
   component: ProjectEdgeNodeTooltip,
   title: 'Tooltips/ProjectEdgeNodeTooltip',
-} as ComponentMeta<typeof ProjectEdgeNodeTooltip>;
-
-const Template: ComponentStory<typeof ProjectEdgeNodeTooltip> = (args) => {
-  return (
-    <div className="flex w-full justify-center">
-      <Tooltip
-        open={true}
-        openAction="manual"
-        content={<ProjectEdgeNodeTooltip {...args} />}
-      >
-        <p>Internal Reference</p>
-      </Tooltip>
-    </div>
-  );
 };
 
-export const Primary = Template.bind({});
-Primary.args = {
-  type: 'static',
-  target: 'lib1',
-  source: 'lib2',
-  fileDependencies: [{ fileName: 'some/file.ts' }],
-} as ProjectEdgeNodeTooltipProps;
+export default meta;
+type Story = StoryObj<typeof ProjectEdgeNodeTooltip>;
+
+export const Primary: Story = {
+  args: {
+    type: 'static',
+    target: 'lib1',
+    source: 'lib2',
+    fileDependencies: [{ fileName: 'some/file.ts' }],
+  } as ProjectEdgeNodeTooltipProps,
+  render: (args) => {
+    return (
+      <div className="flex w-full justify-center">
+        <Tooltip
+          open={true}
+          openAction="manual"
+          content={(<ProjectEdgeNodeTooltip {...args} />) as any}
+        >
+          <p>Internal Reference</p>
+        </Tooltip>
+      </div>
+    );
+  },
+};

graph/ui-tooltips/src/lib/project-node-tooltip.stories.tsx

@@ -1,27 +1,29 @@
-import { ComponentMeta, ComponentStory } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react';
 import {
   ProjectNodeToolTip,
   ProjectNodeToolTipProps,
 } from './project-node-tooltip';
 import { Tooltip } from './tooltip';
 
-export default {
+const meta: Meta<typeof ProjectNodeToolTip> = {
   component: ProjectNodeToolTip,
   title: 'Tooltips/ProjectNodeToolTip',
-} as ComponentMeta<typeof ProjectNodeToolTip>;
-
-const Template: ComponentStory<typeof ProjectNodeToolTip> = (args) => (
-  <div className="flex w-full justify-center">
-    <Tooltip open={true} content={<ProjectNodeToolTip {...args} />}>
-      <p>Internal Reference</p>
-    </Tooltip>
-  </div>
-);
-
-export const Primary = Template.bind({});
-const args: ProjectNodeToolTipProps = {
-  type: 'app',
-  tags: ['type:app', 'scope:store'],
-  id: 'store',
 };
-Primary.args = args;
+
+export default meta;
+type Story = StoryObj<typeof ProjectNodeToolTip>;
+
+export const Primary: Story = {
+  render: (args) => (
+    <div className="flex w-full justify-center">
+      <Tooltip open={true} content={(<ProjectNodeToolTip {...args} />) as any}>
+        <p>Internal Reference</p>
+      </Tooltip>
+    </div>
+  ),
+  args: {
+    type: 'app',
+    tags: ['type:app', 'scope:store'],
+    id: 'store',
+  } as ProjectNodeToolTipProps,
+};

graph/ui-tooltips/src/lib/task-node-tooltip.stories.tsx

@@ -1,23 +1,25 @@
-import type { ComponentMeta, ComponentStory } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react';
 import { TaskNodeTooltip } from './task-node-tooltip';
 import { Tooltip } from './tooltip';
 
-const Story: ComponentMeta<typeof TaskNodeTooltip> = {
+const meta: Meta<typeof TaskNodeTooltip> = {
   component: TaskNodeTooltip,
   title: 'Tooltips/TaskNodeTooltip',
 };
-export default Story;
 
-const Template: ComponentStory<typeof TaskNodeTooltip> = (args) => (
-  <div className="flex w-full justify-center">
-    <Tooltip open={true} content={<TaskNodeTooltip {...args} />}>
-      <p>Internal Reference</p>
-    </Tooltip>
-  </div>
-);
+export default meta;
+type Story = StoryObj<typeof TaskNodeTooltip>;
 
-export const Primary = Template.bind({});
-Primary.args = {
-  id: 'my-lib:build',
-  executor: '@nrwl/webpack:webpack',
+export const Primary: Story = {
+  args: {
+    id: 'my-lib:build',
+    executor: '@nrwl/webpack:webpack',
+  },
+  render: (args) => (
+    <div className="flex w-full justify-center">
+      <Tooltip open={true} content={(<TaskNodeTooltip {...args} />) as any}>
+        <p>Internal Reference</p>
+      </Tooltip>
+    </div>
+  ),
 };

package.json

@@ -88,11 +88,11 @@
     "@rollup/plugin-url": "^7.0.0",
     "@schematics/angular": "~16.1.0",
     "@side/jest-runtime": "^1.1.0",
-    "@storybook/addon-essentials": "7.1.1",
-    "@storybook/core-server": "7.1.1",
-    "@storybook/react": "7.1.1",
-    "@storybook/react-webpack5": "7.1.1",
-    "@storybook/types": "^7.0.24",
+    "@storybook/addon-essentials": "^7.1.1",
+    "@storybook/core-server": "^7.1.1",
+    "@storybook/react": "^7.1.1",
+    "@storybook/react-webpack5": "^7.1.1",
+    "@storybook/types": "^7.1.1",
     "@supabase/supabase-js": "^2.26.0",
     "@svgr/rollup": "^8.0.1",
     "@svgr/webpack": "^8.0.1",

pnpm-lock.yaml

@@ -337,20 +337,20 @@ devDependencies:
     specifier: ^1.1.0
     version: 1.1.0(@jest/transform@29.5.0)(jest-runtime@29.5.0)(jest@29.4.3)
   '@storybook/addon-essentials':
-    specifier: 7.1.1
+    specifier: ^7.1.1
     version: 7.1.1(react-dom@18.2.0)(react@18.2.0)
   '@storybook/core-server':
-    specifier: 7.1.1
+    specifier: ^7.1.1
     version: 7.1.1
   '@storybook/react':
-    specifier: 7.1.1
+    specifier: ^7.1.1
     version: 7.1.1(react-dom@18.2.0)(react@18.2.0)(typescript@5.1.3)
   '@storybook/react-webpack5':
-    specifier: 7.1.1
+    specifier: ^7.1.1
     version: 7.1.1(@babel/core@7.22.9)(@swc/core@1.3.51)(@swc/helpers@0.5.0)(esbuild@0.17.5)(react-dom@18.2.0)(react@18.2.0)(typescript@5.1.3)(webpack-dev-server@4.11.1)
   '@storybook/types':
-    specifier: ^7.0.24
-    version: 7.0.24
+    specifier: ^7.1.1
+    version: 7.1.1
   '@supabase/supabase-js':
     specifier: ^2.26.0
     version: 2.26.0
@@ -9097,10 +9097,6 @@ packages:
       '@storybook/client-logger': 7.1.1
     dev: true
 
-  /@storybook/channels@7.0.24:
-    resolution: {integrity: sha512-NZVLwMhtzy6cZrNRjshFvMAD9mQTmJDNwhohodSkM/YFCDVFhmxQk9tgizVGh9MwY3CYGJ1SI96RUejGosb49Q==}
-    dev: true
-
   /@storybook/channels@7.0.7:
     resolution: {integrity: sha512-Om4ovBLNw8pVrBu83MpOKgAuGO9Dpr1Coh2qp8t64WRPkejX1mxOY9IgH723//zH3igx8LCkf9rvBvcrsyaScQ==}
     dev: true
@@ -9687,15 +9683,6 @@ packages:
       react-dom: 18.2.0(react@18.2.0)
     dev: true
 
-  /@storybook/types@7.0.24:
-    resolution: {integrity: sha512-SZh/XBHP1TT5bmEk0W52nT0v6fUnYwmZVls3da5noutdgOAiwL7TANtl41XrNjG+UDr8x0OE3PVVJi+LhwUaNA==}
-    dependencies:
-      '@storybook/channels': 7.0.24
-      '@types/babel__core': 7.1.20
-      '@types/express': 4.17.14
-      file-system-cache: 2.3.0
-    dev: true
-
   /@storybook/types@7.0.7:
     resolution: {integrity: sha512-v9piuwp8FvTiHXIOOi5lEyTEJKhnbcbhVxgJ3VFhhXYFd0DTz6Bst0XIIgkgs21ITb3xhkfPbCRUueMcbXO1MA==}
     dependencies:
@@ -11560,7 +11547,7 @@ packages:
   /acorn-globals@7.0.1:
     resolution: {integrity: sha512-umOSDSDrfHbTNPuNpC2NSnnA3LUrqpevPb4T9jRx4MagXNS0rs+gwiTcAvqCRmsD6utzsrzNt+ebm00SNWiC3Q==}
     dependencies:
-      acorn: 8.8.2
+      acorn: 8.10.0
       acorn-walk: 8.2.0
     dev: true
 
@@ -11612,7 +11599,6 @@ packages:
     resolution: {integrity: sha512-F0SAmZ8iUtS//m8DmCTA0jlh6TDKkHQyK6xc6V4KDTyZKA9dnvX9/3sRTVQrWm79glUAZbnmmNcdYwUIHWVybw==}
     engines: {node: '>=0.4.0'}
     hasBin: true
-    dev: true
 
   /acorn@8.8.1:
     resolution: {integrity: sha512-7zFpHzhnqYKrkYdUjF1HI1bzd0VygEGX8lFk4k5zVMqHEoES+P+7TKI+EvLO9WVMJ8eekdO0aDEK044xTXwPPA==}
@@ -18878,7 +18864,7 @@ packages:
         optional: true
     dependencies:
       abab: 2.0.6
-      acorn: 8.8.2
+      acorn: 8.10.0
       acorn-globals: 6.0.0
       cssom: 0.4.4
       cssstyle: 2.3.0
@@ -20646,7 +20632,7 @@ packages:
   /mlly@1.2.0:
     resolution: {integrity: sha512-+c7A3CV0KGdKcylsI6khWyts/CYrGTrRVo4R/I7u/cUsy0Conxa6LUhiEzVKIw14lc2L5aiO4+SeVe4TeGRKww==}
     dependencies:
-      acorn: 8.8.2
+      acorn: 8.10.0
       pathe: 1.1.0
       pkg-types: 1.0.3
       ufo: 1.1.2