@byline/ui 0.9.3 → 0.10.1

package/src/widgets/drawer/drawer.tsx

@@ -0,0 +1,98 @@
+'use client'
+
+import type { ReactNode } from 'react'
+import { useEffect } from 'react'
+
+import { Drawer as BaseDrawer } from '@base-ui/react/drawer'
+import cx from 'classnames'
+
+import styles from './drawer.module.css'
+import { DrawerContainer } from './drawer-container'
+import { DrawerContent } from './drawer-content'
+import { useDrawer } from './drawer-context'
+import { DrawerHeader } from './drawer-header'
+import { DrawerTopActions } from './drawer-top-actions'
+
+type Styles = {
+  [key: string]: string
+}
+
+const typedStyles: Styles = styles
+
+export interface DrawerProps {
+  id: string
+  isOpen: boolean
+  closeOnOverlayClick?: boolean
+  onDismiss: () => void
+  children: ReactNode
+  width?: 'narrow' | 'medium' | 'wide'
+  topOffset?: string
+  className?: string
+}
+
+const Drawer = ({
+  id,
+  isOpen,
+  onDismiss,
+  closeOnOverlayClick,
+  children,
+  width = 'narrow',
+  topOffset = '0',
+  className,
+}: DrawerProps) => {
+  const { addDrawer, removeDrawer, drawers } = useDrawer()
+  const depth = drawers.indexOf(id)
+
+  useEffect(() => {
+    if (isOpen) {
+      addDrawer(id)
+    } else {
+      removeDrawer(id)
+    }
+    return () => removeDrawer(id)
+  }, [isOpen, id, addDrawer, removeDrawer])
+
+  const hasTopOffset = topOffset !== '0'
+
+  return (
+    <BaseDrawer.Root
+      open={isOpen}
+      onOpenChange={(open) => {
+        if (!open) {
+          onDismiss()
+        }
+      }}
+      modal={hasTopOffset ? 'trap-focus' : true}
+      swipeDirection="right"
+      disablePointerDismissal={closeOnOverlayClick !== true}
+    >
+      <BaseDrawer.Portal>
+        <BaseDrawer.Backdrop
+          className={cx('infonomic-drawer-backdrop', styles.backdrop)}
+          style={hasTopOffset ? { top: topOffset } : undefined}
+        />
+        <BaseDrawer.Popup
+          className={cx(
+            'infonomic-drawer-wrapper',
+            styles['drawer-wrapper'],
+            typedStyles[`drawer-${width}`],
+            typedStyles[`drawer-depth-${depth.toString()}`],
+            className
+          )}
+          style={hasTopOffset ? { top: topOffset } : undefined}
+        >
+          {children}
+        </BaseDrawer.Popup>
+      </BaseDrawer.Portal>
+    </BaseDrawer.Root>
+  )
+}
+
+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,5 @@
+'use client'
+
+import { domAnimation } from 'motion/react'
+
+export default domAnimation

package/src/widgets/drawer/motionDomMax.ts

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

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

@@ -0,0 +1,31 @@
+'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('infonomic-modal-actions', styles['modal-actions'], className)}
+    >
+      {children}
+    </div>
+  )
+}

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

@@ -0,0 +1,31 @@
+'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('infonomic-modal-container', styles['modal-container'], className)}
+      {...rest}
+    >
+      {children}
+    </div>
+  )
+}

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

@@ -0,0 +1,31 @@
+'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('infonomic-modal-content', styles['modal-content'], className)}
+    >
+      {children}
+    </div>
+  )
+}

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

@@ -0,0 +1,28 @@
+'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('infonomic-modal-header', styles['modal-header'], 'prose', className)
+  return (
+    <div style={{ overflowWrap: 'anywhere' }} ref={ref} {...rest} className={classes}>
+      {children}
+    </div>
+  )
+}

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

@@ -0,0 +1,127 @@
+@layer byline-base, byline-utilities, byline-theme, byline-components;
+
+@layer byline-components {
+  /* Backdrop overlay */
+
+  .backdrop,
+  :global(.infonomic-modal-backdrop) {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background-color: rgba(245, 245, 245, 0.35);
+    transition: opacity 200ms ease;
+  }
+
+  .backdrop[data-starting-style],
+  .backdrop[data-ending-style] {
+    opacity: 0;
+  }
+
+  :global(.dark) .backdrop,
+  :global([data-theme="dark"]) .backdrop,
+  :global(.dark .infonomic-modal-backdrop),
+  :global([data-theme="dark"] .infonomic-modal-backdrop) {
+    background-color: rgba(0, 0, 0, 0.5);
+  }
+
+  /* Modal wrapper / popup — the dialog surface */
+
+  .modal-wrapper,
+  :global(.infonomic-modal-wrapper) {
+    position: fixed;
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-end;
+    align-items: center;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    transition: opacity 200ms ease;
+  }
+
+  .modal-wrapper[data-starting-style],
+  .modal-wrapper[data-ending-style] {
+    opacity: 0;
+  }
+
+  @media screen and (min-width: 40rem) {
+    .modal-wrapper,
+    :global(.infonomic-modal-wrapper) {
+      justify-content: center;
+    }
+  }
+
+  /* Container — the visible dialog box */
+
+  .modal-container,
+  :global(.infonomic-modal-container) {
+    display: flex;
+    flex-direction: column;
+    box-shadow: var(--shadow-md);
+    border-radius: var(--border-radius-md);
+    min-height: 300px;
+    max-height: 88vh;
+    width: 100%;
+    background-color: var(--surface-panel);
+    border: 1px solid var(--border-color);
+    margin-left: var(--spacing-8);
+    margin-right: var(--spacing-8);
+  }
+
+  @media screen and (min-width: 40rem) {
+    .modal-container,
+    :global(.infonomic-modal-container) {
+      max-height: calc(100vh - 24px);
+      min-height: auto;
+      width: auto;
+    }
+  }
+
+  /* Sub-component styles */
+
+  .modal-header,
+  :global(.infonomic-modal-header) {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: var(--gap-3);
+    padding-left: var(--spacing-16);
+    padding-right: var(--spacing-16);
+    padding-top: var(--spacing-16);
+    max-width: 100%;
+  }
+
+  .modal-header h2,
+  .modal-header h3,
+  :global(.infonomic-modal-header h2),
+  :global(.infonomic-modal-header h3) {
+    margin: 0;
+  }
+
+  .modal-content,
+  :global(.infonomic-modal-content) {
+    display: flex;
+    flex: 1;
+    flex-direction: column;
+    gap: var(--gap-3);
+    padding-left: var(--spacing-16);
+    padding-right: var(--spacing-16);
+    padding-bottom: var(--spacing-12);
+    max-width: 100%;
+  }
+
+  .modal-actions,
+  :global(.infonomic-modal-actions) {
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+    gap: var(--gap-3);
+    padding-top: var(--spacing-8);
+    padding-bottom: var(--spacing-20);
+    padding-left: var(--spacing-16);
+    padding-right: var(--spacing-16);
+  }
+}

package/src/widgets/modal/modal.tsx

@@ -0,0 +1,88 @@
+'use client'
+
+import type React from 'react'
+import { createContext, useCallback, useState } from 'react'
+
+import { Dialog } from '@base-ui/react/dialog'
+import cx from 'classnames'
+
+import styles from './modal.module.css'
+import { ModalActions } from './modal-actions'
+import { ModalContainer } from './modal-container'
+import { ModalContent } from './modal-content'
+import { ModalHeader } from './modal-header'
+
+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,
+}: ModalProps): React.JSX.Element {
+  return (
+    <ModalContext.Provider value={{ onDismiss }}>
+      <Dialog.Root
+        open={isOpen}
+        onOpenChange={(open) => {
+          if (!open) {
+            onDismiss?.()
+          }
+        }}
+        modal
+        disablePointerDismissal={closeOnOverlayClick !== true}
+      >
+        <Dialog.Portal>
+          <Dialog.Backdrop className={cx('infonomic-modal-backdrop', styles.backdrop)} />
+          <Dialog.Popup className={cx('infonomic-modal-wrapper', styles['modal-wrapper'])}>
+            {children}
+          </Dialog.Popup>
+        </Dialog.Portal>
+      </Dialog.Root>
+    </ModalContext.Provider>
+  )
+}
+
+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,5 @@
+'use client'
+
+import { domAnimation } from 'motion/react'
+
+export default domAnimation

package/src/widgets/modal/motionDomMax.ts

@@ -0,0 +1,5 @@
+'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.tsx

@@ -0,0 +1,187 @@
+'use client'
+
+import type React from 'react'
+import { useEffect, useRef, useState } from 'react'
+
+import { IconButton } from '../../components/button/index.js'
+import { Input } from '../../components/inputs/input.jsx'
+import { InputAdornment } from '../../components/inputs/input-adornment.jsx'
+import { CloseIcon, SearchIcon } from '../../icons'
+import type { ClassName, Intent, Size, Variant } from '../../components/inputs/@types/input.js'
+
+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>
+  )
+}