Add TreeSelect component to Storybook

packages/components/src/tree-select/stories/index.js

@@ -0,0 +1,77 @@
+/**
+ * External dependencies
+ */
+import { boolean, object, text } from '@storybook/addon-knobs';
+
+/**
+ * WordPress dependencies
+ */
+import { useState } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import TreeSelect from '../';
+
+export default {
+	title: 'Components/TreeSelect',
+	component: TreeSelect,
+};
+
+const TreeSelectWithState = ( props ) => {
+	const [ selection, setSelection ] = useState();
+
+	return (
+		<TreeSelect
+			{ ...props }
+			onChange={ setSelection }
+			selectedId={ selection }
+		/>
+	);
+};
+
+export const _default = () => {
+	const label = text( 'Label', 'Label Text' );
+	const noOptionLabel = text( 'No Option Label', 'No parent page' );
+	const hideLabelFromVision = boolean( 'Hide Label From Vision', false );
+	const help = text(
+		'Help Text',
+		'Help text to explain the select control.'
+	);
+	const tree = object( 'Tree', [
+		{
+			name: 'Page 1',
+			id: 'p1',
+			children: [
+				{ name: 'Descend 1 of page 1', id: 'p11' },
+				{ name: 'Descend 2 of page 1', id: 'p12' },
+			],
+		},
+		{
+			name: 'Page 2',
+			id: 'p2',
+			children: [
+				{
+					name: 'Descend 1 of page 2',
+					id: 'p21',
+					children: [
+						{
+							name: 'Descend 1 of Descend 1 of page 2',
+							id: 'p211',
+						},
+					],
+				},
+			],
+		},
+	] );
+
+	return (
+		<TreeSelectWithState
+			label={ label }
+			noOptionLabel={ noOptionLabel }
+			hideLabelFromVision={ hideLabelFromVision }
+			help={ help }
+			tree={ tree }
+		/>
+	);
+};

storybook/test/__snapshots__/index.js.snap

@@ -8665,6 +8665,72 @@ exports[`Storyshots Components/ToolbarGroup With Controls Prop 1`] = `
 </div>
 `;
 
+exports[`Storyshots Components/TreeSelect Default 1`] = `
+<div
+  className="components-base-control"
+>
+  <div
+    className="components-base-control__field"
+  >
+    <label
+      className="components-base-control__label"
+      htmlFor="inspector-select-control-1"
+    >
+      Label Text
+    </label>
+    <select
+      aria-describedby="inspector-select-control-1__help"
+      className="components-select-control__input"
+      id="inspector-select-control-1"
+      multiple={false}
+      onChange={[Function]}
+    >
+      <option
+        value=""
+      >
+        No parent page
+      </option>
+      <option
+        value="p1"
+      >
+        Page 1
+      </option>
+      <option
+        value="p11"
+      >
+           Descend 1 of page 1
+      </option>
+      <option
+        value="p12"
+      >
+           Descend 2 of page 1
+      </option>
+      <option
+        value="p2"
+      >
+        Page 2
+      </option>
+      <option
+        value="p21"
+      >
+           Descend 1 of page 2
+      </option>
+      <option
+        value="p211"
+      >
+              Descend 1 of Descend 1 of page 2
+      </option>
+    </select>
+  </div>
+  <p
+    className="components-base-control__help"
+    id="inspector-select-control-1__help"
+  >
+    Help text to explain the select control.
+  </p>
+</div>
+`;
+
 exports[`Storyshots Components/VisuallyHidden Default 1`] = `
 Array [
   <div