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

package/CHANGELOG.md

@@ -1,3 +1,24 @@
+# [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)
+
+
+### Bug Fixes
+
+* add copy on click ([a4ecf5d](https://github.com/cloudinary-devs/create-cloudinary-react/commit/a4ecf5d1d1478d854683a115735fa71f7fb50cea))
+* complete the sentance ([d6c68dd](https://github.com/cloudinary-devs/create-cloudinary-react/commit/d6c68ddc213fbc18771f26840f33edb805950799))
+* remove upload question ([fbf01ae](https://github.com/cloudinary-devs/create-cloudinary-react/commit/fbf01ae696e158cab48feb053a3515bb21453fdd))
+
 # [1.0.0-beta.15](https://github.com/cloudinary-devs/create-cloudinary-react/compare/v1.0.0-beta.14...v1.0.0-beta.15) (2026-02-10)
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-cloudinary-react",
-  "version": "1.0.0-beta.15",
+  "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

@@ -90,7 +90,8 @@ h2 {
   font-size: 0.9rem;
   transition: all 0.2s;
   user-select: text;
-  cursor: 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,6 +37,17 @@ function App() {
     alert(`Upload failed: ${error.message}`);
   };
 
+  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
   const imageId = uploadedImageId || 'samples/people/bicycle';
   
@@ -70,21 +93,16 @@ function App() {
             <strong>Copy and paste</strong> one of these prompts into your AI assistant:
           </p>
           <ul className="prompts-list">
-            {hasUploadPreset ? (
-              <>
-                <li>Upload an image to my account</li>
-                <li>Create an image gallery with lazy loading and responsive images</li>
-                <li>Create a video player that plays a Cloudinary video</li>
-                <li>Add image overlays with text or logos</li>
-              </>
-            ) : (
-              <>
-                <li>Let&apos;s try uploading — help me add an upload preset and upload widget</li>
-                <li>Create an image gallery with lazy loading and responsive</li>
-                <li>Create a video player that plays a Cloudinary video</li>
-                <li>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>