Introduce a CLI

.gitattributes

@@ -0,0 +1 @@
+*.publicodes linguist-language=YAML

.github/workflows/build.yml

@@ -10,6 +10,8 @@ jobs:
       - uses: actions/setup-node@v3
         with:
           cache: yarn
+      - uses: oven-sh/setup-bun@v2
+
       - run: yarn install --immutable
 
       - name: Build package
@@ -20,3 +22,6 @@ jobs:
 
       - name: Check file formatting
         run: yarn format:check
+
+      - name: pkg.pr.new
+        run: npx pkg-pr-new publish

bin/dev.cmd

@@ -0,0 +1,3 @@
+@echo off
+
+node --loader ts-node/esm --no-warnings=ExperimentalWarning "%~dp0\dev" %*

bin/dev.js

@@ -0,0 +1,6 @@
+#!/usr/bin/env bun
+
+// eslint-disable-next-line n/shebang
+import { execute } from '@oclif/core'
+
+await execute({ development: true, dir: import.meta.url })

bin/run.cmd

@@ -0,0 +1,3 @@
+@echo off
+
+node "%~dp0\run" %*

bin/run.js

@@ -0,0 +1,5 @@
+#!/usr/bin/env node
+
+import { execute } from '@oclif/core'
+
+await execute({ dir: import.meta.url })

package.json

@@ -1,21 +1,18 @@
 {
   "name": "@publicodes/tools",
-  "version": "1.2.5",
-  "description": "A set of utility functions to build tools around Publicodes models",
+  "version": "1.4.0",
+  "description": "A CLI tool for Publicodes",
   "type": "module",
-  "main": "dist/index.js",
-  "scripts": {
-    "build": "tsup",
-    "watch": "tsup --watch",
-    "clean": "rm -rf dist docs",
-    "test": "jest",
-    "docs": "typedoc",
-    "format": "prettier --write .",
-    "format:check": "prettier --check ."
-  },
-  "engines": {
-    "node": ">=17"
+  "main": "publicodes-build/index.js",
+  "bin": {
+    "publicodes": "./bin/run.js"
   },
+  "files": [
+    "publicodes-build",
+    "dist",
+    "bin",
+    "quick-doc"
+  ],
   "exports": {
     ".": {
       "import": "./dist/index.js",
@@ -38,9 +35,6 @@
       "types": "./dist/migration/index.d.ts"
     }
   },
-  "files": [
-    "dist"
-  ],
   "repository": {
     "type": "git",
     "url": "git+ssh://git@github.com/publicodes/tools.git"
@@ -55,31 +49,59 @@
   ],
   "author": "Emile Rolley <emile.rolley@tuta.io>",
   "license": "MIT",
+  "scripts": {
+    "build": "tsup",
+    "watch": "tsup --watch",
+    "clean": "rm -rf dist docs",
+    "test": "vitest run --globals",
+    "docs": "typedoc",
+    "format": "prettier --write .",
+    "format:check": "prettier --check .",
+    "compile": "publicodes compile",
+    "dev": "publicodes dev"
+  },
+  "engines": {
+    "node": ">=17"
+  },
   "dependencies": {
+    "@clack/prompts": "^0.7.0",
+    "@oclif/core": "^4.0.23",
+    "@publicodes/react-ui": "^1.5.4",
+    "@tailwindcss/typography": "^0.5.16",
+    "@tailwindcss/vite": "^4.0.0",
     "@types/node": "^18.11.18",
+    "chalk": "^5.3.0",
+    "chokidar": "^4.0.3",
     "glob": "^10.4.1",
     "path": "^0.12.7",
-    "publicodes": "^1.3.3",
-    "yaml": "^2.4.5"
+    "publicodes": "^1.6.1",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "react-router-dom": "^7.1.3",
+    "tailwindcss": "^4.0.0",
+    "vite": "^6.0.11",
+    "yaml": "^2.7.0"
   },
   "devDependencies": {
-    "@types/jest": "^29.2.5",
+    "@oclif/test": "^4.0.9",
+    "@types/jest": "^29.5.13",
+    "@types/react": "^19.0.8",
     "docdash": "^2.0.1",
-    "jest": "^29.4.1",
-    "prettier": "^3.0.0",
-    "ts-jest": "^29.0.4",
+    "prettier": "^3.4.2",
     "ts-node": "^10.9.2",
     "tsup": "^8.0.2",
     "typedoc": "^0.24.8",
     "typedoc-plugin-export-functions": "^1.0.0",
-    "typescript": "^4.9.4"
+    "typescript": "^4.9.4",
+    "vitest": "^2.1.2"
   },
   "tsup": {
     "entry": [
       "src/index.ts",
       "src/optims/index.ts",
       "src/compilation/index.ts",
-      "src/migration/index.ts"
+      "src/migration/index.ts",
+      "src/commands"
     ],
     "format": [
       "cjs",
@@ -90,7 +112,18 @@
     "clean": true,
     "cjsInterop": true
   },
+  "oclif": {
+    "bin": "publicodes",
+    "commands": "./dist/commands",
+    "dirname": "publicodes",
+    "topicSeparator": ":"
+  },
   "publishConfig": {
     "access": "public"
+  },
+  "packageManager": "yarn@1.22.19+sha1.4ba7fc5c6e704fce2066ecbfb0b0d8976fe62447",
+  "types": "publicodes-build/index.d.ts",
+  "peerDependencies": {
+    "publicodes": "^1.5.1"
   }
 }

quick-doc/index.html

@@ -0,0 +1,15 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>⚡️ QuickDoc - Publicodes</title>
+    <!-- <link rel="stylesheet" href="./src/index.css" /> -->
+  </head>
+  <body>
+    <div id="root"></div>
+
+    <script type="module" src="/src/index.tsx"></script>
+    <link href="/src/app.css" rel="stylesheet" />
+  </body>
+</html>

quick-doc/src/app.css

@@ -0,0 +1,63 @@
+@import 'tailwindcss';
+
+@layer base {
+  h1 {
+    @apply text-4xl font-bold mt-8 mb-6 text-[#10162F];
+  }
+
+  h2 {
+    @apply text-3xl font-semibold mt-6 mb-5 text-[#10162F];
+  }
+
+  h3 {
+    @apply text-2xl font-semibold mt-5 mb-4 text-[#10162F];
+  }
+
+  p {
+    @apply text-base leading-relaxed mb-4 text-[#4B5563];
+  }
+
+  ul {
+    @apply list-disc list-inside mb-4 space-y-2;
+  }
+
+  ol {
+    @apply list-decimal list-inside mb-4 space-y-2;
+  }
+
+  li {
+    @apply text-[#4B5563] leading-relaxed;
+  }
+
+  a {
+    @apply text-[#2975d1] hover:text-[#1a365d] transition-colors underline-offset-2 hover:underline;
+  }
+
+  blockquote {
+    @apply pl-4 border-l-4 border-[#E5E7EB] italic my-4;
+  }
+
+  code {
+    @apply bg-[#F3F4F6] px-2 py-1 rounded text-sm text-[#10162F];
+  }
+
+  pre {
+    @apply bg-[#F3F4F6] p-4 rounded-lg mb-4 overflow-x-auto;
+  }
+  button {
+    @apply bg-slate-100  px-2 py-1 rounded-md hover:bg-slate-50 transition-colors cursor-pointer disabled:opacity-50 text-sm  disabled:cursor-not-allowed border border-slate-600 text-slate-800 ml-2;
+  }
+}
+
+@keyframes fade-in {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+.animate-fade-in {
+  animation: fade-in 0.15s ease-out;
+}

quick-doc/src/components/App.tsx

@@ -0,0 +1,73 @@
+import { RulePage } from '@publicodes/react-ui'
+import { useEffect, useState } from 'react'
+import {
+  BrowserRouter,
+  Link,
+  Navigate,
+  Route,
+  Routes,
+  useParams,
+} from 'react-router-dom'
+import { engine, onEngineUpdate } from '../engine'
+import { sitemap } from '../sitemap'
+import { onSituationUpdate, situations } from '../situations'
+import Header from './Header'
+import { Error } from './Error'
+
+function RulePageWrapper() {
+  let { '*': splat } = useParams()
+  return (
+    <RulePage
+      engine={engine}
+      documentationPath=""
+      rulePath={splat}
+      searchBar={true}
+      showDevSection={true}
+      language="fr"
+      renderers={{ Link: Link }}
+    />
+  )
+}
+
+export default function App() {
+  const [, forceUpdate] = useState({})
+  useEffect(() => {
+    // Subscribe to engine updates
+    return onEngineUpdate(() => forceUpdate({}))
+  }, [])
+  const [activeSituation, setActiveSituation] = useState('')
+
+  useEffect(() => {
+    return onSituationUpdate(() => {
+      engine.setSituation(situations[activeSituation] ?? {})
+      setActiveSituation(activeSituation in situations ? activeSituation : '')
+      forceUpdate({})
+    })
+  }, [activeSituation])
+
+  function handleSituationChange(situation: string) {
+    setActiveSituation(situation)
+    engine.setSituation(situations[situation] ?? {})
+  }
+
+  return (
+    <>
+      <BrowserRouter>
+        <Header
+          setSituation={handleSituationChange}
+          activeSituation={activeSituation}
+        />
+        <div className="container mx-auto px-4">
+          <Error />
+          <Routes>
+            <Route
+              path="/"
+              element={<Navigate to={Object.keys(sitemap)[0]} replace />}
+            />
+            <Route path="/*" element={<RulePageWrapper />} />
+          </Routes>
+        </div>
+      </BrowserRouter>
+    </>
+  )
+}

quick-doc/src/components/Error.tsx

@@ -0,0 +1,76 @@
+import React from 'react'
+import { error } from '../engine'
+
+export function Error() {
+  if (error.length === 0) return null
+  return (
+    <>
+      <div
+        className="fixed z-[1000] 
+       inset-0  bg-slate-400/50 backdrop-blur-[2px] animate-fade-in "
+      />
+      <div
+        className="fixed z-[1000]  left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 w-full max-w-xl bg-white  rounded-lg shadow-lg animate-slide-up"
+        role="alert"
+      >
+        <div className="p-6">
+          <div className="space-y-2 max-h-[70vh] overflow-auto">
+            {error.map((err, index) => {
+              const { type, message, ruleName } = parseError(err)
+              return (
+                <React.Fragment key={index}>
+                  <div className="flex items-center gap-3 ">
+                    <svg
+                      className="w-6 h-6 text-red-500 flex-shrink-0"
+                      fill="none"
+                      stroke="currentColor"
+                      viewBox="0 0 24 24"
+                    >
+                      <path
+                        strokeLinecap="round"
+                        strokeLinejoin="round"
+                        strokeWidth={2}
+                        d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"
+                      />
+                    </svg>
+                    <h2 className="text-lg m-0 py-4 font-semibold text-red-500">
+                      {type}
+                    </h2>
+                  </div>
+                  <p className="text-xl font-semibold flex items-baseline">
+                    Dans la règle
+                    <code className="px-1 ml-2 text-slate-800 bg-gray-100 rounded-md">
+                      {ruleName}
+                    </code>
+                  </p>
+
+                  <p key={index} className="text-gray-600 ">
+                    {message}
+                  </p>
+                </React.Fragment>
+              )
+            })}
+          </div>
+        </div>
+      </div>
+    </>
+  )
+}
+
+/**
+ *
+ * @example
+ * ```js
+ * parseError(`[ Erreur syntaxique ] ➡️ Dans la règle "salaire net" ✖️ La référence "salaire brut" est introuvable. Vérifiez que l'orthographe et l'espace de nom sont corrects`)
+ * ```
+ */
+function parseError(error: string): {
+  type: string
+  message: string
+  ruleName: string
+} {
+  const type = error.match(/\[ (.+?) \]/)?.[1] ?? ''
+  const ruleName = error.match(/"(.+?)"/)?.[1] ?? ''
+  const message = error.split('✖️')[1].trim()
+  return { type, message, ruleName }
+}