Upgrade design system / frontend engine

[weili-govtech]

Changes

• Upgraded to design system v3.0.0-alpha.6 and frontend-engine v2.0.0-alpha.1
• migrated to v3 design tokens
• fixed broken test cases
• manually fixed media queries using desktop4k
• note: it will be easier to review by commits

[qroll]

encountering a TypeError: Cannot assign to read only property '0' of object '[object Array]' when saving Contact Number, Dropdown and Radio

the error stack apparently originates from dnd kit

[qroll]

Non-critical, but would be good to migrate these css properties too

• border
• border-radius
• transition (use Motion)

[weili-govtech]

encountering a TypeError: Cannot assign to read only property '0' of object '[object Array]' when saving Contact Number, Dropdown and Radio

the error stack apparently originates from dnd kit

traced the issue to RHF issue #12691, it appears the yupResolver turned the entire form readOnly, this probably broke dnd-kit as it tries to mutate the value

[qroll]

traced the issue to RHF issue #12691, it appears the yupResolver turned the entire form readOnly, this probably broke dnd-kit as it tries to mutate the value

got a slightly different error for the dropdown, the radio is okay now though

Cannot assign to read only property 'label' of object '#<Object>'

tried to clone in the bulk edit resolver but that had no effect, so it should be something else causing the problem

[weili-govtech]

thanks for spotting the bug, after delving deeper, I found that the error is related to how immer is making the states immutable. turning freeze off via setAutoFreeze(false) will fix the error but that defeats the purpose of using immer.

I didnt manage to find out the exact place causing the error though, even cloneDeep / JSON.parse(JSON.stringify()) failed to work, I suspect RHF maintains internal references to certain immutable values and attempted to mutate them. in view of that, I decided to downgrade it by 1 version to get around the error for now.