@digitalc/dxp-ui 0.0.2 → 0.0.3
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.
- package/es/components/index.js.map +1 -1
- package/es/index.js.map +1 -1
- package/es/utils/themeContext.d.ts +11 -0
- package/es/utils/themeContext.js +40 -0
- package/es/utils/themeContext.js.map +1 -0
- package/es/utils/tokenHelper.js +3 -0
- package/es/utils/tokenHelper.js.map +1 -1
- package/package.json +5 -2
- package/umd/dxp-ui.min.css.map +1 -1
- package/umd/dxp-ui.min.js +1 -1
- package/umd/dxp-ui.min.js.map +1 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["default","Button","Text"],"sources":["../../src/components/index.tsx"],"sourcesContent":["\"use client\";\n\nexport { default as Button } from './Button';\nexport type { ButtonProps } from './Button';\nexport { default as Text } from './Text';\nexport type { TextProps } from './Text';"],"mappings":"AAAA,YAAY;;AAEZ,SAASA,OAAO,IAAIC,MAAM;
|
|
1
|
+
{"version":3,"names":["default","Button","Text"],"sources":["../../src/components/index.tsx"],"sourcesContent":["\"use client\";\n\nexport { default as Button } from './Button';\nexport type { ButtonProps } from './Button';\n\nexport { default as Text } from './Text';\nexport type { TextProps } from './Text';"],"mappings":"AAAA,YAAY;;AAEZ,SAASA,OAAO,IAAIC,MAAM;AAG1B,SAASD,OAAO,IAAIE,IAAI"}
|
package/es/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":[],"sources":["../src/index.
|
|
1
|
+
{"version":3,"names":[],"sources":["../src/index.tsx"],"sourcesContent":["import './style/themes/index.css';\n\nexport * from './components';\n// export * from './utils/themeContext';"],"mappings":"AAAA;AAEA;AACA"}
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
export type ThemeStyle = 'default' | 'colorful';
|
|
3
|
+
export interface ThemeContextType {
|
|
4
|
+
style: ThemeStyle;
|
|
5
|
+
setStyle: (style: ThemeStyle) => void;
|
|
6
|
+
}
|
|
7
|
+
export declare const ThemeProvider: React.FC<{
|
|
8
|
+
children: React.ReactNode;
|
|
9
|
+
defaultStyle?: ThemeStyle;
|
|
10
|
+
}>;
|
|
11
|
+
export declare const useTheme: () => ThemeContextType;
|
|
@@ -0,0 +1,40 @@
|
|
|
1
|
+
import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
|
|
2
|
+
import React, { createContext, useContext, useEffect } from 'react';
|
|
3
|
+
|
|
4
|
+
// 主题类型定义
|
|
5
|
+
|
|
6
|
+
// 创建 Context
|
|
7
|
+
var ThemeContext = /*#__PURE__*/createContext({
|
|
8
|
+
style: 'default',
|
|
9
|
+
setStyle: function setStyle() {}
|
|
10
|
+
});
|
|
11
|
+
export var ThemeProvider = function ThemeProvider(_ref) {
|
|
12
|
+
var children = _ref.children,
|
|
13
|
+
_ref$defaultStyle = _ref.defaultStyle,
|
|
14
|
+
defaultStyle = _ref$defaultStyle === void 0 ? 'default' : _ref$defaultStyle;
|
|
15
|
+
var _React$useState = React.useState(defaultStyle),
|
|
16
|
+
_React$useState2 = _slicedToArray(_React$useState, 2),
|
|
17
|
+
style = _React$useState2[0],
|
|
18
|
+
setStyle = _React$useState2[1];
|
|
19
|
+
|
|
20
|
+
// 应用主题样式
|
|
21
|
+
useEffect(function () {
|
|
22
|
+
document.documentElement.setAttribute('data-theme-style', style);
|
|
23
|
+
}, [style]);
|
|
24
|
+
return /*#__PURE__*/React.createElement(ThemeContext.Provider, {
|
|
25
|
+
value: {
|
|
26
|
+
style: style,
|
|
27
|
+
setStyle: setStyle
|
|
28
|
+
}
|
|
29
|
+
}, children);
|
|
30
|
+
};
|
|
31
|
+
|
|
32
|
+
// Hook for using theme
|
|
33
|
+
export var useTheme = function useTheme() {
|
|
34
|
+
var context = useContext(ThemeContext);
|
|
35
|
+
if (!context) {
|
|
36
|
+
throw new Error('useTheme must be used within a ThemeProvider');
|
|
37
|
+
}
|
|
38
|
+
return context;
|
|
39
|
+
};
|
|
40
|
+
//# sourceMappingURL=themeContext.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":["React","createContext","useContext","useEffect","ThemeContext","style","setStyle","ThemeProvider","_ref","children","_ref$defaultStyle","defaultStyle","_React$useState","useState","_React$useState2","_slicedToArray","document","documentElement","setAttribute","createElement","Provider","value","useTheme","context","Error"],"sources":["../../src/utils/themeContext.tsx"],"sourcesContent":["import React, { createContext, useContext, useEffect } from 'react';\n\n// 主题类型定义\nexport type ThemeStyle = 'default' | 'colorful';\n\nexport interface ThemeContextType {\n style: ThemeStyle;\n setStyle: (style: ThemeStyle) => void;\n}\n\n// 创建 Context\nconst ThemeContext = createContext<ThemeContextType>({\n style: 'default',\n setStyle: () => {},\n});\n\nexport const ThemeProvider: React.FC<{\n children: React.ReactNode;\n defaultStyle?: ThemeStyle;\n}> = ({ children, defaultStyle = 'default' }) => {\n const [style, setStyle] = React.useState<ThemeStyle>(defaultStyle);\n\n // 应用主题样式\n useEffect(() => {\n document.documentElement.setAttribute('data-theme-style', style);\n }, [style]);\n\n return <ThemeContext.Provider value={{ style, setStyle }}>{children}</ThemeContext.Provider>;\n};\n\n// Hook for using theme\nexport const useTheme = () => {\n const context = useContext(ThemeContext);\n if (!context) {\n throw new Error('useTheme must be used within a ThemeProvider');\n }\n return context;\n};\n"],"mappings":";AAAA,OAAOA,KAAK,IAAIC,aAAa,EAAEC,UAAU,EAAEC,SAAS,QAAQ,OAAO;;AAEnE;;AAQA;AACA,IAAMC,YAAY,gBAAGH,aAAa,CAAmB;EACnDI,KAAK,EAAE,SAAS;EAChBC,QAAQ,EAAE,SAAAA,SAAA,EAAM,CAAC;AACnB,CAAC,CAAC;AAEF,OAAO,IAAMC,aAGX,GAAG,SAHQA,aAGXA,CAAAC,IAAA,EAA+C;EAAA,IAAzCC,QAAQ,GAAAD,IAAA,CAARC,QAAQ;IAAAC,iBAAA,GAAAF,IAAA,CAAEG,YAAY;IAAZA,YAAY,GAAAD,iBAAA,cAAG,SAAS,GAAAA,iBAAA;EACxC,IAAAE,eAAA,GAA0BZ,KAAK,CAACa,QAAQ,CAAaF,YAAY,CAAC;IAAAG,gBAAA,GAAAC,cAAA,CAAAH,eAAA;IAA3DP,KAAK,GAAAS,gBAAA;IAAER,QAAQ,GAAAQ,gBAAA;;EAEtB;EACAX,SAAS,CAAC,YAAM;IACda,QAAQ,CAACC,eAAe,CAACC,YAAY,CAAC,kBAAkB,EAAEb,KAAK,CAAC;EAClE,CAAC,EAAE,CAACA,KAAK,CAAC,CAAC;EAEX,oBAAOL,KAAA,CAAAmB,aAAA,CAACf,YAAY,CAACgB,QAAQ;IAACC,KAAK,EAAE;MAAEhB,KAAK,EAALA,KAAK;MAAEC,QAAQ,EAARA;IAAS;EAAE,GAAEG,QAAgC,CAAC;AAC9F,CAAC;;AAED;AACA,OAAO,IAAMa,QAAQ,GAAG,SAAXA,QAAQA,CAAA,EAAS;EAC5B,IAAMC,OAAO,GAAGrB,UAAU,CAACE,YAAY,CAAC;EACxC,IAAI,CAACmB,OAAO,EAAE;IACZ,MAAM,IAAIC,KAAK,CAAC,8CAA8C,CAAC;EACjE;EACA,OAAOD,OAAO;AAChB,CAAC"}
|
package/es/utils/tokenHelper.js
CHANGED
|
@@ -2,4 +2,7 @@ import TokenManager from "./tokenManager";
|
|
|
2
2
|
export var getToken = function getToken(tokenName) {
|
|
3
3
|
return TokenManager.tokenKey(tokenName);
|
|
4
4
|
};
|
|
5
|
+
// export const getDesignToken = (tokenName: string) => {
|
|
6
|
+
// return TokenManager.designTokenKey(tokenName);
|
|
7
|
+
// };
|
|
5
8
|
//# sourceMappingURL=tokenHelper.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["TokenManager","getToken","tokenName","tokenKey"],"sources":["../../src/utils/tokenHelper.ts"],"sourcesContent":["import TokenManager from '@/utils/tokenManager';\n\nexport const getToken = (tokenName: string) => {\n return TokenManager.tokenKey(tokenName);\n}
|
|
1
|
+
{"version":3,"names":["TokenManager","getToken","tokenName","tokenKey"],"sources":["../../src/utils/tokenHelper.ts"],"sourcesContent":["import TokenManager from '@/utils/tokenManager';\n\nexport const getToken = (tokenName: string) => {\n return TokenManager.tokenKey(tokenName);\n};\n// export const getDesignToken = (tokenName: string) => {\n// return TokenManager.designTokenKey(tokenName);\n// };\n"],"mappings":"AAAA,OAAOA,YAAY;AAEnB,OAAO,IAAMC,QAAQ,GAAG,SAAXA,QAAQA,CAAIC,SAAiB,EAAK;EAC7C,OAAOF,YAAY,CAACG,QAAQ,CAACD,SAAS,CAAC;AACzC,CAAC;AACD;AACA;AACA"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@digitalc/dxp-ui",
|
|
3
|
-
"version": "0.0.
|
|
3
|
+
"version": "0.0.3",
|
|
4
4
|
"description": "A UI library of Digitalc Design React Component",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"react",
|
|
@@ -96,17 +96,20 @@
|
|
|
96
96
|
"prettier-plugin-packagejson": "^2.2.18",
|
|
97
97
|
"rc-test": "^7.1.2",
|
|
98
98
|
"react": "^18.3.1",
|
|
99
|
+
"react-dom": "^18.3.1",
|
|
99
100
|
"antd": "^5.24.5",
|
|
100
101
|
"classnames": "^2.3.2",
|
|
101
102
|
"lodash": "^4.17.21",
|
|
102
103
|
"prop-types": "^15.8.1",
|
|
103
104
|
"zod": "^3.24.1",
|
|
104
105
|
"@ant-design/icons": "^6.0.0",
|
|
105
|
-
"react-dom": "^18.3.1",
|
|
106
106
|
"stylelint": "^16.11.0",
|
|
107
107
|
"typescript": "^5.0.0"
|
|
108
108
|
},
|
|
109
109
|
"peerDependencies": {
|
|
110
|
+
"antd": "^5.24.5",
|
|
111
|
+
"react": "^18.2.0",
|
|
112
|
+
"react-dom": "^18.2.0"
|
|
110
113
|
},
|
|
111
114
|
"engines": {
|
|
112
115
|
"node": ">=8.x"
|
package/umd/dxp-ui.min.css.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"dxp-ui.min.css","mappings":"AACA,MAEE,4BAEF,CCJA,iCAEC,4BACD,CCGA,2BAEE,cAAe,CACf,gBAwBF,CApBA,oDANE,cAGA,wBAAyB,CACzB,eA6BF,CA3BA,yBAEE,cAAe,CACf,gBAwBF,CApBA,4BAEE,cAAe,CACf,gBAwBF,CApBA,kDANE,cAGA,wBAAyB,CACzB,eA6BF,CA3BA,sBAEE,cAAe,CACf,gBAwBF,CApBA,wBACE,cAGA,uBAAwB,CAFxB,cAAe,CAGf,eAAiB,CAFjB,gBAwBF,CApBA,2BACE,aA0BF,CApBA,4DAHE,0BAA2B,CAF3B,cAAe,CAGf,eAAmB,CAFnB,gBAgCF,CA5BA,iCACE,cAKA,4BAsBF,CApBA,gCACE,aA0BF,CApBA,sEALE,0BAA2B,CAE3B,cAAe,CADf,eAAmB,CAEnB,gBA8BF,CA5BA,sCACE,cAKA,4BAsBF,CApBA,iCACE,cACA,2BAA4B,CAE5B,cAAe,CADf,eAAiB,CAEjB,gBAsBF,CApBA,6BACE,aA0BF,CApBA,0DALE,uBAAwB,CAExB,cAAe,CADf,eAAiB,CAEjB,gBA8BF,CApBA,qDAPE,cAKA,yBA8BF,CA5BA,wBAEE,uBAAwB,CAExB,cAAe,CADf,eAAiB,CAEjB,gBAuBF,CApBA,0BACE,cACA,0BAA2B,CAE3B,cAAe,CADf,eAAmB,CAEnB,gBAsBF,CApBA,8BACE,cACA,uBAAwB,CAExB,cAAe,CADf,eAAiB,CAEjB,gBAsBF,CCvIA,WACI,wBAA2B,CAG3B,iBAAkB,CADlB,eAAmB,CADnB,4DCGJ,CDEE,WACE,uBAA0B,CAG1B,iBAAkB,CADlB,eAAmB,CADnB,2DCEJ,CDGE,WACE,0BAA6B,CAG7B,iBAAkB,CADlB,eAAmB,CADnB,8DCCJ,CDIE,WACE,2BAA8B,CAG9B,iBAAkB,CADlB,eAAmB,CADnB,+DCAJ,CAZE,wDACE,UAAY,CACZ,iEAiBJ,CAnBE,kEAII,mBAAqB,CACrB,uBAAwB,CACxB,iEAkBN,CAbE,4DACE,UAAY,CACZ,iEAeJ,CAjBE,sEAII,mBAAqB,CACrB,uBAAwB,CACxB,iEAgBN","sources":["webpack://dxp
|
|
1
|
+
{"version":3,"file":"dxp-ui.min.css","mappings":"AACA,MAEE,4BAEF,CCJA,iCAEC,4BACD,CCGA,2BAEE,cAAe,CACf,gBAwBF,CApBA,oDANE,cAGA,wBAAyB,CACzB,eA6BF,CA3BA,yBAEE,cAAe,CACf,gBAwBF,CApBA,4BAEE,cAAe,CACf,gBAwBF,CApBA,kDANE,cAGA,wBAAyB,CACzB,eA6BF,CA3BA,sBAEE,cAAe,CACf,gBAwBF,CApBA,wBACE,cAGA,uBAAwB,CAFxB,cAAe,CAGf,eAAiB,CAFjB,gBAwBF,CApBA,2BACE,aA0BF,CApBA,4DAHE,0BAA2B,CAF3B,cAAe,CAGf,eAAmB,CAFnB,gBAgCF,CA5BA,iCACE,cAKA,4BAsBF,CApBA,gCACE,aA0BF,CApBA,sEALE,0BAA2B,CAE3B,cAAe,CADf,eAAmB,CAEnB,gBA8BF,CA5BA,sCACE,cAKA,4BAsBF,CApBA,iCACE,cACA,2BAA4B,CAE5B,cAAe,CADf,eAAiB,CAEjB,gBAsBF,CApBA,6BACE,aA0BF,CApBA,0DALE,uBAAwB,CAExB,cAAe,CADf,eAAiB,CAEjB,gBA8BF,CApBA,qDAPE,cAKA,yBA8BF,CA5BA,wBAEE,uBAAwB,CAExB,cAAe,CADf,eAAiB,CAEjB,gBAuBF,CApBA,0BACE,cACA,0BAA2B,CAE3B,cAAe,CADf,eAAmB,CAEnB,gBAsBF,CApBA,8BACE,cACA,uBAAwB,CAExB,cAAe,CADf,eAAiB,CAEjB,gBAsBF,CCvIA,WACI,wBAA2B,CAG3B,iBAAkB,CADlB,eAAmB,CADnB,4DCGJ,CDEE,WACE,uBAA0B,CAG1B,iBAAkB,CADlB,eAAmB,CADnB,2DCEJ,CDGE,WACE,0BAA6B,CAG7B,iBAAkB,CADlB,eAAmB,CADnB,8DCCJ,CDIE,WACE,2BAA8B,CAG9B,iBAAkB,CADlB,eAAmB,CADnB,+DCAJ,CAZE,wDACE,UAAY,CACZ,iEAiBJ,CAnBE,kEAII,mBAAqB,CACrB,uBAAwB,CACxB,iEAkBN,CAbE,4DACE,UAAY,CACZ,iEAeJ,CAjBE,sEAII,mBAAqB,CACrB,uBAAwB,CACxB,iEAgBN","sources":["webpack://dxp/./src/style/themes/base-vars.css","webpack://dxp/./src/style/themes/colorful.css","webpack://dxp/./src/components/Text/style/text.less","webpack://dxp/./src/style/variables.less","webpack://dxp/./src/components/Button/style/button.less"],"sourcesContent":["/* UI token Design 变量固定值 */\n:root {\n /* 颜色变量 */\n --base-color-primary: #d80202;\n\n}","/* 多彩主题 */\n:root[data-theme-style='colorful'] {\n /* 颜色变量 */\n --base-color-primary: #26e704;\n}","\n@import './variables.less';\n// 定义默认颜色常量\n@DEFAULT_COLOR: inherit;\n@STRIKETHROUGH_COLOR: #757575;\n@LINK_COLOR: #4E28E8;\n\n.dxp-text-size-bannerTitle {\n color: @DEFAULT_COLOR;\n font-size: 40px;\n line-height: 48px;\n font-family: Poppins-Blod;\n font-weight: bold;\n}\n.dxp-text-size-pageTitle {\n color: @DEFAULT_COLOR;\n font-size: 32px;\n line-height: 40px;\n font-family: Poppins-Blod;\n font-weight: bold;\n}\n.dxp-text-size-sectionTitle {\n color: @DEFAULT_COLOR;\n font-size: 24px;\n line-height: 30px;\n font-family: Poppins-Blod;\n font-weight: bold;\n}\n.dxp-text-size-header {\n color: @DEFAULT_COLOR;\n font-size: 20px;\n line-height: 25px;\n font-family: Poppins-Blod;\n font-weight: bold;\n}\n.dxp-text-size-bodyBold {\n color: @DEFAULT_COLOR;\n font-size: 16px;\n line-height: 24px;\n font-family: Roboto-Bold;\n font-weight: bold;\n}\n.dxp-text-size-bodyRegular {\n color: @DEFAULT_COLOR;\n font-size: 16px;\n line-height: 24px;\n font-family: Roboto-Regular;\n font-weight: normal;\n}\n.dxp-text-size-bodyStrikethrough {\n color: @STRIKETHROUGH_COLOR;\n font-size: 16px;\n line-height: 24px;\n font-family: Roboto-Regular;\n font-weight: normal;\n text-decoration: line-through;\n}\n.dxp-text-size-smallbodyRegular {\n color: @DEFAULT_COLOR;\n font-family: Roboto-Regular;\n font-weight: normal;\n font-size: 12px;\n line-height: 18px;\n}\n.dxp-text-size-smallBodyStrikethrough {\n color: @STRIKETHROUGH_COLOR;\n font-family: Roboto-Regular;\n font-weight: normal;\n font-size: 12px;\n line-height: 18px;\n text-decoration: line-through;\n}\n.dxp-text-size-smallBodySemiBold {\n color: @DEFAULT_COLOR;\n font-family: Roboto-SemiBold;\n font-weight: bold;\n font-size: 12px;\n line-height: 18px;\n}\n.dxp-text-size-smallBodyBold {\n color: @DEFAULT_COLOR;\n font-family: Roboto-Bold;\n font-weight: bold;\n font-size: 12px;\n line-height: 18px;\n}\n.dxp-text-size-smallBodyLink {\n color: @LINK_COLOR;\n font-family: Roboto-Bold;\n font-weight: bold;\n font-size: 12px;\n line-height: 18px;\n text-decoration: underline;\n}\n.dxp-text-size-textLink {\n color: @LINK_COLOR;\n font-family: Roboto-Bold;\n font-weight: bold;\n font-size: 16px;\n line-height: 24px;\n text-decoration: underline;\n}\n.dxp-text-size-mediumBody {\n color: @DEFAULT_COLOR;\n font-family: Roboto-Regular;\n font-weight: normal;\n font-size: 14px;\n line-height: 22px;\n}\n.dxp-text-size-mediumBodyBold {\n color: @DEFAULT_COLOR;\n font-family: Roboto-Bold;\n font-weight: bold;\n font-size: 14px;\n line-height: 22px;\n}","@import './themes/index.css';\n@font-face {\n font-family: 'Poppins-Blod';\n src: url('../fonts/Poppins/Poppins-Bold.ttf') format('truetype');\n font-weight: normal;\n font-style: normal;\n }\n \n @font-face {\n font-family: 'Roboto-Bold';\n src: url('../fonts/Roboto/Roboto-Bold.ttf') format('truetype');\n font-weight: normal;\n font-style: normal;\n }\n \n @font-face {\n font-family: 'Roboto-Regular';\n src: url('../fonts/Roboto/Roboto-Regular.ttf') format('truetype');\n font-weight: normal;\n font-style: normal;\n }\n \n @font-face {\n font-family: 'Roboto-SemiBold';\n src: url('../fonts/Roboto/Roboto-SemiBold.ttf') format('truetype');\n font-weight: normal;\n font-style: normal;\n }\n\n// 项目前缀\n@prefix: dxp;\n/*\n这种是另一方 定制 antd 的 style 的方式； 现在使用了designTokens.ts 注入token的方式。\n*/","@import './variables.less';\n\n// 基础按钮样式\n@components: button;\n\n// 使用字符串拼接\n.@{prefix}-@{components} {\n\n // 按钮类型\n // &-primary {\n // background-color: @btn-primary-bg-default;\n // }\n &:not(:disabled):not(.ant-btn-disabled):hover {\n opacity: 0.8;\n transition: opacity 0.3s ease, transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);\n .@{prefix}-text {\n transform: scale(0.9);\n transform-origin: center;\n transition: opacity 0.3s ease, transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);\n\n }\n }\n\n &:not(:disabled):not(.dxp-button-disabled):active {\n opacity: 0.5;\n transition: opacity 0.3s ease, transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);\n .@{prefix}-text {\n transform: scale(0.9);\n transform-origin: center;\n transition: opacity 0.3s ease, transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);\n\n }\n }\n}"],"names":[],"sourceRoot":""}
|