@faasjs/ant-design 1.2.0 → 1.3.1

package/README.md

@@ -41,12 +41,6 @@ Form are based on [Ant Design's Form.Item component](https://ant.design/componen
 
 ## Modules
 
-### Namespaces
-
-- [App](modules/App.md)
-- [Form](modules/Form.md)
-- [FormItem](modules/FormItem.md)
-
 ### Interfaces
 
 - [AppProps](interfaces/AppProps.md)
@@ -411,6 +405,14 @@ ___
 
 ▸ **App**(`props`): `Element`
 
+App component with Ant Design & FaasJS
+
+- Based on Ant Design's [ConfigProvider](https://ant.design/components/config-provider/) and [StyleProvider](https://ant.design/components/style-provider/).
+- Integrated Ant Design's [Message](https://ant.design/components/message/) and [Notification](https://ant.design/components/notification/).
+- Based on FaasJS's [ConfigProvider](https://faasjs.com/doc/ant-design/#configprovider).
+- Integrated FaasJS's [Modal](https://faasjs.com/doc/ant-design/#usemodal), [Drawer](https://faasjs.com/doc/ant-design/#usedrawer) and [ErrorBoundary](https://faasjs.com/doc/ant-design/#errorboundary).
+- Integrated React Router's [BrowserRouter](https://reactrouter.com/en/router-components/browser-router).
+
 #### Parameters
 
 | Name | Type |
@@ -421,6 +423,25 @@ ___
 
 `Element`
 
+**`Example`**
+
+```tsx
+import { App } from '@faasjs/ant-design'
+
+export default function () {
+  return (
+    <App
+     styleProviderProps={{}} // https://ant.design/docs/react/compatible-style#styleprovider
+     configProviderProps={{}} // https://ant.design/components/config-provider/#API
+     browserRouterProps={{}} // https://reactrouter.com/en/router-components/browser-router
+     errorBoundaryProps={{}} // https://faasjs.com/doc/ant-design/#errorboundary
+     faasConfigProviderProps={{}} // https://faasjs.com/doc/ant-design/#configprovider
+    >
+      <div>content</div>
+    </App>
+  )
+```
+
 ___
 
 ### Blank
@@ -433,15 +454,19 @@ If value is undefined or null, return text, otherwise return value.
 
 #### Parameters
 
-| Name | Type | Description |
-| :------ | :------ | :------ |
-| `options?` | [`BlankProps`](interfaces/BlankProps.md) | {object} |
+| Name | Type |
+| :------ | :------ |
+| `options?` | [`BlankProps`](interfaces/BlankProps.md) |
 
 #### Returns
 
 `JSX.Element`
 
-```ts
+**`Example`**
+
+```tsx
+import { Blank } from '@faasjs/ant-design'
+
 <Blank value={undefined} text="Empty" />
 ```
 
@@ -451,13 +476,7 @@ ___
 
 ▸ **ConfigProvider**(`props`): `Element`
 
-Config for @faasjs/ant-design components.
-
-```ts
-<ConfigProvider theme={{ common: { blank: 'Empty' } }}>
-  <Blank />
-</ConfigProvider>
-```
+Config for `@faasjs/ant-design` components.
 
 #### Parameters
 
@@ -469,13 +488,25 @@ Config for @faasjs/ant-design components.
 
 `Element`
 
+**`Example`**
+
+```tsx
+import { ConfigProvider } from '@faasjs/ant-design'
+
+<ConfigProvider theme={{ common: { blank: 'Empty' } }}>
+  <Blank />
+</ConfigProvider>
+```
+
 ___
 
 ### Description
 
 ▸ **Description**\<`T`\>(`props`): `Element`
 
-Description component.
+Description component
+
+- Based on [Ant Design Descriptions](https://ant.design/components/descriptions/).
 
 #### Type parameters
 
@@ -493,12 +524,32 @@ Description component.
 
 `Element`
 
+**`Example`**
+
+```tsx
+import { Description } from '@faasjs/ant-design'
+
+<Description
+  title="Title"
+  items={[
+    {
+      id: 'id',
+      title: 'Title',
+      type: 'string',
+    },
+  ]}
+  dataSource={{ id: 'value' }}
+/>
+```
+
 ___
 
 ### ErrorBoundary
 
 ▸ **ErrorBoundary**(`props`): `Element`
 
+Styled error boundary.
+
 #### Parameters
 
 | Name | Type |
@@ -517,18 +568,6 @@ ___
 
 FaasDataWrapper component with Loading
 
-```tsx
-function MyComponent (props: FaasDataInjection) {
-  return <div>{ props.data }</div>
-}
-
-function MyPage () {
-  return <FaasDataWrapper action="test" params={{ a: 1 }}>
-    <MyComponent />
-  </FaasDataWrapper>
-}
-```
-
 #### Type parameters
 
 | Name | Type |
@@ -545,6 +584,20 @@ function MyPage () {
 
 `JSX.Element`
 
+**`Example`**
+
+```tsx
+function MyComponent (props: FaasDataInjection) {
+  return <div>{ props.data }</div>
+}
+
+function MyPage () {
+  return <FaasDataWrapper action="test" params={{ a: 1 }}>
+    <MyComponent />
+  </FaasDataWrapper>
+}
+```
+
 ___
 
 ### Form
@@ -553,6 +606,8 @@ ___
 
 Form component with Ant Design & FaasJS
 
+- Based on [Ant Design Form](https://ant.design/components/form/).
+
 #### Type parameters
 
 | Name | Type |
@@ -569,27 +624,16 @@ Form component with Ant Design & FaasJS
 
 `Element`
 
-**`Ref`**
-
-https://ant.design/components/form/
-
 ___
 
 ### FormItem
 
 ▸ **FormItem**\<`T`\>(`props`): `Element`
 
-FormItem, can be used without Form.
+FormItem
 
-```ts
-// use inline type
-<FormItem type='string' id='name' />
-
-// use custom type
-<FormItem id='password'>
-  <Input.Password />
-</>
-```
+- Based on [Ant Design Form.Item](https://ant.design/components/form#formitem).
+- Can be used without [Form](https://faasjs.com/doc/ant-design/#form).
 
 #### Type parameters
 
@@ -607,21 +651,25 @@ FormItem, can be used without Form.
 
 `Element`
 
+**`Example`**
+
+```tsx
+// use inline type
+<FormItem type='string' id='name' />
+
+// use custom type
+<FormItem id='password'>
+  <Input.Password />
+</>
+```
+
 ___
 
 ### Link
 
 ▸ **Link**(`props`): `Element`
 
-Link component with button.
-
-```ts
-// pure link
-<Link href="/">Home</Link>
-
-// link with button
-<Link href="/" button={{ type:'primary' }}>Home</Link>
-```
+Link component with button
 
 #### Parameters
 
@@ -633,6 +681,16 @@ Link component with button.
 
 `Element`
 
+**`Example`**
+
+```tsx
+// pure link
+<Link href="/">Home</Link>
+
+// link with button
+<Link href="/" button={{ type:'primary' }}>Home</Link>
+```
+
 ___
 
 ### Loading
@@ -641,14 +699,6 @@ ___
 
 Loading component based on Spin
 
-```tsx
-<Loading /> // display loading
-
-<Loading loading={ !remoteData }>
- <div>{remoteData}</div>
-</Loading>
-```
-
 #### Parameters
 
 | Name | Type |
@@ -659,6 +709,16 @@ Loading component based on Spin
 
 `Element`
 
+**`Example`**
+
+```tsx
+<Loading /> // display loading
+
+<Loading loading={ !remoteData }>
+  <div>{remoteData}</div>
+</Loading>
+```
+
 ___
 
 ### PageNotFound
@@ -677,6 +737,18 @@ ___
 
 Routes with lazy loading and 404 page.
 
+#### Parameters
+
+| Name | Type |
+| :------ | :------ |
+| `props` | [`RoutesProps`](interfaces/RoutesProps.md) |
+
+#### Returns
+
+`Element`
+
+**`Example`**
+
 ```tsx
 import { Routes, lazy } from '@faasjs/ant-design'
 import { BrowserRouter } from 'react-router-dom'
@@ -693,16 +765,6 @@ export function App () {
 }
 ```
 
-#### Parameters
-
-| Name | Type |
-| :------ | :------ |
-| `props` | [`RoutesProps`](interfaces/RoutesProps.md) |
-
-#### Returns
-
-`Element`
-
 ___
 
 ### Table
@@ -711,7 +773,7 @@ ___
 
 Table component with Ant Design & FaasJS
 
-- Support all Ant Design Table props.
+- Based on [Ant Design Table](https://ant.design/components/table/).
 - Support FaasJS injection.
 - Auto generate filter dropdown (disable with `filterDropdown: false`).
 - Auto generate sorter (disable with `sorter: false`).
@@ -733,10 +795,6 @@ Table component with Ant Design & FaasJS
 
 `Element`
 
-**`Ref`**
-
-https://ant.design/components/table/
-
 ___
 
 ### Tabs
@@ -745,6 +803,10 @@ ___
 
 Tabs component with Ant Design & FaasJS
 
+- Based on [Ant Design Tabs](https://ant.design/components/tabs/).
+- Support auto skip null/false tab item.
+- Support `id` as key and label.
+
 #### Parameters
 
 | Name | Type |
@@ -755,9 +817,24 @@ Tabs component with Ant Design & FaasJS
 
 `Element`
 
-**`Ref`**
+**`Example`**
 
-https://ant.design/components/tabs/
+```tsx
+import { Tabs } from '@faasjs/ant-design'
+
+<Tabs
+  items={[
+    {
+      id: 'id',
+      children: 'content',
+    },
+    1 === 0 && {
+      id: 'hidden',
+      children: 'content',
+    },
+  ]}
+/>
+```
 
 ___
 
@@ -765,10 +842,11 @@ ___
 
 ▸ **Title**(`props`): `JSX.Element`
 
-Title is used to change the title of the page.
+Title is used to change the title of the page
+
 Return null by default.
 
-```ts
+```tsx
 // return null
 <Title title='hi' /> // => change the document.title to 'hi'
 <Title title={['a', 'b']} /> // => change the document.title to 'a - b'
@@ -893,13 +971,26 @@ ___
 
 ▸ **useDrawer**(`init?`): `Object`
 
-Hook style drawer.
+Hook style drawer
+
+```tsx
+function Example() {
+  const { drawer, setDrawerProps } = useDrawer()
+
+  return <>
+    <Button onClick={ () => setDrawerProps(prev => ({ open: !prev.open})) }>
+      Toggle
+    </Button>
+    {drawer}
+  </>
+}
+```
 
 #### Parameters
 
-| Name | Type | Description |
-| :------ | :------ | :------ |
-| `init?` | [`DrawerProps`](interfaces/DrawerProps.md) | initial props ```ts function Example() { const { drawer, setDrawerProps } = useDrawer() return <> <Button onClick={ () => setDrawerProps(prev => ({ open: !prev.open})) }> Toggle </Button> {drawer} </> } ``` |
+| Name | Type |
+| :------ | :------ |
+| `init?` | [`DrawerProps`](interfaces/DrawerProps.md) |
 
 #### Returns
 
@@ -952,13 +1043,24 @@ ___
 
 ▸ **useModal**(`init?`): `Object`
 
-Hook style modal.
+Hook style modal
+
+```tsx
+function Example() {
+  const { modal, setModalProps } = useModal()
+
+  return <>
+    <Button onClick={() => setModalProps({ open: true })}>Open Modal</Button>
+    {modal}
+  </>
+}
+```
 
 #### Parameters
 
-| Name | Type | Description |
-| :------ | :------ | :------ |
-| `init?` | [`ModalProps`](interfaces/ModalProps.md) | initial props ```ts function Example() { const { modal, setModalProps } = useModal() return <> <Button onClick={() => setModalProps({ open: true })}>Open Modal</Button> {modal}</> } ``` |
+| Name | Type |
+| :------ | :------ |
+| `init?` | [`ModalProps`](interfaces/ModalProps.md) |
 
 #### Returns
 

package/dist/index.d.mts

@@ -26,16 +26,16 @@ interface ModalProps extends ModalProps$1 {
 }
 type setModalProps = (changes: Partial<ModalProps>) => void;
 /**
- * Hook style modal.
- * @param init initial props
+ * Hook style modal
  *
- * ```ts
+ * ```tsx
  * function Example() {
  *   const { modal, setModalProps } = useModal()
  *
  *   return <>
  *     <Button onClick={() => setModalProps({ open: true })}>Open Modal</Button>
- *     {modal}</>
+ *     {modal}
+ *   </>
  * }
  * ```
  */
@@ -50,11 +50,9 @@ interface DrawerProps extends DrawerProps$1 {
 }
 type setDrawerProps = (changes: Partial<DrawerProps>) => void;
 /**
- * Hook style drawer.
+ * Hook style drawer
  *
- * @param init initial props
- *
- * ```ts
+ * ```tsx
  * function Example() {
  *   const { drawer, setDrawerProps } = useDrawer()
  *
@@ -73,6 +71,9 @@ declare function useDrawer(init?: DrawerProps): {
     setDrawerProps(changes: Partial<DrawerProps>): void;
 };
 
+/**
+ * Styled error boundary.
+ */
 declare function ErrorBoundary(props: ErrorBoundaryProps): react_jsx_runtime.JSX.Element;
 
 interface ConfigProviderProps {
@@ -113,9 +114,12 @@ interface ConfigProviderProps {
 }
 declare const ConfigContext: react.Context<Partial<ConfigProviderProps>>;
 /**
- * Config for @faasjs/ant-design components.
+ * Config for `@faasjs/ant-design` components.
+ *
+ * @example
+ * ```tsx
+ * import { ConfigProvider } from '@faasjs/ant-design'
  *
- * ```ts
  * <ConfigProvider theme={{ common: { blank: 'Empty' } }}>
  *   <Blank />
  * </ConfigProvider>
@@ -126,10 +130,15 @@ declare function useConfigContext(): Partial<ConfigProviderProps>;
 
 interface AppProps {
     children: React.ReactNode;
+    /** https://ant.design/docs/react/compatible-style#styleprovider */
     styleProviderProps?: StyleProviderProps;
+    /** https://ant.design/components/config-provider/#API */
     configProviderProps?: ConfigProviderProps$1;
+    /** https://reactrouter.com/en/router-components/browser-router */
     browserRouterProps?: BrowserRouterProps;
+    /** https://faasjs.com/doc/ant-design/#errorboundary */
     errorBoundaryProps?: Omit<ErrorBoundaryProps, 'children'>;
+    /** https://faasjs.com/doc/ant-design/#configprovider */
     faasConfigProviderProps?: Omit<ConfigProviderProps, 'children'>;
 }
 interface useAppProps {
@@ -138,6 +147,33 @@ interface useAppProps {
     setModalProps: (changes: Partial<ModalProps>) => void;
     setDrawerProps: (changes: Partial<DrawerProps>) => void;
 }
+/**
+ * App component with Ant Design & FaasJS
+ *
+ * - Based on Ant Design's [ConfigProvider](https://ant.design/components/config-provider/) and [StyleProvider](https://ant.design/components/style-provider/).
+ * - Integrated Ant Design's [Message](https://ant.design/components/message/) and [Notification](https://ant.design/components/notification/).
+ * - Based on FaasJS's [ConfigProvider](https://faasjs.com/doc/ant-design/#configprovider).
+ * - Integrated FaasJS's [Modal](https://faasjs.com/doc/ant-design/#usemodal), [Drawer](https://faasjs.com/doc/ant-design/#usedrawer) and [ErrorBoundary](https://faasjs.com/doc/ant-design/#errorboundary).
+ * - Integrated React Router's [BrowserRouter](https://reactrouter.com/en/router-components/browser-router).
+ *
+ * @example
+ * ```tsx
+ * import { App } from '@faasjs/ant-design'
+ *
+ * export default function () {
+ *   return (
+ *     <App
+ *      styleProviderProps={{}} // https://ant.design/docs/react/compatible-style#styleprovider
+ *      configProviderProps={{}} // https://ant.design/components/config-provider/#API
+ *      browserRouterProps={{}} // https://reactrouter.com/en/router-components/browser-router
+ *      errorBoundaryProps={{}} // https://faasjs.com/doc/ant-design/#errorboundary
+ *      faasConfigProviderProps={{}} // https://faasjs.com/doc/ant-design/#configprovider
+ *     >
+ *       <div>content</div>
+ *     </App>
+ *   )
+ * ```
+ */
 declare function App(props: AppProps): react_jsx_runtime.JSX.Element;
 declare namespace App {
     var useApp: typeof useApp;
@@ -162,12 +198,10 @@ interface BlankProps {
  *
  * If value is undefined or null, return text, otherwise return value.
  *
- * @param options {object}
- * @param options.value {any}
- * @param options.text {string} Default is 'Empty'
- * @returns {JSX.Element}
+ * @example
+ * ```tsx
+ * import { Blank } from '@faasjs/ant-design'
  *
- * ```ts
  * <Blank value={undefined} text="Empty" />
  * ```
  */
@@ -200,9 +234,13 @@ interface FormItemProps<T = any> extends FaasItemProps, Omit<FormItemProps$1<T>,
     if?: (values: Record<string, any>) => boolean;
 }
 /**
- * FormItem, can be used without Form.
+ * FormItem
  *
- * ```ts
+ * - Based on [Ant Design Form.Item](https://ant.design/components/form#formitem).
+ * - Can be used without [Form](https://faasjs.com/doc/ant-design/#form).
+ *
+ * @example
+ * ```tsx
  * // use inline type
  * <FormItem type='string' id='name' />
  *
@@ -230,11 +268,12 @@ type LoadingProps = {
 /**
  * Loading component based on Spin
  *
+ * @example
  * ```tsx
  * <Loading /> // display loading
  *
  * <Loading loading={ !remoteData }>
- *  <div>{remoteData}</div>
+ *   <div>{remoteData}</div>
  * </Loading>
  * ```
  */
@@ -248,6 +287,7 @@ interface FaasDataWrapperProps<T = any> extends FaasDataWrapperProps$1<T> {
 /**
  * FaasDataWrapper component with Loading
  *
+ * @example
  * ```tsx
  * function MyComponent (props: FaasDataInjection) {
  *   return <div>{ props.data }</div>
@@ -293,7 +333,26 @@ interface DescriptionItemContentProps<T = any> {
     };
 }
 /**
- * Description component.
+ * Description component
+ *
+ * - Based on [Ant Design Descriptions](https://ant.design/components/descriptions/).
+ *
+ * @example
+ * ```tsx
+ * import { Description } from '@faasjs/ant-design'
+ *
+ * <Description
+ *   title="Title"
+ *   items={[
+ *     {
+ *       id: 'id',
+ *       title: 'Title',
+ *       type: 'string',
+ *     },
+ *   ]}
+ *   dataSource={{ id: 'value' }}
+ * />
+ * ```
  */
 declare function Description<T = any>(props: DescriptionProps<T>): react_jsx_runtime.JSX.Element;
 
@@ -326,12 +385,10 @@ type TableProps<T = any, ExtendTypes = any> = {
 /**
  * Table component with Ant Design & FaasJS
  *
- * - Support all Ant Design Table props.
+ * - Based on [Ant Design Table](https://ant.design/components/table/).
  * - Support FaasJS injection.
  * - Auto generate filter dropdown (disable with `filterDropdown: false`).
  * - Auto generate sorter (disable with `sorter: false`).
- *
- * @ref https://ant.design/components/table/
  */
 declare function Table<T extends Record<string, any>, ExtendTypes = any>(props: TableProps<T, ExtendTypes>): react_jsx_runtime.JSX.Element;
 
@@ -438,7 +495,7 @@ interface FormProps<Values extends Record<string, any> = any, ExtendItemProps =
 /**
  * Form component with Ant Design & FaasJS
  *
- * @ref https://ant.design/components/form/
+ * - Based on [Ant Design Form](https://ant.design/components/form/).
  */
 declare function Form<Values = any>(props: FormProps<Values>): react_jsx_runtime.JSX.Element;
 declare namespace Form {
@@ -464,9 +521,10 @@ interface LinkProps {
     onClick?: (event: React.MouseEvent<HTMLElement, MouseEvent>) => void;
 }
 /**
- * Link component with button.
+ * Link component with button
  *
- * ```ts
+ * @example
+ * ```tsx
  * // pure link
  * <Link href="/">Home</Link>
  *
@@ -487,6 +545,7 @@ interface RoutesProps {
 /**
  * Routes with lazy loading and 404 page.
  *
+ * @example
  * ```tsx
  * import { Routes, lazy } from '@faasjs/ant-design'
  * import { BrowserRouter } from 'react-router-dom'
@@ -512,12 +571,32 @@ interface TabProps extends Partial<Tab> {
 }
 interface TabsProps extends Omit<TabsProps$1, 'items'> {
     /** auto skip null tab */
-    items: (TabProps | null)[];
+    items: (TabProps | null | false)[];
 }
 /**
  * Tabs component with Ant Design & FaasJS
  *
- * @ref https://ant.design/components/tabs/
+ * - Based on [Ant Design Tabs](https://ant.design/components/tabs/).
+ * - Support auto skip null/false tab item.
+ * - Support `id` as key and label.
+ *
+ * @example
+ * ```tsx
+ * import { Tabs } from '@faasjs/ant-design'
+ *
+ * <Tabs
+ *   items={[
+ *     {
+ *       id: 'id',
+ *       children: 'content',
+ *     },
+ *     1 === 0 && {
+ *       id: 'hidden',
+ *       children: 'content',
+ *     },
+ *   ]}
+ * />
+ * ```
  */
 declare function Tabs(props: TabsProps): react_jsx_runtime.JSX.Element;
 
@@ -537,10 +616,11 @@ interface TitleProps {
     children?: JSX.Element;
 }
 /**
- * Title is used to change the title of the page.
+ * Title is used to change the title of the page
+ *
  * Return null by default.
  *
- * ```ts
+ * ```tsx
  * // return null
  * <Title title='hi' /> // => change the document.title to 'hi'
  * <Title title={['a', 'b']} /> // => change the document.title to 'a - b'

package/dist/index.d.ts

@@ -26,16 +26,16 @@ interface ModalProps extends ModalProps$1 {
 }
 type setModalProps = (changes: Partial<ModalProps>) => void;
 /**
- * Hook style modal.
- * @param init initial props
+ * Hook style modal
  *
- * ```ts
+ * ```tsx
  * function Example() {
  *   const { modal, setModalProps } = useModal()
  *
  *   return <>
  *     <Button onClick={() => setModalProps({ open: true })}>Open Modal</Button>
- *     {modal}</>
+ *     {modal}
+ *   </>
  * }
  * ```
  */
@@ -50,11 +50,9 @@ interface DrawerProps extends DrawerProps$1 {
 }
 type setDrawerProps = (changes: Partial<DrawerProps>) => void;
 /**
- * Hook style drawer.
+ * Hook style drawer
  *
- * @param init initial props
- *
- * ```ts
+ * ```tsx
  * function Example() {
  *   const { drawer, setDrawerProps } = useDrawer()
  *
@@ -73,6 +71,9 @@ declare function useDrawer(init?: DrawerProps): {
     setDrawerProps(changes: Partial<DrawerProps>): void;
 };
 
+/**
+ * Styled error boundary.
+ */
 declare function ErrorBoundary(props: ErrorBoundaryProps): react_jsx_runtime.JSX.Element;
 
 interface ConfigProviderProps {
@@ -113,9 +114,12 @@ interface ConfigProviderProps {
 }
 declare const ConfigContext: react.Context<Partial<ConfigProviderProps>>;
 /**
- * Config for @faasjs/ant-design components.
+ * Config for `@faasjs/ant-design` components.
+ *
+ * @example
+ * ```tsx
+ * import { ConfigProvider } from '@faasjs/ant-design'
  *
- * ```ts
  * <ConfigProvider theme={{ common: { blank: 'Empty' } }}>
  *   <Blank />
  * </ConfigProvider>
@@ -126,10 +130,15 @@ declare function useConfigContext(): Partial<ConfigProviderProps>;
 
 interface AppProps {
     children: React.ReactNode;
+    /** https://ant.design/docs/react/compatible-style#styleprovider */
     styleProviderProps?: StyleProviderProps;
+    /** https://ant.design/components/config-provider/#API */
     configProviderProps?: ConfigProviderProps$1;
+    /** https://reactrouter.com/en/router-components/browser-router */
     browserRouterProps?: BrowserRouterProps;
+    /** https://faasjs.com/doc/ant-design/#errorboundary */
     errorBoundaryProps?: Omit<ErrorBoundaryProps, 'children'>;
+    /** https://faasjs.com/doc/ant-design/#configprovider */
     faasConfigProviderProps?: Omit<ConfigProviderProps, 'children'>;
 }
 interface useAppProps {
@@ -138,6 +147,33 @@ interface useAppProps {
     setModalProps: (changes: Partial<ModalProps>) => void;
     setDrawerProps: (changes: Partial<DrawerProps>) => void;
 }
+/**
+ * App component with Ant Design & FaasJS
+ *
+ * - Based on Ant Design's [ConfigProvider](https://ant.design/components/config-provider/) and [StyleProvider](https://ant.design/components/style-provider/).
+ * - Integrated Ant Design's [Message](https://ant.design/components/message/) and [Notification](https://ant.design/components/notification/).
+ * - Based on FaasJS's [ConfigProvider](https://faasjs.com/doc/ant-design/#configprovider).
+ * - Integrated FaasJS's [Modal](https://faasjs.com/doc/ant-design/#usemodal), [Drawer](https://faasjs.com/doc/ant-design/#usedrawer) and [ErrorBoundary](https://faasjs.com/doc/ant-design/#errorboundary).
+ * - Integrated React Router's [BrowserRouter](https://reactrouter.com/en/router-components/browser-router).
+ *
+ * @example
+ * ```tsx
+ * import { App } from '@faasjs/ant-design'
+ *
+ * export default function () {
+ *   return (
+ *     <App
+ *      styleProviderProps={{}} // https://ant.design/docs/react/compatible-style#styleprovider
+ *      configProviderProps={{}} // https://ant.design/components/config-provider/#API
+ *      browserRouterProps={{}} // https://reactrouter.com/en/router-components/browser-router
+ *      errorBoundaryProps={{}} // https://faasjs.com/doc/ant-design/#errorboundary
+ *      faasConfigProviderProps={{}} // https://faasjs.com/doc/ant-design/#configprovider
+ *     >
+ *       <div>content</div>
+ *     </App>
+ *   )
+ * ```
+ */
 declare function App(props: AppProps): react_jsx_runtime.JSX.Element;
 declare namespace App {
     var useApp: typeof useApp;
@@ -162,12 +198,10 @@ interface BlankProps {
  *
  * If value is undefined or null, return text, otherwise return value.
  *
- * @param options {object}
- * @param options.value {any}
- * @param options.text {string} Default is 'Empty'
- * @returns {JSX.Element}
+ * @example
+ * ```tsx
+ * import { Blank } from '@faasjs/ant-design'
  *
- * ```ts
  * <Blank value={undefined} text="Empty" />
  * ```
  */
@@ -200,9 +234,13 @@ interface FormItemProps<T = any> extends FaasItemProps, Omit<FormItemProps$1<T>,
     if?: (values: Record<string, any>) => boolean;
 }
 /**
- * FormItem, can be used without Form.
+ * FormItem
  *
- * ```ts
+ * - Based on [Ant Design Form.Item](https://ant.design/components/form#formitem).
+ * - Can be used without [Form](https://faasjs.com/doc/ant-design/#form).
+ *
+ * @example
+ * ```tsx
  * // use inline type
  * <FormItem type='string' id='name' />
  *
@@ -230,11 +268,12 @@ type LoadingProps = {
 /**
  * Loading component based on Spin
  *
+ * @example
  * ```tsx
  * <Loading /> // display loading
  *
  * <Loading loading={ !remoteData }>
- *  <div>{remoteData}</div>
+ *   <div>{remoteData}</div>
  * </Loading>
  * ```
  */
@@ -248,6 +287,7 @@ interface FaasDataWrapperProps<T = any> extends FaasDataWrapperProps$1<T> {
 /**
  * FaasDataWrapper component with Loading
  *
+ * @example
  * ```tsx
  * function MyComponent (props: FaasDataInjection) {
  *   return <div>{ props.data }</div>
@@ -293,7 +333,26 @@ interface DescriptionItemContentProps<T = any> {
     };
 }
 /**
- * Description component.
+ * Description component
+ *
+ * - Based on [Ant Design Descriptions](https://ant.design/components/descriptions/).
+ *
+ * @example
+ * ```tsx
+ * import { Description } from '@faasjs/ant-design'
+ *
+ * <Description
+ *   title="Title"
+ *   items={[
+ *     {
+ *       id: 'id',
+ *       title: 'Title',
+ *       type: 'string',
+ *     },
+ *   ]}
+ *   dataSource={{ id: 'value' }}
+ * />
+ * ```
  */
 declare function Description<T = any>(props: DescriptionProps<T>): react_jsx_runtime.JSX.Element;
 
@@ -326,12 +385,10 @@ type TableProps<T = any, ExtendTypes = any> = {
 /**
  * Table component with Ant Design & FaasJS
  *
- * - Support all Ant Design Table props.
+ * - Based on [Ant Design Table](https://ant.design/components/table/).
  * - Support FaasJS injection.
  * - Auto generate filter dropdown (disable with `filterDropdown: false`).
  * - Auto generate sorter (disable with `sorter: false`).
- *
- * @ref https://ant.design/components/table/
  */
 declare function Table<T extends Record<string, any>, ExtendTypes = any>(props: TableProps<T, ExtendTypes>): react_jsx_runtime.JSX.Element;
 
@@ -438,7 +495,7 @@ interface FormProps<Values extends Record<string, any> = any, ExtendItemProps =
 /**
  * Form component with Ant Design & FaasJS
  *
- * @ref https://ant.design/components/form/
+ * - Based on [Ant Design Form](https://ant.design/components/form/).
  */
 declare function Form<Values = any>(props: FormProps<Values>): react_jsx_runtime.JSX.Element;
 declare namespace Form {
@@ -464,9 +521,10 @@ interface LinkProps {
     onClick?: (event: React.MouseEvent<HTMLElement, MouseEvent>) => void;
 }
 /**
- * Link component with button.
+ * Link component with button
  *
- * ```ts
+ * @example
+ * ```tsx
  * // pure link
  * <Link href="/">Home</Link>
  *
@@ -487,6 +545,7 @@ interface RoutesProps {
 /**
  * Routes with lazy loading and 404 page.
  *
+ * @example
  * ```tsx
  * import { Routes, lazy } from '@faasjs/ant-design'
  * import { BrowserRouter } from 'react-router-dom'
@@ -512,12 +571,32 @@ interface TabProps extends Partial<Tab> {
 }
 interface TabsProps extends Omit<TabsProps$1, 'items'> {
     /** auto skip null tab */
-    items: (TabProps | null)[];
+    items: (TabProps | null | false)[];
 }
 /**
  * Tabs component with Ant Design & FaasJS
  *
- * @ref https://ant.design/components/tabs/
+ * - Based on [Ant Design Tabs](https://ant.design/components/tabs/).
+ * - Support auto skip null/false tab item.
+ * - Support `id` as key and label.
+ *
+ * @example
+ * ```tsx
+ * import { Tabs } from '@faasjs/ant-design'
+ *
+ * <Tabs
+ *   items={[
+ *     {
+ *       id: 'id',
+ *       children: 'content',
+ *     },
+ *     1 === 0 && {
+ *       id: 'hidden',
+ *       children: 'content',
+ *     },
+ *   ]}
+ * />
+ * ```
  */
 declare function Tabs(props: TabsProps): react_jsx_runtime.JSX.Element;
 
@@ -537,10 +616,11 @@ interface TitleProps {
     children?: JSX.Element;
 }
 /**
- * Title is used to change the title of the page.
+ * Title is used to change the title of the page
+ *
  * Return null by default.
  *
- * ```ts
+ * ```tsx
  * // return null
  * <Title title='hi' /> // => change the document.title to 'hi'
  * <Title title={['a', 'b']} /> // => change the document.title to 'a - b'

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@faasjs/ant-design",
-  "version": "1.2.0",
+  "version": "1.3.1",
   "license": "MIT",
   "main": "dist/index.js",
   "module": "dist/index.mjs",
@@ -26,7 +26,7 @@
     "lodash-es": "*"
   },
   "peerDependencies": {
-    "@faasjs/react": "1.2.0",
+    "@faasjs/react": "1.3.1",
     "antd": "*",
     "react": "*",
     "react-dom": "*",
@@ -37,7 +37,7 @@
     "@testing-library/jest-dom": "*",
     "@testing-library/react": "*",
     "@testing-library/user-event": "*",
-    "@faasjs/react": "1.2.0",
+    "@faasjs/react": "1.3.1",
     "antd": "*",
     "react": "*",
     "react-dom": "*",