@utilitywarehouse/hearth-react-native 0.1.0

package/src/components/Switch/Switch.tsx

@@ -0,0 +1,201 @@
+import { CloseSmallIcon, TickSmallIcon } from '@utilitywarehouse/hearth-react-native-icons';
+import { useEffect } from 'react';
+import { Pressable } from 'react-native';
+import Animated, {
+  Easing,
+  interpolateColor,
+  useAnimatedStyle,
+  useReducedMotion,
+  useSharedValue,
+  withSpring,
+  withTiming,
+} from 'react-native-reanimated';
+import { StyleSheet } from 'react-native-unistyles';
+import { useTheme } from '../../hooks';
+import { Icon } from '../Icon';
+import SwitchProps from './Switch.props';
+
+const CustomSwitch = ({
+  value = false,
+  onValueChange,
+  disabled = false,
+  size = 'medium',
+  ...accessibilityProps
+}: SwitchProps) => {
+  const { components } = useTheme();
+  const SWITCH_WIDTH = size === 'medium' ? components.switch.md.width : components.switch.sm.width;
+  const THUMB_SIZE =
+    size === 'medium' ? components.switch.md.circle.size : components.switch.sm.circle.size;
+  const PADDING = components.switch.padding;
+  const isReducedMotion = useReducedMotion();
+
+  styles.useVariants({ size, disabled, value });
+
+  const offset = useSharedValue(value ? SWITCH_WIDTH - THUMB_SIZE - PADDING * 2 : 0);
+  const progress = useSharedValue(value ? 1 : 0);
+
+  const animatedThumbStyle = useAnimatedStyle(() => ({
+    transform: [{ translateX: offset.value }],
+  }));
+
+  const animatedSwitchBackgroundStyle = useAnimatedStyle(() => {
+    const backgroundColor = interpolateColor(
+      progress.value,
+      [0, 1],
+      [components.switch.unchecked.backgroundColor, components.switch.checked.backgroundColor]
+    );
+    return { backgroundColor };
+  });
+
+  // Icon animations
+  const tickScale = useSharedValue(value ? 1 : 0);
+  const crossScale = useSharedValue(value ? 0 : 1);
+
+  const animatedTickStyle = useAnimatedStyle(() => ({
+    transform: [{ scale: tickScale.value }],
+  }));
+
+  const animatedCrossStyle = useAnimatedStyle(() => ({
+    transform: [{ scale: crossScale.value }],
+  }));
+
+  // Press feedback animation
+  const scale = useSharedValue(1);
+
+  const animatedSwitchStyle = useAnimatedStyle(() => ({
+    transform: [{ scale: scale.value }],
+  }));
+
+  useEffect(() => {
+    const userConfig = {
+      duration: isReducedMotion ? 0 : 300,
+      easing: Easing.inOut(Easing.ease),
+    };
+    // Animate the thumb position
+    offset.value = withTiming(value ? SWITCH_WIDTH - THUMB_SIZE - PADDING * 2 : 0, userConfig);
+
+    // Animate the icons
+    tickScale.value = withTiming(value ? 1 : 0, userConfig);
+    crossScale.value = withTiming(value ? 0 : 1, userConfig);
+
+    // Animate the background color with ease-in-out easing
+    progress.value = withTiming(value ? 1 : 0, userConfig);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [value, disabled]);
+
+  const toggleSwitch = () => {
+    if (disabled) return;
+    onValueChange?.(!value);
+  };
+
+  const onPressIn = () => {
+    scale.value = withSpring(0.95);
+  };
+
+  const onPressOut = () => {
+    scale.value = withSpring(1);
+  };
+
+  return (
+    <Pressable
+      onPress={toggleSwitch}
+      onPressIn={onPressIn}
+      onPressOut={onPressOut}
+      disabled={disabled}
+      aria-checked={value}
+      accessibilityRole="switch"
+      accessibilityState={{ checked: value, disabled }}
+      accessibilityLabel={accessibilityProps.accessibilityLabel}
+      accessibilityHint={accessibilityProps.accessibilityHint}
+      {...accessibilityProps}
+    >
+      <Animated.View style={[styles.switch, animatedSwitchBackgroundStyle, animatedSwitchStyle]}>
+        <Animated.View style={[styles.thumb, animatedThumbStyle]}>
+          <Animated.View style={[styles.iconWrap, animatedTickStyle]}>
+            {(() => {
+              const IconAny = Icon as any;
+              return <IconAny as={TickSmallIcon} style={styles.icon as any} />;
+            })()}
+          </Animated.View>
+          <Animated.View style={[styles.iconWrap, animatedCrossStyle]}>
+            {(() => {
+              const IconAny = Icon as any;
+              return <IconAny as={CloseSmallIcon} style={styles.icon as any} />;
+            })()}
+          </Animated.View>
+        </Animated.View>
+      </Animated.View>
+    </Pressable>
+  );
+};
+
+const styles = StyleSheet.create(theme => ({
+  switch: {
+    justifyContent: 'center',
+    variants: {
+      size: {
+        medium: {
+          width: theme.components.switch.md.width,
+          height: theme.components.switch.md.height,
+          borderRadius: theme.components.switch.radius,
+          padding: theme.components.switch.padding,
+        },
+        small: {
+          width: theme.components.switch.sm.width,
+          height: theme.components.switch.sm.height,
+          borderRadius: theme.components.switch.radius,
+          padding: theme.components.switch.padding,
+        },
+      },
+      value: {
+        true: {
+          backgroundColor: theme.components.switch.checked.backgroundColor,
+        },
+        false: {
+          backgroundColor: theme.components.switch.unchecked.backgroundColor,
+        },
+      },
+      disabled: {
+        true: {
+          opacity: theme.opacity.disabled,
+        },
+      },
+    },
+  },
+  thumb: {
+    backgroundColor: theme.components.switch.circle.backgroundColor,
+    alignItems: 'center',
+    justifyContent: 'center',
+    variants: {
+      size: {
+        medium: {
+          width: theme.components.switch.md.circle.size,
+          height: theme.components.switch.md.circle.size,
+          borderRadius: theme.components.switch.radius,
+        },
+        small: {
+          width: theme.components.switch.sm.circle.size,
+          height: theme.components.switch.sm.circle.size,
+          borderRadius: theme.components.switch.radius,
+        },
+      },
+    },
+  },
+  iconWrap: {
+    position: 'absolute',
+  },
+  icon: {
+    variants: {
+      value: {
+        true: {
+          color: theme.components.switch.checked.iconColor,
+        },
+        false: {
+          color: theme.components.switch.unchecked.iconColor,
+        },
+      },
+    },
+  },
+}));
+
+export default CustomSwitch;

package/src/components/Switch/Switch.web.tsx

@@ -0,0 +1,208 @@
+import { CloseSmallIcon, TickSmallIcon } from '@utilitywarehouse/hearth-react-native-icons';
+import { useEffect } from 'react';
+import { Pressable, View } from 'react-native';
+import Animated, {
+  Easing,
+  interpolateColor,
+  useAnimatedStyle,
+  useReducedMotion,
+  useSharedValue,
+  withSpring,
+  withTiming,
+} from 'react-native-reanimated';
+import { StyleSheet } from 'react-native-unistyles';
+import { useTheme } from '../../hooks';
+import { Icon } from '../Icon';
+import SwitchProps from './Switch.props';
+
+// @ts-expect-error - Animated.createAnimatedComponent is not typed correctly in the library
+const AnimatedView = Animated.createAnimatedComponent(View);
+
+const CustomSwitch = ({
+  value = false,
+  onValueChange,
+  disabled = false,
+  size = 'medium',
+  ...accessibilityProps
+}: SwitchProps) => {
+  const { components } = useTheme();
+  const SWITCH_WIDTH = size === 'medium' ? components.switch.md.width : components.switch.sm.width;
+  const THUMB_SIZE =
+    size === 'medium' ? components.switch.md.circle.size : components.switch.sm.circle.size;
+  const PADDING = components.switch.padding;
+  const isReducedMotion = useReducedMotion();
+
+  styles.useVariants({ size, disabled, value });
+
+  const offset = useSharedValue(value ? SWITCH_WIDTH - THUMB_SIZE - PADDING * 2 : 0);
+  const progress = useSharedValue(value ? 1 : 0);
+
+  const animatedThumbStyle = useAnimatedStyle(() => ({
+    transform: [{ translateX: offset.value }],
+  }));
+
+  const animatedSwitchBackgroundStyle = useAnimatedStyle(() => {
+    const backgroundColor = interpolateColor(
+      progress.value,
+      [0, 1],
+      [components.switch.unchecked.backgroundColor, components.switch.checked.backgroundColor]
+    );
+    return { backgroundColor };
+  });
+
+  // Icon animations
+  const tickScale = useSharedValue(value ? 1 : 0);
+  const crossScale = useSharedValue(value ? 0 : 1);
+
+  const animatedTickStyle = useAnimatedStyle(() => ({
+    transform: [{ scale: tickScale.value }],
+  }));
+
+  const animatedCrossStyle = useAnimatedStyle(() => ({
+    transform: [{ scale: crossScale.value }],
+  }));
+
+  // Press feedback animation
+  const scale = useSharedValue(1);
+
+  const animatedSwitchStyle = useAnimatedStyle(() => ({
+    transform: [{ scale: scale.value }],
+  }));
+
+  useEffect(() => {
+    const userConfig = {
+      duration: isReducedMotion ? 0 : 300,
+      easing: Easing.inOut(Easing.ease),
+    };
+    // Animate the thumb position
+    offset.value = withTiming(value ? SWITCH_WIDTH - THUMB_SIZE - PADDING * 2 : 0, userConfig);
+
+    // Animate the icons
+    tickScale.value = withTiming(value ? 1 : 0, userConfig);
+    crossScale.value = withTiming(value ? 0 : 1, userConfig);
+
+    // Animate the background color with ease-in-out easing
+    progress.value = withTiming(value ? 1 : 0, userConfig);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [value, disabled]);
+
+  const toggleSwitch = () => {
+    if (disabled) return;
+    onValueChange?.(!value);
+  };
+
+  const onPressIn = () => {
+    scale.value = withSpring(0.95);
+  };
+
+  const onPressOut = () => {
+    scale.value = withSpring(1);
+  };
+
+  return (
+    <Pressable
+      onPress={toggleSwitch}
+      onPressIn={onPressIn}
+      onPressOut={onPressOut}
+      disabled={disabled}
+      aria-checked={value}
+      accessibilityRole="switch"
+      accessibilityState={{ checked: value, disabled }}
+      accessibilityLabel={accessibilityProps.accessibilityLabel}
+      accessibilityHint={accessibilityProps.accessibilityHint}
+      {...accessibilityProps}
+    >
+      {/* @ts-expect-error - Animated.createAnimatedComponent is not typed correctly in the library */}
+      <AnimatedView style={[styles.switch, animatedSwitchBackgroundStyle, animatedSwitchStyle]}>
+        {/* @ts-expect-error - Animated.createAnimatedComponent is not typed correctly in the library */}
+        <AnimatedView style={[styles.thumb, animatedThumbStyle]}>
+          {/* @ts-expect-error - Animated.createAnimatedComponent is not typed correctly in the library */}
+          <AnimatedView style={[styles.iconWrap, animatedTickStyle]}>
+            {(() => {
+              const IconAny = Icon as any;
+              return <IconAny as={TickSmallIcon} style={styles.icon as any} />;
+            })()}
+          </AnimatedView>
+          {/* @ts-expect-error - Animated.createAnimatedComponent is not typed correctly in the library */}
+          <AnimatedView style={[styles.iconWrap, animatedCrossStyle]}>
+            {(() => {
+              const IconAny = Icon as any;
+              return <IconAny as={CloseSmallIcon} style={styles.icon as any} />;
+            })()}
+          </AnimatedView>
+        </AnimatedView>
+      </AnimatedView>
+    </Pressable>
+  );
+};
+
+const styles = StyleSheet.create(theme => ({
+  switch: {
+    justifyContent: 'center',
+    variants: {
+      size: {
+        medium: {
+          width: theme.components.switch.md.width,
+          height: theme.components.switch.md.height,
+          borderRadius: theme.components.switch.radius,
+          padding: theme.components.switch.padding,
+        },
+        small: {
+          width: theme.components.switch.sm.width,
+          height: theme.components.switch.sm.height,
+          borderRadius: theme.components.switch.radius,
+          padding: theme.components.switch.padding,
+        },
+      },
+      value: {
+        true: {
+          backgroundColor: theme.components.switch.checked.backgroundColor,
+        },
+        false: {
+          backgroundColor: theme.components.switch.unchecked.backgroundColor,
+        },
+      },
+      disabled: {
+        true: {
+          opacity: theme.opacity.disabled,
+        },
+      },
+    },
+  },
+  thumb: {
+    backgroundColor: theme.components.switch.circle.backgroundColor,
+    alignItems: 'center',
+    justifyContent: 'center',
+    variants: {
+      size: {
+        medium: {
+          width: theme.components.switch.md.circle.size,
+          height: theme.components.switch.md.circle.size,
+          borderRadius: theme.components.switch.radius,
+        },
+        small: {
+          width: theme.components.switch.sm.circle.size,
+          height: theme.components.switch.sm.circle.size,
+          borderRadius: theme.components.switch.radius,
+        },
+      },
+    },
+  },
+  iconWrap: {
+    position: 'absolute',
+  },
+  icon: {
+    variants: {
+      value: {
+        true: {
+          color: theme.components.switch.checked.iconColor,
+        },
+        false: {
+          color: theme.components.switch.unchecked.iconColor,
+        },
+      },
+    },
+  },
+}));
+
+export default CustomSwitch;

package/src/components/Switch/index.ts

@@ -0,0 +1 @@
+export { default as Switch } from './Switch';

package/src/components/Textarea/Textarea.context.ts

@@ -0,0 +1,6 @@
+import { createContext, useContext } from 'react';
+import { TextareaContextValue } from './Textarea.props';
+
+export const TextareaContext = createContext<TextareaContextValue>({});
+
+export const useTextareaContext = () => useContext(TextareaContext);

package/src/components/Textarea/Textarea.docs.mdx

@@ -0,0 +1,110 @@
+import { Meta, Controls, Story, Canvas } from '@storybook/addon-docs/blocks';
+import * as Stories from './Textarea.stories';
+import { Textarea, TextareaField, Center, Pressable } from '../..';
+import { EmailMediumIcon } from '@utilitywarehouse/hearth-react-native-icons';
+import { ViewFigmaButton, BackToTopButton, UsageWrap } from '../../../docs/components';
+
+<Meta title="Forms / Textarea" />
+
+<BackToTopButton />
+
+<ViewFigmaButton url="https://www.figma.com/design/6NKZXZhFSExXrcbBgc6zTR/Hearth-Components-%26-Tokens?node-id=2356-5180&t=8rlYQ45xy8j75vwM-4" />
+
+# Textarea
+
+The input component is a text field that allows users to enter text, numbers, or other data. It is commonly used in forms and search fields.
+
+- [Playground](#playground)
+- [Usage](#usage)
+- [Props](#props)
+  - [`Textarea`](#input)
+  - [`TextareaField`](#inputfield)
+- [Accessibility](#accessibility)
+
+## Playground
+
+<Canvas of={Stories.Playground} />
+
+<Controls of={Stories.Playground} />
+
+## Usage
+
+<UsageWrap>
+  <Center>
+    <Textarea>
+      <TextareaField placeholder="Placeholder" onChange={() => console.log('###')} />
+    </Textarea>
+  </Center>
+</UsageWrap>
+
+```tsx
+import { Textarea } from '@utilitywarehouse/hearth-react-native';
+
+const MyComponent = () => {
+  const [value, setValue] = useState('');
+  const handleChange = e => {
+    setValue(e.target.value);
+  };
+  return <Textarea onChange={handleChange} value={value} placeholder="Placeholder" />;
+};
+```
+
+## Props
+
+### `Textarea`
+
+When using the component with basic usage the `Textarea` inherits all of the React Native [`TextTextarea` props](https://reactnative.dev/docs/textinput).
+Otherwise when used with children including the `TextareaField`, `TextareaSlot` and `TextareaIcon` components, the `Textarea` component inherits
+all of the React Native [`View` props](https://reactnative.dev/docs/view).
+
+| Prop             | Type                               | Default     | Description                                                                                                                                                             |
+| ---------------- | ---------------------------------- | ----------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| type             | `'text' \| 'password'`             | `'text'`    | The type of the input.                                                                                                                                                  |
+| validationStatus | `'initial' \| 'valid' \| 'invalid` | `'initial'` | The validation status of the input.                                                                                                                                     |
+| disabled         | boolean                            | `false`     | Disables the input.                                                                                                                                                     |
+| readonly         | boolean                            | `false`     | Makes the input read-only.                                                                                                                                              |
+| focused          | boolean                            | `false`     | Sets focus on the input.                                                                                                                                                |
+| value            | string                             | `-`         | The value of the input. **(Only to be used if the input has no children)**                                                                                              |
+| onChange         | function                           | `-`         | Callback function that is triggered when the input value changes. **(Only to be used if the input has no children)** **(Only to be used if the input has no children)** |
+| onBlur           | function                           | `-`         | Callback function that is triggered when the input loses focus. **(Only to be used if the input has no children)**                                                      |
+| onFocus          | function                           | `-`         | Callback function that is triggered when the input gains focus. **(Only to be used if the input has no children)**                                                      |
+| placeholder      | string                             | `-`         | The placeholder text for the input. **(Only to be used if the input has no children)**                                                                                  |
+
+If the `leadingIcon` or `trailingIcon` props are used, the `Textarea` component should not have any children.
+
+### `TextareaField`
+
+The `TextareaField` inherits all of the React Native [`TextTextarea` props](https://reactnative.dev/docs/textinput).
+
+| Prop        | Type                   | Default  | Description                                                       |
+| ----------- | ---------------------- | -------- | ----------------------------------------------------------------- |
+| type        | `'text' \| 'password'` | `'text'` | The type of the input.                                            |
+| value       | string                 | `-`      | The value of the input.                                           |
+| onChange    | function               | `-`      | Callback function that is triggered when the input value changes. |
+| onBlur      | function               | `-`      | Callback function that is triggered when the input loses focus.   |
+| onFocus     | function               | `-`      | Callback function that is triggered when the input gains focus.   |
+| placeholder | string                 | `-`      | The placeholder text for the input.                               |
+
+## Accessibility
+
+We have outlined the various features that ensure the Textarea component is accessible to all users, including those with disabilities. These features help ensure that your application is inclusive and meets accessibility standards.Adheres to the [WAI-ARIA design pattern](https://www.w3.org/TR/wai-aria-1.2/#textbox).
+
+### Keyboard
+
+- Setting the aria-label and aria-hint to help users understand the purpose and function of the Textarea
+
+### Screen Reader
+
+- Compatible with screen readers such as VoiceOver and Talk-back.
+- The accessible and aria-label props to provide descriptive information about the Textarea
+- Setting aria-traits and aria-hint to provide contextual information about the various states of the Textarea, such as "double tap to edit".
+
+### Focus Management
+
+- The onFocus and onBlur props to manage focus states and provide visual cues to users. This is especially important for users who rely on keyboard navigation.
+
+### States
+
+- In error state, aria-invalid will be passed to indicate that the Textarea has an error, and providing support for an aria-errormessage to describe the error in more detail.
+- In disabled state, aria-hidden will be passed to make input not focusable.
+- In required state, aria-required will be passed to indicate that the Textarea is required.

package/src/components/Textarea/Textarea.props.ts

@@ -0,0 +1,46 @@
+import type { TextInputProps, ViewProps } from 'react-native';
+
+export interface TextareaBaseProps {
+  /**
+   * If true, the textarea will be disabled.
+   *
+   * @type boolean
+   * @example
+   * ```tsx
+   * <Textarea disabled={true} />
+   * ```
+   */
+  disabled?: boolean;
+  /**
+   * The validation status of the Textarea component.
+   *
+   * @type 'initial' | 'valid' | 'invalid'
+   * @example
+   * ```tsx
+   * <Textarea validationStatus="valid" />
+   * ```
+   */
+  validationStatus?: 'initial' | 'valid' | 'invalid';
+  readonly?: boolean;
+  focused?: boolean;
+  placeholder?: string;
+}
+
+export interface TextareaWithChildrenProps extends TextareaBaseProps, ViewProps {}
+
+export interface TextareaWithoutChildrenProps
+  extends TextareaBaseProps,
+    Omit<TextInputProps, 'children'> {
+  children?: never;
+}
+
+type TextareaProps = TextareaWithChildrenProps | TextareaWithoutChildrenProps;
+
+export type TextareaContextValue = {
+  disabled?: TextareaProps['disabled'];
+  focused?: TextareaProps['focused'];
+  readonly?: TextareaProps['readonly'];
+  validationStatus?: TextareaProps['validationStatus'];
+};
+
+export default TextareaProps;

package/src/components/Textarea/Textarea.stories.tsx

@@ -0,0 +1,51 @@
+import { Textarea } from '.';
+import { Meta, StoryObj } from '@storybook/react-vite';
+
+const meta = {
+  title: 'Stories / Textarea',
+  component: Textarea,
+  parameters: {
+    layout: 'centered',
+  },
+  argTypes: {
+    placeholder: {
+      control: 'text',
+      description: 'The Textarea field placeholder',
+      defaultValue: '',
+    },
+
+    validationStatus: {
+      control: 'select',
+      options: ['initial', 'valid', 'invalid'],
+      description: 'The validation status of the Textarea component',
+      defaultValue: 'initial',
+    },
+    disabled: {
+      control: 'boolean',
+      description: 'Disable the Textarea component',
+      defaultValue: false,
+    },
+    readonly: {
+      control: 'boolean',
+      description: 'Read only the Textarea component',
+      defaultValue: false,
+    },
+    focused: {
+      control: 'boolean',
+      description: 'Focus the Textarea component',
+      defaultValue: false,
+    },
+  },
+  args: {
+    placeholder: 'Textarea placeholder',
+    validationStatus: 'initial',
+    disabled: false,
+    readonly: false,
+    focused: false,
+  },
+} satisfies Meta<typeof Textarea>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Playground: Story = {};

package/src/components/Textarea/Textarea.tsx

@@ -0,0 +1,47 @@
+import { createTextarea } from '@gluestack-ui/textarea';
+import type TextareaProps from './Textarea.props';
+
+import TextareaRoot from './TextareaRoot';
+import TextareaFieldComponent from './TextareaField';
+import { useFormFieldContext } from '../FormField';
+
+export const TextareaComponent = createTextarea({
+  Root: TextareaRoot,
+  Input: TextareaFieldComponent,
+});
+
+export const TextareaField = TextareaComponent.Input;
+
+const Textarea = ({
+  validationStatus = 'initial',
+  children,
+  disabled,
+  focused,
+  readonly,
+  ...props
+}: TextareaProps) => {
+  const formFieldContext = useFormFieldContext();
+  const { disabled: formFieldDisabled } = formFieldContext;
+  const validationStatusFromContext = formFieldContext?.validationStatus ?? validationStatus;
+
+  return (
+    <TextareaComponent
+      {...(children ? props : {})}
+      validationStatus={validationStatusFromContext}
+      isInvalid={validationStatusFromContext === 'invalid'}
+      isReadOnly={readonly}
+      isDisabled={formFieldDisabled ?? disabled}
+      isFocused={focused}
+    >
+      {children ? (
+        <>{children}</>
+      ) : (
+        <>
+          <TextareaField {...props} />
+        </>
+      )}
+    </TextareaComponent>
+  );
+};
+
+export default Textarea;