@redis-ui/components 43.0.2 → 43.2.1

package/skills/redis-ui-components/references/SearchInput.md

@@ -0,0 +1,213 @@
+# SearchInput
+
+Composable search input with validation, reset, loading, and `FormField` support.
+
+## Import
+
+```tsx
+import { SearchInput } from '@redislabsdev/redis-ui-components';
+```
+
+> If the component uses icons in examples, also note:
+> ```tsx
+> import { SearchIcon } from '@redislabsdev/redis-ui-icons';
+> ```
+
+## Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| id | `string` | - | Shared id for the compose wrapper and the inner input. |
+| variant | `'outline' \| 'underline'` | `'outline'` | Visual style for the input wrapper. |
+| error | `ReactElement \| string` | - | Error content shown in the status tooltip. |
+| valid | `boolean` | - | Enables the success state. |
+| value | `string` | - | Controlled search value. |
+| defaultValue | `string` | - | Uncontrolled initial search value. |
+| onChange | `(value: string) => void` | - | Called when the search value changes. |
+| autoSize | `boolean` | `false` | Makes the inner input size itself to the current value. |
+| loading | `boolean` | `false` | Shows the inline loading indicator. |
+| allowReset | `boolean` | `true` | Shows the reset button when a value is present. |
+
+The component also accepts standard `input` attributes on the inner tag via `RestInputProps`, excluding `children`, `defaultValue`, `value`, `onChange`, and `readOnly`.
+
+## Sub-components
+
+- `SearchInput.Compose` - Compose wrapper used for custom layouts around the search field.
+- `SearchInput.Tag` - The underlying input element. Supports `autoSize`.
+- `SearchInput.ResetButton` - Clear/reset action button shown when a value is present.
+- `SearchInput.StatusIndicator` - Error/success indicator with tooltip support for errors.
+- `SearchInput.LoadingIndicator` - Inline loading spinner shown while `loading` is true.
+- `SearchInput.SearchIcon` - Leading search icon rendered with the component theme color.
+
+## Examples
+
+### Playground
+
+```tsx
+import { SearchInput } from '@redislabsdev/redis-ui-components';
+
+<SearchInput placeholder="SearchInput" type="text" id="custom-id" disabled={false} />
+```
+
+### Status
+
+> Adding `valid` prop enables valid status.
+>
+> Adding some text to the `error` prop of `SearchInput` enables error status. Hover the error indicator to see the message in a tooltip.
+>
+> Error status overrides valid status.
+
+```tsx
+<>
+  Valid status
+  <SearchInput placeholder="Search Input" valid />
+  Error status
+  <SearchInput placeholder="Search Input" error="Error message" />
+</>
+```
+
+### ResetButton
+
+> `SearchInput` allows users to clean the value. The reset button is enabled by default. Set `allowReset` to `false` to hide it.
+
+```tsx
+<SearchInput placeholder="Search Input" defaultValue="orange" allowReset />
+```
+
+### Disabled
+
+> Adding the `disabled` prop switches the component into disabled state.
+
+```tsx
+<>
+  Disabled
+  <SearchInput disabled />
+  Disabled with value
+  <SearchInput disabled defaultValue="orange" />
+  Disabled with indicators
+  <SearchInput disabled defaultValue="banana" error="Error message" allowReset />
+</>
+```
+
+### WithLabel
+
+> `SearchInput` does not have its own label or other external decoration elements.
+>
+> Use `FormField` for those cases. If a custom id is specified, `FormField` inherits it; otherwise the label is connected automatically via a generated id.
+>
+> Custom ids must start with a letter to work correctly.
+>
+> `FormField` also inherits status and some states from the input.
+
+```tsx
+import { FormField, SearchInput } from '@redislabsdev/redis-ui-components';
+
+<>
+  <FormField label="FormField Label with custom id">
+    <SearchInput placeholder="Search Input" id="custom-id" />
+  </FormField>
+  <FormField
+    label="FormField Label with auto-generated id"
+    additionalText="FormField additional text"
+  >
+    <SearchInput placeholder="Search Input" />
+  </FormField>
+</>
+```
+
+### Variants
+
+```tsx
+import { FormField, SearchInput } from '@redislabsdev/redis-ui-components';
+
+<>
+  <FormField label="Outline (default)" additionalText="outline">
+    <SearchInput placeholder="Search Input" />
+  </FormField>
+  <FormField label="Underline" additionalText="underline">
+    <SearchInput placeholder="Search Input" variant="underline" />
+  </FormField>
+</>
+```
+
+### AutoSize
+
+> Regular text input ignores `width: auto`.
+>
+> Add `autoSize` to make the search input grow with its content.
+
+```tsx
+<>
+  Type text in the input boxes to see how it auto-sizes
+  <SearchInput autoSize placeholder="placeholder" />
+  Input without placeholder:
+  <SearchInput autoSize defaultValue="edit value" />
+</>
+```
+
+### ComposeInputWithButton
+
+```tsx
+import { useState, type KeyboardEvent } from 'react';
+import { ActionIconButton, FormField, SearchInput } from '@redislabsdev/redis-ui-components';
+import { SearchIcon } from '@redislabsdev/redis-ui-icons';
+
+function Render() {
+  const [token, setToken] = useState('');
+  const [loading, setLoading] = useState(false);
+
+  const search = () => {
+    setLoading(true);
+    setTimeout(() => {
+      setLoading(false);
+      // eslint-disable-next-line no-alert
+      alert(`Search for "${token}" was successful`);
+    }, 1000);
+  };
+
+  const onKeyDown = (e: KeyboardEvent<HTMLInputElement>) => {
+    if (token && e.key.toLowerCase() === 'enter') {
+      search();
+    }
+  };
+
+  return (
+    <FormField
+      label="Search"
+      additionalText="Enter search token and press Enter or click Search button"
+    >
+      <SearchInput.Compose
+        id="token_input"
+        value={token}
+        onChange={(newValue) => {
+          setToken(newValue);
+        }}
+      >
+        <SearchInput.Tag onKeyDown={onKeyDown} autoComplete="off" disabled={loading} />
+        <SearchInput.ResetButton />
+        <SearchInput.LoadingIndicator loading={loading} />
+        {!loading && (
+          <ActionIconButton
+            size="M"
+            disabled={!token}
+            icon={SearchIcon}
+            variant="secondary"
+            onClick={search}
+          />
+        )}
+      </SearchInput.Compose>
+    </FormField>
+  );
+}
+```
+
+## Notes
+
+- `error` enables the error state, and error state overrides `valid`.
+- `allowReset` is enabled by default for `SearchInput`.
+- `SearchInput` does not expose the `readOnly`, `parser`, or `formatter` API from `Input`.
+- Use `FormField` when you need a label or other external decoration around the search input.
+- Custom ids passed through `FormField` must start with a letter.
+- `autoSize` is required when you want the search input to grow with its contents.
+- Use `SearchInput.Compose` when you need custom layouts around the search field, such as placing a button beside it.
+- The component forwards refs to the underlying input element.

package/skills/redis-ui-components/references/Section.md

@@ -0,0 +1,349 @@
+# Section
+
+Composable section container with a header, optional collapsible body, and optional summary bar.
+
+## Import
+
+```tsx
+import { Section } from '@redislabsdev/redis-ui-components';
+```
+
+## Props
+
+### `Section`
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| label | `string` | required | Header label text |
+| actions | `ReactNode` | - | Header action content rendered on the right |
+| content | `ReactNode` | - | Main section body content |
+| summary | `ReactNode` | - | Summary content shown when the section is collapsed |
+| summaryAlwaysVisible | `boolean` | `false` | Keep the summary bar visible even when the section is open |
+
+`Section` also accepts the compose-state props from `Section.Compose` through the underlying root container.
+
+### `Section.Compose`
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| children | `ReactNode` | required | Custom section layout built from the compound sub-components |
+| defaultOpen | `boolean` | - | Initial open state |
+| open | `boolean` | - | Controlled open state |
+| onOpenChange | `(open: boolean) => void` | - | Open state change handler |
+| disabled | `boolean` | `false` | Disable the collapsible root |
+| collapsible | `boolean` | `false` | Enable collapse and expand behavior |
+| className, style, id, data-* and other HTML attributes | `ComposeElementProps` | - | Standard container attributes inherited from the compose root |
+
+### `Section.Header`
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| label | `string` | required | Header title text |
+| actions | `ReactNode` | - | Header actions rendered in the trailing slot |
+
+`Section.Header` is a convenience wrapper around `Section.Header.Compose`, `Section.Header.Label`, `Section.Header.Group`, and `Section.Header.CollapseButton`.
+
+### `Section.Header.Compose`
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| children | `ReactNode` | required | Custom header layout |
+| className, style, id, data-* and other HTML attributes | `ComposeElementProps` | - | Standard container attributes inherited from the header compose root |
+
+### `Section.Header.Label`
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| label | `string` | required | Header title text |
+| other heading props | `TypographyHeadingProps` without `children` and `id` | - | Standard heading props inherited from the typography component |
+
+### `Section.Header.CollapseButton`
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| hidden | `boolean` | `false` | Visually hide the collapse trigger while keeping it accessible |
+| icon | `IconType` | `ChevronDownIcon` | Custom icon used for the collapse toggle |
+| other icon button props | `IconButtonProps` without `id` and `icon` | - | Standard icon button props inherited from `IconButton` |
+
+### `Section.Header.Group`
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| children | `ReactNode` | required | Grouped header content |
+| className, style, id, data-* and other HTML attributes | `ComposeElementProps` | - | Standard layout attributes for the group container |
+
+### `Section.Body`
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| children | `ReactNode` | required | Section body content |
+| className, style, id, data-* and other HTML attributes | `ComposeElementProps` | - | Standard body container attributes |
+
+### `Section.SummaryBar`
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| children | `ReactNode` | required | Summary content rendered in the footer bar |
+| alwaysVisible | `boolean` | `false` | Keep the summary visible even when the section is open |
+| className, style, id, data-* and other HTML attributes | `HTMLAttributes<HTMLElement>` | - | Standard summary bar attributes |
+
+### `CategoryValueList`
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| categoryValueList | `CategoryValueListItem[]` | required | Category/value pairs rendered as compact summary chips |
+
+## Sub-components
+
+- `Section.Compose` - Collapsible root container used for custom section composition.
+- `Section.Header` - Convenience header wrapper that renders the default header structure.
+- `Section.Header.Compose` - Header layout container for custom compositions.
+- `Section.Header.Label` - Title label that links to the collapse trigger when the section is collapsible.
+- `Section.Header.ActionButton` - Alias of `TextButton` for header actions.
+- `Section.Header.CollapseButton` - Accessible collapse and expand trigger.
+- `Section.Header.Group` - Flex group for splitting header content across opposite sides.
+- `Section.Body` - Section body region.
+- `Section.SummaryBar` - Summary strip shown in collapsed state.
+- `CategoryValueList` - Helper export for summary bars that display category/value pairs.
+
+## Examples
+
+### Playground
+
+> Default story showing the root `Section` API with a label, body content, actions, summary, and collapsible state enabled.
+
+```tsx
+import { Section, TextButton } from '@redislabsdev/redis-ui-components';
+
+<Section
+  label="Section Label"
+  content="Section content"
+  actions={<TextButton>Action Button</TextButton>}
+  summary="Summary"
+  collapsible
+  defaultOpen
+/>
+```
+
+### StaticallyExpanded
+
+> If `content` is provided and `collapsible` is not enabled, the section stays statically expanded.
+
+```tsx
+import { Section, TextButton } from '@redislabsdev/redis-ui-components';
+
+<Section
+  label="Statically expanded (non-collapsible)"
+  content="Section content"
+  actions={<TextButton>Action Button</TextButton>}
+/>
+```
+
+### Collapsible
+
+> Collapsed state changes only work when both `content` and `collapsible` are set.
+
+```tsx
+import { Section, TextButton } from '@redislabsdev/redis-ui-components';
+
+<Section
+  label="Collapsible (initially openened)"
+  content="Section content"
+  actions={<TextButton>Action Button</TextButton>}
+  collapsible
+  defaultOpen
+/>
+```
+
+### ControlledCollapsible
+
+> Use `open` and `onOpenChange` to control the collapsed and expanded states.
+
+```tsx
+import { useState } from 'react';
+import { Section } from '@redislabsdev/redis-ui-components';
+
+function Example() {
+  const [open, setOpen] = useState(true);
+
+  return (
+    <Section
+      open={open}
+      onOpenChange={setOpen}
+      label="Controlled Collapsible (initially opened)"
+      content="Section content"
+      collapsible
+    />
+  );
+}
+```
+
+### SimpleSummary
+
+> `summary` can be a simple string and is visible only when the section is collapsed.
+
+```tsx
+import { Section, TextButton } from '@redislabsdev/redis-ui-components';
+
+<Section
+  label="Collapsible with Summary"
+  content="Section content"
+  actions={<TextButton>Action Button</TextButton>}
+  collapsible
+  summary="Summary"
+/>
+```
+
+### CustomSummary
+
+> `summary` can render any React node.
+
+```tsx
+import { Section, ChipList, TextButton } from '@redislabsdev/redis-ui-components';
+import { StoryHList } from '../../helpers/Story.style';
+import * as S from './Section.style';
+
+const chips = [
+  { label: 'Chip 1', key: '1' },
+  { label: 'Chip 2', key: '2' },
+  { label: 'Chip 3', key: '3' }
+];
+
+<Section
+  label="Collapsible with custom Summary"
+  content="Section content"
+  actions={<TextButton>Action Button</TextButton>}
+  collapsible
+  summary={
+    <StoryHList>
+      <div style={{ width: '250px' }}>
+        <ChipList chips={chips} />
+      </div>
+      <S.TypographyBody>Summary bar</S.TypographyBody>
+    </StoryHList>
+  }
+/>
+```
+
+### SummaryAlwaysVisible
+
+> `summaryAlwaysVisible` keeps the summary bar visible even when the section is open.
+
+```tsx
+import { Section, TextButton } from '@redislabsdev/redis-ui-components';
+
+<Section
+  label="Collapsible with always visible Summary"
+  content="Section content"
+  actions={<TextButton>Action Button</TextButton>}
+  collapsible
+  defaultOpen
+  summary="Always visible Summary"
+  summaryAlwaysVisible
+/>
+```
+
+### WithoutContentWithSummary
+
+> If `content` is missing, the section stays collapsed and the summary remains visible.
+>
+> If `collapsible` is not set, the summary background matches the content background.
+
+```tsx
+import { Section, TextButton } from '@redislabsdev/redis-ui-components';
+
+<>
+  <Section
+    label="Collapsible with Summary & without Content"
+    actions={<TextButton>Action Button</TextButton>}
+    summary="Summary"
+    collapsible
+  />
+  <Section
+    label="Non-Collapsible with Summary & without Content"
+    actions={<TextButton>Action Button</TextButton>}
+    summary="Summary"
+  />
+</>
+```
+
+### SummaryWithCategoryValueList
+
+> Use `CategoryValueList` for category-value pair summaries.
+
+```tsx
+import { CategoryValueList, Label, Section, TextButton } from '@redislabsdev/redis-ui-components';
+
+const categoryValueList = [
+  { category: 'Category 1', value: 'Value 1', key: '1' },
+  { category: 'Category 2', value: 'Value 2', key: '2' },
+  { category: 'Category 3', value: 'Value 3', key: '3' },
+  { category: 'Category 4', value: 'Value 4', key: '4' },
+  { category: 'Category 5', value: 'Value 5', key: '5' }
+];
+
+<Section
+  label="Collapsible with Summary as Category-Value pairs"
+  actions={<TextButton>Action Button</TextButton>}
+  collapsible
+  summary={<CategoryValueList categoryValueList={categoryValueList} />}
+  content={
+    <>
+      {categoryValueList.map(({ category, value }) => (
+        <div key={category}>
+          <Label label={category} />
+          <Label label={value} />
+        </div>
+      ))}
+    </>
+  }
+/>
+```
+
+### Composition
+
+> `Section` and `Section.Header` are composable.
+>
+> Use `Header.Group` to split header content into opposite-side groups.
+>
+> Use `Header.Label` for the title, `Header.CollapseButton` for the toggle arrow, and `Header.ActionButton` for one or more actions.
+
+```tsx
+import { Badge, Button, Checkbox, Label, Section } from '@redislabsdev/redis-ui-components';
+import { StoryHList } from '../../helpers/Story.style';
+
+<Section.Compose collapsible>
+  <Section.Header.Compose>
+    <Section.Header.Group>
+      <StoryHList>
+        <Section.Header.CollapseButton />
+        <Checkbox onClick={(e) => e.stopPropagation()} />
+        <Label
+          infoIconProps={{ content: 'Info tooltip' }}
+          label={<Section.Header.Label label="Custom Label" style={{ lineHeight: 'unset' }} />}
+          style={{ margin: 0 }}
+        />
+        <Badge label="Badge" />
+      </StoryHList>
+    </Section.Header.Group>
+    <Section.Header.Group>
+      <Button variant="secondary-ghost">Action 1</Button>
+      <Button variant="secondary-fill">Action 2</Button>
+    </Section.Header.Group>
+  </Section.Header.Compose>
+  <Section.Body>Section content</Section.Body>
+  <Section.SummaryBar>Summary</Section.SummaryBar>
+</Section.Compose>
+```
+
+## Notes
+
+- `Section` is statically expanded when `content` is present and `collapsible` is not enabled.
+- Toggling collapsed state only works when both `content` and `collapsible` are set.
+- Use `open` and `onOpenChange` for controlled collapse behavior.
+- `summary` can be either a string or any React node.
+- `summaryAlwaysVisible` keeps the summary visible while the section is open.
+- If `content` is missing, the section remains collapsed and still shows the summary.
+- If `collapsible` is not set, the summary background matches the content background.
+- `Section.Header.Label`, `Section.Header.CollapseButton`, and `Section.Header.ActionButton` are the intended building blocks for custom headers.
+- `CategoryValueList` is exported alongside `Section` and is useful for compact summary bars with category/value pairs.