@akinon/ui-breadcrumb 0.4.0 → 1.0.0

package/dist/cjs/index.d.ts

@@ -1,5 +1,14 @@
 import * as React from 'react';
 import type { BreadcrumbProps } from './types';
-export type { BreadcrumbProps } from './types';
+/**
+ * Breadcrumb component is used to display a breadcrumb navigation trail, which helps users understand the hierarchy and navigate through the structure of the application.
+ * It provides support for custom breadcrumb items, separators, routing parameters, and event handlers for item clicks.
+ *
+ * - The `onAnyItemClick` event allows custom handling when any breadcrumb item is clicked.
+ * - Custom renderers and item definitions can be provided through the `itemRender` and `items` props.
+ * - Supports hierarchical navigation with `path` and `href` options for breadcrumb items.
+ *
+ */
 export declare const Breadcrumb: (props: BreadcrumbProps) => React.JSX.Element;
+export type * from './types';
 //# sourceMappingURL=index.d.ts.map

package/dist/cjs/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,KAAK,EAAE,eAAe,EAAY,MAAM,SAAS,CAAC;AAEzD,YAAY,EAAE,eAAe,EAAE,MAAM,SAAS,CAAC;AAE/C,eAAO,MAAM,UAAU,UAAW,eAAe,sBAgGhD,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,KAAK,EAAsB,eAAe,EAAE,MAAM,SAAS,CAAC;AAEnE;;;;;;;;GAQG;AAEH,eAAO,MAAM,UAAU,UAAW,eAAe,sBAgGhD,CAAC;AAEF,mBAAmB,SAAS,CAAC"}

package/dist/cjs/index.js

@@ -5,6 +5,15 @@ const ui_theme_1 = require("@akinon/ui-theme");
 const cssinjs_1 = require("@ant-design/cssinjs");
 const antd_1 = require("antd");
 const React = require("react");
+/**
+ * Breadcrumb component is used to display a breadcrumb navigation trail, which helps users understand the hierarchy and navigate through the structure of the application.
+ * It provides support for custom breadcrumb items, separators, routing parameters, and event handlers for item clicks.
+ *
+ * - The `onAnyItemClick` event allows custom handling when any breadcrumb item is clicked.
+ * - Custom renderers and item definitions can be provided through the `itemRender` and `items` props.
+ * - Supports hierarchical navigation with `path` and `href` options for breadcrumb items.
+ *
+ */
 const Breadcrumb = (props) => {
     const { onAnyItemClick, items } = props;
     const { getPrefixCls, theme } = React.useContext(antd_1.ConfigProvider.ConfigContext);

package/dist/cjs/types.d.ts

@@ -0,0 +1,206 @@
+import { DO_NOT_USE_OR_YOU_WILL_BE_FIRED_INTERNAL_STYLE } from '@akinon/ui-theme';
+
+/**
+ * Defines properties for separators used in breadcrumb navigation.
+ */
+export interface SeparatorType {
+  /**
+   * Custom separator element for breadcrumb items.
+   */
+  separator?: React.ReactNode;
+
+  /**
+   * Unique key for the separator.
+   */
+  key?: React.Key;
+}
+
+/**
+ * Represents individual menu items in a breadcrumb.
+ */
+interface MenuItem {
+  /**
+   * Unique key for the menu item.
+   */
+  key?: React.Key;
+
+  /**
+   * Title of the menu item.
+   */
+  title?: React.ReactNode;
+
+  /**
+   * Label for the menu item.
+   */
+  label?: React.ReactNode;
+
+  /**
+   * Path associated with the menu item.
+   */
+  path?: string;
+
+  /**
+   * URL to navigate when the menu item is clicked.
+   */
+  href?: string;
+}
+
+/**
+ * Properties for individual breadcrumb items.
+ */
+export interface BreadcrumbItemProps extends SeparatorType {
+  /**
+   * URL for the breadcrumb item.
+   */
+  href?: string;
+
+  /**
+   * Callback triggered when the breadcrumb item is clicked.
+   */
+  onClick?: React.MouseEventHandler<HTMLAnchorElement | HTMLSpanElement>;
+
+  /**
+   * Additional CSS class for the breadcrumb item.
+   */
+  className?: string;
+
+  /**
+   * Children elements inside the breadcrumb item.
+   */
+  children?: React.ReactNode;
+}
+
+/**
+ * Defines the structure of an individual breadcrumb item.
+ */
+export interface BreadcrumbItemType {
+  /**
+   * Unique key for the breadcrumb item.
+   */
+  key?: React.Key;
+
+  /**
+   * Different with `path`. Directly set the link of this item.
+   */
+  href?: string;
+
+  /**
+   * Different with `href`. It will concat all prev `path` to the current one.
+   */
+  path?: string;
+
+  /**
+   * Title or label of the breadcrumb item.
+   */
+  title?: React.ReactNode;
+
+  /**
+   * Name displayed in the breadcrumb.
+   */
+  breadcrumbName?: string;
+
+  /**
+   * Additional CSS class for the breadcrumb item.
+   */
+  className?: string;
+
+  /**
+   * Callback triggered when the breadcrumb item is clicked.
+   */
+  onClick?: React.MouseEventHandler<HTMLAnchorElement | HTMLSpanElement>;
+}
+
+/**
+ * Defines the structure of a separator in the breadcrumb.
+ */
+export interface BreadcrumbSeparatorType {
+  /**
+   * Specifies that the item is a separator.
+   */
+  type: 'separator';
+
+  /**
+   * Custom separator element.
+   */
+  separator?: React.ReactNode;
+}
+
+/**
+ * Represents an individual item or separator in the breadcrumb.
+ */
+export type BreadcrumbItemType = Partial<
+  BreadcrumbItemType & BreadcrumbSeparatorType
+>;
+
+/**
+ * Defines the internal structure of routing information in the breadcrumb.
+ */
+export type InternalRouteType = Partial<
+  BreadcrumbItemType & BreadcrumbSeparatorType
+>;
+
+/**
+ * Properties for the main `Breadcrumb` component.
+ */
+export interface BreadcrumbProps {
+  /**
+   * Routing parameters. <code>object</code><br /><br />
+   */
+  params?: {
+    [key: string]: unknown;
+  };
+
+  /**
+   * Custom separator element for the breadcrumb.
+   */
+  separator?: React.ReactNode;
+
+  /**
+   * Inline styles for the breadcrumb.
+   * @ignore
+   */
+  style?: DO_NOT_USE_OR_YOU_WILL_BE_FIRED_INTERNAL_STYLE;
+
+  /**
+   * The additional css class
+   */
+  className?: string;
+
+  /**
+   * ClassName on the root element
+   */
+  rootClassName?: string;
+
+  /**
+   * Children elements inside the breadcrumb.
+   */
+  children?: React.ReactNode;
+
+  /**
+   * The routing stack information of router
+   */
+  items?: BreadcrumbItemType[];
+
+  /**
+   * Custom item renderer. <code>(route, params, routes, paths) => ReactNode</code><br /><br />
+   *
+   * @param route - The current breadcrumb item.
+   * @param params - Routing parameters.
+   * @param routes - All breadcrumb items.
+   * @param paths - The accumulated paths.
+   * @returns - Custom rendered breadcrumb item.
+   */
+  itemRender?: (
+    route: BreadcrumbItemType,
+    params: {
+      [key: string]: unknown;
+    },
+    routes: BreadcrumbItemType[],
+    paths: string[]
+  ) => React.ReactNode;
+
+  /**
+   * This is a custom event that is triggered when any breadcrumb item is clicked. It takes href of the clicked item as parameter.
+   */
+  onAnyItemClick?: ({ href }: { href: string }) => void;
+}

package/dist/esm/index.d.ts

@@ -1,5 +1,14 @@
 import * as React from 'react';
 import type { BreadcrumbProps } from './types';
-export type { BreadcrumbProps } from './types';
+/**
+ * Breadcrumb component is used to display a breadcrumb navigation trail, which helps users understand the hierarchy and navigate through the structure of the application.
+ * It provides support for custom breadcrumb items, separators, routing parameters, and event handlers for item clicks.
+ *
+ * - The `onAnyItemClick` event allows custom handling when any breadcrumb item is clicked.
+ * - Custom renderers and item definitions can be provided through the `itemRender` and `items` props.
+ * - Supports hierarchical navigation with `path` and `href` options for breadcrumb items.
+ *
+ */
 export declare const Breadcrumb: (props: BreadcrumbProps) => React.JSX.Element;
+export type * from './types';
 //# sourceMappingURL=index.d.ts.map

package/dist/esm/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,KAAK,EAAE,eAAe,EAAY,MAAM,SAAS,CAAC;AAEzD,YAAY,EAAE,eAAe,EAAE,MAAM,SAAS,CAAC;AAE/C,eAAO,MAAM,UAAU,UAAW,eAAe,sBAgGhD,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,KAAK,EAAsB,eAAe,EAAE,MAAM,SAAS,CAAC;AAEnE;;;;;;;;GAQG;AAEH,eAAO,MAAM,UAAU,UAAW,eAAe,sBAgGhD,CAAC;AAEF,mBAAmB,SAAS,CAAC"}

package/dist/esm/index.js

@@ -2,6 +2,15 @@ import { useToken } from '@akinon/ui-theme';
 import { useStyleRegister } from '@ant-design/cssinjs';
 import { Breadcrumb as AntBreadcrumb, ConfigProvider } from 'antd';
 import * as React from 'react';
+/**
+ * Breadcrumb component is used to display a breadcrumb navigation trail, which helps users understand the hierarchy and navigate through the structure of the application.
+ * It provides support for custom breadcrumb items, separators, routing parameters, and event handlers for item clicks.
+ *
+ * - The `onAnyItemClick` event allows custom handling when any breadcrumb item is clicked.
+ * - Custom renderers and item definitions can be provided through the `itemRender` and `items` props.
+ * - Supports hierarchical navigation with `path` and `href` options for breadcrumb items.
+ *
+ */
 export const Breadcrumb = (props) => {
     const { onAnyItemClick, items } = props;
     const { getPrefixCls, theme } = React.useContext(ConfigProvider.ConfigContext);

package/dist/esm/types.d.ts

@@ -0,0 +1,206 @@
+import { DO_NOT_USE_OR_YOU_WILL_BE_FIRED_INTERNAL_STYLE } from '@akinon/ui-theme';
+
+/**
+ * Defines properties for separators used in breadcrumb navigation.
+ */
+export interface SeparatorType {
+  /**
+   * Custom separator element for breadcrumb items.
+   */
+  separator?: React.ReactNode;
+
+  /**
+   * Unique key for the separator.
+   */
+  key?: React.Key;
+}
+
+/**
+ * Represents individual menu items in a breadcrumb.
+ */
+interface MenuItem {
+  /**
+   * Unique key for the menu item.
+   */
+  key?: React.Key;
+
+  /**
+   * Title of the menu item.
+   */
+  title?: React.ReactNode;
+
+  /**
+   * Label for the menu item.
+   */
+  label?: React.ReactNode;
+
+  /**
+   * Path associated with the menu item.
+   */
+  path?: string;
+
+  /**
+   * URL to navigate when the menu item is clicked.
+   */
+  href?: string;
+}
+
+/**
+ * Properties for individual breadcrumb items.
+ */
+export interface BreadcrumbItemProps extends SeparatorType {
+  /**
+   * URL for the breadcrumb item.
+   */
+  href?: string;
+
+  /**
+   * Callback triggered when the breadcrumb item is clicked.
+   */
+  onClick?: React.MouseEventHandler<HTMLAnchorElement | HTMLSpanElement>;
+
+  /**
+   * Additional CSS class for the breadcrumb item.
+   */
+  className?: string;
+
+  /**
+   * Children elements inside the breadcrumb item.
+   */
+  children?: React.ReactNode;
+}
+
+/**
+ * Defines the structure of an individual breadcrumb item.
+ */
+export interface BreadcrumbItemType {
+  /**
+   * Unique key for the breadcrumb item.
+   */
+  key?: React.Key;
+
+  /**
+   * Different with `path`. Directly set the link of this item.
+   */
+  href?: string;
+
+  /**
+   * Different with `href`. It will concat all prev `path` to the current one.
+   */
+  path?: string;
+
+  /**
+   * Title or label of the breadcrumb item.
+   */
+  title?: React.ReactNode;
+
+  /**
+   * Name displayed in the breadcrumb.
+   */
+  breadcrumbName?: string;
+
+  /**
+   * Additional CSS class for the breadcrumb item.
+   */
+  className?: string;
+
+  /**
+   * Callback triggered when the breadcrumb item is clicked.
+   */
+  onClick?: React.MouseEventHandler<HTMLAnchorElement | HTMLSpanElement>;
+}
+
+/**
+ * Defines the structure of a separator in the breadcrumb.
+ */
+export interface BreadcrumbSeparatorType {
+  /**
+   * Specifies that the item is a separator.
+   */
+  type: 'separator';
+
+  /**
+   * Custom separator element.
+   */
+  separator?: React.ReactNode;
+}
+
+/**
+ * Represents an individual item or separator in the breadcrumb.
+ */
+export type BreadcrumbItemType = Partial<
+  BreadcrumbItemType & BreadcrumbSeparatorType
+>;
+
+/**
+ * Defines the internal structure of routing information in the breadcrumb.
+ */
+export type InternalRouteType = Partial<
+  BreadcrumbItemType & BreadcrumbSeparatorType
+>;
+
+/**
+ * Properties for the main `Breadcrumb` component.
+ */
+export interface BreadcrumbProps {
+  /**
+   * Routing parameters. <code>object</code><br /><br />
+   */
+  params?: {
+    [key: string]: unknown;
+  };
+
+  /**
+   * Custom separator element for the breadcrumb.
+   */
+  separator?: React.ReactNode;
+
+  /**
+   * Inline styles for the breadcrumb.
+   * @ignore
+   */
+  style?: DO_NOT_USE_OR_YOU_WILL_BE_FIRED_INTERNAL_STYLE;
+
+  /**
+   * The additional css class
+   */
+  className?: string;
+
+  /**
+   * ClassName on the root element
+   */
+  rootClassName?: string;
+
+  /**
+   * Children elements inside the breadcrumb.
+   */
+  children?: React.ReactNode;
+
+  /**
+   * The routing stack information of router
+   */
+  items?: BreadcrumbItemType[];
+
+  /**
+   * Custom item renderer. <code>(route, params, routes, paths) => ReactNode</code><br /><br />
+   *
+   * @param route - The current breadcrumb item.
+   * @param params - Routing parameters.
+   * @param routes - All breadcrumb items.
+   * @param paths - The accumulated paths.
+   * @returns - Custom rendered breadcrumb item.
+   */
+  itemRender?: (
+    route: BreadcrumbItemType,
+    params: {
+      [key: string]: unknown;
+    },
+    routes: BreadcrumbItemType[],
+    paths: string[]
+  ) => React.ReactNode;
+
+  /**
+   * This is a custom event that is triggered when any breadcrumb item is clicked. It takes href of the clicked item as parameter.
+   */
+  onAnyItemClick?: ({ href }: { href: string }) => void;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@akinon/ui-breadcrumb",
-  "version": "0.4.0",
+  "version": "1.0.0",
   "private": false,
   "description": "A basic button react component.",
   "type": "module",
@@ -10,15 +10,15 @@
     "dist"
   ],
   "dependencies": {
-    "antd": "5.17.0",
-    "@akinon/ui-theme": "0.6.0"
+    "antd": "5.22.6",
+    "@akinon/ui-theme": "1.0.0"
   },
   "devDependencies": {
     "clean-package": "2.2.0",
     "copyfiles": "^2.4.1",
     "rimraf": "^5.0.5",
-    "typescript": "^5.2.2",
-    "@akinon/typescript-config": "0.3.0"
+    "typescript": "*",
+    "@akinon/typescript-config": "1.0.0"
   },
   "peerDependencies": {
     "react": ">=18",
@@ -38,7 +38,7 @@
     "build": "pnpm run build:esm && pnpm run build:commonjs && pnpm run copy:files",
     "build:esm": "tsc --outDir dist/esm",
     "build:commonjs": "tsc --module commonjs --outDir dist/cjs",
-    "copy:files": "copyfiles -u 1 src/**/*.css dist/esm && copyfiles -u 1 src/**/*.css dist/cjs",
+    "copy:files": "copyfiles -u 1 \"src/**/*.!(ts|tsx)\" dist/esm && copyfiles -u 1 \"src/**/*.!(ts|tsx)\" dist/cjs",
     "clean": "rimraf dist/",
     "typecheck": "tsc --noEmit"
   }