Relax Node restriction (#842)

* Relax Node restriction

* Add <manifold-service-card>

Author: DangoDev

CHANGELOG.md

@@ -5,6 +5,16 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/), and this project
 adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [0.9.3] - 2019-01-13
+
+### Added
+
+- Added `<manifold-service-card>` back until 1.0 release
+
+### Changed
+
+- Allow Node 12.x and 13.x
+
 ## [0.9.2] - 2019-01-13
 
 ### Changed
@@ -484,6 +494,7 @@ adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 - Changed the `manifold-resource-credentials` component to use the standalone `manifold-credentials`
   component.
 
+[0.9.3]: https://github.com/manifoldco/ui/compare/v0.9.2...v0.9.3
 [0.9.2]: https://github.com/manifoldco/ui/compare/v0.9.1...v0.9.2
 [0.9.1]: https://github.com/manifoldco/ui/compare/v0.8.0...v0.9.1
 [0.8.0]: https://github.com/manifoldco/ui/compare/v0.7.2...v0.8.0

package-lock.json

@@ -10,6 +10,9 @@
   "bugs": {
     "url": "https://github.com/manifoldco/ui/issues"
   },
+  "engines": {
+    "node": ">=10 <=13"
+  },
   "author": "manifoldco",
   "license": "BSD-3-Clause",
   "files": [
@@ -125,8 +128,5 @@
     "testcafe": "^1.5.0",
     "wait-on": "^3.3.0",
     "webpack": "^4.41.2"
-  },
-  "engines": {
-    "node": "^10.0.0"
   }
 }

package.json

@@ -588,6 +588,18 @@ export namespace Components {
     'options': Option[];
     'required'?: boolean;
   }
+  interface ManifoldServiceCard {
+    /**
+    * _(hidden)_
+    */
+    'graphqlFetch'?: GraphqlFetch;
+    'hideUntilReady'?: boolean;
+    'isFeatured'?: boolean;
+    'preserveEvent'?: boolean;
+    'product'?: ProductCardQuery['product'];
+    'productLabel'?: string;
+    'productLinkFormat'?: string;
+  }
   interface ManifoldSkeletonImg {}
   interface ManifoldSkeletonText {}
   interface ManifoldTemplateCard {
@@ -942,6 +954,12 @@ declare global {
     new (): HTMLManifoldSelectElement;
   };
 
+  interface HTMLManifoldServiceCardElement extends Components.ManifoldServiceCard, HTMLStencilElement {}
+  var HTMLManifoldServiceCardElement: {
+    prototype: HTMLManifoldServiceCardElement;
+    new (): HTMLManifoldServiceCardElement;
+  };
+
   interface HTMLManifoldSkeletonImgElement extends Components.ManifoldSkeletonImg, HTMLStencilElement {}
   var HTMLManifoldSkeletonImgElement: {
     prototype: HTMLManifoldSkeletonImgElement;
@@ -1031,6 +1049,7 @@ declare global {
     'manifold-resource-status': HTMLManifoldResourceStatusElement;
     'manifold-resource-status-view': HTMLManifoldResourceStatusViewElement;
     'manifold-select': HTMLManifoldSelectElement;
+    'manifold-service-card': HTMLManifoldServiceCardElement;
     'manifold-skeleton-img': HTMLManifoldSkeletonImgElement;
     'manifold-skeleton-text': HTMLManifoldSkeletonTextElement;
     'manifold-template-card': HTMLManifoldTemplateCardElement;
@@ -1618,6 +1637,18 @@ declare namespace LocalJSX {
     'options'?: Option[];
     'required'?: boolean;
   }
+  interface ManifoldServiceCard {
+    /**
+    * _(hidden)_
+    */
+    'graphqlFetch'?: GraphqlFetch;
+    'hideUntilReady'?: boolean;
+    'isFeatured'?: boolean;
+    'preserveEvent'?: boolean;
+    'product'?: ProductCardQuery['product'];
+    'productLabel'?: string;
+    'productLinkFormat'?: string;
+  }
   interface ManifoldSkeletonImg {}
   interface ManifoldSkeletonText {}
   interface ManifoldTemplateCard {
@@ -1706,6 +1737,7 @@ declare namespace LocalJSX {
     'manifold-resource-status': ManifoldResourceStatus;
     'manifold-resource-status-view': ManifoldResourceStatusView;
     'manifold-select': ManifoldSelect;
+    'manifold-service-card': ManifoldServiceCard;
     'manifold-skeleton-img': ManifoldSkeletonImg;
     'manifold-skeleton-text': ManifoldSkeletonText;
     'manifold-template-card': ManifoldTemplateCard;
@@ -1774,6 +1806,7 @@ declare module "@stencil/core" {
       'manifold-resource-status': LocalJSX.ManifoldResourceStatus & JSXBase.HTMLAttributes<HTMLManifoldResourceStatusElement>;
       'manifold-resource-status-view': LocalJSX.ManifoldResourceStatusView & JSXBase.HTMLAttributes<HTMLManifoldResourceStatusViewElement>;
       'manifold-select': LocalJSX.ManifoldSelect & JSXBase.HTMLAttributes<HTMLManifoldSelectElement>;
+      'manifold-service-card': LocalJSX.ManifoldServiceCard & JSXBase.HTMLAttributes<HTMLManifoldServiceCardElement>;
       'manifold-skeleton-img': LocalJSX.ManifoldSkeletonImg & JSXBase.HTMLAttributes<HTMLManifoldSkeletonImgElement>;
       'manifold-skeleton-text': LocalJSX.ManifoldSkeletonText & JSXBase.HTMLAttributes<HTMLManifoldSkeletonTextElement>;
       'manifold-template-card': LocalJSX.ManifoldTemplateCard & JSXBase.HTMLAttributes<HTMLManifoldTemplateCardElement>;

src/components.d.ts

@@ -1,3 +1,4 @@
+// Newer version of <manifold-service-card-view>. Keep this in 1.0.
 import { h, Component, Prop, Event, EventEmitter, Element } from '@stencil/core';
 import logger from '../../utils/logger';
 import loadMark from '../../utils/loadMark';

src/components/manifold-product-card-view/manifold-product-card-view.tsx

@@ -1,3 +1,4 @@
+// Newer version of <manifold-service-card>. Keep this in 1.0.
 import { h, Component, Element, State, Prop, Watch } from '@stencil/core';
 
 import connection from '../../state/connection';

src/components/manifold-product-card/manifold-product-card.tsx

@@ -0,0 +1,127 @@
+// Replaced by <manifold-product-card> (delete this in 1.0)
+import { h, Component, Element, State, Prop, Watch } from '@stencil/core';
+
+import connection from '../../state/connection';
+import { GraphqlFetch, GraphqlError } from '../../utils/graphqlFetch';
+import logger from '../../utils/logger';
+import loadMark from '../../utils/loadMark';
+
+import { ProductCardQuery, ProductCardQueryVariables } from '../../types/graphql';
+
+import productCardQuery from '../manifold-product-card/product-card.graphql';
+
+// Product has at least one free plan.
+const isFree = (product: ProductCardQuery['product']) =>
+  !!(product.plans && product.plans.edges.find(({ node }) => node.free));
+
+@Component({ tag: 'manifold-service-card' })
+export class ManifoldServiceCard {
+  @Element() el: HTMLElement;
+  /** _(hidden)_ */
+  @Prop() graphqlFetch?: GraphqlFetch = connection.graphqlFetch;
+  @Prop() hideUntilReady?: boolean = false;
+  @Prop({ reflect: true }) isFeatured?: boolean;
+  @Prop({ mutable: true }) product?: ProductCardQuery['product'];
+  @Prop() productLabel?: string;
+  @Prop() productLinkFormat?: string;
+  @Prop() preserveEvent?: boolean = false;
+  @State() free: boolean = false;
+  @State() errors?: GraphqlError[];
+
+  @Watch('product') productChange(newProduct: ProductCardQuery['product']) {
+    if (newProduct) {
+      this.free = isFree(newProduct);
+    }
+  }
+
+  @Watch('productLabel') productLabelChange(newProductLabel: string) {
+    if (!this.product || (this.product && this.product.label !== newProductLabel)) {
+      this.fetchProduct(newProductLabel);
+    }
+  }
+
+  @loadMark()
+  componentWillLoad() {
+    console.warn(
+      `<manifold-service-card> will be deprecated in version 1.0. Please use <manifold-product-card> instead.`
+    );
+
+    let call;
+
+    if (this.productLabel) {
+      call = this.fetchProduct(this.productLabel);
+    }
+
+    if (this.hideUntilReady) {
+      return call;
+    }
+    return undefined;
+  }
+
+  get href() {
+    if (this.productLinkFormat && this.product) {
+      return this.productLinkFormat.replace(/:product/gi, this.product.label);
+    }
+    return ''; // if no format, or product is loading, don’t calculate href
+  }
+
+  async fetchProduct(productLabel: string) {
+    if (!this.graphqlFetch || !productLabel) {
+      return;
+    }
+
+    const variables: ProductCardQueryVariables = { productLabel };
+    const { data, errors } = await this.graphqlFetch<ProductCardQuery>({
+      query: productCardQuery,
+      variables,
+      element: this.el,
+    });
+    if (data && data.product) {
+      this.product = data.product;
+    }
+
+    if (errors) {
+      this.errors = errors;
+    }
+  }
+
+  @logger()
+  render() {
+    if (this.product) {
+      return [
+        <manifold-product-card-view
+          description={this.product.tagline}
+          isFeatured={this.isFeatured}
+          isFree={this.free}
+          logo={this.product.logoUrl}
+          name={this.product.displayName}
+          preserveEvent={this.preserveEvent}
+          productId={this.product.id}
+          productLabel={this.product.label}
+          productLinkFormat={this.productLinkFormat}
+        >
+          <manifold-forward-slot slot="cta">
+            <slot name="cta" />
+          </manifold-forward-slot>
+        </manifold-product-card-view>,
+        this.errors &&
+          this.errors.map(({ message }) => (
+            <manifold-toast alertType="error">{message}</manifold-toast>
+          )),
+      ];
+    }
+    // ☠
+    return (
+      <manifold-product-card-view
+        skeleton={true}
+        description="Awesome product description"
+        logo="product.jpg"
+        name="Awesome product"
+      >
+        <manifold-forward-slot slot="cta">
+          <slot name="cta" />
+        </manifold-forward-slot>
+      </manifold-product-card-view>
+    );
+  }
+}