Migrate Doc-It to MUI5 and latest dependencies

[joebochill]

Fixes #519 and maybe others.

Changes proposed in this Pull Request:

• Rescaffold the application
  • Using MUI5, Craco, MDX, React Router v6
  • Convert all styles to SX
• Clean up issues where I could see them
• Function test
• Logged a few bugs for new items I encountered
• Added a theme picker debug mode (triple click on the SharedToolbar to trigger the picker) to test themes quickly without having to mess with the scheduler (this implementation is rough and could be cleaned up)
• Had to disable prettier for MDX files because of some conflicts with how prettier works with the newer MDX comment syntax (upstream issue)

Notable areas that are iffy:

• The new theme structure causes some issues with our holiday themes...I only fixed them for Thanksgiving since that was the one that was live...we will need a new issue to fix the others.
• With 2000+ icons on the icon browser page (just from updating the package, I did NOT update the metadata file), it's starting to get a little laggy...I logged an issue to set up virtualization for this list to try to mitigate that.
• Currently using alpha version of themes and components until we have official releases

Screenshots:

To Test:

• Clone the repo
• yarn start
• go nuts

[github-actions]

Visit the preview URL for this PR (updated for commit f40e73c):

https://blui-doc-it--pr601-feature-mui5-migrati-j6cixaa3.web.app

_{(expires Fri, 23 Dec 2022 16:54:11 GMT)}

_{🔥 via Firebase Hosting GitHub Action 🌎}

_{Sign: 590ed6fb71e127776beff0a05819e22fd4307b8f}

[joebochill]

Not sure what the deal is with the link checker (I'm about ready to be done with it in the CI steps)...all of the ones being flagged are working.

[jeffvg]

just looking around in here. I see this warning

• The pseudo class ":first-child" is potentially unsafe when doing server-side rendering. Try changing it to ":first-of-type"

Didn't we see this somewhere else before?

[joebochill]

just looking around in here. I see this warning

• The pseudo class ":first-child" is potentially unsafe when doing server-side rendering. Try changing it to ":first-of-type"

Didn't we see this somewhere else before?

Yeah, it's an emotion thing. There are a couple places where we use :first-child (some of them could probably be replaced, others might actually have to be :first-child because we don't know what the type is). In either event, we're not using server-side rendering, so it's not a concern, and looking at the deployed dev-docs (which have the same rules in the markdown.css), the warning does not appear in the production build.

[jeffvg]

should sx borderColor be passed in here?

without renders like this

with borderColor renders like this

[joebochill]

should sx borderColor be passed in here?

without renders like this

with borderColor renders like this

This is actually a bug in our theme (https://github.com/brightlayer-ui/react-themes/blob/dev/src/blueTheme.ts#L185). We are setting the border color to 'divider' for all outlined buttons...we should have another themeOverride that tells outlinedInherit to use 'currentColor'.

Passing in white to the sx will make it look correct for the blue theme, but any other holiday theme (or dark theme) that needs a different color border will be broken. It should ultimately get fixed in the theme (if you want to log a bug to track it that would be great)

[jeffvg]

should sx borderColor be passed in here?
without renders like this
with borderColor renders like this

This is actually a bug in our theme (https://github.com/brightlayer-ui/react-themes/blob/dev/src/blueTheme.ts#L185). We are setting the border color to 'divider' for all outlined buttons...we should have another themeOverride that tells outlinedInherit to use 'currentColor'.

Passing in white to the sx will make it look correct for the blue theme, but any other holiday theme (or dark theme) that needs a different color border will be broken. It should ultimately get fixed in the theme (if you want to log a bug to track it that would be great)

https://github.com/brightlayer-ui/react-themes/issues/50

[jeffvg]

visually it looks good with the exception of the extra spacing (marginTop mt) on the main landing page and other category landing pages. Looks like everything was pushed down like 24px or so

before

after

[jeffvg]

last thing I noticed is the TOC navigation getting chopped off around 1200px wide when manually resized but looks ok on fixed settings (laptop, mobile)

[huayunh]

In addition to what Jeff said...

1

That console log triggers my nerve

2

Table of content differs in border color and font size. (Left: existing; right: new)

3

Convert your TODO.txt at the root to issue reports

4

On the Typography page, the table color should be the same as its background

5

Are you planning to get rid of all the useTheme hooks? Or some of the display: 'flex' styles using MUI's <Stack> component? Or migrate to MUI Grid v2? Should we do the update in the future, or is it "it ain't broke, don't fix it"?

6

Just curious, are you using MUI's "codemods" for the migration?

7

Just want to say thanks for the hard work during the holiday

[joebochill]

I would recommend bundling up any lingering style issues into a new story. This was really just to get the MUI 5 upgrade to a workable state. There's still plenty of opportunities for further enhancement (switching out divs for box, replacing flex styles with Stacks, etc.) — I tried to get what was in front of me, but didn't get everything and yeah if it wasn't broke I didn't fix it.

If anybody wants to tackle any of the remaining issues, feel free to jump on this PR (or we can close it and leave the MUI5 branch as a working branch until we have everything we want cleaned up). I won't have the luxury of vacation time to work on it for another month :P

Regarding the useTheme hooks...I got rid of them where I could. There are some places where it was still necessary because a certain style cannot be achieved in sx (like breakpoints.down media queries or if we need to apply an alpha value to a theme color).

I didn't use the codemod, I just scaffolded a new CLI project, added in all of the config for craco, mdx, etc. by hand and then moved over the src files and cleaned up things that were broken manually. Codemods may have saved some time, but 🤷‍♂️

[bkarambe]

@joebochill Shall we cover https://github.com/brightlayer-ui/doc-it/issues/609 in this PR?

[joebochill]

@joebochill Shall we cover #609 in this PR?

No, that's not directly related to MUI 5, so we will handle it separately.

[huayunh]

Presto!