Update Storybook Story format to latest (#329)

* Update Storybook Story format to latest

* Lint fixes

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} />
+};

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} />
+};

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} />
 };

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} />
+};

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} />
+};

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} />
+};

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>
 };

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} />
+};

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} />
+};

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>
-);
+};

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' />
+};

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' />
+};

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>
+};