create-template-html-css 2.0.4 → 2.2.0

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;

package/templates-react/badge/Badge.css

@@ -0,0 +1,196 @@
+.badge {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  font-weight: 600;
+  line-height: 1;
+  white-space: nowrap;
+  border-radius: 0.25rem;
+  transition: all 0.2s ease;
+}
+
+/* Sizes */
+.badge-small {
+  padding: 0.125rem 0.375rem;
+  font-size: 0.75rem;
+  min-width: 1.25rem;
+  height: 1.25rem;
+}
+
+.badge-medium {
+  padding: 0.25rem 0.5rem;
+  font-size: 0.875rem;
+  min-width: 1.5rem;
+  height: 1.5rem;
+}
+
+.badge-large {
+  padding: 0.375rem 0.625rem;
+  font-size: 1rem;
+  min-width: 2rem;
+  height: 2rem;
+}
+
+/* Variants */
+.badge-default {
+  background-color: #6b7280;
+  color: white;
+}
+
+.badge-primary {
+  background-color: ##PRIMARY_COLOR##;
+  color: white;
+}
+
+.badge-secondary {
+  background-color: ##SECONDARY_COLOR##;
+  color: white;
+}
+
+.badge-success {
+  background-color: #10b981;
+  color: white;
+}
+
+.badge-warning {
+  background-color: #f59e0b;
+  color: white;
+}
+
+.badge-error {
+  background-color: #ef4444;
+  color: white;
+}
+
+.badge-info {
+  background-color: #3b82f6;
+  color: white;
+}
+
+/* Pill shape */
+.badge-pill {
+  border-radius: 9999px;
+}
+
+/* Dot badge */
+.badge-dot {
+  padding: 0;
+  min-width: 0.5rem;
+  width: 0.5rem;
+  height: 0.5rem;
+  border-radius: 50%;
+}
+
+.badge-dot.badge-small {
+  width: 0.375rem;
+  height: 0.375rem;
+}
+
+.badge-dot.badge-large {
+  width: 0.625rem;
+  height: 0.625rem;
+}
+
+/* Position for dot badges */
+.badge-top-right {
+  position: absolute;
+  top: 0;
+  right: 0;
+  transform: translate(50%, -50%);
+}
+
+.badge-top-left {
+  position: absolute;
+  top: 0;
+  left: 0;
+  transform: translate(-50%, -50%);
+}
+
+.badge-bottom-right {
+  position: absolute;
+  bottom: 0;
+  right: 0;
+  transform: translate(50%, 50%);
+}
+
+.badge-bottom-left {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  transform: translate(-50%, 50%);
+}
+
+/* Outline variants */
+.badge-outline {
+  background-color: transparent;
+  border: 2px solid currentColor;
+}
+
+.badge-outline.badge-default {
+  color: #6b7280;
+  border-color: #6b7280;
+}
+
+.badge-outline.badge-primary {
+  color: ##PRIMARY_COLOR##;
+  border-color: ##PRIMARY_COLOR##;
+}
+
+.badge-outline.badge-secondary {
+  color: ##SECONDARY_COLOR##;
+  border-color: ##SECONDARY_COLOR##;
+}
+
+.badge-outline.badge-success {
+  color: #10b981;
+  border-color: #10b981;
+}
+
+.badge-outline.badge-warning {
+  color: #f59e0b;
+  border-color: #f59e0b;
+}
+
+.badge-outline.badge-error {
+  color: #ef4444;
+  border-color: #ef4444;
+}
+
+.badge-outline.badge-info {
+  color: #3b82f6;
+  border-color: #3b82f6;
+}
+
+/* Animation */
+@keyframes pulse {
+  0%, 100% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.5;
+  }
+}
+
+.badge-pulse {
+  animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
+}
+
+/* Dark Mode Support */
+@media (prefers-color-scheme: dark) {
+  .badge-default {
+    background-color: #9ca3af;
+  }
+
+  .badge-primary {
+    background-color: ##SECONDARY_COLOR##;
+  }
+
+  .badge-secondary {
+    background-color: ##PRIMARY_COLOR##;
+  }
+
+  .badge-outline.badge-default {
+    color: #d1d5db;
+    border-color: #d1d5db;
+  }
+}

package/templates-react/badge/Badge.example.jsx

@@ -0,0 +1,182 @@
+
+import Badge from './Badge';
+
+function BadgeExample() {
+  return (
+    <div style={{ padding: '2rem', maxWidth: '800px', margin: '0 auto' }}>
+      <h1>Badge Component Examples</h1>
+
+      <section style={{ marginBottom: '3rem' }}>
+        <h2>Basic Badges</h2>
+        <div style={{ display: 'flex', gap: '1rem', flexWrap: 'wrap', alignItems: 'center' }}>
+          <Badge>Default</Badge>
+          <Badge variant="primary">Primary</Badge>
+          <Badge variant="secondary">Secondary</Badge>
+          <Badge variant="success">Success</Badge>
+          <Badge variant="warning">Warning</Badge>
+          <Badge variant="error">Error</Badge>
+          <Badge variant="info">Info</Badge>
+        </div>
+      </section>
+
+      <section style={{ marginBottom: '3rem' }}>
+        <h2>Sizes</h2>
+        <div style={{ display: 'flex', gap: '1rem', flexWrap: 'wrap', alignItems: 'center' }}>
+          <Badge size="small" variant="primary">Small</Badge>
+          <Badge size="medium" variant="primary">Medium</Badge>
+          <Badge size="large" variant="primary">Large</Badge>
+        </div>
+      </section>
+
+      <section style={{ marginBottom: '3rem' }}>
+        <h2>Pill Shape</h2>
+        <div style={{ display: 'flex', gap: '1rem', flexWrap: 'wrap', alignItems: 'center' }}>
+          <Badge pill variant="success">New</Badge>
+          <Badge pill variant="info">Beta</Badge>
+          <Badge pill variant="warning">Hot</Badge>
+          <Badge pill variant="error">Sale</Badge>
+        </div>
+      </section>
+
+      <section style={{ marginBottom: '3rem' }}>
+        <h2>Count Badges</h2>
+        <div style={{ display: 'flex', gap: '2rem', flexWrap: 'wrap', alignItems: 'center' }}>
+          <div style={{ position: 'relative', display: 'inline-block' }}>
+            <button style={buttonStyle}>
+              Messages
+            </button>
+            <Badge count={5} variant="error" size="small" />
+          </div>
+          
+          <div style={{ position: 'relative', display: 'inline-block' }}>
+            <button style={buttonStyle}>
+              Notifications
+            </button>
+            <Badge count={99} variant="primary" size="small" />
+          </div>
+          
+          <div style={{ position: 'relative', display: 'inline-block' }}>
+            <button style={buttonStyle}>
+              Inbox
+            </button>
+            <Badge count={150} maxCount={99} variant="error" size="small" />
+          </div>
+          
+          <div style={{ position: 'relative', display: 'inline-block' }}>
+            <button style={buttonStyle}>
+              Updates
+            </button>
+            <Badge count={0} showZero variant="info" size="small" />
+          </div>
+        </div>
+      </section>
+
+      <section style={{ marginBottom: '3rem' }}>
+        <h2>Dot Badges</h2>
+        <div style={{ display: 'flex', gap: '2rem', flexWrap: 'wrap', alignItems: 'center' }}>
+          <div style={{ position: 'relative', display: 'inline-block' }}>
+            <button style={buttonStyle}>Online</button>
+            <Badge dot variant="success" />
+          </div>
+          
+          <div style={{ position: 'relative', display: 'inline-block' }}>
+            <button style={buttonStyle}>Busy</button>
+            <Badge dot variant="error" />
+          </div>
+          
+          <div style={{ position: 'relative', display: 'inline-block' }}>
+            <button style={buttonStyle}>Away</button>
+            <Badge dot variant="warning" />
+          </div>
+          
+          <div style={{ position: 'relative', display: 'inline-block' }}>
+            <button style={buttonStyle}>Offline</button>
+            <Badge dot variant="default" />
+          </div>
+        </div>
+      </section>
+
+      <section style={{ marginBottom: '3rem' }}>
+        <h2>Dot Positions</h2>
+        <div style={{ display: 'flex', gap: '2rem', flexWrap: 'wrap', alignItems: 'center' }}>
+          <div style={{ position: 'relative', display: 'inline-block' }}>
+            <div style={avatarStyle}>👤</div>
+            <Badge dot variant="success" position="top-right" />
+          </div>
+          
+          <div style={{ position: 'relative', display: 'inline-block' }}>
+            <div style={avatarStyle}>👤</div>
+            <Badge dot variant="error" position="top-left" />
+          </div>
+          
+          <div style={{ position: 'relative', display: 'inline-block' }}>
+            <div style={avatarStyle}>👤</div>
+            <Badge dot variant="warning" position="bottom-right" />
+          </div>
+          
+          <div style={{ position: 'relative', display: 'inline-block' }}>
+            <div style={avatarStyle}>👤</div>
+            <Badge dot variant="info" position="bottom-left" />
+          </div>
+        </div>
+      </section>
+
+      <section style={{ marginBottom: '3rem' }}>
+        <h2>Use Cases</h2>
+        <div style={{ display: 'flex', flexDirection: 'column', gap: '1.5rem' }}>
+          <div>
+            <h3 style={{ fontSize: '1rem', marginBottom: '0.5rem' }}>Status Labels</h3>
+            <div style={{ display: 'flex', gap: '0.5rem', flexWrap: 'wrap' }}>
+              <Badge variant="success">Active</Badge>
+              <Badge variant="warning">Pending</Badge>
+              <Badge variant="error">Inactive</Badge>
+              <Badge variant="info">Draft</Badge>
+            </div>
+          </div>
+
+          <div>
+            <h3 style={{ fontSize: '1rem', marginBottom: '0.5rem' }}>Categories</h3>
+            <div style={{ display: 'flex', gap: '0.5rem', flexWrap: 'wrap' }}>
+              <Badge pill variant="primary">JavaScript</Badge>
+              <Badge pill variant="secondary">React</Badge>
+              <Badge pill variant="info">TypeScript</Badge>
+              <Badge pill variant="success">Node.js</Badge>
+            </div>
+          </div>
+
+          <div>
+            <h3 style={{ fontSize: '1rem', marginBottom: '0.5rem' }}>Priority Levels</h3>
+            <div style={{ display: 'flex', gap: '0.5rem', flexWrap: 'wrap' }}>
+              <Badge variant="error" size="small">High</Badge>
+              <Badge variant="warning" size="small">Medium</Badge>
+              <Badge variant="success" size="small">Low</Badge>
+            </div>
+          </div>
+        </div>
+      </section>
+    </div>
+  );
+}
+
+const buttonStyle = {
+  padding: '0.5rem 1rem',
+  backgroundColor: '#3b82f6',
+  color: 'white',
+  border: 'none',
+  borderRadius: '0.375rem',
+  cursor: 'pointer',
+  fontSize: '0.875rem'
+};
+
+const avatarStyle = {
+  width: '48px',
+  height: '48px',
+  borderRadius: '50%',
+  backgroundColor: '#e5e7eb',
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+  fontSize: '1.5rem'
+};
+
+export default BadgeExample;