@byline/ui 6.7.2 → 6.9.0

package/src/components/dropdown/dropdown.stories.tsx

@@ -0,0 +1,108 @@
+import type { Meta, StoryObj } from '@storybook/react-vite'
+
+import { SignOutIcon } from '../../icons/sign-out-icon.js'
+import { UserIcon } from '../../icons/user-icon.js'
+import { Button } from '../button/button.js'
+import { Dropdown as DropdownComponent } from './dropdown.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/Dropdown',
+  component: DropdownComponent.Root,
+}
+
+export default meta
+
+type Story = StoryObj<typeof DropdownComponent.Root>
+
+export const Dropdown: Story = {
+  args: {
+    modal: false,
+  },
+  render: (args) => {
+    return (
+      <>
+        <style>
+          {`
+          .dropdown-item-content {
+            display: flex;
+            align-items: center;
+          }
+
+          .dropdown-item-content-icon {
+            display: inline-block;
+            width: 28px;
+          }
+
+          .dropdown-item-content-text {
+            text-align: left;
+            display: inline-block;
+            width: 100%;
+            flex: 1;
+          }
+
+        `}
+        </style>
+        <div
+          style={{
+            maxWidth: '400px',
+            margin: '2rem 0 24px',
+            display: 'flex',
+            justifyContent: 'center',
+          }}
+        >
+          <DropdownComponent.Root {...args}>
+            <DropdownComponent.Trigger render={<Button size="sm" variant="filled" />}>
+              +
+            </DropdownComponent.Trigger>
+
+            <DropdownComponent.Portal>
+              <DropdownComponent.Content align="end" data-side="top" sideOffset={10}>
+                <DropdownComponent.Item>
+                  <div className="dropdown-item-content">
+                    <span className="dropdown-item-content-icon">
+                      <UserIcon width="22px" height="22px" />
+                    </span>
+                    <span className="dropdown-item-content-text">Account</span>
+                  </div>
+                </DropdownComponent.Item>
+                <DropdownComponent.Item>
+                  <div className="dropdown-item-content">
+                    <span className="dropdown-item-content-icon" />
+                    <span className="dropdown-item-content-text">Menu Item 2</span>
+                  </div>
+                </DropdownComponent.Item>
+                <DropdownComponent.Separator />
+                <DropdownComponent.Item>
+                  <div className="dropdown-item-content">
+                    <span className="dropdown-item-content-icon">
+                      <SignOutIcon />
+                    </span>
+                    <span className="dropdown-item-content-text">
+                      <button
+                        type="button"
+                        style={{
+                          textAlign: 'left',
+                          display: 'inline-block',
+                          width: '100%',
+                          flex: 1,
+                          lineHeight: 1,
+                          color: 'var(--text)',
+                        }}
+                      >
+                        Sign Out
+                      </button>
+                    </span>
+                  </div>
+                </DropdownComponent.Item>
+              </DropdownComponent.Content>
+            </DropdownComponent.Portal>
+          </DropdownComponent.Root>
+        </div>
+      </>
+    )
+  },
+}

package/src/components/hamburger/hamburger.stories.tsx

@@ -0,0 +1,33 @@
+import type React from 'react'
+import { useState } from 'react'
+
+import type { Meta } from '@storybook/react-vite'
+
+import { Section } from '../section/section.js'
+import { Hamburger as HamburgerComponent } from './hamburger.js'
+
+const meta: Meta<typeof HamburgerComponent> = {
+  /* 👇 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/Hamburger',
+  component: HamburgerComponent,
+}
+
+export default meta
+
+export const Hamburger = (): React.JSX.Element => {
+  const [open, setOpen] = useState(false)
+
+  return (
+    <Section style={{ height: '100vh', margin: '2rem auto' }}>
+      <HamburgerComponent
+        open={open}
+        onChange={(open) => {
+          setOpen(open)
+        }}
+      />
+    </Section>
+  )
+}

package/src/components/inputs/autocomplete.stories.tsx

@@ -0,0 +1,189 @@
+import type React from 'react'
+
+import { capitalize } from '../../utils/capitalize.js'
+import { intent } from '../@types/shared.js'
+import { size, variant } from './@types/autocomplete.js'
+import { Autocomplete, AutocompleteItem } from './autocomplete.js'
+
+export default {
+  title: 'Components/Inputs/Autocomplete',
+  component: Autocomplete,
+  argTypes: {},
+}
+
+interface Tag {
+  id: string
+  value: string
+}
+
+const tags: Tag[] = [
+  { id: 't1', value: 'feature' },
+  { id: 't2', value: 'fix' },
+  { id: 't3', value: 'bug' },
+  { id: 't4', value: 'docs' },
+  { id: 't5', value: 'internal' },
+  { id: 't6', value: 'mobile' },
+  { id: 'c-accordion', value: 'component: accordion' },
+  { id: 'c-alert-dialog', value: 'component: alert dialog' },
+  { id: 'c-autocomplete', value: 'component: autocomplete' },
+  { id: 'c-avatar', value: 'component: avatar' },
+  { id: 'c-checkbox', value: 'component: checkbox' },
+  { id: 'c-dialog', value: 'component: dialog' },
+  { id: 'c-input', value: 'component: input' },
+  { id: 'c-select', value: 'component: select' },
+  { id: 'c-tabs', value: 'component: tabs' },
+  { id: 'c-toast', value: 'component: toast' },
+  { id: 'c-tooltip', value: 'component: tooltip' },
+]
+
+export const Default = (): React.JSX.Element => {
+  return (
+    <div style={{ maxWidth: '600px', margin: '2rem auto' }}>
+      <Autocomplete<Tag>
+        id="tags-default"
+        label="Search tags"
+        placeholder="e.g. feature"
+        helpText="Start typing to filter tags."
+        items={tags}
+      >
+        {(tag: Tag) => (
+          <AutocompleteItem key={tag.id} value={tag}>
+            {tag.value}
+          </AutocompleteItem>
+        )}
+      </Autocomplete>
+    </div>
+  )
+}
+
+export const Variants = (): React.JSX.Element => {
+  return (
+    <div style={{ maxWidth: '1100px', margin: '0 auto' }}>
+      {variant.map((v) => {
+        return (
+          <div
+            key={v}
+            style={{
+              marginBottom: '2rem',
+              display: 'grid',
+              gridTemplateColumns: 'repeat(4, minmax(0, 1fr))',
+              alignItems: 'center',
+              gap: '3rem',
+            }}
+          >
+            {size.map((s) => {
+              return (
+                <Autocomplete<Tag>
+                  key={`${v}-${s}`}
+                  id={`${v}-${s}`}
+                  variant={v}
+                  inputSize={s}
+                  label={`${capitalize(v)} ${s.toUpperCase()}`}
+                  placeholder={`${capitalize(v)} ${s.toUpperCase()}`}
+                  helpText={`${capitalize(v)} variant, ${s.toUpperCase()} size.`}
+                  items={tags}
+                >
+                  {(tag: Tag) => (
+                    <AutocompleteItem key={tag.id} value={tag}>
+                      {tag.value}
+                    </AutocompleteItem>
+                  )}
+                </Autocomplete>
+              )
+            })}
+            <Autocomplete<Tag>
+              key={`${v}-disabled`}
+              id={`${v}-disabled`}
+              variant={v}
+              disabled
+              label={`${capitalize(v)} Disabled`}
+              placeholder={`${capitalize(v)} disabled`}
+              helpText={`${capitalize(v)} variant, disabled.`}
+              items={tags}
+            >
+              {(tag: Tag) => (
+                <AutocompleteItem key={tag.id} value={tag}>
+                  {tag.value}
+                </AutocompleteItem>
+              )}
+            </Autocomplete>
+          </div>
+        )
+      })}
+    </div>
+  )
+}
+
+export const Intents = (): React.JSX.Element => {
+  return (
+    <div style={{ maxWidth: '800px', margin: '0 auto' }}>
+      {intent.map((i) => {
+        return (
+          <div key={i} style={{ marginBottom: '12px' }}>
+            <Autocomplete<Tag>
+              id={`intent-${i}`}
+              variant="outlined"
+              intent={i}
+              inputSize="md"
+              label={capitalize(i)}
+              placeholder={capitalize(i)}
+              helpText={`${capitalize(i)} intent autocomplete.`}
+              items={tags}
+            >
+              {(tag: Tag) => (
+                <AutocompleteItem key={tag.id} value={tag}>
+                  {tag.value}
+                </AutocompleteItem>
+              )}
+            </Autocomplete>
+          </div>
+        )
+      })}
+    </div>
+  )
+}
+
+// biome-ignore lint/suspicious/noShadowRestrictedNames: storybook convention
+export const Error = (): React.JSX.Element => {
+  return (
+    <div style={{ maxWidth: '600px', margin: '0 auto' }}>
+      <Autocomplete<Tag>
+        id="tags-error"
+        required
+        label="Search tags"
+        placeholder="e.g. feature"
+        helpText="Please select a tag."
+        error={true}
+        errorText="Please select a valid tag."
+        items={tags}
+      >
+        {(tag: Tag) => (
+          <AutocompleteItem key={tag.id} value={tag}>
+            {tag.value}
+          </AutocompleteItem>
+        )}
+      </Autocomplete>
+    </div>
+  )
+}
+
+export const WithoutCustomItem = (): React.JSX.Element => {
+  const fruits = ['Apple', 'Banana', 'Cherry', 'Date', 'Elderberry', 'Fig', 'Grape']
+  return (
+    <div style={{ maxWidth: '600px', margin: '2rem auto' }}>
+      <Autocomplete<string>
+        id="fruits"
+        label="Search fruits"
+        placeholder="e.g. Apple"
+        helpText="Using plain strings without AutocompleteItem wrapper."
+        items={fruits}
+      >
+        {(fruit: string) => (
+          <AutocompleteItem key={fruit} value={fruit}>
+            {fruit}
+          </AutocompleteItem>
+        )}
+      </Autocomplete>
+    </div>
+  )
+}

package/src/components/inputs/calendar.stories.tsx

@@ -0,0 +1,141 @@
+import { useRef, useState } from 'react'
+
+import type { Meta } from '@storybook/react-vite'
+import { format } from 'date-fns'
+import type { DateRange } from 'react-day-picker'
+
+import { Button } from '../button/button.js'
+import { Calendar as CalendarComponent } from './calendar.js'
+
+const meta: Meta<typeof CalendarComponent> = {
+  /* 👇 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/Inputs/Calendar',
+  component: CalendarComponent,
+}
+
+export default meta
+
+export const Calendar = (): React.JSX.Element => {
+  const [_isOpen, setIsOpen] = useState(false)
+  const [time, _setTime] = useState<string>('05:00')
+  const [date, setDate] = useState<Date>(new Date())
+  const [month, setMonth] = useState<Date>(date)
+
+  const calendarRef = useRef<HTMLDivElement | null>(null)
+
+  return (
+    <div style={{ height: '100vh', margin: '2rem 0' }}>
+      <div ref={calendarRef} style={{ position: 'relative', width: 'fit-content', margin: 'auto' }}>
+        <CalendarComponent
+          required
+          mode="single"
+          captionLayout="dropdown"
+          selected={date}
+          month={month}
+          onMonthChange={setMonth}
+          onSelect={(selectedDate: Date) => {
+            if (selectedDate) {
+              const [hours, minutes] = time.split(':')
+              selectedDate.setHours(Number.parseInt(hours, 10), Number.parseInt(minutes, 10))
+              setDate(selectedDate)
+              setMonth(selectedDate)
+            }
+          }}
+          onDayClick={() => setIsOpen(false)}
+          // fromYear={2000}
+          // toYear={new Date().getFullYear()}
+          // disabled={(date: Date) =>
+          //   Number(date) < Date.now() - 1000 * 60 * 60 * 24 ||
+          //   Number(date) > Date.now() + 1000 * 60 * 60 * 24 * 30
+          // }
+        />
+        <div style={{ paddingLeft: '1rem', paddingTop: '1rem' }}>
+          {date ? `${format(date, 'PPPp')}` : 'No date selected'}
+        </div>
+        <div style={{ paddingLeft: '1rem', paddingTop: '1rem' }}>
+          <Button
+            size="sm"
+            intent="noeffect"
+            style={{ marginTop: '0.5rem' }}
+            onClick={() => {
+              const today = new Date()
+              setDate(today)
+              setMonth(today)
+            }}
+          >
+            Today
+          </Button>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export const Multiple = (): React.JSX.Element => {
+  const [_isOpen, setIsOpen] = useState(false)
+  const [dates, setDates] = useState<Date[] | undefined>([new Date()])
+
+  const calendarRef = useRef<HTMLDivElement | null>(null)
+
+  return (
+    <div style={{ height: '100vh', margin: '2rem 0' }}>
+      <div ref={calendarRef} style={{ position: 'relative', width: 'fit-content', margin: 'auto' }}>
+        <CalendarComponent
+          required
+          mode="multiple"
+          captionLayout="dropdown"
+          selected={dates}
+          onSelect={(selectedDates: Date[]) => {
+            if (selectedDates) {
+              // selectedDate.setHours(Number.parseInt(hours), Number.parseInt(minutes))
+              setDates(selectedDates)
+            }
+          }}
+          onDayClick={() => setIsOpen(false)}
+          // fromYear={2000}
+          // toYear={new Date().getFullYear()}
+          // disabled={(date: Date) =>
+          //   Number(date) < Date.now() - 1000 * 60 * 60 * 24 ||
+          //   Number(date) > Date.now() + 1000 * 60 * 60 * 24 * 30
+          // }
+        />
+      </div>
+    </div>
+  )
+}
+
+export const Range = (): React.JSX.Element => {
+  const [_isOpen, setIsOpen] = useState(false)
+  const [dateRange, setDateRange] = useState<DateRange | undefined>(undefined)
+
+  const calendarRef = useRef<HTMLDivElement | null>(null)
+
+  return (
+    <div style={{ height: '100vh', margin: '2rem 0' }}>
+      <div ref={calendarRef} style={{ position: 'relative', width: 'fit-content', margin: 'auto' }}>
+        <CalendarComponent
+          required
+          mode="range"
+          captionLayout="dropdown"
+          selected={dateRange}
+          onSelect={(selectedDateRange: DateRange) => {
+            if (selectedDateRange) {
+              // selectedDate.setHours(Number.parseInt(hours), Number.parseInt(minutes))
+              setDateRange(selectedDateRange)
+            }
+          }}
+          onDayClick={() => setIsOpen(false)}
+          // fromYear={2000}
+          // toYear={new Date().getFullYear()}
+          // disabled={(date: Date) =>
+          //   Number(date) < Date.now() - 1000 * 60 * 60 * 24 ||
+          //   Number(date) > Date.now() + 1000 * 60 * 60 * 24 * 30
+          // }
+        />
+      </div>
+    </div>
+  )
+}

package/src/components/inputs/checkbox-group.stories.tsx

@@ -0,0 +1,43 @@
+import type React from 'react'
+import { useState } from 'react'
+
+import { CheckboxGroup } from './checkbox-group.js'
+
+export default {
+  title: 'Components/Inputs/CheckboxGroup',
+  component: CheckboxGroup,
+  argTypes: {},
+}
+
+export const Default = (): React.JSX.Element => {
+  const [checked, setChecked] = useState(false)
+
+  const _handleOnClick = (): void => {
+    console.log('clicked')
+    setChecked(!checked)
+  }
+
+  return (
+    <div style={{ maxWidth: '800px', margin: '2rem auto 2rem' }}>
+      <h2 style={{ fontSize: '1.25rem', marginBottom: '1rem' }}>Checkbox Group</h2>
+      <div
+        style={{ display: 'grid', gridTemplateColumns: 'repeat(3, minmax(0, 1fr))', gap: '1rem' }}
+      >
+        <div style={{ minWidth: 0 }}>
+          <CheckboxGroup
+            groupName="roles"
+            // TODO: Nullability of role.name
+            checkBoxes={[
+              { id: 'admin', label: 'Admin' },
+              { id: 'editor', label: 'Editor' },
+              { id: 'viewer', label: 'Viewer' },
+            ]}
+            // onChange={(selected) => {
+            //   handleOnClick(selected)
+            // }}
+          />
+        </div>
+      </div>
+    </div>
+  )
+}