@redis-ui/components 42.8.0 → 43.2.1

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

@@ -0,0 +1,63 @@
+# IconButton
+
+A button with only an icon and no text. Use `ActionIconButton` instead if you need an icon button with background color.
+
+## Import
+```tsx
+import { IconButton } from '@redislabsdev/redis-ui-components';
+```
+
+> If the component uses icons in examples, also note:
+> ```tsx
+> import { ActiveActiveIcon } from '@redislabsdev/redis-ui-icons';
+> ```
+
+## Props
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| icon | `IconType` | *required* | The icon component to render inside the button |
+| title | `string` | - | Title attribute for the icon container |
+| size | `'XXL' \| 'XL' \| 'L' \| 'M' \| 'S' \| 'XS'` | `'M'` | The size of the icon button |
+| disabled | `boolean` | `false` | Whether the button is disabled |
+
+The component also extends all native `ButtonHTMLAttributes<HTMLButtonElement>` props.
+
+## Examples
+
+### Playground
+```tsx
+import { IconButton } from '@redislabsdev/redis-ui-components';
+import { ActiveActiveIcon } from '@redislabsdev/redis-ui-icons';
+
+<IconButton size="XL" disabled={false} icon={ActiveActiveIcon} />;
+```
+
+### Sizes
+> 6 sizes are supported with `M` being the default.
+```tsx
+import { IconButton } from '@redislabsdev/redis-ui-components';
+import { ActiveActiveIcon } from '@redislabsdev/redis-ui-icons';
+
+<>
+  <IconButton size="XS" icon={ActiveActiveIcon} />
+  <IconButton size="S" icon={ActiveActiveIcon} />
+  <IconButton size="M" icon={ActiveActiveIcon} />
+  <IconButton size="L" icon={ActiveActiveIcon} />
+  <IconButton size="XL" icon={ActiveActiveIcon} />
+  <IconButton size="XXL" icon={ActiveActiveIcon} />
+</>
+```
+
+### Disabled
+> IconButton can be disabled by setting the `disabled` prop to `true`. This will disable any hover styles and prevent click events from firing.
+```tsx
+import { IconButton } from '@redislabsdev/redis-ui-components';
+import { ActiveActiveIcon } from '@redislabsdev/redis-ui-icons';
+
+<IconButton icon={ActiveActiveIcon} size="XL" disabled />;
+```
+
+## Notes
+- `M` is the default size.
+- The button renders with `type="button"` by default.
+- The component forwards refs to the underlying `<button>` element.

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

@@ -0,0 +1,295 @@
+# Input
+
+A text input component with validation states, loading and reset affordances, auto-sizing support, and full compose/read-only customization. Use `FormField` when you need labels or other external decoration around the input.
+
+## Import
+
+```tsx
+import { Input, FormField } from '@redislabsdev/redis-ui-components';
+```
+
+> Some examples also use icons from `@redislabsdev/redis-ui-icons/multicolor`:
+> ```tsx
+> import {
+>   AmericanExpressIcon,
+>   DinersIcon,
+>   GeniricIcon,
+>   JcbIcon,
+>   MasterCardIcon,
+>   PayPalIcon,
+>   UnionPayIcon,
+>   VisaIcon
+> } from '@redislabsdev/redis-ui-icons/multicolor';
+> ```
+
+## 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. Enables error state and tooltip content. |
+| valid | `boolean` | - | Enables the success state. |
+| readOnly | `boolean` | - | Switches the input into read-only mode. |
+| value | `string` | - | Controlled input value. |
+| defaultValue | `string` | - | Uncontrolled initial value. |
+| onChange | `(value: string) => void` | - | Called when the parsed value changes. |
+| parser | `(value: string, extra: { event?: ChangeEvent }) => string` | - | Normalizes user input before it is stored or emitted. |
+| formatter | `(value: string, extra: { event?: ChangeEvent }) => string` | - | Formats the stored value before display. |
+| readonlyRender | `ReadOnlyRenderComponent` | `DefaultReadonlyRender` | Custom renderer used when `readOnly` is enabled. |
+| readonlyProps | `HTMLAttributes<HTMLElement>` | - | Props passed to the read-only wrapper. |
+| allowReset | `boolean` | `false` | Shows the reset button when a value is present. |
+| loading | `boolean` | - | Shows the loading indicator. |
+| autoSize | `boolean` | `false` | Makes the inner input size itself to the current value. |
+
+The component also accepts standard `div` attributes on the compose wrapper and native `input` attributes on `Input.Tag`, excluding `children`, `defaultValue`, `value`, `onChange`, and `readOnly` from the inner input props.
+
+## Sub-components
+
+- `Input.Compose` - Compose wrapper that manages value state, validation state, read-only rendering, and layout.
+- `Input.Tag` - The underlying input element. Supports `autoSize`.
+- `Input.ResetButton` - Clear/reset action button used when there is a value.
+- `Input.StatusIndicator` - Error/success status indicator with tooltip support for errors.
+- `Input.LoadingIndicator` - Inline loading spinner shown while `loading` is true.
+- `Input.ReadonlyValue` - Styled read-only text renderer used by the compose wrapper.
+
+## Examples
+
+### Playground
+
+```tsx
+<Input placeholder="Input" type="text" id="custom-id" disabled={false} />
+```
+
+### Status
+
+> Adding `valid` enables the success state.
+>
+> Adding text to `error` enables the error state and shows the error message in the tooltip.
+>
+> Error state overrides valid state.
+
+```tsx
+<>
+  Valid status
+  <Input placeholder="Text Input" valid />
+  Error status
+  <Input placeholder="Text Input" error="Error message" />
+</>
+```
+
+### Loading
+
+> Adding `loading` enables the loading indicator.
+>
+> It can be used together with other indicators and states.
+
+```tsx
+<>
+  Loading indicator
+  <Input placeholder="Text Input" loading />
+  With other elements
+  <Input placeholder="Text Input" defaultValue="value" valid allowReset loading />
+</>
+```
+
+### ResetButton
+
+> Input allows user to clean the value. Set `allowReset` prop to show Reset button.
+
+```tsx
+<Input placeholder="Text Input" defaultValue="orange" allowReset />
+```
+
+### DisabledAndReadonly
+
+> Adding `disabled` or `readOnly` switches the component to the corresponding state.
+>
+> In read-only mode only the value is visible. Other indicators are ignored.
+>
+> `readOnly` overrides `disabled`.
+
+```tsx
+<>
+  Disabled
+  <Input disabled placeholder="Type text" />
+  Disabled with value
+  <Input disabled defaultValue="orange" />
+  Disabled with indicators
+  <Input disabled defaultValue="banana" error="Error message" allowReset />
+  Read only
+  <Input value="read-only input value" readOnly />
+</>
+```
+
+### WithLabel
+
+> Component 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, Input } from '@redislabsdev/redis-ui-components';
+
+<>
+  <FormField label="FormField Label with custom id">
+    <Input placeholder="Text Input" id="custom-id" />
+  </FormField>
+  <FormField
+    label="FormField Label with auto-generated id"
+    additionalText="FormField additional text"
+  >
+    <Input placeholder="Text Input" />
+  </FormField>
+  <FormField
+    label="FormField Label with read-only mode"
+    additionalText="FormField additional text"
+  >
+    <Input value="read-only input value" readOnly />
+  </FormField>
+</>
+```
+
+### Variants
+
+```tsx
+<>
+  <FormField label="Outline (default)" additionalText="outline">
+    <Input placeholder="Text Input" />
+  </FormField>
+  <FormField label="Underline" additionalText="underline">
+    <Input placeholder="Text Input" variant="underline" />
+  </FormField>
+</>
+```
+
+### AutoSize
+
+> Regular text input ignores `width: auto`.
+>
+> Add `autoSize` to make the input grow with its content.
+
+```tsx
+<>
+  Type text in the input boxes to see how it auto-sizes
+  <Input autoSize placeholder="placeholder" />
+  Input without placeholder:
+  <Input autoSize defaultValue="edit value" />
+</>
+```
+
+### ParserAndFormatter
+
+> `parser` normalizes the user input before it is stored or emitted.
+>
+> `formatter` controls how the stored value is displayed.
+>
+> They can be used independently or together.
+
+```tsx
+import { useState } from 'react';
+import { Input } from '@redislabsdev/redis-ui-components';
+
+const parser = (val: string) => val.match(/(\d+)/g)?.join('') || '';
+const formatter = (val: string) =>
+  val.match(/(\d{1,4})/g)?.filter((_, i) => i < 4).join(' ') || '';
+
+function Render() {
+  const [value, setValue] = useState('1234567898765432');
+
+  return (
+    <>
+      Uncontrolled mode
+      <Input parser={parser} formatter={formatter} defaultValue="1234567898765432" />
+      Controlled mode
+      <Input
+        parser={parser}
+        formatter={formatter}
+        defaultValue="1234567898765432"
+        value={value}
+        onChange={setValue}
+      />
+      controlled state value: {value}
+    </>
+  );
+}
+```
+
+### ComposeCreditCard
+
+```tsx
+import { useState } from 'react';
+import { Input } from '@redislabsdev/redis-ui-components';
+import {
+  AmericanExpressIcon,
+  DinersIcon,
+  GeniricIcon,
+  JcbIcon,
+  MasterCardIcon,
+  PayPalIcon,
+  UnionPayIcon,
+  VisaIcon
+} from '@redislabsdev/redis-ui-icons/multicolor';
+
+const CCIcons = [
+  GeniricIcon,
+  AmericanExpressIcon,
+  DinersIcon,
+  MasterCardIcon,
+  JcbIcon,
+  PayPalIcon,
+  UnionPayIcon,
+  VisaIcon
+];
+
+const getIconFromCardNumber = (value: string) => CCIcons[value.length % CCIcons.length];
+const formatCardNumber = (value: string) => (value.match(/(\d{1,4})/g) || []).join(' ');
+
+function Render() {
+  const [value, setValue] = useState('');
+  const Icon = getIconFromCardNumber(value);
+
+  return (
+    <Input.Compose
+      onChange={(val) => setValue(val.replaceAll(' ', '').substring(0, 16))}
+      value={formatCardNumber(value)}
+    >
+      <Input.Tag placeholder="Enter Card Number" />
+      <Icon customSize="32" />
+    </Input.Compose>
+  );
+}
+```
+
+### ComposeReadOnly
+
+> The story uses `useArgs` to toggle `readOnly` at runtime.
+
+```tsx
+import { Button, Input } from '@redislabsdev/redis-ui-components';
+
+<>
+  <Input.Compose {...args}>
+    <Input.Tag />
+  </Input.Compose>
+  <Button onClick={() => setArgs({ readOnly: !readOnly })} style={{ alignSelf: 'flex-start' }}>
+    Toggle Read-Only
+  </Button>
+</>
+```
+
+## Notes
+
+- `error` enables the error state and overrides `valid`.
+- `loading` can be combined with validation and reset states.
+- `allowReset` shows the reset button when the input has a value.
+- `readOnly` overrides `disabled`, and read-only mode hides the indicator affordances.
+- Use `FormField` when you need a label or other external decoration around the input.
+- Custom ids passed through `FormField` must start with a letter.
+- `autoSize` is required when you want the text input to grow with its contents.
+- `parser` and `formatter` can be used independently or together for controlled and uncontrolled input flows.