@imerss/inat-components 1.1.1 → 2.0.0

package/package.json

@@ -1,10 +1,12 @@
 {
   "name": "@imerss/inat-components",
-  "version": "1.1.1",
+  "version": "2.0.0",
   "main": "dist/index.js",
   "types": "./dist/index.d.ts",
+  "license": "MIT",
   "scripts": {
-    "build": "rollup -c",
+    "build": "rollup -c --environment BUILD:production && cd ../inat-components-standalone && npm run build && npm run copyToInatComponentsPackage",
+    "clean": "shx rm -rf dist src/__shared",
     "watch": "rollup -cw"
   },
   "dependencies": {
@@ -14,23 +16,33 @@
     "sleep-promise": "^9.1.0"
   },
   "peerDependencies": {
-    "react": ">=16.8.0",
-    "react-dom": ">=16.8.0"
+    "react": ">=18.0.0",
+    "react-dom": ">=18.0.0"
   },
   "devDependencies": {
     "@modular-css/rollup": "^28.2.2",
     "@rollup/plugin-typescript": "^8.3.3",
+    "@rollup/plugin-commonjs": "^24.1.0",
+    "@rollup/plugin-json": "^6.0.0",
+    "@rollup/plugin-node-resolve": "^15.0.2",
+    "@rollup/plugin-replace": "^5.0.2",
     "@testing-library/react": "^13.3.0",
     "@types/cli-progress": "^3.11.0",
+    "@types/isomorphic-fetch": "0.0.36",
     "@types/jest": "^28.1.4",
+    "@types/react": "^18.0.38",
+    "@types/react-dom": "^18.0.5",
     "jest": "^28.1.2",
     "node-sass": "^7.0.1",
     "postcss": "^8.4.14",
     "react-charts": "3.0.0-beta.38",
-    "rollup": "^2.75.7",
+    "rollup": "^2.79.1",
     "rollup-plugin-dts": "^4.2.2",
     "rollup-plugin-postcss": "^4.0.2",
+    "rollup-plugin-terser": "^7.0.2",
+    "rollup-plugin-visualizer": "^5.9.0",
     "tslib": "^2.4.0",
+    "shx": "0.3.4",
     "typescript": "^4.7.4"
   },
   "publishConfig": {

package/public/standalone.html

@@ -0,0 +1,55 @@
+<html>
+<body>
+
+<h1>Standalone example</h1>
+
+<div id="inat-components-el"></div>
+
+<script>
+inatComponents.initTaxonPanel("inat-components-el", {
+    taxon: {
+        id: 47157,
+        str: "leps"
+    },
+    place: {
+        id: 7085,
+        str: "bc"
+    },
+    dataSource: "url",
+    dataSourceBaseUrl: "https://sisyphean.ca/inat",
+    itemWidth: 180,
+    features: {
+        recentObservations: {
+            numResults: 100,
+            desc: "This page lists the most recent butterfly and moth observations made in BC. Click on any of them to go to the inaturalist site for more information.",
+        },
+        commonTaxa: {
+            numResults: 100,
+            numYears: 10,
+            desc: "This page lists the most commonly reported species in BC. You can use the dropdown at the top right to filter the results to a particular year."
+        },
+        favourites: {
+            numResults: 100,
+            numYears: 10,
+            desc: "Any time iNaturalist users encounter an observation they like, they can choose to \"favourite\" it. This page lists the most favourited moth and butterfly observations made in BC."
+        },
+        stats: {
+            numTopObservers: 10,
+            observersListClass: "inat-observers-list",
+            statsCountSummaryClass: "inat-stats-count-summary",
+        }
+    },
+    generalClasses: {
+        tabsElement: "inat-tabs",
+        yearsDropdown: "inat-years-dropdown",
+        pageHeadings: "inat-page-headings",
+        observationLabelTitle: "inat-observation-label-title",
+        observationLabelDate: "inat-observation-label-data",
+        observationLabelName: "inat-observation-label-name",
+        tabDesc: "inat-tab-desc"
+    }
+});
+</script>
+
+</body>
+</html>

package/rollup.config.js

@@ -3,6 +3,7 @@ import postcss from "rollup-plugin-postcss";
 import dts from "rollup-plugin-dts";
 
 export default [
+
     // front-end components + generate() node utils method, exposed as "@imerss/inat-components"
     {
         input: "src/index.ts",
@@ -10,8 +11,18 @@ export default [
             dir: "dist",
             format: "es"
         },
+
+        // these let's rollup know that these are external scripts + can be excluded from the final bundle without
+        // any warnings. TODO: check these are peer deps.
         external: [
-            "react"
+            "react",
+            "fs",
+            "react-charts",
+            "date-fns",
+            "react-spinners",
+            "react-spinners/MoonLoader.js",
+            "isomorphic-unfetch",
+            "react/jsx-runtime"
         ],
         plugins: [
             postcss({
@@ -19,10 +30,10 @@ export default [
                 plugins: []
             }),
             typescript()
-        ]
+        ],
     },
 
-    // not beautiful, but rolls up all typings for export
+    // rolls up all typings for export
     {
         input: "src/index.ts",
         output: {
@@ -33,4 +44,4 @@ export default [
             dts()
         ]
     }
-];
+];

package/src/__shared/api/common-taxa.ts

@@ -5,7 +5,7 @@ export type CommonTaxaCallProps = {
     year: string | number;
     taxonId: string | number;
     placeId: string | number;
-    perPage: number;
+    numResults: number;
 };
 
 export type CommonTaxData = {
@@ -21,8 +21,8 @@ export type CommonTaxaRespData = {
     results: [CommonTaxData]
 }
 
-export const getCommonTaxa = async ({ year, taxonId, placeId, perPage }: CommonTaxaCallProps): Promise<CommonTaxaRespData> => {
-    let url = `${C.BASE_API_URL}/v1/observations/species_counts?verifiable=true&spam=false&place_id=${placeId}&taxon_id=${taxonId}&locale=en-US&per_page=${perPage}`;
+export const getCommonTaxa = async ({ year, taxonId, placeId, numResults }: CommonTaxaCallProps): Promise<CommonTaxaRespData> => {
+    let url = `${C.BASE_API_URL}/v1/observations/species_counts?verifiable=true&spam=false&place_id=${placeId}&taxon_id=${taxonId}&locale=en-US&per_page=${numResults}`;
     if (year !== "all") {
         url += `&d1=${year}-01-01&d2=${year}-12-31`;
     }

package/src/__shared/api/favourites.ts

@@ -5,7 +5,7 @@ export type FavouritesCallProps = {
     year: string | number;
     taxonId: string | number;
     placeId: string | number;
-    perPage: number;
+    numResults: number;
 };
 
 export type FavouritesData = {
@@ -24,20 +24,15 @@ export type FavouritesRespData = {
     results: [FavouritesData]
 }
 
-export const getFavourites = async ({ year, taxonId, placeId, perPage }: FavouritesCallProps): Promise<FavouritesRespData> => {
-    let url = `${C.BASE_API_URL}/v1/observations?verifiable=true&order_by=votes&order=desc&page=1&spam=false&place_id=${placeId}&taxon_id=${taxonId}&locale=en-US&per_page=${perPage}`;
+export const getFavourites = async ({ year, taxonId, placeId, numResults }: FavouritesCallProps): Promise<FavouritesRespData> => {
+    let url = `${C.BASE_API_URL}/v1/observations?verifiable=true&order_by=votes&order=desc&page=1&spam=false&place_id=${placeId}&taxon_id=${taxonId}&locale=en-US&per_page=${numResults}`;
     if (year !== "all") {
         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/api/recent-observations.ts

@@ -4,7 +4,7 @@ import * as C from "../constants";
 export type RecentObservationsCallProps = {
     taxonId: string | number;
     placeId: string | number;
-    perPage: number;
+    numResults: number;
 };
 
 export type RecentObservationData = {
@@ -22,8 +22,8 @@ export type RecentObservationsRespData = {
     results: [RecentObservationData]
 }
 
-export const getRecentObservations = async ({ taxonId, placeId, perPage }: RecentObservationsCallProps): Promise<RecentObservationsRespData> => {
-    const url = `${C.BASE_API_URL}/v1/observations?photos=true&per_page=${perPage}&taxon_id=${taxonId}&place_id=${placeId}&order=desc&order_by=observed_on`;
+export const getRecentObservations = async ({ taxonId, placeId, numResults }: RecentObservationsCallProps): Promise<RecentObservationsRespData> => {
+    const url = `${C.BASE_API_URL}/v1/observations?photos=true&per_page=${numResults}&taxon_id=${taxonId}&place_id=${placeId}&order=desc&order_by=observed_on`;
     const response = await fetch(url);
     const obs = await response.json();
 

package/src/__shared/api/summary.ts

@@ -32,6 +32,7 @@ export type SummaryData = {
 
 export const getObserverSummary = async (taxonId: number, placeId: number, year: string | number): Promise<SummaryData> => {
     let url = `${C.BASE_API_URL}/v1/observations/observers?verifiable=true&order_by=votes&order=desc&page=1&spam=false&place_id=${placeId}&taxon_id=${taxonId}&locale=en-US&per_page=10`;
+
     if (year !== "all") {
         url += `&d1=${year}-01-01&d2=${year}-12-31`;
     }

package/src/__shared/constants.ts

@@ -1,4 +1,6 @@
 export const BASE_API_URL = 'https://api.inaturalist.org';
-export const PER_PAGE = 100;
+export const NUM_RESULTS = 100;
+export const DEFAULT_NUM_YEARS = 10;
 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/index.ts

@@ -1,4 +1,4 @@
 export * from "./api";
 export * from "./utils";
 export * as C from "./constants";
-export * from "./typings";
+export * from "./typings";

package/src/__shared/typings.ts

@@ -1,69 +1,83 @@
-export type ConfigFile = {
-	taxa: TaxaConfig[];
-	places: PlaceConfig[];
-	features: {
-		[Feature.commonTaxa]?: {
-			numResults?: number;
-		};
-		[Feature.favourites]?: {
-			numResults?: number;
-			numYears?: number;
-		};
-		[Feature.recentObservations]?: {
-			numResults?: number;
-			numYears?: number;
-		};
-		[Feature.stats]?: {
-			numTopObservers?: number;
-		};
-	}
+export enum Feature {
+	commonTaxa = "commonTaxa",
+	favourites = "favourites",
+	recentObservations = "recentObservations",
+	stats = "stats"
 }
 
-export enum DataSource {
+export enum DataSourceEnum {
 	autoLoad = "autoLoad",
-	dataProp = "dataProp",
 	url = "url"
 }
 
-export enum Feature {
-	commonTaxa = "commonTaxa",
-	favourites = "favourites",
-	recentObservations = "recentObservations",
-	stats = "stats"
+export type DataSource = `${DataSourceEnum}`;
+
+// used for places + taxons
+export type ItemConfig = {
+	id: number;
+	str: string;
 }
 
-// I know this is duplicated, but it's very possible they could be different in future
-export enum Tab {
-	recent = "recent",
-	commonTaxa = "commonTaxa",
-	favourites = "favourites",
-	stats = "stats"
+export type GeneralClasses = {
+	tabsElement?: string;
+	yearsDropdown?: string;
+	pageHeadings?: string;
+	tabDesc?: string;
+	observationLabelTitle?: string;
+	observationLabelDate?: string;
+	observationLabelName?: string;
+	observationCount?: string;
 }
 
 export type BaseComponentProps = {
 	taxonId?: number;
 	placeId?: number;
-	filename?: string;
-	perPage?: number;
+	numResults?: number;
 	source?: DataSource;
-	data?: any;
 	dataUrl?: string;
 	className?: string;
+	itemWidth?: number;
 	components?: {
 		label?: any;
 		error?: any;
 		loader?: any;
 	};
+	generalClasses?: GeneralClasses;
+	tabDesc?: string;
 };
 
-export type TaxaConfig = {
-	label: string;
-	short: string;
-	taxonId: number;
+export type RecentObservationsConfig = {
+	feature: Feature.recentObservations,
+	title?: string;
+	numResults?: number;
+	desc?: string;
+	className?: string;
+}
+export type CommonTaxaConfig = {
+	feature: Feature.commonTaxa,
+	title?: string;
+	numResults?: number;
+	numYears?: number;
+	desc?: string;
+	className?: string;
+}
+export type FavouritesConfig = {
+	feature: Feature.favourites;
+	title?: string;
+	numResults?: number;
+	numYears?: number;
+	desc?: string;
+	className?: string;
 }
+export type StatsConfig = {
+	feature: Feature.stats;
+	title?: string;
+	numTopObservers?: number;
+	numYears?: number;
+	desc?: string;
+	className?: string;
+	observersListClass?: string;
+	statsCountSummaryClass?: string;
+};
 
-export type PlaceConfig = {
-	label: string;
-	short: string;
-	placeId: number;
-}
+export type TaxonPanelFeatures = (RecentObservationsConfig|CommonTaxaConfig|FavouritesConfig|StatsConfig)[];

package/src/__shared/utils/configUtils.ts

@@ -1,20 +1,24 @@
-import {Feature, PlaceConfig, TaxaConfig} from "../typings";
+import { Feature, ItemConfig } 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, taxon: ItemConfig, place: ItemConfig, year?: string | number): string => {
+	if (!taxon || !place) {
+		return '';
+	}
+
 	const yearStr = year === "all" ? "allyears" : year;
 
 	let filename = "";
 	if (api === Feature.recentObservations) {
-		filename = `${taxonInfo.short}-${placeInfo.short}-recent.json`;
+		filename = `${taxon.str}-${place.str}-recent.json`;
 	} else if (api === Feature.commonTaxa) {
-		filename = `${taxonInfo.short}-${placeInfo.short}-${yearStr}-commonTaxa.json`;
+		filename = `${taxon.str}-${place.str}-${yearStr}-commonTaxa.json`;
 	} else if (api === Feature.favourites) {
-		filename = `${taxonInfo.short}-${placeInfo.short}-${yearStr}-favourites.json`;
+		filename = `${taxon.str}-${place.str}-${yearStr}-favourites.json`;
 	} else if (api === Feature.stats) {
-		filename = `${taxonInfo.short}-${placeInfo.short}-${yearStr}-stats.json`;
+		filename = `${taxon.str}-${place.str}-${yearStr}-stats.json`;
 	}
 
 	return filename;

package/src/__shared/utils/dateUtils.ts

@@ -1,4 +1,4 @@
-import {format} from "date-fns";
+import { format } from "date-fns";
 
 export const getCurrentYear = () => new Date().getFullYear();
 

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

@@ -1,19 +1,19 @@
-import React, {useEffect, useState} from 'react';
-import {numberWithCommas, C, CommonTaxData, getCommonTaxa, BaseComponentProps, DataSource} from "../../__shared";
-import {Observation} from "../observation/observation";
+import React from 'react';
+import { numberWithCommas, C, CommonTaxData, getCommonTaxa, BaseComponentProps, GeneralClasses } from "../../__shared";
+import { Observation } from "../observation/observation";
 import Loader from "../loader/loader";
-import Error from "../error/error";
-import {NoResults} from "../no-results/no-results";
+import { NoResults } from "../no-results/no-results";
+import { useLoadSourceData } from "../../hooks/useLoadSourceData";
 import styles from "../shared/css/general.module.scss";
 
 export type CommonTaxaProps = BaseComponentProps & {
-	year: string | number;
+	year: number;
 }
 
-export const CommonTaxaLabel = (data: CommonTaxData) => (
+export const CommonTaxaLabel = (data: CommonTaxData & { classes: GeneralClasses }) => (
 	<div className={styles.obsLabel}>
-		<h3>{data.taxonCommonName || data.taxonName}</h3>
-		<label className={styles.count}>{numberWithCommas(data.obsCount)}</label>
+		<h3 className={data.classes?.observationLabelTitle}>{data.taxonCommonName || data.taxonName}</h3>
+		<label className={`${data.classes?.observationCount || ''} ${styles.count}`}>{numberWithCommas(data.obsCount)}</label>
 	</div>
 );
 
@@ -22,75 +22,49 @@ export const CommonTaxa = ({
 	source,
 	taxonId,
 	placeId,
-	perPage = C.PER_PAGE,
-	data,
+	numResults = C.NUM_RESULTS,
+	itemWidth = C.DEFAULT_ITEM_WIDTH,
 	dataUrl,
 	components,
-	className
+	generalClasses,
+	className,
+	tabDesc
 }: CommonTaxaProps) => {
-	const [taxa, setTaxa] = useState<any>(() => (source === DataSource.dataProp) ? data : []);
-	const [loading, setLoading] = useState(false);
-
-	useEffect(() => {
-		if (source !== DataSource.autoLoad) {
-			return;
-		}
-		if (!taxonId) {
-			console.error("Please supply a `taxonId` prop for the `autoLoad` source prop option.");
-			return;
-		}
-		if (!placeId) {
-			console.error("Please supply a `placeId` prop for the `autoLoad` source prop option.");
-			return;
-		}
-
-		(async () => {
-			setLoading(true);
-			const resp = await getCommonTaxa({taxonId, placeId, year, perPage});
-			setTaxa(resp.results);
-			setLoading(false);
-		})();
-	}, [source, year, placeId, taxonId, perPage]);
-
-	useEffect(() => {
-		if (source !== DataSource.url) {
-			return;
-		}
-
-		if (!dataUrl) {
-			console.error("Please supply a `dataUrl` prop for the `url` source prop option.");
-			return;
-		}
-
-		(async () => {
-			setLoading(true);
-			const obs = await fetch(dataUrl);
-			const json = await obs.json();
-			setTaxa(json.results);
-			setLoading(false);
-		})();
-	}, [source, dataUrl]);
+	const { loading, results: taxa } = useLoadSourceData({
+		taxonId,
+		placeId,
+		numResults,
+		dataUrl,
+		source,
+		year,
+		action: getCommonTaxa
+	});
 
 	const Load = components?.loader ? components.loader as any : Loader;
 	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 (generalClasses?.tabDesc) {
+		descClasses += ` ${generalClasses.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={generalClasses} />
 					</Observation>
 				))}
 			</div>

package/src/components/error/error.tsx

@@ -7,7 +7,7 @@ export interface ErrorProps {
 export const Error = (props: ErrorProps) => {
 	return (
 		<div className={styles['container']}>
-			<h1>Welcome to Error!</h1>
+			<h1>Error!</h1>
 		</div>
 	);
 };