@akinon/ui-button 0.5.0 → 0.6.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -1,34 +1,16 @@
1
- import './index.css';
2
- import type { BaseButtonProps } from 'antd/lib/button/button';
3
- import type { ButtonHTMLType, ButtonType as AntButtonType } from 'antd/lib/button/buttonHelpers';
4
- import * as React from 'react';
5
- type ButtonType = Exclude<AntButtonType, 'dashed'> | 'secondary';
1
+ import React from 'react';
2
+ import type { IButtonProps } from './types';
6
3
  /**
7
- * The props of the Button component.
4
+ * Button component for Akinon UI.
5
+ *
6
+ * This versatile component provides a customizable button element with various types, sizes, icons, and states.
7
+ * It supports different visual styles and behaviors to fit a wide range of use cases within the Akinon design system.
8
+ *
9
+ * The component accepts default <a href="https://react.dev/reference/react-dom/components/common#common-props" target="_blank" rel="noopener noreferrer">React HTML attributes</a>,
10
+ * as well as attributes specific to <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#attributes" target="_blank" rel="noopener noreferrer">HTMLButtonElement</a>
11
+ * &nbsp;and <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#attributes" target="_blank" rel="noopener noreferrer">HTMLAnchorElement</a>,
12
+ * allowing for flexible usage as both a button and a link.
8
13
  */
9
- export type ButtonProps = Omit<BaseButtonProps, 'type' | 'classNames' | 'rootClassName' | 'styles' | 'prefixCls' | 'shape' | 'htmlType'> & {
10
- /**
11
- * The type of the button. Note that this is different from the html type.
12
- */
13
- type?: ButtonType;
14
- /**
15
- * The href of the button. If provided, the button will be rendered as an anchor tag.
16
- */
17
- href?: string;
18
- /**
19
- * The html type of the button. Note that this is different from the type.
20
- */
21
- htmlType?: ButtonHTMLType;
22
- /**
23
- * onClick handler.
24
- * @param event
25
- * @returns
26
- */
27
- onClick?: (event: React.MouseEvent) => void;
28
- };
29
- /**
30
- * Button component.
31
- */
32
- export declare const Button: ({ children, ...buttonProps }: ButtonProps) => React.JSX.Element;
33
- export {};
14
+ export declare const Button: (buttonProps: IButtonProps) => React.JSX.Element;
15
+ export type * from './types';
34
16
  //# sourceMappingURL=index.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.tsx"],"names":[],"mappings":"AAAA,OAAO,aAAa,CAAC;AAGrB,OAAO,KAAK,EACV,eAAe,EAEhB,MAAM,wBAAwB,CAAC;AAChC,OAAO,KAAK,EACV,cAAc,EACd,UAAU,IAAI,aAAa,EAC5B,MAAM,+BAA+B,CAAC;AACvC,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,KAAK,UAAU,GAAG,OAAO,CAAC,aAAa,EAAE,QAAQ,CAAC,GAAG,WAAW,CAAC;AAEjE;;GAEG;AACH,MAAM,MAAM,WAAW,GAAG,IAAI,CAC5B,eAAe,EACb,MAAM,GACN,YAAY,GACZ,eAAe,GACf,QAAQ,GACR,WAAW,GACX,OAAO,GACP,UAAU,CACb,GAAG;IACF;;OAEG;IACH,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,QAAQ,CAAC,EAAE,cAAc,CAAC;IAC1B;;;;OAIG;IACH,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,KAAK,IAAI,CAAC;CAC7C,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,MAAM,iCAAkC,WAAW,sBAE/D,CAAC"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.tsx"],"names":[],"mappings":"AAQA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AAE5C;;;;;;;;;;GAUG;AACH,eAAO,MAAM,MAAM,gBAAiB,YAAY,sBA0G/C,CAAC;AAEF,mBAAmB,SAAS,CAAC"}
package/dist/cjs/index.js CHANGED
@@ -1,25 +1,88 @@
1
1
  "use strict";
2
- var __rest = (this && this.__rest) || function (s, e) {
3
- var t = {};
4
- for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
5
- t[p] = s[p];
6
- if (s != null && typeof Object.getOwnPropertySymbols === "function")
7
- for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
8
- if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
9
- t[p[i]] = s[p[i]];
10
- }
11
- return t;
12
- };
13
2
  Object.defineProperty(exports, "__esModule", { value: true });
14
3
  exports.Button = void 0;
15
- require("./index.css");
4
+ const icons_1 = require("@akinon/icons");
5
+ const ui_theme_1 = require("@akinon/ui-theme");
6
+ const cssinjs_1 = require("@ant-design/cssinjs");
16
7
  const antd_1 = require("antd");
17
- const React = require("react");
8
+ const react_1 = require("react");
18
9
  /**
19
- * Button component.
10
+ * Button component for Akinon UI.
11
+ *
12
+ * This versatile component provides a customizable button element with various types, sizes, icons, and states.
13
+ * It supports different visual styles and behaviors to fit a wide range of use cases within the Akinon design system.
14
+ *
15
+ * The component accepts default <a href="https://react.dev/reference/react-dom/components/common#common-props" target="_blank" rel="noopener noreferrer">React HTML attributes</a>,
16
+ * as well as attributes specific to <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#attributes" target="_blank" rel="noopener noreferrer">HTMLButtonElement</a>
17
+ * &nbsp;and <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#attributes" target="_blank" rel="noopener noreferrer">HTMLAnchorElement</a>,
18
+ * allowing for flexible usage as both a button and a link.
20
19
  */
21
- const Button = (_a) => {
22
- var { children } = _a, buttonProps = __rest(_a, ["children"]);
23
- return React.createElement(antd_1.Button, Object.assign({}, buttonProps), children);
20
+ const Button = (buttonProps) => {
21
+ const { getPrefixCls, theme } = react_1.default.useContext(antd_1.ConfigProvider.ConfigContext);
22
+ const { token, hashId } = (0, ui_theme_1.useToken)();
23
+ const buttonToken = token.Button;
24
+ const useStyle = (0, cssinjs_1.useStyleRegister)({
25
+ token: token,
26
+ path: ['Button'],
27
+ // eslint-disable-next-line @typescript-eslint/no-explicit-any
28
+ theme: theme
29
+ }, () => {
30
+ var _a, _b, _c, _d, _e, _f, _g, _h;
31
+ const prefixCls = `:where(.${hashId}).${getPrefixCls()}-btn`;
32
+ // MARK: - Disabled
33
+ const disabledStyles = {
34
+ '&:disabled, &-disabled': {
35
+ backgroundColor: (_a = buttonToken.colorBgContainerDisabled) !== null && _a !== void 0 ? _a : token.colorBgContainerDisabled,
36
+ color: (_b = buttonToken.colorTextDisabled) !== null && _b !== void 0 ? _b : token.colorTextDisabled,
37
+ borderColor: buttonToken.borderColorDisabled,
38
+ cursor: 'not-allowed',
39
+ boxShadow: 'none'
40
+ }
41
+ };
42
+ // END: Disabled
43
+ return {
44
+ // MARK: - All
45
+ [`${prefixCls}`]: {
46
+ ['> *']: {
47
+ verticalAlign: 'middle'
48
+ }
49
+ },
50
+ // END: All
51
+ // MARK: - Default SM
52
+ [`${prefixCls}-default`]: {
53
+ [`&:not(:disabled)${prefixCls}-sm`]: {
54
+ backgroundColor: buttonToken.defaultBgSm,
55
+ color: buttonToken.colorText,
56
+ borderColor: 'transparent',
57
+ '&:hover': {
58
+ backgroundColor: buttonToken.defaultBgSmHover,
59
+ borderColor: 'transparent',
60
+ color: buttonToken.colorTextHover
61
+ },
62
+ [`&${prefixCls}-dangerous`]: {
63
+ backgroundColor: buttonToken.colorErrorBgSM,
64
+ '&:hover:not(:disabled)': {
65
+ color: buttonToken.colorErrorSMHover,
66
+ backgroundColor: buttonToken.colorErrorBgSMHover
67
+ }
68
+ }
69
+ }
70
+ },
71
+ // END: Default SM
72
+ // MARK: - Success
73
+ [`${prefixCls}-success`]: Object.assign({ backgroundColor: (_c = buttonToken.colorSuccessBg) !== null && _c !== void 0 ? _c : token.colorSuccessBg, '&:hover:not(:disabled)': {
74
+ backgroundColor: (_d = buttonToken.colorSuccessHover) !== null && _d !== void 0 ? _d : token.colorSuccessHover
75
+ } }, disabledStyles),
76
+ // END: Success
77
+ // MARK: - Warning
78
+ [`${prefixCls}-warning`]: Object.assign({ backgroundColor: (_e = buttonToken.colorWarningBg) !== null && _e !== void 0 ? _e : token.colorWarningBg, color: (_f = buttonToken.colorWarningText) !== null && _f !== void 0 ? _f : token.colorWarningText, '&:hover:not(:disabled)': {
79
+ backgroundColor: (_g = buttonToken.colorWarningHover) !== null && _g !== void 0 ? _g : token.colorWarningHover,
80
+ borderColor: (_h = buttonToken.colorWarningBorder) !== null && _h !== void 0 ? _h : token.colorWarningBorder
81
+ } }, disabledStyles)
82
+ // END: Warning
83
+ };
84
+ });
85
+ // MARK: - Render
86
+ return useStyle(react_1.default.createElement(antd_1.Button, Object.assign({}, buttonProps, { icon: react_1.default.createElement(icons_1.Icon, { icon: buttonProps.icon, size: 12, style: { lineHeight: 0 } }) }), buttonProps.children));
24
87
  };
25
88
  exports.Button = Button;
@@ -1,34 +1,16 @@
1
- import './index.css';
2
- import type { BaseButtonProps } from 'antd/lib/button/button';
3
- import type { ButtonHTMLType, ButtonType as AntButtonType } from 'antd/lib/button/buttonHelpers';
4
- import * as React from 'react';
5
- type ButtonType = Exclude<AntButtonType, 'dashed'> | 'secondary';
1
+ import React from 'react';
2
+ import type { IButtonProps } from './types';
6
3
  /**
7
- * The props of the Button component.
4
+ * Button component for Akinon UI.
5
+ *
6
+ * This versatile component provides a customizable button element with various types, sizes, icons, and states.
7
+ * It supports different visual styles and behaviors to fit a wide range of use cases within the Akinon design system.
8
+ *
9
+ * The component accepts default <a href="https://react.dev/reference/react-dom/components/common#common-props" target="_blank" rel="noopener noreferrer">React HTML attributes</a>,
10
+ * as well as attributes specific to <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#attributes" target="_blank" rel="noopener noreferrer">HTMLButtonElement</a>
11
+ * &nbsp;and <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#attributes" target="_blank" rel="noopener noreferrer">HTMLAnchorElement</a>,
12
+ * allowing for flexible usage as both a button and a link.
8
13
  */
9
- export type ButtonProps = Omit<BaseButtonProps, 'type' | 'classNames' | 'rootClassName' | 'styles' | 'prefixCls' | 'shape' | 'htmlType'> & {
10
- /**
11
- * The type of the button. Note that this is different from the html type.
12
- */
13
- type?: ButtonType;
14
- /**
15
- * The href of the button. If provided, the button will be rendered as an anchor tag.
16
- */
17
- href?: string;
18
- /**
19
- * The html type of the button. Note that this is different from the type.
20
- */
21
- htmlType?: ButtonHTMLType;
22
- /**
23
- * onClick handler.
24
- * @param event
25
- * @returns
26
- */
27
- onClick?: (event: React.MouseEvent) => void;
28
- };
29
- /**
30
- * Button component.
31
- */
32
- export declare const Button: ({ children, ...buttonProps }: ButtonProps) => React.JSX.Element;
33
- export {};
14
+ export declare const Button: (buttonProps: IButtonProps) => React.JSX.Element;
15
+ export type * from './types';
34
16
  //# sourceMappingURL=index.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.tsx"],"names":[],"mappings":"AAAA,OAAO,aAAa,CAAC;AAGrB,OAAO,KAAK,EACV,eAAe,EAEhB,MAAM,wBAAwB,CAAC;AAChC,OAAO,KAAK,EACV,cAAc,EACd,UAAU,IAAI,aAAa,EAC5B,MAAM,+BAA+B,CAAC;AACvC,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,KAAK,UAAU,GAAG,OAAO,CAAC,aAAa,EAAE,QAAQ,CAAC,GAAG,WAAW,CAAC;AAEjE;;GAEG;AACH,MAAM,MAAM,WAAW,GAAG,IAAI,CAC5B,eAAe,EACb,MAAM,GACN,YAAY,GACZ,eAAe,GACf,QAAQ,GACR,WAAW,GACX,OAAO,GACP,UAAU,CACb,GAAG;IACF;;OAEG;IACH,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,QAAQ,CAAC,EAAE,cAAc,CAAC;IAC1B;;;;OAIG;IACH,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,KAAK,IAAI,CAAC;CAC7C,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,MAAM,iCAAkC,WAAW,sBAE/D,CAAC"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.tsx"],"names":[],"mappings":"AAQA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AAE5C;;;;;;;;;;GAUG;AACH,eAAO,MAAM,MAAM,gBAAiB,YAAY,sBA0G/C,CAAC;AAEF,mBAAmB,SAAS,CAAC"}
package/dist/esm/index.js CHANGED
@@ -1,21 +1,84 @@
1
- var __rest = (this && this.__rest) || function (s, e) {
2
- var t = {};
3
- for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
4
- t[p] = s[p];
5
- if (s != null && typeof Object.getOwnPropertySymbols === "function")
6
- for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
7
- if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
8
- t[p[i]] = s[p[i]];
9
- }
10
- return t;
11
- };
12
- import './index.css';
13
- import { Button as AntButton } from 'antd';
14
- import * as React from 'react';
1
+ import { Icon } from '@akinon/icons';
2
+ import { useToken } from '@akinon/ui-theme';
3
+ import { useStyleRegister } from '@ant-design/cssinjs';
4
+ import { Button as AntButton, ConfigProvider } from 'antd';
5
+ import React from 'react';
15
6
  /**
16
- * Button component.
7
+ * Button component for Akinon UI.
8
+ *
9
+ * This versatile component provides a customizable button element with various types, sizes, icons, and states.
10
+ * It supports different visual styles and behaviors to fit a wide range of use cases within the Akinon design system.
11
+ *
12
+ * The component accepts default <a href="https://react.dev/reference/react-dom/components/common#common-props" target="_blank" rel="noopener noreferrer">React HTML attributes</a>,
13
+ * as well as attributes specific to <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#attributes" target="_blank" rel="noopener noreferrer">HTMLButtonElement</a>
14
+ * &nbsp;and <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#attributes" target="_blank" rel="noopener noreferrer">HTMLAnchorElement</a>,
15
+ * allowing for flexible usage as both a button and a link.
17
16
  */
18
- export const Button = (_a) => {
19
- var { children } = _a, buttonProps = __rest(_a, ["children"]);
20
- return React.createElement(AntButton, Object.assign({}, buttonProps), children);
17
+ export const Button = (buttonProps) => {
18
+ const { getPrefixCls, theme } = React.useContext(ConfigProvider.ConfigContext);
19
+ const { token, hashId } = useToken();
20
+ const buttonToken = token.Button;
21
+ const useStyle = useStyleRegister({
22
+ token: token,
23
+ path: ['Button'],
24
+ // eslint-disable-next-line @typescript-eslint/no-explicit-any
25
+ theme: theme
26
+ }, () => {
27
+ var _a, _b, _c, _d, _e, _f, _g, _h;
28
+ const prefixCls = `:where(.${hashId}).${getPrefixCls()}-btn`;
29
+ // MARK: - Disabled
30
+ const disabledStyles = {
31
+ '&:disabled, &-disabled': {
32
+ backgroundColor: (_a = buttonToken.colorBgContainerDisabled) !== null && _a !== void 0 ? _a : token.colorBgContainerDisabled,
33
+ color: (_b = buttonToken.colorTextDisabled) !== null && _b !== void 0 ? _b : token.colorTextDisabled,
34
+ borderColor: buttonToken.borderColorDisabled,
35
+ cursor: 'not-allowed',
36
+ boxShadow: 'none'
37
+ }
38
+ };
39
+ // END: Disabled
40
+ return {
41
+ // MARK: - All
42
+ [`${prefixCls}`]: {
43
+ ['> *']: {
44
+ verticalAlign: 'middle'
45
+ }
46
+ },
47
+ // END: All
48
+ // MARK: - Default SM
49
+ [`${prefixCls}-default`]: {
50
+ [`&:not(:disabled)${prefixCls}-sm`]: {
51
+ backgroundColor: buttonToken.defaultBgSm,
52
+ color: buttonToken.colorText,
53
+ borderColor: 'transparent',
54
+ '&:hover': {
55
+ backgroundColor: buttonToken.defaultBgSmHover,
56
+ borderColor: 'transparent',
57
+ color: buttonToken.colorTextHover
58
+ },
59
+ [`&${prefixCls}-dangerous`]: {
60
+ backgroundColor: buttonToken.colorErrorBgSM,
61
+ '&:hover:not(:disabled)': {
62
+ color: buttonToken.colorErrorSMHover,
63
+ backgroundColor: buttonToken.colorErrorBgSMHover
64
+ }
65
+ }
66
+ }
67
+ },
68
+ // END: Default SM
69
+ // MARK: - Success
70
+ [`${prefixCls}-success`]: Object.assign({ backgroundColor: (_c = buttonToken.colorSuccessBg) !== null && _c !== void 0 ? _c : token.colorSuccessBg, '&:hover:not(:disabled)': {
71
+ backgroundColor: (_d = buttonToken.colorSuccessHover) !== null && _d !== void 0 ? _d : token.colorSuccessHover
72
+ } }, disabledStyles),
73
+ // END: Success
74
+ // MARK: - Warning
75
+ [`${prefixCls}-warning`]: Object.assign({ backgroundColor: (_e = buttonToken.colorWarningBg) !== null && _e !== void 0 ? _e : token.colorWarningBg, color: (_f = buttonToken.colorWarningText) !== null && _f !== void 0 ? _f : token.colorWarningText, '&:hover:not(:disabled)': {
76
+ backgroundColor: (_g = buttonToken.colorWarningHover) !== null && _g !== void 0 ? _g : token.colorWarningHover,
77
+ borderColor: (_h = buttonToken.colorWarningBorder) !== null && _h !== void 0 ? _h : token.colorWarningBorder
78
+ } }, disabledStyles)
79
+ // END: Warning
80
+ };
81
+ });
82
+ // MARK: - Render
83
+ return useStyle(React.createElement(AntButton, Object.assign({}, buttonProps, { icon: React.createElement(Icon, { icon: buttonProps.icon, size: 12, style: { lineHeight: 0 } }) }), buttonProps.children));
21
84
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@akinon/ui-button",
3
- "version": "0.5.0",
3
+ "version": "0.6.0",
4
4
  "private": false,
5
5
  "description": "A basic button react component.",
6
6
  "type": "module",
@@ -10,16 +10,16 @@
10
10
  "dist"
11
11
  ],
12
12
  "dependencies": {
13
- "antd": "5.17.0"
13
+ "antd": "5.17.0",
14
+ "@akinon/ui-theme": "0.6.0",
15
+ "@akinon/icons": "0.5.0"
14
16
  },
15
17
  "devDependencies": {
16
18
  "clean-package": "2.2.0",
17
19
  "copyfiles": "^2.4.1",
18
20
  "rimraf": "^5.0.5",
19
21
  "typescript": "^5.2.2",
20
- "@akinon/eslint-config": "0.1.0",
21
- "@akinon/vite-config": "0.4.0",
22
- "@akinon/typescript-config": "0.2.0"
22
+ "@akinon/typescript-config": "0.3.0"
23
23
  },
24
24
  "peerDependencies": {
25
25
  "react": ">=18",
@@ -41,10 +41,6 @@
41
41
  "build:commonjs": "tsc --module commonjs --outDir dist/cjs",
42
42
  "copy:files": "copyfiles -u 1 src/**/*.css dist/esm && copyfiles -u 1 src/**/*.css dist/cjs",
43
43
  "clean": "rimraf dist/",
44
- "lint": "eslint *.ts*",
45
- "test": "vitest run",
46
- "test:ui": "vitest --ui",
47
- "test:watch": "vitest watch",
48
44
  "typecheck": "tsc --noEmit"
49
45
  }
50
46
  }
@@ -1,5 +0,0 @@
1
- .akinon-btn-secondary {
2
- color: var(--color-neutral-50);
3
- background-color: var(--color-green-500);
4
- box-shadow: 0 2px 0 rgba(5, 145, 255, 0.1);
5
- }
@@ -1,5 +0,0 @@
1
- .akinon-btn-secondary {
2
- color: var(--color-neutral-50);
3
- background-color: var(--color-green-500);
4
- box-shadow: 0 2px 0 rgba(5, 145, 255, 0.1);
5
- }