@veracity/vui 1.0.0 → 1.1.1

package/src/skeleton/skeleton.types.ts

@@ -2,11 +2,11 @@ import { SystemProps } from '../system'
 import { ThemingProps } from '../theme'
 
 export type SkeletonProps = SystemProps &
-	ThemingProps<'Skeleton'> & {
-		/** Children are disabled for this component. */
-		children?: never
-		/** Available theme colors for this component. @default blue */
-		colorScheme?: 'blue' | 'grey'
-		/** Displays given amount of skeleton elements. */
-		repeat?: number
-	}
+  ThemingProps<'Skeleton'> & {
+    /** Children are disabled for this component. */
+    children?: never
+    /** Available theme colors for this component. @default blue */
+    colorScheme?: 'blue' | 'grey'
+    /** Displays given amount of skeleton elements. */
+    repeat?: number
+  }

package/src/skeleton/theme.ts

@@ -1,59 +1,59 @@
 import { Dict } from '../utils'
 
 function variantCircle(props: Dict) {
-	const { colorScheme: c } = props
+  const { colorScheme: c } = props
 
-	const styles = {
-		borderRadius: '50%',
-		bg: `${c}.20`
-	}
+  const styles = {
+    borderRadius: '50%',
+    bg: `${c}.20`
+  }
 
-	return styles
+  return styles
 }
 
 function variantRectangle(props: Dict) {
-	const { colorScheme: c } = props
+  const { colorScheme: c } = props
 
-	const styles = {
-		borderRadius: 'md',
-		bg: `${c}.20`,
-		w: '100%'
-	}
+  const styles = {
+    borderRadius: 'md',
+    bg: `${c}.20`,
+    w: '100%'
+  }
 
-	return styles
+  return styles
 }
 
 const baseStyle = {}
 
 const defaultProps = {
-	colorScheme: 'blue',
-	size: 'md',
-	variant: 'rect'
+  colorScheme: 'blue',
+  size: 'md',
+  variant: 'rect'
 }
 
 const sizes = {
-	xs: {
-		h: 24
-	},
-	sm: {
-		h: 32
-	},
-	md: {
-		h: 40
-	},
-	lg: {
-		h: 48
-	}
+  xs: {
+    h: 24
+  },
+  sm: {
+    h: 32
+  },
+  md: {
+    h: 40
+  },
+  lg: {
+    h: 48
+  }
 }
 
 const variants = {
-	circle: variantCircle,
-	rect: variantRectangle
+  circle: variantCircle,
+  rect: variantRectangle
 }
 
 export default {
-	baseStyle,
-	defaultProps,
-	sizes,
-	variants
+  baseStyle,
+  defaultProps,
+  sizes,
+  variants
 }

package/src/spinner/consts.ts

@@ -1,22 +1,22 @@
 import { Dict } from '../utils'
 
 export const spinnerPositionMapping = {
-	bottom: {
-		container: { flexDirection: 'column' }
-	},
-	left: {
-		container: { flexDirection: 'row-reverse' }
-	},
-	right: {
-		container: { flexDirection: 'row' }
-	},
-	top: {
-		container: { flexDirection: 'column-reverse' }
-	}
+  bottom: {
+    container: { flexDirection: 'column' }
+  },
+  left: {
+    container: { flexDirection: 'row-reverse' }
+  },
+  right: {
+    container: { flexDirection: 'row' }
+  },
+  top: {
+    container: { flexDirection: 'column-reverse' }
+  }
 }
 
 export const spinnerSpeedMapping: Dict<string> = {
-	slow: '1s',
-	normal: '0.9s',
-	fast: '0.8s'
+  slow: '1s',
+  normal: '0.9s',
+  fast: '0.8s'
 }

package/src/spinner/spinner.tsx

@@ -8,9 +8,9 @@ import { spinnerPositionMapping, spinnerSpeedMapping } from './consts'
 import { SpinnerProps } from './spinner.types'
 
 export const SpinnerCircle = styled.divBox`
-	border-radius: round;
-	display: flex;
-	flex-shrink: 0;
+  border-radius: round;
+  display: flex;
+  flex-shrink: 0;
 `
 
 /**
@@ -19,56 +19,54 @@ export const SpinnerCircle = styled.divBox`
  * Handles different positioning scenarios, speeds and coloring of the circle.
  */
 export const Spinner = vui<'div', SpinnerProps>((props, ref) => {
-	const {
-		className,
-		emptyColor,
-		size,
-		speed: speedProp = 'normal',
-		text,
-		textPosition = 'bottom',
-		thickness,
-		...rest
-	} = props
-	const styles = useStyleConfig('Spinner', props)
+  const {
+    className,
+    emptyColor,
+    size,
+    speed: speedProp = 'normal',
+    text,
+    textPosition = 'bottom',
+    thickness,
+    ...rest
+  } = props
+  const styles = useStyleConfig('Spinner', props)
 
-	const isCustomSize = typeof size === 'number'
-	const positionProps = spinnerPositionMapping[textPosition]
-	const speed = spinnerSpeedMapping[speedProp] ?? speedProp
+  const isCustomSize = typeof size === 'number'
+  const positionProps = spinnerPositionMapping[textPosition]
+  const speed = spinnerSpeedMapping[speedProp] ?? speedProp
 
-	const circleProps = filterUndefined({
-		borderColor: emptyColor,
-		borderWidth: isCustomSize ? thickness ?? 4 : thickness,
-		h: isCustomSize ? size : undefined,
-		w: isCustomSize ? size : undefined
-	})
+  const circleProps = filterUndefined({
+    borderColor: emptyColor,
+    borderWidth: isCustomSize ? thickness ?? 4 : thickness,
+    h: isCustomSize ? size : undefined,
+    w: isCustomSize ? size : undefined
+  })
 
-	return (
-		<Box
-			center
-			className={cs('vui-spinner', className)}
-			gap={1}
-			ref={ref}
-			transitionDuration="fast"
-			{...styles.container}
-			{...positionProps.container}
-			{...rest}
-		>
-			<SpinnerCircle
-				animation={`vui-spin ${speed} linear infinite`}
-				className="vui-spinnerCircle"
-				{...styles.circle}
-				{...circleProps}
-			/>
+  return (
+    <Box
+      center
+      className={cs('vui-spinner', className)}
+      gap={1}
+      ref={ref}
+      transitionDuration="fast"
+      {...styles.container}
+      {...positionProps.container}
+      {...rest}
+    >
+      <SpinnerCircle
+        animation={`vui-spin ${speed} linear infinite`}
+        className="vui-spinnerCircle"
+        {...styles.circle}
+        {...circleProps}
+      />
 
-			{text && (
-				<T className="vui-spinnerText" {...styles.text}>
-					{text}
-				</T>
-			)}
-		</Box>
-	)
+      {text && (
+        <T className="vui-spinnerText" {...styles.text}>
+          {text}
+        </T>
+      )}
+    </Box>
+  )
 })
 
-// Spinner.displayName = 'Spinner'
-
 export default Spinner

package/src/spinner/spinner.types.ts

@@ -2,21 +2,21 @@ import { BoxProps } from '../box'
 import { ThemingProps } from '../theme'
 
 export type SpinnerProps = Omit<BoxProps, 'size' | 'variant'> &
-	Omit<ThemingProps<'Spinner'>, 'size'> & {
-		/** Children are disabled for this component. */
-		children?: never
-		/** Available theme colors for this component. @default blue */
-		colorScheme?: 'blue' | 'grey' | 'prussian'
-		/** Color of the 'empty' part of the circle. */
-		emptyColor?: string | 'transparent'
-		/** Amount of time needed to make a full rotation. */
-		speed?: 'normal' | 'fast' | 'slow'
-		/** Theme size or a number defining height and width. */
-		size?: ThemingProps<'Spinner'>['size'] | number
-		/** Displays given text next to the spinner. */
-		text?: string
-		/** Text placement relative to the spinner. */
-		textPosition?: 'bottom' | 'left' | 'right' | 'top'
-		/** Thickness of the spinner circle in pixels. */
-		thickness?: number
-	}
+  Omit<ThemingProps<'Spinner'>, 'size'> & {
+    /** Children are disabled for this component. */
+    children?: never
+    /** Available theme colors for this component. @default blue */
+    colorScheme?: 'blue' | 'grey' | 'prussian'
+    /** Color of the 'empty' part of the circle. */
+    emptyColor?: string | 'transparent'
+    /** Amount of time needed to make a full rotation. */
+    speed?: 'normal' | 'fast' | 'slow'
+    /** Theme size or a number defining height and width. */
+    size?: ThemingProps<'Spinner'>['size'] | number
+    /** Displays given text next to the spinner. */
+    text?: string
+    /** Text placement relative to the spinner. */
+    textPosition?: 'bottom' | 'left' | 'right' | 'top'
+    /** Thickness of the spinner circle in pixels. */
+    thickness?: number
+  }

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
 }