@veracity/vui 1.0.0 → 1.1.0

package/src/theme/foundations/transformers.ts

@@ -1,16 +1,16 @@
 import { getColor } from '@xstyled/system'
 
 export default {
-	border: (value: number | string, { props }: any) => {
-		if (typeof value === 'number') return `${value}px solid`
+  border: (value: number | string, { props }: any) => {
+    if (typeof value === 'number') return `${value}px solid`
 
-		const values = value.split(' ')
-		const [width, style = '', color] = values
-		const colorValue = getColor(color)(props) ?? ''
+    const values = value.split(' ')
+    const [width, style = '', color] = values
+    const colorValue = getColor(color)(props) ?? ''
 
-		return `${width} ${style} ${colorValue}`
-	},
-	space: (value: string | number) => {
-		return typeof value === 'string' ? value : `${value * 8}px`
-	}
+    return `${width} ${style} ${colorValue}`
+  },
+  space: (value: string | number) => {
+    return typeof value === 'string' ? value : `${value * 8}px`
+  }
 }

package/src/theme/foundations/zIndices.ts

@@ -1,6 +1,6 @@
 export default {
-	drawer: 1300,
-	modal: 1400,
-	toast: 1500,
-	tooltip: 1600
+  drawer: 1300,
+  modal: 1400,
+  toast: 1500,
+  tooltip: 1600
 }

package/src/theme/types.ts

@@ -26,10 +26,10 @@ export interface VuiThemeExtensions {}
 
 /** Defines variant and size types of each component connected to the theme. */
 export type ThemingProps<ThemeComponent extends string = string> = {
-	variant?: ThemeComponent extends Component ? keyof VuiTheme['components'][ThemeComponent]['variants'] : string
-	size?: ThemeComponent extends keyof VuiTheme['components']
-		? keyof VuiTheme['components'][ThemeComponent]['sizes']
-		: string
+  variant?: ThemeComponent extends Component ? keyof VuiTheme['components'][ThemeComponent]['variants'] : string
+  size?: ThemeComponent extends keyof VuiTheme['components']
+    ? keyof VuiTheme['components'][ThemeComponent]['sizes']
+    : string
 }
 
 // Using intersection instead of 'extends' to allow different, deeply-nested objects

package/src/theme/vui.d.ts

@@ -3,5 +3,5 @@ import { VuiTheme } from './types'
 import 'styled-components'
 
 declare module 'styled-components' {
-	export interface DefaultTheme extends VuiTheme {}
+  export interface DefaultTheme extends VuiTheme {}
 }

package/src/toast/Toast.tsx

@@ -1,85 +1,87 @@
 import React, { ReactNode } from 'react'
 import ReactDOM from 'react-dom'
 
-import { styled, VuiProvider } from '../core'
+import { Box } from '../box'
+import { VuiProvider } from '../core'
 import { Notification, NotificationStatus } from '../notification'
+import { zIndices } from '../theme'
 import { addContainer, uid } from '../utils'
 import { ToastOptions, ToastSetup } from './toast.types'
 
 const wrapperId = 'toastsWrapper'
 
 const setup: ToastSetup = {
-	options: {
-		duration: 5000,
-		dismissible: true
-	},
-	componentList: []
+  options: {
+    duration: 5000,
+    dismissible: true
+  },
+  componentList: []
 }
 
-const ToastsContainer = styled.divBox`
-	position: fixed;
-	right: 2rem;
-	bottom: 2rem;
-	z-index: 10000;
-	min-width: 600px;
-	max-width: 100%;
-`
-
 const render = (): void =>
-	// eslint-disable-next-line react/no-render-return-value
-	ReactDOM.render(
-		<VuiProvider>
-			<ToastsContainer>
-				{setup.componentList.map(item => (
-					<div key={item.id}>{item.component}</div>
-				))}
-			</ToastsContainer>
-		</VuiProvider>,
-		document.getElementById(wrapperId)
-	)
+  // eslint-disable-next-line react/no-render-return-value
+  ReactDOM.render(
+    <VuiProvider>
+      <Box
+        bottom="1rem"
+        display="block"
+        maxW="100%"
+        minW={{ md: 600, sm: 600, xs: '100%' }}
+        p={{ md: '16px', sm: '4px', xs: '2px' }}
+        position="fixed"
+        right={{ md: '1rem', sm: 0, xs: 0 }}
+        zIndex={zIndices.toast}
+      >
+        {setup.componentList.map(item => (
+          <div key={item.id}>{item.component}</div>
+        ))}
+      </Box>
+    </VuiProvider>,
+    document.getElementById(wrapperId)
+  )
 
 const hide = (id: string): void => {
-	setup.componentList = setup.componentList.filter(i => i.id !== id)
-	render()
+  setup.componentList = setup.componentList.filter(i => i.id !== id)
+  render()
 }
 
 const show = (options?: ToastOptions): void => {
-	const id = options?.id ? options.id : uid('toast')
+  const id = options?.id ? options.id : uid('toast')
 
-	const { duration = setup.options.duration } = options || {}
-	const { dismissible = setup.options.dismissible } = options || {}
-	const { status = setup.options.duration } = options || {}
-	const { action } = options || {}
-	const { icon } = options || {}
-	const { text } = options || {}
-	const { title } = options || {}
+  const { duration = setup.options.duration } = options || {}
+  const { dismissible = setup.options.dismissible } = options || {}
+  const { status = setup.options.duration } = options || {}
+  const { action } = options || {}
+  const { icon } = options || {}
+  const { text } = options || {}
+  const { title } = options || {}
 
-	addContainer(wrapperId)
+  addContainer(wrapperId)
 
-	render()
+  render()
 
-	const onClose = () => hide(id)
+  const onClose = () => hide(id)
 
-	setup.componentList.unshift({
-		id,
-		component: (
-			<Notification
-				action={action}
-				animation="fadeDown"
-				icon={icon}
-				mt={1}
-				onClose={dismissible ? onClose : undefined}
-				shadow={1}
-				status={status as NotificationStatus}
-				text={text}
-				title={title}
-				w={1}
-			/>
-		)
-	})
-	render()
+  setup.componentList.unshift({
+    id,
+    component: (
+      <Notification
+        action={action}
+        animation="fadeDown"
+        icon={icon}
+        mt={{ md: 1, sm: '4px', xs: '4px' }}
+        onClose={dismissible ? onClose : undefined}
+        shadow={1}
+        status={status as NotificationStatus}
+        text={text}
+        title={title}
+        w={1}
+      />
+    )
+  })
+  render()
 
-	if (duration !== 0) window.setTimeout(() => hide(id), duration)
+  if (duration !== 0) window.setTimeout(() => hide(id), duration)
 }
 
 const showInfo = (text: ReactNode) => show({ text, status: 'info' })

package/src/toast/toast.types.ts

@@ -3,17 +3,17 @@ import { ReactNode } from 'react'
 import { NotificationProps } from '../notification'
 
 export interface ToastListItem {
-	id: string
-	component: ReactNode
+  id: string
+  component: ReactNode
 }
 
 export interface ToastSetup {
-	options: ToastOptions
-	componentList: ToastListItem[]
+  options: ToastOptions
+  componentList: ToastListItem[]
 }
 
 export interface ToastOptions extends NotificationProps {
-	id?: string
-	duration?: number
-	dismissible?: boolean
+  id?: string
+  duration?: number
+  dismissible?: boolean
 }

package/src/tooltip/index.ts

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

package/src/tooltip/tooltip.setup.ts

@@ -0,0 +1,41 @@
+export const animation = {
+  top: 'fadeDown',
+  right: 'fadeLeft',
+  bottom: 'fadeUp',
+  left: 'fadeRight'
+}
+
+export const pointerSize = 8
+
+export const color = 'prussian.80'
+
+export const pointerPlacement = {
+  top: {
+    top: 'auto',
+    bottom: `-${pointerSize / 2}px`,
+    left: '50%',
+    right: 'auto',
+    translate: '-50%, 0'
+  },
+  bottom: {
+    top: `-${pointerSize / 2}px`,
+    bottom: 'auto',
+    left: '50%',
+    right: 'auto',
+    translate: '-50%, 0'
+  },
+  left: {
+    top: `50%`,
+    bottom: 'auto',
+    left: 'auto',
+    right: '0',
+    translate: '-50%, -50%'
+  },
+  right: {
+    top: `50%`,
+    bottom: 'auto',
+    left: `${pointerSize / 2}px`,
+    right: 'auto',
+    translate: '0, -50%'
+  }
+}

package/src/tooltip/tooltip.tsx

@@ -0,0 +1,50 @@
+import React from 'react'
+
+import Box from '../box'
+import Popover from '../popover'
+import { animation, color, pointerPlacement, pointerSize } from './tooltip.setup'
+import { TooltipProps } from './tooltip.types'
+
+/**
+ * A simple text popup hint.
+ *
+ * Displayed on mouse enter, and is hidden on mouse leave.
+ *
+ * */
+export const Tooltip = (props: TooltipProps) => {
+  const { children, text = 'demo', placement = 'top', isAnimated = false } = props
+
+  return (
+    <Popover placement={placement} trigger="mouseenter">
+      <Popover.Trigger as={Box} display="inline-block">
+        <Box display="inline-block">{children}</Box>
+      </Popover.Trigger>
+      <Popover.Content
+        animation={isAnimated ? animation[placement] : undefined}
+        bg={color}
+        color="white"
+        m={1}
+        p={1}
+        pl={2}
+        pr={2}
+      >
+        {!isAnimated && (
+          <Box
+            bg={color}
+            bottom={pointerPlacement[placement].bottom}
+            h={`${pointerSize}px`}
+            left={pointerPlacement[placement].left}
+            position="absolute"
+            right={pointerPlacement[placement].right}
+            top={pointerPlacement[placement].top}
+            transform={`translate(${pointerPlacement[placement].translate}) rotate(45deg)`}
+            w={`${pointerSize}px`}
+          />
+        )}
+        {text}
+      </Popover.Content>
+    </Popover>
+  )
+}
+
+export default Tooltip

package/src/tooltip/tooltip.types.ts

@@ -0,0 +1,11 @@
+import { ReactNode } from 'react'
+
+export type TooltipProps = {
+  /** Displays given text at the tooltip. */
+  text?: string
+  /** Tooltip position. */
+  placement?: 'top' | 'left' | 'bottom' | 'right'
+  /** Displays the tooltip with animation, without the arrow pointer. */
+  isAnimated?: boolean
+  children?: ReactNode
+}

package/src/utils/array.ts

@@ -3,23 +3,23 @@ import { Sort } from './types'
 // TODO: Add it from UI-Utils
 /** Comparator for Array.sort when sorting arrays of objects by given key with optional order. */
 export function compareBy<T extends object, K extends keyof T>(key: K, order: Sort['order'] = 'asc') {
-	const ord = order === 'asc' ? 1 : -1
+  const ord = order === 'asc' ? 1 : -1
 
-	return (item1: T, item2: T) => {
-		const a = item1[key]
-		const b = item2[key]
+  return (item1: T, item2: T) => {
+    const a = item1[key]
+    const b = item2[key]
 
-		if (typeof a === 'string' && typeof b === 'string') {
-			return a.localeCompare(b) * ord
-		} else if (typeof a === 'number' && typeof b === 'number') {
-			return a > b ? ord : a < b ? -ord : 0
-		}
-		return 0
-	}
+    if (typeof a === 'string' && typeof b === 'string') {
+      return a.localeCompare(b) * ord
+    } else if (typeof a === 'number' && typeof b === 'number') {
+      return a > b ? ord : a < b ? -ord : 0
+    }
+    return 0
+  }
 }
 
 // TODO: Add it from UI-Utils
 /** Adds given item to the array if it wasn't there yet, or removes it otherwise. */
 export function toggleItem<T>(array: T[], item: T): T[] {
-	return array.includes(item) ? array.filter(it => it !== item) : [...array, item]
+  return array.includes(item) ? array.filter(it => it !== item) : [...array, item]
 }

package/src/utils/assertion.ts

@@ -4,35 +4,35 @@ import { Dict } from './types'
 
 /** Is value an array. */
 export function isArray<T>(value: any): value is T[] {
-	return Array.isArray(value)
+  return Array.isArray(value)
 }
 
 /** Is value a function. */
 export function isFunction<T extends Function = Function>(value: any): value is T {
-	return typeof value === 'function'
+  return typeof value === 'function'
 }
 
 /** Is value JSX / React Element */
 export function isJsx<T = JSX.Element>(value: any): value is T {
-	return React.isValidElement(value)
+  return React.isValidElement(value)
 }
 
 /** Is value a number. */
 export function isNumber(value: any): value is number {
-	return typeof value === 'number'
+  return typeof value === 'number'
 }
 
 /** Is value a regular object (functions, arrays and React elements excluded). */
 export function isObject<T = Dict>(value: any): value is T {
-	return !!value && typeof value === 'object' && !isFunction(value) && !isArray(value) && !React.isValidElement(value)
+  return !!value && typeof value === 'object' && !isFunction(value) && !isArray(value) && !React.isValidElement(value)
 }
 
 /** Is value a valid ReactText - string or number. */
 export function isReactText(value: any): value is React.ReactText {
-	return isNumber(value) || isString(value)
+  return isNumber(value) || isString(value)
 }
 
 /** Is value a string. */
 export function isString(value: any): value is string {
-	return Object.prototype.toString.call(value) === '[object String]'
+  return Object.prototype.toString.call(value) === '[object String]'
 }

package/src/utils/dom.ts

@@ -1,29 +1,29 @@
 export const addElement = (id: string): HTMLElement => {
-	const element = document.createElement('div')
-	element.setAttribute('id', id)
-	return element
+  const element = document.createElement('div')
+  element.setAttribute('id', id)
+  return element
 }
 
 export const removeElement = (id: string): void => {
-	const element = document.getElementById(id)
-	if (element) element.remove()
+  const element = document.getElementById(id)
+  if (element) element.remove()
 }
 
 export const addElementClass = (id: string, className: string): void => {
-	const element = document.getElementById(id)
-	if (element) element.classList.add(className)
+  const element = document.getElementById(id)
+  if (element) element.classList.add(className)
 }
 
 export const removeElementClass = (id: string, className: string): void => {
-	const element = document.getElementById(id)
-	if (element) element.classList.remove(className)
+  const element = document.getElementById(id)
+  if (element) element.classList.remove(className)
 }
 
 export const appendToBody = (rootElem: HTMLElement) => {
-	document.body.appendChild(rootElem)
+  document.body.appendChild(rootElem)
 }
 
 export const addContainer = (id: string): void => {
-	const toastContainer = document.getElementById(id)
-	if (!toastContainer) appendToBody(addElement(id))
+  const toastContainer = document.getElementById(id)
+  if (!toastContainer) appendToBody(addElement(id))
 }

package/src/utils/function.ts

@@ -3,7 +3,7 @@ import { AnyFunction } from './types'
 
 /** Calls each provided function with the same set of arguments. Useful for merging multiple callbacks. */
 export function callAll(...fns: (AnyFunction | undefined)[]) {
-	return (...args: any[]) => fns.forEach(fn => typeof fn === 'function' && fn(...args))
+  return (...args: any[]) => fns.forEach(fn => typeof fn === 'function' && fn(...args))
 }
 
 // Used as a safe default to be called when no function is provided.
@@ -14,5 +14,5 @@ export function noop() {}
  * Otherwise, the provided value is returned directly.
  */
 export function runIfFn<T, U>(valueOrFn: T | ((...fnArgs: U[]) => T), ...args: U[]): T {
-	return isFunction(valueOrFn) ? valueOrFn(...args) : valueOrFn
+  return isFunction(valueOrFn) ? valueOrFn(...args) : valueOrFn
 }

package/src/utils/number.ts

@@ -1,4 +1,4 @@
 /** Returns a random integer within the provided range. Default: 0 - 1000000 */
 export function random(start = 0, end = 1000000) {
-	return Math.floor(Math.random() * end) + start
+  return Math.floor(Math.random() * end) + start
 }

package/src/utils/object.ts

@@ -3,7 +3,7 @@ import { Dict } from './types'
 
 /** Removes keys from an object if their value is undefined. */
 export function filterUndefined<T = Dict>(object: T) {
-	return objectFilter(object, val => val !== null && val !== undefined)
+  return objectFilter(object, val => val !== null && val !== undefined)
 }
 
 /**
@@ -16,52 +16,52 @@ export function merge<S1 extends Dict>(s1: S1): S1
 export function merge<S1 extends Dict, S2 extends Dict>(s1: S1, s2: S2): S1 & S2
 export function merge<S1 extends Dict, S2 extends Dict, S3 extends Dict>(s1: S1, s2: S2, s3: S3): S1 & S2 & S3
 export function merge<S1 extends Dict, S2 extends Dict, S3 extends Dict, S4 extends Dict>(
-	s1: S1,
-	s2: S2,
-	s3: S3,
-	s4: S4
+  s1: S1,
+  s2: S2,
+  s3: S3,
+  s4: S4
 ): S1 & S2 & S3 & S4
 export function merge(...sources: any[]): any {
-	const target = {} as Dict
+  const target = {} as Dict
 
-	sources.forEach(source => {
-		if (!isObject(source)) return
+  sources.forEach(source => {
+    if (!isObject(source)) return
 
-		Object.keys(source).forEach(key => {
-			if (key === '__proto__') return
+    Object.keys(source).forEach(key => {
+      if (key === '__proto__') return
 
-			if (isObject(target[key]) && isObject(source[key])) {
-				// Merge objects
-				target[key] = merge(target[key], source[key])
-			} else if (isArray(target[key]) && isArray(source[key])) {
-				// Concat arrays
-				target[key] = target[key].concat(source[key])
-			} else if (source[key] !== undefined) {
-				// Pick source if it exists
-				target[key] = source[key]
-			}
-		})
-	})
+      if (isObject(target[key]) && isObject(source[key])) {
+        // Merge objects
+        target[key] = merge(target[key], source[key])
+      } else if (isArray(target[key]) && isArray(source[key])) {
+        // Concat arrays
+        target[key] = target[key].concat(source[key])
+      } else if (source[key] !== undefined) {
+        // Pick source if it exists
+        target[key] = source[key]
+      }
+    })
+  })
 
-	return target
+  return target
 }
 
 /**
  * Returns the items of an object that meet the condition specified in a callback function.
  */
 export function objectFilter<T extends Dict, K extends keyof T>(
-	object: T,
-	fn: (value: any, key: string, object: T) => boolean
+  object: T,
+  fn: (value: any, key: string, object: T) => boolean
 ) {
-	const result: Partial<T> = {}
+  const result: Partial<T> = {}
 
-	Object.keys(object).forEach(key => {
-		const value = object[key]
-		const shouldPass = fn(value, key, object)
-		if (shouldPass) {
-			result[key as K] = value
-		}
-	})
+  Object.keys(object).forEach(key => {
+    const value = object[key]
+    const shouldPass = fn(value, key, object)
+    if (shouldPass) {
+      result[key as K] = value
+    }
+  })
 
-	return result
+  return result
 }