@utilitywarehouse/hearth-react-native 0.34.5 → 0.35.0

package/src/hooks/useBreakpointValue.ts

@@ -1,62 +0,0 @@
- 
-import { UnistylesBreakpoints, UnistylesRuntime } from 'react-native-unistyles';
-
-interface InputValueWithIndex<T> {
-  name: string;
-  value: T;
-  index: number;
-}
-
-type PartialRecord<K extends keyof any, T> = {
-  [P in K]?: T;
-};
-
-type BreakpointValues<T> = { default?: T } & PartialRecord<keyof UnistylesBreakpoints, T>;
-
-function useBreakpointValue<T>(values: BreakpointValues<T>): T | undefined {
-  const currentBreakpointName = UnistylesRuntime.breakpoint ?? 'base';
-  const breakpoints = UnistylesRuntime.breakpoints;
-
-  // Convert breakpoints to an array sorted by their pixel values
-  const sortedBreakpoints = Object.entries(breakpoints).sort((a, b) => a[1] - b[1]);
-
-  // Create a mapping of breakpoint names to their indices
-  const breakpointOrder = sortedBreakpoints.map(([name]) => name);
-  const breakpointIndices = breakpointOrder.reduce<Record<string, number>>(
-    (acc, name, index) => ({ ...acc, [name]: index }),
-    {}
-  );
-
-  // Get the index of the current breakpoint
-  const currentBreakpointIndex = breakpointIndices[currentBreakpointName];
-
-  // Map input values to breakpoint indices
-  const inputValuesWithIndices: Array<InputValueWithIndex<T>> = Object.entries(values).map(
-    ([name, value]) => {
-      const index = name === 'default' ? -1 : (breakpointIndices[name] ?? -1);
-      return { name, value, index };
-    }
-  );
-
-  // Sort the input values by their breakpoint indices
-  inputValuesWithIndices.sort((a, b) => a.index - b.index);
-
-  // Find the value corresponding to the largest breakpoint less than or equal to the current one
-  let matchedValue: T | undefined;
-  for (let i = inputValuesWithIndices.length - 1; i >= 0; i--) {
-    const { index, value } = inputValuesWithIndices[i];
-    if (index <= currentBreakpointIndex) {
-      matchedValue = value;
-      break;
-    }
-  }
-
-  // Fallback to 'default' if no breakpoint matched
-  if (matchedValue === undefined) {
-    matchedValue = values['default'];
-  }
-
-  return matchedValue;
-}
-
-export default useBreakpointValue;

package/src/hooks/useColorMode.ts

@@ -1,18 +0,0 @@
-import { useCallback } from 'react';
-import { UnistylesRuntime, useUnistyles } from 'react-native-unistyles';
-
-const useColorMode = () => {
-  const { theme } = useUnistyles();
-
-  const setColorModeWrapper = useCallback(
-    (mode: 'light' | 'dark') => {
-      if (mode === theme.colorMode) return;
-      UnistylesRuntime.setTheme(mode);
-    },
-    [theme.colorMode]
-  );
-
-  return [theme.colorMode, setColorModeWrapper] as const;
-};
-
-export default useColorMode;

package/src/hooks/useFormFieldAccessibility.test.tsx

@@ -1,74 +0,0 @@
-import { renderToStaticMarkup } from 'react-dom/server';
-import { describe, expect, it } from 'vitest';
-import useFormFieldAccessibility from './useFormFieldAccessibility';
-
-type HookArgs = Parameters<typeof useFormFieldAccessibility>[0];
-
-const renderHook = (args: HookArgs) => {
-  let result: ReturnType<typeof useFormFieldAccessibility> | undefined;
-
-  const TestComponent = () => {
-    result = useFormFieldAccessibility(args);
-    return null;
-  };
-
-  renderToStaticMarkup(<TestComponent />);
-
-  if (!result) {
-    throw new Error('Hook did not return a result');
-  }
-
-  return result;
-};
-
-describe('useFormFieldAccessibility', () => {
-  it('builds a label from the field label and required state', () => {
-    expect(
-      renderHook({
-        label: 'Email',
-        required: true,
-      })
-    ).toEqual({
-      accessibilityHint: undefined,
-      accessibilityLabel: 'Email, required',
-    });
-  });
-
-  it('builds a hint from helper text and validation feedback', () => {
-    expect(
-      renderHook({
-        helperText: 'Enter the code we sent you',
-        validationStatus: 'invalid',
-        invalidText: 'Code is invalid',
-      })
-    ).toEqual({
-      accessibilityHint: 'Enter the code we sent you, Code is invalid',
-      accessibilityLabel: undefined,
-    });
-  });
-
-  it('falls back to provided accessibility props when no composed value exists', () => {
-    expect(
-      renderHook({
-        fallbackLabel: 'Custom label',
-        fallbackHint: 'Custom hint',
-      })
-    ).toEqual({
-      accessibilityHint: 'Custom hint',
-      accessibilityLabel: 'Custom label',
-    });
-  });
-
-  it('supports omitting the required suffix from the label', () => {
-    expect(
-      renderHook({
-        label: 'Verification code',
-        required: true,
-        includeRequiredInLabel: false,
-      })
-    ).toEqual({
-      accessibilityHint: undefined,
-      accessibilityLabel: 'Verification code',
-    });
-  });
-});

package/src/hooks/useFormFieldAccessibility.ts

@@ -1,67 +0,0 @@
-import { useMemo } from 'react';
-
-type ValidationStatus = 'initial' | 'valid' | 'invalid';
-
-type UseFormFieldAccessibilityArgs = {
-  label?: string;
-  helperText?: string;
-  validText?: string;
-  invalidText?: string;
-  required?: boolean;
-  validationStatus?: ValidationStatus;
-  fallbackLabel?: string;
-  fallbackHint?: string;
-  includeRequiredInLabel?: boolean;
-};
-
-const useFormFieldAccessibility = ({
-  label,
-  helperText,
-  validText,
-  invalidText,
-  required = false,
-  validationStatus = 'initial',
-  fallbackLabel,
-  fallbackHint,
-  includeRequiredInLabel = true,
-}: UseFormFieldAccessibilityArgs) => {
-  const accessibilityLabel = useMemo(() => {
-    const nextAccessibilityLabelParts: string[] = [];
-
-    if (label) {
-      nextAccessibilityLabelParts.push(label);
-    }
-
-    if (includeRequiredInLabel && required) {
-      nextAccessibilityLabelParts.push('required');
-    }
-
-    const nextAccessibilityLabel = nextAccessibilityLabelParts.join(', ');
-    return nextAccessibilityLabel || fallbackLabel;
-  }, [fallbackLabel, includeRequiredInLabel, label, required]);
-
-  const accessibilityHint = useMemo(() => {
-    const accessibilityHints: string[] = [];
-
-    if (helperText) {
-      accessibilityHints.push(helperText);
-    }
-
-    if (validationStatus === 'invalid' && invalidText) {
-      accessibilityHints.push(invalidText);
-    }
-
-    if (validationStatus === 'valid' && validText) {
-      accessibilityHints.push(validText);
-    }
-
-    return accessibilityHints.join(', ') || fallbackHint;
-  }, [fallbackHint, helperText, invalidText, validText, validationStatus]);
-
-  return {
-    accessibilityHint,
-    accessibilityLabel,
-  };
-};
-
-export default useFormFieldAccessibility;

package/src/hooks/useMedia.ts

@@ -1,31 +0,0 @@
-import { UnistylesRuntime } from 'react-native-unistyles';
-
-const useMedia = (): Partial<Record<keyof typeof breakpoints, boolean>> => {
-  const breakpoint = UnistylesRuntime.breakpoint ?? 'xs';
-  const breakpoints = UnistylesRuntime.breakpoints;
-
-  type BreakPointKeys = keyof typeof breakpoints;
-  const mediaBreakpoints: Partial<Record<BreakPointKeys, boolean>> = {};
-
-  // Type guard function to check if 'breakpoint' is a key of 'breakpoints'
-  function isBreakpointKey(
-    value: BreakPointKeys,
-    breakpointsObj: typeof breakpoints
-  ): value is BreakPointKeys {
-    return value in breakpointsObj;
-  }
-
-  if (isBreakpointKey(breakpoint, breakpoints)) {
-    (Object.keys(breakpoints) as Array<BreakPointKeys>).forEach(currentBreakPoint => {
-      mediaBreakpoints[currentBreakPoint] =
-        breakpoints[currentBreakPoint] === breakpoints[breakpoint];
-    });
-  } else {
-    // Handle the case where 'breakpoint' is not a valid key
-    throw new Error(`Invalid breakpoint: ${String(breakpoint as string)}`);
-  }
-
-  return mediaBreakpoints;
-};
-
-export default useMedia;

package/src/hooks/usePrevious.ts

@@ -1,9 +0,0 @@
-import { useEffect, useRef } from 'react';
-
-export const usePrevious = (value: any) => {
-  const ref = useRef(null);
-  useEffect(() => {
-    ref.current = value;
-  });
-  return ref.current;
-};

package/src/hooks/useStyleProps.ts

@@ -1,95 +0,0 @@
-import { useMemo } from 'react';
-import { ViewStyle } from 'react-native';
-import {
-  propStyleMapping,
-  resolveThemeKey,
-  resolveThemeValueWithFallback,
-  semanticPropMapping,
-  themeStyleFallbackMapping,
-  themeStyleMapping,
-  viewStyleProps,
-} from '../utils';
-import useTheme from './useTheme';
-
-/**
- * Type for the return value from useStyleProps
- */
-interface StylePropsResult {
-  /** The computed styles based on the input props */
-  computedStyles: Record<string, any>;
-  /** Props that are not style related and should be passed to the component */
-  remainingProps: Record<string, any>;
-}
-
-/**
- * Hook to process utility style props and resolve theme values
- * @param props Component props to process
- * @returns Object containing computed styles and non-style props
- */
-export const useStyleProps = (props: Record<string, any>): StylePropsResult => {
-  const theme = useTheme();
-
-  return useMemo(() => {
-    const computedStyles: Record<string, any> = {};
-    const remainingProps: Record<string, any> = {};
-
-    Object.entries(props).forEach(([propName, propValue]) => {
-      if (propValue === undefined) return;
-
-      // Check for semantic prop mappings first (e.g., iconColor, color)
-      const semanticMapping = semanticPropMapping[propName];
-      if (semanticMapping) {
-        const { styleProp, themeKey } = semanticMapping;
-        const themeMapping = resolveThemeKey(theme, themeKey);
-        const fallbackKey = themeStyleFallbackMapping[themeKey];
-        const fallbackMapping = fallbackKey ? resolveThemeKey(theme, fallbackKey) : undefined;
-
-        computedStyles[styleProp] = resolveThemeValueWithFallback(
-          propValue,
-          themeMapping,
-          fallbackMapping
-        );
-        return;
-      }
-
-      let stylePropName: keyof ViewStyle | undefined;
-
-      // Handle shorthand props
-      if (propStyleMapping[propName]) {
-        stylePropName = propStyleMapping[propName];
-      }
-      // Handle direct style props
-      else if (viewStyleProps.has(propName)) {
-        stylePropName = propName as keyof ViewStyle;
-      }
-
-      if (stylePropName) {
-        // Resolve theme value if needed
-        const themeKey = themeStyleMapping[stylePropName as string];
-
-        if (themeKey) {
-          const themeObj = resolveThemeKey(theme, themeKey);
-          const fallbackKey = themeStyleFallbackMapping[themeKey];
-          const fallbackMapping = fallbackKey ? resolveThemeKey(theme, fallbackKey) : undefined;
-
-          if (themeObj) {
-            computedStyles[stylePropName] = resolveThemeValueWithFallback(
-              propValue,
-              themeObj,
-              fallbackMapping
-            );
-          } else {
-            computedStyles[stylePropName] = propValue;
-          }
-        } else {
-          computedStyles[stylePropName] = propValue;
-        }
-      } else {
-        // This prop is not style related, keep it
-        remainingProps[propName] = propValue;
-      }
-    });
-
-    return { computedStyles, remainingProps };
-  }, [props, theme]);
-};

package/src/hooks/useTheme.ts

@@ -1,9 +0,0 @@
-import { useUnistyles } from 'react-native-unistyles';
-import { AppThemes } from '../types';
-
-const useTheme = () => {
-  const { theme } = useUnistyles();
-  return theme as AppThemes['light'] | AppThemes['dark'];
-};
-
-export default useTheme;

package/src/hooks/useToken.ts

@@ -1,40 +0,0 @@
- 
- 
- 
-import { UnistylesThemes } from 'react-native-unistyles';
-import useTheme from './useTheme';
-
-type UnistylesTokens<T> = T extends keyof UnistylesThemes ? keyof UnistylesThemes[T] : string;
-
-export type GenericKey = string | number | symbol;
-
-export interface Tokens {
-  colors?: { [key: GenericKey]: Record<string, any> & object };
-  sizes?: { [key: GenericKey]: Record<string, any> & object };
-  space?: { [key: GenericKey]: Record<string, any> & object };
-  borderWidths?: { [key: GenericKey]: Record<string, any> & object };
-  radii?: { [key: GenericKey]: Record<string, any> & object };
-  breakpoints?: { [key: GenericKey]: Record<string, any> & object };
-  mediaQueries?: { [key: GenericKey]: Record<string, any> & object };
-  letterSpacings?: { [key: GenericKey]: Record<string, any> & object };
-  opacity?: { [key: GenericKey]: Record<string, any> & object };
-  lineHeights?: { [key: GenericKey]: any };
-  fontWeights?: { [key: GenericKey]: any };
-  fonts?: { [key: GenericKey]: any };
-  fontSizes?: { [key: GenericKey]: any };
-}
-
-/**
- *
- * @param tokenScale Token scale ex: colors, space, fontSizes, etc
- * @param token Token name ex: primary200, red500, 1, 2, sm, etc
- * @returns
- */
-const useToken = <T extends keyof Tokens>(tokenScale: T, token: UnistylesTokens<T>) => {
-  const theme = useTheme();
-
-  // @ts-expect-error - This is a valid check
-  return theme?.[tokenScale]?.[token] ?? token;
-};
-
-export default useToken;

package/src/index.ts

@@ -1,4 +0,0 @@
-'use client';
-export * from './core';
-export * from './hooks';
-export * from './components';

package/src/legacyTokens/common/brand.ts

@@ -1,18 +0,0 @@
-// HEY, DON'T EDIT THIS FILE DIRECTLY, IT'S BEEN MAGICALLY GENERATED.
-
-/**
- * @deprecated This will be removed in the next major version. This is kept for backward compatibility.
- */
-export const brandMidnight = '#1e0a46';
-/**
- * @deprecated This will be removed in the next major version. This is kept for backward compatibility.
- */
-export const brandWhite = '#ffffff';
-/**
- * @deprecated This will be removed in the next major version. This is kept for backward compatibility.
- */
-export const brandPink = '#f495f9';
-/**
- * @deprecated This will be removed in the next major version. This is kept for backward compatibility.
- */
-export const brandPrimaryPurple = '#550091';

package/src/legacyTokens/common/index.ts

@@ -1,10 +0,0 @@
-// HEY, DON'T EDIT THIS FILE DIRECTLY, IT'S BEEN MAGICALLY GENERATED.
-
-/**
- * @deprecated This will be removed in the next major version. This is kept for backward compatibility.
- */
-export * from './brand';
-/**
- * @deprecated This will be removed in the next major version. This is kept for backward compatibility.
- */
-export * from './service';

package/src/legacyTokens/common/service.ts

@@ -1,22 +0,0 @@
-// HEY, DON'T EDIT THIS FILE DIRECTLY, IT'S BEEN MAGICALLY GENERATED.
-
-/**
- * @deprecated This will be removed in the next major version. This is kept for backward compatibility.
- */
-export const serviceGas = '#75A7FD';
-/**
- * @deprecated This will be removed in the next major version. This is kept for backward compatibility.
- */
-export const serviceElectricity = '#62DD99';
-/**
- * @deprecated This will be removed in the next major version. This is kept for backward compatibility.
- */
-export const serviceInsurance = '#F25192';
-/**
- * @deprecated This will be removed in the next major version. This is kept for backward compatibility.
- */
-export const serviceMobile = '#FFD76F';
-/**
- * @deprecated This will be removed in the next major version. This is kept for backward compatibility.
- */
-export const serviceLandline = '#A66DE8';

package/src/legacyTokens/dark/apple.ts

@@ -1,30 +0,0 @@
-// HEY, DON'T EDIT THIS FILE DIRECTLY, IT'S BEEN MAGICALLY GENERATED.
-
-/**
- * @deprecated This will be removed in the next major version. This is kept for backward compatibility.
- */
-export const apple100 = '#03361b';
-/**
- * @deprecated This will be removed in the next major version. This is kept for backward compatibility.
- */
-export const apple200 = '#087a3c';
-/**
- * @deprecated This will be removed in the next major version. This is kept for backward compatibility.
- */
-export const apple300 = '#10b259';
-/**
- * @deprecated This will be removed in the next major version. This is kept for backward compatibility.
- */
-export const apple600 = '#62dd99';
-/**
- * @deprecated This will be removed in the next major version. This is kept for backward compatibility.
- */
-export const apple700 = '#96e6b7';
-/**
- * @deprecated This will be removed in the next major version. This is kept for backward compatibility.
- */
-export const apple800 = '#c1f0d3';
-/**
- * @deprecated This will be removed in the next major version. This is kept for backward compatibility.
- */
-export const apple950 = '#e5f9ed';

package/src/legacyTokens/dark/cyan.ts

@@ -1,50 +0,0 @@
-// HEY, DON'T EDIT THIS FILE DIRECTLY, IT'S BEEN MAGICALLY GENERATED.
-
-/**
- * @deprecated This will be removed in the next major version. This is kept for backward compatibility.
- */
-export const cyan50 = '#010a19';
-/**
- * @deprecated This will be removed in the next major version. This is kept for backward compatibility.
- */
-export const cyan75 = '#001333';
-/**
- * @deprecated This will be removed in the next major version. This is kept for backward compatibility.
- */
-export const cyan100 = '#011537';
-/**
- * @deprecated This will be removed in the next major version. This is kept for backward compatibility.
- */
-export const cyan200 = '#00225c';
-/**
- * @deprecated This will be removed in the next major version. This is kept for backward compatibility.
- */
-export const cyan300 = '#002d80';
-/**
- * @deprecated This will be removed in the next major version. This is kept for backward compatibility.
- */
-export const cyan400 = '#013992';
-/**
- * @deprecated This will be removed in the next major version. This is kept for backward compatibility.
- */
-export const cyan500 = '#0658e5';
-/**
- * @deprecated This will be removed in the next major version. This is kept for backward compatibility.
- */
-export const cyan600 = '#5692fb';
-/**
- * @deprecated This will be removed in the next major version. This is kept for backward compatibility.
- */
-export const cyan700 = '#75a7fd';
-/**
- * @deprecated This will be removed in the next major version. This is kept for backward compatibility.
- */
-export const cyan800 = '#a6c8fc';
-/**
- * @deprecated This will be removed in the next major version. This is kept for backward compatibility.
- */
-export const cyan900 = '#dbeaff';
-/**
- * @deprecated This will be removed in the next major version. This is kept for backward compatibility.
- */
-export const cyan1000 = '#ecf4fe';

package/src/legacyTokens/dark/gold.ts

@@ -1,46 +0,0 @@
-// HEY, DON'T EDIT THIS FILE DIRECTLY, IT'S BEEN MAGICALLY GENERATED.
-
-/**
- * @deprecated This will be removed in the next major version. This is kept for backward compatibility.
- */
-export const gold50 = '#2e1103';
-/**
- * @deprecated This will be removed in the next major version. This is kept for backward compatibility.
- */
-export const gold75 = '#411907';
-/**
- * @deprecated This will be removed in the next major version. This is kept for backward compatibility.
- */
-export const gold100 = '#52210c';
-/**
- * @deprecated This will be removed in the next major version. This is kept for backward compatibility.
- */
-export const gold200 = '#743711';
-/**
- * @deprecated This will be removed in the next major version. This is kept for backward compatibility.
- */
-export const gold300 = '#925317';
-/**
- * @deprecated This will be removed in the next major version. This is kept for backward compatibility.
- */
-export const gold400 = '#cd7d04';
-/**
- * @deprecated This will be removed in the next major version. This is kept for backward compatibility.
- */
-export const gold500 = '#f7b51d';
-/**
- * @deprecated This will be removed in the next major version. This is kept for backward compatibility.
- */
-export const gold600 = '#fbc64b';
-/**
- * @deprecated This will be removed in the next major version. This is kept for backward compatibility.
- */
-export const gold700 = '#ffd76f';
-/**
- * @deprecated This will be removed in the next major version. This is kept for backward compatibility.
- */
-export const gold800 = '#ffe6a8';
-/**
- * @deprecated This will be removed in the next major version. This is kept for backward compatibility.
- */
-export const gold900 = '#fff6e0';

package/src/legacyTokens/dark/grape.ts

@@ -1,30 +0,0 @@
-// HEY, DON'T EDIT THIS FILE DIRECTLY, IT'S BEEN MAGICALLY GENERATED.
-
-/**
- * @deprecated This will be removed in the next major version. This is kept for backward compatibility.
- */
-export const grape100 = '#240444';
-/**
- * @deprecated This will be removed in the next major version. This is kept for backward compatibility.
- */
-export const grape200 = '#2d025e';
-/**
- * @deprecated This will be removed in the next major version. This is kept for backward compatibility.
- */
-export const grape500 = '#7b39c6';
-/**
- * @deprecated This will be removed in the next major version. This is kept for backward compatibility.
- */
-export const grape600 = '#a66de8';
-/**
- * @deprecated This will be removed in the next major version. This is kept for backward compatibility.
- */
-export const grape700 = '#bc92ed';
-/**
- * @deprecated This will be removed in the next major version. This is kept for backward compatibility.
- */
-export const grape800 = '#d4baf3';
-/**
- * @deprecated This will be removed in the next major version. This is kept for backward compatibility.
- */
-export const grape950 = '#f1e6fb';

package/src/legacyTokens/dark/green.ts

@@ -1,42 +0,0 @@
-// HEY, DON'T EDIT THIS FILE DIRECTLY, IT'S BEEN MAGICALLY GENERATED.
-
-/**
- * @deprecated This will be removed in the next major version. This is kept for backward compatibility.
- */
-export const green50 = '#133922';
-/**
- * @deprecated This will be removed in the next major version. This is kept for backward compatibility.
- */
-export const green100 = '#164429';
-/**
- * @deprecated This will be removed in the next major version. This is kept for backward compatibility.
- */
-export const green200 = '#1b5533';
-/**
- * @deprecated This will be removed in the next major version. This is kept for backward compatibility.
- */
-export const green300 = '#21693f';
-/**
- * @deprecated This will be removed in the next major version. This is kept for backward compatibility.
- */
-export const green400 = '#34a868';
-/**
- * @deprecated This will be removed in the next major version. This is kept for backward compatibility.
- */
-export const green500 = '#55ce8b';
-/**
- * @deprecated This will be removed in the next major version. This is kept for backward compatibility.
- */
-export const green600 = '#76d5a1';
-/**
- * @deprecated This will be removed in the next major version. This is kept for backward compatibility.
- */
-export const green700 = '#90dab2';
-/**
- * @deprecated This will be removed in the next major version. This is kept for backward compatibility.
- */
-export const green800 = '#bae8cf';
-/**
- * @deprecated This will be removed in the next major version. This is kept for backward compatibility.
- */
-export const green900 = '#e3faeb';