Merge pull request #148 from a-ng-d/ui-color-palette-410

UI Color Palette 4.1.0

.github/workflows/build.yml

@@ -26,8 +26,9 @@ jobs:
         echo REACT_APP_SUPABASE_PUBLIC_ANON_KEY="${{ secrets.REACT_APP_SUPABASE_PUBLIC_ANON_KEY }}" >> .env
         echo REACT_APP_SENTRY_DSN="${{ vars.REACT_APP_SENTRY_DSN }}" >> .env
         echo SENTRY_AUTH_TOKEN="${{ secrets.SENTRY_AUTH_TOKEN }}" >> .env
-        echo REACT_APP_MIXPANEL_TOKEN="${{ vars.REACT_APP_MIXPANEL_TOKEN }}" >> .env
-        echo REACT_APP_WORKER_URL="${{ vars.REACT_APP_WORKER_URL }}" >> .env
+        echo REACT_APP_MIXPANEL_TOKEN="${{ secrets.REACT_APP_MIXPANEL_TOKEN }}" >> .env
+        echo REACT_APP_AUTH_WORKER_URL="${{ vars.REACT_APP_AUTH_WORKER_URL }}" >> .env
+        echo REACT_APP_ANNOUNCEMENTS_WORKER_URL="${{ vars.REACT_APP_ANNOUNCEMENTS_WORKER_URL }}" >> .env
         cat .env
 
     - name: Install and Build

manifest.json

@@ -30,11 +30,17 @@
       "https://tally.so",
       "https://corsproxy.io",
       "https://zclweepgvqkrelyfwhma.supabase.co",
-      "https://hook.eu1.make.com",
+      "https://*.yelbolt.workers.dev",
       "https://www.colourlovers.com",
       "https://*.mixpanel.com",
       "https://asset.brandfetch.io",
-      "https://*.sentry.io"
+      "https://*.sentry.io",
+      "https://*.amazonaws.com"
+    ],
+    "devAllowedDomains": [
+      "http://localhost:3000",
+      "http://localhost:8787",
+      "http://localhost:8888"
     ]
   },
   "parameters": [

package.json

@@ -1,6 +1,6 @@
 {
   "name": "figma-ui-color-palette",
-  "version": "4.0.4",
+  "version": "4.1.0",
   "description": "Create accessible UI color palettes with consistent lightness and contrast",
   "main": "code.js",
   "scripts": {
@@ -59,7 +59,7 @@
     "webpack-cli": "^4.9.1"
   },
   "dependencies": {
-    "@a_ng_d/figmug-ui": "^0.65.0",
+    "@a_ng_d/figmug-ui": "^0.83.0",
     "@a-ng-d/figmug.modules.do-camel-case": "^0.0.4",
     "@a-ng-d/figmug.modules.do-kebab-case": "^0.0.4",
     "@a-ng-d/figmug.modules.do-map": "^0.0.3",

src/bridges/checks/checkHighlightStatus.ts

@@ -1,26 +1,38 @@
-import { releaseNotesVersion } from '../../utils/config'
+const checkHighlightStatus = async (remoteVersion: string) => {
+  // figma.clientStorage.deleteAsync('highlight_version')
+  // console.log('localVersion', localVersion)
+  // console.log('remoteVersion', remoteVersion)
+  const localVersion = await figma.clientStorage.getAsync('highlight_version')
 
-const checkHighlightStatus = async () => {
-  // figma.clientStorage.deleteAsync(`${version}_isRead`)
-  const isRead = await figma.clientStorage.getAsync(
-    `${releaseNotesVersion}_isRead`
-  )
-
-  if (isRead === undefined || !isRead)
-    figma.ui.postMessage({
-      type: 'CHECK_HIGHLIGHT_STATUS',
+  if (localVersion === undefined)
+    return figma.ui.postMessage({
+      type: 'PUSH_HIGHLIGHT_STATUS',
       data:
         figma.payments !== undefined
           ? figma.payments.getUserFirstRanSecondsAgo() > 60
-            ? 'UNREAD_RELEASE_NOTE'
-            : 'READ_RELEASE_NOTE'
-          : 'READ_RELEASE_NOTE',
-    })
-  else
-    figma.ui.postMessage({
-      type: 'CHECK_HIGHLIGHT_STATUS',
-      data: 'READ_RELEASE_NOTE',
+            ? 'DISPLAY_HIGHLIGHT_DIALOG'
+            : 'NO_HIGHLIGHT'
+          : 'NO_HIGHLIGHT',
     })
+  else {
+    const remoteMajorVersion = remoteVersion.split('.')[0],
+      remoteMinorVersion = remoteVersion.split('.')[1]
+
+    const localMajorVersion = localVersion.split('.')[0],
+      localMinorVersion = localVersion.split('.')[1]
+
+    if (remoteMajorVersion !== localMajorVersion)
+      return figma.ui.postMessage({
+        type: 'PUSH_HIGHLIGHT_STATUS',
+        data: 'DISPLAY_HIGHLIGHT_DIALOG',
+      })
+
+    if (remoteMinorVersion !== localMinorVersion)
+      return figma.ui.postMessage({
+        type: 'PUSH_HIGHLIGHT_STATUS',
+        data: 'DISPLAY_HIGHLIGHT_NOTIFICATION',
+      })
+  }
 }
 
 export default checkHighlightStatus

src/bridges/loadUI.ts

@@ -44,9 +44,8 @@ const loadUI = async () => {
     themeColors: true,
   })
 
-  checkUserConsent()
-    .then(() => checkEditorType())
-    .then(() => checkHighlightStatus())
+  checkUserConsent().then(() => checkEditorType())
+
   processSelection()
 
   await checkPlanStatus()
@@ -81,6 +80,7 @@ const loadUI = async () => {
         figma.ui.resize(windowSize.w, windowSize.h)
       },
       CHECK_USER_CONSENT: () => checkUserConsent(),
+      CHECK_HIGHLIGHT_STATUS: () => checkHighlightStatus(msg.version),
       CREATE_PALETTE: () => createPalette(msg),
       UPDATE_SCALE: () => updateScale(msg),
       UPDATE_VIEW: () => updateView(msg),

src/bridges/publication/authentication.ts

@@ -1,7 +1,7 @@
 import { createClient } from '@supabase/supabase-js'
 
 import { lang, locals } from '../../content/locals'
-import { authUrl, databaseUrl, workerUrl } from '../../utils/config'
+import { authUrl, authWorkerUrl, databaseUrl } from '../../utils/config'
 import checkConnectionStatus from '../checks/checkConnectionStatus'
 
 let isAuthenticated = false
@@ -11,13 +11,15 @@ export const supabase = createClient(
   process.env.REACT_APP_SUPABASE_PUBLIC_ANON_KEY ?? ''
 )
 
-export const signIn = async () => {
+export const signIn = async (disinctId: string) => {
   return new Promise((resolve, reject) => {
-    fetch(workerUrl, {
+    fetch(authWorkerUrl, {
+      method: 'GET',
       cache: 'no-cache',
       credentials: 'omit',
       headers: {
         type: 'GET_PASSKEY',
+        'distinct-id': disinctId,
       },
     })
       .then((response) => {
@@ -31,15 +33,18 @@ export const signIn = async () => {
               type: 'OPEN_IN_BROWSER',
               url: `${authUrl}/?passkey=${result.passkey}`,
             },
+            pluginId: '1063959496693642315',
           },
-          '*'
+          'https://www.figma.com'
         )
         const poll = setInterval(async () => {
-          fetch(workerUrl, {
+          fetch(authWorkerUrl, {
+            method: 'GET',
             cache: 'no-cache',
             credentials: 'omit',
             headers: {
               type: 'GET_TOKENS',
+              'distinct-id': disinctId,
               passkey: result.passkey,
             },
           })
@@ -58,18 +63,22 @@ export const signIn = async () => {
                       items: [
                         {
                           key: 'supabase_access_token',
-                          value: result.access_token,
+                          value: result.tokens.access_token,
                         },
                         {
                           key: 'supabase_refresh_token',
-                          value: result.refresh_token,
+                          value: result.tokens.refresh_token,
                         },
                       ],
                     },
+                    pluginId: '1063959496693642315',
                   },
-                  '*'
+                  'https://www.figma.com'
+                )
+                checkConnectionStatus(
+                  result.tokens.access_token,
+                  result.tokens.refresh_token
                 )
-                checkConnectionStatus(result.access_token, result.refresh_token)
                   .then(() => {
                     clearInterval(poll)
                     resolve(result)
@@ -102,29 +111,37 @@ export const signIn = async () => {
 }
 
 export const signOut = async () => {
-  const { error } = await supabase.auth.signOut({
-    scope: 'others',
-  })
-
-  if (!error) {
-    parent.postMessage(
-      {
-        pluginMessage: {
-          type: 'DELETE_ITEMS',
-          items: ['supabase_access_token', 'supabase_refresh_token'],
-        },
+  parent.postMessage(
+    {
+      pluginMessage: {
+        type: 'OPEN_IN_BROWSER',
+        url: `${authUrl}/?action=sign_out`,
       },
-      '*'
-    )
-    parent.postMessage(
-      {
-        pluginMessage: {
-          type: 'SIGN_OUT',
-        },
+      pluginId: '1063959496693642315',
+    },
+    'https://www.figma.com'
+  )
+  parent.postMessage(
+    {
+      pluginMessage: {
+        type: 'DELETE_ITEMS',
+        items: ['supabase_access_token'],
       },
-      '*'
-    )
+    },
+    '*'
+  )
+  parent.postMessage(
+    {
+      pluginMessage: {
+        type: 'SIGN_OUT',
+      },
+    },
+    '*'
+  )
 
-    return
-  } else throw error
+  setTimeout(async () => {
+    await supabase.auth.signOut({
+      scope: 'local',
+    })
+  }, 2000)
 }

src/bridges/publication/sharePalette.ts

@@ -0,0 +1,22 @@
+import { palettesDbTableName } from '../../utils/config'
+import { supabase } from './authentication'
+
+const sharePalette = async (id: string, isShared: boolean): Promise<void> => {
+  const now = new Date().toISOString()
+
+  const { error } = await supabase
+    .from(palettesDbTableName)
+    .update([
+      {
+        is_shared: isShared,
+        published_at: now,
+        updated_at: now,
+      },
+    ])
+    .match({ palette_id: id })
+
+  if (!error) return
+  else throw error
+}
+
+export default sharePalette