@byline/ui 6.8.0 → 6.9.0

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

@@ -0,0 +1,284 @@
+import type React from 'react'
+import { useState } from 'react'
+
+import { Checkbox } from './checkbox.js'
+
+export default {
+  title: 'Components/Inputs/Checkbox',
+  component: Checkbox,
+  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' }}>Outlined</h2>
+        <div
+          style={{ display: 'grid', gridTemplateColumns: 'repeat(3, minmax(0, 1fr))', gap: '1rem' }}
+        >
+          <div style={{ minWidth: 0 }}>
+            <Checkbox
+              onClick={handleOnClick}
+              aria-label="Foo Primary"
+              checked={checked}
+              id="primary"
+              name="primary"
+              label="Foo Primary"
+            />
+          </div>
+          <div style={{ minWidth: 0 }}>
+            <Checkbox
+              intent="secondary"
+              onClick={handleOnClick}
+              aria-label="Foo Secondary"
+              checked={checked}
+              id="secondary"
+              name="secondary"
+              label="Foo Secondary"
+            />
+          </div>
+          <div style={{ minWidth: 0 }}>
+            <Checkbox
+              intent="noeffect"
+              onClick={handleOnClick}
+              aria-label="Foo No Effect"
+              checked={checked}
+              id="noeffect"
+              name="noneffect"
+              label="Foo No Effect"
+            />
+          </div>
+          <div style={{ minWidth: 0 }}>
+            <Checkbox
+              intent="success"
+              onClick={handleOnClick}
+              aria-label="Foo Success"
+              checked={checked}
+              id="success"
+              name="success"
+              label="Foo Success"
+            />
+          </div>
+          <div style={{ minWidth: 0 }}>
+            <Checkbox
+              intent="info"
+              onClick={handleOnClick}
+              aria-label="Foo Info"
+              checked={checked}
+              id="info"
+              name="info"
+              label="Foo Info"
+            />
+          </div>
+          <div style={{ minWidth: 0 }}>
+            <Checkbox
+              intent="warning"
+              onClick={handleOnClick}
+              aria-label="Foo Warning"
+              checked={checked}
+              id="warning"
+              name="warning"
+              label="Foo Warning"
+            />
+          </div>
+          <div style={{ minWidth: 0 }}>
+            <Checkbox
+              intent="danger"
+              onClick={handleOnClick}
+              aria-label="Foo Danger"
+              checked={checked}
+              id="danger"
+              name="danger"
+              label="Foo Danger"
+            />
+          </div>
+        </div>
+      </div>
+      <div style={{ maxWidth: '800px', margin: '0 auto 2rem' }}>
+        <h2 style={{ fontSize: '1.25rem', marginBottom: '1rem' }}>Filled</h2>
+        <div
+          style={{ display: 'grid', gridTemplateColumns: 'repeat(3, minmax(0, 1fr))', gap: '1rem' }}
+        >
+          <div style={{ minWidth: 0 }}>
+            <Checkbox
+              onClick={handleOnClick}
+              variant="filled"
+              aria-label="Foo Primary"
+              checked={checked}
+              id="primary"
+              name="primary"
+              label="Foo Primary"
+            />
+          </div>
+          <div style={{ minWidth: 0 }}>
+            <Checkbox
+              intent="secondary"
+              onClick={handleOnClick}
+              variant="filled"
+              aria-label="Foo Secondary"
+              checked={checked}
+              id="secondary"
+              name="secondary"
+              label="Foo Secondary"
+            />
+          </div>
+          <div style={{ minWidth: 0 }}>
+            <Checkbox
+              intent="noeffect"
+              onClick={handleOnClick}
+              variant="filled"
+              aria-label="Foo No Effect"
+              checked={checked}
+              id="noeffect"
+              name="noneffect"
+              label="Foo No Effect"
+            />
+          </div>
+          <div style={{ minWidth: 0 }}>
+            <Checkbox
+              intent="success"
+              onClick={handleOnClick}
+              variant="filled"
+              aria-label="Foo Success"
+              checked={checked}
+              id="success"
+              name="success"
+              label="Foo Success"
+            />
+          </div>
+          <div style={{ minWidth: 0 }}>
+            <Checkbox
+              intent="info"
+              onClick={handleOnClick}
+              variant="filled"
+              aria-label="Foo Info"
+              checked={checked}
+              id="info"
+              name="info"
+              label="Foo Info"
+            />
+          </div>
+          <div style={{ minWidth: 0 }}>
+            <Checkbox
+              intent="warning"
+              onClick={handleOnClick}
+              variant="filled"
+              aria-label="Foo Warning"
+              checked={checked}
+              id="warning"
+              name="warning"
+              label="Foo Warning"
+            />
+          </div>
+          <div style={{ minWidth: 0 }}>
+            <Checkbox
+              intent="danger"
+              onClick={handleOnClick}
+              variant="filled"
+              aria-label="Foo Danger"
+              checked={checked}
+              id="danger"
+              name="danger"
+              label="Foo Danger"
+            />
+          </div>
+        </div>
+      </div>
+    </>
+  )
+}
+
+export const Checked = (): React.JSX.Element => {
+  const [checked, setChecked] = useState(true)
+  const handleOnClick = (): void => {
+    setChecked(!checked)
+  }
+  return (
+    <div style={{ maxWidth: '800px', margin: '4rem auto' }}>
+      <Checkbox
+        aria-label="Foo Checkbox"
+        onClick={handleOnClick}
+        checked={checked}
+        id="foo"
+        name="foo"
+        label="Foo Checkbox"
+      />
+    </div>
+  )
+}
+
+export const Sized = (): React.JSX.Element => {
+  const [checked, setChecked] = useState(true)
+  const handleOnClick = (): void => {
+    setChecked(!checked)
+  }
+  return (
+    <div style={{ maxWidth: '800px', margin: '2rem auto 2rem' }}>
+      <h2 style={{ fontSize: '1.25rem', marginBottom: '1rem' }}>Outlined</h2>
+      <div
+        style={{ display: 'grid', gridTemplateColumns: 'repeat(3, minmax(0, 1fr))', gap: '1rem' }}
+      >
+        <div style={{ minWidth: 0 }}>
+          <Checkbox
+            onClick={handleOnClick}
+            aria-label="Large Checkbox"
+            size="lg"
+            checked={checked}
+            id="large"
+            name="large"
+            label="Large Checkbox"
+          />
+        </div>
+        <div style={{ minWidth: 0 }}>
+          <Checkbox
+            onClick={handleOnClick}
+            aria-label="Medium Checkbox"
+            size="md"
+            checked={checked}
+            id="medium"
+            name="medium"
+            label="Medium Checkbox"
+          />
+        </div>
+        <div style={{ minWidth: 0 }}>
+          <Checkbox
+            onClick={handleOnClick}
+            aria-label="Small Checkbox"
+            size="sm"
+            checked={checked}
+            id="small"
+            name="small"
+            label="Small Checkbox"
+          />
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export const Disabled = (): React.JSX.Element => {
+  const [checked, setChecked] = useState(true)
+  const handleOnClick = (): void => {
+    setChecked(!checked)
+  }
+  return (
+    <div style={{ maxWidth: '800px', margin: '4rem auto' }}>
+      <Checkbox
+        aria-label="Foo Checkbox"
+        onClick={handleOnClick}
+        checked={checked}
+        disabled
+        id="foo"
+        name="foo"
+        label="Foo Checkbox"
+      />
+    </div>
+  )
+}

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

@@ -0,0 +1,189 @@
+import type React from 'react'
+
+import { CloseIcon, SearchIcon } from '../../icons/index.js'
+import { capitalize } from '../../utils/capitalize.js'
+import { intent } from '../@types/shared.js'
+import { IconButton } from '../button/icon-button.js'
+import { size, variant } from './@types/input.js'
+import { Input, InputAdornment } from './index.js'
+import { InputPassword } from './input-password.js'
+
+export default {
+  title: 'Components/Inputs/Text',
+  component: Input,
+  argTypes: {},
+}
+
+export const Default = (): React.JSX.Element => {
+  return (
+    <div style={{ margin: '2rem 0' }}>
+      <div
+        style={{
+          maxWidth: '600px',
+          margin: '0 auto',
+          display: 'flex',
+          flexDirection: 'column',
+          gap: '1rem',
+        }}
+      >
+        <Input
+          variant="outlined"
+          intent="primary"
+          id="name"
+          name="name"
+          label="Name"
+          placeHolder="Name"
+          helpText="Please enter your name."
+          disabled={false}
+          error={false}
+        />
+        <Input
+          variant="outlined"
+          intent="secondary"
+          required
+          id="foo"
+          name="foo"
+          label="Foo Required"
+          placeHolder="Foo"
+          helpText="Please enter your foo."
+          disabled={false}
+          error={false}
+        />
+        <Input
+          variant="outlined"
+          intent="primary"
+          label="Start and End Adornments"
+          startAdornment={
+            <InputAdornment>
+              <IconButton role="button" intent="noeffect" variant="text" ripple={false} size="xs">
+                <SearchIcon width="20px" height="20px" />
+              </IconButton>
+            </InputAdornment>
+          }
+          endAdornment={
+            <InputAdornment>
+              <IconButton role="button" intent="noeffect" variant="text" size="xs">
+                <CloseIcon width="16px" height="16px" />
+              </IconButton>
+            </InputAdornment>
+          }
+          id="search"
+          name="search"
+          placeHolder="Search"
+          disabled={false}
+          error={false}
+        />
+      </div>
+    </div>
+  )
+}
+
+export const Variants = (): React.JSX.Element => {
+  return (
+    <div style={{ maxWidth: '1100px', margin: '0 auto' }}>
+      {variant.map((variant) => {
+        return (
+          <div
+            key={variant}
+            style={{
+              marginBottom: '2rem',
+              display: 'grid',
+              gridTemplateColumns: 'repeat(4, minmax(0, 1fr))',
+              alignItems: 'center',
+              gap: '3rem',
+            }}
+          >
+            {size.map((size) => {
+              return (
+                <Input
+                  key={`${variant}=${size}`}
+                  variant={variant}
+                  inputSize={size}
+                  id={`${variant}-${size}`}
+                  name={`${variant}-${size}`}
+                  label={`${capitalize(variant)} ${size.toUpperCase()}`}
+                  placeHolder={`${capitalize(variant)} ${size.toUpperCase()}`}
+                  helpText={`Please enter your ${variant} ${size.toUpperCase()}.`}
+                  disabled={false}
+                  error={false}
+                />
+              )
+            })}
+            <Input
+              disabled={true}
+              key={`${variant}=${size}`}
+              variant={variant}
+              id={`${variant}-${size}`}
+              name={`${variant}-${size}`}
+              label={`${capitalize(variant)} Disabled`}
+              placeHolder={`${capitalize(variant)} disabled`}
+              helpText={`Please enter your ${variant} disabled.`}
+              error={false}
+            />
+          </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' }}>
+            <Input
+              key={i}
+              variant="outlined"
+              intent={i}
+              inputSize="md"
+              id={i}
+              name={i}
+              label={capitalize(i)}
+              placeHolder={capitalize(i)}
+              helpText={`Please enter your ${i}`}
+              disabled={false}
+              error={false}
+            />
+          </div>
+        )
+      })}
+    </div>
+  )
+}
+
+// biome-ignore lint/suspicious/noShadowRestrictedNames: <explanation>
+export const Error = (): React.JSX.Element => {
+  return (
+    <div style={{ maxWidth: '600px', margin: '0 auto' }}>
+      <Input
+        required
+        id="name"
+        name="name"
+        label="Name"
+        placeHolder="Name"
+        helpText="Please enter your name."
+        disabled={false}
+        error={true}
+        errorText="Please enter a valid name."
+      />
+    </div>
+  )
+}
+
+export const Password = (): React.JSX.Element => {
+  return (
+    <div style={{ maxWidth: '300px', margin: '0 auto' }}>
+      <InputPassword
+        required
+        id="password"
+        name="password"
+        label="Password"
+        placeHolder="Password"
+        helpText="Please enter your password."
+        disabled={false}
+      />
+    </div>
+  )
+}

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

@@ -0,0 +1,73 @@
+import type { Meta } from '@storybook/react-vite'
+
+import { RadioGroup as RadioGroupComponent, RadioGroupItem } from './radio-group.js'
+import type { RadioGroupValue } from './radio-group.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/Inputs/RadioGroup',
+  component: RadioGroupComponent,
+}
+
+export default meta
+
+const values1: RadioGroupValue[] = [
+  { id: 'rg1', label: 'One', value: '1' },
+  { id: 'rg2', label: 'Two', value: '2' },
+  { id: 'rg3', label: 'Three', value: '3' },
+]
+
+const values2: RadioGroupValue[] = [
+  { id: 'rg4', label: 'One', value: '1' },
+  { id: 'rg5', label: 'Two', value: '2' },
+  { id: 'rg6', label: 'Three', value: '3' },
+]
+
+const values3: RadioGroupValue[] = [
+  { id: 'rg7', label: 'One', value: '1' },
+  { id: 'rg8', label: 'Two', value: '2' },
+  { id: 'rg9', label: 'Three', value: '3' },
+]
+
+export const Default = (): React.JSX.Element => {
+  return (
+    <>
+      <div style={{ maxWidth: '600px', margin: '2rem auto' }}>
+        <RadioGroupComponent direction="row" defaultValue="1">
+          {values1.map((value) => (
+            <RadioGroupItem key={value.id} value={value.value} id={value.id} label={value.label} />
+          ))}
+        </RadioGroupComponent>
+      </div>
+      <div style={{ maxWidth: '600px', margin: '2rem auto' }}>
+        <RadioGroupComponent direction="row" defaultValue="2">
+          {values2.map((value) => (
+            <RadioGroupItem
+              intent="secondary"
+              key={value.id}
+              value={value.value}
+              id={value.id}
+              label={value.label}
+            />
+          ))}
+        </RadioGroupComponent>
+      </div>
+      <div style={{ maxWidth: '600px', margin: '2rem auto' }}>
+        <RadioGroupComponent direction="column" defaultValue="3">
+          {values3.map((value) => (
+            <RadioGroupItem
+              intent="success"
+              key={value.id}
+              value={value.value}
+              id={value.id}
+              label={value.label}
+            />
+          ))}
+        </RadioGroupComponent>
+      </div>
+    </>
+  )
+}

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

@@ -0,0 +1,70 @@
+import type React from 'react'
+
+import { Select, SelectItem, type SelectValue } from './select.js'
+
+export default {
+  title: 'Components/Inputs/Select',
+  component: Select,
+  argTypes: {},
+}
+
+const values: SelectValue[] = [
+  { label: 'One', value: '1' },
+  { label: 'Two', value: '2' },
+  { label: 'Three', value: '3' },
+  { label: 'Four', value: '4' },
+  { label: 'Five', value: '5' },
+]
+
+export const Default = (): React.JSX.Element => {
+  return (
+    <>
+      <div style={{ maxWidth: '600px', margin: '2rem auto' }}>
+        <Select
+          items={values}
+          size="xl"
+          placeholder="Select one..."
+          helpText="Extra Large select."
+        />
+      </div>
+      <div style={{ maxWidth: '600px', margin: '2rem auto' }}>
+        <Select items={values} size="lg" placeholder="Select one..." helpText="Large select." />
+      </div>
+      <div style={{ maxWidth: '600px', margin: '2rem auto' }}>
+        <Select items={values} size="md" placeholder="Select one..." helpText="Medium select." />
+      </div>
+      <div style={{ maxWidth: '600px', margin: '2rem auto' }}>
+        <Select items={values} size="sm" placeholder="Select one..." helpText="Small select." />
+      </div>
+      <div style={{ maxWidth: '600px', margin: '2rem auto' }}>
+        <Select
+          items={values}
+          size="xs"
+          placeholder="Select one..."
+          helpText="Extra small select."
+        />
+      </div>
+    </>
+  )
+}
+
+export const CustomChildren = (): React.JSX.Element => {
+  return (
+    <div style={{ maxWidth: '600px', margin: '2rem auto' }}>
+      <Select
+        items={values}
+        size="md"
+        placeholder="Select one..."
+        helpText="Custom children rendering."
+      >
+        {values.map((value) => (
+          <SelectItem key={value.value} value={value.value} label={value.label}>
+            {value.prefix}
+            {value.label}
+            {value.suffix}
+          </SelectItem>
+        ))}
+      </Select>
+    </div>
+  )
+}

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

@@ -0,0 +1,45 @@
+import type React from 'react'
+
+import { TextArea } from './index.js'
+
+export default {
+  title: 'Components/Inputs/TextArea',
+  component: TextArea,
+  argTypes: {},
+}
+
+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>
+  )
+}
+
+// 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>
+  )
+}