@utilitywarehouse/hearth-react-native 0.34.4 → 0.35.0

package/{src/components/List/List.docs.mdx → public/llms/components/list.md}

@@ -1,45 +1,3 @@
-import { Canvas, Controls, Meta, Story } from '@storybook/addon-docs/blocks';
-import {
-  BillMediumIcon,
-  ChevronRightSmallIcon,
-  ElectricityMediumIcon,
-  GasMediumIcon,
-  HomeMediumIcon,
-  PaymentMediumIcon,
-  UserMediumIcon,
-} from '@utilitywarehouse/hearth-react-native-icons';
-import {
-  Badge,
-  BadgeText,
-  BodyText,
-  Box,
-  FlatList,
-  Image,
-  Link,
-  List,
-  ListAction,
-  ListItem,
-  ListItemContent,
-  ListItemHeading,
-  ListItemHelperText,
-  ListItemIcon,
-  ListItemLeadingContent,
-  ListItemTrailingContent,
-  ListItemTrailingIcon,
-  SectionHeader,
-  Switch,
-} from '../../';
-import { BackToTopButton, BadgeList, UsageWrap, ViewFigmaButton } from '../../../docs/components';
-import * as Stories from './List.stories';
-
-import StorybookLink from '../../../../../shared/storybook/StorybookLink';
-
-<Meta title="Components / List" />
-
-<ViewFigmaButton url="https://www.figma.com/design/6NKZXZhFSExXrcbBgc6zTR/Hearth-Components-%26-Tokens?node-id=1-163" />
-
-<BackToTopButton />
-
 # List
 
 The List component serves as the primary wrapper for List Items and List Heading components.
@@ -66,21 +24,19 @@ List item is the main building block of list. Each item has its own set of prope
 
 ## Playground
 
-<Canvas of={Stories.Playground} />
-
-<Controls of={Stories.Playground} />
+```tsx
+// Example usage
+<List {...args} container={container}>
+  {Array.from({ length: 4 }).map((_, index) => (
+    <ListItem key={index} heading="List item text" helperText="Supporting text" />
+  ))}
+</List>
+```
 
 ## Usage
 
-<UsageWrap>
-  <List heading="Heading" helperText="Supporting text">
-    <ListItem heading="List Item 1" onPress={() => console.log('item pressed')} />
-    <ListItem heading="List Item 2" onPress={() => console.log('item pressed')} />
-    <ListItem heading="List Item 3" onPress={() => console.log('item pressed')} />
-  </List>
-</UsageWrap>
-
 ```tsx
+// Example usage
 import { List, ListItem } from '@utilitywarehouse/hearth-react-native';
 
 const MyComponent = () => (
@@ -92,8 +48,6 @@ const MyComponent = () => (
 );
 ```
 
-## Props
-
 ### `List`
 
 | Name                  | Type                                                                                              | Default  | Description                                                  |
@@ -136,25 +90,19 @@ are ignored, so conditional list items will not affect which item loses the top
 | disabled | `boolean`    | `false` | Whether to disable the list action item.                               |
 | loading  | `boolean`    | `false` | Whether to show the list action in loading state.                      |
 
-#### - `ListItemLeadingContent`
-
 #### - `ListItemIcon`
 
 | Name | Type            | Default | Description                                     |
 | ---- | --------------- | ------- | ----------------------------------------------- |
 | as   | `ComponentType` |         | The icon component to display in the list item. |
 
-#### - `ListItemContent`
-
 #### - `ListItemHeading`
 
-Has all props of the <StorybookLink to="typography-body-text">`BodyText` component</StorybookLink>.
+Has all props of the `BodyText` component.
 
 #### - `ListItemHelperText`
 
-Has all props of the <StorybookLink to="typography-body-text">`BodyText` component</StorybookLink>.
-
-#### - `ListItemTrailingContent`
+Has all props of the `BodyText` component.
 
 #### - `ListItemTrailingIcon`
 
@@ -162,17 +110,35 @@ Has all props of the <StorybookLink to="typography-body-text">`BodyText` compone
 | ---- | --------------- | ------- | ----------------------------------------------- |
 | as   | `ComponentType` |         | The icon component to display in the list item. |
 
-## Examples
-
 ### `ListItem` with Container
 
 Thie `List` has an inbuilt `Card` component to wrap the list items and setting the `container` prop to one if `subtleWhite`,
 `emphasisWhite`, `subtleWarmWhite`, or `emphasisWarmWhite` will apply the respective background color and border colour to
 the `Card` and child `ListItem` components.
 
-<Canvas of={Stories.WithContainer} />
+```tsx
+// Example usage
+<List container="subtleWhite">
+  <ListItem
+    leadingContent={<BillMediumIcon />}
+    heading="Bills"
+    onPress={() => console.log('Bills pressed')}
+  />
+  <ListItem
+    leadingContent={<PaymentMediumIcon />}
+    heading="Payments"
+    onPress={() => console.log('Payments pressed')}
+  />
+  <ListItem
+    leadingContent={<HomeMediumIcon />}
+    heading="Moving Home"
+    onPress={() => console.log('Moving Home pressed')}
+  />
+</List>
+```
 
 ```tsx
+// Example usage
 import { List, ListItem, Card } from '@utilitywarehouse/hearth-react-native';
 import {
   BillMediumIcon,
@@ -206,9 +172,32 @@ const MyComponent = () => (
 You can use the `Badge` component to display additional information in the list item. You can achieve this by using the List Item's
 parts like `ListItemLeadingContent`, `ListItemContent`, and `ListItemTrailingContent` components.
 
-<Canvas of={Stories.WithBadge} />
+```tsx
+// Example usage
+<List>
+  <ListItem
+    heading="Electricity"
+    helperText="Last reading 23/03/24"
+    onPress={() => console.log('Electricity pressed')}
+    leadingContent={
+      <IconContainer icon={ElectricityMediumIcon} size="md" variant="emphasis" color="energy" />
+    }
+    badge={<Badge text="Text" />}
+  />
+  <ListItem
+    heading="Gas"
+    helperText="Last reading 23/03/24"
+    onPress={() => console.log('Gas pressed')}
+    leadingContent={
+      <IconContainer icon={GasMediumIcon} size="md" variant="emphasis" color="energy" />
+    }
+    badge={<Badge text="Smart Meter" />}
+  />
+</List>
+```
 
 ```tsx
+// Example usage
 import {
   List,
   ListItem,
@@ -252,9 +241,26 @@ export default BadgeList;
 
 You can use a `Switch` component as the trailing content of a `ListItem` to create toggleable list items.
 
-<Canvas of={Stories.WithSwitch} />
+```tsx
+// Example usage
+<List container="subtleWhite">
+  <ListItem
+    heading="Enable notifications"
+    helperText="Receive updates and alerts"
+    onPress={() => console.log('Notifications pressed')}
+    trailingContent={<Switch size="small" value={notifications} onValueChange={setNotifications} />}
+  />
+  <ListItem
+    heading="Dark mode"
+    helperText="Use dark theme throughout the app"
+    onPress={() => console.log('Dark mode pressed')}
+    trailingContent={<Switch size="small" value={darkMode} onValueChange={setDarkMode} />}
+  />
+</List>
+```
 
 ```tsx
+// Example usage
 import { List, ListItem, Switch } from '@utilitywarehouse/hearth-react-native';
 
 const MyComponent = () => (
@@ -283,9 +289,46 @@ const MyComponent = () => (
 
 You can use the `SectionHeader` component to add a heading and supporting text to your list.
 
-<Canvas of={Stories.WithSectionHeader} />
+```tsx
+// Example usage
+<List
+  heading="Your account"
+  helperText="Tap the links below to view your account"
+  headerTrailingContent={<Link onPress={() => console.log('View all pressed')}>View all</Link>}
+>
+  <ListItem
+    heading="Bills"
+    helperText="View your bills"
+    leadingContent={<ListItemIcon as={BillMediumIcon} />}
+    trailingContent={<ListItemTrailingIcon as={ChevronRightSmallIcon} />}
+    onPress={() => console.log('Bills pressed')}
+  />
+  <ListItem
+    heading="Payments"
+    helperText="Make a payment"
+    leadingContent={<ListItemIcon as={PaymentMediumIcon} />}
+    trailingContent={<ListItemTrailingIcon as={ChevronRightSmallIcon} />}
+    onPress={() => console.log('Payments pressed')}
+  />
+  <ListItem
+    heading="Moving home"
+    helperText="Tell us if you're moving"
+    leadingContent={<ListItemIcon as={HomeMediumIcon} />}
+    trailingContent={<ListItemTrailingIcon as={ChevronRightSmallIcon} />}
+    onPress={() => console.log('Moving home pressed')}
+  />
+  <ListItem
+    heading="Refer a friend"
+    helperText="Get rewarded with a friend"
+    leadingContent={<ListItemIcon as={UserMediumIcon} />}
+    trailingContent={<ListItemTrailingIcon as={ChevronRightSmallIcon} />}
+    onPress={() => console.log('Refer a friend pressed')}
+  />
+</List>
+```
 
 ```tsx
+// Example usage
 import {
   List,
   ListItem,
@@ -342,9 +385,27 @@ const MyComponent = ({ navigate }) => (
 
 You can use the `ListAction` component to add actionable items to your list.
 
-<Canvas of={Stories.WithListAction} />
+```tsx
+// Example usage
+<List container="subtleWarmWhite">
+  <ListItem
+    heading="Upgrade your plan this is really long text to test wrapping"
+    truncateHeading={true}
+    helperText="Get more features with a premium plan"
+    onPress={() => console.log('Upgrade pressed')}
+  />
+  <ListItem
+    heading="Manage payment methods"
+    helperText="Update your credit or debit cards"
+    onPress={() => console.log('Manage pressed')}
+    accessibilityRole="link"
+  />
+  <ListAction heading="Contact support" onPress={() => console.log('Contact pressed')} />
+</List>
+```
 
 ```tsx
+// Example usage
 import {
   List,
   ListItem,
@@ -373,9 +434,35 @@ const MyComponent = () => (
 
 You can use the `ListItem` component to display transaction details.
 
-<Canvas of={Stories.WithTransactions} />
+```tsx
+// Example usage
+<List container="subtleWhite">
+  <ListItem
+    heading="Coffee Shop"
+    helperText="Apr 5, 2024"
+    trailingContent={
+      <>
+        <BodyText>-£100.00</BodyText>
+        <BodyText color="brand">+£1.00 CB</BodyText>
+      </>
+    }
+    onPress={() => console.log('Transaction pressed')}
+  />
+  <ListItem
+    heading="Top up"
+    helperText="Apr 4, 2024"
+    trailingContent={
+      <>
+        <BodyText color="affirmative">+£100.00</BodyText>
+      </>
+    }
+    onPress={() => console.log('Transaction pressed')}
+  />
+</List>
+```
 
 ```tsx
+// Example usage
 import { List, ListItem, BodyText } from '@utilitywarehouse/hearth-react-native';
 const MyComponent = () => (
   <List container="subtleWhite">
@@ -408,9 +495,24 @@ const MyComponent = () => (
 
 You can use the `numericValue` prop to display a numeric value on the right side of the `ListItem`.
 
-<Canvas of={Stories.WithNumericValue} />
+```tsx
+// Example usage
+<List container="subtleWhite">
+  <ListItem
+    heading="Steps today"
+    numericValue="8,542"
+    onPress={() => console.log('Steps pressed')}
+  />
+  <ListItem
+    heading="Calories burned"
+    numericValue="2,300 kcal"
+    onPress={() => console.log('Calories pressed')}
+  />
+</List>
+```
 
 ```tsx
+// Example usage
 import { List, ListItem } from '@utilitywarehouse/hearth-react-native';
 
 const MyComponent = () => (
@@ -433,9 +535,24 @@ const MyComponent = () => (
 
 You can use a `Link` component as the trailing content of a `ListItem` to create list items with links.
 
-<Canvas of={Stories.WithLink} />
+```tsx
+// Example usage
+<List container="subtleWhite">
+  <ListItem
+    heading="Terms of Service"
+    onPress={() => console.log('Terms pressed')}
+    trailingContent={<Link onPress={() => console.log('View link pressed')}>View</Link>}
+  />
+  <ListItem
+    heading="Privacy Policy"
+    onPress={() => console.log('Privacy pressed')}
+    trailingContent={<Link onPress={() => console.log('View link pressed')}>View</Link>}
+  />
+</List>
+```
 
 ```tsx
+// Example usage
 import { List, ListItem, Link } from '@utilitywarehouse/hearth-react-native';
 
 const MyComponent = () => (
@@ -459,6 +576,7 @@ const MyComponent = () => (
 You can use the `FlatList` component to render a large list of items efficiently.
 
 ```tsx
+// Example usage
 import { FlatList } from 'react-native';
 import { List, ListItem } from '@utilitywarehouse/hearth-react-native';
 
@@ -483,61 +601,8 @@ const MyComponent = () => (
 
 If you need to use the `<List>` component in a more advanced way, you can use the parts of the component directly.
 
-<UsageWrap>
-  <List>
-    <SectionHeader heading="Your account" helperText="Tap the links below to view your account" />
-    <ListItem onPress={() => console.log('pressed')}>
-      <ListItemLeadingContent>
-        <ListItemIcon as={BillMediumIcon} />
-      </ListItemLeadingContent>
-      <ListItemContent>
-        <ListItemHeading>Bills</ListItemHeading>
-        <ListItemHelperText>View your bills</ListItemHelperText>
-      </ListItemContent>
-      <ListItemTrailingContent>
-        <ListItemTrailingIcon as={ChevronRightSmallIcon} />
-      </ListItemTrailingContent>
-    </ListItem>
-    <ListItem onPress={() => console.log('pressed')}>
-      <ListItemLeadingContent>
-        <ListItemIcon as={PaymentMediumIcon} />
-      </ListItemLeadingContent>
-      <ListItemContent>
-        <ListItemHeading>Payments</ListItemHeading>
-        <ListItemHelperText>Make a payment</ListItemHelperText>
-      </ListItemContent>
-      <ListItemTrailingContent>
-        <ListItemTrailingIcon as={ChevronRightSmallIcon} />
-      </ListItemTrailingContent>
-    </ListItem>
-    <ListItem onPress={() => console.log('pressed')}>
-      <ListItemLeadingContent>
-        <ListItemIcon as={HomeMediumIcon} />
-      </ListItemLeadingContent>
-      <ListItemContent>
-        <ListItemHeading>Moving home</ListItemHeading>
-        <ListItemHelperText>Tell us if your moving</ListItemHelperText>
-      </ListItemContent>
-      <ListItemTrailingContent>
-        <ListItemTrailingIcon as={ChevronRightSmallIcon} />
-      </ListItemTrailingContent>
-    </ListItem>
-    <ListItem onPress={() => console.log('pressed')}>
-      <ListItemLeadingContent>
-        <ListItemIcon as={UserMediumIcon} />
-      </ListItemLeadingContent>
-      <ListItemContent>
-        <ListItemHeading>Refer a friend</ListItemHeading>
-        <ListItemHelperText>Get rewarded with a friend</ListItemHelperText>
-      </ListItemContent>
-      <ListItemTrailingContent>
-        <ListItemTrailingIcon as={ChevronRightSmallIcon} />
-      </ListItemTrailingContent>
-    </ListItem>
-  </List>
-</UsageWrap>
-
 ```tsx
+// Example usage
 import {
   List,
   SectionHeader,

package/{src/components/Menu/Menu.docs.mdx → public/llms/components/menu.md}

@@ -1,14 +1,3 @@
-import { Canvas, Controls, Meta, Story } from '@storybook/addon-docs/blocks';
-import StorybookLink from '../../../../../shared/storybook/StorybookLink';
-import { BackToTopButton, ViewFigmaButton } from '../../../docs/components';
-import * as Stories from './Menu.stories';
-
-<Meta title="Components / Menu" />
-
-<ViewFigmaButton url="https://www.figma.com/design/6NKZXZhFSExXrcbBgc6zTR/Hearth-Components---Tokens" />
-
-<BackToTopButton />
-
 # Menu
 
 The `Menu` component provides a bottom sheet modal with a list of actions. It's perfect for contextual menus, action sheets, and option lists. The component uses `BottomSheetModal` under the hood and includes `MenuItem` components that can display icons, text, and support different color schemes.
@@ -28,15 +17,37 @@ The `Menu` component provides a bottom sheet modal with a list of actions. It's
 
 ## Playground
 
-<Canvas of={Stories.Playground} />
-
-<Controls of={Stories.Playground} />
-
-## Usage
+```tsx
+// Example usage
+<View style={Platform.OS === 'web' ? { width: 400, height: 400 } : { flex: 1 }}>
+  <ViewWrap>
+    <MenuTrigger onPress={openMenu}>
+      <Button>Open Menu</Button>
+    </MenuTrigger>
+
+    <Menu ref={menuRef} {...args}>
+      <MenuItem icon={EditSmallIcon} text="Edit" onPress={() => console.log('Edit pressed')} />
+      <MenuItem icon={ShareSmallIcon} text="Share" onPress={() => console.log('Share pressed')} />
+      <MenuItem
+        icon={DownloadSmallIcon}
+        text="Download"
+        onPress={() => console.log('Download pressed')}
+      />
+      <MenuItem
+        icon={TrashSmallIcon}
+        text="Delete"
+        colorScheme="destructive"
+        onPress={() => console.log('Delete pressed')}
+      />
+    </Menu>
+  </ViewWrap>
+</View>
+```
 
 ### Basic Usage
 
 ```tsx
+// Example usage
 import { useRef } from 'react';
 import { Menu, MenuItem, MenuTrigger } from '@utilitywarehouse/hearth-react-native';
 import { EditSmallIcon, TrashSmallIcon } from '@utilitywarehouse/hearth-react-native-icons';
@@ -64,8 +75,6 @@ const MyComponent = () => {
 };
 ```
 
-## Props
-
 ### Menu
 
 | Prop       | Type        | Default | Description                                   |
@@ -75,7 +84,7 @@ const MyComponent = () => {
 
 The rest of the props are passed down to the underlying `BottomSheetModal` component, so you can use any of its
 props for additional configuration (e.g. `snapPoints`, `backgroundStyle`, etc.).
-See the <StorybookLink to="components-bottomsheet">`BottomSheetModal` documentation</StorybookLink> for more details.
+See the `BottomSheetModal` documentation for more details.
 
 ### MenuItem
 
@@ -95,8 +104,6 @@ See the <StorybookLink to="components-bottomsheet">`BottomSheetModal` documentat
 | `children` | `ReactElement` | The child element that triggers the menu (must be a single element) |
 | `onPress`  | `() => void`   | Function that opens the menu                                        |
 
-## Features
-
 ### Icon Positioning
 
 Icons can be positioned on either the left or right side of the menu item text using the `iconPosition` prop.
@@ -116,43 +123,59 @@ Menu items can be disabled using the `disabled` prop, which applies reduced opac
 
 Menu items automatically close the menu when pressed, making it easy to handle actions without manual menu dismissal.
 
-## Examples
-
 ### Basic Menu
 
 A simple menu with icon-based actions:
 
-<Canvas of={Stories.BasicMenu} />
+```tsx
+// Example usage
+<Menu heading="Menu Options" />
+```
 
 ### With Destructive Action
 
 Menu with a destructive action styled differently:
 
-<Canvas of={Stories.WithDestructiveAction} />
+```tsx
+// Example usage
+<Menu heading="Menu Options" />
+```
 
 ### Icon on Right
 
 Menu items with icons positioned on the right side:
 
-<Canvas of={Stories.IconOnRight} />
+```tsx
+// Example usage
+<Menu heading="Menu Options" />
+```
 
 ### Without Icons
 
 Simple text-only menu items:
 
-<Canvas of={Stories.WithoutIcons} />
+```tsx
+// Example usage
+<Menu heading="Menu Options" />
+```
 
 ### With Disabled Items
 
 Menu with some items disabled:
 
-<Canvas of={Stories.WithDisabledItems} />
+```tsx
+// Example usage
+<Menu heading="Menu Options" />
+```
 
 ### Without Heading
 
 Menu without a heading section:
 
-<Canvas of={Stories.WithoutHeading} />
+```tsx
+// Example usage
+<Menu heading="Menu Options" />
+```
 
 ## Accessibility