REFACTOR: InsertModeSelector & dndTypes to TypeScript

[JamesAlias]

TODO

• StyleCI is throwing errors for PHP files that I didn't touch at all 🤔 😅

What I did
Refactor InsertModeSelector and dndTypes to TypeScript, as well as some small "camp site rule" clean ups on a rainy evening.

How I did it

How to verify it
I would hope running the tests would suffice, but I think I should test this manually in different setups, right?

[mhsdesign]

Hi :D Thats how i got the decorators to work: #3270 (comment)
(i used my own typings for a plugin... and basically typed @neos like @context from redux)
I think we can just move that into core aswell, then we dont need your "hack" ^^

[JamesAlias]

Hi :D Thats how i got the decorators to work: #3270 (comment) (i used my own typings for a plugin... and basically typed @neos like @context from redux) I think we can just move that into core aswell, then we dont need your "hack" ^^

Nice! I Think we discussed this approach during the sprint in Hamburg last year 👍

[JamesAlias]

Failing test due to the change of ButtonGroupItem property key from array index to id.

I think id is the better key as I expect ids to be unique (at least within a group).

If there's no objection I will update the snapshot.

➤ YN0000: FAIL src/ButtonGroup/buttonGroup.spec.tsx
➤ YN0000:   ● <ButtonGroup/> › should render correctly.
➤ YN0000: 
➤ YN0000:     expect(received).toMatchSnapshot()
➤ YN0000: 
➤ YN0000:     Snapshot name: `<ButtonGroup/> should render correctly. 1`
➤ YN0000: 
➤ YN0000:     - Snapshot  - 2
➤ YN0000:     + Received  + 2
➤ YN0000: 
➤ YN0000:     @@ -9,11 +9,11 @@
➤ YN0000:               Foo button
➤ YN0000:             </div>
➤ YN0000:           }
➤ YN0000:           id="foo"
➤ YN0000:           isPressed={true}
➤ YN0000:     -     key="0"
➤ YN0000:     +     key="foo"
➤ YN0000:           onClick={[MockFunction]}
➤ YN0000:         >
➤ YN0000:           Foo button
➤ YN0000:         </ButtonGroupItem>
➤ YN0000:         <ButtonGroupItem
➤ YN0000:     @@ -24,11 +24,11 @@
➤ YN0000:               Bar button
➤ YN0000:             </div>
➤ YN0000:           }
➤ YN0000:           id="bar"
➤ YN0000:           isPressed={false}
➤ YN0000:     -     key="1"
➤ YN0000:     +     key="bar"
➤ YN0000:           onClick={[MockFunction]}
➤ YN0000:         >
➤ YN0000:           Bar button
➤ YN0000:         </ButtonGroupItem>
➤ YN0000:       </div>
➤ YN0000: 
➤ YN0000:       at Object.<anonymous> (src/ButtonGroup/<stdin>:23:33)
➤ YN0000: 
➤ YN0000: 
➤ YN0000: Snapshot Summary
➤ YN0000:  › 1 snapshot failed from 1 test suite. Inspect your code changes or re-run jest with `-u` to update them.

[mhsdesign]

Implemented: #3430 (comment)
So neos is now typed like redux connect (and must be similar used in typescript)

Fyi we cant use the neos or connect warpper in decorator syntax as its against the spec (a decorator might only mutate but wrap an object) see DefinitelyTyped/DefinitelyTyped#9951

[mhsdesign]

Ups a merge conflict turned up?