@idealyst/components 1.1.7 → 1.1.9

package/src/Table/Table.web.tsx

@@ -1,9 +1,135 @@
-import React, { useMemo } from 'react';
+import React, { useMemo, ReactNode } from 'react';
 import { getWebProps } from 'react-native-unistyles/web';
 import { tableStyles } from './Table.styles';
-import type { TableProps, TableColumn } from './types';
+import type { TableProps, TableColumn, TableType, TableSizeVariant, TableAlignVariant } from './types';
 import { getWebAriaProps } from '../utils/accessibility';
 
+// ============================================================================
+// Sub-component Props
+// ============================================================================
+
+interface TRProps {
+  children: ReactNode;
+  size?: TableSizeVariant;
+  type?: TableType;
+  clickable?: boolean;
+  onClick?: () => void;
+  testID?: string;
+}
+
+interface THProps {
+  children: ReactNode;
+  size?: TableSizeVariant;
+  type?: TableType;
+  align?: TableAlignVariant;
+  width?: number | string;
+  accessibilitySort?: 'ascending' | 'descending' | 'none' | 'other';
+}
+
+interface TDProps {
+  children: ReactNode;
+  size?: TableSizeVariant;
+  type?: TableType;
+  align?: TableAlignVariant;
+  width?: number | string;
+}
+
+// ============================================================================
+// TR Component
+// ============================================================================
+
+function TR({
+  children,
+  size = 'md',
+  type = 'standard',
+  clickable = false,
+  onClick,
+  testID,
+}: TRProps) {
+  tableStyles.useVariants({
+    size,
+    type,
+    clickable,
+  });
+
+  const rowProps = getWebProps([(tableStyles.row as any)({})]);
+
+  return (
+    <tr
+      {...rowProps}
+      onClick={onClick}
+      data-testid={testID}
+    >
+      {children}
+    </tr>
+  );
+}
+
+// ============================================================================
+// TH Component
+// ============================================================================
+
+function TH({
+  children,
+  size = 'md',
+  type = 'standard',
+  align = 'left',
+  width,
+  accessibilitySort,
+}: THProps) {
+  tableStyles.useVariants({
+    size,
+    type,
+    align,
+  });
+
+  const headerCellProps = getWebProps([(tableStyles.headerCell as any)({})]);
+
+  return (
+    <th
+      {...headerCellProps}
+      scope="col"
+      aria-sort={accessibilitySort}
+      style={{ width }}
+    >
+      {children}
+    </th>
+  );
+}
+
+// ============================================================================
+// TD Component
+// ============================================================================
+
+function TD({
+  children,
+  size = 'md',
+  type = 'standard',
+  align = 'left',
+  width,
+}: TDProps) {
+  tableStyles.useVariants({
+    size,
+    type,
+    align,
+  });
+
+  const cellProps = getWebProps([(tableStyles.cell as any)({})]);
+
+  return (
+    <td
+      {...cellProps}
+      style={{ width }}
+    >
+      {children}
+    </td>
+  );
+}
+
+// ============================================================================
+// Main Table Component
+// ============================================================================
+
 function Table<T = any>({
   columns,
   data,
@@ -37,7 +163,8 @@ function Table<T = any>({
       accessibilityHidden,
     });
   }, [accessibilityLabel, accessibilityHint, accessibilityRole, accessibilityHidden]);
-  // Apply variants
+
+  // Apply variants for container
   tableStyles.useVariants({
     type,
     size,
@@ -51,7 +178,7 @@ function Table<T = any>({
   });
 
   const containerProps = getWebProps([(tableStyles.container as any)({}), style as any]);
-  const tableProps = getWebProps([tableStyles.table]);
+  const tableProps = getWebProps([(tableStyles.table as any)({})]);
 
   // Helper to get cell value
   const getCellValue = (column: TableColumn<T>, row: T, rowIndex: number) => {
@@ -67,79 +194,51 @@ function Table<T = any>({
   return (
     <div {...containerProps} {...ariaProps} id={id} data-testid={testID}>
       <table {...tableProps} role="table">
-        <thead {...getWebProps([tableStyles.thead])}>
+        <thead {...getWebProps([(tableStyles.thead as any)({})])}>
           <tr>
-            {columns.map((column) => {
-              tableStyles.useVariants({
-                size,
-                align: column.align || 'left',
-                type,
-              });
-
-              const headerCellProps = getWebProps([tableStyles.headerCell]);
-
-              return (
-                <th
-                  key={column.key}
-                  {...headerCellProps}
-                  scope="col"
-                  aria-sort={column.accessibilitySort}
-                  style={{
-                    width: column.width,
-                  }}
-                >
-                  {column.title}
-                </th>
-              );
-            })}
+            {columns.map((column) => (
+              <TH
+                key={column.key}
+                size={size}
+                type={type}
+                align={column.align}
+                width={column.width}
+                accessibilitySort={column.accessibilitySort}
+              >
+                {column.title}
+              </TH>
+            ))}
           </tr>
         </thead>
-        <tbody {...getWebProps([tableStyles.tbody])}>
-          {data.map((row, rowIndex) => {
-            tableStyles.useVariants({
-              size,
-              align: 'left',
-              type,
-              clickable: isClickable,
-            });
-
-            const rowProps = getWebProps([tableStyles.row]);
-
-            return (
-              <tr
-                key={rowIndex}
-                {...rowProps}
-                onClick={() => onRowPress?.(row, rowIndex)}
-                data-testid={`${testID}-row-${rowIndex}`}
-              >
-                {columns.map((column) => {
-                  tableStyles.useVariants({
-                    size,
-                    align: column.align || 'left',
-                    type,
-                  });
-
-                  const cellProps = getWebProps([tableStyles.cell]);
-
-                  return (
-                    <td
-                      key={column.key}
-                      {...cellProps}
-                      style={{
-                        width: column.width,
-                      }}
-                    >
-                      {getCellValue(column, row, rowIndex)}
-                    </td>
-                  );
-                })}
-              </tr>
-            );
-          })}
+        <tbody {...getWebProps([(tableStyles.tbody as any)({})])}>
+          {data.map((row, rowIndex) => (
+            <TR
+              key={rowIndex}
+              size={size}
+              type={type}
+              clickable={isClickable}
+              onClick={() => onRowPress?.(row, rowIndex)}
+              testID={testID ? `${testID}-row-${rowIndex}` : undefined}
+            >
+              {columns.map((column) => (
+                <TD
+                  key={column.key}
+                  size={size}
+                  type={type}
+                  align={column.align}
+                  width={column.width}
+                >
+                  {getCellValue(column, row, rowIndex)}
+                </TD>
+              ))}
+            </TR>
+          ))}
         </tbody>
       </table>
     </div>
   );
 }
 
+
+
 export default Table;

package/src/Text/Text.native.tsx

@@ -28,13 +28,11 @@ const Text = forwardRef<RNText, TextProps>(({
     paddingHorizontal,
   });
 
-  const textStyle = (textStyles.text as any)({ color });
-
   return (
     <RNText
       ref={ref}
       nativeID={id}
-      style={[textStyle, style]}
+      style={[textStyles.text({ color, typography, weight, align }), style]}
       testID={testID}
     >
       {children}

package/src/Text/Text.style.demo.tsx

@@ -0,0 +1,16 @@
+import { ThemeStyleWrapper } from '@idealyst/theme';
+import type { Theme as BaseTheme } from '@idealyst/theme';
+
+type Theme = ThemeStyleWrapper<BaseTheme>;
+
+const defineStyle = {} as any
+defineStyle('Text', (theme: Theme) => ({
+    text: {
+        margin: 0,
+        padding: 0,
+        color: theme.colors.text.primary,
+        variants: {
+            // Typography variants
+            
+        }}
+}))

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',
+        },
+    }),
+}));