12787 resizable layout component

[Jondyr]

Description

• New component in studio-components using flexbox and flex-grow to create a resizable layout that keeps proportions when scaled
  • StudioResizableLayoutContainer
    • Should be used as parent element to StudioResizableLayoutElement
    • Can be defined as either a vertical or horizontal layout
    • Saves resize state in local storage (uniquely identified by localStorageContext prop)
    • Custom styling can be added with the style prop
  • StudioResizableLayoutElement
    • Can restrict resizing with minimumSize
    • Collapsing can be toggled with collapsed and size controlled with collapsedSize
    • Custom styling can be added with the style prop
  • StudioResizableLayoutHandle
    • Automatically added between Element components
    • Handles mouse and keyboard events for resizing
• Container is a wrapper to set up the resizable layout container. Element is used to create individual resizable boxes within the container and should only be used inside a Container component
• New storybook entry
• Moved useLocalStorage and useWebStorage hooks to studio-components hooks folder
• Moved layoutSet dropdown from components pane to new toolbar similar to the one on the datamodels page

Related Issue(s)

• It should be possible to adjust the sizes of the panels by dragging them narrower or wider #12787
• Control widths of tabs in Datamodel Tool #12730
• Also trying to solve Move "Sidegruppe" select on lage page to the top of the page #13006 as part of using the component in formdesigner

Verification

• Your code builds clean without any errors or warnings
• Manual testing done (required)
• Relevant automated test added (if you find this hard, leave it and we'll help out)

Documentation

• User documentation is updated with a separate linked PR in altinn-studio-docs. (if applicable)
• Storybook entry added

[mlqn]

Nice work! 🚀