@idealyst/components 1.0.0

package/src/Text/Text.styles.tsx

@@ -0,0 +1,67 @@
+import { StyleSheet } from "react-native-unistyles";
+import { generateColorVariants } from "../theme/variantHelpers";
+
+const textStyles = StyleSheet.create((theme) => ({
+  text: {
+    variants: {
+      size: {
+        small: {
+          fontSize: theme.typography.fontSize.xs,
+          lineHeight: theme.typography.fontSize.xs * 1.33,
+        },
+        medium: {
+          fontSize: theme.typography.fontSize.md,
+          lineHeight: theme.typography.fontSize.md * 1.5,
+        },
+        large: {
+          fontSize: theme.typography.fontSize.lg,
+          lineHeight: theme.typography.fontSize.lg * 1.4,
+        },
+        xlarge: {
+          fontSize: theme.typography.fontSize.xl,
+          lineHeight: theme.typography.fontSize.xl * 1.33,
+        },
+      },
+      weight: {
+        light: {
+          fontWeight: theme.typography.fontWeight.light,
+        },
+        normal: {
+          fontWeight: theme.typography.fontWeight.regular,
+        },
+        medium: {
+          fontWeight: theme.typography.fontWeight.medium,
+        },
+        semibold: {
+          fontWeight: theme.typography.fontWeight.semibold,
+        },
+        bold: {
+          fontWeight: theme.typography.fontWeight.bold,
+        },
+      },
+      align: {
+        left: {
+          textAlign: 'left',
+        },
+        center: {
+          textAlign: 'center',
+        },
+        right: {
+          textAlign: 'right',
+        },
+      },
+      // Dynamically generated color variants
+      color: generateColorVariants(theme),
+    },
+    color: theme.colors.text.primary, // Default text color
+    margin: 0,
+    padding: 0,
+    // Web-specific styles
+    _web: {
+      fontFamily: 'inherit',
+      lineHeight: 'inherit',
+    },
+  },
+}));
+
+export default textStyles; 

package/src/Text/Text.web.tsx

@@ -0,0 +1,41 @@
+import React from 'react';
+import { getWebProps } from 'react-native-unistyles/web';
+import { TextProps } from './types';
+import textStyles from './Text.styles';
+
+const Text: React.FC<TextProps> = ({
+  children,
+  size = 'medium',
+  weight = 'normal',
+  color,
+  align = 'left',
+  style,
+  testID,
+}) => {
+  textStyles.useVariants({
+    size,
+    weight,
+    align,
+    color: color
+  });
+
+  // Create the style array following the official documentation pattern
+  const textStyleArray = [
+    textStyles.text,
+    style,
+  ];
+
+  // Use getWebProps to generate className and ref for web
+  const webProps = getWebProps(textStyleArray);
+
+  return (
+    <span
+      {...webProps}
+      data-testid={testID}
+    >
+      {children}
+    </span>
+  );
+};
+
+export default Text; 

package/src/Text/index.native.ts

@@ -0,0 +1,3 @@
+// React Native-specific Text export
+export { default } from './Text.native';
+export * from './types'; 

package/src/Text/index.ts

@@ -0,0 +1,5 @@
+// Platform-agnostic Text export
+// Bundlers will resolve to index.web.ts (web) or index.native.ts (React Native)
+// This file serves as fallback for web environments
+export { default } from './Text.web';
+export * from './types'; 

package/src/Text/index.web.ts

@@ -0,0 +1,3 @@
+// Web-specific Text export
+export { default } from './Text.web';
+export * from './types'; 

package/src/Text/types.ts

@@ -0,0 +1,39 @@
+import { ReactNode } from 'react';
+import type { DisplayColorVariant } from '../theme/variants';
+
+export interface TextProps {
+  /**
+   * The text content to display
+   */
+  children: ReactNode;
+  
+  /**
+   * The size variant of the text
+   */
+  size?: 'small' | 'medium' | 'large' | 'xlarge';
+  
+  /**
+   * The weight of the text
+   */
+  weight?: 'light' | 'normal' | 'medium' | 'semibold' | 'bold';
+  
+  /**
+   * The color of the text
+   */
+  color?: DisplayColorVariant;
+  
+  /**
+   * Text alignment
+   */
+  align?: 'left' | 'center' | 'right';
+  
+  /**
+   * Additional styles (platform-specific)
+   */
+  style?: any;
+  
+  /**
+   * Test ID for testing
+   */
+  testID?: string;
+} 

package/src/View/View.native.tsx

@@ -0,0 +1,56 @@
+import React from 'react';
+import { View as RNView } from 'react-native';
+import { ViewProps } from './types';
+import viewStyles from './View.styles';
+
+const View: React.FC<ViewProps> = ({
+  children,
+  spacing = 'none',
+  marginVariant = 'none',
+  background = 'transparent',
+  radius = 'none',
+  border = 'none',
+  backgroundColor,
+  padding,
+  margin,
+  borderRadius,
+  borderWidth,
+  borderColor,
+  style,
+  testID,
+}) => {
+  viewStyles.useVariants({
+    spacing,
+    margin: marginVariant,
+    background,
+    radius,
+    border,
+  });
+
+  const getStyles = (): ViewStyle => {
+    const baseStyles: ViewStyle = {};
+    
+    if (backgroundColor) baseStyles.backgroundColor = backgroundColor;
+    if (padding !== undefined) baseStyles.padding = padding;
+    if (margin !== undefined) baseStyles.margin = margin;
+    if (borderRadius !== undefined) baseStyles.borderRadius = borderRadius;
+    if (borderWidth !== undefined) baseStyles.borderWidth = borderWidth;
+    if (borderColor) baseStyles.borderColor = borderColor;
+    
+    return baseStyles;
+  };
+
+  const viewStyleArray = [
+    viewStyles.view,
+    getStyles(),
+    style,
+  ];
+
+  return (
+    <RNView style={viewStyleArray} testID={testID}>
+      {children}
+    </RNView>
+  );
+};
+
+export default View; 

package/src/View/View.styles.tsx

@@ -0,0 +1,103 @@
+import { StyleSheet } from "react-native-unistyles";
+
+const viewStyles = StyleSheet.create((theme) => ({
+  view: {
+    variants: {
+      spacing: {
+        none: {
+          padding: 0,
+        },
+        xs: {
+          padding: theme.spacing.xs,
+        },
+        sm: {
+          padding: theme.spacing.sm,
+        },
+        md: {
+          padding: theme.spacing.md,
+        },
+        lg: {
+          padding: theme.spacing.lg,
+        },
+        xl: {
+          padding: theme.spacing.xl,
+        },
+      },
+      margin: {
+        none: {
+          margin: 0,
+        },
+        xs: {
+          margin: theme.spacing.xs,
+        },
+        sm: {
+          margin: theme.spacing.sm,
+        },
+        md: {
+          margin: theme.spacing.md,
+        },
+        lg: {
+          margin: theme.spacing.lg,
+        },
+        xl: {
+          margin: theme.spacing.xl,
+        },
+      },
+      background: {
+        transparent: {
+          backgroundColor: 'transparent',
+        },
+        surface: {
+          backgroundColor: theme.colors.surface,
+        },
+        primary: {
+          backgroundColor: theme.colors.primary,
+        },
+        secondary: {
+          backgroundColor: theme.colors.secondary,
+        },
+      },
+      radius: {
+        none: {
+          borderRadius: 0,
+        },
+        xs: {
+          borderRadius: theme.borderRadius.xs,
+        },
+        sm: {
+          borderRadius: theme.borderRadius.sm,
+        },
+        md: {
+          borderRadius: theme.borderRadius.md,
+        },
+        lg: {
+          borderRadius: theme.borderRadius.lg,
+        },
+        xl: {
+          borderRadius: theme.borderRadius.xl,
+        },
+      },
+      border: {
+        none: {
+          borderWidth: 0,
+        },
+        thin: {
+          borderWidth: 1,
+          borderColor: theme.colors.border,
+        },
+        thick: {
+          borderWidth: 2,
+          borderColor: theme.colors.border,
+        },
+      },
+    },
+    // Web-specific styles
+    _web: {
+      display: 'flex',
+      flexDirection: 'column',
+      boxSizing: 'border-box',
+    },
+  },
+}));
+
+export default viewStyles; 

package/src/View/View.web.tsx

@@ -0,0 +1,60 @@
+import React from 'react';
+import { getWebProps } from 'react-native-unistyles/web';
+import { ViewProps } from './types';
+import viewStyles from './View.styles';
+
+const View: React.FC<ViewProps> = ({
+  children,
+  spacing = 'none',
+  marginVariant = 'none',
+  background = 'transparent',
+  radius = 'none',  
+  border = 'none',
+  backgroundColor,
+  padding,
+  margin,
+  borderRadius,
+  borderWidth,
+  borderColor,
+  style,
+  testID,
+}) => {
+  viewStyles.useVariants({
+    spacing,
+    margin: marginVariant,
+    background,
+    radius,
+    border,
+  });
+
+  // Create dynamic styles based on custom props (overrides variants)
+  const dynamicStyles: any = {};
+  
+  if (backgroundColor) dynamicStyles.backgroundColor = backgroundColor;
+  if (padding !== undefined) dynamicStyles.padding = padding;
+  if (margin !== undefined) dynamicStyles.margin = margin;
+  if (borderRadius !== undefined) dynamicStyles.borderRadius = borderRadius;
+  if (borderWidth !== undefined) dynamicStyles.borderWidth = borderWidth;
+  if (borderColor) dynamicStyles.borderColor = borderColor;
+
+  // Create the style array following the official documentation pattern
+  const viewStyleArray = [
+    viewStyles.view,
+    dynamicStyles,
+    style,
+  ];
+
+  // Use getWebProps to generate className and ref for web
+  const webProps = getWebProps(viewStyleArray);
+
+  return (
+    <div
+      {...webProps}
+      data-testid={testID}
+    >
+      {children}
+    </div>
+  );
+};
+
+export default View; 

package/src/View/index.native.ts

@@ -0,0 +1,3 @@
+// React Native-specific View export
+export { default } from './View.native';
+export * from './types'; 

package/src/View/index.ts

@@ -0,0 +1,5 @@
+// Platform-agnostic View export
+// Bundlers will resolve to index.web.ts (web) or index.native.ts (React Native)
+// This file serves as fallback for web environments
+export { default } from './View.web';
+export * from './types'; 

package/src/View/index.web.ts

@@ -0,0 +1,3 @@
+// Web-specific View export
+export { default } from './View.web';
+export * from './types'; 

package/src/View/types.ts

@@ -0,0 +1,73 @@
+import { ReactNode } from 'react';
+
+export interface ViewProps {
+  /**
+   * The content to display inside the view
+   */
+  children?: ReactNode;
+  
+  /**
+   * Padding variant
+   */
+  spacing?: 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+  
+  /**
+   * Margin variant
+   */
+  marginVariant?: 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+  
+  /**
+   * Background variant
+   */
+  background?: 'transparent' | 'surface' | 'primary' | 'secondary';
+  
+  /**
+   * Border radius variant
+   */
+  radius?: 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+  
+  /**
+   * Border variant
+   */
+  border?: 'none' | 'thin' | 'thick';
+  
+  /**
+   * Custom background color (overrides background variant)
+   */
+  backgroundColor?: string;
+  
+  /**
+   * Custom padding (overrides spacing variant)
+   */
+  padding?: number;
+  
+  /**
+   * Custom margin (overrides marginVariant)
+   */
+  margin?: number;
+  
+  /**
+   * Custom border radius (overrides radius variant)
+   */
+  borderRadius?: number;
+  
+  /**
+   * Custom border width (overrides border variant)
+   */
+  borderWidth?: number;
+  
+  /**
+   * Custom border color
+   */
+  borderColor?: string;
+  
+  /**
+   * Additional styles (platform-specific)
+   */
+  style?: any;
+  
+  /**
+   * Test ID for testing
+   */
+  testID?: string;
+} 

package/src/examples/AllExamples.tsx

@@ -0,0 +1,72 @@
+import React from 'react';
+import { Screen, View, Text, Divider } from '../index';
+import { ButtonExamples } from './ButtonExamples';
+import { TextExamples } from './TextExamples';
+import { ViewExamples } from './ViewExamples';
+import { InputExamples } from './InputExamples';
+import { IconExamples } from './IconExamples';
+import { CardExamples } from './CardExamples';
+import { CheckboxExamples } from './CheckboxExamples';
+import { DividerExamples } from './DividerExamples';
+import { BadgeExamples } from './BadgeExamples';
+import { AvatarExamples } from './AvatarExamples';
+import { ScreenExamples } from './ScreenExamples';
+import { ThemeExtensionExamples } from './ThemeExtensionExamples';
+
+export const AllExamples = () => {
+  return (
+    <Screen background="primary" padding="xl">
+      <View spacing="none" style={{ maxWidth: 800, alignSelf: 'center' }}>
+      <Text size="xlarge" weight="bold" align="center" color="primary">
+        Idealyst Component Library Examples
+      </Text>
+      <Text size="medium" align="center" color="secondary">
+        Comprehensive showcase of all available components
+      </Text>
+      
+      <Divider spacing="large" intent="primary">
+        <Text size="small" weight="semibold" color="primary">COMPONENTS</Text>
+      </Divider>
+      
+      <ButtonExamples />
+      <Divider spacing="medium" />
+      
+      <TextExamples />
+      <Divider spacing="medium" />
+      
+      <ViewExamples />
+      <Divider spacing="medium" />
+      
+      <InputExamples />
+      <Divider spacing="medium" />
+      
+      <IconExamples />
+      <Divider spacing="medium" />
+      
+      <CardExamples />
+      <Divider spacing="medium" />
+      
+      <CheckboxExamples />
+      <Divider spacing="medium" />
+      
+      <DividerExamples />
+      <Divider spacing="medium" />
+      
+      <BadgeExamples />
+      <Divider spacing="medium" />
+      
+      <AvatarExamples />
+      <Divider spacing="medium" />
+      
+      <ScreenExamples />
+      <Divider spacing="medium" />
+
+      <Divider spacing="large" intent="success">
+        <Text size="small" weight="semibold" color="green">THEME SYSTEM</Text>
+      </Divider>
+      
+      <ThemeExtensionExamples />
+    </View>
+    </Screen>
+  );
+}; 

package/src/examples/AvatarExamples.tsx

@@ -0,0 +1,97 @@
+import React from 'react';
+import { Screen, View, Text, Avatar } from '../index';
+
+export const AvatarExamples = () => {
+  return (
+    <Screen background="primary" padding="lg">
+      <View spacing="none">
+      <Text size="large" weight="bold" align="center">
+        Avatar Examples
+      </Text>
+      
+      {/* Avatar Sizes */}
+      <View spacing="md">
+        <Text size="medium" weight="semibold">Sizes</Text>
+        <View style={{ flexDirection: 'row', gap: 12, flexWrap: 'wrap', alignItems: 'center' }}>
+          <Avatar size="small" fallback="S" />
+          <Avatar size="medium" fallback="M" />
+          <Avatar size="large" fallback="L" />
+          <Avatar size="xlarge" fallback="XL" />
+        </View>
+      </View>
+
+      {/* Avatar Shapes */}
+      <View spacing="md">
+        <Text size="medium" weight="semibold">Shapes</Text>
+        <View style={{ flexDirection: 'row', gap: 12, flexWrap: 'wrap', alignItems: 'center' }}>
+          <Avatar shape="circle" fallback="C" size="large" />
+          <Avatar shape="square" fallback="S" size="large" />
+        </View>
+      </View>
+
+      {/* Avatar with Fallbacks */}
+      <View spacing="md">
+        <Text size="medium" weight="semibold">Fallback Text</Text>
+        <View style={{ flexDirection: 'row', gap: 12, flexWrap: 'wrap', alignItems: 'center' }}>
+          <Avatar fallback="JD" alt="John Doe" />
+          <Avatar fallback="AB" alt="Alice Brown" />
+          <Avatar fallback="MJ" alt="Michael Johnson" />
+          <Avatar fallback="LW" alt="Lisa Wilson" />
+        </View>
+      </View>
+
+      {/* Avatar with Images */}
+      <View spacing="md">
+        <Text size="medium" weight="semibold">With Images</Text>
+        <View style={{ flexDirection: 'row', gap: 12, flexWrap: 'wrap', alignItems: 'center' }}>
+          <Avatar 
+            src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?w=150&h=150&fit=crop&crop=face"
+            alt="Profile 1"
+            fallback="P1"
+          />
+          <Avatar 
+            src="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=150&h=150&fit=crop&crop=face"
+            alt="Profile 2"
+            fallback="P2"
+          />
+          <Avatar 
+            src="https://images.unsplash.com/photo-1494790108755-2616b9b5a24f?w=150&h=150&fit=crop&crop=face"
+            alt="Profile 3"
+            fallback="P3"
+          />
+        </View>
+      </View>
+
+      {/* Avatar Group */}
+      <View spacing="md">
+        <Text size="medium" weight="semibold">Avatar Group</Text>
+        <View style={{ flexDirection: 'row', gap: -8, alignItems: 'center' }}>
+          <Avatar fallback="JD" size="medium" />
+          <Avatar fallback="AB" size="medium" />
+          <Avatar fallback="MJ" size="medium" />
+          <Avatar fallback="+3" size="medium" />
+        </View>
+      </View>
+
+      {/* Different Size Combinations */}
+      <View spacing="md">
+        <Text size="medium" weight="semibold">Size Combinations</Text>
+        <View spacing="sm">
+          <View style={{ flexDirection: 'row', gap: 8, alignItems: 'center' }}>
+            <Avatar size="small" fallback="S" />
+            <Text size="small">Small avatar with text</Text>
+          </View>
+          <View style={{ flexDirection: 'row', gap: 8, alignItems: 'center' }}>
+            <Avatar size="medium" fallback="M" />
+            <Text size="medium">Medium avatar with text</Text>
+          </View>
+          <View style={{ flexDirection: 'row', gap: 8, alignItems: 'center' }}>
+            <Avatar size="large" fallback="L" />
+            <Text size="large">Large avatar with text</Text>
+          </View>
+        </View>
+      </View>
+    </View>
+    </Screen>
+  );
+};