create vertical icons panel react lib

.eslintrc.json

@@ -0,0 +1,35 @@
+{
+  "root": true,
+  "ignorePatterns": ["**/*"],
+  "plugins": ["@nrwl/nx"],
+  "overrides": [
+    {
+      "files": ["*.ts", "*.tsx", "*.js", "*.jsx"],
+      "rules": {
+        "@nrwl/nx/enforce-module-boundaries": [
+          "error",
+          {
+            "enforceBuildableLibDependency": true,
+            "allow": [],
+            "depConstraints": [
+              {
+                "sourceTag": "*",
+                "onlyDependOnLibsWithTags": ["*"]
+              }
+            ]
+          }
+        ]
+      }
+    },
+    {
+      "files": ["*.ts", "*.tsx"],
+      "extends": ["plugin:@nrwl/nx/typescript"],
+      "rules": {}
+    },
+    {
+      "files": ["*.js", "*.jsx"],
+      "extends": ["plugin:@nrwl/nx/javascript"],
+      "rules": {}
+    }
+  ]
+}

libs/remix-ui/vertical-icons-panel/.babelrc

@@ -0,0 +1,12 @@
+{
+  "presets": [
+    [
+      "@nrwl/react/babel",
+      {
+        "runtime": "automatic",
+        "useBuiltIns": "usage"
+      }
+    ]
+  ],
+  "plugins": []
+}

libs/remix-ui/vertical-icons-panel/.eslintrc.json

@@ -0,0 +1,18 @@
+{
+  "extends": ["plugin:@nrwl/nx/react", "../../../.eslintrc.json"],
+  "ignorePatterns": ["!**/*"],
+  "overrides": [
+    {
+      "files": ["*.ts", "*.tsx", "*.js", "*.jsx"],
+      "rules": {}
+    },
+    {
+      "files": ["*.ts", "*.tsx"],
+      "rules": {}
+    },
+    {
+      "files": ["*.js", "*.jsx"],
+      "rules": {}
+    }
+  ]
+}

libs/remix-ui/vertical-icons-panel/README.md

@@ -0,0 +1,7 @@
+# remix-ui-vertical-icons-panel
+
+This library was generated with [Nx](https://nx.dev).
+
+## Running unit tests
+
+Run `nx test remix-ui-vertical-icons-panel` to execute the unit tests via [Jest](https://jestjs.io).

libs/remix-ui/vertical-icons-panel/src/index.ts

@@ -0,0 +1 @@
+export * from './lib/remix-ui-vertical-icons-panel';

libs/remix-ui/vertical-icons-panel/src/lib/remix-ui-vertical-icons-panel.tsx

@@ -0,0 +1,16 @@
+import './remix-ui-vertical-icons-panel.module.css';
+
+/* eslint-disable-next-line */
+export interface RemixUiVerticalIconsPanelProps {}
+
+export function RemixUiVerticalIconsPanel(
+  props: RemixUiVerticalIconsPanelProps
+) {
+  return (
+    <div>
+      <h1>Welcome to remix-ui-vertical-icons-panel!</h1>
+    </div>
+  );
+}
+
+export default RemixUiVerticalIconsPanel;

libs/remix-ui/vertical-icons-panel/tsconfig.json

@@ -0,0 +1,20 @@
+{
+  "extends": "../../../tsconfig.base.json",
+  "compilerOptions": {
+    "jsx": "react-jsx",
+    "allowJs": true,
+    "esModuleInterop": true,
+    "allowSyntheticDefaultImports": true,
+    "forceConsistentCasingInFileNames": true,
+    "strict": true,
+    "noImplicitReturns": true,
+    "noFallthroughCasesInSwitch": true
+  },
+  "files": [],
+  "include": [],
+  "references": [
+    {
+      "path": "./tsconfig.lib.json"
+    }
+  ]
+}

libs/remix-ui/vertical-icons-panel/tsconfig.lib.json

@@ -0,0 +1,13 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../../dist/out-tsc",
+    "types": ["node"]
+  },
+  "files": [
+    "../../../node_modules/@nrwl/react/typings/cssmodule.d.ts",
+    "../../../node_modules/@nrwl/react/typings/image.d.ts"
+  ],
+  "exclude": ["**/*.spec.ts", "**/*.spec.tsx"],
+  "include": ["**/*.js", "**/*.jsx", "**/*.ts", "**/*.tsx"]
+}

nx.json

@@ -1,5 +1,4 @@
 {
-  "npmScope": "remix-project",
   "implicitDependencies": {
     "workspace.json": "*",
     "package.json": {
@@ -11,6 +10,7 @@
     ".eslintrc": "*",
     "nx.json": "*"
   },
+  "npmScope": "remix-project",
   "tasksRunnerOptions": {
     "default": {
       "runner": "@nrwl/workspace/tasks-runners/default",
@@ -130,19 +130,14 @@
     "remix-ui-editor": {
       "tags": []
     },
-    "remix-ui-helper": {
+    "remix-ui-helper": { 
+      "tags": []
+    },
+    "remix-ui-vertical-icons-panel": {
       "tags": []
     },
     "remix-ui-tabs": {
       "tags": []
     }
-  },
-  "targetDependencies": {
-    "build": [
-      {
-        "target": "build",
-        "projects": "dependencies"
-      }
-    ]
   }
 }

package.json

@@ -161,6 +161,7 @@
     "chokidar": "^2.1.8",
     "color-support": "^1.1.3",
     "commander": "^2.20.3",
+    "core-js": "^3.6.5",
     "deep-equal": "^1.0.1",
     "document-register-element": "1.13.1",
     "ethereumjs-util": "^7.0.10",
@@ -261,8 +262,11 @@
     "eslint-config-prettier": "^6.11.0",
     "eslint-config-standard": "^14.1.1",
     "eslint-plugin-import": "2.20.2",
+    "eslint-plugin-jsx-a11y": "6.4.1",
     "eslint-plugin-node": "11.1.0",
     "eslint-plugin-promise": "4.2.1",
+    "eslint-plugin-react": "7.23.1",
+    "eslint-plugin-react-hooks": "4.2.0",
     "eslint-plugin-standard": "4.0.1",
     "events": "^3.0.0",
     "execr": "^1.0.1",

tsconfig.base.json

@@ -66,7 +66,10 @@
       "@remix-ui/plugin-manager": ["libs/remix-ui/plugin-manager/src/index.ts"],
       "@remix-ui/editor": ["libs/remix-ui/editor/src/index.ts"],
       "@remix-ui/tabs": ["libs/remix-ui/tabs/src/index.ts"],
-      "@remix-ui/helper": ["libs/remix-ui/helper/src/index.ts"]
+      "@remix-ui/helper": ["libs/remix-ui/helper/src/index.ts"],
+      "@remix-ui/vertical-icons-panel": [
+        "libs/remix-ui/vertical-icons-panel/src/index.ts"
+      ]
     }
   },
   "exclude": ["node_modules", "tmp"]

workspace.json

@@ -1,5 +1,71 @@
 {
   "version": 1,
+  "cli": {
+    "defaultCollection": "@nrwl/react"
+  },
+  "defaultProject": "remix-ide",
+  "schematics": {
+    "@nrwl/workspace": {
+      "library": {
+        "linter": "eslint"
+      }
+    },
+    "@nrwl/cypress": {
+      "cypress-project": {
+        "linter": "eslint"
+      }
+    },
+    "@nrwl/react": {
+      "application": {
+        "style": "css",
+        "linter": "eslint",
+        "babel": true
+      },
+      "component": {
+        "style": "css"
+      },
+      "library": {
+        "style": "css",
+        "linter": "eslint"
+      }
+    },
+    "@nrwl/next": {
+      "application": {
+        "linter": "eslint"
+      }
+    },
+    "@nrwl/web": {
+      "application": {
+        "linter": "eslint"
+      }
+    },
+    "@nrwl/node": {
+      "application": {
+        "linter": "eslint"
+      },
+      "library": {
+        "linter": "eslint"
+      }
+    },
+    "@nrwl/nx-plugin": {
+      "plugin": {
+        "linter": "eslint"
+      }
+    },
+    "@nrwl/nest": {
+      "application": {
+        "linter": "eslint"
+      }
+    },
+    "@nrwl/express": {
+      "application": {
+        "linter": "eslint"
+      },
+      "library": {
+        "linter": "eslint"
+      }
+    }
+  },
   "projects": {
     "remix-ide": {
       "root": "apps/remix-ide",
@@ -1106,19 +1172,20 @@
         "linter": "eslint"
       }
     },
-    "@nrwl/nest": {
+    "remix-ui-vertical-icons-panel": {
-      "application": {
+      "root": "libs/remix-ui/vertical-icons-panel",
-        "linter": "eslint"
+      "sourceRoot": "libs/remix-ui/vertical-icons-panel/src",
-      }
+      "projectType": "library",
-    },
+      "architect": {
-    "@nrwl/express": {
+        "lint": {
-      "application": {
+          "builder": "@nrwl/linter:eslint",
-        "linter": "eslint"
+          "options": {
-      },
+            "lintFilePatterns": [
-      "library": {
+              "libs/remix-ui/vertical-icons-panel/**/*.{ts,tsx,js,jsx}"
-        "linter": "eslint"
+            ]
+          }
+        }
       }
     }
-  },
+  }
-  "defaultProject": "remix-ide"
 }