Add background SVG to HomePage and improve CSS type definitions

owjs3901 · owjs3901 · commit 2102fd7e9507 · 2025-02-04T14:31:57.000+09:00
diff --git a/.changeset/loud-boats-count.md b/.changeset/loud-boats-count.md
@@ -0,0 +1,5 @@
+---
+"@devup-ui/react": patch
+---
+
+Support theme typing to css
diff --git a/.changeset/metal-carrots-protect.md b/.changeset/metal-carrots-protect.md
@@ -0,0 +1,5 @@
+---
+"@devup-ui/wasm": patch
+---
+
+Fix empty css call issue
diff --git a/apps/landing/package.json b/apps/landing/package.json
@@ -4,7 +4,7 @@
   "type": "module",
   "private": true,
   "scripts": {
-    "dev": "next dev --turbo",
+    "dev": "next dev",
     "build": "next build",
     "start": "next start",
     "lint": "eslint"
diff --git a/apps/landing/src/app/(detail)/docs/MenuItem.tsx b/apps/landing/src/app/(detail)/docs/MenuItem.tsx
@@ -40,7 +40,7 @@ export function MenuItem(props: MenuItemProps) {
       bg={selected ? '$menuActive' : undefined}
       borderRadius="6px"
       gap="10px"
-      p="6px 10px"
+      p={['10px', null, '6px 10px']}
     >
       {selected && <Box bg="$primary" borderRadius="100%" boxSize="8px" />}
       <Text
diff --git a/apps/landing/src/app/(detail)/docs/RightIndex.tsx b/apps/landing/src/app/(detail)/docs/RightIndex.tsx
@@ -30,7 +30,7 @@ function IndexMenu({
         color={selected ? '$primary' : '$text'}
         flex="1"
         opacity={selected ? '0.8' : '0.6'}
-        typography="captionBold"
+        typography="caption"
       >
         {children}
       </Text>
diff --git a/apps/landing/src/app/(detail)/docs/layout.tsx b/apps/landing/src/app/(detail)/docs/layout.tsx
@@ -10,9 +10,11 @@ export default function DetailLayout({
 }>) {
   return (
     <>
-      <Flex maxW="1440px" mx="auto">
+      <Flex maxW="1440px" minH="calc(100vh - 500px)" mx="auto">
         <Box p="20px 16px" w="220px">
-          <LeftMenu />
+          <Box pos="sticky" top={['70px', null, '90px']}>
+            <LeftMenu />
+          </Box>
         </Box>
         <Box className="markdown-body" flex={1} px="60px" py="40px">
           {children}
diff --git a/apps/landing/src/app/layout.tsx b/apps/landing/src/app/layout.tsx
@@ -28,7 +28,7 @@ export default function RootLayout({
       </head>
       <body
         className={css({
-          bg: '$containerBackground',
+          bg: '$background',
           color: '$text',
         })}
       >
diff --git a/apps/landing/src/app/page.tsx b/apps/landing/src/app/page.tsx
@@ -10,6 +10,59 @@ import { FeatureCard } from './FeatureCard'
 export default function HomePage() {
   return (
     <>
+      <Box
+        h="80dvh"
+        pointerEvents="none"
+        pos="absolute"
+        top="0"
+        w="100%"
+        zIndex="-1"
+      >
+        <svg
+          className={css({
+            w: '100%',
+          })}
+          fill="none"
+          viewBox="0 0 1921 928"
+          width="1921"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M0 0H1921V852L962.5 928L0 852V0Z"
+            fill="url(#paint0_linear_52_3823)"
+          />
+          <defs>
+            <linearGradient
+              gradientUnits="userSpaceOnUse"
+              id="paint0_linear_52_3823"
+              x1="960.5"
+              x2="960.5"
+              y1="0"
+              y2="928"
+            >
+              <stop
+                className={css({
+                  color: '#E1E5F5',
+                  _themeDark: {
+                    color: '#29304F',
+                  },
+                })}
+                stopColor="currentColor"
+              />
+              <stop
+                className={css({
+                  color: '#FEF4FF',
+                  _themeDark: {
+                    color: '#1B141C',
+                  },
+                })}
+                offset="1"
+                stopColor="currentColor"
+              />
+            </linearGradient>
+          </defs>
+        </svg>
+      </Box>
       <Box pt={['100px', '150px']}>
         <VStack alignItems="center" gap="50px" maxW="800px" mx="auto">
           <VStack alignItems="center" gap="24px">
diff --git a/apps/landing/src/components/Discord.tsx b/apps/landing/src/components/Discord.tsx
@@ -9,6 +9,8 @@ export function Discord() {
       alignItems="center"
       bgColor="$joinBg"
       bgImage={`url(${URL_PREFIX}/discord-bg.svg)`}
+      bgPositionY={['bottom', null, 'initial']}
+      bgSize={['contain', null, 'initial']}
       borderRadius="40px 40px 0px 40px"
       h="380px"
       justifyContent={[null, null, 'center']}
diff --git a/apps/landing/src/components/Header/Menu.tsx b/apps/landing/src/components/Header/Menu.tsx
@@ -16,8 +16,15 @@ export function Menu({ children, keyword }: MenuProps) {
     path.startsWith(`/${keyword}`)
   return (
     <Text
+      _active={{
+        opacity: '1',
+        color: '$primary',
+      }}
+      _hover={{
+        opacity: '1',
+      }}
       color={selected ? '$primary' : '$title'}
-      opacity={selected ? 1 : '0.6'}
+      opacity={selected ? undefined : '0.6'}
       typography="buttonLsemiB"
     >
       {children}
diff --git a/apps/landing/src/components/Header/MobMenu.tsx b/apps/landing/src/components/Header/MobMenu.tsx
@@ -19,7 +19,7 @@ export function MobMenu() {
           })}
           href={URL_PREFIX + '/docs/overview'}
         >
-          <Flex alignItems="center" gap="10px" py="4px">
+          <Flex alignItems="center" py="10px">
             <Text color="$title" textAlign="right" typography="buttonM">
               Docs
             </Text>
@@ -32,9 +32,9 @@ export function MobMenu() {
           })}
           href={URL_PREFIX + '/team'}
         >
-          <Flex alignItems="center" gap="10px" py="4px">
+          <Flex alignItems="center" py="10px">
             <Text color="$title" textAlign="right" typography="buttonM">
-              Docs
+              Team
             </Text>
           </Flex>
         </Link>
diff --git a/apps/landing/src/components/Header/index.tsx b/apps/landing/src/components/Header/index.tsx
@@ -1,4 +1,4 @@
-import { css, Flex } from '@devup-ui/react'
+import { Box, css, Flex } from '@devup-ui/react'
 import Link from 'next/link'
 import { Suspense } from 'react'
 
@@ -40,31 +40,44 @@ export function Header() {
   return (
     <HeaderWrap>
       <Flex alignItems="center" gap="16px">
-        <Suspense
-          fallback={
-            <Link
-              className={css({
-                textDecoration: 'none',
-                ml: 4,
-              })}
-              href={URL_PREFIX + '/'}
-            >
-              <Logo />
-            </Link>
-          }
-        >
-          <MobMenuWrapper openChildren={top}>
-            <Link
-              className={css({
-                textDecoration: 'none',
-                ml: 4,
-              })}
-              href={URL_PREFIX + '/'}
-            >
-              <Logo />
-            </Link>
-          </MobMenuWrapper>
-        </Suspense>
+        <Box display={['none', null, 'contents']}>
+          <Link
+            className={css({
+              textDecoration: 'none',
+              ml: 4,
+            })}
+            href={URL_PREFIX + '/'}
+          >
+            <Logo />
+          </Link>
+        </Box>
+        <Box display={['contents', null, 'none']}>
+          <Suspense
+            fallback={
+              <Link
+                className={css({
+                  textDecoration: 'none',
+                  ml: 4,
+                })}
+                href={URL_PREFIX + '/'}
+              >
+                <Logo />
+              </Link>
+            }
+          >
+            <MobMenuWrapper openChildren={top}>
+              <Link
+                className={css({
+                  textDecoration: 'none',
+                  ml: 4,
+                })}
+                href={URL_PREFIX + '/'}
+              >
+                <Logo />
+              </Link>
+            </MobMenuWrapper>
+          </Suspense>
+        </Box>
       </Flex>
       <Flex alignItems="center" display={['none', null, 'flex']} gap="10px">
         <Flex alignItems="center" px="24px">
diff --git a/libs/extractor/src/lib.rs b/libs/extractor/src/lib.rs
@@ -960,6 +960,32 @@ mod tests {
             }
         )
         .unwrap());
+
+        reset_class_map();
+        assert_debug_snapshot!(extract(
+            "test.tsx",
+            r#"import { css } from "@devup-ui/core";
+<Box className={css()}/>;
+"#,
+            ExtractOption {
+                package: "@devup-ui/core".to_string(),
+                css_file: None
+            }
+        )
+        .unwrap());
+
+        reset_class_map();
+        assert_debug_snapshot!(extract(
+            "test.tsx",
+            r#"import { css } from "@devup-ui/core";
+<Box className={css({})}/>;
+"#,
+            ExtractOption {
+                package: "@devup-ui/core".to_string(),
+                css_file: None
+            }
+        )
+        .unwrap());
     }
 
     #[test]
diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_static_css_class_name_props-7.snap b/libs/extractor/src/snapshots/extractor__tests__extract_static_css_class_name_props-7.snap
@@ -0,0 +1,8 @@
+---
+source: libs/extractor/src/lib.rs
+expression: "extract(\"test.tsx\",\nr#\"import { css } from \"@devup-ui/core\";\n<Box className={css()}/>;\n\"#,\nExtractOption\n{ package: \"@devup-ui/core\".to_string(), css_file: None }).unwrap()"
+---
+ExtractOutput {
+    styles: [],
+    code: "<Box className={\"\"} />;\n",
+}
diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_static_css_class_name_props-8.snap b/libs/extractor/src/snapshots/extractor__tests__extract_static_css_class_name_props-8.snap
@@ -0,0 +1,8 @@
+---
+source: libs/extractor/src/lib.rs
+expression: "extract(\"test.tsx\",\nr#\"import { css } from \"@devup-ui/core\";\n<Box className={css({})}/>;\n\"#,\nExtractOption\n{ package: \"@devup-ui/core\".to_string(), css_file: None }).unwrap()"
+---
+ExtractOutput {
+    styles: [],
+    code: "<Box className={\"\"} />;\n",
+}
diff --git a/libs/extractor/src/visit.rs b/libs/extractor/src/visit.rs
@@ -86,34 +86,48 @@ impl<'a> VisitMut<'a> for DevupVisitor<'a> {
         walk_expression(self, it);
         if let Expression::CallExpression(call) = it {
             if let Expression::Identifier(ident) = &call.callee {
-                if self.css_imports.contains_key(ident.name.as_str()) && call.arguments.len() == 1 {
-                    match extract_style_from_expression(
-                        &self.ast,
-                        None,
-                        call.arguments[0].to_expression_mut(),
-                        0,
-                        None,
-                    ) {
-                        ExtractResult::ExtractStyle(styles)
-                        | ExtractResult::ExtractStyleWithChangeTag(styles, _) => {
-                            let class_name = gen_class_names(&self.ast, &styles);
-                            let mut styles = styles
-                                .into_iter()
-                                .flat_map(|ex| ex.extract())
-                                .collect::<Vec<_>>();
+                if self.css_imports.contains_key(ident.name.as_str()) {
+                    if call.arguments.is_empty() {
+                        *it = Expression::StringLiteral(self.ast.alloc_string_literal(
+                            SPAN,
+                            "".to_string(),
+                            None,
+                        ));
+                    } else if call.arguments.len() == 1 {
+                        match extract_style_from_expression(
+                            &self.ast,
+                            None,
+                            call.arguments[0].to_expression_mut(),
+                            0,
+                            None,
+                        ) {
+                            ExtractResult::ExtractStyle(styles)
+                            | ExtractResult::ExtractStyleWithChangeTag(styles, _) => {
+                                let class_name = gen_class_names(&self.ast, &styles);
+                                let mut styles = styles
+                                    .into_iter()
+                                    .flat_map(|ex| ex.extract())
+                                    .collect::<Vec<_>>();
 
-                            self.styles.append(&mut styles);
-                            if let Some(cls) = class_name {
-                                *it = cls;
-                            } else {
+                                self.styles.append(&mut styles);
+                                if let Some(cls) = class_name {
+                                    *it = cls;
+                                } else {
+                                    *it = Expression::StringLiteral(self.ast.alloc_string_literal(
+                                        SPAN,
+                                        "".to_string(),
+                                        None,
+                                    ));
+                                }
+                            }
+                            _ => {
                                 *it = Expression::StringLiteral(self.ast.alloc_string_literal(
                                     SPAN,
                                     "".to_string(),
                                     None,
                                 ));
                             }
                         }
-                        _ => {}
                     }
                 }
             }
diff --git a/packages/react/src/utils/css.ts b/packages/react/src/utils/css.ts
@@ -1,13 +1,20 @@
 import { DevupCommonProps } from '../types/props'
-import type { DevupSelectorProps } from '../types/props/selector'
+import type {
+  DevupSelectorProps,
+  DevupThemeSelectorProps,
+} from '../types/props/selector'
 
-export function css(props: DevupCommonProps & DevupSelectorProps): string
+export function css(
+  props: DevupCommonProps & DevupSelectorProps & DevupThemeSelectorProps,
+): string
 export function css(strings: TemplateStringsArray): string
 export function css(): string
 
 export function css(
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  strings?: TemplateStringsArray | (DevupCommonProps & DevupSelectorProps),
+  strings?:
+    | TemplateStringsArray
+    | (DevupCommonProps & DevupSelectorProps & DevupThemeSelectorProps),
 ): string {
   throw new Error('Cannot run on the runtime')
 }

-Original file line number
+Diff line change
@@ @@ -0,0 +1,5 @@ @@
 +---
 +"@devup-ui/react": patch
 +---
++
 +Support theme typing to css
Original file line number	Diff line number	Diff line change
`@@ -40,7 +40,7 @@ export function MenuItem(props: MenuItemProps) {`
`40`	`40`	`bg={selected ? '$menuActive' : undefined}`
`41`	`41`	`borderRadius="6px"`
`42`	`42`	`gap="10px"`
`43`		`- p="6px 10px"`
	`43`	`+ p={['10px', null, '6px 10px']}`
`44`	`44`	`>`
`45`	`45`	`{selected && <Box bg="$primary" borderRadius="100%" boxSize="8px" />}`
`46`	`46`	`<Text`
Original file line number	Diff line number	Diff line change
`@@ -30,7 +30,7 @@ function IndexMenu({`
`30`	`30`	`color={selected ? '$primary' : '$text'}`
`31`	`31`	`flex="1"`
`32`	`32`	`opacity={selected ? '0.8' : '0.6'}`
`33`		`- typography="captionBold"`
	`33`	`+ typography="caption"`
`34`	`34`	`>`
`35`	`35`	`{children}`
`36`	`36`	`</Text>`
Original file line number	Diff line number	Diff line change
`@@ -28,7 +28,7 @@ export default function RootLayout({`
`28`	`28`	`</head>`
`29`	`29`	`<body`
`30`	`30`	`className={css({`
`31`		`- bg: '$containerBackground',`
	`31`	`+ bg: '$background',`
`32`	`32`	`color: '$text',`
`33`	`33`	`})}`
`34`	`34`	`>`