@utilitywarehouse/hearth-react-native 0.34.5 → 0.35.1

package/src/components/InlineLink/InlineLink.stories.tsx

@@ -1,91 +0,0 @@
-import { Meta, StoryObj } from '@storybook/react-vite';
-import { InlineLink } from '.';
-import { BodyText } from '../BodyText';
-import { Flex } from '../Flex';
-import { List } from '../List';
-
-const meta = {
-  title: 'Stories / InlineLink',
-  component: InlineLink,
-  parameters: {
-    layout: 'centered',
-  },
-  argTypes: {
-    children: {
-      type: 'string',
-      control: 'text',
-      description: 'The text of the link.',
-    },
-    href: {
-      type: 'string',
-      control: 'text',
-      description: 'The URL the link will navigate to.',
-    },
-    target: {
-      options: ['_blank', '_self', '_parent', '_top'],
-      control: 'select',
-      description: 'The target of the link.',
-    },
-
-    disabled: {
-      type: 'boolean',
-      control: 'boolean',
-      description: 'To manually set disable to the link.',
-    },
-    inverted: {
-      type: 'boolean',
-      control: 'boolean',
-      description: 'To set the link to be inverted. (To only be used on `purple` backgrounds)',
-    },
-  },
-  args: {
-    children: 'embedded link',
-    href: 'https://www.uw.co.uk',
-    target: '_blank',
-    disabled: false,
-    inverted: false,
-  },
-} satisfies Meta<typeof InlineLink>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const Playground: Story = {};
-
-export const Variants: Story = {
-  render: ({ children }) => {
-    return (
-      <Flex direction="column" spacing="sm">
-        <List></List>
-        <BodyText>
-          This is the body text style, and it contains an{' '}
-          <InlineLink href="https://www.uw.co.uk" target="_blank">
-            {children}
-          </InlineLink>{' '}
-          within this text. This works on white backgrounds
-        </BodyText>
-        <BodyText weight="semibold">
-          This is the body text style, and it contains an{' '}
-          <InlineLink href="https://www.uw.co.uk" target="_blank">
-            {children}
-          </InlineLink>{' '}
-          within this text. This works on white backgrounds
-        </BodyText>
-        <BodyText size="lg">
-          This is the body text style, and it contains an{' '}
-          <InlineLink href="https://www.uw.co.uk" target="_blank">
-            {children}
-          </InlineLink>{' '}
-          within this text. This works on white backgrounds
-        </BodyText>
-        <BodyText size="lg" weight="semibold">
-          This is the body text style, and it contains an{' '}
-          <InlineLink href="https://www.uw.co.uk" target="_blank">
-            {children}
-          </InlineLink>{' '}
-          within this text. This works on white backgrounds
-        </BodyText>
-      </Flex>
-    );
-  },
-};

package/src/components/InlineLink/InlineLink.tsx

@@ -1,26 +0,0 @@
- 
-import type { InlineLinkProps } from './InlineLink.props';
-import { createLink } from '@gluestack-ui/link';
-import InlineLinkRoot from './InlineLinkRoot';
-
-const InlineLinkComponent = createLink({
-  Root: InlineLinkRoot,
-  Text: () => null,
-});
-
-const InlineLink = ({
-  children,
-  disabled = false,
-  target = '_self',
-  ...props
-}: InlineLinkProps) => {
-  const InlineLinkAny = InlineLinkComponent as any;
-  return (
-    <InlineLinkAny {...props} isDisabled={disabled} isExternal={target === '_blank'}>
-      {children as any}
-    </InlineLinkAny>
-  );
-};
-InlineLink.displayName = 'InlineLink';
-
-export default InlineLink;

package/src/components/InlineLink/InlineLinkRoot.tsx

@@ -1,87 +0,0 @@
-import { useMemo } from 'react';
-import { Text } from 'react-native';
-import { StyleSheet } from 'react-native-unistyles';
-import { InlineLinkContext } from './InlineLink.context';
-import InlineLinkProps from './InlineLink.props';
-
-const InlineLinkRoot = ({
-  children,
-  inverted = false,
-  states,
-  ...props
-}: InlineLinkProps & { states?: { active?: boolean; disabled?: boolean } }) => {
-  const { active, disabled = false } = states || {};
-  styles.useVariants({ disabled, inverted, active });
-  const value = useMemo(() => ({ inverted, disabled, active }), [inverted, disabled, active]);
-  return (
-    <InlineLinkContext.Provider value={value}>
-      <Text {...props} style={[styles.container, props.style]}>
-        {children}
-      </Text>
-    </InlineLinkContext.Provider>
-  );
-};
-
-InlineLinkRoot.displayName = 'InlineLinkRoot';
-
-const styles = StyleSheet.create(theme => ({
-  container: {
-    color: theme.components.inlineLink.color,
-    textDecorationStyle: 'solid',
-    textDecorationLine: 'underline',
-    textDecorationColor: theme.components.inlineLink.color,
-    _web: {
-      '_focus-visible': {
-        borderRadius: theme.borderRadius.xs,
-        outlineStyle: 'solid',
-        outlineWidth: 2,
-        outlineColor: theme.color.focus.primary,
-        outlineOffset: 1,
-        boxShadow: 'none',
-      },
-      _hover: {
-        textDecorationLine: 'none',
-      },
-    },
-    variants: {
-      active: {
-        true: {
-          color: theme.components.inlineLink.color,
-        },
-      },
-      inverted: {
-        true: {
-          color: theme.components.inlineLink.inverted.color,
-          textDecorationColor: theme.components.inlineLink.inverted.color,
-          _web: {
-            '_focus-visible': {
-              outlineColor: theme.color.focus.inverted,
-            },
-          },
-        },
-      },
-      disabled: {
-        true: {
-          opacity: theme.opacity.disabled,
-        },
-      },
-      inline: {
-        true: {
-          color: theme.color.blue[700],
-          textDecorationColor: theme.color.blue[700],
-        },
-      },
-    },
-    compoundVariants: [
-      {
-        inverted: true,
-        active: true,
-        styles: {
-          color: theme.components.inlineLink.inverted.colorActive,
-        },
-      },
-    ],
-  },
-}));
-
-export default InlineLinkRoot;

package/src/components/InlineLink/index.ts

@@ -1,3 +0,0 @@
-export { default as InlineLink } from './InlineLink';
-export type { InlineLinkProps } from './InlineLink.props';
-export { InlineLinkContext, useInlineLinkContext } from './InlineLink.context';

package/src/components/Input/Input.context.ts

@@ -1,6 +0,0 @@
-import { createContext, useContext } from 'react';
-import { InputContextValue } from './Input.props';
-
-export const InputContext = createContext<InputContextValue>({});
-
-export const useInputContext = () => useContext(InputContext);

package/src/components/Input/Input.figma.tsx

@@ -1,123 +0,0 @@
-import figma from '@figma/code-connect';
-import { Input } from '../';
-
-const props = {
-  disabled: figma.enum('State', {
-    Disabled: true,
-  }),
-  readonly: figma.enum('State', {
-    'Read-only': true,
-  }),
-  placeholder: figma.enum('Value type', {
-    Placeholder: figma.string('Value'),
-  }),
-  value: figma.enum('Value type', {
-    Filled: figma.string('Value'),
-  }),
-  label: figma.string('Label'),
-  labelVariant: figma.enum('Label variant', {
-    Body: 'body',
-    Heading: 'heading',
-  }),
-  helperText: figma.boolean('Helper text?', {
-    true: figma.string('Helper text'),
-  }),
-  validationStatus: figma.enum('State', {
-    Invalid: 'invalid',
-    Valid: 'valid',
-  }),
-  invalidText: figma.enum('State', {
-    Invalid: figma.string('Validation'),
-  }),
-  validText: figma.enum('State', {
-    Valid: figma.string('Validation'),
-  }),
-};
-
-figma.connect(Input, 'https://www.figma.com/design/6NKZXZhFSExXrcbBgc6zTR?node-id=2685%3A7021', {
-  props: {
-    ...props,
-    required: figma.boolean('Optional?', {
-      true: false,
-      false: true,
-    }),
-    prefix: figma.boolean('Prefix?', {
-      true: figma.string('Prefix'),
-    }),
-    suffix: figma.boolean('Suffix?', {
-      true: figma.string('Suffix'),
-    }),
-  },
-  example: props => (
-    <Input
-      disabled={props.disabled}
-      readonly={props.readonly}
-      placeholder={props.placeholder}
-      value={props.value}
-      label={props.label}
-      labelVariant={props.labelVariant}
-      helperText={props.helperText}
-      required={props.required}
-      prefix={props.prefix}
-      suffix={props.suffix}
-      validationStatus={props.validationStatus}
-      invalidText={props.invalidText}
-      validText={props.validText}
-    />
-  ),
-});
-
-figma.connect(
-  Input,
-  'https://www.figma.com/design/6NKZXZhFSExXrcbBgc6zTR/Hearth-Components---Tokens?node-id=2251-10106&t=3uUSBVdxldgG5uz3-4',
-  {
-    props,
-    example: props => (
-      <Input
-        type="password"
-        disabled={props.disabled}
-        readonly={props.readonly}
-        placeholder={props.placeholder}
-        value={props.value}
-        label={props.label}
-        labelVariant={props.labelVariant}
-        helperText={props.helperText}
-        validationStatus={props.validationStatus}
-        invalidText={props.invalidText}
-        validText={props.validText}
-      />
-    ),
-  }
-);
-
-figma.connect(
-  Input,
-  'https://www.figma.com/design/6NKZXZhFSExXrcbBgc6zTR/Hearth-Components---Tokens?node-id=2161-1311&t=3uUSBVdxldgG5uz3-4',
-  {
-    props: {
-      loading: figma.enum('State', {
-        Loading: true,
-      }),
-      placeholder: figma.enum('State', {
-        Placeholder: figma.string('Value'),
-      }),
-      value: figma.enum('State', {
-        Filled: figma.string('Value'),
-      }),
-      label: figma.string('Label'),
-      helperText: figma.boolean('Helper text?', {
-        true: figma.string('Helper text'),
-      }),
-    },
-    example: props => (
-      <Input
-        type="search"
-        loading={props.loading}
-        placeholder={props.placeholder}
-        value={props.value}
-        label={props.label}
-        helperText={props.helperText}
-      />
-    ),
-  }
-);

package/src/components/Input/Input.props.ts

@@ -1,118 +0,0 @@
-import type { ComponentType } from 'react';
-import React from 'react';
-import type { TextInputProps, ViewProps } from 'react-native';
-
-// Base props common to all input types
-export interface InputBaseProps {
-  /**
-   * If true, the input will be disabled.
-   *
-   * @type boolean
-   * @example
-   * ```tsx
-   * <Input disabled={true} />
-   * ```
-   */
-  disabled?: boolean;
-  /**
-   * The validation status of the Input component.
-   *
-   * @type 'initial' | 'valid' | 'invalid'
-   * @example
-   * ```tsx
-   * <Input validationStatus="valid" />
-   * ```
-   */
-  validationStatus?: 'initial' | 'valid' | 'invalid';
-  readonly?: boolean;
-  focused?: boolean;
-  placeholder?: string;
-  inBottomSheet?: boolean;
-  label?: string;
-  labelVariant?: 'heading' | 'body';
-  helperText?: string;
-  helperIcon?: ComponentType;
-  validText?: string;
-  invalidText?: string;
-  required?: boolean;
-}
-
-// For inputs that have children
-export interface InputWithChildrenProps extends InputBaseProps, ViewProps {
-  children: ViewProps['children'];
-  type?: undefined;
-  showPasswordToggle?: never;
-  format?: never;
-  loading?: never;
-  clearable?: never;
-  onClear?: never;
-  leadingIcon?: never;
-  trailingIcon?: never;
-  prefix?: never;
-  suffix?: never;
-}
-
-// Base for inputs without children
-interface InputWithoutChildrenBaseProps extends InputBaseProps, Omit<TextInputProps, 'children'> {
-  children?: never;
-  leadingIcon?: ComponentType;
-  trailingIcon?: ComponentType;
-  required?: boolean;
-  prefix?: string | number | React.ReactNode;
-  suffix?: string | number | React.ReactNode;
-}
-
-// Specific input types with their unique props
-interface TextInputSpecificProps extends InputWithoutChildrenBaseProps {
-  type?: 'text';
-  showPasswordToggle?: never;
-  format?: never;
-  loading?: never;
-  clearable?: never;
-  onClear?: never;
-}
-
-interface PasswordInputSpecificProps extends InputWithoutChildrenBaseProps {
-  type: 'password';
-  showPasswordToggle?: boolean;
-  format?: never;
-  loading?: never;
-  clearable?: never;
-  onClear?: never;
-  prefix?: never;
-  suffix?: never;
-}
-
-interface SearchInputSpecificProps extends InputWithoutChildrenBaseProps {
-  type: 'search';
-  loading?: boolean;
-  clearable?: boolean;
-  onClear?: () => void;
-  showPasswordToggle?: never;
-  format?: never;
-  prefix?: never;
-  suffix?: never;
-}
-
-// Union of all input types
-export type InputWithoutChildrenProps =
-  | TextInputSpecificProps
-  | PasswordInputSpecificProps
-  | SearchInputSpecificProps;
-
-/**
- * Props for the Input component.
- * This is a discriminated union type where the 'type' property
- * determines which specific props are available.
- */
-type InputProps = InputWithChildrenProps | InputWithoutChildrenProps;
-
-export type InputContextValue = {
-  disabled?: InputProps['disabled'];
-  focused?: InputProps['focused'];
-  readonly?: InputProps['readonly'];
-  validationStatus?: InputProps['validationStatus'];
-  type?: InputProps['type'];
-};
-
-export default InputProps;

package/src/components/Input/Input.stories.tsx

@@ -1,235 +0,0 @@
-import { Meta, StoryObj } from '@storybook/react-native';
-import * as Icons from '@utilitywarehouse/hearth-react-native-icons';
-import { EmailMediumIcon } from '@utilitywarehouse/hearth-react-native-icons';
-import { useRef, useState } from 'react';
-import { NativeSyntheticEvent, TextInput, TextInputChangeEventData, View } from 'react-native';
-import { Input } from '.';
-import { VariantTitle } from '../../../docs/components';
-import { useTheme } from '../../hooks';
-import { BodyText } from '../BodyText';
-import { Button } from '../Button';
-import { Flex } from '../Flex';
-
-const meta = {
-  title: 'Stories / Input',
-  component: Input,
-  parameters: {
-    layout: 'centered',
-  },
-  argTypes: {
-    placeholder: {
-      control: 'text',
-      description: 'The Input field placeholder',
-      defaultValue: '',
-    },
-    type: {
-      control: 'select',
-      options: ['text', 'password'],
-      description: 'The Input field type',
-      defaultValue: 'text',
-    },
-    validationStatus: {
-      control: 'select',
-      options: ['initial', 'valid', 'invalid'],
-      description: 'The validation status of the Input component',
-      defaultValue: 'initial',
-    },
-    disabled: {
-      control: 'boolean',
-      description: 'Disable the Input component',
-      defaultValue: false,
-    },
-    readonly: {
-      control: 'boolean',
-      description: 'Read only the Input component',
-      defaultValue: false,
-    },
-    focused: {
-      control: 'boolean',
-      description: 'Focus the Input component',
-      defaultValue: false,
-    },
-    leadingIcon: {
-      options: ['none', ...Object.keys(Icons).filter(icon => icon.includes('Medium'))],
-      control: 'select',
-      description: 'The leading icon component for the Input component',
-    },
-    trailingIcon: {
-      options: ['none', ...Object.keys(Icons).filter(icon => icon.includes('Medium'))],
-      control: 'select',
-      description: 'The trailing icon component for the Input component',
-    },
-  },
-  args: {
-    placeholder: 'Input placeholder',
-    validationStatus: 'initial',
-    type: 'text',
-    disabled: false,
-    readonly: false,
-    focused: false,
-    leadingIcon: undefined,
-    trailingIcon: undefined,
-  },
-} satisfies Meta<typeof Input>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const Playground: Story = {
-  // @ts-expect-error - This is a playground
-  render: ({ leadingIcon: leading, trailingIcon: trailing, ...args }) => {
-    // @ts-expect-error - This is a playground
-    const leadingIcon = leading === 'none' ? undefined : Icons[leading];
-    // @ts-expect-error - This is a playground
-    const trailingIcon = trailing === 'none' ? undefined : Icons[trailing];
-    return (
-      <Input
-        {...args}
-        leadingIcon={leadingIcon}
-        trailingIcon={trailingIcon}
-        label="First Name"
-        helperText="Only enter your first name, not your full name"
-      />
-    );
-  },
-};
-
-export const Variants: Story = {
-  parameters: {
-    controls: { include: [] },
-  },
-  render: () => {
-    const [clearableSearchValue, setClearableSearchValue] = useState('clearble search');
-    const handleClearableSearchChange = (e: NativeSyntheticEvent<TextInputChangeEventData>) => {
-      setClearableSearchValue(e.nativeEvent.text);
-    };
-    const handleClearableSearchClear = () => {
-      setClearableSearchValue('');
-    };
-    return (
-      <Flex direction="column" spacing="lg">
-        <VariantTitle title="Default">
-          <Input />
-        </VariantTitle>
-        <VariantTitle title="With icon">
-          <Input leadingIcon={EmailMediumIcon} />
-        </VariantTitle>
-        <VariantTitle title="With placeholder">
-          <Input placeholder="Input placeholder" />
-        </VariantTitle>
-        <VariantTitle title="With value">
-          <Input placeholder="Input placeholder" value="filling the value" />
-        </VariantTitle>
-        <VariantTitle title="Focused">
-          <Input focused placeholder="Input placeholder" value="filling the value" />
-        </VariantTitle>
-        <VariantTitle title="Type password">
-          <Input placeholder="Input placeholder" value="filling the value" type="password" />
-        </VariantTitle>
-        <VariantTitle title="Type search">
-          <Input placeholder="Input placeholder" type="search" />
-        </VariantTitle>
-        <VariantTitle title="Type search - clearable">
-          <Input
-            placeholder="Input placeholder"
-            type="search"
-            value={clearableSearchValue}
-            clearable
-            onChange={handleClearableSearchChange}
-            onClear={handleClearableSearchClear}
-          />
-        </VariantTitle>
-        <VariantTitle title="Type search - loading">
-          <Input placeholder="Input placeholder" type="search" loading />
-        </VariantTitle>
-        <VariantTitle title="Valid">
-          <Input validationStatus="valid" placeholder="Input placeholder" />
-        </VariantTitle>
-        <VariantTitle title="Valid focused">
-          <Input validationStatus="valid" focused placeholder="Input placeholder" />
-        </VariantTitle>
-        <VariantTitle title="Invalid">
-          <Input validationStatus="invalid" placeholder="Input placeholder" />
-        </VariantTitle>
-        <VariantTitle title="Invalid focused">
-          <Input validationStatus="invalid" focused placeholder="Input placeholder" />
-        </VariantTitle>
-        <VariantTitle title="Disabled">
-          <Input disabled placeholder="Input placeholder" />
-        </VariantTitle>
-        <VariantTitle title="Readonly">
-          <Input readonly placeholder="Input placeholder" readOnly />
-        </VariantTitle>
-      </Flex>
-    );
-  },
-};
-
-export const RefTest: Story = {
-  parameters: {
-    controls: { include: [] },
-  },
-  render: () => {
-    const inputRef = useRef<TextInput>(null);
-    const [refStatus, setRefStatus] = useState('Ref not tested yet');
-    const theme = useTheme();
-
-    const handleFocus = () => {
-      if (inputRef.current) {
-        inputRef.current.focus();
-        setRefStatus('✅ Ref works! Input focused programmatically');
-      } else {
-        setRefStatus('❌ Ref is null');
-      }
-    };
-
-    const handleBlur = () => {
-      if (inputRef.current) {
-        inputRef.current.blur();
-        setRefStatus('✅ Ref works! Input blurred programmatically');
-      } else {
-        setRefStatus('❌ Ref is null');
-      }
-    };
-
-    const handleClear = () => {
-      if (inputRef.current) {
-        inputRef.current.clear();
-        setRefStatus('✅ Ref works! Input cleared programmatically');
-      } else {
-        setRefStatus('❌ Ref is null');
-      }
-    };
-
-    return (
-      <Flex direction="column" spacing="lg">
-        <VariantTitle title="Ref Test">
-          <Input
-            ref={inputRef}
-            placeholder="Test ref functionality"
-            defaultValue="Try the buttons below"
-          />
-        </VariantTitle>
-        <VariantTitle title="Status">
-          <Flex direction="column" spacing="sm">
-            <Flex direction="row" spacing="sm">
-              <Button onPress={handleFocus}>Focus Input</Button>
-              <Button onPress={handleBlur}>Blur Input</Button>
-              <Button onPress={handleClear}>Clear Input</Button>
-            </Flex>
-            <View
-              style={{
-                marginTop: 8,
-                padding: 8,
-                backgroundColor: theme.color.background.secondary,
-                borderRadius: 4,
-              }}
-            >
-              <BodyText>{refStatus}</BodyText>
-            </View>
-          </Flex>
-        </VariantTitle>
-      </Flex>
-    );
-  },
-};