()(
38 | immer(
39 | persist(
40 | (set) => ({
41 | data: {},
42 | orderedData: [] as string[],
43 | addHabit: (payload) => {
44 | const id = generateId(10);
45 | const newHabit: HabitData = {
46 | id,
47 | createdAt: normalizeDate(new Date()),
48 | isArchived: false,
49 | dates: {},
50 | // @ts-expect-error typescript being annoying
51 | color: DEFAULT_HABIT_COLOR,
52 | // @ts-expect-error typescript being annoying
53 | name: "DEFAULT_NAME",
54 | frequency: Array.from({ length: 7 }, () => true),
55 | ...payload,
56 | };
57 | return set((state) => {
58 | state.data[id] = newHabit;
59 | state.orderedData.push(newHabit.id);
60 | });
61 | },
62 | updateHabitData: ({ id, payload }) => {
63 | set((state) => {
64 | const habit = state.data[id];
65 | Object.assign(habit, payload);
66 | });
67 | },
68 | archiveHabit: (id, archived) => {
69 | set((state) => {
70 | if (archived !== undefined) {
71 | state.data[id].isArchived = archived;
72 | return;
73 | }
74 | state.data[id].isArchived = !state.data[id].isArchived;
75 | });
76 | },
77 | deleteHabit: (id) => {
78 | return set((state) => {
79 | delete state.data[id];
80 | state.orderedData = state.orderedData.filter(
81 | (habitId) => habitId !== id,
82 | );
83 | });
84 | },
85 | markHabit: ({ id, date }) => {
86 | set((state) => {
87 | const habit = state.data[id];
88 | const status = habit.dates[date];
89 |
90 | if (status === undefined) {
91 | habit.dates[date] = Status.Completed;
92 | return;
93 | }
94 |
95 | switch (status) {
96 | case Status.Completed: {
97 | habit.dates[date] = Status.Skipped;
98 | break;
99 | }
100 | case Status.Skipped: {
101 | delete habit.dates[date];
102 | break;
103 | }
104 | }
105 | });
106 | },
107 | reorderHabit: ({ activeId, overId }) =>
108 | set((state) => {
109 | const oldIndex = state.orderedData.indexOf(activeId);
110 | const newIndex = state.orderedData.indexOf(overId);
111 | state.orderedData = arrayMove(
112 | state.orderedData,
113 | oldIndex,
114 | newIndex,
115 | );
116 | }),
117 | }),
118 | {
119 | name: "habits",
120 | },
121 | ),
122 | ),
123 | );
124 |
--------------------------------------------------------------------------------
/apps/offline-nextjs/src/components/calendar/monthly/view.tsx:
--------------------------------------------------------------------------------
1 | import { DayWithToolTip } from "@/components/calendar/day";
2 | import { WeekChart } from "@/components/calendar/monthly/charts";
3 | import { Overview } from "@/components/calendar/monthly/overview";
4 | import { Button } from "@/components/ui/button";
5 | import { DAYS, MONTHS } from "@/constants";
6 | import { type Dayjs, dayjs, normalizeDate } from "@/lib/day";
7 | import { useHabit } from "@/providers/habit-provider";
8 | import { useMonthContext } from "@/providers/monthly-navigation";
9 | import { MonthDateProvider } from "@/providers/monthly-navigation";
10 | import { useHabitsStore } from "@/state";
11 | import { CaretLeft, CaretRight, ChartBar } from "@phosphor-icons/react";
12 | import { Fragment } from "react";
13 |
14 | function MonthlyNavigation() {
15 | const {
16 | currentMonth,
17 | currentYear,
18 | goToNextMonth,
19 | goToPrevMonth,
20 | isCurrentMonth,
21 | } = useMonthContext();
22 |
23 | return (
24 |
25 |
{`${MONTHS[currentMonth]} ${currentYear}`}
26 |
27 |
30 |
38 |
39 |
52 | {DAYS.map((day) => (
53 |
54 | {day.substring(0, 2)}
55 |
56 | ))}
57 | {Array.from({ length: startOffset }, (_, i) => (
58 | // biome-ignore lint/suspicious/noArrayIndexKey:
59 |
60 | ))}
61 | {Array.from({ length: daysInMonth }, (_, i) => {
62 | const date: Dayjs = dayjs(
63 | `${currentMonth + 1}-${i + 1}-${currentYear}`,
64 | );
65 | return (
66 | // biome-ignore lint/suspicious/noArrayIndexKey:
67 |
68 | {
71 | markHabit({ id: habitData.id, date: normalizeDate(date) });
72 | }}
73 | />
74 |
75 | );
76 | })}
77 |
103 |
104 |
No Stats Available
105 |
Start tracking your habits to see your progress!
106 |
113 |
114 | OVERVIEW
115 |
116 |
117 |
118 |
119 |
120 | WEEKLY ACTIVITY
121 |
122 |
123 |
124 | {/*
125 |
126 | Streaks
127 |
128 |
129 | */}
130 |
131 | );
132 | }
133 |
--------------------------------------------------------------------------------
/apps/offline-nextjs/src/components/ui/form.tsx:
--------------------------------------------------------------------------------
1 | import type * as LabelPrimitive from "@radix-ui/react-label";
2 | import { Slot } from "@radix-ui/react-slot";
3 | import * as React from "react";
4 | import {
5 | Controller,
6 | type ControllerProps,
7 | type FieldPath,
8 | type FieldValues,
9 | FormProvider,
10 | useFormContext,
11 | } from "react-hook-form";
12 |
13 | import { Label } from "@/components/ui/label";
14 | import { cn } from "@/lib/utils";
15 |
16 | const Form = FormProvider;
17 |
18 | type FormFieldContextValue<
19 | TFieldValues extends FieldValues = FieldValues,
20 | TName extends FieldPath = FieldPath,
21 | > = {
22 | name: TName;
23 | };
24 |
25 | const FormFieldContext = React.createContext(
26 | {} as FormFieldContextValue,
27 | );
28 |
29 | const FormField = <
30 | TFieldValues extends FieldValues = FieldValues,
31 | TName extends FieldPath = FieldPath,
32 | >({
33 | ...props
34 | }: ControllerProps) => {
35 | return (
36 |
37 |
38 |
39 | );
40 | };
41 |
42 | const useFormField = () => {
43 | const fieldContext = React.useContext(FormFieldContext);
44 | const itemContext = React.useContext(FormItemContext);
45 | const { getFieldState, formState } = useFormContext();
46 |
47 | const fieldState = getFieldState(fieldContext.name, formState);
48 |
49 | if (!fieldContext) {
50 | throw new Error("useFormField should be used within ");
51 | }
52 |
53 | const { id } = itemContext;
54 |
55 | return {
56 | id,
57 | name: fieldContext.name,
58 | formItemId: `${id}-form-item`,
59 | formDescriptionId: `${id}-form-item-description`,
60 | formMessageId: `${id}-form-item-message`,
61 | ...fieldState,
62 | };
63 | };
64 |
65 | type FormItemContextValue = {
66 | id: string;
67 | };
68 |
69 | const FormItemContext = React.createContext(
70 | {} as FormItemContextValue,
71 | );
72 |
73 | const FormItem = React.forwardRef<
74 | HTMLDivElement,
75 | React.HTMLAttributes
76 | >(({ className, ...props }, ref) => {
77 | const id = React.useId();
78 |
79 | return (
80 |
81 |
82 |
83 | );
84 | });
85 | FormItem.displayName = "FormItem";
86 |
87 | const FormLabel = React.forwardRef<
88 | React.ElementRef,
89 | React.ComponentPropsWithoutRef
90 | >(({ className, ...props }, ref) => {
91 | const { error, formItemId } = useFormField();
92 |
93 | return (
94 |
100 | );
101 | });
102 | FormLabel.displayName = "FormLabel";
103 |
104 | const FormControl = React.forwardRef<
105 | React.ElementRef,
106 | React.ComponentPropsWithoutRef
107 | >(({ ...props }, ref) => {
108 | const { error, formItemId, formDescriptionId, formMessageId } =
109 | useFormField();
110 |
111 | return (
112 |
123 | );
124 | });
125 | FormControl.displayName = "FormControl";
126 |
127 | const FormDescription = React.forwardRef<
128 | HTMLParagraphElement,
129 | React.HTMLAttributes
130 | >(({ className, ...props }, ref) => {
131 | const { formDescriptionId } = useFormField();
132 |
133 | return (
134 |
140 | );
141 | });
142 | FormDescription.displayName = "FormDescription";
143 |
144 | const FormMessage = React.forwardRef<
145 | HTMLParagraphElement,
146 | React.HTMLAttributes
147 | >(({ className, children, ...props }, ref) => {
148 | const { error, formMessageId } = useFormField();
149 | const body = error ? String(error?.message) : children;
150 |
151 | if (!body) {
152 | return null;
153 | }
154 |
155 | return (
156 |
162 | {body}
163 |
164 | );
165 | });
166 | FormMessage.displayName = "FormMessage";
167 |
168 | export {
169 | useFormField,
170 | Form,
171 | FormItem,
172 | FormLabel,
173 | FormControl,
174 | FormDescription,
175 | FormMessage,
176 | FormField,
177 | };
178 |
--------------------------------------------------------------------------------
/apps/offline-nextjs/src/components/calendar/monthly/overview.tsx:
--------------------------------------------------------------------------------
1 | import { percentage } from "@/lib/completion-rate";
2 | import { completionRate as completionRateRewrite } from "@/lib/completion-rate";
3 | import { differenceInDays, sortDates } from "@/lib/day";
4 | import { calculateStreaks } from "@/lib/streaks";
5 | import { LightenDarkenColor, convertHex, lightOrDark } from "@/lib/utils";
6 | import { useHabit } from "@/providers/habit-provider";
7 | import { useSettingsStore } from "@/state/settings";
8 | import { Status } from "@/types";
9 | import { CheckFat, Lightning, Percent } from "@phosphor-icons/react";
10 | import { CalendarBlank } from "@phosphor-icons/react/dist/ssr";
11 | import dayjs from "dayjs";
12 | import { useMemo } from "react";
13 |
14 | export function normalizeColor(color: string) {
15 | const isLightColor = lightOrDark(color) === "light";
16 | const opacity = isLightColor ? 0.8 : 0.4;
17 |
18 | const daySkippedColor = convertHex(
19 | LightenDarkenColor(color, isLightColor ? -50 : 60),
20 | opacity,
21 | );
22 | const dayCompletedColor = convertHex(color, isLightColor ? 0.8 : 0.6);
23 |
24 | const chartSkippedColor = convertHex(
25 | LightenDarkenColor(color, isLightColor ? -50 : 40),
26 | isLightColor ? 0.8 : 0.6,
27 | );
28 | return {
29 | daySkippedColor,
30 | dayCompletedColor,
31 | chartCompletedColor: dayCompletedColor,
32 | chartSkippedColor,
33 | };
34 | }
35 |
36 | export function Overview() {
37 | const {
38 | habitData: { dates, color, frequency },
39 | } = useHabit();
40 |
41 | const countSkippedDaysInStreak = useSettingsStore(
42 | (state) => state.countSkippedDaysInStreak,
43 | );
44 |
45 | const { currentStreak, longestStreak } = useMemo(
46 | () =>
47 | calculateStreaks({
48 | dates: Object.keys(dates).map((d) => dayjs(d).toDate()),
49 | shouldSkipDay: ({ tomorrow }) => {
50 | return !frequency[tomorrow.day()];
51 | },
52 | }),
53 | [dates, frequency],
54 | );
55 |
56 | const stats = useMemo(() => {
57 | const successfulDays = Object.values(dates).filter(
58 | (v) => countSkippedDaysInStreak || v === Status.Completed,
59 | ).length;
60 |
61 | const completionRate = () => {
62 | const sortedDates = sortDates(
63 | Object.keys(dates).map((d) => dayjs(d).toDate()),
64 | );
65 |
66 | const firstDate = sortedDates[0];
67 |
68 | const totalDays = Math.max(
69 | differenceInDays(new Date(), firstDate) + 1,
70 | 1,
71 | );
72 |
73 | return percentage(successfulDays, totalDays);
74 | };
75 |
76 | console.log(
77 | Object.entries(dates)
78 | .filter(
79 | ([_, value]) =>
80 | countSkippedDaysInStreak || value === Status.Completed,
81 | )
82 | .map(([key]) => key),
83 | frequency,
84 | );
85 |
86 | console.log({
87 | old: completionRate(),
88 | new: completionRateRewrite(
89 | Object.entries(dates)
90 | .filter(
91 | ([key, value]) =>
92 | countSkippedDaysInStreak || value === Status.Completed,
93 | )
94 | .map(([key]) => key),
95 | frequency,
96 | ),
97 | });
98 | return [
99 | {
100 | name: "Current Streak",
101 | value: currentStreak,
102 | Icon: Lightning,
103 | },
104 | {
105 | name: "Longest Streak",
106 | value: longestStreak,
107 | Icon: CalendarBlank,
108 | },
109 | {
110 | name: "Successful",
111 | value: successfulDays,
112 | Icon: CheckFat,
113 | },
114 | {
115 | name: "Completion Rate",
116 | value: completionRate(),
117 | Icon: Percent,
118 | },
119 | ];
120 | }, [
121 | dates,
122 | currentStreak,
123 | longestStreak,
124 | frequency,
125 | countSkippedDaysInStreak,
126 | ]);
127 |
128 | const styles = useMemo(() => {
129 | const { daySkippedColor } = normalizeColor(color);
130 |
131 | return { color, backgroundColor: daySkippedColor };
132 | }, [color]);
133 |
134 | return (
135 | <>
136 |
137 | {stats.map((data) => {
138 | const { name, value, Icon } = data;
139 | return (
140 |
147 |
148 |
153 |
154 |
155 |
{name}
156 |
157 | {value}
158 |
159 |
160 |
161 |
162 | );
163 | })}
164 |
226 |
234 |
242 |
243 |
244 |
245 | )}
246 | />
247 | );
248 | }
249 |
--------------------------------------------------------------------------------
/apps/offline-nextjs/src/components/ui/dropdown-menu.tsx:
--------------------------------------------------------------------------------
1 | "use client";
2 |
3 | import { cn } from "@/lib/utils";
4 | import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
5 | import {
6 | CheckIcon,
7 | ChevronRightIcon,
8 | DotFilledIcon,
9 | } from "@radix-ui/react-icons";
10 | import * as React from "react";
11 |
12 | const DropdownMenu = DropdownMenuPrimitive.Root;
13 |
14 | const DropdownMenuTrigger = DropdownMenuPrimitive.Trigger;
15 |
16 | const DropdownMenuGroup = DropdownMenuPrimitive.Group;
17 |
18 | const DropdownMenuPortal = DropdownMenuPrimitive.Portal;
19 |
20 | const DropdownMenuSub = DropdownMenuPrimitive.Sub;
21 |
22 | const DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup;
23 |
24 | const DropdownMenuSubTrigger = React.forwardRef<
25 | React.ElementRef,
26 | React.ComponentPropsWithoutRef & {
27 | inset?: boolean;
28 | }
29 | >(({ className, inset, children, ...props }, ref) => (
30 |
39 | {children}
40 |
41 |
42 | ));
43 | DropdownMenuSubTrigger.displayName =
44 | DropdownMenuPrimitive.SubTrigger.displayName;
45 |
46 | const DropdownMenuSubContent = React.forwardRef<
47 | React.ElementRef,
48 | React.ComponentPropsWithoutRef
49 | >(({ className, ...props }, ref) => (
50 |
58 | ));
59 | DropdownMenuSubContent.displayName =
60 | DropdownMenuPrimitive.SubContent.displayName;
61 |
62 | const DropdownMenuContent = React.forwardRef<
63 | React.ElementRef,
64 | React.ComponentPropsWithoutRef
65 | >(({ className, sideOffset = 4, ...props }, ref) => (
66 |
67 |
77 |
78 | ));
79 | DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName;
80 |
81 | const DropdownMenuItem = React.forwardRef<
82 | React.ElementRef,
83 | React.ComponentPropsWithoutRef & {
84 | inset?: boolean;
85 | }
86 | >(({ className, inset, ...props }, ref) => (
87 | svg]:size-4 [&>svg]:shrink-0",
91 | inset && "pl-8",
92 | className,
93 | )}
94 | {...props}
95 | />
96 | ));
97 | DropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName;
98 |
99 | const DropdownMenuCheckboxItem = React.forwardRef<
100 | React.ElementRef,
101 | React.ComponentPropsWithoutRef
102 | >(({ className, children, checked, ...props }, ref) => (
103 |
112 |
113 |
114 |
115 |
116 |
117 | {children}
118 |
119 | ));
120 | DropdownMenuCheckboxItem.displayName =
121 | DropdownMenuPrimitive.CheckboxItem.displayName;
122 |
123 | const DropdownMenuRadioItem = React.forwardRef<
124 | React.ElementRef,
125 | React.ComponentPropsWithoutRef
126 | >(({ className, children, ...props }, ref) => (
127 |
135 |
136 |
137 |
138 |
139 |
140 | {children}
141 |
142 | ));
143 | DropdownMenuRadioItem.displayName = DropdownMenuPrimitive.RadioItem.displayName;
144 |
145 | const DropdownMenuLabel = React.forwardRef<
146 | React.ElementRef,
147 | React.ComponentPropsWithoutRef & {
148 | inset?: boolean;
149 | }
150 | >(({ className, inset, ...props }, ref) => (
151 |
160 | ));
161 | DropdownMenuLabel.displayName = DropdownMenuPrimitive.Label.displayName;
162 |
163 | const DropdownMenuSeparator = React.forwardRef<
164 | React.ElementRef,
165 | React.ComponentPropsWithoutRef
166 | >(({ className, ...props }, ref) => (
167 |
172 | ));
173 | DropdownMenuSeparator.displayName = DropdownMenuPrimitive.Separator.displayName;
174 |
175 | const DropdownMenuShortcut = ({
176 | className,
177 | ...props
178 | }: React.HTMLAttributes) => {
179 | return (
180 |
184 | );
185 | };
186 | DropdownMenuShortcut.displayName = "DropdownMenuShortcut";
187 |
188 | export {
189 | DropdownMenu,
190 | DropdownMenuTrigger,
191 | DropdownMenuContent,
192 | DropdownMenuItem,
193 | DropdownMenuCheckboxItem,
194 | DropdownMenuRadioItem,
195 | DropdownMenuLabel,
196 | DropdownMenuSeparator,
197 | DropdownMenuShortcut,
198 | DropdownMenuGroup,
199 | DropdownMenuPortal,
200 | DropdownMenuSub,
201 | DropdownMenuSubContent,
202 | DropdownMenuSubTrigger,
203 | DropdownMenuRadioGroup,
204 | };
205 |
--------------------------------------------------------------------------------
/apps/offline-nextjs/src/components/ui/chart.tsx:
--------------------------------------------------------------------------------
1 | "use client";
2 |
3 | import * as React from "react";
4 | import * as RechartsPrimitive from "recharts";
5 |
6 | import { cn } from "@/lib/utils";
7 |
8 | // Format: { THEME_NAME: CSS_SELECTOR }
9 | const THEMES = { light: "", dark: ".dark" } as const;
10 |
11 | export type ChartConfig = {
12 | [k in string]: {
13 | label?: React.ReactNode;
14 | icon?: React.ComponentType;
15 | } & (
16 | | { color?: string; theme?: never }
17 | | { color?: never; theme: Record }
18 | );
19 | };
20 |
21 | type ChartContextProps = {
22 | config: ChartConfig;
23 | };
24 |
25 | const ChartContext = React.createContext(null);
26 |
27 | function useChart() {
28 | const context = React.useContext(ChartContext);
29 |
30 | if (!context) {
31 | throw new Error("useChart must be used within a ");
32 | }
33 |
34 | return context;
35 | }
36 |
37 | const ChartContainer = React.forwardRef<
38 | HTMLDivElement,
39 | React.ComponentProps<"div"> & {
40 | config: ChartConfig;
41 | children: React.ComponentProps<
42 | typeof RechartsPrimitive.ResponsiveContainer
43 | >["children"];
44 | }
45 | >(({ id, className, children, config, ...props }, ref) => {
46 | const uniqueId = React.useId();
47 | const chartId = `chart-${id || uniqueId.replace(/:/g, "")}`;
48 |
49 | return (
50 |
51 |
60 |
61 |
62 | {children}
63 |
64 |
65 |
66 | );
67 | });
68 | ChartContainer.displayName = "Chart";
69 |
70 | const ChartStyle = ({ id, config }: { id: string; config: ChartConfig }) => {
71 | const colorConfig = Object.entries(config).filter(
72 | ([, config]) => config.theme || config.color,
73 | );
74 |
75 | if (!colorConfig.length) {
76 | return null;
77 | }
78 |
79 | return (
80 |