-
Home
+
{params.project && (
-
+
+ Home
+
+ )}
+ {params.project && (
+
Events
)}
{params.project && (
-
+
Profiles
)}
-
+ {params.project && (
+
+ Create report
+
+ )}
+
);
}
diff --git a/apps/web/src/components/navbar/NavbarUserDropdown.tsx b/apps/web/src/components/navbar/NavbarUserDropdown.tsx
index a9eca765..ec72e2d2 100644
--- a/apps/web/src/components/navbar/NavbarUserDropdown.tsx
+++ b/apps/web/src/components/navbar/NavbarUserDropdown.tsx
@@ -27,25 +27,28 @@ export function NavbarUserDropdown() {
-
+
Organization
-
+
Projects
-
+
Clients
-
+
Profile
diff --git a/apps/web/src/components/report/ReportChartType.tsx b/apps/web/src/components/report/ReportChartType.tsx
index 7ffadbfd..2e3a632f 100644
--- a/apps/web/src/components/report/ReportChartType.tsx
+++ b/apps/web/src/components/report/ReportChartType.tsx
@@ -3,32 +3,23 @@ import type { IChartType } from '@/types';
import { chartTypes } from '@/utils/constants';
import { Combobox } from '../ui/combobox';
-import { RadioGroup, RadioGroupItem } from '../ui/radio-group';
-import {
- changeChartType,
- changeDateRanges,
- changeInterval,
-} from './reportSlice';
+import { changeChartType } from './reportSlice';
export function ReportChartType() {
const dispatch = useDispatch();
const type = useSelector((state) => state.report.chartType);
return (
- <>
-
- {
- dispatch(changeChartType(value as IChartType));
- }}
- value={type}
- items={Object.entries(chartTypes).map(([key, value]) => ({
- label: value,
- value: key,
- }))}
- />
-
-
+ {
+ dispatch(changeChartType(value as IChartType));
+ }}
+ value={type}
+ items={Object.entries(chartTypes).map(([key, value]) => ({
+ label: value,
+ value: key,
+ }))}
+ />
);
}
diff --git a/apps/web/src/components/report/ReportDateRange.tsx b/apps/web/src/components/report/ReportDateRange.tsx
index 05f1cc9d..29f0c56b 100644
--- a/apps/web/src/components/report/ReportDateRange.tsx
+++ b/apps/web/src/components/report/ReportDateRange.tsx
@@ -1,49 +1,28 @@
import { useDispatch, useSelector } from '@/redux';
-import type { IInterval } from '@/types';
-import { intervals, timeRanges } from '@/utils/constants';
+import { timeRanges } from '@/utils/constants';
-import { Combobox } from '../ui/combobox';
import { RadioGroup, RadioGroupItem } from '../ui/radio-group';
-import { changeDateRanges, changeInterval } from './reportSlice';
+import { changeDateRanges } from './reportSlice';
export function ReportDateRange() {
const dispatch = useDispatch();
const range = useSelector((state) => state.report.range);
- const interval = useSelector((state) => state.report.interval);
- const chartType = useSelector((state) => state.report.chartType);
return (
- <>
-
- {timeRanges.map((item) => {
- return (
- {
- dispatch(changeDateRanges(item.range));
- }}
- >
- {item.title}
-
- );
- })}
-
- {chartType === 'linear' && (
-
- {
- dispatch(changeInterval(value as IInterval));
+
+ {timeRanges.map((item) => {
+ return (
+ {
+ dispatch(changeDateRanges(item.range));
}}
- value={interval}
- items={Object.entries(intervals).map(([key, value]) => ({
- label: value,
- value: key,
- }))}
- />
-
- )}
-
+ >
+ {item.title}
+
+ );
+ })}
+
);
}
diff --git a/apps/web/src/components/report/ReportInterval.tsx b/apps/web/src/components/report/ReportInterval.tsx
new file mode 100644
index 00000000..ec86a5e8
--- /dev/null
+++ b/apps/web/src/components/report/ReportInterval.tsx
@@ -0,0 +1,46 @@
+import { useDispatch, useSelector } from '@/redux';
+import type { IInterval } from '@/types';
+import { isMinuteIntervalEnabledByRange } from '@/utils/constants';
+
+import { Combobox } from '../ui/combobox';
+import { changeInterval } from './reportSlice';
+
+export function ReportInterval() {
+ const dispatch = useDispatch();
+ const interval = useSelector((state) => state.report.interval);
+ const range = useSelector((state) => state.report.range);
+ const chartType = useSelector((state) => state.report.chartType);
+ if (chartType !== 'linear') {
+ return null;
+ }
+
+ return (
+ {
+ dispatch(changeInterval(value as IInterval));
+ }}
+ value={interval}
+ items={[
+ {
+ value: 'minute',
+ label: 'Minute',
+ disabled: !isMinuteIntervalEnabledByRange(range),
+ },
+ {
+ value: 'hour',
+ label: 'Hour',
+ },
+ {
+ value: 'day',
+ label: 'Day',
+ },
+ {
+ value: 'month',
+ label: 'Month',
+ disabled: range < 1,
+ },
+ ]}
+ />
+ );
+}
diff --git a/apps/web/src/components/report/sidebar/ReportSaveButton.tsx b/apps/web/src/components/report/ReportSaveButton.tsx
similarity index 78%
rename from apps/web/src/components/report/sidebar/ReportSaveButton.tsx
rename to apps/web/src/components/report/ReportSaveButton.tsx
index e4d2aca5..fa5104bb 100644
--- a/apps/web/src/components/report/sidebar/ReportSaveButton.tsx
+++ b/apps/web/src/components/report/ReportSaveButton.tsx
@@ -1,12 +1,15 @@
import { Button } from '@/components/ui/button';
import { toast } from '@/components/ui/use-toast';
+import { useOrganizationParams } from '@/hooks/useOrganizationParams';
import { pushModal } from '@/modals';
import { useSelector } from '@/redux';
import { api, handleError } from '@/utils/api';
+import { SaveIcon } from 'lucide-react';
-import { useReportId } from '../hooks/useReportId';
+import { useReportId } from './hooks/useReportId';
export function ReportSaveButton() {
+ const params = useOrganizationParams();
const { reportId } = useReportId();
const update = api.report.update.useMutation({
onSuccess() {
@@ -27,10 +30,9 @@ export function ReportSaveButton() {
update.mutate({
reportId,
report,
- dashboardId: '9227feb4-ad59-40f3-b887-3501685733dd',
- projectId: 'f7eabf0c-e0b0-4ac0-940f-1589715b0c3d',
});
}}
+ icon={SaveIcon}
>
Update
@@ -43,8 +45,9 @@ export function ReportSaveButton() {
report,
});
}}
+ icon={SaveIcon}
>
- Create
+ Save
);
}
diff --git a/apps/web/src/components/report/chart/ChartProvider.tsx b/apps/web/src/components/report/chart/ChartProvider.tsx
index 81e64624..65542370 100644
--- a/apps/web/src/components/report/chart/ChartProvider.tsx
+++ b/apps/web/src/components/report/chart/ChartProvider.tsx
@@ -1,7 +1,6 @@
import { createContext, memo, useContext, useMemo } from 'react';
-import { pick } from 'ramda';
-interface ChartContextType {
+export interface ChartContextType {
editMode: boolean;
}
diff --git a/apps/web/src/components/report/chart/LazyChart.tsx b/apps/web/src/components/report/chart/LazyChart.tsx
new file mode 100644
index 00000000..10eb95dd
--- /dev/null
+++ b/apps/web/src/components/report/chart/LazyChart.tsx
@@ -0,0 +1,30 @@
+import React, { useEffect, useRef } from 'react';
+import { useInViewport } from 'react-in-viewport';
+
+import type { ReportChartProps } from '.';
+import { Chart } from '.';
+import type { ChartContextType } from './ChartProvider';
+
+export function LazyChart(props: ReportChartProps & ChartContextType) {
+ const ref = useRef(null);
+ const once = useRef(false);
+ const { inViewport } = useInViewport(ref, undefined, {
+ disconnectOnLeave: true,
+ });
+
+ useEffect(() => {
+ if (inViewport) {
+ once.current = true;
+ }
+ }, [inViewport]);
+
+ return (
+
+ {once.current || inViewport ? (
+
+ ) : (
+
+ )}
+
diff --git a/apps/web/src/components/report/chart/ReportLineChart.tsx b/apps/web/src/components/report/chart/ReportLineChart.tsx
index 2b7b7d3d..749d200d 100644
--- a/apps/web/src/components/report/chart/ReportLineChart.tsx
+++ b/apps/web/src/components/report/chart/ReportLineChart.tsx
@@ -40,47 +40,52 @@ export function ReportLineChart({ interval, data }: ReportLineChartProps) {
return (
<>
-
- {({ width }) => (
-
-
- } />
-
- {
- return formatDate(m);
- }}
- tickLine={false}
- allowDuplicatedCategory={false}
- />
- {data?.series
- .filter((serie) => {
- return visibleSeries.includes(serie.name);
- })
- .map((serie) => {
- const realIndex = data?.series.findIndex(
- (item) => item.name === serie.name
- );
- const key = serie.name;
- const strokeColor = getChartColor(realIndex);
- return (
-
- );
- })}
-
- )}
-
+
+
+ {({ width }) => (
+
+
+ } />
+
+ {
+ return formatDate(m);
+ }}
+ tickLine={false}
+ allowDuplicatedCategory={false}
+ />
+ {data?.series
+ .filter((serie) => {
+ return visibleSeries.includes(serie.name);
+ })
+ .map((serie) => {
+ const realIndex = data?.series.findIndex(
+ (item) => item.name === serie.name
+ );
+ const key = serie.name;
+ const strokeColor = getChartColor(realIndex);
+ return (
+
+ );
+ })}
+
+ )}
+
+
{editMode && (
{
+ }: ReportChartProps) {
+ const params = useOrganizationParams();
const hasEmptyFilters = events.some((event) =>
event.filters.some((filter) => filter.value.length === 0)
);
@@ -29,6 +32,7 @@ export const Chart = withChartProivder(
range,
startDate: null,
endDate: null,
+ projectSlug: params.project,
},
{
keepPreviousData: true,
@@ -63,5 +67,5 @@ export const Chart = withChartProivder(
}
return Chart type "{chartType}" is not supported yet.
;
- }
+ })
);
diff --git a/apps/web/src/components/report/reportSlice.ts b/apps/web/src/components/report/reportSlice.ts
index 3710b458..d7ecfbd8 100644
--- a/apps/web/src/components/report/reportSlice.ts
+++ b/apps/web/src/components/report/reportSlice.ts
@@ -6,7 +6,7 @@ import type {
IChartType,
IInterval,
} from '@/types';
-import { alphabetIds } from '@/utils/constants';
+import { alphabetIds, isMinuteIntervalEnabledByRange } from '@/utils/constants';
import { createSlice } from '@reduxjs/toolkit';
import type { PayloadAction } from '@reduxjs/toolkit';
@@ -104,6 +104,13 @@ export const reportSlice = createSlice({
// Chart type
changeChartType: (state, action: PayloadAction) => {
state.chartType = action.payload;
+
+ if (
+ !isMinuteIntervalEnabledByRange(state.range) &&
+ state.interval === 'minute'
+ ) {
+ state.interval = 'hour';
+ }
},
// Date range
diff --git a/apps/web/src/components/report/sidebar/ReportBreakdowns.tsx b/apps/web/src/components/report/sidebar/ReportBreakdowns.tsx
index 0a89b42c..9c3275f0 100644
--- a/apps/web/src/components/report/sidebar/ReportBreakdowns.tsx
+++ b/apps/web/src/components/report/sidebar/ReportBreakdowns.tsx
@@ -1,6 +1,6 @@
import { ColorSquare } from '@/components/ColorSquare';
import { Combobox } from '@/components/ui/combobox';
-import { RenderDots } from '@/components/ui/RenderDots';
+import { useOrganizationParams } from '@/hooks/useOrganizationParams';
import { useDispatch, useSelector } from '@/redux';
import type { IChartBreakdown } from '@/types';
import { api } from '@/utils/api';
@@ -10,9 +10,12 @@ import { ReportBreakdownMore } from './ReportBreakdownMore';
import type { ReportEventMoreProps } from './ReportEventMore';
export function ReportBreakdowns() {
+ const params = useOrganizationParams();
const selectedBreakdowns = useSelector((state) => state.report.breakdowns);
const dispatch = useDispatch();
- const propertiesQuery = api.chart.properties.useQuery();
+ const propertiesQuery = api.chart.properties.useQuery({
+ projectSlug: params.project,
+ });
const propertiesCombobox = (propertiesQuery.data ?? []).map((item) => ({
value: item,
label: item, // {item},
diff --git a/apps/web/src/components/report/sidebar/ReportEventFilters.tsx b/apps/web/src/components/report/sidebar/ReportEventFilters.tsx
index 32ede0e3..b11c606a 100644
--- a/apps/web/src/components/report/sidebar/ReportEventFilters.tsx
+++ b/apps/web/src/components/report/sidebar/ReportEventFilters.tsx
@@ -14,6 +14,7 @@ import {
} from '@/components/ui/command';
import { RenderDots } from '@/components/ui/RenderDots';
import { useMappings } from '@/hooks/useMappings';
+import { useOrganizationParams } from '@/hooks/useOrganizationParams';
import { useDispatch } from '@/redux';
import type {
IChartEvent,
@@ -37,10 +38,12 @@ export function ReportEventFilters({
isCreating,
setIsCreating,
}: ReportEventFiltersProps) {
+ const params = useOrganizationParams();
const dispatch = useDispatch();
const propertiesQuery = api.chart.properties.useQuery(
{
event: event.name,
+ projectSlug: params.project,
},
{
enabled: !!event.name,
@@ -99,11 +102,13 @@ interface FilterProps {
}
function Filter({ filter, event }: FilterProps) {
+ const params = useOrganizationParams();
const getLabel = useMappings();
const dispatch = useDispatch();
const potentialValues = api.chart.values.useQuery({
event: event.name,
property: filter.name,
+ projectSlug: params.project,
});
const valuesCombobox =
diff --git a/apps/web/src/components/report/sidebar/ReportEvents.tsx b/apps/web/src/components/report/sidebar/ReportEvents.tsx
index 6770e686..5dea0574 100644
--- a/apps/web/src/components/report/sidebar/ReportEvents.tsx
+++ b/apps/web/src/components/report/sidebar/ReportEvents.tsx
@@ -2,6 +2,7 @@ import { useState } from 'react';
import { ColorSquare } from '@/components/ColorSquare';
import { Dropdown } from '@/components/Dropdown';
import { Combobox } from '@/components/ui/combobox';
+import { useOrganizationParams } from '@/hooks/useOrganizationParams';
import { useDispatch, useSelector } from '@/redux';
import type { IChartEvent } from '@/types';
import { api } from '@/utils/api';
@@ -16,7 +17,10 @@ export function ReportEvents() {
const [isCreating, setIsCreating] = useState(false);
const selectedEvents = useSelector((state) => state.report.events);
const dispatch = useDispatch();
- const eventsQuery = api.chart.events.useQuery();
+ const params = useOrganizationParams();
+ const eventsQuery = api.chart.events.useQuery({
+ projectSlug: params.project,
+ });
const eventsCombobox = (eventsQuery.data ?? []).map((item) => ({
value: item.name,
label: item.name,
diff --git a/apps/web/src/components/report/sidebar/ReportSidebar.tsx b/apps/web/src/components/report/sidebar/ReportSidebar.tsx
index 29938af0..49279e65 100644
--- a/apps/web/src/components/report/sidebar/ReportSidebar.tsx
+++ b/apps/web/src/components/report/sidebar/ReportSidebar.tsx
@@ -1,13 +1,17 @@
+import { Button } from '@/components/ui/button';
+import { SheetClose } from '@/components/ui/sheet';
+
import { ReportBreakdowns } from './ReportBreakdowns';
import { ReportEvents } from './ReportEvents';
-import { ReportSaveButton } from './ReportSaveButton';
export function ReportSidebar() {
return (
-
+
-
+
+
+
);
}
diff --git a/apps/web/src/components/ui/avatar.tsx b/apps/web/src/components/ui/avatar.tsx
index 65ec2474..24042045 100644
--- a/apps/web/src/components/ui/avatar.tsx
+++ b/apps/web/src/components/ui/avatar.tsx
@@ -9,7 +9,7 @@ const Avatar = React.forwardRef<
{
asChild?: boolean;
loading?: boolean;
+ icon?: LucideIcon;
}
const Button = React.forwardRef(
@@ -51,11 +53,13 @@ const Button = React.forwardRef(
children,
loading,
disabled,
+ icon,
...props
},
ref
) => {
const Comp = asChild ? Slot : 'button';
+ const Icon = loading ? Loader2 : icon ?? null;
return (
(
disabled={loading ?? disabled}
{...props}
>
- {loading ? : <>{children}}
+ {Icon && (
+
+ )}
+ {children}
);
}
diff --git a/apps/web/src/components/ui/combobox.tsx b/apps/web/src/components/ui/combobox.tsx
index 75457959..1c6fcf18 100644
--- a/apps/web/src/components/ui/combobox.tsx
+++ b/apps/web/src/components/ui/combobox.tsx
@@ -15,11 +15,14 @@ import {
import { cn } from '@/utils/cn';
import { Check, ChevronsUpDown } from 'lucide-react';
+import { ScrollArea } from './scroll-area';
+
interface ComboboxProps {
placeholder: string;
items: {
value: string;
label: string;
+ disabled?: boolean;
}[];
value: string;
onChange: (value: string) => void;
@@ -51,7 +54,7 @@ export function Combobox({
variant="outline"
role="combobox"
aria-expanded={open}
- className="w-full min-w-0 justify-between"
+ className="w-full justify-between min-w-[150px]"
>
{value ? find(value)?.label ?? 'No match' : placeholder}
@@ -82,27 +85,30 @@ export function Combobox({
) : (
Nothing selected
)}
-
- {items.map((item) => (
- {
- const value = find(currentValue)?.value ?? currentValue;
- onChange(value);
- setOpen(false);
- }}
- >
-
- {item.label}
-
- ))}
-
+
+
+ {items.map((item) => (
+ {
+ const value = find(currentValue)?.value ?? currentValue;
+ onChange(value);
+ setOpen(false);
+ }}
+ {...(item.disabled && { disabled: true })}
+ >
+
+ {item.label}
+
+ ))}
+
+
diff --git a/apps/web/src/components/ui/command.tsx b/apps/web/src/components/ui/command.tsx
index 7ccfcab8..c143a853 100644
--- a/apps/web/src/components/ui/command.tsx
+++ b/apps/web/src/components/ui/command.tsx
@@ -114,9 +114,10 @@ const CommandItem = React.forwardRef<
));
diff --git a/apps/web/src/components/ui/popover.tsx b/apps/web/src/components/ui/popover.tsx
index 4ccf24f2..4c068572 100644
--- a/apps/web/src/components/ui/popover.tsx
+++ b/apps/web/src/components/ui/popover.tsx
@@ -10,7 +10,7 @@ const PopoverContent = React.forwardRef<
React.ElementRef,
React.ComponentPropsWithoutRef
>(({ className, align = 'center', sideOffset = 4, ...props }, ref) => (
-
+ <>
-
+
));
PopoverContent.displayName = PopoverPrimitive.Content.displayName;
diff --git a/apps/web/src/components/ui/scroll-area.tsx b/apps/web/src/components/ui/scroll-area.tsx
new file mode 100644
index 00000000..f25a5f8c
--- /dev/null
+++ b/apps/web/src/components/ui/scroll-area.tsx
@@ -0,0 +1,51 @@
+import * as React from "react"
+import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area"
+
+import { cn } from "@/utils/cn"
+
+const ScrollArea = React.forwardRef<
+ React.ElementRef,
+ React.ComponentPropsWithoutRef
+>(({ className, children, ...props }, ref) => (
+
+
+ {children}
+
+
+
+
+))
+ScrollArea.displayName = ScrollAreaPrimitive.Root.displayName
+
+const ScrollBar = React.forwardRef<
+ React.ElementRef,
+ React.ComponentPropsWithoutRef
+>(({ className, orientation = "vertical", ...props }, ref) => (
+
+
+
+))
+ScrollBar.displayName = ScrollAreaPrimitive.ScrollAreaScrollbar.displayName
+
+export { ScrollArea, ScrollBar }
diff --git a/apps/web/src/components/ui/sheet.tsx b/apps/web/src/components/ui/sheet.tsx
new file mode 100644
index 00000000..cad567d8
--- /dev/null
+++ b/apps/web/src/components/ui/sheet.tsx
@@ -0,0 +1,138 @@
+import * as React from 'react';
+import { cn } from '@/utils/cn';
+import * as SheetPrimitive from '@radix-ui/react-dialog';
+import { cva } from 'class-variance-authority';
+import type { VariantProps } from 'class-variance-authority';
+import { X } from 'lucide-react';
+
+const Sheet = SheetPrimitive.Root;
+
+const SheetTrigger = SheetPrimitive.Trigger;
+
+const SheetClose = SheetPrimitive.Close;
+
+const SheetPortal = SheetPrimitive.Portal;
+
+const SheetOverlay = React.forwardRef<
+ React.ElementRef,
+ React.ComponentPropsWithoutRef
+>(({ className, ...props }, ref) => (
+
+));
+SheetOverlay.displayName = SheetPrimitive.Overlay.displayName;
+
+const sheetVariants = cva(
+ 'fixed z-50 gap-4 bg-background p-6 shadow-lg transition ease-in-out data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:duration-300 data-[state=open]:duration-500',
+ {
+ variants: {
+ side: {
+ top: 'inset-x-0 top-0 border-b data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top',
+ bottom:
+ 'inset-x-0 bottom-0 border-t data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom',
+ left: 'inset-y-0 left-0 h-full w-3/4 border-r data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left sm:max-w-sm',
+ right:
+ 'inset-y-0 right-0 h-full w-3/4 border-l data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right sm:max-w-sm',
+ },
+ },
+ defaultVariants: {
+ side: 'right',
+ },
+ }
+);
+
+interface SheetContentProps
+ extends React.ComponentPropsWithoutRef,
+ VariantProps {}
+
+const SheetContent = React.forwardRef<
+ React.ElementRef,
+ SheetContentProps
+>(({ side = 'right', className, children, ...props }, ref) => (
+
+
+
+ {children}
+
+
+ Close
+
+
+
+));
+SheetContent.displayName = SheetPrimitive.Content.displayName;
+
+const SheetHeader = ({
+ className,
+ ...props
+}: React.HTMLAttributes) => (
+
+);
+SheetHeader.displayName = 'SheetHeader';
+
+const SheetFooter = ({
+ className,
+ ...props
+}: React.HTMLAttributes) => (
+
+);
+SheetFooter.displayName = 'SheetFooter';
+
+const SheetTitle = React.forwardRef<
+ React.ElementRef,
+ React.ComponentPropsWithoutRef
+>(({ className, ...props }, ref) => (
+
+));
+SheetTitle.displayName = SheetPrimitive.Title.displayName;
+
+const SheetDescription = React.forwardRef<
+ React.ElementRef,
+ React.ComponentPropsWithoutRef
+>(({ className, ...props }, ref) => (
+
+));
+SheetDescription.displayName = SheetPrimitive.Description.displayName;
+
+export {
+ Sheet,
+ SheetPortal,
+ SheetOverlay,
+ SheetTrigger,
+ SheetClose,
+ SheetContent,
+ SheetHeader,
+ SheetFooter,
+ SheetTitle,
+ SheetDescription,
+};
diff --git a/apps/web/src/hooks/useBreakpoint.ts b/apps/web/src/hooks/useBreakpoint.ts
new file mode 100644
index 00000000..de8c1fd7
--- /dev/null
+++ b/apps/web/src/hooks/useBreakpoint.ts
@@ -0,0 +1,29 @@
+import { theme } from '@/utils/theme';
+import { useMediaQuery } from 'react-responsive';
+import type { ScreensConfig } from 'tailwindcss/types/config';
+
+const breakpoints = theme?.screens ?? {
+ xs: '480px',
+ sm: '640px',
+ md: '768px',
+ lg: '1024px',
+ xl: '1280px',
+};
+
+export function useBreakpoint(breakpointKey: K) {
+ const breakpointValue = breakpoints[breakpointKey as keyof ScreensConfig];
+ const bool = useMediaQuery({
+ query: `(max-width: ${breakpointValue})`,
+ });
+ const capitalizedKey =
+ breakpointKey[0]?.toUpperCase() + breakpointKey.substring(1);
+
+ type KeyAbove = `isAbove${Capitalize}`;
+ type KeyBelow = `isBelow${Capitalize}`;
+
+ return {
+ [breakpointKey]: Number(String(breakpointValue).replace(/[^0-9]/g, '')),
+ [`isAbove${capitalizedKey}`]: !bool,
+ [`isBelow${capitalizedKey}`]: bool,
+ } as Record & Record;
+}
diff --git a/apps/web/src/modals/SaveReport.tsx b/apps/web/src/modals/SaveReport.tsx
index 7cd1a442..768ec979 100644
--- a/apps/web/src/modals/SaveReport.tsx
+++ b/apps/web/src/modals/SaveReport.tsx
@@ -10,7 +10,7 @@ import type { IChartInput } from '@/types';
import { api, handleError } from '@/utils/api';
import { zodResolver } from '@hookform/resolvers/zod';
import { useRouter } from 'next/router';
-import { Controller, useForm, useWatch } from 'react-hook-form';
+import { Controller, useForm } from 'react-hook-form';
import { z } from 'zod';
import { popModal } from '.';
@@ -23,7 +23,6 @@ interface SaveReportProps {
const validator = z.object({
name: z.string().min(1, 'Required'),
- projectId: z.string().min(1, 'Required'),
dashboardId: z.string().min(1, 'Required'),
});
@@ -31,7 +30,7 @@ type IForm = z.infer;
export default function SaveReport({ report }: SaveReportProps) {
const router = useRouter();
- const { organization } = useOrganizationParams();
+ const { organization, project } = useOrganizationParams();
const refetch = useRefetchActive();
const save = api.report.save.useMutation({
onError: handleError,
@@ -42,7 +41,7 @@ export default function SaveReport({ report }: SaveReportProps) {
});
popModal();
refetch();
- router.push(`/${organization}/reports/${res.id}`);
+ router.push(`/${organization}/${project}/reports/${res.id}`);
},
});
@@ -51,7 +50,6 @@ export default function SaveReport({ report }: SaveReportProps) {
resolver: zodResolver(validator),
defaultValues: {
name: '',
- projectId: '',
dashboardId: '',
},
});
@@ -68,29 +66,10 @@ export default function SaveReport({ report }: SaveReportProps) {
},
});
- const projectId = useWatch({
- name: 'projectId',
- control,
+ const dashboasrdQuery = api.dashboard.list.useQuery({
+ projectSlug: project,
});
- const projectQuery = api.project.list.useQuery({
- organizationSlug: organization,
- });
-
- const dashboasrdQuery = api.dashboard.list.useQuery(
- {
- projectId,
- },
- {
- enabled: !!projectId,
- }
- );
-
- const projects = (projectQuery.data ?? []).map((item) => ({
- value: item.id,
- label: item.name,
- }));
-
const dashboards = (dashboasrdQuery.data ?? []).map((item) => ({
value: item.id,
label: item.name,
@@ -117,22 +96,6 @@ export default function SaveReport({ report }: SaveReportProps) {
{...register('name')}
defaultValue={report.name}
/>
- {
- return (
-
-
-
-
- );
- }}
- />
{
dashboardMutation.mutate({
- projectId,
+ projectSlug: project,
name: value,
});
}}
diff --git a/apps/web/src/pages/[organization]/[project]/[dashboard].tsx b/apps/web/src/pages/[organization]/[project]/[dashboard].tsx
index 01a7c73e..ed1c0e5b 100644
--- a/apps/web/src/pages/[organization]/[project]/[dashboard].tsx
+++ b/apps/web/src/pages/[organization]/[project]/[dashboard].tsx
@@ -1,13 +1,14 @@
-import { Suspense, useMemo, useState } from 'react';
+import { useMemo, useState } from 'react';
import { Container } from '@/components/Container';
import { MainLayout } from '@/components/layouts/MainLayout';
import { PageTitle } from '@/components/PageTitle';
-import { Chart } from '@/components/report/chart';
+import { LazyChart } from '@/components/report/chart/LazyChart';
import { RadioGroup, RadioGroupItem } from '@/components/ui/radio-group';
import { useOrganizationParams } from '@/hooks/useOrganizationParams';
import { createServerSideProps } from '@/server/getServerSideProps';
import type { IChartRange } from '@/types';
import { api } from '@/utils/api';
+import { cn } from '@/utils/cn';
import { timeRanges } from '@/utils/constants';
import { getRangeLabel } from '@/utils/getRangeLabel';
import Link from 'next/link';
@@ -32,59 +33,63 @@ export default function Dashboard() {
return (
-
- {dashboard?.name}
+ {dashboard?.name}
-
- {timeRanges.map((item) => {
- return (
- {
- setRange((p) => (p === item.range ? null : item.range));
- }}
+
+ {timeRanges.map((item) => {
+ return (
+ {
+ setRange((p) => (p === item.range ? null : item.range));
+ }}
+ >
+ {item.title}
+
+ );
+ })}
+
+
+
+ {reports.map((report) => {
+ const chartRange = getRangeLabel(report.range);
+ return (
+
+
- {item.title}
-
- );
- })}
-
-
-
- {reports.map((report) => {
- const chartRange = getRangeLabel(report.range);
- return (
+
{report.name}
+ {chartRange !== null && (
+
+
+ {chartRange}
+
+ {range !== null && {getRangeLabel(range)}}
+
+ )}
+
-
-
{report.name}
- {chartRange && (
-
-
- {chartRange}
-
- {range && {getRangeLabel(range)}}
-
- )}
-
-
-
-
+
- );
- })}
-
-
+
+ );
+ })}
+
+
{dashboards.map((item) => (
{item.name}
diff --git a/apps/web/src/pages/[organization]/[project]/profiles/[profileId].tsx b/apps/web/src/pages/[organization]/[project]/profiles/[profileId].tsx
index c32646ae..345b83a3 100644
--- a/apps/web/src/pages/[organization]/[project]/profiles/[profileId].tsx
+++ b/apps/web/src/pages/[organization]/[project]/profiles/[profileId].tsx
@@ -6,7 +6,9 @@ import { PageTitle } from '@/components/PageTitle';
import { usePagination } from '@/components/Pagination';
import { useOrganizationParams } from '@/hooks/useOrganizationParams';
import { useQueryParams } from '@/hooks/useQueryParams';
+import { createServerSideProps } from '@/server/getServerSideProps';
import { api } from '@/utils/api';
+import { getProfileName } from '@/utils/getters';
import { z } from 'zod';
export default function ProfileId() {
@@ -17,6 +19,9 @@ export default function ProfileId() {
profileId: z.string(),
})
);
+ const profileQuery = api.profile.get.useQuery({
+ id: profileId,
+ });
const eventsQuery = api.event.list.useQuery(
{
projectSlug: params.project,
@@ -27,12 +32,14 @@ export default function ProfileId() {
keepPreviousData: true,
}
);
+ const profile = profileQuery.data ?? null;
const events = useMemo(() => eventsQuery.data ?? [], [eventsQuery]);
return (
- Profile
+ {getProfileName(profile)}
+ {JSON.stringify(profile?.properties, null, 2)}
diff --git a/apps/web/src/pages/[organization]/[project]/profiles/index.tsx b/apps/web/src/pages/[organization]/[project]/profiles/index.tsx
index 4b5e5381..d4a1e86a 100644
--- a/apps/web/src/pages/[organization]/[project]/profiles/index.tsx
+++ b/apps/web/src/pages/[organization]/[project]/profiles/index.tsx
@@ -49,6 +49,7 @@ export default function Events() {
{profile?.avatar && }
@@ -56,7 +57,16 @@ export default function Events() {
{profile?.first_name?.at(0)}
- {`${profile?.first_name} ${profile?.last_name ?? ''}`}
+
+
+ {[profile?.first_name, profile?.last_name]
+ .filter(Boolean)
+ .join(' ')}
+
+
+ {profile.external_id}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
{projects.map((item) => (
{item.name}
diff --git a/apps/web/src/server/api/root.ts b/apps/web/src/server/api/root.ts
index 68cbe02d..353d8717 100644
--- a/apps/web/src/server/api/root.ts
+++ b/apps/web/src/server/api/root.ts
@@ -8,6 +8,7 @@ import { organizationRouter } from './routers/organization';
import { profileRouter } from './routers/profile';
import { projectRouter } from './routers/project';
import { reportRouter } from './routers/report';
+import { uiRouter } from './routers/ui';
import { userRouter } from './routers/user';
/**
@@ -25,6 +26,7 @@ export const appRouter = createTRPCRouter({
client: clientRouter,
event: eventRouter,
profile: profileRouter,
+ ui: uiRouter,
});
// export type definition of API
diff --git a/apps/web/src/server/api/routers/chart.ts b/apps/web/src/server/api/routers/chart.ts
index 8e6f960d..785df900 100644
--- a/apps/web/src/server/api/routers/chart.ts
+++ b/apps/web/src/server/api/routers/chart.ts
@@ -1,5 +1,7 @@
import { createTRPCRouter, protectedProcedure } from '@/server/api/trpc';
+import * as cache from '@/server/cache';
import { db } from '@/server/db';
+import { getProjectBySlug } from '@/server/services/project.service';
import type { IChartEvent, IChartInputWithDates, IChartRange } from '@/types';
import { getDaysOldDate } from '@/utils/date';
import { toDots } from '@/utils/object';
@@ -14,28 +16,46 @@ export const config = {
};
export const chartRouter = createTRPCRouter({
- events: protectedProcedure.query(async () => {
- const events = await db.event.findMany({
- take: 500,
- distinct: ['name'],
- });
+ events: protectedProcedure
+ .input(z.object({ projectSlug: z.string() }))
+ .query(async ({ input: { projectSlug } }) => {
+ const project = await getProjectBySlug(projectSlug);
+ const events = await cache.getOr(
+ `events_${project.id}`,
+ 1000 * 60 * 60,
+ () =>
+ db.event.findMany({
+ take: 500,
+ distinct: ['name'],
+ where: {
+ project_id: project.id,
+ },
+ })
+ );
- return events;
- }),
+ return events;
+ }),
properties: protectedProcedure
- .input(z.object({ event: z.string() }).optional())
- .query(async ({ input }) => {
- const events = await db.event.findMany({
- take: 500,
- where: {
- ...(input?.event
- ? {
- name: input.event,
- }
- : {}),
- },
- });
+ .input(z.object({ event: z.string().optional(), projectSlug: z.string() }))
+ .query(async ({ input: { projectSlug, event } }) => {
+ const project = await getProjectBySlug(projectSlug);
+ const events = await cache.getOr(
+ `events_${project.id}_${event ?? 'all'}`,
+ 1000 * 60 * 60,
+ () =>
+ db.event.findMany({
+ take: 500,
+ where: {
+ project_id: project.id,
+ ...(event
+ ? {
+ name: event,
+ }
+ : {}),
+ },
+ })
+ );
const properties = events
.reduce((acc, event) => {
@@ -53,51 +73,69 @@ export const chartRouter = createTRPCRouter({
}),
values: protectedProcedure
- .input(z.object({ event: z.string(), property: z.string() }))
- .query(async ({ input }) => {
- if (isJsonPath(input.property)) {
+ .input(
+ z.object({
+ event: z.string(),
+ property: z.string(),
+ projectSlug: z.string(),
+ })
+ )
+ .query(async ({ input: { event, property, projectSlug } }) => {
+ const project = await getProjectBySlug(projectSlug);
+ if (isJsonPath(property)) {
const events = await db.$queryRawUnsafe<{ value: string }[]>(
`SELECT ${selectJsonPath(
- input.property
- )} AS value from events WHERE name = '${
- input.event
- }' AND "createdAt" >= NOW() - INTERVAL '30 days'`
+ property
+ )} AS value from events WHERE project_id = '${
+ project.id
+ }' AND name = '${event}' AND "createdAt" >= NOW() - INTERVAL '30 days'`
);
+ console.log(
+ `SELECT ${selectJsonPath(
+ property
+ )} AS value from events WHERE project_id = '${
+ project.id
+ }' AND name = '${event}' AND "createdAt" >= NOW() - INTERVAL '30 days'`
+ );
+
return {
values: uniq(events.map((item) => item.value)),
};
} else {
const events = await db.event.findMany({
where: {
- name: input.event,
- [input.property]: {
+ project_id: project.id,
+ name: event,
+ [property]: {
not: null,
},
createdAt: {
gte: new Date(new Date().getTime() - 1000 * 60 * 60 * 24 * 30),
},
},
- distinct: input.property as any,
+ distinct: property as any,
select: {
- [input.property]: true,
+ [property]: true,
},
});
return {
- values: uniq(events.map((item) => item[input.property]!)),
+ values: uniq(events.map((item) => item[property]!)),
};
}
}),
chart: protectedProcedure
- .input(zChartInputWithDates)
- .query(async ({ input: { events, ...input } }) => {
+ .input(zChartInputWithDates.merge(z.object({ projectSlug: z.string() })))
+ .query(async ({ input: { projectSlug, events, ...input } }) => {
+ const project = await getProjectBySlug(projectSlug);
const series: Awaited> = [];
for (const event of events) {
series.push(
...(await getChartData({
...input,
event,
+ projectId: project.id,
}))
);
}
@@ -227,9 +265,12 @@ function getChartSql({
interval,
startDate,
endDate,
-}: Omit) {
+ projectId,
+}: Omit & {
+ projectId: string;
+}) {
const select = [];
- const where = [];
+ const where = [`project_id = '${projectId}'`];
const groupBy = [];
const orderBy = [];
@@ -352,7 +393,10 @@ async function getChartData({
range,
startDate: _startDate,
endDate: _endDate,
-}: IGetChartDataInput) {
+ projectId,
+}: IGetChartDataInput & {
+ projectId: string;
+}) {
const { startDate, endDate } =
_startDate && _endDate
? {
@@ -368,6 +412,7 @@ async function getChartData({
interval,
startDate,
endDate,
+ projectId,
});
let result = await db.$queryRawUnsafe(sql);
@@ -381,6 +426,7 @@ async function getChartData({
interval,
startDate,
endDate,
+ projectId,
})
);
}
@@ -453,8 +499,8 @@ function fillEmptySpotsInTimeline(
clonedStartDate.setMinutes(0, 0, 0);
clonedEndDate.setMinutes(0, 0, 0);
} else {
- clonedStartDate.setHours(2, 0, 0, 0);
- clonedEndDate.setHours(2, 0, 0, 0);
+ clonedStartDate.setUTCHours(0, 0, 0, 0);
+ clonedEndDate.setUTCHours(0, 0, 0, 0);
}
// Force if interval is month and the start date is the same month as today
diff --git a/apps/web/src/server/api/routers/dashboard.ts b/apps/web/src/server/api/routers/dashboard.ts
index db507904..bfc6633a 100644
--- a/apps/web/src/server/api/routers/dashboard.ts
+++ b/apps/web/src/server/api/routers/dashboard.ts
@@ -35,14 +35,15 @@ export const dashboardRouter = createTRPCRouter({
.input(
z.object({
name: z.string(),
- projectId: z.string(),
+ projectSlug: z.string(),
})
)
- .mutation(async ({ input: { projectId, name } }) => {
+ .mutation(async ({ input: { projectSlug, name } }) => {
+ const project = await getProjectBySlug(projectSlug);
return db.dashboard.create({
data: {
slug: slug(name),
- project_id: projectId,
+ project_id: project.id,
name,
},
});
diff --git a/apps/web/src/server/api/routers/profile.ts b/apps/web/src/server/api/routers/profile.ts
index abf32709..bc0c4b5e 100644
--- a/apps/web/src/server/api/routers/profile.ts
+++ b/apps/web/src/server/api/routers/profile.ts
@@ -34,4 +34,17 @@ export const profileRouter = createTRPCRouter({
},
});
}),
+ get: protectedProcedure
+ .input(
+ z.object({
+ id: z.string(),
+ })
+ )
+ .query(async ({ input: { id } }) => {
+ return db.profile.findUniqueOrThrow({
+ where: {
+ id,
+ },
+ });
+ }),
});
diff --git a/apps/web/src/server/api/routers/project.ts b/apps/web/src/server/api/routers/project.ts
index 0fab882b..975a77fd 100644
--- a/apps/web/src/server/api/routers/project.ts
+++ b/apps/web/src/server/api/routers/project.ts
@@ -1,6 +1,7 @@
import { createTRPCRouter, protectedProcedure } from '@/server/api/trpc';
import { db } from '@/server/db';
import { getOrganizationBySlug } from '@/server/services/organization.service';
+import { getProjectBySlug } from '@/server/services/project.service';
import { z } from 'zod';
export const projectRouter = createTRPCRouter({
@@ -20,11 +21,17 @@ export const projectRouter = createTRPCRouter({
}),
get: protectedProcedure
.input(
- z.object({
- id: z.string(),
- })
+ z
+ .object({
+ id: z.string(),
+ })
+ .or(z.object({ slug: z.string() }))
)
.query(({ input }) => {
+ if ('slug' in input) {
+ return getProjectBySlug(input.slug);
+ }
+
return db.project.findUniqueOrThrow({
where: {
id: input.id,
diff --git a/apps/web/src/server/api/routers/report.ts b/apps/web/src/server/api/routers/report.ts
index 890f6120..c8cedb35 100644
--- a/apps/web/src/server/api/routers/report.ts
+++ b/apps/web/src/server/api/routers/report.ts
@@ -94,14 +94,18 @@ export const reportRouter = createTRPCRouter({
.input(
z.object({
report: zChartInput,
- projectId: z.string(),
dashboardId: z.string(),
})
)
- .mutation(({ input: { report, projectId, dashboardId } }) => {
+ .mutation(async ({ input: { report, dashboardId } }) => {
+ const dashboard = await db.dashboard.findUniqueOrThrow({
+ where: {
+ id: dashboardId,
+ },
+ });
return db.report.create({
data: {
- project_id: projectId,
+ project_id: dashboard.project_id,
dashboard_id: dashboardId,
name: report.name,
events: report.events,
@@ -117,18 +121,14 @@ export const reportRouter = createTRPCRouter({
z.object({
reportId: z.string(),
report: zChartInput,
- projectId: z.string(),
- dashboardId: z.string(),
})
)
- .mutation(({ input: { report, projectId, dashboardId, reportId } }) => {
+ .mutation(({ input: { report, reportId } }) => {
return db.report.update({
where: {
id: reportId,
},
data: {
- project_id: projectId,
- dashboard_id: dashboardId,
name: report.name,
events: report.events,
interval: report.interval,
diff --git a/apps/web/src/server/api/routers/ui.ts b/apps/web/src/server/api/routers/ui.ts
new file mode 100644
index 00000000..d643ccfd
--- /dev/null
+++ b/apps/web/src/server/api/routers/ui.ts
@@ -0,0 +1,22 @@
+import { createTRPCRouter, protectedProcedure } from '@/server/api/trpc';
+import { db } from '@/server/db';
+import { z } from 'zod';
+
+export const config = {
+ api: {
+ responseLimit: false,
+ },
+};
+
+export const uiRouter = createTRPCRouter({
+ breadcrumbs: protectedProcedure
+ .input(
+ z.object({
+ url: z.string(),
+ })
+ )
+ .query(async ({ input: { url } }) => {
+ const parts = url.split('/').filter(Boolean);
+ return parts;
+ }),
+});
diff --git a/apps/web/src/server/cache.ts b/apps/web/src/server/cache.ts
new file mode 100644
index 00000000..1ce18bb9
--- /dev/null
+++ b/apps/web/src/server/cache.ts
@@ -0,0 +1,39 @@
+const cache = new Map<
+ string,
+ {
+ expires: number;
+ data: any;
+ }
+>();
+
+export function get(key: string) {
+ const hit = cache.get(key);
+ if (hit) {
+ if (hit.expires > Date.now()) {
+ return hit.data;
+ }
+ cache.delete(key);
+ }
+ return null;
+}
+
+export function set(key: string, expires: number, data: any) {
+ cache.set(key, {
+ expires: Date.now() + expires,
+ data,
+ });
+}
+
+export async function getOr(
+ key: string,
+ expires: number,
+ fn: () => Promise
+): Promise {
+ const hit = get(key);
+ if (hit) {
+ return hit;
+ }
+ const data = await fn();
+ set(key, expires, data);
+ return data;
+}
diff --git a/apps/web/src/utils/constants.ts b/apps/web/src/utils/constants.ts
index 8368df95..e79a1b0b 100644
--- a/apps/web/src/utils/constants.ts
+++ b/apps/web/src/utils/constants.ts
@@ -45,3 +45,7 @@ export const timeRanges = [
{ range: 180, title: '6mo' },
{ range: 365, title: '1y' },
] as const;
+
+export function isMinuteIntervalEnabledByRange(range: number) {
+ return range === 0.3 || range === 0.6;
+}
diff --git a/apps/web/src/utils/getters.ts b/apps/web/src/utils/getters.ts
new file mode 100644
index 00000000..613b026f
--- /dev/null
+++ b/apps/web/src/utils/getters.ts
@@ -0,0 +1,6 @@
+import type { Profile } from '@prisma/client';
+
+export function getProfileName(profile: Profile | undefined | null) {
+ if (!profile) return '';
+ return [profile.first_name, profile.last_name].filter(Boolean).join(' ');
+}
diff --git a/apps/web/src/utils/theme.ts b/apps/web/src/utils/theme.ts
index e8c3dd28..d67e187d 100644
--- a/apps/web/src/utils/theme.ts
+++ b/apps/web/src/utils/theme.ts
@@ -2,14 +2,16 @@ import resolveConfig from 'tailwindcss/resolveConfig';
import tailwinConfig from '../../tailwind.config';
-const config = resolveConfig(tailwinConfig);
+export const resolvedTailwindConfig = resolveConfig(tailwinConfig);
-export const theme = config.theme;
+export const theme = resolvedTailwindConfig.theme;
export function getChartColor(index: number): string {
- const chartColors: string[] = Object.keys(theme.colors ?? {})
+ const colors = theme?.colors ?? {};
+ const chartColors: string[] = Object.keys(colors)
.filter((key) => key.startsWith('chart-'))
- .map((key) => theme.colors[key] as string);
+ .map((key) => colors[key])
+ .filter((item): item is string => typeof item === 'string');
return chartColors[index % chartColors.length]!;
}
diff --git a/apps/web/tailwind.config.ts b/apps/web/tailwind.config.js
similarity index 97%
rename from apps/web/tailwind.config.ts
rename to apps/web/tailwind.config.js
index 591c62f5..931a5665 100644
--- a/apps/web/tailwind.config.ts
+++ b/apps/web/tailwind.config.js
@@ -82,12 +82,12 @@ const config = {
},
keyframes: {
'accordion-down': {
- from: { height: 0 },
+ from: { height: '0px' },
to: { height: 'var(--radix-accordion-content-height)' },
},
'accordion-up': {
from: { height: 'var(--radix-accordion-content-height)' },
- to: { height: 0 },
+ to: { height: '0px' },
},
},
animation: {
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 3d4fb85c..f9787164 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -60,6 +60,9 @@ importers:
'@radix-ui/react-popover':
specifier: ^1.0.7
version: 1.0.7(@types/react-dom@18.2.14)(@types/react@18.2.34)(react-dom@18.2.0)(react@18.2.0)
+ '@radix-ui/react-scroll-area':
+ specifier: ^1.0.5
+ version: 1.0.5(@types/react-dom@18.2.14)(@types/react@18.2.34)(react-dom@18.2.0)(react@18.2.0)
'@radix-ui/react-slot':
specifier: ^1.0.2
version: 1.0.2(@types/react@18.2.34)(react@18.2.0)
@@ -132,9 +135,15 @@ importers:
react-hook-form:
specifier: ^7.47.0
version: 7.47.0(react@18.2.0)
+ react-in-viewport:
+ specifier: 1.0.0-alpha.30
+ version: 1.0.0-alpha.30(react-dom@18.2.0)(react@18.2.0)
react-redux:
specifier: ^8.1.3
version: 8.1.3(@types/react-dom@18.2.14)(@types/react@18.2.34)(react-dom@18.2.0)(react@18.2.0)(redux@4.2.1)
+ react-responsive:
+ specifier: ^9.0.2
+ version: 9.0.2(react@18.2.0)
react-syntax-highlighter:
specifier: ^15.5.0
version: 15.5.0(react@18.2.0)
@@ -1073,6 +1082,12 @@ packages:
resolution: {integrity: sha512-Be5hoNF8k+lkB3uEMiCHbhbfF6aj1GnrTBnn5iYFT7GEr3TsOEp1soviEcBR0tYCgHbxjcIxJMhdbvxALJhAqg==}
requiresBuild: true
+ /@radix-ui/number@1.0.1:
+ resolution: {integrity: sha512-T5gIdVO2mmPW3NNhjNgEP3cqMXjXL9UbO0BzWcXfvdBs+BohbQxvd/K5hSVKmn9/lbTdsQVKbUcP5WLCwvUbBg==}
+ dependencies:
+ '@babel/runtime': 7.23.2
+ dev: false
+
/@radix-ui/primitive@1.0.0:
resolution: {integrity: sha512-3e7rn8FDMin4CgeL7Z/49smCA3rFYY3Ha2rUQ7HRWFadS5iCRw08ZgVT1LaNTCNqgvrUiyczLflrVrF0SRQtNA==}
dependencies:
@@ -1757,6 +1772,35 @@ packages:
react-dom: 18.2.0(react@18.2.0)
dev: false
+ /@radix-ui/react-scroll-area@1.0.5(@types/react-dom@18.2.14)(@types/react@18.2.34)(react-dom@18.2.0)(react@18.2.0):
+ resolution: {integrity: sha512-b6PAgH4GQf9QEn8zbT2XUHpW5z8BzqEc7Kl11TwDrvuTrxlkcjTD5qa/bxgKr+nmuXKu4L/W5UZ4mlP/VG/5Gw==}
+ peerDependencies:
+ '@types/react': '*'
+ '@types/react-dom': '*'
+ react: ^16.8 || ^17.0 || ^18.0
+ react-dom: ^16.8 || ^17.0 || ^18.0
+ peerDependenciesMeta:
+ '@types/react':
+ optional: true
+ '@types/react-dom':
+ optional: true
+ dependencies:
+ '@babel/runtime': 7.23.2
+ '@radix-ui/number': 1.0.1
+ '@radix-ui/primitive': 1.0.1
+ '@radix-ui/react-compose-refs': 1.0.1(@types/react@18.2.34)(react@18.2.0)
+ '@radix-ui/react-context': 1.0.1(@types/react@18.2.34)(react@18.2.0)
+ '@radix-ui/react-direction': 1.0.1(@types/react@18.2.34)(react@18.2.0)
+ '@radix-ui/react-presence': 1.0.1(@types/react-dom@18.2.14)(@types/react@18.2.34)(react-dom@18.2.0)(react@18.2.0)
+ '@radix-ui/react-primitive': 1.0.3(@types/react-dom@18.2.14)(@types/react@18.2.34)(react-dom@18.2.0)(react@18.2.0)
+ '@radix-ui/react-use-callback-ref': 1.0.1(@types/react@18.2.34)(react@18.2.0)
+ '@radix-ui/react-use-layout-effect': 1.0.1(@types/react@18.2.34)(react@18.2.0)
+ '@types/react': 18.2.34
+ '@types/react-dom': 18.2.14
+ react: 18.2.0
+ react-dom: 18.2.0(react@18.2.0)
+ dev: false
+
/@radix-ui/react-slot@1.0.0(react@18.2.0):
resolution: {integrity: sha512-3mrKauI/tWXo1Ll+gN5dHcxDPdm/Df1ufcDLCecn+pnCIVcdWE7CujXo8QaXOWRJyZyQWWbpB8eFwHzWXlv5mQ==}
peerDependencies:
@@ -2841,6 +2885,10 @@ packages:
shebang-command: 2.0.0
which: 2.0.2
+ /css-mediaquery@0.1.2:
+ resolution: {integrity: sha512-COtn4EROW5dBGlE/4PiKnh6rZpAPxDeFLaEEwt4i10jpDMFt2EhQGS79QmmrO+iKCHv0PU/HrOWEhijFd1x99Q==}
+ dev: false
+
/cssesc@3.0.0:
resolution: {integrity: sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==}
engines: {node: '>=4'}
@@ -3766,6 +3814,10 @@ packages:
engines: {node: '>=10.17.0'}
dev: true
+ /hyphenate-style-name@1.0.4:
+ resolution: {integrity: sha512-ygGZLjmXfPHj+ZWh6LwbC37l43MhfztxetbFCoYTM2VjkIUpeHgSNn7QIyVFj7YQ1Wl9Cbw5sholVJPzWvC2MQ==}
+ dev: false
+
/ignore@5.2.4:
resolution: {integrity: sha512-MAb38BcSbH0eHNBxn7ql2NH/kX33OkB3lZ1BNdh7ENeRChHTYsTvWrMubiIAMNS2llXEEgZ1MUOBtXChP3kaFQ==}
engines: {node: '>= 4'}
@@ -4174,6 +4226,12 @@ packages:
semver: 6.3.1
dev: false
+ /matchmediaquery@0.3.1:
+ resolution: {integrity: sha512-Hlk20WQHRIm9EE9luN1kjRjYXAQToHOIAHPJn9buxBwuhfTHoKUcX+lXBbxc85DVQfXYbEQ4HcwQdd128E3qHQ==}
+ dependencies:
+ css-mediaquery: 0.1.2
+ dev: false
+
/merge-stream@2.0.0:
resolution: {integrity: sha512-abv/qOcuPfk3URPfDzmZU1LKmuw8kT+0nIHvKrKgFrwifol/doWcdA4ZqsWQ8ENrFKkd67Mfpo/LovbIUsbt3w==}
dev: true
@@ -4770,6 +4828,17 @@ packages:
react: 18.2.0
dev: false
+ /react-in-viewport@1.0.0-alpha.30(react-dom@18.2.0)(react@18.2.0):
+ resolution: {integrity: sha512-fmjnsfWM+D739UKgQNY9E03Bjf+q9iTwMqwqXboThlfYZ7yLWXEGvTNsCPKwDYlrPinDX8/nZl4wAABsc5OH7w==}
+ peerDependencies:
+ react: ^16.8.3 || ^17.0.0 || ^18.0.0
+ react-dom: ^16.8.3 || ^17.0.0 || ^18.0.0
+ dependencies:
+ hoist-non-react-statics: 3.3.2
+ react: 18.2.0
+ react-dom: 18.2.0(react@18.2.0)
+ dev: false
+
/react-is@16.13.1:
resolution: {integrity: sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==}
dev: false
@@ -4881,6 +4950,19 @@ packages:
react-dom: 18.2.0(react@18.2.0)
dev: false
+ /react-responsive@9.0.2(react@18.2.0):
+ resolution: {integrity: sha512-+4CCab7z8G8glgJoRjAwocsgsv6VA2w7JPxFWHRc7kvz8mec1/K5LutNC2MG28Mn8mu6+bu04XZxHv5gyfT7xQ==}
+ engines: {node: '>=0.10'}
+ peerDependencies:
+ react: '>=16.8.0'
+ dependencies:
+ hyphenate-style-name: 1.0.4
+ matchmediaquery: 0.3.1
+ prop-types: 15.8.1
+ react: 18.2.0
+ shallow-equal: 1.2.1
+ dev: false
+
/react-smooth@2.0.5(prop-types@15.8.1)(react-dom@18.2.0)(react@18.2.0):
resolution: {integrity: sha512-BMP2Ad42tD60h0JW6BFaib+RJuV5dsXJK9Baxiv/HlNFjvRLqA9xrNKxVWnUIZPQfzUwGXIlU/dSYLU+54YGQA==}
peerDependencies:
@@ -5175,6 +5257,10 @@ packages:
has-property-descriptors: 1.0.1
dev: false
+ /shallow-equal@1.2.1:
+ resolution: {integrity: sha512-S4vJDjHHMBaiZuT9NPb616CSmLf618jawtv3sufLl6ivK8WocjAo58cXwbRV1cgqxH0Qbv+iUt6m05eqEa2IRA==}
+ dev: false
+
/shebang-command@2.0.0:
resolution: {integrity: sha512-kHxr2zZpYtdmrN1qDjrrX/Z1rR1kG8Dx+gkpK1G4eXmvXswmcE1hTWBWYUzlraYw1/yZp6YuDY77YtvbN0dmDA==}
engines: {node: '>=8'}