create-template-html-css 2.0.4 → 2.2.0

package/templates-react/dropdown/Dropdown.example.jsx

@@ -0,0 +1,98 @@
+import { useState } from 'react';
+import Dropdown from './Dropdown';
+
+function DropdownExample() {
+  const [selected, setSelected] = useState('');
+  const [searchableSelected, setSearchableSelected] = useState('');
+  const [multiSelected, setMultiSelected] = useState([]);
+
+  const simpleOptions = ['Apple', 'Banana', 'Cherry', 'Date', 'Elderberry'];
+  
+  const complexOptions = [
+    { value: 'react', label: 'React' },
+    { value: 'vue', label: 'Vue.js' },
+    { value: 'angular', label: 'Angular' },
+    { value: 'svelte', label: 'Svelte' },
+    { value: 'next', label: 'Next.js' }
+  ];
+
+  const countries = [
+    { value: 'us', label: 'United States' },
+    { value: 'uk', label: 'United Kingdom' },
+    { value: 'ca', label: 'Canada' },
+    { value: 'au', label: 'Australia' },
+    { value: 'de', label: 'Germany' },
+    { value: 'fr', label: 'France' },
+    { value: 'jp', label: 'Japan' },
+    { value: 'cn', label: 'China' },
+    { value: 'in', label: 'India' },
+    { value: 'br', label: 'Brazil' }
+  ];
+
+  return (
+    <div style={{ padding: '2rem', maxWidth: '600px', margin: '0 auto' }}>
+      <h1>Dropdown Component Examples</h1>
+
+      <section style={{ marginBottom: '2rem' }}>
+        <h2>Basic Dropdown</h2>
+        <Dropdown
+          label="Choose a fruit"
+          options={simpleOptions}
+          value={selected}
+          onChange={setSelected}
+          placeholder="Select a fruit"
+        />
+        <p>Selected: {selected || 'None'}</p>
+      </section>
+
+      <section style={{ marginBottom: '2rem' }}>
+        <h2>Searchable Dropdown</h2>
+        <Dropdown
+          label="Select your country"
+          options={countries}
+          value={searchableSelected}
+          onChange={setSearchableSelected}
+          placeholder="Search and select..."
+          searchable
+        />
+        <p>Selected: {searchableSelected || 'None'}</p>
+      </section>
+
+      <section style={{ marginBottom: '2rem' }}>
+        <h2>Multiple Selection</h2>
+        <Dropdown
+          label="Choose frameworks"
+          options={complexOptions}
+          value={multiSelected}
+          onChange={setMultiSelected}
+          placeholder="Select frameworks"
+          multiple
+          searchable
+        />
+        <p>Selected: {multiSelected.join(', ') || 'None'}</p>
+      </section>
+
+      <section style={{ marginBottom: '2rem' }}>
+        <h2>Disabled Dropdown</h2>
+        <Dropdown
+          label="Disabled dropdown"
+          options={simpleOptions}
+          placeholder="Cannot select"
+          disabled
+        />
+      </section>
+
+      <section style={{ marginBottom: '2rem' }}>
+        <h2>With Error</h2>
+        <Dropdown
+          label="Required field"
+          options={simpleOptions}
+          placeholder="Please select"
+          error="This field is required"
+        />
+      </section>
+    </div>
+  );
+}
+
+export default DropdownExample;

package/templates-react/dropdown/Dropdown.jsx

@@ -0,0 +1,154 @@
+
+import './Dropdown.css';
+import { useState, useRef, useEffect } from 'react';
+
+function Dropdown({ 
+  options = [], 
+  value, 
+  onChange, 
+  placeholder = 'Select an option',
+  disabled = false,
+  searchable = false,
+  label = '',
+  error = '',
+  multiple = false,
+  maxHeight = '200px'
+}) {
+  const [isOpen, setIsOpen] = useState(false);
+  const [searchTerm, setSearchTerm] = useState('');
+  const [selectedValues, setSelectedValues] = useState(multiple ? (value || []) : null);
+  const dropdownRef = useRef(null);
+
+  useEffect(() => {
+    const handleClickOutside = (event) => {
+      if (dropdownRef.current && !dropdownRef.current.contains(event.target)) {
+        setIsOpen(false);
+        setSearchTerm('');
+      }
+    };
+
+    document.addEventListener('mousedown', handleClickOutside);
+    return () => document.removeEventListener('mousedown', handleClickOutside);
+  }, []);
+
+  const filteredOptions = searchable && searchTerm
+    ? options.filter(option => 
+        typeof option === 'string' 
+          ? option.toLowerCase().includes(searchTerm.toLowerCase())
+          : option.label.toLowerCase().includes(searchTerm.toLowerCase())
+      )
+    : options;
+
+  const handleSelect = (option) => {
+    const optionValue = typeof option === 'string' ? option : option.value;
+    
+    if (multiple) {
+      const newValues = selectedValues.includes(optionValue)
+        ? selectedValues.filter(v => v !== optionValue)
+        : [...selectedValues, optionValue];
+      setSelectedValues(newValues);
+      onChange?.(newValues);
+    } else {
+      setSelectedValues(optionValue);
+      onChange?.(optionValue);
+      setIsOpen(false);
+      setSearchTerm('');
+    }
+  };
+
+  const getDisplayValue = () => {
+    if (multiple && selectedValues.length > 0) {
+      return `${selectedValues.length} selected`;
+    }
+    if (!multiple && selectedValues) {
+      const selected = options.find(opt => 
+        (typeof opt === 'string' ? opt : opt.value) === selectedValues
+      );
+      return typeof selected === 'string' ? selected : selected?.label || selectedValues;
+    }
+    return placeholder;
+  };
+
+  const isSelected = (option) => {
+    const optionValue = typeof option === 'string' ? option : option.value;
+    return multiple 
+      ? selectedValues.includes(optionValue)
+      : selectedValues === optionValue;
+  };
+
+  return (
+    <div className={`dropdown-container ${error ? 'dropdown-error' : ''}`}>
+      {label && <label className="dropdown-label">{label}</label>}
+      
+      <div 
+        ref={dropdownRef}
+        className={`dropdown ${isOpen ? 'open' : ''} ${disabled ? 'disabled' : ''}`}
+      >
+        <button
+          type="button"
+          className="dropdown-toggle"
+          onClick={() => !disabled && setIsOpen(!isOpen)}
+          disabled={disabled}
+          aria-haspopup="listbox"
+          aria-expanded={isOpen}
+        >
+          <span className="dropdown-value">{getDisplayValue()}</span>
+          <span className={`dropdown-arrow ${isOpen ? 'up' : 'down'}`}>▼</span>
+        </button>
+
+        {isOpen && (
+          <div className="dropdown-menu" style={{ maxHeight }}>
+            {searchable && (
+              <div className="dropdown-search">
+                <input
+                  type="text"
+                  placeholder="Search..."
+                  value={searchTerm}
+                  onChange={(e) => setSearchTerm(e.target.value)}
+                  onClick={(e) => e.stopPropagation()}
+                  className="dropdown-search-input"
+                />
+              </div>
+            )}
+
+            <ul className="dropdown-options" role="listbox">
+              {filteredOptions.length === 0 ? (
+                <li className="dropdown-option disabled">No options available</li>
+              ) : (
+                filteredOptions.map((option, index) => {
+                  const optionValue = typeof option === 'string' ? option : option.value;
+                  const optionLabel = typeof option === 'string' ? option : option.label;
+                  const selected = isSelected(option);
+
+                  return (
+                    <li
+                      key={optionValue || index}
+                      className={`dropdown-option ${selected ? 'selected' : ''}`}
+                      onClick={() => handleSelect(option)}
+                      role="option"
+                      aria-selected={selected}
+                    >
+                      {multiple && (
+                        <input
+                          type="checkbox"
+                          checked={selected}
+                          onChange={() => {}}
+                          className="dropdown-checkbox"
+                        />
+                      )}
+                      {optionLabel}
+                    </li>
+                  );
+                })
+              )}
+            </ul>
+          </div>
+        )}
+      </div>
+
+      {error && <span className="dropdown-error-message">{error}</span>}
+    </div>
+  );
+}
+
+export default Dropdown;

package/templates-react/form/Form.css

@@ -0,0 +1,128 @@
+/* Form Styles */
+.form-container {
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
+  background: white;
+  padding: 40px;
+  border-radius: 20px;
+  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
+  max-width: 500px;
+  margin: 0 auto;
+}
+
+.form-title {
+  font-size: 32px;
+  font-weight: 700;
+  margin: 0 0 30px 0;
+  text-align: center;
+  background: linear-gradient(135deg, {{primaryColor}} 0%, {{secondaryColor}} 100%);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+}
+
+.form {
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+}
+
+.form-group {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.form-label {
+  font-size: 14px;
+  font-weight: 600;
+  color: #2d3748;
+  display: flex;
+  align-items: center;
+  gap: 4px;
+}
+
+.required {
+  color: #e53e3e;
+}
+
+.form input,
+.form textarea,
+.form select {
+  padding: 12px 16px;
+  font-size: 16px;
+  font-family: inherit;
+  border: 2px solid #e2e8f0;
+  border-radius: 8px;
+  transition: all 0.3s ease;
+  outline: none;
+  background: white;
+}
+
+.form input:focus,
+.form textarea:focus,
+.form select:focus {
+  border-color: {{primaryColor}};
+  box-shadow: 0 0 0 3px rgba(66, 153, 225, 0.1);
+}
+
+.form textarea {
+  resize: vertical;
+  min-height: 100px;
+}
+
+.form-error {
+  font-size: 14px;
+  color: #e53e3e;
+  display: flex;
+  align-items: center;
+  gap: 4px;
+}
+
+.form-submit {
+  margin-top: 10px;
+  padding: 16px 32px;
+  font-size: 16px;
+  font-weight: 600;
+  font-family: inherit;
+  background: linear-gradient(135deg, {{primaryColor}} 0%, {{secondaryColor}} 100%);
+  color: white;
+  border: none;
+  border-radius: 8px;
+  cursor: pointer;
+  transition: all 0.3s ease;
+  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
+}
+
+.form-submit:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
+}
+
+.form-submit:active {
+  transform: translateY(0);
+}
+
+/* Dark Mode Support */
+@media (prefers-color-scheme: dark) {
+  .form-container {
+    background: #2d3748;
+  }
+
+  .form-label {
+    color: #e2e8f0;
+  }
+
+  .form input,
+  .form textarea,
+  .form select {
+    background: #1a202c;
+    color: #e2e8f0;
+    border-color: #4a5568;
+  }
+
+  .form input:focus,
+  .form textarea:focus,
+  .form select:focus {
+    border-color: {{primaryColor}};
+  }
+}

package/templates-react/form/Form.example.jsx

@@ -0,0 +1,64 @@
+import Form from './Form';
+
+/**
+ * Example usage of Form component
+ */
+const FormExample = () => {
+  const contactFields = [
+    {
+      name: 'name',
+      label: 'Full Name',
+      type: 'text',
+      required: true,
+      placeholder: 'John Doe',
+      minLength: 2
+    },
+    {
+      name: 'email',
+      label: 'Email Address',
+      type: 'email',
+      required: true,
+      placeholder: 'john@example.com',
+      pattern: /^[^\s@]+@[^\s@]+\.[^\s@]+$/,
+      errorMessage: 'Please enter a valid email address'
+    },
+    {
+      name: 'subject',
+      label: 'Subject',
+      type: 'select',
+      required: true,
+      options: [
+        { value: 'general', label: 'General Inquiry' },
+        { value: 'support', label: 'Technical Support' },
+        { value: 'feedback', label: 'Feedback' }
+      ]
+    },
+    {
+      name: 'message',
+      label: 'Message',
+      type: 'textarea',
+      required: true,
+      placeholder: 'Type your message here...',
+      rows: 6,
+      minLength: 10
+    }
+  ];
+
+  const handleSubmit = (data) => {
+    console.log('Form submitted with data:', data);
+    alert('Form submitted successfully! Check console for details.');
+  };
+
+  return (
+    <div style={{ padding: '40px', maxWidth: '600px', margin: '0 auto' }}>
+      <Form
+        title="Contact Us"
+        fields={contactFields}
+        onSubmit={handleSubmit}
+        submitButtonText="Send Message"
+      />
+    </div>
+  );
+};
+
+export default FormExample;

package/templates-react/form/Form.jsx

@@ -0,0 +1,125 @@
+import { useState } from 'react';
+import './Form.css';
+
+/**
+ * Form Component
+ * A flexible form component with validation
+ */
+const Form = ({ 
+  title = 'Form',
+  fields = [],
+  onSubmit,
+  submitButtonText = 'Submit'
+}) => {
+  const [formData, setFormData] = useState(() => {
+    const initialData = {};
+    fields.forEach(field => {
+      initialData[field.name] = field.defaultValue || '';
+    });
+    return initialData;
+  });
+
+  const [errors, setErrors] = useState({});
+
+  const handleChange = (e) => {
+    const { name, value, type, checked } = e.target;
+    setFormData(prev => ({
+      ...prev,
+      [name]: type === 'checkbox' ? checked : value
+    }));
+    
+    // Clear error when user starts typing
+    if (errors[name]) {
+      setErrors(prev => ({ ...prev, [name]: '' }));
+    }
+  };
+
+  const validateField = (field, value) => {
+    if (field.required && !value) {
+      return `${field.label} is required`;
+    }
+    
+    if (field.pattern && value && !field.pattern.test(value)) {
+      return field.errorMessage || `Invalid ${field.label.toLowerCase()}`;
+    }
+    
+    if (field.minLength && value.length < field.minLength) {
+      return `${field.label} must be at least ${field.minLength} characters`;
+    }
+    
+    return '';
+  };
+
+  const handleSubmit = (e) => {
+    e.preventDefault();
+    
+    const newErrors = {};
+    fields.forEach(field => {
+      const error = validateField(field, formData[field.name]);
+      if (error) {
+        newErrors[field.name] = error;
+      }
+    });
+
+    if (Object.keys(newErrors).length > 0) {
+      setErrors(newErrors);
+      return;
+    }
+
+    onSubmit?.(formData);
+  };
+
+  const renderField = (field) => {
+    const commonProps = {
+      id: field.name,
+      name: field.name,
+      value: formData[field.name] || '',
+      onChange: handleChange,
+      required: field.required,
+      placeholder: field.placeholder
+    };
+
+    switch (field.type) {
+      case 'textarea':
+        return <textarea {...commonProps} rows={field.rows || 4} />;
+      case 'select':
+        return (
+          <select {...commonProps}>
+            <option value="">Select...</option>
+            {field.options?.map(option => (
+              <option key={option.value} value={option.value}>
+                {option.label}
+              </option>
+            ))}
+          </select>
+        );
+      default:
+        return <input type={field.type || 'text'} {...commonProps} />;
+    }
+  };
+
+  return (
+    <div className="form-container">
+      <h2 className="form-title">{title}</h2>
+      <form onSubmit={handleSubmit} className="form">
+        {fields.map(field => (
+          <div key={field.name} className="form-group">
+            <label htmlFor={field.name} className="form-label">
+              {field.label}
+              {field.required && <span className="required">*</span>}
+            </label>
+            {renderField(field)}
+            {errors[field.name] && (
+              <span className="form-error">{errors[field.name]}</span>
+            )}
+          </div>
+        ))}
+        <button type="submit" className="form-submit">
+          {submitButtonText}
+        </button>
+      </form>
+    </div>
+  );
+};
+
+export default Form;

package/templates-react/input/Input.css

@@ -0,0 +1,113 @@
+.input-wrapper {
+  margin-bottom: 1.5rem;
+  width: 100%;
+}
+
+.input-label {
+  display: block;
+  margin-bottom: 0.5rem;
+  font-size: 0.875rem;
+  font-weight: 600;
+  color: #374151;
+}
+
+.input-required {
+  color: #ef4444;
+  margin-left: 0.25rem;
+}
+
+.input-container {
+  position: relative;
+  display: flex;
+  align-items: center;
+  border: 2px solid #e5e7eb;
+  border-radius: 0.5rem;
+  background: white;
+  transition: all 0.2s ease;
+}
+
+.input-container:hover {
+  border-color: #d1d5db;
+}
+
+.input-container.focused {
+  border-color: ##PRIMARY_COLOR##;
+  box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
+}
+
+.input-container.error {
+  border-color: #ef4444;
+}
+
+.input-container.error.focused {
+  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1);
+}
+
+.input-container.disabled {
+  background: #f3f4f6;
+  cursor: not-allowed;
+  opacity: 0.6;
+}
+
+.input-icon {
+  padding: 0 0.75rem;
+  color: #6b7280;
+  display: flex;
+  align-items: center;
+}
+
+.input-field {
+  flex: 1;
+  padding: 0.75rem 1rem;
+  border: none;
+  outline: none;
+  font-size: 1rem;
+  background: transparent;
+  color: #1f2937;
+}
+
+.input-field::placeholder {
+  color: #9ca3af;
+}
+
+.input-field:disabled {
+  cursor: not-allowed;
+}
+
+.input-message {
+  margin-top: 0.5rem;
+  font-size: 0.875rem;
+  color: #6b7280;
+}
+
+.input-message.error {
+  color: #ef4444;
+}
+
+/* Dark mode support */
+@media (prefers-color-scheme: dark) {
+  .input-label {
+    color: #e5e7eb;
+  }
+
+  .input-container {
+    background: #1f2937;
+    border-color: #374151;
+  }
+
+  .input-container:hover {
+    border-color: #4b5563;
+  }
+
+  .input-field {
+    color: #f3f4f6;
+  }
+
+  .input-field::placeholder {
+    color: #6b7280;
+  }
+
+  .input-container.disabled {
+    background: #111827;
+  }
+}