Refactoring: No easy way to use subcomponents independently

[NilsJacobsen]

The bundle component was built to work well in editing mode with slotting and nesting other stuff inside it. U basically passed in props and used an event listener to get the new value of the json back.

New Requirements:

• With SDK2 the event dispatching should be on the bundle layer, but more grannular typed. (Variant changed, Message Changed, Bundle) This should make it easier to decouple the wireing of the components.
• The components' usage should enable the slotting of custom buttons and texts wherever an app developer wants them.
• All components should have their own story file and short docs to show how they should be used.
  
  (Updates will be tracked in this issue)

[NilsJacobsen]

The following can be found here: https://link.excalidraw.com/l/1RmnkzJA3Ph/QEikyCrXjN

Interaction:

Thought through use cases:

Component structure:

In code:

const test = () => {
    return <inlang-bundle
        bundle={bundle}
        messageIds={messageIds}
    >
        <inlang-message
            slot="message"
            message={message}
            settings={settings}
        >
            <inlang-selector-bar
                slot="selector-bar"
                selectors={selectors}
                message={message}
                messageIds={messageIds}
            >
            </inlang-selector-bar>
            <inlang-variant
                variant={variant}
            >
                <inlang-pattern-editor
                    slot="pattern-editor"
                    variant={variant}
                    messageId={messageId}
                >
                </inlang-pattern-editor>
                <inlang-selector-button
                    slot="variant-action"
                    message={message}
                    messageIds={messageIds}
                >
                </inlang-selector-button>
            </inlang-variant>
        </inlang-message>
    </inlang-bundle>
}

Challenges that will still be present in the app (acceptable for now)

• Fake display locales when not there yet
• Sort variants

[NilsJacobsen]

Seams to work quite well. Gonna open a draft PR and after some clean up and testing we can merge.

[NilsJacobsen]

Just as a test we can nest stuff and the component is fully wired up.