@veracity/vui 1.0.0 → 1.1.0

package/src/spinner/theme.ts

@@ -1,85 +1,85 @@
 import { Dict } from '../utils'
 
 function variantDefault(props: Dict) {
-	const { colorScheme: c } = props
+  const { colorScheme: c } = props
 
-	const container = {
-		color: `${c}.50`
-	}
+  const container = {
+    color: `${c}.50`
+  }
 
-	const circle = {
-		borderColor: `${c}.20`,
-		borderTopColor: `${c}.50`
-	}
+  const circle = {
+    borderColor: `${c}.20`,
+    borderTopColor: `${c}.50`
+  }
 
-	const text = {}
+  const text = {}
 
-	return { container, circle, text }
+  return { container, circle, text }
 }
 
 const baseStyle = {}
 
 const defaultProps = {
-	colorScheme: 'blue',
-	size: 'page',
-	variant: 'default'
+  colorScheme: 'blue',
+  size: 'page',
+  variant: 'default'
 }
 
 const parts = ['container', 'circle', 'text']
 
 const sizes = {
-	xs: {
-		circle: {
-			borderWidth: 1,
-			h: 16,
-			w: 16
-		}
-	},
-	sm: {
-		circle: {
-			borderWidth: 2,
-			h: 24,
-			w: 24
-		}
-	},
-	md: {
-		circle: {
-			borderWidth: 3,
-			h: 32,
-			w: 32
-		}
-	},
-	lg: {
-		circle: {
-			borderWidth: 3,
-			h: 40,
-			w: 40
-		}
-	},
-	card: {
-		circle: {
-			borderWidth: 4,
-			h: 60,
-			w: 60
-		}
-	},
-	page: {
-		circle: {
-			borderWidth: 5,
-			h: 80,
-			w: 80
-		}
-	}
+  xs: {
+    circle: {
+      borderWidth: 1,
+      h: 16,
+      w: 16
+    }
+  },
+  sm: {
+    circle: {
+      borderWidth: 2,
+      h: 24,
+      w: 24
+    }
+  },
+  md: {
+    circle: {
+      borderWidth: 3,
+      h: 32,
+      w: 32
+    }
+  },
+  lg: {
+    circle: {
+      borderWidth: 3,
+      h: 40,
+      w: 40
+    }
+  },
+  card: {
+    circle: {
+      borderWidth: 4,
+      h: 60,
+      w: 60
+    }
+  },
+  page: {
+    circle: {
+      borderWidth: 5,
+      h: 80,
+      w: 80
+    }
+  }
 }
 
 const variants = {
-	default: variantDefault
+  default: variantDefault
 }
 
 export default {
-	baseStyle,
-	defaultProps,
-	parts,
-	sizes,
-	variants
+  baseStyle,
+  defaultProps,
+  parts,
+  sizes,
+  variants
 }

package/src/svg/cache.ts

@@ -7,29 +7,29 @@ type CachedItem = string | Promise<string>
  * and can be used for the whole session without repeating requests.
  */
 class Cache {
-	cache: Map<string, CachedItem> = new Map()
+  cache: Map<string, CachedItem> = new Map()
 
-	add = (src: string, svg: CachedItem) => {
-		this.cache.set(src, svg)
-	}
+  add = (src: string, svg: CachedItem) => {
+    this.cache.set(src, svg)
+  }
 
-	get = (src: string) => {
-		const item = this.cache.get(src)
+  get = (src: string) => {
+    const item = this.cache.get(src)
 
-		if (!item) {
-			const promise = fetch(src).then(res => res.text())
+    if (!item) {
+      const promise = fetch(src).then(res => res.text())
 
-			this.add(src, promise)
+      this.add(src, promise)
 
-			return promise
-		}
+      return promise
+    }
 
-		return item
-	}
+    return item
+  }
 
-	reset = () => {
-		this.cache.clear()
-	}
+  reset = () => {
+    this.cache.clear()
+  }
 }
 
 const cache = new Cache()

package/src/svg/helpers.ts

@@ -3,31 +3,31 @@ import { SvgState } from './svg.types'
 
 /** Returns an object with given element's HTML attributes. */
 export function getAttributes(element?: Element) {
-	if (!element) return {}
+  if (!element) return {}
 
-	const attrs = Array.from(element.attributes)
+  const attrs = Array.from(element.attributes)
 
-	return attrs.reduce((props: Dict<string>, attr) => {
-		const { name, value } = attr
-		props[name] = value
-		return props
-	}, {})
+  return attrs.reduce((props: Dict<string>, attr) => {
+    const { name, value } = attr
+    props[name] = value
+    return props
+  }, {})
 }
 
 /** Returns content of the SVG HTML string by stripping the svg tag. */
 export function getSvgContent(html = '') {
-	return html.replace(/(<\/?svg(?:.|\n)*?>)|(\r\n|\n|\r)/gm, '')
+  return html.replace(/(<\/?svg(?:.|\n)*?>)|(\r\n|\n|\r)/gm, '')
 }
 
 /** Returns object with initial state values. */
 export function initState(): SvgState {
-	return { content: '', svgAttributes: {} }
+  return { content: '', svgAttributes: {} }
 }
 
 /** Returns given HTML string as an HTML element. */
 export function stringToHTML(html: string) {
-	const container = document.createElement('div')
-	container.innerHTML = html
+  const container = document.createElement('div')
+  container.innerHTML = html
 
-	return container.firstElementChild
+  return container.firstElementChild
 }

package/src/svg/svg.tsx

@@ -7,88 +7,88 @@ import { getAttributes, getSvgContent, initState, stringToHTML } from './helpers
 import { SvgProps, SvgState } from './svg.types'
 
 export const SvgBase: VuiComponent<'svg', SvgProps> = styled.svgBox<SvgProps>(({ pathFill }) => {
-	return css`
-		${pathFill !== undefined &&
-		(Array.isArray(pathFill)
-			? pathFill
-					.map(
-						(fill, index) => `
+  return css`
+    ${pathFill !== undefined &&
+    (Array.isArray(pathFill)
+      ? pathFill
+          .map(
+            (fill, index) => `
 					& > path:nth-child(${index + 1}) {
 						fill: ${fill};
 					}
 				`
-					)
-					.join()
-			: `
+          )
+          .join()
+      : `
 				& > path {
 					fill: ${pathFill};
 				}
 			`)}
-	`
+  `
 })
 
 /**
  * Displays an svg element based on provided children or 'src' prop.
+ *
  * When using src, it loads the content from the given URL and saves in in cache.
+ *
  * Then, renders the svg by parsing loaded content (Review potential for XSS due to innerHTML).
  */
 export const Svg = vui<'svg', SvgProps>((props, ref) => {
-	const { children, className, src, ...rest } = props
-	const [state, setState] = useState<SvgState>(initState())
-	const isMountedRef = useRef(false)
-	const srcRef = useRef(src)
+  const { children, className, src, ...rest } = props
+  const [state, setState] = useState<SvgState>(initState())
+  const isMountedRef = useRef(false)
+  const srcRef = useRef(src)
 
-	const { content = '', svgAttributes = {} } = state
-	const innerHTML = !children ? { __html: content } : undefined
+  const { content = '', svgAttributes = {} } = state
+  const innerHTML = !children ? { __html: content } : undefined
 
-	useEffect(() => {
-		isMountedRef.current = true
-		return () => {
-			isMountedRef.current = false
-		}
-	}, [])
+  useEffect(() => {
+    isMountedRef.current = true
+    return () => {
+      isMountedRef.current = false
+    }
+  }, [])
 
-	useEffect(() => {
-		srcRef.current = src
+  useEffect(() => {
+    srcRef.current = src
 
-		async function loadSvg(src: string) {
-			try {
-				const response = await cache.get(src)
-				const content = getSvgContent(response)
-				const svgEl = stringToHTML(response) as Element | undefined
-				const svgAttributes = getAttributes(svgEl)
+    async function loadSvg(src: string) {
+      try {
+        const response = await cache.get(src)
+        const content = getSvgContent(response)
+        const svgEl = stringToHTML(response) as Element | undefined
+        const svgAttributes = getAttributes(svgEl)
 
-				svgAttributes['data-src'] = src ?? ''
+        svgAttributes['data-src'] = src ?? ''
 
-				// Update state only when requested 'src' and current 'src' are the same
-				if (srcRef.current === src && isMountedRef.current) {
-					setState({ content, svgAttributes })
-				}
-			} catch (error) {
-				console.error(error) // eslint-disable-line no-console
-				if (isMountedRef.current) {
-					setState(initState())
-				}
-			}
-		}
+        // Update state only when requested 'src' and current 'src' are the same
+        if (srcRef.current === src && isMountedRef.current) {
+          setState({ content, svgAttributes })
+        }
+      } catch (error) {
+        console.error(error) // eslint-disable-line no-console
+        if (isMountedRef.current) {
+          setState(initState())
+        }
+      }
+    }
 
-		src && loadSvg(src)
-	}, [src])
+    src && loadSvg(src)
+  }, [src])
 
-	return (
-		<SvgBase
-			className={cs('vui-svg', className)}
-			dangerouslySetInnerHTML={innerHTML} // eslint-disable-line react/no-danger
-			ref={ref}
-			xmlns="http://www.w3.org/2000/svg"
-			{...svgAttributes}
-			{...rest}
-		>
-			{children}
-		</SvgBase>
-	)
+  return (
+    <SvgBase
+      className={cs('vui-svg', className)}
+      dangerouslySetInnerHTML={innerHTML} // eslint-disable-line react/no-danger
+      ref={ref}
+      xmlns="http://www.w3.org/2000/svg"
+      {...svgAttributes}
+      {...rest}
+    >
+      {children}
+    </SvgBase>
+  )
 })
 
-Svg.displayName = 'Svg'
-
 export default Svg

package/src/svg/svg.types.ts

@@ -2,13 +2,13 @@ import { ColorGetter, SystemProps } from '../system'
 import { Dict } from '../utils'
 
 export type SvgProps = SystemProps & {
-	/** If string, adds fill color to all paths. If array, adds fill color to consecutive path elements. */
-	pathFill?: ColorGetter | ColorGetter[]
-	/** If provided, loads an svg file from this URL and displays parsed content. */
-	src?: string
+  /** If string, adds fill color to all paths. If array, adds fill color to consecutive path elements. */
+  pathFill?: ColorGetter | ColorGetter[]
+  /** If provided, loads an svg file from this URL and displays parsed content. */
+  src?: string
 }
 
 export type SvgState = {
-	content?: string
-	svgAttributes: Dict<string>
+  content?: string
+  svgAttributes: Dict<string>
 }

package/src/switch/index.ts

@@ -1,6 +1,6 @@
 export * from './context'
-export { default } from './switch'
-export * from './switch'
+export { default } from './switchMain'
+export * from './switchMain'
 export * from './switch.types'
 export * from './switchButton'
 export * from './switchLabel'

package/src/switch/switch.types.ts

@@ -5,84 +5,84 @@ import { ThemingProps } from '../theme'
 import { ChangeEventHandler, FocusEventHandler, PropsOf } from '../utils'
 
 export type SwitchButtonProps = SystemProps &
-	ThemingProps<'Switch'> & {
-		/** Provides value to switch in controlled mode. */
-		checked?: boolean
-		/** Available theme colors for this component. */
-		colorScheme?: 'blue' | 'green' | 'prussian'
-		/** Disables switch and related elements with the right styling. */
-		disabled?: boolean
-		/** Displays custom content to the left of switch thumb. */
-		innerLabelOff?: ReactNode
-		/** Displays custom content to the right of switch thumb. */
-		innerLabelOn?: ReactNode
-		/** Props object passed to the inner input element. */
-		inputProps?: PropsOf<'input', SystemProps>
-		/** Ref passed to the inner input element. */
-		inputRef?: React.MutableRefObject<HTMLInputElement | null> | null
-		/** Passed to the inner input. */
-		name?: string
-		/** Passed to the inner input. */
-		onBlur?: FocusEventHandler
-		/** Passed to the inner input. */
-		onChange?: ChangeEventHandler
-		/** Passed to the inner input. */
-		onFocus?: FocusEventHandler
-		/** Passed to the inner input. */
-		required?: boolean
-		/** Passed to the inner input. */
-		value?: number | string
-	}
+  ThemingProps<'Switch'> & {
+    /** Provides value to switch in controlled mode. */
+    checked?: boolean
+    /** Available theme colors for this component. */
+    colorScheme?: 'blue' | 'green' | 'prussian'
+    /** Disables switch and related elements with the right styling. */
+    disabled?: boolean
+    /** Displays custom content to the left of switch thumb. */
+    innerLabelOff?: ReactNode
+    /** Displays custom content to the right of switch thumb. */
+    innerLabelOn?: ReactNode
+    /** Props object passed to the inner input element. */
+    inputProps?: PropsOf<'input', SystemProps>
+    /** Ref passed to the inner input element. */
+    inputRef?: React.MutableRefObject<HTMLInputElement | null> | null
+    /** Passed to the inner input. */
+    name?: string
+    /** Passed to the inner input. */
+    onBlur?: FocusEventHandler
+    /** Passed to the inner input. */
+    onChange?: ChangeEventHandler
+    /** Passed to the inner input. */
+    onFocus?: FocusEventHandler
+    /** Passed to the inner input. */
+    required?: boolean
+    /** Passed to the inner input. */
+    value?: number | string
+  }
 
 export type SwitchContext = Pick<
-	SwitchProps,
-	| 'checked'
-	| 'colorScheme'
-	| 'disabled'
-	| 'name'
-	| 'onBlur'
-	| 'onChange'
-	| 'onFocus'
-	| 'required'
-	| 'size'
-	| 'value'
-	| 'variant'
+  SwitchProps,
+  | 'checked'
+  | 'colorScheme'
+  | 'disabled'
+  | 'name'
+  | 'onBlur'
+  | 'onChange'
+  | 'onFocus'
+  | 'required'
+  | 'size'
+  | 'value'
+  | 'variant'
 > & {
-	defaultChecked?: boolean
+  defaultChecked?: boolean
 }
 
 export type SwitchProps = SystemProps &
-	ThemingProps<'Switch'> & {
-		/** Socket displaying a custom toggle button component. */
-		button?: ReactNode
-		/** Provides value to switch button in controlled mode. */
-		checked?: boolean
-		/** Available theme colors for this component. @default blue */
-		colorScheme?: 'blue' | 'green' | 'prussian'
-		/** Disables switch and related elements with the right styling. */
-		disabled?: boolean
-		/** Displays custom content to the left of switch thumb. */
-		innerLabelOff?: ReactNode
-		/** Displays custom content to the right of switch thumb. */
-		innerLabelOn?: ReactNode
-		/** Props object passed to the inner input element. */
-		inputProps?: PropsOf<'input', SystemProps>
-		/** Ref passed to the inner input element. */
-		inputRef?: React.MutableRefObject<HTMLInputElement | null> | null
-		/** Socket displaying content on the left. */
-		labelLeft?: ReactNode
-		/** Socket displaying content on the right. */
-		labelRight?: ReactNode
-		/** Passed to the inner input. */
-		name?: string
-		/** Passed to the inner input. */
-		onBlur?: FocusEventHandler
-		/** Passed to the inner input. */
-		onChange?: ChangeEventHandler
-		/** Passed to the inner input. */
-		onFocus?: FocusEventHandler
-		/** Passed to the inner input. */
-		required?: boolean
-		/** Passed to the inner input. */
-		value?: ReactText
-	}
+  ThemingProps<'Switch'> & {
+    /** Socket displaying a custom toggle button component. */
+    button?: ReactNode
+    /** Provides value to switch button in controlled mode. */
+    checked?: boolean
+    /** Available theme colors for this component. @default blue */
+    colorScheme?: 'blue' | 'green' | 'prussian'
+    /** Disables switch and related elements with the right styling. */
+    disabled?: boolean
+    /** Displays custom content to the left of switch thumb. */
+    innerLabelOff?: ReactNode
+    /** Displays custom content to the right of switch thumb. */
+    innerLabelOn?: ReactNode
+    /** Props object passed to the inner input element. */
+    inputProps?: PropsOf<'input', SystemProps>
+    /** Ref passed to the inner input element. */
+    inputRef?: React.MutableRefObject<HTMLInputElement | null> | null
+    /** Socket displaying content on the left. */
+    labelLeft?: ReactNode
+    /** Socket displaying content on the right. */
+    labelRight?: ReactNode
+    /** Passed to the inner input. */
+    name?: string
+    /** Passed to the inner input. */
+    onBlur?: FocusEventHandler
+    /** Passed to the inner input. */
+    onChange?: ChangeEventHandler
+    /** Passed to the inner input. */
+    onFocus?: FocusEventHandler
+    /** Passed to the inner input. */
+    required?: boolean
+    /** Passed to the inner input. */
+    value?: ReactText
+  }