create-template-html-css 2.1.0 → 2.2.0

package/src/templates/form-components-templates.js

@@ -0,0 +1,194 @@
+/**
+ * Form Component Templates
+ * Form-related components with input fields and state management
+ * 
+ * @module templates/form-components-templates
+ */
+
+export const FORM_TEMPLATES = {
+  form: `  return (
+    <div className="App" style={{ padding: '40px' }}>
+      <{ComponentName}
+        title="Contact Form"
+        fields={[
+          { name: 'name', label: 'Name', type: 'text', required: true },
+          { name: 'email', label: 'Email', type: 'email', required: true },
+        ]}
+        onSubmit={(data) => console.log('Form data:', data)}
+      />
+    </div>
+  );`,
+
+  input: `  const [value, setValue] = useState('');
+
+  return (
+    <div className="App" style={{ padding: '40px', maxWidth: '400px', margin: '0 auto' }}>
+      <h1 style={{ marginBottom: '30px' }}>Input Component Examples</h1>
+      
+      <{ComponentName}
+        label="Name"
+        placeholder="Enter your name"
+        required
+      />
+      
+      <{ComponentName}
+        type="email"
+        label="Email"
+        placeholder="your@email.com"
+        value={value}
+        onChange={(e) => setValue(e.target.value)}
+        required
+      />
+      
+      <{ComponentName}
+        label="Search"
+        placeholder="Search..."
+        icon="🔍"
+      />
+    </div>
+  );`,
+
+  checkbox: `  const [isChecked, setIsChecked] = useState(false);
+
+  return (
+    <div className="App" style={{ padding: '40px', maxWidth: '600px', margin: '0 auto' }}>
+      <h1 style={{ marginBottom: '30px' }}>Checkbox Component Examples</h1>
+      
+      <div style={{ marginBottom: '30px' }}>
+        <h2>Basic Checkbox</h2>
+        <{ComponentName}
+          label="I agree to the terms and conditions"
+          checked={isChecked}
+          onChange={setIsChecked}
+        />
+        <p>Status: {isChecked ? 'Checked' : 'Unchecked'}</p>
+      </div>
+
+      <div style={{ marginBottom: '30px' }}>
+        <h2>Different Sizes</h2>
+        <{ComponentName} label="Small" size="small" />
+        <{ComponentName} label="Medium (default)" size="medium" />
+        <{ComponentName} label="Large" size="large" />
+      </div>
+
+      <div style={{ marginBottom: '30px' }}>
+        <h2>Different Colors</h2>
+        <{ComponentName} label="Primary" checked color="primary" />
+        <{ComponentName} label="Success" checked color="success" />
+        <{ComponentName} label="Error" checked color="error" />
+      </div>
+
+      <div style={{ marginBottom: '30px' }}>
+        <h2>Disabled State</h2>
+        <{ComponentName} label="Disabled unchecked" disabled />
+        <{ComponentName} label="Disabled checked" checked disabled />
+      </div>
+    </div>
+  );`,
+
+  dropdown: `  const [selected, setSelected] = useState('');
+
+  const options = [
+    { value: 'apple', label: 'Apple' },
+    { value: 'banana', label: 'Banana' },
+    { value: 'cherry', label: 'Cherry' },
+    { value: 'date', label: 'Date' },
+    { value: 'elderberry', label: 'Elderberry' }
+  ];
+
+  return (
+    <div className="App" style={{ padding: '40px', maxWidth: '600px', margin: '0 auto' }}>
+      <h1 style={{ marginBottom: '30px' }}>Dropdown Component Examples</h1>
+      
+      <div style={{ marginBottom: '30px' }}>
+        <{ComponentName}
+          label="Choose a fruit"
+          options={options}
+          value={selected}
+          onChange={setSelected}
+          placeholder="Select a fruit"
+        />
+        <p>Selected: {selected || 'None'}</p>
+      </div>
+
+      <div style={{ marginBottom: '30px' }}>
+        <{ComponentName}
+          label="Searchable Dropdown"
+          options={options}
+          placeholder="Search and select..."
+          searchable
+        />
+      </div>
+
+      <div style={{ marginBottom: '30px' }}>
+        <{ComponentName}
+          label="Disabled"
+          options={options}
+          placeholder="Cannot select"
+          disabled
+        />
+      </div>
+    </div>
+  );`,
+
+  switch: `  const [enabled, setEnabled] = useState(false);
+  const [darkMode, setDarkMode] = useState(false);
+
+  return (
+    <div className="App" style={{ padding: '40px', maxWidth: '800px', margin: '0 auto' }}>
+      <h1 style={{ marginBottom: '30px' }}>Switch Component Examples</h1>
+      
+      <div style={{ marginBottom: '30px' }}>
+        <h2>Basic Switch</h2>
+        <{ComponentName}
+          checked={enabled}
+          onChange={setEnabled}
+          label="Enable notifications"
+        />
+        <p style={{ marginTop: '0.5rem' }}>Status: {enabled ? 'ON' : 'OFF'}</p>
+      </div>
+
+      <div style={{ marginBottom: '30px' }}>
+        <h2>Sizes</h2>
+        <div style={{ display: 'flex', flexDirection: 'column', gap: '1rem' }}>
+          <{ComponentName} size="small" label="Small" />
+          <{ComponentName} size="medium" label="Medium (default)" />
+          <{ComponentName} size="large" label="Large" />
+        </div>
+      </div>
+
+      <div style={{ marginBottom: '30px' }}>
+        <h2>Colors</h2>
+        <div style={{ display: 'flex', flexDirection: 'column', gap: '1rem' }}>
+          <{ComponentName} checked color="primary" label="Primary" />
+          <{ComponentName} checked color="success" label="Success" />
+          <{ComponentName} checked color="error" label="Error" />
+        </div>
+      </div>
+
+      <div style={{ marginBottom: '30px' }}>
+        <h2>With Icons</h2>
+        <{ComponentName}
+          checked={darkMode}
+          onChange={setDarkMode}
+          label="Dark mode"
+          color="secondary"
+          icons={{
+            checked: '🌙',
+            unchecked: '☀️'
+          }}
+        />
+      </div>
+
+      <div style={{ marginBottom: '30px' }}>
+        <h2>States</h2>
+        <div style={{ display: 'flex', flexDirection: 'column', gap: '1rem' }}>
+          <{ComponentName} label="Normal" />
+          <{ComponentName} checked label="Checked" />
+          <{ComponentName} disabled label="Disabled" />
+          <{ComponentName} loading label="Loading" />
+        </div>
+      </div>
+    </div>
+  );`,
+};

package/src/templates/interactive-components-templates.js

@@ -0,0 +1,139 @@
+/**
+ * Interactive Component Templates
+ * Complex interactive components with navigation, modals, and animations
+ * 
+ * @module templates/interactive-components-templates
+ */
+
+export const INTERACTIVE_TEMPLATES = {
+  modal: `  const [isOpen, setIsOpen] = useState(false);
+
+  return (
+    <div className="App" style={{ padding: '40px' }}>
+      <button onClick={() => setIsOpen(true)}>Open Modal</button>
+      <{ComponentName}
+        isOpen={isOpen}
+        onClose={() => setIsOpen(false)}
+        title="Example Modal"
+      >
+        <p>This is the modal content</p>
+      </{ComponentName}>
+    </div>
+  );`,
+
+  navbar: `  const links = [
+    { label: 'Home', href: '#home' },
+    { label: 'Features', href: '#features' },
+    { label: 'Pricing', href: '#pricing' },
+    { label: 'Contact', href: '#contact' }
+  ];
+
+  return (
+    <div>
+      <{ComponentName}
+        logo="MyApp"
+        links={links}
+        onLinkClick={(link) => console.log('Clicked:', link.label)}
+      />
+      <div style={{ padding: '40px' }}>
+        <h1>Scroll down to see sticky navbar</h1>
+        <div style={{ height: '2000px' }}>
+          <p>Content goes here...</p>
+        </div>
+      </div>
+    </div>
+  );`,
+
+  tooltip: `  return (
+    <div className="App" style={{ padding: '80px', maxWidth: '800px', margin: '0 auto', textAlign: 'center' }}>
+      <h1 style={{ marginBottom: '50px' }}>Tooltip Component Examples</h1>
+      
+      <div style={{ marginBottom: '50px', display: 'flex', gap: '40px', justifyContent: 'center', flexWrap: 'wrap' }}>
+        <{ComponentName} content="This is a top tooltip" position="top">
+          <button style={buttonStyle}>Top</button>
+        </{ComponentName}>
+        
+        <{ComponentName} content="This is a bottom tooltip" position="bottom">
+          <button style={buttonStyle}>Bottom</button>
+        </{ComponentName}>
+        
+        <{ComponentName} content="This is a left tooltip" position="left">
+          <button style={buttonStyle}>Left</button>
+        </{ComponentName}>
+        
+        <{ComponentName} content="This is a right tooltip" position="right">
+          <button style={buttonStyle}>Right</button>
+        </{ComponentName}>
+      </div>
+
+      <div style={{ marginBottom: '50px' }}>
+        <{ComponentName} content="Click me to toggle!" trigger="click">
+          <button style={buttonStyle}>Click Trigger</button>
+        </{ComponentName}>
+      </div>
+
+      <div>
+       <{ComponentName} 
+          content="This is a longer tooltip that demonstrates how it handles more text content."
+          maxWidth="300px"
+        >
+          <button style={buttonStyle}>Long Content</button>
+        </{ComponentName}>
+      </div>
+    </div>
+  );
+
+  const buttonStyle = {
+    padding: '0.5rem 1rem',
+    backgroundColor: '#3b82f6',
+    color: 'white',
+    border: 'none',
+    borderRadius: '0.375rem',
+    cursor: 'pointer'
+  };`,
+
+  progress: `  const [progress, setProgress] = useState(0);
+
+  useEffect(() => {
+    const timer = setInterval(() => {
+      setProgress((prev) => (prev >= 100 ? 0 : prev + 1));
+    }, 100);
+    return () => clearInterval(timer);
+  }, []);
+
+  return (
+    <div className="App" style={{ padding: '40px', maxWidth: '800px', margin: '0 auto' }}>
+      <h1 style={{ marginBottom: '30px' }}>Progress Component Examples</h1>
+      
+      <div style={{ marginBottom: '30px' }}>
+        <h2>Basic Progress</h2>
+        <{ComponentName} value={25} variant="primary" />
+        <{ComponentName} value={50} variant="success" />
+        <{ComponentName} value={75} variant="warning" />
+      </div>
+
+      <div style={{ marginBottom: '30px' }}>
+        <h2>With Percentage</h2>
+        <{ComponentName} value={60} variant="primary" showPercentage size="large" />
+      </div>
+
+      <div style={{ marginBottom: '30px' }}>
+        <h2>Animated Progress</h2>
+        <div style={{ marginBottom: '0.5rem' }}>Uploading: {progress}%</div>
+        <{ComponentName} value={progress} variant="info" striped animated />
+      </div>
+
+      <div style={{ marginBottom: '30px' }}>
+        <h2>Indeterminate (Loading)</h2>
+        <{ComponentName} indeterminate variant="primary" />
+      </div>
+    </div>
+  );`,
+
+  'todo-list': `  return (
+    <div className="App" style={{ padding: '40px' }}>
+      <h1>Todo List</h1>
+      <{ComponentName} />
+    </div>
+  );`,
+};

package/templates-react/alert/Alert.css

@@ -0,0 +1,158 @@
+.alert {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  padding: 1rem 1.25rem;
+  border-radius: 0.5rem;
+  margin-bottom: 1rem;
+  border: 1px solid;
+  animation: slideIn 0.3s ease;
+}
+
+@keyframes slideIn {
+  from {
+    opacity: 0;
+    transform: translateY(-10px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+.alert-content {
+  display: flex;
+  align-items: flex-start;
+  flex: 1;
+  gap: 0.75rem;
+}
+
+.alert-icon {
+  font-size: 1.25rem;
+  font-weight: bold;
+  flex-shrink: 0;
+  width: 24px;
+  height: 24px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.alert-text {
+  flex: 1;
+}
+
+.alert-title {
+  font-weight: 600;
+  font-size: 1rem;
+  margin-bottom: 0.25rem;
+}
+
+.alert-message {
+  font-size: 0.875rem;
+  line-height: 1.5;
+}
+
+.alert-close {
+  background: none;
+  border: none;
+  font-size: 1.5rem;
+  line-height: 1;
+  cursor: pointer;
+  padding: 0;
+  margin-left: 1rem;
+  opacity: 0.6;
+  transition: opacity 0.2s ease;
+  flex-shrink: 0;
+}
+
+.alert-close:hover {
+  opacity: 1;
+}
+
+/* Success Alert */
+.alert-success {
+  background: #ecfdf5;
+  border-color: #10b981;
+  color: #065f46;
+}
+
+.alert-success .alert-icon {
+  color: #10b981;
+}
+
+.alert-success .alert-close {
+  color: #065f46;
+}
+
+/* Error Alert */
+.alert-error {
+  background: #fef2f2;
+  border-color: #ef4444;
+  color: #991b1b;
+}
+
+.alert-error .alert-icon {
+  color: #ef4444;
+}
+
+.alert-error .alert-close {
+  color: #991b1b;
+}
+
+/* Warning Alert */
+.alert-warning {
+  background: #fffbeb;
+  border-color: #f59e0b;
+  color: #92400e;
+}
+
+.alert-warning .alert-icon {
+  color: #f59e0b;
+}
+
+.alert-warning .alert-close {
+  color: #92400e;
+}
+
+/* Info Alert */
+.alert-info {
+  background: #eff6ff;
+  border-color: ##PRIMARY_COLOR##;
+  color: #1e40af;
+}
+
+.alert-info .alert-icon {
+  color: ##PRIMARY_COLOR##;
+}
+
+.alert-info .alert-close {
+  color: #1e40af;
+}
+
+/* Dark mode support */
+@media (prefers-color-scheme: dark) {
+  .alert-success {
+    background: #064e3b;
+    color: #d1fae5;
+    border-color: #059669;
+  }
+
+  .alert-error {
+    background: #7f1d1d;
+    color: #fecaca;
+    border-color: #dc2626;
+  }
+
+  .alert-warning {
+    background: #78350f;
+    color: #fef3c7;
+    border-color: #d97706;
+  }
+
+  .alert-info {
+    background: #1e3a8a;
+    color: #dbeafe;
+    border-color: ##PRIMARY_COLOR##;
+  }
+}

package/templates-react/alert/Alert.example.jsx

@@ -0,0 +1,106 @@
+import { useState } from 'react';
+import Alert from './Alert';
+
+function AlertExample() {
+  const [alerts, setAlerts] = useState({
+    success: true,
+    error: true,
+    warning: true,
+    info: true
+  });
+
+  const handleClose = (type) => {
+    set Alerts({ ...alerts, [type]: false });
+  };
+
+  const resetAlerts = () => {
+    setAlerts({
+      success: true,
+      error: true,
+      warning: true,
+      info: true
+    });
+  };
+
+  return (
+    <div style={{ maxWidth: '600px', padding: '2rem' }}>
+      <h2>Alert Component Examples</h2>
+
+      <button 
+        onClick={resetAlerts}
+        style={{
+          padding: '0.5rem 1rem',
+          marginBottom: '1.5rem',
+          background: '#667eea',
+          color: 'white',
+          border: 'none',
+          borderRadius: '0.5rem',
+          cursor: 'pointer'
+        }}
+      >
+        Reset Alerts
+      </button>
+
+      {/* Success Alert */}
+      {alerts.success && (
+        <Alert 
+          type="success" 
+          title="Success!"
+          onClose={() => handleClose('success')}
+        >
+          Your changes have been saved successfully.
+        </Alert>
+      )}
+
+      {/* Error Alert */}
+      {alerts.error && (
+        <Alert 
+          type="error" 
+          title="Error"
+          onClose={() => handleClose('error')}
+        >
+          Something went wrong. Please try again.
+        </Alert>
+      )}
+
+      {/* Warning Alert */}
+      {alerts.warning && (
+        <Alert 
+          type="warning" 
+          title="Warning"
+          onClose={() => handleClose('warning')}
+        >
+          This action cannot be undone. Please proceed with caution.
+        </Alert>
+      )}
+
+      {/* Info Alert */}
+      {alerts.info && (
+        <Alert 
+          type="info" 
+          title="Information"
+          onClose={() => handleClose('info')}
+        >
+          Check out our new features in the latest update!
+        </Alert>
+      )}
+
+      {/* Alert without title */}
+      <Alert type="success">
+        Quick success message without a title.
+      </Alert>
+
+      {/* Non-dismissible Alert */}
+      <Alert type="info" dismissible={false}>
+        This alert cannot be closed.
+      </Alert>
+
+      {/* Alert with custom icon */}
+      <Alert type="success" icon="🎉" title="Celebration!">
+        You've reached a new milestone!
+      </Alert>
+    </div>
+  );
+}
+
+export default AlertExample;

package/templates-react/alert/Alert.jsx

@@ -0,0 +1,61 @@
+
+import { useState } from 'react';
+
+function Alert({
+  type = 'info',
+  title,
+  children,
+  onClose,
+  dismissible = true,
+  icon: customIcon,
+  className = ''
+}) {
+  const [isVisible, setIsVisible] = useState(true);
+
+  const icons = {
+    success: '✓',
+    error: '✕',
+    warning: '⚠',
+    info: 'ℹ'
+  };
+
+  const handleClose = () => {
+    setIsVisible(false);
+    if (onClose) {
+      onClose();
+    }
+  };
+
+  if (!isVisible) {
+    return null;
+  }
+
+  const icon = customIcon !== undefined ? customIcon : icons[type];
+
+  return (
+    <div className={`alert alert-${type} ${className}`} role="alert">
+      <div className="alert-content">
+        {icon && (
+          <span className="alert-icon">{icon}</span>
+        )}
+        
+        <div className="alert-text">
+          {title && <div className="alert-title">{title}</div>}
+          {children && <div className="alert-message">{children}</div>}
+        </div>
+      </div>
+
+      {dismissible && (
+        <button
+          className="alert-close"
+          onClick={handleClose}
+          aria-label="Close alert"
+        >
+          ×
+        </button>
+      )}
+    </div>
+  );
+}
+
+export default Alert;