add event bus #76

package.json

@@ -22,6 +22,7 @@
     "release": "lerna publish from-package --force-publish"
   },
   "dependencies": {
+    "@trutoo/event-bus": "^2.2.0",
     "codejar": "^3.7.0",
     "copy-to-clipboard": "^3.3.3",
     "highlight.js": "^11.7.0",

packages/angular/package.json

@@ -23,6 +23,7 @@
     }
   },
   "dependencies": {
+    "@trutoo/event-bus": "^2.2.0",
     "codejar": "^3.7.0",
     "copy-to-clipboard": "^3.3.3",
     "highlight.js": "^11.7.0",

packages/preact/package.json

@@ -23,6 +23,7 @@
     }
   },
   "dependencies": {
+    "@trutoo/event-bus": "^2.2.0",
     "codejar": "^3.7.0",
     "copy-to-clipboard": "^3.3.3",
     "highlight.js": "^11.7.0",

packages/qwik/package.json

@@ -29,6 +29,7 @@
     }
   },
   "dependencies": {
+    "@trutoo/event-bus": "^2.2.0",
     "codejar": "^3.7.0",
     "copy-to-clipboard": "^3.3.3",
     "highlight.js": "^11.7.0",

packages/react/package.json

@@ -23,6 +23,7 @@
     }
   },
   "dependencies": {
+    "@trutoo/event-bus": "^2.2.0",
     "codejar": "^3.7.0",
     "copy-to-clipboard": "^3.3.3",
     "highlight.js": "^11.7.0",

packages/svelte/package.json

@@ -24,6 +24,7 @@
     }
   },
   "dependencies": {
+    "@trutoo/event-bus": "^2.2.0",
     "codejar": "^3.7.0",
     "copy-to-clipboard": "^3.3.3",
     "highlight.js": "^11.7.0",

packages/vue/package.json

@@ -23,6 +23,7 @@
     }
   },
   "dependencies": {
+    "@trutoo/event-bus": "^2.2.0",
     "codejar": "^3.7.0",
     "copy-to-clipboard": "^3.3.3",
     "highlight.js": "^11.7.0",

src/elements/components/toast/index.ts

@@ -0,0 +1 @@
+export { default } from './toast.lite';

src/elements/components/toast/toast.css

@@ -0,0 +1,4 @@
+@import '~/styles/build.css';
+
+.pa-toast {
+}

src/elements/components/toast/toast.lite.tsx

@@ -0,0 +1,34 @@
+import { onMount, onUnMount, useMetadata, useStore } from '@builder.io/mitosis';
+import { toastBus } from '../../extensions/toast/toast.bus';
+import './toast.css';
+import type { ToastProps, ToastState } from './toast.model';
+import { toastService } from './toast.service';
+
+useMetadata({ isAttachedToShadowDom: true });
+
+export default function ToastContainer(props: ToastProps) {
+  const state = useStore<ToastState>({
+    get classes() {
+      return toastService.getClasses(props.disabled, props.className || props.classList);
+    },
+    onChangeBus(options: any) {
+      console.log(options, 'from component');
+    },
+    subscription: null
+  });
+
+  onMount(() => {
+    const subscription = toastBus.subscribe<any>('ACTIONNNNNN', state.onChangeBus);
+    state.subscription = subscription;
+  });
+
+  onUnMount(() => {
+    if (!state.subscription) {
+      return;
+    }
+
+    state.subscription.unsubscribe();
+  });
+
+  return <div class={state.classes.base}>{props.children}</div>;
+}

src/elements/components/toast/toast.model.ts

@@ -0,0 +1,13 @@
+import type { BaseProps, BaseState } from '~/models';
+
+export interface ToastProps extends BaseProps {
+  disabled?: boolean;
+}
+
+export interface ToastState extends BaseState {
+  classes: { base: string };
+  onChangeBus: (options: any) => any;
+  subscription: {
+    unsubscribe(): void;
+  };
+}

src/elements/components/toast/toast.service.ts

@@ -0,0 +1,12 @@
+import { classesToString, debug } from '~/helpers';
+
+class ToastService {
+  public getClasses(disabled: boolean, className: string) {
+    const base = classesToString(['pa-toast', [disabled, 'is-disabled'], className || '']);
+
+    debug(`ToastService getClasses: base: ${base}`);
+    return { base };
+  }
+}
+
+export const toastService = new ToastService();

src/elements/extensions/toast/toast.bus.ts

@@ -0,0 +1,3 @@
+import { EventBus } from '@trutoo/event-bus';
+
+export const toastBus = new EventBus();

src/elements/extensions/toast/toast.stories.mdx

@@ -1,6 +1,7 @@
 import { Canvas, Meta, Story, ArgsTable } from '@storybook/addon-docs';
-import { useTooltipExtension } from '../../../../packages/react/src';
+import { useToastExtension } from '../../../../packages/react/src';
 import { Customization, Codesandbox } from '../../../../.storybook/components';
+import { ToastContainer } from '../../../../packages/react/src';
 
 <Meta
   title="🧩Elements/Extensions/Toast"
@@ -17,13 +18,12 @@ import { Customization, Codesandbox } from '../../../../.storybook/components';
 export const Template = (args) => (
   <div className="toast-example">
     {(() => {
-      useToastExtension(document.body.querySelector('.toast-example'));
+      window.toast = useToastExtension(document.body.querySelector('.toast-example'));
       return '';
     })()}
-    <div style={{ maxHeight: '200px', overflow: 'scroll' }}>
-      <span {...args} style={{ fontSize: '3rem' }}>
-        Hover me
-      </span>
+    <div>
+      <ToastContainer />
+      <span onClick={() => window.toast.success('test')}>Click me</span>
     </div>
   </div>
 );

src/elements/extensions/toast/toast.ts

@@ -1,12 +1,16 @@
 import { getDocument } from 'ssr-window';
 import { debug } from '~/helpers';
+import { toastBus } from './toast.bus';
 import './toast.css';
 
 const themes = {};
-const methods = {};
+const actions: any = {};
 
-function methodFactory(name) {
-  return () => console.log(1);
+function actionFactory(name) {
+  return (options: any) => {
+    console.log('action triggered');
+    toastBus.publish('ACTIONNNNNN', options);
+  };
 }
 
 function createTheme(name: string) {
@@ -17,8 +21,17 @@ function createTheme(name: string) {
 
   debug(`ToastService createTheme: ${name}: ${JSON.stringify(theme)}`);
 
+  toastBus.register('ACTIONNNNNN', { type: Object });
   themes[name] = theme;
-  methods[name] = methodFactory(name);
+  actions[name] = actionFactory(name);
+
+  setTimeout(() => {
+    toastBus.subscribe('ACTIONNNNNN', () => console.log(11111));
+  }, 1000);
+}
+
+function triggerCustomAction(name: string, options: any) {
+  return actions[name](options);
 }
 
 export default function useTooltipExtension(rootElement?: HTMLElement) {
@@ -28,5 +41,5 @@ export default function useTooltipExtension(rootElement?: HTMLElement) {
   createTheme('success');
   createTheme('error');
 
-  return { ...methods };
+  return { success: actions.success, error: actions.error, createTheme, trigger: triggerCustomAction };
 }

src/index.ts

@@ -11,6 +11,7 @@ export { default as Spinner } from './elements/components/spinner';
 export { default as Itchio } from './elements/enterprise/itchio';
 export { default as useTooltipExtension } from './elements/extensions/tooltip';
 export { default as useToastExtension } from './elements/extensions/toast';
+export { default as ToastContainer } from './elements/components/toast';
 export { default as Column } from './elements/layout/column';
 export { default as Container } from './elements/layout/container';
 export { default as Row } from './elements/layout/row';