Merge remote-tracking branch 'origin/dev' into feature/messenger

.github/workflows/deploy.yml

@@ -8,25 +8,42 @@ jobs:
   build:
 
     runs-on: self-hosted
+    strategy:
+      matrix:
+        node-version: [14.x]
 
     steps:
       - name: Checkout Repository
         uses: actions/checkout@v2
-      - name: Install & Build
+      - name: Use Node.js ${{ matrix.node-version }}
+        uses: actions/setup-node@v1
+        with:
+          node-version: ${{ matrix.node-version }}
+      - name: Cache dependencies
+        uses: actions/cache@v2
+        with:
+          path: '~/.npm'
+          key: ${{ runner.os }}-node-${{ hashFiles('**/package-lock.json') }}
+          restore-keys: |
+            ${{ runner.os }}-node-
+      - name: Install dependencies
         run: |
-          npm run build:prod
+          npm uninstall @nitrots/nitro-renderer
+          npm install git+https://git@git.krews.org/nitro/nitro-renderer#dev
+      - name: Build Nitro
+        run: |
+          npm run build
       - name: Archive Artifacts
         uses: actions/upload-artifact@v2
         with:
           path: |
             build
-      - name: Upload Artifacts
+      - name: Deploy Artifacts
-        uses: actions/upload-artifact@v2
+        uses: easingthemes/ssh-deploy@main
-        with:
+        env:
-          host: ${{ secrets.HOST }}
+          REMOTE_HOST: ${{ secrets.HOST }}
-          port: ${{ secrets.PORT }}
+          REMOTE_PORT: ${{ secrets.PORT }}
-          username: ${{ secrets.USERNAME }}
+          REMOTE_USER: ${{ secrets.USERNAME }}
-          key: ${{ secrets.SSHKEY }}
+          SSH_PRIVATE_KEY: ${{ secrets.SSHKEY }}
-          path: |
+          SOURCE: "build/"
-            build
+          TARGET: ${{ secrets.TARGET }}
-          target: "/var/www/nitrots.co/domains/prod.nitrots.co/html"

craco.config.js

@@ -1,5 +1,27 @@
 module.exports = {
     eslint: {
-        enabled: false
+        enable: false
+    },
+    webpack: {
+        configure: (webpackConfig) => ({
+            ...webpackConfig,
+            module: {
+                ...webpackConfig.module,
+                rules: webpackConfig.module.rules.map((rule) => 
+                {
+                    if(!rule.oneOf) return rule;
+
+                    return {
+                        ...rule,
+                        oneOf: rule.oneOf.map((ruleObject) => 
+                        {
+                            if(!new RegExp(ruleObject.test).test('.ts') || !ruleObject.include) return ruleObject;
+                            
+                            return { ...ruleObject, include: undefined };
+                        })
+                    };
+                })
+            }
+        })
     }
 }

package-lock.json

@@ -1152,6 +1152,55 @@
         "minimist": "^1.2.0"
       }
     },
+    "@craco/craco": {
+      "version": "6.3.0",
+      "resolved": "https://registry.npmjs.org/@craco/craco/-/craco-6.3.0.tgz",
+      "integrity": "sha512-SCnfEQxT/6NAbU/3sIWw7gQXtzjjiTp/EZFdJTd8inPURILIy0YajrC2p8qBG2KhFo5cwgOrEDyaGyAFvvuyuA==",
+      "requires": {
+        "cross-spawn": "^7.0.0",
+        "lodash": "^4.17.15",
+        "semver": "^7.3.2",
+        "webpack-merge": "^4.2.2"
+      },
+      "dependencies": {
+        "cross-spawn": {
+          "version": "7.0.3",
+          "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.3.tgz",
+          "integrity": "sha512-iRDPJKUPVEND7dHPO8rkbOnPpyDygcDFtWjpeWNCgy8WP2rXcxXL8TskReQl6OrB2G7+UJrags1q15Fudc7G6w==",
+          "requires": {
+            "path-key": "^3.1.0",
+            "shebang-command": "^2.0.0",
+            "which": "^2.0.1"
+          }
+        },
+        "path-key": {
+          "version": "3.1.1",
+          "resolved": "https://registry.npmjs.org/path-key/-/path-key-3.1.1.tgz",
+          "integrity": "sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q=="
+        },
+        "shebang-command": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz",
+          "integrity": "sha512-kHxr2zZpYtdmrN1qDjrrX/Z1rR1kG8Dx+gkpK1G4eXmvXswmcE1hTWBWYUzlraYw1/yZp6YuDY77YtvbN0dmDA==",
+          "requires": {
+            "shebang-regex": "^3.0.0"
+          }
+        },
+        "shebang-regex": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/shebang-regex/-/shebang-regex-3.0.0.tgz",
+          "integrity": "sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A=="
+        },
+        "which": {
+          "version": "2.0.2",
+          "resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz",
+          "integrity": "sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==",
+          "requires": {
+            "isexe": "^2.0.0"
+          }
+        }
+      }
+    },
     "@csstools/convert-colors": {
       "version": "1.4.0",
       "resolved": "https://registry.npmjs.org/@csstools/convert-colors/-/convert-colors-1.4.0.tgz",
@@ -18810,6 +18859,14 @@
         }
       }
     },
+    "webpack-merge": {
+      "version": "4.2.2",
+      "resolved": "https://registry.npmjs.org/webpack-merge/-/webpack-merge-4.2.2.tgz",
+      "integrity": "sha512-TUE1UGoTX2Cd42j3krGYqObZbOD+xF7u28WB7tfUordytSjbWTIjK/8V0amkBfTYN4/pB/GIDlJZZ657BGG19g==",
+      "requires": {
+        "lodash": "^4.17.15"
+      }
+    },
     "webpack-sources": {
       "version": "1.4.3",
       "resolved": "https://registry.npmjs.org/webpack-sources/-/webpack-sources-1.4.3.tgz",

package.json

@@ -3,13 +3,14 @@
   "version": "0.1.0",
   "private": true,
   "scripts": {
-    "start": "react-scripts start",
+    "start": "craco start",
-    "build": "react-scripts --max_old_space_size=8048 build",
+    "build": "craco --max_old_space_size=8048 build",
     "build:prod": "npm uninstall @nitrots/nitro-renderer && npm i git+https://git@git.krews.org/nitro/nitro-renderer#dev && npm i && npm run build",
-    "test": "react-scripts test",
+    "test": "craco test",
     "eject": "react-scripts eject"
   },
   "dependencies": {
+    "@craco/craco": "^6.3.0",
     "@nitrots/nitro-renderer": "file:../nitro-renderer",
     "animate.css": "^4.1.1",
     "classnames": "^2.3.1",

src/layout/card/content/NitroCardContentView.scss

@@ -2,15 +2,9 @@
     padding-top: $container-padding-x;
     padding-bottom: $container-padding-x;
     overflow: auto;
-
-    &.simple {
-        padding-left: ($container-padding-x + 25px);
-        padding-right: ($container-padding-x + 25px);
-    }
 }
 
 @include media-breakpoint-down(lg) {
-        
     .content-area {
         height: 100% !important;
         min-height: auto !important;

src/layout/card/header/NitroCardHeaderView.scss

@@ -2,7 +2,6 @@
     min-height: 33px;
     max-height: 33px;
     white-space: nowrap;
-    overflow: hidden;
 
     .header-text {
         margin: 0 35px;
@@ -10,19 +9,22 @@
 
     &.simple-header {
         min-height: 28px;
-        max-height: 28px;
+
+        .header-close {
+            font-size: 12px;
+        }
     }
 
     .bg-tertiary-split {
         position: relative;
-        border: 2px solid darken($quaternary, 4);
+        border-bottom: 2px solid darken($quaternary, 5);
-        box-shadow: 0 0 0 2px $white;
+        box-shadow: 0 2px white;
         width: 100%;
-        margin: 0 25px;
+        margin: 0;
 
         &:before {
             position: absolute;
-            content: ' ';
+            content: " ";
             top: 0;
             left: 0;
             width: 100%;
@@ -36,15 +38,20 @@
         border-radius: $border-radius;
         box-shadow: 0 0 0 1.5px $white;
         border: 2px solid #921911;
-        background: repeating-linear-gradient(rgba(245,80,65,1), rgba(245,80,65,1) 50%, rgba(194,48,39,1) 50%, rgba(194,48,39,1) 100%);
+        background: repeating-linear-gradient(
+            rgba(245, 80, 65, 1),
+            rgba(245, 80, 65, 1) 50%,
+            rgba(194, 48, 39, 1) 50%,
+            rgba(194, 48, 39, 1) 100%
+        );
         cursor: pointer;
         line-height: 1;
         padding: 1px 3px;
-    
+
         &:hover {
             filter: brightness(1.2);
         }
-    
+
         &:active {
             filter: brightness(0.8);
         }

src/layout/card/header/NitroCardHeaderView.tsx

@@ -18,8 +18,8 @@ export const NitroCardHeaderView: FC<NitroCardHeaderViewProps> = props =>
         return (
             <div className="container-fluid bg-light">
                 <div className="row nitro-card-header simple-header">
-                    <div className="d-flex justify-content-center align-items-center w-100 position-relative">
+                    <div className="d-flex justify-content-center align-items-center w-100 position-relative px-0">
-                        <div className="h5 text-white text-center text-shadow bg-tertiary-split border-top-0 rounded-bottom drag-handler">{ headerText }</div>
+                        <div className="h5 text-white text-center text-shadow bg-tertiary-split border-top-0 drag-handler">{ headerText }</div>
                         <div className="position-absolute header-close" onMouseDownCapture={ onMouseDown } onClick={ onCloseClick }>
                             <i className="fas fa-times" />
                         </div>

src/layout/card/tabs/NitroCardTabsView.scss

@@ -1,6 +1,7 @@
 .nitro-card-tabs {
     min-height: $nitro-card-tabs-height;
     max-height: $nitro-card-tabs-height;
+    border-bottom: $nav-tabs-border-width solid $nav-tabs-border-color;
 
     @import './tabs-item/NitroCardTabsItemView';
 }

src/layout/card/tabs/NitroCardTabsView.tsx

@@ -5,7 +5,7 @@ export const NitroCardTabsView: FC<NitroCardTabsViewProps> = props =>
 {
     return (
         <div className="container-fluid d-flex bg-secondary pt-1 nitro-card-tabs justify-content-center">
-            <ul className="nav nav-tabs">
+            <ul className="nav nav-tabs border-0">
                 { props.children }
             </ul>
         </div>

src/layout/trophy/NitroLayoutTrophyView.scss

@@ -2,8 +2,6 @@
     position: relative;
     width: 340px;
     height: 173px;
-    top: 25px;
-    left: 25px;
     color: black;
     
     background-position: 0px 0px;

src/views/navigator/NavigatorView.tsx

@@ -221,7 +221,7 @@ export const NavigatorView: FC<NavigatorViewProps> = props =>
                 <NitroCardView uniqueKey="navigator" className="nitro-navigator">
                     <NitroCardHeaderView headerText={ LocalizeText(isCreatorOpen ? 'navigator.createroom.title' : 'navigator.title') } onCloseClick={ event => setIsVisible(false) } />
                     <NitroCardTabsView>
-                        { topLevelContexts.map((context, index) =>
+                        { topLevelContexts && (topLevelContexts.length > 0) && topLevelContexts.map((context, index) =>
                             {
                                 return (
                                     <NitroCardTabsItemView key={ index } isActive={ ((topLevelContext === context) && !isCreatorOpen) } onClick={ event => sendSearch('', context.code) }>