@infonomic/uikit 2.0.0 → 2.1.0

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

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

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

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

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

@@ -0,0 +1,50 @@
+'use client'
+/* eslint-disable @typescript-eslint/consistent-type-imports */
+import type React from 'react'
+import { useEffect } from 'react'
+
+import { useFocusTrap } from '@mantine/hooks'
+import { m } from 'motion/react'
+
+import type { HTMLMotionProps } from 'motion/react'
+
+import styles from './modal.module.css'
+
+export interface ModalWrapperProps extends HTMLMotionProps<'div'> {
+  children: React.ReactNode
+  onEscapeKey?: (e: any) => void
+}
+
+export function ModalWrapper({
+  children,
+  onEscapeKey,
+  ...rest
+}: ModalWrapperProps): 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={styles['modal-wrapper']}
+      initial={{ opacity: 0 }}
+      animate={{ opacity: 1 }}
+      exit={{ opacity: 0 }}
+    >
+      {children}
+    </m.div>
+  )
+}

package/src/widgets/modal/modal.module.css

@@ -0,0 +1,85 @@
+@layer infonomic-base, infonomic-utilities, infonomic-theme, infonomic-components;
+
+@layer infonomic-components {
+  .modal-wrapper {
+    position: fixed;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    z-index: 30;
+    opacity: 1;
+  }
+
+  .modal-container {
+    position: absolute;
+    display: flex;
+    flex-direction: column;
+    box-shadow: var(--shadow-md);
+    border-radius: var(--border-radius-md);
+    z-index: 20;
+    min-height: 300px;
+    max-height: 88vh;
+    width: 100%;
+    bottom: 0;
+    background-color: var(--canvas-25);
+    border: 1px solid var(--border-color);
+    margin-left: var(--spacing-2);
+    margin-right: var(--spacing-2);
+  }
+
+  .modal-container:is(:global(.dark) *) {
+    background: var(--canvas-800);
+  }
+
+  @media screen and (min-width: 640px) {
+    .modal-container {
+      max-height: calc(100vh - 24px);
+      min-height: auto;
+      bottom: auto;
+      width: auto;
+    }
+  }
+
+  .modal-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: var(--gap-3);
+    padding-left: var(--spacing-6);
+    padding-right: var(--spacing-6);
+    padding-top: var(--spacing-5);
+    max-width: 100%;
+  }
+
+  .modal-header h2,
+  .modal-header h3 {
+    margin: 0;
+  }
+
+  .modal-content {
+    display: flex;
+    flex: 1;
+    flex-direction: column;
+    gap: var(--gap-3);
+    padding-left: var(--spacing-6);
+    padding-right: var(--spacing-6);
+    padding-bottom: var(--spacing-3);
+    max-width: 100%;
+  }
+
+  .modal-actions {
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+    gap: var(--gap-3);
+    padding-top: var(--spacing-2);
+    padding-bottom: var(--spacing-5);
+    padding-left: var(--spacing-6);
+    padding-right: var(--spacing-6);
+  }
+}

package/src/widgets/modal/modal.stories.tsx

@@ -0,0 +1,71 @@
+// biome-ignore lint/style/useImportType: <explanation>
+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 { Modal, useModal } from './modal.js'
+
+export default {
+  title: 'Widgets/Modal',
+  component: Modal,
+  argTypes: {},
+}
+
+export const Default = (): React.JSX.Element => {
+  const { onDismiss, onOpen, isOpen, setIsOpen } = useModal()
+
+  const whiteIcon = `
+    .white-icon {
+      fill: white;  
+    }
+  `
+
+  return (
+    <>
+      <style>{whiteIcon}</style>
+      <Button
+        onClick={() => {
+          setIsOpen(true)
+        }}
+      >
+        Open Modal
+      </Button>
+      <Modal isOpen={isOpen} onDismiss={onDismiss} closeOnOverlayClick={true}>
+        <Modal.Container style={{ maxWidth: '600px' }}>
+          <Modal.Header>
+            <h2>Modal Header</h2>
+            <IconButton
+              arial-label="Close"
+              size="sm"
+              onClick={() => {
+                setIsOpen(false)
+              }}
+            >
+              <CloseIcon width="16px" height="16px" svgClassName="white-icon" />
+            </IconButton>
+          </Modal.Header>
+          <Modal.Content>
+            <p style={{ paddingTop: '1rem' }}>
+              Modal content with some text here that should run a little longer. And longer here.
+              And the current theme is.
+            </p>
+          </Modal.Content>
+          <Modal.Actions>
+            <Button
+              size="sm"
+              intent="noeffect"
+              onClick={() => {
+                setIsOpen(false)
+              }}
+              data-autofocus
+            >
+              Close
+            </Button>
+          </Modal.Actions>
+        </Modal.Container>
+      </Modal>
+    </>
+  )
+}

package/src/widgets/modal/modal.tsx

@@ -0,0 +1,110 @@
+'use client'
+/* eslint-disable @typescript-eslint/consistent-type-imports */
+import type React from 'react'
+import { createContext, useCallback, useState } from 'react'
+import { createPortal } from 'react-dom'
+
+import { AnimatePresence, type FeatureBundle, LazyMotion } from 'motion/react'
+
+import { Overlay } from '../../components/overlay'
+import { useMediaQuery } from '../../hooks/use-media-query'
+import { getPortalRoot } from '../../utils/getPortalRoot'
+
+import { ModalActions } from './modal-actions'
+import { ModalContainer } from './modal-container'
+import { ModalContent } from './modal-content'
+import { ModalHeader } from './modal-header'
+import { ModalWrapper } from './modal-wrapper'
+
+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 ModalProps {
+  isOpen?: boolean
+  onDismiss?: () => void
+  closeOnOverlayClick?: boolean
+  children?: React.ReactNode
+}
+
+export const ModalContext = createContext<{
+  onDismiss?: () => void
+}>({})
+
+export type UseModalProps = ReturnType<typeof useModal>
+
+export function useModal(): {
+  onDismiss: () => void
+  onOpen: () => void
+  isOpen: boolean
+  setIsOpen: React.Dispatch<React.SetStateAction<boolean>>
+} {
+  const [isOpen, setIsOpen] = useState(false)
+
+  const onDismiss = useCallback(() => {
+    setIsOpen(false)
+  }, [])
+
+  const onOpen = useCallback(() => {
+    setIsOpen(true)
+  }, [])
+
+  return {
+    onDismiss,
+    onOpen,
+    isOpen,
+    setIsOpen,
+  }
+}
+
+function Modal({
+  isOpen,
+  onDismiss,
+  closeOnOverlayClick,
+  children,
+  ...rest
+}: ModalProps): React.ReactPortal | null {
+  const isMobile = useMediaQuery('(max-width: 768px)') ?? false
+
+  const handleOverlayDismiss = (e: any): void => {
+    e.stopPropagation()
+    e.preventDefault()
+    if (closeOnOverlayClick === true) {
+      onDismiss?.()
+    }
+  }
+
+  const portal = getPortalRoot()
+
+  if (portal === false) return null
+
+  return createPortal(
+    <ModalContext.Provider value={{ onDismiss }}>
+      <LazyMotion features={isMobile ? DomMax : DomAnimation}>
+        <AnimatePresence>
+          {isOpen === true && (
+            <ModalWrapper
+              transition={{ duration: 0.2 }}
+              onEscapeKey={handleOverlayDismiss}
+              {...rest}
+            >
+              <Overlay onClick={handleOverlayDismiss} isUnmounting={!(isOpen ?? false)} />
+              {children}
+            </ModalWrapper>
+          )}
+        </AnimatePresence>
+      </LazyMotion>
+    </ModalContext.Provider>,
+    portal
+  )
+}
+
+Modal.displayName = 'Modal'
+
+Modal.Container = ModalContainer
+Modal.Header = ModalHeader
+Modal.Content = ModalContent
+Modal.Actions = ModalActions
+
+export { Modal }

package/src/widgets/modal/motionDomAnimation.ts

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

package/src/widgets/modal/motionDomMax.ts

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

package/src/widgets/search/index.ts

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

package/src/widgets/search/search.stories.tsx

@@ -0,0 +1,18 @@
+// biome-ignore lint/style/useImportType: <explanation>
+import React from 'react'
+
+import { Search } from './search.js'
+
+export default {
+  title: 'Widgets/Search',
+  component: Search,
+  argTypes: {},
+}
+
+export const Default = (): React.JSX.Element => {
+  return (
+    <div style={{ maxWidth: '600px', margin: '0 auto' }}>
+      <Search variant="underlined" />
+    </div>
+  )
+}

package/src/widgets/search/search.tsx

@@ -0,0 +1,186 @@
+'use client'
+
+import type React from 'react'
+import { useEffect, useRef, useState } from 'react'
+
+import { IconButton } from '../../components/button/index.js'
+import { Input, InputAdornment } from '../../components/input'
+import type { ClassName, Intent, Size, Variant } from '../../components/input/@types/input.js'
+import { CloseIcon, SearchIcon } from '../../icons'
+
+export interface SearchProps extends React.InputHTMLAttributes<HTMLInputElement> {
+  variant?: Variant
+  inputSize?: Size
+  inputClassName?: ClassName
+  intent?: Intent
+  className?: ClassName
+  ariaLabelForSearch?: string
+  ariaLabelForClear?: string
+  onClear?: () => void
+  onEnter?: (value: string) => void
+  onSearch?: (value: string) => void
+  validatorFn?: (value: string) => {
+    valid: boolean
+    value: any
+  }
+  placeHolderText?: string
+}
+
+function fallbackSearchHandler(value: string): void {
+  // Implement a fallback querystring search handler
+  // but.... this will cause a page reload so not ideal
+  // for React and therefore should rarely be called.
+  const url = new URL(window.location.href)
+  const params = new URLSearchParams(url.search)
+  if (value.length > 0) {
+    params.set('query', value)
+  } else {
+    params.delete('query')
+  }
+  window.location.search = params.toString()
+}
+
+export function Search({
+  variant,
+  inputSize,
+  inputClassName,
+  intent,
+  className,
+  onClear,
+  onEnter,
+  onSearch,
+  validatorFn,
+  placeHolderText = 'Search',
+  ariaLabelForSearch = 'search',
+  ariaLabelForClear = 'clear',
+  ...rest
+}: SearchProps): React.JSX.Element {
+  const [search, setSearch] = useState<null | string>(null)
+  const inputRef = useRef<HTMLInputElement>(null)
+
+  const handleClear = (): void => {
+    setSearch(null)
+    if (onClear != null) {
+      onClear()
+    } else {
+      fallbackSearchHandler('')
+    }
+    if (inputRef?.current != null) {
+      inputRef.current.value = ''
+    }
+  }
+
+  const handleKeyDown = (event: { key: string }): void => {
+    if (event.key === 'Enter') {
+      if (search != null && search.length > 0) {
+        if (validatorFn != null) {
+          const result = validatorFn(search)
+          if (result.valid) {
+            if (onSearch != null) {
+              onSearch(search)
+            } else {
+              fallbackSearchHandler(search)
+            }
+          }
+        } else {
+          if (onSearch != null) {
+            onSearch(search)
+          } else {
+            fallbackSearchHandler(search)
+          }
+        }
+      }
+    }
+  }
+
+  const handleSearch = (): void => {
+    if (search != null && search.length > 0) {
+      if (validatorFn != null) {
+        const result = validatorFn(search)
+        if (result.valid) {
+          if (onSearch != null) {
+            onSearch(search)
+          } else {
+            fallbackSearchHandler(search)
+          }
+        }
+      } else {
+        if (onSearch != null) {
+          onSearch(search)
+        } else {
+          fallbackSearchHandler(search)
+        }
+      }
+    }
+  }
+
+  const handleChange = (event: React.ChangeEvent<HTMLInputElement>): void => {
+    setSearch(event.target.value)
+  }
+
+  useEffect(() => {
+    const searchParams = new URLSearchParams(window.location.search)
+    const currentSearch = searchParams.get('query')
+    if (currentSearch != null && search == null) {
+      setSearch(currentSearch)
+    }
+  })
+
+  return (
+    <div className={className}>
+      <Input
+        variant={variant}
+        intent={intent}
+        inputSize={inputSize}
+        ref={inputRef}
+        className={inputClassName}
+        onKeyDown={handleKeyDown}
+        onChange={handleChange}
+        onClick={(e) => {
+          e.preventDefault()
+          e.stopPropagation()
+        }}
+        id="search"
+        defaultValue={search ?? ''}
+        name="search"
+        placeHolder={placeHolderText}
+        disabled={false}
+        error={false}
+        startAdornment={
+          <InputAdornment position="start">
+            <IconButton
+              role="button"
+              intent="noeffect"
+              variant="text"
+              ripple={false}
+              arial-label={ariaLabelForSearch}
+              size="xs"
+              onClick={() => {
+                handleSearch()
+              }}
+            >
+              <SearchIcon width="20px" height="20px" />
+            </IconButton>
+          </InputAdornment>
+        }
+        endAdornment={
+          <InputAdornment position="end">
+            <IconButton
+              role="button"
+              intent="noeffect"
+              variant="text"
+              arial-label={ariaLabelForClear}
+              size="xs"
+              onClick={() => {
+                handleClear()
+              }}
+            >
+              <CloseIcon width="16px" height="16px" />
+            </IconButton>
+          </InputAdornment>
+        }
+        {...rest}
+      />
+    </div>
+  )
+}