@utilitywarehouse/hearth-react-native 0.34.4 → 0.35.0

package/.storybook/main.ts

@@ -1,81 +0,0 @@
-import { fileURLToPath } from 'node:url';
-import { dirname } from 'node:path';
-import remarkGfm from 'remark-gfm';
-import svgr from 'vite-plugin-svgr';
-
-const unistylesPluginOptions = {
-  autoProcessImports: ['@utilitywarehouse/hearth-react-native'],
-  autoProcessPaths: ['@utilitywarehouse/hearth-react-native'],
-  root: './src',
-  debug: false,
-};
-
-/** @type { import('@storybook/react-native-web-vite').StorybookConfig } */
-const config = {
-  stories: ['../**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
-  addons: [
-    getAbsolutePath('@chromatic-com/storybook'),
-    {
-      name: getAbsolutePath('@storybook/addon-docs'),
-      options: {
-        mdxPluginOptions: {
-          mdxCompileOptions: {
-            remarkPlugins: [remarkGfm],
-          },
-        },
-      },
-    },
-    getAbsolutePath('@storybook/addon-a11y'),
-    getAbsolutePath('@storybook/addon-vitest'),
-  ],
-  framework: {
-    name: getAbsolutePath('@storybook/react-native-web-vite'),
-    options: {
-      pluginReactOptions: {
-        babel: {
-          plugins: [
-            ['react-native-unistyles/plugin', unistylesPluginOptions],
-            '@babel/plugin-proposal-export-namespace-from',
-            'react-native-worklets/plugin',
-          ],
-        },
-      },
-    },
-  },
-  viteFinal: async (config: any) => {
-    // Add SVGR plugin for web SVG imports as React components
-    config.plugins = [
-      ...(config.plugins || []),
-      svgr({
-        include: '**/*.svg',
-        svgrOptions: {
-          exportType: 'default',
-          ref: true,
-          svgo: false,
-          titleProp: true,
-          icon: true,
-        },
-      }),
-    ];
-
-    return {
-      ...config,
-      resolve: {
-        ...config.resolve,
-        alias: {
-          ...config.resolve?.alias,
-          '@utilitywarehouse/hearth-react-native-icons': '@utilitywarehouse/hearth-react-icons',
-        },
-      },
-      optimizeDeps: {
-        ...config.optimizeDeps,
-        exclude: [...(config.optimizeDeps?.exclude || []), '@utilitywarehouse/hearth-svg-assets'],
-      },
-    };
-  },
-};
-export default config;
-
-function getAbsolutePath(value: string): any {
-  return dirname(fileURLToPath(import.meta.resolve(`${value}/package.json`)));
-}

package/.storybook/manager.ts

@@ -1,11 +0,0 @@
-import '@utilitywarehouse/hearth-fonts';
-import { addons } from 'storybook/manager-api';
-import '@utilitywarehouse/hearth-storybook-utils/styles/manager.css';
-import { config } from '@utilitywarehouse/hearth-storybook-utils';
-import { create } from 'storybook/theming';
-
-const theme = create(config);
-
-addons.setConfig({
-  theme,
-});

package/.storybook/preview.tsx

@@ -1,174 +0,0 @@
-import { BottomSheetModalProvider } from '@gorhom/bottom-sheet';
-import '@utilitywarehouse/hearth-fonts';
-import { color } from '@utilitywarehouse/hearth-tokens';
-import '@utilitywarehouse/hearth-tokens/index.css';
-import { useEffect } from 'react';
-import { SafeAreaProvider } from 'react-native-safe-area-context';
-import '@utilitywarehouse/hearth-storybook-utils/styles/diff-highlighting.css';
-import '@utilitywarehouse/hearth-storybook-utils/styles/preview.css';
-import { breakpoints, StyleSheet, themes, UnistylesRuntime } from '../src/core';
-import { initializePrism } from './prism-setup';
-import { config } from '@utilitywarehouse/hearth-storybook-utils';
-import { create } from 'storybook/theming';
-
-const theme = create(config);
-
-// Initialize Prism.js for syntax highlighting
-initializePrism();
-
-StyleSheet.configure({
-  themes,
-  breakpoints,
-  settings: {
-    initialTheme: 'light',
-    adaptiveThemes: false,
-  },
-});
-
-/** @type { import('@storybook/react-native-web-vite').Preview } */
-const preview = {
-  globalTypes: {
-    darkMode: {
-      description: 'Toggle between light and dark mode',
-      defaultValue: false,
-      toolbar: {
-        title: 'Dark Mode',
-        icon: 'moon',
-        items: [
-          { value: false, icon: 'sun', title: 'Light mode' },
-          { value: true, icon: 'moon', title: 'Dark mode' },
-        ],
-        dynamicTitle: true,
-      },
-    },
-  },
-  beforeAll: () => {
-    if (!__DEV__) {
-      let canAccessParent = false;
-      try {
-        canAccessParent = window.parent.location.hostname === window.location.hostname;
-      } catch {
-        // CORS error, can't access parent domain — canAccessParent stays false
-      }
-
-      if (canAccessParent) {
-        const storiesMenuItem = window.parent.document.getElementById('stories');
-        const storiesMenuItemButton = storiesMenuItem?.querySelector('button');
-        if (storiesMenuItemButton?.getAttribute('aria-expanded') === 'true') {
-          storiesMenuItemButton.dispatchEvent(new MouseEvent('click', { bubbles: true }));
-        }
-      }
-    }
-  },
-  parameters: {
-    controls: {
-      matchers: {
-        color: /(background|color)$/i,
-        date: /Date$/i,
-      },
-    },
-    options: {
-      storySort: {
-        order: [
-          'Introduction',
-          'Getting Started',
-          'Changelog',
-          'Styling',
-          'Theme Tokens',
-          'Hooks',
-          'Layout Components',
-          'Guides',
-          'All Components',
-          'Primitives',
-          'Typography',
-          'Forms',
-        ],
-      },
-    },
-    docs: {
-      theme,
-    },
-    a11y: {
-      // 'todo' - show a11y violations in the test UI only
-      // 'error' - fail CI on a11y violations
-      // 'off' - skip a11y checks entirely
-      test: 'todo',
-    },
-  },
-  decorators: [
-    (Story, { args, globals }) => {
-      const isDarkMode = globals.darkMode;
-
-      useEffect(() => {
-        const storybookContainer = document.getElementsByTagName('body')[0];
-        if (storybookContainer) {
-          if (args.inverted) {
-            storybookContainer.style.backgroundColor = color.purple['700'];
-          } else {
-            storybookContainer.style.backgroundColor = isDarkMode
-              ? color.dark.background.primary
-              : color.light.background.primary;
-          }
-        }
-
-        let canAccessParent = false;
-        try {
-          canAccessParent = window.parent.location.hostname === window.location.hostname;
-        } catch {
-          // CORS error, can't access parent domain — canAccessParent stays false
-        }
-
-        if (canAccessParent) {
-          // Update the Storybook theme class for manager UI
-          const managerRoot = window.parent?.document?.documentElement;
-          if (managerRoot) {
-            if (isDarkMode) {
-              managerRoot.classList.add('dark');
-              managerRoot.setAttribute('data-theme', 'dark');
-            } else {
-              managerRoot.classList.remove('dark');
-              managerRoot.setAttribute('data-theme', 'light');
-            }
-            if (args.inverted) {
-              managerRoot.classList.add('inverted');
-              managerRoot.setAttribute('data-inverted', 'true');
-            } else {
-              managerRoot.classList.remove('inverted');
-              managerRoot.removeAttribute('data-inverted');
-            }
-          }
-        }
-        // Update the preview iframe theme
-        const previewRoot = document.documentElement;
-        if (previewRoot) {
-          if (isDarkMode) {
-            previewRoot.classList.add('dark');
-            previewRoot.setAttribute('data-theme', 'dark');
-          } else {
-            previewRoot.classList.remove('dark');
-            previewRoot.setAttribute('data-theme', 'light');
-          }
-          if (args.inverted) {
-            previewRoot.classList.add('inverted');
-            previewRoot.setAttribute('data-inverted', 'true');
-          } else {
-            previewRoot.classList.remove('inverted');
-            previewRoot.removeAttribute('data-inverted');
-          }
-        }
-
-        UnistylesRuntime.setTheme(isDarkMode ? 'dark' : 'light');
-      }, [isDarkMode, args.darkMode, args.surface, args.inverted]);
-
-      return (
-        <SafeAreaProvider>
-          <BottomSheetModalProvider>
-            <Story args={{ ...args, darkMode: isDarkMode }} />
-          </BottomSheetModalProvider>
-        </SafeAreaProvider>
-      );
-    },
-  ],
-};
-
-export default preview;

package/.storybook/prism-setup.ts

@@ -1,104 +0,0 @@
-import Prism from 'prismjs';
-import 'prismjs/components/prism-diff';
-import 'prismjs/themes/prism.css';
-
-// Function to escape HTML entities to prevent interpretation
-const escapeHtml = (text: string): string => {
-  return text
-    .replace(/&/g, '&')
-    .replace(/</g, '&lt;')
-    .replace(/>/g, '&gt;')
-    .replace(/"/g, '&quot;')
-    .replace(/'/g, '&#39;');
-};
-
-// Function to manually highlight diff content
-const highlightDiffContent = (element: Element) => {
-  const content = element.textContent || '';
-  const lines = content.split('\n');
-  
-  // Process each line and collect the HTML, keeping original structure
-  const processedLines = lines.map((line) => {
-    // Skip completely empty lines
-    if (line.length === 0) {
-      return '';
-    }
-    
-    const escapedLine = escapeHtml(line);
-    
-    if (line.startsWith('-')) {
-      return `<span class="token deleted">${escapedLine}</span>`;
-    } else if (line.startsWith('+')) {
-      return `<span class="token inserted">${escapedLine}</span>`;
-    } else {
-      return `<span class="token unchanged">${escapedLine}</span>`;
-    }
-  });
-  
-  // Join with newlines to preserve structure
-  element.innerHTML = processedLines.join('\n');
-};
-
-// Function to process all diff blocks
-const processDiffBlocks = () => {
-  const diffBlocks = document.querySelectorAll('.language-diff:not(.diff-processed), .language-patch:not(.diff-processed)');
-  diffBlocks.forEach((block) => {
-    highlightDiffContent(block);
-    block.classList.add('diff-processed');
-  });
-};
-
-// Initialize Prism.js for diff highlighting
-export const initializePrism = () => {
-  // Ensure Prism is available globally for Storybook
-  if (typeof window !== 'undefined') {
-    (window as any).Prism = Prism;
-    
-    // Process diff blocks immediately
-    setTimeout(processDiffBlocks, 100);
-    
-    // Set up a mutation observer to highlight new code blocks
-    const observer = new MutationObserver((mutations) => {
-      let shouldProcess = false;
-      
-      mutations.forEach((mutation) => {
-        if (mutation.type === 'childList') {
-          mutation.addedNodes.forEach((node) => {
-            if (node.nodeType === Node.ELEMENT_NODE) {
-              const element = node as Element;
-              const diffBlocks = element.querySelectorAll('.language-diff:not(.diff-processed), .language-patch:not(.diff-processed)');
-              if (diffBlocks.length > 0) {
-                shouldProcess = true;
-              }
-              // Also check if the node itself is a diff block
-              if ((element.classList.contains('language-diff') || element.classList.contains('language-patch')) && !element.classList.contains('diff-processed')) {
-                shouldProcess = true;
-              }
-            }
-          });
-        }
-      });
-      
-      if (shouldProcess) {
-        setTimeout(processDiffBlocks, 10);
-      }
-    });
-    
-    observer.observe(document.body, {
-      childList: true,
-      subtree: true
-    });
-    
-    // Also process on page navigation (for Storybook)
-    window.addEventListener('popstate', () => {
-      setTimeout(processDiffBlocks, 100);
-    });
-    
-    // Process when hash changes (Storybook story navigation)
-    window.addEventListener('hashchange', () => {
-      setTimeout(processDiffBlocks, 100);
-    });
-  }
-};
-
-export default Prism;

package/.storybook/vitest.setup.ts

@@ -1,31 +0,0 @@
-import { vi } from 'vitest';
-
-// react-native-unistyles/mocks relies on Jest globals.
-if (!(globalThis as { jest?: unknown }).jest) {
-  (globalThis as any).jest = vi;
-}
-
-await import('react-native-unistyles/mocks');
-const { StyleSheet } = await import('react-native-unistyles');
-const { breakpoints } = await import('../src/core/breakpoints');
-const { themes } = await import('../src/core/themes');
-
-vi.mock('../src/core', async () => {
-  const unistyles = await import('react-native-unistyles');
-
-  return {
-    breakpoints,
-    themes,
-    StyleSheet: unistyles.StyleSheet,
-    UnistylesRuntime: unistyles.UnistylesRuntime,
-  };
-});
-
-StyleSheet.configure({
-  breakpoints,
-  themes,
-  settings: {
-    initialTheme: 'light',
-    adaptiveThemes: false,
-  },
-});

package/.turbo/turbo-build.log

@@ -1 +0,0 @@
-$ tsc