@symply.io/basic-components 1.0.0-alpha.6 → 1.0.0-alpha.7

package/VideoPlayerModal/types.d.ts

@@ -1,8 +1,11 @@
+import { CSSProperties } from "react";
 import { ButtonProps } from "@mui/material/Button";
 export interface VideoPlayerModalProps {
     title?: string;
     open: boolean;
     pip?: boolean;
     extraButtons?: Array<ButtonProps>;
+    primaryColor?: CSSProperties["color"];
+    secondaryColor?: CSSProperties["color"];
     onClose: () => void;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@symply.io/basic-components",
-  "version": "1.0.0-alpha.6",
+  "version": "1.0.0-alpha.7",
   "description": "Basic and reusable components for all frontend of Symply apps",
   "keywords": [
     "react",
@@ -55,6 +55,7 @@
     "@mui/icons-material": "^5.4.2",
     "@mui/material": "^5.4.2",
     "@mui/system": "^5.4.2",
+    "color-alpha": "^1.1.3",
     "react-player": "^2.9.0",
     "rifm": "^0.12.1"
   },

package/useCustomTheme.d.ts

@@ -0,0 +1,6 @@
+import { CSSProperties } from "react";
+declare function useCustomTheme(props?: {
+    primaryColor?: CSSProperties["color"];
+    secondaryColor?: CSSProperties["color"];
+}): import("@mui/material/styles").Theme;
+export default useCustomTheme;

package/useCustomTheme.js

@@ -0,0 +1,51 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import colorAlpha from "color-alpha";
+import { createTheme } from "@mui/material/styles";
+function useCustomTheme(props) {
+    var _a = props || {}, primaryColor = _a.primaryColor, secondaryColor = _a.secondaryColor;
+    var themeOptions = {
+        components: {
+            MuiButton: {
+                styleOverrides: {
+                    root: {
+                        whiteSpace: "nowrap",
+                        fontWeight: 600,
+                        fontFamily: "Dinpro"
+                    }
+                }
+            }
+        },
+        typography: {
+            fontFamily: "Dinpro"
+        }
+    };
+    if (primaryColor) {
+        themeOptions = __assign(__assign({}, themeOptions), { palette: {
+                primary: {
+                    main: primaryColor,
+                    light: colorAlpha(primaryColor, 0.08)
+                }
+            } });
+    }
+    if (secondaryColor) {
+        themeOptions = __assign(__assign({}, themeOptions), { palette: {
+                secondary: {
+                    main: secondaryColor,
+                    light: colorAlpha(secondaryColor, 0.08)
+                }
+            } });
+    }
+    var theme = createTheme(themeOptions);
+    return theme;
+}
+export default useCustomTheme;

package/withTheme.d.ts

@@ -1,3 +0,0 @@
-import React from 'react';
-declare const withTheme: (Component: React.ElementType) => (props: any) => JSX.Element;
-export default withTheme;

package/withTheme.js

@@ -1,35 +0,0 @@
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { createTheme, ThemeProvider } from '@mui/material/styles';
-import CssBaseline from '@mui/material/CssBaseline';
-var theme = createTheme({
-    components: {
-        MuiButton: {
-            styleOverrides: {
-                root: {
-                    whiteSpace: 'nowrap',
-                    fontWeight: 600,
-                    fontFamily: 'Dinpro'
-                }
-            }
-        }
-    },
-    typography: {
-        fontFamily: 'Dinpro'
-    }
-});
-var withTheme = function (Component) {
-    var CustomComponent = function (props) { return (_jsxs(ThemeProvider, __assign({ theme: theme }, { children: [_jsx(CssBaseline, {}, void 0), _jsx(Component, __assign({}, props), void 0)] }), void 0)); };
-    return CustomComponent;
-};
-export default withTheme;