@kosmeo-ui/react 0.1.0

package/src/components/inputs/richTextEditor/styles.css

@@ -0,0 +1,184 @@
+.k-richtext-container {
+  width: fit-content;
+  min-width: 100%;
+}
+
+.k-richtext-label-wrapper {
+  display: flex;
+  justify-content: space-between;
+  align-items: baseline;
+  margin-bottom: 0.1rem;
+}
+
+.k-richtext-label {
+  display: block;
+  font-size: var(--text-size-sm);
+  font-weight: 500;
+  color: var(--text-color);
+}
+
+.k-editor-wrapper .tiptap {
+  color: var(--text-color);
+  min-width: 100%;
+  width: 100%;
+  box-sizing: border-box;
+  transition:
+    border-color 0.2s ease-in-out,
+    box-shadow 0.2s ease-in-out;
+  height: 30rem;
+  min-height: 30rem;
+  max-height: fit-content;
+  resize: both;
+  overflow-y: auto;
+  padding: 0.625rem 1rem;
+  font-size: var(--text-size-md);
+  background-color: var(--background-color-light);
+}
+
+.k-editor-wrapper p.is-editor-empty:first-child::before {
+  color: var(--text-color-secondary);
+  opacity: 0.7;
+  content: attr(data-placeholder);
+  float: left;
+  height: 0;
+  pointer-events: none;
+}
+
+.k-editor-wrapper .tiptap:focus {
+  outline: none;
+  border-color: var(--border-color-active);
+  box-shadow: 0 0 0 0.1875rem var(--border-shadow-color-active);
+}
+.k-editor-wrapper .tiptap p {
+  margin: 0 0 0.5rem 0;
+}
+
+.k-editor-wrapper .tiptap p:last-child {
+  margin-bottom: 0;
+}
+
+.k-editor-wrapper .tiptap ul,
+.k-editor-wrapper .tiptap ol {
+  padding-left: 1.5rem;
+  margin: 0.5rem 0;
+}
+
+.k-editor-wrapper .tiptap li {
+  margin: 0.25rem 0;
+}
+
+.k-editor-toolbar {
+  display: flex;
+  gap: 0.25rem;
+  padding: 0.5rem;
+  background-color: var(--background-color-dark);
+  border-bottom: 0.0625rem solid var(--border-color);
+  border-radius: 0.375rem 0.375rem 0 0;
+}
+
+.k-editor-wrapper {
+  position: relative;
+  border: 0.0625rem solid var(--border-color);
+  border-radius: 0.375rem;
+}
+
+.k-toolbar-separator {
+  border-left: 1px solid var(--border-color);
+  height: 1.5rem;
+  margin: 0 0.5rem;
+  align-self: center;
+}
+
+.k-html-section {
+  background: var(--background-color-dark);
+  padding: 1rem;
+  border-radius: 0 0 0.375rem 0.375rem;
+  overflow: auto;
+  margin: 0;
+  height: 30rem;
+  resize: both;
+  min-width: 100%;
+  min-height: 30rem;
+  max-height: fit-content;
+  font-size: var(--text-size-md);
+  color: var(--text-color);
+  white-space: pre-wrap;
+}
+
+.k-richtext-container-sm .tiptap {
+  height: 25rem;
+  min-height: 25rem;
+  max-height: fit-content;
+  padding: 0.5rem 0.75rem;
+  font-size: var(--text-size-sm);
+}
+
+.k-richtext-container-sm .k-html-section {
+  height: 25rem;
+  min-height: 25rem;
+  max-height: fit-content;
+  padding: 0.75rem;
+  font-size: var(--text-size-sm);
+}
+
+.k-richtext-container-sm .k-editor-toolbar {
+  padding: 0.375rem;
+}
+
+.k-richtext-container-sm .k-toolbar-separator {
+  height: 1.25rem;
+  margin: 0 0.375rem;
+}
+
+.k-richtext-container-lg .tiptap {
+  height: 35rem;
+  min-height: 35rem;
+  max-height: fit-content;
+  padding: 0.75rem 1.25rem;
+  font-size: var(--text-size-lg);
+}
+
+.k-richtext-container-lg .k-html-section {
+  height: 35rem;
+  min-height: 35rem;
+  max-height: fit-content;
+  padding: 1.25rem;
+  font-size: var(--text-size-lg);
+}
+
+.k-richtext-container-lg .k-editor-toolbar {
+  padding: 0.625rem;
+}
+
+.k-richtext-container-lg .k-toolbar-separator {
+  height: 1.75rem;
+  margin: 0 0.625rem;
+}
+
+/* Disabled state styles */
+.k-editor-wrapper-disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+}
+
+.k-editor-wrapper-disabled .tiptap {
+  background-color: var(--background-color-light);
+  cursor: not-allowed;
+}
+
+.k-editor-wrapper-disabled .k-editor-toolbar {
+  background-color: var(--background-color-light);
+}
+
+.k-editor-wrapper-disabled .k-html-section {
+  background-color: var(--background-color-light);
+  cursor: not-allowed;
+}
+
+.k-richtext-char-count {
+  font-weight: 500;
+  font-size: var(--text-size-sm);
+  color: var(--text-color-secondary);
+  margin-left: 0.5rem;
+  margin-right: 0.5rem;
+}

package/src/components/inputs/searchList/index.tsx

@@ -0,0 +1,296 @@
+"use client";
+
+import useFloatingPosition from "../../../hooks/useFloatingPosition.js";
+import useDebouncedValue from "../../../hooks/useDebouncedValue.js";
+import useScrollIntoView from "../../../hooks/useScrollIntoView.js";
+import useListKeyboard from "../../../hooks/useListKeyboard.js";
+import useOutsideClick from "../../../hooks/useOutsideClick.js";
+import { UseQueryResult } from "@tanstack/react-query";
+import Spinner from "../../feedback/spinner/index.js";
+import { useEffect, useState, useRef } from "react";
+import Portal from "../../overlays/portal/index.js";
+import { PropsWithSize } from "../../types.js";
+import Input from "../input/index.js";
+import "./styles.css";
+
+interface SearchListProps<T> extends PropsWithSize {
+  /** **_Optional_** the selected value for this component */
+  value?: T | null;
+  /** The useQuery function that is used to retrieve the data from the server */
+  queryFn: (
+    input: string,
+    searchKey: string,
+    max: number
+  ) => UseQueryResult<T[], Error>;
+  /** The Function to run when the user selects an input */
+  onSelect: (selectedOption: T | null, event?: React.MouseEvent) => void;
+  placeholder?: string;
+  /** **_Optional_** The max results to be returned  */
+  max?: number;
+  /** **_Optional_** label to appear above the Typeahead */
+  label?: string;
+  /** **_Optional_** whether the field is required (shows red asterisk and enables validation) */
+  required?: boolean;
+  /** **_Optional_** if the typeahead is disabled */
+  disabled?: boolean;
+  /** **_Optional_** ID of the field. If one is not provided, it will be randomly generated */
+  id?: string;
+  /** The key that is used to access the label for the drop down list */
+  labelKey: keyof T;
+  /** The search key that will be sent to the server as a param */
+  searchKey: string;
+  /** **_Optional_** if the drop down should be longer than the default */
+  longDropDown?: boolean;
+  /** **_Optional_** Custom render function for dropdown options */
+  renderOption?: (option: T) => {
+    label: string;
+    node: React.ReactNode;
+  };
+  /** **_Optional_** Options to show on focus before the user types */
+  initialOptions?: T[];
+}
+
+const SearchList = <T,>(props: SearchListProps<T>) => {
+  const {
+    size = "md",
+    required = false,
+    disabled = false,
+    longDropDown = false,
+    max = 30,
+  } = props;
+
+  const [inputValue, setInputValue] = useState<string>(
+    props.value ? String(props.value[props.labelKey]) : ""
+  );
+  const [searchValue, setSearchValue] = useState<string>("");
+  const [isOpen, setIsOpen] = useState(false);
+  const [highlightedIndex, setHighlightedIndex] = useState(-1);
+  const dropdownRef = useRef<HTMLDivElement>(null);
+  const listRef = useRef<HTMLUListElement>(null);
+  const optionRefs = useRef<(HTMLLIElement | null)[]>([]);
+  const { anchorRef: inputWrapperRef, position: dropdownPos } =
+    useFloatingPosition({ isOpen });
+
+  const query = props.queryFn(searchValue, props.searchKey, max);
+
+  const debouncedInput = useDebouncedValue(inputValue, 500);
+  const isTyping = inputValue !== debouncedInput && inputValue.length >= 3;
+
+  useEffect(() => {
+    if (props.value === null) {
+      setInputValue("");
+      setSearchValue("");
+      setIsOpen(false);
+    } else if (
+      props.value &&
+      String(props.value[props.labelKey]) !== inputValue
+    ) {
+      setInputValue(String(props.value[props.labelKey]));
+    }
+  }, [props.value]);
+
+  useEffect(() => {
+    if (inputValue.length === 0) {
+      props.onSelect(null);
+      if (!isOpen) setSearchValue("");
+      return;
+    }
+    if (inputValue.length < 3) return;
+    if (props.value && inputValue === String(props.value[props.labelKey])) {
+      setSearchValue("");
+      setIsOpen(false);
+      return;
+    }
+    setIsOpen(true);
+  }, [inputValue]);
+
+  useEffect(() => {
+    if (debouncedInput.length < 3) {
+      setSearchValue("");
+      return;
+    }
+    if (props.value && debouncedInput === String(props.value[props.labelKey])) {
+      setSearchValue("");
+      return;
+    }
+    setSearchValue(debouncedInput);
+  }, [debouncedInput]);
+
+  useOutsideClick([dropdownRef, listRef], () => setIsOpen(false));
+
+  useScrollIntoView(optionRefs, highlightedIndex, isOpen);
+
+  const handleOptionClick = (option: T, event?: React.MouseEvent) => {
+    setInputValue(String(option[props.labelKey]));
+    props.onSelect(option, event);
+    setIsOpen(false);
+    setHighlightedIndex(-1);
+  };
+
+  const activeOptions =
+    searchValue === "" && inputValue.length < 3
+      ? props.initialOptions
+      : query.data;
+
+  const handleKeyDown = useListKeyboard({
+    isOpen: isOpen && !!activeOptions,
+    length: activeOptions?.length ?? 0,
+    highlightedIndex,
+    setHighlightedIndex,
+    onSelect: (index) => {
+      if (activeOptions?.[index]) handleOptionClick(activeOptions[index]);
+    },
+    onClose: () => setIsOpen(false),
+  });
+
+  const handleInputFocus = () => {
+    if (inputValue.length >= 3) {
+      setIsOpen(true);
+      setSearchValue(inputValue);
+    } else if (inputValue.length === 0) {
+      setIsOpen(true);
+      setSearchValue("");
+    }
+  };
+
+  const handleInputBlur = () => {
+    setTimeout(() => {
+      if (isOpen) return;
+      if (props.value) {
+        setInputValue(String(props.value[props.labelKey]));
+        props.onSelect(props.value);
+      } else {
+        setInputValue("");
+      }
+    }, 100);
+  };
+
+  optionRefs.current = [];
+
+  const dropdownList =
+    isOpen && dropdownPos ? (
+      <ul
+        ref={listRef}
+        className={`k-search-list-dropdown k-search-list-dropdown-portal ${
+          longDropDown
+            ? "k-search-list-dropdown-large"
+            : "k-search-list-dropdown-small"
+        }`}
+        style={{
+          position: "fixed",
+          top: dropdownPos.top,
+          left: dropdownPos.left,
+          width: dropdownPos.width,
+        }}
+      >
+        {isTyping || query.isLoading ? (
+          <li className="k-search-list-loading">
+            <Spinner size="sm" />
+          </li>
+        ) : searchValue === "" && inputValue.length < 3 ? (
+          props.initialOptions && props.initialOptions.length > 0 ? (
+            <>
+              {props.initialOptions.map((option, index) => {
+                const rendered = props.renderOption
+                  ? props.renderOption(option)
+                  : null;
+                return (
+                  <li
+                    ref={(el) => {
+                      optionRefs.current[index] = el;
+                    }}
+                    key={index}
+                    className={`k-search-list-option k-search-list-option-${size} ${
+                      index === highlightedIndex
+                        ? "k-search-list-option-highlighted"
+                        : ""
+                    }`}
+                    onMouseDown={(e) => {
+                      e.preventDefault();
+                      handleOptionClick(option, e);
+                    }}
+                    onMouseOver={() => setHighlightedIndex(index)}
+                  >
+                    {rendered ? rendered.node : String(option[props.labelKey])}
+                  </li>
+                );
+              })}
+              <li className={`k-search-list-info k-search-list-info-${size}`}>
+                Type to filter
+              </li>
+            </>
+          ) : (
+            <li
+              className={`k-search-list-no-results k-search-list-no-results-${size}`}
+            >
+              Start typing to search
+            </li>
+          )
+        ) : query.data && query.data.length > 0 ? (
+          <>
+            {query.data.map((option, index) => {
+              const rendered = props.renderOption
+                ? props.renderOption(option)
+                : null;
+              return (
+                <li
+                  ref={(el) => {
+                    optionRefs.current[index] = el;
+                  }}
+                  key={index}
+                  className={`k-search-list-option k-search-list-option-${size} ${
+                    index === highlightedIndex
+                      ? "k-search-list-option-highlighted"
+                      : ""
+                  }`}
+                  onMouseDown={(e) => {
+                    e.preventDefault();
+                    handleOptionClick(option, e);
+                  }}
+                  onMouseOver={() => setHighlightedIndex(index)}
+                >
+                  {rendered ? rendered.node : String(option[props.labelKey])}
+                </li>
+              );
+            })}
+            <li className={`k-search-list-info k-search-list-info-${size}`}>
+              Continue typing to filter
+            </li>
+          </>
+        ) : (
+          <li
+            className={`k-search-list-no-results k-search-list-no-results-${size}`}
+          >
+            No results found
+          </li>
+        )}
+      </ul>
+    ) : null;
+
+  return (
+    <div className="k-search-list-container" ref={dropdownRef}>
+      <div ref={inputWrapperRef}>
+        <Input
+          label={props.label}
+          required={required}
+          disabled={disabled}
+          value={inputValue}
+          onChange={(e) => {
+            const newValue = e.target.value;
+            setInputValue(newValue);
+          }}
+          onKeyDown={handleKeyDown}
+          onFocus={handleInputFocus}
+          onBlur={handleInputBlur}
+          placeholder={props.placeholder || "Type to search"}
+          dropDown={true}
+          isOpen={isOpen}
+          size={size}
+        />
+      </div>
+      <Portal>{dropdownList}</Portal>
+    </div>
+  );
+};
+
+export default SearchList;

package/src/components/inputs/searchList/styles.css

@@ -0,0 +1,114 @@
+.k-search-list-container {
+  position: relative;
+  width: 100%;
+}
+
+.k-search-list-dropdown {
+  position: absolute;
+  top: 100%;
+  left: 0;
+  right: 0;
+  z-index: 10000;
+  background-color: var(--background-color-light);
+  border: 0.0625rem solid var(--border-color);
+  border-top: none;
+  border-radius: 0 0 0.25rem 0.25rem;
+  overflow-y: auto;
+  max-height: 20rem;
+  list-style: none;
+  padding: 0;
+  margin: 0;
+  box-shadow:
+    0 0.25rem 0.375rem -0.0625rem var(--shadow-color),
+    0 0.125rem 0.25rem -0.125rem var(--shadow-color);
+}
+
+.k-search-list-option {
+  cursor: pointer;
+  text-align: left;
+  color: var(--text-color);
+}
+.k-search-list-dropdown-large {
+  max-height: 30rem;
+}
+
+.k-search-list-dropdown-small {
+  max-height: 12.5rem;
+}
+
+.k-search-list-option:hover,
+.k-search-list-option:focus {
+  background-color: var(--background-color-dark);
+}
+
+.k-search-list-option-highlighted {
+  background-color: var(--background-color-dark);
+  cursor: pointer;
+}
+
+.k-search-list-option-sm {
+  font-size: var(--text-size-sm);
+  padding: 0.5rem 0.75rem;
+}
+
+.k-search-list-option-md {
+  font-size: var(--text-size-md);
+  padding: 0.75rem 1rem;
+}
+
+.k-search-list-option-lg {
+  font-size: var(--text-size-lg);
+  padding: 1rem 1.25rem;
+}
+
+.k-search-list-loading {
+  text-align: center;
+  color: var(--text-color-secondary);
+  font-style: italic;
+  padding: 0.75rem 1rem;
+  font-size: var(--text-size-sm);
+}
+
+.k-search-list-info {
+  text-align: center;
+  color: var(--text-color-secondary);
+  font-style: italic;
+  /* border-top: 0.0625rem solid var(--border-color); */
+  background-color: var(--background-color-light);
+}
+
+.k-search-list-info-sm {
+  font-size: var(--text-size-sm);
+  padding: 0.5rem 0.75rem;
+}
+
+.k-search-list-info-md {
+  font-size: var(--text-size-md);
+  padding: 0.75rem 1rem;
+}
+
+.k-search-list-info-lg {
+  font-size: var(--text-size-lg);
+  padding: 1rem 1.25rem;
+}
+
+.k-search-list-no-results {
+  text-align: center;
+  color: var(--text-color-secondary);
+  font-style: italic;
+}
+
+.k-search-list-no-results-sm {
+  font-size: var(--text-size-sm);
+  padding: 0.75rem 1rem;
+}
+
+.k-search-list-no-results-md {
+  font-size: var(--text-size-md);
+  padding: 1rem 1.25rem;
+}
+
+.k-search-list-no-results-lg {
+  font-size: var(--text-size-lg);
+  padding: 1.25rem 1.5rem;
+}