From d32337bcd50cf9ace0e3048e675f6c81beb86f98 Mon Sep 17 00:00:00 2001
From: Will Eastcott <will@playcanvas.com>
Date: Sun, 3 Sep 2023 16:15:35 +0100
Subject: [PATCH] Update Storybook Story format to latest (#329)

* Update Storybook Story format to latest

* Lint fixes
---
 .../ArrayInput/component.stories.tsx          | 37 +++++++++++-----
 .../BooleanInput/component.stories.tsx        | 17 +++++---
 src/components/Button/component.stories.tsx   | 22 ++++++----
 src/components/Canvas/component.stories.tsx   | 16 +++++--
 src/components/Code/component.stories.tsx     | 15 +++++--
 .../ColorPicker/component.stories.tsx         | 20 +++++++--
 .../Container/component.stories.tsx           | 20 +++++----
 src/components/Divider/component.stories.tsx  | 15 +++++--
 .../GradientPicker/component.stories.tsx      | 33 +++++---------
 src/components/GridView/component.stories.tsx | 14 ++++--
 src/components/InfoBox/component.stories.tsx  | 15 +++++--
 src/components/Label/component.stories.tsx    | 15 +++++--
 .../LabelGroup/component.stories.tsx          | 21 ++++++---
 src/components/Menu/component.stories.tsx     | 43 +++++++++++--------
 .../NumericInput/component.stories.tsx        | 17 +++++---
 src/components/Overlay/component.stories.tsx  | 16 +++++--
 src/components/Panel/component.stories.tsx    | 21 ++++++---
 src/components/Progress/component.stories.tsx | 15 +++++--
 .../RadioButton/component.stories.tsx         | 17 +++++---
 .../SelectInput/component.stories.tsx         | 17 +++++---
 .../SliderInput/component.stories.tsx         | 17 +++++---
 src/components/Spinner/component.stories.tsx  | 16 +++++--
 .../TextAreaInput/component.stories.tsx       | 17 +++++---
 .../TextInput/component.stories.tsx           | 17 +++++---
 src/components/TreeView/component.stories.tsx | 14 ++++--
 .../VectorInput/component.stories.tsx         | 25 ++++++++---
 26 files changed, 348 insertions(+), 164 deletions(-)

diff --git a/src/components/ArrayInput/component.stories.tsx b/src/components/ArrayInput/component.stories.tsx
index 07757964..acf32bd1 100644
--- a/src/components/ArrayInput/component.stories.tsx
+++ b/src/components/ArrayInput/component.stories.tsx
@@ -1,22 +1,39 @@
 import * as React from 'react';
+import type { Meta, StoryObj } from '@storybook/react';
+import { action } from '@storybook/addon-actions';
+
+import ArrayInput from './component';
 
-import Component from './component';
 import '../../scss/index.js';
-import { action } from '@storybook/addon-actions';
 
-export default {
+const meta: Meta<typeof ArrayInput> = {
     title: 'Components/ArrayInput',
-    component: Component
+    component: ArrayInput
 };
 
-export const String = args => <Component type='string' onChange={action('value-change')} value={[['foobar']]} {...args} />;
+export default meta;
+type Story = StoryObj<typeof ArrayInput>;
+
+export const String: Story = {
+    render: args => <ArrayInput type='string' onChange={action('value-change')} value={[['foobar']]} {...args} />
+};
 
-export const Number = args => <Component type="number" onChange={action('value-change')} value={[[0]]} {...args} />;
+export const Number: Story = {
+    render: args => <ArrayInput type="number" onChange={action('value-change')} value={[[0]]} {...args} />
+};
 
-export const Boolean = args => <Component type='boolean' onChange={action('value-change')} value={[[true]]} {...args} />;
+export const Boolean: Story = {
+    render: args => <ArrayInput type='boolean' onChange={action('value-change')} value={[[true]]} {...args} />
+};
 
-export const Vec2 = args => <Component type='vec2' elementArgs={{ dimensions: 2 }} onChange={action('value-change')} value={[[1, 2]]} {...args} />;
+export const Vec2: Story = {
+    render: args => <ArrayInput type='vec2' elementArgs={{ dimensions: 2 }} onChange={action('value-change')} value={[[1, 2]]} {...args} />
+};
 
-export const Vec3 = args => <Component type='vec3' elementArgs={{ dimensions: 3 }} onChange={action('value-change')} value={[[1, 2, 3]]} {...args} />;
+export const Vec3: Story = {
+    render: args => <ArrayInput type='vec3' elementArgs={{ dimensions: 3 }} onChange={action('value-change')} value={[[1, 2, 3]]} {...args} />
+};
 
-export const Vec4 = args => <Component type='vec4' elementArgs={{ dimensions: 4 }} onChange={action('value-change')} value={[[1, 2, 3, 4]]} {...args} />;
+export const Vec4: Story = {
+    render: args => <ArrayInput type='vec4' elementArgs={{ dimensions: 4 }} onChange={action('value-change')} value={[[1, 2, 3, 4]]} {...args} />
+};
diff --git a/src/components/BooleanInput/component.stories.tsx b/src/components/BooleanInput/component.stories.tsx
index 5c2ce7e3..54d717f2 100644
--- a/src/components/BooleanInput/component.stories.tsx
+++ b/src/components/BooleanInput/component.stories.tsx
@@ -1,12 +1,19 @@
 import * as React from 'react';
+import type { Meta, StoryObj } from '@storybook/react';
+import { action } from '@storybook/addon-actions';
+
+import BooleanInput from './component';
 
-import Component from './component';
 import '../../scss/index.js';
-import { action } from '@storybook/addon-actions';
 
-export default {
+const meta: Meta<typeof BooleanInput> = {
     title: 'Components/BooleanInput',
-    component: Component
+    component: BooleanInput
 };
 
-export const Main = args => <Component onChange={action('toggle')} {...args} />;
+export default meta;
+type Story = StoryObj<typeof BooleanInput>;
+
+export const Main: Story = {
+    render: args => <BooleanInput onChange={action('toggle')} {...args} />
+};
diff --git a/src/components/Button/component.stories.tsx b/src/components/Button/component.stories.tsx
index 267a6c34..fd987ee9 100644
--- a/src/components/Button/component.stories.tsx
+++ b/src/components/Button/component.stories.tsx
@@ -1,17 +1,23 @@
 import * as React from 'react';
-import Component from './component';
-import '../../scss/index.js';
+import type { Meta, StoryObj } from '@storybook/react';
 import { action } from '@storybook/addon-actions';
 
-export default {
+import Button from './component';
+
+import '../../scss/index.js';
+
+const meta: Meta<typeof Button> = {
     title: 'Components/Button',
-    component: Component
+    component: Button
 };
 
-export const Text = (args) => {
-    return <Component text='Hello World' onClick={action('button-click')} {...args} />;
+export default meta;
+type Story = StoryObj<typeof Button>;
+
+export const Text: Story = {
+    render: args => <Button text='Hello World' onClick={action('button-click')} {...args} />
 };
 
-export const IconAndText = (args) => {
-    return <Component icon="E401" text='Hello World' onClick={action('button-click')} {...args} />;
+export const TextAndIcon: Story = {
+    render: args => <Button text='Hello World' icon='E401' onClick={action('button-click')} {...args} />
 };
diff --git a/src/components/Canvas/component.stories.tsx b/src/components/Canvas/component.stories.tsx
index 8f18a0c5..b438196c 100644
--- a/src/components/Canvas/component.stories.tsx
+++ b/src/components/Canvas/component.stories.tsx
@@ -1,10 +1,18 @@
 import * as React from 'react';
+import type { Meta, StoryObj } from '@storybook/react';
 
-import CanvasComponent from './component';
+import Canvas from './component';
 
-export default {
+import '../../scss/index.js';
+
+const meta: Meta<typeof Canvas> = {
     title: 'Components/Canvas',
-    component: CanvasComponent
+    component: Canvas
 };
 
-export const Main = args => <CanvasComponent {...args} />;
+export default meta;
+type Story = StoryObj<typeof Canvas>;
+
+export const Main: Story = {
+    render: args => <Canvas {...args} />
+};
diff --git a/src/components/Code/component.stories.tsx b/src/components/Code/component.stories.tsx
index 51efcd94..b5eec7c4 100644
--- a/src/components/Code/component.stories.tsx
+++ b/src/components/Code/component.stories.tsx
@@ -1,11 +1,18 @@
 import * as React from 'react';
+import type { Meta, StoryObj } from '@storybook/react';
+
+import Code from './component';
 
-import Component from './component';
 import '../../scss/index.js';
 
-export default {
+const meta: Meta<typeof Code> = {
     title: 'Components/Code',
-    component: Component
+    component: Code
 };
 
-export const Main = args => <Component {...args} />;
+export default meta;
+type Story = StoryObj<typeof Code>;
+
+export const Main: Story = {
+    render: args => <Code {...args} />
+};
diff --git a/src/components/ColorPicker/component.stories.tsx b/src/components/ColorPicker/component.stories.tsx
index 1585b463..bda761bf 100644
--- a/src/components/ColorPicker/component.stories.tsx
+++ b/src/components/ColorPicker/component.stories.tsx
@@ -1,10 +1,22 @@
 import * as React from 'react';
+import type { Meta, StoryObj } from '@storybook/react';
 
-import ColorPickerComponent from './component';
+import ColorPicker from './component';
 
-export default {
+import '../../scss/index.js';
+
+const meta: Meta<typeof ColorPicker> = {
     title: 'Components/ColorPicker',
-    component: ColorPickerComponent
+    component: ColorPicker
 };
 
-export const Main = args => <ColorPickerComponent value={[255, 0, 0, 1]} {...args} />;
+export default meta;
+type Story = StoryObj<typeof ColorPicker>;
+
+export const RGB: Story = {
+    render: args => <ColorPicker value={[255, 0, 0]} {...args} />
+};
+
+export const RGBA: Story = {
+    render: args => <ColorPicker channels={4} value={[0, 255, 0, 1]} {...args} />
+};
diff --git a/src/components/Container/component.stories.tsx b/src/components/Container/component.stories.tsx
index 50a94348..084485fc 100644
--- a/src/components/Container/component.stories.tsx
+++ b/src/components/Container/component.stories.tsx
@@ -1,18 +1,22 @@
 import * as React from 'react';
+import type { Meta, StoryObj } from '@storybook/react';
 
 import Container from './component';
 import Label from '../Label/component';
 
-export default {
+import '../../scss/index.js';
+
+const meta: Meta<typeof Container> = {
     title: 'Components/Container',
     component: Container
 };
 
-export const Main = (props) => {
-    return (
-        <Container {...props}>
-            <Label text="This is a container with..." />
-            <Label text="two labels inside" />
-        </Container>
-    );
+export default meta;
+type Story = StoryObj<typeof Container>;
+
+export const Main: Story = {
+    render: args => <Container {...args}>
+        <Label text="This is a container with..." />
+        <Label text="two labels inside" />
+    </Container>
 };
diff --git a/src/components/Divider/component.stories.tsx b/src/components/Divider/component.stories.tsx
index 73d01a3d..0f7e6de2 100644
--- a/src/components/Divider/component.stories.tsx
+++ b/src/components/Divider/component.stories.tsx
@@ -1,11 +1,18 @@
 import * as React from 'react';
+import type { Meta, StoryObj } from '@storybook/react';
+
+import Divider from './component';
 
-import Component from './component';
 import '../../scss/index.js';
 
-export default {
+const meta: Meta<typeof Divider> = {
     title: 'Components/Divider',
-    component: Component
+    component: Divider
 };
 
-export const Main = args => <Component {...args} />;
+export default meta;
+type Story = StoryObj<typeof Divider>;
+
+export const Main: Story = {
+    render: args => <Divider {...args} />
+};
diff --git a/src/components/GradientPicker/component.stories.tsx b/src/components/GradientPicker/component.stories.tsx
index 0a08dfd8..67e7255f 100644
--- a/src/components/GradientPicker/component.stories.tsx
+++ b/src/components/GradientPicker/component.stories.tsx
@@ -1,29 +1,18 @@
 import * as React from 'react';
+import type { Meta, StoryObj } from '@storybook/react';
 
-import GradientPickerComponent from './component';
+import GradientPicker from './component';
 
-const defaultValue = {
-    "type": 4,
-    "keys": [
-        [
-            0,
-            0.9921568627450981
-        ],
-        [
-            0,
-            0
-        ],
-        [
-            0,
-            0
-        ]
-    ],
-    "betweenCurves": false
-};
+import '../../scss/index.js';
 
-export default {
+const meta: Meta<typeof GradientPicker> = {
     title: 'Components/GradientPicker',
-    component: GradientPickerComponent
+    component: GradientPicker
 };
 
-export const Main = args => <GradientPickerComponent value = {defaultValue} {...args} />;
+export default meta;
+type Story = StoryObj<typeof GradientPicker>;
+
+export const Main: Story = {
+    render: args => <GradientPicker {...args} />
+};
diff --git a/src/components/GridView/component.stories.tsx b/src/components/GridView/component.stories.tsx
index 6762fb37..17a63d29 100644
--- a/src/components/GridView/component.stories.tsx
+++ b/src/components/GridView/component.stories.tsx
@@ -1,15 +1,21 @@
 import * as React from 'react';
+import type { Meta, StoryObj } from '@storybook/react';
 
 import GridView from './component';
 import GridViewItem from '../GridViewItem/component';
 
-export default {
+import '../../scss/index.js';
+
+const meta: Meta<typeof GridView> = {
     title: 'Components/GridView',
     component: GridView
 };
 
-export const Main = args => (
-    <GridView {...args}>
+export default meta;
+type Story = StoryObj<typeof GridView>;
+
+export const Main: Story = {
+    render: args => <GridView {...args}>
         <GridViewItem text='Item 1' />
         <GridViewItem text='Item 2' />
         <GridViewItem text='Item 3' />
@@ -20,4 +26,4 @@ export const Main = args => (
         <GridViewItem text='Item 8' />
         <GridViewItem text='Item 9' />
     </GridView>
-);
+};
diff --git a/src/components/InfoBox/component.stories.tsx b/src/components/InfoBox/component.stories.tsx
index 2a6c69ee..9b084f5e 100644
--- a/src/components/InfoBox/component.stories.tsx
+++ b/src/components/InfoBox/component.stories.tsx
@@ -1,11 +1,18 @@
 import * as React from 'react';
+import type { Meta, StoryObj } from '@storybook/react';
+
+import InfoBox from './component';
 
-import Component from './component';
 import '../../scss/index.js';
 
-export default {
+const meta: Meta<typeof InfoBox> = {
     title: 'Components/InfoBox',
-    component: Component
+    component: InfoBox
 };
 
-export const Main = args => <Component {...args} icon='E401' title='Foo' text='Bar' />;
+export default meta;
+type Story = StoryObj<typeof InfoBox>;
+
+export const Main: Story = {
+    render: args => <InfoBox {...args} icon='E401' title='Foo' text='Bar' />
+};
diff --git a/src/components/Label/component.stories.tsx b/src/components/Label/component.stories.tsx
index 2186d795..21a4ad39 100644
--- a/src/components/Label/component.stories.tsx
+++ b/src/components/Label/component.stories.tsx
@@ -1,11 +1,18 @@
 import * as React from 'react';
+import type { Meta, StoryObj } from '@storybook/react';
+
+import Label from './component';
 
-import Component from './component';
 import '../../scss/index.js';
 
-export default {
+const meta: Meta<typeof Label> = {
     title: 'Components/Label',
-    component: Component
+    component: Label
 };
 
-export const Main = args => <Component {...args} text='Foo Bar' />;
+export default meta;
+type Story = StoryObj<typeof Label>;
+
+export const Main: Story = {
+    render: args => <Label {...args} text='Foo Bar' />
+};
diff --git a/src/components/LabelGroup/component.stories.tsx b/src/components/LabelGroup/component.stories.tsx
index 65bcc570..8340f0a0 100644
--- a/src/components/LabelGroup/component.stories.tsx
+++ b/src/components/LabelGroup/component.stories.tsx
@@ -1,14 +1,21 @@
 import * as React from 'react';
+import type { Meta, StoryObj } from '@storybook/react';
 
-import Component from './component';
-import '../../scss/index.js';
+import LabelGroup from './component';
 import TextInput from '../TextInput/component';
 
-export default {
+import '../../scss/index.js';
+
+const meta: Meta<typeof LabelGroup> = {
     title: 'Components/LabelGroup',
-    component: Component
+    component: LabelGroup
 };
 
-export const Main = args => <Component {...args} text='A field: '>
-    <TextInput placeholder='foobar' />
-</Component>;
+export default meta;
+type Story = StoryObj<typeof LabelGroup>;
+
+export const Main: Story = {
+    render: args => <LabelGroup {...args} text='A field:'>
+        <TextInput placeholder='foobar' />
+    </LabelGroup>
+};
diff --git a/src/components/Menu/component.stories.tsx b/src/components/Menu/component.stories.tsx
index 04aec8c5..98e22fa7 100644
--- a/src/components/Menu/component.stories.tsx
+++ b/src/components/Menu/component.stories.tsx
@@ -1,24 +1,29 @@
 import * as React from 'react';
+import type { Meta, StoryObj } from '@storybook/react';
+import { action } from '@storybook/addon-actions';
 
-import Component from './component';
-import '../../scss/index.js';
+import Menu from './component';
+import MenuElement from '../Menu';
 import Container from '../Container/component';
 import Label from '../Label/component';
 import LabelElement from '../Label';
-import Menu from '../Menu';
-import { action } from '@storybook/addon-actions';
 
-export default {
+import '../../scss/index.js';
+
+const meta: Meta<typeof Menu> = {
     title: 'Components/Menu',
-    component: Component
+    component: Menu
 };
 
+export default meta;
+type Story = StoryObj<typeof Menu>;
+
 window.addEventListener('contextmenu', (evt: MouseEvent) => {
     // @ts-ignore
     if (evt.target.ui instanceof LabelElement) {
         const element = document.querySelector('.pcui-menu');
         if (element) {
-            const menu = element.ui as Menu;
+            const menu = element.ui as MenuElement;
             evt.stopPropagation();
             evt.preventDefault();
 
@@ -28,14 +33,16 @@ window.addEventListener('contextmenu', (evt: MouseEvent) => {
     }
 });
 
-export const Main = args => <Container>
-    <Component {...args} hidden={true} items={[
-        { text: 'Hello', onSelect: action('Hello') },
-        { text: 'World',
-            items: [
-                { text: 'Foo', onSelect: action('World -> Foo') },
-                { text: 'Bar', onSelect: action('World -> Bar'), onIsEnabled: () => false }
-            ] }
-    ]}/>
-    <Label text='This label can be right clicked to show a context menu'/>
-</Container>;
+export const Main: Story = {
+    render: args => <Container>
+        <Menu {...args} hidden={true} items={[
+            { text: 'Hello', onSelect: action('Hello') },
+            { text: 'World',
+                items: [
+                    { text: 'Foo', onSelect: action('World -> Foo') },
+                    { text: 'Bar', onSelect: action('World -> Bar'), onIsEnabled: () => false }
+                ] }
+        ]}/>
+        <Label text='This label can be right clicked to show a context menu'/>
+    </Container>
+};
diff --git a/src/components/NumericInput/component.stories.tsx b/src/components/NumericInput/component.stories.tsx
index 47034341..aa422c6e 100644
--- a/src/components/NumericInput/component.stories.tsx
+++ b/src/components/NumericInput/component.stories.tsx
@@ -1,12 +1,19 @@
 import * as React from 'react';
+import type { Meta, StoryObj } from '@storybook/react';
+import { action } from '@storybook/addon-actions';
+
+import NumericInput from './component';
 
-import Component from './component';
 import '../../scss/index.js';
-import { action } from '@storybook/addon-actions';
 
-export default {
+const meta: Meta<typeof NumericInput> = {
     title: 'Components/NumericInput',
-    component: Component
+    component: NumericInput
 };
 
-export const Main = args => <Component onChange={action('value-change')} {...args} />;
+export default meta;
+type Story = StoryObj<typeof NumericInput>;
+
+export const Main: Story = {
+    render: args => <NumericInput onChange={action('value-change')} {...args} />
+};
diff --git a/src/components/Overlay/component.stories.tsx b/src/components/Overlay/component.stories.tsx
index 4a14244b..4742daeb 100644
--- a/src/components/Overlay/component.stories.tsx
+++ b/src/components/Overlay/component.stories.tsx
@@ -1,10 +1,18 @@
 import * as React from 'react';
-import Component from './component';
+import type { Meta, StoryObj } from '@storybook/react';
+
+import Overlay from './component';
+
 import '../../scss/index.js';
 
-export default {
+const meta: Meta<typeof Overlay> = {
     title: 'Components/Overlay',
-    component: Component
+    component: Overlay
 };
 
-export const Main = args => <Component {...args} />;
+export default meta;
+type Story = StoryObj<typeof Overlay>;
+
+export const Main: Story = {
+    render: args => <Overlay {...args} />
+};
diff --git a/src/components/Panel/component.stories.tsx b/src/components/Panel/component.stories.tsx
index e1c32ef2..2649c044 100644
--- a/src/components/Panel/component.stories.tsx
+++ b/src/components/Panel/component.stories.tsx
@@ -1,14 +1,21 @@
 import * as React from 'react';
+import type { Meta, StoryObj } from '@storybook/react';
 
-import Component from './component';
-import '../../scss/index.js';
+import Panel from './component';
 import Label from '../Label/component';
 
-export default {
+import '../../scss/index.js';
+
+const meta: Meta<typeof Panel> = {
     title: 'Components/Panel',
-    component: Component
+    component: Panel
 };
 
-export const Main = args => <Component headerText='Foo Bar' collapsible {...args}>
-    <Label text='Hello World' />
-</Component>;
+export default meta;
+type Story = StoryObj<typeof Panel>;
+
+export const Main: Story = {
+    render: args => <Panel headerText='Foo Bar' collapsible {...args}>
+        <Label text='Hello World' />
+    </Panel>
+};
diff --git a/src/components/Progress/component.stories.tsx b/src/components/Progress/component.stories.tsx
index 4d21d329..9a8bbabb 100644
--- a/src/components/Progress/component.stories.tsx
+++ b/src/components/Progress/component.stories.tsx
@@ -1,11 +1,18 @@
 import * as React from 'react';
+import type { Meta, StoryObj } from '@storybook/react';
+
+import Progress from './component';
 
-import Component from './component';
 import '../../scss/index.js';
 
-export default {
+const meta: Meta<typeof Progress> = {
     title: 'Components/Progress',
-    component: Component
+    component: Progress
 };
 
-export const Main = args => <Component {...args} />;
+export default meta;
+type Story = StoryObj<typeof Progress>;
+
+export const Main: Story = {
+    render: args => <Progress value={50} {...args} />
+};
diff --git a/src/components/RadioButton/component.stories.tsx b/src/components/RadioButton/component.stories.tsx
index b03722e3..bc18e627 100644
--- a/src/components/RadioButton/component.stories.tsx
+++ b/src/components/RadioButton/component.stories.tsx
@@ -1,12 +1,19 @@
 import * as React from 'react';
+import type { Meta, StoryObj } from '@storybook/react';
+import { action } from '@storybook/addon-actions';
+
+import RadioButton from './component';
 
-import Component from './component';
 import '../../scss/index.js';
-import { action } from '@storybook/addon-actions';
 
-export default {
+const meta: Meta<typeof RadioButton> = {
     title: 'Components/RadioButton',
-    component: Component
+    component: RadioButton
 };
 
-export const Main = args => <Component onChange={action('select')} {...args} />;
+export default meta;
+type Story = StoryObj<typeof RadioButton>;
+
+export const Main: Story = {
+    render: args => <RadioButton onChange={action('value-change')} {...args} />
+};
diff --git a/src/components/SelectInput/component.stories.tsx b/src/components/SelectInput/component.stories.tsx
index ca7ef2c4..4e55e449 100644
--- a/src/components/SelectInput/component.stories.tsx
+++ b/src/components/SelectInput/component.stories.tsx
@@ -1,12 +1,19 @@
 import * as React from 'react';
+import type { Meta, StoryObj } from '@storybook/react';
+import { action } from '@storybook/addon-actions';
+
+import SelectInput from './component';
 
-import Component from './component';
 import '../../scss/index.js';
-import { action } from '@storybook/addon-actions';
 
-export default {
+const meta: Meta<typeof SelectInput> = {
     title: 'Components/SelectInput',
-    component: Component
+    component: SelectInput
 };
 
-export const Main = args => <Component onChange={action('value-change')} {...args} />;
+export default meta;
+type Story = StoryObj<typeof SelectInput>;
+
+export const Main: Story = {
+    render: args => <SelectInput onChange={action('value-change')} {...args} />
+};
diff --git a/src/components/SliderInput/component.stories.tsx b/src/components/SliderInput/component.stories.tsx
index 5f698ab6..c6038c1d 100644
--- a/src/components/SliderInput/component.stories.tsx
+++ b/src/components/SliderInput/component.stories.tsx
@@ -1,12 +1,19 @@
 import * as React from 'react';
+import type { Meta, StoryObj } from '@storybook/react';
+import { action } from '@storybook/addon-actions';
+
+import SliderInput from './component';
 
-import Component from './component';
 import '../../scss/index.js';
-import { action } from '@storybook/addon-actions';
 
-export default {
+const meta: Meta<typeof SliderInput> = {
     title: 'Components/SliderInput',
-    component: Component
+    component: SliderInput
 };
 
-export const Main = args => <Component onChange={action('value-change')} {...args} />;
+export default meta;
+type Story = StoryObj<typeof SliderInput>;
+
+export const Main: Story = {
+    render: args => <SliderInput onChange={action('value-change')} {...args} />
+};
diff --git a/src/components/Spinner/component.stories.tsx b/src/components/Spinner/component.stories.tsx
index fe65270d..1dd1885b 100644
--- a/src/components/Spinner/component.stories.tsx
+++ b/src/components/Spinner/component.stories.tsx
@@ -1,10 +1,18 @@
 import * as React from 'react';
+import type { Meta, StoryObj } from '@storybook/react';
 
-import SpinnerComponent from './component';
+import Spinner from './component';
 
-export default {
+import '../../scss/index.js';
+
+const meta: Meta<typeof Spinner> = {
     title: 'Components/Spinner',
-    component: SpinnerComponent
+    component: Spinner
 };
 
-export const Main = args => <SpinnerComponent {...args} />;
+export default meta;
+type Story = StoryObj<typeof Spinner>;
+
+export const Main: Story = {
+    render: args => <Spinner {...args} />
+};
diff --git a/src/components/TextAreaInput/component.stories.tsx b/src/components/TextAreaInput/component.stories.tsx
index a20caeda..a4dc12c3 100644
--- a/src/components/TextAreaInput/component.stories.tsx
+++ b/src/components/TextAreaInput/component.stories.tsx
@@ -1,12 +1,19 @@
 import * as React from 'react';
+import type { Meta, StoryObj } from '@storybook/react';
+import { action } from '@storybook/addon-actions';
+
+import TextAreaInput from './component';
 
-import Component from './component';
 import '../../scss/index.js';
-import { action } from '@storybook/addon-actions';
 
-export default {
+const meta: Meta<typeof TextAreaInput> = {
     title: 'Components/TextAreaInput',
-    component: Component
+    component: TextAreaInput
 };
 
-export const Main = args => <Component onChange={action('value-change')} {...args} />;
+export default meta;
+type Story = StoryObj<typeof TextAreaInput>;
+
+export const Main: Story = {
+    render: args => <TextAreaInput onChange={action('value-change')} {...args} />
+};
diff --git a/src/components/TextInput/component.stories.tsx b/src/components/TextInput/component.stories.tsx
index ca6b1589..d8bd0555 100644
--- a/src/components/TextInput/component.stories.tsx
+++ b/src/components/TextInput/component.stories.tsx
@@ -1,12 +1,19 @@
 import * as React from 'react';
+import type { Meta, StoryObj } from '@storybook/react';
+import { action } from '@storybook/addon-actions';
+
+import TextInput from './component';
 
-import Component from './component';
 import '../../scss/index.js';
-import { action } from '@storybook/addon-actions';
 
-export default {
+const meta: Meta<typeof TextInput> = {
     title: 'Components/TextInput',
-    component: Component
+    component: TextInput
 };
 
-export const Main = args => <Component onChange={action('value-change')} {...args} />;
+export default meta;
+type Story = StoryObj<typeof TextInput>;
+
+export const Main: Story = {
+    render: args => <TextInput onChange={action('value-change')} {...args} />
+};
diff --git a/src/components/TreeView/component.stories.tsx b/src/components/TreeView/component.stories.tsx
index 7f6ab7b6..987ac6e6 100644
--- a/src/components/TreeView/component.stories.tsx
+++ b/src/components/TreeView/component.stories.tsx
@@ -1,15 +1,21 @@
 import * as React from 'react';
+import type { Meta, StoryObj } from '@storybook/react';
 
 import TreeView from './component';
 import TreeViewItem from '../TreeViewItem/component';
 
-export default {
+import '../../scss/index.js';
+
+const meta: Meta<typeof TreeView> = {
     title: 'Components/TreeView',
     component: TreeView
 };
 
-export const Main = args => (
-    <TreeView {...args}>
+export default meta;
+type Story = StoryObj<typeof TreeView>;
+
+export const Main: Story = {
+    render: args => <TreeView {...args}>
         <TreeViewItem text='Item 1'>
             <TreeViewItem text='Item 11' icon='E401' />
             <TreeViewItem text='Item 12' />
@@ -22,4 +28,4 @@ export const Main = args => (
             </TreeViewItem>
         </TreeViewItem>
     </TreeView>
-);
+};
diff --git a/src/components/VectorInput/component.stories.tsx b/src/components/VectorInput/component.stories.tsx
index 40101902..fac32bde 100644
--- a/src/components/VectorInput/component.stories.tsx
+++ b/src/components/VectorInput/component.stories.tsx
@@ -1,12 +1,27 @@
 import * as React from 'react';
+import type { Meta, StoryObj } from '@storybook/react';
+import { action } from '@storybook/addon-actions';
+
+import VectorInput from './component';
 
-import Component from './component';
 import '../../scss/index.js';
-import { action } from '@storybook/addon-actions';
 
-export default {
+const meta: Meta<typeof VectorInput> = {
     title: 'Components/VectorInput',
-    component: Component
+    component: VectorInput
 };
 
-export const Main = args => <Component onChange={action('value-change')} {...args} />;
+export default meta;
+type Story = StoryObj<typeof VectorInput>;
+
+export const Vec2: Story = {
+    render: args => <VectorInput dimensions={2} onChange={action('value-change')} {...args} />
+};
+
+export const Vec3: Story = {
+    render: args => <VectorInput onChange={action('value-change')} {...args} />
+};
+
+export const Vec4: Story = {
+    render: args => <VectorInput dimensions={4} onChange={action('value-change')} {...args} />
+};