create more components

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

@@ -53,7 +53,7 @@ const css = csjs`
   }
   .isStuck {
     background-color: var(--primary);
-    color: 
+    color:
   }
   .versionWarning {
     padding: 4px;
@@ -146,22 +146,22 @@ class PluginManagerComponent extends ViewPlugin {
       </button>`
 
     return yo`
-      <article id="remixPluginManagerListItem_${profile.name}" class="list-group-item py-1 mb-1 plugins-list-group-item" title="${displayName}" >
-        <div class="${css.row} justify-content-between align-items-center mb-2">
-          <h6 class="${css.displayName} plugin-name">
-            <div>
-              ${displayName}
-              ${doclink}
-              ${versionWarning}
-            </div>
-            ${activationButton}
-          </h6>
+    <article id="remixPluginManagerListItem_${profile.name}" class="list-group-item py-1 mb-1 plugins-list-group-item" title="${displayName}" >
+    <div class="${css.row} justify-content-between align-items-center mb-2">
+      <h6 class="${css.displayName} plugin-name">
+        <div>
+          ${displayName}
+          ${doclink}
+          ${versionWarning}
         </div>
-        <div class="${css.description} d-flex text-body plugin-text mb-2">
-          <img src="${profile.icon}" class="mr-1 mt-1 ${css.pluginIcon}" />
-          <span class="${css.descriptiontext}">${profile.description}</span>
-        </div>
-      </article>
+        ${activationButton}
+      </h6>
+    </div>
+    <div class="${css.description} d-flex text-body plugin-text mb-2">
+      <img src="${profile.icon}" class="mr-1 mt-1 ${css.pluginIcon}" />
+      <span class="${css.descriptiontext}">${profile.description}</span>
+    </div>
+  </article>
     `
   }
 

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

+export type PluginManagerSettings = {
+  openDialog: () => void
+  onValidation: () => void
+  clearPermission: (from: any, to: any, method: any) => void
+  settings: () => HTMLElement
+  render: () => HTMLElement
+}

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

+import React from 'react'
+
+type tileLabel = {
+  label: 'Active Module' | 'Inactive Modules'
+}
+
+interface ActiveTileProps {
+  inactivesCount?: number
+  activesCount?: number
+  tileLabel?: tileLabel
+}
+
+function ActiveTile ({ inactivesCount, activesCount, tileLabel }: ActiveTileProps) {
+  return (
+    <nav className="plugins-list-header justify-content-between navbar navbar-expand-lg bg-light navbar-light align-items-center">
+      <span className="navbar-brand plugins-list-title h6 mb-0 mr-2">{tileLabel.label}</span>
+      <span className="badge badge-primary" style={{ cursor: 'default' }} data-id="pluginManagerComponentInactiveTilesCount">
+        {tileLabel.label === 'Active Module' ? activesCount : inactivesCount}
+      </span>
+    </nav>
+  )
+}
+
+export default ActiveTile

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

-import React, { useState } from 'react'
+import React from 'react'
 
 interface ButtonProps {
   profileName: string
   deactivatePlugin?: (name: string) => {}
   activatePlugin?: (name: string) => {}
+  isActive: boolean
   buttonText?: string
 }
 
 function Button ({ profileName, deactivatePlugin, buttonText }: ButtonProps) {
-  const [isActive, toggleIsActive] = useState(false)
   const dataId = `pluginManagerComponentDeactivateButton${profileName}`
 
   return (
@@ -21,3 +21,4 @@ function Button ({ profileName, deactivatePlugin, buttonText }: ButtonProps) {
     </button>
   )
 }
+export default Button

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

+import React from 'react'
+import '../remix-ui-plugin-manager.css'
+import ''
+import Button from './button'
+interface PluginCardProps {
+  profileName: string
+  displayName: string
+  docLink: string
+  versionWarning: string
+  profileIcon: string
+  profileDescription: string
+}
+
+function PluginCard ({
+  profileName,
+  displayName,
+  docLink,
+  versionWarning,
+  profileIcon,
+  profileDescription
+}: PluginCardProps) {
+  return (
+    <article className="list-group-item py-1 mb-1 plugins-list-group-item" title={displayName}>
+      <div className="row justify-content-between align-items-center mb-2">
+        <h6 className="displayName plugin-name">
+          <div>
+            {displayName}
+            {docLink}
+            {versionWarning}
+          </div>
+          <Button
+            profileName={profileName}
+            isActive
+          />
+        </h6>
+      </div>
+      <div className="description d-flex text-body plugin-text mb-2">
+        <img src={profileIcon} className="mr-1 mt-1 pluginIcon" alt="profile icon"/>
+        <span className="descriptiontext">{profileDescription}</span>
+      </div>
+    </article>
+  )
+}
+
+export default PluginCard

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

+import React from 'react'
+
+function RootView () {
+  return (
+    <div>
+      <header></header>
+    </div>
+  )
+}
+
+export default RootView

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

 import React from 'react'
-import * as packageJson from '../../../../../package.json'
 
 import './remix-ui-plugin-manager.css';
 
@@ -14,7 +13,7 @@ export interface RemixUiPluginManagerProps {
   kind: 'settings',
   location: 'sidePanel',
   documentation: 'https://remix-ide.readthedocs.io/en/latest/plugin_manager.html',
-  version: packageJson.version
+  version: string
 }
 
 export const RemixUiPluginManager = (props: RemixUiPluginManagerProps) => {

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

+/* eslint-disable camelcase */
+
+declare module 'yo-yo'{
+  interface yo_yo {
+    (strings:string[], ...values:any[]):HTMLElement;
+    update(element:HTMLElement, element2:HTMLElement);
+  }
+  var yo:yo_yo
+  export = yo;
+}
+
+declare module 'dom-css'{
+ interface dom_css{
+   (element:HTMLElement, css:any):void;
+ }
+
+ var css:dom_css
+ export = css;
+}