keep only one helper, fixed ref typing

packages/lib/package.json

@@ -6,7 +6,7 @@
   "types": "./dist/index.d.ts",
   "type": "module",
   "packageManager": "[email protected]",
-  "version": "1.0.11",
+  "version": "1.0.15",
   "scripts": {
     "dev": "run-p --continue-on-error watch:source watch:types",
     "watch:types": "npx tsc -w",

packages/lib/src/Box.tsx

@@ -1,11 +1,11 @@
-import React, { forwardRef } from 'react';
+import React from 'react';
 // @ts-ignore
 import hash from 'stable-hash';
 
 import { css, InputStyle } from './css';
 import { Theme } from './index';
 import { SX } from './SX';
-import { SxComponent } from './SxComponent';
+import { createSxComponent } from './SxComponent';
 
 const CACHE = new Map<string, any>();
 
@@ -39,10 +39,10 @@ const useStyle = (sx?: SX) => {
   }
 };
 
-type Box = SxComponent<'div', { children?: React.ReactNode }>;
+// type Box = SxComponent<'div', { children?: React.ReactNode }>;
 
-export const Box: Box = forwardRef<React.ElementType, Parameters<Box>[0]>(
-  ({ children, sx, as = 'div', ...props }, ref) => {
+export const Box = createSxComponent<'div', { children?: React.ReactNode }>(
+  ({ children, sx, as = 'div', ref, ...props }) => {
     CACHE.set(hash({ sx, as, ...props }), true);
     const Tag = as;
     const style = useStyle(sx);
@@ -60,3 +60,13 @@ export const Box: Box = forwardRef<React.ElementType, Parameters<Box>[0]>(
     );
   }
 );
+
+export const Card = createSxComponent<'div', { children?: React.ReactNode }>(
+  ({ children, sx, ...props }) => {
+    return (
+      <Box sx={[sx]} {...props}>
+        {children}
+      </Box>
+    );
+  }
+);

packages/lib/src/SxComponent.ts

@@ -19,24 +19,31 @@ export type SxComponentWithRef<
   args: {
     as?: C;
     sx?: SX;
-    ref?: ForwardedRef<C> | any;
-  } & Omit<React.ComponentPropsWithoutRef<C>, keyof P> &
+    ref?: React.RefAttributes<C> | null | any;
+  } & React.ComponentPropsWithoutRef<C> &
     P,
   ref: React.ForwardedRef<C>
 ) => React.ReactElement | null;
 
-export function createSxComponentWithRef<
-  A extends React.ElementType,
-  P extends Record<string, unknown>
->(Component: SxComponentWithRef<A, P>) {
-  return forwardRef<React.ElementType, Parameters<SxComponentWithRef<A, P>>[0]>(
-    Component
-  );
-}
+export type SxComponentWithRefIn<
+  A extends React.ElementType = 'div',
+  P = unknown
+> = <C extends React.ElementType = A>(
+  args: {
+    as?: C;
+    sx?: SX;
+    ref?: React.ForwardedRef<C> | null;
+  } & Omit<React.ComponentPropsWithoutRef<C>, keyof P> &
+    P
+) => React.ReactElement | null;
 
 export function createSxComponent<
   A extends React.ElementType,
   P extends Record<string, unknown>
->(Component: SxComponent<A, P>) {
-  return Component;
+>(Component: SxComponentWithRefIn<A, P>): SxComponentWithRef<A, P> {
+  //@ts-ignore
+  return forwardRef<
+    React.ElementType<A>,
+    Parameters<SxComponentWithRef<A, P>>[0]
+  >((props, ref) => Component({ ...props, ref }));
 }

packages/lib/src/css.ts

@@ -77,19 +77,21 @@ export function css({
         const value =
           typeof brutValue === 'function' ? brutValue(theme) : brutValue;
 
-        if (!value) return acc;
+        if (isNil(value)) return acc;
 
         if (Array.isArray(value)) {
           return breakpoints.reduce((accu, breakpoint, index) => {
             const breakpointRule = `@media (min-width: ${breakpoint})`;
             const breakpointValue = value[index];
-            if (breakpointValue === null || breakpointValue === undefined)
-              return accu;
+
+            if (isNil(breakpointValue)) return accu;
+
             const computedBreakpointValue = computeValue({
               key: resolvedKey as keyof InputStyle,
               value: breakpointValue,
             });
-            if (!computedBreakpointValue) return accu;
+
+            if (isNil(computedBreakpointValue)) return accu;
 
             if (typeof computedBreakpointValue === 'object') {
               return {
@@ -110,7 +112,7 @@ export function css({
             };
           }, acc);
         }
-        if (!value) return acc;
+        // if (!value) return acc;
 
         if (typeof value === 'object') {
           return { ...acc, [resolvedKey]: computeProp(value) };
@@ -120,7 +122,7 @@ export function css({
           key: resolvedKey as keyof InputStyle,
           value,
         });
-        if (!computedValue) return acc;
+        if (isNil(computedValue)) return acc;
 
         if (typeof computedValue === 'object') {
           return { ...acc, ...computedValue };
@@ -153,10 +155,14 @@ export function css({
         key in TRANSFORMS
           ? TRANSFORMS[key as keyof typeof TRANSFORMS]
           : undefined;
+
       return scale
         ? scale(themedValue as never)
         : (themedValue as CSSProperties[keyof CSSProperties] | CSSProperties);
       // themedValue as CSSProperties[keyof CSSProperties] | CSSProperties
     }
   };
 }
+
+const isNil = (value: unknown): value is null | undefined =>
+  value === null || value === undefined;

packages/lib/src/index.ts

@@ -6,5 +6,5 @@ export { defaultTheme, createTheme } from './theme';
 export type { Theme } from './theme';
 export { Box } from './Box';
 export type { SX } from './SX';
-export { createSxComponent, createSxComponentWithRef } from './SxComponent';
+export { createSxComponent } from './SxComponent';
 export { css } from './css';