feat: Add confirm component (#53)

* feat: Add `modal` component

* feat: Update control params

* feat: Update avatar type

* feat: Update confirm

* docs: Update modal docs

* docs: Update confirm modal docs

* fix: Fixed import path

* feat: Update title and button name

apps/mibao-ui-docs/src/app/pages/confirm.stories.tsx

@@ -0,0 +1,48 @@
+import { Story, Meta } from '@storybook/react'
+import React from 'react'
+import {
+  ConfirmProvider, MibaoProvider, useConfirm, Button as MibaoButton, ConfirmProps
+} from 'mibao-ui'
+import { Box, Code } from '@chakra-ui/react'
+
+export default {
+  component: ConfirmProvider,
+  title: 'Components/Confirm',
+  argTypes: {
+    onConfirm: {
+      action: 'onConfirm'
+    },
+    onCancel: {
+      action: 'onCancel'
+    }
+  }
+} as Meta
+
+const args: ConfirmProps = {
+  title: '',
+  content: 'Content Content Content Content Content Content Content Content',
+  confirmText: 'OK',
+  cancelText: 'Cancel'
+}
+
+const OpenModalButton: React.FC<ConfirmProps> = (args) => {
+  const showModal = useConfirm()
+  return <MibaoButton onClick={() => showModal(args)}>Button</MibaoButton>
+}
+
+const Template: Story<ConfirmProps> = (args) => {
+  return <MibaoProvider>
+    <Box m={2}>
+      <Code>
+        {'const showModal = useConfirm()'} <br/>
+        {'return <MibaoButton onClick={() => showModal(args)}>Button</MibaoButton>'}
+      </Code>
+    </Box>
+    <ConfirmProvider>
+      <OpenModalButton {...args} />
+    </ConfirmProvider>
+  </MibaoProvider>
+}
+
+export const Confirm = Template.bind({})
+Confirm.args = args

libs/mibao-ui/src/index.ts

@@ -4,8 +4,8 @@ export * from './lib/select/select'
 export * from './lib/pagination/pagination'
 export * from './lib/alert/alert'
 export * from './lib/toast/toast'
+export * from './lib/confirm/confirm'
 export * from './lib/radio/radio'
-
 export * from './lib/table/table'
 export * from './lib/button/button'
 export * from './lib/modal/modal'

libs/mibao-ui/src/lib/confirm/confirm.spec.tsx

@@ -0,0 +1,10 @@
+import { render } from '@testing-library/react'
+
+import { ConfirmProvider } from './confirm'
+
+describe('Confirm', () => {
+  it('should render successfully', () => {
+    const { baseElement } = render(<ConfirmProvider />)
+    expect(baseElement).toBeTruthy()
+  })
+})

libs/mibao-ui/src/lib/confirm/confirm.tsx

@@ -0,0 +1,94 @@
+import './confirm.module.scss'
+import React, { ReactNode, createContext, useState, useContext } from 'react'
+import {
+  Modal,
+  ModalBody,
+  ModalCloseButton,
+  ModalContent,
+  ModalFooter,
+  ModalFooterButtonGroup,
+  ModalHeader,
+  ModalOverlay,
+  useDisclosure
+} from '../modal/modal'
+import { Button } from '../button/button'
+
+export interface ConfirmProps {
+  title?: ReactNode
+  content?: ReactNode
+  onConfirm?: () => void
+  confirmText?: ReactNode
+  onCancel?: () => void
+  cancelText?: ReactNode
+}
+
+const ConfirmContext = createContext<{ props: ConfirmProps | null, showModal: (props: ConfirmProps) => void}>({
+  props: null,
+  showModal (props: ConfirmProps) {
+    this.props = props
+  }
+})
+
+const ConfirmContextProvider = ConfirmContext.Provider
+
+const ConfirmModal: React.FC<{
+  isOpen: boolean
+  onOpen: () => void
+  onClose: () => void
+}> = (props) => {
+  const context = useContext(ConfirmContext)
+
+  return <Modal isOpen={props.isOpen} onClose={props.onClose}>
+    <ModalOverlay />
+    <ModalContent>
+      <ModalHeader>{context.props?.title}</ModalHeader>
+      <ModalCloseButton />
+      <ModalBody>
+        {context.props?.content}
+      </ModalBody>
+
+      <ModalFooter>
+        <ModalFooterButtonGroup>
+          <Button isFullWidth variant="solid" colorScheme="primary" onClick={() => {
+            context.props?.onConfirm?.()
+            props.onClose?.()
+          }}>
+            { context.props?.confirmText ?? 'OK' }
+          </Button>
+
+          {
+            context.props?.onCancel && <Button isFullWidth onClick={() => {
+              context.props?.onCancel?.()
+              props.onClose?.()
+            }}>
+              { context.props?.cancelText ?? 'Cancel' }
+            </Button>
+          }
+        </ModalFooterButtonGroup>
+      </ModalFooter>
+    </ModalContent>
+  </Modal>
+}
+
+export const ConfirmProvider: React.FC = (props) => {
+  const [modalProps, setModalProps] = useState<ConfirmProps | null>(null)
+  const { isOpen, onOpen, onClose } = useDisclosure()
+
+  return (
+    <ConfirmContextProvider value={{
+      props: modalProps,
+      showModal: (props) => {
+        onOpen()
+        setModalProps(props)
+      }
+    }}>
+      <ConfirmModal isOpen={isOpen} onOpen={onOpen} onClose={onClose}/>
+      {props.children}
+    </ConfirmContextProvider>
+  )
+}
+
+export function useConfirm () {
+  const context = useContext(ConfirmContext)
+  return context.showModal
+}