@imerss/inat-components 2.0.0 → 3.0.0

package/src/components/summary/summary.module.scss

@@ -1,88 +0,0 @@
-.summaryPage {
-  position: relative;
-
-  section {
-    display: flex;
-  }
-}
-
-.top {
-  list-style-type: none;
-  margin: 0;
-  padding: 0;
-
-  .avatar, .noAvatar {
-    margin-right: 10px;
-    border-radius: 20px;
-    width: 40px;
-    height: 40px;
-  }
-
-  .noAvatar {
-    display: inline-block;
-    background-color: #efefef;
-  }
-
-  h3 {
-    flex: 1;
-    color: black;
-  }
-
-  label {
-    flex: 0;
-    background-color: #efefef;
-    color: #666666;
-    padding: 2px 8px;
-    margin-top: 6px;
-    border-radius: 3px;
-    font-weight: bold;
-    font-size: 16px;
-  }
-
-  li {
-    border-radius: 3px;
-
-    a {
-      display: flex;
-      align-items: center;
-      text-decoration: none;
-    }
-
-    &:hover {
-      background-color: #efefef;
-    }
-  }
-}
-
-.countSummary {
-  list-style-type: none;
-  line-height: 28px;
-  font-size: 16px;
-  padding: 0;
-  margin: 0 0 30px;
-}
-
-.seasonalityBlock {
-  flex: 3;
-}
-
-.observersBlock {
-  flex: 1;
-  margin-left: 40px;
-  margin-bottom: -40px;
-}
-
-@media screen and (max-width: 800px) {
-  .summaryPage section {
-    display: block;
-  }
-
-  .seasonalityBlock {
-    height: 250px;
-    margin-bottom: 80px;
-  }
-
-  .observersBlock {
-    margin-left: 0;
-  }
-}

package/src/components/summary/summary.tsx

@@ -1,91 +0,0 @@
-import React from "react";
-import { numberWithCommas, DataSource, getSummary, GeneralClasses } from "../../__shared";
-import { ObserverList } from './ObserverList';
-import Loader from "../loader/loader";
-import { SeasonalityGraph } from "../seasonality-graph/seasonality-graph";
-import styles from "./summary.module.scss";
-import { useLoadSourceData } from "../../hooks/useLoadSourceData";
-
-export type SummaryProps = {
-    taxonId: number;
-    placeId: number;
-    year: number;
-    source: DataSource;
-    dataUrl?: string;
-    generalClasses?: GeneralClasses;
-    className?: string;
-    tabDesc?: string;
-    observersListClass?: string;
-    statsCountSummaryClass?: string;
-};
-
-export const Summary = ({
-    source,
-    dataUrl,
-    taxonId,
-    placeId,
-    year,
-    generalClasses,
-    className,
-    tabDesc,
-    observersListClass,
-    statsCountSummaryClass
-}: SummaryProps) => {
-    const { loading, results: summaryData } = useLoadSourceData({
-        year,
-        taxonId,
-        placeId,
-        dataUrl,
-        source,
-        isSummaryData: true,
-
-        // shim to standardize the response from the `action` method with a top-level `results` property. This
-        // just lets the useLoadSourceData hook work for all tab components
-        action: async (data) => {
-            const results = await getSummary(data);
-
-            return { results };
-        }
-    });
-
-    let countSummaryClasses = styles.countSummary;
-    if (statsCountSummaryClass) {
-        countSummaryClasses += ` ${statsCountSummaryClass}`;
-    }
-    let descClasses = styles.tabDesc;
-    if (generalClasses?.tabDesc) {
-        descClasses += ` ${generalClasses.tabDesc}`;
-    }
-
-    let classList = styles.summaryPage;
-    if (className) {
-        classList += ` ${className}`;
-    }
-
-    return (
-        <div className={classList}>
-            {tabDesc && <p className={descClasses}>{tabDesc}</p>}
-            <Loader loading={loading} />
-            <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}
-                            className={observersListClass}
-                            generalClasses={generalClasses}
-                        />
-                    )}
-                </div>
-            </section>
-        </div>
-    );
-}

package/src/components/tabs/__tests__/tabs.test.tsx

@@ -1,16 +0,0 @@
-import {render} from '@testing-library/react';
-import Tabs from '../tabs';
-import {Tab} from "../../../index";
-
-const defaultProps = {
-	selectedTab: Tab.recent,
-	onChangeTab: () => null,
-	features: {}
-};
-
-describe('Tabs', () => {
-	it('should render successfully', () => {
-		const {baseElement} = render(<Tabs {...defaultProps} />);
-		expect(baseElement).toBeTruthy();
-	});
-});

package/src/components/tabs/tabs.module.scss

@@ -1,28 +0,0 @@
-.tabs {
-  display: flex;
-  flex-direction: row;
-  list-style: none;
-  font-size: 18px;
-  padding: 0;
-  margin-bottom: 30px;
-
-  li {
-    margin: 0 20px;
-    padding: 4px 20px;
-    cursor: pointer;
-    color: #999999;
-    transition: all 0.2s ease-in-out;
-
-    &.selected, &:hover {
-      border-bottom: 5px solid #0099cc;
-      color: black;
-    }
-  }
-}
-
-@media screen and (max-width: 600px) {
-  .tabs li {
-    margin: 0 5px;
-    padding: 4px 6px;
-  }
-}

package/src/components/tabs/tabs.tsx

@@ -1,65 +0,0 @@
-import React from "react";
-import { Feature, TaxonPanelFeatures } from "../../__shared";
-import styles from "./tabs.module.scss";
-import { useFeatureTitles } from "../hooks/hooks";
-
-export type TabsProps = {
-    selectedTab: Feature;
-    onChangeTab: (tab: Feature) => void;
-    features: TaxonPanelFeatures;
-    className?: string;
-}
-
-const Tabs = ({ selectedTab, onChangeTab, features, className }: TabsProps) => {
-    const titles = useFeatureTitles(features);
-
-    let classes = styles.tabs;
-    if (className) {
-        classes += ` ${className}`;
-    }
-
-    const items = features.map((item) => {
-        if (item.feature == Feature.recentObservations) {
-            return (
-                <li key={Feature.recentObservations}
-                    onClick={() => onChangeTab(Feature.recentObservations)}
-                    className={selectedTab === Feature.recentObservations ? styles.selected : ""}>
-                    {titles[Feature.recentObservations]}
-                </li>
-            );
-        } else if (item.feature == Feature.commonTaxa) {
-            return (
-                <li key={Feature.commonTaxa}
-                    onClick={() => onChangeTab(Feature.commonTaxa)}
-                    className={selectedTab === Feature.commonTaxa ? styles.selected : ""}>
-                    {titles[Feature.commonTaxa]}
-                </li>
-            );
-        } else if (item.feature == Feature.favourites) {
-            return (
-                <li key={Feature.favourites}
-                    onClick={() => onChangeTab(Feature.favourites)}
-                    className={selectedTab === Feature.favourites ? styles.selected : ""}>
-                    {titles[Feature.favourites]}
-                </li>
-            );
-        } else if (item.feature == Feature.stats) {
-            return (
-                <li key={Feature.stats} onClick={() => onChangeTab(Feature.stats)} className={selectedTab === Feature.stats ? styles.selected : ""}>
-                    {titles[Feature.stats]}
-                </li>
-            );
-        }
-
-        // possibly a user has included something wacky
-        return undefined;
-    });
-
-    return (
-        <ul className={classes}>
-            {items}
-        </ul>
-    );
-}
-
-export default Tabs;

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

@@ -1,10 +0,0 @@
-import {render} from '@testing-library/react';
-
-import TaxonPanel from '../taxon-panel';
-
-describe('TaxonPanel', () => {
-	it('should render successfully', () => {
-		const {baseElement} = render(<TaxonPanel />);
-		expect(baseElement).toBeTruthy();
-	});
-});

package/src/components/taxon-panel/taxon-panel.module.scss

@@ -1,7 +0,0 @@
-/*
- * Replace this with your own classes
- *
- * e.g.
- * .container {
- * }
-*/

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

@@ -1,110 +0,0 @@
-import React, { useMemo, useState } from "react";
-import { C, getSourceFile, DataSource, DataSourceEnum, Feature, GeneralClasses, TaxonPanelFeatures } from "../../__shared";
-import { RecentObservations } from '../recent-observations/recent-observations';
-import { CommonTaxa } from '../common-taxa/common-taxa';
-import { Favourites } from "../favourites/favourites"
-import { Summary } from "../summary/summary";
-import Years from "../year-dropdown/year-dropdown";
-import Tabs from "../tabs/tabs";
-import { convertFeaturesToObj, useFeatureTitles } from "../hooks/hooks";
-import styles from "../shared/css/general.module.scss";
-
-export type TaxonPanelProps = {
-    taxon: {
-        id: number;
-        str: string;
-    };
-    place: {
-        id: number;
-        str: string;
-    }
-    dataSourceBaseUrl: string;
-    dataSource: DataSource;
-    features: TaxonPanelFeatures;
-    generalClasses: GeneralClasses;
-    itemWidth?: number;
-}
-
-const TaxonPanel = ({ taxon, place, features, dataSource, dataSourceBaseUrl, itemWidth, generalClasses }: TaxonPanelProps) => {
-    const [tab, setTab] = useState(features[0].feature);
-    const [year, setYear] = useState<string>("all");
-    const featuresObj = useMemo(() => {
-        return convertFeaturesToObj(features);
-    }, [features]);
-    const titles = useFeatureTitles(featuresObj);
-
-    const getProps = (feature: Feature): any => {
-        const props: any = {
-            source: dataSource,
-            itemWidth,
-            tabDesc: featuresObj[feature]?.desc,
-            generalClasses,
-            className: featuresObj[feature]?.className
-        };
-        if (dataSource === DataSourceEnum.url) {
-            props.dataUrl = dataSourceBaseUrl + '/' + getSourceFile(feature, taxon, place, year);
-        } else {
-            props.placeId = place.id;
-            props.taxonId = taxon.id;
-        }
-
-        if (feature !== Feature.stats) {
-            props.numResults = featuresObj[feature]?.numResults;
-        }
-
-        if (feature !== Feature.recentObservations) {
-            props.year = year;
-        }
-
-        return props;
-    };
-
-    const getCurrentTab = () => {
-        switch (tab) {
-            case Feature.recentObservations:
-                return <RecentObservations {...getProps(Feature.recentObservations)} />;
-            case Feature.commonTaxa:
-                return <CommonTaxa {...getProps(Feature.commonTaxa)} />;
-            case Feature.favourites:
-                return <Favourites {...getProps(Feature.favourites)} />;
-
-            case Feature.stats:
-                return (
-                    <Summary
-                        {...getProps(Feature.stats)}
-                        observersListClass={featuresObj[Feature.stats]?.observersListClass}
-                        statsCountSummaryClass={featuresObj[Feature.stats]?.statsCountSummaryClass}
-                    />
-                );
-        }
-    };
-
-    const tabsClass = generalClasses?.tabsElement || '';
-    const yearDropdownClass = generalClasses?.yearsDropdown || '';
-
-    return (
-        <div className={styles.page}>
-            {features.length > 1 && <Tabs
-                selectedTab={tab}
-                onChangeTab={setTab}
-                features={features}
-                className={tabsClass}
-            />}
-            <div>
-                {tab !== Feature.recentObservations && (
-                    <div style={{ float: "right" }} className={yearDropdownClass}>
-                        <Years
-                            value={year}
-                            numYears={featuresObj[tab]?.numYears || C.DEFAULT_NUM_YEARS}
-                            onChange={setYear}
-                        />
-                    </div>
-                )}
-                <h1 className={generalClasses?.pageHeadings}>{titles[tab]}</h1>
-            </div>
-            {getCurrentTab()}
-        </div>
-    );
-}
-
-export default TaxonPanel;

package/src/components/year-dropdown/__tests__/year-dropdown.test.tsx

@@ -1,14 +0,0 @@
-import {render} from '@testing-library/react';
-import YearDropdown from '../year-dropdown';
-
-const defaultProps = {
-	value: "1",
-	onChange: () => null
-};
-
-describe('YearDropdown', () => {
-	it('should render successfully', () => {
-		const {baseElement} = render(<YearDropdown {...defaultProps} />);
-		expect(baseElement).toBeTruthy();
-	});
-});

package/src/components/year-dropdown/year-dropdown.module.scss

@@ -1,3 +0,0 @@
-.dropdown {
-  font-size: 18px;
-}

package/src/components/year-dropdown/year-dropdown.tsx

@@ -1,37 +0,0 @@
-import React, { useEffect, useState } from "react";
-import { getCurrentYear } from "../../__shared";
-import styles from "./year-dropdown.module.scss";
-
-interface YearsProps {
-    value: string;
-    onChange: (year: string) => void;
-    numYears: number;
-    className?: string;
-}
-
-const Years = ({ value, onChange, numYears, className }: YearsProps) => {
-    const [years, setYears] = useState([]);
-
-    useEffect(() => {
-        const currentYear = getCurrentYear();
-        const years: any = [];
-        for (let i = currentYear; i>currentYear-numYears; i--) {
-            years.push(i);
-        }
-        setYears(years);
-    }, [numYears]);
-
-    let classes = styles.dropdown;
-    if (className) {
-        classes += ` ${className}`;
-    }
-
-    return (
-        <select className={classes} onChange={(e) => onChange(e.target.value)} defaultValue={value}>
-            <option value="all">All years</option>
-            {years.map((year) => <option value={year} key={year}>{year}</option>)}
-        </select>
-    )
-}
-
-export default Years;

package/src/hooks/useLoadSourceData.ts

@@ -1,81 +0,0 @@
-import { useEffect, useState } from "react";
-import { DataSource, DataSourceEnum } from "../__shared";
-
-type UseLoadSourceData = {
-	action: any;
-	taxonId?: number;
-	placeId?: number;
-	numResults?: number;
-	source?: DataSource;
-	dataUrl?: string;
-	year?: number | string,
-	isSummaryData?: boolean;
-};
-
-/**
- * This hook handles loading the iNat data from whatever source has been specified (DataSource):
- *   nothing needs to be done.
- * - "autoLoad": the user is developing locally and wants to just ping iNat directly for the source
- * - "url": the user has generated the data sources at a URL somewhere via @imerss/inat-component-utils
- */
-export const useLoadSourceData = ({
-	taxonId,
-	placeId,
-	numResults,
-	source,
-	dataUrl,
-	year,
-	action,
-	isSummaryData = false
-}: UseLoadSourceData) => {
-	const [loading, setLoading] = useState(false);
-	const [results, setResults] = useState<any>([]);
-
-	useEffect(() => {
-		if (source === DataSourceEnum.autoLoad) {
-			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);
-
-				// note that `year` isn't used for recentObservations, but we pass it anyway to get more reusability out
-				// of this hook
-				const obs = await action({ taxonId, placeId, numResults, year });
-				setResults(obs.results);
-				setLoading(false);
-			})();
-		}
-
-		if (source === DataSourceEnum.url) {
-			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();
-
-				// hack workaround. Better solution would have been to standardize the JSON structure at the top-level
-				if (isSummaryData) {
-					setResults(json);
-				} else {
-					setResults(json.results);
-				}
-				setLoading(false);
-			})();
-		}
-	}, [source, dataUrl, taxonId, placeId, year, numResults, isSummaryData]);
-
-	return {
-		loading, results
-	};
-}

package/src/index.ts

@@ -1,15 +0,0 @@
-import TaxonPanel from "./components/taxon-panel/taxon-panel";
-
-// front-end components
-export * from "./components/observation/observation";
-export * from "./components/common-taxa/common-taxa";
-export * from "./components/recent-observations/recent-observations";
-export * from "./components/favourites/favourites";
-export * from "./components/taxon-panel/taxon-panel";
-export * from "./components/seasonality-graph/seasonality-graph";
-export * from "./components/summary/summary";
-
-// all typings
-export * from "./__shared";
-
-export default TaxonPanel;

package/src/types/index.d.ts

@@ -1,17 +0,0 @@
-import { TaxonPanelProps } from "../components/taxon-panel/taxon-panel";
-
-export {};
-declare global {
-	interface Window {
-		inatComponents: {
-			initTaxonPanel: (domId: string, taxonPanelProps: TaxonPanelProps) => void;
-		}
-	}
-}
-
-window.initStandalone = window.initStandalone || {};
-
-export enum DataSource {
-	autoLoad = "autoLoad",
-	url = "url"
-}

package/src/types/standalone.d.ts

@@ -1,6 +0,0 @@
-interface InitStandaloneProps {
-	taxonId: number;
-	placeId: number;
-}
-
-export type InitStandalone = (id: string, props: InitStandaloneProps) => void;

package/tsconfig.json

@@ -1,6 +0,0 @@
-{
-  "extends": "../../tsconfig.base.json",
-  "exclude": [
-    "src/**/*.test.tsx"
-  ]
-}