@veracity/vui 2.26.0 → 2.27.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@veracity/vui",
-  "version": "2.26.0",
+  "version": "2.27.0",
   "description": "Veracity UI is a React component library crafted for use within Veracity applications and pages. Based on Styled Components and @xstyled.",
   "module": "./dist/esm/index.js",
   "main": "./dist/cjs/index.js",

package/src/icons/baseIcons/fal/falStar.ts

@@ -0,0 +1,8 @@
+/* eslint-disable */
+
+import { IconDefinition } from '../../types'
+
+export default {
+	details: [32, 32, [], '', 'M29.4429 11.3962C30.1897 11.4691 30.6751 11.8515 30.8992 12.5435C31.1232 13.2354 30.9739 13.8363 30.4511 14.3462L24.5138 19.973L25.9141 27.9489C26.0261 28.6409 25.7834 29.1872 25.186 29.5878C24.5885 30.0248 23.9724 30.0795 23.3376 29.7517L16 26.0369L8.66243 29.7517C8.02763 30.1159 7.4115 30.0795 6.81404 29.6424C6.21658 29.2054 5.97386 28.6409 6.08589 27.9489L7.48618 19.973L1.54892 14.3462C1.02614 13.8363 0.876774 13.2354 1.10082 12.5435C1.32487 11.8515 1.81031 11.4691 2.55713 11.3962L10.7349 10.1944L14.3757 2.98333C14.7117 2.32778 15.2532 2 16 2C16.7468 2 17.2883 2.32778 17.6243 2.98333L21.2651 10.1944L29.4429 11.3962ZM22.6094 19.3721L29.2188 13.0897L20.0889 11.8333L16 3.74814L11.9111 11.8333L2.78118 13.0897L9.39059 19.3721L7.82226 28.2221L16 24.0702L24.1777 28.2221L22.6094 19.3721Z'],
+	name: 'falStar'
+} as IconDefinition

package/src/icons/baseIcons/icons.ts

@@ -362,6 +362,7 @@ export { default as falSort } from './fal/falSort'
 export { default as falSortZA } from './fal/falSortZA'
 export { default as falSpinner } from './fal/falSpinner'
 export { default as falSquare } from './fal/falSquare'
+export { default as falStar } from './fal/falStar'
 export { default as falStepForward } from './fal/falStepForward'
 export { default as falStop } from './fal/falStop'
 export { default as falStopCircle } from './fal/falStopCircle'

package/src/icons/baseIcons/types.ts

@@ -363,6 +363,7 @@ export type BaseIcon =
   | 'falSortZA'
   | 'falSpinner'
   | 'falSquare'
+  | 'falStar'
   | 'falStepForward'
   | 'falStop'
   | 'falStopCircle'

package/src/index.ts

@@ -44,6 +44,7 @@ export * from './progress'
 export * from './progressCircular'
 export * from './radio'
 export * from './range'
+export * from './rating'
 export * from './select'
 export * from './sidemenu'
 export * from './skeleton'

package/src/rating/index.ts

@@ -0,0 +1,2 @@
+export * from './rating'
+export { default } from './rating'

package/src/rating/rating.tsx

@@ -0,0 +1,158 @@
+import { KeyboardEvent, useRef, useState } from 'react'
+
+import Box from '../box'
+import { KeyboardKeys, vui } from '../core'
+import Icon from '../icon'
+import { ColorGetter } from '../system'
+import { Dict, mergeRefs } from '../utils'
+import { RatingProps } from './rating.types'
+import theme from './theme'
+
+export const Rating = vui<'div', RatingProps>((props, ref) => {
+  const {
+    value: propValue = 0,
+    isDisabled = false,
+    max: propMax,
+    onChange,
+    showAll: showAllProp = true,
+    variant = 'yellow',
+    size,
+    ...rest
+  } = props
+  const [hoverValue, setHoverValue] = useState<number | null>(null)
+  const [internalValue, setInternalValue] = useState(propValue || 0)
+  const [focusedStar, setFocusedStar] = useState<number | null>(null)
+  const containerRef = useRef<HTMLDivElement>(null)
+  const isInteractive = !isDisabled && onChange !== undefined
+  const showAll = showAllProp || isInteractive
+
+  const { variants } = (theme as Dict) ?? {}
+  const color = isDisabled ? 'sandstone.79' : variants[variant].color
+
+  if (propValue < 0) {
+    console.error(`Rating: value (${propValue}) cannot be negative`)
+  }
+
+  const value = Math.max(0, propValue)
+  const max = propMax ? propMax : Math.max(value, 5)
+
+  if (value > max) {
+    console.error(`Rating: value (${value}) cannot be greater than max (${max})`)
+  }
+
+  const handleValueChange = (newValue: number) => {
+    if (!isInteractive) return
+    const clampedValue = Math.max(0, Math.min(newValue, max))
+    setInternalValue(clampedValue)
+    onChange?.(clampedValue)
+  }
+
+  const handleStarClick = (clickedValue: number) => {
+    if (!isInteractive) return
+    const newValue = clickedValue === internalValue ? 0 : clickedValue
+    handleValueChange(newValue)
+  }
+
+  const handleStarHover = (hoveredValue: number) => {
+    if (!isInteractive) return
+    setHoverValue(hoveredValue)
+  }
+
+  const handleMouseLeave = () => {
+    if (!isInteractive) return
+    setHoverValue(null)
+  }
+
+  const handleKeyDown = (event: KeyboardEvent<HTMLDivElement>) => {
+    if (!isInteractive) return
+    const currentValue = propValue !== undefined ? propValue : internalValue
+    switch (event.key) {
+      case KeyboardKeys.ArrowRight:
+      case KeyboardKeys.ArrowUp:
+        event.preventDefault()
+        handleValueChange(Math.min(currentValue + 1, max))
+        break
+      case KeyboardKeys.ArrowLeft:
+      case KeyboardKeys.ArrowDown:
+        event.preventDefault()
+        handleValueChange(Math.max(currentValue - 1, 0))
+        break
+      case KeyboardKeys.Home:
+        event.preventDefault()
+        handleValueChange(0)
+        break
+      case KeyboardKeys.End:
+        event.preventDefault()
+        handleValueChange(max)
+        break
+    }
+  }
+
+  const handleFocus = () => {
+    if (!isInteractive) return
+    if (focusedStar === null) {
+      setFocusedStar(propValue !== undefined ? propValue : internalValue)
+    }
+  }
+
+  const handleBlur = () => {
+    if (!isInteractive) return
+    setFocusedStar(null)
+  }
+
+  const displayValue = hoverValue !== null ? hoverValue : value !== undefined ? value : internalValue
+
+  return (
+    <Box
+      aria-label="Rating"
+      aria-valuemax={max}
+      aria-valuemin={0}
+      aria-valuenow={displayValue}
+      className="vui-rating"
+      focusRing={3}
+      focusRingColor="focusColor"
+      onBlur={handleBlur}
+      onFocus={handleFocus}
+      onKeyDown={handleKeyDown}
+      onMouseLeave={handleMouseLeave}
+      outline="none"
+      ref={mergeRefs(ref, containerRef)}
+      role="slider"
+      tabIndex={isInteractive ? 0 : -1}
+      {...rest}
+    >
+      {Array.from({ length: max }).map((_, index) => {
+        const starValue = index + 1
+        const fullStar = index < displayValue
+        return (
+          <Box
+            className="vui-rating-star"
+            cursor={isInteractive ? 'pointer' : undefined}
+            gap="1px"
+            key={index}
+            onClick={() => handleStarClick(starValue)}
+            onFocus={() => setFocusedStar(starValue)}
+            onMouseEnter={() => handleStarHover(starValue)}
+            tabIndex={-1}
+          >
+            {fullStar ? (
+              <FullStar color={color} size={size} />
+            ) : showAll ? (
+              <EmptyStar color="sandstone.79" size={size} />
+            ) : null}
+          </Box>
+        )
+      })}
+    </Box>
+  )
+})
+
+const FullStar = (props: { color: ColorGetter; size: RatingProps['size'] }) => (
+  <Icon color={props.color} name="fasStar" size={props.size} />
+)
+const EmptyStar = (props: { color: ColorGetter; size: RatingProps['size'] }) => (
+  <Icon color={props.color} name="falStar" size={props.size} />
+)
+
+Rating.displayName = 'Rating'
+export default Rating

package/src/rating/rating.types.ts

@@ -0,0 +1,20 @@
+import { SystemProps } from '../system'
+import { ThemingProps } from '../theme'
+
+export type RatingProps = SystemProps &
+  ThemingProps<'Rating'> & {
+    /** The current rating value. */
+    value: number
+    /** The maximum rating value. @default 5 */
+    max?: number
+    /** Whether to display all stars up to the maximum value. @default true */
+    showAll?: boolean
+    /** The color variant of the rating component. @default yellow */
+    variant?: 'yellow' | 'blue'
+    /** The size of the rating component. @default md */
+    size?: 'sm' | 'md' | 'lg'
+    /** Callback function that is called when the rating value changes. */
+    onChange?: (value: number) => void
+    /** Whether the rating component is disabled. @default false */
+    isDisabled?: boolean
+  }

package/src/rating/theme.ts

@@ -0,0 +1,43 @@
+const baseStyle = {}
+
+const defaultProps = {
+  size: 'md',
+  variant: 'yellow',
+}
+
+const parts = ['icon']
+
+const sizes = {
+  sm: {
+    icon: {
+      size: 'sm',
+    },
+  },
+  md: {
+    icon: {
+      size: 'md',
+    },
+  },
+  lg: {
+    icon: {
+      size: 'lg',
+    },
+  },
+}
+
+const variants = {
+  yellow: {
+    color: 'sunflower.50',
+  },
+  blue: {
+    color: 'seaBlue.28',
+  },
+}
+
+export default {
+  baseStyle,
+  defaultProps,
+  parts,
+  sizes,
+  variants,
+}

package/src/theme/components.ts

@@ -37,6 +37,7 @@ import Progress from '../progress/theme'
 import ProgressCircular from '../progressCircular/theme'
 import Radio from '../radio/theme'
 import Range from '../range/theme'
+import Rating from '../rating/theme'
 import Select from '../select/theme'
 import Sidemenu from '../sidemenu/theme'
 import Skeleton from '../skeleton/theme'
@@ -99,6 +100,7 @@ export default {
   Popover,
   Radio,
   Range,
+  Rating,
   Select,
   Sidemenu,
   Skeleton,