Fix: Type safety bugs

package.json

@@ -3,17 +3,18 @@
   "version": "1.3.0",
   "description": "A utility-first styling objects for React Native, syntax similar to Tailwind.",
   "source": "./src/index.ts",
-  "main": "./lib/commonjs/index.js",
-  "module": "./lib/module/index.js",
+  "main": "./lib/index.cjs",
+  "module": "./lib/index.js",
+  "types": "./lib/index.d.ts",
   "exports": {
     ".": {
       "import": {
-        "types": "./lib/typescript/module/src/index.d.ts",
-        "default": "./lib/module/index.js"
+        "types": "./lib/index.d.ts",
+        "default": "./lib/index.js"
       },
       "require": {
-        "types": "./lib/typescript/commonjs/src/index.d.ts",
-        "default": "./lib/commonjs/index.js"
+        "types": "./lib/index.d.cts",
+        "default": "./lib/index.cjs"
       }
     }
   },
@@ -31,11 +32,13 @@
     "test": "jest",
     "clean": "del-cli lib",
     "prepare": "npm run build",
-    "release": "release-it"
+    "release:patch": "release-it patch",
+    "release:minor": "release-it minor",
+    "release:major": "release-it major"
   },
   "repository": {
     "type": "git",
-    "url": "git+https://github.com/nativeflowteam/nativeflowcss"
+    "url": "git+https://github.com/nativeflowteam/nativeflowcss.git"
   },
   "author": "Jay Singh <work.jayssingh@gmail.com> (https://github.com/nativeflowteam)",
   "license": "MIT",
@@ -76,6 +79,10 @@
     }
   },
   "type": "module",
+  "peerDependencies": {
+    "react": "*",
+    "react-native": "*"
+  },
   "devDependencies": {
     "@commitlint/config-conventional": "^20.5.3",
     "@evilmartians/lefthook": "^2.1.6",

src/layout/position.ts

@@ -1,4 +1,4 @@
-import type { PositionValue } from '../types/layout';
+import type { PositionPreset, PositionValue } from '../types/layout';
 
 const positions: { [key: string]: number } = {
   '0': 0,
@@ -34,13 +34,18 @@ const positions: { [key: string]: number } = {
   '96': 384,
 };
 
-// Now explicitly include the custom methods and the index signature for dynamically generated properties
-const pos: {
-  relative: { position: string };
-  absolute: { position: string };
-  fixed: { position: string };
-  sticky: { position: string };
-  [key: string]: PositionValue | { position: string } | ((value: number) => PositionValue);
+type PositionFn = (value: number | string) => PositionValue;
+type PositionToken = PositionValue | PositionPreset | PositionFn;
+
+const pos: Record<string, PositionToken> & {
+  relative: PositionPreset;
+  absolute: PositionPreset;
+  fixed: PositionPreset;
+  sticky: PositionPreset;
+  r_: PositionFn;
+  t_: PositionFn;
+  l_: PositionFn;
+  b_: PositionFn;
 } = {
   // Position properties
   relative: { position: 'relative' },
@@ -51,13 +56,13 @@ const pos: {
   r_(value: number | string): PositionValue {
     return { right: Number(value) };
   },
-  t_(value: number): PositionValue {
+  t_(value: number | string): PositionValue {
     return { top: Number(value) };
   },
-  l_(value: number): PositionValue {
+  l_(value: number | string): PositionValue {
     return { left: Number(value) };
   },
-  b_(value: number): PositionValue {
+  b_(value: number | string): PositionValue {
     return { bottom: Number(value) };
   },
 };

src/spacing/margin.ts

@@ -1,4 +1,5 @@
 import type { Margin } from '../types/spacing';
+import type { DynamicArg, DynamicStyleMap } from '../types/maps';
 
 const marginValues: { [key: string]: number } = {
   '0': 0,
@@ -69,7 +70,7 @@ const generateMargin = (type: string, key: string | number): Margin => {
 };
 
 // prettier-ignore
-const m: Record<string, Margin | ((...keys: Array<string | number>) => Margin)> = {};
+const m: DynamicStyleMap<Margin> = {};
 
 const allMarginKeys = [...Object.keys(marginValues), 'auto'];
 
@@ -81,7 +82,7 @@ allMarginKeys.forEach((key) => {
 
 ['m', 'mx', 'my', 'mt', 'mr', 'mb', 'ml', 'ms', 'me'].forEach((type) => {
   if (type === 'm') {
-    m[`${type}_`] = (...keys: Array<string | number>): Margin => {
+    m[`${type}_`] = (...keys: Array<DynamicArg>): Margin => {
       if (keys.length === 1) return generateMargin(type, keys[0]);
       if (keys.length === 2) {
         const vertical = getMarginValue(keys[0]);
@@ -105,7 +106,7 @@ allMarginKeys.forEach((key) => {
     return;
   }
 
-  m[`${type}_`] = (key: string | number): Margin => generateMargin(type, key);
+  m[`${type}_`] = (key: DynamicArg): Margin => generateMargin(type, key);
 });
 
 // Example usage

src/spacing/padding.ts

@@ -1,4 +1,5 @@
 import type { Padding } from '../types/spacing';
+import type { DynamicArg, DynamicStyleMap } from '../types/maps';
 
 const paddingValues: { [key: string]: number } = {
   '0': 0,
@@ -69,7 +70,7 @@ const generatePadding = (type: string, key: string | number): Padding => {
 };
 
 // prettier-ignore
-const p: Record<string, Padding | ((...keys: Array<string | number>) => Padding)> = {};
+const p: DynamicStyleMap<Padding> = {};
 
 const allPaddingKeys = [...Object.keys(paddingValues), 'auto'];
 
@@ -81,7 +82,7 @@ allPaddingKeys.forEach((key) => {
 
 ['p', 'px', 'py', 'pt', 'pr', 'pb', 'pl', 'ps', 'pe'].forEach((type) => {
   if (type === 'p') {
-    p[`${type}_`] = (...keys: Array<string | number>): Padding => {
+    p[`${type}_`] = (...keys: Array<DynamicArg>): Padding => {
       if (keys.length === 1) return generatePadding(type, keys[0]);
       if (keys.length === 2) {
         const vertical = getPaddingValue(keys[0]);
@@ -105,7 +106,7 @@ allPaddingKeys.forEach((key) => {
     return;
   }
 
-  p[`${type}_`] = (key: string | number): Padding => generatePadding(type, key);
+  p[`${type}_`] = (key: DynamicArg): Padding => generatePadding(type, key);
 });
 
 // Example usage

src/types/border.ts

@@ -1,9 +1,9 @@
-import type { TextStyle } from 'react-native';
+import type { TextStyle, ViewStyle } from 'react-native';
 
 type BorderStyleFn = {
-  bivarianceHack(...args: Array<string | number>): TextStyle;
+  bivarianceHack(...args: Array<string | number>): ViewStyle | TextStyle;
 }['bivarianceHack'];
 
 export interface BorderStyles {
-  [key: string]: TextStyle | BorderStyleFn;
+  [key: string]: ViewStyle | TextStyle | BorderStyleFn;
 }

src/types/flexbox.ts

@@ -1,13 +1,3 @@
-export type Flex = {
-  flex?: number;
-  gap?: number;
-  flexWrap?: string;
-  alignContent?: string;
-  alignSelf?: string;
-  flexDirection?: string;
-  flexGrow?: number;
-  flexShrink?: number;
-  flexBasis?: number | 'auto';
-  rowGap?: number;
-  columnGap?: number;
-};
+import type { ViewStyle } from 'react-native';
+
+export type Flex = Pick<ViewStyle, 'flex' | 'gap' | 'flexWrap' | 'alignContent' | 'alignSelf' | 'flexDirection' | 'flexGrow' | 'flexShrink' | 'flexBasis' | 'rowGap' | 'columnGap'>;

src/types/layout.ts

@@ -1,15 +1,15 @@
-export type AspectRatio = {
-  aspectRatio: number | string;
-};
+import type { ImageStyle, ViewStyle } from 'react-native';
 
-export type Direction = {
-  direction: 'inherit' | 'ltr' | 'rtl';
-};
+export type AspectRatio = Pick<ViewStyle, 'aspectRatio'>;
 
-export type Display = {
-  display: 'none' | 'flex';
-};
+export type Direction = Pick<ViewStyle, 'direction'>;
 
-export type SizeMode = 'cover' | 'contain' | 'stretch' | 'repeat' | 'center' | 'fill' | 'scale_down';
+export type Display = Pick<ViewStyle, 'display'>;
 
-export type PositionValue = { [key: string]: number | string };
+export type SizeMode = NonNullable<ImageStyle['resizeMode']> | 'fill' | 'scale_down';
+
+export type PositionValue = Partial<Pick<ViewStyle, 'top' | 'right' | 'bottom' | 'left'>>;
+
+export type PositionPreset = {
+  position: NonNullable<ViewStyle['position']> | 'fixed' | 'sticky';
+};

src/types/maps.ts

@@ -0,0 +1,11 @@
+export type DynamicArg = string | number;
+
+export type DynamicSingleFn<TStyle> = (value: DynamicArg) => TStyle;
+
+export type DynamicSpacingFn<TStyle> = {
+  (all: DynamicArg): TStyle;
+  (vertical: DynamicArg, horizontal: DynamicArg): TStyle;
+  (top: DynamicArg, right: DynamicArg, bottom: DynamicArg, left: DynamicArg): TStyle;
+};
+
+export type DynamicStyleMap<TStyle> = Record<string, TStyle | DynamicSingleFn<TStyle> | DynamicSpacingFn<TStyle>>;

src/types/spacing.ts

@@ -1,23 +1,5 @@
-export type Padding = {
-  padding?: number | 'auto';
-  paddingTop?: number | 'auto';
-  paddingBottom?: number | 'auto';
-  paddingLeft?: number | 'auto';
-  paddingRight?: number | 'auto';
-  paddingHorizontal?: number | 'auto';
-  paddingVertical?: number | 'auto';
-  paddingStart?: number | 'auto';
-  paddingEnd?: number | 'auto';
-};
+import type { ViewStyle } from 'react-native';
 
-export type Margin = {
-  margin?: number | 'auto';
-  marginTop?: number | 'auto';
-  marginBottom?: number | 'auto';
-  marginLeft?: number | 'auto';
-  marginRight?: number | 'auto';
-  marginHorizontal?: number | 'auto';
-  marginVertical?: number | 'auto';
-  marginStart?: number | 'auto';
-  marginEnd?: number | 'auto';
-};
+export type Padding = Pick<ViewStyle, 'padding' | 'paddingTop' | 'paddingBottom' | 'paddingLeft' | 'paddingRight' | 'paddingHorizontal' | 'paddingVertical' | 'paddingStart' | 'paddingEnd'>;
+
+export type Margin = Pick<ViewStyle, 'margin' | 'marginTop' | 'marginBottom' | 'marginLeft' | 'marginRight' | 'marginHorizontal' | 'marginVertical' | 'marginStart' | 'marginEnd'>;