basic react component to show in plugin manager

apps/remix-ide/src/app/components/plugin-manager-settings.js

@@ -2,8 +2,8 @@ const yo = require('yo-yo')
 const csjs = require('csjs-inject')
 const modalDialog = require('../ui/modaldialog')
 
-const css = csjs` 
-.permissions {
+const css = csjs`
+.remixui_permissions {
   position: sticky;
   bottom: 0;
   display: flex;

libs/remix-ui/plugin-manager/src/index.ts

-export * from './lib/remix-ui-plugin-manager';
+export * from './lib/remix-ui-plugin-manager'

libs/remix-ui/plugin-manager/src/lib/components/pluginManagerProvider.tsx

+import React, { createContext, useState } from 'react'
+import { Profile } from '../../customTypes'
+import * as packageJson from '../../../../../../package.json'
+// export interface RemixUiPluginManagerProps {
+//   activatePlugin: (name: string) => void
+//   deActivatePlugin: (name: string) => void
+//   isActive: () => void
+//   openLocalPlugin: () => Promise<void>
+//   filterPlugins: () => void
+//   reRender: () => void
+//   profile: Profile
+// }
+
+export const PluginManagerContext = createContext({})
+
+function PluginManagerContextProvider ({ children }) {
+  const [profile] = useState<Profile>({
+    name: 'pluginManager',
+    displayName: 'Plugin manager',
+    methods: [],
+    events: [],
+    icon: 'assets/img/pluginManager.webp',
+    description: 'Start/stop services, modules and plugins',
+    kind: 'settings',
+    location: 'sidePanel',
+    documentation: 'https://remix-ide.readthedocs.io/en/latest/plugin_manager.html',
+    version: packageJson.version
+  })
+  return (
+    <PluginManagerContext.Provider value={profile}>
+      {children}
+    </PluginManagerContext.Provider>
+  )
+}
+
+export default PluginManagerContextProvider

libs/remix-ui/plugin-manager/src/lib/remix-ui-plugin-manager.css

-.pluginSearch {
+.remixui_pluginSearch {
   display: flex;
   flex-direction: column;
   align-items: center;
@@ -9,42 +9,42 @@
   z-index: 2;
   margin-bottom: 0px;
 }
-.pluginSearchInput {
+.remixui_pluginSearchInput {
   height: 38px;
 }
-.pluginSearchButton {
+.remixui_pluginSearchButton {
   font-size: 13px;
 }
-.displayName {
+.remixui_displayName {
   width: 100%;
   display: flex;
   align-items: center;
   justify-content: space-between;
 }
-.pluginIcon {
+.remixui_pluginIcon {
   height: 0.7rem;
   width: 0.7rem;
   filter: invert(0.5);
 }
-.description {
+.remixui_description {
   font-size: 13px;
   line-height: 18px;
 }
-.descriptiontext {
+.remixui_descriptiontext {
   display: block;
 }
-.descriptiontext:first-letter {
+.remixui_descriptiontext:first-letter {
   text-transform: uppercase;
 }
-.row {
+.remixui_row {
   display: flex;
   flex-direction: row;
 }
-.isStuck {
+.remixui_isStuck {
   background-color: var(--primary);
   /* color:  */
 }
-.versionWarning {
+.remixui_versionWarning {
   padding: 4px;
   margin: 0 8px;
   font-weight: 700;
@@ -55,3 +55,42 @@
   border: 1px solid;
   border-radius: 2px;
 }
+
+.remixui_permissions {
+  position: sticky;
+  bottom: 0;
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+  padding: 5px 20px;
+}
+.remixui_permissions button {
+  padding: 2px 5px;
+  cursor: pointer;
+}
+.remixui_permissionForm h4 {
+  font-size: 1.3rem;
+  text-align: center;
+}
+.remixui_permissionForm h6 {
+  font-size: 1.1rem;
+}
+.remixui_permissionForm hr {
+  width: 80%;
+}
+.remixui_permissionKey {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+.remixui_permissionKey i {
+  cursor: pointer;
+}
+.remixui_checkbox {
+  display: flex;
+  align-items: center;
+}
+.remixui_checkbox label {
+  margin: 0;
+  font-size: 1rem;
+}

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

@@ -20,5 +20,3 @@ export const RemixUiPluginManager = (props: RemixUiPluginManagerProps) => {
     </div>
   )
 }
-
-export default RemixUiPluginManager