onecart-ui 1.0.1 → 1.0.2

package/src/types/Typography.ts

@@ -1,94 +1,34 @@
-import { TextProps } from "react-native";
+import React from "react";
 
-/**
- * Typography variants
- */
-export type TypographyVariant =
-  // Display variants - Used for large headlines and intro sections
-  | "display2xl"
-  | "displayXl"
-  // Heading variants - Used for section headings
-  | "headingXl"
-  | "headingLg"
-  | "headingMd"
-  | "headingSm"
-  | "headingXs"
-  // Body text variants - Used for paragraphs and content
-  | "bodyLg"
-  | "bodyMd"
-  | "bodySm"
-  | "bodyXs"
-  // Label variants - Used for form labels, captions, etc.
-  | "labelLg"
-  | "labelMd"
-  | "labelSm";
-
-/**
- * Text alignment options
- */
 export type TypographyAlign = "left" | "center" | "right";
 
-/**
- * Font weight options
- */
 export type TypographyWeight = "normal" | "medium" | "semibold" | "bold";
 
-/**
- * Typography component props
- */
-export interface TypographyProps extends Omit<TextProps, "children"> {
-  /**
-   * The content to display
-   */
-  children?: React.ReactNode;
-
-  /**
-   * The typography variant to use
-   * @default 'bodyMd'
-   */
-  variant?: TypographyVariant;
-
-  /**
-   * Text alignment
-   * @default 'left'
-   */
+export interface BaseTypographyProps {
+  element?: React.ElementType;
   align?: TypographyAlign;
-
-  /**
-   * Font weight
-   */
   weight?: TypographyWeight;
-
-  /**
-   * Text color
-   * If not provided, uses variant's default color from theme
-   */
   color?: string;
-
-  /**
-   * Whether to truncate text with ellipsis if it overflows
-   * @default false
-   */
   truncate?: boolean;
+  lineClamp?: number;
+  children: React.ReactNode;
+  className?: string;
+  style?: React.CSSProperties;
+  onClick?: (event: React.MouseEvent<HTMLElement>) => void;
+  testID?: string;
+}
 
-  /**
-   * Maximum number of lines before truncating
-   * If not provided, text will not be truncated
-   */
-  numberOfLines?: number;
-
-  /**
-   * Additional custom styles for the text
-   */
-  style?: TextProps["style"];
+export interface DisplayProps extends BaseTypographyProps {
+  size: "2xl" | "xl";
+}
+export interface HeadingProps extends BaseTypographyProps {
+  size: "xl" | "lg" | "md" | "sm" | "xs";
+}
 
-  /**
-   * Accessibility label for screen readers
-   */
-  accessibilityLabel?: string;
+export interface BodyProps extends BaseTypographyProps {
+  size: "xl" | "lg" | "md" | "sm";
+}
 
-  /**
-   * Test ID for testing
-   */
-  testID?: string;
+export interface UtilityProps extends BaseTypographyProps {
+  variant: "button" | "link" | "caption";
 }

package/src/components/Heading/Heading.tsx

@@ -1,48 +0,0 @@
-import React from "react";
-import * as tokens from "../../styles/tokens/tokens";
-import { HeadingProps } from "../../types/Heading";
-import { Typography } from "../Typography";
-
-const headingLevelToVariant = {
-  h1: "headingXl",
-  h2: "headingLg",
-  h3: "headingMd",
-  h4: "headingSm",
-  h5: "headingXs",
-  h6: "headingXs",
-};
-
-export const Heading: React.FC<HeadingProps> = ({
-  children,
-  level = "h2",
-  subtitle,
-  subtitleProps,
-  ...rest
-}) => {
-  const variant = headingLevelToVariant[level];
-
-  return (
-    <>
-      <Typography variant={variant} accessibilityRole={level} {...rest}>
-        {children}
-      </Typography>
-
-      {subtitle && (
-        <Typography
-          variant="bodySm"
-          color={tokens.TEXT_TERTIARY}
-          style={{
-            marginTop: tokens.LAYOUT_SPACING_STACK_XS
-              ? parseInt(tokens.LAYOUT_SPACING_STACK_XS)
-              : 4,
-          }}
-          {...subtitleProps}
-        >
-          {subtitle}
-        </Typography>
-      )}
-    </>
-  );
-};
-
-export default Heading;

package/src/components/Heading/index.ts

@@ -1,2 +0,0 @@
-export { Heading } from './Heading';
-export type { HeadingProps, HeadingLevel } from '../../types/Heading';

package/src/components/Paragraph/Paragraph.tsx

@@ -1,93 +0,0 @@
-import React from "react";
-import { View } from "react-native";
-import * as tokens from "../../styles/tokens/tokens";
-import { ParagraphProps } from "../../types/Paragraph";
-import { remToNumber } from "../../styles/tokens/utils/utils";
-import { Text } from "../Text";
-
-export const Paragraph: React.FC<ParagraphProps> = ({
-  children,
-  size = "md",
-  spacing = "md",
-  firstLineIndent = false,
-  dropCap = false,
-  style,
-  ...rest
-}) => {
-  const getVariant = () => {
-    switch (size) {
-      case "xs":
-        return "bodyXs";
-      case "sm":
-        return "bodySm";
-      case "lg":
-        return "bodyLg";
-      case "md":
-      default:
-        return "bodyMd";
-    }
-  };
-
-  const getMarginBottom = () => {
-    switch (spacing) {
-      case "none":
-        return tokens.LAYOUT_SPACING_STACK_NONE;
-      case "xs":
-        return remToNumber(tokens.LAYOUT_SPACING_STACK_XS);
-      case "sm":
-        return remToNumber(tokens.LAYOUT_SPACING_STACK_SM);
-      case "lg":
-        return remToNumber(tokens.LAYOUT_SPACING_STACK_LG);
-      case "xl":
-        return remToNumber(tokens.LAYOUT_SPACING_STACK_XL);
-      case "md":
-      default:
-        return remToNumber(tokens.LAYOUT_SPACING_STACK_MD);
-    }
-  };
-
-  const paragraphStyle = {
-    marginBottom: getMarginBottom(),
-    ...(firstLineIndent
-      ? {
-          textIndent: remToNumber(tokens.LAYOUT_SPACING_INLINE_MD) || 20,
-        }
-      : {}),
-    ...style,
-  };
-
-  if (dropCap && typeof children === "string" && children.length > 0) {
-    const firstChar = children.charAt(0);
-    const restOfText = children.slice(1);
-
-    return (
-      <View style={paragraphStyle}>
-        <View style={{ flexDirection: "row", alignItems: "flex-start" }}>
-          <Text
-            variant="headingLg"
-            style={{
-              lineHeight: 1,
-              marginRight:
-                remToNumber(tokens.LAYOUT_SPACING_INLINE_2XS) / 4 || 2,
-              marginTop: -2,
-            }}
-            {...rest}
-          >
-            {firstChar}
-          </Text>
-          <Text variant={getVariant()} {...rest}>
-            {restOfText}
-          </Text>
-        </View>
-      </View>
-    );
-  }
-
-  return (
-    <Text variant={getVariant()} style={paragraphStyle} {...rest}>
-      {children}
-    </Text>
-  );
-};
-
-export default Paragraph;

package/src/components/Paragraph/index.ts

@@ -1,6 +0,0 @@
-export { Paragraph } from "./Paragraph";
-export type {
-  ParagraphProps,
-  ParagraphSize,
-  ParagraphSpacing,
-} from "../../types/Paragraph";

package/src/components/Text/Text.tsx

@@ -1,96 +0,0 @@
-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

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

package/src/components/Typography/Typography.tsx

@@ -1,123 +0,0 @@
-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/types/Heading.ts

@@ -1,27 +0,0 @@
-import { TypographyProps } from "./Typography";
-
-/**
- * Heading levels corresponding to HTML heading elements
- */
-export type HeadingLevel = "h1" | "h2" | "h3" | "h4" | "h5" | "h6";
-
-/**
- * Heading component props
- */
-export interface HeadingProps extends Omit<TypographyProps, "variant"> {
-  /**
-   * The heading level
-   * @default 'h2'
-   */
-  level?: HeadingLevel;
-
-  /**
-   * Optional subtitle to display below the heading
-   */
-  subtitle?: React.ReactNode;
-
-  /**
-   * Props to pass to the subtitle Typography component
-   */
-  subtitleProps?: Omit<TypographyProps, "children">;
-}

package/src/types/Paragraph.ts

@@ -1,40 +0,0 @@
-import { TextProps } from "./Text";
-
-/**
- * Paragraph size options
- */
-export type ParagraphSize = "xs" | "sm" | "md" | "lg";
-
-/**
- * Paragraph spacing options
- */
-export type ParagraphSpacing = "none" | "xs" | "sm" | "md" | "lg" | "xl";
-
-/**
- * Paragraph component props
- */
-export interface ParagraphProps extends TextProps {
-  /**
-   * Size of the paragraph text
-   * @default 'md'
-   */
-  size?: ParagraphSize;
-
-  /**
-   * Spacing below the paragraph
-   * @default 'md'
-   */
-  spacing?: ParagraphSpacing;
-
-  /**
-   * Whether to indent the first line of the paragraph
-   * @default false
-   */
-  firstLineIndent?: boolean;
-
-  /**
-   * Whether to apply a drop cap style to the first letter
-   * @default false
-   */
-  dropCap?: boolean;
-}

package/src/types/Text.ts

@@ -1,40 +0,0 @@
-import { TypographyProps } from "./Typography";
-
-/**
- * Text component props extending Typography props with additional features
- */
-export interface TextProps extends TypographyProps {
-  /**
-   * Whether the text should be underlined
-   * @default false
-   */
-  underline?: boolean;
-
-  /**
-   * Whether the text should have a strikethrough line
-   * @default false
-   */
-  strikethrough?: boolean;
-
-  /**
-   * Whether the text should be italic
-   * @default false
-   */
-  italic?: boolean;
-
-  /**
-   * Whether the text should be styled as a link
-   * @default false
-   */
-  link?: boolean;
-
-  /**
-   * Callback function when the link is pressed
-   * Only used when link prop is true
-   */
-  onLinkPress?: () => void;
-
-  /**
-   * Additional props from Typography component are inherited
-   */
-}