@lazerlen/legend-calendar 1.0.0

package/src/components/CalendarRowMonth.tsx

@@ -0,0 +1,62 @@
+import type { ReactNode } from "react";
+import { useMemo } from "react";
+import type { TextStyle, ViewStyle } from "react-native";
+import { StyleSheet, Text, View } from "react-native";
+
+import { useTheme } from "@/hooks/useTheme";
+
+const styles = StyleSheet.create({
+  container: {
+    width: "100%",
+    alignItems: "center",
+    justifyContent: "center",
+  },
+  content: {
+    textAlign: "center",
+    width: "100%",
+  },
+});
+
+interface CalendarRowMonthTheme {
+  container?: ViewStyle;
+  content?: TextStyle;
+}
+
+export interface CalendarRowMonthProps {
+  children: ReactNode;
+  /**
+   * The height of the month row, needed to correctly measure the calendar's
+   * height.
+   */
+  height: number;
+  /** The theme of the month row, useful for customizing the component. */
+  theme?: CalendarRowMonthTheme;
+}
+
+export const CalendarRowMonth = ({
+  children,
+  height,
+  theme,
+}: CalendarRowMonthProps) => {
+  const baseTheme = useTheme();
+  const { containerStyles, contentStyles } = useMemo(() => {
+    const containerStyles = [styles.container, { height }, theme?.container];
+    const contentStyles = [
+      styles.content,
+      { color: baseTheme.colors.content.primary },
+      theme?.content,
+    ];
+    return { containerStyles, contentStyles };
+  }, [
+    baseTheme.colors.content.primary,
+    height,
+    theme?.container,
+    theme?.content,
+  ]);
+
+  return (
+    <View style={containerStyles}>
+      <Text style={contentStyles}>{children}</Text>
+    </View>
+  );
+};

package/src/components/CalendarRowWeek.tsx

@@ -0,0 +1,46 @@
+import type { ReactNode } from "react";
+import { useMemo } from "react";
+import type { ViewStyle } from "react-native";
+import { StyleSheet } from "react-native";
+
+import { HStack } from "@/components/HStack";
+import type { BaseTheme } from "@/helpers/tokens";
+
+export interface CalendarRowWeekProps {
+  children: ReactNode;
+  spacing?: keyof BaseTheme["spacing"];
+  theme?: CalendarRowWeekTheme;
+}
+
+interface CalendarRowWeekTheme {
+  container?: ViewStyle;
+}
+
+const styles = StyleSheet.create({
+  container: {
+    width: "100%",
+  },
+});
+
+export const CalendarRowWeek = ({
+  children,
+  spacing = 0,
+  theme,
+}: CalendarRowWeekProps) => {
+  const { containerStyles } = useMemo(() => {
+    return {
+      containerStyles: { ...styles.container, ...(theme?.container ?? {}) },
+    };
+  }, [theme?.container]);
+  return (
+    <HStack
+      alignItems="center"
+      grow
+      justifyContent="space-between"
+      spacing={spacing}
+      style={containerStyles}
+    >
+      {children}
+    </HStack>
+  );
+};

package/src/components/CalendarThemeProvider.tsx

@@ -0,0 +1,43 @@
+import type { ReactNode } from "react";
+import { createContext, useContext, useMemo } from "react";
+import type { ColorSchemeName } from "react-native";
+
+export interface CalendarThemeContextType {
+  colorScheme?: ColorSchemeName;
+}
+
+const CalendarThemeContext = createContext<CalendarThemeContextType>({
+  colorScheme: undefined,
+});
+
+export const CalendarThemeProvider = ({
+  children,
+  colorScheme,
+}: {
+  children: ReactNode;
+  /**
+   * When set, Legend Calendar will use this color scheme instead of the system's
+   * value (`light|dark`). This is useful if your app doesn't support dark-mode,
+   * for example.
+   *
+   * We don't advise using this prop - ideally, your app should reflect the
+   * user's preferences.
+   */
+  colorScheme?: ColorSchemeName;
+}) => {
+  const calendarThemeContextValue = useMemo<CalendarThemeContextType>(
+    () => ({ colorScheme }),
+    [colorScheme]
+  );
+
+  return (
+    <CalendarThemeContext.Provider value={calendarThemeContextValue}>
+      {children}
+    </CalendarThemeContext.Provider>
+  );
+};
+
+export const useCalendarTheme = () => {
+  const context = useContext(CalendarThemeContext);
+  return context;
+};

package/src/components/HStack.tsx

@@ -0,0 +1,67 @@
+import { useMemo, type ReactNode } from "react";
+import { StyleSheet, View, type ViewStyle } from "react-native";
+
+const styles = StyleSheet.create({
+  container: {
+    alignItems: "center",
+    flexDirection: "row",
+    flexGrow: 0,
+    flexShrink: 0,
+    flexWrap: "nowrap",
+    justifyContent: "flex-start",
+  },
+});
+
+export interface HStackProps {
+  alignItems?: ViewStyle["alignItems"];
+  justifyContent?: ViewStyle["justifyContent"];
+  children: ReactNode;
+  grow?: boolean;
+  shrink?: boolean;
+  spacing?: number;
+  wrap?: ViewStyle["flexWrap"];
+  backgroundColor?: string;
+  style?: ViewStyle;
+  width?: ViewStyle["width"];
+}
+
+export const HStack = ({
+  alignItems,
+  children,
+  justifyContent = "flex-start",
+  grow = false,
+  shrink = false,
+  spacing = 0,
+  wrap = "nowrap",
+  backgroundColor,
+  width,
+  style = {},
+}: HStackProps) => {
+  const containerStyles = useMemo<ViewStyle[]>(
+    () => [
+      styles.container,
+      { gap: spacing },
+      grow ? { flexGrow: 1 } : {},
+      shrink ? { flexShrink: 1 } : {},
+      wrap ? { flexWrap: wrap } : {},
+      alignItems ? { alignItems } : {},
+      justifyContent ? { justifyContent } : {},
+      backgroundColor ? { backgroundColor } : {},
+      width ? { width } : {},
+      style,
+    ],
+    [
+      alignItems,
+      backgroundColor,
+      grow,
+      justifyContent,
+      shrink,
+      spacing,
+      style,
+      width,
+      wrap,
+    ]
+  );
+
+  return <View style={containerStyles}>{children}</View>;
+};

package/src/components/VStack.tsx

@@ -0,0 +1,67 @@
+import {
+  Children,
+  Fragment,
+  isValidElement,
+  useMemo,
+  type ReactElement,
+  type ReactNode,
+} from "react";
+import { StyleSheet, View, type ViewStyle } from "react-native";
+
+const styles = StyleSheet.create({
+  container: {
+    flexDirection: "column",
+  },
+});
+
+export interface VStackDividerProps {
+  marginBottom: number;
+}
+
+export interface VStackProps {
+  children: ReactNode;
+  spacing?: number;
+
+  alignItems?: ViewStyle["alignItems"];
+  justifyContent?: ViewStyle["justifyContent"];
+
+  /** If the VStack should `flex: 1` to fill the parent's height */
+  grow?: boolean;
+}
+
+function isFragment(
+  child: ReactNode
+): child is ReactElement<{ children?: ReactNode }> {
+  return isValidElement(child) && child.type === Fragment;
+}
+
+export function VStack({
+  children,
+  spacing = 0,
+  alignItems,
+  justifyContent,
+  grow,
+}: VStackProps) {
+  const containerStyles = useMemo<ViewStyle>(
+    () => ({
+      ...styles.container,
+      gap: spacing,
+      alignItems,
+      justifyContent,
+      flex: grow ? 1 : undefined,
+    }),
+    [alignItems, grow, justifyContent, spacing]
+  );
+
+  return (
+    <View style={containerStyles}>
+      {Children.toArray(children)
+        .map((c) => (isFragment(c) ? c.props.children : c))
+        .flat()
+        .filter((c) => c !== null && typeof c !== "undefined")
+        .map((child, i) => (
+          <Fragment key={i}>{child}</Fragment>
+        ))}
+    </View>
+  );
+}

package/src/components/index.ts

@@ -0,0 +1,108 @@
+import { Calendar as CalendarDefault } from "@/components/Calendar";
+import {
+  CalendarItemDay,
+  CalendarItemDayContainer,
+  CalendarItemDayWithContainer,
+} from "@/components/CalendarItemDay";
+import { CalendarItemEmpty } from "@/components/CalendarItemEmpty";
+import { CalendarItemWeekName } from "@/components/CalendarItemWeekName";
+import { CalendarList } from "@/components/CalendarList";
+import { CalendarRowMonth } from "@/components/CalendarRowMonth";
+import { CalendarRowWeek } from "@/components/CalendarRowWeek";
+import { HStack } from "@/components/HStack";
+import { VStack } from "@/components/VStack";
+
+/**
+ * This file houses the public API for the legend-calendar package.
+ */
+
+type CalendarItemDayNamespace = {
+  Container: typeof CalendarItemDayContainer;
+  WithContainer: typeof CalendarItemDayWithContainer;
+} & typeof CalendarItemDay;
+
+const CalendarItemDayWithNamespace =
+  CalendarItemDay as CalendarItemDayNamespace;
+
+CalendarItemDayWithNamespace.Container = CalendarItemDayContainer;
+CalendarItemDayWithNamespace.WithContainer = CalendarItemDayWithContainer;
+export type {
+  CalendarOnDayPress,
+  CalendarProps,
+  CalendarTheme,
+} from "@/components/Calendar";
+export type {
+  CalendarItemDayContainerProps,
+  CalendarItemDayProps,
+  CalendarItemDayWithContainerProps,
+} from "@/components/CalendarItemDay";
+export type { CalendarItemEmptyProps } from "@/components/CalendarItemEmpty";
+export type { CalendarItemWeekNameProps } from "@/components/CalendarItemWeekName";
+export type {
+  CalendarListProps,
+  CalendarListRef,
+  CalendarMonthEnhanced,
+} from "@/components/CalendarList";
+export type { CalendarRowMonthProps } from "@/components/CalendarRowMonth";
+export type { CalendarRowWeekProps } from "@/components/CalendarRowWeek";
+export type { HStackProps } from "@/components/HStack";
+export type { VStackProps } from "@/components/VStack";
+
+interface CalendarItemNamespace {
+  /**
+   * Renders the day item of the calendar (e.g. `1`, `2`, `3`, etc.)
+   */
+  Day: typeof CalendarItemDayWithNamespace;
+  /**
+   * Renders the week day name item of the calendar (e.g. `Sun`, `Mon`, `Tue`, etc.)
+   */
+  WeekName: typeof CalendarItemWeekName;
+  /**
+   * Renders an empty item to fill the calendar's grid in the start or end of
+   * the month.
+   */
+  Empty: typeof CalendarItemEmpty;
+}
+
+const CalendarItemWithNamespace = {} as CalendarItemNamespace;
+CalendarItemWithNamespace.Day = CalendarItemDayWithNamespace;
+
+CalendarItemWithNamespace.WeekName = CalendarItemWeekName;
+
+CalendarItemWithNamespace.Empty = CalendarItemEmpty;
+
+interface CalendarRowNamespace {
+  /**
+   * Renders the month row of the calendar (e.g. `January`, `February`, `March`, etc.)
+   */
+  Month: typeof CalendarRowMonth;
+  /**
+   * Renders each week row of the calendar, including the week day names.
+   */
+  Week: typeof CalendarRowWeek;
+}
+
+const CalendarRowWithNamespace = {} as CalendarRowNamespace;
+CalendarRowWithNamespace.Month = CalendarRowMonth;
+
+CalendarRowWithNamespace.Week = CalendarRowWeek;
+
+type CalendarNamespace = {
+  Item: typeof CalendarItemWithNamespace;
+  Row: typeof CalendarRowWithNamespace;
+  List: typeof CalendarList;
+  HStack: typeof HStack;
+  VStack: typeof VStack;
+} & typeof CalendarDefault;
+
+const CalendarWithNamespace = CalendarDefault as CalendarNamespace;
+CalendarWithNamespace.Item = CalendarItemWithNamespace;
+CalendarWithNamespace.Row = CalendarRowWithNamespace;
+
+CalendarWithNamespace.List = CalendarList;
+
+// Useful for customizing the layout of the calendar, re-exported for convenience
+CalendarWithNamespace.HStack = HStack;
+CalendarWithNamespace.VStack = VStack;
+
+export const Calendar = CalendarWithNamespace;

package/src/developer/decorators.tsx

@@ -0,0 +1,54 @@
+import type { PropsWithChildren, ReactNode } from "react";
+import { StatusBar } from "expo-status-bar";
+import { memo, useMemo } from "react";
+import { StyleSheet, View, type ViewStyle } from "react-native";
+
+import { useTheme } from "@/hooks/useTheme";
+
+const styles = StyleSheet.create({
+  centered: {
+    justifyContent: "center",
+    alignItems: "center",
+    flex: 1,
+  },
+  paddedContainer: {
+    padding: 12,
+    flex: 1,
+  },
+  container: {
+    flex: 1,
+  },
+});
+
+export const centeredDecorator = (storyFn: () => ReactNode) => (
+  <View style={styles.centered}>{storyFn()}</View>
+);
+
+export const paddingDecorator = (storyFn: () => ReactNode) => (
+  <View style={styles.paddedContainer}>{storyFn()}</View>
+);
+
+const BackgroundStory = memo(({ children }: PropsWithChildren) => {
+  const { colors } = useTheme();
+  const containerStyles = useMemo<ViewStyle[]>(
+    () => [
+      styles.container,
+      {
+        backgroundColor: colors.background.primary,
+      },
+    ],
+    [colors]
+  );
+
+  return (
+    <View style={containerStyles}>
+      <StatusBar />
+      {children}
+    </View>
+  );
+});
+BackgroundStory.displayName = "BackgroundStory";
+
+export const backgroundDecorator = (storyFn: () => ReactNode) => (
+  <BackgroundStory>{storyFn()}</BackgroundStory>
+);

package/src/developer/loggginHandler.tsx

@@ -0,0 +1,6 @@
+export const loggingHandler =
+  (msg: string, printArgs = true) =>
+  (...args: any[]) => {
+    // eslint-disable-next-line no-console
+    console.log(...[msg, ...(printArgs ? args : [])].filter(Boolean));
+  };

package/src/developer/useRenderCount.ts

@@ -0,0 +1,7 @@
+import { useRef } from "react";
+
+export const useRenderCount = () => {
+  const renderCount = useRef(0);
+  renderCount.current += 1;
+  return renderCount.current;
+};