@ledgerhq/lumen-ui-rnative 0.1.7 → 0.1.9

package/dist/module/lib/Components/PageIndicator/types.js.map

@@ -0,0 +1 @@
+{"version":3,"names":[],"sourceRoot":"../../../../../src","sources":["lib/Components/PageIndicator/types.ts"],"mappings":"","ignoreList":[]}

package/dist/module/lib/Components/SearchInput/SearchInput.js

@@ -0,0 +1,40 @@
+"use strict";
+
+import { useStyleSheet } from "../../../styles/index.js";
+import { Search as SearchIcon } from "../../Symbols/index.js";
+import { BaseInput } from "../BaseInput/index.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+export const SearchInput = ({
+  appearance = 'plain',
+  style,
+  containerStyle,
+  inputStyle,
+  ref,
+  ...props
+}) => {
+  const styles = useAppearanceStyles(appearance);
+  return /*#__PURE__*/_jsx(BaseInput, {
+    ref: ref,
+    prefix: /*#__PURE__*/_jsx(SearchIcon, {
+      size: 20,
+      color: "muted",
+      accessible: false
+    }),
+    style: style,
+    containerStyle: [containerStyle, styles.container],
+    inputStyle: [inputStyle, styles.input],
+    ...props
+  });
+};
+const useAppearanceStyles = appearance => {
+  return useStyleSheet(t => ({
+    container: appearance === 'transparent' ? {
+      backgroundColor: t.colors.bg.mutedTransparent
+    } : {},
+    input: {
+      backgroundColor: 'transparent'
+    }
+  }), [appearance]);
+};
+SearchInput.displayName = 'SearchInput';
+//# sourceMappingURL=SearchInput.js.map

package/dist/module/lib/Components/SearchInput/SearchInput.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["useStyleSheet","Search","SearchIcon","BaseInput","jsx","_jsx","SearchInput","appearance","style","containerStyle","inputStyle","ref","props","styles","useAppearanceStyles","prefix","size","color","accessible","container","input","t","backgroundColor","colors","bg","mutedTransparent","displayName"],"sourceRoot":"../../../../../src","sources":["lib/Components/SearchInput/SearchInput.tsx"],"mappings":";;AAAA,SAASA,aAAa,QAAQ,0BAAiB;AAC/C,SAASC,MAAM,IAAIC,UAAU,QAAQ,wBAAe;AACpD,SAASC,SAAS,QAAQ,uBAAc;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAGzC,OAAO,MAAMC,WAAW,GAAGA,CAAC;EAC1BC,UAAU,GAAG,OAAO;EACpBC,KAAK;EACLC,cAAc;EACdC,UAAU;EACVC,GAAG;EACH,GAAGC;AACa,CAAC,KAAK;EACtB,MAAMC,MAAM,GAAGC,mBAAmB,CAACP,UAAU,CAAC;EAE9C,oBACEF,IAAA,CAACF,SAAS;IACRQ,GAAG,EAAEA,GAAI;IACTI,MAAM,eAAEV,IAAA,CAACH,UAAU;MAACc,IAAI,EAAE,EAAG;MAACC,KAAK,EAAC,OAAO;MAACC,UAAU,EAAE;IAAM,CAAE,CAAE;IAClEV,KAAK,EAAEA,KAAM;IACbC,cAAc,EAAE,CAACA,cAAc,EAAEI,MAAM,CAACM,SAAS,CAAE;IACnDT,UAAU,EAAE,CAACA,UAAU,EAAEG,MAAM,CAACO,KAAK,CAAE;IAAA,GACnCR;EAAK,CACV,CAAC;AAEN,CAAC;AAED,MAAME,mBAAmB,GAAIP,UAAmC,IAAK;EACnE,OAAOP,aAAa,CACjBqB,CAAC,KAAM;IACNF,SAAS,EACPZ,UAAU,KAAK,aAAa,GACxB;MAAEe,eAAe,EAAED,CAAC,CAACE,MAAM,CAACC,EAAE,CAACC;IAAiB,CAAC,GACjD,CAAC,CAAC;IACRL,KAAK,EAAE;MAAEE,eAAe,EAAE;IAAc;EAC1C,CAAC,CAAC,EACF,CAACf,UAAU,CACb,CAAC;AACH,CAAC;AAEDD,WAAW,CAACoB,WAAW,GAAG,aAAa","ignoreList":[]}

package/dist/module/lib/Components/SearchInput/SearchInput.mdx

@@ -0,0 +1,563 @@
+import { Meta, Canvas, Controls } from '@storybook/addon-docs/blocks';
+import * as SearchInputStories from './SearchInput.stories';
+import { SearchInput } from './SearchInput';
+import { CustomTabs, Tab } from '../../../../.storybook/components';
+import { DoVsDontRow, DoBlockItem, DontBlockItem } from '../../../../.storybook/components/DoVsDont';
+import CommonRulesDoAndDont from '../../../../.storybook/components/DoVsDont/CommonRulesDoAndDont.mdx';
+
+<Meta title='Input/SearchInput' of={SearchInputStories} />
+
+# 🔍 SearchInput
+
+<CustomTabs>
+  <Tab label="Overview">
+
+## Introduction
+
+The SearchInput component is a specialized input field designed specifically for search functionality on mobile platforms. It features a built-in search icon, placeholder text, and automatic clear button for enhanced user experience. Unlike regular inputs, it uses placeholder text instead of floating labels for better search UX patterns.
+
+> View in [Figma](https://www.figma.com/design/JxaLVMTWirCpU0rsbZ30k7/2.-Components-Library?node-id=2248-3468&m=dev).
+
+> ⚠️ **Note on Web Preview:** The Storybook preview below may display visual inconsistencies as certain React Native APIs (such as Reanimated animations) cannot be fully translated to web environments. While the component's functionality should accurately represent the native implementation, it may not render as intended. For the complete native experience, please refer to the component on an actual iOS or Android device.
+
+<Canvas of={SearchInputStories.Base} />
+<Controls of={SearchInputStories.Base} />
+
+## Anatomy
+
+> **Layout:** The SearchInput component takes the full width of its container by default. You can control the width by using the `style` prop or by wrapping in a container.
+
+### Search Icon
+
+Fixed 20px search icon positioned on the left with muted color styling. The icon is built-in and cannot be customized.
+
+### Placeholder Text
+
+Uses placeholder text instead of floating labels for better search UX. Styled with `text-muted` color.
+
+### Clear Button
+
+A clear button (×) appears **automatically** when input has content.
+
+<Canvas of={SearchInputStories.WithContent} />
+
+> **Note:** The clear button only clears the input content/value. It does not clear error states - you must handle error state clearing separately in your component logic.
+
+#### **Hiding the Clear Button**
+
+Use `hideClearButton` to prevent the clear button from appearing.
+
+<Canvas of={SearchInputStories.WithHiddenClearButton} />
+
+#### **Extending the Clear Behavior**
+
+Use `onClear` to extend the default clear behavior with custom logic.
+
+<Canvas of={SearchInputStories.WithClearCallback} />
+
+### Disabled State
+
+The search input can be disabled using the `editable` prop set to `false`.
+
+<Canvas of={SearchInputStories.DisabledSearchInput} />
+
+### Error State
+
+The search component supports error handling through `errorMessage` which displays an error message below the input with error styling including a red border and text color.
+
+<Canvas of={SearchInputStories.WithError} />
+
+The error message will be automatically:
+
+- Connected to the input
+- Displayed with a warning icon
+- Styled in the error color
+- Announced by screen readers
+
+## Controlled vs Uncontrolled
+
+The SearchInput component supports both controlled and uncontrolled usage.
+
+### Uncontrolled (with defaultValue)
+
+Use defaultValue when you don't need to track the search query in state. The component manages its own internal state.
+
+### Controlled (with value and onChangeText)
+
+Use `value` and `onChangeText` when you want full control of the search query from your component logic. This is the recommended approach for search functionality.
+
+## Keyboard Types
+
+The component supports various React Native TextInput keyboard types. While the default keyboard is suitable for most search scenarios, you can customize it:
+
+- default (text) - recommended for most searches
+- email-address - for email search
+- url - for URL search
+- numeric - for numeric search
+
+Set these using the `keyboardType` prop.
+
+## Accessibility
+
+The SearchInput component follows accessibility best practices:
+
+- Supports screen reader navigation
+- Placeholder text is properly announced
+- Error messages are properly announced
+- Clear button has an accessible label
+- Search icon is marked as decorative (`accessible={false}`)
+- Touch target sizes meet minimum requirements (48px height)
+
+## Best Practices
+
+**Placeholder Text**: Provide clear, descriptive placeholder text that indicates what can be searched
+
+**Error Messages**: Make error messages helpful and actionable (e.g., "Search failed. Please try again")
+
+**Debouncing**: Debounce search operations to avoid excessive API calls or filtering on every keystroke
+
+**Clear Button**: Automatically available - use for quick clearing of search queries
+
+**Keyboard Types**: Use the default keyboard type unless you have a specific use case
+
+**Performance**: For large datasets or API searches, implement proper debouncing and optimize your search logic
+
+</Tab>
+<Tab label="Implementation">
+
+## Setup
+
+Install and set up the library with our [Setup Guide →](?path=/docs/getting-started-setup--docs).
+
+### Basic Usage
+
+```tsx
+import { SearchInput } from '@ledgerhq/lumen-ui-rnative';
+import { useState } from 'react';
+
+function MyComponent() {
+  const [query, setQuery] = useState('');
+
+  return (
+    <SearchInput
+      placeholder='Search products'
+      value={query}
+      onChangeText={setQuery}
+    />
+  );
+}
+```
+
+> **Note:** Clear button appears automatically when input has content. Use `hideClearButton` to hide it.
+
+#### **Hiding the Clear Button**
+
+Use `hideClearButton` to prevent the clear button from appearing:
+
+```tsx
+import { SearchInput } from '@ledgerhq/lumen-ui-rnative';
+import { useState } from 'react';
+
+function MyComponent() {
+  const [query, setQuery] = useState('');
+
+  return (
+    <SearchInput
+      placeholder='Search'
+      value={query}
+      onChangeText={setQuery}
+      hideClearButton // Clear button will not appear
+    />
+  );
+}
+```
+
+#### **Extending the Clear Behavior**
+
+Provide `onClear` to extend the default clear behavior with additional logic:
+
+```tsx
+import { SearchInput } from '@ledgerhq/lumen-ui-rnative';
+import { useState } from 'react';
+
+function MyComponent() {
+  const [query, setQuery] = useState('');
+  const [error, setError] = useState('');
+
+  return (
+    <SearchInput
+      placeholder='Search users'
+      value={query}
+      onChangeText={setQuery}
+      onClear={() => {
+        // Default clearing happens automatically
+        // Add your custom logic here
+        analytics.track('search_cleared');
+        // Clear error state if needed
+        setError('');
+      }}
+    />
+  );
+}
+```
+
+### With Error State
+
+The SearchInput component supports error states and messages:
+
+```tsx
+import { SearchInput } from '@ledgerhq/lumen-ui-rnative';
+import { useState } from 'react';
+
+function MyComponent() {
+  const [query, setQuery] = useState('');
+  const [error, setError] = useState('');
+
+  const handleSearch = (text: string) => {
+    setQuery(text);
+    // Example: validate search query
+    if (text.length > 0 && text.length < 2) {
+      setError('Search query must be at least 2 characters');
+    } else {
+      setError('');
+    }
+  };
+
+  return (
+    <SearchInput
+      placeholder='Search products'
+      value={query}
+      onChangeText={handleSearch}
+      errorMessage={error}
+    />
+  );
+}
+```
+
+> **Note:** Error messages are optional. Use `errorMessage` to display an error message below the search input.
+
+### With Custom Styling
+
+While the component comes with predefined styles, you can extend them using the `style` prop:
+
+```tsx
+<SearchInput
+  placeholder='Search'
+  value={query}
+  onChangeText={setQuery}
+  style={{ maxWidth: 320 }} // Control width
+/>
+```
+
+### With Different Keyboard Types
+
+Use the `keyboardType` prop to show the appropriate keyboard:
+
+```tsx
+// Email search keyboard
+<SearchInput
+  placeholder='Search by email'
+  value={query}
+  onChangeText={setQuery}
+  keyboardType='email-address'
+/>
+
+// URL search keyboard
+<SearchInput
+  placeholder='Search by URL'
+  value={query}
+  onChangeText={setQuery}
+  keyboardType='url'
+/>
+```
+
+### Disabled State
+
+Use the `editable` prop to disable the search input:
+
+```tsx
+<SearchInput placeholder='Search' value='Current search' editable={false} />
+```
+
+### Debounced Search Example
+
+For better performance, especially when dealing with API calls or expensive filtering operations, implement debounced search:
+
+```tsx
+import { SearchInput } from '@ledgerhq/lumen-ui-rnative';
+import { useState, useCallback } from 'react';
+import { debounce } from 'lodash'; // or your preferred debounce utility
+
+function MyComponent() {
+  const [query, setQuery] = useState('');
+  const [results, setResults] = useState([]);
+
+  // Debounced search function
+  const performSearch = useCallback(
+    debounce(async (searchQuery: string) => {
+      if (searchQuery.trim()) {
+        const results = await searchAPI(searchQuery);
+        setResults(results);
+      } else {
+        setResults([]);
+      }
+    }, 500),
+    [],
+  );
+
+  const handleChange = (text: string) => {
+    setQuery(text); // Update immediately for UI responsiveness
+    performSearch(text); // Debounced search operation
+  };
+
+  return (
+    <SearchInput
+      placeholder='Search products'
+      value={query}
+      onChangeText={handleChange}
+    />
+  );
+}
+```
+
+## Do's and Don'ts
+
+The following guidelines ensure consistent usage of the SearchInput component and maintain design system principles.
+
+<div style={{ display: 'flex', flexDirection: 'column', gap: 24 }}>
+  <DoVsDontRow>
+    <DoBlockItem
+      title='Use placeholder text'
+      description='SearchInput uses placeholder text instead of labels for optimal search UX'
+    >
+
+{/* prettier-ignore */}
+```tsx
+<SearchInput
+  placeholder='Search by name or email'
+  value={query}
+  onChangeText={setQuery}
+/>
+```
+
+    </DoBlockItem>
+    <DontBlockItem
+      title="Don't use label prop"
+      description='SearchInput component does not support labels as they are not suitable for search UX patterns'
+    >
+
+{/* prettier-ignore */}
+```tsx
+<SearchInput
+  label='Search' // Not supported, will cause error
+  placeholder='Search by name or email'
+  value={query}
+/>
+```
+
+    </DontBlockItem>
+
+  </DoVsDontRow>
+
+  <DoVsDontRow>
+    <DoBlockItem
+      title='Use the built-in search icon'
+      description='The search icon is automatically included and cannot be changed'
+    >
+
+{/* prettier-ignore */}
+```tsx
+<SearchInput
+  placeholder='Search products'
+  value={query}
+  onChangeText={handleChange}
+/>
+```
+
+    </DoBlockItem>
+    <DontBlockItem
+      title="Don't override the search icon"
+      description='The prefix prop is not available on SearchInput component'
+    >
+
+{/* prettier-ignore */}
+```tsx
+<SearchInput
+  prefix={<CustomIcon />} // Not supported, will cause error
+  placeholder='Search products'
+/>
+```
+
+    </DontBlockItem>
+
+  </DoVsDontRow>
+
+  <DoVsDontRow>
+    <DoBlockItem
+      title='Use onClear for custom logic only'
+      description='Let the component handle clearing automatically, add onClear only for additional logic'
+    >
+
+{/* prettier-ignore */}
+```tsx
+<SearchInput
+  placeholder='Search'
+  value={query}
+  onChangeText={setQuery}
+  onClear={() => {
+    // Default clearing happens automatically
+    analytics.track('search_cleared');
+  }}
+/>
+```
+
+    </DoBlockItem>
+    <DontBlockItem
+      title="Don't manually clear in onClear"
+      description='Value clearing happens automatically - no need to call setQuery'
+    >
+
+{/* prettier-ignore */}
+```tsx
+<SearchInput
+  placeholder='Search'
+  value={query}
+  onChangeText={setQuery}
+  onClear={() => setQuery('')}
+/>
+```
+
+    </DontBlockItem>
+
+  </DoVsDontRow>
+
+  <DoVsDontRow>
+    <DoBlockItem
+      title='Debounce expensive search operations'
+      description='Use debouncing for API calls or expensive filtering to improve performance'
+    >
+
+{/* prettier-ignore */}
+```tsx
+const debouncedSearch = useCallback(
+  debounce((text: string) => performSearch(text), 500),
+  []
+);
+
+<SearchInput
+  placeholder='Search'
+  value={query}
+  onChangeText={(text) => {
+    setQuery(text);
+    debouncedSearch(text);
+  }}
+/>
+```
+
+    </DoBlockItem>
+    <DontBlockItem
+      title="Don't perform expensive operations on every keystroke"
+      description='Avoid running expensive operations on every input change without debouncing'
+    >
+
+{/* prettier-ignore */}
+```tsx
+const debouncedSearch = useCallback(
+  debounce((text: string) => performSearch(text), 500),
+  []
+);
+
+<SearchInput
+  placeholder='Search'
+  value={query}
+  onChangeText={(text) => {
+    setQuery(text);
+    performExpensiveAPICall(text); // Should be debounced
+  }}
+/>
+```
+
+    </DontBlockItem>
+
+  </DoVsDontRow>
+
+  <DoVsDontRow>
+    <DoBlockItem
+      title='Provide descriptive placeholder text'
+      description='Use clear, specific placeholder text that describes what users can search for'
+    >
+
+{/* prettier-ignore */}
+```tsx
+<SearchInput
+  placeholder='Search by name or email'
+  value={query}
+  onChangeText={setQuery}
+/>
+```
+
+    </DoBlockItem>
+    <DontBlockItem
+      title="Don't use vague placeholder text"
+      description='Avoid generic or unclear placeholder text that does not help users'
+    >
+
+{/* prettier-ignore */}
+```tsx
+<SearchInput
+  placeholder='Type here'
+  value={query}
+  onChangeText={setQuery}
+/>
+```
+
+    </DontBlockItem>
+
+  </DoVsDontRow>
+
+  <CommonRulesDoAndDont />
+</div>
+
+## Platform Considerations
+
+### iOS Specific
+
+- Search input automatically adapts to iOS design guidelines
+- Keyboard automatically handles safe area insets
+- Respects iOS accessibility settings like Dynamic Type
+- Search icon renders with platform-appropriate styling
+
+### Android Specific
+
+- Supports Android keyboard types and input methods
+- Handles Android back button interactions appropriately
+- Respects Android accessibility services
+- Search icon adapts to Android visual guidelines
+
+### Cross-Platform
+
+- Consistent visual appearance across platforms
+- Platform-appropriate keyboard behavior
+- Unified API regardless of platform
+- Search icon maintains consistent 20px size
+- Clear button behavior works seamlessly on both platforms
+
+## Usage Guidelines
+
+Use SearchInput for:
+
+- Search functionality and data querying
+- Filtering lists or datasets
+- Quick find operations
+- Search bars in navigation
+
+Use TextInput (instead of SearchInput) for:
+
+- Form data collection
+- User profile information
+- Settings and configurations
+- Any input that requires a label
+
+</Tab>
+</CustomTabs>
+