@veracity/vui 2.14.0-beta.0 → 2.14.0

package/src/index.ts

@@ -6,11 +6,13 @@ export * from './breadcrumbs'
 export * from './button'
 export * from './buttonGroup'
 export * from './buttonToggleGroup'
+export * from './calendar'
 export * from './card'
 export * from './checkbox'
 export * from './copyToClipboard'
 export * from './core'
 export * from './definition'
+export * from './datePicker'
 export * from './dialog'
 export * from './divider'
 export * from './dragAndDrop'

package/src/input/consts.ts

@@ -10,7 +10,7 @@ export const inputColors = {
   focus: 'seaBlue.main',
   error: 'energyRed.45',
   loading: 'seaBlue.80',
-  success: 'landGreen.41'
+  success: 'landGreen.35'
 }
 
 export const stateIcons = {

package/src/input/helpText.tsx

@@ -19,6 +19,7 @@ export const HelpText = vui<'div', HelpTextProps>((props, ref) => {
 
   return (
     <P
+      alignItems="center"
       className={cs('vui-inputHelpText', className)}
       color={color}
       display="flex"

package/src/input/input.tsx

@@ -14,6 +14,7 @@ import InputInput from './inputInput'
 
 export const InputBase = styled.divBox`
   align-items: center;
+  color: sandsone.10;
   background-color: white;
   border-radius: none;
   border-width: 1px;
@@ -27,6 +28,8 @@ export const InputBase = styled.divBox`
   &[aria-disabled='true'] {
     opacity: 0.5;
     cursor: not-allowed;
+    background-color: sandstone.79;
+    border-color: sandstone.79;
   }
 `
 
@@ -99,7 +102,8 @@ export const Input = vui<'div', InputProps>((props, ref) => {
 
   const aliasedProps = filterUndefined({
     'aria-disabled': disabled,
-    bg: readOnly ? inputColors.disabled : undefined,
+    bg: readOnly ? 'sandstone.97' : undefined,
+    borderColor: readOnly ? 'sandstone.55' : undefined,
     focusWithinBorderColor: !readOnly ? 'transparent' : undefined,
     focusWithinRingColor: readOnly ? 'transparent' : undefined
   })

package/src/input/inputInput.tsx

@@ -7,6 +7,7 @@ import { InputInputProps } from './input.types'
 
 export const InputInputBase = styled.input`
   align-self: stretch;
+  color: sandstone.10;
   background-color: transparent;
   border: none;
   border-radius: none;

package/src/tabs/tabs.tsx

@@ -46,10 +46,13 @@ export const Tabs = vui<'div', TabsProps>((props, ref) => {
   }, [children, activeTabId])
 
   const onNavItemClick = (id: number, e: React.MouseEvent<HTMLLIElement, MouseEvent>) => {
-    setAnimationDirection(id < activeTabIndex ? 'fadeLeft' : 'fadeRight')
-    setActiveTabIndex(id)
-    onTabClick?.(id)
-    tabs.find(t => t.id === id)?.onClick?.(e)
+    const tab = tabs.find(t => t.id === id)
+    if (tab?.children !== undefined) {
+      setAnimationDirection(id < activeTabIndex ? 'fadeLeft' : 'fadeRight')
+      setActiveTabIndex(id)
+      onTabClick?.(id)
+    }
+    tab?.onClick?.(e)
   }
 
   const activeTab = tabs?.[activeTabIndex]

package/src/tabs/tabsNavBar.tsx

@@ -61,10 +61,12 @@ export const TabsNavBar = vui<'div', TabNavBarProps>((props, ref) => {
           {!!tab.onDelete && (
             <TagButton
               disabled={tab.disabled}
-              hoverColor="energyRed.main"
+              hoverBg="skyBlue.80"
+              hoverColor="seaBlue.main"
               isRound={false}
               ml={1}
               onClick={e => tab?.onDelete?.(e)}
+              title="Delete"
             />
           )}
           {isActive(tab) && (

package/src/tabs/theme.ts

@@ -17,7 +17,6 @@ const sizes = {
     tabsNavBar: {
       borderWidth: '2px',
       fontSize: 'sm',
-      // lineHeight: '20px',
       h: '32px',
       py: '6px'
     }

package/src/theme/components.ts

@@ -5,8 +5,10 @@ import Badge from '../badge/theme'
 import Box from '../box/theme'
 import Breadcrumbs from '../breadcrumbs/theme'
 import Button from '../button/theme'
+import Calendar from '../calendar/theme'
 import Card from '../card/theme'
 import Checkbox from '../checkbox/theme'
+import DatePicker from '../datePicker/theme'
 import Definition from '../definition/theme'
 import Dialog from '../dialog/theme'
 import Divider from '../divider/theme'
@@ -56,8 +58,10 @@ export default {
   Box,
   Breadcrumbs,
   Button,
+  Calendar,
   Card,
   Checkbox,
+  DatePicker,
   Dialog,
   Divider,
   DragAndDrop,

package/src/utils/dates.ts

@@ -12,3 +12,63 @@ export function formatIsoDate(date: Date | string | number) {
   const dd = d.getDate().toString().padStart(2, '0')
   return `${yyyy}-${mm}-${dd}`
 }
+
+/**
+ * Parses string date with the iso format of YYYY-mm-dd
+ * @param input string
+ * @returns Date | undefined
+ */
+export function parseIsoDate(input?: string) {
+  if (!input) return
+
+  const ticks = Date.parse(input)
+
+  return isNaN(ticks) ? undefined : new Date(ticks)
+}
+
+/**
+ * Validation for 'YYYY-MM-DD' format
+ */
+export function validateDateFormat(dateString: string) {
+  const regEx = /^\d{4}-\d{2}-\d{2}$/
+  return dateString.match(regEx)
+}
+
+// Get current time's UTC year, month, date
+export const getDateUTCValue = (date: Date) => ({
+  utcYear: date.getUTCFullYear(),
+  utcMonth: date.getUTCMonth(),
+  utcDate: date.getUTCDate()
+})
+
+// Generate a date by set its utc value
+export const generateDateByUTCValue = (year: number, month: number, day?: number) => {
+  return day ? new Date(Date.UTC(year, month, day)) : new Date(Date.UTC(year, month))
+}
+
+export const sameYearSameMonth = (a?: Date, b?: Date) => {
+  if (!a || !b) return false
+
+  return a.getUTCFullYear() === b.getUTCFullYear() && a.getUTCMonth() === b.getUTCMonth()
+}
+
+export const sameYear = (a?: Date, b?: Date) => {
+  if (!a || !b) return false
+  return a.getUTCFullYear() === b.getUTCFullYear() ? true : false
+}
+
+export const sameDate = (a?: Date, b?: Date) => {
+  if (!a || !b) return false
+
+  return (
+    a.getUTCFullYear() === b.getUTCFullYear() &&
+    a.getUTCMonth() === b.getUTCMonth() &&
+    a.getUTCDate() === b.getUTCDate()
+  )
+}
+
+export const utcDateToLocale = (utcDate?: Date) => {
+  if (!utcDate) return undefined
+  const localDateSameDay = new Date(utcDate.getUTCFullYear(), utcDate.getUTCMonth(), utcDate.getUTCDate())
+  return localDateSameDay.toLocaleDateString()
+}

package/src/utils/formatDate.ts

@@ -0,0 +1,63 @@
+export type DateFormat =
+  | 'DD MM YYYY'
+  | 'DD MM YYYY, HH:MM'
+  | 'DD MMM'
+  | 'DD MMM YYYY'
+  | 'DD MMM YYYY, HH:MM'
+  | 'DD MMM, HH:MM'
+  | 'HH:MM'
+  | 'MMM D, YYYY'
+  | 'YYYY/MM/DD'
+  | 'YYYY-MM-DD'
+  | 'YYYY/MM/DD, HH:MM'
+  | 'YYYY-MM-DD, HH:MM'
+  | 'YYYY-MM-DD, HH:MM:SS'
+
+export type FormatDateOptions = Intl.DateTimeFormatOptions & {
+  locales?: string | string[]
+}
+
+/** Predefined selection of date formats using DateTimeFormatOptions. */
+export const dateFormats: Record<DateFormat, FormatDateOptions> = {
+  'DD MM YYYY': { year: 'numeric', month: '2-digit', day: '2-digit' },
+  'DD MM YYYY, HH:MM': { year: 'numeric', month: '2-digit', day: '2-digit', hour: '2-digit', minute: '2-digit' },
+  'DD MMM': { month: 'short', day: '2-digit' },
+  'DD MMM YYYY': { year: 'numeric', month: 'short', day: '2-digit' },
+  'DD MMM YYYY, HH:MM': { year: 'numeric', month: 'short', day: '2-digit', hour: '2-digit', minute: '2-digit' },
+  'DD MMM, HH:MM': { month: 'short', day: '2-digit', hour: '2-digit', minute: '2-digit' },
+  'HH:MM': { locales: 'en-GB', hour: '2-digit', minute: '2-digit', hourCycle: 'h23' },
+  'MMM D, YYYY': { locales: 'en-US', year: 'numeric', month: 'short', day: 'numeric' },
+  'YYYY/MM/DD': { locales: 'en-ZA' },
+  'YYYY-MM-DD': { locales: 'fr-CA' },
+  'YYYY/MM/DD, HH:MM': { locales: 'en-ZA', hour: '2-digit', minute: '2-digit' },
+  'YYYY-MM-DD, HH:MM': { locales: 'fr-CA', timeStyle: 'short' },
+  'YYYY-MM-DD, HH:MM:SS': { locales: 'fr-CA' }
+}
+
+/**
+ * Structures given date string, milliseconds number or Date object according to the chosen format.
+ * Uses toLocalDateString internally. Predefined formats specify initial options, which can be overwritten.
+ * @param date - string, number or Date object accepted by Date() constructor
+ * @param format - predefined configuration of DateTimeFormatOptions
+ * @param options - configuration of toLocaleDateString method
+ */
+export function formatDate(
+  date?: string | number | Date,
+  format: DateFormat = 'DD MM YYYY',
+  options?: FormatDateOptions
+) {
+  const formatOptions = dateFormats[format]
+  const { locales, ...mergedOptions } = { ...formatOptions, ...options }
+
+  if (format === 'YYYY-MM-DD, HH:MM:SS' || format === 'YYYY-MM-DD, HH:MM') {
+    return date
+      ? new Date(date).toLocaleDateString(locales) + ', ' + new Date(date).toLocaleTimeString(undefined, mergedOptions)
+      : ''
+  }
+
+  if (format === 'HH:MM') {
+    return date ? new Date(date).toLocaleTimeString(locales, mergedOptions) : ''
+  }
+
+  return date ? new Date(date).toLocaleDateString(locales, mergedOptions) : ''
+}

package/src/utils/index.ts

@@ -3,6 +3,7 @@ export * from './assertion'
 export * from './consts'
 export * from './dates'
 export * from './dom'
+export * from './formatDate'
 export * from './function'
 export * from './number'
 export * from './object'