mv & rename

apps/remix-ide/src/app/components/hidden-panel.tsx

@@ -1,13 +1,9 @@
-import React from 'react' // eslint-disable-line
+// eslint-disable-next-line no-use-before-define
+import React from 'react'
+import ReactDOM from 'react-dom' // eslint-disable-line
 import { AbstractPanel } from './panel'
 import * as packageJson from '../../../../../package.json'
-const csjs = require('csjs-inject')
-
-const css = csjs`
-  .pluginsContainer {
-    display: none;
-  }
-`
+import { RemixPanel } from '@remix-ui/panel'
 
 const profile = {
   name: 'hiddenPanel',
@@ -18,22 +14,17 @@ const profile = {
 }
 
 export class HiddenPanel extends AbstractPanel {
+  el: HTMLDivElement
   constructor () {
     super(profile)
-    this.container = document.createElement('div')
+    this.el = document.createElement('div')
   }
 
   render () {
-    return this.container
+    return this.el
   }
 
   renderComponent () {
-    return ReactDOM.render(
-      <div class={css.pluginsContainer}>
-        {this.element}
-      </div>
-      ,
-      this.container
-    )
+    ReactDOM.render(<RemixPanel plugins={this.plugins}/>, this.el)
   }
 }

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

@@ -1,7 +1,7 @@
 import React from 'react' // eslint-disable-line
 import { AbstractPanel } from './panel'
 import ReactDOM from 'react-dom' // eslint-disable-line
-import { RemixPanel } from '@remix-ui/side-panel'
+import { RemixPanel } from '@remix-ui/panel'
 import packageJson from '../../../../../package.json'
 
 const profile = {

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

@@ -1,7 +1,8 @@
-import React from 'react' // eslint-disable-line
+// eslint-disable-next-line no-use-before-define
+import React from 'react'
+import ReactDOM from 'react-dom'
 import { AbstractPanel } from './panel'
-import ReactDOM from 'react-dom' // eslint-disable-line
-import { RemixPanel } from '@remix-ui/side-panel'
+import { RemixPanel } from '@remix-ui/panel'
 import packageJson from '../../../../../package.json'
 import { RemixAppManager } from '../../remixAppManager'
 import { VerticalIcons } from 'libs/remix-ui/vertical-icons-panel/types/vertical-icons-panel'
@@ -87,7 +88,6 @@ export class SidePanel extends AbstractPanel {
   }
 
   renderComponent () {
-    console.log('render side panel')
     ReactDOM.render(<RemixPanel plugins={this.plugins}/>, this.sideelement)
   }
 }

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

@@ -6,7 +6,7 @@ import './panel.css';
 export interface RemixPanelProps {
     plugins: Record<string, PluginRecord>;
   }
-const SidePanelHeader = (props: RemixPanelProps) => {
+const RemixUIPanelHeader = (props: RemixPanelProps) => {
     const [plugin, setPlugin] = useState<PluginRecord>()
 
     useEffect(() => {
@@ -26,4 +26,4 @@ const SidePanelHeader = (props: RemixPanelProps) => {
     </header>)
 }
 
-export default SidePanelHeader
+export default RemixUIPanelHeader

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

@@ -5,7 +5,7 @@ interface panelPLuginProps {
     pluginRecord: PluginRecord
 }
 
-const PanelPlugin = (props: panelPLuginProps) => {
+const RemixUIPanelPlugin = (props: panelPLuginProps) => {
     const sidePanelRef = useRef(null)
     const [view, setView] = useState<JSX.Element | HTMLDivElement>()
     useEffect(() => {
@@ -23,4 +23,4 @@ const PanelPlugin = (props: panelPLuginProps) => {
       return <div className={props.pluginRecord.active? 'plugItIn active':'d-none'} ref={sidePanelRef}>{view}</div>
 }
 
-export default PanelPlugin
+export default RemixUIPanelPlugin

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

@@ -1,7 +1,7 @@
 import React, { useEffect, useState } from 'react' // eslint-disable-line
 import './panel.css';
-import SidePanelHeader from './panel-header';
-import PanelPlugin from './panel-plugin';
+import RemixUIPanelHeader from './panel-header';
+import RemixUIPanelPlugin from './panel-plugin';
 import { PluginRecord } from './types';
 
 /* eslint-disable-next-line */
@@ -13,10 +13,10 @@ export function RemixPanel(props: RemixPanelProps) {
 
   return (
     <div className='panel plugin-manager'>
-      <SidePanelHeader plugins={props.plugins}></SidePanelHeader>
+      <RemixUIPanelHeader plugins={props.plugins}></RemixUIPanelHeader>
       <div className="pluginsContainer">
         {Object.values(props.plugins).map((pluginRecord) => {
-            return <PanelPlugin key={pluginRecord.profile.name} pluginRecord={pluginRecord} />
+            return <RemixUIPanelPlugin key={pluginRecord.profile.name} pluginRecord={pluginRecord} />
         })}
       </div>
     </div>

nx.json

@@ -139,10 +139,7 @@
     "remix-ui-tabs": {
       "tags": []
     },
-    "remix-ui-main-panel": {
-      "tags": []
-    },
-    "remix-ui-side-panel": {
+    "remix-ui-panel": {
       "tags": []
     }
   },

tsconfig.base.json

@@ -68,8 +68,7 @@
       "@remix-ui/tabs": ["libs/remix-ui/tabs/src/index.ts"],
       "@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/side-panel": ["libs/remix-ui/side-panel/src/index.ts"]
+      "@remix-ui/panel": ["libs/remix-ui/panel/src/index.ts"]
     }
   },
   "exclude": ["node_modules", "tmp"]

workspace.json

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