@utilitywarehouse/hearth-react-native 0.1.0

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

@@ -0,0 +1,234 @@
+import React from 'react';
+import type { ViewProps, ViewStyle } from 'react-native';
+import type {
+  BorderRadiusValue,
+  BordeWidthValue,
+  ColorValue,
+  OpacityValue,
+  SpaceValue,
+} 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;
+}
+
+export interface BoxProps
+  extends BoxStyleMappingValues,
+    ThemedBoxViewStyleProps,
+    OtherBoxViewStyles,
+    ViewProps {
+  as?: React.ElementType;
+}
+
+export default BoxProps;

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

@@ -0,0 +1,70 @@
+import { Meta, StoryObj } from '@storybook/react-vite';
+import { Box } from '.';
+import { BodyText } from '../BodyText';
+import { coloursAsArray } from '../../utils';
+import { primitive } from '@utilitywarehouse/hearth-tokens/js';
+import { InputType } from 'storybook/internal/types';
+
+const backgroundColor: InputType = {
+  options: coloursAsArray(),
+  control: 'select',
+  description: 'Background color of the box.',
+};
+
+const height: InputType = {
+  control: 'number',
+  description: 'Height of the box.',
+};
+
+const width: InputType = {
+  control: 'number',
+  description: 'Width of the box.',
+};
+
+// More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export
+const meta = {
+  title: 'Stories / Box',
+  component: Box,
+  parameters: {
+    // Optional parameter to Box the component in the Canvas. More info: https://storybook.js.org/docs/configure/story-layout
+    layout: 'centered',
+  },
+  // More on argTypes: https://storybook.js.org/docs/api/argtypes
+  argTypes: {
+    children: { control: 'text' },
+    backgroundColor,
+    bg: backgroundColor,
+    bgColor: backgroundColor,
+    padding: {
+      options: Object.keys(primitive.space),
+      control: 'select',
+      description: 'Padding of the box.',
+    },
+    height,
+    h: height,
+    width,
+    w: width,
+  },
+  // Use `fn` to spy on the onClick arg, which will appear in the actions panel once invoked: https://storybook.js.org/docs/essentials/actions#action-args
+  args: {
+    children: "Hello there, I'm in a box!",
+    backgroundColor: 'orange400',
+    padding: '200',
+    width: 300,
+    height: 200,
+  },
+} satisfies Meta<typeof Box>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Playground: Story = {
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  render: ({ as, ...args }) => {
+    return (
+      <Box {...args}>
+        <BodyText>{args.children}</BodyText>
+      </Box>
+    );
+  },
+};

package/src/components/Box/Box.tsx

@@ -0,0 +1,78 @@
+ 
+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,
+  themeStyleMapping,
+  viewStyleProps,
+} from '../../utils';
+
+// --- Box component definition ---
+const BoxComponent = ({ as, style, children, ...props }: BoxProps) => {
+  const { computedProps } = useMemo(() => {
+    const computedProps: Record<string, any> = {};
+
+    Object.entries(props).forEach(([propName, propValue]) => {
+      if (propValue === undefined) return;
+
+      if (propStyleMapping[propName] || viewStyleProps.has(propName)) {
+        return;
+      }
+
+      computedProps[propName] = propValue;
+    });
+
+    return { computedProps };
+  }, [props]);
+
+  const Component: React.ComponentType<any> = (as as React.ComponentType<any>) || View;
+
+  return (
+    <Component style={[styles.computedStyles(props), style]} {...computedProps}>
+      {children}
+    </Component>
+  );
+};
+
+const styles = StyleSheet.create(theme => ({
+  computedStyles: (props: Record<string, any>) => {
+    const computedStyles: Record<string, any> = {};
+
+    Object.entries(props).forEach(([propName, propValue]) => {
+      if (propValue === undefined) return;
+
+      let stylePropName: keyof ViewStyle | 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) 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]);
+      } else {
+        computedStyles[stylePropName] = propValue;
+      }
+    });
+
+    return computedStyles;
+  },
+}));
+
+BoxComponent.displayName = 'Box';
+
+export default BoxComponent;

package/src/components/Box/index.ts

@@ -0,0 +1 @@
+export { default as Box } from './Box';

package/src/components/Button/Button.context.ts

@@ -0,0 +1,13 @@
+import { createContext, useContext } from 'react';
+import type { ButtonProps } from './Button.props';
+
+export const ButtonContext = createContext<{
+  colorScheme?: ButtonProps['colorScheme'];
+  variant?: ButtonProps['variant'];
+  size?: ButtonProps['size'];
+  inverted?: ButtonProps['inverted'];
+  disabled?: ButtonProps['disabled'];
+  active?: boolean;
+}>({});
+
+export const useButtonContext = () => useContext(ButtonContext);

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

@@ -0,0 +1,288 @@
+import { Meta, Canvas, Story, Controls } from '@storybook/addon-docs/blocks';
+import * as Stories from './Button.stories';
+import { ButtonGroup, Button, ButtonIcon, ButtonSpinner, ButtonText, Box, Center } from '../../';
+import { AddSmallIcon } from '@utilitywarehouse/hearth-react-native-icons';
+import { ViewFigmaButton, BackToTopButton, UsageWrap } from '../../../docs/components';
+
+<Meta title="Components / Button" />
+
+<ViewFigmaButton url="https://www.figma.com/design/6NKZXZhFSExXrcbBgc6zTR/Hearth-Components?node-id=1-149" />
+
+<BackToTopButton />
+
+# Button
+
+The `Button` component is used to trigger an action or event, such as submitting a form, opening a dialog, canceling an action, or performing a delete operation.
+
+- [Playground](#playground)
+- [Usage](#usage)
+- [Props](#props)
+- [Variants](#variants)
+- [Advanced Usage](#advanced-usage)
+- [Components](#components)
+  - [`ButtonGroup`](#buttongroup)
+  - [`ButtonIcon`](#buttonicon)
+  - [`ButtonText`](#buttontext)
+  - [`ButtonSpinner`](#buttonspinner)
+- [Examples](#examples)
+  - [Padding None](#padding-none)
+
+## Playground
+
+<Canvas of={Stories.Playground} />
+
+<Controls of={Stories.Playground} />
+
+## Usage
+
+<UsageWrap>
+  <Center>
+    <Button colorScheme="green" variant="solid" children="Button" />
+  </Center>
+</UsageWrap>
+
+```tsx
+import { Button } from '@utilitywarehouse/hearth-react-native';
+
+const MyComponent = () => {
+  const handlePress = () => {
+    console.log('Button pressed');
+  };
+  return (
+    <Button onPress={handlePress} colorScheme="green">
+      Button
+    </Button>
+  );
+};
+```
+
+## Props
+
+| Property       | Type                                      | Description                                                                                         | Default  |
+| -------------- | ----------------------------------------- | --------------------------------------------------------------------------------------------------- | -------- |
+| `onPress`      | `() => void`                              | Callback function to be called when the button is pressed.                                          | -        |
+| `variant`      | `'solid' \| 'outline' \| 'ghost'`         | The variant of the button.                                                                          | 'solid'  |
+| `size`         | `'sm' \| 'md'`                            | The size of the button.                                                                             | 'medium' |
+| `colorScheme`  | `'yellow' \| 'green' \| 'red' \| 'grey' ` | The colour scheme of the button.                                                                    | 'yellow' |
+| `icon`         | `ReactNode`                               | The icon to be displayed in the button. _Note: Can't use with advanced usage._                      | -        |
+| `iconPosition` | `'left' \| 'right'`                       | The position of the icon in the button. _Note: Can't use with advanced usage._                      | 'left'   |
+| `inverted`     | `boolean`                                 | Changes the button to an inverted state. (To only be used on `midnight` or `purple` backgrounds).   | `false`  |
+| `loading`      | `boolean`                                 | Shows a loading spinner in the button. _Note: Can't use with advanced usage._                       | `false`  |
+| `disabled`     | `boolean`                                 | Disables the button.                                                                                | `false`  |
+| `paddingNone`  | `boolean`                                 | Removes the horizontal padding from the button (only applies to `sm` size `ghost` variant buttons). | `false`  |
+| `pressed`      | `boolean`                                 | Changes the button to a pressed state.                                                              | `false`  |
+
+## Variants
+
+<Canvas of={Stories.KitchenSink} />
+
+## Advanced Usage
+
+For more advanced usage, you can use the `ButtonText`, `ButtonIcon` and `ButtonSpinner` components to customise the button.
+
+<UsageWrap>
+  <Center>
+    <Button colorScheme="yellow">
+      <ButtonIcon as={AddSmallIcon} />
+      <ButtonText>Button</ButtonText>
+    </Button>
+  </Center>
+</UsageWrap>
+
+```tsx
+import {
+  Button,
+  ButtonIcon,
+  ButtonText,
+  ButtonSpinner,
+} from '@utilitywarehouse/hearth-react-native';
+import { AddSmallIcon } from '@utilitywarehouse/hearth-react-native-icons';
+
+const MyComponent = ({ doSomething }) => {
+  const [loading, setLoading] = useState(false);
+  const handleClick = () => {
+    setLoading(true);
+    doSomething();
+  };
+  return (
+    <Button colorScheme="yellow" disabled={loading}>
+      {loading ? <ButtonSpinner /> : <ButtonIcon as={AddSmallIcon} />}
+      <ButtonText onPress={handleClick}>Button</ButtonText>
+    </Button>
+  );
+};
+```
+
+## Components
+
+The `Button` component is composed of the following components under the hood and can be used to customise the button further:
+
+- [ButtonGroup](#buttongroup)
+- [ButtonText](#buttontext) (Advanced usage only)
+- [ButtonIcon](#buttonicon) (Advanced usage only)
+- [ButtonSpinner](#buttonspinner) (Advanced usage only)
+
+### `ButtonGroup`
+
+The `ButtonGroup` component is used to group multiple buttons together.
+
+<UsageWrap>
+  <Center>
+    <ButtonGroup flexDirection="column">
+      <Button colorScheme="yellow">
+        <ButtonText>Button 1</ButtonText>
+      </Button>
+      <Button colorScheme="grey" variant="outline">
+        <ButtonText>Button 2</ButtonText>
+      </Button>
+      <Button colorScheme="red" variant="ghost">
+        <ButtonText>Button 3</ButtonText>
+      </Button>
+    </ButtonGroup>
+  </Center>
+</UsageWrap>
+
+```tsx
+import { ButtonGroup, Button } from '@utilitywarehouse/hearth-react-native';
+
+const MyComponent = () => {
+  return (
+    <ButtonGroup flexDirection="column">
+      <Button colorScheme="yellow">Button 1</Button>
+      <Button colorScheme="grey" variant="outline">
+        Button 2
+      </Button>
+      <Button colorScheme="red" variant="ghost">
+        Button 3
+      </Button>
+    </ButtonGroup>
+  );
+};
+```
+
+#### Props
+
+| Property        | Type                                                     | Description                                                    | Default |
+| --------------- | -------------------------------------------------------- | -------------------------------------------------------------- | ------- |
+| `flexDirection` | `'row' \| 'column' \| 'row-reverse' \| 'column-reverse'` | Set the direction of Button group to vertical or horizontal    | 'row'   |
+| `disabled`      | `boolean`                                                | When true, this will disable all the buttons in a ButtonGroup. | `false` |
+| `loading`       | `boolean`                                                | When true, this will show a loading spinner in all buttons.    | `false` |
+| `attached`      | `boolean`                                                | When attached, all buttons will be attached to each other.     | `false` |
+| `reversed`      | `boolean`                                                | To reverse the order of components.                            | `false` |
+| `space`         | `string`                                                 | It sets the space between different buttons.                   | 'md'    |
+
+### `ButtonIcon`
+
+The `ButtonIcon` component is used to add an icon to the button.
+
+**Note:** The `ButtonIcon` component should be used only when utilising [advanced usage](#advanced-usage) with the `Button` component.
+We recommend using the `icon` prop on the `Button` component for simpler usage.
+
+<UsageWrap>
+  <Center>
+    <Button colorScheme="yellow">
+      <ButtonIcon as={AddSmallIcon} />
+      <ButtonText>Button</ButtonText>
+    </Button>
+  </Center>
+</UsageWrap>
+
+```tsx
+import { Button, ButtonIcon, ButtonText } from '@utilitywarehouse/hearth-react-native';
+import { AddSmallIcon } from '@utilitywarehouse/hearth-react-native-icons';
+
+const MyComponent = () => {
+  return (
+    <Button colorScheme="yellow">
+      <ButtonIcon as={AddSmallIcon} />
+      <ButtonText>Button</ButtonText>
+    </Button>
+  );
+};
+```
+
+### `ButtonText`
+
+The `ButtonText` component is used to add text to the button.
+
+**Note:** The `ButtonText` component should be used only when utilising [advanced usage](#advanced-usage) with the `Button` component.
+We recommend using the children prop on the `Button` component for simpler usage.
+
+<UsageWrap>
+  <Center>
+    <Button colorScheme="yellow">
+      <ButtonText>Button</ButtonText>
+    </Button>
+  </Center>
+</UsageWrap>
+
+```tsx
+import { Button, ButtonText } from '@utilitywarehouse/hearth-react-native';
+
+const MyComponent = () => {
+  return (
+    <Button colorScheme="yellow">
+      <ButtonText>Button</ButtonText>
+    </Button>
+  );
+};
+```
+
+### `ButtonSpinner`
+
+The `ButtonSpinner` component is used to add a spinner to the button and show loading state.
+
+> This component is used for buttons that trigger long-running actions, like form submissions or data loading.
+> The Button's appearance resembles a disabled state, as user interaction is prevented during the loading process.
+
+**Note:** The `ButtonSpinner` component should be used only when utilising [advanced usage](#advanced-usage) with the `Button` component and
+should inlude the `disabled` prop. We recommend using the `loading` prop on the `Button` component for simpler usage.
+
+<UsageWrap>
+  <Center>
+    <Button colorScheme="yellow" disabled>
+      <ButtonSpinner />
+      <ButtonText>Button</ButtonText>
+    </Button>
+  </Center>
+</UsageWrap>
+
+```tsx
+import { Button, ButtonSpinner, ButtonText } from '@utilitywarehouse/hearth-react-native';
+
+const MyComponent = ({ loading }) => {
+  return (
+    <Button colorScheme="yellow" disabled>
+      {loading ? <ButtonSpinner /> : null}
+      <ButtonText>Button</ButtonText>
+    </Button>
+  );
+};
+```
+
+## Examples
+
+### Padding None
+
+Similar to the `UnstyledIconButton`, the `paddingNone` prop can be used to remove the horizontal padding from the `sm` size `ghost` variant button.
+This is useful when you want to create a button that looks like a link or a text button without any padding around it.
+
+<UsageWrap>
+  <Center>
+    <Button variant="ghost" colorScheme="grey" size="sm" paddingNone>
+      {`No Padding`}
+    </Button>
+  </Center>
+</UsageWrap>
+
+```tsx
+import { Button } from '@utilitywarehouse/hearth-react-native';
+
+const MyComponent = () => {
+  return (
+    <Button variant="ghost" colorScheme="grey" size="sm" paddingNone>
+      No Padding
+    </Button>
+  );
+};
+```