add modal

src/constants/component-ids.ts

@@ -40,3 +40,4 @@ export const TABLE_HEAD = 'TABLE_HEAD'
 export const TABLE_BODY = 'TABLE_BODY'
 export const TABLE_ROW = 'TABLE_ROW'
 export const TABLE_CELL = 'TABLE_CELL'
+export const MODAL = 'MODAL'

src/index.ts

@@ -45,6 +45,7 @@ export { TableBody } from './table-body'
 export { TableCell } from './table-cell'
 export { TableHead } from './table-head'
 export { TableRow } from './table-row'
+export { Modal } from './modal'
 
 // -------------------------
 // Types
@@ -93,3 +94,4 @@ export type { TableBodyProps } from './table-body'
 export type { TableCellProps } from './table-cell'
 export type { TableHeadProps } from './table-head'
 export type { TableRowProps } from './table-row'
+export type { ModalProps } from './modal'

src/modal/index.ts

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

src/modal/modal.stories.tsx

@@ -0,0 +1,56 @@
+import { Story } from '@storybook/react/types-6-0'
+import { useState } from 'react'
+
+import { Modal } from './modal'
+import { Box } from '../box'
+import { Button } from '../button'
+import { Typography } from '../typography'
+
+export default {
+    title: 'Modal',
+    component: Modal,
+}
+
+const Template: Story = (args) => {
+    const [isOpen, setIsOpen] = useState(false)
+
+    const toggleModal = () => {
+        setIsOpen(!isOpen)
+    }
+    return (
+        <Box>
+            <Button onClick={toggleModal} color="secondary" variant="outlined">
+                Open Modal
+            </Button>
+            <Modal onRequestClose={toggleModal} isOpen={isOpen} {...args}>
+                <Box
+                    csx={{
+                        root: (theme) => ({
+                            display: 'flex',
+                            flexDirection: 'column',
+                            width: '300px',
+                            height: '100px',
+                            padding: '1rem 2rem',
+                            background: theme.palette.neutral[10],
+                        }),
+                    }}
+                >
+                    <Typography variant="body" csx={{ root: { flex: '1' } }}>
+                        This is a modal
+                    </Typography>
+                    <Button
+                        csx
+                        onClick={toggleModal}
+                        color="error"
+                        variant="outlined"
+                    >
+                        Close Modal
+                    </Button>
+                </Box>
+            </Modal>
+        </Box>
+    )
+}
+
+export const Default = Template.bind({})
+Default.args = {}

src/modal/modal.tsx

@@ -0,0 +1,130 @@
+import ReactModal, { Props as ReactModalProps } from 'react-modal'
+import cx from 'clsx'
+
+import {
+    createStyledComponent,
+    ThemeCSSStyles,
+    getThemeCSSObject,
+    createStyle,
+    hex2rgba,
+    themeTernaryOperator as tto,
+} from '../styles'
+import { attachSignatureToComponent } from '../utils'
+import { MODAL } from '../constants/component-ids'
+
+import type { Ref } from '../utils'
+
+export interface ModalProps extends Omit<ReactModalProps, 'as' | 'ref'> {
+    innerRef?: Ref
+    /**
+     * To extend the styles applied to the components
+     */
+    classes?: {
+        /**
+         * Applied to root component
+         */
+        root?: string
+        /**
+         * Applied to content container
+         */
+        content?: string
+    }
+    /**
+     * To override the applied styles.
+     */
+    csx?: {
+        /**
+         * Applied to root component
+         */
+        root?: ThemeCSSStyles
+        /**
+         * Applied to content container
+         */
+        content?: ThemeCSSStyles
+    }
+}
+
+const ModalRoot = createStyledComponent<'table', ModalProps>(
+    'table',
+    (theme, props) => {
+        const { csx = {}, isExtendStyleFromThemeVars = true } = props
+        const { themeVars, ...themePropsForThemeVarFn } = theme
+        const {
+            typography: { body },
+            palette: { neutral },
+        } = themePropsForThemeVarFn
+
+        return {
+            ...body,
+            ...(isExtendStyleFromThemeVars &&
+                themeVars.table(themePropsForThemeVarFn, props)),
+            ...getThemeCSSObject(csx.root, theme),
+        }
+    }
+)
+
+const useStyles = createStyle((theme) => ({
+    root: (props: ModalProps) => {
+        const { isOpen = false, csx = {} } = props
+        const { themeVars, ...themePropsForThemeVarFn } = theme
+        const {
+            palette: {
+                common: { white, black },
+            },
+            themeType,
+        } = themePropsForThemeVarFn
+
+        const rgba = hex2rgba(tto(themeType, black, white), 0.05)
+
+        return {
+            alignItems: 'center',
+            background: rgba.rgba,
+            bottom: 0,
+            display: isOpen ? 'flex' : 'none',
+            justifyContent: 'center',
+            left: 0,
+            position: 'fixed',
+            right: 0,
+            top: 0,
+            ...themeVars.modal(themePropsForThemeVarFn, props),
+            ...getThemeCSSObject(csx.root, theme),
+        }
+    },
+
+    content: (props: ModalProps) => {
+        const { csx = {} } = props
+        const {
+            palette: { neutral },
+        } = theme
+
+        return {
+            color: neutral[90],
+            ...getThemeCSSObject(csx.root, theme),
+        }
+    },
+}))
+
+export const Modal = (props: ModalProps): JSX.Element => {
+    const {
+        innerRef,
+        classes: _classes = {},
+        className,
+        children,
+        ...rest
+    } = props
+
+    const classes = useStyles(props)
+
+    return (
+        <ReactModal
+            className={cx(classes.content, _classes.content)}
+            overlayClassName={cx(classes.root, className, _classes.root)}
+            ref={innerRef}
+            {...rest}
+        >
+            {children}
+        </ReactModal>
+    )
+}
+
+attachSignatureToComponent(Modal, MODAL)

src/styles/theme/create/create.ts

@@ -45,6 +45,7 @@ import {
     TableCellProps,
     TableHeadProps,
     TableRowProps,
+    ModalProps,
 } from '../../..'
 
 /**
@@ -98,6 +99,7 @@ export type ThemeVars = {
     tableCell: ThemeVariableFunction<TableCellProps>
     tableHead: ThemeVariableFunction<TableHeadProps>
     tableRow: ThemeVariableFunction<TableRowProps>
+    modal: ThemeVariableFunction<ModalProps>
 }
 
 export type CreateThemeVarsOptions = Partial<ThemeVars>

src/styles/theme/create/theme-vars.ts

@@ -48,6 +48,7 @@ export const createThemeVars = (
         tableCell = themeVarDefaultFunction,
         tableHead = themeVarDefaultFunction,
         tableRow = themeVarDefaultFunction,
+        modal = themeVarDefaultFunction,
     } = options
 
     return {
@@ -91,5 +92,6 @@ export const createThemeVars = (
         tableCell,
         tableHead,
         tableRow,
+        modal,
     }
 }