@utilitywarehouse/hearth-react-native 0.34.5 → 0.35.0

package/src/components/ProgressStepper/ProgressStepper.stories.tsx

@@ -1,107 +0,0 @@
-import { Meta, StoryObj } from '@storybook/react-vite';
-import { ProgressStep, ProgressStepper } from '.';
-import { VariantTitle } from '../../../docs/components';
-import { BodyText } from '../BodyText';
-import { Flex } from '../Flex';
-import { Heading } from '../Heading';
-
-const meta = {
-  title: 'Stories / ProgressStepper',
-  component: ProgressStepper,
-  parameters: {
-    layout: 'centered',
-  },
-} satisfies Meta<typeof ProgressStepper>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const Playground: Story = {
-  args: {
-    children: (
-      <Flex spacing="xl" direction="column" align="center" style={{ flex: 1, minWidth: 200 }}>
-        <ProgressStepper>
-          <ProgressStep id={'1'} status="complete" />
-          <ProgressStep id={'2'} status="complete" />
-          <ProgressStep id={'3'} status="active" />
-          <ProgressStep id={'4'} status="incomplete" />
-        </ProgressStepper>
-        <Flex direction="row" spacing="lg" style={{ width: '100%' }}>
-          <ProgressStep id={'1'} status="complete" />
-        </Flex>
-        <Flex direction="row" spacing="lg" style={{ width: '100%' }}>
-          <ProgressStep id={'3'} status="active" />
-        </Flex>
-        <Flex direction="row" spacing="lg" style={{ width: '100%' }}>
-          <ProgressStep id={'5'} status="incomplete" />
-        </Flex>
-      </Flex>
-    ),
-  },
-};
-
-export const StepStatuses: Story = {
-  args: {
-    children: <></>,
-  },
-  parameters: {
-    controls: { exclude: ['space'] },
-  },
-  render: props => {
-    return (
-      <Flex spacing="xl" direction="column" align="center">
-        <VariantTitle title="All Uncompleted Steps">
-          <ProgressStepper {...props}>
-            <ProgressStep id={'1'} status="incomplete" />
-            <ProgressStep id={'2'} status="incomplete" />
-            <ProgressStep id={'3'} status="incomplete" />
-          </ProgressStepper>
-        </VariantTitle>
-        <VariantTitle title="One Active Step">
-          <ProgressStepper {...props}>
-            <ProgressStep id={'1'} status="active" />
-            <ProgressStep id={'2'} status="incomplete" />
-            <ProgressStep id={'3'} status="incomplete" />
-          </ProgressStepper>
-        </VariantTitle>
-        <VariantTitle title="Mixed Statuses">
-          <ProgressStepper {...props}>
-            <ProgressStep id={'1'} status="complete" />
-            <ProgressStep id={'2'} status="complete" />
-            <ProgressStep id={'3'} status="active" />
-            <ProgressStep id={'4'} status="incomplete" />
-          </ProgressStepper>
-        </VariantTitle>
-        <VariantTitle title="All Completed">
-          <ProgressStepper {...props}>
-            <ProgressStep id={'1'} status="complete" />
-            <ProgressStep id={'2'} status="complete" />
-            <ProgressStep id={'3'} status="complete" />
-          </ProgressStepper>
-        </VariantTitle>
-      </Flex>
-    );
-  },
-};
-
-export const BasicExample: Story = {
-  args: {
-    children: <></>,
-  },
-  render: props => {
-    return (
-      <Flex spacing="lg" direction="column" align="center">
-        <Heading size="md">Progress Stepper</Heading>
-        <BodyText>Shows progress through multi-step processes</BodyText>
-        <ProgressStepper {...props}>
-          <ProgressStep id="services-data" status="complete" />
-          <ProgressStep id="customer-data" status="complete" />
-          <ProgressStep id="shipping-data" status="active" />
-          <ProgressStep id="payment-data" status="incomplete" />
-          <ProgressStep id="summary" status="incomplete" />
-        </ProgressStepper>
-        <BodyText>Step 3 of 5</BodyText>
-      </Flex>
-    );
-  },
-};

package/src/components/ProgressStepper/ProgressStepper.tsx

@@ -1,26 +0,0 @@
-import React, { useMemo, Children, cloneElement, isValidElement } from 'react';
-import ProgressStepperProps from './ProgressStepper.props';
-import ProgressStepperRoot from './ProgressStepperRoot';
-
-const ProgressStepper = ({ children, ...rest }: ProgressStepperProps) => {
-  // Process children to add index and isLast props
-  const processedChildren = useMemo(() => {
-    const childrenArray = Children.toArray(children);
-    return childrenArray.map((child, index) => {
-      if (isValidElement(child)) {
-        return cloneElement(child, {
-          ...(child.props as any),
-          index,
-          isLast: index === childrenArray.length - 1,
-        });
-      }
-      return child;
-    });
-  }, [children]);
-
-  return <ProgressStepperRoot {...rest}>{processedChildren}</ProgressStepperRoot>;
-};
-
-ProgressStepper.displayName = 'ProgressStepper';
-
-export default ProgressStepper;

package/src/components/ProgressStepper/ProgressStepperRoot.tsx

@@ -1,32 +0,0 @@
-import React from 'react';
-import { View, ViewStyle } from 'react-native';
-import { StyleSheet } from 'react-native-unistyles';
-import { ProgressStepperRootProps } from './ProgressStepper.props';
-
-const ProgressStepperRoot = ({
-  children,
-  style,
-  ...rest
-}: ProgressStepperRootProps) => {
-  return (
-    <View
-      style={[styles.root, style as ViewStyle]}
-      {...rest}
-    >
-      {children}
-    </View>
-  );
-};
-
-ProgressStepperRoot.displayName = 'ProgressStepperRoot';
-
-const styles = StyleSheet.create(() => ({
-  root: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    justifyContent: 'space-between',
-    width: '100%',
-  },
-}));
-
-export default ProgressStepperRoot;

package/src/components/ProgressStepper/index.ts

@@ -1,3 +0,0 @@
-export { default as ProgressStepper } from './ProgressStepper';
-export { default as ProgressStep } from './ProgressStep';
-export type { ProgressStepperProps, ProgressStepProps, StepStatus } from './ProgressStepper.props';

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

@@ -1,9 +0,0 @@
-import { createContext, useContext } from 'react';
-
-export const RadioContext = createContext<{
-  disabled?: boolean;
-  checked?: boolean;
-  active?: boolean;
-}>({});
-
-export const useRadioContext = () => useContext(RadioContext);

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

@@ -1,38 +0,0 @@
-import figma from '@figma/code-connect';
-import Radio from './Radio';
-
-figma.connect(
-  Radio,
-  'https://www.figma.com/design/6NKZXZhFSExXrcbBgc6zTR/Hearth-Components---Tokens?node-id=7428-12685&m=dev',
-  {
-    props: {
-      helperText: figma.boolean('Helper text?', {
-        true: figma.string('Helper text'),
-      }),
-      label: figma.string('Label'),
-      image: figma.boolean('Image?', {
-        true: figma.instance('Radio Image'),
-      }),
-      state: figma.enum('State', {
-        Default: 'default',
-      }),
-      checked: figma.boolean('Checked?'),
-      indicator: figma.nestedProps('Radio Item', {
-        disabled: figma.enum('State', {
-          Disabled: true,
-        }),
-      }),
-    },
-    example: props => (
-      <Radio
-        label={props.label}
-        helperText={props.helperText}
-        image={props.image}
-        state={props.state}
-        checked={props.checked}
-        disabled={props.indicator.disabled}
-        value="someValue"
-      />
-    ),
-  }
-);

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

@@ -1,38 +0,0 @@
-import type { ComponentType, ReactNode } from 'react';
-import type { PressableProps, ViewProps } from 'react-native';
-
-interface RadioBaseProps extends Omit<PressableProps, 'children'> {
-  value: string;
-  onChange?: (isSelected: boolean) => void;
-  disabled?: boolean;
-  validationStatus?: 'valid' | 'invalid' | 'initial';
-  type?: 'default' | 'tile';
-}
-
-interface RadioWithChildrenProps extends RadioBaseProps {
-  children: ViewProps['children'];
-  label?: never;
-  helperText?: never;
-  helperIcon?: never;
-  badge?: never;
-  invalidText?: never;
-  validText?: never;
-  showValidationIcon?: never;
-  image?: never;
-}
-
-interface RadioWithoutChildrenProps extends RadioBaseProps {
-  children?: never;
-  label?: string;
-  helperText?: string;
-  helperIcon?: ComponentType;
-  badge?: ReactNode;
-  invalidText?: string;
-  validText?: string;
-  showValidationIcon?: boolean;
-  image?: ReactNode;
-}
-
-type RadioProps = RadioWithChildrenProps | RadioWithoutChildrenProps;
-
-export default RadioProps;

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

@@ -1,254 +0,0 @@
-import { Meta, StoryObj } from '@storybook/react-vite';
-import { useState } from 'react';
-import { ImageSourcePropType } from 'react-native';
-import { Radio, RadioGroup, RadioImage } from '.';
-import bankLogo from '../../../docs/assets/bank-logo.png';
-import bankLogo1 from '../../../docs/assets/bank-logo1.png';
-import { VariantTitle } from '../../../docs/components';
-import { Badge } from '../Badge';
-import { Flex } from '../Flex';
-import { FormField } from '../FormField';
-
-const meta = {
-  title: 'Stories / Radio',
-  component: Radio,
-  parameters: {
-    layout: 'centered',
-  },
-  argTypes: {
-    disabled: {
-      type: 'boolean',
-      control: 'boolean',
-      description: 'To manually set disable to the radio.',
-    },
-    label: {
-      type: 'string',
-      control: 'text',
-      description: 'The label component for the radio.',
-    },
-    helperText: {
-      type: 'string',
-      control: 'text',
-      description: 'The helper text of the radio component',
-      defaultValue: 'Helper text',
-    },
-    validationStatus: {
-      control: 'select',
-      options: ['initial', 'valid', 'invalid'],
-      description: 'The validation status of the radio component',
-      defaultValue: 'initial',
-    },
-    showValidationIcon: {
-      control: 'boolean',
-      description: 'Show the validation icon.',
-      defaultValue: true,
-    },
-    invalidText: {
-      control: 'text',
-      description: 'The invalid text of the radio component',
-      defaultValue: 'Invalid text',
-    },
-    type: {
-      control: 'select',
-      options: ['default', 'tile'],
-      description: 'The type of the radio component',
-      defaultValue: 'default',
-    },
-  },
-  args: {
-    disabled: false,
-    label: '',
-    helperText: '',
-    validationStatus: 'initial',
-    showValidationIcon: true,
-    invalidText: 'Invalid text',
-    validText: 'Valid text',
-    type: 'default',
-  },
-} satisfies Meta<typeof Radio>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const Playground: Story = {
-  args: {
-    value: 'Option 1',
-    label: 'Label',
-  },
-  render: args => (
-    <RadioGroup>
-      <Radio
-        aria-label="Label 1"
-        onChange={(checked: boolean) => {
-          console.log(checked, '###');
-        }}
-        nativeID="Radio-1"
-        {...args}
-      />
-    </RadioGroup>
-  ),
-};
-
-export const WithImage: Story = {
-  parameters: {
-    controls: { exclude: ['image'] },
-  },
-  args: {
-    value: 'Option 1',
-    label: 'Label',
-  },
-  render: ({ ...args }) => (
-    <RadioGroup>
-      <Radio
-        aria-label="Label 1"
-        onChange={(checked: boolean) => {
-          console.log(checked, '###');
-        }}
-        nativeID="Radio-1"
-        {...args}
-        label="Visa"
-        value="Option 1"
-        image={
-          <RadioImage
-            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={
-          <RadioImage
-            source={bankLogo as ImageSourcePropType}
-            style={{ width: 48, height: 32 }}
-            resizeMode="cover"
-          />
-        }
-      />
-    </RadioGroup>
-  ),
-};
-
-export const WithBadge: Story = {
-  args: {
-    value: 'Option 1',
-    label: 'Label',
-    helperText: 'Helper text',
-  },
-  render: args => (
-    <RadioGroup>
-      <Radio
-        aria-label="Label 1"
-        onChange={(checked: boolean) => {
-          console.log(checked, '###');
-        }}
-        nativeID="Radio-1"
-        badge={<Badge>New</Badge>}
-        {...args}
-      />
-    </RadioGroup>
-  ),
-};
-
-export const Variants: Story = {
-  parameters: {
-    controls: { exclude: ['value', 'label', 'disabled'] },
-  },
-  args: {
-    value: 'Option 1',
-  },
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  render: ({ value: _, children: __, label: ___, disabled: _____, onChange: ______, ...args }) => {
-    const [value, setValue] = useState('Option 1');
-    return (
-      <Flex spacing="lg">
-        <VariantTitle title="Default">
-          <RadioGroup
-            aria-label="Radio Group"
-            value={value}
-            onChange={setValue}
-            nativeID="Radio-group"
-          >
-            <Radio
-              value="Option 1"
-              aria-label="Option 1"
-              onChange={(checked: boolean) => {
-                console.log(checked, '###');
-              }}
-              nativeID="Radio-1"
-              label="Option 1"
-              {...args}
-            />
-            <Radio
-              value="Option 2"
-              aria-label="Option 2"
-              onChange={(checked: boolean) => {
-                console.log(checked, '###');
-              }}
-              nativeID="Radio-2"
-              label="Option 2"
-              {...args}
-            />
-          </RadioGroup>
-        </VariantTitle>
-        <VariantTitle title="Disabled">
-          <RadioGroup
-            aria-label="Radio Group"
-            value={value}
-            onChange={setValue}
-            nativeID="Radio-group"
-            disabled
-          >
-            <Radio
-              aria-label="Option 3"
-              value="Option 1"
-              onChange={(checked: boolean) => console.log(checked, '###')}
-              nativeID="Radio-3"
-              label="Option 1"
-              {...args}
-            />
-            <Radio
-              aria-label="Option 4"
-              value="Option 2"
-              onChange={(checked: boolean) => console.log(checked, '###')}
-              nativeID="Radio-4"
-              label="Option 2"
-              {...args}
-            />
-          </RadioGroup>
-        </VariantTitle>
-      </Flex>
-    );
-  },
-};
-
-export const WithFormFieldExample: Story = () => (
-  <>
-    <FormField
-      label="Account type"
-      helperText="Is this account used for personal or business purposes?"
-    >
-      <RadioGroup type="tile">
-        <Radio label="Personal" value="Personal" />
-        <Radio label="Business" value="Business" />
-      </RadioGroup>
-    </FormField>
-    <RadioGroup
-      direction="row"
-      label="Account type"
-      helperText="Is this account used for personal or business purposes?"
-      type="tile"
-    >
-      <Radio label="Personal" value="Personal" />
-      <Radio label="Business" value="Business" />
-    </RadioGroup>
-  </>
-);

package/src/components/Radio/Radio.tsx

@@ -1,98 +0,0 @@
-import { createRadio } from '@gluestack-ui/radio';
-import RadioProps from './Radio.props';
-import StyledRadioGroup from './RadioGroupRoot';
-import StyledRadioIcon from './RadioIcon';
-import StyledRadioIndicator from './RadioIndicator';
-import StyledRadioLabel from './RadioLabel';
-import StyledRadio from './RadioRoot';
-
-import { useFormFieldContext } from '../FormField';
-import { Helper } from '../Helper';
-import { useRadioGroupContext } from './RadioGroup.context';
-import RadioTextContent from './RadioTextContent';
-import RadioTileRoot from './RadioTileRoot';
-
-const RadioComponent = createRadio({
-  Root: StyledRadio,
-  Group: StyledRadioGroup,
-  Indicator: StyledRadioIndicator,
-  Icon: StyledRadioIcon,
-  Label: StyledRadioLabel,
-});
-
-const RadioGroup = RadioComponent.Group;
-const RadioIndicator = RadioComponent.Indicator;
-const RadioIcon = RadioComponent.Icon;
-const RadioLabel = RadioComponent.Label;
-
-RadioGroup.displayName = 'RadioGroup';
-RadioIndicator.displayName = 'RadioIndicator';
-RadioIcon.displayName = 'RadioIcon';
-RadioLabel.displayName = 'RadioLabel';
-
-const Radio = ({
-  children,
-  label,
-  disabled,
-  helperIcon,
-  helperText,
-  badge,
-  invalidText,
-  validText,
-  validationStatus: validation,
-  showValidationIcon,
-  type = 'default',
-  image,
-  ...props
-}: RadioProps) => {
-  const { validationStatus: fieldValidationStatus } = useFormFieldContext();
-  const { validationStatus: groupValidationStatus, type: groupType } = useRadioGroupContext();
-  const validationStatus =
-    fieldValidationStatus ?? groupValidationStatus ?? validation ?? 'initial';
-  const radioType = groupType ?? type;
-  const radioChildren = children ? (
-    children
-  ) : (
-    <>
-      <RadioIndicator>
-        <RadioIcon />
-      </RadioIndicator>
-      {image ? image : null}
-      <RadioTextContent>
-        {!!label && <RadioLabel>{label}</RadioLabel>}
-        {!!helperText && <Helper disabled={disabled} icon={helperIcon} text={helperText} />}
-        {badge ? badge : null}
-        {validationStatus === 'invalid' && !!invalidText && (
-          <Helper
-            showIcon={showValidationIcon}
-            disabled={disabled}
-            validationStatus="invalid"
-            text={invalidText}
-          />
-        )}
-        {validationStatus === 'valid' && !!validText && (
-          <Helper
-            disabled={disabled}
-            showIcon={showValidationIcon}
-            validationStatus="valid"
-            text={validText}
-          />
-        )}
-      </RadioTextContent>
-    </>
-  );
-  return (
-    <RadioComponent {...props} isDisabled={disabled}>
-      {radioType === 'tile' ? <RadioTileRoot>{radioChildren}</RadioTileRoot> : radioChildren}
-    </RadioComponent>
-  );
-};
-
-const RadioTile = ({ type = 'tile', ...props }: RadioProps) => <Radio {...props} type={type} />;
-
-RadioTile.displayName = 'RadioTile';
-Radio.displayName = 'Radio';
-
-export { Radio, RadioGroup, RadioIcon, RadioIndicator, RadioLabel, RadioTile };
-
-export default Radio;

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

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