pentatrion-design 0.0.4 → 0.0.6

package/README.md

@@ -41,18 +41,17 @@ Créer un fichier `tailwind.config.js` et `postcss.config.js`.
 // tailwind.config.js
 
 /** @type {import('tailwindcss').Config} */
-export default {
-  content: [
-    "./index.html",
-    "./src/**/*.{js,ts,jsx,tsx}",
-  ],
+const config = {
+  content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"],
   darkMode: ["class"],
 };
 
+export default config;
+
 
 // postcss.config.js
 /** @type {import("postcss-load-config").Config} */
-export default {
+const config = {
   plugins: {
     "tailwindcss/nesting": {},
     tailwindcss: {},
@@ -62,11 +61,18 @@ export default {
     "postcss-input-range": {}
   },
 };
+export default config;
 ```
 
 Mettre à jour le fichier `src/index.css`
 ```css
-/* on utilisera des imports pour faciliter l'intégration du design système */
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+/**
+ * ou bien on utilisera des imports pour faciliter l'intégration du design système
+ */
 @import "tailwindcss/base";
 @import "tailwindcss/components";
 @import "tailwindcss/utilities";
@@ -86,10 +92,11 @@ Mettre à jour la configuration de tailwind.
 + import { pentatrionTw } from "pentatrion-design/tailwind";
 
 /** @type {import('tailwindcss').Config} */
-export default {
+const config = {
   content: [
     "./index.html",
     "./src/**/*.{js,ts,jsx,tsx}",
++   "./node_modules/pentatrion-design/lib/**/*.{ts,tsx}",
 +   "./node_modules/pentatrion-design/components/**/*.{ts,tsx}",
 +   "./node_modules/pentatrion-design/hooks/**/*.{ts,tsx}",
 +   "./node_modules/pentatrion-design/redux/**/*.{ts,tsx}",
@@ -97,6 +104,9 @@ export default {
   darkMode: ["class"],
 +  plugins: [pentatrionTw],
 };
+
+export default config;
+
 ```
 
 La dépendance `pentatrion-fonts` est optionnelle.
@@ -128,27 +138,6 @@ export default App
 
 L'import minimal `import { Button } from "pentatrion-design/components/button";` est plus contraignant et n'est pas nécessaire si votre projet utilise toutes les dépendances de `pentatrion-design`. si par contre votre projet n'utilise que certains composants et n'utilise pas certains dépendances comme `react-sortablejs` il vaut mieux utiliser l'import `pentatrion-design/components/button`. Cela allégera le build (que notre compilateur fasse du tree shaking ou non).
 
-Mettre à jour `src/index.css`
-```diff
-/* index.css */
-@import "tailwindcss/base";
-+ @import "pentatrion-design/tailwind/base.css" layer(base);
-
-@import "tailwindcss/components";
-+ @import "pentatrion-design/tailwind/components.css" layer(components);
-+ @import "pentatrion-design/tailwind/components-input-outline.css" layer(components);
-+ @import "pentatrion-design/tailwind/components-resize-area.css" layer(components);
-+ @import "pentatrion-design/tailwind/components-step.css" layer(components);
-
-@import "tailwindcss/utilities";
-+ @import "pentatrion-design/tailwind/utilities.css" layer(utilities);
-+ @import "pentatrion-design/tailwind/utilities-dialog.css" layer(utilities);
-
-/* Optionel */
-+ @import "pentatrion-fonts/fontello-lonlat";
-```
-
-
 ## projet sans TypeScript
 
 pour faciliter l'expérience de développement, `pentatrion-design` fait référence par défaut aux fichiers TypeScript non compilés. Si votre projet n'utilise pas TypeScript il faudra faire référence au dossier `dist`

package/components/autocomplete/Autocomplete.stories.tsx

@@ -0,0 +1,63 @@
+import { Meta, ReactRenderer } from "@storybook/react";
+
+import { useState } from "react";
+import { NotificationsProvider } from "../notification";
+import { Button } from "../button";
+import { SimpleAutocomplete, Autocomplete } from ".";
+import { Option } from "../select";
+import { PartialStoryFn } from "@storybook/types";
+import { options } from "./_fixtures";
+
+const meta = {
+  title: "Components/Autocomplete",
+  component: Autocomplete,
+  decorators: [
+    (Story) => (
+      <NotificationsProvider>
+        <Story />
+      </NotificationsProvider>
+    ),
+  ] as ((story: PartialStoryFn<ReactRenderer, any>) => JSX.Element)[],
+} satisfies Meta<typeof Autocomplete>;
+export default meta;
+
+export const Simple = () => {
+  const [selection, setSelection] = useState<Option | null>(null);
+
+  function handleClick(action: "random" | "unknown" | "unselect") {
+    switch (action) {
+      case "random":
+        setSelection(options[Math.floor(Math.random() * options.length)]);
+        break;
+      case "unknown":
+        setSelection({
+          value: "unknown",
+          label: "Unknown",
+        });
+        break;
+      case "unselect":
+        setSelection(null);
+        break;
+    }
+  }
+
+  return (
+    <>
+      <SimpleAutocomplete
+        options={options}
+        selection={selection}
+        onChangeSelection={setSelection}
+      />
+      <div>sélection : {selection && selection.label}</div>
+      <div>
+        <Button onClick={() => handleClick("random")} className="mr-2">
+          select random
+        </Button>
+        <Button onClick={() => handleClick("unknown")} className="mr-2">
+          select Unknown
+        </Button>
+        <Button onClick={() => handleClick("unselect")}>unselect</Button>
+      </div>
+    </>
+  );
+};

package/components/autocomplete/Autocomplete.tsx

@@ -0,0 +1,334 @@
+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";
+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="relative flex-center">
+            {loading && (
+              <Loader
+                size="medium"
+                color="gray"
+                className="absolute left-0 top-0"
+              />
+            )}
+            {icon === true ? (
+              <span className="h-8 w-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="relative flex-center">
+          {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 outline-none"
+                ref={refs.setFloating}
+                style={floatingStyles}
+                {...getFloatingProps()}
+              >
+                <Dialog
+                  placement={context.placement}
+                  className="overflow-auto motion-safe:animate-fade-in-list"
+                >
+                  <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/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 ".";
+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/components/autocomplete/LazyAutocomplete.tsx

@@ -0,0 +1,132 @@
+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 function LazyAutocomplete<O extends OptionLike = Option>({
+  onChangeSearchValueCallback,
+  debounce = 5000,
+  selection = null,
+  onChangeSelection,
+  ...rest
+}: Props<O>) {
+  const onChangeSelectionStable = useEventCallback(onChangeSelection);
+  const onChangeSearchValueCallbackStable = useEventCallback(onChangeSearchValueCallback);
+
+  const [searchValue, searchValueDebounced, setSearchValue] = useStateDebounce(
+    selection ? getOptionLabel(selection) : "",
+    debounce,
+  );
+  // console.log(searchValue, searchValueDebounced);
+
+  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("", true);
+      }
+      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);
+
+    onChangeSearchValueCallbackStable(searchValueDebounced)
+      ?.then((newOptions) => {
+        setLoading(false);
+
+        if (!abort) {
+          setOptions(newOptions);
+        }
+      })
+      .catch(() => {
+        setLoading(false);
+      });
+
+    return () => {
+      setLoading(false);
+      abort = true;
+    };
+  }, [selection, searchValueDebounced, onChangeSearchValueCallbackStable]);
+
+  return (
+    <Autocomplete
+      ref={inputRef}
+      searchValue={searchValue}
+      onChangeSearchValue={(newValue, immediate) => {
+        setSearchValue(newValue, immediate || newValue === "" ? true : false);
+      }}
+      selection={selection}
+      onChangeSelection={handleChangeSelection}
+      options={options}
+      loading={loading}
+      {...rest}
+    />
+  );
+}