feat: add storybook

apps/ui/docs/message.stories.js

@@ -0,0 +1,53 @@
+import { Message, createMessage } from '../deploy/message.js';
+export default {
+  title: 'ui/message',
+  tags: ['autodocs'],
+  render: ({ label, fn, ...args }) => {
+    const div = createMessage(label, { type: 'success' });
+    div.addEventListener('click', () => {
+      fn('Hello World', 2000);
+    });
+    div.style.border = '1px solid #000';
+    const uiMessage = document.createElement('div');
+    uiMessage.style = 'display: flex;gap:10px; flex-direction: column;background: #f0f0f0; padding: 20px';
+    uiMessage.appendChild(div);
+
+    const info = createMessage('Info', { type: 'info' });
+    info.style.border = '1px solid #000';
+    info.addEventListener('click', () => {
+      Message.info('Hello World', 1000);
+    });
+    uiMessage.appendChild(info);
+
+    const error = createMessage('Error', { type: 'error' });
+    error.style.border = '1px solid #000';
+    error.addEventListener('click', () => {
+      Message.error('Hello World', 1500);
+    });
+    uiMessage.appendChild(error);
+
+    const warning = createMessage('Warning', { type: 'warning' });
+    warning.style.border = '1px solid #000';
+    warning.addEventListener('click', () => {
+      Message.warning('Hello World', 3000);
+    });
+    uiMessage.appendChild(warning);
+
+    const loading = createMessage('Loading', { type: 'loading' });
+    loading.style.border = '1px solid #000';
+    loading.addEventListener('click', () => {
+      Message.loading('Hello World');
+    });
+    uiMessage.appendChild(loading);
+
+    return uiMessage;
+  },
+};
+
+// More on writing stories with args: https://storybook.js.org/docs/writing-stories/args
+export const Success = {
+  args: {
+    label: 'Success',
+    fn: Message.success,
+  },
+};