@justeattakeaway/pie-notification 0.0.0

package/README.md

@@ -0,0 +1,132 @@
+<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-notification">
+    <img alt="GitHub Workflow Status" src="https://img.shields.io/npm/v/@justeattakeaway/pie-notification.svg">
+  </a>
+</p>
+
+# Table of Contents
+
+1. [Introduction](#pie-notification)
+2. [Installation](#installation)
+3. [Importing the component](#importing-the-component)
+4. [Peer Dependencies](#peer-dependencies)
+5. [Local Development](#local-development)
+6. [Props](#props)
+7. [Testing](#testing)
+
+## pie-notification
+
+`pie-notification` 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-notification` in your application, run the following on your command line:
+
+```bash
+# npm
+$ npm i @justeattakeaway/pie-notification
+
+# yarn
+$ yarn add @justeattakeaway/pie-notification
+```
+
+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
+
+```js
+// default
+import { PieNotification } from '@justeattakeaway/pie-notification';
+
+// react
+import { PieNotification } from '@justeattakeaway/pie-notification/dist/react';
+```
+
+
+## Peer Dependencies
+
+> [!IMPORTANT]
+> When using `pie-notification`, 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.
+
+
+## Local development
+
+Install the dependencies. Note that this, and the following commands below, should be run from the **root of the monorepo**:
+
+```bash
+yarn
+```
+
+To build the `pie-notification` package, run the following command:
+
+```bash
+yarn build --filter=pie-notification
+```
+
+If you'd like to develop using the component storybook, then you should build the component in `watch` mode, and run storybook in a separate terminal tab:
+
+```bash
+yarn watch --filter=pie-notification
+
+# in a separate terminal tab, run
+yarn dev --filter=pie-storybook
+```
+
+
+## Props
+
+| Property | Type | Default | Description |
+|---|---|---|---|
+| - | - | - | - |
+
+In your markup or JSX, you can then use these to set the properties for the `pie-notification` component:
+
+```html
+<!-- Native HTML -->
+<pie-notification></pie-notification>
+
+<!-- JSX -->
+<PieNotification></PieNotification>
+```
+
+## Testing
+
+### Browser tests
+
+To run the browser tests, run the following command from the root of the monorepo:
+
+```bash
+yarn test:browsers --filter=pie-notification
+```
+
+### Visual tests
+
+To run the visual regression tests, run the following command from the root of the monorepo:
+
+```bash
+yarn test:visual --filter=pie-notification
+```
+
+Note: To run these locally, you will need to ensure that any environment variables required are set up on your machine to mirror those on CI (such as Percy tokens). How you achieve this will differ between operating systems.
+
+#### Setup via bash
+
+```bash
+export PERCY_TOKEN_PIE_NOTIFICATION=abcde
+```
+
+#### Setup via package.json
+
+Under scripts `test:visual` replace the environment variable with the below:
+
+```bash
+PERCY_TOKEN_PIE_NOTIFICATION=abcde
+```

package/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;
+}

package/dist/index.d.ts

@@ -0,0 +1,16 @@
+import type { CSSResult } from 'lit';
+import type { LitElement } from 'lit';
+import type { TemplateResult } from 'lit-html';
+
+export declare interface NotificationProps {
+}
+
+/**
+ * @tagname pie-notification
+ */
+export declare class PieNotification extends LitElement implements NotificationProps {
+    render(): TemplateResult<1>;
+    static styles: CSSResult;
+}
+
+export { }

package/dist/index.js

@@ -0,0 +1,15 @@
+import { unsafeCSS as o, LitElement as i, html as s } from "lit";
+function a(e, t) {
+  customElements.get(e) ? console.warn(`PIE Web Component: "${e}" has already been defined. Please ensure the component is only being defined once in your application.`) : customElements.define(e, t);
+}
+const l = "", c = "pie-notification";
+class n extends i {
+  render() {
+    return s`<h1 data-test-id="pie-notification">Hello world!</h1>`;
+  }
+}
+n.styles = o(l);
+a(c, n);
+export {
+  n as PieNotification
+};

package/dist/react.d.ts

@@ -0,0 +1,19 @@
+import type { CSSResult } from 'lit';
+import type { LitElement } from 'lit';
+import type { ReactWebComponent } from '@lit-labs/react';
+import type { TemplateResult } from 'lit-html';
+
+export declare interface NotificationProps {
+}
+
+export declare const PieNotification: ReactWebComponent<PieNotification_2, {}>;
+
+/**
+ * @tagname pie-notification
+ */
+declare class PieNotification_2 extends LitElement implements NotificationProps {
+    render(): TemplateResult<1>;
+    static styles: CSSResult;
+}
+
+export { }

package/dist/react.js

@@ -0,0 +1,67 @@
+import * as g from "react";
+import { PieNotification as M } from "./index.js";
+import "lit";
+/**
+ * @license
+ * Copyright 2018 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */
+const P = /* @__PURE__ */ new Set(["children", "localName", "ref", "style", "className"]), E = /* @__PURE__ */ new WeakMap(), b = (d, l, m, p, h) => {
+  const n = h == null ? void 0 : h[l];
+  n === void 0 || m === p ? m == null && l in HTMLElement.prototype ? d.removeAttribute(l) : d[l] = m : ((o, t, u) => {
+    let s = E.get(o);
+    s === void 0 && E.set(o, s = /* @__PURE__ */ new Map());
+    let a = s.get(t);
+    u !== void 0 ? a === void 0 ? (s.set(t, a = { handleEvent: u }), o.addEventListener(t, a)) : a.handleEvent = u : a !== void 0 && (s.delete(t), o.removeEventListener(t, a));
+  })(d, n, m);
+};
+function C(d = window.React, l, m, p, h) {
+  let n, o, t;
+  if (l === void 0) {
+    const r = d;
+    ({ tagName: o, elementClass: t, events: p, displayName: h } = r), n = r.react;
+  } else
+    n = d, t = m, o = l;
+  const u = n.Component, s = n.createElement, a = new Set(Object.keys(p ?? {}));
+  class v extends u {
+    constructor() {
+      super(...arguments), this.o = null;
+    }
+    t(e) {
+      if (this.o !== null)
+        for (const f in this.i)
+          b(this.o, f, this.props[f], e ? e[f] : void 0, p);
+    }
+    componentDidMount() {
+      this.t();
+    }
+    componentDidUpdate(e) {
+      this.t(e);
+    }
+    render() {
+      const { _$Gl: e, ...f } = this.props;
+      this.h !== e && (this.u = (i) => {
+        e !== null && ((c, w) => {
+          typeof c == "function" ? c(w) : c.current = w;
+        })(e, i), this.o = i, this.h = e;
+      }), this.i = {};
+      const N = { ref: this.u };
+      for (const [i, c] of Object.entries(f))
+        P.has(i) ? N[i === "className" ? "class" : i] = c : a.has(i) || i in t.prototype ? this.i[i] = c : N[i] = c;
+      return s(o, N);
+    }
+  }
+  v.displayName = h ?? t.name;
+  const y = n.forwardRef((r, e) => s(v, { ...r, _$Gl: e }, r == null ? void 0 : r.children));
+  return y.displayName = v.displayName, y;
+}
+const $ = C({
+  displayName: "PieNotification",
+  elementClass: M,
+  react: g,
+  tagName: "pie-notification",
+  events: {}
+});
+export {
+  $ as PieNotification
+};

package/package.json

@@ -0,0 +1,42 @@
+{
+  "name": "@justeattakeaway/pie-notification",
+  "description": "PIE Design System Notification built using Web Components",
+  "version": "0.0.0",
+  "type": "module",
+  "main": "dist/index.js",
+  "module": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "files": [
+    "src",
+    "dist",
+    "**/*.d.ts"
+  ],
+  "scripts": {
+    "build": "yarn build:wrapper pie-notification && run -T vite build",
+    "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_NOTIFICATION} percy exec --allowed-hostname cloudfront.net -- npx playwright test -c ./playwright-lit-visual.config.ts",
+    "test:visual:ci": "yarn test:visual"
+  },
+  "author": "Just Eat Takeaway.com - Design System Team",
+  "license": "Apache-2.0",
+  "devDependencies": {
+    "@justeattakeaway/pie-components-config": "workspace:*"
+  },
+  "dependencies": {
+    "@justeattakeaway/pie-webc-core": "workspace:*"
+  },
+  "volta": {
+    "extends": "../../../package.json"
+  },
+  "sideEffects": [
+    "dist/*.js"
+  ]
+}

package/src/defs.ts

@@ -0,0 +1,3 @@
+// TODO - please remove the eslint disable comment below when you add props to this interface
+// eslint-disable-next-line @typescript-eslint/no-empty-interface
+export interface NotificationProps {}

package/src/index.ts

@@ -0,0 +1,30 @@
+import { LitElement, html, unsafeCSS } from 'lit';
+
+import { defineCustomElement } from '@justeattakeaway/pie-webc-core';
+import styles from './notification.scss?inline';
+import { NotificationProps } from './defs';
+
+// Valid values available to consumers
+export * from './defs';
+
+const componentSelector = 'pie-notification';
+
+/**
+ * @tagname pie-notification
+ */
+export class PieNotification extends LitElement implements NotificationProps {
+    render () {
+        return html`<h1 data-test-id="pie-notification">Hello world!</h1>`;
+    }
+
+    // Renders a `CSSResult` generated from SCSS by Vite
+    static styles = unsafeCSS(styles);
+}
+
+defineCustomElement(componentSelector, PieNotification);
+
+declare global {
+    interface HTMLElementTagNameMap {
+        [componentSelector]: PieNotification;
+    }
+}

package/src/notification.scss

@@ -0,0 +1 @@
+@use '@justeattakeaway/pie-css/scss' as p;