Sandbox (#114)

* sandbox * readme
ukrbublik · Nov 3, 2019 · e1979b8 · e1979b8
1 parent d5ab329
commit e1979b8
Show file tree

Hide file tree

Showing 7 changed files with 78 additions and 11 deletions.
diff --git a/README.md b/README.md
@@ -1,6 +1,8 @@
 # react-awesome-query-builder
 [![npm](https://img.shields.io/npm/v/react-awesome-query-builder.svg)](https://www.npmjs.com/package/react-awesome-query-builder) [![github](https://img.shields.io/github/package-json/v/ukrbublik/react-awesome-query-builder.svg)](https://github.com/ukrbublik/react-awesome-query-builder/packages/48416) [![travis](https://travis-ci.org/ukrbublik/react-awesome-query-builder.svg?branch=master)](https://github.com/ukrbublik/react-awesome-query-builder)
 
+[![Open in codesandbox.io](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/react-awesome-query-builder-demo-64wwx?fontsize=14&module=%2Fdemo%2Fconfig.js)
+
 User-friendly React component to build queries.
 
 Inspired by [jQuery QueryBuilder](http://querybuilder.js.org/)
@@ -10,8 +12,11 @@ Using awesome [Ant Design](https://ant.design/) for widgets
 Master branch uses [antd v3](https://ant.design/docs/react/introduce).
 For [antd v2](https://2x.ant.design/docs/react/introduce) (which has more compact style) see [branch antd-2](https://github.com/ukrbublik/react-awesome-query-builder/tree/antd-2) and versions `0.1.*`. 
 
+[Demo](https://ukrbublik.github.io/react-awesome-query-builder)
+
 
 ### Features
+[![Screenshot](https://ukrbublik.github.io/react-awesome-query-builder/screenshot.png)](https://ukrbublik.github.io/react-awesome-query-builder)
 - Highly configurable
 - Fields can be of type:
   - simple (string, number, bool, date/time/datetime, list)
@@ -28,12 +33,6 @@ For [antd v2](https://2x.ant.design/docs/react/introduce) (which has more compac
 - Export to MongoDb or SQL
 
 
-### Demo
-[Live Demo](https://ukrbublik.github.io/react-awesome-query-builder)
-
-![Screenshot](https://ukrbublik.github.io/react-awesome-query-builder/screenshot.png)
-
-
 ### Install
 Install: `npm i react-awesome-query-builder`
 

diff --git a/examples/README.md b/examples/README.md
@@ -0,0 +1,15 @@
+# react-awesome-query-builder-demo
+
+Demo app
+
+### Sandbox
+[![Open in codesandbox.io](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/react-awesome-query-builder-demo-64wwx?fontsize=14&module=%2Fdemo%2Fconfig.js)
+
+Or create own temaplte on [codesandbox.io](https://codesandbox.io/) by importing from `https://github.com/ukrbublik/react-awesome-query-builder/tree/master/examples`, open `demo/config.js` and play!
+
+
+### Local
+```sh
+npm run examples
+```
+And open localhost:3001 in a browser.
diff --git a/examples/demo/demo.js b/examples/demo/demo.js
@@ -3,10 +3,6 @@ import {Query, Builder, Preview, Utils} from 'react-awesome-query-builder';
 const {queryBuilderFormat, queryString, mongodbFormat} = Utils;
 import config from './config';
 var stringify = require('json-stringify-safe');
-import '../../css/reset.scss';
-import '../../css/styles.scss';
-//import '../../css/compact_styles.scss';
-import '../../css/denormalize.scss';
 const Immutable = require('immutable');
 const transit = require('transit-immutable-js');
 import { fromJS } from 'immutable';

diff --git a/examples/index.html b/examples/index.html
@@ -3,7 +3,7 @@
   <meta charset="utf-8">
   <title>React Awesome Query Builder - Examples</title>
 </head>
-<body></body>
+<body><div id="root"></div></body>
 <script src="./bundle.js"></script>
 </html>
 
diff --git a/examples/index.js b/examples/index.js
@@ -3,6 +3,11 @@ import ReactDOM from 'react-dom';
 import Demo from './demo/demo.js';
 import { hot } from 'react-hot-loader'
 
+import '../css/reset.scss';
+import '../css/styles.scss';
+//import '../css/compact_styles.scss';
+import '../css/denormalize.scss';
+
 window.React = React;
 
 

diff --git a/examples/package.json b/examples/package.json
@@ -0,0 +1,32 @@
+{
+  "name": "react-awesome-query-builder-demo",
+  "version": "0.2.0",
+  "description": "Demo for react-awesome-query-builder",
+  "main": "sandbox.js",
+  "readme": "README.md",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/ukrbublik/react-awesome-query-builder.git"
+  },
+  "files": [
+    "demo/config.js",
+    "demo/demo.js",
+    "index.html",
+    "sandbox.js",
+    "README.md"
+  ],
+  "scripts": {
+    "start": "react-scripts start",
+    "build": "react-scripts build",
+    "test": "react-scripts test --env=jsdom",
+    "eject": "react-scripts eject"
+  },
+  "author": "Denis Oblogin <[email protected]> (https://github.com/ukrbublik)",
+  "homepage": "https://ukrbublik.github.io/react-awesome-query-builder/",
+  "dependencies": {
+    "react": "16.8.6",
+    "react-awesome-query-builder": "^0.2.53",
+    "react-dom": "16.8.6",
+    "react-scripts": "3.0.1"
+  }
+}
diff --git a/examples/sandbox.js b/examples/sandbox.js
@@ -0,0 +1,20 @@
+import React from "react";
+import ReactDOM from "react-dom";
+import Demo from "./demo/demo.js";
+
+
+import 'react-awesome-query-builder/css/reset.scss';
+import 'react-awesome-query-builder/css/styles.scss';
+import 'react-awesome-query-builder/css/denormalize.scss';
+
+function App() {
+  return (
+    <div className="App">
+      <Demo />
+    </div>
+  );
+}
+
+const rootElement = document.getElementById("root");
+ReactDOM.render(<App />, rootElement);
+