@utilitywarehouse/hearth-react-native 0.34.5 → 0.35.1

package/src/components/PillGroup/PillGroup.props.ts

@@ -1,36 +0,0 @@
-import React from 'react';
-import { ScrollViewProps, ViewStyle } from 'react-native';
-
-export interface PillGroupBaseProps
-  extends Omit<
-    ScrollViewProps,
-    'horizontal' | 'contentContainerStyle' | 'showsHorizontalScrollIndicator'
-  > {
-  /** Allow pills to wrap lines. Default = true */
-  wrap?: boolean;
-
-  /** Children must be <Pill> elements */
-  children: React.ReactNode;
-
-  style?: ViewStyle | ViewStyle[];
-}
-
-interface SinglePillGroupProps extends PillGroupBaseProps {
-  /** Multi-select mode. Default = false */
-  multiple?: false;
-  /** Controlled selected value */
-  value: string;
-  /** Handle selection changes */
-  onChange?: (value: string) => void;
-}
-
-interface MultiPillGroupProps extends PillGroupBaseProps {
-  /** Multi-select mode. Default = false */
-  multiple: true;
-  /** Controlled selected value(s) */
-  value: string[];
-  /** Handle selection changes */
-  onChange?: (value: string[]) => void;
-}
-
-export type PillGroupProps = SinglePillGroupProps | MultiPillGroupProps;

package/src/components/PillGroup/PillGroup.stories.tsx

@@ -1,158 +0,0 @@
-import { Meta, StoryObj } from '@storybook/react-vite';
-import { HeartMediumIcon } from '@utilitywarehouse/hearth-react-native-icons';
-import { useState } from 'react';
-import { PillGroup } from '.';
-import { VariantTitle } from '../../../docs/components';
-import { BodyText } from '../BodyText';
-import { Flex } from '../Flex';
-import { Pill } from './Pill';
-
-const meta = {
-  title: 'Stories / PillGroup',
-  component: PillGroup,
-  parameters: {
-    layout: 'centered',
-  },
-} satisfies Meta<typeof PillGroup>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const Playground: Story = {
-  args: {
-    wrap: false,
-    multiple: false,
-    value: '2',
-    children: <></>,
-  },
-  parameters: {
-    controls: { exclude: ['value', 'onChange', 'style', 'children'] },
-  },
-  render: props => {
-    const [value, setValue] = useState<string | string[]>(props.value || '');
-
-    return (
-      <PillGroup {...props} value={value} onChange={setValue}>
-        <Pill value="1" label="All" />
-        <Pill value="2" label="Energy" />
-        <Pill value="3" label="Broadband" />
-        <Pill value="4" label="Mobile" />
-      </PillGroup>
-    );
-  },
-};
-
-export const PillStates: Story = {
-  args: {
-    value: '',
-    children: <></>,
-  },
-  parameters: {
-    controls: { exclude: ['value', 'onChange', 'multiple', 'wrap', 'style', 'children'] },
-  },
-  render: () => {
-    const selectedValue = '2';
-
-    return (
-      <Flex spacing="xl" direction="column" align="center">
-        <VariantTitle title="Unselected">
-          <Flex direction="row" spacing="sm">
-            <PillGroup value={selectedValue} onChange={() => {}}>
-              <Pill value="1" label="Label" />
-            </PillGroup>
-          </Flex>
-        </VariantTitle>
-        <VariantTitle title="Selected">
-          <Flex direction="row" spacing="sm">
-            <PillGroup value={selectedValue} onChange={() => {}}>
-              <Pill value="2" label="Label" />
-            </PillGroup>
-          </Flex>
-        </VariantTitle>
-        <VariantTitle title="With Icon - Unselected">
-          <Flex direction="row" spacing="sm">
-            <PillGroup value={selectedValue} onChange={() => {}}>
-              <Pill value="1" label="New" icon={HeartMediumIcon} />
-            </PillGroup>
-          </Flex>
-        </VariantTitle>
-        <VariantTitle title="With Icon - Selected">
-          <Flex direction="row" spacing="sm">
-            <PillGroup value={selectedValue} onChange={() => {}}>
-              <Pill value="2" label="New" icon={HeartMediumIcon} />
-            </PillGroup>
-          </Flex>
-        </VariantTitle>
-      </Flex>
-    );
-  },
-};
-
-export const WrapBehavior: Story = {
-  args: {
-    value: '',
-    children: <></>,
-  },
-  parameters: {
-    controls: { exclude: ['wrap', 'value', 'onChange', 'multiple'] },
-  },
-  render: () => {
-    const [value1, setValue1] = useState<string>('2');
-    const [value2, setValue2] = useState<string>('7');
-
-    return (
-      <Flex spacing="xl" direction="column" align="center">
-        <VariantTitle title="Wrap: False">
-          <PillGroup wrap={false} value={value1} onChange={setValue1}>
-            <Pill value="1" label="New" />
-            <Pill value="2" label="Some label" />
-            <Pill value="3" label="Short" />
-            <Pill value="4" label="Quite a long label" />
-            <Pill value="5" label="Hmm, another label" />
-          </PillGroup>
-        </VariantTitle>
-        <VariantTitle title="Wrap: True">
-          <PillGroup wrap={true} value={value2} onChange={setValue2}>
-            <Pill value="6" label="New" />
-            <Pill value="7" label="Some label" />
-            <Pill value="8" label="Short" />
-            <Pill value="9" label="Quite a long label" />
-            <Pill value="10" label="Hmm, another label" />
-            <Pill value="11" label="Custom Range" />
-            <Pill value="12" label="Last 7 Days" />
-          </PillGroup>
-        </VariantTitle>
-      </Flex>
-    );
-  },
-};
-
-export const Multiple: Story = {
-  args: {
-    value: [],
-    children: <></>,
-  },
-  parameters: {
-    controls: { exclude: ['wrap', 'value', 'onChange', 'multiple'] },
-  },
-  render: () => {
-    const [selectedCategories, setSelectedCategories] = useState<string[]>(['new', 'read']);
-
-    return (
-      <Flex spacing="lg" direction="column" align="center" style={{ maxWidth: 400 }}>
-        <PillGroup wrap={true} multiple value={selectedCategories} onChange={setSelectedCategories}>
-          <Pill value="unread" label="Unread" />
-          <Pill value="new" label="New" icon={HeartMediumIcon} />
-          <Pill value="favourites" label="My favourites" icon={HeartMediumIcon} />
-          <Pill value="read" label="Read" />
-          <Pill value="yesterday" label="Yesterday" />
-          <Pill value="lastweek" label="Last Week" />
-        </PillGroup>
-        <BodyText>
-          Selected: {selectedCategories.length}{' '}
-          {selectedCategories.length === 1 ? 'category' : 'categories'}
-        </BodyText>
-      </Flex>
-    );
-  },
-};

package/src/components/PillGroup/PillGroup.tsx

@@ -1,70 +0,0 @@
-import { useMemo } from 'react';
-import { ScrollView } from 'react-native';
-import { StyleSheet } from 'react-native-unistyles';
-import { Box } from '../Box';
-import { PillGroupContext, PillGroupContextValue } from './PillGroup.context';
-import type { PillGroupProps } from './PillGroup.props';
-
-export const PillGroup = ({
-  children,
-  value,
-  multiple = false,
-  wrap = true,
-  onChange,
-  style,
-  ...props
-}: PillGroupProps) => {
-  const normalizedValue = Array.isArray(value) ? value : [value];
-
-  const contextValue: PillGroupContextValue = useMemo(
-    () => ({
-      value: normalizedValue,
-      onChange: (pillValue: string) => {
-        if (multiple) {
-          const newValue = normalizedValue.includes(pillValue)
-            ? normalizedValue.filter(v => v !== pillValue)
-            : [...normalizedValue, pillValue];
-          (onChange as (value: string[]) => void)?.(newValue);
-        } else {
-          (onChange as (value: string) => void)?.(pillValue);
-        }
-      },
-    }),
-    [normalizedValue, multiple, onChange]
-  );
-
-  return (
-    <PillGroupContext.Provider value={contextValue}>
-      {wrap ? (
-        <Box style={[styles.group, styles.wrap, style]} {...props}>
-          {children}
-        </Box>
-      ) : (
-        <ScrollView
-          horizontal
-          style={styles.scrollView}
-          contentContainerStyle={[styles.group, style]}
-          showsHorizontalScrollIndicator={false}
-          {...props}
-        >
-          {children}
-        </ScrollView>
-      )}
-    </PillGroupContext.Provider>
-  );
-};
-
-PillGroup.displayName = 'PillGroup';
-
-const styles = StyleSheet.create(theme => ({
-  scrollView: {
-    flexGrow: 0,
-  },
-  group: {
-    flexDirection: 'row',
-    gap: theme.components.pill.group.gap,
-  },
-  wrap: {
-    flexWrap: 'wrap',
-  },
-}));

package/src/components/PillGroup/index.ts

@@ -1,4 +0,0 @@
-export { PillGroup } from './PillGroup';
-export type { PillGroupProps } from './PillGroup.props';
-export { Pill } from './Pill';
-export type { PillProps } from './Pill.props';

package/src/components/ProgressBar/ProgressBar.figma.tsx

@@ -1,79 +0,0 @@
-import figma from '@figma/code-connect';
-import { ProgressBar } from '../';
-
-figma.connect(
-  ProgressBar,
-  'https://www.figma.com/design/6NKZXZhFSExXrcbBgc6zTR/Hearth-Components---Tokens?node-id=7849-5704',
-  {
-    props: {
-      value: figma.enum('Progress', {
-        '0%': 0,
-        '10%': 10,
-        '20%': 20,
-        '30%': 30,
-        '40%': 40,
-        '50%': 50,
-        '60%': 60,
-        '70%': 70,
-        '80%': 80,
-        '90%': 90,
-        '100%': 100,
-      }),
-      colorScheme: figma.enum('Color Scheme', {
-        Default: 'default',
-        Success: 'success',
-        Danger: 'danger',
-      }),
-      label: figma.boolean('Label?', { true: figma.string('Label') }),
-    },
-    example: props => (
-      <ProgressBar
-        variant="linear"
-        value={props.value}
-        colorScheme={props.colorScheme}
-        label={props.label}
-      />
-    ),
-  }
-);
-
-figma.connect(
-  ProgressBar,
-  'https://www.figma.com/design/6NKZXZhFSExXrcbBgc6zTR/Hearth-Components---Tokens?node-id=7863-3977',
-  {
-    props: {
-      value: figma.enum('Progress', {
-        '0%': 0,
-        '10%': 10,
-        '20%': 20,
-        '30%': 30,
-        '40%': 40,
-        '50%': 50,
-        '60%': 60,
-        '70%': 70,
-        '80%': 80,
-        '90%': 90,
-        '100%': 100,
-      }),
-      colorScheme: figma.enum('Color Scheme', {
-        Default: 'default',
-        Success: 'success',
-        Danger: 'danger',
-      }),
-      size: figma.enum('Size', {
-        'SM-80': 'sm',
-        'MD-140': 'md',
-      }),
-      label: figma.boolean('Label?', { true: figma.string('Label') }),
-    },
-    example: props => (
-      <ProgressBar
-        variant="circular"
-        value={props.value}
-        colorScheme={props.colorScheme}
-        size={props.size}
-        label={props.label}
-      />
-    ),
-  }
-);

package/src/components/ProgressBar/ProgressBar.props.ts

@@ -1,60 +0,0 @@
-import { ViewProps } from 'react-native';
-
-export type ProgressBarVariant = 'linear' | 'circular';
-export type ProgressBarColorScheme = 'default' | 'success' | 'danger';
-export type ProgressBarSize = 'sm' | 'md';
-
-export interface ProgressBarProps extends ViewProps {
-  variant?: ProgressBarVariant;
-  /**
-   * Set the visual appearance.
-   * @default 'default'
-   */
-  colorScheme?: ProgressBarColorScheme;
-  /**
-   * Sets the circular variant size. Does not affect the appearance of the linear variant.
-   * @default 'md'
-   */
-  size?: ProgressBarSize;
-  /**
-   * The current progress value.
-   */
-  value: number;
-  /**
-   * The minimum value.
-   * @default 0
-   */
-  min?: number;
-  /**
-   * The maximum value.
-   * @default 100
-   */
-  max?: number;
-  /**
-   * Required text label for the progress bar.
-   */
-  label: string;
-  /**
-   * Visually hide the label and value text.
-   */
-  hideLabel?: boolean;
-  /**
-   * Override the default percentage value label formatting.
-   */
-  formatValueText?: (value: number, meta: { min: number; max: number; percent: number }) => string;
-  /**
-   * A human-readable text alternative for the current value.
-   */
-  'aria-valuetext'?: string;
-}
-
-export interface ProgressBarInternalProps {
-  percent: number;
-  label: string;
-  valueText: string;
-  hideLabel?: boolean;
-  colorScheme: ProgressBarColorScheme;
-  size: ProgressBarSize;
-}
-
-export default ProgressBarProps;

package/src/components/ProgressBar/ProgressBar.stories.tsx

@@ -1,117 +0,0 @@
-import { Meta, StoryObj } from '@storybook/react-native';
-import type { ComponentProps } from 'react';
-import { ProgressBar } from '.';
-import { VariantTitle } from '../../../docs/components';
-import { Box } from '../Box';
-
-const meta = {
-  title: 'Stories / ProgressBar',
-  component: ProgressBar,
-  parameters: {
-    layout: 'centered',
-  },
-  argTypes: {
-    variant: {
-      options: ['linear', 'circular'],
-      control: 'select',
-      description: 'The progress bar variant.',
-    },
-    colorScheme: {
-      options: ['default', 'success', 'danger'],
-      control: 'select',
-      description: 'The color scheme for the progress indicator.',
-    },
-    size: {
-      options: ['sm', 'md'],
-      control: 'select',
-      description: 'The circular size. Only applies to the circular variant.',
-    },
-  },
-  args: {
-    variant: 'linear',
-    colorScheme: 'default',
-    size: 'md',
-    value: 35,
-    min: 0,
-    max: 100,
-    label: 'Progress',
-  },
-} satisfies Meta<typeof ProgressBar>;
-
-export default meta;
-
-type Story = StoryObj<typeof meta>;
-type ProgressBarStoryArgs = ComponentProps<typeof ProgressBar>;
-
-export const Playground: Story = {};
-
-export const Variants: Story = {
-  args: {
-    value: 55,
-    label: 'Downloads',
-  },
-  render: (args: ProgressBarStoryArgs) => (
-    <Box gap="300" style={{ width: 260 }}>
-      <VariantTitle title="Linear">
-        <ProgressBar {...args} variant="linear" />
-      </VariantTitle>
-      <VariantTitle title="Circular">
-        <ProgressBar {...args} variant="circular" />
-      </VariantTitle>
-    </Box>
-  ),
-};
-
-export const ColorSchemes: Story = {
-  args: {
-    value: 72,
-    label: 'Storage',
-    variant: 'linear',
-  },
-  render: (args: ProgressBarStoryArgs) => (
-    <Box gap="300" style={{ width: 260 }}>
-      <VariantTitle title="Default">
-        <ProgressBar {...args} colorScheme="default" />
-      </VariantTitle>
-      <VariantTitle title="Success">
-        <ProgressBar {...args} colorScheme="success" />
-      </VariantTitle>
-      <VariantTitle title="Danger">
-        <ProgressBar {...args} colorScheme="danger" />
-      </VariantTitle>
-    </Box>
-  ),
-};
-
-export const CircularSizes: Story = {
-  args: {
-    value: 65,
-    label: 'Usage',
-    variant: 'circular',
-  },
-  render: (args: ProgressBarStoryArgs) => (
-    <Box gap="300">
-      <VariantTitle title="Small">
-        <ProgressBar {...args} size="sm" />
-      </VariantTitle>
-      <VariantTitle title="Medium">
-        <ProgressBar {...args} size="md" />
-      </VariantTitle>
-    </Box>
-  ),
-};
-
-export const CustomValueLabels: Story = {
-  args: {
-    value: 68,
-    max: 100,
-    label: 'Data allowance',
-    variant: 'linear',
-    formatValueText: (value: number, { max }: { max: number }) => `${max - value}GB remaining`,
-  },
-  render: (args: ProgressBarStoryArgs) => (
-    <Box style={{ width: 260 }}>
-      <ProgressBar {...args} />
-    </Box>
-  ),
-};

package/src/components/ProgressBar/ProgressBar.tsx

@@ -1,74 +0,0 @@
-import { View } from 'react-native';
-import type ProgressBarProps from './ProgressBar.props';
-import ProgressBarCircular from './ProgressBarCircular';
-import ProgressBarLinear from './ProgressBarLinear';
-
-const clampValue = (value: number, min: number, max: number) => {
-  if (max <= min) return min;
-  return Math.min(Math.max(value, min), max);
-};
-
-const valueToPercent = (value: number, min: number, max: number) => {
-  const range = max - min;
-  if (range <= 0) return 0;
-  return ((value - min) / range) * 100;
-};
-
-const ProgressBar = ({
-  variant = 'linear',
-  colorScheme = 'default',
-  size = 'md',
-  value,
-  min = 0,
-  max = 100,
-  label,
-  hideLabel,
-  formatValueText,
-  'aria-valuetext': ariaValueText,
-  accessibilityLabel,
-  ...rest
-}: ProgressBarProps) => {
-  const effectiveValue =
-    colorScheme === 'success' && !formatValueText ? max : clampValue(value, min, max);
-  const percentValue = valueToPercent(effectiveValue, min, max);
-  const clampedPercent = Math.max(0, Math.min(100, percentValue));
-  const valueText = formatValueText
-    ? formatValueText(effectiveValue, { min, max, percent: clampedPercent })
-    : `${Math.round(clampedPercent)}%`;
-  const valueTextForAria = ariaValueText ?? valueText;
-
-  const internalProps = {
-    percent: clampedPercent,
-    label,
-    valueText,
-    hideLabel,
-    colorScheme,
-    size,
-  };
-
-  return (
-    <View
-      {...rest}
-      accessible
-      role="progressbar"
-      accessibilityRole="progressbar"
-      accessibilityLabel={accessibilityLabel ?? label}
-      accessibilityValue={{ min, max, now: effectiveValue, text: valueTextForAria }}
-      aria-valuenow={effectiveValue}
-      aria-valuemin={min}
-      aria-valuemax={max}
-      aria-valuetext={valueTextForAria}
-      data-colorscheme={colorScheme}
-    >
-      {variant === 'circular' ? (
-        <ProgressBarCircular {...internalProps} />
-      ) : (
-        <ProgressBarLinear {...internalProps} />
-      )}
-    </View>
-  );
-};
-
-ProgressBar.displayName = 'ProgressBar';
-
-export default ProgressBar;