@wallarm-org/claude-design 0.0.0-stage → 4.9.0

package/dist/project/components/FilterInput/README.md

@@ -0,0 +1,416 @@
+A config-driven query builder — `fields` metadata in, an `ExprNode` tree out of `onChange` — for filtering a data-dense resource. Reach for a row of `Select`s instead when three or four facets picked by equality would do; reach for this when the attribute count is high, or the query needs AND/OR, grouping, or operators like `between` and `like`. The menus, chips and connectors are internal, so what you own is the field config.
+
+## Props as canvas attributes
+
+Use kebab-case attribute names. Pass non-string values through renderVals holes, including booleans. The full emitted API is in `components/index.d.ts`.
+
+| Attribute | Type | Required | Default | Description |
+| --- | --- | --- | --- | --- |
+| `fields` | `FieldMetadata[] \| undefined` | no | `[]` | Filter-field configurations driving the autocomplete. A few names are **reserved** and auto-wired with design-system helpers — DS-supplied callbacks **override** consumer values for the reserved slots, because the field semantics (mask range, accepted chars, backend form) are fixed by DS: - `status_code` — HTTP status code field (mask suggestions, format validation, digit-or-X input filter, partial-input normalization). To opt out, use a different `name` and attach the factories (`createStatusCodeSuggestions`, …) manually. |
+| `field-groups` | `FieldGroup[] \| undefined` | no | — | Optional grouping for the field-selection menu. When omitted, fields render as a flat list. When provided, fields render under labeled group headers (group order = array order; field order = listed order). Fields not referenced by any group fall into a trailing headerless section. Referenced by field `name`; unknown names are ignored. |
+| `value` | `ExprNode \| null \| undefined` | no | — |  |
+| `on-change` | `((expression: ExprNode \| null) => void) \| undefined` | no | — |  |
+| `placeholder` | `string \| undefined` | no | `Type to filter...` |  |
+| `error` | `boolean \| undefined` | no | `false` |  |
+| `external-errors` | `string[] \| undefined` | no | — | Field names whose values were rejected by the backend. Matching chips are rendered with a value error (red). Purely presentational: conditions and `onChange` output are unaffected, and the consumer is expected to render its own message (e.g. an alert with the backend error text) and clear the prop when the filter changes or the query succeeds. |
+| `on-errors-change` | `((errors: string[]) => void) \| undefined` | no | — | Notified whenever the set of validation messages FilterInput renders below the input changes (empty array = no visible error). Lets a consumer avoid stacking its own message (e.g. a backend-error alert) on top of one the input already shows. Pass a stable (memoized) callback. |
+| `show-keyboard-hint` | `boolean \| undefined` | no | `false` |  |
+| `title` | `string \| undefined` | no | — |  |
+| `default-checked` | `boolean \| undefined` | no | — |  |
+| `default-value` | `string \| number \| readonly string[] \| undefined` | no | — |  |
+| `auto-focus` | `boolean \| undefined` | no | — |  |
+| `id` | `string \| undefined` | no | — |  |
+| `tab-index` | `number \| undefined` | no | — |  |
+| `rel` | `string \| undefined` | no | — |  |
+| `data-testid` | `string \| undefined` | no | — |  |
+
+## Sub-components
+
+- `WallarmDS.FilterInputChip` — `FilterInputChipProps` in the declaration bundle.
+- `WallarmDS.FilterInputFieldMenu` — `FilterInputFieldMenuProps` in the declaration bundle.
+- `WallarmDS.FilterInputOperatorMenu` — `FilterInputOperatorMenuProps` in the declaration bundle.
+- `WallarmDS.FilterInputValueMenu` — `FilterInputValueMenuProps` in the declaration bundle.
+
+## Stories
+
+### Default
+
+The pattern at rest against the real attack-vectors schema: click in and it walks you field, then operator, then value.
+
+Source: FilterInput/stories/FilterInput.stories.tsx#Default
+
+### WithKeyboardHint
+
+`showKeyboardHint` prints the shortcut hint beside the input — worth turning on where filtering is new to the reader, and off where it is routine.
+
+Source: FilterInput/stories/FilterInput.stories.tsx#WithKeyboardHint
+
+### WithFieldGroups
+
+`fieldGroups` sorts the field menu under labelled headers, which is what keeps a fifty-field schema navigable.
+
+Source: FilterInput/stories/FilterInput.stories.tsx#WithFieldGroups
+
+### WithDescribedChip
+
+A field with a `description` carries it into a tooltip on the chip's first segment, so a committed filter can still explain itself; the operator and value segments keep click-to-edit.
+
+Source: FilterInput/stories/FilterInput.stories.tsx#WithDescribedChip
+
+### ErrorEmpty
+
+`error` reddens the input as a whole — pair it with an `Alert` that says what was rejected, since the input itself cannot.
+
+Source: FilterInput/stories/FilterInput.stories.tsx#ErrorEmpty
+
+### WithPresetValue
+
+Controlled mode: `value` takes an `ExprNode` and `onChange` hands the tree back. The JSON below the input is the story printing that tree, not part of the component.
+
+Source: FilterInput/stories/FilterInput.stories.tsx#WithPresetValue
+
+### WithMultiConditionPreset
+
+Two conditions joined by AND — what a `group` node looks like once rendered, connectors included.
+
+Source: FilterInput/stories/FilterInput.stories.tsx#WithMultiConditionPreset
+
+### ErrorWithValue
+
+The error state with a condition already committed: the chip stays editable, so the query can be fixed in place rather than cleared.
+
+Source: FilterInput/stories/FilterInput.stories.tsx#ErrorWithValue
+
+### WithDisabledChips
+
+A condition marked `disabled` is locked — dimmed, no edit, no remove — which is how a drill-down carries its context into the filter without letting the reader drop it.
+
+Source: FilterInput/stories/FilterInput.stories.tsx#WithDisabledChips
+
+### AllChipsDisabled
+
+With every chip locked, clear-all has nothing to remove, and the input still accepts new conditions on top.
+
+Source: FilterInput/stories/FilterInput.stories.tsx#AllChipsDisabled
+
+### HTTPStatusCodeSuggestions
+
+A status-code field wired by hand with the `createStatusCode*` helpers: typing narrows the mask suggestions, 4 to 4XX and 40 to 40X.
+
+Source: FilterInput/stories/FilterInput.stories.tsx#HTTPStatusCodeSuggestions
+
+### HTTPStatusCodeByName
+
+`status_code` is a reserved field name — the DS fills in the same suggestions, input filter, normaliser and validator on its own, and an explicit callback still wins.
+
+Source: FilterInput/stories/FilterInput.stories.tsx#HTTPStatusCodeByName
+
+### PairedField
+
+`pairedField` captures two steps in one chip — a parameter name, then its value with its own operator — for an attribute that means nothing on its own.
+
+Source: FilterInput/stories/FilterInput.stories.tsx#PairedField
+
+### PairedFieldValueIsSet
+
+`is set` and `is not set` on the paired half finish the chip with no second value, which is how you ask whether a key is present at all.
+
+Source: FilterInput/stories/FilterInput.stories.tsx#PairedFieldValueIsSet
+
+### PairedFieldValueDescriptions
+
+The value rows carry a muted second line because the bold name is not unique: two `request-id` rows differ only by their path, and selecting one commits the path.
+
+Source: FilterInput/stories/FilterInput.stories.tsx#PairedFieldValueDescriptions
+
+### PairedFieldPreset
+
+The same paired field arriving pre-filled from a controlled value, rendered as the single chip it becomes.
+
+Source: FilterInput/stories/FilterInput.stories.tsx#PairedFieldPreset
+
+### NestedValueSubmenu
+
+Values grouped under section headers, with one row opening a submenu of sub-types: only leaves commit, so the expression never carries a group. A fully selected group collapses to its own label in the chip while a partial one lists the chosen leaves, and typing flattens the tree to matches at any depth.
+
+Source: FilterInput/stories/FilterInput.stories.tsx#NestedValueSubmenu
+
+### Default
+
+The three segments a chip is made of; inside `FilterInput` each one is separately clickable, which is how a committed filter gets edited.
+
+Source: FilterInput/stories/FilterInputChip.stories.tsx#Default
+
+### WithError
+
+`error` reddens the chip for a value that was rejected. It is presentational only — the expression underneath is unchanged.
+
+Source: FilterInput/stories/FilterInputChip.stories.tsx#WithError
+
+### WithLongText
+
+Long text in both segments. The chip caps at 320px; segments size to their content, with the attribute capped at 180px and the value guaranteed 60px minimum. When space is tight, the attribute shrinks first (since the value is what the filter matches on), both truncating with ellipsis rather than one segment collapsing to zero.
+
+Source: FilterInput/stories/FilterInputChip.stories.tsx#WithLongText
+
+### WithValueMaxWidth
+
+A field with its own `valueMaxWidth` (here 500px) lifts the chip's blanket cap and lets the value segment run wide, truncating with an ellipsis only past that width — for long freeform values like parameter-path expressions (AS-1064). The full value is preserved for matching.
+
+Source: FilterInput/stories/FilterInputChip.stories.tsx#WithValueMaxWidth
+
+### RealisticExample
+
+The same chip carrying real content, which is where the segment widths actually get tested.
+
+Source: FilterInput/stories/FilterInputChip.stories.tsx#RealisticExample
+
+### AndOperator
+
+The AND connector is itself a chip, clickable to change the join. Standalone it reads `FilterInput` context, so the story wraps it in a no-op provider.
+
+Source: FilterInput/stories/FilterInputChip.stories.tsx#AndOperator
+
+### OrOperator
+
+The OR connector, same shape — which is why AND/OR needs no separate control.
+
+Source: FilterInput/stories/FilterInputChip.stories.tsx#OrOperator
+
+### CombinedWithAnd
+
+Two conditions and the connector between them: what the input assembles as each chip commits.
+
+Source: FilterInput/stories/FilterInputChip.stories.tsx#CombinedWithAnd
+
+### CombinedWithOr
+
+The same pair joined by OR, where the connector is the only difference between two very different queries.
+
+Source: FilterInput/stories/FilterInputChip.stories.tsx#CombinedWithOr
+
+### WithDeleteButton
+
+`onRemove` reveals the remove button on hover, so a resting filter row stays quiet.
+
+Source: FilterInput/stories/FilterInputChip.stories.tsx#WithDeleteButton
+
+### ErrorWithDelete
+
+Error plus remove — a rejected chip has to stay removable, since dropping it is usually the fastest fix.
+
+Source: FilterInput/stories/FilterInputChip.stories.tsx#ErrorWithDelete
+
+### InteractiveDeleteExample
+
+Removing chips one at a time, with the connectors closing up behind them.
+
+Source: FilterInput/stories/FilterInputChip.stories.tsx#InteractiveDeleteExample
+
+### Disabled
+
+`disabled` locks a chip: dimmed, no click, no remove, for a condition the surrounding page owns.
+
+Source: FilterInput/stories/FilterInputChip.stories.tsx#Disabled
+
+### DisabledWithOnRemove
+
+`disabled` wins over `onRemove` — no remove button appears, so a locked chip cannot be dropped by accident.
+
+Source: FilterInput/stories/FilterInputChip.stories.tsx#DisabledWithOnRemove
+
+### DisabledAndInteractiveMix
+
+Locked and editable chips in one row, which is what a drill-down actually looks like.
+
+Source: FilterInput/stories/FilterInputChip.stories.tsx#DisabledAndInteractiveMix
+
+### BuildingAttributeOnly
+
+`building` is the half-made chip shown while a condition is being composed — attribute chosen, operator next.
+
+Source: FilterInput/stories/FilterInputChip.stories.tsx#BuildingAttributeOnly
+
+### BuildingWithOperator
+
+One step on, waiting for a value.
+
+Source: FilterInput/stories/FilterInputChip.stories.tsx#BuildingWithOperator
+
+### BuildingComplete
+
+All three segments filled, at the point where the chip commits and stops building.
+
+Source: FilterInput/stories/FilterInputChip.stories.tsx#BuildingComplete
+
+### AllStatesShowcase
+
+Every chip state in one frame — the quickest way to check a visual change has not shifted one of them.
+
+Source: FilterInput/stories/FilterInputChip.stories.tsx#AllStatesShowcase
+
+### Paired
+
+A paired chip carries two triplets separated by a semicolon, for a field whose value means nothing without its key.
+
+Source: FilterInput/stories/FilterInputChip.stories.tsx#Paired
+
+### PairedWithError
+
+The error lands on the half that is wrong — here the required second value — rather than reddening the whole chip.
+
+Source: FilterInput/stories/FilterInputChip.stories.tsx#PairedWithError
+
+### PairedWithLongText
+
+The same cap, 380px across two triplets. The base value is held to 90px so it cannot hide its partner, but every other segment keeps its full width, so the second value is the one that gives way.
+
+Source: FilterInput/stories/FilterInputChip.stories.tsx#PairedWithLongText
+
+### Default
+
+The raw backend payload rendered as-is: around fifty fields, a hundred-plus application list, and the paired context-parameter field — the breadth the pattern has to survive.
+
+Source: FilterInput/stories/FilterInputComposition.stories.tsx#Default
+
+### SuggestionsOnly
+
+With `strictValues: false` everywhere, option lists become suggestions and any typed value commits, which is how the Attacks page treats the schema. Type checks and explicit `validate` callbacks still apply.
+
+Source: FilterInput/stories/FilterInputComposition.stories.tsx#SuggestionsOnly
+
+### Simple
+
+Two fields, to show the same component scales down — though at this size a pair of `Select`s is usually the better answer.
+
+Source: FilterInput/stories/FilterInputComposition.stories.tsx#Simple
+
+### BackendIntegration
+
+The schema arriving from a fetch: until `fields` exists there is nothing to filter by, so the input waits behind a placeholder block.
+
+Source: FilterInput/stories/FilterInputComposition.stories.tsx#BackendIntegration
+
+### Default
+
+The plain list — every field in the config, label first, whatever its type.
+
+Source: FilterInput/stories/FilterInputFieldMenu.stories.tsx#Default
+
+### FewFields
+
+A short config, to check the menu does not pad itself out.
+
+Source: FilterInput/stories/FilterInputFieldMenu.stories.tsx#FewFields
+
+### Closed
+
+`open={false}` renders nothing at all — no collapsed shell, no placeholder — so
+this frame is deliberately empty. It is the one story with no trigger.
+
+Source: FilterInput/stories/FilterInputFieldMenu.stories.tsx#Closed
+
+### Interactive
+
+Selection wired up, so you can watch which field the menu hands back.
+
+Source: FilterInput/stories/FilterInputFieldMenu.stories.tsx#Interactive
+
+### WithSearch
+
+Typing filters the list by label and name, case-insensitively — try “status” or “CWE”.
+
+Source: FilterInput/stories/FilterInputFieldMenu.stories.tsx#WithSearch
+
+### WithRecentFields
+
+`recentConditions` puts the last few filters back at the top, capped at three —
+what keeps a fifty-field menu usable day to day. Each row replays the whole
+condition, not just the field.
+
+Source: FilterInput/stories/FilterInputFieldMenu.stories.tsx#WithRecentFields
+
+### WithSuggestions
+
+A curated suggestions section, for the handful of fields most people reach for first.
+
+Source: FilterInput/stories/FilterInputFieldMenu.stories.tsx#WithSuggestions
+
+### WithGroups
+
+Fields under labelled group headers, in array order, with anything left out of
+every group falling into a trailing headerless section — here, `CWE`.
+
+Source: FilterInput/stories/FilterInputFieldMenu.stories.tsx#WithGroups
+
+### WithDescriptions
+
+Hovering or keyboard-focusing a row opens a popover beside the menu with the description and, where the value format is not obvious, an example. A row with no description opens nothing, and group headers are inert.
+
+Source: FilterInput/stories/FilterInputFieldMenu.stories.tsx#WithDescriptions
+
+### WithScrollableDescriptions
+
+A described list long enough to scroll, for checking the popover keeps up with the cursor and the keyboard.
+
+Source: FilterInput/stories/FilterInputFieldMenu.stories.tsx#WithScrollableDescriptions
+
+### WithRecentAndSuggestions
+
+Both props set, and only Recent renders — the two shortcut sections are
+mutually exclusive, so suggestions are the fallback for someone with no
+history rather than a second row of shortcuts.
+
+Source: FilterInput/stories/FilterInputFieldMenu.stories.tsx#WithRecentAndSuggestions
+
+### StringType
+
+A string field: equality, substring matching, set membership, and the two presence checks.
+
+Source: FilterInput/stories/FilterInputOperatorMenu.stories.tsx#StringType
+
+### IntegerType
+
+Numbers add the comparison operators, which is the usual reason to reach for a query builder at all, with `in` below the rule as its own group. `between` is not here — it is date-only.
+
+Source: FilterInput/stories/FilterInputOperatorMenu.stories.tsx#IntegerType
+
+### FloatType
+
+Same comparisons as integer, minus `in`: picking an exact float out of a list is not a real query.
+
+Source: FilterInput/stories/FilterInputOperatorMenu.stories.tsx#FloatType
+
+### DateType
+
+Dates are the only type that offers `between`, so a time window is one condition rather than two, and the comparisons read as before and after.
+
+Source: FilterInput/stories/FilterInputOperatorMenu.stories.tsx#DateType
+
+### BooleanType
+
+A boolean offers is / is not and the presence checks, and nothing else is worth asking.
+
+Source: FilterInput/stories/FilterInputOperatorMenu.stories.tsx#BooleanType
+
+### EnumType
+
+An enum trades comparison for set membership: is one of / is not one of is the operator that earns its place here.
+
+Source: FilterInput/stories/FilterInputOperatorMenu.stories.tsx#EnumType
+
+### Interactive
+
+Selection wired up, with the chosen operator echoed beside the trigger.
+
+Source: FilterInput/stories/FilterInputOperatorMenu.stories.tsx#Interactive
+
+### KeyboardNavigation
+
+Arrow keys move, Enter selects, Escape closes — the menu is fully operable without a pointer once the trigger has opened it.
+
+Source: FilterInput/stories/FilterInputOperatorMenu.stories.tsx#KeyboardNavigation
+
+## Story sources
+
+The story files and their local imports are in [stories.md](./stories.md), verbatim.

package/dist/project/components/FilterInput/preview.html

@@ -0,0 +1,2 @@
+<!-- @dsCard group="Inputs" height=480 -->
+<!doctype html><html><head><meta charset="utf-8"></head><body><div id="preview"></div><script src="./stories.js"></script><script>window.WallarmPreview.mount(document.getElementById('preview'));</script></body></html>