Merge pull request #2234 from AOT-Technologies/FWF-3440-Design-System-OS

[SYNC] Design system OS to develop

.github/workflows/forms-flow-root-config-cd.yml

@@ -86,6 +86,7 @@ jobs:
             MF_FORMSFLOW_WEB_URL=https://forms-flow-microfrontends.aot-technologies.com/forms-flow-web@${{ env.VERSION }}/forms-flow-web.gz.js
             MF_FORMSFLOW_NAV_URL=https://forms-flow-microfrontends.aot-technologies.com/forms-flow-nav@${{ env.VERSION }}/forms-flow-nav.gz.js
             MF_FORMSFLOW_SERVICE_URL=https://forms-flow-microfrontends.aot-technologies.com/forms-flow-service@${{ env.VERSION }}/forms-flow-service.gz.js
+            MF_FORMSFLOW_COMPONENTS_URL=https://forms-flow-microfrontends.aot-technologies.com/forms-flow-components@${{ env.VERSION }}/forms-flow-components.gz.js
             MF_FORMSFLOW_ADMIN_URL=https://forms-flow-microfrontends.aot-technologies.com/forms-flow-admin@${{ env.VERSION }}/forms-flow-admin.gz.js
       - name: Build and push Docker image
         if: ${{ github.ref == 'refs/heads/master' }}
@@ -100,6 +101,7 @@ jobs:
             MF_FORMSFLOW_WEB_URL=https://forms-flow-microfrontends.aot-technologies.com/forms-flow-web@${{ env.VERSION }}/forms-flow-web.gz.js
             MF_FORMSFLOW_NAV_URL=https://forms-flow-microfrontends.aot-technologies.com/forms-flow-nav@${{ env.VERSION }}/forms-flow-nav.gz.js
             MF_FORMSFLOW_SERVICE_URL=https://forms-flow-microfrontends.aot-technologies.com/forms-flow-service@${{ env.VERSION }}/forms-flow-service.gz.js
+            MF_FORMSFLOW_COMPONENTS_URL=https://forms-flow-microfrontends.aot-technologies.com/forms-flow-components@${{ env.VERSION }}/forms-flow-components.gz.js
             MF_FORMSFLOW_ADMIN_URL=https://forms-flow-microfrontends.aot-technologies.com/forms-flow-admin@${{ env.VERSION }}/forms-flow-admin.gz.js 
       - name: Scan Docker image 🐳
         uses: snyk/actions/docker@master

deployment/docker/docker-compose.yml

@@ -140,6 +140,7 @@ services:
         - MF_FORMSFLOW_WEB_URL=${MF_FORMSFLOW_WEB_URL:-https://forms-flow-microfrontends.aot-technologies.com/[email protected]/forms-flow-web.gz.js}
         - MF_FORMSFLOW_NAV_URL=${MF_FORMSFLOW_NAV_URL:-https://forms-flow-microfrontends.aot-technologies.com/[email protected]/forms-flow-nav.gz.js}
         - MF_FORMSFLOW_SERVICE_URL=${MF_FORMSFLOW_SERVICE_URL:-https://forms-flow-microfrontends.aot-technologies.com/[email protected]/forms-flow-service.gz.js}
+        - MF_FORMSFLOW_COMPONENTS_URL=${MF_FORMSFLOW_COMPONENTS_URL:-https://forms-flow-microfrontends.aot-technologies.com/[email protected]/forms-flow-components.gz.js}
         - MF_FORMSFLOW_ADMIN_URL=${MF_FORMSFLOW_ADMIN_URL:-https://forms-flow-microfrontends.aot-technologies.com/[email protected]/forms-flow-admin.gz.js}
         - NODE_ENV=${NODE_ENV:-production}
     entrypoint: /bin/sh -c "/usr/share/nginx/html/config/env.sh && nginx -g 'daemon off;'"

deployment/docker/sample.env

@@ -191,6 +191,7 @@ CUSTOM_SUBMISSION_URL=http://{your-ip-address}:{port}
 ## Refer Github Repo https://github.com/AOT-Technologies/forms-flow-ai-micro-front-ends and update to your own custom implementation for the Components here
 #MF_FORMSFLOW_NAV_URL=https://forms-flow-microfrontends.aot-technologies.com/[email protected]/forms-flow-nav.gz.js
 #MF_FORMSFLOW_SERVICE_URL=https://forms-flow-microfrontends.aot-technologies.com/[email protected]/forms-flow-service.gz.js
+#MF_FORMSFLOW_COMPONENTS_URL=https://forms-flow-microfrontends.aot-technologies.com/[email protected]/forms-flow-components.gz.js
 #MF_FORMSFLOW_ADMIN_URL=https://forms-flow-microfrontends.aot-technologies.com/[email protected]/forms-flow-admin.gz.js
 
 #++++++++++++++++--- formsflow.ai Web Microfrontend components  ENV Variables - STOP ---+++++++++++++++++++++++++#

forms-flow-web-root-config/Dockerfile

@@ -9,13 +9,15 @@ ARG NODE_ENV
 ARG MF_FORMSFLOW_WEB_URL
 ARG MF_FORMSFLOW_NAV_URL
 ARG MF_FORMSFLOW_SERVICE_URL
+ARG MF_FORMSFLOW_COMPONENTS_URL
 ARG MF_FORMSFLOW_ADMIN_URL
 
 
 # Set environment variables
 ENV MF_FORMSFLOW_WEB_URL ${MF_FORMSFLOW_WEB_URL}
 ENV MF_FORMSFLOW_NAV_URL ${MF_FORMSFLOW_NAV_URL}
 ENV MF_FORMSFLOW_SERVICE_URL ${MF_FORMSFLOW_SERVICE_URL}
+ENV MF_FORMSFLOW_COMPONENTS_URL ${MF_FORMSFLOW_COMPONENTS_URL}
 ENV MF_FORMSFLOW_ADMIN_URL ${MF_FORMSFLOW_ADMIN_URL}
 ENV NODE_ENV ${NODE_ENV}
 

forms-flow-web-root-config/README.md

@@ -60,6 +60,7 @@ is mentioned on the [link](../forms-flow-idm/keycloak/README.md#create-forms-flo
  `MF_FORMSFLOW_WEB_URL`:triangular_flag_on_post:| For running locally/ if have custom changes | `//forms-flow-microfrontends.aot-technologies.com/[email protected]/forms-flow-web.gz.js` <br> <br> For custom changes: `http://{your-ip-address}:3004/forms-flow-web.js` |  `//forms-flow-microfrontends.aot-technologies.com/[email protected]/forms-flow-nav.gz.js`
  `MF_FORMSFLOW_NAV_UR`:triangular_flag_on_post:|For custom implementation of Navbar component, refer [here](https://github.com/AOT-Technologies/forms-flow-ai-micro-front-ends/tree/main/forms-flow-nav)|          |`//forms-flow-microfrontends.aot-technologies.com/[email protected]/forms-flow-nav.gz.js`
  `MF_FORMSFLOW_SERVICE_URL`:triangular_flag_on_post:|For custom implementation of Service component, refer [here](https://github.com/AOT-Technologies/forms-flow-ai-micro-front-ends/tree/main/forms-flow-service)|          |`//forms-flow-microfrontends.aot-technologies.com/[email protected]/forms-flow-service.gz.js`
+ `MF_FORMSFLOW_COMPONENTS_URL`:triangular_flag_on_post:|For custom implementation of Formsflow components, refer [here](https://github.com/AOT-Technologies/forms-flow-ai-micro-front-ends/tree/main/forms-flow-components)|          |`//forms-flow-microfrontends.aot-technologies.com/[email protected]/forms-flow-components.gz.js`
  `MF_FORMSFLOW_ADMIN_URL`:triangular_flag_on_post:|For custom implementation of Admin component, refer [here](https://github.com/AOT-Technologies/forms-flow-ai-micro-front-ends/tree/main/forms-flow-admin)|          |`//forms-flow-microfrontends.aot-technologies.com/[email protected]/forms-flow-admin.gz.js`
  `MF_FORMSFLOW_THEME_URL`:triangular_flag_on_post:| For custom implementation of Theme component, refer [here](https://github.com/AOT-Technologies/forms-flow-ai-micro-front-ends/tree/main/forms-flow-theme) |          | `//forms-flow-microfrontends.aot-technologies.com/[email protected]/forms-flow-theme.gz.js`
  `NODE_ENV`| Define project level configuration | `development, test, production` | `production`

forms-flow-web-root-config/docker-compose.yml

@@ -8,6 +8,7 @@ services:
         - MF_FORMSFLOW_WEB_URL=${MF_FORMSFLOW_WEB_URL:-https://forms-flow-microfrontends.aot-technologies.com/[email protected]/forms-flow-web.gz.js}
         - MF_FORMSFLOW_NAV_URL=${MF_FORMSFLOW_NAV_URL:-https://forms-flow-microfrontends.aot-technologies.com/[email protected]/forms-flow-nav.gz.js}
         - MF_FORMSFLOW_SERVICE_URL=${MF_FORMSFLOW_SERVICE_URL:-https://forms-flow-microfrontends.aot-technologies.com/[email protected]/forms-flow-service.gz.js}
+        - MF_FORMSFLOW_COMPONENTS_URL=${MF_FORMSFLOW_COMPONENTS_URL:-https://forms-flow-microfrontends.aot-technologies.com/[email protected]/forms-flow-components.gz.js}
         - MF_FORMSFLOW_ADMIN_URL=${MF_FORMSFLOW_ADMIN_URL:-https://forms-flow-microfrontends.aot-technologies.com/[email protected]/forms-flow-admin.gz.js}
         - NODE_ENV=${NODE_ENV:-production}
     entrypoint: /bin/sh -c "/usr/share/nginx/html/config/env.sh && nginx -g 'daemon off;'"

forms-flow-web-root-config/public/config/config.js

@@ -1 +1 @@
-window["_env_"] = {};
+window["_env_"] =  {};

forms-flow-web-root-config/public/config/config.template.js

@@ -3,6 +3,7 @@ window["_env_"] = {
   MF_FORMSFLOW_WEB_URL: "${MF_FORMSFLOW_WEB_URL}",
   MF_FORMSFLOW_NAV_URL: "${MF_FORMSFLOW_NAV_URL}",
   MF_FORMSFLOW_SERVICE_URL: "${MF_FORMSFLOW_SERVICE_URL}",
+  MF_FORMSFLOW_COMPONENTS_URL: "${MF_FORMSFLOW_COMPONENTS_URL}",
   MF_FORMSFLOW_ADMIN_URL: "${MF_FORMSFLOW_ADMIN_URL}", */
   // To define project level configuration  possible values development,test, production
   NODE_ENV: "${NODE_ENV}",

forms-flow-web-root-config/sample.env

@@ -24,13 +24,15 @@
 #MF_FORMSFLOW_NAV_URL=https://forms-flow-microfrontends.aot-technologies.com/[email protected]/forms-flow-nav.gz.js
 #MF_FORMSFLOW_SERVICE_URL=https://forms-flow-microfrontends.aot-technologies.com/[email protected]/forms-flow-service.gz.js
 #MF_FORMSFLOW_ADMIN_URL=https://forms-flow-microfrontends.aot-technologies.com/[email protected]/forms-flow-admin.gz.js
+#MF_FORMSFLOW_COMPONENTS_URL=https://forms-flow-microfrontends.aot-technologies.com/[email protected]/forms-flow-components.gz.js
 
 #OR
 
 #TODO only for Customised Local delevelopment with code from https://github.com/AOT-Technologies/forms-flow-ai-micro-front-ends  use below default values instead
 #MF_FORMSFLOW_NAV_URL=//{your-ip-address}:3005/forms-flow-nav.js
 #MF_FORMSFLOW_ADMIN_URL=//{your-ip-address}:3006/forms-flow-admin.js
 #MF_FORMSFLOW_SERVICE_URL=//{your-ip-address}:3007/forms-flow-service.js
+#MF_FORMSFLOW_COMPONENTS_URL=//{your-ip-address}/forms-flow-components.js
 
 #++++++++++++++--- MF Variables to get MicroFrontend Components Created - STOP ---+++++++++++++++++++++++#
 

forms-flow-web-root-config/src/index.ejs

@@ -21,7 +21,6 @@
 
   <!-- required styles from cdn -->
   <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Nunito+Sans:wght@400;600;700&display=swap">
-  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css">
   <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/formio.full.min.css">
   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css" integrity="sha512-z3gLpd7yknf1YoNbCzqRKc4qyor8gaKU1qmn+CShxbuBusANI9QpRohGBreCFkKxLhei6S9CQXFEbbKuqLg0DA==" crossorigin="anonymous" referrerpolicy="no-referrer" />
     <script src="https://cdn.form.io/flatpickr/flatpickr.min.js"></script>
@@ -73,7 +72,8 @@
               "@formsflow/nav": "<%= process.env.MF_FORMSFLOW_NAV_URL %>",
               "@formsflow/formsflow-web": "<%= process.env.MF_FORMSFLOW_WEB_URL %>",
               "@formsflow/admin":"<%=process.env.MF_FORMSFLOW_ADMIN_URL %>",
-              "@formsflow/service":"<%= process.env.MF_FORMSFLOW_SERVICE_URL %>"
+              "@formsflow/service":"<%= process.env.MF_FORMSFLOW_SERVICE_URL %>",
+              "@formsflow/components":"<%= process.env.MF_FORMSFLOW_COMPONENTS_URL %>"
           }
         }
       </script>

forms-flow-web/src/components/BaseRouting.jsx

@@ -59,7 +59,7 @@ const BaseRouting = React.memo(
       return <LandingPage />;
     }
     return (
-      <div className="container  mt-5">
+      <div className="container  mt-4">
         <div className="min-container-height ps-md-3">
           <ToastContainer />
           <Switch>

forms-flow-web/src/components/CustomComponents/Button.js

@@ -0,0 +1,115 @@
+import React from "react";
+import { useRef, useEffect, useState } from "react";
+import Button from "react-bootstrap/Button";
+import ButtonGroup from "react-bootstrap/ButtonGroup";
+import Dropdown from "react-bootstrap/Dropdown";
+import { ChevronIcon } from "@formsflow/components";
+
+const CustomButton = ({
+  variant,
+  size,
+  label,
+  onClick,
+  isDropdown,
+  dropdownItems,
+  disabled,
+  icon,
+  className,
+  dataTestid,
+  ariaLabel,
+  buttonLoading,
+}) => {
+  const buttonRef = useRef(null);
+  const toggleRef = useRef(null);
+  const [menuStyle, setMenuStyle] = useState({});
+  const [dropdownOpen, setDropdownOpen] = useState(false);
+
+  const updateMenuStyle = () => {
+    if (buttonRef.current && toggleRef.current) {
+      const buttonWidth = buttonRef.current.getBoundingClientRect().width;
+      const toggleWidth = toggleRef.current.getBoundingClientRect().width;
+      const totalWidth = buttonWidth + toggleWidth - 1;
+      setMenuStyle({
+        minWidth: `${totalWidth}px`,
+        borderTop: "none",
+        borderTopLeftRadius: "0",
+        borderTopRightRadius: "0",
+        padding: "0",
+      });
+    }
+  };
+
+  useEffect(() => {
+    updateMenuStyle();
+    window.addEventListener("resize", updateMenuStyle);
+    return () => window.removeEventListener("resize", updateMenuStyle);
+  }, []);
+
+  if (isDropdown) {
+    return (
+      <Dropdown
+        as={ButtonGroup}
+        className={className}
+        onToggle={(isOpen) => setDropdownOpen(isOpen)}
+      >
+        <Button
+          variant={variant}
+          size={size}
+          disabled={disabled}
+          ref={buttonRef}
+          data-testid={dataTestid}
+          aria-label={ariaLabel}
+        >
+          {label}
+        </Button>
+
+        <Dropdown.Toggle
+          ref={toggleRef}
+          split
+          variant={variant}
+          id="dropdown-split-basic"
+          className={`default-arrow ${dropdownOpen ? "collapsed" : ""}`}
+        >
+          <ChevronIcon color="white" />
+        </Dropdown.Toggle>
+
+        <Dropdown.Menu style={menuStyle}>
+          {dropdownItems.map((item, index) => (
+            <Dropdown.Item
+              key={index}
+              onClick={item.onClick}
+              data-testid={item.dataTestid}
+              aria-label={item.ariaLabel}
+            >
+              {item.label}
+            </Dropdown.Item>
+          ))}
+        </Dropdown.Menu>
+      </Dropdown>
+    );
+  }
+
+  return (
+    <Button
+      variant={variant}
+      size={size}
+      onClick={onClick}
+      disabled={disabled || buttonLoading}
+      className={className}
+      data-testid={dataTestid}
+      aria-label={ariaLabel}
+    >
+      <div
+        className={`d-inline-flex align-items-center ${
+          buttonLoading ? "button-content" : ""
+        }`}
+      >
+        {icon && <span className="me-2">{icon}</span>}
+        {label}
+      </div>
+      {buttonLoading && <span className="dotted-spinner"></span>}
+    </Button>
+  );
+};
+
+export default CustomButton;

forms-flow-web/src/components/CustomComponents/FormInput.js

@@ -0,0 +1,65 @@
+import React from 'react';
+import { Form, InputGroup } from 'react-bootstrap';
+import { Translation } from "react-i18next";
+
+const FormInput = ({
+  type = "text",
+  label,
+  value = "",
+  onChange,
+  onBlur,
+  placeholder = "",
+  isInvalid = false,
+  feedback = "",
+  disabled = false,
+  size,
+  dataTestid,
+  ariaLabel,
+  className ,
+  required = false,
+  icon,
+  id
+}) => {
+
+  const inputClassNames = "form-control-input " + className ;
+  return (
+    <div className="form-input-box" >
+      <Form.Group controlId={id}>
+      {label && (
+        <Form.Label  className='custom-form-control-label'>
+          <Translation>{(t) => t(label)}</Translation> { required && <span className='required-icon'>*</span>}
+        </Form.Label>
+      )}
+      <InputGroup  className="custom-form-input-group" >
+        <Form.Control
+          type={type}
+          value={value}
+          onChange={onChange}
+          onBlur={onBlur}
+          placeholder={placeholder}
+          isInvalid={isInvalid}
+          disabled={disabled}
+          size={size}
+          data-testid={dataTestid}
+          aria-label={ariaLabel}
+          required={required}
+          className={inputClassNames}
+        />
+        {
+          icon && (
+            <InputGroup.Text id="basic-addon1" className={` ${disabled ? 'disabled-icon' : ''}`} >{icon}</InputGroup.Text>
+          )
+        }
+        {isInvalid && (
+          <Form.Control.Feedback className='custom-feedback' type="invalid">
+           <Translation>{(t) => t(feedback)}</Translation>
+          </Form.Control.Feedback>
+        )}
+
+      </InputGroup>
+    </Form.Group>
+    </div>
+  );
+};
+
+export default FormInput;

forms-flow-web/src/components/Footer/Footer.js

@@ -1,22 +1,23 @@
 import React from "react";
-import { version } from "../../../package.json";
-import { Translation } from "react-i18next";
+// import { version } from "../../../package.json";
+// import { Translation } from "react-i18next";
 
-const version_org = version;
+// const version_org = version;
 const Footer = React.memo(() => {
   return (
-    <div className="ps-md-3 pb-3">
-      <hr />
-      <div className="d-flex justify-content-end pb-2">
-        <div className="fw-bold">
-          <Translation>{(t) => t("Powered by ")}</Translation>{" "}
-          <a className="text-link" href="https://formsflow.ai/">
-            formsflow.ai
-          </a>
-          {` v${version_org}`}
-        </div>
-      </div>
-    </div>
+    <div></div>
+   // <div className="ps-md-3 pb-3">
+    //   <hr />
+    //   <div className="d-flex justify-content-end pb-2">
+    //     <div className="fw-bold">
+    //       <Translation>{(t) => t("Powered by ")}</Translation>{" "}
+    //       <a className="text-link" href="https://formsflow.ai/">
+    //         formsflow.ai
+    //       </a>
+    //       {` v${version_org}`}
+    //     </div>
+    //   </div>
+    // </div>
   );
 });
 export default Footer;