jp-composter 0.1.0

package/src/SliceUI/assets/tutorials.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="33" height="32" fill="none" viewBox="0 0 33 32"><g clip-path="url(#clip0_10031_177597)"><path fill="#B7F0EF" fill-rule="evenodd" d="M17 7.87059C17 6.48214 17.9812 5.28722 19.3431 5.01709L29.5249 2.99755C31.3238 2.64076 33 4.01717 33 5.85105V22.1344C33 23.5229 32.0188 24.7178 30.6569 24.9879L20.4751 27.0074C18.6762 27.3642 17 25.9878 17 24.1539L17 7.87059Z" clip-rule="evenodd" opacity=".7"/><path fill="#87E6E5" fill-rule="evenodd" d="M1 5.85245C1 4.01857 2.67623 2.64215 4.47507 2.99895L14.6569 5.01848C16.0188 5.28861 17 6.48354 17 7.87198V24.1553C17 25.9892 15.3238 27.3656 13.5249 27.0088L3.34311 24.9893C1.98119 24.7192 1 23.5242 1 22.1358V5.85245Z" clip-rule="evenodd"/><path fill="#61C1FD" fill-rule="evenodd" d="M15.543 5.71289C15.543 5.71289 16.8157 5.96289 17.4002 6.57653C17.9847 7.19016 18.4521 9.03107 18.4521 9.03107C18.4521 9.03107 18.4521 25.1106 18.4521 26.9629C18.4521 28.8152 19.3775 31.4174 19.3775 31.4174L17.4002 28.8947L16.2575 31.4174C16.2575 31.4174 15.543 29.0765 15.543 27.122C15.543 25.1674 15.543 5.71289 15.543 5.71289Z" clip-rule="evenodd"/></g><defs><clipPath id="clip0_10031_177597"><rect width="32" height="32" fill="#fff" transform="translate(0.5)"/></clipPath></defs></svg>

package/src/SliceUI/assets/youtube.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="none" viewBox="0 0 32 32"><path fill="#ED1D24" d="M31.3313 8.44657C30.9633 7.08998 29.8791 6.02172 28.5022 5.65916C26.0067 5.00026 16 5.00026 16 5.00026C16 5.00026 5.99333 5.00026 3.4978 5.65916C2.12102 6.02172 1.03665 7.08998 0.668678 8.44657C0 10.9053 0 16.0353 0 16.0353C0 16.0353 0 21.1652 0.668678 23.6242C1.03665 24.9806 2.12102 26.0489 3.4978 26.4116C5.99333 27.0703 16 27.0703 16 27.0703C16 27.0703 26.0067 27.0703 28.5022 26.4116C29.8791 26.0489 30.9633 24.9806 31.3313 23.6242C32 21.1652 32 16.0353 32 16.0353C32 16.0353 32 10.9053 31.3313 8.44657Z"/><path fill="#fff" d="M12.7266 20.6934L21.0902 16.036L12.7266 11.3781V20.6934Z"/></svg>

package/src/SliceUI/automation/helper.ts

@@ -0,0 +1,29 @@
+import { Platform } from 'react-native';
+
+export const BASE_ID = 'AK_';
+export const VIEW_DISABLED = '_Disabled';
+export const VIEW_SELECTED = '_Selected';
+
+export const setTestId = (
+  baseId: string,
+  screenName: string | null | undefined,
+  id: string | null | undefined | number,
+  className: string | null | undefined = null
+) => {
+  try {
+    return Platform.OS === 'android'
+      ? {
+          accessible: true,
+          accessibilityLabel: BASE_ID + screenName + '_' + id,
+        }
+      : {
+          testID: baseId + screenName + '_' + id,
+          ...(className
+            ? { dataSet: { class: className } }
+            : { dataSet: { class: id } }),
+        };
+  } catch (e) {
+    // Adding automation logging failed
+  }
+  return undefined;
+};

package/src/SliceUI/avatar/Avatar.tsx

@@ -0,0 +1,237 @@
+import React, {useMemo} from 'react';
+import {
+  View,
+  StyleSheet,
+  type ViewStyle,
+  type TextStyle,
+  Image,
+  type ImageSourcePropType,
+} from 'react-native';
+import {useSliceTheme} from '../contextProvider/context';
+import {
+  getBackgroundColor,
+  getIconColor,
+  getTextColor,
+  getInitials,
+} from './helper';
+import {resolveVariant} from '../responsive/helper';
+import type {SizeType, AvatarType} from './Type';
+import {AVATAR_TYPES} from './Type';
+import {setTestId} from '../automation/helper';
+import type {ExtendedTheme} from '../colors/Type';
+import Typography from '../typography/Typography';
+import IconMoon from '../IconMoon';
+import FontIcon from '../assets/resources/fonts/FontIcon.json';
+
+interface AvatarProps {
+  screenName?: string;
+  id?: number | string;
+  type?: AvatarType;
+  size?: SizeType;
+  name?: string;
+  imageUri?: string;
+  imageSource?: ImageSourcePropType;
+  avatarStyle?: ViewStyle;
+  textStyle?: TextStyle;
+  onPress?: () => void;
+}
+
+const Avatar: React.FC<AvatarProps> = ({
+  screenName,
+  id,
+  type = 'default',
+  size = 'medium',
+  name,
+  imageUri,
+  imageSource,
+  avatarStyle,
+  textStyle,
+  onPress: _onPress,
+}) => {
+  const {theme, deviceBreakpoint} = useSliceTheme();
+  const {isDebugBuildType, automationBaseid} = theme;
+
+  const responsiveSize = useMemo(
+    () => resolveVariant(size, deviceBreakpoint),
+    [size, deviceBreakpoint],
+  );
+
+  const avatarTheme = useMemo(
+    () => theme.avatarStyles[responsiveSize as SizeType],
+    [responsiveSize, theme.avatarStyles],
+  );
+
+  const backgroundColor = useMemo(
+    () => getBackgroundColor(type as AvatarType, theme as ExtendedTheme),
+    [type, theme],
+  );
+
+  const iconColor = useMemo(
+    () => getIconColor(type as AvatarType, theme as ExtendedTheme),
+    [type, theme],
+  );
+
+  const textColor = useMemo(
+    () => getTextColor(type as AvatarType, theme as ExtendedTheme),
+    [type, theme],
+  );
+
+  const initials = useMemo(() => getInitials(name || ''), [name]);
+
+  const typographyVariant = useMemo(() => {
+    switch (responsiveSize) {
+      case 'small':
+        return 'captionBold';
+      case 'medium':
+        return 'captionBold';
+      case 'large':
+        return 'body2Bold';
+      case 'xLarge':
+        return 'body1Bold';
+      default:
+        return 'captionBold';
+    }
+  }, [responsiveSize]);
+
+  const combinedAvatarStyle = useMemo(
+    () =>
+      StyleSheet.flatten([
+        styles.baseAvatar,
+        avatarTheme,
+        {
+          backgroundColor,
+          // Remove padding for image avatars so image fills the full space
+          padding: type === 'image' ? 0 : avatarTheme.padding,
+        },
+        avatarStyle,
+      ]),
+    [avatarTheme, backgroundColor, avatarStyle, type],
+  );
+
+  const combinedTextStyle = useMemo(
+    () =>
+      StyleSheet.flatten([
+        styles.baseText,
+        {
+          color: textColor,
+          padding: avatarTheme.padding,
+        },
+        textStyle,
+      ]),
+    [textColor, avatarTheme.padding, textStyle],
+  );
+
+  const renderContent = () => {
+    switch (type) {
+      case AVATAR_TYPES.IMAGE:
+        // Handle both imageSource (local/require) and imageUri (URL string)
+        let imageSourceToUse: ImageSourcePropType | null = null;
+        if (imageSource) {
+          // If imageSource is provided (local image), use it directly
+          imageSourceToUse = imageSource;
+        } else if (imageUri) {
+          // If imageUri is provided (URL string), wrap it in {uri: imageUri}
+          // Ensure the URI is properly formatted for web
+          imageSourceToUse = {uri: imageUri};
+        }
+
+        console.log(
+          'Avatar IMAGE type - imageSource:',
+          imageSource,
+          'imageUri:',
+          imageUri,
+          'imageSourceToUse:',
+          imageSourceToUse,
+        );
+
+        if (imageSourceToUse) {
+          return (
+            <Image
+              source={imageSourceToUse}
+              style={[styles.image, {borderRadius: avatarTheme.borderRadius}]}
+              resizeMode="cover"
+              onError={error => {
+                console.log(
+                  'Image failed to load:',
+                  imageUri || 'local image',
+                  error,
+                );
+              }}
+              onLoad={() => {
+                console.log(
+                  'Image loaded successfully:',
+                  imageUri || 'local image',
+                );
+              }}
+              onLoadStart={() => {
+                console.log(
+                  'Image loading started:',
+                  imageUri || 'local image',
+                );
+              }}
+              // Web-specific props
+              alt={imageUri ? 'Avatar image' : 'Local avatar image'}
+              crossOrigin="anonymous"
+            />
+          );
+        }
+        // Fallback to default if no image provided
+        return (
+          <IconMoon
+            icon={FontIcon.USER}
+            color={iconColor}
+            size={avatarTheme.size * 0.6}
+          />
+        );
+
+      case AVATAR_TYPES.NAME:
+        return (
+          <Typography style={combinedTextStyle} variant={typographyVariant}>
+            {initials}
+          </Typography>
+        );
+
+      case AVATAR_TYPES.DEFAULT:
+      default:
+        return (
+          <IconMoon
+            icon={FontIcon.AVATAR_FILL}
+            color={iconColor}
+            size={avatarTheme.size * 0.6}
+          />
+        );
+    }
+  };
+
+  return (
+    <View
+      style={combinedAvatarStyle}
+      {...(isDebugBuildType && automationBaseid
+        ? setTestId(automationBaseid, screenName, id)
+        : {})}>
+      {renderContent()}
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  baseAvatar: {
+    alignItems: 'center',
+    justifyContent: 'center',
+    overflow: 'hidden',
+  },
+  baseText: {
+    textAlign: 'center',
+    fontWeight: 'bold',
+    lineHeight: undefined, // Remove line height for better centering
+    margin: 0, // Remove all margins
+    padding: 0, // Remove all padding
+  },
+  image: {
+    width: '100%',
+    height: '100%',
+    objectFit: 'cover', // Web-specific property for better image fitting
+  },
+});
+
+export default Avatar;

package/src/SliceUI/avatar/Token.ts

@@ -0,0 +1,116 @@
+import {spacing} from '../values/Spacing';
+import {borderRadius} from '../values/BorderRadius';
+import type {
+  AvatarSizeType,
+  AvatarTextSizeType,
+  AvatarImageSizeType,
+  SizeDimensions,
+} from './Type';
+import {TYPOGRAPHY_STYLES} from '../typography/Token';
+import type {TextStyle, ImageStyle} from 'react-native';
+import type {ExtendedTheme} from '../colors/Type';
+
+// Size-specific dimensions based on the design spec - improved proportions
+const sizeDimensions = {
+  small: {
+    size: 28,
+    borderRadius: 14, // Half of size for perfect circle
+    padding: 4, // Internal padding for text
+  },
+  medium: {
+    size: 36,
+    borderRadius: 18,
+    padding: 6,
+  },
+  large: {
+    size: 44,
+    borderRadius: 22,
+    padding: 8,
+  },
+  xLarge: {
+    size: 52,
+    borderRadius: 26,
+    padding: 10,
+  },
+} as const;
+
+// Helper function to create styles for a given size
+const createStylesForSize = (sizeDimensions: SizeDimensions) => ({
+  size: sizeDimensions.size,
+  width: sizeDimensions.size,
+  height: sizeDimensions.size,
+  borderRadius: sizeDimensions.borderRadius,
+  padding: sizeDimensions.padding,
+});
+
+// Export the avatar styles
+export const AVATAR_STYLE: AvatarSizeType = {
+  small: createStylesForSize(sizeDimensions.small),
+  medium: createStylesForSize(sizeDimensions.medium),
+  large: createStylesForSize(sizeDimensions.large),
+  xLarge: createStylesForSize(sizeDimensions.xLarge),
+};
+
+export function textViewWrapperStyle(
+  textStyle: TextStyle,
+  marginRight?: TextStyle['marginHorizontal'],
+): TextStyle {
+  return {
+    ...textStyle,
+    lineHeight: undefined,
+    marginRight,
+    margin: 0,
+    padding: 0,
+  };
+}
+
+export const AVATAR_TXT_STYLE: AvatarTextSizeType = {
+  small: textViewWrapperStyle(TYPOGRAPHY_STYLES.captionBold as TextStyle),
+  medium: textViewWrapperStyle(TYPOGRAPHY_STYLES.captionBold as TextStyle),
+  large: textViewWrapperStyle(TYPOGRAPHY_STYLES.body2Bold as TextStyle),
+  xLarge: textViewWrapperStyle(TYPOGRAPHY_STYLES.body1Bold as TextStyle),
+};
+
+export const AVATAR_IMAGE_STYLE: AvatarImageSizeType = {
+  small: {
+    width: sizeDimensions.small.size,
+    height: sizeDimensions.small.size,
+    borderRadius: sizeDimensions.small.borderRadius,
+  },
+  medium: {
+    width: sizeDimensions.medium.size,
+    height: sizeDimensions.medium.size,
+    borderRadius: sizeDimensions.medium.borderRadius,
+  },
+  large: {
+    width: sizeDimensions.large.size,
+    height: sizeDimensions.large.size,
+    borderRadius: sizeDimensions.large.borderRadius,
+  },
+  xLarge: {
+    width: sizeDimensions.xLarge.size,
+    height: sizeDimensions.xLarge.size,
+    borderRadius: sizeDimensions.xLarge.borderRadius,
+  },
+};
+
+export const AVATAR_ROUNDED_BORDER_RADIUS = borderRadius.borderRadiusFull;
+
+// Color tokens based on the design spec
+export const AVATAR_COLOR_TOKENS = {
+  default: {
+    background: (theme: ExtendedTheme) => theme.colors.colorBackgroundSecondary, // Light gray background
+    icon: (theme: ExtendedTheme) => theme.colors.colorForegroundSecondary, // Dark gray icon
+    text: (theme: ExtendedTheme) => theme.colors.colorForegroundSecondary, // Dark gray text
+  },
+  name: {
+    background: (theme: ExtendedTheme) => '#FFB366', // Light orange background (matches design)
+    icon: (theme: ExtendedTheme) => theme.colors.colorForegroundSecondary,
+    text: (theme: ExtendedTheme) => '#FFFFFF', // White text (matches design)
+  },
+  image: {
+    background: (theme: ExtendedTheme) => theme.colors.colorBackgroundSecondary, // Light background as fallback
+    icon: (theme: ExtendedTheme) => theme.colors.colorForegroundSecondary,
+    text: (theme: ExtendedTheme) => theme.colors.colorForegroundSecondary,
+  },
+} as const;

package/src/SliceUI/avatar/Type.ts

@@ -0,0 +1,36 @@
+// @ts-ignore
+import type {TextStyle, ViewStyle, ImageStyle} from 'react-native';
+
+export type SizeType = 'small' | 'medium' | 'large' | 'xLarge';
+
+export type AvatarType = 'default' | 'name' | 'image';
+
+export const AVATAR_TYPES = {
+  DEFAULT: 'default',
+  NAME: 'name',
+  IMAGE: 'image',
+} as const;
+
+export type AvatarSizeType = {
+  [key in SizeType]: {
+    size: number;
+    borderRadius: number;
+    padding: number;
+  };
+};
+
+export type AvatarTextSizeType = {
+  [key in SizeType]: TextStyle;
+};
+
+export type AvatarImageSizeType = {
+  [key in SizeType]: ImageStyle;
+};
+
+export type AvatarVariant = 'default' | 'name' | 'image';
+
+export type SizeDimensions = {
+  size: number;
+  borderRadius: number;
+  padding: number;
+};

package/src/SliceUI/avatar/helper.ts

@@ -0,0 +1,53 @@
+import type {ExtendedTheme} from '../colors/Type';
+import {AVATAR_COLOR_TOKENS} from './Token';
+import type {AvatarVariant} from './Type';
+
+export const getBackgroundColor = (
+  avatarType: AvatarVariant,
+  theme: ExtendedTheme,
+) => {
+  const variant =
+    AVATAR_COLOR_TOKENS[avatarType] || AVATAR_COLOR_TOKENS.default;
+  return variant.background(theme);
+};
+
+export const getIconColor = (
+  avatarType: AvatarVariant,
+  theme: ExtendedTheme,
+) => {
+  const variant =
+    AVATAR_COLOR_TOKENS[avatarType] || AVATAR_COLOR_TOKENS.default;
+  return variant.icon(theme);
+};
+
+export const getTextColor = (
+  avatarType: AvatarVariant,
+  theme: ExtendedTheme,
+) => {
+  const variant =
+    AVATAR_COLOR_TOKENS[avatarType] || AVATAR_COLOR_TOKENS.default;
+  return variant.text(theme);
+};
+
+// Helper function to get initials from name
+export const getInitials = (name: string): string => {
+  if (!name || typeof name !== 'string') return '';
+
+  const words = name.trim().split(/\s+/);
+  if (words.length === 1) {
+    return words[0].substring(0, 2).toUpperCase();
+  }
+
+  return (words[0][0] + words[words.length - 1][0]).toUpperCase();
+};
+
+
+
+
+
+
+
+
+
+
+