Merge pull request #110 from Kartore/feat/ui-design

デザイン変更
Kartore · Sep 12, 2024 · 2a304d0 · 2a304d0
2 parents be15340 + dc3134e
commit 2a304d0
Show file tree

Hide file tree

Showing 92 changed files with 354 additions and 226 deletions.
diff --git a/index.html b/index.html
@@ -4,6 +4,7 @@
     <meta charset="UTF-8" />
     <link rel="icon" type="image/svg+xml" href="/vite.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link href="https://fonts.googleapis.com/css2?family=Montserrat:[email protected]&display=swap" rel="stylesheet">
     <title>Vite + React + TS</title>
   </head>
   <body>

diff --git a/plop-templates/icon/Icon.tsx.hbs b/plop-templates/icon/Icon.tsx.hbs
@@ -0,0 +1,11 @@
+import type { HTMLAttributes } from 'react';
+
+export type {{pascalCase name}}Props = HTMLAttributes<SVGElement>;
+
+const {{pascalCase name}} = (props: {{pascalCase name}}Props) => {
+  return <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" {...props}></svg>;
+};
+
+{{pascalCase name}}.displayName = '{{pascalCase name}}';
+
+export { {{pascalCase name}} };
diff --git a/plopfile.js b/plopfile.js
@@ -36,4 +36,27 @@ export default function Plopfile(plop) {
       },
     ],
   });
+
+  plop.setGenerator('icon', {
+    description: 'Create a new icon',
+    prompts: [
+      {
+        type: 'input',
+        name: 'name',
+        message: 'Icon name',
+      },
+    ],
+    actions: [
+      {
+        type: 'add',
+        path: 'src/components/icons/{{name}}/{{name}}.tsx',
+        templateFile: 'plop-templates/icon/Icon.tsx.hbs',
+      },
+      {
+        type: 'append',
+        path: 'src/components/icons/index.ts',
+        template: "export * from './{{name}}/{{name}}';",
+      },
+    ],
+  });
 }
diff --git a/src/App.tsx b/src/App.tsx
@@ -4,12 +4,11 @@ import type { LayerSpecification, StyleSpecification } from 'maplibre-gl';
 import { MapProvider } from 'react-map-gl';
 import { useLocalStorage } from 'usehooks-ts';
 
-import { LayerPanel } from '~/components/editor/LayerPanel/LayerPanel.tsx';
 import { MapPanel } from '~/components/editor/MapPanel/MapPanel.tsx';
+import { NavigationPanel } from '~/components/editor/NavigationPanel/NavigationPanel.tsx';
+import type { onChangeType } from '~/components/editor/PropertiesPanel/LayerPropertiesPanel/utils/LayerUtil/LayerUtil.ts';
+import { replaceLayerData } from '~/components/editor/PropertiesPanel/LayerPropertiesPanel/utils/LayerUtil/LayerUtil.ts';
 import { PropertiesPanel } from '~/components/editor/PropertiesPanel/PropertiesPanel.tsx';
-import type { onChangeType } from '~/components/editor/PropertiesPanel/utils/LayerUtil/LayerUtil.ts';
-import { replaceLayerData } from '~/components/editor/PropertiesPanel/utils/LayerUtil/LayerUtil.ts';
-import { Header } from '~/components/header/Header';
 import { osmLiberty } from '~/samples/osm-liberty.ts';
 
 function App() {
@@ -38,29 +37,24 @@ function App() {
 
   return (
     <MapProvider>
-      <div className={'grid max-h-screen min-h-screen w-full grid-cols-1 grid-rows-[3rem_1fr]'}>
-        <Header />
-        <div className={'flex h-full flex-row overflow-hidden'}>
-          <LayerPanel
-            className={'w-1/5 overflow-y-auto'}
-            layers={mapStyle.layers}
-            onChangeLayerOrder={handleChangeLayerOrder}
-            onClickLayer={(layer) => {
-              setSelectedLayerId(layer.id);
-            }}
-          />
-          <div className={'flex-1'}>
-            <MapPanel mapStyle={mapStyle} />
-          </div>
-
-          <div className={'w-1/5 overflow-y-auto'}>
-            <PropertiesPanel
-              layer={selectedLayer}
-              sources={mapStyle.sources}
-              onChange={handleChangeLayerData}
-            />
-          </div>
-        </div>
+      <div className={'relative flex max-h-screen min-h-screen w-full flex-row overflow-hidden'}>
+        <MapPanel mapStyle={mapStyle} />
+        <NavigationPanel
+          className={'absolute top-2 bottom-2 left-2 w-1/5'}
+          mapStyle={mapStyle}
+          onChangeLayerOrder={handleChangeLayerOrder}
+          selectedLayerId={selectedLayerId}
+          onClickLayer={(layer) => {
+            setSelectedLayerId(layer.id);
+          }}
+        />
+
+        <PropertiesPanel
+          className={'absolute top-2 right-2 bottom-2 w-1/5'}
+          layer={selectedLayer}
+          sources={mapStyle.sources}
+          onChange={handleChangeLayerData}
+        />
       </div>
     </MapProvider>
   );

diff --git a/src/components/editor/LayerPanel/index.ts b/src/components/editor/LayerPanel/index.ts
diff --git a/src/components/editor/MapPanel/MapPanel.tsx b/src/components/editor/MapPanel/MapPanel.tsx
@@ -15,9 +15,10 @@ export const MapPanel: FC<{
         latitude: 35.681,
         zoom: 15,
       }}
-      style={{ height: '100%', ...style }}
+      style={{ height: 'auto', width: '100%', ...style }}
       mapStyle={mapStyle}
-      maplibreLogo
+      maplibreLogo={false}
+      attributionControl={false}
     />
   );
 };
diff --git a/.../editor/LayerPanel/LayerPanel.stories.tsx → ...vigationPanel/NavigationPanel.stories.tsx b/.../editor/LayerPanel/LayerPanel.stories.tsx → ...vigationPanel/NavigationPanel.stories.tsx
@@ -4,11 +4,11 @@ import type { LayerSpecification } from 'maplibre-gl';
 
 import { osmLiberty } from '~/samples/osm-liberty.ts';
 
-import { LayerPanel } from '.';
+import { NavigationPanel } from '.';
 
 const meta = {
-  component: LayerPanel,
-} satisfies Meta<typeof LayerPanel>;
+  component: NavigationPanel,
+} satisfies Meta<typeof NavigationPanel>;
 
 export default meta;
 

diff --git a/...nts/editor/LayerPanel/LayerPanel.test.tsx → .../NavigationPanel/NavigationPanel.test.tsx b/...nts/editor/LayerPanel/LayerPanel.test.tsx → .../NavigationPanel/NavigationPanel.test.tsx
@@ -2,11 +2,11 @@ import { composeStories } from '@storybook/react';
 import { render } from '@testing-library/react';
 import { describe } from 'vitest';
 
-import * as Stories from './LayerPanel.stories';
+import * as Stories from './NavigationPanel.stories';
 
 const { Default } = composeStories(Stories);
 
-describe('Component: LayerPanel', () => {
+describe('Component: NavigationPanel', () => {
   describe('Snapshot', () => {
     it('Default', () => {
       const { asFragment } = render(<Default />);

diff --git a/...mponents/editor/LayerPanel/LayerPanel.tsx → ...ditor/NavigationPanel/NavigationPanel.tsx b/...mponents/editor/LayerPanel/LayerPanel.tsx → ...ditor/NavigationPanel/NavigationPanel.tsx
@@ -1,7 +1,7 @@
 import type { ComponentPropsWithoutRef, FC } from 'react';
 import { useState } from 'react';
 
-import type { DragEndEvent, DragStartEvent, Modifier, UniqueIdentifier } from '@dnd-kit/core';
+import type { DragEndEvent, DragStartEvent, Modifier } from '@dnd-kit/core';
 import {
   DndContext,
   DragOverlay,
@@ -12,29 +12,32 @@ import {
   useSensors,
 } from '@dnd-kit/core';
 import { arrayMove, SortableContext, verticalListSortingStrategy } from '@dnd-kit/sortable';
-import type { LayerSpecification } from 'maplibre-gl';
+import type { LayerSpecification, StyleSpecification } from 'maplibre-gl';
 import { createPortal } from 'react-dom';
 
-import { SortableLayerTreeItem } from '~/components/editor/LayerPanel/SortableLayerTreeItem/SortableLayerTreeItem.tsx';
+import { SortableLayerTreeItem } from '~/components/editor/NavigationPanel/SortableLayerTreeItem/SortableLayerTreeItem.tsx';
 import { cn } from '~/utils/tailwindUtil';
 
 type LayerPanelProps = Omit<ComponentPropsWithoutRef<'div'>, 'children'> & {
-  layers: LayerSpecification[];
+  mapStyle: StyleSpecification;
+  selectedLayerId: LayerSpecification['id'] | null;
   onClickLayer: (id: LayerSpecification) => void;
   onChangeLayerOrder: (layers: LayerSpecification[]) => void;
 };
 
-export const LayerPanel: FC<LayerPanelProps> = ({
+export const NavigationPanel: FC<LayerPanelProps> = ({
   onChangeLayerOrder,
   onClickLayer,
-  layers,
+  mapStyle,
   className,
+  selectedLayerId,
   ...props
 }) => {
-  const [activeId, setActiveId] = useState<UniqueIdentifier | null>(null);
+  const [activeLayer, setActiveLayer] = useState<LayerSpecification | null>(null);
 
   const handleDragStart = ({ active: { id } }: DragStartEvent) => {
-    setActiveId(id);
+    setActiveLayer(mapStyle.layers.find((layer) => layer.id === id) || null);
+
     document.body.style.setProperty('cursor', 'grabbing');
   };
 
@@ -47,7 +50,7 @@ export const LayerPanel: FC<LayerPanelProps> = ({
     if (!over) {
       return;
     }
-    const clonedLayers: LayerSpecification[] = JSON.parse(JSON.stringify(layers));
+    const clonedLayers: LayerSpecification[] = JSON.parse(JSON.stringify(mapStyle.layers));
 
     const activeIndex = clonedLayers.findIndex((layer) => layer.id === active.id);
     const overIndex = clonedLayers.findIndex((layer) => layer.id === over.id);
@@ -56,7 +59,7 @@ export const LayerPanel: FC<LayerPanelProps> = ({
   };
 
   const resetState = () => {
-    setActiveId(null);
+    setActiveLayer(null);
 
     document.body.style.setProperty('cursor', '');
   };
@@ -78,11 +81,25 @@ export const LayerPanel: FC<LayerPanelProps> = ({
   );
 
   return (
-    <div {...props} className={cn('h-full w-auto', className)}>
-      <div className={'border-b py-1 px-2'}>
+    <div
+      {...props}
+      className={cn(
+        'flex h-auto w-auto flex-col rounded-lg border border-gray-300 bg-white',
+        className
+      )}
+    >
+      <div className={'flex flex-col gap-2 border-b border-b-gray-300 py-4 px-4'}>
+        <h1 className={'font-[Montserrat] font-bold'}>Kartore</h1>
+        <h2 className={'font-[Montserrat] font-semibold'}>{mapStyle.name}</h2>
+      </div>
+      <div
+        className={
+          'border-b border-b-gray-300 py-2 px-4 font-[Montserrat] text-sm font-medium text-gray-500'
+        }
+      >
         <h2>Layers</h2>
       </div>
-      <div className={'px-2'}>
+      <div className={'flex-1 overflow-auto'}>
         <DndContext
           measuring={{
             droppable: {
@@ -95,15 +112,16 @@ export const LayerPanel: FC<LayerPanelProps> = ({
           onDragEnd={handleDragEnd}
         >
           <SortableContext
-            items={layers.map((layer) => layer.id)}
+            items={mapStyle.layers.map((layer) => layer.id)}
             strategy={verticalListSortingStrategy}
           >
-            {layers.map((layer) => {
+            {mapStyle.layers.map((layer) => {
               return (
                 <SortableLayerTreeItem
                   key={layer.id}
-                  id={layer.id}
-                  indicator={layer.id === activeId}
+                  isSelected={layer.id === selectedLayerId}
+                  layer={layer}
+                  indicator={layer.id === activeLayer?.id}
                   onClick={() => {
                     onClickLayer(layer);
                   }}
@@ -113,10 +131,10 @@ export const LayerPanel: FC<LayerPanelProps> = ({
           </SortableContext>
           {createPortal(
             <DragOverlay modifiers={[adjustTranslate]}>
-              {activeId ? <SortableLayerTreeItem id={activeId} clone /> : null}
+              {activeLayer ? <SortableLayerTreeItem layer={activeLayer} clone /> : null}
             </DragOverlay>,
             document.body,
-            `drag-overlay-${activeId}`
+            `drag-overlay-${activeLayer?.id}`
           )}
         </DndContext>
       </div>

diff --git a/...rTreeItem/LayerTreeItem/LayerTreeItem.tsx → ...rTreeItem/LayerTreeItem/LayerTreeItem.tsx b/...rTreeItem/LayerTreeItem/LayerTreeItem.tsx → ...rTreeItem/LayerTreeItem/LayerTreeItem.tsx
@@ -1,31 +1,35 @@
 import { type ComponentPropsWithoutRef, forwardRef } from 'react';
 
-import type { UniqueIdentifier } from '@dnd-kit/core';
+import type { LayerSpecification } from '@maplibre/maplibre-gl-style-spec';
 
+import { LayerIcon } from '~/components/icons';
 import { cn } from '~/utils/tailwindUtil';
 
 export type LayerTreeItemProps = {
-  id: UniqueIdentifier;
   indicator?: boolean;
   clone?: boolean;
   disableInteraction?: boolean;
+  layer: LayerSpecification;
+  isSelected?: boolean;
 } & Omit<ComponentPropsWithoutRef<'div'>, 'id'>;
 
 export const LayerTreeItem = forwardRef<HTMLDivElement, LayerTreeItemProps>(
-  ({ id, indicator, disableInteraction, clone, className, ...props }, ref) => {
+  ({ layer, indicator, disableInteraction, clone, className, isSelected, ...props }, ref) => {
     return (
       <div
         ref={ref}
         {...props}
         className={cn(
-          'flex items-center p-2',
+          'flex w-full items-center gap-2 py-2 px-4 text-sm text-gray-800',
           indicator && 'opacity-60',
-          clone && 'inline-block',
+          clone && 'inline-flex',
           disableInteraction || clone ? 'pointer-events-none' : 'pointer-events-auto',
+          isSelected ? 'bg-gray-200' : 'hover:bg-gray-100',
           className
         )}
       >
-        <p>{id}</p>
+        <LayerIcon type={layer.type} className={'h-3 w-3 min-w-3 cursor-grab'} />
+        <p className={'flex-1 overflow-hidden text-ellipsis'}>{layer.id}</p>
       </div>
     );
   }

diff --git a/...leLayerTreeItem/SortableLayerTreeItem.tsx → ...leLayerTreeItem/SortableLayerTreeItem.tsx b/...leLayerTreeItem/SortableLayerTreeItem.tsx → ...leLayerTreeItem/SortableLayerTreeItem.tsx
@@ -1,21 +1,18 @@
 import type { CSSProperties, FC } from 'react';
 
-import type { AnimateLayoutChanges} from '@dnd-kit/sortable';
+import type { AnimateLayoutChanges } from '@dnd-kit/sortable';
 import { useSortable } from '@dnd-kit/sortable';
 import { CSS } from '@dnd-kit/utilities';
 
-import type {
-  LayerTreeItemProps} from '~/components/editor/LayerPanel/SortableLayerTreeItem/LayerTreeItem/LayerTreeItem.tsx';
-import {
-  LayerTreeItem
-} from '~/components/editor/LayerPanel/SortableLayerTreeItem/LayerTreeItem/LayerTreeItem.tsx';
+import type { LayerTreeItemProps } from '~/components/editor/NavigationPanel/SortableLayerTreeItem/LayerTreeItem/LayerTreeItem.tsx';
+import { LayerTreeItem } from '~/components/editor/NavigationPanel/SortableLayerTreeItem/LayerTreeItem/LayerTreeItem.tsx';
 
 const animateLayoutChanges: AnimateLayoutChanges = ({ isSorting, wasDragging }) =>
   !(isSorting || wasDragging);
 
 type SortableLayerTreeItemProps = LayerTreeItemProps;
 
-export const SortableLayerTreeItem: FC<SortableLayerTreeItemProps> = ({ id, ...props }) => {
+export const SortableLayerTreeItem: FC<SortableLayerTreeItemProps> = ({ layer, ...props }) => {
   const {
     attributes,
     isSorting,
@@ -26,7 +23,7 @@ export const SortableLayerTreeItem: FC<SortableLayerTreeItemProps> = ({ id, ...p
     transform,
     transition,
   } = useSortable({
-    id,
+    id: layer.id,
     animateLayoutChanges,
   });
   const style: CSSProperties = {
@@ -36,10 +33,10 @@ export const SortableLayerTreeItem: FC<SortableLayerTreeItemProps> = ({ id, ...p
 
   return (
     <LayerTreeItem
-      id={id}
       ref={setNodeRef}
       style={style}
       disableInteraction={isSorting || isDragging || isOver}
+      layer={layer}
       {...attributes}
       {...listeners}
       {...props}

diff --git a/...el/__snapshots__/LayerPanel.test.tsx.snap → ...el/__snapshots__/LayerPanel.test.tsx.snap b/...el/__snapshots__/LayerPanel.test.tsx.snap → ...el/__snapshots__/LayerPanel.test.tsx.snap
diff --git a/src/components/editor/NavigationPanel/index.ts b/src/components/editor/NavigationPanel/index.ts
@@ -0,0 +1 @@
+export * from './NavigationPanel.tsx';
diff --git a/src/components/editor/PropertiesPanel/BackgroundLayerPropertiesPanel/index.ts b/src/components/editor/PropertiesPanel/BackgroundLayerPropertiesPanel/index.ts
diff --git a/src/components/editor/PropertiesPanel/CircleLayerPropertiesPanel/index.ts b/src/components/editor/PropertiesPanel/CircleLayerPropertiesPanel/index.ts
diff --git a/src/components/editor/PropertiesPanel/FillExtrusionLayerPropertiesPanel/index.ts b/src/components/editor/PropertiesPanel/FillExtrusionLayerPropertiesPanel/index.ts
diff --git a/src/components/editor/PropertiesPanel/FillLayerPropertiesPanel/index.ts b/src/components/editor/PropertiesPanel/FillLayerPropertiesPanel/index.ts
diff --git a/src/components/editor/PropertiesPanel/HeatmapLayerPropertiesPanel/index.ts b/src/components/editor/PropertiesPanel/HeatmapLayerPropertiesPanel/index.ts
diff --git a/src/components/editor/PropertiesPanel/HillshadeLayerPropertiesPanel/index.ts b/src/components/editor/PropertiesPanel/HillshadeLayerPropertiesPanel/index.ts