@byline/ui 6.8.0 → 6.9.0

package/src/components/button/button-variants.stories.tsx

@@ -0,0 +1,57 @@
+import type React from 'react'
+
+import type { Meta, StoryObj } from '@storybook/react-vite'
+
+import { capitalize } from '../../utils/capitalize.js'
+import { size } from '../@types/shared.js'
+import { variant } from './@types/button.js'
+import { Button } from './button.js'
+
+type Story = StoryObj<typeof Button>
+
+const AllVariants = (): React.JSX.Element => {
+  return (
+    <div style={{ maxWidth: '800px', margin: '2rem auto' }}>
+      {variant.map((variant: any) => {
+        return (
+          <div
+            key={variant}
+            style={{
+              display: 'grid',
+              gridTemplateColumns: 'repeat(4, minmax(0, 1fr)',
+              gap: '32px',
+              marginBottom: '32px',
+              alignItems: 'center',
+            }}
+          >
+            {size.map((size: any) => {
+              return (
+                <Button key={`${variant}=${size}`} size={size} variant={variant}>
+                  {`${capitalize(variant)} ${size.toUpperCase()}`}
+                </Button>
+              )
+            })}
+            <Button key={`${variant}=${size}`} disabled variant={variant}>
+              {`${capitalize(variant)} Disabled`}
+            </Button>
+          </div>
+        )
+      })}
+    </div>
+  )
+}
+
+export const ButtonVariants: Story = {
+  render: () => <AllVariants />,
+}
+
+const meta: Meta<typeof Button> = {
+  /* 👇 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/Button',
+  component: Button,
+}
+
+export default meta

package/src/components/button/combo-buttons.stories.tsx

@@ -0,0 +1,82 @@
+import type { Meta, StoryObj } from '@storybook/react-vite'
+
+import { ComboButton } from './combo-button.js'
+
+type Story = StoryObj<typeof ComboButton>
+
+const options = [
+  { label: 'Item 1', value: 'item1' },
+  { label: 'Item 2', value: 'item2' },
+  { label: 'Item 3', value: 'item3' },
+]
+
+const handleButtonClick = () => {
+  alert('Button clicked!')
+}
+
+const handleOptionSelect = (value: string) => {
+  alert(`Selected option: ${value}`)
+}
+
+const ComboButtonDemo = (): React.JSX.Element => {
+  return (
+    <div style={{ maxWidth: '600px', margin: '2rem auto' }}>
+      <div style={{ marginLeft: '3rem', marginBottom: '1.5rem' }}>
+        <h2 style={{ fontSize: '1.2rem', margin: '1rem 0' }}>Combo Button</h2>
+        <div style={{ display: 'flex', alignItems: 'center', gap: '1rem', marginBottom: '1.5rem' }}>
+          <ComboButton
+            size="sm"
+            options={options}
+            onButtonClick={handleButtonClick}
+            onOptionSelect={handleOptionSelect}
+          >
+            Combo Button
+          </ComboButton>
+        </div>
+      </div>
+      <div style={{ marginLeft: '3rem', marginBottom: '1.5rem' }}>
+        <h2 style={{ fontSize: '1.2rem', margin: '1rem 0' }}>No Options Combo Button</h2>
+        <div style={{ display: 'flex', alignItems: 'center', gap: '1rem', marginBottom: '1.5rem' }}>
+          <ComboButton
+            size="sm"
+            options={[]}
+            onButtonClick={handleButtonClick}
+            onOptionSelect={handleOptionSelect}
+          >
+            Combo Button
+          </ComboButton>
+        </div>
+      </div>
+
+      <div style={{ marginLeft: '3rem', marginBottom: '1.5rem' }}>
+        <h2 style={{ fontSize: '1.2rem', margin: '1rem 0' }}>Disabled Combo Button</h2>
+        <div style={{ display: 'flex', alignItems: 'center', gap: '1rem', marginBottom: '1.5rem' }}>
+          <ComboButton
+            size="sm"
+            options={options}
+            onButtonClick={handleButtonClick}
+            onOptionSelect={handleOptionSelect}
+            disabled={true}
+          >
+            Combo Button
+          </ComboButton>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export const ComboButtons: Story = {
+  render: () => <ComboButtonDemo />,
+}
+
+const meta: Meta<typeof ComboButton> = {
+  /* 👇 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/Button',
+  component: ComboButtonDemo,
+}
+
+export default meta

package/src/components/button/control-buttons.stories.tsx

@@ -0,0 +1,60 @@
+import type { Meta, StoryObj } from '@storybook/react-vite'
+
+import { DirectionalButton, PlayButton, StopButton } from './control-buttons.js'
+
+type Story = StoryObj<typeof DirectionalButton>
+
+const ControlsDemo = (): React.JSX.Element => {
+  return (
+    <div style={{ maxWidth: '600px', margin: '2rem auto' }}>
+      <div style={{ marginLeft: '3rem', marginBottom: '1.5rem' }}>
+        <h2 style={{ fontSize: '1.2rem', margin: '1rem 0' }}>Small</h2>
+        <div style={{ display: 'flex', alignItems: 'center', gap: '1rem', marginBottom: '1.5rem' }}>
+          <DirectionalButton direction="left" size="sm" />
+          <StopButton size="sm" />
+          <PlayButton size="sm" />
+          <DirectionalButton direction="right" size="sm" />
+          <DirectionalButton direction="up" size="sm" />
+          <DirectionalButton direction="down" size="sm" />
+        </div>
+      </div>
+      <div style={{ marginLeft: '3rem', marginBottom: '1.5rem' }}>
+        <h2 style={{ fontSize: '1.2rem', margin: '1rem 0' }}>Medium</h2>
+        <div style={{ display: 'flex', alignItems: 'center', gap: '1rem', marginBottom: '1.5rem' }}>
+          <DirectionalButton direction="left" size="md" />
+          <StopButton size="md" />
+          <PlayButton size="md" />
+          <DirectionalButton direction="right" size="md" />
+          <DirectionalButton direction="up" size="md" />
+          <DirectionalButton direction="down" size="md" />
+        </div>
+      </div>
+      <div style={{ marginLeft: '3rem', marginBottom: '1.5rem' }}>
+        <h2 style={{ fontSize: '1.2rem', margin: '1rem 0' }}>Large</h2>
+        <div style={{ display: 'flex', alignItems: 'center', gap: '1rem', marginBottom: '1.5rem' }}>
+          <DirectionalButton direction="left" size="lg" />
+          <StopButton size="lg" />
+          <PlayButton size="lg" />
+          <DirectionalButton direction="right" size="lg" />
+          <DirectionalButton direction="up" size="lg" />
+          <DirectionalButton direction="down" size="lg" />
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export const ControlButtons: Story = {
+  render: () => <ControlsDemo />,
+}
+
+const meta: Meta<typeof DirectionalButton> = {
+  /* 👇 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/Button',
+  component: ControlsDemo,
+}
+
+export default meta

package/src/components/button/copy-button.stories.tsx

@@ -0,0 +1,50 @@
+import type React from 'react'
+
+import type { Meta, StoryObj } from '@storybook/react-vite'
+
+import { intent } from '../@types/shared.js'
+import { variant } from './@types/button.js'
+import { CopyButton as CopyButtonComponent } from './copy-button.js'
+
+type Story = StoryObj<typeof CopyButtonComponent>
+
+const CopyDemo = (): React.JSX.Element => {
+  return (
+    <div style={{ marginLeft: '12rem', marginTop: '4rem' }}>
+      {intent.map((i) => {
+        return (
+          <div
+            key={i}
+            style={{ display: 'flex', alignItems: 'center', gap: '16px', marginBottom: '16px' }}
+          >
+            {variant.map((v) => {
+              return (
+                <CopyButtonComponent
+                  text="I should be in your clipboard."
+                  key={`${i}-${v}`}
+                  intent={i}
+                  variant={v}
+                />
+              )
+            })}
+          </div>
+        )
+      })}
+    </div>
+  )
+}
+
+export const CopyButtons: Story = {
+  render: () => <CopyDemo />,
+}
+
+const meta: Meta<typeof CopyButtonComponent> = {
+  /* 👇 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/Button',
+  component: CopyButtonComponent,
+}
+
+export default meta

package/src/components/button/icon-button.stories.tsx

@@ -0,0 +1,140 @@
+import type React from 'react'
+
+import type { Meta } from '@storybook/react-vite'
+
+import { UserIcon } from '../../icons/user-icon.js'
+import { size } from '../@types/shared.js'
+import { variant } from './@types/button.js'
+import { IconButton } from './icon-button.js'
+
+const getUserIconSize = (size: string) => {
+  switch (size) {
+    case 'xs':
+      return { width: '16px', height: '16px' }
+    case 'sm':
+      return { width: '18px', height: '18px' }
+    case 'md':
+      return { width: '22px', height: '22px' }
+    case 'lg':
+      return { width: '26px', height: '26px' }
+    case 'xl':
+      return { width: '30px', height: '30px' }
+    default:
+      return { width: '28px', height: '28px' }
+  }
+}
+
+export const IconButtonsRound = (): React.JSX.Element => {
+  return (
+    <div style={{ maxWidth: '800px', margin: '2rem auto' }}>
+      {variant.map((variant: any) => {
+        return (
+          <div
+            key={variant}
+            style={{
+              display: 'grid',
+              gridTemplateColumns: 'repeat(4, minmax(0, 1fr))',
+              gap: '32px',
+              marginBottom: '32px',
+              alignItems: 'center',
+              justifyContent: 'center',
+            }}
+          >
+            {size.map((size: any) => {
+              const iconSize = getUserIconSize(size)
+              return (
+                <div
+                  key={`${variant}=${size}`}
+                  style={{
+                    display: 'flex',
+                    alignItems: 'center',
+                    justifyContent: 'center',
+                  }}
+                >
+                  <IconButton size={size} variant={variant}>
+                    <UserIcon width={iconSize.width} height={iconSize.height} />
+                  </IconButton>
+                </div>
+              )
+            })}
+            <div
+              key={`${variant}=${size}`}
+              style={{
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'center',
+              }}
+            >
+              <IconButton disabled variant={variant}>
+                <UserIcon width="22px" height="22px" />
+              </IconButton>
+            </div>
+          </div>
+        )
+      })}
+    </div>
+  )
+}
+
+export const IconButtonsSquare = (): React.JSX.Element => {
+  return (
+    <div style={{ maxWidth: '800px', margin: '2rem auto' }}>
+      {variant.map((variant: any) => {
+        return (
+          <div
+            key={variant}
+            style={{
+              display: 'grid',
+              gridTemplateColumns: 'repeat(4, minmax(0, 1fr))',
+              gap: '32px',
+              marginBottom: '32px',
+              alignItems: 'center',
+              justifyContent: 'center',
+            }}
+          >
+            {size.map((size: any) => {
+              const iconSize = getUserIconSize(size)
+              return (
+                <div
+                  key={`${variant}=${size}`}
+                  style={{
+                    display: 'flex',
+                    alignItems: 'center',
+                    justifyContent: 'center',
+                  }}
+                >
+                  <IconButton size={size} square={true} variant={variant}>
+                    <UserIcon width={iconSize.width} height={iconSize.height} />
+                  </IconButton>
+                </div>
+              )
+            })}
+            <div
+              key={`${variant}=${size}`}
+              style={{
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'center',
+              }}
+            >
+              <IconButton disabled square={true} variant={variant}>
+                <UserIcon width="22px" height="22px" />
+              </IconButton>
+            </div>
+          </div>
+        )
+      })}
+    </div>
+  )
+}
+
+const meta: Meta<typeof IconButton> = {
+  /* 👇 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/Button',
+  component: IconButton,
+}
+
+export default meta

package/src/components/card/card.stories.tsx

@@ -0,0 +1,60 @@
+import type { Meta } from '@storybook/react-vite'
+
+import { Button } from '../button/button.js'
+import { Card as CardComponent } from './card.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: CardComponent,
+}
+
+export default meta
+
+export const Card = (): React.JSX.Element => {
+  return (
+    <div style={{ maxWidth: '600px', margin: '2rem auto' }}>
+      <div style={{ marginBottom: '48px' }}>
+        <div style={{ maxWidth: '400px', marginBottom: '24px' }}>
+          <CardComponent>
+            <CardComponent.Header>
+              <CardComponent.Title>
+                <h2>Normal Card</h2>
+              </CardComponent.Title>
+              <CardComponent.Description>
+                <p>Card description here.</p>
+              </CardComponent.Description>
+            </CardComponent.Header>
+            <CardComponent.Content>
+              <p>Card body with some text here.</p>
+            </CardComponent.Content>
+            <CardComponent.Footer>
+              <Button size="sm">A Button</Button>
+            </CardComponent.Footer>
+          </CardComponent>
+        </div>
+        <div style={{ maxWidth: '400px', marginBottom: '24px' }}>
+          <CardComponent hover={true}>
+            <CardComponent.Header>
+              <CardComponent.Title>
+                <h2>Card Hover</h2>
+              </CardComponent.Title>
+              <CardComponent.Description>
+                <p>Card description here.</p>
+              </CardComponent.Description>
+            </CardComponent.Header>
+            <CardComponent.Content>
+              <p>Card body with some text here.</p>
+            </CardComponent.Content>
+            <CardComponent.Footer>
+              <Button size="sm">A Button</Button>
+            </CardComponent.Footer>
+          </CardComponent>
+        </div>
+      </div>
+    </div>
+  )
+}

package/src/components/chips/chip.stories.tsx

@@ -0,0 +1,120 @@
+import { useState } from 'react'
+
+import type { Meta, StoryObj } from '@storybook/react-vite'
+
+import { CalendarIcon } from '../../icons/calendar-icon.js'
+import { capitalize } from '../../utils/capitalize.js'
+import { intent, size } from '../@types/shared.js'
+import { chipVariant } from './@types/chip.js'
+import { Chip } from './chip.js'
+
+type Story = StoryObj<typeof Chip>
+
+const Row = ({ children }: { children: React.ReactNode }) => (
+  <div style={{ display: 'flex', gap: '12px', flexWrap: 'wrap', alignItems: 'center' }}>
+    {children}
+  </div>
+)
+
+export const Intents: Story = {
+  render: () => (
+    <div style={{ maxWidth: '800px', margin: '2rem auto' }}>
+      <div style={{ display: 'flex', flexDirection: 'column', gap: '12px' }}>
+        {intent.map((i) => (
+          <Row key={i}>
+            <Chip intent={i}>{capitalize(i)} chip</Chip>
+            <Chip intent={i} variant="selectable" selected>
+              {capitalize(i)} selectable
+            </Chip>
+          </Row>
+        ))}
+      </div>
+    </div>
+  ),
+}
+
+export const Sizes: Story = {
+  render: () => (
+    <div style={{ maxWidth: '800px', margin: '2rem auto' }}>
+      <Row>
+        {size.map((s) => (
+          <Chip
+            variant={'selectable-removable'}
+            selected={true}
+            key={s}
+            size={s}
+          >{`Size ${s}`}</Chip>
+        ))}
+      </Row>
+    </div>
+  ),
+}
+
+export const Variants: Story = {
+  render: () => (
+    <div style={{ maxWidth: '800px', margin: '2rem auto' }}>
+      <div style={{ display: 'flex', flexDirection: 'column', gap: '12px' }}>
+        {chipVariant.map((variant) => (
+          <Row key={variant}>
+            <Chip variant={variant}>{capitalize(variant)} chip</Chip>
+            <Chip
+              variant={variant}
+              startIcon={<CalendarIcon height="16px" width="16px" />}
+              selected={true}
+            >{`${capitalize(variant)} with icon`}</Chip>
+            {(variant === 'removable' || variant === 'selectable-removable') && (
+              <Chip variant={variant} onRemove={() => {}}>
+                {`${capitalize(variant)} with remove`}
+              </Chip>
+            )}
+          </Row>
+        ))}
+      </div>
+    </div>
+  ),
+}
+
+export const Selectable: Story = {
+  render: () => {
+    const [selected, setSelected] = useState(false)
+    return (
+      <div style={{ maxWidth: '800px', margin: '2rem auto' }}>
+        <Row>
+          <Chip
+            variant="selectable"
+            intent="primary"
+            size="sm"
+            selected={selected}
+            onToggle={(next: boolean) => setSelected(next)}
+          >
+            Toggle me
+          </Chip>
+        </Row>
+      </div>
+    )
+  },
+}
+
+export const Removable: Story = {
+  render: () => (
+    <div style={{ maxWidth: '800px', margin: '2rem auto' }}>
+      <Row>
+        <Chip
+          variant="removable"
+          intent="primary"
+          onRemove={() => {}}
+          startIcon={<CalendarIcon height="16px" width="16px" />}
+        >
+          Removable chip
+        </Chip>
+      </Row>
+    </div>
+  ),
+}
+
+const meta: Meta<typeof Chip> = {
+  title: 'Components/Chip',
+  component: Chip,
+}
+
+export default meta

package/src/components/container/container.stories.tsx

@@ -0,0 +1,35 @@
+import type React from 'react'
+
+import type { Meta } from '@storybook/react-vite'
+
+import { Section } from '../section/section.js'
+import { Container as ContainerComponent } from './container.js'
+
+const meta: Meta<typeof ContainerComponent> = {
+  /* 👇 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/Container',
+  component: ContainerComponent,
+}
+
+export default meta
+
+export const Container = (): React.JSX.Element => {
+  return (
+    <Section style={{ height: '100vh', margin: '2rem auto' }}>
+      <ContainerComponent
+        className="primary-strong"
+        style={{
+          height: '400px',
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center',
+        }}
+      >
+        <p>I'm in a container with shy edges.</p>
+      </ContainerComponent>
+    </Section>
+  )
+}