onecart-ui 1.0.1

package/src/components/Text/Text.tsx

@@ -0,0 +1,96 @@
+import React from "react";
+import { TouchableOpacity, TextStyle, View } from "react-native";
+import * as tokens from "../../styles/tokens/tokens";
+import { Typography } from "../Typography";
+import { useTheme } from "../../theme/ThemeProvider";
+import { TextProps } from "../../types/Text";
+
+export const Text: React.FC<TextProps> = ({
+  children,
+  variant = "bodyMd",
+  align,
+  weight,
+  color,
+  underline = false,
+  strikethrough = false,
+  italic = false,
+  link = false,
+  onLinkPress,
+  style,
+  ...rest
+}) => {
+  const { theme } = useTheme();
+
+  const getTextDecorations = React.useMemo((): TextStyle => {
+    const decorations: TextStyle = {};
+
+    if (underline) {
+      decorations.textDecorationLine = "underline";
+    }
+
+    if (strikethrough) {
+      decorations.textDecorationLine = decorations.textDecorationLine
+        ? "underline line-through"
+        : "line-through";
+    }
+
+    if (italic) {
+      decorations.fontStyle = "italic";
+    }
+
+    if (link) {
+      const linkColor = color || theme.colors?.primary || tokens.TEXT_BLUE;
+      decorations.color = linkColor;
+
+      decorations.textDecorationLine = underline
+        ? "underline"
+        : decorations.textDecorationLine || tokens.TEXT_DECORATION_NONE;
+    }
+
+    return decorations;
+  }, [underline, strikethrough, italic, link, color, theme]);
+
+  const combinedStyle = React.useMemo(
+    () => ({
+      ...getTextDecorations,
+      ...style,
+    }),
+    [getTextDecorations, style]
+  );
+
+  if (link && onLinkPress) {
+    return (
+      <TouchableOpacity
+        onPress={onLinkPress}
+        accessibilityRole="link"
+        activeOpacity={0.7}
+      >
+        <Typography
+          variant={variant}
+          align={align}
+          weight={weight}
+          color={color || theme.colors?.primary || tokens.TEXT_BLUE}
+          style={combinedStyle}
+          {...rest}
+        >
+          {children}
+        </Typography>
+      </TouchableOpacity>
+    );
+  }
+
+  return (
+    <Typography
+      variant={variant}
+      align={align}
+      weight={weight}
+      color={color}
+      style={combinedStyle}
+      {...rest}
+    >
+      {children}
+    </Typography>
+  );
+};
+
+export default Text;

package/src/components/Text/index.ts

@@ -0,0 +1,2 @@
+export { Text } from "./Text";
+export type { TextProps } from "../../types/Text";

package/src/components/Typography/Typography.tsx

@@ -0,0 +1,123 @@
+import React from "react";
+import { Text, TextStyle } from "react-native";
+import { typographyTokens } from "../../styles/tokens";
+import * as tokens from "../../styles/tokens/tokens";
+import { useTheme } from "../../theme/ThemeProvider";
+import { letterSpacingToPixels } from "../../styles/tokens/utils/fontUtils";
+import { TypographyProps } from "../../types/Typography";
+
+export const Typography: React.FC<TypographyProps> = ({
+  children,
+  variant = "bodyMd",
+  align = "left",
+  weight,
+  color,
+  truncate = false,
+  numberOfLines,
+  style,
+  accessibilityLabel,
+  testID,
+  ...rest
+}) => {
+  const { theme } = useTheme();
+
+  const getTypographyStyles = React.useMemo((): TextStyle => {
+    try {
+      const variantStyle = typographyTokens[variant];
+
+      const textAlign = align;
+
+      const fontWeight = weight
+        ? typographyTokens.weights[weight]
+        : variantStyle.fontWeight;
+
+      let defaultColor = variantStyle.color;
+      if (theme?.colors?.text && typeof theme.colors.text === "object") {
+        const themeTextColor = (theme.colors.text as Record<string, string>)[
+          variant
+        ];
+        if (themeTextColor) {
+          defaultColor = themeTextColor;
+        }
+      }
+      const textColor = color || defaultColor;
+
+      // Create style object
+      const styles: TextStyle = {
+        fontFamily: variantStyle.fontFamily,
+        fontSize: variantStyle.fontSize,
+        fontWeight: fontWeight as any,
+        lineHeight: variantStyle.lineHeight,
+        color: textColor,
+        textAlign,
+      };
+
+      if (variantStyle.letterSpacing) {
+        styles.letterSpacing = letterSpacingToPixels(
+          variantStyle.letterSpacing.toString(),
+          variantStyle.fontSize
+        );
+      }
+
+      if (
+        variantStyle.textDecoration &&
+        variantStyle.textDecoration !== "none"
+      ) {
+        styles.textDecorationLine = variantStyle.textDecoration as any;
+      }
+
+      if (variantStyle.textCase && variantStyle.textCase !== "none") {
+        if (variantStyle.textCase === "uppercase") {
+          styles.textTransform = "uppercase";
+        } else if (variantStyle.textCase === "lowercase") {
+          styles.textTransform = "lowercase";
+        } else if (variantStyle.textCase === "capitalize") {
+          styles.textTransform = "capitalize";
+        }
+      }
+
+      return styles;
+    } catch (error) {
+      return {
+        fontSize: 16,
+        fontWeight: "400",
+        lineHeight: 24,
+        color: tokens.TEXT_BODY || "#000000",
+        textAlign: align,
+      };
+    }
+  }, [variant, align, weight, color, theme]);
+
+  const textStyles = React.useMemo((): TextStyle => {
+    const combinedStyles: TextStyle = { ...getTypographyStyles };
+
+    if (truncate) {
+      const webStyles: any = {
+        overflow: "hidden",
+        textOverflow: "ellipsis",
+        whiteSpace: "nowrap",
+      };
+      Object.assign(combinedStyles, webStyles);
+    }
+
+    if (style) {
+      Object.assign(combinedStyles, style);
+    }
+
+    return combinedStyles;
+  }, [getTypographyStyles, truncate, style]);
+
+  return (
+    <Text
+      style={textStyles}
+      numberOfLines={numberOfLines || (truncate ? 1 : undefined)}
+      accessibilityLabel={accessibilityLabel}
+      testID={testID}
+      {...rest}
+    >
+      {children}
+    </Text>
+  );
+};
+
+export default Typography;

package/src/components/Typography/index.ts

@@ -0,0 +1,7 @@
+export { Typography } from "./Typography";
+export type {
+  TypographyProps,
+  TypographyVariant,
+  TypographyAlign,
+  TypographyWeight,
+} from "../../types/Typography";

package/src/index.ts

@@ -0,0 +1,34 @@
+// Components
+export { Button } from "./components/Button";
+export { Typography } from "./components/Typography";
+export { Text } from "./components/Text";
+export { Heading } from "./components/Heading";
+export { Paragraph } from "./components/Paragraph";
+
+// Types
+export type { ButtonProps } from "./types/Button";
+export type {
+  TypographyProps,
+  TypographyVariant,
+  TypographyAlign,
+  TypographyWeight,
+} from "./types/Typography";
+export type { TextProps } from "./types/Text";
+export type { HeadingProps, HeadingLevel } from "./types/Heading";
+export type {
+  ParagraphProps,
+  ParagraphSize,
+  ParagraphSpacing,
+} from "./types/Paragraph";
+
+// Theme
+export { ThemeProvider, useTheme } from "./theme/ThemeProvider";
+
+export {
+  defaultTheme,
+  type Theme,
+  type ThemeColors,
+  type ThemeSpacing,
+  type ThemeBorderRadius,
+  type ThemeTypography,
+} from "./theme";

package/src/styles/tokens/index.ts

@@ -0,0 +1,130 @@
+// This file maps the generated tokens to a structured format our components expect
+import * as tokens from './tokens';
+import { typographyTokens } from './typography';
+
+export { typographyTokens };
+
+// Convert rem values to numbers
+const remToNumber = (remValue: string): number => {
+  if (!remValue || typeof remValue !== 'string') return 0;
+  return parseFloat(remValue.replace('rem', '')) * 16; // Assuming 1rem = 16px
+};
+
+// Convert px values to numbers
+const pxToNumber = (pxValue: string): number => {
+  if (!pxValue || typeof pxValue !== 'string') return 0;
+  return parseFloat(pxValue.replace('px', ''));
+};
+
+// Size configurations for buttons
+const buttonSizes = {
+  sm: {
+    paddingHorizontal: remToNumber(tokens.LAYOUT_SPACING_INLINE_SM),
+    paddingVertical: remToNumber(tokens.LAYOUT_SPACING_STACK_XS),
+    fontSize: pxToNumber(tokens.FONT_SIZE_3XS),
+    borderRadius: remToNumber(tokens.BORDER_RADIUS_BUTTON_SM),
+    minHeight: 32,
+  },
+  md: {
+    paddingHorizontal: remToNumber(tokens.LAYOUT_SPACING_INLINE_MD),
+    paddingVertical: remToNumber(tokens.LAYOUT_SPACING_STACK_SM),
+    fontSize: pxToNumber(tokens.FONT_SIZE_XS),
+    borderRadius: remToNumber(tokens.BORDER_RADIUS_XS),
+    minHeight: 40,
+  },
+  lg: {
+    paddingHorizontal: remToNumber(tokens.LAYOUT_SPACING_INLINE_LG),
+    paddingVertical: remToNumber(tokens.LAYOUT_SPACING_STACK_MD),
+    fontSize: pxToNumber(tokens.FONT_SIZE_MD),
+    borderRadius: remToNumber(tokens.BORDER_RADIUS_SM),
+    minHeight: 48,
+  }
+};
+
+// Common button properties
+const buttonCommon = {
+  fontWeight: tokens.MEDIUM,
+  lineHeight: pxToNumber(tokens.LINE_HEIGHT_XS),
+  borderWidth: pxToNumber(tokens.BORDER_WIDTH_BUTTON_DEFAULT),
+  transition: 'all 0.2s ease-in-out',
+};
+
+// Button tokens organized by variant and size
+export const buttonTokens = {
+  primary: {
+    background: {
+      default: tokens.ACTION_PRIMARY_DEFAULT,
+      hover: tokens.ACTION_PRIMARY_HOVER,
+      active: tokens.ACTION_PRIMARY_ACTIVE,
+      disabled: tokens.ACTION_PRIMARY_DISABLED,
+    },
+    text: {
+      default: "#FFFFFF", // White
+      disabled: tokens.NEUTRAL_50,
+    },
+    border: {
+      default: tokens.ACTION_PRIMARY_DEFAULT,
+      hover: tokens.ACTION_PRIMARY_HOVER,
+      active: tokens.ACTION_PRIMARY_ACTIVE,
+      disabled: tokens.ACTION_PRIMARY_DISABLED,
+    }
+  },
+  secondary: {
+    background: {
+      default: tokens.NEUTRAL_10,
+      hover: tokens.NEUTRAL_20,
+      active: tokens.NEUTRAL_30,
+      disabled: tokens.NEUTRAL_10,
+    },
+    text: {
+      default: tokens.NEUTRAL_70,
+      disabled: tokens.NEUTRAL_40,
+    },
+    border: {
+      default: tokens.NEUTRAL_30,
+      hover: tokens.NEUTRAL_40,
+      active: tokens.NEUTRAL_50,
+      disabled: tokens.NEUTRAL_20,
+    }
+  },
+  outline: {
+    background: {
+      default: 'transparent',
+      hover: tokens.ACTION_PRIMARY_DISABLED,
+      active: tokens.ACTION_PRIMARY_ACTIVE,
+      disabled: 'transparent',
+    },
+    text: {
+      default: tokens.ACTION_PRIMARY_DEFAULT,
+      disabled: tokens.NEUTRAL_40,
+    },
+    border: {
+      default: tokens.ACTION_PRIMARY_DEFAULT,
+      hover: tokens.ACTION_PRIMARY_HOVER,
+      active: tokens.ACTION_PRIMARY_ACTIVE,
+      disabled: tokens.NEUTRAL_30,
+    }
+  },
+  ghost: {
+    background: {
+      default: 'transparent',
+      hover: tokens.NEUTRAL_10,
+      active: tokens.NEUTRAL_20,
+      disabled: 'transparent',
+    },
+    text: {
+      default: tokens.NEUTRAL_60,
+      disabled: tokens.NEUTRAL_40,
+    },
+    border: {
+      default: 'transparent',
+      hover: 'transparent',
+      active: 'transparent',
+      disabled: 'transparent',
+    }
+  },
+  sizes: buttonSizes,
+  common: buttonCommon
+};
+
+export default buttonTokens;