test

Author: Maxenceee

scripts/picto-builder.ts

@@ -96,6 +96,7 @@ export default createIcon(
 
 async function generateIndex(outputDir: string): Promise<string> {
     const files = await glob(`${outputDir}/*.tsx`);
+    const filePath = path.join(outputDir, "index.ts");
 
     const exports = files
         .map(f => {
@@ -104,21 +105,22 @@ async function generateIndex(outputDir: string): Promise<string> {
         })
         .join("\n");
 
-    await fs.writeFile(path.join(outputDir, "index.ts"), exports);
-    return path.join(outputDir, "index.ts");
+    await fs.writeFile(filePath, exports);
+    return filePath;
 }
 
 async function generateTypes(outputDir: string): Promise<string> {
     const files = await glob(`${outputDir}/*.tsx`);
     const iconNames = files.map(f => pascalCaseName(path.basename(f, ".tsx")));
+    const filePath = path.join(outputDir, "index.d.ts");
 
     const header = `import { IconWrapper } from './utils/IconWrapper';\n\ntype SvgIconComponent = typeof IconWrapper;\n\n`;
     const lines = iconNames.map(name => `export const ${name}: SvgIconComponent;`);
 
     const content = `${header}${lines.join("\n")}\n`;
 
-    await fs.writeFile(path.join(outputDir, "index.d.ts"), content, "utf8");
-    return path.join(outputDir, "index.d.ts");
+    await fs.writeFile(filePath, content, "utf8");
+    return filePath;
 }
 
 export async function build(srcDir: string, outDir: string): Promise<string[]> {

test/integration/cra/src/Picto.tsx

@@ -0,0 +1,18 @@
+import { fr } from "@codegouvfr/react-dsfr";
+
+import * as Pictogrammes from '@codegouvfr/react-dsfr/picto';
+
+export function Picto() {
+    return (
+        <div className={fr.cx("fr-my-4w")}>
+            {
+                Object.entries(Pictogrammes).map(([name, Component]) => (
+                    <Component
+                    key={name}
+                    fontSize="10em"
+                    />
+                ))
+            }
+        </div>
+    )
+}

test/integration/cra/src/index.tsx

@@ -3,6 +3,7 @@ import { createRoot } from "react-dom/client";
 import { startReactDsfr } from "@codegouvfr/react-dsfr/spa";
 import { Home } from "./Home";
 import { Mui } from "./Mui";
+import { Picto } from "./Picto";
 import { useRoute, RouteProvider } from "./router";
 import { Header } from "@codegouvfr/react-dsfr/Header";
 import { fr } from "@codegouvfr/react-dsfr";
@@ -57,6 +58,11 @@ function Root() {
                         "text": "Mui playground",
                         "linkProps": routes.mui().link,
                         "isActive": route.name === "mui"
+                    },
+                    {
+                        "text": "Picto playground",
+                        "linkProps": routes.picto().link,
+                        "isActive": location.pathname === "picto"
                     }
                 ]}
             />
@@ -70,6 +76,7 @@ function Root() {
                     switch (route.name) {
                         case "mui": return <Mui />;
                         case "home": return <Home />;
+                        case "picto": return <Picto />;
                         case false: return <h1>404</h1>
                     }
                 })()}

test/integration/cra/src/router.ts

@@ -3,6 +3,7 @@ import { createRouter, defineRoute } from "type-route";
 const routeDefs = {
     "home": defineRoute("/"),
     "mui": defineRoute("/mui"),
+    "picto": defineRoute("/picto"),
 };
 
 export const { RouteProvider, useRoute, routes } = createRouter(routeDefs);