pentatrion-design 0.0.1

package/src/components/select/Select.stories.tsx

@@ -0,0 +1,248 @@
+import { Meta } from "@storybook/react";
+
+import { useListItem } from "@floating-ui/react";
+import { useState } from "react";
+
+import clsx from "clsx";
+import { action } from "@storybook/addon-actions";
+
+import { SelectValue } from "./Select";
+import { useSelect, Select, SelectSelectionProps, Option } from ".";
+
+const onChangeAction = action("onChange");
+
+const meta = {
+  title: "Components/Select",
+  component: Select,
+} satisfies Meta<typeof Select>;
+export default meta;
+
+const departments = [
+  { value: "38", label: "Isère" },
+  { value: "74", label: "Haute-Savoie" },
+  { value: "73", label: "Savoie" },
+];
+
+const townsByDepartment = {
+  "38": [
+    { value: "grenoble", label: "Grenoble" },
+    { value: "meylan", label: "Meylan" },
+    { value: "voreppe", label: "Voreppe" },
+  ],
+  "73": [
+    { value: "chambery", label: "Chambéry" },
+    { value: "albertville", label: "Albertville" },
+  ],
+  "74": [
+    { value: "annecy", label: "Annecy" },
+    { value: "annemasse", label: "Annemasse" },
+    { value: "avoriaz", label: "Avoriaz" },
+  ],
+};
+
+const options = [
+  { value: "abbeville", label: "Abbeville" },
+  { value: "agde", label: "Agde" },
+  { value: "agen", label: "Agen" },
+  { value: "aixenprovence", label: "Aix-en-Provence" },
+  { value: "ajaccio", label: "Ajaccio" },
+  { value: "albi", label: "Albi" },
+  // { value: "alencon", label: "Alençon" },
+  // { value: "amiens", label: "Amiens" },
+  // { value: "angers", label: "Angers" },
+  // { value: "angouleme", label: "Angoulême" },
+  // { value: "annonay", label: "Annonay" },
+  // { value: "antibes", label: "Antibes" },
+  // { value: "arcachon", label: "Arcachon" },
+  // { value: "arles", label: "Arles" },
+  // { value: "arras", label: "Arras" },
+  // { value: "asnieres-sur-seine", label: "Asnières-sur-Seine" },
+  // { value: "aubagne", label: "Aubagne" },
+  // { value: "aubervilliers", label: "Aubervilliers" },
+  // { value: "aulnay-sous-bois", label: "Aulnay-sous-Bois" },
+  // { value: "avignon", label: "Avignon" },
+  // { value: "avranches", label: "Avranches" },
+  // { value: "avoriaz", label: "Avoriaz" },
+  // { value: "avray", label: "Avray" },
+];
+
+export const Basic = () => {
+  const [value, setValue] = useState<SelectValue>(null);
+  return (
+    <div className="grid gap-2 grid-cols-1">
+      <Select
+        searchable={false}
+        placeholder="Select your town..."
+        options={options}
+        value={value}
+        onChange={(o) => {
+          onChangeAction(o);
+          setValue(o.target.value);
+        }}
+      ></Select>
+      <Select
+        variant="ghost"
+        searchable={false}
+        placeholder="Select your town..."
+        options={options}
+        value={value}
+        onChange={(o) => {
+          onChangeAction(o);
+          setValue(o.target.value);
+        }}
+      ></Select>
+    </div>
+  );
+};
+
+export const NotRequired = () => {
+  const [value, setValue] = useState<SelectValue>(null);
+  return (
+    <Select
+      required={false}
+      placeholder="Select your town..."
+      options={options}
+      value={value}
+      onChange={(o) => {
+        onChangeAction(o);
+        setValue(o.target.value);
+      }}
+    ></Select>
+  );
+};
+
+export const Searchable = () => {
+  const [value, setValue] = useState<SelectValue>(null);
+  return (
+    <Select
+      searchable={true}
+      placeholder="Select your town..."
+      options={options}
+      value={value}
+      onChange={(o) => {
+        onChangeAction(o);
+        setValue(o.target.value);
+      }}
+    ></Select>
+  );
+};
+
+// export const Multiple = () => {
+//   const [values, setValues] = useState<string[]>([]);
+//   return (
+//     <Select
+//       multiple={true}
+//       placeholder="Select your towns..."
+//       options={options}
+//       value={values}
+//       onChange={(options) => {
+//         onChangeAction(options);
+//         setValues(options.map((o) => o.value));
+//       }}
+//     ></Select>
+//   );
+// };
+
+function isDepartment(department: number | string | null): department is "38" | "73" | "74" {
+  return department !== null && ["38", "73", "74"].indexOf(department.toString()) !== -1;
+}
+
+export const Dynamic = () => {
+  const [town, setTown] = useState<SelectValue>(null);
+  const [department, setDepartment] = useState<SelectValue>(null);
+  return (
+    <>
+      <div className="flex flex-col gap-2">
+        <Select
+          required={false}
+          placeholder="Select your department..."
+          options={departments}
+          value={department}
+          onChange={(o) => {
+            onChangeAction(o);
+            setDepartment(o.target.value);
+            setTown(null);
+          }}
+        ></Select>
+        {isDepartment(department) && (
+          <Select
+            required={false}
+            placeholder="Select your town..."
+            options={townsByDepartment[department] ?? []}
+            value={town}
+            onChange={(o) => {
+              onChangeAction(o);
+              setTown(o.target.value);
+            }}
+          ></Select>
+        )}
+      </div>
+    </>
+  );
+};
+
+type StarOption = Option & {
+  icon: string;
+};
+
+const stars: StarOption[] = [
+  { value: "empty", label: "Empty", icon: "fe-star-empty" },
+  { value: "half", label: "Half", icon: "fe-star-half" },
+  { value: "fill", label: "Fill", icon: "fe-star" },
+];
+
+function SelectOptionComponent({ icon, label }: StarOption) {
+  const { activeIndex, selectedIndex, getItemProps, handleSelect } = useSelect();
+
+  const { ref, index } = useListItem({ label });
+  const isActive = activeIndex === index;
+  const isSelected = selectedIndex === index;
+
+  return (
+    <button
+      className={clsx("option", isSelected && "bg-gray-2", isActive && "bg-gray-1")}
+      ref={ref}
+      role="option"
+      aria-selected={isActive && isSelected}
+      tabIndex={isActive ? 0 : -1}
+      {...getItemProps({
+        onClick: () => handleSelect(index),
+      })}
+    >
+      <i className={icon}></i> {label}
+    </button>
+  );
+}
+
+function SelectSelectionComponent({ label, icon }: SelectSelectionProps<StarOption>) {
+  return label ? (
+    <span>
+      <i className={icon}></i>
+    </span>
+  ) : (
+    <span>?</span>
+  );
+}
+
+export const CustomRenderer = () => {
+  const [value, setValue] = useState<SelectValue>("fill");
+  return (
+    <>
+      <Select
+        showArrow={false}
+        selectionClassName="ml-auto"
+        width="37px"
+        placement="bottom-end"
+        searchable={false}
+        options={stars}
+        value={value}
+        onChange={(o) => {
+          onChangeAction(o);
+          setValue(o.target.value);
+        }}
+        selectSelectionComponent={SelectSelectionComponent}
+        selectOptionComponent={SelectOptionComponent}
+      ></Select>
+    </>
+  );
+};

package/src/components/select/Select.tsx

@@ -0,0 +1,362 @@
+import {
+  ChangeEvent,
+  ReactElement,
+  ReactNode,
+  Ref,
+  forwardRef,
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from "react";
+import {
+  FloatingFocusManager,
+  FloatingList,
+  FloatingPortal,
+  Placement,
+  autoUpdate,
+  flip,
+  offset,
+  size,
+  useClick,
+  useDismiss,
+  useFloating,
+  useInteractions,
+  useListNavigation,
+  useMergeRefs,
+  useRole,
+  useTypeahead,
+} from "@floating-ui/react";
+import { SelectContext } from "./useSelectContext.ts";
+import SelectSelection, { SelectSelectionProps } from "./SelectSelection.tsx";
+
+import type { Option } from "./interface";
+import clsx from "clsx";
+import { Input } from "../input";
+import { Button } from "../button";
+import { useEventCallback } from "~/hooks";
+import { Dialog } from "../dialog";
+
+export type SelectValue = number | string | null;
+type ChangeEventLike = {
+  target: {
+    value: SelectValue;
+  };
+};
+
+type Props<O extends Option = Option> = {
+  disabled?: boolean;
+  variant?: "normal" | "ghost";
+  showArrow?: boolean;
+  selectionClassName?: string;
+  width?: number | string;
+  floatingMinWidth?: number;
+  placement?: Placement;
+  options: O[];
+  placeholder?: string;
+  getSearchableValue?: (matchReg: RegExp, option: O) => string;
+  searchable?: boolean;
+  required?: boolean;
+  selectOptionComponent?: (props: O) => ReactNode;
+  selectSelectionComponent?: (props: SelectSelectionProps<O>) => ReactNode;
+  value?: SelectValue;
+  onChange?: ((e: ChangeEventLike) => void) | null;
+  zIndex?: number;
+};
+
+function defaultGetSearchableValue(matchReg: RegExp, option: Option) {
+  return matchReg.test(option.label.toLowerCase().trim());
+}
+
+const Select = forwardRef<HTMLDivElement, Props>(
+  (
+    {
+      variant = "normal",
+      disabled = false,
+      showArrow = true,
+      selectionClassName,
+      width = "100%",
+      floatingMinWidth = 130,
+      placement = "bottom",
+      searchable = false,
+      required = true,
+      value = null,
+      onChange = null,
+      placeholder = "Select ...",
+      getSearchableValue,
+      selectSelectionComponent: SelectSelectionCustomComponent,
+      selectOptionComponent: SelectOptionCustomComponent,
+      options = [],
+      zIndex,
+    },
+    propRef,
+  ) => {
+    const isControlled = onChange !== null;
+
+    const onChangeStable = useEventCallback(onChange);
+
+    const [uncontrolledSelectedIndex, setUncontrolledSelectedIndex] = useState<number | null>(null);
+    const [search, setSearch] = useState("");
+
+    const filteredOptions = useMemo(
+      () =>
+        options.filter((option) => {
+          if (!searchable || search.trim() === "") {
+            return true;
+          }
+          const fn = getSearchableValue ?? defaultGetSearchableValue;
+          const matchReg = new RegExp(search.toLowerCase().trim());
+          return fn(matchReg, option);
+        }),
+      [searchable, search, getSearchableValue, options],
+    );
+
+    let selectedIndex: number | null = null;
+    if (isControlled) {
+      if (value !== null) {
+        const pos = filteredOptions.findIndex((o) => o.value === value);
+        if (pos !== -1) {
+          selectedIndex = pos;
+        }
+      }
+    } else {
+      selectedIndex = uncontrolledSelectedIndex;
+    }
+
+    const [isOpen, setIsOpen] = useState(false);
+    const [activeIndex, setActiveIndex] = useState<number | null>(null);
+    const [searchHasFocus, setSearchHasFocus] = useState(false);
+
+    const SelectSelectionComponent = SelectSelectionCustomComponent ?? SelectSelection;
+
+    function handleSearchChange(e: ChangeEvent<HTMLInputElement>) {
+      setActiveIndex(null);
+      setSearch(e.target.value);
+    }
+
+    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(floatingMinWidth, rects.reference.width)}px`,
+            });
+            const firstChild = elements.floating.firstElementChild as HTMLElement;
+            if (firstChild) {
+              firstChild.style.maxHeight = `${Math.min(availableHeight, 300)}px`;
+            }
+          },
+          padding: 10,
+        }),
+      ],
+    });
+
+    const ref = useMergeRefs([refs.setReference, propRef]);
+
+    const listRef = useRef<Array<HTMLElement | null>>([]);
+    const labelsRef = useRef<Array<string | null>>([]);
+    const isTypingRef = useRef(false);
+
+    const click = useClick(context, { event: "mousedown" });
+    const dismiss = useDismiss(context);
+    const role = useRole(context, { role: "listbox" });
+    const listNav = useListNavigation(context, {
+      listRef,
+      activeIndex,
+      focusItemOnHover: searchable ? false : true,
+      selectedIndex,
+      onNavigate: setActiveIndex,
+      loop: true,
+    });
+
+    const typeahead = useTypeahead(context, {
+      enabled: !searchHasFocus,
+      listRef: labelsRef,
+      activeIndex,
+      selectedIndex,
+      onMatch: isOpen ? setActiveIndex : undefined,
+      onTypingChange(isTyping) {
+        isTypingRef.current = isTyping;
+      },
+    });
+
+    const { getReferenceProps, getFloatingProps, getItemProps } = useInteractions([
+      listNav,
+      typeahead,
+      click,
+      dismiss,
+      role,
+    ]);
+
+    useEffect(() => {
+      if (SelectOptionCustomComponent) {
+        return;
+      }
+      filteredOptions.map((option, i) => {
+        labelsRef.current[i] = option.label;
+      });
+    }, [search, filteredOptions, SelectOptionCustomComponent]);
+
+    const handleSelect = useCallback(
+      (index: number | null) => {
+        setIsOpen(false);
+        setSearch("");
+        if (isControlled) {
+          const event: ChangeEventLike = {
+            target: {
+              value: index === null ? null : filteredOptions[index].value,
+            },
+          };
+          onChangeStable(event);
+        } else {
+          setUncontrolledSelectedIndex(index);
+        }
+      },
+      [isControlled, onChangeStable, filteredOptions],
+    );
+
+    const selectContext = useMemo(
+      () => ({
+        activeIndex,
+        selectedIndex,
+        getItemProps,
+        handleSelect,
+      }),
+      [activeIndex, selectedIndex, getItemProps, handleSelect],
+    );
+
+    const showCancelButton = !required && selectedIndex !== null;
+
+    return (
+      <div>
+        <div
+          className={clsx(
+            // "selection",
+            "rounded-2xl outline outline-1 outline-offset-[-1px] hover:outline-gray-3 flex focus-full:outline-yellow-4 focus-full:outline-2 cursor-pointer",
+            variant === "normal" ? "outline-gray-2" : "outline-transparent",
+            selectionClassName,
+            isOpen && "focus",
+            disabled && "disabled",
+          )}
+          ref={ref}
+          tabIndex={0}
+          style={{
+            width: typeof width === "number" ? `${width}px` : width,
+          }}
+          {...getReferenceProps()}
+        >
+          <span className={clsx("h-8 flex-1 flex items-center px-2")}>
+            {selectedIndex !== null ? (
+              <SelectSelectionComponent {...filteredOptions[selectedIndex]} key={selectedIndex} />
+            ) : (
+              placeholder
+            )}
+          </span>
+          {showCancelButton && (
+            <Button
+              withRipple={false}
+              icon
+              variant="text"
+              color="gray"
+              onMouseDown={(e) => {
+                // we don't want dropdown to open
+                e.stopPropagation();
+              }}
+              onClick={() => {
+                handleSelect(null);
+              }}
+            >
+              <i className="fe-cancel"></i>
+            </Button>
+          )}
+          {!showCancelButton && showArrow && (
+            <Button color="gray" withRipple={false} icon variant="text" focusable={false}>
+              <i className={isOpen ? "fe-angle-up" : "fe-angle-down"}></i>
+            </Button>
+          )}
+        </div>
+        <FloatingPortal>
+          <SelectContext.Provider value={selectContext}>
+            {isOpen && (
+              <FloatingFocusManager context={context} modal={false}>
+                <div
+                  className="z-dialog outline-none"
+                  ref={refs.setFloating}
+                  style={{
+                    ...floatingStyles,
+                    zIndex,
+                  }}
+                  {...getFloatingProps()}
+                >
+                  <Dialog
+                    placement={context.placement}
+                    className="animate-fade-in-list max-h-80 overflow-auto"
+                  >
+                    {searchable && (
+                      <div className="p-2">
+                        <Input
+                          placeholder="Search"
+                          tabIndex={selectedIndex === null ? 0 : -1}
+                          value={search}
+                          onChange={handleSearchChange}
+                          onFocus={() => setSearchHasFocus(true)}
+                          onBlur={() => setSearchHasFocus(false)}
+                        ></Input>
+                      </div>
+                    )}
+                    {SelectOptionCustomComponent ? (
+                      <FloatingList elementsRef={listRef} labelsRef={labelsRef}>
+                        {filteredOptions.map((option) => (
+                          <SelectOptionCustomComponent {...option} key={option.value} />
+                        ))}
+                      </FloatingList>
+                    ) : (
+                      filteredOptions.map((option, index) => {
+                        const isActive = activeIndex === index;
+                        const isSelected = selectedIndex === index;
+
+                        return (
+                          <button
+                            key={option.value}
+                            className={clsx(
+                              "option",
+                              isSelected && "bg-gray-2",
+                              isActive && "bg-gray-1",
+                            )}
+                            role="option"
+                            aria-selected={isActive && isSelected}
+                            tabIndex={isActive ? 0 : -1}
+                            ref={(node) => {
+                              listRef.current[index] = node;
+                            }}
+                            {...getItemProps({
+                              onClick: () => handleSelect(index),
+                            })}
+                          >
+                            {option.label}
+                          </button>
+                        );
+                      })
+                    )}
+                  </Dialog>
+                </div>
+              </FloatingFocusManager>
+            )}
+          </SelectContext.Provider>
+        </FloatingPortal>
+      </div>
+    );
+  },
+
+  // see : React with Typescript -- Generics while using React.forwardRef
+  // https://stackoverflow.com/questions/58469229/react-with-typescript-generics-while-using-react-forwardref
+) as <O extends Option>(p: Props<O> & { ref?: Ref<HTMLDivElement> }) => ReactElement;
+
+export default Select;

package/src/components/select/SelectOption.tsx

@@ -0,0 +1,29 @@
+import { useListItem } from "@floating-ui/react";
+import { useSelect } from ".";
+import clsx from "clsx";
+import { Option } from "./interface";
+
+type Props<O extends Option> = O;
+
+export default function SelectOption<O extends Option>({ label }: Props<O>) {
+  const { activeIndex, selectedIndex, getItemProps, handleSelect } = useSelect();
+
+  const { ref, index } = useListItem({ label });
+  const isActive = activeIndex === index;
+  const isSelected = selectedIndex === index;
+
+  return (
+    <button
+      className={clsx("option", isSelected && "bg-gray-2", isActive && "bg-gray-1")}
+      ref={ref}
+      role="option"
+      aria-selected={isActive && isSelected}
+      tabIndex={isActive ? 0 : -1}
+      {...getItemProps({
+        onClick: () => handleSelect(index),
+      })}
+    >
+      {label}
+    </button>
+  );
+}

package/src/components/select/SelectSelection.tsx

@@ -0,0 +1,13 @@
+import Badge from "../badge/Badge";
+import type { Option } from "./interface";
+
+export type SelectSelectionProps<O extends Option> = O & {
+  multiple?: boolean;
+};
+
+export default function SelectSelection<O extends Option>({
+  label,
+  multiple = false,
+}: SelectSelectionProps<O>) {
+  return multiple ? <Badge className="ml-1">{label}</Badge> : <span>{label}</span>;
+}

package/src/components/select/index.ts

@@ -0,0 +1,5 @@
+export { default as SelectOption } from "./SelectOption";
+export { default as SelectSelection, type SelectSelectionProps } from "./SelectSelection";
+export { default as Select } from "./Select";
+export { default as useSelect, SelectContext } from "./useSelectContext";
+export type * from "./interface";

package/src/components/select/interface.d.ts

@@ -0,0 +1,36 @@
+import { BBox, Geometry } from "geojson";
+
+export type OptionLike = Option | GeoOption;
+
+export type Option = {
+  type?: "Option";
+  value: string;
+  label: string;
+  sourceId?: string | number;
+};
+
+export type NoDataOption = {
+  id: string;
+  type: "nodata";
+};
+
+/** For compatibility with OptionLike. get original types from pentatrion-geo */
+type GeoOption<G extends Geometry | null = Geometry, T extends string = string> = {
+  id: string;
+  type: "Feature";
+  properties: FeatureProperties<T>;
+  geometry: G;
+  bbox?: BBox | undefined;
+};
+
+type FeatureProperties<T extends string = string> = {
+  id: string;
+
+  /** computed name + short context for input string */
+  label: string;
+  name: string;
+  context: string | null;
+  score: number;
+  type: T;
+  originalProperties?: any;
+};