atomic forms submissions #875

Author: Polleps

browser/data-browser/package.json

@@ -47,6 +47,7 @@
     "@tiptap/react": "^3.23.6",
     "@tiptap/starter-kit": "^3.23.6",
     "@tiptap/suggestion": "^3.23.6",
+    "@tomic/form-renderer": "workspace:*",
     "@tomic/lib": "workspace:*",
     "@tomic/plugin": "workspace:*",
     "@tomic/react": "workspace:*",

browser/data-browser/src/chunks/FormBuilder/FormBuilderPage.tsx

@@ -5,15 +5,19 @@ import { ContainerFull } from '@components/Containers';
 import { EditableTitle } from '@components/EditableTitle';
 import { Row } from '@components/Row';
 import type { ResourcePageProps } from '@views/ResourcePage';
-import { PageSidebar } from './PageSidebar';
+import { PageTabBar } from './PageTabBar';
 import { FieldList } from './FieldList';
 import { FieldSettingsPanel } from './FieldSettingsPanel';
 import { PublishToggle } from './PublishToggle';
+import { FormPreviewButton } from './FormPreviewDialog';
 
 export function FormBuilderPage({ resource }: ResourcePageProps): JSX.Element {
   const titleId = useId();
   const [pages] = useArray(resource, forms.properties.formPages);
-  const [dataClassSubject] = useString(resource, forms.properties.formDataClass);
+  const [dataClassSubject] = useString(
+    resource,
+    forms.properties.formDataClass,
+  );
 
   const [activePage, setActivePage] = useState<string | undefined>(pages[0]);
   const [selectedField, setSelectedField] = useState<string | undefined>();
@@ -31,19 +35,12 @@ export function FormBuilderPage({ resource }: ResourcePageProps): JSX.Element {
         <TitleSlot>
           <Row justify='space-between' center>
             <EditableTitle resource={resource} id={titleId} />
-            <PublishToggle resource={resource} />
+            <Row gap='0.5rem' center>
+              <FormPreviewButton formSubject={resource.subject} />
+              <PublishToggle resource={resource} />
+            </Row>
           </Row>
         </TitleSlot>
-        <SidebarSlot>
-          <PageSidebar
-            formResource={resource}
-            activePage={activePage}
-            onSelectPage={subject => {
-              setActivePage(subject);
-              setSelectedField(undefined);
-            }}
-          />
-        </SidebarSlot>
         <MainSlot>
           {activePage && dataClassSubject && (
             <FieldList
@@ -62,29 +59,33 @@ export function FormBuilderPage({ resource }: ResourcePageProps): JSX.Element {
             />
           )}
         </SettingsSlot>
+        <PageBarSlot>
+          <PageTabBar
+            formResource={resource}
+            activePage={activePage}
+            onSelectPage={subject => {
+              setActivePage(subject);
+              setSelectedField(undefined);
+            }}
+          />
+        </PageBarSlot>
       </FormBuilderGrid>
     </ContainerFull>
   );
 }
 
 const FormBuilderGrid = styled.div`
   display: grid;
-  grid-template-areas: 'title title title' 'sidebar main settings';
-  grid-template-columns: 14rem 1fr 18rem;
-  grid-template-rows: 4rem auto;
+  grid-template-areas: 'title title' 'main settings' 'pages pages';
+  grid-template-columns: 1fr 18rem;
+  grid-template-rows: 4rem auto min-content;
   width: 100%;
   min-height: ${p => p.theme.heights.fullPage};
 
-  @container (max-width: 900px) {
-    grid-template-areas: 'title title' 'sidebar main' 'settings settings';
-    grid-template-columns: 14rem 1fr;
-    grid-template-rows: 4rem auto auto;
-  }
-
   @container (max-width: 600px) {
-    grid-template-areas: 'title' 'sidebar' 'main' 'settings';
+    grid-template-areas: 'title' 'main' 'settings' 'pages';
     grid-template-columns: 100cqw;
-    grid-template-rows: 4rem auto auto auto;
+    grid-template-rows: 4rem auto auto min-content;
   }
 `;
 
@@ -93,12 +94,6 @@ const TitleSlot = styled.div`
   padding: ${p => p.theme.size()};
 `;
 
-const SidebarSlot = styled.div`
-  grid-area: sidebar;
-  padding: ${p => p.theme.size()};
-  border-right: 1px solid ${p => p.theme.colors.bg2};
-`;
-
 const MainSlot = styled.div`
   grid-area: main;
   padding: ${p => p.theme.size()};
@@ -109,3 +104,10 @@ const SettingsSlot = styled.div`
   padding: ${p => p.theme.size()};
   border-left: 1px solid ${p => p.theme.colors.bg2};
 `;
+
+const PageBarSlot = styled.div`
+  grid-area: pages;
+  padding: ${p => p.theme.size()};
+  border-top: 1px solid ${p => p.theme.colors.bg2};
+  min-width: 0;
+`;

browser/data-browser/src/chunks/FormBuilder/FormPreviewDialog.tsx

@@ -0,0 +1,71 @@
+import { useEffect, useState, type JSX } from 'react';
+import { useStore } from '@tomic/react';
+import { FormRenderer, type FormDefinition } from '@tomic/form-renderer';
+import '@tomic/form-renderer/style.css';
+import {
+  Dialog,
+  DialogActions,
+  DialogContent,
+  DialogTitle,
+  useDialog,
+} from '@components/Dialog';
+import { Button } from '@components/Button';
+import { buildFormDefinitionClientSide } from './buildFormDefinition';
+
+interface FormPreviewButtonProps {
+  formSubject: string;
+}
+
+/** Renders the form exactly as a visitor would see it at `/form/:id`, using
+ * the same `@tomic/form-renderer` component — built from a client-side
+ * mirror of the server's definition JSON (`buildFormDefinitionClientSide`).
+ * `preview` disables the honeypot and turns Submit into a no-op so no real
+ * submission row is ever written from here. */
+export function FormPreviewButton({
+  formSubject,
+}: FormPreviewButtonProps): JSX.Element {
+  const store = useStore();
+  const [dialogProps, show, close, isOpen] = useDialog();
+  const [definition, setDefinition] = useState<FormDefinition>();
+
+  useEffect(() => {
+    if (!isOpen) return;
+
+    let cancelled = false;
+
+    buildFormDefinitionClientSide(store, formSubject).then(def => {
+      if (!cancelled) setDefinition(def);
+    });
+
+    return () => {
+      cancelled = true;
+    };
+  }, [isOpen, store, formSubject]);
+
+  return (
+    <>
+      <Button subtle onClick={show}>
+        Preview
+      </Button>
+      <Dialog {...dialogProps} width='40rem'>
+        <DialogTitle>
+          <h1>Preview</h1>
+        </DialogTitle>
+        <DialogContent>
+          {definition ? (
+            <FormRenderer
+              definition={definition}
+              preview
+              onSubmit={async () => ({ ok: true })}
+            />
+          ) : (
+            <p>Loading preview…</p>
+          )}
+        </DialogContent>
+        <DialogActions>
+          <Button onClick={() => close(false)}>Close</Button>
+        </DialogActions>
+      </Dialog>
+    </>
+  );
+}

…r/src/chunks/FormBuilder/PageSidebar.tsx …er/src/chunks/FormBuilder/PageTabBar.tsxbrowser/data-browser/src/chunks/FormBuilder/PageSidebar.tsx renamed to browser/data-browser/src/chunks/FormBuilder/PageTabBar.tsx browser/data-browser/src/chunks/FormBuilder/PageSidebar.tsx renamed to browser/data-browser/src/chunks/FormBuilder/PageTabBar.tsx

@@ -10,23 +10,23 @@ import {
 import { useState, type JSX } from 'react';
 import { styled } from 'styled-components';
 import { FaPlus, FaTrash } from 'react-icons/fa6';
-import { Column, Row } from '@components/Row';
+import { Row } from '@components/Row';
 import { Button } from '@components/Button';
 import { InputStyled } from '@components/forms/InputStyles';
 import { IconButton, IconButtonVariant } from '@components/IconButton/IconButton';
 import { ReorderableList } from './ReorderableList';
 
-interface PageSidebarProps {
+interface PageTabBarProps {
   formResource: Resource;
   activePage: string | undefined;
   onSelectPage: (subject: string) => void;
 }
 
-export function PageSidebar({
+export function PageTabBar({
   formResource,
   activePage,
   onSelectPage,
-}: PageSidebarProps): JSX.Element {
+}: PageTabBarProps): JSX.Element {
   const store = useStore();
   const [pages, setPages] = useArray(formResource, forms.properties.formPages, {
     commit: true,
@@ -62,26 +62,29 @@ export function PageSidebar({
   };
 
   return (
-    <Column gap='0.5rem'>
-      <ReorderableList
-        subjects={pages}
-        onReorder={setPages}
-        renderItem={subject => (
-          <PageTab
-            subject={subject}
-            active={subject === activePage}
-            canDelete={pages.length > 1}
-            onSelect={() => onSelectPage(subject)}
-            onDelete={() => deletePage(subject)}
-          />
-        )}
-      />
+    <TabBarRow gap='0.5rem' center>
+      <ScrollArea>
+        <ReorderableList
+          subjects={pages}
+          onReorder={setPages}
+          orientation='horizontal'
+          renderItem={subject => (
+            <PageTab
+              subject={subject}
+              active={subject === activePage}
+              canDelete={pages.length > 1}
+              onSelect={() => onSelectPage(subject)}
+              onDelete={() => deletePage(subject)}
+            />
+          )}
+        />
+      </ScrollArea>
       <AddButton type='button' subtle onClick={addPage}>
         <Row gap='.5rem' center>
           <FaPlus /> Add page
         </Row>
       </AddButton>
-    </Column>
+    </TabBarRow>
   );
 }
 
@@ -161,14 +164,26 @@ function PageTab({
   );
 }
 
+const TabBarRow = styled(Row)`
+  width: 100%;
+  min-width: 0;
+`;
+
+const ScrollArea = styled.div`
+  flex: 1;
+  min-width: 0;
+  overflow-x: auto;
+  overflow-y: hidden;
+`;
+
 const TabRow = styled(Row)<{ $active: boolean }>`
   align-items: center;
   gap: 0.25rem;
-  width: 100%;
+  flex-shrink: 0;
+  white-space: nowrap;
 `;
 
 const TabButton = styled.button<{ $active: boolean }>`
-  flex: 1;
   text-align: left;
   padding: 0.35rem 0.6rem;
   border: none;
@@ -177,14 +192,15 @@ const TabButton = styled.button<{ $active: boolean }>`
   color: ${p => (p.$active ? p.theme.colors.text : p.theme.colors.textLight)};
   font-weight: ${p => (p.$active ? 'bold' : 'normal')};
   cursor: pointer;
+  white-space: nowrap;
 
   &:hover {
     background-color: ${p => p.theme.colors.bg1};
   }
 `;
 
 const AddButton = styled(Button)`
-  align-self: stretch;
+  flex-shrink: 0;
   box-shadow: none;
   border: 1px dashed ${p => p.theme.colors.bg2};
   background: none;