Use `shadcn/ui` as the primary component library for the frontend. #104

ultraviolet10 · 2024-01-16T19:38:03Z

Refers to #99. daisyui has been removed from the necessary package files.

New components have been copied from the shadcn docs (button, navigation-menu, dialog, input).

Only necessary radix-ui components have been installed as instructed by the docs. Upon successful review, will remove the modal.tsx and ModalController files, since those aren't being used any longer.

Added new font and new spinner svg as well. ✨

norswap

My main problem with this is the regression on the modal behaviour. I think the best solution is to have an object like the modal controller, though it could probably be simplified (but maybe best to try to reuse it for now? unless unconvenient)

Reviewing this made me think we should probably improve the readabilty of the modals (increase size, use better contrast), and that we should implement auto-drawing (e.g. when you detect is your turn automatically send the draw tx) — I'll make issues for both these things.

packages/webapp/src/components/ui/button.tsx

packages/webapp/tailwind.config.cjs

packages/webapp/src/utils/ui-utils.ts

packages/webapp/src/styles/globals.css

packages/webapp/src/components/modals/globalErrorModal.tsx

packages/webapp/src/pages/index.tsx

norswap · 2024-01-17T22:55:19Z

packages/webapp/src/pages/_app.tsx

@@ -37,6 +38,13 @@ const MyApp: AppType = ({ Component, pageProps }) => {
      <Head>
        <title>0xFable</title>
        <link rel="shortcut icon" href="/favicon.png" />
+        <link
+          rel="preload"
+          href="/fonts/BluuNext-Bold.otf"


Suggested change

href="/fonts/BluuNext-Bold.otf"

href="/font/BluuNext-Bold.otf"

Was wondering what was causing this warning: "The resource http://localhost:3000/fonts/BluuNext-Bold.otf was preloaded using link preload but not used within a few seconds from the window's load event. Please make sure it has an appropriate as value and it is preloaded intentionally."

Well RIP. This was obviously an issue, but it does not get rid of the warning, at least in dev mode. Looking at the network tab, you can see the font is indeed loaded twice.

Any idea what's going on?

TODO: test in prod mode

The font loads twice because it's once loaded by _app.tsx and then once again by globals.css.
Looking into how to reduce to this to one.

Yup, my understanding is the point of the preload link is to load it only once, before the CSS loads so it does not need to load again.

This doesn't seem fixed, so I suggest we remove it until we can figure out how to make the preload work correctly.

norswap · 2024-01-17T23:01:30Z

packages/webapp/src/components/modals/loadingModal.tsx

  }
 }

 // =================================================================================================

 export type LoadingModalProps = {
-  ctrl?: ModalController


So I was afraid of this when I saw you removed the controller, but that thing existed for a reason!

The problem right now is that all modals have undifferentiated behaviour, meaning you can all close them by clicking outside of them. For instance, try creating a game, then click outside the modal while it is loading, which could easily happen by accident ... context is lost. And re-clicking "Create Game" does not restore it.

We could fix that (i.e. reset the context when reopening the modal, by shifting the state around), but the point is the user should really not be able to close the modal at that point.

If memory serves, some modals were also "closeable" but not "surround closeable", meaning you could quit them with the cross, with escape (and always irrc with a custom button) — this is a good config for error messages that you don't want to disappear when the user clicks outside (which he might do for window focus reason, etc)>

That being said, we probably don't need something like the controller absolutely, but then we need more parameters to pass into the modal component and corresponding useState to be able to toggle them.

The idea behind the controller was:

to encapsulate all that state away and just keep a single object.

you need to set that state both from calls defined outside the component (in the parent, e.g. in a page), and also inside the component, and that state should stay in sync (e.g. when you press the cross to close the modal, that should close it but also sync the useState that says whether it should be displayed.

It also had the distinction between "hidden" (DOM retained) and "closed" (DOM removed), but I'm not sure how significant that is in the codebase (needs a closer look). The distinction is relevant whenever you put stuff with React state inside the modal!

To account for modal specific behaviour, i'm using the onEscapeKeyDown and onInteractOutside props exposed by the DialogContent element, both behaviours that are controlled by specific conditions.
This recreates the closeable and surroundCloseable mechanisms that were earlier defined.

packages/webapp/src/pages/play.tsx

norswap · 2024-01-25T23:55:10Z

packages/webapp/src/components/modals/createGameModal.tsx

  const isGameCreator = store.useIsGameCreator()
  const gameStatus = store.useGameStatus()

-  const preventSurroundClick = gameStatus >= GameStatus.CREATED && loading; // created and loading
-
+  const isSurroundCloseable = loading !== null || (gameStatus >= GameStatus.CREATED) // state is loading or game is in created state


This should be reversed if I'm not mistaken. We only want to allow closing by clicking outside if we haven't created the game yet, or if we're loading while waiting for it to be created.

So loading == null || gameStatus < GameStatus.CREATED

You also inverted the condition in the handlers has well (i.e. you prevent it from closing if "closeable" is true) so the behaviour ends up as expected, but that makes the variable name wrong

norswap · 2024-01-25T23:58:45Z

packages/webapp/src/components/modals/joinGameModal.tsx

+        onInteractOutside={(e) => loading !== null ? e.preventDefault() : null}
+        // prevent modal from closing if esc key is pressed and loading is populated
+        onEscapeKeyDown={(e) => loading !== null ? e.preventDefault() : null} 
+      >


We should abstract those inside the DialogContent with closeable and surroundCloseable properties that apply these behaviours.

Also keying on loading is not sufficient here, we want to forbid closing the modal if we've joined the game status >= GameStatus.JOINED).

Finally, both for this and the create game modal, the cross at the top right of the modal is still displayed and allows closing the model — we want to hide it when the modal shouldn't be closeable.

norswap · 2024-01-26T00:09:52Z

packages/webapp/src/pages/_app.tsx

@@ -37,6 +38,13 @@ const MyApp: AppType = ({ Component, pageProps }) => {
      <Head>
        <title>0xFable</title>
        <link rel="shortcut icon" href="/favicon.png" />
+        <link
+          rel="preload"
+          href="/fonts/BluuNext-Bold.otf"


This doesn't seem fixed, so I suggest we remove it until we can figure out how to make the preload work correctly.

norswap · 2024-01-26T00:18:29Z

This error is displayed: Warning: validateDOMNesting(...): %s cannot appear as a descendant of <%s>.%s both on Firefox and Chrome. I thought it might be caused by the remaining log statement, but that doesn't seem to be the case now that it's gone.

Sadly, this is mangled by my console.error replacements (that don't replace %s but it's basically a dom nesting error.

I disabled the filtering (by commenting the line in setup.ts) and it gives: <p> cannot appear as a descendant of <p> as well as <div> cannot appear as a descendant of <p>.

norswap · 2024-01-26T00:29:35Z

Another feature that got lost is that the code would force opening the correct modal depending on your in-game state, e.g. if you've joined a game or created a game it would open the corresponding modal (because you can't be joining multiple games at once, trying to create a game while being joined in another would fail).

norswap

(ignore I'm just testing branch protection settings in Github)

ultraviolet10 · 2024-01-27T16:06:23Z

Another feature that got lost is that the code would force opening the correct modal depending on your in-game state, e.g. if you've joined a game or created a game it would open the corresponding modal (because you can't be joining multiple games at once, trying to create a game while being joined in another would fail).

if you have joined a game, and refresh the tab and try to create another one, it shows the Game In Progress modal and navigates to /play.

norswap · 2024-01-29T19:32:48Z

Another feature that got lost is that the code would force opening the correct modal depending on your in-game state, e.g. if you've joined a game or created a game it would open the corresponding modal (because you can't be joining multiple games at once, trying to create a game while being joined in another would fail).

if you have joined a game, and refresh the tab and try to create another one, it shows the Game In Progress modal and navigates to /play.

This only works once the game is started.

If you have created a game in reload, the createGameModal doesn't pop up.

Similarly, if you have joined a game but the game hasn't started yet, the joinGameModal doesn't pop up.

These were behaviours that were present in the older versions. You can lookup there, there was a value being computed that was passed to the modals to determine whether they'd be initially open or not (I think it might have been a call to the controller in useEffect). I'm not sure how the shadn modal works but it should be possible to either passion a parameter that determines whether the modal is initial open or not, or to call some js to open it in a useEffect.

norswap

Seems like the DOM error comes from the joinGameModal in particular.

Checklist before merge:

[ ] Get rid of the DOM error
[ ] Remove the preloaded font
[ ] Make sure the appropriate modal is d when we created / joined a game (use old version as ref for the condition) and the page is reloaded
[ ] Make sure we're not needlessly removing styling on the close button

norswap · 2024-01-29T19:12:42Z

packages/webapp/src/components/ui/dialog.tsx

-        <span className="sr-only">Close</span>
-      </DialogPrimitive.Close>
+      {canCloseExternally && (
+        <DialogPrimitive.Close className="absolute right-4 top-4">


Is it okay to get rid of all the tailwind classnames here, like the focus and hover stuff?

this comes in directly from the docs: https://ui.shadcn.com/docs/components/dialog
it's fairly comprehensive in its usage of tailwind features, what would you like removed/abstracted?

The comment preview is shitty, but go to the file & look at the diff, you're replacing a very long list of tailwind class names for DialogPrimitive.Close with just two, and I was wondering why / if it was intentional.

norswap · 2024-01-29T19:39:26Z

packages/webapp/src/components/ui/dialog.tsx

+const DialogContent = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Content>,
+  CustomDialogContentProps
+>(({ className, children, canCloseExternally = true, ...props }, ref) => (


Okay to use a single property instead of closeable / surroundCloseable.

The point of that distinction is that you want to have some modals that the user can close but shouldn't close carelessly by clicking outside, like some error displays. I don't think we were using that capability anywhere, so a single property will do for now. Also we can always make modal closeable with an explicit "okay" button which is probably better anyway.

norswap · 2024-02-01T01:39:17Z

This error is displayed: Warning: validateDOMNesting(...): %s cannot appear as a descendant of <%s>.%s both on Firefox and Chrome. I thought it might be caused by the remaining log statement, but that doesn't seem to be the case now that it's gone.

Sadly, this is mangled by my console.error replacements (that don't replace %s but it's basically a dom nesting error.

I disabled the filtering (by commenting the line in setup.ts) and it gives: <p> cannot appear as a descendant of <p> as well as <div> cannot appear as a descendant of <p>.

It seems to be coming from here:
https://www.npmjs.com/package/@next/react-dev-overlay

Let's investigate this later, I'll open an issue for it.

norswap

We're golden, that was a lot of work.
Let's go 🚢 🚢

ultraviolet10 added 18 commits January 15, 2024 21:53

fix: readme

c3e68e5

update packages

61df2f5

add new font

a409a0a

add new spinner svg for loading state modals

5d71404

shadcn component scripts + util func for classname merges

632a45d

recreate coffee theme from daisy UI within global styles

1260dde

redo navbar

4f17825

relocate loadingModal, update imports

8e30831

redo common modal elements

f85417c

preload font into _app before render

a1b5aa4

update pages with new components

470ce60

update MintDeckModal

9acbcf9

update modals with Dialog component

5b66baf

update navbar style

5b657ce

refactor JoinGameModal

2827a4b

add default open state for JoinGameModal

40bafa2

refactor createGameModal

9a0d96d

Merge branch 'master' into ac/goodbye-daisy

a73e0d4

ultraviolet10 requested a review from norswap January 16, 2024 19:38

add missing type

571853d

norswap requested changes Jan 18, 2024

View reviewed changes

ultraviolet10 added 9 commits January 18, 2024 15:20

remove log statement

9746d73

remove extra parent and parentheses

0a17342

add references for new components

6294819

added docs ref

e77c5c0

use absoute imports for ui components

4e54154

add docstring for util function

7bb1ab8

improve code readability

554e92b

use absolute imports for components

978f2a1

define open/close behaviour for joinGameModal

1d39ac1

ultraviolet10 added 2 commits January 21, 2024 19:52

Merge branch 'master' into goodbye-daisy

8ca7ea3

define open/close behaviour for CreateGameModal

97d7a39

norswap marked this pull request as draft January 22, 2024 01:07

ultraviolet10 added 2 commits January 26, 2024 00:49

update event handlers for dialog components

6dd18e0

fix: typo

4292863

ultraviolet10 requested a review from norswap January 25, 2024 19:45

ultraviolet10 marked this pull request as ready for review January 25, 2024 19:45

norswap reviewed Jan 26, 2024

View reviewed changes

norswap approved these changes Jan 26, 2024

View reviewed changes

norswap requested changes Jan 26, 2024

View reviewed changes

ultraviolet10 marked this pull request as draft January 27, 2024 12:46

abstract keyclick handlers, add prop to dialog component

eb5989b

ultraviolet10 marked this pull request as ready for review January 27, 2024 16:04

ultraviolet10 requested a review from norswap January 27, 2024 16:06

norswap requested changes Jan 29, 2024

View reviewed changes

ultraviolet10 added 3 commits January 31, 2024 20:54

remove font preload, use state variable for modal default opens

1f364bb

add missing style to dialog

03c6f1e

add back dialog close button styles

40a94c5

ultraviolet10 requested a review from norswap January 31, 2024 17:02

norswap mentioned this pull request Feb 1, 2024

Fix validateDOMNesting error #114

Open

norswap approved these changes Feb 1, 2024

View reviewed changes

norswap merged commit a980cd7 into master Feb 1, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Use `shadcn/ui` as the primary component library for the frontend. #104

Use `shadcn/ui` as the primary component library for the frontend. #104

ultraviolet10 commented Jan 16, 2024 •

edited

Loading

norswap left a comment

norswap Jan 17, 2024

norswap Jan 17, 2024

ultraviolet10 Jan 18, 2024

norswap Jan 19, 2024

norswap Jan 26, 2024

norswap Jan 17, 2024

norswap Jan 18, 2024

ultraviolet10 Jan 25, 2024 •

edited

Loading

norswap Jan 25, 2024 •

edited

Loading

norswap Jan 25, 2024

norswap Jan 26, 2024

norswap Jan 26, 2024

norswap Jan 26, 2024

norswap commented Jan 26, 2024 •

edited

Loading

norswap commented Jan 26, 2024

norswap left a comment

ultraviolet10 commented Jan 27, 2024

norswap commented Jan 29, 2024

norswap left a comment

norswap Jan 29, 2024

ultraviolet10 Jan 30, 2024

norswap Jan 30, 2024

norswap Jan 29, 2024

norswap commented Feb 1, 2024

norswap left a comment

	href="/fonts/BluuNext-Bold.otf"
	href="/font/BluuNext-Bold.otf"

Use shadcn/ui as the primary component library for the frontend. #104

Use shadcn/ui as the primary component library for the frontend. #104

Conversation

ultraviolet10 commented Jan 16, 2024 • edited Loading

norswap left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

ultraviolet10 Jan 25, 2024 • edited Loading

Choose a reason for hiding this comment

norswap Jan 25, 2024 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

norswap commented Jan 26, 2024 • edited Loading

norswap commented Jan 26, 2024

norswap left a comment

Choose a reason for hiding this comment

ultraviolet10 commented Jan 27, 2024

norswap commented Jan 29, 2024

norswap left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

norswap commented Feb 1, 2024

norswap left a comment

Choose a reason for hiding this comment

Use `shadcn/ui` as the primary component library for the frontend. #104

Use `shadcn/ui` as the primary component library for the frontend. #104

ultraviolet10 commented Jan 16, 2024 •

edited

Loading

ultraviolet10 Jan 25, 2024 •

edited

Loading

norswap Jan 25, 2024 •

edited

Loading

norswap commented Jan 26, 2024 •

edited

Loading