polish Date.stories

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

@@ -1,4 +1,4 @@
-import type { Meta } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react';
 import React from 'react';
 import { useArgs } from '@storybook/addons';
 import { ColorControl } from './Color';
@@ -44,19 +44,19 @@ export default {
   },
 } as Meta<typeof ColorControl>;
 
-export const Basic = {
+export const Basic: StoryObj<typeof ColorControl> = {
   args: {
     value: '#ff00ff',
   },
 };
 
-export const Undefined = {
+export const Undefined: StoryObj<typeof ColorControl> = {
   args: {
     value: undefined,
   },
 };
 
-export const WithPresetColors = {
+export const WithPresetColors: StoryObj<typeof ColorControl> = {
   args: {
     value: '#00ffff',
     presetColors: [
@@ -87,7 +87,7 @@ export const WithPresetColors = {
   },
 };
 
-export const StartOpen = {
+export const StartOpen: StoryObj<typeof ColorControl> = {
   args: {
     startOpen: true,
   },

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

@@ -1,21 +1,41 @@
-import React, { useState } from 'react';
+import React from 'react';
+import type { Meta, StoryObj } from '@storybook/react';
+import { useArgs } from '@storybook/addons';
 import { DateControl } from './Date';
 
 export default {
   title: 'Controls/Date',
-  component: DateControl,
-};
+  // not using component here because we want to define argTypes ourselves
+  tags: ['docsPage'],
+  argTypes: {
+    value: {
+      description: 'Currently set date',
+      control: { type: 'date' },
+    },
+  },
+  render: (args) => {
+    const [, updateArgs] = useArgs();
+    const { value, onChange } = args;
 
-const Template = (initialValue) => {
-  const [value, setValue] = useState(initialValue);
     return (
       <>
-      <DateControl name="date" value={value} onChange={(newVal) => setValue(newVal)} />
+        <DateControl
+          {...args}
+          name="date"
+          onChange={(newValue) => {
+            updateArgs({ value: newValue });
+            onChange?.(newValue);
+          }}
+        />
         <pre>{JSON.stringify(value) || 'undefined'}</pre>
       </>
     );
+  },
+} as Meta<typeof DateControl>;
+
+export const Basic: StoryObj<typeof DateControl> = {
+  args: { value: new Date('2020-10-20T09:30:02') },
+};
+export const Undefined: StoryObj<typeof DateControl> = {
+  args: { value: undefined },
 };
-
-export const Basic = () => Template(new Date(2020, 4, 20));
-
-export const Undefined = () => Template(undefined);