@veracity/vui 2.24.0-beta.1 → 2.24.0-beta.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@veracity/vui",
-  "version": "2.24.0-beta.1",
+  "version": "2.24.0-beta.3",
   "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",
@@ -26,6 +26,7 @@
     "@xstyled/system": "2.5.0",
     "@xstyled/util": "2.2.3",
     "react-focus-lock": "2.9.7",
+    "react-slider": "2.0.6",
     "styled-components": "5.3.11",
     "tippy.js": "6.3.7"
   },
@@ -33,6 +34,7 @@
     "@types/node": "^20.11.16",
     "@types/react": "^18.2.55",
     "@types/react-dom": "^18.2.19",
+    "@types/react-slider": "^1.3.6",
     "@veracity/eslint-config": "*",
     "@veracity/prettier-config": "*",
     "@veracity/tsconfig": "*",

package/src/dragAndDrop/dragAndDrop.tsx

@@ -25,7 +25,8 @@ export const DragAndDrop = vui<'label', DragAndDropProps>((props, ref) => {
     accept,
     className,
     icon = defaultIcon,
-    isFolderUpload,
+    selectFolderOnClick,
+    selectFolderOnDrop,
     onFilesAdded,
     multiple = true,
     text = defaultText,
@@ -89,7 +90,7 @@ export const DragAndDrop = vui<'label', DragAndDropProps>((props, ref) => {
     e.preventDefault()
     if (disabled) return undefined
 
-    if (isFolderUpload) {
+    if (selectFolderOnDrop) {
       const items = e.dataTransfer.items
       getFilesWebkitDataTransferItems(items).then(files => files?.length && onFilesAdded?.(files))
       return undefined
@@ -127,7 +128,7 @@ export const DragAndDrop = vui<'label', DragAndDropProps>((props, ref) => {
         ref={fileInput}
         style={{ display: 'none' }}
         type={inputType}
-        {...(isFolderUpload && { webkitdirectory: 'true', directory: 'true' })}
+        {...(selectFolderOnClick && { webkitdirectory: 'true', directory: 'true' })}
       />
     </DragAndDropBase>
   )

package/src/dragAndDrop/dragAndDrop.types.ts

@@ -4,15 +4,17 @@ import { ThemingProps } from '../theme'
 
 export type DragAndDropProps = Omit<BoxProps, 'variant'> &
   ThemingProps<'DragAndDrop'> & {
-    /** A string that defines the file types the file input should accept. This string is a comma-separated list of [unique file type specifiers](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file#unique_file_type_specifiers). */
+    /** Defines the file types the file input should accept. This string is a comma-separated list of [unique file type specifiers](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file#unique_file_type_specifiers). */
     accept?: string
     /** Disabled. @default `false` */
     disabled?: boolean
     /** The message icon. @default `falCloudUpload` */
     icon?: IconProp
-    /** Allow folder upload @default `false` */
-    isFolderUpload?: boolean
-    /** Allows to select multiple files when the drop zone is clicked.. @default `true` */
+    /** Allows folder selection using click @default `false` */
+    selectFolderOnClick?: boolean
+    /** Allows folder selection using drag and drop  @default `false` */
+    selectFolderOnDrop?: boolean
+    /** Allows to select multiple files when the drop zone is clicked @default `true` */
     multiple?: boolean
     /** The message text. @default `Click or drag files to this area` */
     text?: string

package/src/index.ts

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

package/src/range/consts.ts

@@ -0,0 +1,5 @@
+export const rangeColors = {
+  main: 'seaBlue.28',
+  track: 'sandstone.79',
+  disabled: 'sandstone.55',
+} as const

package/src/range/index.ts

@@ -0,0 +1,3 @@
+export * from './range'
+export { default } from './range'
+export * from './range.types'

package/src/range/range.tsx

@@ -0,0 +1,107 @@
+import ReactSlider from 'react-slider'
+
+import { Box } from '../box'
+import { styled, useStyleConfig, vui } from '../core'
+import { Tooltip } from '../tooltip'
+import { cs, filterUndefined } from '../utils'
+import { rangeColors } from './consts'
+import { RangeProps } from './range.types'
+
+const SliderBase = styled(ReactSlider)`
+  width: 100%;
+  height: 4px;
+  cursor: pointer;
+  transition-duration: '0s';
+
+  &[aria-disabled='true'] * {
+    pointer-events: none !important;
+    color: yellow;
+    background-color: yellow;
+  }
+`
+
+/** Implements a range input. */
+export const Range = vui<'div', RangeProps>((props, ref) => {
+  const {
+    className,
+    value,
+    defaultValue = 0,
+    disabled,
+    min = 0,
+    minDistance = 0,
+    max = 100,
+    step = 1,
+    showTooltip = false,
+    showValue = false,
+    onChange,
+    ...rest
+  } = props
+
+  const styles = useStyleConfig('Range', props)
+  const aliasedProps = filterUndefined({
+    'aria-disabled': disabled,
+  })
+  const isSingleValue = typeof value !== 'object'
+  const mainColor = disabled ? rangeColors.disabled : rangeColors.main
+
+  const getTrackColor = (trackProps: any) => {
+    const { key } = trackProps
+
+    if (isSingleValue) return key === 'track-0' ? mainColor : rangeColors.track
+
+    return key === 'track-2' ? rangeColors.track : key === 'track-1' ? mainColor : rangeColors.track
+  }
+
+  const Thumb = (props: any, state: any) => {
+    const content = (
+      <Box className="vui-range-thumb" {...styles.thumb} borderColor={mainColor} {...props}>
+        {showValue && (
+          <Box center className="vui-range-thumb-value" {...styles.thumbValue}>
+            {state.valueNow}
+          </Box>
+        )}
+      </Box>
+    )
+    return showValue ? (
+      content
+    ) : (
+      <Tooltip text={state.valueNow} visible={showTooltip}>
+        {content}
+      </Tooltip>
+    )
+  }
+
+  const Track = (
+    props: any,
+    state: {
+      index: number
+      value: number | readonly number[]
+    },
+  ) => <Box {...styles.track} bg={getTrackColor(props)} className="vui-range-track" {...props} index={state.index} />
+
+  return (
+    <Box
+      className={cs('vui-range', isSingleValue ? 'vui-range-single' : 'vui-range-range', className)}
+      ref={ref}
+      {...styles.container}
+      {...aliasedProps}
+      {...rest}
+    >
+      <SliderBase
+        className="vui-range-slider"
+        defaultValue={defaultValue}
+        disabled={disabled}
+        max={max}
+        min={min}
+        minDistance={minDistance}
+        onChange={onChange}
+        renderThumb={Thumb}
+        renderTrack={Track}
+        step={step}
+        value={value}
+      />
+    </Box>
+  )
+})
+
+export default Range

package/src/range/range.types.ts

@@ -0,0 +1,28 @@
+import { SystemProps } from '../system'
+import { ThemingProps } from '../theme'
+
+export type RangeValue = number | readonly number[]
+
+export type RangeProps = SystemProps &
+  ThemingProps<'Range'> & {
+    /** The default value of the range slider, number or [number, number]. @default 0 */
+    defaultValue?: RangeValue
+    /** The current value of the range slider, number or [number, number]. */
+    value?: RangeValue
+    /** Disables the range slider with the right styling */
+    disabled?: boolean
+    /** The minimum value of the range slider. @default 0 */
+    min?: number
+    /** The minimum value of the range slider. @default 100 */
+    max?: number
+    /** The minimum distance between two values in the range slider. @default 0 */
+    minDistance?: number
+    /** The step increment of the range slider. @default 1 */
+    step?: number
+    /** Whether to show a tooltip with the current value. @default false */
+    showTooltip?: boolean
+    /** Whether to show the current value bellow the thumb. @default false */
+    showValue?: boolean
+    /** Callback function that is called when the value changes. */
+    onChange?: (value: RangeValue) => void
+  }

package/src/range/theme.ts

@@ -0,0 +1,47 @@
+import { rangeColors } from './consts'
+
+const baseStyle = {
+  container: {
+    w: 1,
+  },
+  thumb: {
+    bg: 'white',
+    border: `2px solid ${rangeColors.main}`,
+    borderRadius: '24px',
+    cursor: 'grab',
+    h: '24px',
+    lineHeight: '24px',
+    w: '24px',
+    textAlign: 'center',
+    top: '-10px',
+    transitionDuration: '0s',
+  },
+  thumbValue: {
+    position: 'absolute',
+    top: '24px',
+    w: '18px',
+  },
+  track: {
+    bg: rangeColors.main,
+    bottom: 0,
+    borderRadius: '24px',
+    top: 0,
+    transitionDuration: '0s',
+  },
+}
+
+const defaultProps = {}
+
+const parts = ['container', 'thumb', 'thumbValue', 'track']
+
+const sizes = {}
+
+const variants = {}
+
+export default {
+  baseStyle,
+  defaultProps,
+  parts,
+  sizes,
+  variants,
+}

package/src/theme/components.ts

@@ -34,6 +34,7 @@ import Popover from '../popover/theme'
 import Progress from '../progress/theme'
 import ProgressCircular from '../progressCircular/theme'
 import Radio from '../radio/theme'
+import Range from '../range/theme'
 import Select from '../select/theme'
 import Sidemenu from '../sidemenu/theme'
 import Skeleton from '../skeleton/theme'
@@ -93,6 +94,7 @@ export default {
   Definition,
   Popover,
   Radio,
+  Range,
   Select,
   Sidemenu,
   Skeleton,

package/src/tooltip/tooltip.tsx

@@ -1,5 +1,5 @@
 import Tippy from '@tippyjs/react'
-import React, { JSXElementConstructor, ReactElement } from 'react'
+import { JSXElementConstructor, ReactElement } from 'react'
 
 import Box from '../box'
 import { useUp, v } from '../core'
@@ -23,6 +23,7 @@ export const Tooltip = (props: TooltipProps) => {
     maxWidth = '400px',
     text = 'Tooltip',
     placement = 'top',
+    visible = false,
   } = props
 
   const isDesktop = useUp('md')
@@ -70,6 +71,7 @@ export const Tooltip = (props: TooltipProps) => {
           },
         ],
       }}
+      visible={visible || undefined}
     >
       {children as ReactElement<any, string | JSXElementConstructor<any>> | undefined}
     </Tippy>

package/src/tooltip/tooltip.types.ts

@@ -26,4 +26,6 @@ export interface TooltipProps extends ChildrenProp {
   linkText?: string
   /** The <Link /> props.  */
   linkProps?: LinkProps
+  /** Keeping the tooltip always visible @default false  */
+  visible?: boolean
 }