https://github.com/aelfproject/aelf-design
A UI component library based on Antd and compliant with AELF visual specifications
https://github.com/aelfproject/aelf-design
Last synced: 10 months ago
JSON representation
A UI component library based on Antd and compliant with AELF visual specifications
- Host: GitHub
- URL: https://github.com/aelfproject/aelf-design
- Owner: AElfProject
- Created: 2023-10-17T06:31:24.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2024-10-16T12:04:12.000Z (over 1 year ago)
- Last Synced: 2025-08-06T17:56:14.109Z (10 months ago)
- Language: TypeScript
- Homepage: https://aelf-design.vercel.app
- Size: 4.9 MB
- Stars: 4
- Watchers: 1
- Forks: 1
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
Aelf Design
A UI component library based on Antd and compliant with AELF visual specifications
website: https://aelf-design.vercel.app/
# Install
```bash
$ yarn add aelf-design
```
# Usage
```tsx
import { Button } from 'aelf-design';
const App = () => {
return (
default
);
};
export default App;
```
# Development
```bash
$ git clone https://github.com/AElfProject/aelf-design.git
$ pnpm i (if there is not pnpm，please npm install -g pnpm first)
$ pnpm dev
```
# Publish
1. Upgrade the version numbers of each sub package
2. execute release command in the project root directory
```bash
$ pnpm release
```
# How to contribute components to aelf-design
## Prerequisite knowledge
### Design token
In 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
```TypeScript
import { Button, ConfigProvider, Space } from 'antd';
import React from 'react';
const App: React.FC = () => (
Primary
Default
);
export default App;
```
In 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
```TypeScript
import { Button, ConfigProvider, Space } from 'antd';
import React from 'react';
const App: React.FC = () => (
Primary
Default
);
export default App;
```
Details: https://ant-design.antgroup.com/docs/react/customize-theme#design-token
### antd-style
`Antd-style `is a business-level css-in-js solution built on Ant Design V5 Token System
#### createStyles
```TypeScript
import { SmileOutlined } from '@ant-design/icons';
import { Button, Space } from 'antd';
import { createStyles } from 'antd-style';
const useStyles = createStyles(({ token, css, cx }) => {
const commonCard = css`
border-radius: ${token.borderRadiusLG}px;
padding: ${token.paddingLG}px;
`;
return {
container: css`
background-color: ${token.colorBgLayout};
padding: 24px;
`,
defaultCard: css`
${commonCard};
background: ${token.colorBgContainer};
color: ${token.colorText};
`,
primaryCard: cx(
commonCard,
css`
background: ${token.colorPrimary};
color: ${token.colorTextLightSolid};
`,
),
};
});
const App = () => {
const { styles } = useStyles();
return (
} />
oprerate button
defalut card
primary card
);
};
export default App;
```
The createStyles method can pass in a function with the following signature:
```TypeScript
type GetCssStyleFn = (utils: CreateStylesUtils, props?: Props) => StyleInput;
```
Below is a detailed introduction to the functions of each attribute
**CreateStylesUtils**
The 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:
| Attribute name | Type | Description |
| :-- | :-- | :-- |
| css | CssUtil | CSS serialization function |
| cx | ClassNamesUtil | CSS class name tool function |
| responsive | ResponsiveUtil | Responsive media query tool function |
| token | FullToken | Contains antd's token and all custom tokens |
| appearance | ThemeAppearance | Current theme mode under ThemeProvider. 'dark' \| 'light' \| string |
| isDarkMode | boolean | Syntax sugar can be directly used with isDarkMode to reduce the cost of appearance judgment.Equivalent to appearance === 'dark' |
| prefixCls | string | The prefix marked on the ThemeProvider can obtain the current component prefix, making it easier to respond to component prefixes more flexibly |
#### ThemeProvider
ThemeProvider has done secondary encapsulation on the basis of ConfigProvider, providing a more convenient way to customize themes
Custom Tokens can be injected through the `customToken `method of `ThemeProvider`
```TypeScript
import { ThemeProvider } from 'antd-style';
export default () => {
return (
);
};
// consume customToken
css`
background-color: ${token.customBrandColor};
padding: 24px;
`
```
## Develop aelfd component
1. ### According to the component design draft, identify the differences with the antd component
2. ### List the new features based on the antd component
3. ### Configure token
Component tokens required to configure this component, global tokens (pay attention to whether it will affect other components), and custom tokens.
```TypeScript
theme?: ThemeConfig | GetAntdTheme;
```
4. ### Define aelfd component type file
```TypeScript
export type AelfdButtonSizeType =
| 'mini'
| 'small'
| 'medium'
| 'large'
| 'ultra'
export interface IAelfdButtonProps
extends Omit {
size?: AelfdButtonSizeType
onClick?: React.MouseEventHandler
millisecondOfThrottle?: number
}
```
5. ### Writing component logic and style files
```TypeScript
const useStyles = createStyles(
({ css, prefixCls }, { size }: { size: AelfdButtonSizeType }) => {
const dynamicWidth =
size === 'mini'
? '24px'
: size === 'small'
? '32px'
: size === 'medium'
? '40px'
: size === 'large'
? '48px'
: '56px'
return {
buttonWrap: css`
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
// ...
&.${prefixCls}-btn-circle {
min-height: ${dynamicWidth};
height: ${dynamicWidth};
font-size: 14px;
}
&.${prefixCls}-btn-icon-only {
min-width: auto;
width: ${dynamicWidth};
}
`
}
}
)
```
Previously, 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
### Vs code plugin
**vscode-styled-components**