Merge pull request #114 from Kartore/input-ui

input系のUI変更
Kartore · Sep 14, 2024 · fb1ae7e · fb1ae7e
2 parents 12213c4 + 99ea236
commit fb1ae7e
Show file tree

Hide file tree

Showing 50 changed files with 2,226 additions and 360 deletions.
diff --git a/src/components/common/Button/Button.tsx b/src/components/common/Button/Button.tsx
@@ -4,17 +4,19 @@ import { useRef } from 'react';
 import type { AriaButtonOptions } from 'react-aria';
 import { useButton } from 'react-aria';
 
+import { cn } from '~/utils/tailwindUtil.ts';
+
 export type ButtonProps = AriaButtonOptions<'button'> &
   ComponentPropsWithoutRef<'button'> & {
     buttonRef?: MutableRefObject<HTMLButtonElement | null>;
   };
 
 export const Button: FC<ButtonProps> = (props) => {
   const ref = useRef<HTMLButtonElement | null>(null);
-  const { buttonRef = ref, ...otherProps } = props;
+  const { buttonRef = ref, className, ...otherProps } = props;
   const { buttonProps } = useButton(otherProps, buttonRef);
   return (
-    <button {...buttonProps} ref={buttonRef} style={props.style}>
+    <button {...buttonProps} ref={buttonRef} className={cn(className)}>
       {props.children}
     </button>
   );

diff --git a/src/components/common/Button/__snapshots__/Button.test.tsx.snap b/src/components/common/Button/__snapshots__/Button.test.tsx.snap
@@ -3,6 +3,7 @@
 exports[`Component: Button > Snapshot > Default 1`] = `
 <DocumentFragment>
   <button
+    class=""
     type="button"
   >
     Button

diff --git a/src/components/common/Popover/Popover.tsx b/src/components/common/Popover/Popover.tsx
@@ -5,6 +5,8 @@ import type { AriaPopoverProps } from 'react-aria';
 import { DismissButton, Overlay, usePopover } from 'react-aria';
 import type { OverlayTriggerState } from 'react-stately';
 
+import { cn } from '~/utils/tailwindUtil.ts';
+
 export type PopoverProps = Omit<AriaPopoverProps, 'popoverRef'> & {
   children: ReactNode;
   state: OverlayTriggerState;
@@ -22,16 +24,8 @@ export const Popover: FC<PopoverProps> = ({ state, children, ...props }) => {
 
   return (
     <Overlay>
-      <div {...underlayProps} style={{ position: 'fixed', inset: 0 }} />
-      <div
-        {...popoverProps}
-        ref={popoverRef}
-        style={{
-          ...popoverProps.style,
-          background: 'var(--page-background)',
-          border: '1px solid gray',
-        }}
-      >
+      <div {...underlayProps} className={cn('fixed inset-0', underlayProps.className)} />
+      <div {...popoverProps} ref={popoverRef}>
         <DismissButton onDismiss={state.close} />
         {children}
         <DismissButton onDismiss={state.close} />

diff --git a/src/components/common/RangeSlider/RangeSlider.tsx b/src/components/common/RangeSlider/RangeSlider.tsx
@@ -30,8 +30,16 @@ export const RangeSlider = forwardRef<HTMLDivElement, RangeSliderProps>(
       >
         {props.label && (
           <div className="flex items-center justify-between">
-            <label {...labelProps}>{props.label}</label>
-            <output {...outputProps}>
+            <label
+              {...labelProps}
+              className={cn('text-sm font-semibold text-gray-600', labelProps.className)}
+            >
+              {props.label}
+            </label>
+            <output
+              {...outputProps}
+              className={cn('text-sm font-semibold text-gray-800', outputProps.className)}
+            >
               {`${state.getThumbValueLabel(0)} - ${state.getThumbValueLabel(1)}`}
             </output>
           </div>

diff --git a/src/components/common/RangeSlider/__snapshots__/RangeSlider.test.tsx.snap b/src/components/common/RangeSlider/__snapshots__/RangeSlider.test.tsx.snap
@@ -12,12 +12,14 @@ exports[`Component: RangeSlider > Snapshot > Default 1`] = `
       class="flex items-center justify-between"
     >
       <label
+        class="text-sm font-semibold text-gray-600"
         id="react-aria-:r1:"
       >
         Label
       </label>
       <output
         aria-live="off"
+        class="text-sm font-semibold text-gray-800"
         for="react-aria-:r1:-0 react-aria-:r1:-1"
       >
         0 - 100

diff --git a/src/components/common/Select/ListBox/ListBox.tsx b/src/components/common/Select/ListBox/ListBox.tsx
@@ -6,6 +6,7 @@ import { useListBox } from 'react-aria';
 import type { ListState } from 'react-stately';
 
 import { Option } from '~/components/common/Select/ListBox/Option';
+import { cn } from '~/utils/tailwindUtil.ts';
 
 export type ListBoxProps = AriaListBoxOptions<unknown> & {
   state: ListState<unknown>;
@@ -21,15 +22,9 @@ export const ListBox: FC<ListBoxProps> = ({ ...props }) => {
     <ul
       {...listBoxProps}
       ref={listBoxRef}
-      style={{
-        margin: 0,
-        padding: 0,
-        listStyle: 'none',
-        maxHeight: 150,
-        overflow: 'auto',
-        minWidth: 100,
-        background: 'lightgray',
-      }}
+      className={cn(
+        'm-0 max-h-40 min-w-32 list-none overflow-auto rounded border border-gray-500 bg-white p-0'
+      )}
     >
       {[...state.collection].map((item) => (
         <Option key={item.key} item={item} state={state} />

diff --git a/src/components/common/Select/ListBox/Option/Option.tsx b/src/components/common/Select/ListBox/Option/Option.tsx
@@ -4,33 +4,26 @@ import { useRef } from 'react';
 import { useOption } from 'react-aria';
 import type { ListState, Node } from 'react-stately';
 
+import { CheckIcon } from '~/components/icons';
+import { cn } from '~/utils/tailwindUtil.ts';
+
 export type OptionProps = { item: Node<unknown>; state: ListState<unknown> };
 
 export const Option: FC<OptionProps> = ({ item, state }) => {
   const ref = useRef(null);
-  const { optionProps, isSelected, isFocused, isDisabled } = useOption(
-    { key: item.key },
-    state,
-    ref
-  );
+  const { optionProps, isSelected } = useOption({ key: item.key }, state, ref);
 
   return (
     <li
       {...optionProps}
       ref={ref}
-      style={{
-        background: isFocused ? 'gray' : 'transparent',
-        color: isDisabled ? 'gray' : isFocused ? 'white' : 'black',
-        padding: '2px 5px',
-        outline: 'none',
-        cursor: 'pointer',
-        display: 'flex',
-        justifyContent: 'space-between',
-        gap: '10px',
-      }}
+      className={cn(
+        'flex cursor-pointer items-center gap-2 bg-transparent py-1 pr-3 pl-1 outline-0 hover:bg-gray-100 aria-selected:bg-gray-200',
+        optionProps.className
+      )}
     >
+      {isSelected ? <CheckIcon className={'w-4'} /> : <div className={'w-4'} />}
       {item.rendered}
-      {isSelected ? <span>✓</span> : null}
     </li>
   );
 };
diff --git a/src/components/common/Select/Select.tsx b/src/components/common/Select/Select.tsx
@@ -8,6 +8,8 @@ import { useSelectState } from 'react-stately';
 import { Button } from '~/components/common/Button';
 import { Popover } from '~/components/common/Popover';
 import { ListBox } from '~/components/common/Select/ListBox';
+import { ArrowDropDownIcon } from '~/components/icons';
+import { cn } from '~/utils/tailwindUtil.ts';
 
 export type SelectProps = SelectStateOptions<object>;
 
@@ -19,20 +21,29 @@ export const Select: FC<SelectProps> = ({ ...props }) => {
 
   return (
     <div className={'flex items-center justify-between'}>
-      <div {...labelProps}>{props.label}</div>
+      <div
+        {...labelProps}
+        className={cn('text-sm font-semibold text-gray-600', labelProps.className)}
+      >
+        {props.label}
+      </div>
       <HiddenSelect
         isDisabled={props.isDisabled}
         state={state}
         triggerRef={ref}
         label={props.label}
       />
-      <Button {...triggerProps} buttonRef={ref} style={{ height: 30, fontSize: 14 }}>
-        <span {...valueProps}>
+      <Button
+        {...triggerProps}
+        buttonRef={ref}
+        className={cn(
+          'flex h-7 cursor-pointer flex-row items-center gap-1 rounded pl-1.5 text-sm hover:bg-gray-100 aria-expanded:bg-gray-200'
+        )}
+      >
+        <p {...valueProps}>
           {state.selectedItem ? state.selectedItem.rendered : 'Select an option'}
-        </span>
-        <span aria-hidden="true" style={{ paddingLeft: 5 }}>
-          ▼
-        </span>
+        </p>
+        <ArrowDropDownIcon aria-hidden={'true'} className={'w-4'} />
       </Button>
       {state.isOpen && (
         <Popover state={state} triggerRef={ref} placement="bottom start">

diff --git a/src/components/common/Select/__snapshots__/Select.test.tsx.snap b/src/components/common/Select/__snapshots__/Select.test.tsx.snap
@@ -5,7 +5,9 @@ exports[`Component: Select > Snapshot > Default 1`] = `
   <div
     class="flex items-center justify-between"
   >
-    <div />
+    <div
+      class="text-sm font-semibold text-gray-600"
+    />
     <div
       aria-hidden="true"
       data-a11y-ignore="aria-hidden-focus"
@@ -45,21 +47,25 @@ exports[`Component: Select > Snapshot > Default 1`] = `
       aria-expanded="false"
       aria-haspopup="listbox"
       aria-labelledby="react-aria-:r7:"
+      class="flex h-7 cursor-pointer flex-row items-center gap-1 rounded pl-1.5 text-sm hover:bg-gray-100 aria-expanded:bg-gray-200"
       id="react-aria-:r2:"
-      style="height: 30px; font-size: 14px;"
       type="button"
     >
-      <span
+      <p
         id="react-aria-:r7:"
       >
         Select an option
-      </span>
-      <span
+      </p>
+      <svg
         aria-hidden="true"
-        style="padding-left: 5px;"
+        class="w-4"
+        viewBox="0 -960 960 960"
+        xmlns="http://www.w3.org/2000/svg"
       >
-        ▼
-      </span>
+        <path
+          d="M480-360 280-560h400L480-360Z"
+        />
+      </svg>
     </button>
   </div>
 </DocumentFragment>

diff --git a/...PropertiesPanel/BackgroundLayerPropertiesPanel/BackgroundLayerPropertiesPanel.stories.tsx b/...PropertiesPanel/BackgroundLayerPropertiesPanel/BackgroundLayerPropertiesPanel.stories.tsx
@@ -17,19 +17,5 @@ export const Default: Story = {
       type: 'background',
       paint: { 'background-color': 'rgb(239,239,239)' },
     },
-    sources: {
-      openmaptiles: {
-        type: 'vector',
-        url: 'https://tileserver.kartore.io/tiles/openstreetmap/tile.json',
-      },
-      natural_earth_shaded_relief: {
-        maxzoom: 6,
-        tileSize: 256,
-        tiles: [
-          'https://kartore.github.io/naturalearthtiles/tiles/natural_earth_2_shaded_relief.raster/{z}/{x}/{y}.png',
-        ],
-        type: 'raster',
-      },
-    },
   },
 };
diff --git a/...el/LayerPropertiesPanel/BackgroundLayerPropertiesPanel/BackgroundLayerPropertiesPanel.tsx b/...el/LayerPropertiesPanel/BackgroundLayerPropertiesPanel/BackgroundLayerPropertiesPanel.tsx
@@ -1,12 +1,10 @@
 import type { ComponentPropsWithoutRef } from 'react';
 import { forwardRef } from 'react';
 
-import type {
-  BackgroundLayerSpecification,
-  SourceSpecification,
-} from '@maplibre/maplibre-gl-style-spec';
+import type { BackgroundLayerSpecification } from '@maplibre/maplibre-gl-style-spec';
 
 import { RangeSlider } from '~/components/common/RangeSlider';
+import { RawDataProperties } from '~/components/editor/PropertiesPanel/LayerPropertiesPanel/common/RawDataProperties';
 import type { onChangeType } from '~/components/editor/PropertiesPanel/LayerPropertiesPanel/utils/LayerUtil/LayerUtil.ts';
 import { cn } from '~/utils/tailwindUtil.ts';
 
@@ -15,31 +13,34 @@ export type BackgroundLayerPropertiesPanelProps = Omit<
   'onChange'
 > & {
   layer: BackgroundLayerSpecification;
-  sources: { [key: string]: SourceSpecification };
   onChange?: onChangeType;
 };
 
 export const BackgroundLayerPropertiesPanel = forwardRef<
   HTMLDivElement,
   BackgroundLayerPropertiesPanelProps
->(({ children, layer, sources, onChange, className, ...props }, ref) => {
+>(({ children, layer, onChange, className, ...props }, ref) => {
   return (
-    <div ref={ref} {...props} className={cn('px-4', className)}>
-      <RangeSlider
-        label={'Zoom Level Range'}
-        minValue={0}
-        maxValue={24}
-        step={1}
-        value={[layer.minzoom ?? 0, layer.maxzoom ?? 24]}
-        onChange={([minzoom, maxzoom]) => {
-          if (minzoom !== layer.minzoom) {
-            onChange?.(layer, undefined, 'minzoom', minzoom === 0 ? undefined : minzoom);
-          }
-          if (maxzoom !== layer.maxzoom) {
-            onChange?.(layer, undefined, 'maxzoom', maxzoom === 24 ? undefined : maxzoom);
-          }
-        }}
-      />
+    <div ref={ref} {...props} className={cn('flex flex-col gap-2', className)}>
+      <div className={'flex flex-col gap-2 px-4'}>
+        <h3 className={'font-montserrat text-sm font-semibold'}>General</h3>
+        <RangeSlider
+          label={'Zoom Level Range'}
+          minValue={0}
+          maxValue={24}
+          step={1}
+          value={[layer.minzoom ?? 0, layer.maxzoom ?? 24]}
+          onChange={([minzoom, maxzoom]) => {
+            if (minzoom !== layer.minzoom) {
+              onChange?.(layer, undefined, 'minzoom', minzoom === 0 ? undefined : minzoom);
+            }
+            if (maxzoom !== layer.maxzoom) {
+              onChange?.(layer, undefined, 'maxzoom', maxzoom === 24 ? undefined : maxzoom);
+            }
+          }}
+        />
+      </div>
+      <RawDataProperties layer={layer} />
       {children}
     </div>
   );