@pnx-mixtape/mxds 0.0.1

package/src/Form/Label/Label.stories.ts

@@ -0,0 +1,34 @@
+import { Meta, StoryObj } from "@storybook/html"
+import Component from "./label.twig"
+import "../form.css"
+
+const modifierOptions: string[] = ["label--inline"]
+
+type LabelType = {
+  modifier_class?: (typeof modifierOptions)[number]
+}
+
+const meta: Meta<LabelType> = {
+  title: "Form/Label",
+  tags: ["autodocs"],
+  component: Component,
+  argTypes: {
+    modifier_class: {
+      options: modifierOptions,
+      control: { type: "select" },
+    },
+  },
+}
+
+export default meta
+type Story = StoryObj<LabelType>
+
+export const Label: Story = {
+  args: {},
+}
+
+export const Inline: Story = {
+  args: {
+    modifier_class: "label--inline",
+  },
+}

package/src/Form/Label/__snapshots__/FormLabel.stories.tsx.snap

@@ -0,0 +1,16 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Form/Label Label smoke-test 1`] = `
+<label for="mix-label">
+  Label
+</label>
+`;
+
+exports[`Form/Label Required smoke-test 1`] = `
+<label for="mix-label">
+  Label
+  <span>
+    (required)
+  </span>
+</label>
+`;

package/src/Form/Label/__snapshots__/Label.stories.ts.snap

@@ -0,0 +1,23 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Form/Label Inline smoke-test 1`] = `
+<label for="field1-"
+       class="label--inline"
+>
+  A form label
+</label>
+<input id="field1-"
+       type="text"
+>
+`;
+
+exports[`Form/Label Label smoke-test 1`] = `
+<label for="field1-"
+       class
+>
+  A form label
+</label>
+<input id="field1-"
+       type="text"
+>
+`;

package/src/Form/Label/label.twig

@@ -0,0 +1,2 @@
+<label for="field1-{{ id }}" class="{{ modifier_class }}">A form label</label>
+<input id="field1-{{ id }}" type="text">

package/src/Form/README.md

@@ -0,0 +1,11 @@
+# Form
+
+### How to use
+
+**CSS**
+
+`@import '@pnx-mixtape/mxds/form.cs';`
+
+**JSX Components**
+
+- JSX import: `import { Form, FormItem, FormText, FormLabel } from '@pnx-mixtape/mxds/react';`

package/src/Form/Radio/FormRadio.stories.tsx

@@ -0,0 +1,37 @@
+import { Meta, StoryObj } from "@storybook/react"
+import FormRadio, { Radio as GroupRadio } from "./FormRadio"
+
+const meta: Meta<typeof GroupRadio> = {
+  tags: ["no-snapshot"],
+  component: GroupRadio,
+  parameters: {
+    a11y: {
+      config: {
+        rules: [
+          {
+            // ID's are not unique due to test-runner.
+            id: "label",
+            enabled: false,
+          },
+        ],
+      },
+    },
+  },
+}
+
+export default meta
+export const Radios: StoryObj<typeof FormRadio> = {
+  render: ({ children, ...args }) => (
+    <FormRadio {...args}>{children}</FormRadio>
+  ),
+  args: {
+    label: "Radio group",
+    children: (
+      <>
+        <GroupRadio value="1">Option #1</GroupRadio>
+        <GroupRadio value="2">Option #2</GroupRadio>
+        <GroupRadio value="3">Option #3</GroupRadio>
+      </>
+    ),
+  },
+}

package/src/Form/Radio/FormRadio.tsx

@@ -0,0 +1,80 @@
+import {
+  JSX,
+  PropsWithChildren,
+  useRef,
+  createContext,
+  useContext,
+  useId,
+} from "react"
+import {
+  useRadio,
+  useRadioGroup,
+  AriaRadioProps,
+  AriaRadioGroupProps,
+} from "react-aria"
+import { useRadioGroupState, RadioGroupState } from "react-stately"
+import classNames from "classnames"
+import FormItem from "../Item/FormItem"
+import { FormStatus } from "../../enums"
+
+const RadioContext = createContext<RadioGroupState>(null)
+
+type FormRadioProps = PropsWithChildren &
+  AriaRadioGroupProps & {
+    label: string
+  }
+
+const FormRadio = ({
+  label,
+  children,
+  ...props
+}: FormRadioProps): JSX.Element => {
+  const state = useRadioGroupState(props)
+  const { radioGroupProps, labelProps } = useRadioGroup(props, state)
+
+  return (
+    <FormItem fieldset {...radioGroupProps}>
+      <legend {...labelProps}>{label}</legend>
+      <RadioContext.Provider value={state}>{children}</RadioContext.Provider>
+    </FormItem>
+  )
+}
+
+type RadioProps = PropsWithChildren &
+  AriaRadioProps & {
+    status?: FormStatus
+    className?: string
+  }
+
+const Radio = ({
+  children,
+  status = FormStatus.DEFAULT,
+  className = "",
+  ...props
+}: RadioProps): JSX.Element => {
+  const id = useId()
+  const ref = useRef<HTMLInputElement>()
+  const state = useContext(RadioContext)
+  const { inputProps } = useRadio(props, state, ref)
+
+  const classes = classNames("form__radio", {
+    className,
+    error: status === FormStatus.INVALID,
+    success: status === FormStatus.VALID,
+  })
+
+  return (
+    <div className={classes}>
+      <input
+        id={id}
+        {...inputProps}
+        ref={ref}
+        aria-invalid={status === FormStatus.INVALID}
+      />
+      <label htmlFor={id}>{children}</label>
+    </div>
+  )
+}
+
+export default FormRadio
+export { Radio }

package/src/Form/Radio/Radios.stories.ts

@@ -0,0 +1,47 @@
+import { Meta, StoryObj } from "@storybook/html"
+import Component from "./input-radio.twig"
+import "../form.css"
+
+const modifierOptions: string[] = ["form__item--inline"]
+
+type RadiosType = {
+  modifier_class?: (typeof modifierOptions)[number]
+}
+
+const meta: Meta<RadiosType> = {
+  title: "Form/Radios",
+  tags: ["autodocs"],
+  component: Component,
+  argTypes: {
+    modifier_class: {
+      options: modifierOptions,
+      control: { type: "select" },
+    },
+  },
+  parameters: {
+    a11y: {
+      config: {
+        rules: [
+          {
+            // ID's are not unique due to test-runner.
+            id: "label",
+            enabled: false,
+          },
+        ],
+      },
+    },
+  },
+}
+
+export default meta
+type Story = StoryObj<RadiosType>
+
+export const Radios: Story = {
+  args: {},
+}
+
+export const Inline: Story = {
+  args: {
+    modifier_class: "form__item--inline",
+  },
+}

package/src/Form/Radio/__snapshots__/Radios.stories.ts.snap

@@ -0,0 +1,125 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Form/Radios Inline smoke-test 1`] = `
+<fieldset aria-describedby="unique-0"
+          class="fieldset--plain form__item"
+>
+  <legend>
+    A set of radio inputs
+  </legend>
+  <div class="form__radio form__item--inline">
+    <input id="radio1"
+           name="radio"
+           type="radio"
+    >
+    <label for="radio1">
+      This is an example
+    </label>
+  </div>
+  <div class="form__radio form__item--inline">
+    <input id="radio2"
+           name="radio"
+           type="radio"
+    >
+    <label for="radio2">
+      This is an example
+    </label>
+  </div>
+  <div class="form__radio form__item--inline">
+    <input id="radio3"
+           name="radio"
+           type="radio"
+    >
+    <label for="radio3">
+      This is an example
+    </label>
+  </div>
+  <div class="form__radio form__item--inline">
+    <input id="radio4"
+           name="radio"
+           type="radio"
+    >
+    <label for="radio4">
+      This is an example
+    </label>
+  </div>
+  <div class="form__radio form__item--inline">
+    <input id="radio5"
+           name="radio"
+           type="radio"
+           disabled
+    >
+    <label for="radio5">
+      This is a disabled example
+    </label>
+  </div>
+  <div class="form__description"
+       id="unique-0"
+       role="tooltip"
+  >
+    Help text that provides additional information about the field.
+  </div>
+</fieldset>
+`;
+
+exports[`Form/Radios Radios smoke-test 1`] = `
+<fieldset aria-describedby="unique-0"
+          class="fieldset--plain form__item"
+>
+  <legend>
+    A set of radio inputs
+  </legend>
+  <div class="form__radio ">
+    <input id="radio1"
+           name="radio"
+           type="radio"
+    >
+    <label for="radio1">
+      This is an example
+    </label>
+  </div>
+  <div class="form__radio ">
+    <input id="radio2"
+           name="radio"
+           type="radio"
+    >
+    <label for="radio2">
+      This is an example
+    </label>
+  </div>
+  <div class="form__radio ">
+    <input id="radio3"
+           name="radio"
+           type="radio"
+    >
+    <label for="radio3">
+      This is an example
+    </label>
+  </div>
+  <div class="form__radio ">
+    <input id="radio4"
+           name="radio"
+           type="radio"
+    >
+    <label for="radio4">
+      This is an example
+    </label>
+  </div>
+  <div class="form__radio ">
+    <input id="radio5"
+           name="radio"
+           type="radio"
+           disabled
+    >
+    <label for="radio5">
+      This is a disabled example
+    </label>
+  </div>
+  <div class="form__description"
+       id="unique-0"
+       role="tooltip"
+  >
+    Help text that provides additional information about the field.
+  </div>
+</fieldset>
+`;

package/src/Form/Radio/input-radio.twig

@@ -0,0 +1,24 @@
+<fieldset aria-describedby="radio{{ id }}Help" class="fieldset--plain form__item">
+  <legend>A set of radio inputs</legend>
+  <div class="form__radio {{ modifier_class }}">
+    <input id="radio1{{ id }}" name="radio" type="radio">
+    <label for="radio1{{ id }}">This is an example</label>
+  </div>
+  <div class="form__radio {{ modifier_class }}">
+    <input id="radio2{{ id }}" name="radio" type="radio">
+    <label for="radio2{{ id }}">This is an example</label>
+  </div>
+  <div class="form__radio {{ modifier_class }}">
+    <input id="radio3{{ id }}" name="radio" type="radio">
+    <label for="radio3{{ id }}">This is an example</label>
+  </div>
+  <div class="form__radio {{ modifier_class }}">
+    <input id="radio4{{ id }}" name="radio" type="radio">
+    <label for="radio4{{ id }}">This is an example</label>
+  </div>
+  <div class="form__radio {{ modifier_class }}">
+    <input id="radio5{{ id }}" name="radio" type="radio" disabled>
+    <label for="radio5{{ id }}">This is a disabled example</label>
+  </div>
+  <div class="form__description" id="radio{{ id }}Help" role="tooltip">Help text that provides additional information about the field.</div>
+</fieldset>

package/src/Form/Search/TextInputWithInlineButton.stories.ts

@@ -0,0 +1,16 @@
+import { Meta, StoryObj } from "@storybook/html"
+import Component from "./input-text-inline-submit.twig"
+import "../form.css"
+
+const meta: Meta<typeof Component> = {
+  title: "Form/Text Input/InlineSubmit",
+  tags: ["autodocs"],
+  component: Component,
+}
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const InlineSubmit: Story = {
+  args: {},
+}

package/src/Form/Search/__snapshots__/TextInputWithInlineButton.stories.ts.snap

@@ -0,0 +1,26 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Form/Text Input/InlineSubmit InlineSubmit smoke-test 1`] = `
+<div class="form__item">
+  <label for="input">
+    Input text field
+  </label>
+  <span class="input__text--inline">
+    <input type="text"
+           id="input"
+           aria-describedby="unique-0"
+           class
+    >
+    <input class="button button--primary"
+           type="submit"
+           value="Search"
+    >
+  </span>
+  <div class="form__description"
+       id="unique-0"
+       role="tooltip"
+  >
+    Help text that provides additional information about the field.
+  </div>
+</div>
+`;

package/src/Form/Search/input-text-inline-submit.twig

@@ -0,0 +1,8 @@
+<div class="form__item">
+  <label for="input{{ id }}">Input text field</label>
+  <span class="input__text--inline">
+    <input type="text" id="input{{ id }}" aria-describedby="input{{ id }}Help" class="{{ modifier_class }}">
+    <input class="button button--primary" type="submit" value="Search"/>
+  </span>
+  <div class="form__description" id="input{{ id }}Help" role="tooltip">Help text that provides additional information about the field.</div>
+</div>

package/src/Form/Select/FormSelect.stories.tsx

@@ -0,0 +1,34 @@
+import { Meta, StoryObj } from "@storybook/react"
+import Component from "./FormSelect"
+
+const meta: Meta<typeof Component> = {
+  title: "Form/Select",
+  component: Component,
+  argTypes: {
+    status: {
+      control: { type: "radio" },
+      options: ["default", "valid", "invalid"],
+    },
+  },
+  args: {
+    id: "mix-select",
+    "aria-label": "Select",
+    options: [
+      {
+        value: "1",
+        label: "Option 1",
+      },
+      {
+        value: "2",
+        label: "Option 2",
+      },
+      {
+        value: "3",
+        label: "Option 3",
+      },
+    ],
+  },
+}
+
+export default meta
+export const Select: StoryObj<typeof Component> = {}

package/src/Form/Select/FormSelect.tsx

@@ -0,0 +1,67 @@
+import {
+  JSX,
+  ComponentPropsWithoutRef,
+  useState,
+  ChangeEventHandler,
+} from "react"
+import classNames from "classnames"
+import { FormStatus } from "../../enums"
+
+type OptionProps = ComponentPropsWithoutRef<"option"> & {
+  label: string
+  value: string
+}
+
+const Option = ({ label, value }: OptionProps): JSX.Element => (
+  <option value={value}>{label}</option>
+)
+
+type FormSelectProps = ComponentPropsWithoutRef<"select"> & {
+  options: OptionProps[]
+  label?: string
+  className?: string
+  status?: FormStatus
+  selected?: string
+}
+
+const FormSelect = ({
+  id,
+  options,
+  label = "Select one",
+  status = FormStatus.DEFAULT,
+  className = "",
+  selected = "",
+  ...props
+}: FormSelectProps): JSX.Element => {
+  const [inputValue, setInputValue] = useState<string>(selected)
+  const handleChange: ChangeEventHandler<HTMLSelectElement> = ({
+    currentTarget,
+  }) => setInputValue(currentTarget.value)
+
+  const classes = classNames(className, {
+    error: status === FormStatus.INVALID,
+    success: status === FormStatus.VALID,
+  })
+
+  const items = options.map(({ label: optionLabel, value }) => (
+    <Option label={optionLabel} value={value} key={`${value}:${optionLabel}`} />
+  ))
+
+  return (
+    <select
+      id={id}
+      className={classes}
+      onChange={handleChange}
+      value={inputValue}
+      aria-describedby={`${id}-help`}
+      aria-invalid={status === FormStatus.INVALID}
+      {...props}
+    >
+      <Option label={label} value="" />
+      {items}
+    </select>
+  )
+}
+
+export default FormSelect
+export { Option }

package/src/Form/Select/Select.stories.ts

@@ -0,0 +1,40 @@
+import { Meta, StoryObj } from "@storybook/html"
+import Component from "./select.twig"
+import "../form.css"
+
+const modifierOptions: string[] = ["input--wide", "input--small"]
+
+type SelectType = {
+  modifier_class?: (typeof modifierOptions)[number]
+}
+
+const meta: Meta<SelectType> = {
+  title: "Form/Select",
+  tags: ["autodocs"],
+  component: Component,
+  argTypes: {
+    modifier_class: {
+      options: modifierOptions,
+      control: { type: "select" },
+    },
+  },
+}
+
+export default meta
+type Story = StoryObj<SelectType>
+
+export const Select: Story = {
+  args: {},
+}
+
+export const Wide: Story = {
+  args: {
+    modifier_class: "input--wide",
+  },
+}
+
+export const Small: Story = {
+  args: {
+    modifier_class: "input--small",
+  },
+}

package/src/Form/Select/__snapshots__/FormSelect.stories.tsx.snap

@@ -0,0 +1,23 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Form/Select Select smoke-test 1`] = `
+<select id="mix-select"
+        class
+        aria-describedby="unique-0"
+        aria-invalid="false"
+        aria-label="Select"
+>
+  <option value>
+    Select one
+  </option>
+  <option value="1">
+    Option 1
+  </option>
+  <option value="2">
+    Option 2
+  </option>
+  <option value="3">
+    Option 3
+  </option>
+</select>
+`;