.github/workflows/storybook.yml

@@ -14,6 +14,10 @@ jobs:
         with:
           persist-credentials: false
       - name: Install and Build 🔧
+        env:
+          VITE_TYPESENSE_COLLECTION: ${{ secrets.VITE_TYPESENSE_COLLECTION }}
+          VITE_TYPESENSE_URL: ${{ secrets.VITE_TYPESENSE_URL }}
+          VITE_TYPESENSE_SEARCH_KEY: ${{ secrets.VITE_TYPESENSE_SEARCH_KEY }}
         run: | # Install npm packages and build the Storybook files
           yarn install
           yarn build-storybook

README.md

@@ -79,10 +79,10 @@ After all testing has passed, create your release of `0.5.16`. See publishing be
 
 Each of the versions of the individual packages will be kept in sync. The following steps should be taken when publishing a new version of these packages.
 
-1. Commit your changes and create a PR into the `master` branch. Wait until your PR is merged to proceed.
-2. Create a [release](https://github.com/performant-software/react-components/releases) in GitHub. Be sure to note any breaking changes, new features, and bug fixes
-3. Update the version in `react-components.json`. See Semantic Versioning Guide below to determine the new version.
-4. From the project root, run `yarn publish-production`.
+1. Update the version in `react-components.json`. See Semantic Versioning Guide below to determine the new version.
+2. From the project root, run `yarn publish-release`.
+3. Commit your changes and create a PR into the `master` branch. Wait until your PR is merged to proceed.
+4. Create a [release](https://github.com/performant-software/react-components/releases) in GitHub. Be sure to note any breaking changes, new features, and bug fixes
 5. In GitHub update the "next release" label to "<your_release_number>". This will allow us to go back and see exactly which PRs were included in each release.
 6. Create a new "next release" label in GitHub.
 

package.json

@@ -16,8 +16,9 @@
     "publish-beta": "node --experimental-json-modules ./scripts/publish.js --tag beta"
   },
   "devDependencies": {
-    "@babel/core": "^7.17.9",
-    "babel-jest": "^27.5.1",
+    "@babel/core": "^7.25.7",
+    "@babel/preset-env": "^7.25.7",
+    "babel-jest": "^29.7.0",
     "babel-plugin-transform-flow-strip-types": "^6.22.0",
     "eslint": "^7.1.0",
     "eslint-config-airbnb": "^18.1.0",

packages/controlled-vocabulary/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@performant-software/controlled-vocabulary",
-  "version": "2.2.15",
+  "version": "2.3.3",
   "description": "A package of components to allow user to configure dropdown elements. Use with the \"controlled_vocabulary\" gem.",
   "license": "MIT",
   "main": "./dist/index.cjs.js",
@@ -23,8 +23,8 @@
     "underscore": "^1.13.2"
   },
   "peerDependencies": {
-    "@performant-software/semantic-components": "^2.2.15",
-    "@performant-software/shared-components": "^2.2.15",
+    "@performant-software/semantic-components": "^2.3.3",
+    "@performant-software/shared-components": "^2.3.3",
     "react": ">= 16.13.1 < 19.0.0",
     "react-dom": ">= 16.13.1 < 19.0.0"
   },

packages/controlled-vocabulary/src/components/ReferenceCodeModal.js

@@ -1,7 +1,6 @@
 // @flow
 
-import { ModalContext } from '@performant-software/semantic-components';
-import type { EditContainerProps } from '@performant-software/shared-components';
+import { ModalContext, type EditContainerProps } from '@performant-software/shared-components';
 import React from 'react';
 import { Form, Modal } from 'semantic-ui-react';
 import i18n from '../i18n/i18n';

packages/controlled-vocabulary/src/components/ReferenceTableModal.js

@@ -1,7 +1,7 @@
 // @flow
 
-import { EmbeddedList, ModalContext } from '@performant-software/semantic-components';
-import type { EditContainerProps } from '@performant-software/shared-components';
+import { EmbeddedList } from '@performant-software/semantic-components';
+import { ModalContext, type EditContainerProps } from '@performant-software/shared-components';
 import React from 'react';
 import { Form, Header, Modal } from 'semantic-ui-react';
 import i18n from '../i18n/i18n';

packages/core-data/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@performant-software/core-data",
-  "version": "2.2.15",
+  "version": "2.3.3",
   "description": "A package of components used with the Core Data platform.",
   "license": "MIT",
   "main": "./dist/index.cjs.js",
@@ -31,6 +31,7 @@
     "@turf/turf": "^6.5.0",
     "clsx": "^2.1.0",
     "dequal": "^2.0.3",
+    "i18next": "^19.4.4",
     "instantsearch.js": "^4.66.0",
     "lucide-react": "^0.321.0",
     "postcss-import": "^16.1.0",
@@ -40,8 +41,8 @@
     "underscore": "^1.13.2"
   },
   "peerDependencies": {
-    "@performant-software/geospatial": "^2.2.15",
-    "@performant-software/shared-components": "^2.2.15",
+    "@performant-software/geospatial": "^2.3.3",
+    "@performant-software/shared-components": "^2.3.3",
     "@peripleo/maplibre": "^0.5.2",
     "@peripleo/peripleo": "^0.5.2",
     "react": ">= 16.13.1 < 19.0.0",

packages/core-data/src/components/AccordionItemsList.js

@@ -0,0 +1,128 @@
+// @flow
+
+import * as Accordion from '@radix-ui/react-accordion';
+import clsx from 'clsx';
+import React from 'react';
+import _ from 'underscore';
+import Icon from './Icon';
+import type { RelatedRecordsList } from '../types/RelatedRecordsList';
+
+type Props = {
+  /**
+   * Optional list of classes to be applied to the root element
+   */
+  className?: string,
+
+  /**
+   * If true, will display the number of items in each section after the title
+   */
+  count?: Boolean,
+
+  /**
+   * List of related models to render
+   */
+  items: Array<RelatedRecordsList>
+};
+
+/**
+ * This component renders the passed list of related items in an accordion fashion.
+ */
+const AccordionItemsList = (props: Props) => (
+  <Accordion.Root
+    className={clsx(
+      'accordion-items-list',
+      props.className
+    )}
+    type='multiple'
+  >
+    { _.map(props.items, (relation, idx) => (
+      <Accordion.Item key={idx} value={relation.title}>
+        <Accordion.Header
+          asChild
+        >
+          <h2>
+            <Accordion.Trigger
+              className='accordion-list-trigger border-neutral-100 border border-t border-b-0 border-l-0 border-r-0 border-solid rounded-none w-full flex justify-between items-center p-4 text-[15px] font-bold leading-[120%]'
+            >
+              {
+                relation.renderTitle ? (
+                  relation.renderTitle(relation.title, relation.count)
+                ) : (
+                  <span>
+                    { relation.title }
+                    { props.count ? (
+                      <span className='ml-2'>
+                        (
+                        { relation.items.length }
+                        )
+                      </span>
+                    ) : null }
+                  </span>
+                )
+              }
+              <Icon
+                className='accordion-list-chevron'
+                name='right'
+                size={18}
+              />
+            </Accordion.Trigger>
+          </h2>
+        </Accordion.Header>
+        <Accordion.Content className='accordion-list-content text-[13px] font-semibold leading-[120%]'>
+          <ul className={clsx(
+            { flex: relation.horizontal },
+            { 'flex-row': relation.horizontal },
+            { 'flex-wrap': relation.horizontal },
+            { 'gap-6': relation.horizontal },
+            { 'py-6': relation.horizontal }
+          )}
+          >
+            {
+              _.map(relation.items, (item, idxx) => (
+                <>
+                  {
+                    relation.renderItem ? (
+                      relation.renderItem(item)
+                    ) : (
+                      // eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions
+                      <li
+                        key={idxx}
+                        onClick={item.onClick}
+                        onKeyDown={item.onClick}
+                        // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex
+                        tabIndex={item.onClick ? '0' : '-1'}
+                        className={
+                        clsx(
+                          'flex flex-row gap-2 items-baseline px-6 py-2',
+                          {
+                            'hover:bg-neutral-100': item.onClick,
+                            'cursor-pointer': item.onClick
+                          }
+                        )
+                        }
+                      >
+                        {
+                          relation.icon && (
+                            <Icon
+                              name={relation.icon}
+                              size={14}
+                            />
+                          )
+                        }
+                        <span>
+                          { item.name }
+                        </span>
+                      </li>
+                    )
+                  }
+                </>
+              ))
+            }
+          </ul>
+        </Accordion.Content>
+      </Accordion.Item>
+    ))}
+  </Accordion.Root>
+);
+
+export default AccordionItemsList;

packages/core-data/src/components/Button.js

@@ -0,0 +1,60 @@
+// @flow
+
+import clsx from 'clsx';
+import React from 'react';
+
+type Props = {
+  /**
+   * Class name to apply to the root button element.
+   */
+  className?: string,
+
+  /**
+   * Child elements to append to the button.
+   */
+  children: Node,
+
+  /**
+   * If `true`, the button will be assumed to contain a single icon.
+   */
+  icon?: boolean,
+
+  /**
+   * If `true`, the button will display with the primary background color.
+   */
+  primary?: boolean,
+
+  /**
+   * If `true`, the button will display with rounded corners.
+   */
+  rounded?: boolean,
+
+  /**
+   * If `true`, the button will display with the secondary background color.
+   */
+  secondary?: boolean
+};
+
+const Button = (props: Props) => (
+  <button
+    {...props}
+    className={clsx(
+      'flex',
+      'items-center',
+      'gap-2',
+      'py-2',
+      { 'px-4': !props.icon },
+      { 'rounded-full px-2': props.icon },
+      { 'bg-secondary': props.secondary },
+      { 'border border-solid border-gray-200': !props.primary },
+      { 'bg-primary hover:bg-primary hover:saturate-50 text-white fill-white': props.primary },
+      { 'rounded-md': props.rounded },
+      props.className
+    )}
+    type='button'
+  >
+    { props.children }
+  </button>
+);
+
+export default Button;

packages/core-data/src/components/ButtonGroup.js

@@ -0,0 +1,24 @@
+// @flow
+
+import clsx from 'clsx';
+import React from 'react';
+
+type Props = {
+  children: Node,
+  className?: string,
+  rounded?: boolean
+};
+
+const ButtonGroup = (props: Props) => (
+  <div
+    className={clsx(
+      'inline-flex',
+      { '[&>:first-child]:rounded-s-md [&>:last-child]:rounded-e-md': props.rounded },
+      props.className
+    )}
+  >
+    { props.children }
+  </div>
+);
+
+export default ButtonGroup;

packages/core-data/src/components/Checkbox.js

@@ -0,0 +1,61 @@
+// @flow
+
+import React from 'react';
+import * as RadixCheckbox from '@radix-ui/react-checkbox';
+import clsx from 'clsx';
+import Icon from './Icon';
+
+type Props = {
+  /**
+   * Label to show in the aria-label property for screen readers.
+   */
+  ariaLabel: string,
+  /**
+   * (Optional) Tailwind classes for the root button component.
+   */
+  className?: string,
+  /**
+   * Boolean state of the checkbox.
+   */
+  checked: boolean,
+  /**
+   * (Optional) Whether to disable the checkbox.
+   */
+  disabled?: boolean,
+  /**
+   * HTML ID to apply to the checkbox
+   */
+  id?: string,
+  /**
+   * Callback that determines what to do when the checkbox is clicked.
+   * @param {boolean} arg
+   * @returns
+   */
+  onClick: (arg: boolean) => any
+}
+
+const Checkbox = (props: Props) => (
+  <RadixCheckbox.Root
+    aria-label={props.ariaLabel}
+    checked={props.checked}
+    className={clsx(
+      'rounded-sm hover:bg-transparent',
+      props.className,
+    )}
+    disabled={props.disabled}
+    id={props.id}
+    onCheckedChange={props.onClick}
+  >
+    <RadixCheckbox.Indicator asChild forceMount>
+      <Icon
+        className={clsx(
+          { 'fill-primary': props.checked },
+          { 'fill-black': !props.checked },
+        )}
+        name={props.checked ? 'checkbox_filled' : 'checkbox'}
+      />
+    </RadixCheckbox.Indicator>
+  </RadixCheckbox.Root>
+);
+
+export default Checkbox;