Create CssObject type

front/packages/youshiki/examples/api.tsx

@@ -0,0 +1,38 @@
+/*
+ * Kyoo - A portable and vast media library solution.
+ * Copyright (c) Kyoo.
+ *
+ * See AUTHORS.md and LICENSE file in the project root for full license information.
+ *
+ * Kyoo is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * any later version.
+ *
+ * Kyoo is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with Kyoo. If not, see <https://www.gnu.org/licenses/>.
+ */
+
+import { Button } from "react-native";
+
+/* import { css } from "youshiki/native"; */
+import { css } from "../src/native";
+
+export const ExampleButton = () => {
+	return (
+		<Button
+			title="This is a button"
+			{...css({
+				backgroundColor: { sm: "blue", md: "red" },
+				paddingLeft: (theme) => theme.spacing,
+				margin: "12px",
+				/* px: (theme) => theme.spacing, */
+			})}
+		/>
+	);
+};

front/packages/youshiki/package.json

@@ -0,0 +1,23 @@
+{
+	"name": "youshiki",
+	"main": "src/index.tsx",
+	"types": "src/index.tsx",
+	"packageManager": "yarn@3.2.4",
+	"devDependencies": {
+		"@types/react": "^18.0.24",
+		"typescript": "^4.8.4"
+	},
+	"peerDependencies": {
+		"react": "*",
+		"react-native": "*",
+		"react-native-web": "*"
+	},
+	"peerDependenciesMeta": {
+		"react-native": {
+			"optional": true
+		},
+		"react-native-web": {
+			"optional": true
+		}
+	}
+}

front/packages/youshiki/src/native.ts

@@ -0,0 +1,34 @@
+/*
+ * Kyoo - A portable and vast media library solution.
+ * Copyright (c) Kyoo.
+ *
+ * See AUTHORS.md and LICENSE file in the project root for full license information.
+ *
+ * Kyoo is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * any later version.
+ *
+ * Kyoo is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with Kyoo. If not, see <https://www.gnu.org/licenses/>.
+ */
+
+import { ViewStyle, TextStyle, ImageStyle } from "react-native";
+import { YoushikiStyle } from "./type";
+
+// TODO: shorhands
+type Properties = ViewStyle | TextStyle | ImageStyle;
+export type CssObject = {
+	[key in keyof Properties]: YoushikiStyle<Properties[key]>;
+};
+
+export const css = (css: CssObject) => {
+	return {
+		styled: {},
+	};
+};

front/packages/youshiki/src/react.ts

@@ -0,0 +1,33 @@
+/*
+ * Kyoo - A portable and vast media library solution.
+ * Copyright (c) Kyoo.
+ *
+ * See AUTHORS.md and LICENSE file in the project root for full license information.
+ *
+ * Kyoo is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * any later version.
+ *
+ * Kyoo is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with Kyoo. If not, see <https://www.gnu.org/licenses/>.
+ */
+
+import { Properties } from "csstype";
+import { YoushikiStyle } from "./type";
+
+// TODO: shorthands
+export type CssObject = {
+	[key in keyof Properties]: YoushikiStyle<Properties[key]>;
+};
+
+export const css = (css: CssObject) => {
+	return {
+		styled: {},
+	};
+};

front/packages/youshiki/src/type.ts

@@ -0,0 +1,36 @@
+/*
+ * Kyoo - A portable and vast media library solution.
+ * Copyright (c) Kyoo.
+ *
+ * See AUTHORS.md and LICENSE file in the project root for full license information.
+ *
+ * Kyoo is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * any later version.
+ *
+ * Kyoo is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with Kyoo. If not, see <https://www.gnu.org/licenses/>.
+ */
+
+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;
+};

front/packages/youshiki/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"]
+}

front/yarn.lock

@@ -1540,34 +1540,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@emotion/native@npm:^11.10.0":
+"@emotion/react@npm:^11.9.3":
-  version: 11.10.0
-  resolution: "@emotion/native@npm:11.10.0"
-  dependencies:
-    "@emotion/primitives-core": ^11.10.0
-  peerDependencies:
-    "@babel/core": ^7.0.0
-    react-native: ">=0.14.0 <1"
-  peerDependenciesMeta:
-    "@babel/core":
-      optional: true
-  checksum: d3a48cd53f5ea54f306cefa46be9068bde0fe16375d430846015d0c6ef7e082473ca8fd49450f4a97e14fd5980d5016e71e09d741946e62dd1f451bc45b594a3
-  languageName: node
-  linkType: hard
-
-"@emotion/primitives-core@npm:^11.10.0":
-  version: 11.10.0
-  resolution: "@emotion/primitives-core@npm:11.10.0"
-  dependencies:
-    css-to-react-native: ^3.0.0
-  peerDependencies:
-    "@emotion/react": ^11.0.0-rc.0
-    react: ">=16.8.0"
-  checksum: bf7f50843351527a084b584ba0601e247b89625d0a149b9e3a53fd0a76d3caecc07bd518c30670bde0d9fa2fd3abf908ccf6cf0e8d0775429ff997f39bda89c7
-  languageName: node
-  linkType: hard
-
-"@emotion/react@npm:^11.10.5, @emotion/react@npm:^11.9.3":
   version: 11.10.5
   resolution: "@emotion/react@npm:11.10.5"
   dependencies:
@@ -2262,7 +2235,6 @@ __metadata:
     "@types/react": ^18.0.24
     typescript: ^4.8.4
   peerDependencies:
-    "@emotion/react": "*"
     "@expo/html-elements": "*"
     react: "*"
     react-native: "*"
@@ -4411,13 +4383,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"camelize@npm:^1.0.0":
-  version: 1.0.1
-  resolution: "camelize@npm:1.0.1"
-  checksum: 91d8611d09af725e422a23993890d22b2b72b4cabf7239651856950c76b4bf53fe0d0da7c5e4db05180e898e4e647220e78c9fbc976113bd96d603d1fcbfcb99
-  languageName: node
-  linkType: hard
-
 "caniuse-lite@npm:^1.0.30001332, caniuse-lite@npm:^1.0.30001400":
   version: 1.0.30001427
   resolution: "caniuse-lite@npm:1.0.30001427"
@@ -4920,13 +4885,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"css-color-keywords@npm:^1.0.0":
-  version: 1.0.0
-  resolution: "css-color-keywords@npm:1.0.0"
-  checksum: 8f125e3ad477bd03c77b533044bd9e8a6f7c0da52d49bbc0bbe38327b3829d6ba04d368ca49dd9ff3b667d2fc8f1698d891c198bbf8feade1a5501bf5a296408
-  languageName: node
-  linkType: hard
-
 "css-in-js-utils@npm:^2.0.0":
   version: 2.0.1
   resolution: "css-in-js-utils@npm:2.0.1"
@@ -4963,17 +4921,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"css-to-react-native@npm:^3.0.0":
-  version: 3.0.0
-  resolution: "css-to-react-native@npm:3.0.0"
-  dependencies:
-    camelize: ^1.0.0
-    css-color-keywords: ^1.0.0
-    postcss-value-parser: ^4.0.2
-  checksum: 98a2e9d4fbe9cabc8b744dfdd5ec108396ce497a7b860912a95b299bd52517461281810fcb707965a021a8be39adca9587184a26fb4e926211391a1557aca3c1
-  languageName: node
-  linkType: hard
-
 "css-tree@npm:^1.0.0-alpha.39, css-tree@npm:^1.1.3":
   version: 1.1.3
   resolution: "css-tree@npm:1.1.3"
@@ -9242,8 +9189,6 @@ __metadata:
   resolution: "mobile@workspace:apps/mobile"
   dependencies:
     "@babel/core": ^7.19.6
-    "@emotion/native": ^11.10.0
-    "@emotion/react": ^11.10.5
     "@expo/html-elements": ^0.2.0
     "@kyoo/ui": "workspace:^"
     "@types/react": ~18.0.14
@@ -10133,7 +10078,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"postcss-value-parser@npm:^4.0.2, postcss-value-parser@npm:^4.2.0":
+"postcss-value-parser@npm:^4.2.0":
   version: 4.2.0
   resolution: "postcss-value-parser@npm:4.2.0"
   checksum: 819ffab0c9d51cf0acbabf8996dffbfafbafa57afc0e4c98db88b67f2094cb44488758f06e5da95d7036f19556a4a732525e84289a425f4f6fd8e412a9d7442f
@@ -12946,6 +12891,24 @@ __metadata:
   languageName: node
   linkType: hard
 
+"youshiki@workspace:packages/youshiki":
+  version: 0.0.0-use.local
+  resolution: "youshiki@workspace:packages/youshiki"
+  dependencies:
+    "@types/react": ^18.0.24
+    typescript: ^4.8.4
+  peerDependencies:
+    react: "*"
+    react-native: "*"
+    react-native-web: "*"
+  peerDependenciesMeta:
+    react-native:
+      optional: true
+    react-native-web:
+      optional: true
+  languageName: unknown
+  linkType: soft
+
 "zod@npm:^3.18.0":
   version: 3.19.1
   resolution: "zod@npm:3.19.1"