feat(CodeEditor): add new code editor (#5294)

* feat(CodeEditor): add new code editor

* add snapshots and aria-label props

* fix test typo

* add tooltips

* add custom controls and address comments

* add aria-label to new example

* add keyboard controls

* update versions

* clean up prop docs

* switch to webpack config

* fix unit tests

* add note in docs about webpack requirement

* update theme version

* update versions

* i thought i had fixed all the versions...

* remove invalid aria role from monaco editor

* update prop names

* fix versions

* fix versions again

.circleci/config.yml

@@ -6,6 +6,7 @@ references:
   js_deps_paths: &js_deps_paths
   - node_modules/
   - packages/react-charts/node_modules/
+  - packages/react-code-editor/node_modules/
   - packages/react-core/node_modules/
   - packages/react-console/node_modules/
   - packages/react-docs/node_modules/
@@ -23,6 +24,7 @@ references:
   - packages/react-icons/node_modules/
   build_cache_paths: &build_cache_paths
   - packages/react-charts/dist/
+  - packages/react-code-editor/dist/
   - packages/react-core/dist/
   - packages/react-console/dist/
   - packages/react-inline-edit-extension/dist/

babel.config.js

@@ -1,5 +1,16 @@
 module.exports = {
-  presets: ['@babel/preset-env', '@babel/preset-typescript', '@babel/preset-react'],
+  presets: [
+    [
+      '@babel/preset-env',
+      {
+        targets: {
+          esmodules: true
+        }
+      }
+    ],
+    '@babel/preset-typescript',
+    '@babel/preset-react'
+  ],
   plugins: [
     ['@babel/plugin-proposal-decorators', { legacy: true }],
     '@babel/plugin-proposal-optional-chaining',

jest.config.js

@@ -10,20 +10,14 @@ module.exports = {
   ],
   roots: ['<rootDir>/packages'],
   setupFiles: ['<rootDir>/jest.env.js'],
-  snapshotSerializers: [
-    'enzyme-to-json/serializer',
-  ],
+  snapshotSerializers: ['enzyme-to-json/serializer'],
   transform: {
     '^.+\\.[jt]sx?$': 'babel-jest'
   },
-  transformIgnorePatterns: ['node_modules/(?!@patternfly|@novnc|@popperjs|lodash)'],
-  testPathIgnorePatterns: [
-    '<rootDir>/packages/react-integration/'
-  ],
-  coveragePathIgnorePatterns: [
-    '/dist/'
-  ],
+  transformIgnorePatterns: ['node_modules/(?!@patternfly|@novnc|@popperjs|lodash|monaco-editor|react-monaco-editor)'],
+  testPathIgnorePatterns: ['<rootDir>/packages/react-integration/'],
+  coveragePathIgnorePatterns: ['/dist/'],
   moduleNameMapper: {
-    "\\.(css|less)$": "<rootDir>/packages/react-styles/__mocks__/styleMock.js"
+    '\\.(css|less)$': '<rootDir>/packages/react-styles/__mocks__/styleMock.js'
   }
 };

packages/react-code-editor/.npmignore

@@ -0,0 +1,2 @@
+dist/*.tsbuildinfo
+tsconfig.*

packages/react-code-editor/README.md

@@ -0,0 +1,92 @@
+# @patternfly/react-code-editor
+
+This package provides a PatternFly wrapper for the Monaco code editor
+
+### Prerequisite
+
+#### Node Environment
+
+This project currently supports Node [Active LTS](https://github.com/nodejs/Release#release-schedule) releases. Please stay current with Node Active LTS when developing patternfly-react.
+
+For example, to develop with Node 8, use the following:
+
+```
+nvm install 8
+nvm use 8
+```
+
+This project also requires a Yarn version of >=1.6.0. The latest version can be installed [here](https://yarnpkg.com/).
+
+### Installing
+
+```
+yarn add @patternfly/react-code-editor
+```
+
+or
+
+```
+npm install @patternfly/react-code-editor --save
+```
+
+### Usage
+
+#### Pre-requisites
+
+It's strongly advised to use the PatternFly Base CSS in your whole project, or some components may diverge in appearance:
+
+```js
+import '@patternfly/react-core/dist/styles/base.css';
+```
+
+```js
+import { CodeEditor } from '@patternfly/react-code-editor';
+```
+
+# Documentation
+
+This project uses Gatsby. For an overview of the project structure please refer to the [Gatsby documentation - Building with Components](https://www.gatsbyjs.org/docs/building-with-components/).
+
+A comprehensive list of components and detailed usage of each can be found on the [PatternFly React Docs][docs] website
+You can also find how each component is meant to be used from a design perspective on the [PatternFly 4 Core][patternfly-4] website.
+
+Note: All commands below assume you are on the root directory in this repository.
+
+### Install
+
+Run to install all the dependencies
+
+```sh
+yarn && yarn bootstrap && yarn build && yarn build:docs
+```
+
+### Running
+
+To start the site locally.
+
+```sh
+yarn build && yarn start:pf4
+```
+
+### Building
+
+To build the site.
+
+```sh
+yarn build:docs
+```
+
+# Contributing Components
+
+This library makes use of the babel plugin from [@patternfly/react-styles](../react-styles/README.md) to enable providing the CSS alongside the components. This removes the need for consumers to use (style|css|sass)-loaders. For any CSS not provided by core please use the `StyleSheet.create` utility from [@patternfly/react-styles](../react-styles/README.md). This will prevent collisions with any consumers, and allow the CSS to be bundled with the component.
+
+### Building
+
+```
+yarn build
+```
+
+Note the build scripts for this are located in the root package.json under `yarn build`.
+
+[patternfly-4]: https://github.com/patternfly/patternfly
+[docs]: https://patternfly-react.surge.sh/

packages/react-code-editor/package.json

@@ -0,0 +1,50 @@
+{
+  "name": "@patternfly/react-code-editor",
+  "version": "4.0.0",
+  "description": "This package provides a PatternFly wrapper for the Monaco code editor\n",
+  "main": "dist/js/index.js",
+  "module": "dist/esm/index.js",
+  "types": "dist/js/index.d.ts",
+  "patternfly:src": "src/",
+  "sideEffects": false,
+  "publishConfig": {
+    "access": "public",
+    "tag": "prerelease"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/patternfly/patternfly-react.git"
+  },
+  "keywords": [
+    "react",
+    "patternfly",
+    "code-editor"
+  ],
+  "author": "Red Hat",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/patternfly/patternfly-react/issues"
+  },
+  "homepage": "https://github.com/patternfly/patternfly-react/tree/master/packages/react-code-editor#readme",
+  "scripts": {
+    "clean": "rimraf dist"
+  },
+  "dependencies": {
+    "@patternfly/react-core": "^4.89.2",
+    "@patternfly/react-icons": "^4.8.3",
+    "@patternfly/react-styles": "^4.7.27",
+    "react-dropzone": "9.0.0",
+    "tslib": "1.13.0"
+  },
+  "peerDependencies": {
+    "monaco-editor": "^0.21.3",
+    "monaco-editor-webpack-plugin": "^2.1.0",
+    "react": "^16.8.0",
+    "react-dom": "^16.8.0",
+    "react-monaco-editor": "^0.41.2"
+  },
+  "devDependencies": {
+    "rimraf": "^2.6.2",
+    "typescript": "^3.8.3"
+  }
+}