@utilitywarehouse/hearth-react-native 0.1.0

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

@@ -0,0 +1,9 @@
+import { createContext, useContext } from 'react';
+
+export const RadioGroupContext = createContext<{
+  disabled?: boolean;
+  validationStatus?: 'valid' | 'invalid' | 'initial';
+  type?: 'default' | 'tile';
+}>({});
+
+export const useRadioGroupContext = () => useContext(RadioGroupContext);

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

@@ -0,0 +1,22 @@
+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;
+  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

@@ -0,0 +1,107 @@
+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.',
+    },
+    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',
+    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} space="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>
+  ),
+};

package/src/components/Radio/RadioGroup.tsx

@@ -0,0 +1,108 @@
+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,
+  helperText,
+  invalidText,
+  validText,
+  showValidationIcon = true,
+  helperIcon,
+  type,
+  direction = 'column',
+  gap,
+  ...props
+}: RadioGroupProps) => {
+  const value = useMemo(
+    () => ({ disabled, validationStatus, type }),
+    [disabled, validationStatus, type]
+  );
+  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}>{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

@@ -0,0 +1,36 @@
+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

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

package/src/components/Radio/RadioIcon.tsx

@@ -0,0 +1,32 @@
+import { StyleSheet } from 'react-native-unistyles';
+import { Icon } from '../Icon';
+import { CircleIcon } from '../Icons';
+import IconProps from '../Icon/Icon.props';
+import { Platform } from 'react-native';
+
+const RadioIcon = ({ style, ...props }: IconProps) => {
+  return (
+    <Icon
+      as={CircleIcon}
+      {...props}
+      style={
+        Platform.OS === 'web'
+          ? StyleSheet.compose(styles.container, style)
+          : ([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/RadioIndicator.figma.tsx

@@ -0,0 +1,21 @@
+import { Radio, RadioGroup } from './';
+import figma from '@figma/code-connect';
+
+const value = 'some-value';
+const setValue = (value: string) => console.log(value);
+
+figma.connect(
+  Radio,
+  'https://www.figma.com/design/3RY3OvLA88yZksRjOfjQJm/UW-App-UI?node-id=4461-7535&m=dev',
+  {
+    props: {
+      checked: figma.boolean('checked', { true: 'some-value', false: undefined }),
+      disabled: figma.boolean('disabled'),
+    },
+    example: ({ disabled, checked }) => (
+      <RadioGroup value={checked} onChange={setValue}>
+        <Radio value={value} disabled={disabled} />
+      </RadioGroup>
+    ),
+  }
+);

package/src/components/Radio/RadioIndicator.tsx

@@ -0,0 +1,63 @@
+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.components.radio.unchecked.backgroundColor,
+    borderColor: theme.components.radio.unchecked.borderColor,
+    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

@@ -0,0 +1,14 @@
+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

@@ -0,0 +1,65 @@
+import { useMemo } from 'react';
+import { StyleSheet } from 'react-native-unistyles';
+
+import { Pressable, ViewStyle } from 'react-native';
+import type RadioProps from './Radio.props';
+import { RadioContext } from './Radio.context';
+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

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

package/src/components/Radio/RadioTileRoot.tsx

@@ -0,0 +1,38 @@
+import { View, ViewProps } from 'react-native';
+import { StyleSheet } from 'react-native-unistyles';
+import { useRadioContext } from './Radio.context';
+
+const RadioTileRoot = ({ children }: { children: ViewProps['children'] }) => {
+  const { checked } = useRadioContext();
+  styles.useVariants({
+    checked,
+  });
+  return <View style={styles.container}>{children}</View>;
+};
+
+const styles = StyleSheet.create(theme => ({
+  container: {
+    flexDirection: 'row',
+    justifyContent: 'flex-start',
+    flex: 1,
+    alignSelf: 'stretch',
+    gap: theme.components.radio.gap,
+    padding: theme.components.radio.tile.padding,
+    borderWidth: theme.components.radio.tile.borderWidth,
+    borderColor: theme.components.radio.tile.borderColor,
+    borderRadius: theme.components.radio.tile.borderRadius,
+    backgroundColor: theme.components.radio.tile.backgroundColor,
+    variants: {
+      checked: {
+        true: {
+          borderWidth: theme.components.radio.tile.borderWidthSelected,
+          borderColor: theme.components.radio.tile.borderColorSelected,
+          margin: -theme.components.radio.tile.borderWidthSelected / 2,
+        },
+      },
+    },
+  },
+}));
+
+RadioTileRoot.displayName = 'RadioTileRoot';
+export default RadioTileRoot;

package/src/components/Radio/index.ts

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

package/src/components/RadioCard/RadioCard.context.ts

@@ -0,0 +1,8 @@
+import { createContext, useContext } from 'react';
+
+export const RadioCardContext = createContext<{
+  checked?: boolean;
+  active?: boolean;
+}>({});
+
+export const useRadioCardContext = () => useContext(RadioCardContext);