fix: make function for defaultStyles pseudo

.husky/pre-commit

@@ -1,12 +1,12 @@
 #!/bin/sh
 . "$(dirname "$0")/_/husky.sh"
 
-yarn build
+yarn build:tcm
 
 yarn lint
 
-#yarn lint:cms
-
 yarn test
 
+yarn build
+
 yarn size

packages/components/.storybook/main.cjs

@@ -4,9 +4,9 @@ module.exports = {
   stories: ['../src/@(atoms|molecules|organisms|primal)/**/story.@(ts|tsx)'],
   addons: ['@storybook/addon-links', '@storybook/addon-essentials'],
   // https://storybook.js.org/docs/react/configure/typescript#mainjs-configuration
-  typescript: {
-    check: true, // type-check stories during Storybook build
-  },
+  // typescript: {
+  //   check: true, // type-check stories during Storybook build
+  // },
   webpackFinal: (config) => {
     config.plugins.push(
       new webpack.DefinePlugin({

packages/components/src/atoms/table/Table.tsx

@@ -77,23 +77,21 @@ const Table: FC<Props> = ({
       ? totalSize - (virtualRows?.[virtualRows.length - 1]?.end || 0)
       : 0;
 
+  console.log(theme);
+
   return (
     <div ref={tableContainerRef}>
-      <StyledTable {...theme.defaultStyles?.table} className={className}>
-        <StyledTHead {...theme.defaultStyles?.thead}>
+      <StyledTable defaultStyles={'table'} className={className}>
+        <StyledTHead defaultStyles={'thead'}>
           {table.getHeaderGroups().map(headerGroup => (
-            <StyledTr
-              key={headerGroup.id}
-              {...theme.defaultStyles?.tr}
-              {...theme.defaultStyles?.theadTr}
-            >
+            <StyledTr key={headerGroup.id} defaultStyles={'theadTr'}>
               {headerGroup.headers.map(header => {
                 return (
                   <StyledTh
                     key={header.id}
                     colSpan={header.colSpan}
                     style={{ width: header.getSize() }}
-                    {...theme.defaultStyles?.th}
+                    defaultStyles={'th'}
                   >
                     {header.isPlaceholder ? null : (
                       <div
@@ -120,29 +118,22 @@ const Table: FC<Props> = ({
             </StyledTr>
           ))}
         </StyledTHead>
-        <StyledTBody {...theme.defaultStyles?.tbody}>
+        <StyledTBody defaultStyles={'tbody'}>
           {paddingTop > 0 && (
-            <StyledTr
-              {...theme.defaultStyles?.tr}
-              {...theme.defaultStyles?.tbodyTr}
-            >
+            <StyledTr defaultStyles={'tbodyTr'}>
               <StyledTd
                 style={{ height: `${paddingTop}px` }}
-                {...theme.defaultStyles?.td}
+                defaultStyles={'td'}
               ></StyledTd>
             </StyledTr>
           )}
           {virtualRows.map(virtualRow => {
             const row = rows[virtualRow.index];
             return (
-              <StyledTr
-                {...theme.defaultStyles?.tr}
-                {...theme.defaultStyles?.tbodyTr}
-                key={row.id}
-              >
+              <StyledTr defaultStyles={'tbodyTr'} key={row.id}>
                 {row.getVisibleCells().map(cell => {
                   return (
-                    <StyledTd key={cell.id} {...theme.defaultStyles?.td}>
+                    <StyledTd key={cell.id} defaultStyles={'td'}>
                       {flexRender(
                         cell.column.columnDef.cell,
                         cell.getContext()
@@ -154,12 +145,9 @@ const Table: FC<Props> = ({
             );
           })}
           {paddingBottom > 0 && (
-            <StyledTr
-              {...theme.defaultStyles?.tr}
-              {...theme.defaultStyles?.tbodyTr}
-            >
+            <StyledTr defaultStyles={'tbodyTr'}>
               <StyledTd
-                {...theme.defaultStyles?.td}
+                defaultStyles={'td'}
                 style={{ height: `${paddingBottom}px` }}
               />
             </StyledTr>

packages/components/src/atoms/table/__test__/__snapshots__/index.test.tsx.snap

@@ -4,12 +4,10 @@ exports[`<Table /> should render correctly 1`] = `
 <DocumentFragment>
   <div>
     <table
-      class="sc-jSUZER hXpppO"
-      height="100%"
-      width="100%"
+      class="sc-jSUZER hNVkMl"
     >
       <thead
-        class="sc-gKPRtg dQATfs"
+        class="sc-gKPRtg kwXAmQ"
       >
         <tr
           class="sc-iBYQkv bWTXCf"

packages/components/src/atoms/table/story.tsx

@@ -6,5 +6,8 @@ export default {
 };
 
 export const story = () => (
-  <Table columns={['id', 'test', '100', 'something']} data={[{ id: '0' }]} />
+  <Table
+    columns={['id', 'test', '100', 'something']}
+    data={[{ id: '0' }, { id: '0' }, { id: '0' }, { id: '0' }, { id: '0' }]}
+  />
 );

packages/components/src/primal/box/Box.tsx

@@ -6,6 +6,7 @@ import {
   BorderProps,
   ShadowProps,
   FlexboxProps,
+  PseudoProps,
 } from '@techstack/styled-system';
 import { Property } from 'csstype';
 import { ElementType, ReactNode } from 'react';
@@ -21,13 +22,15 @@ export interface Props
     PositionProps,
     BorderProps,
     ShadowProps,
-    FlexboxProps {
+    FlexboxProps,
+    PseudoProps {
   children?: ReactNode;
   as?: ElementType;
   testid?: string;
   className?: string;
   cursor?: Property.Cursor;
   pointerEvents?: Property.PointerEvents;
+  defaultStyles?: Record<string, unknown>;
 }
 
 export const Box = <P extends keyof HTMLElementTagNameMap = 'div'>({

packages/components/src/primal/box/story.tsx

@@ -23,3 +23,12 @@ BoxWithBorder.args = {
   borderRadius: 2,
   p: 4,
 };
+
+export const BoxWithPseudo = Template.bind({});
+
+BoxWithPseudo.args = {
+  children: 'this is a hover box',
+  _hover: {
+    bg: 'red',
+  },
+};

packages/components/src/primal/box/styled.ts

@@ -9,6 +9,7 @@ import {
   flexbox,
   system,
   typography,
+  defaultStyles,
 } from '@techstack/styled-system';
 
 import { shouldForwardProp } from '../../utils';
@@ -21,6 +22,9 @@ const utilProps = system({
   pointerEvents: {
     property: 'pointerEvents',
   },
+  borderCollapse: {
+    property: 'borderCollapse',
+  },
 });
 
 export const StyledBoxProps = compose(
@@ -32,7 +36,8 @@ export const StyledBoxProps = compose(
   shadow,
   flexbox,
   typography,
-  utilProps
+  utilProps,
+  defaultStyles
 );
 
 export const StyledBox = styled.div.withConfig({

packages/styled-system/src/core/styleFunction.ts

@@ -22,7 +22,7 @@ export interface StyleFn {
 
 export interface CreateStyleFunctionArgs {
   property?: keyof Properties | `&${Pseudos}`;
-  properties?: Array<keyof Properties> | Array<string>;
+  properties?: Array<keyof Properties | `&${Pseudos}`>;
   scale?: string;
   transform?: TransformType;
   defaultScale?: Scale;

packages/styled-system/src/index.ts

@@ -50,6 +50,7 @@ export {
   TextVariants,
   ButtonVariants,
   IntentVariants,
+  defaultStyles,
 } from './variant';
 
 // shared types

packages/styled-system/src/parsers/pseudo.ts

@@ -41,105 +41,106 @@ export interface PseudoProps<
   _selection?: ObjectOrArray<ResponsiveValue<TVal, ThemeType>>;
 }
 
-const pseudoConfig: SystemConfig<keyof typeof pseudoSelectors> = {
+export const pseudoConfig: SystemConfig<keyof typeof pseudoSelectors> = {
   _hover: {
-    properties: pseudoSelectors._hover,
+    properties: pseudoSelectors._hover as any,
+    transform: (scale, path, fallback) => {
+      console.log(scale, path, fallback);
+      return path;
+    },
   },
   _active: {
-    properties: pseudoSelectors._active,
+    properties: pseudoSelectors._active as any,
   },
   _focus: {
-    properties: pseudoSelectors._focus,
+    properties: pseudoSelectors._focus as any,
   },
   _highlighted: {
-    properties: pseudoSelectors._highlighted,
+    properties: pseudoSelectors._highlighted as any,
   },
   _focusWithin: {
-    properties: pseudoSelectors._focusWithin,
+    properties: pseudoSelectors._focusWithin as any,
   },
   _focusVisible: {
-    properties: pseudoSelectors._focusVisible,
+    properties: pseudoSelectors._focusVisible as any,
   },
   _disabled: {
-    properties: pseudoSelectors._disabled,
+    properties: pseudoSelectors._disabled as any,
   },
   _readOnly: {
-    properties: pseudoSelectors._readOnly,
+    properties: pseudoSelectors._readOnly as any,
   },
   _before: {
-    properties: pseudoSelectors._before,
+    properties: pseudoSelectors._before as any,
   },
   _after: {
-    properties: pseudoSelectors._after,
+    properties: pseudoSelectors._after as any,
   },
   _empty: {
-    properties: pseudoSelectors._empty,
+    properties: pseudoSelectors._empty as any,
   },
   _expanded: {
-    properties: pseudoSelectors._expanded,
+    properties: pseudoSelectors._expanded as any,
   },
   _checked: {
-    properties: pseudoSelectors._checked,
+    properties: pseudoSelectors._checked as any,
   },
   _grabbed: {
-    properties: pseudoSelectors._grabbed,
+    properties: pseudoSelectors._grabbed as any,
   },
   _pressed: {
-    properties: pseudoSelectors._pressed,
+    properties: pseudoSelectors._pressed as any,
   },
   _invalid: {
-    properties: pseudoSelectors._invalid,
+    properties: pseudoSelectors._invalid as any,
   },
   _valid: {
-    properties: pseudoSelectors._valid,
+    properties: pseudoSelectors._valid as any,
   },
   _loading: {
-    properties: pseudoSelectors._loading,
+    properties: pseudoSelectors._loading as any,
   },
   _selected: {
-    properties: pseudoSelectors._selected,
+    properties: pseudoSelectors._selected as any,
   },
   _hidden: {
-    properties: pseudoSelectors._hidden,
-  },
-  _autofill: {
-    properties: pseudoSelectors._autofill,
+    properties: pseudoSelectors._hidden as any,
   },
   _even: {
-    properties: pseudoSelectors._even,
+    properties: pseudoSelectors._even as any,
   },
   _odd: {
-    properties: pseudoSelectors._odd,
+    properties: pseudoSelectors._odd as any,
   },
   _first: {
-    properties: pseudoSelectors._first,
+    properties: pseudoSelectors._first as any,
   },
   _last: {
-    properties: pseudoSelectors._last,
+    properties: pseudoSelectors._last as any,
   },
   _notFirst: {
-    properties: pseudoSelectors._notFirst,
+    properties: pseudoSelectors._notFirst as any,
   },
   _notLast: {
-    properties: pseudoSelectors._notLast,
+    properties: pseudoSelectors._notLast as any,
   },
   _visited: {
-    properties: pseudoSelectors._visited,
+    properties: pseudoSelectors._visited as any,
   },
   _activeLink: {
-    properties: pseudoSelectors._activeLink,
+    properties: pseudoSelectors._activeLink as any,
   },
   _indeterminate: {
-    properties: pseudoSelectors._indeterminate,
+    properties: pseudoSelectors._indeterminate as any,
   },
   _placeholder: {
-    properties: pseudoSelectors._placeholder,
+    properties: pseudoSelectors._placeholder as any,
   },
   _fullScreen: {
-    properties: pseudoSelectors._fullScreen,
+    properties: pseudoSelectors._fullScreen as any,
   },
   _selection: {
-    properties: pseudoSelectors._selection,
+    properties: pseudoSelectors._selection as any,
   },
 };