📦 Make @proconnect-gouv/proconnect.email publishable standalone

.changeset/wild-plums-jog.md

@@ -0,0 +1,7 @@
+---
+"@proconnect-gouv/proconnect.email": patch
+---
+
+📦 Rend le package installable de manière autonome hors du monorepo
+
+Passe la résolution de modules TypeScript en `NodeNext` et ajoute les extensions `.js` explicites sur les imports relatifs (requis par Node ESM). Marque le package public (`private: false`), limite le tarball publié au dossier `dist` via `files`, et déplace `@kitajs/ts-html-plugin` en dépendance de développement.

packages/email/.storybook/index.tsx

@@ -7,8 +7,8 @@ import type {
   Renderer,
   StoryAnnotations,
 } from "@storybook/csf";
-import { ChangeView } from "./ChangeView";
-import { SendEmailFormWebComponent } from "./SendEmailFormWebComponent";
+import { ChangeView } from "./ChangeView.js";
+import { SendEmailFormWebComponent } from "./SendEmailFormWebComponent.js";
 
 //
 

packages/email/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@proconnect-gouv/proconnect.email",
   "version": "1.0.0",
-  "private": true,
+  "private": false,
   "homepage": "https://github.com/proconnect-gouv/proconnect-identite/tree/main/packages/email#readme",
   "bugs": "https://github.com/proconnect-gouv/proconnect-identite/issues",
   "repository": {
@@ -12,6 +12,7 @@
   "license": "MIT",
   "sideEffects": false,
   "type": "module",
+  "files": ["dist"],
   "exports": {
     ".": {
       "require": {
@@ -35,10 +36,10 @@
     "type-check": "tsc --noEmit"
   },
   "dependencies": {
-    "@kitajs/html": "^4.2.9",
-    "@kitajs/ts-html-plugin": "^4.1.1"
+    "@kitajs/html": "^4.2.9"
   },
   "devDependencies": {
+    "@kitajs/ts-html-plugin": "^4.1.1",
     "@proconnect-gouv/proconnect.devtools.typescript": "1.0.0",
     "@storybook/csf": "^0.1.13",
     "prettier": "^3.8.3",

packages/email/src/Add2fa.stories.tsx

@@ -1,7 +1,7 @@
 //
 
 import type { ComponentAnnotations, Renderer } from "@storybook/csf";
-import Add2fa, { type Props } from "./Add2fa";
+import Add2fa, { type Props } from "./Add2fa.js";
 
 //
 

packages/email/src/Add2fa.tsx

@@ -1,7 +1,7 @@
 //
 
-import { Layout, type LayoutProps } from "./_layout";
-import { Text } from "./components";
+import { Layout, type LayoutProps } from "./_layout.js";
+import { Text } from "./components/index.js";
 
 //
 

packages/email/src/AddAccessKey.stories.tsx

@@ -1,7 +1,7 @@
 //
 
 import type { ComponentAnnotations, Renderer } from "@storybook/csf";
-import AddAccessKey, { type Props } from "./AddAccessKey";
+import AddAccessKey, { type Props } from "./AddAccessKey.js";
 
 //
 

packages/email/src/AddAccessKey.tsx

@@ -1,7 +1,7 @@
 //
 
-import { Layout, type LayoutProps } from "./_layout";
-import { Link, Text } from "./components";
+import { Layout, type LayoutProps } from "./_layout.js";
+import { Link, Text } from "./components/index.js";
 
 //
 

packages/email/src/Delete2faProtection.stories.tsx

@@ -1,7 +1,7 @@
 //
 
 import type { ComponentAnnotations, Renderer } from "@storybook/csf";
-import Delete2faProtection, { type Props } from "./Delete2faProtection";
+import Delete2faProtection, { type Props } from "./Delete2faProtection.js";
 
 //
 

packages/email/src/Delete2faProtection.tsx

@@ -1,7 +1,7 @@
 //
 
-import { Layout, type LayoutProps } from "./_layout";
-import { Text } from "./components";
+import { Layout, type LayoutProps } from "./_layout.js";
+import { Text } from "./components/index.js";
 
 //
 

packages/email/src/DeleteAccessKey.stories.tsx

@@ -1,7 +1,7 @@
 //
 
 import type { ComponentAnnotations, Renderer } from "@storybook/csf";
-import DeleteAccessKey, { type Props } from "./DeleteAccessKey";
+import DeleteAccessKey, { type Props } from "./DeleteAccessKey.js";
 
 //
 

packages/email/src/DeleteAccessKey.tsx

@@ -1,7 +1,7 @@
 //
 
-import { Layout, type LayoutProps } from "./_layout";
-import { Link, Text } from "./components";
+import { Layout, type LayoutProps } from "./_layout.js";
+import { Link, Text } from "./components/index.js";
 
 //
 

packages/email/src/DeleteAccount.stories.tsx

@@ -1,7 +1,7 @@
 //
 
 import type { ComponentAnnotations, Renderer } from "@storybook/csf";
-import DeleteAccount, { type Props } from "./DeleteAccount";
+import DeleteAccount, { type Props } from "./DeleteAccount.js";
 
 //
 

packages/email/src/DeleteAccount.tsx

@@ -1,7 +1,7 @@
 //
 
-import { Layout, type LayoutProps } from "./_layout";
-import { Link, Text } from "./components";
+import { Layout, type LayoutProps } from "./_layout.js";
+import { Link, Text } from "./components/index.js";
 
 //
 

packages/email/src/DeleteFreeTotpMail.stories.tsx

@@ -1,7 +1,7 @@
 //
 
 import type { ComponentAnnotations, Renderer } from "@storybook/csf";
-import DeleteFreeTotpMail, { type Props } from "./DeleteFreeTotpMail";
+import DeleteFreeTotpMail, { type Props } from "./DeleteFreeTotpMail.js";
 
 //
 

packages/email/src/DeleteFreeTotpMail.tsx

@@ -1,7 +1,7 @@
 //
 
-import { Layout, type LayoutProps } from "./_layout";
-import { Link, Text } from "./components";
+import { Layout, type LayoutProps } from "./_layout.js";
+import { Link, Text } from "./components/index.js";
 
 //
 

packages/email/src/MagicLink.stories.tsx

@@ -1,7 +1,7 @@
 //
 
 import type { ComponentAnnotations, Renderer } from "@storybook/csf";
-import MagicLink, { type Props } from "./MagicLink";
+import MagicLink, { type Props } from "./MagicLink.js";
 
 //
 

packages/email/src/MagicLink.tsx

@@ -1,18 +1,19 @@
 //
 
-import { Layout, type LayoutProps } from "./_layout";
-import { Button, Em, Text } from "./components";
+import { escapeHtml } from "@kitajs/html";
+import { Layout, type LayoutProps } from "./_layout.js";
+import { Button, Em, Text } from "./components/index.js";
 
 //
 
 export default function MagicLink(props: Props) {
-  const { baseurl, magic_link } = props;
+  const { baseurl, magic_link, app_name = "ProConnect" } = props;
   return (
     <Layout baseurl={baseurl}>
       <Text>Bonjour,</Text>
       <br />
       <Text>
-        Vous avez demandé un <b>lien d'identification</b> à ProConnect. Utilisez
+        Vous avez demandé un <b>lien d'identification</b> à {escapeHtml(app_name)}. Utilisez
         le bouton ci-dessous pour vous connecter instantanément.
         <br />
         <Em>Il est valable 1 heure</Em>.
@@ -29,4 +30,5 @@ export default function MagicLink(props: Props) {
 
 export type Props = LayoutProps & {
   magic_link: string;
+  app_name?: string;
 };

packages/email/src/OfficialContactEmailVerification.stories.tsx

@@ -3,7 +3,7 @@
 import type { ComponentAnnotations, Renderer } from "@storybook/csf";
 import OfficialContactEmailVerification, {
   type Props,
-} from "./OfficialContactEmailVerification";
+} from "./OfficialContactEmailVerification.js";
 
 //
 

packages/email/src/OfficialContactEmailVerification.tsx

@@ -1,7 +1,7 @@
 //
 
-import { Layout, type LayoutProps } from "./_layout";
-import { Badge, Em, Text } from "./components";
+import { Layout, type LayoutProps } from "./_layout.js";
+import { Badge, Em, Text } from "./components/index.js";
 
 //
 

packages/email/src/ResetPassword.stories.tsx

@@ -1,7 +1,7 @@
 //
 
 import type { ComponentAnnotations, Renderer } from "@storybook/csf";
-import ResetPassword, { type Props } from "./ResetPassword";
+import ResetPassword, { type Props } from "./ResetPassword.js";
 
 //
 

packages/email/src/ResetPassword.tsx

@@ -1,7 +1,7 @@
 //
 
-import { Layout, type LayoutProps } from "./_layout";
-import { Button, Em, Text } from "./components";
+import { Layout, type LayoutProps } from "./_layout.js";
+import { Button, Em, Text } from "./components/index.js";
 
 //
 

packages/email/src/UpdatePersonalDataMail.stories.tsx

@@ -5,7 +5,7 @@ import type {
   Renderer,
   StoryAnnotations,
 } from "@storybook/csf";
-import UpdatePersonalDataMail, { type Props } from "./UpdatePersonalDataMail";
+import UpdatePersonalDataMail, { type Props } from "./UpdatePersonalDataMail.js";
 
 //
 export default {

packages/email/src/UpdatePersonalDataMail.tsx

@@ -1,7 +1,7 @@
 //
 
-import { Layout, type LayoutProps } from "./_layout";
-import { Text } from "./components";
+import { Layout, type LayoutProps } from "./_layout.js";
+import { Text } from "./components/index.js";
 
 export default function UpdatePersonalDataMail(props: Props) {
   const { baseurl, family_name, given_name, updatedFields } = props;

packages/email/src/VerifyEmail.stories.tsx

@@ -1,7 +1,7 @@
 //
 
 import type { ComponentAnnotations, Renderer } from "@storybook/csf";
-import VerifyEmail, { type Props } from "./VerifyEmail";
+import VerifyEmail, { type Props } from "./VerifyEmail.js";
 
 //
 

packages/email/src/VerifyEmail.tsx

@@ -1,7 +1,7 @@
 //
 
-import { Layout, type LayoutProps } from "./_layout";
-import { Badge, Em, Text } from "./components";
+import { Layout, type LayoutProps } from "./_layout.js";
+import { Badge, Em, Text } from "./components/index.js";
 
 //
 

packages/email/src/Welcome.stories.tsx

@@ -1,7 +1,7 @@
 //
 
 import type { ComponentAnnotations, Renderer } from "@storybook/csf";
-import Welcome, { type Props } from "./Welcome";
+import Welcome, { type Props } from "./Welcome.js";
 
 //
 

packages/email/src/Welcome.tsx

@@ -1,7 +1,7 @@
 //
 
-import { Layout, type LayoutProps } from "./_layout";
-import { Em, Link, Text } from "./components";
+import { Layout, type LayoutProps } from "./_layout.js";
+import { Em, Link, Text } from "./components/index.js";
 
 //
 

packages/email/src/_layout.tsx

@@ -1,7 +1,7 @@
 //
 
 import type { PropsWithChildren } from "@kitajs/html";
-import { Html, ProConnectLogo, Section, Text } from "./components";
+import { Html, ProConnectLogo, Section, Text } from "./components/index.js";
 
 //
 

packages/email/src/components/Badge.tsx

@@ -1,7 +1,7 @@
 //
 
 import type { PropsWithChildren } from "@kitajs/html";
-import { fontFamily, info_950 } from "./style";
+import { fontFamily, info_950 } from "./style.js";
 
 //
 

packages/email/src/components/Button.tsx

@@ -1,7 +1,7 @@
 //
 
 import type { PropsWithChildren } from "@kitajs/html";
-import { blueFranceSun_113, fontFamily } from "./style";
+import { blueFranceSun_113, fontFamily } from "./style.js";
 
 //
 

packages/email/src/components/Em.tsx

@@ -1,7 +1,7 @@
 //
 
 import type { PropsWithChildren } from "@kitajs/html";
-import { blueFranceSun_113, fontFamily } from "./style";
+import { blueFranceSun_113, fontFamily } from "./style.js";
 
 //
 

packages/email/src/components/Link.tsx

@@ -1,7 +1,7 @@
 //
 
 import type { PropsWithChildren } from "@kitajs/html";
-import { fontFamily } from "./style";
+import { fontFamily } from "./style.js";
 
 //
 

packages/email/src/components/Text.tsx

@@ -1,7 +1,7 @@
 //
 
 import type { PropsWithChildren } from "@kitajs/html";
-import { fontFamily } from "./style";
+import { fontFamily } from "./style.js";
 
 //
 

packages/email/src/components/index.ts

@@ -1,10 +1,10 @@
 //
 
-export * from "./Badge";
-export * from "./Button";
-export * from "./Em";
-export * from "./Html";
-export * from "./Link";
-export * from "./ProConnectLogo";
-export * from "./Section";
-export * from "./Text";
+export * from "./Badge.js";
+export * from "./Button.js";
+export * from "./Em.js";
+export * from "./Html.js";
+export * from "./Link.js";
+export * from "./ProConnectLogo.js";
+export * from "./Section.js";
+export * from "./Text.js";

packages/email/src/index.ts

@@ -1,14 +1,14 @@
 //
 
-export { default as Add2fa } from "./Add2fa";
-export { default as AddAccessKey } from "./AddAccessKey";
-export { default as Delete2faProtection } from "./Delete2faProtection";
-export { default as DeleteAccessKey } from "./DeleteAccessKey";
-export { default as DeleteAccount } from "./DeleteAccount";
-export { default as DeleteFreeTotpMail } from "./DeleteFreeTotpMail";
-export { default as MagicLink } from "./MagicLink";
-export { default as OfficialContactEmailVerification } from "./OfficialContactEmailVerification";
-export { default as ResetPassword } from "./ResetPassword";
-export { default as UpdatePersonalDataMail } from "./UpdatePersonalDataMail";
-export { default as VerifyEmail } from "./VerifyEmail";
-export { default as Welcome } from "./Welcome";
+export { default as Add2fa } from "./Add2fa.js";
+export { default as AddAccessKey } from "./AddAccessKey.js";
+export { default as Delete2faProtection } from "./Delete2faProtection.js";
+export { default as DeleteAccessKey } from "./DeleteAccessKey.js";
+export { default as DeleteAccount } from "./DeleteAccount.js";
+export { default as DeleteFreeTotpMail } from "./DeleteFreeTotpMail.js";
+export { default as MagicLink } from "./MagicLink.js";
+export { default as OfficialContactEmailVerification } from "./OfficialContactEmailVerification.js";
+export { default as ResetPassword } from "./ResetPassword.js";
+export { default as UpdatePersonalDataMail } from "./UpdatePersonalDataMail.js";
+export { default as VerifyEmail } from "./VerifyEmail.js";
+export { default as Welcome } from "./Welcome.js";