@justeattakeaway/pie-checkbox 0.0.0-snapshot-release-20240429074131

package/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-checkbox">
+    <img alt="GitHub Workflow Status" src="https://img.shields.io/npm/v/@justeattakeaway/pie-checkbox.svg">
+  </a>
+</p>
+
+# Table of Contents
+
+1. [Introduction](#pie-checkbox)
+2. [Installation](#installation)
+3. [Importing the component](#importing-the-component)
+4. [Peer Dependencies](#peer-dependencies)
+5. [Props](#props)
+6. [Contributing](#contributing)
+
+## pie-checkbox
+
+`pie-checkbox` 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-checkbox` in your application, run the following on your command line:
+
+```bash
+# npm
+$ npm i @justeattakeaway/pie-checkbox
+
+# yarn
+$ yarn add @justeattakeaway/pie-checkbox
+```
+
+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 { PieCheckbox } from '@justeattakeaway/pie-checkbox';
+
+// 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-checkbox';
+```
+
+#### React
+```js
+// React
+// For React, you will need to import our React-specific component build
+// which wraps the web component using ​@lit/react
+import { PieCheckbox } from '@justeattakeaway/pie-checkbox/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-checkbox`, 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-checkbox` component:
+
+```html
+<!-- Native HTML -->
+<pie-checkbox></pie-checkbox>
+
+<!-- JSX -->
+<PieCheckbox></PieCheckbox>
+```
+
+## 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": "PieCheckbox",
+          "members": [],
+          "mixins": [
+            {
+              "name": "RtlMixin",
+              "package": "@justeattakeaway/pie-webc-core"
+            }
+          ],
+          "superclass": {
+            "name": "LitElement",
+            "package": "lit"
+          },
+          "tagName": "pie-checkbox",
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "*",
+          "declaration": {
+            "name": "*",
+            "package": "./defs"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "PieCheckbox",
+          "declaration": {
+            "name": "PieCheckbox",
+            "module": "src/index.js"
+          }
+        }
+      ]
+    }
+  ]
+}

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,20 @@
+import type { CSSResult } from 'lit';
+import type { GenericConstructor } from '@justeattakeaway/pie-webc-core';
+import type { LitElement } from 'lit';
+import type { RTLInterface } from '@justeattakeaway/pie-webc-core';
+import type { TemplateResult } from 'lit-html';
+
+export declare interface CheckboxProps {
+}
+
+/**
+ * @tagname pie-checkbox
+ */
+export declare class PieCheckbox extends PieCheckbox_base implements CheckboxProps {
+    render(): TemplateResult<1>;
+    static styles: CSSResult;
+}
+
+declare const PieCheckbox_base: GenericConstructor<RTLInterface> & typeof LitElement;
+
+export { }

package/dist/index.js

@@ -0,0 +1,14 @@
+import { LitElement as t, html as o, unsafeCSS as n } from "lit";
+import { RtlMixin as i, defineCustomElement as r } from "@justeattakeaway/pie-webc-core";
+const s = `*,*:after,*:before{box-sizing:inherit}
+`, l = "pie-checkbox";
+class e extends i(t) {
+  render() {
+    return o`<h1 data-test-id="pie-checkbox">Hello world!</h1>`;
+  }
+}
+e.styles = n(s);
+r(l, e);
+export {
+  e as PieCheckbox
+};

package/dist/react.d.ts

@@ -0,0 +1,25 @@
+import type { CSSResult } from 'lit';
+import type { GenericConstructor } from '@justeattakeaway/pie-webc-core';
+import type { LitElement } from 'lit';
+import * as React_2 from 'react';
+import type { RTLInterface } from '@justeattakeaway/pie-webc-core';
+import type { TemplateResult } from 'lit-html';
+
+export declare interface CheckboxProps {
+}
+
+export declare const PieCheckbox: React_2.ForwardRefExoticComponent<CheckboxProps & React_2.RefAttributes<PieCheckbox_2> & ReactBaseType>;
+
+/**
+ * @tagname pie-checkbox
+ */
+declare class PieCheckbox_2 extends PieCheckbox_base implements CheckboxProps {
+    render(): TemplateResult<1>;
+    static styles: CSSResult;
+}
+
+declare const PieCheckbox_base: GenericConstructor<RTLInterface> & typeof LitElement;
+
+declare type ReactBaseType = React_2.HTMLAttributes<HTMLElement>;
+
+export { }

package/dist/react.js

@@ -0,0 +1,15 @@
+import * as e from "react";
+import { createComponent as o } from "@lit/react";
+import { PieCheckbox as t } from "./index.js";
+import "lit";
+import "@justeattakeaway/pie-webc-core";
+const c = o({
+  displayName: "PieCheckbox",
+  elementClass: t,
+  react: e,
+  tagName: "pie-checkbox",
+  events: {}
+}), p = c;
+export {
+  p as PieCheckbox
+};

package/package.json

@@ -0,0 +1,51 @@
+{
+  "name": "@justeattakeaway/pie-checkbox",
+  "description": "PIE Design System Checkbox built using Web Components",
+  "version": "0.0.0-snapshot-release-20240429074131",
+  "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": "echo \"Error: A new Percy project needs to be created before visual tests can be run. steps: https://vue.pie.design/?path=/story/documentation-standards-testing-visual-regression--page \" && exit 1",
+    "test:visual:ci": "yarn test:visual"
+  },
+  "author": "Just Eat Takeaway.com - Design System Team",
+  "license": "Apache-2.0",
+  "devDependencies": {
+    "@custom-elements-manifest/analyzer": "0.9.0",
+    "@justeattakeaway/pie-components-config": "workspace:*",
+    "cem-plugin-module-file-extensions": "0.0.5"
+  },
+  "dependencies": {
+    "@justeattakeaway/pie-webc-core": "workspace:*"
+  },
+  "volta": {
+    "extends": "../../../package.json"
+  },
+  "customElements": "custom-elements.json",
+  "sideEffects": [
+    "dist/*.js"
+  ]
+}

package/src/checkbox.scss

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

package/src/defs-react.ts

@@ -0,0 +1,8 @@
+import 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 CheckboxProps {}

package/src/index.ts

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

package/src/react.ts

@@ -0,0 +1,19 @@
+import * as React from 'react';
+import { createComponent } from '@lit/react';
+import { PieCheckbox as PieCheckboxLit } from './index';
+import { CheckboxProps } from './defs';
+
+export * from './defs';
+
+const PieCheckboxReact = createComponent({
+    displayName: 'PieCheckbox',
+    elementClass: PieCheckboxLit,
+    react: React,
+    tagName: 'pie-checkbox',
+    events: {},
+});
+
+type ReactBaseType = React.HTMLAttributes<HTMLElement>
+
+export const PieCheckbox = PieCheckboxReact as React.ForwardRefExoticComponent<React.PropsWithoutRef<CheckboxProps>
+    & React.RefAttributes<PieCheckboxLit> & ReactBaseType>;