patch and readme

Signed-off-by: Try Ajitiono <[email protected]>

README.md

@@ -17,6 +17,28 @@ Look for files in
 
 - `src/App.js`
 
+## Patching dependencies
+
+We are patching `wired-elements` and `wired-elements-react`, because some of the requirements that we sought weren't available in these 2 libraries.
+
+To apply the patches under the [patches](./patches) folder, do this in the root of this project:
+
+```shell
+yarn patch-package
+```
+
+To apply a new patch, go to the `node_modules` folder and find the package that you want to patch. Some tips when patching:
+
+1. Remember that you need to patch the transpiled JavaScript files instead of TypeScript files.
+2. Changing `node_modules` requires us to restart the development server, so the overall process might take some time, especially with trials and errors.
+3. Remember to read the package's docs, package's GitHub issues, and other discussions (e.g. StackOverflow). They might save you some time.
+
+After finishing your patch, let's say that you are patching something inside `wired-elements`, do this in the root of this project:
+
+```shell
+yarn patch-package wired-elements
+```
+
 ## Contributing
 
 If you would like to help us with this project you can learn about our initiative from [twitter](https://twitter.com/ans4175/status/1457313278015639553?s=20). Before you contribute to this project, please make sure to read our [CONTRIBUTING](CONTRIBUTING.md) file.

patches/wired-elements+3.0.0-rc.6.patch

@@ -1,3 +1,60 @@
+diff --git a/node_modules/wired-elements/lib/wired-item.d.ts b/node_modules/wired-elements/lib/wired-item.d.ts
+index b2ee940..c6d4465 100644
+--- a/node_modules/wired-elements/lib/wired-item.d.ts
++++ b/node_modules/wired-elements/lib/wired-item.d.ts
+@@ -3,6 +3,7 @@ import { TemplateResult, CSSResultArray } from 'lit';
+ export declare class WiredItem extends WiredBase {
+     value: string;
+     name: string;
++    disabled: boolean;
+     selected: boolean;
+     static get styles(): CSSResultArray;
+     render(): TemplateResult;
+diff --git a/node_modules/wired-elements/lib/wired-item.js b/node_modules/wired-elements/lib/wired-item.js
+index e9c5d3c..a07b161 100644
+--- a/node_modules/wired-elements/lib/wired-item.js
++++ b/node_modules/wired-elements/lib/wired-item.js
+@@ -16,6 +16,7 @@ let WiredItem = class WiredItem extends WiredBase {
+         super(...arguments);
+         this.value = '';
+         this.name = '';
++        this.disabled = false;
+         this.selected = false;
+     }
+     static get styles() {
+@@ -69,6 +70,12 @@ let WiredItem = class WiredItem extends WiredBase {
+       button:active span {
+         transform: scale(1.02);
+       }
++      button[disabled] {
++        opacity: 0.6 !important;
++        background: rgba(0, 0, 0, 0.07);
++        cursor: default;
++        pointer-events: none;
++      }
+       #overlay {
+         display: none;
+       }
+@@ -91,7 +98,7 @@ let WiredItem = class WiredItem extends WiredBase {
+     }
+     render() {
+         return html `
+-    <button class="${this.selected ? 'selected' : ''}">
++    <button class="${this.selected ? 'selected' : ''}" ?disabled="${this.disabled}">
+       <div id="overlay"><svg></svg></div>
+       <span><slot></slot></span>
+     </button>`;
+@@ -122,6 +129,10 @@ __decorate([
+     property({ type: Boolean }),
+     __metadata("design:type", Object)
+ ], WiredItem.prototype, "selected", void 0);
++__decorate([
++    property({ type: Boolean }),
++    __metadata("design:type", Object)
++], WiredItem.prototype, "disabled", void 0);
+ WiredItem = __decorate([
+     customElement('wired-item')
+ ], WiredItem);
 diff --git a/node_modules/wired-elements/lib/wired-lib.js b/node_modules/wired-elements/lib/wired-lib.js
 index 5b1d153..9d3ec39 100644
 --- a/node_modules/wired-elements/lib/wired-lib.js
@@ -12,30 +69,32 @@ index 5b1d153..9d3ec39 100644
  }
  export function hachureEllipseFill(cx, cy, width, height, seed) {
 diff --git a/node_modules/wired-elements/lib/wired-tab.d.ts b/node_modules/wired-elements/lib/wired-tab.d.ts
-index 0ba5fe7..3cc6d77 100644
+index 0ba5fe7..45270d9 100644
 --- a/node_modules/wired-elements/lib/wired-tab.d.ts
 +++ b/node_modules/wired-elements/lib/wired-tab.d.ts
-@@ -4,6 +4,7 @@ import './wired-item.js';
+@@ -4,6 +4,8 @@ import './wired-item.js';
  export declare class WiredTab extends WiredBase {
      name: string;
      label: string;
++    disabled?: boolean;
 +    hasBorder?: boolean;
      private resizeObserver?;
      private windowResizeHandler?;
      constructor();
 diff --git a/node_modules/wired-elements/lib/wired-tab.js b/node_modules/wired-elements/lib/wired-tab.js
-index 505dc90..b61146e 100644
+index 505dc90..ac69e4d 100644
 --- a/node_modules/wired-elements/lib/wired-tab.js
 +++ b/node_modules/wired-elements/lib/wired-tab.js
-@@ -17,6 +17,7 @@ let WiredTab = class WiredTab extends WiredBase {
+@@ -17,6 +17,8 @@ let WiredTab = class WiredTab extends WiredBase {
          super();
          this.name = '';
          this.label = '';
++        this.disabled = false;
 +        this.hasBorder = true;
          if (window.ResizeObserver) {
              this.resizeObserver = new window.ResizeObserver(() => {
                  if (this.svg) {
-@@ -74,7 +75,9 @@ let WiredTab = class WiredTab extends WiredBase {
+@@ -74,7 +76,9 @@ let WiredTab = class WiredTab extends WiredBase {
          return [s.width, s.height];
      }
      draw(svg, s) {
@@ -46,14 +105,18 @@ index 505dc90..b61146e 100644
      }
  };
  __decorate([
-@@ -85,6 +88,10 @@ __decorate([
+@@ -85,6 +89,14 @@ __decorate([
      property({ type: String }),
      __metadata("design:type", Object)
  ], WiredTab.prototype, "label", void 0);
 +__decorate([
 +    property({ type: Boolean }),
 +    __metadata("design:type", Object)
 +], WiredTab.prototype, "hasBorder", void 0);
++__decorate([
++    property({ type: Boolean }),
++    __metadata("design:type", Object)
++], WiredTab.prototype, "disabled", void 0);
  WiredTab = __decorate([
      customElement('wired-tab'),
      __metadata("design:paramtypes", [])
@@ -70,7 +133,7 @@ index cb2b68f..138f4a5 100644
      private pages;
      private pageMap;
 diff --git a/node_modules/wired-elements/lib/wired-tabs.js b/node_modules/wired-elements/lib/wired-tabs.js
-index f9dfb28..0a83d21 100644
+index f9dfb28..dd5f5e9 100644
 --- a/node_modules/wired-elements/lib/wired-tabs.js
 +++ b/node_modules/wired-elements/lib/wired-tabs.js
 @@ -7,14 +7,17 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
@@ -92,7 +155,7 @@ index f9dfb28..0a83d21 100644
      }
      static get styles() {
          return [
-@@ -39,12 +42,22 @@ let WiredTabs = class WiredTabs extends LitElement {
+@@ -39,15 +42,32 @@ let WiredTabs = class WiredTabs extends LitElement {
            -webkit-flex-direction: row;
            flex-direction: row;
          }
@@ -109,14 +172,26 @@ index f9dfb28..0a83d21 100644
        `
          ];
      }
++    onTabClick(page) {
++        if (page.__disabled) {
++            return;
++        }
++
++        this.selected = page.name
++    }
      render() {
          return html `
 -    <div id="bar">
 +    <div id="bar" class=${classMap({ [this.alignment]: true })}>
        ${this.pages.map((p) => html `
-       <wired-item role="tab" .value="${p.name}" .selected="${p.name === this.selected}" ?aria-selected="${p.name === this.selected}"
-         @click="${() => this.selected = p.name}">${p.label || p.name}</wired-item>
-@@ -66,7 +79,10 @@ let WiredTabs = class WiredTabs extends LitElement {
+-      <wired-item role="tab" .value="${p.name}" .selected="${p.name === this.selected}" ?aria-selected="${p.name === this.selected}"
+-        @click="${() => this.selected = p.name}">${p.label || p.name}</wired-item>
++      <wired-item role="tab" .disabled="${p.__disabled}" .value="${p.name}" .selected="${p.name === this.selected}" ?aria-selected="${p.name === this.selected}"
++        @click="${() => this.onTabClick(p)}">${p.label || p.name}</wired-item>
+       `)}
+     </div>
+     <div>
+@@ -66,7 +86,10 @@ let WiredTabs = class WiredTabs extends LitElement {
                      if (n.nodeType === Node.ELEMENT_NODE && n.tagName.toLowerCase() === 'wired-tab') {
                          const e = n;
                          this.pages.push(e);
@@ -128,25 +203,49 @@ index f9dfb28..0a83d21 100644
                          if (name) {
                              name.trim().split(' ').forEach((nameSegment) => {
                                  if (nameSegment) {
-@@ -117,6 +133,7 @@ let WiredTabs = class WiredTabs extends LitElement {
+@@ -105,6 +128,11 @@ let WiredTabs = class WiredTabs extends LitElement {
+     }
+     updated() {
+         const newPage = this.getElement();
++        
++        if (newPage.__disabled) {
++            return;
++        }
++
+         for (let i = 0; i < this.pages.length; i++) {
+             const p = this.pages[i];
+             if (p === newPage) {
+@@ -117,6 +145,7 @@ let WiredTabs = class WiredTabs extends LitElement {
          this.current = newPage || undefined;
          if (this.current && this.current.wiredRender) {
              requestAnimationFrame(() => requestAnimationFrame(() => this.current.wiredRender()));
 +            this.fireSelected();
          }
      }
      getElement() {
-@@ -149,6 +166,7 @@ let WiredTabs = class WiredTabs extends LitElement {
+@@ -148,7 +177,13 @@ let WiredTabs = class WiredTabs extends LitElement {
+             else {
                  index--;
              }
++            
++            if (list[index].__disabled) {
++                return;
++            }
++
              this.selected = list[index].name || '';
 +            this.fireSelected();
          }
      }
      selectNext() {
-@@ -171,13 +189,21 @@ let WiredTabs = class WiredTabs extends LitElement {
+@@ -170,14 +205,27 @@ let WiredTabs = class WiredTabs extends LitElement {
+             else {
                  index++;
              }
++            
++            if (list[index].__disabled) {
++                return;
++            }
++
              this.selected = list[index].name || '';
 +            this.fireSelected();
          }

patches/wired-elements-react+0.1.5.patch

@@ -1,3 +1,24 @@
+diff --git a/node_modules/wired-elements-react/lib/WiredItem.d.ts b/node_modules/wired-elements-react/lib/WiredItem.d.ts
+index 65b8bcd..2bf7b3e 100644
+--- a/node_modules/wired-elements-react/lib/WiredItem.d.ts
++++ b/node_modules/wired-elements-react/lib/WiredItem.d.ts
+@@ -1,5 +1,6 @@
+ import * as React from 'react';
+ import { WiredItem as _WiredItem } from 'wired-elements/lib/wired-item.js';
+ export declare const WiredItem: React.ForwardRefExoticComponent<Partial<_WiredItem> & {} & {
++    disabled?: boolean;
+     children?: React.ReactNode;
+ } & React.RefAttributes<unknown>>;
+diff --git a/node_modules/wired-elements-react/lib/WiredTab.d.ts b/node_modules/wired-elements-react/lib/WiredTab.d.ts
+index 9c3d248..d1e1ab9 100644
+--- a/node_modules/wired-elements-react/lib/WiredTab.d.ts
++++ b/node_modules/wired-elements-react/lib/WiredTab.d.ts
+@@ -2,4 +2,5 @@ import * as React from 'react';
+ import { WiredTab as CE } from 'wired-elements/lib/wired-tab.js';
+ export declare const WiredTab: React.ForwardRefExoticComponent<Partial<CE> & {} & {
+     children?: React.ReactNode;
++    disabled?: boolean;
+ } & React.RefAttributes<unknown>>;
 diff --git a/node_modules/wired-elements-react/lib/WiredTabs.d.ts b/node_modules/wired-elements-react/lib/WiredTabs.d.ts
 index cbafd3d..3299a2a 100644
 --- a/node_modules/wired-elements-react/lib/WiredTabs.d.ts