redo all Options stories

code/ui/blocks/src/controls/Boolean.stories.tsx

@@ -7,13 +7,6 @@ const meta = {
   component: BooleanControl,
   tags: ['docsPage'],
   parameters: { controls: { include: ['value'] } },
-  argTypes: {
-    value: {
-      control: {
-        type: 'boolean',
-      },
-    },
-  },
   render: (args) => {
     const [, updateArgs] = useArgs();
     const { value, onChange } = args;

code/ui/blocks/src/controls/options/CheckOptions.stories.tsx

@@ -0,0 +1,121 @@
+import React, { useState } from 'react';
+import { useArgs } from '@storybook/addons';
+import type { Meta, StoryObj } from '@storybook/react';
+import { OptionsControl } from './Options';
+
+const arrayOptions = ['Bat', 'Cat', 'Rat'];
+const labels = {
+  Bat: 'Batwoman',
+  Cat: 'Catwoman',
+  Rat: 'Ratwoman',
+};
+const objectOptions = {
+  A: { id: 'Aardvark' },
+  B: { id: 'Bat' },
+  C: { id: 'Cat' },
+};
+
+const meta = {
+  title: 'Controls/Options/Check',
+  component: OptionsControl,
+  tags: ['docsPage'],
+  args: {
+    argType: { options: arrayOptions },
+    type: 'check',
+  },
+  render: (args) => {
+    const [, updateArgs] = useArgs();
+    const { value, onChange } = args;
+    return (
+      <>
+        <OptionsControl
+          {...args}
+          name="options"
+          onChange={(newValue) => {
+            updateArgs({ value: newValue });
+            onChange?.(newValue);
+          }}
+        />
+        <pre>{JSON.stringify(value) || 'undefined'}</pre>
+      </>
+    );
+  },
+} as Meta<typeof OptionsControl>;
+
+export default meta;
+
+export const Array: StoryObj<typeof OptionsControl> = {
+  args: {
+    value: [arrayOptions[0]],
+  },
+};
+
+export const ArrayInline: StoryObj<typeof OptionsControl> = {
+  args: {
+    type: 'inline-check',
+    value: [arrayOptions[1], arrayOptions[2]],
+  },
+};
+
+export const ArrayLabels: StoryObj<typeof OptionsControl> = {
+  args: {
+    value: [arrayOptions[0]],
+    labels,
+  },
+};
+
+export const ArrayInlineLabels: StoryObj<typeof OptionsControl> = {
+  args: {
+    type: 'inline-check',
+    value: [arrayOptions[1], arrayOptions[2]],
+    labels,
+  },
+};
+
+export const ArrayUndefined: StoryObj<typeof OptionsControl> = {
+  args: {
+    value: undefined,
+  },
+};
+
+export const Object: StoryObj<typeof OptionsControl> = {
+  name: 'DEPRECATED: Object',
+  args: {
+    value: [objectOptions.B],
+    argType: { options: objectOptions },
+  },
+};
+
+export const ObjectInline: StoryObj<typeof OptionsControl> = {
+  name: 'DEPRECATED: Object Inline',
+  args: {
+    type: 'inline-check',
+    value: [objectOptions.A, objectOptions.C],
+    argType: { options: objectOptions },
+  },
+};
+
+export const ObjectUndefined: StoryObj<typeof OptionsControl> = {
+  name: 'DEPRECATED: Object Undefined',
+  args: {
+    value: undefined,
+    argType: { options: objectOptions },
+  },
+};
+
+const rawOptionsHelper = (options, type, isMulti, initial) => {
+  const [value, setValue] = useState(isMulti ? [initial] : initial);
+  return (
+    <>
+      <OptionsControl
+        name="options"
+        labels={{}}
+        argType={{ options }}
+        value={value}
+        type={type}
+        onChange={(newVal) => setValue(newVal)}
+      />
+      <pre>{JSON.stringify(value) || 'undefined'}</pre>
+    </>
+  );
+};

code/ui/blocks/src/controls/options/Options.stories.tsx

@@ -1,66 +0,0 @@
-import React, { useState } from 'react';
-import { OptionsControl } from './Options';
-
-export default {
-  title: 'Controls/Options',
-  component: OptionsControl,
-};
-
-const arrayOptions = ['Bat', 'Cat', 'Rat'];
-const objectOptions = {
-  A: { id: 'Aardvark' },
-  B: { id: 'Bat' },
-  C: { id: 'Cat' },
-};
-
-const rawOptionsHelper = (options, type, isMulti, initial) => {
-  const [value, setValue] = useState(isMulti ? [initial] : initial);
-  return (
-    <>
-      <OptionsControl
-        name="options"
-        labels={{}}
-        argType={{ options }}
-        value={value}
-        type={type}
-        onChange={(newVal) => setValue(newVal)}
-      />
-      <pre>{JSON.stringify(value) || 'undefined'}</pre>
-    </>
-  );
-};
-
-const optionsHelper = (options, type, isMulti) =>
-  rawOptionsHelper(options, type, isMulti, Array.isArray(options) ? options[1] : options.B);
-
-// Check
-export const ArrayCheck = () => optionsHelper(arrayOptions, 'check', true);
-export const ArrayInlineCheck = () => optionsHelper(arrayOptions, 'inline-check', true);
-export const ObjectCheck = () => optionsHelper(objectOptions, 'check', true);
-export const ObjectInlineCheck = () => optionsHelper(objectOptions, 'inline-check', true);
-export const ArrayCheckUndefined = () => rawOptionsHelper(arrayOptions, 'check', false, undefined);
-export const ObjectCheckUndefined = () =>
-  rawOptionsHelper(objectOptions, 'check', false, undefined);
-
-// Radio
-export const ArrayRadio = () => optionsHelper(arrayOptions, 'radio', false);
-export const ArrayInlineRadio = () => optionsHelper(arrayOptions, 'inline-radio', false);
-export const ObjectRadio = () => optionsHelper(objectOptions, 'radio', false);
-export const ObjectInlineRadio = () => optionsHelper(objectOptions, 'inline-radio', false);
-export const ArrayRadioUndefined = () => rawOptionsHelper(arrayOptions, 'radio', false, undefined);
-export const ObjectRadioUndefined = () =>
-  rawOptionsHelper(objectOptions, 'radio', false, undefined);
-
-// Select
-export const ArraySelect = () => optionsHelper(arrayOptions, 'select', false);
-export const ArrayMultiSelect = () => optionsHelper(arrayOptions, 'multi-select', true);
-export const ObjectSelect = () => optionsHelper(objectOptions, 'select', false);
-export const ObjectMultiSelect = () => optionsHelper(objectOptions, 'multi-select', true);
-export const ArraySelectUndefined = () =>
-  rawOptionsHelper(arrayOptions, 'select', false, undefined);
-export const ObjectSelectUndefined = () =>
-  rawOptionsHelper(objectOptions, 'select', false, undefined);
-export const ArrayMultiSelectUndefined = () =>
-  rawOptionsHelper(arrayOptions, 'multi-select', false, undefined);
-export const ObjectMultiSelectUndefined = () =>
-  rawOptionsHelper(objectOptions, 'multi-select', false, undefined);

code/ui/blocks/src/controls/options/RadioOptions.stories.tsx

@@ -0,0 +1,105 @@
+import React from 'react';
+import { useArgs } from '@storybook/addons';
+import type { Meta, StoryObj } from '@storybook/react';
+import { OptionsControl } from './Options';
+
+const arrayOptions = ['Bat', 'Cat', 'Rat'];
+const labels = {
+  Bat: 'Batwoman',
+  Cat: 'Catwoman',
+  Rat: 'Ratwoman',
+};
+const objectOptions = {
+  A: { id: 'Aardvark' },
+  B: { id: 'Bat' },
+  C: { id: 'Cat' },
+};
+
+const meta = {
+  title: 'Controls/Options/Radio',
+  component: OptionsControl,
+  tags: ['docsPage'],
+  parameters: { controls: { include: ['argType', 'type', 'value', 'labels'] } },
+  args: {
+    type: 'radio',
+    argType: { options: arrayOptions },
+  },
+  render: (args) => {
+    const [, updateArgs] = useArgs();
+    const { value, onChange } = args;
+    return (
+      <>
+        <OptionsControl
+          {...args}
+          name="options"
+          onChange={(newValue) => {
+            updateArgs({ value: newValue });
+            onChange?.(newValue);
+          }}
+        />
+        <pre>{JSON.stringify(value) || 'undefined'}</pre>
+      </>
+    );
+  },
+} as Meta<typeof OptionsControl>;
+
+export default meta;
+
+export const Array: StoryObj<typeof OptionsControl> = {
+  args: {
+    value: arrayOptions[0],
+  },
+};
+
+export const ArrayInline: StoryObj<typeof OptionsControl> = {
+  args: {
+    type: 'inline-radio',
+    value: arrayOptions[1],
+  },
+};
+
+export const ArrayLabels: StoryObj<typeof OptionsControl> = {
+  args: {
+    value: arrayOptions[0],
+    labels,
+  },
+};
+
+export const ArrayInlineLabels: StoryObj<typeof OptionsControl> = {
+  args: {
+    type: 'inline-radio',
+    value: arrayOptions[1],
+    labels,
+  },
+};
+
+export const ArrayUndefined: StoryObj<typeof OptionsControl> = {
+  args: {
+    value: undefined,
+  },
+};
+
+export const Object: StoryObj<typeof OptionsControl> = {
+  name: 'DEPRECATED: Object',
+  args: {
+    value: objectOptions.B,
+    argType: { options: objectOptions },
+  },
+};
+
+export const ObjectInline: StoryObj<typeof OptionsControl> = {
+  name: 'DEPRECATED: Object Inline',
+  args: {
+    type: 'inline-radio',
+    value: objectOptions.A,
+    argType: { options: objectOptions },
+  },
+};
+
+export const ObjectUndefined: StoryObj<typeof OptionsControl> = {
+  name: 'DEPRECATED: Object Undefined',
+  args: {
+    value: undefined,
+    argType: { options: objectOptions },
+  },
+};

code/ui/blocks/src/controls/options/SelectOptions.stories.tsx

@@ -0,0 +1,121 @@
+import React from 'react';
+import { useArgs } from '@storybook/addons';
+import type { Meta, StoryObj } from '@storybook/react';
+import { OptionsControl } from './Options';
+
+const arrayOptions = ['Bat', 'Cat', 'Rat'];
+const objectOptions = {
+  A: { id: 'Aardvark' },
+  B: { id: 'Bat' },
+  C: { id: 'Cat' },
+};
+const labels = {
+  Bat: 'Batwoman',
+  Cat: 'Catwoman',
+  Rat: 'Ratwoman',
+};
+
+const meta = {
+  title: 'Controls/Options/Select',
+  component: OptionsControl,
+  tags: ['docsPage'],
+  parameters: { controls: { include: ['argType', 'type', 'value', 'labels'] } },
+  args: {
+    type: 'select',
+    argType: { options: arrayOptions },
+  },
+  render: (args) => {
+    const [, updateArgs] = useArgs();
+    const { value, onChange } = args;
+    return (
+      <>
+        <OptionsControl
+          {...args}
+          name="options"
+          onChange={(newValue) => {
+            updateArgs({ value: newValue });
+            onChange?.(newValue);
+          }}
+        />
+        <pre>{JSON.stringify(value) || 'undefined'}</pre>
+      </>
+    );
+  },
+} as Meta<typeof OptionsControl>;
+
+export default meta;
+
+export const Array: StoryObj<typeof OptionsControl> = {
+  args: {
+    value: arrayOptions[0],
+  },
+};
+
+export const ArrayMulti: StoryObj<typeof OptionsControl> = {
+  args: {
+    type: 'multi-select',
+    value: [arrayOptions[1], arrayOptions[2]],
+  },
+};
+
+export const ArrayUndefined: StoryObj<typeof OptionsControl> = {
+  args: {
+    value: undefined,
+  },
+};
+
+export const ArrayMultiUndefined: StoryObj<typeof OptionsControl> = {
+  args: {
+    type: 'multi-select',
+    value: undefined,
+  },
+};
+
+export const ArrayLabels: StoryObj<typeof OptionsControl> = {
+  args: {
+    value: arrayOptions[0],
+    labels,
+  },
+};
+
+export const ArrayMultiLabels: StoryObj<typeof OptionsControl> = {
+  args: {
+    type: 'multi-select',
+    value: [arrayOptions[1], arrayOptions[2]],
+    labels,
+  },
+};
+
+export const Object: StoryObj<typeof OptionsControl> = {
+  name: 'DEPRECATED: Object',
+  args: {
+    value: objectOptions.B,
+    argType: { options: objectOptions },
+  },
+};
+
+export const ObjectMulti: StoryObj<typeof OptionsControl> = {
+  name: 'DEPRECATED: Object Multi',
+  args: {
+    type: 'multi-select',
+    value: [objectOptions.A, objectOptions.B],
+    argType: { options: objectOptions },
+  },
+};
+
+export const ObjectUndefined: StoryObj<typeof OptionsControl> = {
+  name: 'DEPRECATED: Object Undefined',
+  args: {
+    value: undefined,
+    argType: { options: objectOptions },
+  },
+};
+
+export const ObjectMultiUndefined: StoryObj<typeof OptionsControl> = {
+  name: 'DEPRECATED: Object Multi Undefined',
+  args: {
+    type: 'multi-select',
+    value: undefined,
+    argType: { options: objectOptions },
+  },
+};