This is the SEARS Framework with operartion workflow

Installation:

Install the package npm i di-bootcamp-anmolkamathxcvjsd @redux/toolkit redux-persist styled-components

Important : Install svgr loader for your Build tool

usage:

create these files :

//src/redux/store.js

import { configureStore } from '@reduxjs/toolkit';
import rootReducers from './reducers';
import storage from 'redux-persist/lib/storage';
import { persistReducer, persistStore } from 'redux-persist';

const persistConfig = {
  key: 'root',
  storage,
};

const persistedReducer = persistReducer(persistConfig, rootReducers);

export const store = configureStore({
  reducer: persistedReducer,
  devTools: process.env.NODE_ENV !== 'production',
});

export const dispatchAction = (actionType, payload) => {
  const action = { type: actionType, payload };
  store.dispatch(action);
};

export const persistor = persistStore(store);

//src/redux/reducers.js

import { combineReducers } from 'redux';
import { createSlice } from '@reduxjs/toolkit';

// Creation Workflow Slice
const creationWorkflowSlice = createSlice({
  name: 'Creation Workflow',
  initialState: {
    contexts: [],
    criterias: [],
    minmax: { min: 1, max: 3 },
    question: '',
    matrix: [],
    stage: 1,
  },
  reducers: {
    setContexts: (state, { payload }) => {
      state.contexts = payload; // Update property directly within state
    },
    setCriterias: (state, { payload }) => {
      state.criterias = payload;
    },
    setMinMax: (state, { payload }) => {
      state.minmax = payload;
    },
    setQuestion: (state, { payload }) => {
      state.question = payload;
    },
    setStage: (state, { payload }) => {
      state.stage = payload;
    },
    setMatrix: (state, { payload }) => {
      state.matrix = payload;
    },
  },
});

// Operation workflow Slice
const operationWorkflowSlice = createSlice({
  name: 'Operation Workflow',
  initialState: {
    framework: {},
    minmax: {
    min: 1,
    max: 3,
    },
    persuit: {
    title: '',
    contents: [],
    },
  },
  reducers: {
    setFramework: (state, { payload }) => {
      state.framework = payload;
    },
    setMinMax: (state, { payload }) => {
      state.minmax = payload;
    },
    setPersuit: (state, { payload }) => {
      state.contents = payload;
    },
  },
});

const rootReducers = combineReducers({
  CreationWorkflow: creationWorkflowSlice.reducer,
  OperationWorkflow: operationWorkflowSlice.reducer,
});

export default rootReducers;

to use the Whole SEARS framework :

import SEARS from "di-bootcamp-anmolkamathxcvjsd"
import { PersistGate } from 'redux-persist/integration/react';
import { persistor, store, dispatchAction } from './Redux/store';
import { Provider, connect } from 'react-redux';

function App() {
  const mapStateToProp = (state) => {
    return {
      state: { ...state },
      dispatchF: dispatchAction,
      workflow: 'operation',
    };
  };
  
  const ConnectToStore = connect(mapStateToProp)(SEARS);
  
  return (
    <>
      <Provider store={store}>
        <PersistGate persistor={persistor}>
          <ConnectToStore />  
        </PersistGate>
      </Provider>
    </>
  )
}

export default App

to use Components :

import {Button} from "di-bootcamp-anmolkamathxcvjsd"

const App = ()=>{
  return (
    <Button color="#bebebe" variant="solid">Click</Button>
  )
}
export default App;