yangsuite-ui-utils

Package that contains reusable components used in yangsuite plugins such as Header or Footer.

Usage

1. Add package reducers to your store.js.

import { reducers } from "yangsuite-ui-utils";
import { combineReducers } from "redux";

const rootReducer = combineReducers({
  ...reducers,
  pluginsSlice1: pluginsSlice1,
  pluginsSlice2: pluginsSlice2,
});

export default configureStore({
  reducer: rootReducer,
});

2. Import for example Layout componenet and use is in your react router configuration.

import { createRoot } from "react-dom/client";
import { Provider } from "react-redux";
import store from "./store";
import { createBrowserRouter, RouterProvider } from "react-router-dom";
import { Layout } from "yangsuite-ui-utils";

const router = createBrowserRouter([
  {
    path: "/ysexample",
    element: <Layout />,
    children: [
      {
        path: "",
        element: <div>My component</div>,
      },
    ],
  },
]);

createRoot(document.getElementById("app")).render(
  <Provider store={store}>
    <RouterProvider router={router}></RouterProvider>
  </Provider>,
);

Refer to exported packages to see all components and functions you can use

Components

Loader

import { Loader } from "yangsuite-ui-utils";
function myComponent() {
  return <Loader msg="Fetching devices" />;
}

Simple spinning loader.

Props:

• msg: Message to display while loading data

Layout

import { Layout } from "yangsuite-ui-utils";

Use it as root component to wrap your app with Header and Navbar

useCustomNaviage

import useCustomNavigate from "./navigation";
function myComponent() {
  const navigate = useCustomNavigate();

  return <btn onClick={(e) => navigate('link')}></btn>;
}

Hook used to navigate beetween diffrent apps. It will automaticlly decide if redirection should be only within given plugin or beyond it.

Redux layout

Store

{
  visible: false, // Tells if sidebar is visible or not
  menu: [], // All sidebar menus
  plugins: {}, // All plugins implemented by plugins
  currentPlugin: "yangsuite" // Current plugin that we are at. Used for routing.
  userInfo: {
    loggedIn: False | True
    username: ""
  }
};

Actions

{
  toggleNav, // Toggle navbar
  showNav, // Show navbar
  closeNav, // Close navbar
  useCustomNavigate, // Hook to navigate beetween pages
}

Development

1. Install node modules and build bundle
   > npm i
> npm run build-dev

2. Create global symlink
   > npm link

3. Use create link within your plugin
   > npm link yangsuite-ui-utils
> npm i