@utilitywarehouse/hearth-react-native 0.1.0 → 0.3.0

package/src/components/SectionHeader/Sectionheader.docs.mdx

@@ -0,0 +1,83 @@
+import { Canvas, Controls, Meta, Story } from '@storybook/addon-docs/blocks';
+import { SectionHeader } from '../..';
+import { BackToTopButton, UsageWrap, ViewFigmaButton } from '../../../docs/components';
+import * as Stories from './SectionHeader.stories';
+
+<Meta title="Components / Section Header" />
+
+<ViewFigmaButton url="https://www.figma.com/design/6NKZXZhFSExXrcbBgc6zTR/Hearth-Components-%26-Tokens?node-id=1-163" />
+
+<BackToTopButton />
+
+# Section Header
+
+Use the `Section Header` component to help define and separate content within a screen. It provides structure, clarity, and improves page scannability for users. It is nested within components, such as List, but can be used outside of components too.
+
+- [Playground](#playground)
+- [Anatomy](#anatomy)
+- [Usage](#usage)
+- [Props](#props)
+
+## Playground
+
+<Canvas of={Stories.Playground} />
+
+<Controls of={Stories.Playground} />
+
+## Anatomy
+
+Section Header consists of: Heading, Helper Text and Link
+
+### Heading
+
+Being a header component, the heading element is required. It should clearly describe the content it is grouping.
+
+Headings should be short and meaningful - they should clearly describe the content that follows.
+
+Don't let titles get too wordy. Simplify the title as much as possible, and add a 1-2 line subtitle if necessary.
+
+### Helper text
+
+A helper text property is included in the component to be able to add helper text if required.
+
+Use helper text when users need extra clarity or explanation before engaging with the section.
+
+### Link
+
+The Section Header component includes an optional Link that provides users with a related navigation option.
+
+Use the Link to provide a shortcut to additional details or a more comprehensive view.
+
+Use when users may need to navigate away or view extended content (e.g. view all)
+
+## Usage
+
+<UsageWrap>
+  <SectionHeader heading="Heading" helperText="Helper text" linkText="See more" />
+</UsageWrap>
+
+```tsx
+import { SectionHeader } from '@utilitywarehouse/hearth-react-native';
+
+const MyComponent = () => (
+  <SectionHeader heading="Heading" helperText="Helper text" linkText="See more" />
+);
+```
+
+## Props
+
+| Name             | Type                                         | Default    | Description                                            |
+| ---------------- | -------------------------------------------- | ---------- | ------------------------------------------------------ |
+| heading          | `string`                                     |            | The text to display in the heading of the list.        |
+| helperText       | `string`                                     |            | The helper text to display in the heading of the list. |
+| linkText         | `string`                                     |            | The text for the link in the heading.                  |
+| linkHref         | `string`                                     |            | The href for the link in the heading.                  |
+| linkOnPress      | `() => void`                                 |            | Callback function when the link is pressed.            |
+| linkTarget       | `'_blank' \| '_self' \| '_parent' \| '_top'` | `'_blank'` | Target for the link in the heading.                    |
+| linkIcon         | `ComponentType`                              |            | Icon for the link.                                     |
+| linkIconPosition | `'left' \| 'right'`                          | `'right'`  | Position of the icon in the link.                      |
+| linkShowIcon     | `boolean`                                    | `true`     | Whether to show the icon in the link.                  |
+
+## Variants
+
+<Canvas of={Stories.KitchenSink} />

package/src/components/SectionHeader/index.ts

@@ -0,0 +1,4 @@
+export { default as SectionHeader } from './SectionHeader';
+export { default as SectionHeaderHeading } from './SectionHeaderHeading';
+export { default as SectionHeaderHelperText } from './SectionHeaderHelperText';
+export { default as SectionHeaderTextContent } from './SectionHeaderTextContent';

package/src/components/Select/Select.tsx

@@ -211,9 +211,9 @@ const styles = StyleSheet.create(theme => ({
   selectContainer: {
     flexDirection: 'row',
     alignItems: 'center',
-    backgroundColor: theme.components.select.backgroundColor,
+    backgroundColor: theme.color.surface.neutral.strong,
     borderWidth: theme.components.select.borderWidth,
-    borderColor: theme.components.select.borderColor,
+    borderColor: theme.color.border.strong,
     borderRadius: theme.components.select.borderRadius,
     paddingHorizontal: theme.components.select.paddingHorizontal,
     paddingVertical: theme.components.select.paddingVertical,
@@ -226,16 +226,16 @@ const styles = StyleSheet.create(theme => ({
       },
       readonly: {
         true: {
-          borderColor: theme.components.select.borderColorReadOnly,
+          borderColor: theme.color.border.subtle,
         },
       },
       validationStatus: {
         initial: {},
         valid: {
-          borderColor: theme.components.select.borderColorValid,
+          borderColor: theme.color.feedback.positive.border,
         },
         invalid: {
-          borderColor: theme.components.select.borderColorInvalid,
+          borderColor: theme.color.feedback.danger.border,
         },
       },
     },
@@ -258,27 +258,27 @@ const styles = StyleSheet.create(theme => ({
   pressedContainer: pressed => ({
     outlineWidth: pressed ? theme.components.select.borderWidth : 0,
     outlineStyle: 'solid',
-    outlineColor: pressed ? theme.components.select.borderColor : 'transparent',
+    outlineColor: pressed ? theme.color.border.strong : 'transparent',
     variants: {
       validationStatus: {
         initial: {},
         valid: {
-          outlineColor: theme.components.select.borderColorValid,
+          outlineColor: theme.color.feedback.positive.border,
         },
         invalid: {
-          outlineColor: theme.components.select.borderColorInvalid,
+          outlineColor: theme.color.feedback.danger.border,
         },
       },
     },
   }),
   icon: {
-    color: theme.components.icon.color,
+    color: theme.color.icon.primary,
   },
   placeholderText: {
     variants: {
       hasValue: {
         false: {
-          color: theme.components.text.colorSecondary,
+          color: theme.color.text.secondary,
         },
       },
     },

package/src/components/Select/SelectOption.tsx

@@ -1,10 +1,10 @@
+import { TickSmallIcon } from '@utilitywarehouse/hearth-react-native-icons';
 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 { BodyText } from '../BodyText';
 import { Icon } from '../Icon';
+import { useSelectContext } from './Select.context';
+import { SelectOptionProps } from './Select.props';
 
 const SelectOption = ({
   label,
@@ -87,15 +87,15 @@ const styles = StyleSheet.create(theme => ({
     },
     _web: {
       _hover: {
-        backgroundColor: theme.components.select.dropdown.item.backgroundColorHover,
+        backgroundColor: theme.color.interactive.functional.surface.subtle.hover,
       },
     },
   },
   icon: {
-    color: theme.components.select.dropdown.item.foregroundColor,
+    color: theme.color.interactive.functional.foreground.subtle,
   },
   pressed: {
-    backgroundColor: theme.components.select.dropdown.item.backgroundColorActive,
+    backgroundColor: theme.color.interactive.functional.surface.subtle.active,
   },
   labelContainer: {
     flex: 1,

package/src/components/Spinner/Spinner.tsx

@@ -18,8 +18,8 @@ import { ColorValue } from '../../types';
 import { getFlattenedColorValue } from '../../utils';
 import type SpinnerProps from './Spinner.props';
 
-const AnimatedSvg = Animated.createAnimatedComponent(Svg);
-const AnimatedCircle = Animated.createAnimatedComponent(Circle);
+const AnimatedSvg = Animated.createAnimatedComponent(Svg as React.ComponentType<any>);
+const AnimatedCircle = Animated.createAnimatedComponent(Circle as React.ComponentType<any>);
 
 const SpinnerRoot = ({ size = 'md', color, ...props }: SpinnerProps) => {
   const { components } = useTheme();
@@ -63,7 +63,7 @@ const SpinnerRoot = ({ size = 'md', color, ...props }: SpinnerProps) => {
   const animatedCircleProps = useAnimatedProps(() => {
     return {
       strokeDashoffset: CIRCUMFERENCE * (1 - progress.value),
-    };
+    } as any;
   }, [progress]);
 
   const animatedSvgStyle = useAnimatedStyle(

package/src/components/Spinner/Spinner.web.tsx

@@ -1,25 +1,25 @@
 /* eslint-disable react-hooks/exhaustive-deps */
+import { createSpinner } from '@gluestack-ui/spinner';
 import React, { useCallback, useEffect, useMemo } from 'react';
+import { View } from 'react-native';
 import Animated, {
-  useSharedValue,
-  withTiming,
-  useAnimatedProps,
   Easing,
-  withSequence,
-  withRepeat,
+  useAnimatedProps,
   useReducedMotion,
+  useSharedValue,
+  withRepeat,
+  withSequence,
+  withTiming,
 } from 'react-native-reanimated';
 import { Circle, G, Svg } from 'react-native-svg';
-import type SpinnerProps from './Spinner.props';
-import { createSpinner } from '@gluestack-ui/spinner';
 import { StyleSheet } from 'react-native-unistyles';
-import { View } from 'react-native';
 import { useTheme } from '../../hooks';
-import { getFlattenedColorValue } from '../../utils';
 import { ColorValue } from '../../types';
+import { getFlattenedColorValue } from '../../utils';
+import type SpinnerProps from './Spinner.props';
 
-const AnimatedSvg = Animated.createAnimatedComponent(Svg);
-const AnimatedCircle = Animated.createAnimatedComponent(Circle);
+const AnimatedSvg = Animated.createAnimatedComponent(Svg as React.ComponentType<any>);
+const AnimatedCircle = Animated.createAnimatedComponent(Circle as React.ComponentType<any>);
 
 const SpinnerRoot = ({ size = 'md', color, ...props }: SpinnerProps) => {
   const { components } = useTheme();
@@ -63,7 +63,7 @@ const SpinnerRoot = ({ size = 'md', color, ...props }: SpinnerProps) => {
   const animatedCircleProps = useAnimatedProps(() => {
     return {
       strokeDashoffset: CIRCUMFERENCE * (1 - progress.value),
-    };
+    } as any;
   }, [progress]);
 
   const animatedSvgProps = useAnimatedProps(() => {

package/src/components/Switch/Switch.tsx

@@ -22,7 +22,7 @@ const CustomSwitch = ({
   size = 'medium',
   ...accessibilityProps
 }: SwitchProps) => {
-  const { components } = useTheme();
+  const { components, color } = 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;
@@ -42,7 +42,10 @@ const CustomSwitch = ({
     const backgroundColor = interpolateColor(
       progress.value,
       [0, 1],
-      [components.switch.unchecked.backgroundColor, components.switch.checked.backgroundColor]
+      [
+        color.interactive.functional.surface.strong.default,
+        color.interactive.brand.surface.strong.default,
+      ]
     );
     return { backgroundColor };
   });
@@ -149,10 +152,10 @@ const styles = StyleSheet.create(theme => ({
       },
       value: {
         true: {
-          backgroundColor: theme.components.switch.checked.backgroundColor,
+          backgroundColor: theme.color.interactive.brand.surface.strong.default,
         },
         false: {
-          backgroundColor: theme.components.switch.unchecked.backgroundColor,
+          backgroundColor: theme.color.interactive.functional.surface.strong.default,
         },
       },
       disabled: {
@@ -163,7 +166,7 @@ const styles = StyleSheet.create(theme => ({
     },
   },
   thumb: {
-    backgroundColor: theme.components.switch.circle.backgroundColor,
+    backgroundColor: theme.color.surface.neutral.strong,
     alignItems: 'center',
     justifyContent: 'center',
     variants: {
@@ -188,10 +191,10 @@ const styles = StyleSheet.create(theme => ({
     variants: {
       value: {
         true: {
-          color: theme.components.switch.checked.iconColor,
+          color: theme.color.icon.primary,
         },
         false: {
-          color: theme.components.switch.unchecked.iconColor,
+          color: theme.color.icon.primary,
         },
       },
     },

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

@@ -15,7 +15,6 @@ 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 = ({
@@ -25,7 +24,7 @@ const CustomSwitch = ({
   size = 'medium',
   ...accessibilityProps
 }: SwitchProps) => {
-  const { components } = useTheme();
+  const { components, color } = 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;
@@ -45,7 +44,10 @@ const CustomSwitch = ({
     const backgroundColor = interpolateColor(
       progress.value,
       [0, 1],
-      [components.switch.unchecked.backgroundColor, components.switch.checked.backgroundColor]
+      [
+        color.interactive.functional.surface.strong.default,
+        color.interactive.brand.surface.strong.default,
+      ]
     );
     return { backgroundColor };
   });
@@ -112,18 +114,14 @@ const CustomSwitch = ({
       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;
@@ -156,10 +154,10 @@ const styles = StyleSheet.create(theme => ({
       },
       value: {
         true: {
-          backgroundColor: theme.components.switch.checked.backgroundColor,
+          backgroundColor: theme.color.interactive.brand.surface.strong.default,
         },
         false: {
-          backgroundColor: theme.components.switch.unchecked.backgroundColor,
+          backgroundColor: theme.color.interactive.functional.surface.strong.default,
         },
       },
       disabled: {
@@ -170,7 +168,7 @@ const styles = StyleSheet.create(theme => ({
     },
   },
   thumb: {
-    backgroundColor: theme.components.switch.circle.backgroundColor,
+    backgroundColor: theme.color.surface.neutral.strong,
     alignItems: 'center',
     justifyContent: 'center',
     variants: {
@@ -195,10 +193,10 @@ const styles = StyleSheet.create(theme => ({
     variants: {
       value: {
         true: {
-          color: theme.components.switch.checked.iconColor,
+          color: theme.color.icon.primary,
         },
         false: {
-          color: theme.components.switch.unchecked.iconColor,
+          color: theme.color.icon.primary,
         },
       },
     },

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;

package/src/components/Tabs/Tab.tsx

@@ -0,0 +1,113 @@
+import { useCallback, useRef } from 'react';
+import { Platform, Pressable, View } from 'react-native';
+import { StyleSheet } from 'react-native-unistyles';
+import { DetailText } from '../DetailText';
+import { Icon } from '../Icon';
+import type TabProps from './Tab.props';
+import { useTabsContext } from './Tabs.context';
+
+import { createPressable } from '@gluestack-ui/pressable';
+
+const Tab = ({
+  value,
+  children,
+  icon,
+  disabled,
+  style,
+  states,
+  ...props
+}: TabProps & { states?: { active?: boolean; disabled?: boolean } }) => {
+  const {
+    value: active,
+    select,
+    size,
+    disabled: allDisabled,
+    registerTabLayout,
+  } = useTabsContext();
+  const { active: pressed } = states || { active: false };
+  const isActive = active === value;
+  styles.useVariants({ size, pressed });
+  const ref = useRef<View | null>(null);
+  const handlePress = () => {
+    if (disabled || allDisabled) return;
+    select(value);
+  };
+  const handleLayout = useCallback(
+    (e: any) => {
+      const { x, y, width, height } = e.nativeEvent.layout;
+      registerTabLayout(value, { x, y, width, height });
+    },
+    [value, registerTabLayout]
+  );
+  return (
+    <Pressable
+      ref={ref}
+      accessibilityRole="tab"
+      accessibilityState={{ selected: isActive, disabled: !!(disabled || allDisabled) }}
+      onPress={handlePress}
+      onLayout={handleLayout}
+      style={[styles.tab, style]}
+      {...(Platform.OS === 'web'
+        ? { id: `tab-${value}`, 'aria-controls': `tabpanel-${value}` }
+        : null)}
+      {...props}
+    >
+      <View style={styles.content}>
+        {icon ? <Icon as={icon} /> : null}
+        <DetailText size={size}>{children}</DetailText>
+      </View>
+    </Pressable>
+  );
+};
+
+Tab.displayName = 'Tab';
+
+const styles = StyleSheet.create(theme => ({
+  tab: {
+    position: 'relative',
+    backgroundColor: 'transparent',
+    alignItems: 'center',
+    justifyContent: 'center',
+    paddingHorizontal: theme.components.tabs.item.paddingHorizontal,
+    paddingVertical: theme.components.tabs.item.paddingVertical,
+    _web: {
+      _hover: {
+        backgroundColor: theme.color.interactive.neutral.surface.subtle.hover,
+      },
+      '_focus-visible': {
+        ...theme.helpers.focusVisible,
+        outlineOffset: -2,
+        borderRadius: theme.borderRadius.sm,
+      },
+      _active: {
+        backgroundColor: theme.color.interactive.neutral.surface.subtle.active,
+      },
+    },
+    variants: {
+      size: {
+        md: { height: theme.components.tabs.md.height },
+        lg: { height: theme.components.tabs.lg.height },
+      },
+      pressed: {
+        true: {
+          backgroundColor: theme.color.interactive.neutral.surface.subtle.active,
+        },
+        false: {},
+      },
+    },
+  },
+  content: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: theme.components.tabs.item.gap,
+  },
+  badge: {
+    marginLeft: theme.space[25],
+  },
+}));
+
+const PressableTab = createPressable({ Root: Tab });
+
+PressableTab.displayName = 'Tab';
+
+export default PressableTab;

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

@@ -0,0 +1,10 @@
+import type { ReactNode } from 'react';
+import type { ViewProps } from 'react-native';
+
+export interface TabPanelProps extends ViewProps {
+  value: string;
+  children: ReactNode;
+  keepMounted?: boolean;
+}
+
+export default TabPanelProps;

package/src/components/Tabs/TabPanel.tsx

@@ -0,0 +1,46 @@
+import { memo } from 'react';
+import { Platform, View } from 'react-native';
+import { StyleSheet } from 'react-native-unistyles';
+import type TabPanelProps from './TabPanel.props';
+import { useTabsContext } from './Tabs.context';
+
+const TabPanel = ({ value, children, keepMounted, style, ...rest }: TabPanelProps) => {
+  const { value: active } = useTabsContext();
+  const isActive = active === value;
+  if (!isActive && !keepMounted) return null;
+  styles.useVariants({ active: isActive });
+  return (
+    <View
+      {...(Platform.OS === 'web'
+        ? {
+            id: `tabpanel-${value}`,
+            role: 'tabpanel',
+            'aria-labelledby': `tab-${value}`,
+            hidden: !isActive || undefined,
+          }
+        : { accessibilityRole: 'summary' })}
+      importantForAccessibility={isActive ? undefined : 'no-hide-descendants'}
+      accessibilityElementsHidden={isActive ? undefined : true}
+      style={[styles.panel, style]}
+      {...rest}
+    >
+      {children}
+    </View>
+  );
+};
+
+const styles = StyleSheet.create(theme => ({
+  panel: {
+    flex: 1,
+    width: '100%',
+    paddingTop: theme.space[100],
+    variants: {
+      active: {
+        true: { display: 'flex' },
+        false: { display: 'none' },
+      },
+    },
+  },
+}));
+
+export default memo(TabPanel);

package/src/components/Tabs/Tabs.context.ts

@@ -0,0 +1,26 @@
+import { createContext, useContext } from 'react';
+import { SharedValue } from 'react-native-reanimated';
+
+export interface TabsContextValue {
+  value: string | undefined;
+  size: 'md' | 'lg';
+  disabled?: boolean;
+  select: (value: string) => void;
+  registerTabLayout: (
+    value: string,
+    layout: { x: number; y: number; width: number; height: number }
+  ) => void;
+  getTabLayout: (
+    value: string
+  ) => { x: number; y: number; width: number; height: number } | undefined;
+  indicatorXSV: SharedValue<number>;
+  indicatorSizeSV: SharedValue<number>;
+}
+
+export const TabsContext = createContext<TabsContextValue | undefined>(undefined);
+
+export const useTabsContext = () => {
+  const ctx = useContext(TabsContext);
+  if (!ctx) throw new Error('Tab / TabPanel must be used within Tabs');
+  return ctx;
+};