From 5647ddb764d8ea9a8051e3b6fcac9459b5666023 Mon Sep 17 00:00:00 2001
From: Riad Benguella <benguella@gmail.com>
Date: Tue, 23 Jul 2024 10:58:07 +0200
Subject: [PATCH] DataForm: Add a simple story for the DataForm component

---
 .../dataform/stories/index.story.tsx          | 42 +++++++++++++++++++
 .../dataviews}/stories/fixtures.js            |  2 +-
 .../dataviews}/stories/index.story.js         |  6 +--
 3 files changed, 46 insertions(+), 4 deletions(-)
 create mode 100644 packages/dataviews/src/components/dataform/stories/index.story.tsx
 rename packages/dataviews/src/{ => components/dataviews}/stories/fixtures.js (98%)
 rename packages/dataviews/src/{ => components/dataviews}/stories/index.story.js (86%)

diff --git a/packages/dataviews/src/components/dataform/stories/index.story.tsx b/packages/dataviews/src/components/dataform/stories/index.story.tsx
new file mode 100644
index 00000000000000..2e288c8e11d41c
--- /dev/null
+++ b/packages/dataviews/src/components/dataform/stories/index.story.tsx
@@ -0,0 +1,42 @@
+/**
+ * WordPress dependencies
+ */
+import { useState } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import DataForm from '../index';
+
+const meta = {
+	title: 'DataViews/DataForm',
+	component: DataForm,
+};
+export default meta;
+
+const fields = [
+	{
+		id: 'title',
+		label: 'Title',
+		type: 'text' as const,
+	},
+];
+
+export const Default = () => {
+	const [ post, setPost ] = useState( {
+		title: 'Hello, World!',
+	} );
+
+	const form = {
+		visibleFields: [ 'title' ],
+	};
+
+	return (
+		<DataForm
+			data={ post }
+			fields={ fields }
+			form={ form }
+			onChange={ setPost }
+		/>
+	);
+};
diff --git a/packages/dataviews/src/stories/fixtures.js b/packages/dataviews/src/components/dataviews/stories/fixtures.js
similarity index 98%
rename from packages/dataviews/src/stories/fixtures.js
rename to packages/dataviews/src/components/dataviews/stories/fixtures.js
index 1ab26af4ef14d0..01351b84848fc1 100644
--- a/packages/dataviews/src/stories/fixtures.js
+++ b/packages/dataviews/src/components/dataviews/stories/fixtures.js
@@ -12,7 +12,7 @@ import {
 /**
  * Internal dependencies
  */
-import { LAYOUT_TABLE } from '../constants';
+import { LAYOUT_TABLE } from '../../../constants';
 
 export const data = [
 	{
diff --git a/packages/dataviews/src/stories/index.story.js b/packages/dataviews/src/components/dataviews/stories/index.story.js
similarity index 86%
rename from packages/dataviews/src/stories/index.story.js
rename to packages/dataviews/src/components/dataviews/stories/index.story.js
index 8a5ccd83450237..9ce1c29573e55c 100644
--- a/packages/dataviews/src/stories/index.story.js
+++ b/packages/dataviews/src/components/dataviews/stories/index.story.js
@@ -6,10 +6,10 @@ import { useState, useMemo } from '@wordpress/element';
 /**
  * Internal dependencies
  */
-import { DataViews } from '../index';
+import DataViews from '../index';
 import { DEFAULT_VIEW, actions, data, fields } from './fixtures';
-import { LAYOUT_GRID, LAYOUT_TABLE } from '../constants';
-import { filterSortAndPaginate } from '../filter-and-sort-data-view';
+import { LAYOUT_GRID, LAYOUT_TABLE } from '../../../constants';
+import { filterSortAndPaginate } from '../../../filter-and-sort-data-view';
 
 const meta = {
 	title: 'DataViews/DataViews',