@utilitywarehouse/hearth-react-native 0.34.4 → 0.35.0

package/{src/components/BodyText/BodyText.docs.mdx → public/llms/components/body-text.md}

@@ -1,14 +1,3 @@
-import { Meta, Canvas, Story, Controls, Primary } from '@storybook/addon-docs/blocks';
-import * as Stories from './BodyText.stories';
-import { Center, Pressable, BodyText, Box } from '../../';
-import { UsageWrap, BackToTopButton, ViewFigmaButton } from '../../../docs/components';
-
-<Meta title="Typography / Body Text" />
-
-<BackToTopButton />
-
-<ViewFigmaButton url="https://www.figma.com/design/9kCLtrMGwNFTscSEIbrXEl/Hearth-Design-Tokens?node-id=43-709" />
-
 # BodyText
 
 The `BodyText` component gives you the ability to create text for your screen. It can be used to display text in different sizes and styles.
@@ -20,23 +9,17 @@ The `BodyText` component gives you the ability to create text for your screen. I
 
 ## Playground
 
-<Canvas of={Stories.Playground} />
-
-<Controls of={Stories.Playground} />
+```tsx
+// Example usage
+<BodyText size="md" weight="regular" textDecorationColor="grey1000">
+  Hello there, I'm some body text!
+</BodyText>
+```
 
 ## Usage
 
-<UsageWrap>
-  <Center>
-    <BodyText>
-      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.
-    </BodyText>
-  </Center>
-</UsageWrap>
-
 ```jsx
+// Example usage
 import { BodyText } from '@utilitywarehouse/hearth-react-native';
 
 const MyComponent = () => (
@@ -71,4 +54,28 @@ const MyComponent = () => (
 
 The `BodyText` component has different sizes to style the text.
 
-<Canvas of={Stories.KitchenSink} />
+```tsx
+// Example usage
+<Box gap="200">
+  <VariantTitle title="SM">
+    <BodyText {...args} size="sm">
+      Hello there, I'm some body text!
+    </BodyText>
+  </VariantTitle>
+  <VariantTitle title="MD">
+    <BodyText {...args} size="md">
+      Hello there, I'm some body text!
+    </BodyText>
+  </VariantTitle>
+  <VariantTitle title="LG">
+    <BodyText {...args} size="lg">
+      Hello there, I'm some body text!
+    </BodyText>
+  </VariantTitle>
+  <VariantTitle title="XL">
+    <BodyText {...args} size="xl">
+      Hello there, I'm some body text!
+    </BodyText>
+  </VariantTitle>
+</Box>
+```

package/{src/components/BottomSheet/BottomSheet.docs.mdx → public/llms/components/bottom-sheet.md}

@@ -1,23 +1,3 @@
-import { Canvas, Controls, Meta, Story } from '@storybook/addon-docs/blocks';
-import {
-  BodyText,
-  BottomSheet,
-  BottomSheetModal,
-  BottomSheetScrollView,
-  BottomSheetView,
-  Box,
-  Button,
-  Center,
-} from '../../';
-import { BackToTopButton, UsageWrap, ViewFigmaButton } from '../../../docs/components';
-import * as Stories from './BottomSheet.stories';
-
-<Meta title="Components / Bottom Sheet" />
-
-<ViewFigmaButton url="https://www.figma.com/design/6NKZXZhFSExXrcbBgc6zTR/Hearth-Components---Tokens?node-id=4084-33370" />
-
-<BackToTopButton />
-
 # Bottom Sheet
 
 The `BottomSheet` component provides a drawer-like interface that slides up from the bottom of the screen. It's commonly used for displaying additional content or actions without navigating away from the current screen.
@@ -36,21 +16,29 @@ The `BottomSheet` component provides a drawer-like interface that slides up from
 
 ## Playground
 
-<Canvas of={Stories.Playground} />
-
-<Controls of={Stories.Playground} />
-
-## Usage
+```tsx
+// Example usage
+<View style={Platform.OS === 'web' ? { width: 400, height: 400 } : {}}>
+  <ViewWrap>
+    <Button onPress={handleOpenPress}>Open Bottom Sheet</Button>
+
+    <BottomSheet ref={bottomSheetRef} {...args}>
+      <BottomSheetView>
+        <Box gap="200">
+          <BodyText>This is a bottom sheet with content.</BodyText>
+          <BodyText>You can swipe it up and down to close.</BodyText>
+          <Button onPress={() => bottomSheetRef.current?.close()}>Close Bottom Sheet</Button>
+        </Box>
+      </BottomSheetView>
+    </BottomSheet>
+  </ViewWrap>
+</View>
+```
 
 ### Basic Usage
 
-<UsageWrap>
-  <Center>
-    <Button onPress={() => {}}>Open Bottom Sheet</Button>
-  </Center>
-</UsageWrap>
-
 ```tsx
+// Example usage
 import { useRef, useCallback } from 'react';
 import {
   BottomSheetModal,
@@ -107,13 +95,12 @@ The BottomSheet component is built on top of [react-native-bottom-sheet](https:/
 
 For a comprehensive list of props, refer to the [official documentation](https://gorhom.github.io/react-native-bottom-sheet/props).
 
-## Components
-
 ### `BottomSheetModal`
 
 The `BottomSheetModal` component is the recommended way to use bottom sheets in most applications. It appears over the current content rather than being rendered inline.
 
 ```tsx
+// Example usage
 import { BottomSheetModal } from '@utilitywarehouse/hearth-react-native';
 
 // See usage example above
@@ -122,6 +109,7 @@ import { BottomSheetModal } from '@utilitywarehouse/hearth-react-native';
 **Important:** When using `BottomSheetModal`, you need to wrap your app with `BottomSheetModalProvider`:
 
 ```tsx
+// Example usage
 import { BottomSheetModalProvider } from '@utilitywarehouse/hearth-react-native';
 
 const App = () => {
@@ -132,6 +120,7 @@ const App = () => {
 `BottomSheetModalProvider` adds Hearth's bottom-sheet safe-area spacing by default. If your app already handles safe-area padding, you can opt out and avoid double spacing:
 
 ```tsx
+// Example usage
 import { BottomSheetModalProvider } from '@utilitywarehouse/hearth-react-native';
 
 const App = () => {
@@ -148,6 +137,7 @@ const App = () => {
 For scrollable content within a bottom sheet, use the `BottomSheetScrollView` component instead of the standard ScrollView:
 
 ```tsx
+// Example usage
 import {
   BottomSheetModal,
   BottomSheetScrollView,
@@ -176,6 +166,7 @@ const MyComponent = () => {
 As mentioned above, when using `BottomSheetModal`, you need to wrap your app with `BottomSheetModalProvider`:
 
 ```tsx
+// Example usage
 import { BottomSheetModalProvider } from '@utilitywarehouse/hearth-react-native';
 
 const App = () => {
@@ -194,6 +185,7 @@ Use the `useSafeAreaInsets` prop to control whether Hearth applies bottom-sheet
 When using the `Input` component inside a `BottomSheet` or `BottomSheetModal`, you need to pass the `inBottomSheet` prop to ensure proper behavior with the keyboard and focus management.
 
 ```tsx
+// Example usage
 import { Input } from '@utilitywarehouse/hearth-react-native';
 
 const MyComponent = () => {

package/{src/components/Box/Box.docs.mdx → public/llms/components/box.md}

@@ -1,13 +1,3 @@
-import { Meta, Canvas, Story, Controls, Primary } from '@storybook/addon-docs/blocks';
-import * as Stories from './Box.stories';
-import { Center, Pressable, Box, BodyText } from '../..';
-import { UsageWrap, BackToTopButton, ViewFigmaButton } from '../../../docs/components';
-import { color } from '@utilitywarehouse/hearth-tokens';
-
-<Meta title="Primitives / Box" />
-
-<BackToTopButton />
-
 # Box
 
 When you need to center-align content, the Center component comes in handy. It is a layout component that can be used with other components to create complex layouts and positioning.
@@ -18,21 +8,17 @@ When you need to center-align content, the Center component comes in handy. It i
 
 ## Playground
 
-<Canvas of={Stories.Playground} />
-
-<Controls of={Stories.Playground} />
+```tsx
+// Example usage
+<Box {...args}>
+  <BodyText>{args.children}</BodyText>
+</Box>
+```
 
 ## Usage
 
-<UsageWrap>
-  <Center>
-    <Box backgroundColor={color.green[400]} width={300} height={200} padding="200">
-      <BodyText color="inverted">Box.</BodyText>
-    </Box>
-  </Center>
-</UsageWrap>
-
 ```jsx
+// Example usage
 import { Center, BodyText } from '@utilitywarehouse/hearth-react-native';
 
 const MyComponent = () => (

package/{src/components/Button/Button.docs.mdx → public/llms/components/button.md}

@@ -1,26 +1,3 @@
-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,
-  Card,
-  Center,
-  DetailText,
-  Flex,
-} from '../../';
-import { BackToTopButton, UsageWrap, ViewFigmaButton } from '../../../docs/components';
-import * as Stories from './Button.stories';
-
-<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.
@@ -41,19 +18,15 @@ The `Button` component is used to trigger an action or event, such as submitting
 
 ## Playground
 
-<Canvas of={Stories.Playground} />
-
-<Controls of={Stories.Playground} />
+```tsx
+// Example usage
+<Button {...args} icon={icon} />
+```
 
 ## Usage
 
-<UsageWrap>
-  <Center>
-    <Button colorScheme="affirmative" variant="solid" children="Button" />
-  </Center>
-</UsageWrap>
-
 ```tsx
+// Example usage
 import { Button } from '@utilitywarehouse/hearth-react-native';
 
 const MyComponent = () => {
@@ -86,22 +59,119 @@ const MyComponent = () => {
 
 ## Variants
 
-<Canvas of={Stories.KitchenSink} />
+```tsx
+// Example usage
+<Flex direction="row" spacing="lg" wrap="wrap">
+  {schemes.map(scheme => (
+    <Flex direction="column" spacing="lg" key={scheme}>
+      {variants
+        .filter(variant => {
+          if (inverted) {
+            if (scheme === 'highlight') {
+              return variant === 'emphasis' || variant === 'solid';
+            }
+            if (scheme === 'functional') {
+              return variant === 'outline' || variant === 'ghost';
+            } else return false;
+          }
+          if (scheme === 'highlight') {
+            return variant === 'emphasis' || variant === 'solid';
+          }
+          if (scheme === 'functional') {
+            return variant === 'outline' || variant === 'ghost';
+          } else {
+            return variant === 'solid' || variant === 'ghost' || variant === 'outline';
+          }
+        })
+        .map(variant => (
+          <Box key={variant} mb="100">
+            <Box mb="100">
+              <DetailText size="lg" inverted={inverted}>
+                {scheme} - {variant}
+              </DetailText>
+            </Box>
+            <Flex direction="column" spacing="lg">
+              <VariantTitle title="Default" invert={inverted}>
+                {/* @ts-expect-error - story loop types don't match */}
+                <Button
+                  text={text}
+                  variant={variant}
+                  colorScheme={scheme}
+                  size={size}
+                  inverted={inverted}
+                />
+              </VariantTitle>
+              <VariantTitle title="Pressed" invert={inverted}>
+                {/* @ts-expect-error - story loop types don't match */}
+                <Button
+                  text={text}
+                  pressed
+                  variant={variant}
+                  colorScheme={scheme}
+                  size={size}
+                  inverted={inverted}
+                />
+              </VariantTitle>
+              <VariantTitle title="Disabled" invert={inverted}>
+                {/* @ts-expect-error - story loop types don't match */}
+                <Button
+                  text={text}
+                  disabled
+                  variant={variant}
+                  colorScheme={scheme}
+                  size={size}
+                  inverted={inverted}
+                />
+              </VariantTitle>
+              <VariantTitle title="Icon Left" invert={inverted}>
+                {/* @ts-expect-error - story loop types don't match */}
+                <Button
+                  text={text}
+                  icon={AddSmallIcon}
+                  variant={variant}
+                  colorScheme={scheme}
+                  size={size}
+                  inverted={inverted}
+                />
+              </VariantTitle>
+              <VariantTitle title="Icon Left" invert={inverted}>
+                {/* @ts-expect-error - story loop types don't match */}
+                <Button
+                  text={text}
+                  icon={ChevronRightSmallIcon}
+                  iconPosition="right"
+                  variant={variant}
+                  colorScheme={scheme}
+                  size={size}
+                  inverted={inverted}
+                />
+              </VariantTitle>
+              <VariantTitle title="Loading" invert={inverted}>
+                {/* @ts-expect-error - story loop types don't match */}
+                <Button
+                  text={text}
+                  loading
+                  variant={variant}
+                  colorScheme={scheme}
+                  disabled
+                  size={size}
+                  inverted={inverted}
+                />
+              </VariantTitle>
+            </Flex>
+          </Box>
+        ))}
+    </Flex>
+  ))}
+</Flex>
+```
 
 ## Advanced Usage
 
 For more advanced usage, you can use the `ButtonText`, `ButtonIcon` and `ButtonSpinner` components to customise the button.
 
-<UsageWrap>
-  <Center>
-    <Button colorScheme="highlight">
-      <ButtonIcon as={AddSmallIcon} />
-      <ButtonText>Button</ButtonText>
-    </Button>
-  </Center>
-</UsageWrap>
-
 ```tsx
+// Example usage
 import {
   Button,
   ButtonIcon,
@@ -138,23 +208,8 @@ The `Button` component is composed of the following components under the hood an
 
 The `ButtonGroup` component is used to group multiple buttons together.
 
-<UsageWrap>
-  <Center>
-    <ButtonGroup flexDirection="column">
-      <Button colorScheme="highlight">
-        <ButtonText>Button 1</ButtonText>
-      </Button>
-      <Button colorScheme="functional" variant="outline">
-        <ButtonText>Button 2</ButtonText>
-      </Button>
-      <Button colorScheme="destructive" variant="ghost">
-        <ButtonText>Button 3</ButtonText>
-      </Button>
-    </ButtonGroup>
-  </Center>
-</UsageWrap>
-
 ```tsx
+// Example usage
 import { ButtonGroup, Button } from '@utilitywarehouse/hearth-react-native';
 
 const MyComponent = () => {
@@ -190,16 +245,8 @@ 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="highlight">
-      <ButtonIcon as={AddSmallIcon} />
-      <ButtonText>Button</ButtonText>
-    </Button>
-  </Center>
-</UsageWrap>
-
 ```tsx
+// Example usage
 import { Button, ButtonIcon, ButtonText } from '@utilitywarehouse/hearth-react-native';
 import { AddSmallIcon } from '@utilitywarehouse/hearth-react-native-icons';
 
@@ -220,15 +267,8 @@ 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="highlight">
-      <ButtonText>Button</ButtonText>
-    </Button>
-  </Center>
-</UsageWrap>
-
 ```tsx
+// Example usage
 import { Button, ButtonText } from '@utilitywarehouse/hearth-react-native';
 
 const MyComponent = () => {
@@ -250,16 +290,8 @@ The `ButtonSpinner` component is used to add a spinner to the button and show lo
 **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="highlight" disabled>
-      <ButtonSpinner />
-      <ButtonText>Button</ButtonText>
-    </Button>
-  </Center>
-</UsageWrap>
-
 ```tsx
+// Example usage
 import { Button, ButtonSpinner, ButtonText } from '@utilitywarehouse/hearth-react-native';
 
 const MyComponent = ({ loading }) => {
@@ -272,22 +304,13 @@ const MyComponent = ({ loading }) => {
 };
 ```
 
-## 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="functional" size="sm" paddingNone>
-      {`No Padding`}
-    </Button>
-  </Center>
-</UsageWrap>
-
 ```tsx
+// Example usage
 import { Button } from '@utilitywarehouse/hearth-react-native';
 
 const MyComponent = () => {
@@ -303,22 +326,8 @@ const MyComponent = () => {
 
 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
+// Example usage
 <Flex align="stretch">
   <Button>Full width button</Button>
 </Flex>