jp-composter 0.1.0

package/src/SliceUI/checkbox/Token.ts

@@ -0,0 +1,128 @@
+import {dimensions} from '../values/Dimension';
+import type {CheckboxThemeSize} from './Type';
+
+export const CHECKBOX_THEME: CheckboxThemeSize = {
+  small: {
+    default: {
+      container: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        minHeight: dimensions.dimension17,
+      },
+      box: {
+        width: dimensions.dimension07,
+        height: dimensions.dimension07,
+        borderRadius: 4,
+        borderWidth: 2,
+        borderColor: '#888',
+        justifyContent: 'center',
+        alignItems: 'center',
+        marginRight: dimensions.dimension04,
+      },
+      check: {
+        width: dimensions.dimension05,
+        height: dimensions.dimension05,
+        backgroundColor: '#888',
+        borderRadius: 2,
+      },
+      label: {fontSize: dimensions.dimension06, color: '#222'},
+      description: {fontSize: dimensions.dimension05, color: '#666'},
+    },
+    error: {
+      container: {},
+      box: {borderColor: '#E53935'},
+      check: {backgroundColor: '#E53935'},
+      label: {color: '#E53935'},
+      description: {color: '#E53935'},
+    },
+    disabled: {
+      container: {},
+      box: {borderColor: '#CCC', backgroundColor: '#F5F5F5'},
+      check: {backgroundColor: '#CCC'},
+      label: {color: '#CCC'},
+      description: {color: '#CCC'},
+    },
+  },
+  medium: {
+    default: {
+      container: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        minHeight: dimensions.dimension18,
+      },
+      box: {
+        width: dimensions.dimension08,
+        height: dimensions.dimension08,
+        borderRadius: 4,
+        borderWidth: 2,
+        borderColor: '#888',
+        justifyContent: 'center',
+        alignItems: 'center',
+        marginRight: dimensions.dimension05,
+      },
+      check: {
+        width: dimensions.dimension06,
+        height: dimensions.dimension06,
+        backgroundColor: '#888',
+        borderRadius: 2,
+      },
+      label: {fontSize: dimensions.dimension07, color: '#222'},
+      description: {fontSize: dimensions.dimension06, color: '#666'},
+    },
+    error: {
+      container: {},
+      box: {borderColor: '#E53935'},
+      check: {backgroundColor: '#E53935'},
+      label: {color: '#E53935'},
+      description: {color: '#E53935'},
+    },
+    disabled: {
+      container: {},
+      box: {borderColor: '#CCC', backgroundColor: '#F5F5F5'},
+      check: {backgroundColor: '#CCC'},
+      label: {color: '#CCC'},
+      description: {color: '#CCC'},
+    },
+  },
+  large: {
+    default: {
+      container: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        minHeight: dimensions.dimension19,
+      },
+      box: {
+        width: dimensions.dimension09,
+        height: dimensions.dimension09,
+        borderRadius: 4,
+        borderWidth: 2,
+        borderColor: '#888',
+        justifyContent: 'center',
+        alignItems: 'center',
+        marginRight: dimensions.dimension06,
+      },
+      check: {
+        width: dimensions.dimension07,
+        height: dimensions.dimension07,
+        backgroundColor: '#888',
+        borderRadius: 2,
+      },
+      label: {fontSize: dimensions.dimension08, color: '#222'},
+      description: {fontSize: dimensions.dimension07, color: '#666'},
+    },
+    error: {
+      container: {},
+      box: {borderColor: '#E53935'},
+      check: {backgroundColor: '#E53935'},
+      label: {color: '#E53935'},
+      description: {color: '#E53935'},
+    },
+    disabled: {
+      container: {},
+      box: {borderColor: '#CCC', backgroundColor: '#F5F5F5'},
+      check: {backgroundColor: '#CCC'},
+      label: {color: '#CCC'},
+      description: {color: '#CCC'},
+    },
+  },
+};

package/src/SliceUI/checkbox/Type.ts

@@ -0,0 +1,35 @@
+import {ViewStyle, TextStyle} from 'react-native';
+
+export type CheckboxSize = 'small' | 'medium' | 'large';
+export type CheckboxVariant = 'default' | 'error' | 'disabled';
+
+export interface CheckboxProps {
+  checked: boolean;
+  onPress: () => void;
+  label: string;
+  size?: CheckboxSize;
+  variant?: CheckboxVariant;
+  disabled?: boolean;
+  style?: ViewStyle;
+  labelStyle?: TextStyle;
+  description?: string;
+  descriptionStyle?: TextStyle;
+  prefixIcon?: React.ReactNode;
+  suffixIcon?: React.ReactNode;
+}
+
+export interface CheckboxTheme {
+  container: ViewStyle;
+  box: ViewStyle;
+  check: ViewStyle;
+  label: TextStyle;
+  description: TextStyle;
+}
+
+export type CheckboxThemeVariant = {
+  [key in CheckboxVariant]: CheckboxTheme;
+};
+
+export type CheckboxThemeSize = {
+  [key in CheckboxSize]: CheckboxThemeVariant;
+};

package/src/SliceUI/chip/Chip.tsx

@@ -0,0 +1,290 @@
+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 {useGetColors} from '../theme/dummyColors';
+import {getBackgroundColor, getBorderColor, getTextColor} from './helper';
+import {resolveVariant, scaleFont} from '../responsive/helper';
+import type {SizeType, VariantsType} from './Type';
+import type {CHIP_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 ChipProps {
+  screenName?: string;
+  id?: number | string;
+  text: string | string[];
+  onPress?: () => void;
+  overridedTheme?: any;
+  variant?: ChipVariantType;
+  size?: string;
+  disabled?: boolean;
+  rounded?: boolean;
+  chipStyle?: ViewStyle;
+  textStyle?: TextStyle;
+  showSuffixIcon?: boolean;
+  iconName?: string;
+  chipSelected?: boolean;
+}
+
+export const CHIP_VARIANTS = {
+  PRIMARY: 'primary',
+  PRIMARY_OUTLINE: 'primaryOutline',
+} as const;
+
+export type ChipVariantType =
+  (typeof CHIP_VARIANTS)[keyof typeof CHIP_VARIANTS];
+
+const isWeb = Platform.OS === 'web';
+
+const Chip: React.FC<ChipProps> = ({
+  screenName = 'default',
+  id = 'default',
+  text,
+  onPress,
+  variant = CHIP_VARIANTS.PRIMARY,
+  size = 'medium',
+  disabled = false,
+  rounded = false,
+  showSuffixIcon = false,
+  iconName,
+  chipStyle,
+  chipSelected,
+  textStyle,
+}) => {
+  const {theme, deviceBreakpoint} = useSliceTheme();
+  const {isDebugBuildType, automationBaseid} = theme;
+  const [isHovered, setIsHovered] = useState(false);
+  const [isSelected, setIsSelected] = useState(chipSelected);
+
+  const onPressChip = () => {
+    setIsSelected(!isSelected);
+    onPress?.();
+  };
+
+  const responsiveSize = useMemo(
+    () => resolveVariant(size, deviceBreakpoint),
+    [size, deviceBreakpoint],
+  );
+
+  const chipTheme = useMemo(() => {
+    const chipType = 'outline';
+    const styleKey = rounded ? `${chipType}Rounded` : chipType;
+
+    return theme.chipStyles[responsiveSize as SizeType][
+      styleKey as VariantsType
+    ];
+  }, [responsiveSize, rounded, theme]);
+
+  const textTheme = useMemo(
+    () => theme.chipTextStyles[responsiveSize as SizeType],
+    [responsiveSize, theme.chipTextStyles],
+  );
+
+  const defaultBgColor = useMemo(
+    () =>
+      getBackgroundColor(
+        variant as keyof typeof CHIP_COLOR_TOKENS,
+        'default',
+        theme as ExtendedTheme,
+      ),
+    [variant, theme],
+  );
+
+  const hoverBgColor = useMemo(
+    () =>
+      getBackgroundColor(
+        variant as keyof typeof CHIP_COLOR_TOKENS,
+        'hover',
+        theme as ExtendedTheme,
+      ),
+    [variant, theme],
+  );
+
+  const disabledBgColor = useMemo(
+    () =>
+      getBackgroundColor(
+        variant as keyof typeof CHIP_COLOR_TOKENS,
+        'disabled',
+        theme as ExtendedTheme,
+      ),
+    [variant, theme],
+  );
+
+  const pressedBgColor = useMemo(
+    () =>
+      getBackgroundColor(
+        variant as keyof typeof CHIP_COLOR_TOKENS,
+        'pressed',
+        theme as ExtendedTheme,
+      ),
+    [variant, theme],
+  );
+
+  const selectedBgColor = useMemo(
+    () =>
+      getBackgroundColor(
+        variant as keyof typeof CHIP_COLOR_TOKENS,
+        'selected',
+        theme as ExtendedTheme,
+      ),
+    [variant, theme],
+  );
+
+  const borderColor = useMemo(
+    () =>
+      getBorderColor(
+        variant as keyof typeof CHIP_COLOR_TOKENS,
+        isSelected ? 'selected' : 'default',
+        theme as ExtendedTheme,
+      ),
+    [variant, isSelected, theme],
+  );
+
+  const textColor = useMemo(
+    () =>
+      getTextColor(
+        variant as keyof typeof CHIP_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?.chipIconStyles?.[responsiveSize as SizeType]?.size,
+    );
+    return {
+      size: iconSize,
+      color: textColor,
+      paddingRight: spacing.space500 + spacing.space500,
+      paddingLeft: spacing.space500 + spacing.space500,
+    };
+  }, [responsiveSize, textColor, theme.chipIconStyles]);
+
+  const applyIconStyle = useCallback(
+    (icon: ReactNode) =>
+      icon
+        ? React.cloneElement(icon as React.ReactElement, iconStyleMemo)
+        : null,
+    [iconStyleMemo],
+  );
+
+  const combinedButtonStyle = useMemo(
+    () =>
+      StyleSheet.flatten([
+        styles.baseChip,
+        chipTheme,
+        {
+          backgroundColor: disabled
+            ? disabledBgColor
+            : isHovered
+            ? hoverBgColor
+            : defaultBgColor,
+          borderColor,
+          opacity,
+        },
+        chipStyle,
+      ]),
+    [
+      disabled,
+      disabledBgColor,
+      chipTheme,
+      isHovered,
+      hoverBgColor,
+      defaultBgColor,
+      borderColor,
+      opacity,
+      chipStyle,
+    ],
+  );
+
+  const pressedChipStyle = useMemo(
+    () =>
+      StyleSheet.flatten([
+        combinedButtonStyle,
+        {backgroundColor: pressedBgColor},
+      ]),
+    [combinedButtonStyle, pressedBgColor],
+  );
+
+  const selectedChipStyle = useMemo(
+    () =>
+      StyleSheet.flatten([
+        combinedButtonStyle,
+        {backgroundColor: selectedBgColor},
+      ]),
+    [combinedButtonStyle, selectedBgColor],
+  );
+
+  const combinedTextStyle = useMemo(
+    () =>
+      StyleSheet.flatten([
+        styles.baseText,
+
+        {color: textColor, fontSize: scaleFont(textTheme.fontSize)},
+        textStyle,
+      ]) as TextStyle,
+    [textTheme, textColor, textStyle],
+  );
+
+  return (
+    <Pressable
+      onPress={onPressChip}
+      disabled={disabled}
+      style={({pressed}) =>
+        isSelected
+          ? selectedChipStyle
+          : pressed
+          ? pressedChipStyle
+          : combinedButtonStyle
+      }
+      {...(isWeb && {
+        onMouseEnter: () => setIsHovered(true),
+        onMouseLeave: () => setIsHovered(false),
+      })}
+      {...(isDebugBuildType && automationBaseid
+        ? setTestId(automationBaseid, screenName, id)
+        : {})}>
+      <Typography style={combinedTextStyle} variant="body1">
+        {text}
+      </Typography>
+      {isSelected && showSuffixIcon && iconName && (
+        <View style={{paddingLeft: spacing.space100}}>
+          <IconMoon
+            icon={iconName}
+            color={textColor}
+            size={iconStyleMemo.size}
+          />
+        </View>
+      )}
+    </Pressable>
+  );
+};
+
+const styles = StyleSheet.create({
+  baseChip: {
+    alignItems: 'center',
+    justifyContent: 'center',
+    flexDirection: 'row',
+  },
+  baseText: {
+    textAlign: 'center',
+  },
+});
+
+export default Chip;

package/src/SliceUI/chip/Token.ts

@@ -0,0 +1,151 @@
+import { spacing } from '../values/Spacing';
+import { borderRadius } from '../values/BorderRadius';
+import type {
+  ChipIconSizeType,
+  ChipSizeType,
+  ChipTextSizeType,
+  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
+const sizePaddings = {
+  small: { paddingVertical: spacing.space150, paddingHorizontal: spacing.space300 },
+  medium: { paddingVertical: spacing.space150, paddingHorizontal: spacing.space300 },
+  large: { paddingVertical: spacing.space400, paddingHorizontal: spacing.space450 },
+  xLarge: { paddingVertical: spacing.space400, paddingHorizontal: spacing.space450 },
+  xxLarge: { paddingVertical: spacing.space400, paddingHorizontal: spacing.space450 }
+} 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 button styles
+export const CHIP_STYLE: ChipSizeType = {
+  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 CHIP_TXT_STYLE: ChipTextSizeType = {
+  small: textViewWrapperStyle(
+    TYPOGRAPHY_STYLES.body2Bold as TextStyle,
+    spacing.space100
+  ),
+  medium: textViewWrapperStyle(
+    TYPOGRAPHY_STYLES.body1Bold as TextStyle,
+    spacing.space100
+  ),
+  large: textViewWrapperStyle(
+    TYPOGRAPHY_STYLES.heading5Bold as TextStyle,
+    spacing.space100
+  ),
+  xLarge: textViewWrapperStyle(
+    TYPOGRAPHY_STYLES.heading3Bold as TextStyle,
+    spacing.space100
+  ),
+  xxLarge: textViewWrapperStyle(
+    TYPOGRAPHY_STYLES.heading3Bold as TextStyle,
+    spacing.space100
+  ),
+};
+
+export const CHIP_ICON_STYLE: ChipIconSizeType = {
+  xxLarge: ICON_SIZES.xxLarge,
+  xLarge: ICON_SIZES.xLarge,
+  large: ICON_SIZES.large,
+  medium: ICON_SIZES.small,
+  small: ICON_SIZES.xSmall,
+};
+
+export const CHIP_ROUNDED_BORDER_RADIUS = borderRadius.borderRadiusFull;
+
+export const CHIP_COLOR_TOKENS = {
+  primary: {
+    background: {
+      default: () => 'transparent',
+      pressed: (theme: ExtendedTheme) => theme.colors.colorStatePrimaryPressed,
+      hover: (theme: ExtendedTheme) => theme.colors.colorStatePrimaryHover,
+      selected: (theme: ExtendedTheme) => theme.colors.colorForegroundAccent,
+      disabled: (theme: ExtendedTheme) => theme.colors.colorBackgroundSecondary,
+    },
+    border: {
+      default: (theme: ExtendedTheme) => theme.colors.colorBorderSubtle,
+      selected: (theme: ExtendedTheme) => theme.colors.colorBorderSubtle,
+    },
+    text: {
+      default: (theme: ExtendedTheme) => theme.colors.colorForegroundSecondary,
+      selected: (theme: ExtendedTheme) => theme.colors.colorBackgroundLighter,
+    }
+  },
+  primaryOutline: {
+    background: {
+      default: () => 'transparent',
+      pressed: (theme: ExtendedTheme) => theme.colors.colorStatePrimaryPressed,
+      hover: (theme: ExtendedTheme) => theme.colors.colorStatePrimaryHover,
+      selected: (theme: ExtendedTheme) => theme.colors.colorBackgroundAccentAlpha,
+      disabled: (theme: ExtendedTheme) => theme.colors.colorBackgroundSecondary,
+    },
+    border: {
+      default: (theme: ExtendedTheme) => theme.colors.colorBorderSubtle,
+      selected: (theme: ExtendedTheme) => theme.colors.colorBorderAccent,
+    },
+    text: {
+      default: (theme: ExtendedTheme) => theme.colors.colorForegroundSecondary,
+      selected: (theme: ExtendedTheme) => theme.colors.colorForegroundSecondary,
+    }
+  },
+  outlined: {
+    background: {
+      default: () => 'transparent',
+      pressed: (theme: ExtendedTheme) => theme.colors.colorStatePrimaryPressed,
+      hover: (theme: ExtendedTheme) => theme.colors.colorStatePrimaryHover,
+      disabled: (theme: ExtendedTheme) => theme.colors.colorBackgroundSecondary,
+    },
+    border: {
+      default: (theme: ExtendedTheme) => theme.colors.colorBorderSubtle,
+      selected: (theme: ExtendedTheme) => theme.colors.colorBorderSubtle,
+    },
+    text: {
+      default: (theme: ExtendedTheme) => theme.colors.colorForegroundSecondary,
+      selected: (theme: ExtendedTheme) => theme.colors.colorBackgroundLighter,
+    }
+  },
+} as const;

package/src/SliceUI/chip/Type.ts

@@ -0,0 +1,43 @@
+// @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 ChipSizeType = {
+  [key in SizeType]: ChipVariantType;
+};
+
+export type ChipVariantType = {
+  [key in VariantsType]: ViewStyle;
+};
+
+
+export type ChipVariants = {
+  [key in SizeType]: TextStyle;
+};
+
+export type ChipTextSizeType = {
+  [key in SizeType]: TextStyle;
+};
+
+export type ChipIconSizeType = {
+  [key in SizeType]: any;
+};
+
+export type ChipState = 'default' | 'pressed' | 'hover' | 'disabled' | 'selected';
+
+
+export type ChipVariant = 'primary' | 'primaryOutline' | 'outlined';
+
+
+export type SizePadding = {
+  paddingVertical: ViewStyle['paddingVertical'],
+  paddingHorizontal: ViewStyle['paddingHorizontal']
+}

package/src/SliceUI/chip/helper.ts

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