Updated figma plugin with error handling and fixes

digdir · Jun 10, 2024 · 25ffe3f · 25ffe3f
1 parent d1c4a70
commit 25ffe3f
Show file tree

Hide file tree

Showing 8 changed files with 150 additions and 37 deletions.
diff --git a/plugins/figma-sync/manifest.json b/plugins/figma-sync/manifest.json
@@ -1,5 +1,5 @@
 {
-  "name": "Designsystemet",
+  "name": "Designsystemet (beta)",
   "id": "1222852692367737510",
   "api": "1.0.0",
   "main": "dist/plugin.js",

diff --git a/plugins/figma-sync/package.json b/plugins/figma-sync/package.json
@@ -1,7 +1,7 @@
 {
   "name": "figma-plugin",
   "private": true,
-  "version": "1.0.0",
+  "version": "0.1.0",
   "type": "module",
   "scripts": {
     "dev": "run-s watch",

diff --git a/plugins/figma-sync/src/plugin/plugin.ts b/plugins/figma-sync/src/plugin/plugin.ts
@@ -1,7 +1,7 @@
 /* eslint-disable @typescript-eslint/no-unsafe-assignment */
 /* eslint-disable @typescript-eslint/no-unsafe-call */
 /* eslint-disable @typescript-eslint/no-unsafe-member-access */
-figma.showUI(__html__, { width: 610, height: 560 });
+figma.showUI(__html__, { width: 600, height: 570 });
 
 function hexToRgb(hex: string) {
   const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);

diff --git a/plugins/figma-sync/src/ui/App.css b/plugins/figma-sync/src/ui/App.css
@@ -11,7 +11,7 @@ body {
 }
 
 .content {
-  padding: 8px 12px 8px 8px;
+  padding: 6px;
 }
 
 .heading {
@@ -20,6 +20,7 @@ body {
 
 .paragraph {
   margin-bottom: 20px;
+  max-width: 85%;
 }
 
 .modes {

diff --git a/plugins/figma-sync/src/ui/app.tsx b/plugins/figma-sync/src/ui/app.tsx
@@ -2,16 +2,17 @@ import '@digdir/designsystemet-theme';
 import '@digdir/designsystemet-css';
 
 import './App.css';
-import { NavLink, Routes, Route } from 'react-router-dom';
+import { Routes, Route } from 'react-router-dom';
 
 import PageOne from './pages/PageOne/PageOne';
 import PageTwo from './pages/PageTwo/PageTwo';
 import PageThree from './pages/pageThree/PageThree';
+import { Footer } from './components/Footer/Footer';
 
 function App() {
   return (
     <div>
-      <div className='links'>
+      {/* <div className='links'>
         <NavLink
           className={({ isActive }) => (isActive ? 'link active' : 'link')}
           to='/'
@@ -30,22 +31,25 @@ function App() {
         >
           Oppdater UI Kit
         </NavLink>
-      </div>
+      </div> */}
 
-      <Routes>
-        <Route
-          path='/'
-          element={<PageOne />}
-        />
-        <Route
-          path='/pageTwo'
-          element={<PageTwo />}
-        />
-        <Route
-          path='/pageThree'
-          element={<PageThree />}
-        />
-      </Routes>
+      <div className='content'>
+        <Routes>
+          <Route
+            path='/'
+            element={<PageOne />}
+          />
+          <Route
+            path='/pageTwo'
+            element={<PageTwo />}
+          />
+          <Route
+            path='/pageThree'
+            element={<PageThree />}
+          />
+        </Routes>
+      </div>
+      <Footer />
     </div>
   );
 }

diff --git a/plugins/figma-sync/src/ui/components/Footer/Footer.css b/plugins/figma-sync/src/ui/components/Footer/Footer.css
@@ -0,0 +1,38 @@
+.footer {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  height: 44px;
+  border-top: 1px solid var(--ds-color-neutral-border-subtle);
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0 16px;
+}
+
+.footer__right {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.version {
+  background-color: var(--ds-color-neutral-surface-default);
+  font-size: 14px;
+  color: var(--ds-color-neutral-text-subtle);
+  font-weight: 500;
+  padding: 3px 6px;
+  border-radius: 2px;
+}
+
+.feedback {
+  color: var(--ds-color-neutral-text-subtle);
+  padding: 3px;
+  border-radius: 1px;
+}
+
+.feedback:hover {
+  background-color: var(--ds-color-neutral-surface-default);
+  color: var(--ds-color-neutral-text-default);
+}
diff --git a/plugins/figma-sync/src/ui/components/Footer/Footer.tsx b/plugins/figma-sync/src/ui/components/Footer/Footer.tsx
@@ -0,0 +1,29 @@
+import './Footer.css';
+import { ChatElipsisIcon } from '@navikt/aksel-icons';
+import { Tooltip } from '@digdir/designsystemet-react';
+
+import packageJson from '../../../../package.json';
+
+export const Footer = () => {
+  return (
+    <div className='footer'>
+      <div className='footer__left'></div>
+      <div className='footer__right'>
+        <div className='version'>V {packageJson.version}</div>
+        <Tooltip
+          content='Feedback'
+          placement='top'
+        >
+          <a
+            href='https://github.com/digdir/designsystemet'
+            rel='noreferrer'
+            target='_blank'
+            className='feedback'
+          >
+            <ChatElipsisIcon fontSize='1.3rem' />
+          </a>
+        </Tooltip>
+      </div>
+    </div>
+  );
+};
diff --git a/plugins/figma-sync/src/ui/pages/PageOne/PageOne.tsx b/plugins/figma-sync/src/ui/pages/PageOne/PageOne.tsx
@@ -6,12 +6,16 @@ import {
   Textarea,
   Button,
   Link,
+  Spinner,
 } from '@digdir/designsystemet-react';
 import React, { useEffect, useState } from 'react';
 
 function PageOne() {
-  const [text, setText] = useState('');
+  const [jsonText, setJsonText] = useState('');
   const [mode, setMode] = useState('light');
+  const [errorText, setErrorText] = useState('');
+  const [isLoading, setIsLoading] = useState(false);
+  const [buttonText, setButtonText] = useState('Oppdater variabler');
   useEffect(() => {
     window.onmessage = (event: {
       data: { pluginMessage: { type: string; message: string } };
@@ -23,12 +27,42 @@ function PageOne() {
     };
   }, []);
 
-  const onCreate = () => {
+  const isValidJson = (str: string) => {
+    try {
+      JSON.parse(str);
+    } catch (e) {
+      return false;
+    }
+    return true;
+  };
+
+  const onSubmit = () => {
+    if (isLoading) {
+      return;
+    }
+    if (jsonText === '') {
+      setErrorText('Dette feltet er påkrevd.');
+      return;
+    }
+
+    if (!isValidJson(jsonText)) {
+      setErrorText('Ugyldig JSON, prøv å kopier og lim inn på nytt.');
+      setJsonText('');
+      return;
+    }
+
     parent.postMessage(
-      { pluginMessage: { type: 'update-variables', text, mode } },
+      { pluginMessage: { type: 'update-variables', text: jsonText, mode } },
       '*',
     );
-    setText('');
+
+    setButtonText('Oppdaterer...');
+    setIsLoading(true);
+
+    setTimeout(() => {
+      setIsLoading(false);
+      setButtonText('Oppdater variabler');
+    }, 6000);
   };
   return (
     <div className='content'>
@@ -44,15 +78,15 @@ function PageOne() {
           size='sm'
           className='paragraph'
         >
-          Oppdatere Figma variabler i Core UI Kit via designsystemet sin
-          temavelger. Gå inn på{' '}
+          Oppdater fargene i Core UI Kit via designsystemet sin temagenerator.
+          Gå inn på{' '}
           <Link
             target='_blank'
             href='https://theme.designsystemet.no/'
           >
             theme.designsystemet.no
           </Link>{' '}
-          og lag temaet ditt, så lim inn JSON i feltet under.
+          og lag temaet ditt, velg mode og lim inn JSON i feltet under.
         </Paragraph>
 
         <ToggleGroup
@@ -62,27 +96,34 @@ function PageOne() {
           size='sm'
           onChange={(e) => setMode(e)}
         >
-          <ToggleGroup.Item value='light'>Light</ToggleGroup.Item>
-          <ToggleGroup.Item value='dark'>Dark</ToggleGroup.Item>
-          <ToggleGroup.Item value='contrast'>Contrast</ToggleGroup.Item>
+          <ToggleGroup.Item value='light'>Light Mode</ToggleGroup.Item>
+          <ToggleGroup.Item value='dark'>Dark Mode</ToggleGroup.Item>
+          {/* <ToggleGroup.Item value='contrast'>Contrast</ToggleGroup.Item> */}
         </ToggleGroup>
         <Textarea
           className='textarea'
           cols={40}
           rows={7}
-          placeholder='Lim inn JSON her...'
+          placeholder='Lim inn JSON her'
           description=''
-          error=''
+          error={errorText}
           label='JSON'
           size='sm'
-          value={text}
-          onChange={(e) => setText(e.target.value)}
+          value={jsonText}
+          onChange={(e) => setJsonText(e.target.value)}
         />
         <Button
-          onClick={() => onCreate()}
+          onClick={() => onSubmit()}
           size='sm'
         >
-          Oppdater variabler
+          {isLoading && (
+            <Spinner
+              color='accent'
+              title='loading'
+              size='xs'
+            />
+          )}
+          {buttonText}
         </Button>
       </div>
     </div>