create-cloudinary-react 1.0.0-beta.16 → 1.0.0-beta.17

package/CHANGELOG.md

@@ -1,3 +1,15 @@
+# [1.0.0-beta.17](https://github.com/cloudinary-devs/create-cloudinary-react/compare/v1.0.0-beta.16...v1.0.0-beta.17) (2026-02-12)
+
+
+### Bug Fixes
+
+* simplified questions into arrays ([bade600](https://github.com/cloudinary-devs/create-cloudinary-react/commit/bade600ee63de7a7c3d8eec40569f8896f96a7bd))
+
+
+### Features
+
+* prompt copied animation ([9ad35b2](https://github.com/cloudinary-devs/create-cloudinary-react/commit/9ad35b2351a69bca6d4dcd716b10a1508d5228a8))
+
 # [1.0.0-beta.16](https://github.com/cloudinary-devs/create-cloudinary-react/compare/v1.0.0-beta.15...v1.0.0-beta.16) (2026-02-11)
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-cloudinary-react",
-  "version": "1.0.0-beta.16",
+  "version": "1.0.0-beta.17",
   "description": "Scaffold a Cloudinary React + Vite + TypeScript project with interactive setup",
   "type": "module",
   "bin": {

package/templates/src/App.css.template

@@ -91,6 +91,7 @@ h2 {
   transition: all 0.2s;
   user-select: text;
   cursor: pointer;
+  position: relative;
 }
 
 .prompts-list li:hover {
@@ -98,3 +99,67 @@ h2 {
   border-left-color: rgba(99, 102, 241, 0.8);
   transform: translateX(4px);
 }
+
+@keyframes wipe-in-out {
+  0% {
+    clip-path: polygon(
+      0% 0%,
+      0% 100%, 
+      0% 100%,
+      0% 0%
+    );
+  }
+  15% {
+    clip-path: polygon(
+      0% 0%,
+      0% 100%, 
+      100% 100%,
+      100% 0%
+    );
+  }
+  85% {
+    clip-path: polygon(
+      0% 0%,
+      0% 100%, 
+      100% 100%,
+      100% 0%
+    );
+  }
+  100% {
+    clip-path: polygon(
+      100% 0%,
+      100% 100%, 
+      100% 100%,
+      100% 0%
+    );
+  }
+}
+
+.prompts-list li::after {
+  content: '✓ copied';
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  background-color: green;
+  border-radius: 0.5rem;
+  visibility: hidden;
+  padding-top: 0.75em;
+  padding-left: 1em;
+  
+  /* without this it sometimes glitched at the end? */
+  clip-path: polygon(
+    0% 0%,
+    0% 100%, 
+    0% 100%,
+    0% 0%
+  );
+
+}
+
+.prompts-list li.clicked::after {
+  visibility: visible;
+  animation-duration: 1.5s;
+  animation-name: wipe-in-out;
+}

package/templates/src/App.tsx.template

@@ -12,8 +12,20 @@ import './App.css';
 
 const hasUploadPreset = Boolean(uploadPreset);
 
+const PROMPTS_WITH_UPLOAD = [
+  'Create an image gallery with lazy loading and responsive images',
+  'Create a video player that plays a Cloudinary video',
+  'Add image overlays with text or logos',
+];
+
+const PROMPTS_WITHOUT_UPLOAD = [
+  "Let's try uploading — help me add an upload preset and upload widget",
+  ...PROMPTS_WITH_UPLOAD,
+];
+
 function App() {
   const [uploadedImageId, setUploadedImageId] = useState<string | null>(null);
+  const [clickedIds, setClickedIds] = useState(new Set<number>());
 
   const handleUploadSuccess = (result: CloudinaryUploadResult) => {
     console.log('Upload successful:', result);
@@ -25,9 +37,15 @@ function App() {
     alert(`Upload failed: ${error.message}`);
   };
 
-  const copyPrompt = (e: React.MouseEvent<HTMLLIElement>) => {
-    const text = e.currentTarget.textContent ?? '';
-    void navigator.clipboard.writeText(text);
+  const copyPrompt = (text: string, id: number) => {
+    void navigator.clipboard.writeText(text).then(() => {
+      setClickedIds((prev) => new Set(prev).add(id));
+      setTimeout(() => setClickedIds( (prev) => {
+        const next = new Set(prev);
+        next.delete(id);
+        return next;
+      }), 2000);
+    });
   };
 
   // Display uploaded image if available, otherwise show a sample
@@ -75,20 +93,16 @@ function App() {
             <strong>Copy and paste</strong> one of these prompts into your AI assistant:
           </p>
           <ul className="prompts-list">
-            {hasUploadPreset ? (
-              <>
-                <li onClick={copyPrompt} title="Click to copy">Create an image gallery with lazy loading and responsive images</li>
-                <li onClick={copyPrompt} title="Click to copy">Create a video player that plays a Cloudinary video</li>
-                <li onClick={copyPrompt} title="Click to copy">Add image overlays with text or logos</li>
-              </>
-            ) : (
-              <>
-                <li onClick={copyPrompt} title="Click to copy">Let&apos;s try uploading — help me add an upload preset and upload widget</li>
-                <li onClick={copyPrompt} title="Click to copy">Create an image gallery with lazy loading and responsive images</li>
-                <li onClick={copyPrompt} title="Click to copy">Create a video player that plays a Cloudinary video</li>
-                <li onClick={copyPrompt} title="Click to copy">Add image overlays with text or logos</li>
-              </>
-            )}
+            {(hasUploadPreset ? PROMPTS_WITH_UPLOAD : PROMPTS_WITHOUT_UPLOAD).map((text, i) => (
+              <li
+                key={i}
+                onClick={() => copyPrompt(text, i)}
+                title="Click to copy"
+                className={clickedIds.has(i) ? 'clicked' : ''}
+              >
+                {text}
+              </li>
+            ))}
           </ul>
         </div>
       </main>