feat: add simple JupyterNotebook viewer component (#460)

* feat: add simple JupyterNotebook viewer component

* refactor(JupyterNotebook): address PR feedback

* refactor(JupyterNotebook): more PR comments addressed

.eslintrc.json

@@ -12,7 +12,8 @@
               "!@material-ui/core/test-utils/*"
             ]
           }
-        ]
+        ],
+        "no-control-regex": 0
     },
     "overrides": [
         {

package.json

@@ -113,7 +113,8 @@
     "ts-loader": "^8.0.17",
     "typescript": "^4.2.4",
     "url-loader": "^4.1.1",
-    "webpack": "4.46.0"
+    "webpack": "4.46.0",
+    "html-react-parser": "^1.2.7"
   },
   "dependencies": {
     "@data-driven-forms/react-form-renderer": "^3.16.0",
@@ -136,7 +137,8 @@
     "remark-frontmatter": "^3.0.0",
     "remark-gfm": "^1.0.0",
     "use-debounce": "^7.0.1",
-    "uuid": "^8.3.2"
+    "uuid": "^8.3.2",
+    "html-react-parser": "^1.2.7"
   },
   "peerDependencies": {
     "@types/react": "^16.9.19 || ^17.0.0",

src/advanced/JupyterNotebook/JupyterNotebook.md

@@ -0,0 +1,19 @@
+# Example
+
+**More examples** are available on <a href="http://localhost:9090/?path=/story/jupyter-notebook-viewer--simple-notebook-view" target="_blank">NorthStar Storybook</a>.
+
+```jsx
+import React from 'react';
+import JupyterNotebook from '.';
+
+import SampleNotebook from './sample-notebook';
+
+export default {
+    component: JupyterNotebook,
+    title: 'Jupyter Notebook Viewer',
+};
+
+export const SimpleNotebookView = () => (
+    <JupyterNotebook notebookData={JSON.stringify(SampleNotebook)}/>
+);
+```

src/advanced/JupyterNotebook/index.stories.tsx

@@ -0,0 +1,27 @@
+/** *******************************************************************************************************************
+  Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+  
+  Licensed under the Apache License, Version 2.0 (the "License").
+  You may not use this file except in compliance with the License.
+  You may obtain a copy of the License at
+  
+      http://www.apache.org/licenses/LICENSE-2.0
+  
+  Unless required by applicable law or agreed to in writing, software
+  distributed under the License is distributed on an "AS IS" BASIS,
+  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  See the License for the specific language governing permissions and
+  limitations under the License.                                                                              *
+ ******************************************************************************************************************** */
+
+import React from 'react';
+import JupyterNotebook from '.';
+
+import SampleNotebook from './sample-notebook';
+
+export default {
+    component: JupyterNotebook,
+    title: 'Jupyter Notebook Viewer',
+};
+
+export const SimpleNotebookView = () => <JupyterNotebook notebookData={JSON.stringify(SampleNotebook)} />;

src/advanced/JupyterNotebook/index.test.tsx

@@ -0,0 +1,38 @@
+/** *******************************************************************************************************************
+  Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+  
+  Licensed under the Apache License, Version 2.0 (the "License").
+  You may not use this file except in compliance with the License.
+  You may obtain a copy of the License at
+  
+      http://www.apache.org/licenses/LICENSE-2.0
+  
+  Unless required by applicable law or agreed to in writing, software
+  distributed under the License is distributed on an "AS IS" BASIS,
+  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  See the License for the specific language governing permissions and
+  limitations under the License.                                                                              *
+ ******************************************************************************************************************** */
+
+import React from 'react';
+import { render, cleanup } from '@testing-library/react';
+
+import JupyterNotebook from '.';
+import SampleNotebook from './sample-notebook';
+
+describe('Jupyter Notebook', () => {
+    afterEach(cleanup);
+
+    it('should render 1st code cell', () => {
+        const { getByText } = render(<JupyterNotebook notebookData={JSON.stringify(SampleNotebook)}></JupyterNotebook>);
+        expect(getByText('In [1]')).toBeInTheDocument();
+    });
+    it('should render stdout cell', () => {
+        const { getByText } = render(<JupyterNotebook notebookData={JSON.stringify(SampleNotebook)}></JupyterNotebook>);
+        expect(getByText('Out [1]')).toBeInTheDocument();
+    });
+    it('should render image cell', () => {
+        const { getByText } = render(<JupyterNotebook notebookData={JSON.stringify(SampleNotebook)}></JupyterNotebook>);
+        expect(getByText('Out [17]')).toBeInTheDocument();
+    });
+});