Cutlery/Kyoo
1
0
Fork 0
mirror of https://github.com/zoriya/Kyoo.git synced 2025-07-09 03:04:20 -04:00
Code Issues Packages Projects Releases Wiki Activity

Create CssObject type

Browse Source
This commit is contained in:
Zoe Roux 2022-11-04 02:45:34 +09:00
parent e92e7758e7
commit 2c4bcb9c39
No known key found for this signature in database
GPG Key ID: B2AB52A2636E5C46
7 changed files with 210 additions and 57 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

38
front/packages/youshiki/examples/api.tsx Normal file
View File

@ -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, */
})}
/>
);
};

23
front/packages/youshiki/package.json Normal file
View File

@ -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
}
}
}

34
front/packages/youshiki/src/native.ts Normal file
View File

@ -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: {},
};
};

33
front/packages/youshiki/src/react.ts Normal file
View File

@ -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: {},
};
};

36
front/packages/youshiki/src/type.ts Normal file
View File

@ -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;
};

26
front/packages/youshiki/tsconfig.json Executable file
View File

@ -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"]
}

77
front/yarn.lock
View File

@ -1540,34 +1540,7 @@ __metadata:
languageName: node
linkType: hard
"@emotion/native@npm:^11.10.0":
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":
"@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"