@zimyo/ui 1.1.0 → 1.1.2

package/dist/theme/index.esm.js

@@ -0,0 +1,137 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { createTheme, ThemeProvider } from '@mui/material/styles';
+import { CssBaseline } from '@mui/material';
+
+const designTokens = {
+    colors: {
+        primary: {
+            50: '#e3f2fd',
+            100: '#bbdefb',
+            500: '#2196f3',
+            900: '#0d47a1',
+        },
+        secondary: {
+            50: '#fce4ec',
+            100: '#f8bbd9',
+            500: '#e91e63',
+            900: '#880e4f',
+        },
+        neutral: {
+            50: '#fafafa',
+            100: '#f5f5f5',
+            200: '#eeeeee',
+            500: '#9e9e9e',
+            900: '#212121',
+        },
+    },
+    spacing: {
+        xs: '4px',
+        sm: '8px',
+        md: '16px',
+        lg: '24px',
+        xl: '32px',
+    },
+    radius: {
+        xs: "2px",
+        sm: '4px',
+        md: '8px',
+        lg: '12px',
+        xl: '16px',
+        full: '9999px',
+    },
+    typography: {
+        fontFamily: '"Roboto", "Helvetica", "Arial", sans-serif',
+        fontSize: {
+            xs: '0.75rem',
+            sm: '0.875rem',
+            md: '1rem',
+            lg: '1.25rem',
+            xl: '1.5rem',
+        },
+    },
+};
+
+const createCustomTheme = (config = {}) => {
+    const { primaryColor = designTokens.colors.primary[500], secondaryColor = designTokens.colors.secondary[500], } = config;
+    return createTheme({
+        palette: {
+            primary: {
+                main: primaryColor,
+            },
+            secondary: {
+                main: secondaryColor,
+            },
+        },
+        typography: {
+            fontFamily: designTokens.typography.fontFamily,
+            h1: { fontWeight: 600 },
+            h2: { fontWeight: 600 },
+            h3: { fontWeight: 600 },
+            h4: { fontWeight: 600 },
+            h5: { fontWeight: 600 },
+            h6: { fontWeight: 600 },
+        },
+        spacing: 8,
+        shape: {
+            borderRadius: 8,
+        },
+        radius: designTokens.radius,
+        components: {
+            MuiButton: {
+                styleOverrides: {
+                    root: {
+                        textTransform: 'none',
+                        borderRadius: '4px',
+                        // fontWeight: 600,
+                        letterSpacing: '0.5px',
+                        padding: '8px 16px',
+                    },
+                    sizeSmall: {
+                        padding: '4px 12px',
+                        fontSize: '0.875rem',
+                    },
+                    sizeLarge: {
+                        padding: '12px 24px',
+                        fontSize: '1rem',
+                    },
+                },
+                defaultProps: {
+                    disableElevation: true
+                }
+            },
+            MuiCard: {
+                styleOverrides: {
+                    root: {
+                        borderRadius: '12px',
+                        boxShadow: '0 2px 8px rgba(0, 0, 0, 0.1)',
+                    },
+                },
+            },
+            MuiTextField: {
+                styleOverrides: {
+                    root: {
+                        '& .MuiOutlinedInput-root': {
+                            borderRadius: '8px',
+                        },
+                    },
+                },
+            },
+        },
+    });
+};
+// Default theme
+const theme = createCustomTheme();
+
+const UILibraryThemeProvider = ({ children, primaryColor, secondaryColor, enableCssBaseline = true, }) => {
+    const themeConfig = {};
+    if (primaryColor) {
+        themeConfig.primaryColor = primaryColor;
+    }
+    if (secondaryColor) {
+        themeConfig.secondaryColor = secondaryColor;
+    }
+    const theme = createCustomTheme(themeConfig);
+    return (jsxs(ThemeProvider, { theme: theme, children: [enableCssBaseline && jsx(CssBaseline, {}), children] }));
+};
+
+export { UILibraryThemeProvider, createCustomTheme, designTokens, theme };

package/dist/theme/index.js

@@ -0,0 +1,142 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var styles = require('@mui/material/styles');
+var material = require('@mui/material');
+
+const designTokens = {
+    colors: {
+        primary: {
+            50: '#e3f2fd',
+            100: '#bbdefb',
+            500: '#2196f3',
+            900: '#0d47a1',
+        },
+        secondary: {
+            50: '#fce4ec',
+            100: '#f8bbd9',
+            500: '#e91e63',
+            900: '#880e4f',
+        },
+        neutral: {
+            50: '#fafafa',
+            100: '#f5f5f5',
+            200: '#eeeeee',
+            500: '#9e9e9e',
+            900: '#212121',
+        },
+    },
+    spacing: {
+        xs: '4px',
+        sm: '8px',
+        md: '16px',
+        lg: '24px',
+        xl: '32px',
+    },
+    radius: {
+        xs: "2px",
+        sm: '4px',
+        md: '8px',
+        lg: '12px',
+        xl: '16px',
+        full: '9999px',
+    },
+    typography: {
+        fontFamily: '"Roboto", "Helvetica", "Arial", sans-serif',
+        fontSize: {
+            xs: '0.75rem',
+            sm: '0.875rem',
+            md: '1rem',
+            lg: '1.25rem',
+            xl: '1.5rem',
+        },
+    },
+};
+
+const createCustomTheme = (config = {}) => {
+    const { primaryColor = designTokens.colors.primary[500], secondaryColor = designTokens.colors.secondary[500], } = config;
+    return styles.createTheme({
+        palette: {
+            primary: {
+                main: primaryColor,
+            },
+            secondary: {
+                main: secondaryColor,
+            },
+        },
+        typography: {
+            fontFamily: designTokens.typography.fontFamily,
+            h1: { fontWeight: 600 },
+            h2: { fontWeight: 600 },
+            h3: { fontWeight: 600 },
+            h4: { fontWeight: 600 },
+            h5: { fontWeight: 600 },
+            h6: { fontWeight: 600 },
+        },
+        spacing: 8,
+        shape: {
+            borderRadius: 8,
+        },
+        radius: designTokens.radius,
+        components: {
+            MuiButton: {
+                styleOverrides: {
+                    root: {
+                        textTransform: 'none',
+                        borderRadius: '4px',
+                        // fontWeight: 600,
+                        letterSpacing: '0.5px',
+                        padding: '8px 16px',
+                    },
+                    sizeSmall: {
+                        padding: '4px 12px',
+                        fontSize: '0.875rem',
+                    },
+                    sizeLarge: {
+                        padding: '12px 24px',
+                        fontSize: '1rem',
+                    },
+                },
+                defaultProps: {
+                    disableElevation: true
+                }
+            },
+            MuiCard: {
+                styleOverrides: {
+                    root: {
+                        borderRadius: '12px',
+                        boxShadow: '0 2px 8px rgba(0, 0, 0, 0.1)',
+                    },
+                },
+            },
+            MuiTextField: {
+                styleOverrides: {
+                    root: {
+                        '& .MuiOutlinedInput-root': {
+                            borderRadius: '8px',
+                        },
+                    },
+                },
+            },
+        },
+    });
+};
+// Default theme
+const theme = createCustomTheme();
+
+const UILibraryThemeProvider = ({ children, primaryColor, secondaryColor, enableCssBaseline = true, }) => {
+    const themeConfig = {};
+    if (primaryColor) {
+        themeConfig.primaryColor = primaryColor;
+    }
+    if (secondaryColor) {
+        themeConfig.secondaryColor = secondaryColor;
+    }
+    const theme = createCustomTheme(themeConfig);
+    return (jsxRuntime.jsxs(styles.ThemeProvider, { theme: theme, children: [enableCssBaseline && jsxRuntime.jsx(material.CssBaseline, {}), children] }));
+};
+
+exports.UILibraryThemeProvider = UILibraryThemeProvider;
+exports.createCustomTheme = createCustomTheme;
+exports.designTokens = designTokens;
+exports.theme = theme;

package/package.json

@@ -1,10 +1,17 @@
 {
   "name": "@zimyo/ui",
-  "version": "1.1.0",
-  "description": "Scalable UI component library built on MUI Material",
+  "version": "1.1.2",
+  "description": "Zimyo UI library built on MUI Material",
   "main": "dist/index.js",
   "module": "dist/index.esm.js",
   "types": "dist/index.d.ts",
+  "author": "Zimyo Team <developer@zimyo.com>",
+  "license": "MIT",
+  "homepage": "https://github.com/zimyoTech/zimyo_core#readme",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/zimyoTech/zimyo_core"
+  },
   "exports": {
     ".": {
       "import": "./dist/index.esm.js",
@@ -26,6 +33,31 @@
       "require": "./dist/Typography/index.js",
       "types": "./dist/Typography/index.d.ts"
     },
+    "./Card": {
+      "import": "./dist/Card/index.esm.js",
+      "require": "./dist/Card/index.js",
+      "types": "./dist/Card/index.d.ts"
+    },
+    "./Accordion": {
+      "import": "./dist/Accordion/index.esm.js",
+      "require": "./dist/Accordion/index.js",
+      "types": "./dist/Accordion/index.d.ts"
+    },
+    "./Select": {
+      "import": "./dist/Select/index.esm.js",
+      "require": "./dist/Select/index.js",
+      "types": "./dist/Select/index.d.ts"
+    },
+    "./TextInput": {
+      "import": "./dist/Input/index.esm.js",
+      "require": "./dist/Input/index.js",
+      "types": "./dist/Input/index.d.ts"
+    },
+    "./Switch": {
+      "import": "./dist/Switch/index.esm.js",
+      "require": "./dist/Switch/index.js",
+      "types": "./dist/Switch/index.d.ts"
+    },
     "./theme": {
       "import": "./dist/theme/index.esm.js",
       "require": "./dist/theme/index.js",
@@ -36,7 +68,7 @@
     "dist"
   ],
   "scripts": {
-    "build": "rollup -c --bundleConfigAsCjs",
+    "build": "cross-env NODE_OPTIONS=--max-old-space-size=4096 rollup -c --bundleConfigAsCjs",
     "build:watch": "rollup -c -w",
     "storybook": "storybook dev -p 6006",
     "build-storybook": "storybook build",
@@ -45,11 +77,12 @@
     "typecheck": "tsc --noEmit",
     "generate:exports": "node scripts/generate-exports.js",
     "version": "changeset version",
-    "release": "changeset publish --access public"
+    "release": "changeset publish"
   },
   "peerDependencies": {
     "@emotion/react": ">=11.0.0",
     "@emotion/styled": ">=11.0.0",
+    "@mui/icons-material": "^7.1.2",
     "@mui/material": ">=5.0.0",
     "react": ">=17.0.0",
     "react-dom": ">=17.0.0"
@@ -66,6 +99,7 @@
     "@types/jest": "^30.0.0",
     "@types/node": "^20.9.0",
     "@types/react": "^18.0.0",
+    "cross-env": "^7.0.3",
     "eslint": "^8.0.0",
     "eslint-plugin-storybook": "^9.0.14",
     "jest": "^29.7.0",
@@ -81,12 +115,28 @@
     "@emotion/react": ">=11.0.0",
     "@emotion/styled": ">=11.0.0",
     "@mui/icons-material": "^7.1.2",
-    "@mui/material": ">=5.0.0",
-    "@mui/styles": "^6.4.8"
+    "@mui/material": ">=5.0.0"
   },
   "eslintConfig": {
     "extends": [
       "plugin:storybook/recommended"
     ]
-  }
-}
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "engines": {
+    "node": ">=16.0.0",
+    "npm": ">=7.0.0"
+  },
+  "keywords": [
+    "react",
+    "mui",
+    "material-ui",
+    "ui-library",
+    "storybook",
+    "typescript",
+    "component-library",
+    "design-system"
+  ]
+}