@consumidor-positivo/aurora 1.2.0 → 1.3.0

package/astro/form/EmailField/index.astro

@@ -0,0 +1,237 @@
+---
+import type { HTMLAttributes } from 'astro/types'
+import FieldRoot from '../Field/Root/index.astro'
+import FieldLabel from '../Field/Label/index.astro'
+import FieldInputHolder from '../Field/InputHolder/index.astro'
+import FieldInput from '../Field/Input/index.astro'
+import FieldMessage from '../Field/Message/index.astro'
+import '../../../dist/components/EmailField/styles.css'
+
+/**
+ * Same props as the React `EmailField`, and the same split: `class` and
+ * `style` go on the `au-field` root, every other HTML attribute (`name`,
+ * `value`, `required`, `autocomplete`, `data-*`...) lands on the `<input>`.
+ *
+ * The domain autocomplete is the component's own behavior, kept by an inline
+ * controller with the same domain list and keys as the React hook (ArrowUp,
+ * ArrowDown, Enter, Escape). The React `onChange(value)` has no counterpart:
+ * listen to the input's native `input` event (also fired when a suggestion is
+ * picked) or to `au:emailselect` (`detail.value`, the completed e-mail), which
+ * bubbles from the root. `rightSlot` is the `right` named slot; `inputRef` has
+ * no counterpart. Like the React version, the input only gets an `id` when one
+ * is passed.
+ */
+export type Props = Omit<HTMLAttributes<'input'>, 'type' | 'disabled'> & {
+  showOptionalLabel?: boolean
+  /** Marks the label as required. Pass `required` too for native validation. */
+  requiredInput?: boolean
+  success?: boolean
+  error?: boolean
+  errorMessage?: string
+  helpMessage?: string
+  label?: string
+  disabled?: boolean
+  /** Inline style of the `<input>` (`style` goes on the root). */
+  inputStyle?: HTMLAttributes<'input'>['style']
+}
+
+const uid = crypto.randomUUID().slice(0, 8)
+
+const {
+  showOptionalLabel,
+  requiredInput,
+  success = false,
+  error = false,
+  errorMessage,
+  helpMessage,
+  label,
+  id: idProp,
+  disabled = false,
+  style,
+  class: className,
+  inputStyle,
+  ...rest
+} = Astro.props
+
+const id = idProp
+
+// Stands in for the React `useId()` of the listbox.
+const listboxId = `au-email-${uid}-listbox`
+---
+
+<FieldRoot
+  style={style}
+  class={className}
+  success={success}
+  error={error}
+  disabled={disabled}
+  data-element="au-email-field">
+  <FieldLabel
+    text={label}
+    id={id}
+    showOptionalLabel={showOptionalLabel}
+    required={requiredInput}
+    success={success}
+    error={error}
+    disabled={disabled}
+  />
+  <FieldInputHolder>
+    <FieldInput
+      id={id}
+      type="email"
+      disabled={disabled}
+      style={inputStyle}
+      role="combobox"
+      aria-haspopup="listbox"
+      aria-expanded="false"
+      aria-autocomplete="list"
+      aria-controls={listboxId}
+      {...rest}
+    />
+    <ul
+      id={listboxId}
+      class="au-field__input-autocomplete"
+      tabindex="-1"
+      role="listbox"
+      style="overflow-y: auto">
+    </ul>
+    <slot name="right" slot="right" />
+  </FieldInputHolder>
+  <FieldMessage
+    hasError={error}
+    errorMessage={errorMessage}
+    helpMessage={helpMessage}
+  />
+</FieldRoot>
+
+<script>
+  import { elementController } from '@consumidor-positivo/aurora/astro/runtime'
+
+  // Same list, same order, as the React hook (`EmailField/hook.ts`).
+  const EMAIL_DOMAINS = [
+    'gmail.com',
+    'hotmail.com',
+    'yahoo.com',
+    'outlook.com',
+    'yahoo.com.br',
+    'uol.com.br',
+    'ig.com.br',
+    'terra.com.br',
+    'aol.com',
+    'live.com',
+    'msn.com',
+  ]
+  const OPEN_CLASS = 'au-field__input-autocomplete--open'
+  const OPTION_CLASS = 'au-field__input-option'
+
+  elementController('au-email-field', ({ query, on, emit }) => {
+    const input = query<HTMLInputElement>('.au-field__input')
+    const listbox = query<HTMLUListElement>('.au-field__input-autocomplete')
+    if (!input || !listbox) return
+
+    let suggestions: string[] = []
+    let activeIndex = -1
+    let isOpen = false
+    let isSelecting = false
+
+    const optionId = (index: number) => `${listbox.id}-option-${index}`
+
+    function syncActiveDescendant() {
+      if (isOpen && activeIndex >= 0) {
+        input!.setAttribute('aria-activedescendant', optionId(activeIndex))
+      } else {
+        input!.removeAttribute('aria-activedescendant')
+      }
+    }
+
+    function setOpen(open: boolean) {
+      isOpen = open
+      listbox!.classList.toggle(OPEN_CLASS, open)
+      input!.setAttribute('aria-expanded', String(open))
+      syncActiveDescendant()
+    }
+
+    function setActive(index: number) {
+      activeIndex = index
+      Array.from(listbox!.children).forEach((option, i) => {
+        option.setAttribute('aria-selected', String(i === index))
+      })
+      syncActiveDescendant()
+    }
+
+    function renderSuggestions(next: string[]) {
+      suggestions = next
+      activeIndex = -1
+      listbox!.replaceChildren(
+        ...next.map((suggestion, index) => {
+          const option = document.createElement('li')
+          option.id = optionId(index)
+          option.className = OPTION_CLASS
+          option.setAttribute('role', 'option')
+          option.setAttribute('aria-selected', 'false')
+          option.textContent = suggestion
+          return option
+        }),
+      )
+    }
+
+    function update(value: string) {
+      const atIndex = value.indexOf('@')
+      if (atIndex < 0) {
+        renderSuggestions([])
+        setOpen(false)
+        return
+      }
+
+      const domainPart = value.slice(atIndex + 1)
+      const filtered = EMAIL_DOMAINS.filter((domain) => domain.startsWith(domainPart))
+      renderSuggestions(filtered)
+      const isComplete = filtered.some((domain) => value.endsWith(domain))
+      setOpen(filtered.length > 0 && !isComplete)
+    }
+
+    function select(suggestion: string) {
+      const atIndex = input!.value.indexOf('@')
+      if (atIndex > -1) {
+        const value = input!.value.slice(0, atIndex + 1) + suggestion
+        input!.value = value
+        // Lets the app's own `input` listeners see the completed value.
+        isSelecting = true
+        input!.dispatchEvent(new Event('input', { bubbles: true }))
+        isSelecting = false
+        emit('au:emailselect', { value })
+      }
+      renderSuggestions([])
+      setOpen(false)
+    }
+
+    on('input', (event) => {
+      if (isSelecting || event.target !== input) return
+      update(input.value)
+    })
+
+    on('click', (event) => {
+      const option = (event.target as Element | null)?.closest<HTMLElement>(
+        `.${OPTION_CLASS}`,
+      )
+      if (option && listbox.contains(option)) select(option.textContent ?? '')
+    })
+
+    on('keydown', (event) => {
+      if (event.target !== input || !isOpen || suggestions.length === 0) return
+
+      if (event.key === 'ArrowDown') {
+        event.preventDefault()
+        setActive((activeIndex + 1) % suggestions.length)
+      } else if (event.key === 'ArrowUp') {
+        event.preventDefault()
+        setActive(activeIndex <= 0 ? suggestions.length - 1 : activeIndex - 1)
+      } else if (event.key === 'Enter' && activeIndex >= 0) {
+        event.preventDefault()
+        select(suggestions[activeIndex])
+      } else if (event.key === 'Escape') {
+        setOpen(false)
+      }
+    })
+  })
+</script>

package/astro/form/Field/ErrorMessage/index.astro

@@ -0,0 +1,20 @@
+---
+import '../../../../dist/components/Field/styles2.css'
+
+/** Same props as the React `Field.ErrorMessage`. */
+export type Props = {
+  hasError?: boolean
+  message?: string
+  id?: string
+}
+
+const { hasError, message, id } = Astro.props
+---
+
+{
+  hasError && message && (
+    <p id={id} class="au-field__message au-field__message--error" role="alert">
+      {message}
+    </p>
+  )
+}

package/astro/form/Field/Input/index.astro

@@ -0,0 +1,15 @@
+---
+import type { HTMLAttributes } from 'astro/types'
+import '../../../../dist/components/Field/styles2.css'
+
+/**
+ * The bare `au-field__input`. Every HTML attribute lands on the `<input>`;
+ * the React `customclass` is the plain `class`, and `inputRef` has no
+ * counterpart (select the element by `id` or a `data-*` attribute).
+ */
+export type Props = HTMLAttributes<'input'>
+
+const { class: className, 'class:list': classList, ...rest } = Astro.props
+---
+
+<input class:list={['au-field__input', className, classList]} {...rest} />

package/astro/form/Field/InputHolder/index.astro

@@ -0,0 +1,28 @@
+---
+import type { HTMLAttributes } from 'astro/types'
+import '../../../../dist/components/Field/styles2.css'
+
+/**
+ * The React `rightSideSlot` is the `right` named slot here. The
+ * `au-field__right-slot` wrapper only renders when that slot has content, so a
+ * parent can forward the slot unconditionally.
+ */
+export type Props = HTMLAttributes<'div'>
+
+const { class: className, ...rest } = Astro.props
+
+const right = Astro.slots.has('right')
+  ? (await Astro.slots.render('right')).trim()
+  : ''
+---
+
+<div class:list={['au-field__input-holder', className]} {...rest}>
+  <slot />
+  {
+    right && (
+      <div class="au-field__right-slot">
+        <Fragment set:html={right} />
+      </div>
+    )
+  }
+</div>

package/astro/form/Field/Label/index.astro

@@ -0,0 +1,80 @@
+---
+import type { HTMLAttributes } from 'astro/types'
+import IconAlertOctagon from '../../../icons/default/IconAlertOctagon.astro'
+import IconCheck from '../../../icons/default/IconCheck.astro'
+import IconSlash from '../../../icons/default/IconSlash.astro'
+import {
+  COLOR_ERROR_50,
+  COLOR_NEUTRAL_40,
+  COLOR_SUCCESS_50,
+} from '@consumidor-positivo/aurora/astro/tokens'
+import '../../../../dist/components/Field/styles2.css'
+
+/**
+ * Same props as the React `Field.Label`. `id` is the id of the control the
+ * label points to (`for`), not the id of this element. Rich label content,
+ * the React `text` as a ReactNode, goes in the default slot; the label renders
+ * nothing when neither `text` nor the slot has content. Other HTML attributes
+ * land on the `au-field__header` wrapper.
+ */
+export type Props = Omit<HTMLAttributes<'div'>, 'id'> & {
+  /** Id of the field control, rendered as the label's `for`. */
+  id?: string | null
+  /** Id of the `<label>` element itself, for `aria-labelledby`. */
+  labelId?: string | null
+  text?: string
+  required?: boolean
+  success?: boolean
+  error?: boolean
+  disabled?: boolean
+  /** Shows "(Opcional)" when the field is not required. Defaults to true. */
+  showOptionalLabel?: boolean
+}
+
+const {
+  id,
+  labelId,
+  text,
+  required = false,
+  success = false,
+  error = false,
+  disabled = false,
+  showOptionalLabel = true,
+  class: className,
+  ...rest
+} = Astro.props
+
+const slotted = Astro.slots.has('default')
+  ? (await Astro.slots.render('default')).trim()
+  : ''
+const hasText = !!text || !!slotted
+// Same precedence as React: success, then error, then disabled.
+const state = success ? 'success' : error ? 'error' : disabled ? 'disabled' : null
+---
+
+{
+  hasText && (
+    <div class:list={['au-field__header', className]} {...rest}>
+      <label id={labelId} for={id} class="au-field__header-label">
+        {text}
+        <Fragment set:html={slotted} />{' '}
+        {showOptionalLabel && !required && (
+          <span class="au-field__header-label--optional">(Opcional)</span>
+        )}
+        {!showOptionalLabel && required && (
+          <Fragment>
+            <strong class="au-field__header-label--required" aria-hidden="true">
+              *
+            </strong>
+            <span class="au-sr-only">obrigatório</span>
+          </Fragment>
+        )}
+      </label>
+      <div class="au-field__header-icon" aria-hidden="true">
+        {state === 'success' && <IconCheck rawColor={COLOR_SUCCESS_50} />}
+        {state === 'error' && <IconAlertOctagon rawColor={COLOR_ERROR_50} />}
+        {state === 'disabled' && <IconSlash rawColor={COLOR_NEUTRAL_40} />}
+      </div>
+    </div>
+  )
+}

package/astro/form/Field/Message/index.astro

@@ -0,0 +1,29 @@
+---
+import '../../../../dist/components/Field/styles2.css'
+
+/**
+ * Same props as the React `Field.Message`: the error wins over the help text,
+ * and nothing renders when neither applies.
+ */
+export type Props = {
+  hasError?: boolean
+  errorMessage?: string
+  helpMessage?: string
+  errorId?: string
+  helpId?: string
+}
+
+const { hasError, errorMessage, helpMessage, errorId, helpId } = Astro.props
+---
+
+{
+  hasError && errorMessage ? (
+    <p id={errorId} class="au-field__message au-field__message--error" role="alert">
+      {errorMessage}
+    </p>
+  ) : helpMessage ? (
+    <p id={helpId} class="au-field__message">
+      {helpMessage}
+    </p>
+  ) : null
+}

package/astro/form/Field/Root/index.astro

@@ -0,0 +1,37 @@
+---
+import type { HTMLAttributes } from 'astro/types'
+import '../../../../dist/components/Field/styles2.css'
+
+/**
+ * Same states as the React `Field.Root`. The React `customclass` is the plain
+ * `class` here, and every other HTML attribute (`id`, `style`, `data-*`) lands
+ * on the root `div`.
+ */
+export type Props = HTMLAttributes<'div'> & {
+  disabled?: boolean
+  success?: boolean
+  error?: boolean
+}
+
+const {
+  disabled = false,
+  success = false,
+  error = false,
+  class: className,
+  'class:list': classList,
+  ...rest
+} = Astro.props
+---
+
+<div
+  class:list={[
+    'au-field',
+    className,
+    classList,
+    disabled && 'au-field--disabled',
+    success && 'au-field--success',
+    error && 'au-field--error',
+  ]}
+  {...rest}>
+  <slot />
+</div>

package/astro/form/Field/TextArea/index.astro

@@ -0,0 +1,69 @@
+---
+import type { HTMLAttributes } from 'astro/types'
+import Text from '../../../Text/index.astro'
+import '../../../../dist/components/Field/styles2.css'
+
+/**
+ * Every HTML attribute lands on the `<textarea>`; the React `customClass` is
+ * the plain `class`, and `textareaRef` has no counterpart. `value` becomes the
+ * textarea's initial content. With `maxLength` the character counter is kept
+ * up to date by an inline controller on every `input`; like React, it starts
+ * at 0 even when there is an initial value.
+ */
+export type Props = Omit<HTMLAttributes<'textarea'>, 'maxlength'> & {
+  /** Allows the user to resize the textarea horizontally. Not mapped in Figma. */
+  horizontalResize?: boolean
+  /** Native `maxlength`; also turns the `n/max` counter on. */
+  maxLength?: number
+}
+
+const {
+  horizontalResize = false,
+  maxLength,
+  value,
+  class: className,
+  'class:list': classList,
+  ...rest
+} = Astro.props
+
+const initialValue = value == null ? '' : String(value)
+---
+
+<div
+  class="au-field__textarea-container"
+  data-element={maxLength ? 'au-field-textarea' : undefined}>
+  <textarea
+    class:list={[
+      'au-field__textarea',
+      className,
+      classList,
+      horizontalResize && 'au-field__textarea--horizontal-resize',
+    ]}
+    maxlength={maxLength}
+    {...rest}>{initialValue}</textarea>
+  {
+    maxLength && (
+      <Text variant="caption" class="au-field__char-counter" aria-live="polite">
+        {0}/{maxLength}
+      </Text>
+    )
+  }
+</div>
+
+<script>
+  import { elementController } from '@consumidor-positivo/aurora/astro/runtime'
+
+  elementController('au-field-textarea', ({ query, on }) => {
+    const textarea = query<HTMLTextAreaElement>('.au-field__textarea')
+    const counter = query('.au-field__char-counter')
+    if (!textarea || !counter) return
+
+    const update = () => {
+      counter.textContent = `${textarea.value.length}/${textarea.maxLength}`
+    }
+
+    // Like the React hook: only a change updates the count (not the initial
+    // value, not a form reset).
+    on('input', update)
+  })
+</script>

package/astro/form/InputField/index.astro

@@ -0,0 +1,96 @@
+---
+import type { HTMLAttributes } from 'astro/types'
+import FieldRoot from '../Field/Root/index.astro'
+import FieldLabel from '../Field/Label/index.astro'
+import FieldInputHolder from '../Field/InputHolder/index.astro'
+import FieldInput from '../Field/Input/index.astro'
+import FieldMessage from '../Field/Message/index.astro'
+
+/**
+ * Same props as the React `InputField`, and the same split: `class` and
+ * `style` go on the `au-field` root, every other HTML attribute (`name`,
+ * `value`, `type`, `required`, `placeholder`, `data-*`...) lands on the
+ * `<input>`, as the React spreads its input props.
+ *
+ * Differences from React: `rightSlot` is the `right` named slot and a rich
+ * `label` goes in the `label` slot; `inputRef` and the `on*` callbacks have no
+ * counterpart (listen on the input through its `id` or a `data-*`). Like
+ * React, without `id` the label has no `for` and the input no `id`; the
+ * error/help message ids are generated (React's `useId`).
+ */
+export type Props = Omit<HTMLAttributes<'input'>, 'disabled'> & {
+  showOptionalLabel?: boolean
+  /** Marks the label as required. Pass `required` too for native validation. */
+  requiredInput?: boolean
+  success?: boolean
+  error?: boolean
+  errorMessage?: string
+  helpMessage?: string
+  label?: string
+  disabled?: boolean
+  /** Inline style of the `<input>` (`style` goes on the root). */
+  inputStyle?: HTMLAttributes<'input'>['style']
+  /** Opens the numeric keypad on mobile (`inputmode="numeric"`). */
+  numericKeypad?: boolean
+}
+
+const uid = crypto.randomUUID().slice(0, 8)
+
+const {
+  showOptionalLabel,
+  requiredInput,
+  success = false,
+  error = false,
+  errorMessage,
+  helpMessage,
+  label,
+  id,
+  disabled = false,
+  style,
+  class: className,
+  inputStyle,
+  numericKeypad = false,
+  ...rest
+} = Astro.props
+
+const errorId = error && errorMessage ? `au-field-${uid}-error` : undefined
+const helpId = helpMessage ? `au-field-${uid}-help` : undefined
+const describedBy = [errorId, helpId].filter(Boolean).join(' ') || undefined
+---
+
+<FieldRoot
+  style={style}
+  class={className}
+  success={success}
+  error={error}
+  disabled={disabled}>
+  <FieldLabel
+    text={label}
+    id={id}
+    showOptionalLabel={showOptionalLabel}
+    required={requiredInput}
+    success={success}
+    error={error}
+    disabled={disabled}>
+    <slot name="label" />
+  </FieldLabel>
+  <FieldInputHolder>
+    <FieldInput
+      id={id}
+      inputmode={numericKeypad ? 'numeric' : undefined}
+      disabled={disabled}
+      style={inputStyle}
+      aria-invalid={error ? 'true' : 'false'}
+      aria-describedby={describedBy}
+      {...rest}
+    />
+    <slot name="right" slot="right" />
+  </FieldInputHolder>
+  <FieldMessage
+    hasError={error}
+    errorMessage={errorMessage}
+    helpMessage={helpMessage}
+    errorId={errorId}
+    helpId={helpId}
+  />
+</FieldRoot>