@cypress-design/react-modal 0.0.2

package/.turbo/turbo-build.log

@@ -0,0 +1,6 @@
+$ yarn build:module && yarn build:types
+$ rollup -c ./rollup.config.mjs
+
+./index.ts → ./dist/index.umd.js, ./dist/index.es.mjs...
+created ./dist/index.umd.js, ./dist/index.es.mjs in 17s
+$ tsc --project ./tsconfig.build.json

package/CHANGELOG.md

@@ -0,0 +1,10 @@
+# @cypress-design/react-modal
+
+## 0.0.2
+
+### Patch Changes
+
+- [#228](https://github.com/cypress-io/cypress-design/pull/228) [`3c5e87e`](https://github.com/cypress-io/cypress-design/commit/3c5e87e56937be486c10c928170ee7b64eb622c6) Thanks [@elevatebart](https://github.com/elevatebart)! - creation of modal component
+
+- Updated dependencies [[`3c5e87e`](https://github.com/cypress-io/cypress-design/commit/3c5e87e56937be486c10c928170ee7b64eb622c6)]:
+  - @cypress-design/constants-modal@0.0.2

package/Modal.tsx

@@ -0,0 +1,106 @@
+import * as React from 'react'
+import { createPortal } from 'react-dom'
+import clsx from 'clsx'
+import {
+  IconActionQuestionMarkCircle,
+  IconActionDelete,
+} from '@cypress-design/react-icon'
+import {
+  ClassBackDrop,
+  ClassCloseButton,
+  ClassContent,
+  ClassHelpLink,
+  ClassHelpLinkDash,
+  ClassModal,
+  ClassModalContainer,
+  ClassTitle,
+  ClassTitleBox,
+  disableBodyScroll,
+  freeBodyScroll,
+} from '@cypress-design/constants-modal'
+
+export interface ModalProps {
+  title?: string
+  helpLink?: string
+  children?: React.ReactNode
+  show?: boolean
+  onClose?: () => void
+}
+
+export const Modal: React.FC<ModalProps> = ({
+  show = false,
+  title,
+  helpLink,
+  onClose,
+  children,
+}) => {
+  React.useEffect(() => {
+    if (show) {
+      disableBodyScroll()
+    } else {
+      freeBodyScroll()
+    }
+  }, [show])
+
+  React.useEffect(
+    () => () => {
+      freeBodyScroll()
+    },
+    []
+  )
+
+  return (
+    <>
+      {createPortal(
+        <div>
+          {show ? (
+            <div className={ClassBackDrop} onClick={() => onClose?.()}></div>
+          ) : null}
+          {show ? (
+            <div
+              className={ClassModalContainer}
+              tabIndex={-1}
+              aria-modal="true"
+              role="modal"
+            >
+              <div className={ClassModal}>
+                <div className={ClassTitleBox}>
+                  <div className={ClassTitle}>{title}</div>
+                  {helpLink ? <div className={ClassHelpLinkDash} /> : null}
+                  {helpLink ? (
+                    <a href={helpLink} className={ClassHelpLink}>
+                      Need help
+                      <IconActionQuestionMarkCircle
+                        className="ml-[4px]"
+                        stroke-color="indigo-500"
+                        fill-color="indigo-100"
+                      />
+                    </a>
+                  ) : null}
+
+                  <div className="grow" />
+                  <button
+                    aria-label="Close"
+                    className={ClassCloseButton}
+                    onClick={() => onClose?.()}
+                  >
+                    <IconActionDelete
+                      className="children:transition-all"
+                      stroke-color="gray-400"
+                      hover-stroke-color="gray-700"
+                      interactiveColorsOnGroup
+                    />
+                  </button>
+                </div>
+                <div className={ClassContent}>{children}</div>
+              </div>
+            </div>
+          ) : null}
+        </div>,
+        document.body
+      )}
+    </>
+  )
+}
+
+export default Modal

package/ModalReact.cy.tsx

@@ -0,0 +1,39 @@
+/// <reference types="cypress" />
+
+import * as React from 'react'
+import { mount } from 'cypress/react18'
+import Modal from './Modal'
+import assertions from '../assertions'
+
+const ComponentUsingModal = (options: {
+  title?: string
+  helpLink?: string
+}) => {
+  const [visibleModal, setVisibleModal] = React.useState(false)
+  return (
+    <div>
+      <div className="h-[900px] w-[50px] bg-red-200"></div>
+      <button onClick={() => setVisibleModal(true)}>Open Modal</button>
+      <div className="h-[900px] w-[50px] bg-red-200"></div>
+      <Modal
+        {...options}
+        show={visibleModal}
+        onClose={() => setVisibleModal(false)}
+      >
+        <p>
+          Contents of the modal: Lorem ipsum dolor sit amet consectetur
+          adipisicing elit. Id perspiciatis hic ad minima ex recusandae autem
+          incidunt, perferendis, illo voluptatum repudiandae iste voluptate
+          reiciendis quam officiis voluptas laboriosam eligendi explicabo!
+        </p>
+      </Modal>
+    </div>
+  )
+}
+
+describe('Modal', () => {
+  function mountStory(options: { title?: string; helpLink?: string }) {
+    mount(<ComponentUsingModal {...options} />)
+  }
+  assertions(mountStory)
+})

package/ReadMe.md

@@ -0,0 +1,30 @@
+# Modal
+
+## Install
+
+```bash
+npm install @cypress-design/react-modal
+```
+
+or with yarn
+
+```bash
+yarn add @cypress-design/react-modal
+```
+
+```tsx live
+import React from 'react'
+import Button from '@cypress-design/react-button'
+import Modal from '@cypress-design/react-modal'
+const [visible, setVisible] = React.useState(false)
+
+export default () => {
+  return (<Modal show={visible} title="modal" onClose={() => setVisible(false)}>
+    Lorem ipsum dolor sit amet consectetur adipisicing elit. Id perspiciatis hic
+    ad minima ex recusandae autem incidunt, perferendis, illo voluptatum
+    repudiandae iste voluptate reiciendis quam officiis voluptas laboriosam
+    eligendi explicabo!
+  </Modal>
+  <Button @click={() => setVisible(true)}>Open Modal</Button>)
+}
+```

package/dist/Modal.d.ts

@@ -0,0 +1,11 @@
+import * as React from 'react';
+export interface ModalProps {
+    title?: string;
+    helpLink?: string;
+    children?: React.ReactNode;
+    show?: boolean;
+    onClose?: () => void;
+}
+export declare const Modal: React.FC<ModalProps>;
+export default Modal;
+//# sourceMappingURL=Modal.d.ts.map

package/dist/Modal.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Modal.d.ts","sourceRoot":"./","sources":["Modal.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAqB9B,MAAM,WAAW,UAAU;IACzB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC1B,IAAI,CAAC,EAAE,OAAO,CAAA;IACd,OAAO,CAAC,EAAE,MAAM,IAAI,CAAA;CACrB;AAED,eAAO,MAAM,KAAK,EAAE,KAAK,CAAC,EAAE,CAAC,UAAU,CA0EtC,CAAA;AAED,eAAe,KAAK,CAAA"}

package/dist/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from './Modal';
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"./","sources":["index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,SAAS,CAAA"}