From cb0fed5c7e10a68e7b7180fb6ab5274570b6a155 Mon Sep 17 00:00:00 2001
From: Pete Watters <2938440+pete-watters@users.noreply.github.com>
Date: Tue, 27 Aug 2024 10:09:01 +0100
Subject: [PATCH] fix: rename dialog as sheet, ref leather-io/issues#268

---
 packages/ui/src/components/dialog/index.ts    |  2 --
 packages/ui/src/components/sheet/index.ts     |  2 ++
 .../sheet-footer.web.tsx}                     |  4 +--
 .../sheet-header.web.tsx}                     |  4 +--
 .../sheet.web.stories.tsx}                    | 31 ++++++++++++-------
 .../dialog.web.tsx => sheet/sheet.web.tsx}    | 10 +++---
 packages/ui/web.ts                            |  2 +-
 7 files changed, 31 insertions(+), 24 deletions(-)
 delete mode 100644 packages/ui/src/components/dialog/index.ts
 create mode 100644 packages/ui/src/components/sheet/index.ts
 rename packages/ui/src/components/{dialog/dialog-footer.web.tsx => sheet/sheet-footer.web.tsx} (76%)
 rename packages/ui/src/components/{dialog/dialog-header.web.tsx => sheet/sheet-header.web.tsx} (87%)
 rename packages/ui/src/components/{dialog/dialog.web.stories.tsx => sheet/sheet.web.stories.tsx} (74%)
 rename packages/ui/src/components/{dialog/dialog.web.tsx => sheet/sheet.web.tsx} (93%)

diff --git a/packages/ui/src/components/dialog/index.ts b/packages/ui/src/components/dialog/index.ts
deleted file mode 100644
index 86f93d0e2..000000000
--- a/packages/ui/src/components/dialog/index.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-export { Dialog } from './dialog.web';
-export { DialogHeader } from './dialog-header.web';
diff --git a/packages/ui/src/components/sheet/index.ts b/packages/ui/src/components/sheet/index.ts
new file mode 100644
index 000000000..7cbd08184
--- /dev/null
+++ b/packages/ui/src/components/sheet/index.ts
@@ -0,0 +1,2 @@
+export { Sheet } from './sheet.web';
+export { SheetHeader } from './sheet-header.web';
diff --git a/packages/ui/src/components/dialog/dialog-footer.web.tsx b/packages/ui/src/components/sheet/sheet-footer.web.tsx
similarity index 76%
rename from packages/ui/src/components/dialog/dialog-footer.web.tsx
rename to packages/ui/src/components/sheet/sheet-footer.web.tsx
index 07be9e450..eb0f19194 100644
--- a/packages/ui/src/components/dialog/dialog-footer.web.tsx
+++ b/packages/ui/src/components/sheet/sheet-footer.web.tsx
@@ -1,10 +1,10 @@
 import { Flex, FlexProps } from 'leather-styles/jsx';
 
-interface DialogFooterProps extends FlexProps {
+interface SheetFooterProps extends FlexProps {
   children: React.ReactNode;
 }
 
-export function DialogFooter({ children, ...props }: DialogFooterProps) {
+export function SheetFooter({ children, ...props }: SheetFooterProps) {
   return (
     <Flex
       gap="space.05"
diff --git a/packages/ui/src/components/dialog/dialog-header.web.tsx b/packages/ui/src/components/sheet/sheet-header.web.tsx
similarity index 87%
rename from packages/ui/src/components/dialog/dialog-header.web.tsx
rename to packages/ui/src/components/sheet/sheet-header.web.tsx
index ec0f90a57..b4302c8a2 100644
--- a/packages/ui/src/components/dialog/dialog-header.web.tsx
+++ b/packages/ui/src/components/sheet/sheet-header.web.tsx
@@ -5,13 +5,13 @@ import { Flex, styled } from 'leather-styles/jsx';
 import { CloseIcon } from '../../icons/index.web';
 import { IconButton } from '../icon-button/icon-button.web';
 
-interface DialogHeaderProps {
+interface SheetHeaderProps {
   onClose?(): void;
   title?: ReactNode;
   variant?: 'default' | 'large';
 }
 
-export function DialogHeader({ onClose, title, variant = 'default' }: DialogHeaderProps) {
+export function SheetHeader({ onClose, title, variant = 'default' }: SheetHeaderProps) {
   return (
     <Flex
       justifyContent="flex-end"
diff --git a/packages/ui/src/components/dialog/dialog.web.stories.tsx b/packages/ui/src/components/sheet/sheet.web.stories.tsx
similarity index 74%
rename from packages/ui/src/components/dialog/dialog.web.stories.tsx
rename to packages/ui/src/components/sheet/sheet.web.stories.tsx
index 81377496a..0eb740a1b 100644
--- a/packages/ui/src/components/dialog/dialog.web.stories.tsx
+++ b/packages/ui/src/components/sheet/sheet.web.stories.tsx
@@ -4,42 +4,49 @@ import type { Meta } from '@storybook/react';
 import { Box, Flex } from 'leather-styles/jsx';
 
 import { Button } from '../button/button.web';
-import { DialogHeader } from './dialog-header.web';
-import { Dialog as Component } from './dialog.web';
+import { SheetHeader } from './sheet-header.web';
+import { Sheet as Component } from './sheet.web';
 
 const meta: Meta<typeof Component> = {
   component: Component,
   tags: ['autodocs'],
-  title: 'Dialog',
+  title: 'Sheet',
+  parameters: {
+    docs: {
+      description: {
+        component: 'The Sheet component is used to display a modal/dialog sheet.',
+      },
+    },
+  },
 };
 
 export default meta;
 
-export function Dialog() {
+export function Sheet() {
   const [isShowing, setIsShowing] = useState(false);
   return (
     <>
       <Button onClick={() => setIsShowing(!isShowing)}>Open</Button>
       <Component
-        header={<DialogHeader title="Leather" />}
+        header={<SheetHeader title="Leather" />}
         isShowing={isShowing}
         onClose={() => setIsShowing(false)}
       >
         <Box textAlign="center" height="60vh">
-          Let's start a dialogue.
+          Let's start talk sheet.
         </Box>
       </Component>
     </>
   );
 }
 
-export function DialogWithFooter() {
+export function SheetWithFooter() {
   const [isShowing, setIsShowing] = useState(false);
   return (
     <>
       <Button onClick={() => setIsShowing(!isShowing)}>Open</Button>
       <Component
-        header={<DialogHeader title="Send" />}
+        header={<SheetHeader title="Send" />}
         isShowing={isShowing}
         onClose={() => setIsShowing(false)}
         footer={
@@ -49,20 +56,20 @@ export function DialogWithFooter() {
         }
       >
         <Box textAlign="center" height="60vh">
-          Let's start a dialogue.
+          Let's talk sheet.
         </Box>
       </Component>
     </>
   );
 }
 
-export function DialogWithButtonsFooter() {
+export function SheetWithButtonsFooter() {
   const [isShowing, setIsShowing] = useState(false);
   return (
     <>
       <Button onClick={() => setIsShowing(!isShowing)}>Open</Button>
       <Component
-        header={<DialogHeader title="Send" />}
+        header={<SheetHeader title="Send" />}
         isShowing={isShowing}
         onClose={() => setIsShowing(false)}
         footer={
@@ -77,7 +84,7 @@ export function DialogWithButtonsFooter() {
         }
       >
         <Box textAlign="center" height="60vh">
-          Let's start a dialogue.
+          Let's talk sheet.
         </Box>
       </Component>
     </>
diff --git a/packages/ui/src/components/dialog/dialog.web.tsx b/packages/ui/src/components/sheet/sheet.web.tsx
similarity index 93%
rename from packages/ui/src/components/dialog/dialog.web.tsx
rename to packages/ui/src/components/sheet/sheet.web.tsx
index d951e87c0..47e03e6ae 100644
--- a/packages/ui/src/components/dialog/dialog.web.tsx
+++ b/packages/ui/src/components/sheet/sheet.web.tsx
@@ -7,13 +7,13 @@ import { token } from 'leather-styles/tokens';
 
 import { pxStringToNumber } from '@leather.io/utils';
 
-import { DialogFooter } from './dialog-footer.web';
+import { SheetFooter } from './sheet-footer.web';
 
-export interface DialogProps {
+export interface SheetProps {
   isShowing: boolean;
   onClose?(): void;
 }
-interface RadixDialogProps extends DialogProps {
+interface RadixDialogProps extends SheetProps {
   children: ReactNode;
   footer?: ReactNode;
   header?: ReactElement<any, string | JSXElementConstructor<any>>;
@@ -33,7 +33,7 @@ function getContentMaxHeight(maxHeightOffset: number) {
   return `calc(${virtualHeight}vh - ${maxHeightOffset}px)`;
 }
 
-export function Dialog({
+export function Sheet({
   children,
   footer,
   header,
@@ -93,7 +93,7 @@ export function Dialog({
             ) : (
               children
             )}
-            {footer && <DialogFooter>{footer}</DialogFooter>}
+            {footer && <SheetFooter>{footer}</SheetFooter>}
           </RadixDialog.Content>
         </RadixDialog.Overlay>
       </RadixDialog.Portal>
diff --git a/packages/ui/web.ts b/packages/ui/web.ts
index 8e54f242b..2b18cb03e 100644
--- a/packages/ui/web.ts
+++ b/packages/ui/web.ts
@@ -4,7 +4,7 @@ export * from './src/components/avatar';
 export { BulletSeparator } from './src/components/bullet-separator/bullet-separator.web';
 export { Button, type ButtonProps } from './src/components/button/button.web';
 export { Callout } from './src/components/callout/callout.web';
-export * from './src/components/dialog';
+export * from './src/components/sheet';
 export { DropdownMenu } from './src/components/dropdown-menu/dropdown-menu.web';
 export { Flag, type FlagProps } from './src/components/flag/flag.web';
 export { IconButton } from './src/components/icon-button/icon-button.web';