@idealyst/components 1.1.6 → 1.1.8

package/src/Text/Text.styles.old.tsx

@@ -0,0 +1,219 @@
+import { StyleSheet } from "react-native-unistyles";
+import { Theme, Typography } from '@idealyst/theme';
+import { TextAlignVariant, TextColorVariant, TextWeightVariant, TextTypographyVariant } from "./types";
+import { applyExtensions } from '../extensions/applyExtension';
+
+export type TextVariants = {
+    typography: TextTypographyVariant;
+    weight: TextWeightVariant;
+    align: TextAlignVariant;
+}
+
+type TextStyleParams = {
+    color?: TextColorVariant;
+}
+
+/**
+ * Create typography variants from theme
+ */
+function createTypographyVariants(theme: Theme) {
+    const variants: Record<string, object> = {};
+    for (const key in theme.sizes.typography) {
+        const typo = theme.sizes.typography[key as Typography];
+        variants[key] = {
+            fontSize: typo.fontSize,
+            lineHeight: typo.lineHeight,
+            fontWeight: typo.fontWeight,
+        };
+    }
+    return variants;
+}
+
+/**
+ * Create spacing variants from theme
+ */
+function createSpacingVariants(theme: Theme) {
+    return {
+        gap: {
+            xs: { gap: theme.sizes.view.xs.spacing },
+            sm: { gap: theme.sizes.view.sm.spacing },
+            md: { gap: theme.sizes.view.md.spacing },
+            lg: { gap: theme.sizes.view.lg.spacing },
+            xl: { gap: theme.sizes.view.xl.spacing },
+        },
+        padding: {
+            xs: { padding: theme.sizes.view.xs.padding },
+            sm: { padding: theme.sizes.view.sm.padding },
+            md: { padding: theme.sizes.view.md.padding },
+            lg: { padding: theme.sizes.view.lg.padding },
+            xl: { padding: theme.sizes.view.xl.padding },
+        },
+        paddingVertical: {
+            xs: { paddingVertical: theme.sizes.view.xs.padding },
+            sm: { paddingVertical: theme.sizes.view.sm.padding },
+            md: { paddingVertical: theme.sizes.view.md.padding },
+            lg: { paddingVertical: theme.sizes.view.lg.padding },
+            xl: { paddingVertical: theme.sizes.view.xl.padding },
+        },
+        paddingHorizontal: {
+            xs: { paddingHorizontal: theme.sizes.view.xs.padding },
+            sm: { paddingHorizontal: theme.sizes.view.sm.padding },
+            md: { paddingHorizontal: theme.sizes.view.md.padding },
+            lg: { paddingHorizontal: theme.sizes.view.lg.padding },
+            xl: { paddingHorizontal: theme.sizes.view.xl.padding },
+        },
+    };
+}
+
+/**
+ * Create text styles
+ */
+function createTextStyles(theme: Theme) {
+    const spacingVariants = createSpacingVariants(theme);
+
+    return ({ color }: TextStyleParams) => ({
+        margin: 0,
+        padding: 0,
+        color: theme.colors.text[color ?? 'primary'] || theme.colors.text.primary,
+        variants: {
+            typography: createTypographyVariants(theme),
+            weight: {
+                light: { fontWeight: '300' },
+                normal: { fontWeight: '400' },
+                medium: { fontWeight: '500' },
+                semibold: { fontWeight: '600' },
+                bold: { fontWeight: '700' },
+            } as const,
+            align: {
+                left: { textAlign: 'left' },
+                center: { textAlign: 'center' },
+                right: { textAlign: 'right' },
+            } as const,
+            ...spacingVariants,
+        } as const,
+        _web: {
+            fontFamily: 'inherit',
+        },
+    });
+}
+
+// Babel plugin transforms applyExtensions to inline theme.__extensions access
+export const textStyles = StyleSheet.create((theme: Theme) => {
+    return applyExtensions('Text', theme, {
+        text: createTextStyles(theme),
+    });
+});
+
+// =============================================================================
+// TEST: buildStyles approach
+// =============================================================================
+
+// This is what DEVELOPERS would write (nice API with helpers):
+// export const textStylesDef = buildStyles('Text', (theme) => ({
+//     text: createTextStyles(theme),
+// }));
+
+// This is what BABEL would generate (flat ObjectExpression, direct theme access):
+// The key is ALL theme accesses are directly visible - no function calls hiding them
+export const testTextStyles = StyleSheet.create((theme: Theme) => ({
+    text: ({ color }: TextStyleParams) => ({
+        margin: 0,
+        padding: 0,
+        // Direct theme access - Unistyles can trace this
+        color: theme.colors.text[color ?? 'primary'] || theme.colors.text.primary,
+        variants: {
+            // Typography variants - all expanded inline
+            typography: {
+                h1: {
+                    fontSize: theme.sizes.typography.h1.fontSize,
+                    lineHeight: theme.sizes.typography.h1.lineHeight,
+                    fontWeight: theme.sizes.typography.h1.fontWeight,
+                },
+                h2: {
+                    fontSize: theme.sizes.typography.h2.fontSize,
+                    lineHeight: theme.sizes.typography.h2.lineHeight,
+                    fontWeight: theme.sizes.typography.h2.fontWeight,
+                },
+                h3: {
+                    fontSize: theme.sizes.typography.h3.fontSize,
+                    lineHeight: theme.sizes.typography.h3.lineHeight,
+                    fontWeight: theme.sizes.typography.h3.fontWeight,
+                },
+                h4: {
+                    fontSize: theme.sizes.typography.h4.fontSize,
+                    lineHeight: theme.sizes.typography.h4.lineHeight,
+                    fontWeight: theme.sizes.typography.h4.fontWeight,
+                },
+                h5: {
+                    fontSize: theme.sizes.typography.h5.fontSize,
+                    lineHeight: theme.sizes.typography.h5.lineHeight,
+                    fontWeight: theme.sizes.typography.h5.fontWeight,
+                },
+                h6: {
+                    fontSize: theme.sizes.typography.h6.fontSize,
+                    lineHeight: theme.sizes.typography.h6.lineHeight,
+                    fontWeight: theme.sizes.typography.h6.fontWeight,
+                },
+                body1: {
+                    fontSize: theme.sizes.typography.body1.fontSize,
+                    lineHeight: theme.sizes.typography.body1.lineHeight,
+                    fontWeight: theme.sizes.typography.body1.fontWeight,
+                },
+                body2: {
+                    fontSize: theme.sizes.typography.body2.fontSize,
+                    lineHeight: theme.sizes.typography.body2.lineHeight,
+                    fontWeight: theme.sizes.typography.body2.fontWeight,
+                },
+                caption: {
+                    fontSize: theme.sizes.typography.caption.fontSize,
+                    lineHeight: theme.sizes.typography.caption.lineHeight,
+                    fontWeight: theme.sizes.typography.caption.fontWeight,
+                },
+            },
+            weight: {
+                light: { fontWeight: '300' },
+                normal: { fontWeight: '400' },
+                medium: { fontWeight: '500' },
+                semibold: { fontWeight: '600' },
+                bold: { fontWeight: '700' },
+            } as const,
+            align: {
+                left: { textAlign: 'left' },
+                center: { textAlign: 'center' },
+                right: { textAlign: 'right' },
+            } as const,
+            // Spacing variants - all expanded inline
+            gap: {
+                xs: { gap: theme.sizes.view.xs.spacing },
+                sm: { gap: theme.sizes.view.sm.spacing },
+                md: { gap: theme.sizes.view.md.spacing },
+                lg: { gap: theme.sizes.view.lg.spacing },
+                xl: { gap: theme.sizes.view.xl.spacing },
+            },
+            padding: {
+                xs: { padding: theme.sizes.view.xs.padding },
+                sm: { padding: theme.sizes.view.sm.padding },
+                md: { padding: theme.sizes.view.md.padding },
+                lg: { padding: theme.sizes.view.lg.padding },
+                xl: { padding: theme.sizes.view.xl.padding },
+            },
+            paddingVertical: {
+                xs: { paddingVertical: theme.sizes.view.xs.padding },
+                sm: { paddingVertical: theme.sizes.view.sm.padding },
+                md: { paddingVertical: theme.sizes.view.md.padding },
+                lg: { paddingVertical: theme.sizes.view.lg.padding },
+                xl: { paddingVertical: theme.sizes.view.xl.padding },
+            },
+            paddingHorizontal: {
+                xs: { paddingHorizontal: theme.sizes.view.xs.padding },
+                sm: { paddingHorizontal: theme.sizes.view.sm.padding },
+                md: { paddingHorizontal: theme.sizes.view.md.padding },
+                lg: { paddingHorizontal: theme.sizes.view.lg.padding },
+                xl: { paddingHorizontal: theme.sizes.view.xl.padding },
+            },
+        } as const,
+        _web: {
+            fontFamily: 'inherit',
+        },
+    }),
+}));

package/src/Text/Text.styles.tsx

@@ -1,13 +1,18 @@
-import { StyleSheet } from "react-native-unistyles";
-import { Theme, Typography } from '@idealyst/theme';
-import {
-  buildGapVariants,
-  buildPaddingVariants,
-  buildPaddingVerticalVariants,
-  buildPaddingHorizontalVariants,
-} from '../utils/buildViewStyleVariants';
+/**
+ * Text styles using defineStyle with $iterator expansion.
+ */
+import { StyleSheet } from 'react-native-unistyles';
+import { defineStyle, ThemeStyleWrapper } from '@idealyst/theme';
+
+// Required: Unistyles must see StyleSheet usage in original source to process this file
+void StyleSheet;
+import type { Theme as BaseTheme } from '@idealyst/theme';
+import type { TextStyle, ViewStyle } from 'react-native';
 import { TextAlignVariant, TextColorVariant, TextWeightVariant, TextTypographyVariant } from "./types";
 
+// Wrap theme for $iterator support
+type Theme = ThemeStyleWrapper<BaseTheme>;
+
 export type TextVariants = {
     typography: TextTypographyVariant;
     weight: TextWeightVariant;
@@ -15,82 +20,93 @@ export type TextVariants = {
 }
 
 /**
- * Create typography variants from theme
+ * All props available to dynamic Text style functions.
+ * Extensions and overrides receive these to make conditional styling decisions.
  */
-function createTypographyVariants(theme: Theme) {
-    const variants: Record<string, object> = {};
+export type TextStyleParams = {
+    /** Text color variant */
+    color?: TextColorVariant;
+    /** Typography variant (h1, h2, body1, etc.) */
+    typography?: TextTypographyVariant;
+    /** Font weight override */
+    weight?: TextWeightVariant;
+    /** Text alignment */
+    align?: TextAlignVariant;
+}
 
-    for (const key in theme.sizes.typography) {
-        const typo = theme.sizes.typography[key as Typography];
-        variants[key] = {
-            fontSize: typo.fontSize,
-            lineHeight: typo.lineHeight,
-            fontWeight: typo.fontWeight,
+/**
+ * Text style definition type for use with extendStyle/overrideStyle.
+ */
+export interface TextStyleDef {
+    text: (params: TextStyleParams) => TextStyle & {
+        variants?: {
+            typography?: Record<string, TextStyle>;
+            weight?: Record<string, TextStyle>;
+            align?: Record<string, TextStyle>;
+            gap?: Record<string, ViewStyle>;
+            padding?: Record<string, ViewStyle>;
+            paddingVertical?: Record<string, ViewStyle>;
+            paddingHorizontal?: Record<string, ViewStyle>;
         };
-    }
-
-    return variants;
+    };
 }
 
-type TextStyleParams = {
-    color?: TextColorVariant;
+// Register Text style types for type-safe extendStyle/overrideStyle
+declare module '@idealyst/theme' {
+    interface ComponentStyleRegistry {
+        Text: TextStyleDef;
+    }
 }
 
-function createTextStyles(theme: Theme) {
-    return ({ color }: TextStyleParams) => {
-        const colorValue = theme.colors.text[color ?? 'primary'] || theme.colors.text.primary;
-
-        return {
-            margin: 0,
-            padding: 0,
-            color: colorValue,
-            variants: {
-                typography: createTypographyVariants(theme),
-                weight: {
-                    light: {
-                        fontWeight: '300',
-                    },
-                    normal: {
-                        fontWeight: '400',
-                    },
-                    medium: {
-                        fontWeight: '500',
-                    },
-                    semibold: {
-                        fontWeight: '600',
-                    },
-                    bold: {
-                        fontWeight: '700',
-                    },
-                } as const,
-                align: {
-                    left: {
-                        textAlign: 'left',
-                    },
-                    center: {
-                        textAlign: 'center',
-                    },
-                    right: {
-                        textAlign: 'right',
-                    },
-                } as const,
-                // Spacing variants from TextSpacingStyleProps
-                gap: buildGapVariants(theme),
-                padding: buildPaddingVariants(theme),
-                paddingVertical: buildPaddingVerticalVariants(theme),
-                paddingHorizontal: buildPaddingHorizontalVariants(theme),
+/**
+ * Text styles with $iterator expansion.
+ *
+ * Babel expands:
+ * - theme.sizes.$typography.X → all typography keys (h1, h2, body1, etc.)
+ * - theme.sizes.$view.X → all view size keys (xs, sm, md, lg, xl)
+ */
+// @ts-ignore - $iterator patterns are expanded by Babel
+export const textStyles = defineStyle('Text', (theme: Theme) => ({
+    text: ({ color, typography, weight, align }: TextStyleParams) => ({
+        margin: 0,
+        padding: 0,
+        // Base color - can be overridden by extensions using any of the params
+        color: theme.colors.text[color ?? 'primary'] || theme.colors.text.primary,
+        variants: {
+            // Typography variants - $iterator expands for each typography key
+            typography: {
+                fontSize: theme.sizes.$typography.fontSize,
+                lineHeight: theme.sizes.$typography.lineHeight,
+                fontWeight: theme.sizes.$typography.fontWeight,
+            },
+            weight: {
+                light: { fontWeight: '300' },
+                normal: { fontWeight: '400' },
+                medium: { fontWeight: '500' },
+                semibold: { fontWeight: '600' },
+                bold: { fontWeight: '700' },
             } as const,
-            _web: {
-                fontFamily: 'inherit',
+            align: {
+                left: { textAlign: 'left' },
+                center: { textAlign: 'center' },
+                right: { textAlign: 'right' },
+            } as const,
+            // Spacing variants - $iterator expands for each view size key
+            gap: {
+                gap: theme.sizes.$view.spacing,
             },
-        };
-    }
-}
-
-// Styles are inlined here instead of in @idealyst/theme because Unistyles' Babel
-// transform on native cannot resolve function calls to extract variant structures.
-export const textStyles = StyleSheet.create((theme: Theme) => {
-  return {
-        text: createTextStyles(theme),
-    };
-});
+            padding: {
+                padding: theme.sizes.$view.padding,
+            },
+            paddingVertical: {
+                paddingVertical: theme.sizes.$view.padding,
+            },
+            paddingHorizontal: {
+                paddingHorizontal: theme.sizes.$view.padding,
+            },
+        } as const,
+        _web: {
+            fontFamily: 'inherit',
+        },
+    }),
+}));

package/src/Text/Text.web.tsx

@@ -29,9 +29,9 @@ const Text = forwardRef<HTMLSpanElement, TextProps>(({
     paddingHorizontal,
   });
 
-  // Create the style array
+  // Create the style array - pass all style-affecting props to dynamic style function
   const textStyleArray = [
-    textStyles.text({ color }),
+    (textStyles.text as any)({ color, typography, weight, align }),
     style,
   ];
 

package/src/Text/index.ts

@@ -3,3 +3,4 @@ import TextComponent from './Text.web';
 export default TextComponent;
 export { TextComponent as Text };
 export * from './types';
+export type { TextStyleDef, TextStyleParams, TextVariants } from './Text.styles';

package/src/TextArea/TextArea.styles.old.tsx

@@ -0,0 +1,213 @@
+import { StyleSheet } from 'react-native-unistyles';
+import { Theme, StylesheetStyles, Intent, Size } from '@idealyst/theme';
+import { buildSizeVariants } from '../utils/buildSizeVariants';
+import {
+  buildMarginVariants,
+  buildMarginVerticalVariants,
+  buildMarginHorizontalVariants,
+} from '../utils/buildViewStyleVariants';
+import { TextAreaIntentVariant } from './types';
+import { applyExtensions } from '../extensions/applyExtension';
+
+/**
+ * Create size variants for textarea
+ */
+function createTextareaSizeVariants(theme: Theme) {
+    return buildSizeVariants(theme, 'textarea', (size) => ({
+        fontSize: size.fontSize,
+        padding: size.padding,
+        lineHeight: size.lineHeight,
+        minHeight: size.minHeight,
+    }));
+}
+
+/**
+ * Get textarea styles based on intent, disabled, and hasError state
+ */
+function getTextareaIntentStyles(theme: Theme, intent: TextAreaIntentVariant, disabled: boolean, hasError: boolean) {
+    if (disabled || hasError) {
+        return {} as const;
+    }
+
+    const intentValue = theme.intents[intent];
+    const baseStyles: any = {};
+
+    // For success and warning, set border color
+    if (intent === 'success' || intent === 'warning') {
+        baseStyles.borderColor = intentValue.primary;
+    }
+
+    // Focus styles for all intents when not disabled and not in error
+    baseStyles._web = {
+        _focus: {
+            borderColor: intentValue.primary,
+            boxShadow: `0 0 0 2px ${intentValue.primary}33`,
+        },
+    };
+
+    return baseStyles;
+}
+
+const createTextareaStyles = (theme: Theme) => {
+    return ({ intent, disabled, hasError }: { intent: TextAreaIntentVariant, disabled: boolean, hasError: boolean }) => {
+        const intentStyles = getTextareaIntentStyles(theme, intent, disabled, hasError);
+
+        return {
+            width: '100%',
+            color: theme.colors.text.primary,
+            backgroundColor: theme.colors.surface.primary,
+            borderWidth: 1,
+            borderStyle: 'solid',
+            borderColor: theme.colors.border.primary,
+            borderRadius: 8,
+            lineHeight: 'normal',
+            ...intentStyles,
+            variants: {
+                size: createTextareaSizeVariants(theme),
+                disabled: {
+                    true: {
+                        opacity: 0.5,
+                        backgroundColor: theme.colors.surface.secondary,
+                        _web: {
+                            cursor: 'not-allowed',
+                        },
+                    },
+                    false: {},
+                },
+                hasError: {
+                    true: {
+                        borderColor: theme.intents.error.primary,
+                    },
+                    false: {},
+                },
+                resize: {
+                    none: {
+                        _web: {
+                            resize: 'none',
+                        },
+                    },
+                    vertical: {
+                        _web: {
+                            resize: 'vertical',
+                        },
+                    },
+                    horizontal: {
+                        _web: {
+                            resize: 'horizontal',
+                        },
+                    },
+                    both: {
+                        _web: {
+                            resize: 'both',
+                        },
+                    },
+                },
+            },
+            _web: {
+                fontFamily: 'inherit',
+                outline: 'none',
+                transition: 'border-color 0.2s ease, box-shadow 0.2s ease',
+                boxSizing: 'border-box',
+                overflowY: 'hidden',
+            },
+        } as const;
+    }
+}
+
+// Helper functions to create static styles wrapped in dynamic functions
+function createContainerStyles(theme: Theme) {
+    return () => ({
+        display: 'flex' as const,
+        flexDirection: 'column' as const,
+        gap: 4,
+        variants: {
+            // Spacing variants from FormInputStyleProps
+            margin: buildMarginVariants(theme),
+            marginVertical: buildMarginVerticalVariants(theme),
+            marginHorizontal: buildMarginHorizontalVariants(theme),
+        },
+    });
+}
+
+function createLabelStyles(theme: Theme) {
+    return () => ({
+        fontSize: 14,
+        fontWeight: '500' as const,
+        color: theme.colors.text.primary,
+        variants: {
+            disabled: {
+                true: {
+                    opacity: 0.5,
+                },
+                false: {},
+            },
+        },
+    });
+}
+
+function createTextareaContainerStyles() {
+    return () => ({
+        position: 'relative' as const,
+    });
+}
+
+function createHelperTextStyles(theme: Theme) {
+    return () => ({
+        fontSize: 12,
+        color: theme.colors.text.secondary,
+        variants: {
+            hasError: {
+                true: {
+                    color: theme.intents.error.primary,
+                },
+                false: {},
+            },
+        },
+    });
+}
+
+function createFooterStyles() {
+    return () => ({
+        display: 'flex' as const,
+        flexDirection: 'row' as const,
+        justifyContent: 'space-between' as const,
+        alignItems: 'center' as const,
+        gap: 4,
+    });
+}
+
+function createCharacterCountStyles(theme: Theme) {
+    return () => ({
+        fontSize: 12,
+        color: theme.colors.text.secondary,
+        variants: {
+            isNearLimit: {
+                true: {
+                    color: theme.intents.warning.primary,
+                },
+                false: {},
+            },
+            isAtLimit: {
+                true: {
+                    color: theme.intents.error.primary,
+                },
+                false: {},
+            },
+        },
+    });
+}
+
+// Styles are inlined here instead of in @idealyst/theme because Unistyles' Babel transform on native cannot resolve function calls to extract variant structures.
+export const textAreaStyles = StyleSheet.create((theme: Theme) => {
+    // Apply extensions to main visual elements
+
+    return applyExtensions('TextArea', theme, {container: createContainerStyles(theme),
+        textarea: createTextareaStyles(theme),
+        // Additional styles (merged from return)
+        // Minor utility styles (not extended)
+        label: createLabelStyles(theme)(),
+        textareaContainer: createTextareaContainerStyles()(),
+        helperText: createHelperTextStyles(theme)(),
+        footer: createFooterStyles()(),
+        characterCount: createCharacterCountStyles(theme)()});
+});