@utilitywarehouse/hearth-react-native 0.34.5 → 0.35.0

package/src/utils/isEqual.ts

@@ -1,30 +0,0 @@
-const isEqual = (a: any, b: any): boolean => {
-  if (a === b) return true;
-
-  if (typeof a !== typeof b) return false;
-
-  if (typeof a !== 'object' || a === null || b === null) return false;
-
-  if (Array.isArray(a) !== Array.isArray(b)) return false;
-
-  if (Array.isArray(a)) {
-    if (a.length !== b.length) return false;
-    for (let i = 0; i < a.length; i++) {
-      if (!isEqual(a[i], b[i])) return false;
-    }
-    return true;
-  }
-
-  const keysA = Object.keys(a);
-  const keysB = Object.keys(b);
-
-  if (keysA.length !== keysB.length) return false;
-
-  for (const key of keysA) {
-    if (!keysB.includes(key) || !isEqual(a[key], b[key])) return false;
-  }
-
-  return true;
-};
-
-export default isEqual;

package/src/utils/isThemedImageProps.ts

@@ -1,8 +0,0 @@
-import { ImageProps } from 'react-native';
-import { ThemedImageProps } from '../components';
-
-const isThemedImageProps = (props: ThemedImageProps | ImageProps): props is ThemedImageProps => {
-  return 'light' in props && 'dark' in props;
-};
-
-export default isThemedImageProps;

package/src/utils/styleUtils.ts

@@ -1,264 +0,0 @@
-import { ViewStyle } from 'react-native';
-
-/**
- * Mapping of shorthand props to their full style property names
- */
-export const propStyleMapping: { [key: string]: keyof ViewStyle } = {
-  // Padding
-  p: 'padding',
-  px: 'paddingHorizontal',
-  py: 'paddingVertical',
-  pt: 'paddingTop',
-  pb: 'paddingBottom',
-  pl: 'paddingLeft',
-  pr: 'paddingRight',
-  // Margin
-  m: 'margin',
-  mx: 'marginHorizontal',
-  my: 'marginVertical',
-  mt: 'marginTop',
-  mb: 'marginBottom',
-  ml: 'marginLeft',
-  mr: 'marginRight',
-  // Colors
-  bg: 'backgroundColor',
-  bgColor: 'backgroundColor',
-  // Dimensions
-  h: 'height',
-  w: 'width',
-  // Border
-  rounded: 'borderRadius',
-  // Spacing
-  spacing: 'gap',
-  space: 'gap',
-};
-
-/**
- * Mapping of style props to their theme category.
- *
- * - `backgroundColor` maps to `theme.helpers.semanticColor.background` (simplified semantic background tokens)
- *   with fallback to `theme.color` for full color values
- * - `borderColor` (and variants) maps to `theme.helpers.semanticColor.border` (simplified semantic border tokens)
- *   with fallback to `theme.color` for full color values
- * - Other color props (shadowColor, outlineColor) still map to the full `theme.color` object
- */
-export const themeStyleMapping: { [key: string]: string } = {
-  // Space related
-  top: 'space',
-  bottom: 'space',
-  left: 'space',
-  right: 'space',
-  padding: 'space',
-  paddingHorizontal: 'space',
-  paddingVertical: 'space',
-  paddingTop: 'space',
-  paddingBottom: 'space',
-  paddingLeft: 'space',
-  paddingRight: 'space',
-  paddingEnd: 'space',
-  paddingStart: 'space',
-  margin: 'space',
-  marginHorizontal: 'space',
-  marginVertical: 'space',
-  marginTop: 'space',
-  marginBottom: 'space',
-  marginLeft: 'space',
-  marginRight: 'space',
-  marginEnd: 'space',
-  marginStart: 'space',
-  columnGap: 'space',
-  gap: 'space',
-  rowGap: 'space',
-  height: 'space',
-  width: 'space',
-  minHeight: 'space',
-  minWidth: 'space',
-  maxWidth: 'space',
-  maxHeight: 'space',
-  start: 'space',
-  end: 'space',
-  // Semantic background color (simplified keys: 'brand', 'primary', 'secondary')
-  backgroundColor: 'helpers.semanticColor.background',
-  // Semantic border colors (simplified keys: 'strong', 'subtle')
-  borderColor: 'helpers.semanticColor.border',
-  borderBottomColor: 'helpers.semanticColor.border',
-  borderLeftColor: 'helpers.semanticColor.border',
-  borderRightColor: 'helpers.semanticColor.border',
-  borderTopColor: 'helpers.semanticColor.border',
-  borderBlockColor: 'helpers.semanticColor.border',
-  borderBlockEndColor: 'helpers.semanticColor.border',
-  borderBlockStartColor: 'helpers.semanticColor.border',
-  borderEndColor: 'helpers.semanticColor.border',
-  borderStartColor: 'helpers.semanticColor.border',
-  // Other colors (still use the full color object for flexibility)
-  outlineColor: 'color',
-  shadowColor: 'color',
-  // Border radii
-  borderRadius: 'borderRadius',
-  borderBottomEndRadius: 'borderRadius',
-  borderBottomLeftRadius: 'borderRadius',
-  borderBottomRightRadius: 'borderRadius',
-  borderBottomStartRadius: 'borderRadius',
-  borderTopEndRadius: 'borderRadius',
-  borderTopLeftRadius: 'borderRadius',
-  borderTopRightRadius: 'borderRadius',
-  borderTopStartRadius: 'borderRadius',
-  borderEndEndRadius: 'borderRadius',
-  borderEndStartRadius: 'borderRadius',
-  borderStartEndRadius: 'borderRadius',
-  borderStartStartRadius: 'borderRadius',
-  // Border widths
-  borderBottomWidth: 'borderWidth',
-  borderEndWidth: 'borderWidth',
-  borderLeftWidth: 'borderWidth',
-  borderRightWidth: 'borderWidth',
-  borderStartWidth: 'borderWidth',
-  borderTopWidth: 'borderWidth',
-  borderWidth: 'borderWidth',
-};
-
-/**
- * Mapping of theme categories to their fallback categories.
- * When a value isn't found in the primary theme category, the fallback is tried.
- * This ensures backward compatibility with full color values.
- */
-export const themeStyleFallbackMapping: { [key: string]: string } = {
-  'helpers.semanticColor.background': 'color',
-  'helpers.semanticColor.border': 'color',
-  'helpers.semanticColor.text': 'color',
-  'helpers.semanticColor.icon': 'color',
-};
-
-/**
- * Mapping of custom semantic prop names to their style prop + theme category.
- * These are props that don't correspond 1:1 with ViewStyle keys.
- */
-export const semanticPropMapping: { [key: string]: { styleProp: string; themeKey: string } } = {
-  /** Maps iconColor prop -> resolves against theme.helpers.semanticColor.icon (semantic icon tokens) */
-  iconColor: { styleProp: 'color', themeKey: 'helpers.semanticColor.icon' },
-  /** Maps color prop -> resolves against theme.helpers.semanticColor.text (semantic text tokens) */
-  color: { styleProp: 'color', themeKey: 'helpers.semanticColor.text' },
-};
-
-/**
- * Set of all possible ViewStyle property names
- */
-export const viewStyleProps = new Set<string>([
-  // Display & Misc
-  'backfaceVisibility',
-  'cursor',
-  'direction',
-  'display',
-  'opacity',
-  'overflow',
-  'pointerEvents',
-
-  // Flex & Alignment
-  'alignContent',
-  'alignItems',
-  'alignSelf',
-  'flex',
-  'flexBasis',
-  'flexDirection',
-  'flexGrow',
-  'flexShrink',
-  'flexWrap',
-  'justifyContent',
-
-  // Spacing (Margin, Padding & Gaps)
-  'columnGap',
-  'gap',
-  'margin',
-  'marginBottom',
-  'marginEnd',
-  'marginHorizontal',
-  'marginLeft',
-  'marginRight',
-  'marginStart',
-  'marginTop',
-  'marginVertical',
-  'padding',
-  'paddingBottom',
-  'paddingEnd',
-  'paddingHorizontal',
-  'paddingLeft',
-  'paddingRight',
-  'paddingStart',
-  'paddingTop',
-  'paddingVertical',
-  'rowGap',
-
-  // Colors (Background & Border Colors)
-  'backgroundColor',
-  'borderBlockColor',
-  'borderBlockEndColor',
-  'borderBlockStartColor',
-  'borderBottomColor',
-  'borderColor',
-  'borderEndColor',
-  'borderLeftColor',
-  'borderRightColor',
-  'borderStartColor',
-  'borderTopColor',
-
-  // Borders (Widths, Radii & Style) & Outline
-  'borderBottomEndRadius',
-  'borderBottomLeftRadius',
-  'borderBottomRightRadius',
-  'borderBottomStartRadius',
-  'borderBottomWidth',
-  'borderCurve',
-  'borderEndEndRadius',
-  'borderEndStartRadius',
-  'borderEndWidth',
-  'borderLeftWidth',
-  'borderRadius',
-  'borderRightWidth',
-  'borderStartEndRadius',
-  'borderStartStartRadius',
-  'borderStartWidth',
-  'borderStyle',
-  'borderTopEndRadius',
-  'borderTopLeftRadius',
-  'borderTopRightRadius',
-  'borderTopStartRadius',
-  'borderTopWidth',
-  'borderWidth',
-  'outlineColor',
-  'outlineOffset',
-  'outlineStyle',
-  'outlineWidth',
-
-  // Elevation & Shadow
-  'boxShadow',
-  'elevation',
-  'shadowColor',
-  'shadowOffset',
-  'shadowOpacity',
-  'shadowRadius',
-
-  // Size
-  'aspectRatio',
-  'height',
-  'maxHeight',
-  'maxWidth',
-  'minHeight',
-  'minWidth',
-  'width',
-
-  // Positioning
-  'bottom',
-  'end',
-  'left',
-  'position',
-  'right',
-  'start',
-  'top',
-
-  // Transform
-  'transform',
-  'transformOrigin',
-
-  // Z-index
-  'zIndex',
-]);

package/src/utils/themeValueHelpers.ts

@@ -1,98 +0,0 @@
-/**
- * Helper function to convert camelCase back to nested object path
- * e.g., feedbackDangerSurfaceDefault -> ['feedback', 'danger', 'surface', 'default']
- */
-export const camelCaseToPath = (camelCased: string): string[] => {
-  // Split on uppercase letters but keep them
-  const parts = camelCased.split(/(?=[A-Z])/).map(part => part.toLowerCase());
-  return parts;
-};
-
-/**
- * Helper function to get nested value from object using path array
- */
-export const getNestedValue = (obj: any, path: string[]): any => {
-  return path.reduce((current, key) => {
-    return current && typeof current === 'object' ? current[key] : undefined;
-  }, obj);
-};
-
-/**
- * Helper function to resolve a theme value
- * Supports:
- * - Direct lookup (value -> themeMapping[value])
- * - Camel case to nested path (feedbackDangerSurfaceDefault -> themeMapping.feedback.danger.surface.default)
- * - Numeric suffix pattern (broadbandBlue100 -> themeMapping.broadbandBlue[100])
- */
-export const resolveThemeValue = (value: any, themeMapping: any): any => {
-  if (typeof value !== 'string' || !themeMapping || typeof themeMapping !== 'object') {
-    return value;
-  }
-
-  // First, try direct lookup for simple values
-  if (themeMapping[value] !== undefined) {
-    return themeMapping[value];
-  }
-
-  // Try camelCase to nested path conversion (e.g., feedbackDangerSurfaceDefault)
-  if (/^[a-z][a-zA-Z]*$/.test(value)) {
-    // Only camelCase strings without numbers
-    const path = camelCaseToPath(value);
-    const nestedValue = getNestedValue(themeMapping, path);
-    if (nestedValue !== undefined) {
-      return nestedValue;
-    }
-  }
-
-  // Then, try the existing numeric suffix pattern (e.g., broadbandBlue100)
-  const shadeMatch = value.match(/\d+$/);
-  if (shadeMatch) {
-    const shade = shadeMatch[0];
-    const base = value.slice(0, -shade.length);
-    const nested = themeMapping[base];
-    if (nested && typeof nested === 'object') {
-      return nested[shade] ?? value;
-    }
-  }
-
-  // If none of the approaches work, return the original value
-  return value;
-};
-
-/**
- * Resolve a dot-notation key against the theme object.
- * e.g., 'semanticColor.text' -> theme.semanticColor.text
- * Simple keys like 'space' are resolved via direct bracket access.
- */
-export const resolveThemeKey = (theme: Record<string, any>, key: string): any => {
-  if (key.includes('.')) {
-    return key.split('.').reduce((obj, k) => obj?.[k], theme);
-  }
-  return theme[key];
-};
-
-/**
- * Resolve a theme value with a fallback theme mapping.
- * First tries the primary mapping (e.g., theme.semanticColor.background for simplified tokens).
- * If not found, falls back to the secondary mapping (e.g., theme.color for full color values).
- * This ensures backward compatibility while supporting simplified token names.
- */
-export const resolveThemeValueWithFallback = (
-  value: any,
-  primaryMapping: any,
-  fallbackMapping?: any
-): any => {
-  const resolved = resolveThemeValue(value, primaryMapping);
-
-  // If the value was resolved (changed from input), return it
-  if (resolved !== value) {
-    return resolved;
-  }
-
-  // If we have a fallback mapping and the primary didn't resolve, try the fallback
-  if (fallbackMapping) {
-    return resolveThemeValue(value, fallbackMapping);
-  }
-
-  return resolved;
-};

package/src/vite-env.d.ts

@@ -1,19 +0,0 @@
-/// <reference types="vite/client" />
-
-declare module '*.png' {
-  const value: any;
-  export default value;
-}
-declare module '*.svg' {
-  import React from 'react';
-  import { SvgProps } from 'react-native-svg';
-  const content: React.FC<SvgProps>;
-  export default content;
-}
-
-declare module '@utilitywarehouse/hearth-svg-assets/lib/*.svg' {
-  import React from 'react';
-  import { SvgProps } from 'react-native-svg';
-  const content: React.FC<SvgProps>;
-  export default content;
-}

package/tsconfig.eslint.json

@@ -1,14 +0,0 @@
-{
-  "extends": "./tsconfig.json",
-  "include": [
-    "./src",
-    "./src/**/*.stories.tsx",
-    "./src/**/*.figma.tsx",
-    "./.storybook/**/*",
-    "./docs/**/*",
-    "./vitest.unit.config.ts"
-  ],
-  "exclude": [
-    "node_modules"
-  ]
-}

package/tsconfig.json

@@ -1,45 +0,0 @@
-{
-    "include": [
-        "./src",
-    ],
-    "exclude": [
-        "node_modules",
-        "./src/stories",
-        "./src/**/*.figma.tsx",
-        "./src/**/*.stories.tsx",
-    ],
-    "compilerOptions": {
-        "baseUrl": ".",
-        "paths": {
-            "react-native": ["./node_modules/react-native"],
-            "react-native/*": ["./node_modules/react-native/*"]
-        },
-        "ignoreDeprecations": "5.0",
-        "noEmit": false,
-        "declaration": true,
-        "allowJs": true,
-        "allowUnreachableCode": false,
-        "allowUnusedLabels": true,
-        "esModuleInterop": true,
-        "forceConsistentCasingInFileNames": true,
-        "jsx": "react-jsx",
-        "lib": [
-            "esnext",
-            "dom"
-        ],
-        "module": "esnext",
-        "moduleResolution": "node",
-        "allowSyntheticDefaultImports": true,
-        "noFallthroughCasesInSwitch": true,
-        "noImplicitReturns": true,
-        "noImplicitUseStrict": false,
-        "noStrictGenericChecks": false,
-        "noUnusedLocals": false,
-        "noUnusedParameters": true,
-        "resolveJsonModule": true,
-        "skipLibCheck": true,
-        "strict": true,
-        "target": "esnext",
-        "outDir": "./build",
-    }
-}

package/vitest.config.js

@@ -1,37 +0,0 @@
-import path from 'node:path';
-import { fileURLToPath } from 'node:url';
-import { defineConfig } from 'vitest/config';
-import { storybookTest } from '@storybook/addon-vitest/vitest-plugin';
-import { playwright } from '@vitest/browser-playwright';
-
-const dirname =
-  typeof __dirname !== 'undefined' ? __dirname : path.dirname(fileURLToPath(import.meta.url));
-
-// More info at: https://storybook.js.org/docs/next/writing-tests/integrations/vitest-addon
-export default defineConfig({
-  optimizeDeps: {
-    include: ['@react-stately/utils'],
-  },
-  test: {
-    projects: [
-      {
-        extends: true,
-        plugins: [
-          // The plugin will run tests for the stories defined in your Storybook config
-          // See options at: https://storybook.js.org/docs/next/writing-tests/integrations/vitest-addon#storybooktest
-          storybookTest({ configDir: path.join(dirname, '.storybook') }),
-        ],
-        test: {
-          name: 'storybook',
-          browser: {
-            enabled: true,
-            headless: true,
-            provider: playwright(),
-            instances: [{ browser: 'chromium' }],
-          },
-          setupFiles: ['.storybook/vitest.setup.ts'],
-        },
-      },
-    ],
-  },
-});

package/vitest.unit.config.ts

@@ -1,9 +0,0 @@
-import { defineConfig } from 'vitest/config';
-
-export default defineConfig({
-  test: {
-    include: ['src/**/*.test.ts', 'src/**/*.test.tsx'],
-    exclude: ['src/**/*.stories.ts', 'src/**/*.stories.tsx'],
-    environment: 'node',
-  },
-});