first steps

apps/remix-ide/src/app.js

@@ -30,6 +30,7 @@ const isElectron = require('is-electron')
 const remixLib = require('@remix-project/remix-lib')
 
 import { QueryParams } from '@remix-project/remix-lib'
+import { SearchPlugin } from './app/tabs/search'
 const Storage = remixLib.Storage
 const RemixDProvider = require('./app/files/remixDProvider')
 const Config = require('./config')
@@ -147,6 +148,9 @@ class AppComponent {
     // ----------------- Storage plugin ---------------------------------
     const storagePlugin = new StoragePlugin()
 
+    //----- search
+    const search = new SearchPlugin()
+
     // ----------------- import content service ------------------------
     const contentImport = new CompilerImports()
 
@@ -221,7 +225,8 @@ class AppComponent {
       dGitProvider,
       storagePlugin,
       hardhatProvider,
-      this.walkthroughService
+      this.walkthroughService,
+      search
     ])
 
     // LAYOUT & SYSTEM VIEWS
@@ -332,7 +337,7 @@ class AppComponent {
     await this.appManager.activatePlugin(['settings', 'config'])
     await this.appManager.activatePlugin(['hiddenPanel', 'pluginManager', 'contextualListener', 'terminal', 'blockchain', 'fetchAndCompile', 'contentImport', 'gistHandler'])
     await this.appManager.activatePlugin(['settings'])
-    await this.appManager.activatePlugin(['walkthrough','storage'])
+    await this.appManager.activatePlugin(['walkthrough','storage', 'search'])
 
     this.appManager.on(
       'filePanel',

apps/remix-ide/src/app/files/fileManager.ts

@@ -19,7 +19,7 @@ const profile = {
   icon: 'assets/img/fileManager.webp',
   permission: true,
   version: packageJson.version,
-  methods: ['closeAllFiles', 'closeFile', 'file', 'exists', 'open', 'writeFile', 'readFile', 'copyFile', 'copyDir', 'rename', 'mkdir', 'readdir', 'remove', 'getCurrentFile', 'getFile', 'getFolder', 'setFile', 'switchFile', 'refresh', 'getProviderOf', 'getProviderByName', 'getPathFromUrl', 'getUrlFromPath', 'saveCurrentFile', 'setBatchFiles'],
+  methods: ['closeAllFiles', 'closeFile', 'file', 'exists', 'open', 'writeFile', 'readFile', 'copyFile', 'copyDir', 'rename', 'mkdir', 'readdir', 'remove', 'getCurrentFile', 'getFile', 'getFolder', 'setFile', 'switchFile', 'refresh', 'getProviderOf', 'getProviderByName', 'getPathFromUrl', 'getUrlFromPath', 'saveCurrentFile', 'setBatchFiles', 'findInFile'],
   kind: 'file-system'
 }
 const errorMsg = {
@@ -396,6 +396,14 @@ class FileManager extends Plugin {
     }
   }
 
+
+  async findInFile(query) {
+    const browserProvider = this.getProvider('browser')
+    await browserProvider.copyFolderToJson('/.workspaces/default_workspace', ({ path, content }) => {
+      console.log(path, content)
+    })
+  }
+
   init() {
     this._deps = {
       config: this._components.registry.get('config').api,

apps/remix-ide/src/app/tabs/search.tsx

@@ -0,0 +1,34 @@
+import { ViewPlugin } from '@remixproject/engine-web'
+import * as packageJson from '../../../../../package.json'
+import React from 'react' // eslint-disable-line
+import { PluginViewWrapper } from '@remix-ui/helper'
+import { SearchTab } from '@remix-ui/search'
+const profile = {
+    name: 'search',
+    displayName: 'Search',
+    methods: [''],
+    events: [],
+    icon: 'assets/img/Search_Icon.svg',
+    description: '',
+    kind: '',
+    location: 'sidePanel',
+    documentation: '',
+    version: packageJson.version
+  }
+
+export class SearchPlugin extends ViewPlugin {
+    dispatch: React.Dispatch<any> = () => {}
+    constructor () {
+      super(profile)
+    }
+
+
+    render() {      
+        return (
+          <div id='searchTab'>
+            <SearchTab plugin={this}></SearchTab>
+          </div>
+        );
+      }
+
+}

libs/remix-ui/search/.babelrc

@@ -0,0 +1,4 @@
+{
+  "presets": ["@nrwl/react/babel"],
+  "plugins": []
+}

libs/remix-ui/search/.eslintrc.json

@@ -0,0 +1,19 @@
+{
+  "env": {
+      "browser": true,
+      "es6": true
+  },
+  "ignorePatterns": ["!**/*"],
+  "extends": "../../../.eslintrc.json",
+  "globals": {
+      "Atomics": "readonly",
+      "SharedArrayBuffer": "readonly"
+  },
+  "parserOptions": {
+      "ecmaVersion": 11,
+      "sourceType": "module"
+  },
+  "rules": {
+      "standard/no-callback-literal": "off"
+  }
+}

libs/remix-ui/search/.prettierrc

@@ -0,0 +1,5 @@
+{
+    "tabWidth": 2,
+    "singleQuote": true,
+    "semi": false
+}

libs/remix-ui/search/README.md

@@ -0,0 +1,7 @@
+# remix-ui-vertical-icons-panel
+
+React library for RemixIde vertical icons Panel
+
+## Running unit tests
+
+Run `nx test remix-ui-vertical-icons-panel` to execute the unit tests via [Jest](https://jestjs.io).

libs/remix-ui/search/src/index.ts

@@ -0,0 +1 @@
+export { SearchTab } from './lib/components/Search';

libs/remix-ui/search/src/lib/components/Find.tsx

@@ -0,0 +1,17 @@
+import React, { useContext, useReducer } from "react"
+import { SearchContext } from "../context/context"
+import { SearchingInitialState, SearchReducer } from "../reducers/Reducer"
+
+
+
+export const Find = props => {
+
+    const { setFind } = useContext(SearchContext)
+    const change = (e) => {
+        setFind(e.target.value)
+    }
+
+    return(<>
+        <input placeholder="Search" className="form-control" onChange={change}></input>
+    </>)
+}

libs/remix-ui/search/src/lib/components/Replace.tsx

@@ -0,0 +1,16 @@
+import React, { useContext, useEffect } from 'react'
+import { SearchContext } from '../context/context'
+
+export const Replace = props => {
+  const { state, setReplace } = useContext(SearchContext)
+
+  const change = e => {
+    setReplace(e.target.value)
+  }
+
+  return (
+    <>
+      <input placeholder='Replace' className="form-control" onChange={change}></input>
+    </>
+  )
+}

libs/remix-ui/search/src/lib/components/Search.tsx

@@ -0,0 +1,25 @@
+import React, { useContext, useEffect, useReducer } from 'react'
+import { SearchContext, SearchProvider } from '../context/context'
+import { SearchingInitialState, SearchReducer } from '../reducers/Reducer'
+import { Find } from './Find'
+import { Replace } from './Replace'
+import { Results } from './results/Results'
+
+export const SearchTab = props => {
+
+const plugin = props.plugin
+
+useEffect(() => {
+    console.log (plugin)
+},[])
+
+return (
+    <>
+      <SearchProvider>
+        <Find></Find>
+        <Replace></Replace>
+        <Results plugin={plugin}></Results>
+      </SearchProvider>
+    </>
+  )
+}

libs/remix-ui/search/src/lib/components/results/Results.tsx

@@ -0,0 +1,81 @@
+import { ViewPlugin } from "@remixproject/engine-web"
+import React, { useContext, useEffect } from "react"
+import { SearchContext } from "../../context/context"
+import { SearchResult } from "../../reducers/Reducer"
+
+interface ResultsProps {
+    plugin: ViewPlugin
+}
+
+export const Results = (props: ResultsProps) => {
+
+    const { state, setSearchResults } = useContext(SearchContext)
+
+    const { plugin } = props
+
+    const getDirectory = async (dir) => {
+        let result = []
+        const files = await plugin.call('fileManager', 'readdir', dir)
+        const fileArray = normalize(files)
+        for (const fi of fileArray) {
+          if (fi) {
+            const type = fi.data.isDirectory
+            if (type === true) {
+              result = [
+                ...result,
+                ...(await getDirectory(
+                  `${fi.filename}`
+                ))
+              ]
+            } else {
+              result = [...result, fi.filename]
+            }
+          }
+        }
+        return result
+    }
+
+    const normalize = (filesList) => {
+        const folders = []
+        const files = []
+        Object.keys(filesList || {}).forEach(key => {
+          if (filesList[key].isDirectory) {
+            folders.push({
+              filename: key,
+              data: filesList[key]
+            })
+          } else {
+            files.push({
+              filename: key,
+              data: filesList[key]
+            })
+          }
+        })
+        return [...folders, ...files]
+      }
+
+    useEffect(() => {
+        if (state.find) {
+            getDirectory('/').then(res => {
+                const ob = res.map(file => {   
+                    const r:SearchResult = {
+                        filename: file,
+                        lines: [],
+                        path: file,
+                        searchComplete: false
+                    }
+                    return r
+                })
+                console.log(ob)
+                setSearchResults(ob)
+            })
+        }
+    },[state.find])
+
+
+    useEffect(() => {
+       console.log(state.searchResults)
+    },[state.searchResults])
+
+    return(<></>)
+}