[G2M] dialog - add headless ui examples

package.json

@@ -56,6 +56,7 @@
     "tailwindcss": "yarn:@tailwindcss/postcss7-compat@^2.1.2"
   },
   "dependencies": {
+    "@headlessui/react": "^1.4.0",
     "clsx": "^1.1.1",
     "goober": "^2.0.39",
     "prop-types": "^15.7.2"

src/base-components/headlessui-dialog-base.js

@@ -0,0 +1,86 @@
+import React, { useRef } from 'react'
+import PropTypes from 'prop-types'
+import clsx from 'clsx'
+
+import { Dialog } from '@headlessui/react'
+
+import { useComponentIsActive } from '../hooks'
+
+
+const baseClasses = Object.freeze({
+  modal: 'fixed z-20 max-h-full max-w-full top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2',
+  overlay: 'absolute z-10 inset-0 w-full h-full bg-black bg-opacity-50 transition-opacity duration-200',
+})
+
+const ChildWithProps = ({ children, ...props }) => (React.Children.map(children, (child) => {
+  if (React.isValidElement(child)) {
+    return React.cloneElement(child, { ...props })
+  }
+  return child
+}))
+ChildWithProps.propTypes = { children: PropTypes.node.isRequired }
+
+const HeadlessUIDialog = ({ children, classes, modal, button, open, onClick, onClose }) => {
+  const ref = useRef(null)
+  const { ref: activeRef, componentIsActive, setComponentIsActive } = useComponentIsActive()
+  const controlledOpen = open || open === false || open === ''
+  let _open = componentIsActive
+
+  if (controlledOpen) {
+    _open = open
+  }
+
+  const handleButtonClick = () => {
+    if (!controlledOpen) {
+      setComponentIsActive((state) => !state)
+    }
+    onClick()
+  }
+
+  const handleClose = () => {
+    if (!controlledOpen) {
+      return
+    }
+    onClose()
+  }
+
+  const unControlledProps = controlledOpen ? {} : { onClick: handleButtonClick }
+
+  return (
+    <>
+      <div ref={activeRef} className={classes.root}>
+        {button && <ChildWithProps { ...unControlledProps }>
+          {onClick && <span onClick={handleButtonClick}>{button}</span>}
+          {!onClick && button}
+        </ChildWithProps>}
+
+        <Dialog initialFocus={ref} open={_open} onClose={handleClose}>
+          <div ref={ref} className={clsx({ [`${baseClasses.modal} ${classes.modal}`]: modal, [classes.dialog]: !modal })}>
+            {children}
+          </div>
+        </Dialog>
+      </div>
+      {_open && modal && <div className={`${baseClasses.overlay} ${classes.overlay}`}></div>}
+    </>
+  )
+}
+
+HeadlessUIDialog.propTypes = {
+  children: PropTypes.node.isRequired,
+  classes: PropTypes.object,
+  modal: PropTypes.bool,
+  button: PropTypes.node,
+  open: PropTypes.bool,
+  onClick: PropTypes.func,
+  onClose: PropTypes.func,
+}
+HeadlessUIDialog.defaultProps = {
+  classes: { root: '', button: '', modal: '', dialog: '', overlay: '' },
+  modal: false,
+  button: null,
+  open: undefined,
+  onClick: () => {},
+  onClose: () => {},
+}
+
+export default HeadlessUIDialog

stories/dialog.stories.js

@@ -1,6 +1,7 @@
 import React from 'react'
 
 import { DialogBase } from '../src/base-components'
+import HeadlessUIDialog from '../src/base-components/headlessui-dialog-base'
 
 
 export default {
@@ -25,39 +26,76 @@ export default {
 export const Base = () => {
   const button = (<button>Open Dialog</button>)
   return (
-    <DialogBase classes={{ dialog: 'w-screen' }} button={button}>
-      <p>
-        I am just a simple dialog.
-        More improvements needed to make my usage more flexible.
-      </p>
-    </DialogBase>
+    <>
+      <DialogBase classes={{ dialog: 'w-screen' }} button={button}>
+        <p>
+          I am just a simple dialog.
+          More improvements needed to make my usage more flexible.
+        </p>
+      </DialogBase>
+
+      <div className='mt-20'>
+        <p>Headless Dialog example:</p>
+        <HeadlessUIDialog button={button}>
+          <p>
+            I am just a simple dialog.
+            More improvements needed to make my usage more flexible.
+          </p>
+        </HeadlessUIDialog>
+      </div>
+    </>
   )
 }
 
 export const BaseModal = () => {
   const button = (<button>Open Modal</button>)
   return (
-    <DialogBase modal button={button} classes={{ modal: 'bg-white' }}>
-      <p>
-        I am just a simple modal.
-        More improvements needed to make my usage more flexible.
-      </p>
-    </DialogBase>
+    <>
+      <DialogBase modal button={button} classes={{ modal: 'bg-white' }}>
+        <p>
+          I am just a simple modal.
+          More improvements needed to make my usage more flexible.
+        </p>
+      </DialogBase>
+
+      <div className='mt-20'>
+        <p>Headless Dialog example:</p>
+        <HeadlessUIDialog modal button={button} classes={{ modal: 'bg-white' }}>
+          <p>
+            I am just a simple dialog.
+            More improvements needed to make my usage more flexible.
+          </p>
+        </HeadlessUIDialog>
+      </div>
+    </>
   )
 }
 
 export const CustomDialog = () => {
-  const button = (<button className='focus:outline-none'>Open Dialog</button>)
+  const button = (<button className='focus:outline-none w-32 p-4 rounded-md cursor-pointer bg-blue-50 hover:bg-blue-100'>
+    Open Dialog
+  </button>)
   const customClasses = {
-    button: 'w-32 p-4 rounded-md cursor-pointer bg-blue-50 hover:bg-blue-100',
     dialog: 'w-96 p-4 shadow-md mt-1 bg-blue-200',
   }
   return (
-    <DialogBase classes={customClasses} button={button}>
-      <p>
-        I am just a simple dialog.
-        More improvements needed to make my usage more flexible.
-      </p>
-    </DialogBase>
+    <>
+      <DialogBase classes={customClasses} button={button}>
+        <p>
+          I am just a simple dialog.
+          More improvements needed to make my usage more flexible.
+        </p>
+      </DialogBase>
+
+      <div className='mt-20'>
+        <p>Headless Dialog example:</p>
+        <HeadlessUIDialog classes={customClasses} button={button}>
+          <p>
+            I am just a simple dialog.
+            More improvements needed to make my usage more flexible.
+          </p>
+        </HeadlessUIDialog>
+      </div>
+    </>
   )
 }

tailwind.config.js

@@ -1033,12 +1033,12 @@ module.exports = {
   plugins: [
     function({ addUtilities, theme }) {
 
-      let newUtilities = {};
-      const boxShadowPrefix = '0 0 0 1px';
-      const colors = theme('colors');
+      let newUtilities = {}
+      const boxShadowPrefix = '0 0 0 1px'
+      const colors = theme('colors')
       Object.keys(colors).forEach(color => {
 
-        const colorData = colors[color];
+        const colorData = colors[color]
         if (typeof colorData === 'string') {
           newUtilities[`.shadow-${color}`] = {
             boxShadow: `${boxShadowPrefix} ${colorData}`,
@@ -1049,12 +1049,12 @@ module.exports = {
             newUtilities[`.shadow-${color}-${colorVariation}`] = {
               boxShadow: `${boxShadowPrefix} ${colorData[colorVariation]}`,
             }
-          });
+          })
         }
-      });
+      })
       addUtilities(newUtilities, {
-        variants: ['focus', 'hover', 'active']
-      });
-    }
+        variants: ['focus', 'hover', 'active'],
+      })
+    },
   ],
 }

yarn.lock

@@ -1249,6 +1249,11 @@
   dependencies:
     purgecss "^3.1.3"
 
+"@headlessui/react@^1.4.0":
+  version "1.4.0"
+  resolved "https://registry.npmjs.org/@headlessui/react/-/react-1.4.0.tgz#c6d424d8ab10ac925e4423d7f3cbab02c30d736a"
+  integrity sha512-C+FmBVF6YGvqcEI5fa2dfVbEaXr2RGR6Kw1E5HXIISIZEfsrH/yuCgsjWw5nlRF9vbCxmQ/EKs64GAdKeb8gCw==
+
 "@istanbuljs/load-nyc-config@^1.0.0":
   version "1.1.0"
   resolved "https://registry.npmjs.org/@istanbuljs/load-nyc-config/-/load-nyc-config-1.1.0.tgz#fd3db1d59ecf7cf121e80650bb86712f9b55eced"