@utilitywarehouse/hearth-react-native 0.1.0

package/src/components/Select/Select.tsx

@@ -0,0 +1,295 @@
+import { ExpandSmallIcon } from '@utilitywarehouse/hearth-react-native-icons';
+import React, { useCallback, useRef, useState } from 'react';
+import { Pressable, View } from 'react-native';
+import { StyleSheet } from 'react-native-unistyles';
+import { BodyText } from '../BodyText';
+import {
+  BottomSheetFlatList,
+  BottomSheetModal,
+  BottomSheetScrollView,
+  BottomSheetView,
+} from '../BottomSheet';
+import { DetailText } from '../DetailText';
+import { useFormFieldContext } from '../FormField';
+import { Icon } from '../Icon';
+import { Input } from '../Input';
+import { Label } from '../Label';
+import { SelectContext } from './Select.context';
+import SelectProps, { SelectOptionItemProps } from './Select.props';
+import SelectOption from './SelectOption';
+
+const Select = ({
+  options = [],
+  value,
+  onValueChange,
+  label,
+  placeholder = 'Select an option',
+  disabled = false,
+  leadingIcon: LeadingIcon,
+  validationStatus = 'initial',
+  required = true,
+  children,
+  bottomSheetProps,
+  menuHeading,
+  readonly = false,
+  emptyText = 'No options available',
+  listProps,
+  searchable = false,
+  searchPlaceholder = 'Search',
+  ...rest
+}: SelectProps) => {
+  const formFieldContext = useFormFieldContext();
+  const validationStatusFromContext = formFieldContext?.validationStatus ?? validationStatus;
+  const isRequired = formFieldContext?.required ?? required;
+  const isDisabled = formFieldContext?.disabled ?? disabled;
+  const isReadonly = formFieldContext?.readonly ?? readonly;
+
+  const bottomSheetModalRef = useRef<BottomSheetModal>(null);
+  const [search, setSearch] = useState('');
+  const [isOpen, setIsOpen] = useState(false);
+  const [selectedLabel, setSelectedLabel] = useState<string | undefined>(undefined);
+
+  // Find selected option from options prop
+  const selectedOption = options.find(option => option.value === value);
+
+  // Extract selected label from children if not using options prop
+  React.useEffect(() => {
+    if (!selectedOption && children && value) {
+      // Find the selected child component's label
+      React.Children.forEach(children, child => {
+        if (React.isValidElement(child) && (child.props as any).value === value) {
+          setSelectedLabel((child.props as any).label);
+        }
+      });
+    } else {
+      setSelectedLabel(undefined);
+    }
+  }, [children, value, selectedOption]);
+
+  styles.useVariants({
+    disabled: isDisabled,
+    validationStatus: validationStatusFromContext,
+    readonly: isReadonly,
+    hasValue: !!selectedLabel || !!selectedOption?.label,
+  });
+
+  const filteredOptions = searchable
+    ? options.filter(option => option.label.toLowerCase().includes(search.toLowerCase()))
+    : options;
+
+  const handleClose = useCallback((index: number) => {
+    if (index === -1) {
+      setSearch('');
+      setIsOpen(false);
+      return;
+    }
+  }, []);
+
+  const openBottomSheet = useCallback(() => {
+    if (isDisabled) return;
+    bottomSheetModalRef.current?.present();
+    setIsOpen(true);
+  }, [isDisabled]);
+
+  const closeBottomSheet = useCallback(() => {
+    bottomSheetModalRef.current?.dismiss();
+    setIsOpen(false);
+    setSearch('');
+  }, []);
+
+  const renderSelectOption = useCallback(
+    ({ item }: { item: SelectOptionItemProps }) => (
+      <SelectOption
+        label={item.label}
+        value={item.value}
+        disabled={item.disabled}
+        leadingIcon={item.leadingIcon}
+        trailingIcon={item.trailingIcon}
+      />
+    ),
+    []
+  );
+
+  const renderEmptyComponent = useCallback(
+    () => (
+      <BottomSheetView style={styles.emptyContainer}>
+        <DetailText>{emptyText}</DetailText>
+      </BottomSheetView>
+    ),
+    [emptyText]
+  );
+
+  return (
+    <View {...rest} style={[styles.container, rest.style]}>
+      {!!label && (
+        <View>
+          <Label>
+            {label}
+            {!isRequired && <Label> (Optional)</Label>}
+          </Label>
+        </View>
+      )}
+      <Pressable
+        onPress={openBottomSheet}
+        disabled={isDisabled || isReadonly}
+        style={({ pressed }) => [
+          styles.selectContainer,
+          styles.pressedContainer(pressed || isOpen),
+        ]}
+      >
+        {!!LeadingIcon && (
+          <View>
+            {(() => {
+              const IconAny = Icon as any;
+              return <IconAny as={LeadingIcon} style={styles.icon as any} />;
+            })()}
+          </View>
+        )}
+
+        <View style={styles.optionContainer}>
+          <BodyText numberOfLines={1} style={styles.placeholderText}>
+            {selectedOption?.label || selectedLabel || placeholder}
+          </BodyText>
+        </View>
+
+        <View>
+          <Icon as={ExpandSmallIcon} style={styles.icon} />
+        </View>
+      </Pressable>
+
+      <BottomSheetModal
+        ref={bottomSheetModalRef}
+        snapPoints={['25%', '40%', '80%']}
+        onChange={handleClose}
+        enableDynamicSizing={false}
+        {...bottomSheetProps}
+      >
+        <SelectContext.Provider
+          value={{
+            selectedValue: value,
+            onValueChange,
+            close: closeBottomSheet,
+          }}
+        >
+          {menuHeading && (
+            <View style={styles.headingContainer}>
+              <DetailText size="lg">{menuHeading}</DetailText>
+            </View>
+          )}
+          {searchable && (
+            <View style={styles.searchContainer}>
+              <Input
+                placeholder={searchPlaceholder}
+                value={search}
+                onChangeText={setSearch}
+                type="search"
+              />
+            </View>
+          )}
+
+          {children ? (
+            <BottomSheetScrollView>{children}</BottomSheetScrollView>
+          ) : (
+            <BottomSheetFlatList
+              data={filteredOptions}
+              keyExtractor={(option: any) => option.value}
+              renderItem={renderSelectOption}
+              ListEmptyComponent={renderEmptyComponent}
+              {...listProps}
+            />
+          )}
+        </SelectContext.Provider>
+      </BottomSheetModal>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create(theme => ({
+  container: {
+    gap: theme.components.select.gap,
+  },
+  selectContainer: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    backgroundColor: theme.components.select.backgroundColor,
+    borderWidth: theme.components.select.borderWidth,
+    borderColor: theme.components.select.borderColor,
+    borderRadius: theme.components.select.borderRadius,
+    paddingHorizontal: theme.components.select.paddingHorizontal,
+    paddingVertical: theme.components.select.paddingVertical,
+    gap: theme.components.select.gap,
+    variants: {
+      disabled: {
+        true: {
+          opacity: theme.opacity.disabled,
+        },
+      },
+      readonly: {
+        true: {
+          borderColor: theme.components.select.borderColorReadOnly,
+        },
+      },
+      validationStatus: {
+        initial: {},
+        valid: {
+          borderColor: theme.components.select.borderColorValid,
+        },
+        invalid: {
+          borderColor: theme.components.select.borderColorInvalid,
+        },
+      },
+    },
+  },
+  disabledContainer: {
+    opacity: 0.5,
+  },
+  optionContainer: {
+    flex: 1,
+  },
+  headingContainer: {
+    paddingHorizontal: theme.components.bottomSheet.padding,
+    marginBottom: theme.components.select.gap,
+  },
+  searchContainer: {
+    paddingTop: 1,
+    paddingHorizontal: theme.components.bottomSheet.padding,
+    paddingBottom: theme.components.select.gap,
+  },
+  pressedContainer: pressed => ({
+    outlineWidth: pressed ? theme.components.select.borderWidth : 0,
+    outlineStyle: 'solid',
+    outlineColor: pressed ? theme.components.select.borderColor : 'transparent',
+    variants: {
+      validationStatus: {
+        initial: {},
+        valid: {
+          outlineColor: theme.components.select.borderColorValid,
+        },
+        invalid: {
+          outlineColor: theme.components.select.borderColorInvalid,
+        },
+      },
+    },
+  }),
+  icon: {
+    color: theme.components.icon.color,
+  },
+  placeholderText: {
+    variants: {
+      hasValue: {
+        false: {
+          color: theme.components.text.colorSecondary,
+        },
+      },
+    },
+  },
+
+  emptyContainer: {
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+}));
+
+Select.displayName = 'Select';
+
+export default Select;

package/src/components/Select/SelectOption.tsx

@@ -0,0 +1,107 @@
+import { Pressable, View, ViewStyle } from 'react-native';
+import { SelectOptionProps } from './Select.props';
+import { useSelectContext } from './Select.context';
+import { BodyText } from '../BodyText';
+import { StyleSheet } from 'react-native-unistyles';
+import { TickSmallIcon } from '@utilitywarehouse/hearth-react-native-icons';
+import { Icon } from '../Icon';
+
+const SelectOption = ({
+  label,
+  value,
+  leadingIcon: LeftIcon,
+  trailingIcon: RightIcon,
+  selected,
+  disabled,
+  onPress,
+}: SelectOptionProps) => {
+  const { selectedValue, onValueChange, close } = useSelectContext();
+  const isSelected = selected !== undefined ? selected : selectedValue === value;
+
+  styles.useVariants({ disabled });
+
+  const handlePress = () => {
+    if (disabled) return;
+
+    if (onPress) {
+      onPress(value);
+    } else if (onValueChange) {
+      onValueChange(value);
+    }
+
+    if (close) {
+      close();
+    }
+  };
+
+  return (
+    <Pressable
+      onPress={handlePress}
+      disabled={disabled}
+      style={({ pressed }) => [styles.container, pressed && styles.pressed]}
+    >
+      {!!LeftIcon && (
+        <View>
+          {(() => {
+            const IconAny = Icon as any;
+            return <IconAny style={styles.icon as ViewStyle} as={LeftIcon} />;
+          })()}
+        </View>
+      )}
+
+      <View style={styles.labelContainer}>
+        <BodyText>{label}</BodyText>
+      </View>
+
+      {isSelected && (
+        <View>
+          <TickSmallIcon style={styles.icon as ViewStyle} />
+        </View>
+      )}
+      {!!RightIcon && !isSelected && (
+        <View>
+          {(() => {
+            const IconAny = Icon as any;
+            return <IconAny style={styles.icon as ViewStyle} as={RightIcon} />;
+          })()}
+        </View>
+      )}
+    </Pressable>
+  );
+};
+
+const styles = StyleSheet.create(theme => ({
+  container: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: theme.components.select.dropdown.item.gap,
+    borderRadius: theme.components.select.dropdown.item.borderRadius,
+    paddingVertical: theme.components.select.dropdown.item.padding,
+    paddingHorizontal: theme.components.select.dropdown.padding,
+    variants: {
+      disabled: {
+        true: {
+          opacity: theme.opacity.disabled,
+        },
+      },
+    },
+    _web: {
+      _hover: {
+        backgroundColor: theme.components.select.dropdown.item.backgroundColorHover,
+      },
+    },
+  },
+  icon: {
+    color: theme.components.select.dropdown.item.foregroundColor,
+  },
+  pressed: {
+    backgroundColor: theme.components.select.dropdown.item.backgroundColorActive,
+  },
+  labelContainer: {
+    flex: 1,
+  },
+}));
+
+SelectOption.displayName = 'SelectOption';
+
+export default SelectOption;

package/src/components/Select/index.ts

@@ -0,0 +1,7 @@
+export { default as Select } from './Select';
+export { default as SelectOption } from './SelectOption';
+export type {
+  default as SelectProps,
+  SelectOptionProps,
+  SelectOptionItemProps,
+} from './Select.props';

package/src/components/Skeleton/Skeleton.docs.mdx

@@ -0,0 +1,38 @@
+import { Meta, Canvas, Story, Controls } from '@storybook/addon-docs/blocks';
+import * as Stories from './Skeleton.stories';
+import { BodyText, Center, Skeleton } from '../../';
+
+<Meta title="Components / Skeleton" />
+
+# Skeleton
+
+The `Skeleton` component is used to show a loading state for a component that is still loading.
+
+## Usage
+
+<Canvas of={Stories.Playground} />
+
+<Controls of={Stories.Playground} />
+
+```jsx
+import { Center, Skeleton, Text } from '@utilitywarehouse/hearth-react-native';
+
+const MyComponent = () => (
+  const [loading, setLoading] = useState(true);
+
+  return (
+    <Center>
+      {loading ? <Skeleton width={200} height={16} /> : <BodyText>Loaded</BodyText>}
+    </Center>
+  );
+);
+```
+
+## Props
+
+| Name              | Type     | Default        | Description                           |
+| ----------------- | -------- | -------------- | ------------------------------------- |
+| `width`           | `number` | `-`            | The width of the skeleton.            |
+| `height`          | `number` | `-`            | The height of the skeleton.           |
+| `backgroundColor` | `string` | `warmWhite100` | The background color of the skeleton. |
+| `borderRadius`    | `number` | `xs`           | The border radius of the skeleton.    |

package/src/components/Skeleton/Skeleton.props.ts

@@ -0,0 +1,11 @@
+import type { DimensionValue, ViewProps } from 'react-native';
+import type { ColorValue, BorderRadiusValue } from '../../types';
+
+interface SkeletonProps extends ViewProps {
+  width: DimensionValue;
+  height: DimensionValue;
+  backgroundColor?: ColorValue;
+  borderRadius?: BorderRadiusValue;
+}
+
+export default SkeletonProps;

package/src/components/Skeleton/Skeleton.stories.tsx

@@ -0,0 +1,33 @@
+import { Meta, StoryObj } from '@storybook/react-vite';
+import { Skeleton } from '.';
+import { coloursAsArray } from '../../utils';
+
+const meta = {
+  title: 'Stories / Skeleton',
+  component: Skeleton,
+  parameters: {
+    layout: 'centered',
+  },
+  argTypes: {
+    backgroundColor: {
+      options: coloursAsArray(),
+      control: 'select',
+      description: 'Background color of the skeleton. Use the color name from the theme.',
+    },
+    width: { control: 'number' },
+    height: { control: 'number' },
+    borderRadius: { control: 'number' },
+  },
+  args: {
+    backgroundColor: undefined,
+    width: 200,
+    height: 16,
+  },
+} satisfies Meta<typeof Skeleton>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Playground: Story = {
+  render: args => <Skeleton {...args} />,
+};

package/src/components/Skeleton/Skeleton.tsx

@@ -0,0 +1,77 @@
+import React, { useMemo } from 'react';
+import { AnimatableNumericValue } from 'react-native';
+import Animated, {
+  Easing,
+  useAnimatedStyle,
+  useSharedValue,
+  withRepeat,
+  withTiming,
+} from 'react-native-reanimated';
+import { StyleSheet } from 'react-native-unistyles';
+import { useTheme } from '../../hooks';
+import type { ColorValue } from '../../types';
+import { getFlattenedColorValue } from '../../utils';
+import getStyleValue from '../../utils/getStyleValue';
+import type SkeletonProps from './Skeleton.props';
+
+const Skeleton = ({
+  width,
+  height,
+  backgroundColor: bg,
+  borderRadius,
+  style,
+  ...props
+}: SkeletonProps) => {
+  const opacity = useSharedValue(1);
+
+  const { components } = useTheme();
+
+  const backgroundColor = bg ?? components.skeleton.loadingColor;
+
+  const { color: themeColor, colorMode, borderRadius: themeBorderRadius } = useTheme();
+  const backgroundColorValue: ColorValue = useMemo(
+    () => getFlattenedColorValue(backgroundColor, themeColor),
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [backgroundColor, colorMode]
+  );
+
+  const borderRadiusValue: AnimatableNumericValue = useMemo(
+    () => getStyleValue(borderRadius, themeBorderRadius),
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [borderRadius]
+  );
+
+  const animatedStyle = useAnimatedStyle(() => {
+    return {
+      opacity: opacity.value,
+      width,
+      height,
+      ...(backgroundColorValue ? { backgroundColor: backgroundColorValue } : {}),
+      ...(borderRadiusValue ? { borderRadius: borderRadiusValue } : {}),
+    };
+  }, [opacity]);
+
+  React.useEffect(() => {
+    opacity.value = withRepeat(
+      withTiming(0.5, {
+        duration: 1000,
+        easing: Easing.inOut(Easing.ease),
+      }),
+      -1,
+      true
+    );
+  }, [opacity]);
+
+  return <Animated.View {...props} style={[styles.skeleton, style, animatedStyle]} />;
+};
+
+Skeleton.displayName = 'Skeleton';
+
+const styles = StyleSheet.create(theme => ({
+  skeleton: {
+    backgroundColor: theme.components.skeleton.loadingColor,
+    borderRadius: theme.borderRadius.xs,
+  },
+}));
+
+export default Skeleton;

package/src/components/Skeleton/index.ts

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

package/src/components/Spinner/Spinner.docs.mdx

@@ -0,0 +1,62 @@
+import { Canvas, Controls, Meta, Primary, Story } from '@storybook/addon-docs/blocks';
+import { color } from '@utilitywarehouse/hearth-tokens/js';
+import { Box, Center, Pressable, Spinner } from '../..';
+import { BackToTopButton, UsageWrap, ViewFigmaButton } from '../../../docs/components';
+import * as Stories from './Spinner.stories';
+
+<Meta title="Components / Spinner" />
+
+<BackToTopButton />
+
+<ViewFigmaButton url="https://www.figma.com/design/6NKZXZhFSExXrcbBgc6zTR/Hearth-Components?node-id=1-158" />
+
+# Spinner
+
+Using a Spinner is a common method for indicating that an asynchronous process is ongoing. Additionally, it informs users that they should refrain from clicking or tapping the UI until the loading state has been resolved.
+
+- [Playground](#playground)
+- [Usage](#usage)
+- [Props](#props)
+- [Sizes](#sizes)
+
+## Playground
+
+<Canvas of={Stories.Playground} />
+
+<Controls of={Stories.Playground} />
+
+## Usage
+
+The Spinner can be used independently (it's a self-contained component) or in conjunction with other components,
+such as in the loading state of a `Button` or `Input` Search retrieving data. It can also be used inside a `Dialog`
+with text, or directly in a container on the screen when we want the user to wait and avoid performing any actions.
+
+<UsageWrap>
+  <Center>
+    <Spinner size="lg" color={color.blue['400']} />
+  </Center>
+</UsageWrap>
+
+```jsx
+import { Spinner, Center } from '@utilitywarehouse/hearth-react-native';
+import { color } from '@utilitywarehouse/hearth-tokens';
+
+const MyComponent = () => (
+  <Center>
+    <Spinner size="lg" color={color.blue['400']} />
+  </Center>
+);
+```
+
+## Props
+
+| Property | Type                          | Description               | Default |
+| -------- | ----------------------------- | ------------------------- | ------- |
+| `size`   | `'xs' \|'sm' \| 'md' \| 'lg'` | The size of the spinner.  | `md`    |
+| `color`  | `string`                      | The color of the spinner. |         |
+
+## Sizes
+
+The `Spinner` component has different sizes to style the spinner.
+
+<Canvas of={Stories.KitchenSink} />

package/src/components/Spinner/Spinner.figma.tsx

@@ -0,0 +1,19 @@
+import figma from '@figma/code-connect';
+import { color } from '@utilitywarehouse/hearth-tokens/js';
+import { Spinner } from './';
+
+figma.connect(
+  Spinner,
+  'https://www.figma.com/design/6NKZXZhFSExXrcbBgc6zTR/Hearth-Components?node-id=61-195&t=j6vWFfxRVLbnAYhY-4',
+  {
+    props: {
+      size: figma.enum('Size', {
+        'XS-20': 'xs',
+        'SM-24': 'sm',
+        'MD-32': 'md',
+        'LG-44': 'lg',
+      }),
+    },
+    example: ({ size }) => <Spinner size={size} color={color.purple['700']} />,
+  }
+);

package/src/components/Spinner/Spinner.props.ts

@@ -0,0 +1,10 @@
+import { RefAttributes } from 'react';
+import { type ViewProps } from 'react-native';
+import { ColorValue } from '../../types';
+
+interface SpinnerProps extends ViewProps, RefAttributes<any> {
+  size?: 'xs' | 'sm' | 'md' | 'lg';
+  color?: ColorValue;
+}
+
+export default SpinnerProps;