react-spectrum v3 ui components

.gitignore

@@ -14,6 +14,7 @@ client/coverage
 .DS_Store
 
 server/client-build/static
+server/client-build/index.html
 server/client-build/asset-manifest.json
 server/client-build/precache-manifest.*
 

client/package.json

@@ -3,7 +3,17 @@
 	"version": "0.1.0",
 	"private": true,
 	"dependencies": {
+		"@react-spectrum/button": "^3.0.0-rc.2",
+		"@react-spectrum/icon": "^3.0.0-rc.2",
+		"@react-spectrum/image": "^3.0.0-alpha.1",
+		"@react-spectrum/layout": "^3.0.0-alpha.1",
+		"@react-spectrum/link": "^3.0.0-alpha.1",
+		"@react-spectrum/provider": "^3.0.0-rc.2",
+		"@react-spectrum/theme-default": "^3.0.0-rc.2",
+		"@react-spectrum/view": "^3.0.0-alpha.1",
+		"@react-spectrum/well": "^3.0.0-rc.2",
 		"@react/react-spectrum": "^2.28.0",
+		"@spectrum-icons/workflow": "^3.0.0-rc.2",
 		"ace-builds": "^1.4.8",
 		"ajv": "^6.12.0",
 		"babel-polyfill": "^6.26.0",

client/src/App.js

@@ -14,8 +14,13 @@ governing permissions and limitations under the License.
 import React from 'react';
 
 // Importing react-spectrum components
-import Well from '@react/react-spectrum/Well';
-import Button from '@react/react-spectrum/Button';
+import {Well} from '@react-spectrum/well';
+import {Button} from '@react-spectrum/button';
+// import {Image} from '@react-spectrum/image';
+// import {Flex} from '@react-spectrum/layout'
+// import {Header, View} from '@react-spectrum/view'
+
+
 import {Toast} from '@react/react-spectrum/Toast';
 import Heading from '@react/react-spectrum/Heading';
 import {Image} from '@react/react-spectrum/Image';
@@ -398,11 +403,15 @@ export default class NormalDisplay extends React.Component {
                             minWidth: '500px', marginBottom: '1em',
                             overflow: 'scroll',
                             padding: '1rem'}}>
+
                         {/* choose file and add new file */}
                         <ChooseFileBox id="ChooseFileBox" onChange={this.handleSelectedFileChange.bind(this)} devToolToken={this.state.devToolToken} onError={this.handleApiErrors.bind(this)}/>
-                        <Button id="run" label="Run" variant="cta" style={{marginTop:15, marginLeft:10}} disabled={!this.state.selectedOption || this.state.running} onClick={this.run}/>
-                        <span id="tourStepThree" style={{position:"fixed", top:'35px', left:'420px'}}/>
-                        <Button id='Abort' label="Abort" variant="warning" style={{marginTop:15, marginLeft:10}} disabled={!this.state.running} onClick={this.abort.bind(this)}/>
+                        <Button id="run" variant="cta" isDisabled={!this.state.selectedOption || this.state.running} marginTop='15px' marginRight='10px' onPress={this.run}>
+                            Run
+                        </Button>
+                        <Button id='Abort' variant="negative" marginTop='15px' marginLeft='10px'  isDisabled={!this.state.running} onPress={this.abort.bind(this)}>
+                            Abort
+                        </Button>
 
                         <Editor onChange={(v) => {this.handleTextChange(v)}} onRun={this.run}/>
 

client/src/components/FileChooser/ChooseFileBox.jsx

@@ -12,14 +12,16 @@ governing permissions and limitations under the License.
 
 import React, { Component } from 'react';
 
-// Importing react-spectrum global page styles
-
-import Well from '@react/react-spectrum/Well';
-import Button from '@react/react-spectrum/Button';
+// v3
+import {Well} from '@react-spectrum/well';
+import {ActionButton} from '@react-spectrum/button';
+import {Icon} from '@react-spectrum/icon';
+import AddCircle from '@spectrum-icons/workflow//AddCircle';
+import Image from '@spectrum-icons/workflow//Image';
+
+// v2
 import OverlayTrigger from '@react/react-spectrum/OverlayTrigger';
 import Popover from '@react/react-spectrum/Popover';
-import AddCircle from '@react/react-spectrum/Icon/AddCircle';
-import Image from '@react/react-spectrum/Icon/Image';
 import ComboBox from '@react/react-spectrum/ComboBox';
 
 export default class ChooseFileBox extends Component {
@@ -164,8 +166,12 @@ export default class ChooseFileBox extends Component {
     render () {
         return (
             <div>
-            <Well style={{padding:10,display:'inline-block'}}>
-            <Button variant ='tool' id="file-chooser" quiet icon={<AddCircle size='M'/>} style={{marginRight:5,float:'left'}} onClick={(e) => {this._file.click()}}/>
+            <Well UNSAFE_style={{display:'inline-block'}}>
+            <ActionButton id="file-chooser" isQuiet marginRight='size-75' onPress={(e) => {this._file.click()}}>
+                <Icon >
+                <AddCircle size='M'/>
+                </Icon>
+            </ActionButton>
             <ComboBox
                 options={this.state.fileChoices}
                 placeholder="Select a file..."
@@ -176,12 +182,14 @@ export default class ChooseFileBox extends Component {
             <span style={{position:'fixed', top:'33px', left:'290px'}} id='ChooseFileButton' />
             <input id="myInput" type="file" onChange={this.onUpload.bind(this)} ref={(ref) => this._file = ref} style={{display:'none'}} />
             <OverlayTrigger  trigger="hover" disabled={!this.state.selectedOption} placement="right">
-             <Button  icon={<Image size='M'/>} style={{marginLeft:10}}  disabled={!this.state.selectedOption} quiet variant="action"/>
-             <Popover>
+             <ActionButton  marginLeft='size-100'  disabled={!this.state.selectedOption} isQuiet >
+                <Icon><Image size='M'/></Icon>
+            </ActionButton>
+                <Popover>
                  {this.state.image}
-             </Popover>
+                </Popover>
              </OverlayTrigger>
-            </Well>
+             </Well>
             <p style={{marginRight:300, marginLeft:20, bottom:4, position:'fixed', zIndex:'10'}}>{this.state.error}</p>
             </div>
         )