Merge branch 'main' into update-highlighter

README.md

@@ -1,6 +1,6 @@
-# Vite React Component Library Starter
+# RSE React Library
 
-This is a starter template for creating React component libraries using Vite. It includes a robust set of features to help you develop, test, and build your library efficiently.
+This is a collection of react components that RSE uses in majority of React Web projects.
 
 ## Features
 
@@ -15,6 +15,50 @@ This is a starter template for creating React component libraries using Vite. It
 - Husky: A pre-commit hook.
 - Github Action: A tool that deploys your Storybook to GitHub page automatically.
 
+
+
+## Usage
+
+RSE React Library is available as an [npm package](https://www.npmjs.com/package/@toyota-research-institute/rse-react-library).
+
+```sh
+// with npm
+npm install @toyota-research-institute/rse-react-library
+
+// with yarn
+yarn add @toyota-research-institute/rse-react-library
+```
+
+Material Tailwind's `ThemeProvider` must wrap your application for the components to style correctly.
+```
+import { ThemeProvider } from '@material-tailwind/react';
+
+<ThemeProvider>
+    ...
+</ThemeProvider>
+```
+
+Here is a quick example to get you started:
+
+```jsx
+import { createRoot } from 'react-dom/client';
+import { TRIApp } from '@toyota-research-institute/rse-react-library';
+import '@toyota-research-institute/rse-react-library/style.css';
+import config from './tri.app.config';
+
+function App() {
+    return <TRIApp config={config} />;
+}
+
+createRoot.render(<App />, document.querySelector('#app'));
+```
+
+## How to use
+
+1. Clone this repository
+2. Install dependencies using `npm i` (or `pnpm i` if you like)
+
+
 ## Get Started
 
 1. Clone this repository

lib/feedback/env.d.ts

@@ -0,0 +1,7 @@
+interface Window {
+  showCollectorDialog(): void;
+
+  ATL_JQ_PAGE_PROPS: null | {
+    triggerFunction: (fn: ShowDialogFn) => void;
+  };
+}

lib/layout/FeedbackButton.tsx

@@ -1,20 +1,20 @@
 // FeedbackButton.tsx
 
 import { Button } from '@material-tailwind/react';
-import { useFeedback } from '../feedback/use-feedback';
+// import { useFeedback } from '../feedback/use-feedback';
 
 const FeedbackButton = () => {
-  const { showDialog } = useFeedback();
+  // const { showDialog } = useFeedback();
 
   return (
-    showDialog && (
+    window.showCollectorDialog && (
       <div className="absolute right-0 top-[50%] origin-top-right rotate-90">
         <Button
           variant="filled"
           size="lg"
           placeholder="Feedback"
           className="rounded-b-sm rounded-t-none px-4 py-3 !font-medium text-base normal-case"
-          onClick={showDialog}
+          onClick={window.showCollectorDialog}
         >
           Feedback
         </Button>

lib/tri-app.tsx

@@ -1,6 +1,6 @@
 import {} from 'aws-amplify';
 import { type ReactElement, createContext, useContext } from 'react';
-import FeedbackProvider from './feedback/FeedbackProvider';
+// import FeedbackProvider from './feedback/FeedbackProvider';
 import CognitoProvider from './amplify/cognito-provider';
 import AppLayout from './layout/AppLayout';
 
@@ -33,11 +33,9 @@ interface TRIAppProps {
 const TRIApp = ({ config, PreloginPage }: TRIAppProps) => {
   return (
     <TRIAppContext.Provider value={{ ...config, PreloginPage }}>
-      <FeedbackProvider>
-        <CognitoProvider>
-          <AppLayout />
-        </CognitoProvider>
-      </FeedbackProvider>
+      <CognitoProvider>
+        <AppLayout />
+      </CognitoProvider>
     </TRIAppContext.Provider>
   );
 };