@utilitywarehouse/hearth-react-native 0.34.5 → 0.35.0

package/{docs/dark-mode-best-practice.mdx → public/llms/docs/dark-mode-best-practice.md}

@@ -1,17 +1,3 @@
-import { Meta } from '@storybook/addon-docs/blocks';
-import { SearchMediumIcon } from '@utilitywarehouse/hearth-react-native-icons';
-import SceneBroadbandDark from '@utilitywarehouse/hearth-svg-assets/lib/scene-broadband-dark.svg';
-import SceneBroadbandLight from '@utilitywarehouse/hearth-svg-assets/lib/scene-broadband-light.svg';
-import SpotPiggyBankDark from '@utilitywarehouse/hearth-svg-assets/lib/spot-piggy-bank-dark.svg';
-import SpotPiggyBankLight from '@utilitywarehouse/hearth-svg-assets/lib/spot-piggy-bank-light.svg';
-import { ScopedTheme } from 'react-native-unistyles';
-import StorybookLink from '../../../shared/storybook/StorybookLink';
-import { Alert, BodyText, Box, Center, Flex, Heading, Icon } from '../src';
-import { BackToTopButton, NextPrevPage, UsageWrap } from './components';
-
-<Meta title="Guides / Dark Mode Best Practice" />
-<BackToTopButton />
-
 # Dark Mode Best Practice
 
 When designing for dark mode in Hearth React Native, it's important to ensure that your UI remains visually appealing and accessible. Here are some best practices to follow:
@@ -26,9 +12,6 @@ When designing for dark mode in Hearth React Native, it's important to ensure th
 - [`ThemedImage` component](#themedimage-component)
 
 <br />
-<Box my="400">
-  <Alert text="By default, all components adapt to the current themed colour mode. This guide will help you understand how to work with and easily support dark mode in your apps using Hearth React Native." />
-</Box>
 <br />
 <br />
 
@@ -38,6 +21,7 @@ By default Hearth React Native theme is set to light mode. To enable dark mode,
 This will automatically apply the dark mode color palette and styles across your app.
 
 ```tsx
+// Example usage
 import { useEffect } from 'react';
 import { Appearance } from 'react-native';
 import { useColorMode } from '@utilitywarehouse/hearth-react-native';
@@ -64,6 +48,7 @@ const App = () => {
 You can also use the Unistyles runtime to set the theme outside of React components, [read more here](https://www.unistyl.es/v3/guides/theming/#change-theme):
 
 ```tsx
+// Example usage
 import { UnistylesRuntime } from 'react-native-unistyles';
 
 const toggleTheme = () => {
@@ -80,6 +65,7 @@ automatically adapt to both light and dark modes without needing to write custom
 To use the semantic colours, you can access them from the theme object in your styles:
 
 ```tsx
+// Example usage
 import { StyleSheet } from '@utilitywarehouse/hearth-react-native';
 
 const styles = StyleSheet.create(theme => ({
@@ -91,28 +77,8 @@ const styles = StyleSheet.create(theme => ({
 
 You can also use the `useTheme` hook to access the theme colours directly in your components:
 
-<UsageWrap>
-  <Center>
-    <Flex direction="row" spacing="lg">
-      <ScopedTheme name="dark">
-        <Box backgroundColor="primary" p="400">
-          <Center>
-            <BodyText>This text adapts to dark mode!</BodyText>
-          </Center>
-        </Box>
-      </ScopedTheme>
-      <ScopedTheme name="light">
-        <Box backgroundColor="primary" p="400">
-          <Center>
-            <BodyText>This text adapts to light mode!</BodyText>
-          </Center>
-        </Box>
-      </ScopedTheme>
-    </Flex>
-  </Center>
-</UsageWrap>
-
 ```tsx
+// Example usage
 import { useTheme } from '@utilitywarehouse/hearth-react-native';
 
 const MyComponent = () => {
@@ -122,7 +88,7 @@ const MyComponent = () => {
 };
 ```
 
-To learn more about the available colours in the Hearth theme, check out the <StorybookLink to="theme-tokens">theme tokens documentation</StorybookLink>.
+To learn more about the available colours in the Hearth theme, check out the theme tokens documentation.
 
 ## Use Semantic Utility Props
 
@@ -131,48 +97,8 @@ These props are designed to work with the theme and will automatically adjust th
 
 For example, instead of setting a background colour directly, you can use the `backgroundColor` or, for text, the `color` prop with a semantic colour value:
 
-<UsageWrap>
-  <Center spacing="lg">
-    <Box>
-      <BodyText weight="semibold" mb="100">
-        {'Light Mode'}
-      </BodyText>
-      <Flex direction="row" spacing="lg">
-        <ScopedTheme name="light">
-          <Box backgroundColor="brand" p="400">
-            <BodyText color="inverted">
-              This branded box and text adapt to light or dark mode!
-            </BodyText>
-          </Box>
-          <Box backgroundColor="secondary" p="400">
-            <BodyText color="primary">This box and text adapt to light or dark mode!</BodyText>
-            <BodyText color="secondary">This secondary text adapt to light or dark mode!</BodyText>
-          </Box>
-        </ScopedTheme>
-      </Flex>
-    </Box>
-    <Box>
-      <BodyText weight="semibold" mb="100">
-        {'Dark Mode'}
-      </BodyText>
-      <Flex direction="row" spacing="lg">
-        <ScopedTheme name="dark">
-          <Box backgroundColor="brand" p="400">
-            <BodyText color="inverted">
-              This branded box and text adapt to light or dark mode!
-            </BodyText>
-          </Box>
-          <Box backgroundColor="secondary" p="400">
-            <BodyText color="primary">This box and text adapt to light or dark mode!</BodyText>
-            <BodyText color="secondary">This secondary text adapt to light or dark mode!</BodyText>
-          </Box>
-        </ScopedTheme>
-      </Flex>
-    </Box>
-  </Center>
-</UsageWrap>
-
 ```tsx
+// Example usage
 <Box backgroundColor="brand" p="400">
   <BodyText color="inverted">This branded box and text adapt to light or dark mode!</BodyText>
 </Box>
@@ -196,24 +122,8 @@ When using icons from the `@utilitywarehouse/hearth-react-native-icons` library,
 by using the `color` prop and the `Icon` component with a semantic colour token (by default the `Icon` will use the `theme.colors.icon.primary`
 colour which adapts to light and dark mode):
 
-<UsageWrap>
-  <Center>
-    <Flex direction="row" spacing="lg">
-      <ScopedTheme name="light">
-        <Box p="400" backgroundColor="secondary">
-          <Icon as={SearchMediumIcon} />
-        </Box>
-      </ScopedTheme>
-      <ScopedTheme name="dark">
-        <Box p="400" backgroundColor="secondary">
-          <Icon as={SearchMediumIcon} color="warmWhite0" />
-        </Box>
-      </ScopedTheme>
-    </Flex>
-  </Center>
-</UsageWrap>
-
 ```tsx
+// Example usage
 import { Icon , useTheme } from '@utilitywarehouse/hearth-react-native';
 import { SearchMediumIcon } from '@utilitywarehouse/hearth-react-native-icons';
 
@@ -232,24 +142,8 @@ To learn more about the available icons, check out the [icon library documentati
 When using illustrations from the `@utilitywarehouse/hearth-svg-assets` library, you'll need to import both the light and dark versions
 of the illustration and conditionally render the appropriate one based on the current colour mode.
 
-<UsageWrap>
-  <Center>
-    <Flex direction="row" spacing="lg">
-      <ScopedTheme name="light">
-        <Box p="400" backgroundColor="secondary">
-          <SceneBroadbandLight width={200} height={200} />
-        </Box>
-      </ScopedTheme>
-      <ScopedTheme name="dark">
-        <Box p="400" backgroundColor="secondary">
-          <SceneBroadbandDark width={200} height={200} />
-        </Box>
-      </ScopedTheme>
-    </Flex>
-  </Center>
-</UsageWrap>
-
 ```tsx
+// Example usage
 import { useColorMode } from '@utilitywarehouse/hearth-react-native';
 import SceneBroadbandDark from '@utilitywarehouse/hearth-svg-assets/lib/scene-broadband-dark.svg';
 import SceneBroadbandLight from '@utilitywarehouse/hearth-svg-assets/lib/scene-broadband-light.svg';
@@ -284,24 +178,8 @@ You can view the available animations in the [Hearth JSON asset library document
 To simplify the process of handling light and dark mode for images, you can create a reusable `ThemedImage` component that takes both light and dark versions of an image as props and automatically renders the correct one based on the current colour mode.
 Here's an example implementation of a `ThemedImage` component:
 
-<UsageWrap>
-  <Center>
-    <Flex direction="row" spacing="lg">
-      <ScopedTheme name="light">
-        <Box p="400" backgroundColor="secondary">
-          <SpotPiggyBankLight width={200} height={200} />
-        </Box>
-      </ScopedTheme>
-      <ScopedTheme name="dark">
-        <Box p="400" backgroundColor="secondary">
-          <SpotPiggyBankDark width={200} height={200} />
-        </Box>
-      </ScopedTheme>
-    </Flex>
-  </Center>
-</UsageWrap>
-
 ```tsx
+// Example usage
 import React from 'react';
 import { ThemedImage } from '@utilitywarehouse/hearth-react-native';
 import SpotPiggyBankLight from '@utilitywarehouse/hearth-svg-assets/lib/spot-piggy-bank-light.svg';
@@ -318,11 +196,4 @@ const MyComponent = () => {
 };
 ```
 
-See the full `ThemedImage` docs and implementation in the <StorybookLink to="utility-components-themed-image">`ThemedImage` documentation</StorybookLink>.
-
-<NextPrevPage
-  prevLink="guides-adding-shadows"
-  prevTitle="Adding Shadows"
-  nextLink="primitives-box"
-  nextTitle="Box"
-/>
+See the full `ThemedImage` docs and implementation in the `ThemedImage` documentation.

package/{docs/getting-started.mdx → public/llms/docs/getting-started.md}

@@ -1,9 +1,3 @@
-import { Meta } from '@storybook/addon-docs/blocks';
-import { BackToTopButton, NextPrevPage } from './components';
-
-<Meta title="Getting Started" />
-<BackToTopButton />
-
 # Getting Started
 
 You can just start using the components from the `@utilitywarehouse/hearth-react-native` package.
@@ -11,6 +5,7 @@ Although there are a few components that require a `BottomSheetModalProvider` to
 You should also make sure you're app is wrapped in a `GestureHandlerRootView` from `react-native-gesture-handler`.
 
 ```tsx
+// Example usage
 import {
   Box,
   Alert,
@@ -37,6 +32,7 @@ By default the light colour mode is enabled. If you want to enable dark mode, yo
 use the `useColorMode` hook to toggle between light and dark modes.
 
 ```tsx
+// Example usage
 import {
   useColorMode,
   Box,
@@ -65,10 +61,3 @@ const App: React.FC = () => {
   );
 };
 ```
-
-<NextPrevPage
-  prevLink="introduction"
-  prevTitle="Introduction"
-  nextLink="changelog"
-  nextTitle="Changelog"
-/>

package/{docs/hooks.mdx → public/llms/docs/hooks.md}

@@ -1,9 +1,3 @@
-import { Meta } from '@storybook/addon-docs/blocks';
-import { BackToTopButton, NextPrevPage } from './components';
-
-<Meta title="Hooks" />
-<BackToTopButton />
-
 # Hooks
 
 Hearth React Native provides a set of powerful hooks that help you build responsive, themeable, and accessible applications. These hooks integrate seamlessly with the Unistyles theming system and provide utilities for responsive design, color mode management, and design token access.
@@ -19,12 +13,14 @@ Hearth React Native provides a set of powerful hooks that help you build respons
 `useTheme` is a custom hook that returns the current theme object with all design tokens and theme values. This is the primary way to access theme values in your components.
 
 ```tsx
+// Example usage
 import { useTheme } from '@utilitywarehouse/hearth-react-native';
 ```
 
 ### Basic Usage
 
 ```tsx
+// Example usage
 import { View, Text } from 'react-native';
 import { useTheme } from '@utilitywarehouse/hearth-react-native';
 
@@ -56,6 +52,7 @@ function ThemedComponent() {
 ### Accessing Different Token Categories
 
 ```tsx
+// Example usage
 function ExampleComponent() {
   const theme = useTheme();
 
@@ -110,12 +107,14 @@ function ExampleComponent() {
 `useToken` is a custom hook that resolves specific design tokens from the theme. It provides a convenient way to access individual token values without importing the entire theme.
 
 ```tsx
+// Example usage
 import { useToken } from '@utilitywarehouse/hearth-react-native';
 ```
 
 ### Basic Usage
 
 ```tsx
+// Example usage
 import { View, Text } from 'react-native';
 import { useToken } from '@utilitywarehouse/hearth-react-native';
 
@@ -149,12 +148,14 @@ function TokenExample() {
 `useColorMode` is a custom hook that provides access to the current color mode and allows you to programmatically change between light and dark themes.
 
 ```tsx
+// Example usage
 import { useColorMode } from '@utilitywarehouse/hearth-react-native';
 ```
 
 ### Basic Usage
 
 ```tsx
+// Example usage
 import { View, Text, TouchableOpacity } from 'react-native';
 import { useColorMode } from '@utilitywarehouse/hearth-react-native';
 
@@ -200,6 +201,7 @@ function ColorModeToggle() {
 ### Conditional Styling Based on Color Mode
 
 ```tsx
+// Example usage
 function AdaptiveComponent() {
   const [colorMode] = useColorMode();
 
@@ -244,12 +246,14 @@ function AdaptiveComponent() {
 `useBreakpointValue` is a custom hook that returns different values based on the current screen breakpoint. It's perfect for creating responsive designs that adapt to different screen sizes.
 
 ```tsx
+// Example usage
 import { useBreakpointValue } from '@utilitywarehouse/hearth-react-native';
 ```
 
 ### Basic Usage
 
 ```tsx
+// Example usage
 import { View, Text } from 'react-native';
 import { useBreakpointValue } from '@utilitywarehouse/hearth-react-native';
 
@@ -290,6 +294,7 @@ function ResponsiveLayout() {
 ### Responsive Typography
 
 ```tsx
+// Example usage
 function ResponsiveText() {
   const fontSize = useBreakpointValue({
     default: 16,
@@ -323,6 +328,7 @@ function ResponsiveText() {
 ### Complex Responsive Values
 
 ```tsx
+// Example usage
 function ResponsiveCard() {
   const cardStyle = useBreakpointValue({
     default: {
@@ -369,12 +375,14 @@ function ResponsiveCard() {
 `useMedia` is a custom hook that returns an object with boolean values for each breakpoint, indicating whether the current screen size matches that breakpoint. It's useful for conditional rendering based on screen size.
 
 ```tsx
+// Example usage
 import { useMedia } from '@utilitywarehouse/hearth-react-native';
 ```
 
 ### Basic Usage
 
 ```tsx
+// Example usage
 import { View, Text } from 'react-native';
 import { useMedia } from '@utilitywarehouse/hearth-react-native';
 
@@ -407,6 +415,7 @@ function MediaExample() {
 ### Conditional Components
 
 ```tsx
+// Example usage
 function ConditionalLayout() {
   const media = useMedia();
 
@@ -475,6 +484,7 @@ function ConditionalLayout() {
 ### Responsive Grid
 
 ```tsx
+// Example usage
 function ResponsiveGrid({ items }) {
   const media = useMedia();
 
@@ -517,10 +527,3 @@ function ResponsiveGrid({ items }) {
   );
 }
 ```
-
-<NextPrevPage
-  prevLink="theme-tokens"
-  prevTitle="Theme Tokens"
-  nextLink="layout-components"
-  nextTitle="Layout Components"
-/>

package/{docs/introduction.mdx → public/llms/docs/introduction.md}

@@ -1,16 +1,7 @@
-import { Meta } from '@storybook/addon-docs/blocks';
-import { version } from '../package.json';
-import { Box } from '../src';
-import { BackToTopButton, NextPrevPage } from './components';
-
-<Meta title="Introduction" />
-
-<BackToTopButton />
-
 # Hearth React Native
 
 React Native component library for building UIs at Utility Warehouse.<br/>
-Current version: v{version}
+Current version: v0.35.0
 
 Hearth React Native is a comprehensive design system library for React Native, providing reusable components, consistent styling, and tools to streamline UI development. It is built to enhance productivity and maintain design consistency across projects.
 
@@ -82,6 +73,7 @@ mkdir -p src/assets/fonts && cp ./node_modules/@utilitywarehouse/hearth-fonts/fi
 Next, create or update your `react-native.config.js` file in the root directory and paste the code below inside it:
 
 ```js
+// Example usage
 module.exports = {
   project: {
     ios: {},
@@ -134,6 +126,7 @@ If you are using Expo, you can use the `expo-font` and [`expo-xml-font`](https:/
 Here is an example of how to load the fonts in your `App.tsx` file:
 
 ```tsx
+// Example usage
 import { useFonts } from 'expo-font';
 import App from './src/App';
 
@@ -162,6 +155,7 @@ Follow the [expo-xml-font](https://github.com/Armster15/expo-xml-font) documenta
 You will need to add the following Babel plugin to your `babel.config.js` file:
 
 ```js
+// Example usage
 const unistylesPluginOptions = {
   autoProcessImports: ['@utilitywarehouse/hearth-react-native'],
   autoProcessPaths: ['@utilitywarehouse/hearth-react-native'],
@@ -184,6 +178,7 @@ module.exports = {
 If you are using Jest for testing, you will need to add the following configuration to your `jest.config.js` file:
 
 ```js
+// Example usage
 module.exports = {
   // other Jest configurations...
   setupFiles: [
@@ -197,6 +192,7 @@ module.exports = {
 You'll also need to add the following to your `jest.setup.js` file:
 
 ```js
+// Example usage
 import { StyleSheet, themes, breakpoints } from '@utilitywarehouse/hearth-react-native';
 
 StyleSheet.configure({
@@ -216,5 +212,3 @@ require('react-native-reanimated').setUpTests();
 
 // rest of your setup...
 ```
-
-<NextPrevPage nextLink="getting-started" nextTitle="Getting Started" />

package/{docs/layout-components.docs.mdx → public/llms/docs/layout-components.md}

@@ -1,14 +1,3 @@
-import { ArgTypes, Canvas, Meta } from '@storybook/addon-docs/blocks';
-import StorybookLink from '../../../shared/storybook/StorybookLink';
-import * as BoxStories from '../src/components/Box/Box.stories';
-import * as ContainerStories from '../src/components/Container/Container.stories';
-import * as FlexStories from '../src/components/Flex/Flex.stories';
-import * as GridStories from '../src/components/Grid/Grid.stories';
-import { BackToTopButton, NextPrevPage } from './components';
-
-<Meta title="Layout Components" />
-<BackToTopButton />
-
 # Layout Components
 
 These components focus on creating layouts and can be used as base building
@@ -23,15 +12,21 @@ apply design decisions coherently.
 
 ## Box
 
-<Canvas of={BoxStories.Playground} sourceState="none" />
+```tsx
+// Example usage
+<Box {...args}>
+  <BodyText>{args.children}</BodyText>
+</Box>
+```
 
 `Box` is the most fundamental component, and can be used to provide spacing,
 size and colour to elements. It can be used to control behaviour of child
 elements within `Flex` and `Grid` containers.
 
-You can view the <StorybookLink to="primitives-box">`Box` docs here</StorybookLink>.
+You can view the `Box` docs here.
 
 ```tsx
+// Example usage
 <Box
   padding="400"
   marginBottom="300"
@@ -43,16 +38,32 @@ You can view the <StorybookLink to="primitives-box">`Box` docs here</StorybookLi
 
 ## Container
 
-<Canvas of={ContainerStories.Playground} sourceState="none" />
+```tsx
+// Example usage
+<Box backgroundColor={color.red['100']}>
+  <Container {...args} backgroundColor="secondary">
+    <Box bg={color.blue['400']} p="200" borderRadius="md">
+      <BodyText>Container content 1</BodyText>
+    </Box>
+    <Box bg={color.purple['400']} p="200" borderRadius="md">
+      <BodyText>Container content 2</BodyText>
+    </Box>
+    <Box bg={color.piggyPink['300']} p="200" borderRadius="md">
+      <BodyText>Container content 3</BodyText>
+    </Box>
+  </Container>
+</Box>
+```
 
 `Container` is a specialised layout component that provides consistent page-level
 spacing using the design system's responsive layout tokens. It automatically applies
 appropriate margin and padding based on the current breakpoint, making it ideal for
 wrapping page content or major sections.
 
-You can view the <StorybookLink to="primitives-container">`Container` docs here</StorybookLink>.
+You can view the `Container` docs here.
 
 ```tsx
+// Example usage
 <Container spacing="lg">
   <Box>{...}</Box>
   <Box>{...}</Box>
@@ -63,6 +74,7 @@ When you need custom spacing, you can override the defaults while maintaining
 the convenience of the component:
 
 ```tsx
+// Example usage
 <Container
   marginHorizontal="none"
   spacing="xl"
@@ -73,15 +85,32 @@ the convenience of the component:
 
 ## Flex
 
-<Canvas of={FlexStories.Playground} sourceState="none" />
+```tsx
+// Example usage
+<Flex {...args}>
+  {Array.from({ length: 4 }).map((_, index) => (
+    <Box
+      key={index}
+      // @ts-expect-error - This is a playground
+      bg={`grey${index + 1}00`}
+      w={100 + index * 10}
+      h={100 + index * 10}
+      borderColor="strong"
+      borderWidth="2"
+      borderRadius="md"
+    />
+  ))}
+</Flex>
+```
 
 `Flex` adds a handy set of props for building with flexbox properties. This
 component is useful for defining layouts along an axis, and replaces the `HStack` and `VStack`
 component you may have used in other libraries.
 
-You can view the <StorybookLink to="primitives-flex">`Flex` docs here</StorybookLink>.
+You can view the `Flex` docs here.
 
 ```tsx
+// Example usage
 <Flex
   padding="400"
   spacing="md"
@@ -94,7 +123,17 @@ You can view the <StorybookLink to="primitives-flex">`Flex` docs here</Storybook
 
 ## Grid
 
-<Canvas of={GridStories.Playground} sourceState="none" />
+```tsx
+// Example usage
+<Grid {...args} style={{ width: 400 }}>
+  <GridItem color="#FFD6D6" />
+  <GridItem color="#D6FFD6" />
+  <GridItem color="#D6D6FF" />
+  <GridItem color="#FFFFD6" />
+  <GridItem color="#FFD6FF" />
+  <GridItem color="#D6FFFF" />
+</Grid>
+```
 
 `Grid` is used to create grid layouts, organizing content in columns and rows.
 Like `Flex` and `Box`, the `Grid` component provides access to a range of
@@ -102,19 +141,13 @@ styling props, and to all the properties needed to build a grid layout.
 
 You can easily build responsive layouts using Design System defaults.
 
-You can view the <StorybookLink to="primitives-grid">`Grid` docs here</StorybookLink>.
+You can view the `Grid` docs here.
 
 ```tsx
+// Example usage
 <Grid columns={2} spacing="md">
   <Box>{...}</Box>
   <Box>{...}</Box>
   <Box>{...}</Box>
 </Grid>
 ```
-
-<NextPrevPage
-  prevLink="hooks"
-  prevTitle="Hooks"
-  nextLink="all-components"
-  nextTitle="All Components"
-/>