feat(breadcrumbs): add breadcrumbs component

moecasts · Jul 4, 2024 · 244753b · 244753b
1 parent 308fa84
commit 244753b
Show file tree

Hide file tree

Showing 35 changed files with 1,014 additions and 0 deletions.
diff --git a/packages/casts-breadcrumbs/.fatherrc.ts b/packages/casts-breadcrumbs/.fatherrc.ts
@@ -0,0 +1,6 @@
+import { defineConfig } from 'father';
+import { StandardConfig } from '@casts/standard';
+
+export default defineConfig({
+  ...StandardConfig.father,
+});
diff --git a/packages/casts-breadcrumbs/.gitignore b/packages/casts-breadcrumbs/.gitignore
@@ -0,0 +1,3 @@
+/node_modules
+/dist
+.DS_Store
diff --git a/packages/casts-breadcrumbs/README.md b/packages/casts-breadcrumbs/README.md
@@ -0,0 +1,23 @@
+# @casts/breadcrumbs
+
+[![NPM version](https://img.shields.io/npm/v/@casts/breadcrumbs.svg?style=flat)](https://npmjs.org/package/@casts/breadcrumbs)
+[![NPM downloads](http://img.shields.io/npm/dm/@casts/breadcrumbs.svg?style=flat)](https://npmjs.org/package/@casts/breadcrumbs)
+
+## Install
+
+```bash
+$ pnpm add @casts/breadcrumbs
+```
+
+```bash
+$ pnpm run dev
+$ pnpm run build
+```
+
+## Options
+
+TODO
+
+## License
+
+MIT © [moecasts &lt;moecasts.caster@gmail.com&gt;](https://github.com/moecasts &lt;moecasts.caster@gmail.com&gt;)
diff --git a/packages/casts-breadcrumbs/docs/breadcrumbs.en-US.md b/packages/casts-breadcrumbs/docs/breadcrumbs.en-US.md
@@ -0,0 +1,43 @@
+---
+title: Breadcrumbs
+group:
+  title: Navigator
+nav:
+  title: Components
+  path: /components
+description: Breadcrumbs display a hierarchy of links to the current page or resource in an application.
+---
+
+## Installation
+
+```bash
+$ pnpm add @casts/breadcrumbs
+```
+
+## Basic
+
+<code src="../examples/basic.tsx" />
+
+## Custom separator
+
+<code src="../examples/custom-separator.tsx" />
+
+## Max width
+
+Limit the maximum width of `BreadcrumbItem`. By default, for elements that are too long, a Tooltip will be used to display the full content.
+
+<code src="../examples/max-width.tsx" />
+
+## Tooltip
+
+You can manually control the `Tooltip` property of `BreadcrumbItem` to achieve a customized effect.
+
+<code src="../examples/item-tooltip.tsx" />
+
+## Collapsing Items
+
+<code src="../examples/collapsed.tsx" />
+
+## API
+
+<API src="@casts/breadcrumbs" />
diff --git a/packages/casts-breadcrumbs/docs/breadcrumbs.zh-CN.md b/packages/casts-breadcrumbs/docs/breadcrumbs.zh-CN.md
@@ -0,0 +1,43 @@
+---
+title: Breadcrumbs
+group:
+  title: 导航
+nav:
+  title: 组件
+  path: /components
+description: 面包屑显示应用程序中指向当前页面或资源的链接层次。
+---
+
+## 安装
+
+```bash
+$ pnpm add @casts/breadcrumbs
+```
+
+## 基础示例
+
+<code src="../examples/basic.tsx" />
+
+## 自定义分隔符
+
+<code src="../examples/custom-separator.tsx" />
+
+## 限制组件长度
+
+限制 `BreadcrumbItem` 的最大宽度，默认情况下，对于超长的元素，会使用 `Tooltip` 来展示完整内容。
+
+<code src="../examples/max-width.tsx" />
+
+## 文字提示
+
+可以自行控制 `BreadcrumbItem `的 `Tooltip` 属性，来实现自定义的效果。
+
+<code src="../examples/item-tooltip.tsx" />
+
+## 折叠元素
+
+<code src="../examples/collapsed.tsx" />
+
+## API
+
+<API src="@casts/breadcrumbs" />
diff --git a/packages/casts-breadcrumbs/examples/.gitkeep b/packages/casts-breadcrumbs/examples/.gitkeep
diff --git a/packages/casts-breadcrumbs/examples/basic.tsx b/packages/casts-breadcrumbs/examples/basic.tsx
@@ -0,0 +1,42 @@
+// @ts-ignore example should import React
+import React from 'react';
+import { BreadcrumbItem, Breadcrumbs } from '@casts/breadcrumbs';
+import { Button } from '@casts/button';
+import { Home2Fill } from '@casts/icons';
+import { Link } from '@casts/link';
+import { Space } from '@casts/space';
+import { Tag } from '@casts/tag';
+
+const BreadcrumbsBasicDemo = () => {
+  return (
+    <Space direction="vertical" size={40}>
+      <Breadcrumbs>
+        <BreadcrumbItem href="#" icon={<Home2Fill />}>
+          Casts Design
+        </BreadcrumbItem>
+        <BreadcrumbItem>Components</BreadcrumbItem>
+        <BreadcrumbItem>Navigator</BreadcrumbItem>
+        <BreadcrumbItem>Breadcrumb</BreadcrumbItem>
+      </Breadcrumbs>
+
+      <Breadcrumbs>
+        <BreadcrumbItem href="#" icon={<Home2Fill />}>
+          Casts Design
+        </BreadcrumbItem>
+        <BreadcrumbItem>
+          <Tag theme="warning">Components</Tag>
+        </BreadcrumbItem>
+        <BreadcrumbItem>
+          <Button variant="text" size="small" theme="info">
+            Navigator
+          </Button>
+        </BreadcrumbItem>
+        <BreadcrumbItem>
+          <Link theme="success">Breadcrumbs</Link>
+        </BreadcrumbItem>
+      </Breadcrumbs>
+    </Space>
+  );
+};
+
+export default BreadcrumbsBasicDemo;
diff --git a/packages/casts-breadcrumbs/examples/collapsed.tsx b/packages/casts-breadcrumbs/examples/collapsed.tsx
@@ -0,0 +1,50 @@
+// @ts-ignore example should import React
+import React from 'react';
+import { BreadcrumbItem, Breadcrumbs } from '@casts/breadcrumbs';
+import { Home2Fill } from '@casts/icons';
+import { Space } from '@casts/space';
+
+const BreadcrumbsCollapsedDemo = () => {
+  return (
+    <Space direction="vertical" size={40}>
+      <Breadcrumbs maxCount={4} countBeforeCollapse={1} countAfterCollapse={2}>
+        <BreadcrumbItem href="#" icon={<Home2Fill />}>
+          Casts Design
+        </BreadcrumbItem>
+        <BreadcrumbItem>Components</BreadcrumbItem>
+        <BreadcrumbItem>Navigator</BreadcrumbItem>
+        <BreadcrumbItem>Before Breadcrumb</BreadcrumbItem>
+        <BreadcrumbItem>Breadcrumb</BreadcrumbItem>
+      </Breadcrumbs>
+
+      <Breadcrumbs maxCount={5} countBeforeCollapse={1} countAfterCollapse={2}>
+        <BreadcrumbItem href="#" icon={<Home2Fill />}>
+          Casts Design
+        </BreadcrumbItem>
+        <BreadcrumbItem>Components</BreadcrumbItem>
+        <BreadcrumbItem>Navigator</BreadcrumbItem>
+        <BreadcrumbItem>Before Breadcrumb</BreadcrumbItem>
+        <BreadcrumbItem>Breadcrumb</BreadcrumbItem>
+      </Breadcrumbs>
+
+      <Breadcrumbs
+        maxCount={4}
+        countBeforeCollapse={1}
+        countAfterCollapse={2}
+        renderCollapse={() => {
+          return <span>...</span>;
+        }}
+      >
+        <BreadcrumbItem href="#" icon={<Home2Fill />}>
+          Casts Design
+        </BreadcrumbItem>
+        <BreadcrumbItem>Components</BreadcrumbItem>
+        <BreadcrumbItem>Navigator</BreadcrumbItem>
+        <BreadcrumbItem>Before Breadcrumb</BreadcrumbItem>
+        <BreadcrumbItem>Breadcrumb</BreadcrumbItem>
+      </Breadcrumbs>
+    </Space>
+  );
+};
+
+export default BreadcrumbsCollapsedDemo;
diff --git a/packages/casts-breadcrumbs/examples/custom-separator.tsx b/packages/casts-breadcrumbs/examples/custom-separator.tsx
@@ -0,0 +1,33 @@
+// @ts-ignore example should import React
+import React from 'react';
+import { BreadcrumbItem, Breadcrumbs } from '@casts/breadcrumbs';
+import { ExpandRightLine, Home2Fill } from '@casts/icons';
+import { Space } from '@casts/space';
+
+const BreadcrumbsCustomSeparatorDemo = () => {
+  return (
+    <Space direction="vertical" size={40}>
+      <Breadcrumbs separator={'/'}>
+        <BreadcrumbItem href="#" icon={<Home2Fill />}>
+          Casts Design
+        </BreadcrumbItem>
+        <BreadcrumbItem>Components</BreadcrumbItem>
+        <BreadcrumbItem>Navigator</BreadcrumbItem>
+        <BreadcrumbItem>Breadcrumb</BreadcrumbItem>
+      </Breadcrumbs>
+
+      <Breadcrumbs separator={'/'}>
+        <BreadcrumbItem href="#" icon={<Home2Fill />}>
+          Casts Design
+        </BreadcrumbItem>
+        <BreadcrumbItem separator={<ExpandRightLine />}>
+          Components
+        </BreadcrumbItem>
+        <BreadcrumbItem>Navigator</BreadcrumbItem>
+        <BreadcrumbItem>Breadcrumb</BreadcrumbItem>
+      </Breadcrumbs>
+    </Space>
+  );
+};
+
+export default BreadcrumbsCustomSeparatorDemo;
diff --git a/packages/casts-breadcrumbs/examples/item-tooltip.tsx b/packages/casts-breadcrumbs/examples/item-tooltip.tsx
@@ -0,0 +1,29 @@
+// @ts-ignore example should import React
+import React from 'react';
+import { BreadcrumbItem, Breadcrumbs } from '@casts/breadcrumbs';
+import { Home2Fill } from '@casts/icons';
+import { Space } from '@casts/space';
+
+const BreadcrumbsTooltipDemo = () => {
+  return (
+    <Space direction="vertical" size={40}>
+      <Breadcrumbs maxItemWidth={80} tooltipProps={{ disabled: true }}>
+        <BreadcrumbItem href="#" icon={<Home2Fill />} maxItemWidth={100}>
+          Casts Design
+        </BreadcrumbItem>
+        <BreadcrumbItem>Components</BreadcrumbItem>
+        <BreadcrumbItem>Navigator</BreadcrumbItem>
+        <BreadcrumbItem
+          tooltipProps={{
+            disabled: false,
+            content: 'this is a custom tooltip',
+          }}
+        >
+          Breadcrumb
+        </BreadcrumbItem>
+      </Breadcrumbs>
+    </Space>
+  );
+};
+
+export default BreadcrumbsTooltipDemo;
diff --git a/packages/casts-breadcrumbs/examples/max-width.tsx b/packages/casts-breadcrumbs/examples/max-width.tsx
@@ -0,0 +1,22 @@
+// @ts-ignore example should import React
+import React from 'react';
+import { BreadcrumbItem, Breadcrumbs } from '@casts/breadcrumbs';
+import { Home2Fill } from '@casts/icons';
+import { Space } from '@casts/space';
+
+const BreadcrumbsMaxWidthDemo = () => {
+  return (
+    <Space direction="vertical" size={40}>
+      <Breadcrumbs maxItemWidth={80}>
+        <BreadcrumbItem href="#" icon={<Home2Fill />} maxItemWidth={100}>
+          Casts Design
+        </BreadcrumbItem>
+        <BreadcrumbItem>Components</BreadcrumbItem>
+        <BreadcrumbItem>Navigator</BreadcrumbItem>
+        <BreadcrumbItem>Breadcrumb</BreadcrumbItem>
+      </Breadcrumbs>
+    </Space>
+  );
+};
+
+export default BreadcrumbsMaxWidthDemo;
diff --git a/packages/casts-breadcrumbs/package.json b/packages/casts-breadcrumbs/package.json
@@ -0,0 +1,56 @@
+{
+  "name": "@casts/breadcrumbs",
+  "version": "0.0.1",
+  "description": "a react breadcrumb component",
+  "authors": [
+    "moecasts <moecasts.caster@gmail.com>"
+  ],
+  "license": "MIT",
+  "repository": "https://github.com/moecasts/casts-design.git",
+  "main": "dist/cjs/index.js",
+  "module": "dist/esm/index.js",
+  "types": "dist/esm/index.d.ts",
+  "scripts": {
+    "dev": "father dev",
+    "build": "father build",
+    "build:deps": "father prebundle",
+    "prepublishOnly": "father doctor && pnpm run build",
+    "test": "vitest",
+    "test:coverage": "vitest run --coverage"
+  },
+  "keywords": [],
+  "files": [
+    "dist",
+    "compiled"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "devDependencies": {
+    "@casts/standard": "workspace:^0.0.1",
+    "@swc/core": "^1.3.82",
+    "@testing-library/jest-dom": "^6.1.2",
+    "@testing-library/react": "^14.0.0",
+    "@vitest/coverage-v8": "^1.3.1",
+    "father": "^4.3.2",
+    "jsdom": "^22.1.0",
+    "ts-node": "^10.9.1",
+    "typescript": "5.5.1-rc",
+    "vite": "^4.4.9",
+    "vitest": "^1.3.1"
+  },
+  "peerDependencies": {
+    "react": ">=17"
+  },
+  "dependencies": {
+    "@casts/common": "workspace:^0.0.1",
+    "@casts/config-provider": "workspace:^0.0.1",
+    "@casts/icons": "workspace:^0.0.1",
+    "@casts/theme": "workspace:^0.0.1",
+    "@casts/tooltip": "workspace:^",
+    "clsx": "^2.0.0"
+  },
+  "sideEffects": [
+    "**/*.{css,scss,sass}"
+  ]
+}