Demo mode improvements (#2825)

* Enable DEMO_MODE env

* Set GH star button

package-lock.json

@@ -58,6 +58,7 @@
         "react-dropzone": "^11.2.4",
         "react-editor-js": "^2.0.6",
         "react-error-boundary": "^3.1.4",
+        "react-github-btn": "^1.4.0",
         "react-gtm-module": "^2.0.11",
         "react-helmet": "^6.1.0",
         "react-infinite-scroll-component": "^6.1.0",
@@ -21980,6 +21981,11 @@
         "parse-url": "^5.0.0"
       }
     },
+    "node_modules/github-buttons": {
+      "version": "2.22.1",
+      "resolved": "https://registry.npmjs.org/github-buttons/-/github-buttons-2.22.1.tgz",
+      "integrity": "sha512-937dpW009lbV8p1gg1SoUvUnJBnfJKYU6CEJcsdoLnBzI4YP7Y8oT/M0O7WTQwfErTYLCG9t0W1huaexSLx7yA=="
+    },
     "node_modules/glob": {
       "version": "7.2.3",
       "resolved": "https://registry.npmjs.org/glob/-/glob-7.2.3.tgz",
@@ -35862,6 +35868,17 @@
         "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
       }
     },
+    "node_modules/react-github-btn": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/react-github-btn/-/react-github-btn-1.4.0.tgz",
+      "integrity": "sha512-lV4FYClAfjWnBfv0iNlJUGhamDgIq6TayD0kPZED6VzHWdpcHmPfsYOZ/CFwLfPv4Zp+F4m8QKTj0oy2HjiGXg==",
+      "dependencies": {
+        "github-buttons": "^2.22.0"
+      },
+      "peerDependencies": {
+        "react": ">=16.3.0"
+      }
+    },
     "node_modules/react-gtm-module": {
       "version": "2.0.11",
       "resolved": "https://registry.npmjs.org/react-gtm-module/-/react-gtm-module-2.0.11.tgz",
@@ -61548,6 +61565,11 @@
         "parse-url": "^5.0.0"
       }
     },
+    "github-buttons": {
+      "version": "2.22.1",
+      "resolved": "https://registry.npmjs.org/github-buttons/-/github-buttons-2.22.1.tgz",
+      "integrity": "sha512-937dpW009lbV8p1gg1SoUvUnJBnfJKYU6CEJcsdoLnBzI4YP7Y8oT/M0O7WTQwfErTYLCG9t0W1huaexSLx7yA=="
+    },
     "glob": {
       "version": "7.2.3",
       "resolved": "https://registry.npmjs.org/glob/-/glob-7.2.3.tgz",
@@ -72539,6 +72561,14 @@
       "resolved": "https://registry.npmjs.org/react-from-dom/-/react-from-dom-0.6.2.tgz",
       "integrity": "sha512-qvWWTL/4xw4k/Dywd41RBpLQUSq97csuv15qrxN+izNeLYlD9wn5W8LspbfYe5CWbaSdkZ72BsaYBPQf2x4VbQ=="
     },
+    "react-github-btn": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/react-github-btn/-/react-github-btn-1.4.0.tgz",
+      "integrity": "sha512-lV4FYClAfjWnBfv0iNlJUGhamDgIq6TayD0kPZED6VzHWdpcHmPfsYOZ/CFwLfPv4Zp+F4m8QKTj0oy2HjiGXg==",
+      "requires": {
+        "github-buttons": "^2.22.0"
+      }
+    },
     "react-gtm-module": {
       "version": "2.0.11",
       "resolved": "https://registry.npmjs.org/react-gtm-module/-/react-gtm-module-2.0.11.tgz",

package.json

@@ -65,6 +65,7 @@
     "react-dropzone": "^11.2.4",
     "react-editor-js": "^2.0.6",
     "react-error-boundary": "^3.1.4",
+    "react-github-btn": "^1.4.0",
     "react-gtm-module": "^2.0.11",
     "react-helmet": "^6.1.0",
     "react-infinite-scroll-component": "^6.1.0",
@@ -182,25 +183,18 @@
     "workbox-strategies": "^6.1.2"
   },
   "optionalDependencies": {
-    "@types/setup-polly-jest": "^0.5.0",
-    "setup-polly-jest": "^0.9.1",
-    "@types/jest": "^24.0.24",
     "@storybook/addon-storyshots": "^5.2.8",
     "@storybook/react": "^5.1.9",
+    "@types/jest": "^24.0.24",
+    "@types/setup-polly-jest": "^0.5.0",
     "@types/storybook__addon-storyshots": "^3.4.9",
     "@types/storybook__react": "^4.0.2",
-    "fsevents": "^1.2.9",
     "cypress": "^10.0.2",
     "cypress-file-upload": "^5.0.8",
-    "cypress-multi-reporters": "^1.5.0",
-    "cypress-timings": "^1.0.0",
     "cypress-mailhog": "^1.3.0",
     "cypress-mochawesome-reporter": "^2.3.0",
-    "jest": "^24.8.0",
+    "cypress-multi-reporters": "^1.5.0",
-    "jest-canvas-mock": "^2.4.0",
+    "cypress-timings": "^1.0.0",
-    "jest-file": "^1.0.0",
-    "jest-localstorage-mock": "^2.4.3",
-    "husky": "^4.3.0",
     "eslint": "^7.4.0",
     "eslint-plugin-chai-friendly": "^0.6.0",
     "eslint-plugin-cypress": "^2.11.2",
@@ -211,7 +205,14 @@
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-react-refresh": "^0.3.1",
     "eslint-plugin-simple-import-sort": "^5.0.3",
+    "fsevents": "^1.2.9",
+    "husky": "^4.3.0",
+    "jest": "^24.8.0",
+    "jest-canvas-mock": "^2.4.0",
+    "jest-file": "^1.0.0",
+    "jest-localstorage-mock": "^2.4.3",
     "prettier": "^1.19.1",
+    "setup-polly-jest": "^0.9.1",
     "ts-jest": "^27.0.7"
   },
   "jest": {

src/components/DemoBanner/DemoBanner.tsx

@@ -2,6 +2,7 @@ import { useTheme } from "@material-ui/core/styles";
 import useMediaQuery from "@material-ui/core/useMediaQuery";
 import ExternalLink from "@saleor/components/ExternalLink";
 import React from "react";
+import GitHubButton from "react-github-btn";
 import { FormattedMessage } from "react-intl";
 
 import { SALEOR_GRAPHQL_URL, SALEOR_STOREFRONT_URL } from "./constants";
@@ -52,6 +53,18 @@ export const DemoBanner: React.FC = () => {
               </div>
             )}
           </ExternalLink>
+
+          <div className={classes.githubStarButton}>
+            <GitHubButton
+              href="https://github.com/saleor/saleor"
+              data-icon="octicon-star"
+              data-show-count="true"
+              data-size="large"
+              aria-label="Star saleor/saleor on GitHub"
+            >
+              Star us on GitHub
+            </GitHubButton>
+          </div>
         </div>
       </div>
     </div>

src/components/DemoBanner/styles.ts

@@ -46,6 +46,10 @@ const useStyles = makeStyles(
       borderRight: `1px solid  ${greyDark}`,
       height: theme.spacing(2),
     },
+    githubStarButton: {
+      lineHeight: 0,
+      marginLeft: "15px",
+    },
   }),
   {
     name: "DemoBanner",

vite.config.js

@@ -30,6 +30,7 @@ export default defineConfig(({ command, mode }) => {
     SALEOR_APPS_JSON_PATH,
     APP_TEMPLATE_GALLERY_PATH,
     SKIP_SOURCEMAPS,
+    DEMO_MODE,
   } = env;
 
   const sourcemap = SKIP_SOURCEMAPS ? false : true;
@@ -118,6 +119,7 @@ export default defineConfig(({ command, mode }) => {
         APP_MOUNT_URI,
         SENTRY_DSN,
         ENVIRONMENT,
+        DEMO_MODE,
       },
     },
     build: {