stories: add stories for tooltips and toast alerts

Author: jamaljsr

app/src/__stories__/AlertContainer.stories.tsx

@@ -0,0 +1,27 @@
+import React from 'react';
+import { useStore } from 'store';
+import AlertContainer from 'components/common/AlertContainer';
+import { Button } from 'components/common/base';
+
+export default {
+  title: 'Components/Alerts',
+  component: AlertContainer,
+  parameters: { centered: true },
+};
+
+export const Default = () => {
+  const store = useStore();
+  const handleClick = () => {
+    store.uiStore.notify(
+      'This is a sample message to be displayed inside of a toast alert',
+      'Sample Alert Title',
+    );
+  };
+
+  return (
+    <>
+      <Button onClick={handleClick}>Show Alert</Button>
+      <AlertContainer />
+    </>
+  );
+};

app/src/__stories__/Tip.stories.tsx

@@ -0,0 +1,31 @@
+import React from 'react';
+import Tip from 'components/common/Tip';
+
+export default {
+  title: 'Components/Tooltip',
+  component: Tip,
+  parameters: { contained: true },
+};
+
+const placements = [
+  'top',
+  'topRight',
+  'right',
+  'bottomRight',
+  'bottom',
+  'bottomLeft',
+  'left',
+  'topLeft',
+];
+
+export const Placements = () => {
+  return (
+    <div style={{ textAlign: 'center', marginTop: 300 }}>
+      {placements.map(p => (
+        <Tip key={p} placement={p} overlay="Tip of the day">
+          <span style={{ margin: 10 }}>{p}</span>
+        </Tip>
+      ))}
+    </div>
+  );
+};