@utilitywarehouse/hearth-react-native 0.34.5 → 0.35.1

package/src/components/Pagination/Pagination.props.ts

@@ -1,28 +0,0 @@
-import type { ViewProps } from 'react-native';
-
-export interface PaginationProps extends ViewProps {
-  /**
-   * The current active page number (1-indexed).
-   */
-  currentPage: number;
-  /**
-   * The total number of pages.
-   */
-  totalPages: number;
-  /**
-   * Callback fired when the page changes.
-   */
-  onPageChange: (page: number) => void;
-  /**
-   * Whether to show condensed copy instead of individual page items.
-   * @default false
-   */
-  condensed?: boolean;
-  /**
-   * Whether to hide the first and last page controls.
-   * @default false
-   */
-  hideSkipButtons?: boolean;
-}
-
-export default PaginationProps;

package/src/components/Pagination/Pagination.stories.tsx

@@ -1,88 +0,0 @@
-import { Meta, StoryObj } from '@storybook/react-native';
-import { useState } from 'react';
-import { BodyText } from '../BodyText';
-import { Flex } from '../Flex';
-import { Pagination } from './';
-
-const meta = {
-  title: 'Stories / Pagination',
-  component: Pagination,
-  args: {
-    currentPage: 1,
-    totalPages: 10,
-    condensed: false,
-    hideSkipButtons: false,
-  },
-  argTypes: {
-    currentPage: { control: { type: 'number', min: 1 } },
-    totalPages: { control: { type: 'number', min: 1 } },
-    condensed: { control: 'boolean' },
-    hideSkipButtons: { control: 'boolean' },
-  },
-} satisfies Meta<typeof Pagination>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const Playground: Story = {
-  render: (args: StoryObj<typeof meta.args>) => {
-    const [currentPage, setCurrentPage] = useState(args.currentPage);
-
-    return <Pagination {...args} currentPage={currentPage} onPageChange={setCurrentPage} />;
-  },
-};
-
-export const Condensed: Story = {
-  render: () => {
-    const [currentPage, setCurrentPage] = useState(1);
-
-    return (
-      <Pagination
-        condensed
-        currentPage={currentPage}
-        onPageChange={setCurrentPage}
-        totalPages={10}
-      />
-    );
-  },
-};
-
-export const WithoutSkipButtons: Story = {
-  render: () => {
-    const [currentPage, setCurrentPage] = useState(3);
-
-    return (
-      <Pagination
-        currentPage={currentPage}
-        hideSkipButtons
-        onPageChange={setCurrentPage}
-        totalPages={10}
-      />
-    );
-  },
-};
-
-export const EdgeCases: Story = {
-  render: () => {
-    const [nearStartPage, setNearStartPage] = useState(2);
-    const [middlePage, setMiddlePage] = useState(5);
-    const [nearEndPage, setNearEndPage] = useState(9);
-
-    return (
-      <Flex direction="column" spacing="lg" style={{ width: '100%', maxWidth: 520 }}>
-        <Flex direction="column" spacing="xs">
-          <BodyText size="sm">Near start</BodyText>
-          <Pagination currentPage={nearStartPage} onPageChange={setNearStartPage} totalPages={10} />
-        </Flex>
-        <Flex direction="column" spacing="xs">
-          <BodyText size="sm">Middle</BodyText>
-          <Pagination currentPage={middlePage} onPageChange={setMiddlePage} totalPages={10} />
-        </Flex>
-        <Flex direction="column" spacing="xs">
-          <BodyText size="sm">Near end</BodyText>
-          <Pagination currentPage={nearEndPage} onPageChange={setNearEndPage} totalPages={10} />
-        </Flex>
-      </Flex>
-    );
-  },
-};

package/src/components/Pagination/Pagination.tsx

@@ -1,248 +0,0 @@
-import {
-  ChevronLeftSmallIcon,
-  ChevronRightSmallIcon,
-  SkipFirstSmallIcon,
-  SkipLastSmallIcon,
-} from '@utilitywarehouse/hearth-react-native-icons';
-import { ComponentType, useState } from 'react';
-import { Pressable, View } from 'react-native';
-import { StyleSheet } from 'react-native-unistyles';
-import { BodyText } from '../BodyText';
-import { UnstyledIconButton } from '../UnstyledIconButton';
-import type PaginationProps from './Pagination.props';
-import { ELLIPSIS, generatePageNumbers } from './Pagination.utils';
-
-interface PaginationItemProps {
-  label: number;
-  selected?: boolean;
-  onPress: () => void;
-}
-
-const PaginationItem = ({ label, selected = false, onPress }: PaginationItemProps) => {
-  const [isFocused, setIsFocused] = useState(false);
-
-  styles.useVariants({ selected });
-
-  return (
-    <Pressable
-      accessibilityRole="button"
-      accessibilityLabel={`Go to page ${label}`}
-      accessibilityState={{ selected }}
-      onBlur={() => setIsFocused(false)}
-      onFocus={() => setIsFocused(true)}
-      onPress={onPress}
-      style={({ pressed }) => [
-        styles.pageItem,
-        pressed && !selected && styles.pageItemPressed,
-        isFocused && styles.pageItemFocused,
-      ]}
-    >
-      <BodyText size="md" style={styles.pageItemText}>
-        {label}
-      </BodyText>
-    </Pressable>
-  );
-};
-
-const PaginationArrowButton = ({
-  accessibilityLabel,
-  disabled,
-  icon,
-  onPress,
-}: {
-  accessibilityLabel: string;
-  disabled: boolean;
-  icon: ComponentType;
-  onPress: () => void;
-}) => {
-  return (
-    <UnstyledIconButton
-      accessibilityLabel={accessibilityLabel}
-      disabled={disabled}
-      icon={icon}
-      onPress={onPress}
-      size="sm"
-      style={styles.arrowButton}
-    />
-  );
-};
-
-const Pagination = ({
-  currentPage,
-  totalPages,
-  onPageChange,
-  condensed = false,
-  hideSkipButtons = false,
-  style,
-  ...props
-}: PaginationProps) => {
-  const pages = generatePageNumbers(currentPage, totalPages);
-
-  const handleFirst = () => {
-    if (currentPage !== 1) {
-      onPageChange(1);
-    }
-  };
-
-  const handlePrevious = () => {
-    if (currentPage > 1) {
-      onPageChange(currentPage - 1);
-    }
-  };
-
-  const handleNext = () => {
-    if (currentPage < totalPages) {
-      onPageChange(currentPage + 1);
-    }
-  };
-
-  const handleLast = () => {
-    if (currentPage !== totalPages) {
-      onPageChange(totalPages);
-    }
-  };
-
-  return (
-    <View accessibilityLabel="Pagination" style={[styles.container, style]} {...props}>
-      <View style={styles.controllers}>
-        {!hideSkipButtons ? (
-          <PaginationArrowButton
-            accessibilityLabel="Go to first page"
-            disabled={currentPage === 1}
-            icon={SkipFirstSmallIcon}
-            onPress={handleFirst}
-          />
-        ) : null}
-        <PaginationArrowButton
-          accessibilityLabel="Go to previous page"
-          disabled={currentPage === 1}
-          icon={ChevronLeftSmallIcon}
-          onPress={handlePrevious}
-        />
-      </View>
-
-      {condensed ? (
-        <BodyText size="md">
-          Page {currentPage} of {totalPages}
-        </BodyText>
-      ) : (
-        <View style={styles.pages}>
-          {pages.map((page, index) => {
-            if (page === ELLIPSIS) {
-              return (
-                <BodyText key={`ellipsis-${index}`} size="md" style={styles.ellipsis}>
-                  {ELLIPSIS}
-                </BodyText>
-              );
-            }
-
-            return (
-              <PaginationItem
-                key={page}
-                label={page}
-                onPress={() => onPageChange(page)}
-                selected={page === currentPage}
-              />
-            );
-          })}
-        </View>
-      )}
-
-      <View style={styles.controllers}>
-        <PaginationArrowButton
-          accessibilityLabel="Go to next page"
-          disabled={currentPage === totalPages}
-          icon={ChevronRightSmallIcon}
-          onPress={handleNext}
-        />
-        {!hideSkipButtons ? (
-          <PaginationArrowButton
-            accessibilityLabel="Go to last page"
-            disabled={currentPage === totalPages}
-            icon={SkipLastSmallIcon}
-            onPress={handleLast}
-          />
-        ) : null}
-      </View>
-    </View>
-  );
-};
-
-PaginationItem.displayName = 'PaginationItem';
-Pagination.displayName = 'Pagination';
-
-const styles = StyleSheet.create(theme => ({
-  container: {
-    width: '100%',
-    minHeight: theme.components.pagination.item.height,
-    flexDirection: 'row',
-    alignItems: 'center',
-    justifyContent: 'space-between',
-    gap: theme.components.pagination.gap,
-  },
-  controllers: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    gap: theme.components.pagination.gap,
-  },
-  arrowButton: {
-    width: theme.components.pagination.item.width,
-    height: theme.components.pagination.item.height,
-  },
-  pages: {
-    flex: 1,
-    flexDirection: 'row',
-    alignItems: 'center',
-    justifyContent: 'center',
-    flexWrap: 'wrap',
-    gap: theme.components.pagination.gap,
-  },
-  pageItem: {
-    width: theme.components.pagination.item.width,
-    height: theme.components.pagination.item.height,
-    borderRadius: theme.components.pagination.item.radius,
-    alignItems: 'center',
-    justifyContent: 'center',
-    backgroundColor: 'transparent',
-    _web: {
-      _hover: {
-        backgroundColor: theme.color.interactive.functional.surface.subtle.hover,
-      },
-    },
-    variants: {
-      selected: {
-        true: {
-          backgroundColor: theme.color.interactive.brand.surface.strong.default,
-        },
-      },
-    },
-  },
-  pageItemPressed: {
-    backgroundColor: theme.color.interactive.functional.surface.subtle.active,
-  },
-  pageItemFocused: {
-    outlineWidth: 2,
-    outlineOffset: -2,
-    outlineColor: theme.color.border.strong,
-    outlineStyle: 'solid',
-  },
-  pageItemText: {
-    variants: {
-      selected: {
-        true: {
-          color: theme.color.text.inverted,
-        },
-        false: {
-          color: theme.color.text.primary,
-        },
-      },
-    },
-  },
-  ellipsis: {
-    minWidth: theme.components.pagination.item.width,
-    textAlign: 'center',
-    color: theme.color.text.primary,
-  },
-}));
-
-export default Pagination;

package/src/components/Pagination/Pagination.utils.test.ts

@@ -1,20 +0,0 @@
-import { describe, expect, it } from 'vitest';
-import { ELLIPSIS, generatePageNumbers } from './Pagination.utils';
-
-describe('generatePageNumbers', () => {
-  it('returns all pages when the total fits within the visible limit', () => {
-    expect(generatePageNumbers(1, 7)).toEqual([1, 2, 3, 4, 5, 6, 7]);
-  });
-
-  it('returns the leading window when the current page is near the start', () => {
-    expect(generatePageNumbers(2, 10)).toEqual([1, 2, 3, 4, 5, ELLIPSIS, 10]);
-  });
-
-  it('returns the centered window when the current page is in the middle', () => {
-    expect(generatePageNumbers(5, 10)).toEqual([1, ELLIPSIS, 4, 5, 6, ELLIPSIS, 10]);
-  });
-
-  it('returns the trailing window when the current page is near the end', () => {
-    expect(generatePageNumbers(9, 10)).toEqual([1, ELLIPSIS, 6, 7, 8, 9, 10]);
-  });
-});

package/src/components/Pagination/Pagination.utils.ts

@@ -1,37 +0,0 @@
-export const ELLIPSIS = '...';
-
-const MAX_VISIBLE_ITEMS = 7;
-
-export const generatePageNumbers = (
-  currentPage: number,
-  totalPages: number
-): Array<number | typeof ELLIPSIS> => {
-  if (totalPages <= MAX_VISIBLE_ITEMS) {
-    return Array.from({ length: totalPages }, (_, index) => index + 1);
-  }
-
-  const pages: Array<number | typeof ELLIPSIS> = [];
-  const isNearStart = currentPage <= 4;
-  const isNearEnd = currentPage > totalPages - 4;
-
-  if (isNearStart) {
-    pages.push(1, 2, 3, 4, 5, ELLIPSIS, totalPages);
-    return pages;
-  }
-
-  if (isNearEnd) {
-    pages.push(
-      1,
-      ELLIPSIS,
-      totalPages - 4,
-      totalPages - 3,
-      totalPages - 2,
-      totalPages - 1,
-      totalPages
-    );
-    return pages;
-  }
-
-  pages.push(1, ELLIPSIS, currentPage - 1, currentPage, currentPage + 1, ELLIPSIS, totalPages);
-  return pages;
-};

package/src/components/Pagination/index.ts

@@ -1,2 +0,0 @@
-export { default as Pagination } from './Pagination';
-export type { default as PaginationProps } from './Pagination.props';

package/src/components/PillGroup/Pill.figma.tsx

@@ -1,12 +0,0 @@
-import figma from '@figma/code-connect';
-import { Pill } from '../';
-
-figma.connect(Pill, 'https://www.figma.com/design/6NKZXZhFSExXrcbBgc6zTR?node-id=4348%3A15595', {
-  props: {
-    label: figma.string('Label'),
-    icon: figma.boolean('Icon?', {
-      true: figma.instance('Icon-20'),
-    }),
-  },
-  example: props => <Pill value={props.label} label={props.label} />,
-});

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

@@ -1,13 +0,0 @@
-import React from 'react';
-import { PressableProps } from 'react-native';
-
-export interface PillProps extends Omit<PressableProps, 'children'> {
-  /** Value returned when selected */
-  value: string;
-
-  /** Text label shown inside the pill */
-  label: string;
-
-  /** Left icon */
-  icon?: React.ComponentType<any>;
-}

package/src/components/PillGroup/Pill.tsx

@@ -1,118 +0,0 @@
-import { createPressable } from '@gluestack-ui/pressable';
-import { Pressable } from 'react-native';
-import { StyleSheet } from 'react-native-unistyles';
-import { BodyText } from '../BodyText';
-import { Icon } from '../Icon';
-import type { PillProps } from './Pill.props';
-import { usePillGroupContext } from './PillGroup.context';
-
-const PillRoot = ({
-  value,
-  label,
-  icon,
-  states = {},
-  ...props
-}: PillProps & { states?: { active?: boolean } }) => {
-  const { active } = states;
-  const context = usePillGroupContext();
-  const isSelected = context?.value.includes(value) ?? false;
-
-  styles.useVariants({ selected: isSelected, active });
-
-  const handlePress = () => {
-    context?.onChange(value);
-  };
-
-  return (
-    <Pressable
-      {...props}
-      style={styles.pill}
-      accessibilityRole="button"
-      accessibilityState={{ selected: isSelected }}
-      onPress={handlePress}
-    >
-      {icon && <Icon as={icon} size="sm" style={styles.icon} />}
-      <BodyText weight="semibold" style={styles.text}>
-        {label}
-      </BodyText>
-    </Pressable>
-  );
-};
-
-export const Pill = createPressable({ Root: PillRoot });
-
-Pill.displayName = 'Pill';
-
-const styles = StyleSheet.create(theme => ({
-  pill: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    justifyContent: 'center',
-    height: theme.components.pill.height,
-    minWidth: theme.components.pill.minWidth,
-    gap: theme.components.pill.gap,
-    paddingHorizontal: theme.components.pill.paddingHorizontal,
-    borderRadius: theme.components.pill.borderRadius,
-    borderWidth: theme.components.pill.borderWidth,
-    borderColor: theme.color.interactive.neutral.border.subtle,
-    backgroundColor: 'transparent',
-    _web: {
-      _hover: {
-        backgroundColor: theme.color.interactive.neutral.surface.subtle.hover,
-      },
-    },
-    variants: {
-      active: {
-        true: {
-          backgroundColor: theme.color.interactive.neutral.surface.subtle.active,
-        },
-      },
-      selected: {
-        true: {
-          backgroundColor: theme.color.interactive.brand.surface.strong.default,
-          borderColor: theme.color.interactive.brand.surface.strong.default,
-          _web: {
-            _hover: {
-              backgroundColor: theme.color.interactive.brand.surface.strong.hover,
-              borderColor: theme.color.interactive.brand.surface.strong.hover,
-            },
-          },
-        },
-      },
-    },
-    compoundVariants: [
-      {
-        selected: true,
-        active: true,
-        styles: {
-          backgroundColor: theme.color.interactive.brand.surface.strong.active,
-          borderColor: theme.color.interactive.brand.surface.strong.active,
-        },
-      },
-    ],
-  },
-  text: {
-    variants: {
-      selected: {
-        true: {
-          color: theme.color.text.inverted,
-        },
-        false: {
-          color: theme.color.text.primary,
-        },
-      },
-    },
-  },
-  icon: {
-    variants: {
-      selected: {
-        true: {
-          color: theme.color.icon.inverted,
-        },
-        false: {
-          color: theme.color.icon.primary,
-        },
-      },
-    },
-  },
-}));

package/src/components/PillGroup/PillGroup.context.tsx

@@ -1,12 +0,0 @@
-import { createContext, useContext } from 'react';
-
-export interface PillGroupContextValue {
-  value: string[];
-  onChange: (value: string) => void;
-}
-
-export const PillGroupContext = createContext<PillGroupContextValue | null>(null);
-
-export const usePillGroupContext = () => {
-  return useContext(PillGroupContext);
-};

package/src/components/PillGroup/PillGroup.docs.mdx

@@ -1,96 +0,0 @@
-import { Canvas, Controls, Meta } from '@storybook/addon-docs/blocks';
-import { BackToTopButton, ViewFigmaButton } from '../../../docs/components';
-import * as PillGroupStories from './PillGroup.stories';
-
-<Meta title="Components / Pill Group" />
-
-<ViewFigmaButton url="https://www.figma.com/design/6NKZXZhFSExXrcbBgc6zTR/Hearth-Components---Tokens" />
-
-<BackToTopButton />
-
-# Pill Group
-
-A container component that groups multiple `Pill` components together for filtering and categorization. It provides layout control with optional wrapping behavior and manages selection state.
-
-- [Playground](#playground)
-- [Usage](#usage)
-- [Props](#props)
-- [Examples](#examples)
-
-## Playground
-
-<Canvas of={PillGroupStories.Playground} />
-
-<Controls of={PillGroupStories.Playground} />
-
-## Usage
-
-The `PillGroup` component is a controlled component that manages the selection state of multiple `Pill` components. It supports both single and multi-select modes.
-
-### Basic Usage
-
-```tsx
-import { Pill, PillGroup } from '@hearth/react-native';
-import { useState } from 'react';
-
-const [selectedTags, setSelectedTags] = useState(['ui']);
-
-<PillGroup value={selectedTags} onChange={setSelectedTags}>
-  <Pill value="ui" label="UI" />
-  <Pill value="backend" label="Backend" icon={ServerMediumIcon} />
-  <Pill value="devops" label="DevOps" />
-</PillGroup>
-```
-
-## Props
-
-### PillGroup Props
-
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `value` | `string \| string[]` | Required | Controlled selected value(s). Single string for single-select, array for multi-select |
-| `multiple` | `boolean` | `false` | Enable multi-select mode |
-| `wrap` | `boolean` | `true` | Whether pills should wrap to multiple lines when they overflow |
-| `onChange` | `(value: string \| string[]) => void` | - | Handle selection changes. Returns single string in single-select mode, array in multi-select mode |
-| `children` | `ReactNode` | Required | `Pill` components to group together |
-| ...rest | `ViewProps` | - | All standard View props are supported |
-
-### Pill Props
-
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `value` | `string` | Required | Value returned when selected |
-| `label` | `string` | Required | The text content of the pill |
-| `icon` | `ComponentType<any>` | - | Optional icon component to display before the label |
-| ...rest | `PressableProps` | - | All standard Pressable props are supported |
-
-
-### Multi-Select Mode
-
-```tsx
-const [tags, setTags] = useState(['ui', 'backend']);
-
-<PillGroup multiple value={tags} onChange={setTags}>
-  <Pill value="ui" label="UI" />
-  <Pill value="backend" label="Backend" icon={ServerMediumIcon} />
-  <Pill value="devops" label="DevOps" />
-</PillGroup>
-```
-
-## Examples
-
-### Wrap Behavior
-
-Compare how pills behave with and without wrapping enabled.
-
-<Canvas of={PillGroupStories.WrapBehavior} />
-
-### Multi-Select Example
-
-Select multiple options
-
-<Canvas of={PillGroupStories.Multiple} />
-
-### All States of Pill
-
-<Canvas of={PillGroupStories.PillStates} />

package/src/components/PillGroup/PillGroup.figma.tsx

@@ -1,20 +0,0 @@
-import figma from '@figma/code-connect';
-import { PillGroup } from '../';
-
-const value = '';
-
-figma.connect(
-  PillGroup,
-  'https://www.figma.com/design/6NKZXZhFSExXrcbBgc6zTR?node-id=4348%3A15988',
-  {
-    props: {
-      wrap: figma.boolean('Wrap?'),
-      pills: figma.children('Pill'),
-    },
-    example: props => (
-      <PillGroup value={value} wrap={props.wrap}>
-        {props.pills}
-      </PillGroup>
-    ),
-  }
-);