@utilitywarehouse/hearth-react-native 0.2.0 → 0.3.0

package/src/components/Tabs/Tabs.stories.tsx

@@ -0,0 +1,270 @@
+import { Meta, StoryObj } from '@storybook/react-vite';
+import {
+  BroadbandMediumIcon,
+  ElectricityMediumIcon,
+  InsuranceMediumIcon,
+  MobileMediumIcon,
+} from '@utilitywarehouse/hearth-react-native-icons';
+import { useState } from 'react';
+import { Platform } from 'react-native';
+import { BodyText, Button, Flex, Tab, TabPanel, Tabs, TabsList } from '../';
+
+const meta = {
+  title: 'Stories / Tabs',
+  component: Tabs,
+  args: {
+    size: 'md',
+    children: undefined,
+  },
+  argTypes: {
+    size: { control: 'radio', options: ['md', 'lg'] },
+  },
+} satisfies Meta<typeof Tabs>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Playground: Story = {
+  args: {
+    children: (
+      <>
+        <Tab value="account">Account</Tab>
+        <Tab value="billing">Billing</Tab>
+        <Tab value="usage">Usage</Tab>
+        <Tab value="settings">Settings</Tab>
+      </>
+    ),
+  },
+  render: ({ children, ...args }) => (
+    <Tabs {...args} defaultValue="account">
+      <TabsList>{children}</TabsList>
+      <TabPanel value="account">
+        <BodyText>Account content</BodyText>
+      </TabPanel>
+      <TabPanel value="billing">
+        <BodyText>Billing content</BodyText>
+      </TabPanel>
+      <TabPanel value="usage">
+        <BodyText>Usage metrics</BodyText>
+      </TabPanel>
+      <TabPanel value="settings">
+        <BodyText>Settings content</BodyText>
+      </TabPanel>
+    </Tabs>
+  ),
+};
+
+export const Sizes: Story = {
+  args: { children: null },
+  render: () => (
+    <>
+      <Tabs size="md" defaultValue="a">
+        <TabsList>
+          <Tab value="a">Medium A</Tab>
+          <Tab value="b">Medium B</Tab>
+          <Tab value="c">Medium C</Tab>
+        </TabsList>
+        <TabPanel value="a">
+          <BodyText>Medium A panel</BodyText>
+        </TabPanel>
+        <TabPanel value="b">
+          <BodyText>Medium B panel</BodyText>
+        </TabPanel>
+        <TabPanel value="c">
+          <BodyText>Medium C panel</BodyText>
+        </TabPanel>
+      </Tabs>
+      <Tabs size="lg" defaultValue="a" style={{ marginTop: 24 }}>
+        <TabsList>
+          <Tab value="a">Large A</Tab>
+          <Tab value="b">Large B</Tab>
+          <Tab value="c">Large C</Tab>
+        </TabsList>
+        <TabPanel value="a">
+          <BodyText>Large A panel</BodyText>
+        </TabPanel>
+        <TabPanel value="b">
+          <BodyText>Large B panel</BodyText>
+        </TabPanel>
+        <TabPanel value="c">
+          <BodyText>Large C panel</BodyText>
+        </TabPanel>
+      </Tabs>
+    </>
+  ),
+};
+
+export const WithScrolling: Story = {
+  args: { children: null },
+  render: () => (
+    <Tabs defaultValue="one">
+      <TabsList>
+        <Tab value="one">One</Tab>
+        <Tab value="two">Two</Tab>
+        <Tab value="three">Three</Tab>
+        <Tab value="four">Four</Tab>
+        <Tab value="five">Five</Tab>
+        <Tab value="six">Six</Tab>
+        <Tab value="seven">Seven</Tab>
+        <Tab value="eight">Eight</Tab>
+        <Tab value="nine">Nine</Tab>
+        <Tab value="ten">Ten</Tab>
+        <Tab value="eleven">Eleven</Tab>
+        <Tab value="twelve">Twelve</Tab>
+        <Tab value="thirteen">Thirteen</Tab>
+        <Tab value="fourteen">Fourteen</Tab>
+        <Tab value="fifteen">Fifteen</Tab>
+        <Tab value="sixteen">Sixteen</Tab>
+        <Tab value="seventeen">Seventeen</Tab>
+        <Tab value="eighteen">Eighteen</Tab>
+        <Tab value="nineteen">Nineteen</Tab>
+        <Tab value="twenty">Twenty</Tab>
+      </TabsList>
+      <TabPanel value="one">
+        <BodyText>One panel</BodyText>
+      </TabPanel>
+      <TabPanel value="two">
+        <BodyText>Two panel</BodyText>
+      </TabPanel>
+      <TabPanel value="three">
+        <BodyText>Three panel</BodyText>
+      </TabPanel>
+      <TabPanel value="four">
+        <BodyText>Four panel</BodyText>
+      </TabPanel>
+      <TabPanel value="five">
+        <BodyText>Five panel</BodyText>
+      </TabPanel>
+      <TabPanel value="six">
+        <BodyText>Six panel</BodyText>
+      </TabPanel>
+      <TabPanel value="seven">
+        <BodyText>Seven panel</BodyText>
+      </TabPanel>
+      <TabPanel value="eight">
+        <BodyText>Eight panel</BodyText>
+      </TabPanel>
+      <TabPanel value="nine">
+        <BodyText>Nine panel</BodyText>
+      </TabPanel>
+      <TabPanel value="ten">
+        <BodyText>Ten panel</BodyText>
+      </TabPanel>
+      <TabPanel value="eleven">
+        <BodyText>Eleven panel</BodyText>
+      </TabPanel>
+      <TabPanel value="twelve">
+        <BodyText>Twelve panel</BodyText>
+      </TabPanel>
+      <TabPanel value="thirteen">
+        <BodyText>Thirteen panel</BodyText>
+      </TabPanel>
+      <TabPanel value="fourteen">
+        <BodyText>Fourteen panel</BodyText>
+      </TabPanel>
+      <TabPanel value="fifteen">
+        <BodyText>Fifteen panel</BodyText>
+      </TabPanel>
+      <TabPanel value="sixteen">
+        <BodyText>Sixteen panel</BodyText>
+      </TabPanel>
+      <TabPanel value="seventeen">
+        <BodyText>Seventeen panel</BodyText>
+      </TabPanel>
+      <TabPanel value="eighteen">
+        <BodyText>Eighteen panel</BodyText>
+      </TabPanel>
+      <TabPanel value="nineteen">
+        <BodyText>Nineteen panel</BodyText>
+      </TabPanel>
+      <TabPanel value="twenty">
+        <BodyText>Twenty panel</BodyText>
+      </TabPanel>
+    </Tabs>
+  ),
+};
+
+export const WithIcons: Story = {
+  args: { children: null },
+  render: () => (
+    <Tabs defaultValue="one">
+      <TabsList>
+        <Tab value="one" icon={ElectricityMediumIcon}>
+          Energy
+        </Tab>
+        <Tab value="two" icon={BroadbandMediumIcon}>
+          Broadband
+        </Tab>
+        <Tab value="three" icon={MobileMediumIcon}>
+          Mobile
+        </Tab>
+        <Tab value="four" icon={InsuranceMediumIcon}>
+          Insurance
+        </Tab>
+      </TabsList>
+      <TabPanel value="one">
+        <BodyText>One panel</BodyText>
+      </TabPanel>
+      <TabPanel value="two">
+        <BodyText>Two panel</BodyText>
+      </TabPanel>
+      <TabPanel value="three">
+        <BodyText>Three panel</BodyText>
+      </TabPanel>
+      <TabPanel value="four">
+        <BodyText>Four panel</BodyText>
+      </TabPanel>
+    </Tabs>
+  ),
+};
+
+export const Disabled: Story = {
+  args: { children: null },
+  render: () => (
+    <Tabs defaultValue="one" disabled>
+      <TabsList>
+        <Tab value="one">One</Tab>
+        <Tab value="two">Two</Tab>
+        <Tab value="three">Three</Tab>
+      </TabsList>
+      <TabPanel value="one">One panel</TabPanel>
+      <TabPanel value="two">Two panel</TabPanel>
+      <TabPanel value="three">Three panel</TabPanel>
+    </Tabs>
+  ),
+};
+
+export const Controlled: Story = {
+  args: { children: null },
+  render: () => {
+    const [value, setValue] = useState('account');
+    const nextTab = () => {
+      const tabs = ['account', 'billing', 'usage'];
+      const currentIndex = tabs.indexOf(value);
+      const nextIndex = (currentIndex + 1) % tabs.length;
+      setValue(tabs[nextIndex]);
+    };
+    return (
+      <Flex align={Platform.OS === 'web' ? 'flex-start' : 'stretch'} space="lg">
+        <Tabs value={value}>
+          <TabsList>
+            <Tab value="account">Account</Tab>
+            <Tab value="billing">Billing</Tab>
+            <Tab value="usage">Usage</Tab>
+          </TabsList>
+          <TabPanel value="account">
+            <BodyText>Account content</BodyText>
+          </TabPanel>
+          <TabPanel value="billing">
+            <BodyText>Billing content</BodyText>
+          </TabPanel>
+          <TabPanel value="usage">
+            <BodyText>Usage metrics content</BodyText>
+          </TabPanel>
+        </Tabs>
+
+        <Button onPress={nextTab}>Next Tab</Button>
+      </Flex>
+    );
+  },
+};

package/src/components/Tabs/Tabs.tsx

@@ -0,0 +1,139 @@
+import { Children, isValidElement, useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { View } from 'react-native';
+import { Easing, useSharedValue, withTiming } from 'react-native-reanimated';
+import { TabsContext } from './Tabs.context';
+import type TabsProps from './Tabs.props';
+
+const Tabs = ({
+  value: controlledValue,
+  defaultValue,
+  onValueChange,
+  size = 'md',
+  disabled,
+  children,
+  withPanels,
+  ...props
+}: TabsProps) => {
+  // Collect child tab values
+  const tabValues = useMemo(() => {
+    const vals: string[] = [];
+    const walk = (node: any) => {
+      Children.forEach(node, child => {
+        if (!isValidElement(child)) return;
+        const props: any = child.props;
+        const type: any = child.type;
+        if (type?.displayName === 'Tab' && typeof props?.value === 'string') {
+          vals.push(props.value);
+        }
+        if (props?.children) walk(props.children);
+      });
+    };
+    walk(children);
+    return vals;
+  }, [children]);
+
+  const getInitial = () => {
+    if (controlledValue !== undefined) return controlledValue;
+    if (defaultValue) return defaultValue;
+    return tabValues[0];
+  };
+
+  const [uncontrolled, setUncontrolled] = useState<string | undefined>(getInitial);
+
+  useEffect(() => {
+    if (controlledValue !== undefined) setUncontrolled(controlledValue);
+  }, [controlledValue]);
+
+  // Ensure value remains valid if tabs change
+  useEffect(() => {
+    setUncontrolled(prev => {
+      if (!prev) return tabValues[0];
+      if (!tabValues.includes(prev)) return tabValues[0];
+      return prev;
+    });
+  }, [tabValues.join('|')]);
+
+  const currentValue = controlledValue !== undefined ? controlledValue : uncontrolled;
+
+  const select = useCallback(
+    (val: string) => {
+      if (disabled) return;
+      if (controlledValue === undefined) setUncontrolled(val);
+      onValueChange?.(val);
+    },
+    [controlledValue, disabled, onValueChange]
+  );
+
+  // Indicator shared values (declared early so registerTabLayout can reference)
+  const indicatorX = useSharedValue(0);
+  const indicatorSize = useSharedValue(0);
+
+  // Layout registry for animated indicator
+  const layoutsRef = useRef<Map<string, { x: number; y: number; width: number; height: number }>>(
+    new Map()
+  );
+  const prevValueRef = useRef<string | undefined>(undefined);
+  const initialisedRef = useRef(false);
+  const registerTabLayout = useCallback(
+    (value: string, layout: { x: number; y: number; width: number; height: number }) => {
+      layoutsRef.current.set(value, layout);
+      const active = controlledValue !== undefined ? controlledValue : uncontrolled;
+      if (!active) return;
+      // Initial active tab: seed indicator & prevValue so first change animates
+      if (!initialisedRef.current && value === active) {
+        indicatorX.value = layout.x;
+        indicatorSize.value = layout.width;
+        prevValueRef.current = active;
+        initialisedRef.current = true;
+      }
+    },
+    [controlledValue, uncontrolled, indicatorX, indicatorSize]
+  );
+  const getTabLayout = useCallback((v: string) => layoutsRef.current.get(v), []);
+
+  const contextValue = useMemo(
+    () => ({
+      value: currentValue,
+      size,
+      select,
+      disabled,
+      registerTabLayout,
+      getTabLayout,
+      indicatorXSV: indicatorX,
+      indicatorSizeSV: indicatorSize,
+    }),
+    [
+      currentValue,
+      size,
+      select,
+      disabled,
+      registerTabLayout,
+      getTabLayout,
+      tabValues,
+      indicatorX,
+      indicatorSize,
+    ]
+  );
+
+  // Animate indicator only on value changes after initialisation
+  useEffect(() => {
+    if (!currentValue || !initialisedRef.current) return;
+    if (prevValueRef.current === undefined || prevValueRef.current === currentValue) return;
+    const layout = getTabLayout(currentValue);
+    if (!layout) return;
+    const cfg = { duration: 250, easing: Easing.out(Easing.ease) } as const;
+    indicatorX.value = withTiming(layout.x, cfg);
+    indicatorSize.value = withTiming(layout.width, cfg);
+    prevValueRef.current = currentValue;
+  }, [currentValue, getTabLayout, indicatorX, indicatorSize, tabValues.join('|')]);
+
+  return (
+    <TabsContext.Provider value={contextValue}>
+      <View {...props}>{children}</View>
+    </TabsContext.Provider>
+  );
+};
+
+Tabs.displayName = 'Tabs';
+
+export default Tabs;

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

@@ -0,0 +1,8 @@
+import type { ReactNode } from 'react';
+import type { ViewProps } from 'react-native';
+
+export interface TabsListProps extends ViewProps {
+  children: ReactNode;
+}
+
+export default TabsListProps;

package/src/components/Tabs/TabsList.tsx

@@ -0,0 +1,194 @@
+import {
+  ChevronLeftSmallIcon,
+  ChevronRightSmallIcon,
+} from '@utilitywarehouse/hearth-react-native-icons';
+import { useCallback, useEffect, useRef, useState } from 'react';
+import { LayoutChangeEvent, Platform, View } from 'react-native';
+import Animated, {
+  runOnJS,
+  useAnimatedScrollHandler,
+  useAnimatedStyle,
+  useSharedValue,
+} from 'react-native-reanimated';
+import { StyleSheet } from 'react-native-unistyles';
+import { UnstyledIconButton } from '../UnstyledIconButton';
+import { useTabsContext } from './Tabs.context';
+import type TabsListProps from './TabsList.props';
+
+const Indicator = Animated.createAnimatedComponent(View);
+
+const SCROLL_STEP_RATIO = 0.6;
+const SCROLL_BUTTON_HITSLOP = { top: 10, bottom: 10, left: 10, right: 10 } as const;
+
+const TabsList = ({ children, style, ...rest }: TabsListProps) => {
+  const { indicatorSizeSV, indicatorXSV } = useTabsContext();
+
+  const scrollRef = useRef<Animated.ScrollView | null>(null);
+  const [canScrollLeft, setCanScrollLeft] = useState(false);
+  const [canScrollRight, setCanScrollRight] = useState(false);
+  const containerWidthRef = useRef(0);
+  const contentWidthRef = useRef(0);
+  const scrollX = useSharedValue(0);
+
+  const indicatorStyle = useAnimatedStyle(() => ({
+    transform: [{ translateX: indicatorXSV.value }],
+    width: indicatorSizeSV.value,
+  }));
+
+  const updateScrollState = useCallback(() => {
+    const cw = containerWidthRef.current;
+    const contentW = contentWidthRef.current;
+    const x = scrollX.value;
+    const overflow = contentW > cw + 1;
+    setCanScrollLeft(overflow && x > 0);
+    setCanScrollRight(overflow && x + cw < contentW - 1);
+  }, [scrollX]);
+
+  const onLayoutContainer = (e: LayoutChangeEvent) => {
+    containerWidthRef.current = e.nativeEvent.layout.width;
+    updateScrollState();
+  };
+  const onContentSizeChange = (w: number) => {
+    contentWidthRef.current = w;
+    updateScrollState();
+  };
+  const onScrollHandler = useAnimatedScrollHandler({
+    onScroll: (e: { contentOffset: { x: number } }) => {
+      scrollX.value = e.contentOffset.x;
+      runOnJS(updateScrollState)();
+    },
+  });
+
+  const scrollBy = (direction: 1 | -1) => {
+    const viewW = containerWidthRef.current;
+    const step = viewW * SCROLL_STEP_RATIO;
+    const current = scrollX.value;
+    const max = Math.max(0, contentWidthRef.current - viewW);
+    const target = Math.max(0, Math.min(current + direction * step, max));
+    scrollRef.current?.scrollTo({ x: target, animated: true });
+  };
+
+  useEffect(() => {
+    if (Platform.OS === 'web') {
+      const handler = () => updateScrollState();
+      window.addEventListener('resize', handler);
+      return () => window.removeEventListener('resize', handler);
+    }
+    return;
+  }, [updateScrollState]);
+
+  return (
+    <View style={[styles.wrapper, style]} {...rest} accessibilityRole="tablist">
+      {canScrollLeft && (
+        <View
+          style={[styles.iconButtonWrap, styles.scrollButtonLeft]}
+          accessibilityElementsHidden
+          importantForAccessibility="no-hide-descendants"
+          {...(Platform.OS === 'web' ? ({ 'aria-hidden': true } as any) : {})}
+        >
+          <UnstyledIconButton
+            accessibilityLabel={undefined}
+            icon={ChevronLeftSmallIcon}
+            onPress={() => scrollBy(-1)}
+            style={styles.iconButton}
+            accessibilityElementsHidden
+            importantForAccessibility="no-hide-descendants"
+            hitSlop={SCROLL_BUTTON_HITSLOP}
+            {...(Platform.OS === 'web' ? ({ 'aria-hidden': true, tabIndex: -1 } as any) : {})}
+          />
+        </View>
+      )}
+      <Animated.ScrollView
+        ref={scrollRef}
+        horizontal
+        showsHorizontalScrollIndicator={false}
+        onLayout={onLayoutContainer}
+        onContentSizeChange={onContentSizeChange}
+        onScroll={onScrollHandler}
+        scrollEventThrottle={16}
+        bounces={false}
+        contentContainerStyle={styles.scrollContent}
+      >
+        <View style={styles.container}>
+          {children}
+          <Indicator
+            accessibilityElementsHidden
+            importantForAccessibility="no-hide-descendants"
+            style={[styles.indicator, indicatorStyle]}
+          />
+        </View>
+      </Animated.ScrollView>
+      {canScrollRight && (
+        <View
+          style={[styles.iconButtonWrap, styles.scrollButtonRight]}
+          accessibilityElementsHidden
+          importantForAccessibility="no-hide-descendants"
+          {...(Platform.OS === 'web' ? ({ 'aria-hidden': true } as any) : {})}
+        >
+          <UnstyledIconButton
+            accessibilityLabel={undefined}
+            icon={ChevronRightSmallIcon}
+            onPress={() => scrollBy(1)}
+            style={styles.iconButton}
+            accessibilityElementsHidden
+            importantForAccessibility="no-hide-descendants"
+            hitSlop={SCROLL_BUTTON_HITSLOP}
+            {...(Platform.OS === 'web' ? ({ 'aria-hidden': true, tabIndex: -1 } as any) : {})}
+          />
+        </View>
+      )}
+    </View>
+  );
+};
+
+TabsList.displayName = 'TabsList';
+
+const styles = StyleSheet.create(theme => ({
+  wrapper: {
+    position: 'relative',
+    width: '100%',
+    borderBottomWidth: theme.components.tabs.divider.borderWidth,
+    borderColor: theme.components.tabs.divider.color,
+  },
+  scrollContent: {
+    paddingBottom: 0,
+  },
+  container: {
+    position: 'relative',
+    flexDirection: 'row',
+    gap: theme.components.tabs.gap,
+  },
+  indicator: {
+    position: 'absolute',
+    height: 6,
+    borderTopLeftRadius: theme.components.tabs.item.selected.borderTopRadius,
+    borderTopRightRadius: theme.components.tabs.item.selected.borderTopRadius,
+    borderBottomLeftRadius: theme.components.tabs.item.selected.borderBottomRadius,
+    borderBottomRightRadius: theme.components.tabs.item.selected.borderBottomRadius,
+    backgroundColor: theme.color.surface.brand.default,
+    bottom: 0,
+    left: 0,
+  },
+  scrollButtonLeft: {
+    position: 'absolute',
+    left: 0,
+    top: '50%',
+    transform: [{ translateY: -theme.space[150] }],
+    zIndex: 10,
+  },
+  scrollButtonRight: {
+    position: 'absolute',
+    right: 0,
+    top: '50%',
+    transform: [{ translateY: -theme.space[150] }],
+    zIndex: 10,
+  },
+  iconButtonWrap: {},
+  iconButton: {
+    backgroundColor: theme.color.surface.neutral.subtle,
+    width: theme.space[300],
+    height: theme.space[300],
+  },
+}));
+
+export default TabsList;

package/src/components/Tabs/index.ts

@@ -0,0 +1,8 @@
+export { default as Tab } from './Tab';
+export type { TabProps } from './Tab.props';
+export { default as TabPanel } from './TabPanel';
+export type { TabPanelProps } from './TabPanel.props';
+export { default as Tabs } from './Tabs';
+export type { TabsProps } from './Tabs.props';
+export { default as TabsList } from './TabsList';
+export type { TabsListProps } from './TabsList.props';

package/src/components/index.ts

@@ -9,6 +9,8 @@ export * from './Button';
 export * from './Card';
 export * from './Center';
 export * from './Checkbox';
+export * from './CurrencyInput';
+export * from './DescriptionList';
 export * from './DetailText';
 export * from './Divider';
 export * from './Flex';
@@ -19,6 +21,7 @@ export * from './Helper';
 export * from './HTMLElements';
 export * from './Icon';
 export * from './IconButton';
+export * from './IconContainer';
 export * from './InlineLink';
 export * from './Input';
 export * from './Label';
@@ -32,6 +35,7 @@ export * from './Select';
 export * from './Skeleton';
 export * from './Spinner';
 export * from './Switch';
+export * from './Tabs';
 export * from './Textarea';
 export * from './ToggleButtonCard';