DAMO-214|Created root README, fixed editUrl bug, minor fixes on img s…

…election

react_widgets/README.md

@@ -0,0 +1,115 @@
+# React Widgets Monorepo
+
+This is a monorepo containing multiple React widgets and a shared library. The project is managed using [npm workspaces](https://docs.npmjs.com/cli/v7/using-npm/workspaces) for easier dependency management and build processes across multiple packages.
+
+## Workspace Structure
+
+- **apps/damo_upload**: A React widget for uploading images to DAMopen.
+- **apps/damo_wfa**: A React widget for managing approval process for images on DAMopen.
+- **apps/shared**: A shared library containing helper functions, types, and reusable components.
+
+## Setup
+
+To set up the workspace and install dependencies, run the following command from the root location:
+
+```bash
+npm install
+```
+
+## Development
+
+Since drupal libraries track built files, to be able to run the application in develoment mode, you should build the application every time
+a change is made. For this, a watcher is configured to build files accordingly. Please run the corresponding `watch` command as you need it:
+
+Ex:
+
+```bash
+npm run build:watch:damo_upload
+```
+
+## Building the projects
+
+To build all the workspaces at once, please run:
+
+```bash
+npm run build-all
+```
+
+## Linting
+
+To run ESLint on all workspaces, please run:
+
+```bash
+npm run lint-all
+```
+
+## Formatting
+
+To check if the code is properly formatted according to `prettier` across all workspaces:
+
+```bash
+npm run format:check-all
+```
+
+To automatically fix formatting issues for all workspaces:
+
+```bash
+npm run format:fix-all
+```
+
+## Vite configuration
+
+Each react application is built using [Vite](https://vitejs.dev/). Each app has its own configuration file.
+
+## Chakra UI
+The project uses Chakra UI as a component library. Chakra UI is installed globally in the workspace and can be imported and used within any widget.
+
+
+## Adding new widgets
+
+1. Create a new folder under `apps/` with the widget's name.
+2. Create the React application using [Vite](https://vitejs.dev/) and modify the `vite.config.ts` as necessary.
+Please bear in mind to use Typescript to help maintain the structure of the project.
+3. Create the new `build-watch` command in the root `package.json` file:
+
+```json
+"scripts": {
+    "build:watch:{your-new-widget-name}": "npm run build-watch --workspace=apps/{your-new-widget-name}",
+},
+```
+
+4. Install dependencies for the new widget if necessary. If they are widget specific you can do it within the new react widget itself. 
+Otherwise you should install it on the root so it's available to share across all widgets.
+
+5. Make sure to modify the `damo_theme.libraries.yml` file to add the paths to the built files for the new widget. 
+
+Ex:
+
+```yml
+{your-new-widget-name}:
+  css:
+    theme:
+      react_widgets/apps/{your-new-widget-name}/dist/assets/index.css: {}
+  js:
+    react_widgets/apps/{your-new-widget-name}/dist/assets/index.js: {}
+```
+
+and attach the library on the corresponding `twig` template
+
+```twig
+{{ attach_library('damo_theme/{your-new-widget-name}') }}
+```
+
+6. Remember to create an entry point for the react application to be embedded within the Drupal site.
+
+Ex:
+
+```tsx
+// main.tsx
+createRoot(document.getElementById('---ID of the widget entry point --- ')!).render(
+  <StrictMode>
+      <App /> 
+  </StrictMode>
+);
+```
+

react_widgets/apps/damo_upload/README.md

@@ -22,7 +22,7 @@ export default {
     project: ['./tsconfig.json', './tsconfig.node.json', './tsconfig.app.json'],
     tsconfigRootDir: __dirname,
   },
-}
+};
 ```
 
 - Replace `plugin:@typescript-eslint/recommended` to `plugin:@typescript-eslint/recommended-type-checked` or `plugin:@typescript-eslint/strict-type-checked`

react_widgets/apps/damo_upload/package.json

@@ -6,8 +6,8 @@
   "scripts": {
     "dev": "vite",
     "build": "tsc -b && vite build",
-    "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
     "format": "prettier --write .",
+    "format-check": "prettier --check .",
     "preview": "vite preview",
     "build-watch": "vite build --watch"
   },

react_widgets/apps/damo_upload/vite.config.ts

@@ -8,7 +8,7 @@ export default defineConfig({
   resolve: {
     alias: {
       '@shared': path.resolve(__dirname, '../shared/src'),
-    }
+    },
   },
   build: {
     rollupOptions: {

react_widgets/apps/damo_wfa/README.md

@@ -22,7 +22,7 @@ export default tseslint.config({
       tsconfigRootDir: import.meta.dirname,
     },
   },
-})
+});
 ```
 
 - Replace `tseslint.configs.recommended` to `tseslint.configs.recommendedTypeChecked` or `tseslint.configs.strictTypeChecked`
@@ -31,7 +31,7 @@ export default tseslint.config({
 
 ```js
 // eslint.config.js
-import react from 'eslint-plugin-react'
+import react from 'eslint-plugin-react';
 
 export default tseslint.config({
   // Set the react version
@@ -46,5 +46,5 @@ export default tseslint.config({
     ...react.configs.recommended.rules,
     ...react.configs['jsx-runtime'].rules,
   },
-})
+});
 ```

react_widgets/apps/damo_wfa/package.json

@@ -6,8 +6,8 @@
   "scripts": {
     "dev": "vite",
     "build": "tsc -b && vite build",
-    "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
     "format": "prettier --write .",
+    "format-check": "prettier --check .",
     "preview": "vite preview",
     "build-watch": "vite build --watch"
   },

react_widgets/apps/damo_wfa/src/components/CardPopover.tsx

@@ -79,7 +79,7 @@ export const CardPopover = ({ open, fileInfo }: CardPopoverProps) => {
                     <Text as="span" textDecor="underline">
                       {cat.name}
                     </Text>
-                    {index < fileInfo.categories?.length! - 1 && ', '}
+                    {index < fileInfo.categories!.length - 1 && ', '}
                   </Fragment>
                 ))}
               </Text>
@@ -107,7 +107,7 @@ export const CardPopover = ({ open, fileInfo }: CardPopoverProps) => {
             fontWeight="normal"
             onClick={(e) => {
               e.stopPropagation();
-              window.location.assign(fileInfo.file.editUrl);
+              window.location.assign(fileInfo.editUrl);
             }}
           >
             Edit asset

react_widgets/apps/damo_wfa/src/hooks/useImgSelection.ts

@@ -72,6 +72,7 @@ export const useImgSelection = () => {
         })
       );
       setSelectedImgs([]);
+      setShowSelectedOnly(false);
 
       setIsUpdating(false);
     },
@@ -90,7 +91,7 @@ export const useImgSelection = () => {
     };
 
     fetchImages();
-  }, []);
+  }, [toast]);
 
   const displayedImages = useMemo(() => {
     return showSelectedOnly ? selectedImgs : images;

react_widgets/apps/damo_wfa/src/services/deleteImgs.ts

@@ -12,7 +12,7 @@ export const deleteImgs = async (files: MediaImage[]) => {
     throw new Error('No CSRF token found');
   }
 
-  let deleteResults = [];
+  const deleteResults = [];
 
   for (const file of files) {
     try {

react_widgets/apps/damo_wfa/src/services/getUnpublishedImgs.ts

@@ -17,6 +17,7 @@ export const getUnpublishedImgs = async () => {
     .addFields(resourceType, [
       'name',
       'status',
+      'drupal_internal__mid',
       'field_category',
       'field_keywords',
       'field_image',

react_widgets/apps/damo_wfa/src/services/updateImgs.ts

@@ -12,7 +12,7 @@ export const updateImgs = async (files: MediaImage[]) => {
     throw new Error('No CSRF token found');
   }
 
-  let updateResults = [];
+  const updateResults = [];
 
   for (const file of files) {
     const updatedMediaEntity = {

react_widgets/apps/shared/src/utils/typeMappers.ts

@@ -30,7 +30,6 @@ export const mapFile = (data: TJsonaModel) => {
     fileSize: data.filesize,
     url: data.image_style_uri?.medium || null,
     alt: data.resourceIdObjMeta?.alt || null,
-    editUrl: `/media/${data.resourceIdObjMeta?.drupal_internal__target_id}/edit?destination=/admin/assets/all-unpublished`,
   };
   return file;
 };
@@ -48,6 +47,7 @@ export const mapMediaImage = (data: TJsonaModel) => {
       ? data.field_keywords.map(mapKeyword)
       : null,
     file: mapFile(data.field_image),
+    editUrl: `/media/${data.drupal_internal__mid}/edit`,
   };
   return mediaImg;
 };

react_widgets/apps/shared/src/utils/types.ts

@@ -46,18 +46,17 @@ export interface MediaFile {
   fileSize: number;
   url: string | null;
   alt: string | null;
-  editUrl: string;
 }
 
 export interface MediaImage {
   id: string;
   type: string;
   status: boolean;
   name: string;
-  //auhtor: not returne from drupal yet
   categories: Category[] | null;
   keywords: Keyword[] | null;
   file: MediaFile;
+  editUrl: string;
 }
 
 export type ModifyImgsAction = 'approve' | 'decline';

react_widgets/package.json

@@ -6,7 +6,10 @@
   "scripts": {
     "build-all": "npm run build --workspaces",
     "build:watch:damo_upload": "npm run build-watch --workspace=apps/damo_upload",
-    "build:watch:damo_wfa": "npm run build-watch --workspace=apps/damo_wfa"
+    "build:watch:damo_wfa": "npm run build-watch --workspace=apps/damo_wfa",
+    "lint-all": "eslint 'apps/**/*.{ts,tsx}' --report-unused-disable-directives --max-warnings 0",
+    "format:check-all": "prettier --check 'apps/**/*.{js,ts,tsx,md,json}'",
+    "format:fix-all": "prettier --write 'apps/**/*.{js,ts,tsx,md,json}'"
   },
   "workspaces": [
     "apps/*"