Configure darkmode with props

[bpingris]

hey!
this is a follow up pr after this tweet

I though about such api where we would only need to pass a darkMode: bool prop, if none is given we still use the useColorScheme hook call etc.

what do you think?

I haven't had the time to test it yet though! so I leave it as a draft for now, thanks!

[changeset-bot]

🦋 Changeset detected

Latest commit: dd68c15

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package

Name	Type
@marceloterreiro/flash-calendar	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[MarceloPrado]

Great work @bpingris, I really appreciate the contribution ❤️
Left some feedbacks to increase the flexibility of the code.

We'll also need to:

1. Forward the prop in Calendar.List
2. Add a Calendar story to showcase/test the functionality.

Let me know if you have any FUP questions!

[MarceloPrado]

can we move this to a useCalendarTheme file?

[MarceloPrado]

Let's make this more flexible by changing to:

  
  /**
   * When set, Flash 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.
   */
  colorSchemeToOverride?: ColorSchemeName;

[MarceloPrado]

can we move this to a useCalendarTheme.ts file?

[MarceloPrado]

instead of darkMode, let's use the idea from above:

type CalendarContextType = {
  /** The overridden color scheme */
  colorScheme?: ColorSchemeName
}

const calendarThemeContext = createContext<CalendarContextType | undefined>(undefined)

[MarceloPrado]

nit: let's also change the error message to reflect the new context name

[MarceloPrado]

We need to memo this value to avoid re-renders:

const calendarThemeContextValue = useMemo<CalendarThemeContext>(() => ({ colorScheme: colorSchemeToOverride }), [colorSchemeToOverride])

[bpingris]

@MarceloPrado I've made the changes but I think I'm stuck with the storybook
which command should I run to launch it?
for now I've cd in /apps/example and ran bun run ios, it launched the storybook on my ios simulator but the code seems buggy (for instance my context is not set it seems (perhaps it just my code that does not work and not the way I launched sb)
thanks!

[MarceloPrado]

@bpingris bun run dev at the root is everything that's required to run both storybook and the documentation site.

I ran your PR locally and saw this error:

One thing I realized: we don't want to throw an error if someone forgets to add the context. One of Flash Calendar's principles is that's easy to customize/compose. Adding a context consumers have to wrap is a step against that direction. What do you think of this approach?

import { createContext, useContext } from "react";
import type { ColorSchemeName } from "react-native";

export interface CalendarThemeContext {
  /** The overridden color scheme */
  colorScheme?: ColorSchemeName;
}

export const calendarThemeContext = createContext<CalendarThemeContext>({
  colorScheme: undefined,
});

export const useCalendarThemeContext = () => {
  const context = useContext(calendarThemeContext);
  return context;
};

I ran your code using the context above and everything seems to work as expected (the calendar stops listening to the theme):

CleanShot.2024-04-12.at.15.03.05.mp4

[bpingris]

hey sorry for the delay!
oh yea you're right that's why I had the error! I forgot about the composability stuff and could not understand how this error could happen as both Calendar and CalendarList were returning the context
and of course you're right we should add the default value undefined for the context

[MarceloPrado]

Hi @bpingris!
I pushed a few changes to this commit to ensure it's ready for release. Here are the notable changes:

• add changeset + docs
• Fix Calendar.List usage - instead of using the context in this component, we just had to forward it to Calendar
• Renamed prop to better match the prop pattern (always prefixed with calendar - theme is the only deviation of this)
• Moved hook to a custom file

let me know if you have further questions!