Hook Update

.github/workflows/update-design-system.yml

@@ -2,7 +2,7 @@ name: Update Design System
 
 on:
   repository_dispatch:
-    types: [design-system-update]
+    types: [figma-webhook]
 
 jobs:
   update-and-deploy:
@@ -22,18 +22,38 @@ jobs:
       - name: Install dependencies
         run: npm install axios
 
-      - name: Update data.json with image
+      - name: Process Figma update
         env:
           FIGMA_TOKEN: ${{ secrets.FIGMA_TOKEN }}
-          UPDATE_DATA: ${{ toJson(github.event.client_payload) }}
+          WEBHOOK_PASSCODE: ${{ secrets.WEBHOOK_PASSCODE }}
+          PAYLOAD: ${{ toJson(github.event.client_payload) }}
         run: |
           node << EOF
           const axios = require('axios');
           const fs = require('fs').promises;
 
           async function processUpdate() {
-            const updateData = JSON.parse(process.env.UPDATE_DATA);
-            const { file_key, timestamp, triggered_by, description, file_name, created_components, modified_components, created_styles, modified_styles } = updateData;
+            const payload = JSON.parse(process.env.PAYLOAD);
+            
+            // Verify passcode
+            if (payload.passcode !== process.env.WEBHOOK_PASSCODE) {
+              console.error('Invalid passcode');
+              process.exit(1);
+            }
+
+            // Handle PING event
+            if (payload.event_type === 'PING') {
+              console.log('Received PING event. Webhook setup successful.');
+              process.exit(0);
+            }
+
+            // Only process LIBRARY_PUBLISH events
+            if (payload.event_type !== 'LIBRARY_PUBLISH') {
+              console.log(`Received ${payload.event_type} event. Ignoring.`);
+              process.exit(0);
+            }
+
+            const { file_key, timestamp, triggered_by, description, file_name } = payload;
 
             try {
               // Get image preview
@@ -49,10 +69,15 @@ jobs:
                 triggered_by,
                 timestamp,
                 preview_image,
-                created_components,
-                modified_components,
-                created_styles,
-                modified_styles
+                created_components: payload.created_components,
+                modified_components: payload.modified_components,
+                deleted_components: payload.deleted_components,
+                created_styles: payload.created_styles,
+                modified_styles: payload.modified_styles,
+                deleted_styles: payload.deleted_styles,
+                created_variables: payload.created_variables,
+                modified_variables: payload.modified_variables,
+                deleted_variables: payload.deleted_variables
               };
 
               // Read existing data.json

figma-webhook-curl.sh

@@ -1,13 +1,18 @@
 #!/bin/bash
 
+# Load environment variables from .env file if it exists
+if [ -f .env ]; then
+    source .env
+fi
+
 curl -X POST \
   -H "X-FIGMA-TOKEN: $FIGMA_TOKEN" \
   -H 'Content-Type: application/json' \
   -d '{
     "event_type": "LIBRARY_PUBLISH",
     "team_id": "'$FIGMA_TEAM_ID'",
     "endpoint": "https://api.github.com/repos/'$GH_USERNAME'/'$GH_REPO_NAME'/dispatches",
-    "passcode": "'$GH_PAT'",
+    "passcode": "'$WEBHOOK_PASSCODE'",
     "description": "Design System Library Publish Notifications"
   }' \
   'https://api.figma.com/v2/webhooks'

index.html

@@ -73,8 +73,13 @@ <h2>${update.file_name}</h2>
                     ${update.preview_image ? `<img src="${update.preview_image}" alt="Preview" class="preview-image">` : ''}
                     ${createUpdateSection('New Components', update.created_components)}
                     ${createUpdateSection('Modified Components', update.modified_components)}
+                    ${createUpdateSection('Deleted Components', update.deleted_components)}
                     ${createUpdateSection('New Styles', update.created_styles)}
                     ${createUpdateSection('Modified Styles', update.modified_styles)}
+                    ${createUpdateSection('Deleted Styles', update.deleted_styles)}
+                    ${createUpdateSection('New Variables', update.created_variables)}
+                    ${createUpdateSection('Modified Variables', update.modified_variables)}
+                    ${createUpdateSection('Deleted Variables', update.deleted_variables)}
                 `;
                 container.appendChild(updateElement);
             });