Components: Draggable, add story (#18070)

* Components: Add Story for Draggable

This update adds a Storybook example for the Draggable component from `@wordpress/components`.

* Fix useState hook for Draggable story example

Solution was to create an Example component with the useState hook.
Render that Example component in the story instead.

packages/components/src/draggable/stories/index.js

@@ -0,0 +1,69 @@
+/**
+ * WordPress dependencies
+ */
+import { useState } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import Draggable from '../';
+import Dashicon from '../../dashicon';
+
+export default { title: 'Draggable', component: Draggable };
+
+const Box = ( props ) => {
+	return (
+		<div
+			{ ...props }
+			style={ {
+				alignItems: 'center',
+				display: 'flex',
+				justifyContent: 'center',
+				width: 100,
+				height: 100,
+				background: '#ddd',
+			} }
+		/>
+	);
+};
+
+const DraggalbeExample = () => {
+	const [ isDragging, setDragging ] = useState( false );
+
+	// Allow for the use of ID in the example
+	/* eslint-disable no-restricted-syntax */
+	return (
+		<div>
+			<p>Is Dragging? { isDragging ? 'Yes' : 'No' }</p>
+			<div id="draggable-example-box" style={ { display: 'inline-flex' } }>
+				<Draggable elementId="draggable-example-box">
+					{ ( { onDraggableStart, onDraggableEnd } ) => {
+						const handleOnDragStart = ( event ) => {
+							setDragging( true );
+							onDraggableStart( event );
+						};
+						const handleOnDragEnd = ( event ) => {
+							setDragging( false );
+							onDraggableEnd( event );
+						};
+
+						return (
+							<Box
+								onDragStart={ handleOnDragStart }
+								onDragEnd={ handleOnDragEnd }
+								draggable
+							>
+								<Dashicon icon="move" />
+							</Box>
+						);
+					} }
+				</Draggable>
+			</div>
+		</div>
+	);
+	/* eslint-enable no-restricted-syntax */
+};
+
+export const _default = () => {
+	return <DraggalbeExample />;
+};