add ParkingMode

[y3lo]

Changes

New Components and hooks

• Common Component
  • Statistic
    • Statistic
    • ValueStatistic
    • ScoreStatistic
    • CountdownStatistic
  • Markdown
  • PhoneMockup
  • ScrollDownTip
• Common hooks
  • usePrettyPrice
  • usePunycode
  • useShortAddress
• ParkingMode and its components
  • NameDisplay
  • NamePotential
  • ParkingModeFooter

Add peer dependencies:

• @emotion/css
• @emotion/styled (move from dependencies)
• punycode
• marked
• dompurify

Notice

1. According to the design of the ParkingMode page, breakpoints were added to components in this PR for responsiveness, but in order to prevent affecting other branches, existing components were not handled yet.

2. This page involves TLD buttons, but I think reorganizing the button components first could be more efficient for it. Therefore, this PR does not handle styles related to TLD buttons also.

[samishal1998]

Hi @y3lo,
I'm doing drastic changes regarding the structure of the library, as long as you are writing code in */Pages/ParkingMode, there will be no conflicts except for package.json.
But your code will need to refactor the imports, since I changed directories. one option would be to fast-forward your fork after I push so you can change the imports before finalizing the PR.
I added some explanations in README on how we would approach the development in this repo.

Could you minimize your usage of emotion until I'm sure that our bundler will compile it and bundle it correctly, because the latest releases of Next.js don't work well with CSS-in-JS.

[y3lo]

Hi @y3lo, I'm doing drastic changes regarding the structure of the library, as long as you are writing code in */Pages/ParkingMode, there will be no conflicts except for package.json. But your code will need to refactor the imports, since I changed directories. one option would be to fast-forward your fork after I push so you can change the imports before finalizing the PR. I added some explanations in README on how we would approach the development in this repo.

Don't worry, I can wait for you to finish refactoring before rebasing this fork onto the main branch.
In addition to that, this PR includes some low-level components. I suggest temporarily placing them under Page level within ParkingMode component; you can move them to the appropriate layer in the architecture before or after merging. What do you think?

Could you minimize your usage of emotion until I'm sure that our bundler will compile it and bundle it correctly, because the latest releases of Next.js don't work well with CSS-in-JS.

Oh indeed. I didn't consider SSR before. The bad news is that I introduced @emotion/css too when implementing an animation in this PR 😂, but the good news is that I always avoids using @emotion/react.

Hope this hasn't caused you additional work. I noticed Emotion has a documentation about its usage of SSR; not sure if that would be helpful. Alternatively, maybe we can explore switching to another CSS-in-JS library that suits us better in the future. Feel free to let me know if you need me to make any changes.

[samishal1998]

Don't worry, I can wait for you to finish refactoring before rebasing this fork onto the main branch. ...

I pushed most of the changes, it's still a WIP but I didn't want to refactor all the code in 1 stage to reduce the conflicts.

...In addition to that, this PR includes some low-level components. I suggest temporarily placing them under Page level
within ParkingMode component; you can move them to the appropriate layer in the architecture before or after merging. What do you think?

Great, Let Me know which components in the comments when you finish this PR.

Hope this hasn't caused you additional work. I noticed Emotion has a documentation about its usage of SSR; not sure if that would be helpful. Alternatively, maybe we can explore switching to another CSS-in-JS library that suits us better in the future. Feel free to let me know if you need me to make any changes.

No worries, we're still trying to figure out the best approach for css here, I used tailwind because it's faster in development speed and we can override the styles easily in the App repo, but we may have to introduce a prefix for tw, because some of the old pages use a different configuration in tailwind.

The following libraries are supported in Client Components in the app directory (alphabetical):

chakra-ui
kuma-ui
@mui/material
pandacss
styled-jsx
styled-components
stylex
tamagui
tss-react
vanilla-extract
The following are currently working on support:

emotion

Next.js is still working on supporting emotion 😂, I guess choosing styled-jsx could work well with Next.JS, or maybe when stylex is stable, we could change the emotion code to stylex.
I will try to find a way to modify the bundler to compile the CSS-in-JS into plain CSS with randomized classNames, if we don't find a workaround we could use a CSS variant or even plain css with very specific classNames, or some kind of scoping scheme in CSS