AIME Feedback package

Before you start

Please ensure you have the following dependencies installed

"@apollo/client": "^3.7.0",
"@auth0/auth0-react": "^1.12.0",
"@chakra-ui/icons": "^2.0.11",
"@chakra-ui/react": "^2.3.6",
"@chakra-ui/system": "^2.3.0",
"@emotion/react": "^11.10.4",
"@emotion/styled": "^11.10.4",
"@fullcalendar/daygrid": "^5.11.3",
"@fullcalendar/react": "^5.11.2",
"change-case": "^4.1.2",
"firebase": "^9.12.1",
"framer-motion": "^7.6.1",
"graphql": "^16.6.0",
"html2canvas": "^1.4.1",
"konva": "^8.3.13",
"lodash": "^4.17.21",
"react": "^18.1.0",
"react-date-picker": "^9.0.0",
"react-datepicker": "^4.8.0",
"react-dom": "^18.1.0",
"react-konva": "^18.2.3",
"react-scripts": "5.0.1",
"graphql-ws": "^5.9.1",
"use-image": "^1.1.0"

Simply:

npm i @apollo/client @auth0/auth0-react @chakra-ui/icons @chakra-ui/react @chakra-ui/system @emotion/react @emotion/styled @fullcalendar/daygrid @fullcalendar/react @tabler/icons-react change-case firebase framer-motion graphql html2canvas konva lodash react react-date-picker react-datepicker react-dom react-konva react-scripts graphql-ws use-image 

IMPORTANT NOTES

1. This is a private npm package, ensure you have the correct token defined in .npmrc file.

   //registry.npmjs.org/:_authToken=<auth_token> 

2. The feedback tool requires "react": "^18.1.0" and "react-dom": "^18.1.0". Please upgrade to these versions of both react and react-dom if you are on a higher version because the screenshot capture module won’t work. I am working on fixing this bug ;-)

These are the ways to integrate the feedback module into your project

Install

npm i @theaimegroup/feedback

Importing the feedback container

The feedback container wraps around you react root component in order to provide the screenshot capability via the in-built floating action button. Import the feedback container as follows:

import { FeedbackContainer } from '@theaimegroup/feedback';

Wrap your <App /> component inside the FeedbackContainer component as follows:

<FeedbackContainer
    width='100vw'
    height='100vh'
    aimeProject={aimeProject}>
    <Home>
        <Header/>
        <Content/>
        <Footer/>
    </Home>
</FeedbackContainer>

Prop Types

| Name | Type | Required | |:------------|:---------------------|:---------| | width | string | no | | height | string | no | | aimeProject | object or undefined | no |

Adding the feedback dashboard route

import {FeedbackApolloWrapper, FeedbackAuthWrapper, FeedbackDashboard} from '@theaimegroup/feedback';

<Route
  path="/feedback"
  element={
    <FeedbackAuthWrapper>
      <FeedbackApolloWrapper>
        <FeedbackDashboard aimeProject={activeProject} />
      </FeedbackApolloWrapper>
    </FeedbackAuthWrapper>
   }
/>

NOTE: You don't need to explicitly pass a project to the props if you don't have one pre-defined. This will be taken care of automatically. The fallback project is:

{
  "project_id": 244,
  "project_name": "AIME Platform Feedback",
  "project_manager": "alan.harrison25",
  "project_description": "Feedback for the AIME Beta",
  "owner": "alan.harrison25",
  "org_id": "org_CwuyfmDIE6Dum74c",
  "created_at": "2022-08-05T09:52:47.433913+00:00",
  "project_status": "think",
  "updated_at": "2022-08-05T09:52:47.433913+00:00"
}