tee3apps-cms-sdk-react 0.0.6 → 0.0.7

package/src/PageFormComponents/PageForm.css

@@ -65,3 +65,149 @@
     opacity: 0.4;
   }
 }
+
+/* Toast Notification Styles */
+.toast-container {
+  position: fixed;
+  top: 20px;
+  right: 20px;
+  z-index: 10000;
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  max-width: 400px;
+  width: calc(100% - 40px);
+  pointer-events: none;
+}
+
+@media (max-width: 480px) {
+  .toast-container {
+    top: 10px;
+    right: 10px;
+    left: 10px;
+    width: calc(100% - 20px);
+    max-width: none;
+  }
+}
+
+.toast {
+  display: flex;
+  align-items: flex-start;
+  gap: 12px;
+  padding: 16px;
+  background-color: #ffffff;
+  border-radius: 8px;
+  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+  border-left: 4px solid;
+  cursor: pointer;
+  pointer-events: all;
+  animation: slideInRight 0.3s ease-out, fadeOut 0.3s ease-out 4.7s forwards;
+  transition: transform 0.2s ease, box-shadow 0.2s ease;
+}
+
+.toast:hover {
+  transform: translateX(-4px);
+  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
+}
+
+.toast--error {
+  border-left-color: #ef4444;
+  background-color: #fef2f2;
+}
+
+.toast--error .toast__icon {
+  color: #ef4444;
+}
+
+.toast--success {
+  border-left-color: #10b981;
+  background-color: #f0fdf4;
+}
+
+.toast--success .toast__icon {
+  color: #10b981;
+}
+
+.toast--info {
+  border-left-color: #3b82f6;
+  background-color: #eff6ff;
+}
+
+.toast--info .toast__icon {
+  color: #3b82f6;
+}
+
+.toast--warning {
+  border-left-color: #f59e0b;
+  background-color: #fffbeb;
+}
+
+.toast--warning .toast__icon {
+  color: #f59e0b;
+}
+
+.toast__icon {
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 20px;
+  height: 20px;
+}
+
+.toast__message {
+  flex: 1;
+  font-size: 14px;
+  line-height: 1.5;
+  color: #1f2937;
+  font-weight: 500;
+  word-wrap: break-word;
+  overflow-wrap: break-word;
+}
+
+.toast__close {
+  flex-shrink: 0;
+  background: none;
+  border: none;
+  padding: 4px;
+  cursor: pointer;
+  color: #6b7280;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 4px;
+  transition: background-color 0.2s ease, color 0.2s ease;
+  margin-left: 4px;
+}
+
+.toast__close:hover {
+  background-color: rgba(0, 0, 0, 0.05);
+  color: #1f2937;
+}
+
+.toast__close:active {
+  background-color: rgba(0, 0, 0, 0.1);
+}
+
+/* Animations */
+@keyframes slideInRight {
+  from {
+    transform: translateX(100%);
+    opacity: 0;
+  }
+  to {
+    transform: translateX(0);
+    opacity: 1;
+  }
+}
+
+@keyframes fadeOut {
+  from {
+    opacity: 1;
+    transform: translateX(0);
+  }
+  to {
+    opacity: 0;
+    transform: translateX(100%);
+  }
+}

package/src/PageFormComponents/PageForm.tsx

@@ -8,11 +8,18 @@ interface PageFormProps {
   onSubmit?: (data: Record<string, any>) => void;
 }
 
+interface Toast {
+  id: string;
+  message: string;
+  type: 'error' | 'success' | 'info' | 'warning';
+}
+
 const PageForm: React.FC<PageFormProps> = ({ jsonData, onSubmit }) => {
   // Form state to store all field values
   const [formValues, setFormValues] = useState<Record<string, any>>({});
   const [deviceMode, setDeviceMode] = useState<string>('web');
   const [validationErrors, setValidationErrors] = useState<Record<string, boolean>>({});
+  const [toasts, setToasts] = useState<Toast[]>([]);
 
   // Function to determine device mode based on screen width
   const getDeviceMode = (width: number) => {
@@ -146,6 +153,24 @@ const PageForm: React.FC<PageFormProps> = ({ jsonData, onSubmit }) => {
     return { isValid: Object.keys(errors).length === 0, errors };
   }, [formValues, getRequiredFields]);
 
+  // Function to show toast notification
+  const showToast = useCallback((message: string, type: Toast['type'] = 'error') => {
+    const id = Date.now().toString();
+    const newToast: Toast = { id, message, type };
+    
+    setToasts(prev => [...prev, newToast]);
+    
+    // Auto remove toast after 5 seconds
+    setTimeout(() => {
+      setToasts(prev => prev.filter(toast => toast.id !== id));
+    }, 5000);
+  }, []);
+
+  // Function to remove toast
+  const removeToast = useCallback((id: string) => {
+    setToasts(prev => prev.filter(toast => toast.id !== id));
+  }, []);
+
   // Single method to handle form submission - validates, transforms, and sends data to parent
   const handleFormSubmit = useCallback(() => {
     // Validate form and get validation result
@@ -165,9 +190,9 @@ const PageForm: React.FC<PageFormProps> = ({ jsonData, onSubmit }) => {
       const errorFields = Object.keys(errors)
         .map(code => requiredFields[code]?.name || code)
         .join(', ');
-      alert(`Please fill in all required fields: ${errorFields}`);
+      showToast(`Please fill in all required fields: ${errorFields}`, 'error');
     }
-  }, [formValues, validateForm, getRequiredFields, transformFormValuesToNames, onSubmit]);
+  }, [formValues, validateForm, getRequiredFields, transformFormValuesToNames, onSubmit, showToast]);
 
   return (
     <div className="page-form">
@@ -188,6 +213,53 @@ const PageForm: React.FC<PageFormProps> = ({ jsonData, onSubmit }) => {
         {/* Footer */}
         
       </div>
+
+      {/* Toast Container */}
+      <div className="toast-container">
+        {toasts.map((toast) => (
+          <div
+            key={toast.id}
+            className={`toast toast--${toast.type}`}
+            onClick={() => removeToast(toast.id)}
+          >
+            <div className="toast__icon">
+              {toast.type === 'error' && (
+                <svg width="20" height="20" viewBox="0 0 20 20" fill="currentColor">
+                  <path fillRule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z" clipRule="evenodd" />
+                </svg>
+              )}
+              {toast.type === 'success' && (
+                <svg width="20" height="20" viewBox="0 0 20 20" fill="currentColor">
+                  <path fillRule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clipRule="evenodd" />
+                </svg>
+              )}
+              {toast.type === 'info' && (
+                <svg width="20" height="20" viewBox="0 0 20 20" fill="currentColor">
+                  <path fillRule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z" clipRule="evenodd" />
+                </svg>
+              )}
+              {toast.type === 'warning' && (
+                <svg width="20" height="20" viewBox="0 0 20 20" fill="currentColor">
+                  <path fillRule="evenodd" d="M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z" clipRule="evenodd" />
+                </svg>
+              )}
+            </div>
+            <div className="toast__message">{toast.message}</div>
+            <button
+              className="toast__close"
+              onClick={(e) => {
+                e.stopPropagation();
+                removeToast(toast.id);
+              }}
+              aria-label="Close"
+            >
+              <svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor">
+                <path d="M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708z"/>
+              </svg>
+            </button>
+          </div>
+        ))}
+      </div>
     </div>
   );
 };

package/src/PageFormComponents/TextComponent.tsx

@@ -3,28 +3,28 @@ import type { ComponentProps } from '../types';
 
 const TextComponent: React.FC<{ props: ComponentProps }> = ({ props }) => {
   const { text, style } = props;
-  const Tag = (style?.headingTag as keyof JSX.IntrinsicElements) || 'p';
-  
+
   if (!text?.all) {
-    return <div className="text-sm text-gray-500">No text content</div>;
+    return <span className="text-sm text-gray-500">No text content</span>;
   }
 
+  const textStyle: React.CSSProperties = {
+    fontSize: style?.fontSize ? `${style.fontSize}px` : '16px',
+    fontWeight: style?.fontStyle?.isBold ? 'bold' : 'normal',
+    fontStyle: style?.fontStyle?.isItalic ? 'italic' : 'normal',
+    textDecoration: style?.fontStyle?.isUnderLine ? 'underline' : 'none',
+    textDecorationLine: style?.fontStyle?.isStrikeThrough ? 'line-through' : 'none',
+    color: style?.fontColor || '#000',
+    textAlign: (style?.textAlign as any) || 'left',
+    fontFamily: style?.fontFamily || 'inherit',
+    margin: 5,
+    display: 'inline', // keeps it inline instead of block like p/div
+  };
+
   const textElement = (
-    <Tag 
-      style={{
-        fontSize: style?.fontSize ? `${style.fontSize}px` : '16px',
-        fontWeight: style?.fontStyle?.isBold ? 'bold' : 'normal',
-        fontStyle: style?.fontStyle?.isItalic ? 'italic' : 'normal',
-        textDecoration: style?.fontStyle?.isUnderLine ? 'underline' : 'none',
-        textDecorationLine: style?.fontStyle?.isStrikeThrough ? 'line-through' : 'none',
-        color: style?.fontColor || '#000',
-        textAlign: (style?.textAlign as any) || 'left',
-        fontFamily: style?.fontFamily || 'inherit',
-        margin: 5,
-      }}
-    >
+    <span style={textStyle}>
       {text.all}
-    </Tag>
+    </span>
   );
 
   if (props.linktype === 'EXTERNAL' && props.link?.url) {
@@ -42,4 +42,4 @@ const TextComponent: React.FC<{ props: ComponentProps }> = ({ props }) => {
   return textElement;
 };
 
-export default TextComponent;
+export default TextComponent;