feat(pie-toast-provider): DSW-2222 add toast provider to apps

nextjs-app-v14/package.json

@@ -16,7 +16,7 @@
   "dependencies": {
     "@justeattakeaway/pie-css": "0.13.0",
     "@justeattakeaway/pie-icons-webc": "0.25.1",
-    "@justeattakeaway/pie-webc": "0.5.53",
+    "@justeattakeaway/pie-webc": "0.0.0-snapshot-release-20241129161131",
     "@lit-labs/nextjs": "0.2.0",
     "@lit/react": "1.0.5",
     "next": "14.2.3",

nextjs-app-v14/src/app/components/home-page.tsx

@@ -36,6 +36,8 @@ export default function HomePage() {
       <li><PieLink onClick={() => router.push('/components/tag')} tag="button">Tag</PieLink></li>
       <li><PieLink onClick={() => router.push('/components/text-input')} tag="button">Text Input</PieLink></li>
       <li><PieLink onClick={() => router.push('/components/textarea')} tag="button">Textarea</PieLink></li>
+      <li><PieLink onClick={() => router.push('/components/toast')} tag="button">Toast</PieLink></li>
+      <li><PieLink onClick={() => router.push('/components/toast-provider')} tag="button">Toast Provider</PieLink></li>
     </ul>
     </NavigationLayout>
   );

nextjs-app-v14/src/app/components/toast-provider/page.tsx

@@ -0,0 +1,10 @@
+import ToastProvider from './toast-provider';
+import { type Metadata } from 'next';
+
+export const metadata: Metadata = {
+    title: 'Toast Provider',
+}
+
+export default function ToastProviderComponent() {
+    return <ToastProvider/>;
+}

nextjs-app-v14/src/app/components/toast-provider/toast-provider.tsx

@@ -0,0 +1,73 @@
+'use client';
+
+import { useState } from 'react';
+import NavigationLayout from '@/app/layout/navigation';
+import { PieToastProvider } from '@justeattakeaway/pie-webc/react/toast-provider.js';
+import { toaster } from '@justeattakeaway/pie-webc/components/toast-provider.js';
+import { PieButton } from '@justeattakeaway/pie-webc/react/button.js';
+import { PieTag } from '@justeattakeaway/pie-webc/react/tag.js';
+
+export default function ToastProviderPage() {
+    const [queueLength, setQueueLength] = useState(0);
+
+    const handleQueueUpdate = (event: CustomEvent) => {
+        setQueueLength(event.detail.length);
+    };
+
+    return (
+        <NavigationLayout title="Toast Provider">
+            <PieToastProvider
+                options={{
+                    isDismissible: true,
+                    onPieToastOpen: () => console.log('Toast Opened'),
+                    onPieToastClose: () => console.log('Toast Closed'),
+                    onPieToastLeadingActionClick: () => console.log('Leading Action Clicked'),
+                }}
+                onPieToastProviderQueueUpdate={handleQueueUpdate}
+            />
+
+            <PieTag variant="information" style={{ marginTop: '16px' }}>
+                Toast Queue Length: {queueLength}
+            </PieTag>
+
+            <div style={{ marginTop: '16px', display: 'flex', gap: '16px', flexWrap: 'wrap' }}>
+                <PieButton
+                    onClick={() =>
+                        toaster.create({
+                            message: 'Low Priority Info',
+                            variant: 'info',
+                        })
+                    }
+                >
+                    Trigger Info Toast (Low Priority)
+                </PieButton>
+
+                <PieButton
+                    onClick={() =>
+                        toaster.create({
+                            message: 'Medium Priority Warning Toast',
+                            variant: 'warning',
+                        })
+                    }
+                >
+                    Trigger Warning Toast (Medium Priority)
+                </PieButton>
+
+                <PieButton
+                    onClick={() =>
+                        toaster.create({
+                            message: 'High Priority Error Toast',
+                            variant: 'error',
+                        })
+                    }
+                >
+                    Trigger Error Toast (High Priority)
+                </PieButton>
+
+                <PieButton variant="secondary" onClick={() => toaster.clearAll()}>
+                    Clear All Toasts
+                </PieButton>
+            </div>
+        </NavigationLayout>
+    );
+}

nextjs-app-v14/src/app/components/toast/page.tsx

@@ -0,0 +1,10 @@
+import Toast from './toast';
+import { type Metadata } from 'next';
+
+export const metadata: Metadata = {
+    title: 'Toast',
+}
+
+export default function ToastComponent() {
+    return <Toast/>;
+}

nextjs-app-v14/src/app/components/toast/toast.tsx

@@ -0,0 +1,13 @@
+'use client';
+
+import NavigationLayout from "@/app/layout/navigation";
+import { PieToast } from '@justeattakeaway/pie-webc/react/toast.js';
+
+export default function Toast() {
+
+    return (
+        <NavigationLayout title="Toast">
+            <PieToast message="This is a message" isDismissible />
+        </NavigationLayout>
+    );
+}

nuxt-app/package.json

@@ -21,7 +21,7 @@
   "dependencies": {
     "@justeattakeaway/pie-css": "0.13.0",
     "@justeattakeaway/pie-icons-webc": "0.25.1",
-    "@justeattakeaway/pie-webc": "0.5.53",
+    "@justeattakeaway/pie-webc": "0.0.0-snapshot-release-20241129161131",
     "just-kebab-case": "4.2.0",
     "nuxt-ssr-lit": "1.6.16"
   },

nuxt-app/pages/components/toast-provider.vue

@@ -0,0 +1,71 @@
+<template>
+    <div>
+      <pie-toast-provider
+        :options="toastOptions"
+        @pie-toast-provider-queue-update="handleQueueUpdate"
+      ></pie-toast-provider>
+
+      <pie-tag variant="information" style="margin-top: 16px;">
+        Toast Queue Length: {{ queueLength }}
+      </pie-tag>
+
+      <div style="margin-top: 16px; display: flex; gap: 16px; flex-wrap: wrap;">
+        <pie-button @click="triggerInfoToast">Trigger Info Toast (Low Priority)</pie-button>
+        <pie-button @click="triggerWarningToast">Trigger Warning Toast (Medium Priority)</pie-button>
+        <pie-button @click="triggerErrorToast">Trigger Error Toast (High Priority)</pie-button>
+        <pie-button variant="secondary" @click="clearToasts">Clear All Toasts</pie-button>
+      </div>
+    </div>
+  </template>
+
+  <script setup lang="ts">
+  import { definePageMeta } from '#imports';
+  import { ref } from 'vue';
+  import { toaster } from '@justeattakeaway/pie-webc/components/toast-provider.js';
+  import '@justeattakeaway/pie-webc/components/toast-provider.js';
+  import '@justeattakeaway/pie-webc/components/button.js';
+  import '@justeattakeaway/pie-webc/components/tag.js';
+
+  definePageMeta({
+    title: 'Toast Provider',
+  });
+
+  const toastOptions = ref({
+    isDismissible: true,
+    onPieToastOpen: () => console.log('Toast Opened'),
+    onPieToastClose: () => console.log('Toast Closed'),
+    onPieToastLeadingActionClick: () => console.log('Leading Action Clicked'),
+  });
+
+  const queueLength = ref(0);
+
+  const handleQueueUpdate = (event: CustomEvent) => {
+    queueLength.value = event.detail.length;
+  };
+
+  const triggerInfoToast = () => {
+    toaster.create({
+      message: 'Low Priority Info',
+      variant: 'info',
+    });
+  };
+
+  const triggerWarningToast = () => {
+    toaster.create({
+      message: 'Medium Priority Warning Toast',
+      variant: 'warning',
+    });
+  };
+
+  const triggerErrorToast = () => {
+    toaster.create({
+      message: 'High Priority Error Toast',
+      variant: 'error',
+    });
+  };
+
+  const clearToasts = () => {
+    toaster.clearAll();
+  };
+  </script>
+

nuxt-app/pages/components/toast.vue

@@ -0,0 +1,17 @@
+<template>
+    <div>
+      <pie-toast 
+      message="This is a message"
+      isDismissible></pie-toast>
+    </div>
+  </template>
+
+  <script setup lang="ts">
+  import { definePageMeta } from '#imports';
+  import '@justeattakeaway/pie-webc/components/toast.js';
+
+  definePageMeta({
+    title: 'Toast',
+  });
+  </script>
+

nuxt-app/pages/index.vue

@@ -26,6 +26,8 @@
       <li><pie-link href="/components/tag">Tag</pie-link></li>
       <li><pie-link href="/components/text-input">Text Input</pie-link></li>
       <li><pie-link href="/components/textarea">Textarea</pie-link></li>
+      <li><pie-link href="/components/toast">Toast</pie-link></li>
+      <li><pie-link href="/components/toast-provider">Toast Provider</pie-link></li>
 		</ul>
 	</div>
 </template>

vanilla-app/components/toast-provider.html

@@ -0,0 +1,6 @@
+<load
+        src="partials/page.html"
+        title="Toast Provider"
+        module="../js/toast-provider.js"
+/>
+

vanilla-app/components/toast.html

@@ -0,0 +1,6 @@
+<load
+        src="partials/page.html"
+        title="Toast"
+        module="../js/toast.js"
+/>
+

vanilla-app/js/index.js

@@ -28,4 +28,6 @@ document.querySelector('#navigation').innerHTML = `
         <li><pie-link href="/components/tag.html">Tag</pie-link></li>
         <li><pie-link href="/components/text-input.html">Text Input</pie-link></li>
         <li><pie-link href="/components/textarea.html">Textarea</pie-link></li>
+        <li><pie-link href="/components/toast.html">Toast</pie-link></li>
+        <li><pie-link href="/components/toast-provider.html">Toast Provider</pie-link></li>
     </ul>`;

vanilla-app/js/toast-provider.js

@@ -0,0 +1,55 @@
+import '@justeattakeaway/pie-webc/components/toast-provider.js';
+import '@justeattakeaway/pie-webc/components/button.js';
+import { toaster } from '@justeattakeaway/pie-webc/components/toast-provider.js';
+
+import './utils/navigation.js';
+import './shared.js';
+
+document.querySelector('#app').innerHTML = `
+    <pie-toast-provider id="toast-provider"></pie-toast-provider>
+    <div style="margin-top: 16px; display: flex; gap: 16px; flex-wrap: wrap;">
+        <pie-button id="trigger-info-toast">Trigger Info Toast</pie-button>
+        <pie-button id="trigger-warning-toast">Trigger Warning Toast</pie-button>
+        <pie-button id="trigger-error-toast">Trigger Error Toast</pie-button>
+        <pie-button id="clear-toasts">Clear All Toasts</pie-button>
+    </div>
+`;
+
+const toastProvider = document.getElementById('toast-provider');
+
+toastProvider.addEventListener('pie-toast-open', () => {
+    console.log('Toast Opened');
+});
+
+toastProvider.addEventListener('pie-toast-close', () => {
+    console.log('Toast Closed');
+});
+
+toastProvider.addEventListener('pie-toast-leading-action-click', () => {
+    console.log('Leading Action Clicked');
+});
+
+document.getElementById('trigger-info-toast').addEventListener('click', () => {
+    toaster.create({
+        message: 'This is an info toast.',
+        variant: 'info'
+    });
+});
+
+document.getElementById('trigger-warning-toast').addEventListener('click', () => {
+    toaster.create({
+        message: 'This is a warning toast.',
+        variant: 'warning'
+    });
+});
+
+document.getElementById('trigger-error-toast').addEventListener('click', () => {
+    toaster.create({
+        message: 'This is an error toast.',
+        variant: 'error'
+    });
+});
+
+document.getElementById('clear-toasts').addEventListener('click', () => {
+    toaster.clearAll();
+});

vanilla-app/js/toast.js

@@ -0,0 +1,7 @@
+import '@justeattakeaway/pie-webc/components/toast.js';
+
+import './utils/navigation.js';
+import './shared.js';
+
+document.querySelector('#app').innerHTML = `
+    <pie-toast message="This is a message" isDismissible></pie-toast>`;

vanilla-app/package.json

@@ -20,7 +20,7 @@
   "dependencies": {
     "@justeattakeaway/pie-css": "0.13.0",
     "@justeattakeaway/pie-icons-webc": "0.25.1",
-    "@justeattakeaway/pie-webc": "0.5.53"
+    "@justeattakeaway/pie-webc": "0.0.0-snapshot-release-20241129161131"
   },
   "installConfig": {
     "hoistingLimits": "workspaces"