feat: add playground app for testing

1. added a new folder playground inside apps
2. switched default node version to 18 in nvmrc for vercel support
3. added mono-repo supported setting in vscode project workspace file

.nvmrc

@@ -1 +1 @@
-v19.9.0
+v18.18.0

.vscode/project.code-workspace

@@ -0,0 +1,38 @@
+{
+  "folders": [
+    {
+      "name": "Root",
+      "path": "../"
+    },
+    {
+      "name": "Molecules",
+      "path": "../packages/molecules"
+    },
+    {
+      "name": "Becknified-components",
+      "path": "../packages/becknified-components"
+    },
+		{
+      "name": "Dhp",
+      "path": "../apps/dhp"
+    },
+    {
+      "name": "Osm",
+      "path": "../apps/osm"
+    },
+		{
+      "name": "Dsep",
+      "path": "../apps/dsep"
+    },
+    {
+      "name": "Playground",
+      "path": "../apps/playground"
+    },
+  ],
+	"settings": {
+    "files.exclude": {
+      "node_modules/": true,
+      "packages/": true
+    },
+		}
+}

.vscode/settings.json

@@ -1,4 +1,4 @@
 {
   "editor.formatOnSave": true,
-  "typescript.tsdk": "node_modules/typescript/lib"
+  "typescript.tsdk": "node_modules/typescript/lib",
 }

apps/playground/.prettierignore

@@ -0,0 +1,4 @@
+/node_modules/
+/coverage/
+/.next/
+/public/

apps/playground/Jenkinsfile

@@ -0,0 +1,29 @@
+pipeline {
+  agent any
+  stages {
+    stage('Executing Shell Script On Server') {
+      steps {
+        script {
+          sshagent(credentials: ['"${credentials}"']) {
+            sh '''
+              ssh -t -t ${userName}@${hostIP} -o StrictHostKeyChecking=no << EOF
+              ${listOfCommands}
+              logout
+              EOF
+              '''
+          }
+        }
+      }
+    }
+  }
+  post {
+    always {
+        cleanWs(cleanWhenNotBuilt: false,
+            deleteDirs: true,
+            disableDeferredWipeout: true,
+            notFailBuild: true,
+            patterns: [[pattern: '.gitignore', type: 'INCLUDE'],
+            [pattern: '.propsfile', type: 'EXCLUDE']])
+        }
+    }
+}

apps/playground/components/Benefits/index.tsx

@@ -0,0 +1,22 @@
+import React from 'react'
+import { Image } from '@chakra-ui/react'
+import { useLanguage } from '../../hooks/useLanguage'
+import { benefitContent } from '../../mock/benefits'
+
+const Benefits = () => {
+  const { t } = useLanguage()
+  return (
+    <div className="grid gap-4 grid-cols-12 my-8 pt-4 xl:max-w-[2100px] mx-auto">
+      {benefitContent.map(benefitItem => {
+        return (
+          <div className="col-span-6 lg:col-span-3 flex flex-col items-center " key={benefitItem.title}>
+            <Image height={48} width={48} src={benefitItem.imgSrc} alt={benefitItem.title} className="" />
+            <p className="py-2 text-sm md:text-base text-palette-base/90 text-center">{t[`${benefitItem.title}`]}</p>
+          </div>
+        )
+      })}
+    </div>
+  )
+}
+
+export default Benefits

apps/playground/components/BottomModal/BottomModal.tsx

@@ -0,0 +1,39 @@
+import { useState } from 'react'
+import { Transition } from '@headlessui/react'
+import { AiOutlineClose } from 'react-icons/ai'
+import { useLanguage } from '../../hooks/useLanguage'
+import { Image } from '@chakra-ui/react'
+
+interface ModalProps {
+  isOpen: boolean
+  onClose: () => void
+  children: React.ReactNode
+  partialClose?: boolean
+}
+
+const Modal: React.FC<ModalProps> = ({ isOpen, onClose, children, partialClose }) => {
+  const { t } = useLanguage()
+  return (
+    <Transition show={isOpen} onClick={() => onClose()}>
+      <div className="fixed z-[9999] inset-0 flex items-end justify-center  sm:p-0">
+        <Transition.Child
+          unmount={false}
+          enter="transition-transform duration-300"
+          enterFrom="translate-y-full"
+          enterTo="translate-y-0"
+          leave="transition-transform duration-300"
+          leaveFrom="translate-y-0"
+          leaveTo="translate-y-full"
+          style={{ width: '100vw' }}
+        >
+          <div className="w-full   px-4 pb-4 pt-2 mx-auto bg-[#F3F4F5]  rounded-t-[1rem] shadow-lg sm:rounded-lg sm:overflow-hidden">
+            <Image src="/images/Indicator.svg" className="mx-auto mb-3" alt="indicator" />
+            {children}
+          </div>
+        </Transition.Child>
+      </div>
+    </Transition>
+  )
+}
+
+export default Modal

apps/playground/components/BottomModal/index.tsx

@@ -0,0 +1,3 @@
+import BottomModal from './BottomModal'
+
+export default BottomModal

apps/playground/components/LegacyLink/LegacyLink.tsx

@@ -0,0 +1,17 @@
+import React, { ReactNode } from 'react'
+import Link from 'next/link'
+
+interface LegacyLinkProps {
+  children: ReactNode
+  href: string
+}
+
+const LegacyLink: React.FC<LegacyLinkProps> = ({ children, href }) => {
+  return (
+    <Link legacyBehavior href={href}>
+      {children}
+    </Link>
+  )
+}
+
+export default LegacyLink

apps/playground/components/LegacyLink/index.tsx

@@ -0,0 +1,3 @@
+import LegacyLink from './LegacyLink'
+
+export default LegacyLink

apps/playground/components/Map/Map.tsx

@@ -0,0 +1,142 @@
+import { MapContainer, TileLayer, Marker, Popup, useMap, ZoomControl } from 'react-leaflet'
+import { Image } from '@chakra-ui/react'
+import React, { useEffect, useState } from 'react'
+import Control from 'react-leaflet-custom-control'
+import 'leaflet/dist/leaflet.css'
+import { GiHamburgerMenu } from 'react-icons/gi'
+import { data } from './StoreMarkerData'
+import Icon from './store-marker.svg'
+import SelectedIcon from './SelectedMarker.svg'
+import CenterMarker from './CenterMarker.svg'
+import L from 'leaflet'
+import { isEmpty } from 'lodash'
+
+interface MapProps {
+  coords: { lat: number; long: number }
+  handleModalOpen: () => void
+  handleOptionDetailOpen: () => void
+  setSelectedStore: React.Dispatch<React.SetStateAction<any>>
+  selectedStore: any
+  // Using any for now since exact structure is not clear
+  stores: any[]
+}
+
+const Map: React.FC<MapProps> = ({
+  stores,
+  selectedStore,
+  coords,
+  handleModalOpen,
+  handleOptionDetailOpen,
+  setSelectedStore
+}) => {
+  const { lat, long } = coords
+  const [userLocation, setUserLocation] = useState<[number, number] | null>(null)
+  const [flyToUserLocation, setFlyToUserLocation] = useState(false)
+
+  useEffect(() => {
+    // Get the user's current location using the browser's geolocation API
+    navigator.geolocation.getCurrentPosition(
+      position => {
+        setUserLocation([position.coords.latitude, position.coords.longitude])
+      },
+      error => {
+        console.error('Error getting user location:', error)
+      }
+    )
+  }, [])
+
+  // Custom hook to zoom the map to the user's location
+  const ZoomToUserLocation = () => {
+    let map = useMap()
+
+    if (userLocation && flyToUserLocation) {
+      map.flyTo(userLocation, 12)
+    }
+
+    return null
+  }
+
+  const customIcon = new L.Icon({
+    iconUrl: Icon,
+    iconSize: [25, 35],
+    iconAnchor: [5, 30]
+  })
+
+  const customCenterMarker = new L.Icon({
+    iconUrl: CenterMarker,
+    iconSize: [40, 50],
+    iconAnchor: [5, 30]
+  })
+
+  const customSelectedIcon = new L.Icon({
+    iconUrl: Icon,
+    iconSize: [35, 45],
+    iconAnchor: [5, 30]
+  })
+
+  function MapView() {
+    let map = useMap()
+    map.setView([lat, long], map.getZoom())
+    return null
+  }
+
+  return (
+    <MapContainer
+      style={{ maxHeight: '100vh', height: '90vh' }}
+      center={[lat, long]}
+      zoom={16}
+      zoomControl={false}
+      scrollWheelZoom={true}
+      zoomAnimation={true}
+    >
+      <TileLayer
+        attribution='&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> 
+        contributors'
+        url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
+      />
+      <Control prepend position="topright">
+        <div className="flex flex-col basis-4">
+          <Image
+            className="translate-x-0.5"
+            onClick={() => setFlyToUserLocation(true)}
+            src="/images/LocateMe.svg"
+            alt="..."
+          />
+        </div>
+      </Control>
+
+      {!isEmpty(stores) &&
+        stores.map((item: any, index: number) => {
+          const isSelected = item.lat === selectedStore?.lat && item.lon === selectedStore?.lon
+          const IconToUse = isSelected ? customSelectedIcon : customIcon
+          return (
+            <Marker
+              icon={IconToUse}
+              key={item.lon}
+              position={[item.lat, item.lon]}
+              eventHandlers={{
+                click: () => {
+                  setSelectedStore(item)
+                  handleOptionDetailOpen()
+                }
+              }}
+            ></Marker>
+          )
+        })}
+      <Marker icon={customCenterMarker} position={[lat, long]}></Marker>
+      <ZoomControl position="topright" />
+
+      <MapView />
+      <ZoomToUserLocation />
+    </MapContainer>
+  )
+}
+
+// React memo not working for some reason
+//TODO Needed because the map is re-rendered even if the co-ords are same causing a flickering issue on the map. Will fix this later
+export default React.memo(Map, (prevProps, nextProps) => {
+  if (prevProps.coords.lat === nextProps.coords.lat && prevProps.coords.long === nextProps.coords.long) {
+    return true
+  }
+  return false
+})