@imerss/inat-components 1.1.1 → 1.1.2

package/dist/index.d.ts

@@ -1,12 +1,3 @@
-declare const TaxonPanel: ({ taxonId, placeId, dataSource, config, baseURL }: any) => JSX.Element;
-
-declare type ObservationProps = {
-    imageUrl: string;
-    linkUrl: string;
-    children: any;
-};
-declare const Observation: ({ imageUrl, linkUrl, children }: ObservationProps) => JSX.Element;
-
 declare type CommonTaxaCallProps = {
     year: string | number;
     taxonId: string | number;
@@ -132,6 +123,17 @@ declare enum Tab {
     favourites = "favourites",
     stats = "stats"
 }
+declare type BaseClasses = {
+    tabs?: string;
+    yearsDropdown?: string;
+    pageHeadings?: string;
+    observationLabelTitle?: string;
+    observationLabelDate?: string;
+    observationLabelName?: string;
+    observersList?: string;
+    statsCountSummary?: string;
+    tabDesc?: string;
+};
 declare type BaseComponentProps = {
     taxonId?: number;
     placeId?: number;
@@ -141,11 +143,14 @@ declare type BaseComponentProps = {
     data?: any;
     dataUrl?: string;
     className?: string;
+    itemWidth?: number;
     components?: {
         label?: any;
         error?: any;
         loader?: any;
     };
+    classes?: BaseClasses;
+    tabDesc?: string;
 };
 declare type TaxaConfig = {
     label: string;
@@ -157,8 +162,14 @@ declare type PlaceConfig = {
     short: string;
     placeId: number;
 };
+declare type TabDescs = {
+    recentDesc?: string;
+    mostCommonDesc?: string;
+    mostFavouritedDesc?: string;
+    generalStatsDesc?: string;
+};
 
-declare const getSourceFile: (api: Feature, taxonInfo: TaxaConfig, placeInfo: PlaceConfig, year?: string | number) => string;
+declare const getSourceFile: (api: Feature, taxonInfo?: TaxaConfig, placeInfo?: PlaceConfig, year?: string | number) => string;
 
 declare const getCurrentYear: () => number;
 declare const formatDate: (date: string, dateFormat?: string) => any;
@@ -169,35 +180,64 @@ declare const BASE_API_URL = "https://api.inaturalist.org";
 declare const PER_PAGE = 100;
 declare const BASE_URL = "https://www.inaturalist.org";
 declare const ERROR_LOG_FILENAME = "inat-components-error.log";
+declare const DEFAULT_ITEM_WIDTH = 150;
 
 declare const constants_BASE_API_URL: typeof BASE_API_URL;
 declare const constants_PER_PAGE: typeof PER_PAGE;
 declare const constants_BASE_URL: typeof BASE_URL;
 declare const constants_ERROR_LOG_FILENAME: typeof ERROR_LOG_FILENAME;
+declare const constants_DEFAULT_ITEM_WIDTH: typeof DEFAULT_ITEM_WIDTH;
 declare namespace constants {
   export {
     constants_BASE_API_URL as BASE_API_URL,
     constants_PER_PAGE as PER_PAGE,
     constants_BASE_URL as BASE_URL,
     constants_ERROR_LOG_FILENAME as ERROR_LOG_FILENAME,
+    constants_DEFAULT_ITEM_WIDTH as DEFAULT_ITEM_WIDTH,
   };
 }
 
+declare type TaxonPanelProps = {
+    taxonId: number;
+    placeId: number;
+    dataSource: DataSource;
+    config: ConfigFile;
+    baseUrl: string;
+    itemWidth?: number;
+    classes?: BaseClasses;
+    tabDescs?: TabDescs;
+};
+declare const TaxonPanel: ({ taxonId, placeId, dataSource, config, baseUrl, itemWidth, classes, tabDescs }: TaxonPanelProps) => JSX.Element;
+
+declare type ObservationProps = {
+    imageUrl: string;
+    linkUrl: string;
+    itemWidth: number;
+    children: any;
+};
+declare const Observation: ({ imageUrl, linkUrl, itemWidth, children }: ObservationProps) => JSX.Element;
+
 declare type CommonTaxaProps = BaseComponentProps & {
     year: string | number;
 };
-declare const CommonTaxaLabel: (data: CommonTaxData) => JSX.Element;
-declare const CommonTaxa: ({ year, source, taxonId, placeId, perPage, data, dataUrl, components, className }: CommonTaxaProps) => JSX.Element;
+declare const CommonTaxaLabel: (data: CommonTaxData & {
+    classes: BaseClasses;
+}) => JSX.Element;
+declare const CommonTaxa: ({ year, source, taxonId, placeId, perPage, itemWidth, data, dataUrl, components, classes, className, tabDesc }: CommonTaxaProps) => JSX.Element;
 
 declare type RecentObservationsProps = BaseComponentProps;
-declare const RecentObservationLabel: (obs: RecentObservationData) => JSX.Element;
-declare const RecentObservations: ({ taxonId, placeId, data, dataUrl, source, perPage, components, className }: RecentObservationsProps) => JSX.Element;
+declare const RecentObservationLabel: (obs: RecentObservationData & {
+    classes: BaseClasses;
+}) => JSX.Element;
+declare const RecentObservations: ({ taxonId, placeId, data, dataUrl, source, perPage, itemWidth, components, className, classes, tabDesc }: RecentObservationsProps) => JSX.Element;
 
 declare type FavouritesProps = BaseComponentProps & {
     year: string | number;
 };
-declare const FavouritesLabel: (data: FavouritesData) => JSX.Element;
-declare const Favourites: ({ year, source, taxonId, placeId, data, dataUrl, components, className, perPage }: FavouritesProps) => JSX.Element;
+declare const FavouritesLabel: (data: FavouritesData & {
+    classes: BaseClasses;
+}) => JSX.Element;
+declare const Favourites: ({ year, source, taxonId, placeId, data, dataUrl, components, className, tabDesc, classes, itemWidth, perPage }: FavouritesProps) => JSX.Element;
 
 declare const SeasonalityGraph: ({ data }: any) => JSX.Element;
 
@@ -208,7 +248,9 @@ declare type SummaryProps = {
     year: string | number;
     data?: FavouritesRespData;
     dataUrl?: string;
+    classes?: BaseClasses;
+    tabDesc?: string;
 };
-declare const Summary: ({ source, data, dataUrl, taxonId, placeId, year }: SummaryProps) => JSX.Element;
+declare const Summary: ({ source, data, dataUrl, taxonId, placeId, year, classes, tabDesc }: SummaryProps) => JSX.Element;
 
-export { BaseComponentProps, constants as C, CommonTaxData, CommonTaxa, CommonTaxaCallProps, CommonTaxaLabel, CommonTaxaProps, CommonTaxaRespData, ConfigFile, DataSource, Favourites, FavouritesCallProps, FavouritesData, FavouritesLabel, FavouritesProps, FavouritesRespData, Feature, Observation, ObservationProps, Observer, PlaceConfig, RecentObservationData, RecentObservationLabel, RecentObservations, RecentObservationsCallProps, RecentObservationsProps, RecentObservationsRespData, SeasonalityData, SeasonalityGraph, Summary, SummaryApiProps, SummaryData, SummaryProps, Tab, TaxaConfig, TaxonPanel as default, formatDate, getCommonTaxa, getCurrentYear, getFavourites, getObservationSummary, getObserverSummary, getRecentObservations, getSeasonalityData, getSourceFile, getSummary, numberWithCommas };
+export { BaseClasses, BaseComponentProps, constants as C, CommonTaxData, CommonTaxa, CommonTaxaCallProps, CommonTaxaLabel, CommonTaxaProps, CommonTaxaRespData, ConfigFile, DataSource, Favourites, FavouritesCallProps, FavouritesData, FavouritesLabel, FavouritesProps, FavouritesRespData, Feature, Observation, ObservationProps, Observer, PlaceConfig, RecentObservationData, RecentObservationLabel, RecentObservations, RecentObservationsCallProps, RecentObservationsProps, RecentObservationsRespData, SeasonalityData, SeasonalityGraph, Summary, SummaryApiProps, SummaryData, SummaryProps, Tab, TabDescs, TaxaConfig, TaxonPanelProps, TaxonPanel as default, formatDate, getCommonTaxa, getCurrentYear, getFavourites, getObservationSummary, getObserverSummary, getRecentObservations, getSeasonalityData, getSourceFile, getSummary, numberWithCommas };

package/dist/index.js

@@ -73,13 +73,15 @@ var BASE_API_URL = 'https://api.inaturalist.org';
 var PER_PAGE = 100;
 var BASE_URL = "https://www.inaturalist.org"; // /people/name_here
 var ERROR_LOG_FILENAME = "inat-components-error.log";
+var DEFAULT_ITEM_WIDTH = 150;
 
 var constants = /*#__PURE__*/Object.freeze({
     __proto__: null,
     BASE_API_URL: BASE_API_URL,
     PER_PAGE: PER_PAGE,
     BASE_URL: BASE_URL,
-    ERROR_LOG_FILENAME: ERROR_LOG_FILENAME
+    ERROR_LOG_FILENAME: ERROR_LOG_FILENAME,
+    DEFAULT_ITEM_WIDTH: DEFAULT_ITEM_WIDTH
 });
 
 var getCommonTaxa = function (_a) {
@@ -142,12 +144,7 @@ var getFavourites = function (_a) {
                     if (year !== "all") {
                         url += "&d1=".concat(year, "-01-01&d2=").concat(year, "-12-31");
                     }
-                    return [4 /*yield*/, fetch$1(url, {
-                        // method: 'GET',
-                        // headers: {
-                        //     Accept: 'application/json'
-                        // }
-                        })];
+                    return [4 /*yield*/, fetch$1(url)];
                 case 1:
                     response = _b.sent();
                     return [4 /*yield*/, response.json()];
@@ -164,18 +161,15 @@ var getFavourites = function (_a) {
                     });
                     return [2 /*return*/, {
                             totalResults: resp.total_results,
-                            results: sortedTaxa.map(function (row) {
-                                var _a, _b;
-                                return ({
-                                    id: row.id,
-                                    imageUrl: ((_b = (_a = row.taxon) === null || _a === void 0 ? void 0 : _a.default_photo) === null || _b === void 0 ? void 0 : _b.square_url) || "",
-                                    obsDate: row.observed_on_string,
-                                    obsUrl: row.uri,
-                                    taxonName: row.taxon.name || "",
-                                    taxonCommonName: row.taxon.preferred_common_name,
-                                    numFaves: row.faves.length
-                                });
-                            })
+                            results: sortedTaxa.map(function (row) { return ({
+                                id: row.id,
+                                imageUrl: row.observation_photos[0].photo.url || "",
+                                obsDate: row.observed_on_string,
+                                obsUrl: row.uri,
+                                taxonName: row.taxon.name || "",
+                                taxonCommonName: row.taxon.preferred_common_name,
+                                numFaves: row.faves.length
+                            }); })
                         }];
             }
         });
@@ -336,6 +330,9 @@ var Tab;
  * Note that right now the source filenames aren't configurable.
  */
 var getSourceFile = function (api, taxonInfo, placeInfo, year) {
+    if (!taxonInfo || !placeInfo) {
+        return '';
+    }
     var yearStr = year === "all" ? "allyears" : year;
     var filename = "";
     if (api === Feature.recentObservations) {
@@ -401,13 +398,13 @@ var styles$5 = {"obs":"observation-module_obs__-5hGT","image":"observation-modul
 styleInject(css_248z$5);
 
 var Observation = function (_a) {
-    var imageUrl = _a.imageUrl, linkUrl = _a.linkUrl, children = _a.children;
+    var imageUrl = _a.imageUrl, linkUrl = _a.linkUrl, itemWidth = _a.itemWidth, children = _a.children;
     var gotoObservation = useCallback(function () {
         window.open(linkUrl);
     }, [linkUrl]);
     return (jsxs("article", __assign({ className: styles$5.obs, onClick: gotoObservation }, { children: [jsx("div", { style: {
-                    width: 200,
-                    height: 200,
+                    width: itemWidth,
+                    height: itemWidth,
                     overflow: "hidden",
                     borderRadius: 5,
                     background: "url(".concat(imageUrl, ") 50% 50% no-repeat"),
@@ -416,8 +413,8 @@ var Observation = function (_a) {
                 } }), children] })));
 };
 
-var css_248z$4 = ".general-module_page__ziNB9 {\n  padding: 80px 10px 10px;\n  margin: 0 auto;\n  max-width: 1100px; }\n  .general-module_page__ziNB9 h1 {\n    border-bottom: 1px solid #efefef;\n    padding-bottom: 2px;\n    margin-bottom: 25px; }\n\n.general-module_panel__WjWzy {\n  position: relative; }\n\n.general-module_grid__VwNiL {\n  display: grid;\n  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));\n  width: 100%;\n  grid-gap: 8px;\n  text-align: center; }\n\n.general-module_obsLabel__9R-PO {\n  padding: 10px 20px; }\n  .general-module_obsLabel__9R-PO a {\n    text-decoration: none;\n    color: #336699; }\n    .general-module_obsLabel__9R-PO a:hover {\n      text-decoration: underline; }\n\n.general-module_loader__gBvfF {\n  position: absolute;\n  top: 50px;\n  left: 0;\n  right: 0;\n  z-index: 1;\n  margin: 0;\n  display: flex;\n  align-items: center;\n  justify-content: center; }\n\n.general-module_loaderBg__URuj7 {\n  position: absolute;\n  background-color: #cccccc;\n  padding: 20px;\n  width: 100px;\n  border-radius: 10px;\n  height: 100%;\n  opacity: 0.8; }\n\n.general-module_count__Gnr8W {\n  background-color: #efefef;\n  color: #666666;\n  padding: 2px 8px;\n  margin-top: 6px;\n  display: inline-block;\n  border-radius: 3px;\n  font-weight: bold;\n  font-size: 18px; }\n";
-var styles$4 = {"page":"general-module_page__ziNB9","panel":"general-module_panel__WjWzy","grid":"general-module_grid__VwNiL","obsLabel":"general-module_obsLabel__9R-PO","loader":"general-module_loader__gBvfF","loaderBg":"general-module_loaderBg__URuj7","count":"general-module_count__Gnr8W"};
+var css_248z$4 = ".general-module_page__ziNB9 {\n  padding: 80px 10px 10px;\n  margin: 0 auto;\n  max-width: 1100px; }\n  .general-module_page__ziNB9 h1 {\n    border-bottom: 1px solid #efefef;\n    padding-bottom: 2px;\n    margin-bottom: 25px; }\n\n.general-module_panel__WjWzy {\n  position: relative; }\n\n.general-module_grid__VwNiL {\n  display: grid;\n  width: 100%;\n  grid-gap: 8px;\n  text-align: center; }\n\n.general-module_obsLabel__9R-PO {\n  padding: 10px 20px; }\n  .general-module_obsLabel__9R-PO a {\n    text-decoration: none;\n    color: #336699; }\n    .general-module_obsLabel__9R-PO a:hover {\n      text-decoration: underline; }\n\n.general-module_loader__gBvfF {\n  position: absolute;\n  top: 50px;\n  left: 0;\n  right: 0;\n  z-index: 1;\n  margin: 0;\n  display: flex;\n  align-items: center;\n  justify-content: center; }\n\n.general-module_loaderBg__URuj7 {\n  position: absolute;\n  background-color: #cccccc;\n  padding: 20px;\n  width: 100px;\n  border-radius: 10px;\n  height: 100%;\n  opacity: 0.8; }\n\n.general-module_count__Gnr8W {\n  background-color: #efefef;\n  color: #666666;\n  padding: 2px 8px;\n  margin-top: 6px;\n  display: inline-block;\n  border-radius: 3px;\n  font-weight: bold;\n  font-size: 18px; }\n\n.general-module_tabDesc__zOFiV {\n  font-size: 14px;\n  margin-bottom: 20px; }\n";
+var styles$4 = {"page":"general-module_page__ziNB9","panel":"general-module_panel__WjWzy","grid":"general-module_grid__VwNiL","obsLabel":"general-module_obsLabel__9R-PO","loader":"general-module_loader__gBvfF","loaderBg":"general-module_loaderBg__URuj7","count":"general-module_count__Gnr8W","tabDesc":"general-module_tabDesc__zOFiV"};
 styleInject(css_248z$4);
 
 var Loader = function (_a) {
@@ -436,11 +433,14 @@ var NoResults = function () {
     return (jsx("p", { children: "No results found." }));
 };
 
-var RecentObservationLabel = function (obs) { return (jsxs("div", __assign({ className: styles$4.obsLabel }, { children: [jsx("h3", { children: obs.taxonCommonName || obs.taxonName }), jsx("div", { children: formatDate(obs.obsDate) }), jsx("div", { children: jsx("a", __assign({ href: "".concat(BASE_URL, "/people/").concat(obs.observerUsername), target: "_blank", rel: "noreferrer", onClick: function (e) { return e.stopPropagation(); } }, { children: obs.observerUsername })) })] }))); };
+var RecentObservationLabel = function (obs) {
+    var _a, _b, _c;
+    return (jsxs("div", __assign({ className: styles$4.obsLabel }, { children: [jsx("h3", __assign({ className: (_a = obs.classes) === null || _a === void 0 ? void 0 : _a.observationLabelTitle }, { children: obs.taxonCommonName || obs.taxonName })), jsx("div", __assign({ className: (_b = obs.classes) === null || _b === void 0 ? void 0 : _b.observationLabelDate }, { children: formatDate(obs.obsDate) })), jsx("div", __assign({ className: (_c = obs.classes) === null || _c === void 0 ? void 0 : _c.observationLabelName }, { children: jsx("a", __assign({ href: "".concat(BASE_URL, "/people/").concat(obs.observerUsername), target: "_blank", rel: "noreferrer", onClick: function (e) { return e.stopPropagation(); } }, { children: obs.observerUsername })) }))] })));
+};
 var RecentObservations = function (_a) {
-    var taxonId = _a.taxonId, placeId = _a.placeId, data = _a.data, dataUrl = _a.dataUrl, _b = _a.source, source = _b === void 0 ? DataSource.autoLoad : _b, _c = _a.perPage, perPage = _c === void 0 ? PER_PAGE : _c, components = _a.components, className = _a.className;
-    var _d = useState(false), loading = _d[0], setLoading = _d[1];
-    var _e = useState(function () { return (source === DataSource.dataProp) ? data : []; }), observations = _e[0], setObservations = _e[1];
+    var taxonId = _a.taxonId, placeId = _a.placeId, data = _a.data, dataUrl = _a.dataUrl, _b = _a.source, source = _b === void 0 ? DataSource.autoLoad : _b, _c = _a.perPage, perPage = _c === void 0 ? PER_PAGE : _c, _d = _a.itemWidth, itemWidth = _d === void 0 ? DEFAULT_ITEM_WIDTH : _d, components = _a.components, className = _a.className, classes = _a.classes, tabDesc = _a.tabDesc;
+    var _e = useState(false), loading = _e[0], setLoading = _e[1];
+    var _f = useState(function () { return (source === DataSource.dataProp) ? data : []; }), observations = _f[0], setObservations = _f[1];
     useEffect(function () {
         if (source !== DataSource.autoLoad) {
             return;
@@ -498,11 +498,15 @@ var RecentObservations = function (_a) {
     }, [source, dataUrl]);
     var Load = (components === null || components === void 0 ? void 0 : components.loader) ? components.loader : Loader;
     var Label = (components === null || components === void 0 ? void 0 : components.label) ? components.label : RecentObservationLabel;
-    var classes = styles$4.panel;
+    var componentClasses = styles$4.panel;
     if (className) {
-        classes += " ".concat(className);
+        componentClasses += " ".concat(className);
+    }
+    var descClasses = styles$4.tabDesc;
+    if (classes === null || classes === void 0 ? void 0 : classes.tabDesc) {
+        descClasses += " ".concat(classes.tabDesc);
     }
-    return (jsxs("div", __assign({ className: classes }, { children: [jsx(Load, { loading: loading }), jsxs("div", __assign({ className: styles$4.grid }, { children: [!loading && observations.length === 0 && jsx(NoResults, {}), observations.map(function (obs) { return (jsx(Observation, __assign({ imageUrl: obs.imageUrl.replace(/square/, "medium"), linkUrl: obs.obsUrl }, { children: jsx(Label, __assign({}, obs)) }), obs.id)); })] }))] })));
+    return (jsxs("div", __assign({ className: componentClasses }, { children: [tabDesc && jsx("p", __assign({ className: descClasses }, { children: tabDesc })), jsx(Load, { loading: loading }), jsxs("div", __assign({ className: styles$4.grid, style: { gridTemplateColumns: "repeat(auto-fit, minmax(".concat(itemWidth, "px, 1fr))") } }, { children: [!loading && observations.length === 0 && jsx(NoResults, {}), observations.map(function (obs) { return (jsx(Observation, __assign({ imageUrl: obs.imageUrl.replace(/square/, "medium"), itemWidth: itemWidth, linkUrl: obs.obsUrl }, { children: jsx(Label, __assign({}, obs, { classes: classes })) }), obs.id)); })] }))] })));
 };
 
 var css_248z$3 = "/*\n * Replace this with your own classes\n *\n * e.g.\n * .container {\n * }\n*/\n";
@@ -513,11 +517,14 @@ var Error = function (props) {
     return (jsx("div", __assign({ className: styles$3['container'] }, { children: jsx("h1", { children: "Welcome to Error!" }) })));
 };
 
-var CommonTaxaLabel = function (data) { return (jsxs("div", __assign({ className: styles$4.obsLabel }, { children: [jsx("h3", { children: data.taxonCommonName || data.taxonName }), jsx("label", __assign({ className: styles$4.count }, { children: numberWithCommas(data.obsCount) }))] }))); };
+var CommonTaxaLabel = function (data) {
+    var _a;
+    return (jsxs("div", __assign({ className: styles$4.obsLabel }, { children: [jsx("h3", __assign({ className: (_a = data.classes) === null || _a === void 0 ? void 0 : _a.observationLabelTitle }, { children: data.taxonCommonName || data.taxonName })), jsx("label", __assign({ className: styles$4.count }, { children: numberWithCommas(data.obsCount) }))] })));
+};
 var CommonTaxa = function (_a) {
-    var year = _a.year, source = _a.source, taxonId = _a.taxonId, placeId = _a.placeId, _b = _a.perPage, perPage = _b === void 0 ? PER_PAGE : _b, data = _a.data, dataUrl = _a.dataUrl, components = _a.components, className = _a.className;
-    var _c = useState(function () { return (source === DataSource.dataProp) ? data : []; }), taxa = _c[0], setTaxa = _c[1];
-    var _d = useState(false), loading = _d[0], setLoading = _d[1];
+    var year = _a.year, source = _a.source, taxonId = _a.taxonId, placeId = _a.placeId, _b = _a.perPage, perPage = _b === void 0 ? PER_PAGE : _b, _c = _a.itemWidth, itemWidth = _c === void 0 ? DEFAULT_ITEM_WIDTH : _c, data = _a.data, dataUrl = _a.dataUrl, components = _a.components, classes = _a.classes, className = _a.className, tabDesc = _a.tabDesc;
+    var _d = useState(function () { return (source === DataSource.dataProp) ? data : []; }), taxa = _d[0], setTaxa = _d[1];
+    var _e = useState(false), loading = _e[0], setLoading = _e[1];
     useEffect(function () {
         if (source !== DataSource.autoLoad) {
             return;
@@ -576,18 +583,25 @@ var CommonTaxa = function (_a) {
     var Load = (components === null || components === void 0 ? void 0 : components.loader) ? components.loader : Loader;
     var Label = (components === null || components === void 0 ? void 0 : components.label) ? components.label : CommonTaxaLabel;
     (components === null || components === void 0 ? void 0 : components.error) ? components.error : Error;
-    var classes = styles$4.panel;
+    var elClasses = styles$4.panel;
     if (className) {
-        classes += " ".concat(className);
+        elClasses += " ".concat(className);
+    }
+    var descClasses = styles$4.tabDesc;
+    if (elClasses === null || elClasses === void 0 ? void 0 : elClasses.tabDesc) {
+        descClasses += " ".concat(elClasses.tabDesc);
     }
-    return (jsxs("div", __assign({ className: classes }, { children: [jsx(Load, { loading: loading }), !loading && taxa.length === 0 && jsx(NoResults, {}), jsx("div", __assign({ className: styles$4.grid }, { children: taxa.map(function (data) { return (jsx(Observation, __assign({ imageUrl: data.imageUrl.replace(/square/, "medium"), linkUrl: "".concat(BASE_URL, "/").concat(data.id) }, { children: jsx(Label, __assign({}, data)) }), data.id)); }) }))] })));
+    return (jsxs("div", __assign({ className: elClasses }, { children: [tabDesc && jsx("p", __assign({ className: descClasses }, { children: tabDesc })), jsx(Load, { loading: loading }), !loading && taxa.length === 0 && jsx(NoResults, {}), jsx("div", __assign({ className: styles$4.grid, style: { gridTemplateColumns: "repeat(auto-fit, minmax(".concat(itemWidth, "px, 1fr))") } }, { children: taxa.map(function (data) { return (jsx(Observation, __assign({ imageUrl: data.imageUrl.replace(/square/, "medium"), itemWidth: itemWidth, linkUrl: "".concat(BASE_URL, "/").concat(data.id) }, { children: jsx(Label, __assign({}, data, { classes: classes })) }), data.id)); }) }))] })));
 };
 
-var FavouritesLabel = function (data) { return (jsxs("div", __assign({ className: styles$4.obsLabel }, { children: [jsx("h3", { children: data.taxonCommonName || data.taxonName }), jsx("div", { children: data.observerUsername }), jsx("div", { children: formatDate(data.obsDate) }), jsx("label", __assign({ className: styles$4.count }, { children: data.numFaves }))] }))); };
+var FavouritesLabel = function (data) {
+    var _a, _b, _c;
+    return (jsxs("div", __assign({ className: styles$4.obsLabel }, { children: [jsx("h3", __assign({ className: (_a = data.classes) === null || _a === void 0 ? void 0 : _a.observationLabelTitle }, { children: data.taxonCommonName || data.taxonName })), jsx("div", __assign({ className: (_b = data.classes) === null || _b === void 0 ? void 0 : _b.observationLabelTitle }, { children: data.observerUsername })), jsx("div", __assign({ className: (_c = data.classes) === null || _c === void 0 ? void 0 : _c.observationLabelDate }, { children: formatDate(data.obsDate) })), jsx("label", __assign({ className: styles$4.count }, { children: data.numFaves }))] })));
+};
 var Favourites = function (_a) {
-    var year = _a.year, source = _a.source, taxonId = _a.taxonId, placeId = _a.placeId, data = _a.data, dataUrl = _a.dataUrl, components = _a.components, className = _a.className, _b = _a.perPage, perPage = _b === void 0 ? PER_PAGE : _b;
-    var _c = useState(function () { return (source === DataSource.dataProp) ? data : []; }), observations = _c[0], setObservations = _c[1];
-    var _d = useState(false), loading = _d[0], setLoading = _d[1];
+    var year = _a.year, source = _a.source, taxonId = _a.taxonId, placeId = _a.placeId, data = _a.data, dataUrl = _a.dataUrl, components = _a.components, className = _a.className, tabDesc = _a.tabDesc, classes = _a.classes, _b = _a.itemWidth, itemWidth = _b === void 0 ? DEFAULT_ITEM_WIDTH : _b, _c = _a.perPage, perPage = _c === void 0 ? PER_PAGE : _c;
+    var _d = useState(function () { return (source === DataSource.dataProp) ? data : []; }), observations = _d[0], setObservations = _d[1];
+    var _e = useState(false), loading = _e[0], setLoading = _e[1];
     useEffect(function () {
         if (source !== DataSource.autoLoad) {
             return;
@@ -645,11 +659,15 @@ var Favourites = function (_a) {
     }, [source, dataUrl]);
     var Load = (components === null || components === void 0 ? void 0 : components.loader) ? components.loader : Loader;
     var Label = (components === null || components === void 0 ? void 0 : components.label) ? components.label : FavouritesLabel;
-    var classes = styles$4.panel;
+    var elClasses = styles$4.panel;
     if (className) {
-        classes += " ".concat(className);
+        elClasses += " ".concat(className);
     }
-    return (jsxs("div", __assign({ className: classes }, { children: [jsx(Load, { loading: loading }), !loading && observations.length === 0 && jsx(NoResults, {}), jsx("div", __assign({ className: styles$4.grid }, { children: observations.map(function (obs) { return (jsx(Observation, __assign({ imageUrl: obs.imageUrl.replace(/square/, "medium"), linkUrl: obs.obsUrl }, { children: jsx(Label, __assign({}, obs)) }), obs.id)); }) }))] })));
+    var descClasses = styles$4.tabDesc;
+    if (classes === null || classes === void 0 ? void 0 : classes.tabDesc) {
+        descClasses += " ".concat(classes.tabDesc);
+    }
+    return (jsxs("div", __assign({ className: elClasses }, { children: [tabDesc && jsx("p", __assign({ className: descClasses }, { children: tabDesc })), jsx(Load, { loading: loading }), !loading && observations.length === 0 && jsx(NoResults, {}), jsx("div", __assign({ className: styles$4.grid, style: { gridTemplateColumns: "repeat(auto-fit, minmax(".concat(itemWidth, "px, 1fr))") } }, { children: observations.map(function (obs) { return (jsx(Observation, __assign({ imageUrl: obs.imageUrl.replace(/square/, "medium"), itemWidth: itemWidth, linkUrl: obs.obsUrl }, { children: jsx(Label, __assign({}, obs, { classes: classes })) }), obs.id)); }) }))] })));
 };
 
 var css_248z$2 = ".summary-module_summaryPage__NMmsj {\n  position: relative; }\n  .summary-module_summaryPage__NMmsj section {\n    display: flex; }\n\n.summary-module_top__TKW0j {\n  list-style-type: none;\n  margin: 0;\n  padding: 0; }\n  .summary-module_top__TKW0j .summary-module_avatar__16ZeD, .summary-module_top__TKW0j .summary-module_noAvatar__OsMWn {\n    margin-right: 10px;\n    border-radius: 20px;\n    width: 40px;\n    height: 40px; }\n  .summary-module_top__TKW0j .summary-module_noAvatar__OsMWn {\n    display: inline-block;\n    background-color: #efefef; }\n  .summary-module_top__TKW0j h3 {\n    flex: 1;\n    color: black; }\n  .summary-module_top__TKW0j label {\n    flex: 0;\n    background-color: #efefef;\n    color: #666666;\n    padding: 2px 8px;\n    margin-top: 6px;\n    border-radius: 3px;\n    font-weight: bold;\n    font-size: 16px; }\n  .summary-module_top__TKW0j li {\n    border-radius: 3px; }\n    .summary-module_top__TKW0j li a {\n      display: flex;\n      align-items: center;\n      text-decoration: none; }\n    .summary-module_top__TKW0j li:hover {\n      background-color: #efefef; }\n\n.summary-module_countSummary__Xc2Kd {\n  list-style-type: none;\n  line-height: 28px;\n  font-size: 16px;\n  padding: 0;\n  margin: 0 0 30px; }\n\n.summary-module_seasonalityBlock__BL8L- {\n  flex: 3; }\n\n.summary-module_observersBlock__0wnbm {\n  flex: 1;\n  margin-left: 40px;\n  margin-bottom: -40px; }\n\n@media screen and (max-width: 800px) {\n  .summary-module_summaryPage__NMmsj section {\n    display: block; }\n  .summary-module_seasonalityBlock__BL8L- {\n    height: 250px;\n    margin-bottom: 80px; }\n  .summary-module_observersBlock__0wnbm {\n    margin-left: 0; } }\n";
@@ -657,8 +675,12 @@ var styles$2 = {"summaryPage":"summary-module_summaryPage__NMmsj","top":"summary
 styleInject(css_248z$2);
 
 var ObserverList = function (_a) {
-    var observers = _a.observers;
-    return (jsx("ul", __assign({ className: styles$2.top }, { children: observers.map(function (obs) { return (jsx("li", { children: jsxs("a", __assign({ href: "".concat(BASE_URL, "/people/").concat(obs.userName), target: "_blank", rel: "noreferrer" }, { children: [obs.iconUrl ? jsx("img", { src: obs.iconUrl || "", className: styles$2.avatar, alt: "User icon" }) :
+    var observers = _a.observers, _b = _a.className, className = _b === void 0 ? '' : _b;
+    var classes = styles$2.top;
+    if (className) {
+        classes += " ".concat(className);
+    }
+    return (jsx("ul", __assign({ className: classes }, { children: observers.map(function (obs) { return (jsx("li", { children: jsxs("a", __assign({ href: "".concat(BASE_URL, "/people/").concat(obs.userName), target: "_blank", rel: "noreferrer" }, { children: [obs.iconUrl ? jsx("img", { src: obs.iconUrl || "", className: styles$2.avatar, alt: "User icon" }) :
                         jsx("div", { className: styles$2.noAvatar }), jsx("h3", { children: obs.userName }), jsx("label", { children: numberWithCommas(obs.numObservations) })] })) }, obs.id)); }) })));
 };
 
@@ -691,7 +713,7 @@ var SeasonalityGraph = function (_a) {
 
 var Summary = function (_a) {
     var _b, _c, _d;
-    var source = _a.source; _a.data; var dataUrl = _a.dataUrl, taxonId = _a.taxonId, placeId = _a.placeId, year = _a.year;
+    var source = _a.source; _a.data; var dataUrl = _a.dataUrl, taxonId = _a.taxonId, placeId = _a.placeId, year = _a.year, classes = _a.classes, tabDesc = _a.tabDesc;
     var _e = useState({}), summaryData = _e[0], setSummaryData = _e[1];
     var _f = useState(false), loading = _f[0], setLoading = _f[1];
     useEffect(function () {
@@ -749,7 +771,15 @@ var Summary = function (_a) {
             });
         }); })();
     }, [source, dataUrl]);
-    return (jsxs("div", __assign({ className: styles$2.summaryPage }, { children: [jsx(Loader, { loading: loading }), jsxs("ul", __assign({ className: styles$2.countSummary }, { children: [jsxs("li", { children: ["Total number of observers: ", jsx("b", { children: ((_b = summaryData.observers) === null || _b === void 0 ? void 0 : _b.totalCount) ? numberWithCommas(summaryData.observers.totalCount) : "" })] }), jsxs("li", { children: ["Total number of observations: ", jsx("b", { children: ((_c = summaryData.observations) === null || _c === void 0 ? void 0 : _c.totalCount) ? numberWithCommas(summaryData.observations.totalCount) : "" })] })] })), jsxs("section", { children: [jsxs("div", __assign({ className: styles$2.seasonalityBlock }, { children: [jsx("h1", { children: "Seasonality" }), summaryData.seasonalityData && jsx(SeasonalityGraph, { data: summaryData.seasonalityData.monthOfYear })] })), jsxs("div", __assign({ className: styles$2.observersBlock }, { children: [jsx("h1", { children: "Top observers" }), ((_d = summaryData.observers) === null || _d === void 0 ? void 0 : _d.top) && jsx(ObserverList, { observers: summaryData.observers.top })] }))] })] })));
+    var countSummaryClasses = styles$2.countSummary;
+    if (classes === null || classes === void 0 ? void 0 : classes.statsCountSummary) {
+        countSummaryClasses += " ".concat(classes.statsCountSummary);
+    }
+    var descClasses = styles$2.tabDesc;
+    if (classes === null || classes === void 0 ? void 0 : classes.tabDesc) {
+        descClasses += " ".concat(classes.tabDesc);
+    }
+    return (jsxs("div", __assign({ className: styles$2.summaryPage }, { children: [tabDesc && jsx("p", __assign({ className: descClasses }, { children: tabDesc })), jsx(Loader, { loading: loading }), jsxs("ul", __assign({ className: countSummaryClasses }, { children: [jsxs("li", { children: ["Total number of observers: ", jsx("b", { children: ((_b = summaryData.observers) === null || _b === void 0 ? void 0 : _b.totalCount) ? numberWithCommas(summaryData.observers.totalCount) : "" })] }), jsxs("li", { children: ["Total number of observations: ", jsx("b", { children: ((_c = summaryData.observations) === null || _c === void 0 ? void 0 : _c.totalCount) ? numberWithCommas(summaryData.observations.totalCount) : "" })] })] })), jsxs("section", { children: [jsxs("div", __assign({ className: styles$2.seasonalityBlock }, { children: [jsx("h1", { children: "Seasonality" }), summaryData.seasonalityData && jsx(SeasonalityGraph, { data: summaryData.seasonalityData.monthOfYear })] })), jsxs("div", __assign({ className: styles$2.observersBlock }, { children: [jsx("h1", { children: "Top observers" }), ((_d = summaryData.observers) === null || _d === void 0 ? void 0 : _d.top) && jsx(ObserverList, { observers: summaryData.observers.top, className: classes === null || classes === void 0 ? void 0 : classes.observersList })] }))] })] })));
 };
 
 var css_248z$1 = ".year-dropdown-module_dropdown__iD9sj {\n  font-size: 18px; }\n";
@@ -800,26 +830,34 @@ var useFeatureTitles = function (features) {
 };
 
 var Tabs = function (_a) {
-    var selectedTab = _a.selectedTab, onChangeTab = _a.onChangeTab, features = _a.features;
+    var selectedTab = _a.selectedTab, onChangeTab = _a.onChangeTab, features = _a.features, className = _a.className;
     var titles = useFeatureTitles(features);
-    return (jsxs("ul", __assign({ className: styles.tabs }, { children: [features.recentObservations && (jsx("li", __assign({ onClick: function () { return onChangeTab(Tab.recent); }, className: selectedTab === Tab.recent ? styles.selected : "" }, { children: titles[Tab.recent] }))), features.commonTaxa && (jsx("li", __assign({ onClick: function () { return onChangeTab(Tab.commonTaxa); }, className: selectedTab === Tab.commonTaxa ? styles.selected : "" }, { children: titles[Tab.commonTaxa] }))), features.favourites && (jsx("li", __assign({ onClick: function () { return onChangeTab(Tab.favourites); }, className: selectedTab === Tab.favourites ? styles.selected : "" }, { children: titles[Tab.favourites] }))), features.stats && (jsx("li", __assign({ onClick: function () { return onChangeTab(Tab.stats); }, className: selectedTab === Tab.stats ? styles.selected : "" }, { children: titles[Tab.stats] })))] })));
+    var classes = styles.tabs;
+    if (className) {
+        classes += " ".concat(className);
+    }
+    return (jsxs("ul", __assign({ className: classes }, { children: [features.recentObservations && (jsx("li", __assign({ onClick: function () { return onChangeTab(Tab.recent); }, className: selectedTab === Tab.recent ? styles.selected : "" }, { children: titles[Tab.recent] }))), features.commonTaxa && (jsx("li", __assign({ onClick: function () { return onChangeTab(Tab.commonTaxa); }, className: selectedTab === Tab.commonTaxa ? styles.selected : "" }, { children: titles[Tab.commonTaxa] }))), features.favourites && (jsx("li", __assign({ onClick: function () { return onChangeTab(Tab.favourites); }, className: selectedTab === Tab.favourites ? styles.selected : "" }, { children: titles[Tab.favourites] }))), features.stats && (jsx("li", __assign({ onClick: function () { return onChangeTab(Tab.stats); }, className: selectedTab === Tab.stats ? styles.selected : "" }, { children: titles[Tab.stats] })))] })));
 };
 
 var TaxonPanel = function (_a) {
-    var taxonId = _a.taxonId, placeId = _a.placeId, dataSource = _a.dataSource, config = _a.config, baseURL = _a.baseURL;
+    var taxonId = _a.taxonId, placeId = _a.placeId, dataSource = _a.dataSource, config = _a.config, baseUrl = _a.baseUrl, itemWidth = _a.itemWidth, classes = _a.classes, tabDescs = _a.tabDescs;
     var _b = useState(Tab.recent), tab = _b[0], setTab = _b[1];
     var _c = useState("all"), year = _c[0], setYear = _c[1];
     var titles = useFeatureTitles(config.features);
-    var _d = useState(function () { return config.taxa.find(function (i) { return i.taxonId === taxonId; }); }), taxonInfo = _d[0]; _d[1];
-    var _e = useState(function () { return config.places.find(function (i) { return i.placeId === placeId; }); }), placeInfo = _e[0]; _e[1];
+    var taxonInfo = useState(function () { return config.taxa.find(function (i) { return i.taxonId === taxonId; }); })[0];
+    var placeInfo = useState(function () { return config.places.find(function (i) { return i.placeId === placeId; }); })[0];
+    console.log("...", classes);
     var getCurrentTab = function () {
         switch (tab) {
             case Tab.recent: {
                 var props = {
-                    source: dataSource
+                    source: dataSource,
+                    itemWidth: itemWidth,
+                    classes: classes,
+                    tabDesc: tabDescs === null || tabDescs === void 0 ? void 0 : tabDescs.recentDesc
                 };
                 if (dataSource === DataSource.url) {
-                    props.dataUrl = baseURL + '/' + getSourceFile(Feature.recentObservations, taxonInfo, placeInfo);
+                    props.dataUrl = baseUrl + '/' + getSourceFile(Feature.recentObservations, taxonInfo, placeInfo);
                 }
                 else {
                     props.placeId = placeId;
@@ -829,11 +867,14 @@ var TaxonPanel = function (_a) {
             }
             case Tab.commonTaxa: {
                 var props = {
+                    classes: classes,
                     source: dataSource,
-                    year: year
+                    itemWidth: itemWidth,
+                    year: year,
+                    tabDesc: tabDescs === null || tabDescs === void 0 ? void 0 : tabDescs.mostCommonDesc
                 };
                 if (dataSource === DataSource.url) {
-                    props.dataUrl = baseURL + '/' + getSourceFile(Feature.commonTaxa, taxonInfo, placeInfo, year);
+                    props.dataUrl = baseUrl + '/' + getSourceFile(Feature.commonTaxa, taxonInfo, placeInfo, year);
                 }
                 else {
                     props.placeId = placeId;
@@ -843,11 +884,14 @@ var TaxonPanel = function (_a) {
             }
             case Tab.favourites: {
                 var props = {
+                    classes: classes,
+                    itemWidth: itemWidth,
                     source: dataSource,
-                    year: year
+                    year: year,
+                    tabDesc: tabDescs === null || tabDescs === void 0 ? void 0 : tabDescs.mostFavouritedDesc
                 };
                 if (dataSource === DataSource.url) {
-                    props.dataUrl = baseURL + '/' + getSourceFile(Feature.favourites, taxonInfo, placeInfo, year);
+                    props.dataUrl = baseUrl + '/' + getSourceFile(Feature.favourites, taxonInfo, placeInfo, year);
                 }
                 else {
                     props.placeId = placeId;
@@ -857,11 +901,13 @@ var TaxonPanel = function (_a) {
             }
             case Tab.stats: {
                 var props = {
+                    classes: classes,
                     source: dataSource,
-                    year: year
+                    year: year,
+                    tabDesc: tabDescs === null || tabDescs === void 0 ? void 0 : tabDescs.generalStatsDesc
                 };
                 if (dataSource === DataSource.url) {
-                    props.dataUrl = baseURL + '/' + getSourceFile(Feature.stats, taxonInfo, placeInfo, year);
+                    props.dataUrl = baseUrl + '/' + getSourceFile(Feature.stats, taxonInfo, placeInfo, year);
                 }
                 else {
                     props.placeId = placeId;
@@ -871,7 +917,9 @@ var TaxonPanel = function (_a) {
             }
         }
     };
-    return (jsxs("div", __assign({ className: styles$4.page }, { children: [jsx(Tabs, { selectedTab: tab, onChangeTab: setTab, features: config.features }), jsxs("div", { children: [tab !== Tab.recent && (jsx("div", __assign({ style: { float: "right" } }, { children: jsx(Years, { value: year, onChange: setYear }) }))), jsx("h1", { children: titles[tab] })] }), getCurrentTab()] })));
+    var tabsClass = (classes === null || classes === void 0 ? void 0 : classes.tabs) || '';
+    var yearDropdownClass = (classes === null || classes === void 0 ? void 0 : classes.yearsDropdown) || '';
+    return (jsxs("div", __assign({ className: styles$4.page }, { children: [jsx(Tabs, { selectedTab: tab, onChangeTab: setTab, features: config.features, className: tabsClass }), jsxs("div", { children: [tab !== Tab.recent && (jsx("div", __assign({ style: { float: "right" }, className: yearDropdownClass }, { children: jsx(Years, { value: year, onChange: setYear }) }))), jsx("h1", __assign({ className: classes === null || classes === void 0 ? void 0 : classes.pageHeadings }, { children: titles[tab] }))] }), getCurrentTab()] })));
 };
 
 export { constants as C, CommonTaxa, CommonTaxaLabel, DataSource, Favourites, FavouritesLabel, Feature, Observation, RecentObservationLabel, RecentObservations, SeasonalityGraph, Summary, Tab, TaxonPanel as default, formatDate, getCommonTaxa, getCurrentYear, getFavourites, getObservationSummary, getObserverSummary, getRecentObservations, getSeasonalityData, getSourceFile, getSummary, numberWithCommas };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@imerss/inat-components",
-  "version": "1.1.1",
+  "version": "1.1.2",
   "main": "dist/index.js",
   "types": "./dist/index.d.ts",
   "scripts": {

package/src/__shared/api/favourites.ts

@@ -30,14 +30,9 @@ export const getFavourites = async ({ year, taxonId, placeId, perPage }: Favouri
         url += `&d1=${year}-01-01&d2=${year}-12-31`;
     }
 
-    const response = await fetch(url, {
-        // method: 'GET',
-        // headers: {
-        //     Accept: 'application/json'
-        // }
-    });
-
+    const response = await fetch(url);
     const resp = await response.json();
+
     const sortedTaxa = resp.results.filter((i: any) => i.faves.length > 0).sort((a: any, b: any) => {
         if (a.faves.length > b.faves.length) {
             return -1;
@@ -51,7 +46,7 @@ export const getFavourites = async ({ year, taxonId, placeId, perPage }: Favouri
         totalResults: resp.total_results,
         results: sortedTaxa.map((row: any) => ({
             id: row.id,
-            imageUrl: row.taxon?.default_photo?.square_url || "",
+            imageUrl: row.observation_photos[0].photo.url || "",
             obsDate: row.observed_on_string,
             obsUrl: row.uri,
             taxonName: row.taxon.name || "",

package/src/__shared/constants.ts

@@ -2,3 +2,4 @@ export const BASE_API_URL = 'https://api.inaturalist.org';
 export const PER_PAGE = 100;
 export const BASE_URL = "https://www.inaturalist.org"; // /people/name_here
 export const ERROR_LOG_FILENAME = "inat-components-error.log";
+export const DEFAULT_ITEM_WIDTH = 150;

package/src/__shared/typings.ts

@@ -40,6 +40,18 @@ export enum Tab {
 	stats = "stats"
 }
 
+export type BaseClasses = {
+	tabs?: string;
+	yearsDropdown?: string;
+	pageHeadings?: string;
+	observationLabelTitle?: string;
+	observationLabelDate?: string;
+	observationLabelName?: string;
+	observersList?: string;
+	statsCountSummary?: string;
+	tabDesc?: string;
+}
+
 export type BaseComponentProps = {
 	taxonId?: number;
 	placeId?: number;
@@ -49,11 +61,14 @@ export type BaseComponentProps = {
 	data?: any;
 	dataUrl?: string;
 	className?: string;
+	itemWidth?: number;
 	components?: {
 		label?: any;
 		error?: any;
 		loader?: any;
 	};
+	classes?: BaseClasses;
+	tabDesc?: string;
 };
 
 export type TaxaConfig = {
@@ -66,4 +81,11 @@ export type PlaceConfig = {
 	label: string;
 	short: string;
 	placeId: number;
-}
+}
+
+export type TabDescs = {
+	recentDesc?: string;
+	mostCommonDesc?: string;
+	mostFavouritedDesc?: string;
+	generalStatsDesc?: string;
+}

package/src/__shared/utils/configUtils.ts

@@ -3,7 +3,11 @@ import {Feature, PlaceConfig, TaxaConfig} from "../typings";
 /*
  * Note that right now the source filenames aren't configurable.
  */
-export const getSourceFile = (api: Feature, taxonInfo: TaxaConfig, placeInfo: PlaceConfig, year?: string | number): string => {
+export const getSourceFile = (api: Feature, taxonInfo?: TaxaConfig, placeInfo?: PlaceConfig, year?: string | number): string => {
+	if (!taxonInfo || !placeInfo) {
+		return '';
+	}
+
 	const yearStr = year === "all" ? "allyears" : year;
 
 	let filename = "";

package/src/components/common-taxa/common-taxa.tsx

@@ -1,5 +1,5 @@
 import React, {useEffect, useState} from 'react';
-import {numberWithCommas, C, CommonTaxData, getCommonTaxa, BaseComponentProps, DataSource} from "../../__shared";
+import {numberWithCommas, C, CommonTaxData, getCommonTaxa, BaseComponentProps, BaseClasses, DataSource} from "../../__shared";
 import {Observation} from "../observation/observation";
 import Loader from "../loader/loader";
 import Error from "../error/error";
@@ -10,9 +10,9 @@ export type CommonTaxaProps = BaseComponentProps & {
 	year: string | number;
 }
 
-export const CommonTaxaLabel = (data: CommonTaxData) => (
+export const CommonTaxaLabel = (data: CommonTaxData & { classes: BaseClasses }) => (
 	<div className={styles.obsLabel}>
-		<h3>{data.taxonCommonName || data.taxonName}</h3>
+		<h3 className={data.classes?.observationLabelTitle}>{data.taxonCommonName || data.taxonName}</h3>
 		<label className={styles.count}>{numberWithCommas(data.obsCount)}</label>
 	</div>
 );
@@ -23,10 +23,13 @@ export const CommonTaxa = ({
 	taxonId,
 	placeId,
 	perPage = C.PER_PAGE,
+	itemWidth = C.DEFAULT_ITEM_WIDTH,
 	data,
 	dataUrl,
 	components,
-	className
+	classes,
+	className,
+	tabDesc
 }: CommonTaxaProps) => {
 	const [taxa, setTaxa] = useState<any>(() => (source === DataSource.dataProp) ? data : []);
 	const [loading, setLoading] = useState(false);
@@ -75,22 +78,28 @@ export const CommonTaxa = ({
 	const Label = components?.label ? components.label as any : CommonTaxaLabel;
 	const ErrorMsg = components?.error ? components.error as any : Error;
 
-	let classes = styles.panel;
+	let elClasses = styles.panel;
 	if (className) {
-		classes += ` ${className}`;
+		elClasses += ` ${className}`;
+	}
+	let descClasses = styles.tabDesc;
+	if (elClasses?.tabDesc) {
+		descClasses += ` ${elClasses.tabDesc}`;
 	}
 
 	return (
-		<div className={classes}>
+		<div className={elClasses}>
+			{tabDesc && <p className={descClasses}>{tabDesc}</p>}
 			<Load loading={loading}/>
 			{!loading && taxa.length === 0 && <NoResults/>}
-			<div className={styles.grid}>
+			<div className={styles.grid} style={{ gridTemplateColumns: `repeat(auto-fit, minmax(${itemWidth}px, 1fr))` }}>
 				{taxa.map((data: CommonTaxData) => (
 					<Observation
 						key={data.id}
 						imageUrl={data.imageUrl.replace(/square/, "medium")}
+						itemWidth={itemWidth}
 						linkUrl={`${C.BASE_URL}/${data.id}`}>
-						<Label {...data} />
+						<Label {...data} classes={classes} />
 					</Observation>
 				))}
 			</div>

package/src/components/favourites/favourites.tsx

@@ -1,19 +1,20 @@
 import React, {useEffect, useState} from "react";
-import {formatDate, C, getFavourites, FavouritesData, BaseComponentProps, DataSource} from "../../__shared";
+import {formatDate, C, getFavourites, FavouritesData, BaseComponentProps, DataSource, BaseClasses} from "../../__shared";
 import {Observation} from "../observation/observation";
 import Loader from "../loader/loader";
 import {NoResults} from "../no-results/no-results";
 import generalStyles from "../shared/css/general.module.scss";
+import styles from "../shared/css/general.module.scss";
 
 export type FavouritesProps = BaseComponentProps & {
 	year: string | number;
 }
 
-export const FavouritesLabel = (data: FavouritesData) => (
+export const FavouritesLabel = (data: FavouritesData & { classes: BaseClasses }) => (
 	<div className={generalStyles.obsLabel}>
-		<h3>{data.taxonCommonName || data.taxonName}</h3>
-		<div>{data.observerUsername}</div>
-		<div>{formatDate(data.obsDate)}</div>
+		<h3 className={data.classes?.observationLabelTitle}>{data.taxonCommonName || data.taxonName}</h3>
+		<div className={data.classes?.observationLabelTitle}>{data.observerUsername}</div>
+		<div className={data.classes?.observationLabelDate}>{formatDate(data.obsDate)}</div>
 		<label className={generalStyles.count}>{data.numFaves}</label>
 	</div>
 );
@@ -27,6 +28,9 @@ export const Favourites = ({
 	dataUrl,
 	components,
 	className,
+	tabDesc,
+	classes,
+	itemWidth = C.DEFAULT_ITEM_WIDTH,
 	perPage = C.PER_PAGE
 }: FavouritesProps) => {
 	const [observations, setObservations] = useState<any>(() => (source === DataSource.dataProp) ? data : []);
@@ -75,21 +79,27 @@ export const Favourites = ({
 	const Load = components?.loader ? components.loader as any : Loader;
 	const Label = components?.label ? components.label as any : FavouritesLabel;
 
-	let classes = generalStyles.panel;
+	let elClasses = generalStyles.panel;
 	if (className) {
-		classes += ` ${className}`;
+		elClasses += ` ${className}`;
+	}
+	let descClasses = styles.tabDesc;
+	if (classes?.tabDesc) {
+		descClasses += ` ${classes.tabDesc}`;
 	}
 	return (
-		<div className={classes}>
+		<div className={elClasses}>
+			{tabDesc && <p className={descClasses}>{tabDesc}</p>}
 			<Load loading={loading}/>
 			{!loading && observations.length === 0 && <NoResults/>}
-			<div className={generalStyles.grid}>
+			<div className={generalStyles.grid} style={{ gridTemplateColumns: `repeat(auto-fit, minmax(${itemWidth}px, 1fr))` }}>
 				{observations.map((obs: any) => (
 					<Observation
 						key={obs.id}
 						imageUrl={obs.imageUrl.replace(/square/, "medium")}
+						itemWidth={itemWidth}
 						linkUrl={obs.obsUrl}>
-						<Label {...obs} />
+						<Label {...obs} classes={classes} />
 					</Observation>
 				))}
 			</div>

package/src/components/observation/observation.tsx

@@ -4,10 +4,11 @@ import styles from "./observation.module.scss";
 export type ObservationProps = {
 	imageUrl: string;
 	linkUrl: string;
+	itemWidth: number;
 	children: any;
 };
 
-export const Observation = ({imageUrl, linkUrl, children}: ObservationProps) => {
+export const Observation = ({imageUrl, linkUrl, itemWidth, children}: ObservationProps) => {
 	const gotoObservation = useCallback(() => {
 		window.open(linkUrl);
 	}, [linkUrl]);
@@ -15,8 +16,8 @@ export const Observation = ({imageUrl, linkUrl, children}: ObservationProps) =>
 	return (
 		<article className={styles.obs} onClick={gotoObservation}>
 			<div style={{
-				width: 200,
-				height: 200,
+				width: itemWidth,
+				height: itemWidth,
 				overflow: "hidden",
 				borderRadius: 5,
 				background: `url(${imageUrl}) 50% 50% no-repeat`,

package/src/components/recent-observations/recent-observations.tsx

@@ -1,5 +1,13 @@
 import React, {useEffect, useState} from "react";
-import {formatDate, C, getRecentObservations, RecentObservationData, BaseComponentProps, DataSource} from "../../__shared";
+import {
+	formatDate,
+	C,
+	getRecentObservations,
+	RecentObservationData,
+	BaseComponentProps,
+	DataSource,
+	BaseClasses
+} from "../../__shared";
 import {Observation} from "../observation/observation";
 import Loader from "../loader/loader";
 import {NoResults} from "../no-results/no-results";
@@ -7,11 +15,11 @@ import styles from "../shared/css/general.module.scss";
 
 export type RecentObservationsProps = BaseComponentProps;
 
-export const RecentObservationLabel = (obs: RecentObservationData) => (
+export const RecentObservationLabel = (obs: RecentObservationData & { classes: BaseClasses }) => (
 	<div className={styles.obsLabel}>
-		<h3>{obs.taxonCommonName || obs.taxonName}</h3>
-		<div>{formatDate(obs.obsDate)}</div>
-		<div>
+		<h3 className={obs.classes?.observationLabelTitle}>{obs.taxonCommonName || obs.taxonName}</h3>
+		<div className={obs.classes?.observationLabelDate}>{formatDate(obs.obsDate)}</div>
+		<div className={obs.classes?.observationLabelName}>
 			<a href={`${C.BASE_URL}/people/${obs.observerUsername}`}
 			   target="_blank"
 			   rel="noreferrer"
@@ -29,8 +37,11 @@ export const RecentObservations = ({
 	dataUrl,
 	source = DataSource.autoLoad,
 	perPage = C.PER_PAGE,
+	itemWidth = C.DEFAULT_ITEM_WIDTH,
 	components,
-	className
+	className,
+	classes,
+	tabDesc
 }: RecentObservationsProps) => {
 	const [loading, setLoading] = useState(false);
 	const [observations, setObservations] = useState<any>(() => (source === DataSource.dataProp) ? data : []);
@@ -78,21 +89,27 @@ export const RecentObservations = ({
 	const Load = components?.loader ? components.loader as any : Loader;
 	const Label = components?.label ? components.label as any : RecentObservationLabel;
 
-	let classes = styles.panel;
+	let componentClasses = styles.panel;
 	if (className) {
-		classes += ` ${className}`;
+		componentClasses += ` ${className}`;
+	}
+	let descClasses = styles.tabDesc;
+	if (classes?.tabDesc) {
+		descClasses += ` ${classes.tabDesc}`;
 	}
 	return (
-		<div className={classes}>
+		<div className={componentClasses}>
+			{tabDesc && <p className={descClasses}>{tabDesc}</p>}
 			<Load loading={loading}/>
-			<div className={styles.grid}>
+			<div className={styles.grid} style={{ gridTemplateColumns: `repeat(auto-fit, minmax(${itemWidth}px, 1fr))` }}>
 				{!loading && observations.length === 0 && <NoResults/>}
 				{observations.map((obs: RecentObservationData) => (
 					<Observation
 						key={obs.id}
 						imageUrl={obs.imageUrl.replace(/square/, "medium")}
+						itemWidth={itemWidth}
 						linkUrl={obs.obsUrl}>
-						<Label {...obs} />
+						<Label {...obs} classes={classes} />
 					</Observation>
 				))}
 			</div>

package/src/components/shared/css/general.module.scss

@@ -16,7 +16,6 @@
 
 .grid {
   display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr) );
   width: 100%;
   grid-gap: 8px;
   text-align: center;
@@ -67,3 +66,8 @@
   font-weight: bold;
   font-size: 18px;
 }
+
+.tabDesc {
+  font-size: 14px;
+  margin-bottom: 20px;
+}

package/src/components/summary/ObserverList.tsx

@@ -2,17 +2,23 @@ import React from "react";
 import {numberWithCommas, Observer, C} from "../../__shared";
 import styles from "./summary.module.scss";
 
-export const ObserverList = ({observers}: { observers: Observer[] }) => (
-	<ul className={styles.top}>
-		{observers.map((obs) => (
-			<li key={obs.id}>
-				<a href={`${C.BASE_URL}/people/${obs.userName}`} target="_blank" rel="noreferrer">
-					{obs.iconUrl ? <img src={obs.iconUrl || ""} className={styles.avatar} alt="User icon"/> :
-						<div className={styles.noAvatar}/>}
-					<h3>{obs.userName}</h3>
-					<label>{numberWithCommas(obs.numObservations)}</label>
-				</a>
-			</li>
-		))}
-	</ul>
-);
+export const ObserverList = ({observers, className = ''}: { observers: Observer[], className?: string }) => {
+	let classes = styles.top;
+	if (className) {
+		classes += ` ${className}`;
+	}
+	return (
+		<ul className={classes}>
+			{observers.map((obs) => (
+				<li key={obs.id}>
+					<a href={`${C.BASE_URL}/people/${obs.userName}`} target="_blank" rel="noreferrer">
+						{obs.iconUrl ? <img src={obs.iconUrl || ""} className={styles.avatar} alt="User icon"/> :
+							<div className={styles.noAvatar}/>}
+						<h3>{obs.userName}</h3>
+						<label>{numberWithCommas(obs.numObservations)}</label>
+					</a>
+				</li>
+			))}
+		</ul>
+	);
+};

package/src/components/summary/summary.tsx

@@ -1,5 +1,5 @@
 import React, {useEffect, useState} from "react";
-import {numberWithCommas, DataSource, getSummary, FavouritesRespData} from "../../__shared";
+import {BaseClasses, numberWithCommas, DataSource, getSummary, FavouritesRespData} from "../../__shared";
 import { ObserverList } from './ObserverList';
 import Loader from "../loader/loader";
 import {SeasonalityGraph} from "../seasonality-graph/seasonality-graph";
@@ -10,11 +10,13 @@ export type SummaryProps = {
     taxonId: number;
     placeId: number;
     year: string | number;
-    data?: FavouritesRespData; /// TODO
+    data?: FavouritesRespData;
     dataUrl?: string;
+    classes?: BaseClasses;
+    tabDesc?: string;
 };
 
-export const Summary = ({ source, data, dataUrl, taxonId, placeId, year }: SummaryProps) => {
+export const Summary = ({ source, data, dataUrl, taxonId, placeId, year, classes, tabDesc }: SummaryProps) => {
     const [summaryData, setSummaryData] = useState<any>({});
     const [loading, setLoading] = useState(false);
 
@@ -58,24 +60,31 @@ export const Summary = ({ source, data, dataUrl, taxonId, placeId, year }: Summa
         })();
     }, [source, dataUrl]);
 
+    let countSummaryClasses = styles.countSummary;
+    if (classes?.statsCountSummary) {
+        countSummaryClasses += ` ${classes.statsCountSummary}`;
+    }
+    let descClasses = styles.tabDesc;
+    if (classes?.tabDesc) {
+        descClasses += ` ${classes.tabDesc}`;
+    }
+
     return (
         <div className={styles.summaryPage}>
+            {tabDesc && <p className={descClasses}>{tabDesc}</p>}
             <Loader loading={loading} />
-
-            <ul className={styles.countSummary}>
+            <ul className={countSummaryClasses}>
                 <li>Total number of observers: <b>{summaryData.observers?.totalCount ? numberWithCommas(summaryData.observers.totalCount): ""}</b></li>
                 <li>Total number of observations: <b>{summaryData.observations?.totalCount ? numberWithCommas(summaryData.observations.totalCount): ""}</b></li>
             </ul>
-
             <section>
                 <div className={styles.seasonalityBlock}>
                     <h1>Seasonality</h1>
                     {summaryData.seasonalityData && <SeasonalityGraph data={summaryData.seasonalityData.monthOfYear} />}
                 </div>
-
                 <div className={styles.observersBlock}>
                     <h1>Top observers</h1>
-                    {summaryData.observers?.top && <ObserverList observers={summaryData.observers.top} />}
+                    {summaryData.observers?.top && <ObserverList observers={summaryData.observers.top} className={classes?.observersList} />}
                 </div>
             </section>
         </div>

package/src/components/tabs/tabs.tsx

@@ -6,14 +6,20 @@ import {useFeatureTitles} from "../hooks/hooks";
 export type TabsProps = {
     selectedTab: Tab;
     onChangeTab: (tab: Tab) => void;
-    features: any; // TODO
+    features: any;
+    className?: string;
 }
 
-const Tabs = ({ selectedTab, onChangeTab, features }: TabsProps) => {
+const Tabs = ({ selectedTab, onChangeTab, features, className }: TabsProps) => {
     const titles = useFeatureTitles(features);
 
+    let classes = styles.tabs;
+    if (className) {
+        classes += ` ${className}`;
+    }
+
     return (
-        <ul className={styles.tabs}>
+        <ul className={classes}>
             {features.recentObservations && (
                 <li onClick={() => onChangeTab(Tab.recent)}
                     className={selectedTab === Tab.recent ? styles.selected : ""}>

package/src/components/taxon-panel/taxon-panel.tsx

@@ -1,5 +1,5 @@
 import React, {useState} from "react";
-import {getSourceFile, Tab, DataSource, Feature} from "../../__shared";
+import {getSourceFile, Tab, DataSource, Feature, ConfigFile, BaseClasses, TabDescs} from "../../__shared";
 import {RecentObservations, RecentObservationsProps} from '../recent-observations/recent-observations';
 import {CommonTaxa} from '../common-taxa/common-taxa';
 import {Favourites} from "../favourites/favourites"
@@ -9,21 +9,36 @@ import Tabs from "../tabs/tabs";
 import {useFeatureTitles} from "../hooks/hooks";
 import styles from '../shared/css/general.module.scss';
 
-const TaxonPanel = ({ taxonId, placeId, dataSource, config, baseURL }: any) => {
+export type TaxonPanelProps = {
+    taxonId: number;
+    placeId: number;
+    dataSource: DataSource;
+    config: ConfigFile;
+    baseUrl: string;
+    itemWidth?: number;
+    classes?: BaseClasses;
+    tabDescs?: TabDescs;
+}
+
+const TaxonPanel = ({ taxonId, placeId, dataSource, config, baseUrl, itemWidth, classes, tabDescs }: TaxonPanelProps) => {
     const [tab, setTab] = useState(Tab.recent);
     const [year, setYear] = useState<string>("all");
     const titles = useFeatureTitles(config.features);
-    const [taxonInfo, setTaxonInfo] = useState(() => config.taxa.find((i) => i.taxonId === taxonId));
-    const [placeInfo, setPlaceInfo] = useState(() => config.places.find((i) => i.placeId === placeId));
+    const [taxonInfo] = useState(() => config.taxa.find((i) => i.taxonId === taxonId));
+    const [placeInfo] = useState(() => config.places.find((i) => i.placeId === placeId));
 
+    console.log("..." , classes);
     const getCurrentTab = () => {
         switch (tab) {
             case Tab.recent: {
                 const props: Partial<RecentObservationsProps> = {
-                    source: dataSource
+                    source: dataSource,
+                    itemWidth,
+                    classes,
+                    tabDesc: tabDescs?.recentDesc
                 };
                 if (dataSource === DataSource.url) {
-                    props.dataUrl = baseURL + '/' + getSourceFile(Feature.recentObservations, taxonInfo, placeInfo);
+                    props.dataUrl = baseUrl + '/' + getSourceFile(Feature.recentObservations, taxonInfo, placeInfo);
                 } else {
                     props.placeId = placeId;
                     props.taxonId = taxonId;
@@ -35,11 +50,14 @@ const TaxonPanel = ({ taxonId, placeId, dataSource, config, baseURL }: any) => {
 
             case Tab.commonTaxa: {
                 const props: any = {
+                    classes,
                     source: dataSource,
-                    year
+                    itemWidth,
+                    year,
+                    tabDesc: tabDescs?.mostCommonDesc
                 };
                 if (dataSource === DataSource.url) {
-                    props.dataUrl = baseURL + '/' + getSourceFile(Feature.commonTaxa, taxonInfo, placeInfo, year);
+                    props.dataUrl = baseUrl + '/' + getSourceFile(Feature.commonTaxa, taxonInfo, placeInfo, year);
                 } else {
                     props.placeId = placeId;
                     props.taxonId = taxonId;
@@ -51,11 +69,14 @@ const TaxonPanel = ({ taxonId, placeId, dataSource, config, baseURL }: any) => {
 
             case Tab.favourites: {
                 const props: any = {
+                    classes,
+                    itemWidth,
                     source: dataSource,
-                    year
+                    year,
+                    tabDesc: tabDescs?.mostFavouritedDesc
                 };
                 if (dataSource === DataSource.url) {
-                    props.dataUrl = baseURL + '/' + getSourceFile(Feature.favourites, taxonInfo, placeInfo, year);
+                    props.dataUrl = baseUrl + '/' + getSourceFile(Feature.favourites, taxonInfo, placeInfo, year);
                 } else {
                     props.placeId = placeId;
                     props.taxonId = taxonId;
@@ -67,11 +88,13 @@ const TaxonPanel = ({ taxonId, placeId, dataSource, config, baseURL }: any) => {
 
             case Tab.stats: {
                 const props: any = {
+                    classes,
                     source: dataSource,
-                    year
+                    year,
+                    tabDesc: tabDescs?.generalStatsDesc
                 };
                 if (dataSource === DataSource.url) {
-                    props.dataUrl = baseURL + '/' + getSourceFile(Feature.stats, taxonInfo, placeInfo, year);
+                    props.dataUrl = baseUrl + '/' + getSourceFile(Feature.stats, taxonInfo, placeInfo, year);
                 } else {
                     props.placeId = placeId;
                     props.taxonId = taxonId;
@@ -81,20 +104,24 @@ const TaxonPanel = ({ taxonId, placeId, dataSource, config, baseURL }: any) => {
         }
     };
 
+    const tabsClass = classes?.tabs || '';
+    const yearDropdownClass = classes?.yearsDropdown || '';
+
     return (
         <div className={styles.page}>
             <Tabs
                 selectedTab={tab}
                 onChangeTab={setTab}
                 features={config.features}
+                className={tabsClass}
             />
             <div>
                 {tab !== Tab.recent && (
-                    <div style={{ float: "right" }}>
+                    <div style={{ float: "right" }} className={yearDropdownClass}>
                         <Years value={year} onChange={setYear} />
                     </div>
                 )}
-                <h1>{titles[tab]}</h1>
+                <h1 className={classes?.pageHeadings}>{titles[tab]}</h1>
             </div>
             {getCurrentTab()}
         </div>