@utilitywarehouse/hearth-react-native 0.34.5 → 0.35.1

package/src/components/Radio/RadioGroup.figma.tsx

@@ -1,82 +0,0 @@
-import figma from '@figma/code-connect';
-import { RadioGroup } from '../';
-
-const props = {
-  validationStatus: figma.enum('State', {
-    Invalid: 'invalid',
-  }),
-  labelVariant: figma.enum('Label variant', {
-    Body: 'body',
-    Heading: 'heading',
-  }),
-  direction: figma.enum('Direction', {
-    Row: 'row',
-  }),
-  label: figma.string('Group label'),
-  helperText: figma.boolean('Helper text?', {
-    true: figma.string('Helper text'),
-  }),
-  invalidText: figma.enum('State', {
-    Invalid: figma.string('Validation text'),
-  }),
-};
-
-const value = '';
-const setValue = (value: string) => {};
-
-figma.connect(
-  RadioGroup,
-  'https://www.figma.com/design/6NKZXZhFSExXrcbBgc6zTR/Hearth-Components---Tokens?node-id=3138-13254&t=Uq6QfQcygdNGv5lM-4',
-  {
-    variant: {
-      Content: 'Radio',
-    },
-    props: {
-      ...props,
-      items: figma.children('Radio'),
-    },
-    example: props => (
-      <RadioGroup
-        label={props.label}
-        helperText={props.helperText}
-        validationStatus={props.validationStatus}
-        labelVariant={props.labelVariant}
-        direction={props.direction}
-        invalidText={props.invalidText}
-        value={value}
-        onChange={value => setValue(value)}
-      >
-        {props.items}
-      </RadioGroup>
-    ),
-  }
-);
-
-figma.connect(
-  RadioGroup,
-  'https://www.figma.com/design/6NKZXZhFSExXrcbBgc6zTR/Hearth-Components---Tokens?node-id=3138-13254&t=Uq6QfQcygdNGv5lM-4',
-  {
-    variant: {
-      Content: 'Radio Tile',
-    },
-    props: {
-      ...props,
-      items: figma.children('Radio Tile'),
-    },
-    example: props => (
-      <RadioGroup
-        label={props.label}
-        helperText={props.helperText}
-        validationStatus={props.validationStatus}
-        labelVariant={props.labelVariant}
-        direction={props.direction}
-        invalidText={props.invalidText}
-        type="tile"
-        value={value}
-        onChange={value => setValue(value)}
-      >
-        {props.items}
-      </RadioGroup>
-    ),
-  }
-);

package/src/components/Radio/RadioGroup.props.ts

@@ -1,23 +0,0 @@
-import { ComponentType } from 'react';
-import { ViewProps } from 'react-native';
-import { space } from '../../tokens';
-
-interface RadioGroupProps extends ViewProps {
-  disabled?: boolean;
-  value?: string;
-  onChange?: (value: string) => void;
-  readonly?: boolean;
-  validationStatus?: 'valid' | 'invalid' | 'initial';
-  label?: string;
-  labelVariant?: 'heading' | 'body';
-  helperText?: string;
-  showValidationIcon?: boolean;
-  invalidText?: string;
-  validText?: string;
-  helperIcon?: ComponentType;
-  type?: 'default' | 'tile';
-  direction?: 'row' | 'column';
-  gap?: keyof typeof space;
-}
-
-export default RadioGroupProps;

package/src/components/Radio/RadioGroup.stories.tsx

@@ -1,131 +0,0 @@
-import { Meta, StoryObj } from '@storybook/react-vite';
-import { Radio, RadioGroup } from '.';
-import { Grid } from '../Grid';
-
-const meta = {
-  title: 'Stories / RadioGroup',
-  component: RadioGroup,
-  parameters: {
-    layout: 'centered',
-  },
-  argTypes: {
-    disabled: {
-      type: 'boolean',
-      control: 'boolean',
-      description: 'To manually set disable to the radio group.',
-    },
-    label: {
-      type: 'string',
-      control: 'text',
-      description: 'The label component for the radio group.',
-    },
-    labelVariant: {
-      control: 'radio',
-      options: ['heading', 'body'],
-      description: 'The variant of the label text.',
-    },
-    helperText: {
-      type: 'string',
-      control: 'text',
-      description: 'The helper text of the radio group component',
-      defaultValue: 'Helper text',
-    },
-    validationStatus: {
-      control: 'select',
-      options: ['initial', 'valid', 'invalid'],
-      description: 'The validation status of the radio group component',
-      defaultValue: 'initial',
-    },
-    showValidationIcon: {
-      control: 'boolean',
-      description: 'Show the validation icon.',
-      defaultValue: true,
-    },
-    invalidText: {
-      control: 'text',
-      description: 'The invalid text of the radio group component',
-      defaultValue: 'Invalid text',
-    },
-    type: {
-      control: 'select',
-      options: ['default', 'tile'],
-      description: 'The type of the radio group component',
-      defaultValue: 'default',
-    },
-  },
-  args: {
-    disabled: false,
-    label: 'Group label',
-    labelVariant: 'body',
-    helperText: 'Supporting text',
-    validationStatus: 'initial',
-    showValidationIcon: true,
-    invalidText: 'Invalid text',
-    validText: 'Valid text',
-    type: 'default',
-  },
-} satisfies Meta<typeof RadioGroup>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const Playground: Story = {
-  args: {
-    value: 'Option 1',
-  },
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  render: ({ value: _, ...args }) => (
-    <RadioGroup {...args}>
-      <Radio aria-label="Label 1" label="Option 1" value="Option 1" nativeID="Radio-1" />
-      <Radio
-        aria-label="Label 2"
-        label="Option 2 (with added option)"
-        value="Option 2"
-        nativeID="Radio-2"
-      />
-      <Radio aria-label="Label 3" label="Option 3" value="Option 3" nativeID="Radio-3" />
-    </RadioGroup>
-  ),
-};
-
-export const WithGrid: Story = {
-  args: {
-    value: 'Option 1',
-    type: 'tile',
-  },
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  render: ({ value: _, ...args }) => (
-    <RadioGroup {...args}>
-      <Grid columns={2} spacing="md">
-        <Radio aria-label="Label 1" label="Option 1" value="Option 1" nativeID="Radio-1" />
-        <Radio
-          aria-label="Label 2 (with added option)"
-          label="Option 2"
-          value="Option 2"
-          nativeID="Radio-2"
-        />
-        <Radio aria-label="Label 3" label="Option 3" value="Option 3" nativeID="Radio-3" />
-        <Radio aria-label="Label 4" label="Option 4" value="Option 4" nativeID="Radio-4" />
-        <Radio aria-label="Label 5" label="Option 5" value="Option 5" nativeID="Radio-5" />
-      </Grid>
-    </RadioGroup>
-  ),
-};
-
-export const LongContent: Story = {
-  args: {
-    type: 'tile',
-  },
-  render: args => (
-    <RadioGroup {...args}>
-      <Radio aria-label="Label 1" label="Option 1" value="Option 1" nativeID="Radio-1" />
-      <Radio
-        aria-label="Label 2"
-        label="Option 2 with a very long content that spans multiple lines to test text wrapping"
-        value="Option 2"
-        nativeID="Radio-2"
-      />
-      <Radio aria-label="Label 3" label="Option 3" value="Option 3" nativeID="Radio-3" />
-    </RadioGroup>
-  ),
-};

package/src/components/Radio/RadioGroup.tsx

@@ -1,113 +0,0 @@
-import React, { useMemo } from 'react';
-import { View } from 'react-native';
-import { StyleSheet } from 'react-native-unistyles';
-import { Helper } from '../Helper';
-import { Label } from '../Label';
-import { RadioGroup as RadioGroupComponent } from './Radio';
-import { RadioGroupContext } from './RadioGroup.context';
-import RadioGroupProps from './RadioGroup.props';
-import RadioGroupTextContent from './RadioGroupTextContent';
-
-const RadioGroup = ({
-  children,
-  disabled,
-  readonly,
-  validationStatus,
-  label,
-  labelVariant = 'body',
-  helperText,
-  invalidText,
-  validText,
-  showValidationIcon = true,
-  helperIcon,
-  type,
-  direction = 'column',
-  gap,
-  ...props
-}: RadioGroupProps) => {
-  const value = useMemo(
-    () => ({ disabled, validationStatus, type, direction }),
-    [disabled, validationStatus, type, direction]
-  );
-  const showHeader = !!label || !!helperText || !!invalidText || !!validText;
-  const childrenArray = React.Children.toArray(children as any);
-  const childIsCard =
-    type === 'tile' ||
-    childrenArray.some(
-      child =>
-        React.isValidElement(child) &&
-        // @ts-expect-error - child.type is not typed
-        (child.props.type === 'tile' || child.type.displayName === 'RadioTile')
-    );
-  styles.useVariants({ type: childIsCard ? 'tile' : 'radio', direction });
-  return (
-    <RadioGroupContext.Provider value={value}>
-      <RadioGroupComponent
-        {...props}
-        isDisabled={disabled}
-        isReadOnly={readonly}
-        isCard={childIsCard}
-      >
-        {showHeader && (
-          <RadioGroupTextContent>
-            {!!label && (
-              <Label disabled={disabled} variant={labelVariant}>
-                {label}
-              </Label>
-            )}
-            {!!helperText && <Helper disabled={disabled} icon={helperIcon} text={helperText} />}
-            {validationStatus === 'invalid' && !!invalidText && (
-              <Helper
-                showIcon={showValidationIcon}
-                disabled={disabled}
-                validationStatus="invalid"
-                text={invalidText}
-              />
-            )}
-            {validationStatus === 'valid' && !!validText && (
-              <Helper
-                disabled={disabled}
-                showIcon={showValidationIcon}
-                validationStatus="valid"
-                text={validText}
-              />
-            )}
-          </RadioGroupTextContent>
-        )}
-        <View style={[styles.container, styles.containerGap(gap)]}>{children}</View>
-      </RadioGroupComponent>
-    </RadioGroupContext.Provider>
-  );
-};
-
-const styles = StyleSheet.create(theme => ({
-  container: {
-    alignItems: 'stretch',
-    variants: {
-      type: {
-        radio: {
-          gap: theme.components.radio.group.stack.gap,
-        },
-        tile: {
-          gap: theme.components.radio.tile.group.stack.gap,
-        },
-      },
-      direction: {
-        column: {
-          flexDirection: 'column',
-        },
-        row: {
-          flexDirection: 'row',
-          flexWrap: 'wrap',
-        },
-      },
-    },
-  },
-  containerGap: (gap: RadioGroupProps['gap']) => ({
-    ...(gap ? { gap: theme.space[gap] } : {}),
-  }),
-}));
-
-RadioGroup.displayName = 'RadioGroup';
-
-export default RadioGroup;

package/src/components/Radio/RadioGroupRoot.tsx

@@ -1,36 +0,0 @@
-import { StyleSheet } from 'react-native-unistyles';
-import { View } from 'react-native';
-import RadioGroupProps from './RadioGroup.props';
-
-const RadioGroupRoot = ({
-  children,
-  style,
-  isCard = false,
-  ...props
-}: RadioGroupProps & { isCard?: boolean }) => {
-  styles.useVariants({ type: isCard ? 'tile' : 'radio' });
-  return (
-    <View {...props} style={[styles.container, style]}>
-      {children}
-    </View>
-  );
-};
-
-RadioGroupRoot.displayName = 'RadioGroupRoot';
-
-const styles = StyleSheet.create(theme => ({
-  container: {
-    variants: {
-      type: {
-        tile: {
-          gap: theme.components.radio.tile.group.gap,
-        },
-        radio: {
-          gap: theme.components.radio.group.gap,
-        },
-      },
-    },
-  },
-}));
-
-export default RadioGroupRoot;

package/src/components/Radio/RadioGroupTextContent.tsx

@@ -1,14 +0,0 @@
-import { Flex } from '../Flex';
-import FlexProps from '../Flex/Flex.props';
-
-const RadioGroupTextContent = ({ children, ...props }: FlexProps) => {
-  return (
-    <Flex direction="column" spacing="none" {...props}>
-      {children}
-    </Flex>
-  );
-};
-
-RadioGroupTextContent.displayName = 'RadioGroupTextContent';
-
-export default RadioGroupTextContent;

package/src/components/Radio/RadioIcon.tsx

@@ -1,37 +0,0 @@
-import { Platform, StyleProp, ViewStyle } from 'react-native';
-import { StyleSheet } from 'react-native-unistyles';
-import { Icon } from '../Icon';
-import IconProps from '../Icon/Icon.props';
-import { CircleIcon } from '../Icons';
-
-const RadioIcon = ({ style, ...props }: IconProps) => {
-  return (
-    <Icon
-      as={CircleIcon}
-      {...props}
-      style={
-        Platform.OS === 'web'
-          ? {
-              // @ts-expect-error - style prop type issue
-              ...(styles.container as StyleProp<ViewStyle>),
-              // @ts-expect-error - style prop type issue
-              ...(props.style as StyleProp<ViewStyle>),
-            }
-          : ([styles.container, style] as any)
-      }
-    />
-  );
-};
-
-RadioIcon.displayName = 'RadioIcon';
-
-const styles = StyleSheet.create(theme => ({
-  container: {
-    width: 14,
-    height: 14,
-    borderRadius: theme.components.radio.borderRadius,
-    color: theme.components.radio.checked.color,
-  },
-}));
-
-export default RadioIcon;

package/src/components/Radio/RadioImage.figma.tsx

@@ -1,27 +0,0 @@
-import React from "react"
-import RadioImage from "./RadioImage"
-import figma from "@figma/code-connect"
-
-/**
- * -- This file was auto-generated by Code Connect --
- * None of your props could be automatically mapped to Figma properties.
- * You should update the `props` object to include a mapping from your
- * code props to Figma properties, and update the `example` function to
- * return the code example you'd like to see in Figma
- */
-
-figma.connect(
-  RadioImage,
-  "https://www.figma.com/design/6NKZXZhFSExXrcbBgc6zTR?node-id=7428%3A8535",
-  {
-    props: {
-      // No matching props could be found for these Figma properties:
-      // "customContent": figma.instance('Custom content'),
-      // "variant": figma.enum('Variant', {
-      //   "Bank logo": "bank-logo",
-      //   "Custom": "custom"
-      // })
-    },
-    example: (props) => <RadioImage />,
-  },
-)

package/src/components/Radio/RadioImage.tsx

@@ -1,14 +0,0 @@
-import { Image, ImageProps } from 'react-native';
-import { isThemedImageProps } from '../../utils';
-import { ThemedImage, ThemedImageProps } from '../ThemedImage';
-
-const RadioImage = ({ ...props }: ImageProps | ThemedImageProps) => {
-  if (isThemedImageProps(props)) {
-    return <ThemedImage {...props} />;
-  }
-  return <Image {...props} />;
-};
-
-RadioImage.displayName = 'RadioImage';
-
-export default RadioImage;

package/src/components/Radio/RadioIndicator.tsx

@@ -1,63 +0,0 @@
-import { View, ViewProps } from 'react-native';
-import { StyleSheet } from 'react-native-unistyles';
-import { useRadioContext } from './Radio.context';
-
-const RadioIndicator = (props: ViewProps) => {
-  const { checked, active } = useRadioContext();
-  styles.useVariants({
-    checked,
-    active,
-  });
-  return (
-    <View {...props} style={[styles.container, props.style]}>
-      {props.children}
-    </View>
-  );
-};
-
-const styles = StyleSheet.create(theme => ({
-  outline: {
-    alignSelf: 'flex-start',
-  },
-  container: {
-    justifyContent: 'center',
-    alignItems: 'center',
-    backgroundColor: theme.color.surface.neutral.strong,
-    borderColor: theme.color.border.strong,
-    borderWidth: theme.components.radio.borderWidth,
-    borderRadius: theme.components.radio.borderRadius,
-    width: 24,
-    height: 24,
-    outlineWidth: theme.components.radio.outlineWidth,
-    outlineStyle: 'solid',
-    outlineColor: 'transparent',
-    _web: {
-      _hover: {
-        outlineColor: theme.components.radio.outlineColorHover,
-      },
-      // '_focus-within': {
-      //   ...theme.helpers.focusVisible,
-      // },
-      _active: {
-        outlineColor: theme.components.radio.outlineColorActive,
-      },
-    },
-    variants: {
-      checked: {
-        true: {
-          borderColor: theme.components.radio.checked.color,
-          backgroundColor: 'transparent',
-        },
-      },
-      active: {
-        true: {
-          outlineColor: theme.components.radio.outlineColorActive,
-        },
-      },
-    },
-  },
-}));
-
-RadioIndicator.displayName = 'RadioIndicator';
-
-export default RadioIndicator;

package/src/components/Radio/RadioLabel.tsx

@@ -1,14 +0,0 @@
-import { Label } from '../Label';
-import LabelProps from '../Label/Label.props';
-
-const RadioLabel = ({ children, ...props }: LabelProps) => {
-  return (
-    <Label nested {...props}>
-      {children}
-    </Label>
-  );
-};
-
-RadioLabel.displayName = 'RadioLabel';
-
-export default RadioLabel;

package/src/components/Radio/RadioRoot.tsx

@@ -1,65 +0,0 @@
-import { useMemo } from 'react';
-import { StyleSheet } from 'react-native-unistyles';
-
-import { Pressable, ViewStyle } from 'react-native';
-import { RadioContext } from './Radio.context';
-import type RadioProps from './Radio.props';
-import { useRadioGroupContext } from './RadioGroup.context';
-
-const RadioRoot = ({
-  children,
-  style,
-  states,
-  ...props
-}: RadioProps & { states?: { disabled?: boolean; checked?: boolean; active?: boolean } }) => {
-  const { disabled, checked, active } = states ?? {};
-
-  const isDisabled = useRadioGroupContext()?.disabled ?? disabled;
-
-  styles.useVariants({ disabled: isDisabled });
-
-  const value = useMemo(
-    () => ({
-      disabled: isDisabled,
-      checked,
-      active,
-    }),
-    [isDisabled, checked, active]
-  );
-
-  return (
-    <RadioContext.Provider value={value}>
-      <Pressable {...props} style={[styles.container, style as ViewStyle]}>
-        {children}
-      </Pressable>
-    </RadioContext.Provider>
-  );
-};
-
-RadioRoot.displayName = 'RadioRoot';
-
-const styles = StyleSheet.create(theme => ({
-  container: {
-    flexDirection: 'row',
-    alignItems: 'stretch',
-    gap: theme.components.radio.gap,
-    alignSelf: 'stretch',
-    variants: {
-      disabled: {
-        true: {
-          opacity: theme.opacity.disabled,
-        },
-      },
-    },
-    _web: {
-      '_focus-visible': {
-        outline: 'none',
-      },
-      '_focus-visible > div:nth-child(2)': {
-        ...theme.helpers.focusVisible,
-      },
-    },
-  },
-}));
-
-export default RadioRoot;

package/src/components/Radio/RadioTextContent.tsx

@@ -1,21 +0,0 @@
-import { StyleSheet } from 'react-native-unistyles';
-import { Flex } from '../Flex';
-import FlexProps from '../Flex/Flex.props';
-
-const RadioTextContent = ({ children, style, ...props }: FlexProps) => {
-  return (
-    <Flex direction="column" spacing="none" style={[styles.content, style]} {...props}>
-      {children}
-    </Flex>
-  );
-};
-
-const styles = StyleSheet.create({
-  content: {
-    flexShrink: 1,
-  },
-});
-
-RadioTextContent.displayName = 'RadioTextContent';
-
-export default RadioTextContent;

package/src/components/Radio/RadioTile.figma.tsx

@@ -1,38 +0,0 @@
-import figma from '@figma/code-connect';
-import { RadioTile } from '../';
-
-figma.connect(
-  RadioTile,
-  'https://www.figma.com/design/6NKZXZhFSExXrcbBgc6zTR/Hearth-Components---Tokens?node-id=3138-13222&t=Uq6QfQcygdNGv5lM-4',
-  {
-    props: {
-      helperText: figma.boolean('Helper text?', {
-        true: figma.string('Helper text'),
-      }),
-      badge: figma.boolean('Badge?', {
-        true: figma.children('Badge'),
-      }),
-      label: figma.string('Label'),
-      image: figma.boolean('Image?', {
-        true: figma.instance('Radio Image'),
-      }),
-      checked: figma.boolean('Checked?'),
-      indicator: figma.nestedProps('Radio Item', {
-        disabled: figma.enum('State', {
-          Disabled: true,
-        }),
-      }),
-    },
-    example: props => (
-      <RadioTile
-        label={props.label}
-        helperText={props.helperText}
-        badge={props.badge}
-        image={props.image}
-        checked={props.checked}
-        disabled={props.indicator.disabled}
-        value="someValue"
-      />
-    ),
-  }
-);