Merge from 'dev/main'

app/[...filename]/client-page.tsx

@@ -3,6 +3,9 @@ import { tinaField, useTina } from "tinacms/dist/react";
 import { TinaMarkdown } from "tinacms/dist/rich-text";
 import { Box } from "../../styled-system/jsx";
 
+import { Code } from "app/components/Code";
+import { H1, H2, H3, H4, H5, H6 } from "app/components/Heading";
+import { Paragraph } from "app/components/Text";
 import type { PageQuery } from "../../tina/__generated__/types";
 
 interface ClientPageProps {
@@ -24,7 +27,19 @@ export default function ClientPage(props: ClientPageProps) {
 	const content = data.page.body;
 	return (
 		<Box data-tina-field={tinaField(data.page, "body")}>
-			<TinaMarkdown content={content} />
+			<TinaMarkdown
+				components={{
+					h1: H1,
+					h2: H2,
+					h3: H3,
+					h4: H4,
+					h5: H5,
+					h6: H6,
+					p: Paragraph,
+					code: Code,
+				}}
+				content={content}
+			/>
 		</Box>
 	);
 }

app/components/Code/code.tsx

@@ -0,0 +1 @@
+export { Code, type CodeProps } from "./styled/code";

app/components/Code/index.tsx

@@ -0,0 +1,9 @@
+import { Code as CodeBase } from "./code";
+
+export const Code = (props) => (
+	<CodeBase as="code" {...props}>
+		{props?.children}
+	</CodeBase>
+);
+
+export * from "./code";

app/components/Code/styled/code.tsx

@@ -0,0 +1,7 @@
+import { ark } from "@ark-ui/react/factory";
+import { styled } from "styled-system/jsx";
+import { code } from "styled-system/recipes";
+import type { ComponentProps } from "styled-system/types";
+
+export type CodeProps = ComponentProps<typeof Code>;
+export const Code = styled(ark.code, code);

app/components/Code/styled/utils/create-style-context.tsx

@@ -0,0 +1,105 @@
+import {
+	type ElementType,
+	type ForwardRefExoticComponent,
+	type PropsWithoutRef,
+	type RefAttributes,
+	createContext,
+	forwardRef,
+	useContext,
+} from "react";
+import { cx } from "styled-system/css";
+import { type StyledComponent, isCssProperty, styled } from "styled-system/jsx";
+
+type Props = Record<string, unknown>;
+type Recipe = {
+	(props?: Props): Props;
+	splitVariantProps: (props: Props) => [Props, Props];
+};
+type Slot<R extends Recipe> = keyof ReturnType<R>;
+type Options = { forwardProps?: string[] };
+
+const shouldForwardProp = (
+	prop: string,
+	variantKeys: string[],
+	options: Options = {},
+) =>
+	options.forwardProps?.includes(prop) ||
+	(!variantKeys.includes(prop) && !isCssProperty(prop));
+
+export const createStyleContext = <R extends Recipe>(recipe: R) => {
+	const StyleContext = createContext<Record<Slot<R>, string> | null>(null);
+
+	const withRootProvider = <P extends {}>(Component: ElementType) => {
+		const StyledComponent = (props: P) => {
+			const [variantProps, otherProps] = recipe.splitVariantProps(props);
+			const slotStyles = recipe(variantProps) as Record<Slot<R>, string>;
+
+			return (
+				<StyleContext.Provider value={slotStyles}>
+					<Component {...otherProps} />
+				</StyleContext.Provider>
+			);
+		};
+		return StyledComponent;
+	};
+
+	const withProvider = <T, P extends { className?: string | undefined }>(
+		Component: ElementType,
+		slot: Slot<R>,
+		options?: Options,
+	): ForwardRefExoticComponent<PropsWithoutRef<P> & RefAttributes<T>> => {
+		const StyledComponent = styled(
+			Component,
+			{},
+			{
+				shouldForwardProp: (prop, variantKeys) =>
+					shouldForwardProp(prop, variantKeys, options),
+			},
+		) as StyledComponent<ElementType>;
+		const StyledSlotProvider = forwardRef<T, P>((props, ref) => {
+			const [variantProps, otherProps] = recipe.splitVariantProps(props);
+			const slotStyles = recipe(variantProps) as Record<Slot<R>, string>;
+
+			return (
+				<StyleContext.Provider value={slotStyles}>
+					<StyledComponent
+						{...otherProps}
+						ref={ref}
+						className={cx(slotStyles?.[slot], props.className)}
+					/>
+				</StyleContext.Provider>
+			);
+		});
+
+		StyledSlotProvider.displayName = Component.displayName || Component.name;
+
+		return StyledSlotProvider;
+	};
+
+	const withContext = <T, P extends { className?: string | undefined }>(
+		Component: ElementType,
+		slot: Slot<R>,
+	): ForwardRefExoticComponent<PropsWithoutRef<P> & RefAttributes<T>> => {
+		const StyledComponent = styled(Component);
+		const StyledSlotComponent = forwardRef<T, P>((props, ref) => {
+			const slotStyles = useContext(StyleContext);
+			return (
+				<StyledComponent
+					{...props}
+					ref={ref}
+					className={cx(slotStyles?.[slot], props.className)}
+				/>
+			);
+		});
+
+		StyledSlotComponent.displayName = Component.displayName || Component.name;
+
+		return StyledSlotComponent;
+	};
+
+	return {
+		withRootProvider,
+		withProvider,
+		withContext,
+	};
+};

app/components/Heading/heading.tsx

@@ -0,0 +1 @@
+export { Heading, type HeadingProps } from "./styled/heading";

app/components/Heading/index.tsx

@@ -0,0 +1,39 @@
+import { Heading } from "./heading";
+
+export const H1 = (props) => (
+	<Heading as="h1" size="5xl" {...props}>
+		{props?.children}
+	</Heading>
+);
+
+export const H2 = (props) => (
+	<Heading as="h2" size="4xl" {...props}>
+		{props?.children}
+	</Heading>
+);
+
+export const H3 = (props) => (
+	<Heading as="h3" size="3xl" {...props}>
+		{props?.children}
+	</Heading>
+);
+
+export const H4 = (props) => (
+	<Heading as="h4" size="2xl" {...props}>
+		{props?.children}
+	</Heading>
+);
+
+export const H5 = (props) => (
+	<Heading as="h5" size="xl" {...props}>
+		{props?.children}
+	</Heading>
+);
+
+export const H6 = (props) => (
+	<Heading as="h6" size="lg" {...props}>
+		{props?.children}
+	</Heading>
+);
+
+export * from "./heading";

app/components/Heading/styled/heading.tsx

@@ -0,0 +1,10 @@
+import { styled } from "styled-system/jsx";
+import { type TextVariantProps, text } from "styled-system/recipes";
+import type { ComponentProps, StyledComponent } from "styled-system/types";
+
+type TextProps = TextVariantProps & { as?: React.ElementType };
+
+export type HeadingProps = ComponentProps<typeof Heading>;
+export const Heading = styled("h2", text, {
+	defaultProps: { variant: "heading" },
+}) as StyledComponent<"h2", TextProps>;

app/components/Heading/styled/utils/create-style-context.tsx

@@ -0,0 +1,105 @@
+import {
+	type ElementType,
+	type ForwardRefExoticComponent,
+	type PropsWithoutRef,
+	type RefAttributes,
+	createContext,
+	forwardRef,
+	useContext,
+} from "react";
+import { cx } from "styled-system/css";
+import { type StyledComponent, isCssProperty, styled } from "styled-system/jsx";
+
+type Props = Record<string, unknown>;
+type Recipe = {
+	(props?: Props): Props;
+	splitVariantProps: (props: Props) => [Props, Props];
+};
+type Slot<R extends Recipe> = keyof ReturnType<R>;
+type Options = { forwardProps?: string[] };
+
+const shouldForwardProp = (
+	prop: string,
+	variantKeys: string[],
+	options: Options = {},
+) =>
+	options.forwardProps?.includes(prop) ||
+	(!variantKeys.includes(prop) && !isCssProperty(prop));
+
+export const createStyleContext = <R extends Recipe>(recipe: R) => {
+	const StyleContext = createContext<Record<Slot<R>, string> | null>(null);
+
+	const withRootProvider = <P extends {}>(Component: ElementType) => {
+		const StyledComponent = (props: P) => {
+			const [variantProps, otherProps] = recipe.splitVariantProps(props);
+			const slotStyles = recipe(variantProps) as Record<Slot<R>, string>;
+
+			return (
+				<StyleContext.Provider value={slotStyles}>
+					<Component {...otherProps} />
+				</StyleContext.Provider>
+			);
+		};
+		return StyledComponent;
+	};
+
+	const withProvider = <T, P extends { className?: string | undefined }>(
+		Component: ElementType,
+		slot: Slot<R>,
+		options?: Options,
+	): ForwardRefExoticComponent<PropsWithoutRef<P> & RefAttributes<T>> => {
+		const StyledComponent = styled(
+			Component,
+			{},
+			{
+				shouldForwardProp: (prop, variantKeys) =>
+					shouldForwardProp(prop, variantKeys, options),
+			},
+		) as StyledComponent<ElementType>;
+		const StyledSlotProvider = forwardRef<T, P>((props, ref) => {
+			const [variantProps, otherProps] = recipe.splitVariantProps(props);
+			const slotStyles = recipe(variantProps) as Record<Slot<R>, string>;
+
+			return (
+				<StyleContext.Provider value={slotStyles}>
+					<StyledComponent
+						{...otherProps}
+						ref={ref}
+						className={cx(slotStyles?.[slot], props.className)}
+					/>
+				</StyleContext.Provider>
+			);
+		});
+
+		StyledSlotProvider.displayName = Component.displayName || Component.name;
+
+		return StyledSlotProvider;
+	};
+
+	const withContext = <T, P extends { className?: string | undefined }>(
+		Component: ElementType,
+		slot: Slot<R>,
+	): ForwardRefExoticComponent<PropsWithoutRef<P> & RefAttributes<T>> => {
+		const StyledComponent = styled(Component);
+		const StyledSlotComponent = forwardRef<T, P>((props, ref) => {
+			const slotStyles = useContext(StyleContext);
+			return (
+				<StyledComponent
+					{...props}
+					ref={ref}
+					className={cx(slotStyles?.[slot], props.className)}
+				/>
+			);
+		});
+
+		StyledSlotComponent.displayName = Component.displayName || Component.name;
+
+		return StyledSlotComponent;
+	};
+
+	return {
+		withRootProvider,
+		withProvider,
+		withContext,
+	};
+};

app/components/Text/index.tsx

@@ -0,0 +1,9 @@
+import { Text } from "./text";
+
+export const Paragraph = (props) => (
+	<Text as="p" {...props}>
+		{props?.children}
+	</Text>
+);
+
+export * from "./text";

app/components/Text/styled/text.tsx

@@ -0,0 +1,8 @@
+import { styled } from "styled-system/jsx";
+import { type TextVariantProps, text } from "styled-system/recipes";
+import type { ComponentProps, StyledComponent } from "styled-system/types";
+
+type ParagraphProps = TextVariantProps & { as?: React.ElementType };
+
+export type TextProps = ComponentProps<typeof Text>;
+export const Text = styled("p", text) as StyledComponent<"p", ParagraphProps>;