jp-composter 0.1.0

package/src/SliceUI/switch/Token.ts

@@ -0,0 +1,205 @@
+import {dimensions} from '../values/Dimension';
+import {borderRadius} from '../values/BorderRadius';
+import {spacing} from '../values/Spacing';
+import type {ExtendedTheme} from '../colors/Type';
+import type {SwitchThemeSize} from './Type';
+
+export const SWITCH_THEME: SwitchThemeSize = {
+  large: {
+    default: (theme: ExtendedTheme) => ({
+      track: {
+        width: dimensions.dimension20,
+        height: dimensions.dimension16,
+        borderRadius: borderRadius.borderRadiusFull,
+        paddingTop: spacing.space50,
+        paddingRight: spacing.space50,
+        paddingBottom: spacing.space50,
+        borderWidth: 0.5,
+        borderColor: theme.colors.colorBorderLight,
+        backgroundColor: theme.colors.colorBackgroundLight,
+        justifyContent: 'flex-end',
+        alignItems: 'center',
+      },
+      thumb: {
+        width: dimensions.dimension14,
+        height: dimensions.dimension14,
+        borderRadius: borderRadius.borderRadiusFull,
+        backgroundColor: theme.colors.colorBackgroundTertiary,
+        aspectRatio: 1,
+      },
+    }),
+    checked: (theme: ExtendedTheme, brand: 'CO' | 'CM' | 'OTHER') => ({
+      track: {
+        width: dimensions.dimension20,
+        height: dimensions.dimension16,
+        borderRadius: borderRadius.borderRadiusFull,
+        backgroundColor: theme.colors.colorBackgroundAccent,
+        paddingTop: spacing.space50,
+        paddingRight: spacing.space50,
+        paddingBottom: spacing.space50,
+        paddingLeft: dimensions.dimension09,
+        justifyContent: 'flex-end',
+        alignItems: 'center',
+      },
+      thumb: {
+        width: dimensions.dimension14,
+        height: dimensions.dimension14,
+        borderRadius: borderRadius.borderRadiusFull,
+        backgroundColor: theme.colors.colorForegroundInvariable,
+        aspectRatio: 1,
+      },
+    }),
+    disabled: (theme: ExtendedTheme) => ({
+      track: {
+        width: dimensions.dimension20,
+        height: dimensions.dimension16,
+        borderRadius: borderRadius.borderRadiusFull,
+        backgroundColor: theme.colors.colorStatePrimaryDisabled2,
+        paddingTop: spacing.space50,
+        paddingRight: spacing.space50,
+        paddingBottom: spacing.space50,
+        justifyContent: 'flex-end',
+        alignItems: 'center',
+        borderWidth: 0.5,
+        borderColor: theme.colors.colorStatePrimaryDisabled,
+      },
+      thumb: {
+        width: dimensions.dimension14,
+        height: dimensions.dimension14,
+        borderRadius: borderRadius.borderRadiusFull,
+        backgroundColor: theme.colors.colorStateContrastWhiteDisabled,
+        aspectRatio: 1,
+      },
+    }),
+  },
+  medium: {
+    default: (theme: ExtendedTheme) => ({
+      track: {
+        width: dimensions.dimension18,
+        height: dimensions.dimension12,
+        borderRadius: borderRadius.borderRadiusFull,
+        borderWidth: 0.3,
+        borderColor: theme.colors.colorBorderLight,
+        backgroundColor: theme.colors.colorBackgroundLight,
+        paddingTop: spacing.space50,
+        paddingRight: spacing.space50,
+        paddingBottom: spacing.space50,
+        justifyContent: 'flex-end',
+        alignItems: 'center',
+      },
+      thumb: {
+        width: dimensions.dimension10,
+        height: dimensions.dimension10,
+        borderRadius: borderRadius.borderRadiusFull,
+        backgroundColor: theme.colors.colorBackgroundTertiary,
+        aspectRatio: 1,
+      },
+    }),
+    checked: (theme: ExtendedTheme, brand: 'CO' | 'CM') => ({
+      track: {
+        width: dimensions.dimension18,
+        height: dimensions.dimension12,
+        borderRadius: borderRadius.borderRadiusFull,
+        backgroundColor: theme.colors.colorBackgroundAccent,
+        paddingTop: spacing.space50,
+        paddingRight: spacing.space50,
+        paddingBottom: spacing.space50,
+        paddingLeft: dimensions.dimension07,
+        justifyContent: 'flex-end',
+        alignItems: 'center',
+      },
+      thumb: {
+        width: dimensions.dimension10,
+        height: dimensions.dimension10,
+        borderRadius: borderRadius.borderRadiusFull,
+        backgroundColor: theme.colors.colorForegroundInvariable,
+        aspectRatio: 1,
+      },
+    }),
+    disabled: (theme: ExtendedTheme) => ({
+      track: {
+        width: dimensions.dimension18,
+        height: dimensions.dimension12,
+        borderRadius: borderRadius.borderRadiusFull,
+        backgroundColor: theme.colors.colorStateAccentDisabled,
+        paddingTop: spacing.space50,
+        paddingRight: spacing.space50,
+        paddingBottom: spacing.space50,
+        justifyContent: 'flex-end',
+        alignItems: 'center',
+      },
+      thumb: {
+        width: dimensions.dimension10,
+        height: dimensions.dimension10,
+        borderRadius: borderRadius.borderRadiusFull,
+        backgroundColor: theme.colors.colorStateContrastWhiteDisabled,
+        aspectRatio: 1,
+      },
+    }),
+  },
+  small: {
+    default: (theme: ExtendedTheme) => ({
+      track: {
+        width: dimensions.dimension16,
+        height: dimensions.dimension10,
+        borderRadius: borderRadius.borderRadiusFull,
+        borderWidth: 0.2,
+        borderColor: theme.colors.colorBorderLight,
+        backgroundColor: theme.colors.colorBackgroundLight,
+        paddingTop: spacing.space50,
+        paddingRight: spacing.space50,
+        paddingBottom: spacing.space50,
+        justifyContent: 'flex-end',
+        alignItems: 'center',
+      },
+      thumb: {
+        width: dimensions.dimension08,
+        height: dimensions.dimension08,
+        borderRadius: borderRadius.borderRadiusFull,
+        backgroundColor: theme.colors.colorBackgroundTertiary,
+        aspectRatio: 1,
+      },
+    }),
+    checked: (theme: ExtendedTheme, brand: 'CO' | 'CM') => ({
+      track: {
+        width: dimensions.dimension16,
+        height: dimensions.dimension10,
+        borderRadius: borderRadius.borderRadiusFull,
+        backgroundColor: theme.colors.colorBackgroundAccent,
+        paddingTop: spacing.space50,
+        paddingRight: spacing.space50,
+        paddingBottom: spacing.space50,
+        paddingLeft: dimensions.dimension03,
+        justifyContent: 'flex-end',
+        alignItems: 'center',
+      },
+      thumb: {
+        width: dimensions.dimension08,
+        height: dimensions.dimension08,
+        borderRadius: borderRadius.borderRadiusFull,
+        backgroundColor: theme.colors.colorForegroundInvariable,
+        aspectRatio: 1,
+      },
+    }),
+    disabled: (theme: ExtendedTheme) => ({
+      track: {
+        width: dimensions.dimension16,
+        height: dimensions.dimension10,
+        borderRadius: borderRadius.borderRadiusFull,
+        backgroundColor: theme.colors.colorStatePrimaryDisabled,
+        paddingTop: spacing.space50,
+        paddingRight: spacing.space50,
+        paddingBottom: spacing.space50,
+        justifyContent: 'flex-end',
+        alignItems: 'center',
+      },
+      thumb: {
+        width: dimensions.dimension08,
+        height: dimensions.dimension08,
+        borderRadius: borderRadius.borderRadiusFull,
+        backgroundColor: theme.colors.colorStatePrimaryDisabled,
+        aspectRatio: 1,
+      },
+    }),
+  },
+};

package/src/SliceUI/switch/Type.ts

@@ -0,0 +1,26 @@
+import type {ViewStyle} from 'react-native';
+import type {ExtendedTheme} from '../colors/Type';
+
+export type SwitchSize = 'small' | 'medium' | 'large';
+export type SwitchState = 'default' | 'checked' | 'disabled';
+export type SwitchBrand = 'CO' | 'CM';
+
+export interface SwitchTheme {
+  track: ViewStyle;
+  thumb: ViewStyle;
+}
+
+export type SwitchThemeVariant = {
+  [key in SwitchState]: (
+    theme: ExtendedTheme,
+    brand?: SwitchBrand,
+  ) => SwitchTheme;
+};
+
+export type SwitchThemeSize = {
+  [key in SwitchSize]: {
+    default: (theme: ExtendedTheme) => SwitchTheme;
+    checked: (theme: ExtendedTheme, brand: SwitchBrand) => SwitchTheme;
+    disabled: (theme: ExtendedTheme) => SwitchTheme;
+  };
+};

package/src/SliceUI/tab/TabItem.tsx

@@ -0,0 +1,204 @@
+import React, {useMemo} from 'react';
+import {
+  View,
+  Text,
+  StyleSheet,
+  type ViewStyle,
+  type TextStyle,
+  TouchableOpacity,
+} from 'react-native';
+import {useSliceTheme} from '../contextProvider/context';
+import {resolveVariant} from '../responsive/helper';
+import type {
+  TabSizeType,
+  TabVariantType,
+  TabStateType,
+  TabBrandType,
+} from './Type';
+import {TAB_SIZES, TAB_VARIANTS, TAB_STATES, TAB_BRANDS} from './Type';
+import {setTestId} from '../automation/helper';
+import type {ExtendedTheme} from '../colors/Type';
+import Typography from '../typography/Typography';
+import {getTextColor, getBackgroundColor, getUnderlineColor} from './helper';
+import {TAB_ITEM_STYLE, TAB_ITEM_TXT_STYLE} from './Token';
+
+interface TabItemProps {
+  screenName?: string;
+  id?: number | string;
+  label: string;
+  size?: TabSizeType;
+  variant?: TabVariantType;
+  brand?: TabBrandType;
+  state?: TabStateType;
+  isActive?: boolean;
+  disabled?: boolean;
+  onPress?: () => void;
+  tabItemStyle?: ViewStyle;
+  textStyle?: TextStyle;
+}
+
+const TabItem: React.FC<TabItemProps> = ({
+  screenName,
+  id,
+  label,
+  size = 'medium',
+  variant = 'bordered',
+  brand = 'cm',
+  state = 'default',
+  isActive = false,
+  disabled = false,
+  onPress,
+  tabItemStyle,
+  textStyle,
+}) => {
+  const {theme, deviceBreakpoint} = useSliceTheme();
+  const {isDebugBuildType, automationBaseid} = theme;
+
+  const responsiveSize = useMemo(
+    () => resolveVariant(size, deviceBreakpoint),
+    [size, deviceBreakpoint],
+  );
+
+  const tabTheme = useMemo(
+    () =>
+      theme.tabItemStyles?.[responsiveSize as TabSizeType] ||
+      TAB_ITEM_STYLE[responsiveSize as TabSizeType],
+    [responsiveSize, theme.tabItemStyles],
+  );
+
+  const textTheme = useMemo(
+    () =>
+      theme.tabItemTextStyles?.[responsiveSize as TabSizeType] ||
+      TAB_ITEM_TXT_STYLE[responsiveSize as TabSizeType],
+    [responsiveSize, theme.tabItemTextStyles],
+  );
+
+  // Determine actual state based on disabled prop
+  const actualState = disabled ? 'disabled' : state;
+
+  const textColor = useMemo(
+    () =>
+      getTextColor(
+        variant,
+        brand,
+        actualState as TabStateType,
+        isActive,
+        theme as ExtendedTheme,
+      ),
+    [variant, brand, actualState, isActive, theme],
+  );
+
+  const backgroundColor = useMemo(
+    () =>
+      getBackgroundColor(
+        variant,
+        brand,
+        actualState as TabStateType,
+        isActive,
+        theme as ExtendedTheme,
+      ),
+    [variant, brand, actualState, isActive, theme],
+  );
+
+  const underlineColor = useMemo(
+    () =>
+      getUnderlineColor(
+        variant,
+        brand,
+        actualState as TabStateType,
+        isActive,
+        theme as ExtendedTheme,
+      ),
+    [variant, brand, actualState, isActive, theme],
+  );
+
+  const typographyVariant = useMemo(() => {
+    switch (responsiveSize) {
+      case 'small':
+        return 'captionBold';
+      case 'medium':
+        return 'body2Bold';
+      case 'large':
+        return 'body1Bold';
+      default:
+        return 'body2Bold';
+    }
+  }, [responsiveSize]);
+
+  const combinedTabStyle = useMemo(
+    () =>
+      StyleSheet.flatten([
+        styles.baseTab,
+        tabTheme,
+        {
+          backgroundColor,
+          borderRadius:
+            variant === 'filledRounded'
+              ? tabTheme.height / 2
+              : variant === 'bordered'
+              ? 0
+              : tabTheme.borderRadius,
+          // Add bottom border for bordered variant
+          ...(variant === 'bordered' && {
+            borderBottomWidth: 2,
+            borderBottomColor: isActive ? underlineColor : 'transparent',
+            borderBottomLeftRadius: 0,
+            borderBottomRightRadius: 0,
+          }),
+        },
+        tabItemStyle,
+      ]),
+    [
+      tabTheme,
+      backgroundColor,
+      variant,
+      tabItemStyle,
+      isActive,
+      underlineColor,
+    ],
+  );
+
+  const combinedTextStyle = useMemo(
+    () =>
+      StyleSheet.flatten([
+        textTheme,
+        {
+          color: textColor,
+          // Reduce weight when inactive as per spec
+          ...(isActive ? {} : {fontWeight: '500'}),
+        },
+        textStyle,
+      ]),
+    [textTheme, textColor, textStyle, isActive],
+  );
+
+  const renderContent = () => {
+    return (
+      <Typography style={combinedTextStyle} variant={typographyVariant}>
+        {label}
+      </Typography>
+    );
+  };
+
+  return (
+    <TouchableOpacity
+      style={combinedTabStyle}
+      onPress={disabled ? undefined : onPress}
+      disabled={disabled}
+      {...(isDebugBuildType && automationBaseid
+        ? setTestId(automationBaseid, screenName || 'TabItem', id || 'default')
+        : {})}>
+      {renderContent()}
+    </TouchableOpacity>
+  );
+};
+
+const styles = StyleSheet.create({
+  baseTab: {
+    alignItems: 'center',
+    justifyContent: 'center',
+    flexDirection: 'row',
+  },
+});
+
+export default TabItem;

package/src/SliceUI/tab/Tabs.tsx

@@ -0,0 +1,110 @@
+import React, {useState, useMemo} from 'react';
+import {View, StyleSheet, type ViewStyle} from 'react-native';
+import {useSliceTheme} from '../contextProvider/context';
+import {setTestId} from '../automation/helper';
+import type {TabSizeType, TabVariantType, TabBrandType} from './Type';
+import TabItem from './TabItem';
+
+interface TabOption {
+  id: string;
+  label: string;
+  disabled?: boolean;
+}
+
+interface TabsProps {
+  screenName?: string;
+  id?: number | string;
+  options: TabOption[];
+  activeTabId?: string;
+  size?: TabSizeType;
+  variant?: TabVariantType;
+  brand?: TabBrandType;
+  onTabChange?: (tabId: string) => void;
+  tabsStyle?: ViewStyle;
+  tabItemStyle?: ViewStyle;
+}
+
+const Tabs: React.FC<TabsProps> = ({
+  screenName,
+  id,
+  options,
+  activeTabId,
+  size = 'medium',
+  variant = 'bordered',
+  brand = 'cm',
+  onTabChange,
+  tabsStyle,
+  tabItemStyle,
+}) => {
+  const {theme, deviceBreakpoint} = useSliceTheme();
+  const {isDebugBuildType, automationBaseid} = theme;
+
+  const [internalActiveTab, setInternalActiveTab] = useState<string>(
+    activeTabId || options[0]?.id || '',
+  );
+
+  const currentActiveTab = activeTabId || internalActiveTab;
+
+  const handleTabPress = (tabId: string) => {
+    if (onTabChange) {
+      onTabChange(tabId);
+    } else {
+      setInternalActiveTab(tabId);
+    }
+  };
+
+  const combinedTabsStyle = useMemo(
+    () =>
+      StyleSheet.flatten([
+        styles.baseTabs,
+        // Show a rounded group background only for filledRounded
+        variant === 'filledRounded'
+          ? {
+              backgroundColor: theme.colors.colorBackgroundLight,
+              borderRadius: 999,
+              padding: 4,
+              gap: 4,
+            }
+          : {},
+        tabsStyle,
+      ]),
+    [variant, theme.colors.colorBackgroundLight, tabsStyle],
+  );
+
+  const renderTabItems = () => {
+    return options.map(option => (
+      <TabItem
+        key={option.id}
+        id={`${id}-${option.id}`}
+        label={option.label}
+        size={size}
+        variant={variant}
+        brand={brand}
+        isActive={currentActiveTab === option.id}
+        disabled={option.disabled}
+        onPress={() => handleTabPress(option.id)}
+        tabItemStyle={tabItemStyle}
+      />
+    ));
+  };
+
+  return (
+    <View
+      style={combinedTabsStyle}
+      {...(isDebugBuildType && automationBaseid
+        ? setTestId(automationBaseid, screenName || 'Tabs', id || 'default')
+        : {})}>
+      {renderTabItems()}
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  baseTabs: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 8, // Add gap between tab items
+  },
+});
+
+export default Tabs;