Studio interface en deux colonnes sur pc

source/components/ui/index.css

@@ -9,6 +9,13 @@
 	--darkColor: rgb(24, 69, 123);
 	--textColor: rgb(24, 69, 123);
 }
+
+html,
+body,
+#js {
+	height: 100%;
+}
+
 html:fullscreen {
 	background-color: white;
 	overflow: auto !important;

source/components/utils/colors.tsx

@@ -110,7 +110,16 @@ export function ThemeColorsProvider({ color, children }: ProviderProps) {
 	}, [colors])
 	return (
 		<ThemeColorsContext.Provider value={colors}>
-			<div ref={divRef}>{children}</div>
+			{/* This div is only used to set the CSS variables */}
+			<div
+				ref={divRef}
+				css={`
+					height: inherit;
+					width: inherit;
+				`}
+			>
+				{children}
+			</div>
 		</ThemeColorsContext.Provider>
 	)
 }

source/sites/mon-entreprise.fr/App.css

@@ -1,9 +1,3 @@
-html,
-body,
-#js {
-	min-height: 100%;
-}
-
 .app-container {
 	position: relative;
 	width: 100%;

source/sites/publi.codes/Studio.tsx

@@ -1,13 +1,14 @@
 import baremeIr from '!!raw-loader!./exemples/bareme-ir.yaml'
 import douche from '!!raw-loader!./exemples/douche.yaml'
 import { ControlledEditor } from '@monaco-editor/react'
+import { formatValue } from 'Engine/format'
 import Engine from 'Engine/index'
 import { buildFlatRules } from 'Engine/rules'
-import { serializeUnit } from 'Engine/units'
 import { safeLoad } from 'js-yaml'
 import React, { useRef, useState } from 'react'
 import emoji from 'react-easy-emoji'
 import { useLocation } from 'react-router'
+import styled from 'styled-components'
 import { Header } from './Header'
 
 let examples = {
@@ -16,13 +17,13 @@ let examples = {
 }
 
 let initialInput = `a:
-  formule: 10
+  formule: 10€
 b:
-  formule: a + 18
+  formule: a + 18€
 c:
   formule:
     multiplication: 
-      assiette: 2000
+      assiette: 2000€
       taux: 3%
 d:
   formule: a + b + c
@@ -30,11 +31,25 @@ d:
 
 export default function SafeStudio() {
 	return (
-		<div className="app-content ui__ container" css="margin-bottom: 2rem">
-			<Header noSubtitle sectionName="Studio" />
-			<ErrorBoundary>
-				<Studio />
-			</ErrorBoundary>
+		<div
+			css={`
+				display: flex;
+				height: 100%;
+				flex-direction: column;
+			`}
+		>
+			<div className="ui__ container">
+				<Header noSubtitle sectionName="Studio" />
+			</div>
+			<div
+				css={`
+					flex-grow: 1;
+				`}
+			>
+				<ErrorBoundary>
+					<Studio />
+				</ErrorBoundary>
+			</div>
 		</div>
 	)
 }
@@ -65,51 +80,92 @@ export function Studio() {
 	}
 
 	return (
-		<div>
-			Construisez votre modèle ici :
-			<ControlledEditor
-				height="40vh"
-				language="yaml"
-				value={editorValue}
-				onChange={(ev, newValue) => setEditorValue(newValue ?? '')}
-				options={{ minimap: { enabled: false } }}
-			/>
-			<div>
-				<label htmlFor="objectif">Que voulez-vous calculer ? </label>
-				<select
-					onChange={e => {
-						setCurrentTarget(e.target.value)
-					}}
-				>
-					{targets.map(target => (
-						<option key={target} value={target}>
-							{target}
-						</option>
-					))}
-				</select>
-			</div>
-			<button
-				css="display: block; margin-top: 1rem"
-				className="ui__ button small"
-				onClick={() => updateResult()}
+		<Layout>
+			<section>
+				<ControlledEditor
+					css={`
+						height: 100%;
+					`}
+					language="yaml"
+					value={editorValue}
+					onChange={(ev, newValue) => setEditorValue(newValue ?? '')}
+					options={{ minimap: { enabled: false } }}
+				/>
+			</section>
+			<section
+				css={`
+					padding: 30px 20px;
+				`}
 			>
-				{emoji('▶️')} Mettre à jour
-			</button>
-			<Results analysis={analysis} />
-		</div>
+				<div
+					css={`
+						background: var(--lighterColor);
+						padding: 20px;
+						border-radius: 5px;
+					`}
+				>
+					<label htmlFor="objectif">Que voulez-vous calculer ? </label>
+					<select
+						id="objectif"
+						onChange={e => {
+							setCurrentTarget(e.target.value)
+						}}
+						css={`
+							padding: 5px;
+						`}
+					>
+						{targets.map(target => (
+							<option key={target} value={target}>
+								{target}
+							</option>
+						))}
+					</select>
+					<br />
+					<button
+						css="display: block; margin-top: 1rem"
+						className="ui__ button small"
+						onClick={() => updateResult()}
+					>
+						{emoji('▶️')} Calculer
+					</button>
+				</div>
+				<Results analysis={analysis} />
+			</section>
+		</Layout>
 	)
 }
+
+const Layout = styled.div`
+	display: flex;
+	height: 100%;
+
+	section {
+		width: 50%;
+	}
+
+	@media (max-width: 960px) {
+		flex-direction: column;
+		padding: 20px;
+
+		section {
+			width: 100%;
+		}
+	}
+`
+
 export const Results = ({ analysis }) => {
 	return analysis ? (
 		<div>
 			<h2>Résultats</h2>
-			<ul>
-				<li>Valeur : {analysis.nodeValue}</li>
-				<li>
-					Unité : {analysis.unit ? serializeUnit(analysis.unit) : 'Sans unité'}
-				</li>
-				<li>Applicable : {analysis.isApplicable ? '✅' : '❌'}</li>
-			</ul>
+			{analysis.isApplicable === false ? (
+				<>❌ Cette règle n'est pas applicable</>
+			) : (
+				formatValue({
+					language: 'fr',
+					value: analysis.nodeValue,
+					unit: analysis.unit
+				})
+			)}
 		</div>
 	) : null
 }

source/sites/publi.codes/exemples/bareme-ir.yaml

@@ -1,5 +1,5 @@
 revenu imposable:
-  formule: 30000 €
+  formule: 18000 €
 
 revenu abattu:
   formule:
@@ -21,11 +21,3 @@ impôt sur le revenu:
         - taux: 41%
           plafond: 153783€
         - taux: 45%
-
-impôt final:
-  formule:
-    allègement:
-      assiette: impôt sur le revenu
-      décote:
-        taux: 75%
-        plafond: 1177€