refactor: remove unused timeline component and move the timeline comp…

…onent

package.json

@@ -219,5 +219,6 @@
   },
   "msw": {
     "workerDirectory": "public"
-  }
+  },
+  "packageManager": "[email protected]+sha512.a6b2f7906b721bba3d67d4aff083df04dad64c399707841b7acf00f6b133b7ac24255f2652fa22ae3534329dc6180534e98d17432037ff6fd140556e2bb3137e"
 }

src/api/query-hooks/useConfigChangesHooks.ts

@@ -1,7 +1,7 @@
 import { configChangesDefaultDateFilter } from "@flanksource-ui/components/Configs/Changes/ConfigChangesFilters/ConfigChangesDateRangeFIlter";
 import { useHideDeletedConfigChanges } from "@flanksource-ui/components/Configs/Changes/ConfigsRelatedChanges/FilterBar/ConfigChangesToggledDeletedItems";
 import { useConfigChangesArbitraryFilters } from "@flanksource-ui/hooks/useConfigChangesArbitraryFilters";
-import useTimeRangeParams from "@flanksource-ui/ui/TimeRangePicker/useTimeRangeParams";
+import useTimeRangeParams from "@flanksource-ui/ui/Dates/TimeRangePicker/useTimeRangeParams";
 import { UseQueryOptions, useQuery } from "@tanstack/react-query";
 import { useMemo } from "react";
 import { useParams, useSearchParams } from "react-router-dom";

src/api/query-hooks/useJobsHistoryQuery.ts

@@ -2,7 +2,7 @@ import { durationOptions } from "@flanksource-ui/components/JobsHistory/Filters/
 import { jobHistoryDefaultDateFilter } from "@flanksource-ui/components/JobsHistory/Filters/JobsHistoryFilters";
 import { JobHistory } from "@flanksource-ui/components/JobsHistory/JobsHistoryTable";
 import { resourceTypeMap } from "@flanksource-ui/components/SchemaResourcePage/SchemaResourceEditJobsTab";
-import useTimeRangeParams from "@flanksource-ui/ui/TimeRangePicker/useTimeRangeParams";
+import useTimeRangeParams from "@flanksource-ui/ui/Dates/TimeRangePicker/useTimeRangeParams";
 import { useQuery, UseQueryOptions } from "@tanstack/react-query";
 import { useMemo } from "react";
 import { useSearchParams } from "react-router-dom";

src/components/Configs/Changes/ConfigChangesFilters/ConfigChangesDateRangeFIlter.tsx

@@ -1,5 +1,5 @@
-import { TimeRangePicker } from "@flanksource-ui/ui/TimeRangePicker";
-import useTimeRangeParams from "@flanksource-ui/ui/TimeRangePicker/useTimeRangeParams";
+import { TimeRangePicker } from "@flanksource-ui/ui/Dates/TimeRangePicker";
+import useTimeRangeParams from "@flanksource-ui/ui/Dates/TimeRangePicker/useTimeRangeParams";
 import { URLSearchParamsInit } from "react-router-dom";
 
 type Props = {

src/components/Forms/Formik/FormikDurationPicker.tsx

@@ -1,8 +1,8 @@
 import {
   rangeOptionsCategories,
   TimeRangeOption
-} from "@flanksource-ui/ui/TimeRangePicker/rangeOptions";
-import { TimeRangePicker } from "@flanksource-ui/ui/TimeRangePicker/TimeRangePicker";
+} from "@flanksource-ui/ui/Dates/TimeRangePicker/rangeOptions";
+import { TimeRangePicker } from "@flanksource-ui/ui/Dates/TimeRangePicker/TimeRangePicker";
 import dayjs from "dayjs";
 import { useFormikContext } from "formik";
 import { useMemo } from "react";

src/components/JobsHistory/Filters/JobsHistoryFilters.tsx

@@ -1,6 +1,6 @@
 import FormikFilterForm from "@flanksource-ui/components/Forms/FormikFilterForm";
-import { TimeRangePicker } from "@flanksource-ui/ui/TimeRangePicker";
-import useTimeRangeParams from "@flanksource-ui/ui/TimeRangePicker/useTimeRangeParams";
+import { TimeRangePicker } from "@flanksource-ui/ui/Dates/TimeRangePicker";
+import useTimeRangeParams from "@flanksource-ui/ui/Dates/TimeRangePicker/useTimeRangeParams";
 import { URLSearchParamsInit } from "react-router-dom";
 import JobHistoryDurationDropdown from "./JobHistoryDurationDropdown";
 import JobHistoryNamesDropdown from "./JobHistoryNames";

src/components/Playbooks/Runs/Filter/PlaybookRunsFilterBar.tsx

@@ -3,8 +3,8 @@ import FormikFilterForm from "@flanksource-ui/components/Forms/FormikFilterForm"
 import { AuthorizationAccessCheck } from "@flanksource-ui/components/Permissions/AuthorizationAccessCheck";
 import { tables } from "@flanksource-ui/context/UserAccessContext/permissions";
 import { Button } from "@flanksource-ui/ui/Buttons/Button";
-import { TimeRangePicker } from "@flanksource-ui/ui/TimeRangePicker";
-import useTimeRangeParams from "@flanksource-ui/ui/TimeRangePicker/useTimeRangeParams";
+import { TimeRangePicker } from "@flanksource-ui/ui/Dates/TimeRangePicker";
+import useTimeRangeParams from "@flanksource-ui/ui/Dates/TimeRangePicker/useTimeRangeParams";
 import { useState } from "react";
 import { FaEdit } from "react-icons/fa";
 import { URLSearchParamsInit } from "react-router-dom";

src/pages/playbooks/PlaybookRunsPage.tsx

@@ -12,9 +12,9 @@ import {
   BreadcrumbNav,
   BreadcrumbRoot
 } from "@flanksource-ui/ui/BreadcrumbNav";
+import useTimeRangeParams from "@flanksource-ui/ui/Dates/TimeRangePicker/useTimeRangeParams";
 import { Head } from "@flanksource-ui/ui/Head";
 import TabbedLinks from "@flanksource-ui/ui/Tabs/TabbedLinks";
-import useTimeRangeParams from "@flanksource-ui/ui/TimeRangePicker/useTimeRangeParams";
 import { useQuery } from "@tanstack/react-query";
 import { useMemo, useState } from "react";
 import { FaHome } from "react-icons/fa";

src/ui/TimeRangePicker/RecentlyRanges.tsx → src/ui/Dates/TimeRangePicker/RecentlyRanges.tsx

@@ -1,4 +1,4 @@
-import { formatTimeRange } from "../../utils/date";
+import { formatTimeRange } from "../../../utils/date";
 import { TimeRangeAbsoluteOption, TimeRangeOption } from "./rangeOptions";
 
 type RecentlyRangesProps = {

src/ui/TimeRangePicker/TimeRangePicker.stories.tsx → src/ui/Dates/TimeRangePicker/TimeRangePicker.stories.tsx

@@ -1,12 +1,22 @@
 import { ComponentMeta, ComponentStory } from "@storybook/react";
+import { useState } from "react";
 import { TimeRangePicker } from "./index";
 import { TimeRangeOption } from "./rangeOptions";
 
 const TimeRangePickerContainer = () => {
+  const [value, setValue] = useState<TimeRangeOption | undefined>();
+
   const onChange = (range: TimeRangeOption) => {
     console.log("range", range);
+    setValue(range);
   };
-  return <TimeRangePicker style={{ width: "450px" }} onChange={onChange} />;
+  return (
+    <TimeRangePicker
+      style={{ width: "450px" }}
+      onChange={onChange}
+      value={value}
+    />
+  );
 };
 
 export default {

src/ui/TimeRangePicker/TimeRangePickerBody.tsx → src/ui/Dates/TimeRangePicker/TimeRangePickerBody.tsx

@@ -3,7 +3,7 @@ import { useAtom } from "jotai";
 import { atomWithStorage } from "jotai/utils";
 import { useCallback, useEffect, useState } from "react";
 import { useSearchParams } from "react-router-dom";
-import { formatTimeRange, isValidDate } from "../../utils/date";
+import { formatTimeRange, isValidDate } from "../../../utils/date";
 import { RecentlyRanges } from "./RecentlyRanges";
 import { TimePickerCalendar } from "./TimePickerCalendar";
 import { TimePickerInput } from "./TimePickerInput";

src/ui/TimeRangePicker/helpers.ts → src/ui/Dates/TimeRangePicker/helpers.ts

@@ -4,8 +4,8 @@ import {
   formatISODate,
   isValidDate,
   subtractDateFromNow
-} from "../../utils/date";
-import { getLocalItem, setLocalItem } from "../../utils/storage";
+} from "../../../utils/date";
+import { getLocalItem, setLocalItem } from "../../../utils/storage";
 
 export const getIntervalData = (interval: string): [number, string] => {
   if (interval === "now") {