@veracity/vui 1.0.0 → 1.1.0

package/src/p/p.types.ts

@@ -2,15 +2,15 @@ import { SystemProps, TypographyProps } from '../system'
 import { ThemingProps } from '../theme'
 
 export type PProps = SystemProps &
-	ThemingProps<'P'> & {
-		/** Alias for textAlign prop. @deprecated */
-		align?: TypographyProps['textAlign']
-		/** Alias for textTransform prop. @deprecated */
-		casing?: TypographyProps['textTransform']
-		/** Alias for textDecoration prop. @deprecated */
-		decoration?: TypographyProps['textDecoration']
-		/** Displays given text if no children are provided. */
-		text?: number | string
-		/** Alias for fontWeight prop. @deprecated */
-		weight?: TypographyProps['fontWeight']
-	}
+  ThemingProps<'P'> & {
+    /** Alias for textAlign prop. @deprecated */
+    align?: TypographyProps['textAlign']
+    /** Alias for textTransform prop. @deprecated */
+    casing?: TypographyProps['textTransform']
+    /** Alias for textDecoration prop. @deprecated */
+    decoration?: TypographyProps['textDecoration']
+    /** Displays given text if no children are provided. */
+    text?: number | string
+    /** Alias for fontWeight prop. @deprecated */
+    weight?: TypographyProps['fontWeight']
+  }

package/src/p/theme.ts

@@ -1,37 +1,37 @@
 const baseStyle = {}
 
 const defaultProps = {
-	size: 'md'
+  size: 'md'
 }
 
 const sizes = {
-	sm: {
-		fontSize: 'sm',
-		lineHeight: '18px'
-	},
-	md: {
-		fontSize: 'md',
-		lineHeight: '24px'
-	},
-	lg: {
-		fontSize: 'lg',
-		lineHeight: '28px'
-	},
-	xl: {
-		fontSize: '20px',
-		lineHeight: '30px'
-	},
-	xxl: {
-		fontSize: '24px',
-		lineHeight: '36px'
-	}
+  sm: {
+    fontSize: 'sm',
+    lineHeight: '18px'
+  },
+  md: {
+    fontSize: 'md',
+    lineHeight: '24px'
+  },
+  lg: {
+    fontSize: 'lg',
+    lineHeight: '28px'
+  },
+  xl: {
+    fontSize: '20px',
+    lineHeight: '30px'
+  },
+  xxl: {
+    fontSize: '24px',
+    lineHeight: '36px'
+  }
 }
 
 const variants = {}
 
 export default {
-	baseStyle,
-	defaultProps,
-	sizes,
-	variants
+  baseStyle,
+  defaultProps,
+  sizes,
+  variants
 }

package/src/pagination/helpers.ts

@@ -1,52 +1,52 @@
 import { PaginationItem } from './pagination.types'
 
 const range = (start: number, end: number) => {
-	const length = end - start + 1
-	return Array.from({ length }, (_, i) => start + i)
+  const length = end - start + 1
+  return Array.from({ length }, (_, i) => start + i)
 }
 
 /** Returns an array describing pagination items, like page buttons, prev/next arrows or ellipsis. */
 export function getPaginationItems(page: number, pageCount: number) {
-	const boundaryCount = 1
-	const siblingCount = 1
-
-	const startPages = range(1, Math.min(boundaryCount, pageCount))
-	const endPages = range(Math.max(pageCount - boundaryCount + 1, boundaryCount + 1), pageCount)
-
-	const siblingsStart = Math.max(
-		Math.min(page - siblingCount, pageCount - boundaryCount - siblingCount * 2 - 1),
-		boundaryCount + 2
-	)
-
-	const siblingsEnd = Math.min(
-		Math.max(page + siblingCount, boundaryCount + siblingCount * 2 + 2),
-		endPages.length > 0 ? endPages[0] - 2 : pageCount - 1
-	)
-
-	const items = [
-		'previous',
-		...startPages,
-
-		// Start ellipsis
-		...(siblingsStart > boundaryCount + 2
-			? ['ellipsisStart']
-			: boundaryCount + 1 < pageCount - boundaryCount
-			? [boundaryCount + 1]
-			: []),
-
-		// Sibling pages
-		...range(siblingsStart, siblingsEnd),
-
-		// End ellipsis
-		...(siblingsEnd < pageCount - boundaryCount - 1
-			? ['ellipsisEnd']
-			: pageCount - boundaryCount > boundaryCount
-			? [pageCount - boundaryCount]
-			: []),
-
-		...endPages,
-		'next'
-	] as PaginationItem[]
-
-	return items
+  const boundaryCount = 1
+  const siblingCount = 1
+
+  const startPages = range(1, Math.min(boundaryCount, pageCount))
+  const endPages = range(Math.max(pageCount - boundaryCount + 1, boundaryCount + 1), pageCount)
+
+  const siblingsStart = Math.max(
+    Math.min(page - siblingCount, pageCount - boundaryCount - siblingCount * 2 - 1),
+    boundaryCount + 2
+  )
+
+  const siblingsEnd = Math.min(
+    Math.max(page + siblingCount, boundaryCount + siblingCount * 2 + 2),
+    endPages.length > 0 ? endPages[0] - 2 : pageCount - 1
+  )
+
+  const items = [
+    'previous',
+    ...startPages,
+
+    // Start ellipsis
+    ...(siblingsStart > boundaryCount + 2
+      ? ['ellipsisStart']
+      : boundaryCount + 1 < pageCount - boundaryCount
+      ? [boundaryCount + 1]
+      : []),
+
+    // Sibling pages
+    ...range(siblingsStart, siblingsEnd),
+
+    // End ellipsis
+    ...(siblingsEnd < pageCount - boundaryCount - 1
+      ? ['ellipsisEnd']
+      : pageCount - boundaryCount > boundaryCount
+      ? [pageCount - boundaryCount]
+      : []),
+
+    ...endPages,
+    'next'
+  ] as PaginationItem[]
+
+  return items
 }

package/src/pagination/pagination.tsx

@@ -18,68 +18,66 @@ import usePagination from './usePagination'
  * GoToPage component is shown automatically above 10 pages.
  */
 export const Pagination = vui<'div', PaginationProps>((props, ref) => {
-	const {
-		children,
-		className,
-		count,
-		defaultPage,
-		goToPage,
-		items: itemsProp = [],
-		navigation,
-		onPageChange,
-		page: pageProp,
-		pageSize,
-		results,
-		size,
-		variant,
-		...rest
-	} = props
-	const styles = useStyleConfig('Pagination', props)
-	const { items = itemsProp, ...paginationProps } = usePagination({
-		count,
-		defaultPage,
-		onPageChange,
-		page: pageProp,
-		pageSize
-	})
+  const {
+    children,
+    className,
+    count,
+    defaultPage,
+    goToPage,
+    items: itemsProp = [],
+    navigation,
+    onPageChange,
+    page: pageProp,
+    pageSize,
+    results,
+    size,
+    variant,
+    ...rest
+  } = props
+  const styles = useStyleConfig('Pagination', props)
+  const { items = itemsProp, ...paginationProps } = usePagination({
+    count,
+    defaultPage,
+    onPageChange,
+    page: pageProp,
+    pageSize
+  })
 
-	const context = { ...paginationProps, items, size, variant }
+  const context = { ...paginationProps, items, size, variant }
 
-	return (
-		<PaginationProvider value={context}>
-			<Box
-				centerV
-				className={cs('vui-pagination', className)}
-				gap={3}
-				ref={ref}
-				w={1}
-				wrap
-				{...styles.container}
-				{...rest}
-			>
-				{runIfFn(children, context) ?? (
-					<>
-						{isJsx(results) ? results : <PaginationResults />}
+  return (
+    <PaginationProvider value={context}>
+      <Box
+        centerV
+        className={cs('vui-pagination', className)}
+        gap={3}
+        ref={ref}
+        w={1}
+        wrap
+        {...styles.container}
+        {...rest}
+      >
+        {runIfFn(children, context) ?? (
+          <>
+            {isJsx(results) ? results : <PaginationResults />}
 
-						{isJsx(navigation) ? navigation : <PaginationNavigation ml="auto" />}
+            {isJsx(navigation) ? navigation : <PaginationNavigation ml="auto" />}
 
-						{isJsx(goToPage) ? goToPage : paginationProps.pageCount > 10 && <PaginationGoToPage />}
-					</>
-				)}
-			</Box>
-		</PaginationProvider>
-	)
+            {isJsx(goToPage) ? goToPage : paginationProps.pageCount > 10 && <PaginationGoToPage />}
+          </>
+        )}
+      </Box>
+    </PaginationProvider>
+  )
 }) as VuiComponent<'div', PaginationProps> & {
-	Button: typeof PaginationButton
-	Ellipsis: typeof PaginationEllipsis
-	GoToPage: typeof PaginationGoToPage
-	Navigation: typeof PaginationNavigation
-	PrevNext: typeof PaginationPrevNext
-	Results: typeof PaginationResults
+  Button: typeof PaginationButton
+  Ellipsis: typeof PaginationEllipsis
+  GoToPage: typeof PaginationGoToPage
+  Navigation: typeof PaginationNavigation
+  PrevNext: typeof PaginationPrevNext
+  Results: typeof PaginationResults
 }
 
-Pagination.displayName = 'Notification'
-
 Pagination.Button = PaginationButton
 Pagination.Ellipsis = PaginationEllipsis
 Pagination.GoToPage = PaginationGoToPage

package/src/pagination/pagination.types.ts

@@ -6,10 +6,10 @@ import { UsePaginationReturnType } from './usePagination'
 import { UsePaginationProps } from './usePagination.types'
 
 export type PaginationButtonProps = ButtonProps & {
-	/** Applies different styling to a button of the current page. */
-	isActive?: boolean
-	/** Number of the page, which this button represents. */
-	page: number
+  /** Applies different styling to a button of the current page. */
+  isActive?: boolean
+  /** Number of the page, which this button represents. */
+  page: number
 }
 
 export type PaginationContext = UsePaginationReturnType & ThemingProps<'Pagination'>
@@ -17,21 +17,21 @@ export type PaginationContext = UsePaginationReturnType & ThemingProps<'Paginati
 export type PaginationItem = 'ellipsisEnd' | 'ellipsisStart' | 'next' | 'previous' | number
 
 export type PaginationPrevNextProps = ButtonProps & {
-	/** Defines the logic of previous and next buttons. */
-	direction: 'previous' | 'next'
+  /** Defines the logic of previous and next buttons. */
+  direction: 'previous' | 'next'
 }
 
 export type PaginationProps = Omit<BoxProps, 'size' | 'variant'> &
-	ThemingProps<'Pagination'> &
-	UsePaginationProps & {
-		/** Children provide render props using PaginationContext data. */
-		children?: RenderProps<PaginationContext>
-		/** Socket for page input on the right side. */
-		goToPage?: JSX.Element
-		/** Array describing pagination items, like page buttons, prev/next arrows or ellipsis. */
-		items?: PaginationItem[]
-		/** Socket for the main navigation elements in the middle. */
-		navigation?: JSX.Element
-		/** Socket for numbers data on the left side. */
-		results?: JSX.Element
-	}
+  ThemingProps<'Pagination'> &
+  UsePaginationProps & {
+    /** Children provide render props using PaginationContext data. */
+    children?: RenderProps<PaginationContext>
+    /** Socket for page input on the right side. */
+    goToPage?: JSX.Element
+    /** Array describing pagination items, like page buttons, prev/next arrows or ellipsis. */
+    items?: PaginationItem[]
+    /** Socket for the main navigation elements in the middle. */
+    navigation?: JSX.Element
+    /** Socket for numbers data on the left side. */
+    results?: JSX.Element
+  }

package/src/pagination/paginationButton.tsx

@@ -8,36 +8,34 @@ import { PaginationButtonProps } from './pagination.types'
 
 /** Displays a page navigation button within the Pagination. */
 export const PaginationButton = vui<'button', PaginationButtonProps>((props, ref) => {
-	const { className, isActive: isActiveProp, page: pageProp, ...rest } = props
-	const { onPageChange, page } = usePaginationContext()
-	const styles = useStyleConfig('Pagination', usePaginationContext())
+  const { className, isActive: isActiveProp, page: pageProp, ...rest } = props
+  const { onPageChange, page } = usePaginationContext()
+  const styles = useStyleConfig('Pagination', usePaginationContext())
 
-	const isActive = isActiveProp ?? pageProp === page
-	const activeProps = isActive
-		? {
-				bg: 'blue.20',
-				color: 'blue.80',
-				hoverBg: 'blue.30',
-				activeBg: 'blue.40'
-		  }
-		: {}
+  const isActive = isActiveProp ?? pageProp === page
+  const activeProps = isActive
+    ? {
+        bg: 'blue.20',
+        color: 'blue.80',
+        hoverBg: 'blue.30',
+        activeBg: 'blue.40'
+      }
+    : {}
 
-	return (
-		<Button
-			className={cs('vui-paginationButton', className)}
-			minW={0}
-			onClick={() => onPageChange(pageProp)}
-			ref={ref}
-			size="sm"
-			text={pageProp}
-			variant="text"
-			{...styles.button}
-			{...activeProps}
-			{...rest}
-		/>
-	)
+  return (
+    <Button
+      className={cs('vui-paginationButton', className)}
+      minW={0}
+      onClick={() => onPageChange(pageProp)}
+      ref={ref}
+      size="sm"
+      text={pageProp}
+      variant="text"
+      {...styles.button}
+      {...activeProps}
+      {...rest}
+    />
+  )
 })
 
-PaginationButton.displayName = 'PaginationButton'
-
 export default PaginationButton

package/src/pagination/paginationEllipsis.tsx

@@ -7,23 +7,21 @@ import { usePaginationContext } from './context'
 
 /** Displays '...' ellipsis for hidden pages. */
 export const PaginationEllipsis = vui<'span', BoxProps>((props, ref) => {
-	const { children, className, ...rest } = props
-	const styles = useStyleConfig('Pagination', usePaginationContext())
+  const { children, className, ...rest } = props
+  const styles = useStyleConfig('Pagination', usePaginationContext())
 
-	return (
-		<Box
-			alignItems="center"
-			className={cs('vui-paginationEllipsis', className)}
-			px="10px"
-			ref={ref}
-			{...styles.ellipsis}
-			{...rest}
-		>
-			{children ?? '...'}
-		</Box>
-	)
+  return (
+    <Box
+      alignItems="center"
+      className={cs('vui-paginationEllipsis', className)}
+      px="10px"
+      ref={ref}
+      {...styles.ellipsis}
+      {...rest}
+    >
+      {children ?? '...'}
+    </Box>
+  )
 })
 
-PaginationEllipsis.displayName = 'PaginationEllipsis'
-
 export default PaginationEllipsis

package/src/pagination/paginationGoToPage.tsx

@@ -9,37 +9,35 @@ import { usePaginationContext } from './context'
 
 /** Displays a number input, which allows quickly jumping between pages. */
 export const PaginationGoToPage = vui<'div', BoxProps>((props, ref) => {
-	const { className, ...rest } = props
-	const { onPageChange, pageCount } = usePaginationContext()
-	const styles = useStyleConfig('Pagination', usePaginationContext())
+  const { className, ...rest } = props
+  const { onPageChange, pageCount } = usePaginationContext()
+  const styles = useStyleConfig('Pagination', usePaginationContext())
 
-	const onChange = (e: ChangeEvent) => {
-		const value = +e.target.value
-		if (value >= 1 && value <= pageCount) {
-			onPageChange(Math.floor(value))
-		}
-	}
+  const onChange = (e: ChangeEvent) => {
+    const value = +e.target.value
+    if (value >= 1 && value <= pageCount) {
+      onPageChange(Math.floor(value))
+    }
+  }
 
-	return (
-		<Box
-			centerV
-			className={cs('vui-paginationGoToPage', className)}
-			lineHeight="normal"
-			ref={ref}
-			{...styles.goToPage}
-			{...rest}
-		>
-			<T size="sm" weight="medium">
-				Go to
-			</T>
-			<Input max={pageCount} min={1} mx={1} onChange={onChange} size="sm" type="number" w={56} />
-			<T size="sm" weight="medium">
-				Page
-			</T>
-		</Box>
-	)
+  return (
+    <Box
+      centerV
+      className={cs('vui-paginationGoToPage', className)}
+      lineHeight="normal"
+      ref={ref}
+      {...styles.goToPage}
+      {...rest}
+    >
+      <T size="sm" weight="medium">
+        Go to
+      </T>
+      <Input max={pageCount} min={1} mx={1} onChange={onChange} size="sm" type="number" w={56} />
+      <T size="sm" weight="medium">
+        Page
+      </T>
+    </Box>
+  )
 })
 
-PaginationGoToPage.displayName = 'PaginationGoToPage'
-
 export default PaginationGoToPage

package/src/pagination/paginationNavigation.tsx

@@ -10,28 +10,26 @@ import PaginationPrevNext from './paginationPrevNext'
 
 /** Displays a set of page navigation buttons. */
 export const PaginationNavigation = vui<'div', BoxProps>((props, ref) => {
-	const { children, className, ...rest } = props
-	const { items } = usePaginationContext()
-	const styles = useStyleConfig('Pagination', usePaginationContext())
-
-	return (
-		<Box className={cs('vui-paginationNavigation', className)} gap={1} ref={ref} wrap {...styles.navigation} {...rest}>
-			{children ??
-				items.map(item => (
-					<Fragment key={item}>
-						{item === 'previous' && <PaginationPrevNext direction="previous" />}
-
-						{isNumber(item) && <PaginationButton page={item} />}
-
-						{isString(item) && item.includes('ellipsis') && <PaginationEllipsis />}
-
-						{item === 'next' && <PaginationPrevNext direction="next" />}
-					</Fragment>
-				))}
-		</Box>
-	)
+  const { children, className, ...rest } = props
+  const { items } = usePaginationContext()
+  const styles = useStyleConfig('Pagination', usePaginationContext())
+
+  return (
+    <Box className={cs('vui-paginationNavigation', className)} gap={1} ref={ref} wrap {...styles.navigation} {...rest}>
+      {children ??
+        items.map(item => (
+          <Fragment key={item}>
+            {item === 'previous' && <PaginationPrevNext direction="previous" />}
+
+            {isNumber(item) && <PaginationButton page={item} />}
+
+            {isString(item) && item.includes('ellipsis') && <PaginationEllipsis />}
+
+            {item === 'next' && <PaginationPrevNext direction="next" />}
+          </Fragment>
+        ))}
+    </Box>
+  )
 })
 
-PaginationNavigation.displayName = 'PaginationNavigation'
-
 export default PaginationNavigation

package/src/pagination/paginationPrevNext.tsx

@@ -8,32 +8,30 @@ import { PaginationPrevNextProps } from './pagination.types'
 
 /** Displays a page navigation button, which navigates forward or backward. */
 export const PaginationPrevNext = vui<'button', PaginationPrevNextProps>((props, ref) => {
-	const { className, direction, ...rest } = props
-	const { onPageChange, page, pageCount } = usePaginationContext()
-	const styles = useStyleConfig('Pagination', usePaginationContext())
+  const { className, direction, ...rest } = props
+  const { onPageChange, page, pageCount } = usePaginationContext()
+  const styles = useStyleConfig('Pagination', usePaginationContext())
 
-	const isPrev = direction === 'previous'
-	const pageChange = isPrev ? -1 : 1
-	const directionProps = {
-		disabled: isPrev ? page === 1 : page === pageCount,
-		icon: isPrev ? 'falAngleLeft' : 'falAngleRight',
-		onClick: () => onPageChange(page + pageChange)
-	}
+  const isPrev = direction === 'previous'
+  const pageChange = isPrev ? -1 : 1
+  const directionProps = {
+    disabled: isPrev ? page === 1 : page === pageCount,
+    icon: isPrev ? 'falAngleLeft' : 'falAngleRight',
+    onClick: () => onPageChange(page + pageChange)
+  }
 
-	return (
-		<Button
-			className={cs('vui-paginationPrevNext', className)}
-			minW={0}
-			ref={ref}
-			size="sm"
-			variant="text"
-			{...styles.prevNext}
-			{...directionProps}
-			{...rest}
-		/>
-	)
+  return (
+    <Button
+      className={cs('vui-paginationPrevNext', className)}
+      minW={0}
+      ref={ref}
+      size="sm"
+      variant="text"
+      {...styles.prevNext}
+      {...directionProps}
+      {...rest}
+    />
+  )
 })
 
-PaginationPrevNext.displayName = 'PaginationPrevNext'
-
 export default PaginationPrevNext