@finsemble/finsemble-ui 7.0.1 → 7.1.0

package/react/components/appCatalog/components/Carousel.js

@@ -1,7 +1,21 @@
+/*!
+ * Copyright 2017 by ChartIQ, Inc.
+ * All rights reserved.
+ */
 import React, { Component } from "react";
+//data
 import storeActions from "../stores/storeActions";
+//components
 import AppCard from "./AppCard";
+//consts
 const CARDS_PER_PAGE = 2;
+/**
+ * A carousel of AppCards
+ * @param {object} props Component props
+ * @param {array} props.cards An array of AppCards to display in a carousel
+ * @param {string} props.tag The carousel's tag (title)
+ * @param {func} props.openAppShowcase Parent function to show the AppShowcase for the selected card
+ */
 export default class Carousel extends Component {
     constructor(props) {
         super(props);
@@ -21,8 +35,12 @@ export default class Carousel extends Component {
         this.notEnoughCards = this.notEnoughCards.bind(this);
         this.buildCarousel = this.buildCarousel.bind(this);
     }
+    /**
+     * Pages through the carousel by one card (right)
+     */
     pageUp() {
         let index = this.state.firstIndex;
+        //If increasing the carousel's first index will move beyond the array's limits, we reset back to zero
         if (index + 1 <= this.props.cards.length - 1) {
             index++;
         }
@@ -30,6 +48,9 @@ export default class Carousel extends Component {
             firstIndex: index,
         });
     }
+    /**
+     * Pages through the carousel by one card (left)
+     */
     pageDown() {
         let index = this.state.firstIndex;
         if (index - 1 >= 0) {
@@ -38,17 +59,30 @@ export default class Carousel extends Component {
             });
         }
     }
+    /**
+     * Toggles the highlight on a carousel's title. When a user mouses over, we want to style it so its obvious its a link
+     * @param {*} highlight
+     */
     highlightTitle(highlight) {
         this.setState({
             titleHighlighted: highlight,
         });
     }
+    /**
+     * Calls the parents seeMore function, which will add the selected tag as a filter
+     */
     seeMore() {
         storeActions.addTag(this.props.tag);
     }
+    /**
+     * Spits out a warning if the number of cards supplied to the carousel is < 3
+     */
     notEnoughCards() {
         console.warn("Less than 3 card supplied. This carousel will not display optimally");
     }
+    /**
+     * Function to build the items in the carousel
+     */
     buildCarousel() {
         let { cards } = this.props;
         let firstCard = this.state.firstIndex;

package/react/components/appCatalog/components/Carousel.js.map

@@ -1 +1 @@
-{"version":3,"file":"Carousel.js","sourceRoot":"","sources":["../../../../src/components/appCatalog/components/Carousel.jsx"],"names":[],"mappings":"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","sourcesContent":["/*!\n * Copyright 2017 by ChartIQ, Inc.\n * All rights reserved.\n */\nimport React, { Component } from \"react\";\n\n//data\nimport storeActions from \"../stores/storeActions\";\n\n//components\nimport AppCard from \"./AppCard\";\n\n//consts\nconst CARDS_PER_PAGE = 2;\n\n/**\n * A carousel of AppCards\n * @param {object} props Component props\n * @param {array} props.cards An array of AppCards to display in a carousel\n * @param {string} props.tag The carousel's tag (title)\n * @param {func} props.openAppShowcase Parent function to show the AppShowcase for the selected card\n */\nexport default class Carousel extends Component {\n\tconstructor(props) {\n\t\tsuper(props);\n\t\tthis.state = {\n\t\t\tfirstIndex: 0,\n\t\t\ttitleHighlighted: false,\n\t\t};\n\t\tthis.bindCorrectContext();\n\t\tif (this.props.cards.length < 3) this.notEnoughCards();\n\t}\n\n\tbindCorrectContext() {\n\t\tthis.pageUp = this.pageUp.bind(this);\n\t\tthis.pageDown = this.pageDown.bind(this);\n\t\tthis.highlightTitle = this.highlightTitle.bind(this);\n\t\tthis.seeMore = this.seeMore.bind(this);\n\t\tthis.notEnoughCards = this.notEnoughCards.bind(this);\n\t\tthis.buildCarousel = this.buildCarousel.bind(this);\n\t}\n\n\t/**\n\t * Pages through the carousel by one card (right)\n\t */\n\tpageUp() {\n\t\tlet index = this.state.firstIndex;\n\n\t\t//If increasing the carousel's first index will move beyond the array's limits, we reset back to zero\n\t\tif (index + 1 <= this.props.cards.length - 1) {\n\t\t\tindex++;\n\t\t}\n\n\t\tthis.setState({\n\t\t\tfirstIndex: index,\n\t\t});\n\t}\n\n\t/**\n\t * Pages through the carousel by one card (left)\n\t */\n\tpageDown() {\n\t\tlet index = this.state.firstIndex;\n\t\tif (index - 1 >= 0) {\n\t\t\tthis.setState({\n\t\t\t\tfirstIndex: index - 1,\n\t\t\t});\n\t\t}\n\t}\n\n\t/**\n\t * Toggles the highlight on a carousel's title. When a user mouses over, we want to style it so its obvious its a link\n\t * @param {*} highlight\n\t */\n\thighlightTitle(highlight) {\n\t\tthis.setState({\n\t\t\ttitleHighlighted: highlight,\n\t\t});\n\t}\n\n\t/**\n\t * Calls the parents seeMore function, which will add the selected tag as a filter\n\t */\n\tseeMore() {\n\t\tstoreActions.addTag(this.props.tag);\n\t}\n\n\t/**\n\t * Spits out a warning if the number of cards supplied to the carousel is < 3\n\t */\n\tnotEnoughCards() {\n\t\tconsole.warn(\"Less than 3 card supplied. This carousel will not display optimally\");\n\t}\n\n\t/**\n\t * Function to build the items in the carousel\n\t */\n\tbuildCarousel() {\n\t\tlet { cards } = this.props;\n\t\tlet firstCard = this.state.firstIndex;\n\n\t\tlet displayCards = [];\n\t\tfor (let i = 0; i < CARDS_PER_PAGE; i++) {\n\t\t\tif (firstCard >= 0 && firstCard <= cards.length - 1) {\n\t\t\t\tdisplayCards.push(cards[firstCard]);\n\t\t\t\tfirstCard++;\n\t\t\t}\n\t\t}\n\n\t\treturn displayCards;\n\t}\n\n\trender() {\n\t\tlet displayCards = this.buildCarousel();\n\t\tlet titleClass = \"carousel-title\";\n\t\tif (this.state.titleHighlighted) titleClass = `${titleClass} highlight`;\n\n\t\tlet chevron_left_style = \"ff-adp-chevron-left\",\n\t\t\tchevron_right_style = \"ff-adp-chevron-right\";\n\t\tlet left_click = this.pageDown,\n\t\t\tright_click = this.pageUp;\n\n\t\tif (this.state.firstIndex + 2 >= this.props.cards.length - 1) {\n\t\t\tchevron_right_style = `${chevron_right_style} disabled`;\n\t\t\tright_click = Function.prototype;\n\t\t}\n\n\t\tif (this.state.firstIndex === 0) {\n\t\t\tchevron_left_style = `${chevron_left_style} disabled`;\n\t\t\tleft_click = Function.prototype;\n\t\t}\n\n\t\tconst carouselTagHeader = this.props.tag.length >= 50 ? `${this.props.tag.substring(0, 49)}...` : this.props.tag;\n\n\t\treturn (\n\t\t\t<div className=\"carousel-main\">\n\t\t\t\t<div className=\"carousel-header\">\n\t\t\t\t\t<div\n\t\t\t\t\t\ttitle={this.props.tag}\n\t\t\t\t\t\tclassName={titleClass}\n\t\t\t\t\t\tonClick={this.seeMore}\n\t\t\t\t\t\tonMouseEnter={this.highlightTitle.bind(this, true)}\n\t\t\t\t\t\tonMouseLeave={this.highlightTitle.bind(this, false)}\n\t\t\t\t\t>\n\t\t\t\t\t\t{carouselTagHeader}\n\t\t\t\t\t</div>\n\t\t\t\t\t{this.props.cards.length > 2 && (\n\t\t\t\t\t\t<button className=\"see-more\" onClick={this.seeMore}>\n\t\t\t\t\t\t\t<span className=\"button-label\">See More</span>\n\t\t\t\t\t\t</button>\n\t\t\t\t\t)}\n\t\t\t\t</div>\n\t\t\t\t<div className=\"carousel-content\">\n\t\t\t\t\t<i className={chevron_left_style} onClick={left_click} />\n\t\t\t\t\t{displayCards.map((card, i) => (\n\t\t\t\t\t\t<AppCard key={(card.title || card.name) + i} {...card} viewAppShowcase={this.props.viewAppShowcase} />\n\t\t\t\t\t))}\n\t\t\t\t\t{displayCards.length === 1 && <div className=\"app-card placeholder\"></div>}{\" \"}\n\t\t\t\t\t{/* This is so extremely bad, I hate it. Prevent odd spacing when single card by inserting a blank empty card to consume the space */}\n\t\t\t\t\t<i className={chevron_right_style} onClick={right_click} />\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t);\n\t}\n}\n"]}
+{"version":3,"file":"Carousel.js","sourceRoot":"","sources":["../../../../src/components/appCatalog/components/Carousel.jsx"],"names":[],"mappings":"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","sourcesContent":["/*!\n * Copyright 2017 by ChartIQ, Inc.\n * All rights reserved.\n */\nimport React, { Component } from \"react\";\n\n//data\nimport storeActions from \"../stores/storeActions\";\n\n//components\nimport AppCard from \"./AppCard\";\n\n//consts\nconst CARDS_PER_PAGE = 2;\n\n/**\n * A carousel of AppCards\n * @param {object} props Component props\n * @param {array} props.cards An array of AppCards to display in a carousel\n * @param {string} props.tag The carousel's tag (title)\n * @param {func} props.openAppShowcase Parent function to show the AppShowcase for the selected card\n */\nexport default class Carousel extends Component {\n\tconstructor(props) {\n\t\tsuper(props);\n\t\tthis.state = {\n\t\t\tfirstIndex: 0,\n\t\t\ttitleHighlighted: false,\n\t\t};\n\t\tthis.bindCorrectContext();\n\t\tif (this.props.cards.length < 3) this.notEnoughCards();\n\t}\n\n\tbindCorrectContext() {\n\t\tthis.pageUp = this.pageUp.bind(this);\n\t\tthis.pageDown = this.pageDown.bind(this);\n\t\tthis.highlightTitle = this.highlightTitle.bind(this);\n\t\tthis.seeMore = this.seeMore.bind(this);\n\t\tthis.notEnoughCards = this.notEnoughCards.bind(this);\n\t\tthis.buildCarousel = this.buildCarousel.bind(this);\n\t}\n\n\t/**\n\t * Pages through the carousel by one card (right)\n\t */\n\tpageUp() {\n\t\tlet index = this.state.firstIndex;\n\n\t\t//If increasing the carousel's first index will move beyond the array's limits, we reset back to zero\n\t\tif (index + 1 <= this.props.cards.length - 1) {\n\t\t\tindex++;\n\t\t}\n\n\t\tthis.setState({\n\t\t\tfirstIndex: index,\n\t\t});\n\t}\n\n\t/**\n\t * Pages through the carousel by one card (left)\n\t */\n\tpageDown() {\n\t\tlet index = this.state.firstIndex;\n\t\tif (index - 1 >= 0) {\n\t\t\tthis.setState({\n\t\t\t\tfirstIndex: index - 1,\n\t\t\t});\n\t\t}\n\t}\n\n\t/**\n\t * Toggles the highlight on a carousel's title. When a user mouses over, we want to style it so its obvious its a link\n\t * @param {*} highlight\n\t */\n\thighlightTitle(highlight) {\n\t\tthis.setState({\n\t\t\ttitleHighlighted: highlight,\n\t\t});\n\t}\n\n\t/**\n\t * Calls the parents seeMore function, which will add the selected tag as a filter\n\t */\n\tseeMore() {\n\t\tstoreActions.addTag(this.props.tag);\n\t}\n\n\t/**\n\t * Spits out a warning if the number of cards supplied to the carousel is < 3\n\t */\n\tnotEnoughCards() {\n\t\tconsole.warn(\"Less than 3 card supplied. This carousel will not display optimally\");\n\t}\n\n\t/**\n\t * Function to build the items in the carousel\n\t */\n\tbuildCarousel() {\n\t\tlet { cards } = this.props;\n\t\tlet firstCard = this.state.firstIndex;\n\n\t\tlet displayCards = [];\n\t\tfor (let i = 0; i < CARDS_PER_PAGE; i++) {\n\t\t\tif (firstCard >= 0 && firstCard <= cards.length - 1) {\n\t\t\t\tdisplayCards.push(cards[firstCard]);\n\t\t\t\tfirstCard++;\n\t\t\t}\n\t\t}\n\n\t\treturn displayCards;\n\t}\n\n\trender() {\n\t\tlet displayCards = this.buildCarousel();\n\t\tlet titleClass = \"carousel-title\";\n\t\tif (this.state.titleHighlighted) titleClass = `${titleClass} highlight`;\n\n\t\tlet chevron_left_style = \"ff-adp-chevron-left\",\n\t\t\tchevron_right_style = \"ff-adp-chevron-right\";\n\t\tlet left_click = this.pageDown,\n\t\t\tright_click = this.pageUp;\n\n\t\tif (this.state.firstIndex + 2 >= this.props.cards.length - 1) {\n\t\t\tchevron_right_style = `${chevron_right_style} disabled`;\n\t\t\tright_click = Function.prototype;\n\t\t}\n\n\t\tif (this.state.firstIndex === 0) {\n\t\t\tchevron_left_style = `${chevron_left_style} disabled`;\n\t\t\tleft_click = Function.prototype;\n\t\t}\n\n\t\tconst carouselTagHeader = this.props.tag.length >= 50 ? `${this.props.tag.substring(0, 49)}...` : this.props.tag;\n\n\t\treturn (\n\t\t\t<div className=\"carousel-main\">\n\t\t\t\t<div className=\"carousel-header\">\n\t\t\t\t\t<div\n\t\t\t\t\t\ttitle={this.props.tag}\n\t\t\t\t\t\tclassName={titleClass}\n\t\t\t\t\t\tonClick={this.seeMore}\n\t\t\t\t\t\tonMouseEnter={this.highlightTitle.bind(this, true)}\n\t\t\t\t\t\tonMouseLeave={this.highlightTitle.bind(this, false)}\n\t\t\t\t\t>\n\t\t\t\t\t\t{carouselTagHeader}\n\t\t\t\t\t</div>\n\t\t\t\t\t{this.props.cards.length > 2 && (\n\t\t\t\t\t\t<button className=\"see-more\" onClick={this.seeMore}>\n\t\t\t\t\t\t\t<span className=\"button-label\">See More</span>\n\t\t\t\t\t\t</button>\n\t\t\t\t\t)}\n\t\t\t\t</div>\n\t\t\t\t<div className=\"carousel-content\">\n\t\t\t\t\t<i className={chevron_left_style} onClick={left_click} />\n\t\t\t\t\t{displayCards.map((card, i) => (\n\t\t\t\t\t\t<AppCard key={(card.title || card.name) + i} {...card} viewAppShowcase={this.props.viewAppShowcase} />\n\t\t\t\t\t))}\n\t\t\t\t\t{displayCards.length === 1 && <div className=\"app-card placeholder\"></div>}{\" \"}\n\t\t\t\t\t{/* This is so extremely bad, I hate it. Prevent odd spacing when single card by inserting a blank empty card to consume the space */}\n\t\t\t\t\t<i className={chevron_right_style} onClick={right_click} />\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t);\n\t}\n}\n"]}

package/react/components/appCatalog/components/EmptyResults.d.ts

@@ -1,3 +1,7 @@
 /// <reference types="react" />
+/**
+ * Empty Results to show on the search page when filters/search text apply to zero results
+
+ */
 declare const EmptyResults: () => JSX.Element;
 export default EmptyResults;

package/react/components/appCatalog/components/EmptyResults.js

@@ -1,4 +1,12 @@
+/*!
+ * Copyright 2017 by ChartIQ, Inc.
+ * All rights reserved.
+ */
 import React from "react";
+/**
+ * Empty Results to show on the search page when filters/search text apply to zero results
+
+ */
 const EmptyResults = () => (React.createElement("div", { className: "app-results" },
     React.createElement("h3", { className: "app-results-no-results" }, "No results found. Please try again.")));
 export default EmptyResults;

package/react/components/appCatalog/components/EmptyResults.js.map

@@ -1 +1 @@
-{"version":3,"file":"EmptyResults.js","sourceRoot":"","sources":["../../../../src/components/appCatalog/components/EmptyResults.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,MAAM,OAAO,CAAC;AAM1B,MAAM,YAAY,GAAG,GAAG,EAAE,CAAC,CAC1B,6BAAK,SAAS,EAAC,aAAa;IAC3B,4BAAI,SAAS,EAAC,wBAAwB,0CAAyC,CAC1E,CACN,CAAC;AAEF,eAAe,YAAY,CAAC","sourcesContent":["/*!\n * Copyright 2017 by ChartIQ, Inc.\n * All rights reserved.\n */\nimport React from \"react\";\n\n/**\n * Empty Results to show on the search page when filters/search text apply to zero results\n\n */\nconst EmptyResults = () => (\n\t<div className=\"app-results\">\n\t\t<h3 className=\"app-results-no-results\">No results found. Please try again.</h3>\n\t</div>\n);\n\nexport default EmptyResults;\n"]}
+{"version":3,"file":"EmptyResults.js","sourceRoot":"","sources":["../../../../src/components/appCatalog/components/EmptyResults.tsx"],"names":[],"mappings":"AAAA;;;GAGG;AACH,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B;;;GAGG;AACH,MAAM,YAAY,GAAG,GAAG,EAAE,CAAC,CAC1B,6BAAK,SAAS,EAAC,aAAa;IAC3B,4BAAI,SAAS,EAAC,wBAAwB,0CAAyC,CAC1E,CACN,CAAC;AAEF,eAAe,YAAY,CAAC","sourcesContent":["/*!\n * Copyright 2017 by ChartIQ, Inc.\n * All rights reserved.\n */\nimport React from \"react\";\n\n/**\n * Empty Results to show on the search page when filters/search text apply to zero results\n\n */\nconst EmptyResults = () => (\n\t<div className=\"app-results\">\n\t\t<h3 className=\"app-results-no-results\">No results found. Please try again.</h3>\n\t</div>\n);\n\nexport default EmptyResults;\n"]}

package/react/components/appCatalog/components/Hero.d.ts

@@ -2,6 +2,10 @@
  * Copyright 2017 by ChartIQ, Inc.
  * All rights reserved.
  */
+/**
+ * This component is the name of a component and a pin that will pin that component to all toolbars.
+ *
+ */
 import { Component } from "react";
 import { AppMetadata } from "../../../types/fdc3";
 declare type Images = {
@@ -17,10 +21,21 @@ interface IProps {
 interface IState {
     active: number;
 }
+/**
+ * The hero component at the top of the App Catalog homepage. Display images and textual descriptions of showcased apps
+ * @param {object} props Component props
+ */
 export default class Hero extends Component<IProps, IState> {
     constructor(props: IProps);
     bindCorrectContext(): void;
+    /**
+     * Changes the page of the hero component depending on the action its handed
+     * @param {string} action One of 'page_down' or 'page_up'. Any other action is ignored
+     */
     changePage(action: any): void;
+    /**
+     * Called the parent function to open the AppShowcase for the clicked app
+     */
     openApp(): void;
     render(): JSX.Element;
 }

package/react/components/appCatalog/components/Hero.js

@@ -2,8 +2,16 @@
  * Copyright 2017 by ChartIQ, Inc.
  * All rights reserved.
  */
+/**
+ * This component is the name of a component and a pin that will pin that component to all toolbars.
+ *
+ */
 import React, { Component } from "react";
 import { getAppNameIconWhenNoImage } from "./helpers";
+/**
+ * The hero component at the top of the App Catalog homepage. Display images and textual descriptions of showcased apps
+ * @param {object} props Component props
+ */
 export default class Hero extends Component {
     constructor(props) {
         super(props);
@@ -16,6 +24,10 @@ export default class Hero extends Component {
         this.changePage = this.changePage.bind(this);
         this.openApp = this.openApp.bind(this);
     }
+    /**
+     * Changes the page of the hero component depending on the action its handed
+     * @param {string} action One of 'page_down' or 'page_up'. Any other action is ignored
+     */
     changePage(action) {
         let { cards } = this.props;
         let newActive = this.state.active;
@@ -38,6 +50,9 @@ export default class Hero extends Component {
             active: newActive,
         });
     }
+    /**
+     * Called the parent function to open the AppShowcase for the clicked app
+     */
     openApp() {
         this.props.viewAppShowcase(this.props.cards[this.state.active].appId);
     }

package/react/components/appCatalog/components/Hero.js.map

@@ -1 +1 @@
-{"version":3,"file":"Hero.js","sourceRoot":"","sources":["../../../../src/components/appCatalog/components/Hero.tsx"],"names":[],"mappings":"AAAA;;;GAGG;AAKH,OAAO,KAAK,EAAE,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACzC,OAAO,EAAE,yBAAyB,EAAE,MAAM,WAAW,CAAC;AAoBtD,MAAM,CAAC,OAAO,OAAO,IAAK,SAAQ,SAAyB;IAC1D,YAAY,KAAa;QACxB,KAAK,CAAC,KAAK,CAAC,CAAC;QACb,IAAI,CAAC,KAAK,GAAG;YACZ,MAAM,EAAE,CAAC;SACT,CAAC;QACF,IAAI,CAAC,kBAAkB,EAAE,CAAC;IAC3B,CAAC;IAED,kBAAkB;QACjB,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;QAC7C,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IACxC,CAAC;IAMD,UAAU,CAAC,MAAW;QACrB,IAAI,EAAE,KAAK,EAAE,GAAG,IAAI,CAAC,KAAK,CAAC;QAC3B,IAAI,SAAS,GAAG,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC;QAElC,IAAI,OAAO,MAAM,KAAK,QAAQ,EAAE;YAC/B,SAAS,GAAG,MAAM,CAAC;SACnB;aAAM;YACN,QAAQ,MAAM,EAAE;gBACf,KAAK,WAAW;oBACf,SAAS,GAAG,SAAS,GAAG,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,SAAS,GAAG,CAAC,CAAC;oBACjE,MAAM;gBACP,KAAK,SAAS;oBACb,SAAS,GAAG,SAAS,GAAG,CAAC,GAAG,KAAK,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,SAAS,GAAG,CAAC,CAAC;oBACjE,MAAM;gBACP;oBACC,MAAM;aACP;SACD;QAED,IAAI,CAAC,QAAQ,CAAC;YACb,MAAM,EAAE,SAAS;SACjB,CAAC,CAAC;IACJ,CAAC;IAKD,OAAO;QACN,IAAI,CAAC,KAAK,CAAC,eAAe,CAAC,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC,KAAK,CAAC,CAAC;IACvE,CAAC;IAED,MAAM;;QACL,IAAI,EAAE,MAAM,EAAE,GAAG,IAAI,CAAC,KAAK,CAAC;QAC5B,IAAI,EAAE,KAAK,EAAE,GAAG,IAAI,CAAC,KAAK,CAAC;QAC3B,IAAI,YAAY,GAAG,KAAK,CAAC,MAAM,CAAC,CAAC,KAAK,KAAK,SAAS,CAAC,CAAC,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC,KAAK,CAAC;QAChG,IAAI,UAAU,GAAG,KAAK,CAAC,MAAM,CAAC,CAAC,WAAW,CAAC;QAC3C,IAAI,QAAQ,GAAG,KAAK,CAAC,MAAM,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,MAAA,KAAK,CAAC,MAAM,CAAC,CAAC,MAAM,0CAAG,CAAC,EAAE,GAAG,CAAC,CAAC,CAAC,IAAI,CAAC;QAE3E,OAAO,CACN;YACC,6BAAK,SAAS,EAAC,cAAc;gBAC5B,2BAAG,SAAS,EAAC,qBAAqB,EAAC,OAAO,EAAE,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,IAAI,EAAE,WAAW,CAAC,GAAI;gBACvF,6BAAK,SAAS,EAAC,cAAc,EAAC,OAAO,EAAE,IAAI,CAAC,OAAO;oBAClD,6BAAK,SAAS,EAAC,aAAa;wBAC3B,6BAAK,SAAS,EAAC,WAAW,IAAE,YAAY,CAAO;wBAC/C,6BAAK,SAAS,EAAC,iBAAiB,IAAE,UAAU,CAAO,CAC9C;oBACL,QAAQ,CAAC,CAAC,CAAC,CACX,6BAAK,SAAS,EAAC,WAAW,EAAC,GAAG,EAAE,QAAQ,GAAI,CAC5C,CAAC,CAAC,CAAC,CACH,6BAAK,SAAS,EAAC,iBAAiB,IAAE,yBAAyB,CAAC,YAAY,CAAC,CAAO,CAChF,CACI;gBACN,2BAAG,SAAS,EAAC,sBAAsB,EAAC,OAAO,EAAE,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,IAAI,EAAE,SAAS,CAAC,GAAI,CACjF;YACN,+BAAM;YACL,KAAK,CAAC,MAAM,IAAI,CAAC,IAAI,KAAK,CAAC,MAAM,IAAI,EAAE,IAAI,CAC3C,6BAAK,SAAS,EAAC,WAAW,IACxB,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,CAAC,EAAE,EAAE;gBACtB,IAAI,OAAO,GAAG,iBAAiB,CAAC;gBAChC,IAAI,CAAC,KAAK,MAAM;oBAAE,OAAO,GAAG,GAAG,OAAO,SAAS,CAAC;gBAChD,OAAO,6BAAK,GAAG,EAAE,CAAC,EAAE,SAAS,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,IAAI,EAAE,CAAC,CAAC,GAAI,CAAC;YACpF,CAAC,CAAC,CACG,CACN,CACI,CACN,CAAC;IACH,CAAC;CACD","sourcesContent":["/*!\n * Copyright 2017 by ChartIQ, Inc.\n * All rights reserved.\n */\n/**\n * This component is the name of a component and a pin that will pin that component to all toolbars.\n *\n */\nimport React, { Component } from \"react\";\nimport { getAppNameIconWhenNoImage } from \"./helpers\";\nimport { AppMetadata } from \"../../../types/fdc3\";\n\ntype Images = {\n\turl: string;\n};\n\ninterface IProps {\n\tcards: (AppMetadata & { tags: string[]; images: Images[] })[];\n\tviewAppShowcase: (id: AppMetadata[\"appId\"]) => void;\n}\n\ninterface IState {\n\tactive: number;\n}\n\n/**\n * The hero component at the top of the App Catalog homepage. Display images and textual descriptions of showcased apps\n * @param {object} props Component props\n */\nexport default class Hero extends Component<IProps, IState> {\n\tconstructor(props: IProps) {\n\t\tsuper(props);\n\t\tthis.state = {\n\t\t\tactive: 0,\n\t\t};\n\t\tthis.bindCorrectContext();\n\t}\n\n\tbindCorrectContext() {\n\t\tthis.changePage = this.changePage.bind(this);\n\t\tthis.openApp = this.openApp.bind(this);\n\t}\n\n\t/**\n\t * Changes the page of the hero component depending on the action its handed\n\t * @param {string} action One of 'page_down' or 'page_up'. Any other action is ignored\n\t */\n\tchangePage(action: any) {\n\t\tlet { cards } = this.props;\n\t\tlet newActive = this.state.active;\n\n\t\tif (typeof action === \"number\") {\n\t\t\tnewActive = action;\n\t\t} else {\n\t\t\tswitch (action) {\n\t\t\t\tcase \"page_down\":\n\t\t\t\t\tnewActive = newActive - 1 < 0 ? cards.length - 1 : newActive - 1;\n\t\t\t\t\tbreak;\n\t\t\t\tcase \"page_up\":\n\t\t\t\t\tnewActive = newActive + 1 > cards.length - 1 ? 0 : newActive + 1;\n\t\t\t\t\tbreak;\n\t\t\t\tdefault:\n\t\t\t\t\tbreak;\n\t\t\t}\n\t\t}\n\n\t\tthis.setState({\n\t\t\tactive: newActive,\n\t\t});\n\t}\n\n\t/**\n\t * Called the parent function to open the AppShowcase for the clicked app\n\t */\n\topenApp() {\n\t\tthis.props.viewAppShowcase(this.props.cards[this.state.active].appId);\n\t}\n\n\trender() {\n\t\tlet { active } = this.state;\n\t\tlet { cards } = this.props;\n\t\tlet contentTitle = cards[active].title === undefined ? cards[active].name : cards[active].title;\n\t\tlet contentMsg = cards[active].description;\n\t\tlet imageUrl = cards[active].images ? cards[active].images?.[0].url : null;\n\n\t\treturn (\n\t\t\t<div>\n\t\t\t\t<div className=\"hero-content\">\n\t\t\t\t\t<i className=\"ff-adp-chevron-left\" onClick={this.changePage.bind(this, \"page_down\")} />\n\t\t\t\t\t<div className=\"visible-card\" onClick={this.openApp}>\n\t\t\t\t\t\t<div className=\"app-details\">\n\t\t\t\t\t\t\t<div className=\"app-title\">{contentTitle}</div>\n\t\t\t\t\t\t\t<div className=\"app-description\">{contentMsg}</div>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t\t{imageUrl ? (\n\t\t\t\t\t\t\t<img className=\"app-image\" src={imageUrl} />\n\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t<div className=\"app-image noimg\">{getAppNameIconWhenNoImage(contentTitle)}</div>\n\t\t\t\t\t\t)}\n\t\t\t\t\t</div>\n\t\t\t\t\t<i className=\"ff-adp-chevron-right\" onClick={this.changePage.bind(this, \"page_up\")} />\n\t\t\t\t</div>\n\t\t\t\t<br />\n\t\t\t\t{cards.length >= 2 && cards.length <= 10 && (\n\t\t\t\t\t<div className=\"paginator\">\n\t\t\t\t\t\t{cards.map((card, i) => {\n\t\t\t\t\t\t\tlet classes = \"pagination-oval\";\n\t\t\t\t\t\t\tif (i === active) classes = `${classes} active`;\n\t\t\t\t\t\t\treturn <div key={i} className={classes} onClick={this.changePage.bind(this, i)} />;\n\t\t\t\t\t\t})}\n\t\t\t\t\t</div>\n\t\t\t\t)}\n\t\t\t</div>\n\t\t);\n\t}\n}\n"]}
+{"version":3,"file":"Hero.js","sourceRoot":"","sources":["../../../../src/components/appCatalog/components/Hero.tsx"],"names":[],"mappings":"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","sourcesContent":["/*!\n * Copyright 2017 by ChartIQ, Inc.\n * All rights reserved.\n */\n/**\n * This component is the name of a component and a pin that will pin that component to all toolbars.\n *\n */\nimport React, { Component } from \"react\";\nimport { getAppNameIconWhenNoImage } from \"./helpers\";\nimport { AppMetadata } from \"../../../types/fdc3\";\n\ntype Images = {\n\turl: string;\n};\n\ninterface IProps {\n\tcards: (AppMetadata & { tags: string[]; images: Images[] })[];\n\tviewAppShowcase: (id: AppMetadata[\"appId\"]) => void;\n}\n\ninterface IState {\n\tactive: number;\n}\n\n/**\n * The hero component at the top of the App Catalog homepage. Display images and textual descriptions of showcased apps\n * @param {object} props Component props\n */\nexport default class Hero extends Component<IProps, IState> {\n\tconstructor(props: IProps) {\n\t\tsuper(props);\n\t\tthis.state = {\n\t\t\tactive: 0,\n\t\t};\n\t\tthis.bindCorrectContext();\n\t}\n\n\tbindCorrectContext() {\n\t\tthis.changePage = this.changePage.bind(this);\n\t\tthis.openApp = this.openApp.bind(this);\n\t}\n\n\t/**\n\t * Changes the page of the hero component depending on the action its handed\n\t * @param {string} action One of 'page_down' or 'page_up'. Any other action is ignored\n\t */\n\tchangePage(action: any) {\n\t\tlet { cards } = this.props;\n\t\tlet newActive = this.state.active;\n\n\t\tif (typeof action === \"number\") {\n\t\t\tnewActive = action;\n\t\t} else {\n\t\t\tswitch (action) {\n\t\t\t\tcase \"page_down\":\n\t\t\t\t\tnewActive = newActive - 1 < 0 ? cards.length - 1 : newActive - 1;\n\t\t\t\t\tbreak;\n\t\t\t\tcase \"page_up\":\n\t\t\t\t\tnewActive = newActive + 1 > cards.length - 1 ? 0 : newActive + 1;\n\t\t\t\t\tbreak;\n\t\t\t\tdefault:\n\t\t\t\t\tbreak;\n\t\t\t}\n\t\t}\n\n\t\tthis.setState({\n\t\t\tactive: newActive,\n\t\t});\n\t}\n\n\t/**\n\t * Called the parent function to open the AppShowcase for the clicked app\n\t */\n\topenApp() {\n\t\tthis.props.viewAppShowcase(this.props.cards[this.state.active].appId);\n\t}\n\n\trender() {\n\t\tlet { active } = this.state;\n\t\tlet { cards } = this.props;\n\t\tlet contentTitle = cards[active].title === undefined ? cards[active].name : cards[active].title;\n\t\tlet contentMsg = cards[active].description;\n\t\tlet imageUrl = cards[active].images ? cards[active].images?.[0].url : null;\n\n\t\treturn (\n\t\t\t<div>\n\t\t\t\t<div className=\"hero-content\">\n\t\t\t\t\t<i className=\"ff-adp-chevron-left\" onClick={this.changePage.bind(this, \"page_down\")} />\n\t\t\t\t\t<div className=\"visible-card\" onClick={this.openApp}>\n\t\t\t\t\t\t<div className=\"app-details\">\n\t\t\t\t\t\t\t<div className=\"app-title\">{contentTitle}</div>\n\t\t\t\t\t\t\t<div className=\"app-description\">{contentMsg}</div>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t\t{imageUrl ? (\n\t\t\t\t\t\t\t<img className=\"app-image\" src={imageUrl} />\n\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t<div className=\"app-image noimg\">{getAppNameIconWhenNoImage(contentTitle)}</div>\n\t\t\t\t\t\t)}\n\t\t\t\t\t</div>\n\t\t\t\t\t<i className=\"ff-adp-chevron-right\" onClick={this.changePage.bind(this, \"page_up\")} />\n\t\t\t\t</div>\n\t\t\t\t<br />\n\t\t\t\t{cards.length >= 2 && cards.length <= 10 && (\n\t\t\t\t\t<div className=\"paginator\">\n\t\t\t\t\t\t{cards.map((card, i) => {\n\t\t\t\t\t\t\tlet classes = \"pagination-oval\";\n\t\t\t\t\t\t\tif (i === active) classes = `${classes} active`;\n\t\t\t\t\t\t\treturn <div key={i} className={classes} onClick={this.changePage.bind(this, i)} />;\n\t\t\t\t\t\t})}\n\t\t\t\t\t</div>\n\t\t\t\t)}\n\t\t\t</div>\n\t\t);\n\t}\n}\n"]}

package/react/components/appCatalog/components/Home.d.ts

@@ -1,7 +1,3 @@
-/*!
- * Copyright 2017 by ChartIQ, Inc.
- * All rights reserved.
- */
 /// <reference types="react" />
 import { AppMetadata } from "../../../types/fdc3";
 declare type Images = {
@@ -15,5 +11,11 @@ declare type HomeProps = {
     })[];
     viewAppShowcase: (id: AppMetadata["appId"]) => void;
 };
+/**
+ * Home page. Contains carousels and a hero component
+ * @param {object} props Component props
+ * @param {array} props.cards An Array of app information from FDC
+ * @param {func} props.viewAppShowcase Opens the AppShowcase page for a selected app
+ */
 declare const Home: (props: HomeProps) => JSX.Element;
 export default Home;

package/react/components/appCatalog/components/Home.js

@@ -2,10 +2,20 @@
  * Copyright 2017 by ChartIQ, Inc.
  * All rights reserved.
  */
+/**
+ * This component is the name of a component and a pin that will pin that component to all toolbars.
+ *
+ */
 import React from "react";
 import AppList from "./AppList";
 import Hero from "./Hero";
 import Carousel from "./Carousel";
+/**
+ * Home page. Contains carousels and a hero component
+ * @param {object} props Component props
+ * @param {array} props.cards An Array of app information from FDC
+ * @param {func} props.viewAppShowcase Opens the AppShowcase page for a selected app
+ */
 const Home = (props) => (React.createElement("div", { className: "home" },
     React.createElement(Hero, { cards: props.cards, viewAppShowcase: props.viewAppShowcase }),
     props.tags.length > 0 &&

package/react/components/appCatalog/components/Home.js.map

@@ -1 +1 @@
-{"version":3,"file":"Home.js","sourceRoot":"","sources":["../../../../src/components/appCatalog/components/Home.tsx"],"names":[],"mappings":"AAAA;;;GAGG;AAKH,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,OAAO,MAAM,WAAW,CAAC;AAChC,OAAO,IAAI,MAAM,QAAQ,CAAC;AAC1B,OAAO,QAAQ,MAAM,YAAY,CAAC;AAmBlC,MAAM,IAAI,GAAG,CAAC,KAAgB,EAAE,EAAE,CAAC,CAClC,6BAAK,SAAS,EAAC,MAAM;IACpB,oBAAC,IAAI,IAAC,KAAK,EAAE,KAAK,CAAC,KAAK,EAAE,eAAe,EAAE,KAAK,CAAC,eAAe,GAAI;IACnE,KAAK,CAAC,IAAI,CAAC,MAAM,GAAG,CAAC;QACrB,KAAK,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,GAAG,EAAE,CAAC,EAAE,EAAE;YACzB,MAAM,QAAQ,GAAG,GAAG,CAAC;YACrB,MAAM,KAAK,GAAG,KAAK,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,GAAG,CAAC,CAAC,CAAC;YAEpE,OAAO,oBAAC,QAAQ,IAAC,GAAG,EAAE,CAAC,EAAE,GAAG,EAAE,QAAQ,EAAE,KAAK,EAAE,KAAK,EAAE,eAAe,EAAE,KAAK,CAAC,eAAe,GAAI,CAAC;QAClG,CAAC,CAAC;IACF,KAAK,CAAC,IAAI,CAAC,MAAM,KAAK,CAAC,IAAI,oBAAC,OAAO,IAAC,KAAK,EAAE,KAAK,CAAC,KAAK,EAAE,eAAe,EAAE,KAAK,CAAC,eAAe,GAAI,CAC9F,CACN,CAAC;AAEF,eAAe,IAAI,CAAC","sourcesContent":["/*!\n * Copyright 2017 by ChartIQ, Inc.\n * All rights reserved.\n */\n/**\n * This component is the name of a component and a pin that will pin that component to all toolbars.\n *\n */\nimport React from \"react\";\nimport AppList from \"./AppList\";\nimport Hero from \"./Hero\";\nimport Carousel from \"./Carousel\";\nimport { AppMetadata } from \"../../../types/fdc3\";\n\ntype Images = {\n\turl: string;\n};\n\ntype HomeProps = {\n\ttags: string[];\n\tcards: (AppMetadata & { tags: string[]; images: Images[] })[];\n\tviewAppShowcase: (id: AppMetadata[\"appId\"]) => void;\n};\n\n/**\n * Home page. Contains carousels and a hero component\n * @param {object} props Component props\n * @param {array} props.cards An Array of app information from FDC\n * @param {func} props.viewAppShowcase Opens the AppShowcase page for a selected app\n */\nconst Home = (props: HomeProps) => (\n\t<div className=\"home\">\n\t\t<Hero cards={props.cards} viewAppShowcase={props.viewAppShowcase} />\n\t\t{props.tags.length > 0 &&\n\t\t\tprops.tags.map((tag, i) => {\n\t\t\t\tconst tagLabel = tag;\n\t\t\t\tconst cards = props.cards.filter((card) => card.tags.includes(tag));\n\n\t\t\t\treturn <Carousel key={i} tag={tagLabel} cards={cards} viewAppShowcase={props.viewAppShowcase} />;\n\t\t\t})}\n\t\t{props.tags.length === 0 && <AppList cards={props.cards} viewAppShowcase={props.viewAppShowcase} />}\n\t</div>\n);\n\nexport default Home;\n"]}
+{"version":3,"file":"Home.js","sourceRoot":"","sources":["../../../../src/components/appCatalog/components/Home.tsx"],"names":[],"mappings":"AAAA;;;GAGG;AACH;;;GAGG;AACH,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,OAAO,MAAM,WAAW,CAAC;AAChC,OAAO,IAAI,MAAM,QAAQ,CAAC;AAC1B,OAAO,QAAQ,MAAM,YAAY,CAAC;AAalC;;;;;GAKG;AACH,MAAM,IAAI,GAAG,CAAC,KAAgB,EAAE,EAAE,CAAC,CAClC,6BAAK,SAAS,EAAC,MAAM;IACpB,oBAAC,IAAI,IAAC,KAAK,EAAE,KAAK,CAAC,KAAK,EAAE,eAAe,EAAE,KAAK,CAAC,eAAe,GAAI;IACnE,KAAK,CAAC,IAAI,CAAC,MAAM,GAAG,CAAC;QACrB,KAAK,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,GAAG,EAAE,CAAC,EAAE,EAAE;YACzB,MAAM,QAAQ,GAAG,GAAG,CAAC;YACrB,MAAM,KAAK,GAAG,KAAK,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,GAAG,CAAC,CAAC,CAAC;YAEpE,OAAO,oBAAC,QAAQ,IAAC,GAAG,EAAE,CAAC,EAAE,GAAG,EAAE,QAAQ,EAAE,KAAK,EAAE,KAAK,EAAE,eAAe,EAAE,KAAK,CAAC,eAAe,GAAI,CAAC;QAClG,CAAC,CAAC;IACF,KAAK,CAAC,IAAI,CAAC,MAAM,KAAK,CAAC,IAAI,oBAAC,OAAO,IAAC,KAAK,EAAE,KAAK,CAAC,KAAK,EAAE,eAAe,EAAE,KAAK,CAAC,eAAe,GAAI,CAC9F,CACN,CAAC;AAEF,eAAe,IAAI,CAAC","sourcesContent":["/*!\n * Copyright 2017 by ChartIQ, Inc.\n * All rights reserved.\n */\n/**\n * This component is the name of a component and a pin that will pin that component to all toolbars.\n *\n */\nimport React from \"react\";\nimport AppList from \"./AppList\";\nimport Hero from \"./Hero\";\nimport Carousel from \"./Carousel\";\nimport { AppMetadata } from \"../../../types/fdc3\";\n\ntype Images = {\n\turl: string;\n};\n\ntype HomeProps = {\n\ttags: string[];\n\tcards: (AppMetadata & { tags: string[]; images: Images[] })[];\n\tviewAppShowcase: (id: AppMetadata[\"appId\"]) => void;\n};\n\n/**\n * Home page. Contains carousels and a hero component\n * @param {object} props Component props\n * @param {array} props.cards An Array of app information from FDC\n * @param {func} props.viewAppShowcase Opens the AppShowcase page for a selected app\n */\nconst Home = (props: HomeProps) => (\n\t<div className=\"home\">\n\t\t<Hero cards={props.cards} viewAppShowcase={props.viewAppShowcase} />\n\t\t{props.tags.length > 0 &&\n\t\t\tprops.tags.map((tag, i) => {\n\t\t\t\tconst tagLabel = tag;\n\t\t\t\tconst cards = props.cards.filter((card) => card.tags.includes(tag));\n\n\t\t\t\treturn <Carousel key={i} tag={tagLabel} cards={cards} viewAppShowcase={props.viewAppShowcase} />;\n\t\t\t})}\n\t\t{props.tags.length === 0 && <AppList cards={props.cards} viewAppShowcase={props.viewAppShowcase} />}\n\t</div>\n);\n\nexport default Home;\n"]}

package/react/components/appCatalog/components/SearchBar.d.ts

@@ -1,3 +1,7 @@
+/*!
+ * Copyright 2017 by ChartIQ, Inc.
+ * All rights reserved.
+ */
 import React, { Component } from "react";
 interface IProps {
     backButton?: Boolean;
@@ -11,14 +15,41 @@ interface IState {
     tagSelectorOpen: Boolean;
     searchText: string;
 }
+/**
+ * The search bar, tags filter menu, and any active tags being filtered on
+ * @param {object} props Component props
+ * @param {boolean} [props.backButton] If true, display a back button for going back to the homepage
+ * @param {array} props.tags An array of all available tags for the tags menu
+ * @param {array} props.activeTags An array of active tags acting as search criteria
+ * @param {func} props.goHome Function to handle sending the app back to the homepage
+ * @param {string} props.installationActionTaken Name of action that handles display/hiding the success/failure message from adding/removing an app
+ */
 declare class SearchBar extends Component<IProps, IState> {
     textInput: React.RefObject<HTMLInputElement> | undefined;
     constructor(props: IProps);
     bindCorrectContext(): void;
+    /**
+     * Handles changing the component state for handling local input value. Also calls parent function to effect the store
+     * @param {object} e React Synthetic event
+     */
     changeSearch(e: React.ChangeEvent<HTMLInputElement>): void;
+    /**
+     * Opens/hides the tag selection menu
+     */
     toggleTagSelector(): void;
+    /**
+     * Calls parent function to add a tag to filters
+     * @param {string} tag The name of the tag
+     */
     selectTag(tag: string): void;
+    /**
+     * Calls parent function to remove a tag from filters
+     * @param {string} tag The name of the tag
+     */
     removeTag(tag: string): void;
+    /**
+     * Clears search because 'back' button was clicked
+     */
     goHome(): void;
     focus(): void;
     render(): JSX.Element;

package/react/components/appCatalog/components/SearchBar.js

@@ -1,8 +1,23 @@
+/*!
+ * Copyright 2017 by ChartIQ, Inc.
+ * All rights reserved.
+ */
 import React, { Component } from "react";
+// data
 import storeActions from "../stores/storeActions";
+// components
 import Toast from "./Toast";
 import Tag from "../../shared/Tag";
 import TagsMenu from "../../shared/TagsMenu";
+/**
+ * The search bar, tags filter menu, and any active tags being filtered on
+ * @param {object} props Component props
+ * @param {boolean} [props.backButton] If true, display a back button for going back to the homepage
+ * @param {array} props.tags An array of all available tags for the tags menu
+ * @param {array} props.activeTags An array of active tags acting as search criteria
+ * @param {func} props.goHome Function to handle sending the app back to the homepage
+ * @param {string} props.installationActionTaken Name of action that handles display/hiding the success/failure message from adding/removing an app
+ */
 class SearchBar extends Component {
     constructor(props) {
         super(props);
@@ -21,16 +36,27 @@ class SearchBar extends Component {
         this.removeTag = this.removeTag.bind(this);
         this.focus = this.focus.bind(this);
     }
+    /**
+     * Handles changing the component state for handling local input value. Also calls parent function to effect the store
+     * @param {object} e React Synthetic event
+     */
     changeSearch(e) {
         const { value: searchTerms } = e.target;
         this.setState({ searchText: searchTerms });
         this.props.search(searchTerms);
     }
+    /**
+     * Opens/hides the tag selection menu
+     */
     toggleTagSelector() {
         this.setState({
             tagSelectorOpen: !this.state.tagSelectorOpen,
         });
     }
+    /**
+     * Calls parent function to add a tag to filters
+     * @param {string} tag The name of the tag
+     */
     selectTag(tag) {
         let tags = storeActions.getActiveTags();
         this.setState({
@@ -44,9 +70,16 @@ class SearchBar extends Component {
             }
         });
     }
+    /**
+     * Calls parent function to remove a tag from filters
+     * @param {string} tag The name of the tag
+     */
     removeTag(tag) {
         storeActions.removeTag(tag);
     }
+    /**
+     * Clears search because 'back' button was clicked
+     */
     goHome() {
         this.setState({ searchText: "" });
         this.props.goHome();

package/react/components/appCatalog/components/SearchBar.js.map

@@ -1 +1 @@
-{"version":3,"file":"SearchBar.js","sourceRoot":"","sources":["../../../../src/components/appCatalog/components/SearchBar.tsx"],"names":[],"mappings":"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","sourcesContent":["/*!\n * Copyright 2017 by ChartIQ, Inc.\n * All rights reserved.\n */\nimport React, { Component } from \"react\";\n\n// data\nimport storeActions from \"../stores/storeActions\";\n\n// components\nimport Toast from \"./Toast\";\nimport Tag from \"../../shared/Tag\";\nimport TagsMenu from \"../../shared/TagsMenu\";\n\ninterface IProps {\n\tbackButton?: Boolean;\n\ttags: string[];\n\tactiveTags: string[];\n\tgoHome: () => void;\n\tinstallationActionTaken: string;\n\tsearch: (searchTerms: string) => void;\n}\n\ninterface IState {\n\ttagSelectorOpen: Boolean;\n\tsearchText: string;\n}\n\n/**\n * The search bar, tags filter menu, and any active tags being filtered on\n * @param {object} props Component props\n * @param {boolean} [props.backButton] If true, display a back button for going back to the homepage\n * @param {array} props.tags An array of all available tags for the tags menu\n * @param {array} props.activeTags An array of active tags acting as search criteria\n * @param {func} props.goHome Function to handle sending the app back to the homepage\n * @param {string} props.installationActionTaken Name of action that handles display/hiding the success/failure message from adding/removing an app\n */\nclass SearchBar extends Component<IProps, IState> {\n\ttextInput: React.RefObject<HTMLInputElement> | undefined;\n\n\tconstructor(props: IProps) {\n\t\tsuper(props);\n\t\tthis.textInput = React.createRef();\n\t\tthis.state = {\n\t\t\ttagSelectorOpen: false,\n\t\t\tsearchText: \"\",\n\t\t};\n\t\tthis.bindCorrectContext();\n\t}\n\n\tbindCorrectContext() {\n\t\tthis.goHome = this.goHome.bind(this);\n\t\tthis.changeSearch = this.changeSearch.bind(this);\n\t\tthis.toggleTagSelector = this.toggleTagSelector.bind(this);\n\t\tthis.selectTag = this.selectTag.bind(this);\n\t\tthis.removeTag = this.removeTag.bind(this);\n\t\tthis.focus = this.focus.bind(this);\n\t}\n\n\t/**\n\t * Handles changing the component state for handling local input value. Also calls parent function to effect the store\n\t * @param {object} e React Synthetic event\n\t */\n\tchangeSearch(e: React.ChangeEvent<HTMLInputElement>) {\n\t\tconst { value: searchTerms } = e.target;\n\t\tthis.setState({ searchText: searchTerms });\n\t\tthis.props.search(searchTerms);\n\t}\n\n\t/**\n\t * Opens/hides the tag selection menu\n\t */\n\ttoggleTagSelector() {\n\t\tthis.setState({\n\t\t\ttagSelectorOpen: !this.state.tagSelectorOpen,\n\t\t});\n\t}\n\n\t/**\n\t * Calls parent function to add a tag to filters\n\t * @param {string} tag The name of the tag\n\t */\n\tselectTag(tag: string) {\n\t\tlet tags: string[] = storeActions.getActiveTags();\n\n\t\tthis.setState(\n\t\t\t{\n\t\t\t\ttagSelectorOpen: false,\n\t\t\t},\n\t\t\t() => {\n\t\t\t\tif (tags.includes(tag)) {\n\t\t\t\t\tstoreActions.removeTag(tag);\n\t\t\t\t} else {\n\t\t\t\t\tstoreActions.addTag(tag);\n\t\t\t\t}\n\t\t\t}\n\t\t);\n\t}\n\n\t/**\n\t * Calls parent function to remove a tag from filters\n\t * @param {string} tag The name of the tag\n\t */\n\tremoveTag(tag: string) {\n\t\tstoreActions.removeTag(tag);\n\t}\n\n\t/**\n\t * Clears search because 'back' button was clicked\n\t */\n\tgoHome() {\n\t\tthis.setState({ searchText: \"\" });\n\t\tthis.props.goHome();\n\t}\n\n\tfocus() {\n\t\tthis.textInput?.current?.focus();\n\t}\n\n\trender() {\n\t\tconst activeTags: string[] = storeActions.getActiveTags();\n\n\t\treturn (\n\t\t\t<div className=\"search-main\">\n\t\t\t\t<Toast installationActionTaken={this.props.installationActionTaken} />\n\t\t\t\t<div className=\"search-action-items\">\n\t\t\t\t\t{this.props.backButton ? (\n\t\t\t\t\t\t<div className=\"search-back\" onClick={this.goHome}>\n\t\t\t\t\t\t\t<i className=\"ff-arrow-back\"></i>\n\t\t\t\t\t\t\t<span className=\"button-label\">Back</span>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t) : null}\n\t\t\t\t\t<div className=\"search-input-container\">\n\t\t\t\t\t\t<i className=\"ff-search\"></i>\n\t\t\t\t\t\t<input\n\t\t\t\t\t\t\tclassName=\"search-input\"\n\t\t\t\t\t\t\trequired\n\t\t\t\t\t\t\tref={this.textInput}\n\t\t\t\t\t\t\tplaceholder=\"Search\"\n\t\t\t\t\t\t\ttype=\"text\"\n\t\t\t\t\t\t\tvalue={this.state.searchText}\n\t\t\t\t\t\t\tonChange={this.changeSearch}\n\t\t\t\t\t\t/>\n\t\t\t\t\t\t<button className=\"close-icon\" onClick={this.goHome} type=\"reset\"></button>\n\t\t\t\t\t</div>\n\t\t\t\t\t<TagsMenu\n\t\t\t\t\t\tactive={activeTags}\n\t\t\t\t\t\tlist={this.props.tags}\n\t\t\t\t\t\tonItemClick={this.selectTag}\n\t\t\t\t\t\tlabel={\"Tags\"}\n\t\t\t\t\t\talign=\"right\"\n\t\t\t\t\t/>\n\t\t\t\t</div>\n\t\t\t\t<div className=\"label-bar\">\n\t\t\t\t\t{activeTags.map((tag) => (\n\t\t\t\t\t\t<Tag key={tag} name={tag} removeTag={this.removeTag} />\n\t\t\t\t\t))}\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t);\n\t}\n}\n\nexport default SearchBar;\n"]}
+{"version":3,"file":"SearchBar.js","sourceRoot":"","sources":["../../../../src/components/appCatalog/components/SearchBar.tsx"],"names":[],"mappings":"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","sourcesContent":["/*!\n * Copyright 2017 by ChartIQ, Inc.\n * All rights reserved.\n */\nimport React, { Component } from \"react\";\n\n// data\nimport storeActions from \"../stores/storeActions\";\n\n// components\nimport Toast from \"./Toast\";\nimport Tag from \"../../shared/Tag\";\nimport TagsMenu from \"../../shared/TagsMenu\";\n\ninterface IProps {\n\tbackButton?: Boolean;\n\ttags: string[];\n\tactiveTags: string[];\n\tgoHome: () => void;\n\tinstallationActionTaken: string;\n\tsearch: (searchTerms: string) => void;\n}\n\ninterface IState {\n\ttagSelectorOpen: Boolean;\n\tsearchText: string;\n}\n\n/**\n * The search bar, tags filter menu, and any active tags being filtered on\n * @param {object} props Component props\n * @param {boolean} [props.backButton] If true, display a back button for going back to the homepage\n * @param {array} props.tags An array of all available tags for the tags menu\n * @param {array} props.activeTags An array of active tags acting as search criteria\n * @param {func} props.goHome Function to handle sending the app back to the homepage\n * @param {string} props.installationActionTaken Name of action that handles display/hiding the success/failure message from adding/removing an app\n */\nclass SearchBar extends Component<IProps, IState> {\n\ttextInput: React.RefObject<HTMLInputElement> | undefined;\n\n\tconstructor(props: IProps) {\n\t\tsuper(props);\n\t\tthis.textInput = React.createRef();\n\t\tthis.state = {\n\t\t\ttagSelectorOpen: false,\n\t\t\tsearchText: \"\",\n\t\t};\n\t\tthis.bindCorrectContext();\n\t}\n\n\tbindCorrectContext() {\n\t\tthis.goHome = this.goHome.bind(this);\n\t\tthis.changeSearch = this.changeSearch.bind(this);\n\t\tthis.toggleTagSelector = this.toggleTagSelector.bind(this);\n\t\tthis.selectTag = this.selectTag.bind(this);\n\t\tthis.removeTag = this.removeTag.bind(this);\n\t\tthis.focus = this.focus.bind(this);\n\t}\n\n\t/**\n\t * Handles changing the component state for handling local input value. Also calls parent function to effect the store\n\t * @param {object} e React Synthetic event\n\t */\n\tchangeSearch(e: React.ChangeEvent<HTMLInputElement>) {\n\t\tconst { value: searchTerms } = e.target;\n\t\tthis.setState({ searchText: searchTerms });\n\t\tthis.props.search(searchTerms);\n\t}\n\n\t/**\n\t * Opens/hides the tag selection menu\n\t */\n\ttoggleTagSelector() {\n\t\tthis.setState({\n\t\t\ttagSelectorOpen: !this.state.tagSelectorOpen,\n\t\t});\n\t}\n\n\t/**\n\t * Calls parent function to add a tag to filters\n\t * @param {string} tag The name of the tag\n\t */\n\tselectTag(tag: string) {\n\t\tlet tags: string[] = storeActions.getActiveTags();\n\n\t\tthis.setState(\n\t\t\t{\n\t\t\t\ttagSelectorOpen: false,\n\t\t\t},\n\t\t\t() => {\n\t\t\t\tif (tags.includes(tag)) {\n\t\t\t\t\tstoreActions.removeTag(tag);\n\t\t\t\t} else {\n\t\t\t\t\tstoreActions.addTag(tag);\n\t\t\t\t}\n\t\t\t}\n\t\t);\n\t}\n\n\t/**\n\t * Calls parent function to remove a tag from filters\n\t * @param {string} tag The name of the tag\n\t */\n\tremoveTag(tag: string) {\n\t\tstoreActions.removeTag(tag);\n\t}\n\n\t/**\n\t * Clears search because 'back' button was clicked\n\t */\n\tgoHome() {\n\t\tthis.setState({ searchText: \"\" });\n\t\tthis.props.goHome();\n\t}\n\n\tfocus() {\n\t\tthis.textInput?.current?.focus();\n\t}\n\n\trender() {\n\t\tconst activeTags: string[] = storeActions.getActiveTags();\n\n\t\treturn (\n\t\t\t<div className=\"search-main\">\n\t\t\t\t<Toast installationActionTaken={this.props.installationActionTaken} />\n\t\t\t\t<div className=\"search-action-items\">\n\t\t\t\t\t{this.props.backButton ? (\n\t\t\t\t\t\t<div className=\"search-back\" onClick={this.goHome}>\n\t\t\t\t\t\t\t<i className=\"ff-arrow-back\"></i>\n\t\t\t\t\t\t\t<span className=\"button-label\">Back</span>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t) : null}\n\t\t\t\t\t<div className=\"search-input-container\">\n\t\t\t\t\t\t<i className=\"ff-search\"></i>\n\t\t\t\t\t\t<input\n\t\t\t\t\t\t\tclassName=\"search-input\"\n\t\t\t\t\t\t\trequired\n\t\t\t\t\t\t\tref={this.textInput}\n\t\t\t\t\t\t\tplaceholder=\"Search\"\n\t\t\t\t\t\t\ttype=\"text\"\n\t\t\t\t\t\t\tvalue={this.state.searchText}\n\t\t\t\t\t\t\tonChange={this.changeSearch}\n\t\t\t\t\t\t/>\n\t\t\t\t\t\t<button className=\"close-icon\" onClick={this.goHome} type=\"reset\"></button>\n\t\t\t\t\t</div>\n\t\t\t\t\t<TagsMenu\n\t\t\t\t\t\tactive={activeTags}\n\t\t\t\t\t\tlist={this.props.tags}\n\t\t\t\t\t\tonItemClick={this.selectTag}\n\t\t\t\t\t\tlabel={\"Tags\"}\n\t\t\t\t\t\talign=\"right\"\n\t\t\t\t\t/>\n\t\t\t\t</div>\n\t\t\t\t<div className=\"label-bar\">\n\t\t\t\t\t{activeTags.map((tag) => (\n\t\t\t\t\t\t<Tag key={tag} name={tag} removeTag={this.removeTag} />\n\t\t\t\t\t))}\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t);\n\t}\n}\n\nexport default SearchBar;\n"]}

package/react/components/appCatalog/components/Showcase/AppDescription.d.ts

@@ -2,5 +2,10 @@
 declare type DescriptionProps = {
     description: string;
 };
+/**
+ * AppShowcase description section
+ * @param {object} props Component props
+ * @param {string} props.description The app description
+ */
 declare const AppDescription: ({ description }: DescriptionProps) => JSX.Element;
 export default AppDescription;

package/react/components/appCatalog/components/Showcase/AppDescription.js

@@ -1,4 +1,13 @@
+/*!
+ * Copyright 2017 by ChartIQ, Inc.
+ * All rights reserved.
+ */
 import React from "react";
+/**
+ * AppShowcase description section
+ * @param {object} props Component props
+ * @param {string} props.description The app description
+ */
 const AppDescription = ({ description }) => (React.createElement("div", { className: "app-notes description" },
     React.createElement("span", { className: "showcase-label" }, "Description"),
     React.createElement("div", { className: "description-content" },

package/react/components/appCatalog/components/Showcase/AppDescription.js.map

@@ -1 +1 @@
-{"version":3,"file":"AppDescription.js","sourceRoot":"","sources":["../../../../../src/components/appCatalog/components/Showcase/AppDescription.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,MAAM,OAAO,CAAC;AAU1B,MAAM,cAAc,GAAG,CAAC,EAAE,WAAW,EAAoB,EAAE,EAAE,CAAC,CAC7D,6BAAK,SAAS,EAAC,uBAAuB;IACrC,8BAAM,SAAS,EAAC,gBAAgB,kBAAmB;IACnD,6BAAK,SAAS,EAAC,qBAAqB;QACnC,iCAAM,WAAW,CAAO,CACnB,CACD,CACN,CAAC;AAEF,eAAe,cAAc,CAAC","sourcesContent":["/*!\n * Copyright 2017 by ChartIQ, Inc.\n * All rights reserved.\n */\nimport React from \"react\";\n\ntype DescriptionProps = {\n\tdescription: string;\n};\n/**\n * AppShowcase description section\n * @param {object} props Component props\n * @param {string} props.description The app description\n */\nconst AppDescription = ({ description }: DescriptionProps) => (\n\t<div className=\"app-notes description\">\n\t\t<span className=\"showcase-label\">Description</span>\n\t\t<div className=\"description-content\">\n\t\t\t<div>{description}</div>\n\t\t</div>\n\t</div>\n);\n\nexport default AppDescription;\n"]}
+{"version":3,"file":"AppDescription.js","sourceRoot":"","sources":["../../../../../src/components/appCatalog/components/Showcase/AppDescription.tsx"],"names":[],"mappings":"AAAA;;;GAGG;AACH,OAAO,KAAK,MAAM,OAAO,CAAC;AAK1B;;;;GAIG;AACH,MAAM,cAAc,GAAG,CAAC,EAAE,WAAW,EAAoB,EAAE,EAAE,CAAC,CAC7D,6BAAK,SAAS,EAAC,uBAAuB;IACrC,8BAAM,SAAS,EAAC,gBAAgB,kBAAmB;IACnD,6BAAK,SAAS,EAAC,qBAAqB;QACnC,iCAAM,WAAW,CAAO,CACnB,CACD,CACN,CAAC;AAEF,eAAe,cAAc,CAAC","sourcesContent":["/*!\n * Copyright 2017 by ChartIQ, Inc.\n * All rights reserved.\n */\nimport React from \"react\";\n\ntype DescriptionProps = {\n\tdescription: string;\n};\n/**\n * AppShowcase description section\n * @param {object} props Component props\n * @param {string} props.description The app description\n */\nconst AppDescription = ({ description }: DescriptionProps) => (\n\t<div className=\"app-notes description\">\n\t\t<span className=\"showcase-label\">Description</span>\n\t\t<div className=\"description-content\">\n\t\t\t<div>{description}</div>\n\t\t</div>\n\t</div>\n);\n\nexport default AppDescription;\n"]}

package/react/components/appCatalog/components/Showcase/AppDevNotes.d.ts

@@ -3,5 +3,12 @@ declare type AppDevNotesProps = {
     publisher: string;
     email: string;
 };
+/**
+ * AppShowcase dev notes section. Contains developer information
+ * @param {object} props Component props
+ * @param {string} props.publisher The name of this app's publisher
+ * @param {func} props.openSite Parent function to launch the developer's site in Finsemble window
+ * @param {string} props.email The developer's contact email
+ */
 declare const AppDevNotes: (props: AppDevNotesProps) => JSX.Element;
 export default AppDevNotes;

package/react/components/appCatalog/components/Showcase/AppDevNotes.js

@@ -1,5 +1,20 @@
+/*!
+ * Copyright 2017 by ChartIQ, Inc.
+ * All rights reserved.
+ */
 import React from "react";
+/**
+ * AppShowcase dev notes section. Contains developer information
+ * @param {object} props Component props
+ * @param {string} props.publisher The name of this app's publisher
+ * @param {func} props.openSite Parent function to launch the developer's site in Finsemble window
+ * @param {string} props.email The developer's contact email
+ */
 const AppDevNotes = (props) => {
+    /**
+     * Opens the publisher's website.
+     */
+    // NOTE: There is currently no prop in the FDC spec that has a dev site.
     const openSite = () => {
         console.log("open the developers site");
     };

package/react/components/appCatalog/components/Showcase/AppDevNotes.js.map

@@ -1 +1 @@
-{"version":3,"file":"AppDevNotes.js","sourceRoot":"","sources":["../../../../../src/components/appCatalog/components/Showcase/AppDevNotes.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,MAAM,OAAO,CAAC;AAc1B,MAAM,WAAW,GAAG,CAAC,KAAuB,EAAE,EAAE;IAK/C,MAAM,QAAQ,GAAG,GAAG,EAAE;QACrB,OAAO,CAAC,GAAG,CAAC,0BAA0B,CAAC,CAAC;IACzC,CAAC,CAAC;IACF,OAAO,CACN,6BAAK,SAAS,EAAC,qBAAqB;QACnC,8BAAM,SAAS,EAAC,gBAAgB,gBAAiB;QACjD,6BAAK,SAAS,EAAC,mBAAmB;YACjC;gBACE,KAAK,CAAC,SAAS;;gBAAI,GAAG;gBACvB,2BAAG,IAAI,EAAC,GAAG,EAAC,OAAO,EAAE,QAAQ,IAC3B,KAAK,CAAC,KAAK,CACT,CACC,CACD,CACD,CACN,CAAC;AACH,CAAC,CAAC;AAEF,eAAe,WAAW,CAAC","sourcesContent":["/*!\n * Copyright 2017 by ChartIQ, Inc.\n * All rights reserved.\n */\nimport React from \"react\";\n\ntype AppDevNotesProps = {\n\tpublisher: string;\n\temail: string;\n};\n\n/**\n * AppShowcase dev notes section. Contains developer information\n * @param {object} props Component props\n * @param {string} props.publisher The name of this app's publisher\n * @param {func} props.openSite Parent function to launch the developer's site in Finsemble window\n * @param {string} props.email The developer's contact email\n */\nconst AppDevNotes = (props: AppDevNotesProps) => {\n\t/**\n\t * Opens the publisher's website.\n\t */\n\t// NOTE: There is currently no prop in the FDC spec that has a dev site.\n\tconst openSite = () => {\n\t\tconsole.log(\"open the developers site\");\n\t};\n\treturn (\n\t\t<div className=\"app-notes developer\">\n\t\t\t<span className=\"showcase-label\">Developer</span>\n\t\t\t<div className=\"developer-content\">\n\t\t\t\t<div>\n\t\t\t\t\t{props.publisher} -{\" \"}\n\t\t\t\t\t<a href=\"#\" onClick={openSite}>\n\t\t\t\t\t\t{props.email}\n\t\t\t\t\t</a>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</div>\n\t);\n};\n\nexport default AppDevNotes;\n"]}
+{"version":3,"file":"AppDevNotes.js","sourceRoot":"","sources":["../../../../../src/components/appCatalog/components/Showcase/AppDevNotes.tsx"],"names":[],"mappings":"AAAA;;;GAGG;AACH,OAAO,KAAK,MAAM,OAAO,CAAC;AAO1B;;;;;;GAMG;AACH,MAAM,WAAW,GAAG,CAAC,KAAuB,EAAE,EAAE;IAC/C;;OAEG;IACH,wEAAwE;IACxE,MAAM,QAAQ,GAAG,GAAG,EAAE;QACrB,OAAO,CAAC,GAAG,CAAC,0BAA0B,CAAC,CAAC;IACzC,CAAC,CAAC;IACF,OAAO,CACN,6BAAK,SAAS,EAAC,qBAAqB;QACnC,8BAAM,SAAS,EAAC,gBAAgB,gBAAiB;QACjD,6BAAK,SAAS,EAAC,mBAAmB;YACjC;gBACE,KAAK,CAAC,SAAS;;gBAAI,GAAG;gBACvB,2BAAG,IAAI,EAAC,GAAG,EAAC,OAAO,EAAE,QAAQ,IAC3B,KAAK,CAAC,KAAK,CACT,CACC,CACD,CACD,CACN,CAAC;AACH,CAAC,CAAC;AAEF,eAAe,WAAW,CAAC","sourcesContent":["/*!\n * Copyright 2017 by ChartIQ, Inc.\n * All rights reserved.\n */\nimport React from \"react\";\n\ntype AppDevNotesProps = {\n\tpublisher: string;\n\temail: string;\n};\n\n/**\n * AppShowcase dev notes section. Contains developer information\n * @param {object} props Component props\n * @param {string} props.publisher The name of this app's publisher\n * @param {func} props.openSite Parent function to launch the developer's site in Finsemble window\n * @param {string} props.email The developer's contact email\n */\nconst AppDevNotes = (props: AppDevNotesProps) => {\n\t/**\n\t * Opens the publisher's website.\n\t */\n\t// NOTE: There is currently no prop in the FDC spec that has a dev site.\n\tconst openSite = () => {\n\t\tconsole.log(\"open the developers site\");\n\t};\n\treturn (\n\t\t<div className=\"app-notes developer\">\n\t\t\t<span className=\"showcase-label\">Developer</span>\n\t\t\t<div className=\"developer-content\">\n\t\t\t\t<div>\n\t\t\t\t\t{props.publisher} -{\" \"}\n\t\t\t\t\t<a href=\"#\" onClick={openSite}>\n\t\t\t\t\t\t{props.email}\n\t\t\t\t\t</a>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</div>\n\t);\n};\n\nexport default AppDevNotes;\n"]}

package/react/components/appCatalog/components/Showcase/AppShowcase.d.ts

@@ -2,10 +2,27 @@ export default AppShowcase;
 declare class AppShowcase extends React.Component<any, any, any> {
     constructor(props: any);
     bindCorrectContext(): void;
+    /**
+     * Pages right through the app's images.
+     */
     nextImage(): void;
+    /**
+     * Pages left through the app's images.
+     */
     previousImage(): void;
+    /**
+     * Opens the image modal (light box). Sets the image to display
+     * @param {string} url The image url to display in the light box
+     */
     openModal(url: string): void;
+    /**
+     * Closes the image modal
+     */
     closeModal(): void;
+    /**
+     * Calls the parents function to add a tag to list of filters
+     * @param {string} name The tag name
+     */
     addTag(name: string): void;
 }
 import React from "react";