@firedesktop/react-base 1.6.0 → 1.9.0

package/dist/styles/base.css

@@ -0,0 +1,348 @@
+:root {
+    --background-color: linear-gradient(
+      180deg,
+      #0057ff 0%,
+      rgba(0, 87, 255, 0.7) 100%,
+      rgba(0, 87, 255, 0.7) 100%
+    );
+    --background-gradient-active: linear-gradient(
+      270deg,
+      rgba(0, 87, 255, 0.7) 0%,
+      #0057ff 100%
+    );
+  
+    --background-progress-circle: linear-gradient(
+      270deg,
+      rgba(0, 87, 255, 0.7) 0%,
+      #0057ff 78.42%
+    );
+  
+    --background-progress-fill: linear-gradient(
+      270deg,
+      rgba(106, 157, 255, 0.7) 0%,
+      #6a9dff 50.95%
+    );
+    --background-progress: linear-gradient(
+      270deg,
+      rgba(106, 157, 255, 0.7) 0%,
+      #6a9dff 100%
+    );
+    --font-Josefin-sans: "Josefin Sans", sans-serif !important;
+    --font-Roboto: "Roboto", sans-serif !important;
+    --primary-color: #0057ff;
+    --warning-color: #ffc14e;
+    --danger-color: #e80026;
+    --tertiary-color: #b1aeae;
+    --success-color: #00854d;
+    --light-color: #c0c0c0;
+    --white-color: #ffffff;
+    --dark-pink-color: #de31d2;
+    --menu-dropdown-background: rgba(238, 238, 238, 0.9);
+  }
+  
+  body {
+    background: #f7f7f7 !important;
+    font-family: var(--font-Roboto);
+    overflow-x: hidden;
+  }
+
+  p {
+    color: var(--para-color);
+  }
+  
+  .tertiary-text {
+    color: var(--tertiary-color);
+  }
+  
+  .primary-text {
+    color: var(--primary-color);
+  }
+  
+  .white-text {
+    color: var(--white-color);
+  }
+  
+  .light-text {
+    color: var(--light-color);
+  }
+  
+  .danger-text {
+    color: var(--danger-color);
+  }
+  
+  .success-text {
+    color: var(--success-color);
+  }
+  
+  .dark-pink-text {
+    color: var(--dark-pink-color);
+  }
+  
+
+  /* SVG  Start */
+  .warning-svg {
+    fill: var(--warning-color);
+  }
+  
+  .tertiary-svg {
+    fill: var(--tertiary-color);
+  }
+  
+  .primary-svg {
+    fill: var(--primary-color);
+  }
+  
+  .white-svg {
+    fill: var(--white-color);
+  }
+  
+  .light-svg {
+    fill: var(--light-color);
+  }
+  
+  .danger-svg {
+    fill: var(--danger-color);
+  }
+  
+  .success-svg {
+    fill: var(--success-color);
+  }
+  
+  .dark-pink-svg {
+    fill: var(--dark-pink-color);
+  }
+  
+  .warning-svg-stroke {
+    stroke: var(--warning-color);
+  }
+  
+  .tertiary-svg-stroke {
+    stroke: var(--tertiary-color);
+  }
+  
+  .primary-svg-stroke {
+    stroke: var(--primary-color);
+  }
+  
+  .white-svg-stroke {
+    stroke: var(--white-color);
+  }
+  
+  .light-svg-stroke {
+    stroke: var(--light-color);
+  }
+  
+  .danger-svg-stroke {
+    stroke: var(--danger-color);
+  }
+  
+  .success-svg-stroke {
+    stroke: var(--success-color);
+  }
+  
+  .dark-pink-svg-stroke {
+    stroke: var(--dark-pink-color);
+  }
+  /* SVG  End */ 
+  
+  /* Fonts Start */
+  .fz10 {
+    font-size: 10px;
+  }
+  
+  .fz11 {
+    font-size: 11px;
+  }
+  
+  .fz12 {
+    font-size: 12px;
+  }
+  
+  .fz13 {
+    font-size: 13px;
+  }
+  
+  .fz14 {
+    font-size: 14px;
+  }
+  
+  .fz15 {
+    font-size: 15px;
+  }
+  
+  .fz16 {
+    font-size: 16px;
+  }
+  
+  .fz17 {
+    font-size: 17px;
+  }
+  
+  .fz18 {
+    font-size: 18px;
+  }
+  
+  .fz19 {
+    font-size: 19px;
+  }
+  
+  .fz20 {
+    font-size: 20px;
+  }
+  
+  .fz21 {
+    font-size: 21px;
+  }
+  
+  .fz22 {
+    font-size: 22px;
+  }
+  
+  .fz24 {
+    font-size: 24px;
+  }
+  
+  .fz25 {
+    font-size: 25px;
+  }
+  
+  .fz26 {
+    font-size: 26px;
+  }
+  
+  .fz28 {
+    font-size: 28px;
+  }
+  
+  .fz30 {
+    font-size: 30px;
+  }
+  
+  .fz32 {
+    font-size: 32px;
+  }
+  
+  .fz34 {
+    font-size: 34px;
+  }
+  
+  .fz36 {
+    font-size: 36px;
+  }
+  
+  .fz38 {
+    font-size: 38px;
+  }
+  
+  .fz40 {
+    font-size: 40px;
+  }
+  
+  .fz45 {
+    font-size: 45px;
+  }
+  
+  .fz50 {
+    font-size: 50px;
+  }
+  
+  .fz60 {
+    font-size: 60px;
+  }
+  
+  .fz70 {
+    font-size: 70px;
+  } 
+  /* Fonts End */
+
+
+   /* breadcrumb */
+   .breadcrumb_text {
+    position: relative;
+    color: var(--primary-color);
+  }
+  
+  .breadcrumb_text::after {
+    content: "";
+    width: 100%;
+    height: 5px;
+    background: var(--primary-color);
+    position: absolute;
+    left: 0;
+    bottom: -16px;
+    border-radius: 2px;
+  }
+
+  .warning-text {
+    color: var(--warning-color);
+  }
+
+  .success-border {
+    border: 2px solid var(--success-color);
+  }
+  
+  .danger-border {
+    border: 2px solid var(--danger-color);
+  }
+  
+  .warning-border {
+    border: 2px solid var(--warning-color);
+  }
+  .white-border {
+    border: 2px solid var(--primary-color);
+  }
+  .success-background {
+    background: var(--success-color);
+    color: var(--white-color);
+  }
+  
+  .white-background {
+    background: var(--primary-color);
+    color: var(--white-color);
+  }
+  .danger-background {
+    background: var(--danger-color);
+    color: var(--white-color);
+  }
+  
+  .warning-background {
+    background: var(--warning-color);
+    color: var(--white-color);
+  }
+  .rounded10 {
+    border-radius: 10px;
+  }
+  .custom-control-label::before {
+    border-color: var(--primary-color) !important;
+  }
+  .custom-control-input:checked ~ .custom-control-label::before {
+    color: #fff;
+    border-color: var(--primary-color) !important;
+    background-color: #fff !important;
+  }
+  .custom-radio .custom-control-input:checked ~ .custom-control-label::after {
+    background-color: var(--primary-color) !important;
+    background-image: none !important;
+  }
+  .custom-control-label::after {
+    position: absolute;
+    top: 0.4rem !important;
+    left: -1.35rem !important;
+    display: block;
+    width: 0.7rem !important;
+    height: 0.7rem !important;
+    content: "";
+    background: no-repeat 50% / 50% 50%;
+    border-radius: 100%;
+  }
+  .btn-info {
+    opacity: 0;
+    cursor: no-drop;
+    width: 0px;
+    height: 0px;
+    background-color: var(--primary-color) !important;
+  }
+  
+  .MuiAutocomplete-proper *{
+    transition: none !important;
+  }

package/package.json

@@ -1,43 +1,43 @@
 {
   "name": "@firedesktop/react-base",
-  "version": "1.6.0",
+  "version": "1.9.0",
   "license": "ISC",
   "main": "dist/index.js",
   "description": "This is the FireDesktop base package used to support every React Project in this Company.",
   "author": "alessandro.gambaro",
   "repository": "https://firedesktopDevOps@dev.azure.com/firedesktopDevOps/baseFEComponents/_git/baseFEComponents",
   "dependencies": {
-    "react": "^17.0.1",
-    "react-dom": "^17.0.1",
-    "react-redux": "^7.2.1",
-    "redux": "^4.0.5"
+    "react": "^16.14.0",
+    "react-dom": "^16.14.0",
+    "react-redux": "^7.2.1"
   },
   "devDependencies": {
-    "@types/jest": "^26.0.15",
-    "@types/node": "^12.19.1",
-    "@types/react": "^16.9.53",
-    "@types/react-dom": "^16.9.8",
-    "@types/react-redux": "^7.1.9",
-    "@testing-library/jest-dom": "^5.11.5",
-    "@testing-library/react": "^11.1.0",
-    "@testing-library/user-event": "^12.1.10",
     "@babel/cli": "^7.10.5",
     "@babel/core": "^7.10.5",
     "@babel/plugin-proposal-class-properties": "7.10.4",
     "@babel/plugin-transform-arrow-functions": "^7.12.1",
     "@babel/preset-typescript": "^7.12.1",
-    "babel-preset-minify": "0.5.1",
+    "@testing-library/jest-dom": "^5.11.5",
+    "@testing-library/react": "^11.1.0",
+    "@testing-library/user-event": "^12.1.10",
+    "@types/jest": "^26.0.15",
+    "@types/node": "^12.19.1",
+    "@types/react": "^16.9.53",
+    "@types/react-dom": "^16.9.8",
+    "@types/react-redux": "^7.1.9",
     "babel-plugin-minify-builtins": "^0.5.0",
+    "babel-preset-minify": "0.5.1",
+    "copyfiles": "^2.4.0",
     "react-scripts": "^3.4.3",
     "typescript": "^4.0.3",
-    "web-vitals": "^0.2.4",
-    "@firedesktop/react-base": "1.2.0"
+    "web-vitals": "^0.2.4"
   },
   "peerDependencies": {},
   "scripts": {
     "distribute_not_working": "rmdir /s /q dist & mkdir dist && npx babel src/lib --out-dir dist --extensions \".js,.ts,.tsx\" --source-maps inline",
-    "start": "react-scripts start",
-    "distribute": "rmdir /s /q dist & mkdir dist && tsc"
+    "start": "react-scripts start && copy ./src/lib/styles/* ./dist/styles/ && tsc",
+    "distribute": "rmdir /s /q dist & mkdir dist\\styles && tsc && copyfiles -f src/lib/styles/* dist/styles",
+    "suca": "copyfiles -f src/lib/styles/* dist/styles"
   },
   "eslintConfig": {
     "extends": [

package/src/App.tsx

@@ -5,6 +5,9 @@ import { createStore } from 'redux';
 import ConfigurationLoader from './types/ConfigurationLoader';
 // import LanguageLoader from './types/LanguageLoader';
 import TestLabelFunction from './TestLabelFunction';
+import AppIcon from './lib/components/AppIcon';
+
+import './lib/styles/base.css';
 
 export const UPDATE_APP_STATE = 'UPDATE_APP_STATE';
 const appReducer = (state = {}, action: any) => {
@@ -38,11 +41,10 @@ function App() {
   return (
 
     <Provider store={store}>
-      
+      <AppIcon name={"Pin"} className='dark-pink-svg'/>
       <TestLabelFunction />
       <ConfigurationLoader updateAppState={updateAppState} path={null} />
-      {/* 
-      <LanguageLoader updateAppState={updateAppState} locale='it-IT' path={null} /> */}
+      {/* <LanguageLoader updateAppState={updateAppState} locale='it-IT' path={null} /> */}
     </Provider >
   );
 }

package/src/lib/ConfigurationLoader.tsx

@@ -19,17 +19,20 @@ function ConfigurationLoader({ updateAppState, path }: configurationLoaderParams
         fullPath = path;
 
     useEffect(() => {
-        if (!configuration) {
-            console.log(`Loading Configuration for this Site in this path: ${fullPath}`);
-            loadConfiguration(fullPath).then((response: any) => {
-                console.log(`Loaded Configuration for this Site in this path: ${fullPath}`, response);
-                dispatch(updateAppState("configuration", response));
-            })
-            .catch((err: any) => {
-                console.log(`Problem loading the Site Configuration in this path: ${fullPath}`);
-            });
+        async function justAsync() {
+            if (!configuration) {
+                console.log(`Loading Configuration for this Site in this path: ${fullPath}`);
+                await loadConfiguration(fullPath).then((response: any) => {
+                    console.log(`Loaded Configuration for this Site in this path: ${fullPath}`, response);
+                    dispatch(updateAppState("configuration", response));
+
+                }).catch((err: any) => {
+                    console.log(`Problem loading the Site Configuration in this path: ${fullPath}`);
+                });
+            }
         }
-    }, [configuration, dispatch, loadConfiguration, fullPath, updateAppState]);
+        justAsync();
+    }, []);
 
     return (
         <React.Fragment>

package/src/lib/LanguageLoader.tsx

@@ -5,34 +5,38 @@ import LanguageManager from './LanguageManager';
 
 export type languageLoaderParamsType = {
     updateAppState: any,
-    locale: string,
+    language: string,
     path: string | null,
     // toggle: (confirm: boolean) => void
 }
 
-function LanguageLoader({ updateAppState, locale, path }: languageLoaderParamsType) {
+function LanguageLoader({ updateAppState, language, path }: languageLoaderParamsType) {
     const dispatch = useDispatch();
     const { labels }: any = useSelector(state => state);
     const { loadLabels } = LanguageManager();
 
-    const fileName = `${locale}.json`;
+    const fileName = `${language}.json`;
 
     let fullPath = `./labels/${fileName}`;
     if (path)
         fullPath = `./${path}/${fileName}`;
 
+    // Do it on change language
     useEffect(() => {
-        if (!labels.language || labels.language !== locale) {
-            console.log(`Loading Language Labels for this Site in this path: ${fullPath}`);
-            loadLabels(fullPath).then((response: any) => {
-                console.log(`Loaded Language Labels for this Site in this path: ${fullPath}`, response);
-                dispatch(updateAppState("labels", response));
-            })
-                .catch((err: any) => {
-                    console.log(`Problem loading the Site Language Labels in this path: ${fullPath}`);
-                });
+        async function justAsync() {
+            if (!labels.language || labels.language !== language) {
+                console.log(`Loading Language Labels for this Site in this path: ${fullPath}`);
+                loadLabels(fullPath).then((response: any) => {
+                    console.log(`Loaded Language Labels for this Site in this path: ${fullPath}`, response);
+                    dispatch(updateAppState("labels", response));
+                })
+                    .catch((err: any) => {
+                        console.log(`Problem loading the Site Language Labels in this path: ${fullPath}`);
+                    });
+            }
         }
-    }, [labels, dispatch, loadLabels, fullPath, updateAppState]);
+        justAsync();
+    }, [language]);
 
     return (
         <React.Fragment>