{"id":26562917,"url":"https://github.com/aelfproject/aelf-design","last_synced_at":"2025-08-09T23:06:36.851Z","repository":{"id":239828468,"uuid":"706016789","full_name":"AElfProject/aelf-design","owner":"AElfProject","description":"A UI component library based on Antd and compliant with AELF visual specifications","archived":false,"fork":false,"pushed_at":"2024-10-16T12:04:12.000Z","size":5136,"stargazers_count":4,"open_issues_count":2,"forks_count":1,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-08-06T17:56:14.109Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://aelf-design.vercel.app","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/AElfProject.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2023-10-17T06:31:24.000Z","updated_at":"2024-11-25T00:14:32.000Z","dependencies_parsed_at":"2024-05-21T11:00:13.321Z","dependency_job_id":"b76341db-a91d-4253-81d4-caba4e843e93","html_url":"https://github.com/AElfProject/aelf-design","commit_stats":null,"previous_names":["aelf-devops/aelf-design","aelfproject/aelf-design"],"tags_count":117,"template":false,"template_full_name":null,"purl":"pkg:github/AElfProject/aelf-design","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AElfProject%2Faelf-design","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AElfProject%2Faelf-design/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AElfProject%2Faelf-design/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AElfProject%2Faelf-design/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/AElfProject","download_url":"https://codeload.github.com/AElfProject/aelf-design/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AElfProject%2Faelf-design/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":269649848,"owners_count":24453541,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-08-09T02:00:10.424Z","response_time":111,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2025-03-22T15:29:15.064Z","updated_at":"2025-08-09T23:06:36.826Z","avatar_url":"https://github.com/AElfProject.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cdiv align=\"center\"\u003e\n\n\u003cimg height=\"180\" src=\"https://ipfs.io/ipfs/QmWtjvb47DU1EQ4MpridFY1ow4214aAWCkhGu3ZF4xvRSY/\"\u003e\n\n\u003ch1 align=\"center\"\u003eAelf Design\u003c/h1\u003e\n\u003ch2\u003eA UI component library based on Antd and compliant with AELF visual specifications\u003c/h2\u003e\n\u003ch2 align=\"left\"\u003e website: https://aelf-design.vercel.app/\u003c/h2\u003e\n\n\u003c/div\u003e\n\n# Install\n\n```bash\n$ yarn add aelf-design\n```\n\n# Usage\n\n```tsx\nimport { Button } from 'aelf-design';\n\nconst App = () =\u003e {\n  return (\n    \u003cdiv\u003e\n      \u003cButton\u003edefault\u003c/Button\u003e\n    \u003c/div\u003e\n  );\n};\n\nexport default App;\n```\n\n# Development\n\n```bash\n$ git clone https://github.com/AElfProject/aelf-design.git\n$ pnpm i (if there is not pnpm，please npm install -g pnpm first)\n$ pnpm dev\n```\n\n# Publish\n\n1. Upgrade the version numbers of each sub package\n2. execute release command in the project root directory\n\n```bash\n$ pnpm release\n```\n\n# How to contribute components to aelf-design\n\n## Prerequisite knowledge\n\n### Design token\n\nIn antd 5.0, the smallest element that affects the theme is called the Design Token. By modifying the Design Token, various themes or components can be presented. By passing the `theme `property in the `ConfigProvider `, the theme can be configured\n\n```TypeScript\nimport { Button, ConfigProvider, Space } from 'antd';\nimport React from 'react';\n\nconst App: React.FC = () =\u003e (\n  \u003cConfigProvider\n    theme={{\n      token: {\n        colorPrimary: '#00b96b',\n        borderRadius: 2,\n      },\n    }}\n  \u003e\n    \u003cSpace\u003e\n      \u003cButton type=\"primary\"\u003ePrimary\u003c/Button\u003e\n      \u003cButton\u003eDefault\u003c/Button\u003e\n    \u003c/Space\u003e\n  \u003c/ConfigProvider\u003e\n);\n\nexport default App;\n```\n\nIn addition to the overall Design Token, each component will also open its own Component Token to achieve the ability to customize the style of the component, and different components will not affect each other\n\n```TypeScript\nimport { Button, ConfigProvider, Space } from 'antd';\nimport React from 'react';\n\nconst App: React.FC = () =\u003e (\n  \u003cConfigProvider\n    theme={{\n        components: {\n          Button: {\n            colorPrimary: '#00b96b',\n            borderColorDisabled: '#d9d9d9'\n          },\n          Input: {\n            colorPrimary: '#eb2f96',\n          }\n        },\n    }}\n  \u003e\n    \u003cSpace\u003e\n      \u003cButton type=\"primary\"\u003ePrimary\u003c/Button\u003e\n      \u003cButton\u003eDefault\u003c/Button\u003e\n    \u003c/Space\u003e\n  \u003c/ConfigProvider\u003e\n);\n\nexport default App;\n```\n\nDetails: https://ant-design.antgroup.com/docs/react/customize-theme#design-token\n\n### antd-style\n\n`Antd-style `is a business-level css-in-js solution built on Ant Design V5 Token System\n\n#### createStyles\n\n```TypeScript\nimport { SmileOutlined } from '@ant-design/icons';\nimport { Button, Space } from 'antd';\nimport { createStyles } from 'antd-style';\n\nconst useStyles = createStyles(({ token, css, cx }) =\u003e {\n  const commonCard = css`\n    border-radius: ${token.borderRadiusLG}px;\n    padding: ${token.paddingLG}px;\n  `;\n\n  return {\n    container: css`\n      background-color: ${token.colorBgLayout};\n      padding: 24px;\n    `,\n\n    defaultCard: css`\n      ${commonCard};\n      background: ${token.colorBgContainer};\n      color: ${token.colorText};\n    `,\n\n    primaryCard: cx(\n      commonCard,\n      css`\n        background: ${token.colorPrimary};\n        color: ${token.colorTextLightSolid};\n      `,\n    ),\n  };\n});\n\nconst App = () =\u003e {\n  const { styles } = useStyles();\n\n  return (\n    \u003cdiv className={styles.container}\u003e\n      \u003cSpace direction={'vertical'} style={{ width: '100%' }} size={16}\u003e\n        \u003cSpace\u003e\n          \u003cButton icon={\u003cSmileOutlined /\u003e} /\u003e\n          oprerate button\n        \u003c/Space\u003e\n        \u003cdiv className={styles.defaultCard}\u003edefalut card\u003c/div\u003e\n        \u003cdiv className={styles.primaryCard}\u003eprimary card\u003c/div\u003e\n      \u003c/Space\u003e\n    \u003c/div\u003e\n  );\n};\n\nexport default App;\n```\n\nThe createStyles method can pass in a function with the following signature:\n\n```TypeScript\ntype GetCssStyleFn = (utils: CreateStylesUtils, props?: Props) =\u003e StyleInput;\n```\n\nBelow is a detailed introduction to the functions of each attribute\n\n**CreateStylesUtils**\n\nThe first parameter used when writing styles, utils, provides a series of auxiliary objects and methods that facilitate style writing, improving the efficiency of style writing. Its type is CreateStylesUtils, and the property table is as follows:\n\n| Attribute name | Type | Description |\n| :-- | :-- | :-- |\n| css | CssUtil | CSS serialization function |\n| cx | ClassNamesUtil | CSS class name tool function |\n| responsive | ResponsiveUtil | Responsive media query tool function |\n| token | FullToken | Contains antd's token and all custom tokens |\n| appearance | ThemeAppearance | Current theme mode under ThemeProvider. 'dark' \\| 'light' \\| string |\n| isDarkMode | boolean | Syntax sugar can be directly used with isDarkMode to reduce the cost of appearance judgment.Equivalent to appearance === 'dark' |\n| prefixCls | string | The prefix marked on the ThemeProvider can obtain the current component prefix, making it easier to respond to component prefixes more flexibly |\n\n#### ThemeProvider\n\nThemeProvider has done secondary encapsulation on the basis of ConfigProvider, providing a more convenient way to customize themes\n\nCustom Tokens can be injected through the `customToken `method of `ThemeProvider`\n\n```TypeScript\nimport { ThemeProvider } from 'antd-style';\n\nexport default () =\u003e {\n  return (\n    \u003cThemeProvider customToken={{ customBrandColor: '#c956df' }}\u003e\n      \u003cApp /\u003e\n    \u003c/ThemeProvider\u003e\n  );\n};\n\n// consume customToken\ncss`\n  background-color: ${token.customBrandColor};\n  padding: 24px;\n`\n```\n\n## Develop aelfd component\n\n1. ### According to the component design draft, identify the differences with the antd component\n\n2. ### List the new features based on the antd component\n\n3. ### Configure token\n\nComponent tokens required to configure this component, global tokens (pay attention to whether it will affect other components), and custom tokens.\n\n```TypeScript\n\u003cThemeProvider\n    customToken={{ customBrandColor: '#c956df' }}\n    theme={{\n        components: {\n          Button: {\n            colorPrimary: '#00b96b',\n            borderColorDisabled: '#d9d9d9'\n          },\n          Input: {\n            paddingBlock: 11,\n            paddingBlockSM: 7,\n          }\n          ...\n        },\n        token: {\n            colorPrimary: '#1370DD',\n            colorPrimaryHover: '#3689DD',\n        }\n    }}\n/\u003e\n\n\ntheme?: ThemeConfig | GetAntdTheme;\n```\n\n4. ### Define aelfd component type file\n\n```TypeScript\nexport type AelfdButtonSizeType =\n  | 'mini'\n  | 'small'\n  | 'medium'\n  | 'large'\n  | 'ultra'\nexport interface IAelfdButtonProps\n  extends Omit\u003cButtonProps, 'size' | 'onClick'\u003e {\n  size?: AelfdButtonSizeType\n  onClick?: React.MouseEventHandler\u003cHTMLElement\u003e\n  millisecondOfThrottle?: number\n}\n```\n\n5. ### Writing component logic and style files\n\n```TypeScript\nconst useStyles = createStyles(\n  ({ css, prefixCls }, { size }: { size: AelfdButtonSizeType }) =\u003e {\n    const dynamicWidth =\n      size === 'mini'\n        ? '24px'\n        : size === 'small'\n        ? '32px'\n        : size === 'medium'\n        ? '40px'\n        : size === 'large'\n        ? '48px'\n        : '56px'\n\n    return {\n      buttonWrap: css`\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        flex-shrink: 0;\n        // ...\n\n        \u0026.${prefixCls}-btn-circle {\n          min-height: ${dynamicWidth};\n          height: ${dynamicWidth};\n          font-size: 14px;\n        }\n        \u0026.${prefixCls}-btn-icon-only {\n          min-width: auto;\n          width: ${dynamicWidth};\n        }\n      `\n    }\n  }\n)\n```\n\nPreviously, if you needed to override the style of the antd component, you needed to use: global to override it. Now, you can simply remove: global\n\n### Vs code plugin\n\n**vscode-styled-components**\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Faelfproject%2Faelf-design","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Faelfproject%2Faelf-design","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Faelfproject%2Faelf-design/lists"}