@zimyo/ui 1.1.1 → 1.1.2
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/README.md +15 -0
- package/dist/Accordion/index.esm.js +2 -6
- package/dist/Accordion/index.js +2 -6
- package/dist/Select/index.d.ts +22 -0
- package/dist/Select/index.esm.js +63 -0
- package/dist/Select/index.js +68 -0
- package/dist/Switch/index.d.ts +14 -0
- package/dist/Switch/index.esm.js +9 -0
- package/dist/Switch/index.js +11 -0
- package/dist/Tabs/index.d.ts +36 -0
- package/dist/Tabs/index.esm.js +202 -0
- package/dist/Tabs/index.js +207 -0
- package/dist/TextInput/index.d.ts +18 -0
- package/dist/TextInput/index.esm.js +34 -0
- package/dist/TextInput/index.js +36 -0
- package/dist/index.d.ts +185 -0
- package/dist/index.esm.js +253 -0
- package/dist/index.js +261 -0
- package/dist/theme/index.d.ts +91 -0
- package/dist/theme/index.esm.js +137 -0
- package/dist/theme/index.js +142 -0
- package/package.json +29 -7
|
@@ -0,0 +1,137 @@
|
|
|
1
|
+
import { jsxs, jsx } from 'react/jsx-runtime';
|
|
2
|
+
import { createTheme, ThemeProvider } from '@mui/material/styles';
|
|
3
|
+
import { CssBaseline } from '@mui/material';
|
|
4
|
+
|
|
5
|
+
const designTokens = {
|
|
6
|
+
colors: {
|
|
7
|
+
primary: {
|
|
8
|
+
50: '#e3f2fd',
|
|
9
|
+
100: '#bbdefb',
|
|
10
|
+
500: '#2196f3',
|
|
11
|
+
900: '#0d47a1',
|
|
12
|
+
},
|
|
13
|
+
secondary: {
|
|
14
|
+
50: '#fce4ec',
|
|
15
|
+
100: '#f8bbd9',
|
|
16
|
+
500: '#e91e63',
|
|
17
|
+
900: '#880e4f',
|
|
18
|
+
},
|
|
19
|
+
neutral: {
|
|
20
|
+
50: '#fafafa',
|
|
21
|
+
100: '#f5f5f5',
|
|
22
|
+
200: '#eeeeee',
|
|
23
|
+
500: '#9e9e9e',
|
|
24
|
+
900: '#212121',
|
|
25
|
+
},
|
|
26
|
+
},
|
|
27
|
+
spacing: {
|
|
28
|
+
xs: '4px',
|
|
29
|
+
sm: '8px',
|
|
30
|
+
md: '16px',
|
|
31
|
+
lg: '24px',
|
|
32
|
+
xl: '32px',
|
|
33
|
+
},
|
|
34
|
+
radius: {
|
|
35
|
+
xs: "2px",
|
|
36
|
+
sm: '4px',
|
|
37
|
+
md: '8px',
|
|
38
|
+
lg: '12px',
|
|
39
|
+
xl: '16px',
|
|
40
|
+
full: '9999px',
|
|
41
|
+
},
|
|
42
|
+
typography: {
|
|
43
|
+
fontFamily: '"Roboto", "Helvetica", "Arial", sans-serif',
|
|
44
|
+
fontSize: {
|
|
45
|
+
xs: '0.75rem',
|
|
46
|
+
sm: '0.875rem',
|
|
47
|
+
md: '1rem',
|
|
48
|
+
lg: '1.25rem',
|
|
49
|
+
xl: '1.5rem',
|
|
50
|
+
},
|
|
51
|
+
},
|
|
52
|
+
};
|
|
53
|
+
|
|
54
|
+
const createCustomTheme = (config = {}) => {
|
|
55
|
+
const { primaryColor = designTokens.colors.primary[500], secondaryColor = designTokens.colors.secondary[500], } = config;
|
|
56
|
+
return createTheme({
|
|
57
|
+
palette: {
|
|
58
|
+
primary: {
|
|
59
|
+
main: primaryColor,
|
|
60
|
+
},
|
|
61
|
+
secondary: {
|
|
62
|
+
main: secondaryColor,
|
|
63
|
+
},
|
|
64
|
+
},
|
|
65
|
+
typography: {
|
|
66
|
+
fontFamily: designTokens.typography.fontFamily,
|
|
67
|
+
h1: { fontWeight: 600 },
|
|
68
|
+
h2: { fontWeight: 600 },
|
|
69
|
+
h3: { fontWeight: 600 },
|
|
70
|
+
h4: { fontWeight: 600 },
|
|
71
|
+
h5: { fontWeight: 600 },
|
|
72
|
+
h6: { fontWeight: 600 },
|
|
73
|
+
},
|
|
74
|
+
spacing: 8,
|
|
75
|
+
shape: {
|
|
76
|
+
borderRadius: 8,
|
|
77
|
+
},
|
|
78
|
+
radius: designTokens.radius,
|
|
79
|
+
components: {
|
|
80
|
+
MuiButton: {
|
|
81
|
+
styleOverrides: {
|
|
82
|
+
root: {
|
|
83
|
+
textTransform: 'none',
|
|
84
|
+
borderRadius: '4px',
|
|
85
|
+
// fontWeight: 600,
|
|
86
|
+
letterSpacing: '0.5px',
|
|
87
|
+
padding: '8px 16px',
|
|
88
|
+
},
|
|
89
|
+
sizeSmall: {
|
|
90
|
+
padding: '4px 12px',
|
|
91
|
+
fontSize: '0.875rem',
|
|
92
|
+
},
|
|
93
|
+
sizeLarge: {
|
|
94
|
+
padding: '12px 24px',
|
|
95
|
+
fontSize: '1rem',
|
|
96
|
+
},
|
|
97
|
+
},
|
|
98
|
+
defaultProps: {
|
|
99
|
+
disableElevation: true
|
|
100
|
+
}
|
|
101
|
+
},
|
|
102
|
+
MuiCard: {
|
|
103
|
+
styleOverrides: {
|
|
104
|
+
root: {
|
|
105
|
+
borderRadius: '12px',
|
|
106
|
+
boxShadow: '0 2px 8px rgba(0, 0, 0, 0.1)',
|
|
107
|
+
},
|
|
108
|
+
},
|
|
109
|
+
},
|
|
110
|
+
MuiTextField: {
|
|
111
|
+
styleOverrides: {
|
|
112
|
+
root: {
|
|
113
|
+
'& .MuiOutlinedInput-root': {
|
|
114
|
+
borderRadius: '8px',
|
|
115
|
+
},
|
|
116
|
+
},
|
|
117
|
+
},
|
|
118
|
+
},
|
|
119
|
+
},
|
|
120
|
+
});
|
|
121
|
+
};
|
|
122
|
+
// Default theme
|
|
123
|
+
const theme = createCustomTheme();
|
|
124
|
+
|
|
125
|
+
const UILibraryThemeProvider = ({ children, primaryColor, secondaryColor, enableCssBaseline = true, }) => {
|
|
126
|
+
const themeConfig = {};
|
|
127
|
+
if (primaryColor) {
|
|
128
|
+
themeConfig.primaryColor = primaryColor;
|
|
129
|
+
}
|
|
130
|
+
if (secondaryColor) {
|
|
131
|
+
themeConfig.secondaryColor = secondaryColor;
|
|
132
|
+
}
|
|
133
|
+
const theme = createCustomTheme(themeConfig);
|
|
134
|
+
return (jsxs(ThemeProvider, { theme: theme, children: [enableCssBaseline && jsx(CssBaseline, {}), children] }));
|
|
135
|
+
};
|
|
136
|
+
|
|
137
|
+
export { UILibraryThemeProvider, createCustomTheme, designTokens, theme };
|
|
@@ -0,0 +1,142 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
var jsxRuntime = require('react/jsx-runtime');
|
|
4
|
+
var styles = require('@mui/material/styles');
|
|
5
|
+
var material = require('@mui/material');
|
|
6
|
+
|
|
7
|
+
const designTokens = {
|
|
8
|
+
colors: {
|
|
9
|
+
primary: {
|
|
10
|
+
50: '#e3f2fd',
|
|
11
|
+
100: '#bbdefb',
|
|
12
|
+
500: '#2196f3',
|
|
13
|
+
900: '#0d47a1',
|
|
14
|
+
},
|
|
15
|
+
secondary: {
|
|
16
|
+
50: '#fce4ec',
|
|
17
|
+
100: '#f8bbd9',
|
|
18
|
+
500: '#e91e63',
|
|
19
|
+
900: '#880e4f',
|
|
20
|
+
},
|
|
21
|
+
neutral: {
|
|
22
|
+
50: '#fafafa',
|
|
23
|
+
100: '#f5f5f5',
|
|
24
|
+
200: '#eeeeee',
|
|
25
|
+
500: '#9e9e9e',
|
|
26
|
+
900: '#212121',
|
|
27
|
+
},
|
|
28
|
+
},
|
|
29
|
+
spacing: {
|
|
30
|
+
xs: '4px',
|
|
31
|
+
sm: '8px',
|
|
32
|
+
md: '16px',
|
|
33
|
+
lg: '24px',
|
|
34
|
+
xl: '32px',
|
|
35
|
+
},
|
|
36
|
+
radius: {
|
|
37
|
+
xs: "2px",
|
|
38
|
+
sm: '4px',
|
|
39
|
+
md: '8px',
|
|
40
|
+
lg: '12px',
|
|
41
|
+
xl: '16px',
|
|
42
|
+
full: '9999px',
|
|
43
|
+
},
|
|
44
|
+
typography: {
|
|
45
|
+
fontFamily: '"Roboto", "Helvetica", "Arial", sans-serif',
|
|
46
|
+
fontSize: {
|
|
47
|
+
xs: '0.75rem',
|
|
48
|
+
sm: '0.875rem',
|
|
49
|
+
md: '1rem',
|
|
50
|
+
lg: '1.25rem',
|
|
51
|
+
xl: '1.5rem',
|
|
52
|
+
},
|
|
53
|
+
},
|
|
54
|
+
};
|
|
55
|
+
|
|
56
|
+
const createCustomTheme = (config = {}) => {
|
|
57
|
+
const { primaryColor = designTokens.colors.primary[500], secondaryColor = designTokens.colors.secondary[500], } = config;
|
|
58
|
+
return styles.createTheme({
|
|
59
|
+
palette: {
|
|
60
|
+
primary: {
|
|
61
|
+
main: primaryColor,
|
|
62
|
+
},
|
|
63
|
+
secondary: {
|
|
64
|
+
main: secondaryColor,
|
|
65
|
+
},
|
|
66
|
+
},
|
|
67
|
+
typography: {
|
|
68
|
+
fontFamily: designTokens.typography.fontFamily,
|
|
69
|
+
h1: { fontWeight: 600 },
|
|
70
|
+
h2: { fontWeight: 600 },
|
|
71
|
+
h3: { fontWeight: 600 },
|
|
72
|
+
h4: { fontWeight: 600 },
|
|
73
|
+
h5: { fontWeight: 600 },
|
|
74
|
+
h6: { fontWeight: 600 },
|
|
75
|
+
},
|
|
76
|
+
spacing: 8,
|
|
77
|
+
shape: {
|
|
78
|
+
borderRadius: 8,
|
|
79
|
+
},
|
|
80
|
+
radius: designTokens.radius,
|
|
81
|
+
components: {
|
|
82
|
+
MuiButton: {
|
|
83
|
+
styleOverrides: {
|
|
84
|
+
root: {
|
|
85
|
+
textTransform: 'none',
|
|
86
|
+
borderRadius: '4px',
|
|
87
|
+
// fontWeight: 600,
|
|
88
|
+
letterSpacing: '0.5px',
|
|
89
|
+
padding: '8px 16px',
|
|
90
|
+
},
|
|
91
|
+
sizeSmall: {
|
|
92
|
+
padding: '4px 12px',
|
|
93
|
+
fontSize: '0.875rem',
|
|
94
|
+
},
|
|
95
|
+
sizeLarge: {
|
|
96
|
+
padding: '12px 24px',
|
|
97
|
+
fontSize: '1rem',
|
|
98
|
+
},
|
|
99
|
+
},
|
|
100
|
+
defaultProps: {
|
|
101
|
+
disableElevation: true
|
|
102
|
+
}
|
|
103
|
+
},
|
|
104
|
+
MuiCard: {
|
|
105
|
+
styleOverrides: {
|
|
106
|
+
root: {
|
|
107
|
+
borderRadius: '12px',
|
|
108
|
+
boxShadow: '0 2px 8px rgba(0, 0, 0, 0.1)',
|
|
109
|
+
},
|
|
110
|
+
},
|
|
111
|
+
},
|
|
112
|
+
MuiTextField: {
|
|
113
|
+
styleOverrides: {
|
|
114
|
+
root: {
|
|
115
|
+
'& .MuiOutlinedInput-root': {
|
|
116
|
+
borderRadius: '8px',
|
|
117
|
+
},
|
|
118
|
+
},
|
|
119
|
+
},
|
|
120
|
+
},
|
|
121
|
+
},
|
|
122
|
+
});
|
|
123
|
+
};
|
|
124
|
+
// Default theme
|
|
125
|
+
const theme = createCustomTheme();
|
|
126
|
+
|
|
127
|
+
const UILibraryThemeProvider = ({ children, primaryColor, secondaryColor, enableCssBaseline = true, }) => {
|
|
128
|
+
const themeConfig = {};
|
|
129
|
+
if (primaryColor) {
|
|
130
|
+
themeConfig.primaryColor = primaryColor;
|
|
131
|
+
}
|
|
132
|
+
if (secondaryColor) {
|
|
133
|
+
themeConfig.secondaryColor = secondaryColor;
|
|
134
|
+
}
|
|
135
|
+
const theme = createCustomTheme(themeConfig);
|
|
136
|
+
return (jsxRuntime.jsxs(styles.ThemeProvider, { theme: theme, children: [enableCssBaseline && jsxRuntime.jsx(material.CssBaseline, {}), children] }));
|
|
137
|
+
};
|
|
138
|
+
|
|
139
|
+
exports.UILibraryThemeProvider = UILibraryThemeProvider;
|
|
140
|
+
exports.createCustomTheme = createCustomTheme;
|
|
141
|
+
exports.designTokens = designTokens;
|
|
142
|
+
exports.theme = theme;
|
package/package.json
CHANGED
|
@@ -1,10 +1,17 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@zimyo/ui",
|
|
3
|
-
"version": "1.1.
|
|
4
|
-
"description": "
|
|
3
|
+
"version": "1.1.2",
|
|
4
|
+
"description": "Zimyo UI library built on MUI Material",
|
|
5
5
|
"main": "dist/index.js",
|
|
6
6
|
"module": "dist/index.esm.js",
|
|
7
7
|
"types": "dist/index.d.ts",
|
|
8
|
+
"author": "Zimyo Team <developer@zimyo.com>",
|
|
9
|
+
"license": "MIT",
|
|
10
|
+
"homepage": "https://github.com/zimyoTech/zimyo_core#readme",
|
|
11
|
+
"repository": {
|
|
12
|
+
"type": "git",
|
|
13
|
+
"url": "https://github.com/zimyoTech/zimyo_core"
|
|
14
|
+
},
|
|
8
15
|
"exports": {
|
|
9
16
|
".": {
|
|
10
17
|
"import": "./dist/index.esm.js",
|
|
@@ -61,7 +68,7 @@
|
|
|
61
68
|
"dist"
|
|
62
69
|
],
|
|
63
70
|
"scripts": {
|
|
64
|
-
"build": "rollup -c --bundleConfigAsCjs",
|
|
71
|
+
"build": "cross-env NODE_OPTIONS=--max-old-space-size=4096 rollup -c --bundleConfigAsCjs",
|
|
65
72
|
"build:watch": "rollup -c -w",
|
|
66
73
|
"storybook": "storybook dev -p 6006",
|
|
67
74
|
"build-storybook": "storybook build",
|
|
@@ -75,6 +82,7 @@
|
|
|
75
82
|
"peerDependencies": {
|
|
76
83
|
"@emotion/react": ">=11.0.0",
|
|
77
84
|
"@emotion/styled": ">=11.0.0",
|
|
85
|
+
"@mui/icons-material": "^7.1.2",
|
|
78
86
|
"@mui/material": ">=5.0.0",
|
|
79
87
|
"react": ">=17.0.0",
|
|
80
88
|
"react-dom": ">=17.0.0"
|
|
@@ -91,6 +99,7 @@
|
|
|
91
99
|
"@types/jest": "^30.0.0",
|
|
92
100
|
"@types/node": "^20.9.0",
|
|
93
101
|
"@types/react": "^18.0.0",
|
|
102
|
+
"cross-env": "^7.0.3",
|
|
94
103
|
"eslint": "^8.0.0",
|
|
95
104
|
"eslint-plugin-storybook": "^9.0.14",
|
|
96
105
|
"jest": "^29.7.0",
|
|
@@ -106,8 +115,7 @@
|
|
|
106
115
|
"@emotion/react": ">=11.0.0",
|
|
107
116
|
"@emotion/styled": ">=11.0.0",
|
|
108
117
|
"@mui/icons-material": "^7.1.2",
|
|
109
|
-
"@mui/material": ">=5.0.0"
|
|
110
|
-
"@mui/styles": "^6.4.8"
|
|
118
|
+
"@mui/material": ">=5.0.0"
|
|
111
119
|
},
|
|
112
120
|
"eslintConfig": {
|
|
113
121
|
"extends": [
|
|
@@ -116,5 +124,19 @@
|
|
|
116
124
|
},
|
|
117
125
|
"publishConfig": {
|
|
118
126
|
"access": "public"
|
|
119
|
-
}
|
|
120
|
-
|
|
127
|
+
},
|
|
128
|
+
"engines": {
|
|
129
|
+
"node": ">=16.0.0",
|
|
130
|
+
"npm": ">=7.0.0"
|
|
131
|
+
},
|
|
132
|
+
"keywords": [
|
|
133
|
+
"react",
|
|
134
|
+
"mui",
|
|
135
|
+
"material-ui",
|
|
136
|
+
"ui-library",
|
|
137
|
+
"storybook",
|
|
138
|
+
"typescript",
|
|
139
|
+
"component-library",
|
|
140
|
+
"design-system"
|
|
141
|
+
]
|
|
142
|
+
}
|