Feature/toast (#82)

* Init toast

* add event bus #76 (initial approach only)

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/extensions/toast/index.ts

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

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

@@ -0,0 +1,23 @@
+import { EventBus } from '@trutoo/event-bus';
+import { ToastCallback, ToastPayload } from './toast.model';
+
+const BUS_NAME = 'toast';
+const bus = new EventBus();
+const state: ToastPayload[] = [];
+
+// TODO: If more buses in the future, move to generic
+const subscribe = (callback: ToastCallback<ToastPayload>) => bus.subscribe(BUS_NAME, callback);
+const register = (optionsType = { type: Object }) => bus.register(BUS_NAME, optionsType);
+const publish = (payload: ToastPayload) => {
+  state.push(payload);
+  bus.publish(BUS_NAME, payload);
+};
+
+// TODO: Can i move all the logic to the service??
+
+export const toastBus = {
+  subscribe,
+  register,
+  publish,
+  state: () => state
+};

src/elements/extensions/toast/toast.css

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

src/elements/extensions/toast/toast.hook.ts

@@ -0,0 +1,43 @@
+import { debug } from '~/helpers';
+import { toastBus } from './toast.bus';
+import './toast.css';
+import { ToastPayload } from './toast.model';
+
+const themes = {};
+
+const actions: {
+  [key: string]: (payload: ToastPayload) => void;
+} = {};
+
+function actionFactory(name) {
+  return (payload: ToastPayload) => {
+    toastBus.publish({
+      id: `${Math.random()}`,
+      ...payload
+    });
+  };
+}
+
+function createTheme(name: string) {
+  const properties = ['background', 'foreground'];
+  const theme = {};
+
+  properties.forEach((property) => (theme[property] = `var(--pa-toast-${property}-${name})`));
+
+  debug(`ToastService createTheme: ${name}: ${JSON.stringify(theme)}`);
+
+  toastBus.register();
+  themes[name] = theme;
+  actions[name] = actionFactory(name);
+}
+
+function triggerCustomAction(name: string, payload: ToastPayload) {
+  return actions[name](payload);
+}
+
+export default function useToastExtension() {
+  createTheme('success');
+  createTheme('error');
+
+  return { success: actions.success, error: actions.error, createTheme, trigger: triggerCustomAction };
+}

src/elements/extensions/toast/toast.lite.tsx

@@ -0,0 +1,42 @@
+import { For, onMount, onUnMount, useMetadata, useStore } from '@builder.io/mitosis';
+import './toast.css';
+import type { ToastProps, ToastState } from './toast.model';
+import { toastService } from './toast.service';
+
+useMetadata({ isAttachedToShadowDom: true });
+
+export default function Toast(props: ToastProps) {
+  const state = useStore<ToastState>({
+    get classes() {
+      return toastService.getClasses(props.disabled, props.className || props.classList);
+    },
+    get toasts() {
+      return toastService.getToasts();
+    },
+    toastSubscription: null
+  });
+
+  onMount(() => {
+    if (state.toastSubscription) {
+      return;
+    }
+
+    // TODO: This approach doesnt work looks like is not reactive enough I will try other approach
+    state.toastSubscription = toastService.subscribe();
+  });
+
+  onUnMount(() => {
+    if (!state.toastSubscription) {
+      return;
+    }
+
+    state.toastSubscription.unsubscribe();
+  });
+
+  return (
+    <div class={state.classes.base}>
+      <For each={state.toasts}>{(toast) => <div>{toast.message}</div>}</For>
+      {props.children}
+    </div>
+  );
+}

src/elements/extensions/toast/toast.model.ts

@@ -0,0 +1,26 @@
+import type { BaseProps, BaseState } from '~/models';
+
+export interface ToastProps extends BaseProps {
+  disabled?: boolean;
+}
+
+export interface ToastState extends BaseState {
+  classes: { base: string };
+  toasts: ToastPayload[];
+  toastSubscription: {
+    unsubscribe(): void;
+  };
+}
+
+export type ToastPayload = {
+  id?: string;
+  message: string;
+};
+
+// TODO Move to generic
+export type ToastChannelEvent<T> = {
+  channel: string;
+  payload: T | undefined;
+};
+
+export type ToastCallback<T> = (event: ToastChannelEvent<T>) => void;

src/elements/extensions/toast/toast.service.ts

@@ -0,0 +1,30 @@
+import { classesToString, debug } from '~/helpers';
+import { toastBus } from './toast.bus';
+import { ToastChannelEvent, ToastPayload } from './toast.model';
+
+class ToastService {
+  private toasts: ToastPayload[] = [];
+
+  private onChangeToasts(event: ToastChannelEvent<ToastPayload>) {
+    this.toasts = toastBus.state();
+    debug(`ToastService onChangeToasts: toasts: ${this.toasts}`);
+  }
+
+  public getClasses(disabled: boolean, className: string) {
+    const base = classesToString(['pa-toast', [disabled, 'is-disabled'], className || '']);
+
+    debug(`ToastService getClasses: base: ${base}`);
+    return { base };
+  }
+
+  public getToasts() {
+    return this.toasts;
+  }
+
+  public subscribe() {
+    debug('ToastService subscribe');
+    return toastBus.subscribe(this.onChangeToasts);
+  }
+}
+
+export const toastService = new ToastService();

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

@@ -0,0 +1,133 @@
+import { Canvas, Meta, Story, ArgsTable } from '@storybook/addon-docs';
+import { Customization, Codesandbox } from '../../../../.storybook/components';
+import { Toast, useToastExtension } from '../../../../packages/react/src';
+
+<Meta
+  title="🧩Elements/Extensions/Toast"
+  argTypes={{
+    title: {
+      name: 'title',
+      description: 'A sample of attribute title',
+      table: {},
+      control: 'text'
+    }
+  }}
+/>
+
+export const Template = (args) => (
+  <div className="toast-example">
+    {(() => {
+      window.toast = useToastExtension();
+      return '';
+    })()}
+    <div>
+      <Toast />
+      <span
+        onClick={() => {
+          // toast.success({ message: 'example' })
+          window.toast.success({ message: 'example' + Math.random() });
+        }}
+      >
+        Click me
+      </span>
+    </div>
+  </div>
+);
+
+# Toast
+
+TODO
+
+## Showcase
+
+<Canvas>
+  <Story
+    name="Toast"
+    args={{
+      title: 'Title of my tooltip'
+    }}
+  >
+    {Template.bind({})}
+  </Story>
+</Canvas>
+
+### Customization
+
+<Customization showCode={false} />
+
+### Properties
+
+<ArgsTable story="Tooltip" />
+
+## How to use this extension
+
+### Angular
+
+<Codesandbox
+  extensions={['useTooltipExtension']}
+  platform="angular"
+  code={`
+    <span title="Example of a tooltip">Hover me</span>`}
+/>
+
+### Preact
+
+<Codesandbox
+  extensions={['useTooltipExtension']}
+  platform="preact"
+  code={`
+  <span title="Example of a tooltip">Hover me</span>`}
+/>
+
+### Qwik
+
+<Codesandbox
+  extensions={['useTooltipExtension']}
+  platform="qwik"
+  code={`
+  <span title="Example of a tooltip">Hover me</span>`}
+/>
+
+### React
+
+<Codesandbox
+  extensions={['useTooltipExtension']}
+  platform="react"
+  code={`
+  <span title="Example of a tooltip">Hover me</span>`}
+/>
+
+### Solid
+
+<Codesandbox
+  extensions={['useTooltipExtension']}
+  platform="solid"
+  code={`
+  <span title="Example of a tooltip">Hover me</span>`}
+/>
+
+### Svelte
+
+<Codesandbox
+  extensions={['useTooltipExtension']}
+  platform="svelte"
+  code={`
+  <span title="Example of a tooltip">Hover me</span>`}
+/>
+
+### Vue
+
+<Codesandbox
+  extensions={['useTooltipExtension']}
+  platform="vue"
+  code={`
+  <span title="Example of a tooltip">Hover me</span>`}
+/>
+
+### Web Components
+
+<Codesandbox
+  extensions={['useTooltipExtension']}
+  platform="webcomponents"
+  code={`<span title="Example of a tooltip">Hover me</span>`}
+/>

src/elements/extensions/tooltip/index.ts

@@ -1 +1 @@
-export { default } from './tooltip';
+export { default } from './tooltip.hook';

src/index.ts

@@ -10,6 +10,8 @@ export { default as Pill } from './elements/components/pill';
 export { default as Spinner } from './elements/components/spinner';
 export { default as Itchio } from './elements/enterprise/itchio';
 export { default as useTooltipExtension } from './elements/extensions/tooltip';
+// TODO this breaks command --element
+export { default as Toast, useToastExtension } from './elements/extensions/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';