@performant-software/semantic-components 1.0.8-beta.2 → 1.0.9-beta.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@performant-software/semantic-components",
-  "version": "1.0.8-beta.2",
+  "version": "1.0.9-beta.0",
   "description": "A package of shared components based on the Semantic UI Framework.",
   "license": "MIT",
   "main": "./build/index.js",
@@ -12,10 +12,9 @@
     "build": "webpack --mode production && flow-copy-source -v src types"
   },
   "dependencies": {
-    "@performant-software/shared-components": "^1.0.8-beta.2",
+    "@performant-software/shared-components": "^1.0.9-beta.0",
     "@react-google-maps/api": "^2.8.1",
     "axios": "^0.26.1",
-    "citeproc": "^2.4.62",
     "i18next": "^19.4.4",
     "react-calendar": "^3.3.0",
     "react-color": "^2.18.1",

package/src/components/BibliographyList.js

@@ -1,5 +1,6 @@
 // @flow
 
+import { Citation } from '@performant-software/shared-components';
 import React, {
   useCallback,
   useEffect,
@@ -17,7 +18,6 @@ import {
 import _ from 'underscore';
 import BibliographyModal from './BibliographyModal';
 import BibliographySearchInput from './BibliographySearchInput';
-import Citation from './Citation';
 import i18n from '../i18n/i18n';
 import SortSelector from './SortSelector';
 import { SORT_DESCENDING } from '../constants/Sort';
@@ -196,7 +196,6 @@ const BibliographyList = (props: Props) => {
     <>
       <StyleSelector
         onChange={(name, xml) => setStyle({ name, xml })}
-        value={style && style.name}
       />
       <SortSelector
         direction={sort.direction}

package/src/components/StyleSelector.js

@@ -1,14 +1,9 @@
 // @flow
 
-import React, {
-  useCallback,
-  useEffect,
-  useMemo,
-  useState
-} from 'react';
+import useCitationStyles from '@performant-software/shared-components';
+import React, { useEffect } from 'react';
 import { Dropdown } from 'semantic-ui-react';
 import _ from 'underscore';
-import CitationStyles from '../resources/CitationStyles.json';
 
 type Props = {
   onChange: (name: string, xml: string) => void,
@@ -16,49 +11,24 @@ type Props = {
 };
 
 const StyleSelector = (props: Props) => {
-  const [stylesCache, setStylesCache] = useState({});
+  const { onStyleChange, style, styles } = useCitationStyles(props.value);
 
   /**
-   * Build the list of available style options.
-   *
-   * @type {{}}
-   */
-  const styles = useMemo(() => CitationStyles.coreCitationStyles, []);
-
-  /**
-   * Sets the style to the selected value. Styles are cached on the state so they do not need to be fetched
-   * more than once per render.
-   *
-   * @type {(function(*, {value: *}): void)|*}
-   */
-  const onChange = useCallback((e, { value }) => {
-    if (_.has(stylesCache, value)) {
-      props.onChange(value, stylesCache[value]);
-    } else {
-      fetch(`https://www.zotero.org/styles/${value}`)
-        .then((response) => response.text())
-        .then((xml) => {
-          props.onChange(value, xml);
-          setStylesCache((prevCache) => ({ ...prevCache, [value]: xml }));
-        });
-    }
-  }, [stylesCache]);
-
-  /**
-   * Default the selected style on component mount.
+   * Call the onChange prop when the style changes.
    */
   useEffect(() => {
-    const { name } = _.findWhere(styles, { isDefault: true });
-    onChange(null, { value: name });
-  }, []);
+    if (style?.name && style?.xml) {
+      props.onChange(style.name, style.xml);
+    }
+  }, [style]);
 
   return (
     <Dropdown
-      onChange={onChange}
-      options={_.map(styles, (style) => ({
-        key: style.name,
-        value: style.name,
-        text: style.title
+      onChange={(e, { value }) => onStyleChange(value)}
+      options={_.map(styles, ({ name, title }) => ({
+        key: name,
+        value: name,
+        text: title
       }))}
       search
       searchInput={{
@@ -66,8 +36,8 @@ const StyleSelector = (props: Props) => {
       }}
       selectOnBlur={false}
       selection
-      text={_.findWhere(styles, { name: props.value })?.title}
-      value={props.value}
+      text={style?.title}
+      value={style?.name || ''}
     />
   );
 };

package/types/components/BibliographyList.js.flow

@@ -1,5 +1,6 @@
 // @flow
 
+import { Citation } from '@performant-software/shared-components';
 import React, {
   useCallback,
   useEffect,
@@ -17,7 +18,6 @@ import {
 import _ from 'underscore';
 import BibliographyModal from './BibliographyModal';
 import BibliographySearchInput from './BibliographySearchInput';
-import Citation from './Citation';
 import i18n from '../i18n/i18n';
 import SortSelector from './SortSelector';
 import { SORT_DESCENDING } from '../constants/Sort';
@@ -196,7 +196,6 @@ const BibliographyList = (props: Props) => {
     <>
       <StyleSelector
         onChange={(name, xml) => setStyle({ name, xml })}
-        value={style && style.name}
       />
       <SortSelector
         direction={sort.direction}

package/types/components/StyleSelector.js.flow

@@ -1,14 +1,9 @@
 // @flow
 
-import React, {
-  useCallback,
-  useEffect,
-  useMemo,
-  useState
-} from 'react';
+import useCitationStyles from '@performant-software/shared-components';
+import React, { useEffect } from 'react';
 import { Dropdown } from 'semantic-ui-react';
 import _ from 'underscore';
-import CitationStyles from '../resources/CitationStyles.json';
 
 type Props = {
   onChange: (name: string, xml: string) => void,
@@ -16,49 +11,24 @@ type Props = {
 };
 
 const StyleSelector = (props: Props) => {
-  const [stylesCache, setStylesCache] = useState({});
+  const { onStyleChange, style, styles } = useCitationStyles(props.value);
 
   /**
-   * Build the list of available style options.
-   *
-   * @type {{}}
-   */
-  const styles = useMemo(() => CitationStyles.coreCitationStyles, []);
-
-  /**
-   * Sets the style to the selected value. Styles are cached on the state so they do not need to be fetched
-   * more than once per render.
-   *
-   * @type {(function(*, {value: *}): void)|*}
-   */
-  const onChange = useCallback((e, { value }) => {
-    if (_.has(stylesCache, value)) {
-      props.onChange(value, stylesCache[value]);
-    } else {
-      fetch(`https://www.zotero.org/styles/${value}`)
-        .then((response) => response.text())
-        .then((xml) => {
-          props.onChange(value, xml);
-          setStylesCache((prevCache) => ({ ...prevCache, [value]: xml }));
-        });
-    }
-  }, [stylesCache]);
-
-  /**
-   * Default the selected style on component mount.
+   * Call the onChange prop when the style changes.
    */
   useEffect(() => {
-    const { name } = _.findWhere(styles, { isDefault: true });
-    onChange(null, { value: name });
-  }, []);
+    if (style?.name && style?.xml) {
+      props.onChange(style.name, style.xml);
+    }
+  }, [style]);
 
   return (
     <Dropdown
-      onChange={onChange}
-      options={_.map(styles, (style) => ({
-        key: style.name,
-        value: style.name,
-        text: style.title
+      onChange={(e, { value }) => onStyleChange(value)}
+      options={_.map(styles, ({ name, title }) => ({
+        key: name,
+        value: name,
+        text: title
       }))}
       search
       searchInput={{
@@ -66,8 +36,8 @@ const StyleSelector = (props: Props) => {
       }}
       selectOnBlur={false}
       selection
-      text={_.findWhere(styles, { name: props.value })?.title}
-      value={props.value}
+      text={style?.title}
+      value={style?.name || ''}
     />
   );
 };

package/src/components/Citation.js

@@ -1,78 +0,0 @@
-// @flow
-
-import CSL from 'citeproc';
-import React, { useCallback, useEffect, useState } from 'react';
-import _ from 'underscore';
-import ZoteroTranslationClient from 'zotero-translation-client';
-import i18n from '../i18n/i18n';
-
-type Props = {
-  item: {
-    uid: string,
-    data: any
-  },
-  locale: string,
-  style: string
-};
-
-const Citation = (props: Props) => {
-  const [formattedCitation, setFormattedCitation] = useState();
-
-  /**
-   * Validates the passed item.
-   *
-   * @param item
-   *
-   * @returns {*}
-   */
-  const validateItem = useCallback((item) => {
-    const validItem = { ...item };
-
-    // Handle completely empty record
-    if (_.isEmpty(validItem.title) && _.isEmpty(validItem.creators) && _.isEmpty(validItem.issue)) {
-      _.extend(validItem, { title: i18n.t('Citation.labels.untitled') });
-    }
-
-    return validItem;
-  }, []);
-
-  /**
-   * Format the citation record by coverting the Zotero JSON to CSL.
-   */
-  useEffect(() => {
-    if (props.locale && props.style && props.item) {
-      // Translate from Zotero JSON to CSL
-      const { uid, ...rest } = props.item;
-
-      const translator = new ZoteroTranslationClient({
-        initialItems: [{ key: uid, ...validateItem(rest) }],
-        persist: false
-      });
-
-      const item = _.first(translator.itemsCSL);
-
-      // Use the CSL engine to format the item
-      const sys = {
-        retrieveLocale: () => props.locale,
-        retrieveItem: () => item
-      };
-
-      const citeproc = new CSL.Engine(sys, props.style);
-      citeproc.updateItems([item.id]);
-
-      // Save the citation on the state.
-      const result = citeproc.makeBibliography();
-      setFormattedCitation(_.last(result));
-    }
-  }, [validateItem, props.item, props.locale, props.style]);
-
-  return (
-    <div
-      dangerouslySetInnerHTML={{
-        __html: formattedCitation
-      }}
-    />
-  );
-};
-
-export default Citation;