Adding Links to Change Logs (#63)

Co-authored-by: Christy Presler <[email protected]>
FormidableLabs · Feb 8, 2024 · f5e8c14 · f5e8c14
1 parent 59be9f0
commit f5e8c14
Show file tree

Hide file tree

Showing 44 changed files with 899 additions and 85 deletions.
diff --git a/widget-src/Widget.tsx b/widget-src/Widget.tsx
@@ -14,7 +14,7 @@ function Widget() {
   const [showDescription, setShowDescription] = useSyncedState('showDescription', true);
   const [showStatus, setShowStatus] = useSyncedState('showStatus', '0');
   const [showVersion, setShowVersion] = useSyncedState('showVersion', false);
-  const [showBranding, setShowBranding] = useSyncedState('showBranding', true);
+  const [showBranding, setShowBranding] = useSyncedState('showBradning', true); // fixing the typo messes with branding state on existing widgets
   const [showLogTypes, setShowLogTypes] = useSyncedState('showLogTypes', false);
   // Meta Data
   const [createdDate, setCreatedDate] = useSyncedState('createdDate', 0);
@@ -33,7 +33,12 @@ function Widget() {
       editedDate: Date.now(),
       user: currentUser,
       editCount: 0,
-      showTypeMenu: false,
+      state: {
+        showTypeMenu: false,
+        showLinkForm: false,
+        linkFormError: { label: false, url: false }
+      },
+      links: [],
     });
     setChangeIds([changeToAdd, ...changeIds]);
     setUpdatedDate(Date.now());

diff --git a/widget-src/components/Button.tsx b/widget-src/components/Button.tsx
@@ -1,36 +1,25 @@
-import { ActionEditIcon } from '../svgs/ActionEditIcon';
-import { ActionDeleteIcon } from '../svgs/ActionDeleteIcon';
 import { COLOR, FONT, GAP, PADDING, RADIUS, SPACE } from '../utilities/Styles';
 
 const { widget } = figma;
 const { AutoLayout, Frame, SVG, Text } = widget;
 
 interface ButtonProps {
-  label: 'Edit' | 'Delete';
-  hideLabel: boolean;
+  label: string;
+  hideLabel?: boolean;
   action: () => void;
+  iconSrc?: string;
 }
 
 export const Button = ({
   label,
-  hideLabel,
+  hideLabel = false,
   action,
+  iconSrc
 }: ButtonProps) => {
-  let svgSrc = '';
-  switch (label) {
-    case 'Edit':
-      svgSrc = <ActionEditIcon />;
-      break;
-    case 'Delete':
-      svgSrc = <ActionDeleteIcon />;
-      break;
-    default:
-      break;
-  }
 
   return (
     <AutoLayout
-      name="Button"
+      name={`button-${label}`}
       fill={COLOR.white}
       cornerRadius={RADIUS.sm}
       overflow="visible"
@@ -43,22 +32,24 @@ export const Button = ({
       horizontalAlignItems="center"
       verticalAlignItems="center"
     >
-      <Frame name="Icon" overflow="visible" width={SPACE.xxs} height={SPACE.xxs}>
-        <SVG
-          name={label}
-          x={{
-            type: 'center',
-            offset: PADDING.none,
-          }}
-          y={{
-            type: 'center',
-            offset: PADDING.none,
-          }}
-          height={SPACE.xxs}
-          width={SPACE.xxs}
-          src={svgSrc}
-        />
-      </Frame>
+      {iconSrc && (
+        <Frame name="Icon" overflow="visible" width={SPACE.xxs} height={SPACE.xxs}>
+          <SVG
+            name={label}
+            x={{
+              type: 'center',
+              offset: PADDING.none,
+            }}
+            y={{
+              type: 'center',
+              offset: PADDING.none,
+            }}
+            height={SPACE.xs}
+            width={SPACE.xs}
+            src={iconSrc}
+          />
+        </Frame>
+      )}
       <Text
         name="Label"
         fill={COLOR.greyDark}

diff --git a/widget-src/components/ChangeLogRow.tsx b/widget-src/components/ChangeLogRow.tsx
@@ -6,6 +6,11 @@ import { Type } from './log/Type';
 import { formatDate } from '../utilities/Utils';
 import { COLOR, FONT, GAP, PADDING, SPACE } from '../utilities/Styles';
 import { TypeMenu } from './log/TypeMenu';
+import { ActionDeleteIcon } from '../svgs/ActionDeleteIcon';
+import { ActionLinkIcon } from '../svgs/ActionLinkIcon';
+import { LinkForm } from './log/LinkForm';
+import { LinkList } from './log/LinkList';
+import { AddLink } from './log/AddLink';
 
 const { widget } = figma;
 const { AutoLayout, Input, Rectangle, Text } = widget;
@@ -69,7 +74,7 @@ export const ChangeLogRow = ({
             width="fill-parent"
             verticalAlignItems="center"
           >
-            {!!changeLog.showTypeMenu && (
+            {!!changeLog.state?.showTypeMenu && (
               <TypeMenu
                 currentType={changeLog.type === 'added' ? 'none' : changeLog.type}
                 selectType={(newType) => {
@@ -81,12 +86,18 @@ export const ChangeLogRow = ({
                         type: newType,
                         editCount: addEdit ? changeLog.editCount + 1 : changeLog.editCount,
                         editedDate: addEdit ? Date.now() : changeLog.editedDate,
-                        showTypeMenu: !changeLog.showTypeMenu,
+                        state: {
+                          ...changeLog.state,
+                          showTypeMenu: !changeLog.state?.showTypeMenu,
+                        },
                       });
                       setUpdatedDate(Date.now());
                   } else {
                     updateChange({
-                      showTypeMenu: !changeLog.showTypeMenu,
+                      state: {
+                        ...changeLog.state,
+                        showTypeMenu: !changeLog.state?.showTypeMenu,
+                      },
                     })
                   }
                 }}
@@ -98,11 +109,17 @@ export const ChangeLogRow = ({
                 action={() => {
                   // toggle log type menu
                   updateChange({
-                    showTypeMenu: !changeLog.showTypeMenu,
+                    state: {
+                      ...changeLog.state,
+                      showTypeMenu: !changeLog.state?.showTypeMenu,
+                    }
                   })
                   // hide all other log type menues
                   updateOthers({
-                    showTypeMenu: false,
+                    state: {
+                      ...changeLog.state,
+                      showTypeMenu: false,
+                    }
                   })
                 }}
               />
@@ -136,7 +153,7 @@ export const ChangeLogRow = ({
                 horizontalAlignItems="end"
                 verticalAlignItems="center"
               >
-                <Button label="Delete" hideLabel={true} action={deleteChange} />
+                <Button label="Delete" hideLabel={true} iconSrc={<ActionDeleteIcon />} action={deleteChange} />
               </AutoLayout>
             )}
           </AutoLayout>
@@ -177,7 +194,38 @@ export const ChangeLogRow = ({
               </Text>
             )}
           </AutoLayout>
-          {/* <Links name="Links" /> */}
+          <AutoLayout
+            width="fill-parent"
+            horizontalAlignItems="end"
+            direction="vertical"
+          >
+            <LinkList
+              links={changeLog.links}
+              deleteLink={(linkToDelete) => {
+                updateChange({
+                  links: changeLog.links ? changeLog.links.filter(link => link.key !== linkToDelete) : []
+                })
+              }}
+            />
+            <AutoLayout
+              width="fill-parent"
+              horizontalAlignItems="end"
+              verticalAlignItems="center"
+            >
+              {!!changeLog.state?.showLinkForm ? (
+                <LinkForm
+                  changeLog={changeLog}
+                  updateChange={updateChange}
+                  setUpdatedDate={setUpdatedDate}
+                  />
+              ) : (
+                <AddLink
+                  changeLog={changeLog}
+                  updateChange={updateChange}  
+                />
+              )} 
+            </AutoLayout>
+          </AutoLayout>
         </AutoLayout>
       </AutoLayout>
       <Rectangle

diff --git a/widget-src/components/Footer.tsx b/widget-src/components/Footer.tsx
@@ -1,7 +1,7 @@
 import { LogoFormidable } from '../svgs/LogoFormidable';
 import { COLOR, GAP, OPACITY, SPACE } from '../utilities/Styles';
 
-const { widget, showUI } = figma;
+const { widget, openExternal } = figma;
 const { AutoLayout, Rectangle, SVG } = widget;
 
 interface FooterProps {
@@ -19,9 +19,7 @@ export const Footer = ({ showBranding }: FooterProps) => (
         verticalAlignItems="center"
         opacity={OPACITY.semiOpaque}
         onClick={() => {
-          const url = 'https://formidable.com/open-source/';
-          const openLinkUIString = `<script>window.open('${url}','_blank');</script>`;
-          showUI(openLinkUIString, { visible: false });
+          openExternal("https://formidable.com/open-source/");
         }}
         hoverStyle={{
           opacity: OPACITY.opaque,

diff --git a/widget-src/components/header/Meta.tsx b/widget-src/components/header/Meta.tsx
@@ -72,11 +72,11 @@ export const Meta = ({
             }}
             overflow="visible"
             spacing={GAP.md}
-            padding={PADDING.sm}
+            padding={PADDING.xs}
             horizontalAlignItems="end"
             verticalAlignItems="center"
           >
-            <SVG name="Vector" height={SPACE.xs} width={SPACE.xs} src={<ActionAddIcon />} />
+            <SVG name="Vector" height={SPACE.sm} width={SPACE.sm} src={<ActionAddIcon />} />
           </AutoLayout>
         </AutoLayout>
       )}

diff --git a/widget-src/components/log/AddLink.tsx b/widget-src/components/log/AddLink.tsx
@@ -0,0 +1,51 @@
+import { ChangeLog } from '../../types/ChangeLog';
+import { Button } from '../Button';
+import { COLOR, FONT } from '../../utilities/Styles';
+import { ActionLinkIcon } from '../../svgs/ActionLinkIcon';
+
+const { widget } = figma;
+const { AutoLayout, Text } = widget;
+
+interface AddLinkProps {
+  changeLog: ChangeLog;
+  updateChange: (changes: Partial<ChangeLog>) => void;
+}
+
+export const AddLink = ({
+  changeLog,
+  updateChange,
+}: AddLinkProps) => {
+  return (
+    <AutoLayout
+      width="fill-parent"
+      horizontalAlignItems="end"
+      verticalAlignItems="center"
+    >
+      {changeLog.links && changeLog.links.length > 7 ? (
+        <Text
+          fill={COLOR.greyDark}
+          lineHeight={FONT.lineHeight.xs}
+          fontFamily={FONT.family}
+          fontSize={FONT.size.xs}
+          letterSpacing={FONT.letterSpacing.sm}
+          fontWeight={FONT.weight.regular}
+        >
+          Link maximum (8) reached.
+        </Text>
+      ) : (
+        <Button
+          label="Add Link"
+          iconSrc={<ActionLinkIcon color={COLOR.greyDark} />}
+          action={() => {
+            updateChange({
+              state: {
+                ...changeLog.state,
+                showLinkForm: true,
+              }
+            })
+          }}
+        />
+      )}
+    </AutoLayout>
+  )
+}