init project

antoni-g · Aug 12, 2018 · 9cfa3dc · 9cfa3dc
commit 9cfa3dc
Show file tree

Hide file tree

Showing 52 changed files with 9,320 additions and 0 deletions.
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1,25 @@
+# dependencies
+node_modules
+
+# testing
+coverage
+
+# production
+build
+
+# logs
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+lerna-debug.log*
+
+# IDE
+.idea
+
+# misc
+.DS_Store
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+src/edikit
diff --git a/README.md b/README.md
@@ -0,0 +1,3 @@
+# WireMock UI
+
+An unofficial UI for [WireMock](http://wiremock.org/).
diff --git a/images.d.ts b/images.d.ts
@@ -0,0 +1,3 @@
+declare module '*.svg'
+declare module '*.png'
+declare module '*.jpg'
diff --git a/package.json b/package.json
@@ -0,0 +1,48 @@
+{
+  "name": "ui",
+  "version": "0.1.0",
+  "private": true,
+  "proxy": "http://localhost:5000",
+  "dependencies": {
+    "@types/inline-style-prefixer": "^3.0.1",
+    "@types/lodash": "^4.14.116",
+    "@types/lunr": "^2.1.6",
+    "@types/react-redux": "^6.0.6",
+    "@types/recompose": "^0.26.4",
+    "@types/socket.io-client": "^1.4.32",
+    "@types/yup": "^0.24.7",
+    "brace": "^0.11.1",
+    "edikit": "*",
+    "eventemitter3": "^3.1.0",
+    "formik": "^1.0.2",
+    "lodash": "^4.17.10",
+    "lunr": "^2.3.1",
+    "react": "^16.4.2",
+    "react-ace": "^6.1.4",
+    "react-dom": "^16.4.2",
+    "react-feather": "^1.1.1",
+    "react-redux": "^5.0.7",
+    "react-scripts-ts": "2.17.0",
+    "react-split-pane": "^0.1.82",
+    "recompose": "^0.28.2",
+    "redux": "^4.0.0",
+    "rxjs": "^6.2.2",
+    "styled-components": "^3.4.2",
+    "typesafe-actions": "^2.0.4",
+    "yup": "^0.26.2"
+  },
+  "scripts": {
+    "start": "react-scripts-ts start",
+    "build": "react-scripts-ts build",
+    "test": "react-scripts-ts test --env=jsdom",
+    "eject": "react-scripts-ts eject"
+  },
+  "devDependencies": {
+    "@types/jest": "^23.3.1",
+    "@types/node": "^10.5.7",
+    "@types/react": "^16.4.8",
+    "@types/react-dom": "^16.0.7",
+    "redux-devtools-extension": "^2.13.5",
+    "typescript": "^3.0.1"
+  }
+}
diff --git a/public/favicon.ico b/public/favicon.ico
diff --git a/public/index.html b/public/index.html
@@ -0,0 +1,40 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+    <meta name="theme-color" content="#000000">
+    <!--
+      manifest.json provides metadata used when your web app is added to the
+      homescreen on Android. See https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/
+    -->
+    <link rel="manifest" href="%PUBLIC_URL%/manifest.json">
+    <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
+    <!--
+      Notice the use of %PUBLIC_URL% in the tags above.
+      It will be replaced with the URL of the `public` folder during the build.
+      Only files inside the `public` folder can be referenced from the HTML.
+
+      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
+      work correctly both with client-side routing and a non-root public URL.
+      Learn how to configure a non-root public URL by running `npm run build`.
+    -->
+    <title>wiremock-ui | non official</title>
+  </head>
+  <body>
+    <noscript>
+      You need to enable JavaScript to run this app.
+    </noscript>
+    <div id="root"></div>
+    <!--
+      This HTML file is a template.
+      If you open it directly in the browser, you will see an empty page.
+
+      You can add webfonts, meta tags, or analytics to this file.
+      The build step will place the bundled scripts into the <body> tag.
+
+      To begin the development, run `npm start` or `yarn start`.
+      To create a production bundle, use `npm run build` or `yarn build`.
+    -->
+  </body>
+</html>
diff --git a/public/manifest.json b/public/manifest.json
@@ -0,0 +1,15 @@
+{
+  "short_name": "WireMock UI",
+  "name": "WireMock UI",
+  "icons": [
+    {
+      "src": "favicon.ico",
+      "sizes": "64x64 32x32 24x24 16x16",
+      "type": "image/x-icon"
+    }
+  ],
+  "start_url": "./index.html",
+  "display": "standalone",
+  "theme_color": "#000000",
+  "background_color": "#ffffff"
+}
diff --git a/src/api.ts b/src/api.ts
@@ -0,0 +1,9 @@
+import {IServer} from './modules/servers'
+
+const buildApiUrl = (server: IServer, path: string): string =>
+    `${server.url}${server.port ? `:${server.port}` : ''}/__admin/${path}`
+
+export const getMappings = (server: IServer) =>
+    fetch(buildApiUrl(server, '/mappings'), {
+        method: 'GET',
+    }).then(r => r.json())
diff --git a/src/configureStore.ts b/src/configureStore.ts
@@ -0,0 +1,18 @@
+import {Store, createStore} from 'redux'
+import {composeWithDevTools} from 'redux-devtools-extension'
+
+import {IApplicationState, rootReducer} from './store'
+
+export default function configureStore(
+    initialState: IApplicationState
+): Store<IApplicationState> {
+    const composeEnhancers = composeWithDevTools({})
+
+    const store = createStore(
+        rootReducer,
+        initialState,
+        composeEnhancers()
+    )
+
+    return store
+}
diff --git a/src/editorConfig.ts b/src/editorConfig.ts
@@ -0,0 +1,2 @@
+import 'brace'
+import 'brace/mode/json'
diff --git a/src/globalStyles.ts b/src/globalStyles.ts
@@ -0,0 +1,75 @@
+import { injectGlobal } from 'styled-components'
+
+export default injectGlobal`
+body {
+  margin: 0;
+  padding: 0;
+  overflow: hidden;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+html, body, #root {
+    width: 100%;
+    height: 100%;
+    margin: 0;
+}
+
+#root {
+    position: fixed;
+}
+
+* {
+    box-sizing: border-box;
+}
+
+.Resizer {
+    background: #fff;
+    opacity: 0;
+    z-index: 1;
+    -moz-box-sizing: border-box;
+    -webkit-box-sizing: border-box;
+    box-sizing: border-box;
+    -moz-background-clip: padding;
+    -webkit-background-clip: padding;
+    background-clip: padding-box;
+}
+
+.Resizer:hover {
+    -webkit-transition: all 2s ease;
+    transition: all 2s ease;
+}
+
+.Resizer.horizontal {
+    height: 11px;
+    margin: -5px 0;
+    border-top: 5px solid rgba(255, 255, 255, 0);
+    border-bottom: 5px solid rgba(255, 255, 255, 0);
+    cursor: row-resize;
+    width: 100%;
+}
+
+.Resizer.horizontal:hover {
+    border-top: 5px solid rgba(0, 0, 0, 0.5);
+    border-bottom: 5px solid rgba(0, 0, 0, 0.5);
+}
+
+.Resizer.vertical {
+    width: 11px;
+    margin: 0 -5px;
+    border-left: 5px solid rgba(255, 255, 255, 0);
+    border-right: 5px solid rgba(255, 255, 255, 0);
+    cursor: col-resize;
+}
+
+.Resizer.vertical:hover {
+    border-left: 5px solid rgba(0, 0, 0, 0.5);
+    border-right: 5px solid rgba(0, 0, 0, 0.5);
+}
+.Resizer.disabled {
+    cursor: not-allowed;
+}
+.Resizer.disabled:hover {
+    border-color: transparent;
+}
+`
diff --git a/src/impl/pane.ts b/src/impl/pane.ts
@@ -0,0 +1,16 @@
+import {
+    PaneManager as BasePaneManager,
+    IPaneContent as BasePaneContent,
+    Pane as BasePane,
+} from 'edikit'
+
+export interface IWithData {
+    server: string
+    mappingIndex?: number
+}
+
+export interface IPaneContent extends BasePaneContent<IWithData> {}
+
+export class PaneManager extends BasePaneManager<IWithData> {}
+
+export class Pane extends BasePane<IWithData> {}
diff --git a/src/impl/themes/index.ts b/src/impl/themes/index.ts
@@ -0,0 +1,14 @@
+import {
+    ITheme,
+    blackTheme,
+    solarizedDarkTheme,
+    whiteTheme,
+} from 'edikit'
+
+const themes: { [name: string]: ITheme } = {
+    black: blackTheme,
+    'solarized dark': solarizedDarkTheme,
+    white: whiteTheme,
+}
+
+export default themes
diff --git a/src/impl/tree.ts b/src/impl/tree.ts
@@ -0,0 +1,19 @@
+import {
+    Tree as BaseTree,
+    ITreeNode as BaseTreeNode,
+    TreeClickHandler as BaseTreeClickHandler,
+    TreeIconGetter as BaseTreeIconGetter,
+} from 'edikit'
+
+export interface IWithData {
+    server: string
+    mappingIndex?: number
+}
+
+export interface ITreeNode extends BaseTreeNode<IWithData> {}
+
+export interface ITreeClickHandler extends BaseTreeClickHandler<IWithData> {}
+
+export interface ITreeIconGetter extends BaseTreeIconGetter<IWithData> {}
+
+export class Tree extends BaseTree<IWithData> {}
diff --git a/src/index.tsx b/src/index.tsx
@@ -0,0 +1,17 @@
+import * as React from 'react'
+import * as ReactDOM from 'react-dom'
+import './globalStyles'
+import './editorConfig'
+import App from './modules/core/AppContainer'
+import configureStore from './configureStore'
+
+const store = configureStore({
+    servers: {
+        servers: []
+    }
+})
+
+ReactDOM.render(
+    <App store={store}/>,
+    document.getElementById('root') as HTMLElement
+)
diff --git a/src/lib/status.ts b/src/lib/status.ts
@@ -0,0 +1,16 @@
+import { IThemeColors } from 'edikit'
+
+const mapping = {
+    'ok': 'success',
+    'ko': 'danger',
+    'warn': 'warning',
+    'none': 'muted',
+}
+
+export const getColorForStatus = (colors: IThemeColors, status?: 'ok' | 'ko' | 'warn' | 'none') => {
+    if (status === undefined || status === null) {
+        return colors.accent
+    }
+
+    return colors[mapping[status]]
+}
diff --git a/src/modules/core/App.tsx b/src/modules/core/App.tsx
@@ -0,0 +1,47 @@
+import * as React from 'react'
+import SplitPane from 'react-split-pane'
+import AppBar from './AppBar'
+import Sidebar from './Sidebar'
+import { Container, Inner } from './App_styled'
+import { PaneManager, Pane } from '../../impl/pane'
+import { ITreeNode, ITreeClickHandler } from '../../impl/tree'
+
+export interface IAppProps {
+    tree: ITreeNode
+    openedTreeNodeIds: string[]
+    currentTreeNodeIds: string[]
+    onTreeClick: ITreeClickHandler
+    paneManager: PaneManager
+}
+
+export default class App extends React.Component<IAppProps> {
+    render() {
+        const {
+            tree,
+            openedTreeNodeIds,
+            currentTreeNodeIds,
+            onTreeClick,
+            paneManager,
+        } = this.props
+
+        return (
+            <Container>
+                <AppBar paneManager={paneManager}/>
+                <Inner>
+                    <SplitPane split="vertical" defaultSize={260}>
+                        <Sidebar
+                            tree={tree}
+                            openedTreeNodeIds={openedTreeNodeIds}
+                            currentTreeNodeIds={currentTreeNodeIds}
+                            onTreeClick={onTreeClick}
+                        />
+                        <Pane
+                            manager={paneManager}
+                            paneId="root"
+                        />
+                    </SplitPane>
+                </Inner>
+            </Container>
+        )
+    }
+}
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,3 @@
		# WireMock UI

		An unofficial UI for [WireMock](http://wiremock.org/).