From 2be9db1ffdfc3334ad91825be04636efa0376741 Mon Sep 17 00:00:00 2001 From: Jay Singh <140599484+mathdebate09@users.noreply.github.com> Date: Sun, 3 May 2026 09:27:38 +0530 Subject: [PATCH 1/2] refactor: rewrite types due to their redundant nature --- src/border/bdr.ts | 97 ++++----- src/{utils => constants}/colorList.ts | 0 src/constants/spacingScale.ts | 34 +++ src/effects/fx.ts | 8 +- src/flexbox/flex.ts | 284 +++++++++++++------------- src/index.ts | 9 + src/layout/aspect.ts | 14 +- src/layout/position.ts | 70 ++----- src/shadow/shadow.ts | 8 +- src/spacing/margin.ts | 39 +--- src/spacing/padding.ts | 39 +--- src/types/border.ts | 5 +- src/types/effects.ts | 10 +- src/types/flexbox.ts | 3 +- src/types/internal.ts | 9 + src/types/typography.ts | 7 +- src/typography/decoration.ts | 54 ++--- src/typography/text.ts | 85 ++++---- src/utils/styleSnippets.ts | 13 ++ 19 files changed, 382 insertions(+), 406 deletions(-) rename src/{utils => constants}/colorList.ts (100%) create mode 100644 src/constants/spacingScale.ts create mode 100644 src/types/internal.ts create mode 100644 src/utils/styleSnippets.ts diff --git a/src/border/bdr.ts b/src/border/bdr.ts index 68ddfb5..c41a49a 100644 --- a/src/border/bdr.ts +++ b/src/border/bdr.ts @@ -1,25 +1,26 @@ -import type { TextStyle } from 'react-native'; +import type { ViewStyle } from 'react-native'; import type { BorderStyles } from '../types/border'; -import colorList from '../utils/colorList'; +import colorList from '../constants/colorList'; +import { viewSnippet } from '../utils/styleSnippets'; const bdr: BorderStyles = { // Border color - color_: (value: string): TextStyle => ({ + color_: (value: string): ViewStyle => ({ borderColor: value, }), // Border width - w_: (value: number | string): TextStyle => ({ + w_: (value: number | string): ViewStyle => ({ borderWidth: Number(value), }), // Border style - solid: { borderStyle: 'solid' as TextStyle['borderStyle'] }, - dotted: { borderStyle: 'dotted' as TextStyle['borderStyle'] }, - dashed: { borderStyle: 'dashed' as TextStyle['borderStyle'] }, + solid: viewSnippet({ borderStyle: 'solid' }), + dotted: viewSnippet({ borderStyle: 'dotted' }), + dashed: viewSnippet({ borderStyle: 'dashed' }), // Border radius - rounded_: (value: number | string): TextStyle => ({ + rounded_: (value: number | string): ViewStyle => ({ borderRadius: Number(value), }), rounded_none: { borderRadius: 0 }, @@ -33,7 +34,7 @@ const bdr: BorderStyles = { rounded_full: { borderRadius: 9999 }, // Start radius - rounded_s_: (value: number | string): TextStyle => ({ + rounded_s_: (value: number | string): ViewStyle => ({ borderStartStartRadius: Number(value), borderEndStartRadius: Number(value), }), @@ -48,7 +49,7 @@ const bdr: BorderStyles = { rounded_s_full: { borderStartStartRadius: 9999, borderEndStartRadius: 9999 }, // End radius - rounded_e_: (value: number | string): TextStyle => ({ + rounded_e_: (value: number | string): ViewStyle => ({ borderStartEndRadius: Number(value), borderEndEndRadius: Number(value), }), @@ -63,7 +64,7 @@ const bdr: BorderStyles = { rounded_e_full: { borderStartEndRadius: 9999, borderEndEndRadius: 9999 }, // Top radius - rounded_t_: (value: number | string): TextStyle => ({ + rounded_t_: (value: number | string): ViewStyle => ({ borderTopLeftRadius: Number(value), borderTopRightRadius: Number(value), }), @@ -78,7 +79,7 @@ const bdr: BorderStyles = { rounded_t_full: { borderTopLeftRadius: 9999, borderTopRightRadius: 9999 }, // Right radius - rounded_r_: (value: number | string): TextStyle => ({ + rounded_r_: (value: number | string): ViewStyle => ({ borderTopRightRadius: Number(value), borderBottomRightRadius: Number(value), }), @@ -93,7 +94,7 @@ const bdr: BorderStyles = { rounded_r_full: { borderTopRightRadius: 9999, borderBottomRightRadius: 9999 }, // Bottom radius - rounded_b_: (value: number | string): TextStyle => ({ + rounded_b_: (value: number | string): ViewStyle => ({ borderBottomRightRadius: Number(value), borderBottomLeftRadius: Number(value), }), @@ -111,7 +112,7 @@ const bdr: BorderStyles = { }, // Left radius - rounded_l_: (value: number | string): TextStyle => ({ + rounded_l_: (value: number | string): ViewStyle => ({ borderTopLeftRadius: Number(value), borderBottomLeftRadius: Number(value), }), @@ -126,7 +127,7 @@ const bdr: BorderStyles = { rounded_l_full: { borderTopLeftRadius: 9999, borderBottomLeftRadius: 9999 }, // Start-Start radius - rounded_ss_: (value: number | string): TextStyle => ({ + rounded_ss_: (value: number | string): ViewStyle => ({ borderStartStartRadius: Number(value), }), rounded_ss_none: { borderStartStartRadius: 0 }, @@ -140,7 +141,7 @@ const bdr: BorderStyles = { rounded_ss_full: { borderStartStartRadius: 9999 }, // Start-End radius - rounded_se_: (value: number | string): TextStyle => ({ + rounded_se_: (value: number | string): ViewStyle => ({ borderStartEndRadius: Number(value), }), rounded_se_none: { borderStartEndRadius: 0 }, @@ -154,7 +155,7 @@ const bdr: BorderStyles = { rounded_se_full: { borderStartEndRadius: 9999 }, // End-End radius - rounded_ee_: (value: number | string): TextStyle => ({ + rounded_ee_: (value: number | string): ViewStyle => ({ borderEndEndRadius: Number(value), }), rounded_ee_none: { borderEndEndRadius: 0 }, @@ -168,7 +169,7 @@ const bdr: BorderStyles = { rounded_ee_full: { borderEndEndRadius: 9999 }, // End-Start radius - rounded_es_: (value: number | string): TextStyle => ({ + rounded_es_: (value: number | string): ViewStyle => ({ borderEndStartRadius: Number(value), }), rounded_es_none: { borderEndStartRadius: 0 }, @@ -182,7 +183,7 @@ const bdr: BorderStyles = { rounded_es_full: { borderEndStartRadius: 9999 }, // Top-Left radius - rounded_tl_: (value: number | string): TextStyle => ({ + rounded_tl_: (value: number | string): ViewStyle => ({ borderTopLeftRadius: Number(value), }), rounded_tl_none: { borderTopLeftRadius: 0 }, @@ -196,7 +197,7 @@ const bdr: BorderStyles = { rounded_tl_full: { borderTopLeftRadius: 9999 }, // Top-Right radius - rounded_tr_: (value: number | string): TextStyle => ({ + rounded_tr_: (value: number | string): ViewStyle => ({ borderTopRightRadius: Number(value), }), rounded_tr_none: { borderTopRightRadius: 0 }, @@ -210,7 +211,7 @@ const bdr: BorderStyles = { rounded_tr_full: { borderTopRightRadius: 9999 }, // Bottom-Right radius - rounded_br_: (value: number | string): TextStyle => ({ + rounded_br_: (value: number | string): ViewStyle => ({ borderBottomRightRadius: Number(value), }), rounded_br_none: { borderBottomRightRadius: 0 }, @@ -224,7 +225,7 @@ const bdr: BorderStyles = { rounded_br_full: { borderBottomRightRadius: 9999 }, // Bottom-left radius - rounded_bl_: (value: number | string): TextStyle => ({ + rounded_bl_: (value: number | string): ViewStyle => ({ borderBottomLeftRadius: Number(value), }), rounded_bl_none: { borderBottomLeftRadius: 0 }, @@ -238,55 +239,55 @@ const bdr: BorderStyles = { rounded_bl_full: { borderBottomLeftRadius: 9999 }, // Border bottom properties - b_color_: (value: string): TextStyle => ({ + b_color_: (value: string): ViewStyle => ({ borderBottomColor: value, }), - b_w_: (value: number | string): TextStyle => ({ + b_w_: (value: number | string): ViewStyle => ({ borderBottomWidth: Number(value), }), b_w: { borderBottomWidth: 1 }, // Border left properties - l_color_: (value: string): TextStyle => ({ + l_color_: (value: string): ViewStyle => ({ borderLeftColor: value, }), - l_w_: (value: number | string): TextStyle => ({ + l_w_: (value: number | string): ViewStyle => ({ borderLeftWidth: Number(value), }), l_w: { borderLeftWidth: 1 }, // Border right properties - r_color_: (value: string): TextStyle => ({ + r_color_: (value: string): ViewStyle => ({ borderRightColor: value, }), - r_w_: (value: number | string): TextStyle => ({ + r_w_: (value: number | string): ViewStyle => ({ borderRightWidth: Number(value), }), r_w: { borderRightWidth: 1 }, // Border top properties - t_color_: (value: string): TextStyle => ({ + t_color_: (value: string): ViewStyle => ({ borderTopColor: value, }), - t_w_: (value: number | string): TextStyle => ({ + t_w_: (value: number | string): ViewStyle => ({ borderTopWidth: Number(value), }), t_w: { borderTopWidth: 1 }, // Border start properties - s_color_: (value: string): TextStyle => ({ + s_color_: (value: string): ViewStyle => ({ borderStartColor: value, }), - s_w_: (value: number | string): TextStyle => ({ + s_w_: (value: number | string): ViewStyle => ({ borderStartWidth: Number(value), }), s_w: { borderStartWidth: 1 }, // Border end properties - e_color_: (value: string): TextStyle => ({ + e_color_: (value: string): ViewStyle => ({ borderEndColor: value, }), - e_w_: (value: number | string): TextStyle => ({ + e_w_: (value: number | string): ViewStyle => ({ borderEndWidth: Number(value), }), e_w: { borderEndWidth: 1 }, @@ -294,44 +295,44 @@ const bdr: BorderStyles = { // Dynamically add width properties for 1-5 properties for (let i = 1; i <= 5; i++) { - bdr[`w_${i}`] = { borderWidth: i } as TextStyle; - bdr[`b_w_${i}`] = { borderBottomWidth: i } as TextStyle; - bdr[`l_w_${i}`] = { borderLeftWidth: i } as TextStyle; - bdr[`r_w_${i}`] = { borderRightWidth: i } as TextStyle; - bdr[`t_w_${i}`] = { borderTopWidth: i } as TextStyle; - bdr[`s_w_${i}`] = { borderStartWidth: i } as TextStyle; - bdr[`e_w_${i}`] = { borderEndWidth: i } as TextStyle; + bdr[`w_${i}`] = { borderWidth: i }; + bdr[`b_w_${i}`] = { borderBottomWidth: i }; + bdr[`l_w_${i}`] = { borderLeftWidth: i }; + bdr[`r_w_${i}`] = { borderRightWidth: i }; + bdr[`t_w_${i}`] = { borderTopWidth: i }; + bdr[`s_w_${i}`] = { borderStartWidth: i }; + bdr[`e_w_${i}`] = { borderEndWidth: i }; } // Dynamically add color properties Object.keys(colorList).forEach((colorKey) => { bdr[`color_${colorKey}`] = { borderColor: colorList[colorKey], - } as TextStyle; + }; bdr[`b_color_${colorKey}`] = { borderBottomColor: colorList[colorKey], - } as TextStyle; + }; bdr[`l_color_${colorKey}`] = { borderLeftColor: colorList[colorKey], - } as TextStyle; + }; bdr[`r_color_${colorKey}`] = { borderRightColor: colorList[colorKey], - } as TextStyle; + }; bdr[`t_color_${colorKey}`] = { borderTopColor: colorList[colorKey], - } as TextStyle; + }; bdr[`s_color_${colorKey}`] = { borderStartColor: colorList[colorKey], - } as TextStyle; + }; bdr[`e_color_${colorKey}`] = { borderEndColor: colorList[colorKey], - } as TextStyle; + }; }); export default bdr; diff --git a/src/utils/colorList.ts b/src/constants/colorList.ts similarity index 100% rename from src/utils/colorList.ts rename to src/constants/colorList.ts diff --git a/src/constants/spacingScale.ts b/src/constants/spacingScale.ts new file mode 100644 index 0000000..4ee31b2 --- /dev/null +++ b/src/constants/spacingScale.ts @@ -0,0 +1,34 @@ +/** Tailwind-style spacing scale → pixel values (shared by padding, margin, position offsets). */ +export const spacingScale = { + '0': 0, + 'px': 1, + '1': 4, + '2': 8, + '3': 12, + '4': 16, + '5': 20, + '6': 24, + '7': 28, + '8': 32, + '9': 36, + '10': 40, + '11': 44, + '12': 48, + '14': 56, + '16': 64, + '20': 80, + '24': 96, + '28': 112, + '32': 128, + '36': 144, + '40': 160, + '44': 176, + '48': 192, + '52': 208, + '56': 224, + '60': 240, + '64': 256, + '72': 288, + '80': 320, + '96': 384, +} as const satisfies Record; diff --git a/src/effects/fx.ts b/src/effects/fx.ts index aef7ff5..1a92deb 100644 --- a/src/effects/fx.ts +++ b/src/effects/fx.ts @@ -1,4 +1,4 @@ -import colorList from '../utils/colorList'; +import colorList from '../constants/colorList'; import type { ViewStyle, ImageStyle } from 'react-native'; import type { BgStyles } from '../types/effects'; @@ -60,21 +60,21 @@ Array.from({ length: 10 }, (_, i) => i + 1).forEach((value) => { Object.keys(colorList).forEach((colorKey) => { fx[`bg_color_${colorKey}`] = { backgroundColor: colorList[colorKey], - } as ViewStyle; + }; }); // Dynamically add tint color properties from colorList Object.keys(colorList).forEach((colorKey) => { fx[`tint_${colorKey}`] = { tintColor: colorList[colorKey], - } as ImageStyle; + }; }); // Dynamically add overlay color properties from colorList Object.keys(colorList).forEach((colorKey) => { fx[`overlay_${colorKey}`] = { overlayColor: colorList[colorKey], - } as ViewStyle; + }; }); export default fx; diff --git a/src/flexbox/flex.ts b/src/flexbox/flex.ts index 77bd6c2..33aa8ea 100644 --- a/src/flexbox/flex.ts +++ b/src/flexbox/flex.ts @@ -6,15 +6,15 @@ const flex = { flex: Number(num), }), - f_1: { flex: 1 } as Flex, - f_2: { flex: 2 } as Flex, - f_3: { flex: 3 } as Flex, - f_4: { flex: 4 } as Flex, - f_5: { flex: 5 } as Flex, - f_6: { flex: 6 } as Flex, - f_7: { flex: 7 } as Flex, - f_8: { flex: 8 } as Flex, - f_9: { flex: 9 } as Flex, + f_1: { flex: 1 }, + f_2: { flex: 2 }, + f_3: { flex: 3 }, + f_4: { flex: 4 }, + f_5: { flex: 5 }, + f_6: { flex: 6 }, + f_7: { flex: 7 }, + f_8: { flex: 8 }, + f_9: { flex: 9 }, // Function to handle dynamic gap values gap_: (num: number | string = 0): Flex => ({ @@ -24,94 +24,94 @@ const flex = { // Gap properties gap_0: { gap: 0, - } as Flex, + }, gap_1: { gap: 4, - } as Flex, + }, gap_2: { gap: 8, - } as Flex, + }, gap_3: { gap: 12, - } as Flex, + }, gap_4: { gap: 16, - } as Flex, + }, gap_5: { gap: 20, - } as Flex, + }, gap_6: { gap: 24, - } as Flex, + }, gap_7: { gap: 28, - } as Flex, + }, gap_8: { gap: 32, - } as Flex, + }, gap_9: { gap: 36, - } as Flex, + }, gap_10: { gap: 40, - } as Flex, + }, gap_11: { gap: 44, - } as Flex, + }, gap_12: { gap: 48, - } as Flex, + }, gap_14: { gap: 56, - } as Flex, + }, gap_16: { gap: 64, - } as Flex, + }, gap_20: { gap: 80, - } as Flex, + }, gap_24: { gap: 96, - } as Flex, + }, gap_28: { gap: 112, - } as Flex, + }, gap_32: { gap: 128, - } as Flex, + }, gap_36: { gap: 144, - } as Flex, + }, gap_40: { gap: 160, - } as Flex, + }, gap_44: { gap: 176, - } as Flex, + }, gap_48: { gap: 192, - } as Flex, + }, gap_52: { gap: 208, - } as Flex, + }, gap_56: { gap: 224, - } as Flex, + }, gap_60: { gap: 240, - } as Flex, + }, gap_64: { gap: 256, - } as Flex, + }, gap_72: { gap: 288, - } as Flex, + }, gap_80: { gap: 320, - } as Flex, + }, gap_96: { gap: 384, - } as Flex, + }, // Function to handle dynamic row gap values gap_x_: (num: number | string = 0): Flex => ({ @@ -121,94 +121,94 @@ const flex = { // Row gap properties gap_x_0: { rowGap: 0, - } as Flex, + }, gap_x_1: { rowGap: 4, - } as Flex, + }, gap_x_2: { rowGap: 8, - } as Flex, + }, gap_x_3: { rowGap: 12, - } as Flex, + }, gap_x_4: { rowGap: 16, - } as Flex, + }, gap_x_5: { rowGap: 20, - } as Flex, + }, gap_x_6: { rowGap: 24, - } as Flex, + }, gap_x_7: { rowGap: 28, - } as Flex, + }, gap_x_8: { rowGap: 32, - } as Flex, + }, gap_x_9: { rowGap: 36, - } as Flex, + }, gap_x_10: { rowGap: 40, - } as Flex, + }, gap_x_11: { rowGap: 44, - } as Flex, + }, gap_x_12: { rowGap: 48, - } as Flex, + }, gap_x_14: { rowGap: 56, - } as Flex, + }, gap_x_16: { rowGap: 64, - } as Flex, + }, gap_x_20: { rowGap: 80, - } as Flex, + }, gap_x_24: { rowGap: 96, - } as Flex, + }, gap_x_28: { rowGap: 112, - } as Flex, + }, gap_x_32: { rowGap: 128, - } as Flex, + }, gap_x_36: { rowGap: 144, - } as Flex, + }, gap_x_40: { rowGap: 160, - } as Flex, + }, gap_x_44: { rowGap: 176, - } as Flex, + }, gap_x_48: { rowGap: 192, - } as Flex, + }, gap_x_52: { rowGap: 208, - } as Flex, + }, gap_x_56: { rowGap: 224, - } as Flex, + }, gap_x_60: { rowGap: 240, - } as Flex, + }, gap_x_64: { rowGap: 256, - } as Flex, + }, gap_x_72: { rowGap: 288, - } as Flex, + }, gap_x_80: { rowGap: 320, - } as Flex, + }, gap_x_96: { rowGap: 384, - } as Flex, + }, // Function to handle dynamic column gap values gap_y_: (num: number | string = 0): Flex => ({ @@ -218,135 +218,135 @@ const flex = { // Column gap properties gap_y_0: { columnGap: 0, - } as Flex, + }, gap_y_1: { columnGap: 4, - } as Flex, + }, gap_y_2: { columnGap: 8, - } as Flex, + }, gap_y_3: { columnGap: 12, - } as Flex, + }, gap_y_4: { columnGap: 16, - } as Flex, + }, gap_y_5: { columnGap: 20, - } as Flex, + }, gap_y_6: { columnGap: 24, - } as Flex, + }, gap_y_7: { columnGap: 28, - } as Flex, + }, gap_y_8: { columnGap: 32, - } as Flex, + }, gap_y_9: { columnGap: 36, - } as Flex, + }, gap_y_10: { columnGap: 40, - } as Flex, + }, gap_y_11: { columnGap: 44, - } as Flex, + }, gap_y_12: { columnGap: 48, - } as Flex, + }, gap_y_14: { columnGap: 56, - } as Flex, + }, gap_y_16: { columnGap: 64, - } as Flex, + }, gap_y_20: { columnGap: 80, - } as Flex, + }, gap_y_24: { columnGap: 96, - } as Flex, + }, gap_y_28: { columnGap: 112, - } as Flex, + }, gap_y_32: { columnGap: 128, - } as Flex, + }, gap_y_36: { columnGap: 144, - } as Flex, + }, gap_y_40: { columnGap: 160, - } as Flex, + }, gap_y_44: { columnGap: 176, - } as Flex, + }, gap_y_48: { columnGap: 192, - } as Flex, + }, gap_y_52: { columnGap: 208, - } as Flex, + }, gap_y_56: { columnGap: 224, - } as Flex, + }, gap_y_60: { columnGap: 240, - } as Flex, + }, gap_y_64: { columnGap: 256, - } as Flex, + }, gap_y_72: { columnGap: 288, - } as Flex, + }, gap_y_80: { columnGap: 320, - } as Flex, + }, gap_y_96: { columnGap: 384, - } as Flex, + }, // Flex direction properties row: { flexDirection: 'row', - } as Flex, + }, row_reverse: { flexDirection: 'row-reverse', - } as Flex, + }, col: { flexDirection: 'column', - } as Flex, + }, column_reverse: { flexDirection: 'column-reverse', - } as Flex, + }, // Flex grow properties grow: { flexGrow: 1, - } as Flex, + }, grow_0: { flexGrow: 0, - } as Flex, + }, // Flex shrink properties shrink: { flexShrink: 1, - } as Flex, + }, shrink_0: { flexShrink: 0, - } as Flex, + }, // Flex wrap properties wrap: { flexWrap: 'wrap', - } as Flex, + }, wrap_reverse: { flexWrap: 'wrap-reverse', - } as Flex, + }, nowrap: { flexWrap: 'nowrap', - } as Flex, + }, // Function to handle dynamic flex basis values basis_: (value: string | number = 'auto'): Flex => ({ @@ -356,100 +356,100 @@ const flex = { // Flex basis properties basis_0: { flexBasis: 0, - } as Flex, + }, basis_1: { flexBasis: 4, - } as Flex, + }, basis_2: { flexBasis: 8, - } as Flex, + }, basis_3: { flexBasis: 12, - } as Flex, + }, basis_4: { flexBasis: 16, - } as Flex, + }, basis_5: { flexBasis: 20, - } as Flex, + }, basis_6: { flexBasis: 24, - } as Flex, + }, basis_7: { flexBasis: 28, - } as Flex, + }, basis_8: { flexBasis: 32, - } as Flex, + }, basis_9: { flexBasis: 36, - } as Flex, + }, basis_10: { flexBasis: 40, - } as Flex, + }, basis_11: { flexBasis: 44, - } as Flex, + }, basis_12: { flexBasis: 48, - } as Flex, + }, basis_14: { flexBasis: 56, - } as Flex, + }, basis_16: { flexBasis: 64, - } as Flex, + }, basis_20: { flexBasis: 80, - } as Flex, + }, basis_24: { flexBasis: 96, - } as Flex, + }, basis_28: { flexBasis: 112, - } as Flex, + }, basis_32: { flexBasis: 128, - } as Flex, + }, basis_36: { flexBasis: 144, - } as Flex, + }, basis_40: { flexBasis: 160, - } as Flex, + }, basis_44: { flexBasis: 176, - } as Flex, + }, basis_48: { flexBasis: 192, - } as Flex, + }, basis_52: { flexBasis: 208, - } as Flex, + }, basis_56: { flexBasis: 224, - } as Flex, + }, basis_60: { flexBasis: 240, - } as Flex, + }, basis_64: { flexBasis: 256, - } as Flex, + }, basis_72: { flexBasis: 288, - } as Flex, + }, basis_80: { flexBasis: 320, - } as Flex, + }, basis_96: { flexBasis: 384, - } as Flex, + }, basis_auto: { flexBasis: 'auto', - } as Flex, + }, basis_px: { flexBasis: 1, - } as Flex, + }, }; export default flex; diff --git a/src/index.ts b/src/index.ts index 3433b89..1ec50a1 100644 --- a/src/index.ts +++ b/src/index.ts @@ -36,3 +36,12 @@ import text from './typography/text'; import decoration from './typography/decoration'; export { p, m, aspect, object_fit, display, direction, pos, z, overflow, flex, align, justify, place, bdr, fx, shadow, h, w, size, text, decoration }; + +export type { Padding, Margin } from './types/spacing'; +export type { Flex } from './types/flexbox'; +export type { AspectRatio, Direction, Display, SizeMode, PositionValue, PositionPreset } from './types/layout'; +export type { BorderStyles, BorderStyleFn } from './types/border'; +export type { ColoredTextStyle, TextStyleFn } from './types/typography'; +export type { BgStyles, BgStyleFn, ShadowStyles, ShadowStyleFn } from './types/effects'; +export type { DynamicArg, DynamicSingleFn, DynamicSpacingFn, DynamicStyleMap } from './types/maps'; +export type { VariadicStyleFn, StyleMap } from './types/internal'; diff --git a/src/layout/aspect.ts b/src/layout/aspect.ts index ee8fd9a..936485a 100644 --- a/src/layout/aspect.ts +++ b/src/layout/aspect.ts @@ -24,17 +24,15 @@ const getAspectRatioValue = (key: string | number): number | string => { return value; }; -const aspect = { - custom_: (key: string | number): AspectRatio => { - return { aspectRatio: getAspectRatioValue(key) }; - }, -} as { [key: string]: AspectRatio } & { - custom_: (key: string | number) => AspectRatio; +const aspect: Record AspectRatio)> = { + custom_: (key: string | number): AspectRatio => ({ + aspectRatio: getAspectRatioValue(key), + }), }; -Object.keys(aspectRatioValues).forEach((key) => { +for (const key of Object.keys(aspectRatioValues)) { aspect[key] = { aspectRatio: getAspectRatioValue(key) }; -}); +} // Example usage // const autoAspectRatio = aspect.auto; // { aspectRatio: 'auto' } diff --git a/src/layout/position.ts b/src/layout/position.ts index 4ef9a40..d6e6965 100644 --- a/src/layout/position.ts +++ b/src/layout/position.ts @@ -1,38 +1,20 @@ +import { spacingScale } from '../constants/spacingScale'; import type { PositionPreset, PositionValue } from '../types/layout'; -const positions: { [key: string]: number } = { - '0': 0, - 'px': 1, - '1': 4, - '2': 8, - '3': 12, - '4': 16, - '5': 20, - '6': 24, - '7': 28, - '8': 32, - '9': 36, - '10': 40, - '11': 44, - '12': 48, - '14': 56, - '16': 64, - '20': 80, - '24': 96, - '28': 112, - '32': 128, - '36': 144, - '40': 160, - '44': 176, - '48': 192, - '52': 208, - '56': 224, - '60': 240, - '64': 256, - '72': 288, - '80': 320, - '96': 384, -}; +const positionSpacing: Record = spacingScale; + +function presetTop(value: number): PositionValue { + return { top: value }; +} +function presetRight(value: number): PositionValue { + return { right: value }; +} +function presetBottom(value: number): PositionValue { + return { bottom: value }; +} +function presetLeft(value: number): PositionValue { + return { left: value }; +} type PositionFn = (value: number | string) => PositionValue; type PositionToken = PositionValue | PositionPreset | PositionFn; @@ -67,22 +49,12 @@ const pos: Record & { }, }; -Object.keys(positions).forEach((posKey) => { - pos[`t_${posKey}`] = { - top: positions[posKey], - } as PositionValue; - - pos[`r_${posKey}`] = { - right: positions[posKey], - } as PositionValue; - - pos[`b_${posKey}`] = { - bottom: positions[posKey], - } as PositionValue; - - pos[`l_${posKey}`] = { - left: positions[posKey], - } as PositionValue; +Object.keys(positionSpacing).forEach((posKey) => { + const n = positionSpacing[posKey]; + pos[`t_${posKey}`] = presetTop(n); + pos[`r_${posKey}`] = presetRight(n); + pos[`b_${posKey}`] = presetBottom(n); + pos[`l_${posKey}`] = presetLeft(n); }); // Example usage diff --git a/src/shadow/shadow.ts b/src/shadow/shadow.ts index ce777b8..ad931a7 100644 --- a/src/shadow/shadow.ts +++ b/src/shadow/shadow.ts @@ -1,5 +1,5 @@ import type { ViewStyle } from 'react-native'; -import colorList from '../utils/colorList'; +import colorList from '../constants/colorList'; import type { ShadowStyles } from '../types/effects'; const shadow: ShadowStyles = { @@ -40,19 +40,19 @@ const shadow: ShadowStyles = { for (let i = 1; i <= 5; i++) { shadow[`offset_${i}`] = { shadowOffset: { width: i, height: i }, - } as ViewStyle; + }; } // Dynamically add opacity properties for 1-24 levels for (let i = 1; i <= 24; i++) { - shadow[`opacity_${i}`] = { shadowOpacity: i } as ViewStyle; + shadow[`opacity_${i}`] = { shadowOpacity: i }; } // Dynamically add color properties Object.keys(colorList).forEach((colorKey) => { shadow[`color_${colorKey}`] = { shadowColor: colorList[colorKey], - } as ViewStyle; + }; }); export default shadow; diff --git a/src/spacing/margin.ts b/src/spacing/margin.ts index 772ef31..6dd5f72 100644 --- a/src/spacing/margin.ts +++ b/src/spacing/margin.ts @@ -1,44 +1,13 @@ +import { spacingScale } from '../constants/spacingScale'; import type { Margin } from '../types/spacing'; import type { DynamicArg, DynamicStyleMap } from '../types/maps'; -const marginValues: { [key: string]: number } = { - '0': 0, - 'px': 1, - '1': 4, - '2': 8, - '3': 12, - '4': 16, - '5': 20, - '6': 24, - '7': 28, - '8': 32, - '9': 36, - '10': 40, - '11': 44, - '12': 48, - '14': 56, - '16': 64, - '20': 80, - '24': 96, - '28': 112, - '32': 128, - '36': 144, - '40': 160, - '44': 176, - '48': 192, - '52': 208, - '56': 224, - '60': 240, - '64': 256, - '72': 288, - '80': 320, - '96': 384, -}; +const marginLookup: Record = spacingScale; const getMarginValue = (key: string | number): number | 'auto' => { if (typeof key === 'number') return key; if (key === 'auto') return 'auto'; - const value = marginValues[key] ?? parseInt(key, 10); + const value = marginLookup[key] ?? parseInt(key, 10); if (isNaN(value)) throw new Error(`Invalid margin key: ${key}`); return value; }; @@ -72,7 +41,7 @@ const generateMargin = (type: string, key: string | number): Margin => { // prettier-ignore const m: DynamicStyleMap = {}; -const allMarginKeys = [...Object.keys(marginValues), 'auto']; +const allMarginKeys = [...Object.keys(marginLookup), 'auto']; allMarginKeys.forEach((key) => { ['m', 'mx', 'my', 'mt', 'mr', 'mb', 'ml', 'ms', 'me'].forEach((type) => { diff --git a/src/spacing/padding.ts b/src/spacing/padding.ts index d683440..b38ca85 100644 --- a/src/spacing/padding.ts +++ b/src/spacing/padding.ts @@ -1,44 +1,13 @@ +import { spacingScale } from '../constants/spacingScale'; import type { Padding } from '../types/spacing'; import type { DynamicArg, DynamicStyleMap } from '../types/maps'; -const paddingValues: { [key: string]: number } = { - '0': 0, - 'px': 1, - '1': 4, - '2': 8, - '3': 12, - '4': 16, - '5': 20, - '6': 24, - '7': 28, - '8': 32, - '9': 36, - '10': 40, - '11': 44, - '12': 48, - '14': 56, - '16': 64, - '20': 80, - '24': 96, - '28': 112, - '32': 128, - '36': 144, - '40': 160, - '44': 176, - '48': 192, - '52': 208, - '56': 224, - '60': 240, - '64': 256, - '72': 288, - '80': 320, - '96': 384, -}; +const paddingLookup: Record = spacingScale; const getPaddingValue = (key: string | number): number | 'auto' => { if (typeof key === 'number') return key; if (key === 'auto') return 'auto'; - const value = paddingValues[key] ?? parseInt(key, 10); + const value = paddingLookup[key] ?? parseInt(key, 10); if (isNaN(value)) throw new Error(`Invalid padding key: ${key}`); return value; }; @@ -72,7 +41,7 @@ const generatePadding = (type: string, key: string | number): Padding => { // prettier-ignore const p: DynamicStyleMap = {}; -const allPaddingKeys = [...Object.keys(paddingValues), 'auto']; +const allPaddingKeys = [...Object.keys(paddingLookup), 'auto']; allPaddingKeys.forEach((key) => { ['p', 'px', 'py', 'pt', 'pr', 'pb', 'pl', 'ps', 'pe'].forEach((type) => { diff --git a/src/types/border.ts b/src/types/border.ts index 59dfd85..ca6da6f 100644 --- a/src/types/border.ts +++ b/src/types/border.ts @@ -1,8 +1,7 @@ import type { TextStyle, ViewStyle } from 'react-native'; +import type { VariadicStyleFn } from './internal'; -type BorderStyleFn = { - bivarianceHack(...args: Array): ViewStyle | TextStyle; -}['bivarianceHack']; +export type BorderStyleFn = VariadicStyleFn; export interface BorderStyles { [key: string]: ViewStyle | TextStyle | BorderStyleFn; diff --git a/src/types/effects.ts b/src/types/effects.ts index 9b656aa..0e5d1bb 100644 --- a/src/types/effects.ts +++ b/src/types/effects.ts @@ -1,12 +1,8 @@ import type { ViewStyle, ImageStyle } from 'react-native'; +import type { VariadicStyleFn } from './internal'; -type BgStyleFn = { - bivarianceHack(...args: Array): ViewStyle | ImageStyle; -}['bivarianceHack']; - -type ShadowStyleFn = { - bivarianceHack(...args: Array): ViewStyle; -}['bivarianceHack']; +export type BgStyleFn = VariadicStyleFn; +export type ShadowStyleFn = VariadicStyleFn; export interface BgStyles { [key: string]: ViewStyle | ImageStyle | BgStyleFn; diff --git a/src/types/flexbox.ts b/src/types/flexbox.ts index fb490f4..cfdcdb1 100644 --- a/src/types/flexbox.ts +++ b/src/types/flexbox.ts @@ -1,3 +1,4 @@ import type { ViewStyle } from 'react-native'; -export type Flex = Pick; +/** Fragment of ViewStyle consumed by flex utilities — partial so plain literals type-check without assertions. */ +export type Flex = Partial>; diff --git a/src/types/internal.ts b/src/types/internal.ts new file mode 100644 index 0000000..a284878 --- /dev/null +++ b/src/types/internal.ts @@ -0,0 +1,9 @@ +/** + * Function type assignable from `(a: X) => R` implementations used in dynamic style maps. + * Uses TS bivariance trick so concrete handlers with narrower parameters still type-check. + */ +export type VariadicStyleFn = { + bivarianceHack(...args: Array): TResult; +}['bivarianceHack']; + +export type StyleMap = Record>; diff --git a/src/types/typography.ts b/src/types/typography.ts index 416453b..586472e 100644 --- a/src/types/typography.ts +++ b/src/types/typography.ts @@ -1,9 +1,8 @@ import type { TextStyle } from 'react-native'; +import type { VariadicStyleFn } from './internal'; -type TextStyleFn = { - bivarianceHack(...args: Array): TextStyle; -}['bivarianceHack']; +export type TextStyleFn = VariadicStyleFn; -export interface ColuredTextStyle { +export interface ColoredTextStyle { [key: string]: TextStyle | TextStyleFn; } diff --git a/src/typography/decoration.ts b/src/typography/decoration.ts index d298cb4..a42311e 100644 --- a/src/typography/decoration.ts +++ b/src/typography/decoration.ts @@ -1,34 +1,38 @@ import type { TextStyle } from 'react-native'; -import colorList from '../utils/colorList'; +import colorList from '../constants/colorList'; +import type { VariadicStyleFn } from '../types/internal'; +import { textSnippet } from '../utils/styleSnippets'; -const decoration: { - [key: string]: TextStyle | ((color: string) => TextStyle); +type DecorationFn = VariadicStyleFn; + +const decoration: Record & { + color_: DecorationFn; } = { // Text decoration line - underline: { - textDecorationLine: 'underline' as TextStyle['textDecorationLine'], - }, - line_through: { - textDecorationLine: 'line-through' as TextStyle['textDecorationLine'], - }, - underline_line_through: { - textDecorationLine: 'underline line-through' as TextStyle['textDecorationLine'], - }, - none: { textDecorationLine: 'none' as TextStyle['textDecorationLine'] }, + underline: textSnippet({ + textDecorationLine: 'underline', + }), + line_through: textSnippet({ + textDecorationLine: 'line-through', + }), + underline_line_through: textSnippet({ + textDecorationLine: 'underline line-through', + }), + none: textSnippet({ textDecorationLine: 'none' }), // Text decoration style - solid: { - /*ios*/ textDecorationStyle: 'solid' as TextStyle['textDecorationStyle'], - }, - double: { - /*ios*/ textDecorationStyle: 'double' as TextStyle['textDecorationStyle'], - }, - dotted: { - /*ios*/ textDecorationStyle: 'dotted' as TextStyle['textDecorationStyle'], - }, - dashed: { - /*ios*/ textDecorationStyle: 'dashed' as TextStyle['textDecorationStyle'], - }, + solid: textSnippet({ + /*ios*/ textDecorationStyle: 'solid', + }), + double: textSnippet({ + /*ios*/ textDecorationStyle: 'double', + }), + dotted: textSnippet({ + /*ios*/ textDecorationStyle: 'dotted', + }), + dashed: textSnippet({ + /*ios*/ textDecorationStyle: 'dashed', + }), // Text decoration color (iOS) color_: (color: string): TextStyle => ({ diff --git a/src/typography/text.ts b/src/typography/text.ts index 2f1f5e8..3a94354 100644 --- a/src/typography/text.ts +++ b/src/typography/text.ts @@ -1,8 +1,9 @@ import type { TextStyle } from 'react-native'; -import type { ColuredTextStyle } from '../types/typography'; -import colorList from '../utils/colorList'; +import type { ColoredTextStyle } from '../types/typography'; +import colorList from '../constants/colorList'; +import { textSnippet } from '../utils/styleSnippets'; -const text: ColuredTextStyle = { +const text: ColoredTextStyle = { // color color_: (value: string): TextStyle => ({ color: value, @@ -29,40 +30,42 @@ const text: ColuredTextStyle = { fs_9xl: { fontSize: 128, lineHeight: 128 }, // Font styles - italic: { fontStyle: 'italic' as TextStyle['fontStyle'] }, - non_italic: { fontStyle: 'normal' as TextStyle['fontStyle'] }, + italic: textSnippet({ fontStyle: 'italic' }), + non_italic: textSnippet({ fontStyle: 'normal' }), // Font weights - fw_thin: { fontWeight: '100' as TextStyle['fontWeight'] }, - fw_extralight: { fontWeight: '200' as TextStyle['fontWeight'] }, - fw_light: { fontWeight: '300' as TextStyle['fontWeight'] }, - fw_normal: { fontWeight: '400' as TextStyle['fontWeight'] }, - fw_medium: { fontWeight: '500' as TextStyle['fontWeight'] }, - fw_semibold: { fontWeight: '600' as TextStyle['fontWeight'] }, - fw_bold: { fontWeight: '700' as TextStyle['fontWeight'] }, - fw_extrabold: { fontWeight: '800' as TextStyle['fontWeight'] }, - fw_black: { fontWeight: '900' as TextStyle['fontWeight'] }, + fw_thin: textSnippet({ fontWeight: '100' }), + fw_extralight: textSnippet({ fontWeight: '200' }), + fw_light: textSnippet({ fontWeight: '300' }), + fw_normal: textSnippet({ fontWeight: '400' }), + fw_medium: textSnippet({ fontWeight: '500' }), + fw_semibold: textSnippet({ fontWeight: '600' }), + fw_bold: textSnippet({ fontWeight: '700' }), + fw_extrabold: textSnippet({ fontWeight: '800' }), + fw_black: textSnippet({ fontWeight: '900' }), // Font variants - smallcaps: { - /*ios*/ fontVariant: ['small-caps'] as TextStyle['fontVariant'], - }, - oldstyle: { - /*ios*/ fontVariant: ['oldstyle-nums'] as TextStyle['fontVariant'], - }, - lining: { /*ios*/ fontVariant: ['lining-nums'] as TextStyle['fontVariant'] }, - tabular: { - /*ios*/ fontVariant: ['tabular-nums'] as TextStyle['fontVariant'], - }, - proportional: { - /*ios*/ fontVariant: ['proportional-nums'] as TextStyle['fontVariant'], - }, + smallcaps: textSnippet({ + /*ios*/ fontVariant: ['small-caps'], + }), + oldstyle: textSnippet({ + /*ios*/ fontVariant: ['oldstyle-nums'], + }), + lining: textSnippet({ + /*ios*/ fontVariant: ['lining-nums'], + }), + tabular: textSnippet({ + /*ios*/ fontVariant: ['tabular-nums'], + }), + proportional: textSnippet({ + /*ios*/ fontVariant: ['proportional-nums'], + }), // Text transforms - none: { textTransform: 'none' as TextStyle['textTransform'] }, - uppercase: { textTransform: 'uppercase' as TextStyle['textTransform'] }, - lowercase: { textTransform: 'lowercase' as TextStyle['textTransform'] }, - capitalize: { textTransform: 'capitalize' as TextStyle['textTransform'] }, + none: textSnippet({ textTransform: 'none' }), + uppercase: textSnippet({ textTransform: 'uppercase' }), + lowercase: textSnippet({ textTransform: 'lowercase' }), + capitalize: textSnippet({ textTransform: 'capitalize' }), // Letter spacing tracking_tighter: { /*ios*/ letterSpacing: -2 }, @@ -73,11 +76,11 @@ const text: ColuredTextStyle = { tracking_widest: { /*ios*/ letterSpacing: 3 }, // Text alignment - auto: { textAlign: 'auto' as TextStyle['textAlign'] }, - left: { textAlign: 'left' as TextStyle['textAlign'] }, - right: { textAlign: 'right' as TextStyle['textAlign'] }, - center: { textAlign: 'center' as TextStyle['textAlign'] }, - justify: { textAlign: 'justify' as TextStyle['textAlign'] }, + auto: textSnippet({ textAlign: 'auto' }), + left: textSnippet({ textAlign: 'left' }), + right: textSnippet({ textAlign: 'right' }), + center: textSnippet({ textAlign: 'center' }), + justify: textSnippet({ textAlign: 'justify' }), // Text shadow shadow_color_: (color: string): TextStyle => ({ @@ -93,11 +96,11 @@ const text: ColuredTextStyle = { }), // User select - select_auto: { userSelect: 'auto' as TextStyle['userSelect'] }, - select_text: { userSelect: 'text' as TextStyle['userSelect'] }, - select_none: { userSelect: 'none' as TextStyle['userSelect'] }, - select_contain: { userSelect: 'contain' as TextStyle['userSelect'] }, - select_all: { userSelect: 'all' as TextStyle['userSelect'] }, + select_auto: textSnippet({ userSelect: 'auto' }), + select_text: textSnippet({ userSelect: 'text' }), + select_none: textSnippet({ userSelect: 'none' }), + select_contain: textSnippet({ userSelect: 'contain' }), + select_all: textSnippet({ userSelect: 'all' }), }; // Dynamically add color properties diff --git a/src/utils/styleSnippets.ts b/src/utils/styleSnippets.ts new file mode 100644 index 0000000..0a1748e --- /dev/null +++ b/src/utils/styleSnippets.ts @@ -0,0 +1,13 @@ +import type { ImageStyle, TextStyle, ViewStyle } from 'react-native'; + +export function textSnippet(s: T): T { + return s; +} + +export function viewSnippet(s: T): T { + return s; +} + +export function imageSnippet(s: T): T { + return s; +} From 8675131344ab5d5519d079fc91733e71439f2b86 Mon Sep 17 00:00:00 2001 From: Jay Singh <140599484+mathdebate09@users.noreply.github.com> Date: Sun, 3 May 2026 09:32:30 +0530 Subject: [PATCH 2/2] fix: readme && keywords --- README.md | 2 -- package.json | 29 +++++++++++++++++++++++++++++ 2 files changed, 29 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index 43a239f..e462b65 100644 --- a/README.md +++ b/README.md @@ -48,5 +48,3 @@ See the [contributing guide](CONTRIBUTING.md) to learn how to contribute to the [![ko-fi](./assets/badges/kofi.svg)](https://ko-fi.com/Z8Z113CQW5) [![paypal](./assets/badges/paypal.svg)](https://www.paypal.me/jayowiee/) [![patreon](./assets/badges/patreon.svg)](https://patreon.com/nativeflow) - -> Made with ♥ using [create-react-native-library](https://github.com/callstack/react-native-builder-bob) diff --git a/package.json b/package.json index 0aeed46..be6bf44 100644 --- a/package.json +++ b/package.json @@ -36,6 +36,35 @@ "release:minor": "release-it minor", "release:major": "release-it major" }, + "keywords": [ + "react-native", + "tailwind-css", + "utility-first", + "css-in-js", + "no-babel", + "easy-setup", + "one-package", + "ui-library", + "mobile-ui", + "cross-platform", + "ios", + "android", + "flexbox", + "minimalist", + "tailwind", + "responsive", + "design-system", + "native", + "styling", + "lightweight", + "performance", + "customizable", + "theme", + "mobile-first", + "react-native-styling", + "react-native-tailwind", + "react-native-utility" + ], "repository": { "type": "git", "url": "git+https://github.com/nativeflowteam/nativeflowcss.git"