Prettier integration (#83)

Co-authored-by: Christy Presler <[email protected]>
FormidableLabs · Apr 16, 2024 · 81b740e · 81b740e
1 parent 75e875d
commit 81b740e
Show file tree

Hide file tree

Showing 65 changed files with 511 additions and 639 deletions.
diff --git a/.github/workflows/pull-request.yml b/.github/workflows/pull-request.yml
@@ -9,5 +9,5 @@ jobs:
       - uses: actions/checkout@v3
       - uses: ./.github/actions/setup
 
-      - run: bun run tsc
+      - run: bun run test
       - run: bun run build
diff --git a/.github/workflows/release.yml b/.github/workflows/release.yml
@@ -13,5 +13,5 @@ jobs:
       - uses: actions/checkout@v3
       - uses: ./.github/actions/setup
 
-      - run: bun run tsc
+      - run: bun run test
       - run: bun run build
diff --git a/.prettierignore b/.prettierignore
@@ -1,3 +1,7 @@
 # ignore artifacts
 dist
 .lockb
+.github
+.prettierrc
+**/*.json
+**/*.md
diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
@@ -70,10 +70,10 @@ While running Live Reload, go to `Menu > Widgets > Development > Import widget f
 
 ### Tests
 
-To typecheck the widget run:
+Before creating a pull request run prettier to ensure code formatting and a typecheck on the widget. Run:
 
 ```sh
-$ bun run tsc
+$ bun run test
 ```
 
 ## Contributor Covenant Code of Conduct

diff --git a/package.json b/package.json
@@ -7,6 +7,7 @@
     "@figma/widget-typings": "*",
     "date-fns": "^3.6.0",
     "esbuild": "*",
+    "prettier": "3.2.5",
     "typescript": "*"
   },
   "contributors": [
@@ -17,7 +18,7 @@
   "license": "MIT",
   "scripts": {
     "build": "esbuild widget-src/Widget.tsx --bundle --outfile=dist/code.js --target=es6",
-    "tsc": "tsc --noEmit --noUnusedLocals --noUnusedParameters --skipLibCheck -p widget-src",
+    "test": "prettier . --write && tsc --noEmit --noUnusedLocals --noUnusedParameters --skipLibCheck -p widget-src",
     "watch": "bun run build -- --watch"
   }
 }
diff --git a/widget-src/Widget.tsx b/widget-src/Widget.tsx
@@ -147,7 +147,7 @@ function Widget() {
           break;
       }
       setUpdatedDate(Date.now());
-    }
+    },
   );
 
   useEffect(() => {

diff --git a/widget-src/components/Button.tsx b/widget-src/components/Button.tsx
@@ -11,14 +11,7 @@ interface ButtonProps {
   error?: boolean;
 }
 
-export const Button = ({
-  label,
-  hideLabel = false,
-  action,
-  iconSrc,
-  error = false,
-}: ButtonProps) => {
-
+export const Button = ({ label, hideLabel = false, action, iconSrc, error = false }: ButtonProps) => {
   if (error) {
     return (
       <AutoLayout
@@ -66,7 +59,7 @@ export const Button = ({
           {label}
         </Text>
       </AutoLayout>
-    )
+    );
   }
 
   return (

diff --git a/widget-src/components/ChangeLogEmpty.tsx b/widget-src/components/ChangeLogEmpty.tsx
@@ -38,7 +38,7 @@ export const ChangeLogEmpty = ({ isLocked }: { isLocked: boolean }) => (
           letterSpacing={FONT.letterSpacing.sm}
           textCase="upper"
         >
-         unlock widget from property menu to add your first change.
+          unlock widget from property menu to add your first change.
         </Text>
       ) : (
         <>
@@ -53,7 +53,15 @@ export const ChangeLogEmpty = ({ isLocked }: { isLocked: boolean }) => (
           >
             no changes found in log. add your first change here
           </Text>
-          <SVG name="Arrow" x={570} y={-4} positioning="absolute" height={SPACE.md} width={SPACE.lg} src={<HelpArrow />} />
+          <SVG
+            name="Arrow"
+            x={570}
+            y={-4}
+            positioning="absolute"
+            height={SPACE.md}
+            width={SPACE.lg}
+            src={<HelpArrow />}
+          />
         </>
       )}
     </AutoLayout>

diff --git a/widget-src/components/ChangeLogList.tsx b/widget-src/components/ChangeLogList.tsx
@@ -39,26 +39,29 @@ export const ChangeLogList = ({
         horizontal: PADDING.none,
       }}
     >
-      {changeLogs.entries().sort((a, b) => b[1].createdDate - a[1].createdDate ).map((changeLogArr, index) => {
-        const changeLogId = changeLogArr[0];
-        const changeLog = changeLogArr[1];
+      {changeLogs
+        .entries()
+        .sort((a, b) => b[1].createdDate - a[1].createdDate)
+        .map((changeLogArr, index) => {
+          const changeLogId = changeLogArr[0];
+          const changeLog = changeLogArr[1];
 
-        return (
-          <ChangeLogRow
-            key={changeLogId}
-            changeLogId={changeLogId}
-            changeLog={changeLog}
-            isLastRow={index === changeLogIds.length - 1}
-            updateChange={changes => changeLogs.set(changeLogId, { ...changeLog, ...changes })}
-            updateChangeState={changes => changeLogs.set(changeLogId, { ...changeLog, state: { ... changes }})}
-            updateOtherStates={updateOtherStates}
-            deleteChange={() => deleteChange(changeLogId)}
-            setUpdatedDate={setUpdatedDate}
-            showTypes={showTypes}
-            locked={isLocked}
-          />
-        );
-      })}
+          return (
+            <ChangeLogRow
+              key={changeLogId}
+              changeLogId={changeLogId}
+              changeLog={changeLog}
+              isLastRow={index === changeLogIds.length - 1}
+              updateChange={changes => changeLogs.set(changeLogId, { ...changeLog, ...changes })}
+              updateChangeState={changes => changeLogs.set(changeLogId, { ...changeLog, state: { ...changes } })}
+              updateOtherStates={updateOtherStates}
+              deleteChange={() => deleteChange(changeLogId)}
+              setUpdatedDate={setUpdatedDate}
+              showTypes={showTypes}
+              locked={isLocked}
+            />
+          );
+        })}
     </AutoLayout>
   );
 };
diff --git a/widget-src/components/ChangeLogRow.tsx b/widget-src/components/ChangeLogRow.tsx
@@ -32,7 +32,6 @@ export const ChangeLogRow = ({
   showTypes,
   locked,
 }: ChangeLogRowProps) => {
-
   return (
     <AutoLayout
       key={changeLogId}

diff --git a/widget-src/components/header/Description.tsx b/widget-src/components/header/Description.tsx
@@ -40,7 +40,7 @@ export const Description = ({
           fontSize={FONT.size.lg}
           hidden={!description}
         >
-          {descriptionText || "Description..."}
+          {descriptionText || 'Description...'}
         </Text>
       ) : (
         <Input
@@ -62,7 +62,6 @@ export const Description = ({
           fontSize={FONT.size.lg}
           hidden={!description}
         />
-
       )}
     </AutoLayout>
   );

diff --git a/widget-src/components/header/Meta.tsx b/widget-src/components/header/Meta.tsx
@@ -98,7 +98,6 @@ export const Meta = ({
             >
               <SVG name="Add" height={SPACE.sm} width={SPACE.sm} src={<ActionAddIcon />} />
             </AutoLayout>
-
           )}
         </AutoLayout>
       )}

diff --git a/widget-src/components/header/MetaValue.tsx b/widget-src/components/header/MetaValue.tsx
@@ -11,13 +11,7 @@ interface MetaValueProps {
   locked: boolean;
 }
 
-export const MetaValue = ({
-  label,
-  value,
-  setValue,
-  setUpdatedDate,
-  locked,
-}: MetaValueProps) => {
+export const MetaValue = ({ label, value, setValue, setUpdatedDate, locked }: MetaValueProps) => {
   return (
     <AutoLayout
       name="MetaValue"

diff --git a/widget-src/components/header/Name.tsx b/widget-src/components/header/Name.tsx
@@ -11,13 +11,7 @@ interface NameProps {
   locked: boolean;
 }
 
-export const Name = ({
-  name,
-  nameText,
-  setNameText,
-  setUpdatedDate,
-  locked,
-}: NameProps) => {
+export const Name = ({ name, nameText, setNameText, setUpdatedDate, locked }: NameProps) => {
   return (
     <AutoLayout name="NameWrapper" overflow="visible" direction="vertical" width="fill-parent" hidden={!name}>
       {locked ? (
@@ -31,7 +25,7 @@ export const Name = ({
           fontWeight={FONT.weight.bold}
           hidden={!name}
         >
-          {nameText || "Name..."}
+          {nameText || 'Name...'}
         </Text>
       ) : (
         <Input
@@ -53,7 +47,6 @@ export const Name = ({
           value={nameText}
           hidden={!name}
         />
-
       )}
     </AutoLayout>
   );

diff --git a/widget-src/components/log/AddLink.tsx b/widget-src/components/log/AddLink.tsx
@@ -10,16 +10,9 @@ interface AddLinkProps {
   updateChangeState: (changes: Partial<ChangeLogState>) => void;
 }
 
-export const AddLink = ({
-  changeLog,
-  updateChangeState,
-}: AddLinkProps) => {
+export const AddLink = ({ changeLog, updateChangeState }: AddLinkProps) => {
   return (
-    <AutoLayout
-      width="fill-parent"
-      horizontalAlignItems="end"
-      verticalAlignItems="center"
-    >
+    <AutoLayout width="fill-parent" horizontalAlignItems="end" verticalAlignItems="center">
       {changeLog.links && changeLog.links.length > 7 ? (
         <Text
           fill={COLOR.greyDark}
@@ -38,10 +31,10 @@ export const AddLink = ({
             updateChangeState({
               ...changeLog.state,
               showLinkForm: true,
-            })
+            });
           }}
         />
       )}
     </AutoLayout>
-  )
-}
+  );
+};
diff --git a/widget-src/components/log/DateRangeDisplay.tsx b/widget-src/components/log/DateRangeDisplay.tsx
@@ -5,17 +5,12 @@ const { widget } = figma;
 const { AutoLayout, Text } = widget;
 
 interface DateRangeProps {
-  timestamp: number,
-  editedTimestamp: number,
+  timestamp: number;
+  editedTimestamp: number;
   editCount: number;
 }
 
-export const DateRange = ({
-  timestamp,
-  editedTimestamp,
-  editCount,
-}: DateRangeProps) => {
-
+export const DateRange = ({ timestamp, editedTimestamp, editCount }: DateRangeProps) => {
   return (
     <AutoLayout name="Log Date" overflow="visible" spacing={GAP.md} verticalAlignItems="center">
       <Text
-Original file line number
+Diff line change
@@ Expand Up / @@ -147,7 +147,7 @@ function Widget() { @@
               break;
           }
           setUpdatedDate(Date.now());
-        }
+        },
       );
       useEffect(() => {
@@ Expand Down @@