@justeattakeaway/pie-pagination 0.0.0-stage → 0.0.0

package/README.md

@@ -1,3 +1,88 @@
-# Temporary Holding Version
+# @justeattakeaway/pie-pagination
+[Source Code](https://github.com/justeattakeaway/pie/tree/main/packages/components/pie-pagination) | [Design Documentation](https://pie.design/components/pagination) | [NPM](https://www.npmjs.com/package/@justeattakeaway/pie-pagination)
 
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+<p>
+  <a href="https://www.npmjs.com/@justeattakeaway/pie-pagination">
+    <img alt="GitHub Workflow Status" src="https://img.shields.io/npm/v/@justeattakeaway/pie-pagination.svg">
+  </a>
+</p>
+
+`@justeattakeaway/pie-pagination` is a Web Component built using the Lit library. It offers a simple and accessible `pagination` component for web applications.
+
+## Table of Contents
+
+- [Installation](#installation)
+- [Documentation](#documentation)
+  - [Properties](#properties)
+  - [Slots](#slots)
+  - [CSS Variables](#css-variables)
+  - [Events](#events)
+- [Usage Examples](#usage-examples)
+- [Questions and Support](#questions-and-support)
+- [Contributing](#contributing)
+
+## Installation
+
+> To install any of our web components in your application, we would suggest following the [getting started guide](https://webc.pie.design/?path=/docs/introduction-getting-started--docs) to set up your project.
+
+Ideally, you should install the component using the **`@justeattakeaway/pie-webc`** package, which includes all of the components. Or you can install the individual component package.
+
+## Documentation
+
+### Properties
+| Prop             | Options                                                                                                                                                                  | Description                                                                                                                                                                                                         | Default        |
+|------------------|--------------------------------------------------------------------------------------------------------------------------------------------------------------------------|---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|----------------|
+| | | | |
+
+### Slots
+| Slot     | Description                                                                                                                                                                                                                                                                         |
+|----------|-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
+|  | |
+
+### CSS Variables
+| Variable | Description                                                                                                                                                                                                                 | Default |
+|----------|-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|---------|
+| | | |
+
+### Events
+| Event | Type                                                                                                                                                                                                                 | Description |
+|------------|-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|-------------|
+| | | |
+
+## Usage Examples
+
+**For HTML:**
+
+```js
+// import as module into a js file e.g. main.js
+import '@justeattakeaway/pie-webc/components/pagination.js'
+```
+
+```html
+<!-- pass js file into <script> tag -->
+
+<script type="module" src="/main.js"></script>
+```
+
+**For Native JS Applications, Vue, Angular, Svelte etc.:**
+
+```js
+// Vue templates (using Nuxt 3)
+import '@justeattakeaway/pie-webc/components/pagination.js'
+
+```
+
+**For React Applications:**
+
+```jsx
+import { PiePagination } from '@justeattakeaway/pie-webc/react/pagination.js';
+
+```
+
+## Questions and Support
+
+If you work at Just Eat Takeaway.com, please contact us on **#help-designsystem**. Otherwise, please raise an issue on [Github](https://github.com/justeattakeaway/pie/issues).
+
+## 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/custom-elements.json

@@ -0,0 +1,60 @@
+{
+  "schemaVersion": "1.0.0",
+  "readme": "",
+  "modules": [
+    {
+      "kind": "javascript-module",
+      "path": "src/defs-react.js",
+      "declarations": [],
+      "exports": []
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/defs.js",
+      "declarations": [],
+      "exports": []
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/index.js",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "",
+          "name": "PiePagination",
+          "members": [],
+          "mixins": [
+            {
+              "name": "RtlMixin",
+              "package": "@justeattakeaway/pie-webc-core"
+            }
+          ],
+          "superclass": {
+            "name": "PieElement",
+            "package": "@justeattakeaway/pie-webc-core/src/internals/PieElement"
+          },
+          "tagName": "pie-pagination",
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "*",
+          "declaration": {
+            "name": "*",
+            "module": "src/defs"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "PiePagination",
+          "declaration": {
+            "name": "PiePagination",
+            "module": "src/index.js"
+          }
+        }
+      ]
+    }
+  ]
+}

package/dist/index.d.ts

@@ -0,0 +1,20 @@
+import { CSSResult } from 'lit';
+import { GenericConstructor } from '@justeattakeaway/pie-webc-core';
+import { PieElement } from '@justeattakeaway/pie-webc-core/src/internals/PieElement';
+import { RTLInterface } from '@justeattakeaway/pie-webc-core';
+import { TemplateResult } from 'lit-html';
+
+export declare interface PaginationProps {
+}
+
+/**
+ * @tagname pie-pagination
+ */
+export declare class PiePagination extends PiePagination_base implements PaginationProps {
+    render(): TemplateResult<1>;
+    static styles: CSSResult;
+}
+
+declare const PiePagination_base: GenericConstructor<RTLInterface> & typeof PieElement;
+
+export { }

package/dist/index.js

@@ -0,0 +1,27 @@
+import { LitElement as f, html as h, unsafeCSS as v } from "lit";
+import { RtlMixin as c, safeCustomElement as d } from "@justeattakeaway/pie-webc-core";
+const e = class e extends f {
+  willUpdate() {
+    this.getAttribute("v") || this.setAttribute("v", e.v);
+  }
+};
+e.v = "0.0.0";
+let i = e;
+const g = "*,*:after,*:before{box-sizing:inherit}:host{display:block}";
+var u = Object.getOwnPropertyDescriptor, b = (a, n, p, o) => {
+  for (var t = o > 1 ? void 0 : o ? u(n, p) : n, s = a.length - 1, l; s >= 0; s--)
+    (l = a[s]) && (t = l(t) || t);
+  return t;
+};
+let r = class extends c(i) {
+  render() {
+    return h`<h1 data-test-id="pie-pagination">Hello world!</h1>`;
+  }
+};
+r.styles = v(g);
+r = b([
+  d("pie-pagination")
+], r);
+export {
+  r as PiePagination
+};

package/dist/react.d.ts

@@ -0,0 +1,25 @@
+import { CSSResult } from 'lit';
+import { GenericConstructor } from '@justeattakeaway/pie-webc-core';
+import { PieElement } from '@justeattakeaway/pie-webc-core/src/internals/PieElement';
+import * as React_2 from 'react';
+import { RTLInterface } from '@justeattakeaway/pie-webc-core';
+import { TemplateResult } from 'lit-html';
+
+export declare interface PaginationProps {
+}
+
+export declare const PiePagination: React_2.ForwardRefExoticComponent<React_2.PropsWithChildren<Omit<React_2.PropsWithoutRef<PaginationProps>, "children">> & React_2.RefAttributes<PiePagination_2> & ReactBaseType>;
+
+/**
+ * @tagname pie-pagination
+ */
+declare class PiePagination_2 extends PiePagination_base implements PaginationProps {
+    render(): TemplateResult<1>;
+    static styles: CSSResult;
+}
+
+declare const PiePagination_base: GenericConstructor<RTLInterface> & typeof PieElement;
+
+declare type ReactBaseType = React_2.HTMLAttributes<HTMLElement>;
+
+export { }

package/dist/react.js

@@ -0,0 +1,13 @@
+import * as a from "react";
+import { createComponent as i } from "@lit/react";
+import { PiePagination as e } from "./index.js";
+const t = i({
+  displayName: "PiePagination",
+  elementClass: e,
+  react: a,
+  tagName: "pie-pagination",
+  events: {}
+}), m = t;
+export {
+  m as PiePagination
+};

package/package.json

@@ -1,6 +1,49 @@
 {
   "name": "@justeattakeaway/pie-pagination",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
-}
+  "description": "PIE Design System Pagination 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",
+    "replaces": {
+      "snacks": []
+    }
+  },
+  "scripts": {
+    "build": "run -T vite build",
+    "build:react-wrapper": "run -T build-react-wrapper",
+    "create:manifest": "run -T 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:browsers": "run -T 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_PAGINATION} percy exec --allowed-hostname cloudfront.net -- run -T 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.21.5",
+    "@justeattakeaway/pie-css": "1.9.1",
+    "@justeattakeaway/pie-monorepo-utils": "0.9.12"
+  },
+  "dependencies": {
+    "@justeattakeaway/pie-webc-core": "22.0.1"
+  },
+  "customElements": "custom-elements.json",
+  "sideEffects": [
+    "dist/*.js"
+  ]
+}

package/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>

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 PaginationProps {}

package/src/index.ts

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

package/src/pagination.scss

@@ -0,0 +1,7 @@
+@use '@justeattakeaway/pie-css/scss' as p;
+
+:host {
+    // Note: For consistency sake, the recommended display should be either
+    // "block" or "inline-block", otherwise it can be ommited for floating elements
+    display: block;
+}

package/src/react.ts

@@ -0,0 +1,19 @@
+import * as React from 'react';
+import { createComponent } from '@lit/react';
+import { PiePagination as PiePaginationLit } from './index';
+import { type PaginationProps } from './defs';
+
+export * from './defs';
+
+const PiePaginationReact = createComponent({
+    displayName: 'PiePagination',
+    elementClass: PiePaginationLit,
+    react: React,
+    tagName: 'pie-pagination',
+    events: {},
+});
+
+type ReactBaseType = React.HTMLAttributes<HTMLElement>
+
+export const PiePagination = PiePaginationReact as React.ForwardRefExoticComponent<React.PropsWithChildren<Omit<React.PropsWithoutRef<PaginationProps>, 'children'>>
+    & React.RefAttributes<PiePaginationLit> & ReactBaseType>;