Limited Dev Tools

Outils de développement pour Limited Hub.

Installation

npm install dio-devtool
# ou
yarn add dio-devtool

Utilisation

DevStoresModal

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

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: <Globe size={16} />,
    },
    {
      name: "Deal",
      datas: dealStore,
      onSave: (newDatas) => {
        dealStore.setStore(newDatas);
        toast.success("Deal Store data saved");
      },
      isFetchedKeys: ["dealFetched"],
      icon: <Receipt size={16} />,
    },
  ];

  return <DevStoresModal stores={stores} />;
}

DevModal

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

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 <DevModal datas={data} onSave={handleSave} />;
}

DevColorsModal

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

import { DevColorsModal } from "dio-devtool";

export default function MonComposant() {
  return <DevColorsModal />;
}

API

DevStoresModal (Composant)

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 | - |

DevModal (Composant)

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 |

DevColorsModal (Composant)

Props (DevColorsModal)

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

StoreConfig (Type)

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