Init toast

src/elements/extensions/toast/index.ts

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

src/elements/extensions/toast/toast.css

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

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

@@ -0,0 +1,127 @@
+import { Canvas, Meta, Story, ArgsTable } from '@storybook/addon-docs';
+import { useTooltipExtension } from '../../../../packages/react/src';
+import { Customization, Codesandbox } from '../../../../.storybook/components';
+
+<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">
+    {(() => {
+      useToastExtension(document.body.querySelector('.toast-example'));
+      return '';
+    })()}
+    <div style={{ maxHeight: '200px', overflow: 'scroll' }}>
+      <span {...args} style={{ fontSize: '3rem' }}>
+        Hover 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/toast/toast.ts

@@ -0,0 +1,32 @@
+import { getDocument } from 'ssr-window';
+import { debug } from '~/helpers';
+import './toast.css';
+
+const themes = {};
+const methods = {};
+
+function methodFactory(name) {
+  return () => console.log(1);
+}
+
+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)}`);
+
+  themes[name] = theme;
+  methods[name] = methodFactory(name);
+}
+
+export default function useTooltipExtension(rootElement?: HTMLElement) {
+  const document = getDocument();
+  const element = rootElement || document.body;
+
+  createTheme('success');
+  createTheme('error');
+
+  return { ...methods };
+}

src/index.ts

@@ -10,6 +10,7 @@ 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';
+export { default as 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';