bugfix([DST-627]): replace useState import from storybook (#4336)

* DST-627: replace useState import from storybook

* Create new-paws-carry.md

* Update .changeset/new-paws-carry.md

.changeset/new-paws-carry.md

@@ -0,0 +1,16 @@
+---
+"@marigold/components": patch
+---
+
+bugfix([DST-627]): replace useState import from storybook
+
+Some controlled stories in Storybook were incorrect because the useState import from react was used, resulting in an error.
+
+The stories of the following component were affected:
+
+- Calendar
+- DateField
+- DatePicker
+- Dialog
+- HelpText
+- SearchField

packages/components/src/Calendar/Calendar.stories.tsx

@@ -1,7 +1,7 @@
 /* eslint-disable react-hooks/rules-of-hooks */
 import { CalendarDate } from '@internationalized/date';
+import { useState } from '@storybook/preview-api';
 import type { Meta, StoryObj } from '@storybook/react';
-import { useState } from 'react';
 import { DateValue } from 'react-aria-components';
 import { Calendar } from './Calendar';
 

packages/components/src/DateField/DateField.stories.tsx

@@ -1,7 +1,7 @@
 /* eslint-disable react-hooks/rules-of-hooks */
-import { DateValue } from '@internationalized/date';
+import { CalendarDate, DateValue } from '@internationalized/date';
+import { useState } from '@storybook/preview-api';
 import type { Meta, StoryObj } from '@storybook/react';
-import { useState } from 'react';
 import { I18nProvider } from '@react-aria/i18n';
 import { DateField, DateFieldProps } from './DateField';
 
@@ -109,7 +109,7 @@ export const Basic: Story = {
 
 export const ControlledDateField: Story = {
   render: args => {
-    const [value, setValue] = useState<DateValue>();
+    const [value, setValue] = useState<DateValue>(new CalendarDate(1970, 1, 1));
     return (
       <I18nProvider locale="de-DE">
         <DateField

packages/components/src/DatePicker/DatePicker.stories.tsx

@@ -1,7 +1,7 @@
 /* eslint-disable react-hooks/rules-of-hooks */
 import { CalendarDate, getLocalTimeZone, today } from '@internationalized/date';
+import { useState } from '@storybook/preview-api';
 import type { Meta, StoryObj } from '@storybook/react';
-import { useState } from 'react';
 import { DateValue } from 'react-aria-components';
 import { I18nProvider } from '@react-aria/i18n';
 import { Stack } from '../Stack';

packages/components/src/Dialog/Dialog.stories.tsx

@@ -1,6 +1,6 @@
 /* eslint-disable react-hooks/rules-of-hooks */
+import { useState } from '@storybook/preview-api';
 import type { Meta, StoryObj } from '@storybook/react';
-import { useState } from 'react';
 import { Button } from '../Button';
 import { Checkbox, CheckboxGroup } from '../Checkbox';
 import { Menu } from '../Menu';

packages/components/src/HelpText/HelpText.stories.tsx

@@ -1,5 +1,5 @@
+import { useState } from '@storybook/preview-api';
 import type { Meta, StoryObj } from '@storybook/react';
-import { useState } from 'react';
 import { Form, TextField } from 'react-aria-components';
 import { Button } from '../Button';
 import { Input } from '../Input';

packages/components/src/SearchField/SearchField.stories.tsx

@@ -1,6 +1,6 @@
 /* eslint-disable react-hooks/rules-of-hooks */
+import { useState } from '@storybook/preview-api';
 import { Meta, StoryObj } from '@storybook/react';
-import { useState } from 'react';
 import { SearchField } from './SearchField';
 
 const meta = {