pentatrion-design 0.0.1

package/images/logo-shadow.svg

@@ -0,0 +1,173 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   width="512"
+   height="512"
+   viewBox="0 0 512 512"
+   version="1.1"
+   id="svg5"
+   sodipodi:docname="logo-shadow.svg"
+   inkscape:export-filename="/home/lhapaipai/projets/lonlat/apps/front/public/favicon-64x64.png"
+   inkscape:export-xdpi="12"
+   inkscape:export-ydpi="12"
+   inkscape:version="1.1.2 (0a00cf5339, 2022-02-04)"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:xlink="http://www.w3.org/1999/xlink"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <sodipodi:namedview
+     id="namedview17"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageshadow="2"
+     inkscape:pageopacity="0.0"
+     inkscape:pagecheckerboard="0"
+     showgrid="false"
+     inkscape:zoom="0.74316406"
+     inkscape:cx="112.35742"
+     inkscape:cy="308.81472"
+     inkscape:window-width="1920"
+     inkscape:window-height="1048"
+     inkscape:window-x="0"
+     inkscape:window-y="0"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="g4909" />
+  <defs
+     id="defs2">
+    <linearGradient
+       id="linearGradient3450">
+      <stop
+         style="stop-color:#c3830e;stop-opacity:1;"
+         offset="0"
+         id="stop3446" />
+      <stop
+         style="stop-color:#ffe218;stop-opacity:1;"
+         offset="1"
+         id="stop3448" />
+    </linearGradient>
+    <linearGradient
+       id="linearGradient1196">
+      <stop
+         style="stop-color:#e6c932;stop-opacity:1;"
+         offset="0.51667702"
+         id="stop1192" />
+      <stop
+         style="stop-color:#c3830e;stop-opacity:1;"
+         offset="1"
+         id="stop1194" />
+    </linearGradient>
+    <radialGradient
+       xlink:href="#linearGradient1196"
+       id="radialGradient1264"
+       cx="42.980968"
+       cy="87.500946"
+       fx="42.980968"
+       fy="87.500946"
+       r="8.343936"
+       gradientTransform="matrix(25.100951,0,0,27.159761,-840.11601,-2144.2749)"
+       gradientUnits="userSpaceOnUse" />
+    <linearGradient
+       xlink:href="#linearGradient3450"
+       id="linearGradient3452"
+       x1="45.214294"
+       y1="88.793221"
+       x2="51.894505"
+       y2="88.793221"
+       gradientUnits="userSpaceOnUse"
+       gradientTransform="matrix(25.100951,0,0,25.100951,-840.11601,-1956.0803)" />
+    <filter
+       style="color-interpolation-filters:sRGB;"
+       inkscape:label="Drop Shadow"
+       id="filter2008"
+       x="-0.29554829"
+       y="-0.21686776"
+       width="1.7872743"
+       height="1.4200445">
+      <feFlood
+         flood-opacity="0.498039"
+         flood-color="rgb(0,0,0)"
+         result="flood"
+         id="feFlood1998" />
+      <feComposite
+         in="flood"
+         in2="SourceGraphic"
+         operator="in"
+         result="composite1"
+         id="feComposite2000" />
+      <feGaussianBlur
+         in="composite1"
+         stdDeviation="3"
+         result="blur"
+         id="feGaussianBlur2002" />
+      <feOffset
+         dx="6"
+         dy="6"
+         result="offset"
+         id="feOffset2004" />
+      <feComposite
+         in="SourceGraphic"
+         in2="offset"
+         operator="over"
+         result="composite2"
+         id="feComposite2006" />
+    </filter>
+    <filter
+       style="color-interpolation-filters:sRGB;"
+       inkscape:label="Drop Shadow"
+       id="filter2020"
+       x="-0.11830901"
+       y="-0.10934075"
+       width="1.2688781"
+       height="1.2319196">
+      <feFlood
+         flood-opacity="0.498039"
+         flood-color="rgb(0,0,0)"
+         result="flood"
+         id="feFlood2010" />
+      <feComposite
+         in="flood"
+         in2="SourceGraphic"
+         operator="in"
+         result="composite1"
+         id="feComposite2012" />
+      <feGaussianBlur
+         in="composite1"
+         stdDeviation="3"
+         result="blur"
+         id="feGaussianBlur2014" />
+      <feOffset
+         dx="6"
+         dy="6"
+         result="offset"
+         id="feOffset2016" />
+      <feComposite
+         in="SourceGraphic"
+         in2="offset"
+         operator="over"
+         result="composite2"
+         id="feComposite2018" />
+    </filter>
+  </defs>
+  <g
+     id="layer1"
+     transform="translate(-35.994184,-82.381019)" />
+  <g
+     id="layer2"
+     transform="matrix(0.91335741,0,0,0.91335741,-10.695052,-53.062812)">
+    <g
+       id="g4909"
+       transform="translate(19.405757)">
+      <path
+         d="m 462.48547,135.99209 -94.35307,12.75075 -68.2289,141.47403 c -3.40036,17.00168 -5.09773,30.81717 -5.09773,41.44323 0,25.92758 6.15784,45.47974 18.48408,58.65598 12.75127,12.75128 29.32985,19.11989 49.73187,19.11989 18.27683,0 34.01319,-5.73681 47.18951,-17.21297 13.60136,-11.90137 21.246,-28.47977 22.94619,-49.73188 -5.95061,2.55025 -12.75306,3.82651 -20.40384,3.82651 -17.42673,0 -26.13712,-8.49984 -26.13712,-25.50152 0,-5.95061 0.8552,-12.10845 2.55536,-18.48409 z"
+         style="font-size:25.4px;line-height:1.25;font-family:Lobster;-inkscape-font-specification:Lobster;display:inline;fill:url(#linearGradient3452);fill-opacity:1;stroke:#ffffff;stroke-width:84.7149;stroke-linecap:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;paint-order:stroke markers fill;filter:url(#filter2008)"
+         id="path539" />
+      <path
+         id="path396"
+         style="font-size:25.4px;line-height:1.25;font-family:Lobster;-inkscape-font-specification:Lobster;display:inline;fill:url(#radialGradient1264);fill-opacity:1;stroke:#ffffff;stroke-width:84.7149;stroke-linecap:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;paint-order:stroke markers fill;filter:url(#filter2020)"
+         d="m 287.15272,111.76171 c -34.85341,0 -69.70801,8.07874 -104.56145,24.23035 -34.85343,15.72655 -63.53719,36.55507 -86.064418,62.48264 -22.102166,25.50252 -33.154592,51.84426 -33.154592,79.04697 0,22.10219 5.526226,38.04915 16.577297,47.82509 11.476155,9.35093 28.686393,14.02197 51.638653,14.02197 0,-0.85017 -1.48673,-4.24485 -4.46212,-10.19543 -2.97529,-6.37564 -4.46212,-17.42802 -4.46212,-33.15459 0,-34.00336 7.65768,-62.70009 22.95916,-86.07741 15.72655,-23.80234 37.8184,-41.43372 66.29618,-52.90982 l -94.98865,263.88389 c 3.40035,-0.42421 8.28191,-0.63556 14.65755,-0.63556 18.27681,0 36.1317,3.61831 53.5584,10.84412 17.85175,7.22556 34.21981,15.93609 49.09629,26.13712 15.30148,10.62598 33.57746,24.4413 54.82958,41.44317 28.47779,22.5271 51.8459,39.09273 70.12273,49.71896 18.70181,11.05067 37.62243,16.57715 56.74931,16.57715 17.42674,0 31.87386,-8.92088 43.35002,-26.77266 11.90116,-17.85179 19.55881,-42.28556 22.95916,-73.3136 -16.57667,6.80061 -34.43152,10.19526 -53.5584,10.19526 -21.2521,0 -41.65955,-4.03924 -61.21146,-12.11497 -19.55193,-7.65078 -43.13061,-18.91383 -70.7583,-33.7904 -17.85179,-9.77582 -33.15411,-17.64396 -45.90535,-23.59465 -12.32625,-5.52547 -24.44434,-9.77557 -36.34553,-12.75078 L 312.65425,113.0329 c -11.05106,-0.85017 -19.55093,-1.27111 -25.50153,-1.27111 z" />
+    </g>
+  </g>
+</svg>

package/images/logo.svg

@@ -0,0 +1,76 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   width="512"
+   height="512"
+   viewBox="0 0 512 512"
+   version="1.1"
+   id="svg5"
+   xmlns:xlink="http://www.w3.org/1999/xlink"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <defs
+     id="defs2">
+    <linearGradient
+       id="linearGradient3450">
+      <stop
+         style="stop-color:#c3830e;stop-opacity:1;"
+         offset="0"
+         id="stop3446" />
+      <stop
+         style="stop-color:#ffe218;stop-opacity:1;"
+         offset="1"
+         id="stop3448" />
+    </linearGradient>
+    <linearGradient
+       id="linearGradient1196">
+      <stop
+         style="stop-color:#e6c932;stop-opacity:1;"
+         offset="0.51667702"
+         id="stop1192" />
+      <stop
+         style="stop-color:#c3830e;stop-opacity:1;"
+         offset="1"
+         id="stop1194" />
+    </linearGradient>
+    <radialGradient
+       xlink:href="#linearGradient1196"
+       id="radialGradient1264"
+       cx="42.980968"
+       cy="87.500946"
+       fx="42.980968"
+       fy="87.500946"
+       r="8.343936"
+       gradientTransform="matrix(28.355234,0,0,30.680964,-984.62933,-2466.1457)"
+       gradientUnits="userSpaceOnUse" />
+    <linearGradient
+       xlink:href="#linearGradient3450"
+       id="linearGradient3452"
+       x1="45.214294"
+       y1="88.793221"
+       x2="51.894505"
+       y2="88.793221"
+       gradientUnits="userSpaceOnUse"
+       gradientTransform="matrix(28.355234,0,0,28.355234,-984.62933,-2253.5521)" />
+  </defs>
+  <g
+     id="layer1"
+     transform="translate(-35.994184,-82.381019)" />
+  <g
+     id="layer2"
+     transform="translate(-35.994184,-82.381019)">
+    <g
+       id="g4909"
+       transform="translate(19.405757)">
+      <path
+         id="path396"
+         style="font-size:25.4px;line-height:1.25;font-family:Lobster;-inkscape-font-specification:Lobster;fill:url(#radialGradient1264);fill-opacity:1;stroke-width:7.50231"
+         d="m 288.78728,82.381019 c -39.37207,0 -78.74549,9.126132 -118.11761,27.371761 -39.3721,17.76546 -71.774645,41.29435 -97.222475,70.58338 -24.967663,28.80886 -37.453011,58.56575 -37.453011,89.29523 0,24.96769 6.242688,42.98214 18.726506,54.02551 12.964013,10.56326 32.405524,15.83988 58.33349,15.83988 0,-0.96039 -1.67948,-4.79518 -5.04062,-11.51724 -3.36103,-7.20223 -5.04063,-19.68752 -5.04063,-37.45301 0,-38.41182 8.65048,-70.82902 25.93577,-97.23716 17.76546,-26.88825 42.72147,-46.8055 74.89133,-59.76946 L 96.496314,431.61577 c 3.841196,-0.47921 9.355636,-0.71796 16.557866,-0.71796 20.64636,0 40.81609,4.08741 60.50213,12.25003 20.16619,8.16234 38.65633,18.00217 55.46151,29.52574 17.28529,12.00362 37.93071,27.61006 61.93812,46.81619 32.16987,25.44769 58.5676,44.16101 79.21398,56.16491 21.12646,12.48337 42.5001,18.72634 64.10673,18.72634 19.68608,0 36.00624,-10.07745 48.97026,-30.24367 13.44412,-20.16624 22.09457,-47.76779 25.93576,-82.81855 -18.72579,7.68229 -38.89549,11.51705 -60.50213,11.51705 -24.00738,0 -47.06061,-4.56292 -69.14738,-13.68565 -22.0868,-8.64268 -48.7224,-21.36596 -79.93196,-38.17125 C 279.43496,429.93572 262.14873,421.04749 247.74432,414.32531 233.82,408.08347 220.13083,403.28236 206.68668,399.92142 L 317.59503,83.817013 c -12.48381,-0.960392 -22.08566,-1.435909 -28.80775,-1.435909 z" />
+      <path
+         d="M 486.85154,109.75281 380.2658,124.15667 303.19117,283.9725 c -3.8412,19.20591 -5.75864,34.81254 -5.75864,46.81625 0,29.28903 6.95619,51.37608 20.88051,66.2606 14.40444,14.40445 33.13239,21.59874 56.17949,21.59874 20.64638,0 38.42293,-6.48058 53.30753,-19.4446 15.36474,-13.44435 24.00049,-32.1721 25.92111,-56.17951 -6.72209,2.88089 -14.40647,4.32261 -23.04915,4.32261 -19.68607,0 -29.52574,-9.60182 -29.52574,-28.80773 0,-6.72209 0.96607,-13.67828 2.88665,-20.88051 z"
+         style="font-size:25.4px;line-height:1.25;font-family:Lobster;-inkscape-font-specification:Lobster;fill:url(#linearGradient3452);fill-opacity:1;stroke-width:7.50231"
+         id="path539" />
+    </g>
+  </g>
+</svg>

package/package.json

@@ -0,0 +1,85 @@
+{
+  "name": "pentatrion-design",
+  "version": "0.0.1",
+  "description": "",
+  "keywords": [],
+  "author": "Hugues Tavernier",
+  "license": "ISC",
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": "./dist/index.js",
+    "./redux": "./dist/redux/index.js",
+    "./src/*": "./src/*"
+  },
+  "type": "module",
+  "devDependencies": {
+    "@floating-ui/react-dom": "^2.0.9",
+    "@react-spring/web": "^9.7.3",
+    "@reduxjs/toolkit": "^2.2.4",
+    "@storybook/addon-actions": "^8.1.0",
+    "@storybook/addon-docs": "^8.1.0",
+    "@storybook/addon-essentials": "^8.1.0",
+    "@storybook/addon-interactions": "^8.1.0",
+    "@storybook/addon-links": "^8.1.0",
+    "@storybook/addon-themes": "^8.1.0",
+    "@storybook/blocks": "^8.1.0",
+    "@storybook/manager-api": "^8.1.0",
+    "@storybook/react": "^8.1.0",
+    "@storybook/react-vite": "^8.1.0",
+    "@storybook/test": "^8.1.0",
+    "@storybook/theming": "^8.1.0",
+    "@storybook/types": "^8.1.0",
+    "@testing-library/jest-dom": "^6.4.5",
+    "@testing-library/react": "^14.3.1",
+    "@types/geojson": "^7946.0.14",
+    "@types/react": "^18.3.2",
+    "@types/react-dom": "^18.3.0",
+    "@use-gesture/react": "^10.3.1",
+    "@vitejs/plugin-react-swc": "^3.6.0",
+    "@vitest/ui": "^1.6.0",
+    "fuse.js": "^7.0.0",
+    "jsdom": "^24.0.0",
+    "maplibre-gl": "^4.2.0",
+    "postcss": "^8.4.38",
+    "postcss-load-config": "^5.1.0",
+    "react-redux": "^9.1.2",
+    "storybook": "^8.1.0",
+    "tailwindcss": "^3.4.3",
+    "tsup": "^8.0.2",
+    "typescript": "^5.4.5",
+    "vite": "^5.2.11",
+    "vitest": "^1.6.0",
+    "pentatrion-fonts": "0.0.1"
+  },
+  "dependencies": {
+    "@floating-ui/react": "^0.26.14",
+    "clsx": "^2.1.0",
+    "react": "^18.0",
+    "react-dom": "^18.0",
+    "react-polymorphic-types": "^2.0.0",
+    "react-sortablejs": "^6.1.4"
+  },
+  "peerDependencies": {
+    "@reduxjs/toolkit": "*",
+    "react-redux": "*",
+    "tailwindcss": "*"
+  },
+  "peerDependenciesMeta": {
+    "@types/react": {
+      "optional": true
+    },
+    "@types/react-dom": {
+      "optional": true
+    }
+  },
+  "scripts": {
+    "dev": "tsup --watch",
+    "build": "tsup",
+    "tsc": "tsc",
+    "test": "vitest",
+    "test:ui": "vitest --ui",
+    "storybook": "storybook dev -p 6007",
+    "storybook-build": "storybook build"
+  }
+}

package/postcss.config.js

@@ -0,0 +1,7 @@
+/** @type {import("postcss-load-config").Config} */
+export default {
+  plugins: {
+    "tailwindcss/nesting": {},
+    tailwindcss: {},
+  },
+};

package/src/components/autocomplete/Autocomplete.stories.tsx

@@ -0,0 +1,89 @@
+import { Meta, ReactRenderer } from "@storybook/react";
+
+import { useState } from "react";
+import Autocomplete from "./Autocomplete";
+import { NotificationsProvider } from "../notification";
+import { Button } from "../button";
+import SimpleAutocomplete from "./SimpleAutocomplete";
+import { Option } from "../select";
+import { PartialStoryFn } from "@storybook/types";
+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;
+
+const options: Option[] = [
+  { 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 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>
+    </>
+  );
+};