@fils/sanity-components 0.1.0 → 0.1.2

package/HOSTED.md

@@ -0,0 +1,205 @@
+# Sanity Dashboard Widgets
+
+Collection of custom Sanity Studio dashboard widgets for deployment automation.
+
+## Components
+
+### DeployButton
+A deployment button that triggers GitHub Actions workflows and monitors their status.
+
+**Features:**
+- Triggers GitHub Actions via repository dispatch
+- Real-time workflow status monitoring
+- Fast polling (3-second intervals)
+- Retry logic for workflow detection
+- Success/error state handling
+- Links to live deployment
+
+**Props:**
+```typescript
+interface DeployButtonProps {
+  config: {
+    owner: string;          // GitHub org/user
+    repo: string;           // Repository name
+    token?: string;         // Optional: hardcoded token (use secrets instead)
+    branch?: string;        // Default: 'main'
+    eventType?: string;     // Default: 'deploy-site'
+  };
+  title?: string;           // Default: '🚀 Site Deployment'
+  deploymentUrl?: string;   // Optional: URL to deployed site
+  environment?: string;     // Default: 'production'
+  secretsNamespace?: string; // Default: 'deployButton'
+  secretKey?: string;       // Default: 'github_token'
+}
+```
+
+### GitHubTokenConfig
+Configuration widget for managing GitHub tokens (dev-only).
+
+**Props:**
+```typescript
+interface TokenConfigProps {
+  title?: string;           // Default: '🔐 GitHub Token Configuration'
+  description?: string;     // Custom description text
+  secretsNamespace?: string; // Default: 'deployButton'
+  secretKey?: string;       // Default: 'github_token'
+  environment?: string;     // Default: 'production'
+}
+```
+
+## Environment Utilities
+
+**envUtils.ts** provides helpers for conditional rendering:
+
+```typescript
+import { isDevelopment, isProduction, withDevOnly } from './envUtils';
+
+// Check environment
+if (isDevelopment()) {
+  // Show dev tools
+}
+
+// Wrap components
+const DevOnlyWidget = withDevOnly(GitHubTokenConfig);
+```
+
+## Usage
+
+### Basic Setup
+
+1. **Install dependencies:**
+```bash
+npm install @sanity/dashboard @sanity/studio-secrets
+```
+
+2. **Add to your dashboard config:**
+
+```typescript
+import { isDevelopment } from './envUtils';
+import DeployButton from './DeployButton';
+import GitHubTokenConfig from './GitHubTokenConfig';
+
+export default {
+  widgets: [
+    // Production deploy button (always visible)
+    {
+      name: 'deploy-prod',
+      component: DeployButton,
+      options: {
+        config: {
+          owner: 'your-org',
+          repo: 'your-repo',
+          branch: 'main'
+        },
+        title: '🚀 Deploy to Production',
+        deploymentUrl: 'https://your-site.com',
+        environment: 'production'
+      }
+    },
+    
+    // Token config (dev only)
+    ...(isDevelopment() ? [
+      {
+        name: 'github-config',
+        component: GitHubTokenConfig
+      }
+    ] : [])
+  ]
+};
+```
+
+### GitHub Setup
+
+1. **Create a Personal Access Token:**
+   - Go to GitHub Settings → Developer settings → Personal access tokens
+   - Generate new token (classic)
+   - Select scopes: `repo` (for private repos) or `public_repo` (for public)
+   - Copy the token
+
+2. **Configure in Sanity:**
+   - In local dev, the GitHubTokenConfig widget will appear
+   - Paste your token
+   - Save
+
+3. **Create GitHub Workflow:**
+
+```yaml
+# .github/workflows/deploy.yml
+name: Deploy Site
+
+on:
+  repository_dispatch:
+    types: [deploy-site]
+
+jobs:
+  deploy:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+      
+      - name: Deploy to AWS
+        run: |
+          # Your deployment script
+          echo "Deploying to ${{ github.event.client_payload.environment }}"
+          # ... your AWS deploy commands
+```
+
+### Conditional Dev Tools
+
+Hide sensitive tools from clients:
+
+```typescript
+const dashboardConfig = {
+  widgets: [
+    // Always visible
+    { name: 'deploy', component: DeployButton, options: {...} },
+    
+    // Dev only
+    ...(isDevelopment() ? [
+      { name: 'token-config', component: GitHubTokenConfig },
+      { name: 'vision', component: VisionTool },
+      { name: 'debug-panel', component: DebugPanel }
+    ] : [])
+  ]
+};
+```
+
+## Environment Detection
+
+The `isDevelopment()` function checks:
+1. `window.location.hostname` for localhost/127.0.0.1/192.168.x.x
+2. `process.env.NODE_ENV === 'development'`
+
+This means:
+- ✅ Local dev: widgets visible
+- ❌ Production deploy: widgets hidden
+- ❌ Client access: widgets hidden
+
+## Security Notes
+
+- **Never commit tokens** to your repository
+- Use Sanity Studio Secrets to store tokens securely
+- Tokens are stored in your Sanity project dataset
+- Each user can configure their own token in local dev
+- Production deployments should use GitHub Actions secrets, not personal tokens
+
+## Troubleshooting
+
+**"Could not find workflow run"**
+- Check that your workflow file exists
+- Verify the `eventType` matches your workflow's `repository_dispatch.types`
+- Ensure the token has correct permissions
+
+**"GitHub API delays"**
+- The GitHub Actions API can lag 10-30 seconds behind the UI
+- This is normal and expected
+- The widget polls every 3 seconds for updates
+
+**"CORS errors"**
+- Make sure you're not adding custom cache headers
+- GitHub's API has strict CORS policies
+- The widget handles this correctly
+
+## License
+
+MIT

package/lib/components/deploy/DeployButton.d.ts

@@ -0,0 +1,23 @@
+/**
+ * Fil's Hosted Deploy Button
+ * Dependencies: React, @sanity/ui, @sanity/icons, @sanity/studio-secrets
+ * Recommended to use inside the dashboard
+ * Uses studio secrets to store Github token
+ */
+interface DeployButtonConfig {
+    owner: string;
+    repo: string;
+    token?: string;
+    branch?: string;
+    eventType?: string;
+}
+interface DeployButtonProps {
+    config: DeployButtonConfig;
+    title?: string;
+    deploymentUrl?: string;
+    environment?: string;
+    secretsNamespace?: string;
+    secretKey?: string;
+}
+declare const DeployButton: ({ config, title, deploymentUrl, environment, secretsNamespace, secretKey }: DeployButtonProps) => import("react/jsx-runtime").JSX.Element;
+export default DeployButton;

package/lib/components/deploy/DeployButton.js

@@ -0,0 +1,246 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useEffect, useRef } from 'react';
+import { Button, Card, Stack, Text, Spinner, Flex } from '@sanity/ui';
+import { PlayIcon, CheckmarkIcon, CloseIcon } from '@sanity/icons';
+import { useSecrets, SettingsView } from '@sanity/studio-secrets';
+const DeployButton = ({ config, title = "🚀 Site Deployment", deploymentUrl, environment = "production", secretsNamespace = "deployButton", secretKey = "github_token" }) => {
+    // ... rest of code
+    // ALL HOOKS MUST BE CALLED FIRST - NEVER CONDITIONALLY
+    const [deployState, setDeployState] = useState('idle');
+    const [message, setMessage] = useState('');
+    const [showSettings, setShowSettings] = useState(false);
+    const intervalRef = useRef(null);
+    const monitoringRef = useRef(false);
+    // Use Sanity secrets - ALWAYS call this hook
+    const { secrets } = useSecrets(secretsNamespace);
+    const token = secrets?.[secretKey];
+    // Get the effective token (secrets take priority over config)
+    const effectiveToken = token || config?.token;
+    // Only show settings if we don't have a token AND we have valid config
+    useEffect(() => {
+        if (!effectiveToken && config?.owner && config?.repo && !showSettings) {
+            setShowSettings(true);
+        }
+        else if (effectiveToken && showSettings) {
+            // Close settings if we now have a token
+            setShowSettings(false);
+        }
+    }, [effectiveToken, config?.owner, config?.repo, showSettings]);
+    // Clean up on unmount
+    useEffect(() => {
+        return () => {
+            if (intervalRef.current) {
+                clearInterval(intervalRef.current);
+                intervalRef.current = null;
+            }
+        };
+    }, []);
+    // Plugin config for secrets
+    const pluginConfigKeys = [
+        {
+            key: secretKey,
+            title: `GitHub Token for ${environment}`,
+            description: `Personal access token for ${config?.owner}/${config?.repo} deployment`,
+            type: 'string',
+            inputType: 'password'
+        }
+    ];
+    // Poll workflow status
+    const pollWorkflowStatus = async (runId) => {
+        try {
+            console.log('Polling workflow:', runId);
+            const cacheBuster = `_=${Date.now()}`;
+            const response = await fetch(`https://api.github.com/repos/${config.owner}/${config.repo}/actions/runs/${runId}?${cacheBuster}`, {
+                headers: {
+                    'Authorization': `token ${effectiveToken}`,
+                    'Accept': 'application/vnd.github.v3+json'
+                }
+            });
+            if (!response.ok) {
+                throw new Error(`HTTP ${response.status}`);
+            }
+            const run = await response.json();
+            console.log('Run status:', run.status, 'conclusion:', run.conclusion);
+            if (run.status === 'completed') {
+                // Stop polling
+                if (intervalRef.current) {
+                    clearInterval(intervalRef.current);
+                    intervalRef.current = null;
+                }
+                monitoringRef.current = false;
+                if (run.conclusion === 'success') {
+                    setDeployState('success');
+                    setMessage('🎉 Deployment completed successfully!');
+                }
+                else {
+                    setDeployState('error');
+                    setMessage(`❌ Deployment failed: ${run.conclusion}`);
+                }
+            }
+            else if (run.status === 'in_progress' || run.status === 'queued') {
+                const startTime = new Date(run.run_started_at || run.created_at);
+                const elapsed = Math.floor((Date.now() - startTime.getTime()) / 1000);
+                setDeployState('deploying');
+                setMessage(`🔄 Deployment running... (${elapsed}s)`);
+            }
+        }
+        catch (error) {
+            console.error('Polling error:', error);
+        }
+    };
+    // Find the workflow run with retry logic
+    const findWorkflowRun = async (retryCount = 0) => {
+        const maxRetries = 6; // Try for 30 seconds (5s * 6)
+        try {
+            console.log(`Looking for workflow run... (attempt ${retryCount + 1}/${maxRetries})`);
+            const cacheBuster = `_=${Date.now()}`;
+            const response = await fetch(`https://api.github.com/repos/${config.owner}/${config.repo}/actions/runs?per_page=10&${cacheBuster}`, {
+                headers: {
+                    'Authorization': `token ${effectiveToken}`,
+                    'Accept': 'application/vnd.github.v3+json'
+                }
+            });
+            if (!response.ok) {
+                throw new Error(`HTTP ${response.status}`);
+            }
+            const data = await response.json();
+            console.log('Found runs:', data.workflow_runs.length);
+            // Find the most recent run (within last 90 seconds)
+            const recentRun = data.workflow_runs.find(run => {
+                const ageInSeconds = (Date.now() - new Date(run.created_at).getTime()) / 1000;
+                console.log(`Run ${run.id}: age ${ageInSeconds}s, event: ${run.event}, status: ${run.status}`);
+                return ageInSeconds < 90;
+            });
+            if (recentRun) {
+                console.log('Found recent run:', recentRun.id, 'Event:', recentRun.event);
+                setDeployState('deploying');
+                setMessage('🚀 Deployment started...');
+                // Start polling every 3 seconds (faster response)
+                intervalRef.current = setInterval(() => {
+                    pollWorkflowStatus(recentRun.id);
+                }, 3000);
+                // Initial poll
+                pollWorkflowStatus(recentRun.id);
+            }
+            else if (retryCount < maxRetries) {
+                // Retry after 5 seconds
+                console.log(`Workflow not found yet, retrying in 5s... (${retryCount + 1}/${maxRetries})`);
+                setMessage(`⏳ Waiting for workflow to start... (${retryCount + 1}/${maxRetries})`);
+                setTimeout(() => {
+                    findWorkflowRun(retryCount + 1);
+                }, 5000);
+            }
+            else {
+                console.log('No recent workflow found after retries');
+                setDeployState('error');
+                setMessage('❌ Could not find workflow run - check if workflow exists');
+                monitoringRef.current = false;
+            }
+        }
+        catch (error) {
+            console.error('Error finding workflow:', error);
+            const errorMessage = error instanceof Error ? error.message : 'Unknown error';
+            if (retryCount < maxRetries) {
+                console.log(`Error finding workflow, retrying... (${retryCount + 1}/${maxRetries})`);
+                setTimeout(() => {
+                    findWorkflowRun(retryCount + 1);
+                }, 5000);
+            }
+            else {
+                setDeployState('error');
+                setMessage(`❌ Error finding workflow: ${errorMessage}`);
+                monitoringRef.current = false;
+            }
+        }
+    };
+    const triggerDeploy = async () => {
+        // Prevent multiple deployments
+        if (deployState !== 'idle' && deployState !== 'success' && deployState !== 'error')
+            return;
+        setDeployState('triggering');
+        setMessage('⚡ Triggering deployment...');
+        try {
+            console.log('Triggering deployment...');
+            const response = await fetch(`https://api.github.com/repos/${config.owner}/${config.repo}/dispatches`, {
+                method: 'POST',
+                headers: {
+                    'Authorization': `token ${effectiveToken}`,
+                    'Accept': 'application/vnd.github.v3+json',
+                    'Content-Type': 'application/json'
+                },
+                body: JSON.stringify({
+                    event_type: config.eventType || 'deploy-site',
+                    client_payload: {
+                        environment: environment,
+                        triggered_by: 'sanity_studio',
+                        timestamp: new Date().toISOString()
+                    }
+                })
+            });
+            if (response.ok) {
+                console.log('Deployment triggered successfully');
+                setMessage('✅ Deployment triggered! Looking for workflow...');
+                // Wait 5 seconds then look for the workflow
+                setTimeout(() => {
+                    if (!monitoringRef.current) {
+                        monitoringRef.current = true;
+                        findWorkflowRun();
+                    }
+                }, 5000);
+            }
+            else {
+                const error = await response.json();
+                throw new Error(error.message || `HTTP ${response.status}`);
+            }
+        }
+        catch (error) {
+            console.error('Deploy trigger failed:', error);
+            const errorMessage = error instanceof Error ? error.message : 'Unknown error';
+            setDeployState('error');
+            setMessage(`❌ Failed to trigger: ${errorMessage}`);
+        }
+    };
+    const getButtonProps = () => {
+        switch (deployState) {
+            case 'triggering':
+                return { tone: 'primary', disabled: true, icon: Spinner, text: 'Triggering...' };
+            case 'deploying':
+                return { tone: 'primary', disabled: true, icon: Spinner, text: 'Deploying...' };
+            case 'success':
+                return { tone: 'positive', disabled: false, icon: CheckmarkIcon, text: 'Deploy Again' };
+            case 'error':
+                return { tone: 'critical', disabled: false, icon: CloseIcon, text: 'Try Again' };
+            default:
+                return { tone: 'primary', disabled: false, icon: PlayIcon, text: 'Deploy Site' };
+        }
+    };
+    // NOW WE CAN HANDLE CONDITIONAL RENDERING AFTER ALL HOOKS
+    // Check for missing config
+    if (!config || !config.owner || !config.repo) {
+        return (_jsx(Card, { padding: 4, radius: 2, shadow: 1, tone: "critical", children: _jsxs(Stack, { space: 3, children: [_jsx(Text, { size: 2, weight: "semibold", children: "\u274C Deploy Button Configuration Error" }), _jsx(Text, { size: 1, children: "Missing required config: owner and repo are required" })] }) }));
+    }
+    // If showing settings, render the settings view
+    if (showSettings && !effectiveToken) {
+        return (_jsx(Card, { padding: 4, radius: 2, shadow: 1, children: _jsxs(Stack, { space: 3, children: [_jsxs(Text, { size: 2, weight: "semibold", children: ["\uD83D\uDD10 ", title, " - Setup Required"] }), _jsx(Text, { size: 1, muted: true, children: "Please configure your GitHub token to enable deployments." }), _jsx(SettingsView, { title: `${title} Configuration`, namespace: secretsNamespace, keys: pluginConfigKeys, onClose: () => {
+                            setShowSettings(false);
+                        } })] }) }));
+    }
+    // Check for missing token after settings
+    if (!effectiveToken) {
+        return (_jsx(Card, { padding: 4, radius: 2, shadow: 1, tone: "critical", children: _jsxs(Stack, { space: 3, children: [_jsx(Text, { size: 2, weight: "semibold", children: "\u274C Authentication Required" }), _jsx(Text, { size: 1, children: "No GitHub token configured." }), _jsx(Button, { tone: "primary", mode: "ghost", size: 1, onClick: () => setShowSettings(true), children: "Configure Token" })] }) }));
+    }
+    const buttonProps = getButtonProps();
+    return (_jsx(Card, { padding: 4, radius: 2, shadow: 1, children: _jsxs(Stack, { space: 3, children: [_jsx(Text, { size: 2, weight: "semibold", children: title }), _jsx(Flex, { justify: "flex-start", children: _jsx(Button, { tone: buttonProps.tone, disabled: buttonProps.disabled, onClick: triggerDeploy, size: 3, style: {
+                            width: '100%',
+                            maxWidth: '360px',
+                        }, children: _jsxs(Flex, { align: "center", justify: "center", style: {
+                                gap: '6px',
+                                padding: '16px 0px 16px 0px'
+                            }, children: [buttonProps.icon && (_jsx("span", { style: {
+                                        display: 'flex',
+                                        alignItems: 'center',
+                                        fontSize: '16px',
+                                        lineHeight: '1'
+                                    }, children: _jsx(buttonProps.icon, {}) })), _jsx(Text, { size: 2, weight: "medium", style: { lineHeight: '1' }, children: buttonProps.text })] }) }) }), message && (_jsx(Card, { padding: 3, radius: 1, tone: deployState === 'error' ? 'critical' : deployState === 'success' ? 'positive' : 'primary', children: _jsx(Text, { size: 1, children: message }) })), deploymentUrl && deployState === 'success' && (_jsx(Button, { as: "a", href: deploymentUrl, target: "_blank", rel: "noopener noreferrer", tone: "primary", mode: "ghost", size: 3, children: "\uD83C\uDF10 View Live Site" })), _jsxs(Text, { size: 1, muted: true, children: ["Deploys from ", config.branch || 'main', " branch to ", environment] })] }) }));
+};
+export default DeployButton;

package/lib/components/deploy/EnvUtils.d.ts

@@ -0,0 +1,24 @@
+/**
+ * Environment Detection Utilities
+ * Helper functions to determine if we're in development mode
+ */
+/**
+ * Check if running in local development
+ * @returns true if in development, false otherwise
+ */
+export declare const isDevelopment: () => boolean;
+/**
+ * Check if running in production
+ * @returns true if in production, false otherwise
+ */
+export declare const isProduction: () => boolean;
+/**
+ * Conditionally render component only in development
+ * Usage: withDevOnly(MyComponent)
+ */
+export declare const withDevOnly: <P extends object>(Component: React.ComponentType<P>) => React.FC<P>;
+/**
+ * Conditionally render component only in production
+ * Usage: withProdOnly(MyComponent)
+ */
+export declare const withProdOnly: <P extends object>(Component: React.ComponentType<P>) => React.FC<P>;

package/lib/components/deploy/EnvUtils.js

@@ -0,0 +1,49 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * Environment Detection Utilities
+ * Helper functions to determine if we're in development mode
+ */
+/**
+ * Check if running in local development
+ * @returns true if in development, false otherwise
+ */
+export const isDevelopment = () => {
+    // Check for localhost
+    if (typeof window !== 'undefined') {
+        const hostname = window.location.hostname;
+        return hostname === 'localhost' || hostname === '127.0.0.1' || hostname.startsWith('192.168.');
+    }
+    // Fallback to NODE_ENV if available
+    return process.env.NODE_ENV === 'development';
+};
+/**
+ * Check if running in production
+ * @returns true if in production, false otherwise
+ */
+export const isProduction = () => {
+    return !isDevelopment();
+};
+/**
+ * Conditionally render component only in development
+ * Usage: withDevOnly(MyComponent)
+ */
+export const withDevOnly = (Component) => {
+    return (props) => {
+        if (!isDevelopment()) {
+            return null;
+        }
+        return _jsx(Component, { ...props });
+    };
+};
+/**
+ * Conditionally render component only in production
+ * Usage: withProdOnly(MyComponent)
+ */
+export const withProdOnly = (Component) => {
+    return (props) => {
+        if (!isProduction()) {
+            return null;
+        }
+        return _jsx(Component, { ...props });
+    };
+};

package/lib/components/deploy/GithubTokenConfig.d.ts

@@ -0,0 +1,14 @@
+/**
+ * GitHub Token Configuration Widget
+ * Only show this in local development environment
+ * Dependencies: React, @sanity/ui, @sanity/icons, @sanity/studio-secrets
+ */
+interface TokenConfigProps {
+    title?: string;
+    description?: string;
+    secretsNamespace?: string;
+    secretKey?: string;
+    environment?: string;
+}
+declare const GitHubTokenConfig: ({ title, description, secretsNamespace, secretKey, environment }: TokenConfigProps) => import("react/jsx-runtime").JSX.Element;
+export default GitHubTokenConfig;

package/lib/components/deploy/GithubTokenConfig.js

@@ -0,0 +1,29 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+import { Card, Stack, Text, Button } from '@sanity/ui';
+import { useSecrets, SettingsView } from '@sanity/studio-secrets';
+import { CogIcon } from '@sanity/icons';
+const GitHubTokenConfig = ({ title = "🔐 GitHub Token Configuration", description = "Configure your GitHub personal access token for deployment automation.", secretsNamespace = "deployButton", secretKey = "github_token", environment = "production" }) => {
+    const [showSettings, setShowSettings] = useState(false);
+    // Use Sanity secrets to check if token exists
+    const { secrets } = useSecrets(secretsNamespace);
+    const token = secrets?.[secretKey];
+    const hasToken = Boolean(token);
+    // Plugin config for secrets
+    const pluginConfigKeys = [
+        {
+            key: secretKey,
+            title: `GitHub Token for ${environment}`,
+            description: `Personal access token for GitHub Actions deployment`,
+            type: 'string',
+            inputType: 'password'
+        }
+    ];
+    if (showSettings) {
+        return (_jsx(Card, { padding: 4, radius: 2, shadow: 1, children: _jsxs(Stack, { space: 3, children: [_jsx(Text, { size: 2, weight: "semibold", children: title }), _jsx(SettingsView, { title: title, namespace: secretsNamespace, keys: pluginConfigKeys, onClose: () => {
+                            setShowSettings(false);
+                        } })] }) }));
+    }
+    return (_jsx(Card, { padding: 4, radius: 2, shadow: 1, children: _jsxs(Stack, { space: 3, children: [_jsx(Text, { size: 2, weight: "semibold", children: title }), _jsx(Text, { size: 1, muted: true, children: description }), _jsxs(Stack, { space: 2, children: [_jsxs(Text, { size: 1, children: ["Status: ", hasToken ? '✅ Token configured' : '⚠️ No token configured'] }), _jsx(Button, { tone: hasToken ? 'default' : 'primary', icon: CogIcon, onClick: () => setShowSettings(true), text: hasToken ? 'Update Token' : 'Configure Token' })] })] }) }));
+};
+export default GitHubTokenConfig;

package/lib/components/video/VideoSchemas.d.ts

@@ -52,7 +52,7 @@ export declare const VideoFileNoThumb: {
 };
 export declare const VideoURLNoThumb: {
     type: "object";
-    name: "videoFileNoThumb";
+    name: "videoURLNoThumb";
 } & Omit<import("sanity").ObjectDefinition, "preview"> & {
     preview?: import("sanity").PreviewConfig<Record<string, string>, Record<never, any>> | undefined;
 };

package/lib/components/video/VideoSchemas.js

@@ -176,7 +176,7 @@ export const VideoFileNoThumb = defineType({
     }
 });
 export const VideoURLNoThumb = defineType({
-    name: 'videoFileNoThumb',
+    name: 'videoURLNoThumb',
     type: 'object',
     title: 'Video URL',
     fields: [

package/lib/main.d.ts

@@ -1,5 +1,7 @@
 export * from './components/core/SEOImage';
 export * from './components/core/SEO';
 export * from './validators/utils';
-export * from './components/ui/DeployButton';
+export * from './components/deploy/EnvUtils';
+export * from './components/deploy/DeployButton';
+export * from './components/deploy/GithubTokenConfig';
 export * from './components/video/VideoSchemas';

package/lib/main.js

@@ -2,5 +2,7 @@ export * from './components/core/SEOImage';
 export * from './components/core/SEO';
 // export * from './config/utils';
 export * from './validators/utils';
-export * from './components/ui/DeployButton';
+export * from './components/deploy/EnvUtils';
+export * from './components/deploy/DeployButton';
+export * from './components/deploy/GithubTokenConfig';
 export * from './components/video/VideoSchemas';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fils/sanity-components",
-  "version": "0.1.0",
+  "version": "0.1.2",
   "description": "Fil's Components for Sanity Back-Ends",
   "repository": "git@github.com:fil-studio/fils.git",
   "author": "Fil Studio <hello@fil.studio>",

package/src/components/{ui → deploy}/DeployButton.tsx

@@ -102,8 +102,9 @@ const DeployButton = ({
     try {
       console.log('Polling workflow:', runId);
       
+      const cacheBuster = `_=${Date.now()}`;
       const response = await fetch(
-        `https://api.github.com/repos/${config.owner}/${config.repo}/actions/runs/${runId}`,
+        `https://api.github.com/repos/${config.owner}/${config.repo}/actions/runs/${runId}?${cacheBuster}`,
         {
           headers: {
             'Authorization': `token ${effectiveToken}`,
@@ -145,13 +146,16 @@ const DeployButton = ({
     }
   };
 
-  // Find the workflow run
-  const findWorkflowRun = async (): Promise<void> => {
+  // Find the workflow run with retry logic
+  const findWorkflowRun = async (retryCount = 0): Promise<void> => {
+    const maxRetries = 6; // Try for 30 seconds (5s * 6)
+    
     try {
-      console.log('Looking for workflow run...');
+      console.log(`Looking for workflow run... (attempt ${retryCount + 1}/${maxRetries})`);
       
+      const cacheBuster = `_=${Date.now()}`;
       const response = await fetch(
-        `https://api.github.com/repos/${config.owner}/${config.repo}/actions/runs?per_page=10`,
+        `https://api.github.com/repos/${config.owner}/${config.repo}/actions/runs?per_page=10&${cacheBuster}`,
         {
           headers: {
             'Authorization': `token ${effectiveToken}`,
@@ -179,23 +183,42 @@ const DeployButton = ({
         setDeployState('deploying');
         setMessage('🚀 Deployment started...');
         
-        // Start polling every 5 seconds
+        // Start polling every 3 seconds (faster response)
         intervalRef.current = setInterval(() => {
           pollWorkflowStatus(recentRun.id);
-        }, 5000);
+        }, 3000);
         
         // Initial poll
         pollWorkflowStatus(recentRun.id);
+        
+      } else if (retryCount < maxRetries) {
+        // Retry after 5 seconds
+        console.log(`Workflow not found yet, retrying in 5s... (${retryCount + 1}/${maxRetries})`);
+        setMessage(`⏳ Waiting for workflow to start... (${retryCount + 1}/${maxRetries})`);
+        setTimeout(() => {
+          findWorkflowRun(retryCount + 1);
+        }, 5000);
+        
       } else {
-        console.log('No recent workflow found');
+        console.log('No recent workflow found after retries');
         setDeployState('error');
         setMessage('❌ Could not find workflow run - check if workflow exists');
+        monitoringRef.current = false;
       }
     } catch (error) {
       console.error('Error finding workflow:', error);
       const errorMessage = error instanceof Error ? error.message : 'Unknown error';
-      setDeployState('error');
-      setMessage(`❌ Error finding workflow: ${errorMessage}`);
+      
+      if (retryCount < maxRetries) {
+        console.log(`Error finding workflow, retrying... (${retryCount + 1}/${maxRetries})`);
+        setTimeout(() => {
+          findWorkflowRun(retryCount + 1);
+        }, 5000);
+      } else {
+        setDeployState('error');
+        setMessage(`❌ Error finding workflow: ${errorMessage}`);
+        monitoringRef.current = false;
+      }
     }
   };
 

package/src/components/deploy/EnvUtils.tsx

@@ -0,0 +1,57 @@
+/**
+ * Environment Detection Utilities
+ * Helper functions to determine if we're in development mode
+ */
+
+/**
+ * Check if running in local development
+ * @returns true if in development, false otherwise
+ */
+export const isDevelopment = (): boolean => {
+  // Check for localhost
+  if (typeof window !== 'undefined') {
+    const hostname = window.location.hostname;
+    return hostname === 'localhost' || hostname === '127.0.0.1' || hostname.startsWith('192.168.');
+  }
+  
+  // Fallback to NODE_ENV if available
+  return process.env.NODE_ENV === 'development';
+};
+
+/**
+ * Check if running in production
+ * @returns true if in production, false otherwise
+ */
+export const isProduction = (): boolean => {
+  return !isDevelopment();
+};
+
+/**
+ * Conditionally render component only in development
+ * Usage: withDevOnly(MyComponent)
+ */
+export const withDevOnly = <P extends object>(
+  Component: React.ComponentType<P>
+): React.FC<P> => {
+  return (props: P) => {
+    if (!isDevelopment()) {
+      return null;
+    }
+    return <Component {...props} />;
+  };
+};
+
+/**
+ * Conditionally render component only in production
+ * Usage: withProdOnly(MyComponent)
+ */
+export const withProdOnly = <P extends object>(
+  Component: React.ComponentType<P>
+): React.FC<P> => {
+  return (props: P) => {
+    if (!isProduction()) {
+      return null;
+    }
+    return <Component {...props} />;
+  };
+};

package/src/components/deploy/GithubTokenConfig.tsx

@@ -0,0 +1,93 @@
+/**
+ * GitHub Token Configuration Widget
+ * Only show this in local development environment
+ * Dependencies: React, @sanity/ui, @sanity/icons, @sanity/studio-secrets
+ */
+
+import * as React from 'react';
+import { useState } from 'react';
+import { Card, Stack, Text, Button } from '@sanity/ui';
+import { useSecrets, SettingsView } from '@sanity/studio-secrets';
+import { CogIcon } from '@sanity/icons';
+
+interface TokenConfigProps {
+  title?: string;
+  description?: string;
+  secretsNamespace?: string;
+  secretKey?: string;
+  environment?: string;
+}
+
+const GitHubTokenConfig = ({
+  title = "🔐 GitHub Token Configuration",
+  description = "Configure your GitHub personal access token for deployment automation.",
+  secretsNamespace = "deployButton",
+  secretKey = "github_token",
+  environment = "production"
+}: TokenConfigProps) => {
+  const [showSettings, setShowSettings] = useState(false);
+  
+  // Use Sanity secrets to check if token exists
+  const { secrets } = useSecrets(secretsNamespace);
+  const token = (secrets as Record<string, string | undefined>)?.[secretKey];
+  const hasToken = Boolean(token);
+  
+  // Plugin config for secrets
+  const pluginConfigKeys = [
+    {
+      key: secretKey,
+      title: `GitHub Token for ${environment}`,
+      description: `Personal access token for GitHub Actions deployment`,
+      type: 'string' as const,
+      inputType: 'password' as const
+    }
+  ];
+
+  if (showSettings) {
+    return (
+      <Card padding={4} radius={2} shadow={1}>
+        <Stack space={3}>
+          <Text size={2} weight="semibold">
+            {title}
+          </Text>
+          <SettingsView
+            title={title}
+            namespace={secretsNamespace}
+            keys={pluginConfigKeys}
+            onClose={() => {
+              setShowSettings(false);
+            }}
+          />
+        </Stack>
+      </Card>
+    );
+  }
+
+  return (
+    <Card padding={4} radius={2} shadow={1}>
+      <Stack space={3}>
+        <Text size={2} weight="semibold">
+          {title}
+        </Text>
+        <Text size={1} muted>
+          {description}
+        </Text>
+        
+        <Stack space={2}>
+          <Text size={1}>
+            Status: {hasToken ? '✅ Token configured' : '⚠️ No token configured'}
+          </Text>
+          
+          <Button
+            tone={hasToken ? 'default' : 'primary'}
+            icon={CogIcon}
+            onClick={() => setShowSettings(true)}
+            text={hasToken ? 'Update Token' : 'Configure Token'}
+          />
+        </Stack>
+      </Stack>
+    </Card>
+  );
+};
+
+export default GitHubTokenConfig;

package/src/components/video/VideoSchemas.ts

@@ -184,7 +184,7 @@ export const VideoFileNoThumb = defineType({
 });
 
 export const VideoURLNoThumb = defineType({
-  name: 'videoFileNoThumb',
+  name: 'videoURLNoThumb',
   type: 'object',
   title: 'Video URL',
   fields: [

package/src/main.ts

@@ -2,5 +2,7 @@ export * from './components/core/SEOImage';
 export * from './components/core/SEO';
 // export * from './config/utils';
 export * from './validators/utils';
-export * from './components/ui/DeployButton';
+export * from './components/deploy/EnvUtils';
+export * from './components/deploy/DeployButton';
+export * from './components/deploy/GithubTokenConfig';
 export * from './components/video/VideoSchemas';