@utilitywarehouse/hearth-react-native 0.34.5 → 0.35.1

package/src/components/Container/Container.stories.tsx

@@ -1,290 +0,0 @@
-import { Meta, StoryObj } from '@storybook/react-vite';
-import { Container } from '.';
-import { lightTheme } from '../../core/themes';
-import { useTheme } from '../../hooks';
-import { BodyText } from '../BodyText';
-import { Box } from '../Box';
-
-// More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export
-const meta = {
-  title: 'Stories / Container',
-  component: Container,
-  parameters: {
-    // Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/configure/story-layout
-    layout: 'fullscreen',
-  },
-  // More on argTypes: https://storybook.js.org/docs/api/argtypes
-  argTypes: {
-    padding: {
-      options: Object.keys(lightTheme.space),
-      control: 'select',
-      description: 'The padding of the container.',
-    },
-    p: {
-      options: Object.keys(lightTheme.space),
-      control: 'select',
-      description: 'The padding of the container.',
-    },
-    paddingHorizontal: {
-      options: Object.keys(lightTheme.space),
-      control: 'select',
-      description: 'The horizontal padding of the container.',
-    },
-    px: {
-      options: Object.keys(lightTheme.space),
-      control: 'select',
-      description: 'The horizontal padding of the container.',
-    },
-    paddingVertical: {
-      options: Object.keys(lightTheme.space),
-      control: 'select',
-      description: 'The vertical padding of the container.',
-    },
-    py: {
-      options: Object.keys(lightTheme.space),
-      control: 'select',
-      description: 'The vertical padding of the container.',
-    },
-    paddingTop: {
-      options: Object.keys(lightTheme.space),
-      control: 'select',
-      description: 'The top padding of the container.',
-    },
-    pt: {
-      options: Object.keys(lightTheme.space),
-      control: 'select',
-      description: 'The top padding of the container.',
-    },
-    paddingBottom: {
-      options: Object.keys(lightTheme.space),
-      control: 'select',
-      description: 'The bottom padding of the container.',
-    },
-    pb: {
-      options: Object.keys(lightTheme.space),
-      control: 'select',
-      description: 'The bottom padding of the container.',
-    },
-    paddingLeft: {
-      options: Object.keys(lightTheme.space),
-      control: 'select',
-      description: 'The left padding of the container.',
-    },
-    pl: {
-      options: Object.keys(lightTheme.space),
-      control: 'select',
-      description: 'The left padding of the container.',
-    },
-    paddingRight: {
-      options: Object.keys(lightTheme.space),
-      control: 'select',
-      description: 'The right padding of the container.',
-    },
-    pr: {
-      options: Object.keys(lightTheme.space),
-      control: 'select',
-      description: 'The right padding of the container.',
-    },
-    margin: {
-      options: Object.keys(lightTheme.space),
-      control: 'select',
-      description: 'The margin of the container.',
-    },
-    m: {
-      options: Object.keys(lightTheme.space),
-      control: 'select',
-      description: 'The margin of the container.',
-    },
-    marginHorizontal: {
-      options: Object.keys(lightTheme.space),
-      control: 'select',
-      description: 'The horizontal margin of the container.',
-    },
-    mx: {
-      options: Object.keys(lightTheme.space),
-      control: 'select',
-      description: 'The horizontal margin of the container.',
-    },
-    marginVertical: {
-      options: Object.keys(lightTheme.space),
-      control: 'select',
-      description: 'The vertical margin of the container.',
-    },
-    my: {
-      options: Object.keys(lightTheme.space),
-      control: 'select',
-      description: 'The vertical margin of the container.',
-    },
-    marginTop: {
-      options: Object.keys(lightTheme.space),
-      control: 'select',
-      description: 'The top margin of the container.',
-    },
-    mt: {
-      options: Object.keys(lightTheme.space),
-      control: 'select',
-      description: 'The top margin of the container.',
-    },
-    marginBottom: {
-      options: Object.keys(lightTheme.space),
-      control: 'select',
-      description: 'The bottom margin of the container.',
-    },
-    mb: {
-      options: Object.keys(lightTheme.space),
-      control: 'select',
-      description: 'The bottom margin of the container.',
-    },
-    marginLeft: {
-      options: Object.keys(lightTheme.space),
-      control: 'select',
-      description: 'The left margin of the container.',
-    },
-    ml: {
-      options: Object.keys(lightTheme.space),
-      control: 'select',
-      description: 'The left margin of the container.',
-    },
-    marginRight: {
-      options: Object.keys(lightTheme.space),
-      control: 'select',
-      description: 'The right margin of the container.',
-    },
-    mr: {
-      options: Object.keys(lightTheme.space),
-      control: 'select',
-      description: 'The right margin of the container.',
-    },
-    spacing: {
-      options: ['none', '2xs', 'xs', 'sm', 'md', 'lg', 'xl', '2xl'],
-      control: 'radio',
-      description: 'The spacing between child elements (gap).',
-    },
-    gap: {
-      options: Object.keys(lightTheme.space),
-      control: 'select',
-      description: 'The space between child elements.',
-    },
-    backgroundColor: {
-      options: ['brand', 'primary', 'secondary', 'transparent'],
-      control: 'select',
-      description: 'The background color of the container.',
-    },
-    bg: {
-      options: ['brand', 'primary', 'secondary', 'transparent'],
-      control: 'select',
-      description: 'The background color of the container.',
-    },
-  },
-  // Use `fn` to spy on the onClick arg, which will appear in the actions panel once invoked: https://storybook.js.org/docs/essentials/actions#action-args
-  args: {
-    space: 'md',
-  },
-} satisfies Meta<typeof Container>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const Playground: Story = {
-  render: args => {
-    const { color } = useTheme();
-    return (
-      <Box backgroundColor={color.red['100']}>
-        <Container {...args} backgroundColor="secondary">
-          <Box bg={color.blue['400']} p="200" borderRadius="md">
-            <BodyText>Container content 1</BodyText>
-          </Box>
-          <Box bg={color.purple['400']} p="200" borderRadius="md">
-            <BodyText>Container content 2</BodyText>
-          </Box>
-          <Box bg={color.piggyPink['300']} p="200" borderRadius="md">
-            <BodyText>Container content 3</BodyText>
-          </Box>
-        </Container>
-      </Box>
-    );
-  },
-};
-
-export const WithPadding: Story = {
-  args: {
-    padding: '300',
-  },
-  render: args => {
-    const { color } = useTheme();
-    return (
-      <Box backgroundColor={color.red['100']}>
-        <Container {...args} backgroundColor="secondary">
-          <Box bg={color.blue['400']} p="200" borderRadius="md">
-            <BodyText>Container with padding</BodyText>
-          </Box>
-        </Container>
-      </Box>
-    );
-  },
-};
-
-export const WithMargin: Story = {
-  args: {
-    margin: '300',
-  },
-  render: args => {
-    const { color } = useTheme();
-    return (
-      <Box backgroundColor={color.red['100']}>
-        <Container {...args} backgroundColor="secondary">
-          <Box bg={color.blue['400']} p="200" borderRadius="md">
-            <BodyText>Container with margin</BodyText>
-          </Box>
-        </Container>
-      </Box>
-    );
-  },
-};
-
-export const WithCustomSpacing: Story = {
-  args: {
-    space: 'xl',
-    paddingHorizontal: '200',
-    paddingVertical: '300',
-  },
-  render: args => {
-    const { color } = useTheme();
-    return (
-      <Box backgroundColor={color.red['100']}>
-        <Container {...args} backgroundColor="secondary">
-          <Box bg={color.blue['400']} p="200" borderRadius="md">
-            <BodyText>Item 1</BodyText>
-          </Box>
-          <Box bg={color.purple['400']} p="200" borderRadius="md">
-            <BodyText>Item 2</BodyText>
-          </Box>
-          <Box bg={color.piggyPink['300']} p="200" borderRadius="md">
-            <BodyText>Item 3</BodyText>
-          </Box>
-          <Box bg={color.orange['400']} p="200" borderRadius="md">
-            <BodyText>Item 4</BodyText>
-          </Box>
-        </Container>
-      </Box>
-    );
-  },
-};
-
-export const LayoutTokens: Story = {
-  render: () => {
-    const { color } = useTheme();
-    return (
-      <Box backgroundColor={color.red['100']}>
-        <Container backgroundColor="secondary">
-          <Box bg={color.blue['200']} p="200" borderRadius="md">
-            <BodyText>
-              This Container uses the responsive layout tokens from the design system. It will
-              automatically adjust margin and padding based on the current breakpoint.
-            </BodyText>
-          </Box>
-        </Container>
-      </Box>
-    );
-  },
-};

package/src/components/Container/Container.tsx

@@ -1,52 +0,0 @@
-import { View } from 'react-native';
-import { StyleSheet } from 'react-native-unistyles';
-import { useStyleProps } from '../../hooks';
-import type ContainerProps from './Container.props';
-
-const Container = ({ style, children, spacing = 'md', space, ...props }: ContainerProps) => {
-  const { computedStyles, remainingProps } = useStyleProps(props);
-
-  styles.useVariants({ spacing: space ?? spacing });
-  return (
-    <View style={[styles.container(computedStyles), style]} {...remainingProps}>
-      {children}
-    </View>
-  );
-};
-
-Container.displayName = 'Container';
-
-const styles = StyleSheet.create(theme => ({
-  container: extra => ({
-    paddingTop:
-      typeof extra.padding === 'undefined' && typeof extra.paddingVertical === 'undefined'
-        ? {
-            base: theme.layout.mobile.container.paddingTop,
-            md: theme.layout.tablet.container.paddingTop,
-            lg: theme.layout.desktop.container.paddingTop,
-          }
-        : undefined,
-    paddingBottom:
-      typeof extra.padding === 'undefined' && typeof extra.paddingVertical === 'undefined'
-        ? {
-            base: theme.layout.mobile.container.paddingBottom,
-            md: theme.layout.tablet.container.paddingBottom,
-            lg: theme.layout.desktop.container.paddingBottom,
-          }
-        : undefined,
-    marginHorizontal:
-      typeof extra.margin === 'undefined' && typeof extra.marginHorizontal === 'undefined'
-        ? {
-            base: theme.layout.mobile.container.marginHorizontal,
-            md: theme.layout.tablet.container.marginHorizontal,
-            lg: theme.layout.desktop.container.marginHorizontal,
-          }
-        : undefined,
-    ...extra,
-    variants: {
-      spacing: theme.globalStyle.variants.spacing,
-    },
-  }),
-}));
-
-export default Container;

package/src/components/Container/index.tsx

@@ -1,2 +0,0 @@
-export { default as Container } from './Container';
-export type { default as ContainerProps } from './Container.props';

package/src/components/CurrencyInput/CurrencyInput.figma.tsx

@@ -1,72 +0,0 @@
-import figma from '@figma/code-connect';
-import { CurrencyInput, FormField } from '../';
-
-const props = {
-  placeholder: figma.string('Value'),
-  value: figma.string('Value'),
-  label: figma.string('Label'),
-  helperText: figma.boolean('Helper text?', {
-    true: figma.string('Helper text'),
-    false: undefined,
-  }),
-  invalidText: figma.enum('State', {
-    Default: undefined,
-    Invalid: figma.string('Validation'),
-  }),
-  validationStatus: figma.enum('State', {
-    Default: undefined,
-    Invalid: 'invalid',
-  }),
-  // "labelVariant": figma.enum('Label variant', {
-  //   "Body": "body",
-  //   "Heading": "heading"
-  // })
-};
-
-const onChangeHandler = () => {
-  // Placeholder for onChange handler
-};
-
-const value = 'some value';
-
-figma.connect(
-  CurrencyInput,
-  'https://www.figma.com/design/6NKZXZhFSExXrcbBgc6zTR?node-id=2161%3A1336',
-  {
-    props,
-    variant: {
-      'Value type': 'Filled',
-    },
-    example: props => (
-      <FormField
-        label={props.label}
-        helperText={props.helperText}
-        invalidText={props.invalidText}
-        validationStatus={props.validationStatus}
-      >
-        <CurrencyInput value={props.value} onChange={onChangeHandler} />
-      </FormField>
-    ),
-  }
-);
-
-figma.connect(
-  CurrencyInput,
-  'https://www.figma.com/design/6NKZXZhFSExXrcbBgc6zTR?node-id=2161%3A1336',
-  {
-    props,
-    variant: {
-      'Value type': 'Placeholder',
-    },
-    example: props => (
-      <FormField
-        label={props.label}
-        helperText={props.helperText}
-        invalidText={props.invalidText}
-        validationStatus={props.validationStatus}
-      >
-        <CurrencyInput placeholder={props.placeholder} value={value} onChange={onChangeHandler} />
-      </FormField>
-    ),
-  }
-);

package/src/components/CurrencyInput/CurrencyInput.props.ts

@@ -1,27 +0,0 @@
-import type { Ref } from 'react';
-import type { TextInput, TextInputProps, ViewProps } from 'react-native';
-
-export interface CurrencyInputBaseProps {
-  ref?: Ref<TextInput>;
-  disabled?: boolean;
-  validationStatus?: 'initial' | 'valid' | 'invalid';
-  readonly?: boolean;
-  focused?: boolean;
-  placeholder?: string;
-  inBottomSheet?: boolean;
-  required?: boolean;
-  /** When not specifically disabled, the numeric value is automatically formatted with thousand separators (e.g. 1234 -> 1,234). */
-  disableGroupSeparator?: boolean;
-  label?: string;
-  labelVariant?: 'heading' | 'body';
-  helperText?: string;
-  helperIcon?: React.ComponentType;
-  validText?: string;
-  invalidText?: string;
-}
-
-export type CurrencyInputProps = CurrencyInputBaseProps &
-  Omit<TextInputProps, 'children'> &
-  ViewProps;
-
-export default CurrencyInputProps;

package/src/components/CurrencyInput/CurrencyInput.stories.tsx

@@ -1,147 +0,0 @@
-import { Meta, StoryObj } from '@storybook/react-vite';
-import { useState } from 'react';
-import { CurrencyInput } from '..';
-import { VariantTitle } from '../../../docs/components';
-import { Flex } from '../Flex';
-
-const meta = {
-  title: 'Stories / CurrencyInput',
-  component: CurrencyInput,
-  parameters: {
-    layout: 'centered',
-  },
-  argTypes: {
-    placeholder: {
-      control: 'text',
-      description: 'The CurrencyInput field placeholder',
-      defaultValue: '0.00',
-    },
-    validationStatus: {
-      control: 'select',
-      options: ['initial', 'valid', 'invalid'],
-      description: 'The validation status',
-      defaultValue: 'initial',
-    },
-    label: {
-      control: 'text',
-      description: 'The label for the CurrencyInput',
-      defaultValue: 'Currency Input Label',
-    },
-    helperText: {
-      control: 'text',
-      description: 'The helper text for the CurrencyInput',
-      defaultValue: 'Supporting text',
-    },
-    labelVariant: {
-      control: 'radio',
-      options: ['heading', 'body'],
-      description: 'The label text variant',
-    },
-    helperIcon: {
-      control: 'object',
-      description: 'The helper icon component',
-    },
-    validText: {
-      control: 'text',
-      description: 'The valid text for the CurrencyInput',
-      defaultValue: 'Valid text',
-    },
-    invalidText: {
-      control: 'text',
-      description: 'The invalid text for the CurrencyInput',
-      defaultValue: 'Invalid text',
-    },
-    disabled: {
-      control: 'boolean',
-      description: 'Disable the input',
-      defaultValue: false,
-    },
-    readonly: {
-      control: 'boolean',
-      description: 'Read only',
-      defaultValue: false,
-    },
-    focused: {
-      control: 'boolean',
-      description: 'Focused',
-      defaultValue: false,
-    },
-    disableGroupSeparator: {
-      control: 'boolean',
-      description:
-        'Disable automatic adding of thousand separators while typing _(Formatting only works with controlled components via onChangeText)_',
-      defaultValue: false,
-    },
-  },
-  args: {
-    placeholder: '0.00',
-    validationStatus: 'initial',
-    disabled: false,
-    readonly: false,
-    focused: false,
-    disableGroupSeparator: false,
-  },
-} satisfies Meta<typeof CurrencyInput>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const Playground: Story = {
-  render: args => {
-    const [value, setValue] = useState('12345.67');
-    return <CurrencyInput {...args} value={value} onChangeText={setValue} />;
-  },
-};
-
-export const DisableGroupSeparator: Story = {
-  parameters: {
-    controls: { include: ['disableGroupSeparator'] },
-  },
-  args: { disableGroupSeparator: true },
-  render: args => {
-    const [value, setValue] = useState('12345.67');
-    return <CurrencyInput {...args} value={value} onChangeText={setValue} />;
-  },
-};
-
-export const States: Story = {
-  parameters: {
-    controls: { include: [] },
-  },
-  render: () => {
-    return (
-      <Flex direction="column" spacing="lg">
-        <VariantTitle title="Default">
-          <CurrencyInput />
-        </VariantTitle>
-        <VariantTitle title="With placeholder">
-          <CurrencyInput placeholder="0.00" />
-        </VariantTitle>
-        <VariantTitle title="Focused">
-          <CurrencyInput focused value="12.34" />
-        </VariantTitle>
-        <VariantTitle title="Valid">
-          <CurrencyInput validationStatus="valid" />
-        </VariantTitle>
-        <VariantTitle title="Invalid">
-          <CurrencyInput validationStatus="invalid" />
-        </VariantTitle>
-        <VariantTitle title="Valid - Focused">
-          <CurrencyInput validationStatus="valid" focused />
-        </VariantTitle>
-        <VariantTitle title="Invalid - Focused">
-          <CurrencyInput validationStatus="invalid" focused />
-        </VariantTitle>
-        <VariantTitle title="Disabled">
-          <CurrencyInput disabled />
-        </VariantTitle>
-        <VariantTitle title="Readonly">
-          <CurrencyInput readonly value="11666" />
-        </VariantTitle>
-        <VariantTitle title="Disable auto format thousands">
-          <CurrencyInput disableGroupSeparator value="1234.56" />
-        </VariantTitle>
-      </Flex>
-    );
-  },
-};

package/src/components/CurrencyInput/CurrencyInput.tsx

@@ -1,101 +0,0 @@
-import { Platform } from 'react-native';
-import { StyleSheet } from 'react-native-unistyles';
-import { formatThousands } from '../../utils';
-import { DetailText } from '../DetailText';
-import { Input, InputField, InputSlot } from '../Input';
-import type CurrencyInputProps from './CurrencyInput.props';
-
-const CurrencyInput = ({
-  validationStatus = 'initial',
-  disabled,
-  focused,
-  readonly,
-  placeholder,
-  inBottomSheet = false,
-  required = true,
-  disableGroupSeparator = false,
-  value,
-  onChangeText,
-  label,
-  labelVariant = 'body',
-  helperText,
-  helperIcon,
-  validText,
-  invalidText,
-  ref,
-  ...rest
-}: CurrencyInputProps) => {
-  const defaultFormat = '0.00';
-  const getPlaceholder = placeholder ?? defaultFormat;
-
-  const handleChangeText = (text: string) => {
-    if (!disableGroupSeparator) {
-      const formatted = formatThousands(text);
-      onChangeText?.(formatted);
-    } else {
-      onChangeText?.(text);
-    }
-  };
-
-  const displayValue =
-    !disableGroupSeparator && typeof value === 'string' ? formatThousands(value) : value;
-
-  return (
-    <Input
-      validationStatus={validationStatus}
-      disabled={disabled}
-      readonly={readonly}
-      focused={focused}
-      required={required}
-      style={styles.wrap}
-      label={label}
-      labelVariant={labelVariant}
-      helperText={helperText}
-      helperIcon={helperIcon}
-      validText={validText}
-      invalidText={invalidText}
-    >
-      <InputSlot>
-        <DetailText size="3xl" style={styles.text} accessible={false}>
-          £
-        </DetailText>
-      </InputSlot>
-      <InputField
-        ref={ref as any}
-        inputMode="decimal"
-        inBottomSheet={inBottomSheet}
-        accessibilityHint='Enter the amount in pounds and pence, for example "10.99"'
-        {...rest}
-        placeholder={getPlaceholder}
-        keyboardType="decimal-pad"
-        style={styles.input}
-        value={displayValue as any}
-        onChangeText={handleChangeText}
-      />
-    </Input>
-  );
-};
-
-CurrencyInput.displayName = 'CurrencyInput';
-const styles = StyleSheet.create(theme => ({
-  wrap: {
-    height: theme.components.input.currency.height,
-    gap: theme.components.input.currency.gap,
-  },
-  text: {
-    ...(Platform.OS === 'ios' && { lineHeight: 40 }),
-    _web: {
-      marginTop: 1,
-    },
-  },
-  input: {
-    fontSize: theme.typography.mobile.detailText['3xl'].fontSize,
-    fontFamily: theme.typography.mobile.detailText.fontFamily,
-    fontWeight: `${theme.typography.mobile.detailText.fontWeight}`,
-    paddingTop: 0,
-    paddingBottom: 0,
-    paddingLeft: 0,
-  },
-}));
-
-export default CurrencyInput;

package/src/components/CurrencyInput/index.ts

@@ -1 +0,0 @@
-export { default as CurrencyInput } from './CurrencyInput';