docs: add components group and format components directory (#37)

* refactor: format component directory

* refactor: Address -> address

* docs: init components group

---------

Co-authored-by: yutingzhao1991 <[email protected]>

packages/web3/src/address/demos/simple.tsx

@@ -0,0 +1,5 @@
+import { Address } from '@ant-design/web3';
+
+export default () => {
+  return <Address ellipsis address={'3ea2cfd153b8d8505097b81c87c11f5d05097c18'} />;
+};

packages/web3/src/address/index.md

@@ -0,0 +1,10 @@
+---
+nav: Components
+group: Components
+---
+
+# Address
+
+## Simple Usage
+
+<code src="./demos/simple.tsx"></code>

packages/web3/src/address/index.zh-CN.md

@@ -0,0 +1,10 @@
+---
+nav: 组件
+group: 组件
+---
+
+# Address
+
+## 基本使用
+
+<code src="./demos/simple.tsx"></code>

packages/web3/src/BrowserLink/index.md → packages/web3/src/browser-link/index.md

@@ -1,6 +1,6 @@
 ---
-group:
-  title: Components
+nav: Components
+group: Components
 ---
 
 # BrowserLink

packages/web3/src/BrowserLink/index.tsx → packages/web3/src/browser-link/index.tsx

@@ -3,7 +3,7 @@ import { Tooltip } from 'antd';
 import { Chains } from '@ant-design/web3-common';
 import useProvider from '../hooks/useProvider';
 import useCurrentAccount from '../hooks/useCurrentAccount';
-import { Address } from '../Address';
+import { Address } from '../address';
 
 export interface BrowserLinkProps {
   icon?: boolean | React.ReactNode;

packages/web3/src/BrowserLink/index.zh-CN.md → packages/web3/src/browser-link/index.zh-CN.md

@@ -1,6 +1,6 @@
 ---
-group:
-  title: 组件
+nav: 组件
+group: 组件
 ---
 
 # BrowerLink

packages/web3/src/connect-button/connect-button.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import { Button } from 'antd';
 import useCurrentAccount from '../hooks/useCurrentAccount';
 import useProvider from '../hooks/useProvider';
-import { Address } from '../Address';
+import { Address } from '../address';
 import type { ConnectButtonProps } from './interface';
 import { UnconnectedButton } from './unconnected-button';
 

packages/web3/src/connect-button/index.md

@@ -1,6 +1,6 @@
 ---
-group:
-  title: Components
+nav: Components
+group: Components
 ---
 
 # ConnectButton

packages/web3/src/connect-button/index.zh-CN.md

@@ -1,6 +1,6 @@
 ---
-group:
-  title: 组件
+nav: 组件
+group: 组件
 ---
 
 # ConnectButton

packages/web3/src/connect-button/unconnected-button.tsx

@@ -3,7 +3,7 @@ import { Button } from 'antd';
 import { Wallet } from '@ant-design/web3-icons';
 import useProvider from '../hooks/useProvider';
 import type { UnconnectedButtonProps } from './interface';
-import { ConnectModal } from '../ConnectModal';
+import { ConnectModal } from '../connect-modal';
 import useWallets from '../hooks/useWallets';
 
 export const UnconnectedButton: React.FC<UnconnectedButtonProps> = (props) => {

packages/web3/src/ConnectModal/index.md → packages/web3/src/connect-modal/index.md

@@ -1,6 +1,6 @@
 ---
-group:
-  title: Components
+nav: Components
+group: Components
 ---
 
 # ConnectModal

packages/web3/src/ConnectModal/index.zh-CN.md → packages/web3/src/connect-modal/index.zh-CN.md

@@ -1,6 +1,6 @@
 ---
-group:
-  title: 组件
+nav: 组件
+group: 组件
 ---
 
 # ConnectModal
@@ -24,13 +24,13 @@ group:
 ### ConnectModalProps
 
 | 属性 | 描述 | 类型 | 默认值 | 版本 |
-| --- | --- | --- | --- | --- | --- |
+| --- | --- | --- | --- | --- |
 | title | ConnectModal 的标题，与 Modal 的 title 类型相同 | `ModalProps['title']` | - | - |
 | theme | ConnectModal 的主题 | `'dark' \| 'light'` | 'light' | - |
 | open | 弹框是否展示，与 Modal 的 open 类型相同 | `ModalProps['open']` | - | - |
 | onOpenChange | 弹框可见性改变回调 | `(open: boolean) => void` | - | - |
 | onSelectWallet | 选中钱包回调 | `(wallet: Wallet) => void` | - | - |
-| modalProps | 透传 Modal 的 props | `ModalProps` | - | - | - |
+| modalProps | 透传 Modal 的 props | `ModalProps` | - | - |
 | prefixCls | class 前缀 | `string` | - | - |
 | footer | 自定义 footer | `React.ReactNode` | - | - |
 | walletList | 钱包列表 | `Wallet[]` | - | - |

packages/web3/src/constants/presets.ts

@@ -1,4 +1,4 @@
-import { WalletMetadata } from '../ConnectModal/interface';
+import { WalletMetadata } from '../connect-modal/interface';
 
 export enum WalletsPresets {
   SIMPLE = 'simple',

packages/web3/src/hooks/demos/useNFT.tsx

@@ -0,0 +1,6 @@
+import { useNFT } from '@ant-design/web3';
+
+export default () => {
+  const { metadata } = useNFT('0x79fcdef22feed20eddacbb2587640e45491b757f', 42);
+  return <div>{metadata.name}</div>;
+};

packages/web3/src/hooks/index.md

@@ -0,0 +1,12 @@
+---
+nav: Components
+group: General
+---
+
+# Hooks
+
+Components used to display NFT images more conveniently and simply.
+
+## useNFT
+
+<code src="./demos/useNFT.tsx"></code>

packages/web3/src/hooks/index.tsx

@@ -0,0 +1 @@
+export { default as useNFT } from './useNFT';

packages/web3/src/hooks/index.zh-CN.md

@@ -0,0 +1,10 @@
+---
+nav: 组件
+group: 通用
+---
+
+# Hooks
+
+## useNFT
+
+<code src="./demos/useNFT.tsx"></code>

packages/web3/src/icons.md

@@ -0,0 +1,14 @@
+---
+nav: Components
+group: General
+---
+
+# Icons
+
+```jsx
+import { ArbitrumFilled } from '@ant-design/web3-icons';
+
+export default () => {
+  return <ArbitrumFilled />;
+};
+```

packages/web3/src/icons.zh-CN.md

@@ -0,0 +1,14 @@
+---
+nav: 组件
+group: 通用
+---
+
+# Icons
+
+```jsx
+import { ArbitrumFilled } from '@ant-design/web3-icons';
+
+export default () => {
+  return <ArbitrumFilled />;
+};
+```

packages/web3/src/index.tsx

@@ -1,7 +1,8 @@
 export * from './connect-button';
-export * from './ConnectModal';
-export * from './MockProvider';
-export * from './Address';
-export * from './BrowserLink';
-export * from './NFTCard';
+export * from './connect-modal';
+export * from './mock-provider';
+export * from './address';
+export * from './browser-link';
+export * from './nft-image';
 export * from './constants';
+export * from './hooks';

packages/web3/src/nft-image/demos/simple.tsx

@@ -0,0 +1,5 @@
+import { NFTImage } from '@ant-design/web3';
+
+export default () => {
+  return <NFTImage address="0x79fcdef22feed20eddacbb2587640e45491b757f" tokenId={42} />;
+};

packages/web3/src/NFTCard/index.md → packages/web3/src/nft-image/index.md

@@ -1,9 +1,9 @@
 ---
-group:
-  title: Components
+nav: Components
+group: Components
 ---
 
-# NFTCard
+# NFTImage
 
 Components used to display NFT images more conveniently and simply.
 

packages/web3/src/nft-image/index.tsx

@@ -0,0 +1,15 @@
+import React from 'react';
+import { Image, ImageProps } from 'antd';
+import { getWeb3AssetUrl } from '@ant-design/web3-common';
+import useNFT from '../hooks/useNFT';
+
+export interface NFTCardProps extends ImageProps {
+  address: string;
+  tokenId: number;
+}
+
+export const NFTImage: React.FC<NFTCardProps> = ({ address, tokenId, ...rest }) => {
+  const { metadata } = useNFT(address, tokenId);
+
+  return <Image src={getWeb3AssetUrl(metadata.image)} {...rest} />;
+};

packages/web3/src/NFTCard/index.zh-CN.md → packages/web3/src/nft-image/index.zh-CN.md

@@ -1,9 +1,9 @@
 ---
-group:
-  title: Components
+nav: 组件
+group: 组件
 ---
 
-# NFTCard
+# NFTImage
 
 更简单地展示 NFT 图片的组件。