create-cloudinary-react 1.0.0-beta.1

package/templates/src/App.css.template

@@ -0,0 +1,94 @@
+.app {
+  min-height: 100vh;
+  padding: 2rem;
+  max-width: 1200px;
+  margin: 0 auto;
+}
+
+.main-content {
+  display: flex;
+  flex-direction: column;
+  gap: 2rem;
+  align-items: center;
+}
+
+h1 {
+  font-size: 2.5rem;
+  margin: 0;
+  text-align: center;
+}
+
+h2 {
+  font-size: 1.5rem;
+  margin: 0 0 1rem 0;
+}
+
+.upload-section,
+.image-section {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 2rem;
+  background: rgba(255, 255, 255, 0.05);
+  border-radius: 1rem;
+}
+
+.display-image {
+  max-width: 100%;
+  height: auto;
+  border-radius: 0.5rem;
+  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+}
+
+.image-info {
+  margin-top: 1rem;
+  font-size: 0.875rem;
+  color: rgba(255, 255, 255, 0.7);
+  font-family: monospace;
+}
+
+.ai-prompts-section {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 2rem;
+  background: rgba(99, 102, 241, 0.1);
+  border-radius: 1rem;
+  border: 1px solid rgba(99, 102, 241, 0.3);
+}
+
+.prompts-intro {
+  margin: 0.5rem 0 1rem 0;
+  color: rgba(255, 255, 255, 0.8);
+  text-align: center;
+}
+
+.prompts-list {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+  width: 100%;
+  max-width: 600px;
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+}
+
+.prompts-list li {
+  padding: 0.75rem 1rem;
+  background: rgba(255, 255, 255, 0.05);
+  border-radius: 0.5rem;
+  border-left: 3px solid rgba(99, 102, 241, 0.5);
+  color: rgba(255, 255, 255, 0.9);
+  font-size: 0.9rem;
+  transition: all 0.2s;
+  cursor: pointer;
+}
+
+.prompts-list li:hover {
+  background: rgba(255, 255, 255, 0.1);
+  border-left-color: rgba(99, 102, 241, 0.8);
+  transform: translateX(4px);
+}

package/templates/src/App.tsx.template

@@ -0,0 +1,80 @@
+import { useState } from 'react';
+import { AdvancedImage, placeholder, lazyload } from '@cloudinary/react';
+import { fill } from '@cloudinary/url-gen/actions/resize';
+import { format, quality } from '@cloudinary/url-gen/actions/delivery';
+import { auto } from '@cloudinary/url-gen/qualifiers/format';
+import { auto as autoQuality } from '@cloudinary/url-gen/qualifiers/quality';
+import { cld } from './cloudinary/config';
+import { UploadWidget } from './cloudinary/UploadWidget';
+import './App.css';
+
+function App() {
+  const [uploadedImageId, setUploadedImageId] = useState<string | null>(null);
+
+  const handleUploadSuccess = (result: any) => {
+    console.log('Upload successful:', result);
+    setUploadedImageId(result.public_id);
+  };
+
+  const handleUploadError = (error: Error) => {
+    console.error('Upload error:', error);
+    alert(`Upload failed: ${error.message}`);
+  };
+
+  // Display uploaded image if available, otherwise show a sample
+  const imageId = uploadedImageId || 'samples/cloudinary-icon';
+  
+  const displayImage = cld
+    .image(imageId)
+    .resize(fill().width(600).height(400))
+    .delivery(format(auto()))
+    .delivery(quality(autoQuality()));
+
+  return (
+    <div className="app">
+      <main className="main-content">
+        <h1>Cloudinary React + Vite Boilerplate</h1>
+        <p>This is a ready-to-use development environment with Cloudinary integration.</p>
+        
+        <div className="upload-section">
+          <h2>Upload an Image</h2>
+          <UploadWidget
+            onUploadSuccess={handleUploadSuccess}
+            onUploadError={handleUploadError}
+            buttonText="Upload Image"
+          />
+        </div>
+
+        <div className="image-section">
+          <h2>Display Image</h2>
+          <AdvancedImage
+            cldImg={displayImage}
+            plugins={[placeholder({ mode: 'blur' }), lazyload()]}
+            alt={uploadedImageId ? 'Your uploaded image' : 'Sample image'}
+            className="display-image"
+          />
+          {uploadedImageId && (
+            <p className="image-info">Public ID: {uploadedImageId}</p>
+          )}
+        </div>
+
+        <div className="ai-prompts-section">
+          <h2>🤖 Try Asking Your AI Assistant</h2>
+          <p className="prompts-intro">Here are some Cloudinary-related tasks you can try:</p>
+          <ul className="prompts-list">
+            <li>"Add responsive image transformations with breakpoints"</li>
+            <li>"Create a video player component with Cloudinary"</li>
+            <li>"Add image effects like blur, grayscale, or sepia"</li>
+            <li>"Implement automatic image cropping with face detection"</li>
+            <li>"Add image overlays with text or logos"</li>
+            <li>"Create an image gallery with lazy loading"</li>
+            <li>"Add image optimization with format and quality auto"</li>
+            <li>"Implement image transformations based on screen size"</li>
+          </ul>
+        </div>
+      </main>
+    </div>
+  );
+}
+
+export default App;

package/templates/src/cloudinary/UploadWidget.tsx.template

@@ -0,0 +1,112 @@
+import { useEffect, useRef } from 'react';
+import { uploadPreset } from './config';
+
+interface UploadWidgetProps {
+  onUploadSuccess?: (result: any) => void;
+  onUploadError?: (error: Error) => void;
+  buttonText?: string;
+  className?: string;
+}
+
+declare global {
+  interface Window {
+    cloudinary: any;
+  }
+}
+
+export function UploadWidget({
+  onUploadSuccess,
+  onUploadError,
+  buttonText = 'Upload Image',
+  className = '',
+}: UploadWidgetProps) {
+  const widgetRef = useRef<any>(null);
+  const buttonRef = useRef<HTMLButtonElement>(null);
+
+  useEffect(() => {
+    // Load Cloudinary Upload Widget script
+    if (!window.cloudinary) {
+      const script = document.createElement('script');
+      script.src = 'https://upload-widget.cloudinary.com/global/all.js';
+      script.async = true;
+      document.body.appendChild(script);
+
+      script.onload = () => {
+        initializeWidget();
+      };
+    } else {
+      initializeWidget();
+    }
+
+    function initializeWidget() {
+      if (!window.cloudinary || !buttonRef.current) return;
+
+      if (!uploadPreset) {
+        console.warn(
+          'VITE_CLOUDINARY_UPLOAD_PRESET is not set. ' +
+          'Create an unsigned upload preset in your Cloudinary dashboard.'
+        );
+      }
+
+      widgetRef.current = window.cloudinary.createUploadWidget(
+        {
+          cloudName: import.meta.env.VITE_CLOUDINARY_CLOUD_NAME,
+          uploadPreset: uploadPreset || undefined,
+          sources: ['local', 'camera', 'url'],
+          multiple: false,
+        },
+        (error: any, result: any) => {
+          if (error) {
+            console.error('Upload error:', error);
+            onUploadError?.(new Error(error.message || 'Upload failed'));
+            return;
+          }
+
+          if (result && result.event === 'success') {
+            console.log('Upload success:', result.info);
+            onUploadSuccess?.(result.info);
+          }
+        }
+      );
+
+      buttonRef.current.addEventListener('click', () => {
+        widgetRef.current?.open();
+      });
+    }
+
+    return () => {
+      if (buttonRef.current && widgetRef.current) {
+        buttonRef.current.removeEventListener('click', () => {
+          widgetRef.current?.open();
+        });
+      }
+    };
+  }, [onUploadSuccess, onUploadError]);
+
+  return (
+    <button
+      ref={buttonRef}
+      type="button"
+      className={className}
+      style={{
+        padding: '0.75rem 1.5rem',
+        fontSize: '1rem',
+        fontWeight: 500,
+        color: 'white',
+        backgroundColor: '#6366f1',
+        border: 'none',
+        borderRadius: '0.5rem',
+        cursor: 'pointer',
+        transition: 'background-color 0.2s',
+      }}
+      onMouseEnter={(e) => {
+        e.currentTarget.style.backgroundColor = '#4f46e5';
+      }}
+      onMouseLeave={(e) => {
+        e.currentTarget.style.backgroundColor = '#6366f1';
+      }}
+    >
+      {buttonText}
+    </button>
+  );
+}

package/templates/src/cloudinary/config.ts.template

@@ -0,0 +1,21 @@
+import { Cloudinary } from '@cloudinary/url-gen';
+
+// Get environment variables - Vite requires VITE_ prefix
+const cloudName = import.meta.env.VITE_CLOUDINARY_CLOUD_NAME;
+
+if (!cloudName) {
+  throw new Error(
+    'VITE_CLOUDINARY_CLOUD_NAME is not set. Please create a .env file with your Cloudinary cloud name.\n' +
+    'See .env.example for reference.'
+  );
+}
+
+// Create and export Cloudinary instance
+export const cld = new Cloudinary({
+  cloud: {
+    cloudName: cloudName,
+  },
+});
+
+// Export upload preset for convenience
+export const uploadPreset = import.meta.env.VITE_CLOUDINARY_UPLOAD_PRESET || '';

package/templates/src/index.css.template

@@ -0,0 +1,29 @@
+:root {
+  font-family: system-ui, Avenir, Helvetica, Arial, sans-serif;
+  line-height: 1.5;
+  font-weight: 400;
+
+  color-scheme: light dark;
+  color: rgba(255, 255, 255, 0.87);
+  background-color: #242424;
+
+  font-synthesis: none;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+* {
+  box-sizing: border-box;
+}
+
+body {
+  margin: 0;
+  min-width: 320px;
+  min-height: 100vh;
+}
+
+#root {
+  width: 100%;
+  min-height: 100vh;
+}

package/templates/src/main.tsx.template

@@ -0,0 +1,10 @@
+import { StrictMode } from 'react'
+import { createRoot } from 'react-dom/client'
+import './index.css'
+import App from './App.tsx'
+
+createRoot(document.getElementById('root')!).render(
+  <StrictMode>
+    <App />
+  </StrictMode>,
+)

package/templates/tsconfig.app.json.template

@@ -0,0 +1,24 @@
+{
+  "compilerOptions": {
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
+    "target": "ES2022",
+    "useDefineForClassFields": true,
+    "lib": ["ES2022", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "types": ["vite/client"],
+    "skipLibCheck": true,
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "verbatimModuleSyntax": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+    "jsx": "react-jsx",
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "erasableSyntaxOnly": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUncheckedSideEffectImports": true
+  },
+  "include": ["src"]
+}

package/templates/tsconfig.json.template

@@ -0,0 +1,7 @@
+{
+  "files": [],
+  "references": [
+    { "path": "./tsconfig.app.json" },
+    { "path": "./tsconfig.node.json" }
+  ]
+}

package/templates/tsconfig.node.json.template

@@ -0,0 +1,22 @@
+{
+  "compilerOptions": {
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
+    "target": "ES2023",
+    "lib": ["ES2023"],
+    "module": "ESNext",
+    "types": ["node"],
+    "skipLibCheck": true,
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "verbatimModuleSyntax": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "erasableSyntaxOnly": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUncheckedSideEffectImports": true
+  },
+  "include": ["vite.config.ts"]
+}

package/templates/vite.config.ts.template

@@ -0,0 +1,7 @@
+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react'
+
+// https://vite.dev/config/
+export default defineConfig({
+  plugins: [react()],
+})