@byline/ui 6.7.2 → 6.9.0

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

@@ -0,0 +1,75 @@
+import type React from 'react'
+
+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',
+        }}
+      >
+        {intent.map((intent: Intent) => {
+          if (intent !== 'noeffect') {
+            return (
+              <div style={{ marginBottom: '1rem' }} key={intent}>
+                <AlertComponent intent={intent}>
+                  This is a {intent} alert - with some additional text here.
+                </AlertComponent>
+              </div>
+            )
+          }
+          return null
+        })}
+        <AlertComponent intent="info" title="This is a title">
+          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',
+        }}
+      >
+        {intent.map((intent: Intent) => {
+          if (intent !== 'noeffect') {
+            return (
+              <div style={{ marginBottom: '1rem' }} key={intent}>
+                <AlertComponent intent={intent}>
+                  This is a {intent} alert - with some additional text here.
+                </AlertComponent>
+              </div>
+            )
+          }
+          return null
+        })}
+        <AlertComponent intent="info" title="This is a title">
+          This is an info alert with a title and with some additional text here.
+        </AlertComponent>
+      </div>
+    </>
+  )
+}
+
+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: Alerts,
+}
+
+export default meta

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

@@ -0,0 +1,40 @@
+import type React from 'react'
+
+import type { Meta, StoryObj } from '@storybook/react-vite'
+
+import { Button } from '../button/button.js'
+import { useToastManager } from './toast.js'
+
+function ToastDemo(): React.JSX.Element {
+  const toastManager = useToastManager()
+
+  const handleOpenToastClick = (): void => {
+    toastManager.add({
+      title: 'Note',
+      description:
+        'This is a test Toast notification that should appear when the button is clicked.',
+      data: {
+        intent: 'success',
+        iconType: 'success',
+        icon: true,
+        close: true,
+      },
+    })
+  }
+
+  return (
+    <div style={{ maxWidth: '600px', margin: '2rem 0' }}>
+      <Button onClick={handleOpenToastClick}>Open Toast</Button>
+    </div>
+  )
+}
+
+export const Toast: StoryObj = {
+  render: () => <ToastDemo />,
+}
+
+const meta: Meta = {
+  title: 'Components/Toast',
+}
+
+export default meta

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

@@ -0,0 +1,189 @@
+import React from 'react'
+
+import type { Meta, StoryObj } from '@storybook/react-vite'
+
+import { EventPager } from './event-pager.js'
+
+const meta: Meta<typeof EventPager> = {
+  /* 👇 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/Pager',
+  component: EventPager,
+}
+
+export default meta
+
+const DefaultPager = (): React.JSX.Element => {
+  const [page, setPage] = React.useState(1)
+
+  const handlePageChange = (_event: any, number: number): void => {
+    setPage(number)
+  }
+
+  return (
+    <>
+      <style>
+        {`
+        .event-pager {
+          margin-bottom: 1rem;
+        }
+      `}
+      </style>
+      <div style={{ margin: '2rem 0', maxWidth: '600px' }}>
+        <p style={{ marginBottom: '1rem' }}>Stateful Pagers: Current page: {page}</p>
+        <EventPager
+          page={page}
+          count={24}
+          className="event-pager"
+          onChange={handlePageChange}
+          showFirstButton
+          showLastButton
+          componentName="pager1"
+          aria-label="Pager 1"
+        />
+        <EventPager
+          page={page}
+          count={24}
+          className="event-pager"
+          onChange={handlePageChange}
+          componentName="pager2"
+          aria-label="Pager 2"
+        />
+        <EventPager
+          page={page}
+          count={24}
+          className="event-pager"
+          onChange={handlePageChange}
+          componentName="pager3"
+          hideNextButton
+          hidePrevButton
+          aria-label="Pager 3"
+        />
+      </div>
+    </>
+  )
+}
+
+const ClassicPager = (): React.JSX.Element => {
+  const [page, setPage] = React.useState(1)
+
+  const handlePageChange = (_event: any, number: number): void => {
+    setPage(number)
+  }
+
+  return (
+    <>
+      <style>
+        {`
+        .event-pager {
+          margin-bottom: 1rem;
+        }
+      `}
+      </style>
+      <div style={{ margin: '2rem 0', maxWidth: '600px' }}>
+        <p style={{ marginBottom: '1rem' }}>Stateful Pagers: Current page: {page}</p>
+        <EventPager
+          variant="classic"
+          className="event-pager"
+          page={page}
+          count={24}
+          onChange={handlePageChange}
+          showFirstButton
+          showLastButton
+          componentName="pager1"
+          aria-label="Pager 1"
+        />
+        <EventPager
+          variant="classic"
+          className="event-pager"
+          page={page}
+          count={24}
+          onChange={handlePageChange}
+          componentName="pager2"
+          aria-label="Pager 2"
+        />
+        <EventPager
+          variant="classic"
+          className="event-pager"
+          page={page}
+          count={24}
+          onChange={handlePageChange}
+          componentName="pager3"
+          hideNextButton
+          hidePrevButton
+          aria-label="Pager 3"
+        />
+      </div>
+    </>
+  )
+}
+
+const DashboardPager = (): React.JSX.Element => {
+  const [page, setPage] = React.useState(1)
+
+  const handlePageChange = (_event: any, number: number): void => {
+    setPage(number)
+  }
+
+  return (
+    <>
+      <style>
+        {`
+        .event-pager {
+          margin-bottom: 1rem;
+        }
+      `}
+      </style>
+      <div style={{ margin: '2rem 0', maxWidth: '600px' }}>
+        <p style={{ marginBottom: '1rem' }}>Stateful Pagers: Current page: {page}</p>
+        <EventPager
+          variant="dashboard"
+          className="event-pager"
+          page={page}
+          count={24}
+          onChange={handlePageChange}
+          showFirstButton
+          showLastButton
+          componentName="pager1"
+          aria-label="Pager 1"
+        />
+        <EventPager
+          variant="dashboard"
+          className="event-pager"
+          page={page}
+          count={24}
+          onChange={handlePageChange}
+          componentName="pager2"
+          aria-label="Pager 2"
+        />
+        <EventPager
+          variant="dashboard"
+          className="event-pager"
+          page={page}
+          count={24}
+          onChange={handlePageChange}
+          componentName="pager3"
+          hideNextButton
+          hidePrevButton
+          aria-label="Pager 3"
+        />
+      </div>
+    </>
+  )
+}
+
+type Story = StoryObj<typeof EventPager>
+
+export const Default: Story = {
+  render: () => <DefaultPager />,
+}
+
+export const Classic: Story = {
+  render: () => <ClassicPager />,
+}
+
+export const Dashboard: Story = {
+  render: () => <DashboardPager />,
+}

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', margin: '2rem 0' }}>
+      <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/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" lineHeight="1rem" lines={5}>
+        <div style={{ width: '100%' }} />
+      </ShimmerComponent>
+    </div>
+  )
+}

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

@@ -0,0 +1,94 @@
+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: '2rem 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/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',
+      margin: '2rem auto',
+      display: 'flex',
+      justifyContent: 'center',
+    }}
+  >
+    <TabsComponent style={{ width: '400px', minHeight: '235px' }} defaultValue="detailsTab">
+      <TabsComponent.List>
+        <TabsComponent.Trigger value="detailsTab" render={<Button size="sm" />}>
+          Details
+        </TabsComponent.Trigger>
+        <TabsComponent.Trigger value="rolesTab" render={<Button size="sm" />}>
+          Roles
+        </TabsComponent.Trigger>
+      </TabsComponent.List>
+      <TabsComponent.Content value="detailsTab" keepMounted={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/tooltip/tooltip.stories.tsx

@@ -0,0 +1,56 @@
+import type React from 'react'
+
+import type { Meta } from '@storybook/react-vite'
+
+import { Button } from '../button/button.js'
+import { Tooltip as TooltipComponent } from './tooltip.js'
+
+export const Tooltip = (): React.JSX.Element => {
+  return (
+    <div
+      style={{
+        maxWidth: '100px',
+        marginLeft: '12rem',
+        marginTop: '3rem',
+        display: 'flex',
+        flexDirection: 'column',
+        gap: '46px',
+        alignItems: 'center',
+        justifyContent: 'center',
+        padding: '16px',
+      }}
+    >
+      <TooltipComponent text="I'm a tooltip" side="top" sideOffset={8}>
+        <Button fullWidth={true} size="sm">
+          Top
+        </Button>
+      </TooltipComponent>
+      <TooltipComponent text="I'm a tooltip" side="left" sideOffset={8}>
+        <Button fullWidth={true} size="sm">
+          Left
+        </Button>
+      </TooltipComponent>
+      <TooltipComponent text="I'm a tooltip" side="right" sideOffset={8}>
+        <Button fullWidth={true} size="sm">
+          Right
+        </Button>
+      </TooltipComponent>
+      <TooltipComponent text="I'm a tooltip" side="bottom" sideOffset={8}>
+        <Button fullWidth={true} size="sm">
+          Bottom
+        </Button>
+      </TooltipComponent>
+    </div>
+  )
+}
+
+const meta: Meta<typeof TooltipComponent> = {
+  /* 👇 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: TooltipComponent,
+}
+
+export default meta

package/src/icons/icons.stories.tsx

@@ -0,0 +1,67 @@
+import type React from 'react'
+
+import * as AllIcons from './index.js'
+
+const IconsDemo = (): React.JSX.Element => (
+  <div
+    className="icon-demo"
+    style={{
+      margin: '16px 0',
+      display: 'grid',
+      gridTemplateColumns: 'repeat(auto-fit, minmax(80px, 1fr))',
+      gap: '12px',
+    }}
+  >
+    {Object.entries(AllIcons)
+      .filter(([name, Icon]) => name !== 'IconElement' && typeof Icon === 'function')
+      .map(([name, Icon]) => {
+        // Cast to any to avoid complex typing for the import * object
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        const Component = Icon as React.ComponentType<any>
+        return (
+          <div
+            key={name}
+            style={{
+              display: 'flex',
+              flexDirection: 'column',
+              alignItems: 'center',
+              justifyContent: 'center',
+            }}
+          >
+            <Component
+              style={{ marginBottom: '8px', width: '28px', height: '28px' }}
+              width="28px"
+              height="28px"
+            />
+            <div
+              style={{
+                fontSize: '10px',
+                textOverflow: 'ellipsis',
+                overflow: 'hidden',
+                whiteSpace: 'nowrap',
+              }}
+              title={name}
+            >
+              {name}
+            </div>
+          </div>
+        )
+      })}
+  </div>
+)
+
+export default {
+  title: 'Icons/All',
+  component: IconsDemo,
+  argTypes: {},
+}
+
+export const All = (): React.JSX.Element => {
+  return (
+    <div style={{ marginBottom: '1.5rem' }}>
+      <div style={{ maxWidth: '700px' }}>
+        <IconsDemo />
+      </div>
+    </div>
+  )
+}

package/src/icons/index.stories.tsx

@@ -0,0 +1,24 @@
+import type React from 'react'
+
+import { DangerIcon } from './danger-icon.js'
+import { InfoIcon } from './info-icon.js'
+import { SuccessIcon } from './success-icon.js'
+import { WarningIcon } from './warning-icon.js'
+
+export default {
+  title: 'Icons/Sprites',
+  argTypes: {},
+}
+
+export const Sprites = (): React.JSX.Element => {
+  return (
+    <div style={{ marginBottom: '1.5rem' }}>
+      <div style={{ maxWidth: '800px', display: 'grid', gridTemplateColumns: 'repeat(12, 1fr)' }}>
+        <InfoIcon />
+        <WarningIcon />
+        <SuccessIcon />
+        <DangerIcon />
+      </div>
+    </div>
+  )
+}

package/src/icons/index.ts

@@ -36,6 +36,7 @@ export * from './light-icon.js'
 export * from './location-pin-icon.js'
 export * from './markdown-icon.js'
 export * from './moon-icon.js'
+export * from './passkey-icon.js'
 export * from './plus-icon.js'
 export * from './primary-icon.js'
 export * from './refresh-icon.js'