Merge pull request #112 from jtpio/prettier-check

Add prettier scripts and check on CI

Author: cameron-toy

.github/workflows/build.yml

@@ -27,6 +27,7 @@ jobs:
       run: |
         jlpm
         jlpm run eslint:check
+        jlpm run prettier:check
 
         python -m pip install .
 

.prettierignore

@@ -2,3 +2,6 @@ node_modules
 **/node_modules
 **/lib
 **/package.json
+jupyterlab_interactive_dashboard_editor
+.vscode
+.github

Design/PRESS_RELEASE.md

@@ -1,27 +1,18 @@
-
 # JupyterLab Interactive Dashboard Editor
 
 ### Jupyter users can interactively create and customize dashboards from Jupyter Notebooks.
 
 Creating a dashboard is a great way to present data analytics and information to general audiences. If you want to share your data, displaying Jupyter notebooks can get pretty lengthy with their cluttered, linear view. As a result, they are not easy to understand for general audiences who want to see your results, not your code.
 
-  
-
 The JupyterLab Interactive Dashboard Editor extension is a **live editor** that enables you to intuitively build aesthetic, **interactive** dashboards side-by-side with your notebook. You can rearrange, remove, and customize outputs (plots, widgets, text, etc.) in a **grid layout** by dragging cells directly from your notebook onto the dashboard.
 
-  
-
 Tools like [Voilà](https://github.com/voila-dashboards/voila) can already render dynamic web apps—however, they’re limited in their ability to conveniently customize layout and appearance. Simple tasks such as resizing a graph require you to rewrite templates in a separate templating language. Dashboarding should be as easy as dragging and dropping!
 
-  
-
 The Interactive Dashboard Editor extension solves this problem by integrating a **drag-and-drop** dashboard editor inside JupyterLab. Simply drag code cells outputs onto the dashboard, then arrange and size them in a live editor. Take advantage of our default design or further customize your dashboards with background colors, typefaces, font sizes/colors, and other adjustments.
 
-  
-
 > Project Health is a non-profit organization that collects international disease data. “Using the Interactive Dashboard Editor, we were able to easily publish live COVID-19 updates and data analytics directly from Jupyter Notebooks onto an interactive web-app. To ensure effectiveness and understandability, the layout was all custom-rendered, allowing for diverse audiences to read the data. In turn, this increased audience trust while interactive components added depth to the analysis.”
-—Project Health manager, Noel James*
+> —Project Health manager, Noel James\*
 
 The Interactive Dashboard Editor extension takes the guesswork out of creating beautiful and cohesive dashboards. Save time and resources with the intuitive drag-and-drop interface and tools . Get started right in your Jupyter Notebooks today!
 
-*not a real quote
+\*not a real quote

README.md

@@ -10,48 +10,50 @@ Interactively create and customize dashboards in JupyterLab
 ![presto-overview](https://github.com/jupytercalpoly/jupyterlab-interactive-dashboard-editor/blob/master/Design/gifs/overview.gif)
 
 ## Additional Gifs
+
 <details>
   <summary>Click to expand</summary>
   Add and rearrange outputs on dashboards right from your notebook.
 
-  ![add-move-resize](https://github.com/jupytercalpoly/jupyterlab-interactive-dashboard-editor/blob/master/Design/gifs/add_move_resize.gif)
+![add-move-resize](https://github.com/jupytercalpoly/jupyterlab-interactive-dashboard-editor/blob/master/Design/gifs/add_move_resize.gif)
+
+Add outputs from multiple notebooks.
 
-  Add outputs from multiple notebooks.
+![add-multiple](https://github.com/jupytercalpoly/jupyterlab-interactive-dashboard-editor/blob/master/Design/gifs/multiple_notebooks.gif)
 
-  ![add-multiple](https://github.com/jupytercalpoly/jupyterlab-interactive-dashboard-editor/blob/master/Design/gifs/multiple_notebooks.gif)
+See changes immediately.
 
-  See changes immediately.
+![see-changes](https://github.com/jupytercalpoly/jupyterlab-interactive-dashboard-editor/blob/master/Design/gifs/update_cells.gif)
 
-  ![see-changes](https://github.com/jupytercalpoly/jupyterlab-interactive-dashboard-editor/blob/master/Design/gifs/update_cells.gif)
+Preview your dashboard and interact with widgets in present mode.
 
-  Preview your dashboard and interact with widgets in present mode.
+![present-mode](https://github.com/jupytercalpoly/jupyterlab-interactive-dashboard-editor/blob/master/Design/gifs/present_edit.gif)
 
-  ![present-mode](https://github.com/jupytercalpoly/jupyterlab-interactive-dashboard-editor/blob/master/Design/gifs/present_edit.gif)
+Undo and redo.
 
-  Undo and redo.
+![undo-redo](https://github.com/jupytercalpoly/jupyterlab-interactive-dashboard-editor/blob/master/Design/gifs/undo_redo.gif)
 
-  ![undo-redo](https://github.com/jupytercalpoly/jupyterlab-interactive-dashboard-editor/blob/master/Design/gifs/undo_redo.gif)
+Add markdown too.
 
-  Add markdown too.
+![markdown-too](https://github.com/jupytercalpoly/jupyterlab-interactive-dashboard-editor/blob/master/Design/gifs/markdown_too.gif)
 
-  ![markdown-too](https://github.com/jupytercalpoly/jupyterlab-interactive-dashboard-editor/blob/master/Design/gifs/markdown_too.gif)
+Save dashboards to file,
 
-  Save dashboards to file,
+![save-dashboard](https://github.com/jupytercalpoly/jupyterlab-interactive-dashboard-editor/blob/master/Design/gifs/save.gif)
 
-  ![save-dashboard](https://github.com/jupytercalpoly/jupyterlab-interactive-dashboard-editor/blob/master/Design/gifs/save.gif)
+Load them up,
 
-  Load them up,
+![load-dashboard](https://github.com/jupytercalpoly/jupyterlab-interactive-dashboard-editor/blob/master/Design/gifs/load.gif)
 
-  ![load-dashboard](https://github.com/jupytercalpoly/jupyterlab-interactive-dashboard-editor/blob/master/Design/gifs/load.gif)
+And edit them again!
 
-  And edit them again!
+![edit-again](https://github.com/jupytercalpoly/jupyterlab-interactive-dashboard-editor/blob/master/Design/gifs/edit_again.gif)
 
-  ![edit-again](https://github.com/jupytercalpoly/jupyterlab-interactive-dashboard-editor/blob/master/Design/gifs/edit_again.gif)
 </details>
 
 ## Requirements
 
-* JupyterLab >= 2.0
+- JupyterLab >= 2.0
 
 ## Install
 

binder/workspace.json

@@ -1 +1,26 @@
-{"data":{"layout-restorer:data":{"main":{"dock":{"type":"tab-area","currentIndex":0,"widgets":[]},"mode":"multiple-document"},"left":{"collapsed":false,"current":"filebrowser","widgets":["filebrowser","running-sessions","command-palette","jp-property-inspector","tab-manager","@jupyterlab/toc:plugin","extensionmanager.main-view"]},"right":{"collapsed":true,"widgets":[]}},"file-browser-filebrowser:cwd":{"path":"demo"}},"metadata":{"id":"/lab"}}
+{
+  "data": {
+    "layout-restorer:data": {
+      "main": {
+        "dock": { "type": "tab-area", "currentIndex": 0, "widgets": [] },
+        "mode": "multiple-document"
+      },
+      "left": {
+        "collapsed": false,
+        "current": "filebrowser",
+        "widgets": [
+          "filebrowser",
+          "running-sessions",
+          "command-palette",
+          "jp-property-inspector",
+          "tab-manager",
+          "@jupyterlab/toc:plugin",
+          "extensionmanager.main-view"
+        ]
+      },
+      "right": { "collapsed": true, "widgets": [] }
+    },
+    "file-browser-filebrowser:cwd": { "path": "demo" }
+  },
+  "metadata": { "id": "/lab" }
+}

package.json

@@ -37,6 +37,8 @@
     "eslint": "eslint . --ext .ts,.tsx --fix",
     "eslint:check": "eslint . --ext .ts,.tsx",
     "prepare": "jlpm run clean && jlpm run build",
+    "prettier": "prettier --write \"**/*{.ts,.tsx,.js,.jsx,.css,.json,.md}\"",
+    "prettier:check": "prettier --list-different \"**/*{.ts,.tsx,.js,.jsx,.css,.json,.md}\"",
     "watch": "tsc -w"
   },
   "dependencies": {

src/svg.d.ts

@@ -2,4 +2,4 @@
 declare module '*.svg' {
   const value: string;
   export default value;
-}
+}

style/base.css

@@ -31,7 +31,7 @@
   width: 100%;
   height: 100%;
   z-index: 2;
-  background: rgba(0,0,0,.10);
+  background: rgba(0, 0, 0, 0.1);
 }
 
 .pr-EditableWidget:hover {
@@ -45,7 +45,7 @@
   width: 100%;
   height: 100%;
   z-index: 2;
-  background: rgba(0,0,0,.10);
+  background: rgba(0, 0, 0, 0.1);
 }
 
 .pr-DashboardArea {
@@ -71,19 +71,32 @@
   display: block;
 }
 
-
 .pr-Canvas {
   pointer-events: none;
 }
 
 .pr-Canvas.pr-FreeLayout {
-  background-image: linear-gradient(45deg, rgba(160,160,160,.15) 25%, transparent 25%), linear-gradient(-45deg, rgba(160,160,160,.15) 25%, transparent 25%), linear-gradient(45deg, transparent 75%, rgba(160,160,160,.15) 75%), linear-gradient(-45deg, transparent 75%, rgba(160,160,160,.15) 70%);
+  background-image: linear-gradient(
+      45deg,
+      rgba(160, 160, 160, 0.15) 25%,
+      transparent 25%
+    ),
+    linear-gradient(-45deg, rgba(160, 160, 160, 0.15) 25%, transparent 25%),
+    linear-gradient(45deg, transparent 75%, rgba(160, 160, 160, 0.15) 75%),
+    linear-gradient(-45deg, transparent 75%, rgba(160, 160, 160, 0.15) 70%);
   background-size: 20px 20px;
   background-position: 0 0, 0 10px, 10px -10px, -10px 0px;
 }
 
 .pr-Canvas.pr-TiledLayout {
-  background-image: linear-gradient(45deg, rgba(160,160,160,.15) 25%, transparent 25%), linear-gradient(-45deg, rgba(160,160,160,.15) 25%, transparent 25%), linear-gradient(45deg, transparent 75%, rgba(160,160,160,.15) 75%), linear-gradient(-45deg, transparent 75%, rgba(160,160,160,.15) 70%);
+  background-image: linear-gradient(
+      45deg,
+      rgba(160, 160, 160, 0.15) 25%,
+      transparent 25%
+    ),
+    linear-gradient(-45deg, rgba(160, 160, 160, 0.15) 25%, transparent 25%),
+    linear-gradient(45deg, transparent 75%, rgba(160, 160, 160, 0.15) 75%),
+    linear-gradient(-45deg, transparent 75%, rgba(160, 160, 160, 0.15) 70%);
   background-size: 64px 64px;
   background-position: 0 0, 0 32px, 32px -32px, -32px 0px;
 }
@@ -128,4 +141,4 @@ select.pr-ToolbarSelector.jp-mod-styled {
 .pr-DragImage {
   box-shadow: var(--jp-elevation-z1);
   border: var(--jp-border-width) solid var(--jp-brand-color1);
-}
+}

style/variables.css

@@ -402,4 +402,4 @@ all of MD as it is not optimized for dense, information rich UIs.
   --jp-icon-contrast-color1: var(--md-green-600);
   --jp-icon-contrast-color2: var(--md-pink-600);
   --jp-icon-contrast-color3: var(--md-blue-600);
-}
+}