@pago-sh/ui 1.0.0

package/src/components/atoms/Paginator.tsx

@@ -0,0 +1,227 @@
+'use client'
+
+import { ChevronLeft, ChevronRight } from 'lucide-react'
+import { useMemo } from 'react'
+import { twMerge } from 'tailwind-merge'
+import { Button } from '@pago-sh/orbit'
+
+interface PaginatorProps {
+  totalCount: number
+  pageSize: number
+  currentPage: number
+  siblingCount?: number
+  onPageChange: (page: number) => void
+  className?: string
+  currentURL: URLSearchParams
+}
+
+const Paginator = ({
+  totalCount,
+  pageSize,
+  currentPage,
+  siblingCount = 1,
+  onPageChange,
+  className,
+  currentURL,
+}: PaginatorProps) => {
+  const paginationRange = usePagination({
+    totalCount,
+    currentPage,
+    pageSize,
+    siblingCount,
+  })
+
+  const buildUrlForPage = (page: number): URLSearchParams => {
+    const url = new URLSearchParams(currentURL)
+    url.set('page', page.toString())
+    return url
+  }
+
+  // If there are less than 2 times in pagination range we shall not render the component
+  if (currentPage === 0 || (paginationRange?.length ?? 0) < 2) {
+    return null
+  }
+
+  const maybeLastPage = paginationRange?.[paginationRange.length - 1]
+  const lastPage = typeof maybeLastPage === 'number' ? maybeLastPage : 1
+
+  return (
+    <div
+      className={twMerge(
+        'flex flex-row items-center justify-center gap-x-2',
+        className,
+      )}
+    >
+      <a
+        // Navigation both with and without JS
+        href={`?${buildUrlForPage(currentPage > 1 ? currentPage - 1 : 1)}`}
+        onClick={(e) => {
+          e.stopPropagation()
+          e.preventDefault()
+          if (currentPage > 1) {
+            onPageChange(currentPage - 1)
+          }
+        }}
+        className={twMerge(currentPage === 1 ? 'cursor-default' : '')}
+      >
+        <Button
+          variant="secondary"
+          size="sm"
+          asChild
+          disabled={currentPage === 1}
+          className={twMerge(
+            currentPage === 1 ? 'cursor-default opacity-50' : '',
+          )}
+        >
+          <ChevronLeft fontSize="small" />
+        </Button>
+      </a>
+      {paginationRange?.map((pageNumber, idx) => {
+        // If the pageItem is a DOT, render the DOTS unicode character
+        if (typeof pageNumber !== 'number') {
+          return (
+            <div className="dark:text-pago-400 text-gray-400" key={idx}>
+              &#8230;
+            </div>
+          )
+        }
+
+        // Render page pills
+        return (
+          <a
+            href={`?${buildUrlForPage(pageNumber)}`}
+            key={idx}
+            onClick={(e) => {
+              e.stopPropagation()
+              e.preventDefault()
+              if (pageNumber !== currentPage) onPageChange(pageNumber)
+            }}
+          >
+            <Button
+              asChild
+              variant={pageNumber === currentPage ? 'default' : 'secondary'}
+              size="sm"
+            >
+              {pageNumber}
+            </Button>
+          </a>
+        )
+      })}
+
+      <a
+        href={`?${buildUrlForPage(lastPage)}`}
+        onClick={(e) => {
+          e.stopPropagation()
+          e.preventDefault()
+          if (currentPage < lastPage) {
+            onPageChange(currentPage + 1)
+          }
+        }}
+        className={twMerge(currentPage >= lastPage ? 'cursor-default' : '')}
+      >
+        <Button
+          variant="secondary"
+          asChild
+          size="sm"
+          disabled={currentPage >= lastPage}
+          className={twMerge(
+            currentPage >= lastPage ? 'cursor-default opacity-50' : '',
+          )}
+        >
+          <ChevronRight fontSize="small" />
+        </Button>
+      </a>
+    </div>
+  )
+}
+
+export default Paginator
+
+const range = (start: number, end: number) => {
+  const length = end - start + 1
+  /*
+  	Create an array of certain length and set the elements within it from
+    start value to end value.
+  */
+  return Array.from({ length }, (_, idx) => idx + start)
+}
+
+const DOTS = Symbol('DOTS')
+
+export const usePagination = ({
+  totalCount,
+  pageSize,
+  siblingCount = 1,
+  currentPage,
+}: {
+  totalCount: number
+  pageSize: number
+  siblingCount?: number
+  currentPage: number
+}) => {
+  const paginationRange = useMemo(() => {
+    const totalPageCount = Math.ceil(totalCount / pageSize)
+
+    // Pages count is determined as siblingCount + firstPage + lastPage + currentPage + 2*DOTS
+    const totalPageNumbers = siblingCount + 5
+
+    /*
+      Case 1:
+      If the number of pages is less than the page numbers we want to show in our
+      paginationComponent, we return the range [1..totalPageCount]
+    */
+    if (totalPageNumbers >= totalPageCount) {
+      return range(1, totalPageCount)
+    }
+
+    /*
+    	Calculate left and right sibling index and make sure they are within range 1 and totalPageCount
+    */
+    const leftSiblingIndex = Math.max(currentPage - siblingCount, 1)
+    const rightSiblingIndex = Math.min(
+      currentPage + siblingCount,
+      totalPageCount,
+    )
+
+    /*
+      We do not show dots just when there is just one page number to be inserted between the extremes of sibling and the page limits i.e 1 and totalPageCount. Hence we are using leftSiblingIndex > 2 and rightSiblingIndex < totalPageCount - 2
+    */
+    const shouldShowLeftDots = leftSiblingIndex > 2
+    const shouldShowRightDots = rightSiblingIndex < totalPageCount - 2
+
+    const firstPageIndex = 1
+    const lastPageIndex = totalPageCount
+
+    /*
+    	Case 2: No left dots to show, but rights dots to be shown
+    */
+    if (!shouldShowLeftDots && shouldShowRightDots) {
+      const leftItemCount = 3 + 2 * siblingCount
+      const leftRange = range(1, leftItemCount)
+
+      return [...leftRange, DOTS, totalPageCount]
+    }
+
+    /*
+    	Case 3: No right dots to show, but left dots to be shown
+    */
+    if (shouldShowLeftDots && !shouldShowRightDots) {
+      const rightItemCount = 3 + 2 * siblingCount
+      const rightRange = range(
+        totalPageCount - rightItemCount + 1,
+        totalPageCount,
+      )
+      return [firstPageIndex, DOTS, ...rightRange]
+    }
+
+    /*
+    	Case 4: Both left and right dots to be shown
+    */
+    if (shouldShowLeftDots && shouldShowRightDots) {
+      const middleRange = range(leftSiblingIndex, rightSiblingIndex)
+      return [firstPageIndex, DOTS, ...middleRange, DOTS, lastPageIndex]
+    }
+  }, [totalCount, pageSize, siblingCount, currentPage])
+
+  return paginationRange
+}

package/src/components/atoms/PagoTimeAgo.tsx

@@ -0,0 +1,19 @@
+import TimeAgo from 'react-timeago'
+
+const PagoTimeAgo = (props: { date: Date; suffix?: string }) => {
+  return (
+    <TimeAgo
+      date={props.date}
+      formatter={(value: number, unit: string, suffix: string) => {
+        if (unit === 'second') {
+          return 'just now'
+        }
+        return `${value} ${unit}${value !== 1 ? 's' : ''} ${
+          props.suffix ?? suffix
+        }`
+      }}
+    />
+  )
+}
+
+export default PagoTimeAgo

package/src/components/atoms/PercentageInput.tsx

@@ -0,0 +1,97 @@
+import { Percent } from 'lucide-react'
+import {
+  ChangeEvent,
+  FocusEvent,
+  InputEvent,
+  useCallback,
+  useState,
+} from 'react'
+import { twMerge } from 'tailwind-merge'
+import { Input } from '@pago-sh/orbit'
+
+interface Props {
+  name: string
+  placeholder: number
+  id?: string
+  onChange?: (value: number) => void
+  onBlur?: (e: ChangeEvent<HTMLInputElement>) => void
+  onFocus?: (e: FocusEvent<HTMLInputElement>) => void
+  value?: number
+  className?: string
+  disabled?: boolean
+  preSlot?: React.ReactNode
+  postSlot?: React.ReactNode
+}
+
+const getPercentageBasisPoints = (value: string): number => {
+  let newAmount = Number.parseFloat(value)
+  if (isNaN(newAmount)) {
+    newAmount = 0
+  }
+  return Math.round(newAmount * 100)
+}
+
+const PercentageInput = (props: Props) => {
+  const {
+    id,
+    name,
+    value,
+    placeholder,
+    preSlot,
+    postSlot,
+    onChange: _onChange,
+    onBlur,
+    onFocus,
+    disabled,
+  } = props
+  const [internalValue, setInternalValue] = useState<string | undefined>(
+    value ? (value / 100).toFixed(2) : undefined,
+  )
+
+  const onChange = useCallback(
+    (e: ChangeEvent<HTMLInputElement>) => {
+      if (_onChange) {
+        _onChange(getPercentageBasisPoints(e.target.value))
+      }
+      setInternalValue(e.target.value)
+    },
+    [_onChange],
+  )
+
+  const onInput = (e: InputEvent<HTMLInputElement>) => {
+    const value = e.currentTarget.value
+    const regex = /^\d+([.,]\d{0,2})?$/
+    if (!regex.test(value)) {
+      e.currentTarget.value = Number.parseFloat(value).toFixed(2)
+    }
+  }
+
+  return (
+    <Input
+      type="number"
+      step={0.01}
+      min={0.01}
+      max={100}
+      id={id}
+      name={name}
+      className={twMerge(
+        'dark:placeholder:text-pago-500 block w-full px-4 text-base placeholder:text-gray-400',
+        props.className ?? '',
+      )}
+      value={internalValue}
+      onChange={onChange}
+      onInput={onInput}
+      placeholder={placeholder ? `${placeholder / 100}` : undefined}
+      postSlot={postSlot ? postSlot : <Percent className="h-4 w-4" />}
+      preSlot={preSlot}
+      onBlur={onBlur}
+      onFocus={onFocus}
+      onWheel={(e) => {
+        ;(e.target as HTMLInputElement).blur()
+      }}
+      disabled={disabled}
+    />
+  )
+}
+
+export default PercentageInput

package/src/components/atoms/ShadowBox.tsx

@@ -0,0 +1,26 @@
+import { PropsWithChildren } from 'react'
+import { twMerge } from 'tailwind-merge'
+import ShadowBoxOnMd from './ShadowBoxOnMd'
+
+const ShadowBox = ({
+  ref,
+  ...props
+}: PropsWithChildren<{ className?: string }> & {
+  ref?: React.RefObject<HTMLDivElement>
+}) => (
+  <div
+    ref={ref}
+    className={twMerge(
+      'dark:bg-pago-900 dark:border-pago-700 w-full rounded-xl border border-transparent bg-gray-50 p-8 lg:rounded-4xl',
+      props.className,
+    )}
+  >
+    {props.children}
+  </div>
+)
+
+ShadowBox.displayName = 'ShadowBox'
+
+export default ShadowBox
+
+export { ShadowBoxOnMd }

package/src/components/atoms/ShadowBoxOnMd.tsx

@@ -0,0 +1,20 @@
+import { DetailedHTMLProps } from 'react'
+import { twMerge } from 'tailwind-merge'
+
+const ShadowBoxOnMd = ({
+  className,
+  children,
+  ...props
+}: DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>) => (
+  <div
+    className={twMerge(
+      'md:dark:bg-pago-900 dark:border-pago-700 w-full md:rounded-xl md:border md:border-transparent md:bg-gray-50 md:p-8 lg:rounded-4xl',
+      className,
+    )}
+    {...props}
+  >
+    {children}
+  </div>
+)
+
+export default ShadowBoxOnMd

package/src/components/atoms/Sidebar.tsx

@@ -0,0 +1 @@
+export * from '@/components/ui/sidebar'

package/src/components/molecules/Banner.tsx

@@ -0,0 +1,42 @@
+import React from 'react'
+import { twMerge } from 'tailwind-merge'
+
+type Color = 'default' | 'muted' | 'red' | 'green' | 'blue'
+
+const Banner = ({
+  children,
+  right,
+  color,
+}: {
+  children: React.ReactNode
+  right?: React.ReactNode
+  color: Color
+}) => {
+  return (
+    <div
+      className={twMerge(
+        'flex items-center justify-between gap-2 rounded-lg px-3 py-2 text-sm',
+        color === 'default'
+          ? 'dark:bg-pago-800 dark:ring-pago-700 bg-white ring-1 ring-gray-100'
+          : '',
+        color === 'muted'
+          ? 'dark:bg-pago-800 dark:border-pago-700 border bg-gray-100 text-gray-500'
+          : '',
+        color === 'red'
+          ? 'border bg-red-100 text-red-600 dark:border-red-900 dark:bg-red-950/50 dark:text-red-600'
+          : '',
+        color === 'green'
+          ? 'border bg-green-100 text-green-600 dark:border-green-800 dark:bg-green-900 dark:text-green-200'
+          : '',
+        color === 'blue'
+          ? 'border border-blue-100 bg-blue-50 text-blue-500 dark:border-blue-700 dark:bg-blue-900 dark:text-blue-300'
+          : '',
+      )}
+    >
+      <div className="flex flex-1 items-center gap-2">{children}</div>
+      {right && <div>{right}</div>}
+    </div>
+  )
+}
+
+export default Banner

package/src/components/ui/accordion.tsx

@@ -0,0 +1,63 @@
+'use client'
+
+import * as AccordionPrimitive from '@radix-ui/react-accordion'
+import { ChevronDown } from 'lucide-react'
+import * as React from 'react'
+
+import { cn } from '@/lib/utils'
+
+const Accordion = AccordionPrimitive.Root
+
+const AccordionItem = ({
+  ref,
+  className,
+  ...props
+}: React.ComponentProps<typeof AccordionPrimitive.Item>) => (
+  <AccordionPrimitive.Item
+    ref={ref}
+    className={cn('border-b', className)}
+    {...props}
+  />
+)
+AccordionItem.displayName = 'AccordionItem'
+
+const AccordionTrigger = ({
+  ref,
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof AccordionPrimitive.Trigger>) => (
+  <AccordionPrimitive.Header className="flex">
+    <AccordionPrimitive.Trigger
+      ref={ref}
+      className={cn(
+        'flex flex-1 items-center justify-between py-4 font-medium transition-all hover:underline [&[data-state=open]>svg]:rotate-180',
+        className,
+      )}
+      {...props}
+    >
+      {children}
+      <ChevronDown className="h-4 w-4 shrink-0 transition-transform duration-200" />
+    </AccordionPrimitive.Trigger>
+  </AccordionPrimitive.Header>
+)
+AccordionTrigger.displayName = AccordionPrimitive.Trigger.displayName
+
+const AccordionContent = ({
+  ref,
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof AccordionPrimitive.Content>) => (
+  <AccordionPrimitive.Content
+    ref={ref}
+    className="data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down overflow-hidden text-sm transition-all"
+    {...props}
+  >
+    <div className={cn('pt-0 pb-4', className)}>{children}</div>
+  </AccordionPrimitive.Content>
+)
+
+AccordionContent.displayName = AccordionPrimitive.Content.displayName
+
+export { Accordion, AccordionContent, AccordionItem, AccordionTrigger }

package/src/components/ui/alert-dialog.tsx

@@ -0,0 +1,147 @@
+'use client'
+
+import * as AlertDialogPrimitive from '@radix-ui/react-alert-dialog'
+import * as React from 'react'
+
+import { buttonVariants } from '@pago-sh/orbit/ui/button'
+import { cn } from '@/lib/utils'
+
+const AlertDialog = AlertDialogPrimitive.Root
+
+const AlertDialogTrigger = AlertDialogPrimitive.Trigger
+
+const AlertDialogPortal = AlertDialogPrimitive.Portal
+
+const AlertDialogOverlay = ({
+  ref,
+  className,
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Overlay>) => (
+  <AlertDialogPrimitive.Overlay
+    className={cn(
+      'data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/80',
+      className,
+    )}
+    {...props}
+    ref={ref}
+  />
+)
+AlertDialogOverlay.displayName = AlertDialogPrimitive.Overlay.displayName
+
+const AlertDialogContent = ({
+  ref,
+  className,
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Content>) => (
+  <AlertDialogPortal>
+    <AlertDialogOverlay />
+    <AlertDialogPrimitive.Content
+      ref={ref}
+      className={cn(
+        'bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] fixed top-[50%] left-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border p-6 shadow-lg duration-200 sm:rounded-lg',
+        className,
+      )}
+      {...props}
+    />
+  </AlertDialogPortal>
+)
+AlertDialogContent.displayName = AlertDialogPrimitive.Content.displayName
+
+const AlertDialogHeader = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+  <div
+    className={cn(
+      'flex flex-col space-y-2 text-center sm:text-left',
+      className,
+    )}
+    {...props}
+  />
+)
+AlertDialogHeader.displayName = 'AlertDialogHeader'
+
+const AlertDialogFooter = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+  <div
+    className={cn(
+      'flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2',
+      className,
+    )}
+    {...props}
+  />
+)
+AlertDialogFooter.displayName = 'AlertDialogFooter'
+
+const AlertDialogTitle = ({
+  ref,
+  className,
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Title>) => (
+  <AlertDialogPrimitive.Title
+    ref={ref}
+    className={cn('text-lg font-semibold', className)}
+    {...props}
+  />
+)
+AlertDialogTitle.displayName = AlertDialogPrimitive.Title.displayName
+
+const AlertDialogDescription = ({
+  ref,
+  className,
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Description>) => (
+  <AlertDialogPrimitive.Description
+    ref={ref}
+    className={cn('text-muted-foreground text-sm', className)}
+    {...props}
+  />
+)
+AlertDialogDescription.displayName =
+  AlertDialogPrimitive.Description.displayName
+
+const AlertDialogAction = ({
+  ref,
+  className,
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Action>) => (
+  <AlertDialogPrimitive.Action
+    ref={ref}
+    className={cn(buttonVariants(), className)}
+    {...props}
+  />
+)
+AlertDialogAction.displayName = AlertDialogPrimitive.Action.displayName
+
+const AlertDialogCancel = ({
+  ref,
+  className,
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Cancel>) => (
+  <AlertDialogPrimitive.Cancel
+    ref={ref}
+    className={cn(
+      buttonVariants({ variant: 'outline' }),
+      'mt-2 sm:mt-0',
+      className,
+    )}
+    {...props}
+  />
+)
+AlertDialogCancel.displayName = AlertDialogPrimitive.Cancel.displayName
+
+export {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogOverlay,
+  AlertDialogPortal,
+  AlertDialogTitle,
+  AlertDialogTrigger,
+}