From b54c2128bf7ba99cbfdff6d80270045d1a8371b6 Mon Sep 17 00:00:00 2001
From: siriwatknp <siriwatkunaporn@gmail.com>
Date: Mon, 5 Aug 2024 20:21:38 +0700
Subject: [PATCH] add spec and fix sx

---
 packages/pigment-css-react/src/sx.d.ts          |  5 ++++-
 packages/pigment-css-react/tests/Box.spec.tsx   |  4 ++--
 .../pigment-css-react/tests/Container.spec.tsx  | 10 ++++++++++
 packages/pigment-css-react/tests/Grid.spec.tsx  |  6 ++++++
 .../pigment-css-react/tests/Hidden.spec.tsx     | 10 ++++++++++
 packages/pigment-css-react/tests/Stack.spec.tsx |  5 +++++
 packages/pigment-css-react/tests/sx.spec.ts     | 17 +++++++++++++++++
 7 files changed, 54 insertions(+), 3 deletions(-)
 create mode 100644 packages/pigment-css-react/tests/Container.spec.tsx
 create mode 100644 packages/pigment-css-react/tests/Grid.spec.tsx
 create mode 100644 packages/pigment-css-react/tests/Hidden.spec.tsx
 create mode 100644 packages/pigment-css-react/tests/sx.spec.ts

diff --git a/packages/pigment-css-react/src/sx.d.ts b/packages/pigment-css-react/src/sx.d.ts
index 8f49a4ae..d9a19a42 100644
--- a/packages/pigment-css-react/src/sx.d.ts
+++ b/packages/pigment-css-react/src/sx.d.ts
@@ -1,6 +1,9 @@
 import type { CSSObjectNoCallback } from './base';
 import type { ThemeArgs } from './theme';
 
-export type SxProp = CSSObjectNoCallback | ((themeArgs: ThemeArgs) => CSSObjectNoCallback);
+export type SxProp =
+  | CSSObjectNoCallback
+  | ((themeArgs: ThemeArgs['theme']) => CSSObjectNoCallback)
+  | ReadonlyArray<CSSObjectNoCallback | ((themeArgs: ThemeArgs['theme']) => CSSObjectNoCallback)>;
 
 export default function sx(arg: SxProp | Array<SxProp>, componentClass?: string): string;
diff --git a/packages/pigment-css-react/tests/Box.spec.tsx b/packages/pigment-css-react/tests/Box.spec.tsx
index 8b28efe6..dd9ca54e 100644
--- a/packages/pigment-css-react/tests/Box.spec.tsx
+++ b/packages/pigment-css-react/tests/Box.spec.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { Box } from '@pigment-css/react/Box';
+import Box from '../src/Box';
 
 export function App() {
   return (
@@ -13,7 +13,7 @@ export function App() {
           Dialog
         </Box>
         {/* @ts-expect-error */}
-        <Box component="dialog" as="button" open>
+        <Box component="dialog" as="button" href>
           Dialog 2
         </Box>
       </Box>
diff --git a/packages/pigment-css-react/tests/Container.spec.tsx b/packages/pigment-css-react/tests/Container.spec.tsx
new file mode 100644
index 00000000..52582cbf
--- /dev/null
+++ b/packages/pigment-css-react/tests/Container.spec.tsx
@@ -0,0 +1,10 @@
+import * as React from 'react';
+import Container from '../src/Container';
+
+<Container maxWidth="md" />;
+
+<Container
+  className=""
+  style={{ accentColor: 'ActiveBorder', marginTop: '1rem' }}
+  data-testid="foo"
+/>;
diff --git a/packages/pigment-css-react/tests/Grid.spec.tsx b/packages/pigment-css-react/tests/Grid.spec.tsx
new file mode 100644
index 00000000..0405ffb0
--- /dev/null
+++ b/packages/pigment-css-react/tests/Grid.spec.tsx
@@ -0,0 +1,6 @@
+import * as React from 'react';
+import Grid from '../src/Grid';
+
+<Grid size={{ xs: 2, md: 3, lg: 4 }} />;
+
+<Grid className="" style={{ accentColor: 'ActiveBorder', marginTop: '1rem' }} data-testid="foo" />;
diff --git a/packages/pigment-css-react/tests/Hidden.spec.tsx b/packages/pigment-css-react/tests/Hidden.spec.tsx
new file mode 100644
index 00000000..f3f20565
--- /dev/null
+++ b/packages/pigment-css-react/tests/Hidden.spec.tsx
@@ -0,0 +1,10 @@
+import * as React from 'react';
+import Hidden from '../src/Hidden';
+
+<Hidden xsUp mdDown />;
+
+<Hidden
+  className=""
+  style={{ accentColor: 'ActiveBorder', marginTop: '1rem' }}
+  data-testid="foo"
+/>;
diff --git a/packages/pigment-css-react/tests/Stack.spec.tsx b/packages/pigment-css-react/tests/Stack.spec.tsx
index 92929c27..2d0f7e27 100644
--- a/packages/pigment-css-react/tests/Stack.spec.tsx
+++ b/packages/pigment-css-react/tests/Stack.spec.tsx
@@ -1,7 +1,12 @@
 import * as React from 'react';
 import Stack from '../src/Stack';
 
+<Stack spacing={2} direction={{ md: 'row' }} />;
+
+<Stack className="" style={{ accentColor: 'ActiveBorder', marginTop: '1rem' }} data-testid="foo" />;
+
 <Stack
+  // @ts-expect-error
   display={{
     xs: 'flex',
     xl: 'inline-flex',
diff --git a/packages/pigment-css-react/tests/sx.spec.ts b/packages/pigment-css-react/tests/sx.spec.ts
new file mode 100644
index 00000000..0007c7e6
--- /dev/null
+++ b/packages/pigment-css-react/tests/sx.spec.ts
@@ -0,0 +1,17 @@
+import { SxProp } from '../src/sx';
+
+const sx1: SxProp = { color: 'red' };
+
+const sx2: SxProp = (theme) => ({
+  color: theme.palette.primary.main,
+});
+
+const sx3: SxProp = [{ color: 'red' }, { backgroundColor: 'blue', color: 'white' }];
+
+const test = true;
+const sx4: SxProp = [
+  test ? { color: 'red' } : { backgroundColor: 'blue', color: 'white' },
+  (theme) => ({
+    border: `1px solid ${theme.palette.primary.main}`,
+  }),
+];