From d3268237414b316c12c82f43a6698af547ec3cfe Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Marcel=20K=C3=B6hler?=
 <77496890+aromko@users.noreply.github.com>
Date: Thu, 12 Dec 2024 15:55:55 +0100
Subject: [PATCH] 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                     | 16 ++++++++++++++++
 .../components/src/Calendar/Calendar.stories.tsx |  2 +-
 .../src/DateField/DateField.stories.tsx          |  6 +++---
 .../src/DatePicker/DatePicker.stories.tsx        |  2 +-
 .../components/src/Dialog/Dialog.stories.tsx     |  2 +-
 .../components/src/HelpText/HelpText.stories.tsx |  2 +-
 .../src/SearchField/SearchField.stories.tsx      |  2 +-
 7 files changed, 24 insertions(+), 8 deletions(-)
 create mode 100644 .changeset/new-paws-carry.md

diff --git a/.changeset/new-paws-carry.md b/.changeset/new-paws-carry.md
new file mode 100644
index 0000000000..dff988203e
--- /dev/null
+++ b/.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
diff --git a/packages/components/src/Calendar/Calendar.stories.tsx b/packages/components/src/Calendar/Calendar.stories.tsx
index 47e869d87f..91a572c1a3 100644
--- a/packages/components/src/Calendar/Calendar.stories.tsx
+++ b/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';
 
diff --git a/packages/components/src/DateField/DateField.stories.tsx b/packages/components/src/DateField/DateField.stories.tsx
index 16892585a3..d57bd45640 100644
--- a/packages/components/src/DateField/DateField.stories.tsx
+++ b/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
diff --git a/packages/components/src/DatePicker/DatePicker.stories.tsx b/packages/components/src/DatePicker/DatePicker.stories.tsx
index b2b577dd84..e78700fe1a 100644
--- a/packages/components/src/DatePicker/DatePicker.stories.tsx
+++ b/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';
diff --git a/packages/components/src/Dialog/Dialog.stories.tsx b/packages/components/src/Dialog/Dialog.stories.tsx
index ddabdfbe89..fd237cdd61 100644
--- a/packages/components/src/Dialog/Dialog.stories.tsx
+++ b/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';
diff --git a/packages/components/src/HelpText/HelpText.stories.tsx b/packages/components/src/HelpText/HelpText.stories.tsx
index 692b67c4ea..86092e1112 100644
--- a/packages/components/src/HelpText/HelpText.stories.tsx
+++ b/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';
diff --git a/packages/components/src/SearchField/SearchField.stories.tsx b/packages/components/src/SearchField/SearchField.stories.tsx
index 396c69e728..f381f7cc3d 100644
--- a/packages/components/src/SearchField/SearchField.stories.tsx
+++ b/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 = {