fix demo layout, add demo to readme

cern-sis · Feb 22, 2024 · dd47dd3 · dd47dd3
1 parent ac88b9d
commit dd47dd3
Show file tree

Hide file tree

Showing 8 changed files with 134 additions and 81 deletions.
diff --git a/README.md b/README.md
@@ -1,13 +1,15 @@
 <p align="center"><img src="docs/logo.png" width="350px"/></p>
 
+<h3 align="center"> 🕹️ <a href="https://cern-sis.github.io/react-formule/">DEMO</a> </h2>
+
 ## :horse: What is Formule?
 
 Formule is a **powerful, user-friendly, extensible and mobile-friendly form building library** based on [JSON Schema](https://json-schema.org/) and [RJSF](https://github.com/rjsf-team/react-jsonschema-form), which aims to make form creation easier for both technical and non-technical people.
 
 It originated from the need of a flexible tool for physicists at CERN to create their custom forms in the [CERN Analysis Preservation](https://github.com/cernanalysispreservation/analysispreservation.cern.ch) application (a process that was originally done by the CAP team who had to manually define the JSON schemas for every member experiment) in a zero-code fashion. This tool proved to be very useful for us to more easily scalate and expand, reaching a wider audience here at CERN. So, we thought it could also be useful for other people and decided to decouple it from CAP and release it as an open source library.
 
->[!WARNING]
->react-formule has just come out and is undergoing active development, so please feel free to share any issue you find with us and/or to contribute!
+> [!WARNING]
+> react-formule has just come out and is undergoing active development, so please feel free to share any issue you find with us and/or to contribute!
 
 ## :carousel_horse: How it looks like
 
@@ -21,19 +23,20 @@ Formule consists of the following main components:
 
 - **`FormuleContext`**: Formule components need to be wrapped by a FormuleContext. It also allows you to provide an antd theme and your own custom fields and widgets.
 - The form editor, which has been split into three different components that work together for more flexibility:
-   - **`SelectOrEdit`** (or, separately, **`SelectFieldType`** and **`PropertyEditor`**): You can select fields to add to the form and customize their properties.
-   - **`SchemaPreview`**: A tree view of the fields where you can rearrange or select fields to be edited.
-   - **`FormPreview`**: A live, iteractive preview of the form.
+  - **`SelectOrEdit`** (or, separately, **`SelectFieldType`** and **`PropertyEditor`**): You can select fields to add to the form and customize their properties.
+  - **`SchemaPreview`**: A tree view of the fields where you can rearrange or select fields to be edited.
+  - **`FormPreview`**: A live, iteractive preview of the form.
 - **`FormuleForm`**: You can use it to display a form (JSON Schema) generated by Formule.
 
 It also exports the following functions:
 
-- **`initFormuleSchema`**: Inits the JSONSchema, *needs* to be run on startup.
+- **`initFormuleSchema`**: Inits the JSONSchema, _needs_ to be run on startup.
 - **`getFormuleState`**: Formule has its own internal redux state. You can retrieve it at any moment if you so require for more advanced use cases. If you want to continuosly synchronize the Formule state in your app, you can pass a callback function to FormuleContext instead (see below), which will be called every time the form state changes.
 
 ### Field types
 
 Formule includes a variety of predefined field types, grouped in three categories:
+
 - **Simple fields**: `Text`, `Text area`, `Number`, `Checkbox`, `Switch`, `Radio`, `Select` and `Date` fields.
 - **Collections**:
   - `Object`: Use it of you want to group fields or to add several of them inside of a `List`.
@@ -45,23 +48,25 @@ Formule includes a variety of predefined field types, grouped in three categorie
 
 You can freely remove some of these predefined fields and add your own custom fields and widgets following the JSON Schema specifications. More details below.
 
-All of these items contain different settings that you can tinker with, separated into **Schema Settings** (*generally* affecting how the field *works*) and **UI Schema Settings** (*generally* affecting how the field *looks* like).
+All of these items contain different settings that you can tinker with, separated into **Schema Settings** (_generally_ affecting how the field _works_) and **UI Schema Settings** (_generally_ affecting how the field _looks_ like).
 
 ## :horse_racing: Setting it up
 
 ### Installation
+
 ```sh
 npm install react-formule
 # or
 yarn add react-formule
 ```
 
 ### Basic setup
+
 ```jsx
-import { 
-    FormuleContext, 
-    SelectOrEdit, 
-    SchemaPreview, 
+import {
+    FormuleContext,
+    SelectOrEdit,
+    SchemaPreview,
     FormPreview,
     initFormuleSchema
 } from "react-formule";
@@ -76,6 +81,7 @@ const useEffect(() => initFormuleSchema(), []);
 ```
 
 ### Customizing and adding new field types
+
 ```jsx
 <FormuleContext theme={{token: {colorPrimary: "blue"}}} customFieldTypes={...} customFields={...} customWidgets={...}>
 // ...
@@ -86,26 +92,25 @@ If you use Formule to edit existing JSON schemas that include extra fields (e.g.
 
 ```jsx
 const transformSchema = (schema) => {
-    // Remove properties...
-    return transformedSchema
-}
+  // Remove properties...
+  return transformedSchema;
+};
 
-<FormuleContext transformSchema={transformSchema}>
-// ...
-</FormuleContext>
+<FormuleContext transformSchema={transformSchema}>// ...</FormuleContext>;
 ```
 
 ### Syncing Formule state
+
 If you want to run some logic in your application every time the current Formule state changes in any way (e.g. to run some action every time a new field is added to the form) you can pass a function to be called back when that happens:
 
 ```jsx
-const handleFormuleStateChange = newState => {
-    // Do something when the state changes
-}
+const handleFormuleStateChange = (newState) => {
+  // Do something when the state changes
+};
 
 <FormuleContext synchonizeState={handleFormuleStateChange}>
-// ...
-</FormuleContext>
+  // ...
+</FormuleContext>;
 ```
 
 Alternatively, you can pull the current state on demand by calling `getFormuleState` at any moment.
@@ -114,4 +119,5 @@ Alternatively, you can pull the current state on demand by calling `getFormuleSt
 > For more examples, feel free to browse around the [CERN Analysis Preservation](https://github.com/cernanalysispreservation/analysispreservation.cern.ch) repository, where we use all the features mentioned above.
 
 ## :space_invader: Local demo & how to contribute
-You can also clone the repo and run `formule-demo` to play around. Follow the instructions in its [README](./formule-demo/README.md): it will explain how to install `react-formule` as a local dependency (with either `yarn link` or, better, `yalc`) so that you can modify Formule and test the changes live in your host app, which will be ideal if you want to troubleshoot or contribute to the project.
+
+You can also clone the repo and run `formule-demo` to play around. Follow the instructions in its [README](./formule-demo/README.md): it will explain how to install `react-formule` as a local dependency (with either `yarn link` or, better, `yalc`) so that you can modify Formule and test the changes live in your host app, which will be ideal if you want to troubleshoot or contribute to the project.
diff --git a/formule-demo/README.md b/formule-demo/README.md
@@ -10,6 +10,6 @@ Run `yarn link-local` in react-formule, then run `yarn link-local-lib` and `yarn
 
 ### 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.
+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 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.
+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. This advanced option is what we use to quickly test formule changes inside [CAP](https://github.com/cernanalysispreservation/analysispreservation.cern.ch).
diff --git a/formule-demo/src/App.tsx b/formule-demo/src/App.tsx
@@ -3,64 +3,77 @@ import { SchemaPreview } from "react-formule";
 import { FormPreview } from "react-formule";
 import { initFormuleSchema } from "react-formule";
 import { useEffect } from "react";
-import { Row, Col } from "antd";
+import { Row, Col, Layout, Space, Typography } from "antd";
+import { theme } from "./theme";
 
-import "./style.css"
+import "./style.css";
 
-const PRIMARY_COLOR = "#006996";
+const { Content, Footer } = Layout;
 
 function App() {
   useEffect(() => {
     initFormuleSchema();
   }, []);
 
   return (
-    <FormuleContext theme={{
-      token: {
-        colorPrimary: PRIMARY_COLOR,
-        colorLink: PRIMARY_COLOR,
-        colorLinkHover: "#1a7fa3",
-        borderRadius: 2,
-        colorBgLayout: "#f0f2f5",
-        fontFamily: "Titillium Web",
-      },
-    }}>
-      <Row style={{ height: "100%" }}>
-        <Col
-          xs={10}
-          sm={5}
-          style={{
-            overflowX: "hidden",
-            height: "100%",
-            display: "flex",
-          }}
-          className="tour-field-types"
+    <Layout style={{ height: "100%" }}>
+      <Content>
+        <FormuleContext theme={theme}>
+          <Row style={{ height: "100%" }}>
+            <Col
+              xs={10}
+              sm={5}
+              style={{
+                overflowX: "hidden",
+                height: "100%",
+                display: "flex",
+              }}
+              className="tour-field-types"
+            >
+              <SelectOrEdit />
+            </Col>
+            <Col
+              xs={14}
+              sm={5}
+              style={{
+                overflowX: "hidden",
+                padding: "0px 15px",
+                backgroundColor: "#F6F7F8",
+              }}
+              className="tour-schema-preview"
+            >
+              <SchemaPreview />
+            </Col>
+            <Col
+              xs={24}
+              sm={14}
+              style={{
+                overflowX: "hidden",
+                height: "100%",
+                padding: "0px 15px",
+              }}
+              className="tour-form-preview"
+            >
+              <FormPreview liveValidate={true} />
+            </Col>
+          </Row>
+        </FormuleContext>
+      </Content>
+      <Footer style={{ padding: 0 }}>
+        <Row
+          align="bottom"
+          justify="center"
+          style={{ padding: "5px", background: "#001529" }}
         >
-          <SelectOrEdit />
-        </Col>
-        <Col
-          xs={14}
-          sm={5}
-          style={{
-            overflowX: "hidden",
-            padding: "0px 15px",
-            backgroundColor: "#F6F7F8",
-          }}
-          className="tour-schema-preview"
-        >
-          <SchemaPreview />
-        </Col>
-        <Col
-          xs={24}
-          sm={14}
-          style={{ overflowX: "hidden", height: "100%", padding: "0px 15px" }}
-          className="tour-form-preview"
-        >
-          <FormPreview liveValidate={true} />
-        </Col>
-      </Row>
-
-    </FormuleContext>
+          <Space direction="horizontal" size="middle">
+            <Typography.Text style={{ color: "rgba(255, 255, 255, 0.65)" }}>
+              Running react-formule v{import.meta.env.REACT_FORMULE_VERSION}{" "}
+              deployed from master
+            </Typography.Text>
+          </Space>
+        </Row>
+      </Footer>
+    </Layout>
   );
 }
 

diff --git a/formule-demo/src/main.tsx b/formule-demo/src/main.tsx
@@ -1,9 +1,13 @@
-import React from 'react'
-import ReactDOM from 'react-dom/client'
-import App from './App.tsx'
+import React from "react";
+import ReactDOM from "react-dom/client";
+import App from "./App.tsx";
+import { ConfigProvider } from "antd";
+import { theme } from "./theme.ts";
 
-ReactDOM.createRoot(document.getElementById('root')!).render(
+ReactDOM.createRoot(document.getElementById("root")!).render(
   <React.StrictMode>
-    <App />
+    <ConfigProvider theme={theme}>
+      <App />
+    </ConfigProvider>
   </React.StrictMode>,
-)
+);
diff --git a/formule-demo/src/style.css b/formule-demo/src/style.css
@@ -18,3 +18,11 @@
   font-style: normal;
   font-weight: 600;
 }
+
+body {
+  margin: 0;
+}
+
+div#root {
+  height: 100vh;
+}
diff --git a/formule-demo/src/theme.ts b/formule-demo/src/theme.ts
@@ -0,0 +1,12 @@
+export const PRIMARY_COLOR = "#006996";
+
+export const theme = {
+  token: {
+    colorPrimary: PRIMARY_COLOR,
+    colorLink: PRIMARY_COLOR,
+    colorLinkHover: "#1a7fa3",
+    borderRadius: 2,
+    colorBgLayout: "#f0f2f5",
+    fontFamily: "Titillium Web",
+  },
+};
diff --git a/formule-demo/vite.config.local.ts b/formule-demo/vite.config.local.ts
@@ -7,5 +7,6 @@ viteConfig.resolve = {
     "react-formule": resolve(__dirname, "../src/index.ts"),
   },
 };
+viteConfig.base = undefined;
 
 export default viteConfig;
diff --git a/formule-demo/vite.config.ts b/formule-demo/vite.config.ts
@@ -1,10 +1,19 @@
-import { defineConfig } from "vite";
+import { ResolvedConfig, defineConfig } from "vite";
 import react from "@vitejs/plugin-react-swc";
+import { spawnSync } from "child_process";
+
+const formuleVersionPlugin = () => ({
+  name: "get-formule-version",
+  configResolved: (config: ResolvedConfig) => {
+    const result = spawnSync("npm", ["show", "react-formule", "version"]);
+    config.env.REACT_FORMULE_VERSION = result.stdout.toString().trim();
+  },
+});
 
 // https://vitejs.dev/config/
 export default defineConfig({
   base: "/react-formule",
-  plugins: [react()],
+  plugins: [react(), formuleVersionPlugin()],
   define: {
     "process.env": {},
   },