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

package/CHANGELOG.md

@@ -1,3 +1,23 @@
+# [1.0.0-beta.18](https://github.com/cloudinary-devs/create-cloudinary-react/compare/v1.0.0-beta.17...v1.0.0-beta.18) (2026-02-18)
+
+
+### Bug Fixes
+
+* update registration link ([2a69d7a](https://github.com/cloudinary-devs/create-cloudinary-react/commit/2a69d7ada9de1cb2751bbd4c1d344422b4c2dd5e))
+* update video player example ([9db39ee](https://github.com/cloudinary-devs/create-cloudinary-react/commit/9db39ee8fc149c748ea422544a79b45a60365f47))
+
+# [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/README.md

@@ -10,7 +10,7 @@ Scaffold a Cloudinary React + Vite + TypeScript project with interactive setup.
 
 - Node.js 18+ installed
 - A Cloudinary account (free tier available)
-  - [Sign up for free](https://cloudinary.com/users/register/free)
+  - [Sign up for free](https://cld.media/reactregister)
   - Your cloud name is in your [dashboard](https://console.cloudinary.com/app/home/dashboard)
 
 ## Usage

package/cli.js

@@ -70,7 +70,7 @@ async function main() {
   } else {
   
     console.log(chalk.cyan.bold('\n🚀 Cloudinary React + Vite\n'));
-    console.log(chalk.gray('💡 Need a Cloudinary account? Sign up for free: https://cloudinary.com/users/register/free\n'));
+    console.log(chalk.gray('💡 Need a Cloudinary account? Sign up for free: https://cld.media/reactregister\n'));
   
     const questions = [
       {
@@ -101,7 +101,7 @@ async function main() {
           if (!input.trim()) {
             return chalk.yellow(
               'Cloud name is required.\n' +
-              ' → Sign up: https://cloudinary.com/users/register/free\n' +
+              ' → Sign up: https://cld.media/reactregister\n' +
               ' → Find your cloud name: https://console.cloudinary.com/app/home/dashboard'
             );
           }

package/package.json

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

package/templates/.cursorrules.template

@@ -420,7 +420,8 @@ Use when the user asks for a **video player** (styled UI, controls, playlists).
 **Rule: imperative element only.** Do **not** pass a React-managed `<video ref={...} />` to the player — the library mutates the DOM and React will throw removeChild errors. Create the video element with `document.createElement('video')`, append it to a container ref, and pass that element to `videoPlayer(el, ...)`.
 
 - **Package**: `cloudinary-video-player`. Install with `npm install cloudinary-video-player` (no version).
-- **Import**: `import { videoPlayer } from 'cloudinary-video-player'` (named) and `import 'cloudinary-video-player/cld-video-player.min.css'` (no `dist/` in path).
+- **Import**: `import { videoPlayer } from 'cloudinary-video-player'` (named) and `import 'cloudinary-video-player/cld-video-player.min.css'` (no `dist/` in path). The package only exposes paths under `lib/` via `exports`; use `cld-video-player.min.css` (no `dist/`), which resolves to `lib/cld-video-player.min.css`.
+- ❌ **WRONG**: `import 'cloudinary-video-player/dist/cld-video-player.min.css'` — package `exports` do not expose `dist/`; the valid path is `cloudinary-video-player/cld-video-player.min.css`.
 - **player.source()** takes an **object**: `player.source({ publicId: 'samples/elephants' })`. Not a string.
 - **Cleanup**: Call `player.dispose()`, then **only if** `el.parentNode` exists call `el.parentNode.removeChild(el)` (avoids NotFoundError).
 - **If init fails** (CSP, extensions, timing): render **AdvancedVideo** with the same publicId. Do not relax CSP in index.html or ask the user to disable extensions.

package/templates/README.md.template

@@ -11,7 +11,7 @@ npm run dev
 ## Cloudinary Setup
 
 This project uses Cloudinary for image management. If you don't have a Cloudinary account yet:
-- [Sign up for free](https://cloudinary.com/users/register/free)
+- [Sign up for free](https://cld.media/reactregister)
 - Find your cloud name in your [dashboard](https://console.cloudinary.com/app/home/dashboard)
 
 ## Environment Variables

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>