@infonomic/uikit 5.15.0 → 5.17.0

package/src/components/forms/text-area.stories.tsx

@@ -1,6 +1,5 @@
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
 import type React from 'react'
-import { useState } from 'react'
 
 import { TextArea } from './index.js'
 
@@ -12,40 +11,36 @@ export default {
 
 export const Default = (): React.JSX.Element => {
   return (
-    <>
-      <div style={{ maxWidth: '600px', margin: '2rem auto' }}>
-        <TextArea
-          required
-          id="message"
-          name="message"
-          rows={5}
-          label="Message"
-          helpText="Please enter a message."
-          disabled={false}
-          error={false}
-        />
-      </div>
-    </>
+    <div style={{ maxWidth: '600px', margin: '2rem auto' }}>
+      <TextArea
+        required
+        id="message"
+        name="message"
+        rows={5}
+        label="Message"
+        helpText="Please enter a message."
+        disabled={false}
+        error={false}
+      />
+    </div>
   )
 }
 
 // biome-ignore lint/suspicious/noShadowRestrictedNames: <explanation>
 export const Error = (): React.JSX.Element => {
   return (
-    <>
-      <div style={{ maxWidth: '600px', margin: '2rem auto' }}>
-        <TextArea
-          required
-          id="message"
-          name="message"
-          rows={5}
-          label="Message"
-          helpText="Please enter a message."
-          disabled={false}
-          error={true}
-          errorText="Messages must be longer than 15 characers..."
-        />
-      </div>
-    </>
+    <div style={{ maxWidth: '600px', margin: '2rem auto' }}>
+      <TextArea
+        required
+        id="message"
+        name="message"
+        rows={5}
+        label="Message"
+        helpText="Please enter a message."
+        disabled={false}
+        error={true}
+        errorText="Messages must be longer than 15 characers..."
+      />
+    </div>
   )
 }

package/src/components/forms/text-area.tsx

@@ -1,12 +1,13 @@
-import cx from 'classnames'
 import type * as React from 'react'
 
-import type { Intent, Variant } from './@types/input.js'
+import cx from 'classnames'
+
 import { ErrorText } from './error-text.js'
 import { HelpText } from './help-text.js'
 import inputStyles from './input.module.css'
 import { Label } from './label.js'
 import styles from './text-area.module.css'
+import type { Intent, Variant } from './@types/input.js'
 
 export interface TextAreaProps extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {
   id: string

package/src/components/notifications/@types/alert.ts

@@ -1,6 +1,3 @@
-/* eslint-disable @typescript-eslint/naming-convention */
-import type { ReactNode } from 'react'
-
 // generic types
 import type { Intent as t } from '../../@types/shared.js'
 

package/src/components/notifications/alert.module.css

@@ -1,4 +1,9 @@
-@layer infonomic-base, infonomic-functional, infonomic-utilities, infonomic-theme, infonomic-typography, infonomic-components;
+@layer infonomic-base,
+  infonomic-functional,
+  infonomic-utilities,
+  infonomic-theme,
+  infonomic-typography,
+  infonomic-components;
 
 @layer infonomic-components {
   .alert {
@@ -27,6 +32,10 @@
     display: flex;
     align-items: center;
     justify-content: center;
+    min-width: 24px;
+    min-height: 24px;
+    width: 24px;
+    height: 24px;
   }
 
   .close {
@@ -108,4 +117,4 @@
     --alert-border: var(--stroke-danger);
     --alert-background: var(--fill-danger-weak);
   }
-}
+}

package/src/components/notifications/alert.stories.tsx

@@ -1,14 +1,22 @@
-import type { Meta } from '@storybook/react-vite'
 import type React from 'react'
 
-import { type Intent, intent } from '../@types/shared.js'
+import type { Meta } from '@storybook/react-vite'
 
+import { type Intent, intent } from '../@types/shared.js'
 import { Alert as AlertComponent } from './alert.js'
 
 export const Alerts = (): React.JSX.Element => {
   return (
     <>
-      <div style={{ maxWidth: '600px', margin: '2rem auto', borderRadius: '6px', backgroundColor: 'var(--background)', padding: '1rem' }}>
+      <div
+        style={{
+          maxWidth: '600px',
+          margin: '2rem auto',
+          borderRadius: '6px',
+          backgroundColor: 'var(--background)',
+          padding: '1rem',
+        }}
+      >
         {intent.map((intent: Intent) => {
           if (intent !== 'noeffect') {
             return (
@@ -25,7 +33,16 @@ export const Alerts = (): React.JSX.Element => {
           This is an info alert with a title and with some additional text here.
         </AlertComponent>
       </div>
-      <div className="dark" style={{ maxWidth: '600px', margin: '2rem auto', borderRadius: '6px', backgroundColor: 'var(--theme-800)', padding: '1rem' }}>
+      <div
+        className="dark"
+        style={{
+          maxWidth: '600px',
+          margin: '2rem auto',
+          borderRadius: '6px',
+          backgroundColor: 'var(--theme-800)',
+          padding: '1rem',
+        }}
+      >
         {intent.map((intent: Intent) => {
           if (intent !== 'noeffect') {
             return (

package/src/components/notifications/alert.tsx

@@ -1,18 +1,18 @@
 'use client'
 
-import cx from 'classnames'
 import type React from 'react'
 import { useEffect, useState } from 'react'
+
+import cx from 'classnames'
+
 import { CloseIcon } from '../../icons/close-icon'
 import { DangerIcon } from '../../icons/danger-icon'
 import { InfoIcon } from '../../icons/info-icon'
 import { SuccessIcon } from '../../icons/success-icon'
 import { WarningIcon } from '../../icons/warning-icon'
 import { Button } from '../button/button.js'
-
-import type { Intent } from './@types/alert.js'
-
 import styles from './alert.module.css'
+import type { Intent } from './@types/alert.js'
 
 export interface AlertProps {
   intent?: Intent

package/src/components/notifications/toast.module.css

@@ -1,4 +1,9 @@
-@layer infonomic-base, infonomic-functional, infonomic-utilities, infonomic-theme, infonomic-typography, infonomic-components;
+@layer infonomic-base,
+  infonomic-functional,
+  infonomic-utilities,
+  infonomic-theme,
+  infonomic-typography,
+  infonomic-components;
 
 @layer infonomic-components {
   /* Positions are relative to the toast viewport which is set 
@@ -76,7 +81,6 @@
     fill: white;
   }
 
-
   .title {
     display: flex;
     padding: 0 12px 0 8px;
@@ -128,7 +132,6 @@
   }
 
   @media (min-width: 48rem) {
-
     .root.top-right[data-state="open"],
     .root.bottom-right[data-state="open"] {
       animation: slideInFromRight 150ms cubic-bezier(0.16, 1, 0.3, 1);
@@ -172,7 +175,6 @@
       width: 100%;
       max-width: 390px;
     }
-
   }
 
   @keyframes slideInFromRight {
@@ -234,4 +236,4 @@
       opacity: 0;
     }
   }
-}
+}

package/src/components/notifications/toast.stories.tsx

@@ -1,10 +1,10 @@
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
 
-import type { Meta } from '@storybook/react-vite'
 import React from 'react'
 
-import { Button } from '../button/button.js'
+import type { Meta } from '@storybook/react-vite'
 
+import { Button } from '../button/button.js'
 import { Toast as ToastComponent } from './toast.js'
 
 export const Toast = (): React.JSX.Element => {

package/src/components/notifications/toast.tsx

@@ -1,17 +1,19 @@
 'use client'
 
+import React from 'react'
+
 import { useFocusTrap, useMergedRef } from '@mantine/hooks'
 import cx from 'classnames'
 import { Toast as ToastPrimitive } from 'radix-ui'
-import React from 'react'
+
 import { CloseIcon } from '../../icons/close-icon'
 import { DangerIcon } from '../../icons/danger-icon'
 import { InfoIcon } from '../../icons/info-icon'
 import { SuccessIcon } from '../../icons/success-icon'
 import { WarningIcon } from '../../icons/warning-icon'
 import { Button } from '../button/button.js'
-import type { IconType, Intent, OnOpenChange, Position } from './@types/toast.js'
 import styles from './toast.module.css'
+import type { IconType, Intent, OnOpenChange, Position } from './@types/toast.js'
 
 const toastIcons = {
   success: SuccessIcon,
@@ -63,7 +65,7 @@ export const Toast = function Toast({
     if (onOpenChange != null) onOpenChange(false)
   }
 
-  const handleOnChange = (open: boolean): void => {
+  const _handleOnChange = (open: boolean): void => {
     console.log('handleOnChange', { open })
     if (open) {
       timerRef.current = window.setTimeout(() => {

package/src/components/overlay/index.stories.tsx

@@ -1,6 +1,3 @@
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
-import React from 'react'
-
 import type { Meta, StoryObj } from '@storybook/react-vite'
 
 import { Overlay } from './overlay.js'

package/src/components/overlay/overlay.module.css

@@ -38,4 +38,4 @@
   to {
     opacity: 0;
   }
-}
+}

package/src/components/overlay/overlay.tsx

@@ -21,24 +21,25 @@ const BodyLock = (): null => {
     const classList = document.body.classList
     appBar = document.getElementById('app-bar')
     classList.add('overlay-shown')
-    if(appBar != null) appBar.classList.add('app-bar-overlay-shown')
-    if (mediaMatch.matches) {  
+    if (appBar != null) appBar.classList.add('app-bar-overlay-shown')
+    if (mediaMatch.matches) {
       classList.add('overlay-shown--desktop')
       if (appBar != null) {
         appBar.classList.add('app-bar-overlay-shown--desktop')
-      } 
+      }
     } else {
       classList.add('overlay-shown--mobile')
       if (appBar != null) {
-         appBar.classList.add('app-bar-overlay-shown--mobile')
+        appBar.classList.add('app-bar-overlay-shown--mobile')
       }
     }
     return () => {
       classList.remove('overlay-shown')
-      if(appBar != null) appBar.classList.remove('app-bar-overlay-shown')
+      if (appBar != null) appBar.classList.remove('app-bar-overlay-shown')
       if (mediaMatch.matches) {
         classList.remove('overlay-shown--desktop')
-        if (appBar != null) appBar.classList.remove('app-bar-overlay-shown', 'app-bar-overlay-shown--desktop')
+        if (appBar != null)
+          appBar.classList.remove('app-bar-overlay-shown', 'app-bar-overlay-shown--desktop')
       } else {
         classList.remove('overlay-shown--mobile')
         if (appBar != null) appBar.classList.remove('app-bar-overlay-shown--mobile')

package/src/components/pager/ellipses.tsx

@@ -1,10 +1,10 @@
 'use client'
 
-import cx from 'classnames'
 import type React from 'react'
 
-import { usePager } from './pagination'
+import cx from 'classnames'
 
+import { usePager } from './pagination'
 import styles from './pagination.module.css'
 
 export function Ellipses(): React.JSX.Element {

package/src/components/pager/event-pager.tsx

@@ -1,7 +1,9 @@
 'use client'
+
 import type React from 'react'
-import type { PaginationProps } from './pagination'
+
 import { Pagination } from './pagination'
+import type { PaginationProps } from './pagination'
 
 /**
  * A convenience event-based pager

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

@@ -2,14 +2,15 @@
 
 /* eslint-disable @typescript-eslint/strict-boolean-expressions */
 
+import type React from 'react'
+
 import { DoubleArrowLeftIcon } 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 { usePager } from './pagination'
 import styles from './pagination.module.css'
+import type { PagerButtonProps, RefType } from './pagination'
 
 export const FirstButton = ({
   ref,

package/src/components/pager/icons/index.tsx

@@ -1,4 +1,4 @@
 export * from './first'
-export * from './previous'
-export * from './next'
 export * from './last'
+export * from './next'
+export * from './previous'

package/src/components/pager/index.ts

@@ -1,4 +1,4 @@
+export * from './event-pager'
 export * from './hooks/usePagination'
-export * from './pagination'
 export * from './icons/index'
-export * from './event-pager'
+export * from './pagination'

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

@@ -2,14 +2,15 @@
 
 /* eslint-disable @typescript-eslint/strict-boolean-expressions */
 
+import type React from 'react'
+
 import { DoubleArrowRightIcon } 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 { usePager } from './pagination'
 import styles from './pagination.module.css'
+import type { PagerButtonProps, RefType } from './pagination'
 
 export type LastButtonProps = PagerButtonProps & {
   count: number

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

@@ -1,13 +1,14 @@
 'use client'
 
+import type React from 'react'
+
 import { ChevronRightIcon } 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 { usePager } from './pagination'
 import styles from './pagination.module.css'
+import type { PagerButtonProps, RefType } from './pagination'
 
 export type NextButtonProps = PagerButtonProps & {
   page: number | null

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

@@ -1,14 +1,14 @@
 'use client'
 
+import type React from 'react'
+
 import { Slot } from '@radix-ui/react-slot'
 import cx from 'classnames'
-import type React from 'react'
-import { useMediaQuery } from '../../hooks/use-media-query'
 
-import type { PagerButtonProps, RefType } from './pagination'
+import { useMediaQuery } from '../../hooks/use-media-query'
 import { usePager } from './pagination'
-
 import styles from './pagination.module.css'
+import type { PagerButtonProps, RefType } from './pagination'
 
 export type NumberButtonProps = PagerButtonProps & {
   page: number | null
@@ -74,7 +74,7 @@ export const NumberButton = ({
         aria-label={currentPage === page ? `Current Page, Page ${page}` : `Page ${page}`}
         {...rest}
       >
-        {(asChild ?? false) ? children : <>{page}</>}
+        {(asChild ?? false) ? children : page}
       </Comp>
     </li>
   )

package/src/components/pager/pagination.module.css

@@ -1,4 +1,9 @@
-@layer infonomic-base, infonomic-functional, infonomic-utilities, infonomic-theme, infonomic-typography, infonomic-components;
+@layer infonomic-base,
+  infonomic-functional,
+  infonomic-utilities,
+  infonomic-theme,
+  infonomic-typography,
+  infonomic-components;
 
 @layer infonomic-components {
   .pagination-root {
@@ -78,7 +83,6 @@
     font-size: var(--font-size-sm);
   }
 
-
   .previous-button,
   .last-button,
   .next-button,
@@ -118,14 +122,12 @@
     background-color: var(--fill-primary-strong);
   }
 
-
   /* Opinionated mobile */
   .mobile-toggle {
     display: none;
   }
 
-  @media(min-width: 40rem) {
-
+  @media (min-width: 40rem) {
     .mobile-toggle {
       display: flex;
     }
@@ -146,4 +148,4 @@
       border-color: var(--canvas-700);
     }
   }
-}
+}

package/src/components/pager/pagination.stories.tsx

@@ -19,7 +19,7 @@ export default meta
 const DefaultPager = (): React.JSX.Element => {
   const [page, setPage] = React.useState(1)
 
-  const handlePageChange = (event: any, number: number): void => {
+  const handlePageChange = (_event: any, number: number): void => {
     setPage(number)
   }
 
@@ -70,7 +70,7 @@ const DefaultPager = (): React.JSX.Element => {
 const ClassicPager = (): React.JSX.Element => {
   const [page, setPage] = React.useState(1)
 
-  const handlePageChange = (event: any, number: number): void => {
+  const handlePageChange = (_event: any, number: number): void => {
     setPage(number)
   }
 
@@ -124,7 +124,7 @@ const ClassicPager = (): React.JSX.Element => {
 const DashboardPager = (): React.JSX.Element => {
   const [page, setPage] = React.useState(1)
 
-  const handlePageChange = (event: any, number: number): void => {
+  const handlePageChange = (_event: any, number: number): void => {
     setPage(number)
   }
 

package/src/components/pager/pagination.tsx

@@ -1,22 +1,23 @@
 '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 cx from 'classnames'
 
 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'
+import type { Variant } from './@types'
+import type { UsePaginationItem, UsePaginationProps } from './hooks/types/usePagination'
 
 const PAGINATION_NAME = 'Pagination'
 const ROOT_NAME = 'Root'

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

@@ -1,13 +1,14 @@
 'use client'
 
+import type React from 'react'
+
 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 { usePager } from './pagination'
 import styles from './pagination.module.css'
+import type { PagerButtonProps, RefType } from './pagination'
 
 export const PreviousButton = ({
   ref,

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

@@ -1,4 +1,9 @@
-@layer infonomic-base, infonomic-functional, infonomic-utilities, infonomic-theme, infonomic-typography, infonomic-components;
+@layer infonomic-base,
+  infonomic-functional,
+  infonomic-utilities,
+  infonomic-theme,
+  infonomic-typography,
+  infonomic-components;
 
 @layer infonomic-components {
   .root {
@@ -61,4 +66,4 @@
   .corner {
     background: var(--surface-panel-scrollbar);
   }
-}
+}

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

@@ -1,7 +1,8 @@
+import type React from 'react'
+
 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> {}

package/src/components/scroll-to-top/scroll-to-top.module.css

@@ -1,4 +1,8 @@
-@layer infonomic-base, infonomic-utilities, infonomic-theme, infonomic-typography, infonomic-components;
+@layer infonomic-base,
+  infonomic-utilities,
+  infonomic-theme,
+  infonomic-typography,
+  infonomic-components;
 
 @layer infonomic-components {
   .scroll-to-top,
@@ -83,4 +87,4 @@
       right: 22px;
     }
   }
-}
+}

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

@@ -1,7 +1,8 @@
 'use client'
 
+import { type ComponentProps, type MouseEvent, useEffect, useState } from 'react'
+
 import cx from 'classnames'
-import { type ComponentProps, useEffect, useState } from 'react'
 
 import styles from './scroll-to-top.module.css'
 
@@ -28,8 +29,9 @@ export function ScrollToTop({
   ...props
 }: ScrollToTopProps) {
   const [show, setShow] = useState(false)
+  const iconTitle = ariaLabel.trim() ? ariaLabel : 'Scroll to top'
 
-  const handleOnClick = (e: React.MouseEvent<HTMLButtonElement>): void => {
+  const handleOnClick = (e: MouseEvent<HTMLButtonElement>): void => {
     window.scrollTo({ top: offset, left: 0, behavior: 'smooth' })
     onClick?.(e)
   }
@@ -76,6 +78,7 @@ export function ScrollToTop({
           focusable="false"
           viewBox="0 0 51 32"
         >
+          <title>{iconTitle}</title>
           <path d="M25.4,9.8L45.6,30l4.5-4.5L25.4,0.8L0.8,25.4L5.3,30L25.4,9.8z" />
         </svg>
       </span>

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

@@ -1,4 +1,9 @@
-@layer infonomic-base, infonomic-functional, infonomic-utilities, infonomic-theme, infonomic-typography, infonomic-components;
+@layer infonomic-base,
+  infonomic-functional,
+  infonomic-utilities,
+  infonomic-theme,
+  infonomic-typography,
+  infonomic-components;
 
 @layer infonomic-components {
   .section,
@@ -6,4 +11,4 @@
     width: 100%;
     position: relative;
   }
-}
+}