load styles in webview

Author: ShMcK

src/editor/ReactWebView.ts

@@ -1,6 +1,6 @@
-import * as vscode from 'vscode'
-import * as CR from 'typings'
 import * as path from 'path'
+import * as CR from 'typings'
+import * as vscode from 'vscode'
 
 /**
  * Manages React webview panels
@@ -71,7 +71,7 @@ class ReactWebView {
     if (callback) {
       // listen for when webview is loaded
       // unfortunately there is no easy way of doing this
-      let webPanelListener = setInterval(() => {
+      const webPanelListener = setInterval(() => {
         if (this.loaded) {
           setTimeout(callback)
           clearInterval(webPanelListener)
@@ -80,6 +80,27 @@ class ReactWebView {
     }
   }
 
+  public async postMessage(action: CR.Action): Promise<void> {
+    // Send a message to the webview webview.
+    // You can send any JSON serializable data.
+    const success = await this.panel.webview.postMessage(action)
+    if (!success) {
+      throw new Error(`Message post failure: ${JSON.stringify(action)}`)
+    }
+  }
+
+  public dispose(): void {
+    // Clean up our resources
+    this.panel.dispose()
+
+    while (this.disposables.length) {
+      const x = this.disposables.pop()
+      if (x) {
+        x.dispose()
+      }
+    }
+  }
+
   private createWebviewPanel(column: number): vscode.WebviewPanel {
     const viewType = 'CodeRoad'
     const title = 'CodeRoad'
@@ -103,27 +124,6 @@ class ReactWebView {
     return text
   }
 
-  public async postMessage(action: CR.Action): Promise<void> {
-    // Send a message to the webview webview.
-    // You can send any JSON serializable data.
-    const success = await this.panel.webview.postMessage(action)
-    if (!success) {
-      throw new Error(`Message post failure: ${JSON.stringify(action)}`)
-    }
-  }
-
-  public dispose(): void {
-    // Clean up our resources
-    this.panel.dispose()
-
-    while (this.disposables.length) {
-      const x = this.disposables.pop()
-      if (x) {
-        x.dispose()
-      }
-    }
-  }
-
   private getHtmlForWebview(): string {
     // eslint-disable-next-line
     const manifest = require(path.join(this.extensionPath, 'build', 'asset-manifest.json'))
@@ -151,6 +151,8 @@ class ReactWebView {
                     <meta name="theme-color" content="#000000">
                     <title>React App</title>
                     <link rel="manifest" href="./manifest.json" />
+                    <!-- TODO: load styles through package -->
+                    <link rel="stylesheet" href="https://unpkg.com/@alifd/next/dist/next.css" />
                     <link rel="stylesheet" type="text/css" href="${styleUri}">
                     <meta http-equiv="Content-Security-Policy" content="default-src 'none'; img-src vscode-resource: https:; script-src 'nonce-${n1}' 'nonce-${n2}' 'nonce-${n3}'; style-src vscode-resource: 'unsafe-inline' http: https: data:;">
                     <base href="${vscode.Uri.file(path.join(this.extensionPath, 'build')).with({

web-app/.storybook/config.ts

@@ -1,4 +1,4 @@
-import '@alifd/next/dist/next.css'
+// import '@alifd/next/dist/next.css'
 import { configure } from '@storybook/react'
 import '../src/styles/index.css'
 

web-app/src/Routes.tsx

@@ -1,19 +1,27 @@
 import * as React from 'react'
 
-import Loading from './components/Loading'
 import Cond from './components/Cond'
-import NewPage from './containers/New'
+import Loading from './components/Loading'
 import ContinuePage from './containers/Continue'
+import NewPage from './containers/New'
 import TutorialPage from './containers/Tutorial'
 
 interface Props {
   state: any
 }
 
+const styles = {
+  page: {
+    width: window.innerWidth,
+    height: window.innerHeight,
+    backgroundColor: 'white',
+  },
+}
+
 const Routes = ({ state }: Props) => {
   // TODO: refactor cond to user <Router><Route> and accept first route as if/else if
   return (
-    <div>
+    <div style={styles.page}>
       <Cond state={state} path="SelectTutorial.Startup">
         <Loading />
       </Cond>

web-app/src/index.tsx

@@ -2,6 +2,7 @@ import React from 'react'
 import ReactDOM from 'react-dom'
 import App from './App'
 
+// base styles
 import './styles/index.css'
 
 ReactDOM.render(<App />, document.getElementById('root') as HTMLElement)

web-app/stories/Stage.stories.tsx

@@ -38,15 +38,15 @@ function someExample(a) {
             `,
           },
           hints: [],
-          status: { active: false, complete: true },
+          status: { active: true, complete: false },
         },
         step3Id: {
           content: {
             title: 'Divide',
             text: 'Write a function `divide` that divides',
           },
           hints: [],
-          status: { active: true, complete: false },
+          status: { active: false, complete: false },
         },
       })}
       stage={object('stage', demo.data.stages.stage1Id)}