@veracity/vui 0.7.1 → 1.1.0

package/src/icons/baseIcons/types.ts

@@ -0,0 +1,298 @@
+export type BaseIcon =
+  | 'cubPowerBi'
+  | 'cubVeracity'
+  | 'cuiCheckboxIndeterminate'
+  | 'cuiCheckboxSelected'
+  | 'cuiCheckboxUnselected'
+  | 'cuiRadioSelected'
+  | 'cuiRadioUnselected'
+  | 'culApiProduct'
+  | 'culApiService'
+  | 'culCircleChart'
+  | 'culCircleChartAlt'
+  | 'culCovid'
+  | 'culDeepSearch'
+  | 'culDotsMenu'
+  | 'culGlobePlus'
+  | 'culListDense'
+  | 'culMapMarkerStar'
+  | 'culNumber1'
+  | 'culPlusThin'
+  | 'culScreenshot'
+  | 'culScreenshotAlt'
+  | 'culShortcut'
+  | 'culTarget'
+  | 'culTimesThin'
+  | 'culTransformer'
+  | 'culUserTransfer'
+  | 'culVeracityService'
+  | 'culVessel'
+  | 'culVesselGroup'
+  | 'cusDotFull'
+  | 'cusDotFullAlt'
+  | 'cusDotsMenu'
+  | 'cusTransformer'
+  | 'cusVessel'
+  | 'fabApplePay'
+  | 'fabBluetooth'
+  | 'fabBtc'
+  | 'fabCcAmazonPay'
+  | 'fabCcAmex'
+  | 'fabCcApplePay'
+  | 'fabCcDinersClub'
+  | 'fabCcMastercard'
+  | 'fabCcPaypal'
+  | 'fabCcVisa'
+  | 'fabDhl'
+  | 'fabEbay'
+  | 'fabFacebook'
+  | 'fabFedex'
+  | 'fabFirefox'
+  | 'fabGoogle'
+  | 'fabGoogleDrive'
+  | 'fabLinkedinIn'
+  | 'fabMedium'
+  | 'fabOsi'
+  | 'fabSlack'
+  | 'fabTwitter'
+  | 'fabUps'
+  | 'fabYoutube'
+  | 'fadSpinnerThird'
+  | 'falAddressBook'
+  | 'falAddressCard'
+  | 'falAnalytics'
+  | 'falAngleDoubleDown'
+  | 'falAngleDoubleLeft'
+  | 'falAngleDoubleRight'
+  | 'falAngleDoubleUp'
+  | 'falAngleDown'
+  | 'falAngleLeft'
+  | 'falAngleRight'
+  | 'falAngleUp'
+  | 'falArrowAltDown'
+  | 'falArrowAltLeft'
+  | 'falArrowAltRight'
+  | 'falArrowAltUp'
+  | 'falArrowCircleDown'
+  | 'falArrowCircleLeft'
+  | 'falArrowCircleRight'
+  | 'falArrowCircleUp'
+  | 'falArrowDown'
+  | 'falArrowFromBottom'
+  | 'falArrowFromLeft'
+  | 'falArrowFromRight'
+  | 'falArrowFromTop'
+  | 'falArrowLeft'
+  | 'falArrowRight'
+  | 'falArrowToBottom'
+  | 'falArrowToLeft'
+  | 'falArrowToRight'
+  | 'falArrowToTop'
+  | 'falArrowUp'
+  | 'falArrows'
+  | 'falAward'
+  | 'falBan'
+  | 'falBars'
+  | 'falBell'
+  | 'falBookOpen'
+  | 'falBroadcastTower'
+  | 'falBroom'
+  | 'falBuilding'
+  | 'falBullseye'
+  | 'falCalendar'
+  | 'falCalendarAlt'
+  | 'falCamera'
+  | 'falCaretDown'
+  | 'falCaretLeft'
+  | 'falCaretRight'
+  | 'falCaretUp'
+  | 'falCauldron'
+  | 'falChartArea'
+  | 'falChartBar'
+  | 'falChartLine'
+  | 'falChartLineDown'
+  | 'falChartNetwork'
+  | 'falChartPie'
+  | 'falChartPieAlt'
+  | 'falChartScatter'
+  | 'falCheck'
+  | 'falCheckCircle'
+  | 'falCheckSquare'
+  | 'falChevronCircleDown'
+  | 'falChevronCircleLeft'
+  | 'falChevronCircleRight'
+  | 'falChevronCircleUp'
+  | 'falChevronDoubleDown'
+  | 'falChevronDoubleLeft'
+  | 'falChevronDoubleRight'
+  | 'falChevronDoubleUp'
+  | 'falChevronDown'
+  | 'falChevronLeft'
+  | 'falChevronRight'
+  | 'falChevronUp'
+  | 'falCircle'
+  | 'falCloud'
+  | 'falCloudShowersHeavy'
+  | 'falCloudSnow'
+  | 'falCloudSun'
+  | 'falCloudSunRain'
+  | 'falCloudUpload'
+  | 'falCode'
+  | 'falCog'
+  | 'falCogs'
+  | 'falComment'
+  | 'falCommentAlt'
+  | 'falCompressAlt'
+  | 'falCopy'
+  | 'falCreditCard'
+  | 'falDatabase'
+  | 'falDotCircle'
+  | 'falDownload'
+  | 'falEdit'
+  | 'falEllipsisH'
+  | 'falEllipsisV'
+  | 'falEnvelope'
+  | 'falExchange'
+  | 'falExclamationCircle'
+  | 'falExclamationTriangle'
+  | 'falExpandAlt'
+  | 'falExternalLink'
+  | 'falEye'
+  | 'falEyeSlash'
+  | 'falFile'
+  | 'falFileAlt'
+  | 'falFileArchive'
+  | 'falFileAudio'
+  | 'falFileCertificate'
+  | 'falFileChartLine'
+  | 'falFileChartPie'
+  | 'falFileCheck'
+  | 'falFileCode'
+  | 'falFileCsv'
+  | 'falFileEdit'
+  | 'falFileExcel'
+  | 'falFileImage'
+  | 'falFileInvoiceDollar'
+  | 'falFilePdf'
+  | 'falFilePlus'
+  | 'falFilePowerpoint'
+  | 'falFileSpreadsheet'
+  | 'falFileVideo'
+  | 'falFileWord'
+  | 'falFilter'
+  | 'falFlag'
+  | 'falFolder'
+  | 'falFolderOpen'
+  | 'falFolderPlus'
+  | 'falFolders'
+  | 'falGlassesAlt'
+  | 'falGlobe'
+  | 'falHome'
+  | 'falHourglass'
+  | 'falImage'
+  | 'falInfoCircle'
+  | 'falKey'
+  | 'falLayerGroup'
+  | 'falLayerPlus'
+  | 'falLink'
+  | 'falList'
+  | 'falLockAlt'
+  | 'falLongArrowDown'
+  | 'falLongArrowLeft'
+  | 'falLongArrowRight'
+  | 'falLongArrowUp'
+  | 'falMap'
+  | 'falMapMarked'
+  | 'falMapMarkedAlt'
+  | 'falMapMarker'
+  | 'falMapMarkerAlt'
+  | 'falMapMarkerAltSlash'
+  | 'falMapMarkerCheck'
+  | 'falMapMarkerExclamation'
+  | 'falMinus'
+  | 'falPause'
+  | 'falPauseCircle'
+  | 'falPen'
+  | 'falPlay'
+  | 'falPlayCircle'
+  | 'falPlug'
+  | 'falPlus'
+  | 'falPlusCircle'
+  | 'falPlusSquare'
+  | 'falPrint'
+  | 'falPuzzlePiece'
+  | 'falQuestionCircle'
+  | 'falReceipt'
+  | 'falRedo'
+  | 'falSave'
+  | 'falSearch'
+  | 'falSearchMinus'
+  | 'falSearchPlus'
+  | 'falServer'
+  | 'falShare'
+  | 'falShareAll'
+  | 'falShareAlt'
+  | 'falShieldAlt'
+  | 'falShieldCheck'
+  | 'falShip'
+  | 'falShoppingBasket'
+  | 'falSignIn'
+  | 'falSignInAlt'
+  | 'falSignOut'
+  | 'falSignOutAlt'
+  | 'falSlidersV'
+  | 'falSnowBlowing'
+  | 'falSnowflake'
+  | 'falSolarPanel'
+  | 'falSort'
+  | 'falSpinner'
+  | 'falSquare'
+  | 'falStepForward'
+  | 'falStop'
+  | 'falStopCircle'
+  | 'falStopwatch'
+  | 'falSuitcase'
+  | 'falSun'
+  | 'falSync'
+  | 'falTachometer'
+  | 'falTemperatureHigh'
+  | 'falTh'
+  | 'falThLarge'
+  | 'falThList'
+  | 'falTimes'
+  | 'falTimesCircle'
+  | 'falToggleOff'
+  | 'falToggleOn'
+  | 'falTrashAlt'
+  | 'falUnlockAlt'
+  | 'falUser'
+  | 'falUserChart'
+  | 'falUserCircle'
+  | 'falUserCog'
+  | 'falUserEdit'
+  | 'falUserFriends'
+  | 'falUserPlus'
+  | 'falUserShield'
+  | 'falUserTimes'
+  | 'falUsers'
+  | 'falUsersClass'
+  | 'falWater'
+  | 'falWind'
+  | 'falWindTurbine'
+  | 'falWrench'
+  | 'fasCalendarAlt'
+  | 'fasCaretDown'
+  | 'fasCaretLeft'
+  | 'fasCaretRight'
+  | 'fasCaretUp'
+  | 'fasCheckCircle'
+  | 'fasDiamond'
+  | 'fasFolder'
+  | 'fasMapMarkerAlt'
+  | 'fasMapMarkerExclamation'
+  | 'fasQuoteLeft'
+  | 'fasQuoteRight'
+  | 'fasSolarPanel'
+  | 'fasSort'
+  | 'fasStar'
+  | 'fasWindTurbine'

package/src/icons/cache.ts

@@ -0,0 +1,45 @@
+import { defaultIcons } from './consts'
+import { IconDefinition } from './types'
+
+/**
+ * Holds the collection of selected predefined icons. Can be extended with more icons by the consumer.
+ * When using icons, they will be checked in library before loading them from CDN.
+ */
+class IconsCache {
+  cache: Map<string, IconDefinition> = new Map()
+
+  add = (...icons: IconDefinition[]) => {
+    icons.forEach(icon => {
+      this.cache.set(icon.name, icon)
+    })
+  }
+
+  get = (name: string) => {
+    const icon = this.cache.get(name)
+
+    if (!icon) {
+      /* eslint-disable-next-line no-console */
+      console.error(`Icon ${name} does not exist in the library.`)
+    }
+
+    return icon
+  }
+
+  has = (name: string) => {
+    return this.cache.has(name)
+  }
+
+  init = () => {
+    this.add(...Object.values(defaultIcons))
+  }
+
+  reset = () => {
+    this.cache.clear()
+  }
+}
+
+const cache = new IconsCache()
+
+cache.init()
+
+export default cache

package/src/icons/consts.ts

@@ -0,0 +1,42 @@
+import cuiCheckboxIndeterminate from './baseIcons/cui/cuiCheckboxIndeterminate'
+import cuiCheckboxSelected from './baseIcons/cui/cuiCheckboxSelected'
+import cuiCheckboxUnselected from './baseIcons/cui/cuiCheckboxUnselected'
+import cuiRadioSelected from './baseIcons/cui/cuiRadioSelected'
+import cuiRadioUnselected from './baseIcons/cui/cuiRadioUnselected'
+import fadSpinnerThird from './baseIcons/fad/fadSpinnerThird'
+import falCheck from './baseIcons/fal/falCheck'
+import falCheckCircle from './baseIcons/fal/falCheckCircle'
+import falEllipsisH from './baseIcons/fal/falEllipsisH'
+import falEllipsisV from './baseIcons/fal/falEllipsisV'
+import falExclamationCircle from './baseIcons/fal/falExclamationCircle'
+import falExclamationTriangle from './baseIcons/fal/falExclamationTriangle'
+import falInfoCircle from './baseIcons/fal/falInfoCircle'
+import falPlus from './baseIcons/fal/falPlus'
+import falSpinner from './baseIcons/fal/falSpinner'
+import falTimes from './baseIcons/fal/falTimes'
+import falTimesCircle from './baseIcons/fal/falTimesCircle'
+import { IconDefinition } from './types'
+
+/**
+ * Default icons are fundamental to functioning of certain components.
+ * They are added to the icon library in order to avoid loading them from CDN.
+ */
+export const defaultIcons: Record<string, IconDefinition> = {
+  cuiCheckboxIndeterminate,
+  cuiCheckboxSelected,
+  cuiCheckboxUnselected,
+  cuiRadioSelected,
+  cuiRadioUnselected,
+  fadSpinnerThird,
+  falCheck,
+  falCheckCircle,
+  falEllipsisH,
+  falEllipsisV,
+  falExclamationCircle,
+  falExclamationTriangle,
+  falInfoCircle,
+  falPlus,
+  falSpinner,
+  falTimes,
+  falTimesCircle
+}

package/src/icons/index.ts

@@ -0,0 +1,3 @@
+export { default as iconsCache } from './cache'
+export * from './consts'
+export * from './types'

package/src/icons/readme.md

@@ -0,0 +1,15 @@
+# Contents
+
+- Base icons folders and files
+- IconsCache
+- Icons typing
+
+# Description
+
+This folder includes definitions and types for the base icons that are most commonly used in Veracity projects. This collection of icons is defined in [Figma](https://www.figma.com/file/iYTcKdCL7ZcCfpoHGacpXO/Ver-DS-3.0-%E2%80%93-Brand-Assets?node-id=1%3A8).
+
+It also includes an IconsCache singleton. Icons in the cache will be used directly, while all other icons will be loaded from Veracity CDN at runtime. By default, selected few icons (~15) are included in the cache. Consumers can add more icons to the cache in individual projects.
+
+Each icon is defined using an object following a standard Font Awesome data structure. See types.ts for more details. Icon files are named as camelCase icon name with a category prefix, such as fal (Font Awesome Light) or cus (Custom Solid).
+
+VuiIcon string union type is used to provide typing and autocompletion for the Icon component's 'name' prop. It can be extended by augmenting VuiIcons dictionary.

package/src/icons/types.ts

@@ -0,0 +1,31 @@
+import React from 'react'
+
+import Svg from '../svg'
+import { PropsOf } from '../utils'
+import { BaseIcon } from './baseIcons/types'
+
+/** Object defining a custom icon. */
+export type IconDefinition = {
+  /** Icon details including height, width and 'd' attribute. */
+  details: IconDetails
+  /** Name of the icon used internally. */
+  name: string
+  /** Props object or array of objects passed to the path elements. */
+  pathProps?: React.SVGProps<SVGPathElement> | React.SVGProps<SVGPathElement>[]
+  /** Props object passed to the svg element. */
+  svgProps?: PropsOf<typeof Svg>
+}
+
+/** Icon definition following Font Awesome standard. */
+export type IconDetails = [
+  number, // width
+  number, // height
+  string[], // ligatures
+  string, // unicode
+  string | string[] // svgPathData
+]
+
+export type VuiIcon = keyof VuiIcons
+
+/** Base icons collection, which can be extended by the consumer. */
+export interface VuiIcons extends Record<BaseIcon, IconDefinition> {}

package/src/image/image.tsx

@@ -0,0 +1,21 @@
+import React from 'react'
+
+import { omitThemingProps, styled, useStyleConfig, vui } from '../core'
+import { cs } from '../utils'
+import { ImageProps } from './image.types'
+
+export const ImageBase = styled.imgBox`
+  height: auto;
+  object-fit: cover;
+  width: 100%;
+`
+
+/** Displays an image. Includes base styling. */
+export const Image = vui<'img', ImageProps>((props, ref) => {
+  const { className, ...rest } = omitThemingProps(props)
+  const styles = useStyleConfig('Image', props)
+
+  return <ImageBase className={cs('vui-image', className)} ref={ref} {...styles} {...rest} />
+})
+
+export default Image

package/src/image/image.types.ts

@@ -0,0 +1,8 @@
+import { SystemProps } from '../system'
+import { ThemingProps } from '../theme'
+
+export type ImageProps = SystemProps &
+  ThemingProps<'Image'> & {
+    /** Children are disabled for this component. */
+    children?: never
+  }

package/src/image/index.ts

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

package/src/image/theme.ts

@@ -0,0 +1,14 @@
+const baseStyle = {}
+
+const defaultProps = {}
+
+const sizes = {}
+
+const variants = {}
+
+export default {
+  baseStyle,
+  defaultProps,
+  sizes,
+  variants
+}

package/src/index.ts

@@ -0,0 +1,42 @@
+export * from './avatar'
+export * from './box'
+export * from './button'
+export * from './buttonGroup'
+export * from './card'
+export * from './checkbox'
+export * from './core'
+export * from './dialog'
+export * from './divider'
+export * from './footer'
+export * from './grid'
+export * from './header'
+export * from './heading'
+export * from './icon'
+export * from './icons'
+export * from './image'
+export * from './input'
+export * from './link'
+export * from './list'
+export * from './menu'
+export * from './modal'
+export * from './notification'
+export * from './p'
+export * from './pagination'
+export * from './panel'
+export * from './popover'
+export * from './portal'
+export * from './radio'
+export * from './select'
+export * from './skeleton'
+export * from './spinner'
+export * from './svg'
+export * from './switch'
+export * from './system'
+export * from './t'
+export * from './toast'
+export * from './tooltip'
+export * from './table'
+export * from './tag'
+export * from './textarea'
+export * from './theme'
+export * from './utils'

package/src/input/consts.ts

@@ -0,0 +1,26 @@
+import { InputStateMapping } from './input.types'
+
+export const inputStateMapping: InputStateMapping = {
+  error: {
+    colorScheme: 'red',
+    iconProps: {
+      color: 'red.80',
+      icon: 'falExclamationTriangle'
+    }
+  },
+  loading: {
+    colorScheme: 'grey',
+    iconProps: {
+      animation: 'vui-spin 0.6s linear infinite',
+      name: 'fadSpinnerThird',
+      pathFill: ['blue.20', 'blue.50']
+    }
+  },
+  success: {
+    colorScheme: 'green',
+    iconProps: {
+      color: 'green.80',
+      icon: 'falCheck'
+    }
+  }
+}

package/src/input/context.ts

@@ -0,0 +1,6 @@
+import { createContext } from '../utils'
+import { InputProps } from './input.types'
+
+const [InputProvider, useInputContext] = createContext<Partial<InputProps>>({ isOptional: true })
+
+export { InputProvider, useInputContext }

package/src/input/helpers.ts

@@ -0,0 +1,8 @@
+import { InputProps } from './input.types'
+
+/** Returns length of the initial input's value. */
+export function getInitialCount(props: InputProps) {
+  const { defaultValue, value } = props
+
+  return defaultValue?.toString().length ?? value?.toString().length ?? 0
+}

package/src/input/index.ts

@@ -0,0 +1,5 @@
+export * from './input'
+export { default } from './input'
+export * from './input.types'
+export * from './inputIcon'
+export * from './inputInput'