dso-react-plugin-inventory v0.0.2

Inventory Plugin

The Inventory Plugin is designed to help you manage and organize various resources in your application. This plugin allows you to register and manage different resources such as locations, groups, and more.

Built With

• Menu UI: React + styled-component + Ant Design.
• State management: Zustand.
• Package management: yarn (recommended yarn, should not use npm or bun).
• IDE: VS Code.

Table of Contents

• Installation
• How to use Inventory Plugin
• How to create a Plugin like Inventory Plugin

Installation

First, copy this git repository of inventory plugin, named this link:

https://git.dision.office/dso637/dso-react-plugin-inventory.git

Then import it into your package.json at dependencies section

 "dependencies": {
	"@ant-design/icons": "^5.4.0",`
	"dso-react-plugin-inventory": "https://git.dision.office/dso637/dso-react-plugin-inventory.git",`
	"antd": "^5.19.2",
	"pocketbase": "^0.21.3",
	"react": "^18.3.1",
	"react-dom": "^18.3.1",
	"react-router-dom": "6",
	"zustand": "^4.5.4"
`},

Then, install packages using npm/yarn/bun: (recommended yarn)

Then, install packages using npm/yarn/bun: (recommended yarn)

npm i or yarn or bun i

How to use Inventory Plugin

Overview

    import { ExamplePlugin } from 'ds-example-plugin';
    import { ReactNode, useState } from 'react';
    import { BrowserRouter } from 'react-router-dom';
    import { useMainComponentStore } from './common/main-stores';

    function SampleUsePlugin() {
      const { registerPlugin } = useMainComponentStore();
      return (
        <BrowserRouter>
           <ExamplePlugin
    	     backendProvider={pocketBase};
             activePlugin={(plugin: TRegisterPlugin, menu: React.ReactNode) => {
                registerPlugin(plugin);
               // Do some stuff with menu that Plugin returned.
             }}
           />
        </BrowserRouter>
      );
    }
    export default SampleUsePlugin;

Type of ExamplePlugin

type TExamplePlugin = {
  label?: ReactNode,
  basePath?: string,
  icon?: JSX.Element,
  activePlugin: (pluginConfig: TRegisterPlugin, menu: ReactNode) => void,
  dataProvider?: any,
};

Note: registerPlugin is the function register that can take Router setup from your plugin.

Definitions

• activePlugin: This function is used to register routes for the ExamplePlugin. When a plugin is activated, this function registers the plugin and updates the component state to render the <Menu> component.
• backendProvider: This refers to the data provider object used for handling data types within the application.

How to create a Plugin like Inventory Plugin

Create file Plugin.tsx.

Step 1: Create a Functional Component Plugin, cover it by PluginManagerProvider and DataProvider respectively.

import React, { useEffect } from "react";
import { DataProvider, PluginManagerProvider } from "./cores/providers";
import { TPlugin } from "./types";
const Plugin: React.FC<TPlugin> = ({
  label = "YOUR_DEFAULT_PLUGIN_NAME",
  basePath = "/YOUR_DEFAULT_BASE_PATH",
  icon,
}) => {
  return (
    <PluginManagerProvider sourcePath={basePath}>
      <DataProvider>{/* Child components */}</DataProvider>
    </PluginManagerProvider>
  );
};

export default Plugin;

Note: replace YOUR_DEFAULT_PLUGIN_NAME and YOUR_DEFAULT_BASE_PATH by your own default configs.

Step 2: Import our <RouteResources/> for registration router for your elements in Plugin.

import React, { useEffect } from "react";
import { RouteResource } from "./bases";
import { DataProvider, PluginManagerProvider } from "./cores/providers";
import { TPlugin } from "./types";
const Plugin: React.FC<TPlugin> = ({
  label = "YOUR_DEFAULT_PLUGIN_NAME",
  basePath = "/YOUR_DEFAULT_BASE_PATH",
  icon,
}) => {
  return (
    <PluginManagerProvider sourcePath={basePath}>
      <DataProvider>
        <RouteResources
          key={"sample_name"}
          name={"sample_name"}
          element={/*Implement your render component*/}
        />
      </DataProvider>
    </PluginManagerProvider>
  );
};

export default Plugin;

Step 3: Import our <Resources/> component to implement CRUD for your elements.

import React, { useEffect } from "react";
import { TPlugin } from "./types";
import { RouteResource } from "./bases";
import { DataProvider, PluginManagerProvider } from "./cores/providers";
import { sampleList, SampleEdit, SampleCreate } from "./PluginSampleConfig";
const Plugin: React.FC<TPlugin> = ({
  label = "YOUR_DEFAULT_PLUGIN_NAME",
  basePath = "/YOUR_DEFAULT_BASE_PATH",
  icon,
}) => {
  return (
    <PluginManagerProvider sourcePath={basePath}>
      <DataProvider>
        <RouteResources
          key={"sample_name"}
          name={"sample_name"}
          element={
            <Resources
              list={sampleList} //your sample
              edit={<SampleEdit />} //your sample
              create={<SampleCreate />} //your sample
            />
          }
        />
      </DataProvider>
    </PluginManagerProvider>
  );
};

export default Plugin;

Step 4: Create listSample, <SampleEdit/> and <SampleCreate />.

Create Folder PluginSampleConfig. Then create file index.tsx. The list has type of TableProps<DataType>['columns'] or we can know as ColumnsType<DataType> of Ant Design table.

• Note: DataType is depend on your type of data you want to display.
• Visit: https://ant.design/components/table#column for more information.

import { DiCreate, DiEdit, DiInput } from "../../../bases";

export const sampleList = [
  { title: "Name", dataIndex: "name", key: "name" },
  { title: "Collection", dataIndex: "collectionId", key: "collectionId" },
  { title: "Status", dataIndex: "status", key: "status" },
  { title: "Playbook", dataIndex: "playbook", key: "playbook" },
  { title: "Description", dataIndex: "description", key: "description" },
  /**You can create more based on your DataType, If you setting list dataIndex do not fit your DataType, It will be empty**/
];

export const SampleCreate = () => {
  return (
    <DiCreate>
      <DiInput name={"name"} />
      <DiInput name="collectionId" />
      <DiInput name="playbook" />
    </DiCreate>
  );
};

export const SampleEdit = () => {
  return (
    <DiEdit>
      <DiInput name={"name"} />
      <DiInput name="collectionId" />
      <DiInput name="playbook" />
    </DiEdit>
  );
};