pentatrion-design 0.0.1

package/src/components/autocomplete/Autocomplete.tsx

@@ -0,0 +1,316 @@
+import {
+  ChangeEvent,
+  KeyboardEvent,
+  useCallback,
+  useMemo,
+  useRef,
+  useState,
+  forwardRef,
+  ForwardedRef,
+  ReactNode,
+} from "react";
+import type { OptionLike, Option } from "../select";
+import AutocompleteOption, { AutocompleteOptionProps } from "./AutocompleteOption.tsx";
+import {
+  FloatingFocusManager,
+  FloatingList,
+  FloatingPortal,
+  Placement,
+  autoUpdate,
+  flip,
+  offset,
+  size,
+  useDismiss,
+  useFloating,
+  useInteractions,
+  useListNavigation,
+  useRole,
+} from "@floating-ui/react";
+import { AutocompleteContext } from "./useAutocompleteContext.ts";
+import clsx from "clsx";
+import { useEventCallback } from "~/hooks";
+
+import { getOptionLabel, getOptionValue } from "./util.ts";
+import { Button } from "../button";
+import { Dialog } from "../dialog";
+import Loader from "../loader/Loader";
+import { inputConfig } from "../input/Input.tsx";
+import { ThemeColor } from "~/types.d";
+
+export interface AutocompleteProps<O extends OptionLike = Option> {
+  className?: string;
+
+  icon?: boolean | ReactNode;
+
+  color?: ThemeColor;
+
+  /**
+   * render suffix only if selection
+   * ex: add contextuel buttons associated to selection
+   */
+  selectionSuffix?: ReactNode;
+  /**
+   * render suffix only if selection and searchValue is empty
+   */
+  noSearchSuffix?: ReactNode;
+
+  placement?: Placement;
+  placeholder?: string;
+  /**
+   * search string used as value for <input>
+   */
+  searchValue: string;
+  /**
+   * change handler when typing in the input
+   * or when clicking on an option (the label value is passed)
+   */
+  onChangeSearchValue: (value: string, selectionLabel: boolean) => void;
+
+  selection?: O | null;
+  /**
+   * select handler for a selection from the autocomplete's dropdown
+   * the option object is passed when clicking on an option
+   * null value is passed when typing a new character in the input search.
+   */
+  onChangeSelection: (option: O | null) => void;
+  options: O[];
+
+  autocompleteOptionComponent?: (props: AutocompleteOptionProps<O>) => ReactNode;
+
+  loading?: boolean;
+
+  clearSearchButton?: boolean;
+
+  selectOnFocus?: boolean;
+}
+
+function Autocomplete<O extends OptionLike = Option>(
+  {
+    className,
+    icon = true,
+    color = "yellow",
+    selectionSuffix,
+    noSearchSuffix,
+    placement = "bottom",
+    placeholder = "Search...",
+    selection = null,
+    onChangeSelection,
+    autocompleteOptionComponent,
+    loading = false,
+    clearSearchButton = false,
+    searchValue,
+    onChangeSearchValue,
+    options,
+    selectOnFocus = true,
+  }: AutocompleteProps<O>,
+  inputRef: ForwardedRef<HTMLInputElement>,
+) {
+  const [isOpen, setIsOpen] = useState(false);
+  const [activeIndex, setActiveIndex] = useState<number | null>(null);
+
+  const onChangeSearchValueStable = useEventCallback(onChangeSearchValue);
+  const onChangeSelectionStable = useEventCallback(onChangeSelection);
+
+  const OptionComponent = autocompleteOptionComponent ?? AutocompleteOption;
+
+  const listRef = useRef<Array<HTMLElement | null>>([]);
+
+  const { refs, floatingStyles, context } = useFloating({
+    placement,
+    open: isOpen,
+    onOpenChange: setIsOpen,
+    whileElementsMounted: autoUpdate,
+    middleware: [
+      offset(5),
+      flip({ padding: 10 }),
+      size({
+        apply({ rects, elements, availableHeight }) {
+          Object.assign(elements.floating.style, {
+            width: `${Math.max(130, rects.reference.width)}px`,
+          });
+          const firstChild = elements.floating.firstElementChild as HTMLElement;
+          if (firstChild) {
+            firstChild.style.maxHeight = `${Math.min(availableHeight, 288)}px`;
+          }
+        },
+        padding: 10,
+      }),
+    ],
+  });
+
+  const role = useRole(context, { role: "listbox" });
+  const dismiss = useDismiss(context);
+  const listNav = useListNavigation(context, {
+    listRef,
+    activeIndex,
+    onNavigate: setActiveIndex,
+    /* we want the real focus to stay on the input, so focus associated to active items is simulated */
+    virtual: true,
+    loop: true,
+  });
+
+  const { getReferenceProps, getFloatingProps, getItemProps } = useInteractions([
+    role,
+    dismiss,
+    listNav,
+  ]);
+
+  function handleChangeSearchValue(e: ChangeEvent<HTMLInputElement>) {
+    const value = e.target.value;
+
+    onChangeSearchValueStable(value, false);
+
+    if (value !== searchValue && selection !== null) {
+      onChangeSelectionStable(null);
+      setActiveIndex(null);
+      return;
+    }
+
+    if (value) {
+      setIsOpen(true);
+      /**
+       * bug whith LazyAutocomplete activeIndex is set to 0 but the options array has immediately 0 elements
+       * so focus can't be set to the first Dom element.
+       */
+      setActiveIndex(listRef.current[0] ? 0 : null);
+    } else {
+      setIsOpen(false);
+      setActiveIndex(null);
+    }
+  }
+
+  const handleSelect = useCallback(
+    (index: number | null) => {
+      if (index === null) {
+        onChangeSelectionStable(null);
+      } else if (options[index]) {
+        const newSelection = options[index];
+        onChangeSelectionStable(newSelection);
+
+        onChangeSearchValueStable(getOptionLabel(newSelection), true);
+      }
+      setActiveIndex(null);
+      setIsOpen(false);
+    },
+
+    [options, onChangeSelectionStable, onChangeSearchValueStable],
+  );
+
+  const autocompleteContext = useMemo(
+    () => ({
+      activeIndex,
+      selection,
+      getItemProps,
+      handleSelect,
+    }),
+    [activeIndex, selection, getItemProps, handleSelect],
+  );
+
+  return (
+    <div className={className}>
+      <div className={clsx(inputConfig.container)} ref={refs.setReference} data-color={color}>
+        {icon !== false && (
+          <div className="flex-center relative">
+            {loading && <Loader size="medium" color="gray" className="absolute top-0 left-0" />}
+            {icon === true ? (
+              <span className="w-8 h-8 flex-center">
+                <i className="fe-search"></i>
+              </span>
+            ) : (
+              icon
+            )}
+          </div>
+        )}
+        <input
+          spellCheck="false"
+          className={clsx(inputConfig.input, icon === false && "pl-4")}
+          ref={inputRef}
+          type="search"
+          value={searchValue}
+          placeholder={placeholder}
+          aria-autocomplete="list"
+          {...getReferenceProps({
+            onFocus() {
+              if (selectOnFocus) {
+                (document.activeElement as HTMLInputElement)?.select();
+              }
+            },
+            onChange: handleChangeSearchValue,
+            onMouseDown() {
+              if (options.length === 0) {
+                return;
+              }
+              /**
+               * There is a already selection
+               * and the only element available is the selection,
+               * no need to display the dropdown.
+               */
+              // if (options.length === 1 && options[0].value === selection?.value) {
+              //   return;
+              // }
+              setIsOpen((isOpen) => !isOpen);
+            },
+            onKeyDown(e: KeyboardEvent<HTMLInputElement>) {
+              if (e.key === "Enter" && activeIndex != null) {
+                handleSelect(activeIndex);
+              }
+            },
+          })}
+        />
+        <div className="flex-center relative">
+          {selection && selectionSuffix}
+          {clearSearchButton && (searchValue.trim() !== "" || selection !== null) && (
+            <Button
+              withRipple={false}
+              icon
+              color="gray"
+              variant="text"
+              onClick={() => {
+                setIsOpen(false);
+                onChangeSelectionStable(null);
+                setActiveIndex(null);
+                onChangeSearchValueStable("", true);
+              }}
+            >
+              <i className="fe-cancel"></i>
+            </Button>
+          )}
+          {icon === false && loading && <Loader size="medium" color="gray" />}
+          {!selection && searchValue === "" && noSearchSuffix}
+        </div>
+      </div>
+      <FloatingPortal>
+        <AutocompleteContext.Provider value={autocompleteContext}>
+          {isOpen && (
+            <FloatingFocusManager
+              disabled={selectOnFocus}
+              context={context}
+              initialFocus={-1}
+              visuallyHiddenDismiss
+            >
+              <div
+                className="z-dialog"
+                ref={refs.setFloating}
+                style={floatingStyles}
+                {...getFloatingProps()}
+              >
+                <Dialog
+                  placement={context.placement}
+                  className="animate-fade-in-list overflow-auto"
+                >
+                  <FloatingList elementsRef={listRef}>
+                    {options.map((option) => {
+                      return <OptionComponent {...option} key={getOptionValue(option)} />;
+                    })}
+                  </FloatingList>
+                </Dialog>
+              </div>
+            </FloatingFocusManager>
+          )}
+        </AutocompleteContext.Provider>
+      </FloatingPortal>
+    </div>
+  );
+}
+
+export default forwardRef(Autocomplete);

package/src/components/autocomplete/AutocompleteOption.tsx

@@ -0,0 +1,35 @@
+import { memo, useId } from "react";
+import { OptionLike } from "../select";
+import { useListItem } from "@floating-ui/react";
+import useAutocomplete from "./useAutocompleteContext";
+import clsx from "clsx";
+import { getOptionLabel, getOptionValue } from "./util";
+
+export type AutocompleteOptionProps<O extends OptionLike> = O;
+
+function AutocompleteOption<O extends OptionLike>(props: AutocompleteOptionProps<O>) {
+  const label = getOptionLabel(props);
+
+  const id = useId();
+  const { activeIndex, selection, getItemProps, handleSelect } = useAutocomplete();
+  const { ref, index } = useListItem({ label });
+  const isActive = activeIndex === index;
+  const isSelected = selection ? getOptionValue(selection) === getOptionValue(props) : false;
+
+  return (
+    <div
+      className={clsx("option", isSelected && "bg-gray-2", isActive && "bg-gray-1")}
+      ref={ref}
+      role="option"
+      id={id}
+      aria-selected={isActive}
+      {...getItemProps({
+        onClick: () => handleSelect(index),
+      })}
+    >
+      {label}
+    </div>
+  );
+}
+
+export default memo(AutocompleteOption);

package/src/components/autocomplete/LazyAutocomplete.tsx

@@ -0,0 +1,130 @@
+import { useCallback, useEffect, useLayoutEffect, useRef, useState } from "react";
+import { Autocomplete, AutocompleteProps } from ".";
+import { OptionLike, Option } from "../select";
+import { getOptionLabel } from "./util";
+import { useStateDebounce, useEventCallback } from "~/hooks";
+
+interface Props<O extends OptionLike = Option>
+  // Omit "searchValue" | "onChangeSearchValue" | "options"
+  extends Pick<
+    AutocompleteProps<O>,
+    | "className"
+    | "icon"
+    | "color"
+    | "selectionSuffix"
+    | "noSearchSuffix"
+    | "placement"
+    | "placeholder"
+    | "selection"
+    | "onChangeSelection"
+    | "autocompleteOptionComponent"
+    | "loading"
+    | "clearSearchButton"
+  > {
+  onChangeSearchValueCallback: (searchValue: string) => Promise<O[]>;
+  debounce?: number;
+}
+
+export default function LazyAutocomplete<O extends OptionLike = Option>({
+  onChangeSearchValueCallback,
+  debounce = 500,
+  selection = null,
+  onChangeSelection,
+  ...rest
+}: Props<O>) {
+  const onChangeSelectionStable = useEventCallback(onChangeSelection);
+
+  const [searchValue, searchValueDebounced, setSearchValue] = useStateDebounce(
+    selection ? getOptionLabel(selection) : "",
+    debounce,
+  );
+
+  const searchValueRef = useRef(searchValue);
+  searchValueRef.current = searchValue;
+
+  const inputRef = useRef<HTMLInputElement>(null!);
+
+  const [loading, setLoading] = useState(false);
+
+  const [options, setOptions] = useState<O[]>([]);
+
+  const handleChangeSelection = useCallback(
+    (selection: O | null) => {
+      onChangeSelectionStable(selection);
+      if (selection) {
+        setOptions([]);
+      }
+    },
+    [onChangeSelectionStable],
+  );
+
+  // side effect, update the searchValue <input /> value when
+  // selection come from outside
+  useLayoutEffect(() => {
+    if (selection === null) {
+      if (document.activeElement !== inputRef.current) {
+        setSearchValue("");
+      }
+      return;
+    }
+
+    // we need the fresh value of searchValue but we don't
+    // want searchValue as useEffect dependency
+    const selectionLabel = getOptionLabel(selection);
+    if (searchValueRef.current !== selectionLabel) {
+      setSearchValue(selectionLabel, true);
+    }
+  }, [selection, setSearchValue]);
+
+  /**
+   * set new options when searchValueDebounced change
+   */
+  useEffect(() => {
+    let abort = false;
+
+    // when we're selecting option we change searchValue to be the complete label
+    // value but we don't want to fetch new research
+    if (selection) {
+      return;
+    }
+
+    if (searchValueDebounced.trim() === "") {
+      setOptions([]);
+      return;
+    }
+
+    setLoading(true);
+
+    onChangeSearchValueCallback(searchValueDebounced)
+      .then((newOptions) => {
+        setLoading(false);
+
+        if (!abort) {
+          setOptions(newOptions);
+        }
+      })
+      .catch(() => {
+        setLoading(false);
+      });
+
+    return () => {
+      setLoading(false);
+      abort = true;
+    };
+  }, [selection, searchValueDebounced, onChangeSearchValueCallback]);
+
+  return (
+    <Autocomplete
+      ref={inputRef}
+      searchValue={searchValue}
+      onChangeSearchValue={(newValue, immediate) => {
+        setSearchValue(newValue, immediate || newValue === "" ? true : false);
+      }}
+      selection={selection}
+      onChangeSelection={handleChangeSelection}
+      options={options}
+      loading={loading}
+      {...rest}
+    />
+  );
+}

package/src/components/autocomplete/SimpleAutocomplete.tsx

@@ -0,0 +1,74 @@
+import { useLayoutEffect, useRef, useState } from "react";
+import { Autocomplete, AutocompleteProps } from ".";
+import { Option, OptionLike } from "../select";
+import { useEventCallback } from "~/hooks";
+import { getOptionLabel } from "./util";
+
+interface Props<O extends OptionLike = Option>
+  extends Pick<
+    AutocompleteProps<O>,
+    | "className"
+    | "icon"
+    | "color"
+    | "placement"
+    | "placeholder"
+    | "selection"
+    | "onChangeSelection"
+    | "autocompleteOptionComponent"
+    | "options"
+    | "selection"
+  > {}
+
+export default function SimpleAutocomplete<O extends OptionLike = Option>({
+  options,
+  selection = null,
+  onChangeSelection,
+  ...rest
+}: Props<O>) {
+  const onChangeSelectionStable = useEventCallback(onChangeSelection);
+
+  const [searchValue, setSearchValue] = useState(selection ? getOptionLabel(selection) : "");
+
+  const searchValueRef = useRef(searchValue);
+  searchValueRef.current = searchValue;
+
+  const inputRef = useRef<HTMLInputElement>(null!);
+
+  // side effect, update the searchValue <input /> value when
+  // selection come from outside
+  useLayoutEffect(() => {
+    if (selection === null) {
+      if (document.activeElement !== inputRef.current) {
+        setSearchValue("");
+      }
+      return;
+    }
+
+    // we need the fresh value of searchValue but we don't
+    // want searchValue as useEffect dependency
+    const selectionLabel = getOptionLabel(selection);
+    if (searchValueRef.current !== getOptionLabel(selection)) {
+      setSearchValue(selectionLabel);
+    }
+  }, [selection, setSearchValue]);
+
+  const filteredOptions =
+    selection !== null
+      ? []
+      : options.filter((option) => {
+          const optionLabel = getOptionLabel(option);
+          return optionLabel.toLowerCase().startsWith(searchValue.toLowerCase());
+        });
+
+  return (
+    <Autocomplete
+      ref={inputRef}
+      searchValue={searchValue}
+      onChangeSearchValue={setSearchValue}
+      selection={selection}
+      onChangeSelection={onChangeSelectionStable}
+      options={filteredOptions}
+      {...rest}
+    />
+  );
+}

package/src/components/autocomplete/index.ts

@@ -0,0 +1,6 @@
+export { default as Autocomplete, type AutocompleteProps } from "./Autocomplete";
+export { default as SimpleAutocomplete } from "./SimpleAutocomplete";
+export { default as AutocompleteOption } from "./AutocompleteOption";
+export { default as LazyAutocomplete } from "./LazyAutocomplete";
+export { default as useAutocomplete } from "./useAutocompleteContext";
+export { getOptionValue, getOptionLabel } from "./util";

package/src/components/autocomplete/useAutocompleteContext.ts

@@ -0,0 +1,20 @@
+import { useInteractions } from "@floating-ui/react";
+import { createContext, useContext } from "react";
+import { OptionLike } from "../select";
+
+interface AutocompleteContext {
+  activeIndex: number | null;
+  selection: OptionLike | null;
+  getItemProps: ReturnType<typeof useInteractions>["getItemProps"];
+  handleSelect: (index: number | null) => void;
+}
+
+export const AutocompleteContext = createContext<AutocompleteContext | null>(null);
+
+export default function useAutocomplete() {
+  const context = useContext(AutocompleteContext);
+  if (context === null) {
+    throw new Error("Autocomplete components must be wrapped in <Autocomplete>");
+  }
+  return context;
+}

package/src/components/autocomplete/util.ts

@@ -0,0 +1,19 @@
+import { OptionLike } from "../select";
+
+export function getOptionLabel(option: OptionLike) {
+  switch (option.type) {
+    case "Feature":
+      return option.properties.label;
+    default:
+      return option.label;
+  }
+}
+
+export function getOptionValue(option: OptionLike) {
+  switch (option.type) {
+    case "Feature":
+      return option.properties.id;
+    default:
+      return option.value;
+  }
+}

package/src/components/badge/Badge.stories.tsx

@@ -0,0 +1,72 @@
+import Badge from "./Badge";
+import { Meta, StoryObj } from "@storybook/react";
+import { action } from "@storybook/addon-actions";
+
+const onClickAction = action("onClick");
+const onRemoveAction = action("onRemove");
+
+const meta = {
+  title: "Components/Badge",
+  component: Badge,
+  argTypes: {
+    color: {
+      control: {
+        type: "select",
+      },
+      options: ["yellow", "gray", "red", "orange", "green", "blue"],
+    },
+  },
+} satisfies Meta<typeof Badge>;
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Playbook: Story = {
+  args: {
+    tooltip: "More infos...",
+    url: "https://lonlat.org",
+    color: "yellow",
+    children: "Lonlat",
+  },
+};
+
+export const Context = () => {
+  return (
+    <div className="flex flex-col gap-2">
+      <Badge color="yellow">Primary</Badge>
+      <Badge color="orange">Warning</Badge>
+      <Badge color="green">Success</Badge>
+      <Badge color="red">Danger</Badge>
+      <Badge color="blue">Info</Badge>
+      <Badge color="gray">Weak</Badge>
+      <Badge color="yellow" onClick={onClickAction}>
+        Primary clickable
+      </Badge>
+      <Badge color="orange" onClick={onClickAction}>
+        Warning clickable
+      </Badge>
+      <Badge color="green" onClick={onClickAction}>
+        Success clickable
+      </Badge>
+      <Badge color="red" onClick={onClickAction}>
+        Danger clickable
+      </Badge>
+      <Badge color="blue" onClick={onClickAction}>
+        Info clickable
+      </Badge>
+      <Badge color="gray" onClick={onClickAction}>
+        Weak clickable
+      </Badge>
+      <Badge color="yellow" onRemove={onRemoveAction}>
+        Primary removable
+      </Badge>
+      <Badge color="yellow" onClick={onClickAction} onRemove={onRemoveAction}>
+        Primary clickable removable
+      </Badge>
+
+      <Badge color="yellow" tooltip="More infos...">
+        With tooltip !
+      </Badge>
+    </div>
+  );
+};