pr05 Typescript Migration #7: migrate client components #3619

clairep94 · 2025-09-01T18:21:20Z

pr05 Typescript Migration 7: Migrate the client/components folder

Context:

Rebuild of Pr05/migrate client components rebuild #3616 after getting stuck on MenubarSubmenu
Built on top of pr05 Typescript Migration #5: Migrate client/common folder #3565, should be reviewed after this PR is merged.
Migrate as much of the client/components folder with the following steps:

git mv someComponent.jsx someComponent.tsx. If possible, commit without the no-verify flag, otherwise with no-verify.
Check for all instances of useage for the common component to determine props types
Add props types & unit test update
Add JSDocs

did not refactor or add many unit tests.

Changes:

Client/components:

Client/common:

useModalClose
- update to support generic typing
usePrevious
- update to support generic typing

Other:

any updates to use named exports

Notes:

I have verified that this pull request:

has no linting errors (npm run lint)
has no test errors (npm run test)
is from a uniquely-named feature branch and is up to date with the develop branch.
is descriptively named and links to an issue number, i.e. Fixes #123

…n, and add props interface

… to none-use

…ate to named export

…ntext

clairep94 · 2025-09-01T18:37:44Z

.eslintrc

ignore, repeat from /common

clairep94 · 2025-09-01T18:37:49Z

client/common/Button.stories.jsx

ignore, repeat from /common

clairep94 · 2025-09-01T18:37:54Z

client/common/Button.test.tsx

ignore, repeat from /common

clairep94 · 2025-09-01T18:38:00Z

client/common/Button.tsx

ignore, repeat from /common

clairep94 · 2025-09-01T18:38:09Z

client/common/ButtonOrLink.test.tsx

ignore, repeat from /common

clairep94 · 2025-09-01T18:38:14Z

client/common/ButtonOrLink.tsx

ignore, repeat from /common

clairep94 · 2025-09-01T18:39:35Z

client/common/useModalClose.js

ignore, repeat from /common

clairep94 · 2025-09-01T18:39:46Z

client/common/useModalClose.ts

updated this to use generic <T>

clairep94 · 2025-09-01T18:40:01Z

client/common/useModalClose.test.tsx

ignore, repeat from /common

clairep94 · 2025-09-01T18:40:24Z

client/common/usePrevious.ts

updated this to use generic <T>

oh, good idea!

clairep94 · 2025-09-01T18:40:56Z

client/common/usePrevious.js

ignore, repeat from /common

clairep94 · 2025-09-01T18:41:00Z

client/common/usePrevious.test.tsx

ignore, repeat from /common

clairep94 · 2025-09-01T18:41:10Z

client/common/useSyncFormTranslations.js

ignore, repeat from /common

clairep94 · 2025-09-01T18:41:16Z

client/common/useSyncFormTranslations.test.tsx

ignore, repeat from /common

clairep94 · 2025-09-01T18:41:21Z

client/common/useSyncFormTranslations.ts

ignore, repeat from /common

clairep94 · 2025-09-01T18:42:10Z

client/components/Dropdown.jsx

-export const DropdownWrapper = styled.ul`
-  background-color: ${prop('Modal.background')};
-  border: 1px solid ${prop('Modal.border')};
-  box-shadow: 0 0 18px 0 ${prop('shadowColor')};
-  color: ${prop('primaryTextColor')};
-
-  position: absolute;
-  right: ${(props) => (props.right ? 0 : 'initial')};
-  left: ${(props) => (props.left ? 0 : 'initial')};
-
-  ${(props) => props.align === 'right' && 'right: 0;'}
-  ${(props) => props.align === 'left' && 'left: 0;'}
-
-
-  text-align: left;
-  width: ${remSize(180)};
-  display: flex;
-  flex-direction: column;
-  height: auto;
-  z-index: 2;
-  border-radius: ${remSize(6)};
-
-  & li:first-child {
-    border-radius: ${remSize(5)} ${remSize(5)} 0 0;
-  }
-  & li:last-child {
-    border-radius: 0 0 ${remSize(5)} ${remSize(5)};
-  }
-
-  & li:hover {
-    background-color: ${prop('Button.primary.hover.background')};
-    color: ${prop('Button.primary.hover.foreground')};
-
-    * {
-      color: ${prop('Button.primary.hover.foreground')};
-    }
-  }
-
-  li {
-    height: ${remSize(36)};
-    cursor: pointer;
-    display: flex;
-    align-items: center;
-
-    & button,
-    & button span,
-    & a {
-      padding: ${remSize(8)} ${remSize(16)};
-      font-size: ${remSize(12)};
-    }
-
-    * {
-      text-align: left;
-      justify-content: left;
-
-      color: ${prop('primaryTextColor')};
-      width: 100%;
-      justify-content: flex-start;
-    }
-
-    & button span {
-      padding: 0px;
-    }
-  }
-`;


This was the only portion of the code being used so i moved it into /DropdownMenu/DropdownMenu directly

clairep94 · 2025-09-01T18:43:28Z

client/components/Dropdown/DropdownMenu.tsx

+  right: ${(props) =>
+    props.align === DropdownMenuAlignment.RIGHT ? 0 : 'initial'};
+  left: ${(props) =>
+    props.align === DropdownMenuAlignment.LEFT ? 0 : 'initial'};
+
+  ${(props) => props.align === DropdownMenuAlignment.RIGHT && 'right: 0;'}
+  ${(props) => props.align === DropdownMenuAlignment.LEFT && 'left: 0;'}


right: ${(props) => (props.right ? 0 : 'initial')}; left: ${(props) => (props.left ? 0 : 'initial')}; ${(props) => props.align === 'right' && 'right: 0;'} ${(props) => props.align === 'left' && 'left: 0;'}

this is the previous code from /Dropdown for reference

Other parts of the DropdownWrapper are unchanged

clairep94 · 2025-09-01T18:51:16Z

client/components/Dropdown/DropdownMenu.tsx

+  right: ${(props) =>
+    props.align === DropdownMenuAlignment.RIGHT ? 0 : 'initial'};
+  left: ${(props) =>
+    props.align === DropdownMenuAlignment.LEFT ? 0 : 'initial'};


right: ${(props) => (props.right ? 0 : 'initial')}; left: ${(props) => (props.left ? 0 : 'initial')}; ${(props) => props.align === 'right' && 'right: 0;'} ${(props) => props.align === 'left' && 'left: 0;'}

this is the previous code from /Dropdown for reference

I think this is a typo where props.right and props.left would never exist, as we use props.align, so we would have right:initial and left:initial, then update to right: 0 or left: 0 based on props.align

So I tried to simplify

Other parts of the DropdownWrapper are unchanged

khanniie

Looking great!! thank you so much!

khanniie · 2025-09-02T01:17:54Z

client/components/Dropdown/TableDropdown.tsx


-const TableDropdown = styled(DropdownMenu).attrs({
-  align: 'right',
+export interface TableDropdownProps extends DropdownMenuProps {}


you might be able to alias it as

export type TableDropdown = DropdownMenuProps

https://github.com/processing/p5.js-web-editor/pull/3619/files

Ah I thought maybe we could do this as an extended interface so we can extend with TableDropdown-specific props in the future, but happy to change to a type if preferred! I might have overthought this haha maybe TableDropdown is just a styled DropdownMenu

khanniie · 2025-09-02T01:26:59Z

client/components/Menubar/contexts.tsx

+  createMenuHandlers: (
+    id: string
+  ) => {
+    onMouseOver: (e: React.MouseEvent) => void;


I'm not strongly opinionated about this so feel free to just acknowledge and ignore, but I noticed that the logic changes a bit in this file where the factory methods (e.g. createMenuHandlers) previously would return an empty dict {} but now return dicts where the value is a function that doesn't do anything. I think if there's logic further down the line that checks somehting like menuHandlers.onMouseOver, the return would be different. in the past where it would be undefined now it would return () => {}. if you added the null functions to avoid type errors, we could just make the handlers optional? just wanted to flag it in case

@khanniie good point! updated

might need a re-approve as the change would dismiss the previous approval

raclim

Thanks so much for your work on this @clairep94 and @khanniie!

I really appreciate how much thought and care has went into this, and I think the level of detail in these changes/documentation will make it so much easier for incoming contributors to get onboarded!

I think overall this looks great to me—I'll merge it in after @khanniie gives it a re-review!

khanniie · 2025-09-03T22:53:07Z

Thanks so much for your work on this @clairep94 and @khanniie!

I really appreciate how much thought and care has went into this, and I think the level of detail in these changes/documentation will make it so much easier for incoming contributors to get onboarded!

I think overall this looks great to me—I'll merge it in after @khanniie gives it a re-review!

not sure why I can't reply directly haha but @raclim tysm!! does it make more sense to merge #3565 first? this one has a lot of repeat files from that PR, but that one is still waiting on a review from you! just wanted to flag in case it got lost~

raclim · 2025-09-04T12:43:28Z

@khanniie Thanks for the reminder, sorry for missing that! Since most of the changes from that PR are here, I'll merge that one in and then this one right afterwards!

The merge-base changed after approval.

raclim

Sorry for dismissing the prior reviews! Since we have a history of them, I'm going to go ahead with getting this in!

clairep94 added 21 commits September 1, 2025 16:03

ButtonOrLink: extend props with HTMLElements

7b61989

useModalClose: update to use T

ef9b265

usePrevious: update to use T

342d2ab

useAsModal: delete -- unused

067fea8

RootePage: update to tsx, no-verify

5f511f6

RootPage: update to named export and add props interface

f51af61

PreviewNav: migrate to tsx, no-verify

a77d064

PreviewNav: update to named export, add custom.d.ts for svg definitio…

4b03c97

…n, and add props interface

Dropdown: Migrate DropdownWrapper to DropdownMenu and delete file due…

160a962

… to none-use

DropdownMenu: update to tsx, no-verify

f017cad

DropdownMenu: add props interfaces, update to named export --no-verify

62cafae

MenuItem: update to tsx --no-verify

64bac25

MenuItem: add props interface and update to named export --no-verify

e80fa38

TableDropdown: update to tsx, no-verify

26c65c3

TableDropdown: add interface and update to named export, no-verify

abc09e9

useModalClose: add normaliser for when passedRef is a forwarded ref

43cb138

Menubar/contexts: update to tsx --no-verify

f9042a0

Menubar: update component & test to tsx, no verify

5a74f2a

Menubar: add interface, fix type errors, update context types and upd…

ca99e21

…ate to named export

MenubarItem: migrate to tsx, no-verify

69ac8e3

MenubarItem: add interface, update to named export, update submenu co…

1fc953f

…ntext

clairep94 changed the title ~~Pr05/migrate client components final rebuild~~ Pr05/migrate client components Sep 1, 2025

clairep94 added the pr05 Grant Projects pr05 Grant Projects label Sep 1, 2025

clairep94 marked this pull request as ready for review September 1, 2025 18:35