Implement theme

Author: owjs3901

Cargo.lock

@@ -5,6 +5,7 @@
 /.pnp
 .pnp.*
 .yarn/*
+.df
 !.yarn/patches
 !.yarn/plugins
 !.yarn/releases

apps/next/.gitignore

@@ -7,6 +7,34 @@
       "dark": {
         "text": "#fff"
       }
+    },
+    "typography": {
+      "bold": {
+        "fontFamily": "Freesentation",
+        "fontSize": "14px",
+        "fontWeight": "800",
+        "lineHeight": "120%",
+        "letterSpacing": "-0.28px"
+      },
+      "header": [
+        {
+          "fontFamily": "Freesentation",
+          "fontSize": "12px",
+          "fontWeight": "600",
+          "lineHeight": "120%",
+          "letterSpacing": "-0.24px"
+        },
+        null,
+        null,
+        null,
+        {
+          "fontFamily": "Freesentation",
+          "fontSize": "16px",
+          "fontWeight": "600",
+          "lineHeight": "120%",
+          "letterSpacing": "-0.32px"
+        }
+      ]
     }
   }
 }

apps/next/devup.json

@@ -9,43 +9,38 @@ export default function HomePage() {
 
   return (
     <div>
-      <p>Track & field champions:</p>
+      <p
+        style={{
+          backgroundColor: 'blue',
+        }}
+      >
+        Track & field champions:
+      </p>
       <Box
         _hover={{
-          bg: ['yellow', 'red'],
+          bg: 'yellow',
           cursor: 'cell',
         }}
-        as="span"
-        bg="blue"
+        as="section"
+        bg="$text"
         color={color}
         cursor="pointer"
         data-testid="box"
         fontSize={32}
         position="relative"
         py="28px"
       >
-        <Box
-          _lastChild={{
-            color: 'purple',
-          }}
-        >
-          hello
-        </Box>
-        <Box
-          _lastChild={{
-            color: 'purple',
-          }}
-        >
-          hello
-        </Box>
+        <Box>hello</Box>
+        <Box>hello</Box>
       </Box>
       <Text
         className={css`
           background: red;
           color: blue;
         `}
+        typography="bold"
       >
-        text
+        text typo
       </Text>
       <Text color="$text">text</Text>
       <Box color={enabled ? 'green' : 'blue'} fontSize={[32]} pr="20px">

apps/next/src/app/page.tsx

@@ -1,7 +1,11 @@
 {
   "compilerOptions": {
     "target": "ES2017",
-    "lib": ["dom", "dom.iterable", "esnext"],
+    "lib": [
+      "dom",
+      "dom.iterable",
+      "esnext"
+    ],
     "allowJs": true,
     "skipLibCheck": true,
     "strict": true,
@@ -19,9 +23,19 @@
       }
     ],
     "paths": {
-      "@/*": ["./src/*"]
+      "@/*": [
+        "./src/*"
+      ]
     }
   },
-  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
-  "exclude": ["node_modules"]
+  "include": [
+    "next-env.d.ts",
+    "**/*.ts",
+    "**/*.tsx",
+    ".next/types/**/*.ts",
+    ".df/*.d.ts"
+  ],
+  "exclude": [
+    "node_modules"
+  ]
 }

apps/next/tsconfig.json

@@ -1,8 +1,9 @@
 use extractor::{extract, ExtractOption, ExtractStyleValue, StyleProperty};
 use js_sys::{Object, Reflect};
 use once_cell::sync::Lazy;
-use sheet::theme::{ColorTheme, Theme};
+use sheet::theme::{ColorTheme, Theme, Typography};
 use sheet::StyleSheet;
+use std::collections::HashSet;
 use std::sync::Mutex;
 use wasm_bindgen::prelude::*;
 
@@ -69,6 +70,7 @@ impl Output {
                         collected = true;
                     }
                 }
+                ExtractStyleValue::Typography(_) => {}
             }
         }
         if !collected {
@@ -104,10 +106,31 @@ pub fn code_extract(
         Err(error) => Err(JsValue::from_str(error.to_string().as_str())),
     }
 }
+fn object_to_typography(obj: Object, level: u8) -> Result<Typography, JsValue> {
+    Ok(Typography::new(
+        Reflect::get(&obj, &JsValue::from_str("fontFamily"))?
+            .as_string()
+            .unwrap(),
+        Reflect::get(&obj, &JsValue::from_str("fontSize"))?
+            .as_string()
+            .unwrap(),
+        Reflect::get(&obj, &JsValue::from_str("fontWeight"))?
+            .as_string()
+            .unwrap(),
+        Reflect::get(&obj, &JsValue::from_str("lineHeight"))?
+            .as_string()
+            .unwrap(),
+        Reflect::get(&obj, &JsValue::from_str("letterSpacing"))?
+            .as_string()
+            .unwrap(),
+        level,
+    ))
+}
+
 fn theme_object_to_hashmap(js_value: JsValue) -> Result<Theme, JsValue> {
     let mut theme = Theme::new();
 
-    if let Some(obj) = js_value.dyn_into::<Object>().ok() {
+    if let Ok(obj) = js_value.dyn_into::<Object>() {
         // get colors
         if let Some(colors_obj) = Reflect::get(&obj, &JsValue::from_str("colors"))
             .ok()
@@ -143,6 +166,38 @@ fn theme_object_to_hashmap(js_value: JsValue) -> Result<Theme, JsValue> {
                 }
             }
         }
+
+        if let Some(typography_obj) = Reflect::get(&obj, &JsValue::from_str("typography"))
+            .ok()
+            .and_then(|v| v.dyn_into::<Object>().ok())
+        {
+            for entry in Object::entries(&typography_obj).into_iter() {
+                if let (Ok(key), Ok(value)) = (
+                    Reflect::get(&entry, &JsValue::from_f64(0f64)),
+                    Reflect::get(&entry, &JsValue::from_f64(1f64)),
+                ) {
+                    if let (Some(key_str), Some(typo_value)) =
+                        (key.as_string(), value.dyn_into::<Object>().ok())
+                    {
+                        let mut typo_vec = vec![];
+                        if typo_value.is_array() {
+                            if let Ok(typo_arr) = typo_value.dyn_into::<js_sys::Array>() {
+                                for i in 0..typo_arr.length() {
+                                    if let Ok(typo_obj) = typo_arr.get(i).dyn_into::<Object>() {
+                                        typo_vec.push(object_to_typography(typo_obj, i as u8)?);
+                                    }
+                                }
+                            }
+                        } else if typo_value.is_object() && !typo_value.is_null() {
+                            if let Ok(typo_obj) = typo_value.dyn_into::<Object>() {
+                                typo_vec.push(object_to_typography(typo_obj, 0)?);
+                            }
+                        }
+                        theme.typography.insert(key_str, typo_vec);
+                    }
+                }
+            }
+        }
     } else {
         return Err(JsValue::from_str(
             "Failed to convert the provided object to a hashmap",
@@ -161,6 +216,47 @@ pub fn register_theme(theme_object: JsValue) -> Result<(), JsValue> {
 
 #[wasm_bindgen(js_name = "getCss")]
 pub fn get_css() -> Result<String, JsValue> {
-    let mut sheet = GLOBAL_STYLE_SHEET.lock().unwrap();
+    let sheet = GLOBAL_STYLE_SHEET.lock().unwrap();
     Ok(sheet.create_css())
 }
+
+#[wasm_bindgen(js_name = "getThemeInterface")]
+pub fn get_theme_interface(
+    package_name: &str,
+    color_interface_name: &str,
+    typography_interface_name: &str,
+) -> Result<String, JsValue> {
+    let sheet = GLOBAL_STYLE_SHEET.lock().unwrap();
+    let mut color_keys = HashSet::new();
+    let mut typography_keys = HashSet::new();
+    for color_theme in sheet.theme.colors.themes.values() {
+        color_theme.keys().for_each(|key| {
+            color_keys.insert(key.clone());
+        });
+    }
+    sheet.theme.typography.keys().for_each(|key| {
+        typography_keys.insert(key.clone());
+    });
+
+    if color_keys.is_empty() && typography_keys.is_empty() {
+        Ok("".to_string())
+    } else {
+        Ok(format!(
+            "import \"{}\";declare module \"{}\"{{interface {} {{{}}}interface {} {{{}}}}}",
+            package_name,
+            package_name,
+            color_interface_name,
+            color_keys
+                .into_iter()
+                .map(|key| format!("${}:null;", key))
+                .collect::<Vec<String>>()
+                .join(""),
+            typography_interface_name,
+            typography_keys
+                .into_iter()
+                .map(|key| format!("{}:null;", key))
+                .collect::<Vec<String>>()
+                .join("")
+        ))
+    }
+}

bindings/devup-ui-wasm/src/lib.rs

@@ -13,5 +13,4 @@ oxc_codegen = "0.45.0"
 css = { path = "../css" }
 
 [dev-dependencies]
-insta = "1.42.0"
-cargo-insta = "1.42.0"
+insta = "1.42.0"

libs/extractor/Cargo.toml

@@ -87,18 +87,20 @@ impl ExportVariableKind {
     }
 }
 
-impl From<String> for ExportVariableKind {
-    fn from(kind: String) -> Self {
-        match kind.as_str() {
-            "Box" => ExportVariableKind::Box,
-            "Text" => ExportVariableKind::Text,
-            "Button" => ExportVariableKind::Button,
-            "Input" => ExportVariableKind::Input,
-            "Flex" => ExportVariableKind::Flex,
-            "VStack" => ExportVariableKind::VStack,
-            "Center" => ExportVariableKind::Center,
-            "css" => ExportVariableKind::Css,
-            _ => panic!("Unknown component kind: {}", kind),
+impl TryFrom<String> for ExportVariableKind {
+    type Error = ();
+
+    fn try_from(value: String) -> Result<Self, Self::Error> {
+        match value.as_str() {
+            "Box" => Ok(ExportVariableKind::Box),
+            "Text" => Ok(ExportVariableKind::Text),
+            "Button" => Ok(ExportVariableKind::Button),
+            "Input" => Ok(ExportVariableKind::Input),
+            "Flex" => Ok(ExportVariableKind::Flex),
+            "VStack" => Ok(ExportVariableKind::VStack),
+            "Center" => Ok(ExportVariableKind::Center),
+            "css" => Ok(ExportVariableKind::Css),
+            _ => Err(()),
         }
     }
 }

libs/extractor/src/component.rs

@@ -135,6 +135,7 @@ impl ExtractStyleProperty for ExtractDynamicStyle {
 #[derive(Debug, PartialEq, Clone)]
 pub enum ExtractStyleValue {
     Static(ExtractStaticStyle),
+    Typography(String),
     Dynamic(ExtractDynamicStyle),
     Css(ExtractCss),
 }
@@ -145,6 +146,9 @@ impl ExtractStyleValue {
             ExtractStyleValue::Static(style) => style.extract(),
             ExtractStyleValue::Dynamic(style) => style.extract(),
             ExtractStyleValue::Css(css) => css.extract(),
+            ExtractStyleValue::Typography(typo) => {
+                StyleProperty::ClassName(format!("typo-{}", typo))
+            }
         }
     }
 }
@@ -734,6 +738,21 @@ mod tests {
         .unwrap());
     }
 
+    #[test]
+    fn apply_typography() {
+        assert_debug_snapshot!(extract(
+            "test.tsx",
+            r#"import {Text} from '@devup-ui/core'
+        <Text typography="bold" />
+        "#,
+            ExtractOption {
+                package: "@devup-ui/core".to_string(),
+                css_file: None
+            }
+        )
+        .unwrap());
+    }
+
     #[test]
     fn raise_error() {
         assert!(extract(

libs/extractor/src/lib.rs

@@ -0,0 +1,12 @@
+---
+source: libs/extractor/src/lib.rs
+expression: "extract(\"test.tsx\",\nr#\"import {Text} from '@devup-ui/core'\n        <Text typography=\"bold\" />\n        \"#,\nExtractOption\n{ package: \"@devup-ui/core\".to_string(), css_file: None }).unwrap()"
+---
+ExtractOutput {
+    styles: [
+        Typography(
+            "bold",
+        ),
+    ],
+    code: "import \"@devup-ui/core/devup-ui.css\";\nimport { Text } from \"@devup-ui/core\";\n<span className=\"typo-bold\" />;\n",
+}