@utilitywarehouse/hearth-react-native 0.16.0 → 0.16.2

package/docs/components/AllComponents.web.tsx

@@ -13,9 +13,9 @@ import {
   ShareSmallIcon,
   TrashSmallIcon,
 } from '@utilitywarehouse/hearth-react-native-icons';
-// @ts-ignore
+// @ts-expect-error - Module missing type declarations
 import SpotBillingDark from '@utilitywarehouse/hearth-svg-assets/lib/spot-billing-dark.svg';
-// @ts-ignore
+// @ts-expect-error - Module missing type declarations
 import SpotBillingLight from '@utilitywarehouse/hearth-svg-assets/lib/spot-billing-light.svg';
 import { Pressable, ScrollView, View, ViewProps } from 'react-native';
 import { StyleSheet } from 'react-native-unistyles';
@@ -176,6 +176,7 @@ const AllComponents: React.FC = () => {
   const handleMenuOpenPress = useCallback(() => {
     menuRef.current?.present();
   }, []);
+  const [pillValue, setPillValue] = React.useState<string[]>(['energy', 'mobile']);
 
   const [colorMode] = useColorMode();
   const isDark = colorMode === 'dark';
@@ -648,22 +649,19 @@ const AllComponents: React.FC = () => {
           </ComponentWrapper>
           <ComponentWrapper name="Pill Group" link="/?path=/docs/components-pill-group--docs">
             <Center flex={1} p="200">
-              {(() => {
-                const [pillValue, setPillValue] = React.useState<string[]>(['energy', 'mobile']);
-                return (
-                  <PillGroup
-                    value={pillValue}
-                    onChange={v => setPillValue(v as string[])}
-                    wrap={false}
-                    multiple
-                  >
-                    <Pill value="all" label="All" />
-                    <Pill value="energy" label="Energy" icon={ElectricityMediumIcon} />
-                    <Pill value="broadband" label="Broadband" icon={BroadbandMediumIcon} />
-                    <Pill value="mobile" label="Mobile" icon={MobileMediumIcon} />
-                  </PillGroup>
-                );
-              })()}
+              (
+              <PillGroup
+                value={pillValue}
+                onChange={v => setPillValue(v as string[])}
+                wrap={false}
+                multiple
+              >
+                <Pill value="all" label="All" />
+                <Pill value="energy" label="Energy" icon={ElectricityMediumIcon} />
+                <Pill value="broadband" label="Broadband" icon={BroadbandMediumIcon} />
+                <Pill value="mobile" label="Mobile" icon={MobileMediumIcon} />
+              </PillGroup>
+              );
             </Center>
           </ComponentWrapper>
           <ComponentWrapper

package/docs/components/UsageWrap.tsx

@@ -1,24 +1,21 @@
 import { FC, PropsWithChildren } from 'react';
-import { BottomSheetModalProvider, Box, useColorMode } from '../../src';
+import { BottomSheetModalProvider, Box } from '../../src';
 
-const UsageWrap: FC<PropsWithChildren> = ({ children }) => {
-  const [colorMode] = useColorMode();
-  return (
-    <div className="sb-unstyled">
-      <Box
-        mt="300"
-        p="200"
-        bg="backgroundPrimary"
-        borderRadius="md"
-        borderWidth="1"
-        borderColor="borderSubtle"
-        width="100%"
-        position="relative"
-      >
-        <BottomSheetModalProvider>{children}</BottomSheetModalProvider>
-      </Box>
-    </div>
-  );
-};
+const UsageWrap: FC<PropsWithChildren> = ({ children }) => (
+  <div className="sb-unstyled">
+    <Box
+      mt="300"
+      p="200"
+      bg="backgroundPrimary"
+      borderRadius="md"
+      borderWidth="1"
+      borderColor="borderSubtle"
+      width="100%"
+      position="relative"
+    >
+      <BottomSheetModalProvider>{children}</BottomSheetModalProvider>
+    </Box>
+  </div>
+);
 
 export default UsageWrap;

package/eslint.config.js

@@ -8,13 +8,17 @@ import globals from 'globals';
 import tseslint from 'typescript-eslint';
 
 export default tseslint.config(
-  { ignores: ['build', 'dist', 'storybook-static'] },
+  { ignores: ['build', 'dist', 'storybook-static', '**/*.figma.tsx'] },
   {
     extends: [js.configs.recommended, ...tseslint.configs.recommended],
     files: ['**/*.{ts,tsx}'],
     languageOptions: {
       ecmaVersion: 2020,
       globals: globals.browser,
+      parserOptions: {
+        project: './tsconfig.eslint.json',
+        tsconfigRootDir: import.meta.dirname,
+      },
     },
     plugins: {
       'react-hooks': reactHooks,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@utilitywarehouse/hearth-react-native",
-  "version": "0.16.0",
+  "version": "0.16.2",
   "description": "Utility Warehouse React Native UI library",
   "main": "build/index.js",
   "types": "build/index.d.ts",
@@ -25,18 +25,18 @@
   "devDependencies": {
     "@babel/plugin-proposal-export-namespace-from": "^7.18.9",
     "@chromatic-com/storybook": "^4.1.3",
-    "@figma/code-connect": "^1.3.11",
+    "@figma/code-connect": "^1.3.12",
     "@gorhom/bottom-sheet": "5.2.6",
-    "@storybook/addon-a11y": "^10.1.4",
-    "@storybook/addon-docs": "^10.1.4",
-    "@storybook/addon-vitest": "^10.1.4",
-    "@storybook/react-native-web-vite": "^10.1.4",
+    "@storybook/addon-a11y": "^10.2.1",
+    "@storybook/addon-docs": "^10.2.1",
+    "@storybook/addon-vitest": "^10.2.1",
+    "@storybook/react-native-web-vite": "^10.2.1",
     "@types/prismjs": "^1.26.5",
     "@types/react": "^19.1.10",
     "@vitest/browser": "^3.2.4",
     "@vitest/coverage-v8": "^3.2.4",
     "chromatic": "^13.3.0",
-    "eslint-plugin-storybook": "10.1.4",
+    "eslint-plugin-storybook": "10.2.1",
     "playwright": "^1.55.1",
     "prismjs": "^1.30.0",
     "react": "^19.1.0",
@@ -50,15 +50,15 @@
     "react-native-web": "^0.20.0",
     "react-native-worklets": "^0.6.1",
     "remark-gfm": "^4.0.1",
-    "storybook": "^10.1.4",
+    "storybook": "^10.2.1",
     "typescript": "^5.7.3",
     "vite": "^7.1.3",
     "vite-plugin-svgr": "^4.5.0",
     "vitest": "^3.2.4",
-    "@utilitywarehouse/hearth-fonts": "^0.0.4",
     "@utilitywarehouse/hearth-react-icons": "^0.7.4",
     "@utilitywarehouse/hearth-react-native-icons": "^0.7.4",
     "@utilitywarehouse/hearth-svg-assets": "^0.3.0",
+    "@utilitywarehouse/hearth-fonts": "^0.0.4",
     "@utilitywarehouse/hearth-tokens": "^0.2.2"
   },
   "peerDependencies": {
@@ -76,8 +76,8 @@
     "clean": "rm -rf node_modules rm -rf build .turbo",
     "generateColours": "node ./scripts/generateColours.js",
     "copyTokens": "node ./scripts/copyTokens.js",
-    "lint:fix": "TIMING=1 eslint --fix --max-warnings 0",
-    "lint": "TIMING=1 eslint --max-warnings 0",
+    "lint:fix": "TIMING=1 eslint --fix .",
+    "lint": "TIMING=1 eslint .",
     "build": "tsc",
     "watch": "tsc --watch",
     "figma:create": "figma connect create",

package/src/components/Accordion/Accordion.figma.tsx

@@ -1,23 +1,21 @@
-import React from "react"
-import Accordion from "./Accordion"
-import figma from "@figma/code-connect"
-
-/**
- * -- This file was auto-generated by Code Connect --
- * None of your props could be automatically mapped to Figma properties.
- * You should update the `props` object to include a mapping from your
- * code props to Figma properties, and update the `example` function to
- * return the code example you'd like to see in Figma
- */
+import figma from '@figma/code-connect';
+import { Accordion } from './';
 
 figma.connect(
   Accordion,
-  "https://www.figma.com/design/6NKZXZhFSExXrcbBgc6zTR?node-id=3385%3A7751",
+  'https://www.figma.com/design/6NKZXZhFSExXrcbBgc6zTR?node-id=3385%3A7751',
   {
     props: {
-      // No matching props could be found for these Figma properties:
-      // "sectionHeader": figma.boolean('Section header?')
+      sectionHeader: figma.nestedProps('Section Header', {
+        helperText: figma.string('Helper text'),
+        heading: figma.string('Heading'),
+      }),
+      items: figma.children('Accordion Item'),
     },
-    example: (props) => <Accordion />,
-  },
-)
+    example: props => (
+      <Accordion heading={props.sectionHeader.heading} helperText={props.sectionHeader.helperText}>
+        {props.items}
+      </Accordion>
+    ),
+  }
+);

package/src/components/Accordion/AccordionItem.figma.tsx

@@ -0,0 +1,27 @@
+import figma from '@figma/code-connect';
+import { BodyText } from '../BodyText';
+import { AccordionItem } from './';
+
+figma.connect(
+  AccordionItem,
+  'https://www.figma.com/design/6NKZXZhFSExXrcbBgc6zTR?node-id=3390%3A6160',
+  {
+    props: {
+      title: figma.string('Title'),
+      expanded: figma.boolean('Expand?'),
+      triggerContent: figma.instance('Trigger custom content'),
+      description: figma.string('Description'),
+      content: figma.instance('Custom content'),
+    },
+    example: props => (
+      <AccordionItem
+        title={props.title}
+        expanded={props.expanded}
+        triggerContent={props.triggerContent}
+      >
+        <BodyText>{props.description}</BodyText>
+        {props.content}
+      </AccordionItem>
+    ),
+  }
+);

package/src/components/Avatar/Avatar.figma.tsx

@@ -1,33 +1,23 @@
-import React from "react"
-import Avatar from "./Avatar"
-import figma from "@figma/code-connect"
-
-/**
- * -- This file was auto-generated by Code Connect --
- * `props` includes a mapping from your code props to Figma properties.
- * You should check this is correct, and update the `example` function
- * to return the code example you'd like to see in Figma
- */
+import figma from '@figma/code-connect';
+import { Avatar } from '../';
 
 figma.connect(
   Avatar,
-  "https://www.figma.com/design/6NKZXZhFSExXrcbBgc6zTR?node-id=6790%3A14313",
+  'https://www.figma.com/design/6NKZXZhFSExXrcbBgc6zTR/Hearth-Components---Tokens?node-id=6790-14313',
   {
     props: {
-      // These props were automatically mapped based on your linked code:
-      size: figma.enum("Size", {
-        "SM-32": "sm",
-        "MD-48": "md",
+      size: figma.enum('Size', {
+        'SM-32': 'sm',
+        'MD-48': 'md',
       }),
-      // No matching props could be found for these Figma properties:
-      // "initials": figma.string('Initials'),
-      // "image": figma.instance('Image'),
+      initials: figma.string('Initials'),
+      image: figma.instance('Image'),
       // "variant": figma.enum('Variant', {
       //   "Image": "image",
       //   "Initials": "initials",
       //   "Icon": "icon"
       // })
     },
-    example: (props) => <Avatar size={props.size} />,
-  },
-)
+    example: props => <Avatar size={props.size} name={props.initials} image={props.image} />,
+  }
+);

package/src/components/Avatar/Avatar.tsx

@@ -2,7 +2,6 @@ import { UserMediumIcon, UserSmallIcon } from '@utilitywarehouse/hearth-react-na
 import { useEffect, useState } from 'react';
 import { Image, View } from 'react-native';
 import { StyleSheet } from 'react-native-unistyles';
-import { useTheme } from '../../hooks';
 import { getInitials } from '../../utils';
 import BodyText from '../BodyText/BodyText';
 import AvatarProps, { AvatarLoadingStatus } from './Avatar.props';
@@ -18,7 +17,6 @@ const Avatar = ({
 }: AvatarProps) => {
   const [status, setStatus] = useState<AvatarLoadingStatus>('idle');
   const [isDelayed, setIsDelayed] = useState(delayMs > 0);
-  const { components } = useTheme();
 
   useEffect(() => {
     if (!src) {

package/src/components/Badge/Badge.figma.tsx

@@ -1,56 +1,47 @@
-import React from "react"
-import Badge from "./Badge"
-import figma from "@figma/code-connect"
+import figma from '@figma/code-connect';
+import { Badge } from '../';
 
-/**
- * -- This file was auto-generated by Code Connect --
- * `props` includes a mapping from your code props to Figma properties.
- * You should check this is correct, and update the `example` function
- * to return the code example you'd like to see in Figma
- */
-
-figma.connect(
-  Badge,
-  "https://www.figma.com/design/6NKZXZhFSExXrcbBgc6zTR?node-id=61%3A652",
-  {
-    props: {
-      // These props were automatically mapped based on your linked code:
-      variant: figma.enum("Variant", {
-        "Subtle - Default": "subtle",
-        Emphasis: "emphasis",
-        Outline: "outline",
-      }),
-      colorScheme: figma.enum("Color Scheme", {
-        Info: "info",
-        Positive: "positive",
-        Danger: "danger",
-        Warning: "warning",
-        Functional: "functional",
-        Energy: "energy",
-        Broadband: "broadband",
-        Mobile: "mobile",
-        Insurance: "insurance",
-        Cashback: "cashback",
-        Pig: "pig",
-        Highlight: "highlight",
-      }),
-      size: figma.enum("Size", {
-        "SM-24": "sm",
-        "MD-28": "md",
-      }),
-      flatBase: figma.boolean("Flat Base?"),
-      // No matching props could be found for these Figma properties:
-      // "icon": figma.boolean('Icon?'),
-      // "icon20": figma.instance('Icon-20'),
-      // "text": figma.string('Text')
-    },
-    example: (props) => (
-      <Badge
-        variant={props.variant}
-        colorScheme={props.colorScheme}
-        size={props.size}
-        flatBase={props.flatBase}
-      />
-    ),
+figma.connect(Badge, 'https://www.figma.com/design/6NKZXZhFSExXrcbBgc6zTR?node-id=61%3A652', {
+  props: {
+    variant: figma.enum('Variant', {
+      'Subtle - Default': 'subtle',
+      Emphasis: 'emphasis',
+      Outline: 'outline',
+    }),
+    colorScheme: figma.enum('Color Scheme', {
+      Info: 'info',
+      Positive: 'positive',
+      Danger: 'danger',
+      Warning: 'warning',
+      Functional: 'functional',
+      Energy: 'energy',
+      Broadband: 'broadband',
+      Mobile: 'mobile',
+      Insurance: 'insurance',
+      Cashback: 'cashback',
+      Pig: 'pig',
+      Highlight: 'highlight',
+    }),
+    size: figma.enum('Size', {
+      'SM-24': 'sm',
+      'MD-28': 'md',
+    }),
+    flatBase: figma.boolean('Flat Base?'),
+    icon: figma.boolean('Icon?', {
+      true: figma.instance('Icon-20'),
+      false: '',
+    }),
+    text: figma.string('Text'),
   },
-)
+  example: props => (
+    <Badge
+      variant={props.variant}
+      colorScheme={props.colorScheme}
+      size={props.size}
+      flatBase={props.flatBase}
+      icon={props.icon}
+    >
+      {props.text}
+    </Badge>
+  ),
+});

package/src/components/Banner/Banner.figma.tsx

@@ -1,15 +1,23 @@
 import figma from '@figma/code-connect';
-import Banner from './Banner';
+import { Banner } from '../';
 
-/**
- * -- This file was auto-generated by Code Connect --
- * None of your props could be automatically mapped to Figma properties.
- * You should update the `props` object to include a mapping from your
- * code props to Figma properties, and update the `example` function to
- * return the code example you'd like to see in Figma
- */
-
-figma.connect(Banner, 'https://www.figma.com/design/6NKZXZhFSExXrcbBgc6zTR?node-id=8294%3A3905', {
-  props: {},
-  example: props => <Banner heading={null} description={null} />,
-});
+figma.connect(
+  Banner,
+  'https://www.figma.com/design/6NKZXZhFSExXrcbBgc6zTR/Hearth-Components---Tokens?node-id=8294-3905&t=wLfy4ZMrZsHup0oB-4',
+  {
+    props: {
+      // irection: figma.enum('Direction', {
+      //   Horizontal: 'horizontal',
+      //   Vertical: 'vertical',
+      // }),d
+    },
+    example: props => {
+      return (
+        // Banner doesn't need to be wrapped in a Card
+        // it's a standalone component in code please see the Banner docs
+        // https://hearth.prod.uw.systems/react-native/?path=/docs/components-banner--docs
+        <Banner heading="The banner heading" description="The text in the banner" />
+      );
+    },
+  }
+);

package/src/components/Banner/Banner.stories.tsx

@@ -133,11 +133,11 @@ export const WithIllustration: Story = {
             illustration={
               <BannerIllustration
                 light={
-                  // @ts-ignore
+                  // @ts-expect-error - Illustration SVG import
                   <SpotBillingLight width={80} height={80} />
                 }
                 dark={
-                  // @ts-ignore
+                  // @ts-expect-error - Illustration SVG import
                   <SpotBillingDark width={80} height={80} />
                 }
               />
@@ -150,11 +150,11 @@ export const WithIllustration: Story = {
             illustration={
               <BannerIllustration
                 light={
-                  // @ts-ignore
+                  // @ts-expect-error - Illustration SVG import
                   <SpotBillingLight width={120} height={120} />
                 }
                 dark={
-                  // @ts-ignore
+                  // @ts-expect-error - Illustration SVG import
                   <SpotBillingDark width={120} height={120} />
                 }
               />

package/src/components/Banner/Banner.tsx

@@ -25,7 +25,8 @@ const Banner = ({
   onPress,
   onClose,
   variant = 'subtle',
-  colorScheme = 'pig',
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  colorScheme: _,
   style,
   ...props
 }: BannerProps) => {