build(deps): update core deps

[seaerchin]

NOTE: PLEASE DELETE NODE MODULES AND DO A CLEAN INSTALL

Problem

Isomer is unable to use cool features from design system due to lacking the appropriate peer deps. This restricts engineering capability as we are either unable to build to design specs or we have to find workarounds when a ready made solution is available in design system.

this PR also fixes hmr!!!

Solution

1. update chakra 1.x to chakra 2.x
2. update react 16 to react 18
3. update design system to latest
4. update react scripts to react scripts 5
5. update sentry to latest 7.x
6. update storybook config
7. update storybook to 6.5

Breaking Changes

• Yes - this PR contains breaking changes
• No - this PR is backwards compatible

1. updating to chakra 2.x removes the isFullWidth prop - this has been update to use w = 100%.
2. updating from react 16 to react 18 uses a new api for rendering index.js (details available here); this also removes implicit children so if there's a complain about children, this means the type needs to be wrapped in PropsWithChildren
3. updating to latest storybook version uses webpack 5 under the hood. unfortunately, storybook docgen uses webpack 4 so we need to pin this in our devDeps (see here for details)
4. removed storybook-preset-craco from addons for storybook config and replaced w/ @storybook/preset-create-react-app; the craco preset doesn't work with storybook possibly due to webpack 5 being used in storybook's new version.

Visual inconsistencies

1. hover state for folder/ungrouped cards on Workspace lacks border colour (might be true for other cards in Resources and Media)
2. contextMenu colour for items is wrong for the cards ^
   fyi @NatMaeTan @ogpgerald

Manual verification
the commands below should still work without any issues.

please run npm ci prior to running these commands!!!

1. npm run dev
2. npm run build-storybook (required for chromatic deployment)
3. npm run storybook
4. npm run test-e2e
5. npm run cypress:open

[dcshzj]

Does this need to be upgraded too? From their migration docs:

If you installed additional Sentry packages, such as@sentry/tracing alongside your Sentry SDK (e.g. @sentry/react or @sentry/node), make sure to upgrade all of them to version 7.

[seaerchin]

good catch! i only saw the issue w/ the corresponding PR and just ran npm i so i missed this. thanks for the catch!

[kishore03109]

The changes look ok to me, but since this is quite a significant change in our packages, may I get your help to run e2e on this branch? I would feel safer approving this after running them on Cypress!

[kishore03109]

Hmm, is there a reason why we are using snake_case here?
If it is low effort, can we shift to camelCase instead? Else, I understand this would be out of the scope of this PR!

[seaerchin]

we can't, because chromatic will fail with an eslint error here complaining about none camel cased variables. you can try this for yourself (run npm run build-storybook) HAHAHAHA

[seaerchin]

The changes look ok to me, but since this is quite a significant change in our packages, may I get your help to run e2e on this branch? I would feel safer approving this after running them on Cypress!

hmm i actually omitted e2e purely because build level stuff won't fail at run time but instead, will fail to even compile. nevertheless, this is a valid point! i'll run e2e tests (and verify) for this PR

[seaerchin]

gonna close this PR first to avoid pollution; can't find a way to make cypress work w/ webpack 5 so i think it's better to have e2e in teh meantime when we're trying to get features out rather than start from scratch (using playwright) or omitting e2e totally