@justeattakeaway/pie-button 0.6.1 → 0.8.0

package/.turbo/turbo-build.log

@@ -1,7 +1,29 @@
-@justeattakeaway/pie-button:build: cache hit, replaying output d804f716cd573de0
-@justeattakeaway/pie-button:build: vite v4.0.4 building for production...
-@justeattakeaway/pie-button:build: transforming...
-@justeattakeaway/pie-button:build: ✓ 4 modules transformed.
-@justeattakeaway/pie-button:build: rendering chunks...
-@justeattakeaway/pie-button:build: computing gzip size...
-@justeattakeaway/pie-button:build: dist/pie-button.js  3.52 kB │ gzip: 1.49 kB
+vite v4.0.4 building for production...
+transforming...
+✓ 4 modules transformed.
+rendering chunks...
+computing gzip size...
+dist/index.js  3.79 kB │ gzip: 1.59 kB
+
+[vite:dts] Start generate declaration files...
+../../../node_modules/@types/react-dom/node_modules/@types/react/index.d.ts:3135:14 - error TS2300: Duplicate identifier 'LibraryManagedAttributes'.
+
+3135         type LibraryManagedAttributes<C, P> = C extends React.MemoExoticComponent<infer T> | React.LazyExoticComponent<infer T>
+                  ~~~~~~~~~~~~~~~~~~~~~~~~
+
+  ../../../node_modules/@types/react/index.d.ts:3135:14
+    3135         type LibraryManagedAttributes<C, P> = C extends React.MemoExoticComponent<infer T> | React.LazyExoticComponent<infer T>
+                      ~~~~~~~~~~~~~~~~~~~~~~~~
+    'LibraryManagedAttributes' was also declared here.
+../../../node_modules/@types/react/index.d.ts:3135:14 - error TS2300: Duplicate identifier 'LibraryManagedAttributes'.
+
+3135         type LibraryManagedAttributes<C, P> = C extends React.MemoExoticComponent<infer T> | React.LazyExoticComponent<infer T>
+                  ~~~~~~~~~~~~~~~~~~~~~~~~
+
+  ../../../node_modules/@types/react-dom/node_modules/@types/react/index.d.ts:3135:14
+    3135         type LibraryManagedAttributes<C, P> = C extends React.MemoExoticComponent<infer T> | React.LazyExoticComponent<infer T>
+                      ~~~~~~~~~~~~~~~~~~~~~~~~
+    'LibraryManagedAttributes' was also declared here.
+
+[vite:dts] Declaration files built in 10579ms.
+

package/CHANGELOG.md

@@ -1,5 +1,24 @@
 # Changelog
 
+## 0.8.0
+
+### Minor Changes
+
+- [Updated] - Register approach for button web component ([#346](https://github.com/justeattakeaway/pie/pull/346)) by [@fernandofranca](https://github.com/fernandofranca)
+
+  [Added] - "types" field in package.json for better DX and IDE TypesScript support
+  [Updated] - Provide Vite settings for generating TypeScript declaration files during build
+
+## 0.7.0
+
+### Minor Changes
+
+- [Updated] button to handle custom events ([#309](https://github.com/justeattakeaway/pie/pull/309)) by [@FayeCarter](https://github.com/FayeCarter)
+
+### Patch Changes
+
+- Add missing Volta settings to package.json ([#322](https://github.com/justeattakeaway/pie/pull/322)) by [@fernandofranca](https://github.com/fernandofranca)
+
 ## 0.6.1
 
 ### Patch Changes

package/dist/index.js

@@ -0,0 +1,80 @@
+import { unsafeCSS as f, LitElement as h, html as g } from "lit";
+import { classMap as m } from "lit/directives/class-map.js";
+import { property as u, customElement as v } from "lit/decorators.js";
+const x = `.o-btn{border-radius:50rem;border:none;font-family:JetSansDigital;font-weight:700;cursor:pointer;user-select:none;outline:none}.o-btn:focus-visible{outline:2px solid #4996fd}.o-btn--xsmall{padding:6px 8px;min-height:32px;font-size:14px;line-height:20px}.o-btn--small{padding:8px 16px;min-height:40px;font-size:19px;line-height:28px}.o-btn--medium{padding:10px 24px;min-height:48px;font-size:20px;line-height:28px}.o-btn--large{padding:14px 24px;min-height:56px;font-size:20px;line-height:28px}.o-btn--primary{background-color:#f36805;color:#fff}.o-btn--primary:hover{background-color:#df5f05}.o-btn--primary:active{background-color:#b74e04}.o-btn--secondary{background-color:#f5f3f1;color:#242e30}.o-btn--secondary:hover{background-color:#ede9e5}.o-btn--secondary:active{background-color:#dcd4cd}.o-btn--outline{outline:1px solid #dbd9d7;background-color:#fff;color:#303d3f}.o-btn--outline:hover{background-color:#f5f5f5}.o-btn--outline:active{background-color:#e0e0e0}.o-btn--ghost{background-color:#fff;color:#242e30}.o-btn--ghost:hover{background-color:#f5f5f5}.o-btn--ghost:active{background-color:#e0e0e0}.o-btn.o-btn--is-disabled{background-color:#efedea;color:#8c999b;outline:1px solid #efedea;cursor:default}.o-btn.o-btn--is-disabled.o-btn--ghost{background-color:#fff;outline:none}
+`, p = (o, n) => function(i, t) {
+  const e = `#${t}`;
+  Object.defineProperty(i, t, {
+    get() {
+      return this[e];
+    },
+    set(r) {
+      const s = this[e];
+      o.includes(r) ? this[e] = r : (console.error(
+        `[pie-button] Invalid value "${r}" provided for property "${t}".`,
+        `Must be one of: ${o.join(" | ")}.`,
+        `Falling back to default value: "${n}"`
+      ), this[e] = n), this.requestUpdate(t, s);
+    }
+  });
+};
+var a = /* @__PURE__ */ ((o) => (o.XSMALL = "xsmall", o.SMALL = "small", o.MEDIUM = "medium", o.LARGE = "large", o))(a || {}), d = /* @__PURE__ */ ((o) => (o.SUBMIT = "submit", o.BUTTON = "button", o.RESET = "reset", o.MENU = "menu", o))(d || {}), b = /* @__PURE__ */ ((o) => (o.PRIMARY = "primary", o.SECONDARY = "secondary", o.OUTLINE = "outline", o.GHOST = "ghost", o))(b || {}), y = Object.defineProperty, M = Object.getOwnPropertyDescriptor, c = (o, n, i, t) => {
+  for (var e = t > 1 ? void 0 : t ? M(n, i) : n, r = o.length - 1, s; r >= 0; r--)
+    (s = o[r]) && (e = (t ? s(n, i, e) : s(e)) || e);
+  return t && e && y(n, i, e), e;
+};
+function E(o) {
+  return (n) => {
+    if (!customElements.get(o))
+      return v(o)(n);
+  };
+}
+let l = class extends h {
+  constructor() {
+    super(...arguments), this.size = a.MEDIUM, this.type = d.SUBMIT, this.variant = b.PRIMARY, this.disabled = !1;
+  }
+  render() {
+    const { size: o, type: n, variant: i, disabled: t } = this, e = {
+      "o-btn": !0,
+      [`o-btn--${o}`]: o,
+      [`o-btn--${i}`]: i,
+      "o-btn--is-disabled": t
+    }, r = () => {
+      const s = new Event("CustomEvent");
+      console.info("WC event dispatched"), this.dispatchEvent(s);
+    };
+    return g`
+            <button
+                class=${m(e)}
+                type=${n}
+                ?disabled=${t}
+                @click="${r}">
+                I'm a PIE button
+            </button>`;
+  }
+};
+l.styles = f(x);
+c([
+  u(),
+  p(Object.values(a), a.MEDIUM)
+], l.prototype, "size", 2);
+c([
+  u(),
+  p(Object.values(d), d.SUBMIT)
+], l.prototype, "type", 2);
+c([
+  u(),
+  p(Object.values(b), b.PRIMARY)
+], l.prototype, "variant", 2);
+c([
+  u()
+], l.prototype, "disabled", 2);
+l = c([
+  E("pie-button")
+], l);
+export {
+  a as BUTTON_SIZE,
+  d as BUTTON_TYPE,
+  b as BUTTON_VARIANT,
+  l as PieButton
+};

package/dist/types/index.d.ts

@@ -0,0 +1 @@
+export * from './src/index'

package/dist/types/src/decorators.d.ts

@@ -0,0 +1,9 @@
+/**
+ * A decorator for specifying a list of valid values for a property.
+ * If this property's setter is called with an invalid value, an error is logged and the default value will be assigned instead.
+ * @param validValues - The array of valid values
+ * @param defaultValue - The value to fall back on
+ * @returns
+ */
+export declare const validPropertyValues: (validValues: any[], defaultValue: any) => (target: any, propertyKey: string) => void;
+//# sourceMappingURL=decorators.d.ts.map

package/dist/types/src/decorators.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"decorators.d.ts","sourceRoot":"","sources":["../../../src/decorators.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AACH,eAAO,MAAM,mBAAmB,gBAAiB,GAAG,EAAE,gBAAgB,GAAG,cAC5C,GAAG,eAAe,MAAM,KAAI,IAyBxD,CAAC"}

package/dist/types/src/defs.d.ts

@@ -0,0 +1,28 @@
+/**
+ * Button size variants
+ */
+export declare enum BUTTON_SIZE {
+    XSMALL = "xsmall",
+    SMALL = "small",
+    MEDIUM = "medium",
+    LARGE = "large"
+}
+/**
+ * Button style variants
+ */
+export declare enum BUTTON_TYPE {
+    SUBMIT = "submit",
+    BUTTON = "button",
+    RESET = "reset",
+    MENU = "menu"
+}
+/**
+ * Button style variants
+ */
+export declare enum BUTTON_VARIANT {
+    PRIMARY = "primary",
+    SECONDARY = "secondary",
+    OUTLINE = "outline",
+    GHOST = "ghost"
+}
+//# sourceMappingURL=defs.d.ts.map

package/dist/types/src/defs.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"defs.d.ts","sourceRoot":"","sources":["../../../src/defs.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,oBAAY,WAAW;IACnB,MAAM,WAAW;IACjB,KAAK,UAAU;IACf,MAAM,WAAW;IACjB,KAAK,UAAU;CAClB;AAED;;GAEG;AACH,oBAAY,WAAW;IACnB,MAAM,WAAW;IACjB,MAAM,WAAW;IACjB,KAAK,UAAU;IACf,IAAI,SAAS;CAChB;AAED;;GAEG;AACH,oBAAY,cAAc;IACtB,OAAO,YAAY;IACnB,SAAS,cAAc;IACvB,OAAO,YAAY;IACnB,KAAK,UAAU;CAClB"}

package/dist/types/src/index.d.ts

@@ -0,0 +1,12 @@
+import { LitElement } from 'lit';
+import { BUTTON_SIZE, BUTTON_TYPE, BUTTON_VARIANT } from './defs';
+export { BUTTON_SIZE, BUTTON_TYPE, BUTTON_VARIANT };
+export declare class PieButton extends LitElement {
+    size: BUTTON_SIZE;
+    type: BUTTON_TYPE;
+    variant: BUTTON_VARIANT;
+    disabled: boolean;
+    render(): import("lit-html").TemplateResult<1>;
+    static styles: import("lit").CSSResult;
+}
+//# sourceMappingURL=index.d.ts.map

package/dist/types/src/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAmB,MAAM,KAAK,CAAC;AAMlD,OAAO,EAAE,WAAW,EAAE,WAAW,EAAE,cAAc,EAAE,MAAM,QAAQ,CAAC;AAGlE,OAAO,EAAE,WAAW,EAAE,WAAW,EAAE,cAAc,EAAE,CAAC;AAWpD,qBACa,SAAU,SAAQ,UAAU;IAGrC,IAAI,EAAG,WAAW,CAAsB;IAIxC,IAAI,EAAG,WAAW,CAAsB;IAIxC,OAAO,EAAG,cAAc,CAA0B;IAGlD,QAAQ,EAAG,OAAO,CAAS;IAE3B,MAAM;IA2BN,MAAM,CAAC,MAAM,0BAAqB;CACrC"}

package/package.json

@@ -1,15 +1,19 @@
 {
   "name": "@justeattakeaway/pie-button",
-  "version": "0.6.1",
+  "version": "0.8.0",
   "description": "PIE design system button built using web components",
   "type": "module",
-  "main": "dist/pie-button.js",
+  "main": "dist/index.js",
+  "types": "dist/types/index.d.ts",
   "scripts": {
     "build": "run -T vite build",
     "watch": "run -T vite build --watch",
     "dev": "run -T vite",
-    "test": "echo \"Error: no test specified\" && exit 1"
+    "test": "echo \"Error: no test specified\" && exit 0"
   },
   "author": "JustEatTakeaway - Design System Web Team",
-  "license": "Apache-2.0"
+  "license": "Apache-2.0",
+  "volta": {
+    "extends": "../../../package.json"
+  }
 }

package/src/decorators.ts

@@ -7,14 +7,14 @@
  */
 export const validPropertyValues = (validValues: any[], defaultValue: any) => {
     return function (target: any, propertyKey: string) : void {
-        const privatePropertyKey = `_${propertyKey}`;
+        const privatePropertyKey = `#${propertyKey}`;
 
         Object.defineProperty(target, propertyKey, {
             get () : any {
-                return target[privatePropertyKey];
+                return this[privatePropertyKey];
             },
             set (value: any) : void {
-                const oldValue = target[privatePropertyKey];
+                const oldValue = this[privatePropertyKey];
 
                 if (!validValues.includes(value)) {
                     console.error(
@@ -22,9 +22,9 @@ export const validPropertyValues = (validValues: any[], defaultValue: any) => {
                         `Must be one of: ${validValues.join(' | ')}.`,
                         `Falling back to default value: "${defaultValue}"`
                     );
-                    target[privatePropertyKey] = defaultValue;
+                    this[privatePropertyKey] = defaultValue;
                 } else {
-                    target[privatePropertyKey] = value;
+                    this[privatePropertyKey] = value;
                 }
 
                 this.requestUpdate(propertyKey, oldValue);

package/src/index.ts

@@ -9,7 +9,16 @@ import { BUTTON_SIZE, BUTTON_TYPE, BUTTON_VARIANT } from './defs';
 // Valid values available to consumers
 export { BUTTON_SIZE, BUTTON_TYPE, BUTTON_VARIANT };
 
-@customElement('pie-button')
+// TODO: Extract as a utility function in a shared package
+function defineCustomElement(elementName:string) {
+    return (elementClass:typeof LitElement) => {
+        if(customElements.get(elementName)) return;
+
+        return customElement(elementName)(elementClass);
+    }
+}
+
+@defineCustomElement('pie-button')
 export class PieButton extends LitElement {
     @property()
     @validPropertyValues(Object.values(BUTTON_SIZE), BUTTON_SIZE.MEDIUM)
@@ -36,15 +45,22 @@ export class PieButton extends LitElement {
             'o-btn--is-disabled': disabled,
         };
 
+        const raiseWCEvent = () => {
+            const event = new Event('CustomEvent')
+            console.info('WC event dispatched')
+            this.dispatchEvent(event)
+        }
+
         return html`
             <button
                 class=${classMap(classes)}
                 type=${type}
-                ?disabled=${disabled}>
+                ?disabled=${disabled}
+                @click="${raiseWCEvent}">
                 I'm a PIE button
             </button>`;
     }
 
     // Renders a `CSSResult` generated from SCSS by Vite
     static styles = unsafeCSS(styles);
-}
+}

package/vite.config.js

@@ -1,14 +1,21 @@
+/* eslint-disable import/no-extraneous-dependencies */
 import { defineConfig } from 'vite';
+import dts from 'vite-plugin-dts';
 
 // https://vitejs.dev/config/
 export default defineConfig({
-  build: {
-    lib: {
-      entry: 'src/index.ts',
-      formats: ['es'],
+    build: {
+        lib: {
+            entry: 'src/index.ts',
+            fileName: 'index',
+            formats: ['es'],
+        },
+        rollupOptions: {
+            external: /^lit/,
+        },
     },
-    rollupOptions: {
-      external: /^lit/,
-    },
-  },
+    plugins: [dts({
+        insertTypesEntry: true,
+        outputDir: 'dist/types',
+    })],
 });

package/dist/pie-button.js

@@ -1,70 +0,0 @@
-import { unsafeCSS as f, LitElement as g, html as h } from "lit";
-import { classMap as m } from "lit/directives/class-map.js";
-import { property as p, customElement as v } from "lit/decorators.js";
-const x = `.o-btn{border-radius:50rem;border:none;font-family:JetSansDigital;font-weight:700;cursor:pointer;user-select:none;outline:none}.o-btn:focus-visible{outline:2px solid #4996fd}.o-btn--xsmall{padding:6px 8px;min-height:32px;font-size:14px;line-height:20px}.o-btn--small{padding:8px 16px;min-height:40px;font-size:19px;line-height:28px}.o-btn--medium{padding:10px 24px;min-height:48px;font-size:20px;line-height:28px}.o-btn--large{padding:14px 24px;min-height:56px;font-size:20px;line-height:28px}.o-btn--primary{background-color:#f36805;color:#fff}.o-btn--primary:hover{background-color:#df5f05}.o-btn--primary:active{background-color:#b74e04}.o-btn--secondary{background-color:#f5f3f1;color:#242e30}.o-btn--secondary:hover{background-color:#ede9e5}.o-btn--secondary:active{background-color:#dcd4cd}.o-btn--outline{outline:1px solid #dbd9d7;background-color:#fff;color:#303d3f}.o-btn--outline:hover{background-color:#f5f5f5}.o-btn--outline:active{background-color:#e0e0e0}.o-btn--ghost{background-color:#fff;color:#242e30}.o-btn--ghost:hover{background-color:#f5f5f5}.o-btn--ghost:active{background-color:#e0e0e0}.o-btn.o-btn--is-disabled{background-color:#efedea;color:#8c999b;outline:1px solid #efedea;cursor:default}.o-btn.o-btn--is-disabled.o-btn--ghost{background-color:#fff;outline:none}
-`, u = (o, r) => function(t, n) {
-  const e = `_${n}`;
-  Object.defineProperty(t, n, {
-    get() {
-      return t[e];
-    },
-    set(i) {
-      const l = t[e];
-      o.includes(i) ? t[e] = i : (console.error(
-        `[pie-button] Invalid value "${i}" provided for property "${n}".`,
-        `Must be one of: ${o.join(" | ")}.`,
-        `Falling back to default value: "${r}"`
-      ), t[e] = r), this.requestUpdate(n, l);
-    }
-  });
-};
-var c = /* @__PURE__ */ ((o) => (o.XSMALL = "xsmall", o.SMALL = "small", o.MEDIUM = "medium", o.LARGE = "large", o))(c || {}), b = /* @__PURE__ */ ((o) => (o.SUBMIT = "submit", o.BUTTON = "button", o.RESET = "reset", o.MENU = "menu", o))(b || {}), d = /* @__PURE__ */ ((o) => (o.PRIMARY = "primary", o.SECONDARY = "secondary", o.OUTLINE = "outline", o.GHOST = "ghost", o))(d || {}), y = Object.defineProperty, M = Object.getOwnPropertyDescriptor, a = (o, r, t, n) => {
-  for (var e = n > 1 ? void 0 : n ? M(r, t) : r, i = o.length - 1, l; i >= 0; i--)
-    (l = o[i]) && (e = (n ? l(r, t, e) : l(e)) || e);
-  return n && e && y(r, t, e), e;
-};
-let s = class extends g {
-  constructor() {
-    super(...arguments), this.size = c.MEDIUM, this.type = b.SUBMIT, this.variant = d.PRIMARY, this.disabled = !1;
-  }
-  render() {
-    const { size: o, type: r, variant: t, disabled: n } = this, e = {
-      "o-btn": !0,
-      [`o-btn--${o}`]: o,
-      [`o-btn--${t}`]: t,
-      "o-btn--is-disabled": n
-    };
-    return h`
-            <button
-                class=${m(e)}
-                type=${r}
-                ?disabled=${n}>
-                I'm a PIE button
-            </button>`;
-  }
-};
-s.styles = f(x);
-a([
-  p(),
-  u(Object.values(c), c.MEDIUM)
-], s.prototype, "size", 2);
-a([
-  p(),
-  u(Object.values(b), b.SUBMIT)
-], s.prototype, "type", 2);
-a([
-  p(),
-  u(Object.values(d), d.PRIMARY)
-], s.prototype, "variant", 2);
-a([
-  p()
-], s.prototype, "disabled", 2);
-s = a([
-  v("pie-button")
-], s);
-export {
-  c as BUTTON_SIZE,
-  b as BUTTON_TYPE,
-  d as BUTTON_VARIANT,
-  s as PieButton
-};