@imerss/inat-components 2.0.1 → 3.0.0

package/package.json

@@ -1,39 +1,38 @@
 {
   "name": "@imerss/inat-components",
-  "version": "2.0.1",
+  "version": "3.0.0",
   "main": "dist/index.js",
   "types": "./dist/index.d.ts",
+  "files": [
+    "dist"
+  ],
   "license": "MIT",
   "scripts": {
     "build": "rollup -c --environment BUILD:production && cd ../inat-components-standalone && npm run build && npm run copyToInatComponentsPackage",
-    "clean": "shx rm -rf dist src/__shared",
+    "clean": "shx rm -rf dist",
     "watch": "rollup -cw"
   },
   "dependencies": {
     "date-fns": "^2.28.0",
     "isomorphic-unfetch": "^3.1.0",
-    "react-spinners": "^0.13.2",
-    "sleep-promise": "^9.1.0"
+    "react-spinners": "^0.13.2"
   },
   "peerDependencies": {
     "react": ">=18.0.0",
     "react-dom": ">=18.0.0"
   },
   "devDependencies": {
+    "@imerss/inat-components-shared": "0.0.0",
     "@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",
+    "@rollup/plugin-typescript": "^8.3.3",
     "@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.79.1",
@@ -41,8 +40,8 @@
     "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",
+    "tslib": "^2.4.0",
     "typescript": "^4.7.4"
   },
   "publishConfig": {
@@ -50,8 +49,7 @@
   },
   "eslintConfig": {
     "extends": [
-      "react-app",
-      "react-app/jest"
+      "react-app"
     ]
   },
   "browserslist": {

package/PUBLISH.md

@@ -1,13 +0,0 @@
-### Publishing new versions
-
-Here's how to publish a new version of this package.
-
-1. Go to the root of the monorepo and run `yarn install`, then `yarn boot`
-2. Update the version in `packages/inat-component`'s package.json
-3. Run `yarn build` to generate a fresh `/dist` folder (you can clean first, but the clean command currently also
-deletes __shared, so you'll need to rebuild from the root if you do that)
-
-Step 3 actually generates + copies over the result from the inat-components-standalone package, so in the dist folder 
-you should see a standalone.min.js file. All is good! 
-
-Now you can `npm publish`.

package/declaration.d.ts

@@ -1,2 +0,0 @@
-// declaration.d.ts
-declare module "*.scss";

package/public/index.html

@@ -1,20 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="utf-8" />
-    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
-    <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <meta name="theme-color" content="#000000" />
-    <meta
-      name="description"
-      content="Web site created using create-react-app"
-    />
-    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
-    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
-    <title>iNat components</title>
-  </head>
-  <body>
-    <noscript>You need to enable JavaScript to run this app.</noscript>
-    <div id="root"></div>
-  </body>
-</html>

package/public/manifest.json

@@ -1,25 +0,0 @@
-{
-  "short_name": "React App",
-  "name": "Create React App Sample",
-  "icons": [
-    {
-      "src": "favicon.ico",
-      "sizes": "64x64 32x32 24x24 16x16",
-      "type": "image/x-icon"
-    },
-    {
-      "src": "logo192.png",
-      "type": "image/png",
-      "sizes": "192x192"
-    },
-    {
-      "src": "logo512.png",
-      "type": "image/png",
-      "sizes": "512x512"
-    }
-  ],
-  "start_url": ".",
-  "display": "standalone",
-  "theme_color": "#000000",
-  "background_color": "#ffffff"
-}

package/public/robots.txt

@@ -1,3 +0,0 @@
-# https://www.robotstxt.org/robotstxt.html
-User-agent: *
-Disallow:

package/public/standalone.html

@@ -1,55 +0,0 @@
-<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

@@ -1,47 +0,0 @@
-import typescript from "@rollup/plugin-typescript";
-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",
-        output: {
-            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",
-            "fs",
-            "react-charts",
-            "date-fns",
-            "react-spinners",
-            "react-spinners/MoonLoader.js",
-            "isomorphic-unfetch",
-            "react/jsx-runtime"
-        ],
-        plugins: [
-            postcss({
-                modules: true,
-                plugins: []
-            }),
-            typescript()
-        ],
-    },
-
-    // rolls up all typings for export
-    {
-        input: "src/index.ts",
-        output: {
-            dir: "dist",
-            format: "es"
-        },
-        plugins: [
-            dts()
-        ]
-    }
-];

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

@@ -1,57 +0,0 @@
-import * as C from "../constants";
-import fetch from "isomorphic-unfetch";
-
-export type CommonTaxaCallProps = {
-    year: string | number;
-    taxonId: string | number;
-    placeId: string | number;
-    numResults: number;
-};
-
-export type CommonTaxData = {
-    id: number;
-    imageUrl: string;
-    taxonName: string;
-    taxonCommonName: string;
-    obsCount: number;
-}
-
-export type CommonTaxaRespData = {
-    totalResults: number;
-    results: [CommonTaxData]
-}
-
-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`;
-    }
-
-    const response = await fetch(url, {
-        method: 'GET',
-        headers: {
-            Accept: 'application/json'
-        }
-    });
-
-    const resp = await response.json();
-    const sortedTaxa = resp.results.sort((a: any, b: any) => {
-        if (a.count > b.count) {
-            return -1;
-        } else if (a.count < b.count) {
-            return 1;
-        }
-        return 0;
-    });
-
-    return {
-        totalResults: resp.total_results,
-        results: sortedTaxa.map((row: any) => ({
-            id: row.taxon.id,
-            imageUrl: row.taxon?.default_photo?.square_url || "",
-            obsCount: row.count,
-            taxonName: row.taxon.name || "",
-            taxonCommonName: row.taxon.preferred_common_name
-        }))
-    };
-};

package/src/__shared/api/favourites.ts

@@ -1,57 +0,0 @@
-import * as C from "../constants";
-import fetch from "isomorphic-unfetch";
-
-export type FavouritesCallProps = {
-    year: string | number;
-    taxonId: string | number;
-    placeId: string | number;
-    numResults: number;
-};
-
-export type FavouritesData = {
-    id: number;
-    imageUrl: string;
-    taxonName: string;
-    taxonCommonName: string;
-    obsDate: string;
-    obsCount: number;
-    observerUsername: string;
-    numFaves: number;
-}
-
-export type FavouritesRespData = {
-    totalResults: number;
-    results: [FavouritesData]
-}
-
-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);
-    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;
-        } else if (a.faves.length < b.faves.length) {
-            return 1;
-        }
-        return 0;
-    });
-
-    return {
-        totalResults: resp.total_results,
-        results: sortedTaxa.map((row: any) => ({
-            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
-        }))
-    };
-};

package/src/__shared/api/index.ts

@@ -1,4 +0,0 @@
-export * from "./common-taxa";
-export * from "./favourites";
-export * from "./recent-observations";
-export * from "./summary";

package/src/__shared/api/recent-observations.ts

@@ -1,44 +0,0 @@
-import fetch from "isomorphic-unfetch";
-import * as C from "../constants";
-
-export type RecentObservationsCallProps = {
-    taxonId: string | number;
-    placeId: string | number;
-    numResults: number;
-};
-
-export type RecentObservationData = {
-    id: number;
-    imageUrl: string;
-    obsUrl: string;
-    obsDate: string;
-    taxonName: string;
-    taxonCommonName: string;
-    observerUsername: string;
-}
-
-export type RecentObservationsRespData = {
-    totalResults: number;
-    results: [RecentObservationData]
-}
-
-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();
-
-    return {
-        totalResults: obs.total_results,
-        results: obs.results.map((obs: any) => {
-            return {
-                id: obs.id,
-                imageUrl: obs.observation_photos[0].photo.url,
-                obsUrl: obs.uri,
-                obsDate: obs.observed_on_string,
-                taxonName: obs?.taxon?.name || "",
-                taxonCommonName: obs?.taxon.preferred_common_name,
-                observerUsername: obs.user.login
-            }
-        })
-    };
-};

package/src/__shared/api/summary.ts

@@ -1,86 +0,0 @@
-import fetch from "isomorphic-unfetch";
-import * as C from '../constants';
-
-export type SummaryApiProps = {
-    taxonId: number;
-    placeId: number;
-    year: string | number;
-}
-
-export const getSummary = async ({ taxonId, placeId, year }: SummaryApiProps): Promise<any> => {
-    const observers = await getObserverSummary(taxonId, placeId, year);
-    const observations = await getObservationSummary(taxonId, placeId, year);
-    const seasonalityData = await getSeasonalityData(taxonId, placeId, year);
-
-    return {
-        observers,
-        observations,
-        seasonalityData
-    };
-};
-
-export type Observer = {
-    id: number;
-    userName: string;
-    numObservations: number;
-    iconUrl: string | null;
-}
-export type SummaryData = {
-    totalCount: number;
-    top: [Observer];
-}
-
-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`;
-    }
-
-    const response = await fetch(url);
-    const data = await response.json();
-
-    return {
-        totalCount: data.total_results,
-        top: data.results.map((result: any) => ({
-            id: result.user.id,
-            userName: result.user.login,
-            numObservations: result.observation_count,
-            iconUrl: result.user.icon_url
-        }))
-    };
-};
-
-export const getObservationSummary = async(taxonId: number, placeId: number, year: string | number) => {
-    let url = `${C.BASE_API_URL}/v1/observations?photos=true&per_page=1&taxon_id=${taxonId}&place_id=${placeId}&order=desc&order_by=observed_on`;
-    if (year !== "all") {
-        url += `&d1=${year}-01-01&d2=${year}-12-31`;
-    }
-
-    const response = await fetch(url);
-    const data = await response.json();
-
-    return {
-        totalCount: data.total_results
-    };
-}
-
-export type SeasonalityData = {
-    monthOfYear: {
-        [monthNum: string]: number
-    }
-}
-
-export const getSeasonalityData = async (taxonId: number, placeId: number, year: string | number): Promise<SeasonalityData> => {
-    let url = `${C.BASE_API_URL}/v1/observations/histogram?verifiable=true&taxon_id=${taxonId}&place_id=${placeId}&locale=en-US&date_field=observed&interval=month_of_year`;
-    if (year !== "all") {
-        url += `&d1=${year}-01-01&d2=${year}-12-31`;
-    }
-
-    const response = await fetch(url);
-    const resp = await response.json();
-
-    return {
-        monthOfYear: resp.results.month_of_year
-    };
-};

package/src/__shared/constants.ts

@@ -1,6 +0,0 @@
-export const BASE_API_URL = 'https://api.inaturalist.org';
-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 +0,0 @@
-export * from "./api";
-export * from "./utils";
-export * as C from "./constants";
-export * from "./typings";

package/src/__shared/typings.ts

@@ -1,83 +0,0 @@
-export enum Feature {
-	commonTaxa = "commonTaxa",
-	favourites = "favourites",
-	recentObservations = "recentObservations",
-	stats = "stats"
-}
-
-export enum DataSourceEnum {
-	autoLoad = "autoLoad",
-	url = "url"
-}
-
-export type DataSource = `${DataSourceEnum}`;
-
-// used for places + taxons
-export type ItemConfig = {
-	id: number;
-	str: string;
-}
-
-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;
-	numResults?: number;
-	source?: DataSource;
-	dataUrl?: string;
-	className?: string;
-	itemWidth?: number;
-	components?: {
-		label?: any;
-		error?: any;
-		loader?: any;
-	};
-	generalClasses?: GeneralClasses;
-	tabDesc?: string;
-};
-
-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 TaxonPanelFeatures = (RecentObservationsConfig|CommonTaxaConfig|FavouritesConfig|StatsConfig)[];

package/src/__shared/utils/configUtils.ts

@@ -1,25 +0,0 @@
-import { Feature, ItemConfig } from "../typings";
-
-/*
- * Note that right now the source filenames aren't configurable.
- */
-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 = `${taxon.str}-${place.str}-recent.json`;
-	} else if (api === Feature.commonTaxa) {
-		filename = `${taxon.str}-${place.str}-${yearStr}-commonTaxa.json`;
-	} else if (api === Feature.favourites) {
-		filename = `${taxon.str}-${place.str}-${yearStr}-favourites.json`;
-	} else if (api === Feature.stats) {
-		filename = `${taxon.str}-${place.str}-${yearStr}-stats.json`;
-	}
-
-	return filename;
-};

package/src/__shared/utils/dateUtils.ts

@@ -1,14 +0,0 @@
-import { format } from "date-fns";
-
-export const getCurrentYear = () => new Date().getFullYear();
-
-// not 100% this shows the date in the right timezone, but it's fine for BC
-export const formatDate = (date: string, dateFormat = "MMM do, h:mm b"): any => {
-	let formattedDate = "";
-	try {
-		formattedDate = format(Date.parse(date), dateFormat);
-	} catch (e) {
-		console.log("Failed to parse date: ", date);
-	}
-	return formattedDate;
-}

package/src/__shared/utils/index.ts

@@ -1,3 +0,0 @@
-export * from "./configUtils";
-export * from "./dateUtils";
-export * from "./numberUtils";

package/src/__shared/utils/numberUtils.ts

@@ -1 +0,0 @@
-export const numberWithCommas = (x: number) => (x || 0).toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");

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

@@ -1,14 +0,0 @@
-import {render} from '@testing-library/react';
-
-import { CommonTaxa } from '../common-taxa';
-
-const defaultProps = {
-	year: 2022
-};
-
-describe('CommonTaxa', () => {
-	it('should render successfully', () => {
-		const {baseElement} = render(<CommonTaxa {...defaultProps} />);
-		expect(baseElement).toBeTruthy();
-	});
-});