@utilitywarehouse/hearth-react-native 0.34.5 → 0.35.0

package/src/components/Switch/Switch.tsx

@@ -1,209 +0,0 @@
-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 { useAnimatedTheme } from 'react-native-unistyles/reanimated';
-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 theme = useAnimatedTheme();
-  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 }],
-    }),
-    [offset]
-  );
-
-  const animatedSwitchBackgroundStyle = useAnimatedStyle(() => {
-    const backgroundColor = interpolateColor(
-      progress.value,
-      [0, 1],
-      [
-        theme.value.color.interactive.functional.surface.strong.default,
-        theme.value.color.interactive.brand.surface.strong.default,
-      ]
-    );
-    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.color.interactive.brand.surface.strong.default,
-        },
-        false: {
-          backgroundColor: theme.color.interactive.functional.surface.strong.default,
-        },
-      },
-      disabled: {
-        true: {
-          opacity: theme.opacity.disabled,
-        },
-      },
-    },
-  },
-  thumb: {
-    backgroundColor: theme.color.surface.neutral.strong,
-    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.color.icon.primary,
-        },
-        false: {
-          color: theme.color.icon.primary,
-        },
-      },
-    },
-  },
-}));
-
-export default CustomSwitch;

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

@@ -1,207 +0,0 @@
-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';
-
-const AnimatedView = Animated.createAnimatedComponent(View);
-
-const CustomSwitch = ({
-  value = false,
-  onValueChange,
-  disabled = false,
-  size = 'medium',
-  ...accessibilityProps
-}: SwitchProps) => {
-  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;
-  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],
-      [
-        color.interactive.functional.surface.strong.default,
-        color.interactive.brand.surface.strong.default,
-      ]
-    );
-    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}
-    >
-      <AnimatedView style={[styles.switch, animatedSwitchBackgroundStyle, animatedSwitchStyle]}>
-        <AnimatedView style={[styles.thumb, animatedThumbStyle]}>
-          <AnimatedView style={[styles.iconWrap, animatedTickStyle]}>
-            {(() => {
-              const IconAny = Icon as any;
-              return <IconAny as={TickSmallIcon} style={styles.icon as any} />;
-            })()}
-          </AnimatedView>
-
-          <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.color.interactive.brand.surface.strong.default,
-        },
-        false: {
-          backgroundColor: theme.color.interactive.functional.surface.strong.default,
-        },
-      },
-      disabled: {
-        true: {
-          opacity: theme.opacity.disabled,
-        },
-      },
-    },
-  },
-  thumb: {
-    backgroundColor: theme.color.surface.neutral.strong,
-    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.color.icon.primary,
-        },
-        false: {
-          color: theme.color.icon.primary,
-        },
-      },
-    },
-  },
-}));
-
-export default CustomSwitch;

package/src/components/Switch/index.ts

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

package/src/components/Table/Table.context.tsx

@@ -1,23 +0,0 @@
-import { createContext, useContext } from 'react';
-import type { TableProps } from './Table.props';
-
-type TableContainer = TableProps['container'];
-type TableColumnWidths = NonNullable<TableProps['columnWidths']>;
-
-interface TableContextValue {
-  columnWidths: TableColumnWidths;
-  container: TableContainer;
-  columnCount: number;
-  hasPagination: boolean;
-}
-
-const TableContext = createContext<TableContextValue>({
-  columnWidths: [],
-  container: 'none',
-  columnCount: 1,
-  hasPagination: false,
-});
-
-export const TableContextProvider = TableContext.Provider;
-
-export const useTableContext = () => useContext(TableContext);

package/src/components/Table/Table.docs.mdx

@@ -1,239 +0,0 @@
-import { Canvas, Controls, Meta } from '@storybook/addon-docs/blocks';
-import {
-  Box,
-  Center,
-  Table,
-  TableBody,
-  TableCell,
-  TableHeader,
-  TableHeaderCell,
-  TablePagination,
-  TableRow,
-} from '../..';
-import { BackToTopButton, UsageWrap, ViewFigmaButton } from '../../../docs/components';
-import * as Stories from './Table.stories';
-
-<Meta title="Components / Table" />
-
-<BackToTopButton />
-
-<ViewFigmaButton url="https://www.figma.com/design/6NKZXZhFSExXrcbBgc6zTR/Hearth-Components---Tokens?node-id=6403-17515&t=pZwKJYFo1y1QRQD1-4" />
-
-# Table
-
-Table arranges structured data into rows and columns, with optional pagination beneath the rows. The React Native version uses horizontal scrolling automatically when the columns need more space than the viewport allows.
-
-- [Playground](#playground)
-- [Usage](#usage)
-- [Props](#props)
-- [Examples](#examples)
-
-## Playground
-
-<Canvas of={Stories.Playground} />
-
-<Controls of={Stories.Playground} />
-
-## Usage
-
-<UsageWrap>
-  <Center>
-    <Box style={{ width: 520, maxWidth: '100%' }}>
-      <Table container="subtle">
-        <TableHeader color="purple">
-          <TableHeaderCell>Name</TableHeaderCell>
-          <TableHeaderCell>Email</TableHeaderCell>
-          <TableHeaderCell>City</TableHeaderCell>
-        </TableHeader>
-        <TableBody>
-          <TableRow>
-            <TableHeaderCell row>Alex Morgan</TableHeaderCell>
-            <TableCell>alex@example.com</TableCell>
-            <TableCell>London</TableCell>
-          </TableRow>
-        </TableBody>
-      </Table>
-    </Box>
-  </Center>
-</UsageWrap>
-
-```tsx
-import {
-  Table,
-  TableBody,
-  TableCell,
-  TableHeader,
-  TableHeaderCell,
-  TableRow,
-} from '@utilitywarehouse/hearth-react-native';
-
-const MyComponent = () => (
-  <Table container="subtle">
-    <TableHeader color="purple">
-      <TableHeaderCell>Name</TableHeaderCell>
-      <TableHeaderCell>Email</TableHeaderCell>
-      <TableHeaderCell>City</TableHeaderCell>
-    </TableHeader>
-    <TableBody>
-      <TableRow>
-        <TableHeaderCell row>Alex Morgan</TableHeaderCell>
-        <TableCell>alex@example.com</TableCell>
-        <TableCell>London</TableCell>
-      </TableRow>
-    </TableBody>
-  </Table>
-);
-```
-
-## Props
-
-### Table Props
-
-| Property       | Type                                              | Description                                                                                             | Default     |
-| -------------- | ------------------------------------------------- | ------------------------------------------------------------------------------------------------------- | ----------- |
-| `container`    | `'none' \| 'subtle' \| 'emphasis'`                | Applies the List-style outer container wrapping.                                                        | `'none'`    |
-| `columnWidths` | `(number \| '${number}fr' \| { flex: number })[]` | Optional per-column sizing. Use numbers for fixed widths and `'2fr'`-style values for flexible columns. | `undefined` |
-| `pagination`   | `ReactNode`                                       | Optional pagination content rendered below the rows.                                                    | `undefined` |
-
-### TableHeader Props
-
-| Property | Type                  | Description                                       | Default    |
-| -------- | --------------------- | ------------------------------------------------- | ---------- |
-| `color`  | `'purple' \| 'white'` | Controls the header background and text contrast. | `'purple'` |
-
-### TableHeaderCell Props
-
-| Property          | Type        | Description                                                | Default     |
-| ----------------- | ----------- | ---------------------------------------------------------- | ----------- |
-| `row`             | `boolean`   | Uses body-row header styling for the first cell in a row.  | `false`     |
-| `trailingContent` | `ReactNode` | Optional content aligned to the trailing edge of the cell. | `undefined` |
-
-## Examples
-
-### Containers
-
-<Canvas of={Stories.Variants} />
-
-```tsx
-<Table container="subtle">
-  <TableHeader color="purple">
-    <TableHeaderCell>Name</TableHeaderCell>
-    <TableHeaderCell>Plan</TableHeaderCell>
-    <TableHeaderCell>Status</TableHeaderCell>
-  </TableHeader>
-  <TableBody>
-    <TableRow>
-      <TableHeaderCell row>Alex Morgan</TableHeaderCell>
-      <TableCell>Full Fibre 900</TableCell>
-      <TableCell>Active</TableCell>
-    </TableRow>
-  </TableBody>
-</Table>
-```
-
-### With pagination
-
-<Canvas of={Stories.WithPagination} />
-
-```tsx
-const [currentPage, setCurrentPage] = useState(1);
-
-<Table
-  container="subtle"
-  pagination={
-    <TablePagination currentPage={currentPage} onPageChange={setCurrentPage} totalPages={10} />
-  }
->
-  <TableHeader color="purple">
-    <TableHeaderCell>Name</TableHeaderCell>
-    <TableHeaderCell>Email</TableHeaderCell>
-    <TableHeaderCell>City</TableHeaderCell>
-  </TableHeader>
-  <TableBody>{/* paged rows */}</TableBody>
-</Table>;
-```
-
-### Narrow viewport
-
-<Canvas of={Stories.NarrowViewport} />
-
-```tsx
-<Box style={{ width: 320 }}>
-  <Table container="subtle">
-    <TableHeader color="purple">
-      <TableHeaderCell>Account</TableHeaderCell>
-      <TableHeaderCell>Type</TableHeaderCell>
-      <TableHeaderCell>Monthly cost</TableHeaderCell>
-      <TableHeaderCell>Renewal</TableHeaderCell>
-    </TableHeader>
-    <TableBody>{/* rows */}</TableBody>
-  </Table>
-</Box>
-```
-
-### Configured column widths
-
-<Canvas of={Stories.ConfiguredColumnWidths} />
-
-```tsx
-<Table columnWidths={[180, '2fr', '1fr', 140]} container="subtle">
-  <TableHeader color="purple">
-    <TableHeaderCell>Name</TableHeaderCell>
-    <TableHeaderCell>Email</TableHeaderCell>
-    <TableHeaderCell>Plan</TableHeaderCell>
-    <TableHeaderCell>Status</TableHeaderCell>
-  </TableHeader>
-  <TableBody>{/* rows */}</TableBody>
-</Table>
-```
-
-### Custom sort function
-
-<Canvas of={Stories.WithCustomSortFunction} />
-
-```tsx
-const statusOrder = {
-  Active: 0,
-  Pending: 1,
-  Paused: 2,
-  Cancelled: 3,
-} as const;
-
-const sortRowsByStatus = (items, direction = 'asc') => {
-  const multiplier = direction === 'asc' ? 1 : -1;
-
-  return [...items].sort((left, right) => {
-    const statusDifference = (statusOrder[left.status] - statusOrder[right.status]) * multiplier;
-
-    if (statusDifference !== 0) {
-      return statusDifference;
-    }
-
-    return left.customer.localeCompare(right.customer) * multiplier;
-  });
-};
-
-const [direction, setDirection] = useState<'asc' | 'desc'>('asc');
-const sortedRows = sortRowsByStatus(rows, direction);
-
-<Table columnWidths={[180, '2fr', 120]} container="subtle">
-  <TableHeader color="purple">
-    <TableHeaderCell>Customer</TableHeaderCell>
-    <TableHeaderCell>Plan</TableHeaderCell>
-    <TableHeaderCell
-      trailingContent={
-        <UnstyledIconButton
-          accessibilityLabel="Sort by custom status order"
-          icon={ExpandSmallIcon}
-          inverted
-          onPress={() => setDirection(current => (current === 'asc' ? 'desc' : 'asc'))}
-          size="sm"
-        />
-      }
-    >
-      Status
-    </TableHeaderCell>
-  </TableHeader>
-  <TableBody>{/* sortedRows */}</TableBody>
-</Table>;
-```