@veracity/vui 1.0.0 → 1.1.0

package/src/system/typography.ts

@@ -11,96 +11,96 @@ export type LineHeightGetter = VariantsType<unknown>
 
 type FontFamilyProp = SystemProp<FontGetter, VuiTheme>
 export type FontFamilyProps = {
-	fontFamily?: FontFamilyProp
+  fontFamily?: FontFamilyProp
 }
 
 type FontSizeProp = SystemProp<FontSizeGetter, VuiTheme>
 export type FontSizeProps = {
-	fontSize?: FontSizeProp
+  fontSize?: FontSizeProp
 }
 
 type FontStyleProp = SystemProp<Property.FontStyle, VuiTheme>
 export type FontStyleProps = {
-	fontStyle?: FontStyleProp
+  fontStyle?: FontStyleProp
 }
 
 type FontWeightProp = SystemProp<FontWeightGetter, VuiTheme>
 export type FontWeightProps = {
-	fontWeight?: FontWeightProp
+  fontWeight?: FontWeightProp
 }
 
 type LineHeightProp = SystemProp<LineHeightGetter, VuiTheme>
 export type LineHeightProps = {
-	lineHeight?: LineHeightProp
+  lineHeight?: LineHeightProp
 }
 
 type ColorProp = ColorGetter
 export type ColorProps = {
-	color?: ColorProp
-	disabledColor?: ColorProp
-	hoverColor?: ColorProp
-	placeholderColor?: ColorProp
+  color?: ColorProp
+  disabledColor?: ColorProp
+  hoverColor?: ColorProp
+  placeholderColor?: ColorProp
 }
 
 type TextTransformProp = SystemProp<Property.TextTransform, VuiTheme>
 export type TextTransformProps = {
-	textTransform?: TextTransformProp
+  textTransform?: TextTransformProp
 }
 
 type TextDecoration = Globals | 'overline' | 'underline' | 'line-through' | 'none'
 type TextDecorationProp = SystemProp<TextDecoration, VuiTheme>
 export type TextDecorationProps = {
-	hoverTextDecoration?: TextDecorationProp
-	textDecoration?: TextDecorationProp
+  hoverTextDecoration?: TextDecorationProp
+  textDecoration?: TextDecorationProp
 }
 
 type TextAlignProp = SystemProp<Property.TextAlign, VuiTheme>
 export type TextAlignProps = {
-	textAlign?: TextAlignProp
+  textAlign?: TextAlignProp
 }
 
 type VerticalAlignProp = SystemProp<Property.VerticalAlign, VuiTheme>
 export type VerticalAlignProps = {
-	verticalAlign?: VerticalAlignProp
+  verticalAlign?: VerticalAlignProp
 }
 
 type LetterSpacingProp = SystemProp<Property.LetterSpacing, VuiTheme>
 export type LetterSpacingProps = {
-	letterSpacing?: LetterSpacingProp
+  letterSpacing?: LetterSpacingProp
 }
 
 type WhiteSpaceProp = SystemProp<Property.WhiteSpace, VuiTheme>
 export type WhiteSpaceProps = {
-	whiteSpace?: WhiteSpaceProp
+  whiteSpace?: WhiteSpaceProp
 }
 
 type TextOverflowProp = SystemProp<Property.TextOverflow, VuiTheme>
 export type TextOverflowProps = {
-	textOverflow?: TextOverflowProp
+  textOverflow?: TextOverflowProp
 }
 
 type ListStyleTypeProp = SystemProp<Property.ListStyleType, VuiTheme>
 export type ListStyleTypeProps = {
-	listStyleType?: ListStyleTypeProp
+  listStyleType?: ListStyleTypeProp
 }
 
 type ListStylePositionProp = SystemProp<Property.ListStylePosition, VuiTheme>
 export type ListStylePositionProps = {
-	listStylePosition?: ListStylePositionProp
+  listStylePosition?: ListStylePositionProp
 }
 
 export type TypographyProps = FontFamilyProps &
-	FontSizeProps &
-	FontStyleProps &
-	FontWeightProps &
-	LineHeightProps &
-	ColorProps &
-	TextTransformProps &
-	TextDecorationProps &
-	TextAlignProps &
-	VerticalAlignProps &
-	LetterSpacingProps &
-	WhiteSpaceProps &
-	TextOverflowProps &
-	ListStyleTypeProps &
-	ListStylePositionProps
+  FontSizeProps &
+  FontStyleProps &
+  FontWeightProps &
+  LineHeightProps &
+  ColorProps &
+  TextTransformProps &
+  TextDecorationProps &
+  TextAlignProps &
+  VerticalAlignProps &
+  LetterSpacingProps &
+  WhiteSpaceProps &
+  TextOverflowProps &
+  ListStyleTypeProps &
+  ListStylePositionProps

package/src/t/t.tsx

@@ -5,30 +5,28 @@ import { cs, filterUndefined } from '../utils'
 import { TProps } from './t.types'
 
 export const TBase = styled.spanBox`
-	transition-duration: fast;
+  transition-duration: fast;
 `
 
 /** Displays given text and allows easy styling. */
 export const T = vui<'span', TProps>((props, ref) => {
-	const { align, casing, centerV, children, className, decoration, text, weight, ...rest } = omitThemingProps(props)
-	const styles = useStyleConfig('T', props)
+  const { align, casing, centerV, children, className, decoration, text, weight, ...rest } = omitThemingProps(props)
+  const styles = useStyleConfig('T', props)
 
-	const aliasedProps = filterUndefined({
-		alignItems: centerV ? 'center' : undefined,
-		display: centerV ? 'inline-flex' : undefined,
-		fontWeight: weight,
-		textAlign: align,
-		textDecoration: decoration,
-		textTransform: casing
-	})
+  const aliasedProps = filterUndefined({
+    alignItems: centerV ? 'center' : undefined,
+    display: centerV ? 'inline-flex' : undefined,
+    fontWeight: weight,
+    textAlign: align,
+    textDecoration: decoration,
+    textTransform: casing
+  })
 
-	return (
-		<TBase className={cs('vui-t', className)} ref={ref} {...styles} {...aliasedProps} {...rest}>
-			{children ?? text}
-		</TBase>
-	)
+  return (
+    <TBase className={cs('vui-t', className)} ref={ref} {...styles} {...aliasedProps} {...rest}>
+      {children ?? text}
+    </TBase>
+  )
 })
 
-T.displayName = 'T'
-
 export default T

package/src/t/t.types.ts

@@ -4,17 +4,17 @@ import { SystemProps, TypographyProps } from '../system'
 import { ThemingProps } from '../theme'
 
 export type TProps = SystemProps &
-	ThemingProps<'T'> & {
-		/** Alias for textAlign prop. @deprecated */
-		align?: TypographyProps['textAlign']
-		/** Alias for textTransform prop. @deprecated */
-		casing?: TypographyProps['textTransform']
-		/** Displays component as inline-flex and centers content veritcally. */
-		centerV?: boolean
-		/** Alias for textTransform prop. @deprecated */
-		decoration?: TypographyProps['textDecoration']
-		/** Displays given text if no children are provided. */
-		text?: ReactText
-		/** Alias for fontWeight prop. @deprecated */
-		weight?: TypographyProps['fontWeight']
-	}
+  ThemingProps<'T'> & {
+    /** Alias for textAlign prop. @deprecated */
+    align?: TypographyProps['textAlign']
+    /** Alias for textTransform prop. @deprecated */
+    casing?: TypographyProps['textTransform']
+    /** Displays component as inline-flex and centers content veritcally. */
+    centerV?: boolean
+    /** Alias for textTransform prop. @deprecated */
+    decoration?: TypographyProps['textDecoration']
+    /** Displays given text if no children are provided. */
+    text?: ReactText
+    /** Alias for fontWeight prop. @deprecated */
+    weight?: TypographyProps['fontWeight']
+  }

package/src/t/theme.ts

@@ -1,29 +1,29 @@
 const baseStyle = {}
 
 const defaultProps = {
-	size: 'md'
+  size: 'md'
 }
 
 const sizes = {
-	xs: {
-		fontSize: 'xs'
-	},
-	sm: {
-		fontSize: 'sm'
-	},
-	md: {
-		fontSize: 'md'
-	},
-	lg: {
-		fontSize: 'lg'
-	}
+  xs: {
+    fontSize: 'xs'
+  },
+  sm: {
+    fontSize: 'sm'
+  },
+  md: {
+    fontSize: 'md'
+  },
+  lg: {
+    fontSize: 'lg'
+  }
 }
 
 const variants = {}
 
 export default {
-	baseStyle,
-	defaultProps,
-	sizes,
-	variants
+  baseStyle,
+  defaultProps,
+  sizes,
+  variants
 }

package/src/table/table.tsx

@@ -17,100 +17,98 @@ import useTable from './useTable'
  * Displays a Table with support for columns, rows and sort.
  */
 export const TableBase = styled.tableBox<TableProps>`
-	border-collapse: separate;
-	border-spacing: 0px;
-	display: table;
-	position: relative;
-	width: 100%;
+  border-collapse: separate;
+  border-spacing: 0px;
+  display: table;
+  position: relative;
+  width: 100%;
 
-	${p =>
-		p.stickyColumn &&
-		css`
-			thead tr:last-of-type th:first-of-type,
-			td:first-of-type {
-				left: 0;
-				position: sticky;
-				z-index: 2;
+  ${p =>
+    p.stickyColumn &&
+    css`
+      thead tr:last-of-type th:first-of-type,
+      td:first-of-type {
+        left: 0;
+        position: sticky;
+        z-index: 2;
 
-				::after {
-					bottom: -1px;
-					box-shadow: inset 10px 0 8px -8px #00000026;
-					content: '';
-					pointer-events: none;
-					position: absolute;
-					right: 0;
-					top: 0;
-					transform: translate(100%);
-					transition: box-shadow 0.3s;
-					width: 10px;
-				}
-			}
+        ::after {
+          bottom: -1px;
+          box-shadow: inset 10px 0 8px -8px #00000026;
+          content: '';
+          pointer-events: none;
+          position: absolute;
+          right: 0;
+          top: 0;
+          transform: translate(100%);
+          transition: box-shadow 0.3s;
+          width: 10px;
+        }
+      }
 
-			thead tr:last-of-type th:first-of-type:not([data-active='true']):not([data-disabled='true']),
-			td:first-of-type {
-				background-color: white;
-			}
-		`}
+      thead tr:last-of-type th:first-of-type:not([data-active='true']):not([data-disabled='true']),
+      td:first-of-type {
+        background-color: white;
+      }
+    `}
 `
 
 /** Displays a Table with support for columns, rows and sort. */
 export const Table = vui<'table', TableProps>((props, ref) => {
-	const {
-		children,
-		className,
-		columns,
-		defaultSort,
-		onSortChange,
-		rows,
-		size,
-		sort: sortProp,
-		stickyColumn,
-		stickyHeader,
-		variant,
-		...rest
-	} = props
-	const styles = useStyleConfig('Table', props)
-	const tableProps = useTable({ defaultSort, onSortChange, sort: sortProp })
-	const { isControlled, sort } = tableProps
+  const {
+    children,
+    className,
+    columns,
+    defaultSort,
+    onSortChange,
+    rows,
+    size,
+    sort: sortProp,
+    stickyColumn,
+    stickyHeader,
+    variant,
+    ...rest
+  } = props
+  const styles = useStyleConfig('Table', props)
+  const tableProps = useTable({ defaultSort, onSortChange, sort: sortProp })
+  const { isControlled, sort } = tableProps
 
-	// Rows are sorted internally only in uncontrolled mode, that is when 'sort' prop is not provided.
-	const sortedRows = useMemo(
-		() => (!isControlled ? rows?.slice().sort(compareBy(sort.key, sort.order)) : rows),
-		[rows, sort, isControlled]
-	)
+  // Rows are sorted internally only in uncontrolled mode, that is when 'sort' prop is not provided.
+  const sortedRows = useMemo(
+    () => (!isControlled ? rows?.slice().sort(compareBy(sort.key, sort.order)) : rows),
+    [rows, sort, isControlled]
+  )
 
-	const context = { ...tableProps, columns, rows: sortedRows, size, stickyColumn, stickyHeader, variant }
+  const context = { ...tableProps, columns, rows: sortedRows, size, stickyColumn, stickyHeader, variant }
 
-	return (
-		<TableProvider value={context}>
-			<TableBase
-				className={cs('vui-table', className)}
-				ref={ref}
-				stickyColumn={stickyColumn}
-				{...styles.container}
-				{...rest}
-			>
-				{children ?? (
-					<>
-						<Thead />
-						<Tbody />
-					</>
-				)}
-			</TableBase>
-		</TableProvider>
-	)
+  return (
+    <TableProvider value={context}>
+      <TableBase
+        className={cs('vui-table', className)}
+        ref={ref}
+        stickyColumn={stickyColumn}
+        {...styles.container}
+        {...rest}
+      >
+        {children ?? (
+          <>
+            <Thead />
+            <Tbody />
+          </>
+        )}
+      </TableBase>
+    </TableProvider>
+  )
 }) as VuiComponent<'table', TableProps> & {
-	SortIcon: typeof TableSortIcon
-	Tbody: typeof Tbody
-	Td: typeof Td
-	Tfoot: typeof Tfoot
-	Th: typeof Th
-	Thead: typeof Thead
-	Tr: typeof Tr
+  SortIcon: typeof TableSortIcon
+  Tbody: typeof Tbody
+  Td: typeof Td
+  Tfoot: typeof Tfoot
+  Th: typeof Th
+  Thead: typeof Thead
+  Tr: typeof Tr
 }
 
-Table.displayName = 'Table'
-
 Table.SortIcon = TableSortIcon
 Table.Tbody = Tbody
 Table.Td = Td

package/src/table/table.types.ts

@@ -6,29 +6,29 @@ import { UseTableReturnType } from './useTable'
 import { UseTableProps } from './useTable.types'
 
 export type TableColumn<T = string> = SystemProps & {
-	/** Unique identifier of a column. */
-	field: T
-	/** Adds content and styling related to sort. */
-	isSortable?: boolean
-	/** Displays given text inside the element. */
-	title?: string
+  /** Unique identifier of a column. */
+  field: T
+  /** Adds content and styling related to sort. */
+  isSortable?: boolean
+  /** Displays given text inside the element. */
+  title?: string
 }
 
 export type TableContext = Pick<TableProps, 'columns' | 'rows' | 'size' | 'stickyColumn' | 'stickyHeader' | 'variant'> &
-	UseTableReturnType
+  UseTableReturnType
 
 export type TableProps = SystemProps &
-	UseTableProps &
-	ThemingProps<'Table'> & {
-		/** Data structure describing the columns. */
-		columns?: TableColumn[] | readonly TableColumn[]
-		/** Data structure describing the rows and their cells. */
-		rows?: any[]
-		/** First column will be sticky when scrolling horizontally. */
-		stickyColumn?: boolean
-		/** Table head will be sticky when scrolling vertically. */
-		stickyHeader?: boolean
-	}
+  UseTableProps &
+  ThemingProps<'Table'> & {
+    /** Data structure describing the columns. */
+    columns?: TableColumn[] | readonly TableColumn[]
+    /** Data structure describing the rows and their cells. */
+    rows?: any[]
+    /** First column will be sticky when scrolling horizontally. */
+    stickyColumn?: boolean
+    /** Table head will be sticky when scrolling vertically. */
+    stickyHeader?: boolean
+  }
 
 export type TbodyProps = SystemProps
 
@@ -37,21 +37,21 @@ export type TdProps = SystemProps
 export type TfootProps = SystemProps
 
 export type ThProps = SystemProps &
-	Partial<TableColumn> & {
-		/** Adds disabled styling. */
-		disabled?: boolean
-		/** Adds interactive styling. */
-		isInteractive?: boolean
-	}
+  Partial<TableColumn> & {
+    /** Adds disabled styling. */
+    disabled?: boolean
+    /** Adds interactive styling. */
+    isInteractive?: boolean
+  }
 
 export type TheadProps = SystemProps & {}
 
 export type TrProps = SystemProps & {
-	/** Adds selected styling. */
-	isSelected?: boolean
+  /** Adds selected styling. */
+  isSelected?: boolean
 }
 
 export type TableSortIconProps = Omit<IconProps, 'order'> & {
-	/** Sort order which controls the icon. */
-	order?: Sort['order']
+  /** Sort order which controls the icon. */
+  order?: Sort['order']
 }

package/src/table/tableSortIcon.tsx

@@ -8,27 +8,25 @@ import { TableSortIconProps } from './table.types'
 
 /** Displays a sort icon with given direction based on sort order. */
 export const TableSortIcon = vui<'svg', TableSortIconProps>((props, ref) => {
-	const { className, order, ...rest } = props
-	const styles = useStyleConfig('Table', useTableContext())
+  const { className, order, ...rest } = props
+  const styles = useStyleConfig('Table', useTableContext())
 
-	// Rotating 1 icon is works better than switching multiple
-	const rotate = order === 'asc' ? 180 : 0
-	const pathFill = order !== undefined ? ['blue.80', 'grey.40'] : 'grey.40'
+  // Rotating 1 icon is works better than switching multiple
+  const rotate = order === 'asc' ? 180 : 0
+  const pathFill = order !== undefined ? ['blue.80', 'grey.40'] : 'grey.40'
 
-	return (
-		<Icon
-			className={cs('vui-tableSortIcon', className)}
-			name="fadSortUp"
-			pathFill={pathFill}
-			ref={ref}
-			rotate={rotate}
-			size="xs"
-			{...styles.tableSortIcon}
-			{...rest}
-		/>
-	)
+  return (
+    <Icon
+      className={cs('vui-tableSortIcon', className)}
+      name="fadSortUp"
+      pathFill={pathFill}
+      ref={ref}
+      rotate={rotate}
+      size="xs"
+      {...styles.tableSortIcon}
+      {...rest}
+    />
+  )
 })
 
-TableSortIcon.displayName = 'TableSortIcon'
-
 export default TableSortIcon

package/src/table/tbody.tsx

@@ -8,43 +8,41 @@ import Td from './td'
 import Tr from './tr'
 
 export const TbodyBase = styled.tbodyBox`
-	tr {
-		:hover td {
-			background-color: grey.20;
-		}
-
-		&[data-selected='true']:hover td {
-			background-color: blue.20;
-		}
-
-		&[data-variant='striped'][data-selected='false']:nth-of-type(odd):not(:hover) td {
-			background-color: grey.10;
-		}
-	}
+  tr {
+    :hover td {
+      background-color: grey.20;
+    }
+
+    &[data-selected='true']:hover td {
+      background-color: blue.20;
+    }
+
+    &[data-variant='striped'][data-selected='false']:nth-of-type(odd):not(:hover) td {
+      background-color: grey.10;
+    }
+  }
 `
 
 /** Displays Table body with built-in support for rows. */
 export const Tbody = vui<'tbody', TbodyProps>((props, ref) => {
-	const { children, className, ...rest } = props
-	const { columns, rows } = useTableContext() ?? {}
-	const styles = useStyleConfig('Table', useTableContext())
-
-	return (
-		<TbodyBase className={cs('vui-tbody', className)} ref={ref} {...styles.tbody} {...rest}>
-			{children ??
-				rows?.map((row, index) => (
-					<Tr key={index}>
-						{columns?.map(column => (
-							<Td key={column.field} {...column}>
-								{row[column.field]}
-							</Td>
-						))}
-					</Tr>
-				))}
-		</TbodyBase>
-	)
+  const { children, className, ...rest } = props
+  const { columns, rows } = useTableContext() ?? {}
+  const styles = useStyleConfig('Table', useTableContext())
+
+  return (
+    <TbodyBase className={cs('vui-tbody', className)} ref={ref} {...styles.tbody} {...rest}>
+      {children ??
+        rows?.map((row, index) => (
+          <Tr key={index}>
+            {columns?.map(column => (
+              <Td key={column.field} {...column}>
+                {row[column.field]}
+              </Td>
+            ))}
+          </Tr>
+        ))}
+    </TbodyBase>
+  )
 })
 
-Tbody.displayName = 'Tbody'
-
 export default Tbody

package/src/table/td.tsx

@@ -6,17 +6,15 @@ import { useTableContext } from './context'
 import { TdProps } from './table.types'
 
 export const TdBase = styled.tdBox`
-	transition-duration: fast;
+  transition-duration: fast;
 `
 
 /** Displays a cell inside Table row. */
 export const Td = vui<'td', TdProps>((props, ref) => {
-	const { className, ...rest } = props
-	const styles = useStyleConfig('Table', useTableContext())
+  const { className, ...rest } = props
+  const styles = useStyleConfig('Table', useTableContext())
 
-	return <TdBase className={cs('vui-td', className)} px={2} ref={ref} {...styles.td} {...rest} />
+  return <TdBase className={cs('vui-td', className)} px={2} ref={ref} {...styles.td} {...rest} />
 })
 
-Td.displayName = 'Td'
-
 export default Td