@veracity/vui 1.0.0 → 1.1.0

package/src/modal/modalContent.tsx

@@ -6,30 +6,28 @@ import { useModalContext } from './context'
 import { ModalContentProps } from './modal.types'
 
 export const ModalContentBase = styled.divBox`
-	display: flex;
-	inset: 0px;
-	position: fixed;
-	z-index: modal;
+  display: flex;
+  inset: 0px;
+  position: fixed;
+  z-index: modal;
 `
 
 /** Wraps the content provided to the Modal component. */
 export const ModalContent = vui<'div', ModalContentProps>((props, ref) => {
-	const { className, ...rest } = props
-	const { onBackdropClick } = useModalContext() ?? {}
-	const styles = useStyleConfig('Modal', useModalContext())
+  const { className, ...rest } = props
+  const { onBackdropClick } = useModalContext() ?? {}
+  const styles = useStyleConfig('Modal', useModalContext())
 
-	return (
-		<ModalContentBase
-			className={cs('vui-modalContent', className)}
-			ref={ref}
-			tabIndex={-1}
-			{...styles.content}
-			{...rest}
-			onClick={callAll(props.onClick, onBackdropClick)}
-		/>
-	)
+  return (
+    <ModalContentBase
+      className={cs('vui-modalContent', className)}
+      ref={ref}
+      tabIndex={-1}
+      {...styles.content}
+      {...rest}
+      onClick={callAll(props.onClick, onBackdropClick)}
+    />
+  )
 })
 
-ModalContent.displayName = 'ModalContent'
-
 export default ModalContent

package/src/modal/modalManager.ts

@@ -2,31 +2,31 @@ import { Ref, useEffect } from 'react'
 
 /** State management for nested modals. */
 class ModalManager {
-	modals: any[] = []
+  modals: any[] = []
 
-	add = (modal: any) => {
-		this.modals.push(modal)
-	}
+  add = (modal: any) => {
+    this.modals.push(modal)
+  }
 
-	remove = (modal: any) => {
-		this.modals = this.modals.filter(m => m !== modal)
-	}
+  remove = (modal: any) => {
+    this.modals = this.modals.filter(m => m !== modal)
+  }
 
-	isTopModal = (modal: any) => {
-		const topmostModal = this.modals[this.modals.length - 1]
-		return topmostModal === modal
-	}
+  isTopModal = (modal: any) => {
+    const topmostModal = this.modals[this.modals.length - 1]
+    return topmostModal === modal
+  }
 }
 
 export const manager = new ModalManager()
 
 /** Refs of new modals will be automatically added/removed from the state when rendering. */
 export function useModalManager(ref: Ref<any>, isOpen?: boolean) {
-	useEffect(() => {
-		isOpen && manager.add(ref)
+  useEffect(() => {
+    isOpen && manager.add(ref)
 
-		return () => {
-			manager.remove(ref)
-		}
-	}, [isOpen, ref])
+    return () => {
+      manager.remove(ref)
+    }
+  }, [isOpen, ref])
 }

package/src/modal/theme.ts

@@ -9,9 +9,9 @@ const sizes = {}
 const variants = {}
 
 export default {
-	baseStyle,
-	defaultProps,
-	parts,
-	sizes,
-	variants
+  baseStyle,
+  defaultProps,
+  parts,
+  sizes,
+  variants
 }

package/src/notification/consts.ts

@@ -1,36 +1,36 @@
 import { NotificationStatusMapping } from './notification.types'
 
 export const notificationStatusMapping: NotificationStatusMapping = {
-	error: {
-		colorScheme: 'red',
-		iconProps: {
-			name: 'falTimesCircle'
-		}
-	},
-	info: {
-		colorScheme: 'blue',
-		iconProps: {
-			name: 'falInfoCircle'
-		}
-	},
-	loading: {
-		colorScheme: 'blue',
-		iconProps: {
-			animation: 'vui-spin 0.6s linear infinite',
-			name: 'fadSpinnerThird',
-			pathFill: ['blue.40', 'blue.60']
-		}
-	},
-	success: {
-		colorScheme: 'green',
-		iconProps: {
-			name: 'falCheckCircle'
-		}
-	},
-	warning: {
-		colorScheme: 'yellow',
-		iconProps: {
-			name: 'falExclamationCircle'
-		}
-	}
+  error: {
+    colorScheme: 'red',
+    iconProps: {
+      name: 'falTimesCircle'
+    }
+  },
+  info: {
+    colorScheme: 'blue',
+    iconProps: {
+      name: 'falInfoCircle'
+    }
+  },
+  loading: {
+    colorScheme: 'blue',
+    iconProps: {
+      animation: 'vui-spin 0.6s linear infinite',
+      name: 'fadSpinnerThird',
+      pathFill: ['blue.40', 'blue.60']
+    }
+  },
+  success: {
+    colorScheme: 'green',
+    iconProps: {
+      name: 'falCheckCircle'
+    }
+  },
+  warning: {
+    colorScheme: 'yellow',
+    iconProps: {
+      name: 'falExclamationCircle'
+    }
+  }
 }

package/src/notification/notification.tsx

@@ -16,64 +16,62 @@ import NotificationTitle from './notificationTitle'
  * Handles multiple states, like info, error or loading.
  */
 export const Notification = vui<'div', NotificationProps>((props, ref) => {
-	const {
-		action,
-		children,
-		className,
-		colorScheme: colorSchemeProp = 'blue',
-		icon,
-		onClose,
-		size,
-		status,
-		statusMapping,
-		text,
-		title,
-		variant,
-		...rest
-	} = props
-	const statuses = { ...notificationStatusMapping, ...statusMapping }
-	const { colorScheme = colorSchemeProp } = statuses[status ?? ''] ?? {}
-	const styles = useStyleConfig('Notification', { colorScheme, ...props })
+  const {
+    action,
+    children,
+    className,
+    colorScheme: colorSchemeProp = 'blue',
+    icon,
+    onClose,
+    size,
+    status,
+    statusMapping,
+    text,
+    title,
+    variant,
+    ...rest
+  } = props
+  const statuses = { ...notificationStatusMapping, ...statusMapping }
+  const { colorScheme = colorSchemeProp } = statuses[status ?? ''] ?? {}
+  const styles = useStyleConfig('Notification', { colorScheme, ...props })
 
-	const iconName = isString(icon) ? icon : statuses[status ?? '']?.iconProps?.name
+  const iconName = isString(icon) ? icon : statuses[status ?? '']?.iconProps?.name
 
-	const context = filterUndefined<NotificationProps>({ colorScheme, size, status, variant })
+  const context = filterUndefined<NotificationProps>({ colorScheme, size, status, variant })
 
-	return (
-		<NotificationProvider value={context}>
-			<Box
-				borderRadius="md"
-				className={cs('vui-notification', className)}
-				px={1.5}
-				py={1}
-				ref={ref}
-				w="fit-content"
-				{...styles.container}
-				{...rest}
-			>
-				{iconName ? <NotificationIcon name={iconName} /> : icon}
+  return (
+    <NotificationProvider value={context}>
+      <Box
+        borderRadius="md"
+        className={cs('vui-notification', className)}
+        px={1.5}
+        py={1}
+        ref={ref}
+        w="fit-content"
+        {...styles.container}
+        {...rest}
+      >
+        {iconName ? <NotificationIcon name={iconName} /> : icon}
 
-				{children ?? (
-					<NotificationText>
-						{isReactText(title) ? <NotificationTitle text={title} /> : title} {text}
-					</NotificationText>
-				)}
+        {children ?? (
+          <NotificationText>
+            {isReactText(title) ? <NotificationTitle text={title} /> : title} {text}
+          </NotificationText>
+        )}
 
-				{action}
+        {action}
 
-				{onClose && <NotificationButton icon="falTimes" onClick={onClose} />}
-			</Box>
-		</NotificationProvider>
-	)
+        {onClose && <NotificationButton icon="falTimes" onClick={onClose} />}
+      </Box>
+    </NotificationProvider>
+  )
 }) as VuiComponent<'div', NotificationProps> & {
-	Button: typeof NotificationButton
-	Icon: typeof NotificationIcon
-	Text: typeof NotificationText
-	Title: typeof NotificationTitle
+  Button: typeof NotificationButton
+  Icon: typeof NotificationIcon
+  Text: typeof NotificationText
+  Title: typeof NotificationTitle
 }
 
-Notification.displayName = 'Notification'
-
 Notification.Button = NotificationButton
 Notification.Icon = NotificationIcon
 Notification.Text = NotificationText

package/src/notification/notification.types.ts

@@ -5,31 +5,31 @@ import { IconProp, IconProps } from '../icon'
 import { ThemingProps } from '../theme'
 
 export type NotificationProps = Omit<BoxProps, 'size' | 'variant'> &
-	ThemingProps<'Notification'> & {
-		/** Socket displaying a button on the right. */
-		action?: ReactNode
-		/** Available theme colors for this component. @default blue */
-		colorScheme?: 'blue' | 'green' | 'red' | 'yellow'
-		/** Socket displaying an icon on the left. */
-		icon?: IconProp | JSX.Element
-		/** If provided, displays a close button with this function as onClick. */
-		onClose?: () => void
-		/** Modifies Notification style and content based on the given status. */
-		status?: NotificationStatus
-		/** Object definition of styles and content for each status. */
-		statusMapping?: NotificationStatusMapping
-		/** Socket displaying text in the middle. */
-		text?: ReactNode
-		/** Socket displaying title in the middle. */
-		title?: ReactNode
-	}
+  ThemingProps<'Notification'> & {
+    /** Socket displaying a button on the right. */
+    action?: ReactNode
+    /** Available theme colors for this component. @default blue */
+    colorScheme?: 'blue' | 'green' | 'red' | 'yellow'
+    /** Socket displaying an icon on the left. */
+    icon?: IconProp | JSX.Element
+    /** If provided, displays a close button with this function as onClick. */
+    onClose?: () => void
+    /** Modifies Notification style and content based on the given status. */
+    status?: NotificationStatus
+    /** Object definition of styles and content for each status. */
+    statusMapping?: NotificationStatusMapping
+    /** Socket displaying text in the middle. */
+    text?: ReactNode
+    /** Socket displaying title in the middle. */
+    title?: ReactNode
+  }
 
 export type NotificationStatus = 'error' | 'info' | 'loading' | 'success' | 'warning'
 
 export type NotificationStatusMapping = Record<
-	string,
-	{
-		colorScheme?: NotificationProps['colorScheme']
-		iconProps: IconProps
-	}
+  string,
+  {
+    colorScheme?: NotificationProps['colorScheme']
+    iconProps: IconProps
+  }
 >

package/src/notification/notificationButton.tsx

@@ -7,25 +7,23 @@ import { useNotificationContext } from './context'
 
 /** Displays an action button within the Notification. */
 export const NotificationButton = vui<'button', ButtonProps>((props, ref) => {
-	const { className, ...rest } = props
-	const mergedProps = { ...useNotificationContext(), ...props }
-	const styles = useStyleConfig('Notification', useNotificationContext())
+  const { className, ...rest } = props
+  const mergedProps = { ...useNotificationContext(), ...props }
+  const styles = useStyleConfig('Notification', useNotificationContext())
 
-	return (
-		<Button
-			className={cs('vui-notificationButton', className)}
-			colorScheme={mergedProps.colorScheme}
-			ml={1}
-			mr={-0.5}
-			ref={ref}
-			size="sm"
-			variant="text"
-			{...styles.button}
-			{...rest}
-		/>
-	)
+  return (
+    <Button
+      className={cs('vui-notificationButton', className)}
+      colorScheme={mergedProps.colorScheme}
+      ml={1}
+      mr={-0.5}
+      ref={ref}
+      size="sm"
+      variant="text"
+      {...styles.button}
+      {...rest}
+    />
+  )
 })
 
-NotificationButton.displayName = 'NotificationButton'
-
 export default NotificationButton

package/src/notification/notificationIcon.tsx

@@ -8,27 +8,25 @@ import { useNotificationContext } from './context'
 
 /** Displays an icon based on the status within the Notification. */
 export const NotificationIcon = vui<'svg', IconProps>((props, ref) => {
-	const { className, ...rest } = props
-	const mergedProps = { ...useNotificationContext(), ...props }
-	const styles = useStyleConfig('Notification', useNotificationContext())
+  const { className, ...rest } = props
+  const mergedProps = { ...useNotificationContext(), ...props }
+  const styles = useStyleConfig('Notification', useNotificationContext())
 
-	const { status = '' } = mergedProps
-	const { iconProps } = notificationStatusMapping[status] ?? {}
+  const { status = '' } = mergedProps
+  const { iconProps } = notificationStatusMapping[status] ?? {}
 
-	return (
-		<Icon
-			className={cs('vui-notificationIcon', className)}
-			mr={1}
-			my={0.5}
-			ref={ref}
-			size="md"
-			{...styles.icon}
-			{...iconProps}
-			{...rest}
-		/>
-	)
+  return (
+    <Icon
+      className={cs('vui-notificationIcon', className)}
+      mr={1}
+      my={0.5}
+      ref={ref}
+      size="md"
+      {...styles.icon}
+      {...iconProps}
+      {...rest}
+    />
+  )
 })
 
-NotificationIcon.displayName = 'NotificationIcon'
-
 export default NotificationIcon

package/src/notification/notificationText.tsx

@@ -7,23 +7,21 @@ import { useNotificationContext } from './context'
 
 /** Displays text within the Notification. */
 export const NotificationText = vui<'p', TProps>((props, ref) => {
-	const { className, ...rest } = props
-	const styles = useStyleConfig('Notification', useNotificationContext())
+  const { className, ...rest } = props
+  const styles = useStyleConfig('Notification', useNotificationContext())
 
-	return (
-		<T
-			className={cs('vui-notificationText', className)}
-			flex="1"
-			lineHeight="24px"
-			minW={0}
-			py={0.5}
-			ref={ref}
-			{...styles.text}
-			{...rest}
-		/>
-	)
+  return (
+    <T
+      className={cs('vui-notificationText', className)}
+      flex="1"
+      lineHeight="24px"
+      minW={0}
+      py={0.5}
+      ref={ref}
+      {...styles.text}
+      {...rest}
+    />
+  )
 })
 
-NotificationText.displayName = 'NotificationText'
-
 export default NotificationText

package/src/notification/notificationTitle.tsx

@@ -7,20 +7,18 @@ import { useNotificationContext } from './context'
 
 /** Displays a title within the Notification. */
 export const NotificationTitle = vui<'h6', HeadingProps>((props, ref) => {
-	const { className, ...rest } = props
-	const styles = useStyleConfig('Notification', useNotificationContext())
+  const { className, ...rest } = props
+  const styles = useStyleConfig('Notification', useNotificationContext())
 
-	return (
-		<H6
-			className={cs('vui-notificationTitle', className)}
-			display="inline-flex"
-			ref={ref}
-			{...styles.title}
-			{...rest}
-		/>
-	)
+  return (
+    <H6
+      className={cs('vui-notificationTitle', className)}
+      display="inline-flex"
+      ref={ref}
+      {...styles.title}
+      {...rest}
+    />
+  )
 })
 
-NotificationTitle.displayName = 'NotificationTitle'
-
 export default NotificationTitle

package/src/notification/theme.ts

@@ -1,39 +1,39 @@
 import { Dict } from '../utils'
 
 function variantSubtle(props: Dict) {
-	const { colorScheme: c } = props
-
-	const container = {
-		bg: `${c}.20`,
-		borderColor: `${c}.80`,
-		borderWidth: 1,
-		color: `${c}.90`
-	}
-
-	const button = {
-		color: `${c}.90`,
-		hoverBg: `${c}.30`,
-		activeBg: `${c}.40`
-	}
-
-	if (c === 'blue') {
-		container.color = 'blue.80'
-		button.color = 'blue.80'
-	}
-
-	if (c === 'yellow') {
-		container.color = 'yellow.100'
-		button.color = 'yellow.100'
-	}
-
-	return { container, button }
+  const { colorScheme: c } = props
+
+  const container = {
+    bg: `${c}.20`,
+    borderColor: `${c}.80`,
+    borderWidth: 1,
+    color: `${c}.90`
+  }
+
+  const button = {
+    color: `${c}.90`,
+    hoverBg: `${c}.30`,
+    activeBg: `${c}.40`
+  }
+
+  if (c === 'blue') {
+    container.color = 'blue.80'
+    button.color = 'blue.80'
+  }
+
+  if (c === 'yellow') {
+    container.color = 'yellow.100'
+    button.color = 'yellow.100'
+  }
+
+  return { container, button }
 }
 
 const baseStyle = {}
 
 const defaultProps = {
-	colorScheme: 'blue',
-	variant: 'subtle'
+  colorScheme: 'blue',
+  variant: 'subtle'
 }
 
 const parts = ['container', 'button', 'icon', 'text', 'title']
@@ -41,13 +41,13 @@ const parts = ['container', 'button', 'icon', 'text', 'title']
 const sizes = {}
 
 const variants = {
-	subtle: variantSubtle
+  subtle: variantSubtle
 }
 
 export default {
-	baseStyle,
-	defaultProps,
-	parts,
-	sizes,
-	variants
+  baseStyle,
+  defaultProps,
+  parts,
+  sizes,
+  variants
 }

package/src/p/p.tsx

@@ -5,28 +5,26 @@ import { cs, filterUndefined } from '../utils'
 import { PProps } from './p.types'
 
 export const PBase = styled.pBox`
-	transition-duration: fast;
+  transition-duration: fast;
 `
 
 /** Displays a paragraph of text. */
 export const P = vui<'p', PProps>((props, ref) => {
-	const { align, casing, children, className, decoration, text, weight, ...rest } = omitThemingProps(props)
-	const styles = useStyleConfig('P', props)
+  const { align, casing, children, className, decoration, text, weight, ...rest } = omitThemingProps(props)
+  const styles = useStyleConfig('P', props)
 
-	const aliasedProps = filterUndefined({
-		fontWeight: weight,
-		textAlign: align,
-		textDecoration: decoration,
-		textTransform: casing
-	})
+  const aliasedProps = filterUndefined({
+    fontWeight: weight,
+    textAlign: align,
+    textDecoration: decoration,
+    textTransform: casing
+  })
 
-	return (
-		<PBase className={cs('vui-p', className)} ref={ref} {...styles} {...aliasedProps} {...rest}>
-			{children ?? text}
-		</PBase>
-	)
+  return (
+    <PBase className={cs('vui-p', className)} ref={ref} {...styles} {...aliasedProps} {...rest}>
+      {children ?? text}
+    </PBase>
+  )
 })
 
-P.displayName = 'P'
-
 export default P