@utilitywarehouse/hearth-react-native 0.27.3 → 0.28.0

package/src/components/Timeline/Timeline.stories.tsx

@@ -0,0 +1,102 @@
+import { Meta, StoryObj } from '@storybook/react-vite';
+import { Timeline, TimelineItem } from '.';
+import { VariantTitle } from '../../../docs/components';
+import { Badge } from '../Badge';
+import { BodyText } from '../BodyText';
+import { Box } from '../Box';
+import { Card } from '../Card';
+import { Flex } from '../Flex';
+
+const meta = {
+  title: 'Stories / Timeline',
+  component: Timeline,
+  argTypes: {
+    variant: {
+      options: ['static', 'progress'],
+      control: 'select',
+      description: 'The timeline indicator style.',
+    },
+  },
+  args: {
+    variant: 'progress',
+  },
+} satisfies Meta<typeof Timeline>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Playground: Story = {
+  render: args => {
+    const isProgress = args.variant === 'progress';
+
+    return (
+      <Box style={{ width: 280 }}>
+        <Timeline {...args}>
+          <TimelineItem
+            label="Order placed"
+            helperText="We have received your request"
+            state={isProgress ? 'complete' : undefined}
+          />
+          <TimelineItem
+            label="Checking details"
+            helperText="We are validating the information"
+            state={isProgress ? 'complete' : undefined}
+          />
+          <TimelineItem
+            label="Engineer booked"
+            helperText="Your appointment has been reserved"
+            state={isProgress ? 'active' : undefined}
+          />
+          <TimelineItem
+            label="Service live"
+            helperText="Everything is ready to go"
+            state={isProgress ? 'incomplete' : undefined}
+          />
+        </Timeline>
+      </Box>
+    );
+  },
+};
+
+export const Variants: Story = {
+  render: () => (
+    <Flex direction="column" spacing="xl" style={{ width: 320 }}>
+      <VariantTitle title="Progress">
+        <Timeline variant="progress">
+          <TimelineItem label="Account created" helperText="Done" state="complete" />
+          <TimelineItem label="Documents uploaded" helperText="Done" state="complete" />
+          <TimelineItem label="Verification" helperText="In progress" state="active" />
+          <TimelineItem label="Decision" helperText="Pending" state="incomplete" />
+        </Timeline>
+      </VariantTitle>
+      <VariantTitle title="Static">
+        <Timeline variant="static">
+          <TimelineItem label="Collected" helperText="08:15" />
+          <TimelineItem label="Sorted" helperText="10:40" />
+          <TimelineItem label="Out for delivery" helperText="13:25" />
+        </Timeline>
+      </VariantTitle>
+    </Flex>
+  ),
+};
+
+export const WithCustomContent: Story = {
+  render: () => (
+    <Box style={{ width: 320 }}>
+      <Timeline variant="progress">
+        <TimelineItem
+          label="Application started"
+          helperText="We have saved your draft"
+          state="complete"
+        />
+        <TimelineItem label="Additional information" helperText="Action needed" state="active">
+          <Card variant="subtle" spacing="md">
+            <Badge>Required</Badge>
+            <BodyText size="sm">Upload proof of address to continue.</BodyText>
+          </Card>
+        </TimelineItem>
+        <TimelineItem label="Review complete" helperText="Pending" state="incomplete" />
+      </Timeline>
+    </Box>
+  ),
+};

package/src/components/Timeline/Timeline.tsx

@@ -0,0 +1,48 @@
+import React from 'react';
+import { View, ViewStyle } from 'react-native';
+import { StyleSheet } from 'react-native-unistyles';
+import type { TimelineItemPosition, TimelineItemProps, TimelineProps } from './Timeline.props';
+
+const getItemPosition = (index: number, count: number): TimelineItemPosition => {
+  if (count <= 1) {
+    return 'single';
+  }
+
+  if (index === 0) {
+    return 'start';
+  }
+
+  if (index === count - 1) {
+    return 'end';
+  }
+
+  return 'middle';
+};
+
+const Timeline = ({ children, variant = 'static', style, ...rest }: TimelineProps) => {
+  const childElements = React.Children.toArray(children).filter(React.isValidElement);
+
+  return (
+    <View accessibilityRole="list" style={[styles.root, style as ViewStyle]} {...rest}>
+      {childElements.map((child, index) => {
+        const position = getItemPosition(index, childElements.length);
+
+        return React.cloneElement(child as React.ReactElement<TimelineItemProps>, {
+          key: child.key ?? `timeline-item-${index}`,
+          position,
+          variant,
+        });
+      })}
+    </View>
+  );
+};
+
+Timeline.displayName = 'Timeline';
+
+const styles = StyleSheet.create(() => ({
+  root: {
+    width: '100%',
+  },
+}));
+
+export default Timeline;

package/src/components/Timeline/TimelineItem.tsx

@@ -0,0 +1,293 @@
+import { TickSmallIcon } from '@utilitywarehouse/hearth-react-native-icons';
+import { View, ViewStyle } from 'react-native';
+import { StyleSheet } from 'react-native-unistyles';
+import { BodyText } from '../BodyText';
+import { Icon } from '../Icon';
+import type { TimelineItemProps } from './Timeline.props';
+
+const TimelineItem = ({
+  children,
+  helperText,
+  label,
+  position = 'single',
+  state = 'incomplete',
+  style,
+  variant = 'static',
+  accessibilityLabel: accessibilityLabelProp,
+  accessible: accessibleProp,
+  ...rest
+}: TimelineItemProps) => {
+  styles.useVariants({ position, state, variant });
+
+  const hasCustomContent = Boolean(children);
+
+  const computedAccessibilityLabel = [
+    label,
+    helperText,
+    variant === 'progress' ? `Step ${state}` : undefined,
+  ]
+    .filter(Boolean)
+    .join(', ');
+
+  return (
+    <View
+      style={[styles.item, style as ViewStyle]}
+      {...rest}
+      accessible={accessibleProp ?? !hasCustomContent}
+      accessibilityLabel={
+        (accessibleProp ?? !hasCustomContent)
+          ? (accessibilityLabelProp ?? computedAccessibilityLabel)
+          : undefined
+      }
+    >
+      <View style={styles.indicatorColumn}>
+        {(position === 'middle' || position === 'end') && <View style={styles.topConnector} />}
+        <View style={styles.circle}>
+          {variant === 'progress' && state === 'complete' ? (
+            <Icon as={TickSmallIcon} width={20} height={20} style={styles.completeIcon} />
+          ) : variant === 'progress' && state === 'active' ? (
+            <View style={styles.activeInnerDot} />
+          ) : null}
+        </View>
+        {(position === 'start' || position === 'middle') && <View style={styles.bottomConnector} />}
+      </View>
+      <View style={styles.content}>
+        <View
+          style={styles.textContent}
+          accessible={hasCustomContent}
+          accessibilityLabel={
+            hasCustomContent ? (accessibilityLabelProp ?? computedAccessibilityLabel) : undefined
+          }
+        >
+          <BodyText size="md" weight="semibold" style={styles.label}>
+            {label}
+          </BodyText>
+          {helperText ? (
+            <BodyText size="md" style={styles.helperText}>
+              {helperText}
+            </BodyText>
+          ) : null}
+        </View>
+        {children ? <View style={styles.customContent}>{children}</View> : null}
+      </View>
+    </View>
+  );
+};
+
+TimelineItem.displayName = 'TimelineItem';
+
+const styles = StyleSheet.create(theme => ({
+  item: {
+    flexDirection: 'row',
+    gap: theme.components.timeline.gap,
+    width: '100%',
+  },
+  indicatorColumn: {
+    alignItems: 'center',
+    variants: {
+      variant: {
+        static: {
+          width: theme.components.timeline.static.circle.width,
+        },
+        progress: {
+          width: theme.components.timeline.progress.circle.width,
+        },
+      },
+    },
+  },
+  topConnector: {
+    width: theme.components.timeline.bar.width,
+    variants: {
+      variant: {
+        static: {
+          height: theme.components.timeline.static.circle.height / 2,
+          backgroundColor: theme.color.surface.brand.default,
+        },
+        progress: {
+          height: 0,
+        },
+      },
+      state: {
+        complete: {},
+        active: {},
+        incomplete: {},
+      },
+    },
+    compoundVariants: [
+      {
+        variant: 'progress',
+        state: 'complete',
+        styles: {
+          backgroundColor: theme.color.surface.brand.default,
+        },
+      },
+      {
+        variant: 'progress',
+        state: 'active',
+        styles: {
+          backgroundColor: theme.color.surface.brand.default,
+        },
+      },
+      {
+        variant: 'progress',
+        state: 'incomplete',
+        styles: {
+          backgroundColor: theme.color.border.subtle,
+        },
+      },
+    ],
+  },
+  bottomConnector: {
+    flex: 1,
+    minHeight: theme.components.timeline.content.paddingBottom,
+    width: theme.components.timeline.bar.width,
+    variants: {
+      variant: {
+        static: {
+          backgroundColor: theme.color.surface.brand.default,
+        },
+        progress: {},
+      },
+      state: {
+        complete: {},
+        active: {},
+        incomplete: {},
+      },
+    },
+    compoundVariants: [
+      {
+        variant: 'progress',
+        state: 'complete',
+        styles: {
+          backgroundColor: theme.color.surface.brand.default,
+        },
+      },
+      {
+        variant: 'progress',
+        state: 'active',
+        styles: {
+          backgroundColor: theme.color.border.subtle,
+        },
+      },
+      {
+        variant: 'progress',
+        state: 'incomplete',
+        styles: {
+          backgroundColor: theme.color.border.subtle,
+        },
+      },
+    ],
+  },
+  circle: {
+    borderRadius: theme.borderRadius.full,
+    alignItems: 'center',
+    justifyContent: 'center',
+    padding: 2,
+    variants: {
+      variant: {
+        static: {
+          width: theme.components.timeline.static.circle.width,
+          height: theme.components.timeline.static.circle.height,
+          backgroundColor: theme.color.surface.brand.default,
+        },
+        progress: {
+          width: theme.components.timeline.progress.circle.width,
+          height: theme.components.timeline.progress.circle.height,
+        },
+      },
+      state: {
+        complete: {},
+        active: {},
+        incomplete: {},
+      },
+    },
+    compoundVariants: [
+      {
+        variant: 'progress',
+        state: 'complete',
+        styles: {
+          backgroundColor: theme.color.surface.brand.default,
+        },
+      },
+      {
+        variant: 'progress',
+        state: 'active',
+        styles: {
+          backgroundColor: theme.color.surface.neutral.subtle,
+          borderWidth: theme.borderWidth[2],
+          borderColor: theme.color.surface.brand.default,
+        },
+      },
+      {
+        variant: 'progress',
+        state: 'incomplete',
+        styles: {
+          backgroundColor: theme.color.surface.neutral.subtle,
+          borderWidth: theme.borderWidth[2],
+          borderColor: theme.color.border.subtle,
+        },
+      },
+    ],
+  },
+  activeInnerDot: {
+    width: '100%',
+    height: '100%',
+    borderRadius: theme.borderRadius.full,
+    backgroundColor: theme.color.surface.brand.default,
+  },
+  completeIcon: {
+    color: theme.color.text.inverted,
+  },
+  content: {
+    flex: 1,
+    minWidth: 0,
+    gap: theme.components.timeline.content.gap,
+    variants: {
+      position: {
+        single: {
+          paddingBottom: 0,
+        },
+        start: {
+          paddingBottom: theme.components.timeline.content.paddingBottom,
+        },
+        middle: {
+          paddingBottom: theme.components.timeline.content.paddingBottom,
+        },
+        end: {
+          paddingBottom: 0,
+        },
+      },
+      variant: {
+        static: {
+          paddingTop: 0,
+        },
+        progress: {
+          paddingTop: theme.components.timeline.content.paddingTop,
+        },
+      },
+    },
+    compoundVariants: [
+      {
+        position: 'start',
+        variant: 'static',
+        styles: {
+          marginTop: -6,
+        },
+      },
+    ],
+  },
+  textContent: {
+    width: '100%',
+  },
+  label: {
+    color: theme.color.text.primary,
+  },
+  helperText: {
+    color: theme.color.text.secondary,
+  },
+  customContent: {
+    width: '100%',
+  },
+}));
+
+export default TimelineItem;

package/src/components/Timeline/index.ts

@@ -0,0 +1,9 @@
+export { default as Timeline } from './Timeline';
+export { default as TimelineItem } from './TimelineItem';
+export type {
+  TimelineItemPosition,
+  TimelineItemProps,
+  TimelineItemState,
+  TimelineProps,
+  TimelineVariant,
+} from './Timeline.props';

package/src/components/index.ts

@@ -12,6 +12,7 @@ export * from './Card';
 export * from './Carousel';
 export * from './Center';
 export * from './Checkbox';
+export * from './Combobox';
 export * from './Container';
 export * from './CurrencyInput';
 export * from './DateInput';
@@ -40,20 +41,24 @@ export * from './Link';
 export * from './List';
 export * from './Menu';
 export * from './Modal';
+export * from './Pagination';
 export * from './PillGroup';
 export * from './ProgressBar';
 export * from './ProgressStepper';
 export * from './Radio';
 export * from './RadioCard';
+export * from './SafeAreaView';
 export * from './SectionHeader';
 export * from './SegmentedControl';
 export * from './Select';
 export * from './Skeleton';
 export * from './Spinner';
 export * from './Switch';
+export * from './Table';
 export * from './Tabs';
 export * from './Textarea';
 export * from './ThemedImage';
+export * from './Timeline';
 export * from './TimePicker';
 export * from './TimePickerInput';
 export * from './Toast';

package/src/tokens/components/dark/timeline.ts

@@ -14,8 +14,8 @@ export default {
   gap: 12,
   progress: {
     circle: {
-      height: 24,
-      width: 24,
+      height: 28,
+      width: 28,
     },
   },
   static: {