@cdx-ui/components 0.0.1-beta.18 → 0.0.1-beta.181

package/src/components/Breadcrumbs/index.tsx

@@ -0,0 +1,311 @@
+import {
+  Children,
+  Fragment,
+  cloneElement,
+  forwardRef,
+  isValidElement,
+  useMemo,
+  type ReactElement,
+  type ReactNode,
+} from 'react';
+import { Platform, Text, View, type TextProps, type ViewProps } from 'react-native';
+import {
+  BreadcrumbsRoot as BreadcrumbsRootPrimitive,
+  LinkRoot as LinkRootPrimitive,
+  dataAttributes,
+  mergeDataAttributes,
+  useBreadcrumbsContext,
+  type IBreadcrumbsProps,
+  type ILinkProps,
+} from '@cdx-ui/primitives';
+import { cn } from '@cdx-ui/utils';
+import {
+  breadcrumbItemVariants,
+  breadcrumbDisabledCursor,
+  breadcrumbItemRootVariants,
+  breadcrumbRootVariants,
+  breadcrumbSeparatorVariants,
+} from './styles';
+
+export type { BreadcrumbColor } from '@cdx-ui/primitives';
+export type { BreadcrumbVariantProps } from './styles';
+
+type BreadcrumbItemState = 'current' | 'ancestor' | 'disabled';
+
+export interface BreadcrumbsProps extends IBreadcrumbsProps {
+  className?: string;
+  /**
+   * Separator rendered between breadcrumb items.
+   * @default `/`
+   */
+  separator?: ReactNode;
+  children?: ReactNode;
+}
+
+interface BreadcrumbItemInternalProps {
+  isLast?: boolean;
+}
+
+export interface BreadcrumbsItemProps extends Omit<ILinkProps, 'children' | 'disabled'> {
+  className?: string;
+  children?: ReactNode;
+}
+
+function isBreadcrumbsItemElement(
+  child: unknown,
+): child is ReactElement<BreadcrumbsItemProps & BreadcrumbItemInternalProps> {
+  if (!isValidElement(child)) {
+    return false;
+  }
+  const type = child.type as { displayName?: string };
+  return type.displayName === 'Breadcrumbs.Item';
+}
+
+function isTextOnlyChild(children: ReactNode): children is string | number {
+  return typeof children === 'string' || typeof children === 'number';
+}
+
+function BreadcrumbItemContent({
+  children,
+  className,
+  state,
+}: {
+  children: ReactNode;
+  className: string;
+  state: BreadcrumbItemState;
+}) {
+  if (isTextOnlyChild(children)) {
+    return (
+      <Text className={className} {...dataAttributes({ state })}>
+        {children}
+      </Text>
+    );
+  }
+
+  return (
+    <View className={cn('flex-row items-center gap-1', className)} {...dataAttributes({ state })}>
+      {children}
+    </View>
+  );
+}
+
+function BreadcrumbsSeparator({ separator }: { separator: ReactNode }) {
+  const { isDisabled } = useBreadcrumbsContext();
+  const disabledClassName = isDisabled ? breadcrumbDisabledCursor : undefined;
+  const slotProps = mergeDataAttributes({}, dataAttributes({ slot: 'breadcrumbs-separator' }));
+  const a11yProps = {
+    accessibilityElementsHidden: true,
+    importantForAccessibility: 'no-hide-descendants' as const,
+    'aria-hidden': true,
+  };
+
+  if (isTextOnlyChild(separator)) {
+    return (
+      <Text
+        className={cn(breadcrumbSeparatorVariants(), disabledClassName)}
+        {...a11yProps}
+        {...slotProps}
+      >
+        {separator}
+      </Text>
+    );
+  }
+
+  return (
+    <View
+      className={cn(
+        breadcrumbSeparatorVariants(),
+        'items-center justify-center px-1',
+        disabledClassName,
+      )}
+      {...a11yProps}
+      {...slotProps}
+    >
+      {separator}
+    </View>
+  );
+}
+
+const BreadcrumbsRoot = forwardRef<View, BreadcrumbsProps>(
+  (
+    {
+      className,
+      style,
+      children,
+      separator = '/',
+      isDisabled = false,
+      isUnderlined = false,
+      color = 'neutral',
+      accessibilityLabel,
+      ...props
+    },
+    ref,
+  ) => {
+    const items = useMemo(
+      () => Children.toArray(children).filter(isBreadcrumbsItemElement),
+      [children],
+    );
+
+    const computedClassName = cn(breadcrumbRootVariants(), className);
+
+    return (
+      <BreadcrumbsRootPrimitive
+        ref={ref}
+        className={computedClassName}
+        style={style}
+        isDisabled={isDisabled}
+        isUnderlined={isUnderlined}
+        color={color}
+        accessibilityLabel={accessibilityLabel}
+        {...props}
+      >
+        {items.map((child, index) => {
+          const isLast = index === items.length - 1;
+          const item = cloneElement(child, { isLast });
+
+          if (isLast) {
+            return (
+              <Fragment key={child.key ?? `breadcrumb-item-${String(index)}`}>{item}</Fragment>
+            );
+          }
+
+          return (
+            <Fragment key={child.key ?? `breadcrumb-item-${String(index)}`}>
+              {item}
+              <BreadcrumbsSeparator separator={separator} />
+            </Fragment>
+          );
+        })}
+      </BreadcrumbsRootPrimitive>
+    );
+  },
+);
+
+BreadcrumbsRoot.displayName = 'Breadcrumbs';
+
+function resolveStaticStyle(style: ILinkProps['style']): ViewProps['style'] {
+  return typeof style === 'function' ? undefined : style;
+}
+
+function getItemState(isLast: boolean, isDisabled: boolean): BreadcrumbItemState {
+  if (isLast) {
+    return 'current';
+  }
+  if (isDisabled) {
+    return 'disabled';
+  }
+  return 'ancestor';
+}
+
+const BreadcrumbsItem = forwardRef<View, BreadcrumbsItemProps & BreadcrumbItemInternalProps>(
+  (
+    { className, style, children, href, onPress, action, webProps, isLast = false, ...props },
+    ref,
+  ) => {
+    const { isDisabled, isUnderlined, color } = useBreadcrumbsContext();
+    const state = getItemState(isLast, isDisabled);
+    const isInteractive = !isDisabled && !isLast && !!href;
+
+    const labelClassName = cn(
+      breadcrumbItemVariants({
+        isUnderlined,
+        color,
+      }),
+      isDisabled ? breadcrumbDisabledCursor : undefined,
+      className,
+    );
+
+    const currentPageProps =
+      Platform.OS === 'web' && isLast ? ({ 'aria-current': 'page' as const } as const) : {};
+    const nativeCurrentPageProps =
+      Platform.OS !== 'web' && isLast
+        ? ({
+            accessibilityState: {
+              ...props.accessibilityState,
+              selected: true,
+            },
+          } as const)
+        : {};
+
+    if (isInteractive) {
+      return (
+        <LinkRootPrimitive
+          ref={ref}
+          href={href}
+          onPress={onPress}
+          action={action}
+          webProps={webProps}
+          className={breadcrumbItemRootVariants()}
+          style={style}
+          {...props}
+          {...mergeDataAttributes(props, dataAttributes({ slot: 'breadcrumbs-item', state }))}
+        >
+          <BreadcrumbItemContent className={labelClassName} state={state}>
+            {children}
+          </BreadcrumbItemContent>
+        </LinkRootPrimitive>
+      );
+    }
+
+    const staticStyle = resolveStaticStyle(style);
+
+    if (isTextOnlyChild(children)) {
+      return (
+        <Text
+          ref={ref as never}
+          className={cn(breadcrumbItemRootVariants(), labelClassName)}
+          style={staticStyle}
+          accessibilityRole={isLast ? 'text' : undefined}
+          {...(props as TextProps)}
+          {...currentPageProps}
+          {...nativeCurrentPageProps}
+          {...mergeDataAttributes(
+            props,
+            dataAttributes({
+              slot: 'breadcrumbs-item',
+              state,
+            }),
+          )}
+        >
+          {children}
+        </Text>
+      );
+    }
+
+    return (
+      <View
+        ref={ref}
+        className={cn(
+          breadcrumbItemRootVariants(),
+          'flex-row items-center',
+          isDisabled && breadcrumbDisabledCursor,
+        )}
+        style={staticStyle}
+        {...(props as ViewProps)}
+        {...currentPageProps}
+        {...nativeCurrentPageProps}
+        {...mergeDataAttributes(
+          props,
+          dataAttributes({
+            slot: 'breadcrumbs-item',
+            state,
+          }),
+        )}
+      >
+        <BreadcrumbItemContent className={labelClassName} state={state}>
+          {children}
+        </BreadcrumbItemContent>
+      </View>
+    );
+  },
+);
+
+BreadcrumbsItem.displayName = 'Breadcrumbs.Item';
+
+type BreadcrumbsCompoundComponent = typeof BreadcrumbsRoot & {
+  Item: typeof BreadcrumbsItem;
+};
+
+export const Breadcrumbs = Object.assign(BreadcrumbsRoot, {
+  Item: BreadcrumbsItem,
+}) as BreadcrumbsCompoundComponent;

package/src/components/Breadcrumbs/styles.ts

@@ -0,0 +1,63 @@
+import { Platform } from 'react-native';
+import { cva, type VariantProps } from '@cdx-ui/utils';
+import type { BreadcrumbColor } from '@cdx-ui/primitives';
+import { TRANSITION_COLORS } from '../../styles/constants';
+
+export const breadcrumbRootVariants = cva([
+  'flex-row flex-wrap items-center',
+  'data-[disabled=true]:opacity-[var(--opacity-disabled)]',
+  'web:data-[disabled=true]:cursor-not-allowed',
+]);
+
+export const breadcrumbDisabledCursor = 'web:cursor-not-allowed';
+
+export const breadcrumbSeparatorVariants = cva(['body-md text-content-tertiary select-none px-1']);
+
+export const breadcrumbItemRootVariants = cva([
+  'self-start',
+  'web:outline-none web:focus:outline-none web:focus-visible:outline-none',
+  'web:data-[focus-visible=true]:rounded-[2px]',
+  'web:data-[focus-visible=true]:ring-2 web:data-[focus-visible=true]:ring-stroke-focus web:data-[focus-visible=true]:ring-offset-2',
+]);
+
+const breadcrumbColorVariants = {
+  neutral: '',
+  action:
+    'data-[state=ancestor]:text-content-action data-[state=ancestor]:border-content-action web:data-[state=ancestor]:hover:text-content-primary',
+  danger:
+    'data-[state=ancestor]:text-content-danger data-[state=ancestor]:border-content-danger web:data-[state=ancestor]:hover:text-content-primary',
+  warning:
+    'data-[state=ancestor]:text-content-warning data-[state=ancestor]:border-content-warning web:data-[state=ancestor]:hover:text-content-primary',
+  success:
+    'data-[state=ancestor]:text-content-success data-[state=ancestor]:border-content-success web:data-[state=ancestor]:hover:text-content-primary',
+  info: 'data-[state=ancestor]:text-content-info data-[state=ancestor]:border-content-info web:data-[state=ancestor]:hover:text-content-primary',
+} satisfies Record<BreadcrumbColor, string>;
+
+export const breadcrumbItemVariants = cva(
+  [
+    'body-md',
+    TRANSITION_COLORS,
+    'data-[state=current]:text-content-primary',
+    'data-[state=ancestor]:text-content-secondary',
+    'data-[state=disabled]:text-content-tertiary',
+  ],
+  {
+    variants: {
+      isUnderlined: {
+        true: Platform.select({
+          web: 'data-[state=ancestor]:underline data-[state=ancestor]:underline-offset-4',
+          default:
+            'data-[state=ancestor]:border-b data-[state=ancestor]:border-content-secondary data-[state=ancestor]:pb-0.5',
+        }),
+        false: '',
+      },
+      color: breadcrumbColorVariants,
+    },
+    defaultVariants: {
+      isUnderlined: false,
+      color: 'neutral',
+    },
+  },
+);
+
+export type BreadcrumbVariantProps = VariantProps<typeof breadcrumbItemVariants>;