jp-composter 0.1.0

package/src/SliceUI/radio/RadioButton.tsx

@@ -0,0 +1,130 @@
+import React from 'react';
+import {TouchableOpacity, View, StyleSheet} from 'react-native';
+import {useSliceTheme} from '../contextProvider/context';
+// import {useGetColors} from '../theme/dummyColors';
+import Typography from '../typography/Typography';
+import FONT_ICOMOON from '../assets/resources/fonts/FontIcon.json';
+import type {RadioButtonProps} from './Type';
+import IconMoon from '../IconMoon';
+import {spacing} from '../values/Spacing';
+
+export const RadioButton: React.FC<RadioButtonProps> = ({
+  checked,
+  onPress,
+  label,
+  size = 'medium',
+  disabled = false,
+  style,
+  labelStyle,
+  description,
+  descriptionStyle,
+  prefixIcon,
+  suffixIcon,
+}) => {
+  const {theme} = useSliceTheme();
+
+  const colors = theme.colors;
+
+  // Sizing tokens
+  const outerSize =
+    size === 'large'
+      ? theme.dimensions.dimension16
+      : size === 'small'
+      ? theme.dimensions.dimension10
+      : theme.dimensions.dimension14; // 48, 20, 32
+  const spacingHorizontal = spacing.space100; // 12
+  const spacingVertical = theme.dimensions.dimension04; // 8
+
+  // Color tokens
+  const iconColor = disabled
+    ? colors.colorStatePrimaryDisabled
+    : checked
+    ? colors.colorBorderAccent
+    : colors.colorBorderMedium;
+
+  return (
+    <TouchableOpacity
+      style={[
+        styles.container,
+        {
+          paddingVertical: spacingVertical,
+          paddingHorizontal: spacingHorizontal,
+          opacity: disabled ? 0.5 : 1,
+        },
+        style,
+      ]}
+      onPress={onPress}
+      activeOpacity={0.7}
+      disabled={disabled}
+      accessibilityRole="radio"
+      accessibilityState={{checked, disabled}}>
+      {prefixIcon && <View style={styles.icon}>{prefixIcon}</View>}
+      <IconMoon
+        icon={
+          checked
+            ? FONT_ICOMOON.RADIO_BUTTON_SELECTED
+            : FONT_ICOMOON.RADIO_BUTTON_UNSELECTED
+        }
+        size={outerSize}
+        color={iconColor}
+      />
+      <View
+        style={{
+          flex: 1,
+          marginLeft: spacingHorizontal,
+          flexDirection: 'column',
+          height: outerSize,
+          justifyContent: description ? 'flex-start' : 'center',
+        }}>
+        <Typography
+          variant={
+            size === 'medium'
+              ? checked
+                ? 'body1Bold'
+                : 'body1Medium'
+              : checked
+              ? 'heading5Bold'
+              : 'heading5Medium'
+          }
+          style={StyleSheet.flatten([
+            {
+              color: disabled
+                ? colors.colorStatePrimaryDisabled
+                : colors.colorForegroundPrimary,
+            },
+            labelStyle,
+          ])}>
+          {label}
+        </Typography>
+        {description ? (
+          <Typography
+            variant="body2Regular"
+            style={StyleSheet.flatten([
+              {
+                color: disabled
+                  ? colors.colorStatePrimaryDisabled
+                  : colors.colorForegroundSecondary,
+                marginTop: theme.dimensions.dimension01,
+              },
+              descriptionStyle,
+            ])}>
+            {description}
+          </Typography>
+        ) : null}
+      </View>
+      {suffixIcon && <View style={styles.icon}>{suffixIcon}</View>}
+    </TouchableOpacity>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
+  icon: {
+    marginHorizontal: 4,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+});

package/src/SliceUI/radio/Token.ts

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

package/src/SliceUI/radio/Type.ts

@@ -0,0 +1,35 @@
+import {ViewStyle, TextStyle} from 'react-native';
+
+export type RadioButtonSize = 'small' | 'medium' | 'large';
+export type RadioButtonVariant = 'default' | 'error' | 'disabled';
+
+export interface RadioButtonProps {
+  checked: boolean;
+  onPress: () => void;
+  label: string;
+  size?: RadioButtonSize;
+  variant?: RadioButtonVariant;
+  disabled?: boolean;
+  style?: ViewStyle;
+  labelStyle?: TextStyle;
+  description?: string;
+  descriptionStyle?: TextStyle;
+  prefixIcon?: React.ReactNode;
+  suffixIcon?: React.ReactNode;
+}
+
+export interface RadioButtonTheme {
+  container: ViewStyle;
+  radio: ViewStyle;
+  dot: ViewStyle;
+  label: TextStyle;
+  description: TextStyle;
+}
+
+export type RadioButtonThemeVariant = {
+  [key in RadioButtonVariant]: RadioButtonTheme;
+};
+
+export type RadioButtonThemeSize = {
+  [key in RadioButtonSize]: RadioButtonThemeVariant;
+};

package/src/SliceUI/react-native.config.js

@@ -0,0 +1,3 @@
+module.exports = {
+  assets: ['./assets/resources/fonts'],
+};

package/src/SliceUI/responsive/Type.ts

@@ -0,0 +1,7 @@
+import { Breakpoints } from './helper';
+
+export type VariantBreakPoints = {
+  [Key in keyof typeof Breakpoints]: string;
+} & {
+  default: string; // Adding a default property
+};

package/src/SliceUI/responsive/helper.ts

@@ -0,0 +1,53 @@
+import {PixelRatio} from 'react-native';
+
+import {Dimensions} from 'react-native';
+import type {VariantBreakPoints} from './Type';
+
+export const Breakpoints = {
+  xs: 0, // Extra small
+  sm: 576, // Small
+  md: 768, // Medium
+  lg: 992, // Large
+  xl: 1200, // Extra large
+  xxl: 1400, // Extra extra large
+};
+
+export const getDeviceBreakpoint = (): keyof typeof Breakpoints => {
+  const {width} = Dimensions.get('window');
+
+  if (width >= Breakpoints.xxl) return 'xxl';
+  if (width >= Breakpoints.xl) return 'xl';
+  if (width >= Breakpoints.lg) return 'lg';
+  if (width >= Breakpoints.md) return 'md';
+  if (width >= Breakpoints.sm) return 'sm';
+  return 'xs';
+};
+
+// Helper function to scale font based on system settings
+export const scaleFont = (size: string | number | undefined) => {
+  if (typeof size === 'number') {
+    return size / PixelRatio.getFontScale();
+  }
+  return size; // Return string or undefined as is
+};
+
+export const getDeviceVariantByBreakPoint = (
+  variantBreakPoints: VariantBreakPoints | string,
+) => {
+  if (typeof variantBreakPoints === 'string') {
+    return variantBreakPoints;
+  }
+  const deviceSize = getDeviceBreakpoint();
+  return variantBreakPoints[deviceSize];
+};
+
+//this is important to resolve the variant based on the breakpoint
+
+export const resolveVariant = (
+  variant: string | VariantBreakPoints,
+  breakpoint: keyof VariantBreakPoints,
+): string => {
+  return typeof variant === 'string'
+    ? variant
+    : variant[breakpoint] || variant.default;
+};

package/src/SliceUI/switch/Switch.tsx

@@ -0,0 +1,119 @@
+import React, {useRef, useEffect} from 'react';
+import {Pressable, StyleSheet, Animated, Easing} from 'react-native';
+import {useSliceTheme} from '../contextProvider/context';
+import type {ViewStyle} from 'react-native';
+import type {SwitchSize, SwitchBrand} from './Type';
+import {SWITCH_THEME} from './Token';
+
+interface SwitchProps {
+  checked: boolean;
+  onChange: (checked: boolean) => void;
+  size?: SwitchSize;
+  disabled?: boolean;
+  brand?: SwitchBrand;
+  style?: ViewStyle;
+  id?: string;
+}
+
+const ANIMATION_DURATION = 200;
+
+const Switch: React.FC<SwitchProps> = ({
+  checked,
+  onChange,
+  size = 'medium',
+  disabled = false,
+  brand = 'CO',
+  style,
+  id,
+}) => {
+  const {theme} = useSliceTheme();
+  const switchTheme = SWITCH_THEME[size];
+  const state = disabled ? 'disabled' : checked ? 'checked' : 'default';
+  const stylesObj =
+    state === 'checked'
+      ? switchTheme.checked(theme, brand)
+      : state === 'disabled'
+      ? switchTheme.disabled(theme)
+      : switchTheme.default(theme);
+
+  // Calculate track and thumb sizes
+  const trackWidth = Number(stylesObj.track.width) || 0;
+  const trackHeight = Number(stylesObj.track.height) || 0;
+  const thumbWidth = Number(stylesObj.thumb.width) || 0;
+  const thumbHeight = Number(stylesObj.thumb.height) || 0;
+  const paddingLeft = Number(stylesObj.track.paddingLeft) || 0;
+  const paddingRight = Number(stylesObj.track.paddingRight) || 0;
+  const thumbTop = (trackHeight - thumbHeight) / 2;
+
+  // Thumb: left for OFF, right for ON
+  const thumbRest = paddingLeft; // left end (OFF)
+  const thumbActive = trackWidth - thumbWidth - paddingRight; // right end (ON)
+
+  // Animated values
+  const anim = useRef(new Animated.Value(checked ? 1 : 0)).current;
+
+  useEffect(() => {
+    Animated.timing(anim, {
+      toValue: checked ? 1 : 0,
+      duration: ANIMATION_DURATION,
+      easing: Easing.out(Easing.ease),
+      useNativeDriver: false,
+    }).start();
+  }, [checked, anim]);
+
+  // Interpolate thumb position and scale
+  const thumbTranslate = anim.interpolate({
+    inputRange: [0, 1],
+    outputRange: [thumbRest, thumbActive],
+  });
+  const thumbScale = anim.interpolate({
+    inputRange: [0, 1],
+    outputRange: [0.8, 1], // scale up when toggled on
+  });
+  const thumbBgColor = anim.interpolate({
+    inputRange: [0, 1],
+    outputRange: [
+      String(stylesObj.thumb.backgroundColor),
+      String(switchTheme.checked(theme, brand).thumb.backgroundColor),
+    ],
+  });
+
+  return (
+    <Pressable
+      onPress={() => !disabled && onChange(!checked)}
+      accessibilityRole="switch"
+      accessibilityState={{checked, disabled}}
+      disabled={disabled}
+      style={[styles.track, stylesObj.track, style]}
+      testID={id}>
+      <Animated.View
+        style={[
+          styles.thumb,
+          stylesObj.thumb,
+          {
+            transform: [{translateX: thumbTranslate}, {scale: thumbScale}],
+            top: thumbTop,
+            backgroundColor: thumbBgColor,
+          },
+        ]}
+      />
+    </Pressable>
+  );
+};
+
+const styles = StyleSheet.create({
+  track: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'flex-start',
+    position: 'relative',
+    overflow: 'hidden',
+  },
+  thumb: {
+    position: 'absolute',
+    left: 0,
+    top: 0,
+  },
+});
+
+export default Switch;