pentatrion-design 0.0.1

package/src/components/quick-settings/QuickSettings.stories.tsx

@@ -0,0 +1,182 @@
+import { Meta } from "@storybook/react";
+import { useState } from "react";
+import { Button } from "../button";
+import { Checkbox, Input } from "../input";
+import { Select } from "../select";
+
+const meta = {
+  title: "Components/QuickSettings",
+  decorators: (Story) => (
+    <div className="grid grid-cols-1 gap-8" style={{ width: "350px" }}>
+      <Story />
+    </div>
+  ),
+} satisfies Meta;
+export default meta;
+
+const profileOptions = [
+  { value: "car", label: "Voiture" },
+  { value: "pedestrian", label: "Piéton" },
+];
+
+const directionOptions = [
+  { value: "departure", label: "Départ" },
+  { value: "arrival", label: "Arrivée" },
+];
+
+// const quicksettingConfig = {
+//   setting: "flex items-center justify-between first:text-gray-6 first:text-sm",
+// };
+
+export const Basic = () => {
+  const [profile, setProfile] = useState<string | null>("car");
+  const [direction, setDirection] = useState<string | null>("departure");
+  return (
+    <div className="grid grid-cols-1 gap-2">
+      <div>
+        <div className="p8n-setting">
+          <div>Coordonnées</div>
+          <div>
+            <span className="text-gray-6 text-sm">lon/lat </span>
+            6.497886, 46.091857
+          </div>
+        </div>
+        <div className="p8n-setting">
+          <div>Altitude</div>
+          <div>
+            500 <span className="text-gray-6 text-sm">m</span>
+          </div>
+        </div>
+      </div>
+      <div className="actions flex gap-2">
+        <Button variant="text" color="gray" size="large" className="flex-1 min-w-0">
+          <span className="flex-center w-full">
+            <i className="fe-isochrone text-2xl"></i>
+          </span>
+        </Button>
+        <Button variant="text" color="gray" size="large" className="flex-1 min-w-0">
+          <span className="flex-center w-full">
+            <i className="fe-route text-2xl"></i>
+          </span>
+        </Button>
+        <Button variant="text" color="gray" size="large" className="flex-1 min-w-0">
+          <span className="flex-center w-full">RAW</span>
+        </Button>
+      </div>
+
+      <div className="actions flex gap-2">
+        <Button variant="text" color="gray" size="large" className="flex-1 min-w-0">
+          <span className="flex-center w-full">
+            <i className="fe-stopwatch"></i>
+            isochrone
+          </span>
+        </Button>
+        <Button variant="text" color="gray" size="large" className="flex-1 min-w-0">
+          <span className="flex-center w-full">
+            <i className="fe-ruler"></i>
+            isodistance
+          </span>
+        </Button>
+      </div>
+
+      <div className="ll-steps-extra">
+        <Button variant="ghost" color="gray">
+          <span
+            className="ll-marker"
+            style={{ "--marker-color": "#c0c0c0", "--marker-size": "34px" }}
+          >
+            <span className="marker">
+              <span className="ovale"></span>
+              <i className="fe-plus"></i>
+            </span>
+            <span className="target"></span>
+          </span>
+          <span>Ajouter un point</span>
+        </Button>
+
+        <Button icon variant="text" color="gray">
+          <i className="fe-sliders"></i>
+        </Button>
+      </div>
+
+      <div className="p8n-setting">
+        <div>Temps</div>
+        <Input suffix="min" defaultValue="0" />
+      </div>
+      <div className="p8n-setting">
+        <div>Distance</div>
+        <div>
+          <Input suffix="km" />
+        </div>
+      </div>
+
+      <div className="p8n-setting">
+        <div>Mode de transport</div>
+        <div>
+          <Select
+            variant="ghost"
+            options={profileOptions}
+            value={profile}
+            onChange={(o) => {
+              // @ts-ignore
+              setProfile(o.target.value);
+            }}
+          ></Select>
+        </div>
+      </div>
+      <div className="p8n-setting">
+        <div>Sens de parcours</div>
+        <Select
+          variant="ghost"
+          options={directionOptions}
+          value={direction}
+          onChange={(o) => {
+            // @ts-ignore
+            setDirection(o.target.value);
+          }}
+        ></Select>
+      </div>
+      <div className="p8n-setting multiple">
+        <div>Passages autorisés</div>
+        <div className="">
+          <Checkbox checked={true}>Péages</Checkbox>
+          <Checkbox checked={false}>Ponts</Checkbox>
+        </div>
+      </div>
+
+      <div className="p8n-setting multiple">
+        <div>Éviter</div>
+        <div className="">
+          <Checkbox checked={true}>
+            <span>Sections à péage</span>
+          </Checkbox>
+          <Checkbox checked={false}>
+            <span>Ponts</span>
+          </Checkbox>
+          <Checkbox checked={false}>
+            <span>Tunnels</span>
+          </Checkbox>
+        </div>
+      </div>
+
+      <div className="p8n-separator"></div>
+
+      <div>
+        <div className="p8n-setting">
+          <div>Distance</div>
+          <div>
+            325 <span className="text-gray-6 text-sm">km</span>
+          </div>
+        </div>
+        <div className="p8n-setting">
+          <div>Durée</div>
+          <div>3h 25min</div>
+        </div>
+      </div>
+
+      <div className="text-right">
+        <Button>Calculer</Button>
+      </div>
+    </div>
+  );
+};

package/src/components/resize-area/ResizeArea.stories.css

@@ -0,0 +1,40 @@
+html {
+    --sidebar-extra-height: 200px;
+    --sidebar-menu-width: 200px;
+}
+
+html,
+body,
+#storybook-root,
+#app {
+    margin: 0;
+    padding: 0;
+    width: 100%;
+    height: 100%;
+}
+
+#app {
+    display: flex;
+    flex-direction: column;
+}
+
+#principal {
+    flex: 1;
+    display: flex;
+}
+
+#content {
+    flex: 1;
+}
+
+#menu-col {
+    border-right: 1px solid rgb(var(--color-gray-2));
+    flex: 0 0 var(--sidebar-menu-width);
+    position: relative;
+}
+
+#extra-row {
+    border-top: 1px solid rgb(var(--color-gray-2));
+    flex: 0 0 var(--sidebar-extra-height);
+    position: relative;
+}

package/src/components/resize-area/ResizeArea.stories.tsx

@@ -0,0 +1,30 @@
+import { Meta } from "@storybook/react";
+import ResizeArea from "./ResizeArea";
+import "./ResizeArea.stories.css";
+
+const meta = {
+  title: "Components/ResizeArea",
+  component: ResizeArea,
+  parameters: {
+    layout: "fullscreen",
+  },
+} satisfies Meta<typeof ResizeArea>;
+export default meta;
+
+export const Basic = () => {
+  return (
+    <div id="app">
+      <div id="principal">
+        <div id="menu-col">
+          <ResizeArea name="menu" position="right" />
+          <div>Menu</div>
+        </div>
+        <div id="content">Content</div>
+      </div>
+      <div id="extra-row">
+        <ResizeArea name="extra" position="top" />
+        <div>Extra row</div>
+      </div>
+    </div>
+  );
+};

package/src/components/resize-area/ResizeArea.tsx

@@ -0,0 +1,79 @@
+import { useCallback, useEffect } from "react";
+import clsx from "clsx";
+
+interface Props {
+  name: string;
+  position: "top" | "bottom" | "left" | "right";
+  initialValue?: number;
+}
+
+export default function ResizeArea({ name, position, initialValue }: Props) {
+  useEffect(() => {
+    const cssVarName = `--sidebar-${name}-${["top", "bottom"].includes(position) ? "height" : "width"}`;
+    if (initialValue) {
+      document.documentElement.style.setProperty(cssVarName, `${initialValue}px`);
+    }
+    // we want to set the initial value, we don't want this value to be updated after
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  useEffect(() => {
+    const cssVarName = `--sidebar-${name}-${["top", "bottom"].includes(position) ? "height" : "width"}`;
+    return () => {
+      // some cleanup
+      document.documentElement.style.removeProperty(cssVarName);
+    };
+  }, [name, position]);
+
+  const handlePointerMove = useCallback(
+    (e: MouseEvent) => {
+      const cssVarName = `--sidebar-${name}-${["top", "bottom"].includes(position) ? "height" : "width"}`;
+      let cssVarValue;
+      switch (position) {
+        case "top":
+          cssVarValue = document.documentElement.clientHeight - e.pageY;
+          break;
+        case "right":
+          cssVarValue = e.pageX;
+          break;
+        case "left":
+          cssVarValue = document.documentElement.clientWidth - e.pageX;
+          break;
+        case "bottom":
+          cssVarValue = e.pageY;
+          break;
+      }
+      document.documentElement.style.setProperty(cssVarName, `${cssVarValue}px`);
+      return () => {
+        document.documentElement.style.removeProperty(cssVarName);
+      };
+    },
+    [name, position],
+  );
+
+  const handlePointerUp = useCallback(() => {
+    const handler = handlePointerMove;
+    document.removeEventListener("pointermove", handler);
+    document.documentElement.classList.remove("cursor-row-resize", "cursor-col-resize");
+
+    return () => {
+      document.removeEventListener("pointermove", handler);
+    };
+  }, [handlePointerMove]);
+
+  function handlePointerDown() {
+    document.addEventListener("pointerup", handlePointerUp, { once: true });
+    document.addEventListener("pointermove", handlePointerMove);
+    if (["top", "bottom"].includes(position)) {
+      document.documentElement.classList.add(`cursor-row-resize`);
+    } else {
+      document.documentElement.classList.add(`cursor-col-resize`);
+    }
+  }
+
+  return (
+    <div className={clsx(["p8n-resize-area", position])}>
+      <button className="area-button" type="button" onPointerDown={handlePointerDown}></button>
+    </div>
+  );
+}

package/src/components/scroll/Scroll.stories.tsx

@@ -0,0 +1,81 @@
+import Scroll from "./Scroll";
+
+export default {
+  component: Scroll,
+  title: "Components/Scroll",
+};
+
+export const Basic = () => {
+  return (
+    <div className="flex flex-col gap-2">
+      <Scroll className="border border-gray-2" style={{ height: "160px", width: "400px" }}>
+        <div className="px-4 text-justify">
+          <p>
+            Lorem ipsum dolor sit amet consectetur adipisicing elit. Praesentium unde, blanditiis
+            rem accusamus obcaecati enim amet, voluptatibus nemo facilis illum aut itaque in?
+            Deleniti iure amet qui vero, blanditiis quos?
+          </p>
+          <p>
+            Lorem ipsum dolor sit amet consectetur adipisicing elit. Praesentium unde, blanditiis
+            rem accusamus obcaecati enim amet, voluptatibus nemo facilis illum aut itaque in?
+            Deleniti iure amet qui vero, blanditiis quos?
+          </p>
+          <p>
+            Lorem ipsum dolor sit amet consectetur adipisicing elit. Praesentium unde, blanditiis
+            rem accusamus obcaecati enim amet, voluptatibus nemo facilis illum aut itaque in?
+            Deleniti iure amet qui vero, blanditiis quos?
+          </p>
+          <p>
+            Lorem ipsum dolor sit amet consectetur adipisicing elit. Praesentium unde, blanditiis
+            rem accusamus obcaecati enim amet, voluptatibus nemo facilis illum aut itaque in?
+            Deleniti iure amet qui vero, blanditiis quos?
+          </p>
+        </div>
+      </Scroll>
+      <Scroll horizontal className="border border-gray-2">
+        <div className="p-4 flex flex-nowrap">
+          <p className="pr-7" style={{ minWidth: 400 }}>
+            Lorem ipsum dolor sit amet consectetur adipisicing elit. Praesentium unde, blanditiis
+            rem accusamus obcaecati enim amet, voluptatibus nemo facilis illum aut itaque in?
+            Deleniti iure amet qui vero, blanditiis quos?
+          </p>
+          <p className="pr-7" style={{ minWidth: 400 }}>
+            Lorem ipsum dolor sit amet consectetur adipisicing elit. Praesentium unde, blanditiis
+            rem accusamus obcaecati enim amet, voluptatibus nemo facilis illum aut itaque in?
+            Deleniti iure amet qui vero, blanditiis quos?
+          </p>
+          <p className="pr-7" style={{ minWidth: 400 }}>
+            Lorem ipsum dolor sit amet consectetur adipisicing elit. Praesentium unde, blanditiis
+            rem accusamus obcaecati enim amet, voluptatibus nemo facilis illum aut itaque in?
+            Deleniti iure amet qui vero, blanditiis quos?
+          </p>
+          <p className="pr-7" style={{ minWidth: 400 }}>
+            Lorem ipsum dolor sit amet consectetur adipisicing elit. Praesentium unde, blanditiis
+            rem accusamus obcaecati enim amet, voluptatibus nemo facilis illum aut itaque in?
+            Deleniti iure amet qui vero, blanditiis quos?
+          </p>
+          <p className="pr-7" style={{ minWidth: 400 }}>
+            Lorem ipsum dolor sit amet consectetur adipisicing elit. Praesentium unde, blanditiis
+            rem accusamus obcaecati enim amet, voluptatibus nemo facilis illum aut itaque in?
+            Deleniti iure amet qui vero, blanditiis quos?
+          </p>
+          <p className="pr-7" style={{ minWidth: 400 }}>
+            Lorem ipsum dolor sit amet consectetur adipisicing elit. Praesentium unde, blanditiis
+            rem accusamus obcaecati enim amet, voluptatibus nemo facilis illum aut itaque in?
+            Deleniti iure amet qui vero, blanditiis quos?
+          </p>
+          <p className="pr-7" style={{ minWidth: 400 }}>
+            Lorem ipsum dolor sit amet consectetur adipisicing elit. Praesentium unde, blanditiis
+            rem accusamus obcaecati enim amet, voluptatibus nemo facilis illum aut itaque in?
+            Deleniti iure amet qui vero, blanditiis quos?
+          </p>
+          <p style={{ minWidth: 400 }}>
+            Lorem ipsum dolor sit amet consectetur adipisicing elit. Praesentium unde, blanditiis
+            rem accusamus obcaecati enim amet, voluptatibus nemo facilis illum aut itaque in?
+            Deleniti iure amet qui vero, blanditiis quos?
+          </p>
+        </div>
+      </Scroll>
+    </div>
+  );
+};

package/src/components/scroll/Scroll.tsx

@@ -0,0 +1,111 @@
+import { ComponentPropsWithoutRef, useEffect, useRef, useState } from "react";
+import clsx from "clsx";
+
+const TOLERANCE = 5;
+
+interface Props extends ComponentPropsWithoutRef<"div"> {
+  horizontal?: boolean;
+}
+
+export const scrollVariants = {
+  vertical: {
+    inner: "overflow-y-auto h-full",
+    shadow: "h-1 left-0 right-0",
+    shadowStart: "top-0 bg-gradient-to-b from-gray-8/10",
+    shadowEnd: "bottom-0 bg-gradient-to-t from-gray-8/10",
+    child: "",
+  },
+  horizontal: {
+    inner: "overflow-x-auto",
+    shadow: "w-1 top-0 bottom-0",
+    shadowStart: "left-0 bg-gradient-to-r from-gray-8/10",
+    shadowEnd: "right-0 bg-gradient-to-l from-gray-8/10",
+    child: "inline-block",
+  },
+};
+
+export default function Scroll({ horizontal = false, className, children, ...rest }: Props) {
+  const [showStartShadow, setShowStartShadow] = useState(false);
+  const [showEndShadow, setShowEndShadow] = useState(false);
+  const scrollChildRef = useRef<HTMLDivElement>(null);
+  const scrollContainerRef = useRef<HTMLDivElement>(null);
+
+  const position = horizontal ? "horizontal" : "vertical";
+
+  const setShadows = (container: HTMLDivElement | null, child: HTMLDivElement | null) => {
+    if (!container || !child) {
+      return;
+    }
+
+    const containerRect = container.getBoundingClientRect();
+
+    const childRect = child.getBoundingClientRect();
+
+    const isOnStartEdge = horizontal
+      ? containerRect.left - childRect.left < TOLERANCE
+      : containerRect.top - childRect.top < TOLERANCE;
+
+    const isOnEndEdge = horizontal
+      ? childRect.right - containerRect.right < TOLERANCE
+      : childRect.bottom - containerRect.bottom < TOLERANCE;
+
+    setShowStartShadow((previousShowStartShadow) =>
+      isOnStartEdge === previousShowStartShadow
+        ? !previousShowStartShadow
+        : previousShowStartShadow,
+    );
+
+    setShowEndShadow((previousShowEndShadow) =>
+      isOnEndEdge === previousShowEndShadow ? !previousShowEndShadow : previousShowEndShadow,
+    );
+  };
+
+  useEffect(() => {
+    const resizeObserver = new ResizeObserver(() => {
+      setShadows(scrollContainerRef.current, scrollChildRef.current);
+    });
+    resizeObserver.observe(scrollChildRef.current!);
+    resizeObserver.observe(scrollContainerRef.current!);
+
+    return () => {
+      resizeObserver.disconnect();
+    };
+  });
+
+  function handleScroll(event: React.UIEvent<HTMLDivElement, UIEvent>) {
+    if (!scrollChildRef?.current) {
+      return;
+    }
+    setShadows(event.currentTarget, scrollChildRef.current);
+  }
+
+  return (
+    <div className={clsx("ll-scroll-zone", "relative", className)} {...rest}>
+      <div
+        className={clsx(
+          "scroll-shadow z-[1] absolute opacity-0 transition-all",
+          scrollVariants[position].shadow,
+          scrollVariants[position].shadowStart,
+          showStartShadow && "opacity-100",
+        )}
+      ></div>
+      <div
+        className={clsx(
+          "scroll-shadow z-[1] absolute opacity-0 transition-all",
+          scrollVariants[position].shadow,
+          scrollVariants[position].shadowEnd,
+          showEndShadow && "opacity-100",
+        )}
+      ></div>
+      <div
+        className={scrollVariants[position].inner}
+        ref={scrollContainerRef}
+        onScroll={handleScroll}
+      >
+        <div className={scrollVariants[position].child} ref={scrollChildRef}>
+          {children}
+        </div>
+      </div>
+    </div>
+  );
+}