@veracity/vui 1.1.0 → 1.1.1

package/src/icons/baseIcons/types.ts

@@ -84,12 +84,12 @@ export type BaseIcon =
   | 'falArrowFromTop'
   | 'falArrowLeft'
   | 'falArrowRight'
+  | 'falArrows'
   | 'falArrowToBottom'
   | 'falArrowToLeft'
   | 'falArrowToRight'
   | 'falArrowToTop'
   | 'falArrowUp'
-  | 'falArrows'
   | 'falAward'
   | 'falBan'
   | 'falBars'
@@ -176,6 +176,7 @@ export type BaseIcon =
   | 'falFilePdf'
   | 'falFilePlus'
   | 'falFilePowerpoint'
+  | 'falFileSignature'
   | 'falFileSpreadsheet'
   | 'falFileVideo'
   | 'falFileWord'
@@ -210,6 +211,7 @@ export type BaseIcon =
   | 'falMapMarkerCheck'
   | 'falMapMarkerExclamation'
   | 'falMinus'
+  | 'falPaperclip'
   | 'falPause'
   | 'falPauseCircle'
   | 'falPen'
@@ -272,10 +274,10 @@ export type BaseIcon =
   | 'falUserEdit'
   | 'falUserFriends'
   | 'falUserPlus'
-  | 'falUserShield'
-  | 'falUserTimes'
   | 'falUsers'
   | 'falUsersClass'
+  | 'falUserShield'
+  | 'falUserTimes'
   | 'falWater'
   | 'falWind'
   | 'falWindTurbine'

package/src/index.ts

@@ -25,6 +25,7 @@ export * from './pagination'
 export * from './panel'
 export * from './popover'
 export * from './portal'
+export * from './progress'
 export * from './radio'
 export * from './select'
 export * from './skeleton'
@@ -36,6 +37,7 @@ export * from './t'
 export * from './toast'
 export * from './tooltip'
 export * from './table'
+export * from './tabs'
 export * from './tag'
 export * from './textarea'
 export * from './theme'

package/src/progress/index.ts

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

package/src/progress/progress.tsx

@@ -0,0 +1,54 @@
+import React, { useEffect, useState } from 'react'
+
+import { Box } from '../box'
+import { styled, useStyleConfig, vui } from '../core'
+import { cs } from '../utils'
+import { ProgressProps } from './progress.types'
+
+export const ProgressBase = styled.divBox`
+  display: flex;
+  width: 100%;
+`
+
+const minPercentageDisplay = 3
+
+/** Indicates a process progress. */
+export const Progress = vui<'div', ProgressProps>((props, ref) => {
+  const { className, size = 'md', value = 0, max = 100, showPercentage, ...rest } = props
+
+  const [width, setWidth] = useState(0)
+
+  const styles = useStyleConfig('Progress', props)
+
+  useEffect(() => {
+    const w = !value ? 0 : Math.ceil((value / max) * 100)
+    setWidth(w > 100 ? 100 : w)
+  }, [value, max])
+
+  return (
+    <ProgressBase
+      className={cs('vui-progress', className)}
+      ref={ref}
+      {...styles.container}
+      {...rest}
+      bg="grey.10"
+      borderRadius="sm"
+      h={1}
+    >
+      <Box
+        bg="prussian.80"
+        borderRadius="sm"
+        position="relative"
+        textAlign="right"
+        transition="width 0.4s ease-in-out;"
+        w={`${width}%`}
+      >
+        {showPercentage && value >= minPercentageDisplay && (
+          <Box {...styles.percentage} position="absolute" right="0">{`${width}%`}</Box>
+        )}
+      </Box>
+    </ProgressBase>
+  )
+})
+
+export default Progress

package/src/progress/progress.types.ts

@@ -0,0 +1,9 @@
+import { SystemProps } from '../system'
+import { ThemingProps } from '../theme'
+
+export type ProgressProps = SystemProps &
+  ThemingProps<'Progress'> & {
+    value?: number
+    max?: number
+    showPercentage?: boolean
+  }

package/src/progress/theme.ts

@@ -0,0 +1,53 @@
+const baseStyle = {}
+
+const defaultProps = {
+  size: 'md'
+}
+
+const sizes = {
+  sm: {
+    container: {
+      minH: '4px'
+    },
+    percentage: {
+      fontSize: '80%',
+      top: '-16px'
+    }
+  },
+  md: {
+    container: {
+      minH: '8px'
+    },
+    percentage: {
+      fontSize: '100%',
+      top: '-20px'
+    }
+  },
+  lg: {
+    container: {
+      minH: '12px'
+    },
+    percentage: {
+      fontSize: '110%',
+      top: '-22px'
+    }
+  },
+  xl: {
+    container: {
+      minH: '16px'
+    },
+    percentage: {
+      fontSize: '120%',
+      top: '-24px'
+    }
+  }
+}
+
+const variants = {}
+
+export default {
+  baseStyle,
+  defaultProps,
+  sizes,
+  variants
+}

package/src/tabs/index.ts

@@ -0,0 +1,4 @@
+export * from './tabs'
+export * from './tab'
+export { default } from './tabs'
+export * from './tabs.types'

package/src/tabs/tab.tsx

@@ -0,0 +1,23 @@
+import React from 'react'
+
+import { styled, vui } from '../core'
+import { cs } from '../utils'
+import { TabProps } from './tabs.types'
+
+export const TabBase = styled.divBox`
+  width: 100%;
+`
+
+/**
+ * Implements a Tab component
+ */
+export const Tab = vui<'div', TabProps>((props, ref) => {
+  const { children, className } = props
+  return (
+    <TabBase className={cs('vui-tab', className)} ref={ref}>
+      {children}
+    </TabBase>
+  )
+})
+
+export default Tab

package/src/tabs/tabs.tsx

@@ -0,0 +1,88 @@
+import React, { ReactElement, useEffect } from 'react'
+
+import { styled, useStyleConfig, vui } from '../core'
+import { P } from '../p'
+import { Panel } from '../panel'
+import { cs } from '../utils'
+import Tab from './tab'
+import { TabProps, TabsProps } from './tabs.types'
+import TabsNavBar from './tabsNavBar'
+import { useTabsState } from './useTabsState'
+
+export const TabsBase = styled.divBox<TabsProps>`
+  width: 100%;
+`
+
+/**
+ * Implements Tabs navigation to switch between views.
+ */
+export const Tabs = vui<'div', TabsProps>((props, ref) => {
+  const { activeTabId, children, className, size, withPanel, onTabClick, ...rest } = props
+  const styles = useStyleConfig('Tabs', props)
+  const { tabs, setTabs, activeTabIndex, setActiveTabIndex, animationDirection, setAnimationDirection } = useTabsState(
+    'fadeIn',
+    activeTabId
+  )
+
+  useEffect(() => {
+    const t: TabProps[] = []
+    if (children) {
+      ;(children as ReactElement[]).forEach((child: ReactElement<TabProps>, index: number) => {
+        if (child?.props?.title) {
+          t.push({
+            id: index,
+            title: child.props.title,
+            children: child.props.children,
+            disabled: child.props.disabled,
+            onClick: child.props.onClick
+          })
+        }
+      })
+    }
+    setTabs(t)
+    if (activeTabId !== undefined && tabs?.[activeTabId]) {
+      setActiveTabIndex(activeTabId)
+    }
+  }, [children, activeTabId])
+
+  const onNavItemClick = (id: number) => {
+    setAnimationDirection(id < activeTabIndex ? 'fadeLeft' : 'fadeRight')
+    setActiveTabIndex(id)
+    onTabClick?.(id)
+    tabs.find(t => t.id === id)?.onClick?.()
+  }
+
+  const activeTab = tabs?.[activeTabIndex]
+
+  return (
+    <TabsBase className={cs('vui-tabs', className)} ref={ref} {...styles.container} {...rest}>
+      {!!tabs?.length && (
+        <TabsNavBar
+          activeNavItem={activeTabIndex}
+          animationDirection={animationDirection}
+          onNavItemClick={onNavItemClick}
+          size={size}
+          tabs={tabs}
+          withPanel={withPanel}
+        />
+      )}
+      {tabs?.length ? (
+        withPanel ? (
+          <Panel display="block" variant="outlined" w="100%">
+            <Tab onClick={activeTab?.onClick} title={activeTab?.title}>
+              {!activeTab?.disabled && activeTab?.children}
+            </Tab>
+          </Panel>
+        ) : (
+          <Tab onClick={activeTab?.onClick} title={activeTab?.title}>
+            {!activeTab?.disabled && activeTab?.children}
+          </Tab>
+        )
+      ) : (
+        <P p={2}>Please specify Tabs.</P>
+      )}
+    </TabsBase>
+  )
+})
+
+export default Tabs

package/src/tabs/tabs.types.ts

@@ -0,0 +1,34 @@
+import { ReactNode } from 'react'
+
+import { SystemProps } from '../system'
+import { ThemingProps } from '../theme'
+
+export type AnimationDirection = 'fadeLeft' | 'fadeRight' | 'fadeIn'
+
+export type TabsSize = 'md' | 'sm' | 'lg' | 'xl'
+
+export type TabsProps = SystemProps &
+  ThemingProps<'Tabs'> & {
+    activeTabId?: number
+    children?: ReactNode | ReactNode[]
+    /** Wraps up the tab content with an outlined panel. */
+    withPanel?: boolean
+    onTabClick?: (id: number) => void
+  }
+
+export type TabProps = SystemProps & {
+  id?: number
+  title: ReactNode
+  children?: ReactNode
+  disabled?: boolean
+  onClick?: () => void
+}
+
+export type TabNavBarProps = {
+  tabs: TabProps[]
+  onNavItemClick: (id: number) => void
+  activeNavItem?: number
+  animationDirection?: AnimationDirection
+  size?: TabsSize
+  withPanel?: boolean
+}

package/src/tabs/tabsNavBar.tsx

@@ -0,0 +1,53 @@
+import React from 'react'
+
+import Box from '../box'
+import { vui } from '../core'
+import { List, ListItem } from '../list'
+import { cs } from '../utils'
+import { TabNavBarProps } from './tabs.types'
+
+export const TabsNavBar = vui<'div', TabNavBarProps>((props, ref) => {
+  const { tabs, onNavItemClick, activeNavItem, animationDirection, size, withPanel } = props
+
+  return (
+    <List
+      borderBottom={withPanel ? 'none' : '1px solid grey.40'}
+      className={cs('vui-tabsNavBar')}
+      display="flex"
+      isInteractive
+      mb={withPanel ? 0 : 2}
+      ml={withPanel ? 1 : 0}
+      ref={ref}
+      size={size}
+      w={1}
+    >
+      {tabs?.map?.(tab => (
+        <ListItem
+          className={`vui-tabsNavBarItem vui-tabsNavBarItem-${tab?.id}`}
+          disabled={tab.disabled}
+          display="inline-flex"
+          key={tab.id}
+          onClick={() => tab?.id !== undefined && onNavItemClick(tab.id)}
+          position="relative"
+        >
+          {tab.title}
+          {!tab.disabled && tab.id === activeNavItem && (
+            <Box
+              animation={animationDirection}
+              bg="prussian.80"
+              bottom={withPanel ? 0 : '-1px'}
+              h={`${size === 'sm' ? 2 : 4}px`}
+              left={0}
+              position="absolute"
+              w={1}
+            >
+              &nbsp;
+            </Box>
+          )}
+        </ListItem>
+      ))}
+    </List>
+  )
+})
+
+export default TabsNavBar

package/src/tabs/theme.ts

@@ -0,0 +1,22 @@
+const baseStyle = {}
+
+const defaultProps = {}
+
+const parts = ['container', 'tabsNavBar', 'tab']
+
+const sizes = {
+  sm: {},
+  md: {},
+  lg: {},
+  xl: {}
+}
+
+const variants = {}
+
+export default {
+  baseStyle,
+  defaultProps,
+  parts,
+  sizes,
+  variants
+}

package/src/tabs/useTabsState.ts

@@ -0,0 +1,11 @@
+import { useState } from 'react'
+
+import { AnimationDirection, TabProps } from './tabs.types'
+
+export const useTabsState = (initialAnimation: AnimationDirection, activeTabId?: number) => {
+  const [tabs, setTabs] = useState<TabProps[]>([])
+  const [activeTabIndex, setActiveTabIndex] = useState<number>(activeTabId ?? 0)
+  const [animationDirection, setAnimationDirection] = useState<AnimationDirection>(initialAnimation)
+
+  return { tabs, setTabs, activeTabIndex, setActiveTabIndex, animationDirection, setAnimationDirection }
+}

package/src/theme/components.ts

@@ -21,6 +21,7 @@ import P from '../p/theme'
 import Pagination from '../pagination/theme'
 import Panel from '../panel/theme'
 import Popover from '../popover/theme'
+import Progress from '../progress/theme'
 import Radio from '../radio/theme'
 import Select from '../select/theme'
 import Skeleton from '../skeleton/theme'
@@ -28,6 +29,7 @@ import Spinner from '../spinner/theme'
 import Switch from '../switch/theme'
 import T from '../t/theme'
 import Table from '../table/theme'
+import Tabs from '../tabs/theme'
 import Tag from '../tag/theme'
 import Textarea from '../textarea/theme'
 
@@ -54,6 +56,7 @@ export default {
   P,
   Pagination,
   Panel,
+  Progress,
   Popover,
   Radio,
   Select,
@@ -62,6 +65,7 @@ export default {
   Switch,
   T,
   Table,
+  Tabs,
   Tag,
   Textarea
 }

package/src/tooltip/tooltip.tsx

@@ -12,7 +12,7 @@ import { TooltipProps } from './tooltip.types'
  *
  * */
 export const Tooltip = (props: TooltipProps) => {
-  const { children, text = 'demo', placement = 'top', isAnimated = false } = props
+  const { children, maxWidth = '400px', text = 'demo', placement = 'top', isAnimated = false } = props
 
   return (
     <Popover placement={placement} trigger="mouseenter">
@@ -24,6 +24,7 @@ export const Tooltip = (props: TooltipProps) => {
         bg={color}
         color="white"
         m={1}
+        maxW={maxWidth}
         p={1}
         pl={2}
         pr={2}

package/src/tooltip/tooltip.types.ts

@@ -7,5 +7,7 @@ export type TooltipProps = {
   placement?: 'top' | 'left' | 'bottom' | 'right'
   /** Displays the tooltip with animation, without the arrow pointer. */
   isAnimated?: boolean
+  /** Sets maximum width to the tooltip body. */
+  maxWidth?: string
   children?: ReactNode
 }