salat 4.10.0 → 5.0.0

package/README.md

@@ -62,9 +62,6 @@ Commands:
   hijri                     Display the current hijri date
   guide                     Show a rich visual guide to using salat-cli
   cities                    Display the list of available city names
-  help [command]  ] [city]  Get prayer times for a city
-  guide                   Show a rich visual guide to using salat-cli
-  cities                  Display the list of available city names
   help [command]          display help for command
 ```
 
@@ -75,13 +72,11 @@ Commands:
 ## 🏗 Dependencies
 
 This project is built on the shoulders of giants:
-
-- [**React Query**](https://tanstack.com/query/latest) - Data synchronization library for managing server state.
 - [**Commander.js**](https://github.com/tj/commander) - The complete solution for node.js command-line interfaces.
+- [**Ink**](https://github.com/vadimdemedes/ink) - React for interactive command-line apps.
+- [**React Query**](https://tanstack.com/query/latest) - Data synchronization library for managing server state.
 - [**date-fns**](https://date-fns.org/) - Modern JavaScript date utility library.
-- [**node-fetch**](https://github.com/node-fetch/node-fetch) - A light-weight module that brings `window.fetch` to Node.js.
 - [**domino**](https://github.com/fent/domino) - Server-side DOM implementation for parsing API response
-- [**node-localstorage**](https://github.com/lmaccherone/node-localstorage) - LocalStorage implementation for Node.js.
 
 ## 🤝 Contributing
 

package/dist/commands/times.js

@@ -1,5 +1,4 @@
-import { QueryProvider } from "#components/QueryProvider";
-import App from "#components/TimesApp";
+import TimesCommandWrapper from "#components/TimesCommandWrapper";
 import { Command } from "commander";
 import { render } from "ink";
 import React from "react";
@@ -8,5 +7,8 @@ export const timesCommand = new Command("times")
     .argument("[city]", "City name")
     .option("-1, --once", "Run once and exit", false)
     .action((city, options) => {
-    render(React.createElement(QueryProvider, undefined, React.createElement(App, { cityNameArg: city, once: options.once })));
+    render(React.createElement(TimesCommandWrapper, {
+        initialCity: city,
+        once: options.once,
+    }));
 });

package/dist/components/CitiesApp.js

@@ -4,7 +4,7 @@ import citiesData from "../data/cities.json" with { type: "json" };
 const CitiesApp = () => {
     const cities = citiesData;
     // Sort cities alphabetically
-    const sortedCities = [...cities].sort((a, b) => a.name.localeCompare(b.name));
-    return (_jsxs(Box, { flexDirection: "column", padding: 1, children: [_jsx(Box, { marginBottom: 1, children: _jsxs(Text, { bold: true, color: "cyan", children: ["\uD83C\uDF0D Available Cities in Morocco (", cities.length, ")"] }) }), _jsx(Box, { flexDirection: "row", flexWrap: "wrap", children: sortedCities.map((city) => (_jsxs(Box, { width: 25, marginBottom: 0, children: [_jsx(Text, { color: "gray", children: "- " }), _jsx(Text, { children: city.name })] }, city.id))) }), _jsx(Box, { marginTop: 1, children: _jsxs(Text, { color: "gray", children: ["Tip: Use these names with the 'times' command, e.g., 'salat times ", sortedCities[0]?.name, "'"] }) })] }));
+    const sortedCities = [...cities].sort((a, b) => a.frenchName.localeCompare(b.frenchName));
+    return (_jsxs(Box, { flexDirection: "column", padding: 1, children: [_jsx(Box, { marginBottom: 1, children: _jsxs(Text, { bold: true, color: "cyan", children: ["\uD83C\uDF0D Available Cities in Morocco (", cities.length, ")"] }) }), _jsx(Box, { flexDirection: "row", flexWrap: "wrap", children: sortedCities.map((city) => (_jsxs(Box, { width: 25, marginBottom: 0, children: [_jsx(Text, { color: "gray", children: "- " }), _jsx(Text, { children: city.frenchName })] }, city.id))) }), _jsx(Box, { marginTop: 1, children: _jsxs(Text, { color: "gray", children: ["Tip: Use these names with the 'times' command, e.g., 'salat times", " ", sortedCities[0]?.frenchName, "'"] }) })] }));
 };
 export default CitiesApp;

package/dist/components/CitySelect.js

@@ -0,0 +1,22 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, Text } from "ink";
+import SelectInput from "ink-select-input";
+import TextInput from "ink-text-input";
+import { useMemo, useState } from "react";
+import citiesData from "../data/cities.json" with { type: "json" };
+const cities = citiesData;
+const CitySelect = ({ onSelect }) => {
+    const [query, setQuery] = useState("");
+    const filteredCities = useMemo(() => {
+        if (!query)
+            return cities;
+        const lowerQuery = query.toLowerCase();
+        return cities.filter((c) => c.frenchName.toLowerCase().includes(lowerQuery));
+    }, [query]);
+    const items = filteredCities.map((c) => ({
+        label: `${c.frenchName}`,
+        value: c.frenchName,
+    }));
+    return (_jsxs(Box, { flexDirection: "column", paddingX: 2, paddingY: 1, width: 60, borderStyle: "round", borderColor: "green", children: [_jsx(Box, { flexDirection: "column", alignItems: "center", marginBottom: 1, children: _jsx(Box, { borderStyle: "single", borderColor: "green", paddingX: 2, children: _jsx(Text, { bold: true, color: "green", children: "SELECT YOUR CITY" }) }) }), _jsxs(Box, { marginBottom: 1, paddingX: 2, children: [_jsx(Text, { color: "white", bold: true, children: "Filter: " }), _jsx(TextInput, { value: query, onChange: setQuery, placeholder: "Type city name..." })] }), _jsx(Box, { borderStyle: "single", borderColor: "gray", padding: 1, children: items.length > 0 ? (_jsx(SelectInput, { items: items.sort((a, b) => a.label.localeCompare(b.label)), onSelect: (item) => onSelect(item.value), limit: 8, indicatorComponent: ({ isSelected }) => (_jsx(Text, { color: "yellow", children: isSelected ? "> " : "  " })), itemComponent: ({ label, isSelected }) => (_jsx(Text, { color: isSelected ? "yellow" : "white", children: label })) })) : (_jsx(Box, { justifyContent: "center", width: "100%", children: _jsx(Text, { color: "red", children: "No cities found." }) })) }), _jsx(Box, { marginTop: 1, justifyContent: "center", children: _jsx(Text, { dimColor: true, color: "gray", children: "Use arrow keys to select \u2022 Enter to confirm" }) })] }));
+};
+export default CitySelect;

package/dist/components/CitySelect.test.js

@@ -0,0 +1,40 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { render } from "ink-testing-library";
+import { describe, expect, it, vi } from "vitest";
+import CitySelect from "./CitySelect.js";
+// Mock data
+vi.mock("../data/cities.json", () => ({
+    default: [
+        { frenchName: "Casablanca", arabicName: "الدار البيضاء" },
+        { frenchName: "Rabat", arabicName: "الرباط" },
+        { frenchName: "Tangier", arabicName: "طنجة" },
+    ],
+}));
+describe("CitySelect", () => {
+    it("should render input and list", () => {
+        const { lastFrame } = render(_jsx(CitySelect, { onSelect: () => { } }));
+        expect(lastFrame()).toContain("SELECT YOUR CITY");
+        expect(lastFrame()).toContain("Casablanca");
+        expect(lastFrame()).toContain("Rabat");
+    });
+    it("should show no results message when no match", async () => {
+        const { lastFrame, stdin } = render(_jsx(CitySelect, { onSelect: () => { } }));
+        stdin.write("NonExistentCity");
+        await new Promise((resolve) => setTimeout(resolve, 100));
+        expect(lastFrame()).toContain("No cities found");
+    });
+    it("should filter cities by french name", async () => {
+        const { lastFrame, stdin } = render(_jsx(CitySelect, { onSelect: () => { } }));
+        stdin.write("Rab");
+        await new Promise((resolve) => setTimeout(resolve, 100));
+        expect(lastFrame()).toContain("Rabat");
+        expect(lastFrame()).not.toContain("Casablanca");
+    });
+    it("should select a city", () => {
+        const onSelect = vi.fn();
+        const { stdin, lastFrame } = render(_jsx(CitySelect, { onSelect: onSelect }));
+        // Select first item (Casablanca)
+        stdin.write("\r");
+        expect(onSelect).toHaveBeenCalledWith("Casablanca");
+    });
+});

package/dist/components/HijriApp.js

@@ -9,6 +9,6 @@ const HijriApp = () => {
     if (error) {
         return _jsxs(Text, { color: "red", children: ["Error: ", error] });
     }
-    return (_jsxs(Box, { flexDirection: "column", padding: 1, children: [_jsx(Box, { marginBottom: 1, children: _jsx(Text, { color: "blue", children: "\uD83D\uDD4C Hijri Date" }) }), _jsx(Box, { padding: 1, children: _jsx(Text, { children: `\u061C${hijriDate}` }) })] }));
+    return (_jsxs(Box, { flexDirection: "column", padding: 1, children: [_jsx(Box, { marginBottom: 1, children: _jsx(Text, { color: "blue", children: "\uD83D\uDD4C Hijri Date" }) }), _jsx(Box, { padding: 1, children: _jsx(Text, { children: `${hijriDate}` }) })] }));
 };
 export default HijriApp;

package/dist/components/TimesApp.js

@@ -1,15 +1,28 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useHijriDate } from "#hooks/useHijriDate";
 import { usePrayerTimes } from "#hooks/usePrayerTimes";
-import { getNextPrayer, tConv24 } from "#services/utils/time";
-import { format } from "date-fns";
-import { Box, Text, useApp } from "ink";
+import { getImsakTime, getNextPrayer, tConv24 } from "#services/utils/time";
+import { differenceInSeconds, format, parse, subDays } from "date-fns";
+import { Box, Text, useApp, useInput } from "ink";
 import { useEffect, useState } from "react";
-const App = ({ cityNameArg, once }) => {
+const ProgressBar = ({ progress, width, }) => {
+    const filledWidth = Math.max(0, Math.min(width, Math.round(progress * width)));
+    const emptyWidth = width - filledWidth;
+    return (_jsxs(Box, { children: [_jsx(Text, { color: "green", children: "█".repeat(filledWidth) }), _jsx(Text, { color: "gray", children: "░".repeat(emptyWidth) })] }));
+};
+const App = ({ cityNameArg, once, onReset }) => {
     const { exit } = useApp();
     const { prayerTimes, error, loading, resolvedCityName } = usePrayerTimes({
         cityNameArg,
     });
+    const { hijriDate } = useHijriDate();
     const [currentTime, setCurrentTime] = useState(new Date());
+    useInput((input) => {
+        const key = input.toLowerCase();
+        if (key === "c" && onReset) {
+            onReset();
+        }
+    });
     useEffect(() => {
         const timer = setInterval(() => {
             setCurrentTime(new Date());
@@ -25,17 +38,38 @@ const App = ({ cityNameArg, once }) => {
         }
     }, [once, loading, prayerTimes, error, exit]);
     if (loading) {
-        return _jsx(Text, { children: "Loading prayer times..." });
+        return (_jsx(Box, { padding: 1, children: _jsxs(Text, { color: "yellow", children: ["Loading prayer times for ", resolvedCityName, "..."] }) }));
     }
     if (error) {
-        return _jsxs(Text, { color: "red", children: ["Error: ", error] });
+        return (_jsx(Box, { padding: 1, children: _jsxs(Text, { color: "red", bold: true, children: ["Error: ", error] }) }));
     }
     if (!prayerTimes) {
-        return _jsx(Text, { color: "red", children: "Could not fetch prayer times." });
+        return (_jsx(Box, { padding: 1, children: _jsx(Text, { color: "red", bold: true, children: "Could not fetch prayer times." }) }));
+    }
+    const nextPrayerData = getNextPrayer(prayerTimes, currentTime);
+    // Calculate progress
+    const prayerOrder = ["Fajr", "Chorouq", "Dhuhr", "Asr", "Maghrib", "Ishae"];
+    const nextIndex = prayerOrder.indexOf(nextPrayerData.prayer);
+    const prevIndex = (nextIndex - 1 + prayerOrder.length) % prayerOrder.length;
+    const prevPrayerName = prayerOrder[prevIndex];
+    let prevDate = parse(prayerTimes[prevPrayerName], "HH:mm", currentTime);
+    let nextDate = parse(nextPrayerData.time, "HH:mm", currentTime);
+    if (nextPrayerData.prayer === "Fajr" && currentTime.getHours() >= 12) {
+        nextDate = parse(nextPrayerData.time, "HH:mm", new Date(currentTime.getTime() + 24 * 60 * 60 * 1000));
+    }
+    else if (nextPrayerData.prayer === "Fajr" && currentTime.getHours() < 12) {
+        prevDate = subDays(parse(prayerTimes.Ishae, "HH:mm", currentTime), 1);
     }
-    return (_jsxs(Box, { flexDirection: "column", padding: 1, children: [_jsx(Box, { marginBottom: 1, children: _jsxs(Text, { children: ["\uD83E\uDDED ", resolvedCityName, ", Morocco"] }) }), _jsx(Box, { marginBottom: 1, children: _jsxs(Text, { children: ["\uD83D\uDCC5 ", format(currentTime, "PPPP")] }) }), prayerTimes && (_jsxs(Box, { borderStyle: "round", borderColor: "cyan", paddingX: 1, marginBottom: 1, flexDirection: "column", children: [_jsxs(Box, { children: [_jsxs(Text, { bold: true, color: "cyan", children: ["Next Prayer:", " "] }), _jsx(Text, { bold: true, children: getNextPrayer(prayerTimes, currentTime).prayer })] }), _jsxs(Box, { children: [_jsx(Text, { children: "Time: " }), _jsx(Text, { children: tConv24(getNextPrayer(prayerTimes, currentTime).time) })] }), _jsxs(Box, { children: [_jsx(Text, { color: "yellow", children: "Remaining: " }), _jsx(Text, { color: "yellow", children: getNextPrayer(prayerTimes, currentTime).timeLeft })] })] })), _jsx(Box, { flexDirection: "column", children: Object.entries(prayerTimes).map(([prayer, time]) => {
-                    const isNext = prayer === getNextPrayer(prayerTimes, currentTime).prayer;
-                    return (_jsxs(Box, { children: [_jsx(Box, { width: 10, children: _jsx(Text, { color: isNext ? "cyan" : "white", bold: isNext, children: prayer }) }), _jsx(Box, { marginRight: 2, children: _jsx(Text, { color: isNext ? "cyan" : "gray", children: "-->" }) }), _jsx(Text, { color: isNext ? "yellow" : "green", bold: isNext, children: tConv24(time) })] }, prayer));
-                }) })] }));
+    const totalSeconds = differenceInSeconds(nextDate, prevDate);
+    const elapsedSeconds = differenceInSeconds(currentTime, prevDate);
+    const progress = Math.max(0, Math.min(1, elapsedSeconds / totalSeconds));
+    return (_jsxs(Box, { flexDirection: "column", paddingX: 2, paddingY: 1, borderStyle: "round", borderColor: "green", width: 60, children: [_jsxs(Box, { flexDirection: "column", alignItems: "center", gap: 1, children: [_jsx(Box, { borderStyle: "single", borderColor: "green", children: _jsxs(Text, { bold: true, color: "green", children: ["\uD83C\uDDF2\uD83C\uDDE6 ", resolvedCityName, ", Morocco \uD83C\uDDF2\uD83C\uDDE6"] }) }), _jsx(Box, { marginTop: 1, children: _jsxs(Text, { color: "white", bold: true, children: ["\uD83D\uDCC5  ", format(currentTime, "EEEE, MMMM do yyyy")] }) }), hijriDate && (_jsxs(Text, { color: "gray", dimColor: true, children: ["\uD83D\uDD4C ", hijriDate] }))] }), _jsx(Box, { flexDirection: "column", marginY: 1, children: Object.entries({
+                    "Imsak *": getImsakTime(prayerTimes.Fajr),
+                    ...prayerTimes,
+                }).map(([prayer, time]) => {
+                    const isNext = prayer === nextPrayerData.prayer;
+                    const isImsak = prayer === "Imsak *";
+                    return (_jsxs(Box, { justifyContent: "space-between", paddingX: 2, backgroundColor: isNext ? "green" : undefined, children: [_jsx(Box, { children: _jsxs(Text, { color: isNext ? "white" : (isImsak ? "gray" : "white"), bold: isNext, children: [isNext ? "> " : "  ", prayer.padEnd(12)] }) }), _jsx(Box, { children: _jsx(Text, { color: isNext ? "white" : (isImsak ? "gray" : "white"), bold: isNext, children: tConv24(time) }) })] }, prayer));
+                }) }), _jsx(Box, { paddingX: 2, marginTop: 1, children: _jsx(Text, { dimColor: true, color: "gray", italic: true, children: "* Imsak is 10 min before Fajr for safety" }) }), _jsxs(Box, { marginTop: 1, paddingX: 2, paddingY: 1, flexDirection: "column", alignItems: "center", borderStyle: "single", borderColor: "yellow", children: [_jsxs(Text, { children: ["Next: ", _jsx(Text, { color: "green", bold: true, children: nextPrayerData.prayer }), " in ", _jsx(Text, { color: "yellow", bold: true, children: nextPrayerData.timeLeft })] }), _jsxs(Box, { flexDirection: "column", alignItems: "center", marginY: 1, children: [_jsx(ProgressBar, { progress: progress, width: 50 }), _jsxs(Box, { justifyContent: "space-between", width: 50, marginTop: 0, children: [_jsx(Text, { color: "gray", dimColor: true, children: "0%" }), _jsxs(Text, { color: "green", bold: true, children: [Math.round(progress * 100), "%"] }), _jsx(Text, { color: "gray", dimColor: true, children: "100%" })] })] })] }), !once && (_jsx(Box, { marginTop: 1, justifyContent: "center", children: _jsx(Text, { dimColor: true, color: "gray", children: "[C] Change City  \u2022  [Ctrl+C] Exit" }) }))] }));
 };
 export default App;

package/dist/components/TimesApp.test.js

@@ -1,11 +1,15 @@
 import { jsx as _jsx } from "react/jsx-runtime";
+import { useHijriDate } from "#hooks/useHijriDate";
 import { usePrayerTimes } from "#hooks/usePrayerTimes";
 import { render } from "ink-testing-library";
-import { describe, expect, it, vi } from "vitest";
+import { beforeEach, describe, expect, it, vi } from "vitest";
 import TimesApp from "./TimesApp.js";
 vi.mock("#hooks/usePrayerTimes", () => ({
     usePrayerTimes: vi.fn(),
 }));
+vi.mock("#hooks/useHijriDate", () => ({
+    useHijriDate: vi.fn(),
+}));
 vi.mock("ink", async () => {
     const actual = await vi.importActual("ink");
     return {
@@ -16,15 +20,22 @@ vi.mock("ink", async () => {
     };
 });
 describe("TimesApp", () => {
+    beforeEach(() => {
+        vi.mocked(useHijriDate).mockReturnValue({
+            hijriDate: "18 Sha'ban 1447",
+            error: null,
+            loading: false,
+        });
+    });
     it("should render loading state", () => {
         vi.mocked(usePrayerTimes).mockReturnValue({
             prayerTimes: null,
             error: null,
             loading: true,
-            resolvedCityName: "",
+            resolvedCityName: "Marrakech",
         });
         const { lastFrame } = render(_jsx(TimesApp, {}));
-        expect(lastFrame()).toContain("Loading prayer times...");
+        expect(lastFrame()).toContain("Loading prayer times for Marrakech");
     });
     it("should render error state", () => {
         vi.mocked(usePrayerTimes).mockReturnValue({
@@ -62,12 +73,8 @@ describe("TimesApp", () => {
             resolvedCityName: "Marrakech",
         });
         const { lastFrame } = render(_jsx(TimesApp, {}));
-        expect(lastFrame()).toContain("Marrakech, Morocco");
+        expect(lastFrame()).toContain("Marrakech");
         expect(lastFrame()).toContain("Fajr");
         expect(lastFrame()).toContain("05:00 AM");
-        // Check for prayer times rendering
-        expect(lastFrame()).toContain("Next Prayer");
-        expect(lastFrame()).toContain("Dhuhr");
-        expect(lastFrame()).toContain("12:30 PM");
     });
 });

package/dist/components/TimesCommandWrapper.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import CitySelect from "#components/CitySelect";
+import { QueryProvider } from "#components/QueryProvider";
+import App from "#components/TimesApp";
+import { useState } from "react";
+const TimesCommandWrapper = ({ initialCity, once, }) => {
+    const [city, setCity] = useState(initialCity);
+    return (_jsx(QueryProvider, { children: city ? (_jsx(App, { cityNameArg: city, once: once, onReset: () => setCity(undefined) })) : (_jsx(CitySelect, { onSelect: setCity })) }));
+};
+export default TimesCommandWrapper;

package/dist/components/TimesCommandWrapper.test.js

@@ -0,0 +1,35 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { render } from "ink-testing-library";
+import { describe, expect, it, vi } from "vitest";
+import TimesCommandWrapper from "./TimesCommandWrapper.js";
+// Mock dependencies
+vi.mock("#components/CitySelect", async () => {
+    const { Text } = await import("ink");
+    return {
+        default: ({ onSelect }) => {
+            // Trigger onSelect immediately? No, we need to test rendering.
+            return _jsx(Text, { children: "CitySelect Mock" });
+        },
+    };
+});
+vi.mock("#components/TimesApp", async () => {
+    const { Text } = await import("ink");
+    return {
+        default: ({ cityNameArg }) => (_jsxs(Text, { children: ["TimesApp Mock: ", cityNameArg] })),
+    };
+});
+vi.mock("#components/QueryProvider", () => ({
+    QueryProvider: ({ children }) => (_jsx(_Fragment, { children: children })),
+}));
+describe("TimesCommandWrapper", () => {
+    it("should render TimesApp if initialCity is provided", () => {
+        const { lastFrame } = render(_jsx(TimesCommandWrapper, { initialCity: "Casablanca" }));
+        expect(lastFrame()).toContain("TimesApp Mock: Casablanca");
+        expect(lastFrame()).not.toContain("CitySelect Mock");
+    });
+    it("should render CitySelect if no initialCity provided", () => {
+        const { lastFrame } = render(_jsx(TimesCommandWrapper, {}));
+        expect(lastFrame()).toContain("CitySelect Mock");
+        expect(lastFrame()).not.toContain("TimesApp Mock");
+    });
+});