Merge pull request #501 from performant-software/feature/cdp220_saved_search_results

CDP #220 - Saved search results

Author: dleadbetter

packages/core-data/package.json

@@ -23,6 +23,7 @@
     "build": "vite build && flow-copy-source -v src types"
   },
   "dependencies": {
+    "@headlessui/react": "^2.2.4",
     "@radix-ui/react-accordion": "^1.1.2",
     "@radix-ui/react-checkbox": "^1.0.4",
     "@radix-ui/react-dialog": "^1.1.1",

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

@@ -229,7 +229,7 @@ const FacetTimeline = (props: Props) => {
         ]}
         classNames={{
           ...props.classNames,
-          range: clsx('cursor-grab', 'active:cursor-grabbing', 'bg-primary-500', 'border', 'border-black', props.classNames?.range),
+          range: clsx('cursor-grab', 'active:cursor-grabbing', 'bg-primary', 'border', 'border-black', props.classNames?.range),
           root: clsx('ml-14', 'mr-5', props.classNames?.root),
           track: clsx('cursor-grab', 'active:cursor-grabbing', 'h-5', 'mb-4', props.classNames?.track),
           thumb: clsx('opacity-0', 'w-[1px]', props.classNames?.thumb),

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

@@ -32,7 +32,7 @@ import ZoomOutIcon from '../icons/ZoomOutIcon';
 type Props = {
   className?: string,
   name: string,
-  size: number,
+  size?: number,
   style?: any
 };
 

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

@@ -0,0 +1,133 @@
+// @flow
+
+import { Transition } from '@headlessui/react';
+import React, { useEffect } from 'react';
+import _ from 'underscore';
+import Icon from './Icon';
+
+type Props = {
+  content: string,
+  header: string,
+  icon?: {
+    className?: string,
+    name: string,
+    size?: number
+  },
+  onClose: () => void,
+  open?: boolean,
+  timeout?: number
+};
+
+const Notification = (props: Props) => {
+  /**
+   * If a `timeout` prop is provided, call the `onClose` callback after the specified interval.
+   */
+  useEffect(() => {
+    if (props.open && props.timeout) {
+      _.delay(props.onClose, props.timeout);
+    }
+  }, [props.open, props.timeout]);
+
+  return (
+    <div
+      aria-live='assertive'
+      className='pointer-events-none fixed inset-0 flex items-end px-4 py-6 sm:items-start sm:p-6 z-10'
+    >
+      <div
+        className='flex w-full flex-col items-center space-y-4 sm:items-end'
+      >
+        <Transition
+          show={props.open}
+        >
+          <div
+            className={`
+            pointer-events-auto 
+            w-full 
+            max-w-sm 
+            overflow-hidden 
+            rounded-lg 
+            bg-white 
+            shadow-lg 
+            ring-1 
+            ring-black/5 
+            transition 
+            data-closed:opacity-0 
+            data-enter:transform 
+            data-enter:duration-300 
+            data-enter:ease-out 
+            data-closed:data-enter:translate-y-2 
+            data-leave:duration-100 
+            data-leave:ease-in 
+            data-closed:data-enter:sm:translate-x-2 
+            data-closed:data-enter:sm:translate-y-0
+          `}
+          >
+            <div
+              className='p-4'
+            >
+              <div
+                className='flex items-start'
+              >
+                <div
+                  className='shrink-0'
+                >
+                  { props.icon && (
+                    <Icon
+                      className={props.icon.className}
+                      name={props.icon.name}
+                      size={props.icon.size}
+                    />
+                  )}
+                </div>
+                <div
+                  className='ml-3 w-0 flex-1 pt-0.5'
+                >
+                  <p
+                    className='text-sm font-medium text-gray-900'
+                  >
+                    { props.header }
+                  </p>
+                  <p
+                    className='mt-1 text-sm text-gray-500'
+                  >
+                    { props.content }
+                  </p>
+                </div>
+                <div
+                  className='ml-4 flex shrink-0'
+                >
+                  <button
+                    className={`
+                    inline-flex 
+                    rounded-md 
+                    bg-white 
+                    text-gray-400 
+                    hover:text-gray-500 
+                    focus:ring-2 
+                    focus:ring-indigo-500 
+                    focus:ring-offset-2 
+                    focus:outline-hidden
+                  `}
+                    onClick={props.onClose}
+                    type='button'
+                  >
+                    <span
+                      className='sr-only'
+                    >
+                      Close
+                    </span>
+                    <Icon
+                      name='close'
+                    />
+                  </button>
+                </div>
+              </div>
+            </div>
+          </div>
+        </Transition>
+      </div>
+    </div>
+  );
+};
+
+export default Notification;