onecart-ui 1.0.1 → 1.0.2

package/src/components/Icon/icons.json

@@ -0,0 +1,81 @@
+{
+  "icons": [
+    {
+      "name": "arrow-up",
+      "path": "M8 3.33325L8 12.6666 M3.33331 7.99992L8 3.33325L12.6666 7.99992",
+      "viewBox": "0 0 16 16"
+    },
+    {
+      "name": "arrow-down",
+      "path": "M8 12.6666L8 3.33325 M12.6667 8.00008L8 12.6667L3.33335 8.00008",
+      "viewBox": "0 0 16 16"
+    },
+    {
+      "name": "arrow-left",
+      "path": "M12.6666 8.00008L3.33331 8.00008 M7.99998 3.33341L3.33331 8.00008L7.99998 12.6667",
+      "viewBox": "0 0 16 16"
+    },
+    {
+      "name": "arrow-right",
+      "path": "M3.33331 8.00008L12.6666 8.00008 M7.99998 12.6667L12.6666 8.00008L7.99998 3.33341",
+      "viewBox": "0 0 16 16"
+    },
+    {
+      "name": "check",
+      "path": "M13.3333 4.66675L6.66667 11.3334L3.33333 8.00008",
+      "viewBox": "0 0 16 16"
+    },
+    {
+      "name": "cross",
+      "path": "M12 4L4 12 M4 4L12 12",
+      "viewBox": "0 0 16 16"
+    },
+    {
+      "name": "plus",
+      "path": "M8 3.33325V12.6666 M3.33331 7.99992H12.6666",
+      "viewBox": "0 0 16 16"
+    },
+    {
+      "name": "minus",
+      "path": "M3.33331 7.99992H12.6666",
+      "viewBox": "0 0 16 16"
+    },
+    {
+      "name": "search",
+      "path": "M7.33333 12.6667C10.2789 12.6667 12.6667 10.2789 12.6667 7.33333C12.6667 4.38781 10.2789 2 7.33333 2C4.38781 2 2 4.38781 2 7.33333C2 10.2789 4.38781 12.6667 7.33333 12.6667Z M12.6667 12.6667L14 14",
+      "viewBox": "0 0 16 16"
+    },
+    {
+      "name": "home",
+      "path": "M2 6L8 2L14 6V14H10V10H6V14H2V6Z",
+      "viewBox": "0 0 16 16",
+      "fill": "currentColor"
+    },
+    {
+      "name": "settings",
+      "path": "M6.4 14H9.6C9.6 14 9.8 13.1 10.4 12.8C11 12.5 11.9 12.8 12.4 12.3C12.8 11.9 12.6 10.9 12.8 10.4C13.1 9.8 14 9.6 14 9.6V6.4C14 6.4 13.1 6.2 12.8 5.6C12.5 5 12.8 4.1 12.3 3.6C11.9 3.2 10.9 3.4 10.4 3.2C9.8 2.9 9.6 2 9.6 2H6.4C6.4 2 6.2 2.9 5.6 3.2C5 3.5 4.1 3.2 3.6 3.7C3.2 4.1 3.4 5.1 3.2 5.6C2.9 6.2 2 6.4 2 6.4V9.6C2 9.6 2.9 9.8 3.2 10.4C3.5 11 3.2 11.9 3.7 12.4C4.1 12.8 5.1 12.6 5.6 12.8C6.2 13.1 6.4 14 6.4 14Z M10 8C10 9.1 9.1 10 8 10C6.9 10 6 9.1 6 8C6 6.9 6.9 6 8 6C9.1 6 10 6.9 10 8Z",
+      "viewBox": "0 0 16 16"
+    },
+    {
+      "name": "user",
+      "path": "M11 4C11 5.65685 9.65685 7 8 7C6.34315 7 5 5.65685 5 4C5 2.34315 6.34315 1 8 1C9.65685 1 11 2.34315 11 4Z M1 14C1 14 1 12 3 11C5 10 11 10 13 11C15 12 15 14 15 14",
+      "viewBox": "0 0 16 16"
+    },
+    {
+      "name": "cart",
+      "path": "M5.5 14C5.77614 14 6 13.7761 6 13.5C6 13.2239 5.77614 13 5.5 13C5.22386 13 5 13.2239 5 13.5C5 13.7761 5.22386 14 5.5 14Z M12.5 14C12.7761 14 13 13.7761 13 13.5C13 13.2239 12.7761 13 12.5 13C12.2239 13 12 13.2239 12 13.5C12 13.7761 12.2239 14 12.5 14Z M1 1H3L4.6 9.6C4.63333 9.74056 4.7247 9.86412 4.85172 9.94984C4.97873 10.0356 5.13221 10.0769 5.28571 10.0714H12.1429C12.2964 10.0769 12.4499 10.0356 12.5769 9.94984C12.7039 9.86412 12.7952 9.74056 12.8286 9.6L14 4H4",
+      "viewBox": "0 0 16 16"
+    },
+    {
+      "name": "heart",
+      "path": "M13.6319 3.36825C13.2475 2.98368 12.7898 2.67897 12.2843 2.47298C11.7788 2.267 11.2371 2.16341 10.69 2.16797C10.1429 2.16341 9.60127 2.267 9.09575 2.47298C8.59023 2.67897 8.13254 2.98368 7.74805 3.36825L7.00005 4.11625L6.25205 3.36825C5.4676 2.58281 4.40687 2.16036 3.31005 2.16797C2.21322 2.16036 1.1525 2.58281 0.368046 3.36825C-0.41646 4.15369 -0.838915 5.21442 -0.83131 6.31125C-0.838915 7.40807 -0.41646 8.4688 0.368046 9.25425L7.00005 15.8862L13.6319 9.25425C14.0165 8.86975 14.3212 8.41207 14.5272 7.90655C14.7332 7.40102 14.8368 6.85936 14.8322 6.31225C14.8368 5.76513 14.7332 5.22347 14.5272 4.71795C14.3212 4.21242 14.0165 3.75474 13.6319 3.37025V3.36825Z",
+      "viewBox": "0 0 16 16"
+    },
+    {
+      "name": "star",
+      "path": "M7.99998 1.33325L10.06 5.5066L14.6666 6.17994L11.3333 9.42661L12.12 14.0133L7.99998 11.8466L3.87998 14.0133L4.66665 9.42661L1.33331 6.17994L5.93998 5.5066L7.99998 1.33325Z",
+      "viewBox": "0 0 16 16",
+      "fill": "currentColor"
+    }
+  ]
+}

package/src/components/Icon/index.ts

@@ -0,0 +1,5 @@
+export { Icon } from './Icon';
+export type { IconProps, IconData } from './Icon';
+export { IconList } from './IconList';
+export type { IconListProps } from './IconList';
+export { icons } from './Icon';

package/src/components/Typography/Body.tsx

@@ -0,0 +1,94 @@
+import React from "react";
+import typographyTokens from "../../styles/tokens/typography";
+import { BodyProps } from "../../types/Typography";
+
+export const Body: React.FC<BodyProps> = ({
+  size = "lg",
+  element = "p",
+  align = "left",
+  weight,
+  color,
+  truncate = false,
+  lineClamp,
+  children,
+  className = "",
+  style = {},
+  onClick,
+  testID,
+  ...rest
+}) => {
+  const getStyles = (): React.CSSProperties => {
+    let tokenSet;
+    switch (size) {
+      case "xl":
+        tokenSet = typographyTokens.bodyXl;
+        break;
+      case "lg":
+        tokenSet = typographyTokens.bodyLg;
+        break;
+      case "md":
+        tokenSet = typographyTokens.bodyMd;
+        break;
+      case "sm":
+        tokenSet = typographyTokens.bodySm;
+        break;
+    }
+
+    let fontWeightValue = parseInt(tokenSet.fontWeight);
+    if (weight) {
+      if (weight === "normal") fontWeightValue = 400;
+      else if (weight === "medium") fontWeightValue = 500;
+      else if (weight === "semibold") fontWeightValue = 600;
+      else if (weight === "bold") fontWeightValue = 700;
+    }
+
+    const baseStyles: React.CSSProperties = {
+      fontFamily: tokenSet.fontFamily,
+      fontSize: `${tokenSet.fontSize}px`,
+      lineHeight: `${tokenSet.lineHeight}px`,
+      fontWeight: fontWeightValue,
+      color: color || tokenSet.color,
+      textAlign: align,
+      letterSpacing: tokenSet.letterSpacing,
+      textDecoration: tokenSet.textDecoration || "none",
+    };
+
+    if (truncate) {
+      baseStyles.whiteSpace = "nowrap";
+      baseStyles.overflow = "hidden";
+      baseStyles.textOverflow = "ellipsis";
+      baseStyles.display = "block";
+    }
+
+    if (lineClamp && lineClamp > 0) {
+      baseStyles.display = "-webkit-box";
+      baseStyles.WebkitLineClamp = lineClamp;
+      baseStyles.WebkitBoxOrient = "vertical";
+      baseStyles.overflow = "hidden";
+      baseStyles.textOverflow = "ellipsis";
+    }
+
+    return baseStyles;
+  };
+
+  const combinedStyles = {
+    ...getStyles(),
+    ...style,
+  };
+
+  const linkProps = element === "a" ? rest : {};
+
+  const Component = element as React.ElementType;
+
+  return (
+    <Component
+      style={combinedStyles}
+      className={className}
+      data-testid={testID}
+      onClick={onClick}
+      {...linkProps}
+    >
+      {children}
+    </Component>
+  );
+};

package/src/components/Typography/Display.tsx

@@ -0,0 +1,79 @@
+import React from "react";
+import typographyTokens from "../../styles/tokens/typography";
+import { DisplayProps } from "../../types/Typography";
+
+export const Display: React.FC<DisplayProps> = ({
+  size = "2xl",
+  element = "h1",
+  align = "left",
+  weight,
+  color,
+  truncate = false,
+  lineClamp,
+  children,
+  className = "",
+  style = {},
+  onClick,
+  testID,
+  ...rest
+}) => {
+  const getStyles = (): React.CSSProperties => {
+    const tokenSet =
+      size === "2xl" ? typographyTokens.display2xl : typographyTokens.displayXl;
+
+    let fontWeightValue = parseInt(tokenSet.fontWeight);
+    if (weight) {
+      if (weight === "normal") fontWeightValue = 400;
+      else if (weight === "medium") fontWeightValue = 500;
+      else if (weight === "semibold") fontWeightValue = 600;
+      else if (weight === "bold") fontWeightValue = 700;
+    }
+
+    const baseStyles: React.CSSProperties = {
+      fontFamily: tokenSet.fontFamily,
+      fontSize: `${tokenSet.fontSize}px`,
+      lineHeight: `${tokenSet.lineHeight}px`,
+      fontWeight: fontWeightValue,
+      color: color || tokenSet.color,
+      textAlign: align,
+      letterSpacing: tokenSet.letterSpacing,
+      textDecoration: tokenSet.textDecoration || "none",
+    };
+
+    if (truncate) {
+      baseStyles.whiteSpace = "nowrap";
+      baseStyles.overflow = "hidden";
+      baseStyles.textOverflow = "ellipsis";
+      baseStyles.display = "block";
+    }
+
+    if (lineClamp && lineClamp > 0) {
+      baseStyles.display = "-webkit-box";
+      baseStyles.WebkitLineClamp = lineClamp;
+      baseStyles.WebkitBoxOrient = "vertical";
+      baseStyles.overflow = "hidden";
+      baseStyles.textOverflow = "ellipsis";
+    }
+
+    return baseStyles;
+  };
+
+  const combinedStyles = {
+    ...getStyles(),
+    ...style,
+  };
+
+  const Component = element as React.ElementType;
+
+  return (
+    <Component
+      style={combinedStyles}
+      className={className}
+      data-testid={testID}
+      onClick={onClick}
+      {...rest}
+    >
+      {children}
+    </Component>
+  );
+};

package/src/components/Typography/Heading.tsx

@@ -0,0 +1,110 @@
+import React from "react";
+import typographyTokens from "../../styles/tokens/typography";
+import { HeadingProps, TypographyWeight } from "../../types/Typography";
+
+type HeadingTokenKey =
+  | "headingXl"
+  | "headingLg"
+  | "headingMd"
+  | "headingSm"
+  | "headingXs";
+
+export const Heading: React.FC<HeadingProps> = ({
+  size = "xl",
+  element = "h2",
+  align = "left",
+  weight,
+  color,
+  truncate = false,
+  lineClamp,
+  children,
+  className = "",
+  style = {},
+  onClick,
+  testID,
+  ...rest
+}) => {
+  const getStyles = (): React.CSSProperties => {
+    const tokenKeyMap: Record<string, HeadingTokenKey> = {
+      xl: "headingXl",
+      lg: "headingLg",
+      md: "headingMd",
+      sm: "headingSm",
+      xs: "headingXs",
+    };
+
+    const tokenSet = typographyTokens[tokenKeyMap[size]];
+
+    const fontWeightValue = weight
+      ? parseInt(typographyTokens.weights[weight])
+      : parseInt(tokenSet.fontWeight);
+
+    const baseStyles: React.CSSProperties = {
+      fontFamily: tokenSet.fontFamily,
+      fontSize: `${tokenSet.fontSize}px`,
+      lineHeight: `${tokenSet.lineHeight}px`,
+      fontWeight: fontWeightValue,
+      color: color || tokenSet.color,
+      textAlign: align,
+      letterSpacing: tokenSet.letterSpacing,
+      textDecoration: tokenSet.textDecoration || "none",
+    };
+
+    const truncationStyles: React.CSSProperties = truncate
+      ? {
+          whiteSpace: "nowrap",
+          overflow: "hidden",
+          textOverflow: "ellipsis",
+          display: "block",
+        }
+      : {};
+
+    const lineClampStyles: React.CSSProperties =
+      lineClamp && lineClamp > 0
+        ? {
+            display: "-webkit-box",
+            WebkitLineClamp: lineClamp,
+            WebkitBoxOrient: "vertical",
+            overflow: "hidden",
+            textOverflow: "ellipsis",
+          }
+        : {};
+
+    return {
+      ...baseStyles,
+      ...truncationStyles,
+      ...lineClampStyles,
+    };
+  };
+
+  const combinedStyles = {
+    ...getStyles(),
+    ...style,
+  };
+
+  const linkProps = element === "a" ? rest : {};
+
+  const headingElementMap: Record<string, React.ElementType> = {
+    xl: "h1",
+    lg: "h2",
+    md: "h3",
+    sm: "h4",
+    xs: "h5",
+  };
+
+  const defaultElement = element === "h2" ? headingElementMap[size] : element;
+
+  const Component = defaultElement as React.ElementType;
+
+  return (
+    <Component
+      style={combinedStyles}
+      className={className}
+      data-testid={testID}
+      onClick={onClick}
+      {...linkProps}
+    >
+      {children}
+    </Component>
+  );
+};

package/src/components/Typography/Utility.tsx

@@ -0,0 +1,107 @@
+import React from "react";
+import typographyTokens from "../../styles/tokens/typography";
+import { UtilityProps } from "../../types/Typography";
+
+export const Utility: React.FC<UtilityProps> = ({
+  variant = "button",
+  element,
+  align = "left",
+  weight,
+  color,
+  truncate = false,
+  lineClamp,
+  children,
+  className = "",
+  style = {},
+  onClick,
+  testID,
+  ...rest
+}) => {
+  const getDefaultElement = () => {
+    switch (variant) {
+      case "button":
+        return "span";
+      case "link":
+        return "a";
+      case "caption":
+        return "span";
+      default:
+        return "span";
+    }
+  };
+
+  const elementToUse = element || getDefaultElement();
+
+  const getStyles = (): React.CSSProperties => {
+    let tokenSet;
+    switch (variant) {
+      case "button":
+        tokenSet = typographyTokens.labelLg;
+        break;
+      case "link":
+        tokenSet = typographyTokens.labelMd;
+        break;
+      case "caption":
+        tokenSet = typographyTokens.labelSm;
+        break;
+    }
+
+    let fontWeightValue = parseInt(tokenSet.fontWeight);
+    if (weight) {
+      if (weight === "normal") fontWeightValue = 400;
+      else if (weight === "medium") fontWeightValue = 500;
+      else if (weight === "semibold") fontWeightValue = 600;
+      else if (weight === "bold") fontWeightValue = 700;
+    }
+
+    const baseStyles: React.CSSProperties = {
+      fontFamily: tokenSet.fontFamily,
+      fontSize: `${tokenSet.fontSize}px`,
+      lineHeight: `${tokenSet.lineHeight}px`,
+      fontWeight: fontWeightValue,
+      color: color || tokenSet.color,
+      textAlign: align,
+      letterSpacing: tokenSet.letterSpacing,
+      textDecoration:
+        variant === "link" ? "underline" : tokenSet.textDecoration || "none",
+    };
+
+    if (truncate) {
+      baseStyles.whiteSpace = "nowrap";
+      baseStyles.overflow = "hidden";
+      baseStyles.textOverflow = "ellipsis";
+      baseStyles.display = "block";
+    }
+
+    if (lineClamp && lineClamp > 0) {
+      baseStyles.display = "-webkit-box";
+      baseStyles.WebkitLineClamp = lineClamp;
+      baseStyles.WebkitBoxOrient = "vertical";
+      baseStyles.overflow = "hidden";
+      baseStyles.textOverflow = "ellipsis";
+    }
+
+    return baseStyles;
+  };
+
+  const combinedStyles = {
+    ...getStyles(),
+    ...style,
+  };
+
+  const linkProps = elementToUse === "a" ? rest : {};
+
+  const Component = elementToUse as React.ElementType;
+
+  return (
+    <Component
+      style={combinedStyles}
+      className={className}
+      data-testid={testID}
+      onClick={onClick}
+      {...linkProps}
+    >
+      {children}
+    </Component>
+  );
+};

package/src/components/Typography/index.ts

@@ -1,7 +1,4 @@
-export { Typography } from "./Typography";
-export type {
-  TypographyProps,
-  TypographyVariant,
-  TypographyAlign,
-  TypographyWeight,
-} from "../../types/Typography";
+export { Display } from "./Display";
+export { Heading } from "./Heading";
+export { Body } from "./Body";
+export { Utility } from "./Utility";

package/src/index.ts

@@ -1,25 +1,16 @@
 // 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";
+export { Display, Heading, Body, Utility } from "./components/Typography";
+export { Icon, IconList, icons } from "./components/Icon";
 
 // 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";
+  ButtonProps,
+  ButtonType,
+  ButtonSize,
+  ButtonState,
+} from "./types/Button";
+export type { IconProps, IconData, IconListProps } from "./components/Icon";
 
 // Theme
 export { ThemeProvider, useTheme } from "./theme/ThemeProvider";

package/src/styles/tokens/tokens-autocomplete-config.json

@@ -1,8 +1,8 @@
 {
 	"--2xl": {
-		"prefix": "--2xl",
+		"prefix": "--xxl",
 		"body": [
-			"var(--2xl)"
+			"var(--xxl)"
 		],
 		"description": "Value: 2rem\\nUnder size category."
 	},

package/src/styles/tokens/tokens.css

@@ -97,7 +97,7 @@
   --md: 1.25rem;
   --lg: 1.5rem;
   --xl: 1.75rem;
-  --2xl: 2rem;
+  --xxl: 2rem;
   --background-yellow-light: #fff5d9;
   --background-yellow-medium: #ffe7a5;
   --background-blue-light: #e3ebff;

package/src/styles/tokens/typography.ts

@@ -79,6 +79,17 @@ export const typographyTokens = {
   },
 
   // Body text variants
+  bodyXl: {
+    fontFamily: tokens.BODY_XL_FONT_FAMILY,
+    fontSize: pxToNumber(tokens.BODY_XL_FONT_SIZE),
+    fontWeight: normalizeFontWeight(tokens.BODY_XL_FONT_WEIGHT),
+    lineHeight: pxToNumber(tokens.BODY_XL_LINE_HEIGHT),
+    color: tokens.TEXT_BODY,
+    letterSpacing: tokens.BODY_XL_LETTER_SPACING,
+    textDecoration: tokens.BODY_XL_TEXT_DECORATION,
+    textCase: tokens.BODY_XL_TEXT_CASE,
+    paragraphIndent: tokens.BODY_XL_PARAGRAPH_INDENT,
+  },
   bodyLg: {
     fontFamily: tokens.BODY_LG_FONT_FAMILY,
     fontSize: pxToNumber(tokens.BODY_LG_FONT_SIZE),

package/src/types/Button.ts

@@ -1,56 +1,27 @@
-export interface ButtonProps {
-  /**
-   * The content to display inside the button
-   */
-  children: React.ReactNode;
+import React from "react";
 
-  /**
-   * The variant of the button
-   */
-  variant?: "primary" | "secondary" | "outline" | "ghost";
+export type ButtonType = "primary" | "outline" | "ghost" | "destructive";
 
-  /**
-   * The size of the button
-   */
-  size?: "sm" | "md" | "lg";
+export type ButtonSize = "medium" | "large";
 
-  /**
-   * Whether the button is disabled
-   */
-  disabled?: boolean;
+export type ButtonState = "default" | "hover" | "active" | "disabled";
 
-  /**
-   * Whether the button should take full width
-   */
+export interface ButtonProps {
+  label: string;
+  type?: ButtonType;
+  size?: ButtonSize;
+  disabled?: boolean;
+  leftIcon?: string;
+  rightIcon?: string;
+  icon?: string;
   fullWidth?: boolean;
-
-  /**
-   * Loading state
-   */
-  loading?: boolean;
-
-  /**
-   * Custom style override
-   */
-  style?: import("react-native").ViewStyle;
-
-  /**
-   * Custom text style override
-   */
-  textStyle?: import("react-native").TextStyle;
-
-  /**
-   * Accessibility label
-   */
+  style?: React.CSSProperties;
   accessibilityLabel?: string;
-
-  /**
-   * Test ID for testing
-   */
   testID?: string;
-
-  /**
-   * Press handler
-   */
-  onPress?: () => void;
+  onClick?: React.MouseEventHandler<HTMLButtonElement>;
+  className?: string;
+  onMouseEnter?: React.MouseEventHandler<HTMLButtonElement>;
+  onMouseLeave?: React.MouseEventHandler<HTMLButtonElement>;
+  onMouseDown?: React.MouseEventHandler<HTMLButtonElement>;
+  onMouseUp?: React.MouseEventHandler<HTMLButtonElement>;
 }