@redis-ui/components 43.0.2 → 43.2.1

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

@@ -0,0 +1,184 @@
+# AppSelectionMenu
+
+App selection menu component. It renders a default menu trigger and item list, and it also exposes compose helpers for custom triggers, content, and item layouts.
+
+## Import
+
+```tsx
+import { AppSelectionMenu } from '@redislabsdev/redis-ui-components';
+```
+
+> Examples also use icons from `@redislabsdev/redis-ui-icons`.
+
+## Props
+
+### AppSelectionMenu
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| items | `AppSelectionMenuItemProps[]` | required | Menu items rendered by the default implementation |
+| defaultOpen | `boolean` | - | Initial open state when the component is uncontrolled |
+| open | `boolean` | - | Controlled open state |
+| onOpenChange | `(open: boolean) => void` | - | Called when the open state changes |
+
+### AppSelectionMenu.Compose
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| children | `React.ReactNode` | required | Compound menu structure rendered inside the controllable provider |
+| defaultOpen | `boolean` | - | Initial open state when uncontrolled |
+| open | `boolean` | - | Controlled open state |
+| onOpenChange | `(open: boolean) => void` | - | Called when the open state changes |
+
+### AppSelectionMenu.Trigger
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| children | `React.ReactElement` | required | Trigger content rendered inside the default toggle button |
+
+### AppSelectionMenu.Trigger.Compose
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| children | `React.ReactElement` | required | Custom trigger content rendered inside the popover trigger |
+
+### AppSelectionMenu.Content
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| children | `React.ReactNode` | required | Menu content rendered inside the default dropdown container |
+
+### AppSelectionMenu.Content.Compose
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| children | `React.ReactNode` | required | Custom content rendered inside the styled popover container |
+
+### AppSelectionMenu.Item
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| label | `string` | required | Item label rendered under the icon |
+| icon | `IconType` | required | Icon rendered for the item |
+| onClick | `() => void` | required | Click handler invoked when the item is selected |
+| disabled | `boolean` | - | Disables the item and prevents interaction |
+
+### AppSelectionMenu.Item.Compose
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| children | `React.ReactElement` | required | Custom item content to clone and wire to the menu context |
+| onClick | `() => void` | required | Click handler invoked before the menu closes |
+| disabled | `boolean` | - | Disables click handling for the composed item |
+
+## Sub-components
+
+- `AppSelectionMenu.Compose` - Provides the controllable open state and menu context for custom composition.
+- `AppSelectionMenu.Trigger` - Default trigger that renders the stock toggle button with the current active state.
+- `AppSelectionMenu.Trigger.Compose` - Low-level trigger wrapper for custom trigger content.
+- `AppSelectionMenu.Content` - Default dropdown content container.
+- `AppSelectionMenu.Content.Compose` - Low-level content wrapper for custom dropdown layouts.
+- `AppSelectionMenu.Item` - Default menu item with icon and label.
+- `AppSelectionMenu.Item.Compose` - Low-level item wrapper that closes the menu after a selection.
+- `AppSelectionMenu.Icon` - Default trigger icon rendered by the stock component.
+
+## Examples
+
+### Playground
+
+```tsx
+import { AppSelectionMenu } from '@redislabsdev/redis-ui-components';
+import { ActiveActiveIcon, BillingIcon, RedisAiIcon } from '@redislabsdev/redis-ui-icons';
+
+const items = [
+  { label: 'Disabled', onClick: () => {}, icon: RedisAiIcon, disabled: true },
+  { label: 'Item 2', onClick: () => {}, icon: ActiveActiveIcon },
+  { label: 'Item 5', onClick: () => {}, icon: BillingIcon }
+];
+
+<AppSelectionMenu items={items} />
+```
+
+### Default Open
+
+```tsx
+import { AppSelectionMenu } from '@redislabsdev/redis-ui-components';
+import { ActiveActiveIcon, BillingIcon, RedisAiIcon } from '@redislabsdev/redis-ui-icons';
+
+const items = [
+  { label: 'Disabled', onClick: () => {}, icon: RedisAiIcon, disabled: true },
+  { label: 'Item 2', onClick: () => {}, icon: ActiveActiveIcon },
+  { label: 'Item 5', onClick: () => {}, icon: BillingIcon }
+];
+
+<AppSelectionMenu items={items} defaultOpen />
+```
+
+### Controlled
+
+```tsx
+import { useState } from 'react';
+import { AppSelectionMenu, Button } from '@redislabsdev/redis-ui-components';
+import { ActiveActiveIcon, BillingIcon, RedisAiIcon } from '@redislabsdev/redis-ui-icons';
+
+const items = [
+  { label: 'Disabled', onClick: () => {}, icon: RedisAiIcon, disabled: true },
+  { label: 'Item 2', onClick: () => {}, icon: ActiveActiveIcon },
+  { label: 'Item 5', onClick: () => {}, icon: BillingIcon }
+];
+
+const [open, setOpen] = useState(false);
+
+<>
+  <Button variant="secondary-fill" onClick={() => setOpen((prev) => !prev)}>
+    {open ? 'Close' : 'Open'}
+  </Button>
+  <AppSelectionMenu items={items} open={open} onOpenChange={setOpen} />
+</>
+```
+
+### Composition
+
+```tsx
+import { AppSelectionMenu, ActionIconButton, Typography } from '@redislabsdev/redis-ui-components';
+import { StarsIcon, ActiveActiveIcon, BillingIcon, RedisAiIcon } from '@redislabsdev/redis-ui-icons';
+import * as S from './AppSelectionMenu.style';
+
+const items = [
+  { label: 'Disabled', onClick: () => {}, icon: RedisAiIcon, disabled: true },
+  { label: 'Item 2', onClick: () => {}, icon: ActiveActiveIcon },
+  { label: 'Item 5', onClick: () => {}, icon: BillingIcon }
+];
+
+<AppSelectionMenu.Compose>
+  <AppSelectionMenu.Trigger.Compose>
+    <S.CustomTriggerContainer>
+      <StarsIcon />
+    </S.CustomTriggerContainer>
+  </AppSelectionMenu.Trigger.Compose>
+  <AppSelectionMenu.Content.Compose>
+    <S.CustomContentWrapper>
+      {items.map((item) => (
+        <AppSelectionMenu.Item.Compose
+          key={item.label}
+          onClick={item.onClick}
+          disabled={item.disabled}
+        >
+          <S.CustomItem>
+            <Typography.Body>{item.label}</Typography.Body>
+            <ActionIconButton icon={item.icon} />
+          </S.CustomItem>
+        </AppSelectionMenu.Item.Compose>
+      ))}
+    </S.CustomContentWrapper>
+  </AppSelectionMenu.Content.Compose>
+</AppSelectionMenu.Compose>
+```
+
+## Notes
+
+- `AppSelectionMenu` is the stock implementation. It renders `AppSelectionMenu.Icon` as the default trigger and maps `items` into `AppSelectionMenu.Item`.
+- Use `AppSelectionMenu.Compose` together with `Trigger.Compose`, `Content.Compose`, and `Item.Compose` when you need to customize the trigger, dropdown container, or row markup.
+- `AppSelectionMenu.Item.Compose` invokes `onClick` and then closes the menu.
+- `AppSelectionMenu.Trigger.Compose` wraps its children in a popover trigger with the default `aria-label="Menu"`.
+- `AppSelectionMenuItemProps` require `label`, `icon`, and `onClick`; `disabled` is optional.

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

@@ -0,0 +1,193 @@
+# AutoCompleteSelect
+
+A controlled autocomplete input that shows matching suggestions as the user types and lets users keep a manual value when there are no matches. Use `FormField` or `Label` when you need external labeling.
+
+## Import
+
+```tsx
+import { AutoCompleteSelect } from '@redislabsdev/redis-ui-components';
+```
+
+## Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| id | `string` | - | Id for the input element, used for label and accessibility wiring. |
+| placeholder | `string` | `'Select'` | Placeholder text shown in the input. |
+| value | `string` | - | Controlled input value. |
+| onChange | `(value: string, isSuggestion?: boolean) => void` | - | Called when the input value changes or a suggestion is selected. |
+| options | `AutoCompleteOption[]` | *required* | Available autocomplete options. |
+| error | `string` | `''` | Error message. Enables error state and tooltip content. |
+| manualOptionText | `string` | `''` | Text appended to the manual value when no suggestions are available. |
+| optionsLabel | `string` | `'Suggestions'` | Label shown above the suggestion list. |
+| disabled | `boolean` | `false` | Disables the input and dropdown interactions. |
+| contentMaxHeight | `string` | - | Maximum height of the dropdown content area. |
+
+The component also accepts standard `InputHTMLAttributes<HTMLInputElement>` props, excluding `onChange` and `defaultValue`.
+
+## Examples
+
+### Basic Usage
+
+```tsx
+import { useState } from 'react';
+import { AutoCompleteSelect } from '@redislabsdev/redis-ui-components';
+import { storyOptions } from './AutoCompleteSelectStory.data';
+
+function Render() {
+  const [value, setValue] = useState('');
+
+  return (
+    <AutoCompleteSelect
+      placeholder="Please select"
+      manualOptionText="new tag"
+      options={storyOptions}
+      value={value}
+      onChange={setValue}
+      id="custom-id"
+    />
+  );
+}
+```
+
+### ControlledValue
+
+> `AutoCompleteSelect` always works in controlled mode. Use `value` and `onChange` props for that
+
+```tsx
+import { useState } from 'react';
+import { AutoCompleteSelect } from '@redislabsdev/redis-ui-components';
+import { storyOptions } from './AutoCompleteSelectStory.data';
+
+function Render() {
+  const [value, setValue] = useState('');
+
+  return <AutoCompleteSelect options={storyOptions} value={value} onChange={setValue} />;
+}
+```
+
+### ControlledAsyncOptions
+
+> Options can be loaded dynamically, according to the current input value (search value), while user is typing it.
+
+```tsx
+import { useState } from 'react';
+import {
+  AutoCompleteOption,
+  AutoCompleteSelect
+} from '@redislabsdev/redis-ui-components';
+import { storyOptions } from './AutoCompleteSelectStory.data';
+
+const fetchOptionsBySearchValue = async (search: string) => {
+  const newOptions = storyOptions.filter((option) => option.value.includes(search));
+
+  if (newOptions.length !== 0) {
+    return new Promise<AutoCompleteOption[]>((resolve) => {
+      setTimeout(
+        () => resolve(storyOptions.filter((option) => option.value.includes(search))),
+        500
+      );
+    });
+  }
+
+  return null;
+};
+
+function Render() {
+  const [value, setValue] = useState('');
+  const [options, setOptions] = useState<AutoCompleteOption[]>([]);
+
+  const handleChange = async (valueChanged: string) => {
+    setValue(valueChanged);
+
+    if (valueChanged) {
+      const newOptions = await fetchOptionsBySearchValue(valueChanged);
+
+      if (newOptions?.length) {
+        setOptions(newOptions);
+      }
+    }
+  };
+
+  return <AutoCompleteSelect options={options} value={value} onChange={handleChange} />;
+}
+```
+
+### WithLabel
+
+> Component doesn't have internal label or any other decoration elements.
+> Use `FormField` or `Label` to manage it.
+
+```tsx
+import { useState } from 'react';
+import { AutoCompleteSelect, FormField } from '@redislabsdev/redis-ui-components';
+import { storyOptions } from './AutoCompleteSelectStory.data';
+
+function Render() {
+  const [value, setValue] = useState('');
+
+  return (
+    <FormField label="FormField Label" additionalText="FormField additional text">
+      <AutoCompleteSelect options={storyOptions} value={value} onChange={setValue} />
+    </FormField>
+  );
+}
+```
+
+### ErrorState
+
+> Adding some text to the `error` prop of `AutoCompleteSelect` enables error state.
+> Hover error indicator to see specified text in tooltip
+
+```tsx
+import { useState } from 'react';
+import { AutoCompleteSelect } from '@redislabsdev/redis-ui-components';
+import { storyOptions } from './AutoCompleteSelectStory.data';
+
+function Render() {
+  const [value, setValue] = useState('');
+
+  return (
+    <AutoCompleteSelect
+      value={value}
+      onChange={setValue}
+      options={storyOptions}
+      error="Error message"
+    />
+  );
+}
+```
+
+### Disabled
+
+```tsx
+import { AutoCompleteSelect } from '@redislabsdev/redis-ui-components';
+import { storyOptions } from './AutoCompleteSelectStory.data';
+
+<>
+  Default
+  <AutoCompleteSelect value="" onChange={() => {}} options={storyOptions} disabled />
+  With selected item
+  <AutoCompleteSelect
+    value="environment"
+    onChange={() => {}}
+    options={storyOptions}
+    disabled
+  />
+  With error message
+  <AutoCompleteSelect
+    value="blabla"
+    onChange={() => {}}
+    options={storyOptions}
+    disabled
+    error="Error message"
+  />
+</>
+```
+
+## Notes
+
+- `AutoCompleteSelect` always works in controlled mode.
+- Use `FormField` or `Label` when you need external decoration around the input.
+- Options can be loaded dynamically as the user types.
+- Adding text to `error` enables the error state and shows the tooltip content.

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

@@ -0,0 +1,77 @@
+# Badge
+
+Compact status badge with variant-based coloring and optional icons.
+
+## Import
+
+```tsx
+import { Badge } from '@redislabsdev/redis-ui-components';
+```
+
+If you pass a custom icon in examples, import it from `@redislabsdev/redis-ui-icons`.
+
+## Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| label | `string` | required | Text rendered inside the badge |
+| variant | `'white' \| 'light' \| 'default' \| 'informative' \| 'success' \| 'notice' \| 'danger' \| 'attention' \| 'disabled'` | `'default'` | Visual badge variant that controls surface and icon styling |
+| withIcon | `boolean` | `false` | Shows the default variant icon when enabled |
+| icon | `IconType` | - | Overrides the default icon used for the current variant |
+| color | `string` | - | Overrides the badge accent color directly |
+| theme | `Theme` | - | Theme override passed through to styled-components |
+
+The component also extends `React.HTMLAttributes<HTMLDivElement>`.
+
+## Examples
+
+### Basic Usage
+
+```tsx
+import { Badge } from '@redislabsdev/redis-ui-components';
+
+<Badge label="Badge" withIcon />
+```
+
+### WithCustomColor
+
+```tsx
+import { Badge } from '@redislabsdev/redis-ui-components';
+
+<Badge label="Badge" withIcon color="#0366d6" />
+```
+
+### Icons
+
+> `Badge` can be rendered with or without an icon using `withIcon`. Pass `icon` to customize the icon.
+
+```tsx
+import { Badge } from '@redislabsdev/redis-ui-components';
+import { PhoneIcon } from '@redislabsdev/redis-ui-icons';
+
+<>
+  <Badge label="Without icon" />
+  <Badge label="With default icon" withIcon />
+  <Badge label="With custom icon" withIcon icon={PhoneIcon} />
+</>
+```
+
+### Variants
+
+> `Badge` can be rendered in a few variants using the `variant` prop.
+
+```tsx
+import { Badge, badgeVariants } from '@redislabsdev/redis-ui-components';
+
+<>
+  {badgeVariants.map((variant) => (
+    <Badge key={variant} variant={variant} label={variant} withIcon />
+  ))}
+</>
+```
+
+## Notes
+
+- `withIcon` uses the default icon for the selected variant when `icon` is not provided.
+- `variant` controls both the badge surface color and the default icon choice.
+- `color` overrides the badge accent color directly and is used instead of the theme variant color.