refactor packages

apps/web/src/components/report/ReportChartType.tsx

@@ -1,8 +1,9 @@
 import { useDispatch, useSelector } from '@/redux';
-import { chartTypes } from '@/utils/constants';
-import { objectToZodEnums } from '@/utils/validation';
 import { LineChartIcon } from 'lucide-react';
 
+import { chartTypes } from '@mixan/constants';
+import { objectToZodEnums } from '@mixan/validation';
+
 import { Combobox } from '../ui/combobox';
 import { changeChartType } from './reportSlice';
 

apps/web/src/components/report/ReportInterval.tsx

@@ -1,10 +1,11 @@
 import { useDispatch, useSelector } from '@/redux';
-import type { IInterval } from '@/types';
+import { ClockIcon } from 'lucide-react';
+
 import {
   isHourIntervalEnabledByRange,
   isMinuteIntervalEnabledByRange,
-} from '@/utils/constants';
-import { ClockIcon } from 'lucide-react';
+} from '@mixan/constants';
+import type { IInterval } from '@mixan/validation';
 
 import { Combobox } from '../ui/combobox';
 import { changeInterval } from './reportSlice';
@@ -32,7 +33,7 @@ export function ReportInterval({ className }: ReportIntervalProps) {
       className={className}
       placeholder="Interval"
       onChange={(value) => {
-        dispatch(changeInterval(value as IInterval));
+        dispatch(changeInterval(value));
       }}
       value={interval}
       items={[

apps/web/src/components/report/ReportLineType.tsx

@@ -1,8 +1,9 @@
 import { useDispatch, useSelector } from '@/redux';
-import { lineTypes } from '@/utils/constants';
-import { objectToZodEnums } from '@/utils/validation';
 import { Tv2Icon } from 'lucide-react';
 
+import { lineTypes } from '@mixan/constants';
+import { objectToZodEnums } from '@mixan/validation';
+
 import { Combobox } from '../ui/combobox';
 import { changeLineType } from './reportSlice';
 

apps/web/src/components/report/ReportRange.tsx

@@ -1,7 +1,8 @@
-import type { IChartRange } from '@/types';
-import { timeRanges } from '@/utils/constants';
 import { CalendarIcon } from 'lucide-react';
 
+import { timeRanges } from '@mixan/constants';
+import type { IChartRange } from '@mixan/validation';
+
 import type { ExtendedComboboxProps } from '../ui/combobox';
 import { Combobox } from '../ui/combobox';
 

apps/web/src/components/report/chart/ChartProvider.tsx

@@ -10,7 +10,8 @@ import {
   useState,
 } from 'react';
 import type { IChartSerie } from '@/server/api/routers/chart';
-import type { IChartInput } from '@/types';
+
+import type { IChartInput } from '@mixan/validation';
 
 import { ChartLoading } from './ChartLoading';
 import { MetricCardLoading } from './MetricCard';

apps/web/src/components/report/chart/MetricCard.tsx

@@ -3,11 +3,12 @@
 import type { IChartData } from '@/app/_trpc/client';
 import { ColorSquare } from '@/components/ColorSquare';
 import { useNumber } from '@/hooks/useNumerFormatter';
-import type { IChartMetric } from '@/types';
 import { theme } from '@/utils/theme';
 import AutoSizer from 'react-virtualized-auto-sizer';
 import { Area, AreaChart } from 'recharts';
 
+import type { IChartMetric } from '@mixan/validation';
+
 import { PreviousDiffIndicator } from '../PreviousDiffIndicator';
 
 interface MetricCardProps {

apps/web/src/components/report/chart/ReportAreaChart.tsx

@@ -4,7 +4,6 @@ import { AutoSizer } from '@/components/AutoSizer';
 import { useFormatDateInterval } from '@/hooks/useFormatDateInterval';
 import { useRechartDataModel } from '@/hooks/useRechartDataModel';
 import { useVisibleSeries } from '@/hooks/useVisibleSeries';
-import type { IChartLineType, IInterval } from '@/types';
 import { cn } from '@/utils/cn';
 import { getChartColor } from '@/utils/theme';
 import {
@@ -16,6 +15,8 @@ import {
   YAxis,
 } from 'recharts';
 
+import type { IChartLineType, IInterval } from '@mixan/validation';
+
 import { getYAxisWidth } from './chart-utils';
 import { useChartContext } from './ChartProvider';
 import { ReportChartTooltip } from './ReportChartTooltip';

apps/web/src/components/report/chart/ReportBarChart.tsx

@@ -5,9 +5,10 @@ import type { IChartData } from '@/app/_trpc/client';
 import { Progress } from '@/components/ui/progress';
 import { useNumber } from '@/hooks/useNumerFormatter';
 import { cn } from '@/utils/cn';
-import { NOT_SET_VALUE } from '@/utils/constants';
 import { getChartColor } from '@/utils/theme';
 
+import { NOT_SET_VALUE } from '@mixan/constants';
+
 import { PreviousDiffIndicator } from '../PreviousDiffIndicator';
 import { useChartContext } from './ChartProvider';
 import { SerieIcon } from './SerieIcon';

apps/web/src/components/report/chart/ReportChartTooltip.tsx

@@ -3,7 +3,6 @@ import { useFormatDateInterval } from '@/hooks/useFormatDateInterval';
 import { useMappings } from '@/hooks/useMappings';
 import { useNumber } from '@/hooks/useNumerFormatter';
 import type { IRechartPayloadItem } from '@/hooks/useRechartDataModel';
-import { useSelector } from '@/redux';
 import type { IToolTipProps } from '@/types';
 
 import { PreviousDiffIndicator } from '../PreviousDiffIndicator';

apps/web/src/components/report/chart/ReportHistogramChart.tsx

@@ -4,11 +4,12 @@ import { AutoSizer } from '@/components/AutoSizer';
 import { useFormatDateInterval } from '@/hooks/useFormatDateInterval';
 import { useRechartDataModel } from '@/hooks/useRechartDataModel';
 import { useVisibleSeries } from '@/hooks/useVisibleSeries';
-import type { IInterval } from '@/types';
 import { cn } from '@/utils/cn';
 import { getChartColor, theme } from '@/utils/theme';
 import { Bar, BarChart, CartesianGrid, Tooltip, XAxis, YAxis } from 'recharts';
 
+import type { IInterval } from '@mixan/validation';
+
 import { getYAxisWidth } from './chart-utils';
 import { useChartContext } from './ChartProvider';
 import { ReportChartTooltip } from './ReportChartTooltip';

apps/web/src/components/report/chart/ReportLineChart.tsx

@@ -6,7 +6,6 @@ import { AutoSizer } from '@/components/AutoSizer';
 import { useFormatDateInterval } from '@/hooks/useFormatDateInterval';
 import { useRechartDataModel } from '@/hooks/useRechartDataModel';
 import { useVisibleSeries } from '@/hooks/useVisibleSeries';
-import type { IChartLineType, IInterval } from '@/types';
 import { cn } from '@/utils/cn';
 import { getChartColor } from '@/utils/theme';
 import {
@@ -18,6 +17,8 @@ import {
   YAxis,
 } from 'recharts';
 
+import type { IChartLineType, IInterval } from '@mixan/validation';
+
 import { getYAxisWidth } from './chart-utils';
 import { useChartContext } from './ChartProvider';
 import { ReportChartTooltip } from './ReportChartTooltip';

apps/web/src/components/report/chart/SerieIcon.tsx

@@ -1,5 +1,4 @@
 import { useMemo } from 'react';
-import { NOT_SET_VALUE } from '@/utils/constants';
 import type { LucideIcon, LucideProps } from 'lucide-react';
 import {
   ActivityIcon,
@@ -15,6 +14,8 @@ import {
   TabletIcon,
 } from 'lucide-react';
 
+import { NOT_SET_VALUE } from '@mixan/constants';
+
 interface SerieIconProps extends LucideProps {
   name: string;
 }

apps/web/src/components/report/chart/index.tsx

@@ -3,7 +3,8 @@
 import { memo, useEffect, useState } from 'react';
 import type { RouterOutputs } from '@/app/_trpc/client';
 import { api } from '@/app/_trpc/client';
-import type { IChartInput } from '@/types';
+
+import type { IChartInput } from '@mixan/validation';
 
 import { ChartEmpty } from './ChartEmpty';
 import { ChartLoading } from './ChartLoading';

apps/web/src/components/report/reportSlice.ts

@@ -1,3 +1,12 @@
+import { createSlice } from '@reduxjs/toolkit';
+import type { PayloadAction } from '@reduxjs/toolkit';
+
+import {
+  alphabetIds,
+  getDefaultIntervalByRange,
+  isHourIntervalEnabledByRange,
+  isMinuteIntervalEnabledByRange,
+} from '@mixan/constants';
 import type {
   IChartBreakdown,
   IChartEvent,
@@ -6,15 +15,7 @@ import type {
   IChartRange,
   IChartType,
   IInterval,
-} from '@/types';
-import {
-  alphabetIds,
-  getDefaultIntervalByRange,
-  isHourIntervalEnabledByRange,
-  isMinuteIntervalEnabledByRange,
-} from '@/utils/constants';
-import { createSlice } from '@reduxjs/toolkit';
-import type { PayloadAction } from '@reduxjs/toolkit';
+} from '@mixan/validation';
 
 type InitialState = IChartInput & {
   dirty: boolean;

apps/web/src/components/report/sidebar/EventPropertiesCombobox.tsx

@@ -2,10 +2,11 @@ import { api } from '@/app/_trpc/client';
 import { Combobox } from '@/components/ui/combobox';
 import { useAppParams } from '@/hooks/useAppParams';
 import { useDispatch } from '@/redux';
-import type { IChartEvent } from '@/types';
 import { cn } from '@/utils/cn';
 import { DatabaseIcon } from 'lucide-react';
 
+import type { IChartEvent } from '@mixan/validation';
+
 import { changeEvent } from '../reportSlice';
 
 interface EventPropertiesComboboxProps {

apps/web/src/components/report/sidebar/ReportBreakdowns.tsx

@@ -5,9 +5,10 @@ import { ColorSquare } from '@/components/ColorSquare';
 import { Combobox } from '@/components/ui/combobox';
 import { useAppParams } from '@/hooks/useAppParams';
 import { useDispatch, useSelector } from '@/redux';
-import type { IChartBreakdown } from '@/types';
 import { SplitIcon } from 'lucide-react';
 
+import type { IChartBreakdown } from '@mixan/validation';
+
 import { addBreakdown, changeBreakdown, removeBreakdown } from '../reportSlice';
 import { ReportBreakdownMore } from './ReportBreakdownMore';
 import type { ReportEventMoreProps } from './ReportEventMore';

apps/web/src/components/report/sidebar/ReportEvents.tsx

@@ -1,6 +1,5 @@
 'use client';
 
-import { api } from '@/app/_trpc/client';
 import { ColorSquare } from '@/components/ColorSquare';
 import { Dropdown } from '@/components/Dropdown';
 import { Checkbox } from '@/components/ui/checkbox';
@@ -8,10 +7,12 @@ import { Combobox } from '@/components/ui/combobox';
 import { Input } from '@/components/ui/input';
 import { useAppParams } from '@/hooks/useAppParams';
 import { useDebounceFn } from '@/hooks/useDebounceFn';
+import { useEventNames } from '@/hooks/useEventNames';
 import { useDispatch, useSelector } from '@/redux';
-import type { IChartEvent } from '@/types';
 import { GanttChart, GanttChartIcon, Users } from 'lucide-react';
 
+import type { IChartEvent } from '@mixan/validation';
+
 import {
   addEvent,
   changeEvent,
@@ -29,14 +30,8 @@ export function ReportEvents() {
   const selectedEvents = useSelector((state) => state.report.events);
   const dispatch = useDispatch();
   const { projectId } = useAppParams();
+  const eventNames = useEventNames(projectId);
 
-  const eventsQuery = api.chart.events.useQuery({
-    projectId,
-  });
-  const eventsCombobox = (eventsQuery.data ?? []).map((item) => ({
-    value: item.name,
-    label: item.name,
-  }));
   const dispatchChangeEvent = useDebounceFn((event: IChartEvent) => {
     dispatch(changeEvent(event));
   });
@@ -76,7 +71,10 @@ export function ReportEvents() {
                       })
                     );
                   }}
-                  items={eventsCombobox}
+                  items={eventNames.map((item) => ({
+                    label: item.name,
+                    value: item.name,
+                  }))}
                   placeholder="Select event"
                 />
                 <Input
@@ -189,7 +187,10 @@ export function ReportEvents() {
               })
             );
           }}
-          items={eventsCombobox}
+          items={eventNames.map((item) => ({
+            label: item.name,
+            value: item.name,
+          }))}
           placeholder="Select event"
         />
       </div>

apps/web/src/components/report/sidebar/filters/FilterItem.tsx

@@ -7,13 +7,15 @@ import { RenderDots } from '@/components/ui/RenderDots';
 import { useAppParams } from '@/hooks/useAppParams';
 import { useMappings } from '@/hooks/useMappings';
 import { useDispatch } from '@/redux';
+import { SlidersHorizontal, Trash } from 'lucide-react';
+
+import { operators } from '@mixan/constants';
 import type {
   IChartEvent,
-  IChartEventFilter,
+  IChartEventFilterOperator,
   IChartEventFilterValue,
-} from '@/types';
-import { operators } from '@/utils/constants';
-import { SlidersHorizontal, Trash } from 'lucide-react';
+} from '@mixan/validation';
+import { mapKeys } from '@mixan/validation';
 
 import { changeEvent } from '../../reportSlice';
 
@@ -67,7 +69,7 @@ export function FilterItem({ filter, event }: FilterProps) {
     );
   };
 
-  const changeFilterOperator = (operator: IChartEventFilter['operator']) => {
+  const changeFilterOperator = (operator: IChartEventFilterOperator) => {
     dispatch(
       changeEvent({
         ...event,
@@ -104,9 +106,9 @@ export function FilterItem({ filter, event }: FilterProps) {
       <div className="flex gap-1">
         <Dropdown
           onChange={changeFilterOperator}
-          items={Object.entries(operators).map(([key, value]) => ({
-            value: key as IChartEventFilter['operator'],
-            label: value,
+          items={mapKeys(operators).map((key) => ({
+            value: key,
+            label: operators[key],
           }))}
           label="Operator"
         >

apps/web/src/components/report/sidebar/filters/FiltersCombobox.tsx

@@ -2,9 +2,10 @@ import { api } from '@/app/_trpc/client';
 import { Combobox } from '@/components/ui/combobox';
 import { useAppParams } from '@/hooks/useAppParams';
 import { useDispatch } from '@/redux';
-import type { IChartEvent } from '@/types';
 import { FilterIcon } from 'lucide-react';
 
+import type { IChartEvent } from '@mixan/validation';
+
 import { changeEvent } from '../../reportSlice';
 
 interface FiltersComboboxProps {

apps/web/src/components/report/sidebar/filters/FiltersList.tsx

@@ -1,4 +1,4 @@
-import type { IChartEvent } from '@/types';
+import type { IChartEvent } from '@mixan/validation';
 
 import { FilterItem } from './FilterItem';