fix: fixed instance Stack

.changeset/nice-carrots-happen.md

@@ -0,0 +1,14 @@
+---
+"@design-blocks/primitives": patch
+"@design-blocks/system": patch
+"@design-blocks/colors": patch
+"@design-blocks/theme": patch
+"@design-blocks/types": patch
+"@design-blocks/unstyled": patch
+"@design-blocks/utils": patch
+"@design-blocks/block": patch
+"@design-blocks/native": patch
+"tsconfig": patch
+---
+
+Fixed stacks

packages/@blocks-primitives/src/Stack/Stack.tsx

@@ -1,58 +1,14 @@
 import * as React from 'react';
 
-import block from '@design-blocks/block';
+import { __DEV__ } from '@design-blocks/utils';
 
-import { StyleFunctionMode, styleFunction } from '@design-blocks/system';
-import { __DEV__, camelCase } from '@design-blocks/utils';
+import type { StackProps } from './Stack.types';
 
-import { Box } from '../Box';
-import { variants } from './Stack.utils';
-
-import type { IStackStyleValue, StackProps } from './Stack.types';
-
-const StackBlock = block(Box, {
-  shouldForwardProp: (prop) => prop !== 'theme' && prop !== 'sx' && prop !== 'as',
-})<Omit<StackProps, 'direction'>>(
-  ({
-    flexDirection: flexDirectionProps = 'column',
-    alignItems: alignItemsProps = 'stretch',
-    justifyContent: justifyContentProps = 'flexStart',
-    flexWrap: flexWrapProps = 'nowrap',
-    theme,
-    sx,
-    ...styleProps
-  }): IStackStyleValue => {
-    const flexDirection = variants.flexDirection[
-      camelCase(flexDirectionProps) as keyof typeof variants.flexDirection
-    ] as IStackStyleValue['flexDirection'];
-
-    const alignItems = variants.alignItems[
-      camelCase(alignItemsProps) as keyof typeof variants.alignItems
-    ] as IStackStyleValue['alignItems'];
-
-    const flexWrap = variants.flexWrap[
-      camelCase(flexWrapProps) as keyof typeof variants.flexWrap
-    ] as IStackStyleValue['flexWrap'];
-
-    const justifyContent = variants.justifyContent[
-      camelCase(justifyContentProps) as keyof typeof variants.justifyContent
-    ] as IStackStyleValue['justifyContent'];
-
-    return {
-      display: 'flex',
-      flexDirection,
-      alignItems,
-      justifyContent,
-      flexWrap,
-      ...styleFunction('Box', theme, { ...styleProps }, StyleFunctionMode.PROPS),
-      ...styleFunction('Box', theme, sx, StyleFunctionMode.SX),
-    };
-  },
-);
-function Stack({ direction = 'column', ...props }: StackProps) {
-  return <StackBlock flexDirection={direction} {...props} />;
+import { createStack } from './createStack';
+function Stack({ ...props }: StackProps) {
+  const StackBlock = createStack();
+  return <StackBlock {...props} />;
 }
-
 if (__DEV__) {
   Stack.displayName = 'Block.Stack';
 }

packages/@blocks-primitives/src/Stack/createStack.tsx

@@ -2,7 +2,7 @@ import * as React from 'react';
 
 import block from '@design-blocks/block';
 
-import { StyleFunctionMode, styleFunction } from '@design-blocks/system';
+import { styleFunctionProps, styleFunctionSx } from '@design-blocks/system';
 import { __DEV__, camelCase } from '@design-blocks/utils';
 
 import { Box } from '../Box';
@@ -45,8 +45,8 @@ export function createStack<AdditionalProps extends StackProps = StackProps>() {
         alignItems,
         justifyContent,
         flexWrap,
-        ...styleFunction('Box', theme, { ...styleProps }, StyleFunctionMode.PROPS),
-        ...styleFunction('Box', theme, sx, StyleFunctionMode.SX),
+        ...styleFunctionProps('Box', theme, { ...styleProps }),
+        ...styleFunctionSx('Box', theme, sx),
       };
     },
   );

packages/@blocks-system/src/styleFunction/index.ts

@@ -1,3 +1,5 @@
 export * from './getValuesTokens';
 export * from './styleFunction';
 export * from './validateProperties';
+export * from './styleFunctionProps';
+export * from './styleFunctionSx';

packages/@blocks-system/src/styleFunction/styleFunctionProps.ts

@@ -0,0 +1,49 @@
+import { componentsKeys } from '@design-blocks/theme';
+
+import { getValuesTokens } from './getValuesTokens';
+import validateProperties from './validateProperties';
+
+import type { IComponentsKeysProps, Theme } from '@design-blocks/theme';
+import type { StylesObjectProps } from '@design-blocks/types';
+
+type PropertyStyle<TokensProperty> = TokensProperty;
+
+export const styleFunctionProps = (
+  nameTokenComp: IComponentsKeysProps,
+  theme: Theme,
+  stylesObjectProps: StylesObjectProps,
+) => {
+  const tokensBase = componentsKeys[nameTokenComp];
+
+  const styles = Object.entries(stylesObjectProps ?? {}).reduce(
+    (objStyles: Record<string, unknown>, [propertyStyle, valueStyle]) => {
+      let propertyStyleValue = tokensBase[propertyStyle as PropertyStyle<keyof typeof tokensBase>] as string;
+      let finalValueStyle = valueStyle;
+
+      const valueToken = getValuesTokens(theme, valueStyle?.toString());
+
+      if (!valueToken) {
+        finalValueStyle = validateProperties(valueStyle, propertyStyle, theme);
+      }
+
+      if (propertyStyle === 'fontWeight') {
+        propertyStyleValue = propertyStyle as PropertyStyle<keyof typeof tokensBase>;
+        finalValueStyle = theme.fontWeights[valueStyle as keyof Theme['fontWeights']] ?? valueStyle;
+      }
+
+      if (propertyStyle === 'fontSize') {
+        propertyStyleValue = propertyStyle as PropertyStyle<keyof typeof tokensBase>;
+        finalValueStyle = theme.fontSizes[valueStyle as keyof Theme['fontSizes']] ?? valueStyle;
+      }
+
+      if (propertyStyleValue) {
+        objStyles[propertyStyleValue] = valueToken ?? finalValueStyle;
+      }
+
+      return objStyles;
+    },
+    {},
+  );
+
+  return styles;
+};

packages/@blocks-system/src/styleFunction/styleFunctionSx.ts

@@ -0,0 +1,42 @@
+import { componentsKeys } from '@design-blocks/theme';
+
+import { getValuesTokens } from './getValuesTokens';
+import validateProperties from './validateProperties';
+
+import type { IComponentsKeysProps, Theme } from '@design-blocks/theme';
+import type { StylesObjectProps } from '@design-blocks/types';
+
+type PropertyStyle<TokensProperty> = TokensProperty;
+
+export const styleFunctionSx = (
+  nameTokenComponent: IComponentsKeysProps,
+  theme: Theme,
+  sxStyles: StylesObjectProps = {},
+) => {
+  const tokensBase = componentsKeys[nameTokenComponent];
+
+  const styles = Object.entries(sxStyles).reduce((objStyles: Record<string, unknown>, [propertyStyle, valueStyle]) => {
+    const propertyStyleValue = tokensBase[propertyStyle as PropertyStyle<keyof typeof tokensBase>];
+    let finalValueStyle = valueStyle;
+
+    const valueToken = getValuesTokens(theme, valueStyle?.toString());
+
+    if (!valueToken) {
+      finalValueStyle = validateProperties(valueStyle, propertyStyle, theme);
+    }
+
+    if (propertyStyle === 'fontWeight') {
+      finalValueStyle = theme.fontWeights[valueStyle as keyof Theme['fontWeights']] ?? valueStyle;
+    }
+
+    if (propertyStyle === 'fontSize') {
+      finalValueStyle = theme.fontSizes[valueStyle as keyof Theme['fontSizes']] ?? valueStyle;
+    }
+
+    objStyles[propertyStyleValue || propertyStyle] = valueToken ?? finalValueStyle;
+
+    return objStyles;
+  }, {});
+
+  return styles;
+};