tee3apps-cms-sdk-react 0.0.4 → 0.0.6

package/src/PageFormComponents/SelectField.tsx

@@ -0,0 +1,183 @@
+import React, { useState, useRef, useEffect } from 'react';
+import type { ComponentProps } from '../types';
+import './Styles/SelectField.css';
+
+interface SelectFieldProps {
+  props: ComponentProps;
+  value?: any;
+  onChange?: (code: string, value: any) => void;
+}
+
+const SelectField: React.FC<SelectFieldProps> = ({ props, value, onChange }) => {
+  const [isOpen, setIsOpen] = useState(false);
+  const [searchTerm, setSearchTerm] = useState('');
+  const dropdownRef = useRef<HTMLDivElement>(null);
+  const isMultiSelect = props.multiSelect || false;
+  const selectedValues = isMultiSelect ? (Array.isArray(value) ? value : []) : (value ? [value] : []);
+  
+  // Get options from LOV
+  const options = props.lov || [];
+  
+  // Filter options based on search term
+  const filteredOptions = options.filter(option =>
+    option.name.toLowerCase().includes(searchTerm.toLowerCase())
+  );
+
+  // Get selected option(s) display text
+  const getSelectedDisplay = () => {
+    if (isMultiSelect) {
+      if (selectedValues.length === 0) {
+        return props.helperText || 'Select...';
+      }
+      if (selectedValues.length === 1) {
+        const selected = options.find(opt => opt.code === selectedValues[0]);
+        return selected ? selected.name : selectedValues[0];
+      }
+      return `${selectedValues.length} selected`;
+    } else {
+      if (!value) return props.helperText || 'Select...';
+      const selected = options.find(opt => opt.code === value);
+      return selected ? selected.name : value;
+    }
+  };
+
+  const handleToggle = () => {
+    setIsOpen(!isOpen);
+    setSearchTerm('');
+  };
+
+  const handleSelect = (optionCode: string) => {
+    if (!onChange) return;
+    
+    const code = props.code || `selectfield_${props.name?.all || 'field'}`;
+    
+    if (isMultiSelect) {
+      const newValues = selectedValues.includes(optionCode)
+        ? selectedValues.filter(v => v !== optionCode)
+        : [...selectedValues, optionCode];
+      onChange(code, newValues);
+    } else {
+      onChange(code, optionCode);
+      setIsOpen(false);
+    }
+  };
+
+  const handleRemove = (optionCode: string, e: React.MouseEvent) => {
+    e.stopPropagation();
+    if (!onChange || !isMultiSelect) return;
+    
+    const code = props.code || `selectfield_${props.name?.all || 'field'}`;
+    const newValues = selectedValues.filter(v => v !== optionCode);
+    onChange(code, newValues);
+  };
+
+  // Close dropdown when clicking outside
+  useEffect(() => {
+    const handleClickOutside = (event: MouseEvent) => {
+      if (dropdownRef.current && !dropdownRef.current.contains(event.target as Node)) {
+        setIsOpen(false);
+        setSearchTerm('');
+      }
+    };
+
+    document.addEventListener('mousedown', handleClickOutside);
+    return () => {
+      document.removeEventListener('mousedown', handleClickOutside);
+    };
+  }, []);
+
+  return (
+    <div className="select-field">
+      <label className="select-field__label">
+        {props.name?.all || 'Select Field'}
+        {props.required && <span className="select-field__required">*</span>}
+      </label>
+
+      <div className="select-field__wrapper" ref={dropdownRef}>
+        <div
+          className={`select-field__control ${isOpen ? 'select-field__control--is-focused' : ''} ${props.required && selectedValues.length === 0 ? 'select-field__control--is-invalid' : ''}`}
+          onClick={handleToggle}
+        >
+          <div className="select-field__value-container">
+            {isMultiSelect && selectedValues.length > 0 ? (
+              <div className="select-field__multi-value-container">
+                {selectedValues.map((val) => {
+                  const option = options.find(opt => opt.code === val);
+                  return (
+                    <div key={val} className="select-field__multi-value">
+                      <span className="select-field__multi-value__label">{option?.name || val}</span>
+                      <span
+                        className="select-field__multi-value__remove"
+                        onClick={(e) => handleRemove(val, e)}
+                      >
+                        ×
+                      </span>
+                    </div>
+                  );
+                })}
+              </div>
+            ) : (
+              <div className="select-field__single-value">{getSelectedDisplay()}</div>
+            )}
+          </div>
+          <div className="select-field__indicators">
+            <span className={`select-field__indicator ${isOpen ? 'select-field__indicator--open' : ''}`}>
+              ▼
+            </span>
+          </div>
+        </div>
+
+        {isOpen && (
+          <div className="select-field__menu">
+            {options.length > 5 && (
+              <div className="select-field__menu-search">
+                <input
+                  type="text"
+                  className="select-field__search-input"
+                  placeholder="Search..."
+                  value={searchTerm}
+                  onChange={(e) => setSearchTerm(e.target.value)}
+                  onClick={(e) => e.stopPropagation()}
+                />
+              </div>
+            )}
+            <div className="select-field__menu-list">
+              {filteredOptions.length === 0 ? (
+                <div className="select-field__option select-field__option--no-results">
+                  No options found
+                </div>
+              ) : (
+                filteredOptions.map((option) => {
+                  const isSelected = isMultiSelect
+                    ? selectedValues.includes(option.code)
+                    : value === option.code;
+                  
+                  return (
+                    <div
+                      key={option.id}
+                      className={`select-field__option ${isSelected ? 'select-field__option--is-selected' : ''}`}
+                      onClick={() => handleSelect(option.code)}
+                    >
+                      {isMultiSelect && (
+                        <span className="select-field__checkbox">
+                          {isSelected ? '✓' : ''}
+                        </span>
+                      )}
+                      <span>{option.name}</span>
+                    </div>
+                  );
+                })
+              )}
+            </div>
+          </div>
+        )}
+      </div>
+
+      {props.helperText && !isOpen && (
+        <div className="select-field__helper-text">{props.helperText}</div>
+      )}
+    </div>
+  );
+};
+
+export default SelectField;

package/src/PageFormComponents/Styles/BooleanField.css

@@ -0,0 +1,56 @@
+.boolean-field {
+  margin-bottom: 1.5rem;
+}
+
+.boolean-field__container {
+  display: flex;
+  align-items: flex-start;
+  gap: 0.75rem;
+}
+
+.boolean-field__checkbox-wrapper {
+  display: flex;
+  align-items: center;
+  height: 1.25rem;
+}
+
+.boolean-field__checkbox {
+  width: 1rem;
+  height: 1rem;
+  border: 1px solid #d1d5db; /* gray-300 */
+  border-radius: 0.25rem;
+  accent-color: #2563eb; /* blue-600 */
+}
+
+.boolean-field__content {
+  flex: 1;
+}
+
+.boolean-field__label {
+  font-size: 0.875rem;
+  font-weight: 500;
+  color: #374151; /* gray-700 */
+}
+
+.boolean-field__required {
+  color: #ef4444; /* red-500 */
+  margin-left: 0.25rem;
+}
+
+.boolean-field__terms {
+  margin-top: 0.25rem;
+  font-size: 0.75rem;
+  color: #4b5563; /* gray-600 */
+}
+
+.boolean-field__helper-text {
+  margin-top: 0.25rem;
+  font-size: 0.75rem;
+  color: #6b7280; /* gray-500 */
+}
+
+.boolean-field__status-text {
+  margin-top: 0.25rem;
+  font-size: 0.75rem;
+  color: #9ca3af; /* gray-400 */
+}

package/src/PageFormComponents/Styles/DateField.css

@@ -0,0 +1,44 @@
+.date-field {
+  margin-bottom: 1.5rem;
+}
+
+.date-field__label {
+  display: block;
+  font-size: 0.875rem;
+  font-weight: 500;
+  color: #374151; /* gray-700 */
+  margin-bottom: 0.5rem;
+}
+
+.date-field__required {
+  color: #ef4444; /* red-500 */
+  margin-left: 0.25rem;
+}
+
+.date-field__input {
+  width: 99%;
+  padding: 0.5rem 0.75rem;
+  font-size: 1rem;
+  border: 1px solid #d1d5db; /* gray-300 */
+  border-radius: 0.375rem;
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
+  outline: none;
+  transition: border-color 0.2s, box-shadow 0.2s;
+}
+
+.date-field__input:focus {
+  border-color: #3b82f6; /* blue-500 */
+  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.5); /* blue-500 ring */
+}
+
+.date-field__helper-text {
+  margin-top: 0.25rem;
+  font-size: 0.75rem;
+  color: #6b7280; /* gray-500 */
+}
+
+.date-field__pattern {
+  margin-top: 0.25rem;
+  font-size: 0.75rem;
+  color: #9ca3af; /* gray-400 */
+}

package/src/PageFormComponents/Styles/InputField.css

@@ -0,0 +1,50 @@
+.input-field {
+  margin-bottom: 1.5rem;
+}
+
+.input-field__label {
+  display: block;
+  font-size: 0.875rem;
+  font-weight: 500;
+  color: #374151; /* gray-700 */
+  margin-bottom: 0.5rem;
+}
+
+.input-field__required {
+  color: #ef4444; /* red-500 */
+  margin-left: 0.25rem;
+}
+
+.input-field__input,
+.input-field__textarea {
+  width: 99%;
+  padding: 0.5rem 0.75rem;
+  font-size: 1rem;
+  border: 1px solid #d1d5db; /* gray-300 */
+  border-radius: 0.375rem;
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
+  outline: none;
+  transition: border-color 0.2s, box-shadow 0.2s;
+}
+
+.input-field__input:focus,
+.input-field__textarea:focus {
+  border-color: #3b82f6; /* blue-500 */
+  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.5);
+}
+
+.input-field__textarea {
+  resize: vertical;
+}
+
+.input-field__helper-text {
+  margin-top: 0.25rem;
+  font-size: 0.75rem;
+  color: #6b7280; /* gray-500 */
+}
+
+.input-field__status {
+  margin-top: 0.25rem;
+  font-size: 0.75rem;
+  color: #9ca3af; /* gray-400 */
+}

package/src/PageFormComponents/Styles/NumberField.css

@@ -0,0 +1,57 @@
+.number-field {
+  margin-bottom: 1.5rem;
+}
+
+.number-field__label {
+  display: block;
+  font-size: 0.875rem;
+  font-weight: 500;
+  color: #374151; /* gray-700 */
+  margin-bottom: 0.5rem;
+}
+
+.number-field__required {
+  color: #ef4444; /* red-500 */
+  margin-left: 0.25rem;
+}
+
+.number-field__input-wrapper {
+  position: relative;
+}
+
+.number-field__input {
+  width: 100%;
+  padding: 0.5rem 2.75rem 0.5rem 0.75rem;
+  font-size: 1rem;
+  border: 1px solid #d1d5db; /* gray-300 */
+  border-radius: 0.375rem;
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
+  outline: none;
+  transition: border-color 0.2s, box-shadow 0.2s;
+}
+
+.number-field__input:focus {
+  border-color: #3b82f6; /* blue-500 */
+  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.5);
+}
+
+.number-field__suffix {
+  position: absolute;
+  right: 0.75rem;
+  top: 0.5rem;
+  font-size: 0.875rem;
+  color: #6b7280; /* gray-500 */
+  pointer-events: none;
+}
+
+.number-field__helper-text {
+  margin-top: 0.25rem;
+  font-size: 0.75rem;
+  color: #6b7280; /* gray-500 */
+}
+
+.number-field__status {
+  margin-top: 0.25rem;
+  font-size: 0.75rem;
+  color: #9ca3af; /* gray-400 */
+}

package/src/PageFormComponents/Styles/RadioField.css

@@ -0,0 +1,66 @@
+.radio-field {
+  margin-bottom: 1.5rem;
+}
+
+.radio-field__label {
+  display: block;
+  font-size: 0.875rem;
+  font-weight: 500;
+  color: #374151; /* gray-700 */
+  margin-bottom: 0.5rem;
+}
+
+.radio-field__required {
+  color: #ef4444; /* red-500 */
+  margin-left: 0.25rem;
+}
+
+.radio-field__options {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+
+.radio-field__option {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  cursor: pointer;
+  padding: 0.5rem;
+  border-radius: 0.375rem;
+  transition: background-color 0.2s ease;
+}
+
+.radio-field__option:hover {
+  background-color: #f9fafb; /* gray-50 */
+}
+
+.radio-field__input {
+  width: 1rem;
+  height: 1rem;
+  accent-color: #2563eb; /* blue-600 */
+}
+
+.radio-field__option-label {
+  font-size: 0.875rem;
+  color: #374151; /* gray-700 */
+}
+
+.radio-field__empty {
+  font-size: 0.75rem;
+  color: #9ca3af; /* gray-400 */
+  font-style: italic;
+  padding: 0.5rem 0;
+}
+
+.radio-field__helper-text {
+  margin-top: 0.25rem;
+  font-size: 0.75rem;
+  color: #6b7280; /* gray-500 */
+}
+
+.radio-field__status {
+  margin-top: 0.25rem;
+  font-size: 0.75rem;
+  color: #9ca3af; /* gray-400 */
+}

package/src/PageFormComponents/Styles/SelectField.css

@@ -0,0 +1,264 @@
+.select-field {
+  margin-bottom: 1.5rem;
+  position: relative;
+}
+
+.select-field__label {
+  display: block;
+  font-size: 0.875rem;
+  font-weight: 500;
+  color: #374151;
+  margin-bottom: 0.5rem;
+}
+
+.select-field__required {
+  color: #ef4444;
+  margin-left: 0.25rem;
+}
+
+.select-field__wrapper {
+  position: relative;
+}
+
+/* Control (main select box) */
+.select-field__control {
+  min-height: 38px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+  padding: 2px 8px;
+  border: 1px solid #d1d5db;
+  border-radius: 4px;
+  background-color: #ffffff;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
+}
+
+.select-field__control:hover {
+  border-color: #9ca3af;
+}
+
+.select-field__control--is-focused {
+  border-color: #3b82f6;
+  box-shadow: 0 0 0 1px #3b82f6;
+  outline: none;
+}
+
+.select-field__control--is-invalid {
+  border-color: #ef4444;
+}
+
+/* Value Container */
+.select-field__value-container {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 4px;
+  padding: 2px 0;
+  min-height: 32px;
+}
+
+.select-field__single-value {
+  color: #1f2937;
+  font-size: 14px;
+  line-height: 1.5;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+/* Multi-value container */
+.select-field__multi-value-container {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 4px;
+  width: 100%;
+}
+
+.select-field__multi-value {
+  display: flex;
+  align-items: center;
+  background-color: #e5e7eb;
+  border-radius: 2px;
+  padding: 2px 6px;
+  font-size: 13px;
+  line-height: 1.5;
+  max-width: 100%;
+}
+
+.select-field__multi-value__label {
+  color: #1f2937;
+  margin-right: 4px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  max-width: 150px;
+}
+
+.select-field__multi-value__remove {
+  color: #6b7280;
+  cursor: pointer;
+  font-size: 18px;
+  line-height: 1;
+  padding: 0 2px;
+  transition: color 0.2s;
+}
+
+.select-field__multi-value__remove:hover {
+  color: #ef4444;
+}
+
+/* Indicators (dropdown arrow) */
+.select-field__indicators {
+  display: flex;
+  align-items: center;
+  padding-left: 8px;
+}
+
+.select-field__indicator {
+  color: #6b7280;
+  font-size: 12px;
+  transition: transform 0.2s;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 20px;
+  height: 20px;
+}
+
+.select-field__indicator--open {
+  transform: rotate(180deg);
+}
+
+/* Menu (dropdown) */
+.select-field__menu {
+  position: absolute;
+  top: 100%;
+  left: 0;
+  right: 0;
+  margin-top: 4px;
+  background-color: #ffffff;
+  border: 1px solid #d1d5db;
+  border-radius: 4px;
+  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+  z-index: 1000;
+  max-height: 300px;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+}
+
+/* Search input */
+.select-field__menu-search {
+  padding: 8px;
+  border-bottom: 1px solid #e5e7eb;
+}
+
+.select-field__search-input {
+  width: 100%;
+  padding: 6px 8px;
+  border: 1px solid #d1d5db;
+  border-radius: 4px;
+  font-size: 14px;
+  outline: none;
+}
+
+.select-field__search-input:focus {
+  border-color: #3b82f6;
+  box-shadow: 0 0 0 1px #3b82f6;
+}
+
+/* Menu list */
+.select-field__menu-list {
+  overflow-y: auto;
+  max-height: 240px;
+  padding: 4px 0;
+}
+
+/* Option */
+.select-field__option {
+  padding: 8px 12px;
+  cursor: pointer;
+  font-size: 14px;
+  color: #1f2937;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  transition: background-color 0.15s;
+}
+
+.select-field__option:hover {
+  background-color: #f3f4f6;
+}
+
+.select-field__option--is-selected {
+  background-color: #eff6ff;
+  color: #1e40af;
+  font-weight: 500;
+}
+
+.select-field__option--is-selected:hover {
+  background-color: #dbeafe;
+}
+
+.select-field__option--no-results {
+  padding: 12px;
+  text-align: center;
+  color: #6b7280;
+  font-style: italic;
+  cursor: default;
+}
+
+.select-field__option--no-results:hover {
+  background-color: transparent;
+}
+
+/* Checkbox for multi-select */
+.select-field__checkbox {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 16px;
+  height: 16px;
+  border: 2px solid #d1d5db;
+  border-radius: 3px;
+  background-color: #ffffff;
+  font-size: 12px;
+  color: #3b82f6;
+  flex-shrink: 0;
+}
+
+.select-field__option--is-selected .select-field__checkbox {
+  background-color: #3b82f6;
+  border-color: #3b82f6;
+  color: #ffffff;
+}
+
+/* Helper text */
+.select-field__helper-text {
+  margin-top: 0.25rem;
+  font-size: 0.75rem;
+  color: #6b7280;
+}
+
+/* Scrollbar styling for menu */
+.select-field__menu-list::-webkit-scrollbar {
+  width: 8px;
+}
+
+.select-field__menu-list::-webkit-scrollbar-track {
+  background: #f9fafb;
+  border-radius: 4px;
+}
+
+.select-field__menu-list::-webkit-scrollbar-thumb {
+  background: #d1d5db;
+  border-radius: 4px;
+}
+
+.select-field__menu-list::-webkit-scrollbar-thumb:hover {
+  background: #9ca3af;
+}