Temp

.github/workflows/cypress.yml

@@ -0,0 +1,23 @@
+name: Cypress
+
+on: push
+
+jobs:
+  cypress-run:
+    runs-on: ubuntu-22.04
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+      - name: Install formule dependencies
+        run: yarn install --frozen-lockfile
+      - name: Link
+        run: yarn link-local && cd formule-demo && yarn link-local-lib
+      - name: Install formule-demo dependencies
+        working-directory: ./formule-demo
+        run: yarn install --frozen-lockfile
+      - name: Cypress run
+        uses: cypress-io/github-action@v6
+        with:
+          working-directory: ./formule-demo
+          install: false
+          start: yarn dev

README.md

@@ -1,27 +1,3 @@
-# React + TypeScript + Vite
+# React Formule
 
-This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
-
-Currently, two official plugins are available:
-
-- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh
-- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
-
-## Expanding the ESLint configuration
-
-If you are developing a production application, we recommend updating the configuration to enable type aware lint rules:
-
-- Configure the top-level `parserOptions` property like this:
-
-```js
-   parserOptions: {
-    ecmaVersion: 'latest',
-    sourceType: 'module',
-    project: ['./tsconfig.json', './tsconfig.node.json'],
-    tsconfigRootDir: __dirname,
-   },
-```
-
-- Replace `plugin:@typescript-eslint/recommended` to `plugin:@typescript-eslint/recommended-type-checked` or `plugin:@typescript-eslint/strict-type-checked`
-- Optionally add `plugin:@typescript-eslint/stylistic-type-checked`
-- Install [eslint-plugin-react](https://github.com/jsx-eslint/eslint-plugin-react) and add `plugin:react/recommended` & `plugin:react/jsx-runtime` to the `extends` list
+![Formule](public/logo.png)

formule-demo/README.md

@@ -0,0 +1,15 @@
+# Formule demo
+
+This is a small application that serves as a playground to test react-formule.
+
+## How to run locally
+
+### The easy way
+
+Run `yarn link-local` in react-formule, then run `yarn link-local-lib` and `yarn install` in formule-demo. To run the playground app, execute `yarn dev`. You will see any changes in react-formule immediately in the playground app.
+
+### The advanced way
+
+Another option (if you want to test the actual bundle, or if you want to link react-formule to a more complex application, which can be trickier) would be to remove `resolve.alias` from `vite.config.ts` and to instead use [yalc](https://www.google.com/url?sa=t&rct=j&q=&esrc=s&source=web&cd=&ved=2ahUKEwiEh4L_nMuCAxWG6gIHHYMAB38QFnoECAsQAQ&url=https%3A%2F%2Fgithub.com%2Fwclr%2Fyalc&usg=AOvVaw0iR17wRcI1T2OQnWaU1BUh&opi=89978449). Run `yarn build` and `yalc publish` in react-formule, then run `yalc add react-formule` in formule-demo. If you make changes in react-formule and want to update formule-demo with those changes, run `yarn build` and `yalc push` in react-formule, and then `yarn dev --force` in formule-demo. Read the yalc docs for more info.
+
+For more confort, you can also run `yarn build:watch` in react-formule, which will rebuild the bundle and push the changes to yalc automatically. For even more automation, you can use [vite-plugin-restart](https://github.com/antfu/vite-plugin-restart) in formule-demo (or in your own project using react-formule and Vite) and watch the bundle file inside of the `.yalc` folder, so that the Vite dev server is automatically reloaded once the new bundle is published.

moses-demo/cypress/e2e/builder.cy.ts → formule-demo/cypress/e2e/builder.cy.ts

@@ -2,7 +2,7 @@
 
 describe("test basic functionality", () => {
   beforeEach(() => {
-    cy.visit("localhost:3000");
+    cy.visit("localhost:3030");
   });
 
   it("allows drag and drop to the SchemaTree", () => {
@@ -133,12 +133,10 @@ describe("test basic functionality", () => {
     cy.get("input#root_ui\\:options_mask").clearTypeBlur("BA-00/a")
     cy.get("@myfield").focus()
     cy.get("@myfield").should("have.value", "B_-__/_")
-    cy.get("@myfield").clearTypeBlur("Xyz")
-    cy.get("@myfield").should("have.value", "BX-__/_")
-    cy.get("@myfield").clearTypeBlur("NWW5j34r")
+    cy.get("@myfield").type("NWW5j34r")
     cy.get("@myfield").should("have.value", "BN-53/r")
 
-    // TODO test also suggestion endpoint, after that feature is migrated to moses
+    // TODO test also suggestion endpoint, after that feature is migrated to formule
   });
 
   it("tests number field", () => {
@@ -202,11 +200,14 @@ describe("test basic functionality", () => {
 
     // Test select type: one value (text)
     cy.get("input#root_type").parent().parent().find('[title="Select one value (text)"]').should("exist")
+    cy.get("fieldset#root_enum").getByDataCy("addItemButton").click()
     cy.get("input#root_enum_0").clearTypeBlur("First option")
+    cy.get("fieldset#root_enum").getByDataCy("addItemButton").click()
     cy.get("input#root_enum_1").clearTypeBlur("Second option")
-    cy.get("#root_enum .arrayFieldRow").eq(2).find(".anticon-delete").click()
-    cy.getByDataCy("formPreview").get("input#root_myfield").type("{downArrow}{enter}", {force: true})
-    cy.getByDataCy("formPreview").get(".ant-select-selection-item").contains("Second option").should("exist")
+    cy.get("#root_enum .arrayFieldRow").eq(0).find(".anticon-delete").click()
+    cy.getByDataCy("formPreview").get("input#root_myfield").as("dropdown").type("{downArrow}")
+    cy.get("@dropdown").type("{enter}")
+    cy.get("@dropdown").get(".ant-select-item-option-content").contains("Second option").should("exist")
 
     // Test select type: one value (number)
     cy.get("input#root_type").type("{downArrow}{enter}", {force: true})
@@ -217,21 +218,25 @@ describe("test basic functionality", () => {
     cy.get("input#root_enum_0").clearTypeBlur("1")
     cy.get("input#root_enum_0").should("have.value", "1")
     cy.get("input#root_enum_1").clearTypeBlur("2")
-    cy.get("#root_enum .arrayFieldRow").eq(2).find(".anticon-delete").click()
-    cy.getByDataCy("formPreview").get("input#root_myfield").type("{downArrow}{enter}", {force: true})
-    cy.getByDataCy("formPreview").get(".ant-select-selection-item").contains("2").should("exist")
+    cy.get("#root_enum .arrayFieldRow").eq(0).find(".anticon-delete").click()
+    cy.get("@dropdown").type("{downArrow}")
+    cy.get("@dropdown").type("{enter}")
+    cy.getByDataCy("formPreview").get(".ant-select-item-option-content").contains("2").should("exist")
 
     // Test select type: multiple values
     cy.get("input#root_type").type("{downArrow}{enter}", {force: true})
     cy.get("input#root_type").parent().parent().find('[title="Select multiple values"]').should("exist")
+    cy.get("fieldset#root_items_enum").getByDataCy("addItemButton").click()
     cy.get("input#root_items_enum_0").clearTypeBlur("First option")
+    cy.get("fieldset#root_items_enum").getByDataCy("addItemButton").click()
     cy.get("input#root_items_enum_1").clearTypeBlur("Second option")
+    cy.get("fieldset#root_items_enum").getByDataCy("addItemButton").click()
     cy.get("input#root_items_enum_2").clearTypeBlur("Third option")
-    cy.get("#root_items_enum .arrayFieldRow").eq(3).find(".anticon-delete").click()
-    cy.getByDataCy("formPreview").get("input#root_myfield").type("{enter}", {force: true})
-    cy.getByDataCy("formPreview").get("input#root_myfield").type("{downArrow}{downArrow}{enter}", {force: true})
-    cy.getByDataCy("formPreview").get(".ant-select-selection-item").contains("First option").should("exist")
-    cy.getByDataCy("formPreview").get(".ant-select-selection-item").contains("Third option").should("exist")
+    cy.get("#root_items_enum .arrayFieldRow").eq(1).find(".anticon-delete").click()
+    cy.getByDataCy("formPreview").get("input#root_myfield").type("{downArrow}{enter}", {force: true})
+    cy.getByDataCy("formPreview").get("input#root_myfield").type("{downArrow}{enter}", {force: true})
+    cy.getByDataCy("formPreview").get(".ant-select-item-option-content").contains("First option").should("exist")
+    cy.getByDataCy("formPreview").get(".ant-select-item-option-content").contains("Third option").should("exist")
   });
 
   it("tests date field", () => {

moses-demo/index.html → formule-demo/index.html

@@ -4,7 +4,7 @@
     <meta charset="UTF-8" />
     <link rel="icon" type="image/svg+xml" href="/vite.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Moses demo</title>
+    <title>Formule demo</title>
   </head>
   <body>
     <div id="root"></div>

moses-demo/package.json → formule-demo/package.json

@@ -1,14 +1,14 @@
 {
-  "name": "moses-demo",
+  "name": "formule-demo",
   "private": true,
   "version": "0.0.0",
   "scripts": {
     "dev": "vite",
     "build": "tsc && vite build",
     "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
     "preview": "vite preview",
-    "link-local-lib": "yarn link cap-moses && yarn link react && yarn link react-dom",
-    "unlink-local-lib": "yarn unlink cap-moses && yarn unlink react && yarn unlink react-dom",
+    "link-local-lib": "yarn link react-formule && yarn link react && yarn link react-dom",
+    "unlink-local-lib": "yarn unlink react-formule && yarn unlink react && yarn unlink react-dom",
     "test:e2e": "cypress open",
     "test:e2e:run": "cypress run --headless --browser chrome"
   },

moses-demo/src/App.tsx → formule-demo/src/App.tsx

@@ -1,7 +1,7 @@
-import { MosesContext, SelectOrEdit } from "cap-moses";
-import { SchemaPreview } from "cap-moses";
-import { FormPreview } from "cap-moses";
-import { initMosesSchema } from "cap-moses";
+import { FormuleContext, SelectOrEdit } from "react-formule";
+import { SchemaPreview } from "react-formule";
+import { FormPreview } from "react-formule";
+import { initFormuleSchema } from "react-formule";
 import { useEffect } from "react";
 import { Row, Col } from "antd";
 
@@ -11,11 +11,11 @@ const PRIMARY_COLOR = "#006996";
 
 function App() {
   useEffect(() => {
-    initMosesSchema();
+    initFormuleSchema();
   }, []);
 
   return (
-    <MosesContext theme={{
+    <FormuleContext theme={{
       token: {
         colorPrimary: PRIMARY_COLOR,
         colorLink: PRIMARY_COLOR,
@@ -56,11 +56,11 @@ function App() {
           style={{ overflowX: "hidden", height: "100%", padding: "0px 15px" }}
           className="tour-form-preview"
         >
-          <FormPreview />
+          <FormPreview liveValidate={true} />
         </Col>
       </Row>
 
-    </MosesContext>
+    </FormuleContext>
   );
 }
 

moses-demo/tsconfig.json → formule-demo/tsconfig.json

@@ -7,7 +7,7 @@
     "skipLibCheck": true, // FIXME: We can remove this once we change moduleResolution to bundler
 
     /* Bundler mode */
-    // FIXME: change back to bundler once a new version of cypress fixes the "your configFile is invalid" issue
+    // FIXME: change back to bundler once a new version of cypress fixes this https://github.com/cypress-io/cypress/issues/27731
     "moduleResolution": "node",
     "allowImportingTsExtensions": true,
     "resolveJsonModule": true,

moses-demo/vite.config.ts → formule-demo/vite.config.ts

@@ -11,12 +11,13 @@ export default defineConfig({
   },
   server: {
     // Needed for cypress to be able to access the dev server
-    host: true
+    host: true,
+    port: 3030,
   },
   // Enables hmr in development without having to rebuild the library
   resolve: {
     alias: {
-      "cap-moses": resolve(__dirname, '../src/index.ts'),
+      "react-formule": resolve(__dirname, '../src/index.ts'),
     }
   }
 })

index.html

@@ -4,7 +4,7 @@
     <meta charset="UTF-8" />
     <link rel="icon" type="image/svg+xml" href="/vite.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Vite + React + TS</title>
+    <title>Formule</title>
   </head>
   <body>
     <div id="root"></div>

package.json

@@ -1,19 +1,21 @@
 {
-  "name": "cap-moses",
+  "name": "react-formule",
   "private": false,
   "version": "0.1.0",
+  "author": "CERN",
+  "license": "MIT",
   "type": "module",
   "files": [
     "dist"
   ],
-  "main": "./dist/cap-moses.umd.cjs",
-  "module": "./dist/cap-moses.js",
+  "main": "./dist/react-formule.umd.cjs",
+  "module": "./dist/react-formule.js",
   "types": "./dist/index.d.ts",
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",
-      "import": "./dist/cap-moses.js",
-      "require": "./dist/cap-moses.umd.cjs"
+      "import": "./dist/react-formule.js",
+      "require": "./dist/react-formule.umd.cjs"
     }
   },
   "scripts": {

src/admin/components/FormPreview.jsx

@@ -5,7 +5,7 @@ import { Row, Empty, Space, Typography, Col } from "antd";
 import { useSelector } from "react-redux";
 import CustomizationContext from "../../contexts/CustomizationContext";
 
-const FormPreview = () => {
+const FormPreview = ({liveValidate}) => {
   const schema = useSelector((state) => state.schemaWizard.current.schema)
   const uiSchema = useSelector((state) => state.schemaWizard.current.uiSchema)
   const formData = useSelector((state) => state.schemaWizard.formData)
@@ -55,6 +55,7 @@ const FormPreview = () => {
               uiSchema={uiSchema}
               formData={formData || {}}
               onChange={() => {}}
+              liveValidate={liveValidate}
             />
           </Col>
         </Row>

src/admin/components/PropKeyEditorForm.jsx

@@ -15,10 +15,12 @@ const PropertyKeyEditorForm = ({
 }) => {
   const customizationContext = useContext(CustomizationContext);
 
+  const updatedFormData = {...formData}
+
   let type;
 
   const cleanupSelect = () =>
-    schema.type === "array" ? delete formData.enum : delete formData.items;
+    schema.type === "array" ? delete updatedFormData.enum : delete updatedFormData.items;
 
   // in case we can not define the type of the element from the uiSchema,
   // extract the type from the schema
@@ -30,7 +32,7 @@ const PropertyKeyEditorForm = ({
   } else {
     if (uiSchema["ui:widget"]) {
       type = uiSchema["ui:widget"];
-      if (uiSchema["ui:widget"] === "select") {
+      if (type === "select") {
         cleanupSelect();
       }
     }
@@ -56,7 +58,7 @@ const PropertyKeyEditorForm = ({
       schema={objs[type][`${optionsSchemaObject}`] || {}}
       uiSchema={objs[type][`${optionsUiSchemaObject}`] || {}}
       widgets={widgets}
-      formData={formData}
+      formData={updatedFormData}
       onChange={onChange}
       liveValidate
     />

src/admin/formComponents/ObjectFieldTemplate.jsx

@@ -92,8 +92,8 @@ const ObjectFieldTemplate = ({properties, uiSchema, formContext, idSchema}) => {
           "ui:order": [...uiCards, "*"],
         }
       }));
-    },
-    [properties, cards, dispatch, formContext, uiSchema]
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [cards]
   );
 
   // create a new array to keep track of the changes in the order

src/exposed.tsx

@@ -11,7 +11,7 @@ import { RJSFSchema } from "@rjsf/utils";
 import { schemaInit } from "./store/schemaWizard";
 import StateSynchronizer from "./StateSynchronizer";
 
-type MosesContextProps = {
+type FormuleContextProps = {
   children: ReactNode;
   customFieldTypes?: object;
   customFields?: object;
@@ -21,7 +21,7 @@ type MosesContextProps = {
   transformSchema?: (schema: object) => object;
 };
 
-export const MosesContext: FC<MosesContextProps> = ({
+export const FormuleContext: FC<FormuleContextProps> = ({
   children,
   customFieldTypes,
   customFields,
@@ -60,7 +60,7 @@ export const MosesContext: FC<MosesContextProps> = ({
 };
 
 // TODO: Review typing (here and in the actions file)
-export const initMosesSchema = (
+export const initFormuleSchema = (
   data?: RJSFSchema,
   name?: string,
   description?: string
@@ -77,6 +77,6 @@ export const initMosesSchema = (
   );
 };
 
-export const getMosesState = () => {
+export const getFormuleState = () => {
   return store.getState().schemaWizard;
 };