Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat(Theming): Adds cookbook recipes for using the new theming system with various libraries #124

Merged
merged 6 commits into from
Oct 14, 2024
+449 −76
Merged

feat(Theming): Adds cookbook recipes for using the new theming system with various libraries #124

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
047724e
chore(recpie): Adds Theming Ignite recipes
markrickert Feb 13, 2024
7f75732
Add theming recipe for Emotion.js
markrickert Feb 13, 2024
ddec421
Update warning for expo and unistyles.
markrickert Feb 14, 2024
d48df66
chore(docs): Update a few recipes for the new theming system.
markrickert Feb 15, 2024
5d870e8
chore: fix mdx codeblock imports.
markrickert Oct 14, 2024
83ad780
chore: run npx update-browserslist-db@latest
markrickert Oct 14, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 6 additions & 4 deletions docs/recipes/Redux.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -131,30 +131,32 @@ import React, { FC } from "react";
import { View, ViewStyle } from "react-native";
import { Button, Text } from "app/components";
import { AppStackScreenProps } from "../navigators";
import { colors } from "../theme";
import type { ThemedStyle } from "app/theme";
import { useAppTheme } from "app/utils/useAppTheme";
import { useSafeAreaInsetsStyle } from "../utils/useSafeAreaInsetsStyle";
import { useAppDispatch, useAppSelector } from "app/store/store";
import { decrement, increment } from "app/store/counterSlice";

interface WelcomeScreenProps extends AppStackScreenProps<"Welcome"> {}

export const WelcomeScreen: FC<WelcomeScreenProps> = () => {
const { themed } = useAppTheme();
const $containerInsets = useSafeAreaInsetsStyle(["top", "bottom"]);
const count = useAppSelector((state) => state.counter.value);
const dispatch = useAppDispatch();
return (
<View style={[$containerInsets, $container]}>
<View style={themed([$containerInsets, $container])}>
<Button text="Increment" onPress={() => dispatch(increment())} />
<Button text="Decrement" onPress={() => dispatch(decrement())} />
<Text text={`Count: ${count}`} />
</View>
);
};

const $container: ViewStyle = {
const $container: ThemedStyle<ViewStyle> = ({ colors }) => ({
flex: 1,
backgroundColor: colors.background,
};
});
```

You're now using Redux!
Expand Down
99 changes: 37 additions & 62 deletions docs/recipes/SelectFieldWithBottomSheet.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -60,10 +60,7 @@ import { View, TouchableOpacity } from "react-native";
import { TextField, TextFieldProps } from "./TextField";

export interface SelectFieldProps
extends Omit<
TextFieldProps,
"ref" | "onValueChange" | "onChange" | "value"
> {}
extends Omit<TextFieldProps, "ref" | "onValueChange" | "onChange" | "value"> {}
export interface SelectFieldRef {}

export const SelectField = forwardRef(function SelectField(
Expand All @@ -72,8 +69,7 @@ export const SelectField = forwardRef(function SelectField(
) {
const { ...TextFieldProps } = props;

const disabled =
TextFieldProps.editable === false || TextFieldProps.status === "disabled";
const disabled = TextFieldProps.editable === false || TextFieldProps.status === "disabled";

useImperativeHandle(ref, () => ({}));

Expand Down Expand Up @@ -121,9 +117,7 @@ Let's add an accessory to the input to make it look like a `SelectField`.
```tsx
<TextField
{...TextFieldProps}
RightAccessory={(props) => (
<Icon icon="caretRight" containerStyle={props.style} />
)}
RightAccessory={(props) => <Icon icon="caretRight" containerStyle={props.style} />}
/>
```

Expand Down Expand Up @@ -210,8 +204,7 @@ export const SelectField = forwardRef(function SelectField(
...TextFieldProps
} = props;

const disabled =
TextFieldProps.editable === false || TextFieldProps.status === "disabled";
const disabled = TextFieldProps.editable === false || TextFieldProps.status === "disabled";

useImperativeHandle(ref, () => ({}));

Expand All @@ -232,9 +225,7 @@ export const SelectField = forwardRef(function SelectField(
{...TextFieldProps}
// success-line-start
value={valueString}
RightAccessory={(props) => (
<Icon icon="caretRight" containerStyle={props.style} />
)}
RightAccessory={(props) => <Icon icon="caretRight" containerStyle={props.style} />}
// success-line-end
/>
</View>
Expand Down Expand Up @@ -348,6 +339,8 @@ import {
// success-line-end
import React, { forwardRef, Ref, useImperativeHandle, useRef } from "react";
import { TouchableOpacity, View, ViewStyle } from "react-native";
import type { ThemedStyle } from "app/theme";
import { useAppTheme } from "app/utils/useAppTheme";
// success-line
import { useSafeAreaInsets } from "react-native-safe-area-context";
// success-line
Expand Down Expand Up @@ -391,8 +384,9 @@ export const SelectField = forwardRef(function SelectField(
const { bottom } = useSafeAreaInsets();
// success-line-end

const disabled =
TextFieldProps.editable === false || TextFieldProps.status === "disabled";
const { themed } = useAppTheme();

const disabled = TextFieldProps.editable === false || TextFieldProps.status === "disabled";

// success-line
useImperativeHandle(ref, () => ({ presentOptions, dismissOptions }));
Expand Down Expand Up @@ -426,9 +420,7 @@ export const SelectField = forwardRef(function SelectField(
<TextField
{...TextFieldProps}
value={valueString}
RightAccessory={(props) => (
<Icon icon="caretRight" containerStyle={props.style} />
)}
RightAccessory={(props) => <Icon icon="caretRight" containerStyle={props.style} />}
/>
</View>
</TouchableOpacity>
Expand All @@ -440,26 +432,18 @@ export const SelectField = forwardRef(function SelectField(
stackBehavior="replace"
enableDismissOnClose
backdropComponent={(props) => (
<BottomSheetBackdrop
{...props}
appearsOnIndex={0}
disappearsOnIndex={-1}
/>
<BottomSheetBackdrop {...props} appearsOnIndex={0} disappearsOnIndex={-1} />
)}
footerComponent={
!multiple
? undefined
: (props) => (
<BottomSheetFooter
{...props}
style={$bottomSheetFooter}
style={themed($bottomSheetFooter)}
bottomInset={bottom}
>
<Button
text="Dismiss"
preset="reversed"
onPress={dismissOptions}
/>
<Button text="Dismiss" preset="reversed" onPress={dismissOptions} />
</BottomSheetFooter>
)
}
Expand All @@ -469,11 +453,7 @@ export const SelectField = forwardRef(function SelectField(
data={options}
keyExtractor={(o) => o.value}
renderItem={({ item, index }) => (
<ListItem
text={item.label}
topSeparator={index !== 0}
style={$listItem}
/>
<ListItem text={item.label} topSeparator={index !== 0} style={themed($listItem)} />
)}
/>
</BottomSheetModal>
Expand All @@ -483,14 +463,14 @@ export const SelectField = forwardRef(function SelectField(
});

// success-line-start
const $bottomSheetFooter: ViewStyle = {
const $bottomSheetFooter: ThemedStyle<ViewStyle> = ({ spacing }) => ({
paddingHorizontal: spacing.lg,
paddingBottom: spacing.xs,
};
});

const $listItem: ViewStyle = {
const $listItem: ThemedStyle<ViewStyle> = ({ spacing }) => ({
paddingHorizontal: spacing.lg,
};
});
// success-line-end
```

Expand All @@ -515,8 +495,8 @@ import {
import React, { forwardRef, Ref, useImperativeHandle, useRef } from "react";
import { TouchableOpacity, View, ViewStyle } from "react-native";
import { useSafeAreaInsets } from "react-native-safe-area-context";
// success-line
import { colors, spacing } from "../theme";
import type { ThemedStyle } from "app/theme";
import { useAppTheme } from "app/utils/useAppTheme";
import { Button } from "./Button";
import { Icon } from "./Icon";
import { ListItem } from "./ListItem";
Expand Down Expand Up @@ -555,9 +535,14 @@ export const SelectField = forwardRef(function SelectField(
} = props;
const sheet = useRef<BottomSheetModal>(null);
const { bottom } = useSafeAreaInsets();
const {
themed,
// success-line-start
theme: { colors },
// success-line-end
} = useAppTheme();

const disabled =
TextFieldProps.editable === false || TextFieldProps.status === "disabled";
const disabled = TextFieldProps.editable === false || TextFieldProps.status === "disabled";

useImperativeHandle(ref, () => ({ presentOptions, dismissOptions }));

Expand Down Expand Up @@ -596,9 +581,7 @@ export const SelectField = forwardRef(function SelectField(
<TextField
{...TextFieldProps}
value={valueString}
RightAccessory={(props) => (
<Icon icon="caretRight" containerStyle={props.style} />
)}
RightAccessory={(props) => <Icon icon="caretRight" containerStyle={props.style} />}
/>
</View>
</TouchableOpacity>
Expand All @@ -609,26 +592,18 @@ export const SelectField = forwardRef(function SelectField(
stackBehavior="replace"
enableDismissOnClose
backdropComponent={(props) => (
<BottomSheetBackdrop
{...props}
appearsOnIndex={0}
disappearsOnIndex={-1}
/>
<BottomSheetBackdrop {...props} appearsOnIndex={0} disappearsOnIndex={-1} />
)}
footerComponent={
!multiple
? undefined
: (props) => (
<BottomSheetFooter
{...props}
style={$bottomSheetFooter}
style={themed($bottomSheetFooter)}
bottomInset={bottom}
>
<Button
text="Dismiss"
preset="reversed"
onPress={dismissOptions}
/>
<Button text="Dismiss" preset="reversed" onPress={dismissOptions} />
</BottomSheetFooter>
)
}
Expand All @@ -641,7 +616,7 @@ export const SelectField = forwardRef(function SelectField(
<ListItem
text={item.label}
topSeparator={index !== 0}
style={$listItem}
style={themed($listItem)}
// success-line-start
rightIcon={value.includes(item.value) ? "check" : undefined}
rightIconColor={colors.palette.angry500}
Expand All @@ -655,14 +630,14 @@ export const SelectField = forwardRef(function SelectField(
);
});

const $bottomSheetFooter: ViewStyle = {
const $bottomSheetFooter: ThemedStyle<ViewStyle> = ({ spacing }) => ({
paddingHorizontal: spacing.lg,
paddingBottom: spacing.xs,
};
});

const $listItem: ViewStyle = {
const $listItem: ThemedStyle<ViewStyle> = ({ spacing }) => ({
paddingHorizontal: spacing.lg,
};
});
```

And we're done!
Expand Down
Loading
Loading