@utilitywarehouse/hearth-react-native 0.28.0 → 0.28.1

package/docs/components/NextPrevPage.tsx

@@ -1,7 +1,7 @@
 import { ChevronLeftSmallIcon } from '@utilitywarehouse/hearth-react-native-icons';
 import { StyleSheet, View } from 'react-native';
+import StorybookLink from '../../../../shared/storybook/StorybookLink';
 import { Card, CardPressHandler, Heading, Link } from '../../src';
-import { addReactNativePrefix } from '../heplers';
 
 type NextPrevPageProps = {
   nextLink?: string;
@@ -15,49 +15,33 @@ const NextPrevPage: React.FC<NextPrevPageProps> = ({
   nextTitle,
   prevLink,
   prevTitle,
-}) => {
-  const openLink = (link: string) => {
-    let target = link;
-    if (
-      typeof window !== 'undefined' &&
-      window.top?.location.href.includes('hearth.prod.uw.systems/?path=')
-    ) {
-      target = addReactNativePrefix(link);
-    }
-    if (window.top) {
-      window.top.location.href = target;
-    }
-  };
-  return (
-    <div className="sb-unstyled">
-      <View style={styles.container}>
-        {!!prevLink && (
-          <Card gap="100" alignItems="flex-start">
-            {!!prevTitle && <Heading size="sm">{prevTitle}</Heading>}
-            <CardPressHandler>
-              <Link
-                onPress={() => openLink(prevLink)}
-                iconPosition="left"
-                icon={ChevronLeftSmallIcon}
-              >
-                Prev Page
-              </Link>
-            </CardPressHandler>
-          </Card>
-        )}
-        <div />
-        {!!nextLink && (
-          <Card gap="100" alignItems="flex-start">
-            {!!nextTitle && <Heading size="sm">{nextTitle}</Heading>}
-            <CardPressHandler>
-              <Link onPress={() => openLink(nextLink)}>Next Page</Link>
-            </CardPressHandler>
-          </Card>
-        )}
-      </View>
-    </div>
-  );
-};
+}) => (
+  <div className="sb-unstyled">
+    <View style={styles.container}>
+      {!!prevLink && (
+        <Card gap="100" alignItems="flex-start">
+          {!!prevTitle && <Heading size="sm">{prevTitle}</Heading>}
+          <CardPressHandler>
+            <StorybookLink as={Link} to={prevLink} iconPosition="left" icon={ChevronLeftSmallIcon}>
+              Prev Page
+            </StorybookLink>
+          </CardPressHandler>
+        </Card>
+      )}
+      <div />
+      {!!nextLink && (
+        <Card gap="100" alignItems="flex-start">
+          {!!nextTitle && <Heading size="sm">{nextTitle}</Heading>}
+          <CardPressHandler>
+            <StorybookLink as={Link} to={nextLink}>
+              Next Page
+            </StorybookLink>
+          </CardPressHandler>
+        </Card>
+      )}
+    </View>
+  </div>
+);
 
 const styles = StyleSheet.create({
   container: {

package/docs/components/index.ts

@@ -1,3 +1,4 @@
+export { default as StorybookLink } from '../../../../shared/storybook/StorybookLink';
 export { default as AdvancedInputExample } from './AdvancedInputExample';
 export { default as BackToTopButton } from './BackToTopButton';
 export { default as BadgeList } from './BadgeList';

package/docs/getting-started.mdx

@@ -67,8 +67,8 @@ const App: React.FC = () => {
 ```
 
 <NextPrevPage
-  prevLink="/?path=/docs/introduction--docs"
+  prevLink="introduction"
   prevTitle="Introduction"
-  nextLink="/?path=/docs/styling--docs"
-  nextTitle="Styling"
+  nextLink="changelog"
+  nextTitle="Changelog"
 />

package/docs/hooks.mdx

@@ -519,8 +519,8 @@ function ResponsiveGrid({ items }) {
 ```
 
 <NextPrevPage
-  prevLink="/?path=/docs/theme-tokens--docs"
+  prevLink="theme-tokens"
   prevTitle="Theme Tokens"
-  nextLink="/?path=/docs/layout-components--docs"
+  nextLink="layout-components"
   nextTitle="Layout Components"
 />

package/docs/introduction.mdx

@@ -218,4 +218,4 @@ require('react-native-reanimated').setUpTests();
 // rest of your setup...
 ```
 
-<NextPrevPage nextLink="/?path=/docs/getting-started--docs" nextTitle="Getting Started" />
+<NextPrevPage nextLink="getting-started" nextTitle="Getting Started" />

package/docs/layout-components.docs.mdx

@@ -1,4 +1,5 @@
 import { ArgTypes, Canvas, Meta } from '@storybook/addon-docs/blocks';
+import StorybookLink from '../../../shared/storybook/StorybookLink';
 import * as BoxStories from '../src/components/Box/Box.stories';
 import * as ContainerStories from '../src/components/Container/Container.stories';
 import * as FlexStories from '../src/components/Flex/Flex.stories';
@@ -28,6 +29,8 @@ apply design decisions coherently.
 size and colour to elements. It can be used to control behaviour of child
 elements within `Flex` and `Grid` containers.
 
+You can view the <StorybookLink to="primitives-box">`Box` docs here</StorybookLink>.
+
 ```tsx
 <Box
   padding="400"
@@ -47,6 +50,8 @@ spacing using the design system's responsive layout tokens. It automatically app
 appropriate margin and padding based on the current breakpoint, making it ideal for
 wrapping page content or major sections.
 
+You can view the <StorybookLink to="primitives-container">`Container` docs here</StorybookLink>.
+
 ```tsx
 <Container spacing="lg">
   <Box>{...}</Box>
@@ -74,6 +79,8 @@ the convenience of the component:
 component is useful for defining layouts along an axis, and replaces the `HStack` and `VStack`
 component you may have used in other libraries.
 
+You can view the <StorybookLink to="primitives-flex">`Flex` docs here</StorybookLink>.
+
 ```tsx
 <Flex
   padding="400"
@@ -95,6 +102,8 @@ styling props, and to all the properties needed to build a grid layout.
 
 You can easily build responsive layouts using Design System defaults.
 
+You can view the <StorybookLink to="primitives-grid">`Grid` docs here</StorybookLink>.
+
 ```tsx
 <Grid columns={2} spacing="md">
   <Box>{...}</Box>
@@ -104,8 +113,8 @@ You can easily build responsive layouts using Design System defaults.
 ```
 
 <NextPrevPage
-  prevLink="/?path=/docs/hooks--docs"
+  prevLink="hooks"
   prevTitle="Hooks"
-  nextLink="/?path=/docs/all-components--docs"
+  nextLink="all-components"
   nextTitle="All Components"
 />

package/docs/styling.mdx

@@ -876,8 +876,8 @@ const styles = StyleSheet.create(theme => ({
 By following these patterns and using the design tokens provided by Hearth React Native, you'll create consistent, maintainable, and accessible user interfaces that work seamlessly across different platforms and screen sizes.
 
 <NextPrevPage
-  prevLink="/?path=/docs/getting-started--docs"
-  prevTitle="Getting Started"
-  nextLink="/?path=/docs/theme-tokens--docs"
+  prevLink="changelog"
+  prevTitle="Changelog"
+  nextLink="theme-tokens"
   nextTitle="Theme Tokens"
 />

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@utilitywarehouse/hearth-react-native",
-  "version": "0.28.0",
+  "version": "0.28.1",
   "description": "Utility Warehouse React Native UI library",
   "main": "build/index.js",
   "types": "build/index.d.ts",
@@ -57,9 +57,9 @@
     "vite-plugin-svgr": "^4.5.0",
     "vitest": "^3.2.4",
     "@utilitywarehouse/hearth-fonts": "^0.0.4",
+    "@utilitywarehouse/hearth-react-native-icons": "^0.8.0",
     "@utilitywarehouse/hearth-react-icons": "^0.8.0",
     "@utilitywarehouse/hearth-svg-assets": "^0.5.0",
-    "@utilitywarehouse/hearth-react-native-icons": "^0.8.0",
     "@utilitywarehouse/hearth-tokens": "^0.2.4"
   },
   "peerDependencies": {

package/scripts/copyChangelog.js

@@ -29,7 +29,7 @@ changelogContent = changelogContent.split('\n').slice(1).join('\n');
 
 // Create the MDX content with imports and components
 const mdxContent = `import { Meta } from '@storybook/addon-docs/blocks';
-import { BackToTopButton } from './components';
+import { BackToTopButton, NextPrevPage } from './components';
 
 <Meta title="Changelog" />
 <BackToTopButton />
@@ -39,6 +39,13 @@ import { BackToTopButton } from './components';
 The changelog for the Hearth React Native library. Here you can find all the changes, improvements, and bug fixes for each version.
 
 ${changelogContent}
+
+<NextPrevPage
+  prevLink="getting-started"
+  prevTitle="Getting Started"
+  nextLink="styling"
+  nextTitle="Styling"
+/>
 `;
 
 // Write the new MDX file

package/src/components/Banner/Banner.docs.mdx

@@ -1,6 +1,7 @@
 import { Canvas, Controls, Meta } from '@storybook/addon-docs/blocks';
 import { ElectricityMediumIcon } from '@utilitywarehouse/hearth-react-native-icons';
 import { Banner, Button, Center, Link } from '../../';
+import StorybookLink from '../../../../../shared/storybook/StorybookLink';
 import { BackToTopButton, UsageWrap, ViewFigmaButton } from '../../../docs/components';
 import * as Stories from './Banner.stories';
 
@@ -94,7 +95,7 @@ The `BannerImage` & `BannerIllustration` component can be used to display an ima
 | `dark`    | `ImageSourcePropType` | The source of the image to display in dark mode (use instead of source)  |
 | `...rest` | `ImageProps`          | Additional props to pass to the underlying Image component               |
 
-For more details about the ThemedImage component used internally, refer to the [`ThemedImage` documentation](/docs/utility-components-themed-image--docs).
+For more details about the ThemedImage component used internally, refer to the <StorybookLink to="utility-components-themed-image">`ThemedImage` documentation</StorybookLink>.
 
 ## Layout Options
 

package/src/components/Center/Center.docs.mdx

@@ -1,8 +1,9 @@
-import { Meta, Canvas, Story, Controls, Primary } from '@storybook/addon-docs/blocks';
-import * as Stories from './Center.stories';
-import { Center, Pressable, Box, BodyText } from '../..';
-import { UsageWrap, BackToTopButton, ViewFigmaButton } from '../../../docs/components';
+import { Canvas, Controls, Meta, Primary, Story } from '@storybook/addon-docs/blocks';
 import { color } from '@utilitywarehouse/hearth-tokens';
+import { BodyText, Box, Center, Pressable } from '../..';
+import StorybookLink from '../../../../../shared/storybook/StorybookLink';
+import { BackToTopButton, UsageWrap, ViewFigmaButton } from '../../../docs/components';
+import * as Stories from './Center.stories';
 
 <Meta title="Primitives / Center" />
 
@@ -38,4 +39,4 @@ const MyComponent = () => (
 
 ## Props
 
-The `Center` component extends the [`Box`](/docs/components-box--docs) component, so it has all the same props as [`Box`](/docs/components-box--docs).
+The `Center` component extends the <StorybookLink to="components-box">`Box`</StorybookLink> component, so it has all the same props as <StorybookLink to="components-box">`Box`</StorybookLink>.

package/src/components/Checkbox/Checkbox.docs.mdx

@@ -10,6 +10,7 @@ import {
   CheckboxTile,
   FormField,
 } from '../../';
+import StorybookLink from '../../../../../shared/storybook/StorybookLink';
 import { BackToTopButton, UsageWrap, ViewFigmaButton } from '../../../docs/components';
 import * as Stories from './Checkbox.stories';
 
@@ -219,7 +220,7 @@ const MyComponent = () => {
 | `dark`    | `ImageSourcePropType` | The source of the image to display in dark mode (use instead of source)  |
 | `...rest` | `ImageProps`          | Additional props to pass to the underlying Image component               |
 
-For more details about the ThemedImage component used internally, refer to the [`ThemedImage` documentation](/docs/utility-components-themed-image--docs).
+For more details about the ThemedImage component used internally, refer to the <StorybookLink to="utility-components-themed-image">`ThemedImage` documentation</StorybookLink>.
 
 The `CheckboxImage` component is used to display an image next to the checkbox label. It inherits all the properties of React Native's `Image` component.
 

package/src/components/CurrencyInput/CurrencyInput.docs.mdx

@@ -1,5 +1,6 @@
 import { Canvas, Controls, Meta } from '@storybook/addon-docs/blocks';
 import { Center, CurrencyInput, FormField } from '../../';
+import StorybookLink from '../../../../../shared/storybook/StorybookLink';
 import { BackToTopButton, UsageWrap, ViewFigmaButton } from '../../../docs/components';
 import * as Stories from './CurrencyInput.stories';
 
@@ -108,7 +109,7 @@ const MyComponent = () => {
 ### With `FormField`
 
 The `CurrencyInput` component can be used with the `FormField` component to create a custom input field.
-For more information on the `FormField` component view the [docs here](/docs/components-form-field--docs).
+For more information on the `FormField` component view the <StorybookLink to="forms-form-field">`FormField` documentation</StorybookLink>.
 
 <UsageWrap>
   <Center>

package/src/components/HighlightBanner/HighlightBanner.docs.mdx

@@ -1,5 +1,6 @@
 import { Canvas, Controls, Meta } from '@storybook/addon-docs/blocks';
 import { Button, Center, HighlightBanner, HighlightBannerImage, Link } from '../../';
+import StorybookLink from '../../../../../shared/storybook/StorybookLink';
 import { BackToTopButton, UsageWrap, ViewFigmaButton } from '../../../docs/components';
 import * as Stories from './HighlightBanner.stories';
 
@@ -96,7 +97,7 @@ The `HighlightBannerImage` component can be used to display an image within the
 | `dark`    | `ImageSourcePropType` | The source of the image to display in dark mode (use instead of source)  |
 | `...rest` | `ImageProps`          | Additional props to pass to the underlying Image component               |
 
-For more details about the ThemedImage component used internally, refer to the [`ThemedImage` documentation](/docs/utility-components-themed-image--docs).
+For more details about the ThemedImage component used internally, refer to the <StorybookLink to="utility-components-themed-image">`ThemedImage` documentation</StorybookLink>.
 
 ## Variants
 

package/src/components/Input/Input.docs.mdx

@@ -1,6 +1,7 @@
 import { Canvas, Controls, Meta, Story } from '@storybook/addon-docs/blocks';
 import { EmailMediumIcon } from '@utilitywarehouse/hearth-react-native-icons';
 import { Center, FormField, Input, InputField, InputIcon, InputSlot, Pressable } from '../../';
+import StorybookLink from '../../../../../shared/storybook/StorybookLink';
 import {
   AdvancedInputExample,
   BackToTopButton,
@@ -276,7 +277,7 @@ const MyComponent = () => {
 ### With `FormField`
 
 The `Input` component can be used with the `FormField` component to create a custom input field.
-For more information on the `FormField` componment view the [docs here](/docs/components-form-field--docs).
+For more information on the `FormField` component view the <StorybookLink to="forms-form-field">`FormField` documentation</StorybookLink>.
 
 <UsageWrap>
   <Center>

package/src/components/Menu/Menu.docs.mdx

@@ -1,4 +1,5 @@
 import { Canvas, Controls, Meta, Story } from '@storybook/addon-docs/blocks';
+import StorybookLink from '../../../../../shared/storybook/StorybookLink';
 import { BackToTopButton, ViewFigmaButton } from '../../../docs/components';
 import * as Stories from './Menu.stories';
 
@@ -74,7 +75,7 @@ const MyComponent = () => {
 
 The rest of the props are passed down to the underlying `BottomSheetModal` component, so you can use any of its
 props for additional configuration (e.g. `snapPoints`, `backgroundStyle`, etc.).
-See the [BottomSheetModal docs](/?path=/docs/components-bottomsheet--docs) for more details.
+See the <StorybookLink to="components-bottomsheet">`BottomSheetModal` documentation</StorybookLink> for more details.
 
 ### MenuItem
 

package/src/components/Modal/Modal.docs.mdx

@@ -1,5 +1,6 @@
 import { Canvas, Controls, Meta, Story } from '@storybook/addon-docs/blocks';
 import { BodyText, BottomSheetModal, Box, Button, Center, Heading, Modal } from '../../';
+import StorybookLink from '../../../../../shared/storybook/StorybookLink';
 import modalAndroidVideo from '../../../docs/assets/modal-android.mp4';
 import modaliOSVideo from '../../../docs/assets/modal-ios.mp4';
 import { BackToTopButton, UsageWrap, ViewFigmaButton } from '../../../docs/components';
@@ -125,7 +126,7 @@ The `ModalImage` component can be used to display an image within the Modal. It
 | `dark`    | `ImageSourcePropType` | The source of the image to display in dark mode (use instead of source)  |
 | `...rest` | `ImageProps`          | Additional props to pass to the underlying Image component               |
 
-For more details about the ThemedImage component used internally, refer to the [`ThemedImage` documentation](/docs/utility-components-themed-image--docs).
+For more details about the ThemedImage component used internally, refer to the <StorybookLink to="utility-components-themed-image">`ThemedImage` documentation</StorybookLink>.
 
 ## Features
 

package/src/components/Radio/Radio.docs.mdx

@@ -11,6 +11,7 @@ import {
   RadioLabel,
   RadioTile,
 } from '../../';
+import StorybookLink from '../../../../../shared/storybook/StorybookLink';
 import mastercardLogo from '../../../docs/assets/bank-logo.png';
 import visaLogo from '../../../docs/assets/bank-logo1.png';
 import { BackToTopButton, UsageWrap, ViewFigmaButton } from '../../../docs/components';
@@ -159,7 +160,7 @@ Contains all Group related layout style props and actions. It inherits all the p
 | `dark`    | `ImageSourcePropType` | The source of the image to display in dark mode (use instead of source)  |
 | `...rest` | `ImageProps`          | Additional props to pass to the underlying Image component               |
 
-For more details about the ThemedImage component used internally, refer to the [`ThemedImage` documentation](/docs/utility-components-themed-image--docs).
+For more details about the ThemedImage component used internally, refer to the <StorybookLink to="utility-components-themed-image">`ThemedImage` documentation</StorybookLink>.
 
 Contains all Image related layout style props and actions. It inherits all the properties of React Native's [Image component](https://reactnative.dev/docs/image).
 

package/src/components/Select/Select.docs.mdx

@@ -1,6 +1,7 @@
 import { Canvas, Controls, Meta, Story } from '@storybook/addon-docs/blocks';
 import { UserSmallIcon } from '@utilitywarehouse/hearth-react-native-icons';
 import { Center, FormField, Select, SelectOption } from '../../';
+import StorybookLink from '../../../../../shared/storybook/StorybookLink';
 import { BackToTopButton, UsageWrap, ViewFigmaButton } from '../../../docs/components';
 import * as Stories from './Select.stories';
 
@@ -164,7 +165,7 @@ const MyComponent = () => {
 ### With `FormField`
 
 The `Select` component can be used with the `FormField` component for additional functionality like validation messages and helper text.
-For more information on the `FormField` component, view the [docs here](/docs/components-form-field--docs).
+For more information on the `FormField` component, view the <StorybookLink to="forms-form-field">`FormField` documentation</StorybookLink>.
 
 <Canvas of={Stories.WithValidationStatus} />
 

package/src/components/Select/Select.props.ts

@@ -152,6 +152,10 @@ export interface SelectOptionProps {
    * Callback when this option is selected
    */
   onPress?: (value: string) => void;
+  /**
+   * Test ID for testing
+   */
+  testID?: string;
 }
 
 export default SelectProps;

package/src/components/Select/Select.tsx

@@ -41,6 +41,7 @@ const Select = ({
   listProps,
   searchable = false,
   searchPlaceholder = 'Search',
+  testID,
   ...rest
 }: SelectProps) => {
   const formFieldContext = useFormFieldContext();
@@ -110,9 +111,10 @@ const Select = ({
         disabled={item.disabled}
         leadingIcon={item.leadingIcon}
         trailingIcon={item.trailingIcon}
+        testID={testID ? `${testID}-option-${item.label}` : undefined}
       />
     ),
-    []
+    [testID]
   );
 
   const renderEmptyComponent = useCallback(
@@ -141,6 +143,7 @@ const Select = ({
         <Pressable
           onPress={openBottomSheet}
           disabled={isDisabled || isReadonly}
+          testID={testID}
           style={({ pressed }) => [
             styles.selectContainer,
             styles.pressedContainer(pressed || isOpen),
@@ -194,6 +197,7 @@ const Select = ({
                   inBottomSheet
                   onChangeText={setSearch}
                   type="search"
+                  testID={testID ? `${testID}-search` : undefined}
                 />
               </View>
             )}

package/src/components/Select/SelectOption.tsx

@@ -14,6 +14,7 @@ const SelectOption = ({
   selected,
   disabled,
   onPress,
+  testID,
 }: SelectOptionProps) => {
   const { selectedValue, onValueChange, close } = useSelectContext();
   const isSelected = selected !== undefined ? selected : selectedValue === value;
@@ -38,6 +39,7 @@ const SelectOption = ({
     <Pressable
       onPress={handlePress}
       disabled={disabled}
+      testID={testID}
       style={({ pressed }) => [styles.container, pressed && styles.pressed]}
     >
       {!!LeftIcon && (

package/src/components/Switch/Switch.docs.mdx

@@ -1,5 +1,6 @@
 import { Canvas, Controls, Meta, Story } from '@storybook/addon-docs/blocks';
 import { Center, Flex, FormField, FormFieldLabel, FormFieldLabelText, Label, Switch } from '../../';
+import StorybookLink from '../../../../../shared/storybook/StorybookLink';
 import {
   BackToTopButton,
   SwitchExample,
@@ -72,7 +73,7 @@ const MyComponent = () => {
 ### Switch with Label
 
 When the Switch is not placed in a List Item, you should use the `Label` component next to it. See
-the [`FormField` docs](/?path=/docs/native-ui-components-form-field--docs) for more information.
+the <StorybookLink to="forms-form-field">`FormField` documentation</StorybookLink> for more information.
 
 <UsageWrap>
   <FormField>
@@ -109,7 +110,7 @@ const MyComponent = () => {
 ### List with Switch
 
 You can also use the list to display a list of switches. You can achieve this by using the `Switch`
-component as the `trailingContent` of the `ListItem`. See the [`List` docs](/?path=/docs/native-ui-components-list--docs)
+component as the `trailingContent` of the `ListItem`. See the <StorybookLink to="native-ui-components-list">`List` documentation</StorybookLink>
 for more information.
 
 <UsageWrap>

package/src/components/VerificationInput/VerificationInput.tsx

@@ -23,6 +23,7 @@ const VerificationInput = forwardRef<VerificationInputHandle, VerificationInputP
       secureTextEntry = false,
       autoFocus = false,
       style,
+      testID,
       ...props
     },
     ref
@@ -239,6 +240,7 @@ const VerificationInput = forwardRef<VerificationInputHandle, VerificationInputP
             maxLength={length}
             caretHidden
             style={styles.hiddenInput}
+            testID={testID}
           />
           {slots.map(index => {
             const char = displayValue[index] || '';
@@ -260,6 +262,7 @@ const VerificationInput = forwardRef<VerificationInputHandle, VerificationInputP
                   inputRef.current?.focus();
                   setSelectionIndex(index);
                 }}
+                testID={testID ? `${testID}-${index}` : undefined}
               />
             );
           })}