main repo

node_modules/@radix-ui/react-alert-dialog/src/AlertDialog.stories.tsx

@@ -0,0 +1,353 @@
+import * as React from 'react';
+import { css } from '../../../../stitches.config';
+import * as AlertDialog from '@radix-ui/react-alert-dialog';
+
+export default { title: 'Components/AlertDialog' };
+
+export const Styled = () => (
+  <AlertDialog.Root>
+    <AlertDialog.Trigger className={triggerClass()}>delete everything</AlertDialog.Trigger>
+    <AlertDialog.Portal>
+      <AlertDialog.Overlay className={overlayClass()} />
+      <AlertDialog.Content className={contentClass()}>
+        <AlertDialog.Title className={titleClass()}>Are you sure?</AlertDialog.Title>
+        <AlertDialog.Description className={descriptionClass()}>
+          This will do a very dangerous thing. Thar be dragons!
+        </AlertDialog.Description>
+        <AlertDialog.Action className={actionClass()}>yolo, do it</AlertDialog.Action>
+        <AlertDialog.Cancel className={cancelClass()}>maybe not</AlertDialog.Cancel>
+      </AlertDialog.Content>
+    </AlertDialog.Portal>
+  </AlertDialog.Root>
+);
+
+export const Controlled = () => {
+  const [open, setOpen] = React.useState(false);
+  const [housePurchased, setHousePurchased] = React.useState(false);
+
+  return (
+    <div>
+      <div>
+        <img src="https://i.ibb.co/K54hsKt/house.jpg" alt="a large white house with a red roof" />
+      </div>
+      <AlertDialog.Root open={open} onOpenChange={setOpen}>
+        <AlertDialog.Trigger
+          onClick={(e) => {
+            if (housePurchased) {
+              e.preventDefault();
+              setHousePurchased(false);
+            }
+          }}
+        >
+          {housePurchased ? 'You bought the house! Sell it!' : 'Buy this house'}
+        </AlertDialog.Trigger>
+        <AlertDialog.Portal>
+          <AlertDialog.Overlay className={overlayClass()} />
+          <AlertDialog.Content className={contentClass()}>
+            <AlertDialog.Title>Are you sure?</AlertDialog.Title>
+            <AlertDialog.Description>
+              Houses are very expensive and it looks like you only have €20 in the bank. Maybe
+              consult with a financial advisor?
+            </AlertDialog.Description>
+            <AlertDialog.Action className={actionClass()} onClick={() => setHousePurchased(true)}>
+              buy it anyway
+            </AlertDialog.Action>
+            <AlertDialog.Cancel className={cancelClass()}>
+              good point, I'll reconsider
+            </AlertDialog.Cancel>
+          </AlertDialog.Content>
+        </AlertDialog.Portal>
+      </AlertDialog.Root>
+    </div>
+  );
+};
+
+export const Chromatic = () => (
+  <div
+    style={{
+      display: 'grid',
+      gridTemplateColumns: 'repeat(4, 1fr)',
+      gridTemplateRows: 'repeat(2, 1fr)',
+      height: '100vh',
+    }}
+  >
+    <div>
+      <h1>Uncontrolled</h1>
+      <h2>Closed</h2>
+      <AlertDialog.Root>
+        <AlertDialog.Trigger className={triggerClass()}>delete everything</AlertDialog.Trigger>
+        <AlertDialog.Portal>
+          <AlertDialog.Overlay className={overlayClass()} />
+          <AlertDialog.Content className={chromaticContentClass()}>
+            <AlertDialog.Title className={titleClass()}>Title</AlertDialog.Title>
+            <AlertDialog.Description className={descriptionClass()}>
+              Description
+            </AlertDialog.Description>
+            <AlertDialog.Action className={actionClass()}>Confirm</AlertDialog.Action>
+            <AlertDialog.Cancel className={cancelClass()}>Cancel</AlertDialog.Cancel>
+          </AlertDialog.Content>
+        </AlertDialog.Portal>
+      </AlertDialog.Root>
+
+      <h2>Open</h2>
+      <AlertDialog.Root defaultOpen>
+        <AlertDialog.Trigger className={triggerClass()}>delete everything</AlertDialog.Trigger>
+        <AlertDialog.Portal>
+          <AlertDialog.Overlay
+            className={overlayClass()}
+            style={{ left: 0, bottom: '50%', width: '25%' }}
+          />
+          <AlertDialog.Content
+            className={chromaticContentClass()}
+            style={{ top: '25%', left: '12%' }}
+          >
+            <AlertDialog.Title className={titleClass()}>Title</AlertDialog.Title>
+            <AlertDialog.Description className={descriptionClass()}>
+              Description
+            </AlertDialog.Description>
+            <AlertDialog.Action className={actionClass()}>Confirm</AlertDialog.Action>
+            <AlertDialog.Cancel className={cancelClass()}>Cancel</AlertDialog.Cancel>
+          </AlertDialog.Content>
+        </AlertDialog.Portal>
+      </AlertDialog.Root>
+    </div>
+
+    <div>
+      <h1>Uncontrolled with reordered parts</h1>
+      <h2>Closed</h2>
+      <AlertDialog.Root>
+        <AlertDialog.Portal>
+          <AlertDialog.Overlay className={overlayClass()} />
+          <AlertDialog.Content className={chromaticContentClass()}>
+            <AlertDialog.Title className={titleClass()}>Title</AlertDialog.Title>
+            <AlertDialog.Description className={descriptionClass()}>
+              Description
+            </AlertDialog.Description>
+            <AlertDialog.Action className={actionClass()}>Confirm</AlertDialog.Action>
+            <AlertDialog.Cancel className={cancelClass()}>Cancel</AlertDialog.Cancel>
+          </AlertDialog.Content>
+        </AlertDialog.Portal>
+        <AlertDialog.Trigger className={triggerClass()}>delete everything</AlertDialog.Trigger>
+      </AlertDialog.Root>
+
+      <h2>Open</h2>
+      <AlertDialog.Root defaultOpen>
+        <AlertDialog.Portal>
+          <AlertDialog.Overlay
+            className={overlayClass()}
+            style={{ left: '25%', bottom: '50%', width: '25%' }}
+          />
+          <AlertDialog.Content
+            className={chromaticContentClass()}
+            style={{ top: '25%', left: '37%' }}
+          >
+            <AlertDialog.Title className={titleClass()}>Title</AlertDialog.Title>
+            <AlertDialog.Description className={descriptionClass()}>
+              Description
+            </AlertDialog.Description>
+            <AlertDialog.Action className={actionClass()}>Confirm</AlertDialog.Action>
+            <AlertDialog.Cancel className={cancelClass()}>Cancel</AlertDialog.Cancel>
+          </AlertDialog.Content>
+        </AlertDialog.Portal>
+        <AlertDialog.Trigger className={triggerClass()}>delete everything</AlertDialog.Trigger>
+      </AlertDialog.Root>
+    </div>
+
+    <div>
+      <h1>Controlled</h1>
+      <h2>Closed</h2>
+      <AlertDialog.Root open={false}>
+        <AlertDialog.Trigger className={triggerClass()}>delete everything</AlertDialog.Trigger>
+        <AlertDialog.Portal>
+          <AlertDialog.Overlay className={overlayClass()} />
+          <AlertDialog.Content className={chromaticContentClass()}>
+            <AlertDialog.Title className={titleClass()}>Title</AlertDialog.Title>
+            <AlertDialog.Description className={descriptionClass()}>
+              Description
+            </AlertDialog.Description>
+            <AlertDialog.Action className={actionClass()}>Confirm</AlertDialog.Action>
+            <AlertDialog.Cancel className={cancelClass()}>Cancel</AlertDialog.Cancel>
+          </AlertDialog.Content>
+        </AlertDialog.Portal>
+      </AlertDialog.Root>
+
+      <h2>Open</h2>
+      <AlertDialog.Root open>
+        <AlertDialog.Trigger className={triggerClass()}>delete everything</AlertDialog.Trigger>
+        <AlertDialog.Portal>
+          <AlertDialog.Overlay
+            className={overlayClass()}
+            style={{ left: '50%', bottom: '50%', width: '25%' }}
+          />
+          <AlertDialog.Content
+            className={chromaticContentClass()}
+            style={{ top: '25%', left: '62%' }}
+          >
+            <AlertDialog.Title className={titleClass()}>Title</AlertDialog.Title>
+            <AlertDialog.Description className={descriptionClass()}>
+              Description
+            </AlertDialog.Description>
+            <AlertDialog.Action className={actionClass()}>Confirm</AlertDialog.Action>
+            <AlertDialog.Cancel className={cancelClass()}>Cancel</AlertDialog.Cancel>
+          </AlertDialog.Content>
+        </AlertDialog.Portal>
+      </AlertDialog.Root>
+    </div>
+
+    <div>
+      <h1>Controlled with reordered parts</h1>
+      <h2>Closed</h2>
+      <AlertDialog.Root open={false}>
+        <AlertDialog.Portal>
+          <AlertDialog.Overlay className={overlayClass()} />
+          <AlertDialog.Content className={chromaticContentClass()}>
+            <AlertDialog.Title className={titleClass()}>Title</AlertDialog.Title>
+            <AlertDialog.Description className={descriptionClass()}>
+              Description
+            </AlertDialog.Description>
+            <AlertDialog.Action className={actionClass()}>Confirm</AlertDialog.Action>
+            <AlertDialog.Cancel className={cancelClass()}>Cancel</AlertDialog.Cancel>
+          </AlertDialog.Content>
+        </AlertDialog.Portal>
+        <AlertDialog.Trigger className={triggerClass()}>delete everything</AlertDialog.Trigger>
+      </AlertDialog.Root>
+
+      <h2>Open</h2>
+      <AlertDialog.Root open>
+        <AlertDialog.Portal>
+          <AlertDialog.Overlay
+            className={overlayClass()}
+            style={{ left: '75%', bottom: '50%', width: '25%' }}
+          />
+          <AlertDialog.Content
+            className={chromaticContentClass()}
+            style={{ top: '25%', left: '88%' }}
+          >
+            <AlertDialog.Title className={titleClass()}>Title</AlertDialog.Title>
+            <AlertDialog.Description className={descriptionClass()}>
+              Description
+            </AlertDialog.Description>
+            <AlertDialog.Action className={actionClass()}>Confirm</AlertDialog.Action>
+            <AlertDialog.Cancel className={cancelClass()}>Cancel</AlertDialog.Cancel>
+          </AlertDialog.Content>
+        </AlertDialog.Portal>
+        <AlertDialog.Trigger className={triggerClass()}>delete everything</AlertDialog.Trigger>
+      </AlertDialog.Root>
+    </div>
+
+    <div>
+      <h1>State attributes</h1>
+      <h2>Closed</h2>
+      <AlertDialog.Root>
+        <AlertDialog.Trigger className={triggerAttrClass()}>delete everything</AlertDialog.Trigger>
+        <AlertDialog.Portal>
+          <AlertDialog.Overlay className={overlayAttrClass()} />
+          <AlertDialog.Content className={contentAttrClass()}>
+            <AlertDialog.Title className={titleAttrClass()}>Title</AlertDialog.Title>
+            <AlertDialog.Description className={descriptionAttrClass()}>
+              Description
+            </AlertDialog.Description>
+            <AlertDialog.Action className={actionAttrClass()}>Confirm</AlertDialog.Action>
+            <AlertDialog.Cancel className={cancelAttrClass()}>Cancel</AlertDialog.Cancel>
+          </AlertDialog.Content>
+        </AlertDialog.Portal>
+      </AlertDialog.Root>
+
+      <h2>Open</h2>
+      <AlertDialog.Root defaultOpen>
+        <AlertDialog.Trigger className={triggerAttrClass()}>delete everything</AlertDialog.Trigger>
+        <AlertDialog.Portal>
+          <AlertDialog.Overlay className={overlayAttrClass()} style={{ top: '50%' }} />
+          <AlertDialog.Content className={contentAttrClass()} style={{ top: '75%' }}>
+            <AlertDialog.Title className={titleAttrClass()}>Title</AlertDialog.Title>
+            <AlertDialog.Description className={descriptionAttrClass()}>
+              Description
+            </AlertDialog.Description>
+            <AlertDialog.Action className={actionAttrClass()}>Confirm</AlertDialog.Action>
+            <AlertDialog.Cancel className={cancelAttrClass()}>Cancel</AlertDialog.Cancel>
+          </AlertDialog.Content>
+        </AlertDialog.Portal>
+      </AlertDialog.Root>
+    </div>
+  </div>
+);
+Chromatic.parameters = { chromatic: { disable: false } };
+
+const triggerClass = css({});
+
+const RECOMMENDED_CSS__ALERT_DIALOG__OVERLAY: any = {
+  // ensures overlay is positionned correctly
+  position: 'fixed',
+  top: 0,
+  right: 0,
+  bottom: 0,
+  left: 0,
+};
+
+const overlayClass = css({
+  ...RECOMMENDED_CSS__ALERT_DIALOG__OVERLAY,
+  backgroundColor: 'black',
+  opacity: 0.2,
+});
+
+const RECOMMENDED_CSS__ALERT_DIALOG__CONTENT: any = {
+  // ensures good default position for content
+  position: 'fixed',
+  top: 0,
+  left: 0,
+};
+
+const contentClass = css({
+  ...RECOMMENDED_CSS__ALERT_DIALOG__CONTENT,
+  top: '50%',
+  left: '50%',
+  transform: 'translate(-50%, -50%)',
+  background: 'white',
+  minWidth: 300,
+  minHeight: 150,
+  padding: 50,
+  borderRadius: 10,
+  backgroundColor: 'white',
+  boxShadow: '0 2px 10px rgba(0, 0, 0, 0.12)',
+});
+
+const cancelClass = css({
+  appearance: 'none',
+  padding: 10,
+  border: 'none',
+  background: '$grey100',
+});
+
+const actionClass = css({
+  appearance: 'none',
+  padding: 10,
+  border: 'none',
+  backgroundColor: '$red',
+  color: '$white',
+});
+
+const titleClass = css({});
+
+const descriptionClass = css({});
+
+const chromaticContentClass = css(contentClass, {
+  padding: 10,
+  minWidth: 'auto',
+  minHeight: 'auto',
+});
+
+const styles = {
+  backgroundColor: 'rgba(0, 0, 255, 0.3)',
+  border: '2px solid blue',
+  padding: 10,
+
+  '&[data-state="closed"]': { borderColor: 'red' },
+  '&[data-state="open"]': { borderColor: 'green' },
+};
+const triggerAttrClass = css(styles);
+const overlayAttrClass = css(overlayClass, styles);
+const contentAttrClass = css(chromaticContentClass, styles);
+const cancelAttrClass = css(styles);
+const actionAttrClass = css(styles);
+const titleAttrClass = css(styles);
+const descriptionAttrClass = css(styles);