Première ébauche de studio de création de règles pour publi.codes

package.json

@@ -22,6 +22,7 @@
 		"@babel/polyfill": "^7.4.0",
 		"@babel/runtime": "^7.3.4",
 		"@rehooks/local-storage": "^2.1.1",
+		"@monaco-editor/react": "^2.3.0",
 		"classnames": "^2.2.5",
 		"color-convert": "^1.9.2",
 		"core-js": "^3.2.1",

source/sites/publi.codes/Yo.js

@@ -1,37 +1,113 @@
+import Editor from '@monaco-editor/react'
 import { buildFlatRules } from 'Engine/rules'
 import { safeLoad } from 'js-yaml'
-import React, { useEffect, useState } from 'react'
+import React, { useEffect, useRef, useState } from 'react'
 import { useDispatch, useSelector } from 'react-redux'
 import { analysisWithDefaultsSelector } from 'Selectors/analyseSelectors'
 import { setSimulationConfig } from '../../actions/actions'
 
 let initialInput = `
+
 a: 
   formule: 10
 b: 
   formule: a + 18
+c:
+  formule:
+    multiplication: 
+      assiette: 2000
+      taux: 3%
+d:
+  formule: a + b + c
+
 `
 
-export default function Yo() {
+export default function SafeStudio() {
+	return (
+		<ErrorBoundary>
+			<Studio />
+		</ErrorBoundary>
+	)
+}
+
+export function Studio() {
+	const defaultTarget = 'b'
 	const [ready, setReady] = useState(false)
+	const [target, setTarget] = useState(defaultTarget)
+
 	const dispatch = useDispatch()
 	const stateConfig = useSelector(state => state.simulation?.config)
-	useEffect(() => {
+
+	const [isEditorReady, setIsEditorReady] = useState(false)
+	const valueGetter = useRef()
+	const setRules = rulesString =>
 		dispatch({
 			type: 'SET_RULES',
-			rules: buildFlatRules(safeLoad(initialInput))
+			rules: buildFlatRules(safeLoad(rulesString))
 		})
-		dispatch(setSimulationConfig({ objectifs: ['b'] }))
+	const setTargets = targets =>
+		dispatch(setSimulationConfig({ objectifs: targets }))
+
+	useEffect(() => {
+		setRules(initialInput)
+		setTargets([defaultTarget])
 		setReady(true)
 	}, [])
+
+	function handleEditorDidMount(_valueGetter) {
+		setIsEditorReady(true)
+		valueGetter.current = _valueGetter
+	}
+
+	function handleShowValue() {
+		setRules(valueGetter.current())
+		setTargets([target])
+	}
+
 	return (
 		<div>
 			Saissez des formules
+			<Editor
+				height="40vh"
+				language="yaml"
+				value={initialInput}
+				editorDidMount={handleEditorDidMount}
+			/>
+			<h3>Que voulez-vous calculer ?</h3>
+			<input value={target} onChange={e => setTarget(e.target.value)} />
+			<br />
+			<button onClick={handleShowValue} disabled={!isEditorReady}>
+				Calculer
+			</button>
 			{ready && <Results />}
 		</div>
 	)
 }
 export const Results = () => {
 	const analysis = useSelector(state => analysisWithDefaultsSelector(state))
-	return <div>{analysis.targets[0].nodeValue}</div>
+	return (
+		<div>
+			<h2>Résultats</h2>
+			{analysis.targets[0].nodeValue}
+		</div>
+	)
+}
+
+class ErrorBoundary extends React.Component {
+	state = {
+		error: false
+	}
+	static getDerivedStateFromError(error) {
+		// Mettez à jour l'état, de façon à montrer l'UI de repli au prochain rendu.
+		return { error }
+	}
+
+	render() {
+		return (
+			<>
+				{this.state.error && <p>Erreur : {JSON.stringify(this.state.error)}</p>}
+				{this.props.children}
+			</>
+		)
+	}
 }

yarn.lock

@@ -1039,6 +1039,11 @@
     "@types/istanbul-reports" "^1.1.1"
     "@types/yargs" "^13.0.0"
 
+"@monaco-editor/react@^2.3.0":
+  version "2.3.0"
+  resolved "https://registry.yarnpkg.com/@monaco-editor/react/-/react-2.3.0.tgz#ef1e09c408bb3119e2dc0d369b132e82b2d3ade7"
+  integrity sha512-jmmZCQ4iSMfwelWGRV4HWUOJchkN4MOx9vhx1DWvC6ERpvK5DXrcwJBBzuayVtiK7cyCVOGKB7mgjT7KOdUkJw==
+
 "@prerenderer/prerenderer@^0.7.2":
   version "0.7.2"
   resolved "https://registry.yarnpkg.com/@prerenderer/prerenderer/-/prerenderer-0.7.2.tgz#b26a806bcdb3b313d527b313bdd72a57434b45fd"