Merge pull request #24 from RodrigoHamuy/ladle-tweaks

add description to stories

.ladle/components.tsx

@@ -1,5 +1,52 @@
 import { GlobalProvider } from "@ladle/react";
 import './style.css';
+import React, { memo, useCallback, useEffect, useState } from "react";
+import { createPortal } from "react-dom";
+import burgerSvg from './burger.svg';
 
-// @ts-ignore
-export const Provider: GlobalProvider = ({ children }) => <>{children}</>
+export const Provider: GlobalProvider = ({ children }) => {
+ const [header] = useState(() => document.createElement('div'));
+
+ const toggle = useCallback(() => {
+ if (!header.parentElement) return;
+ header.parentElement.classList.toggle('hide')
+ }, [])
+
+ useEffect(() => {
+ const container = document.querySelector('.ladle-aside');
+ if (!container) return;
+ container.prepend(header);
+ container.classList.add('hide');
+ return () => {
+ header.remove();
+ }
+
+ }, [])
+ return <>
+ {createPortal(<Header toggle={toggle} />, header)}
+ {children}
+ </>
+}
+
+interface HeaderProps {
+ toggle: () => void;
+}
+
+const Header = memo<HeaderProps>(({ toggle }) => {
+ return <>
+ <button className="story-menu-btn" onClick={toggle}><img src={burgerSvg} alt="toggle menu" /></button>
+ <h1><img src="favicon.svg" style={{ width: '1rem' }} /> react-three-map</h1>
+ <div style={{ paddingBottom: 15 }} className="story-header">
+ <p>R3F inside Mapbox & Maplibre</p>
+ <div style={{ display: 'inline-grid', gap: 10, gridTemplateColumns: 'repeat(2,auto' }}>
+ <a href="https://github.com/RodrigoHamuy/react-three-map" target="_blank" rel="noopener noreferrer">
+ <img src="https://img.shields.io/static/v1?&message=github&style=flat&colorA=000000&colorB=000000&label=&logo=github&logoColor=ffffff" alt="react-three-map repository" />
+ </a>
+ <a href="https://www.npmjs.com/package/react-three-map" target="_blank" rel="noopener noreferrer">
+ <img src={`https://img.shields.io/npm/v/react-three-map?style=flat&colorA=000000&colorB=000000&logo=npm`} alt="react-three-map NPM package" />
+ </a>
+ </div>
+ </div>
+ </>
+})
+Header.displayName = 'Header';

.ladle/style.css

@@ -1,18 +1,63 @@
-.ladle-main{
+.ladle-main {
  padding: 0;
 }
+
 .ladle-aside {
  order: -1;
+ padding: 1em 1.5em;
 }
+
 header.ladle-addons {
  max-width: 18em
 }
-header.ladle-addons ul{
+
+header.ladle-addons ul {
  flex-wrap: wrap;
 }
-header.ladle-addons li{
+
+header.ladle-addons li {
  margin: 0.35em;
 }
+
 header.ladle-addons li:nth-of-type(4) {
  display: none;
+}
+
+.story-menu-btn {
+ border: none;
+ background: none;
+ position: fixed;
+ right: 1rem;
+}
+
+.story-menu-btn img {
+ width: 2rem;
+ height: 2rem;
+}
+
+@media (max-width: 767px) {
+ .ladle-aside h1 {
+ margin: 0;
+ }
+
+ .ladle-aside {
+ position: fixed;
+ left: 0;
+ right: 0;
+ top: 0;
+ }
+
+ .hide.ladle-aside>*:not(:first-child) {
+ display: none;
+ }
+
+ .hide .story-header {
+ display: none;
+ }
+}
+
+@media (min-width: 768px) {
+ .story-menu-btn {
+ display: none;
+ }
 }

README.md

@@ -1,8 +1,10 @@
-# React Three Map
+# ![logo](public/favicon.svg)React Three Map
 
-[![Version](https://img.shields.io/npm/v/react-three-map)](https://npmjs.com/package/@react-three/fiber)
-[![Build Size](https://img.shields.io/bundlephobia/minzip/react-three-map?label=size)](https://bundlephobia.com/result?p=react-three-map)
-[![Build Status](https://img.shields.io/github/actions/workflow/status/RodrigoHamuy/react-three-map/release.yml?branch=main)](https://github.com/RodrigoHamuy/react-three-map/actions?query=workflow%3Arelease)
+[![Repository](https://img.shields.io/static/v1?&message=github&style=flat&colorA=000000&colorB=000000&label=&logo=github&logoColor=ffffff)](https://github.com/RodrigoHamuy/react-three-map)
+[![Version](https://img.shields.io/npm/v/react-three-map?style=flat&colorA=000000&colorB=000000)](https://npmjs.com/package/react-three-map)
+[![Build Size](https://img.shields.io/bundlephobia/minzip/react-three-map?label=size&?style=flat&colorA=000000&colorB=000000)](https://bundlephobia.com/result?p=react-three-map)
+[![Stories](https://img.shields.io/badge/stories-stories?colorA=000&colorB=000000&logo=maplibre)](https://rodrigohamuy.github.io/react-three-map/?story=canvas--a-maplibre-example)
+[![Build Status](https://img.shields.io/github/actions/workflow/status/RodrigoHamuy/react-three-map/release.yml?branch=main&style=flat&colorA=000000)](https://github.com/RodrigoHamuy/react-three-map/actions?query=workflow%3Arelease)
 
 `react-three-map` is a bridge to use [`react-three-fiber`](https://github.com/pmndrs/react-three-fiber) inside [`react-map-gl`](https://github.com/visgl/react-map-gl).