@utilitywarehouse/hearth-react-native 0.1.0

package/src/components/DetailText/DetailText.docs.mdx

@@ -0,0 +1,73 @@
+import { Meta, Canvas, Story, Controls, Primary } from '@storybook/addon-docs/blocks';
+import * as Stories from './DetailText.stories';
+import { Center, Pressable, DetailText, Box } from '../..';
+import { UsageWrap, BackToTopButton, ViewFigmaButton } from '../../../docs/components';
+
+<Meta title="Typography / Detail Text" />
+
+<BackToTopButton />
+
+<ViewFigmaButton url="https://www.figma.com/design/9kCLtrMGwNFTscSEIbrXEl/Hearth-Design-Tokens?node-id=43-709" />
+
+# DetailText
+
+The `DetailText` component gives you the ability to create text for your screen. It can be used to display detail text in different sizes and styles.
+
+- [Playground](#playground)
+- [Usage](#usage)
+- [Props](#props)
+- [Sizes](#sizes)
+
+## Playground
+
+<Canvas of={Stories.Playground} />
+
+<Controls of={Stories.Playground} />
+
+## Usage
+
+<UsageWrap>
+  <Center>
+    <DetailText>
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
+      labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
+      laboris nisi ut aliquip ex ea commodo consequat.
+    </DetailText>
+  </Center>
+</UsageWrap>
+
+```jsx
+import { DetailText } from '@utilitywarehouse/hearth-react-native';
+
+const MyComponent = () => (
+  <DetailText>
+    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
+    labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
+    laboris nisi ut aliquip ex ea commodo consequat.
+  </DetailText>
+);
+```
+
+## Props
+
+| Property              | Type                                                                  | Description                         | Default      |
+| --------------------- | --------------------------------------------------------------------- | ----------------------------------- | ------------ |
+| `size`                | `'sm' \| 'md' \| 'lg' \| 'xl' \| '2xl' \| '3xl' \| '4xl'`             | The size of the text.               | `'md'`       |
+| `strikeThrough`       | `boolean`                                                             | Strike through the text.            | `false`      |
+| `truncated`           | `boolean`                                                             | Truncate the text with an ellipsis. | `false`      |
+| `underline`           | `boolean`                                                             | Underline the text.                 | `false`      |
+| `italic`              | `boolean`                                                             | Italicise the text.                 | `false`      |
+| `color`               | `string`                                                              | The color of the text.              | `'grey1000'` |
+| `textAlign`           | `'left' \| 'center' \| 'right' \| 'auto' \| 'justify'`                | The alignment of the text.          | `-`          |
+| `textTransform`       | `'none' \| 'capitalize' \| 'uppercase' \| 'lowercase'`                | Transform the text.                 | `-`          |
+| `textDecorationLine`  | `'none' \| 'underline' \| 'line-through' \| 'underline line-through'` | The decoration of the text.         | `-`          |
+| `textDecorationStyle` | `'solid' \| 'double' \| 'dotted' \| 'dashed'`                         | The style of the text decoration.   | `-`          |
+| `textDecorationColor` | `string`                                                              | The color of the text decoration.   | `-`          |
+| `userSelect`          | `'none' \| 'auto' \| 'text' \| 'all' \| 'contain'`                    | The user select behaviour.          | `-`          |
+| `inverted`            | `boolean`                                                             | Invert the text color.              | `false`      |
+
+## Sizes
+
+The `DetailText` component has different sizes to style the text.
+
+<Canvas of={Stories.KitchenSink} />

package/src/components/DetailText/DetailText.props.ts

@@ -0,0 +1,21 @@
+import type { TextProps as RNTextProps, TextStyle } from 'react-native';
+import type { ColorValue } from '../../types';
+
+interface TextProps extends RNTextProps {
+  size?: 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | '4xl';
+  strikeThrough?: boolean;
+  underline?: boolean;
+  truncated?: boolean;
+  italic?: boolean;
+  color?: ColorValue;
+  textTransform?: TextStyle['textTransform'];
+  textAlign?: TextStyle['textAlign'];
+  textAlignVertical?: TextStyle['textAlignVertical'];
+  textDecorationLine?: TextStyle['textDecorationLine'];
+  textDecorationStyle?: TextStyle['textDecorationStyle'];
+  textDecorationColor?: ColorValue;
+  userSelect?: TextStyle['userSelect'];
+  inverted?: boolean;
+}
+
+export default TextProps;

package/src/components/DetailText/DetailText.stories.tsx

@@ -0,0 +1,149 @@
+import { Meta, StoryObj } from '@storybook/react-vite';
+import { DetailText } from '.';
+import { VariantTitle } from '../../../docs/components';
+import { coloursAsArray } from '../../utils';
+import { Box } from '../Box';
+
+// More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export
+const meta = {
+  title: 'Stories / DetailText',
+  component: DetailText,
+  parameters: {
+    // Optional parameter to center 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: {
+    size: {
+      options: ['sm', 'md', 'lg', 'xl', '2xl', '3xl', '4xl'],
+      control: 'select',
+      description: 'The size of the text.',
+    },
+    truncated: {
+      type: 'boolean',
+      control: 'boolean',
+      description: 'Truncate the text.',
+    },
+
+    italic: {
+      type: 'boolean',
+      control: 'boolean',
+      description: 'Italicize the text.',
+    },
+    underline: {
+      type: 'boolean',
+      control: 'boolean',
+      description: 'Underline the text.',
+    },
+    strikeThrough: {
+      type: 'boolean',
+      control: 'boolean',
+      description: 'Strike through the text.',
+    },
+    color: {
+      options: coloursAsArray(),
+      control: 'select',
+      description: 'Color of the text. Use the color name from the theme.',
+    },
+    textDecorationLine: {
+      options: ['none', 'underline', 'line-through'],
+      control: 'select',
+      description: 'Text decoration line.',
+    },
+    textDecorationColor: {
+      options: coloursAsArray(),
+      control: 'select',
+      description: 'Color of the text decoration. Use the color name from the theme.',
+    },
+    textTransform: {
+      options: ['none', 'uppercase', 'lowercase', 'capitalize'],
+      control: 'select',
+      description: 'Transform the text.',
+    },
+    textAlign: {
+      options: ['auto', 'left', 'right', 'center', 'justify'],
+      control: 'select',
+      description: 'Align the text horizontally.',
+    },
+    textDecorationStyle: {
+      options: ['solid', 'double', 'dotted', 'dashed'],
+      control: 'select',
+      description: 'Style of the text decoration.',
+    },
+    textAlignVertical: {
+      options: ['auto', 'top', 'bottom', 'center'],
+      control: 'select',
+      description: 'Align the text vertically.',
+    },
+    userSelect: {
+      options: ['auto', 'none', 'text', 'contain', 'all', 'all-scroll', 'auto', 'unset'],
+      control: 'select',
+      description: 'User select.',
+    },
+  },
+  // 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 some detail text!",
+    size: 'md',
+    truncated: false,
+    italic: false,
+    underline: false,
+    strikeThrough: false,
+    color: undefined,
+    textDecorationColor: 'grey1000',
+  },
+} satisfies Meta<typeof DetailText>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Playground: Story = {};
+
+export const KitchenSink: Story = {
+  render: args => (
+    <Box gap="200">
+      <VariantTitle title="SM">
+        <DetailText {...args} size="sm">
+          Hello there, I'm some detail text!
+        </DetailText>
+      </VariantTitle>
+      <VariantTitle title="MD">
+        <DetailText {...args} size="md">
+          Hello there, I'm some detail text!
+        </DetailText>
+      </VariantTitle>
+      <VariantTitle title="LG">
+        <DetailText {...args} size="lg">
+          Hello there, I'm some detail text!
+        </DetailText>
+      </VariantTitle>
+      <VariantTitle title="XL">
+        <DetailText {...args} size="xl">
+          Hello there, I'm some detail text!
+        </DetailText>
+      </VariantTitle>
+      <VariantTitle title="2XL">
+        <DetailText {...args} size="2xl">
+          Hello there, I'm some detail text!
+        </DetailText>
+      </VariantTitle>
+      <VariantTitle title="3XL">
+        <DetailText {...args} size="3xl">
+          Hello there, I'm some detail text!
+        </DetailText>
+      </VariantTitle>
+      <VariantTitle title="4XL">
+        <DetailText {...args} size="4xl">
+          Hello there, I'm some detail text!
+        </DetailText>
+      </VariantTitle>
+    </Box>
+  ),
+};
+
+export const Underline: Story = {
+  args: {
+    underline: true,
+    children: "Hello there, I'm some underlined detail text!",
+  },
+};

package/src/components/DetailText/DetailText.tsx

@@ -0,0 +1,148 @@
+import { useMemo } from 'react';
+import { Text } from 'react-native';
+import type DetailTextProps from './DetailText.props';
+import { StyleSheet } from 'react-native-unistyles';
+import { useTheme } from '../../hooks';
+import { getFlattenedColorValue } from '../../utils';
+
+const DetailText = ({
+  children,
+  color,
+  size = 'md',
+  truncated,
+  underline,
+  strikeThrough,
+  italic,
+  textTransform,
+  textAlign,
+  textAlignVertical,
+  textDecorationColor,
+  textDecorationLine,
+  textDecorationStyle,
+  userSelect,
+  inverted,
+  ...props
+}: DetailTextProps) => {
+  const { color: themeColor, colorMode } = useTheme();
+  styles.useVariants({
+    size,
+    underline,
+    strikeThrough,
+    italic,
+    inverted,
+  });
+  const colorValue = useMemo(
+    () => getFlattenedColorValue(color, themeColor),
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [color, colorMode]
+  );
+  const decorationColor = useMemo(
+    () => getFlattenedColorValue(textDecorationColor, themeColor),
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [textDecorationColor, colorMode]
+  );
+  return (
+    <Text
+      {...props}
+      {...(truncated
+        ? {
+            numberOfLines: 1,
+            ellipsizeMode: 'tail',
+          }
+        : {})}
+      style={[
+        styles.text,
+        {
+          ...(colorValue && { color: colorValue }),
+          ...(textTransform && { textTransform }),
+          ...(textAlign && { textAlign }),
+          ...(decorationColor && { textDecorationColor: decorationColor }),
+          ...(textDecorationLine && { textDecorationLine }),
+          ...(textDecorationStyle && { textDecorationStyle }),
+          ...(userSelect && { userSelect }),
+          ...(textAlignVertical && { textAlignVertical }),
+        },
+        props.style,
+      ]}
+    >
+      {children}
+    </Text>
+  );
+};
+
+DetailText.displayName = 'DetailText';
+
+const styles = StyleSheet.create(theme => ({
+  text: {
+    color: theme.components.text.color,
+    fontWeight: theme.fontWeight.regular,
+    fontFamily: theme.typography.mobile.detailText.fontFamily,
+    fontStyle: 'normal',
+    variants: {
+      size: {
+        '4xl': {
+          fontSize: theme.typography.mobile.detailText['4xl'].fontSize,
+          lineHeight: theme.typography.mobile.detailText['4xl'].lineHeight,
+          letterSpacing: theme.typography.mobile.detailText['4xl'].letterSpacing,
+        },
+        '3xl': {
+          fontSize: theme.typography.mobile.detailText['3xl'].fontSize,
+          lineHeight: theme.typography.mobile.detailText['3xl'].lineHeight,
+          letterSpacing: theme.typography.mobile.detailText['3xl'].letterSpacing,
+        },
+        '2xl': {
+          fontSize: theme.typography.mobile.detailText['2xl'].fontSize,
+          lineHeight: theme.typography.mobile.detailText['2xl'].lineHeight,
+          letterSpacing: theme.typography.mobile.detailText['2xl'].letterSpacing,
+        },
+        xl: {
+          fontSize: theme.typography.mobile.detailText.xl.fontSize,
+          lineHeight: theme.typography.mobile.detailText.xl.lineHeight,
+          letterSpacing: theme.typography.mobile.detailText.xl.letterSpacing,
+        },
+        lg: {
+          fontSize: theme.typography.mobile.detailText.lg.fontSize,
+          lineHeight: theme.typography.mobile.detailText.lg.lineHeight,
+          letterSpacing: theme.typography.mobile.detailText.lg.letterSpacing,
+        },
+        md: {
+          fontSize: theme.typography.mobile.detailText.md.fontSize,
+          lineHeight: theme.typography.mobile.detailText.md.lineHeight,
+          letterSpacing: theme.typography.mobile.detailText.md.letterSpacing,
+        },
+        sm: {
+          fontSize: theme.typography.mobile.detailText.sm.fontSize,
+          lineHeight: theme.typography.mobile.detailText.sm.lineHeight,
+          letterSpacing: theme.typography.mobile.detailText.sm.letterSpacing,
+        },
+      },
+      bold: {
+        true: {
+          fontWeight: theme.fontWeight.bold,
+        },
+      },
+      underline: {
+        true: {
+          textDecorationLine: 'underline',
+        },
+      },
+      strikeThrough: {
+        true: {
+          textDecorationLine: 'line-through',
+        },
+      },
+      italic: {
+        true: {
+          fontStyle: 'italic',
+        },
+      },
+      inverted: {
+        true: {
+          color: theme.components.text.colorInverted,
+        },
+      },
+    },
+  },
+}));
+
+export default DetailText;

package/src/components/DetailText/index.ts

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

package/src/components/Divider/Divider.docs.mdx

@@ -0,0 +1,64 @@
+import { Meta, Controls, Story, Canvas } from '@storybook/addon-docs/blocks';
+import * as Stories from './Divider.stories';
+import { Divider, BodyText, Center } from '../../';
+import { ViewFigmaButton, BackToTopButton, UsageWrap } from '../../../docs/components';
+
+<Meta title="Components / Divider" />
+
+<BackToTopButton />
+
+<ViewFigmaButton url="https://www.figma.com/design/6NKZXZhFSExXrcbBgc6zTR/Hearth-Components?node-id=1-151" />
+
+# Divider
+
+`Divider` components in `hearth-react-native` enhances visual organisation by creating clear boundaries between sections, improving readability and content grouping. They reinforce the visual hierarchy, making it easier for users to understand relationships between elements.
+
+- [When to use](#when-to-use)
+- [Playground](#playground)
+- [Usage](#usage)
+- [Props](#props)
+
+## When to use
+
+The `Divider` is typically used to create a separation or divide between content or sections on a page.
+
+Dividers can help establish a visual hierarchy on your designs. They can indicate which content is related or grouped together and which content is separate.
+
+## Playground
+
+<Canvas of={Stories.Playground} />
+
+<Controls of={Stories.Playground} />
+
+## Usage
+
+<UsageWrap>
+  <Center>
+    <BodyText>This text is divided</BodyText>
+    <Divider space="sm" />
+    <BodyText>From this text</BodyText>
+  </Center>
+</UsageWrap>
+
+```tsx
+import { Spinner, Center } from '@utilitywarehouse/hearth-react-native';
+
+const MyComponent = () => (
+  <Center>
+    <BodyText>This text is divided</BodyText>
+    <Divider space="sm" />
+    <BodyText>From this text</BodyText>
+  </Center>
+);
+```
+
+## Props
+
+| Property      | Type                                             | Description                                                                                                                                                                                         | Default        |
+| ------------- | ------------------------------------------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------- |
+| `orientation` | `'horizontal' \| 'vertical'`                     | The orientation of the Divider.                                                                                                                                                                     | `'horizontal'` |
+| `color`       | `string`                                         | The color of the spinner.                                                                                                                                                                           | `-`            |
+| `space`       | `'none' \| 'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl'` | The space between the Divider items.                                                                                                                                                                | `none`         |
+| `width`       | `number`                                         | The width of the Divider.                                                                                                                                                                           | `100%`         |
+| `height`      | `number`                                         | The height of the Divider.                                                                                                                                                                          | `100%`         |
+| `flexItem`    | `boolean`                                        | If true, a vertical divider will have the correct height when used in flex container. (By default, a vertical divider will have a calculated height of 0px if it is the child of a flex container.) | false          |

package/src/components/Divider/Divider.figma.tsx

@@ -0,0 +1,20 @@
+//
+// import { Divider } from './';
+// import figma from '@figma/code-connect';
+
+// /**
+//  * -- This file was auto-generated by Code Connect --
+//  * `props` includes a mapping from Figma properties and variants to
+//  * suggested values. You should update this to match the props of your
+//  * code component, and update the `example` function to return the
+//  * code example you'd like to see in Figma
+//  */
+
+// figma.connect(
+//   Divider,
+//   'https://www.figma.com/design/3RY3OvLA88yZksRjOfjQJm/UW-App-UI?node-id=8951-448&t=AlTwUg7LBLngn5z6-4',
+//   {
+//     props: {},
+//     example: () => <Divider />,
+//   }
+// );

package/src/components/Divider/Divider.props.ts

@@ -0,0 +1,13 @@
+import type { DimensionValue, ViewProps } from 'react-native';
+import type { ColorValue } from '../../types';
+
+interface DividerProps extends Omit<ViewProps, 'children'> {
+  color?: ColorValue;
+  space?: 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+  orientation?: 'horizontal' | 'vertical';
+  height?: DimensionValue;
+  width?: DimensionValue;
+  flexItem?: boolean;
+}
+
+export default DividerProps;

package/src/components/Divider/Divider.stories.tsx

@@ -0,0 +1,60 @@
+import { Divider } from '.';
+import { Meta, StoryObj } from '@storybook/react-vite';
+import { Box } from '../Box';
+import { coloursAsArray } from '../../utils';
+
+const meta = {
+  title: 'Stories / Divider',
+  component: Divider,
+  parameters: {
+    layout: 'centered',
+  },
+  argTypes: {
+    orientation: {
+      options: ['horizontal', 'vertical'],
+      control: 'radio',
+      description: 'Orientation of the divider',
+    },
+    color: {
+      options: coloursAsArray(),
+      control: 'select',
+      description: 'Color of the divider',
+    },
+    space: {
+      options: ['none', 'xs', 'sm', 'md', 'lg', 'xl'],
+      control: 'select',
+      description: 'Space between the divider',
+    },
+    flexItem: {
+      control: 'boolean',
+      description:
+        'If true, a vertical divider will have the correct height when used in flex container. (By default, a vertical divider will have a calculated height of 0px if it is the child of a flex container.)',
+    },
+    width: {
+      control: 'number',
+      description: 'Width of the divider',
+    },
+    height: {
+      control: 'number',
+      description: 'Height of the divider',
+    },
+  },
+  args: {
+    orientation: 'horizontal',
+    flexItem: false,
+  },
+} satisfies Meta<typeof Divider>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Playground: Story = {
+  render: args => (
+    <Box
+      minWidth={args.orientation === 'horizontal' ? 200 : 1}
+      minHeight={args.orientation === 'horizontal' ? 1 : 30}
+    >
+      <Divider {...args} />
+    </Box>
+  ),
+};