@utilitywarehouse/hearth-react-native 0.2.0 → 0.3.1

package/src/components/Radio/Radio.docs.mdx

@@ -1,22 +1,20 @@
-import { Meta, Canvas, Story, Controls } from '@storybook/addon-docs/blocks';
-import * as Stories from './Radio.stories';
+import { Canvas, Controls, Meta, Story } from '@storybook/addon-docs/blocks';
+import { TickSmallIcon } from '@utilitywarehouse/hearth-react-native-icons';
 import {
+  Box,
+  Center,
   Radio,
   RadioGroup,
-  RadioIndicator,
   RadioIcon,
+  RadioImage,
+  RadioIndicator,
   RadioLabel,
-  Center,
-  Box,
   RadioTile,
 } from '../../';
-import { TickSmallIcon } from '@utilitywarehouse/hearth-react-native-icons';
-import {
-  ViewFigmaButton,
-  BackToTopButton,
-  UsageWrap,
-  AdvancedRadioExample,
-} from '../../../docs/components';
+import mastercardLogo from '../../../docs/assets/bank-logo.png';
+import visaLogo from '../../../docs/assets/bank-logo1.png';
+import { BackToTopButton, UsageWrap, ViewFigmaButton } from '../../../docs/components';
+import * as Stories from './Radio.stories';
 
 <Meta title="Forms / Radio" />
 
@@ -38,10 +36,12 @@ The Radio component presents users with predefined choices and enables them to s
   - [`RadioIcon`](#radioicon)
   - [`RadioLabel`](#radiolabel)
   - [`RadioGroup`](#radiogroup)
+  - [`RadioImage`](#radioimage)
 - [Variants](#variants)
 - [Advanced Usage](#advanced-usage)
 - [Examples](#examples)
   - [`RadioTile` component](#radiotile-component)
+  - [`RadioImage` component](#radioimage-component)
   - [`RadioGroup` component](#radiogroup-component)
 
 ## Playground
@@ -104,6 +104,7 @@ const MyComponent = () => {
 | `validText`          | `string`                            | -         | The valid text to be displayed below the radio.                                                      |
 | `showValidationIcon` | `boolean`                           | `true`    | Whether to show the validation icon.                                                                 |
 | `type`               | `'default' \| 'tile'`               | `default` | The type of the radio.                                                                               |
+| `image`              | `ImageProps`                        | -         | The image to be displayed next to the label.                                                         |
 
 ## Components
 
@@ -147,6 +148,10 @@ Contains all Group related layout style props and actions. It inherits all the p
 | `direction`          | `'row' \| 'column'`                 | `column`  | The direction of the radio group.                                   |
 | `gap`                | `string`                            | -         | The gap between the radio group items.                              |
 
+### `RadioImage`
+
+Contains all Image related layout style props and actions. It inherits all the properties of React Native's [Image component](https://reactnative.dev/docs/image).
+
 ## Variants
 
 <Canvas of={Stories.Variants} />
@@ -158,133 +163,65 @@ In this example, we will create a custom Radio component with a badge and bullet
 
 <UsageWrap>
   <Center>
-    <AdvancedRadioExample />
+    <RadioGroup type="tile" aria-label="Radio Group" nativeID="Radio-group">
+      <Radio value="option-1" aria-label="Label 1">
+        <RadioIndicator>
+          <RadioIcon />
+        </RadioIndicator>
+        <RadioImage source={visaLogo} style={{ width: 40, height: 24, resizeMode: 'contain' }} />
+        <RadioLabel>Visa</RadioLabel>
+      </Radio>
+      <Radio value="option-2" aria-label="Label 2">
+        <RadioIndicator>
+          <RadioIcon />
+        </RadioIndicator>
+        <RadioImage
+          source={mastercardLogo}
+          style={{ width: 40, height: 24, resizeMode: 'contain' }}
+        />
+        <RadioLabel>Mastercard</RadioLabel>
+      </Radio>
+    </RadioGroup>
   </Center>
 </UsageWrap>
 
 ```tsx
 import {
-  Badge,
-  Heading,
   Radio,
   RadioGroup,
-  RadioIcon,
+  RadioLabel,
   RadioIndicator,
-  BodyText,
-  Box,
-  type RadioProps as NativeUIRadioProps,
-} from '../../src';
+  RadioIcon,
+  RadioImage,
+} from '@utilitywarehouse/native-ui';
 import { TickSmallIcon } from '@utilitywarehouse/hearth-react-native-icons';
+import visaLogo from '../../assets/bank-logo1.png';
+import mastercardLogo from '../../assets/bank-logo.png';
 
-import { StyleSheet } from 'react-native-unistyles';
-
-interface RadioProps {
-  currentValue: string;
-}
-
-const styles = StyleSheet.create(({ colorMode, color, borderRadius, borderWidth, space }) => ({
-  radio: {
-    borderWidth: borderWidth[2],
-    borderColor: colorMode === 'light' ? color.grey[500] : color.grey[700],
-    borderRadius: borderRadius.xl,
-    padding: space[200],
-    variants: {
-      checked: {
-        true: {
-          borderColor: colorMode === 'light' ? color.green[500] : color.green[700],
-        },
-      },
-    },
-  },
-  indicator: {
-    variants: {
-      checked: {
-        true: {
-          backgroundColor: colorMode === 'light' ? color.green[500] : color.green[700],
-          borderColor: colorMode === 'light' ? color.green[500] : color.green[700],
-        },
-      },
-    },
-  },
-  heading: {
-    marginBottom: space[100],
-  },
-  badge: {
-    marginRight: space[200],
-    alignSelf: 'flex-end',
-  },
-}));
-
-const CustomRadio: React.FC<
-  RadioProps &
-    Omit<
-      NativeUIRadioProps,
-      'label' | 'helperText' | 'helperIcon' | 'invalidText' | 'validText' | 'showValidationIcon'
-    >
-> = ({ children, currentValue, ...props }) => {
-  styles.useVariants({ checked: currentValue === props.value });
+const AdvancedExample = () => {
+  const [value, setValue] = React.useState('option-1');
   return (
-    <Radio style={styles.radio} {...props}>
-      <Box flexDirection="row" flex={1}>
-        <Box pr="200" flex={1}>
-          {children}
-        </Box>
-        <RadioIndicator style={styles.indicator}>
-          <RadioIcon as={TickSmallIcon} color="white" />
+    <RadioGroup value={value} onChange={setValue} aria-label="Card type" type="tile">
+      <Radio value="option-1" aria-label="Visa">
+        <RadioIndicator>
+          <RadioIcon />
         </RadioIndicator>
-      </Box>
-    </Radio>
-  );
-};
-
-const BulletListItem = ({ children }: { children: React.ReactNode }) => (
-  <BodyText>
-    {'\u2022'} {children}
-  </BodyText>
-);
-
-const BulletList = ({ children }: { children: React.ReactNode }) => (
-  <Box pl="200" gap="100">
-    {children}
-  </Box>
-);
-
-const AdvancedRadioExample: React.FC = () => {
-  const [value, setValue] = React.useState('Option 1');
-
-  const handleChange = (val: string) => setValue(val);
-
-  return (
-    <RadioGroup onChange={handleChange} value={value} gap="200">
-      <Box>
-        <Badge colorScheme={value === 'Option 1' ? 'green' : 'grey'} flatBase style={styles.badge}>
-          Recommended
-        </Badge>
-        <CustomRadio value="Option 1" currentValue={value}>
-          <Heading size="md" style={styles.heading}>
-            Instant bank transfer
-          </Heading>
-          <BulletList>
-            <BulletListItem>Receive your money instantly</BulletListItem>
-            <BulletListItem>No fees</BulletListItem>
-            <BulletListItem>Available 24/7</BulletListItem>
-          </BulletList>
-        </CustomRadio>
-      </Box>
-      <CustomRadio value="Option 2" currentValue={value}>
-        <Heading size="md" style={styles.heading}>
-          Debit card payment
-        </Heading>
-        <BulletList>
-          <BulletListItem>£0.35 fee</BulletListItem>
-          <BulletListItem>Available 24/7</BulletListItem>
-        </BulletList>
-      </CustomRadio>
+        <RadioImage source={visaLogo} style={{ width: 40, height: 24, resizeMode: 'contain' }} />
+        <RadioLabel>Visa</RadioLabel>
+      </Radio>
+      <Radio value="option-2" aria-label="Mastercard">
+        <RadioIndicator>
+          <RadioIcon />
+        </RadioIndicator>
+        <RadioImage
+          source={mastercardLogo}
+          style={{ width: 40, height: 24, resizeMode: 'contain' }}
+        />
+        <RadioLabel>Mastercard</RadioLabel>
+      </Radio>
     </RadioGroup>
   );
 };
-
-export default AdvancedRadioExample;
 ```
 
 ## Examples
@@ -317,6 +254,41 @@ const MyComponent = () => {
 };
 ```
 
+### `RadioImage` component
+
+The `RadioImage` component is used to display an image next to the radio button.
+
+<Canvas of={Stories.WithImage} />
+
+```tsx
+import { Radio, RadioGroup } from '@utilitywarehouse/native-ui';
+import visaLogo from './visa-logo.png';
+import mastarcardLogo from './mastercard-logo.png';
+
+const MyComponent = () => {
+  const [value, setValue] = React.useState('Option 1');
+  return (
+    <RadioGroup value={value} onChange={setValue} aria-label="Radio Group" nativeID="Radio-group">
+      <Radio
+        value="visa"
+        aria-label="Visa"
+        label="Visa"
+        image={{ source: visaLogo, style: { width: 40, height: 24, resizeMode: 'contain' } }}
+      />
+      <Radio
+        value="mastercard"
+        aria-label="Mastercard"
+        label="Mastercard"
+        image={{
+          source: mastarcardLogo,
+          style: { width: 40, height: 24, resizeMode: 'contain' },
+        }}
+      />
+    </RadioGroup>
+  );
+};
+```
+
 ### `RadioGroup` component
 
 The `RadioGroup` component is used to group multiple `Radio` components together.

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

@@ -1,5 +1,5 @@
 import type { ComponentType } from 'react';
-import type { PressableProps, ViewProps } from 'react-native';
+import type { ImageProps, PressableProps, ViewProps } from 'react-native';
 
 interface RadioBaseProps extends Omit<PressableProps, 'children'> {
   value: string;
@@ -17,6 +17,7 @@ interface RadioWithChildrenProps extends RadioBaseProps {
   invalidText?: never;
   validText?: never;
   showValidationIcon?: never;
+  image?: never;
 }
 
 interface RadioWithoutChildrenProps extends RadioBaseProps {
@@ -27,6 +28,7 @@ interface RadioWithoutChildrenProps extends RadioBaseProps {
   invalidText?: string;
   validText?: string;
   showValidationIcon?: boolean;
+  image?: ImageProps;
 }
 
 type RadioProps = RadioWithChildrenProps | RadioWithoutChildrenProps;

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

@@ -1,6 +1,9 @@
 import { Meta, StoryObj } from '@storybook/react-vite';
 import { useState } from 'react';
+import { ImageSourcePropType } from 'react-native';
 import { Radio, RadioGroup } from '.';
+import bankLogo from '../../../docs/assets/bank-logo.png';
+import bankLogo1 from '../../../docs/assets/bank-logo1.png';
 import { VariantTitle } from '../../../docs/components';
 import { Flex } from '../Flex';
 
@@ -84,6 +87,50 @@ export const Playground: Story = {
   ),
 };
 
+export const WithImage: Story = {
+  parameters: {
+    controls: { exclude: ['image'] },
+  },
+  args: {
+    value: 'Option 1',
+    label: 'Label',
+  },
+  render: ({ children, ...args }) => (
+    <RadioGroup>
+      <Radio
+        aria-label="Label 1"
+        onChange={(checked: boolean) => {
+          console.log(checked, '###');
+        }}
+        nativeID="Radio-1"
+        {...args}
+        label="Visa"
+        value="Option 1"
+        image={{
+          source: bankLogo1 as ImageSourcePropType,
+          style: { width: 48, height: 32 },
+          resizeMode: 'cover',
+        }}
+      />
+      <Radio
+        aria-label="Label 2"
+        onChange={(checked: boolean) => {
+          console.log(checked, '###');
+        }}
+        nativeID="Radio-2"
+        {...args}
+        label="Mastercard"
+        value="Option 2"
+        image={{
+          source: bankLogo as ImageSourcePropType,
+          style: { width: 48, height: 32 },
+          resizeMode: 'cover',
+        }}
+      />
+    </RadioGroup>
+  ),
+};
+
 export const Variants: Story = {
   parameters: {
     controls: { exclude: ['value', 'label', 'disabled'] },

package/src/components/Radio/Radio.tsx

@@ -1,16 +1,17 @@
 import { createRadio } from '@gluestack-ui/radio';
-import StyledRadio from './RadioRoot';
-import StyledRadioIndicator from './RadioIndicator';
+import RadioProps from './Radio.props';
+import StyledRadioGroup from './RadioGroupRoot';
 import StyledRadioIcon from './RadioIcon';
+import StyledRadioIndicator from './RadioIndicator';
 import StyledRadioLabel from './RadioLabel';
-import StyledRadioGroup from './RadioGroupRoot';
-import RadioProps from './Radio.props';
+import StyledRadio from './RadioRoot';
 
+import { useFormFieldContext } from '../FormField';
 import { Helper } from '../Helper';
 import { useRadioGroupContext } from './RadioGroup.context';
-import { useFormFieldContext } from '../FormField';
-import RadioTileRoot from './RadioTileRoot';
+import RadioImage from './RadioImage';
 import RadioTextContent from './RadioTextContent';
+import RadioTileRoot from './RadioTileRoot';
 
 const RadioComponent = createRadio({
   Root: StyledRadio,
@@ -41,6 +42,7 @@ const Radio = ({
   validationStatus: validation,
   showValidationIcon,
   type = 'default',
+  image,
   ...props
 }: RadioProps) => {
   const { validationStatus: fieldValidationStatus } = useFormFieldContext();
@@ -55,6 +57,7 @@ const Radio = ({
       <RadioIndicator>
         <RadioIcon />
       </RadioIndicator>
+      {image ? <RadioImage {...image} /> : null}
       <RadioTextContent>
         {!!label && <RadioLabel>{label}</RadioLabel>}
         {!!helperText && <Helper disabled={disabled} icon={helperIcon} text={helperText} />}
@@ -89,6 +92,6 @@ const RadioTile = ({ type = 'tile', ...props }: RadioProps) => <Radio {...props}
 RadioTile.displayName = 'RadioTile';
 Radio.displayName = 'Radio';
 
-export { Radio, RadioGroup, RadioIndicator, RadioIcon, RadioLabel, RadioTile };
+export { Radio, RadioGroup, RadioIcon, RadioIndicator, RadioLabel, RadioTile };
 
 export default Radio;

package/src/components/Radio/RadioImage.tsx

@@ -0,0 +1,9 @@
+import { Image, ImageProps } from 'react-native';
+
+const RadioImage = ({ source, style, ...props }: ImageProps) => (
+  <Image source={source} style={style} {...props} />
+);
+
+RadioImage.displayName = 'RadioImage';
+
+export default RadioImage;

package/src/components/Radio/RadioTileRoot.tsx

@@ -19,7 +19,7 @@ const styles = StyleSheet.create(theme => ({
     gap: theme.components.radio.gap,
     padding: theme.components.radio.tile.padding,
     borderWidth: theme.components.radio.tile.borderWidth,
-    borderColor: theme.color.border.subtle,
+    borderColor: theme.color.border.strong,
     borderRadius: theme.components.radio.tile.borderRadius,
     backgroundColor: theme.color.surface.neutral.strong,
     variants: {

package/src/components/Radio/index.ts

@@ -1,5 +1,6 @@
-export { default as Radio, RadioIndicator, RadioLabel, RadioIcon, RadioTile } from './Radio';
+export { default as Radio, RadioIcon, RadioIndicator, RadioLabel, RadioTile } from './Radio';
+export type { default as RadioProps } from './Radio.props';
 export { default as RadioGroup } from './RadioGroup';
 export { default as RadioGroupTextContent } from './RadioGroupTextContent';
+export { default as RadioImage } from './RadioImage';
 export { default as RadioTextContent } from './RadioTextContent';
-export type { default as RadioProps } from './Radio.props';

package/src/components/SectionHeader/SectionHeader.tsx

@@ -55,6 +55,7 @@ const styles = StyleSheet.create(theme => ({
     flexDirection: 'row',
     gap: theme.components.sectionHeader.gap,
     alignItems: 'flex-start',
+    width: '100%',
   },
 }));
 

package/src/components/Select/Select.docs.mdx

@@ -1,8 +1,8 @@
-import { Meta, Controls, Story, Canvas } from '@storybook/addon-docs/blocks';
-import * as Stories from './Select.stories';
-import { Select, SelectOption, FormField, Center } from '../../';
+import { Canvas, Controls, Meta, Story } from '@storybook/addon-docs/blocks';
 import { UserSmallIcon } from '@utilitywarehouse/hearth-react-native-icons';
-import { ViewFigmaButton, BackToTopButton, UsageWrap } from '../../../docs/components';
+import { Center, FormField, Select, SelectOption } from '../../';
+import { BackToTopButton, UsageWrap, ViewFigmaButton } from '../../../docs/components';
+import * as Stories from './Select.stories';
 
 <Meta title="Forms / Select" />
 
@@ -195,7 +195,7 @@ import { Select, SelectOption } from '@utilitywarehouse/hearth-react-native';
 import {
   UserSmallIcon,
   HeartSmallIcon,
-  StarSmallIcon,
+  EyeSmallIcon,
 } from '@utilitywarehouse/hearth-react-native-icons';
 import { useState } from 'react';
 
@@ -211,7 +211,7 @@ const MyComponent = () => {
     >
       <SelectOption label="Home option" value="home" leadingIcon={UserSmallIcon} />
       <SelectOption label="Car option" value="car" leadingIcon={HeartSmallIcon} />
-      <SelectOption label="World option" value="world" leadingIcon={StarSmallIcon} />
+      <SelectOption label="World option" value="world" leadingIcon={EyeSmallIcon} />
     </Select>
   );
 };

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

@@ -1,15 +1,15 @@
 import type { Meta } from '@storybook/react-vite';
-import React, { useState } from 'react';
-import Select from './Select';
-import SelectOption from './SelectOption';
-import { FormField } from '../FormField';
 import {
-  UserSmallIcon,
+  EyeSmallIcon,
   HeartSmallIcon,
-  StarSmallIcon,
+  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',
@@ -269,7 +269,7 @@ export const WithInlineOptions = () => {
     >
       <SelectOption label="Home option" value="home" leadingIcon={UserSmallIcon} />
       <SelectOption label="Car option" value="car" leadingIcon={HeartSmallIcon} />
-      <SelectOption label="World option" value="world" leadingIcon={StarSmallIcon} />
+      <SelectOption label="World option" value="world" leadingIcon={EyeSmallIcon} />
     </Select>
   );
 };

package/src/components/Select/SelectOption.tsx

@@ -1,5 +1,5 @@
 import { TickSmallIcon } from '@utilitywarehouse/hearth-react-native-icons';
-import { Pressable, View, ViewStyle } from 'react-native';
+import { Pressable, View } from 'react-native';
 import { StyleSheet } from 'react-native-unistyles';
 import { BodyText } from '../BodyText';
 import { Icon } from '../Icon';
@@ -42,10 +42,7 @@ const SelectOption = ({
     >
       {!!LeftIcon && (
         <View>
-          {(() => {
-            const IconAny = Icon as any;
-            return <IconAny style={styles.icon as ViewStyle} as={LeftIcon} />;
-          })()}
+          <Icon as={LeftIcon} style={styles.icon} />
         </View>
       )}
 
@@ -55,15 +52,12 @@ const SelectOption = ({
 
       {isSelected && (
         <View>
-          <TickSmallIcon style={styles.icon as ViewStyle} />
+          <Icon as={TickSmallIcon} style={styles.icon} />
         </View>
       )}
       {!!RightIcon && !isSelected && (
         <View>
-          {(() => {
-            const IconAny = Icon as any;
-            return <IconAny style={styles.icon as ViewStyle} as={RightIcon} />;
-          })()}
+          <Icon as={RightIcon} style={styles.icon} />
         </View>
       )}
     </Pressable>

package/src/components/Tabs/Tab.props.ts

@@ -0,0 +1,16 @@
+import type { ComponentType, ReactNode } from 'react';
+import type { PressableProps, ViewProps } from 'react-native';
+
+export interface TabProps extends PressableProps {
+  /** Unique value for the tab */
+  value: string;
+  /** Tab label */
+  children: ReactNode;
+  /** Optional leading icon */
+  icon?: ComponentType<any>;
+  /** Whether the tab is disabled */
+  disabled?: boolean;
+  style?: ViewProps['style'];
+}
+
+export default TabProps;