add appstore ui as a system app

Signed-off-by: Sidharth Mohanty <[email protected]>

system-apps/app-store/.gitignore

@@ -0,0 +1,2 @@
+web
+lib

system-apps/app-store/manifest.yaml

@@ -0,0 +1,18 @@
+---
+name: appstore
+id: org.zowe.zlux.appstore
+# Without the v
+version: 1.0.0
+# Human readable component name
+title: App Store
+# Human readable component description
+description: 'Zowe App Store'
+homepage: https://zowe.org
+keywords:
+  - zlux
+  - appfw
+  - app
+license: EPL-2.0
+# we do not specify encoding here because its already tagged ascii
+appfwPlugins:
+  - path: .

system-apps/app-store/pluginDefinition.json

@@ -0,0 +1,34 @@
+{
+    "identifier": "org.zowe.zlux.appstore",
+    "apiVersion": "1.0.0",
+    "pluginVersion": "1.0.0",
+    "pluginType": "application",
+    "isSystemPlugin":true,
+    "webContent": {
+      "framework": "react",
+      "launchDefinition": {
+        "pluginShortNameKey": "appstore",
+        "pluginShortNameDefault": "App Store",
+        "imageSrc": "assets/icon.png"
+      },
+      "descriptionKey": "appstore.description",
+      "descriptionDefault": "Zowe App Store",
+      "isSingleWindowApp": true,
+      "defaultWindowStyle": {
+        "width": 850,
+        "height": 450
+      }
+    },
+    "configurationData": {
+      "resources": {
+        "requests": {
+          "aggregationPolicy": "override",
+          "subResources": {
+            "app": {
+              "aggregationPolicy": "override"
+            }
+          }
+        }
+      }
+    }
+  }

system-apps/app-store/webClient/.gitignore

@@ -0,0 +1 @@
+node_modules

system-apps/app-store/webClient/package.json

@@ -0,0 +1,39 @@
+{
+  "name": "appstore",
+  "version": "1.0.0",
+  "description": "Zowe App Store",
+  "scripts": {
+    "start": "webpack --config webpack.config.js --watch",
+    "build": "webpack --config webpack.config.js"
+  },
+  "keywords": [],
+  "author": "",
+  "license": "ISC",
+  "devDependencies": {
+    "copy-webpack-plugin": "^11.0.0",
+    "css-loader": "^6.8.1",
+    "exports-loader": "^4.0.0",
+    "postcss-import": "^15.1.0",
+    "postcss-loader": "^7.3.3",
+    "postcss-preset-env": "^8.5.1",
+    "script-loader": "^0.7.2",
+    "source-map-loader": "^4.0.1",
+    "style-loader": "^3.3.3",
+    "svg-sprite-loader": "^6.0.11",
+    "ts-loader": "^9.4.3",
+    "webpack": "^5.87.0",
+    "webpack-cli": "^5.1.4",
+    "webpack-dev-server": "^4.15.1",
+    "webpack-merge": "^5.9.0"
+  },
+  "dependencies": {
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-router-dom": "^6.14.2",
+    "react-slick": "^0.29.0",
+    "reactjs-popup": "^2.0.5",
+    "rxjs": "^7.8.1",
+    "slick-carousel": "^1.8.1",
+    "typescript": "^5.1.3"
+  }
+}

system-apps/app-store/webClient/src/components/AppStore/AppStoreLayout.tsx

@@ -0,0 +1,23 @@
+import React from "react";
+import LeftPanel from "./LeftPanel/LeftPanel";
+import RightPanel from "./RightPanel/RightPanel";
+import { useWindowSize } from "../../context/window-size";
+import "../../styles/globals.css";
+
+const AppStoreLayout: React.FC = ({ children }) => {
+  const windowSize = useWindowSize();
+  return (
+    <div
+      className="appStoreContainer"
+      style={{
+        display: "flex",
+        flexDirection: windowSize < 768 ? "column" : "row",
+      }}
+    >
+      <LeftPanel />
+      <RightPanel>{children}</RightPanel>
+    </div>
+  );
+};
+
+export default AppStoreLayout;

system-apps/app-store/webClient/src/components/AppStore/LeftPanel/LeftPanel.tsx

@@ -0,0 +1,84 @@
+import React, { useState } from "react";
+import NavigationButtons from "./NavigationButtons";
+import SearchBar from "./SearchBar";
+import { useWindowSize } from "../../../context/window-size";
+import { ASSETS_URL } from "../../../constants";
+import Popup from "reactjs-popup";
+
+const LeftPanel = () => {
+  const windowSize = useWindowSize();
+  const [isMenuOpen, setIsMenuOpen] = useState(false);
+
+  const toggleMenu = () => {
+    setIsMenuOpen(!isMenuOpen);
+  };
+
+  const isMobileView = windowSize < 768; // Adjust the breakpoint as needed
+
+  const renderMenu = () => {
+    return (
+      <button
+        onClick={toggleMenu}
+        style={{
+          border: "none",
+          background: "none",
+          cursor: "pointer",
+          outline: "none",
+        }}
+      >
+        <img width={24} height={24} src={ASSETS_URL + "menu.svg"} alt="menu" />
+      </button>
+    );
+  };
+
+  return (
+    <div>
+      {isMobileView ? (
+        <div
+          style={{
+            marginTop: "10px",
+            padding: "0 10px",
+          }}
+        >
+          <div
+            style={{
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "space-between",
+            }}
+          >
+            <Popup arrow={false} trigger={renderMenu()} position="bottom left">
+              <div
+                style={{
+                  backgroundColor: "#222",
+                  minWidth: "100px",
+                  padding: "10px",
+                  borderRadius: "10px",
+                }}
+              >
+                <NavigationButtons />
+              </div>
+            </Popup>
+            <SearchBar />
+          </div>
+        </div>
+      ) : (
+        <div
+          style={{
+            minWidth: "200px",
+            padding: "0 10px",
+            boxSizing: "border-box",
+            marginTop: "10px",
+            position: "sticky",
+            top: "10px",
+          }}
+        >
+          <SearchBar />
+          <NavigationButtons />
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default LeftPanel;

system-apps/app-store/webClient/src/components/AppStore/LeftPanel/NavigationButtons.tsx

@@ -0,0 +1,54 @@
+import React from "react";
+import { Link } from "react-router-dom";
+
+const options = [
+  {
+    id: 1,
+    name: "Discover",
+    href: "/",
+  },
+  {
+    id: 2,
+    name: "On-Premise",
+    href: "/on-premise",
+  },
+  {
+    id: 3,
+    name: "Updates",
+    href: "/updates",
+  },
+  {
+    id: 4,
+    name: "Installed",
+    href: "/installed",
+  },
+  {
+    id: 5,
+    name: "Settings",
+    href: "/settings",
+  },
+  {
+    id: 6,
+    name: "Help",
+    href: "/help",
+  },
+];
+
+const NavigationButtons = () => {
+  return (
+    <div
+      style={{
+        display: "flex",
+        flexDirection: "column",
+      }}
+    >
+      {options.map((opt) => (
+        <Link key={opt.id} to={opt.href} className={"optionButton"}>
+          {opt.name}
+        </Link>
+      ))}
+    </div>
+  );
+};
+
+export default NavigationButtons;

system-apps/app-store/webClient/src/components/AppStore/LeftPanel/SearchBar.tsx

@@ -0,0 +1,34 @@
+import React from "react";
+
+const SearchIcon = () => {
+    return (
+        <svg clip-rule="evenodd" fill-rule="evenodd" style={{
+            marginLeft: "10px",
+        }} fill="gray" height={18} stroke-linejoin="round" stroke-miterlimit="2" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="m15.97 17.031c-1.479 1.238-3.384 1.985-5.461 1.985-4.697 0-8.509-3.812-8.509-8.508s3.812-8.508 8.509-8.508c4.695 0 8.508 3.812 8.508 8.508 0 2.078-.747 3.984-1.985 5.461l4.749 4.75c.146.146.219.338.219.531 0 .587-.537.75-.75.75-.192 0-.384-.073-.531-.22zm-5.461-13.53c-3.868 0-7.007 3.14-7.007 7.007s3.139 7.007 7.007 7.007c3.866 0 7.007-3.14 7.007-7.007s-3.141-7.007-7.007-7.007z" fill-rule="nonzero" /></svg>
+    )
+}
+
+const SearchBar = () => {
+    return (
+        <div style={{
+            display: "flex",
+            alignItems: "center",
+            background: "#222",
+            borderRadius: "8px",
+        }}>
+            <SearchIcon />
+            <input type="text" placeholder="Search" style={{
+                width: "100%",
+                height: "30px",
+                border: "none",
+                outline: "none",
+                color: "#fff",
+                background: "inherit",
+                padding: "0 10px",
+                borderRadius: "8px",
+            }} />
+        </div>
+    );
+};
+
+export default SearchBar;

system-apps/app-store/webClient/src/components/AppStore/RightPanel/RightPanel.tsx

@@ -0,0 +1,20 @@
+import React from "react";
+
+const RightPanel: React.FC = ({
+    children
+}) => {
+    return (
+        <div style={{
+            width: "100%",
+            margin: "0 auto",
+            overflowY: "scroll",
+            paddingBottom: "40px",
+            minHeight: "100vh",
+        }}>
+            {children}
+        </div>
+    )
+
+}
+
+export default RightPanel;

system-apps/app-store/webClient/src/components/UI/AppCard.tsx

@@ -0,0 +1,36 @@
+import React from 'react';
+import { trunc } from '../../utils';
+import { ASSETS_URL } from '../../constants';
+import { Link } from 'react-router-dom';
+
+type AppProps = {
+    name: string;
+    icon: string;
+    description: string;
+    publisher: string;
+    id: string;
+};
+
+const App: React.FC<AppProps> = ({ name, icon, description, publisher, id }) => {
+    return (
+        <Link to={`/app/${id}`} className={'appContainer'}>
+            <img className={'appIcon'} src={icon} alt={name} />
+            <div className={'appInfoContainer'}>
+                <div className={'appNameContainer'}>
+                    <span className={'appPublisher'}>
+                        {publisher}
+                    </span>
+                    <span className={'appName'}>{name}</span></div>
+                <span className={'appDescription'}>{trunc(description, 36)}</span>
+                <button className={'installButton'}>
+                    <img src={ASSETS_URL + '/download.svg'} width={12} height={12} style={{
+                        marginRight: '4px',
+                    }} />
+                    Install
+                </button>
+            </div>
+        </Link>
+    );
+};
+
+export default App;