@utilitywarehouse/hearth-react-native 0.34.5 → 0.35.0

package/src/components/FormField/FormField.stories.tsx

@@ -1,134 +0,0 @@
-import { Meta, StoryObj } from '@storybook/react-vite';
-import * as Icons from '@utilitywarehouse/hearth-react-native-icons';
-import { FormField } from '.';
-import { VariantTitle } from '../../../docs/components';
-import { Flex } from '../Flex';
-import { Input } from '../Input';
-
-const meta = {
-  title: 'Stories / FormField',
-  component: FormField,
-  parameters: {
-    layout: 'centered',
-  },
-  argTypes: {
-    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,
-    },
-    label: {
-      control: 'text',
-      description: 'The label of the Input component',
-      defaultValue: 'Label',
-    },
-    labelVariant: {
-      control: 'radio',
-      options: ['heading', 'body'],
-      description: 'The label variant of the Input component',
-      defaultValue: 'body',
-    },
-    helperText: {
-      control: 'text',
-      description: 'The helper text of the Input component',
-      defaultValue: 'Helper text',
-    },
-    helperIcon: {
-      control: 'select',
-      options: ['none', ...Object.keys(Icons).filter(icon => icon.includes('Medium'))],
-      description: 'The helper text icon of the Input component',
-      defaultValue: 'none',
-    },
-
-    validText: {
-      control: 'text',
-      description: 'The valid text of the Input component',
-      defaultValue: 'Valid text',
-    },
-    invalidText: {
-      control: 'text',
-      description: 'The invalid text of the Input component',
-      defaultValue: 'Invalid text',
-    },
-  },
-  args: {
-    validationStatus: 'initial',
-    disabled: false,
-    label: 'Label',
-    labelVariant: 'body',
-    helperText: 'Helper text',
-    helperIcon: undefined,
-    validText: 'Valid text',
-    invalidText: 'Invalid error text',
-  },
-} satisfies Meta<typeof FormField>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const Playground: Story = {
-  render: ({ validationStatus, helperIcon: icon, ...props }) => {
-    // @ts-expect-error - This is a playground
-    const helperIcon = icon === 'none' ? undefined : Icons[icon];
-    return (
-      <FormField validationStatus={validationStatus} helperIcon={helperIcon} {...props}>
-        <Input />
-      </FormField>
-    );
-  },
-};
-
-export const Variants: Story = {
-  render: () => {
-    return (
-      <Flex direction="column" spacing="lg">
-        <VariantTitle title="Default">
-          <FormField label="Label">
-            <Input />
-          </FormField>
-        </VariantTitle>
-        <VariantTitle title="With helper text bottom">
-          <FormField label="Label" helperText="Helper text">
-            <Input />
-          </FormField>
-        </VariantTitle>
-        <VariantTitle title="With helper text top">
-          <FormField label="Label" helperText="Helper text">
-            <Input />
-          </FormField>
-        </VariantTitle>
-        <VariantTitle title="Valid with valid text">
-          <FormField
-            validationStatus="valid"
-            label="Label"
-            helperText="Helper text"
-            validText="Valid form field text"
-          >
-            <Input />
-          </FormField>
-        </VariantTitle>
-        <VariantTitle title="Invalid with invalid text">
-          <FormField
-            validationStatus="invalid"
-            label="Label"
-            helperText="Helper Text"
-            invalidText="Invalid form field text"
-          >
-            <Input />
-          </FormField>
-        </VariantTitle>
-        <VariantTitle title="Disabled">
-          <FormField disabled label="Label" helperText="Helper text">
-            <Input />
-          </FormField>
-        </VariantTitle>
-      </Flex>
-    );
-  },
-};

package/src/components/FormField/FormField.tsx

@@ -1,123 +0,0 @@
-import { createFormControl } from '@gluestack-ui/form-control';
-import { useMemo, useState } from 'react';
-import { View } from 'react-native';
-import { BodyText } from '../BodyText';
-import { HelperIcon, HelperText } from '../Helper';
-import { FormFieldContext } from './FormField.context';
-import FormFieldProps from './FormField.props';
-import FormFieldHelperComponent from './FormFieldHelper';
-import {
-  default as FormFieldInvalid,
-  default as FormFieldInvalidComponent,
-} from './FormFieldInvalid';
-import FormFieldLabelComponent from './FormFieldLabel';
-import FormFieldRoot from './FormFieldRoot';
-import FormFieldValid from './FormFieldValid';
-import FormFieldInvalidIcon from './FormFielInvalidIcon';
-
-export const FormFieldComponent = createFormControl({
-  Root: FormFieldRoot,
-  Error: FormFieldInvalidComponent,
-  ErrorText: FormFieldInvalid,
-  ErrorIcon: FormFieldInvalidIcon,
-  Label: () => null,
-  LabelText: FormFieldLabelComponent,
-  LabelAstrick: () => null,
-  Helper: FormFieldHelperComponent,
-  HelperText: HelperText,
-});
-
-export const FormFieldLabel = FormFieldComponent.Label;
-export const FormFieldLabelText = FormFieldComponent.Label.Text;
-export const FormFieldHelper = FormFieldComponent.Helper;
-export const FormFieldHelperText = FormFieldComponent.Helper.Text;
-export const FormFieldHelperIcon = HelperIcon;
-export const FormFieldValidText = HelperText;
-export const FormFieldInvalidText = HelperText;
-export const FormFieldTextContent = View;
-
-const FormField = ({
-  children,
-  disabled,
-  validationStatus = 'initial',
-  readonly,
-  label,
-  helperText,
-  helperIcon,
-  validText,
-  invalidText,
-  required = true,
-  labelVariant = 'body',
-  accessibilityHandledByChildren = false,
-  ...props
-}: FormFieldProps) => {
-  const [shouldHandleAccessibility, setShouldHandleAccessibility] = useState<boolean>(
-    accessibilityHandledByChildren
-  );
-  const value = useMemo(
-    () => ({
-      validationStatus,
-      disabled,
-      readonly,
-      required,
-      label,
-      helperText,
-      helperIcon,
-      validText,
-      invalidText,
-      setShouldHandleAccessibility,
-      shouldHandleAccessibility,
-    }),
-    [
-      validationStatus,
-      disabled,
-      readonly,
-      required,
-      label,
-      helperText,
-      helperIcon,
-      validText,
-      invalidText,
-      setShouldHandleAccessibility,
-      shouldHandleAccessibility,
-    ]
-  );
-
-  return (
-    <FormFieldContext.Provider value={value}>
-      <FormFieldComponent {...props} isDisabled={disabled} isReadOnly={readonly}>
-        {(!!label || !!helperText) && (
-          <FormFieldTextContent>
-            {!!label && (
-              <FormFieldLabelText
-                variant={labelVariant}
-                importantForAccessibility={shouldHandleAccessibility ? 'no' : undefined}
-                accessibilityElementsHidden={shouldHandleAccessibility}
-              >
-                {label}
-                {!required ? <BodyText weight="regular"> (Optional)</BodyText> : ''}
-              </FormFieldLabelText>
-            )}
-            {!!helperText && (
-              <FormFieldHelper
-                text={helperText}
-                icon={helperIcon}
-                showIcon={!!helperIcon}
-                importantForAccessibility={shouldHandleAccessibility ? 'no' : undefined}
-                accessibilityElementsHidden={shouldHandleAccessibility}
-              />
-            )}
-          </FormFieldTextContent>
-        )}
-        {children}
-
-        {!!validText && <FormFieldValid text={validText} />}
-        {!!invalidText && <FormFieldInvalidComponent text={invalidText} />}
-      </FormFieldComponent>
-    </FormFieldContext.Provider>
-  );
-};
-
-FormField.displayName = 'FormField';
-
-export default FormField;

package/src/components/FormField/FormFieldHelper.tsx

@@ -1,23 +0,0 @@
-import { useFormFieldContext } from './FormField.context';
-import { Helper } from '../Helper';
-import HelperProps from '../Helper/Helper.props';
-
-const FormFieldHelper = ({
-  children,
-  icon,
-  text,
-  ...props
-}: Omit<HelperProps, 'validationStatus'>) => {
-  const { disabled } = useFormFieldContext();
-  return children ? (
-    <Helper disabled={disabled} {...props}>
-      {children}
-    </Helper>
-  ) : (
-    <Helper disabled={disabled} icon={icon} text={text} {...props} />
-  );
-};
-
-FormFieldHelper.displayName = 'FormFieldHelper';
-
-export default FormFieldHelper;

package/src/components/FormField/FormFieldInvalid.tsx

@@ -1,33 +0,0 @@
-import { useFormFieldContext } from './FormField.context';
-import { Helper } from '../Helper';
-import HelperProps from '../Helper/Helper.props';
-import { ErrorCircleSmallIcon } from '@utilitywarehouse/hearth-react-native-icons';
-
-const FormFieldInvalid = ({
-  children,
-  icon = ErrorCircleSmallIcon,
-  text,
-  ...props
-}: Omit<HelperProps, 'validationStatus'>) => {
-  const { validationStatus, disabled } = useFormFieldContext();
-  return validationStatus === 'invalid' ? (
-    children ? (
-      <Helper validationStatus="invalid" showIcon disabled={disabled} {...props}>
-        {children}
-      </Helper>
-    ) : (
-      <Helper
-        validationStatus="invalid"
-        showIcon
-        disabled={disabled}
-        icon={icon}
-        text={text}
-        {...props}
-      />
-    )
-  ) : null;
-};
-
-FormFieldInvalid.displayName = 'FormFieldInvalid';
-
-export default FormFieldInvalid;

package/src/components/FormField/FormFieldLabel.tsx

@@ -1,16 +0,0 @@
-import { Label } from '../Label';
-import LabelProps from '../Label/Label.props';
-import { useFormFieldContext } from './FormField.context';
-
-const FormFieldLabel = ({ children, ...props }: Omit<LabelProps, 'disabled'>) => {
-  const { disabled } = useFormFieldContext();
-  return (
-    <Label disabled={disabled} {...props}>
-      {children}
-    </Label>
-  );
-};
-
-FormFieldLabel.displayName = 'FormFieldLabel';
-
-export default FormFieldLabel;

package/src/components/FormField/FormFieldRoot.tsx

@@ -1,21 +0,0 @@
-import { StyleSheet } from 'react-native-unistyles';
-import { View, ViewProps } from 'react-native';
-
-const FormFieldRoot = ({ children, style, ...props }: ViewProps) => {
-  return (
-    <View {...props} style={[styles.container, style]}>
-      {children}
-    </View>
-  );
-};
-
-FormFieldRoot.displayName = 'FormFieldRoot';
-
-const styles = StyleSheet.create(theme => ({
-  container: {
-    flexDirection: 'column',
-    gap: theme.components.formField.gap,
-  },
-}));
-
-export default FormFieldRoot;

package/src/components/FormField/FormFieldValid.tsx

@@ -1,33 +0,0 @@
-import { TickCircleSmallIcon } from '@utilitywarehouse/hearth-react-native-icons';
-import { Helper } from '../Helper';
-import HelperProps from '../Helper/Helper.props';
-import { useFormFieldContext } from './FormField.context';
-
-const FormFieldValid = ({
-  children,
-  icon = TickCircleSmallIcon,
-  text,
-  ...props
-}: Omit<HelperProps, 'validationStatus'>) => {
-  const { validationStatus, disabled } = useFormFieldContext();
-  return validationStatus === 'valid' ? (
-    children ? (
-      <Helper validationStatus="valid" showIcon disabled={disabled} {...props}>
-        {children}
-      </Helper>
-    ) : (
-      <Helper
-        validationStatus="valid"
-        disabled={disabled}
-        showIcon
-        icon={icon}
-        text={text}
-        {...props}
-      />
-    )
-  ) : null;
-};
-
-FormFieldValid.displayName = 'FormFieldValid';
-
-export default FormFieldValid;

package/src/components/FormField/FormFieldValidIcon.tsx

@@ -1,11 +0,0 @@
-import { HelperIcon } from '../Helper';
-import IconProps from '../Icon/Icon.props';
-import { TickCircleSmallIcon } from '@utilitywarehouse/hearth-react-native-icons';
-
-const FormFieldValidIcon = (props: Omit<IconProps, 'as'>) => (
-  <HelperIcon as={TickCircleSmallIcon} {...props} />
-);
-
-FormFieldValidIcon.displayName = 'FormFieldValidIcon';
-
-export default FormFieldValidIcon;

package/src/components/FormField/index.ts

@@ -1,16 +0,0 @@
-export {
-  default as FormField,
-  FormFieldHelper,
-  FormFieldHelperText,
-  FormFieldLabel,
-  FormFieldLabelText,
-  FormFieldHelperIcon,
-  FormFieldValidText,
-  FormFieldInvalidText,
-  FormFieldTextContent,
-} from './FormField';
-export { default as FormFieldValidIcon } from './FormFieldValidIcon';
-export { default as FormFieldInvalidIcon } from './FormFielInvalidIcon';
-export { default as FormFieldValid } from './FormFieldValid';
-export { default as FormFieldInvalid } from './FormFieldInvalid';
-export { useFormFieldContext } from './FormField.context';

package/src/components/Grid/Grid.props.ts

@@ -1,62 +0,0 @@
-import { StyleProp, ViewProps, ViewStyle } from 'react-native';
-import { UnistylesBreakpoints } from 'react-native-unistyles';
-import { SpaceValue, SpacingValues } from '../../types';
-
-// Create a type that uses the keys from our breakpoints object
-export type GridColumns = {
-  [key in keyof UnistylesBreakpoints]?: number;
-};
-
-export interface GridProps extends ViewProps {
-  /**
-   * Number of columns or responsive object defining columns at different breakpoints
-   * @default 2
-   */
-  columns?: number | GridColumns;
-
-  /**
-   * Spacing between grid items (applies to both rows and columns)
-   */
-  spacing?: SpacingValues;
-
-  /**
-   * Spacing between grid items (applies to both rows and columns)
-   * @deprecated Use `spacing` instead. The `space` prop will be removed in a future release.
-   */
-  space?: SpacingValues;
-
-  /**
-   * Gap between items (overrides spacing if provided)
-   */
-  gap?: SpaceValue;
-
-  /**
-   * Gap between columns (overrides spacing if provided)
-   */
-  columnGap?: SpaceValue;
-
-  /**
-   * Gap between rows (overrides spacing if provided)
-   */
-  rowGap?: SpaceValue;
-
-  /**
-   * Style for the grid container
-   */
-  containerStyle?: StyleProp<ViewStyle>;
-
-  /**
-   * Style for each grid item
-   */
-  itemStyle?: StyleProp<ViewStyle>;
-
-  /**
-   * Style for each row
-   */
-  rowStyle?: StyleProp<ViewStyle>;
-
-  /**
-   * Grid items
-   */
-  children?: ViewProps['children'];
-}

package/src/components/Grid/Grid.stories.tsx

@@ -1,199 +0,0 @@
-import { Meta, StoryObj } from '@storybook/react-vite';
-import { Text, View } from 'react-native';
-import { Grid } from '.';
-
-const meta = {
-  title: 'Stories / Grid',
-  component: Grid,
-  parameters: {
-    layout: 'centered',
-  },
-  argTypes: {
-    columns: {
-      control: 'object',
-      description: 'Number of columns or responsive object with breakpoints',
-    },
-    spacing: {
-      options: ['none', '2xs', 'xs', 'sm', 'md', 'lg', 'xl', '2xl'],
-      control: 'radio',
-      description: 'Responsive spacing between grid items (applied to both rows and columns).',
-    },
-    gap: {
-      control: 'number',
-      description: 'Spacing between grid items (applied to both rows and columns)',
-    },
-    columnGap: {
-      control: 'number',
-      description: 'Column gap between items',
-    },
-    rowGap: {
-      control: 'number',
-      description: 'Row gap between items',
-    },
-  },
-  args: {
-    columns: 2,
-    spacing: 'md',
-  },
-} satisfies Meta<typeof Grid>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-// GridItem component to use in examples
-const GridItem = ({
-  color = '#e0e0e0',
-  height = 100,
-  children,
-}: {
-  color?: string;
-  height?: number;
-  children?: React.ReactNode;
-}) => (
-  <View
-    style={{
-      backgroundColor: color,
-      height,
-      justifyContent: 'center',
-      alignItems: 'center',
-      borderRadius: 4,
-      padding: 16,
-    }}
-  >
-    {children ?? <Text>Grid Item</Text>}
-  </View>
-);
-
-export const Playground: Story = {
-  parameters: {
-    controls: {
-      include: [
-        'columns',
-        'spacing',
-        'gap',
-        'columnGap',
-        'rowGap',
-        'style',
-        'containerStyle',
-        'itemStyle',
-      ],
-    },
-  },
-  args: {
-    columns: 2,
-    spacing: 'md',
-  },
-  render: args => (
-    <Grid {...args} style={{ width: 400 }}>
-      <GridItem color="#FFD6D6" />
-      <GridItem color="#D6FFD6" />
-      <GridItem color="#D6D6FF" />
-      <GridItem color="#FFFFD6" />
-      <GridItem color="#FFD6FF" />
-      <GridItem color="#D6FFFF" />
-    </Grid>
-  ),
-};
-
-export const ThreeColumns: Story = {
-  args: {
-    columns: 3,
-    spacing: 'md',
-  },
-  render: args => (
-    <Grid {...args} style={{ width: 500 }}>
-      <GridItem color="#FFD6D6" />
-      <GridItem color="#D6FFD6" />
-      <GridItem color="#D6D6FF" />
-      <GridItem color="#FFFFD6" />
-      <GridItem color="#FFD6FF" />
-      <GridItem color="#D6FFFF" />
-      <GridItem color="#E6D6FF" />
-      <GridItem color="#FFE6D6" />
-      <GridItem color="#D6FFE6" />
-    </Grid>
-  ),
-};
-
-export const ResponsiveColumns: Story = {
-  args: {
-    columns: {
-      xs: 1,
-      sm: 2,
-      md: 3,
-      lg: 4,
-      xl: 5,
-    },
-    spacing: 'md',
-  },
-  render: args => (
-    <Grid {...args} style={{ width: '100%' }}>
-      <GridItem color="#FFD6D6" />
-      <GridItem color="#D6FFD6" />
-      <GridItem color="#D6D6FF" />
-      <GridItem color="#FFFFD6" />
-      <GridItem color="#FFD6FF" />
-      <GridItem color="#D6FFFF" />
-      <GridItem color="#E6D6FF" />
-      <GridItem color="#FFE6D6" />
-      <GridItem color="#D6FFE6" />
-      <GridItem color="#FFD6D6" />
-    </Grid>
-  ),
-};
-
-export const DifferentSizes: Story = {
-  args: {
-    columns: 3,
-    spacing: 'sm',
-  },
-  render: args => (
-    <Grid {...args} style={{ width: 500 }}>
-      <GridItem color="#FFD6D6" height={80} />
-      <GridItem color="#D6FFD6" height={120} />
-      <GridItem color="#D6D6FF" height={100} />
-      <GridItem color="#FFFFD6" height={150} />
-      <GridItem color="#FFD6FF" height={90} />
-      <GridItem color="#D6FFFF" height={110} />
-    </Grid>
-  ),
-};
-
-export const CustomGaps: Story = {
-  args: {
-    columns: 2,
-    columnGap: 24,
-    rowGap: 16,
-  },
-  render: args => (
-    <Grid {...args} style={{ width: 400 }}>
-      <GridItem color="#FFD6D6" />
-      <GridItem color="#D6FFD6" />
-      <GridItem color="#D6D6FF" />
-      <GridItem color="#FFFFD6" />
-    </Grid>
-  ),
-};
-
-export const WithContent: Story = {
-  args: {
-    columns: 2,
-    spacing: 'md',
-  },
-  render: args => (
-    <Grid {...args} style={{ width: 400 }}>
-      <GridItem color="#FFD6D6">
-        <Text>Item 1</Text>
-      </GridItem>
-      <GridItem color="#D6FFD6">
-        <Text>Item 2</Text>
-      </GridItem>
-      <GridItem color="#D6D6FF">
-        <Text>Item 3</Text>
-      </GridItem>
-      <GridItem color="#FFFFD6">
-        <Text>Item 4</Text>
-      </GridItem>
-    </Grid>
-  ),
-};