Merge pull request #12 from Bland-UI/feat/breadcrumb

Feat/breadcrumb

.changeset/cuddly-papayas-rescue.md

@@ -0,0 +1,5 @@
+---
+"@blandui/blandui-react": patch
+---
+
+BreadCrumb added

apps/storybook-react/package.json

@@ -11,6 +11,7 @@
 		"@blandui/blandui-react": "workspace:*",
 		"@tailwindcss/forms": "^0.5.7",
 		"autoprefixer": "^10.4.19",
+		"lucide-react": "^0.395.0",
 		"postcss": "^8.4.38",
 		"tailwindcss": "^3.4.3",
 		"typescript": "^5.4.5"

apps/storybook-react/stories/BreadCrumb.stories.tsx

@@ -0,0 +1,45 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { BreadCrumb } from '@blandui/blandui-react';
+import { BreadCrumbItem } from '@blandui/blandui-react/dist/types/components/BreadCrumb/BreadCrumb';
+import { Component, Home, Info, InfoIcon } from 'lucide-react';
+
+const meta: Meta<typeof BreadCrumb> = {
+	title:     'Component/BreadCrumb',
+	component: BreadCrumb,
+};
+
+export default meta;
+type Story = StoryObj<typeof BreadCrumb>;
+
+
+export const Default: Story = {
+	render: () => {
+		const items: BreadCrumbItem[] = [
+			{ title: 'BlandUI' },
+			{ title: 'Components' },
+			{ title: 'BreadCrumb' },
+		];
+
+		return (
+			<div className="flex flex-col gap-lg items-start justify-center">
+				<BreadCrumb items={items} />
+			</div>
+		);
+	},
+};
+
+export const WithIcons: Story = {
+	render: () => {
+		const items: BreadCrumbItem[] = [
+			{ title: <><Home size="1rem" fontSize={14}/>BlandUI</> },
+			{ title: <><Component size="1rem"/>Components</> },
+			{ title: <><InfoIcon size="1rem"/>BreadCrumb</> },
+		];
+
+		return (
+			<div className="flex flex-col gap-lg items-start justify-center">
+				<BreadCrumb items={items} />
+			</div>
+		);
+	},
+};

packages/blandui-react/src/components/BreadCrumb/BreadCrumb.tsx

@@ -0,0 +1,71 @@
+import {
+	forwardRef, Fragment, MouseEventHandler, ReactNode,
+} from 'react';
+import { ChevronRight } from 'lucide-react';
+import cn from '../../utils/cn';
+
+export interface BreadCrumbItem {
+	title: ReactNode;
+
+	onClick?: MouseEventHandler;
+	href?: string;
+}
+
+export interface BreadCrumbProps {
+	className?: string;
+	separator?: ReactNode;
+	items: BreadCrumbItem[];
+}
+
+export const BreadCrumb = forwardRef<HTMLDivElement, BreadCrumbProps>(({
+	className,
+	separator,
+	items,
+}, ref) => {
+	const breadCrumbCn = cn(
+		'flex items-center gap-xs text-link body-md',
+		className,
+	);
+
+	const itemCn = cn(
+		'flex gap-sm items-center px-2xs',
+		'cursor-pointer',
+		'focus:ring-2 focus:ring-offset-0 focus:ring-focused focus:rounded-sm',
+	);
+
+	const contentCn = cn(
+		'flex items-center gap-sm',
+		'hover:underline',
+	);
+
+	return (
+		<div className={breadCrumbCn} ref={ref}>
+			{items.map((item, index) => (<div key={index} className={itemCn}>
+				{ item.href && <>
+					<a
+						href={item.href}
+						className={cn(contentCn, index === items.length - 1 ? 'font-semibold' : '')}
+					>
+						{ item.title }
+					</a>
+				</> }
+
+				{ !item.href && <>
+					<div
+						onClick={item.onClick}
+						className={cn(contentCn, index === items.length - 1 ? 'font-semibold' : '')}
+					>
+						{ item.title }
+					</div>
+				</> }
+
+				{ index < items.length - 1 && <>
+					{ separator || <ChevronRight size="0.75rem" className="text-subtle" />}
+				</>}
+			</div>
+			))}
+		</div>
+	);
+});
+
+BreadCrumb.displayName = 'BreadCrumb';

packages/blandui-react/src/components/BreadCrumb/index.tsx

@@ -0,0 +1,2 @@
+export { BreadCrumb } from './BreadCrumb';
+export type { BreadCrumbProps } from './BreadCrumb';

packages/blandui-react/src/index.ts

@@ -1,4 +1,5 @@
 export * from './components/Badge';
+export * from './components/BreadCrumb';
 export * from './components/Button';
 export * from './components/Checkbox';
 export * from './components/Chip';