@utilitywarehouse/hearth-react-native 0.1.0

package/src/components/FormField/FormFieldValidIcon.tsx

@@ -0,0 +1,11 @@
+import { HelperIcon } from '../Helper';
+import IconProps from '../Icon/Icon.props';
+import { TickCircleSmallIcon } from '@utilitywarehouse/hearth-react-native-icons';
+
+const FormFieldValidIcon = (props: Omit<IconProps, 'as'>) => (
+  <HelperIcon as={TickCircleSmallIcon} {...props} />
+);
+
+FormFieldValidIcon.displayName = 'FormFieldValidIcon';
+
+export default FormFieldValidIcon;

package/src/components/FormField/index.ts

@@ -0,0 +1,16 @@
+export {
+  default as FormField,
+  FormFieldHelper,
+  FormFieldHelperText,
+  FormFieldLabel,
+  FormFieldLabelText,
+  FormFieldHelperIcon,
+  FormFieldValidText,
+  FormFieldInvalidText,
+  FormFieldTextContent,
+} from './FormField';
+export { default as FormFieldValidIcon } from './FormFieldValidIcon';
+export { default as FormFieldInvalidIcon } from './FormFielInvalidIcon';
+export { default as FormFieldValid } from './FormFieldValid';
+export { default as FormFieldInvalid } from './FormFieldInvalid';
+export { useFormFieldContext } from './FormField.context';

package/src/components/Grid/Grid.docs.mdx

@@ -0,0 +1,194 @@
+import { Meta, Canvas, Story, Controls, Primary } from '@storybook/addon-docs/blocks';
+import * as Stories from './Grid.stories';
+import { Center, Grid, Box, BodyText } from '../..';
+import { UsageWrap, BackToTopButton, ViewFigmaButton } from '../../../docs/components';
+
+<Meta title="Primitives / Grid" />
+
+<BackToTopButton />
+
+# Grid
+
+The Grid component helps you create responsive grid layouts with configurable columns and spacing. It's perfect for creating photo galleries, card layouts, and other grid-based UI elements.
+
+- [Playground](#playground)
+- [Usage](#usage)
+- [Props](#props)
+
+## Playground
+
+<Canvas of={Stories.Playground} />
+
+<Controls of={Stories.Playground} />
+
+## Usage
+
+<UsageWrap>
+  <Center>
+    <Grid columns={2} space="md" width={300}>
+      <Box backgroundColor="green400" height={100} padding="200">
+        <BodyText color="white">Item 1</BodyText>
+      </Box>
+      <Box backgroundColor="blue400" height={100} padding="200">
+        <BodyText color="white">Item 2</BodyText>
+      </Box>
+      <Box backgroundColor="red400" height={100} padding="200">
+        <BodyText color="white">Item 3</BodyText>
+      </Box>
+      <Box backgroundColor="yellow400" height={100} padding="200">
+        <BodyText color="white">Item 4</BodyText>
+      </Box>
+    </Grid>
+  </Center>
+</UsageWrap>
+
+```jsx
+import { Grid, Box, BodyText } from '@utilitywarehouse/hearth-react-native';
+
+const MyComponent = () => (
+  <Grid columns={2} space="md" width={300}>
+    <Box backgroundColor="green400" height={100} padding="200">
+      <BodyText color="white">Item 1</BodyText>
+    </Box>
+    <Box backgroundColor="blue400" height={100} padding="200">
+      <BodyText color="white">Item 2</BodyText>
+    </Box>
+    <Box backgroundColor="red400" height={100} padding="200">
+      <BodyText color="white">Item 3</BodyText>
+    </Box>
+    <Box backgroundColor="yellow400" height={100} padding="200">
+      <BodyText color="white">Item 4</BodyText>
+    </Box>
+  </Grid>
+);
+```
+
+### Responsive Columns
+
+The Grid component supports responsive column layouts based on screen size breakpoints:
+
+<UsageWrap>
+  <Center>
+    <Grid
+      columns={{
+        xs: 1,
+        sm: 2,
+        md: 3,
+        lg: 4,
+      }}
+      space="md"
+      width="100%"
+    >
+      <Box backgroundColor="green400" height={100} padding="200">
+        <BodyText color="white">Item 1</BodyText>
+      </Box>
+      <Box backgroundColor="blue400" height={100} padding="200">
+        <BodyText color="white">Item 2</BodyText>
+      </Box>
+      <Box backgroundColor="red400" height={100} padding="200">
+        <BodyText color="white">Item 3</BodyText>
+      </Box>
+      <Box backgroundColor="yellow400" height={100} padding="200">
+        <BodyText color="white">Item 4</BodyText>
+      </Box>
+    </Grid>
+  </Center>
+</UsageWrap>
+
+```jsx
+import { Grid, Box, BodyText } from '@utilitywarehouse/hearth-react-native';
+
+const MyComponent = () => (
+  <Grid
+    columns={{
+      xs: 1,
+      sm: 2,
+      md: 3,
+      lg: 4,
+    }}
+    space="md"
+    width="100%"
+  >
+    <Box backgroundColor="green400" height={100} padding="200">
+      <BodyText color="white">Item 1</BodyText>
+    </Box>
+    <Box backgroundColor="blue400" height={100} padding="200">
+      <BodyText color="white">Item 2</BodyText>
+    </Box>
+    <Box backgroundColor="red400" height={100} padding="200">
+      <BodyText color="white">Item 3</BodyText>
+    </Box>
+    <Box backgroundColor="yellow400" height={100} padding="200">
+      <BodyText color="white">Item 4</BodyText>
+    </Box>
+  </Grid>
+);
+```
+
+### Custom Gaps
+
+You can specify different horizontal and vertical spacing:
+
+<UsageWrap>
+  <Center>
+    <Grid columns={2} columnGap={24} rowGap={16}>
+      <Box backgroundColor="green400" height={100} padding="200">
+        <BodyText color="white">Item 1</BodyText>
+      </Box>
+      <Box backgroundColor="blue400" height={100} padding="200">
+        <BodyText color="white">Item 2</BodyText>
+      </Box>
+      <Box backgroundColor="red400" height={100} padding="200">
+        <BodyText color="white">Item 3</BodyText>
+      </Box>
+      <Box backgroundColor="yellow400" height={100} padding="200">
+        <BodyText color="white">Item 4</BodyText>
+      </Box>
+    </Grid>
+  </Center>
+</UsageWrap>
+
+```jsx
+import { Grid, Box } from '@utilitywarehouse/hearth-react-native';
+
+const MyComponent = () => (
+  <Grid columns={2} columnGap={24} rowGap={8}>
+    <Box backgroundColor="green400" height={100} padding="200">
+      <BodyText color="white">Item 1</BodyText>
+    </Box>
+    <Box backgroundColor="blue400" height={100} padding="200">
+      <BodyText color="white">Item 2</BodyText>
+    </Box>
+    <Box backgroundColor="red400" height={100} padding="200">
+      <BodyText color="white">Item 3</BodyText>
+    </Box>
+    <Box backgroundColor="yellow400" height={100} padding="200">
+      <BodyText color="white">Item 4</BodyText>
+    </Box>
+  </Grid>
+);
+```
+
+## Props
+
+The Grid component extends all the props from the [View component](https://reactnative.dev/docs/view), and adds the following:
+
+| Name             | Type                                             | Default | Description                                                   |
+| ---------------- | ------------------------------------------------ | ------- | ------------------------------------------------------------- |
+| `columns`        | `number` or `GridColumns`                        | 2       | Number of columns or responsive object with breakpoint values |
+| `space`          | `'none' \| 'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl'` | -       | Spacing between grid items (both rows and columns)            |
+| `columnGap`      | `number`                                         | -       | Gap between columns (overrides spacing if provided)           |
+| `rowGap`         | `number`                                         | -       | Gap between rows (overrides spacing if provided)              |
+| `containerStyle` | `StyleProp\<ViewStyle\>`                         | -       | Style for the grid container                                  |
+| `itemStyle`      | `StyleProp\<ViewStyle\>`                         | -       | Style applied to each grid item                               |
+| `rowStyle`       | `StyleProp\<ViewStyle\>`                         | -       | Style applied to each row                                     |
+
+Where `GridColumns` is defined as:
+
+```tsx
+type GridColumns = {
+  [key in keyof UnistylesBreakpoints]?: number;
+};
+```
+
+With breakpoint keys typically being: `xs`, `sm`, `md`, `lg`, `xl`.

package/src/components/Grid/Grid.props.ts

@@ -0,0 +1,56 @@
+import { StyleProp, ViewProps, ViewStyle } from 'react-native';
+import { UnistylesBreakpoints } from 'react-native-unistyles';
+import { SpaceValue } from '../../types';
+
+// Create a type that uses the keys from our breakpoints object
+export type GridColumns = {
+  [key in keyof UnistylesBreakpoints]?: number;
+};
+
+export interface GridProps extends ViewProps {
+  /**
+   * Number of columns or responsive object defining columns at different breakpoints
+   * @default 2
+   */
+  columns?: number | GridColumns;
+
+  /**
+   * Spacing between grid items (applies to both rows and columns)
+   */
+  space?: 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+
+  /**
+   * Gap between items (overrides spacing if provided)
+   */
+  gap?: SpaceValue;
+
+  /**
+   * Gap between columns (overrides spacing if provided)
+   */
+  columnGap?: SpaceValue;
+
+  /**
+   * Gap between rows (overrides spacing if provided)
+   */
+  rowGap?: SpaceValue;
+
+  /**
+   * Style for the grid container
+   */
+  containerStyle?: StyleProp<ViewStyle>;
+
+  /**
+   * Style for each grid item
+   */
+  itemStyle?: StyleProp<ViewStyle>;
+
+  /**
+   * Style for each row
+   */
+  rowStyle?: StyleProp<ViewStyle>;
+
+  /**
+   * Grid items
+   */
+  children?: ViewProps['children'];
+}

package/src/components/Grid/Grid.stories.tsx

@@ -0,0 +1,199 @@
+import { Meta, StoryObj } from '@storybook/react-vite';
+import { View, Text } from 'react-native';
+import { Grid } from '.';
+
+const meta = {
+  title: 'Stories / Grid',
+  component: Grid,
+  parameters: {
+    layout: 'centered',
+  },
+  argTypes: {
+    columns: {
+      control: 'object',
+      description: 'Number of columns or responsive object with breakpoints',
+    },
+    space: {
+      options: ['none', 'xs', 'sm', 'md', 'lg', 'xl'],
+      control: 'radio',
+      description: 'Responsive spacing between grid items (applied to both rows and columns).',
+    },
+    gap: {
+      control: 'number',
+      description: 'Spacing between grid items (applied to both rows and columns)',
+    },
+    columnGap: {
+      control: 'number',
+      description: 'Column gap between items',
+    },
+    rowGap: {
+      control: 'number',
+      description: 'Row gap between items',
+    },
+  },
+  args: {
+    columns: 2,
+    space: 'md',
+  },
+} satisfies Meta<typeof Grid>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+// GridItem component to use in examples
+const GridItem = ({
+  color = '#e0e0e0',
+  height = 100,
+  children,
+}: {
+  color?: string;
+  height?: number;
+  children?: React.ReactNode;
+}) => (
+  <View
+    style={{
+      backgroundColor: color,
+      height,
+      justifyContent: 'center',
+      alignItems: 'center',
+      borderRadius: 4,
+      padding: 16,
+    }}
+  >
+    {children ?? <Text>Grid Item</Text>}
+  </View>
+);
+
+export const Playground: Story = {
+  parameters: {
+    controls: {
+      include: [
+        'columns',
+        'space',
+        'gap',
+        'columnGap',
+        'rowGap',
+        'style',
+        'containerStyle',
+        'itemStyle',
+      ],
+    },
+  },
+  args: {
+    columns: 2,
+    space: 'md',
+  },
+  render: args => (
+    <Grid {...args} style={{ width: 400 }}>
+      <GridItem color="#FFD6D6" />
+      <GridItem color="#D6FFD6" />
+      <GridItem color="#D6D6FF" />
+      <GridItem color="#FFFFD6" />
+      <GridItem color="#FFD6FF" />
+      <GridItem color="#D6FFFF" />
+    </Grid>
+  ),
+};
+
+export const ThreeColumns: Story = {
+  args: {
+    columns: 3,
+    space: 'md',
+  },
+  render: args => (
+    <Grid {...args} style={{ width: 500 }}>
+      <GridItem color="#FFD6D6" />
+      <GridItem color="#D6FFD6" />
+      <GridItem color="#D6D6FF" />
+      <GridItem color="#FFFFD6" />
+      <GridItem color="#FFD6FF" />
+      <GridItem color="#D6FFFF" />
+      <GridItem color="#E6D6FF" />
+      <GridItem color="#FFE6D6" />
+      <GridItem color="#D6FFE6" />
+    </Grid>
+  ),
+};
+
+export const ResponsiveColumns: Story = {
+  args: {
+    columns: {
+      xs: 1,
+      sm: 2,
+      md: 3,
+      lg: 4,
+      xl: 5,
+    },
+    space: 'md',
+  },
+  render: args => (
+    <Grid {...args} style={{ width: '100%' }}>
+      <GridItem color="#FFD6D6" />
+      <GridItem color="#D6FFD6" />
+      <GridItem color="#D6D6FF" />
+      <GridItem color="#FFFFD6" />
+      <GridItem color="#FFD6FF" />
+      <GridItem color="#D6FFFF" />
+      <GridItem color="#E6D6FF" />
+      <GridItem color="#FFE6D6" />
+      <GridItem color="#D6FFE6" />
+      <GridItem color="#FFD6D6" />
+    </Grid>
+  ),
+};
+
+export const DifferentSizes: Story = {
+  args: {
+    columns: 3,
+    space: 'sm',
+  },
+  render: args => (
+    <Grid {...args} style={{ width: 500 }}>
+      <GridItem color="#FFD6D6" height={80} />
+      <GridItem color="#D6FFD6" height={120} />
+      <GridItem color="#D6D6FF" height={100} />
+      <GridItem color="#FFFFD6" height={150} />
+      <GridItem color="#FFD6FF" height={90} />
+      <GridItem color="#D6FFFF" height={110} />
+    </Grid>
+  ),
+};
+
+export const CustomGaps: Story = {
+  args: {
+    columns: 2,
+    columnGap: 24,
+    rowGap: 16,
+  },
+  render: args => (
+    <Grid {...args} style={{ width: 400 }}>
+      <GridItem color="#FFD6D6" />
+      <GridItem color="#D6FFD6" />
+      <GridItem color="#D6D6FF" />
+      <GridItem color="#FFFFD6" />
+    </Grid>
+  ),
+};
+
+export const WithContent: Story = {
+  args: {
+    columns: 2,
+    space: 'md',
+  },
+  render: args => (
+    <Grid {...args} style={{ width: 400 }}>
+      <GridItem color="#FFD6D6">
+        <Text>Item 1</Text>
+      </GridItem>
+      <GridItem color="#D6FFD6">
+        <Text>Item 2</Text>
+      </GridItem>
+      <GridItem color="#D6D6FF">
+        <Text>Item 3</Text>
+      </GridItem>
+      <GridItem color="#FFFFD6">
+        <Text>Item 4</Text>
+      </GridItem>
+    </Grid>
+  ),
+};

package/src/components/Grid/Grid.tsx

@@ -0,0 +1,145 @@
+import React, { useMemo } from 'react';
+import { useWindowDimensions, View, ViewProps } from 'react-native';
+import { StyleSheet, UnistylesRuntime } from 'react-native-unistyles';
+import { useStyleProps, useTheme } from '../../hooks';
+import type { GridProps } from './Grid.props';
+
+const Grid = ({
+  columns = 2,
+  containerStyle,
+  itemStyle,
+  rowStyle,
+  space,
+  children,
+  ...props
+}: GridProps) => {
+  const { breakpoints } = useTheme();
+  const { computedStyles, remainingProps } = useStyleProps(props);
+  const childrenArray = React.Children.toArray(children).filter(Boolean);
+  const { width } = useWindowDimensions();
+  const { gap, columnGap, rowGap } = { ...remainingProps, ...computedStyles };
+
+  styles.useVariants({ space });
+
+  const getColumnsForWidth = useMemo(() => {
+    // If columns is a number, use that number
+    if (typeof columns === 'number') {
+      return columns;
+    }
+
+    // If columns is an object, determine columns based on current breakpoint
+    if (typeof columns === 'object') {
+      const currentBreakpoint = UnistylesRuntime.breakpoint ?? 'base';
+
+      // Try to get the value for the current breakpoint
+      if (columns[currentBreakpoint] !== undefined) {
+        return columns[currentBreakpoint];
+      }
+
+      // If not found, find the nearest smaller breakpoint that has a defined column value
+      const breakpointKeys = Object.keys(breakpoints) as Array<keyof typeof breakpoints>;
+      const sortedBreakpoints = breakpointKeys.sort((a, b) => breakpoints[a] - breakpoints[b]);
+      // @ts-expect-error - breakpoints are not the same
+      const currentBreakpointIndex = sortedBreakpoints.indexOf(currentBreakpoint);
+
+      // Look for the closest smaller breakpoint with a defined value
+      for (let i = currentBreakpointIndex - 1; i >= 0; i--) {
+        const breakpoint = sortedBreakpoints[i];
+        if (columns[breakpoint] !== undefined) {
+          return columns[breakpoint];
+        }
+      }
+
+      // If no smaller breakpoint has a defined value, look for larger ones
+      for (let i = currentBreakpointIndex + 1; i < sortedBreakpoints.length; i++) {
+        const breakpoint = sortedBreakpoints[i];
+        if (columns[breakpoint] !== undefined) {
+          return columns[breakpoint];
+        }
+      }
+    }
+
+    // Default to 2 columns
+    return 2;
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [columns, width]);
+
+  const computedColumnGap = columnGap ?? gap;
+  const computedRowGap = rowGap ?? gap;
+
+  // Create rows and columns structure for better control over layout
+  const rows = useMemo(() => {
+    const result: ViewProps['children'][][] = [];
+    let currentRow: ViewProps['children'][] = [];
+
+    childrenArray.forEach((child, index) => {
+      currentRow.push(child as ViewProps['children']);
+
+      // When we reach the end of a row or the end of all children
+      if ((index + 1) % getColumnsForWidth === 0 || index === childrenArray.length - 1) {
+        result.push([...currentRow]);
+        currentRow = [];
+      }
+    });
+
+    return result;
+  }, [childrenArray, getColumnsForWidth]);
+
+  return (
+    <View {...remainingProps} style={[styles.container, containerStyle, computedStyles]}>
+      <View style={[styles.rowsContainer, computedRowGap ? { gap: computedRowGap as number } : {}]}>
+        {rows.map((rowItems, rowIndex) => (
+          <View
+            key={`row-${rowIndex}`}
+            style={[
+              styles.row,
+              computedColumnGap ? { gap: computedColumnGap as number } : {},
+              rowStyle,
+            ]}
+          >
+            {rowItems.map((child, colIndex) => {
+              return (
+                <View key={`item-${rowIndex}-${colIndex}`} style={[styles.item, itemStyle]}>
+                  {child as ViewProps['children']}
+                </View>
+              );
+            })}
+
+            {/* Add empty placeholder items to fill the last row if needed */}
+            {rowItems.length < getColumnsForWidth &&
+              Array.from({ length: getColumnsForWidth - rowItems.length }).map((_, index) => (
+                <View key={`placeholder-${rowIndex}-${index}`} style={[styles.item]} />
+              ))}
+          </View>
+        ))}
+      </View>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create(theme => ({
+  container: {
+    width: '100%',
+  },
+  rowsContainer: {
+    width: '100%',
+    variants: {
+      space: theme.globalStyle.variants.space,
+    },
+  },
+  row: {
+    flexDirection: 'row',
+    width: '100%',
+    variants: {
+      space: theme.globalStyle.variants.space,
+    },
+  },
+  item: {
+    alignSelf: 'stretch',
+    flex: 1,
+  },
+}));
+
+Grid.displayName = 'Grid';
+
+export default Grid;

package/src/components/Grid/index.ts

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

package/src/components/HTMLElements/ListItem.tsx

@@ -0,0 +1,25 @@
+import { StyleSheet, View, ViewProps } from 'react-native';
+import { BodyText } from '../BodyText';
+
+export interface ListItemProps extends ViewProps {
+  children: ViewProps['children'];
+}
+
+const ListItem = ({ children, style, ...rest }: ListItemProps) => {
+  return (
+    <View style={[styles.item, style]} {...rest}>
+      {typeof children === 'string' ? <BodyText>{children}</BodyText> : children}
+    </View>
+  );
+};
+
+ListItem.displayName = 'ListItem';
+
+const styles = StyleSheet.create({
+  item: {
+    flexDirection: 'row',
+    alignItems: 'flex-start',
+  },
+});
+
+export default ListItem;