feat: Dialog/modal

packages/components/src/elements/Dialog/Dialog.stories.tsx

@@ -0,0 +1,31 @@
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogTitle,
+  DialogTrigger,
+} from './';
+import { ComponentStory, ComponentMeta } from '@storybook/react';
+import { Button } from '../Button';
+
+export default {
+  title: 'Elements/Dialog',
+  component: Dialog,
+  argTypes: {},
+} as ComponentMeta<typeof Dialog>;
+
+const Template: ComponentStory<typeof Dialog> = (args) => (
+  <Dialog>
+    <DialogTrigger asChild>
+      <Button>Edit profile</Button>
+    </DialogTrigger>
+    <DialogContent>
+      <DialogTitle>Edit profile</DialogTitle>
+      <DialogDescription>
+        Make changes to your profile here. Click save when you're done.
+      </DialogDescription>
+    </DialogContent>
+  </Dialog>
+);
+
+export const Default = Template.bind({});

packages/components/src/elements/Dialog/Dialog.test.tsx

@@ -0,0 +1,10 @@
+import { render } from '@testing-library/react';
+
+import { Dialog } from './Dialog';
+
+describe('Dialog', () => {
+  it('renders without throwing', () => {
+    const { container } = render(<Dialog />);
+    expect(container).toBeInTheDocument();
+  });
+});

packages/components/src/elements/Dialog/Dialog.tsx

@@ -0,0 +1,76 @@
+import React from 'react';
+import * as DialogPrimitive from '@radix-ui/react-dialog';
+import { Cross1Icon } from '@radix-ui/react-icons';
+// import { IconButton } from './IconButton';
+import { CSS, styled } from '../../theme';
+import { overlayStyles, panelStyles } from '../../common';
+
+const Dialog = DialogPrimitive.Root;
+const DialogTrigger = DialogPrimitive.Trigger;
+
+const StyledOverlay = styled(DialogPrimitive.Overlay, overlayStyles, {
+  position: 'fixed',
+  top: 0,
+  right: 0,
+  bottom: 0,
+  left: 0,
+});
+
+const StyledContent = styled(DialogPrimitive.Content, panelStyles, {
+  position: 'fixed',
+  top: '50%',
+  left: '50%',
+  transform: 'translate(-50%, -50%)',
+  minWidth: 200,
+  maxHeight: '85vh',
+  padding: '$4',
+  marginTop: '-5vh',
+  // animation: `${fadeIn} 125ms linear, ${moveDown} 125ms cubic-bezier(0.22, 1, 0.36, 1)`,
+
+  // Among other things, prevents text alignment inconsistencies when dialog can't be centered in the viewport evenly.
+  // Affects animated and non-animated dialogs alike.
+  willChange: 'transform',
+
+  '&:focus': {
+    outline: 'none',
+  },
+});
+
+const StyledCloseButton = styled(DialogPrimitive.Close, {
+  position: 'absolute',
+  top: '$2',
+  right: '$2',
+});
+
+type DialogContentPrimitiveProps = React.ComponentProps<
+  typeof DialogPrimitive.Content
+>;
+type DialogContentProps = DialogContentPrimitiveProps & { css?: CSS };
+
+const DialogContent = React.forwardRef<
+  React.ElementRef<typeof StyledContent>,
+  DialogContentProps
+>(({ children, ...props }, forwardedRef) => (
+  <DialogPrimitive.Portal>
+    <StyledOverlay />
+    <StyledContent {...props} ref={forwardedRef}>
+      {children}
+      <StyledCloseButton asChild>
+        <Cross1Icon />
+      </StyledCloseButton>
+    </StyledContent>
+  </DialogPrimitive.Portal>
+));
+
+const DialogClose = DialogPrimitive.Close;
+const DialogTitle = DialogPrimitive.Title;
+const DialogDescription = DialogPrimitive.Description;
+
+export {
+  Dialog,
+  DialogTrigger,
+  DialogContent,
+  DialogClose,
+  DialogTitle,
+  DialogDescription,
+};

packages/components/src/elements/Dialog/index.ts

@@ -0,0 +1 @@
+export * from './Dialog';