@utilitywarehouse/hearth-react-native 0.1.0

package/src/core/index.ts

@@ -0,0 +1,35 @@
+import { StyleSheet } from 'react-native-unistyles';
+import { themes } from './themes';
+import { breakpoints } from './breakpoints';
+export * from './themes';
+export * from './breakpoints';
+export {
+  StyleSheet,
+  UnistylesRuntime,
+  withUnistyles,
+  Hide,
+  Display,
+  ScopedTheme,
+  mq,
+  getServerUnistyles,
+  useUnistyles,
+  hydrateServerUnistyles,
+  useServerUnistyles,
+  resetServerUnistyles,
+} from 'react-native-unistyles';
+export type {
+  UnistylesBreakpoints,
+  UnistylesThemes,
+  UnistylesVariants,
+} from 'react-native-unistyles';
+
+StyleSheet.configure({
+  breakpoints,
+  themes,
+  settings: {
+    initialTheme: 'light',
+    adaptiveThemes: false,
+  },
+});
+
+export type * from '../types/unistyles';

package/src/core/themes.ts

@@ -0,0 +1,266 @@
+import { DimensionValue, Platform } from 'react-native';
+import {
+  borderRadius,
+  borderWidth,
+  color,
+  components,
+  font,
+  layout,
+  letterSpacing,
+  lineHeight,
+  shadow,
+  space,
+  typography,
+} from '../tokens';
+import { breakpoints } from './breakpoints';
+
+const { light, dark, ...restOfColors } = color;
+
+const shared = {
+  platform: Platform.OS,
+  space: {
+    ...space,
+    '1/2': '50%',
+    '1/3': '33.333%',
+    '2/3': '66.666%',
+    '1/4': '25%',
+    '2/4': '50%',
+    '3/4': '75%',
+    '1/5': '20%',
+    '2/5': '40%',
+    '3/5': '60%',
+    '4/5': '80%',
+    '1/6': '16.666%',
+    '2/6': '33.333%',
+    '3/6': '50%',
+    '4/6': '66.666%',
+    '5/6': '83.333%',
+    full: '100%' as DimensionValue,
+  },
+  borderWidth,
+  borderRadius,
+  breakpoints,
+  letterSpacing,
+  lineHeight,
+  font,
+  fontWeight: font.weight,
+  fontFamily: font.family,
+  fontSize: font.size,
+  typography,
+  layout,
+  shadow,
+  opacity: {
+    disabled: 0.5,
+  },
+  helpers: {},
+  globalStyle: {
+    variants: {
+      hardShadow: {
+        '1': {
+          shadowColor: color.grey[900],
+          shadowOffset: {
+            width: -2,
+            height: 2,
+          },
+          shadowRadius: 8,
+          shadowOpacity: 0.5,
+          elevation: 10,
+        },
+        '2': {
+          shadowColor: color.grey[900],
+          shadowOffset: {
+            width: 0,
+            height: 3,
+          },
+          shadowRadius: 8,
+          shadowOpacity: 0.5,
+          elevation: 10,
+        },
+        '3': {
+          shadowColor: color.grey[900],
+          shadowOffset: {
+            width: 2,
+            height: 2,
+          },
+          shadowRadius: 8,
+          shadowOpacity: 0.5,
+          elevation: 10,
+        },
+        '4': {
+          shadowColor: color.grey[900],
+          shadowOffset: {
+            width: 0,
+            height: -3,
+          },
+          shadowRadius: 8,
+          shadowOpacity: 0.5,
+          elevation: 10,
+        },
+        '5': {
+          shadowColor: color.grey[900],
+          shadowOffset: {
+            width: 0,
+            height: 3,
+          },
+          shadowRadius: 8,
+          shadowOpacity: 0.2,
+          elevation: 10,
+        },
+      },
+      softShadow: {
+        '1': {
+          shadowColor: color.grey[900],
+          shadowOffset: {
+            width: 0,
+            height: 0,
+          },
+          shadowRadius: 10,
+          shadowOpacity: 0.1,
+          _android: {
+            shadowColor: color.grey[900],
+            elevation: 5,
+            shadowOpacity: 0.05,
+          },
+        },
+        '2': {
+          shadowColor: color.grey[900],
+          shadowOffset: {
+            width: 0,
+            height: 0,
+          },
+          shadowRadius: 20,
+          elevation: 3,
+          shadowOpacity: 0.1,
+          _android: {
+            shadowColor: color.grey[900],
+            elevation: 10,
+            shadowOpacity: 0.1,
+          },
+        },
+        '3': {
+          shadowColor: color.grey[900],
+          shadowOffset: {
+            width: 0,
+            height: 0,
+          },
+          shadowRadius: 30,
+          shadowOpacity: 0.1,
+          elevation: 4,
+          _android: {
+            shadowColor: color.grey[900],
+            elevation: 15,
+            shadowOpacity: 0.15,
+          },
+        },
+        '4': {
+          shadowColor: color.grey[900],
+          shadowOffset: {
+            width: 0,
+            height: 0,
+          },
+          shadowRadius: 40,
+          shadowOpacity: 0.1,
+          elevation: 10,
+          _android: {
+            shadowColor: color.grey[900],
+            elevation: 20,
+            shadowOpacity: 0.2,
+          },
+        },
+      },
+      space: {
+        none: {},
+        xs: {
+          gap: {
+            base: layout.mobile.spacing.xs,
+            md: layout.tablet.spacing.xs,
+            lg: layout.desktop.spacing.xs,
+          },
+        },
+        sm: {
+          gap: {
+            base: layout.mobile.spacing.sm,
+            md: layout.tablet.spacing.sm,
+            lg: layout.desktop.spacing.sm,
+          },
+        },
+        md: {
+          gap: {
+            base: layout.mobile.spacing.md,
+            md: layout.tablet.spacing.md,
+            lg: layout.desktop.spacing.md,
+          },
+        },
+        lg: {
+          gap: {
+            base: layout.mobile.spacing.lg,
+            md: layout.tablet.spacing.lg,
+            lg: layout.desktop.spacing.lg,
+          },
+        },
+        xl: {
+          gap: {
+            base: layout.mobile.spacing.xl,
+            md: layout.tablet.spacing.xl,
+            lg: layout.desktop.spacing.xl,
+          },
+        },
+      },
+    },
+  },
+} as const;
+
+const lightHelpers = {
+  ...shared.helpers,
+  focusVisible: {
+    outlineStyle: 'solid',
+    outlineWidth: 2,
+    outlineColor: components.light.focus.border,
+    outlineOffset: 1,
+  },
+};
+
+export const lightTheme = {
+  colorMode: 'light',
+  isLight: true,
+  isDark: false,
+  color: {
+    ...restOfColors,
+    ...light,
+    white: '#ffffff',
+    black: '#000000',
+  } as const,
+  components: components.light,
+  ...shared,
+  helpers: lightHelpers,
+} as const;
+
+const darkHelpers = {
+  ...shared.helpers,
+  focusVisible: {
+    outlineStyle: 'solid',
+    outlineWidth: 2,
+    outlineColor: components.dark.focus.border,
+    outlineOffset: 1,
+  },
+};
+
+export const darkTheme = {
+  colorMode: 'dark',
+  isLight: false,
+  isDark: true,
+  color: {
+    ...restOfColors,
+    ...dark,
+    white: '#ffffff',
+    black: '#000000',
+  },
+  components: components.dark,
+  ...shared,
+  helpers: darkHelpers,
+} as const;
+
+export const themes = {
+  light: lightTheme,
+  dark: darkTheme,
+} as const;

package/src/hooks/index.ts

@@ -0,0 +1,6 @@
+export { default as useColorMode } from './useColorMode';
+export { default as useBreakpointValue } from './useBreakpointValue';
+export { default as useTheme } from './useTheme';
+export { default as useMedia } from './useMedia';
+export { default as useToken } from './useToken';
+export { useStyleProps } from './useStyleProps';

package/src/hooks/useBreakpointValue.ts

@@ -0,0 +1,62 @@
+ 
+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

@@ -0,0 +1,21 @@
+import { useEffect, useState } from 'react';
+import { UnistylesRuntime, useUnistyles } from 'react-native-unistyles';
+
+const useColorMode = () => {
+  const {
+    theme: { colorMode: themeColorMode },
+  } = useUnistyles();
+
+  const [colorMode, setColorMode] = useState<'light' | 'dark'>(
+    UnistylesRuntime.themeName as 'light' | 'dark'
+  );
+
+  useEffect(() => {
+    if (colorMode === themeColorMode) return;
+    setColorMode(themeColorMode);
+  }, [themeColorMode, colorMode]);
+
+  return [colorMode, setColorMode] as const;
+};
+
+export default useColorMode;

package/src/hooks/useMedia.ts

@@ -0,0 +1,31 @@
+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/useStyleProps.ts

@@ -0,0 +1,60 @@
+import { useMemo } from 'react';
+import { ViewStyle } from 'react-native';
+import useTheme from './useTheme';
+import { propStyleMapping, resolveThemeValue, themeStyleMapping, viewStyleProps } from '../utils';
+
+/**
+ * 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;
+
+      let stylePropName: keyof ViewStyle | undefined;
+      let themeKey: keyof typeof theme | 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
+        themeKey = themeStyleMapping[stylePropName] as keyof typeof theme;
+
+        if (themeKey && theme[themeKey]) {
+          computedStyles[stylePropName] = resolveThemeValue(propValue, theme[themeKey]);
+        } 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

@@ -0,0 +1,8 @@
+import { UnistylesRuntime } from 'react-native-unistyles';
+
+const useTheme = () => {
+  const theme = UnistylesRuntime.getTheme();
+  return theme;
+};
+
+export default useTheme;

package/src/hooks/useToken.ts

@@ -0,0 +1,40 @@
+ 
+ 
+ 
+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

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

package/src/tokens/README.md

@@ -0,0 +1,7 @@
+# Local Tokens
+
+This directory contains a local copy of the tokens from `@utilitywarehouse/hearth-tokens` package.
+These files are copied automatically by running `npm run copyTokens` script.
+
+DO NOT edit these files directly - they will be overwritten when the script runs again.
+Instead, make changes to the source tokens in the tokens package.

package/src/tokens/border-radius.ts

@@ -0,0 +1,13 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+
+export default {
+  full: 9999,
+  lg: 12,
+  md: 8,
+  none: 0,
+  sm: 6,
+  xl: 16,
+  xs: 4,
+} as const;

package/src/tokens/border-width.ts

@@ -0,0 +1,8 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+
+export default {
+  '1': 1,
+  '2': 2,
+} as const;