@utilitywarehouse/hearth-react-native 0.34.5 → 0.35.1

package/scripts/copyChangelog.js

@@ -1,57 +0,0 @@
-/**
- * Script to copy CHANGELOG.md to docs folder and convert it to changelog.mdx
- * with proper Meta and BackToTopButton components
- */
-
-import fs from 'fs';
-import path from 'path';
-import { fileURLToPath } from 'url';
-
-// Get the directory name in ES modules
-const __filename = fileURLToPath(import.meta.url);
-const __dirname = path.dirname(__filename);
-
-// Define paths
-const sourceFile = path.resolve(__dirname, '../CHANGELOG.md');
-const targetFile = path.resolve(__dirname, '../docs/changelog.mdx');
-
-// Read the changelog content
-console.log('Reading CHANGELOG.md...');
-if (!fs.existsSync(sourceFile)) {
-  console.error('Error: CHANGELOG.md not found at', sourceFile);
-  process.exit(1);
-}
-
-let changelogContent = fs.readFileSync(sourceFile, 'utf-8');
-
-// Remove the first line (package name heading)
-changelogContent = changelogContent.split('\n').slice(1).join('\n');
-
-// Create the MDX content with imports and components
-const mdxContent = `import { Meta } from '@storybook/addon-docs/blocks';
-import { BackToTopButton, NextPrevPage } from './components';
-
-<Meta title="Changelog" />
-<BackToTopButton />
-
-# Changelog - ${'`@utilitywarehouse/hearth-react-native`'}
-
-The changelog for the Hearth React Native library. Here you can find all the changes, improvements, and bug fixes for each version.
-
-${changelogContent}
-
-<NextPrevPage
-  prevLink="getting-started"
-  prevTitle="Getting Started"
-  nextLink="styling"
-  nextTitle="Styling"
-/>
-`;
-
-// Write the new MDX file
-console.log('Writing changelog.mdx...');
-fs.writeFileSync(targetFile, mdxContent);
-
-console.log('✅ Changelog copied and transformed successfully!');
-console.log(`   Source: ${sourceFile}`);
-console.log(`   Target: ${targetFile}`);

package/scripts/copyTokens.js

@@ -1,96 +0,0 @@
-/**
- * Script to copy token files from the main tokens package to a local directory
- * This allows the react-native package to use local tokens instead of importing from the library
- */
-
-import fs from 'fs';
-import path from 'path';
-import { fileURLToPath } from 'url';
-
-// Get the directory name in ES modules
-const __filename = fileURLToPath(import.meta.url);
-const __dirname = path.dirname(__filename);
-
-// Define paths
-const rootDir = path.resolve(__dirname, '../../../');
-const sourceTokensDir = path.resolve(rootDir, 'packages/tokens/src/ts');
-const targetTokensDir = path.resolve(__dirname, '../src/tokens');
-
-// Create the target directory if it doesn't exist
-if (!fs.existsSync(targetTokensDir)) {
-  fs.mkdirSync(targetTokensDir, { recursive: true });
-}
-
-/**
- * Remove all contents from a directory without deleting the directory itself
- */
-function clearDirectory(directory) {
-  if (fs.existsSync(directory)) {
-    const entries = fs.readdirSync(directory, { withFileTypes: true });
-
-    for (const entry of entries) {
-      const entryPath = path.join(directory, entry.name);
-      if (entry.isDirectory()) {
-        // Recursively remove directory contents
-        clearDirectory(entryPath);
-        fs.rmdirSync(entryPath);
-      } else {
-        // Remove file
-        fs.unlinkSync(entryPath);
-      }
-    }
-    console.log(`Cleared contents of: ${directory}`);
-  }
-}
-
-/**
- * Copy a directory recursively
- */
-function copyDirectory(source, target) {
-  // Create target directory if it doesn't exist
-  if (!fs.existsSync(target)) {
-    fs.mkdirSync(target, { recursive: true });
-  }
-
-  // Get all files in the source directory
-  const entries = fs.readdirSync(source, { withFileTypes: true });
-
-  for (const entry of entries) {
-    const sourcePath = path.join(source, entry.name);
-    const targetPath = path.join(target, entry.name);
-
-    if (entry.isDirectory()) {
-      // Recursively copy directories
-      copyDirectory(sourcePath, targetPath);
-    } else {
-      // Copy files
-      fs.copyFileSync(sourcePath, targetPath);
-      console.log(`Copied: ${sourcePath} -> ${targetPath}`);
-    }
-  }
-}
-
-// Clear target directory contents before copying
-console.log('Removing existing token files...');
-clearDirectory(targetTokensDir);
-
-// Copy all token files from source to target
-console.log('Copying token files from src/ts directory...');
-copyDirectory(sourceTokensDir, targetTokensDir);
-console.log('Token files copied successfully!');
-
-// Add a readme explaining the purpose of this directory
-const readmePath = path.join(targetTokensDir, 'README.md');
-const readmeContent = `# Local Tokens
-
-This directory contains a local copy of the tokens from \`@utilitywarehouse/hearth-tokens\` package.
-These files are copied automatically by running \`npm run copyTokens\` script.
-
-DO NOT edit these files directly - they will be overwritten when the script runs again.
-Instead, make changes to the source tokens in the tokens package.
-`;
-
-fs.writeFileSync(readmePath, readmeContent);
-console.log(`Created: ${readmePath}`);
-
-console.log('Done!');

package/src/components/Accordion/Accordion.context.tsx

@@ -1,13 +0,0 @@
-/* eslint-disable react-refresh/only-export-components */
-import { createContext, useContext } from 'react';
-
-const AccordionContext = createContext<{
-  noPadding?: boolean;
-  disabled?: boolean;
-  divider?: boolean;
-  contentNoPadding?: boolean;
-}>({});
-
-export const useAccordionContext = () => useContext(AccordionContext);
-
-export default AccordionContext;

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

@@ -1,21 +0,0 @@
-import figma from '@figma/code-connect';
-import { Accordion } from './';
-
-figma.connect(
-  Accordion,
-  'https://www.figma.com/design/6NKZXZhFSExXrcbBgc6zTR?node-id=3385%3A7751',
-  {
-    props: {
-      sectionHeader: figma.nestedProps('Section Header', {
-        helperText: figma.string('Helper text'),
-        heading: figma.string('Heading'),
-      }),
-      items: figma.children('Accordion Item'),
-    },
-    example: props => (
-      <Accordion heading={props.sectionHeader.heading} helperText={props.sectionHeader.helperText}>
-        {props.items}
-      </Accordion>
-    ),
-  }
-);

package/src/components/Accordion/Accordion.props.ts

@@ -1,43 +0,0 @@
-import { ViewProps } from 'react-native';
-
-export interface AccordionProps extends ViewProps {
-  /**
-   * When type is "single" or "multiple", allows closing content when clicking trigger for an open item.
-   * @default true
-   */
-  collapsible?: boolean;
-  /**
-   * When true, prevents the user from interacting with the accordion and all its items.
-   * @default false
-   */
-  disabled?: boolean;
-  /**
-   * Determines whether one or multiple items can be opened at the same time.
-   * @default 'multiple'
-   */
-  type?: 'single' | 'multiple';
-  /**
-   * The value of the item to expand when initially rendered when type is "single" or "multiple".
-   */
-  defaultValue?: Array<string>;
-  /**
-   * The controlled value of the item to expand when type is "single" or "multiple".
-   */
-  value?: Array<string>;
-  /**
-   * Event handler called when the expanded state of an item changes and type is "single" or "multiple".
-   */
-  onValueChange?: (value: Array<string>) => void;
-  /**
-   * Sets the padding of the accordion item header.
-   * @default false
-   */
-  noPadding?: boolean;
-  /**
-   * Sets the padding of the accordion item content.
-   * @default false
-   */
-  contentNoPadding?: boolean;
-  heading?: string;
-  helperText?: string;
-}

package/src/components/Accordion/Accordion.stories.tsx

@@ -1,118 +0,0 @@
-import { Meta, StoryObj } from '@storybook/react-vite';
-import {
-  ChevronDownSmallIcon,
-  ChevronUpSmallIcon,
-} from '@utilitywarehouse/hearth-react-native-icons';
-import {
-  Accordion,
-  AccordionContent,
-  AccordionContentText,
-  AccordionHeader,
-  AccordionIcon,
-  AccordionItem,
-  AccordionTitleText,
-  AccordionTrigger,
-} from '.';
-import { BodyText } from '../../components';
-
-const meta = {
-  title: 'Stories / Accordion',
-  component: Accordion,
-  parameters: {
-    layout: 'centered',
-  },
-  argTypes: {
-    collapsible: {
-      control: 'boolean',
-      description: 'Whether the accordion can be collapsed',
-    },
-    disabled: {
-      control: 'boolean',
-      description: 'Whether the accordion is disabled',
-    },
-    type: {
-      control: 'select',
-      options: ['single', 'multiple'],
-      description: 'The type of accordion',
-    },
-    noPadding: {
-      control: 'boolean',
-      description: 'Whether the accordion has no horizontal padding',
-    },
-    contentNoPadding: {
-      control: 'boolean',
-      description: 'Whether the accordion content has no padding',
-    },
-  },
-  args: {
-    collapsible: true,
-    disabled: false,
-    type: 'multiple',
-    noPadding: false,
-    contentNoPadding: false,
-  },
-} satisfies Meta<typeof Accordion>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const Playground: Story = {
-  render: args => {
-    return (
-      <Accordion {...args}>
-        <AccordionItem title="How do I place an order?">
-          <AccordionHeader>
-            <AccordionTrigger>
-              {({ isExpanded }: { isExpanded: boolean }) => {
-                return (
-                  <>
-                    <AccordionTitleText>How do I place an order?</AccordionTitleText>
-                    {isExpanded ? (
-                      <AccordionIcon as={ChevronUpSmallIcon} />
-                    ) : (
-                      <AccordionIcon as={ChevronDownSmallIcon} />
-                    )}
-                  </>
-                );
-              }}
-            </AccordionTrigger>
-          </AccordionHeader>
-          <AccordionContent>
-            <AccordionContentText>
-              Lorem ipsum dolor sit amet consectetur, adipisicing elit.
-            </AccordionContentText>
-          </AccordionContent>
-        </AccordionItem>
-
-        <AccordionItem>
-          <AccordionHeader>
-            <AccordionTrigger>
-              {({ isExpanded }: { isExpanded: boolean }) => {
-                return (
-                  <>
-                    <AccordionTitleText>What payment methods do you accept?</AccordionTitleText>
-                    {isExpanded ? (
-                      <AccordionIcon as={ChevronUpSmallIcon} />
-                    ) : (
-                      <AccordionIcon as={ChevronDownSmallIcon} />
-                    )}
-                  </>
-                );
-              }}
-            </AccordionTrigger>
-          </AccordionHeader>
-          <AccordionContent>
-            <AccordionContentText>
-              We accept all major credit cards, PayPal, and bank transfers.
-            </AccordionContentText>
-          </AccordionContent>
-        </AccordionItem>
-        <AccordionItem title="What is your return policy?">
-          <BodyText>
-            Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quisquam, voluptatibus.
-          </BodyText>
-        </AccordionItem>
-      </Accordion>
-    );
-  },
-};

package/src/components/Accordion/Accordion.tsx

@@ -1,127 +0,0 @@
-import { createAccordion } from '@gluestack-ui/accordion';
-import {
-  ChevronDownSmallIcon,
-  ChevronUpSmallIcon,
-} from '@utilitywarehouse/hearth-react-native-icons';
-import { Children, isValidElement, useMemo } from 'react';
-import { SectionHeader } from '../SectionHeader';
-import { AccordionProps } from './Accordion.props';
-import AccordionContentComponent from './AccordionContent';
-import AccordionContentTextComponent from './AccordionContentText';
-import AccordionHeaderComponent from './AccordionHeader';
-import AccordionIconComponent from './AccordionIcon';
-import { AccordionItemProps } from './AccordionItem.props';
-import AccordionItemRoot from './AccordionItemRoot';
-import AccordionRoot from './AccordionRoot';
-import AccordionTitleTextComponent from './AccordionTitleText';
-import AccordionTriggerComponent from './AccordionTrigger';
-
-const AccordionComponent = createAccordion({
-  Root: AccordionRoot,
-  ContentText: AccordionContentTextComponent,
-  Icon: AccordionIconComponent,
-  Content: AccordionContentComponent,
-  Header: AccordionHeaderComponent,
-  Item: AccordionItemRoot,
-  TitleText: AccordionTitleTextComponent,
-  Trigger: AccordionTriggerComponent,
-});
-
-const AccordionItemComponent = AccordionComponent.Item;
-export const AccordionHeader = AccordionComponent.Header;
-export const AccordionTrigger = AccordionComponent.Trigger;
-export const AccordionContent = AccordionComponent.Content;
-export const AccordionContentText = AccordionComponent.ContentText;
-export const AccordionIcon = AccordionComponent.Icon;
-export const AccordionTitleText = AccordionComponent.TitleText;
-
-const Accordion = ({
-  children,
-  collapsible,
-  type = 'multiple',
-  heading,
-  helperText,
-  ...props
-}: AccordionProps) => (
-  <AccordionComponent
-    isDisabled={props.disabled}
-    isCollapsible={collapsible}
-    type={type}
-    contentNoPadding={props.contentNoPadding}
-    {...props}
-  >
-    {heading ? <SectionHeader heading={heading} helperText={helperText} /> : null}
-    {children}
-  </AccordionComponent>
-);
-
-let accordionItemCounter = 0;
-
-export const AccordionItem = ({
-  children,
-  value,
-  title,
-  expanded,
-  triggerContent,
-  testID,
-  ...props
-}: AccordionItemProps) => {
-  const itemValue = useMemo(() => {
-    if (value !== undefined) {
-      return value;
-    }
-    const newId = `accordion-item-${accordionItemCounter}`;
-    accordionItemCounter += 1;
-    return newId;
-  }, [value]);
-
-  if (!children) {
-    return null;
-  }
-
-  const processedChildren = Children.toArray(children);
-  const hasContentComponent = processedChildren.some(
-    // @ts-expect-error - type
-    child => isValidElement(child) && child.type.displayName === 'AccordionContent'
-  );
-
-  return (
-    <AccordionItemComponent value={itemValue} title={title} isDisabled={props.disabled} {...props}>
-      {hasContentComponent ? (
-        children
-      ) : (
-        <>
-          <AccordionHeader>
-            <AccordionTrigger isExpanded={expanded} testID={testID}>
-              {({ isExpanded }: { isExpanded: boolean }) => {
-                return (
-                  <>
-                    <AccordionTitleText>{title}</AccordionTitleText>
-                    {triggerContent}
-                    {isExpanded ? (
-                      <AccordionIcon as={ChevronUpSmallIcon} />
-                    ) : (
-                      <AccordionIcon as={ChevronDownSmallIcon} />
-                    )}
-                  </>
-                );
-              }}
-            </AccordionTrigger>
-          </AccordionHeader>
-          <AccordionContent>{children}</AccordionContent>
-        </>
-      )}
-    </AccordionItemComponent>
-  );
-};
-
-AccordionItem.displayName = 'AccordionItem';
-Accordion.displayName = 'Accordion';
-AccordionHeader.displayName = 'AccordionHeader';
-AccordionTrigger.displayName = 'AccordionTrigger';
-AccordionContent.displayName = 'AccordionContent';
-AccordionContentText.displayName = 'AccordionContentText';
-AccordionIcon.displayName = 'AccordionIcon';
-AccordionTitleText.displayName = 'AccordionTitleText';
-
-export default Accordion;

package/src/components/Accordion/AccordionContent.tsx

@@ -1,44 +0,0 @@
-import { View, ViewProps } from 'react-native';
-import { StyleSheet } from 'react-native-unistyles';
-import { useAccordionContext } from './Accordion.context';
-import { useAccordionItemContext } from './AccordionItem.context';
-
-const AccordionContent = ({ children, style, ...props }: ViewProps) => {
-  const { noPadding: contextMoPadding, contentNoPadding } = useAccordionContext();
-  const { noPadding } = useAccordionItemContext();
-  const noPaddingValue = noPadding ?? contextMoPadding;
-  styles.useVariants({ noPadding: noPaddingValue, contentNoPadding });
-
-  return (
-    <View style={[styles.content, style]} {...props}>
-      {children}
-    </View>
-  );
-};
-
-AccordionContent.displayName = 'AccordionContent';
-
-const styles = StyleSheet.create(theme => ({
-  content: {
-    paddingTop: theme.components.accordion.item.content.paddingTop,
-    paddingHorizontal: theme.components.accordion.item.content.paddingHorizontal,
-    paddingBottom: theme.components.accordion.item.content.paddingBottom,
-    gap: theme.components.accordion.item.content.gap,
-    variants: {
-      noPadding: {
-        true: {
-          paddingHorizontal: 0,
-        },
-      },
-      contentNoPadding: {
-        true: {
-          paddingTop: 0,
-          paddingHorizontal: 0,
-          paddingBottom: 0,
-        },
-      },
-    },
-  },
-}));
-
-export default AccordionContent;

package/src/components/Accordion/AccordionContentText.tsx

@@ -1,10 +0,0 @@
-import { TextProps } from 'react-native';
-import { BodyText } from '../../components/BodyText';
-
-const AccordionContentText = ({ children, ...props }: TextProps) => {
-  return <BodyText {...props}>{children}</BodyText>;
-};
-
-AccordionContentText.displayName = 'AccordionContentText';
-
-export default AccordionContentText;

package/src/components/Accordion/AccordionHeader.tsx

@@ -1,18 +0,0 @@
-import { View, ViewProps } from 'react-native';
-import { StyleSheet } from 'react-native-unistyles';
-
-const AccordionHeader = ({ children, style, ...props }: ViewProps) => (
-  <View style={[styles.header, style]} {...props}>
-    {children}
-  </View>
-);
-
-AccordionHeader.displayName = 'AccordionHeader';
-
-const styles = StyleSheet.create({
-  header: {
-    width: '100%',
-  },
-});
-
-export default AccordionHeader;

package/src/components/Accordion/AccordionIcon.tsx

@@ -1,11 +0,0 @@
-import { Icon, IconProps } from '../../components/Icon';
-import { useTheme } from '../../hooks';
-
-const AccordionIcon = ({ as, ...props }: IconProps) => {
-  const { color } = useTheme();
-  return <Icon as={as} color={color.icon.primary} {...props} />;
-};
-
-AccordionIcon.displayName = 'AccordionIcon';
-
-export default AccordionIcon;

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

@@ -1,11 +0,0 @@
-/* eslint-disable react-refresh/only-export-components */
-import { createContext, useContext } from 'react';
-
-const AccordionItemContext = createContext<{
-  noPadding?: boolean;
-  disabled?: boolean;
-}>({});
-
-export const useAccordionItemContext = () => useContext(AccordionItemContext);
-
-export default AccordionItemContext;

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

@@ -1,27 +0,0 @@
-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/Accordion/AccordionItem.props.ts

@@ -1,20 +0,0 @@
-import { ReactNode, type JSX } from 'react';
-import { ViewProps } from 'react-native';
-
-export interface AccordionItemProps extends ViewProps {
-  value?: string;
-  disabled?: boolean;
-  title?: string;
-  expanded?: boolean;
-  /**
-   * Event handler called when the trigger is pressed.
-   */
-  toggleItem?: () => void;
-  children?: JSX.Element | Array<JSX.Element>;
-  noPadding?: boolean;
-  /**
-   * Sets the extra custom content of the accordion item trigger.
-   * @default undefined
-   */
-  triggerContent?: ReactNode;
-}

package/src/components/Accordion/AccordionItemRoot.tsx

@@ -1,27 +0,0 @@
-import { useMemo } from 'react';
-import { View } from 'react-native';
-import { StyleSheet } from 'react-native-unistyles';
-import AccordionItemContext from './AccordionItem.context';
-import { AccordionItemProps } from './AccordionItem.props';
-
-const AccordionItem = ({ children, style, noPadding, disabled, ...props }: AccordionItemProps) => {
-  const context = useMemo(() => ({ noPadding, disabled }), [noPadding, disabled]);
-  return (
-    <AccordionItemContext.Provider value={context}>
-      <View style={[styles.item, style]} {...props}>
-        {children}
-      </View>
-    </AccordionItemContext.Provider>
-  );
-};
-
-AccordionItem.displayName = 'AccordionItemRoot';
-
-const styles = StyleSheet.create(theme => ({
-  item: {
-    borderBottomWidth: theme.components.divider.size,
-    borderBottomColor: theme.components.divider.color,
-  },
-}));
-
-export default AccordionItem;