create-template-html-css 2.1.0 → 2.2.0

package/templates-react/progress/Progress.css

@@ -0,0 +1,247 @@
+.progress-container {
+  width: 100%;
+  margin-bottom: 1rem;
+}
+
+.progress-label-container {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 0.5rem;
+}
+
+.progress-label {
+  font-size: 0.875rem;
+  font-weight: 500;
+  color: #374151;
+}
+
+.progress {
+  width: 100%;
+  background-color: #e5e7eb;
+  border-radius: 9999px;
+  overflow: hidden;
+  position: relative;
+}
+
+/* Sizes */
+.progress-small {
+  height: 0.5rem;
+}
+
+.progress-medium {
+  height: 0.75rem;
+}
+
+.progress-large {
+  height: 1.25rem;
+}
+
+/* Progress Bar */
+.progress-bar {
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: width 0.6s ease;
+  border-radius: 9999px;
+  position: relative;
+  overflow: hidden;
+}
+
+/* Colors */
+.progress-bar-primary {
+  background-color: ##PRIMARY_COLOR##;
+}
+
+.progress-bar-secondary {
+  background-color: ##SECONDARY_COLOR##;
+}
+
+.progress-bar-success {
+  background-color: #10b981;
+}
+
+.progress-bar-warning {
+  background-color: #f59e0b;
+}
+
+.progress-bar-error {
+  background-color: #ef4444;
+}
+
+.progress-bar-info {
+  background-color: #3b82f6;
+}
+
+.progress-bar-default {
+  background-color: #6b7280;
+}
+
+/* Value Label */
+.progress-value {
+  font-size: 0.75rem;
+  font-weight: 600;
+  color: white;
+  white-space: nowrap;
+  padding: 0 0.5rem;
+  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
+}
+
+.progress-small .progress-value {
+  font-size: 0.625rem;
+}
+
+.progress-large .progress-value {
+  font-size: 0.875rem;
+}
+
+/* Striped Pattern */
+.progress-bar-striped {
+  background-image: linear-gradient(
+    45deg,
+    rgba(255, 255, 255, 0.15) 25%,
+    transparent 25%,
+    transparent 50%,
+    rgba(255, 255, 255, 0.15) 50%,
+    rgba(255, 255, 255, 0.15) 75%,
+    transparent 75%,
+    transparent
+  );
+  background-size: 1rem 1rem;
+}
+
+/* Animated Stripes */
+.progress-bar-animated {
+  animation: progress-bar-stripes 1s linear infinite;
+}
+
+@keyframes progress-bar-stripes {
+  from {
+    background-position: 1rem 0;
+  }
+  to {
+    background-position: 0 0;
+  }
+}
+
+/* Indeterminate Progress */
+.progress-indeterminate .progress-bar {
+  width: 100% !important;
+  animation: indeterminate 1.5s ease-in-out infinite;
+  background: linear-gradient(
+    90deg,
+    transparent,
+    currentColor 50%,
+    transparent
+  );
+}
+
+@keyframes indeterminate {
+  0% {
+    transform: translateX(-100%);
+  }
+  100% {
+    transform: translateX(100%);
+  }
+}
+
+/* Gradient Variants */
+.progress-bar-gradient {
+  background: linear-gradient(90deg, ##PRIMARY_COLOR## 0%, ##SECONDARY_COLOR## 100%);
+}
+
+/* Pulse Animation */
+@keyframes pulse-glow {
+  0%, 100% {
+    box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.4);
+  }
+  50% {
+    box-shadow: 0 0 0 4px rgba(59, 130, 246, 0);
+  }
+}
+
+.progress-bar-pulse {
+  animation: pulse-glow 2s ease-in-out infinite;
+}
+
+/* Percentage outside bar */
+.progress-percentage-outside {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+}
+
+.progress-percentage-outside .progress {
+  flex: 1;
+}
+
+.progress-percentage-text {
+  font-size: 0.875rem;
+  font-weight: 600;
+  color: #374151;
+  min-width: 3rem;
+  text-align: right;
+}
+
+/* Circular Progress (bonus) */
+.progress-circular {
+  width: 100px;
+  height: 100px;
+  border-radius: 50%;
+  background: conic-gradient(
+    ##PRIMARY_COLOR## calc(var(--progress) * 1%),
+    #e5e7eb 0
+  );
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: relative;
+}
+
+.progress-circular::before {
+  content: '';
+  position: absolute;
+  width: 80%;
+  height: 80%;
+  border-radius: 50%;
+  background: white;
+}
+
+.progress-circular-value {
+  position: relative;
+  z-index: 1;
+  font-weight: 600;
+  color: #374151;
+}
+
+/* Dark Mode Support */
+@media (prefers-color-scheme: dark) {
+  .progress {
+    background-color: #374151;
+  }
+
+  .progress-label {
+    color: #e5e7eb;
+  }
+
+  .progress-bar-primary {
+    background-color: ##SECONDARY_COLOR##;
+  }
+
+  .progress-bar-secondary {
+    background-color: ##PRIMARY_COLOR##;
+  }
+
+  .progress-percentage-text {
+    color: #e5e7eb;
+  }
+
+  .progress-circular::before {
+    background: #1f2937;
+  }
+
+  .progress-circular-value {
+    color: #e5e7eb;
+  }
+}

package/templates-react/progress/Progress.example.jsx

@@ -0,0 +1,244 @@
+import { useState, useEffect } from 'react';
+import Progress from './Progress';
+
+function ProgressExample() {
+  const [uploadProgress, setUploadProgress] = useState(0);
+  const [downloadProgress, setDownloadProgress] = useState(0);
+
+  // Simulate upload progress
+  useEffect(() => {
+    const interval = setInterval(() => {
+      setUploadProgress((prev) => {
+        if (prev >= 100) return 0;
+        return prev + 2;
+      });
+    }, 100);
+
+    return () => clearInterval(interval);
+  }, []);
+
+  // Simulate download progress
+  useEffect(() => {
+    const interval = setInterval(() => {
+      setDownloadProgress((prev) => {
+        if (prev >= 100) return 0;
+        return prev + 1;
+      });
+    }, 150);
+
+    return () => clearInterval(interval);
+  }, []);
+
+  return (
+    <div style={{ padding: '2rem', maxWidth: '800px', margin: '0 auto' }}>
+      <h1>Progress Component Examples</h1>
+
+      <section style={{ marginBottom: '3rem' }}>
+        <h2>Basic Progress</h2>
+        <Progress value={50} />
+        <Progress value={75} variant="success" />
+        <Progress value={30} variant="warning" />
+      </section>
+
+      <section style={{ marginBottom: '3rem' }}>
+        <h2>Sizes</h2>
+        <div style={{ display: 'flex', flexDirection: 'column', gap: '1rem' }}>
+          <div>
+            <p style={{ marginBottom: '0.5rem', fontSize: '0.875rem', color: '#666' }}>Small</p>
+            <Progress value={60} size="small" variant="primary" />
+          </div>
+          <div>
+            <p style={{ marginBottom: '0.5rem', fontSize: '0.875rem', color: '#666' }}>Medium (default)</p>
+            <Progress value={60} size="medium" variant="primary" />
+          </div>
+          <div>
+            <p style={{ marginBottom: '0.5rem', fontSize: '0.875rem', color: '#666' }}>Large</p>
+            <Progress value={60} size="large" variant="primary" />
+          </div>
+        </div>
+      </section>
+
+      <section style={{ marginBottom: '3rem' }}>
+        <h2>Colors</h2>
+        <div style={{ display: 'flex', flexDirection: 'column', gap: '1rem' }}>
+          <Progress value={70} variant="primary" showPercentage />
+          <Progress value={70} variant="secondary" showPercentage />
+          <Progress value={70} variant="success" showPercentage />
+          <Progress value={70} variant="warning" showPercentage />
+          <Progress value={70} variant="error" showPercentage />
+          <Progress value={70} variant="info" showPercentage />
+        </div>
+      </section>
+
+      <section style={{ marginBottom: '3rem' }}>
+        <h2>With Labels</h2>
+        <div style={{ display: 'flex', flexDirection: 'column', gap: '1.5rem' }}>
+          <Progress 
+            value={45} 
+            variant="primary" 
+            showLabel 
+            label="Uploading files"
+          />
+          <Progress 
+            value={78} 
+            variant="success" 
+            showPercentage 
+            size="large"
+          />
+          <Progress 
+            value={23} 
+            max={50} 
+            variant="info" 
+            showLabel
+          />
+        </div>
+      </section>
+
+      <section style={{ marginBottom: '3rem' }}>
+        <h2>Striped Progress</h2>
+        <div style={{ display: 'flex', flexDirection: 'column', gap: '1rem' }}>
+          <Progress value={60} variant="primary" striped />
+          <Progress value={45} variant="success" striped />
+          <Progress value={80} variant="warning" striped />
+        </div>
+      </section>
+
+      <section style={{ marginBottom: '3rem' }}>
+        <h2>Animated Striped</h2>
+        <div style={{ display: 'flex', flexDirection: 'column', gap: '1rem' }}>
+          <Progress value={65} variant="primary" striped animated showPercentage />
+          <Progress value={40} variant="success" striped animated showPercentage />
+          <Progress value={85} variant="error" striped animated showPercentage />
+        </div>
+      </section>
+
+      <section style={{ marginBottom: '3rem' }}>
+        <h2>Indeterminate (Loading)</h2>
+        <Progress indeterminate variant="primary" />
+        <p style={{ marginTop: '0.5rem', fontSize: '0.875rem', color: '#666' }}>
+          Use when progress cannot be determined
+        </p>
+      </section>
+
+      <section style={{ marginBottom: '3rem' }}>
+        <h2>Live Progress Examples</h2>
+        <div style={{ display: 'flex', flexDirection: 'column', gap: '2rem' }}>
+          <div>
+            <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: '0.5rem' }}>
+              <span style={{ fontSize: '0.875rem', fontWeight: '500' }}>Uploading...</span>
+              <span style={{ fontSize: '0.875rem', color: '#666' }}>{uploadProgress}%</span>
+            </div>
+            <Progress 
+              value={uploadProgress} 
+              variant="primary" 
+              striped 
+              animated 
+              size="large"
+            />
+          </div>
+
+          <div>
+            <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: '0.5rem' }}>
+              <span style={{ fontSize: '0.875rem', fontWeight: '500' }}>Downloading...</span>
+              <span style={{ fontSize: '0.875rem', color: '#666' }}>{downloadProgress}%</span>
+            </div>
+            <Progress 
+              value={downloadProgress} 
+              variant="success" 
+              striped 
+              animated 
+              size="large"
+            />
+          </div>
+        </div>
+      </section>
+
+      <section style={{ marginBottom: '3rem' }}>
+        <h2>File Upload Simulation</h2>
+        <div style={{
+          backgroundColor: '#f9fafb',
+          padding: '1.5rem',
+          borderRadius: '0.5rem',
+          border: '1px solid #e5e7eb'
+        }}>
+          <div style={{ marginBottom: '1.5rem' }}>
+            <div style={{ display: 'flex', alignItems: 'center', gap: '0.75rem', marginBottom: '0.75rem' }}>
+              <span style={{ fontSize: '1.5rem' }}>📄</span>
+              <div style={{ flex: 1 }}>
+                <div style={{ fontWeight: '500', fontSize: '0.875rem' }}>document.pdf</div>
+                <div style={{ fontSize: '0.75rem', color: '#6b7280' }}>2.4 MB</div>
+              </div>
+              <div style={{ fontSize: '0.875rem', fontWeight: '600', color: '##PRIMARY_COLOR##' }}>
+                {uploadProgress}%
+              </div>
+            </div>
+            <Progress 
+              value={uploadProgress} 
+              variant="primary" 
+              striped 
+              animated
+            />
+          </div>
+
+          <div>
+            <div style={{ display: 'flex', alignItems: 'center', gap: '0.75rem', marginBottom: '0.75rem' }}>
+              <span style={{ fontSize: '1.5rem' }}>🖼️</span>
+              <div style={{ flex: 1 }}>
+                <div style={{ fontWeight: '500', fontSize: '0.875rem' }}>image.jpg</div>
+                <div style={{ fontSize: '0.75rem', color: '#6b7280' }}>5.8 MB</div>
+              </div>
+              <div style={{ fontSize: '0.875rem', fontWeight: '600', color: '#10b981' }}>
+                {downloadProgress}%
+              </div>
+            </div>
+            <Progress 
+              value={downloadProgress} 
+              variant="success" 
+              striped 
+              animated
+            />
+          </div>
+        </div>
+      </section>
+
+      <section style={{ marginBottom: '3rem' }}>
+        <h2>Skill Levels</h2>
+        <div style={{ display: 'flex', flexDirection: 'column', gap: '1.5rem' }}>
+          <div>
+            <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: '0.5rem' }}>
+              <span style={{ fontSize: '0.875rem', fontWeight: '500' }}>JavaScript</span>
+              <span style={{ fontSize: '0.875rem', color: '#666' }}>90%</span>
+            </div>
+            <Progress value={90} variant="primary" />
+          </div>
+
+          <div>
+            <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: '0.5rem' }}>
+              <span style={{ fontSize: '0.875rem', fontWeight: '500' }}>React</span>
+              <span style={{ fontSize: '0.875rem', color: '#666' }}>85%</span>
+            </div>
+            <Progress value={85} variant="info" />
+          </div>
+
+          <div>
+            <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: '0.5rem' }}>
+              <span style={{ fontSize: '0.875rem', fontWeight: '500' }}>CSS</span>
+              <span style={{ fontSize: '0.875rem', color: '#666' }}>80%</span>
+            </div>
+            <Progress value={80} variant="secondary" />
+          </div>
+
+          <div>
+            <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: '0.5rem' }}>
+              <span style={{ fontSize: '0.875rem', fontWeight: '500' }}>Node.js</span>
+              <span style={{ fontSize: '0.875rem', color: '#666' }}>75%</span>
+            </div>
+            <Progress value={75} variant="success" />
+          </div>
+        </div>
+      </section>
+    </div>
+  );
+}
+
+export default ProgressExample;

package/templates-react/progress/Progress.jsx

@@ -0,0 +1,79 @@
+
+import './Progress.css';
+
+function Progress({ 
+  value = 0,
+  max = 100,
+  min = 0,
+  variant = 'primary',
+  size = 'medium',
+  showLabel = false,
+  label = null,
+  showPercentage = false,
+  striped = false,
+  animated = false,
+  indeterminate = false,
+  className = ''
+}) {
+  const calculatePercentage = () => {
+    if (indeterminate) return 100;
+    const range = max - min;
+    const currentValue = Math.min(Math.max(value, min), max) - min;
+    return (currentValue / range) * 100;
+  };
+
+  const percentage = calculatePercentage();
+  const displayValue = Math.round(percentage);
+
+  const progressClasses = [
+    'progress',
+    `progress-${size}`,
+    indeterminate ? 'progress-indeterminate' : '',
+    className
+  ].filter(Boolean).join(' ');
+
+  const barClasses = [
+    'progress-bar',
+    `progress-bar-${variant}`,
+    striped ? 'progress-bar-striped' : '',
+    animated ? 'progress-bar-animated' : ''
+  ].filter(Boolean).join(' ');
+
+  const getLabel = () => {
+    if (label) return label;
+    if (showPercentage) return `${displayValue}%`;
+    if (showLabel) return `${value} / ${max}`;
+    return null;
+  };
+
+  const displayLabel = getLabel();
+
+  return (
+    <div className="progress-container">
+      {displayLabel && showLabel && !showPercentage && (
+        <div className="progress-label-container">
+          <span className="progress-label">{displayLabel}</span>
+        </div>
+      )}
+      <div
+        className={progressClasses}
+        role="progressbar"
+        aria-valuenow={indeterminate ? undefined : value}
+        aria-valuemin={min}
+        aria-valuemax={max}
+        aria-label={typeof label === 'string' ? label : 'Progress'}
+      >
+        <div
+          className={barClasses}
+          style={{ width: `${percentage}%` }}
+        >
+          {(showPercentage || (displayLabel && !showLabel)) && (
+            <span className="progress-value">{displayLabel}</span>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default Progress;