Client Core MUI Isolation and Storybook UI #7583

jerknose · 2023-02-14T19:29:33Z

Summary

UI Package with storybook integration. Absorbed all MUI components from client-core to /packages/UI

References

barankyle

Seeing some bugs that hopefully only require minor fixes:

There's a purplish border on some button on the admin pages. Here's a screenshot from /admin/projects; the three big buttons at the top and the Refresh Github Repo Access button have this border:
/admin/routes is throwing this:

Warning: Styled(input) contains an input of type checkbox with both checked and defaultChecked props. Input elements must be either controlled or uncontrolled (specify either the checked prop, or the defaultChecked prop, but not both). Decide between using a controlled or uncontrolled input element and remove one of these props. More info: https://reactjs.org/link/controlled-components
    at input
    at O2 (https://localhost:3000/node_modules/.vite/deps/chunk-SGXG4WFK.js?v=09e9b42f:1066:6)
    at span
    at O2 (https://localhost:3000/node_modules/.vite/deps/chunk-SGXG4WFK.js?v=09e9b42f:1066:6)
    at ButtonBase2 (https://localhost:3000/node_modules/.vite/deps/chunk-LNA6ROTB.js?v=09e9b42f:10261:17)
    at O2 (https://localhost:3000/node_modules/.vite/deps/chunk-SGXG4WFK.js?v=09e9b42f:1066:6)
    at SwitchBase2 (https://localhost:3000/node_modules/.vite/deps/@mui_material.js?v=09e9b42f:9195:5)
    at O2 (https://localhost:3000/node_modules/.vite/deps/chunk-SGXG4WFK.js?v=09e9b42f:1066:6)
    at Checkbox2 (https://localhost:3000/node_modules/.vite/deps/@mui_material.js?v=09e9b42f:9483:17)
    at Checkbox
    at td
    at O2 (https://localhost:3000/node_modules/.vite/deps/chunk-SGXG4WFK.js?v=09e9b42f:1066:6)
    at TableCell2 (https://localhost:3000/node_modules/.vite/deps/@mui_material.js?v=09e9b42f:29670:17)
    at TableCell (https://localhost:3000/@fs/home/kyle/Development/Forks/xrengine/packages/ui/src/TableCell/index.tsx:3:22)
<snip>

/admin/avatars is throwing the same error about checkboxes, and also:

Uncaught TypeError: Cannot read properties of undefined (reading 'state')
    at getRendererSceneMetadataState (WebGLRendererSystem.ts:323:59)
    at ShadowSystem.ts:107:37
    at renderWithHooks (react-reconciler.development.js:7478:18)
    at mountIndeterminateComponent (react-reconciler.development.js:11247:13)
<snip>

/admin/bots is throwing this:

react.development.js:209 Warning: Failed prop type: Invalid prop `className` of type `object` supplied to `ForwardRef(Dialog2)`, expected `string`.
    at Dialog2 (https://localhost:3000/node_modules/.vite/deps/@mui_material.js?v=09e9b42f:10511:17)
    at Dialog (https://localhost:3000/@fs/home/kyle/Development/Forks/xrengine/packages/ui/src/Dialog/index.tsx:6:19)
    at div
    at UpdateBot (https://localhost:3000/@fs/home/kyle/Development/Forks/xrengine/packages/client-core/src/admin/components/Bots/UpdateBot.tsx:19:22)
    at div
    at DisplayBots (https://localhost:3000/@fs/home/kyle/Development/Forks/xrengine/packages/client-core/src/admin/components/Bots/DisplayBots.tsx:19:35)
<snip>

On /admin/locations, when I click on the 'View' button for a location, or click on the Create Location button, I get this:

Uncaught TypeError: undefined is not iterable (cannot read property Symbol(Symbol.iterator))
    at index.tsx:79:30
    at commitHookEffectListMount (react-dom.development.js:23150:26)
    at commitPassiveMountOnFiber (react-dom.development.js:24931:11)

index.tsx is in the stack trace is client-core/src/common/components/InputText/index.tsx

/admin/users is now throwing

Warning: Function components cannot be given refs. Attempts to access this ref will fail. Did you mean to use React.forwardRef()?

Check the render method of `ForwardRef(Tooltip2)`.
    at Icon (https://localhost:3000/@fs/home/kyle/Development/Forks/xrengine/packages/ui/src/Icon/index.tsx:135:17)
    at Tooltip2 (https://localhost:3000/node_modules/.vite/deps/@mui_material.js?v=4635a9a8:25885:17)
    at Tooltip
    at div
    at O2 (https://localhost:3000/node_modules/.vite/deps/chunk-SGXG4WFK.js?v=c28205d6:1066:6)
    at Box3 (https://localhost:3000/node_modules/.vite/deps/chunk-GF2L3GBV.js?v=c28205d6:2052:19)
    at Box (https://localhost:3000/@fs/home/kyle/Development/Forks/xrengine/packages/ui/src/Box/index.tsx:3:16)

On /admin/settings, the icons next to each setting type is the EE Chevron instead of an individualized icon.

What I see:

What it should look like:

jerknose · 2023-02-22T01:52:29Z

Icons should be fixed. @barankyle there are several of these types of errors that need to be fixed. But are unrelated to this PR. Can you check dev and create issues for these?

barankyle · 2023-02-22T02:09:47Z

Icons should be fixed. @barankyle there are several of these types of errors that need to be fixed. But are unrelated to this PR. Can you check dev and create issues for these?

I've updated the list with what I currently see, but how are some of these things not related to this PR if they didn't appear before it?

packages/ui/src/Card/Card.test.tsx

packages/ui/src/Collapse/Collapse.test.tsx

packages/ui/src/Grid/index.stories.tsx

packages/ui/src/IconButton/index.tsx

packages/ui/src/SvgIcon/SvgIcon.test.tsx

packages/client-core/src/admin/adminRoutes.tsx

hanzlamateen · 2023-02-22T10:10:35Z

On running npm run predeploy I am getting some errors and failed tests. Is this normal?

Also how to run storybook on my end. I tried running npm run storybook from packages/ui folder after running above command and getting error. My node version is v19.6.0 and I am running WSL2 on Windows 11.

Snapshot Summary
 › 69 snapshots written from 69 test suites.

Test Suites: 2 failed, 69 passed, 71 total
Tests:       69 passed, 69 total
Snapshots:   69 written, 69 total
Time:        294.283 s
Ran all test suites.
Test results written to: tests/jest-test-results.json

> @xrengine/[email protected] build:storybook
> build-storybook -c .storybook -o build/

info @storybook/react v6.5.16
info
info => Cleaning outputDir: /home/hanzlamateen/xrengine/packages/ui/build/
info => Loading presets
info => Compiling manager..
node:internal/crypto/hash:71
  this[kHandle] = new _Hash(algorithm, xofLen);
                  ^

Error: error:0308010C:digital envelope routines::unsupported
    at new Hash (node:internal/crypto/hash:71:19)
    at Object.createHash (node:crypto:140:10)
    at module.exports (/home/hanzlamateen/xrengine/node_modules/webpack/lib/util/createHash.js:135:53)
    at NormalModule._initBuildHash (/home/hanzlamateen/xrengine/node_modules/webpack/lib/NormalModule.js:417:16)
    at handleParseError (/home/hanzlamateen/xrengine/node_modules/webpack/lib/NormalModule.js:471:10)
    at /home/hanzlamateen/xrengine/node_modules/webpack/lib/NormalModule.js:503:5
    at /home/hanzlamateen/xrengine/node_modules/webpack/lib/NormalModule.js:358:12
    at /home/hanzlamateen/xrengine/node_modules/loader-runner/lib/LoaderRunner.js:373:3
    at iterateNormalLoaders (/home/hanzlamateen/xrengine/node_modules/loader-runner/lib/LoaderRunner.js:214:10)
    at Array.<anonymous> (/home/hanzlamateen/xrengine/node_modules/loader-runner/lib/LoaderRunner.js:205:4)
    at Storage.finished (/home/hanzlamateen/xrengine/node_modules/enhanced-resolve/lib/CachedInputFileSystem.js:55:16)
    at /home/hanzlamateen/xrengine/node_modules/enhanced-resolve/lib/CachedInputFileSystem.js:91:9
    at /home/hanzlamateen/xrengine/node_modules/graceful-fs/graceful-fs.js:123:16
    at FSReqCallback.readFileAfterClose [as oncomplete] (node:internal/fs/read_file_context:68:3) {
  opensslErrorStack: [ 'error:03000086:digital envelope routines::initialization error' ],
  library: 'digital envelope routines',
  reason: 'unsupported',
  code: 'ERR_OSSL_EVP_UNSUPPORTED'
}

Node.js v19.6.0
npm ERR! Lifecycle script `build:storybook` failed with error:
npm ERR! Error: command failed
npm ERR!   in workspace: @xrengine/[email protected]
npm ERR!   at location: /home/hanzlamateen/xrengine/packages/ui
npm ERR! Lifecycle script `predeploy` failed with error:
npm ERR! Error: command failed
npm ERR!   in workspace: @xrengine/[email protected]
npm ERR!   at location: /home/hanzlamateen/xrengine/packages/ui

hanzlamateen · 2023-02-22T10:26:57Z

I also faced the issues which Kyle mentioned, specially the purple border around buttons and icon on /admin/settings menu being wrong.

hanzlamateen · 2023-02-22T10:29:12Z

Some social icons on ProfileMenu are appearing in small size.

hanzlamateen · 2023-02-22T10:40:04Z

The icons of EmoteMenu seems to be messed up 😬

hanzlamateen · 2023-02-22T10:45:34Z

The help icon tooltip of AvatarPreview control is not working when tested in AvatarSelectMenu.tsx file. As shown below

speigg · 2023-02-22T17:44:46Z

@barankyle @hanzlamateen thanks for the thorough review!

It appears that this PR depends on another one #7614

So, let's get that other PR reviewed and merged in first, as some of the issues we are seeing here may originate in the React Router upgrade.

jerknose · 2023-02-22T20:03:12Z

On running npm run predeploy I am getting some errors and failed tests. Is this normal?

Also how to run storybook on my end. I tried running npm run storybook from packages/ui folder after running above command and getting error. My node version is v19.6.0 and I am running WSL2 on Windows 11.

Snapshot Summary
 › 69 snapshots written from 69 test suites.

Test Suites: 2 failed, 69 passed, 71 total
Tests:       69 passed, 69 total
Snapshots:   69 written, 69 total
Time:        294.283 s
Ran all test suites.
Test results written to: tests/jest-test-results.json

> @xrengine/[email protected] build:storybook
> build-storybook -c .storybook -o build/

info @storybook/react v6.5.16
info
info => Cleaning outputDir: /home/hanzlamateen/xrengine/packages/ui/build/
info => Loading presets
info => Compiling manager..
node:internal/crypto/hash:71
  this[kHandle] = new _Hash(algorithm, xofLen);
                  ^

Error: error:0308010C:digital envelope routines::unsupported
    at new Hash (node:internal/crypto/hash:71:19)
    at Object.createHash (node:crypto:140:10)
    at module.exports (/home/hanzlamateen/xrengine/node_modules/webpack/lib/util/createHash.js:135:53)
    at NormalModule._initBuildHash (/home/hanzlamateen/xrengine/node_modules/webpack/lib/NormalModule.js:417:16)
    at handleParseError (/home/hanzlamateen/xrengine/node_modules/webpack/lib/NormalModule.js:471:10)
    at /home/hanzlamateen/xrengine/node_modules/webpack/lib/NormalModule.js:503:5
    at /home/hanzlamateen/xrengine/node_modules/webpack/lib/NormalModule.js:358:12
    at /home/hanzlamateen/xrengine/node_modules/loader-runner/lib/LoaderRunner.js:373:3
    at iterateNormalLoaders (/home/hanzlamateen/xrengine/node_modules/loader-runner/lib/LoaderRunner.js:214:10)
    at Array.<anonymous> (/home/hanzlamateen/xrengine/node_modules/loader-runner/lib/LoaderRunner.js:205:4)
    at Storage.finished (/home/hanzlamateen/xrengine/node_modules/enhanced-resolve/lib/CachedInputFileSystem.js:55:16)
    at /home/hanzlamateen/xrengine/node_modules/enhanced-resolve/lib/CachedInputFileSystem.js:91:9
    at /home/hanzlamateen/xrengine/node_modules/graceful-fs/graceful-fs.js:123:16
    at FSReqCallback.readFileAfterClose [as oncomplete] (node:internal/fs/read_file_context:68:3) {
  opensslErrorStack: [ 'error:03000086:digital envelope routines::initialization error' ],
  library: 'digital envelope routines',
  reason: 'unsupported',
  code: 'ERR_OSSL_EVP_UNSUPPORTED'
}

Node.js v19.6.0
npm ERR! Lifecycle script `build:storybook` failed with error:
npm ERR! Error: command failed
npm ERR!   in workspace: @xrengine/[email protected]
npm ERR!   at location: /home/hanzlamateen/xrengine/packages/ui
npm ERR! Lifecycle script `predeploy` failed with error:
npm ERR! Error: command failed
npm ERR!   in workspace: @xrengine/[email protected]
npm ERR!   at location: /home/hanzlamateen/xrengine/packages/ui

This is most likely an incompatibly with Node / openssl. I'm on version 16. Newer versions are much more strict on allowing insecure servers. There's a --openssl-legacy-provider flag to ignore this.

Issues addressed

jerknose added 4 commits February 14, 2023 09:51

Restore previous state.

261e568

redo merge

0a370ef

Merge branch 'dev' into migration/tailwind-phase-2

48594bb

Merge branch 'dev' into migration/tailwind-phase-2

47657c1

jerknose self-assigned this Feb 14, 2023

jerknose added 8 commits February 15, 2023 09:21

Move dashboard to ui. Update react router.

cf904d0

Merge branch 'dev' into migration/tailwind-phase-2

4e84541

Update package.json

c223e9a

No HOC, Switch the switches, History is history.

b467a79

Use hooks. More path / location updates.

464a480

Updated supsense and routing.

8f62366

mergy

1c56cc6

mergy 2

741f212

jerknose linked an issue Feb 20, 2023 that may be closed by this pull request

Tailwind UI/XRUI migration pilot test #7500

Closed

jerknose changed the title ~~Migration/tailwind phase 2~~ Client Core MUI Isolation and Storybook UI Feb 20, 2023

jerknose requested a review from speigg February 20, 2023 19:12

Working integration with react router 6 branch

299bcdb

jerknose marked this pull request as ready for review February 20, 2023 20:52

Add needed stub file.

e97fd70

speigg requested review from AidanCaruso, HexaField, barankyle and hanzlamateen February 21, 2023 01:08

jerknose added 2 commits February 20, 2023 17:14

Merge branch 'dev' into migration/tailwind-phase-2

db10676

Merge branch 'dev' into migration/tailwind-phase-2

fc64e81

barankyle suggested changes Feb 21, 2023

View reviewed changes

Button fixes galore!

228ccbd

hanzlamateen previously requested changes Feb 22, 2023

View reviewed changes

jerknose added 5 commits February 22, 2023 12:10

Bad avatar defaults, bad!

5e2f052

Fix setting server error

6385290

TS excludes, user graph fix.

2c012e6

Tons of fixes.

6bdb641

Locations and modals

75fd81e

jerknose requested a review from barankyle February 23, 2023 16:53

jerknose mentioned this pull request Feb 23, 2023

The help icon tooltip of AvatarPreview control is not working when tested in AvatarSelectMenu.tsx file. As shown below #7623

Closed

jerknose requested a review from hanzlamateen February 23, 2023 16:56

jerknose added 2 commits February 23, 2023 09:12

Apply missing stash. Defaults and test names.

38944f7

Merge branch 'dev' into migration/tailwind-phase-2

5eb88c0

speigg approved these changes Feb 24, 2023

View reviewed changes

speigg enabled auto-merge February 24, 2023 00:00

barankyle approved these changes Feb 24, 2023

View reviewed changes

speigg added this pull request to the merge queue Feb 24, 2023

Merged via the queue into dev with commit 26bfd97 Feb 24, 2023

speigg deleted the migration/tailwind-phase-2 branch February 24, 2023 00:46

Uh oh!

Client Core MUI Isolation and Storybook UI #7583

Client Core MUI Isolation and Storybook UI #7583

Uh oh!

Conversation

jerknose commented Feb 14, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

References

Uh oh!

barankyle left a comment • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

jerknose commented Feb 22, 2023

Uh oh!

barankyle commented Feb 22, 2023

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

hanzlamateen commented Feb 22, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

hanzlamateen commented Feb 22, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

hanzlamateen commented Feb 22, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

hanzlamateen commented Feb 22, 2023

Uh oh!

hanzlamateen commented Feb 22, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

speigg commented Feb 22, 2023

Uh oh!

jerknose commented Feb 22, 2023

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

jerknose commented Feb 14, 2023 •

edited

Loading

barankyle left a comment •

edited

Loading

hanzlamateen commented Feb 22, 2023 •

edited

Loading

hanzlamateen commented Feb 22, 2023 •

edited

Loading

hanzlamateen commented Feb 22, 2023 •

edited

Loading

hanzlamateen commented Feb 22, 2023 •

edited

Loading