feat: allow to set a description to a page (#118)

jmjuanes · Nov 17, 2024 · c959e22 · c959e22
1 parent 1ebc118
commit c959e22
Show file tree

Hide file tree

Showing 5 changed files with 20 additions and 1 deletion.
diff --git a/app/components/dialogs/page-configure.jsx b/app/components/dialogs/page-configure.jsx
@@ -16,6 +16,12 @@ const pageEditFields = {
         placeholder: "Untitled Page",
         helper: "Give your page a name.",
     },
+    description: {
+        type: FORM_OPTIONS.TEXTAREA,
+        title: "Description",
+        // placeholder: "Add a description",
+        helper: "Add a description to your page.",
+    },
     readonly: {
         type: FORM_OPTIONS.CHECKBOX,
         title: "Read-Only",
@@ -29,6 +35,7 @@ export const PageConfigureDialog = props => {
     const page = scene.getPage(props.page);
     const [data, setData] = useFormData({
         title: page.title,
+        description: page.description,
         readonly: !!page.readonly,
     });
     const isSubmitEnabled = !!data.title;

diff --git a/app/components/form/index.jsx b/app/components/form/index.jsx
@@ -210,6 +210,15 @@ const optionTypes = {
             onChange={event => props.onChange(event.target.value)}
         />
     ),
+    [FORM_OPTIONS.TEXTAREA]: props => (
+        <textarea
+            className={themed("w-full px-2 py-1 rounded-md outline-0 text-xs", "form.text.input")}
+            defaultValue={props.value}
+            placeholder={props.placeholder}
+            rows={props.rows ?? 3}
+            onChange={event => props.onChange(event.target.value)}
+        />
+    ),
     [FORM_OPTIONS.CUSTOM]: props => {
         return props.render?.(props);
     },

diff --git a/app/components/panels/pages.jsx b/app/components/panels/pages.jsx
@@ -86,7 +86,7 @@ const Page = ({title, active, editable, style, onClick, ...props}) => {
                 <BarsIcon />
             </div>
             <div className="cursor-pointer flex items-center gap-2 w-full p-0 ml-6" onClick={onClick}>
-                <div className="font-medium text-sm w-content max-w-32 truncate leading-none" title={title}>
+                <div className="font-medium text-sm w-content max-w-32 truncate" title={title}>
                     <span>{title}</span>
                 </div>
                 {props.readonly && (

diff --git a/app/constants.js b/app/constants.js
@@ -85,6 +85,7 @@ export const FORM_OPTIONS = {
     SEPARATOR: "separator",
     IMAGE_SELECT: "image-select",
     TEXT: "text",
+    TEXTAREA: "textarea",
     CUSTOM: "custom",
 };
 

diff --git a/app/scene.js b/app/scene.js
@@ -195,6 +195,7 @@ const createPage = (page, index = 0) => {
     return {
         id: page?.id || generateRandomId(),
         title: page?.title || `Page ${index + 1}`,
+        description: page?.description || "",
         elements: (page?.elements || []).map(element => ({
             ...element,
             [FIELDS.SELECTED]: false,
@@ -279,6 +280,7 @@ export const createScene = initialData => {
                 pages: scene.pages.map(page => ({
                     id: page.id,
                     title: page.title,
+                    description: page.description || "",
                     elements: page.elements,
                     readonly: !!page.readonly,
                 })),