@quillsql/react 1.0.0

package/src/components/selectUtils.ts

@@ -0,0 +1,67 @@
+import {
+  BaseColors,
+  DEFAULT_COLOR,
+  WHITE,
+  colorClassNames,
+  colorPalette,
+  getColorClassNames,
+} from '../lib';
+import React from 'react';
+import { twMerge } from 'tailwind-merge';
+
+export interface SelectItemProps {
+  value: string;
+  text?: string;
+}
+
+export function constructValueToNameMapping(
+  children: React.ReactElement[] | React.ReactElement
+) {
+  const valueToNameMapping = new Map<string, string>();
+  React.Children.map(children, (child: { props: SelectItemProps }) => {
+    valueToNameMapping.set(
+      child.props.value,
+      child.props.text ?? child.props.value
+    );
+  });
+  return valueToNameMapping;
+}
+
+export function getFilteredOptions(
+  searchQuery: string,
+  options: SelectItemProps[]
+): SelectItemProps[] {
+  return searchQuery === ''
+    ? options
+    : options.filter((option: SelectItemProps) => {
+        const optionText = option.text ?? option.value;
+        return optionText.toLowerCase().includes(searchQuery.toLowerCase());
+      });
+}
+
+export const getSelectButtonColors = (
+  hasSelection: boolean,
+  isDisabled: boolean,
+  hasError = false
+) => {
+  return twMerge(
+    isDisabled
+      ? getColorClassNames(DEFAULT_COLOR, colorPalette.canvasBackground).bgColor
+      : getColorClassNames(WHITE, colorPalette.background).bgColor,
+    !isDisabled &&
+      getColorClassNames(DEFAULT_COLOR, colorPalette.canvasBackground)
+        .hoverBgColor,
+    hasSelection
+      ? getColorClassNames(DEFAULT_COLOR, colorPalette.darkText).textColor
+      : getColorClassNames(DEFAULT_COLOR, colorPalette.text).textColor,
+    isDisabled &&
+      getColorClassNames(DEFAULT_COLOR, colorPalette.lightText).textColor,
+    hasError && colorClassNames[BaseColors.Rose][colorPalette.text].textColor,
+    hasError
+      ? colorClassNames[BaseColors.Rose][colorPalette.ring].borderColor
+      : getColorClassNames(DEFAULT_COLOR, colorPalette.ring).borderColor
+  );
+};
+
+export const hasValue = (value: string | null | undefined) =>
+  value !== null && value !== undefined && value !== '';

package/src/contexts/BaseColorContext.tsx

@@ -0,0 +1,8 @@
+import { createContext } from 'react';
+
+import { BaseColors } from '../lib';
+import { Color } from '../lib/inputTypes';
+
+const BaseColorContext = createContext<Color>(BaseColors.Blue);
+
+export default BaseColorContext;

package/src/contexts/HoveredValueContext.tsx

@@ -0,0 +1,12 @@
+import { Dispatch, SetStateAction, createContext } from 'react';
+
+export interface HoveredValueContextValue {
+  hoveredValue: any | undefined;
+  setHoveredValue?: Dispatch<SetStateAction<any>>;
+}
+
+const HoveredValueContext = createContext<HoveredValueContextValue>({
+  hoveredValue: undefined,
+});
+
+export default HoveredValueContext;

package/src/contexts/RootStylesContext.tsx

@@ -0,0 +1,5 @@
+import { createContext } from 'react';
+
+const RootStylesContext = createContext<string | undefined>(undefined);
+
+export default RootStylesContext;

package/src/contexts/SelectedValueContext.tsx

@@ -0,0 +1,13 @@
+import { createContext } from 'react';
+
+export interface SelectedValueContextValue {
+  selectedValue: any;
+  handleValueChange: ((value: any) => void) | undefined;
+}
+
+const SelectedValueContext = createContext<SelectedValueContextValue>({
+  selectedValue: undefined,
+  handleValueChange: undefined,
+});
+
+export default SelectedValueContext;

package/src/contexts/index.ts

@@ -0,0 +1,4 @@
+export { default as BaseColorContext } from './BaseColorContext';
+export { default as HoveredValueContext } from './HoveredValueContext';
+export { default as RootStylesContext } from './RootStylesContext';
+export { default as SelectedValueContext } from './SelectedValueContext';

package/src/hooks/index.ts

@@ -0,0 +1,4 @@
+export { default as useInternalState } from "./useInternalState";
+export { default as useOnClickOutside } from "./useOnClickOutside";
+export { default as useOnWindowResize } from "./useOnWindowResize";
+export { default as useSelectOnKeyDown } from "./useSelectOnKeyDown";

package/src/hooks/useInternalState.tsx

@@ -0,0 +1,18 @@
+import { useState } from "react";
+
+const useInternalState = <T,>(defaultValueProp: T, valueProp: T) => {
+  const isControlled = valueProp !== undefined;
+  const [valueState, setValueState] = useState(defaultValueProp);
+
+  const value = isControlled ? valueProp : valueState;
+  const setValue = (nextValue: T) => {
+    if (isControlled) {
+      return;
+    }
+    setValueState(nextValue);
+  };
+
+  return [value, setValue] as [T, React.Dispatch<React.SetStateAction<T>>];
+};
+
+export default useInternalState;

package/src/hooks/useOnClickOutside.tsx

@@ -0,0 +1,23 @@
+import { useEffect } from "react";
+
+const useOnClickOutside = (
+  ref: React.RefObject<HTMLDivElement>,
+  handler: { (event: any): void },
+) => {
+  useEffect(() => {
+    const listener = (event: any) => {
+      if (!ref.current || ref.current.contains(event.target)) {
+        return;
+      }
+      handler(event);
+    };
+    document.addEventListener("mousedown", listener);
+    document.addEventListener("touchstart", listener);
+    return () => {
+      document.removeEventListener("mousedown", listener);
+      document.removeEventListener("touchstart", listener);
+    };
+  }, [ref, handler]);
+};
+
+export default useOnClickOutside;

package/src/hooks/useOnWindowResize.tsx

@@ -0,0 +1,17 @@
+import { useEffect, useState } from "react";
+
+const useOnWindowResize = (handler: { (): void }, initialWindowSize?: number) => {
+  const [windowSize, setWindowSize] = useState<undefined | number>(initialWindowSize);
+  useEffect(() => {
+    const handleResize = () => {
+      setWindowSize(window.innerWidth);
+      handler();
+    };
+    handleResize();
+    window.addEventListener("resize", handleResize);
+
+    return () => window.removeEventListener("resize", handleResize);
+  }, [handler, windowSize]);
+};
+
+export default useOnWindowResize;

package/src/hooks/useSelectOnKeyDown.tsx

@@ -0,0 +1,80 @@
+import { useEffect, useState } from "react";
+
+const useSelectOnKeyDown = (
+  onValueChange: (value: string) => void,
+  optionValues: string[],
+  isFocused: boolean,
+  handleFocusChange: (isFocused: boolean) => void,
+  value?: string,
+): [
+  string | null | undefined,
+  (e: React.KeyboardEvent<HTMLDivElement | HTMLButtonElement>) => void,
+] => {
+  const NO_SELECTION_IDX = -1;
+  const [hoveredIdx, setHoveredIdx] = useState(NO_SELECTION_IDX);
+
+  const getHoveredValue = (hoveredIdx: number, optionValues: string[]) => {
+    if (hoveredIdx < 0) return undefined;
+    return optionValues[hoveredIdx];
+  };
+
+  useEffect(() => {
+    const getIndexOfSelectedValue = () => {
+      if (!isFocused) {
+        setHoveredIdx(NO_SELECTION_IDX);
+      }
+      if (!value) return NO_SELECTION_IDX;
+      const indexOfValue = optionValues.indexOf(value);
+      return indexOfValue === -1 ? NO_SELECTION_IDX : indexOfValue;
+    };
+
+    setHoveredIdx(getIndexOfSelectedValue());
+  }, [value, isFocused]);
+
+  const hoveredValue = getHoveredValue(hoveredIdx, optionValues);
+
+  const getNextIdx = () => {
+    const nextIdx = hoveredIdx + 1;
+    return Math.min(nextIdx, optionValues.length - 1);
+  };
+
+  const getPrevIdx = () => {
+    const prevIdx = hoveredIdx - 1;
+    return Math.max(prevIdx, 0);
+  };
+
+  const handleKeyDown = (e: React.KeyboardEvent<HTMLDivElement | HTMLButtonElement>) => {
+    if (!isFocused) {
+      return;
+    }
+
+    switch (e.key) {
+      case "ArrowUp": {
+        e.preventDefault();
+        setHoveredIdx(getPrevIdx());
+        break;
+      }
+      case "ArrowDown": {
+        e.preventDefault();
+        setHoveredIdx(getNextIdx());
+        break;
+      }
+      case "Enter": {
+        e.preventDefault();
+        if (hoveredValue) {
+          onValueChange(hoveredValue);
+        }
+        break;
+      }
+      case "Escape": {
+        e.preventDefault();
+        handleFocusChange(false);
+        setHoveredIdx(NO_SELECTION_IDX);
+        break;
+      }
+    }
+  };
+  return [hoveredValue, handleKeyDown];
+};
+
+export default useSelectOnKeyDown;

package/src/index.ts

@@ -0,0 +1,4 @@
+// src/index.ts
+export { default as Dashboard } from './Dashboard';
+export { default as QuillProvider } from './QuillProvider';
+export { default as Chart } from './Chart';