Limited Dev Tools

Outils de développement pour Limited Hub.

Installation

``bash
npm install dio-devtool


ou


yarn add dio-devtool
`

Utilisation

$3

Le composant DevStoresModal permet d'inspecter et de modifier les stores Zustand de votre application.

`tsx
import { useGlobalStore } from "@/src/store/global.store";
import { useDealStore } from "@/src/store/hub/deal.store";
import { DevStoresModal, StoreConfig } from "dio-devtool";
import { Globe, Receipt } from "lucide-react";
import { toast } from "sonner";

export default function MonComposant() {
// Initialisation des stores
const globalStore = useGlobalStore();
const dealStore = useDealStore();

// Configuration des stores
const stores: StoreConfig[] = [
{
name: "Global",
datas: globalStore,
onSave: (newDatas) => {
globalStore.setStore(newDatas);
toast.success("Global Store data saved");
},
isFetchedKeys: ["userInfosLoaded"],
icon: ,
},
{
name: "Deal",
datas: dealStore,
onSave: (newDatas) => {
dealStore.setStore(newDatas);
toast.success("Deal Store data saved");
},
isFetchedKeys: ["dealFetched"],
icon: ,
},
];

return ;
}
`

$3

Le composant DevModal permet d'inspecter et de modifier n'importe quelle donnée JSON.

`tsx
import { DevModal } from "dio-devtool";

export default function MonComposant() {
const data = {
id: 1,
name: "Example",
value: 42,
};

const handleSave = (newData) => {
console.log("Données sauvegardées:", newData);
// Mettre à jour les données dans votre application
};

return ;
}
`

$3

Le composant DevColorsModal permet d'afficher les couleurs de votre thème.

`tsx
import { DevColorsModal } from "dio-devtool";

export default function MonComposant() {
return ;
}
`

API

$3

#### Props

| Prop | Type | Description | Default |
| ------------- | ----------------- | ----------------------------------------- | -------- |
| title | string | Titre du modal | "Stores" |
| icon | React.ReactNode | Icône à afficher à côté du titre | - |
| collapseDepth | number \| boolean | Profondeur de collapse pour ReactJsonView | false |
| className | string | Classe CSS supplémentaire | - |
| disabled | boolean | Désactive le bouton d'ouverture | false |
| canEdit | boolean | Permet l'édition des données | true |
| canDelete | boolean | Permet la suppression des données | true |
| stores | StoreConfig[] | Configuration des stores à afficher | - |

$3

#### Props (DevModal)

| Prop | Type | Description | Default |
| ------------- | ----------------- | ----------------------------------------- | --------------------- |
| datas | any | Données à afficher | - |
| title | string | Titre du modal | "Détails de la ligne" |
| onSave | function | Fonction appelée lors de la sauvegarde | console.log |
| collapseDepth | number \| boolean | Profondeur de collapse pour ReactJsonView | false |
| className | string | Classe CSS supplémentaire | - |
| disabled | boolean | Désactive le bouton d'ouverture | false |
| canEdit | boolean | Permet l'édition des données | true |
| canDelete | boolean | Permet la suppression des données | true |

$3

#### Props (DevColorsModal)

| Prop | Type | Description | Default |
| --------- | ------ | ------------------------- | -------- |
| title | string | Titre du modal | "Colors" |
| className | string | Classe CSS supplémentaire | - |

$3

`ts
export type FormStoreType = {
currentForm: any | null;
setCurrentForm: (form: any) => void;
};

export type StoreConfigType = {
name: string;
datas: any;
onSave: (newDatas: any) => void;
isFetchedKeys: string[];
icon?: React.ReactNode;
};

export type DevStoresModalPropsType = {
title?: string;
icon?: React.ReactNode;
collapseDepth?: number | boolean;
className?: string;
disabled?: boolean;
canEdit?: boolean;
canDelete?: boolean;
stores?: StoreConfigType[];
};

export type DevModalPropsType = {
datas: any;
title?: string;
onSave?: (newDatas: any) => void;
collapseDepth?: number | boolean;
className?: string;
disabled?: boolean;
canEdit?: boolean;
canDelete?: boolean;
};

export type DevColorsModalPropsType = {
title?: string;
className?: string;
};
``

Licence

MIT