@fpkit/acss 0.4.4

package/src/components/form/form.scss

@@ -0,0 +1,87 @@
+:root {
+  --input-border-color: gray;
+  --input-appearance: none;
+  --input-bg: inherit;
+  --input-border: none;
+  --input-outline: thin solid var(--input-border-color);
+  --input-px: 0.6rem;
+  --input-py: 0.4rem;
+  --input-radius: --var(--radius);
+  --input-fs: var(--fs);
+  --input-w: clamp(200px, 100%, 500px);
+  --placeholder-color: gray;
+  --placeholder-style: italic;
+  --placeholder-fs: smaller;
+  --form-direction: column;
+  --select-arrow: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='20' height='20'><polyline points='6,9 10,13 14,9' stroke='%23000000' stroke-width='1.5' fill='none' /></svg>");
+}
+
+form {
+  display: flex;
+  flex-direction: var(--form-direction);
+  gap: 1rem;
+  > div {
+    display: flex;
+    gap: 1rem;
+    flex-direction: var(--form-direction);
+  }
+
+  label {
+    display: block;
+  }
+}
+
+input[type]:not([type='checkbox'], [type='radio']),
+textarea,
+select {
+  -webkit-appearance: var(--input-appearance);
+  -moz-appearance: var(--input-appearance);
+  appearance: var(--input-appearance);
+  width: var(--input-w);
+  border: var(--input-border);
+  outline: var(--input-outline);
+  padding-inline: var(--input-px);
+  padding-block: var(--input-py);
+  border-radius: var(--input-radius);
+  background-color: var(--input-bg, #fff);
+
+  &::placeholder {
+    color: var(--placeholder-color);
+    font-style: var(--placeholder-style);
+    font-size: var(--placeholder-fs);
+    text-transform: capitalize;
+  }
+
+  &:focus-visible, &:focus {
+    outline-width: medium;
+  }
+
+
+  &[aria-required='true'] {
+    &::placeholder {
+      color: var(--color-required, var(--placeholder-color));
+      font-weight: 600;
+      &::after {
+        content: '* ';
+      }
+    }
+  }
+
+  &[aria-disabled='true'] {
+    --input-border-color: lightgray;
+    cursor: not-allowed;
+    text-transform: capitalize;
+    text-decoration: line-through;
+  }
+}
+
+select {
+  border: var(--input-outline);
+  outline: none;
+  -webkit-appearance: none; /* Remove default arrow in Chrome and Safari */
+  -moz-appearance: none; /* Remove default arrow in Firefox */
+  appearance: none; /* Remove default arrow in other browsers */
+  background: var(--select-arrow) no-repeat;
+  background-position: right 0.5rem top 50%;
+  padding-inline-end: 0;
+}

package/src/components/form/form.stories.tsx

@@ -0,0 +1,49 @@
+import { StoryObj, Meta } from '@storybook/react'
+import { within, userEvent, screen } from '@storybook/testing-library'
+import { expect } from '@storybook/jest'
+
+import Form from './form'
+import './form.scss'
+
+const meta: Meta<typeof Form> = {
+  title: 'FP.REACT Forms/Examples',
+  component: Form,
+  parameters: {
+    docs: {
+      description: {
+        component: 'Form description here...',
+      },
+    },
+  },
+  args: {
+    children: 'Link',
+    name: 'my-form',
+  },
+} as Story
+
+export default meta
+type Story = StoryObj<typeof Form>
+
+export const FormComponent: Story = {
+  args: {
+    children: (
+      <>
+        <Form.Field label="Name" labelFor="name" id="name-field">
+          <Form.Input id="name" name="name" />
+        </Form.Field>
+        <Form.Field label="Email" labelFor="email">
+          <Form.Input id="email" name="email" type="email" />
+        </Form.Field>
+        <Form.Field label="Message" labelFor="message">
+          <Form.Textarea id="message" name="message" />
+        </Form.Field>
+        <button type="submit">Submit Form</button>
+      </>
+    ),
+  },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement)
+    const form = canvas.getByRole('form')
+    await expect(form).toBeInTheDocument()
+  },
+} as Story

package/src/components/form/form.tsx

@@ -0,0 +1,71 @@
+import UI from '#components/fp'
+import React from 'react'
+
+import Input from './inputs'
+import Field from './fields'
+import Select from './select'
+import Textarea from './textarea'
+
+export type FormProps = Partial<React.ComponentProps<typeof UI>> &
+  React.ComponentProps<'form'>
+
+/**
+ * Form component
+ * @param {Object} props - Form component props
+ * @param {string} [id] - Unique identifier for form
+ * @param {string} [name] - Name for form
+ * @param {Object} [styles] - Inline styles
+ * @param {string} [classes] - Additional classes
+ * @param {ReactNode} children - Child elements
+ * @param {string} [action] - Form action URL
+ * @param {('get'|'post')} [formMethod='post'] - Form method
+ * @param {Function} [onSubmit] - Submit callback
+ * @param {string} [target] - Form submit target
+ * @param {boolean} [noValidate=false] - Disable validation
+ * @param {Object} ...props - Additional props
+ */
+export const Form = ({
+  id,
+  name,
+  styles,
+  classes,
+  children,
+  action,
+  formMethod,
+  onSubmit,
+  target,
+  noValidate,
+  ...props
+}: FormProps) => {
+  const onSubmitCallback = (e: React.FormEvent<HTMLFormElement>) => {
+    if (onSubmit) {
+      e.preventDefault()
+      onSubmit?.(e)
+    }
+  }
+
+  return (
+    <UI
+      as="form"
+      id={id}
+      name={name}
+      className={classes}
+      styles={styles}
+      action={action}
+      novalidate={noValidate}
+      method={formMethod}
+      onSubmit={onSubmitCallback}
+      target={target}
+      {...props}
+    >
+      {children}
+    </UI>
+  )
+}
+
+export default Form
+Form.displayName = 'Form'
+Form.Field = Field
+Form.Input = Input
+Form.Select = Select
+Form.Textarea = Textarea

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

@@ -0,0 +1,155 @@
+import { StoryObj, Meta } from '@storybook/react'
+import { within, userEvent, screen } from '@storybook/testing-library'
+import { expect } from '@storybook/jest'
+
+import Input from './inputs'
+import './form.scss'
+
+const meta: Meta<typeof Input> = {
+  title: 'FP.REACT  Forms/Inputs',
+  component: Input,
+  args: {},
+  parameters: {
+    docs: {
+      description: {
+        component:
+          'Use the `<Input type="***"/>` component to render an any input element -- text, email, number etc. Pass props like `name`, `value`, `placeholder` etc to control the input.',
+      },
+    },
+  },
+} as Story
+
+export default meta
+type Story = StoryObj<typeof Input>
+
+export const InputComponent: Story = {
+  args: {},
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement)
+    expect(canvas.getByRole('textbox')).toBeInTheDocument()
+  },
+}
+
+//required input story
+export const RequiredInput: Story = {
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'Displays a required input `aria-required="true"` on any input type the placeholder displays an `*` at the start of a default placeholder text to indicate it is required',
+      },
+    },
+  },
+  args: {
+    type: 'text',
+    required: true,
+    placeholder: 'This Field is required (placeholder)',
+  },
+
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement)
+    const input = canvas.getByRole('textbox')
+    expect(input).toBeRequired()
+
+    await userEvent.type(input, 'test')
+    expect(input).toBeValid()
+
+    await userEvent.clear(input)
+
+    userEvent.type(input, '\n')
+    expect(input).toBeInvalid()
+  },
+} as Story
+
+export const DefaultRequired: Story = {
+  args: {
+    type: 'text',
+    required: true,
+  },
+} as Story
+
+export const InputDisabled: Story = {
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'Displays a disabled input `aria-disabled="true"` on any input type',
+      },
+    },
+  },
+  args: {
+    type: 'text',
+    isDisabled: true,
+  },
+} as Story
+
+export const EmailInput: Story = {
+  args: {
+    type: 'email',
+  },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement)
+    const input = canvas.getByRole('textbox')
+    expect(input).toHaveAttribute('type', 'email')
+
+    await userEvent.type(input, 'test@example.com')
+    expect(input).toHaveValue('test@example.com')
+  },
+} as Story
+
+export const PasswordInput: Story = {
+  args: {
+    type: 'password',
+  },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement)
+    const input = canvas.getByPlaceholderText(/password/i)
+    expect(input).toHaveAttribute('type', 'password')
+
+    await userEvent.type(input, 'password')
+    expect(input).toHaveValue('password')
+  },
+} as Story
+
+export const SearchInput: Story = {
+  args: {
+    type: 'search',
+  },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement)
+    const input = canvas.getByRole('searchbox')
+    expect(input).toHaveAttribute('type', 'search')
+
+    await userEvent.type(input, 'search term')
+    expect(input).toHaveValue('search term')
+  },
+} as Story
+
+export const TelInput: Story = {
+  args: {
+    type: 'tel',
+  },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement)
+    const input = canvas.getByRole('textbox')
+    expect(input).toHaveAttribute('type', 'tel')
+
+    await userEvent.type(input, '1234567890')
+    expect(input).toHaveValue('1234567890')
+  },
+} as Story
+
+// URL text input story
+export const UrlInput: Story = {
+  args: {
+    type: 'url',
+  },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement)
+    const input = canvas.getByRole('textbox')
+    expect(input).toHaveAttribute('type', 'url')
+
+    await userEvent.type(input, 'https://example.com')
+    expect(input).toHaveValue('https://example.com')
+  },
+} as Story

package/src/components/form/inputs.tsx

@@ -0,0 +1,84 @@
+import React from 'react'
+import FP from '../fp'
+
+export type InputProps = {
+  /**
+   * The type of the input.
+   */
+  type?: 'text' | 'password' | 'email' | 'number' | 'tel' | 'url' | 'search'
+
+  /**
+   * Set the element as disabled
+   */
+  isDisabled?: boolean
+} & React.ComponentProps<typeof FP>
+
+/**
+ * Input component that renders an HTML input element.
+ * @param {InputProps} props - The input component props.
+ * @returns {JSX.Element} - The input component.
+ */
+export const Input = ({
+  type = 'text',
+  name,
+  value,
+  placeholder,
+  id,
+  styles,
+  classes,
+  isDisabled,
+  disabled,
+  readonly,
+  required,
+  ref,
+  onChange,
+  onBlur,
+  onPointerDown,
+  ...props
+}: InputProps): JSX.Element => {
+  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    if (onChange && !disabled) {
+      onChange?.(e)
+    }
+  }
+
+  const handleBlur = (e: React.FocusEvent<HTMLInputElement>) => {
+    if (onBlur && !disabled) {
+      onBlur?.(e)
+    }
+  }
+
+  const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
+    if (onPointerDown && !disabled) {
+      e.preventDefault()
+      onPointerDown?.(e)
+    }
+  }
+
+  return (
+    <FP
+      as="input"
+      id={id}
+      type={type}
+      placeholder={placeholder || `${required ? '*' : ''} ${type} input `}
+      className={classes}
+      styles={styles}
+      onChange={handleChange}
+      onBlur={handleBlur}
+      onKeyDown={handleKeyDown}
+      value={value}
+      name={name}
+      ref={ref}
+      aria-disabled={isDisabled}
+      tabIndex={isDisabled ? -1 : undefined}
+      aria-readonly={readonly}
+      aria-required={required}
+      required={required}
+      readOnly={readonly}
+      {...props}
+    />
+  )
+}
+
+Input.displayName = 'Input'
+export default Input

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

@@ -0,0 +1,38 @@
+import { StoryObj, Meta } from '@storybook/react'
+import { within, userEvent, screen } from '@storybook/testing-library'
+import { expect } from '@storybook/jest'
+
+import Select from './select'
+import React from 'react'
+const meta: Meta<typeof Select> = {
+  title: 'FP.REACT Forms/Select',
+  component: Select,
+  parameters: {
+    docs: {
+      description: {
+        component: 'Base select/Combobox component',
+      },
+    },
+  },
+  args: {
+    // @ts-ignore
+    children: (
+      <>
+        <Select.Option selectValue="value" selectLabel="Option 1" />
+        <Select.Option selectValue="value" selectLabel="Option 2" />
+        <Select.Option selectValue="value" selectLabel="Option 3" />
+      </>
+    ),
+  },
+} as Story
+
+export default meta
+type Story = StoryObj<typeof Select>
+
+export const SelectComponent: Story = {
+  args: {},
+  play: async ({ canvasElement }) => {
+    // const canvas = within(canvasElement)
+    // expect(canvas.getByRole('combobox')).toBeInTheDocument()
+  },
+}

package/src/components/form/select.tsx

@@ -0,0 +1,112 @@
+import UI from '../ui'
+import React from 'react'
+
+export type SelectProps = React.ComponentProps<typeof UI>
+
+export type SelectOptionsProps = {
+  /**
+   * Label for the select option
+   */
+  selectLabel: string
+
+  /**
+   * Value for the select option. Can be a number or string.
+   */
+  selectValue: string
+} & SelectProps
+
+/**
+ * Option component for select.
+ * @param {SelectOptionsProps} param0 - The component props.
+ * @param {string} param0.selectValue - Value for the option.
+ * @param {string} [param0.selectLabel] - Label for the option.
+ */
+export const Option = ({ selectValue, selectLabel }: SelectOptionsProps) => {
+  return (
+    <option role="option" value={selectValue}>
+      {selectLabel || selectValue}
+    </option>
+  )
+}
+
+/**
+ * Select component props.
+ * @param {string} [id] - Unique id for the select.
+ * @param {string} [name] - Name for the select input.
+ * @param {React.CSSProperties} [styles] - Inline styles.
+ * @param {string} [classes] - CSS classes.
+ * @param {boolean} [disabled] - Whether select is disabled.
+ * @param {React.ReactNode} [children] - Child elements.
+ * @param {boolean} [required] - Whether select is required.
+ * @param {string | number | string[] | undefined} [selected] - Selected option value(s).
+ * @param {React.FocusEventHandler<HTMLSelectElement>} [onBlur] - Blur event handler.
+ * @param {React.ChangeEventHandler<HTMLSelectElement>} [onChange] - Change event handler.
+ * @param {(e: React.ChangeEvent<HTMLSelectElement>) => void} [onSelectionChange] - Selection change handler.
+ * @param {(e: React.PointerEvent<HTMLSelectElement>) => void} [onPointerDown] - Pointer down handler.
+ * @param {React.Ref<HTMLSelectElement>} [ref] - Ref for the select element.
+ */
+export const Select = ({
+  id,
+  name,
+  styles,
+  classes,
+  disabled,
+  children,
+  required,
+  selected,
+  onBlur,
+  onSelectionChange,
+  onPointerDown,
+  ref,
+  ...props
+}: SelectProps) => {
+  const handleOnChange = (e: React.ChangeEvent<HTMLSelectElement>) => {
+    if (onSelectionChange && !disabled) onSelectionChange?.(e)
+  }
+
+  const handlePointerDown = (e: React.PointerEvent<HTMLSelectElement>) => {
+    if (onPointerDown && !disabled) onPointerDown?.(e)
+  }
+
+  const handleOnBlur = (e: React.FocusEvent<HTMLSelectElement>) => {
+    if (onBlur && !disabled) onBlur?.(e)
+    const handleOnChange = (e: React.ChangeEvent<HTMLSelectElement>) => {
+      if (onSelectionChange && !disabled) onSelectionChange?.(e)
+    }
+
+    const handlePointerDown = (e: React.PointerEvent<HTMLSelectElement>) => {
+      if (onPointerDown && !disabled) onPointerDown?.(e)
+    }
+
+    const handleOnBlur = (e: React.FocusEvent<HTMLSelectElement>) => {
+      if (onBlur && !disabled) onBlur?.(e)
+    }
+
+    return (
+      <UI
+        as="select"
+        id={id}
+        ref={ref}
+        name={name}
+        className={classes}
+        selected={selected}
+        onChange={handleOnChange}
+        onPointerDown={handlePointerDown}
+        onBlur={handleOnBlur}
+        required={required}
+        aria-required={required} // Accessibility
+        disabled={disabled}
+        aria-disabled={disabled ? true : false}
+        style={styles}
+        {...props} // Accessibility
+      >
+         <option value="" />
+      </UI>
+    )
+  }
+}
+export default Select
+Select.displayName = 'Select' // Remove this line
+Select.Option = Option // Remove this line
+
+// export const MemoizedSelect = React.memo(Select)

package/src/components/form/textarea.tsx

@@ -0,0 +1,87 @@
+import React from 'react'
+import UI from '../ui'
+
+export type TextareaProps = React.ComponentProps<'textarea'> &
+  React.ComponentProps<typeof UI>
+
+/**
+ * Textarea component.
+ *
+ * @param value - The value of the textarea.
+ * @param rows - The number of rows.
+ * @param cols - The number of columns.
+ * @param id - The id of the textarea.
+ * @param name - The name of the textarea.
+ * @param required - Whether the textarea is required.
+ * @param disabled - Whether the textarea is disabled.
+ * @param readOnly - Whether the textarea is read only.
+ * @param onBlur - Blur event handler.
+ * @param onPointerDown - Pointer down event handler.
+ * @param onChange - Change event handler.
+ * @param ref - Ref for the textarea.
+ * @param styles - Styles object for the textarea.
+ * @param textareaRef - Ref specifically for the textarea element.
+ * @param props - Other props.
+ */
+export const Textarea = ({
+  id,
+  classes,
+  value,
+  rows = 5,
+  cols = 25,
+  name,
+  required,
+  disabled,
+  readOnly,
+  onBlur,
+  onPointerDown,
+  onChange,
+  ref,
+  styles,
+  placeholder,
+  ...props
+}: TextareaProps) => {
+  const handleChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
+    if (onChange && !disabled) {
+      onChange?.(e)
+    }
+  }
+
+  const handleBlur = (e: React.FocusEvent<HTMLTextAreaElement>) => {
+    if (onBlur && !disabled) {
+      onBlur?.(e)
+    }
+  }
+
+  const handlePointerDown = (e: React.PointerEvent<HTMLTextAreaElement>) => {
+    if (onPointerDown && !disabled) {
+      onPointerDown?.(e)
+    }
+  }
+
+  return (
+    <UI
+      as="textarea"
+      id={id}
+      name={name}
+      rows={rows}
+      cols={cols}
+      styles={styles}
+      className={classes}
+      data-style="textarea"
+      required={required}
+      value={value}
+      aria-disabled={disabled}
+      readOnly={readOnly}
+      onChange={handleChange}
+      onBlur={handleBlur}
+      onPointerDown={handlePointerDown}
+      ref={ref}
+      placeholder={placeholder || `${required ? '*' : ''} Message`}
+      {...props}
+    />
+  )
+}
+
+export default Textarea
+Textarea.displayName = 'Textarea'