fix(docs): rename defects "infirma -> infima" + precise how to use sc…

…ss theme file

apps/docs/stories/usage/bootstrap-v5-scss.mdx

@@ -1,8 +1,4 @@
-import { Tabs } from '@codegouvfr/react-dsfr/Tabs';
-import { Source } from '@storybook/blocks';
-
-import ViteTab from '@dsfrc/docs/stories/usage/bootstrap-v5-scss-vite.mdx';
-import WebpackTab from '@dsfrc/docs/stories/usage/bootstrap-v5-scss-webpack.mdx';
+import DsfrScssExplanation from '@dsfrc/docs/stories/usage/dsfr-scss.mdx';
 
 Le fichier SCSS :
 
@@ -15,21 +11,4 @@ Pour s'en servir, remplacez l'import de style Bootstrap officiel par :
 import 'dsfr-connect/src/bootstrap-v5/index.scss';
 ```
 
-Mais comme notre fichier `.scss` importe des variables directement depuis le DSFR, vous devez installer leur librairie :
-
-<Tabs
-  tabs={[
-    { label: 'npm', isDefault: true, content: <Source language="shell" code="npm add @gouvfr/dsfr@^1.9.3"></Source> },
-    { label: 'yarn', isDefault: false, content: <Source language="shell" code="yarn add @gouvfr/dsfr@^1.9.3"></Source> },
-    { label: 'pnpm', isDefault: false, content: <Source language="shell" code="pnpm add @gouvfr/dsfr@^1.9.3"></Source> },
-  ]}
-/>
-
-Et comme la librairie DSFR utilise des alias lors de ces imports de style, nous somme obligés de définir d'en définir un minimum pour que la compilation SCSS fonctionne dans votre "module bundler" :
-
-<Tabs
-  tabs={[
-    { label: 'Projet utilisant Webpack', isDefault: true, content: <WebpackTab /> },
-    { label: 'Projet utilisant Vite', isDefault: false, content: <ViteTab /> },
-  ]}
-/>
+<DsfrScssExplanation />

apps/docs/stories/usage/dsfr-scss.mdx

@@ -0,0 +1,24 @@
+import { Tabs } from '@codegouvfr/react-dsfr/Tabs';
+import { Source } from '@storybook/blocks';
+
+import ViteTab from '@dsfrc/docs/stories/usage/dsfr-scss-vite.mdx';
+import WebpackTab from '@dsfrc/docs/stories/usage/dsfr-scss-webpack.mdx';
+
+Mais comme notre fichier `.scss` importe des variables directement depuis le DSFR, vous devez installer leur librairie :
+
+<Tabs
+  tabs={[
+    { label: 'npm', isDefault: true, content: <Source language="shell" code="npm add @gouvfr/dsfr@^1.9.3"></Source> },
+    { label: 'yarn', isDefault: false, content: <Source language="shell" code="yarn add @gouvfr/dsfr@^1.9.3"></Source> },
+    { label: 'pnpm', isDefault: false, content: <Source language="shell" code="pnpm add @gouvfr/dsfr@^1.9.3"></Source> },
+  ]}
+/>
+
+Et comme la librairie DSFR utilise des alias lors de ces imports de style, nous somme obligés de définir d'en définir un minimum pour que la compilation SCSS fonctionne dans votre "module bundler" :
+
+<Tabs
+  tabs={[
+    { label: 'Projet utilisant Webpack', isDefault: true, content: <WebpackTab /> },
+    { label: 'Projet utilisant Vite', isDefault: false, content: <ViteTab /> },
+  ]}
+/>

apps/docs/stories/usage/infima-v1-css.mdx

@@ -0,0 +1,19 @@
+Spécifiez le thème CSS dans Docusaurus v2 :
+
+```ts
+// docusaurus.config.js
+
+module.exports = {
+  // ...
+  presets: [
+    [
+      '@docusaurus/preset-classic',
+      {
+        theme: {
+          customCss: [require.resolve('dsfr-connect/dist/infima-v1/index.css')],
+        },
+      },
+    ],
+  ],
+};
+```

apps/docs/stories/usage/infima-v1-scss.mdx

@@ -0,0 +1,25 @@
+import DsfrScssExplanation from '@dsfrc/docs/stories/usage/dsfr-scss.mdx';
+
+Pour utiliser du SCSS il faut d'abord suivre leurs instructions sur [https://docusaurus.io/docs/styling-layout#sassscss](https://docusaurus.io/docs/styling-layout#sassscss).
+
+Puis spécifiez le thème SCSS :
+
+```ts
+// docusaurus.config.js
+
+module.exports = {
+  // ...
+  presets: [
+    [
+      '@docusaurus/preset-classic',
+      {
+        theme: {
+          customCss: [require.resolve('dsfr-connect/src/infima-v1/index.scss')],
+        },
+      },
+    ],
+  ],
+};
+```
+
+<DsfrScssExplanation />

apps/docs/stories/usage/infima-v1.stories.mdx

@@ -0,0 +1,18 @@
+import { Tabs } from '@codegouvfr/react-dsfr/Tabs';
+import { Meta } from '@storybook/blocks';
+
+import CssTab from '@dsfrc/docs/stories/usage/infima-v1-css.mdx';
+import ScssTab from '@dsfrc/docs/stories/usage/infima-v1-scss.mdx';
+
+<Meta title="dsfr-connect/Utilisation/infima-v1" />
+
+# infima-v1
+
+_Note: il est peu probable que vous utilisiez Infima hors du cadre d'usage de Docusaurus, c'est pourquoi cet outil est mentionné ci-dessous._
+
+<Tabs
+  tabs={[
+    { label: 'CSS (thème rigide)', isDefault: true, content: <CssTab /> },
+    { label: 'SCSS (thème flexible)', isDefault: false, content: <ScssTab /> },
+  ]}
+/>

apps/docs/utils/targets.ts

@@ -1,7 +1,7 @@
 import chalk, { Chalk } from 'chalk';
 
 import { build as bootstrapV5Build, downloadAndExtract as bootstrapV5DownloadAndExtract } from '@dsfrc/docs/scripts/bootstrap-v5/actions';
-import { build as infirmaV1Build, downloadAndExtract as infirmaV1DownloadAndExtract } from '@dsfrc/docs/scripts/infima-v1/actions';
+import { build as infimaV1Build, downloadAndExtract as infimaV1DownloadAndExtract } from '@dsfrc/docs/scripts/infima-v1/actions';
 import { build as muiV5Build, downloadAndExtract as muiV5DownloadAndExtract } from '@dsfrc/docs/scripts/mui-v5/actions';
 import { build as mainBuild, downloadAndExtract as mainDownloadAndExtract } from '@dsfrc/docs/scripts/raw/actions';
 import { build as vuetifyV3Build, downloadAndExtract as vuetifyV3DownloadAndExtract } from '@dsfrc/docs/scripts/vuetify-v3/actions';
@@ -49,8 +49,8 @@ export const frameworks: Target[] = [
   {
     name: 'infima-v1',
     port: 6010,
-    download: infirmaV1DownloadAndExtract,
-    extract: infirmaV1Build,
+    download: infimaV1DownloadAndExtract,
+    extract: infimaV1Build,
     terminalFormatter: chalk.red,
   },
 ];

packages/dsfr-connect/src/index.ts

@@ -10,5 +10,5 @@ export default {
   vuetifyV3: vuetifyV3,
   muiV5: muiV5,
   storybookV7: storybookV7,
-  infirmaV1: {},
+  infimaV1: {},
 };