@veracity/vui 1.0.0 → 1.1.1

package/src/popover/usePopover.ts

@@ -11,112 +11,112 @@ import { UsePopoverProps } from './usePopover.types'
  * Exposes functions used for ref callbacks on consuming components, programatic open/close methods and properties.
  */
 export default function usePopover(props: UsePopoverProps = {}) {
-	const {
-		closeOnBlur = true,
-		closeOnEsc = true,
-		defaultIsOpen = false,
-		// disablePortal,
-		isOpen: isOpenProp,
-		matchWidth,
-		offset,
-		onClose: onCloseProp,
-		onOpen: onOpenProp,
-		options,
-		placement = 'bottom-start',
-		trigger = 'click'
-	} = props
+  const {
+    closeOnBlur = true,
+    closeOnEsc = true,
+    defaultIsOpen = false,
+    // disablePortal,
+    isOpen: isOpenProp,
+    matchWidth,
+    offset,
+    onClose: onCloseProp,
+    onOpen: onOpenProp,
+    options,
+    placement = 'bottom-start',
+    trigger = 'click'
+  } = props
 
-	const [isOpen, setIsOpen] = useState(isOpenProp ?? defaultIsOpen)
-	const [instance, setInstance] = useState<Instance | null>(null)
-	const [reference, setReference] = useState<HTMLElement | null>(null)
-	const [popper, setPopper] = useState<HTMLElement | null>(null)
+  const [isOpen, setIsOpen] = useState(isOpenProp ?? defaultIsOpen)
+  const [instance, setInstance] = useState<Instance | null>(null)
+  const [reference, setReference] = useState<HTMLElement | null>(null)
+  const [popper, setPopper] = useState<HTMLElement | null>(null)
 
-	const close = useCallback(() => instance?.hide(), [instance])
-	const onClose = useCallbackRef(onCloseProp)
-	const onOpen = useCallbackRef(onOpenProp)
-	const open = useCallback(() => instance?.show(), [instance])
+  const close = useCallback(() => instance?.hide(), [instance])
+  const onClose = useCallbackRef(onCloseProp)
+  const onOpen = useCallbackRef(onOpenProp)
+  const open = useCallback(() => instance?.show(), [instance])
 
-	const isControlled = isOpenProp !== undefined
+  const isControlled = isOpenProp !== undefined
 
-	const tippyOptions: Partial<TippyProps> = useMemo(() => {
-		const {
-			offset: optionsOffset,
-			onHidden,
-			onHide,
-			onShow,
-			plugins = [],
-			popperOptions = {},
-			...otherOptions
-		} = options ?? {}
+  const tippyOptions: Partial<TippyProps> = useMemo(() => {
+    const {
+      offset: optionsOffset,
+      onHidden,
+      onHide,
+      onShow,
+      plugins = [],
+      popperOptions = {},
+      ...otherOptions
+    } = options ?? {}
 
-		return {
-			arrow: false,
-			duration: [200, 150],
-			hideOnClick: !isControlled ? closeOnBlur : false,
-			interactive: true,
-			maxWidth: 'none',
-			offset: optionsOffset ?? offset ?? [0, 4],
-			onHidden: instance => {
-				setIsOpen(false)
-				onHidden?.(instance)
-			},
-			onHide: instance => {
-				onClose(instance)
-				onHide?.(instance)
-			},
-			onShow: instance => {
-				setIsOpen(true)
-				onOpen(instance)
-				onShow?.(instance)
-			},
-			placement,
-			plugins: [...(!isControlled && closeOnEsc ? [closeOnEscPlugin] : []), ...plugins],
-			popperOptions: {
-				...popperOptions,
-				modifiers: [{ ...matchWidthModifier, enabled: !!matchWidth }, ...(popperOptions.modifiers ?? [])]
-			},
-			showOnCreate: isOpenProp ?? defaultIsOpen,
-			trigger: !isControlled ? trigger : 'manual',
-			...otherOptions
-		}
-	}, [closeOnBlur, closeOnEsc, offset, options, placement, trigger])
+    return {
+      arrow: false,
+      duration: [200, 150],
+      hideOnClick: !isControlled ? closeOnBlur : false,
+      interactive: true,
+      maxWidth: 'none',
+      offset: optionsOffset ?? offset ?? [0, 4],
+      onHidden: instance => {
+        setIsOpen(false)
+        onHidden?.(instance)
+      },
+      onHide: instance => {
+        onClose(instance)
+        onHide?.(instance)
+      },
+      onShow: instance => {
+        setIsOpen(true)
+        onOpen(instance)
+        onShow?.(instance)
+      },
+      placement,
+      plugins: [...(!isControlled && closeOnEsc ? [closeOnEscPlugin] : []), ...plugins],
+      popperOptions: {
+        ...popperOptions,
+        modifiers: [{ ...matchWidthModifier, enabled: !!matchWidth }, ...(popperOptions.modifiers ?? [])]
+      },
+      showOnCreate: isOpenProp ?? defaultIsOpen,
+      trigger: !isControlled ? trigger : 'manual',
+      ...otherOptions
+    }
+  }, [closeOnBlur, closeOnEsc, offset, options, placement, trigger])
 
-	// Create a new Tippy instance
-	useEffect(() => {
-		if (popper !== null && reference !== null) {
-			// Destroy old instance to ensure new options work
-			instance?.destroy()
+  // Create a new Tippy instance
+  useEffect(() => {
+    if (popper !== null && reference !== null) {
+      // Destroy old instance to ensure new options work
+      instance?.destroy()
 
-			const newInstance = tippy(reference, {
-				...tippyOptions,
-				content: popper
-			})
+      const newInstance = tippy(reference, {
+        ...tippyOptions,
+        content: popper
+      })
 
-			setInstance(newInstance)
-		}
-	}, [popper, tippyOptions, trigger])
+      setInstance(newInstance)
+    }
+  }, [popper, tippyOptions, trigger])
 
-	// Handle showing/hiding popup in controlled mode
-	useEffect(() => {
-		if (isControlled) {
-			if (isOpenProp) {
-				instance?.show()
-			} else {
-				instance?.hide()
-			}
-		}
-	}, [isOpenProp])
+  // Handle showing/hiding popup in controlled mode
+  useEffect(() => {
+    if (isControlled) {
+      if (isOpenProp) {
+        instance?.show()
+      } else {
+        instance?.hide()
+      }
+    }
+  }, [isOpenProp])
 
-	return {
-		close,
-		instance,
-		isOpen,
-		open,
-		popper,
-		reference,
-		setPopper,
-		setReference
-	}
+  return {
+    close,
+    instance,
+    isOpen,
+    open,
+    popper,
+    reference,
+    setPopper,
+    setReference
+  }
 }
 
 export type UsePopoverType = ReturnType<typeof usePopover>

package/src/popover/usePopover.types.ts

@@ -5,27 +5,27 @@ import { AnyString } from '../utils'
 export type PopoverTrigger = 'click' | 'focus' | 'focusin' | 'manual' | 'mouseenter'
 
 export type UsePopoverProps = {
-	/** Content closes when clicking the trigger or anywhere outside. @default true */
-	closeOnBlur?: boolean
-	/** Content closes when pressing 'Escape'. @default true */
-	closeOnEsc?: boolean
-	/** Content is opened on first render. Uncontrolled mode. */
-	defaultIsOpen?: boolean
-	// disablePortal?: boolean
-	/** Content is opened/closed by the consumer. Controlled mode. */
-	isOpen?: boolean
-	/** Sets the content element width to be the same as trigger element. */
-	matchWidth?: boolean
-	/** Displaces content from the trigger in pixels. */
-	offset?: TippyProps['offset']
-	/** Invoked once content is fully hidden. */
-	onClose?: (instance: Instance<TippyProps>) => void
-	/** Invoked once content begins to show. */
-	onOpen?: (instance: Instance<TippyProps>) => void
-	/** Object with any Tippy props. */
-	options?: Partial<TippyProps>
-	/** Preferred placement of the content. Might be flipped if needs more space. */
-	placement?: Placement
-	/** Determintes the events that cause the content to show. */
-	trigger?: PopoverTrigger | AnyString
+  /** Content closes when clicking the trigger or anywhere outside. @default true */
+  closeOnBlur?: boolean
+  /** Content closes when pressing 'Escape'. @default true */
+  closeOnEsc?: boolean
+  /** Content is opened on first render. Uncontrolled mode. */
+  defaultIsOpen?: boolean
+  // disablePortal?: boolean
+  /** Content is opened/closed by the consumer. Controlled mode. */
+  isOpen?: boolean
+  /** Sets the content element width to be the same as trigger element. */
+  matchWidth?: boolean
+  /** Displaces content from the trigger in pixels. */
+  offset?: TippyProps['offset']
+  /** Invoked once content is fully hidden. */
+  onClose?: (instance: Instance<TippyProps>) => void
+  /** Invoked once content begins to show. */
+  onOpen?: (instance: Instance<TippyProps>) => void
+  /** Object with any Tippy props. */
+  options?: Partial<TippyProps>
+  /** Preferred placement of the content. Might be flipped if needs more space. */
+  placement?: Placement
+  /** Determintes the events that cause the content to show. */
+  trigger?: PopoverTrigger | AnyString
 }

package/src/portal/portal.tsx

@@ -5,18 +5,18 @@ import { PortalProps } from './portal.types'
 
 /** Provided children are portaled to document.body or custom container. */
 export const Portal: FC<PortalProps> = props => {
-	const { children, containerRef, disablePortal } = props
-	const [mountNode, setMountNode] = useState<HTMLElement>()
+  const { children, containerRef, disablePortal } = props
+  const [mountNode, setMountNode] = useState<HTMLElement>()
 
-	useEffect(() => {
-		if (!disablePortal) {
-			setMountNode(containerRef?.current ?? document.body)
-		}
-	}, [disablePortal])
+  useEffect(() => {
+    if (!disablePortal) {
+      setMountNode(containerRef?.current ?? document.body)
+    }
+  }, [disablePortal])
 
-	if (disablePortal) return <>{children}</>
+  if (disablePortal) return <>{children}</>
 
-	return mountNode ? createPortal(children, mountNode) : <>{mountNode}</>
+  return mountNode ? createPortal(children, mountNode) : <>{mountNode}</>
 }
 
 export default Portal

package/src/portal/portal.types.ts

@@ -1,8 +1,8 @@
 import { RefObject } from 'react'
 
 export type PortalProps = {
-	/** Ref of a custom container that will be used instead of document.body. */
-	containerRef?: RefObject<HTMLElement | null>
-	/** Content will be rendered as usual, without portaling. */
-	disablePortal?: boolean
+  /** Ref of a custom container that will be used instead of document.body. */
+  containerRef?: RefObject<HTMLElement | null>
+  /** Content will be rendered as usual, without portaling. */
+  disablePortal?: boolean
 }

package/src/progress/index.ts

@@ -0,0 +1,3 @@
+export * from './progress'
+export { default } from './progress'
+export * from './progress.types'

package/src/progress/progress.tsx

@@ -0,0 +1,54 @@
+import React, { useEffect, useState } from 'react'
+
+import { Box } from '../box'
+import { styled, useStyleConfig, vui } from '../core'
+import { cs } from '../utils'
+import { ProgressProps } from './progress.types'
+
+export const ProgressBase = styled.divBox`
+  display: flex;
+  width: 100%;
+`
+
+const minPercentageDisplay = 3
+
+/** Indicates a process progress. */
+export const Progress = vui<'div', ProgressProps>((props, ref) => {
+  const { className, size = 'md', value = 0, max = 100, showPercentage, ...rest } = props
+
+  const [width, setWidth] = useState(0)
+
+  const styles = useStyleConfig('Progress', props)
+
+  useEffect(() => {
+    const w = !value ? 0 : Math.ceil((value / max) * 100)
+    setWidth(w > 100 ? 100 : w)
+  }, [value, max])
+
+  return (
+    <ProgressBase
+      className={cs('vui-progress', className)}
+      ref={ref}
+      {...styles.container}
+      {...rest}
+      bg="grey.10"
+      borderRadius="sm"
+      h={1}
+    >
+      <Box
+        bg="prussian.80"
+        borderRadius="sm"
+        position="relative"
+        textAlign="right"
+        transition="width 0.4s ease-in-out;"
+        w={`${width}%`}
+      >
+        {showPercentage && value >= minPercentageDisplay && (
+          <Box {...styles.percentage} position="absolute" right="0">{`${width}%`}</Box>
+        )}
+      </Box>
+    </ProgressBase>
+  )
+})
+
+export default Progress

package/src/progress/progress.types.ts

@@ -0,0 +1,9 @@
+import { SystemProps } from '../system'
+import { ThemingProps } from '../theme'
+
+export type ProgressProps = SystemProps &
+  ThemingProps<'Progress'> & {
+    value?: number
+    max?: number
+    showPercentage?: boolean
+  }

package/src/progress/theme.ts

@@ -0,0 +1,53 @@
+const baseStyle = {}
+
+const defaultProps = {
+  size: 'md'
+}
+
+const sizes = {
+  sm: {
+    container: {
+      minH: '4px'
+    },
+    percentage: {
+      fontSize: '80%',
+      top: '-16px'
+    }
+  },
+  md: {
+    container: {
+      minH: '8px'
+    },
+    percentage: {
+      fontSize: '100%',
+      top: '-20px'
+    }
+  },
+  lg: {
+    container: {
+      minH: '12px'
+    },
+    percentage: {
+      fontSize: '110%',
+      top: '-22px'
+    }
+  },
+  xl: {
+    container: {
+      minH: '16px'
+    },
+    percentage: {
+      fontSize: '120%',
+      top: '-24px'
+    }
+  }
+}
+
+const variants = {}
+
+export default {
+  baseStyle,
+  defaultProps,
+  sizes,
+  variants
+}