@justeattakeaway/pie-spinner 0.1.0

package/README.md

@@ -0,0 +1,77 @@
+<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-spinner">
+    <img alt="GitHub Workflow Status" src="https://img.shields.io/npm/v/@justeattakeaway/pie-spinner.svg">
+  </a>
+</p>
+
+# Table of Contents
+
+1. [Introduction](#pie-spinner)
+2. [Installation](#installation)
+3. [Importing the component](#importing-the-component)
+4. [Peer Dependencies](#peer-dependencies)
+5. [Props](#props)
+6. [Contributing](#contributing)
+
+## pie-spinner
+
+`pie-spinner` 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-spinner` in your application, run the following on your command line:
+
+```bash
+# npm
+$ npm i @justeattakeaway/pie-spinner
+
+# yarn
+$ yarn add @justeattakeaway/pie-spinner
+```
+
+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 { PieSpinner } from '@justeattakeaway/pie-spinner';
+
+// react
+import { PieSpinner } from '@justeattakeaway/pie-spinner/dist/react';
+```
+
+
+## Peer Dependencies
+
+> [!IMPORTANT]
+> When using `pie-spinner`, 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-spinner` component:
+
+```html
+<!-- Native HTML -->
+<pie-spinner></pie-spinner>
+
+<!-- JSX -->
+<PieSpinner></PieSpinner>
+```
+
+## 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).

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';
+
+/**
+ * @tagname pie-spinner
+ */
+export declare class PieSpinner extends LitElement implements SpinnerProps {
+    render(): TemplateResult<1>;
+    static styles: CSSResult;
+}
+
+export declare interface SpinnerProps {
+}
+
+export { }

package/dist/index.js

@@ -0,0 +1,15 @@
+import { unsafeCSS as t, LitElement as o, html as i } from "lit";
+function l(e, s) {
+  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, s);
+}
+const r = "", d = "pie-spinner";
+class n extends o {
+  render() {
+    return i`<h1 data-test-id="pie-spinner">Hello world!</h1>`;
+  }
+}
+n.styles = t(r);
+l(d, n);
+export {
+  n as PieSpinner
+};

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 const PieSpinner: ReactWebComponent<PieSpinner_2, {}>;
+
+/**
+ * @tagname pie-spinner
+ */
+declare class PieSpinner_2 extends LitElement implements SpinnerProps {
+    render(): TemplateResult<1>;
+    static styles: CSSResult;
+}
+
+export declare interface SpinnerProps {
+}
+
+export { }

package/dist/react.js

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

package/package.json

@@ -0,0 +1,42 @@
+{
+  "name": "@justeattakeaway/pie-spinner",
+  "description": "PIE Design System Spinner built using Web Components",
+  "version": "0.1.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-spinner && 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_SPINNER} 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": "0.4.0"
+  },
+  "dependencies": {
+    "@justeattakeaway/pie-webc-core": "0.11.0"
+  },
+  "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 SpinnerProps {}

package/src/index.ts

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

package/src/spinner.scss

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