feat (frontend): New playground frontend state

[ardaerzin]

closes AGE-1497

What has changed?

• Implemented a single usePlayground hook, that allows atomic access to ui and data state of the new playground.
• Implemented mutations that are exposed via usePlayground to change data & ui state
• Implemented a selector middleware for this hook to support custom look ups

What else has changed?

• added transformers for initial data state

Usage

here are some examples:

// initializes the state, by fetching variant & schema data and transforming variants 
usePlayground({
    hookId: "playground",
})

/**
* viewType, displayedVariants, setSelectedVariant are defined in UIState middleware.
* this usage triggers re-renders only if displayedVariants and/or viewType values change
*/
const {viewType, displayedVariants, setSelectedVariant} = usePlayground()

/**
* you'll have access to a stateSelector, that allows you to pick whatever you need 
* from the whole state, and limits re-renders to changes to your selection
*/
const {variantsWithNames} = usePlayground({
    stateSelector: (state) => ({
        variantsWithNames: state.variants.map((variant) => ({
            variantId: variant.id,
            variantName: variant.variantName,
        })),
    }),
})

/**
* if you provide a variantId, then you can use variantSelector that let's you access the variant 
* again, re-renders are controlled by the return values of the selector.
*/ 
const {isChat} = usePlayground({
        variantId,
        variantSelector: useCallback((variant: EnhancedVariant) => {
            return {
                isChat: variant.isChat,
            }
        }, []),
    })

// for common things like reaching a variant, you don't have to write selectors as these are already included
// trying to access variant without providing a variantId will cause an error
const {variant} = usePlayground({
        variantId,
    })

/**
* if you are building a UI element that allows user to change some values of a property of a 
* variant [we are talking about configuration / test related parameters here]
* just provide the id of the property you are targeting to the hook, and it'll give you an
* object with its value and a mutator
*/
const {variantConfigProperty: property} = usePlayground({
    variantId,
    propertyId,
})


const {__metadata: metadata, value, handleChange} = property

[ashrafchowdury]

👍