replace toaster with new useToaster api

[mayank99]

Changes

The Toaster class instance been replaced with a useToaster hook which returns an object that has properties matching the public functions in the old api.

Only api change needed from user side is:

- import { toaster } from '@itwin/itwinui-react';
+ import { useToaster } from '@itwin/itwinui-react';

  export default () => {
+   const toaster = useToaster();

    return <button onClick={() => toaster.positive('hello')}>show</button>
  };

How it works

• The useToaster hook simply dispatches reducer actions.
• The reducer state is stored in <ToastProvider>, which wraps the entire tree inside <ThemeProvider>.
• <ThemeProvider> renders a <Toaster> which reads the state and renders <Toast>s accordingly.

TODO: Will work on unit tests Fixed.

Testing

Tested in vite playground and storybook.

Everything seems to work well. 🎉

Docs

Added changeset.

Need to fix website example. Fixed via #1353.

Updated migration guide. https://github.com/iTwin/iTwinUI/wiki/iTwinUI-react-v3-migration-guide#toaster

[gretanausedaite]

Couple questions. Other than that component looks much simpler!

[gretanausedaite]

LGTM.