onecart-ui 1.0.1 → 1.0.2

package/src/components/Button/Button.tsx

@@ -1,155 +1,254 @@
-import React from "react";
-import {
-  TouchableOpacity,
-  Text,
-  ActivityIndicator,
-  ViewStyle,
-  TextStyle,
-} from "react-native";
-import { buttonTokens } from "../../styles/tokens";
-import { ButtonProps } from "../../types/Button";
+import React, { useState } from "react";
+import { ButtonProps, ButtonState } from "../../types/Button";
+import { Icon } from "../Icon";
 
 export const Button: React.FC<ButtonProps> = ({
-  children,
-  variant = "primary",
-  size = "md",
+  label,
+  type = "primary",
+  size = "large",
   disabled = false,
+  leftIcon,
+  rightIcon,
+  icon,
   fullWidth = false,
-  loading = false,
   style,
-  textStyle,
   accessibilityLabel,
   testID,
-  onPress,
+  onClick,
+  className,
+  onMouseEnter,
+  onMouseLeave,
+  onMouseDown,
+  onMouseUp,
 }) => {
-  // Calculate variant styles
-  const variantStyles = React.useMemo(() => {
-    try {
-      const sizeConfig = buttonTokens.sizes[size];
-      const variantConfig = buttonTokens[variant];
-
-      const baseStyle: ViewStyle = {
-        borderRadius: sizeConfig.borderRadius,
-        borderWidth: buttonTokens.common.borderWidth,
-        alignItems: "center",
-        justifyContent: "center",
-        flexDirection: "row",
-      };
-
-      return {
-        ...baseStyle,
-        backgroundColor: disabled
-          ? variantConfig.background.disabled
-          : variantConfig.background.default,
-        borderColor: disabled
-          ? variantConfig.border.disabled
-          : variantConfig.border.default,
-      };
-    } catch (error) {
-      // Fallback styles
-      return {
-        backgroundColor: variant === "primary" ? "#007AFF" : "transparent",
-        borderColor: variant === "primary" ? "#007AFF" : "#E5E5EA",
-        borderWidth: 1,
-        borderRadius: 4,
-        alignItems: "center",
-        justifyContent: "center",
-        flexDirection: "row",
-      };
+  const isIconOnly = !!icon;
+
+  // Create icon components from icon names
+  const leftIconComponent = leftIcon ? (
+    <Icon name={leftIcon} size={size === "large" ? 20 : 16} />
+  ) : null;
+  const rightIconComponent = rightIcon ? (
+    <Icon name={rightIcon} size={size === "large" ? 20 : 16} />
+  ) : null;
+  const iconButton = icon ? (
+    <Icon name={icon} size={size === "large" ? 20 : 16} />
+  ) : null;
+
+  const [buttonState, setButtonState] = useState<ButtonState>(
+    disabled ? "disabled" : "default"
+  );
+
+  const hasBothIcons = leftIcon && rightIcon;
+
+  // Base button styles
+  const getBaseStyles = (): React.CSSProperties => {
+    const baseStyle: React.CSSProperties = {
+      display: isIconOnly ? "inline-flex" : "flex",
+      width: isIconOnly ? "auto" : fullWidth ? "100%" : "9.375rem",
+      height: size === "large" ? "2.75rem" : "2rem",
+      padding:
+        type === "ghost"
+          ? "var(--spacing-0, 0rem)"
+          : "var(--component-card-sm, 0.75rem)",
+      justifyContent: "center",
+      alignItems: "center",
+      gap: hasBothIcons
+        ? "var(--layout-spacing-inline-md, 1rem)"
+        : "var(--layout-spacing-inline-xs, 0.5rem)",
+      flexShrink: 0,
+      borderRadius: "var(--button-full, 62.4375rem)",
+      cursor: disabled ? "not-allowed" : "pointer",
+      opacity: disabled ? 0.6 : 1,
+      transition: "all 0.2s ease-in-out",
+      border: "none",
+    };
+
+    // Apply styles based on type and state
+    switch (type) {
+      case "primary":
+        switch (buttonState) {
+          case "default":
+            baseStyle.background = "var(--action-primary-default, #00DF88)";
+            break;
+          case "hover":
+            baseStyle.background = "var(--action-primary-hover, #4CE9AC)";
+            break;
+          case "active":
+            baseStyle.background = "var(--action-primary-active, #98F2CF)";
+            break;
+          case "disabled":
+            baseStyle.background = "var(--action-primary-disabled, #00DF88)";
+            baseStyle.opacity = 0.6;
+            break;
+        }
+        break;
+      case "outline":
+        baseStyle.background = "transparent";
+        switch (buttonState) {
+          case "default":
+            baseStyle.border =
+              "var(--button-default, 1px) solid var(--action-tertiary-default, #3B3B3B)";
+            break;
+          case "hover":
+            baseStyle.border =
+              "var(--button-hover, 2px) solid var(--action-tertiary-hover, #111)";
+            break;
+          case "active":
+            baseStyle.border =
+              "var(--button-pressed, 2px) solid var(--action-tertiary-active, #ABABAB)";
+            break;
+          case "disabled":
+            baseStyle.border =
+              "var(--button-default, 1px) solid var(--action-tertiary-disabled, #3B3B3B)";
+            baseStyle.opacity = 0.6;
+            break;
+        }
+        break;
+      case "ghost":
+        baseStyle.background = "transparent";
+        break;
+      case "destructive":
+        baseStyle.background = "transparent";
+        switch (buttonState) {
+          case "default":
+            baseStyle.color = "var(--action-destructive-hover, #FF3B30)";
+            break;
+          case "hover":
+            baseStyle.color = "var(--action-destructive-default, #D60000)";
+            break;
+          case "active":
+            baseStyle.color = "var(--action-destructive-active, #FF6259)";
+            break;
+          case "disabled":
+            baseStyle.color = "var(--action-destructive-disabled, #D60000)";
+            baseStyle.opacity = 0.6;
+            break;
+        }
+        break;
     }
-  }, [variant, size, disabled]);
-
-  // Calculate size styles
-  const sizeStyles = React.useMemo(() => {
-    try {
-      const sizeConfig = buttonTokens.sizes[size];
-      return {
-        paddingHorizontal: sizeConfig.paddingHorizontal,
-        paddingVertical: sizeConfig.paddingVertical,
-        minHeight: sizeConfig.minHeight,
-      };
-    } catch (error) {
-      // Fallback styles
-      return {
-        paddingHorizontal: 16,
-        paddingVertical: 8,
-        minHeight: size === "sm" ? 32 : size === "lg" ? 48 : 40,
-      };
+
+    return { ...baseStyle, ...style };
+  };
+
+  const getTextStyles = (): React.CSSProperties => {
+    const textStyle: React.CSSProperties = {
+      fontFamily:
+        'system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
+      fontWeight: 500,
+      fontSize: size === "large" ? "1rem" : "0.875rem",
+      transition: "all 0.2s ease-in-out",
+    };
+
+    switch (type) {
+      case "primary":
+        textStyle.color = "var(--neutral-80, #3B3B3B)";
+        break;
+      case "outline":
+        switch (buttonState) {
+          case "default":
+            textStyle.color = "var(--action-tertiary-default, #3B3B3B)";
+            break;
+          case "hover":
+            textStyle.color = "var(--action-tertiary-hover, #111)";
+            break;
+          case "active":
+            textStyle.color = "var(--action-tertiary-active, #ABABAB)";
+            break;
+          case "disabled":
+            textStyle.color = "var(--action-tertiary-disabled, #3B3B3B)";
+            break;
+        }
+        break;
+      case "ghost":
+        switch (buttonState) {
+          case "default":
+            textStyle.color = "var(--action-tertiary-default, #3B3B3B)";
+            break;
+          case "hover":
+            textStyle.color = "var(--action-tertiary-hover, #111)";
+            break;
+          case "active":
+            textStyle.color = "var(--action-tertiary-active, #ABABAB)";
+            break;
+          case "disabled":
+            textStyle.color = "var(--action-tertiary-disabled, #3B3B3B)";
+            break;
+        }
+        break;
+      case "destructive":
+        break;
     }
-  }, [size]);
-
-  // Calculate text styles
-  const textStyles = React.useMemo(() => {
-    try {
-      const sizeConfig = buttonTokens.sizes[size];
-      const variantConfig = buttonTokens[variant];
-
-      const baseTextStyle: TextStyle = {
-        fontSize: sizeConfig.fontSize,
-        fontWeight: buttonTokens.common.fontWeight as any,
-        lineHeight: buttonTokens.common.lineHeight,
-        color: disabled
-          ? variantConfig.text.disabled
-          : variantConfig.text.default,
-      };
-
-      return {
-        ...baseTextStyle,
-        ...textStyle,
-      };
-    } catch (error) {
-      // Fallback styles
-      return {
-        fontSize: size === "sm" ? 12 : size === "lg" ? 18 : 16,
-        fontWeight: "500",
-        color: disabled
-          ? "#8E8E93"
-          : variant === "primary"
-            ? "#FFFFFF"
-            : "#007AFF",
-        ...textStyle,
-      };
+
+    return textStyle;
+  };
+
+  // Icon styles
+  const getIconStyles = (): React.CSSProperties => {
+    return {
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center",
+      color: "currentColor",
+    };
+  };
+
+  // Event handlers for state changes
+  const handleMouseEnter = (e: React.MouseEvent<HTMLButtonElement>) => {
+    if (!disabled) {
+      setButtonState("hover");
+      onMouseEnter && onMouseEnter(e);
     }
-  }, [variant, size, disabled, textStyle]);
+  };
 
-  // Handle button press
-  const handlePress = React.useCallback(() => {
-    if (!disabled && !loading && onPress) {
-      onPress();
+  const handleMouseLeave = (e: React.MouseEvent<HTMLButtonElement>) => {
+    if (!disabled) {
+      setButtonState("default");
+      onMouseLeave && onMouseLeave(e);
     }
-  }, [disabled, loading, onPress]);
-
-  // Combine all styles
-  const buttonStyles = React.useMemo(
-    () => ({
-      ...variantStyles,
-      ...sizeStyles,
-      ...(fullWidth && { width: "100%" }),
-      ...(disabled && { opacity: 0.6 }),
-      ...style,
-    }),
-    [variantStyles, sizeStyles, fullWidth, disabled, style]
-  );
+  };
+
+  const handleMouseDown = (e: React.MouseEvent<HTMLButtonElement>) => {
+    if (!disabled) {
+      setButtonState("active");
+      onMouseDown && onMouseDown(e);
+    }
+  };
+
+  const handleMouseUp = (e: React.MouseEvent<HTMLButtonElement>) => {
+    if (!disabled) {
+      setButtonState("hover");
+      onMouseUp && onMouseUp(e);
+    }
+  };
 
   return (
-    <TouchableOpacity
-      style={buttonStyles}
-      onPress={handlePress}
-      disabled={disabled || loading}
-      accessibilityLabel={accessibilityLabel}
-      accessibilityRole="button"
-      testID={testID}
+    <button
+      style={getBaseStyles()}
+      onClick={onClick}
+      disabled={disabled}
+      aria-label={accessibilityLabel || label}
+      data-testid={testID}
+      className={className}
+      onMouseEnter={handleMouseEnter}
+      onMouseLeave={handleMouseLeave}
+      onMouseDown={handleMouseDown}
+      onMouseUp={handleMouseUp}
     >
-      {loading && (
-        <ActivityIndicator
-          size="small"
-          color={
-            typeof textStyles.color === "string" ? textStyles.color : "#000000"
-          }
-          style={{ marginRight: 8 }}
-        />
+      {!isIconOnly && leftIcon && (
+        <span style={getIconStyles()} className="button-left-icon">
+          {leftIconComponent}
+        </span>
+      )}
+
+      {!isIconOnly && <span style={getTextStyles()}>{label}</span>}
+
+      {isIconOnly && <span style={getIconStyles()}>{iconButton}</span>}
+
+      {!isIconOnly && rightIcon && (
+        <span style={getIconStyles()} className="button-right-icon">
+          {rightIconComponent}
+        </span>
       )}
-      <Text style={textStyles}>{children}</Text>
-    </TouchableOpacity>
+    </button>
   );
 };

package/src/components/Button/index.ts

@@ -1,2 +1,7 @@
-export { Button } from './Button';
-export type { ButtonProps } from '../../types/Button';
+export { Button } from "./Button";
+export type {
+  ButtonProps,
+  ButtonType,
+  ButtonSize,
+  ButtonState,
+} from "../../types/Button";

package/src/components/Icon/Icon.tsx

@@ -0,0 +1,113 @@
+import React from 'react';
+import iconData from './icons.json';
+
+export interface IconProps {
+  /**
+   * Name of the icon to display
+   */
+  name: string;
+
+  /**
+   * Size of the icon in pixels
+   */
+  size?: number;
+
+  /**
+   * Color of the icon
+   */
+  color?: string;
+
+  /**
+   * Optional CSS class name
+   */
+  className?: string;
+
+  /**
+   * Optional style overrides
+   */
+  style?: React.CSSProperties;
+
+  /**
+   * Optional click handler
+   */
+  onClick?: React.MouseEventHandler<SVGSVGElement>;
+
+  /**
+   * Aria label for accessibility
+   */
+  ariaLabel?: string;
+}
+
+export interface IconData {
+  name: string;
+  path: string;
+  viewBox: string;
+  fill?: string;
+}
+
+// Export icon data for use in other components
+export const icons: IconData[] = iconData.icons;
+
+// Create a map of icon names to icon data for quick lookup
+const iconMap = new Map<string, IconData>();
+icons.forEach((icon) => {
+  iconMap.set(icon.name, icon);
+});
+
+export const Icon: React.FC<IconProps> = ({
+  name,
+  size = 24,
+  color = 'currentColor',
+  className = '',
+  style = {},
+  onClick,
+  ariaLabel,
+}) => {
+  // Find the icon data for the given name
+  const iconInfo = iconMap.get(name);
+
+  // If the icon doesn't exist, return null or a fallback
+  if (!iconInfo) {
+    console.warn(`Icon "${name}" not found`);
+    return null;
+  }
+
+  // Split the path string into multiple paths if it contains multiple commands
+  const paths = iconInfo.path.split(' M ').map((path, index) => 
+    index === 0 ? path : `M ${path}`
+  );
+
+  // Combine the style props
+  const combinedStyle: React.CSSProperties = {
+    display: 'inline-block',
+    verticalAlign: 'middle',
+    ...style,
+  };
+
+  return (
+    <svg
+      width={size}
+      height={size}
+      viewBox={iconInfo.viewBox}
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      className={className}
+      style={combinedStyle}
+      onClick={onClick}
+      aria-label={ariaLabel || `${name} icon`}
+      role="img"
+    >
+      {paths.map((path, index) => (
+        <path
+          key={index}
+          d={path}
+          stroke={iconInfo.fill ? 'none' : color}
+          fill={iconInfo.fill ? color : 'none'}
+          strokeWidth="1.5"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+      ))}
+    </svg>
+  );
+};

package/src/components/Icon/IconList.tsx

@@ -0,0 +1,110 @@
+import React from 'react';
+import { Icon, icons, IconData } from './Icon';
+
+export interface IconListProps {
+  /**
+   * Search query to filter icons
+   */
+  searchQuery?: string;
+
+  /**
+   * Size of each icon
+   */
+  iconSize?: number;
+
+  /**
+   * Color of each icon
+   */
+  iconColor?: string;
+
+  /**
+   * Function to handle when an icon is clicked
+   */
+  onIconClick?: (iconName: string) => void;
+}
+
+export const IconList: React.FC<IconListProps> = ({
+  searchQuery = '',
+  iconSize = 24,
+  iconColor = 'currentColor',
+  onIconClick,
+}) => {
+  // Filter icons based on the search query
+  const filteredIcons = searchQuery
+    ? icons.filter(icon => 
+        icon.name.toLowerCase().includes(searchQuery.toLowerCase())
+      )
+    : icons;
+
+  const handleIconClick = (iconName: string) => {
+    if (onIconClick) {
+      onIconClick(iconName);
+    }
+  };
+
+  return (
+    <div>
+      {filteredIcons.length === 0 ? (
+        <div style={{ padding: '20px', textAlign: 'center' }}>
+          No icons found matching "{searchQuery}"
+        </div>
+      ) : (
+        <div
+          style={{
+            display: 'grid',
+            gridTemplateColumns: 'repeat(auto-fill, minmax(100px, 1fr))',
+            gap: '20px',
+          }}
+        >
+          {filteredIcons.map((icon: IconData) => (
+            <div
+              key={icon.name}
+              style={{
+                display: 'flex',
+                flexDirection: 'column',
+                alignItems: 'center',
+                padding: '12px',
+                border: '1px solid #eee',
+                borderRadius: '8px',
+                cursor: onIconClick ? 'pointer' : 'default',
+                transition: 'all 0.2s ease-in-out',
+              }}
+              onClick={() => handleIconClick(icon.name)}
+              onMouseOver={(e) => {
+                e.currentTarget.style.backgroundColor = '#f9f9f9';
+                e.currentTarget.style.transform = 'translateY(-2px)';
+                e.currentTarget.style.boxShadow = '0 2px 8px rgba(0,0,0,0.05)';
+              }}
+              onMouseOut={(e) => {
+                e.currentTarget.style.backgroundColor = 'transparent';
+                e.currentTarget.style.transform = 'translateY(0)';
+                e.currentTarget.style.boxShadow = 'none';
+              }}
+            >
+              <div
+                style={{
+                  display: 'flex',
+                  alignItems: 'center',
+                  justifyContent: 'center',
+                  height: '50px',
+                  marginBottom: '8px',
+                }}
+              >
+                <Icon name={icon.name} size={iconSize} color={iconColor} />
+              </div>
+              <div
+                style={{
+                  fontSize: '12px',
+                  textAlign: 'center',
+                  wordBreak: 'break-word',
+                }}
+              >
+                {icon.name}
+              </div>
+            </div>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+};