From 51626460c1af0f5eb8ccd8b90a862d042547e137 Mon Sep 17 00:00:00 2001
From: Rodri <hamuyrodrigo@gmail.com>
Date: Fri, 19 Apr 2024 19:58:55 +0100
Subject: [PATCH] fix #95 fix stories

---
 stories/src/canvas/maplibre.stories.tsx | 58 +++++++++++++------------
 1 file changed, 31 insertions(+), 27 deletions(-)

diff --git a/stories/src/canvas/maplibre.stories.tsx b/stories/src/canvas/maplibre.stories.tsx
index d5cc2f6..6eaee01 100644
--- a/stories/src/canvas/maplibre.stories.tsx
+++ b/stories/src/canvas/maplibre.stories.tsx
@@ -4,37 +4,41 @@ import { FC, useRef, useState } from "react";
 import Map from 'react-map-gl/maplibre';
 import { Mesh } from "three";
 import { Canvas } from "react-three-map/maplibre";
+import { Leva } from "leva";
 
-export default {title: 'Canvas'}
+export default { title: 'Canvas' }
 
 export function Maplibre() {
-  return <div style={{ height: '100vh' }}>
-    <Map
-      antialias
-      initialViewState={{
-        latitude: 51,
-        longitude: 0,
-        zoom: 13,
-        pitch: 60,
-      }}
-      mapStyle="https://basemaps.cartocdn.com/gl/positron-gl-style/style.json"
-    >
-      <Canvas latitude={51} longitude={0}>
-        <hemisphereLight
-          args={["#ffffff", "#60666C"]}
-          position={[1, 4.5, 3]}
-          intensity={Math.PI}
-        />
-        <object3D scale={500}>
-          <Box position={[-1.2, 1, 0]} />
-          <Box position={[1.2, 1, 0]} />
-        </object3D>
-      </Canvas>
-    </Map>
-  </div>
+  return <>
+    <Leva theme={{ sizes: { rootWidth: '340px', controlWidth: '150px' } }} />
+    <div style={{ height: '100vh' }}>
+      <Map
+        antialias
+        initialViewState={{
+          latitude: 51,
+          longitude: 0,
+          zoom: 13,
+          pitch: 60,
+        }}
+        mapStyle="https://basemaps.cartocdn.com/gl/positron-gl-style/style.json"
+      >
+        <Canvas latitude={51} longitude={0}>
+          <hemisphereLight
+            args={["#ffffff", "#60666C"]}
+            position={[1, 4.5, 3]}
+            intensity={Math.PI}
+          />
+          <object3D scale={500}>
+            <Box position={[-1.2, 1, 0]} />
+            <Box position={[1.2, 1, 0]} />
+          </object3D>
+        </Canvas>
+      </Map>
+    </div>
+  </>
 }
 
-const Box : FC<{position: Vector3}> = (props) => {
+const Box: FC<{ position: Vector3 }> = (props) => {
   // This reference gives us direct access to the THREE.Mesh object
   const ref = useRef<Mesh>(null)
   // Hold state for hovered and clicked events
@@ -42,7 +46,7 @@ const Box : FC<{position: Vector3}> = (props) => {
   const [clicked, click] = useState(false)
   // Subscribe this component to the render-loop, rotate the mesh every frame
   useFrame((_state, delta) => {
-    if(!ref.current) return;
+    if (!ref.current) return;
     ref.current.rotation.x += delta;
     ref.current.rotation.z -= delta;
   })