@utilitywarehouse/hearth-react-native 0.1.0

package/scripts/copyTokens.js

@@ -0,0 +1,96 @@
+/**
+ * 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

@@ -0,0 +1,13 @@
+/* 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.docs.mdx

@@ -0,0 +1,306 @@
+import { Meta, Canvas, Story, Controls } from '@storybook/addon-docs/blocks';
+import * as Stories from './Accordion.stories';
+import { Center, BodyText, Alert, Box, Card, List, ListItem, Flex } from '../../';
+import {
+  Accordion,
+  AccordionContent,
+  AccordionContentText,
+  AccordionHeader,
+  AccordionIcon,
+  AccordionItem,
+  AccordionTitleText,
+  AccordionTrigger,
+  Badge,
+} from '../';
+import { ViewFigmaButton, BackToTopButton, UsageWrap } from '../../../docs/components';
+
+<Meta title="Components / Accordion" />
+
+<ViewFigmaButton url="https://www.figma.com/design/6NKZXZhFSExXrcbBgc6zTR/Hearth-Components---Tokens?node-id=1-140" />
+
+<BackToTopButton />
+
+# Accordion
+
+The Accordion component is a vertically stacked set of interactive headers that each reveal a section of content.
+It is commonly used to condense large amounts of information into a more manageable format.
+
+- [Playground](#playground)
+- [Usage](#usage)
+- [Props](#props)
+- [Advanced Usage](#advanced-usage)
+- [Examples](#examples)
+  - [With heading text and helper text](#with-heading-text-and-helper-text)
+  - [With custom trigger content](#with-custom-trigger-content)
+
+## Playground
+
+<Canvas of={Stories.Playground} />
+
+<Controls of={Stories.Playground} />
+
+# Usage
+
+<UsageWrap>
+  <Center>
+    <Accordion>
+      <AccordionItem title="Item 1">
+        <BodyText>Content for Item 1</BodyText>
+      </AccordionItem>
+      <AccordionItem title="Item 2">
+        <BodyText>Content for Item 2</BodyText>
+      </AccordionItem>
+      <AccordionItem title="Item 3">
+        <BodyText>Content for Item 3</BodyText>
+      </AccordionItem>
+    </Accordion>
+  </Center>
+</UsageWrap>
+
+```tsx
+import { BodyText, Accordion, AccordionItem } from '@utilitywarehouse/hearth-react-native';
+
+const MyComponent = () => {
+  return (
+    <Accordion>
+      <AccordionItem title="Item 1">
+        <BodyText>Content for Item 1</BodyText>
+      </AccordionItem>
+      <AccordionItem title="Item 2">
+        <BodyText>Content for Item 2</BodyText>
+      </AccordionItem>
+      <AccordionItem title="Item 3">
+        <BodyText>Content for Item 3</BodyText>
+      </AccordionItem>
+    </Accordion>
+  );
+};
+```
+
+## Props
+
+| Property            | Type                        | Description                                                                                                                                                | Default    |
+| ------------------- | --------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------- |
+| `defaultValue`      | `Array<string>`             | The default value of the accordion.                                                                                                                        | `-`        |
+| `value`             | `Array<string>`             | The controlled value of the accordion.                                                                                                                     | `-`        |
+| `onValueChange`     | `(value: string[]) => void` | Callback function that is called when the value of the accordion changes.                                                                                  | `-`        |
+| `type`              | `'single' \| 'multiple'`    | The type of accordion. If set to 'single', only one item can be expanded at a time. If set to 'multiple', multiple items can be expanded at the same time. | `'single'` |
+| `collapsible`       | `boolean`                   | If true, the accordion can be collapsed.                                                                                                                   | `false`    |
+| `disabled`          | `boolean`                   | If true, the accordion is disabled.                                                                                                                        | `false`    |
+| `noPadding`         | `boolean`                   | If true, no horizontal padding is applied to the accordion items.                                                                                          | `false`    |
+| `contentNoPadding`  | `boolean`                   | If true, no horizontal padding is applied to the accordion content.                                                                                        | `false`    |
+| `headingText`       | `string`                    | The text to display in the heading of the list.                                                                                                            | `-`        |
+| `headingHelperText` | `string`                    | The supporting text to display in the heading of the list.                                                                                                 | `-`        |
+
+### `AccordionHeading`
+
+| Name         | Type     | Description                                                | Default |
+| ------------ | -------- | ---------------------------------------------------------- | ------- |
+| `text`       | `string` | The text to display in the heading of the list.            | `-`     |
+| `helperText` | `string` | The supporting text to display in the heading of the list. | `-`     |
+
+### `AccordionItem`
+
+| Property     | Type         | Description                                                          | Default |
+| ------------ | ------------ | -------------------------------------------------------------------- | ------- |
+| `title`      | `string`     | The title of the accordion item.                                     | `-`     |
+| `value`      | `string`     | The value of the accordion item.                                     | `-`     |
+| `disabled`   | `boolean`    | If true, the accordion item is disabled.                             | `-`     |
+| `expanded`   | `boolean`    | If true, the accordion item is expanded.                             | `-`     |
+| `toggleItem` | `() => void` | Callback function that is called when the accordion item is toggled. | `-`     |
+| `noPadding`  | `boolean`    | If true, no horizontal padding is applied to the accordion items.    | `-`     |
+
+## Advanced Usage
+
+The Accordion component can be used in more complex scenarios, such as when you need to control the expanded
+state of the items or when you want to customise the header and content.
+
+<UsageWrap>
+  <Center>
+    <Accordion
+      type="multiple"
+      defaultValue={['item-1']}
+      headingText="Frequently Asked Questions"
+      headingHelperText="Click to expand"
+    >
+      <AccordionItem title="How do I place an order?" value="item-1">
+        <BodyText> Lorem ipsum dolor sit amet consectetur, adipisicing elit.</BodyText>
+      </AccordionItem>
+      <AccordionItem title="What payment methods do you accept?" value="item-2">
+        <BodyText>We accept all major credit cards, PayPal, and bank transfers.</BodyText>
+      </AccordionItem>
+    </Accordion>
+  </Center>
+</UsageWrap>
+
+```tsx
+import {
+  Accordion,
+  AccordionContent,
+  AccordionContentText,
+  AccordionHeader,
+  AccordionIcon,
+  AccordionItem,
+  AccordionTitleText,
+  AccordionTrigger,
+  AccordionHeading,
+  AccordionHeadingText,
+  AccordionHeadingHelperText,
+} from '@utilitywarehouse/native-ui/lab';
+import {
+  ChevronDownSmallIcon,
+  ChevronUpSmallIcon,
+} from '@utilitywarehouse/hearth-react-native-icons';
+
+const MyComponent = () => {
+  return (
+    <Accordion type="multiple" defaultValue={['item-1']}>
+      <AccordionHeading>
+        <AccordionHeadingTextContent>
+          <AccordionHeadingText>Frequently Asked Questions</AccordionHeadingText>
+          <AccordionHeadingHelperText>Click to expand</AccordionHeadingHelperText>
+        </AccordionHeadingTextContent>
+      </AccordionHeading>
+      <AccordionItem value="a">
+        <AccordionHeader>
+          <AccordionTrigger>
+            {({ isExpanded }: { isExpanded: boolean }) => {
+              return (
+                <>
+                  <AccordionTitleText>How do I place an order?</AccordionTitleText>
+                  {isExpanded ? (
+                    <AccordionIcon as={ChevronUpSmallIcon} />
+                  ) : (
+                    <AccordionIcon as={ChevronDowSmallIcon} />
+                  )}
+                </>
+              );
+            }}
+          </AccordionTrigger>
+        </AccordionHeader>
+        <AccordionContent>
+          <AccordionContentText>
+            Lorem ipsum dolor sit amet consectetur, adipisicing elit.
+          </AccordionContentText>
+        </AccordionContent>
+      </AccordionItem>
+
+      <AccordionItem value="b">
+        <AccordionHeader>
+          <AccordionTrigger>
+            {({ isExpanded }: { isExpanded: boolean }) => {
+              return (
+                <>
+                  <AccordionTitleText>What payment methods do you accept?</AccordionTitleText>
+                  {isExpanded ? (
+                    <AccordionIcon as={ChevronUpMediumIcon} />
+                  ) : (
+                    <AccordionIcon as={ChevronDownMediumIcon} />
+                  )}
+                </>
+              );
+            }}
+          </AccordionTrigger>
+        </AccordionHeader>
+        <AccordionContent>
+          <AccordionContentText>
+            We accept all major credit cards, PayPal, and bank transfers.
+          </AccordionContentText>
+        </AccordionContent>
+      </AccordionItem>
+    </Accordion>
+  );
+};
+```
+
+## Examples
+
+### With heading text and helper text
+
+You can add a heading and helper text to the accordion to provide context for the user.
+
+<UsageWrap>
+  <Center>
+    <Accordion
+      type="multiple"
+      defaultValue={['item-1']}
+      headingText="Frequently Asked Questions"
+      headingHelperText="Click to expand"
+    >
+      <AccordionItem title="How do I place an order?" value="item-1">
+        <BodyText> Lorem ipsum dolor sit amet consectetur, adipisicing elit.</BodyText>
+      </AccordionItem>
+      <AccordionItem title="What payment methods do you accept?" value="item-2">
+        <BodyText>We accept all major credit cards, PayPal, and bank transfers.</BodyText>
+      </AccordionItem>
+    </Accordion>
+  </Center>
+</UsageWrap>
+
+```tsx
+import { Accordion, AccordionItem, BodyText } from '@utilitywarehouse/hearth-react-native';
+import {
+  ChevronDownSmallIcon,
+  ChevronUpSmallIcon,
+} from '@utilitywarehouse/hearth-react-native-icons';
+
+const MyComponent = () => {
+  return (
+    <Accordion
+      type="multiple"
+      defaultValue={['item-1']}
+      headingText="Frequently Asked Questions"
+      headingHelperText="Click to expand"
+    >
+      <AccordionItem title="How do I place an order?" value="item-1">
+        <BodyText> Lorem ipsum dolor sit amet consectetur, adipisicing elit.</BodyText>
+      </AccordionItem>
+      <AccordionItem title="What payment methods do you accept?" value="item-2">
+        <BodyText>We accept all major credit cards, PayPal, and bank transfers.</BodyText>
+      </AccordionItem>
+    </Accordion>
+  );
+};
+```
+
+### With custom trigger content
+
+You can use custom content for the trigger of the accordion item, such as an icon or badge.
+
+<UsageWrap>
+  <Center>
+    <Accordion type="multiple" defaultValue={['item-1']}>
+      <AccordionItem
+        title="How do I place an order?"
+        value="item-1"
+        triggerContent={<Badge>New Content</Badge>}
+      >
+        <BodyText> Lorem ipsum dolor sit amet consectetur, adipisicing elit.</BodyText>
+      </AccordionItem>
+      <AccordionItem title="What payment methods do you accept?" value="item-2">
+        <BodyText>We accept all major credit cards, PayPal, and bank transfers.</BodyText>
+      </AccordionItem>
+    </Accordion>
+  </Center>
+</UsageWrap>
+
+```tsx
+import { Accordion, AccordionItem, Badge, BodyText } from '@utilitywarehouse/hearth-react-native';
+
+const MyComponent = () => {
+  return (
+    <Accordion type="multiple" defaultValue={['item-1']}>
+      <AccordionItem
+        title="How do I place an order?"
+        value="item-1"
+        triggerContent={<Badge>New Content</Badge>}
+      >
+        <BodyText> Lorem ipsum dolor sit amet consectetur, adipisicing elit.</BodyText>
+      </AccordionItem>
+      <AccordionItem title="What payment methods do you accept?" value="item-2">
+        <BodyText>We accept all major credit cards, PayPal, and bank transfers.</BodyText>
+      </AccordionItem>
+    </Accordion>
+  );
+};
+```

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

@@ -0,0 +1,43 @@
+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;
+  headingText?: string;
+  headingHelperText?: string;
+}

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

@@ -0,0 +1,118 @@
+import {
+  Accordion,
+  AccordionItem,
+  AccordionHeader,
+  AccordionTrigger,
+  AccordionTitleText,
+  AccordionIcon,
+  AccordionContent,
+  AccordionContentText,
+} from '.';
+import { Meta, StoryObj } from '@storybook/react-vite';
+import { BodyText } from '../../components';
+import {
+  ChevronDownSmallIcon,
+  ChevronUpSmallIcon,
+} from '@utilitywarehouse/hearth-react-native-icons';
+
+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>
+    );
+  },
+};