Template Explorer Modal

apps/remix-ide/src/app.ts

@@ -111,6 +111,7 @@ import Terminal from './app/panels/terminal'
 import TabProxy from './app/panels/tab-proxy.js'
 import { Plugin } from '@remixproject/engine'
 import BottomBarPanel from './app/components/bottom-bar-panel'
+import { TemplateExplorerModalPlugin } from './app/plugins/remix-template-explorer-modal'
 
 const _paq = (window._paq = window._paq || [])
 
@@ -157,6 +158,7 @@ class AppComponent {
   popupPanel: PopupPanel
   statusBar: StatusBar
   topBar: Topbar
+  templateExplorerModal: TemplateExplorerModalPlugin
   settings: SettingsTab
   params: any
   desktopClientMode: boolean
@@ -267,6 +269,7 @@ class AppComponent {
     this.gistHandler = new GistHandler()
     // ----------------- theme service ---------------------------------
     this.themeModule = new ThemeModule()
+    this.templateExplorerModal = new TemplateExplorerModalPlugin(this.themeModule)
     // ----------------- locale service ---------------------------------
     this.localeModule = new LocaleModule()
     Registry.getInstance().put({ api: this.themeModule, name: 'themeModule' })
@@ -401,6 +404,8 @@ class AppComponent {
 
     const templateSelection = new TemplatesSelectionPlugin()
 
+    const templateExplorerModal = this.templateExplorerModal
+
     const walletConnect = new WalletConnect()
 
     this.engine.register([
@@ -459,6 +464,7 @@ class AppComponent {
       scriptRunnerUI,
       remixAI,
       remixAiAssistant,
+      templateExplorerModal,
       walletConnect
     ])
 
@@ -611,6 +617,7 @@ class AppComponent {
     await this.appManager.activatePlugin(['mainPanel', 'menuicons', 'tabs'])
     await this.appManager.activatePlugin(['topbar'])
     await this.appManager.activatePlugin(['statusBar'])
+    // await this.appManager.activatePlugin(['remix-template-explorer-modal'])
     await this.appManager.activatePlugin(['bottomBar'])
     await this.appManager.activatePlugin(['sidePanel']) // activating  host plugin separately
     await this.appManager.activatePlugin(['pinnedPanel'])

apps/remix-ide/src/app/plugins/notification.tsx

@@ -1,3 +1,4 @@
+/* eslint-disable @nrwl/nx/enforce-module-boundaries */
 import { Plugin } from '@remixproject/engine'
 import { LibraryProfile, MethodApi, StatusEvents } from '@remixproject/plugin-utils'
 import { AppModal } from '@remix-ui/app'
@@ -10,6 +11,7 @@ interface INotificationApi {
     modal: (args: AppModal) => void
     alert: (args: AlertModal) => void
     toast: (message: string) => void
+
   }
 }
 

apps/remix-ide/src/app/plugins/remix-template-explorer-modal.tsx

@@ -0,0 +1,70 @@
+/* eslint-disable @nrwl/nx/enforce-module-boundaries */
+import React from 'react'
+import { AppAction, AppState } from '@remix-ui/app'
+import { PluginViewWrapper } from '@remix-ui/helper'
+import { Plugin } from '@remixproject/engine'
+import { EventEmitter } from 'events'
+import { ThemeModule } from '../tabs/theme-module'
+import { TemplateExplorerProvider } from 'libs/remix-ui/template-explorer-modal/context/template-explorer-context'
+
+const pluginProfile = {
+  name: 'remix-template-explorer-modal',
+  displayName: 'Remix Generic Modal',
+  description: 'Remix Generic Modal for every type of content meant for a modal',
+  methods: ['openModal']
+}
+
+export class TemplateExplorerModalPlugin extends Plugin {
+  element: HTMLDivElement
+  dispatch: React.Dispatch<any> = () => { }
+  event: any
+  appStateDispatch: any
+  theme: any = null
+  constructor(theme: ThemeModule) {
+    super(pluginProfile)
+    this.element = document.createElement('div')
+    this.element.setAttribute('id', 'template-explorer-modal')
+    this.dispatch = () => { }
+    this.event = new EventEmitter()
+    this.theme = theme
+  }
+
+  async onActivation(): Promise<void> {
+    this.on('theme', 'themeChanged', (theme: any) => {
+      this.theme = theme
+    })
+  }
+
+  onDeactivation(): void {
+    this.element.remove()
+  }
+
+  setDispatch(dispatch: React.Dispatch<any>) {
+    this.dispatch = dispatch
+    this.renderComponent()
+  }
+
+  setAppStateDispatch(appStateDispatch: React.Dispatch<AppAction>) {
+    this.appStateDispatch = appStateDispatch
+  }
+
+  render() {
+    return (
+      <div id="inner-remix-template-explorer-modal">
+        <PluginViewWrapper plugin={this} useAppContext={true} />
+      </div>
+    )
+  }
+
+  renderComponent(): void {
+    this.dispatch({
+      plugins: this,
+    })
+  }
+
+  updateComponent() {
+    return (
+      <TemplateExplorerProvider plugin={this} />
+    )
+  }
+}

apps/remix-ide/src/app/plugins/remixGuide.tsx

@@ -121,7 +121,7 @@ export class RemixGuidePlugin extends ViewPlugin {
             >
               { section.cells.map((cell, index) => {
                 return <RemixUIGridCell
-                  plugin={this}
+                  // plugin={this}
                   title={cell.title}
                   titleTooltip={cell.titleTooltip}
                   tagList={cell.tagList}

apps/remix-ide/src/app/plugins/templates-selection/templates-selection-plugin.tsx

@@ -272,7 +272,7 @@ export class TemplatesSelectionPlugin extends ViewPlugin {
                 if (!item.opts) {
                   return (
                     <RemixUIGridCell
-                      plugin={this}
+                      // plugin={this}
                       title={item.displayName}
                       key={item.name || index}
                       id={item.name}
@@ -353,7 +353,7 @@ export class TemplatesSelectionPlugin extends ViewPlugin {
                 }
               })}
               {template.name === 'Cookbook' && <RemixUIGridCell
-                plugin={this}
+                // plugin={this}
                 title={"More from Cookbook"}
                 key={"cookbookMore"}
                 id={"cookBookMore"}

apps/remix-ide/src/remixAppManager.ts

@@ -95,6 +95,7 @@ let requiredModules = [
   'remixAID',
   'remixaiassistant',
   'topbar',
+  'remix-template-explorer-modal',
   'githubAuthHandler',
   'desktopClient'
 ]
@@ -162,7 +163,8 @@ export function isNative(name) {
     'desktopClient',
     'LearnEth',
     'noir-compiler',
-    'remixaiassistant'
+    'remixaiassistant',
+    'remix-template-explorer-modal'
   ]
   return nativePlugins.includes(name) || requiredModules.includes(name) || isInjectedProvider(name) || isVM(name) || isScriptRunner(name)
 }

libs/remix-ui/app/src/lib/remix-app/actions/app.ts

@@ -1,4 +1,5 @@
 import { branch, desktopConnection, GitHubUser } from '@remix-api';
+import { GenericModal } from '../interface';
 
 type ActionMap<M extends { [index: string]: any }> = {
     [Key in keyof M]: M[Key] extends undefined
@@ -18,6 +19,7 @@ export const enum appActionTypes {
   setCanUseGit = 'SET_CAN_USE_GIT',
   setShowPopupPanel = 'SET_SHOW_POPUP_PANEL',
   setConnectedToDesktop = 'SET_CONNECTED_TO_DESKTOP',
+  showGenericModal = 'SHOW_GENERIC_MODAL',
 }
 
 type AppPayload = {
@@ -26,7 +28,8 @@ type AppPayload = {
   [appActionTypes.setNeedsGitInit]: boolean,
   [appActionTypes.setCanUseGit]: boolean,
   [appActionTypes.setShowPopupPanel]: boolean,
-  [appActionTypes.setConnectedToDesktop]: desktopConnection
+  [appActionTypes.setConnectedToDesktop]: desktopConnection,
+  [appActionTypes.showGenericModal]: boolean
 }
 
 export type AppAction = ActionMap<AppPayload>[keyof ActionMap<

libs/remix-ui/app/src/lib/remix-app/actions/modals.ts

@@ -1,4 +1,4 @@
-import { AppModal } from '../interface'
+import { AppModal, GenericModal } from '../interface'
 
 type ActionMap<M extends { [index: string]: any }> = {
     [Key in keyof M]: M[Key] extends undefined
@@ -16,15 +16,17 @@ export const enum modalActionTypes {
   setToast = 'SET_TOAST',
   processQueue = 'PROCESS_QUEUEU',
   handleHideModal = 'HANDLE_HIDE_MODAL',
-  handleToaster = 'HANDLE_HIDE_TOAST'
+  handleToaster = 'HANDLE_HIDE_TOAST',
+  setTemplateExplorer = 'SET_TEMPLATE_EXPLORER'
 }
 
 type ModalPayload = {
   [modalActionTypes.setModal]: AppModal
   [modalActionTypes.handleHideModal]: any
   [modalActionTypes.setToast]: { message: string | JSX.Element, timestamp: number }
   [modalActionTypes.handleToaster]: any,
-  [modalActionTypes.processQueue]: any
+  [modalActionTypes.processQueue]: any,
+  [modalActionTypes.setTemplateExplorer]: GenericModal
 }
 
 export type ModalAction = ActionMap<ModalPayload>[keyof ActionMap<

libs/remix-ui/app/src/lib/remix-app/context/provider.tsx

@@ -6,15 +6,14 @@ import { modalReducer } from '../reducer/modals'
 import { ModalInitialState } from '../state/modals'
 import { ModalTypes } from '../types'
 import { AppContext, dispatchModalContext, modalContext, platformContext, onLineContext } from './context'
-
 declare global {
   interface Window {
     _intl: IntlShape
   }
 }
 
 export const ModalProvider = ({ children = [], reducer = modalReducer, initialState = ModalInitialState } = {}) => {
-  const [{ modals, toasters, focusModal, focusToaster }, dispatch] = useReducer(reducer, initialState)
+  const [{ modals, toasters, focusModal, focusToaster, focusTemplateExplorer }, dispatch] = useReducer(reducer, initialState)
 
   const onNextFn = async () => {
     dispatch({
@@ -86,7 +85,9 @@ export const ModalProvider = ({ children = [], reducer = modalReducer, initialSt
 
   return (
     <dispatchModalContext.Provider value={{ modal, toast, alert, handleHideModal, handleToaster }}>
-      <modalContext.Provider value={{ modals, toasters, focusModal, focusToaster }}>{children}</modalContext.Provider>
+      <modalContext.Provider value={{ modals, toasters, focusModal, focusToaster, focusTemplateExplorer }}>
+        {children}
+      </modalContext.Provider>
     </dispatchModalContext.Provider>
   )
 }
@@ -109,3 +110,11 @@ export const useDialogs = () => {
 export const useDialogDispatchers = () => {
   return React.useContext(dispatchModalContext)
 }
+
+export const defaultFocusTemplateExplorer = () => {
+  return (
+    <>
+      <p className="fs-3 text-center">Template Explorer</p>
+    </>
+  )
+}

libs/remix-ui/app/src/lib/remix-app/interface/index.ts

@@ -1,5 +1,7 @@
+/* eslint-disable @nrwl/nx/enforce-module-boundaries */
 import { branch, desktopConnection, GitHubUser } from '@remix-api'
 import { AppModalCancelTypes, ModalTypes } from '../types'
+import { Template, TemplateGroup, TemplateOption } from 'libs/remix-ui/workspace/src/lib/utils/constants'
 
 export type ValidationResult = {
     valid: boolean,
@@ -40,7 +42,8 @@ export interface ModalState {
     modals: AppModal[],
     toasters: {message: (string | JSX.Element), timestamp: number }[],
     focusModal: AppModal,
-    focusToaster: {message: (string | JSX.Element), timestamp: number }
+    focusToaster: {message: (string | JSX.Element), timestamp: number },
+    focusTemplateExplorer: GenericModal
 }
 
 export interface forceChoiceModal {
@@ -49,6 +52,47 @@ export interface forceChoiceModal {
   message: string | JSX.Element,
 }
 
+export interface TemplateExplorerGenericData {
+  workspaceName: string,
+  modifyWorkspaceName: boolean,
+  workspaceDescription: string,
+  workspaceTemplateOptions: TemplateOption,
+  workspaceTemplateGroup: TemplateGroup,
+  workspaceTemplate: Template,
+  workspaceTags: string[]
+  searchTerm?: string
+  modifyWorkspace?: boolean
+}
+
+export interface GenericModal {
+  id: string
+  title?: JSX.Element,
+  message: JSX.Element,
+  footer?: JSX.Element,
+  genericData?: any,
+  timestamp?: number
+  hide?: boolean
+  showModal?: boolean
+  validationFn?: (value: string) => ValidationResult
+  // eslint-disable-next-line no-undef
+  okLabel: string | JSX.Element
+  okFn?: (value?:any) => void
+  cancelLabel?: string | JSX.Element
+  cancelFn?: (reason?: AppModalCancelTypes) => void,
+  modalType?: ModalTypes,
+  modalParentClass?: string
+  defaultValue?: string
+  hideFn?: () => void,
+  resolve?: (value?:any) => void,
+  next?: () => void,
+  data?: any,
+  showCancelIcon?: boolean,
+  preventBlur?: boolean
+  placeholderText?: string
+  width?: string
+  height?: string
+}
+
 export interface AppState {
     gitHubUser: GitHubUser
     currentBranch: branch
@@ -57,5 +101,6 @@ export interface AppState {
     showPopupPanel: boolean
     connectedToDesktop: desktopConnection
     desktopClientConnected: desktopConnection
+    genericModalState?: GenericModal
 }
 

libs/remix-ui/app/src/lib/remix-app/reducer/app.ts

@@ -42,5 +42,12 @@ export const appReducer = (state: AppState, action: AppAction): AppState => {
       connectedToDesktop: action.payload
     }
   }
+
+  case appActionTypes.showGenericModal: {
+    return {
+      ...state,
+      genericModalState: { ...state.genericModalState, showModal: action.payload }
+    }
+  }
   }
-}
+}

libs/remix-ui/app/src/lib/remix-app/reducer/modals.ts

@@ -83,5 +83,9 @@ export const modalReducer = (state: ModalState = ModalInitialState, action: Moda
       return { ...state, toasters: []}
     }
   }
+
+  case modalActionTypes.setTemplateExplorer: {
+    return { ...state, focusTemplateExplorer: action.payload }
+  }
   }
 }