Refactored examples demo app (#1097)

* refactored examples

.

* chlog

* bash -> sh for CSB

* github.dev

Author: ukrbublik

.devcontainer/devcontainer.json

@@ -0,0 +1,44 @@
+{
+  "image": "mcr.microsoft.com/devcontainers/universal:2",
+  "features": {
+  },
+  
+  "customizations": {
+    "codespaces": {
+      "openFiles": [
+        "README.md",
+        "packages/examples/src/demo/index.tsx"
+      ]
+    }
+  },
+  
+  "postCreateCommand": "./scripts/nvms.sh pnpm install",
+  "postAttachCommand": {
+    "server": "./scripts/nvms.sh pnpm start"
+  },
+
+  "forwardPorts": [
+    3001,
+    5174,
+    5175,
+    3002
+  ],
+  "portsAttributes": {
+    "3001": {
+      "label": "Examples app",
+      "onAutoForward": "openPreview"
+    },
+    "3002": {
+      "label": "Sandbox Next.js",
+      "onAutoForward": "openPreview"
+    },
+    "5174": {
+      "label": "Sandbox simple",
+      "onAutoForward": "openPreview"
+    },
+    "5175": {
+      "label": "Sandbox",
+      "onAutoForward": "openPreview"
+    }
+  }
+}

.vscode/extensions.json

@@ -0,0 +1,5 @@
+{
+    "recommendations": [
+        "actboy168.tasks"
+    ]
+}

CHANGELOG.md

@@ -3,6 +3,7 @@
   - Fixed `Utils.isValidTree` for prod build.
     Removed `checkTree`, `isValidTree` from `Utils.Import` and `getTreeBadFields` from `Utils.TreeUtils`. (PR #1091) (issue #1075)
   - Use pnpm 8
+  - Refactored examples demo app (PR #1097)
 - 6.6.2
   - Fixed issue with rendering func select inside func (PR #1086) (issue #1085)
   - Added `DefaultUtils` typings to `index.d.ts` (PR #1078) (issue #1079)

CONFIG.adoc

@@ -14,7 +14,7 @@ endif::[]
 :i18n:         https://github.com/ukrbublik/react-awesome-query-builder/#i18n
 :config1:      https://github.com/ukrbublik/react-awesome-query-builder/tree/master/packages/sandbox_simple/src/demo/config.jsx
 :config2:      https://github.com/ukrbublik/react-awesome-query-builder/tree/master/packages/sandbox/src/demo/config.tsx
-:config3:      https://github.com/ukrbublik/react-awesome-query-builder/tree/master/packages/examples/demo/config.tsx
+:config3:      https://github.com/ukrbublik/react-awesome-query-builder/tree/master/packages/examples/src/demo/config/index.tsx
 :funcs:        https://github.com/ukrbublik/react-awesome-query-builder/tree/master/packages/core/modules/config/funcs.js
 :renderSwitch: https://github.com/ukrbublik/react-awesome-query-builder/blob/master/packages/antd/modules/config/index.jsx#L54
 :config_ser:   https://github.com/ukrbublik/react-awesome-query-builder/blob/master/packages/sandbox_next/lib/config_ser.js
@@ -235,7 +235,7 @@ Example:
 |fieldSettings.useAsyncSearch |- for `select` widget |false |If true, `asyncFetch` supports search.
 |fieldSettings.useLoadMore |- for `select` widget |false |If true, `asyncFetch` supports pagination.
 |defaultValue | | |Default value
-|preferWidgets | | |See usecase at {config3}[`examples/demo`] for `slider` field. +
+|preferWidgets | | |See usecase at {config3}[`packages/examples/src/demo/config`] for `slider` field. +
   Its type is `number`. There are 3 widgets defined for number type: `number`, `slider`, `rangeslider`. +
   So setting `preferWidgets: ['slider', 'rangeslider']` will force rendering slider, and setting `preferWidgets: ['number']` will render number input.
 |operators, defaultOperator, widgets, valueSources | | |You can override config of corresponding type (see below at section link:#configtypes[config.types])
@@ -576,7 +576,7 @@ There is also special `proximity` operator, its options are rendered with `<Prox
 import {CustomOperators: {ProximityOperator}} from '@react-awesome-query-builder/ui';
 ----
 
-See {config3}[`examples/demo`]
+See {config3}[`packages/examples/src/demo/config`]
 ====
 
 
@@ -720,7 +720,7 @@ To enable this feature set `valueSources` of type to `['value', 'func']` (see be
 |valueSources | |keys of `valueSourcesInfo` at link:#configsettings[config.settings] |Array with values `'value'`, `'field'`, `'func'`. If `'value'` is included, you can compare field with values. If `'field'` is included, you can compare field with another field of same type. If `'func'` is included, you can compare field with result of function (see link:#configfuncs[config.funcs]).
 |defaultOperator | | |If specified, it will be auto selected when user selects field
 |widgets.* |+ | |Available widgets for current type and their config. +
-  Normally there is only 1 widget per type. But see type `number` at {config3}[`examples/demo`] - it has 3 widgets `number`, `slider`, `rangeslider`. +
+  Normally there is only 1 widget per type. But see type `number` at {config3}[`packages/examples/src/demo/config`] - it has 3 widgets `number`, `slider`, `rangeslider`. +
   Or see type `select` - it has widget `select` for operator `=` and widget `multiselect` for operator `IN`.
 |widgets.<widget>.operators | | |List of operators for widget, described in link:#configoperators[config.operators]
 |widgets.<widget>.widgetProps | | |Can be used to override config of corresponding widget specified in link:#configwidgets[config.widgets]. Example: `{timeFormat: 'h:mm:ss A'}` for time field with AM/PM.

CONTRIBUTING.md

@@ -55,8 +55,8 @@ Or with VSCode:
 - [`packages/bootstrap`](/packages/bootstrap) - Provides config with [Bootstrap](https://reactstrap.github.io/) widgets
 - [`packages/fluent`](/packages/fluent) - Provides config with [Fluent UI](https://developer.microsoft.com/en-us/fluentui#/get-started/web) widgets
 - [`packages/examples`](/packages/examples) - Demo app with hot reload of demo code and local library code, uses TS, uses complex config to demonstrate anvanced usage.
-  - [`demo`](/packages/examples/demo) - Advanced demo
-  - [`demo_switch`](/packages/examples/demo_switch) - Demo of ternary mode (switch/case) for SpEL
+  - [`src/demo`](/packages/examples/src/demo) - Advanced demo
+  - [`src/demo_switch`](/packages/examples/src/demo_switch) - Demo of ternary mode (switch/case)
 - [`packages/sandbox`](/packages/sandbox) - Demo app with hot reload of only demo code (uses latest version of library from npm), uses TS, uses AntDesign widgets.
 - [`packages/sandbox_simple`](/packages/sandbox_simple) - Demo app with hot reload of only demo code (uses latest version of library from npm), not uses TS, uses vanilla widgets.
 - [`packages/sandbox_next`](/packages/sandbox_next) - Demo app on Next.js with SSR, simple server-side query storage and export
@@ -93,7 +93,7 @@ Currently there are 5 collections of widgets:
 Let's say you want to create new collection of widgets for new UI framework X to be used in this lib (and submit PR which is always welcomed!).  
 You can use any of this packages as a skeleton, eg. [mui](/packages/mui). I don't recommend to take [antd](/packages/antd) as example as it's more complicated.  
 Create new package `@react-awesome-query-builder/x` in [packages](/packages). 
-For a playground integrate it in [examples](/packages/examples) - add to `dependecies` in [package.json](/packages/examples/package.json), `paths` in [tsconfig.json](/packages/examples/tsconfig.json), `aliases` in [webpack.config.js](/packages/examples/webpack.config.js), `skinToConfig` in [config.tsx](/packages/examples/demo/config.tsx).
+For a playground integrate it in [examples](/packages/examples) - add to `dependecies` in [package.json](/packages/examples/package.json), `paths` in [tsconfig.json](/packages/examples/tsconfig.json), `aliases` in [webpack.config.js](/packages/examples/webpack.config.js), `skinToConfig` in [config.tsx](/packages/examples/src/demo/config/index.tsx).
 
 Take [PR #727 to add Fluent UI widgets](https://github.com/ukrbublik/react-awesome-query-builder/pull/727) as an example.
 

README.md

@@ -28,6 +28,7 @@ Now [Fluent UI](https://developer.microsoft.com/en-us/fluentui#/get-started/web)
 See [live demo](https://ukrbublik.github.io/react-awesome-query-builder) 
 
 [![Edit in codesandbox](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/p/github/ukrbublik/react-awesome-query-builder/master?file=%2Fpackages%2Fexamples%2Fdemo%2Findex.tsx)
+[![Open in GitHub Codespaces](https://github.com/codespaces/badge.svg)](https://codespaces.new/ukrbublik/react-awesome-query-builder)
 
 
 * [Features](#features)
@@ -238,7 +239,7 @@ class DemoQueryBuilder extends Component {
   )
 
   onChange = (immutableTree, config) => {
-    // Tip: for better performance you can apply `throttle` - see `examples/demo`
+    // Tip: for better performance you can apply `throttle` - see `packages/examples/src/demo`
     this.setState({tree: immutableTree, config: config});
 
     const jsonTree = QbUtils.getTree(immutableTree);
@@ -319,7 +320,7 @@ const DemoQueryBuilder: React.FC = () => {
   });
 
   const onChange = useCallback((immutableTree: ImmutableTree, config: Config) => {
-    // Tip: for better performance you can apply `throttle` - see `examples/demo`
+    // Tip: for better performance you can apply `throttle` - see `packages/examples/src/demo`
     setState(prevState => ({ ...prevState, tree: immutableTree, config: config }));
 
     const jsonTree = QbUtils.getTree(immutableTree);
@@ -395,7 +396,7 @@ Props:
 - If you put query builder component inside [Fluent-UI](https://developer.microsoft.com/en-us/fluentui)'s `<Panel />`, please:
   - set css `.ms-Layer.ms-Layer--fixed.root-119 { z-index: 900 !important; }`
 - `props` arg in `renderBuilder` have `actions` and `dispatch` you can use to run actions programmatically
-- For a list of available actions see `Actions` interface in [`index.d.ts`](/packages/core/modules/index.d.ts). See `runActions()` in [examples](/packages/examples/demo/index.tsx) as a demonstration of calling actions programmatically.
+- For a list of available actions see `Actions` interface in [`index.d.ts`](/packages/core/modules/index.d.ts). See `runActions()` in [examples](/packages/examples/src/demo/index.tsx) as a demonstration of calling actions programmatically.
 
 ## `<Builder />`
 
@@ -617,7 +618,7 @@ const config = {
 // then use <Query {...config} />
 ```
 
-See [example](/packages/examples/demo/index.tsx).
+See [example](/packages/examples/src/demo/index.tsx).
 
 
 ## Ternary mode
@@ -660,7 +661,7 @@ const emptyJson: JsonSwitchGroup = { id: QbUtils.uuid(), type: "switch_group", }
 const tree = QbUtils.loadTree(emptyJson);
 ```
 
-See [example](/packages/examples/demo_switch/index.tsx)
+See [example](/packages/examples/src/demo_switch/index.tsx)
 
 ![Screenshot](https://github.com/ukrbublik/react-awesome-query-builder/assets/3238637/4bf87da5-47f2-4a64-b1be-8924a62f96ad)