add example of controlled dialog

packages/opub-ui/package.json

@@ -1,7 +1,7 @@
 {
   "name": "opub-ui",
   "description": "OPub UI Library",
-  "version": "0.3.30",
+  "version": "0.3.31",
   "private": false,
   "license": "MIT",
   "author": "CivicDataLab <tech@civicdatalab.in>",

packages/opub-ui/src/components/Dialog/Dialog.stories.tsx

@@ -1,3 +1,4 @@
+import React from 'react';
 import { Meta, StoryObj } from '@storybook/react';
 
 import { Button } from '../Button';
@@ -43,6 +44,40 @@ export const Default: Story = {
   },
 };
 
+export const Controlled: Story = {
+  render: ({ ...args }) => {
+    const [open, setOpen] = React.useState(false);
+    return (
+      <div>
+        <Button
+          onClick={() => {
+            setOpen(true);
+          }}
+        >
+          Open Dialog
+        </Button>
+        <Dialog open={open} onOpenChange={setOpen}>
+          <Dialog.Content {...args} />
+        </Dialog>
+      </div>
+    );
+  },
+  args: {
+    title: 'Dialog Title',
+    children: 'Make changes to your profile here. Click save when youre done.',
+    primaryAction: {
+      content: 'Add Instagram',
+      onAction: () => console.log('Add Instagram'),
+    },
+    secondaryActions: [
+      {
+        content: 'Learn more',
+        onAction: () => console.log('Learn more'),
+      },
+    ],
+  },
+};
+
 export const Large: Story = {
   ...Default,
   args: {

packages/opub-ui/src/components/TextField/TextField.tsx

@@ -1,6 +1,7 @@
+import React from 'react';
+
 import { TextFieldProps } from '../../types/input';
 import { Input } from '../Input/Input';
-import React from 'react';
 
 export type Props = TextFieldProps & {
   name: string;