@utilitywarehouse/hearth-react-native 0.4.2 → 0.6.0

package/src/components/ThemedImage/ThemedImage.stories.tsx

@@ -0,0 +1,175 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import MascotEnergyDark from '@utilitywarehouse/hearth-svg-assets/lib/mascot-energy-dark.svg';
+import MascotEnergyLight from '@utilitywarehouse/hearth-svg-assets/lib/mascot-energy-light.svg';
+import SceneBroadbandDark from '@utilitywarehouse/hearth-svg-assets/lib/scene-broadband-dark.svg';
+import SceneBroadbandLight from '@utilitywarehouse/hearth-svg-assets/lib/scene-broadband-light.svg';
+import SpotBillingDark from '@utilitywarehouse/hearth-svg-assets/lib/spot-billing-dark.svg';
+import SpotBillingLight from '@utilitywarehouse/hearth-svg-assets/lib/spot-billing-light.svg';
+import { SvgProps } from 'react-native-svg';
+import pig from '../../../docs/assets/pigs.png';
+import { Box } from '../Box';
+import { ThemedImage } from './';
+
+const meta: Meta<typeof ThemedImage> = {
+  title: 'Stories / ThemedImage',
+  component: ThemedImage,
+  argTypes: {},
+  parameters: {
+    docs: {
+      description: {
+        component:
+          'ThemedImage component that automatically switches between light and dark mode images or SVG components based on the current theme.',
+      },
+    },
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof ThemedImage>;
+
+export const Playground: Story = {
+  args: {},
+  render: () => (
+    <Box gap="200">
+      <ThemedImage
+        // @ts-ignore
+        light={<SpotBillingLight width={200} height={200} />}
+        // @ts-ignore
+        dark={<SpotBillingDark width={200} height={200} />}
+      />
+    </Box>
+  ),
+};
+
+export const WithSpotIllustrations: Story = {
+  parameters: {
+    controls: { include: [] },
+  },
+  render: () => (
+    <Box flexDirection="row" flexWrap="wrap" gap="200">
+      <ThemedImage
+        // @ts-ignore
+        light={<SpotBillingLight width={120} height={120} />}
+        // @ts-ignore
+        dark={<SpotBillingDark width={120} height={120} />}
+      />
+    </Box>
+  ),
+};
+
+export const WithMascots: Story = {
+  parameters: {
+    controls: { include: [] },
+  },
+  render: () => (
+    <Box flexDirection="row" flexWrap="wrap" gap="200" alignItems="center">
+      <ThemedImage
+        light={MascotEnergyLight as unknown as React.FC<SvgProps>}
+        dark={MascotEnergyDark as unknown as React.FC<SvgProps>}
+        width={120}
+        height={120}
+      />
+    </Box>
+  ),
+};
+
+export const WithSceneIllustrations: Story = {
+  parameters: {
+    controls: { include: [] },
+  },
+  render: () => (
+    <Box gap="200">
+      <ThemedImage
+        //  @ts-ignore
+        light={<SceneBroadbandLight width={300} height={200} />}
+        //  @ts-ignore
+        dark={<SceneBroadbandDark width={300} height={200} />}
+      />
+    </Box>
+  ),
+};
+
+export const WithRegularImages: Story = {
+  parameters: {
+    controls: { include: [] },
+    docs: {
+      description: {
+        story:
+          'ThemedImage also works with regular image sources (using `require` or `uri`), not just SVG components.',
+      },
+    },
+  },
+  render: () => (
+    <Box gap="200">
+      <ThemedImage
+        light={{
+          uri: pig,
+        }}
+        dark={{
+          uri: pig,
+        }}
+        width={200}
+        height={200}
+        style={{ width: 200, height: 200, borderRadius: 8 }}
+      />
+    </Box>
+  ),
+};
+
+export const WithCustomSize: Story = {
+  parameters: {
+    controls: { include: [] },
+    docs: {
+      description: {
+        story: 'When using SVG components, control their size with width and height props.',
+      },
+    },
+  },
+  render: () => (
+    <Box flexDirection="row" flexWrap="wrap" gap="200" alignItems="center">
+      <ThemedImage
+        // @ts-ignore
+        light={<SpotBillingLight width={80} height={80} />}
+        // @ts-ignore
+        dark={<SpotBillingDark width={80} height={80} />}
+      />
+      <ThemedImage
+        // @ts-ignore
+        light={<SpotBillingLight width={120} height={120} />}
+        // @ts-ignore
+        dark={<SpotBillingDark width={120} height={120} />}
+      />
+      <ThemedImage
+        // @ts-ignore
+        light={<SpotBillingLight width={160} height={160} />}
+        // @ts-ignore
+        dark={<SpotBillingDark width={160} height={160} />}
+      />
+    </Box>
+  ),
+};
+
+export const WithAccessibility: Story = {
+  parameters: {
+    controls: { include: [] },
+    docs: {
+      description: {
+        story:
+          'ThemedImage supports all standard Image accessibility props like `accessibilityLabel` and `accessible`.',
+      },
+    },
+  },
+  render: () => (
+    <Box gap="200">
+      <ThemedImage
+        // @ts-ignore
+        light={<MascotEnergyLight width={150} height={150} />}
+        // @ts-ignore
+        dark={<MascotEnergyDark width={150} height={150} />}
+        accessible={true}
+        accessibilityLabel="Energy service mascot illustration"
+      />
+    </Box>
+  ),
+};

package/src/components/ThemedImage/ThemedImage.tsx

@@ -0,0 +1,34 @@
+import { isValidElement } from 'react';
+import { Image } from 'react-native';
+import useColorMode from '../../hooks/useColorMode';
+import type ThemedImageProps from './ThemedImage.props';
+
+/**
+ * ThemedImage component that displays different images or components based on the current theme
+ * @param light - Image source or SVG component to display in light mode
+ * @param dark - Image source or SVG component to display in dark mode
+ * @param ...rest - All other Image props including width/height for SVG components
+ */
+const ThemedImage = ({ light, dark, ...props }: ThemedImageProps) => {
+  const [colorMode] = useColorMode();
+
+  const source = colorMode === 'light' ? light : dark;
+
+  // If the source is a React element (like an SVG component), render it directly
+  if (isValidElement(source)) {
+    return source;
+  }
+
+  // If the source is a component type (function/class), instantiate it with props
+  if (typeof source === 'function') {
+    const Source = source as React.ComponentType<any>;
+    return <Source {...props} />;
+  }
+
+  // Otherwise, render as a regular Image with the source
+  return <Image source={source} {...props} />;
+};
+
+ThemedImage.displayName = 'ThemedImage';
+
+export default ThemedImage;

package/src/components/ThemedImage/index.tsx

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

package/src/components/ToggleButton/ToggleButtonText.tsx

@@ -1,13 +1,13 @@
 import { type TextProps } from 'react-native';
 import { StyleSheet } from 'react-native-unistyles';
-import { DetailText } from '../DetailText';
+import { BodyText } from '../BodyText';
 
 const ToggleButtonText = ({ children, toggled, ...props }: TextProps & { toggled: boolean }) => {
   styles.useVariants({ toggled });
   return (
-    <DetailText size="md" {...props} style={[styles.text, props.style]}>
+    <BodyText size="md" weight="semibold" {...props} style={[styles.text, props.style]}>
       {children}
-    </DetailText>
+    </BodyText>
   );
 };
 

package/src/components/UnstyledIconButton/UnstyledIconButton.props.ts

@@ -1,5 +1,6 @@
 import type { ComponentType } from 'react';
 import type { PressableProps, ViewProps } from 'react-native';
+import { ColorValue } from '../../types';
 
 export type UnstyledIconButtonProps = {
   /*
@@ -29,5 +30,5 @@ export type UnstyledIconButtonProps = {
    */
   inverted?: boolean;
   children?: React.ReactNode;
-  iconStyle?: ViewProps['style'];
+  iconStyle?: ViewProps['style'] & { color?: ColorValue };
 } & PressableProps;

package/src/components/index.ts

@@ -7,8 +7,10 @@ export * from './BottomSheet';
 export * from './Box';
 export * from './Button';
 export * from './Card';
+export * from './Carousel';
 export * from './Center';
 export * from './Checkbox';
+export * from './Container';
 export * from './CurrencyInput';
 export * from './DatePicker';
 export * from './DatePickerInput';
@@ -24,12 +26,14 @@ export * from './HTMLElements';
 export * from './Icon';
 export * from './IconButton';
 export * from './IconContainer';
+export * from './IndicatorIconButton';
 export * from './InlineLink';
 export * from './Input';
 export * from './Label';
 export * from './Link';
 export * from './List';
 export * from './Modal';
+export * from './ProgressStepper';
 export * from './Radio';
 export * from './RadioCard';
 export * from './SectionHeader';
@@ -39,6 +43,7 @@ export * from './Spinner';
 export * from './Switch';
 export * from './Tabs';
 export * from './Textarea';
+export * from './ThemedImage';
 export * from './ToggleButtonCard';
 
 export {

package/src/hooks/useStyleProps.ts

@@ -1,7 +1,7 @@
 import { useMemo } from 'react';
 import { ViewStyle } from 'react-native';
-import useTheme from './useTheme';
 import { propStyleMapping, resolveThemeValue, themeStyleMapping, viewStyleProps } from '../utils';
+import useTheme from './useTheme';
 
 /**
  * Type for the return value from useStyleProps

package/src/tokens/components/dark/button.ts

@@ -10,7 +10,7 @@ export default {
     paddingHorizontal: 16,
     paddingVertical: 12,
   },
-  minWidth: 80,
+  minWidth: 30,
   shadowColor: '#101010',
   sm: {
     paddingHorizontal: 16,

package/src/tokens/components/dark/dialog.ts

@@ -9,6 +9,7 @@ export default {
   borderRadius: 16,
   content: {
     gap: 12,
+    paddingBottom: 12,
   },
   gap: 24,
   padding: 24,

package/src/tokens/components/dark/illustrations.ts

@@ -3,5 +3,6 @@
  */
 
 export default {
+  colorMode: 'dark',
   mode: 'dark',
 } as const;

package/src/tokens/components/dark/toast.ts

@@ -5,6 +5,9 @@
 export default {
   backgroundColor: '#3f3f3f',
   borderRadius: 8,
-  gapHorizontal: 8,
+  gapHorizontal: 16,
   padding: 14,
+  stack: {
+    gapHorizontal: 8,
+  },
 } as const;

package/src/tokens/components/light/button.ts

@@ -10,7 +10,7 @@ export default {
     paddingHorizontal: 16,
     paddingVertical: 12,
   },
-  minWidth: 80,
+  minWidth: 30,
   shadowColor: '#101010',
   sm: {
     paddingHorizontal: 16,

package/src/tokens/components/light/dialog.ts

@@ -9,6 +9,7 @@ export default {
   borderRadius: 16,
   content: {
     gap: 12,
+    paddingBottom: 12,
   },
   gap: 24,
   padding: 24,

package/src/tokens/components/light/illustrations.ts

@@ -3,5 +3,6 @@
  */
 
 export default {
+  colorMode: 'light',
   mode: 'light',
 } as const;

package/src/tokens/components/light/toast.ts

@@ -5,6 +5,9 @@
 export default {
   backgroundColor: '#101010',
   borderRadius: 8,
-  gapHorizontal: 8,
+  gapHorizontal: 16,
   padding: 14,
+  stack: {
+    gapHorizontal: 8,
+  },
 } as const;

package/src/tokens/layout.ts

@@ -8,8 +8,8 @@ export const mobile = {
     minWidth: 320,
   },
   container: {
+    margin: 16,
     paddingBottom: 32,
-    paddingHorizontal: 16,
     paddingTop: 24,
     width: 360,
   },
@@ -18,7 +18,6 @@ export const mobile = {
     columnWidth: 64,
     gridSize: 8,
     gutter: 16,
-    margin: 16,
   },
   spacing: {
     '2xl': 28,
@@ -38,8 +37,8 @@ export const tablet = {
     minWidth: 740,
   },
   container: {
+    margin: 32,
     paddingBottom: 32,
-    paddingHorizontal: 32,
     paddingTop: 24,
     width: 744,
   },
@@ -48,7 +47,6 @@ export const tablet = {
     columnWidth: 64,
     gridSize: 8,
     gutter: 24,
-    margin: 32,
   },
   spacing: {
     '2xl': 28,
@@ -68,8 +66,8 @@ export const desktop = {
     minWidth: 992,
   },
   container: {
+    margin: 32,
     paddingBottom: 48,
-    paddingHorizontal: 32,
     paddingTop: 32,
     width: 1096,
   },
@@ -78,7 +76,6 @@ export const desktop = {
     columnWidth: 64,
     gridSize: 8,
     gutter: 24,
-    margin: 32,
   },
   spacing: {
     '2xl': 40,

package/src/vite-env.d.ts

@@ -4,3 +4,9 @@ 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;
+}