From d60e27cf7726a88a417a2426fc0c0971e842b369 Mon Sep 17 00:00:00 2001
From: Zoe Roux <zoe.roux@sdg.moe>
Date: Wed, 16 Nov 2022 11:40:17 +0900
Subject: [PATCH] Add pressable support on the web

---
 examples/next-example/src/pages/_app.tsx  |  3 +
 examples/next-example/src/pages/index.tsx | 27 +++++--
 packages/yoshiki/src/index.ts             |  2 +
 packages/yoshiki/src/native/generator.tsx | 18 ++---
 packages/yoshiki/src/react/generator.tsx  | 86 ++++++++++++++++-------
 packages/yoshiki/src/react/hover.ts       | 34 +++++++++
 packages/yoshiki/src/react/index.tsx      |  3 +
 packages/yoshiki/src/react/shorthands.ts  |  2 +
 packages/yoshiki/src/type.ts              | 15 +++-
 9 files changed, 143 insertions(+), 47 deletions(-)
 create mode 100644 packages/yoshiki/src/react/hover.ts

diff --git a/examples/next-example/src/pages/_app.tsx b/examples/next-example/src/pages/_app.tsx
index fdfcd2f..2cf3f62 100644
--- a/examples/next-example/src/pages/_app.tsx
+++ b/examples/next-example/src/pages/_app.tsx
@@ -5,6 +5,7 @@
 
 import { Theme, ThemeProvider, useYoshiki } from "yoshiki";
 import { AppProps } from "next/app";
+import { useMobileHover } from "yoshiki";
 
 declare module "yoshiki" {
 	export interface Theme {
@@ -25,6 +26,8 @@ const AppName = () => {
 };
 
 const App = ({ Component, pageProps }: AppProps) => {
+	useMobileHover();
+
 	return (
 		<ThemeProvider theme={theme}>
 			<Component {...pageProps} />
diff --git a/examples/next-example/src/pages/index.tsx b/examples/next-example/src/pages/index.tsx
index 75ff55b..a2033c4 100644
--- a/examples/next-example/src/pages/index.tsx
+++ b/examples/next-example/src/pages/index.tsx
@@ -12,12 +12,9 @@ const Box = ({ children, ...props }: { children?: ReactNode } & Stylable) => {
 	const { css } = useYoshiki();
 
 	return (
-		<div {...css({ width: "5rem", height: "5rem", background: "red" }, props)}>
-			{children}
-		</div>
-	)
-}
-
+		<div {...css({ width: "5rem", height: "5rem", background: "red" }, props)}>{children}</div>
+	);
+};
 
 export default function Home(props: object) {
 	const { css } = useYoshiki();
@@ -44,14 +41,30 @@ export default function Home(props: object) {
 
 				<div
 					{...css({
-						background: { xs: "red", sm: "blue", md: "green" },
+						backgroundColor: "green",
+						hover: {
+							backgroundColor: "blue",
+						},
+						press: {
+							backgroundColor: "red",
+						},
+						focus: {
+							backgroundColor: "yellow",
+						},
 					})}
+					tabIndex={0}
 				>
 					<a href="https://nextjs.org/docs">
 						<h2>Documentation &rarr;</h2>
 						<p>Find in-depth information about Next.js features and API.</p>
 					</a>
+				</div>
 
+				<div
+					{...css({
+						background: { xs: "red", sm: "blue", md: "green" },
+					})}
+				>
 					<a href="https://nextjs.org/learn">
 						<h2>Learn &rarr;</h2>
 						<p>Learn about Next.js in an interactive course with quizzes!</p>
diff --git a/packages/yoshiki/src/index.ts b/packages/yoshiki/src/index.ts
index 33776ad..1d7b11f 100644
--- a/packages/yoshiki/src/index.ts
+++ b/packages/yoshiki/src/index.ts
@@ -11,4 +11,6 @@ export {
 	StyleRegistryProvider,
 	createStyleRegistry,
 	type Stylable,
+	useMobileHover,
+	Pressable
 } from "./react";
diff --git a/packages/yoshiki/src/native/generator.tsx b/packages/yoshiki/src/native/generator.tsx
index f83a500..16c118c 100644
--- a/packages/yoshiki/src/native/generator.tsx
+++ b/packages/yoshiki/src/native/generator.tsx
@@ -5,7 +5,7 @@
 
 import { ViewStyle, TextStyle, ImageStyle, useWindowDimensions } from "react-native";
 import { breakpoints, Theme, useTheme } from "../theme";
-import { Breakpoints, YoshikiStyle } from "../type";
+import { AtLeastOne, Breakpoints, WithState, YoshikiStyle, hasState } from "../type";
 import { isBreakpoints } from "../utils";
 import { shorthandsFn } from "./shorthands";
 
@@ -54,18 +54,6 @@ const propertyMapper = <
 	return [[key, value]];
 };
 
-type WithState<Style> = {
-	hover: Style;
-	focus: Style;
-	press: Style;
-};
-type AtLeastOne<T, U = {[K in keyof T]: Pick<T, K> }> = Partial<T> & U[keyof U]
-
-const hasState = <Style,>(obj: unknown): obj is WithState<Style> => {
-	if (!obj || typeof obj !== "object") return false;
-	return "hover" in obj || "focus" in obj || "press" in obj;
-};
-
 export const useYoshiki = () => {
 	const breakpoint = useBreakpoint();
 	const theme = useTheme();
@@ -126,3 +114,7 @@ export const useYoshiki = () => {
 export type Stylable = {
 	style: Properties;
 };
+
+export type StylableHoverable = {
+	style: ((state: { hovered: boolean, focused: boolean, pressed: boolean}) => Properties) | Properties;
+}
diff --git a/packages/yoshiki/src/react/generator.tsx b/packages/yoshiki/src/react/generator.tsx
index 60a727e..5c7c5c3 100644
--- a/packages/yoshiki/src/react/generator.tsx
+++ b/packages/yoshiki/src/react/generator.tsx
@@ -4,59 +4,77 @@
 //
 
 import { Theme, breakpoints, useTheme } from "../theme";
-import { YoshikiStyle } from "../type";
+import { WithState, YoshikiStyle } from "../type";
 import { isBreakpoints } from "../utils";
 import { CSSProperties, useInsertionEffect } from "react";
 import { useStyleRegistry } from "./registry";
 import { Properties } from "csstype";
 import { shorthandsFn } from "./shorthands";
 
-type CssObject = {
+type _CssObject = {
 	[key in keyof Properties]: YoshikiStyle<Properties[key]>;
 } & {
 	[key in keyof typeof shorthandsFn]?: Parameters<typeof shorthandsFn[key]>[0];
 };
 
+type CssObject = Partial<WithState<_CssObject>> & _CssObject;
+
+const stateMapper: { [key in keyof (WithState<undefined> & { normal: undefined })]: (cn: string) => string } = {
+	normal: (cn) => `.${cn}`,
+	press: (cn) => `.${cn}:active`,
+	// :focus-visible is a pseudo-selector that only enables the focus ring when using the keyboard.
+	focus: (cn) => `.${cn}:focus-visible`,
+	// The body.noHover will be set when the users uses a touch screen instead of a mouse. This is used to only enable hover with the mouse.
+	hover: (cn) => `:where(:not(body.noHover)) .${cn}:hover`,
+	/* ["hover", ":hover"], */
+};
+
 const generateAtomicCss = <Property extends number | boolean | string | undefined>(
 	key: string,
 	value: YoshikiStyle<Property>,
+	state: keyof WithState<undefined> | "normal",
 	{ theme }: { theme: Theme },
 ): [string, string][] => {
 	if (key in shorthandsFn) {
 		// @ts-ignore `key` is not narrowed to `keyof typeof shorthandsFn` and value is not type safe.
 		const expanded = shorthandsFn[key as keyof typeof shorthandsFn](value);
 		return Object.entries(expanded)
-			.map(([eKey, eValue]) => generateAtomicCss(eKey, eValue, { theme }))
+			.map(([eKey, eValue]) => generateAtomicCss(eKey, eValue, state, { theme }))
 			.flat();
 	}
 
 	const cssKey = key.replace(/[A-Z]/g, "-$&").toLowerCase();
+	const statePrefix = state !== "normal" ? state + "_" : "";
 
 	if (typeof value === "function") {
 		value = value(theme);
 	}
 	if (isBreakpoints<Property>(value)) {
 		return Object.entries(value).map(([bp, bpValue]) => {
-			const className = `ys-${bp}_${key}-${bpValue}`;
+			const className = `ys-${statePrefix}${bp}_${key}-${bpValue}`;
 			const bpWidth = breakpoints[bp as keyof typeof breakpoints];
 			return [
 				className,
-				`@media (min-width: ${bpWidth}px) { .${className} { ${cssKey}: ${bpValue}; } }`,
+				`@media (min-width: ${bpWidth}px) { ${stateMapper[state](className)} { ${cssKey}: ${bpValue}; } }`,
 			];
 		});
 	}
 
-	const className = `ys-${key}-${value}`;
-	return [[className, `.${className} { ${cssKey}: ${value}; }`]];
+	const className = `ys-${statePrefix}${key}-${value}`;
+	return [[className, `${stateMapper[state](className)} { ${cssKey}: ${value}; }`]];
 };
 
-const dedupProperties = (...classes: (string | undefined)[]) => {
+const dedupProperties = (...classList: (string[] | undefined)[]) => {
 	const propMap = new Map<string, string>();
-	for (const name of classes) {
-		if (!name) continue;
-		// example ys-background-blue or ys-sm_background-red
-		const key = name.substring(3, name.lastIndexOf("-"));
-		propMap.set(key, name);
+	for (const classes of classList) {
+		if (!classes) continue;
+
+		for (const name of classes) {
+			if (!name) continue;
+			// example ys-background-blue or ys-sm_background-red
+			const key = name.substring(3, name.lastIndexOf("-"));
+			propMap.set(key, name);
+		}
 	}
 	return Array.from(propMap.values()).join(" ");
 };
@@ -71,21 +89,39 @@ export const useYoshiki = () => {
 
 	return {
 		css: (css: CssObject, leftOverProps?: { className?: string; style?: CSSProperties }) => {
+			const { hover, focus, press, ...inline } = css;
 			const { className, style, ...leftOver } = leftOverProps ?? {};
 
-			// I'm sad that traverse is not a thing in JS.
-			const [localClassNames, localStyle] = Object.entries(css).reduce<[string[], string[]]>(
-				(acc, [key, value]) => {
-					const n = generateAtomicCss(key, value, { theme });
-					acc[0].push(...n.map((x) => x[0]));
-					acc[1].push(...n.map((x) => x[1]));
-					return acc;
-				},
-				[[], []],
-			);
-			registry.addRules(localClassNames, localStyle);
+			const processStyles = (
+				inlineStyle?: _CssObject,
+				state?: keyof WithState<undefined>,
+			): string[] => {
+				if (!inlineStyle) return [];
+
+				// I'm sad that traverse is not a thing in JS.
+				const [localClassNames, localStyle] = Object.entries(inlineStyle).reduce<
+					[string[], string[]]
+				>(
+					(acc, [key, value]) => {
+						const n = generateAtomicCss(key, value, state ?? "normal", { theme });
+						acc[0].push(...n.map((x) => x[0]));
+						acc[1].push(...n.map((x) => x[1]));
+						return acc;
+					},
+					[[], []],
+				);
+				registry.addRules(localClassNames, localStyle);
+				return localClassNames;
+			};
+
 			return {
-				className: dedupProperties(...localClassNames, className),
+				className: dedupProperties(
+					processStyles(inline),
+					processStyles(hover, "hover"),
+					processStyles(focus, "focus"),
+					processStyles(press, "press"),
+					className?.split(" "),
+				),
 				style: style,
 				...leftOver,
 			};
diff --git a/packages/yoshiki/src/react/hover.ts b/packages/yoshiki/src/react/hover.ts
new file mode 100644
index 0000000..9ab40cd
--- /dev/null
+++ b/packages/yoshiki/src/react/hover.ts
@@ -0,0 +1,34 @@
+//
+// Copyright (c) Zoe Roux and contributors. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for details.
+//
+
+import { useEffect } from "react";
+
+let preventHover = false;
+let hoverTimeout: NodeJS.Timeout;
+
+export const useMobileHover = () => {
+	useEffect(() => {
+		const enableHover = () => {
+			if (preventHover) return;
+			document.body.classList.remove("noHover");
+		};
+
+		const disableHover = () => {
+			if (hoverTimeout) clearTimeout(hoverTimeout);
+			preventHover = true;
+			hoverTimeout = setTimeout(() => (preventHover = false), 500);
+			document.body.classList.add("noHover");
+		};
+
+		document.addEventListener("touchstart", disableHover, true);
+		document.addEventListener("mousemove", enableHover, true);
+		return () => {
+			document.removeEventListener("touchstart", disableHover);
+			document.removeEventListener("mousemove", enableHover);
+		};
+	}, []);
+};
+
+export const Pressable = "div";
diff --git a/packages/yoshiki/src/react/index.tsx b/packages/yoshiki/src/react/index.tsx
index 0bd76cd..4783286 100644
--- a/packages/yoshiki/src/react/index.tsx
+++ b/packages/yoshiki/src/react/index.tsx
@@ -10,5 +10,8 @@ export type Stylable = {
 	style?: CSSProperties;
 };
 
+export type StylableHoverable = Stylable;
+
 export { useYoshiki } from "./generator";
 export { StyleRegistryProvider, useStyleRegistry, createStyleRegistry } from "./registry";
+export { Pressable, useMobileHover } from "./hover";
diff --git a/packages/yoshiki/src/react/shorthands.ts b/packages/yoshiki/src/react/shorthands.ts
index bc2ea5e..41c5b15 100644
--- a/packages/yoshiki/src/react/shorthands.ts
+++ b/packages/yoshiki/src/react/shorthands.ts
@@ -49,6 +49,8 @@ export const shorthandsFn = {
 	}),
 	// This can't be background because react native does not support it.
 	bg: (v: YSPs["backgroundColor"]): YSPs => ({
+		// We still remove the background in case it was set before.
+		background: "unset",
 		backgroundColor: v,
 	}),
 };
diff --git a/packages/yoshiki/src/type.ts b/packages/yoshiki/src/type.ts
index 747fa7e..77b99ed 100644
--- a/packages/yoshiki/src/type.ts
+++ b/packages/yoshiki/src/type.ts
@@ -10,7 +10,18 @@ export type YoshikiStyle<Property> =
 	| ((theme: Theme) => Property | Breakpoints<Property>)
 	| Breakpoints<Property>;
 
-
 export type Breakpoints<Property> = {
-	[key in keyof (typeof breakpoints)]?: Property;
+	[key in keyof typeof breakpoints]?: Property;
+};
+
+export type WithState<Style> = {
+	hover: Style;
+	focus: Style;
+	press: Style;
+};
+export type AtLeastOne<T, U = { [K in keyof T]: Pick<T, K> }> = Partial<T> & U[keyof U];
+
+export const hasState = <Style>(obj: unknown): obj is WithState<Style> => {
+	if (!obj || typeof obj !== "object") return false;
+	return "hover" in obj || "focus" in obj || "press" in obj;
 };