[TypeScript] Fix sx types and missing style prop from layout components (#191)

Author: siriwatknp

packages/pigment-css-react/src/Box.d.ts

@@ -7,7 +7,7 @@ export type PolymorphicComponentProps<
   AsTarget extends React.ElementType | undefined,
   AsTargetProps extends object = AsTarget extends React.ElementType
     ? React.ComponentPropsWithRef<AsTarget>
-    : BaseDefaultProps,
+    : React.HTMLAttributes<HTMLElement>,
 > = NoInfer<Omit<Substitute<BaseProps, AsTargetProps>, 'as' | 'component'>> & {
   /**
    * The component used for the root node.
@@ -37,6 +37,6 @@ export interface PolymorphicComponent<BaseProps extends BaseDefaultProps>
   ): React.JSX.Element;
 }
 
-declare const Box: PolymorphicComponent<{}>;
+declare const Box: PolymorphicComponent<React.DetailsHTMLAttributes<HTMLDivElement>>;
 
 export default Box;

packages/pigment-css-react/src/Container.d.ts

@@ -24,6 +24,8 @@ type ContainerBaseProps = {
   maxWidth?: Breakpoint | false;
 };
 
-declare const Container: PolymorphicComponent<ContainerBaseProps>;
+declare const Container: PolymorphicComponent<
+  ContainerBaseProps & React.DetailsHTMLAttributes<HTMLDivElement>
+>;
 
 export default Container;

packages/pigment-css-react/src/Grid.d.ts

@@ -18,6 +18,8 @@ type GridBaseProps = {
   wrap?: 'nowrap' | 'wrap' | 'wrap-reverse';
 };
 
-declare const Grid: PolymorphicComponent<GridBaseProps>;
+declare const Grid: PolymorphicComponent<
+  GridBaseProps & React.DetailsHTMLAttributes<HTMLDivElement>
+>;
 
 export default Grid;

packages/pigment-css-react/src/Hidden.d.ts

@@ -13,6 +13,8 @@ interface HiddenBaseProps extends HiddenUp, HiddenDown {
   only?: Breakpoint | Breakpoint[];
 }
 
-declare const Hidden: PolymorphicComponent<HiddenBaseProps>;
+declare const Hidden: PolymorphicComponent<
+  HiddenBaseProps & React.DetailsHTMLAttributes<HTMLDivElement>
+>;
 
 export default Hidden;

packages/pigment-css-react/src/Stack.d.ts

@@ -12,6 +12,8 @@ type StackBaseProps = {
   className?: string;
 };
 
-declare const Stack: PolymorphicComponent<StackBaseProps>;
+declare const Stack: PolymorphicComponent<
+  StackBaseProps & React.DetailsHTMLAttributes<HTMLDivElement>
+>;
 
 export default Stack;

packages/pigment-css-react/src/index.spec.ts

@@ -44,20 +44,20 @@ styled.div(({ theme }) => ({
 }));
 
 sx({ color: 'red' });
-sx(({ theme }) => ({
+sx((theme) => ({
   color: theme.palette.primary.main,
 }));
 sx([
   { color: 'red' },
-  ({ theme }) => ({
+  (theme) => ({
     color: theme.palette.primary.main,
   }),
 ]);
 const foo = true;
 sx([
   true && { color: 'red' },
   foo
-    ? ({ theme }) => ({
+    ? (theme) => ({
         color: theme.palette.primary.main,
       })
     : {

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;

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>

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"
+/>;

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" />;

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"
+/>;

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',

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}`,
+  }),
+];