npm - @estiva-app/ui - Versions diffs - 0.16.1 → 0.17.0 - Mend

@estiva-app/ui 0.16.1 → 0.17.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (55) hide show

package/README.md +3 -1
package/dist/Button.d.ts.map +1 -1
package/dist/Checkbox.d.ts +14 -1
package/dist/Checkbox.d.ts.map +1 -1
package/dist/FilePicker.d.ts +22 -0
package/dist/FilePicker.d.ts.map +1 -0
package/dist/Form.d.ts +34 -0
package/dist/Form.d.ts.map +1 -0
package/dist/IconButton.d.ts.map +1 -1
package/dist/SearchInput.d.ts.map +1 -1
package/dist/TextInput.d.ts.map +1 -1
package/dist/Textarea.d.ts.map +1 -1
package/dist/eslint/index.d.ts +1 -1
package/dist/eslint/index.d.ts.map +1 -1
package/dist/eslint/index.js +88 -8
package/dist/eslint/index.js.map +4 -4
package/dist/eslint/no-raw-element.d.ts +88 -0
package/dist/eslint/no-raw-element.d.ts.map +1 -0
package/dist/formBusy.d.ts +15 -0
package/dist/formBusy.d.ts.map +1 -0
package/dist/index.d.ts +2 -0
package/dist/index.d.ts.map +1 -1
package/dist/index.js +356 -239
package/dist/index.js.map +4 -4
package/package.json +1 -1
package/src/Button.tsx +4 -1
package/src/Checkbox.mdx +19 -1
package/src/Checkbox.stories.tsx +12 -0
package/src/Checkbox.test.tsx +54 -0
package/src/Checkbox.tsx +40 -3
package/src/FilePicker.mdx +49 -0
package/src/FilePicker.stories.tsx +61 -0
package/src/FilePicker.test.tsx +79 -0
package/src/FilePicker.tsx +40 -0
package/src/Form.mdx +68 -0
package/src/Form.stories.tsx +68 -0
package/src/Form.test.tsx +282 -0
package/src/Form.tsx +113 -0
package/src/IconButton.tsx +4 -1
package/src/SearchInput.mdx +2 -2
package/src/SearchInput.tsx +3 -1
package/src/TextInput.mdx +2 -2
package/src/TextInput.test.tsx +7 -0
package/src/TextInput.tsx +4 -1
package/src/Textarea.tsx +4 -1
package/src/eslint/index.test.ts +24 -15
package/src/eslint/index.ts +6 -5
package/src/eslint/{no-raw-button.test.ts → no-raw-element.test.ts} +53 -8
package/src/eslint/no-raw-element.ts +180 -0
package/src/formBusy.ts +19 -0
package/src/index.ts +2 -0
package/stories/Choosing.mdx +3 -0
package/dist/eslint/no-raw-button.d.ts +0 -11
package/dist/eslint/no-raw-button.d.ts.map +0 -1
package/src/eslint/no-raw-button.ts +0 -39

package/src/Form.test.tsx ADDED Viewed

@@ -0,0 +1,282 @@
+// @vitest-environment jsdom
+/**
+ * What the Form page claims, pinned: Enter and a submit button send it, the
+ * page's own submit is prevented, `busy` switches off everything inside and
+ * holds focus, and focus comes back in the page's order.
+ *
+ * jsdom does not move focus off a field that becomes disabled; Chrome drops it
+ * to `<body>`. So "focus is held" is checked as "focus is on the form, and not
+ * on a disabled element" — without the form taking focus, that fails here too
+ * (UIG-29 measured it). The browser check is in the PR.
+ */
+import { useState } from 'react'
+import { afterEach, describe, expect, it, vi } from 'vitest'
+import { act, cleanup, fireEvent, render, screen } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import { Button } from './Button'
+import { Checkbox } from './Checkbox'
+import { IconButton } from './IconButton'
+import { Field } from './Field'
+import { Form } from './Form'
+import { TextInput } from './TextInput'
+import { Textarea } from './Textarea'
+afterEach(cleanup)
+function Harness({ onSubmit = vi.fn(), error, busy = false }: { onSubmit?: () => void; error?: string; busy?: boolean }) {
+  return (
+    <Form onSubmit={onSubmit} busy={busy} aria-label="Probe" className="flex flex-col gap-6" id="probe">
+      <Field label="First">
+        <TextInput />
+      </Field>
+      <Field label="Second" error={error}>
+        <TextInput />
+      </Field>
+      <Button type="submit">Send</Button>
+    </Form>
+  )
+}
+describe('Form', () => {
+  it('sends on Enter in a field', async () => {
+    const user = userEvent.setup()
+    const onSubmit = vi.fn()
+    render(<Harness onSubmit={onSubmit} />)
+    await user.type(screen.getByRole('textbox', { name: 'First' }), 'x{Enter}')
+    expect(onSubmit).toHaveBeenCalledTimes(1)
+  })
+  it('sends from its submit button', async () => {
+    const user = userEvent.setup()
+    const onSubmit = vi.fn()
+    render(<Harness onSubmit={onSubmit} />)
+    await user.click(screen.getByRole('button', { name: 'Send' }))
+    expect(onSubmit).toHaveBeenCalledTimes(1)
+  })
+  it('does not send while a field shows its error', async () => {
+    const user = userEvent.setup()
+    const onSubmit = vi.fn()
+    render(<Harness onSubmit={onSubmit} error="Not like that." />)
+    await user.type(screen.getByRole('textbox', { name: 'First' }), 'x{Enter}')
+    expect(onSubmit).not.toHaveBeenCalled()
+  })
+  it('sends on Enter in a one-line field, and not in a textarea', async () => {
+    const user = userEvent.setup()
+    const onSubmit = vi.fn()
+    render(
+      <Form onSubmit={onSubmit} aria-label="Probe">
+        <Field label="Words">
+          <Textarea />
+        </Field>
+      </Form>,
+    )
+    await user.type(screen.getByRole('textbox', { name: 'Words' }), 'one{Enter}two')
+    expect(onSubmit).not.toHaveBeenCalled()
+    expect((screen.getByRole('textbox', { name: 'Words' }) as HTMLTextAreaElement).value).toBe('one\ntwo')
+  })
+  it("prevents the page's own submit, so nothing reloads", () => {
+    render(<Harness />)
+    const form = screen.getByRole('form', { name: 'Probe' })
+    // dispatchEvent answers false when the event's default was prevented.
+    expect(fireEvent.submit(form)).toBe(false)
+  })
+  it('is a form with no browser validation bubbles, and passes id and className on', () => {
+    render(<Harness />)
+    const form = screen.getByRole('form', { name: 'Probe' }) as HTMLFormElement
+    expect(form.tagName).toBe('FORM')
+    expect(form.noValidate).toBe(true)
+    expect(form.id).toBe('probe')
+    expect(form.className).toContain('flex-col')
+  })
+  it('draws no box of its own around the fields', () => {
+    const { container } = render(<Harness />)
+    expect(container.querySelector('fieldset')?.className).toBe('contents')
+  })
+  it('switches off every field and button inside while busy, and back on after', () => {
+    const { rerender } = render(<Harness />)
+    const controls = () => [...screen.getAllByRole('textbox'), screen.getByRole('button', { name: 'Send' })]
+    expect(controls().every((c) => !c.matches(':disabled'))).toBe(true)
+    rerender(<Harness busy />)
+    expect(controls().every((c) => c.matches(':disabled'))).toBe(true)
+    rerender(<Harness />)
+    expect(controls().every((c) => !c.matches(':disabled'))).toBe(true)
+  })
+  it("switches the package's own parts off in their own look, not only the browser's way", async () => {
+    // A disabled part has pointer-events: none; the click is tried anyway, as a person would.
+    const user = userEvent.setup({ pointerEventsCheck: 0 })
+    const onTick = vi.fn()
+    const parts = (busy: boolean) => (
+      <Form onSubmit={() => {}} busy={busy} aria-label="Probe">
+        <Button type="submit">Send</Button>
+        <IconButton aria-label="Icon">x</IconButton>
+        <Checkbox checked={false} onChange={onTick} aria-label="Bare" />
+        <Checkbox checked={false} onChange={onTick} label="Words" />
+      </Form>
+    )
+    const { rerender, getByRole, getByText } = render(parts(false))
+    const drawnOff = () => ['Send', 'Icon'].map((name) => getByRole('button', { name }).hasAttribute('data-disabled'))
+    expect(drawnOff()).toEqual([false, false])
+    rerender(parts(true))
+    // Button and IconButton take their switched-off classes from Base UI's state, which data-disabled shows.
+    expect(drawnOff()).toEqual([true, true])
+    expect(getByRole('checkbox', { name: 'Bare' }).getAttribute('aria-disabled')).toBe('true')
+    // A checkbox is a span: the fieldset alone never stopped a click on it.
+    await user.click(getByRole('checkbox', { name: 'Bare' }))
+    await user.click(getByText('Words'))
+    expect(onTick).not.toHaveBeenCalled()
+    rerender(parts(false))
+    expect(drawnOff()).toEqual([false, false])
+  })
+  it('holds focus on the form while busy, never on a disabled field', () => {
+    const { rerender } = render(<Harness />)
+    const field = screen.getByRole('textbox', { name: 'Second' })
+    act(() => field.focus())
+    rerender(<Harness busy />)
+    expect(document.activeElement).toBe(screen.getByRole('form', { name: 'Probe' }))
+    expect(document.activeElement?.matches(':disabled')).toBe(false)
+  })
+  it('holds focus even when the browser already dropped it to the page, as Chrome does', () => {
+    const { rerender } = render(<Harness />)
+    const field = screen.getByRole('textbox', { name: 'Second' })
+    act(() => field.focus())
+    // Chrome blurs a field the moment it is disabled, before any effect runs;
+    // jsdom never does, so the test does it by hand.
+    act(() => field.blur())
+    rerender(<Harness busy />)
+    expect(document.activeElement).toBe(screen.getByRole('form', { name: 'Probe' }))
+    rerender(<Harness />)
+    expect(document.activeElement).toBe(field)
+  })
+  it('does not take focus when it was last somewhere outside the form', () => {
+    const { rerender } = render(
+      <>
+        <Harness />
+        <button type="button">Elsewhere</button>
+      </>,
+    )
+    act(() => screen.getByRole('textbox', { name: 'First' }).focus())
+    act(() => screen.getByRole('button', { name: 'Elsewhere' }).focus())
+    act(() => screen.getByRole('button', { name: 'Elsewhere' }).blur())
+    rerender(
+      <>
+        <Harness busy />
+        <button type="button">Elsewhere</button>
+      </>,
+    )
+    expect(document.activeElement).toBe(document.body)
+  })
+  it('takes focus only while busy: the rest of the time it is not a Tab stop or a click target', () => {
+    const { rerender } = render(<Harness />)
+    const form = screen.getByRole('form', { name: 'Probe' })
+    expect(form.hasAttribute('tabindex')).toBe(false)
+    act(() => screen.getByRole('textbox', { name: 'First' }).focus())
+    rerender(<Harness busy />)
+    expect(form.getAttribute('tabindex')).toBe('-1')
+    rerender(<Harness />)
+    expect(form.hasAttribute('tabindex')).toBe(false)
+  })
+  describe('when busy ends, focus goes', () => {
+    it('to the first invalid field', () => {
+      const { rerender } = render(<Harness />)
+      act(() => screen.getByRole('textbox', { name: 'First' }).focus())
+      rerender(<Harness busy />)
+      rerender(<Harness error="Not like that." />)
+      expect(document.activeElement).toBe(screen.getByRole('textbox', { name: 'Second' }))
+    })
+    it('else back to what sent the form', () => {
+      const { rerender } = render(<Harness />)
+      act(() => screen.getByRole('button', { name: 'Send' }).focus())
+      rerender(<Harness busy />)
+      rerender(<Harness />)
+      expect(document.activeElement).toBe(screen.getByRole('button', { name: 'Send' }))
+    })
+    it('else to the first control, when what sent it is gone', () => {
+      function Vanishing({ busy, sent }: { busy: boolean; sent: boolean }) {
+        return (
+          <Form onSubmit={() => {}} busy={busy} aria-label="Probe">
+            <Field label="First">
+              <TextInput />
+            </Field>
+            {!sent && <Button type="submit">Send</Button>}
+          </Form>
+        )
+      }
+      const { rerender } = render(<Vanishing busy={false} sent={false} />)
+      act(() => screen.getByRole('button', { name: 'Send' }).focus())
+      rerender(<Vanishing busy sent={false} />)
+      // Gone while the form waits, as a row that sent itself can be.
+      rerender(<Vanishing busy sent />)
+      rerender(<Vanishing busy={false} sent />)
+      expect(document.activeElement).toBe(screen.getByRole('textbox', { name: 'First' }))
+    })
+    it('nowhere, when someone moved focus on while waiting', () => {
+      const { rerender } = render(
+        <>
+          <Harness />
+          <button type="button">Elsewhere</button>
+        </>,
+      )
+      act(() => screen.getByRole('textbox', { name: 'First' }).focus())
+      rerender(
+        <>
+          <Harness busy />
+          <button type="button">Elsewhere</button>
+        </>,
+      )
+      act(() => screen.getByRole('button', { name: 'Elsewhere' }).focus())
+      rerender(
+        <>
+          <Harness />
+          <button type="button">Elsewhere</button>
+        </>,
+      )
+      expect(document.activeElement).toBe(screen.getByRole('button', { name: 'Elsewhere' }))
+    })
+  })
+  it('a caller that waits: busy while sending, then back', async () => {
+    const user = userEvent.setup()
+    let finish: () => void = () => {}
+    function Sending() {
+      const [busy, setBusy] = useState(false)
+      return (
+        <Form
+          aria-label="Probe"
+          busy={busy}
+          onSubmit={async () => {
+            setBusy(true)
+            await new Promise<void>((resolve) => (finish = resolve))
+            setBusy(false)
+          }}
+        >
+          <Field label="First">
+            <TextInput />
+          </Field>
+        </Form>
+      )
+    }
+    render(<Sending />)
+    const field = screen.getByRole('textbox', { name: 'First' })
+    await user.type(field, 'x{Enter}')
+    expect(field.matches(':disabled')).toBe(true)
+    expect(document.activeElement).toBe(screen.getByRole('form', { name: 'Probe' }))
+    await act(async () => finish())
+    expect(field.matches(':disabled')).toBe(false)
+    expect(document.activeElement).toBe(field)
+  })
+})

package/src/Form.tsx ADDED Viewed

@@ -0,0 +1,113 @@
+import { useLayoutEffect, useRef, type FormHTMLAttributes, type ReactNode } from 'react'
+import { Fieldset } from '@base-ui/react/fieldset'
+import { Form as BaseForm } from '@base-ui/react/form'
+import { cn } from './cn'
+import { FormBusyContext, useFormBusy } from './formBusy'
+/**
+ * A form: Enter in a field, or a submit button, sends it, and the page never
+ * reloads. On Base UI's `Form` (UIG-7, 16 September), which the apps' five
+ * forms had each written around a plain `<form>`: `preventDefault`, a busy
+ * flag, and `disabled={busy}` on every field one by one.
+ *
+ * Base UI's part, as it renders it: a `<form noValidate>` — the browser's own
+ * validation bubbles are off, which no field in either app used — that, on
+ * submit, checks every `Field` inside and moves focus to the first one that is
+ * invalid instead of sending. `Field`'s `error` is still how an error shows.
+ *
+ * `busy` is ours. While it is on, the children sit in a disabled
+ * `<fieldset>` (Base UI's `Fieldset`, with no box of its own), so every field
+ * and button inside is switched off at once — the package's Button,
+ * IconButton and Checkbox wearing their own switched-off look, which a
+ * fieldset alone does not give them (`formBusy.ts`) — and focus waits on the form
+ * rather than falling to the page. Chrome drops focus to `<body>` the moment
+ * the focused field is disabled, before any effect runs, and jsdom does not —
+ * so the form remembers the last element inside it that had focus, and takes
+ * focus back from the page on its behalf (measured in Chrome, 16 September).
+ * When `busy` ends, focus goes to the first invalid field, else to what sent
+ * the form, else to the first control. That is `CommandPalette`'s order
+ * too, so the two read the same (UIG-29).
+ */
+export interface FormProps extends Omit<FormHTMLAttributes<HTMLFormElement>, 'onSubmit' | 'children' | 'noValidate'> {
+  /** Enter in a field, or a submit button. The page's own submit is already prevented. */
+  onSubmit: () => void | Promise<void>
+  /** While sending: every field and button inside is switched off, and focus waits on the form. */
+  busy?: boolean
+  children: ReactNode
+}
+const CONTROL = 'input:not([type="hidden"]), textarea, select, button, [role="checkbox"], [role="combobox"], [tabindex]:not([tabindex="-1"])'
+function usable(element: Element | null): element is HTMLElement {
+  return element instanceof HTMLElement && element.isConnected && element.matches(CONTROL) && !element.matches(':disabled') && element.getAttribute('aria-disabled') !== 'true'
+}
+export function Form({ onSubmit, busy: ownBusy = false, className, children, ...props }: FormProps) {
+  // A form inside a busy form is busy too.
+  const outerBusy = useFormBusy()
+  const busy = ownBusy || outerBusy
+  const form = useRef<HTMLFormElement>(null)
+  // What had focus when the form went busy, and whether the form took focus from it.
+  const sender = useRef<Element | null>(null)
+  const holding = useRef(false)
+  // The last element inside the form that had focus, until focus moves to something outside it.
+  const lastInside = useRef<Element | null>(null)
+  useLayoutEffect(() => {
+    const element = form.current
+    if (!element) return
+    if (busy) {
+      const active = document.activeElement
+      // Focus is still inside (jsdom, or a field that stayed enabled), or the
+      // browser has already dropped it to the page from a field inside (Chrome).
+      const from =
+        active && active !== element && element.contains(active)
+          ? active
+          : !active || active === document.body
+            ? lastInside.current
+            : null
+      if (from?.isConnected) {
+        sender.current = from
+        holding.current = true
+        element.focus()
+      }
+      return
+    }
+    if (!holding.current) return
+    holding.current = false
+    // Someone who moved focus on while waiting keeps it where they put it.
+    if (document.activeElement !== element && document.activeElement !== document.body) return
+    const invalid = Array.from(element.querySelectorAll('[data-invalid]')).find(usable)
+    const target = invalid ?? (usable(sender.current) ? sender.current : Array.from(element.querySelectorAll(CONTROL)).find(usable))
+    sender.current = null
+    target?.focus()
+  }, [busy])
+  return (
+    <BaseForm
+      ref={form}
+      {...props}
+      // Focus waits here only while busy; the rest of the time a click between two fields must not land on the form.
+      tabIndex={busy ? -1 : props.tabIndex}
+      // A form that holds focus for a moment must not draw a focus ring.
+      className={cn('outline-none', className)}
+      onFocus={(event) => {
+        if (event.target !== form.current) lastInside.current = event.target
+        props.onFocus?.(event)
+      }}
+      onBlur={(event) => {
+        const next = event.relatedTarget
+        if (next && !form.current?.contains(next)) lastInside.current = null
+        props.onBlur?.(event)
+      }}
+      onSubmit={(event) => {
+        event.preventDefault()
+        void onSubmit()
+      }}
+    >
+      <Fieldset.Root disabled={busy} className="contents">
+        <FormBusyContext.Provider value={busy}>{children}</FormBusyContext.Provider>
+      </Fieldset.Root>
+    </BaseForm>
+  )
+}

package/src/IconButton.tsx CHANGED Viewed

@@ -1,6 +1,7 @@
 import type { ComponentPropsWithRef, ReactNode } from 'react'
 import { Button as BaseButton } from '@base-ui/react/button'
 import { cn } from './cn'
+import { useFormBusy } from './formBusy'
 import { TooltipTrigger } from './Tooltip'
 /**
@@ -42,10 +43,12 @@ export function IconButton({
   type = 'button',
   ...props
 }: IconButtonProps) {
+  // Inside a busy Form: switched off, and looking it (formBusy.ts).
+  const formBusy = useFormBusy()
   const button = (
     <BaseButton
       type={type}
-      disabled={disabled || !!disabledReason}
+      disabled={disabled || !!disabledReason || formBusy}
       focusableWhenDisabled={!!disabledReason}
       className={(state) =>
         cn(

package/src/SearchInput.mdx CHANGED Viewed

@@ -5,8 +5,8 @@ import * as SearchInputStories from './SearchInput.stories'
 # SearchInput
-An inset field with a hairline border that strengthens on focus, and an
-optional keyboard hint at the right edge.
+An inset field with a hairline border that strengthens on hover and on
+focus, and an optional keyboard hint at the right edge.
 <Canvas of={SearchInputStories.WithShortcut} />

package/src/SearchInput.tsx CHANGED Viewed

@@ -33,7 +33,9 @@ export function SearchInput({ shortcut, className, placeholder = 'Search…', ..
       className={cn(
         'flex gap-2 items-center px-3 py-2 rounded-lg',
         'bg-bg-inset border border-border-default',
-        'focus-within:border-border-strong transition-colors',
+        // Hover strengthens the border as it does on every other field (16 September). Here that
+        // is also the focus look, which was the stronger border before hover existed.
+        'hover:border-border-strong focus-within:border-border-strong transition-colors',
         className,
       )}
     >

package/src/TextInput.mdx CHANGED Viewed

@@ -5,8 +5,8 @@ import * as TextInputStories from './TextInput.stories'
 # TextInput
-The single-line field: inset surface, 8px radius, 14px text, the focus
-border in every theme.
+The single-line field: inset surface, 8px radius, 14px text, a stronger
+border on hover, the focus border in every theme.
 <Canvas of={TextInputStories.Filled} />

package/src/TextInput.test.tsx CHANGED Viewed

@@ -35,4 +35,11 @@ describe('TextInput', () => {
     for (const c of ['px-3', 'py-2', 'text-input-value']) expect(classes).not.toContain(c)
     expect(input.hasAttribute('size')).toBe(false)
   })
+  it("a stronger border on hover, as Select's, and the focus border still wins while focused", () => {
+    render(<TextInput aria-label="Title" />)
+    const classes = screen.getByRole('textbox').className.split(' ')
+    // Both survive cn(); Tailwind emits focus after hover, so the order in CSS decides, not here.
+    for (const c of ['border-border-default', 'hover:border-border-strong', 'focus:border-border-focus']) expect(classes).toContain(c)
+  })
 })

package/src/TextInput.tsx CHANGED Viewed

@@ -32,7 +32,10 @@ export const TextInput = forwardRef<HTMLInputElement, TextInputProps>(function T
       ref={ref}
       type={type}
       className={cn(
-        'bg-bg-inset border border-border-default focus:border-border-focus rounded-lg',
+        // The border strengthens on hover, as Select's and ChipInput's do (Katerina, 16 September:
+        // "aren't there hover states in text input and text area?"). Focus comes after hover in
+        // Tailwind's order, so a focused field keeps the focus border under the pointer.
+        'bg-bg-inset border border-border-default hover:border-border-strong focus:border-border-focus rounded-lg',
         // The small size is the small Select's trigger, class for class.
         size === 'default' && 'px-3 py-2 text-input-value',
         size === 'small' && 'h-6 px-2 text-caption',

package/src/Textarea.tsx CHANGED Viewed

@@ -21,7 +21,10 @@ export const Textarea = forwardRef<HTMLTextAreaElement, TextareaProps>(function
       ref={ref as React.Ref<HTMLElement>}
       render={<textarea />}
       className={cn(
-        'bg-bg-inset border border-border-default focus:border-border-focus rounded-lg px-3 py-2',
+        // The border strengthens on hover, as Select's and ChipInput's do (Katerina, 16 September:
+        // "aren't there hover states in text input and text area?"). Focus comes after hover in
+        // Tailwind's order, so a focused field keeps the focus border under the pointer.
+        'bg-bg-inset border border-border-default hover:border-border-strong focus:border-border-focus rounded-lg px-3 py-2',
         'text-input-value text-text-primary placeholder:text-text-muted',
         'resize-none outline-none transition-colors',
         'disabled:pointer-events-none disabled:bg-bg-disabled disabled:text-text-disabled',

package/src/eslint/index.test.ts CHANGED Viewed

@@ -7,7 +7,7 @@ import estiva, { APP_RULE_IDS, countGates, PACKAGE_RULE_IDS, PLUGIN_KEY } from '
 /**
  * The plugin as an app uses it: a flat config with `configs.recommended`,
  * linting text the way Peek's editor hook does (`lintText`). The rule's own
- * cases are in no-raw-button.test.ts.
+ * cases are in no-raw-element.test.ts.
  */
 const tsx: Linter.Config = {
   files: ['**/*.tsx'],
@@ -34,7 +34,7 @@ describe('the plugin object', () => {
   it('carries every rule, the app ones and the inward ones', () => {
     expect(Object.keys(estiva.rules)).toEqual([
-      'no-raw-button',
+      'no-raw-element',
       'raw-element-outside-a-wrapper',
       'no-hand-rolled-behaviour',
       'component-has-a-page',
@@ -44,17 +44,19 @@ describe('the plugin object', () => {
   /**
    * The apps spread `recommended`. A rule added for the package (UIG-5) must not
-   * arrive in Peek or Ship with the next version bump: an app is full of raw
-   * elements it may keep until UIG-7, and has no `.mdx` pages at all. This is
+   * arrive in Peek or Ship with the next version bump: an app's components are
+   * not primitives, so "buried inside a component" means nothing there
+   * (`no-raw-element` is the app's version, UIG-7), and an app has no `.mdx`
+   * pages at all. This is
    * the test that holds that line — if you add an app-facing rule on purpose,
    * change it deliberately, here.
    */
   it('gives an app only the app rules, as errors, under estiva/', () => {
     for (const config of [estiva.configs.recommended, estiva.configs.strict]) {
       expect(config.plugins?.[PLUGIN_KEY]).toBe(estiva)
-      expect(config.rules).toEqual({ 'estiva/no-raw-button': 'error' })
+      expect(config.rules).toEqual({ 'estiva/no-raw-element': 'error' })
     }
-    expect(APP_RULE_IDS).toEqual(['estiva/no-raw-button'])
+    expect(APP_RULE_IDS).toEqual(['estiva/no-raw-element'])
   })
   it('gives this package its own set, as errors, and it reaches no app config', () => {
@@ -77,7 +79,14 @@ describe('an app lint with configs.recommended', () => {
   it('reports a raw <button>, naming Button', async () => {
     const [result] = await lint(component('    <button type="button">x</button>'))
     expect(result.messages.map((m) => [m.ruleId, m.severity, m.message])).toEqual([
-      ['estiva/no-raw-button', 2, 'Use `Button` from @estiva-app/ui instead of a raw <button>.'],
+      ['estiva/no-raw-element', 2, 'Use `Button` from @estiva-app/ui instead of a raw <button>.'],
+    ])
+  })
+  it('reports a raw <a>, naming Link', async () => {
+    const [result] = await lint(component('    <a href="/x">x</a>'))
+    expect(result.messages.map((m) => [m.ruleId, m.severity, m.message])).toEqual([
+      ['estiva/no-raw-element', 2, 'Use `Link` from @estiva-app/ui instead of a raw <a>. For a chip, `InlineChip`; for a whole card, `Card` with `href`.'],
     ])
   })
@@ -90,25 +99,25 @@ describe('an app lint with configs.recommended', () => {
 describe('countGates', () => {
   it('counts an error, and an escape only when the lint reports escapes', async () => {
     const code = component('    <div>\n      <button>x</button>\n      {/* @estiva-escape: a preview drawn from its own palette */}\n      <button>y</button>\n    </div>')
-    expect(countGates(await lint(code)).rules).toEqual({ 'estiva/no-raw-button': { errors: 1, warnings: 0, escapes: 0 } })
-    expect(countGates(await lint(code, [countMode])).rules).toEqual({ 'estiva/no-raw-button': { errors: 1, warnings: 0, escapes: 1 } })
+    expect(countGates(await lint(code)).rules).toEqual({ 'estiva/no-raw-element': { errors: 1, warnings: 0, escapes: 0 } })
+    expect(countGates(await lint(code, [countMode])).rules).toEqual({ 'estiva/no-raw-element': { errors: 1, warnings: 0, escapes: 1 } })
   })
   it('lists a report an eslint-disable silenced, and counts it as neither an error nor an escape', async () => {
-    const results = await lint(component('    // eslint-disable-next-line estiva/no-raw-button\n    <button>x</button>'), [countMode])
+    const results = await lint(component('    // eslint-disable-next-line estiva/no-raw-element\n    <button>x</button>'), [countMode])
     const count = countGates(results)
-    expect(count.rules['estiva/no-raw-button']).toEqual({ errors: 0, warnings: 0, escapes: 0 })
-    expect(count.disabled).toEqual([{ filePath: results[0].filePath, line: 4, ruleId: 'estiva/no-raw-button' }])
+    expect(count.rules['estiva/no-raw-element']).toEqual({ errors: 0, warnings: 0, escapes: 0 })
+    expect(count.disabled).toEqual([{ filePath: results[0].filePath, line: 4, ruleId: 'estiva/no-raw-element' }])
   })
   it('counts a marker inside that directive as an error of the rule', async () => {
-    const results = await lint(component('    // eslint-disable-next-line estiva/no-raw-button -- @estiva-escape: a preview drawn from its own palette\n    <button>x</button>'), [countMode])
+    const results = await lint(component('    // eslint-disable-next-line estiva/no-raw-element -- @estiva-escape: a preview drawn from its own palette\n    <button>x</button>'), [countMode])
     const count = countGates(results)
-    expect(count.rules['estiva/no-raw-button']).toEqual({ errors: 1, warnings: 0, escapes: 0 })
+    expect(count.rules['estiva/no-raw-element']).toEqual({ errors: 1, warnings: 0, escapes: 0 })
     expect(count.disabled).toHaveLength(1)
   })
   it('lists every rule of the plugin, even with nothing found', () => {
-    expect(countGates([])).toEqual({ rules: { 'estiva/no-raw-button': { errors: 0, warnings: 0, escapes: 0 } }, disabled: [] })
+    expect(countGates([])).toEqual({ rules: { 'estiva/no-raw-element': { errors: 0, warnings: 0, escapes: 0 } }, disabled: [] })
   })
 })

package/src/eslint/index.ts CHANGED Viewed

@@ -20,7 +20,7 @@ import { createRequire } from 'node:module'
 import type { ESLint, Linter } from 'eslint'
 import { componentHasAPage, componentHasAStory } from './has-a-page-and-a-story'
 import { noHandRolledBehaviour } from './no-hand-rolled-behaviour'
-import { noRawButton } from './no-raw-button'
+import { noRawElement } from './no-raw-element'
 import { rawElementOutsideAWrapper } from './raw-element-outside-a-wrapper'
 export { ESCAPE_MARKER, MIN_REASON, SETTINGS_KEY, isEscaped, type EstivaSettings } from './escape'
@@ -35,7 +35,7 @@ export const PLUGIN_KEY = 'estiva'
  * already has. `recommended` and `strict` carry these and only these.
  */
 const appRules = {
-  'no-raw-button': noRawButton,
+  'no-raw-element': noRawElement,
 }
 /**
@@ -45,8 +45,9 @@ const appRules = {
  *
  * They are in `configs.package`, never in `recommended`, on purpose. Peek and
  * Ship spread `recommended`, so a rule added here must not arrive in an app
- * with the next version bump: an app is full of raw elements it is allowed to
- * have until UIG-7, and has no `.mdx` pages at all. `index.test.ts` holds the
+ * with the next version bump: an app's components are not primitives, so
+ * "buried inside a component" means nothing there (`no-raw-element` is the
+ * app's version, UIG-7), and an app has no `.mdx` pages at all. `index.test.ts` holds the
  * apps' list to exactly the app rules.
  */
 const packageRules = {
@@ -80,7 +81,7 @@ export const PACKAGE_RULE_IDS = Object.keys(packageRules).map((name) => `${PLUGI
 plugin.configs.recommended = {
   name: '@estiva-app/ui/recommended',
   plugins: { [PLUGIN_KEY]: plugin },
-  rules: { [`${PLUGIN_KEY}/no-raw-button`]: 'error' },
+  rules: { [`${PLUGIN_KEY}/no-raw-element`]: 'error' },
 }
 plugin.configs.strict = {
   name: '@estiva-app/ui/strict',