removed blueprint dependency

package.json

@@ -3,8 +3,6 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
-    "@blueprintjs/core": "^1.19.0",
-    "@blueprintjs/table": "^1.16.0",
     "@types/es6-shim": "^0.31.34",
     "@types/jest": "^19.2.4",
     "@types/lodash": "^4.14.66",

src/App.test.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import * as ReactDOM from 'react-dom';
-import App from './App';
+import { App } from './App';
 
 it('renders without crashing', () => {
   const div = document.createElement('div');

src/App.tsx

@@ -1,24 +1,21 @@
 import * as React from 'react';
-import LexEditor from './LexComponents';
-// import { Table } from '@blueprintjs/table';
-// const logo = require('./logo.svg');
+import { LexEditor } from './LexComponents';
+import { Header, Icon, Segment } from 'semantic-ui-react';
 
-class App extends React.Component<{}, null> {
+export class App extends React.Component<{}, null> {
   render() {
     return (
       <div>
-        <nav className="pt-navbar pt-dark">
-          <div className="pt-navbar-group pt-align-left">
-            <button
-              className="pt-button pt-minimal pt-icon-large pt-icon-edit"
-            />
-            <div className="pt-navbar-heading">Freespeech Lexicon Editor</div>
-          </div>
-        </nav>
+        <Segment inverted={true} size="tiny" attached={true}>
+          <Header inverted={true} color="teal" size="mini">
+            <Icon name="edit" size="small" />
+            <Header.Content>
+              Freespeech Lexicon Editor
+            </Header.Content>
+          </Header>
+        </Segment>
         <LexEditor fileName="/new_es.xml" />
       </div>
     );
   }
 }
-
-export default App;

src/LexComponents.tsx

@@ -1,15 +1,15 @@
 import * as React from 'react';
 import * as _ from 'lodash';
-// import {
-//   FocusStyleManager,
-// } from '@blueprintjs/core';
-import { Image,Input } from 'semantic-ui-react';
+import {
+  Image,
+  Input,
+  Dropdown,
+  Card,
+} from 'semantic-ui-react';
 import * as XML from 'xml2js';
 import { LexSingleInput } from './LexInputComponents';
 const { Flex, Box } = require('reflexbox');
 
-// FocusStyleManager.onlyShowFocusOnTabs();
-
 interface LexEditorProps {
   fileName: RequestInfo;
 }
@@ -31,7 +31,7 @@ const fieldMetaMap = {
   'lang': { lens: '$.id', type: 'select' },
 };
 
-class LexEditor extends React.Component<LexEditorProps, any> {
+export class LexEditor extends React.Component<LexEditorProps, any> {
   lexData: any;
   allEntries: any;
   selectFields: any;
@@ -99,46 +99,39 @@ class LexEditor extends React.Component<LexEditorProps, any> {
 
 class LexSearch extends React.Component<any, any> {
   searchType: String = 'label';
-  searchValue: String = '';
+  searchValue: String = 'just';
   public render() {
+    let dropOptions = _.keys(fieldMetaMap).map((k, i, c) => {
+      return { key: i, value: k, text: _.capitalize(k) };
+    });
     return (
-      <Flex p={1} align="center" className="pt-control-group">
-        <div
-          className="pt-select"
-          onChange={e => this.handleTypeChange(e)}
-        >
-          <select>
-            {_.keys(fieldMetaMap).map((k, i, c) => {
-              return <option key={i} value={k}> {_.capitalize(k)}</option>;
-            })}
-          </select>
-        </div>
-        <div className="pt-input-group" style={{ width: '120px' }}>
-          <span className="pt-icon pt-icon-search" />
-          <Input
-            type="text"
-            placeholder="Search input"
-            dir="auto"
-            onChange={e => this.handleLookup(e)}
-          />
-        </div>
-      </Flex>
+      <div>
+        <Dropdown
+          options={dropOptions}
+          onChange={(e, d) => this.handleChange(d, true)}
+          defaultValue={dropOptions[0].value}
+          compact={true}
+          selection={true}
+        />
+        <Input
+          type="text"
+          placeholder="Search input"
+          dir="auto"
+          onChange={(e, d) => this.handleChange(d, false)}
+        />
+      </div>
     );
   }
 
-  private handleLookup(e: any) {
-    this.searchValue = e.target.value;
+  private handleChange(e: any, t: boolean) {
+    if (t) {
+      this.searchType = e.value;
+    } else {
+      this.searchValue = e.value;
+    }
     this.props.handleOnSearch({
-      searchType: this.searchType
-      , searchValue: this.searchValue
-    });
-  }
-
-  private handleTypeChange(e: any) {
-    this.searchType = e.target.value;
-    this.props.handleOnSearch({
-      searchType: this.searchType
-      , searchValue: this.searchValue
+      searchType: this.searchType,
+      searchValue: this.searchValue
     });
   }
 }
@@ -146,14 +139,9 @@ class LexSearch extends React.Component<any, any> {
 function selectMode(props: any) {
   if (props.searchText === '') {
     return (
-      <div className="pt-non-ideal-state">
-        <div className="pt-non-ideal-state-visual pt-non-ideal-state-icon">
-          <span className="pt-icon pt-icon-folder-open" />
-        </div>
-        <h4 className="pt-non-ideal-state-title">Empty</h4>
-        <div className="pt-non-ideal-state-description">
-          Type something in the searchbar.
-        </div>
+      <div>
+        <h4>Empty</h4>
+        Type something in the searchbar.
       </div>
     );
   } else {
@@ -183,7 +171,7 @@ function selectMode(props: any) {
 
 function LexMatches(props: any) {
   return (
-    <Flex m={10} align="center" wrap={true}>
+    <Flex wrap={true}>
       {selectMode(props)}
     </Flex>
   );
@@ -206,11 +194,11 @@ class LexEdit extends React.Component<any, any> {
           <LexSingleInput key={field} labelText={_.capitalize(field)}>
             <Input
               onChange={sh}
-              style={{ width: '110px' }}
               defaultValue={defaultText}
               placeholder={field}
               type="text"
               dir="auto"
+              style={{ width: '150px' }}
             />
           </LexSingleInput>
         );
@@ -219,8 +207,7 @@ class LexEdit extends React.Component<any, any> {
           <LexSingleInput key={field} labelText={_.capitalize(field)}>
             <select
               onChange={sh}
-              style={{ width: '110px' }}
-              className="pt-select"
+              style={{ width: '150px' }}
               defaultValue={defaultText}
             >
               {this.props.selectionMeta[field].map((k: any, i: any, c: any) => {
@@ -233,7 +220,7 @@ class LexEdit extends React.Component<any, any> {
         let imageSrc = imageRoot + defaultText;
         return (
           <LexSingleInput key={field} labelText={_.capitalize(field)}>
-            <Image src={imageSrc} size="small"/>
+            <Image src={imageSrc} size="tiny" bordered={true}/>
           </LexSingleInput>
         );
       } else {
@@ -241,21 +228,19 @@ class LexEdit extends React.Component<any, any> {
       }
     });
     return (
-      <Box
-        wx={240}
-        mx={10}
-        my={20}
-        className="pt-card pt-elevation-2 pt-interactive"
-      >
-        <label className="pt-label">
-          GUID {_.get<any>(li, 'guid', '')}
-        </label>
-        <label className="pt-label">
-          Language: {_.get<any>(li, '$.id', '')}
-        </label>
-        <Box column={true} m={1}>
+      <Box m={2}>
+        <Card raised={true}>
+          <Card.Content>
+            <Card.Header>
+              GUID {_.get<any>(li, 'guid', '')}
+            </Card.Header>
+            <Card.Meta>
+              language: {_.get<any>(li, '$.id', '')}
+            </Card.Meta>
+          </Card.Content>
+
           {lexFields}
-        </Box>
+        </Card>
       </Box>
     );
   }
@@ -264,5 +249,3 @@ class LexEdit extends React.Component<any, any> {
     this.setState(event);
   }
 }
-
-export default LexEditor;

src/LexInputComponents.tsx

@@ -1,21 +1,25 @@
 import * as React from 'react';
-const { Box } = require('reflexbox');
+import { Label, Form } from 'semantic-ui-react';
+const { Flex, Box } = require('reflexbox');
 
 export class LexSingleInput extends React.Component<any, any> {
   public render() {
     return (
-      <div className="pt-form-group pt-inline">
-        <Box w={2 / 5}>
-          <label
-            style={{ textAlign: 'right' }}
-            className="pt-label"
-          >
-            {this.props.labelText}
-          </label>
-        </Box>
-        <Box w={3 / 5}>
-          {this.props.children}
-        </Box>
+      <div>
+        <Form>
+          <Form.Group as={Flex} inline={true} style={{ margin: '0 0 5px 5px' }}>
+            <Form.Field as={Box} w={2 / 5} style={{ textAlign: 'right' }}>
+              <Label
+                pointing="right"
+              >
+                {this.props.labelText}
+              </Label>
+            </Form.Field>
+            <Form.Field as={Box} w={3 / 5} >
+              {this.props.children}
+            </Form.Field>
+          </Form.Group>
+        </Form>
       </div>
     );
   }

src/index.css

@@ -1,3 +1,2 @@
 @import "~normalize.css/normalize.css";
-@import "~@blueprintjs/core/dist/blueprint.css";
 @import "~semantic-ui-css/semantic.min.css";

src/index.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import * as ReactDOM from 'react-dom';
-import App from './App';
+import { App } from './App';
 import registerServiceWorker from './registerServiceWorker';
 import './index.css';