@infonomic/uikit 2.0.0 → 2.1.0

package/src/components/pager/pagination.tsx

@@ -0,0 +1,266 @@
+'use client'
+
+import cx from 'classnames'
+// usePagination hook from...
+// https://github.com/mui/material-ui/blob/master/packages/mui-material/src/usePagination/usePagination.js
+// https://github.com/mui/material-ui/blob/master/LICENSE
+/* eslint-disable react/jsx-pascal-case */
+import React, { useContext } from 'react'
+import type { Variant } from './@types'
+
+import { Ellipses } from './ellipses.js'
+import { FirstButton } from './first-button'
+import type { UsePaginationItem, UsePaginationProps } from './hooks/types/usePagination'
+import { usePagination } from './hooks/usePagination'
+import { LastButton } from './last-button'
+import { NextButton } from './next-button'
+import { NumberButton } from './number-button'
+import styles from './pagination.module.css'
+import { PreviousButton } from './previous-button'
+
+const PAGINATION_NAME = 'Pagination'
+const ROOT_NAME = 'Root'
+const PAGER_NAME = 'Pager'
+
+export interface PagerContextType {
+  variant: Variant
+  count: number
+  currentPage: number
+  hideNextButton?: boolean
+  hidePrevButton?: boolean
+  items: UsePaginationItem[]
+  showFirstButton?: boolean
+  showLastButton?: boolean
+  eventsEnabled?: boolean
+}
+
+export const PagerContext = React.createContext<PagerContextType>({
+  variant: 'default',
+  count: 1,
+  currentPage: 1,
+  hideNextButton: false,
+  hidePrevButton: false,
+  items: [],
+  showFirstButton: false,
+  showLastButton: false,
+  eventsEnabled: false,
+})
+
+// ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+// Pagination
+
+/**
+ * See ./hooks/types/usePagination.ts
+ */
+export interface PaginationProps extends UsePaginationProps {
+  className?: string
+  'aria-label'?: string
+  variant?: Variant
+  children?: React.ReactNode
+}
+
+export const Pagination = ({
+  children,
+  variant = 'default',
+  ...rest
+}: PaginationProps): React.JSX.Element => {
+  const { items } = usePagination({
+    ...rest,
+  })
+
+  const {
+    count,
+    page: currentPage,
+    hideNextButton,
+    hidePrevButton,
+    showFirstButton,
+    showLastButton,
+    onChange,
+  } = rest
+
+  const eventsEnabled = onChange != null
+
+  const context = React.useMemo(() => {
+    return {
+      variant,
+      items,
+      count,
+      currentPage,
+      hideNextButton,
+      hidePrevButton,
+      showFirstButton,
+      showLastButton,
+      eventsEnabled,
+    }
+  }, [
+    variant,
+    items,
+    count,
+    currentPage,
+    hideNextButton,
+    hidePrevButton,
+    showFirstButton,
+    showLastButton,
+    eventsEnabled,
+  ])
+
+  return <PagerContext value={context}>{children}</PagerContext>
+}
+
+Pagination.displayName = PAGINATION_NAME
+
+// Hook helper usePager
+export function usePager(): PagerContextType {
+  const context = useContext(PagerContext)
+  if (context === undefined) {
+    throw new Error('usePager must be used within a PagerContext')
+  }
+  return context
+}
+
+// ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+// First, Previous, Next, Last and Page number buttons
+
+// Define the ref type based on asChild prop
+export type RefType = React.Ref<HTMLButtonElement> | React.Ref<HTMLElement>
+
+// Your existing types...
+type AsButton = { asChild?: false } & React.ComponentRef<'button'>
+
+// Or AsSlot
+interface AsSlot {
+  asChild?: true
+}
+
+export type PagerButtonProps = {
+  className?: string
+  disabled?: boolean
+  children?: React.ReactNode
+  onClick?: React.ReactEventHandler<Element> | undefined
+} & (AsButton | AsSlot)
+
+// ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+// Pager container component
+export interface PagerProps {
+  children?: React.ReactNode
+  renderFirst?: (key: string, item: UsePaginationItem) => React.ReactNode
+  renderPrevious?: (key: string, item: UsePaginationItem) => React.ReactNode
+  renderPageNumber?: (key: string, item: UsePaginationItem) => React.ReactNode
+  renderNext?: (key: string, item: UsePaginationItem) => React.ReactNode
+  renderLast?: (key: string, item: UsePaginationItem, count: number) => React.ReactNode
+  renderEllipses?: (key: string) => React.ReactNode
+}
+
+const Pager = ({
+  renderFirst = (key, item) => (
+    <Pagination.First key={key} disabled={item.disabled} onClick={item.onClick} />
+  ),
+  renderPrevious = (key, item) => (
+    <Pagination.Previous key={key} disabled={item.disabled} onClick={item.onClick} />
+  ),
+  renderPageNumber = (key, item) => (
+    <Pagination.Number
+      key={key}
+      page={item.page}
+      disabled={item.disabled}
+      selected={item.selected}
+      activeClassName="active"
+      onClick={item.onClick}
+    />
+  ),
+  renderNext = (key, item) => (
+    <Pagination.Next key={key} page={item.page} disabled={item.disabled} onClick={item.onClick} />
+  ),
+  renderLast = (key, item, count) => (
+    <Pagination.Last key={key} disabled={item.disabled} count={count} onClick={item.onClick} />
+  ),
+  renderEllipses = (key) => <Ellipses key={key} />,
+}: PagerProps): React.JSX.Element => {
+  const { items, count } = React.useContext(PagerContext)
+
+  return (
+    <>
+      {items.map((item, index) => {
+        const key = `${item.page}-${index}`
+        switch (item.type) {
+          case 'start-ellipsis':
+          case 'end-ellipsis':
+            return renderEllipses(key)
+          case 'first':
+            return renderFirst(key, item)
+          case 'previous':
+            return renderPrevious(key, item)
+          case 'page':
+            return renderPageNumber(key, item)
+          case 'next':
+            return renderNext(key, item)
+          case 'last':
+            return renderLast(key, item, count)
+          default:
+            return null
+        }
+      })}
+    </>
+  )
+}
+
+Pager.displayName = PAGER_NAME
+
+// ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+// Root
+export type RootElement = React.ComponentRef<'nav'>
+type PrimitiveRootProps = React.ComponentPropsWithoutRef<'nav'>
+
+export interface RootProps extends PrimitiveRootProps {
+  className?: string
+  itemsClassName?: string
+  dataTestId?: string
+  ariaLabel?: string
+  children?: React.ReactNode
+}
+
+const Root = ({
+  ref,
+  className,
+  itemsClassName,
+  children,
+  ariaLabel,
+  dataTestId,
+  ...rest
+}: RootProps & {
+  ref?: React.RefObject<RootElement>
+}) => {
+  const { variant } = usePager()
+
+  return (
+    <nav
+      data-testid={dataTestId}
+      ref={ref}
+      className={cx('pagination-root', styles['pagination-root'], 'pagination-root', className)}
+      {...rest}
+      aria-label={ariaLabel ?? 'Pager navigation'}
+    >
+      <ul
+        className={cx(
+          'pagination-items',
+          styles['pagination-items'],
+          styles[variant],
+          itemsClassName
+        )}
+      >
+        {children}
+      </ul>
+    </nav>
+  )
+}
+
+Root.displayName = ROOT_NAME
+
+Pagination.Pager = Pager
+Pagination.Root = Root
+Pagination.First = FirstButton
+Pagination.Previous = PreviousButton
+Pagination.Number = NumberButton
+Pagination.Next = NextButton
+Pagination.Last = LastButton
+Pagination.Ellipses = Ellipses

package/src/components/pager/previous-button.tsx

@@ -0,0 +1,51 @@
+'use client'
+
+import { ChevronLeftIcon } from '@radix-ui/react-icons'
+import { Slot } from '@radix-ui/react-slot'
+import cx from 'classnames'
+import type React from 'react'
+import type { PagerButtonProps, RefType } from './pagination'
+import { usePager } from './pagination'
+
+import styles from './pagination.module.css'
+
+export const PreviousButton = ({
+  ref,
+  className,
+  disabled,
+  asChild,
+  children,
+  ...rest
+}: PagerButtonProps & {
+  ref?: React.RefObject<RefType>
+}) => {
+  const Comp = asChild != null ? Slot : ('button' as React.ElementType)
+  const { showFirstButton, variant } = usePager()
+
+  const aria = disabled ? { 'aria-disabled': true } : { 'aria-label': 'Previous' }
+
+  return (
+    <li className={styles['mobile-toggle']}>
+      <Comp
+        ref={ref}
+        className={cx(
+          styles['previous-button'],
+          styles[variant],
+
+          { [styles['rounded-left']]: showFirstButton == null || showFirstButton === false },
+          'pagination-previous',
+          className
+        )}
+        disabled={disabled}
+        title="Previous"
+        data-testid="pagination-previous"
+        {...aria}
+        {...rest}
+      >
+        {(asChild ?? false) ? children : <ChevronLeftIcon />}
+      </Comp>
+    </li>
+  )
+}
+
+PreviousButton.displayName = 'PreviousButton'

package/src/components/scroll-area/scroll-area.module.css

@@ -0,0 +1,80 @@
+@layer infonomic-base, infonomic-utilities, infonomic-theme, infonomic-typography, infonomic-components;
+
+@layer infonomic-components {
+  .root {
+    border-radius: 4px;
+    overflow: hidden;
+    background-color: inherit;
+    --scrollbar-size: 10px;
+  }
+
+  .viewport {
+    width: 100%;
+    height: 100%;
+    border-radius: inherit;
+  }
+
+  .scrollbar {
+    display: flex;
+    /* ensures no selection */
+    user-select: none;
+    /* disable browser handling of all panning and zooming gestures on touch devices */
+    touch-action: none;
+    padding: 2px;
+    background: var(--gray-50);
+    transition: background 160ms ease-out;
+
+    &:hover {
+      background: var(--gray-50);
+    }
+
+    &[data-orientation="vertical"] {
+      width: var(--scrollbar-size);
+    }
+
+    &[data-orientation="horizontal"] {
+      flex-direction: column;
+      height: var(--scrollbar-size);
+    }
+  }
+
+  .scrollbar:is(:global(.dark) *) {
+    background: var(--canvas-700);
+
+    &:hover {
+      background: var(--canvas-700);
+    }
+  }
+
+  .thumb {
+    flex: 1;
+    background: var(--primary-100);
+    border-radius: var(--border-radius-sm);
+    position: relative;
+
+    /* increase target size for touch devices https://www.w3.org/WAI/WCAG21/Understanding/target-size.html */
+    &::before {
+      content: "";
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+      width: 100%;
+      height: 100%;
+      min-width: 44px;
+      min-height: 44px;
+    }
+  }
+
+  .thumb:is(:global(.dark) *) {
+    background: var(--primary-400);
+  }
+
+  .corner {
+    background: var(--gray-50);
+  }
+
+  .corner:is(:global(.dark) *) {
+    background: var(--canvas-700);
+  }
+}

package/src/components/scroll-area/scroll-area.stories.tsx

@@ -0,0 +1,33 @@
+import type { Meta } from '@storybook/react-vite'
+
+import { ScrollArea as ScrollAreaComponent } from './scroll-area.js'
+
+const meta: Meta<typeof ScrollAreaComponent> = {
+  /* 👇 The title prop is optional.
+   * See https://storybook.js.org/docs/react/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
+  title: 'Components/ScrollArea',
+  component: ScrollAreaComponent,
+}
+
+export default meta
+
+const TAGS = Array.from({ length: 50 }).map((_, i, a) => `v1.2.0-beta.${a.length - i}`)
+
+export const ScrollArea = (): React.JSX.Element => {
+  return (
+    <div style={{ height: '100vh' }}>
+      <ScrollAreaComponent
+        style={{ width: '200px', height: '300px', margin: '0 auto', border: '1px solid #ccc' }}
+      >
+        <div style={{ padding: '15px 20px' }}>
+          <div>Tags</div>
+          {TAGS.map((tag) => (
+            <div key={tag}>{tag}</div>
+          ))}
+        </div>
+      </ScrollAreaComponent>
+    </div>
+  )
+}

package/src/components/scroll-area/scroll-area.tsx

@@ -0,0 +1,22 @@
+import cx from 'classnames'
+import { ScrollArea as ScrollAreaPrimitive } from 'radix-ui'
+
+import type React from 'react'
+import styles from './scroll-area.module.css'
+
+interface ScrollAreaProps extends React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.Root> {}
+
+export const ScrollArea = ({ children, style, className }: ScrollAreaProps) => (
+  <ScrollAreaPrimitive.Root style={style} className={cx('scroll-area', styles.root, className)}>
+    <ScrollAreaPrimitive.Viewport className={styles.viewport}>
+      {children}
+    </ScrollAreaPrimitive.Viewport>
+    <ScrollAreaPrimitive.Scrollbar className={styles.scrollbar} orientation="vertical">
+      <ScrollAreaPrimitive.Thumb className={styles.thumb} />
+    </ScrollAreaPrimitive.Scrollbar>
+    <ScrollAreaPrimitive.Scrollbar className={styles.scrollbar} orientation="horizontal">
+      <ScrollAreaPrimitive.Thumb className={styles.thumb} />
+    </ScrollAreaPrimitive.Scrollbar>
+    <ScrollAreaPrimitive.Corner className={styles.corner} />
+  </ScrollAreaPrimitive.Root>
+)

package/src/components/scroll-to-top/scroll-to-top.tsx

@@ -0,0 +1,59 @@
+'use client'
+
+import type React from 'react'
+import { useEffect, useState } from 'react'
+
+type ScrollToTopIntrinsicProps = React.JSX.IntrinsicElements['button']
+interface ScrollToTopProps extends ScrollToTopIntrinsicProps {
+  offset?: number
+}
+
+export type { ScrollToTopProps }
+
+export const ScrollToTop = function ScrollToTop({
+  ref,
+  offset = -65,
+  ...rest
+}: ScrollToTopProps & {
+  ref?: React.RefObject<HTMLButtonElement>
+}) {
+  const [show, setShow] = useState(false)
+
+  const handleScrollToTopClick = (): void => {
+    window.scrollTo({ top: offset, left: 0, behavior: 'smooth' })
+  }
+
+  useEffect(() => {
+    const handleCheck = (): void => {
+      const scrollTop = window.scrollY
+      if (scrollTop > 200) {
+        setShow(true)
+      } else {
+        setShow(false)
+      }
+    }
+    if (typeof window !== 'undefined') {
+      window.addEventListener('scroll', handleCheck)
+    }
+    return () => {
+      window.removeEventListener('scroll', handleCheck)
+    }
+  }, [])
+
+  return (
+    <button
+      ref={ref}
+      {...rest}
+      onClick={handleScrollToTopClick}
+      type="button"
+      id="scroll-to-top"
+      className={`btn-to-top ${show && 'btn-floating'}`}
+    >
+      <span>
+        <svg className="icon" focusable="false" aria-hidden="true" viewBox="0 0 51 32">
+          <path d="M25.4,9.8L45.6,30l4.5-4.5L25.4,0.8L0.8,25.4L5.3,30L25.4,9.8z" />
+        </svg>
+      </span>
+    </button>
+  )
+}

package/src/components/section/section.astro

@@ -0,0 +1,13 @@
+---
+interface Props {
+  class?: string
+}
+
+import styles from './section.module.css'
+
+const { class: className, ...rest } = Astro.props as Props
+---
+
+<section class:list={[styles.section, className]} {...rest}>
+  <slot />
+</section>

package/src/components/section/section.module.css

@@ -0,0 +1,7 @@
+@layer infonomic-base, infonomic-utilities, infonomic-theme, infonomic-typography, infonomic-components;
+
+@layer infonomic-components {
+  .section {
+    position: relative;
+  }
+}

package/src/components/section/section.tsx

@@ -0,0 +1,23 @@
+import type React from 'react'
+
+import cx from 'classnames'
+
+import styles from './section.module.css'
+
+type SectionIntrinsicProps = React.JSX.IntrinsicElements['section']
+export interface SectionProps extends SectionIntrinsicProps {}
+
+export const Section = function Section({
+  ref,
+  className,
+  children,
+  ...rest
+}: SectionProps & {
+  ref?: React.RefObject<HTMLElement>
+}): React.JSX.Element {
+  return (
+    <section className={cx(styles.section, className)} ref={ref} {...rest}>
+      {children}
+    </section>
+  )
+}

package/src/components/shimmer/shimmer.module.css

@@ -0,0 +1,53 @@
+@layer infonomic-base, infonomic-utilities, infonomic-theme, infonomic-typography, infonomic-components;
+
+/* 'border-collapse w-full text-sm text-left text-gray-700 dark:text-gray-400 m-0', */
+@layer infonomic-components {
+  .shimmer {
+    position: relative;
+    overflow: hidden;
+    background-color: #f0f0f0;
+    background-image: linear-gradient(90deg,
+        transparent,
+        rgba(255, 255, 255, 0.6),
+        transparent);
+    background-size: 200% 100%;
+    animation: shimmer 1.5s infinite;
+  }
+
+  .shimmer:is(:global(.dark) *) {
+    background-color: #141414;
+    background-image: linear-gradient(90deg,
+        transparent,
+        rgba(255, 255, 255, 0.01),
+        transparent);
+  }
+
+  .shimmerContainer {
+    display: flex;
+    flex-direction: column;
+  }
+
+  .rectangular {
+    border-radius: 0.25rem;
+  }
+
+  .text {
+    border-radius: 0.125rem;
+    height: 1rem;
+  }
+
+  .circular {
+    border-radius: 50%;
+    aspect-ratio: 1;
+  }
+
+  @keyframes shimmer {
+    0% {
+      background-position: -200% 0;
+    }
+
+    100% {
+      background-position: 200% 0;
+    }
+  }
+}

package/src/components/shimmer/shimmer.stories.tsx

@@ -0,0 +1,24 @@
+import type { Meta } from '@storybook/react-vite'
+
+import { Shimmer as ShimmerComponent } from './shimmer.js'
+
+const meta: Meta<typeof ShimmerComponent> = {
+  /* 👇 The title prop is optional.
+   * See https://storybook.js.org/docs/react/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
+  title: 'Components/Shimmer',
+  component: ShimmerComponent,
+}
+
+export default meta
+
+export const Shimmer = (): React.JSX.Element => {
+  return (
+    <div style={{ height: '100vh' }}>
+      <ShimmerComponent variant="text" width="100%" borderRadius="4px" height="1rem" lines={5}>
+        <div style={{ width: '100%' }} />
+      </ShimmerComponent>
+    </div>
+  )
+}