@idealyst/components 1.0.83 → 1.0.85

package/src/Breadcrumb/Breadcrumb.web.tsx

@@ -0,0 +1,268 @@
+import React, { isValidElement, useState, useRef, useEffect } from 'react';
+import { getWebProps } from 'react-native-unistyles/web';
+import {
+  breadcrumbContainerStyles,
+  breadcrumbItemStyles,
+  breadcrumbSeparatorStyles,
+  breadcrumbEllipsisStyles,
+  breadcrumbMenuButtonStyles
+} from './Breadcrumb.styles';
+import type { BreadcrumbProps, BreadcrumbItem as BreadcrumbItemType } from './types';
+import { IconSvg } from '../Icon/IconSvg/IconSvg.web';
+import { resolveIconPath, isIconName } from '../Icon/icon-resolver';
+import Menu from '../Menu/Menu.web';
+import type { MenuItem } from '../Menu/types';
+
+interface BreadcrumbItemProps {
+  item: BreadcrumbItemType;
+  isLast: boolean;
+  size: BreadcrumbProps['size'];
+  intent: BreadcrumbProps['intent'];
+  itemStyle?: BreadcrumbProps['itemStyle'];
+}
+
+const BreadcrumbItem: React.FC<BreadcrumbItemProps> = ({ item, isLast, size, intent, itemStyle }) => {
+  // Apply variants for this item only
+  breadcrumbItemStyles.useVariants({
+    size,
+    intent,
+    disabled: item.disabled || false,
+    isLast,
+    clickable: !!item.onPress && !item.disabled,
+  });
+
+  const itemProps = getWebProps([breadcrumbItemStyles.item]);
+  const itemTextProps = getWebProps([breadcrumbItemStyles.itemText, itemStyle]);
+  const iconProps = getWebProps([breadcrumbItemStyles.icon]);
+
+  const handleClick = () => {
+    if (!item.disabled && item.onPress) {
+      item.onPress();
+    }
+  };
+
+  const renderIcon = () => {
+    if (!item.icon) return null;
+
+    if (isIconName(item.icon)) {
+      const iconPath = resolveIconPath(item.icon);
+      return (
+        <IconSvg
+          path={iconPath}
+          {...iconProps}
+          aria-label={item.icon}
+        />
+      );
+    } else if (isValidElement(item.icon)) {
+      return item.icon;
+    }
+
+    return null;
+  };
+
+  const content = (
+    <div {...itemProps}>
+      {item.icon && (
+        <span
+          {...iconProps}
+          style={{
+            display: 'inline-flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+          }}
+        >
+          {renderIcon()}
+        </span>
+      )}
+      <span {...itemTextProps}>
+        {item.label}
+      </span>
+    </div>
+  );
+
+  if (item.onPress && !item.disabled) {
+    return (
+      <button
+        onClick={handleClick}
+        style={{
+          background: 'none',
+          border: 'none',
+          padding: 0,
+          cursor: 'pointer',
+          textDecoration: 'none',
+        }}
+        disabled={item.disabled}
+        aria-current={isLast ? 'page' : undefined}
+      >
+        {content}
+      </button>
+    );
+  }
+
+  return (
+    <div aria-current={isLast ? 'page' : undefined}>
+      {content}
+    </div>
+  );
+};
+
+interface BreadcrumbSeparatorProps {
+  separator: React.ReactNode;
+  size: BreadcrumbProps['size'];
+  separatorStyle?: BreadcrumbProps['separatorStyle'];
+}
+
+const BreadcrumbSeparator: React.FC<BreadcrumbSeparatorProps> = ({ separator, size, separatorStyle }) => {
+  breadcrumbSeparatorStyles.useVariants({ size });
+  const separatorProps = getWebProps([breadcrumbSeparatorStyles.separator, separatorStyle]);
+
+  return (
+    <span {...separatorProps} aria-hidden="true">
+      {separator}
+    </span>
+  );
+};
+
+interface BreadcrumbEllipsisProps {
+  size: BreadcrumbProps['size'];
+  intent: BreadcrumbProps['intent'];
+}
+
+const BreadcrumbEllipsis: React.FC<BreadcrumbEllipsisProps> = ({ size, intent }) => {
+  breadcrumbEllipsisStyles.useVariants({ size });
+  const ellipsisProps = getWebProps([breadcrumbEllipsisStyles.ellipsis]);
+  const iconProps = getWebProps([breadcrumbEllipsisStyles.icon({ intent })]);
+  const ellipsisIconPath = resolveIconPath('dots-horizontal');
+
+  return (
+    <span {...ellipsisProps}>
+      <IconSvg
+        path={ellipsisIconPath}
+        {...iconProps}
+        aria-label="more items"
+      />
+    </span>
+  );
+};
+
+const Breadcrumb: React.FC<BreadcrumbProps> = ({
+  items,
+  separator = '/',
+  maxItems,
+  intent = 'primary',
+  size = 'md',
+  style,
+  itemStyle,
+  separatorStyle,
+  testID,
+  responsive = false,
+  minVisibleItems = 3,
+}) => {
+  const [menuOpen, setMenuOpen] = useState(false);
+  const containerProps = getWebProps([breadcrumbContainerStyles.container, style as any]);
+  const menuIconPath = resolveIconPath('dots-horizontal');
+
+  // Apply variants for menu button
+  breadcrumbMenuButtonStyles.useVariants({ size });
+  const menuButtonProps = getWebProps([breadcrumbMenuButtonStyles.button]);
+  const menuIconProps = getWebProps([breadcrumbMenuButtonStyles.icon({ intent })]);
+
+  // Handle responsive collapsing
+  let displayItems = items;
+  let collapsedItems: BreadcrumbItemType[] = [];
+  let showMenu = false;
+  let showEllipsis = false;
+
+  if (responsive && items.length > minVisibleItems) {
+    // Responsive mode: show first item + menu + last (minVisibleItems - 2) items
+    showMenu = true;
+    const lastItemCount = Math.max(1, minVisibleItems - 2);
+    displayItems = [
+      items[0],
+      ...items.slice(-lastItemCount),
+    ];
+    collapsedItems = items.slice(1, -(lastItemCount));
+  } else if (maxItems && items.length > maxItems) {
+    // Legacy truncation mode
+    showEllipsis = true;
+    const firstItems = items.slice(0, 1);
+    const lastItems = items.slice(-(maxItems - 1));
+    displayItems = [...firstItems, ...lastItems];
+  }
+
+  // Convert collapsed breadcrumb items to menu items
+  const menuItems: MenuItem[] = collapsedItems.map((item, index) => ({
+    id: `collapsed-${index}`,
+    label: item.label,
+    onClick: item.onPress,
+    disabled: item.disabled,
+    icon: isIconName(item.icon) ? item.icon : undefined,
+  }));
+
+  return (
+    <nav {...containerProps} aria-label="Breadcrumb" data-testid={testID}>
+      {displayItems.map((item, index) => {
+        const isLast = index === displayItems.length - 1;
+        const shouldShowEllipsis = showEllipsis && index === 1;
+        const shouldShowMenu = showMenu && index === 1;
+
+        return (
+          <React.Fragment key={index}>
+            {shouldShowEllipsis && (
+              <>
+                <BreadcrumbEllipsis size={size} intent={intent} />
+                <BreadcrumbSeparator separator={separator} size={size} separatorStyle={separatorStyle} />
+              </>
+            )}
+
+            {shouldShowMenu && (
+              <>
+                <Menu
+                  items={menuItems}
+                  open={menuOpen}
+                  onOpenChange={setMenuOpen}
+                  placement="bottom-start"
+                  size={size}
+                >
+                  <button
+                    className={menuButtonProps.className}
+                    style={{
+                      background: 'none',
+                      border: 'none',
+                      cursor: 'pointer',
+                      display: 'inline-flex',
+                      alignItems: 'center',
+                      justifyContent: 'center',
+                    }}
+                    aria-label="Show more breadcrumb items"
+                  >
+                    <IconSvg
+                      path={menuIconPath}
+                      {...menuIconProps}
+                      aria-label="dots-horizontal"
+                    />
+                  </button>
+                </Menu>
+                <BreadcrumbSeparator separator={separator} size={size} separatorStyle={separatorStyle} />
+              </>
+            )}
+
+            <BreadcrumbItem
+              item={item}
+              isLast={isLast}
+              size={size}
+              intent={intent}
+              itemStyle={itemStyle}
+            />
+
+            {!isLast && (
+              <BreadcrumbSeparator separator={separator} size={size} separatorStyle={separatorStyle} />
+            )}
+          </React.Fragment>
+        );
+      })}
+    </nav>
+  );
+};
+
+export default Breadcrumb;

package/src/Breadcrumb/index.native.ts

@@ -0,0 +1,5 @@
+import BreadcrumbComponent from './Breadcrumb.native';
+
+export default BreadcrumbComponent;
+export { BreadcrumbComponent as Breadcrumb };
+export type { BreadcrumbProps, BreadcrumbItem } from './types';

package/src/Breadcrumb/index.ts

@@ -0,0 +1,5 @@
+import BreadcrumbComponent from './Breadcrumb.web';
+
+export default BreadcrumbComponent;
+export { BreadcrumbComponent as Breadcrumb };
+export type { BreadcrumbProps, BreadcrumbItem } from './types';

package/src/Breadcrumb/index.web.ts

@@ -0,0 +1,5 @@
+import BreadcrumbComponent from './Breadcrumb.web';
+
+export default BreadcrumbComponent;
+export { BreadcrumbComponent as Breadcrumb };
+export type { BreadcrumbProps, BreadcrumbItem } from './types';

package/src/Breadcrumb/types.ts

@@ -0,0 +1,56 @@
+import type { StyleProp, ViewStyle, TextStyle } from 'react-native';
+import type { IconName } from '../Icon/icon-types';
+import { Size } from '@idealyst/theme';
+
+// Component-specific type aliases for future extensibility
+export type BreadcrumbIntentVariant = 'primary' | 'neutral';
+export type BreadcrumbSizeVariant = Size;
+
+export interface BreadcrumbItem {
+  /** Label text for the breadcrumb item */
+  label: string;
+
+  /** Optional icon to display before the label - can be an IconName or custom component */
+  icon?: IconName | React.ReactNode;
+
+  /** Click handler for the breadcrumb item */
+  onPress?: () => void;
+
+  /** Whether this item is disabled */
+  disabled?: boolean;
+}
+
+export interface BreadcrumbProps {
+  /** Array of breadcrumb items */
+  items: BreadcrumbItem[];
+
+  /** Custom separator between items (default: '/') */
+  separator?: React.ReactNode;
+
+  /** Maximum number of items to show before truncating */
+  maxItems?: number;
+
+  /** Intent color for links */
+  intent?: BreadcrumbIntentVariant;
+
+  /** Size of the breadcrumb text */
+  size?: BreadcrumbSizeVariant;
+
+  /** Custom container style */
+  style?: StyleProp<ViewStyle>;
+
+  /** Custom item style */
+  itemStyle?: StyleProp<ViewStyle>;
+
+  /** Custom separator style */
+  separatorStyle?: StyleProp<TextStyle>;
+
+  /** Test ID for testing */
+  testID?: string;
+
+  /** Enable responsive collapsing on narrow screens */
+  responsive?: boolean;
+
+  /** Minimum number of items to show before collapsing (default: 3) */
+  minVisibleItems?: number;
+}

package/src/Button/Button.native.tsx

@@ -1,39 +1,90 @@
-import React from 'react';
-import { TouchableOpacity, Text } from 'react-native';
+import React, { isValidElement, forwardRef, ComponentRef } from 'react';
+import { TouchableOpacity, Text, View } from 'react-native';
+import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons';
 import { ButtonProps } from './types';
 import { buttonStyles } from './Button.styles';
 
-const Button: React.FC<ButtonProps> = ({
-  children,
-  title,
-  onPress,
-  disabled = false,
-  variant = 'contained',
-  intent = 'primary',
-  size = 'medium',
-  style,
-  testID,
-}) => {
-  buttonStyles.useVariants({
-    size,
-    intent,
-    variant,
-    disabled,
-  });
+const Button = forwardRef<ComponentRef<typeof TouchableOpacity>, ButtonProps>((props, ref) => {
+  const {
+    children,
+    title,
+    onPress,
+    disabled = false,
+    type = 'contained',
+    intent = 'primary',
+    size = 'md',
+    leftIcon,
+    rightIcon,
+    style,
+    testID,
+  } = props;
+
+  // Compute dynamic styles
+  const buttonStyle = buttonStyles.button(size, intent, type, disabled);
+  const textStyle = buttonStyles.text(size, intent, type, disabled);
+  const iconStyle = buttonStyles.icon(size, intent, type);
+
+  // Map button size to icon size
+  const iconSizeMap = {
+    xs: 12,
+    sm: 14,
+    md: 16,
+    lg: 18,
+    xl: 20,
+  } as const;
+  const iconSize = iconSizeMap[size];
+
+  // Helper to render icon - uses the icon styles from buttonStyles
+  const renderIcon = (icon: string | React.ReactNode) => {
+    if (typeof icon === 'string') {
+      // Render MaterialCommunityIcons with explicit size prop
+      // The icon styles provide the correct color based on dynamic styles
+      return (
+        <MaterialCommunityIcons
+          name={icon}
+          size={iconSize}
+          style={iconStyle}
+        />
+      );
+    } else if (isValidElement(icon)) {
+      // Render custom component as-is
+      return icon;
+    }
+    return null;
+  };
+
+  // Use children if available, otherwise use title
+  const buttonContent = children || title;
+
+  // Determine if we need to wrap content in icon container
+  const hasIcons = leftIcon || rightIcon;
 
   return (
     <TouchableOpacity
+      ref={ref}
       onPress={onPress}
       disabled={disabled}
       testID={testID}
       activeOpacity={0.7}
-      style={[buttonStyles.button, style]}
+      style={[buttonStyle, style]}
     >
-      <Text style={buttonStyles.text}>
-        {children || title}
-      </Text>
+      {hasIcons ? (
+        <View style={buttonStyles.iconContainer}>
+          {leftIcon && renderIcon(leftIcon)}
+          <Text style={textStyle}>
+            {buttonContent}
+          </Text>
+          {rightIcon && renderIcon(rightIcon)}
+        </View>
+      ) : (
+        <Text style={textStyle}>
+          {buttonContent}
+        </Text>
+      )}
     </TouchableOpacity>
   );
-};
+});
+
+Button.displayName = 'Button';
 
 export default Button;