generate types to align remixuipluginmanager props

pull/1344/head
joseph izang 3 years ago
parent 3047f8203c
commit 2f62e81069
  1. 30
      app/ui/modal-dialog-custom.d.ts
  2. 7
      app/ui/modaldialog.d.ts
  3. 36
      app/ui/persmission-handler.d.ts
  4. 2
      app/ui/styles/modal-dialog-custom-styles.d.ts
  5. 2
      app/ui/styles/modaldialog-styles.d.ts
  6. 2
      app/ui/styles/tooltip-styles.d.ts
  7. 2
      app/ui/tooltip.d.ts
  8. 44
      apps/remix-ide/src/app/components/plugin-manager-component.js
  9. 9
      global/registry.d.ts
  10. 7
      lib/query-params.d.ts
  11. 6
      libs/remix-ui/plugin-manager/src/customTypes.ts
  12. 7
      libs/remix-ui/plugin-manager/src/lib/components/activeTile.tsx
  13. 12
      libs/remix-ui/plugin-manager/src/lib/components/listGroupItem.tsx
  14. 2
      libs/remix-ui/plugin-manager/src/lib/components/pluginCard.tsx
  15. 36
      libs/remix-ui/plugin-manager/src/lib/components/pluginManagerProvider.tsx
  16. 54
      libs/remix-ui/plugin-manager/src/lib/components/renderItem.tsx
  17. 15
      libs/remix-ui/plugin-manager/src/lib/components/rootView.tsx
  18. 82
      libs/remix-ui/plugin-manager/src/lib/remix-ui-plugin-manager.tsx
  19. 56
      libs/remix-ui/plugin-manager/src/types.d.ts
  20. 10
      registry.d.ts

@ -0,0 +1,30 @@
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;
};

@ -0,0 +1,7 @@
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;

@ -0,0 +1,36 @@
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;
}

@ -0,0 +1,2 @@
export = css;
declare var css: any;

@ -0,0 +1,2 @@
export = css;
declare var css: any;

@ -0,0 +1,2 @@
export = css;
declare var css: any;

@ -0,0 +1,2 @@
declare function _exports(tooltipText: string, action?: Function, opts: any): any;
export = _exports;

@ -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()

@ -0,0 +1,9 @@
declare const _exports: {
state: {};
put({ api, name }: {
api: any;
name: any;
}): any;
get(name: any): any;
};
export = _exports;

@ -0,0 +1,7 @@
export = QueryParams;
declare function QueryParams(_window: any): void;
declare class QueryParams {
constructor(_window: any);
get: () => {};
update: (params: any) => void;
}

@ -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 = {

@ -1,13 +1,10 @@
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) {

@ -1,18 +1,22 @@
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>
)

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

@ -1,36 +0,0 @@
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

@ -0,0 +1,54 @@
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

@ -1,5 +1,5 @@
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>

@ -1,22 +1,92 @@
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>
)
}

@ -1,3 +1,7 @@
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 { }

10
registry.d.ts vendored

@ -0,0 +1,10 @@
declare class registry {
state: {};
put({ api, name }: {
api: any;
name: any;
}): any
get(name: any): any;
}
export = registry;
Loading…
Cancel
Save