Add Image component

.changeset/odd-zebras-enjoy.md

@@ -0,0 +1,5 @@
+---
+"@devup-ui/webpack-plugin": patch
+---
+
+Fix hot reload issue

.changeset/tricky-roses-ring.md

@@ -0,0 +1,6 @@
+---
+"@devup-ui/wasm": patch
+"@devup-ui/react": patch
+---
+
+Add Image component

.github/workflows/publish.yml

@@ -43,6 +43,7 @@ jobs:
       - name: Upload to codecov.io
         uses: codecov/codecov-action@v5
         with:
+          token: ${{ secrets.CODECOV_TOKEN }}
           fail_ci_if_error: true
       - name: Create Release Pull Request or Publish to npm
         id: changesets

apps/next/package.json

@@ -12,7 +12,7 @@
   "dependencies": {
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
-    "next": "15.1.3",
+    "next": "^15.1.4",
     "@devup-ui/react": "workspace:*"
   },
   "devDependencies": {

bindings/devup-ui-wasm/package.json

@@ -25,6 +25,6 @@
   "types": "./pkg/index.d.ts",
   "scripts": {
     "build": "wasm-pack build --target nodejs --out-dir ./pkg --out-name index",
-    "test": "cargo test"
+    "test": "wasm-pack test --node"
   }
 }

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

@@ -106,7 +106,7 @@ 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> {
+pub fn object_to_typography(obj: Object, level: u8) -> Result<Typography, JsValue> {
     Ok(Typography::new(
         Reflect::get(&obj, &JsValue::from_str("fontFamily"))?
             .as_string()

bindings/devup-ui-wasm/tests/wasm.rs

@@ -0,0 +1,47 @@
+use devup_ui_wasm::object_to_typography;
+use js_sys::{Object, Reflect};
+use wasm_bindgen::JsValue;
+use wasm_bindgen_test::*;
+
+#[allow(dead_code)]
+#[wasm_bindgen_test]
+fn test_object_to_typography() {
+    let obj = Object::new();
+    Reflect::set(
+        &obj,
+        &JsValue::from_str("fontFamily"),
+        &JsValue::from_str("Arial"),
+    )
+    .unwrap();
+    Reflect::set(
+        &obj,
+        &JsValue::from_str("fontSize"),
+        &JsValue::from_str("12px"),
+    )
+    .unwrap();
+    Reflect::set(
+        &obj,
+        &JsValue::from_str("fontWeight"),
+        &JsValue::from_str("bold"),
+    )
+    .unwrap();
+    Reflect::set(
+        &obj,
+        &JsValue::from_str("lineHeight"),
+        &JsValue::from_str("1.5"),
+    )
+    .unwrap();
+    Reflect::set(
+        &obj,
+        &JsValue::from_str("letterSpacing"),
+        &JsValue::from_str("1px"),
+    )
+    .unwrap();
+    let typography = object_to_typography(obj, 0).unwrap();
+    assert_eq!(typography.font_family, "Arial");
+    assert_eq!(typography.font_size, "12px");
+    assert_eq!(typography.font_weight, "bold");
+    assert_eq!(typography.line_height, "1.5");
+    assert_eq!(typography.letter_spacing, "1px");
+    assert_eq!(typography.level, 0);
+}

libs/extractor/src/component.rs

@@ -11,6 +11,7 @@ pub enum ExportVariableKind {
     Flex,
     VStack,
     Center,
+    Image,
     Css,
 }
 
@@ -23,6 +24,7 @@ impl ExportVariableKind {
             | ExportVariableKind::Flex
             | ExportVariableKind::Box => Ok("div"),
             ExportVariableKind::Text => Ok("span"),
+            ExportVariableKind::Image => Ok("img"),
             ExportVariableKind::Button => Ok("button"),
             ExportVariableKind::Input => Ok("input"),
             ExportVariableKind::Css => Err("Css does not have a tag"),
@@ -37,6 +39,7 @@ impl ExportVariableKind {
             | ExportVariableKind::Button
             | ExportVariableKind::Css
             | ExportVariableKind::Text
+            | ExportVariableKind::Image
             | ExportVariableKind::Box => vec![],
             ExportVariableKind::Flex => vec![Static(ExtractStaticStyle {
                 value: "flex".to_string(),
@@ -93,6 +96,7 @@ impl TryFrom<String> for ExportVariableKind {
         match value.as_str() {
             "Box" => Ok(ExportVariableKind::Box),
             "Text" => Ok(ExportVariableKind::Text),
+            "Image" => Ok(ExportVariableKind::Image),
             "Button" => Ok(ExportVariableKind::Button),
             "Input" => Ok(ExportVariableKind::Input),
             "Flex" => Ok(ExportVariableKind::Flex),
@@ -118,6 +122,10 @@ mod tests {
             ExportVariableKind::try_from("Text".to_string()),
             Ok(ExportVariableKind::Text)
         );
+        assert_eq!(
+            ExportVariableKind::try_from("Image".to_string()),
+            Ok(ExportVariableKind::Image)
+        );
         assert_eq!(
             ExportVariableKind::try_from("Button".to_string()),
             Ok(ExportVariableKind::Button)
@@ -149,6 +157,7 @@ mod tests {
     fn test_to_tag() {
         assert_eq!(ExportVariableKind::Box.to_tag(), Ok("div"));
         assert_eq!(ExportVariableKind::Text.to_tag(), Ok("span"));
+        assert_eq!(ExportVariableKind::Image.to_tag(), Ok("img"));
         assert_eq!(ExportVariableKind::Button.to_tag(), Ok("button"));
         assert_eq!(ExportVariableKind::Input.to_tag(), Ok("input"));
         assert_eq!(ExportVariableKind::Flex.to_tag(), Ok("div"));
@@ -161,6 +170,7 @@ mod tests {
     fn test_extract_style_from_kind() {
         assert_eq!(ExportVariableKind::Box.extract(), vec![]);
         assert_eq!(ExportVariableKind::Text.extract(), vec![]);
+        assert_eq!(ExportVariableKind::Image.extract(), vec![]);
         assert_eq!(ExportVariableKind::Button.extract(), vec![]);
         assert_eq!(ExportVariableKind::Input.extract(), vec![]);
         assert_eq!(

libs/extractor/src/visit.rs

@@ -120,6 +120,8 @@ impl<'a> VisitMut<'a> for DevupVisitor<'a> {
                             || name == "role"
                             || name == "ref"
                             || name == "key"
+                            || name == "alt"
+                            || name == "src"
                             || name == "children"
                         {
                             continue;

package.json

@@ -6,7 +6,7 @@
   "type": "module",
   "scripts": {
     "lint": "pnpm -r lint",
-    "test": "cargo tarpaulin && vitest test --coverage --run",
+    "test": "cargo tarpaulin && vitest test --coverage --run && pnpm -r test",
     "build": "pnpm -r build",
     "dev": "pnpm -r dev"
   },

packages/next-plugin/package.json

@@ -7,8 +7,6 @@
     "next": "^15.1"
   },
   "scripts": {
-    "test": "vitest run --coverage",
-    "test:s": "vitest run -u",
     "lint": "eslint",
     "build": "tsc && vite build"
   },

packages/react/package.json

@@ -7,8 +7,6 @@
     "csstype": "^3.1"
   },
   "scripts": {
-    "test": "vitest run --coverage",
-    "test:s": "vitest run -u",
     "lint": "eslint",
     "build": "vite build"
   },

packages/react/src/__tests__/index.test.ts

@@ -9,6 +9,7 @@ describe('export', () => {
       Input: expect.any(Function),
       Text: expect.any(Function),
       VStack: expect.any(Function),
+      Image: expect.any(Function),
 
       css: expect.any(Function),
     })

packages/react/src/components/Box.tsx

@@ -1,9 +1,9 @@
 import type { DevupProps } from '../types/props'
 import type { Merge } from '../types/utils'
 
-export function Box(
+export function Box<T extends React.ElementType = 'div'>(
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  props: Merge<React.ComponentProps<'div'>, DevupProps>,
+  props: Merge<React.ComponentProps<T>, DevupProps>,
 ): React.ReactElement {
   throw new Error('Cannot run on the runtime')
 }

packages/react/src/components/Button.tsx

@@ -1,9 +1,9 @@
 import type { DevupProps } from '../types/props'
 import type { Merge } from '../types/utils'
 
-export function Button(
+export function Button<T extends React.ElementType = 'button'>(
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  props: Merge<React.ComponentProps<'button'>, DevupProps>,
+  props: Merge<React.ComponentProps<T>, DevupProps>,
 ): React.ReactElement {
   throw new Error('Cannot run on the runtime')
 }

packages/react/src/components/Center.tsx

@@ -1,9 +1,9 @@
 import type { DevupProps } from '../types/props'
 import type { Merge } from '../types/utils'
 
-export function Center(
+export function Center<T extends React.ElementType = 'div'>(
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  props: Merge<React.ComponentProps<'div'>, DevupProps>,
+  props: Merge<React.ComponentProps<T>, DevupProps>,
 ): React.ReactElement {
   throw new Error('Cannot run on the runtime')
 }

packages/react/src/components/Flex.tsx

@@ -1,9 +1,9 @@
 import type { DevupProps } from '../types/props'
 import type { Merge } from '../types/utils'
 
-export function Flex(
+export function Flex<T extends React.ElementType = 'div'>(
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  props: Merge<React.ComponentProps<'div'>, DevupProps>,
+  props: Merge<React.ComponentProps<T>, DevupProps>,
 ): React.ReactElement {
   throw new Error('Cannot run on the runtime')
 }

packages/react/src/components/Image.tsx

@@ -0,0 +1,9 @@
+import type { DevupProps } from '../types/props'
+import type { Merge } from '../types/utils'
+
+export function Image<T extends React.ElementType = 'img'>(
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  props: Merge<React.ComponentProps<T>, DevupProps>,
+): React.ReactElement {
+  throw new Error('Cannot run on the runtime')
+}

packages/react/src/components/Input.tsx

@@ -1,9 +1,9 @@
 import type { DevupProps } from '../types/props'
 import type { Merge } from '../types/utils'
 
-export function Input(
+export function Input<T extends React.ElementType = 'input'>(
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  props: Merge<React.ComponentProps<'input'>, DevupProps>,
+  props: Merge<React.ComponentProps<T>, DevupProps>,
 ): React.ReactElement {
   throw new Error('Cannot run on the runtime')
 }

packages/react/src/components/Text.tsx

@@ -1,9 +1,9 @@
 import type { DevupTypographyProps } from '../types/props'
 import type { Merge } from '../types/utils'
 
-export function Text(
+export function Text<T extends React.ElementType = 'span'>(
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  props: Merge<React.ComponentProps<'span'>, DevupTypographyProps>,
+  props: Merge<React.ComponentProps<T>, DevupTypographyProps>,
 ): React.ReactElement {
   throw new Error('Cannot run on the runtime')
 }

packages/react/src/components/VStack.tsx

@@ -1,9 +1,9 @@
 import type { DevupProps } from '../types/props'
 import type { Merge } from '../types/utils'
 
-export function VStack(
+export function VStack<T extends React.ElementType = 'span'>(
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  props: Merge<React.ComponentProps<'div'>, DevupProps>,
+  props: Merge<React.ComponentProps<T>, DevupProps>,
 ): React.ReactElement {
   throw new Error('Cannot run on the runtime')
 }

packages/react/src/components/__tests__/index.test.ts

@@ -2,6 +2,7 @@ import { Box } from '../Box'
 import { Button } from '../Button'
 import { Center } from '../Center'
 import { Flex } from '../Flex'
+import { Image } from '../Image'
 import { Input } from '../Input'
 import { Text } from '../Text'
 import { VStack } from '../VStack'
@@ -15,5 +16,6 @@ describe('Component', () => {
     expect(() => Input({})).toThrowError('Cannot run on the runtime')
     expect(() => Text({})).toThrowError('Cannot run on the runtime')
     expect(() => VStack({})).toThrowError('Cannot run on the runtime')
+    expect(() => Image({})).toThrowError('Cannot run on the runtime')
   })
 })

packages/react/src/index.ts

@@ -2,6 +2,7 @@ export { Box } from './components/Box'
 export { Button } from './components/Button'
 export { Center } from './components/Center'
 export { Flex } from './components/Flex'
+export { Image } from './components/Image'
 export { Input } from './components/Input'
 export { Text } from './components/Text'
 export { VStack } from './components/VStack'

packages/webpack-plugin/package.json

@@ -21,8 +21,6 @@
   ],
   "types": "./dist/index.d.ts",
   "scripts": {
-    "test": "vitest run --coverage",
-    "test:s": "vitest run -u",
     "lint": "eslint",
     "build": "tsc && vite build"
   },