Create DialogProvider for Vuu ui

[heswell]

To make it convenient for components to display dialogs from any location within the application component hierarchy, we will create a DialogProvider. The Vuu Shell will include a DialogProvider at the application level. Showcase examples that need to demo component with dialogs can also be individually wrapped with a DialogProvider.

The DialogProvider will provide a single value a showDialog function.

1. code can live in the existing file vuu-popups useDialog
2. create a react context object DIalogContext, type will be:

interface DialogContextProps {
  showDialog: (dialogContent: ReactElement) => void;
}

3. Create a DialogProvider. It will wrap children with DialogContext.Provider

// use the existing useDialog hook to manage dialog state

const showDialog = (content) => {
  setDialogState(content)
}

return (
<DialogContext.Provider value={{showDialog}}>
  {children}
  {dialog}
</DialogContext.Provider>


)