From 5d207d99d0c3b78194542dc8ae7d3dde4f9a25d1 Mon Sep 17 00:00:00 2001
From: Lukas Harbarth <lukas.harbarth@sap.com>
Date: Thu, 5 Jun 2025 17:00:43 +0200
Subject: [PATCH] docs(DynamicDateRange): add story

---
 .../DynamicDateRange/DynamicDateRange.mdx     | 72 +++++++++++++++++++
 .../DynamicDateRange.stories.tsx              | 61 ++++++++++++++++
 .../webComponents/DynamicDateRange/index.tsx  |  7 +-
 3 files changed, 138 insertions(+), 2 deletions(-)
 create mode 100644 packages/main/src/webComponents/DynamicDateRange/DynamicDateRange.mdx
 create mode 100644 packages/main/src/webComponents/DynamicDateRange/DynamicDateRange.stories.tsx

diff --git a/packages/main/src/webComponents/DynamicDateRange/DynamicDateRange.mdx b/packages/main/src/webComponents/DynamicDateRange/DynamicDateRange.mdx
new file mode 100644
index 00000000000..f11bae4ce58
--- /dev/null
+++ b/packages/main/src/webComponents/DynamicDateRange/DynamicDateRange.mdx
@@ -0,0 +1,72 @@
+import { ControlsWithNote, DocsHeader, Footer } from '@sb/components';
+import { Canvas, Meta } from '@storybook/blocks';
+import * as ComponentStories from './DynamicDateRange.stories';
+
+<Meta of={ComponentStories} />
+
+<DocsHeader />
+
+<br />
+
+## Example
+
+<Canvas of={ComponentStories.Default} />
+
+## Properties
+
+<ControlsWithNote of={ComponentStories.Default} />
+
+## More examples
+
+### Value Change
+
+<Canvas of={ComponentStories.ValueChange} />
+
+#### Code
+
+```tsx
+function DynamicDateRangeComponent() {
+  const [selValue, setSelValue] = useState("");
+  const [convertedDates, setConvertedDates] = useState("");
+  return (
+    <>
+      <DynamicDateRange
+        onChange={(e) => {
+          const selectedValue = e.detail.value;
+          setSelValue(JSON.stringify(selectedValue));
+
+          const dates = e.currentTarget.toDates(selectedValue);
+          setConvertedDates(
+            dates.map((date) => date.toLocaleString()).join(" - "),
+          );
+        }}
+      />
+      <hr />
+      <FlexBox alignItems="Center" gap="0.5rem">
+        <Label for="sel-val" showColon>
+          Selected Value
+        </Label>
+        <Input
+          id="sel-val"
+          readonly
+          value={selValue}
+          style={{ width: "100%", maxWidth: "400px" }}
+        />
+      </FlexBox>
+      <FlexBox alignItems="Center" gap="0.5rem">
+        <Label for="conv-val" showColon>
+          Converted Dates
+        </Label>
+        <Input
+          id="conv-val"
+          readonly
+          value={convertedDates}
+          style={{ width: "100%", maxWidth: "400px" }}
+        />
+      </FlexBox>
+    </>
+  );
+}
+```
+
+<Footer />
diff --git a/packages/main/src/webComponents/DynamicDateRange/DynamicDateRange.stories.tsx b/packages/main/src/webComponents/DynamicDateRange/DynamicDateRange.stories.tsx
new file mode 100644
index 00000000000..ab4e16bf479
--- /dev/null
+++ b/packages/main/src/webComponents/DynamicDateRange/DynamicDateRange.stories.tsx
@@ -0,0 +1,61 @@
+import '@ui5/webcomponents/dist/dynamic-date-range-options/Today.js';
+import '@ui5/webcomponents/dist/dynamic-date-range-options/Yesterday.js';
+import '@ui5/webcomponents/dist/dynamic-date-range-options/Tomorrow.js';
+import '@ui5/webcomponents/dist/dynamic-date-range-options/SingleDate.js';
+import '@ui5/webcomponents/dist/dynamic-date-range-options/DateRange.js';
+import type { Meta, StoryObj } from '@storybook/react';
+import { useState } from 'react';
+import { FlexBox } from '../../components/FlexBox/index.js';
+import { Input } from '../Input/index.js';
+import { Label } from '../Label/index.js';
+import { DynamicDateRange } from './index.js';
+
+const meta = {
+  title: 'Inputs / DynamicDateRange',
+  component: DynamicDateRange,
+  argTypes: {},
+  args: {
+    options: 'TODAY, TOMORROW, YESTERDAY, DATE, DATERANGE',
+  },
+  tags: ['package:@ui5/webcomponents'],
+} satisfies Meta<typeof DynamicDateRange>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};
+
+export const ValueChange: Story = {
+  render(args) {
+    const [selValue, setSelValue] = useState('');
+    const [convertedDates, setConvertedDates] = useState('');
+    return (
+      <>
+        <DynamicDateRange
+          {...args}
+          onChange={(e) => {
+            const selectedValue = e.detail.value;
+            setSelValue(JSON.stringify(selectedValue));
+
+            //@ts-expect-error: `toDates` is available
+            const dates = e.currentTarget.toDates(selectedValue);
+            setConvertedDates(dates.map((date) => date.toLocaleString()).join(' - '));
+          }}
+        />
+        <hr />
+        <FlexBox alignItems="Center" gap="0.5rem">
+          <Label for="sel-val" showColon>
+            Selected Value
+          </Label>
+          <Input id="sel-val" readonly value={selValue} style={{ width: '100%', maxWidth: '400px' }} />
+        </FlexBox>
+        <FlexBox alignItems="Center" gap="0.5rem">
+          <Label for="conv-val" showColon>
+            Converted Dates
+          </Label>
+          <Input id="conv-val" readonly value={convertedDates} style={{ width: '100%', maxWidth: '400px' }} />
+        </FlexBox>
+      </>
+    );
+  },
+};
diff --git a/packages/main/src/webComponents/DynamicDateRange/index.tsx b/packages/main/src/webComponents/DynamicDateRange/index.tsx
index 16d7a147b50..79bdb0347fc 100644
--- a/packages/main/src/webComponents/DynamicDateRange/index.tsx
+++ b/packages/main/src/webComponents/DynamicDateRange/index.tsx
@@ -1,7 +1,10 @@
 'use client';
 
 import '@ui5/webcomponents/dist/DynamicDateRange.js';
-import type { DynamicDateRangeValue } from '@ui5/webcomponents/dist/DynamicDateRange.js';
+import type {
+  DynamicDateRangeChangeEventDetail,
+  DynamicDateRangeValue,
+} from '@ui5/webcomponents/dist/DynamicDateRange.js';
 import { withWebComponent } from '@ui5/webcomponents-react-base';
 import type { CommonProps, Ui5CustomEvent, Ui5DomRef } from '@ui5/webcomponents-react-base';
 
@@ -33,7 +36,7 @@ interface DynamicDateRangePropTypes
    * | :--------: | :-----: |
    * | ✅|✅|
    */
-  onChange?: (event: Ui5CustomEvent<DynamicDateRangeDomRef>) => void;
+  onChange?: (event: Ui5CustomEvent<DynamicDateRangeDomRef, DynamicDateRangeChangeEventDetail>) => void;
 }
 
 /**