feat: initial work on modal component

example/src/App.tsx

@@ -1,49 +1,15 @@
 import React from 'react'
-import { theme, CSSReset, Button, Flex, Image } from 'avocado-ui'
+import { theme, CSSReset, Modal } from 'avocado-ui'
 import { ThemeProvider } from '@emotion/react'
 
-// import { ImageDemo, Avatar, Text, Header } from './components'
-
-const imgURL = 'https://images.unsplash.com/photo-1543414347-1c348021f279?w=300'
-const altText = 'Large, white tower'
-
 const App = () => {
   return (
     // Pass custom theme to theme provider
     <ThemeProvider theme={theme}>
       <CSSReset />
-      <Flex alignItems='flex-start'>
-        <p>Flex Item</p>
-        <Image src={imgURL} alt={altText} />
-        <Button>Random Button Element</Button>
-      </Flex>
-      {/* <Flex alignContent='stretch' className='new_flex' flexWrap='wrap' gap={5}>
-        <FlexItem flex='900px'>
-          <Button loading={true}>Get Started</Button>
-        </FlexItem>
-
-        <FlexItem flex={1}>
-          <Header>Header</Header>
-        </FlexItem>
-
-        <FlexItem>
-          <Flex gap={20}>
-            <FlexItem>
-              <Text />
-            </FlexItem>
-
-            <FlexItem>
-              <Text />
-            </FlexItem>
-          </Flex>
-        </FlexItem>
-
-        <FlexItem>
-          <Avatar />
-        </FlexItem>
-
-        <ImageDemo />
-      </Flex> */}
+      <Modal open={false} onClose={() => <p>hey</p>}>
+        Children
+      </Modal>
     </ThemeProvider>
   )
 }

package.json

@@ -72,7 +72,8 @@
     "@commitlint/config-conventional": "^12.1.1",
     "@emotion/is-prop-valid": "^1.1.0",
     "@emotion/react": "^11.1.5",
-    "@emotion/styled": "^11.1.5"
+    "@emotion/styled": "^11.1.5",
+    "@headlessui/react": "^1.2.0"
   },
   "bugs": {
     "url": "https://github.com/vick_onrails/avocado-ui/issues"

src/components/index.ts

@@ -9,3 +9,4 @@ export * from './avatar'
 export * from './image'
 export * from './css-reset'
 export * from './flex'
+export * from './modal'

src/components/modal/index.ts

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

src/components/modal/modal.tsx

@@ -0,0 +1,40 @@
+import React, { FC } from 'react'
+import { Dialog } from '@headlessui/react'
+
+// const { Description, Overlay, Title } = Dialog
+
+const Modal: FC<ModalProps> = ({
+  children,
+  open,
+  onClose,
+  //   destroy,
+  initialFocus,
+  unmount,
+  as
+}) => {
+  return (
+    <Dialog
+      onClose={onClose}
+      //   static={destroy}
+      unmount={unmount}
+      as={as}
+      initialFocus={initialFocus}
+      open={open}
+    >
+      {children}
+    </Dialog>
+  )
+}
+
+type ModalProps = PrimitiveModalProps
+
+interface PrimitiveModalProps {
+  open: boolean | undefined
+  onClose: (item: false) => void
+  destroy?: boolean
+  unmount?: boolean
+  as?: React.ElementType<any>
+  initialFocus?: React.MutableRefObject<any>
+}
+
+export { Modal }

yarn.lock

@@ -1453,6 +1453,11 @@
   dependencies:
     "@hapi/hoek" "^8.3.0"
 
+"@headlessui/react@^1.2.0":
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/@headlessui/react/-/react-1.2.0.tgz#e48652bfce82ddf73d7f331faeb9db6526ee6874"
+  integrity sha512-19DkLz8gDgbi+WvkoTzi9vs0NK9TJf94vbYhMzB4LYJo03Kili0gmvXT9CiKZoxXZ7YAvy/b1U1oQKEnjWrqxw==
+
 "@jest/console@^24.7.1", "@jest/console@^24.9.0":
   version "24.9.0"
   resolved "https://registry.yarnpkg.com/@jest/console/-/console-24.9.0.tgz#79b1bc06fb74a8cfb01cbdedf945584b1b9707f0"