generate types to align remixuipluginmanager props

app/ui/modal-dialog-custom.d.ts

+export function alert(title: any, text: any): {
+    container: HTMLElement;
+    okListener: () => void;
+    cancelListener: () => void;
+    hide: () => void;
+};
+export function prompt(title: any, text: any, inputValue: any, ok: any, cancel: any, focus: any): void;
+export function promptPassphrase(title: any, text: any, inputValue: any, ok: any, cancel: any): void;
+export function promptPassphraseCreation(ok: any, cancel: any): {
+    container: HTMLElement;
+    okListener: () => void;
+    cancelListener: () => void;
+    hide: () => void;
+};
+export function promptMulti({ title, text, inputValue }: {
+    title: any;
+    text: any;
+    inputValue: any;
+}, ok: any, cancel: any): {
+    container: HTMLElement;
+    okListener: () => void;
+    cancelListener: () => void;
+    hide: () => void;
+};
+export function confirm(title: any, text: any, ok: any, cancel: any): {
+    container: HTMLElement;
+    okListener: () => void;
+    cancelListener: () => void;
+    hide: () => void;
+};

app/ui/modaldialog.d.ts

+declare function _exports(title: any, content: any, ok: any, cancel: any, focusSelector: any, opts: any): {
+    container: HTMLElement;
+    okListener: () => void;
+    cancelListener: () => void;
+    hide: () => void;
+};
+export = _exports;

app/ui/persmission-handler.d.ts

+export class PermissionHandler {
+    permissions: any;
+    currentVersion: number;
+    _getFromLocal(): any;
+    persistPermissions(): void;
+    clear(): void;
+    /**
+     * Show a message to ask the user for a permission
+     * @param {PluginProfile} from The name and hash of the plugin that make the call
+     * @param {ModuleProfile} to The name of the plugin that receive the call
+     * @param {string} method The name of the function to be called
+     * @param {string} message from the caller plugin to add more details if needed
+     * @returns {Promise<{ allow: boolean; remember: boolean }} Answer from the user to the permission
+     */
+    openPermission(from: any, to: any, method: string, message: string): Promise<{
+        allow: boolean;
+        remember: boolean;
+    }>;
+    /**
+     * Check if a plugin has the permission to call another plugin and askPermission if needed
+     * @param {PluginProfile} from the profile of the plugin that make the call
+     * @param {ModuleProfile} to The profile of the module that receive the call
+     * @param {string} method The name of the function to be called
+     * @param {string} message from the caller plugin to add more details if needed
+     * @returns {Promise<boolean>}
+     */
+    askPermission(from: any, to: any, method: string, message: string): Promise<boolean>;
+    /**
+     * The permission form
+     * @param {PluginProfile} from The name and hash of the plugin that make the call
+     * @param {ModuleProfile} to The name of the plugin that receive the call
+     * @param {string} method The name of te methode to be called
+     * @param {string} message from the caller plugin to add more details if needed
+     */
+    form(from: any, to: any, method: string, message: string): any;
+}

app/ui/styles/modal-dialog-custom-styles.d.ts

+export = css;
+declare var css: any;

app/ui/styles/modaldialog-styles.d.ts

+export = css;
+declare var css: any;

app/ui/styles/tooltip-styles.d.ts

+export = css;
+declare var css: any;

app/ui/tooltip.d.ts

+declare function _exports(tooltipText: string, action?: Function, opts: any): any;
+export = _exports;

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

@@ -92,7 +92,7 @@ const profile = {
 class PluginManagerComponent extends ViewPlugin {
   constructor (appManager, engine) {
     super(profile)
-    // this.event = new EventEmitter()
+    // this.event = new EventEmitter() //already exists in engine so not needed here
     // this.appManager = appManager
     // this.engine = engine
     this.htmlElement = document.createElement('div')
@@ -120,15 +120,15 @@ class PluginManagerComponent extends ViewPlugin {
   //   return this.appManager.actives.includes(name)
   // }
 
-  // activateP (name) {
-  //   this.appManager.activatePlugin(name)
-  //   _paq.push(['trackEvent', 'manager', 'activate', name])
-  // }
+  activateP (name) {
+    this.appManager.activatePlugin(name)
+    _paq.push(['trackEvent', 'manager', 'activate', name])
+  }
 
-  // deactivateP (name) {
-  //   this.call('manager', 'deactivatePlugin', name)
-  //   _paq.push(['trackEvent', 'manager', 'deactivate', name])
-  // }
+  deactivateP (name) {
+    this.call('manager', 'deactivatePlugin', name)
+    _paq.push(['trackEvent', 'manager', 'deactivate', name])
+  }
 
   // renderItem (profile) {
   //   const displayName = (profile.displayName) ? profile.displayName : profile.name
@@ -206,23 +206,17 @@ class PluginManagerComponent extends ViewPlugin {
     }
   }
 
-  // // return this.htmlElement()
-
-  // // render () {
-  // //   return this.htmlElement()
-  // // }
-
   render () {
-    // // Filtering helpers
-    //   const isFiltered = (profile) => (profile.displayName ? profile.displayName : profile.name).toLowerCase().includes(this.filter)
-    //   const isNotRequired = (profile) => !this.appManager.isRequired(profile.name)
-    //   const isNotDependent = (profile) => !this.appManager.isDependent(profile.name)
-    //   const isNotHome = (profile) => profile.name !== 'home'
-    //   const sortByName = (profileA, profileB) => {
-    //     const nameA = ((profileA.displayName) ? profileA.displayName : profileA.name).toUpperCase()
-    //     const nameB = ((profileB.displayName) ? profileB.displayName : profileB.name).toUpperCase()
-    //     return (nameA < nameB) ? -1 : (nameA > nameB) ? 1 : 0
-    //   }
+    // Filtering helpers
+    const isFiltered = (profile) => (profile.displayName ? profile.displayName : profile.name).toLowerCase().includes(this.filter)
+    const isNotRequired = (profile) => !this.appManager.isRequired(profile.name)
+    const isNotDependent = (profile) => !this.appManager.isDependent(profile.name)
+    const isNotHome = (profile) => profile.name !== 'home'
+    const sortByName = (profileA, profileB) => {
+      const nameA = ((profileA.displayName) ? profileA.displayName : profileA.name).toUpperCase()
+      const nameB = ((profileB.displayName) ? profileB.displayName : profileB.name).toUpperCase()
+      return (nameA < nameB) ? -1 : (nameA > nameB) ? 1 : 0
+    }
 
     //   // Filter all active and inactive modules that are not required
     //   const { actives, inactives } = this.appManager.getAll()

global/registry.d.ts

+declare const _exports: {
+    state: {};
+    put({ api, name }: {
+        api: any;
+        name: any;
+    }): any;
+    get(name: any): any;
+};
+export = _exports;

lib/query-params.d.ts

+export = QueryParams;
+declare function QueryParams(_window: any): void;
+declare class QueryParams {
+    constructor(_window: any);
+    get: () => {};
+    update: (params: any) => void;
+}

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

@@ -16,7 +16,11 @@ export type Profile = {
   kind: 'settings',
   location: 'sidePanel',
   documentation: 'https://remix-ide.readthedocs.io/en/latest/plugin_manager.html',
-  version: string
+  version: any
+}
+
+export type TileLabel = {
+  label: 'Active Module' | 'Inactive Modules'
 }
 
 export type LocalPlugin = {

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

 import React from 'react'
-
-type tileLabel = {
-  label: 'Active Module' | 'Inactive Modules'
-}
+import { TileLabel } from '../../customTypes'
 
 interface ActiveTileProps {
   inactivesCount?: number
   activesCount?: number
-  tileLabel?: tileLabel
+  tileLabel?: TileLabel
 }
 
 function ActiveTile ({ inactivesCount, activesCount, tileLabel }: ActiveTileProps) {

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

 import React from 'react'
 import { Profile } from '../../customTypes'
+import RenderItem from './renderItem'
 
 interface ListGroupItemProps {
   activeProfiles: Profile[]
   inactiveProfiles: Profile[]
-  renderItem: (profile: Profile) => void
 }
 
-function ListGroupItem ({ activeProfiles, inactiveProfiles, renderItem }: ListGroupItemProps) {
+function ListGroupItem ({ activeProfiles, inactiveProfiles }: ListGroupItemProps) {
   return (
     <div className="list-group list-group-flush plugins-list-group" data-id="pluginManagerComponentActiveTile">
       { activeProfiles.length > 0
-        ? activeProfiles.map(profile => renderItem(profile))
-        : inactiveProfiles.map(profile => renderItem(profile))
+        ? activeProfiles.map(profile => (
+          <RenderItem profile={profile} />
+        ))
+        : inactiveProfiles.map(profile => (
+          <RenderItem profile={profile}/>
+        ))
       }
     </div>
   )

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

@@ -5,7 +5,7 @@ interface PluginCardProps {
   profileName: string
   displayName: string
   docLink: string
-  versionWarning: string
+  versionWarning: any
   profileIcon: string
   profileDescription: string
 }

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/components/renderItem.tsx

+import React, { useEffect, useState } from 'react'
+import { Profile } from '../../customTypes'
+import PluginCard from './pluginCard'
+
+interface RenderItemProps {
+  profile: Profile
+}
+
+function RenderItem ({ profile }: RenderItemProps) {
+  const [displayName, setDisplayName] = useState('')
+  const [docLink, setDocLink] = useState<any>()
+  const [versionWarning, setVersionWarning] = useState<React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>>()
+
+  useEffect(() => {
+    const checkPluginVersion = (version: string) => {
+      // eslint-disable-next-line @typescript-eslint/no-unused-vars
+      let versionWarning: React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>
+      if (version && version.match(/\b(\w*alpha\w*)\b/g)) {
+        versionWarning = <small title="Version Alpha" className="remixui_versionWarning plugin-version">alpha</small>
+      }
+      // Beta
+      if (version && version.match(/\b(\w*beta\w*)\b/g)) {
+        versionWarning = <small title="Version Beta" className="remixui_versionWarning plugin-version">beta</small>
+      }
+      return versionWarning
+    }
+
+    setDisplayName((profile.displayName) ? profile.displayName : profile.name)
+    setDocLink(
+      profile.documentation ? (
+        <a href={profile.documentation}
+          className="px-1"
+          title="link to documentation"
+          // eslint-disable-next-line react/jsx-no-target-blank
+          target="_blank">
+          <i aria-hidden="true" className="fas fa-book"></i>
+        </a>
+      ) : '')
+    setVersionWarning(checkPluginVersion(profile.version))
+  }, [profile.displayName, profile.documentation, profile.name, profile.version, versionWarning])
+
+  return (
+    <PluginCard
+      displayName={displayName}
+      docLink={docLink}
+      versionWarning={versionWarning}
+      profileDescription={profile.description}
+      profileIcon={profile.icon}
+      profileName={profile.name}
+    />
+  )
+}
+
+export default RenderItem

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

 import React from 'react'
-import { Profile } from '../../customTypes'
+import { Profile, TileLabel } from '../../customTypes'
 import ActiveTile from './activeTile'
 import ListGroupItem from './listGroupItem'
 
@@ -9,7 +9,7 @@ interface RootViewProps {
   inactiveProfiles?: Profile[]
   filterPlugins: () => void
   openLocalPlugins: () => void
-  renderItem: (profile: Profile) => void
+  tileLabel: TileLabel
 }
 
 function RootView ({
@@ -18,20 +18,23 @@ function RootView ({
   inactiveProfiles,
   filterPlugins,
   openLocalPlugins,
-  renderItem
+  tileLabel
 }: RootViewProps) {
   return (
     <div id="pluginManager" data-id="pluginManagerComponentPluginManager">
-      <header className="form-group pluginSearch plugins-header py-3 px-4 border-bottom" data-id="pluginManagerComponentPluginManagerHeader">
+      <header className="form-group remixui_pluginSearch plugins-header py-3 px-4 border-bottom" data-id="pluginManagerComponentPluginManagerHeader">
         <input type="text" className="form-control" placeholder="Search" data-id="pluginManagerComponentSearchInput" />
         <button className="btn btn-secondary text-dark border-0" data-id="pluginManagerComponentPluginSearchButton">{localPluginButtonText}</button>
       </header>
       <section data-id="pluginManagerComponentPluginManagerSection">
-        <ActiveTile />
+        <ActiveTile
+          activesCount={activeProfiles.length}
+          inactivesCount={inactiveProfiles.length}
+          tileLabel={tileLabel}
+        />
         <ListGroupItem
           activeProfiles={activeProfiles}
           inactiveProfiles={inactiveProfiles}
-          renderItem={renderItem}
         />
       </section>
     </div>

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

-import React from 'react'
+import React, { createContext, useEffect, useState } from 'react'
 import { Profile } from '../customTypes'
+import { RemixAppManager, RemixEngine, _Paq } from '../types'
+import RootView from './components/rootView'
 import './remix-ui-plugin-manager.css'
 
 /* eslint-disable-next-line */
 export interface RemixUiPluginManagerProps {
+  appManager: RemixAppManager
+  engine: RemixEngine
+  _paq: _Paq
+  filter: string
   activatePlugin: (name: string) => void
   deActivatePlugin: (name: string) => void
-  isActive: () => void
+  isActive: (name: string) => void
   openLocalPlugin: () => Promise<void>
   filterPlugins: () => void
-  reRender: () => void
   profile: Profile
 }
 
+export const PluginManagerContext = createContext({})
+
+function PluginManagerContextProvider ({ children }) {
+  const [globalState] = useState<RemixUiPluginManagerProps>({} as RemixUiPluginManagerProps)
+  return (
+    <PluginManagerContext.Provider value={globalState}>
+      {children}
+    </PluginManagerContext.Provider>
+  )
+}
+
+// // Filtering helpers
+//   const isFiltered = (profile) => (profile.displayName ? profile.displayName : profile.name).toLowerCase().includes(this.filter)
+//   const isNotRequired = (profile) => !this.appManager.isRequired(profile.name)
+//   const isNotDependent = (profile) => !this.appManager.isDependent(profile.name)
+//   const isNotHome = (profile) => profile.name !== 'home'
+//   const sortByName = (profileA, profileB) => {
+//     const nameA = ((profileA.displayName) ? profileA.displayName : profileA.name).toUpperCase()
+//     const nameB = ((profileB.displayName) ? profileB.displayName : profileB.name).toUpperCase()
+//     return (nameA < nameB) ? -1 : (nameA > nameB) ? 1 : 0
+//   }
+
+//   // Filter all active and inactive modules that are not required
+//   const { actives, inactives } = this.appManager.getAll()
+//     .filter(isFiltered)
+//     .filter(isNotRequired)
+//     .filter(isNotDependent)
+//     .filter(isNotHome)
+//     .sort(sortByName)
+//     .reduce(({ actives, inactives }, profile) => {
+//       return this.isActive(profile.name)
+//         ? { actives: [...actives, profile], inactives }
+//         : { inactives: [...inactives, profile], actives }
+//     }, { actives: [], inactives: [] })
+
 export const RemixUiPluginManager = (props: RemixUiPluginManagerProps) => {
+  const [isFiltered] = useState((profile) =>
+    (profile.displayName ? profile.displayName : profile.name).toLowerCase().includes(props.filter))
+  const [isNotRequired, setIsNotRequired] = useState<boolean>(false)
+  const [isNotDependent, setIsNotDependent] = useState((profile) => !props.appManager.isDependent(profile.name))
+  const [isNotHome, setIsNotHome] = useState((profile) => profile.name !== 'home')
+  const [sortByName, setSortByName] = useState<1 | -1 | 0>((profileA, profileB) => {
+    const nameA = ((profileA.displayName) ? profileA.displayName : profileA.name).toUpperCase()
+    const nameB = ((profileB.displayName) ? profileB.displayName : profileB.name).toUpperCase()
+    return (nameA < nameB) ? -1 : (nameA > nameB) ? 1 : 0
+  })
+  const { actives, inactives } = props.appManager.getAll()
+    .filter(isFiltered)
+    .filter(isNotRequired)
+    .filter(isNotDependent)
+    .filter(isNotHome)
+    .sort(sortByName)
+    .reduce(({ actives, inactives }, profile) => {
+      return this.isActive(profile.name)
+        ? { actives: [...actives, profile], inactives }
+        : { inactives: [...inactives, profile], actives }
+    }, { actives: [], inactives: [] })
+  useEffect(() => {
+    const notRequired = (profile: Profile) => !props.appManager.isRequired(profile.name)
+    setIsNotRequired(notRequired(props.profile))
+  })
+
   return (
-    <div>
-      <h1>Welcome to remix-ui-plugin-manager!</h1>
-    </div>
+    <PluginManagerContextProvider>
+      <RootView
+        openLocalPlugins={props.openLocalPlugin}
+        filterPlugins={props.filterPlugins}
+        activeProfiles
+      />
+    </PluginManagerContextProvider>
   )
 }

libs/remix-ui/plugin-manager/src/types.d.ts

+import { PermissionHandler } from './app/ui/persmission-handler'
+import { PluginManager } from '@remixproject/engine/lib/manager'
+import { EventEmitter } from 'events'
+import { Engine } from '@remixproject/engine/lib/engine'
 /* eslint-disable camelcase */
 
 declare module 'yo-yo'{
@@ -17,3 +21,55 @@ declare module 'dom-css'{
  var css:dom_css
  export = css;
 }
+
+interface SetPluginOptionType {
+  queueTimeout: number
+}
+
+export interface _Paq {
+  _paq: Window & typeof globalThis | []
+}
+
+export class RemixEngine extends Engine {
+  event: EventEmitter;
+  setPluginOption ({ name, kind }) : SetPluginOptionType
+  onRegistration (plugin) : void
+}
+
+export function isNative(name: any): any;
+/**
+ * Checks if plugin caller 'from' is allowed to activate plugin 'to'
+ * The caller can have 'canActivate' as a optional property in the plugin profile.
+ * This is an array containing the 'name' property of the plugin it wants to call.
+ * canActivate = ['plugin1-to-call','plugin2-to-call',....]
+ * or the plugin is allowed by default because it is native
+ *
+ * @param {any, any}
+ * @returns {boolean}
+ */
+export function canActivate(from: any, to: any): boolean;
+export class RemixAppManager extends PluginManager {
+  constructor();
+    event: EventEmitter;
+    pluginsDirectory: string;
+    pluginLoader: PluginLoader;
+    permissionHandler: PermissionHandler;
+    getAll(): import('@remixproject/plugin-utils').Profile<any>[];
+    getIds(): string[];
+    isDependent(name: any): any;
+    isRequired(name: any): any;
+    registeredPlugins(): Promise<any>;
+}
+/** @class Reference loaders.
+ *  A loader is a get,set based object which load a workspace from a defined sources.
+ *  (localStorage, queryParams)
+ **/
+declare class PluginLoader {
+  get currentLoader(): any;
+    donotAutoReload: string[];
+    loaders: {};
+    current: string;
+    set(plugin: any, actives: any): void;
+    get(): any;
+}
+export { }

registry.d.ts

+declare class registry {
+  state: {};
+  put({ api, name }: {
+    api: any;
+    name: any;
+  }): any
+
+  get(name: any): any;
+}
+export = registry;