form-craft-package 1.8.2-dev.0 → 1.8.2-dev.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "form-craft-package",
-  "version": "1.8.2-dev.0",
+  "version": "1.8.2-dev.1",
   "main": "index.ts",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",

package/src/components/common/company-logo.tsx

@@ -0,0 +1,40 @@
+import { useState } from 'react'
+
+export default function CompanyLogoSection({
+  location = LogoLocationEnum.Authenticated,
+  logoUrl,
+  isPreview,
+}: {
+  location?: LogoLocationEnum
+  logoUrl?: string
+  isPreview?: boolean
+}) {
+  const [logoFailed, setLogoFailed] = useState(false)
+
+  if (!logoUrl || logoFailed)
+    return (
+      <div className="w-full py-1.5 rounded-md flex items-center justify-center text-danger italic text-lg font-bold">
+        [Company Logo]
+      </div>
+    )
+
+  const imgClassName =
+    location === LogoLocationEnum.Authenticated
+      ? 'w-auto h-auto max-w-[140px] sm:max-w-[160px] md:max-w-[180px] lg:max-w-[200px] xl:max-w-[220px]'
+      : 'h-10 object-contain'
+
+  return (
+    <img
+      alt="Logo"
+      src={logoUrl}
+      style={{ maxWidth: isPreview ? '200px' : undefined }}
+      className={imgClassName}
+      onError={() => setLogoFailed(true)}
+    />
+  )
+}
+
+export enum LogoLocationEnum {
+  Authenticated,
+  Unauthenticated,
+}

package/src/components/companies/2-unauthenticated/forgot-password.tsx

@@ -2,6 +2,7 @@ import { Button, Col, Form, Input, Row, Spin } from 'antd'
 import { useNavigate } from 'react-router-dom'
 import { useLoginHandler } from '../../common/custom-hooks/use-login-handler'
 import { useConfigContext } from '../context'
+import CompanyLogoSection, { LogoLocationEnum } from '../../common/company-logo'
 
 export const ForgotPassword = () => {
   const { config } = useConfigContext()
@@ -11,7 +12,6 @@ export const ForgotPassword = () => {
   const formPadding = config?.loginLayout?.form?.padding
   const titleColor = config?.loginLayout.form.color
   const background = config?.loginLayout?.background
-  const logoUrl = config?.siteIdentity?.logoUrl
   const primaryColor = config?.siteLayout?.siteConfigs?.colors?.primary
 
   return (
@@ -26,11 +26,9 @@ export const ForgotPassword = () => {
             maxWidth: '100%',
           }}
         >
-          {logoUrl && (
-            <div className="flex justify-center mb-4">
-              <img src={logoUrl} alt="Logo" className="h-10 object-contain" />
-            </div>
-          )}
+          <div className="flex justify-center mb-4">
+            <CompanyLogoSection logoUrl={config?.siteIdentity?.logoUrl} location={LogoLocationEnum.Unauthenticated} />
+          </div>
 
           <div className="font-bold mb-2" style={{ color: titleColor }}>
             Forgot Password?

package/src/components/companies/2-unauthenticated/index.tsx

@@ -3,6 +3,7 @@ import { useConfigContext } from '../context'
 import { useLoginHandler } from '../../common/custom-hooks/use-login-handler'
 import { FaPlus } from 'react-icons/fa'
 import { useNavigate } from 'react-router-dom'
+import CompanyLogoSection, { LogoLocationEnum } from '../../common/company-logo'
 
 export function UnauthenticatedLayout() {
   const { config } = useConfigContext()
@@ -23,7 +24,7 @@ export function UnauthenticatedLayout() {
 
   const logo = (
     <div className="flex justify-center">
-      <img src={siteIdentity?.logoUrl} alt="Logo" className="h-10 object-contain" />
+      <CompanyLogoSection logoUrl={siteIdentity?.logoUrl} location={LogoLocationEnum.Unauthenticated} />
     </div>
   )
 
@@ -43,7 +44,9 @@ export function UnauthenticatedLayout() {
 
   const formSection = (
     <div
-      className={`fc-login-container ${loginLayout?.layout === 'center' ? 'w-full' : 'w-1/2'} flex items-center justify-center h-screen`}
+      className={`fc-login-container ${
+        loginLayout?.layout === 'center' ? 'w-full' : 'w-1/2'
+      } flex items-center justify-center h-screen`}
     >
       <div
         style={{
@@ -57,7 +60,7 @@ export function UnauthenticatedLayout() {
           padding: `${loginLayout?.form?.padding || 16}px`,
           background: loginLayout?.form?.background,
         }}
-        className={`fc-login-panel max-h-screen overflow-auto shadow content-center text-center ${
+        className={`fc-login-panel max-h-screen overflow-auto shadow content-center text-center space-y-4 ${
           loginLayout?.formStyle === 'full' ? 'h-screen' : ''
         }`}
       >
@@ -75,7 +78,7 @@ export function UnauthenticatedLayout() {
             {loginLayout?.form?.title}
           </div>
         )}
-        <Form layout="vertical" onFinish={handleLogin} className='fc-login-form'>
+        <Form layout="vertical" onFinish={handleLogin} className="fc-login-form">
           <div>
             {loginLayout?.form?.fields?.map((field, index) => {
               const isLast = index === loginLayout?.form.fields.length - 1
@@ -140,7 +143,7 @@ export function UnauthenticatedLayout() {
           </div>
         </Form>
 
-        {loginLayout?.logoPosition === 'bottom' && <div className='fc-login-logo'>{logo}</div>}
+        {loginLayout?.logoPosition === 'bottom' && <div className="fc-login-logo">{logo}</div>}
       </div>
     </div>
   )

package/src/components/companies/2-unauthenticated/reset-password.tsx

@@ -4,6 +4,7 @@ import { useNavigate, useLocation } from 'react-router-dom'
 import { useLoginHandler } from '../../common/custom-hooks/use-login-handler'
 import { useConfigContext } from '../context'
 import { useRef } from 'react'
+import CompanyLogoSection, { LogoLocationEnum } from '../../common/company-logo'
 
 export const ResetPassword = () => {
   const { config } = useConfigContext()
@@ -21,7 +22,6 @@ export const ResetPassword = () => {
   const formPadding = config?.loginLayout?.form?.padding
   const titleColor = config?.loginLayout.form.color
   const background = config?.loginLayout?.background
-  const logoUrl = config?.siteIdentity?.logoUrl
   const primaryColor = config?.siteLayout?.siteConfigs?.colors?.primary
   const isFirstLoad = useRef(true)
   useEffect(() => {
@@ -64,11 +64,9 @@ export const ResetPassword = () => {
             maxWidth: '100%',
           }}
         >
-          {logoUrl && (
-            <div className="flex justify-center mb-4">
-              <img src={logoUrl} alt="Logo" className="h-10 object-contain" />
-            </div>
-          )}
+          <div className="flex justify-center mb-4">
+            <CompanyLogoSection logoUrl={config?.siteIdentity?.logoUrl} location={LogoLocationEnum.Unauthenticated} />
+          </div>
 
           <div className="font-bold mb-2" style={{ color: titleColor }}>
             Reset Password

package/src/components/form/layout-renderer/1-row/header-render.tsx

@@ -1,6 +1,6 @@
-import { ReactNode, useState } from 'react'
+import { ReactNode, useState, useTransition } from 'react'
 import { IFormDndLayoutRowHeader } from '../../../../types'
-import { Collapse } from 'antd'
+import { Collapse, Spin } from 'antd'
 import RowHeader from './header'
 
 export const LayoutRowConditionalHeaderRenderer = ({
@@ -11,21 +11,30 @@ export const LayoutRowConditionalHeaderRenderer = ({
   header: IFormDndLayoutRowHeader | undefined
 }) => {
   const [isCollapsed, setIsCollapsed] = useState(false)
+  const [isPendingTransition, startTransition] = useTransition()
 
   if (header?.isCollapsible)
     return (
-      <Collapse
-        className="fc-collapsible-row bg-transparent"
-        bordered={false}
-        defaultActiveKey={[]}
-        items={[
-          {
-            key: '1',
-            label: <RowHeader {...header} isCollapsed={isCollapsed} setIsCollapsed={() => setIsCollapsed((c) => !c)} />,
-            children,
-          },
-        ]}
-      />
+      <Spin spinning={isPendingTransition}>
+        <Collapse
+          className="fc-collapsible-row bg-transparent"
+          bordered={false}
+          defaultActiveKey={header.defaultCollapsed ? [] : ['1']}
+          items={[
+            {
+              key: '1',
+              label: (
+                <RowHeader
+                  {...header}
+                  isCollapsed={isCollapsed}
+                  setIsCollapsed={() => startTransition(() => setIsCollapsed((c) => !c))}
+                />
+              ),
+              children,
+            },
+          ]}
+        />
+      </Spin>
     )
 
   if (header?.name)

package/src/components/form/layout-renderer/3-element/7-file-upload.tsx

@@ -1,4 +1,4 @@
-import { Form, Input, Upload } from 'antd'
+import { Form, Input, Spin, Upload } from 'antd'
 import { useCallback, useState } from 'react'
 import { Button_FillerPortal } from '../../../common/button'
 import client from '../../../../api/client'
@@ -65,14 +65,10 @@ export default function LayoutRenderer_FileUpload({
 
   return (
     <>
-      <Form.Item
-        name={formItem.name}
-        labelAlign="left"
-        className="hidden"
-        label={elementProps.hasNoLabel ? '' : elementProps.label}
-      >
+      <Form.Item name={formItem.name} labelAlign="left" className="hidden">
         <Input />
       </Form.Item>
+      {!elementProps.hasNoLabel && elementProps.label && <span>{elementProps.label}</span>}
       {savedSignatureBlobName ? (
         <div
           className={`${ELEMENTS_DEFAULT_CLASS.Upload} text-primary flex items-center gap-2 bg-white rounded w-max px-4 py-1 font-semibold`}
@@ -96,20 +92,24 @@ export default function LayoutRenderer_FileUpload({
           </Button_FillerPortal>
         </div>
       ) : elementProps.isDragger ? (
-        <Upload.Dragger {...uploadProps} disabled={isDisabled} beforeUpload={(file) => beforeUpload(file)}>
-          <div className="flex flex-col items-center">
-            <FaUpload size={24} className="text-primary" />
-            <span className="font-semibold mt-2">{elementProps.placeholder}</span>
-            <span className="text-opacity-50">{elementProps.hint}</span>
-          </div>
-        </Upload.Dragger>
+        <Spin size="small" spinning={loading}>
+          <Upload.Dragger {...uploadProps} disabled={isDisabled} beforeUpload={(file) => beforeUpload(file)}>
+            <div className="flex flex-col items-center">
+              <FaUpload size={24} className="text-primary" />
+              <span className="font-semibold mt-2">{elementProps.placeholder}</span>
+              <span className="text-opacity-50">{elementProps.hint}</span>
+            </div>
+          </Upload.Dragger>
+        </Spin>
       ) : (
-        <Upload {...uploadProps} disabled={isDisabled} beforeUpload={(file) => beforeUpload(file)}>
-          <Button_FillerPortal disabled={isDisabled} outline onClick={() => {}}>
-            <FaUpload />
-            {elementProps.placeholder}
-          </Button_FillerPortal>
-        </Upload>
+        <Spin size="small" spinning={loading}>
+          <Upload {...uploadProps} disabled={isDisabled} beforeUpload={(file) => beforeUpload(file)}>
+            <Button_FillerPortal disabled={isDisabled} outline onClick={() => {}} className="w-full">
+              <FaUpload />
+              {elementProps.placeholder}
+            </Button_FillerPortal>
+          </Upload>
+        </Spin>
       )}
     </>
   )

package/src/components/form/layout-renderer/3-element/8-fields-with-options.tsx

@@ -228,7 +228,7 @@ export default function LayoutRenderer_FieldsWithOptions({
       <LayoutRenderer_FieldElement formRef={formRef}>
         {() => ({
           ...props,
-          label: (
+          label: props.label && (
             <div className="flex items-center gap-2 w-full">
               <span>{props.label}</span>
               {(props as ISelectElementProps).goToDetails?.enabled &&

package/src/functions/forms/data-render-functions.tsx

@@ -179,10 +179,13 @@ const renderImageData = (imgFullUrl: string, renderConfig: IDataRender_Image) =>
 const renderTags = (data: string[]) => {
   if (!Array.isArray(data)) return '-'
 
+  console.log(data)
   return (
-    <div className="flex flex-wrap gap-x-2 gap-y-1">
-      {data.map((str) => (
-        <span className="bg-gray-200 px-2 rounded-lg text-[11px]">{str}</span>
+    <div className="space-x-2">
+      {data.map((str, strIdx) => (
+        <span key={strIdx} className="bg-gray-200 px-2 py-0.5 rounded-lg text-[11px]">
+          {str}
+        </span>
       ))}
     </div>
   )

package/src/types/companies/site-layout/authenticated/index.tsx

@@ -11,6 +11,7 @@ import { UserAuth } from '../../../../api/user'
 import { useBreadcrumb } from '../../../../components/common/custom-hooks/use-breadcrumb.hook'
 import { PageViewTypEnum } from '../../../../enums'
 import { REACT_QUERY_CLIENT } from '../../../../constants'
+import CompanyLogoSection from '../../../../components/common/company-logo'
 
 const { Header, Content, Sider } = Layout
 
@@ -147,14 +148,7 @@ export const layoutTemplates = [
             {/* Logo */}
             <div className="flex fc-logo">
               <a href="/">
-                <img
-                  alt="logo"
-                  src={config?.siteIdentity?.logoUrl}
-                  style={{
-                    maxWidth: isPreview ? '200px' : undefined,
-                  }}
-                  className="w-auto h-auto max-w-[140px] sm:max-w-[160px] md:max-w-[180px] lg:max-w-[200px] xl:max-w-[220px]"
-                />
+                <CompanyLogoSection logoUrl={config?.siteIdentity?.logoUrl} isPreview={isPreview} />
               </a>
               {/* Mobile Menu */}
               <Drawer
@@ -348,14 +342,7 @@ export const layoutTemplates = [
             {/* Logo */}
             <div className="flex">
               <a href="/">
-                <img
-                  alt="logo"
-                  src={config?.siteIdentity?.logoUrl}
-                  style={{
-                    maxWidth: isPreview ? '200px' : undefined,
-                  }}
-                  className="w-auto h-auto max-w-[140px] sm:max-w-[160px] md:max-w-[180px] lg:max-w-[200px] xl:max-w-[220px]"
-                />
+                <CompanyLogoSection logoUrl={config?.siteIdentity?.logoUrl} isPreview={isPreview} />
               </a>
               {/* Mobile Menu */}
               <Drawer
@@ -556,6 +543,7 @@ export const layoutTemplates = [
           ))}
         </Menu>
       )
+
       return (
         <Layout className="fc-layout min-h-screen">
           {/* Side Menu */}
@@ -570,14 +558,7 @@ export const layoutTemplates = [
               {!isCollapsed && (
                 <div className="flex justify-center p-2 fc-logo">
                   <a href="/" className="w-full flex justify-center">
-                    <img
-                      alt="logo"
-                      src={config?.siteIdentity?.logoUrl}
-                      style={{
-                        maxWidth: isPreview ? '200px' : undefined,
-                      }}
-                      className="w-auto h-auto max-w-[140px] sm:max-w-[160px] md:max-w-[180px] lg:max-w-[200px] xl:max-w-[220px]"
-                    />
+                    <CompanyLogoSection logoUrl={config?.siteIdentity?.logoUrl} isPreview={isPreview} />
                   </a>
                 </div>
               )}
@@ -641,14 +622,7 @@ export const layoutTemplates = [
               {/* Logo */}
               <div className="flex p-2 fc-logo">
                 <a href="/">
-                  <img
-                    alt="logo"
-                    src={config?.siteIdentity?.logoUrl}
-                    style={{
-                      maxWidth: isPreview ? '200px' : undefined,
-                    }}
-                    className="w-auto h-auto max-w-[140px] sm:max-w-[160px] md:max-w-[180px] lg:max-w-[200px] xl:max-w-[220px]"
-                  />
+                  <CompanyLogoSection logoUrl={config?.siteIdentity?.logoUrl} isPreview={isPreview} />
                 </a>
               </div>
               {/* Mobile Menu Button */}

package/src/types/forms/index.ts

@@ -47,6 +47,7 @@ export interface IFormGenerateConfig {
 
 export interface IFormDndLayoutRowHeader {
   isCollapsible?: boolean
+  defaultCollapsed?: boolean
   name?: string
   style?: { [key: string]: string | number }
 }