From b72a300f9efa86daf0fa558fa9c386bd2a556d14 Mon Sep 17 00:00:00 2001
From: Zoe Roux <zoe.roux@sdg.moe>
Date: Sun, 20 Nov 2022 01:40:43 +0900
Subject: [PATCH] Add units functions

---
 examples/expo-example/src/app.tsx             |  2 ++
 examples/expo-example/src/common.tsx          | 23 ++++++++++++++
 .../expo-example/src/components/text.d.ts     | 10 +++++++
 .../src/components/text.native.tsx            | 17 +++++++++++
 .../expo-example/src/components/text.web.tsx  | 19 ++++++++++++
 packages/yoshiki/package.json                 |  1 +
 packages/yoshiki/src/index.ts                 | 27 +++++++++++++----
 packages/yoshiki/src/native/generator.tsx     | 25 ++++++++++++----
 packages/yoshiki/src/native/index.ts          | 10 ++++++-
 packages/yoshiki/src/native/units.ts          | 11 +++++++
 packages/yoshiki/src/shorthands.ts            |  4 +--
 packages/yoshiki/src/type.ts                  | 30 ++++++++++++-------
 packages/yoshiki/src/web.ts                   | 17 -----------
 .../yoshiki/src/{react => web}/generator.tsx  |  5 ++--
 packages/yoshiki/src/{react => web}/hover.ts  |  0
 packages/yoshiki/src/{react => web}/index.tsx |  9 ++++++
 .../yoshiki/src/{react => web}/registry.tsx   |  0
 packages/yoshiki/src/web/units.ts             |  9 ++++++
 18 files changed, 173 insertions(+), 46 deletions(-)
 create mode 100644 examples/expo-example/src/common.tsx
 create mode 100644 examples/expo-example/src/components/text.d.ts
 create mode 100644 examples/expo-example/src/components/text.native.tsx
 create mode 100644 examples/expo-example/src/components/text.web.tsx
 create mode 100644 packages/yoshiki/src/native/units.ts
 delete mode 100644 packages/yoshiki/src/web.ts
 rename packages/yoshiki/src/{react => web}/generator.tsx (96%)
 rename packages/yoshiki/src/{react => web}/hover.ts (100%)
 rename packages/yoshiki/src/{react => web}/index.tsx (62%)
 rename packages/yoshiki/src/{react => web}/registry.tsx (100%)
 create mode 100644 packages/yoshiki/src/web/units.ts

diff --git a/examples/expo-example/src/app.tsx b/examples/expo-example/src/app.tsx
index 165dae4..48c0f65 100644
--- a/examples/expo-example/src/app.tsx
+++ b/examples/expo-example/src/app.tsx
@@ -7,6 +7,7 @@ import { StatusBar } from "expo-status-bar";
 import { Text, View } from "react-native";
 import { registerRootComponent } from "expo";
 import { Pressable, Stylable, useYoshiki } from "yoshiki/native";
+import { Card } from "./common";
 
 const CustomBox = ({ color, ...props }: { color: string } & Stylable) => {
 	const { css } = useYoshiki();
@@ -60,6 +61,7 @@ function App() {
 			<CustomBox color="black" {...css({ borderColor: "red", borderWidth: 3 })} />
 			<BoxWithoutProps {...css({ borderColor: "red", borderWidth: 3 })} />
 			<StatusBar style="auto" />
+			<Card />
 		</View>
 	);
 }
diff --git a/examples/expo-example/src/common.tsx b/examples/expo-example/src/common.tsx
new file mode 100644
index 0000000..6c00755
--- /dev/null
+++ b/examples/expo-example/src/common.tsx
@@ -0,0 +1,23 @@
+//
+// Copyright (c) Zoe Roux and contributors. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for details.
+//
+
+import { px, useYoshiki } from "yoshiki";
+import { P } from "./components/text";
+
+export const Card = () => {
+	const { css } = useYoshiki();
+
+	return (
+		<P
+			{...css({
+				backgroundColor: "black",
+				p: px(12),
+				/* color: "white", */
+			})}
+		>
+			Test
+		</P>
+	);
+};
diff --git a/examples/expo-example/src/components/text.d.ts b/examples/expo-example/src/components/text.d.ts
new file mode 100644
index 0000000..0fb47f8
--- /dev/null
+++ b/examples/expo-example/src/components/text.d.ts
@@ -0,0 +1,10 @@
+//
+// Copyright (c) Zoe Roux and contributors. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for details.
+//
+
+import { FunctionComponent, ReactNode } from "react";
+import { Stylable } from "yoshiki";
+
+export type PProps = Stylable<"text"> & { children: ReactNode | string};
+export declare const P: FunctionComponent<PProps>;
diff --git a/examples/expo-example/src/components/text.native.tsx b/examples/expo-example/src/components/text.native.tsx
new file mode 100644
index 0000000..4507c56
--- /dev/null
+++ b/examples/expo-example/src/components/text.native.tsx
@@ -0,0 +1,17 @@
+//
+// Copyright (c) Zoe Roux and contributors. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for details.
+//
+
+import { forwardRef } from "react";
+import { Text } from "react-native";
+import { YsNative } from "yoshiki";
+import { PProps } from "./text";
+
+export const P = forwardRef<Text, YsNative<PProps>>(function _P({ children, ...props }, ref) {
+	return (
+		<Text ref={ref} {...props}>
+			{children}
+		</Text>
+	);
+});
diff --git a/examples/expo-example/src/components/text.web.tsx b/examples/expo-example/src/components/text.web.tsx
new file mode 100644
index 0000000..6f95f0b
--- /dev/null
+++ b/examples/expo-example/src/components/text.web.tsx
@@ -0,0 +1,19 @@
+//
+// Copyright (c) Zoe Roux and contributors. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for details.
+//
+
+import { forwardRef } from "react";
+import { YsWeb } from "yoshiki";
+import { PProps } from "./text";
+
+export const P = forwardRef<HTMLParagraphElement, YsWeb<PProps>>(function _P(
+	{ children, ...props },
+	ref,
+) {
+	return (
+		<p ref={ref} {...props}>
+			{children}
+		</p>
+	);
+});
diff --git a/packages/yoshiki/package.json b/packages/yoshiki/package.json
index a264e19..123e8ad 100644
--- a/packages/yoshiki/package.json
+++ b/packages/yoshiki/package.json
@@ -14,6 +14,7 @@
 		"url": "https://github.com/AnonymusRaccoon/yoshiki/issues"
 	},
 	"main": "src/index.ts",
+	"react-native": "src/native/index.ts",
 	"types": "src/index.ts",
 	"source": "src/index.ts",
 	"scripts": {
diff --git a/packages/yoshiki/src/index.ts b/packages/yoshiki/src/index.ts
index ae8ef0d..c6ab52c 100644
--- a/packages/yoshiki/src/index.ts
+++ b/packages/yoshiki/src/index.ts
@@ -5,17 +5,20 @@
 
 import {
 	useYoshiki as useWebYoshiki,
+	Platform,
 	type Stylable as WebStylable,
 	type StylableHoverable as WebStylableHoverable,
+	type YsWeb,
 } from "./web";
 import type {
 	Stylable as NativeStylable,
 	StylableHoverable as NativeStylableHoverable,
+	YsNative,
 } from "./native";
 
-import { YsStyleProps } from "./native/generator";
-import { Theme } from "./theme";
-import { WithState, EnhancedStyle } from "./type";
+import type { YsStyleProps } from "./native/generator";
+import type { Theme } from "./theme";
+import type { WithState, EnhancedStyle, Length } from "./type";
 import type { ViewStyle, ImageStyle, TextStyle } from "react-native";
 
 export const useYoshiki = (): {
@@ -23,7 +26,7 @@ export const useYoshiki = (): {
 		Style extends ViewStyle | TextStyle | ImageStyle,
 		State extends Partial<WithState<EnhancedStyle<Style>>> | Record<string, never>,
 	>(
-		style: EnhancedStyle<Style> & State,
+		css: EnhancedStyle<Style> & State,
 		leftOvers?: { style?: Style } | WebStylable,
 	) => YsStyleProps<Style, State> | WebStylable;
 	theme: Theme;
@@ -34,7 +37,19 @@ export const useYoshiki = (): {
 	return useWebYoshiki();
 };
 
-export type Stylable = WebStylable | NativeStylable;
-export type StylableHoverable = WebStylableHoverable | NativeStylableHoverable;
+export type Stylable<Type extends "image" | "text" | "other" = "other"> =
+	| WebStylable
+	| NativeStylable<Type>;
+export type StylableHoverable<Type extends "image" | "text" | "other" = "other"> =
+	| WebStylableHoverable
+	| NativeStylableHoverable<Type>;
+export type { YsWeb, YsNative };
 
+import * as Web from "./web/units";
+export const px = (value: number): Length => Web.px(value) as unknown as Length;
+export const percent = (value: number): Length => Web.percent(value) as unknown as Length;
+export const em = (value: number): Length => Web.em(value) as unknown as Length;
+export const rem = (value: number): Length => Web.rem(value) as unknown as Length;
+
+export { Platform };
 export { breakpoints, type Theme, ThemeProvider, useTheme } from "./theme";
diff --git a/packages/yoshiki/src/native/generator.tsx b/packages/yoshiki/src/native/generator.tsx
index 5a56c7c..56538b3 100644
--- a/packages/yoshiki/src/native/generator.tsx
+++ b/packages/yoshiki/src/native/generator.tsx
@@ -14,7 +14,6 @@ export type EnhancedStyle<Properties> = {
 } & {
 	[key in keyof typeof shorthandsFn]?: Parameters<typeof shorthandsFn[key]>[0];
 };
-export type Properties = ViewStyle | TextStyle | ImageStyle;
 
 const useBreakpoint = (): number => {
 	const { width } = useWindowDimensions();
@@ -113,12 +112,26 @@ export const useYoshiki = () => {
 	};
 };
 
-export type Stylable = {
-	style?: Properties;
+type Properties<Type extends "image" | "text" | "other" = "other"> = Type extends "text"
+	? TextStyle
+	: Type extends "image"
+	? ImageStyle
+	: ViewStyle;
+export type YsNative<Props extends Record<string, unknown>> = Omit<Props, "className" | "style"> &
+	Stylable<
+		Props["style"] extends TextStyle
+			? "text"
+			: Props["style"] extends ImageStyle
+			? "image"
+			: "other"
+	>;
+
+export type Stylable<Type extends "image" | "text" | "other" = "other"> = {
+	style?: Properties<Type>;
 };
 
-export type StylableHoverable = {
+export type StylableHoverable<Type extends "image" | "text" | "other" = "other"> = {
 	style:
-		| ((state: { hovered: boolean; focused: boolean; pressed: boolean }) => Properties)
-		| Properties;
+		| ((state: { hovered: boolean; focused: boolean; pressed: boolean }) => Properties<Type>)
+		| Properties<Type>;
 };
diff --git a/packages/yoshiki/src/native/index.ts b/packages/yoshiki/src/native/index.ts
index 3d3b9e6..e8d1588 100644
--- a/packages/yoshiki/src/native/index.ts
+++ b/packages/yoshiki/src/native/index.ts
@@ -3,8 +3,16 @@
 // Licensed under the MIT license. See LICENSE file in the project root for details.
 //
 
+import { Platform as RNPlatform } from "react-native";
+import { PlatformT } from "../type";
+
+export const Platform: PlatformT = RNPlatform.OS;
+
 export { type Theme, breakpoints, useTheme, ThemeProvider } from "../theme";
 
-export { useYoshiki, type Stylable, type StylableHoverable } from "./generator";
+export { useYoshiki, type Stylable, type StylableHoverable, type YsNative } from "./generator";
 
 export { Pressable } from "./hover";
+
+export * from "./units";
+
diff --git a/packages/yoshiki/src/native/units.ts b/packages/yoshiki/src/native/units.ts
new file mode 100644
index 0000000..c7d452c
--- /dev/null
+++ b/packages/yoshiki/src/native/units.ts
@@ -0,0 +1,11 @@
+//
+// Copyright (c) Zoe Roux and contributors. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for details.
+//
+
+import { PixelRatio } from "react-native";
+
+export const px = (value: number) => value;
+export const percent = (value: number) => `${value}%`;
+export const em = (value: number) => PixelRatio.getFontScale() * 16 * value;
+export const rem = em;
diff --git a/packages/yoshiki/src/shorthands.ts b/packages/yoshiki/src/shorthands.ts
index 3efb84d..01b9d63 100644
--- a/packages/yoshiki/src/shorthands.ts
+++ b/packages/yoshiki/src/shorthands.ts
@@ -3,10 +3,10 @@
 // Licensed under the MIT license. See LICENSE file in the project root for details.
 //
 
-import type { EnhancedStyle } from "./type";
+import type { CommonStyle } from "./type";
 import type { ViewStyle } from "react-native";
 
-type YSPs = EnhancedStyle<ViewStyle>
+type YSPs = CommonStyle<ViewStyle>;
 
 export const shorthandsFn = {
 	p: (v: YSPs["padding"]): YSPs => ({
diff --git a/packages/yoshiki/src/type.ts b/packages/yoshiki/src/type.ts
index 34f53b0..d506cbc 100644
--- a/packages/yoshiki/src/type.ts
+++ b/packages/yoshiki/src/type.ts
@@ -4,8 +4,8 @@
 //
 
 import { breakpoints, Theme } from "./theme";
-import { Properties as CssProperties } from "csstype";
-import type { ViewStyle, ImageStyle, TextStyle } from "react-native";
+import { Properties as _CssProperties } from "csstype";
+import { shorthandsFn } from "./shorthands";
 
 export type YoshikiStyle<Property> =
 	| Property
@@ -28,16 +28,24 @@ export const hasState = <Style>(obj: unknown): obj is WithState<Style> => {
 	return "hover" in obj || "focus" in obj || "press" in obj;
 };
 
-export type OmitNever<T> = {
-	[key in keyof T as T[key] extends never ? never : key]: T[key];
+// dummy type only used for the API.
+export type Length = { a: 1 };
+export type CssProperties = _CssProperties<0 | Length>;
+
+type FilterOrNever<T, Filter> = T extends Filter ? Filter : never;
+type FilterOr<T, Filter> = [FilterOrNever<T, Filter>] extends [never] ? T : Filter;
+
+type CombineWithLength<A, B> = {
+	[key in keyof A & keyof B]?: FilterOr<(A & B)[key], Length>;
 };
-export type Combine<A, B> = OmitNever<Pick<A & B, keyof A & keyof B>>;
+export type CommonCss<Style> = CombineWithLength<CssProperties, Style>;
 
-export type CommonCss<Style extends ViewStyle | ImageStyle | TextStyle> = Combine<
-	CssProperties,
-	Style
->;
-
-export type EnhancedStyle<Style extends ViewStyle | ImageStyle | TextStyle> = {
+export type CommonStyle<Style> = {
 	[key in keyof CommonCss<Style>]: YoshikiStyle<CommonCss<Style>[key]>;
 };
+
+export type EnhancedStyle<Style> = CommonStyle<Style> & {
+	[key in keyof typeof shorthandsFn]?: Parameters<typeof shorthandsFn[key]>[0];
+};
+
+export type PlatformT = "web" | "ios" | "android" | "windows" | "macos";
diff --git a/packages/yoshiki/src/web.ts b/packages/yoshiki/src/web.ts
deleted file mode 100644
index ec0cb37..0000000
--- a/packages/yoshiki/src/web.ts
+++ /dev/null
@@ -1,17 +0,0 @@
-//
-// Copyright (c) Zoe Roux and contributors. All rights reserved.
-// Licensed under the MIT license. See LICENSE file in the project root for details.
-//
-
-export { type Theme, breakpoints, useTheme, ThemeProvider } from "./theme";
-
-export {
-	useYoshiki,
-	useStyleRegistry,
-	StyleRegistryProvider,
-	createStyleRegistry,
-	type Stylable,
-	type StylableHoverable,
-	useMobileHover,
-	Pressable
-} from "./react";
diff --git a/packages/yoshiki/src/react/generator.tsx b/packages/yoshiki/src/web/generator.tsx
similarity index 96%
rename from packages/yoshiki/src/react/generator.tsx
rename to packages/yoshiki/src/web/generator.tsx
index 834e68b..df7f15d 100644
--- a/packages/yoshiki/src/react/generator.tsx
+++ b/packages/yoshiki/src/web/generator.tsx
@@ -4,15 +4,14 @@
 //
 
 import { Theme, breakpoints, useTheme } from "../theme";
-import { WithState, YoshikiStyle } from "../type";
+import { WithState, YoshikiStyle, CssProperties } 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 = {
-	[key in keyof Properties]: YoshikiStyle<Properties[key]>;
+	[key in keyof CssProperties]: YoshikiStyle<CssProperties[key]>;
 } & {
 	[key in keyof typeof shorthandsFn]?: Parameters<typeof shorthandsFn[key]>[0];
 };
diff --git a/packages/yoshiki/src/react/hover.ts b/packages/yoshiki/src/web/hover.ts
similarity index 100%
rename from packages/yoshiki/src/react/hover.ts
rename to packages/yoshiki/src/web/hover.ts
diff --git a/packages/yoshiki/src/react/index.tsx b/packages/yoshiki/src/web/index.tsx
similarity index 62%
rename from packages/yoshiki/src/react/index.tsx
rename to packages/yoshiki/src/web/index.tsx
index 4783286..6a2a247 100644
--- a/packages/yoshiki/src/react/index.tsx
+++ b/packages/yoshiki/src/web/index.tsx
@@ -4,6 +4,13 @@
 //
 
 import { CSSProperties } from "react";
+import type { PlatformT } from "../type";
+
+export const Platform: PlatformT = "web";
+
+export type YsWeb<Props extends Record<string, unknown>> = Omit<Props, "style"> & {
+	style?: CSSProperties;
+};
 
 export type Stylable = {
 	className?: string;
@@ -15,3 +22,5 @@ export type StylableHoverable = Stylable;
 export { useYoshiki } from "./generator";
 export { StyleRegistryProvider, useStyleRegistry, createStyleRegistry } from "./registry";
 export { Pressable, useMobileHover } from "./hover";
+export * from "./units";
+export { type Theme, breakpoints, useTheme, ThemeProvider } from "../theme";
diff --git a/packages/yoshiki/src/react/registry.tsx b/packages/yoshiki/src/web/registry.tsx
similarity index 100%
rename from packages/yoshiki/src/react/registry.tsx
rename to packages/yoshiki/src/web/registry.tsx
diff --git a/packages/yoshiki/src/web/units.ts b/packages/yoshiki/src/web/units.ts
new file mode 100644
index 0000000..a6ab95e
--- /dev/null
+++ b/packages/yoshiki/src/web/units.ts
@@ -0,0 +1,9 @@
+//
+// Copyright (c) Zoe Roux and contributors. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for details.
+//
+
+export const px = (value: number) => `${value}px`;
+export const percent = (value: number) => `${value}%`;
+export const em = (value: number) => `${value}em`;
+export const rem = (value: number) => `${value}rem`;