@utilitywarehouse/hearth-react-native 0.20.0 → 0.21.0

package/src/components/Box/Box.props.ts

@@ -1,228 +1,6 @@
 import React from 'react';
-import type { ViewProps, ViewStyle } from 'react-native';
-import type {
-  BorderRadiusValue,
-  BordeWidthValue,
-  ColorValue,
-  OpacityValue,
-  SpaceValue,
-  SpacingValues,
-} from '../../types';
-
-export type OmittedStyles = Omit<
-  ViewStyle,
-  | 'backgroundColor'
-  | 'borderBlockColor'
-  | 'borderBlockEndColor'
-  | 'borderBlockStartColor'
-  | 'borderBottomColor'
-  | 'borderBottomEndRadius'
-  | 'borderBottomLeftRadius'
-  | 'borderBottomRightRadius'
-  | 'borderBottomStartRadius'
-  | 'borderBottomWidth'
-  | 'borderColor'
-  | 'borderEndColor'
-  | 'borderEndEndRadius'
-  | 'borderEndStartRadius'
-  | 'borderEndWidth'
-  | 'borderLeftColor'
-  | 'borderLeftWidth'
-  | 'borderRadius'
-  | 'borderRightColor'
-  | 'borderRightWidth'
-  | 'borderStartColor'
-  | 'borderStartEndRadius'
-  | 'borderStartStartRadius'
-  | 'borderStartWidth'
-  | 'borderTopColor'
-  | 'borderTopEndRadius'
-  | 'borderTopLeftRadius'
-  | 'borderTopRightRadius'
-  | 'borderTopStartRadius'
-  | 'borderTopWidth'
-  | 'borderWidth'
-  | 'bottom'
-  | 'columnGap'
-  | 'end'
-  | 'gap'
-  | 'height'
-  | 'left'
-  | 'margin'
-  | 'marginBottom'
-  | 'marginEnd'
-  | 'marginHorizontal'
-  | 'marginLeft'
-  | 'marginRight'
-  | 'marginStart'
-  | 'marginTop'
-  | 'marginVertical'
-  | 'maxHeight'
-  | 'maxWidth'
-  | 'minHeight'
-  | 'minWidth'
-  | 'opacity'
-  | 'outlineColor'
-  | 'padding'
-  | 'paddingBottom'
-  | 'paddingEnd'
-  | 'paddingHorizontal'
-  | 'paddingLeft'
-  | 'paddingRight'
-  | 'paddingStart'
-  | 'paddingTop'
-  | 'paddingVertical'
-  | 'right'
-  | 'rowGap'
-  | 'shadowColor'
-  | 'start'
-  | 'top'
-  | 'width'
-  // deprecated
-  | 'rotation'
-  | 'scaleX'
-  | 'scaleY'
-  | 'transformMatrix'
-  | 'translateX'
-  | 'translateY'
->;
-
-export type OtherBoxViewStyles = Pick<
-  OmittedStyles,
-  // List of other styles to include
-  | 'alignContent'
-  | 'alignItems'
-  | 'alignSelf'
-  | 'aspectRatio'
-  | 'backfaceVisibility'
-  | 'borderCurve'
-  | 'borderStyle'
-  | 'cursor'
-  | 'direction'
-  | 'display'
-  | 'elevation'
-  | 'flex'
-  | 'flexBasis'
-  | 'flexDirection'
-  | 'flexGrow'
-  | 'flexShrink'
-  | 'flexWrap'
-  | 'justifyContent'
-  | 'boxShadow'
-  | 'outlineOffset'
-  | 'outlineStyle'
-  | 'outlineWidth'
-  | 'overflow'
-  | 'pointerEvents'
-  | 'position'
-  | 'shadowOffset'
-  | 'shadowOpacity'
-  | 'shadowRadius'
-  | 'transform'
-  | 'transformOrigin'
-  | 'zIndex'
->;
-
-export interface BoxStyleMappingValues {
-  // Style Mapping
-  // - Colors
-  bg?: ColorValue;
-  bgColor?: ColorValue;
-  // - Space
-  h?: SpaceValue;
-  w?: SpaceValue;
-  p?: SpaceValue;
-  px?: SpaceValue;
-  py?: SpaceValue;
-  pt?: SpaceValue;
-  pb?: SpaceValue;
-  pr?: SpaceValue;
-  pl?: SpaceValue;
-  m?: SpaceValue;
-  mx?: SpaceValue;
-  my?: SpaceValue;
-  mt?: SpaceValue;
-  mb?: SpaceValue;
-  mr?: SpaceValue;
-  ml?: SpaceValue;
-  // - Radii
-  rounded?: BorderRadiusValue;
-}
-
-export interface ThemedBoxViewStyleProps {
-  // - Space
-  top?: SpaceValue;
-  bottom?: SpaceValue;
-  left?: SpaceValue;
-  right?: SpaceValue;
-  padding?: SpaceValue;
-  paddingHorizontal?: SpaceValue;
-  paddingVertical?: SpaceValue;
-  paddingTop?: SpaceValue;
-  paddingBottom?: SpaceValue;
-  paddingLeft?: SpaceValue;
-  paddingRight?: SpaceValue;
-  paddingEnd?: SpaceValue;
-  paddingStart?: SpaceValue;
-  margin?: SpaceValue;
-  marginHorizontal?: SpaceValue;
-  marginVertical?: SpaceValue;
-  marginTop?: SpaceValue;
-  marginBottom?: SpaceValue;
-  marginLeft?: SpaceValue;
-  marginRight?: SpaceValue;
-  marginEnd?: SpaceValue;
-  marginStart?: SpaceValue;
-  columnGap?: SpaceValue;
-  gap?: SpaceValue;
-  rowGap?: SpaceValue;
-  height?: SpaceValue;
-  width?: SpaceValue;
-  minHeight?: SpaceValue;
-  minWidth?: SpaceValue;
-  maxWidth?: SpaceValue;
-  maxHeight?: SpaceValue;
-  start?: SpaceValue;
-  end?: SpaceValue;
-  // - Colors
-  backgroundColor?: ColorValue;
-  borderColor?: ColorValue;
-  borderBottomColor?: ColorValue;
-  borderLeftColor?: ColorValue;
-  borderRightColor?: ColorValue;
-  borderTopColor?: ColorValue;
-  borderBlockColor?: ColorValue;
-  borderBlockEndColor?: ColorValue;
-  borderBlockStartColor?: ColorValue;
-  borderEndColor?: ColorValue;
-  borderStartColor?: ColorValue;
-  outlineColor?: ColorValue;
-  shadowColor?: ColorValue;
-  // - Radii
-  borderRadius?: BorderRadiusValue;
-  borderBottomEndRadius?: BorderRadiusValue;
-  borderBottomLeftRadius?: BorderRadiusValue;
-  borderBottomRightRadius?: BorderRadiusValue;
-  borderBottomStartRadius?: BorderRadiusValue;
-  borderTopEndRadius?: BorderRadiusValue;
-  borderTopLeftRadius?: BorderRadiusValue;
-  borderTopRightRadius?: BorderRadiusValue;
-  borderTopStartRadius?: BorderRadiusValue;
-  borderEndEndRadius?: BorderRadiusValue;
-  borderEndStartRadius?: BorderRadiusValue;
-  borderStartEndRadius?: BorderRadiusValue;
-  borderStartStartRadius?: BorderRadiusValue;
-  // - Opacity
-  opacity?: OpacityValue;
-  // - Border Width
-  borderBottomWidth?: BordeWidthValue;
-  borderEndWidth?: BordeWidthValue;
-  borderLeftWidth?: BordeWidthValue;
-  borderRightWidth?: BordeWidthValue;
-  borderStartWidth?: BordeWidthValue;
-  borderTopWidth?: BordeWidthValue;
-  borderWidth?: BordeWidthValue;
-}
+import type { ViewProps } from 'react-native';
+import type { AllUtilityProps, SpacingValues } from '../../types';
 
 interface CustomBoxProps {
   // Custom props
@@ -230,12 +8,6 @@ interface CustomBoxProps {
   spacing?: SpacingValues;
 }
 
-export interface BoxProps
-  extends
-    BoxStyleMappingValues,
-    ThemedBoxViewStyleProps,
-    OtherBoxViewStyles,
-    ViewProps,
-    CustomBoxProps {}
+export interface BoxProps extends AllUtilityProps, ViewProps, CustomBoxProps {}
 
 export default BoxProps;

package/src/components/Box/Box.stories.tsx

@@ -2,11 +2,11 @@ import { Meta, StoryObj } from '@storybook/react-vite';
 import { primitive } from '@utilitywarehouse/hearth-tokens/js';
 import { InputType } from 'storybook/internal/types';
 import { Box } from '.';
-import { coloursAsArray } from '../../utils';
+import { backgroundColorKeys } from '../../utils/coloursAsArray';
 import { BodyText } from '../BodyText';
 
 const backgroundColor: InputType = {
-  options: coloursAsArray(),
+  options: backgroundColorKeys,
   control: 'select',
   description: 'Background color of the box.',
 };

package/src/components/Box/Box.tsx

@@ -1,14 +1,16 @@
- 
 import React, { useMemo } from 'react';
 import { View, ViewStyle } from 'react-native';
 import { StyleSheet } from 'react-native-unistyles';
-import type BoxProps from './Box.props';
 import {
   propStyleMapping,
-  resolveThemeValue,
+  resolveThemeKey,
+  resolveThemeValueWithFallback,
+  semanticPropMapping,
+  themeStyleFallbackMapping,
   themeStyleMapping,
   viewStyleProps,
 } from '../../utils';
+import type BoxProps from './Box.props';
 
 // --- Box component definition ---
 const BoxComponent = ({ as, style, children, ...props }: BoxProps) => {
@@ -18,6 +20,7 @@ const BoxComponent = ({ as, style, children, ...props }: BoxProps) => {
     Object.entries(props).forEach(([propName, propValue]) => {
       if (propValue === undefined) return;
 
+      if (semanticPropMapping[propName]) return;
       if (propStyleMapping[propName] || viewStyleProps.has(propName)) {
         return;
       }
@@ -44,6 +47,22 @@ const styles = StyleSheet.create(theme => ({
     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
@@ -58,12 +77,22 @@ const styles = StyleSheet.create(theme => ({
       if (!stylePropName) return;
 
       // Resolve theme value if needed
-      const themeKey: keyof typeof theme | undefined = themeStyleMapping[
-        stylePropName
-      ] as keyof typeof theme;
-
-      if (themeKey && theme[themeKey]) {
-        computedStyles[stylePropName] = resolveThemeValue(propValue, theme[themeKey]);
+      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;
       }

package/src/components/Button/Button.docs.mdx

@@ -1,6 +1,17 @@
 import { Canvas, Controls, Meta, Story } from '@storybook/addon-docs/blocks';
 import { AddSmallIcon } from '@utilitywarehouse/hearth-react-native-icons';
-import { Box, Button, ButtonGroup, ButtonIcon, ButtonSpinner, ButtonText, Center } from '../../';
+import {
+  Box,
+  Button,
+  ButtonGroup,
+  ButtonIcon,
+  ButtonSpinner,
+  ButtonText,
+  Card,
+  Center,
+  DetailText,
+  Flex,
+} from '../../';
 import { BackToTopButton, UsageWrap, ViewFigmaButton } from '../../../docs/components';
 import * as Stories from './Button.stories';
 
@@ -26,6 +37,7 @@ The `Button` component is used to trigger an action or event, such as submitting
   - [`ButtonSpinner`](#buttonspinner)
 - [Examples](#examples)
   - [Padding None](#padding-none)
+  - [Full width button](#full-width-button)
 
 ## Playground
 
@@ -286,3 +298,36 @@ const MyComponent = () => {
   );
 };
 ```
+
+### Full width button
+
+Use layout components, like `Box` or `Flex`, to define your UI layouts, which can also be responsive.
+
+<UsageWrap>
+<Box spacing="md">
+  <Flex align="stretch">
+    <Button>Full width button</Button>
+  </Flex>
+
+  <Card>
+    <DetailText size="xl">Button inside a Card component</DetailText>
+    <Box width="100%" paddingTop="md">
+      <Button>Refetch</Button>
+    </Box>
+  </Card>
+</Box>
+</UsageWrap>
+
+```tsx
+<Flex align="stretch">
+  <Button>Full width button</Button>
+</Flex>
+
+// Card example
+<Card>
+  <DetailText size="xl">Button inside a Card component</DetailText>
+  <Box width="100%" paddingTop="md">
+    <Button>Refetch</Button>
+  </Box>
+</Card>
+```

package/src/components/Card/Card.docs.mdx

@@ -70,7 +70,7 @@ const MyComponent = () => (
 | selected       | `boolean`                                                                                                                                    | Whether the card is selected.              | `false`           |
 | onPress        | `() => void`                                                                                                                                 | Callback function to be called.            | `-`               |
 | disabled       | `boolean`                                                                                                                                    | Whether the card is disabled.              | `false`           |
-| space          | `'none' \| '2xs' \| 'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl' \| '2xl'`                                                                           | The space between the content.             | `none`            |
+| spacing          | `'none' \| '2xs' \| 'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl' \| '2xl'`                                                                           | The space between the content.             | `none`            |
 | alignItems     | `'flex-start' \| 'flex-end' \| `<br />`'center' \| 'stretch' \| 'baseline'`                                                                  | The align items of the flex container.     | `flex-start`      |
 | justifyContent | `'flex-start' \| 'flex-end' \| 'center' \| 'space-between' \| `<br />` 'space-around' \| 'space-evenly'`                                     | The justify content of the flex container. | `flex-start`      |
 | flexWrap       | `'wrap' \| 'nowrap' \| 'wrap-reverse'`                                                                                                       | The wrap of the flex container.            | `nowrap`          |

package/src/components/Card/Card.props.ts

@@ -1,7 +1,7 @@
 import { PressableProps, ViewStyle } from 'react-native';
-import { SpaceValue, SpacingValues } from '../../types';
+import { GapProps, MarginProps, SpacingValues } from '../../types';
 
-interface CardProps extends PressableProps {
+interface CardProps extends PressableProps, MarginProps, GapProps {
   variant?: 'emphasis' | 'subtle';
   colorScheme?:
     | 'neutralStrong'
@@ -31,9 +31,6 @@ interface CardProps extends PressableProps {
   justifyContent?: ViewStyle['justifyContent'];
   flexDirection?: ViewStyle['flexDirection'];
   flexWrap?: ViewStyle['flexWrap'];
-  gap?: SpaceValue;
-  rowGap?: SpaceValue;
-  columnGap?: SpaceValue;
 }
 
 export default CardProps;

package/src/components/Card/Card.stories.tsx

@@ -77,29 +77,60 @@ export const Playground: Story = {
 export const WithActions: Story = {
   render: ({ children, ...props }) => {
     return (
-      <Card {...props} flexDirection="column" alignItems="stretch" spacing="md" variant="emphasis">
-        <BodyText>{children as string}</BodyText>
-        <CardActions>
-          <CardAction
-            onPress={() => console.log('Card action pressed')}
-            heading="Card Action Head"
-            helperText="Some helper text"
-            leadingIcon={BellMediumIcon}
-          />
-          <CardAction
-            onPress={() => console.log('Card action pressed')}
-            heading="Card Action Head"
-            leadingIcon={BellMediumIcon}
-          />
-          <CardAction
-            onPress={() => console.log('Card action pressed')}
-            heading="Card Action Head"
-            helperText="Testing"
-            leadingIcon={BellMediumIcon}
-            iconContainer={false}
-          />
-        </CardActions>
-      </Card>
+      <Flex gap="400">
+        <Card
+          {...props}
+          flexDirection="column"
+          alignItems="stretch"
+          spacing="md"
+          variant="emphasis"
+        >
+          <BodyText>{children as string}</BodyText>
+          <CardActions>
+            <CardAction
+              onPress={() => console.log('Card action pressed')}
+              heading="Card Action Head"
+              helperText="Some helper text"
+              leadingIcon={BellMediumIcon}
+            />
+            <CardAction
+              onPress={() => console.log('Card action pressed')}
+              heading="Card Action Head"
+              leadingIcon={BellMediumIcon}
+            />
+            <CardAction
+              onPress={() => console.log('Card action pressed')}
+              heading="Card Action Head"
+              helperText="Testing"
+              leadingIcon={BellMediumIcon}
+              iconContainer={false}
+            />
+          </CardActions>
+        </Card>
+        <Card {...props} flexDirection="column" alignItems="stretch" spacing="md" variant="subtle">
+          <BodyText>{children as string}</BodyText>
+          <CardActions>
+            <CardAction
+              onPress={() => console.log('Card action pressed')}
+              heading="Card Action Head"
+              helperText="Some helper text"
+              leadingIcon={BellMediumIcon}
+            />
+            <CardAction
+              onPress={() => console.log('Card action pressed')}
+              heading="Card Action Head"
+              leadingIcon={BellMediumIcon}
+            />
+            <CardAction
+              onPress={() => console.log('Card action pressed')}
+              heading="Card Action Head"
+              helperText="Testing"
+              leadingIcon={BellMediumIcon}
+              iconContainer={false}
+            />
+          </CardActions>
+        </Card>
+      </Flex>
     );
   },
 };