jp-composter 0.1.0

package/src/SliceUI/badge/Badge.tsx

@@ -0,0 +1,308 @@
+import React, {useState, useMemo, useCallback, type ReactNode} from 'react';
+import {
+  Text,
+  Pressable,
+  StyleSheet,
+  Platform,
+  type ViewStyle,
+  type TextStyle,
+  View,
+} from 'react-native';
+import {useSliceTheme} from '../contextProvider/context';
+import {getBackgroundColor, getBorderColor, getTextColor} from './helper';
+import {resolveVariant, scaleFont} from '../responsive/helper';
+import type {SizeType, VariantsType} from './Type';
+import type {BADGE_COLOR_TOKENS} from './Token';
+import {setTestId} from '../automation/helper';
+import type {ExtendedTheme} from '../colors/Type';
+import Typography from '../typography/Typography';
+import {dimensions} from '../values/Dimension';
+import {spacing} from '../values/Spacing';
+import IconMoon from '../IconMoon';
+
+interface BadgeProps {
+  screenName?: string;
+  id?: number | string;
+  text: string | string[];
+  onPress?: () => void;
+  overridedTheme?: any;
+  variant?: BadgeVariantType;
+  size?: string;
+  disabled?: boolean;
+  rounded?: boolean;
+  badgeStyle?: ViewStyle;
+  textStyle?: TextStyle;
+  showSuffixIcon?: boolean;
+  iconName?: string;
+  badgeSelected?: boolean;
+}
+
+export const BADGE_VARIANTS = {
+  CO: 'co',
+  CM: 'cm',
+  NEGATIVE: 'negative',
+  POSITIVE: 'positive',
+  POSTIVE: 'postive',
+} as const;
+
+export type BadgeVariantType =
+  (typeof BADGE_VARIANTS)[keyof typeof BADGE_VARIANTS];
+
+const isWeb = Platform.OS === 'web';
+
+const Badge: React.FC<BadgeProps> = ({
+  screenName = 'default',
+  id = 'default',
+  text,
+  onPress,
+  variant = BADGE_VARIANTS.CO,
+  size = 'medium',
+  disabled = false,
+  rounded = false,
+  showSuffixIcon = false,
+  iconName,
+  badgeStyle,
+  badgeSelected,
+  textStyle,
+}) => {
+  const {theme, deviceBreakpoint} = useSliceTheme();
+  const {isDebugBuildType, automationBaseid} = theme;
+  const [isHovered, setIsHovered] = useState(false);
+  const [isSelected, setIsSelected] = useState(badgeSelected);
+
+  const onPressBadge = () => {
+    setIsSelected(!isSelected);
+    onPress?.();
+  };
+
+  const responsiveSize = useMemo(
+    () => resolveVariant(size, deviceBreakpoint),
+    [size, deviceBreakpoint],
+  );
+
+  const badgeTheme = useMemo(() => {
+    const badgeType = 'solid';
+    const styleKey = rounded ? `${badgeType}Rounded` : badgeType;
+
+    return theme.badgeStyles[responsiveSize as SizeType][
+      styleKey as VariantsType
+    ];
+  }, [responsiveSize, rounded, theme]);
+
+  const textTheme = useMemo(
+    () => theme.badgeTextStyles[responsiveSize as SizeType],
+    [responsiveSize, theme.badgeTextStyles],
+  );
+
+  const defaultBgColor = useMemo(
+    () =>
+      getBackgroundColor(
+        variant as keyof typeof BADGE_COLOR_TOKENS,
+        'default',
+        theme as ExtendedTheme,
+      ),
+    [variant, theme],
+  );
+
+  const hoverBgColor = useMemo(
+    () =>
+      getBackgroundColor(
+        variant as keyof typeof BADGE_COLOR_TOKENS,
+        'hover',
+        theme as ExtendedTheme,
+      ),
+    [variant, theme],
+  );
+
+  const disabledBgColor = useMemo(
+    () =>
+      getBackgroundColor(
+        variant as keyof typeof BADGE_COLOR_TOKENS,
+        'disabled',
+        theme as ExtendedTheme,
+      ),
+    [variant, theme],
+  );
+
+  const pressedBgColor = useMemo(
+    () =>
+      getBackgroundColor(
+        variant as keyof typeof BADGE_COLOR_TOKENS,
+        'pressed',
+        theme as ExtendedTheme,
+      ),
+    [variant, theme],
+  );
+
+  const selectedBgColor = useMemo(
+    () =>
+      getBackgroundColor(
+        variant as keyof typeof BADGE_COLOR_TOKENS,
+        'selected',
+        theme as ExtendedTheme,
+      ),
+    [variant, theme],
+  );
+
+  const borderColor = useMemo(
+    () =>
+      getBorderColor(
+        variant as keyof typeof BADGE_COLOR_TOKENS,
+        isSelected ? 'selected' : 'default',
+        theme as ExtendedTheme,
+      ),
+    [variant, isSelected, theme],
+  );
+
+  const textColor = useMemo(
+    () =>
+      getTextColor(
+        variant as keyof typeof BADGE_COLOR_TOKENS,
+        isSelected ? 'selected' : 'default',
+        theme as ExtendedTheme,
+      ),
+    [variant, isSelected, theme],
+  );
+
+  const opacity = useMemo(() => (disabled ? 0.3 : 1), [disabled]);
+
+  const iconStyleMemo = useMemo(() => {
+    const iconSize = scaleFont(
+      theme?.badgeIconStyles?.[responsiveSize as SizeType]?.size,
+    );
+    return {
+      size: iconSize,
+      color: textColor,
+      paddingRight: spacing.space100,
+      paddingLeft: spacing.space100,
+    };
+  }, [responsiveSize, textColor, theme.badgeIconStyles]);
+
+  const applyIconStyle = useCallback(
+    (icon: ReactNode) =>
+      icon
+        ? React.cloneElement(icon as React.ReactElement, iconStyleMemo)
+        : null,
+    [iconStyleMemo],
+  );
+
+  const combinedButtonStyle = useMemo(
+    () =>
+      StyleSheet.flatten([
+        styles.baseBadge,
+        badgeTheme,
+        {
+          backgroundColor: disabled
+            ? disabledBgColor
+            : isHovered
+            ? hoverBgColor
+            : defaultBgColor,
+          borderColor,
+          opacity,
+        },
+        badgeStyle,
+      ]),
+    [
+      disabled,
+      disabledBgColor,
+      badgeTheme,
+      isHovered,
+      hoverBgColor,
+      defaultBgColor,
+      borderColor,
+      opacity,
+      badgeStyle,
+    ],
+  );
+
+  const pressedBadgeStyle = useMemo(
+    () =>
+      StyleSheet.flatten([
+        combinedButtonStyle,
+        {backgroundColor: pressedBgColor},
+      ]),
+    [combinedButtonStyle, pressedBgColor],
+  );
+
+  const selectedBadgeStyle = useMemo(
+    () =>
+      StyleSheet.flatten([
+        combinedButtonStyle,
+        {backgroundColor: selectedBgColor},
+      ]),
+    [combinedButtonStyle, selectedBgColor],
+  );
+
+  const typographyVariant = useMemo(() => {
+    switch (responsiveSize) {
+      case 'small':
+        return 'captionBold';
+      case 'medium':
+        return 'body2Bold';
+      case 'large':
+        return 'body1Bold';
+      case 'xLarge':
+        return 'heading5Bold';
+      case 'xxLarge':
+        return 'heading4Bold';
+      default:
+        return 'body2Bold';
+    }
+  }, [responsiveSize]);
+
+  const combinedTextStyle = useMemo(
+    () =>
+      StyleSheet.flatten([
+        styles.baseText,
+        {color: textColor},
+        textStyle,
+      ]) as TextStyle,
+    [textColor, textStyle],
+  );
+
+  return (
+    <Pressable
+      onPress={onPressBadge}
+      disabled={disabled}
+      style={({pressed}) =>
+        isSelected
+          ? selectedBadgeStyle
+          : pressed
+          ? pressedBadgeStyle
+          : combinedButtonStyle
+      }
+      {...(isWeb && {
+        onMouseEnter: () => setIsHovered(true),
+        onMouseLeave: () => setIsHovered(false),
+      })}
+      {...(isDebugBuildType && automationBaseid
+        ? setTestId(automationBaseid, screenName, id)
+        : {})}>
+      <Typography style={combinedTextStyle} variant={typographyVariant}>
+        {text}
+      </Typography>
+      {isSelected && showSuffixIcon && iconName && (
+        <View style={{paddingLeft: spacing.space50}}>
+          <IconMoon
+            icon={iconName}
+            color={textColor}
+            size={iconStyleMemo.size}
+          />
+        </View>
+      )}
+    </Pressable>
+  );
+};
+
+const styles = StyleSheet.create({
+  baseBadge: {
+    alignItems: 'center',
+    justifyContent: 'center',
+    flexDirection: 'row',
+  },
+  baseText: {
+    textAlign: 'center',
+  },
+});
+
+export default Badge;

package/src/SliceUI/badge/Token.ts

@@ -0,0 +1,202 @@
+import {spacing} from '../values/Spacing';
+import {borderRadius} from '../values/BorderRadius';
+import type {
+  BadgeIconSizeType,
+  BadgeSizeType,
+  BadgeTextSizeType,
+  SizePadding,
+} from './Type';
+import {TYPOGRAPHY_STYLES} from '../typography/Token';
+import type {TextStyle} from 'react-native';
+import {ICON_SIZES} from '../icon/Token';
+import type {ExtendedTheme} from '../colors/Type';
+
+// Variant styles (shared across sizes)
+const variantStyles = {
+  solid: {borderRadius: borderRadius.borderRadius40},
+  solidRounded: {borderRadius: borderRadius.borderRadiusFull},
+  outline: {borderRadius: borderRadius.borderRadius40, borderWidth: 1},
+  outlineRounded: {
+    borderRadius: borderRadius.borderRadiusFull,
+    borderWidth: 1,
+  },
+} as const;
+
+// Size-specific padding - Badge typically has smaller padding than Chip
+const sizePaddings = {
+  small: {
+    paddingVertical: spacing.space100,
+    paddingHorizontal: spacing.space200,
+  },
+  medium: {
+    paddingVertical: spacing.space150,
+    paddingHorizontal: spacing.space250,
+  },
+  large: {
+    paddingVertical: spacing.space200,
+    paddingHorizontal: spacing.space300,
+  },
+  xLarge: {
+    paddingVertical: spacing.space250,
+    paddingHorizontal: spacing.space350,
+  },
+  xxLarge: {
+    paddingVertical: spacing.space300,
+    paddingHorizontal: spacing.space400,
+  },
+} as const;
+
+// Helper function to create styles for a given size
+const createStylesForSize = (sizePadding: SizePadding) => ({
+  solid: {...variantStyles.solid, ...sizePadding},
+  solidRounded: {
+    ...variantStyles.solidRounded,
+    ...sizePadding,
+  },
+  outline: {
+    ...variantStyles.outline,
+    ...sizePadding,
+  },
+  outlineRounded: {
+    ...variantStyles.outlineRounded,
+    ...sizePadding,
+  },
+});
+
+// Export the badge styles
+export const BADGE_STYLE: BadgeSizeType = {
+  small: createStylesForSize(sizePaddings.small),
+  medium: createStylesForSize(sizePaddings.medium),
+  large: createStylesForSize(sizePaddings.large),
+  xLarge: createStylesForSize(sizePaddings.xLarge),
+  xxLarge: createStylesForSize(sizePaddings.xxLarge),
+};
+
+export function textViewWrapperStyle(
+  textStyle: TextStyle,
+  marginRight?: TextStyle['marginHorizontal'],
+): TextStyle {
+  return {...textStyle, lineHeight: undefined, marginRight};
+}
+
+export const BADGE_TXT_STYLE: BadgeTextSizeType = {
+  small: textViewWrapperStyle(
+    TYPOGRAPHY_STYLES.captionBold as TextStyle,
+    spacing.space50,
+  ),
+  medium: textViewWrapperStyle(
+    TYPOGRAPHY_STYLES.body2Bold as TextStyle,
+    spacing.space50,
+  ),
+  large: textViewWrapperStyle(
+    TYPOGRAPHY_STYLES.body1Bold as TextStyle,
+    spacing.space50,
+  ),
+  xLarge: textViewWrapperStyle(
+    TYPOGRAPHY_STYLES.heading5Bold as TextStyle,
+    spacing.space50,
+  ),
+  xxLarge: textViewWrapperStyle(
+    TYPOGRAPHY_STYLES.heading4Bold as TextStyle,
+    spacing.space50,
+  ),
+};
+
+export const BADGE_ICON_STYLE: BadgeIconSizeType = {
+  xxLarge: ICON_SIZES.medium,
+  xLarge: ICON_SIZES.small,
+  large: ICON_SIZES.xSmall,
+  medium: ICON_SIZES.xxSmall,
+  small: ICON_SIZES.xxSmall,
+};
+
+export const BADGE_ROUNDED_BORDER_RADIUS = borderRadius.borderRadiusFull;
+
+// Color tokens based on the design spec
+export const BADGE_COLOR_TOKENS = {
+  co: {
+    background: {
+      default: (theme: ExtendedTheme) => theme.colors.colorBackgroundNegative, // Red background
+      pressed: (theme: ExtendedTheme) => theme.colors.colorBackgroundNegative,
+      hover: (theme: ExtendedTheme) => theme.colors.colorBackgroundNegative,
+      selected: (theme: ExtendedTheme) => theme.colors.colorBackgroundNegative,
+      disabled: (theme: ExtendedTheme) => theme.colors.colorBackgroundSecondary,
+    },
+    border: {
+      default: (theme: ExtendedTheme) => theme.colors.colorBorderNegative,
+      selected: (theme: ExtendedTheme) => theme.colors.colorBorderNegative,
+    },
+    text: {
+      default: () => '#FFFFFF', // White text on red background
+      selected: () => '#FFFFFF',
+    },
+  },
+  cm: {
+    background: {
+      default: (theme: ExtendedTheme) => theme.colors.colorBackgroundPositive, // Green background
+      pressed: (theme: ExtendedTheme) => theme.colors.colorBackgroundPositive,
+      hover: (theme: ExtendedTheme) => theme.colors.colorBackgroundPositive,
+      selected: (theme: ExtendedTheme) => theme.colors.colorBackgroundPositive,
+      disabled: (theme: ExtendedTheme) => theme.colors.colorBackgroundSecondary,
+    },
+    border: {
+      default: (theme: ExtendedTheme) => theme.colors.colorBorderPositive,
+      selected: (theme: ExtendedTheme) => theme.colors.colorBorderPositive,
+    },
+    text: {
+      default: () => '#FFFFFF', // White text on green background
+      selected: () => '#FFFFFF',
+    },
+  },
+  negative: {
+    background: {
+      default: (theme: ExtendedTheme) => theme.colors.colorBackgroundNegative, // Red background
+      pressed: (theme: ExtendedTheme) => theme.colors.colorBackgroundNegative,
+      hover: (theme: ExtendedTheme) => theme.colors.colorBackgroundNegative,
+      selected: (theme: ExtendedTheme) => theme.colors.colorBackgroundNegative,
+      disabled: (theme: ExtendedTheme) => theme.colors.colorBackgroundSecondary,
+    },
+    border: {
+      default: (theme: ExtendedTheme) => theme.colors.colorBorderNegative,
+      selected: (theme: ExtendedTheme) => theme.colors.colorBorderNegative,
+    },
+    text: {
+      default: () => '#FFFFFF', // White text on red background
+      selected: () => '#FFFFFF',
+    },
+  },
+  positive: {
+    background: {
+      default: (theme: ExtendedTheme) => theme.colors.colorBackgroundPositive, // Green background
+      pressed: (theme: ExtendedTheme) => theme.colors.colorBackgroundPositive,
+      hover: (theme: ExtendedTheme) => theme.colors.colorBackgroundPositive,
+      selected: (theme: ExtendedTheme) => theme.colors.colorBackgroundPositive,
+      disabled: (theme: ExtendedTheme) => theme.colors.colorBackgroundSecondary,
+    },
+    border: {
+      default: (theme: ExtendedTheme) => theme.colors.colorBorderPositive,
+      selected: (theme: ExtendedTheme) => theme.colors.colorBorderPositive,
+    },
+    text: {
+      default: () => '#FFFFFF', // White text on green background
+      selected: () => '#FFFFFF',
+    },
+  },
+  postive: {
+    background: {
+      default: (theme: ExtendedTheme) => theme.colors.colorForegroundPrimary, // Black background
+      pressed: (theme: ExtendedTheme) => theme.colors.colorForegroundSecondary,
+      hover: (theme: ExtendedTheme) => theme.colors.colorForegroundSecondary,
+      selected: (theme: ExtendedTheme) => theme.colors.colorForegroundPrimary,
+      disabled: (theme: ExtendedTheme) => theme.colors.colorBackgroundSecondary,
+    },
+    border: {
+      default: (theme: ExtendedTheme) => theme.colors.colorForegroundPrimary,
+      selected: (theme: ExtendedTheme) => theme.colors.colorForegroundPrimary,
+    },
+    text: {
+      default: () => '#FFFFFF', // White text on black background
+      selected: () => '#FFFFFF',
+    },
+  },
+} as const;

package/src/SliceUI/badge/Type.ts

@@ -0,0 +1,46 @@
+// @ts-ignore
+import type {TextStyle, ViewStyle} from 'react-native';
+
+export type SizeType = 'small' | 'medium' | 'large' | 'xLarge' | 'xxLarge';
+
+export type VariantsType =
+  | 'solid'
+  | 'outline'
+  | 'solidRounded'
+  | 'outlineRounded';
+
+export type BadgeSizeType = {
+  [key in SizeType]: BadgeVariantType;
+};
+
+export type BadgeVariantType = {
+  [key in VariantsType]: ViewStyle;
+};
+
+export type BadgeVariants = {
+  [key in SizeType]: TextStyle;
+};
+
+export type BadgeTextSizeType = {
+  [key in SizeType]: TextStyle;
+};
+
+export type BadgeIconSizeType = {
+  [key in SizeType]: any;
+};
+
+export type BadgeState =
+  | 'default'
+  | 'pressed'
+  | 'hover'
+  | 'disabled'
+  | 'selected';
+
+// Badge variants based on the design spec
+export type BadgeVariant = 'co' | 'cm' | 'negative' | 'positive' | 'postive';
+
+export type SizePadding = {
+  paddingVertical: ViewStyle['paddingVertical'];
+  paddingHorizontal: ViewStyle['paddingHorizontal'];
+};
+

package/src/SliceUI/badge/helper.ts

@@ -0,0 +1,39 @@
+import type {ExtendedTheme} from '../colors/Type';
+import {BADGE_COLOR_TOKENS} from './Token';
+import type {BadgeState} from './Type';
+
+export const getBackgroundColor = (
+  badgeType: keyof typeof BADGE_COLOR_TOKENS,
+  state: BadgeState,
+  theme: ExtendedTheme,
+) => {
+  const variant = BADGE_COLOR_TOKENS[badgeType] || BADGE_COLOR_TOKENS.co;
+  const bg =
+    variant.background[state as keyof typeof variant.background] ||
+    variant.background.default;
+  return bg(theme);
+};
+
+export const getBorderColor = (
+  badgeType: keyof typeof BADGE_COLOR_TOKENS,
+  state: BadgeState,
+  theme: ExtendedTheme,
+) => {
+  const variant = BADGE_COLOR_TOKENS[badgeType] || BADGE_COLOR_TOKENS.co;
+  const border =
+    variant.border[state as keyof typeof variant.border] ||
+    variant.border.default;
+  return border(theme);
+};
+
+export const getTextColor = (
+  badgeType: keyof typeof BADGE_COLOR_TOKENS,
+  state: BadgeState,
+  theme: ExtendedTheme,
+) => {
+  const variant = BADGE_COLOR_TOKENS[badgeType] || BADGE_COLOR_TOKENS.co;
+  const text =
+    variant.text[state as keyof typeof variant.text] || variant.text.default;
+  return text(theme);
+};
+