@infonomic/uikit 1.5.0 → 2.1.0

package/src/components/shimmer/shimmer.tsx

@@ -0,0 +1,70 @@
+import cx from 'classnames'
+import type React from 'react'
+import styles from './shimmer.module.css'
+
+interface ShimmerProps {
+  className?: string
+  width?: string | number
+  height?: string | number
+  borderRadius?: string
+  variant?: 'text' | 'rectangular' | 'circular'
+  lines?: number
+  children?: React.ReactNode
+}
+
+export function Shimmer({
+  className,
+  width = '100%',
+  height = '1rem',
+  borderRadius,
+  variant = 'rectangular',
+  lines = 1,
+  children,
+  ...other
+}: ShimmerProps): React.JSX.Element {
+  const shimmerStyle = {
+    width: typeof width === 'number' ? `${width}px` : width,
+    height: typeof height === 'number' ? `${height}px` : height,
+    borderRadius: borderRadius,
+  }
+
+  const getVariantClass = () => {
+    switch (variant) {
+      case 'text':
+        return styles.text
+      case 'circular':
+        return styles.circular
+      case 'rectangular':
+      default:
+        return styles.rectangular
+    }
+  }
+
+  if (variant === 'text' && lines > 1) {
+    return (
+      <div className={cx(styles.shimmerContainer, className)} {...other}>
+        {Array.from({ length: lines }, (_, index) => (
+          <div
+            key={`shimmer-line-${index}`}
+            className={cx(styles.shimmer, styles.text)}
+            style={{
+              ...shimmerStyle,
+              width: index === lines - 1 ? '75%' : '100%',
+              marginBottom: index === lines - 1 ? 0 : '0.5rem',
+            }}
+          />
+        ))}
+      </div>
+    )
+  }
+
+  return (
+    <div
+      className={cx(styles.shimmer, getVariantClass(), className)}
+      style={shimmerStyle}
+      {...other}
+    >
+      {children}
+    </div>
+  )
+}

package/src/components/table/table.module.css

@@ -0,0 +1,100 @@
+@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 {
+
+  /* 'table--container break-normal overflow-hidden relative shadow-md rounded-md my-[16px] dark:border dark:border-canvas-700', */
+  .table-container {
+    display: block;
+    overflow: hidden;
+    word-break: normal;
+    position: relative;
+    box-shadow: var(--shadow-sm);
+    border-radius: var(--border-radius-sm);
+    border: 1px solid var(--border-color);
+  }
+
+  .table-scroller {
+    overflow-x: auto;
+    max-width: calc(100vw - 32px);
+  }
+
+  .table {
+    width: 100%;
+    border-collapse: collapse;
+    margin: 0;
+    font-size: var(--font-size-sm);
+    text-align: left;
+  }
+
+  /* 'text-xs text-gray-700 uppercase bg-canvas-100 dark:bg-canvas-700 dark:text-gray-400', */
+  .table-header {
+    font-size: var(--font-size-xs);
+    text-transform: uppercase;
+    background-color: var(--canvas-50);
+  }
+
+  /* 'border-b border-solid border-canvas-200 bg-white hover:bg-canvas-100/50 dark:border-canvas-700/60 dark:bg-canvas-800/50 dark:hover:bg-canvas-700/50', */
+  .table-row {
+    border-bottom: 1px solid var(--canvas-50);
+    background-color: white;
+  }
+
+  .table-row:hover {
+    background-color: var(--canvas-50);
+  }
+
+  /* 'whitespace-nowrap px-2 py-4 text-sm text-gray-700 uppercase bg-canvas-100/50 dark:bg-canvas-800/50 dark:text-gray-200', */
+  .table-heading-cell {
+    white-space: nowrap;
+    padding: var(--spacing-2) var(--spacing-2);
+    font-size: var(--font-size-sm);
+    text-transform: uppercase;
+    background-color: var(--canvas-50);
+  }
+
+  /* not-prose px-2 py-2 text-sm [&_a]:underline */
+  .table-cell {
+    padding: var(--spacing-2);
+    font-size: var(--font-size-sm);
+
+    & a {
+      text-decoration: underline;
+    }
+  }
+
+  /* 'text-xs text-gray-700 uppercase bg-canvas-100 dark:bg-canvas-700 dark:text-gray-400', */
+  .table-footer {
+    font-size: var(--font-size-xs);
+    text-transform: uppercase;
+    background-color: var(--canvas-100);
+  }
+
+  /* 🌙 Dark via `.dark` class. We rely on the 
+  * consuming application to detect a user's preferred
+  * color scheme - either by header or cookie, and set
+  * a root html class accordingly
+  */
+  :global(.dark) {
+    .table-header {
+      background-color: var(--canvas-700);
+    }
+
+    .table-row:not(:where([class~="not-dark"], [class~="not-dark"] *)) {
+      border-bottom: 1px solid var(--canvas-700);
+      background-color: var(--canvas-800);
+    }
+
+    .table-row:hover:not(:where([class~="not-dark"], [class~="not-dark"] *)) {
+      background-color: oklch(from var(--canvas-800) calc(l * 1.1) c h)
+    }
+
+    .table-heading-cell:not(:where([class~="not-dark"], [class~="not-dark"] *)) {
+      background-color: oklch(from var(--canvas-800) calc(l * 1.1) c h);
+    }
+
+    .table-footer:not(:where([class~="not-dark"], [class~="not-dark"] *)) {
+      background-color: var(--canvas-800);
+    }
+  }
+}

package/src/components/table/table.stories.tsx

@@ -0,0 +1,95 @@
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+import type React from 'react'
+
+import type { Meta } from '@storybook/react-vite'
+
+import { Table as TableComponent } from './table.js'
+
+const meta: Meta = {
+  /* 👇 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',
+  component: TableComponent,
+}
+
+export default meta
+
+export const Table = (): React.JSX.Element => {
+  return (
+    <div style={{ maxWidth: '960px', margin: '0 auto' }}>
+      <TableComponent.Container>
+        <TableComponent>
+          <TableComponent.Header>
+            <TableComponent.Row>
+              <TableComponent.HeadingCell scope="col">
+                <span>Check</span>
+              </TableComponent.HeadingCell>
+              <TableComponent.HeadingCell scope="col">
+                <p>Heading 1</p>
+              </TableComponent.HeadingCell>
+              <TableComponent.HeadingCell scope="col">
+                <p>Heading 2</p>
+              </TableComponent.HeadingCell>
+              <TableComponent.HeadingCell scope="col">
+                <p>Heading 3</p>
+              </TableComponent.HeadingCell>
+            </TableComponent.Row>
+          </TableComponent.Header>
+
+          <TableComponent.Body>
+            <TableComponent.Row>
+              <TableComponent.Cell>
+                <span>Check</span>
+              </TableComponent.Cell>
+              <TableComponent.Cell>1</TableComponent.Cell>
+              <TableComponent.Cell>2</TableComponent.Cell>
+              <TableComponent.Cell>3</TableComponent.Cell>
+            </TableComponent.Row>
+            <TableComponent.Row>
+              <TableComponent.Cell>
+                <span>Check</span>
+              </TableComponent.Cell>
+              <TableComponent.Cell>1</TableComponent.Cell>
+              <TableComponent.Cell>2</TableComponent.Cell>
+              <TableComponent.Cell>3</TableComponent.Cell>
+            </TableComponent.Row>
+            <TableComponent.Row>
+              <TableComponent.Cell>
+                <span>Check</span>
+              </TableComponent.Cell>
+              <TableComponent.Cell>1</TableComponent.Cell>
+              <TableComponent.Cell>2</TableComponent.Cell>
+              <TableComponent.Cell>3</TableComponent.Cell>
+            </TableComponent.Row>
+            <TableComponent.Row>
+              <TableComponent.Cell>
+                <span>Check</span>
+              </TableComponent.Cell>
+              <TableComponent.Cell>1</TableComponent.Cell>
+              <TableComponent.Cell>2</TableComponent.Cell>
+              <TableComponent.Cell>3</TableComponent.Cell>
+            </TableComponent.Row>
+          </TableComponent.Body>
+          <TableComponent.Footer>
+            <TableComponent.Row>
+              <TableComponent.HeadingCell scope="col">
+                <span>Check</span>
+              </TableComponent.HeadingCell>
+              <TableComponent.HeadingCell scope="col">
+                <p>Heading 1</p>
+              </TableComponent.HeadingCell>
+              <TableComponent.HeadingCell scope="col">
+                <p>Heading 2</p>
+              </TableComponent.HeadingCell>
+              <TableComponent.HeadingCell scope="col">
+                <p>Heading 3</p>
+              </TableComponent.HeadingCell>
+            </TableComponent.Row>
+          </TableComponent.Footer>
+        </TableComponent>
+      </TableComponent.Container>
+    </div>
+  )
+}

package/src/components/table/table.tsx

@@ -0,0 +1,165 @@
+import cx from 'classnames'
+import type * as React from 'react'
+
+import styles from './table.module.css'
+
+export type TableProps = React.JSX.IntrinsicElements['table']
+
+function Table({
+  ref,
+  className,
+  children,
+  ...rest
+}: TableProps & {
+  ref?: React.RefObject<HTMLTableElement>
+}): React.JSX.Element {
+  const classes = cx(styles.table, 'table', className)
+
+  return (
+    <table ref={ref} className={classes} {...rest}>
+      {children}
+    </table>
+  )
+}
+
+export type TableContainerProps = React.JSX.IntrinsicElements['div']
+
+function Container({
+  ref,
+  className,
+  children,
+  ...rest
+}: TableContainerProps & {
+  ref?: React.RefObject<HTMLDivElement>
+}) {
+  const classes = cx(styles['table-container'], 'table-container', className)
+  return (
+    <div ref={ref} className={classes} {...rest}>
+      <div className={cx('table-scroller', styles['table-scroller'])}>{children}</div>
+    </div>
+  )
+}
+
+export type TableBodyProps = React.JSX.IntrinsicElements['tbody']
+
+function Body({
+  ref,
+  className,
+  children,
+  ...rest
+}: TableBodyProps & {
+  ref?: React.RefObject<HTMLTableSectionElement>
+}): React.JSX.Element {
+  return (
+    <tbody ref={ref} className={cx('table-body', className)} {...rest}>
+      {children}
+    </tbody>
+  )
+}
+
+export type TableHeaderProps = React.JSX.IntrinsicElements['thead']
+
+function Header({
+  ref,
+  className,
+  children,
+  ...rest
+}: TableHeaderProps & {
+  ref?: React.RefObject<HTMLTableSectionElement>
+}): React.JSX.Element {
+  const classes = cx(styles['table-header'], 'table-header', className)
+
+  return (
+    <thead ref={ref} className={classes} {...rest}>
+      {children}
+    </thead>
+  )
+}
+
+export type TableRowProps = React.JSX.IntrinsicElements['tr']
+
+function Row({
+  ref,
+  className,
+  children,
+  ...rest
+}: TableRowProps & {
+  ref?: React.RefObject<HTMLTableRowElement>
+}): React.JSX.Element {
+  const classes = cx(styles['table-row'], 'table-row', className)
+
+  return (
+    <tr ref={ref} className={classes} {...rest}>
+      {children}
+    </tr>
+  )
+}
+
+export type TableHeadingCellProps = React.JSX.IntrinsicElements['th']
+
+function HeadingCell({
+  ref,
+  className,
+  children,
+  ...rest
+}: TableHeadingCellProps & {
+  ref?: React.RefObject<HTMLTableCellElement>
+}): React.JSX.Element {
+  const classes = cx(styles['table-heading-cell'], 'table-heading-cell', 'not-prose', className)
+  return (
+    <th ref={ref} className={classes} {...rest}>
+      {children}
+    </th>
+  )
+}
+
+export type TableCellProps = React.JSX.IntrinsicElements['td']
+
+function Cell({
+  ref,
+  className,
+  children,
+  ...rest
+}: TableCellProps & {
+  ref?: React.RefObject<HTMLTableCellElement>
+}): React.JSX.Element {
+  const classes = cx(styles['table-cell'], 'table-cell', className)
+
+  return (
+    <td ref={ref} className={classes} {...rest}>
+      {children}
+    </td>
+  )
+}
+
+export type TableFooterProps = React.JSX.IntrinsicElements['tfoot']
+
+function Footer({
+  ref,
+  className,
+  children,
+  ...rest
+}: TableFooterProps & {
+  ref?: React.RefObject<HTMLTableSectionElement>
+}): React.JSX.Element {
+  const classes = cx(
+    'text-xs text-gray-700 uppercase bg-canvas-100 dark:bg-canvas-700 dark:text-gray-400',
+    className
+  )
+
+  return (
+    <tfoot ref={ref} className={classes} {...rest}>
+      {children}
+    </tfoot>
+  )
+}
+
+Table.Container = Container
+Table.Body = Body
+Table.Header = Header
+Table.Row = Row
+Table.HeadingCell = HeadingCell
+Table.Cell = Cell
+Table.Footer = Footer
+
+export { Table }

package/src/components/tabs/tabs.module.css

@@ -0,0 +1,64 @@
+@layer infonomic-base, infonomic-utilities, infonomic-theme, infonomic-typography, infonomic-components;
+
+@layer infonomic-components {
+
+  .tabs-root {
+    display: flex;
+    padding: var(--spacing-2);
+    flex-direction: column;
+    gap: var(--spacing-1);
+    border-radius: var(--border-radius-md);
+    border: 1px solid var(--border-color);
+  }
+
+  .tabs-list {
+    display: flex;
+    width: 100%;
+    gap: var(--gap-2);
+    align-items: center;
+    border-radius: var(--border-radius-md);
+    padding: var(--spacing-1);
+    border: 1px solid var(--border-color);
+
+    &:focus-visible {
+      outline: none;
+    }
+  }
+
+  .tabs-trigger {
+    align-items: center;
+    justify-content: center;
+    white-space: nowrap;
+    width: 100%;
+
+    /* &[data-state="active"] {
+      color: var(----primary-600);
+      box-shadow:
+        inset 0 -1px 0 0 currentColor,
+        0 1px 0 0 currentColor;
+    } */
+
+    &:focus {
+      position: relative;
+      box-shadow: 0 0 0 2px black;
+    }
+  }
+
+  .tabs-content {
+    margin-top: var(--spacing-2);
+    padding: 6px;
+    outline: none;
+
+    &[data-state="inactive"] {
+      display: none;
+    }
+
+    &:focus {
+      outline: none;
+    }
+
+    &:focus-visible {
+      outline: none;
+    }
+  }
+}

package/src/components/tabs/tabs.stories.tsx

@@ -0,0 +1,47 @@
+import type React from 'react'
+
+import type { Meta } from '@storybook/react-vite'
+
+import { Button } from '../button/button.js'
+import { Tabs as TabsComponent } from './tabs.js'
+
+const meta: Meta = {
+  /* 👇 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',
+  component: TabsComponent,
+}
+
+export default meta
+
+export const Tabs = (): React.JSX.Element => (
+  <div
+    style={{
+      maxWidth: '700px',
+      marginBottom: '24px',
+      display: 'flex',
+      justifyContent: 'center',
+    }}
+  >
+    <TabsComponent style={{ width: '400px', minHeight: '235px' }} defaultValue="detailsTab">
+      <TabsComponent.List>
+        <TabsComponent.Trigger asChild value="detailsTab">
+          <Button size="sm">Details</Button>
+        </TabsComponent.Trigger>
+        <TabsComponent.Trigger asChild value="rolesTab">
+          <Button size="sm">Roles</Button>
+        </TabsComponent.Trigger>
+      </TabsComponent.List>
+      <TabsComponent.Content value="detailsTab" forceMount={true}>
+        <p>Details tab content here. Some more text to make this tab content area a bit longer.</p>
+        <p>Details tab content here. Some more text to make this tab content area a bit longer.</p>
+      </TabsComponent.Content>
+      <TabsComponent.Content value="rolesTab">
+        <p>Roles tab content here. Some more text to make this tab content area a bit longer.</p>
+        <p>Roles tab content here. Some more text to make this tab content area a bit longer.</p>
+      </TabsComponent.Content>
+    </TabsComponent>
+  </div>
+)

package/src/components/tabs/tabs.tsx

@@ -0,0 +1,75 @@
+'use client'
+
+import cx from 'classnames'
+
+import { Tabs as TabsPrimitive } from 'radix-ui'
+import type * as React from 'react'
+
+import styles from './tabs.module.css'
+
+const Tabs = ({
+  ref,
+  className,
+  ...props
+}: React.ComponentPropsWithoutRef<typeof TabsPrimitive.Root> & {
+  ref?: React.RefObject<React.ComponentRef<typeof TabsPrimitive.Root>>
+}) => (
+  <TabsPrimitive.Root
+    ref={ref}
+    className={cx(styles['tabs-root'], 'tabs-root', className)}
+    {...props}
+  />
+)
+Tabs.displayName = TabsPrimitive.Root.displayName
+
+const TabsList = ({
+  ref,
+  className,
+  ...props
+}: React.ComponentPropsWithoutRef<typeof TabsPrimitive.List> & {
+  ref?: React.RefObject<React.ComponentRef<typeof TabsPrimitive.List>>
+}) => (
+  <TabsPrimitive.List
+    ref={ref}
+    className={cx(styles['tabs-list'], 'tabs-list', className)}
+    {...props}
+  />
+)
+TabsList.displayName = TabsPrimitive.List.displayName
+
+const TabsTrigger = ({
+  ref,
+  className,
+  ...props
+}: React.ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger> & {
+  ref?: React.RefObject<React.ComponentRef<typeof TabsPrimitive.Trigger>>
+}) => (
+  <TabsPrimitive.Trigger
+    ref={ref}
+    className={cx(styles['tabs-trigger'], 'tabs-trigger', className)}
+    {...props}
+  />
+)
+TabsTrigger.displayName = TabsPrimitive.Trigger.displayName
+
+const TabsContent = ({
+  ref,
+  className,
+  ...props
+}: React.ComponentPropsWithoutRef<typeof TabsPrimitive.Content> & {
+  ref?: React.RefObject<React.ComponentRef<typeof TabsPrimitive.Content>>
+}) => (
+  <TabsPrimitive.Content
+    ref={ref}
+    forceMount={true}
+    className={cx(styles['tabs-content'], 'tabs-content', className)}
+    {...props}
+  />
+)
+TabsContent.displayName = TabsPrimitive.Content.displayName
+
+Tabs.List = TabsList
+Tabs.Trigger = TabsTrigger
+Tabs.Content = TabsContent
+
+export { Tabs }

package/src/components/timeline/timeline.module.css

@@ -0,0 +1,87 @@
+@layer infonomic-base, infonomic-utilities, infonomic-theme, infonomic-typography, infonomic-components;
+
+@layer infonomic-components {
+  .timeline {
+    margin-left: var(--spacing-2);
+  }
+
+  .timeline-root {
+    position: relative;
+    list-style: none;
+    margin-left: var(--spacing-2);
+    padding-left: var(--spacing-8);
+    border-left-width: var(--border-width-thin);
+    border-left-color: var(--border-color);
+    border-left-style: var(--border-style-solid);
+  }
+
+  .timeline-item {
+    margin: 0 0 var(--spacing-6) 0;
+  }
+
+  /* 'absolute block flex items-center justify-center w-[36px] h-[36px] rounded-full -mt-[3px] sm:mt-0 -left-[18px] border-[6px] bg-secondary-600 dark:bg-secondary-900 border-gray-50 dark:border-canvas-600', */
+  .timeline-icon {
+    position: absolute;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 36px;
+    height: 36px;
+    border-radius: 50%;
+    margin-top: -3px;
+    left: -18px;
+    border-width: 6px;
+    color: white;
+    background-color: var(--primary-600);
+    border-color: var(--gray-50);
+  }
+
+  .timeline-icon svg {
+    display: block;
+    width: 60%;
+    color: white;
+  }
+
+  /* 'text-[1.5rem] sm:text-[1.57rem] leading-[1.2] !m-0 font-semibold' */
+  .timeline-heading {
+    font-size: 1.5rem;
+    line-height: 1.2;
+    margin: 0;
+    font-weight: var(--font-weight-semibold);
+  }
+
+  /* 'block mt-2 mb-2 text-[0.9em] font-medium leading-none text-gray-900 dark:text-gray-100' */
+  .timeline-date {
+    display: block;
+    margin-top: var(--spacing-2);
+    margin-bottom: var(--spacing-2);
+    font-size: 0.9em;
+    font-weight: var(--font-weight-medium);
+    line-height: 0;
+    color: var(--gray-600);
+  }
+
+  /* '[&_p]:m-0 [&_p]:mb-4 [&_p]:sm:m-0 [&_p]:sm:mb-4 text-lg font-normal text-gray-900 dark:text-gray-300' */
+  .timeline-content {
+    margin: 0;
+    margin-bottom: var(--spacing-4);
+    font-size: 1.125rem;
+    font-weight: var(--font-weight-normal);
+
+    & p {
+      margin: 0;
+      margin-bottom: var(--spacing-4);
+    }
+  }
+
+  /* 🌙 Dark via `.dark` class. We rely on the 
+  * consuming application to detect a user's preferred
+  * color scheme - either by header or cookie, and set
+  * a root html class accordingly
+  */
+  :global(.dark) {
+    .timeline-icon:not(:where([class~="not-dark"], [class~="not-dark"] *)) {
+      border-color: var(--canvas-600);
+    }
+  }
+}