) => {
15 | const sortedRanges = ranges.sort((a, b) => b.duration - a.duration);
16 | return sortedRanges.slice(0, 5);
17 | };
18 |
19 | export function Streaks() {
20 | const {
21 | habitData: { dates, color },
22 | } = useHabit();
23 | // TODO: needs to ignore inactive days
24 | const ranges = useMemo(() => {
25 | const streakRangesData = streakRanges(Object.keys(dates));
26 | const top5Ranges = getTop5Ranges(streakRangesData);
27 | const top5RangesPercentages = getTop5RangesPercentages(top5Ranges);
28 |
29 | return top5Ranges.map((range, index) => ({
30 | ...range,
31 | percentage: top5RangesPercentages[index],
32 | }));
33 | }, [dates]);
34 |
35 | const isLightColor = lightOrDark(color) === "light";
36 |
37 | return (
38 |
39 | {ranges.map((item, index) => (
40 | // biome-ignore lint/suspicious/noArrayIndexKey:
41 |
42 |
43 | {dayjs(new Date(item.start)).format("MMM DD")}
44 |
45 |
57 | {item.duration}
58 |
59 |
60 | {dayjs(new Date(item.end ? item.end : item.start)).format("MMM DD")}
61 |
62 |
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/calendar/weekly/sortable-list.tsx:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/lmssiehdev/redoit/09871a50208486d9aad53a95a55dc5e3b781f56b/apps/offline-nextjs/src/components/calendar/weekly/sortable-list.tsx
--------------------------------------------------------------------------------
/apps/offline-nextjs/src/components/calendar/weekly/view.tsx:
--------------------------------------------------------------------------------
1 | "use client";
2 |
3 | import { DayWithToolTip } from "@/components/calendar/day";
4 | import { Button, buttonVariants } from "@/components/ui/button";
5 | import { DAYS } from "@/constants";
6 | import { HabitProvider } from "@/providers/habit-provider";
7 | import { useHabitsStore } from "@/state";
8 | import {
9 | Archive,
10 | CaretLeft,
11 | CaretRight,
12 | DotsSixVertical,
13 | DotsThreeVertical,
14 | Plus,
15 | StackPlus,
16 | } from "@phosphor-icons/react";
17 | import dayjs from "dayjs";
18 | import { formatDateRange } from "little-date";
19 | import { useEffect } from "react";
20 |
21 | import { HabitColor, RepeatedHeader } from "@/components/misc";
22 | import {
23 | DropDrawer,
24 | DropDrawerContent,
25 | DropDrawerItem,
26 | DropDrawerSeparator,
27 | DropDrawerTrigger,
28 | } from "@/components/ui/dropdrawer";
29 | import { useMediaQuery } from "@/hooks/use-media-query";
30 | import { useIsMobile } from "@/hooks/use-mobile";
31 | import { cn } from "@/lib/utils";
32 | import {
33 | WeeklyDateProvider,
34 | useWeeklyDate,
35 | } from "@/providers/weekly-navigation";
36 | import { Status } from "@/types";
37 | import {
38 | DndContext,
39 | type DragEndEvent,
40 | KeyboardSensor,
41 | PointerSensor,
42 | closestCenter,
43 | useSensor,
44 | useSensors,
45 | } from "@dnd-kit/core";
46 | import {
47 | restrictToVerticalAxis,
48 | restrictToWindowEdges,
49 | } from "@dnd-kit/modifiers";
50 | import {
51 | type AnimateLayoutChanges,
52 | SortableContext,
53 | defaultAnimateLayoutChanges,
54 | sortableKeyboardCoordinates,
55 | useSortable,
56 | verticalListSortingStrategy,
57 | } from "@dnd-kit/sortable";
58 | import { CSS } from "@dnd-kit/utilities";
59 | import Link from "next/link";
60 | import { usePathname } from "next/navigation";
61 |
62 | function WeeklyNavigation() {
63 | const { NEXT_DAY, PREV_DAY, dateArray } = useWeeklyDate();
64 |
65 | return (
66 |
67 |
75 |
76 | {dateArray.map((dateString) => {
77 | const date = new Date(dateString);
78 | return (
79 |
83 |
84 | {DAYS[date.getDay()].substring(0, 2)}
85 | {date.getDate()}
86 |
87 |
88 | );
89 | })}
90 |
91 |
92 | {formatDateRange(
93 | dayjs(dateArray[0]).startOf("day").toDate(),
94 | dayjs(dateArray[dateArray.length - 1])
95 | .startOf("day")
96 | .toDate(),
97 | {
98 | includeTime: false,
99 | },
100 | )}
101 |
102 |
105 |
164 |
165 |
166 | {!isArchived && (
167 |
176 | )}
177 |
178 |
182 | {name}
183 |
184 | {isMobile &&
{Action}
}
185 |
186 |
187 |
188 | {dateArray.map((date) => (
189 | markHabit({ id: habitId, date })}
193 | />
194 | ))}
195 |
196 | {!isMobile && Action}
197 |
198 |
199 |
310 |
317 |
318 | Add habit
319 |
320 |
321 | {dateArray.map((date) => (
322 |
{caluculateDateStreak(date)}
323 | ))}
324 |
325 |
326 |
345 | {showArchived ? (
346 | <>
347 |
348 |
349 | You don’t have any archived habits yet!
350 |
351 |
352 | ) : (
353 | <>
354 |
355 |
Your habit list is empty!
356 |
363 |
364 | Add habit
365 |
366 |
367 | )}
368 |
374 |
375 | {showArchived ? (
376 |
377 |
378 |
379 |
380 | ) : (
381 |
382 | )}
383 |
384 |
23 | {colors.map((color) => (
24 |
33 |
34 |
35 | );
36 | }
37 |
--------------------------------------------------------------------------------
/apps/offline-nextjs/src/components/habit-form.tsx:
--------------------------------------------------------------------------------
1 | import { zodResolver } from "@hookform/resolvers/zod";
2 | import { type Control, useController, useForm } from "react-hook-form";
3 | import * as z from "zod";
4 |
5 | import { Button } from "@/components/ui/button";
6 | import {
7 | Form,
8 | FormControl,
9 | FormField,
10 | FormItem,
11 | FormLabel,
12 | FormMessage,
13 | } from "@/components/ui/form";
14 | import { Input } from "@/components/ui/input";
15 |
16 | import { ColorPicker } from "@/components/color-picker";
17 | import { Switch } from "@/components/ui/switch";
18 | import { ToggleGroup, ToggleGroupItem } from "@/components/ui/toggle-group";
19 | import { DAYS, DEFAULT_HABIT_COLOR } from "@/constants";
20 | import type { HabitData } from "@/types";
21 | import { useMemo } from "react";
22 |
23 | const HABIT_NAME_MAX_LENGTH = 30;
24 |
25 | function frequencyBooleanToString(payload?: boolean[]) {
26 | if (!payload) return Array.from({ length: 7 }, (_, i) => String(i));
27 | const frequency: string[] = [];
28 | payload.forEach((isActive, i) => isActive && frequency.push(String(i)));
29 | return frequency;
30 | }
31 |
32 | function frequencyStringToBoolean(payload: string[]) {
33 | const frequency = Array.from({ length: 7 }, () => false);
34 | for (const idx of payload) {
35 | frequency[Number(idx)] = true;
36 | }
37 | return frequency;
38 | }
39 |
40 | const formSchema = z.object({
41 | name: z
42 | .string()
43 | .min(1, {
44 | message: "Please provide a valid name.",
45 | })
46 | .transform((val) => val.trim().slice(0, HABIT_NAME_MAX_LENGTH)),
47 | color: z.string(),
48 | archived: z.boolean(),
49 | frequency: z.string().array(),
50 | });
51 |
52 | export function HabitForm({
53 | onSubmit,
54 | habitData,
55 | }: {
56 | habitData?: Partial;
57 | onSubmit: (
58 | payload: Pick,
59 | ) => void;
60 | }) {
61 | const isEditing = useMemo(() => habitData?.name !== undefined, [habitData]);
62 | const form = useForm>({
63 | resolver: zodResolver(formSchema),
64 | defaultValues: {
65 | name: habitData?.name ?? "",
66 | color: habitData?.color ?? DEFAULT_HABIT_COLOR,
67 | archived: habitData?.isArchived ?? false,
68 | frequency: frequencyBooleanToString(habitData?.frequency),
69 | },
70 | });
71 |
72 | function handleFormSubmit(values: z.infer) {
73 | const { name, color, archived, frequency } = values;
74 |
75 | onSubmit({
76 | name,
77 | color,
78 | isArchived: archived,
79 | frequency: frequencyStringToBoolean(frequency),
80 | });
81 | // posthog.capture(isEditing ? "habit_update" : "habit_create");
82 | // form.setValue("name", "");
83 | }
84 |
85 | return (
86 |
157 |
158 | );
159 | }
160 |
161 | function FrequencyForm({
162 | control,
163 | }: {
164 | control: Control<
165 | {
166 | name: string;
167 | color: string;
168 | archived: boolean;
169 | frequency: string[];
170 | },
171 | // biome-ignore lint/suspicious/noExplicitAny:
172 | any
173 | >;
174 | }) {
175 | const {
176 | field: { value, onChange },
177 | } = useController({ control, name: "frequency" });
178 |
179 | const handleWeekDaysClick = () => {
180 | onChange(
181 | frequencyBooleanToString([false, true, true, true, true, true, false]),
182 | );
183 | };
184 |
185 | const handleEveryDayClick = () => {
186 | onChange(
187 | frequencyBooleanToString([true, true, true, true, true, true, true]),
188 | );
189 | };
190 |
191 | const isWeekDaysSelected =
192 | value.length === 5 && !value.includes("0") && !value.includes("6");
193 | const isEveryDaySelected = value.length === 7;
194 |
195 | return (
196 | (
200 |
201 | Frequency
202 |
203 |
204 | {
207 | if (value.length === 0) return;
208 | field.onChange(value);
209 | }}
210 | className="gap-0"
211 | value={field.value}
212 | >
213 | {DAYS.map((day, index) => (
214 |
220 | {day.substring(0, 3)}
221 |
222 | ))}
223 |
224 |
225 |
226 |
234 |
242 |
243 |
244 |
245 | )}
246 | />
247 | );
248 | }
249 |
--------------------------------------------------------------------------------
/apps/offline-nextjs/src/components/misc.tsx:
--------------------------------------------------------------------------------
1 | import { normalizeColor } from "@/components/calendar/monthly/overview";
2 | import { Button } from "@/components/ui/button";
3 | import { cn } from "@/lib/utils";
4 | import { ArrowLeft } from "@phosphor-icons/react";
5 | import { useRouter } from "next/navigation";
6 |
7 | export function GoToMainPageButton() {
8 | const { back } = useRouter();
9 |
10 | return (
11 |
14 | );
15 | }
16 |
17 | export function RepeatedHeader({
18 | word,
19 | }: { word: "habits" | "archived" | "stats" }) {
20 | // @HACKY: use tailwind safelist
21 | const content = {
22 | habits: "after:content-['habits']",
23 | archived: "after:content-['archived']",
24 | stats: "after:content-['stats']",
25 | };
26 | return (
27 |
33 | {word}
34 |
35 | );
36 | }
37 |
38 | export function HabitColor({
39 | color,
40 | className,
41 | }: {
42 | color: string;
43 | className?: string;
44 | }) {
45 | const { dayCompletedColor } = normalizeColor(color);
46 | return (
47 |
53 | );
54 | }
55 |
--------------------------------------------------------------------------------
/apps/offline-nextjs/src/components/ui/button.tsx:
--------------------------------------------------------------------------------
1 | import { Slot } from "@radix-ui/react-slot";
2 | import { type VariantProps, cva } from "class-variance-authority";
3 | import * as React from "react";
4 |
5 | import { cn } from "@/lib/utils";
6 |
7 | const buttonVariants = cva(
8 | "inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50",
9 | {
10 | variants: {
11 | variant: {
12 | default:
13 | "bg-primary text-primary-foreground shadow hover:bg-primary/90",
14 | destructive:
15 | "bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90",
16 | outline:
17 | "border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground",
18 | secondary:
19 | "bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80",
20 | ghost: "hover:bg-accent hover:text-accent-foreground",
21 | link: "text-primary underline-offset-4 hover:underline",
22 | },
23 | size: {
24 | default: "h-9 px-4 py-2",
25 | xs: "h-6 rounded-sm px-2.5 text-xs",
26 | sm: "h-8 rounded-md px-3 text-xs",
27 | lg: "h-10 rounded-md px-8",
28 | icon: "h-9 w-9",
29 | },
30 | },
31 | defaultVariants: {
32 | variant: "default",
33 | size: "default",
34 | },
35 | },
36 | );
37 |
38 | export interface ButtonProps
39 | extends React.ButtonHTMLAttributes,
40 | VariantProps {
41 | asChild?: boolean;
42 | }
43 |
44 | const Button = React.forwardRef(
45 | ({ className, variant, size, asChild = false, ...props }, ref) => {
46 | const Comp = asChild ? Slot : "button";
47 | return (
48 |
53 | );
54 | },
55 | );
56 | Button.displayName = "Button";
57 |
58 | export { Button, buttonVariants };
59 |
--------------------------------------------------------------------------------
/apps/offline-nextjs/src/components/ui/card.tsx:
--------------------------------------------------------------------------------
1 | import * as React from "react";
2 |
3 | import { cn } from "@/lib/utils";
4 |
5 | const Card = React.forwardRef<
6 | HTMLDivElement,
7 | React.HTMLAttributes
8 | >(({ className, ...props }, ref) => (
9 |
17 | ));
18 | Card.displayName = "Card";
19 |
20 | const CardHeader = React.forwardRef<
21 | HTMLDivElement,
22 | React.HTMLAttributes
23 | >(({ className, ...props }, ref) => (
24 |
29 | ));
30 | CardHeader.displayName = "CardHeader";
31 |
32 | const CardTitle = React.forwardRef<
33 | HTMLParagraphElement,
34 | React.HTMLAttributes
35 | >(({ className, ...props }, ref) => (
36 |
41 | ));
42 | CardTitle.displayName = "CardTitle";
43 |
44 | const CardDescription = React.forwardRef<
45 | HTMLParagraphElement,
46 | React.HTMLAttributes
47 | >(({ className, ...props }, ref) => (
48 |
53 | ));
54 | CardDescription.displayName = "CardDescription";
55 |
56 | const CardContent = React.forwardRef<
57 | HTMLDivElement,
58 | React.HTMLAttributes
59 | >(({ className, ...props }, ref) => (
60 |
61 | ));
62 | CardContent.displayName = "CardContent";
63 |
64 | const CardFooter = React.forwardRef<
65 | HTMLDivElement,
66 | React.HTMLAttributes
67 | >(({ className, ...props }, ref) => (
68 |
73 | ));
74 | CardFooter.displayName = "CardFooter";
75 |
76 | export {
77 | Card,
78 | CardHeader,
79 | CardFooter,
80 | CardTitle,
81 | CardDescription,
82 | CardContent,
83 | };
84 |
--------------------------------------------------------------------------------
/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 |