User/thng/demo forms vb

.env

@@ -1,2 +1,3 @@
-GRAPH_URL=cg.optimizely.com
-GRAPH_SINGLE_KEY=
+GRAPH_URL=staging.cg.optimizely.com
+GRAPH_SINGLE_KEY=sWolKR11UkBvhjCu5phHocFiIsHFQfOzUCPIeCRDAPRm5uEF
+CMS_URL=app-sacttestrel9m87qp001.cmstest.optimizely.com

components.json

@@ -0,0 +1,21 @@
+{
+  "$schema": "https://ui.shadcn.com/schema.json",
+  "style": "new-york",
+  "rsc": false,
+  "tsx": true,
+  "tailwind": {
+    "config": "tailwind.config.ts",
+    "css": "src/styles/globals.css",
+    "baseColor": "neutral",
+    "cssVariables": true,
+    "prefix": ""
+  },
+  "aliases": {
+    "components": "@/components",
+    "utils": "@/lib/utils",
+    "ui": "@/components/ui",
+    "lib": "@/lib",
+    "hooks": "@/hooks"
+  },
+  "iconLibrary": "lucide"
+}

package.json

@@ -11,10 +11,20 @@
   },
   "dependencies": {
     "@apollo/client": "^3.10.4",
+    "@radix-ui/react-label": "^2.1.7",
+    "@radix-ui/react-select": "^2.2.5",
+    "@radix-ui/react-slot": "^1.2.3",
+    "axios": "^1.10.0",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
     "graphql": "^16.8.1",
+    "lucide-react": "^0.525.0",
     "next": "14.2.3",
     "react": "^18",
-    "react-dom": "^18"
+    "react-dom": "^18",
+    "shadcn": "^2.7.0",
+    "tailwind-merge": "^3.3.1",
+    "tailwindcss-animate": "^1.0.7"
   },
   "devDependencies": {
     "@graphql-codegen/cli": "^5.0.2",
@@ -26,5 +36,6 @@
     "postcss": "^8",
     "tailwindcss": "^3.4.1",
     "typescript": "^5"
-  }
+  },
+  "packageManager": "yarn@1.22.22+sha512.a6b2f7906b721bba3d67d4aff083df04dad64c399707841b7acf00f6b133b7ac24255f2652fa22ae3534329dc6180534e98d17432037ff6fd140556e2bb3137e"
 }

src/apolloClient.tsx

@@ -7,6 +7,15 @@ const graphUrl = process.env.GRAPH_URL;
 const cmsUrl = process.env.CMS_URL;
 const preview_token = getPreviewToken();
 
+const possibleTypes = {
+    _IComponent: [
+        'OptiFormsContainerData',
+        '_Component',
+        '_Section'
+    ],
+};
+
+
 // In Preview Mode
 if (preview_token) {
     const httpLink = createHttpLink({
@@ -24,7 +33,7 @@ if (preview_token) {
 
     client = new ApolloClient({
         link: authLink.concat(httpLink),
-        cache: new InMemoryCache()
+        cache: new InMemoryCache({ possibleTypes }),
     });
 
     const communicationScript = document.createElement('script');
@@ -50,7 +59,7 @@ if (client === undefined) {
 
     client = new ApolloClient({
         link: authLink.concat(httpLink),
-        cache: new InMemoryCache()
+        cache: new InMemoryCache({ possibleTypes }),
     });
 }
 

src/components/base/CompositionNodeComponent.tsx

@@ -1,28 +1,47 @@
 import { FragmentType, useFragment } from '../../graphql/fragment-masking'
 import { graphql } from '@/graphql'
+import TextboxElementComponent from '../elements/TextboxElementComponent'
+import TextareaElementComponent from '../elements/TextareaElementComponent'
+import SelectionElementComponent from '../elements/SelectionElementComponent'
+import SubmitElementComponent from '../elements/SubmitElementComponent'
 import ParagraphElementComponent from '../elements/ParagraphElementComponent'
 
 export const CompositionComponentNodeFragment = graphql(/* GraphQL */ `
-    fragment compositionComponentNode on CompositionComponentNode {
-        key
-        component {
-            _metadata {
-                types
-            }
-            ...paragraphElement
+fragment compositionComponentNode on CompositionComponentNode {
+    key
+    component {
+        _metadata {
+            types
         }
+      	...textboxElement
+        ...textareaElement
+        ...selectionElement
+        ...submitElement
+        ...paragraphElement
     }
+}
 `)
 
 const CompositionComponentNodeComponent = (props: {
-    compositionComponentNode: FragmentType<typeof CompositionComponentNodeFragment>
+    compositionComponentNode: FragmentType<typeof CompositionComponentNodeFragment>,
+    formState?: any
 }) => {
     const compositionComponentNode = useFragment(CompositionComponentNodeFragment, props.compositionComponentNode)
     const component = compositionComponentNode.component
+
     switch (component?.__typename) {
+        case "OptiFormsTextboxElement":
+            return <TextboxElementComponent textboxElement={component} formState={props.formState}/>
+        case "OptiFormsTextareaElement":
+            return <TextareaElementComponent textareElement={component} formState={props.formState}/>
+        case "OptiFormsSelectionElement":
+            return <SelectionElementComponent selectionElement={component} formState={props.formState}/>
+        case "OptiFormsSubmitElement":
+            return <SubmitElementComponent submitElement={component} formState={props.formState}/>
         case "ParagraphElement":
-            return <ParagraphElementComponent paragraphElement={component}/>
+            return <ParagraphElementComponent paragraphElement={component} />
         default:
+            console.log(`Unknown component type: ${component?.__typename}`);
             return <>NotImplementedException</>
     }
 }

src/components/base/FormsComponent.tsx

@@ -0,0 +1,126 @@
+import React, { FC, useEffect } from 'react'
+import { useQuery } from '@apollo/client'
+
+import { graphql } from '@/graphql'
+import { onContentSaved } from "@/helpers/onContentSaved";
+import { RenderCompositionNode } from './VisualBuilderComponent';
+
+export const Forms = graphql(/* GraphQL */ `
+query Forms($key: String, $version: String) {
+  OptiFormsContainerData(where: {
+      _metadata: { key: { eq: $key } }
+      _or: { _metadata: { version: { eq: $version } } }
+    }) {
+    items {      
+      composition {
+        grids: nodes {
+          ... on CompositionStructureNode {
+            key
+            __typename
+            displayName
+            nodeType
+            layoutType
+            component {
+              	..._IComponent
+            }
+            nodes: nodes {
+              ... on CompositionStructureNode {
+                key
+                __typename
+                displayName
+                nodeType
+                layoutType
+                nodes: nodes {
+                  ... on CompositionStructureNode {
+                    key
+                    __typename
+                    displayName
+                    nodeType
+                    layoutType
+                    nodes: nodes {
+                      ...compositionComponentNode
+                      ... on CompositionStructureNode {
+                        key
+                        __typename
+                        displayName
+                        nodeType
+                        layoutType
+                        nodes: nodes {
+                          ...compositionComponentNode
+                        }
+                      }
+                    }
+                  }
+                }
+              }
+            }
+          }
+        }
+      }
+      _metadata {
+        key
+        version,        
+      }
+    }
+  }
+}
+
+`)
+
+interface FormsProps {
+    contentKey?: string;
+    version?: string;
+}
+
+const FormsComponent: FC<FormsProps> = ({ version, contentKey }) => {
+    const formState: any = {};
+    const variables: Record<string, unknown> = {};
+    if (version) {
+        variables.version = version;
+    }
+
+    if (contentKey) {
+        variables.key = contentKey;
+    }
+
+    const { data, refetch } = useQuery(Forms, {
+        variables: variables,
+        notifyOnNetworkStatusChange: true,
+    });
+
+    useEffect(() => {
+        onContentSaved(_ => {
+            const contentIdArray = _.contentLink.split('_')
+            if (contentIdArray.length > 1) {
+                version = contentIdArray[contentIdArray.length - 1]
+                variables.version = version;
+            }
+            refetch(variables);
+        })
+    }, []);
+
+    const forms = data?.OptiFormsContainerData?.items;
+    if (!forms) {
+        return null;
+    }
+
+    const form: any = forms[forms.length - 1];
+    if (!form) {
+        return null;
+    }
+
+    return (
+        <div className="relative w-lg flex-1 vb:outline">
+            <div className="relative w-lg flex-1 vb:outline">
+                {form?.composition?.grids?.map((grid: any) =>
+                    <div key={grid.key} className="relative w-lg flex flex-col flex-nowrap justify-start vb:grid"
+                        data-epi-block-id={grid.key}>
+                        {RenderCompositionNode(grid, formState)}
+                    </div>
+                )}
+            </div>
+        </div>
+    )
+}
+
+export default FormsComponent