Merge branch 'main' into release

web/src/beta/components/fields/DateTimeField/EditPanel/hooks.ts

@@ -18,7 +18,7 @@ export default ({ value, onChange, setDateTime }: Props) => {
   const [date, setDate] = useState("");
   const [time, setTime] = useState("");
   const [selectedTimezone, setSelectedTimezone] = useState<TimezoneInfo>({
-    offset: "+0:00",
+    offset: "+00:00",
     timezone: "Africa/Abidjan",
   });
 
@@ -41,7 +41,7 @@ export default ({ value, onChange, setDateTime }: Props) => {
       info => info.timezone === selectedTimezone.timezone,
     );
     if (selectedTimezoneInfo) {
-      const formattedDateTime = `${date}T${time}:00${selectedTimezoneInfo.offset}`;
+      const formattedDateTime = `${date}T${time}${selectedTimezoneInfo.offset}`;
       setDateTime?.(formattedDateTime);
       onChange?.(formattedDateTime);
     }
@@ -59,20 +59,27 @@ export default ({ value, onChange, setDateTime }: Props) => {
     if (value) {
       const [parsedDate, timeWithOffset] = value.split("T");
       const [parsedTime, timezoneOffset] = timeWithOffset.split(/[-+]/);
+      const [timezoneOffsetHour, timezoneOffsetMinute] = timezoneOffset.split(":");
+      const formattedTimezoneOffset =
+        timezoneOffsetHour.length === 2
+          ? timezoneOffset
+          : `${timezoneOffsetHour.padStart(2, "0")}:${timezoneOffsetMinute}`;
 
-      setDate(parsedDate);
       setTime(parsedTime);
+      setDate(parsedDate);
 
       const updatedTimezone = offsetFromUTC.find(
         info =>
           info.offset ===
-          (timeWithOffset.includes("-") ? `-${timezoneOffset}` : `+${timezoneOffset}`),
+          (timeWithOffset.includes("-")
+            ? `-${formattedTimezoneOffset}`
+            : `+${formattedTimezoneOffset}`),
       );
       updatedTimezone && setSelectedTimezone(updatedTimezone);
     } else {
       setDate("");
       setTime("");
-      setSelectedTimezone({ offset: "+0:00", timezone: "Africa/Abidjan" });
+      setSelectedTimezone({ offset: "+00:00", timezone: "Africa/Abidjan" });
     }
   }, [value, offsetFromUTC]);
 

web/src/beta/components/fields/DateTimeField/EditPanel/index.tsx

@@ -45,7 +45,7 @@ const EditPanel: React.FC<Props> = ({ onChange, onClose, value, setDateTime }) =
         <TextWrapper>
           <Label>{t("Time")}</Label>
 
-          <Input type="time" value={time} onChange={handleTimeChange} />
+          <Input type="time" value={time} onChange={handleTimeChange} step={1} />
         </TextWrapper>
         <SelectWrapper>
           <Label>{t("Time Zone")}</Label>

web/src/beta/components/fields/DateTimeField/index.tsx

@@ -15,14 +15,36 @@ export type Props = {
   name?: string;
   description?: string;
   value?: string;
+  disableField?: boolean;
+  fieldName?: string;
   onChange?: (value?: string | undefined) => void;
+  onPopoverOpen?: (fieldId?: string) => void;
+  setDisabledFields?: (value: string[]) => void;
 };
 
-const DateTimeField: React.FC<Props> = ({ name, description, value, onChange }) => {
+const DateTimeField: React.FC<Props> = ({
+  name,
+  description,
+  value,
+  disableField,
+  fieldName,
+  onChange,
+  onPopoverOpen,
+  setDisabledFields,
+}) => {
   const [open, setOpen] = useState(false);
   const t = useT();
 
-  const handlePopOver = useCallback(() => setOpen(!open), [open]);
+  const handlePopOver = useCallback(() => {
+    if (disableField) {
+      setOpen(false);
+    } else {
+      onPopoverOpen?.(fieldName);
+      setOpen(!open);
+    }
+    if (open) setDisabledFields?.([]);
+  }, [disableField, open, onPopoverOpen, setDisabledFields, fieldName]);
+
   const handleRemoveSetting = useCallback(() => {
     if (!value) return;
     setDateTime("");
@@ -76,7 +98,6 @@ export default DateTimeField;
 const InputWrapper = styled.div<{ disabled?: boolean }>`
   display: flex;
   width: 100%;
-  gap: 10px;
   flex-wrap: wrap;
 `;
 
@@ -105,7 +126,7 @@ const StyledText = styled(Text)`
 `;
 
 const TriggerButton = styled(Button)`
-  margin: 0;
+  margin-left: 10px;
 `;
 
 const DeleteIcon = styled(Icon)<{ disabled?: boolean }>`

web/src/beta/components/fields/TimelineField/EditPanel/hooks.ts

@@ -58,6 +58,25 @@ export default ({ timelineValues, onChange, onClose, setTimelineValues }: Props)
     [timelineValues, setTimelineValues],
   );
 
+  const [disabledFields, setDisabledFields] = useState<string[]>([]);
+
+  const handlePopoverOpen = useCallback((fieldId?: string) => {
+    switch (fieldId) {
+      case "startTime":
+        setDisabledFields(["endTime", "currentTime"]);
+        break;
+      case "endTime":
+        setDisabledFields(["startTime", "currentTime"]);
+        break;
+      case "currentTime":
+        setDisabledFields(["startTime", "endTime"]);
+        break;
+      default:
+        setDisabledFields([]);
+        break;
+    }
+  }, []);
+
   const handleApplyChange = useCallback(() => {
     if (
       timelineValues?.currentTime !== "" &&
@@ -79,7 +98,10 @@ export default ({ timelineValues, onChange, onClose, setTimelineValues }: Props)
   return {
     warning,
     isDisabled,
+    disabledFields,
+    setDisabledFields,
     handleOnChange,
+    handlePopoverOpen,
     onAppyChange: handleApplyChange,
   };
 };

web/src/beta/components/fields/TimelineField/EditPanel/index.tsx

@@ -1,6 +1,9 @@
+import { useMemo } from "react";
+
 import Button from "@reearth/beta/components/Button";
 import Icon from "@reearth/beta/components/Icon";
 import Modal from "@reearth/beta/components/Modal";
+import { getTimeZone } from "@reearth/beta/lib/core/StoryPanel/utils";
 import { useT } from "@reearth/services/i18n";
 import { styled } from "@reearth/services/theme";
 
@@ -25,13 +28,33 @@ const EditPanel = ({
   onChange,
 }: EditPanelProps) => {
   const t = useT();
-  const { isDisabled, warning, handleOnChange, onAppyChange } = useHooks({
+  const {
+    isDisabled,
+    warning,
+    disabledFields,
+    setDisabledFields,
+    handleOnChange,
+    onAppyChange,
+    handlePopoverOpen,
+  } = useHooks({
     timelineValues,
     onChange,
     onClose,
     setTimelineValues,
   });
 
+  const timezoneMatches = useMemo(() => {
+    if (!timelineValues) return false;
+
+    const startTimezone = getTimeZone(timelineValues?.startTime);
+    const currentTimezone = getTimeZone(timelineValues?.currentTime);
+    const endTimezone = getTimeZone(timelineValues?.endTime);
+
+    const areTimezonesEqual = startTimezone === currentTimezone && currentTimezone === endTimezone;
+
+    return areTimezonesEqual;
+  }, [timelineValues]);
+
   return (
     <Modal
       isVisible={isVisible}
@@ -42,7 +65,7 @@ const EditPanel = ({
         <Button
           text={t("Apply")}
           buttonType="primary"
-          disabled={!isDisabled || warning}
+          disabled={!isDisabled || warning || !timezoneMatches}
           onClick={onAppyChange}
         />
       }>
@@ -52,18 +75,30 @@ const EditPanel = ({
           description={t("Start time for the timeline")}
           onChange={newValue => handleOnChange(newValue || "", "startTime")}
           value={timelineValues?.startTime}
+          fieldName={"startTime"}
+          disableField={disabledFields.includes("startTime")}
+          setDisabledFields={setDisabledFields}
+          onPopoverOpen={handlePopoverOpen}
         />
         <CustomDateTimeField
           name={t("* Current Time")}
           description={t("Current time should be between start and end time")}
           onChange={newValue => handleOnChange(newValue || "", "currentTime")}
           value={timelineValues?.currentTime}
+          disableField={disabledFields.includes("currentTime")}
+          fieldName={"currentTime"}
+          setDisabledFields={setDisabledFields}
+          onPopoverOpen={handlePopoverOpen}
         />
         <CustomDateTimeField
           name={t("* End Time")}
           onChange={newValue => handleOnChange(newValue || "", "endTime")}
           description={t("End time for the timeline")}
           value={timelineValues?.endTime}
+          fieldName={"endTime"}
+          disableField={disabledFields.includes("endTime")}
+          setDisabledFields={setDisabledFields}
+          onPopoverOpen={handlePopoverOpen}
         />
         {warning && (
           <DangerItem>

web/src/beta/components/fields/TimelineField/index.tsx

@@ -49,13 +49,13 @@ const TimelineField: React.FC<Props> = ({ name, description, value, onChange })
           <Input dataTimeSet={!!timelineValues}>
             <Timeline>
               <TextWrapper size="footnote" customColor>
-                {timelineValues?.startTime ?? t("not set")}
+                {timelineValues?.startTime ? timelineValues?.startTime : t("not set")}
               </TextWrapper>
               <TextWrapper size="footnote" customColor>
-                {timelineValues?.currentTime ?? t("not set")}
+                {timelineValues?.currentTime ? timelineValues?.currentTime : t("not set")}
               </TextWrapper>
               <TextWrapper size="footnote" customColor>
-                {timelineValues?.endTime ?? t("not set")}
+                {timelineValues?.endTime ? timelineValues?.endTime : t("not set")}
               </TextWrapper>
             </Timeline>
             <DeleteIcon
@@ -154,7 +154,7 @@ const TextWrapper = styled(Text)`
     background: ${({ theme }) => theme.content.main};
     border: 1px solid ${({ theme }) => theme.outline.main};
   }
-  &:nth-child(2) {
+  &:nth-of-type(2) {
     ::after {
       background: transparent;
       border: 1px solid ${({ theme }) => theme.outline.main};

web/src/beta/components/fields/common/TextInput/index.tsx

@@ -8,6 +8,7 @@ export type Props = {
   placeholder?: string;
   autoFocus?: boolean;
   type?: HTMLInputTypeAttribute;
+  step?: number;
   onChange?: (text: string) => void;
   onBlur?: () => void;
   onExit?: (e: React.KeyboardEvent<HTMLInputElement>) => void;
@@ -19,6 +20,7 @@ const TextInput: React.FC<Props> = ({
   value,
   placeholder,
   autoFocus,
+  step,
   onChange,
   onBlur,
   onExit,
@@ -68,6 +70,7 @@ const TextInput: React.FC<Props> = ({
       onBlur={handleBlur}
       onKeyUp={handleExit}
       disabled={!!disabled}
+      step={step}
     />
   );
 };

web/src/beta/lib/core/StoryPanel/Block/builtin/Timeline/Editor.tsx

@@ -39,6 +39,7 @@ const TimelineEditor = ({
     range,
     playSpeedOptions,
     speed,
+    timezone,
     onPlay,
     onSpeedChange,
     onPause,
@@ -81,6 +82,7 @@ const TimelineEditor = ({
     playMode,
     padding,
     property,
+    timezone,
     onPlay,
     onSpeedChange,
     onPause,
@@ -144,7 +146,7 @@ const TimelineEditor = ({
             </Popover.Provider>
           </PopoverWrapper>
         </TimelineControl>
-        <CurrentTime isMinimized={isMinimized}>{currentTime && formattedCurrentTime}</CurrentTime>
+        <CurrentTime isMinimized={isMinimized}>{!!currentTime && formattedCurrentTime}</CurrentTime>
       </TimelineWrapper>
       <TimelineSlider>
         <ScaleList

web/src/beta/lib/core/StoryPanel/Block/builtin/Timeline/hook.ts

@@ -39,6 +39,7 @@ type TimelineProps = {
   timelineValues?: TimelineValues;
   padding?: PaddingProp;
   property?: any;
+  timezone?: string;
   onPlay?: (committer: TimelineCommitter) => void;
   onSpeedChange?: (speed: number, committerId?: string) => void;
   onPause: (committerId: string) => void;
@@ -63,6 +64,7 @@ export default ({
   timelineValues,
   padding,
   property,
+  timezone,
   onPlay,
   onSpeedChange,
   onPause,
@@ -87,28 +89,33 @@ export default ({
 
   const [isOpen, setIsOpen] = useState(false);
 
-  const [selected, setSelected] = useState("1min/sec");
+  const [selected, setSelected] = useState("1sec/sec");
   const formattedCurrentTime = useMemo(() => {
-    const textDate = formatDateForTimeline(currentTime, { detail: true });
+    const textDate = formatDateForTimeline(currentTime, { detail: true }, timezone);
+
     return textDate;
-  }, [currentTime]);
+  }, [currentTime, timezone]);
 
   const current = formatRangeDateAndTime(
-    formatDateForSliderTimeline(currentTime, { detail: true }),
+    formatDateForSliderTimeline(currentTime, { detail: true }, timezone),
   );
 
   const timeRange = useMemo(() => {
     if (range) {
       return {
         startTime: formatRangeDateAndTime(
-          formatDateForSliderTimeline(range.start, { detail: true }),
+          formatDateForSliderTimeline(range.start, { detail: true }, timezone),
+        ),
+        midTime: formatRangeDateAndTime(
+          formatDateForSliderTimeline(range.mid, { detail: true }, timezone),
+        ),
+        endTime: formatRangeDateAndTime(
+          formatDateForSliderTimeline(range.end, { detail: true }, timezone),
         ),
-        midTime: formatRangeDateAndTime(formatDateForSliderTimeline(range.mid, { detail: true })),
-        endTime: formatRangeDateAndTime(formatDateForSliderTimeline(range.end, { detail: true })),
       };
     }
     return {};
-  }, [range]);
+  }, [range, timezone]);
 
   const panelSettings = useMemo(() => {
     if (!property?.panel) return undefined;

web/src/beta/lib/core/StoryPanel/hooks.ts

@@ -6,6 +6,7 @@ import { MapRef } from "../Crust/types";
 import { useVisualizer } from "../Visualizer";
 
 import { DEFAULT_STORY_PAGE_DURATION, STORY_PANEL_CONTENT_ELEMENT_ID } from "./constants";
+import { formatISO8601 } from "./utils";
 
 export type { Story, StoryPage } from "@reearth/beta/lib/core/StoryPanel/types";
 
@@ -99,12 +100,8 @@ export default (
   const handlePageTime = useCallback(
     (page: StoryPage) => {
       const timePointField = page.property?.timePoint;
-      const currentTime = timePointField?.timePoint?.value;
-      if (!currentTime) onTimeChange?.(new Date());
-      else {
-        const getNewDate = new Date(currentTime.substring(0, 19)).getTime();
-        return onTimeChange?.(new Date(getNewDate));
-      }
+      if (!timePointField?.timePoint?.value) return;
+      return onTimeChange?.(new Date(formatISO8601(timePointField?.timePoint?.value) ?? ""));
     },
     [onTimeChange],
   );