Merge pull request #32 from surveyjs/creator-nextjs-demo-fix-styling

JaneSjs · web-flow · commit 94cfe37294de · 2025-07-24T10:54:35.000+03:00
Fix UI rendering and styles and survey creation dates
diff --git a/blogpost-apps/nextjs-form-builder/package.json b/blogpost-apps/nextjs-form-builder/package.json
@@ -14,11 +14,11 @@
     "next": "15.4.1",
     "react": "19.1.0",
     "react-dom": "19.1.0",
-    "survey-core": "2.2.5",
-    "survey-creator-core": "2.2.5",
-    "survey-creator-react": "2.2.5",
-    "survey-pdf": "2.2.5",
-    "survey-react-ui": "2.2.5"
+    "survey-core": "2.2.6",
+    "survey-creator-core": "2.2.6",
+    "survey-creator-react": "2.2.6",
+    "survey-pdf": "2.2.6",
+    "survey-react-ui": "2.2.6"
   },
   "devDependencies": {
     "@eslint/eslintrc": "^3",
diff --git a/blogpost-apps/nextjs-form-builder/src/app/globals.css b/blogpost-apps/nextjs-form-builder/src/app/globals.css
@@ -1,44 +1 @@
 @import "tailwindcss";
-
-:root {
-  --background: #ffffff;
-  --foreground: #171717;
-}
-
-@media (prefers-color-scheme: dark) {
-  :root {
-    --background: #0a0a0a;
-    --foreground: #ededed;
-  }
-}
-
-html,
-body {
-  max-width: 100vw;
-  overflow-x: hidden;
-}
-
-body {
-  color: var(--foreground);
-  background: var(--background);
-  font-family: Arial, Helvetica, sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}
-
-* {
-  box-sizing: border-box;
-  padding: 0;
-  margin: 0;
-}
-
-a {
-  color: inherit;
-  text-decoration: none;
-}
-
-@media (prefers-color-scheme: dark) {
-  html {
-    color-scheme: dark;
-  }
-}
diff --git a/blogpost-apps/nextjs-form-builder/src/app/page.tsx b/blogpost-apps/nextjs-form-builder/src/app/page.tsx
@@ -17,7 +17,9 @@ const FormBuilderComponent = dynamic(() => import('@/components/FormBuilder'), {
 const STORAGE_KEY = 'surveyjs-form-definitions';
 
 export default function Home() {
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
   const [surveyJson, setSurveyJson] = useState<any>(null);
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
   const [savedSurveys, setSavedSurveys] = useState<any[]>([]);
   const [currentSurveyName, setCurrentSurveyName] = useState<string>('');
   const [isLoading, setIsLoading] = useState(true);
@@ -28,15 +30,19 @@ export default function Home() {
       const savedList = saved ? JSON.parse(saved) : [];
 
       const preloaded = [courseEvaluationForm, healthAndWellnessAssessment, marketResearchForm, volunteerSignUpForm, websiteUsabilityForm];
-      const merged = [...preloaded, ...savedList.filter(s => !preloaded.some(p => p.id === s.id))];
+      const merged = [
+        ...preloaded,
+        ...savedList.filter((s: { id: string }) => !preloaded.some(p => p.id === s.id))
+      ];
+
 
       setSavedSurveys(merged);
       setIsLoading(false);
     }
 
     loadInitialSurveys();
   }, []);
-
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
   const handleSurveyChange = useCallback((json: any) => {
     setSurveyJson(json);
   }, []);
@@ -60,7 +66,7 @@ export default function Home() {
     setCurrentSurveyName('');
     alert('Survey saved successfully!');
   }, [surveyJson, currentSurveyName, savedSurveys]);
-
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
   const loadSurvey = useCallback((survey: any) => {
     setSurveyJson(survey.json);
     setCurrentSurveyName(survey.name);
@@ -87,86 +93,75 @@ export default function Home() {
 
   return (
     <div className="min-h-screen bg-gray-50">
-      {/* Header */}
-      <header className="bg-white shadow-sm border-b border-gray-200 py-6">
-        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
-          <div className="flex flex-col sm:flex-row sm:justify-between sm:items-center space-y-4 sm:space-y-0">
-            <h1 className="text-2xl font-bold text-gray-900">SurveyJS Form Builder</h1>
-            <div className="flex items-center gap-x-6">
-              <input
-                type="text"
-                placeholder="Enter survey name..."
-                value={currentSurveyName}
-                onChange={(e) => setCurrentSurveyName(e.target.value)}
-                className="px-5 py-3 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 w-64"
-              />
+      <div className="flex h-[calc(100vh-6rem)]">
+        <aside className="hidden lg:block xl:w-96 bg-white shadow-sm border-r border-gray-200 overflow-y-auto p-4">
+          <div className="flex justify-between items-center mb-4">
+            <h2 className="font-medium text-gray-800 tracking-wide uppercase text-[17px]">
+              Saved Surveys
+            </h2>
+            {savedSurveys.length > 0 && (
               <button
-                onClick={saveSurvey}
-                className="px-10 py-5 bg-blue-600 text-white rounded-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 transition"
+                onClick={clearAllSurveys}
+                className="cursor-pointer text-red-600 hover:text-red-800 transition text-[17px]"
               >
-                Save Survey
+                Clear All
               </button>
-            </div>
+            )}
           </div>
-        </div>
-      </header>
 
-      <div className="flex h-[calc(100vh-6rem)]">
-        {/* Sidebar */}
-        <aside className="w-80 bg-white shadow-sm border-r border-gray-200 overflow-y-auto">
-          <div className="p-6">
-            <div className="flex justify-between items-center mb-12 px-2">
-              <h2 className="text-lg font-semibold text-gray-900">Saved Surveys</h2>
-              {savedSurveys.length > 0 && (
-                <button
-                  onClick={clearAllSurveys}
-                  className="text-sm text-red-600 hover:text-red-800 transition"
-                >
-                  Clear All
-                </button>
-              )}
-            </div>
+          <div className="flex flex-col gap-4 mb-8">
+            <input
+              type="text"
+              placeholder="Enter survey name"
+              value={currentSurveyName}
+              onChange={(e) => setCurrentSurveyName(e.target.value)}
+              className="px-2 py-3 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 text-base"
+            />
+            <button
+              onClick={saveSurvey}
+              className="cursor-pointer py-3 px-2 bg-blue-600 text-white text-base font-medium rounded-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 transition"
+            >
+              Save Survey
+            </button>
+          </div>
 
-            {savedSurveys.length === 0 ? (
-              <p className="text-gray-500 text-sm">No saved surveys yet.</p>
-            ) : (
-              <div className="space-y-6">
-                {savedSurveys.map((survey) => (
-                  <div
-                    key={survey.id}
-                    className="p-5 bg-gray-50 rounded-lg hover:bg-gray-100 transition"
-                  >
-                    <div className="flex justify-between items-start gap-6">
-                      <div className="flex-1">
-                        <h3 className="font-medium text-gray-900 mb-2">{survey.name}</h3>
-                        <p className="text-sm text-gray-500">
-                          Created: {new Date(survey.createdAt).toLocaleDateString()}
-                        </p>
-                      </div>
-                      <div className="flex gap-4 ml-2">
-                        <button
-                          onClick={() => loadSurvey(survey)}
-                          className="text-blue-600 hover:text-blue-800 text-sm transition"
-                        >
-                          Load
-                        </button>
-                        <button
-                          onClick={() => deleteSurvey(survey.id)}
-                          className="text-red-600 hover:text-red-800 text-sm transition"
-                        >
-                          Delete
-                        </button>
-                      </div>
+          {savedSurveys.length === 0 ? (
+            <p className="text-gray-500">No saved surveys yet.</p>
+          ) : (
+            <div>
+              {savedSurveys.map((survey) => (
+                <div key={survey.id} className="mb-6">
+                  <div className="flex justify-between items-start">
+                    <div className="flex-1 pr-8">
+                      <h3 className="font-medium text-gray-900 mb-1 text-base">
+                        {survey.name}
+                      </h3>
+                      <p className="text-gray-500">
+                        Created: {new Date(survey.createdAt).toLocaleDateString()}
+                      </p>
+                    </div>
+                    <div className="flex flex-row items-center gap-3 min-w-[70px]">
+                      <button
+                        onClick={() => loadSurvey(survey)}
+                        className="cursor-pointer text-blue-600 hover:text-blue-800 transition py-1"
+                      >
+                        Load
+                      </button>
+                      <button
+                        onClick={() => deleteSurvey(survey.id)}
+                        className="cursor-pointer text-red-600 hover:text-red-800 transition py-1"
+                      >
+                        Delete
+                      </button>
                     </div>
                   </div>
-                ))}
-              </div>
-            )}
-          </div>
+                </div>
+              ))}
+            </div>
+          )}
         </aside>
 
-        {/* Main Content */}
-        <main className="flex-1 p-8">
+        <main className="flex-1 overflow-y-auto">
           <FormBuilderComponent
             onSaveSurvey={handleSurveyChange}
             json={surveyJson}
@@ -175,4 +170,4 @@ export default function Home() {
       </div>
     </div>
   );
-}
+}
diff --git a/blogpost-apps/nextjs-form-builder/src/components/FormBuilder.tsx b/blogpost-apps/nextjs-form-builder/src/components/FormBuilder.tsx
@@ -32,7 +32,8 @@ function addCustomTheme(theme: ICreatorTheme, userFriendlyThemeName: string) {
 addCustomTheme(creatorTheme, 'Custom Theme');
 
 const defaultCreatorOptions: ICreatorOptions = {
-  showTranslationTab: true
+  showTranslationTab: true,
+  showThemeTab: true
 };
 
 export default function FormBuilderComponent(props: {
@@ -82,6 +83,7 @@ export default function FormBuilderComponent(props: {
       visible: new ComputedUpdater(() => creator.activeTab === 'preview'),
       enabled: true,
       action: () => {
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
         const surveyModel = (creator.getPlugin("preview") as any).model.survey as SurveyModel;
         savePdf(surveyModel);
       }
diff --git a/blogpost-apps/nextjs-form-builder/src/formSamples/courseEvaluationForm.js b/blogpost-apps/nextjs-form-builder/src/formSamples/courseEvaluationForm.js
@@ -164,8 +164,8 @@ const courseEvaluationSurvey = {
   id: 'courseEvaluationForm',
   name: "Course Evaluation Form",
   json: courseEvaluationForm,
-  createdAt: "2023-01-01T00:00:00.000Z",
-  updatedAt: "2023-01-01T00:00:00.000Z"
+  createdAt: "2025-01-01T00:00:00.000Z",
+  updatedAt: "2025-01-01T00:00:00.000Z"
 };
 
 export default courseEvaluationSurvey;
diff --git a/blogpost-apps/nextjs-form-builder/src/formSamples/healthAndWellnessAssessment.js b/blogpost-apps/nextjs-form-builder/src/formSamples/healthAndWellnessAssessment.js
@@ -221,8 +221,8 @@ const healthWellnessForm = {
   id: 'healthWellnessForm',
   name: "Health and Wellness Survey",
   json: healthWellnessFormJson,
-  createdAt: "2023-01-01T00:00:00.000Z",
-  updatedAt: "2023-01-01T00:00:00.000Z"
+  createdAt: "2025-01-01T00:00:00.000Z",
+  updatedAt: "2025-01-01T00:00:00.000Z"
 };
 
 export default healthWellnessForm;
diff --git a/blogpost-apps/nextjs-form-builder/src/formSamples/marketResearchForm.js b/blogpost-apps/nextjs-form-builder/src/formSamples/marketResearchForm.js
@@ -137,8 +137,8 @@ const marketResearchForm = {
   id: 'marketResearchForm',
   name: "Market Research Form",
   json: marketResearchFormJson,
-  createdAt: "2023-01-01T00:00:00.000Z",
-  updatedAt: "2023-01-01T00:00:00.000Z"
+  createdAt: "2025-01-01T00:00:00.000Z",
+  updatedAt: "2025-01-01T00:00:00.000Z"
 };
 
 export default marketResearchForm;
diff --git a/blogpost-apps/nextjs-form-builder/src/formSamples/volunteerSignUpForm.js b/blogpost-apps/nextjs-form-builder/src/formSamples/volunteerSignUpForm.js
@@ -133,8 +133,8 @@ const volunteerSignUpForm = {
   id: 'volunteerSignUpForm',
   name: "Volunteer Sign Up Form",
   json: volunteerSignUpFormJson,
-  createdAt: "2023-01-01T00:00:00.000Z",
-  updatedAt: "2023-01-01T00:00:00.000Z"
+  createdAt: "2025-01-01T00:00:00.000Z",
+  updatedAt: "2025-01-01T00:00:00.000Z"
 };
 
 export default volunteerSignUpForm;
diff --git a/blogpost-apps/nextjs-form-builder/src/formSamples/websiteUsabilityForm.js b/blogpost-apps/nextjs-form-builder/src/formSamples/websiteUsabilityForm.js
@@ -179,8 +179,8 @@ const websiteUsabilityForm = {
   id: 'websiteUsabilityForm',
   name: "Website Usability Form",
   json: websiteUsabilityFormJson,
-  createdAt: "2023-01-01T00:00:00.000Z",
-  updatedAt: "2023-01-01T00:00:00.000Z"
+  createdAt: "2025-01-01T00:00:00.000Z",
+  updatedAt: "2025-01-01T00:00:00.000Z"
 };
 
 export default websiteUsabilityForm;
