@utilitywarehouse/hearth-react-native 0.1.0

package/src/components/Button/ButtonSpinner.tsx

@@ -0,0 +1,63 @@
+import { useMemo } from 'react';
+import { Spinner } from '../Spinner';
+import type { SpinnerProps } from '../Spinner';
+import { useButtonContext } from './Button.context';
+import { useTheme } from '../../hooks';
+import { ColorValue } from '../../types';
+
+const ButtonSpinner = ({ color, ...props }: Omit<SpinnerProps, 'size'>) => {
+  const { colorScheme, variant, disabled, inverted } = useButtonContext();
+  const { components, colorMode } = useTheme();
+
+  const colorProp = useMemo(() => {
+    if (variant === 'emphasis' && colorScheme === 'yellow' && inverted) {
+      return components.button.emphasis.yellow.foregroundColor;
+    }
+    if (variant === 'emphasis' && colorScheme === 'yellow') {
+      return components.button.emphasis.yellow.foregroundColor;
+    }
+    if (variant === 'solid' && colorScheme === 'yellow' && inverted) {
+      return components.button.solid.yellow.inverted.foregroundColor;
+    }
+    if (variant === 'solid' && colorScheme === 'yellow') {
+      return components.button.solid.yellow.foregroundColor;
+    }
+    if (variant === 'solid' && colorScheme === 'red') {
+      return components.button.solid.red.foregroundColor;
+    }
+    if (variant === 'solid' && colorScheme === 'green') {
+      return components.button.solid.green.foregroundColor;
+    }
+    if (variant === 'outline' && colorScheme === 'red') {
+      return components.button.outline.red.foregroundColor;
+    }
+    if (variant === 'outline' && colorScheme === 'green') {
+      return components.button.outline.green.foregroundColor;
+    }
+    if (variant === 'outline' && colorScheme === 'grey' && inverted) {
+      return components.button.outline.grey.inverted.foregroundColor;
+    }
+    if (variant === 'outline' && colorScheme === 'grey') {
+      return components.button.outline.grey.foregroundColor;
+    }
+    if (variant === 'ghost' && colorScheme === 'red') {
+      return components.button.ghost.red.foregroundColor;
+    }
+    if (variant === 'ghost' && colorScheme === 'green') {
+      return components.button.ghost.green.foregroundColor;
+    }
+    if (variant === 'ghost' && colorScheme === 'grey' && inverted) {
+      return components.button.ghost.grey.inverted.foregroundColor;
+    }
+    if (variant === 'ghost' && colorScheme === 'grey') {
+      return components.button.ghost.grey.foregroundColor;
+    }
+    return color;
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [color, colorMode, variant, inverted, colorScheme]);
+
+  return <Spinner {...props} aria-disabled={disabled} size="xs" color={colorProp as ColorValue} />;
+};
+ButtonSpinner.displayName = 'ButtonSpinner';
+
+export default ButtonSpinner;

package/src/components/Button/ButtonText.tsx

@@ -0,0 +1,117 @@
+import { TextProps } from 'react-native';
+import { StyleSheet } from 'react-native-unistyles';
+import { DetailText } from '../DetailText';
+import { useButtonContext } from './Button.context';
+
+const ButtonText = ({ children, ...props }: TextProps) => {
+  const { colorScheme, variant, inverted, disabled } = useButtonContext();
+  styles.useVariants({ colorScheme, variant, inverted, disabled });
+  return (
+    <DetailText size="md" {...props} style={[styles.text, props.style]}>
+      {children}
+    </DetailText>
+  );
+};
+
+ButtonText.displayName = 'ButtonText';
+
+const styles = StyleSheet.create(theme => ({
+  text: {
+    variants: {
+      variant: {
+        emphasis: {},
+        solid: {},
+        outline: {},
+        ghost: {},
+      },
+      colorScheme: {
+        yellow: {},
+        red: {},
+        green: {},
+        grey: {},
+      },
+      inverted: {
+        true: {},
+      },
+      disabled: {
+        true: {},
+      },
+    },
+    compoundVariants: [
+      {
+        variant: 'emphasis',
+        colorScheme: 'yellow',
+        styles: {
+          color: theme.components.button.emphasis.yellow.foregroundColor,
+        },
+      },
+      {
+        variant: 'solid',
+        colorScheme: 'yellow',
+        styles: {
+          color: theme.components.button.solid.yellow.foregroundColor,
+        },
+      },
+      {
+        variant: 'solid',
+        colorScheme: 'red',
+        styles: {
+          color: theme.components.button.solid.red.foregroundColor,
+        },
+      },
+      {
+        variant: 'solid',
+        colorScheme: 'green',
+        styles: {
+          color: theme.components.button.solid.green.foregroundColor,
+        },
+      },
+      {
+        variant: 'outline',
+        colorScheme: 'red',
+        styles: {
+          color: theme.components.button.outline.red.foregroundColor,
+        },
+      },
+      {
+        variant: 'outline',
+        colorScheme: 'green',
+        styles: {
+          color: theme.components.button.outline.green.foregroundColor,
+        },
+      },
+      {
+        variant: 'ghost',
+        colorScheme: 'red',
+        styles: {
+          color: theme.components.button.ghost.red.foregroundColor,
+        },
+      },
+      {
+        variant: 'ghost',
+        colorScheme: 'green',
+        styles: {
+          color: theme.components.button.ghost.green.foregroundColor,
+        },
+      },
+      {
+        variant: 'outline',
+        colorScheme: 'grey',
+        inverted: true,
+        styles: {
+          color: theme.components.button.outline.grey.inverted.foregroundColor,
+        },
+      },
+      {
+        variant: 'ghost',
+        colorScheme: 'grey',
+        inverted: true,
+        styles: {
+          color: theme.components.button.outline.grey.inverted.foregroundColor,
+        },
+      },
+    ],
+  },
+}));
+
+export default ButtonText;

package/src/components/Button/index.ts

@@ -0,0 +1,3 @@
+export { default as Button, ButtonText, ButtonSpinner, ButtonIcon } from './Button';
+export { default as ButtonGroup } from './ButtonGroup';
+export type { ButtonProps } from './Button.props';

package/src/components/Card/Card.context.ts

@@ -0,0 +1,12 @@
+import { createContext, useContext } from 'react';
+
+interface CardContextProps {
+  pressed?: boolean;
+}
+
+export const CardContext = createContext<CardContextProps>({});
+
+export const useCardContext = (): CardContextProps => {
+  const context = useContext(CardContext);
+  return context;
+};

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

@@ -0,0 +1,107 @@
+import { Meta, Canvas, Story, Primary, Controls } from '@storybook/addon-docs/blocks';
+import * as Stories from './Card.stories';
+import { Center, Card, BodyText, DetailText } from '../../';
+import { ViewFigmaButton, BackToTopButton, UsageWrap } from '../../../docs/components';
+
+<Meta title="Components / Card" />
+
+<ViewFigmaButton url="https://www.figma.com/design/6NKZXZhFSExXrcbBgc6zTR/Hearth-Components-%26-Tokens?node-id=1-161" />
+
+<BackToTopButton />
+
+# Card
+
+A Card component serves as a visual container that groups related content and actions.
+
+- [Playground](#playground)
+- [Usage](#usage)
+- [Props](#props)
+- [Variants](#variants)
+- [Interactive](#interactive)
+
+## Playground
+
+<Canvas of={Stories.Playground} />
+
+<Controls of={Stories.Playground} />
+
+## Usage
+
+<UsageWrap>
+  <Center>
+    <Card colorScheme="white" variant="subtle">
+      <DetailText size="2xl">Quick Start</DetailText>
+      <BodyText>Start building your next project in minutes.</BodyText>
+    </Card>
+  </Center>
+</UsageWrap>
+
+```jsx
+import { Card, BodyText } from '@utilitywarehouse/hearth-react-native';
+
+const MyComponent = () => (
+  <Card colorScheme="white" variant="subtle">
+    <DetailText size="2xl">Quick Start</DetailText>
+    <BodyText>Start building your next project in minutes.</BodyText>
+  </Card>
+);
+```
+
+## Props
+
+| Property       | Type                                                                                                                                                           | Description                                | Default      |
+| -------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------ | ------------ |
+| variant        | `'subtle' \| 'emphasis' `                                                                                                                                      | The variant of the card.                   | `'subtle'`   |
+| colorScheme    | `'white' \| 'warmWhite' \| 'purple' \| 'energyBlue'` <br /> `'broadbandGreen' \| 'mobileRose' \| 'insuranceOrange' \| 'cashbackLilac' \|` <br /> `'piggyPink'` | The color scheme of the card.              | `'white'`    |
+| noPadding      | `boolean`                                                                                                                                                      | Wether or not the card has padding.        | `false`      |
+| 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' \| 'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl'`                                                                                                               | 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`     |
+| flexDirection  | `'row' \| 'column' \| 'row-reverse' \| 'column-reverse'`                                                                                                       | The direction of the flex container.       | `column`     |
+| gap            | `number`                                                                                                                                                       | The gap between the content.               | `0`          |
+| rowGap         | `number`                                                                                                                                                       | The row gap between the content.           | `0`          |
+| columnGap      | `number`                                                                                                                                                       | The column gap between the content.        | `0`          |
+
+### `CardAction`
+
+| Property        | Type     | Description                                                                | Default   |
+| --------------- | -------- | -------------------------------------------------------------------------- | --------- |
+| actionToInherit | `string` | The action to inherit from the child component when the `Card` is pressed. | `onPress` |
+
+## Variants
+
+<Canvas of={Stories.Variants} />
+
+## Interactive
+
+You can make the card interactive by adding an `onPress` prop. You can also toggle the `selected` prop
+to change the card's appearance.
+
+Alternatively to make the card inherit an action from a child component, you can use the `CardAction` component.
+This will by default inherit the `onPress` action from the child component. You can specify a different action
+by passing the `actionToInherit` prop e.g `onChange`. Wrapping a component in a `CardAction` component will
+make the card interactive and also show the `active` state of the child component when the `Card` is pressed.
+
+<Canvas of={Stories.Interactive} />
+
+See example below for how to use the `CardAction` component:
+
+```jsx
+import { Card, CardAction, BodyText, Heading, Felx, Button } from '@utilitywarehouse/hearth-react-native';
+
+const MyComponent = () => (
+  <Card variant="emphasis" colorScheme="warmWhite">
+    <Flex space="md" direction="column" align="stretch">
+      <Heading size="md">Heading</Heading>
+      <BodyText>{children as string}</BodyText>
+      <CardAction>
+        <Button onPress={() => console.log('pressed')}>Press me</Button>
+      </CardAction>
+    </Flex>
+  </Card>
+);
+```

package/src/components/Card/Card.figma.tsx

@@ -0,0 +1,73 @@
+//
+// import { Card } from './';
+// import figma from '@figma/code-connect';
+
+// figma.connect(
+//   Card,
+//   'https://www.figma.com/design/3RY3OvLA88yZksRjOfjQJm/UW-App-UI?node-id=9344-2255&t=mJTJZaLNKo4fj5Wm-4',
+//   {
+//     props: {
+//       variant: figma.enum('variant', {
+//         dashed: 'dashed',
+//         elevated: 'elevated',
+//         outline: 'outline',
+//         filled: 'filled',
+//       }),
+//       padding: figma.enum('padding', {
+//         large: 'large',
+//         medium: 'medium',
+//         small: 'small',
+//         none: 'none',
+//       }),
+//       colorScheme: figma.enum('colorScheme', {
+//         base: 'base',
+//         grey: 'grey',
+//         purple: 'purple',
+//       }),
+//       surface: figma.enum('surface', {
+//         base: 'base',
+//         purple: 'purple',
+//       }),
+//       children: figma.instance('content'),
+//     },
+//     example: ({ children, ...props }) => <Card {...props}>{children}</Card>,
+//   }
+// );
+
+// // Nested Card
+
+// figma.connect(
+//   Card,
+//   'https://www.figma.com/design/3RY3OvLA88yZksRjOfjQJm/UW-App-UI?node-id=9444-8408&t=mJTJZaLNKo4fj5Wm-4',
+//   {
+//     props: {
+//       variant: figma.enum('variant', {
+//         dashed: 'dashed',
+//         elevated: 'elevated',
+//         outline: 'outline',
+//         filled: 'filled',
+//       }),
+//       padding: figma.enum('padding', {
+//         large: 'large',
+//         medium: 'medium',
+//         small: 'small',
+//         none: 'none',
+//       }),
+//       colorScheme: figma.enum('colorScheme', {
+//         base: 'base',
+//         grey: 'grey',
+//         purple: 'purple',
+//       }),
+//       surface: figma.enum('surface', {
+//         base: 'base',
+//         purple: 'purple',
+//       }),
+//       children: figma.instance('content'),
+//     },
+//     example: ({ children, ...props }) => (
+//       <Card {...props} nested>
+//         {children}
+//       </Card>
+//     ),
+//   }
+// );

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

@@ -0,0 +1,28 @@
+import { PressableProps, ViewStyle } from 'react-native';
+import { SpaceValue } from '../../types';
+
+interface CardProps extends PressableProps {
+  variant?: 'emphasis' | 'subtle';
+  colorScheme?:
+    | 'white'
+    | 'warmWhite'
+    | 'purple'
+    | 'energyBlue'
+    | 'broadbandGreen'
+    | 'mobileRose'
+    | 'insuranceOrange'
+    | 'cashbackLilac'
+    | 'piggyPink';
+  noPadding?: boolean;
+  disabled?: boolean;
+  space?: 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+  alignItems?: ViewStyle['alignItems'];
+  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

@@ -0,0 +1,235 @@
+import { Card, CardAction } from '.';
+import { Meta, StoryObj } from '@storybook/react-vite';
+import { VariantTitle } from '../../../docs/components';
+import { BodyText } from '../BodyText';
+import { Flex } from '../Flex';
+import { Button } from '../Button';
+import { Heading } from '../Heading';
+
+const meta = {
+  title: 'Stories / Card',
+  component: Card,
+  parameters: {
+    layout: 'centered',
+  },
+  argTypes: {
+    variant: {
+      control: 'select',
+      options: ['subtle', 'emphasis'],
+      description: 'Use this value to set the Card variant.',
+    },
+    noPadding: {
+      control: 'boolean',
+      description: 'Use this value to set the Card padding.',
+    },
+    colorScheme: {
+      control: 'select',
+      options: [
+        'white',
+        'warmWhite',
+        'purple',
+        'energyBlue',
+        'broadbandGreen',
+        'mobileRose',
+        'insuranceOrange',
+        'cashbackLilac',
+        'piggyPink',
+      ],
+      description: 'Use this value to set the Card color scheme.',
+    },
+  },
+  args: {
+    children: 'This is a card',
+    variant: 'subtle',
+    noPadding: false,
+    colorScheme: 'white',
+  },
+} satisfies Meta<typeof Card>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Playground: Story = {
+  render: ({ children, ...props }) => {
+    return (
+      <Card {...props}>
+        <BodyText>{children as string}</BodyText>
+      </Card>
+    );
+  },
+};
+
+export const Variants: Story = {
+  parameters: {
+    controls: { exclude: ['variant', 'colorScheme'] },
+  },
+  render: ({ children, ...props }) => {
+    return (
+      <Flex space="lg">
+        <VariantTitle title="Subtle - White">
+          <Card {...props} variant="subtle" colorScheme="white">
+            <BodyText>{children as string}</BodyText>
+          </Card>
+        </VariantTitle>
+        <VariantTitle title="Emphasis - White">
+          <Card {...props} variant="emphasis" colorScheme="white">
+            <BodyText>{children as string}</BodyText>
+          </Card>
+        </VariantTitle>
+        <VariantTitle title="Subtle - Warm White">
+          <Card {...props} variant="subtle" colorScheme="warmWhite">
+            <BodyText>{children as string}</BodyText>
+          </Card>
+        </VariantTitle>
+        <VariantTitle title="Emphasis - Warm White">
+          <Card {...props} variant="emphasis" colorScheme="warmWhite">
+            <BodyText>{children as string}</BodyText>
+          </Card>
+        </VariantTitle>
+        <VariantTitle title="Purple - Subtle">
+          <Card {...props} colorScheme="purple" variant="subtle">
+            <BodyText>{children as string}</BodyText>
+          </Card>
+        </VariantTitle>
+        <VariantTitle title="Purple - Emphasis">
+          <Card {...props} colorScheme="purple" variant="emphasis">
+            <BodyText inverted>{children as string}</BodyText>
+          </Card>
+        </VariantTitle>
+        <VariantTitle title="Energy Blue - Subtle">
+          <Card {...props} colorScheme="energyBlue" variant="subtle">
+            <BodyText>{children as string}</BodyText>
+          </Card>
+        </VariantTitle>
+        <VariantTitle title="Energy Blue - Emphasis">
+          <Card {...props} colorScheme="energyBlue" variant="emphasis">
+            <BodyText>{children as string}</BodyText>
+          </Card>
+        </VariantTitle>
+        <VariantTitle title="Broadband Green - Subtle">
+          <Card {...props} colorScheme="broadbandGreen" variant="subtle">
+            <BodyText>{children as string}</BodyText>
+          </Card>
+        </VariantTitle>
+        <VariantTitle title="Broadband Green - Emphasis">
+          <Card {...props} colorScheme="broadbandGreen" variant="emphasis">
+            <BodyText>{children as string}</BodyText>
+          </Card>
+        </VariantTitle>
+        <VariantTitle title="Mobile Rose - Subtle">
+          <Card {...props} colorScheme="mobileRose" variant="subtle">
+            <BodyText>{children as string}</BodyText>
+          </Card>
+        </VariantTitle>
+        <VariantTitle title="Mobile Rose - Emphasis">
+          <Card {...props} colorScheme="mobileRose" variant="emphasis">
+            <BodyText>{children as string}</BodyText>
+          </Card>
+        </VariantTitle>
+        <VariantTitle title="Insurance Orange - Subtle">
+          <Card {...props} colorScheme="insuranceOrange" variant="subtle">
+            <BodyText>{children as string}</BodyText>
+          </Card>
+        </VariantTitle>
+        <VariantTitle title="Insurance Orange - Emphasis">
+          <Card {...props} colorScheme="insuranceOrange" variant="emphasis">
+            <BodyText>{children as string}</BodyText>
+          </Card>
+        </VariantTitle>
+        <VariantTitle title="Cashback Lilac - Subtle">
+          <Card {...props} colorScheme="cashbackLilac" variant="subtle">
+            <BodyText>{children as string}</BodyText>
+          </Card>
+        </VariantTitle>
+        <VariantTitle title="Cashback Lilac - Emphasis">
+          <Card {...props} colorScheme="cashbackLilac" variant="emphasis">
+            <BodyText>{children as string}</BodyText>
+          </Card>
+        </VariantTitle>
+        <VariantTitle title="Piggy Pink - Subtle">
+          <Card {...props} colorScheme="piggyPink" variant="subtle">
+            <BodyText>{children as string}</BodyText>
+          </Card>
+        </VariantTitle>
+        <VariantTitle title="Piggy Pink - Emphasis">
+          <Card {...props} colorScheme="piggyPink" variant="emphasis">
+            <BodyText>{children as string}</BodyText>
+          </Card>
+        </VariantTitle>
+      </Flex>
+    );
+  },
+};
+
+export const Interactive: Story = {
+  parameters: {
+    controls: { exclude: ['variant', 'colorScheme'] },
+  },
+  render: ({ children, ...props }) => {
+    return (
+      <Flex space="lg">
+        <VariantTitle title="Pressable - Subtle - White">
+          <Card
+            {...props}
+            onPress={() => console.log('pressed')}
+            variant="subtle"
+            colorScheme="white"
+            space="md"
+            flexDirection="column"
+            alignItems="stretch"
+          >
+            <Heading size="md">Heading</Heading>
+            <BodyText>{children as string}</BodyText>
+            <Button onPress={() => console.log('pressed')}>Press me</Button>
+          </Card>
+        </VariantTitle>
+        <VariantTitle title="Pressable - Emphasis - White">
+          <Card
+            {...props}
+            onPress={() => console.log('pressed')}
+            variant="emphasis"
+            colorScheme="white"
+            space="md"
+            flexDirection="column"
+            alignItems="stretch"
+          >
+            <Heading size="md">Heading</Heading>
+            <BodyText>{children as string}</BodyText>
+            <Button onPress={() => console.log('pressed')}>Press me</Button>
+          </Card>
+        </VariantTitle>
+        <VariantTitle title="Pressable - Subtle - Warm White">
+          <Card
+            {...props}
+            onPress={() => console.log('pressed')}
+            variant="subtle"
+            colorScheme="warmWhite"
+            space="md"
+            flexDirection="column"
+            alignItems="stretch"
+          >
+            <Heading size="md">Heading</Heading>
+            <BodyText>{children as string}</BodyText>
+            <Button onPress={() => console.log('pressed')}>Press me</Button>
+          </Card>
+        </VariantTitle>
+        <VariantTitle title="Pressable - Emphasis - Warm White">
+          <Card
+            {...props}
+            variant="emphasis"
+            colorScheme="warmWhite"
+            space="md"
+            flexDirection="column"
+            alignItems="stretch"
+          >
+            <Heading size="md">Heading</Heading>
+            <BodyText>{children as string}</BodyText>
+            <CardAction>
+              <Button onPress={() => console.log('pressed')}>Press me</Button>
+            </CardAction>
+          </Card>
+        </VariantTitle>
+      </Flex>
+    );
+  },
+};

package/src/components/Card/Card.tsx

@@ -0,0 +1,10 @@
+import { createPressable } from '@gluestack-ui/pressable';
+import CardRoot from './CardRoot';
+
+const Card = createPressable({
+  Root: CardRoot,
+});
+
+Card.displayName = 'Card';
+
+export default Card;

package/src/components/Card/CardAction.context.ts

@@ -0,0 +1,12 @@
+import { createContext, useContext } from 'react';
+
+interface CardActionContextProps {
+  pressed?: boolean;
+}
+
+export const CardActionContext = createContext<CardActionContextProps>({});
+
+export const useCardActionContext = (): CardActionContextProps => {
+  const context = useContext(CardActionContext);
+  return context;
+};