@veracity/vui 1.0.0 → 1.1.0

package/src/core/vuiProvider/vuiProvider.tsx

@@ -7,31 +7,31 @@ 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
+  /** 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
+  children,
+  globalStyle = true,
+  resetCSS = true,
+  theme = defaultTheme as VuiTheme
 }) => {
-	return (
-		<ThemeProvider theme={theme}>
-			{resetCSS && <ResetCSS />}
-			<GlobalStyle globalStyle={globalStyle} />
+  return (
+    <ThemeProvider theme={theme}>
+      {resetCSS && <ResetCSS />}
+      <GlobalStyle globalStyle={globalStyle} />
 
-			<PopoverStyle />
+      <PopoverStyle />
 
-			{children}
-		</ThemeProvider>
-	)
+      {children}
+    </ThemeProvider>
+  )
 }
 
 export default VuiProvider

package/src/dialog/consts.ts

@@ -2,28 +2,28 @@ 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'
-		}
-	}
+  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/dialog.tsx

@@ -15,100 +15,101 @@ 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%;
+  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.
- * Used for alert messages, small forms or prompts.
+ *
+ * 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 {
+    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 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 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 ariaProps = {
+    'aria-describedby': bodyId,
+    'aria-labelledby': titleId
+  }
 
-	const modalProps = {
-		...modalPropsProp,
-		contentProps: { alignItems: 'center', justifyContent: 'center', ...modalPropsProp?.contentProps }
-	}
+  const modalProps = {
+    ...modalPropsProp,
+    contentProps: { alignItems: 'center', justifyContent: 'center', ...modalPropsProp?.contentProps }
+  }
 
-	const context = { bodyId, icon, isOpen, onClose, size, status, titleId, variant }
+  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} />}
+  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(body) ? body : body && <DialogBody {...body} />}
 
-							{isJsx(footer) ? footer : showFooter && <DialogFooter {...{ cancelButton, submitButton }} {...footer} />}
-						</>
-					)}
-				</DialogBase>
-			</Modal>
-		</DialogProvider>
-	)
+              {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
+  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.displayName = 'Dialog'
-
 Dialog.Body = DialogBody
 Dialog.CancelButton = DialogCancelButton
 Dialog.CloseButton = DialogCloseButton

package/src/dialog/dialog.types.ts

@@ -16,8 +16,8 @@ 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
+  bodyId?: string
+  titleId?: string
 }
 
 export type DialogFooterProps = PropsOf<'div', BoxProps & Pick<DialogProps, 'cancelButton' | 'submitButton'>>
@@ -27,29 +27,29 @@ export type DialogHeaderProps = PropsOf<'div', BoxProps & Pick<DialogProps, 'clo
 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
-	}
+  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'
 

package/src/dialog/dialogBody.tsx

@@ -13,52 +13,50 @@ import { DialogBodyProps } from './dialog.types'
  * 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}
-		/>
-	)
+  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}
+    />
+  )
 })
 
-DialogBody.displayName = 'DialogBody'
-
 export default DialogBody

package/src/dialog/dialogCancelButton.tsx

@@ -8,21 +8,19 @@ 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())
+  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}
-		/>
-	)
+  return (
+    <LineButton
+      className={cs('vui-dialogCancelButton', className)}
+      onClick={onClose}
+      ref={ref}
+      {...styles.cancelButton}
+      {...rest}
+    />
+  )
 })
 
-DialogCancelButton.displayName = 'DialogCancelButton'
-
 export default DialogCancelButton

package/src/dialog/dialogCloseButton.tsx

@@ -8,28 +8,26 @@ 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())
+  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}
-		/>
-	)
+  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}
+    />
+  )
 })
 
-DialogCloseButton.displayName = 'DialogCloseButton'
-
 export default DialogCloseButton

package/src/dialog/dialogFooter.tsx

@@ -10,30 +10,28 @@ 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())
+  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} />}
+  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>
-	)
+          {isJsx(submitButton) ? submitButton : submitButton && <DialogSubmitButton {...submitButton} />}
+        </>
+      )}
+    </Box>
+  )
 })
 
-DialogFooter.displayName = 'DialogFooter'
-
 export default DialogFooter

package/src/dialog/dialogHeader.tsx

@@ -11,41 +11,39 @@ 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>
-	)
+  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>
+  )
 })
 
-DialogHeader.displayName = 'DialogHeader'
-
 export default DialogHeader