Create shared pnpm package

.eslintignore

@@ -1,3 +1,4 @@
 node_modules
 build
-tests
+tests
+dist

.eslintrc.js

@@ -49,5 +49,20 @@ module.exports = {
     react: {
       version: 'detect',
     },
+    'import/parsers': {
+      '@typescript-eslint/parser': ['.ts', '.tsx'],
+    },
+    'import/resolver': {
+      typescript: {
+        alwaysTryTypes: true,
+        project: [
+          './tsconfig.base.json',
+          './server/tsconfig.json',
+          './frontend/tsconfig.json',
+          './shared/tsconfig.json',
+        ],
+      },
+      node: true,
+    },
   },
 };

.github/workflows/ci-build.yml

@@ -15,6 +15,6 @@ jobs:
       - name: Install Dependencies
         run: pnpm install --frozen-lockfile
       - name: Build Frontend
-        run: CI='' pnpm run --filter frontend build
+        run: CI='' pnpm run --filter frontend... build
       - name: Build Server
-        run: CI='' pnpm run --filter server build
+        run: CI='' pnpm run --filter server... build

.github/workflows/ci-check.yml

@@ -16,6 +16,8 @@ jobs:
           pnpm install --frozen-lockfile
           echo "Prettier version:"
           pnpm prettier --version
+      - name: Build Shared Package
+        run: pnpm --filter shared... build
       - name: Debug Prettier
         run: |
           echo "Files to be checked:"

.prettierignore

@@ -1,3 +1,4 @@
 build/
 public/**.html
 public/**.json
+dist/

Dockerfile

@@ -29,8 +29,7 @@
 
 FROM build-base AS build-frontend
 COPY . .
-# TODO: filter only frontend dependencies. until we add a shared package, we need all dependencies
-RUN pnpm install -r --offline
+RUN pnpm install -r --offline --filter frontend...
 
 # Read build-time environment variables
 ARG REACT_APP_SERVER_URL
@@ -39,10 +38,10 @@
 ENV REACT_APP_CLIENT_ID=${REACT_APP_CLIENT_ID}
 ARG REACT_APP_PUBLIC_VAPID_KEY
 ENV REACT_APP_PUBLIC_VAPID_KEY=${REACT_APP_PUBLIC_VAPID_KEY}
 ARG REACT_APP_ENCRYPTION_KEY
 ENV REACT_APP_ENCRYPTION_KEY=${REACT_APP_ENCRYPTION_KEY}
 ARG REACT_APP_GOOGLE_MAPS_API_KEY
 ENV REACT_APP_GOOGLE_MAPS_API_KEY=${REACT_APP_GOOGLE_MAPS_API_KEY}
 ARG REACT_APP_GOOGLE_MAPS_MAP_ID
 ENV REACT_APP_GOOGLE_MAPS_MAP_ID=${REACT_APP_GOOGLE_MAPS_MAP_ID}
 
@@ -58,6 +57,8 @@
 
 COPY --from=build-server /app/server/build /app/server/build
 COPY --from=build-server /app/server/package.json /app/server/package.json
+COPY --from=build-server /app/shared/build /app/shared/build
+COPY --from=build-server /app/shared/package.json /app/shared/package.json
 
 # Set production environment after build
 ENV NODE_ENV=production

frontend/package.json

@@ -3,12 +3,13 @@
   "version": "1.0.0",
   "description": "",
   "main": "index.js",
-  "dependencies": {},
+  "dependencies": {
+    "@carriage-web/shared": "workspace:*"
+  },
   "scripts": {
     "dev": "react-scripts start",
     "start": "react-scripts start",
     "build": "react-scripts build",
-    "lint": "eslint . --ext .js,.jsx,.ts,.tsx --fix",
     "type-check": "tsc --project tsconfig.json --pretty --noEmit",
     "test": "react-scripts test",
     "eject": "react-scripts eject"
@@ -32,18 +33,6 @@
     ]
   },
   "devDependencies": {
-    "@types/uuid": "^10.0.0",
-    "@typescript-eslint/eslint-plugin": "^5.62.0",
-    "@typescript-eslint/parser": "^5.62.0",
-    "autoprefixer": "^10.4.21",
-    "eslint": "^8.56.0",
-    "eslint-config-prettier": "^8.10.0",
-    "eslint-config-react-app": "^7.0.1",
-    "eslint-plugin-react": "^7.33.2",
-    "eslint-plugin-react-hooks": "^4.6.0",
-    "postcss": "^8.5.6",
-    "prettier": "2.8.8",
-    "tailwindcss": "^3.4.17",
     "@emotion/react": "^11.13.5",
     "@emotion/styled": "^11.13.5",
     "@googlemaps/markerclusterer": "^2.5.3",
@@ -63,17 +52,28 @@
     "@types/react-dom": "^18.3.0",
     "@types/react-router-dom": "^5.3.3",
     "@types/react-router-hash-link": "^2.4.9",
+    "@types/uuid": "^10.0.0",
+    "@typescript-eslint/eslint-plugin": "^5.62.0",
+    "@typescript-eslint/parser": "^5.62.0",
     "@vis.gl/react-google-maps": "^1.4.0",
     "addresser": "^1.1.20",
+    "autoprefixer": "^10.4.21",
     "axios": "^1.12.0",
     "classnames": "^2.5.1",
     "crypto-js": "^4.2.0",
     "date-fns": "^2.30.0",
     "dayjs": "^1.11.19",
     "env-cmd": "^10.1.0",
+    "eslint": "^8.56.0",
+    "eslint-config-prettier": "^8.10.0",
+    "eslint-config-react-app": "^7.0.1",
+    "eslint-plugin-react": "^7.33.2",
+    "eslint-plugin-react-hooks": "^4.6.0",
     "focus-trap-react": "^10.2.3",
     "jwt-decode": "^4.0.0",
     "moment": "^2.30.1",
+    "postcss": "^8.5.6",
+    "prettier": "2.8.8",
     "react": "^18.3.1",
     "react-big-calendar": "^1.14.1",
     "react-csv": "^2.2.2",
@@ -85,7 +85,8 @@
     "react-scripts": "^5.0.1",
     "react-select": "^5.8.1",
     "reactjs-popup": "^2.0.6",
-    "uuid": "^13.0.0",
-    "typescript": "catalog:"
+    "tailwindcss": "^3.4.17",
+    "typescript": "catalog:",
+    "uuid": "^13.0.0"
   }
 }

frontend/src/components/AddRideButton/AddRideButton.tsx

@@ -1,7 +1,7 @@
 import React, { useState } from 'react';
 import RideDetailsComponent from '../RideDetails/RideDetailsComponent';
 import { createEmptyRide } from '../../util/modelFixtures';
-import { RideType } from '../../types';
+import { RideType } from '@carriage-web/shared/types/ride';
 import { useRides } from '../../context/RidesContext';
 import buttonStyles from '../../styles/button.module.css';
 

frontend/src/components/AuthManager/AuthManager.tsx

@@ -17,12 +17,10 @@ import Toast from '../ConfirmationToast/ConfirmationToast';
 
 import AdminRoutes from '../../pages/Admin/Routes';
 import RiderRoutes from '../../pages/Rider/Routes';
-import {
-  Admin,
-  Rider,
-  UnregisteredUser,
-  DriverType as Driver,
-} from '../../types/index';
+import { UnregisteredUserType } from '@carriage-web/shared/types';
+import { RiderType } from '@carriage-web/shared/types/rider';
+import { AdminType } from '@carriage-web/shared/types/admin';
+import { DriverType } from '@carriage-web/shared/types/driver';
 import DriverRoutes from '../../pages/Driver/Routes';
 import { ToastStatus, useToast } from '../../context/toastContext';
 import { createPortal } from 'react-dom';
@@ -49,14 +47,14 @@ export const decrypt = (hash: string | CryptoJS.lib.CipherParams) => {
 const AuthManager = () => {
   const [signedIn, setSignedIn] = useState(getCookie('jwt'));
   const [id, setId] = useState(localStorage.getItem('userId') || '');
-  const [user, setUser] = useState<Rider | Admin | Driver>(
+  const [user, setUser] = useState<RiderType | AdminType | DriverType>(
     JSON.parse(localStorage.getItem('user') || '{}')
   );
   const [refreshUser, setRefreshUser] = useState(() =>
     createRefresh(id, localStorage.getItem('userType') || '', jwtValue())
   );
   const [unregisteredUser, setUnregisteredUser] =
-    useState<UnregisteredUser | null>(null);
+    useState<UnregisteredUserType | null>(null);
   const [ssoError, setSsoError] = useState<string>('');
 
   const navigate = useNavigate();

frontend/src/components/ContactInfoModal/ContactInfoModal.tsx

@@ -15,12 +15,12 @@ import {
 import CloseIcon from '@mui/icons-material/Close';
 import PhoneIcon from '@mui/icons-material/Phone';
 import EmailIcon from '@mui/icons-material/Email';
-import { Rider } from '../../types';
+import { RiderType } from '@carriage-web/shared/types/rider';
 
 interface ContactInfoModalProps {
   open: boolean;
   onClose: () => void;
-  rider: Rider | undefined;
+  rider: RiderType | undefined;
 }
 
 const ContactInfoModal: React.FC<ContactInfoModalProps> = ({

frontend/src/components/EmployeeCards/EmployeeCards.tsx

@@ -2,7 +2,8 @@ import { useNavigate } from 'react-router-dom';
 import Card, { CardInfo } from '../Card/Card';
 import styles from './employeecards.module.css';
 import { phone, wheel, user } from '../../icons/userInfo/index';
-import { Admin, Driver } from '../../types';
+import { AdminType } from '@carriage-web/shared/types/admin';
+import { DriverType } from '@carriage-web/shared/types/driver';
 
 const formatPhone = (phoneNumber: string | undefined) => {
   if (phoneNumber !== undefined) {
@@ -16,13 +17,13 @@ const formatPhone = (phoneNumber: string | undefined) => {
   }
 };
 
-type Employee = Admin | Driver;
+type Employee = AdminType | DriverType;
 
-function isAdmin(employee: Employee): employee is Admin {
+function isAdmin(employee: Employee): employee is AdminType {
   return 'isDriver' in employee;
 }
 
-function isDriver(employee: Employee): employee is Driver {
+function isDriver(employee: Employee): employee is DriverType {
   return 'availability' in employee && !('isDriver' in employee);
 }
 

frontend/src/components/ExportPreview/ExportPreview.tsx

@@ -1,7 +1,6 @@
 import React, { useState, useRef } from 'react';
 import { CSVLink } from 'react-csv';
 import ScheduledTable from '../UserTables/ScheduledTable';
-import { Driver } from '../../types/index';
 import styles from './exportPreview.module.css';
 import { useEmployees } from '../../context/EmployeesContext';
 import ExportButton from '../ExportButton/ExportButton';

frontend/src/components/LocationModal/LocationModal.tsx

@@ -2,16 +2,17 @@ import { parseAddress } from 'addresser';
 import { ToastStatus, useToast } from '../../context/toastContext';
 import React, { useState } from 'react';
 import { useForm, SubmitHandler } from 'react-hook-form';
-import { Location, ObjectType, Tag } from '../../types/index';
+import { ObjectType, Tag } from '../../types/index';
+import { LocationType } from '@carriage-web/shared/types/location';
 import { Button, Input, Label } from '../FormElements/FormElements';
 import Modal from '../Modal/Modal';
 import styles from './locationmodal.module.css';
 import axios from '../../util/axios';
 
 type LocationModalProps = {
-  existingLocation?: Location;
-  onAddLocation?: (newLocation: Location) => void;
-  onEditLocation?: (editedLocation: Location) => void;
+  existingLocation?: LocationType;
+  onAddLocation?: (newLocation: LocationType) => void;
+  onEditLocation?: (editedLocation: LocationType) => void;
 };
 
 type FormData = {

frontend/src/components/Locations/LocationDialog.tsx

@@ -12,20 +12,20 @@ import {
 import CloseIcon from '@mui/icons-material/Close';
 import EditIcon from '@mui/icons-material/Edit';
 import { LocationFormModal } from './LocationFormModal';
-import { Location } from 'types';
+import { LocationType } from '@carriage-web/shared/types/location';
 import PaginatedImageCarousel from './ImageCarousel';
 import { LocationImage } from './LocationImagesUpload';
 
 interface Props {
-  location: (Location & { imagesList?: LocationImage[] }) | null;
+  location: (LocationType & { imagesList?: LocationImage[] }) | null;
   onClose: () => void;
-  onSave: (loc: Location & { imagesList?: LocationImage[] }) => void;
+  onSave: (loc: LocationType & { imagesList?: LocationImage[] }) => void;
 }
 
 const LocationDialog: React.FC<Props> = ({ location, onClose, onSave }) => {
   const [edit, setEdit] = useState(false);
   const [current, setCurrent] = useState<
-    (Location & { imagesList?: LocationImage[] }) | null
+    (LocationType & { imagesList?: LocationImage[] }) | null
   >(null);
   const [images, setImages] = useState<LocationImage[]>([]);
 
@@ -51,7 +51,9 @@ const LocationDialog: React.FC<Props> = ({ location, onClose, onSave }) => {
 
   if (!location || !current) return null;
 
-  const handleEditSave = (upd: Location & { imagesList?: LocationImage[] }) => {
+  const handleEditSave = (
+    upd: LocationType & { imagesList?: LocationImage[] }
+  ) => {
     onSave(upd);
     setCurrent(upd);
 

frontend/src/components/Locations/LocationFormModal.tsx

@@ -20,7 +20,8 @@ import { APIProvider } from '@vis.gl/react-google-maps';
 import LocationPickerMap from './LocationMapPicker';
 import PlacesSearch from './PlacesSearch';
 import GeocoderService from './GeocoderService';
-import { Location, Tag } from 'types';
+import { Tag } from 'types';
+import { LocationType } from '@carriage-web/shared/types/location';
 import styles from './locations.module.css';
 import LocationImagesUpload, { LocationImage } from './LocationImagesUpload';
 
@@ -38,8 +39,8 @@ const CAMPUS_OPTIONS = [
 interface Props {
   open: boolean;
   onClose: () => void;
-  onSubmit: (loc: Location & { imagesList?: LocationImage[] }) => void;
-  initialData?: Location & { imagesList?: LocationImage[] };
+  onSubmit: (loc: LocationType & { imagesList?: LocationImage[] }) => void;
+  initialData?: LocationType & { imagesList?: LocationImage[] };
   mode: 'add' | 'edit';
 }
 
@@ -50,7 +51,7 @@ export const LocationFormModal: React.FC<Props> = ({
   initialData,
   mode,
 }) => {
-  const EMPTY: Location = {
+  const EMPTY: LocationType = {
     id: '',
     name: '',
     shortName: '',
@@ -62,7 +63,7 @@ export const LocationFormModal: React.FC<Props> = ({
     photoLink: '',
   };
 
-  const [form, setForm] = useState<Location>(EMPTY);
+  const [form, setForm] = useState<LocationType>(EMPTY);
   const [mapKey, setMapKey] = useState(0);
   const [loadingAddr, setLoadingAddr] = useState(false);
   const [error, setError] = useState<string | null>(null);
@@ -85,7 +86,7 @@ export const LocationFormModal: React.FC<Props> = ({
     }
   }, [open, initialData, mode]);
 
-  const update = (patch: Partial<Location>) =>
+  const update = (patch: Partial<LocationType>) =>
     setForm((prev) => ({ ...prev, ...patch }));
 
   const selectPoint = (lat: number, lng: number) => update({ lat, lng });

frontend/src/components/Locations/LocationMap.tsx

@@ -11,13 +11,13 @@ import { MarkerClusterer } from '@googlemaps/markerclusterer';
 import type { Marker } from '@googlemaps/markerclusterer';
 import { OpenInFull } from '@mui/icons-material';
 import styles from './locations.module.css';
-import { Location } from 'types';
+import { LocationType } from '@carriage-web/shared/types/location';
 
 interface LocationMapProps {
-  locations: Location[];
-  selectedLocation: Location | null;
-  onLocationSelect: (location: Location | null) => void;
-  onViewDetails: (location: Location) => void;
+  locations: LocationType[];
+  selectedLocation: LocationType | null;
+  onLocationSelect: (location: LocationType | null) => void;
+  onViewDetails: (location: LocationType) => void;
 }
 
 /* -------------------------------------------------------------------------- */