@webamoki/web-svelte 0.1.0 → 0.2.0

package/README.md

@@ -1,58 +1,7 @@
-# Svelte library
+# Setup
 
-Everything you need to build a Svelte library, powered by [`sv`](https://npmjs.com/package/sv).
+in the main css file, e.g. `app.css`, add the following line:
 
-Read more about creating a library [in the docs](https://svelte.dev/docs/kit/packaging).
-
-## Creating a project
-
-If you're seeing this, you've probably already done this step. Congrats!
-
-```sh
-# create a new project in the current directory
-npx sv create
-
-# create a new project in my-app
-npx sv create my-app
-```
-
-## Developing
-
-Once you've created a project and installed dependencies with `npm install` (or `pnpm install` or `yarn`), start a development server:
-
-```sh
-npm run dev
-
-# or start the server and open the app in a new browser tab
-npm run dev -- --open
-```
-
-Everything inside `src/lib` is part of your library, everything inside `src/routes` can be used as a showcase or preview app.
-
-## Building
-
-To build your library:
-
-```sh
-npm pack
-```
-
-To create a production version of your showcase app:
-
-```sh
-npm run build
-```
-
-You can preview the production build with `npm run preview`.
-
-> To deploy your app, you may need to install an [adapter](https://svelte.dev/docs/kit/adapters) for your target environment.
-
-## Publishing
-
-Go into the `package.json` and give your package the desired name through the `"name"` option. Also consider adding a `"license"` field and point it to a `LICENSE` file which you can create from a template (one popular option is the [MIT license](https://opensource.org/license/mit/)).
-
-To publish your library to [npm](https://www.npmjs.com):
-
-```sh
-npm publish
+```css
+@source "../...path/node_modules/@webamoki/web-svelte/dist/**/*.{js,svelte,ts}";
 ```

package/dist/components/form/fields/TextField.svelte

@@ -6,12 +6,20 @@
 	interface Props extends FieldWrapperProps<T, U, M> {
 		value?: string;
 		type?: HTMLInputElement['type'];
+		class?: string;
+		placeholder?: string;
 	}
-	let { value = $bindable(), type = 'text', ...fieldProps }: Props = $props();
+	let {
+		value = $bindable(),
+		type = 'text',
+		class: className,
+		placeholder,
+		...fieldProps
+	}: Props = $props();
 </script>
 
 <FieldWrapper {...fieldProps}>
 	{#snippet formElem(props)}
-		<Input {type} bind:value {...props} />
+		<Input {type} bind:value class={className} {placeholder} {...props} />
 	{/snippet}
 </FieldWrapper>

package/dist/components/form/fields/TextField.svelte.d.ts

@@ -4,6 +4,8 @@ declare function $$render<T extends Record<string, unknown>, U extends FormPath<
     props: FieldWrapperProps<T, U, M> & {
         value?: string;
         type?: HTMLInputElement["type"];
+        class?: string;
+        placeholder?: string;
     };
     exports: {};
     bindings: "value";

package/dist/utils/datetime/index.d.ts

@@ -0,0 +1,160 @@
+import { CalendarDate, Time, ZonedDateTime, type DateDuration } from '@internationalized/date';
+export declare const Days: readonly ["Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday", "Sunday"];
+export type Day = (typeof Days)[number];
+/**
+ * Gets the day of the week for a given date.
+ * @param date - The date to get the day of the week for.
+ * @returns The day of the week
+ */
+export declare function getDayOfDate(date: CalendarDate): Day;
+/**
+ * Checks if a given date is a specific day of the week.
+ * @param date - The date to check.
+ * @param dayOfWeek - The day of the week to check against.
+ * @returns True if the date is the specified day, false otherwise.
+ */
+export declare function isDateDay(date: CalendarDate, dayOfWeek: Day): boolean;
+/**
+ * Checks if a given date is today.
+ * @param date - The date to check.
+ * @returns True if the date is today, false otherwise.
+ */
+export declare function isDateToday(date: CalendarDate, timezone: string): boolean;
+/**
+ * Calculates the age from a date of birth.
+ * @param dob - The date of birth.
+ * @returns The age in years.
+ * @throws Error if the date of birth is in the future.
+ */
+export declare function ageFromDob(dob: CalendarDate, timezone: string): number;
+/**
+ * Gets the date of the next occurrence of a day of the week.
+ * @param dayOfWeek - The day of the week to get the next occurrence for.
+ * @param startDate - The date to check from. Inclusive.
+ * @returns The date of the next occurrence of the specified day.
+ */
+export declare function getNextDateOfDay(dayOfWeek: Day, startDate: CalendarDate): CalendarDate;
+/**
+ * Gets the most recent occurrence of a day of the week.
+ * @param dayOfWeek - The day of the week
+ * @param startDate - The date to check from. Inclusive.
+ * @returns The most recent date for the specified day.
+ * @throws An error if the day of the week is invalid.
+ */
+export declare function getLastDateOfDay(dayOfWeek: Day, startDate: CalendarDate): CalendarDate;
+/**
+ * Gets an array of the last dates of the day of the week.
+ * @param dayOfWeek - The day of the week.
+ * @param count - The number of dates to get.
+ * @param startDate - The date to check from. Inclusive.
+ * @returns The array of dates from oldest to most recent.
+ * @throws An error if the day of the week is invalid.
+ */
+export declare function getLastDatesOfDay(dayOfWeek: Day, count: number, startDate: CalendarDate): CalendarDate[];
+/**
+ * Gets an array of dates of the last few months (first day) from a date.
+ * @param count - The number of months to get.
+ * @param startDate - The date to start from (defaults to today).
+ * @returns The array of dates from oldest to most recent.
+ */
+export declare function getLastMonths(count: number, startDate: CalendarDate): CalendarDate[];
+/**
+ * Checks if two time ranges overlap
+ * @param start1 - The start time of the first range.
+ * @param end1 - The end time of the first range.
+ * @param start2 - The start time of the second range.
+ * @param end2 - The end time of the second range.
+ * @returns True if the ranges overlap, false otherwise.
+ */
+export declare function checkOverlap(start1: Time, end1: Time, start2: Time, end2: Time): boolean;
+/**
+ * Determines if the given dates are within the given duration of each other.
+ * @param date1 - The first date in order.
+ * @param date2 - The second date in order.
+ * @param duration - The duration to check against. Inclusive of boundaries.
+ * @returns True if the dates are within duration, false otherwise.
+ */
+export declare function datesWithin(date1: CalendarDate, date2: CalendarDate, duration: DateDuration): boolean;
+/**
+ * Calculates the difference in weeks between two dates.
+ * @param date1 - The first date in order.
+ * @param date2 - The second date in order.
+ */
+export declare function dateDiffWeeks(date1: CalendarDate, date2: CalendarDate): number;
+/**
+ * Formats a day of the week.
+ * @param day - The day of the week to format.
+ * @example "Monday" -> "Mon"
+ * @returns Formatted string of the day of the week.
+ */
+export declare function formatDayShort(day: Day): string;
+/**
+ * @param date The CalendarDate object to format.
+ * @returns string of date in shortened format
+ * @example "Oct 5"
+ */
+export declare function formatDateShort(date: CalendarDate): string;
+/**
+ * @param date The CalendarDate object to format.
+ * @returns The formatted date string.
+ * @example "5 Oct 2023"
+ */
+export declare function formatDateFull(date: CalendarDate): string;
+/**
+ * ISO format
+ * @param date The CalendarDate object to format.
+ * @returns The formatted date string in YYYY-MM-DD format.
+ * @example "2023-10-05"
+ */
+export declare function formatDateISO(date: CalendarDate): string;
+/**
+ * @param date The CalendarDate object to format.
+ * @returns The formatted date string in dd/mm/yyyy format.
+ * @example "05/10/2023"
+ */
+export declare function formatDateNum(date: CalendarDate): string;
+/**
+ * Formats the month only.
+ * @param date - The date to format.
+ * @returns The formatted month string.
+ * @example "Oct"
+ */
+export declare function formatMonth(date: CalendarDate): string;
+/**
+ * Gives time in HH:MM format
+ * @param time
+ * @returns string of time in that format
+ */
+export declare function formatTimeShort(time: Time): string;
+/**
+ * Gives time in HH:MM:SS format
+ * @param time
+ * @returns string of time in that format
+ */
+export declare function formatTimeFull(time: Time): string;
+/**
+ * Calculates the end time given a starting time and duration.
+ * @param timeStart starting time
+ * @param durationMinutes duration in minutes
+ * @returns end time in HH:MM format
+ */
+export declare function formatTimeEnd(timeStart: Time, durationMinutes: number): string;
+/**
+ * Formats a full date and time.
+ * @param datetime The ZonedDateTime object to format.
+ * @returns The formatted date and time string.
+ * @example "05/10/2023 14:30:00"
+ */
+export declare function formatAbsolute(datetime: ZonedDateTime): string;
+/**
+ * Unfreezes a CalendarDate object from a snapshot.
+ * @param raw - The snapshot of the CalendarDate object.
+ * @returns The unfrozen CalendarDate object.
+ */
+export declare function unfreezeDate(raw: $state.Snapshot<CalendarDate>): CalendarDate;
+/**
+ * Unfreezes a Time object from a snapshot.
+ * @param raw - The snapshot of the Time object.
+ * @returns The unfrozen Time object.
+ */
+export declare function unfreezeTime(raw: $state.Snapshot<Time>): Time;

package/dist/utils/datetime/index.js

@@ -0,0 +1,310 @@
+import { CalendarDate, DateFormatter, getDayOfWeek, getLocalTimeZone, startOfMonth, Time, toCalendarDate, today, toTime, ZonedDateTime } from '@internationalized/date';
+import { map, range } from 'ramda';
+const DEFAULT_TIME_ZONE = 'Europe/London';
+const DEFAULT_LOCALE = 'en-GB';
+// Day of the week
+export const Days = [
+    'Monday',
+    'Tuesday',
+    'Wednesday',
+    'Thursday',
+    'Friday',
+    'Saturday',
+    'Sunday'
+];
+const DayIndex = Object.fromEntries(Days.map((day, index) => [day, index]));
+/** Gets the day index of the date */
+function getDayIndex(date) {
+    // Always start 0 on Monday
+    return getDayOfWeek(date, DEFAULT_LOCALE, 'mon');
+}
+/**
+ * Gets the day of the week for a given date.
+ * @param date - The date to get the day of the week for.
+ * @returns The day of the week
+ */
+export function getDayOfDate(date) {
+    return Days[getDayIndex(date)];
+}
+/**
+ * Checks if a given date is a specific day of the week.
+ * @param date - The date to check.
+ * @param dayOfWeek - The day of the week to check against.
+ * @returns True if the date is the specified day, false otherwise.
+ */
+export function isDateDay(date, dayOfWeek) {
+    const dateDay = getDayOfDate(date);
+    return dateDay === dayOfWeek;
+}
+/**
+ * Checks if a given date is today.
+ * @param date - The date to check.
+ * @returns True if the date is today, false otherwise.
+ */
+export function isDateToday(date, timezone) {
+    return today(timezone).compare(date) === 0;
+}
+/**
+ * Calculates the age from a date of birth.
+ * @param dob - The date of birth.
+ * @returns The age in years.
+ * @throws Error if the date of birth is in the future.
+ */
+export function ageFromDob(dob, timezone) {
+    const todayDate = today(timezone);
+    if (todayDate.compare(dob) < 0) {
+        throw new Error('Date of birth is in the future');
+    }
+    let years = todayDate.year - dob.year;
+    const monthDiff = todayDate.month - dob.month;
+    const dayDiff = todayDate.day - dob.day;
+    // Adjust years down if birthday hasn't occurred this year
+    if (monthDiff < 0 || (monthDiff === 0 && dayDiff < 0)) {
+        years--;
+    }
+    return years;
+}
+/**
+ * Gets the date of the next occurrence of a day of the week.
+ * @param dayOfWeek - The day of the week to get the next occurrence for.
+ * @param startDate - The date to check from. Inclusive.
+ * @returns The date of the next occurrence of the specified day.
+ */
+export function getNextDateOfDay(dayOfWeek, startDate) {
+    const dayIndex = DayIndex[dayOfWeek];
+    const startIndex = getDayIndex(startDate);
+    // Already on the day
+    if (startIndex === dayIndex)
+        return startDate;
+    // Calculate how many days to add to get to the next occurrence
+    const addition = (dayIndex - startIndex + 7) % 7;
+    return startDate.add({ days: addition });
+}
+/**
+ * Gets the most recent occurrence of a day of the week.
+ * @param dayOfWeek - The day of the week
+ * @param startDate - The date to check from. Inclusive.
+ * @returns The most recent date for the specified day.
+ * @throws An error if the day of the week is invalid.
+ */
+export function getLastDateOfDay(dayOfWeek, startDate) {
+    const dayIndex = DayIndex[dayOfWeek];
+    const startIndex = getDayIndex(startDate);
+    // Already on the day
+    if (startIndex === dayIndex)
+        return startDate;
+    // Calculate how many days to subtract to get to the previous occurrence
+    const subtraction = (startIndex + 7 - dayIndex) % 7;
+    return startDate.subtract({ days: subtraction });
+}
+/**
+ * Gets an array of the last dates of the day of the week.
+ * @param dayOfWeek - The day of the week.
+ * @param count - The number of dates to get.
+ * @param startDate - The date to check from. Inclusive.
+ * @returns The array of dates from oldest to most recent.
+ * @throws An error if the day of the week is invalid.
+ */
+export function getLastDatesOfDay(dayOfWeek, count, startDate) {
+    // Set up the array of dates
+    if (count < 1)
+        return [];
+    // Get the most recent date
+    const latestDate = getLastDateOfDay(dayOfWeek, startDate);
+    // Calculate all dates subtracted, oldest -> most recent
+    return map((i) => latestDate.subtract({ weeks: count - 1 - i }), range(0, count));
+}
+/**
+ * Gets an array of dates of the last few months (first day) from a date.
+ * @param count - The number of months to get.
+ * @param startDate - The date to start from (defaults to today).
+ * @returns The array of dates from oldest to most recent.
+ */
+export function getLastMonths(count, startDate) {
+    if (count < 1)
+        return [];
+    // Get the most recent date
+    const latestDate = startOfMonth(startDate);
+    // Calculate the previous dates
+    return map((i) => latestDate.subtract({ months: count - 1 - i }), range(0, count));
+}
+/* Intervals */
+/**
+ * Checks if two time ranges overlap
+ * @param start1 - The start time of the first range.
+ * @param end1 - The end time of the first range.
+ * @param start2 - The start time of the second range.
+ * @param end2 - The end time of the second range.
+ * @returns True if the ranges overlap, false otherwise.
+ */
+export function checkOverlap(start1, end1, start2, end2) {
+    return start1.compare(end2) < 0 && start2.compare(end1) < 0;
+}
+/**
+ * Determines if the given dates are within the given duration of each other.
+ * @param date1 - The first date in order.
+ * @param date2 - The second date in order.
+ * @param duration - The duration to check against. Inclusive of boundaries.
+ * @returns True if the dates are within duration, false otherwise.
+ */
+export function datesWithin(date1, date2, duration) {
+    // reject invalid order
+    if (date1.compare(date2) > 0)
+        return false;
+    return date1.add(duration).compare(date2) >= 0;
+}
+const msPerWeek = 7 * 24 * 60 * 60 * 1000;
+/**
+ * Calculates the difference in weeks between two dates.
+ * @param date1 - The first date in order.
+ * @param date2 - The second date in order.
+ */
+export function dateDiffWeeks(date1, date2) {
+    const date1Abs = date1.toDate(DEFAULT_TIME_ZONE).getTime();
+    const date2Abs = date2.toDate(DEFAULT_TIME_ZONE).getTime();
+    return Math.floor((date2Abs - date1Abs) / msPerWeek);
+}
+/* Formatting */
+/* Day of the week*/
+/**
+ * Formats a day of the week.
+ * @param day - The day of the week to format.
+ * @example "Monday" -> "Mon"
+ * @returns Formatted string of the day of the week.
+ */
+export function formatDayShort(day) {
+    // Use the first three letters of the day
+    return day.slice(0, 3);
+}
+/* Calendar Dates */
+const FullDateFormatter = new DateFormatter(DEFAULT_LOCALE, {
+    day: 'numeric',
+    month: 'short',
+    year: 'numeric'
+});
+const ShortDateFormatter = new DateFormatter(DEFAULT_LOCALE, {
+    month: 'short',
+    day: 'numeric'
+});
+const MonthFormatter = new DateFormatter(DEFAULT_LOCALE, {
+    month: 'short',
+    year: '2-digit'
+});
+const NumFormatter = new DateFormatter(DEFAULT_LOCALE, {
+    day: '2-digit',
+    month: '2-digit',
+    year: 'numeric'
+});
+function formatDate(date, formatter) {
+    const nativeDate = date.toDate(getLocalTimeZone());
+    return formatter.format(nativeDate);
+}
+/**
+ * @param date The CalendarDate object to format.
+ * @returns string of date in shortened format
+ * @example "Oct 5"
+ */
+export function formatDateShort(date) {
+    return formatDate(date, ShortDateFormatter);
+}
+/**
+ * @param date The CalendarDate object to format.
+ * @returns The formatted date string.
+ * @example "5 Oct 2023"
+ */
+export function formatDateFull(date) {
+    return formatDate(date, FullDateFormatter);
+}
+/**
+ * ISO format
+ * @param date The CalendarDate object to format.
+ * @returns The formatted date string in YYYY-MM-DD format.
+ * @example "2023-10-05"
+ */
+export function formatDateISO(date) {
+    return date.toString();
+}
+/**
+ * @param date The CalendarDate object to format.
+ * @returns The formatted date string in dd/mm/yyyy format.
+ * @example "05/10/2023"
+ */
+export function formatDateNum(date) {
+    return formatDate(date, NumFormatter);
+}
+/**
+ * Formats the month only.
+ * @param date - The date to format.
+ * @returns The formatted month string.
+ * @example "Oct"
+ */
+export function formatMonth(date) {
+    return formatDate(date, MonthFormatter);
+}
+/* Times */
+// Pad number with zeroes to the left
+function padNum(num, len) {
+    if (isNaN(num)) {
+        return '0'.repeat(len);
+    }
+    return num.toString().padStart(len, '0');
+}
+/**
+ * Gives time in HH:MM format
+ * @param time
+ * @returns string of time in that format
+ */
+export function formatTimeShort(time) {
+    const hours = padNum(time.hour, 2);
+    const minutes = padNum(time.minute, 2);
+    return `${hours}:${minutes}`;
+}
+/**
+ * Gives time in HH:MM:SS format
+ * @param time
+ * @returns string of time in that format
+ */
+export function formatTimeFull(time) {
+    const hours = padNum(time.hour, 2);
+    const minutes = padNum(time.minute, 2);
+    const seconds = padNum(time.second, 2);
+    return `${hours}:${minutes}:${seconds}`;
+}
+/**
+ * Calculates the end time given a starting time and duration.
+ * @param timeStart starting time
+ * @param durationMinutes duration in minutes
+ * @returns end time in HH:MM format
+ */
+export function formatTimeEnd(timeStart, durationMinutes) {
+    const timeEnd = timeStart.add({ minutes: durationMinutes });
+    return formatTimeShort(timeEnd);
+}
+/**
+ * Formats a full date and time.
+ * @param datetime The ZonedDateTime object to format.
+ * @returns The formatted date and time string.
+ * @example "05/10/2023 14:30:00"
+ */
+export function formatAbsolute(datetime) {
+    const date = toCalendarDate(datetime);
+    const time = toTime(datetime);
+    return `${formatDateNum(date)} ${formatTimeFull(time)}`;
+}
+/* State handling */
+/**
+ * Unfreezes a CalendarDate object from a snapshot.
+ * @param raw - The snapshot of the CalendarDate object.
+ * @returns The unfrozen CalendarDate object.
+ */
+export function unfreezeDate(raw) {
+    return new CalendarDate(raw.year, raw.month, raw.day);
+}
+/**
+ * Unfreezes a Time object from a snapshot.
+ * @param raw - The snapshot of the Time object.
+ * @returns The unfrozen Time object.
+ */
+export function unfreezeTime(raw) {
+    return new Time(raw.hour, raw.minute, raw.second, raw.millisecond);
+}

package/dist/utils/index.d.ts

@@ -1 +1 @@
-export {};
+export * from './datetime/index.js';

package/dist/utils/index.js

@@ -1,2 +1 @@
-"use strict";
-// Reexport your entry utils here
+export * from './datetime/index.js';

package/package.json

@@ -3,7 +3,8 @@
   "publishConfig": {
     "access": "public"
   },
-  "version": "0.1.0",
+  "version": "0.2.0",
+  "license": "MIT",
   "files": [
     "dist",
     "!dist/**/*.test.*",
@@ -59,7 +60,6 @@
     "prettier-plugin-svelte": "^3.3.3",
     "prettier-plugin-tailwindcss": "^0.6.11",
     "publint": "^0.3.2",
-    "ramda": "^0.31.3",
     "svelte": "^5.0.0",
     "svelte-check": "^4.0.0",
     "sveltekit-superforms": "^2.27.1",
@@ -76,7 +76,8 @@
     "svelte"
   ],
   "dependencies": {
-    "formsnap": "^2.0.1"
+    "formsnap": "^2.0.1",
+    "ramda": "^0.31.3"
   },
   "scripts": {
     "dev": "vite dev",