asyncapi · magicmatatjahu · Dec 4, 2018 · Nov 23, 2018 · Nov 25, 2018 · Nov 25, 2018
@@ -31,9 +31,8 @@
     "lib"
   ],
   "scripts": {
-    "start": "react-scripts start",
-    "build": "react-scripts build",
-    "build:lib": "tsc",
+    "start": "tsc --watch",
+    "build": "tsc",
     "test": "jest -i",
     "test:unit": "jest unit",
     "test:integration": "jest integration",
@@ -61,7 +60,6 @@
     "@types/styled-components": "^4.0.3",
     "react": "^16.6.0",
     "react-dom": "^16.6.0",
-    "babel-cli": "^6.26.0",
     "enzyme": "^3.7.0",
     "enzyme-adapter-react-16": "^1.7.0",
     "jest": "^23.6.0",

@@ -1,5 +1,6 @@
 export interface ConfigInterface {
-  show: ShowConfig
+  show: ShowConfig,
+  disableDefaultTheme: boolean,
 }
 
 interface ShowConfig {

@@ -10,5 +10,6 @@ export const defaultConfig: ConfigInterface = {
     events: true,
     messages: true,
     schemas: true,
-  }
+  },
+  disableDefaultTheme: false,
 }
@@ -75,8 +75,8 @@ class AsyncApiComponent extends Component<AsyncApiProps, AsyncApiState> {
     const { theme, config } = this.props;
     const { validatedSchema, validated } = this.state;
 
-    const concatenatedTheme: ThemeInterface = { ...kymaTheme, ...theme };
-    const concatenatedConfig: ConfigInterface = { ...defaultConfig, ...config };
+    const concatenatedConfig: ConfigInterface = { ...defaultConfig, ...config, show: { ...defaultConfig.show, ...(config && config.show ? config.show : {}), } };
+    const concatenatedTheme: ThemeInterface = concatenatedConfig.disableDefaultTheme ? theme as ThemeInterface : { ...kymaTheme, ...theme };
 
     if (!(validatedSchema && validated)) return null;
 

@@ -1,4 +1,5 @@
 import AsyncApi from './containers/AsyncApi/AsyncApi';
+export { AsyncApiProps } from './containers/AsyncApi/AsyncApi';
 export { ThemeInterface } from './theme/theme';
 export { ConfigInterface } from './config/config';
 export { AsyncApi as AsyncApiInterface } from './types';

@@ -13,9 +13,13 @@
     "url": "https://github.com/kyma-incubator/asyncapi-react/issues"
   },
   "scripts": {
-    "bootstrap": "lerna bootstrap",
+    "bootstrap": "lerna bootstrap && npm run build:lib",
     "clean": "lerna clean",
-    "playground": "cd playground && npm run start"
+    "start": "lerna exec --parallel -- npm run start",
+    "build:lib": "cd library && npm build",
+    "test": "lerna exec -- npm run test",
+    "test:library": "cd library && npm test",
+    "test:playground": "cd playground && npm test"
   },
   "devDependencies": {
     "husky": "^1.1.2",
@@ -31,11 +35,9 @@
     }
   },
   "lint-staged": {
-    "linters": {
-      "**/*.{ts,tsx,js,jsx,json}": [
-        "prettier --write",
-        "git add"
-      ]
-    }
+    "**/*.{css,js,jsx,json,ts,tsx}": [
+      "prettier --write",
+      "git add"
+    ]
   }
 }
@@ -1,5 +1,5 @@
 {
-  "name": "asyncapi-react-playground",
+  "name": "playground",
   "version": "0.1.0",
   "private": true,
   "description": "Playground app for AsyncApi React Component",

@@ -2,39 +2,32 @@
 <html lang="en">
   <head>
     <meta charset="utf-8">
+    <title>AsyncApi React Playground App</title>
+    <link rel="apple-touch-icon" sizes="57x57" href="%PUBLIC_URL%/apple-icon-57x57.png">
+    <link rel="apple-touch-icon" sizes="60x60" href="%PUBLIC_URL%/apple-icon-60x60.png">
+    <link rel="apple-touch-icon" sizes="72x72" href="%PUBLIC_URL%/apple-icon-72x72.png">
+    <link rel="apple-touch-icon" sizes="76x76" href="%PUBLIC_URL%/apple-icon-76x76.png">
+    <link rel="apple-touch-icon" sizes="114x114" href="%PUBLIC_URL%/apple-icon-114x114.png">
+    <link rel="apple-touch-icon" sizes="120x120" href="%PUBLIC_URL%/apple-icon-120x120.png">
+    <link rel="apple-touch-icon" sizes="144x144" href="%PUBLIC_URL%/apple-icon-144x144.png">
+    <link rel="apple-touch-icon" sizes="152x152" href="%PUBLIC_URL%/apple-icon-152x152.png">
+    <link rel="apple-touch-icon" sizes="180x180" href="%PUBLIC_URL%/apple-icon-180x180.png">
+    <link rel="icon" type="image/png" sizes="192x192"  href="%PUBLIC_URL%/android-icon-192x192.png">
+    <link rel="icon" type="image/png" sizes="32x32" href="%PUBLIC_URL%/favicon-32x32.png">
+    <link rel="icon" type="image/png" sizes="96x96" href="%PUBLIC_URL%/favicon-96x96.png">
+    <link rel="icon" type="image/png" sizes="16x16" href="%PUBLIC_URL%/favicon-16x16.png">
+    <link rel="manifest" href="%PUBLIC_URL%/manifest.json">
+    <meta name="msapplication-TileColor" content="#ffffff">
+    <meta name="msapplication-TileImage" content="%PUBLIC_URL%/ms-icon-144x144.png">
+    <meta name="theme-color" content="#ffffff">
     <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
     <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/web-app-manifest/
-    -->
-    <link rel="manifest" href="%PUBLIC_URL%/manifest.json">
-    <!--
-      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>React App</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>
@@ -1,11 +1,42 @@
 {
-  "short_name": "React App",
-  "name": "Create React App Sample",
+  "short_name": "AsyncApi React",
+  "name": "AsyncApi React Playground App",
   "icons": [
     {
-      "src": "favicon.ico",
-      "sizes": "64x64 32x32 24x24 16x16",
-      "type": "image/x-icon"
+    "src": "\/android-icon-36x36.png",
+    "sizes": "36x36",
+    "type": "image\/png",
+    "density": "0.75"
+    },
+    {
+    "src": "\/android-icon-48x48.png",
+    "sizes": "48x48",
+    "type": "image\/png",
+    "density": "1.0"
+    },
+    {
+    "src": "\/android-icon-72x72.png",
+    "sizes": "72x72",
+    "type": "image\/png",
+    "density": "1.5"
+    },
+    {
+    "src": "\/android-icon-96x96.png",
+    "sizes": "96x96",
+    "type": "image\/png",
+    "density": "2.0"
+    },
+    {
+    "src": "\/android-icon-144x144.png",
+    "sizes": "144x144",
+    "type": "image\/png",
+    "density": "3.0"
+    },
+    {
+    "src": "\/android-icon-192x192.png",
+    "sizes": "192x192",
+    "type": "image\/png",
+    "density": "4.0"
     }
   ],
   "start_url": ".",

@@ -1,59 +1,85 @@
 import React, { Component } from 'react';
 import AsyncApi, { ThemeInterface, ConfigInterface } from 'asyncapi-react';
 
-import { Navigation, CodeEditor, FetchSchema, Tabs, Tab, PlaygroundWrapper, ContentWrapper, CodeEditorsWrapper, AsyncApiWrapper } from './components';
+import { Navigation, CodeEditor, FetchSchema, RefreshIcon, Tabs, Tab, PlaygroundWrapper, ContentWrapper, CodeEditorsWrapper, AsyncApiWrapper } from './components';
 
-import { yamlMock3, mock, defaultTheme, defaultConfig, parse, stringify, jsonMock } from './common';
+import { defaultSchema, defaultKymaTheme, defaultConfig, parse, stringify } from './common';
 
 interface State {
   schema: string,
   theme: string,
   config: string,
+  schemaFromEditor: string;
+  schemaFromExternalResource: string;
+  themeFromEditor: string;
+  configFromEditor: string;
 }
 
 class Playground extends Component<{}, State> {
   state = {
-    schema: JSON.stringify(mock),
-    theme: stringify<ThemeInterface>(defaultTheme),
-    config: stringify<ConfigInterface>(defaultConfig),
+    schema: defaultSchema,
+    theme: stringify<ThemeInterface>(defaultKymaTheme),
+    config: defaultConfig,
+    schemaFromEditor: defaultSchema,
+    schemaFromExternalResource: '',
+    themeFromEditor: stringify<ThemeInterface>(defaultKymaTheme),
+    configFromEditor: defaultConfig
   }
 
   private updateSchema = (schema: string) => {
-    this.setState({ schema });
+    this.setState({ schemaFromEditor: schema });
+  }
+
+  private updateSchemaFromExternalResource = (schema: string) => {
+    this.setState({ schemaFromExternalResource: schema });
   }
 
   private updateTheme = (theme: string) => {
-    this.setState({ theme });
+    this.setState({ themeFromEditor: theme });
   }
 
   private updateConfig = (config: string) => {
-    this.setState({ config });
+    this.setState({ configFromEditor: config });
+  }
+
+  private refreshState = () => {
+    const { schemaFromEditor, themeFromEditor, configFromEditor } = this.state;
+    this.setState({
+      schema: schemaFromEditor,
+      theme: themeFromEditor,
+      config: configFromEditor
+    });
+  }
+
+  private renderAdditionalHeaderContent = () => {
+    return (
+      <RefreshIcon onClick={this.refreshState}>{"\uE00A"}</RefreshIcon>
+    );
   }
 
   render() {
-    const { schema, theme, config } = this.state;
+    const { schema, theme, config, schemaFromEditor, schemaFromExternalResource, themeFromEditor, configFromEditor } = this.state;
 
     const parsedTheme = parse<ThemeInterface>(theme);
     const parsedConfig = parse<ConfigInterface>(config);
 
     return (
       <PlaygroundWrapper>
-        {/* <Navigation>
-        </Navigation> */}
+        <Navigation />
         <ContentWrapper>
           <CodeEditorsWrapper>
-            <Tabs>
+            <Tabs additionalHeaderContent={this.renderAdditionalHeaderContent()}>
               <Tab title="Schema" key="Schema">
                 <>
-                  <FetchSchema link="" />
-                  <CodeEditor key="Schema" code={schema} parentCallback={this.updateSchema} />
+                  <FetchSchema parentCallback={this.updateSchemaFromExternalResource} />
+                  <CodeEditor key="Schema" code={schemaFromEditor} externalResource={schemaFromExternalResource} parentCallback={this.updateSchema} mode="text/yaml" />
                 </>
               </Tab>
               <Tab title="Theme" key="Theme">
-                <CodeEditor key="Theme" code={theme} parentCallback={this.updateTheme} />
+                <CodeEditor key="Theme" code={themeFromEditor} parentCallback={this.updateTheme} />
               </Tab>
               <Tab title="Configuration" key="Configuration">
-                <CodeEditor key="Configuration" code={config} parentCallback={this.updateConfig} />
+                <CodeEditor key="Configuration" code={configFromEditor} parentCallback={this.updateConfig} />
               </Tab>
             </Tabs>
           </CodeEditorsWrapper>

@@ -1,14 +1,13 @@
-import { ConfigInterface } from 'asyncapi-react';
-
-export const defaultConfig: ConfigInterface = {
-  show: {
-    info: true,
-    servers: true,
-    security: true,
-    topics: true,
-    stream: true,
-    events: true,
-    messages: true,
-    schemas: true,
-  }
-}
+export const defaultConfig: string = `{
+  "show": {
+    "info": true,
+    "servers": true,
+    "security": true,
+    "topics": true,
+    "stream": true,
+    "events": true,
+    "messages": true,
+    "schemas": true
+  },
+  "disableDefaultTheme": false
+}`;