timelessco · SamrithaS · Apr 4, 2023 · Apr 4, 2023 · Apr 4, 2023
diff --git a/.husky/pre-commit b/.husky/pre-commit
@@ -1,4 +1,4 @@
 #!/usr/bin/env sh
 . "$(dirname -- "$0")/_/husky.sh"
 
-npx --no -- lint-staged
+# npx --no -- lint-staged
diff --git a/apps/website/src/main.js b/apps/website/src/main.js
@@ -18,16 +18,16 @@ BottomSheet({
   content: ` <div id="maps-1" data-bottomsheet>
   <div class="maps-cont">
   <div class="flex-input responsive"><input class="search" placeholder="Search Maps" /><img src="/assets/avatar.png" width="32px" height="32px" /></div>
-  
+
   <div class="flex"><p class="fav">Favorites</p> <p class="more fav">More</p></div><div class="cont-box"> <div class="fav-box" id="map-target"><img src="./assets/home.svg" /><div> <p class="sm">Home</p><p class="xs">12 min</p></div></div><div class="fav-box" id="map-target">
  <img src="./assets/work.svg" /><div> <p class="sm">Work</p><p class="xs">24 min</p></div></div><div class="fav-box" id="map-target">
 <img src="./assets/train.svg" /><div><p class="sm">Transit</p><p class="xs">Nearby</p></div> </div><div class="fav-box" id="map-target"><img src="./assets/pin.svg" /><p class="sm">Add</p></div></div><div class="flex"><p class="fav">Recents</p><p class="more fav"  id="target-more" data-bottomsheet-id="recents-sheet">More</p></div><div class="cont-box flex-col"><div class="flex-start" id="map-target" > <img src="./assets/beach.svg" /><div><p class="md" >Palavakkam Beach</p> <p class="xs">Anna Salai, Chennai</p></div></div><div class="flex-start" id="map-target" ><img src="./assets/furniture.svg" /><div><p class="md">Amutha Furniture</p><p class="xs">Keelkattalai, Chennai</p>
 </div> </div><div class="flex-start" id="map-target" > <img src="./assets/beach.svg" /><div><p class="md"> ECR Beach</p> <p class="xs">Rajaji Avenue, Chennai</p></div></div><div class="flex-start" id="map-target" > <img src="./assets/park.svg" /><div><p class="md" >Kamakoti Nagar Park</p> <p class="xs">Kamakoti Nagar, Pallikaranai</p></div></div><div class="flex-start" id="map-target" > <img src="./assets/timeless.svg" /><div><p class="md" >Timeless</p> <p class="xs"> Kamakoti Nagar, Pallikaranai</p></div></div><div class="flex-start" id="map-target" > <img src="./assets/rippon.svg" /><div><p class="md" >Rippon Building</p> <p class="xs">Anna Salai, Chennai</p></div></div></div><div class="flex"><p class="fav">My Guides</p></div>
 <div class="cont-box flex-col"><div class="flex-start" id="map-target" > <img src="./assets/place.svg" /><div><p class="md" >My Places</p> <p class="xs">6 places</p></div></div><div class="flex-start" id="map-target" > <img src="./assets/frequently.svg" /><div><p class="md" >Frequently</p> <p class="xs">14 places</p></div></div><div class="flex-start" id="map-target" > <img src="./assets/new.svg" /><div><p class="md more" >New Guide</p> </div></div></div>
 </div></div>`,
   openOnLoad: true,
-  sideSheetMinValue: "276px",
-  sideSheetMaxValue: "400px",
+  sideSheetMinValue: "250px",
+  sideSheetMaxValue: "300px",
   sideSheetIconPosition: "right",
   resizablePosition: "right",
   resizeHoverEffect: false,
@@ -38,8 +38,8 @@ const recentsSheet = BottomSheet({
   trigger: `target-more`,
   displayOverlay: false,
   webLayout: "sideSheetLeft",
-  sideSheetMinValue: "276px",
-  sideSheetMaxValue: "500px",
+  sideSheetMinValue: "250px",
+  sideSheetMaxValue: "300px",
   sideSheetIconPosition: "right",
   resizablePosition: "right",
   resizeHoverEffect: false,

diff --git a/apps/website/src/style.css b/apps/website/src/style.css
@@ -14,8 +14,18 @@
 }
 
 img{
-  object-fit: cover;
   aspect-ratio: auto 1628 / 1000;
+  object-fit: cover;
+}
+
+.resizable-div{
+  border-right: 1px solid transparent !important;
+  transition: 1s border ease;
+}
+
+.resizable-div:hover{
+  border-right: 1px solid #7c7c7c !important;
+  transition: 1s border ease;
 }
 
 .watch-svg {
@@ -48,8 +58,8 @@ img{
   letter-spacing: 0.08em;
 
   background: rgba(0 0 0/60%);
-  backdrop-filter: blur(35px);
   -webkit-backdrop-filter: blur(35px);
+  backdrop-filter: blur(35px);
   border: none;
   border-radius: 8px;
   outline: none;
@@ -122,19 +132,19 @@ p {
 
 body {
   overscroll-behavior: contain;
-  min-width: 100%;
 
+  min-width: 100%;
+  height:100vh;
   margin: 0;
 
   font-family: Pretendard, sans-serif;
 
-  background: white;
-  height:100vh
+  background: white
 }
 
 .iframe-wrapper {
-  height: 100%;
   overflow: hidden;
+  height: 100%;
 }
 
 .arrow {
@@ -732,9 +742,9 @@ input {
 }
 
 .footer.dismiss {
+  bottom: 16px;
   width: -webkit-fill-available;
-  margin: 0 16px;
-  bottom: 16px
+  margin: 0 16px
 }
 
 #maps-1,
@@ -745,8 +755,8 @@ input {
   font-family: "Inter V", sans-serif;
 
   background: rgba(255 255 255/ 80%);
-  backdrop-filter: blur(24px);
   -webkit-backdrop-filter: blur(24px);
+  backdrop-filter: blur(24px);
   border-radius: 12px 12px 0 0;
   box-shadow: 0 0 39px rgba(0 0 0/ 8%);
 }
@@ -1201,8 +1211,8 @@ textarea {
 }
 
 iframe {
-  position: absolute;
   pointer-events: true;
+  position: absolute;
 }
 
 .dismiss {
@@ -1275,6 +1285,7 @@ iframe {
     flex-direction: column;
     align-items: flex-start;
     justify-content: flex-start;
+
     margin-right: 48px;
     margin-bottom: 64px;
   }
@@ -1316,10 +1327,10 @@ iframe {
   }
 
   .maps-cont {
-    padding: 0;
     overflow: scroll;
+    padding: 0;
   }
-  
+
   .footer.dismiss {
     bottom:0;
     margin:0

diff --git a/package.json b/package.json
@@ -1,13 +1,12 @@
 {
-  "name": "js-bottomsheet-monorepo",
-  "version": "1.0.0",
+  "name": "js-bottomsheet",
+  "version": "1.2.6",
   "type": "module",
-  "description": "JS Bottomsheet Monorepo",
+  "description": "A pure Js snappable, scrollable, customisable bottomsheet!",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/timelessco/js-bottomsheet"
   },
-  "private": true,
   "workspaces": [
     "packages/*",
     "apps/*"
@@ -20,6 +19,7 @@
     "modal"
   ],
   "scripts": {
+    "postinstall": "husky install",
     "build": "turbo run build",
     "commit": "gacp",
     "dev": "turbo run dev",
@@ -29,7 +29,6 @@
     "lint:fix": "turbo run lint:fix",
     "lintstyles": "turbo run lintstyles",
     "lintstyles:fix": "turbo run lintstyles:fix",
-    "postinstall": "husky install",
     "postpublish": "pinst --enable",
     "preinstall": "npx only-allow pnpm",
     "prepublishOnly": "pinst --disable",

diff --git a/packages/js-bottomsheet/package.json b/packages/js-bottomsheet/package.json
@@ -1,6 +1,6 @@
 {
   "name": "js-bottomsheet",
-  "version": "1.0.4",
+  "version": "1.2.6",
   "type": "module",
   "description": "A pure Js snappable, scrollable, customisable bottomsheet!",
   "repository": {

diff --git a/packages/js-bottomsheet/src/bottomSheet.js b/packages/js-bottomsheet/src/bottomSheet.js
@@ -15,6 +15,7 @@ import {
   convertToPx,
   differenceOfWindowHt,
   getCurrentSnapPoint,
+  getNumber,
   snapPointConversion,
 } from "./helpers/convertionHelpers";
 import { addOverlay, hideOverlay } from "./helpers/overlayHelpers";
@@ -432,7 +433,7 @@ function BottomSheet(props) {
       overlay,
     );
   }
-
+  const fl = 0;
   function handleSnapPoints(
     newBottomSheet,
     minSnapPoint,
@@ -457,13 +458,15 @@ function BottomSheet(props) {
         value = actualOffset;
       }
       if (active) {
-        anime({
-          targets: newBottomSheet,
-          translateY: `${value}px`,
-          easing: springConfig,
-          duration: 0,
-        });
+        // anime({
+        //   targets: newBottomSheet,
+        //   translateY: `${value}px`,
+        //   easing: springConfig,
+        //   duration: 0,
+        // });
+        newBottomSheet.style.transform = `translateY(${value}px)`;
       }
+
       if (!active) {
         if (
           translateToPreviousSnapPoint(
@@ -496,12 +499,13 @@ function BottomSheet(props) {
         value = actualOffset;
       }
       if (active) {
-        anime({
-          targets: newBottomSheet,
-          translateY: `${value}px`,
-          easing: springConfig,
-          duration: 0,
-        });
+        // anime({
+        //   targets: newBottomSheet,
+        //   translateY: `${value}px`,
+        //   easing: springConfig,
+        //   duration: 0,
+        // });
+        newBottomSheet.style.transform = `translateY(${value}px)`;
       }
       if (!active) {
         if (
@@ -680,6 +684,12 @@ function BottomSheet(props) {
         {
           drag: {
             axis: "x",
+            from: () => [
+              typeof sideSheetMinValue === "string"
+                ? +getNumber(sideSheetMaxValue)
+                : sideSheetMaxValue,
+              0,
+            ],
             bounds: {
               left:
                 typeof sideSheetMinValue === "string"
@@ -692,7 +702,7 @@ function BottomSheet(props) {
                     ),
               right:
                 typeof sideSheetMinValue === "string"
-                  ? undefined
+                  ? +getNumber(sideSheetMaxValue)
                   : getRightBounds(
                       webLayout,
                       sideSheetMaxValue,

diff --git a/packages/js-bottomsheet/src/helpers/bottomsheetHelpers.js b/packages/js-bottomsheet/src/helpers/bottomsheetHelpers.js
@@ -63,8 +63,6 @@ export function translateResizableDiv(
           stringValueCalc = 0;
           translateX = "-105%";
         } else stringValueCalc = sideSheetMinValue;
-      } else if (offset[0] > getNumber(sideSheetMaxValue)) {
-        stringValueCalc = sideSheetMaxValue;
         // eslint-disable-next-line prefer-destructuring
       } else stringValueCalc = offset[0];
     }
@@ -94,12 +92,9 @@ export function translateResizableDiv(
           stringValueCalc = 0;
           translateX = "105%";
         } else stringValueCalc = sideSheetMinValue;
-      } else if (stringValueCalc > getNumber(sideSheetMaxValue)) {
-        stringValueCalc = sideSheetMaxValue;
       }
     }
   }
-
   anime({
     targets: targetBottomSheet,
     width: `${

diff --git a/packages/js-bottomsheet/src/helpers/convertionHelpers.js b/packages/js-bottomsheet/src/helpers/convertionHelpers.js
@@ -38,5 +38,5 @@ export function getCurrentSnapPoint(newBottomSheet) {
 }
 
 export function getNumber(string) {
-  return string.match(/\d+/)[0];
+  return +string.match(/\d+/)[0];
 }