@veracity/vui 0.7.1 → 1.1.0

package/src/core/vuiProvider/resetCSS.tsx

@@ -0,0 +1,175 @@
+import { createGlobalStyle } from '../styled'
+
+/** Set of CSS resets to unify styles across browsers and provide good style defaults. */
+export default createGlobalStyle`
+	html {
+		box-sizing: border-box;
+		line-height: 1.4;
+		-webkit-text-size-adjust: 100%;
+	}
+
+	*, *::before, *::after {
+		border-style: solid;
+		border-width: 0;
+		box-sizing: inherit;
+	}
+
+	body {
+		margin: 0;
+	}
+
+	a {
+		background-color: transparent;
+		color: inherit;
+		text-decoration: none;
+	}
+
+	abbr[title] {
+		border-bottom: none;
+		text-decoration: underline dotted;
+	}
+
+	b, strong {
+		font-weight: bolder;
+	}
+
+	button {
+		cursor: pointer;
+		-webkit-appearance: button;
+	}
+
+	button, input, optgroup, select, textarea {
+		font-family: inherit;
+		font-size: 100%;
+		margin: 0;
+	}
+
+	button, select {
+		text-transform: none;
+	}
+
+	code, kbd, pre, samp {
+		font-family: ui-monospace, SFMono-Regular, Consolas, 'Liberation Mono', Menlo, monospace;
+		font-size: 1em;
+	}
+
+	details {
+		display: block;
+	}
+
+	fieldset {
+		padding: 0.35em 0.75em 0.625em;
+	}
+
+	h1, h2, h3, h4, h5, h6, p, hr, dl, dd, blockquote, figure, pre {
+		margin: 0;
+	}
+
+	h1, h2, h3, h4, h5, h6 {
+		font-size: inherit;
+		font-weight: inherit;
+	}
+
+	hr {
+		color: inherit;
+		height: 0;
+	}
+
+	img {
+		border-style: none;
+	}
+
+	img, svg, video, canvas, audio, iframe, embed, object {
+		display: block;
+	}
+
+	legend {
+		color: inherit;
+		display: table;
+		max-width: 100%;
+		padding: 0;
+		white-space: normal;
+	}
+
+	main {
+		display: block;
+	}
+
+	ol, ul  {
+		list-style: none;
+		margin: 0;
+		padding: 0;
+	}
+
+	progress {
+		vertical-align: baseline;
+	}
+
+	summary {
+		display: list-item;
+	}
+
+	small {
+		font-size: 80%;
+	}
+
+	sub, sup {
+		font-size: 75%;
+		line-height: 0;
+		position: relative;
+		vertical-align: baseline;
+	}
+
+	sub {
+		bottom: -0.25em;
+	}
+
+	sup {
+		top: -0.5em;
+	}
+
+	table {
+		text-indent: 0;
+		border-color: inherit;
+	}
+
+	template {
+		display: none;
+	}
+
+	textarea {
+		overflow: auto;
+	}
+
+	::-moz-focus-inner {
+		border-style: none;
+		padding: 0;
+	}
+
+	::-webkit-file-upload-button {
+		font: inherit;
+		-webkit-appearance: button;
+	}
+
+	[type=checkbox], [type=radio] {
+		padding: 0;
+	}
+
+	[type=number]::-webkit-inner-spin-button,
+	[type=number]::-webkit-outer-spin-button {
+		height: auto;
+	}
+
+	[type=search] {
+		outline-offset: -2px;
+		-webkit-appearance: textfield;
+	}
+
+	[type=search]::-webkit-search-decoration {
+		-webkit-appearance: none;
+	}
+
+	[hidden] {
+		display: none;
+	}
+`

package/src/core/vuiProvider/vuiProvider.tsx

@@ -0,0 +1,37 @@
+import React, { FC } from 'react'
+import { ThemeProvider } from 'styled-components'
+
+import PopoverStyle from '../../popover/popoverStyle'
+import defaultTheme, { VuiTheme } from '../../theme'
+import GlobalStyle from './globalStyle'
+import ResetCSS from './resetCSS'
+
+type VuiProviderProps = {
+  /** Adds basic styles to body @default true */
+  globalStyle?: boolean
+  /** Applies custom CSS reset @default true */
+  resetCSS?: boolean
+  /** Modified theme config using 'extendTheme' utility */
+  theme?: VuiTheme
+}
+
+/** Provides theme to all wrapped components and by default includes CSS reset and global styles. */
+const VuiProvider: FC<VuiProviderProps> = ({
+  children,
+  globalStyle = true,
+  resetCSS = true,
+  theme = defaultTheme as VuiTheme
+}) => {
+  return (
+    <ThemeProvider theme={theme}>
+      {resetCSS && <ResetCSS />}
+      <GlobalStyle globalStyle={globalStyle} />
+
+      <PopoverStyle />
+
+      {children}
+    </ThemeProvider>
+  )
+}
+
+export default VuiProvider

package/src/dialog/consts.ts

@@ -0,0 +1,29 @@
+import { DialogStatusMapping } from './dialog.types'
+
+/** Defines icon visuals for each Dialog status. */
+export const dialogStatusMapping: DialogStatusMapping = {
+  danger: {
+    iconProps: {
+      color: 'red.80',
+      name: 'falExclamationTriangle'
+    }
+  },
+  error: {
+    iconProps: {
+      color: 'red.80',
+      name: 'falTimesCircle'
+    }
+  },
+  info: {
+    iconProps: {
+      color: 'blue.80',
+      name: 'falInfoCircle'
+    }
+  },
+  warning: {
+    iconProps: {
+      color: 'yellow.90',
+      name: 'falExclamationTriangle'
+    }
+  }
+}

package/src/dialog/context.ts

@@ -0,0 +1,6 @@
+import { createContext } from '../utils'
+import { DialogContext } from './dialog.types'
+
+const [DialogProvider, useDialogContext] = createContext<DialogContext>({ isOptional: true })
+
+export { DialogProvider, useDialogContext }

package/src/dialog/dialog.tsx

@@ -0,0 +1,122 @@
+import React, { useRef } from 'react'
+
+import { styled, useStyleConfig, vui, VuiComponent } from '../core'
+import { Modal } from '../modal'
+import { cs, isJsx, isReactText, random, useIds } from '../utils'
+import { DialogProvider } from './context'
+import { DialogProps } from './dialog.types'
+import DialogBody from './dialogBody'
+import DialogCancelButton from './dialogCancelButton'
+import DialogCloseButton from './dialogCloseButton'
+import DialogFooter from './dialogFooter'
+import DialogHeader from './dialogHeader'
+import DialogIcon from './dialogIcon'
+import DialogSubmitButton from './dialogSubmitButton'
+import DialogTitle from './dialogTitle'
+
+export const DialogBase = styled.divBox`
+  background-color: white;
+  border-radius: md;
+  box-shadow: 4;
+  display: flex;
+  flex-direction: column;
+  margin: 16px;
+  max-height: calc(100vh - 32px); // full height - margin top/bottom
+  width: 100%;
+`
+
+/**
+ * Displays content in a Modal window. Includes required accessibility configuration.
+ *
+ * Dialog is built upon `Modal`.
+ *
+ * The content can include important information, like warnings or errors, simple forms or prompts for user's decision. It blocks interaction with the rest of the page, but often can be disabled by pressing Escape, clicking on the backdrop or close button.
+ */
+export const Dialog = vui<'div', DialogProps>((props, ref) => {
+  const {
+    body: bodyProp,
+    cancelButton,
+    children,
+    className,
+    closeButton,
+    footer,
+    header,
+    icon,
+    id,
+    isOpen,
+    modalProps: modalPropsProp,
+    onClose,
+    size,
+    status,
+    submitButton,
+    title,
+    variant,
+    ...rest
+  } = props
+  const styles = useStyleConfig('Dialog', props)
+
+  const idRef = useRef(id ?? random().toString())
+  const [dialogId, bodyId, titleId] = useIds(idRef.current, ['dialog', 'dialog-body', 'dialog-title'])
+
+  const body = isReactText(bodyProp) ? { children: bodyProp } : bodyProp
+  const showFooter = Boolean(footer || cancelButton || submitButton)
+  const showHeader = Boolean(header || closeButton || icon || title)
+
+  const ariaProps = {
+    'aria-describedby': bodyId,
+    'aria-labelledby': titleId
+  }
+
+  const modalProps = {
+    ...modalPropsProp,
+    contentProps: { alignItems: 'center', justifyContent: 'center', ...modalPropsProp?.contentProps }
+  }
+
+  const context = { bodyId, icon, isOpen, onClose, size, status, titleId, variant }
+
+  return (
+    <DialogProvider value={context}>
+      <Modal {...{ isOpen, onClose }} {...modalProps}>
+        <DialogBase
+          className={cs('vui-dialog', className)}
+          id={dialogId}
+          ref={ref}
+          role="dialog"
+          {...ariaProps}
+          {...styles.container}
+          {...rest}
+        >
+          {children ?? (
+            <>
+              {isJsx(header) ? header : showHeader && <DialogHeader {...{ closeButton, icon, title }} {...header} />}
+
+              {isJsx(body) ? body : body && <DialogBody {...body} />}
+
+              {isJsx(footer) ? footer : showFooter && <DialogFooter {...{ cancelButton, submitButton }} {...footer} />}
+            </>
+          )}
+        </DialogBase>
+      </Modal>
+    </DialogProvider>
+  )
+}) as VuiComponent<'div', DialogProps> & {
+  Body: typeof DialogBody
+  CancelButton: typeof DialogCancelButton
+  CloseButton: typeof DialogCloseButton
+  Footer: typeof DialogFooter
+  Header: typeof DialogHeader
+  Icon: typeof DialogIcon
+  SubmitButton: typeof DialogSubmitButton
+  Title: typeof DialogTitle
+}
+
+Dialog.Body = DialogBody
+Dialog.CancelButton = DialogCancelButton
+Dialog.CloseButton = DialogCloseButton
+Dialog.Footer = DialogFooter
+Dialog.Header = DialogHeader
+Dialog.Icon = DialogIcon
+Dialog.SubmitButton = DialogSubmitButton
+Dialog.Title = DialogTitle
+
+export default Dialog

package/src/dialog/dialog.types.ts

@@ -0,0 +1,60 @@
+import { ReactText } from 'react'
+
+import { BoxProps } from '../box'
+import { ButtonProps, IconButtonProps } from '../button'
+import { HeadingProps } from '../heading'
+import { IconProp, IconProps } from '../icon'
+import { ModalProps } from '../modal'
+import { SystemProps } from '../system'
+import { ThemingProps } from '../theme'
+import { PropsOf } from '../utils'
+
+export type DialogBodyProps = PropsOf<'div', BoxProps>
+
+export type DialogCancelButtonProps = PropsOf<'button', ButtonProps>
+
+export type DialogCloseButtonProps = PropsOf<'button', IconButtonProps>
+
+export type DialogContext = Pick<DialogProps, 'icon' | 'isOpen' | 'onClose' | 'size' | 'status' | 'variant'> & {
+  bodyId?: string
+  titleId?: string
+}
+
+export type DialogFooterProps = PropsOf<'div', BoxProps & Pick<DialogProps, 'cancelButton' | 'submitButton'>>
+
+export type DialogHeaderProps = PropsOf<'div', BoxProps & Pick<DialogProps, 'closeButton' | 'icon' | 'title'>>
+
+export type DialogIconProps = PropsOf<'svg', IconProps>
+
+export type DialogProps = SystemProps &
+  ThemingProps<'Dialog'> &
+  Pick<ModalProps, 'isOpen' | 'onClose'> & {
+    /** Socket for the main Dialog content. */
+    body?: ReactText | DialogBodyProps | JSX.Element
+    /** Socket for a cancel button in the Dialog Footer. */
+    cancelButton?: DialogCancelButtonProps | JSX.Element
+    /** Socket for a close icon button in the Dialog Header. */
+    closeButton?: boolean | DialogCloseButtonProps | JSX.Element
+    /** Socket for a footer with buttons below Dialog Body. */
+    footer?: DialogFooterProps | JSX.Element
+    /** Socket for a header with title and icon above the Dialog Body */
+    header?: DialogHeaderProps | JSX.Element
+    /** Socket for a custom icon in the Dialog Header. */
+    icon?: IconProp | DialogIconProps | JSX.Element
+    /** Props passed to the internal Modal component. */
+    modalProps?: ModalProps
+    /** Adds an icon for a given status, such as error or warning. */
+    status?: DialogStatus
+    /** Socket for a submit button in the Dialog Footer. */
+    submitButton?: DialogSubmitButtonProps | JSX.Element
+    /** Socket for a title in the Dialog Header. */
+    title?: HeadingProps['text'] | DialogTitleProps | JSX.Element
+  }
+
+export type DialogStatus = 'danger' | 'error' | 'info' | 'warning'
+
+export type DialogStatusMapping = Record<string, { iconProps: IconProps }>
+
+export type DialogSubmitButtonProps = PropsOf<'button', ButtonProps>
+
+export type DialogTitleProps = PropsOf<'h4', HeadingProps>

package/src/dialog/dialogBody.tsx

@@ -0,0 +1,62 @@
+import React, { useEffect, useRef, useState } from 'react'
+
+import { Box } from '../box'
+import { useStyleConfig, vui } from '../core'
+import { cs, mergeRefs } from '../utils'
+import { useDialogContext } from './context'
+import { DialogBodyProps } from './dialog.types'
+
+/**
+ * Shows the main content between the Dialog Header and Footer.
+ * It becomes scrollable when content does not fit vertically. Borders are shown automatically.
+ * Receives more horizontal padding when Dialog has icon, so align text with title.
+ * Receives id linked to aria-describedby on the Dialog for accessibility.
+ */
+export const DialogBody = vui<'div', DialogBodyProps>((props, ref) => {
+  const { className, ...rest } = props
+  const { bodyId, icon, status } = useDialogContext() ?? {}
+  const styles = useStyleConfig('Dialog', useDialogContext())
+
+  const [isScrolled, setIsScrolled] = useState(false)
+  const bodyRef = useRef<HTMLDivElement>(null)
+
+  // Observe size changes of the body to detect if it becomes vertically scrollable
+  const observerRef = useRef(
+    new ResizeObserver(() => {
+      if (bodyRef.current) {
+        const { clientHeight, scrollHeight } = bodyRef.current
+        setIsScrolled(scrollHeight > clientHeight)
+      }
+    })
+  )
+
+  useEffect(() => {
+    bodyRef.current && observerRef.current?.observe(bodyRef.current)
+  }, [])
+
+  // If body can be scrolled vertically, add dividing lines on top and bottom
+  const borderProps = isScrolled ? { borderColor: 'grey.30' } : {}
+
+  // Add more body padding when custom or status icon is displayed
+  const paddingProps = (icon ?? status) !== undefined ? { px: 8 } : { px: 3 }
+
+  return (
+    <Box
+      borderBottom="1px solid transparent"
+      borderTop="1px solid transparent"
+      className={cs('vui-dialogBody', className)}
+      column
+      id={bodyId}
+      overflowY="auto"
+      pb={2}
+      pt={1.5}
+      ref={mergeRefs(ref, bodyRef)}
+      {...borderProps}
+      {...paddingProps}
+      {...styles.body}
+      {...rest}
+    />
+  )
+})
+
+export default DialogBody

package/src/dialog/dialogCancelButton.tsx

@@ -0,0 +1,26 @@
+import React from 'react'
+
+import { LineButton } from '../button'
+import { useStyleConfig, vui } from '../core'
+import { cs } from '../utils'
+import { useDialogContext } from './context'
+import { DialogCancelButtonProps } from './dialog.types'
+
+/** Shows an outlined Button in the Dialog Footer, which by default closes the Dialog. */
+export const DialogCancelButton = vui<'button', DialogCancelButtonProps>((props, ref) => {
+  const { className, ...rest } = props
+  const { onClose } = useDialogContext() ?? {}
+  const styles = useStyleConfig('Dialog', useDialogContext())
+
+  return (
+    <LineButton
+      className={cs('vui-dialogCancelButton', className)}
+      onClick={onClose}
+      ref={ref}
+      {...styles.cancelButton}
+      {...rest}
+    />
+  )
+})
+
+export default DialogCancelButton

package/src/dialog/dialogCloseButton.tsx

@@ -0,0 +1,33 @@
+import React from 'react'
+
+import { CloseButton } from '../button'
+import { useStyleConfig, vui } from '../core'
+import { cs } from '../utils'
+import { useDialogContext } from './context'
+import { DialogCloseButtonProps } from './dialog.types'
+
+/** Shows a CloseButton in the Dialog Header, which by default closes the Dialog. */
+export const DialogCloseButton = vui<'button', DialogCloseButtonProps>((props, ref) => {
+  const { className, ...rest } = props
+  const { onClose } = useDialogContext() ?? {}
+  const styles = useStyleConfig('Dialog', useDialogContext())
+
+  return (
+    <CloseButton
+      activeBg="grey.30"
+      className={cs('vui-dialogCloseButton', className)}
+      color="grey.80"
+      hoverBg="grey.20"
+      onClick={onClose}
+      position="absolute"
+      ref={ref}
+      right={16}
+      size="sm"
+      top={16}
+      {...styles.closeButton}
+      {...rest}
+    />
+  )
+})
+
+export default DialogCloseButton

package/src/dialog/dialogFooter.tsx

@@ -0,0 +1,37 @@
+import React from 'react'
+
+import { Box } from '../box'
+import { useStyleConfig, vui } from '../core'
+import { cs, isJsx } from '../utils'
+import { useDialogContext } from './context'
+import { DialogFooterProps } from './dialog.types'
+import DialogCancelButton from './dialogCancelButton'
+import DialogSubmitButton from './dialogSubmitButton'
+
+/** Shows control buttons below the Dialog Body. By default includes cancel and submit buttons. */
+export const DialogFooter = vui<'div', DialogFooterProps>((props, ref) => {
+  const { cancelButton, children, className, submitButton, ...rest } = props
+  const styles = useStyleConfig('Dialog', useDialogContext())
+
+  return (
+    <Box
+      className={cs('vui-dialogFooter', className)}
+      justifyContent="flex-end"
+      p={3}
+      pt={2}
+      ref={ref}
+      {...styles.footer}
+      {...rest}
+    >
+      {children ?? (
+        <>
+          {isJsx(cancelButton) ? cancelButton : cancelButton && <DialogCancelButton {...cancelButton} />}
+
+          {isJsx(submitButton) ? submitButton : submitButton && <DialogSubmitButton {...submitButton} />}
+        </>
+      )}
+    </Box>
+  )
+})
+
+export default DialogFooter

package/src/dialog/dialogHeader.tsx

@@ -0,0 +1,49 @@
+import React from 'react'
+
+import { Box } from '../box'
+import { useStyleConfig, vui } from '../core'
+import { cs, isJsx, isReactText, isString } from '../utils'
+import { useDialogContext } from './context'
+import { DialogHeaderProps } from './dialog.types'
+import DialogCloseButton from './dialogCloseButton'
+import DialogIcon from './dialogIcon'
+import DialogTitle from './dialogTitle'
+
+/** Shows title, status icon and close button above the Dialog Body. */
+export const DialogHeader = vui<'div', DialogHeaderProps>((props, ref) => {
+  const { children, className, closeButton, icon: iconProp, title: titleProp, ...rest } = props
+  const { onClose, status } = useDialogContext() ?? {}
+  const styles = useStyleConfig('Dialog', useDialogContext())
+
+  const icon = isString(iconProp) ? { name: iconProp } : iconProp
+  const showCloseButton = Boolean(closeButton !== undefined ? closeButton : onClose)
+  const showIcon = Boolean(icon || status)
+  const title = isReactText(titleProp) ? { text: titleProp } : titleProp
+
+  return (
+    <Box
+      className={cs('vui-dialogHeader', className)}
+      icon={icon}
+      pb={1.5}
+      pl={3}
+      position="relative"
+      pr={8}
+      pt={3}
+      ref={ref}
+      {...styles.header}
+      {...rest}
+    >
+      {children ?? (
+        <>
+          {isJsx(icon) ? icon : showIcon && <DialogIcon {...icon} />}
+
+          {isJsx(title) ? title : title && <DialogTitle {...title} />}
+
+          {isJsx(closeButton) ? closeButton : showCloseButton && <DialogCloseButton />}
+        </>
+      )}
+    </Box>
+  )
+})
+
+export default DialogHeader

package/src/dialog/dialogIcon.tsx

@@ -0,0 +1,20 @@
+import React from 'react'
+
+import { useStyleConfig, vui } from '../core'
+import { Icon } from '../icon'
+import { cs } from '../utils'
+import { dialogStatusMapping } from './consts'
+import { useDialogContext } from './context'
+import { DialogIconProps } from './dialog.types'
+
+/** Shows an icon based on a given status. Optionally, can be a custom icon. */
+export const DialogIcon = vui<'svg', DialogIconProps>((props, ref) => {
+  const { className, ...rest } = props
+  const { status = '' } = useDialogContext() ?? {}
+  const styles = useStyleConfig('Dialog', useDialogContext())
+  const { iconProps } = dialogStatusMapping[status] ?? {}
+
+  return <Icon className={cs('vui-dialogIcon', className)} mr={2} ref={ref} {...styles.icon} {...iconProps} {...rest} />
+})
+
+export default DialogIcon

package/src/dialog/dialogSubmitButton.tsx

@@ -0,0 +1,26 @@
+import React from 'react'
+
+import { Button } from '../button'
+import { useStyleConfig, vui } from '../core'
+import { cs } from '../utils'
+import { useDialogContext } from './context'
+import { DialogSubmitButtonProps } from './dialog.types'
+
+/** Shows a button in the Dialog Footer, which triggers the main action of the Dialog. */
+export const DialogSubmitButton = vui<'button', DialogSubmitButtonProps>((props, ref) => {
+  const { className, ...rest } = props
+  const styles = useStyleConfig('Dialog', useDialogContext())
+
+  return (
+    <Button
+      className={cs('vui-dialogSubmitButton', className)}
+      ml={2}
+      ref={ref}
+      text="Submit"
+      {...styles.submitButton}
+      {...rest}
+    />
+  )
+})
+
+export default DialogSubmitButton