@biggive/components 0.0.17 → 0.0.21

package/hydrate/package.json

@@ -0,0 +1,6 @@
+{
+  "name": "@biggive/components/hydrate",
+  "description": "BigGive component hydration app.",
+  "main": "index.js",
+  "types": "index.d.ts"
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@biggive/components",
-  "version": "0.0.17",
+  "version": "0.0.21",
   "description": "Big Give Components",
   "main": "dist/index.cjs.js",
   "module": "dist/index.js",
@@ -16,7 +16,8 @@
   },
   "files": [
     "dist/",
-    "loader/"
+    "loader/",
+    "hydrate/"
   ],
   "scripts": {
     "build": "stencil build --docs",
@@ -27,7 +28,9 @@
     "test.watch": "stencil test --spec --e2e --watchAll",
     "generate": "stencil generate",
     "prepare": "husky install",
-    "pre-commit": "lint-staged"
+    "pre-commit": "lint-staged",
+    "storybook": "start-storybook -p 6006",
+    "build-storybook": "build-storybook"
   },
   "dependencies": {
     "@fortawesome/fontawesome-svg-core": "^6.1.2",
@@ -38,10 +41,20 @@
     "@stencil/core": "^2.13.0"
   },
   "devDependencies": {
+    "@babel/core": "^7.18.9",
     "@stencil/angular-output-target": "^0.4.0",
     "@stencil/eslint-plugin": "^0.4.0",
     "@stencil/sass": "^1.5.2",
+    "@storybook/addon-actions": "^6.5.9",
+    "@storybook/addon-essentials": "^6.5.9",
+    "@storybook/addon-interactions": "^6.5.9",
+    "@storybook/addon-links": "^6.5.9",
+    "@storybook/builder-webpack4": "^6.5.9",
+    "@storybook/html": "^6.5.9",
+    "@storybook/manager-webpack4": "^6.5.9",
+    "@storybook/testing-library": "^0.0.13",
     "@types/jest": "^27.0.3",
+    "babel-loader": "^8.2.5",
     "eslint-config-prettier": "^8.5.0",
     "eslint-plugin-prettier": "^4.2.1",
     "husky": "^8.0.0",

package/readme.md

@@ -45,6 +45,29 @@ Anything externally managed should be loaded with npm and no copies checked into
 
 Generated build outputs should similarly be `.gitignore`d.
 
+Because Stencil components have *partly* generated readme docs, it is a good idea after changing any `@Prop`s or similar to `npm run build`
+before committing your changes. The docs should be source controlled as they can include manual content. If you make a new one, it's a good
+idea to add a one line description of its purpose to the readme before the generated section.
+
+### Output targets
+
+Main targets are:
+
+* `angularOutputTarget()` – used in [Donate frontend](https://github.com/thebiggive/donate-frontend).
+* `dist-custom-elements` – the docs don't make this terribly clear but with our current configuration,
+  these are a dependency for the Angular project/target to build successfully. Angular needs to be told
+  that they live inside `dist/` (so are published in `dist/components`).
+* `dist-hydrate-script` for SSR – used in [Donate frontend](https://github.com/thebiggive/donate-frontend) as initially served by ECS. Stencil [document this one separately](https://stenciljs.com/docs/hydrate-app).
+* `dist` for general web modules – used in [WordPress](https://github.com/thebiggive/wordpress).
+* Storybook has its own build step using the component from source. Currently, this is also used in
+  Salesforce to embed components in iframes, the only feasible way we've been able to get Experiences
+  to dynamically pull in components.
+* `docs-readme` for documentation.
+
+Targets we have but just for local experiments:
+
+* `www`
+
 ### Angular components
 
 As well as the core package `@biggive/components`, CI automatically publishes a version best tailored to
@@ -100,8 +123,20 @@ This directory contains the distribtion files
 ### www directory - https://stenciljs.com/docs/www
 This directory contains a static version of the web components which can be used for testing and inclusion in simple web apps. Due to CORS restrictions, the index.html file needs to be run from a webserver (not as a local file).
 
+### Storybook
+
+We've followed [this guide](https://ionicframework.com/blog/how-to-use-storybook-with-stencil/) to
+provide sample usage of key components: a living style guide.
 
+CI automatically publishes the Storybook preview:
+* to [its Staging site](https://components-staging.thebiggivetest.org.uk) on *any* push to `main`; and
+* to [its Production site](https://components-production.thebiggive.org.uk) on *tagged* pushes
+  (typically also on `main`) – intended for tested, new versions which are also to be npm published.
 
+For now, the local `npm run storybook` won't load static image assets or fonts. We've prioritised realistic
+renders in the deployed environment, where these work due to:
+* CI separately copying the main build's `assets` output to S3: see e.g. `deploy-staging-storybook` in [CI config](./.circleci/config.yml)
+* Storybook having a custom [`preview-head.html`](./.storybook/preview-head.html).
 
 ## Publish to NPM
 
@@ -112,9 +147,17 @@ npm add_user
 
 ### Publish
 
-Continuous Integration will automatically publish `main` to NPM, but you can also do it manually if necessary.
+Continuous Integration will automatically publish `main` to npm when you push a `v*` tag.
+
+Versioning is manual currently. To prepare a release for publishing:
+
+* Update the root `package.json`'s `version` field.
+* `npm install` to update `package-lock.json` to match.
+* Update `angular/projects/components/package.json`'s `version` field so that `@biggive/components-angular` matches too.
+* `git tag v0.0.1` (replace with your new version)
+* `git push --tags`
 
-(Once this repo gets closer to being stable, we can update the configuration to just publish new version tags.)
+You can also do it manually if necessary:
 
 ```bash
 npm publish --access=public

package/dist/biggive/p-ce3d5ebc.js

@@ -1,2 +0,0 @@
-let t,e,n=!1,l=!1;const s="undefined"!=typeof window?window:{},o=s.document||{head:{}},r={t:0,l:"",jmp:t=>t(),raf:t=>requestAnimationFrame(t),ael:(t,e,n,l)=>t.addEventListener(e,n,l),rel:(t,e,n,l)=>t.removeEventListener(e,n,l),ce:(t,e)=>new CustomEvent(t,e)},i=t=>Promise.resolve(t),c=(()=>{try{return new CSSStyleSheet,"function"==typeof(new CSSStyleSheet).replaceSync}catch(t){}return!1})(),u=new WeakMap,a=t=>"sc-"+t.o,f={},h=t=>"object"==(t=typeof t)||"function"===t,$=(t,e,...n)=>{let l=null,s=!1,o=!1;const r=[],i=e=>{for(let n=0;n<e.length;n++)l=e[n],Array.isArray(l)?i(l):null!=l&&"boolean"!=typeof l&&((s="function"!=typeof t&&!h(l))&&(l+=""),s&&o?r[r.length-1].i+=l:r.push(s?p(null,l):l),o=s)};if(i(n),e){const t=e.className||e.class;t&&(e.class="object"!=typeof t?t:Object.keys(t).filter((e=>t[e])).join(" "))}const c=p(t,null);return c.u=e,r.length>0&&(c.h=r),c},p=(t,e)=>({t:0,$:t,i:e,p:null,h:null,u:null}),y={},w=(t,e,n,l,s,o)=>{if(n!==l){let r=V(t,e);if(e.toLowerCase(),"class"===e){const e=t.classList,s=m(n),o=m(l);e.remove(...s.filter((t=>t&&!o.includes(t)))),e.add(...o.filter((t=>t&&!s.includes(t))))}else if("style"===e){for(const e in n)l&&null!=l[e]||(e.includes("-")?t.style.removeProperty(e):t.style[e]="");for(const e in l)n&&l[e]===n[e]||(e.includes("-")?t.style.setProperty(e,l[e]):t.style[e]=l[e])}else{const i=h(l);if((r||i&&null!==l)&&!s)try{if(t.tagName.includes("-"))t[e]=l;else{const s=null==l?"":l;"list"===e?r=!1:null!=n&&t[e]==s||(t[e]=s)}}catch(t){}null==l||!1===l?!1===l&&""!==t.getAttribute(e)||t.removeAttribute(e):(!r||4&o||s)&&!i&&t.setAttribute(e,l=!0===l?"":l)}}},d=/\s/,m=t=>t?t.split(d):[],b=(t,e,n,l)=>{const s=11===e.p.nodeType&&e.p.host?e.p.host:e.p,o=t&&t.u||f,r=e.u||f;for(l in o)l in r||w(s,l,o[l],void 0,n,e.t);for(l in r)w(s,l,o[l],r[l],n,e.t)},g=(e,l,s)=>{const r=l.h[s];let i,c,u=0;if(null!==r.i)i=r.p=o.createTextNode(r.i);else{if(n||(n="svg"===r.$),i=r.p=o.createElementNS(n?"http://www.w3.org/2000/svg":"http://www.w3.org/1999/xhtml",r.$),n&&"foreignObject"===r.$&&(n=!1),b(null,r,n),null!=t&&i["s-si"]!==t&&i.classList.add(i["s-si"]=t),r.h)for(u=0;u<r.h.length;++u)c=g(e,r,u),c&&i.appendChild(c);"svg"===r.$?n=!1:"foreignObject"===i.tagName&&(n=!0)}return i},v=(t,n,l,s,o,r)=>{let i,c=t;for(c.shadowRoot&&c.tagName===e&&(c=c.shadowRoot);o<=r;++o)s[o]&&(i=g(null,l,o),i&&(s[o].p=i,c.insertBefore(i,n)))},S=(t,e,n,l)=>{for(;e<=n;++e)(l=t[e])&&l.p.remove()},j=(t,e)=>t.$===e.$,O=(t,e)=>{const l=e.p=t.p,s=t.h,o=e.h,r=e.$,i=e.i;null===i?(n="svg"===r||"foreignObject"!==r&&n,"slot"===r||b(t,e,n),null!==s&&null!==o?((t,e,n,l)=>{let s,o=0,r=0,i=e.length-1,c=e[0],u=e[i],a=l.length-1,f=l[0],h=l[a];for(;o<=i&&r<=a;)null==c?c=e[++o]:null==u?u=e[--i]:null==f?f=l[++r]:null==h?h=l[--a]:j(c,f)?(O(c,f),c=e[++o],f=l[++r]):j(u,h)?(O(u,h),u=e[--i],h=l[--a]):j(c,h)?(O(c,h),t.insertBefore(c.p,u.p.nextSibling),c=e[++o],h=l[--a]):j(u,f)?(O(u,f),t.insertBefore(u.p,c.p),u=e[--i],f=l[++r]):(s=g(e&&e[r],n,r),f=l[++r],s&&c.p.parentNode.insertBefore(s,c.p));o>i?v(t,null==l[a+1]?null:l[a+1].p,n,l,r,a):r>a&&S(e,o,i)})(l,s,e,o):null!==o?(null!==t.i&&(l.textContent=""),v(l,null,e,o,0,o.length-1)):null!==s&&S(s,0,s.length-1),n&&"svg"===r&&(n=!1)):t.i!==i&&(l.data=i)},M=(t,e)=>{e&&!t.m&&e["s-p"]&&e["s-p"].push(new Promise((e=>t.m=e)))},k=(t,e)=>{if(t.t|=16,!(4&t.t))return M(t,t.g),Y((()=>C(t,e)));t.t|=512},C=(t,e)=>{const n=t.v;return N(void 0,(()=>x(t,n,e)))},x=async(t,e,n)=>{const l=t.S,s=l["s-rc"];n&&(t=>{const e=t.j,n=t.S,l=e.t,s=((t,e)=>{let n=a(e);const l=D.get(n);if(t=11===t.nodeType?t:o,l)if("string"==typeof l){let e,s=u.get(t=t.head||t);s||u.set(t,s=new Set),s.has(n)||(e=o.createElement("style"),e.innerHTML=l,t.insertBefore(e,t.querySelector("link")),s&&s.add(n))}else t.adoptedStyleSheets.includes(l)||(t.adoptedStyleSheets=[...t.adoptedStyleSheets,l]);return n})(n.shadowRoot?n.shadowRoot:n.getRootNode(),e);10&l&&(n["s-sc"]=s,n.classList.add(s+"-h"))})(t);P(t,e),s&&(s.map((t=>t())),l["s-rc"]=void 0);{const e=l["s-p"],n=()=>E(t);0===e.length?n():(Promise.all(e).then(n),t.t|=4,e.length=0)}},P=(n,l)=>{try{l=l.render(),n.t&=-17,n.t|=2,((n,l)=>{const s=n.S,o=n.O||p(null,null),r=(t=>t&&t.$===y)(l)?l:$(null,null,l);e=s.tagName,r.$=null,r.t|=4,n.O=r,r.p=o.p=s.shadowRoot||s,t=s["s-sc"],O(o,r)})(n,l)}catch(t){_(t,n.S)}return null},E=t=>{const e=t.S,n=t.g;64&t.t||(t.t|=64,R(e),t.M(e),n||L()),t.m&&(t.m(),t.m=void 0),512&t.t&&X((()=>k(t,!1))),t.t&=-517},L=()=>{R(o.documentElement),X((()=>(t=>{const e=r.ce("appload",{detail:{namespace:"biggive"}});return t.dispatchEvent(e),e})(s)))},N=(t,e)=>t&&t.then?t.then(e):e(),R=t=>t.classList.add("hydrated"),T=(t,e,n)=>{if(e.k){const l=Object.entries(e.k),s=t.prototype;if(l.map((([t,[l]])=>{(31&l||2&n&&32&l)&&Object.defineProperty(s,t,{get(){return((t,e)=>W(this).C.get(e))(0,t)},set(n){((t,e,n,l)=>{const s=W(t),o=s.C.get(e),r=s.t,i=s.v;n=((t,e)=>null==t||h(t)?t:2&e?parseFloat(t):1&e?t+"":t)(n,l.k[e][0]),8&r&&void 0!==o||n===o||Number.isNaN(o)&&Number.isNaN(n)||(s.C.set(e,n),i&&2==(18&r)&&k(s,!1))})(this,t,n,e)},configurable:!0,enumerable:!0})})),1&n){const e=new Map;s.attributeChangedCallback=function(t,n,l){r.jmp((()=>{const n=e.get(t);if(this.hasOwnProperty(n))l=this[n],delete this[n];else if(s.hasOwnProperty(n)&&"number"==typeof this[n]&&this[n]==l)return;this[n]=(null!==l||"boolean"!=typeof this[n])&&l}))},t.observedAttributes=l.filter((([t,e])=>15&e[0])).map((([t,n])=>{const l=n[1]||t;return e.set(l,t),l}))}}return t},U=(t,e={})=>{const n=[],l=e.exclude||[],i=s.customElements,u=o.head,f=u.querySelector("meta[charset]"),h=o.createElement("style"),$=[];let p,y=!0;Object.assign(r,e),r.l=new URL(e.resourcesUrl||"./",o.baseURI).href,t.map((t=>{t[1].map((e=>{const s={t:e[0],o:e[1],k:e[2],P:e[3]};s.k=e[2];const o=s.o,u=class extends HTMLElement{constructor(t){super(t),H(t=this,s),1&s.t&&t.attachShadow({mode:"open"})}connectedCallback(){p&&(clearTimeout(p),p=null),y?$.push(this):r.jmp((()=>(t=>{if(0==(1&r.t)){const e=W(t),n=e.j,l=()=>{};if(!(1&e.t)){e.t|=1;{let n=t;for(;n=n.parentNode||n.host;)if(n["s-p"]){M(e,e.g=n);break}}n.k&&Object.entries(n.k).map((([e,[n]])=>{if(31&n&&t.hasOwnProperty(e)){const n=t[e];delete t[e],t[e]=n}})),(async(t,e,n,l,s)=>{if(0==(32&e.t)){{if(e.t|=32,(s=B(n)).then){const t=()=>{};s=await s,t()}s.isProxied||(T(s,n,2),s.isProxied=!0);const t=()=>{};e.t|=8;try{new s(e)}catch(t){_(t)}e.t&=-9,t()}if(s.style){let t=s.style;const e=a(n);if(!D.has(e)){const l=()=>{};((t,e,n)=>{let l=D.get(t);c&&n?(l=l||new CSSStyleSheet,"string"==typeof l?l=e:l.replaceSync(e)):l=e,D.set(t,l)})(e,t,!!(1&n.t)),l()}}}const o=e.g,r=()=>k(e,!0);o&&o["s-rc"]?o["s-rc"].push(r):r()})(0,e,n)}l()}})(this)))}disconnectedCallback(){r.jmp((()=>{}))}componentOnReady(){return W(this).L}};s.N=t[0],l.includes(o)||i.get(o)||(n.push(o),i.define(o,T(u,s,1)))}))})),h.innerHTML=n+"{visibility:hidden}.hydrated{visibility:inherit}",h.setAttribute("data-styles",""),u.insertBefore(h,f?f.nextSibling:u.firstChild),y=!1,$.length?$.map((t=>t.connectedCallback())):r.jmp((()=>p=setTimeout(L,30)))},A=t=>{const e=new URL(t,r.l);return e.origin!==s.location.origin?e.href:e.pathname},F=new WeakMap,W=t=>F.get(t),q=(t,e)=>F.set(e.v=t,e),H=(t,e)=>{const n={t:0,S:t,j:e,C:new Map};return n.L=new Promise((t=>n.M=t)),t["s-p"]=[],t["s-rc"]=[],F.set(t,n)},V=(t,e)=>e in t,_=(t,e)=>(0,console.error)(t,e),z=new Map,B=t=>{const e=t.o.replace(/-/g,"_"),n=t.N,l=z.get(n);return l?l[e]:import(`./${n}.entry.js`).then((t=>(z.set(n,t),t[e])),_)
-/*!__STENCIL_STATIC_IMPORT_SWITCH__*/},D=new Map,G=[],I=[],J=(t,e)=>n=>{t.push(n),l||(l=!0,e&&4&r.t?X(Q):r.raf(Q))},K=t=>{for(let e=0;e<t.length;e++)try{t[e](performance.now())}catch(t){_(t)}t.length=0},Q=()=>{K(G),K(I),(l=G.length>0)&&r.raf(Q)},X=t=>i().then(t),Y=J(I,!0);export{U as b,A as g,$ as h,i as p,q as r}