ui: add components

apps/storybook/stories/dialog.stories.tsx

@@ -0,0 +1,56 @@
+import { ComponentMeta } from '@storybook/react';
+import { Button, Dialog } from '@tih/ui';
+import React, { useState } from 'react';
+
+export default {
+  title: 'Dialog',
+  component: Dialog,
+  argTypes: {
+    title: {
+      control: 'text',
+    },
+  },
+} as ComponentMeta<typeof Dialog>;
+
+export function Basic({ children, title }) {
+  const [isShown, setIsShown] = useState(false);
+
+  return (
+    <div>
+      <Button label="Open" variant="primary" onClick={() => setIsShown(true)} />
+      <Dialog
+        isShown={isShown}
+        primaryButton={
+          <Button
+            display="block"
+            label="OK"
+            variant="primary"
+            onClick={() => setIsShown(false)}
+          />
+        }
+        secondaryButton={
+          <Button
+            display="block"
+            label="Cancel"
+            variant="tertiary"
+            onClick={() => setIsShown(false)}
+          />
+        }
+        title={title}
+        onClose={() => setIsShown(false)}>
+        {children}
+      </Dialog>
+    </div>
+  );
+}
+
+Basic.args = {
+  title: 'Lorem ipsum, dolor sit amet',
+  children: (
+    <div>
+      Lorem ipsum, dolor sit amet consectetur adipisicing elit. Eius aliquam
+      laudantium explicabo pariatur iste dolorem animi vitae error totam. At
+      sapiente aliquam accusamus facere veritatis.
+    </div>
+  ),
+};