jp-composter 0.1.0

package/src/SliceUI/button/Button.tsx

@@ -0,0 +1,243 @@
+import React, {useState, useMemo, useCallback, type ReactNode} from 'react';
+import {
+  Pressable,
+  StyleSheet,
+  Platform,
+  type ViewStyle,
+  type TextStyle,
+} 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 {BUTTON_COLOR_TOKENS} from './Token';
+import type {ExtendedTheme} from '../colors/Type';
+import Typography from '../typography/Typography';
+
+interface ButtonProps {
+  children: string | string[];
+  onPress?: () => void;
+  overridedTheme?: any;
+  variant?: ButtonVariantType;
+  size?: string;
+  disabled?: boolean;
+  rounded?: boolean;
+  buttonStyle?: ViewStyle;
+  textStyle?: TextStyle;
+  showPrefixIcon?: boolean;
+  showSuffixIcon?: boolean;
+  prefixIcon?: React.ReactNode;
+  suffixIcon?: React.ReactNode;
+}
+
+export const BUTTON_VARIANTS = {
+  PRIMARY: 'primary',
+  PRIMARY_OUTLINE: 'primaryOutline',
+  OUTLINED: 'outlined',
+  GHOST: 'ghost',
+} as const;
+
+export type ButtonVariantType =
+  (typeof BUTTON_VARIANTS)[keyof typeof BUTTON_VARIANTS];
+
+const isWeb = Platform.OS === 'web';
+
+const Button: React.FC<ButtonProps> = ({
+  children,
+  onPress,
+  variant = BUTTON_VARIANTS.PRIMARY,
+  size = 'medium',
+  disabled = false,
+  rounded = false,
+  showPrefixIcon = false,
+  showSuffixIcon = false,
+  prefixIcon,
+  suffixIcon,
+  buttonStyle,
+  textStyle,
+}) => {
+  const {theme, deviceBreakpoint} = useSliceTheme();
+
+  const [isHovered, setIsHovered] = useState(false);
+
+  const responsiveSize = useMemo(
+    () => resolveVariant(size, deviceBreakpoint),
+    [size, deviceBreakpoint],
+  );
+
+  const buttonTheme = useMemo(() => {
+    const buttonType =
+      variant === BUTTON_VARIANTS.PRIMARY ? 'solid' : 'outline';
+    const styleKey = rounded ? `${buttonType}Rounded` : buttonType;
+    const buttonStyles = theme.buttonStyles || {};
+    const allowedSizes = ['small', 'medium', 'large', 'xLarge', 'xxLarge'];
+    const sizeKey = allowedSizes.includes(responsiveSize)
+      ? responsiveSize
+      : 'medium';
+    return (
+      buttonStyles[sizeKey as keyof typeof buttonStyles]?.[
+        styleKey as VariantsType
+      ] || {}
+    );
+  }, [variant, responsiveSize, rounded, theme]);
+
+  const textTheme = useMemo(() => {
+    const allowedSizes = ['small', 'medium', 'large', 'xLarge', 'xxLarge'];
+    const sizeKey = allowedSizes.includes(responsiveSize)
+      ? responsiveSize
+      : 'medium';
+    return (
+      theme.buttonTextStyles[sizeKey as keyof typeof theme.buttonTextStyles] ||
+      {}
+    );
+  }, [responsiveSize, theme]);
+
+  const defaultBgColor = useMemo(
+    () =>
+      getBackgroundColor(
+        variant as keyof typeof BUTTON_COLOR_TOKENS,
+        'default',
+        theme as ExtendedTheme,
+      ),
+    [variant, theme],
+  );
+
+  const hoverBgColor = useMemo(
+    () =>
+      getBackgroundColor(
+        variant as keyof typeof BUTTON_COLOR_TOKENS,
+        'hover',
+        theme as ExtendedTheme,
+      ),
+    [variant, theme],
+  );
+
+  const pressedBgColor = useMemo(
+    () =>
+      getBackgroundColor(
+        variant as keyof typeof BUTTON_COLOR_TOKENS,
+        'pressed',
+        theme as ExtendedTheme,
+      ),
+    [variant, theme],
+  );
+
+  const borderColor = useMemo(
+    () =>
+      getBorderColor(
+        variant as keyof typeof BUTTON_COLOR_TOKENS,
+        theme as ExtendedTheme,
+      ),
+    [variant, theme],
+  );
+
+  const textColor = useMemo(
+    () =>
+      getTextColor(
+        variant as keyof typeof BUTTON_COLOR_TOKENS,
+        theme as ExtendedTheme,
+      ),
+    [variant, theme],
+  );
+
+  const opacity = useMemo(() => (disabled ? 0.3 : 1), [disabled]);
+
+  const iconStyleMemo = useMemo(() => {
+    const allowedSizes = ['small', 'medium', 'large', 'xLarge', 'xxLarge'];
+    const sizeKey = allowedSizes.includes(responsiveSize)
+      ? responsiveSize
+      : 'medium';
+    const iconStyle = theme.buttonIconStyles[sizeKey as SizeType];
+
+    return {
+      size: scaleFont(iconStyle?.size || 16),
+      color: textColor,
+    };
+  }, [responsiveSize, textColor, theme.buttonIconStyles]);
+
+  const applyIconStyle = useCallback(
+    (icon: ReactNode) =>
+      icon
+        ? React.cloneElement(icon as React.ReactElement, iconStyleMemo)
+        : null,
+    [iconStyleMemo],
+  );
+
+  const combinedButtonStyle = useMemo(
+    () =>
+      StyleSheet.flatten([
+        styles.baseButton,
+        buttonTheme,
+        {
+          backgroundColor: isHovered ? hoverBgColor : defaultBgColor,
+          borderColor,
+          opacity,
+        },
+        buttonStyle,
+      ]),
+    [
+      buttonTheme,
+      isHovered,
+      hoverBgColor,
+      defaultBgColor,
+      borderColor,
+      opacity,
+      buttonStyle,
+    ],
+  );
+
+  const pressedButtonStyle = useMemo(
+    () =>
+      StyleSheet.flatten([
+        combinedButtonStyle,
+        {backgroundColor: pressedBgColor},
+      ]),
+    [combinedButtonStyle, pressedBgColor],
+  );
+
+  const combinedTextStyle = useMemo(
+    () =>
+      StyleSheet.flatten([
+        styles.baseText,
+        textTheme,
+        {fontFamily: Platform.OS === 'web' ? 'Lato' : ''},
+        {color: textColor, fontSize: scaleFont(textTheme.fontSize)},
+        textStyle,
+      ]) as TextStyle,
+    [textTheme, textColor, textStyle],
+  );
+
+  return (
+    <Pressable
+      onPress={onPress}
+      disabled={disabled}
+      style={({pressed}) =>
+        pressed ? pressedButtonStyle : combinedButtonStyle
+      }
+      {...(isWeb && {
+        onMouseEnter: () => setIsHovered(true),
+        onMouseLeave: () => setIsHovered(false),
+      })}>
+      {showPrefixIcon && prefixIcon && applyIconStyle(prefixIcon)}
+      <Typography variant="body1Bold" style={combinedTextStyle}>
+        {children}
+      </Typography>
+      {showSuffixIcon && suffixIcon && applyIconStyle(suffixIcon)}
+    </Pressable>
+  );
+};
+
+const styles = StyleSheet.create({
+  baseButton: {
+    alignItems: 'center',
+    justifyContent: 'center',
+    flexDirection: 'row',
+    minWidth: 150,
+  },
+  baseText: {
+    textAlign: 'center',
+  },
+});
+
+export default Button;

package/src/SliceUI/button/Token.ts

@@ -0,0 +1,138 @@
+import {spacing} from '../values/Spacing';
+import {borderRadius} from '../values/BorderRadius';
+import type {
+  ButtonIconSizeType,
+  ButtonSizeType,
+  ButtonTextSizeType,
+} from './Type';
+import {TYPOGRAPHY_STYLES} from '../typography/Token';
+import type {TextStyle, ViewStyle} 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: spacing.space150,
+  medium: spacing.space300,
+  large: spacing.space400,
+  xLarge: spacing.space500,
+  xxLarge: spacing.space600,
+} as const;
+
+// Helper function to create styles for a given size
+const createStylesForSize = (
+  paddingVertical: ViewStyle['paddingVertical'],
+) => ({
+  solid: {...variantStyles.solid, paddingVertical},
+  solidRounded: {
+    ...variantStyles.solidRounded,
+    paddingVertical,
+  },
+  outline: {
+    ...variantStyles.outline,
+    paddingVertical,
+  },
+  outlineRounded: {
+    ...variantStyles.outlineRounded,
+    paddingVertical,
+  },
+});
+
+// Export the button styles
+export const BUTTON_STYLE: ButtonSizeType = {
+  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,
+  marginHorizontal: TextStyle['marginHorizontal'] = 0,
+): TextStyle {
+  return {...textStyle, marginHorizontal};
+}
+
+export const BUTTON_TXT_STYLE: ButtonTextSizeType = {
+  small: textViewWrapperStyle(
+    TYPOGRAPHY_STYLES.body2Bold as TextStyle,
+    spacing.space100,
+  ),
+  medium: textViewWrapperStyle(
+    TYPOGRAPHY_STYLES.heading3Medium as TextStyle,
+    spacing.space100,
+  ),
+  large: textViewWrapperStyle(
+    TYPOGRAPHY_STYLES.heading5Medium as TextStyle,
+    spacing.space100,
+  ),
+  xLarge: textViewWrapperStyle(
+    TYPOGRAPHY_STYLES.heading4Medium as TextStyle,
+    spacing.space100,
+  ),
+  xxLarge: textViewWrapperStyle(
+    TYPOGRAPHY_STYLES.heading5Bold as TextStyle,
+    spacing.space100,
+  ),
+};
+
+export const BUTTON_ICON_STYLE: ButtonIconSizeType = {
+  large: ICON_SIZES.large,
+  medium: ICON_SIZES.medium,
+  small: ICON_SIZES.small,
+  xLarge: ICON_SIZES.xLarge,
+  xxLarge: ICON_SIZES.xxLarge,
+};
+
+export const ROUNDED_BORDER_RADIUS = borderRadius.borderRadiusFull;
+
+export const BUTTON_COLOR_TOKENS = {
+  primary: {
+    background: {
+      default: (theme: ExtendedTheme) => theme.colors.colorBackgroundAccent,
+      pressed: (theme: ExtendedTheme) => theme.colors.colorStateAccentPressed1,
+      hover: (theme: ExtendedTheme) => theme.colors.colorStateAccentHover1,
+    },
+    border: () => 'transparent',
+    text: (theme: ExtendedTheme) => theme.colors.colorForegroundInvariable,
+  },
+  primaryOutline: {
+    background: {
+      default: () => 'transparent',
+      pressed: (theme: ExtendedTheme) => theme.colors.colorStateAccentPressed2,
+      hover: (theme: ExtendedTheme) => theme.colors.colorStateAccentHover2,
+    },
+    border: (theme: ExtendedTheme) => theme.colors.colorBorderAccent,
+    text: (theme: ExtendedTheme) => theme.colors.colorForegroundAccent,
+  },
+  outlined: {
+    background: {
+      default: () => 'transparent',
+      pressed: (theme: ExtendedTheme) => theme.colors.colorStatePrimaryPressed,
+      hover: (theme: ExtendedTheme) => theme.colors.colorStatePrimaryHover,
+    },
+    border: (theme: ExtendedTheme) => theme.colors.colorBorderSubtle,
+    text: (theme: ExtendedTheme) => theme.colors.colorForegroundSecondary,
+  },
+  ghost: {
+    background: {
+      default: () => 'transparent',
+      pressed: (theme: ExtendedTheme) => theme.colors.colorStatePrimaryPressed,
+      hover: (theme: ExtendedTheme) => theme.colors.colorStatePrimaryHover,
+    },
+    border: () => 'transparent',
+    text: (theme: ExtendedTheme) => theme.colors.colorForegroundSecondary,
+  },
+} as const;

package/src/SliceUI/button/Type.ts

@@ -0,0 +1,34 @@
+// @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 ButtonSizeType = {
+  [key in SizeType]: ButtonVariantType;
+};
+
+export type ButtonVariantType = {
+  [key in VariantsType]: ViewStyle;
+};
+
+export type ButtonVariants = {
+  [key in SizeType]: TextStyle;
+};
+
+export type ButtonTextSizeType = {
+  [key in SizeType]: TextStyle;
+};
+
+export type ButtonIconSizeType = {
+  [key in SizeType]: any;
+};
+
+export type ButtonState = 'default' | 'pressed' | 'hover' | 'disabled';
+
+export type ButtonVariant = 'primary' | 'primaryOutline' | 'outlined';

package/src/SliceUI/button/helper.ts

@@ -0,0 +1,125 @@
+import type { ExtendedTheme } from '../colors/Type';
+import { BUTTON_COLOR_TOKENS } from './Token';
+import type { ButtonState } from './Type';
+
+// export const getBackgroundColor = (
+//   buttonType: string,
+//   state: string,
+//   theme: ExtendedTheme
+// ) => {
+//   switch (buttonType) {
+//     case 'primary':
+//       return getPrimaryBackgroundColor(state, theme);
+//     case 'primaryOutline':
+//       return getPrimaryOutlineBackgroundColor(state, theme);
+//     case 'outlined':
+//       return getOutlinedBackgroundColor(state, theme);
+//     default:
+//       return getPrimaryBackgroundColor(state, theme);
+//   }
+// };
+//
+// export const getBorderColor = (
+//   buttonType: string,
+//   theme: ExtendedTheme
+// ) => {
+//   switch (buttonType) {
+//     case 'primary':
+//       return 'transparent';
+//     case 'primaryOutline':
+//       return theme.colors.colorAccentPrimary;
+//     case 'outlined':
+//       return theme.colors.colorBorderSubtle;
+//     default:
+//       return theme.colors.colorAccentPrimary;
+//   }
+// };
+//
+// export const getTextColor = (
+//   buttonType: string,
+//   theme: ExtendedTheme
+// ) => {
+//   switch (buttonType) {
+//     case 'primary':
+//       return theme.colors.colorContrastWhite;
+//     case 'primaryOutline':
+//       return theme.colors.colorAccentPrimary;
+//     case 'outlined':
+//       return theme.colors.colorForegroundSecondary;
+//     default:
+//       return theme.colors.colorContrastWhite;
+//   }
+// };
+//
+// const getPrimaryBackgroundColor = (state: string, theme: ExtendedTheme) => {
+//   switch (state) {
+//     case 'default':
+//       return theme.colors.colorAccentPrimary;
+//     case 'pressed':
+//       return theme.colors.colorStateAccentCOPressed1;
+//     case 'hover':
+//       return theme.colors.colorStateAccentCOHover1;
+//     default:
+//       return theme.colors.colorAccentPrimary;
+//   }
+// };
+//
+// const getPrimaryOutlineBackgroundColor = (
+//   state: string,
+//   theme: ExtendedTheme
+// ) => {
+//   switch (state) {
+//     case 'default':
+//       return 'transparent';
+//     case 'pressed':
+//       return theme.colors.colorStateAccentCOPressed2;
+//     case 'hover':
+//       return theme.colors.colorStateAccentCOHover2;
+//     default:
+//       return theme.colors.colorAccentPrimary;
+//   }
+// };
+//
+// const getOutlinedBackgroundColor = (state: string, theme: ExtendedTheme) => {
+//   switch (state) {
+//     case 'default':
+//       return 'transparent';
+//     case 'pressed':
+//       return theme.colors.colorStatePrimaryPressed;
+//     case 'hover':
+//       return theme.colors.colorStatePrimaryHover;
+//     default:
+//       return theme.colors.colorAccentPrimary;
+//   }
+// };
+
+export const getBackgroundColor = (
+  buttonType: keyof typeof BUTTON_COLOR_TOKENS,
+  state: ButtonState,
+  theme: ExtendedTheme
+) => {
+  const variant =
+    BUTTON_COLOR_TOKENS[buttonType] || BUTTON_COLOR_TOKENS.primary;
+  const bg =
+    variant.background[state as keyof typeof variant.background] ||
+    variant.background.default;
+  return bg(theme);
+};
+
+export const getBorderColor = (
+  buttonType: keyof typeof BUTTON_COLOR_TOKENS,
+  theme: ExtendedTheme
+) => {
+  const variant =
+    BUTTON_COLOR_TOKENS[buttonType] || BUTTON_COLOR_TOKENS.primary;
+  return variant.border(theme);
+};
+
+export const getTextColor = (
+  buttonType: keyof typeof BUTTON_COLOR_TOKENS,
+  theme: ExtendedTheme
+) => {
+  const variant =
+    BUTTON_COLOR_TOKENS[buttonType] || BUTTON_COLOR_TOKENS.primary;
+  return variant.text(theme);
+};

package/src/SliceUI/checkbox/Checkbox.tsx

@@ -0,0 +1,176 @@
+import React from 'react';
+import {View, Pressable, StyleSheet} from 'react-native';
+import {useSliceTheme} from '../contextProvider/context';
+import type {ViewStyle, TextStyle} from 'react-native';
+import Typography from '../typography/Typography';
+import IconMoon from '../IconMoon';
+import FONT_ICON from '../assets/resources/fonts/FontIcon.json';
+import {spacing} from '../values/Spacing';
+
+export type CheckboxSize = 'medium' | 'large';
+
+export interface CheckboxProps {
+  checked: boolean;
+  onChange: (checked: boolean) => void;
+  size?: CheckboxSize;
+  disabled?: boolean;
+  label?: string;
+  supportingText?: string;
+  style?: ViewStyle;
+  labelStyle?: TextStyle;
+  supportingTextStyle?: TextStyle;
+  id?: string;
+  labelFontSize?: number;
+  labelFontWeight?: TextStyle['fontWeight'];
+  labelColor?: string;
+  supportingTextFontSize?: number;
+  supportingTextColor?: string;
+  supportingTextMarginTop?: number;
+}
+
+const Checkbox: React.FC<CheckboxProps> = ({
+  checked = false,
+  onChange,
+  size = 'medium',
+  disabled = false,
+  label,
+  supportingText,
+  style,
+  labelStyle,
+  supportingTextStyle,
+  id,
+  labelFontSize,
+  labelFontWeight,
+  labelColor,
+  supportingTextFontSize,
+  supportingTextColor,
+  supportingTextMarginTop,
+}) => {
+  const {theme} = useSliceTheme();
+  const {colors, dimensions} = theme;
+  const sizes = {
+    medium: dimensions.dimension12, // 16
+    large: dimensions.dimension16,
+    // 24
+  };
+  const boxSize = sizes[size];
+  const borderColor = disabled
+    ? colors.colorBorderSubtle
+    : checked
+    ? colors.colorBorderAccent
+    : colors.colorBorderMedium;
+  const backgroundColor = disabled
+    ? colors.colorForegroundLighter
+    : checked
+    ? colors.colorBackgroundAccent
+    : colors.colorForegroundLighter;
+  const boxBorderRadius = boxSize / 4; // perfect square with large but not circular corners
+  const checkmarkColor = colors.colorForegroundInvariable;
+
+  return (
+    <Pressable
+      onPress={() => !disabled && onChange(!checked)}
+      accessibilityRole="checkbox"
+      accessibilityState={{checked, disabled}}
+      accessibilityLabel={label}
+      disabled={disabled}
+      style={[styles.row, style]}
+      testID={id}>
+      <View
+        style={[
+          styles.box,
+          {
+            alignItems: 'center',
+            justifyContent: 'center',
+          },
+        ]}>
+        <IconMoon
+          icon={
+            checked ? FONT_ICON.CHECKBOX_CHECKED : FONT_ICON.CHECKBOX_UNCHECKED
+          }
+          size={boxSize}
+          color={
+            disabled
+              ? colors.colorStateAccentDisabled
+              : checked
+              ? colors.colorBackgroundAccent
+              : backgroundColor
+          }
+        />
+      </View>
+
+      {label && (
+        <View
+          style={{
+            flex: 1,
+            marginLeft: spacing.space100,
+            flexDirection: 'column',
+            height: boxSize,
+            justifyContent: supportingText ? 'flex-start' : 'center',
+          }}>
+          <Typography
+            variant={
+              size === 'medium'
+                ? checked
+                  ? 'body1Bold'
+                  : 'body1Medium'
+                : checked
+                ? 'heading5Bold'
+                : 'heading5Medium'
+            }
+            style={StyleSheet.flatten([
+              {
+                color:
+                  labelColor ||
+                  (disabled
+                    ? colors.colorStatePrimaryDisabled
+                    : colors.colorForegroundPrimary),
+              },
+              labelStyle,
+            ])}>
+            {label}
+          </Typography>
+          {supportingText && (
+            <Typography
+              variant="body2Regular"
+              style={StyleSheet.flatten([
+                {
+                  color: supportingTextColor || colors.colorForegroundSecondary,
+                  fontSize:
+                    supportingTextFontSize || theme.dimensions.dimension06, // smaller
+                  marginTop:
+                    supportingTextMarginTop || theme.dimensions.dimension01,
+                },
+                supportingTextStyle,
+              ])}>
+              {supportingText}
+            </Typography>
+          )}
+        </View>
+      )}
+    </Pressable>
+  );
+};
+
+const styles = StyleSheet.create({
+  row: {
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
+  box: {
+    marginRight: spacing.space100,
+  },
+  labelContainer: {
+    flexDirection: 'column',
+    justifyContent: 'center',
+  },
+  label: {
+    fontSize: 16,
+    fontWeight: '500',
+  },
+  supportingText: {
+    fontSize: 12,
+  },
+});
+
+export default Checkbox;