adding side-panel

apps/remix-ide/src/app/components/main-panel.js

@@ -17,7 +17,7 @@ export class MainPanel extends AbstractPanel {
   constructor (config) {
     super(profile)
     this.mainelement = document.createElement('div')
-    this.element.setAttribute('class', 'mainPanelPluginsContainer')
+    this.mainelement.setAttribute('class', 'mainPanelPluginsContainer')
     this.config = config
   }
 
@@ -32,7 +32,7 @@ export class MainPanel extends AbstractPanel {
   }
 
   render () {
-    return this.element
+    return this.mainelement
   }
 
   renderComponent () {

apps/remix-ide/src/app/components/panel.js

@@ -14,8 +14,7 @@ export class AbstractPanel extends HostPlugin {
     this.contents = {}
     this.active = undefined
     this.element = document.createElement('div')
-    this.element.setAttribute('id', 'plugins')
+    this.element.setAttribute('style', 'height: 100%; width: 100%; border: 0;')
-    this.element.setAttribute('class', 'abstract-panel-plugins')
   }
 
   onActivation () {
@@ -24,7 +23,7 @@ export class AbstractPanel extends HostPlugin {
 
   addView (profile, view) {
     if (this.contents[profile.name]) throw new Error(`Plugin ${profile.name} already rendered`)
-    view.style.height = '100%'
+    // view.style.height = '90%' // makde external plugins full height
     view.style.width = '100%'
     view.style.border = '0'
     this.contents[profile.name] = view

apps/remix-ide/src/app/components/side-panel.js

@@ -1,53 +1,56 @@
+import React from 'react' // eslint-disable-line
 import { AbstractPanel } from './panel'
+import ReactDOM from 'react-dom' // eslint-disable-line
+import { RemixUiSidePanel } from '@remix-ui/side-panel' // eslint-disable-line
 import * as packageJson from '../../../../../package.json'
-const csjs = require('csjs-inject')
+// const csjs = require('csjs-inject')
 const yo = require('yo-yo')
 
-const css = csjs`
+// const css = csjs`
-  .panel {
+//   .panel {
-    width: 100%;
+//     width: 100%;
-    height: 100%;
+//     height: 100%;
-    display: flex;
+//     display: flex;
-    flex-direction: column;
+//     flex-direction: column;
-    flex: auto;
+//     flex: auto;
-  }
+//   }
-  .swapitTitle {
+//   .swapitTitle {
-    margin: 0;
+//     margin: 0;
-    text-transform: uppercase;
+//     text-transform: uppercase;
-    white-space: nowrap;
+//     white-space: nowrap;
-    overflow: hidden;
+//     overflow: hidden;
-    text-overflow: ellipsis;
+//     text-overflow: ellipsis;
-  }
+//   }
-  .swapitTitle i{
+//   .swapitTitle i{
-    padding-left: 6px;
+//     padding-left: 6px;
-    font-size: 14px;
+//     font-size: 14px;
-  }
+//   }
-  .swapitHeader {
+//   .swapitHeader {
-    display: flex;
+//     display: flex;
-    align-items: center;
+//     align-items: center;
-    padding: 16px 24px 15px;
+//     padding: 16px 24px 15px;
-    justify-content: space-between;
+//     justify-content: space-between;
-  }
+//   }
-  .icons i {
+//   .icons i {
-    height: 80%;
+//     height: 80%;
-    cursor: pointer;
+//     cursor: pointer;
-  }
+//   }
-  .pluginsContainer {
+//   .pluginsContainer {
-    height: 100%;
+//     height: 100%;
-    overflow-y: auto;
+//     overflow-y: auto;
-  }
+//   }
-  .titleInfo {
+//   .titleInfo {
-    padding-left: 10px;
+//     padding-left: 10px;
-  }
+//   }
-  .versionBadge {
+//   .versionBadge {
-    background-color: var(--light);
+//     background-color: var(--light);
-    padding: 0 7px;
+//     padding: 0 7px;
-    font-weight: bolder;
+//     font-weight: bolder;
-    margin-left: 5px;
+//     margin-left: 5px;
-    text-transform: lowercase;
+//     text-transform: lowercase;
-    cursor: default;
+//     cursor: default;
-  }
+//   }
-`
+// `
 
 const sidePanel = {
   name: 'sidePanel',
@@ -63,7 +66,9 @@ export class SidePanel extends AbstractPanel {
     super(sidePanel)
     this.appManager = appManager
     this.header = yo`<header></header>`
-    this.renderHeader()
+    // this.renderHeader()
+    this.sideelement = document.createElement('div')
+    this.sideelement.setAttribute('class', 'plugins-container')
     this.verticalIcons = verticalIcons
 
     // Toggle content
@@ -90,6 +95,10 @@ export class SidePanel extends AbstractPanel {
     })
   }
 
+  onActivation () {
+    this.renderComponent()
+  }
+
   focus (name) {
     this.emit('focusChanged', name)
     super.focus(name)
@@ -104,6 +113,7 @@ export class SidePanel extends AbstractPanel {
   addView (profile, view) {
     super.addView(profile, view)
     this.verticalIcons.linkContent(profile)
+    this.renderComponent()
   }
 
   /**
@@ -112,45 +122,57 @@ export class SidePanel extends AbstractPanel {
    */
   async showContent (name) {
     super.showContent(name)
-    this.renderHeader()
+    // this.renderHeader()
     this.emit('focusChanged', name)
+    this.renderComponent()
   }
 
   /** The header of the side panel */
-  async renderHeader () {
+  // async renderHeader () {
-    let name = ' - '
+  //   let name = ' - '
-    let docLink = ''
+  //   let docLink = ''
-    let versionWarning
+  //   let versionWarning
-    if (this.active) {
+  //   if (this.active) {
-      const profile = await this.appManager.getProfile(this.active)
+  //     const profile = await this.appManager.getProfile(this.active)
-      name = profile.displayName ? profile.displayName : profile.name
+  //     name = profile.displayName ? profile.displayName : profile.name
-      docLink = profile.documentation ? yo`<a href="${profile.documentation}" class="${css.titleInfo}" title="link to documentation" target="_blank"><i aria-hidden="true" class="fas fa-book"></i></a>` : ''
+  //     docLink = profile.documentation ? yo`<a href="${profile.documentation}" class="${css.titleInfo}" title="link to documentation" target="_blank"><i aria-hidden="true" class="fas fa-book"></i></a>` : ''
-      if (profile.version && profile.version.match(/\b(\w*alpha\w*)\b/g)) {
+  //     if (profile.version && profile.version.match(/\b(\w*alpha\w*)\b/g)) {
-        versionWarning = yo`<small title="Version Alpha" class="badge-light ${css.versionBadge}">alpha</small>`
+  //       versionWarning = yo`<small title="Version Alpha" class="badge-light ${css.versionBadge}">alpha</small>`
-      }
+  //     }
-      // Beta
+  //     // Beta
-      if (profile.version && profile.version.match(/\b(\w*beta\w*)\b/g)) {
+  //     if (profile.version && profile.version.match(/\b(\w*beta\w*)\b/g)) {
-        versionWarning = yo`<small title="Version Beta" class="badge-light ${css.versionBadge}">beta</small>`
+  //       versionWarning = yo`<small title="Version Beta" class="badge-light ${css.versionBadge}">beta</small>`
-      }
+  //     }
-    }
+  //   }
 
-    const header = yo`
+  //   const header = yo`
-      <header class="${css.swapitHeader}">
+  //     <header class="${css.swapitHeader}">
-        <h6 class="${css.swapitTitle}" data-id="sidePanelSwapitTitle">${name}</h6>
+  //       <h6 class="${css.swapitTitle}" data-id="sidePanelSwapitTitle">${name}</h6>
-        ${docLink}
+  //       ${docLink}
-        ${versionWarning}
+  //       ${versionWarning}
-      </header>
+  //     </header>
-    `
+  //   `
-    yo.update(this.header, header)
+  //   yo.update(this.header, header)
-  }
+  //   this.renderComponent()
+  // }
 
   render () {
-    return yo`
+    return this.element
-      <section class="${css.panel} plugin-manager">
+    // return yo`
-        ${this.header}
+    //   <section class="${css.panel} plugin-manager">
-        <div class="${css.pluginsContainer}">
+    //     ${this.header}
-          ${this.element}
+    //     <div class="${css.pluginsContainer}">
-        </div>
+    //       ${this.element}
-      </section>`
+    //     </div>
+    //   </section>`
+  }
+
+  renderComponent () {
+    ReactDOM.render(
+      <RemixUiSidePanel
+        plugin={this}
+      />,
+      this.sideelement
+    )
   }
 }

libs/remix-ui/abstract-panel/src/lib/remix-ui-abstract-panel.module.css

@@ -13,8 +13,4 @@
 }
 .plugItIn.active     {
   display        : block;
-}
-.pluginsContainer {
-  height         : 100%;
-  overflow-y     : hidden;
 }

libs/remix-ui/abstract-panel/src/lib/remix-ui-abstract-panel.tsx

@@ -22,13 +22,14 @@ export function RemixUiAbstractPanel(props: RemixUiAbstractPanelProps) {
         view.addEventListener('load', () => {
           setLoading(true)
         })
-        setLoading(false)
+       
       })
+      setLoading(false)
     }
   , [loading])
 
   return (
-    <div id="plugins" className="plugins">
+    <div id="plugins">
       {
         Object.keys(props.plugin.contents).map((key: string, index: number) => {
           
@@ -37,7 +38,7 @@ export function RemixUiAbstractPanel(props: RemixUiAbstractPanelProps) {
           console.log({ plugin: plugin.id, active: props.plugin.active })
 
           return (
-            <div className="plugItIn" key={ index }>
+            <div key={ index }>
               {loading && (
                  <div className="d-flex justify-content-center align-items-center">
                  <div className="spinner-border" role="status">

libs/remix-ui/main-panel/src/lib/remix-ui-main-panel.module.css

@@ -14,13 +14,13 @@
   .plugItIn.active     {
     display        : block;
   }
-  /* .pluginsContainer {
+  .pluginsContainer {
     height         : 100%;
     overflow-y     : hidden;
-  } */
+  }
 
-  .pluginsContainer {
+  /* .pluginsContainer {
     height: 100%;
     display: flex;
     overflow-y: hidden;
-  }
+  } */

libs/remix-ui/main-panel/src/lib/remix-ui-main-panel.tsx

@@ -18,7 +18,6 @@ export const RemixUiMainPanel = (props: RemixUiMainPanelProps) =>  {
 
 
   return (
-    <div className="plugItIn pluginsContainer" style={{ display: "block" }} data-id="mainPanelPluginsContainer" id='mainPanelPluginsContainer-id'>
     <div data-id="landingPageHomeContainer" className="homeContainer d-flex" style={{ height: "100%", width: "100%", border: "0px", display: "block" }}>
             <div className="mainContent_2A2Ew bg-light">
           <div className="d-flex justify-content-between">
@@ -113,8 +112,7 @@ export const RemixUiMainPanel = (props: RemixUiMainPanelProps) =>  {
           </div>
        </div>
     </div>
- </div>
+  )
-  );
 }
 
 export default RemixUiMainPanel;

libs/remix-ui/side-panel/.babelrc

@@ -0,0 +1,12 @@
+{
+  "presets": [
+    [
+      "@nrwl/react/babel",
+      {
+        "runtime": "automatic",
+        "useBuiltIns": "usage"
+      }
+    ]
+  ],
+  "plugins": []
+}

libs/remix-ui/side-panel/.eslintrc.json

@@ -0,0 +1,18 @@
+{
+  "extends": ["plugin:@nrwl/nx/react", "../../../.eslintrc.json"],
+  "ignorePatterns": ["!**/*"],
+  "overrides": [
+    {
+      "files": ["*.ts", "*.tsx", "*.js", "*.jsx"],
+      "rules": {}
+    },
+    {
+      "files": ["*.ts", "*.tsx"],
+      "rules": {}
+    },
+    {
+      "files": ["*.js", "*.jsx"],
+      "rules": {}
+    }
+  ]
+}

libs/remix-ui/side-panel/README.md

@@ -0,0 +1,7 @@
+# remix-ui-side-panel
+
+This library was generated with [Nx](https://nx.dev).
+
+## Running unit tests
+
+Run `nx test remix-ui-side-panel` to execute the unit tests via [Jest](https://jestjs.io).

libs/remix-ui/side-panel/src/index.ts

@@ -0,0 +1 @@
+export * from './lib/remix-ui-side-panel';

libs/remix-ui/side-panel/src/lib/remix-ui-side-panel.module.css

@@ -0,0 +1,43 @@
+.panel {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    flex: auto;
+  }
+  .swapitTitle {
+    margin: 0;
+    text-transform: uppercase;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+  .swapitTitle i{
+    padding-left: 6px;
+    font-size: 14px;
+  }
+  .remix-ui-side-panel-swapitHeader {
+    display: flex;
+    align-items: center;
+    padding: 16px 24px 15px;
+    justify-content: space-between;
+  }
+  .icons i {
+    height: 80%;
+    cursor: pointer;
+  }
+  .pluginsContainer {
+    height: 100%;
+    overflow-y: auto;
+  }
+  .titleInfo {
+    padding-left: 10px;
+  }
+  .versionBadge {
+    background-color: var(--light);
+    padding: 0 7px;
+    font-weight: bolder;
+    margin-left: 5px;
+    text-transform: lowercase;
+    cursor: default;
+  }

libs/remix-ui/side-panel/src/lib/remix-ui-side-panel.tsx

@@ -0,0 +1,75 @@
+import React, { useEffect, useState } from 'react' // eslint-disable-line
+import parse from 'html-react-parser'
+import './remix-ui-side-panel.module.css';
+
+/* eslint-disable-next-line */
+export interface RemixUiSidePanelProps {
+  plugin: any
+}
+
+export function RemixUiSidePanel(props: RemixUiSidePanelProps) {
+  const [view, setView] = useState('')
+  const [dockLink, setDockLink] = useState(false)
+  const [versionWarning, setVersionWarning] = useState(false)
+  const [profile, setProfile] = useState('')
+  const [profileDocsLink, setProfileDocsLink] = useState('')
+  const [name, setName] = useState(' - ')
+
+  useEffect(() => {
+    console.log({ props: props.plugin })
+    Object.keys(props.plugin.contents).map((key: string, index: number) => {
+      console.log({ key })
+      const active = props.plugin.active === key
+      if (active) {
+        const plugin = props.plugin.contents[key]
+        setView(plugin.innerHTML)
+      }
+    })  
+  }, [props.plugin.contents])
+
+  const getProfile  = async () => {
+    if (props.plugin.active) {
+      const profile =  await props.plugin.appManager.getProfile(props.plugin.active)
+      setProfileDocsLink(profile.documentation)
+      profile.displayName ? setName(profile.displayName) : setName(profile.name)
+      profile.documentation ? setDockLink(true) : setDockLink(false)
+      if (profile.version && profile.version.match(/\b(\w*alpha\w*)\b/g)) {
+        setVersionWarning(true)
+      }
+      // Beta
+      if (profile.version && profile.version.match(/\b(\w*beta\w*)\b/g)) {
+        setVersionWarning(true)
+      }
+    }
+  }
+
+  const renderHeader =  () => {
+    getProfile()
+   return (
+    <header className="remix-ui-side-panel-swapitHeader" style={{
+    display: 'flex',
+    alignItems: "center",
+    padding: '16px 24px 15px',
+    justifyContent: "space-between"
+    }}>
+    <h6 className="swapitTitle" data-id="sidePanelSwapitTitle">{name}</h6>
+    {dockLink ? (<a href={profileDocsLink} className="${css.titleInfo}" title="link to documentation" target="_blank" rel="noreferrer"><i aria-hidden="true" className="fas fa-book"></i></a>) : ''}
+    {/* {versionWarning ? (<small title="Version Alpha" className="badge-light versionBadge">alpha</small>) : (<small title="Version Beta" className="badge-light versionBadge">beta</small>)} */}
+  </header>
+   )
+  }
+
+
+  return (
+            <section>
+              {renderHeader()}
+              <div className="pluginsContainer" style={{
+                    height: "100%",
+                    overflowY: "auto"
+              }}>
+              </div>
+            </section>
+  );
+}
+
+export default RemixUiSidePanel;

libs/remix-ui/side-panel/tsconfig.json

@@ -0,0 +1,20 @@
+{
+  "extends": "../../../tsconfig.base.json",
+  "compilerOptions": {
+    "jsx": "react-jsx",
+    "allowJs": true,
+    "esModuleInterop": true,
+    "allowSyntheticDefaultImports": true,
+    "forceConsistentCasingInFileNames": true,
+    "strict": true,
+    "noImplicitReturns": true,
+    "noFallthroughCasesInSwitch": true
+  },
+  "files": [],
+  "include": [],
+  "references": [
+    {
+      "path": "./tsconfig.lib.json"
+    }
+  ]
+}

libs/remix-ui/side-panel/tsconfig.lib.json

@@ -0,0 +1,13 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../../dist/out-tsc",
+    "types": ["node"]
+  },
+  "files": [
+    "../../../node_modules/@nrwl/react/typings/cssmodule.d.ts",
+    "../../../node_modules/@nrwl/react/typings/image.d.ts"
+  ],
+  "exclude": ["**/*.spec.ts", "**/*.spec.tsx"],
+  "include": ["**/*.js", "**/*.jsx", "**/*.ts", "**/*.tsx"]
+}

nx.json

@@ -144,6 +144,9 @@
     },
     "remix-ui-abstract-panel": {
       "tags": []
+    },
+    "remix-ui-side-panel": {
+      "tags": []
     }
   },
   "targetDependencies": {

tsconfig.base.json

@@ -69,6 +69,7 @@
       "@remix-ui/helper": ["libs/remix-ui/helper/src/index.ts"],
       "@remix-ui/vertical-icons-panel": ["libs/remix-ui/vertical-icons-panel/src/index.ts"],
       "@remix-ui/main-panel": ["libs/remix-ui/main-panel/src/index.ts"],
+      "@remix-ui/abstract-panel": ["libs/remix-ui/abstract-panel/src/index.ts"],
       "@remix-ui/side-panel": ["libs/remix-ui/side-panel/src/index.ts"]
     }
   },

workspace.json

@@ -1160,7 +1160,25 @@
           "options": {
             "linter": "eslint",
             "tsConfig": ["libs/remix-ui/abstract-panel/tsconfig.lib.json"],
-            "exclude": ["**/node_modules/**", "!libs/remix-ui/abstract-panel/**/*"]
+            "exclude": [
+              "**/node_modules/**",
+              "!libs/remix-ui/abstract-panel/**/*"
+            ]
+          }
+        }
+      }
+    },
+    "remix-ui-side-panel": {
+      "root": "libs/remix-ui/side-panel",
+      "sourceRoot": "libs/remix-ui/side-panel/src",
+      "projectType": "library",
+      "architect": {
+        "lint": {
+          "builder": "@nrwl/linter:eslint",
+          "options": {
+            "lintFilePatterns": [
+              "libs/remix-ui/side-panel/**/*.{ts,tsx,js,jsx}"
+            ]
           }
         }
       }