fix(mrt-map-builder): update codebase to adapt to new UI SDK

tools/mrt-map-builder/package.json

@@ -33,4 +33,4 @@
     "globals": "^16.3.0",
     "vite": "^7.0.4"
   }
-}
+}

tools/mrt-map-builder/src/components/LineItem.tsx

@@ -125,8 +125,8 @@ function LineItem({
                   className="w-full"
                   icon="tabler:square-letter-x"
                   label="X Coordinate"
-                  placeholder="X Coordinate"
-                  setValue={value => {
+                  value={point[0]}
+                  onChange={value => {
                     setMrtLines(prevLines =>
                       prevLines.map((l, i) => {
                         if (i !== index) return l
@@ -139,14 +139,13 @@ function LineItem({
                       })
                     )
                   }}
-                  value={point[0]}
                 />
                 <NumberInput
                   className="w-full"
                   icon="tabler:square-letter-y"
                   label="Y Coordinate"
-                  placeholder="Y Coordinate"
-                  setValue={value => {
+                  value={point[1]}
+                  onChange={value => {
                     setMrtLines(prevLines =>
                       prevLines.map((l, i) => {
                         if (i !== index) return l
@@ -159,7 +158,6 @@ function LineItem({
                       })
                     )
                   }}
-                  value={point[1]}
                 />
               </li>
             ))

tools/mrt-map-builder/src/components/StationItem.tsx

@@ -143,7 +143,7 @@ function StationItem({
                 />
               </div>
             )}
-            setValue={codes => {
+            onChange={codes => {
               setMrtStations(prevStations =>
                 prevStations.map(s => {
                   if (s.id === station.id) {
@@ -175,7 +175,7 @@ function StationItem({
             className="w-full"
             icon="tabler:category"
             label="Station Type"
-            setValue={value => {
+            onChange={value => {
               setMrtStations(prevStations =>
                 prevStations.map(s => {
                   if (s.id === station.id) {
@@ -235,7 +235,7 @@ function StationItem({
             }
             icon="tabler:route"
             label="Lines"
-            setValue={value => {
+            onChange={value => {
               setMrtStations(prevStations =>
                 prevStations.map(s => {
                   if (s.id === station.id) {
@@ -263,7 +263,7 @@ function StationItem({
             icon="tabler:map-pin"
             label="Station Name"
             placeholder="Station Name"
-            setValue={value => {
+            onChange={value => {
               setMrtStations(prevStations =>
                 prevStations.map(s => {
                   if (s.id === station.id) {
@@ -280,7 +280,7 @@ function StationItem({
             className="flex-1"
             icon="tabler:square-letter-x"
             label="X Coordinate"
-            setValue={value => {
+            onChange={value => {
               setMrtStations(prevStations =>
                 prevStations.map(s => {
                   if (s.id === station.id) {
@@ -297,7 +297,7 @@ function StationItem({
             className="flex-1"
             icon="tabler:square-letter-y"
             label="Y Coordinate"
-            setValue={value => {
+            onChange={value => {
               setMrtStations(prevStations =>
                 prevStations.map(s => {
                   if (s.id === station.id) {
@@ -316,7 +316,7 @@ function StationItem({
                 className="flex-1"
                 icon="tabler:arrows-horizontal"
                 label="Width"
-                setValue={value => {
+                onChange={value => {
                   setMrtStations(prevStations =>
                     prevStations.map(s => {
                       if (s.id === station.id) {
@@ -333,7 +333,7 @@ function StationItem({
                 className="flex-1"
                 icon="tabler:arrows-vertical"
                 label="Height"
-                setValue={value => {
+                onChange={value => {
                   setMrtStations(prevStations =>
                     prevStations.map(s => {
                       if (s.id === station.id) {
@@ -350,7 +350,7 @@ function StationItem({
                 className="flex-1"
                 icon="tabler:rotate-2"
                 label="Rotation"
-                setValue={value => {
+                onChange={value => {
                   setMrtStations(prevStations =>
                     prevStations.map(s => {
                       if (s.id === station.id) {
@@ -371,7 +371,7 @@ function StationItem({
             label="Text Offset X"
             max={100}
             min={-100}
-            setValue={value => {
+            onChange={value => {
               setMrtStations(prevStations =>
                 prevStations.map(s => {
                   if (s.id === station.id) {
@@ -390,7 +390,7 @@ function StationItem({
             label="Text Offset Y"
             max={100}
             min={-100}
-            setValue={value => {
+            onChange={value => {
               setMrtStations(prevStations =>
                 prevStations.map(s => {
                   if (s.id === station.id) {

tools/mrt-map-builder/src/components/sidebar/LineSection.tsx

@@ -59,10 +59,11 @@ function LineSection({
       ) : (
         <EmptyStateScreen
           smaller
-          description="Click the button above to add a new MRT line."
           icon="tabler:route-off"
-          name={false}
-          title="No MRT Lines"
+          message={{
+            title: 'No MRT Lines',
+            description: 'Click the button above to add a new MRT line.'
+          }}
         />
       )}
     </>

tools/mrt-map-builder/src/components/sidebar/SettingsSection.tsx

@@ -43,12 +43,12 @@ function SettingsSection({
         <ColorInput
           className="w-full"
           label="Color of Selected Line"
-          setValue={color => {
+          value={settings.colorOfCurrentLine}
+          onChange={color => {
             setSettings({
               colorOfCurrentLine: color
             })
           }}
-          value={settings.colorOfCurrentLine}
         />
         <FileInput
           enableUrl
@@ -71,14 +71,14 @@ function SettingsSection({
           label="Background Image Scale"
           max={200}
           min={10}
-          setValue={value => {
+          step={10}
+          value={settings.bgImageScale}
+          wrapperClassName="mb-8"
+          onChange={value => {
             setSettings({
               bgImageScale: value
             })
           }}
-          step={10}
-          value={settings.bgImageScale}
-          wrapperClassName="mb-8"
         />
         <div className="flex items-center justify-between">
           <div className="text-bg-500 flex items-center gap-2">
@@ -86,7 +86,7 @@ function SettingsSection({
             <span className="text-lg">Show background image</span>
           </div>
           <Switch
-            checked={settings.showImage}
+            value={settings.showImage}
             onChange={() => {
               setSettings({
                 showImage: !settings.showImage
@@ -100,7 +100,7 @@ function SettingsSection({
             <span className="text-lg">Dark mode</span>
           </div>
           <Switch
-            checked={settings.darkMode}
+            value={settings.darkMode}
             onChange={() => {
               setSettings({
                 darkMode: !settings.darkMode

tools/mrt-map-builder/src/components/sidebar/StationSection.tsx

@@ -32,9 +32,9 @@ function StationSection({
       <div className="flex flex-col space-y-3 px-4">
         <SearchInput
           className="component-bg-lighter mb-4"
-          value={searchStationQuery}
-          setValue={setSearchStationQuery}
           searchTarget="stations"
+          value={searchStationQuery}
+          onChange={setSearchStationQuery}
         />
         {mrtStations.length > 0 ? (
           filteredStations.length > 0 ? (
@@ -51,19 +51,21 @@ function StationSection({
           ) : (
             <EmptyStateScreen
               smaller
-              description="No stations found matching your search query."
               icon="tabler:search-off"
-              name={false}
-              title="No Stations Found"
+              message={{
+                title: 'No Stations Found',
+                description: 'No stations found matching your search query.'
+              }}
             />
           )
         ) : (
           <EmptyStateScreen
             smaller
-            description="Click the button below to add a new MRT station."
             icon="tabler:map-pin-off"
-            name={false}
-            title="No MRT Stations"
+            message={{
+              title: 'No MRT Stations',
+              description: 'Click the button below to add a new MRT station.'
+            }}
           />
         )}
       </div>

tools/mrt-map-builder/src/index.css

@@ -6,7 +6,7 @@ layer(base);
 @plugin 'daisyui';
 
 @import 'lifeforge-ui/dist/index.css';
-@source "../../../packages/lifeforge-ui/dist";
+@source '../../../packages/lifeforge-ui/dist';
 
 @font-face {
   font-family: 'LTAIdentityMedium';