From d9b67ae7a88e371655f2b69ed4f9fea3a8bb3f2d Mon Sep 17 00:00:00 2001
From: Jeppe Reinhold <jeppe@reinhold.is>
Date: Sat, 29 Oct 2022 00:12:44 +0200
Subject: [PATCH] improve Text stories

---
 code/ui/blocks/src/controls/Text.stories.tsx | 57 +++++++++++++++-----
 1 file changed, 44 insertions(+), 13 deletions(-)

diff --git a/code/ui/blocks/src/controls/Text.stories.tsx b/code/ui/blocks/src/controls/Text.stories.tsx
index e341883c064..ce5082b2754 100644
--- a/code/ui/blocks/src/controls/Text.stories.tsx
+++ b/code/ui/blocks/src/controls/Text.stories.tsx
@@ -1,23 +1,54 @@
-import React, { useState } from 'react';
+import React from 'react';
+import type { Meta, StoryObj } from '@storybook/react';
+import { useArgs } from '@storybook/addons';
 import { TextControl } from './Text';
 
 export default {
   title: 'Controls/Text',
   component: TextControl,
+  tags: ['docsPage'],
+  parameters: { controls: { include: ['value', 'maxLength'] } },
+  render: (args) => {
+    const [, updateArgs] = useArgs();
+    const { value, onChange } = args;
+
+    return (
+      <>
+        <TextControl
+          {...args}
+          name="text"
+          onChange={(newValue) => {
+            updateArgs({ value: newValue });
+            onChange?.(newValue);
+          }}
+        />
+        <pre>{JSON.stringify(value) || 'undefined'}</pre>
+      </>
+    );
+  },
+} as Meta<typeof TextControl>;
+
+export const Basic: StoryObj<typeof TextControl> = {
+  args: {
+    value: 'Storybook says hi. 👋',
+  },
 };
 
-const Template = (initialValue?: string) => {
-  const [value, setValue] = useState(initialValue);
-  return (
-    <>
-      <TextControl name="Text" value={value} onChange={(newVal) => setValue(newVal)} />
-      <pre>{JSON.stringify(value) || 'undefined'}</pre>
-    </>
-  );
+export const Empty: StoryObj<typeof TextControl> = {
+  args: {
+    value: '',
+  },
 };
 
-export const Basic = () => Template('Hello text');
+export const Undefined: StoryObj<typeof TextControl> = {
+  args: {
+    value: undefined,
+  },
+};
 
-export const Empty = () => Template('');
-
-export const Undefined = () => Template(undefined);
+export const WithMaxLength: StoryObj<typeof TextControl> = {
+  args: {
+    value: "You can't finish this sente",
+    maxLength: 28,
+  },
+};