diff --git a/README.md b/README.md index 8d2abbbca..2528c466e 100644 --- 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 new file mode 100644 index 000000000..acf30163d --- /dev/null +++ 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 index f4e6fdc86..1e63162aa 100644 --- 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 index acfedf1d0..0c49a6fb3 100644 --- a/examples/index.html +++ b/examples/index.html @@ -3,7 +3,7 @@ React Awesome Query Builder - Examples - +
diff --git a/examples/index.js b/examples/index.js index a68b9fdd5..52e59ad12 100644 --- 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 new file mode 100644 index 000000000..cf61d3504 --- /dev/null +++ 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 (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 new file mode 100644 index 000000000..e70e4bf92 --- /dev/null +++ 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 ( +
+ +
+ ); +} + +const rootElement = document.getElementById("root"); +ReactDOM.render(, rootElement); +