@wasto/cms-components 1.5.10 → 1.5.12

package/src/components/collection-calendar/CollectionCalendar.tsx

@@ -1,274 +1,274 @@
-import { ChevronLeftIcon, ChevronRightIcon } from "lucide-react-native";
-import { useCollectionCalendar, type WasteTypeInfoForDay } from "../../hooks/useCollectionCalendar";
-import { StyleSheet, Text, View } from "react-native";
-import Animated, { FadeIn, FadeOut } from "react-native-reanimated";
-import { NavButton } from "../nav-button/NavButton";
-import { ContentInset } from "../content-inset/ContentInset";
-import { Theme } from "../../types/Theme";
-import { useTheme } from "../../contexts/ThemeContext";
-import { resolveTheme } from "../../helpers/themeStyles";
-import { NextCollection } from "../next-collection/NextCollection";
-import { hapticSelection } from "../../helpers/haptics";
-import { SPACE } from "../../helpers/layout";
-import { useState, type ReactNode } from "react";
-
-export type CollectionCalendarProps = {};
-
-const PIN_H = 6;
-const CELL_INSET = 4;
-
-function colorAlpha(hex: string, alphaHex: string): string {
-    const h = hex.replace("#", "").trim();
-    if (h.length === 3) {
-        return `#${h[0]}${h[0]}${h[1]}${h[1]}${h[2]}${h[2]}${alphaHex}`;
-    }
-    if (h.length === 6) return `#${h}${alphaHex}`;
-    if (h.length === 8) return `#${h.slice(0, 6)}${alphaHex}`;
-    return hex;
-}
-
-function WasteTypePins({ types }: { types: WasteTypeInfoForDay[] }) {
-    if (types.length === 0) return null;
-
-    return (
-        <View style={styles.wasteTypes}>
-            {types.map((wasteType) => (
-                <View
-                    key={wasteType.wasteTypeId}
-                    style={[styles.wasteType, { backgroundColor: wasteType.color }]}
-                />
-            ))}
-        </View>
-    );
-}
-
-export function CollectionCalendar({}: CollectionCalendarProps): ReactNode {
-    const {
-        weekDays,
-        weeks,
-        monthLabel,
-        goToNextMonth,
-        goToPrevMonth,
-    } = useCollectionCalendar();
-    const { theme } = useTheme();
-    const t = resolveTheme(theme);
-    const themedStyles = createThemedStyles(theme);
-    const [monthKey, setMonthKey] = useState(0);
-    const today = new Date();
-    const todayDay = today.getDate();
-    const todayMonth = today.getMonth();
-    const todayYear = today.getFullYear();
-    const exceptionFill = colorAlpha(theme.colors.error, "33");
-
-    const prev = async () => {
-        await hapticSelection();
-        goToPrevMonth();
-        setMonthKey((k) => k - 1);
-    };
-    const next = async () => {
-        await hapticSelection();
-        goToNextMonth();
-        setMonthKey((k) => k + 1);
-    };
-
-    return (
-        <View style={styles.collectionCalendar}>
-            <ContentInset>
-                <View style={styles.header}>
-                    <Text style={[styles.monthLabel, { color: t.colors.muted }]}>
-                        {monthLabel.toUpperCase()}
-                    </Text>
-                    <View style={styles.navRow}>
-                        <NavButton
-                            icon={ChevronLeftIcon}
-                            onPress={prev}
-                            style={styles.navCircle}
-                        />
-                        <NavButton
-                            icon={ChevronRightIcon}
-                            onPress={next}
-                            style={styles.navCircle}
-                        />
-                    </View>
-                </View>
-            </ContentInset>
-
-            <Animated.View
-                key={monthKey}
-                entering={FadeIn.duration(220)}
-                exiting={FadeOut.duration(160)}
-                style={styles.grid}
-            >
-                <View style={[styles.calendarHeader, { backgroundColor: theme.colors.background }]}>
-                    {weekDays.map((weekDay) => (
-                        <View key={weekDay} style={styles.calendarHeaderCell}>
-                            <Text style={themedStyles.mutedText}>{weekDay}</Text>
-                        </View>
-                    ))}
-                </View>
-                <View style={styles.calendarBody}>
-                    {weeks.map((week, index) => (
-                        <View
-                            key={index}
-                            style={[
-                                styles.calendarBodyRow,
-                                {
-                                    backgroundColor:
-                                        index % 2 === 0
-                                            ? theme.colors.surface
-                                            : theme.colors.background,
-                                },
-                            ]}
-                        >
-                            {week.map((day, cellIndex) => {
-                                const isToday =
-                                    day.inCurrentMonth &&
-                                    day.day === todayDay &&
-                                    day.month === todayMonth &&
-                                    day.year === todayYear;
-                                const isException = day.exceptions.length > 0;
-
-                                return (
-                                    <View
-                                        key={cellIndex}
-                                        style={[
-                                            styles.calendarBodyCell,
-                                            !day.inCurrentMonth && styles.notCurrentMonth,
-                                        ]}
-                                    >
-                                        {isToday || isException ? (
-                                            <View
-                                                pointerEvents="none"
-                                                style={[
-                                                    styles.dayHighlight,
-                                                    {
-                                                        backgroundColor: isToday
-                                                            ? theme.colors.primary
-                                                            : exceptionFill,
-                                                        borderRadius: t.radii.sm,
-                                                    },
-                                                ]}
-                                            />
-                                        ) : null}
-                                        <Text
-                                            style={[
-                                                styles.dayNumber,
-                                                isToday
-                                                    ? {
-                                                          color: theme.colors.onPrimary,
-                                                          fontWeight: "700",
-                                                      }
-                                                    : isException
-                                                      ? {
-                                                            color: theme.colors.error,
-                                                            fontWeight: "700",
-                                                        }
-                                                      : themedStyles.dayNumber,
-                                            ]}
-                                        >
-                                            {day.day}
-                                        </Text>
-                                        <WasteTypePins types={day.wasteTypesForDay} />
-                                    </View>
-                                );
-                            })}
-                        </View>
-                    ))}
-                </View>
-            </Animated.View>
-
-            <NextCollection showCalendarCta={false} />
-        </View>
-    );
-}
-
-const createThemedStyles = (theme: Theme) =>
-    StyleSheet.create({
-        dayNumber: {
-            color: theme.colors.muted ?? theme.colors.onSurface,
-        },
-        mutedText: {
-            color: theme.colors.muted ?? theme.colors.onSurface,
-            fontSize: 12,
-            fontWeight: "600",
-        },
-    });
-
-const styles = StyleSheet.create({
-    collectionCalendar: {
-        gap: SPACE.sectionY,
-        width: "100%",
-    },
-    header: {
-        flexDirection: "row",
-        justifyContent: "space-between",
-        alignItems: "center",
-        paddingVertical: 12,
-    },
-    monthLabel: {
-        fontSize: 13,
-        fontWeight: "700",
-        letterSpacing: 0.6,
-    },
-    navRow: {
-        flexDirection: "row",
-        gap: 8,
-    },
-    navCircle: {
-        width: SPACE.iconHit,
-        height: SPACE.iconHit,
-    },
-    grid: {
-        width: "100%",
-        overflow: "hidden",
-    },
-    calendarHeader: {
-        flexDirection: "row",
-    },
-    calendarHeaderCell: {
-        flex: 1,
-        paddingVertical: 10,
-        alignItems: "center",
-    },
-    calendarBody: {
-        width: "100%",
-    },
-    calendarBodyRow: {
-        flexDirection: "row",
-    },
-    calendarBodyCell: {
-        flex: 1,
-        aspectRatio: 1,
-        position: "relative",
-        alignItems: "center",
-        justifyContent: "center",
-    },
-    dayHighlight: {
-        ...StyleSheet.absoluteFillObject,
-        margin: CELL_INSET,
-        zIndex: 0,
-    },
-    dayNumber: {
-        fontSize: 14,
-        fontWeight: "600",
-        zIndex: 1,
-    },
-    notCurrentMonth: {
-        opacity: 0.32,
-    },
-    wasteTypes: {
-        position: "absolute",
-        left: CELL_INSET,
-        right: CELL_INSET,
-        bottom: CELL_INSET + 2,
-        height: PIN_H,
-        flexDirection: "row",
-        borderRadius: PIN_H / 2,
-        overflow: "hidden",
-        zIndex: 2,
-    },
-    wasteType: {
-        flex: 1,
-        height: PIN_H,
-    },
-});
+import { ChevronLeftIcon, ChevronRightIcon } from "lucide-react-native";
+import { useCollectionCalendar, type WasteTypeInfoForDay } from "../../hooks/useCollectionCalendar";
+import { StyleSheet, Text, View } from "react-native";
+import Animated, { FadeIn, FadeOut } from "react-native-reanimated";
+import { NavButton } from "../nav-button/NavButton";
+import { ContentInset } from "../content-inset/ContentInset";
+import { Theme } from "../../types/Theme";
+import { useTheme } from "../../contexts/ThemeContext";
+import { resolveTheme } from "../../helpers/themeStyles";
+import { NextCollection } from "../next-collection/NextCollection";
+import { hapticSelection } from "../../helpers/haptics";
+import { SPACE } from "../../helpers/layout";
+import { useState, type ReactNode } from "react";
+
+export type CollectionCalendarProps = {};
+
+const PIN_H = 6;
+const CELL_INSET = 4;
+
+function colorAlpha(hex: string, alphaHex: string): string {
+    const h = hex.replace("#", "").trim();
+    if (h.length === 3) {
+        return `#${h[0]}${h[0]}${h[1]}${h[1]}${h[2]}${h[2]}${alphaHex}`;
+    }
+    if (h.length === 6) return `#${h}${alphaHex}`;
+    if (h.length === 8) return `#${h.slice(0, 6)}${alphaHex}`;
+    return hex;
+}
+
+function WasteTypePins({ types }: { types: WasteTypeInfoForDay[] }) {
+    if (types.length === 0) return null;
+
+    return (
+        <View style={styles.wasteTypes}>
+            {types.map((wasteType) => (
+                <View
+                    key={wasteType.wasteTypeId}
+                    style={[styles.wasteType, { backgroundColor: wasteType.color }]}
+                />
+            ))}
+        </View>
+    );
+}
+
+export function CollectionCalendar({}: CollectionCalendarProps): ReactNode {
+    const {
+        weekDays,
+        weeks,
+        monthLabel,
+        goToNextMonth,
+        goToPrevMonth,
+    } = useCollectionCalendar();
+    const { theme } = useTheme();
+    const t = resolveTheme(theme);
+    const themedStyles = createThemedStyles(theme);
+    const [monthKey, setMonthKey] = useState(0);
+    const today = new Date();
+    const todayDay = today.getDate();
+    const todayMonth = today.getMonth();
+    const todayYear = today.getFullYear();
+    const exceptionFill = colorAlpha(theme.colors.error, "33");
+
+    const prev = async () => {
+        await hapticSelection();
+        goToPrevMonth();
+        setMonthKey((k) => k - 1);
+    };
+    const next = async () => {
+        await hapticSelection();
+        goToNextMonth();
+        setMonthKey((k) => k + 1);
+    };
+
+    return (
+        <View style={styles.collectionCalendar}>
+            <ContentInset>
+                <View style={styles.header}>
+                    <Text style={[styles.monthLabel, { color: t.colors.muted }]}>
+                        {monthLabel.toUpperCase()}
+                    </Text>
+                    <View style={styles.navRow}>
+                        <NavButton
+                            icon={ChevronLeftIcon}
+                            onPress={prev}
+                            style={styles.navCircle}
+                        />
+                        <NavButton
+                            icon={ChevronRightIcon}
+                            onPress={next}
+                            style={styles.navCircle}
+                        />
+                    </View>
+                </View>
+            </ContentInset>
+
+            <Animated.View
+                key={monthKey}
+                entering={FadeIn.duration(220)}
+                exiting={FadeOut.duration(160)}
+                style={styles.grid}
+            >
+                <View style={[styles.calendarHeader, { backgroundColor: theme.colors.background }]}>
+                    {weekDays.map((weekDay) => (
+                        <View key={weekDay} style={styles.calendarHeaderCell}>
+                            <Text style={themedStyles.mutedText}>{weekDay}</Text>
+                        </View>
+                    ))}
+                </View>
+                <View style={styles.calendarBody}>
+                    {weeks.map((week, index) => (
+                        <View
+                            key={index}
+                            style={[
+                                styles.calendarBodyRow,
+                                {
+                                    backgroundColor:
+                                        index % 2 === 0
+                                            ? theme.colors.surface
+                                            : theme.colors.background,
+                                },
+                            ]}
+                        >
+                            {week.map((day, cellIndex) => {
+                                const isToday =
+                                    day.inCurrentMonth &&
+                                    day.day === todayDay &&
+                                    day.month === todayMonth &&
+                                    day.year === todayYear;
+                                const isException = day.exceptions.length > 0;
+
+                                return (
+                                    <View
+                                        key={cellIndex}
+                                        style={[
+                                            styles.calendarBodyCell,
+                                            !day.inCurrentMonth && styles.notCurrentMonth,
+                                        ]}
+                                    >
+                                        {isToday || isException ? (
+                                            <View
+                                                pointerEvents="none"
+                                                style={[
+                                                    styles.dayHighlight,
+                                                    {
+                                                        backgroundColor: isToday
+                                                            ? theme.colors.primary
+                                                            : exceptionFill,
+                                                        borderRadius: t.radii.sm,
+                                                    },
+                                                ]}
+                                            />
+                                        ) : null}
+                                        <Text
+                                            style={[
+                                                styles.dayNumber,
+                                                isToday
+                                                    ? {
+                                                          color: theme.colors.onPrimary,
+                                                          fontWeight: "700",
+                                                      }
+                                                    : isException
+                                                      ? {
+                                                            color: theme.colors.error,
+                                                            fontWeight: "700",
+                                                        }
+                                                      : themedStyles.dayNumber,
+                                            ]}
+                                        >
+                                            {day.day}
+                                        </Text>
+                                        <WasteTypePins types={day.wasteTypesForDay} />
+                                    </View>
+                                );
+                            })}
+                        </View>
+                    ))}
+                </View>
+            </Animated.View>
+
+            <NextCollection showCalendarCta={false} />
+        </View>
+    );
+}
+
+const createThemedStyles = (theme: Theme) =>
+    StyleSheet.create({
+        dayNumber: {
+            color: theme.colors.muted ?? theme.colors.onSurface,
+        },
+        mutedText: {
+            color: theme.colors.muted ?? theme.colors.onSurface,
+            fontSize: 12,
+            fontWeight: "600",
+        },
+    });
+
+const styles = StyleSheet.create({
+    collectionCalendar: {
+        gap: SPACE.sectionY,
+        width: "100%",
+    },
+    header: {
+        flexDirection: "row",
+        justifyContent: "space-between",
+        alignItems: "center",
+        paddingVertical: 12,
+    },
+    monthLabel: {
+        fontSize: 13,
+        fontWeight: "700",
+        letterSpacing: 0.6,
+    },
+    navRow: {
+        flexDirection: "row",
+        gap: 8,
+    },
+    navCircle: {
+        width: SPACE.iconHit,
+        height: SPACE.iconHit,
+    },
+    grid: {
+        width: "100%",
+        overflow: "hidden",
+    },
+    calendarHeader: {
+        flexDirection: "row",
+    },
+    calendarHeaderCell: {
+        flex: 1,
+        paddingVertical: 10,
+        alignItems: "center",
+    },
+    calendarBody: {
+        width: "100%",
+    },
+    calendarBodyRow: {
+        flexDirection: "row",
+    },
+    calendarBodyCell: {
+        flex: 1,
+        aspectRatio: 1,
+        position: "relative",
+        alignItems: "center",
+        justifyContent: "center",
+    },
+    dayHighlight: {
+        ...StyleSheet.absoluteFillObject,
+        margin: CELL_INSET,
+        zIndex: 0,
+    },
+    dayNumber: {
+        fontSize: 14,
+        fontWeight: "600",
+        zIndex: 1,
+    },
+    notCurrentMonth: {
+        opacity: 0.32,
+    },
+    wasteTypes: {
+        position: "absolute",
+        left: CELL_INSET,
+        right: CELL_INSET,
+        bottom: CELL_INSET + 2,
+        height: PIN_H,
+        flexDirection: "row",
+        borderRadius: PIN_H / 2,
+        overflow: "hidden",
+        zIndex: 2,
+    },
+    wasteType: {
+        flex: 1,
+        height: PIN_H,
+    },
+});

package/src/components/columns/Columns.tsx

@@ -1,34 +1,34 @@
-import { Children, PropsWithChildren, type ReactNode } from "react"
-import { StyleSheet, View } from "react-native";
-
-export type ColumnsColumnCount = 2 | 3;
-
-export type ColumnsProps = PropsWithChildren & {
-    columnCount: ColumnsColumnCount
-}
-
-export function Columns({
-    columnCount,
-    children
-}: ColumnsProps): ReactNode {
-    if (Children.count(children) > columnCount) {
-        throw new Error(`Columns must have ${columnCount} (columnCount) children.`);
-    }
-
-    return <View style={styles.columns}>
-        {Children.map(children, (child) => (
-            <View style={styles.column}>{child}</View>
-        ))}
-    </View>
-}
-
-const styles = StyleSheet.create({
-    columns: {
-        flexDirection: "row",
-        width: "100%"
-    },
-    column: {
-        padding: 5,
-        flex: 1
-    },
+import { Children, PropsWithChildren, type ReactNode } from "react"
+import { StyleSheet, View } from "react-native";
+
+export type ColumnsColumnCount = 2 | 3;
+
+export type ColumnsProps = PropsWithChildren & {
+    columnCount: ColumnsColumnCount
+}
+
+export function Columns({
+    columnCount,
+    children
+}: ColumnsProps): ReactNode {
+    if (Children.count(children) > columnCount) {
+        throw new Error(`Columns must have ${columnCount} (columnCount) children.`);
+    }
+
+    return <View style={styles.columns}>
+        {Children.map(children, (child) => (
+            <View style={styles.column}>{child}</View>
+        ))}
+    </View>
+}
+
+const styles = StyleSheet.create({
+    columns: {
+        flexDirection: "row",
+        width: "100%"
+    },
+    column: {
+        padding: 5,
+        flex: 1
+    },
 });