@infonomic/uikit 1.5.0 → 2.1.0

package/src/widgets/drawer/drawer-content.tsx

@@ -0,0 +1,26 @@
+'use client'
+import type * as React from 'react'
+
+import cx from 'classnames'
+
+import styles from './drawer.module.css'
+
+type DrawerContentIntrinsicProps = React.JSX.IntrinsicElements['div']
+export interface DrawerContentProps extends DrawerContentIntrinsicProps {
+  className?: string
+}
+
+export function DrawerContent({
+  ref,
+  children,
+  className,
+  ...rest
+}: DrawerContentProps & {
+  ref?: React.RefObject<HTMLDivElement>
+}) {
+  return (
+    <div ref={ref} {...rest} className={cx(styles['drawer-content'], className)}>
+      {children}
+    </div>
+  )
+}

package/src/widgets/drawer/drawer-context.tsx

@@ -0,0 +1,49 @@
+'use client'
+
+import type React from 'react'
+
+import { createContext, useCallback, useContext, useState } from 'react'
+
+import type { ReactNode } from 'react'
+
+interface DrawerContextType {
+  drawers: string[]
+  addDrawer: (id: string) => void
+  removeDrawer: (id: string) => void
+}
+
+const DrawerContext = createContext<DrawerContextType>({
+  drawers: [],
+  addDrawer: () => {},
+  removeDrawer: () => {},
+})
+
+interface DrawerProviderProps {
+  children: ReactNode
+}
+
+export const DrawerProvider: React.FC<DrawerProviderProps> = ({ children }) => {
+  const [drawers, setDrawers] = useState<string[]>([])
+
+  const addDrawer = useCallback((id: string) => {
+    setDrawers((prev) => [...prev, id])
+  }, [])
+
+  const removeDrawer = useCallback((id: string) => {
+    setDrawers((prev) => prev.filter((drawerId) => drawerId !== id))
+  }, [])
+
+  return (
+    <DrawerContext.Provider value={{ drawers, addDrawer, removeDrawer }}>
+      {children}
+    </DrawerContext.Provider>
+  )
+}
+
+export function useDrawer(): DrawerContextType {
+  const context = useContext(DrawerContext)
+  if (context === undefined) {
+    throw new Error('useDrawer must be used within a DrawerProvider')
+  }
+  return context
+}

package/src/widgets/drawer/drawer-header.tsx

@@ -0,0 +1,27 @@
+'use client'
+import type * as React from 'react'
+
+import cx from 'classnames'
+
+import styles from './drawer.module.css'
+
+type DrawerHeaderIntrinsicProps = React.JSX.IntrinsicElements['div']
+export interface DrawerHeaderProps extends DrawerHeaderIntrinsicProps {
+  className?: string
+}
+
+export const DrawerHeader = function DrawerHeader({
+  ref,
+  children,
+  className,
+  ...rest
+}: DrawerHeaderProps & {
+  ref?: React.RefObject<HTMLDivElement>
+}) {
+  const classes = cx(styles['drawer-header'], className)
+  return (
+    <div style={{ overflowWrap: 'anywhere' }} ref={ref} {...rest} className={classes}>
+      {children}
+    </div>
+  )
+}

package/src/widgets/drawer/drawer-top-actions.tsx

@@ -0,0 +1,27 @@
+'use client'
+import type * as React from 'react'
+
+import cx from 'classnames'
+
+import styles from './drawer.module.css'
+
+type DrawerTopActionIntrinsicProps = React.JSX.IntrinsicElements['div']
+export interface DrawerTopActionProps extends DrawerTopActionIntrinsicProps {
+  className?: string
+}
+
+export const DrawerTopActions = function DrawerHeader({
+  ref,
+  children,
+  className,
+  ...rest
+}: DrawerTopActionProps & {
+  ref?: React.RefObject<HTMLDivElement>
+}) {
+  const classes = cx(styles['drawer-top-actions'], className)
+  return (
+    <div style={{ whiteSpace: 'nowrap' }} ref={ref} {...rest} className={classes}>
+      {children}
+    </div>
+  )
+}

package/src/widgets/drawer/drawer-wrapper.tsx

@@ -0,0 +1,54 @@
+'use client'
+/* eslint-disable @typescript-eslint/consistent-type-imports */
+import type React from 'react'
+import { useEffect } from 'react'
+
+import cx from 'classnames'
+
+import { useFocusTrap } from '@mantine/hooks'
+import { m } from 'motion/react'
+
+import type { HTMLMotionProps } from 'motion/react'
+
+import styles from './drawer.module.css'
+
+export interface DrawerWrapperProps extends HTMLMotionProps<'div'> {
+  className?: string
+  children: React.ReactNode
+  onEscapeKey?: (e: any) => void
+}
+
+export function DrawerWrapper({
+  className,
+  children,
+  onEscapeKey,
+  ...rest
+}: DrawerWrapperProps): React.JSX.Element {
+  const focusTrapRef = useFocusTrap()
+
+  useEffect(() => {
+    const handleKeyDown = (event: KeyboardEvent) => {
+      if (event.key === 'Escape' && onEscapeKey) {
+        onEscapeKey(event)
+      }
+    }
+
+    document.addEventListener('keydown', handleKeyDown)
+    return () => {
+      document.removeEventListener('keydown', handleKeyDown)
+    }
+  }, [onEscapeKey])
+
+  return (
+    <m.div
+      ref={focusTrapRef}
+      {...rest}
+      className={cx(styles['drawer-wrapper'], className)}
+      initial={{ opacity: 0 }}
+      animate={{ opacity: 1 }}
+      exit={{ opacity: 0 }}
+    >
+      {children}
+    </m.div>
+  )
+}

package/src/widgets/drawer/drawer.module.css

@@ -0,0 +1,116 @@
+@layer infonomic-base, infonomic-utilities, infonomic-theme, infonomic-components;
+
+@layer infonomic-components {
+  .drawer-wrapper {
+    position: fixed;
+    display: flex;
+    flex-direction: column;
+    justify-content: end;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    z-index: 30;
+    opacity: 1;
+  }
+
+
+  .drawer-container {
+    position: absolute;
+    right: 0;
+    height: 100%;
+    background-color: var(--canvas-25);
+    box-shadow: var(--shadow-md);
+    z-index: inherit;
+  }
+
+  .drawer-container[aria-hidden="false"] {
+    animation: slideIn 150ms cubic-bezier(0.16, 1, 0.3, 1);
+  }
+
+  .drawer-container:is(:global(.dark) *) {
+    background: var(--canvas-800);
+  }
+
+  .drawer-depth-0.drawer-medium .drawer-container,
+  .drawer-depth-0.drawer-wide .drawer-container {
+    width: 90%;
+  }
+
+  .drawer-depth-1.drawer-medium .drawer-container,
+  .drawer-depth-1.drawer-wide .drawer-container {
+    width: 88%;
+  }
+
+  .drawer-depth-2.drawer- .drawer-container,
+  .drawer-depth-2.drawer-wide .drawer-container {
+    width: 86%;
+  }
+
+  @media (min-width: 768px) {
+    .drawer-depth-0.drawer-medium .drawer-container {
+      width: 600px;
+    }
+
+    .drawer-depth-1.drawer-medium .drawer-container {
+      width: 580px;
+    }
+
+    .drawer-depth-2.drawer- .drawer-container {
+      width: 560px;
+    }
+  }
+
+  .drawer-narrow .drawer-container {
+    width: calc(100% - 32px);
+    max-width: 400px
+  }
+
+  .drawer-container[aria-hidden="true"] {
+    transform: translateX(100%);
+    opacity: 0;
+  }
+
+  .drawer-top-actions {
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+    padding-top: var(--spacing-3);
+    padding-left: var(--spacing-6);
+    padding-right: var(--spacing-6);
+    padding-bottom: 0;
+    max-width: 100%;
+  }
+
+  .drawer-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: var(--gap-3);
+    padding-top: 0;
+    padding-left: var(--spacing-6);
+    padding-right: var(--spacing-6);
+    max-width: 100%;
+  }
+
+  .drawer-header h2,
+  .drawer-header h3 {
+    margin: 0;
+  }
+
+  .drawer-content {
+    padding: var(--spacing-6);
+  }
+
+  @keyframes slideIn {
+    from {
+      transform: translateX(100%);
+      opacity: 0;
+    }
+
+    to {
+      transform: translateX(0);
+      opacity: 1;
+    }
+  }
+}

package/src/widgets/drawer/drawer.stories.tsx

@@ -0,0 +1,224 @@
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+import React from 'react'
+
+import { Button } from '../../components/button/button.js'
+import { IconButton } from '../../components/button/icon-button.js'
+import { CloseIcon } from '../../icons/close-icon.js'
+
+import { Drawer } from './drawer.js'
+
+export default {
+  title: 'Widgets/Drawer',
+  component: Drawer,
+  argTypes: {},
+}
+
+export const Default = (): React.JSX.Element => {
+  const [isOpen, setIsOpen] = React.useState(false)
+
+  const whiteIcon = `
+    .white-icon {
+      fill: white;  
+    }
+
+    .dark .white-icon {
+      fill: black;
+    }
+  `
+
+  return (
+    <>
+      <style>{whiteIcon}</style>
+      <Button
+        onClick={() => {
+          setIsOpen(true)
+        }}
+      >
+        Open Drawer
+      </Button>
+      <Drawer
+        id="first-drawer"
+        closeOnOverlayClick={true}
+        isOpen={isOpen}
+        onDismiss={() => setIsOpen(false)}
+      >
+        <Drawer.Container aria-hidden={!isOpen}>
+          <Drawer.TopActions>
+            <button type="button" tabIndex={0} className="sr-only">
+              no action
+            </button>
+            <IconButton
+              arial-label="Close"
+              size="xs"
+              onClick={() => {
+                setIsOpen(false)
+              }}
+            >
+              <CloseIcon width="14px" height="14px" svgClassName="white-icon" />
+            </IconButton>
+          </Drawer.TopActions>
+          <Drawer.Header className="flex items-center justify-between mb-4">
+            <h2>Drawer Actions Here</h2>
+          </Drawer.Header>
+          <Drawer.Content>
+            <p>Drawer content here...</p>
+          </Drawer.Content>
+        </Drawer.Container>
+      </Drawer>
+    </>
+  )
+}
+
+const whiteIcon = `
+.white-icon {
+  fill: white;  
+}
+
+.dark .white-icon {
+  fill: black;
+}
+`
+
+export const Wide = (): React.JSX.Element => {
+  const [isOpen, setIsOpen] = React.useState(false)
+
+  return (
+    <>
+      <style>{whiteIcon}</style>
+      <Button
+        onClick={() => {
+          setIsOpen(true)
+        }}
+      >
+        Open Drawer
+      </Button>
+      <Drawer
+        id="first-drawer"
+        closeOnOverlayClick={true}
+        isOpen={isOpen}
+        width="wide"
+        onDismiss={() => setIsOpen(false)}
+      >
+        <Drawer.Container aria-hidden={!isOpen}>
+          <Drawer.TopActions>
+            <button type="button" tabIndex={0} className="sr-only">
+              no action
+            </button>
+            <IconButton
+              arial-label="Close"
+              size="xs"
+              onClick={() => {
+                setIsOpen(false)
+              }}
+            >
+              <CloseIcon width="14px" height="14px" svgClassName="white-icon" />
+            </IconButton>
+          </Drawer.TopActions>
+          <Drawer.Header className="flex items-center justify-between mb-4">
+            <h2>Drawer Actions Here</h2>
+          </Drawer.Header>
+          <Drawer.Content>
+            <p>Drawer content here...</p>
+          </Drawer.Content>
+        </Drawer.Container>
+      </Drawer>
+    </>
+  )
+}
+
+export const Nested = (): React.JSX.Element => {
+  const [isOpen1, setIsOpen1] = React.useState(false)
+  const [isOpen2, setIsOpen2] = React.useState(false)
+
+  const whiteIcon = `
+    .white-icon {
+      fill: white;  
+    }
+
+    .dark .white-icon {
+      fill: black;
+    }
+  `
+
+  return (
+    <>
+      <style>{whiteIcon}</style>
+      <Button
+        onClick={() => {
+          setIsOpen1(true)
+        }}
+      >
+        Open Drawer 1
+      </Button>
+      <Drawer
+        id="first-drawer"
+        width="medium"
+        closeOnOverlayClick={true}
+        isOpen={isOpen1}
+        onDismiss={() => setIsOpen1(false)}
+      >
+        <Drawer.Container aria-hidden={!isOpen1}>
+          <Drawer.TopActions>
+            <button type="button" tabIndex={0} className="sr-only">
+              no action
+            </button>
+            <IconButton
+              arial-label="Close"
+              size="xs"
+              onClick={() => {
+                setIsOpen1(false)
+              }}
+            >
+              <CloseIcon width="14px" height="14px" svgClassName="white-icon" />
+            </IconButton>
+          </Drawer.TopActions>
+          <Drawer.Header className="flex items-center justify-between mb-4">
+            <h2>Drawer 1</h2>
+          </Drawer.Header>
+          <Drawer.Content>
+            <>
+              <p>Drawer 1 actions here...</p>
+              <Button
+                onClick={() => {
+                  setIsOpen2(true)
+                }}
+              >
+                Open Drawer 2
+              </Button>
+              <Drawer
+                id="second-drawer"
+                width="medium"
+                closeOnOverlayClick={true}
+                isOpen={isOpen2}
+                onDismiss={() => setIsOpen2(false)}
+              >
+                <Drawer.Container aria-hidden={!isOpen2}>
+                  <Drawer.TopActions>
+                    <button type="button" tabIndex={0} className="sr-only">
+                      no action
+                    </button>
+                    <IconButton
+                      arial-label="Close"
+                      size="xs"
+                      onClick={() => {
+                        setIsOpen2(false)
+                      }}
+                    >
+                      <CloseIcon width="14px" height="14px" svgClassName="white-icon" />
+                    </IconButton>
+                  </Drawer.TopActions>
+                  <Drawer.Header className="flex items-center justify-between mb-4">
+                    <h2>Drawer 2</h2>
+                  </Drawer.Header>
+                  <Drawer.Content>
+                    <p>Drawer content here...</p>
+                  </Drawer.Content>
+                </Drawer.Container>
+              </Drawer>
+            </>
+          </Drawer.Content>
+        </Drawer.Container>
+      </Drawer>
+    </>
+  )
+}

package/src/widgets/drawer/drawer.tsx

@@ -0,0 +1,115 @@
+'use client'
+import type React from 'react'
+
+import cx from 'classnames'
+
+import { AnimatePresence, type FeatureBundle, LazyMotion } from 'motion/react'
+import { useEffect } from 'react'
+import { createPortal } from 'react-dom'
+import { Overlay } from '../../components/overlay'
+import { useMediaQuery } from '../../hooks/use-media-query'
+import { getPortalRoot } from '../../utils/getPortalRoot'
+import { useDrawer } from './drawer-context'
+
+import { DrawerContainer } from './drawer-container'
+import { DrawerContent } from './drawer-content'
+import { DrawerHeader } from './drawer-header'
+import { DrawerTopActions } from './drawer-top-actions'
+import { DrawerWrapper } from './drawer-wrapper'
+
+import type { ReactNode } from 'react'
+
+import styles from './drawer.module.css'
+
+type Styles = {
+  [key: string]: string
+}
+
+const typedStyles: Styles = styles
+
+const DomMax: () => Promise<FeatureBundle> = async () =>
+  await import('./motionDomMax').then((mod) => mod.default)
+const DomAnimation: () => Promise<FeatureBundle> = async () =>
+  await import('./motionDomAnimation').then((mod) => mod.default)
+
+export interface DrawerProps {
+  id: string
+  isOpen: boolean
+  closeOnOverlayClick?: boolean
+  onDismiss: () => void
+  children: ReactNode
+  width?: 'narrow' | 'medium' | 'wide'
+  topOffset?: string
+}
+
+const Drawer = ({
+  id,
+  isOpen,
+  onDismiss,
+  closeOnOverlayClick,
+  children,
+  width = 'narrow',
+  topOffset = '0',
+  ...rest
+}: DrawerProps) => {
+  const isMobile = useMediaQuery('(max-width: 768px)') ?? false
+  const { addDrawer, removeDrawer, drawers } = useDrawer()
+  const depth = drawers.indexOf(id)
+
+  const handleOverlayDismiss = (e: any): void => {
+    e.stopPropagation()
+    e.preventDefault()
+    if (closeOnOverlayClick === true) {
+      onDismiss?.()
+    }
+  }
+
+  useEffect(() => {
+    if (isOpen) {
+      addDrawer(id)
+    } else {
+      removeDrawer(id)
+    }
+    return () => removeDrawer(id)
+  }, [isOpen, id, addDrawer, removeDrawer])
+
+  const portal = getPortalRoot()
+
+  if (portal === false) return null
+
+  return createPortal(
+    <LazyMotion features={isMobile ? DomMax : DomAnimation}>
+      <AnimatePresence>
+        {isOpen === true && (
+          <DrawerWrapper
+            style={{ zIndex: 20 + depth, top: topOffset }}
+            transition={{ duration: 0.2 }}
+            onEscapeKey={handleOverlayDismiss}
+            className={cx(
+              typedStyles[`drawer-${width}`],
+              typedStyles[`drawer-depth-${depth.toString()}`]
+            )}
+            {...rest}
+          >
+            <Overlay
+              onClick={handleOverlayDismiss}
+              style={{ top: topOffset }}
+              isUnmounting={!(isOpen ?? false)}
+            />
+            {children}
+          </DrawerWrapper>
+        )}
+      </AnimatePresence>
+    </LazyMotion>,
+    portal
+  )
+}
+
+Drawer.displayName = 'Drawer'
+
+Drawer.Container = DrawerContainer
+Drawer.Content = DrawerContent
+Drawer.Header = DrawerHeader
+Drawer.TopActions = DrawerTopActions
+
+export { Drawer }

package/src/widgets/drawer/motionDomAnimation.ts

@@ -0,0 +1,4 @@
+'use client'
+import { domAnimation } from 'motion/react'
+
+export default domAnimation

package/src/widgets/drawer/motionDomMax.ts

@@ -0,0 +1,4 @@
+'use client'
+import { domMax } from 'motion/react'
+
+export default domMax

package/src/widgets/modal/modal-actions.tsx

@@ -0,0 +1,26 @@
+'use client'
+import type * as React from 'react'
+
+import cx from 'classnames'
+
+import styles from './modal.module.css'
+
+type ModalActionsIntrinsicProps = React.JSX.IntrinsicElements['div']
+export interface ModalActionsProps extends ModalActionsIntrinsicProps {
+  className?: string
+}
+
+export const ModalActions = function ModalActions({
+  ref,
+  children,
+  className,
+  ...rest
+}: ModalActionsProps & {
+  ref?: React.RefObject<HTMLDivElement>
+}) {
+  return (
+    <div ref={ref} {...rest} className={cx(styles['modal-actions'], className)}>
+      {children}
+    </div>
+  )
+}

package/src/widgets/modal/modal-container.tsx

@@ -0,0 +1,26 @@
+'use client'
+import type * as React from 'react'
+
+import cx from 'classnames'
+
+import styles from './modal.module.css'
+
+type ModalContainerIntrinsicProps = React.JSX.IntrinsicElements['div']
+export interface ModalContainerProps extends ModalContainerIntrinsicProps {
+  className?: string
+}
+
+export const ModalContainer = function ModalContainer({
+  ref,
+  children,
+  className,
+  ...rest
+}: ModalContainerProps & {
+  ref?: React.RefObject<HTMLDivElement>
+}) {
+  return (
+    <div ref={ref} className={cx(styles['modal-container'], className)} {...rest}>
+      {children}
+    </div>
+  )
+}