Merge branch 'dev'

apps/docs-bootstrap-v5/package.json

@@ -24,6 +24,7 @@
     "@storybook/html-vite": "7.0.17",
     "@storybook/manager-api": "7.0.17",
     "bootstrap": "^5.3.0-alpha3",
+    "dsfr-connect": "workspace:dsfr-connect@*",
     "eslint": "7.32.0",
     "eslint-config-custom": "workspace:*",
     "glob": "^10.2.6",

apps/docs-infima-v1/package.json

@@ -23,6 +23,7 @@
     "@storybook/html": "7.0.17",
     "@storybook/html-vite": "7.0.17",
     "@storybook/manager-api": "7.0.17",
+    "dsfr-connect": "workspace:dsfr-connect@*",
     "eslint": "7.32.0",
     "eslint-config-custom": "workspace:*",
     "glob": "^10.2.6",

apps/docs-mui-v5/package.json

@@ -42,6 +42,7 @@
     "autosuggest-highlight": "^3.3.4",
     "clsx": "^1.2.1",
     "css-mediaquery": "^0.1.2",
+    "dsfr-connect": "workspace:dsfr-connect@*",
     "eslint": "7.32.0",
     "eslint-config-custom": "workspace:*",
     "fg-loadcss": "^3.1.0",

apps/docs-mui-v5/tsconfig.json

@@ -3,7 +3,8 @@
   "compilerOptions": {
     "paths": {
       "@dsfrc/docs/*": ["../../apps/docs/*"],
-      "@dsfrc/dsfr-connect/*": ["../../packages/dsfr-connect/*"]
+      "@dsfrc/dsfr-connect/*": ["../../packages/dsfr-connect/*"],
+      "dsfr-connect/*": ["../../packages/dsfr-connect/*"]
     }
   },
   "include": [".storybook/**/*.ts", ".storybook/**/*.tsx", "stories/**/*.ts", "stories/**/*.tsx"],

apps/docs-vuetify-v3/package.json

@@ -30,6 +30,7 @@
     "@vuelidate/validators": "^2.0.2",
     "bootstrap": "^5.3.0-alpha3",
     "date-fns": "^2.30.0",
+    "dsfr-connect": "workspace:dsfr-connect@*",
     "eslint": "7.32.0",
     "eslint-config-custom": "workspace:*",
     "glob": "^10.2.6",

apps/docs-vuetify-v3/tsconfig.json

@@ -4,7 +4,8 @@
     "paths": {
       "@dsfrc/docs/*": ["../../apps/docs/*"],
       "@dsfrc/dsfr-connect/*": ["../../packages/dsfr-connect/*"],
-      "@/util/*": ["stories/framework/util/*"]
+      "@/util/*": ["stories/framework/util/*"],
+      "dsfr-connect/*": ["../../packages/dsfr-connect/*"]
     },
     "types": ["vite/client"]
   },

apps/docs/package.json

@@ -20,6 +20,7 @@
     "deploy": "netlify deploy --filter docs --dir=dist --prod"
   },
   "devDependencies": {
+    "@codegouvfr/react-dsfr": "^0.60.0",
     "@dsfrc/dsfr-connect": "workspace:dsfr-connect@*",
     "@gouvfr/dsfr": "^1.9.3",
     "@storybook/addon-docs": "7.0.17",
@@ -48,6 +49,7 @@
     "commander": "^10.0.1",
     "concurrently": "^8.0.1",
     "crisp-sdk-web": "^1.0.18",
+    "dsfr-connect": "workspace:dsfr-connect@*",
     "eslint": "7.32.0",
     "eslint-config-custom": "workspace:*",
     "fs-extra": "^11.1.1",

apps/docs/stories/introduction.mdx → apps/docs/stories/introduction.stories.mdx

@@ -1,4 +1,5 @@
-import { Meta } from '@storybook/blocks';
+import { Tabs } from '@codegouvfr/react-dsfr/Tabs';
+import { Meta, Source } from '@storybook/blocks';
 
 <Meta title="dsfr-connect/Introduction" />
 
@@ -44,17 +45,13 @@ _L'équipe du DSFR n'est pas à l'origine de cette librairie, les auteurs de `ds
 
 ### Projet JavaScript/TypeScript
 
-Avec NPM :
-
-```
-npm install dsfr-connect
-```
-
-Avec Yarn :
-
-```
-yarn add dsfr-connect
-```
+<Tabs
+  tabs={[
+    { label: 'npm', isDefault: true, content: <Source language="shell" code="npm add dsfr-connect"></Source> },
+    { label: 'yarn', isDefault: false, content: <Source language="shell" code="yarn add dsfr-connect"></Source> },
+    { label: 'pnpm', isDefault: false, content: <Source language="shell" code="pnpm add dsfr-connect"></Source> },
+  ]}
+/>
 
 Vous êtes ensuite en mesure d'importer les styles nécessaires pour adapter l'instance de votre framework UI.
 

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

@@ -0,0 +1,11 @@
+Le fichier CSS statique :
+
+- Contient tout le style Bootstrap compilé avec nos personnalisations
+- Est facile à importer
+- Rend par contre difficile la sur-personnalisation si jamais vous vouliez changer des choses
+
+Pour s'en servir, remplacez juste l'import de style Bootstrap officiel par :
+
+```ts
+import 'dsfr-connect/dist/bootstrap-v5/index.css';
+```

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

@@ -0,0 +1,14 @@
+import DsfrScssExplanation from '@dsfrc/docs/stories/usage/dsfr-scss.mdx';
+
+Le fichier SCSS :
+
+- Vous permet d'étendre ou de surcharger nos personnalisations pour qu'elles se répercutent sur tous les composants Bootstrap
+- Nécessite un peu plus de configuration du fait de compiler le style final dans votre projet
+
+Pour s'en servir, remplacez l'import de style Bootstrap officiel par :
+
+```ts
+import 'dsfr-connect/src/bootstrap-v5/index.scss';
+```
+
+<DsfrScssExplanation />

apps/docs/stories/usage/bootstrap-v5.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/bootstrap-v5-css.mdx';
+import ScssTab from '@dsfrc/docs/stories/usage/bootstrap-v5-scss.mdx';
+
+<Meta title="dsfr-connect/Utilisation/bootstrap-v5" />
+
+# bootstrap-v5
+
+Remplacez l'import du style par défaut de Bootstrap au sein de votre applicatif.
+
+<Tabs
+  tabs={[
+    { label: 'CSS (thème rigide)', isDefault: true, content: <CssTab /> },
+    { label: 'SCSS (thème flexible)', isDefault: false, content: <ScssTab /> },
+  ]}
+/>

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

@@ -0,0 +1,18 @@
+Dans votre fichier `vite.config.js` vous devez déclarez l'alias suivant au sein de votre configuration actuelle :
+
+```ts
+const path = require('path');
+
+// ...
+
+const viteConfig = {
+  // ...
+  resolve: {
+    // ...
+    alias: {
+      // ...
+      module: path.resolve(__dirname, './node_modules/@gouvfr/dsfr/module'),
+    },
+  },
+};
+```

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

@@ -0,0 +1,18 @@
+Dans votre fichier `webpack.config.js` vous devez déclarez l'alias suivant au sein de votre configuration actuelle :
+
+```ts
+const path = require('path');
+
+// ...
+
+const webpackConfig = {
+  // ...
+  resolve: {
+    // ...
+    alias: {
+      // ...
+      module: path.resolve(__dirname, './node_modules/@gouvfr/dsfr/module'),
+    },
+  },
+};
+```

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 le fichier `.scss` du thème 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 d'en définir un minimum pour que la compilation SCSS fonctionne dans le préprocesseur :
+
+<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/stories/usage/storybook-v7.mdx → apps/docs/stories/usage/storybook-v7.stories.mdx

@@ -80,6 +80,7 @@ _N'hésitez pas à aller voir l'interface `ThemeVars` dans `dsfr-connect/src/sto
 // .storybook/preview.ts
 import '@gouvfr/dsfr/dist/dsfr/dsfr.css';
 import '@gouvfr/dsfr/dist/utility/utility.css';
+
 import 'dsfr-connect/dist/fonts/index.css';
 ```
 

apps/docs/stories/usage/vuetify-v3-vite.mdx

@@ -0,0 +1,8 @@
+Dans votre fichier `vite.config.js` vous devez adapter votre configuration actuelle pour avoir :
+
+```ts
+vuetify({
+  // ...
+  styles: { configFile: 'node_modules/dsfr-connect/src/vuetify-v3/settings.scss' },
+});
+```

apps/docs/stories/usage/vuetify-v3-webpack.mdx

@@ -0,0 +1,8 @@
+Dans votre fichier `webpack.config.js` vous devez adapter votre configuration actuelle pour avoir :
+
+```ts
+new VuetifyPlugin({
+  // ...
+  styles: { configFile: 'node_modules/dsfr-connect/src/vuetify-v3/settings.scss' },
+});
+```