feat(richtext): adds RichText component

fix HospitalRun#29

__mocks__/styleMock.js

@@ -0,0 +1 @@
+module.exports = {}

package.json

@@ -73,8 +73,9 @@
     "@types/sinon": "~7.0.13",
     "@types/storybook__addon-info": "~4.1.2",
     "@types/storybook__react": "~4.0.2",
-    "@typescript-eslint/eslint-plugin": "~2.6.1",
-    "@typescript-eslint/parser": "~2.6.1",
+    "@types/tinymce": "~4.5.23",
+    "@typescript-eslint/eslint-plugin": "^2.3.1",
+    "@typescript-eslint/parser": "^2.3.1",
     "awesome-typescript-loader": "~5.2.1",
     "babel-loader": "~8.0.6",
     "bootstrap": "~4.3.1",
@@ -112,16 +113,21 @@
     "@fortawesome/fontawesome-svg-core": "~1.2.25",
     "@fortawesome/free-solid-svg-icons": "~5.11.2",
     "@fortawesome/react-fontawesome": "~0.1.4",
+    "@tinymce/tinymce-react": "~3.3.2",
     "chart.js": "^2.8.0",
     "formik": "^1.5.8",
     "moment": "^2.24.0",
     "react-spinners": "^0.6.1",
-    "react-toastify": "^5.3.2"
+    "react-toastify": "^5.3.2",
+    "tinymce": "~5.0.16"
   },
   "jest": {
     "setupFiles": [
       "jest-canvas-mock",
       "<rootDir>test-setup.ts"
-    ]
+    ],
+    "moduleNameMapper": {
+      "\\.(css|less)$": "<rootDir>/__mocks__/styleMock.js"
+    }
   }
 }

src/components/RichText/RichText.tsx

@@ -0,0 +1,61 @@
+import React from 'react'
+import { Editor } from '@tinymce/tinymce-react'
+
+import 'tinymce/tinymce'
+
+// Basic tinyMCE theme & skins required for editor to display
+import 'tinymce/themes/silver/theme.min'
+import 'tinymce/skins/ui/oxide/skin.min.css'
+import 'tinymce/skins/ui/oxide/content.min.css'
+
+// Import required plugins
+import 'tinymce/plugins/autolink/plugin.min'
+import 'tinymce/plugins/lists/plugin.min'
+import 'tinymce/plugins/link/plugin.min'
+import 'tinymce/plugins/table/plugin.min'
+import 'tinymce/plugins/paste/plugin.min'
+import 'tinymce/plugins/charmap/plugin.min'
+
+interface Props {
+  // id of the rich text editor component
+  id?: string
+  // Initial value of the rich text editor
+  value?: string
+  // Defines whether the rich text editor should be enabled/disabled (default = false)
+  disabled?: boolean
+  // Height of the rich text editor
+  height?: number
+  // Method run on the editors onEditorChange event. Returns editor content as HTML.
+  onChange?: (event: React.KeyboardEvent<HTMLTextAreaElement>) => void
+}
+
+const RichText = (props: Props) => {
+  const { id, value, disabled, height, onChange } = props
+
+  return (
+    <Editor
+      id={id}
+      initialValue={value}
+      init={{
+        height: height || 500,
+        menubar: true,
+        statusbar: false,
+        // skin & content_css are set to 'false' to avoid tinyMCE looking to fetch files when they are already imported above.
+        skin: false,
+        // eslint disabled on next line due to TinyMCE option attribute naming.
+        // eslint-disable-next-line @typescript-eslint/camelcase
+        content_css: false,
+        plugins: [`autolink lists link table paste charmap`],
+        toolbar: [
+          `undo redo | formatselect fontselect fontsizeselect | bold italic underline sub sup backcolor |
+        alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | table link removeformat`,
+        ],
+        branding: false,
+      }}
+      disabled={disabled}
+      onEditorChange={(content) => onChange && onChange(content)}
+    />
+  )
+}
+
+export { RichText }

src/components/RichText/index.tsx

@@ -0,0 +1 @@
+export * from './RichText'

src/index.tsx

@@ -19,3 +19,4 @@ export * from './components/Alert'
 export * from './components/Modal'
 export * from './components/TextInput'
 export * from './components/Select'
+export * from './components/RichText'

stories/richtext.stories.tsx

@@ -0,0 +1,15 @@
+import React from 'react'
+
+import { storiesOf } from '@storybook/react'
+
+import { RichText } from '../src'
+
+storiesOf('RichText', module)
+  .addParameters({
+    info: {
+      inline: true,
+    },
+  })
+  .addDecorator((storyFn) => <div style={{ textAlign: 'center' }}>{storyFn()}</div>)
+  .add('Default rich text editor', () => <RichText />)
+  .add('Disabled rich text editor', () => <RichText disabled />)

test/richtext.test.tsx

@@ -0,0 +1,34 @@
+import * as React from 'react'
+import { shallow } from 'enzyme'
+import { Editor } from '@tinymce/tinymce-react'
+import { RichText } from '../src'
+
+describe('TextField', () => {
+  it('renders a RichText without crashing', () => {
+    const wrapper = shallow(<RichText />)
+
+    expect(wrapper.find(Editor)).toHaveLength(1)
+  })
+
+  it('renders a RichText with attributes', () => {
+    const id = 'richtext'
+    const wrapper = shallow(<RichText id={id} />)
+
+    expect(wrapper.find(Editor)).toHaveLength(1)
+    expect(wrapper.find(Editor).filterWhere((item) => item.prop('id') === id)).toHaveLength(1)
+  })
+
+  it('renders a non-disabled RichText', () => {
+    const wrapper = shallow(<RichText value="richtext" />)
+    const input = wrapper.find(Editor)
+
+    expect(input.prop('disabled')).not.toBe(true)
+  })
+
+  it('renders a disabled RichText', () => {
+    const wrapper = shallow(<RichText value="richtext" disabled />)
+    const input = wrapper.find(Editor)
+
+    expect(input.prop('disabled')).toBe(true)
+  })
+})