@veracity/vui 1.0.0 → 1.1.0

package/src/checkbox/checkbox.tsx

@@ -8,44 +8,44 @@ import { CheckboxProps, CheckboxStyleProps } from './checkbox.types'
 import { useCheckboxGroupContext } from './context'
 
 const CheckboxControl = styled.spanBox`
-	border-radius: sm;
-	display: inline-flex;
-	flex-shrink: 0;
-	position: relative;
-	transition-duration: fast;
+  border-radius: sm;
+  display: inline-flex;
+  flex-shrink: 0;
+  position: relative;
+  transition-duration: fast;
 `
 
 const CheckboxInput = styled.input`
-	cursor: inherit;
-	height: 100%;
-	left: 0;
-	margin: 0;
-	opacity: 0;
-	padding: 0;
-	position: absolute;
-	top: 0;
-	width: 100%;
-	z-index: 1;
+  cursor: inherit;
+  height: 100%;
+  left: 0;
+  margin: 0;
+  opacity: 0;
+  padding: 0;
+  position: absolute;
+  top: 0;
+  width: 100%;
+  z-index: 1;
 `
 
 export const CheckboxBase = styled.labelBox<CheckboxStyleProps>`
-	align-items: center;
-	cursor: pointer;
-	display: inline-flex;
-	width: fit-content;
-
-	&:not([aria-disabled='true']):hover .vui-checkboxControl {
-		color: ${p => th.color(p.controlHoverColor)};
-	}
-
-	&[aria-disabled='true'] {
-		color: disabled.color;
-		cursor: not-allowed;
-
-		.vui-checkboxControl {
-			color: disabled.color;
-		}
-	}
+  align-items: center;
+  cursor: pointer;
+  display: inline-flex;
+  width: fit-content;
+
+  &:not([aria-disabled='true']):hover .vui-checkboxControl {
+    color: ${p => th.color(p.controlHoverColor)};
+  }
+
+  &[aria-disabled='true'] {
+    color: disabled.color;
+    cursor: not-allowed;
+
+    .vui-checkboxControl {
+      color: disabled.color;
+    }
+  }
 `
 
 /**
@@ -53,90 +53,88 @@ export const CheckboxBase = styled.labelBox<CheckboxStyleProps>`
  * Uses icons to display itself in different states. Can be indeterminate when selecting some nested items.
  */
 export const Checkbox = vui<'span', CheckboxProps>((props, ref) => {
-	const { defaultValue: groupDefaultValue, ...checkboxGroupProps } = useCheckboxGroupContext() ?? {}
-
-	const mergedProps = { ...checkboxGroupProps, ...props }
-	const {
-		checked,
-		children,
-		className,
-		defaultChecked = groupDefaultValue !== undefined ? groupDefaultValue.includes(props.value) : undefined,
-		disabled,
-		icon: iconProp = 'cuiCheckboxUnselected',
-		iconChecked = 'cuiCheckboxSelected',
-		iconIndeterminate = 'cuiCheckboxIndeterminate',
-		id,
-		inputProps,
-		inputRef,
-		isIndeterminate,
-		label,
-		name,
-		onChange,
-		required,
-		value,
-		...rest
-	} = omitThemingProps(mergedProps)
-	const [isChecked, setIsChecked] = useState(defaultChecked)
-	const styles = useStyleConfig('Checkbox', mergedProps)
-	const { color: controlColor, hoverColor, ...controlStyles } = styles.control
-
-	const isFilled = isChecked || isIndeterminate
-	const icon = isIndeterminate ? iconIndeterminate : isChecked ? iconChecked : iconProp
-	const controlMr = children || label ? 1 : 0
-	const color = isFilled ? controlColor : 'grey.60'
-	const controlHoverColor = isFilled ? hoverColor : 'grey.90'
-
-	useEffect(() => {
-		checked !== undefined && setIsChecked(checked)
-	}, [checked])
-
-	function handleOnChange(e: ChangeEvent) {
-		setIsChecked(e.target.checked)
-		onChange?.(e)
-	}
-
-	const aliasedProps = filterUndefined({
-		'aria-disabled': disabled
-	})
-
-	return (
-		<CheckboxBase
-			className={cs('vui-checkbox', className)}
-			controlHoverColor={controlHoverColor}
-			ref={ref}
-			{...styles.container}
-			{...aliasedProps}
-			{...rest}
-		>
-			<CheckboxControl
-				className="vui-checkboxControl"
-				color={color}
-				focusWithinRing={3}
-				mr={controlMr}
-				{...controlStyles}
-			>
-				<CheckboxInput
-					className="vui-checkboxInput"
-					onChange={handleOnChange}
-					ref={inputRef}
-					type="checkbox"
-					{...{ checked, defaultChecked, disabled, id, name, required, value }}
-					{...inputProps}
-				/>
-
-				<Icon className="vui-checkboxIcon" h="100%" name={icon} w="100%" />
-			</CheckboxControl>
-
-			{children ??
-				(label && (
-					<T className="vui-checkboxLabel" lineHeight="normal" {...styles.label}>
-						{label}
-					</T>
-				))}
-		</CheckboxBase>
-	)
+  const { defaultValue: groupDefaultValue, ...checkboxGroupProps } = useCheckboxGroupContext() ?? {}
+
+  const mergedProps = { ...checkboxGroupProps, ...props }
+  const {
+    checked,
+    children,
+    className,
+    defaultChecked = groupDefaultValue !== undefined ? groupDefaultValue.includes(props.value) : undefined,
+    disabled,
+    icon: iconProp = 'cuiCheckboxUnselected',
+    iconChecked = 'cuiCheckboxSelected',
+    iconIndeterminate = 'cuiCheckboxIndeterminate',
+    id,
+    inputProps,
+    inputRef,
+    isIndeterminate,
+    label,
+    name,
+    onChange,
+    required,
+    value,
+    ...rest
+  } = omitThemingProps(mergedProps)
+  const [isChecked, setIsChecked] = useState(defaultChecked)
+  const styles = useStyleConfig('Checkbox', mergedProps)
+  const { color: controlColor, hoverColor, ...controlStyles } = styles.control
+
+  const isFilled = isChecked || isIndeterminate
+  const icon = isIndeterminate ? iconIndeterminate : isChecked ? iconChecked : iconProp
+  const controlMr = children || label ? 1 : 0
+  const color = isFilled ? controlColor : 'grey.60'
+  const controlHoverColor = isFilled ? hoverColor : 'grey.90'
+
+  useEffect(() => {
+    checked !== undefined && setIsChecked(checked)
+  }, [checked])
+
+  function handleOnChange(e: ChangeEvent) {
+    setIsChecked(e.target.checked)
+    onChange?.(e)
+  }
+
+  const aliasedProps = filterUndefined({
+    'aria-disabled': disabled
+  })
+
+  return (
+    <CheckboxBase
+      className={cs('vui-checkbox', className)}
+      controlHoverColor={controlHoverColor}
+      ref={ref}
+      {...styles.container}
+      {...aliasedProps}
+      {...rest}
+    >
+      <CheckboxControl
+        className="vui-checkboxControl"
+        color={color}
+        focusWithinRing={3}
+        mr={controlMr}
+        {...controlStyles}
+      >
+        <CheckboxInput
+          className="vui-checkboxInput"
+          onChange={handleOnChange}
+          ref={inputRef}
+          type="checkbox"
+          {...{ checked, defaultChecked, disabled, id, name, required, value }}
+          {...inputProps}
+        />
+
+        <Icon className="vui-checkboxIcon" h="100%" name={icon} w="100%" />
+      </CheckboxControl>
+
+      {children ??
+        (label && (
+          <T className="vui-checkboxLabel" lineHeight="normal" {...styles.label}>
+            {label}
+          </T>
+        ))}
+    </CheckboxBase>
+  )
 })
 
-// Checkbox.displayName = 'Checkbox'
-
 export default Checkbox

package/src/checkbox/checkbox.types.ts

@@ -6,42 +6,42 @@ import { ThemingProps } from '../theme'
 import { ChangeEventHandler, FocusEventHandler } from '../utils'
 
 export type CheckboxProps = SystemProps &
-	ThemingProps<'Checkbox'> & {
-		/** Provides value to checkbox in controlled mode. */
-		checked?: boolean
-		/** Available theme colors for this component. @default blue */
-		colorScheme?: 'blue' | 'prussian'
-		/** Disables checkbox and related elements with the right styling. */
-		disabled?: boolean
-		/** Icon used when not checked. @default cuiCheckboxUnselected */
-		icon?: IconProp
-		/** Icon used when checked. @default cuiCheckboxSelected */
-		iconChecked?: IconProp
-		/** Icon used when in indeterminte state. @default cuiCheckboxIndeterminate */
-		iconIndeterminate?: IconProp
-		/** Props object passed to the inner input element. */
-		inputProps?: HTMLAttributes<HTMLInputElement>
-		/** Ref passed to the inner input element. */
-		inputRef?: React.MutableRefObject<HTMLInputElement | null> | null
-		/** Displays the checkbox as indeterminate. */
-		isIndeterminate?: boolean
-		/** Socket placing text to the left of the checkbox. */
-		label?: string
-		/** 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<'Checkbox'> & {
+    /** Provides value to checkbox in controlled mode. */
+    checked?: boolean
+    /** Available theme colors for this component. @default blue */
+    colorScheme?: 'blue' | 'prussian'
+    /** Disables checkbox and related elements with the right styling. */
+    disabled?: boolean
+    /** Icon used when not checked. @default cuiCheckboxUnselected */
+    icon?: IconProp
+    /** Icon used when checked. @default cuiCheckboxSelected */
+    iconChecked?: IconProp
+    /** Icon used when in indeterminte state. @default cuiCheckboxIndeterminate */
+    iconIndeterminate?: IconProp
+    /** Props object passed to the inner input element. */
+    inputProps?: HTMLAttributes<HTMLInputElement>
+    /** Ref passed to the inner input element. */
+    inputRef?: React.MutableRefObject<HTMLInputElement | null> | null
+    /** Displays the checkbox as indeterminate. */
+    isIndeterminate?: boolean
+    /** Socket placing text to the left of the checkbox. */
+    label?: string
+    /** 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 CheckboxStyleProps = {
-	/** Styles the icon when any part of the checkbox is hovered. */
-	controlHoverColor: string
+  /** Styles the icon when any part of the checkbox is hovered. */
+  controlHoverColor: string
 }

package/src/checkbox/checkboxGroup.tsx

@@ -6,8 +6,8 @@ import { CheckboxGroupProps } from './checkboxGroup.types'
 import { CheckboxGroupProvider } from './context'
 
 export const CheckboxGroupBase = styled.divBox`
-	display: flex;
-	flex-direction: column;
+  display: flex;
+  flex-direction: column;
 `
 
 /**
@@ -15,37 +15,35 @@ export const CheckboxGroupBase = styled.divBox`
  * Exposes some props to the children via context.
  */
 export const CheckboxGroup = vui<'div', CheckboxGroupProps>((props, ref) => {
-	const {
-		className,
-		colorScheme,
-		defaultValue,
-		disabled,
-		isRow,
-		name,
-		onBlur,
-		onChange,
-		onFocus,
-		size,
-		variant,
-		...rest
-	} = props
-
-	const context = useMemo(
-		() => filterUndefined({ colorScheme, defaultValue, disabled, name, onBlur, onChange, onFocus, size, variant }),
-		[colorScheme, defaultValue, disabled, name, onBlur, onChange, onFocus, size, variant]
-	)
-
-	const aliasedProps = filterUndefined({
-		flexDirection: isRow ? 'row' : undefined
-	} as const)
-
-	return (
-		<CheckboxGroupProvider value={context}>
-			<CheckboxGroupBase className={cs('vui-checkboxGroup', className)} ref={ref} {...aliasedProps} {...rest} />
-		</CheckboxGroupProvider>
-	)
+  const {
+    className,
+    colorScheme,
+    defaultValue,
+    disabled,
+    isRow,
+    name,
+    onBlur,
+    onChange,
+    onFocus,
+    size,
+    variant,
+    ...rest
+  } = props
+
+  const context = useMemo(
+    () => filterUndefined({ colorScheme, defaultValue, disabled, name, onBlur, onChange, onFocus, size, variant }),
+    [colorScheme, defaultValue, disabled, name, onBlur, onChange, onFocus, size, variant]
+  )
+
+  const aliasedProps = filterUndefined({
+    flexDirection: isRow ? 'row' : undefined
+  } as const)
+
+  return (
+    <CheckboxGroupProvider value={context}>
+      <CheckboxGroupBase className={cs('vui-checkboxGroup', className)} ref={ref} {...aliasedProps} {...rest} />
+    </CheckboxGroupProvider>
+  )
 })
 
-CheckboxGroup.displayName = 'CheckboxGroup'
-
 export default CheckboxGroup

package/src/checkbox/checkboxGroup.types.ts

@@ -3,19 +3,19 @@ import { ThemingProps } from '../theme'
 import { ChangeEventHandler, FocusEventHandler } from '../utils'
 
 export type CheckboxGroupProps = SystemProps &
-	ThemingProps<'Checkbox'> & {
-		/** Available theme colors for this component. */
-		colorScheme?: 'blue' | 'prussian'
-		/** Passes the prop to each checkbox. */
-		disabled?: boolean
-		/** Displays checkboxes in a row. */
-		isRow?: boolean
-		/** Passes the prop to each checkbox. */
-		name?: string
-		/** Passes the prop to each checkbox. */
-		onBlur?: FocusEventHandler
-		/** Passes the prop to each checkbox. */
-		onChange?: ChangeEventHandler
-		/** Passes the prop to each checkbox. */
-		onFocus?: FocusEventHandler
-	}
+  ThemingProps<'Checkbox'> & {
+    /** Available theme colors for this component. */
+    colorScheme?: 'blue' | 'prussian'
+    /** Passes the prop to each checkbox. */
+    disabled?: boolean
+    /** Displays checkboxes in a row. */
+    isRow?: boolean
+    /** Passes the prop to each checkbox. */
+    name?: string
+    /** Passes the prop to each checkbox. */
+    onBlur?: FocusEventHandler
+    /** Passes the prop to each checkbox. */
+    onChange?: ChangeEventHandler
+    /** Passes the prop to each checkbox. */
+    onFocus?: FocusEventHandler
+  }

package/src/checkbox/theme.ts

@@ -1,70 +1,70 @@
 import { Dict } from '../utils'
 
 function variantDefault(props: Dict) {
-	const { colorScheme: c } = props
+  const { colorScheme: c } = props
 
-	const control = {
-		color: `${c}.80`,
-		hoverColor: `${c}.90`
-	}
+  const control = {
+    color: `${c}.80`,
+    hoverColor: `${c}.90`
+  }
 
-	if (c === 'prussian') {
-		control.hoverColor = 'prussian.70'
-	}
+  if (c === 'prussian') {
+    control.hoverColor = 'prussian.70'
+  }
 
-	return {
-		control
-	}
+  return {
+    control
+  }
 }
 
 const baseStyle = {}
 
 const defaultProps = {
-	colorScheme: 'blue',
-	size: 'md',
-	variant: 'default'
+  colorScheme: 'blue',
+  size: 'md',
+  variant: 'default'
 }
 
 const parts = ['container', 'control', 'label']
 
 const sizes = {
-	sm: {
-		control: {
-			h: 16,
-			w: 16
-		},
-		label: {
-			size: 'sm'
-		}
-	},
-	md: {
-		control: {
-			h: 20,
-			w: 20
-		},
-		label: {
-			size: 'md'
-		}
-	},
-	lg: {
-		control: {
-			h: 24,
-			w: 24
-		},
-		label: {
-			size: 'lg'
-		}
-	}
+  sm: {
+    control: {
+      h: 16,
+      w: 16
+    },
+    label: {
+      size: 'sm'
+    }
+  },
+  md: {
+    control: {
+      h: 20,
+      w: 20
+    },
+    label: {
+      size: 'md'
+    }
+  },
+  lg: {
+    control: {
+      h: 24,
+      w: 24
+    },
+    label: {
+      size: 'lg'
+    }
+  }
 }
 
 const variants = {
-	default: variantDefault
+  default: variantDefault
 }
 
 export default {
-	baseStyle,
-	defaultProps,
-	parts,
-	sizes,
-	variants
+  baseStyle,
+  defaultProps,
+  parts,
+  sizes,
+  variants
 }

package/src/core/consts.ts

@@ -3,7 +3,7 @@ export const cdnStagUrl = 'https://cdnstag.veracity.com'
 export const cdnTestUrl = 'https://cdntest.veracity.com'
 
 export const cdnUrls = {
-	Prod: cdnUrl,
-	Stag: cdnStagUrl,
-	Test: cdnTestUrl
+  Prod: cdnUrl,
+  Stag: cdnStagUrl,
+  Test: cdnTestUrl
 } as const