feat(pie-toast-provider)Dsw 2222 toast provider basic functionality

.changeset/tiny-eels-play.md

@@ -0,0 +1,9 @@
+---
+"@justeattakeaway/pie-toast-provider": minor
+"@justeattakeaway/pie-toast": minor
+"@justeattakeaway/pie-webc": minor
+"pie-storybook": minor
+"pie-monorepo": minor
+---
+
+[Added] - priority order for the toast provider

.github/project-labeler.yml

@@ -128,4 +128,6 @@ pie-webc-core:
   - 'packages/components/pie-webc-core/**/*'
 
 pie-webc-testing:
-  - 'packages/components/pie-webc-testing/**/*'
+  - 'packages/components/pie-webc-testing/**/*'
+pie-toast-provider:
+  - packages/components/pie-toast-provider/**/*

.github/workflows/ci.yml

@@ -51,6 +51,7 @@ env:
   PERCY_DO_NOT_CAPTURE_RESPONSIVE_ASSETS: true
   PERCY_PAGE_LOAD_TIMEOUT: ${{ vars.PERCY_PAGE_LOAD_TIMEOUT }}
   PERCY_NETWORK_IDLE_WAIT_TIMEOUT: ${{ vars.PERCY_NETWORK_IDLE_WAIT_TIMEOUT }}
+  PERCY_TOKEN_PIE_TOAST_PROVIDER: ${{ secrets.PERCY_TOKEN_PIE_TOAST_PROVIDER }}
 
 jobs:
   check-change-type:

apps/pie-storybook/data/tag-variants-to-statuses-map.ts

@@ -1,9 +1,9 @@
 import { type TagVariantToStatusMap } from '../interfaces/tag-variant-to-status-map';
 
 export const tagVariantToStatusMap: TagVariantToStatusMap = {
-    alpha: 'yellow',
-    beta: 'yellow',
-    deprecated: 'red',
-    removed: 'red',
-    stable: 'green',
+    alpha: 'brand-02',
+    beta: 'brand-02',
+    deprecated: 'error',
+    removed: 'error',
+    stable: 'information',
 };

apps/pie-storybook/package.json

@@ -39,6 +39,7 @@
     "@justeattakeaway/pie-text-input": "0.24.5",
     "@justeattakeaway/pie-textarea": "0.13.0",
     "@justeattakeaway/pie-toast": "0.5.0",
+    "@justeattakeaway/pie-toast-provider": "0.0.0",
     "dompurify": "3.1.3"
   },
   "devDependencies": {

apps/pie-storybook/stories/pie-toast-provider.stories.ts

@@ -0,0 +1,122 @@
+import { html } from 'lit';
+import { type Meta } from '@storybook/web-components';
+import { action } from '@storybook/addon-actions';
+
+import { toaster } from '@justeattakeaway/pie-toast-provider';
+import { type ToastProviderProps, defaultProps } from '@justeattakeaway/pie-toast-provider';
+import '@justeattakeaway/pie-button';
+import '@justeattakeaway/pie-tag';
+
+import { createStory } from '../utilities';
+
+type ToastProviderStoryMeta = Meta<ToastProviderProps>;
+
+const onQueueUpdate = (event: CustomEvent) => {
+    action('pie-toast-provider-queue-update')(event.detail);
+
+    const queueLengthTag = document.querySelector('#queue-length-tag') as HTMLElement;
+    if (queueLengthTag) {
+        queueLengthTag.textContent = `Toast Queue Length: ${event.detail.length}`;
+    }
+};
+const defaultArgs: ToastProviderProps = {
+    ...defaultProps,
+    options: {
+        duration: 3000,
+        isDismissible: true,
+        onPieToastOpen: action('onPieToastOpen'),
+        onPieToastClose: action('onPieToastClose'),
+        onPieToastLeadingActionClick: action('onPieToastLeadingActionClick'),
+    },
+};
+
+const toastProviderStoryMeta: ToastProviderStoryMeta = {
+    title: 'Toast Provider',
+    component: 'pie-toast-provider',
+    argTypes: {
+        options: {
+            description: 'Global options to configure default toast behavior.',
+            control: 'object',
+            defaultValue: {
+                summary: defaultProps.options,
+            },
+        },
+    },
+    args: defaultArgs,
+    parameters: {
+        design: {
+            type: 'figma',
+            url: '',
+        },
+    },
+};
+
+export default toastProviderStoryMeta;
+
+const Template = ({ options }: ToastProviderProps) => html`
+    <pie-toast-provider 
+        .options=${options} 
+        @pie-toast-provider-queue-update=${onQueueUpdate}>
+    </pie-toast-provider>
+
+    <pie-tag id="queue-length-tag" variant="information" style="margin-top: 16px;">
+        Toast Queue Length: 0
+    </pie-tag>
+
+    <div style="margin-top: 16px; display: flex; gap: 16px; flex-wrap: wrap;">
+        <pie-button 
+            @click=${() => {
+    toaster.create({
+        message: 'Low Priority Info Toast',
+        variant: 'info',
+        duration: null,
+        leadingAction: {
+            text: 'Confirm',
+        },
+    });
+}}>
+            Trigger Info Toast (Low Priority)
+        </pie-button>
+
+        <pie-button
+            @click=${() => {
+    toaster.create({
+        message: 'Medium Priority Warning Toast',
+        variant: 'warning',
+    });
+}}>
+            Trigger Warning Toast (Medium Priority)
+        </pie-button>
+
+        <pie-button
+            @click=${() => {
+    toaster.create({
+        message: 'High Priority Error Toast',
+        variant: 'error',
+    });
+}}>
+            Trigger Error Toast (High Priority)
+        </pie-button>
+
+        <pie-button
+            @click=${() => {
+    toaster.create({
+        message: 'Actionable Info Toast',
+        variant: 'info',
+        leadingAction: { text: 'Retry' },
+    });
+}}>
+            Trigger Actionable Info Toast
+        </pie-button>
+
+        <pie-button
+            variant="secondary"
+            @click=${() => {
+    toaster.clearAll();
+}}>
+            Clear All Toasts
+        </pie-button>
+    </div>
+`;
+
+export const Default = createStory<ToastProviderProps>(Template, defaultArgs)();

bundlewatch.config.json

@@ -183,10 +183,16 @@
     {
       "path": "./packages/components/pie-toast/dist/react.js",
       "maxSize": "0.45 KB"
+    },
+    {
+      "path": "./packages/components/pie-toast-provider/dist/*.js",
+      "maxSize": "3 KB"
     }
   ],
   "defaultCompression": "gzip",
   "ci": {
-    "trackBranches": ["main"]
+    "trackBranches": [
+      "main"
+    ]
   }
-}
+}

packages/components/pie-toast-provider/.eslintignore

@@ -0,0 +1,6 @@
+.turbo
+dist
+node_modules
+lit-browsers-report
+lit-visual-report
+test-results

packages/components/pie-toast-provider/README.md

@@ -0,0 +1,91 @@
+<p align="center">
+  <img align="center" src="../../../readme_image.png" height="200" alt="">
+</p>
+
+<p align="center">
+  <a href="https://www.npmjs.com/@justeattakeaway/pie-toast-provider">
+    <img alt="GitHub Workflow Status" src="https://img.shields.io/npm/v/@justeattakeaway/pie-toast-provider.svg">
+  </a>
+</p>
+
+# Table of Contents
+
+1. [Introduction](#pie-toast-provider)
+2. [Installation](#installation)
+3. [Importing the component](#importing-the-component)
+4. [Peer Dependencies](#peer-dependencies)
+5. [Props](#props)
+6. [Contributing](#contributing)
+
+## pie-toast-provider
+
+`pie-toast-provider` is a Web Component built using the Lit library.
+
+This component can be easily integrated into various frontend frameworks and customized through a set of properties.
+
+
+## Installation
+
+To install `pie-toast-provider` in your application, run the following on your command line:
+
+```bash
+# npm
+$ npm i @justeattakeaway/pie-toast-provider
+
+# yarn
+$ yarn add @justeattakeaway/pie-toast-provider
+```
+
+For full information on using PIE components as part of an application, check out the [Getting Started Guide](https://github.com/justeattakeaway/pie/wiki/Getting-started-with-PIE-Web-Components).
+
+
+### Importing the component
+
+#### JavaScript
+```js
+// Default – for Native JS Applications, Vue, Angular, Svelte, etc.
+import { PieToastProvider } from '@justeattakeaway/pie-toast-provider';
+
+// If you don't need to reference the imported object, you can simply
+// import the module which registers the component as a custom element.
+import '@justeattakeaway/pie-toast-provider';
+```
+
+#### React
+```js
+// React
+// For React, you will need to import our React-specific component build
+// which wraps the web component using ​@lit/react
+import { PieToastProvider } from '@justeattakeaway/pie-toast-provider/dist/react';
+```
+
+> [!NOTE]
+> When using the React version of the component, please make sure to also
+> include React as a [peer dependency](#peer-dependencies) in your project.
+
+
+## Peer Dependencies
+
+> [!IMPORTANT]
+> When using `pie-toast-provider`, you will also need to include a couple of dependencies to ensure the component renders as expected. See [the PIE Wiki](https://github.com/justeattakeaway/pie/wiki/Getting-started-with-PIE-Web-Components#expected-dependencies) for more information and how to include these in your application.
+
+
+## Props
+
+| Property | Type | Default | Description |
+|---|---|---|---|
+| - | - | - | - |
+
+In your markup or JSX, you can then use these to set the properties for the `pie-toast-provider` component:
+
+```html
+<!-- Native HTML -->
+<pie-toast-provider></pie-toast-provider>
+
+<!-- JSX -->
+<PieToastProvider></PieToastProvider>
+```
+
+## Contributing
+
+Check out our [contributing guide](https://github.com/justeattakeaway/pie/wiki/Contributing-Guide) for more information on [local development](https://github.com/justeattakeaway/pie/wiki/Contributing-Guide#local-development) and how to run specific [component tests](https://github.com/justeattakeaway/pie/wiki/Contributing-Guide#testing).

packages/components/pie-toast-provider/custom-elements-manifest.config.mjs

@@ -0,0 +1,15 @@
+import { moduleFileExtensionsPlugin } from 'cem-plugin-module-file-extensions';
+
+export default {
+    globs: [
+        './src/**/!(*.css).ts',
+    ],
+    exclude: [
+        '**/*.d.ts',
+        '**/*.d.js',
+        '**/react.ts',
+        '**/test/**',
+        '**/node_modules/**',
+    ],
+    plugins: [moduleFileExtensionsPlugin()],
+};

packages/components/pie-toast-provider/declaration.d.ts

@@ -0,0 +1,9 @@
+declare module '*.scss' {
+    const content: Record<string, string>;
+    export default content;
+}
+
+declare module '*.scss?inline' {
+    const content: Record<string, string>;
+    export default content;
+}

packages/components/pie-toast-provider/package.json

@@ -0,0 +1,54 @@
+{
+  "name": "@justeattakeaway/pie-toast-provider",
+  "description": "PIE Design System Toast Provider built using Web Components",
+  "version": "0.0.0",
+  "type": "module",
+  "main": "dist/index.js",
+  "module": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "files": [
+    "custom-elements.json",
+    "src",
+    "dist",
+    "**/*.d.ts"
+  ],
+  "pieMetadata": {
+    "componentStatus": "alpha"
+  },
+  "scripts": {
+    "build": "run -T vite build",
+    "build:react-wrapper": "npx build-react-wrapper",
+    "create:manifest": "yarn cem analyze --litelement",
+    "lint:scripts": "run -T eslint .",
+    "lint:scripts:fix": "yarn lint:scripts --fix",
+    "lint:style": "run -T stylelint ./src/**/*.{css,scss}",
+    "lint:style:fix": "yarn lint:style --fix",
+    "watch": "run -T vite build --watch",
+    "test": "echo \"Error: no test specified\" && exit 0",
+    "test:ci": "yarn test",
+    "test:browsers": "npx playwright test -c ./playwright-lit.config.ts",
+    "test:browsers:ci": "yarn test:browsers",
+    "test:visual": "run -T cross-env-shell PERCY_TOKEN=${PERCY_TOKEN_PIE_TOAST_PROVIDER} percy exec --allowed-hostname cloudfront.net -- npx playwright test -c ./playwright-lit-visual.config.ts",
+    "test:visual:ci": "yarn test:visual",
+    "test:browsers-setup": "npx playwright-lit-setup"
+  },
+  "author": "Just Eat Takeaway.com - Design System Team",
+  "license": "Apache-2.0",
+  "devDependencies": {
+    "@custom-elements-manifest/analyzer": "0.9.0",
+    "@justeattakeaway/pie-components-config": "0.18.0",
+    "@justeattakeaway/pie-css": "0.13.1",
+    "cem-plugin-module-file-extensions": "0.0.5"
+  },
+  "dependencies": {
+    "@justeattakeaway/pie-toast": "0.5.0",
+    "@justeattakeaway/pie-webc-core": "0.24.2"
+  },
+  "volta": {
+    "extends": "../../../package.json"
+  },
+  "customElements": "custom-elements.json",
+  "sideEffects": [
+    "dist/*.js"
+  ]
+}

packages/components/pie-toast-provider/playwright-lit-visual.config.ts

@@ -0,0 +1,4 @@
+import { defineConfig } from '@sand4rt/experimental-ct-web';
+import { getPlaywrightVisualConfig } from '@justeattakeaway/pie-components-config';
+
+export default defineConfig(getPlaywrightVisualConfig());

packages/components/pie-toast-provider/playwright-lit.config.ts

@@ -0,0 +1,4 @@
+import { defineConfig } from '@sand4rt/experimental-ct-web';
+import { getPlaywrightConfig } from '@justeattakeaway/pie-components-config';
+
+export default defineConfig(getPlaywrightConfig());

packages/components/pie-toast-provider/src/defs-react.ts

@@ -0,0 +1,8 @@
+import type React from 'react';
+/**
+ * TODO: Verify if ReactBaseType can be set as a more specific React interface
+ * Use the React IntrinsicElements interface to find how to map standard HTML elements to existing React Interfaces
+ * Example: an HTML button maps to `React.ButtonHTMLAttributes<HTMLButtonElement>`
+ * https://github.com/DefinitelyTyped/DefinitelyTyped/blob/0bb210867d16170c4a08d9ce5d132817651a0f80/types/react/index.d.ts#L2829
+ */
+export type ReactBaseType = React.HTMLAttributes<HTMLElement>