@veracity/vui 1.0.0 → 1.1.0

package/src/utils/react.ts

@@ -1,14 +1,14 @@
 /* eslint-disable @typescript-eslint/ban-ts-comment */
 
 import React, {
-	DependencyList,
-	Dispatch,
-	RefObject,
-	SetStateAction,
-	useCallback,
-	useEffect,
-	useRef,
-	useState
+  DependencyList,
+  Dispatch,
+  RefObject,
+  SetStateAction,
+  useCallback,
+  useEffect,
+  useRef,
+  useState
 } from 'react'
 
 import { isArray, isFunction } from './assertion'
@@ -22,59 +22,59 @@ type ReactRef<T> = React.Ref<T> | React.RefObject<T> | React.MutableRefObject<T>
  * Supports ref as function (e.g. useState) and classic ref (e.g. useRef).
  */
 export function assignRef<T = any>(ref: ReactRef<T> | undefined, value: T) {
-	if (ref === null || ref === undefined) return
-
-	if (isFunction(ref)) {
-		ref(value)
-		return
-	}
-
-	try {
-		// @ts-ignore - TS complains about 'current' being read-only
-		ref.current = value
-	} catch (error) {
-		throw new Error(`Cannot assign value '${value}' to ref '${ref}'`)
-	}
+  if (ref === null || ref === undefined) return
+
+  if (isFunction(ref)) {
+    ref(value)
+    return
+  }
+
+  try {
+    // @ts-ignore - TS complains about 'current' being read-only
+    ref.current = value
+  } catch (error) {
+    throw new Error(`Cannot assign value '${value}' to ref '${ref}'`)
+  }
 }
 
 /** Generic function to create new Context and context access hook. */
 export function createContext<ContextType>(options: CreateContextOptions = {}) {
-	const {
-		errorMessage = 'Context can only be accessed by components wrapped with the Provider.',
-		isOptional,
-		name
-	} = options
+  const {
+    errorMessage = 'Context can only be accessed by components wrapped with the Provider.',
+    isOptional,
+    name
+  } = options
 
-	const Context = React.createContext<ContextType | undefined>(undefined)
+  const Context = React.createContext<ContextType | undefined>(undefined)
 
-	Context.displayName = name
+  Context.displayName = name
 
-	function useContext() {
-		const context = React.useContext(Context)
+  function useContext() {
+    const context = React.useContext(Context)
 
-		if (!isOptional && context === undefined) throw new Error(errorMessage)
+    if (!isOptional && context === undefined) throw new Error(errorMessage)
 
-		return context
-	}
+    return context
+  }
 
-	return [Context.Provider, useContext] as CreateContextReturn<ContextType>
+  return [Context.Provider, useContext] as CreateContextReturn<ContextType>
 }
 
 /** Assigns a node to all provided refs. */
 export function mergeRefs<T>(...refs: (ReactRef<T> | undefined)[]) {
-	return (node: T | null) => {
-		refs.forEach(ref => assignRef(ref, node))
-	}
+  return (node: T | null) => {
+    refs.forEach(ref => assignRef(ref, node))
+  }
 }
 
 // TODO: Bring it from UI-Utils
 /** Returns given callback with a stable reference, but keeps it updated internally. */
 export function useCallbackRef<T extends AnyFunction>(callback?: T, deps: DependencyList = []) {
-	const ref = useRef(callback)
+  const ref = useRef(callback)
 
-	ref.current = callback
+  ref.current = callback
 
-	return useCallback(((...args) => ref.current?.(...args)) as T, deps)
+  return useCallback(((...args) => ref.current?.(...args)) as T, deps)
 }
 
 const defaultEvents = ['mousedown', 'touchstart']
@@ -88,69 +88,69 @@ const defaultEvents = ['mousedown', 'touchstart']
  * @param events - array of events listened for (default: ['mousedown', 'touchstart'])
  */
 export function useClickOutside(
-	ref: RefObject<HTMLElement | null> | RefObject<HTMLElement | null>[],
-	callback?: (event: Event) => void,
-	events: string[] = defaultEvents
+  ref: RefObject<HTMLElement | null> | RefObject<HTMLElement | null>[],
+  callback?: (event: Event) => void,
+  events: string[] = defaultEvents
 ) {
-	const eventsString = JSON.stringify(events)
-	const listener = useCallbackRef((ev: Event) => {
-		const refs = isArray(ref) ? ref : [ref]
-		const target = ev.target as HTMLElement
-		const isClickOutside = refs.every(ref => ref.current && !ref.current.contains(target))
+  const eventsString = JSON.stringify(events)
+  const listener = useCallbackRef((ev: Event) => {
+    const refs = isArray(ref) ? ref : [ref]
+    const target = ev.target as HTMLElement
+    const isClickOutside = refs.every(ref => ref.current && !ref.current.contains(target))
 
-		isClickOutside && callback?.(ev)
-	})
+    isClickOutside && callback?.(ev)
+  })
 
-	useEffect(() => {
-		const events: string[] = JSON.parse(eventsString)
+  useEffect(() => {
+    const events: string[] = JSON.parse(eventsString)
 
-		events.forEach(event => window.addEventListener(event, listener))
+    events.forEach(event => window.addEventListener(event, listener))
 
-		return () => {
-			events.forEach(event => window.removeEventListener(event, listener))
-		}
-	}, [eventsString, ref])
+    return () => {
+      events.forEach(event => window.removeEventListener(event, listener))
+    }
+  }, [eventsString, ref])
 }
 
 export type UseControlledProps<T> = {
-	defaultValue?: T
-	onChange?: (value: T) => void
-	value?: T
+  defaultValue?: T
+  onChange?: (value: T) => void
+  value?: T
 }
 
 // TODO: Move to ui-utils
 /** Supports state management in components that can be controlled or uncontrolled. */
 export function useControlled<T>(props: UseControlledProps<T>) {
-	const { defaultValue, onChange: onChangeProp, value: valueProp } = props
-	const [valueState, setValue] = useState(defaultValue)
+  const { defaultValue, onChange: onChangeProp, value: valueProp } = props
+  const [valueState, setValue] = useState(defaultValue)
 
-	const isControlled = valueProp !== undefined
-	const value = isControlled ? valueProp : valueState
+  const isControlled = valueProp !== undefined
+  const value = isControlled ? valueProp : valueState
 
-	/** Triggers the external callback with the new value. In uncontrolled mode, updates state. */
-	const onChange = useCallbackRef((next: SetStateAction<T>) => {
-		const newValue = runIfFn(next)
+  /** Triggers the external callback with the new value. In uncontrolled mode, updates state. */
+  const onChange = useCallbackRef((next: SetStateAction<T>) => {
+    const newValue = runIfFn(next)
 
-		if (!isControlled) setValue(newValue)
+    if (!isControlled) setValue(newValue)
 
-		onChangeProp?.(newValue)
-	})
+    onChangeProp?.(newValue)
+  })
 
-	/** In uncontrolled mode, sets the state to the default value. */
-	const reset = useCallbackRef(() => {
-		!isControlled && defaultValue && onChange(defaultValue)
-	})
+  /** In uncontrolled mode, sets the state to the default value. */
+  const reset = useCallbackRef(() => {
+    !isControlled && defaultValue && onChange(defaultValue)
+  })
 
-	return [value, onChange, { isControlled, reset }] as [
-		T,
-		Dispatch<SetStateAction<T>>,
-		{ isControlled: boolean; reset: () => void }
-	]
+  return [value, onChange, { isControlled, reset }] as [
+    T,
+    Dispatch<SetStateAction<T>>,
+    { isControlled: boolean; reset: () => void }
+  ]
 }
 
 /** Returns an array with each prefix added to the id. Useful for aria attributes in compound components. */
 export function useIds(id: string, prefixes: string[]) {
-	return prefixes.map(prefix => `${prefix}-${id}`)
+  return prefixes.map(prefix => `${prefix}-${id}`)
 }
 
 // TODO: Bring it from ui-utils
@@ -158,15 +158,15 @@ export function useIds(id: string, prefixes: string[]) {
  * Provides a function, which can be called to check if component using the hook is mounted or unmounted.
  */
 export function useIsMounted() {
-	const isMounted = useRef(false)
+  const isMounted = useRef(false)
 
-	useEffect(() => {
-		isMounted.current = true
+  useEffect(() => {
+    isMounted.current = true
 
-		return () => {
-			isMounted.current = false
-		}
-	}, [])
+    return () => {
+      isMounted.current = false
+    }
+  }, [])
 
-	return useCallback(() => isMounted.current, [])
+  return useCallback(() => isMounted.current, [])
 }

package/src/utils/styles.ts

@@ -1,30 +1,30 @@
 /** Concatenates individual className arguments and returns a single string. */
 export function cs(...classNames: any[]) {
-	return classNames.filter(Boolean).join(' ')
+  return classNames.filter(Boolean).join(' ')
 }
 
 /** Converts hex color value to rgb with optional alpha property. */
 export function hexToRGBA(hex: string, alpha?: number) {
-	let hexStr = hex
+  let hexStr = hex
 
-	if (hexStr.charAt(0) === '#') {
-		hexStr = hexStr.slice(1)
-	}
+  if (hexStr.charAt(0) === '#') {
+    hexStr = hexStr.slice(1)
+  }
 
-	if (hexStr.length < 4) {
-		hexStr = hexStr
-			.split('')
-			.map(char => char + char)
-			.join('')
-	}
+  if (hexStr.length < 4) {
+    hexStr = hexStr
+      .split('')
+      .map(char => char + char)
+      .join('')
+  }
 
-	const r = parseInt(hexStr.slice(0, 2), 16)
-	const g = parseInt(hexStr.slice(2, 4), 16)
-	const b = parseInt(hexStr.slice(4, 6), 16)
+  const r = parseInt(hexStr.slice(0, 2), 16)
+  const g = parseInt(hexStr.slice(2, 4), 16)
+  const b = parseInt(hexStr.slice(4, 6), 16)
 
-	if (alpha !== undefined) {
-		return `rgba(${r}, ${g}, ${b}, ${alpha})`
-	} else {
-		return `rgb(${r}, ${g}, ${b})`
-	}
+  if (alpha !== undefined) {
+    return `rgba(${r}, ${g}, ${b}, ${alpha})`
+  } else {
+    return `rgb(${r}, ${g}, ${b})`
+  }
 }

package/src/utils/types.ts

@@ -16,12 +16,12 @@ export type ChangeEvent<T = HTMLInputElement> = React.ChangeEvent<T>
 export type ChangeEventHandler<T = HTMLInputElement> = React.ChangeEventHandler<T>
 
 export type CreateContextOptions = {
-	/** Message displayed when context is used outside of the provider */
-	errorMessage?: string
-	/** Accessing context outside of provider won't throw error */
-	isOptional?: boolean
-	/** Name of the context */
-	name?: string
+  /** Message displayed when context is used outside of the provider */
+  errorMessage?: string
+  /** Accessing context outside of provider won't throw error */
+  isOptional?: boolean
+  /** Name of the context */
+  name?: string
 }
 
 /** Return value of the createContext function. */
@@ -64,6 +64,6 @@ export type RenderProps<P> = React.ReactNode | ((props: P) => React.ReactNode)
 export type RightJoinProps<SourceProps, OverrideProps> = Omit<SourceProps, keyof OverrideProps> & OverrideProps
 
 export type Sort<T = string> = {
-	key: T
-	order: 'asc' | 'desc'
+  key: T
+  order: 'asc' | 'desc'
 }

package/src/utils/uid.ts

@@ -1,2 +1,2 @@
 export const uid = (prefix?: string) =>
-	`${prefix ? `${prefix}_` : ''}${Date.now().toString(36) + Math.random().toString(36).substr(2)}`
+  `${prefix ? `${prefix}_` : ''}${Date.now().toString(36) + Math.random().toString(36).substr(2)}`

package/dist/cjs/switch/switch.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"switch.d.ts","sourceRoot":"","sources":["../../../src/switch/switch.tsx"],"names":[],"mappings":"AAEA,OAAO,EAA+B,YAAY,EAAE,MAAM,SAAS,CAAA;AAGnE,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAA;AAC5C,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAA;AAC7C,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAA;AAE3C,eAAO,MAAM,UAAU,iIActB,CAAA;AAED;;;GAGG;AACH,eAAO,MAAM,MAAM;YA+DV,mBAAmB;WACpB,kBAAkB;CACzB,CAAA;AAOD,eAAe,MAAM,CAAA"}

package/dist/esm/switch/switch.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"switch.d.ts","sourceRoot":"","sources":["../../../src/switch/switch.tsx"],"names":[],"mappings":"AAEA,OAAO,EAA+B,YAAY,EAAE,MAAM,SAAS,CAAA;AAGnE,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAA;AAC5C,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAA;AAC7C,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAA;AAE3C,eAAO,MAAM,UAAU,iIActB,CAAA;AAED;;;GAGG;AACH,eAAO,MAAM,MAAM;YA+DV,mBAAmB;WACpB,kBAAkB;CACzB,CAAA;AAOD,eAAe,MAAM,CAAA"}

package/src/switch/switch.tsx

@@ -1,102 +0,0 @@
-import React, { useMemo } from 'react'
-
-import { styled, useStyleConfig, vui, VuiComponent } from '../core'
-import { cs, filterUndefined, isReactText } from '../utils'
-import { SwitchProvider } from './context'
-import { SwitchProps } from './switch.types'
-import { SwitchButton } from './switchButton'
-import { SwitchLabel } from './switchLabel'
-
-export const SwitchBase = styled.labelBox`
-	align-items: center;
-	cursor: pointer;
-	display: inline-flex;
-	line-height: normal;
-	width: fit-content;
-
-	&[aria-disabled='true'] {
-		cursor: not-allowed;
-
-		.vui-switchLabel {
-			color: disabled.color;
-		}
-	}
-`
-
-/**
- * Displays a toggle button with supporting text. Allows passing custom elements as side labels and inner labels.
- * Forwards many relevant props to the innner input element. Exposes some props to the children via context.
- */
-export const Switch = vui<'label', SwitchProps>((props, ref) => {
-	const {
-		button,
-		checked,
-		children,
-		className,
-		colorScheme,
-		defaultChecked,
-		disabled,
-		id,
-		innerLabelOff,
-		innerLabelOn,
-		inputProps,
-		inputRef,
-		labelLeft,
-		labelRight,
-		name,
-		onBlur,
-		onChange,
-		onFocus,
-		required,
-		size,
-		value,
-		variant,
-		...rest
-	} = props
-	const styles = useStyleConfig('Switch', props)
-
-	const context = useMemo(
-		() =>
-			filterUndefined({
-				checked,
-				colorScheme,
-				defaultChecked,
-				disabled,
-				name,
-				onBlur,
-				onChange,
-				onFocus,
-				required,
-				size,
-				value,
-				variant
-			}),
-		[checked, colorScheme, defaultChecked, disabled, name, onBlur, onChange, onFocus, required, size, value, variant]
-	)
-
-	const aliasedProps = filterUndefined({
-		'aria-disabled': disabled
-	})
-
-	return (
-		<SwitchProvider value={context}>
-			<SwitchBase className={cs('vui-switch', className)} ref={ref} {...styles.container} {...aliasedProps} {...rest}>
-				{isReactText(labelLeft) ? <SwitchLabel mr={1} text={labelLeft} /> : labelLeft}
-
-				{children ?? button ?? <SwitchButton {...{ id, innerLabelOff, innerLabelOn, inputProps, inputRef }} />}
-
-				{isReactText(labelRight) ? <SwitchLabel ml={1} text={labelRight} /> : labelRight}
-			</SwitchBase>
-		</SwitchProvider>
-	)
-}) as VuiComponent<'label', SwitchProps> & {
-	Button: typeof SwitchButton
-	Label: typeof SwitchLabel
-}
-
-Switch.displayName = 'Switch'
-
-Switch.Button = SwitchButton
-Switch.Label = SwitchLabel
-
-export default Switch