Create types

.eslintrc.json

@@ -11,7 +11,7 @@
 				" Licensed under the MIT license. See LICENSE file in the project root for details.",
 				""
 			],
-			2
+			1
 		]
 	}
 }

examples/expo-example/src/app.tsx

@@ -4,25 +4,24 @@
 //
 
 import { StatusBar } from "expo-status-bar";
-import { StyleSheet, Text, View } from "react-native";
+import { Text, View } from "react-native";
 import { registerRootComponent } from "expo";
+import { css } from "@yoshiki/native";
 
 function App() {
 	return (
-		<View style={styles.container}>
+		<View
+			{...css({
+				flex: 1,
+				backgroundColor: "#fff",
+				alignItems: "center",
+				justifyContent: "center",
+			})}
+		>
 			<Text>Open up App.tsx to start working on your app!</Text>
 			<StatusBar style="auto" />
 		</View>
 	);
 }
 
-const styles = StyleSheet.create({
-	container: {
-		flex: 1,
-		backgroundColor: "#fff",
-		alignItems: "center",
-		justifyContent: "center",
-	},
-});
-
 export default registerRootComponent(App);

package.json

@@ -5,7 +5,6 @@
 	"author": "Zoe Roux <zoe.roux@sdg.moe>",
 	"license": "MIT",
 	"scripts": {
-		"expo": "yarn workspace expo-example start",
 		"lint": "eslint . --ext .ts,.tsx "
 	},
 	"workspaces": [

packages/core/package.json

@@ -1,4 +1,14 @@
 {
 	"name": "@yoshiki/core",
-	"packageManager": "yarn@3.2.4"
+	"version": "1.0.0",
+	"main": "src/index.ts",
+	"types": "src/index.ts",
+	"packageManager": "yarn@3.2.4",
+	"peerDependencies": {
+		"react": "*"
+	},
+	"devDependencies": {
+		"@types/react": "^18.0.24",
+		"typescript": "^4.8.4"
+	}
 }

packages/core/src/index.ts

@@ -0,0 +1,6 @@
+//
+// Copyright (c) Zoe Roux and contributors. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for details.
+//
+
+export * from "./type";

packages/core/src/type.ts

@@ -0,0 +1,21 @@
+//
+// 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 = {
+	// TODO: remove this, just for test purpose
+	spacing: string;
+};
+
+export type YoushikiStyle<Property> =
+	| Property
+	| ((theme: Theme) => Property)
+	| Breakpoints<Property>;
+
+export type Breakpoints<Property> = {
+	sm?: Property;
+	md?: Property;
+	lg?: Property;
+	xl?: Property;
+};

packages/core/tsconfig.json

@@ -0,0 +1,26 @@
+{
+	"compilerOptions": {
+		"target": "es5",
+		"lib": ["dom", "dom.iterable", "esnext"],
+		"declaration": true,
+		"sourceMap": true,
+		"noEmit": true,
+		"allowJs": true,
+		"skipLibCheck": true,
+		"strict": true,
+		"forceConsistentCasingInFileNames": true,
+		"esModuleInterop": true,
+		"module": "esnext",
+		"moduleResolution": "node",
+		"resolveJsonModule": true,
+		"isolatedModules": true,
+		"jsx": "react-native",
+		"incremental": true,
+		"baseUrl": ".",
+		"paths": {
+			"~/*": ["src/*"]
+		}
+	},
+	"include": ["**/*.ts", "**/*.tsx"],
+	"exclude": ["node_modules"]
+}

packages/native/package.json

@@ -1,7 +1,19 @@
 {
 	"name": "@yoshiki/native",
+	"version": "1.0.0",
+	"main": "src/index.tsx",
+	"types": "src/index.tsx",
 	"packageManager": "yarn@3.2.4",
 	"dependencies": {
 		"@yoshiki/core": "workspace:^"
+	},
+	"devDependencies": {
+		"@types/react": "^18.0.24",
+		"@types/react-native": "~0.69.1",
+		"typescript": "^4.8.4"
+	},
+	"peerDependencies": {
+		"react": "*",
+		"react-native": "*"
 	}
 }

packages/native/src/index.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 { ViewStyle, TextStyle, ImageStyle } from "react-native";
+import { YoushikiStyle } from "@yoshiki/core";
+
+// TODO: shorhands
+type Properties = ViewStyle | TextStyle | ImageStyle;
+export type CssObject = {
+	[key in keyof Properties]: YoushikiStyle<Properties[key]>;
+};
+
+export const css = (css: CssObject) => {
+	return {
+		styled: {},
+	};
+};

packages/native/tsconfig.json

@@ -0,0 +1,26 @@
+{
+	"compilerOptions": {
+		"target": "es5",
+		"lib": ["dom", "dom.iterable", "esnext"],
+		"declaration": true,
+		"sourceMap": true,
+		"noEmit": true,
+		"allowJs": true,
+		"skipLibCheck": true,
+		"strict": true,
+		"forceConsistentCasingInFileNames": true,
+		"esModuleInterop": true,
+		"module": "esnext",
+		"moduleResolution": "node",
+		"resolveJsonModule": true,
+		"isolatedModules": true,
+		"jsx": "react-native",
+		"incremental": true,
+		"baseUrl": ".",
+		"paths": {
+			"~/*": ["src/*"]
+		}
+	},
+	"include": ["**/*.ts", "**/*.tsx"],
+	"exclude": ["node_modules"]
+}

packages/react/package.json

@@ -1,7 +1,17 @@
 {
 	"name": "@yoshiki/react",
+	"version": "1.0.0",
+	"main": "src/index.ts",
+	"types": "src/index.ts",
 	"packageManager": "yarn@3.2.4",
 	"dependencies": {
 		"@yoshiki/core": "workspace:^"
+	},
+	"devDependencies": {
+		"@types/react": "^18.0.24",
+		"typescript": "^4.8.4"
+	},
+	"peerDependencies": {
+		"react": "*"
 	}
 }

packages/react/src/index.ts

@@ -0,0 +1,18 @@
+//
+// Copyright (c) Zoe Roux and contributors. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for details.
+//
+
+import { Properties } from "csstype";
+import { YoushikiStyle } from "@yoshiki/core";
+
+// TODO: shorthands
+export type CssObject = {
+	[key in keyof Properties]: YoushikiStyle<Properties[key]>;
+};
+
+export const css = (css: CssObject) => {
+	return {
+		styled: {},
+	};
+};

packages/react/tsconfig.json

@@ -0,0 +1,26 @@
+{
+	"compilerOptions": {
+		"target": "es5",
+		"lib": ["dom", "dom.iterable", "esnext"],
+		"declaration": true,
+		"sourceMap": true,
+		"noEmit": true,
+		"allowJs": true,
+		"skipLibCheck": true,
+		"strict": true,
+		"forceConsistentCasingInFileNames": true,
+		"esModuleInterop": true,
+		"module": "esnext",
+		"moduleResolution": "node",
+		"resolveJsonModule": true,
+		"isolatedModules": true,
+		"jsx": "react",
+		"incremental": true,
+		"baseUrl": ".",
+		"paths": {
+			"~/*": ["src/*"]
+		}
+	},
+	"include": ["**/*.ts", "**/*.tsx"],
+	"exclude": ["node_modules"]
+}