@redis-ui/components 43.0.2 → 43.2.1

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

@@ -0,0 +1,154 @@
+# Chip
+
+A compact label chip with optional close action, two sizes, two visual variants, and tooltip support. The root `Chip` is a compound component that renders `Chip.Compose`, `Chip.Title`, and `Chip.CloseButton` internally.
+
+## Import
+
+```tsx
+import { Chip } from '@redislabsdev/redis-ui-components';
+```
+
+## Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| text | `string` | required | Chip label text |
+| size | `'M' \| 'S'` | `'M'` | Chip size |
+| variant | `'regular' \| 'flat'` | `'regular'` | Visual variant |
+| disabled | `boolean` | `false` | Disables the chip and hides the close button |
+| tooltip | `string \| Omit<TooltipContentProps, 'children'>` | - | Tooltip content shown on hover |
+| onClose | `VoidFunction` | - | Close handler used to show the close button |
+| closeButtonTitle | `string` | `'Remove'` | Title passed to the close button |
+
+The component also extends all native `HTMLAttributes<HTMLSpanElement>` props through the composed span container, excluding `children` and `content`.
+
+## Sub-components
+
+- `Chip.Compose` - Renders the chip container and accepts the compound state props, tooltip configuration, and span attributes.
+- `Chip.Title` - Renders the chip label and applies ellipsis with tooltip-on-ellipsis behavior.
+- `Chip.CloseButton` - Renders the close action button and hides itself when the chip is disabled or `onClose` is missing.
+
+## Examples
+
+### Playground
+
+```tsx
+import { Chip } from '@redislabsdev/redis-ui-components';
+
+<Chip text="Chip" size="M" />
+```
+
+### Variants
+
+> `Chip` can be rendered in 2 variants
+
+```tsx
+import { Chip } from '@redislabsdev/redis-ui-components';
+
+<>
+  <Chip text="regular" />
+  <Chip text="flat" variant="flat" />
+</>
+```
+
+### Closable
+
+> To allow `Chip` have Close button, add handler to the `onClose` event.
+>
+> Note: by design `flat` chip should not have Close button, do not add `onClose` for it.
+
+```tsx
+import { Chip } from '@redislabsdev/redis-ui-components';
+
+<>
+  <Chip text="regular" />
+  <Chip text="regular, closable" onClose={() => alert('close clicked')} />
+  <Chip text="flat should not be closable" variant="flat" />
+</>
+```
+
+### Disabled
+
+> `Chip` can be disabled by setting `disabled` prop.
+>
+> Note: when closable chip is disabled, close button is hidden
+
+```tsx
+import { Chip } from '@redislabsdev/redis-ui-components';
+
+const handleClose = () => {};
+
+<>
+  <Chip text="regular" disabled />
+  <Chip text="regular, closable" onClose={handleClose} disabled />
+  <Chip text="flat" variant="flat" disabled />
+</>
+```
+
+### Sizes
+
+> There are 2 predefined sizes for the `Chip`
+
+```tsx
+import { Chip } from '@redislabsdev/redis-ui-components';
+
+const handleClose = () => {};
+
+<>
+  <Chip text="size = M" size="M" onClose={handleClose} />
+  <Chip text="size = S" size="S" onClose={handleClose} />
+</>
+```
+
+### CustomTooltip
+
+> Custom tooltip can be added using `tooltip` prop.
+> Tooltip can have any content.
+
+```tsx
+import { Chip } from '@redislabsdev/redis-ui-components';
+
+<>
+  <Chip text="hover for simple tooltip" tooltip="simple tooltip content" />
+  <Chip
+    text="hover for customized tooltip"
+    tooltip={{
+      content: (
+        <>
+          <strong>Customized</strong> <em>tooltip</em>
+        </>
+      ),
+      placement: 'bottom',
+      color: 'danger500'
+    }}
+  />
+  <Chip text="hover disabled for tooltip" tooltip="simple tooltip content" disabled />
+</>
+```
+
+### EllipsisAndTooltip
+
+> If `text` is too long for the `Chip`, it is cropped with ellipsis and native tooltip is added.
+
+```tsx
+import { Chip } from '@redislabsdev/redis-ui-components';
+
+const longText =
+  'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse in euismod sapien. Integer eleifend purus quis dictum porttitor.';
+const handleClose = () => {};
+
+<>
+  <Chip text={longText} style={{ maxWidth: 240 }} />
+  <Chip text={longText} style={{ maxWidth: 240 }} onClose={handleClose} />
+  <Chip text={longText} style={{ maxWidth: 240 }} variant="flat" />
+</>
+```
+
+## Notes
+
+- `Chip.Compose` accepts either a simple tooltip string or full tooltip content props and wraps the chip in `Tooltip` only when `tooltip` is provided.
+- `Chip.CloseButton` defaults to the `ToastCancelIcon` icon and a `Remove` title.
+- `Chip.Title` uses `Typography.Body` internally and enables ellipsis tooltips automatically.
+- `flat` chips should not receive `onClose`; that variant is intentionally non-closable.
+- When a closable chip is disabled, the close button is hidden.
+- The package also exports `ChipContainer` from the compose style file for advanced styling scenarios.

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

@@ -0,0 +1,307 @@
+# ChipList
+
+Renders a list of chips with optional close actions, row limiting, and a customizable overflow chip for hidden items.
+
+## Import
+
+```tsx
+import { ChipList, ChipItem } from '@redislabsdev/redis-ui-components';
+```
+
+> If you need to type the chip data separately, also import `ChipItem`.
+
+## Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| chips | `ChipItem[]` | - | Chips to render in the list |
+| onRemoveItem | `(chip: string) => void` | - | Called with the chip `key` when a close action is triggered |
+| removeItemButtonTitle | `string` | - | Title for the close button on each chip |
+| maxRows | `number` | `1` | Maximum number of rows to display before collapsing hidden items into the extra chip |
+| size | `ChipSizes` | `'M'` | Chip size |
+| variant | `ChipVariants` | - | Chip visual variant |
+| disabled | `boolean` | - | Disables all chips in the list |
+| renderExtraTooltip | `(chipItems: ChipItem[]) => Exclude<ReactNode, number>` | - | Custom renderer for the hidden-items tooltip content |
+
+### ChipItem
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| key | `string` | - | Unique identifier for the chip |
+| label | `string` | - | Text shown inside the chip |
+| disabled | `boolean` | `false` | Disables the individual chip |
+| tooltip | `ChipProps['tooltip']` | - | Tooltip content for the chip |
+
+`ChipItem` also extends the native `HTMLAttributes<HTMLSpanElement>` props.
+
+## Examples
+
+### Playground
+
+```tsx
+import { useRef, useState } from 'react';
+import { Button, ChipList } from '@redislabsdev/redis-ui-components';
+
+const itemsList = [
+  { label: 'Chip text 1', key: '1' },
+  { label: 'Chip text 2', key: '2' },
+  { label: 'Chip 3', key: '3' },
+  { label: 'Chip 4', key: '4' },
+  { label: 'Chip text 5 ', key: '5' },
+  { label: 'Chip text 6', key: '6' },
+  { label: 'Chip text 7', key: '7' }
+];
+
+export function Example() {
+  const itemIndex = useRef(itemsList.length);
+  const [chips, setChips] = useState(itemsList);
+
+  const handleRemoveItem = (itemKey: string) => {
+    setChips((items) => items.filter((item) => item.key !== itemKey));
+  };
+
+  const addOne = () => {
+    itemIndex.current += 1;
+    setChips((items) => [
+      ...items,
+      { label: `chip text ${itemIndex.current}`, key: `${itemIndex.current}` }
+    ]);
+  };
+
+  return (
+    <>
+      <div style={{ display: 'flex', gap: '0.8rem', marginBottom: '1.2rem' }}>
+        <Button onClick={() => setChips(itemsList)}>Reset</Button>
+        <Button onClick={() => setChips([])}>Delete all</Button>
+        <Button onClick={addOne}>Add one</Button>
+      </div>
+      <ChipList chips={chips} onRemoveItem={handleRemoveItem} />
+    </>
+  );
+}
+```
+
+### Variants
+
+> `ChipList` can be rendered in 2 variants `regular` (default) and `flat`
+
+```tsx
+import { ChipList } from '@redislabsdev/redis-ui-components';
+
+const itemsList = [
+  { label: 'Chip text 1', key: '1' },
+  { label: 'Chip text 2', key: '2' },
+  { label: 'Chip 3', key: '3' },
+  { label: 'Chip 4', key: '4' },
+  { label: 'Chip text 5 ', key: '5' },
+  { label: 'Chip text 6', key: '6' },
+  { label: 'Chip text 7', key: '7' }
+];
+
+<>
+  <ChipList chips={itemsList} />
+  <ChipList chips={itemsList} variant="flat" />
+</>
+```
+
+### Closable
+
+> To allow `ChipList` have items with Close button, add handler to the `onRemoveItem` event.
+>
+> Note: by design `flat` ChipList items should not have Close button, do not add `onRemoveItem` for it.
+
+```tsx
+import { ChipList } from '@redislabsdev/redis-ui-components';
+
+const itemsList = [
+  { label: 'Chip text 1', key: '1' },
+  { label: 'Chip text 2', key: '2' },
+  { label: 'Chip 3', key: '3' },
+  { label: 'Chip 4', key: '4' },
+  { label: 'Chip text 5 ', key: '5' },
+  { label: 'Chip text 6', key: '6' },
+  { label: 'Chip text 7', key: '7' }
+];
+
+<>
+  <ChipList chips={itemsList} onRemoveItem={(item) => alert(`close clicked for item ${item}`)} />
+  <ChipList chips={itemsList} variant="flat" />
+</>
+```
+
+### Sizes
+
+> There are 2 predefined sizes for the `ChipList`
+
+```tsx
+import { ChipList } from '@redislabsdev/redis-ui-components';
+
+const itemsList = [
+  { label: 'Chip text 1', key: '1' },
+  { label: 'Chip text 2', key: '2' },
+  { label: 'Chip 3', key: '3' },
+  { label: 'Chip 4', key: '4' },
+  { label: 'Chip text 5 ', key: '5' },
+  { label: 'Chip text 6', key: '6' },
+  { label: 'Chip text 7', key: '7' }
+];
+
+<>
+  <ChipList chips={itemsList} size="M" onRemoveItem={() => {}} />
+  <ChipList chips={itemsList} size="S" onRemoveItem={() => {}} />
+</>
+```
+
+### Disabled
+
+> `ChipList` can be disabled by setting `disabled` prop. This will disable all the chips of the list.<br/>
+> Chips can be disabled individually by adding `disabled` param to the `ChipItem` definition
+>
+> Note: when closable chip is disabled, close button is hidden
+
+```tsx
+import { ChipList } from '@redislabsdev/redis-ui-components';
+
+const itemListWithDisableItems = [
+  { label: 'Chip text 1', key: '1' },
+  { label: 'Chip text 2', key: '2', disabled: true },
+  { label: 'Chip 3', key: '3' },
+  { label: 'Chip 4', key: '4', disabled: true },
+  { label: 'Chip text 5 ', key: '5' },
+  { label: 'Chip text 6', key: '6', disabled: true },
+  { label: 'Chip text 7', key: '7' }
+];
+
+<>
+  <ChipList chips={itemListWithDisableItems} onRemoveItem={() => {}} disabled />
+  <ChipList chips={itemListWithDisableItems} onRemoveItem={() => {}} />
+  <ChipList chips={itemListWithDisableItems} variant="flat" disabled />
+  <ChipList chips={itemListWithDisableItems} variant="flat" />
+</>
+```
+
+### MultiRows
+
+> `ChipList` can be displayed in one or more rows.
+> Use `maxRows` to set the maximum number of rows (default is 1)<br/>
+> The actual number of rows is determined by the number of items and their layout.
+>
+> Items that exceed max rows will be replaced with an "extra" chip
+> that shows the number of hidden items and a tooltip with a list of them.<br/>
+> If `maxRows` is less than 1, then only the "extra" chip is displayed.
+
+```tsx
+import { ChipList } from '@redislabsdev/redis-ui-components';
+
+const itemsList = [
+  { label: 'Chip text 1', key: '1' },
+  { label: 'Chip text 2', key: '2' },
+  { label: 'Chip 3', key: '3' },
+  { label: 'Chip 4', key: '4' },
+  { label: 'Chip text 5 ', key: '5' },
+  { label: 'Chip text 6', key: '6' },
+  { label: 'Chip text 7', key: '7' }
+];
+
+const bigItemsList = new Array(30).fill(0).map((_, i) => ({ label: `Chip text ${i}`, key: `${i}` }));
+
+<>
+  <ChipList chips={itemsList} maxRows={0} />
+  <ChipList chips={itemsList} />
+  <ChipList chips={itemsList} maxRows={2} />
+  <ChipList chips={bigItemsList} maxRows={3} />
+</>
+```
+
+### ItemTooltip
+
+> Item tooltip can be added using `tooltip` item parameter.
+> Tooltip can have any content.
+
+```tsx
+import { ChipList } from '@redislabsdev/redis-ui-components';
+
+const itemsListWithTooltips = [
+  { label: 'simple tooltip', key: '1', tooltip: 'simple tooltip content' },
+  {
+    label: 'customized tooltip',
+    key: '2',
+    tooltip: {
+      content: (
+        <>
+          <strong>Customized</strong> <em>tooltip</em>
+        </>
+      ),
+      placement: 'bottom'
+    }
+  },
+  { label: 'tooltip on disabled', key: '3', tooltip: 'simple tooltip content', disabled: true }
+];
+
+<ChipList chips={itemsListWithTooltips} />
+```
+
+### ExtraTooltip
+
+> The Extra Tooltip shows hidden items as simple scrollable list inside the tooltip.
+> This tooltip content can be customized by specifying the `renderExtraTooltip` prop.<br/>
+> The custom renderer receives a list of hidden items.
+>
+> Note: rendered list will be wrapped in an inner scroll container,
+> so there is no need to do this manually.
+
+```tsx
+import { ReactNode } from 'react';
+import { Chip, ChipList } from '@redislabsdev/redis-ui-components';
+
+const bigItemsList = new Array(30)
+  .fill(0)
+  .map((_, i) => ({ label: `Chip text ${i}`, key: `${i}` }));
+
+const getGroupItems = (
+  chipItems: Array<{ label: string; key: string; disabled?: boolean }>,
+  iterator: (groupItems: Array<{ label: string; key: string; disabled?: boolean }>, groupName: string) => ReactNode
+) =>
+  Object.values(
+    // @ts-ignore
+    Object.groupBy(chipItems, (_, index: number) => String(index % 7)) as Record<
+      string,
+      Array<{ label: string; key: string; disabled?: boolean }>
+    >
+  ).map((groupItems, index) => iterator(groupItems, String(index + 1)));
+
+<>
+  <ChipList
+    chips={bigItemsList}
+    renderExtraTooltip={(chipItems) => {
+      return (
+        <div style={{ display: 'flex', flexDirection: 'column', gap: '1rem', alignItems: 'stretch' }}>
+          {getGroupItems(chipItems, (groupItems, index) => (
+            <div key={index} style={{ display: 'flex', flexDirection: 'column', gap: '0.6rem' }}>
+              <h3 style={{ alignSelf: 'stretch', textAlign: 'center' }}>Group {index}</h3>
+              {groupItems.map(({ label }) => (
+                <Chip key={label} text={label} />
+              ))}
+            </div>
+          ))}
+        </div>
+      );
+    }}
+  />
+  <ChipList chips={bigItemsList} renderExtraTooltip={() => null} />
+</>
+```
+
+## Notes
+
+- `ChipList` supports `regular` and `flat` variants; `regular` is the default.
+- Provide `onRemoveItem` to make chips closable.
+- Do not use `onRemoveItem` with the `flat` variant.
+- `maxRows` defaults to `1`.
+- If `maxRows` is less than `1`, only the overflow chip is rendered.
+- Hidden chips are collapsed into an extra chip that shows their count.
+- `tooltip` can be added per chip and can contain any content.
+- `renderExtraTooltip` receives the hidden chips and lets you fully customize the overflow tooltip.
+- The custom overflow tooltip content is wrapped in an inner scroll container.
+- `disabled` disables all chips in the list, and individual `ChipItem`s can also be disabled.
+- When a closable chip is disabled, its close button is hidden.

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

@@ -0,0 +1,47 @@
+# CopyToClipboardButton
+
+An icon button that copies text to the clipboard and briefly switches to a success state after a successful copy.
+
+## Import
+```tsx
+import { CopyToClipboardButton } from '@redislabsdev/redis-ui-components';
+```
+
+## Props
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| textToCopy | `string` | *required* | Text copied to the clipboard when the button is clicked |
+| copiedLabel | `string` | - | Optional label shown while the copied success state is active |
+| native button props | `Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'onClick'>` | - | Standard button attributes except `onClick`, which is handled internally |
+
+## Examples
+
+### Playground
+
+```tsx
+import { CopyToClipboardButton } from '@redislabsdev/redis-ui-components';
+
+<CopyToClipboardButton disabled={false} textToCopy="Hello, World!" copiedLabel="Copied!" />
+```
+
+### Disabled
+
+> CopyToClipboardButton can be disabled by setting the `disabled` prop to `true`.
+
+```tsx
+<CopyToClipboardButton textToCopy="Disabled text" disabled />
+```
+
+### WithCopiedLabel
+
+> Use `copiedLabel` prop to show a custom label when content is copied.
+
+```tsx
+<CopyToClipboardButton textToCopy="Text with custom label" copiedLabel="Successfully copied!" />
+```
+
+## Notes
+- The component forwards refs to the underlying `<button>` element.
+- After a successful copy, the icon changes to a check mark for 1.5 seconds before reverting.
+- If `copiedLabel` is provided, it is also used as the accessible label while the copied state is active.
+- If `copiedLabel` is omitted, the accessible label falls back to `Copy`.

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

@@ -0,0 +1,57 @@
+# CountryFlag
+
+Country flag image component that loads flagcdn assets and falls back to an empty placeholder until the image is valid.
+
+## Import
+
+```tsx
+import { CountryFlag } from '@redislabsdev/redis-ui-components';
+```
+
+## Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| countryCode | `string` | required | Country code used to resolve the flag image |
+| native img props | `React.HTMLAttributes<HTMLImageElement>` | - | Standard image attributes forwarded to the rendered flag image |
+
+The component also extends all native `React.HTMLAttributes<HTMLImageElement>` props.
+
+## Examples
+
+### Playground
+
+```tsx
+import { CountryFlag } from '@redislabsdev/redis-ui-components';
+
+<CountryFlag countryCode="us" />
+```
+
+### Empty
+
+> If the `countryCode` is wrong or empty, the component shows an empty flag.
+
+```tsx
+import { CountryFlag } from '@redislabsdev/redis-ui-components';
+
+<CountryFlag countryCode="" />
+```
+
+### Gallery
+
+```tsx
+import countries from './codes.json';
+import { CountryFlag } from '@redislabsdev/redis-ui-components';
+
+<>
+  {Object.entries(countries).map(([code, name]) => (
+    <CountryFlag key={code} countryCode={code} title={`${code}:${name}`} />
+  ))}
+</>
+```
+
+## Notes
+
+- Flags are loaded from `flagcdn.com`.
+- The component renders a placeholder image until the actual flag asset loads successfully.
+- `uk`, `tp`, and `fx` are normalized to `gb`, `tl`, and `fr` before the flag URL is resolved.