create-template-html-css 2.0.4 → 2.2.0

package/templates-react/checkbox/Checkbox.example.jsx

@@ -0,0 +1,141 @@
+import { useState } from 'react';
+import Checkbox from './Checkbox';
+
+function CheckboxExample() {
+  const [basicChecked, setBasicChecked] = useState(false);
+  const [termsAccepted, setTermsAccepted] = useState(false);
+  const [notifications, setNotifications] = useState({
+    email: true,
+    sms: false,
+    push: true
+  });
+  const [selectedColors, setSelectedColors] = useState([]);
+
+  const handleNotificationChange = (key) => (checked) => {
+    setNotifications(prev => ({ ...prev, [key]: checked }));
+  };
+
+  const handleColorToggle = (color) => (checked) => {
+    setSelectedColors(prev => 
+      checked 
+        ? [...prev, color]
+        : prev.filter(c => c !== color)
+    );
+  };
+
+  return (
+    <div style={{ padding: '2rem', maxWidth: '600px', margin: '0 auto' }}>
+      <h1>Checkbox Component Examples</h1>
+
+      <section style={{ marginBottom: '2rem' }}>
+        <h2>Basic Checkbox</h2>
+        <Checkbox
+          label="I agree to the terms and conditions"
+          checked={basicChecked}
+          onChange={setBasicChecked}
+        />
+        <p>Status: {basicChecked ? 'Checked' : 'Unchecked'}</p>
+      </section>
+
+      <section style={{ marginBottom: '2rem' }}>
+        <h2>Different Sizes</h2>
+        <div style={{ display: 'flex', flexDirection: 'column', gap: '1rem' }}>
+          <Checkbox label="Small checkbox" size="small" />
+          <Checkbox label="Medium checkbox (default)" size="medium" />
+          <Checkbox label="Large checkbox" size="large" />
+        </div>
+      </section>
+
+      <section style={{ marginBottom: '2rem' }}>
+        <h2>Different Colors</h2>
+        <div style={{ display: 'flex', flexDirection: 'column', gap: '1rem' }}>
+          <Checkbox label="Primary color" checked color="primary" />
+          <Checkbox label="Secondary color" checked color="secondary" />
+          <Checkbox label="Success color" checked color="success" />
+          <Checkbox label="Error color" checked color="error" />
+        </div>
+      </section>
+
+      <section style={{ marginBottom: '2rem' }}>
+        <h2>With Helper Text</h2>
+        <Checkbox
+          label="Subscribe to newsletter"
+          helperText="You can unsubscribe at any time"
+        />
+      </section>
+
+      <section style={{ marginBottom: '2rem' }}>
+        <h2>Required Field with Error</h2>
+        <Checkbox
+          label="Accept terms and conditions"
+          checked={termsAccepted}
+          onChange={setTermsAccepted}
+          error={!termsAccepted ? 'You must accept the terms to continue' : ''}
+        />
+      </section>
+
+      <section style={{ marginBottom: '2rem' }}>
+        <h2>Disabled State</h2>
+        <div style={{ display: 'flex', flexDirection: 'column', gap: '1rem' }}>
+          <Checkbox label="Disabled unchecked" disabled />
+          <Checkbox label="Disabled checked" checked disabled />
+        </div>
+      </section>
+
+      <section style={{ marginBottom: '2rem' }}>
+        <h2>Indeterminate State</h2>
+        <Checkbox
+          label="Select all notifications"
+          indeterminate={
+            notifications.email !== notifications.sms || 
+            notifications.sms !== notifications.push
+          }
+          checked={notifications.email && notifications.sms && notifications.push}
+        />
+      </section>
+
+      <section style={{ marginBottom: '2rem' }}>
+        <h2>Checkbox Group</h2>
+        <div style={{ marginLeft: '1.5rem' }}>
+          <h3 style={{ fontSize: '1rem', marginBottom: '0.5rem' }}>Notification Preferences</h3>
+          <div style={{ display: 'flex', flexDirection: 'column', gap: '0.5rem' }}>
+            <Checkbox
+              label="Email notifications"
+              checked={notifications.email}
+              onChange={handleNotificationChange('email')}
+            />
+            <Checkbox
+              label="SMS notifications"
+              checked={notifications.sms}
+              onChange={handleNotificationChange('sms')}
+            />
+            <Checkbox
+              label="Push notifications"
+              checked={notifications.push}
+              onChange={handleNotificationChange('push')}
+            />
+          </div>
+        </div>
+      </section>
+
+      <section style={{ marginBottom: '2rem' }}>
+        <h2>Multiple Selection</h2>
+        <h3 style={{ fontSize: '1rem', marginBottom: '0.5rem' }}>Choose your favorite colors:</h3>
+        <div style={{ display: 'flex', flexDirection: 'column', gap: '0.5rem' }}>
+          {['Red', 'Blue', 'Green', 'Yellow'].map(color => (
+            <Checkbox
+              key={color}
+              label={color}
+              checked={selectedColors.includes(color)}
+              onChange={handleColorToggle(color)}
+              color={color === 'Red' ? 'error' : color === 'Green' ? 'success' : 'primary'}
+            />
+          ))}
+        </div>
+        <p>Selected: {selectedColors.join(', ') || 'None'}</p>
+      </section>
+    </div>
+  );
+}
+
+export default CheckboxExample;

package/templates-react/checkbox/Checkbox.jsx

@@ -0,0 +1,82 @@
+
+import './Checkbox.css';
+import { useState } from 'react';
+
+function Checkbox({ 
+  label = '',
+  checked = false,
+  onChange,
+  disabled = false,
+  indeterminate = false,
+  name = '',
+  value = '',
+  error = '',
+  helperText = '',
+  size = 'medium',
+  color = 'primary'
+}) {
+  const [isChecked, setIsChecked] = useState(checked);
+
+  const handleChange = (e) => {
+    const newValue = e.target.checked;
+    setIsChecked(newValue);
+    onChange?.(newValue, e);
+  };
+
+  const checkboxId = `checkbox-${name || Math.random().toString(36).substr(2, 9)}`;
+
+  return (
+    <div className={`checkbox-container ${error ? 'checkbox-error' : ''}`}>
+      <div className="checkbox-wrapper">
+        <div className={`checkbox-input-wrapper ${size}`}>
+          <input
+            id={checkboxId}
+            type="checkbox"
+            className={`checkbox-input ${color}`}
+            checked={isChecked}
+            onChange={handleChange}
+            disabled={disabled}
+            name={name}
+            value={value}
+            aria-invalid={!!error}
+            aria-describedby={error ? `${checkboxId}-error` : helperText ? `${checkboxId}-helper` : undefined}
+          />
+          <span 
+            className={`checkbox-custom ${isChecked ? 'checked' : ''} ${indeterminate ? 'indeterminate' : ''}`}
+            aria-hidden="true"
+          >
+            {indeterminate && !isChecked ? (
+              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor">
+                <line x1="5" y1="12" x2="19" y2="12" strokeWidth="3" strokeLinecap="round"/>
+              </svg>
+            ) : isChecked ? (
+              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor">
+                <polyline points="20 6 9 17 4 12" strokeWidth="3" strokeLinecap="round" strokeLinejoin="round"/>
+              </svg>
+            ) : null}
+          </span>
+        </div>
+
+        {label && (
+          <label htmlFor={checkboxId} className="checkbox-label">
+            {label}
+          </label>
+        )}
+      </div>
+
+      {helperText && !error && (
+        <span id={`${checkboxId}-helper`} className="checkbox-helper-text">
+          {helperText}
+        </span>
+      )}
+
+      {error && (
+        <span id={`${checkboxId}-error`} className="checkbox-error-message">
+          {error}
+        </span>
+      )}
+    </div>
+  );
+}
+
+export default Checkbox;

package/templates-react/counter/Counter.css

@@ -0,0 +1,99 @@
+/* Counter Styles */
+.counter-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: 400px;
+  margin: 0 auto;
+  text-align: center;
+}
+
+.counter-title {
+  font-size: 32px;
+  font-weight: 700;
+  margin: 0 0 30px 0;
+  background: linear-gradient(135deg, {{primaryColor}} 0%, {{secondaryColor}} 100%);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+}
+
+.counter-display {
+  font-size: 96px;
+  font-weight: 800;
+  background: linear-gradient(135deg, {{primaryColor}} 0%, {{secondaryColor}} 100%);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+  margin: 40px 0;
+  user-select: none;
+  animation: pulse 2s ease-in-out infinite;
+}
+
+@keyframes pulse {
+  0%, 100% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.8;
+  }
+}
+
+.counter-controls {
+  display: flex;
+  gap: 12px;
+  justify-content: center;
+}
+
+.counter-btn {
+  font-family: inherit;
+  font-size: 32px;
+  font-weight: 700;
+  width: 80px;
+  height: 80px;
+  border: none;
+  border-radius: 50%;
+  cursor: pointer;
+  transition: all 0.3s ease;
+  outline: none;
+  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
+}
+
+.counter-btn:hover:not(:disabled) {
+  transform: translateY(-3px);
+  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
+}
+
+.counter-btn:active:not(:disabled) {
+  transform: translateY(0);
+}
+
+.counter-btn:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.counter-btn-increment {
+  background: linear-gradient(135deg, {{primaryColor}} 0%, {{secondaryColor}} 100%);
+  color: white;
+}
+
+.counter-btn-decrement {
+  background: linear-gradient(135deg, #ff6b6b 0%, #ee5a6f 100%);
+  color: white;
+}
+
+.counter-btn-reset {
+  background: linear-gradient(135deg, #868e96 0%, #495057 100%);
+  color: white;
+  font-size: 16px;
+}
+
+/* Dark Mode Support */
+@media (prefers-color-scheme: dark) {
+  .counter-container {
+    background: #2d3748;
+  }
+}

package/templates-react/counter/Counter.example.jsx

@@ -0,0 +1,45 @@
+
+import Counter from './Counter';
+
+/**
+ * Example usage of Counter component
+ */
+const CounterExample = () => {
+  const handleChange = (value) => {
+    console.log('Counter value changed to:', value);
+  };
+
+  return (
+    <div style={{ padding: '40px' }}>
+      <h2 style={{ marginBottom: '40px', textAlign: 'center' }}>Counter Component Examples</h2>
+      
+      <div style={{ display: 'grid', gap: '40px', gridTemplateColumns: 'repeat(auto-fit, minmax(400px, 1fr))' }}>
+        <div>
+          <h3 style={{ textAlign: 'center' }}>Basic Counter</h3>
+          <Counter onChange={handleChange} />
+        </div>
+
+        <div>
+          <h3 style={{ textAlign: 'center' }}>Counter with Limits</h3>
+          <Counter 
+            initialValue={5}
+            min={0} 
+            max={10} 
+            onChange={handleChange} 
+          />
+        </div>
+
+        <div>
+          <h3 style={{ textAlign: 'center' }}>Counter with Custom Step</h3>
+          <Counter 
+            initialValue={0}
+            step={5}
+            onChange={handleChange} 
+          />
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default CounterExample;

package/templates-react/counter/Counter.jsx

@@ -0,0 +1,70 @@
+import { useState } from 'react';
+import './Counter.css';
+
+/**
+ * Counter Component
+ * A simple counter with increment and decrement functionality
+ */
+const Counter = ({ 
+  initialValue = 0,
+  min,
+  max,
+  step = 1,
+  onChange
+}) => {
+  const [count, setCount] = useState(initialValue);
+
+  const handleIncrement = () => {
+    const newValue = count + step;
+    if (max === undefined || newValue <= max) {
+      setCount(newValue);
+      onChange?.(newValue);
+    }
+  };
+
+  const handleDecrement = () => {
+    const newValue = count - step;
+    if (min === undefined || newValue >= min) {
+      setCount(newValue);
+      onChange?.(newValue);
+    }
+  };
+
+  const handleReset = () => {
+    setCount(initialValue);
+    onChange?.(initialValue);
+  };
+
+  return (
+    <div className="counter-container">
+      <h2 className="counter-title">Counter</h2>
+      <div className="counter-display">
+        {count}
+      </div>
+      <div className="counter-controls">
+        <button 
+          className="counter-btn counter-btn-decrement"
+          onClick={handleDecrement}
+          disabled={min !== undefined && count <= min}
+        >
+          -
+        </button>
+        <button 
+          className="counter-btn counter-btn-reset"
+          onClick={handleReset}
+        >
+          Reset
+        </button>
+        <button 
+          className="counter-btn counter-btn-increment"
+          onClick={handleIncrement}
+          disabled={max !== undefined && count >= max}
+        >
+          +
+        </button>
+      </div>
+    </div>
+  );
+};
+
+export default Counter;

package/templates-react/dropdown/Dropdown.css

@@ -0,0 +1,237 @@
+.dropdown-container {
+  position: relative;
+  width: 100%;
+  margin-bottom: 1rem;
+}
+
+.dropdown-label {
+  display: block;
+  margin-bottom: 0.5rem;
+  font-weight: 500;
+  color: #374151;
+  font-size: 0.875rem;
+}
+
+.dropdown {
+  position: relative;
+  width: 100%;
+}
+
+.dropdown-toggle {
+  width: 100%;
+  padding: 0.625rem 2.5rem 0.625rem 0.875rem;
+  background-color: white;
+  border: 2px solid #d1d5db;
+  border-radius: 0.5rem;
+  font-size: 1rem;
+  text-align: left;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  position: relative;
+}
+
+.dropdown-toggle:hover:not(:disabled) {
+  border-color: ##PRIMARY_COLOR##;
+}
+
+.dropdown-toggle:focus {
+  outline: none;
+  border-color: ##PRIMARY_COLOR##;
+  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
+}
+
+.dropdown-toggle:disabled {
+  background-color: #f3f4f6;
+  cursor: not-allowed;
+  opacity: 0.6;
+}
+
+.dropdown.open .dropdown-toggle {
+  border-color: ##PRIMARY_COLOR##;
+  border-bottom-left-radius: 0;
+  border-bottom-right-radius: 0;
+}
+
+.dropdown-value {
+  flex: 1;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  color: #111827;
+}
+
+.dropdown-toggle:disabled .dropdown-value {
+  color: #9ca3af;
+}
+
+.dropdown-arrow {
+  position: absolute;
+  right: 0.875rem;
+  top: 50%;
+  transform: translateY(-50%);
+  transition: transform 0.2s ease;
+  color: #6b7280;
+  font-size: 0.75rem;
+}
+
+.dropdown-arrow.up {
+  transform: translateY(-50%) rotate(180deg);
+}
+
+.dropdown-menu {
+  position: absolute;
+  top: 100%;
+  left: 0;
+  right: 0;
+  background-color: white;
+  border: 2px solid ##PRIMARY_COLOR##;
+  border-top: none;
+  border-radius: 0 0 0.5rem 0.5rem;
+  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
+  z-index: 1000;
+  overflow: hidden;
+  animation: slideDown 0.2s ease;
+}
+
+@keyframes slideDown {
+  from {
+    opacity: 0;
+    transform: translateY(-10px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+.dropdown-search {
+  padding: 0.5rem;
+  border-bottom: 1px solid #e5e7eb;
+}
+
+.dropdown-search-input {
+  width: 100%;
+  padding: 0.5rem;
+  border: 1px solid #d1d5db;
+  border-radius: 0.375rem;
+  font-size: 0.875rem;
+  outline: none;
+}
+
+.dropdown-search-input:focus {
+  border-color: ##PRIMARY_COLOR##;
+}
+
+.dropdown-options {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  max-height: inherit;
+  overflow-y: auto;
+}
+
+.dropdown-option {
+  padding: 0.75rem 0.875rem;
+  cursor: pointer;
+  transition: background-color 0.15s ease;
+  color: #374151;
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.dropdown-option:hover:not(.disabled) {
+  background-color: #f3f4f6;
+}
+
+.dropdown-option.selected {
+  background-color: ##PRIMARY_COLOR##;
+  color: white;
+  font-weight: 500;
+}
+
+.dropdown-option.disabled {
+  cursor: not-allowed;
+  color: #9ca3af;
+  font-style: italic;
+}
+
+.dropdown-checkbox {
+  width: 1rem;
+  height: 1rem;
+  cursor: pointer;
+}
+
+.dropdown-error .dropdown-toggle {
+  border-color: #ef4444;
+}
+
+.dropdown-error .dropdown-toggle:focus {
+  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1);
+}
+
+.dropdown-error-message {
+  display: block;
+  margin-top: 0.375rem;
+  font-size: 0.875rem;
+  color: #ef4444;
+}
+
+/* Dark Mode Support */
+@media (prefers-color-scheme: dark) {
+  .dropdown-label {
+    color: #e5e7eb;
+  }
+
+  .dropdown-toggle {
+    background-color: #1f2937;
+    border-color: #4b5563;
+    color: #e5e7eb;
+  }
+
+  .dropdown-toggle:hover:not(:disabled) {
+    border-color: ##SECONDARY_COLOR##;
+  }
+
+  .dropdown-toggle:disabled {
+    background-color: #111827;
+  }
+
+  .dropdown-value {
+    color: #e5e7eb;
+  }
+
+  .dropdown.open .dropdown-toggle {
+    border-color: ##SECONDARY_COLOR##;
+  }
+
+  .dropdown-menu {
+    background-color: #1f2937;
+    border-color: ##SECONDARY_COLOR##;
+  }
+
+  .dropdown-search {
+    border-bottom-color: #4b5563;
+  }
+
+  .dropdown-search-input {
+    background-color: #111827;
+    border-color: #4b5563;
+    color: #e5e7eb;
+  }
+
+  .dropdown-option {
+    color: #e5e7eb;
+  }
+
+  .dropdown-option:hover:not(.disabled) {
+    background-color: #374151;
+  }
+
+  .dropdown-option.selected {
+    background-color: ##SECONDARY_COLOR##;
+  }
+}