Implement Grid

.changeset/breezy-owls-change.md

@@ -0,0 +1,5 @@
+---
+"@devup-ui/react": patch
+---
+
+Add grid, Support for selector in css

libs/extractor/src/lib.rs

@@ -812,6 +812,24 @@ mod tests {
 <Box className={c({
   bg:"red"
 })}/>;
+"#,
+            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({
+  _hover: {
+    bg:"red",
+    color:"blue"
+  }
+})}/>;
 "#,
             ExtractOption {
                 package: "@devup-ui/core".to_string(),

libs/extractor/src/snapshots/extractor__tests__extract_static_css_class_name_props-5.snap

@@ -0,0 +1,35 @@
+---
+source: libs/extractor/src/lib.rs
+expression: "extract(\"test.tsx\",\nr#\"import { css } from \"@devup-ui/core\";\n<Box className={css({\n  _hover: {\n    bg:\"red\",\n    color:\"blue\"\n  }\n})}/>;\n\"#,\nExtractOption\n{ package: \"@devup-ui/core\".to_string(), css_file: None }).unwrap()"
+---
+ExtractOutput {
+    styles: [
+        Static(
+            ExtractStaticStyle {
+                property: "color",
+                value: "blue",
+                level: 0,
+                selector: Some(
+                    Postfix(
+                        "hover",
+                    ),
+                ),
+                basic: false,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "background",
+                value: "red",
+                level: 0,
+                selector: Some(
+                    Postfix(
+                        "hover",
+                    ),
+                ),
+                basic: false,
+            },
+        ),
+    ],
+    code: "import \"@devup-ui/core/devup-ui.css\";\nimport { css } from \"@devup-ui/core\";\n<Box className={css(\"d0 d1\")} />;\n",
+}

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

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

packages/react/src/components/Grid.tsx

@@ -0,0 +1,9 @@
+import type { DevupProps } from '../types/props'
+import type { Merge } from '../types/utils'
+
+export function Grid<T extends React.ElementType = 'div'>(
+  // 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/__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 { Grid } from '../Grid'
 import { Image } from '../Image'
 import { Input } from '../Input'
 import { Text } from '../Text'
@@ -17,5 +18,6 @@ describe('Component', () => {
     expect(() => Text({})).toThrowError('Cannot run on the runtime')
     expect(() => VStack({})).toThrowError('Cannot run on the runtime')
     expect(() => Image({})).toThrowError('Cannot run on the runtime')
+    expect(() => Grid({})).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 { Grid } from './components/Grid'
 export { Image } from './components/Image'
 export { Input } from './components/Input'
 export { Text } from './components/Text'

packages/react/src/utils/css.ts

@@ -1,9 +1,12 @@
 import { DevupCommonProps } from '../types/props'
+import type { DevupSelectorProps } from '../types/props/selector'
 
 export function css(props: DevupCommonProps): string
 export function css(strings: TemplateStringsArray): string
 
-export function css(strings: TemplateStringsArray | DevupCommonProps): string {
+export function css(
+  strings: TemplateStringsArray | (DevupCommonProps & DevupSelectorProps),
+): string {
   if (Array.isArray(strings)) {
     return strings.join('')
   }