Reuseable component

Installation

Install all the dependencies devDependencies

npm i react react-dom react-bootstrap 
styled-components di-eaiou

Card

Props to pass

• id => of type string
• title => of type string
• content => of type string
• textAlign => of boolean

    <Card
        id={"1"}
        title={"This is a card with a title"}
        content={"Lorem ipsum "}
        textAlign={true}
    />

CreationWorkflow

1. Create a redux store with initial value as

const initialState = {
  numContext: 0,
  contextValue: null,
  numCriteria: 0,
  criteriaValue: null,
  justifyQuestion: '',
  justifyAnswer: [],
  riskMatrix: '',
  riskMatrixColor: '',
  min: 1,
  max: '',
};

2. Reducers

  reducers: {
    addNumContext: (state, action) => {
      state.numContext = action.payload;
    },
    addContextValue: (state, action) => {
      state.contextValue = action.payload;
    },
    addNumCriteria: (state, action) => {
      state.numCriteria = action.payload;
    },
    addCriteriaValue: (state, action) => {
      state.criteriaValue = action.payload;
    },
    setJustifyQuestion: (state, action) => {
      state.justifyQuestion = action.payload;
    },
    setJustifyAnswer: (state, action) => {
      state.justifyAnswer.push(action.payload);
    },
    setRiskMatrix: (state, action) => {
      state.riskMatrix = action.payload;
    },
    setRiskMatrixColor: (state, action) => {
      state.riskMatrixColor = action.payload;
    },
    addMinRange: (state, action) => {
      state.min = action.payload;
    },
    addMaxRange: (state, action) => {
      state.max = action.payload;
    },
  },

3. Pass Props to child component

    <CreationWorkflow
        data={data}
        metadata={metadata}
        customization={customization}
        configuration={configuration}
        contextManager={contextManager}
    />

CustomButton

This is a button that has been styled using React-Bootstrap Button component.

Props to Pass

• variant => i.e success, success-outline, danger, danger-outline etc.
• text => of type string.
• onClick => Callback function
• className => Add extra bootstrap classes for change in behavior of the component

    <CustomButton
        variant={"success"}
        onClick={() => console.log('callFun')}
        text={"Submit"}
        className={"p-2"}
    />

ErrorToken

This is a ErrorToken used to show error

Props to Pass

• message => of type string
• $type => of boolean
• setShowError => callback function to update the state
• $isVisible => boolean
• label => of type string

    <ErrorToken
        message={"All fields are mandatory"}
        $type={true}
        setShowError={setIsErrorShown}
        $isVisible={true}
        label={"Error"}
    />

FormInput

This is an Input field which can be used collect data from the user.

Props to pass:

• id => type string
• text => type string
• type => i.e text, number
• name => type string
• value => type string
• setValue => callback function to update the value state
• disabled => type boolean

    <FormInput
        text={'Enter Your Name'}
        id={'name'}
        type={'text'}
        name={'username'}
        value={userName}
        setValue={setUserName}
    />

    <FormInput
        text={'Enter Your Age'}
        id={'age'}
        type={'number'}
        name={'userAge'}
        value={userAge}
        setValue={setUserAge}
    />

    <FormInput
        text={'Minimum Value'}
        id={'min'}
        type={'number'}
        name={'min'}
        value={'1'}
        disabled={true}
    />

Gallery

This is a Gallery component used to display link like Photo, Videos

    const videoLink = [
        {
            id: 1,
            title: 'Video 1',
            link: 'https://www.youtube.com/watch?v=qHCG6j-ZRgU'
        },
        {
            id: 2,
            title: 'Video 2',
            video_link: 'https://www.youtube.com/watch?v=dcLh0CL294E',
        },
    ]

    <Gallery
        content={videoLink}
    />

Header

The header component displays title of the Page

Props to pass

• title => Array of string values
• $status => identity for

    <Header
        title={['Value 1', 'Value 2', 'Total Value']}
        $status={1}
    />

OperationWorkflow

It shows the workflow of an operation in matrix

Props to pass

• data => data used in component
• metadata => data about component
• customization => all the props which are used to customize the style of the component
• configuration => All the function or condition responsible for configuration of the component
• contextManager => All the function or value to manage the context

    <OperationWorkflow
        data={data}
        metadata={metadata}
        customization={customization}
        configuration={configuration}
        contextManager={contextManager}
    />

Cell

This is a basic cell that will be rendered inside TableRow. It can contain text or number.

Props to pass

• value => type of string or number
• $circleColor => Background of the cell
• selected => type boolean
• onClick => Callback function

    <Cell
        value="50"
        $circleColor="#4caf50"
        selected={true}
        onClick={()=>{}}
    />

PreviewTable

A table showing the Preview of the Matrix which cannot be edited

Props to pass

• data => container the data of the matrix

    <PreviewTable
        data={data}
        metadata={metadata}
        customization={customization}
        configuration={configuration}
        contextManager={contextManager}
    />

RiskAssessmentMatrix

The main component for displaying and editing the risk assessment matrix.

Props to pass

• data => The current state of the matrix, an array of arrays containing objects with value, color, label. If not provided it defaults to 1 and '#123'

    <RiskAssessmentMatrix
        data={data}
        metadata={metadata}
        customization={customization}
        configuration={configuration}
        contextManager={contextManager}
    />

RiskDeterminationMatrix

This is a Risk Determination Matrix of size 3X3. which is used to update the Risk Value of the Risk Assessment Matrix

Props to pass

    <RiskDeterminationMatrix
        handelRiskAssessmentMatrix={() = {}}
        justify={'Justify Question'}
        cancelClick={() => {}}
        min={1}
        mid={2}
        max={3}
    />

TableRDM

A wrapper around <RiskDeterminationMatrix> that is used when rendering a table based on data provided by RiskDeterminationMatrix

Props to pass

    <TableRDm
        handelRiskAssessmentMatrix={() = {}}
        justify={'Justify Question'}
        cancelClick={() => {}}
        min={1}
        mid={2}
        max={3}
    />

TableTitle

A title displayed at the top of a table. It is used in conjunction with PreviewTable, RiskAssessmentMatrix and RiskDeterminationMatrix

Props to pass

    <TableTitle
        width={'100px'}
        height={'70px'}
        value={'100'}
        flip={false}
        $total={true}
        $textColor={'#fff'}
    />

TextArea

A component to collect the value in custom textarea

Props to pass

    <TextArea
        text={'Describe Here'}
        value={value}
        id={2}
        onChange={(e) => {setValue(e.target.value)}}
        rows={5}
        cols={3}
    />

ToggleButton

A button that can be toggled between two states (on/off).

Props to pass:

• status => A boolean indicating whether the toggle is currently turned "ON" or "OFF"

    <ToggleButton
        text={'Display'}   
        states={'ON'}
        test={'test-id'}
    />