create-template-html-css 2.1.0 → 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.example.jsx

@@ -1,4 +1,4 @@
-import React from 'react';
+
 import Counter from './Counter';
 
 /**

package/templates-react/counter/Counter.jsx

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import { useState } from 'react';
 import './Counter.css';
 
 /**

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##;
+  }
+}

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;