@addev-be/ui 3.2.9 → 3.3.0

package/dist/components/layout/PanelContainer/PanelContainer.js

@@ -0,0 +1,121 @@
+import { jsx as t, jsxs as X } from "react/jsx-runtime";
+import { useState as u, useRef as $, useEffect as B } from "react";
+import v from "../../../assets/icons/chevron-left.svg.js";
+import g from "../../../assets/icons/chevron-right.svg.js";
+import { cn as r } from "../../../helpers/cn.js";
+function H({
+  side: e = "left",
+  collapsible: w = !1,
+  size: b = "300px",
+  resizable: a = !1,
+  panel: x,
+  children: y,
+  className: N,
+  panelClassName: W,
+  contentClassName: C,
+  defaultCollapsed: R = !1,
+  panelOverflow: S = "overflow-y-auto",
+  contentOverflow: d = "none"
+}) {
+  const [n, E] = u(R), [i, I] = u(
+    () => T(b)
+  ), [l, m] = u(!1), c = $(null), M = 200, L = 600, j = () => {
+    E(!n);
+  };
+  B(() => {
+    if (!a || !l) return;
+    const s = (h) => {
+      if (!c.current) return;
+      const p = c.current.getBoundingClientRect();
+      let o;
+      e === "left" ? o = h.clientX - p.left : o = p.right - h.clientX, o = Math.max(M, Math.min(L, o)), I(o);
+    }, f = () => {
+      m(!1);
+    };
+    return document.addEventListener("mousemove", s), document.addEventListener("mouseup", f), () => {
+      document.removeEventListener("mousemove", s), document.removeEventListener("mouseup", f);
+    };
+  }, [l, a, e]);
+  const k = (s) => {
+    s.preventDefault(), m(!0);
+  }, P = {
+    width: n ? 0 : i,
+    minWidth: n ? 0 : i,
+    maxWidth: n ? 0 : i,
+    transition: l ? "none" : "width 0.3s ease-in-out, min-width 0.3s ease-in-out, max-width 0.3s ease-in-out",
+    overflow: n ? "hidden" : "visible"
+  }, D = a ? /* @__PURE__ */ t(
+    "div",
+    {
+      onMouseDown: k,
+      className: r(
+        "relative flex w-1 items-center justify-center bg-border hover:bg-primary transition-colors cursor-col-resize group",
+        l && "bg-primary"
+      ),
+      style: { userSelect: "none" },
+      children: /* @__PURE__ */ t("div", { className: "absolute inset-y-0 w-3 -translate-x-1/2 left-1/2" })
+    }
+  ) : null;
+  return /* @__PURE__ */ X(
+    "div",
+    {
+      ref: c,
+      className: r(
+        "relative flex h-full w-full",
+        e === "left" ? "flex-row" : "flex-row-reverse",
+        N
+      ),
+      style: { userSelect: l ? "none" : "auto" },
+      children: [
+        /* @__PURE__ */ t(
+          "div",
+          {
+            className: r("relative bg-background border-border", W),
+            style: P,
+            children: /* @__PURE__ */ t(
+              "div",
+              {
+                className: r("h-full w-full", S),
+                style: {
+                  opacity: n ? 0 : 1,
+                  transition: "opacity 0.2s ease-in-out"
+                },
+                children: x
+              }
+            )
+          }
+        ),
+        D,
+        /* @__PURE__ */ t(
+          "div",
+          {
+            className: r(
+              "relative flex-1 bg-background",
+              d !== "none" && d,
+              C
+            ),
+            children: /* @__PURE__ */ t("div", { className: "h-full w-full", children: y })
+          }
+        ),
+        w && /* @__PURE__ */ t(
+          "button",
+          {
+            onClick: j,
+            className: r(
+              "absolute top-4 z-50 flex h-6 w-6 items-center justify-center rounded-md border border-border bg-background shadow-md hover:bg-accent transition-all duration-300",
+              e === "left" ? "left-4" : "right-4"
+            ),
+            "aria-label": n ? `Expand ${e} panel` : `Collapse ${e} panel`,
+            children: e === "left" ? n ? /* @__PURE__ */ t(g, { className: "h-4 w-4" }) : /* @__PURE__ */ t(v, { className: "h-4 w-4" }) : n ? /* @__PURE__ */ t(v, { className: "h-4 w-4" }) : /* @__PURE__ */ t(g, { className: "h-4 w-4" })
+          }
+        )
+      ]
+    }
+  );
+}
+function T(e) {
+  return e.endsWith("px") ? parseInt(e.replace("px", ""), 10) : e.endsWith("rem") ? parseInt(e.replace("rem", ""), 10) * 16 : e.endsWith("em") ? parseInt(e.replace("em", ""), 10) * 16 : parseInt(e, 10) || 300;
+}
+export {
+  H as PanelContainer
+};

package/dist/components/layout/PanelContainer/index.d.ts

@@ -0,0 +1,2 @@
+export { PanelContainer } from './PanelContainer';
+export type { PanelContainerProps } from './PanelContainer';

package/dist/components/layout/index.d.ts

@@ -1,7 +1,10 @@
+export * from './ContextMenu';
 export * from './Columns';
 export * from './Dropdown';
 export * from './Flexbox';
 export * from './Grid';
 export * from './Loading';
+export * from './LeftMenu';
 export * from './Masonry';
 export * from './Modal';
+export * from './PanelContainer';

package/dist/components/layout/index.js

@@ -1,17 +1,32 @@
-import { Column as m, Columns as x } from "./Columns.js";
-import { Dropdown as p } from "./Dropdown/index.js";
-import { Flexbox as t } from "./Flexbox.js";
-import { Grid as d } from "./Grid/index.js";
-import { Loading as a } from "./Loading/index.js";
-import { Masonry as s } from "./Masonry/index.js";
-import { Modal as C } from "./Modal/index.js";
+import { ContextMenu as t, ContextMenuContent as n, ContextMenuItem as r, ContextMenuLabel as x, ContextMenuSeparator as u, ContextMenuSub as C, ContextMenuSubContent as m, ContextMenuSubTrigger as M, ContextMenuTrigger as p, GlobalContextMenuProvider as f } from "./ContextMenu/ContextMenu.js";
+import { Column as l, Columns as b } from "./Columns.js";
+import { Dropdown as d } from "./Dropdown/index.js";
+import { Flexbox as S } from "./Flexbox.js";
+import { Grid as s } from "./Grid/index.js";
+import { Loading as P } from "./Loading/index.js";
+import { LeftMenu as v } from "./LeftMenu/LeftMenu.js";
+import { Masonry as y } from "./Masonry/index.js";
+import { Modal as F } from "./Modal/index.js";
+import { PanelContainer as c } from "./PanelContainer/PanelContainer.js";
 export {
-  m as Column,
-  x as Columns,
-  p as Dropdown,
-  t as Flexbox,
-  d as Grid,
-  a as Loading,
-  s as Masonry,
-  C as Modal
+  l as Column,
+  b as Columns,
+  t as ContextMenu,
+  n as ContextMenuContent,
+  r as ContextMenuItem,
+  x as ContextMenuLabel,
+  u as ContextMenuSeparator,
+  C as ContextMenuSub,
+  m as ContextMenuSubContent,
+  M as ContextMenuSubTrigger,
+  p as ContextMenuTrigger,
+  d as Dropdown,
+  S as Flexbox,
+  f as GlobalContextMenuProvider,
+  s as Grid,
+  v as LeftMenu,
+  P as Loading,
+  y as Masonry,
+  F as Modal,
+  c as PanelContainer
 };

package/dist/helpers/cn.d.ts

@@ -0,0 +1,2 @@
+import { ClassValue } from 'clsx';
+export declare function cn(...inputs: ClassValue[]): string;

package/dist/helpers/cn.js

@@ -0,0 +1,8 @@
+import { clsx as o } from "clsx";
+import { twMerge as t } from "tailwind-merge";
+function n(...r) {
+  return t(o(r));
+}
+export {
+  n as cn
+};

package/dist/helpers/index.d.ts

@@ -1,3 +1,4 @@
+export * from './cn';
 export * from './dates';
 export * from './numbers';
 export * from './text';

package/dist/helpers/index.js

@@ -1,33 +1,35 @@
-import { formatDate as a, formatDateTime as o } from "./dates.js";
-import { decimalSeparator as m, formatMoney as p, formatNumber as i, formatNumberInvariant as f, formatPercentage as n, getCurrencySymbol as s, parseNumber as x } from "./numbers.js";
-import { escapeForRegExp as u, extractTextFromHTML as y } from "./text.js";
-import { containerQueries as l, findBreakpoint as d, isGreaterThanOrEqual as S, isSmallerThanOrEqual as T, mediaQueries as b } from "./responsive.js";
-import { extractSizeProps as E, size as N } from "./styled/size.js";
-import { extractSpaceProps as q, margins as z, paddings as D, space as F } from "./styled/space.js";
-import { StyledTypography as O, typography as Q } from "./styled/typography.js";
+import { cn as a } from "./cn.js";
+import { formatDate as t, formatDateTime as m } from "./dates.js";
+import { decimalSeparator as f, formatMoney as i, formatNumber as n, formatNumberInvariant as x, formatPercentage as s, getCurrencySymbol as c, parseNumber as u } from "./numbers.js";
+import { escapeForRegExp as g, extractTextFromHTML as l } from "./text.js";
+import { containerQueries as S, findBreakpoint as T, isGreaterThanOrEqual as b, isSmallerThanOrEqual as h, mediaQueries as E } from "./responsive.js";
+import { extractSizeProps as P, size as q } from "./styled/size.js";
+import { extractSpaceProps as D, margins as F, paddings as M, space as O } from "./styled/space.js";
+import { StyledTypography as k, typography as v } from "./styled/typography.js";
 export {
-  O as StyledTypography,
-  l as containerQueries,
-  m as decimalSeparator,
-  u as escapeForRegExp,
-  E as extractSizeProps,
-  q as extractSpaceProps,
-  y as extractTextFromHTML,
-  d as findBreakpoint,
-  a as formatDate,
-  o as formatDateTime,
-  p as formatMoney,
-  i as formatNumber,
-  f as formatNumberInvariant,
-  n as formatPercentage,
-  s as getCurrencySymbol,
-  S as isGreaterThanOrEqual,
-  T as isSmallerThanOrEqual,
-  z as margins,
-  b as mediaQueries,
-  D as paddings,
-  x as parseNumber,
-  N as size,
-  F as space,
-  Q as typography
+  k as StyledTypography,
+  a as cn,
+  S as containerQueries,
+  f as decimalSeparator,
+  g as escapeForRegExp,
+  P as extractSizeProps,
+  D as extractSpaceProps,
+  l as extractTextFromHTML,
+  T as findBreakpoint,
+  t as formatDate,
+  m as formatDateTime,
+  i as formatMoney,
+  n as formatNumber,
+  x as formatNumberInvariant,
+  s as formatPercentage,
+  c as getCurrencySymbol,
+  b as isGreaterThanOrEqual,
+  h as isSmallerThanOrEqual,
+  F as margins,
+  E as mediaQueries,
+  M as paddings,
+  u as parseNumber,
+  q as size,
+  O as space,
+  v as typography
 };

package/eslint.config.js

@@ -1,3 +1,3 @@
-import { eslintReactConfig } from '@addev-be/framework-utils/eslint/react.config.mjs';
-
-export default [...eslintReactConfig, { ignores: ['dist'] }];
+import { eslintReactConfig } from '@addev-be/framework-utils/eslint/react.config.mjs';
+
+export default [...eslintReactConfig, { ignores: ['dist'] }];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@addev-be/ui",
-  "version": "3.2.9",
+  "version": "3.3.0",
   "type": "module",
   "scripts": {
     "watch": "vite build --watch",
@@ -48,7 +48,7 @@
       "types": "./dist/hooks/index.d.ts"
     },
     "./icons": {
-      "import": "./dist/icons/index.tjs",
+      "import": "./dist/icons/index.js",
       "types": "./dist/icons/index.d.ts"
     },
     "./providers": {
@@ -74,7 +74,7 @@
     "update-version": "../../node/update-version.mjs"
   },
   "devDependencies": {
-    "@addev-be/framework-utils": "^3.2.9",
+    "@addev-be/framework-utils": "^3.3.0",
     "@testing-library/dom": "^10.4.1",
     "@testing-library/react": "^16.3.0",
     "@testing-library/react-hooks": "^8.0.1",
@@ -102,6 +102,7 @@
   },
   "dependencies": {
     "@addev-be/logiprint-common": "3.0.3",
+    "@addev-be/tailed-components": "*",
     "@uidotdev/usehooks": "^2.4.1",
     "hash.js": "^1.1.7",
     "lodash": "^4.17.21",
@@ -110,6 +111,7 @@
     "react-router-dom": "^7.9.1",
     "react-toastify": "^11.0.5",
     "rxjs": "^7.8.2",
+    "tailwind-merge": "^3.5.0",
     "uuid": "^13.0.0",
     "zod": "^4.1.9"
   }

package/src/components/auth/LoginForm.tsx

@@ -1,92 +1,92 @@
-import { FC, useCallback, useEffect, useRef, useState } from 'react';
-import { Link, redirect } from 'react-router-dom';
-
-import { Button } from '../forms/Button';
-import { Card } from '../common/Card';
-import { FormContainer } from './styles';
-import { Input } from '../forms/styles';
-import { Message } from '../common/Message';
-import { StackedLabel } from '../forms/VerticalLabel';
-import { useAuthentication } from '@hooks';
-
-export const LoginForm: FC = () => {
-  const [username, setUsername] = useState(
-    localStorage.getItem('username') || ''
-  );
-  const [password, setPassword] = useState('');
-  const [isLoading, setIsLoading] = useState(false);
-  const [error, setError] = useState('');
-  const usernameInputRef = useRef<HTMLInputElement>(null);
-  const passwordInputRef = useRef<HTMLInputElement>(null);
-
-  const { login } = useAuthentication();
-
-  const onLoginClicked = useCallback(() => {
-    setError('');
-    setIsLoading(true);
-    login(username, password).then((success) => {
-      setIsLoading(false);
-      if (success) {
-        localStorage.setItem('username', username);
-        redirect('/');
-      } else {
-        setError('Identifiants invalides');
-      }
-    });
-  }, [login, password, username]);
-
-  useEffect(() => {
-    if (usernameInputRef.current && passwordInputRef.current) {
-      const input = !username
-        ? usernameInputRef.current
-        : passwordInputRef.current;
-      input.select();
-      input.focus();
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
-
-  if (isLoading) return <div>Chargement...</div>;
-
-  return (
-    <Card>
-      <FormContainer>
-        <StackedLabel label="Adresse e-mail / Nom d'utilisateur">
-          <Input
-            ref={usernameInputRef}
-            type="email"
-            autoComplete="email"
-            required
-            value={username}
-            onChange={(e) => setUsername(e.target.value)}
-            data-testid="login-username"
-          />
-        </StackedLabel>
-
-        <StackedLabel label="Mot de passe">
-          <Input
-            ref={passwordInputRef}
-            type="password"
-            autoComplete="current-password"
-            required
-            value={password}
-            onChange={(e) => setPassword(e.target.value)}
-            data-testid="login-password"
-          />
-        </StackedLabel>
-
-        {error && <Message type="error">{error}</Message>}
-
-        <Button
-          $color="primary"
-          onClick={onLoginClicked}
-          data-testid="login-submit"
-        >
-          Se connecter
-        </Button>
-
-        <Link to="/recover">Mot de passe oublié ?</Link>
-      </FormContainer>
-    </Card>
-  );
-};
+import { FC, useCallback, useEffect, useRef, useState } from 'react';
+import { Link, redirect } from 'react-router-dom';
+
+import { Button } from '../forms/Button';
+import { Card } from '../common/Card';
+import { FormContainer } from './styles';
+import { Input } from '../forms/styles';
+import { Message } from '../common/Message';
+import { StackedLabel } from '../forms/VerticalLabel';
+import { useAuthentication } from '@hooks';
+
+export const LoginForm: FC = () => {
+  const [username, setUsername] = useState(
+    localStorage.getItem('username') || ''
+  );
+  const [password, setPassword] = useState('');
+  const [isLoading, setIsLoading] = useState(false);
+  const [error, setError] = useState('');
+  const usernameInputRef = useRef<HTMLInputElement>(null);
+  const passwordInputRef = useRef<HTMLInputElement>(null);
+
+  const { login } = useAuthentication();
+
+  const onLoginClicked = useCallback(() => {
+    setError('');
+    setIsLoading(true);
+    login(username, password).then((success) => {
+      setIsLoading(false);
+      if (success) {
+        localStorage.setItem('username', username);
+        redirect('/');
+      } else {
+        setError('Identifiants invalides');
+      }
+    });
+  }, [login, password, username]);
+
+  useEffect(() => {
+    if (usernameInputRef.current && passwordInputRef.current) {
+      const input = !username
+        ? usernameInputRef.current
+        : passwordInputRef.current;
+      input.select();
+      input.focus();
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  if (isLoading) return <div>Chargement...</div>;
+
+  return (
+    <Card>
+      <FormContainer>
+        <StackedLabel label="Adresse e-mail / Nom d'utilisateur">
+          <Input
+            ref={usernameInputRef}
+            type="email"
+            autoComplete="email"
+            required
+            value={username}
+            onChange={(e) => setUsername(e.target.value)}
+            data-testid="login-username"
+          />
+        </StackedLabel>
+
+        <StackedLabel label="Mot de passe">
+          <Input
+            ref={passwordInputRef}
+            type="password"
+            autoComplete="current-password"
+            required
+            value={password}
+            onChange={(e) => setPassword(e.target.value)}
+            data-testid="login-password"
+          />
+        </StackedLabel>
+
+        {error && <Message type="error">{error}</Message>}
+
+        <Button
+          $color="primary"
+          onClick={onLoginClicked}
+          data-testid="login-submit"
+        >
+          Se connecter
+        </Button>
+
+        <Link to="/recover">Mot de passe oublié ?</Link>
+      </FormContainer>
+    </Card>
+  );
+};

package/src/components/auth/LoginPage.tsx

@@ -1,32 +1,32 @@
-import { FC } from 'react';
-import { Outlet } from 'react-router-dom';
-
-export const LoginPage: FC = () => {
-  return (
-    <div className="flex flex-row h-full w-full">
-      <div className="relative hidden w-0 flex-1 lg:block">
-        <img className="absolute inset-0 h-full w-full object-cover" alt="" />
-      </div>
-      <div className="flex flex-1 flex-col justify-space-evenly overflow-y-auto px-4 py-12 sm:px-6 lg:flex-none lg:px-24 xl:px-36">
-        <div className="mx-auto w-full max-w-sm lg:max-w-96 lg:w-96 xl:max-w-[32rem] xl:w-[32rem]">
-          <div className="text-center">
-            <img
-              className="h-20 w-auto inline-block"
-              src="/logo192.png"
-              alt="Burotel"
-            />
-            <h2 className="mt-8 text-2xl font-bold leading-9 tracking-tight text-gray-900">
-              Connectez-vous
-            </h2>
-          </div>
-
-          <div className="mt-10 sm:mx-auto sm:w-full sm:max-w-[640px]">
-            <div className="bg-white px-6 py-12 shadow sm:rounded-lg sm:px-12">
-              <Outlet />
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  );
-};
+import { FC } from 'react';
+import { Outlet } from 'react-router-dom';
+
+export const LoginPage: FC = () => {
+  return (
+    <div className="flex flex-row h-full w-full">
+      <div className="relative hidden w-0 flex-1 lg:block">
+        <img className="absolute inset-0 h-full w-full object-cover" alt="" />
+      </div>
+      <div className="flex flex-1 flex-col justify-space-evenly overflow-y-auto px-4 py-12 sm:px-6 lg:flex-none lg:px-24 xl:px-36">
+        <div className="mx-auto w-full max-w-sm lg:max-w-96 lg:w-96 xl:max-w-[32rem] xl:w-[32rem]">
+          <div className="text-center">
+            <img
+              className="h-20 w-auto inline-block"
+              src="/logo192.png"
+              alt="Burotel"
+            />
+            <h2 className="mt-8 text-2xl font-bold leading-9 tracking-tight text-gray-900">
+              Connectez-vous
+            </h2>
+          </div>
+
+          <div className="mt-10 sm:mx-auto sm:w-full sm:max-w-[640px]">
+            <div className="bg-white px-6 py-12 shadow sm:rounded-lg sm:px-12">
+              <Outlet />
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};