@idealyst/components 1.0.83 → 1.0.84

package/src/Breadcrumb/Breadcrumb.native.tsx

@@ -0,0 +1,225 @@
+import React, { forwardRef, isValidElement, useState } from 'react';
+import { Pressable, Text, View } from 'react-native';
+import {
+  breadcrumbContainerStyles,
+  breadcrumbItemStyles,
+  breadcrumbSeparatorStyles,
+  breadcrumbEllipsisStyles,
+  breadcrumbMenuButtonStyles
+} from './Breadcrumb.styles';
+import type { BreadcrumbProps, BreadcrumbItem as BreadcrumbItemType } from './types';
+import Icon from '../Icon';
+import type { IconName } from '../Icon/icon-types';
+import Menu from '../Menu/Menu.native';
+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 iconStyle = breadcrumbItemStyles.icon;
+
+  const renderIcon = () => {
+    if (!item.icon) return null;
+
+    if (typeof item.icon === 'string') {
+      const iconSize = iconStyle.width || 16;
+      return (
+        <Icon
+          name={item.icon as IconName}
+          size={iconSize}
+          style={iconStyle}
+        />
+      );
+    } else if (isValidElement(item.icon)) {
+      return item.icon;
+    }
+
+    return null;
+  };
+
+  const content = (
+    <View style={[breadcrumbItemStyles.item, itemStyle]}>
+      {item.icon && <View style={iconStyle}>{renderIcon()}</View>}
+      <Text style={breadcrumbItemStyles.itemText}>{item.label}</Text>
+    </View>
+  );
+
+  if (item.onPress && !item.disabled) {
+    return (
+      <Pressable
+        onPress={item.onPress}
+        disabled={item.disabled}
+        accessibilityRole="link"
+        accessibilityState={{
+          disabled: item.disabled,
+        }}
+      >
+        {content}
+      </Pressable>
+    );
+  }
+
+  return <View>{content}</View>;
+};
+
+interface BreadcrumbSeparatorProps {
+  separator: React.ReactNode;
+  size: BreadcrumbProps['size'];
+  separatorStyle?: BreadcrumbProps['separatorStyle'];
+}
+
+const BreadcrumbSeparator: React.FC<BreadcrumbSeparatorProps> = ({ separator, size, separatorStyle }) => {
+  breadcrumbSeparatorStyles.useVariants({ size });
+  const sepStyle = breadcrumbSeparatorStyles.separator;
+
+  if (typeof separator === 'string') {
+    return <Text style={[sepStyle, separatorStyle]}>{separator}</Text>;
+  }
+  return <View style={[sepStyle, separatorStyle]}>{separator}</View>;
+};
+
+interface BreadcrumbEllipsisProps {
+  size: BreadcrumbProps['size'];
+  intent: BreadcrumbProps['intent'];
+}
+
+const BreadcrumbEllipsis: React.FC<BreadcrumbEllipsisProps> = ({ size, intent }) => {
+  breadcrumbEllipsisStyles.useVariants({ size });
+  const iconStyle = breadcrumbEllipsisStyles.icon({ intent });
+
+  return (
+    <View style={breadcrumbEllipsisStyles.ellipsis}>
+      <Icon name="dots-horizontal" style={iconStyle} />
+    </View>
+  );
+};
+
+const Breadcrumb = forwardRef<View, BreadcrumbProps>(({
+  items,
+  separator = '/',
+  maxItems,
+  intent = 'primary',
+  size = 'md',
+  style,
+  itemStyle,
+  separatorStyle,
+  testID,
+  responsive = false,
+  minVisibleItems = 3,
+}, ref) => {
+  const [menuOpen, setMenuOpen] = useState(false);
+
+  // Apply variants for menu button
+  breadcrumbMenuButtonStyles.useVariants({ size });
+  const menuIconStyle = 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: typeof item.icon === 'string' ? (item.icon as IconName) : undefined,
+  }));
+
+  return (
+    <View
+      ref={ref}
+      style={[breadcrumbContainerStyles.container, style]}
+      testID={testID}
+      accessibilityLabel="Breadcrumb"
+    >
+      {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}
+                >
+                  <Pressable
+                    style={breadcrumbMenuButtonStyles.button}
+                    accessibilityRole="button"
+                    accessibilityLabel="Show more breadcrumb items"
+                  >
+                    <Icon name="dots-horizontal" style={menuIconStyle} />
+                  </Pressable>
+                </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>
+        );
+      })}
+    </View>
+  );
+});
+
+Breadcrumb.displayName = 'Breadcrumb';
+
+export default Breadcrumb;

package/src/Breadcrumb/Breadcrumb.styles.tsx

@@ -0,0 +1,234 @@
+import { StyleSheet } from 'react-native-unistyles';
+import { Theme, StylesheetStyles, CompoundVariants, Size } from '@idealyst/theme';
+import { buildSizeVariants } from '../utils/buildSizeVariants';
+
+type BreadcrumbSize = Size;
+type BreadcrumbIntent = 'primary' | 'neutral';
+
+type BreadcrumbVariants = {
+    size: BreadcrumbSize;
+    intent: BreadcrumbIntent;
+    disabled: boolean;
+    isLast: boolean;
+    clickable: boolean;
+}
+
+export type ExpandedBreadcrumbStyles = StylesheetStyles<keyof BreadcrumbVariants>;
+
+export type BreadcrumbStylesheet = {
+    container: ExpandedBreadcrumbStyles;
+    item: ExpandedBreadcrumbStyles;
+    itemText: ExpandedBreadcrumbStyles;
+    icon: ExpandedBreadcrumbStyles;
+    separator: ExpandedBreadcrumbStyles;
+    ellipsis: ExpandedBreadcrumbStyles;
+    ellipsisIcon: ExpandedBreadcrumbStyles;
+    menuButton: ExpandedBreadcrumbStyles;
+    menuButtonIcon: ExpandedBreadcrumbStyles;
+}
+
+/**
+ * Create size variants for item text
+ */
+function createItemTextSizeVariants(theme: Theme) {
+    return buildSizeVariants(theme, 'breadcrumb', (size) => ({
+        fontSize: size.fontSize,
+        lineHeight: size.lineHeight,
+    }));
+}
+
+/**
+ * Create compound variants for item text
+ */
+function createItemTextCompoundVariants(theme: Theme): CompoundVariants<keyof BreadcrumbVariants> {
+    return [
+        {
+            clickable: true,
+            intent: 'primary',
+            isLast: false,
+            disabled: false,
+            styles: { color: theme.intents.primary.primary },
+        },
+        {
+            clickable: true,
+            intent: 'neutral',
+            isLast: false,
+            disabled: false,
+            styles: { color: theme.colors.text.secondary },
+        },
+        {
+            clickable: false,
+            isLast: false,
+            disabled: false,
+            styles: { color: theme.colors.text.secondary },
+        },
+    ];
+}
+
+/**
+ * Create size variants for icons
+ */
+function createIconSizeVariants(theme: Theme) {
+    return buildSizeVariants(theme, 'breadcrumb', (size) => ({
+        width: size.iconSize,
+        height: size.iconSize,
+    }));
+}
+
+/**
+ * Get icon color based on intent
+ */
+function getIconColor(theme: Theme, intent: BreadcrumbIntent) {
+    if (intent === 'primary') {
+        return theme.intents.primary.primary;
+    }
+    return theme.colors.text.secondary;
+}
+
+const createItemTextStyles = (theme: Theme) => {
+    return {
+        variants: {
+            size: createItemTextSizeVariants(theme),
+            intent: { primary: {}, neutral: {} },
+            disabled: {
+                true: {
+                    opacity: 0.5,
+                    color: theme.colors.text.secondary,
+                },
+                false: {},
+            },
+            isLast: {
+                true: { color: theme.colors.text.primary },
+                false: {},
+            },
+            clickable: { true: {}, false: {} },
+        },
+        compoundVariants: createItemTextCompoundVariants(theme),
+    } as const;
+}
+
+const createIconStyles = (theme: Theme) => {
+    return {
+        variants: {
+            size: createIconSizeVariants(theme),
+        },
+    } as const;
+}
+
+const createSeparatorStyles = (theme: Theme) => {
+    return {
+        color: theme.colors.text.tertiary,
+        variants: {
+            size: createItemTextSizeVariants(theme),
+        },
+    } as const;
+}
+
+const createEllipsisIconStyles = (theme: Theme) => {
+    return ({ intent }: Partial<BreadcrumbVariants>) => {
+        return {
+            color: getIconColor(theme, intent),
+            variants: {
+                size: createIconSizeVariants(theme),
+            },
+        } as const;
+    }
+}
+
+const createMenuButtonIconStyles = (theme: Theme) => {
+    return ({ intent }: Partial<BreadcrumbVariants>) => {
+        return {
+            color: getIconColor(theme, intent),
+            variants: {
+                size: createIconSizeVariants(theme),
+            },
+        } as const;
+    }
+}
+
+// Styles are inlined here instead of in @idealyst/theme because Unistyles' Babel transform on native cannot resolve function calls to extract variant structures.
+// @ts-ignore - TS language server needs restart to pick up theme structure changes
+export const breadcrumbStyles = StyleSheet.create((theme: Theme) => {
+    return {
+        container: {
+            display: 'flex',
+            flexDirection: 'row',
+            alignItems: 'center',
+            flexWrap: 'wrap',
+            gap: 8,
+        },
+        item: {
+            display: 'flex',
+            flexDirection: 'row',
+            alignItems: 'center',
+            gap: 4,
+        },
+        itemText: createItemTextStyles(theme),
+        icon: createIconStyles(theme),
+        separator: createSeparatorStyles(theme),
+        ellipsis: {
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+        },
+        ellipsisIcon: createEllipsisIconStyles(theme),
+        menuButton: {
+            paddingVertical: 4,
+            paddingHorizontal: 8,
+        },
+        menuButtonIcon: createMenuButtonIconStyles(theme),
+    };
+});
+
+// Export individual style sheets for backwards compatibility
+export const breadcrumbContainerStyles = StyleSheet.create((theme: Theme) => {
+    return {
+        container: {
+            display: 'flex',
+            flexDirection: 'row',
+            alignItems: 'center',
+            flexWrap: 'wrap',
+            gap: 8,
+        },
+    };
+});
+
+export const breadcrumbItemStyles = StyleSheet.create((theme: Theme) => {
+    return {
+        item: {
+            display: 'flex',
+            flexDirection: 'row',
+            alignItems: 'center',
+            gap: 4,
+        },
+        itemText: createItemTextStyles(theme),
+        icon: createIconStyles(theme),
+    } as const;
+});
+
+export const breadcrumbSeparatorStyles = StyleSheet.create((theme: Theme) => {
+    return {
+        separator: createSeparatorStyles(theme),
+    } as const;
+});
+
+export const breadcrumbEllipsisStyles = StyleSheet.create((theme: Theme) => {
+    return {
+        ellipsis: {
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+        },
+        icon: createEllipsisIconStyles(theme),
+    } as const;
+});
+
+export const breadcrumbMenuButtonStyles = StyleSheet.create((theme: Theme) => {
+    return {
+        button: {
+            paddingVertical: 4,
+            paddingHorizontal: 8,
+        },
+        icon: createMenuButtonIconStyles(theme),
+    } as const;
+});