Merge pull request #267 from performant-software/RB-place-detail-modal

Updating PlaceDetailModal with more flexible styling
performant-software · Mar 13, 2024 · 0135a25 · 0135a25
2 parents 6485b95 + bc81e2e
commit 0135a25
Show file tree

Hide file tree

Showing 8 changed files with 29,735 additions and 2,439 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/packages/core-data/src/components/PlaceDetailsPanel.js b/packages/core-data/src/components/PlaceDetailsPanel.js
@@ -49,7 +49,7 @@ const PlaceDetailsPanel = (props: Props) => {
 
   return (
     <aside
-      className='flex flex-col absolute z-10 h-full w-[280px] bg-white/80 backdrop-blur shadow overflow-y-auto'
+      className='flex flex-col relative z-10 h-full min-w-[260px] bg-white/80 backdrop-blur shadow overflow-y-auto'
       ref={el}
     >
       <button

diff --git a/packages/storybook/package.json b/packages/storybook/package.json
@@ -15,6 +15,7 @@
     "@babel/preset-react": "^7.22.5",
     "@bunchtogether/vite-plugin-flow": "^1.0.2",
     "@faker-js/faker": "^8.0.2",
+    "@headlessui/react": "^1.7.18",
     "@peripleo/maplibre": "^0.3.3",
     "@peripleo/peripleo": "^0.3.3",
     "@storybook/addon-a11y": "^7.6.17",
@@ -34,19 +35,22 @@
     "@storybook/theming": "^7.6.17",
     "@vitejs/plugin-react": "^4.2.1",
     "ast-types": "^0.14.2",
+    "autoprefixer": "^10.4.18",
     "dotenv": "^16.0.3",
     "http-proxy-middleware": "^2.0.6",
     "i18next": "^22.0.1",
     "moment": "^2.30.1",
+    "postcss": "^8.4.35",
     "react": "^18.2.0",
     "react-calendar": "^3.7.0",
-    "react-docgen": "^6.0.1",
     "react-dnd": "^11.1.3",
     "react-dnd-html5-backend": "^11.1.3",
+    "react-docgen": "^6.0.1",
     "react-dom": "^18.2.0",
     "semantic-ui-react": "^2.1.2",
     "simple-keyboard-layouts": "^3.1.87",
     "storybook": "^7.0.26",
+    "tailwindcss": "^3.4.1",
     "underscore": "^1.13.2",
     "vite": "^5.1.4"
   }

diff --git a/packages/storybook/postcss.config.js b/packages/storybook/postcss.config.js
@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}
diff --git a/packages/storybook/src/core-data/PlaceDetailsPanel.stories.js b/packages/storybook/src/core-data/PlaceDetailsPanel.stories.js
@@ -1,11 +1,14 @@
 // @flow
 
 import { action } from '@storybook/addon-actions';
-import React from 'react';
+import React, { useState, Fragment } from 'react';
 import PlaceDetailsPanel from '../../../core-data/src/components/PlaceDetailsPanel';
 import place from '../data/Place.json';
 import relatedMedia from '../data/RelatedMedia.json';
 import relatedPlaces from '../data/RelatedPlaces.json';
+import { Button, Modal, Sidebar } from 'semantic-ui-react';
+import { Dialog, Transition } from '@headlessui/react';
+import '../index.css';
 
 export default {
   title: 'Components/Core Data/PlaceDetailsPanel',
@@ -27,3 +30,143 @@ export const Default = () => (
     }]}
   />
 );
+
+export const SidebarVersion = () => {
+  const [visible, setVisible] = useState(false);
+  return (
+    <>
+      <Sidebar
+        visible={visible}
+      >
+        <PlaceDetailsPanel
+          onClose={() => setVisible(false)}
+          place={place}
+          related={[{
+            endpoint: 'media_contents',
+            ui_label: 'Related Media',
+            data: relatedMedia
+          }, {
+            endpoint: 'places',
+            ui_label: 'Related Places',
+            data: relatedPlaces
+          }]}
+        />
+      </Sidebar>
+      <Button onClick={() => setVisible(true)}>
+        Open Sidebar
+      </Button>
+    </>
+  )
+};
+
+export const ModalVersion = () => {
+  const [open, setOpen] = useState(false);
+  return (
+    <>    
+      <Modal
+        open={open}
+      >
+        <Modal.Content>
+          <PlaceDetailsPanel
+            onClose={() => setOpen(false)}
+            place={place}
+            related={[{
+              endpoint: 'media_contents',
+              ui_label: 'Related Media',
+              data: relatedMedia
+            }, {
+              endpoint: 'places',
+              ui_label: 'Related Places',
+              data: relatedPlaces
+            }]}
+          />
+        </Modal.Content>
+      </Modal>
+      <Button onClick={() => setOpen(true)}>
+        Open Modal
+      </Button>
+    </>
+  );
+};
+
+export const SidebarVersionTailwind = () => {
+  const [visible, setVisible] = useState(false);
+  return (
+    <>
+      <div className={`inset-y-0 left-0 z-50 flex flex-col w-[260px] ${visible ? 'fixed' : 'hidden'} transition-all`}>
+        <PlaceDetailsPanel
+          onClose={() => setVisible(false)}
+          place={place}
+          related={[{
+            endpoint: 'media_contents',
+            ui_label: 'Related Media',
+            data: relatedMedia
+          }, {
+            endpoint: 'places',
+            ui_label: 'Related Places',
+            data: relatedPlaces
+          }]}
+        />
+      </div>
+      <Button onClick={() => setVisible(true)}>
+        Open Sidebar
+      </Button>
+    </>
+  )
+};
+
+export const ModalVersionTailwind = () => {
+  const [open, setOpen] = useState(false);
+  return (
+    <>   
+      <Transition.Root show={open} as={Fragment}>
+        <Dialog as="div" className="relative z-10" onClose={setOpen}>
+          <Transition.Child
+            as={Fragment}
+            enter="ease-out duration-300"
+            enterFrom="opacity-0"
+            enterTo="opacity-100"
+            leave="ease-in duration-200"
+            leaveFrom="opacity-100"
+            leaveTo="opacity-0"
+          >
+            <div className="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity" />
+          </Transition.Child>
+
+          <div className="fixed inset-0 z-10 w-screen overflow-y-auto">
+            <div className="flex min-h-full items-end justify-center p-4 text-center sm:items-center sm:p-0">
+              <Transition.Child
+                as={Fragment}
+                enter="ease-out duration-300"
+                enterFrom="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
+                enterTo="opacity-100 translate-y-0 sm:scale-100"
+                leave="ease-in duration-200"
+                leaveFrom="opacity-100 translate-y-0 sm:scale-100"
+                leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
+              >
+                <Dialog.Panel className="relative transform overflow-hidden rounded-lg bg-white px-4 pb-4 pt-5 text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-sm sm:p-6">
+                  <PlaceDetailsPanel
+                    onClose={() => setOpen(false)}
+                    place={place}
+                    related={[{
+                      endpoint: 'media_contents',
+                      ui_label: 'Related Media',
+                      data: relatedMedia
+                    }, {
+                      endpoint: 'places',
+                      ui_label: 'Related Places',
+                      data: relatedPlaces
+                    }]}
+                  />
+                </Dialog.Panel>
+              </Transition.Child>
+            </div>
+          </div>
+        </Dialog>
+      </Transition.Root> 
+      <Button onClick={() => setOpen(true)}>
+        Open Modal
+      </Button>
+    </>
+  );
+}
diff --git a/packages/storybook/src/index.css b/packages/storybook/src/index.css
@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
diff --git a/packages/storybook/tailwind.config.js b/packages/storybook/tailwind.config.js
@@ -0,0 +1,12 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  content: [
+    './src/index.css',
+    './src/**/*.js'
+  ],
+  theme: {
+    extend: {},
+  },
+  plugins: [],
+}
+