@utilitywarehouse/hearth-react-native 0.34.5 → 0.35.0

package/src/components/Select/Select.props.ts

@@ -1,161 +0,0 @@
-import { ViewProps } from 'react-native';
-import { BottomSheetProps } from '../BottomSheet';
-
-type ValidationStatus = 'initial' | 'valid' | 'invalid';
-
-export interface SelectOptionItemProps {
-  /**
-   * Label to display for this option
-   */
-  label: string;
-  /**
-   * Value for this option
-   */
-  value: string;
-  /**
-   * Optional left icon for this option
-   */
-  leadingIcon?: React.ComponentType;
-  /**
-   * Optional right icon for this option
-   */
-  trailingIcon?: React.ComponentType;
-  /**
-   * Whether this option is disabled
-   */
-  disabled?: boolean;
-}
-
-interface SelectProps extends ViewProps {
-  /**
-   * Array of options to display in the select
-   */
-  options?: SelectOptionProps[];
-  /**
-   * Currently selected value
-   */
-  value?: string | null;
-  /**
-   * Callback when value changes
-   */
-  onValueChange?: (value: string) => void;
-  /**
-   * Label for the select
-   */
-  label?: string;
-  /**
-   * The variant of the label text.
-   *
-   * Supported values are:
-   * - `'heading'` – use heading text styling for the label.
-   * - `'body'` – use body text styling for the label.
-   *
-   * @default 'body'.
-   */
-  labelVariant?: 'heading' | 'body';
-  /**
-   * Helper text to show below the select
-   */
-  helperText?: string;
-  /**
-   * Optional icon to display alongside the helper text
-   */
-  helperIcon?: React.ComponentType;
-  /**
-   *  Text to display when validationStatus is 'invalid'
-   */
-  invalidText?: string;
-  /**
-   * Text to display when validationStatus is 'valid'
-   */
-  validText?: string;
-  /**
-   * Placeholder text to show when no value is selected
-   */
-  placeholder?: string;
-  /**
-   * Whether the select is disabled
-   */
-  disabled?: boolean;
-  /**
-   * Leading icon for the select
-   */
-  leadingIcon?: React.ComponentType;
-  /**
-   * Validation status
-   */
-  validationStatus?: ValidationStatus;
-  /**
-   * Whether the select is required
-   */
-  required?: boolean;
-  /**
-   * The heading to display in the bottom sheet
-   */
-  menuHeading?: string;
-  /**
-   * Children to render inside the select (for custom options)
-   */
-  children?: ViewProps['children'];
-  /**
-   * Props passed to the BottomSheetModal
-   */
-  bottomSheetProps?: Partial<BottomSheetProps>;
-  /**
-   * Text to display when no options are available
-   */
-  emptyText?: string;
-  /**
-   * Props to be passed to the bottom sheet flat list
-   */
-  listProps?: any;
-  /**
-   * Optional search functionality for the select
-   */
-  searchable?: boolean;
-  /**
-   * Search placeholder
-   */
-  searchPlaceholder?: string;
-  /**
-   * Whether the select is readonly
-   */
-  readonly?: boolean;
-}
-
-export interface SelectOptionProps {
-  /**
-   * Label to display for this option
-   */
-  label: string;
-  /**
-   * Value for this option
-   */
-  value: string;
-  /**
-   * Optional left icon
-   */
-  leadingIcon?: React.ComponentType;
-  /**
-   * Optional right icon
-   */
-  trailingIcon?: React.ComponentType;
-  /**
-   * Whether this option is selected
-   */
-  selected?: boolean;
-  /**
-   * Whether this option is disabled
-   */
-  disabled?: boolean;
-  /**
-   * Callback when this option is selected
-   */
-  onPress?: (value: string) => void;
-  /**
-   * Test ID for testing
-   */
-  testID?: string;
-}
-
-export default SelectProps;

package/src/components/Select/Select.stories.tsx

@@ -1,290 +0,0 @@
-import type { Meta } from '@storybook/react-vite';
-import {
-  EyeSmallIcon,
-  HeartSmallIcon,
-  UserSmallIcon,
-} from '@utilitywarehouse/hearth-react-native-icons';
-import { useState } from 'react';
-import { Box } from '../Box';
-import { Button } from '../Button';
-import { FormField } from '../FormField';
-import Select from './Select';
-import SelectOption from './SelectOption';
-
-const meta = {
-  title: 'Stories / Select',
-  component: Select,
-  parameters: {
-    status: {
-      type: 'stable',
-    },
-  },
-  argTypes: {
-    label: {
-      control: 'text',
-      description: 'Label for the select',
-      defaultValue: 'Choose an option',
-    },
-    placeholder: {
-      control: 'text',
-      description: 'Placeholder text to show when no value is selected',
-      defaultValue: 'Select an option',
-    },
-    disabled: {
-      control: 'boolean',
-      description: 'Whether the select is disabled',
-      defaultValue: false,
-    },
-    readonly: {
-      control: 'boolean',
-      description: 'Whether the select is readonly',
-      defaultValue: false,
-    },
-    validationStatus: {
-      control: 'select',
-      options: ['initial', 'valid', 'invalid'],
-      description: 'The validation status of the select',
-      defaultValue: 'initial',
-    },
-    required: {
-      control: 'boolean',
-      description: 'Whether the select is required',
-      defaultValue: true,
-    },
-    menuHeading: {
-      control: 'text',
-      description: 'The heading to display in the bottom sheet',
-    },
-    emptyText: {
-      control: 'text',
-      description: 'Text to display when no options are available',
-      defaultValue: 'No options available',
-    },
-    searchable: {
-      control: 'boolean',
-      description: 'Whether to enable search functionality',
-      defaultValue: false,
-    },
-    searchPlaceholder: {
-      control: 'text',
-      description: 'Search placeholder text',
-      defaultValue: 'Search',
-    },
-  },
-  args: {
-    label: 'Choose an option',
-    placeholder: 'Select an option',
-    disabled: false,
-    readonly: false,
-    validationStatus: 'initial',
-    required: true,
-    emptyText: 'No options available',
-    searchable: false,
-    searchPlaceholder: 'Search',
-    options: [
-      { label: 'Option 1', value: '1' },
-      { label: 'Option 2', value: '2' },
-      { label: 'Option 3', value: '3' },
-    ],
-  },
-} satisfies Meta<typeof Select>;
-
-export default meta;
-
-export const Playground = ({ ...args }) => {
-  const [value, setValue] = useState<string | null>(null);
-  const handleValueChange = (newValue: string | null) => {
-    setValue(newValue);
-    console.log('Selected value:', newValue);
-  };
-  return (
-    <Select
-      value={value}
-      onValueChange={handleValueChange}
-      {...args}
-      options={Array.from({ length: 100 }, (_, i) => ({
-        label: `Option ${i + 1}`,
-        value: `${i + 1}`,
-      }))}
-    />
-  );
-};
-
-export const WithMenuHeading = () => {
-  const [value, setValue] = useState<string | null>(null);
-
-  return (
-    <Select
-      label="Choose an option"
-      placeholder="Select an option"
-      menuHeading="This is a menu heading"
-      options={[
-        { label: 'Option 1', value: '1' },
-        { label: 'Option 2', value: '2' },
-        { label: 'Option 3', value: '3' },
-      ]}
-      value={value}
-      onValueChange={setValue}
-    />
-  );
-};
-
-export const Disabled = () => {
-  const [value, setValue] = useState<string | null>('2');
-
-  return (
-    <Select
-      label="Choose an option"
-      placeholder="Select an option"
-      disabled
-      options={[
-        { label: 'Option 1', value: '1' },
-        { label: 'Option 2', value: '2' },
-        { label: 'Option 3', value: '3' },
-      ]}
-      value={value}
-      onValueChange={setValue}
-    />
-  );
-};
-
-export const WithValidationStatus = () => {
-  const [value, setValue] = useState<string | null>(null);
-  const [value2, setValue2] = useState<string | null>('2');
-
-  return (
-    <Box gap="200">
-      <FormField
-        validationStatus={value ? 'initial' : 'invalid'}
-        label="Invalid select"
-        invalidText="Please select a value"
-      >
-        <Select
-          placeholder="Select an option"
-          options={[
-            { label: 'Option 1', value: '1' },
-            { label: 'Option 2', value: '2' },
-            { label: 'Option 3', value: '3' },
-          ]}
-          value={value}
-          onValueChange={setValue}
-        />
-      </FormField>
-      {!!value && <Button text="Clear value" onPress={() => setValue(null)} />}
-      <FormField validationStatus="valid" label="Valid select">
-        <Select
-          placeholder="Select an option"
-          options={[
-            { label: 'Option 1', value: '1' },
-            { label: 'Option 2', value: '2' },
-            { label: 'Option 3', value: '3' },
-          ]}
-          value={value2}
-          onValueChange={setValue2}
-        />
-      </FormField>
-    </Box>
-  );
-};
-
-export const Optional = () => {
-  const [value, setValue] = useState<string | null>(null);
-
-  return (
-    <FormField label="Field label" required={false}>
-      <Select
-        placeholder="Select an option"
-        menuHeading="Optionally select an option"
-        options={[
-          { label: 'Option 1', value: '1' },
-          { label: 'Option 2', value: '2' },
-          { label: 'Option 3', value: '3' },
-        ]}
-        value={value}
-        onValueChange={setValue}
-      />
-    </FormField>
-  );
-};
-
-export const WithDisabledOption = () => {
-  const [value, setValue] = useState<string | null>(null);
-
-  return (
-    <FormField label="Field label">
-      <Select
-        placeholder="Select an option"
-        options={[
-          { label: 'Option 1', value: '1', disabled: true },
-          { label: 'Option 2', value: '2' },
-          { label: 'Option 3', value: '3' },
-        ]}
-        value={value}
-        onValueChange={setValue}
-      />
-    </FormField>
-  );
-};
-
-export const Searchable = () => {
-  const [value, setValue] = useState<string | null>(null);
-
-  return (
-    <Select
-      label="Searchable select"
-      placeholder="Select a country"
-      menuHeading="Searchable countries"
-      searchable
-      searchPlaceholder="Search countries..."
-      options={[
-        { label: 'United Kingdom', value: 'uk' },
-        { label: 'United States', value: 'us' },
-        { label: 'Canada', value: 'ca' },
-        { label: 'Australia', value: 'au' },
-        { label: 'France', value: 'fr' },
-        { label: 'Germany', value: 'de' },
-        { label: 'Japan', value: 'jp' },
-        { label: 'Brazil', value: 'br' },
-        { label: 'India', value: 'in' },
-        { label: 'South Africa', value: 'za' },
-      ]}
-      value={value}
-      onValueChange={setValue}
-    />
-  );
-};
-
-export const WithInlineOptions = () => {
-  const [value, setValue] = useState<string | null>(null);
-  const handleValueChange = (newValue: string | null) => {
-    setValue(newValue);
-    console.log('Selected value:', newValue);
-  };
-  return (
-    <Select
-      label="Custom options"
-      placeholder="Select an option"
-      value={value}
-      onValueChange={handleValueChange}
-    >
-      <SelectOption label="Home option" value="home" leadingIcon={UserSmallIcon} />
-      <SelectOption label="Car option" value="car" leadingIcon={HeartSmallIcon} />
-      <SelectOption label="World option" value="world" leadingIcon={EyeSmallIcon} />
-    </Select>
-  );
-};
-
-export const Empty = () => {
-  const [value, setValue] = useState<string | null>(null);
-
-  return (
-    <Select
-      label="Empty select"
-      placeholder="No options available"
-      options={[]}
-      value={value}
-      onValueChange={setValue}
-      emptyText="No options available at the moment"
-    />
-  );
-};