@datagouv/components-next 0.0.8 → 0.0.10

package/README.md

@@ -1,12 +1,12 @@
 # @datagouv/components
 
-In this document, "the user" is the application using `@datagouv/components` (for example: `cdata` or `udata-front-kit`).
+In this document, "the user" is the application using `@datagouv/components` (for example: `cdata` or `udata-front-kit`). For general project setup and development, see the [main project README](../README.md).
 
 ## Usage
 
 ### Config
 
-`@datagouv/components` provides a Vue plugin to load the configuration.
+`@datagouv/components` provides a [Vue](https://vuejs.org/) plugin to load the configuration.
 
 ```ts
 import { datagouv } from '@datagouv/components-next'
@@ -21,10 +21,11 @@ app.use(datagouv, {
 
 ### Special functions and components (only for Nuxt)
 
-Nuxt is a special environnement (both server and browser) and require some special functions and components to work.
+Nuxt is a special environment (both server and browser) and requires some special functions and components to work.
 
 ```ts
-import { NuxtLinkLocale, TextClamp } from '#components'
+import { TextClamp } from '#components'
+import CdataLink from './components/CdataLink.vue'
 import { datagouv, type UseFetchFunction } from '@datagouv/components-next'
 
 const runtimeConfig = useRuntimeConfig()
@@ -49,20 +50,20 @@ app.vueApp.use(datagouv, {
     // Provide the component to create links inside the application
     // This component will receive the raw link (without i18n prefix)
     // and needs to add it.
-    appLink: NuxtLinkLocale,
+    appLink: CdataLink,
 })
 ```
 
 ### CSS
 
-`@datagouv/components` is using TailwindCSS and some DSFR right now. The user needs to provide the correct version of the DSFR. Concerning TailwindCSS, there is two modes:
+`@datagouv/components` is using [TailwindCSS](https://tailwindcss.com/docs) and some [DSFR](https://www.systeme-de-design.gouv.fr/) right now. The user needs to provide the correct version of the DSFR. Concerning TailwindCSS, there are two modes:
 
 1. If the user is using TailwindCSS, it can import a full TailwindCSS config with `@import "@datagouv/components-next/assets/main.css";`, then build the CSS via TailwindCSS CLI or Vite plugin.
-2. If the user is not using TailwindCSS, it can import an already built CSS file with `@import '@datagouv/components-next/dist/components.css';`. Note @dev, this file should be built before publishing the package to NPM with `npm run css`.
+2. If the user is not using TailwindCSS, it can import an already built CSS file with `@import '@datagouv/components-next/dist/components.css';`. Note @dev, this file should be built before publishing the package to NPM with `npm run css`. For more details on the [technology stack](../README.md#-technology-stack), see the main README.
 
 ### I18n
 
-`@datagouv/components` is using `vue-i18n` to provide internationalisation. As always, there is two modes:
+`@datagouv/components` is using [`vue-i18n`](https://vue-i18n.intlify.dev/) to provide internationalisation. As always, there are two modes:
 
 1. If the user is using Nuxt, it can simply add the locales files in the `nuxt.config.ts`
 
@@ -76,11 +77,11 @@ app.vueApp.use(datagouv, {
 
 Nuxt is responsible for building the JSON file to the correct `vue-i18n` JS format.
 
-2. If the user is not using Nuxt, it should provide the i18n object to the `datagouv` Vue plugin. The plugin will then merge the already built messages's files. Note @dev, the messages's files should be built with `npm run i18n` before publishing the package to NPM.
+2. If the user is not using Nuxt, it should provide the i18n object to the `datagouv` Vue plugin. The plugin will then merge the already built messages's files.
 
-### `Supense`
+### `Suspense`
 
-To work with Nuxt, some components are doing HTTP requests during the `setup` function (Nuxt can then do SSR for these requests: doing these requests server-side). These components need to be wrapped in a [`<Suspense>`](https://vuejs.org/guide/built-ins/suspense) wrapper (you can even provide a `#fallback`). You can either wrap individual components inside `<Suspense>` or wrap you're entire application/layout in `<Suspense>`
+To work with [Nuxt](https://nuxt.com/), some components are doing HTTP requests during the `setup` function (Nuxt can then do SSR for these requests: doing these requests server-side). These components need to be wrapped in a [`<Suspense>`](https://vuejs.org/guide/built-ins/suspense) wrapper (you can even provide a `#fallback`). You can either wrap individual components inside `<Suspense>` or wrap your entire application/layout in `<Suspense>`
 
 ```html
 <Suspense>
@@ -90,6 +91,19 @@ To work with Nuxt, some components are doing HTTP requests during the `setup` fu
 
 ## Development
 
+For general development guidelines and contributing, see the [contributing section](../README.md#-contributing) in the main README.
+
+### Code Linting and Formatting
+
+This component library uses both ESLint and Prettier for code quality and formatting:
+
+```bash
+npm run lint    # Lint and auto-fix ESLint issues
+npm run format  # Format code with Prettier
+```
+
+**Note:** Make sure to run both commands before submitting contributions to ensure consistent code style.
+
 ### Config
 
 You can use the config with the composable `useComponentsConfig()`.
@@ -103,7 +117,7 @@ const config = useComponentsConfig()
 ### Special functions and components (only for Nuxt)
 
 > [!WARNING]  
-> In `@datagouv/components` there is a few functions and components we cannot use directly:
+> In `@datagouv/components` there are a few functions and components we cannot use directly:
 > - `TextClamp` component
 > - `useFetch` Nuxt function 
 
@@ -145,6 +159,12 @@ const config = useComponentsConfig()
 
 #### Links
 
-To do links in the application you can use the `<AppLink>` component. No sure why it's required. Maybe we could always use a `<RouterLink>` from `vue-router` since every users is using `vue-router`? I think it's useful to add lang prefix to links but it's not done yet? Need testing.
+To do links in the application you can use the `<AppLink>` component. Not sure why it's required. Maybe we could always use a `<RouterLink>` from [`vue-router`](https://router.vuejs.org/) since every user is using `vue-router`? I think it's useful to add lang prefix to links but it's not done yet? Need testing.
+
+Maybe this component shouldn't be exposed too, because I don't know why a user should use this instead of their own component (`<RouterLink>` or `<CdataLink>`…)
+
+## 📄 License
+
+This component library is licensed under the **MIT License**, which is the same as the main project. This allows for permissive usage of the components in other projects.
 
-Maybe this component shouldn't be exposed too, because I don't know why a user should use this instead of his own component (`<RouterLink>` or `NuxtLinkLocale`…)
+For more details, see the [LICENSE](../LICENSE) file in the main project directory.