feat: add component breadcrumb

Author: Ohh-889

packages/ui-variants/src/index.ts

@@ -7,6 +7,7 @@ export * from './variants/alert';
 export * from './variants/alert-dialog';
 export * from './variants/avatar';
 export * from './variants/badge';
+export * from './variants/breadcrumb';
 export * from './variants/button';
 export * from './variants/button-group';
 export * from './variants/card';

packages/ui-variants/src/variants/breadcrumb.ts

@@ -0,0 +1,52 @@
+import { tv } from 'tailwind-variants';
+
+export const breadcrumbVariants = tv({
+  defaultVariants: {
+    size: 'md'
+  },
+  slots: {
+    ellipsis: 'flex items-center justify-center',
+    item: 'inline-flex items-center list-none',
+    link: 'hover:text-foreground transition-colors-200 rounded-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-offset-background focus-visible:ring-primary',
+    list: 'flex flex-wrap items-center my-0 break-words text-muted-foreground',
+    page: 'font-normal text-foreground',
+    root: '',
+    separator: 'text-muted-foreground flex-shrink-0 list-none'
+  },
+  variants: {
+    size: {
+      '2xl': {
+        item: 'gap-3.5',
+        list: 'gap-4.5',
+        root: 'text-xl'
+      },
+      lg: {
+        item: 'gap-2.5',
+        list: 'gap-3.5',
+        root: 'text-base'
+      },
+      md: {
+        item: 'gap-2',
+        list: 'gap-3',
+        root: 'text-sm'
+      },
+      sm: {
+        item: 'gap-1.75',
+        list: 'gap-2.5',
+        root: 'text-xs'
+      },
+      xl: {
+        item: 'gap-3',
+        list: 'gap-4',
+        root: 'text-lg'
+      },
+      xs: {
+        item: 'gap-1.5',
+        list: 'gap-2',
+        root: 'text-2xs'
+      }
+    }
+  }
+});
+
+export type BreadcrumbSlots = keyof typeof breadcrumbVariants.slots;

packages/ui/src/components/breadcrumb/index.ts

@@ -0,0 +1,10 @@
+export { default as Breadcrumb } from './source/Breadcrumb';
+export { default as BreadcrumbEllipsis } from './source/BreadcrumbEllipsis';
+export { default as BreadcrumbItemContent } from './source/BreadcrumbItem';
+export { default as BreadcrumbLink } from './source/BreadcrumbLink';
+export { default as BreadcrumbList } from './source/BreadcrumbList';
+export { default as BreadcrumbPage } from './source/BreadcrumbPage';
+export { default as BreadcrumbRoot } from './source/BreadcrumbRoot';
+export { default as BreadcrumbSeparator } from './source/BreadcrumbSeparator';
+
+export * from './types';

packages/ui/src/components/breadcrumb/source/Breadcrumb.tsx

@@ -0,0 +1,128 @@
+import type { Ref } from 'react';
+import { Fragment, forwardRef } from 'react';
+
+import type { BreadcrumbItem, BreadcrumbProps } from '../types';
+
+import BreadcrumbEllipsis from './BreadcrumbEllipsis';
+import BreadcrumbItemContent from './BreadcrumbItem';
+import BreadcrumbLink from './BreadcrumbLink';
+import BreadcrumbList from './BreadcrumbList';
+import BreadcrumbPage from './BreadcrumbPage';
+import BreadcrumbRoot from './BreadcrumbRoot';
+import BreadcrumbSeparator from './BreadcrumbSeparator';
+
+type EllipsisProps<T extends BreadcrumbItem> = Pick<
+  BreadcrumbProps<T>,
+  'className' | 'ellipsisIcon' | 'items' | 'renderEllipsis'
+>;
+
+const Ellipsis = <T extends BreadcrumbItem>({ className, ellipsisIcon, items, renderEllipsis }: EllipsisProps<T>) => {
+  if (!renderEllipsis) return <BreadcrumbEllipsis className={className}>{ellipsisIcon}</BreadcrumbEllipsis>;
+
+  return renderEllipsis(items);
+};
+
+function renderBreadcrumbContent<T extends BreadcrumbItem>(item: T, renderItem: BreadcrumbProps<T>['renderItem']) {
+  if (renderItem) return renderItem(item);
+
+  if (item.href) return <BreadcrumbLink {...item}>{item.label}</BreadcrumbLink>;
+
+  return <BreadcrumbPage {...item}>{item.label}</BreadcrumbPage>;
+}
+
+const Breadcrumb = <T extends BreadcrumbItem>(props: BreadcrumbProps<T>, ref: Ref<HTMLElement>) => {
+  const { className, classNames, ellipsis, ellipsisIcon, items, renderEllipsis, renderItem, separator, size, ...rest } =
+    props;
+
+  const computedEllipsisRange = getEllipsisRange();
+
+  const itemsFilterEllipsis = getItemsFilterEllipsis();
+
+  const startEllipsisIndex = computedEllipsisRange?.[0];
+
+  const ellipsisItems = computedEllipsisRange ? items.slice(computedEllipsisRange[0], computedEllipsisRange[1]) : [];
+
+  function getItemsFilterEllipsis() {
+    if (!computedEllipsisRange) return items;
+
+    const [start, end] = computedEllipsisRange;
+
+    return [...items.slice(0, start), ...items.slice(end)];
+  }
+
+  function getEllipsisRange() {
+    /** when the item count is greater than 4, we will show ellipsis */
+    const MIN_ITEM_COUNT_WITH_ELLIPSIS = 5;
+
+    if (!ellipsis || items.length < MIN_ITEM_COUNT_WITH_ELLIPSIS) return null;
+
+    if (ellipsis === true) {
+      return [1, items.length - 2];
+    }
+
+    let [start, end] = ellipsis;
+
+    if (start === 0) {
+      start = 1;
+    }
+
+    if (end === items.length) {
+      end = items.length - 1;
+    }
+
+    return [start, end];
+  }
+
+  return (
+    <BreadcrumbRoot
+      className={className || classNames?.root}
+      size={size}
+      {...rest}
+      ref={ref}
+    >
+      <BreadcrumbList
+        className={classNames?.list}
+        size={size}
+      >
+        {itemsFilterEllipsis.map((item, index) => {
+          const isEllipsis = startEllipsisIndex && startEllipsisIndex === index;
+
+          const isShowSeparator = index < itemsFilterEllipsis.length - 1;
+
+          return (
+            <Fragment key={item.value}>
+              {isEllipsis && (
+                <>
+                  <Ellipsis<T>
+                    className={classNames?.ellipsis}
+                    ellipsisIcon={ellipsisIcon}
+                    items={ellipsisItems}
+                    renderEllipsis={renderEllipsis}
+                  />
+                  {separator || <BreadcrumbSeparator className={classNames?.separator} />}
+                </>
+              )}
+
+              <BreadcrumbItemContent
+                className={classNames?.item}
+                size={size}
+              >
+                {item.leading}
+
+                {renderBreadcrumbContent(item, renderItem)}
+
+                {item.trailing}
+              </BreadcrumbItemContent>
+
+              {isShowSeparator && (separator || <BreadcrumbSeparator className={classNames?.separator} />)}
+            </Fragment>
+          );
+        })}
+      </BreadcrumbList>
+    </BreadcrumbRoot>
+  );
+};
+
+Breadcrumb.displayName = 'Breadcrumb';
+
+export default forwardRef(Breadcrumb);

packages/ui/src/components/breadcrumb/source/BreadcrumbEllipsis.tsx

@@ -0,0 +1,27 @@
+import { breadcrumbVariants, cn } from '@soybean-react-ui/variants';
+import { Ellipsis } from 'lucide-react';
+
+import type { BreadcrumbEllipsisProps } from '../types';
+
+const BreadcrumbEllipsis = (props: BreadcrumbEllipsisProps) => {
+  const { children, className, ...rest } = props;
+
+  const { ellipsis } = breadcrumbVariants();
+
+  const mergedCls = cn(ellipsis, className);
+  return (
+    <span
+      aria-hidden="true"
+      className={mergedCls}
+      role="presentation"
+      {...rest}
+    >
+      {children || <Ellipsis />}
+      <span className="sr-only">More</span>
+    </span>
+  );
+};
+
+BreadcrumbEllipsis.displayName = 'BreadcrumbEllipsis';
+
+export default BreadcrumbEllipsis;

packages/ui/src/components/breadcrumb/source/BreadcrumbItem.tsx

@@ -0,0 +1,24 @@
+import { breadcrumbVariants, cn } from '@soybean-react-ui/variants';
+import { forwardRef } from 'react';
+
+import type { BreadcrumbItemProps } from '../types';
+
+const BreadcrumbItem = forwardRef<HTMLLIElement, BreadcrumbItemProps>((props, ref) => {
+  const { className, size, ...rest } = props;
+
+  const { item } = breadcrumbVariants({ size });
+
+  const mergedCls = cn(item(), className);
+
+  return (
+    <li
+      className={mergedCls}
+      ref={ref}
+      {...rest}
+    />
+  );
+});
+
+BreadcrumbItem.displayName = 'BreadcrumbItem';
+
+export default BreadcrumbItem;

packages/ui/src/components/breadcrumb/source/BreadcrumbLink.tsx

@@ -0,0 +1,27 @@
+import { Slot } from '@radix-ui/react-slot';
+import { breadcrumbVariants, cn } from '@soybean-react-ui/variants';
+import { forwardRef } from 'react';
+
+import type { BreadcrumbLinkProps } from '../types';
+
+const BreadcrumbLink = forwardRef<HTMLAnchorElement, BreadcrumbLinkProps>((props, ref) => {
+  const { asChild, className, ...rest } = props;
+
+  const Comp = asChild ? Slot : 'a';
+
+  const { link } = breadcrumbVariants();
+
+  const mergedCls = cn(link(), className);
+
+  return (
+    <Comp
+      className={mergedCls}
+      ref={ref}
+      {...rest}
+    />
+  );
+});
+
+BreadcrumbLink.displayName = 'BreadcrumbLink';
+
+export default BreadcrumbLink;

packages/ui/src/components/breadcrumb/source/BreadcrumbList.tsx

@@ -0,0 +1,24 @@
+import { breadcrumbVariants, cn } from '@soybean-react-ui/variants';
+import { forwardRef } from 'react';
+
+import type { BreadcrumbListProps } from '../types';
+
+const BreadcrumbList = forwardRef<HTMLOListElement, BreadcrumbListProps>((props, ref) => {
+  const { className, size, ...rest } = props;
+
+  const { list } = breadcrumbVariants({ size });
+
+  const mergedCls = cn(list(), className);
+
+  return (
+    <ol
+      className={mergedCls}
+      ref={ref}
+      {...rest}
+    />
+  );
+});
+
+BreadcrumbList.displayName = 'BreadcrumbList';
+
+export default BreadcrumbList;

packages/ui/src/components/breadcrumb/source/BreadcrumbPage.tsx

@@ -0,0 +1,27 @@
+import { breadcrumbVariants, cn } from '@soybean-react-ui/variants';
+import { forwardRef } from 'react';
+
+import type { BreadcrumbPageProps } from '../types';
+
+const BreadcrumbPage = forwardRef<HTMLSpanElement, BreadcrumbPageProps>((props, ref) => {
+  const { className, size, ...rest } = props;
+
+  const { page } = breadcrumbVariants({ size });
+
+  const mergedCls = cn(page(), className);
+
+  return (
+    <span
+      aria-current="page"
+      aria-disabled="true"
+      className={mergedCls}
+      ref={ref}
+      role="link"
+      {...rest}
+    />
+  );
+});
+
+BreadcrumbPage.displayName = 'BreadcrumbPage';
+
+export default BreadcrumbPage;

packages/ui/src/components/breadcrumb/source/BreadcrumbRoot.tsx

@@ -0,0 +1,25 @@
+import { breadcrumbVariants, cn } from '@soybean-react-ui/variants';
+import { forwardRef } from 'react';
+
+import type { BreadcrumbRootProps } from '../types';
+
+const BreadcrumbRoot = forwardRef<HTMLElement, BreadcrumbRootProps>((props, ref) => {
+  const { className, size, ...rest } = props;
+
+  const { root } = breadcrumbVariants({ size });
+
+  const mergedCls = cn(root(), className);
+
+  return (
+    <nav
+      aria-label="breadcrumb"
+      className={mergedCls}
+      ref={ref}
+      {...rest}
+    />
+  );
+});
+
+BreadcrumbRoot.displayName = 'BreadcrumbRoot';
+
+export default BreadcrumbRoot;