import { DimensionValue, FlatList, ImageStyle, Pressable, ScrollView, TextProps, TextStyle, View, ViewStyle } from "react-native"; import { KeysOfUnion } from "type-fest"; import { Breakpoints, ColorPallete, FontWeights } from "./constants"; /** * Type representing a color in RGB format. * Example: rgb(255, 255, 255) */ type RGBColor = `rgb(${number}, ${number}, ${number})` | `rgb(${number},${number},${number})`; /** * Type representing a color in RGBA format. * Example: rgba(255, 255, 255, 0.5) */ type RGBAColor = `rgba(${number}, ${number}, ${number}, ${number})` | `rgba(${number},${number},${number},${number})`; /** * Type representing a color in HEX format. * Example: #FFFFFF */ type HEXColor = `#${string}`; /** * Type representing a color in HSL format. * Example: hsl(0, 100%, 50%) */ type HSLColor = `hsl(${number}, ${number}, ${number})`; /** * Type representing a color in HSLA format. * Example: hsla(0, 100%, 50%, 0.5) */ type HSLAColor = `hsla(${number}, ${number}, ${number}, ${number})`; /** * Type representing a color range. */ type ColorRange = 100 | 150 | 200 | 250 | 300 | 350 | 400 | 450 | 500 | 550 | 600 | 650 | 700 | 750 | 800 | 850 | 900; /** * Type representing a declarative color. * Can be in RGB, RGBA, HEX, HSL, or HSLA format, * or reference a color from a predefined palette. */ type DeclarativeColor = `${ColorPalleteKey}.${ColorRange}` | `${ColorPalleteKey}`; /** * Union type representing various types of colors. */ export type TypedColor = RGBColor | RGBAColor | HEXColor | HSLColor | HSLAColor | DeclarativeColor; /** * Type defining all the optional media queries you can apply to a given component. */ export type WithMediaQuery = T & { "@ios"?: T & WithMediaQuery; "@android"?: T & WithMediaQuery; "@windows"?: T & WithMediaQuery; "@macos"?: T & WithMediaQuery; "@web"?: T & WithMediaQuery; "@light"?: T & WithMediaQuery; "@dark"?: T & WithMediaQuery; } & { [key in `@${BreakpointsKey}`]?: T & WithMediaQuery; }; /** * Type representing styles with typed properties for common attributes. */ export type Style = PatchProps; /** * Typography properties type. */ export type TypographyProps = { fontSize?: TypedDimension; fontWeight?: 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | "100" | "200" | "300" | "400" | "500" | "600" | "700" | "800" | FontWeightKey; }; /** * Spacing properties type. */ export type SpacingProps = { padding?: TypedDimension; paddingVertical?: TypedDimension; paddingHorizontal?: TypedDimension; paddingTop?: TypedDimension; paddingBottom?: TypedDimension; paddingLeft?: TypedDimension; paddingRight?: TypedDimension; marginVertical?: TypedDimension; marginHorizontal?: TypedDimension; margin?: TypedDimension; marginTop?: TypedDimension; marginBottom?: TypedDimension; marginLeft?: TypedDimension; marginRight?: TypedDimension; gap?: TypedDimension; rowGap?: TypedDimension; columnGap?: TypedDimension; }; /** * Layout properties type. */ export type LayoutProps = { flex?: number; size?: TypedDimension; width?: TypedDimension; height?: TypedDimension; minWidth?: TypedDimension; minHeight?: TypedDimension; maxWidth?: TypedDimension; maxHeight?: TypedDimension; }; /** * Shortcut properties type. */ export type ShortcutProps = { f?: TypedDimension; s?: TypedDimension; w?: TypedDimension; h?: TypedDimension; minW?: TypedDimension; minH?: TypedDimension; maxW?: TypedDimension; maxH?: TypedDimension; bW?: TypedDimension; bRadius?: TypedDimension; bColor?: TypedColor; p?: TypedDimension; pX?: TypedDimension; pY?: TypedDimension; pT?: TypedDimension; pL?: TypedDimension; pB?: TypedDimension; pR?: TypedDimension; m?: TypedDimension; mX?: TypedDimension; mY?: TypedDimension; mT?: TypedDimension; mL?: TypedDimension; mB?: TypedDimension; mR?: TypedDimension; bgColor?: TypedColor; font?: string; g?: TypedDimension; t?: TypedDimension; b?: TypedDimension; r?: TypedDimension; l?: TypedDimension; z?: ViewStyle["zIndex"]; align?: ViewStyle["alignItems"]; justify?: ViewStyle["justifyContent"]; grow?: ViewStyle["flexGrow"]; shrink?: ViewStyle["flexShrink"]; wrap?: ViewStyle["flexWrap"]; lines?: TextProps["numberOfLines"]; spacing?: TextStyle["letterSpacing"]; center?: boolean; }; /** * Border properties type. */ export type BorderProps = { borderRadius?: TypedDimension; borderBottomLeftRadius?: TypedDimension; borderBottomRightRadius?: TypedDimension; borderBottomStartRadius?: TypedDimension; borderBottomEndRadius?: TypedDimension; borderTopLeftRadius?: TypedDimension; borderTopRightRadius?: TypedDimension; borderTopStartRadius?: TypedDimension; borderTopEndRadius?: TypedDimension; }; /** * Color properties type. */ export type ColorProps = { color?: TypedColor; shadowColor?: TypedColor; backgroundColor?: TypedColor; } & { [key in `${string}Color`]?: TypedColor; }; /** * Patch a type prop if present. */ export type PatchType = { [K in keyof TBase]: K extends keyof TOverride ? TOverride[K] : TBase[K]; }; /** * All properties type. */ export type PatchProps = PatchType & LayoutProps & ShortcutProps; /** * Type representing a dimension. */ export type TypedDimension = `${number}px` | DimensionValue | BreakpointsKey | `${"2xxl" | "3xxl" | "4xxl" | "5xxl" | "6xxl" | "7xxl" | "8xxl" | "9xxl"}`; /** * Schema defining stylesheets with optional media queries. */ export type Stylesheets = Partial<{ [key: string]: WithMediaQuery