jp-composter 0.1.0

package/src/SliceUI/input/variants/SelectInput/types.ts

@@ -0,0 +1,34 @@
+// SelectInput/types.ts
+import type { SelectOption } from '../../Type';
+
+export type ChipSize = 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge';
+
+export interface SelectInputProps {
+  value?: string | string[];
+  displayValue: string;
+  searchable?: boolean;
+  normalizedMultiple?: boolean;
+  normalizedListType?: 'default' | 'checkbox';
+  selectDropdownOpen: boolean;
+  filteredOptions: SelectOption[];
+  options: SelectOption[];
+  searchValue: string;
+  setSearchValue: (v: string) => void;
+  onOpen: () => void;
+  onClose: () => void;
+  onKeyDown: (e: any) => void;
+  onOptionSelect: (value: string) => void;
+  onCheckboxToggle: (value: string, checked: boolean) => void;
+  colorTheme: any;
+  placeholder?: string;
+  noItemText?: string;
+  maxAllowed?: number;
+  maxVisibleItems?: number;
+  selectedIcon?: React.ReactNode;
+  selectedValues: string[];
+  disabled?: boolean;
+  registerOptionRef: (index: number, el: HTMLElement | null) => void;
+  inputRef?: React.RefObject<any> | React.MutableRefObject<any>;
+  size?: ChipSize;
+  expandChips?: boolean;
+}

package/src/SliceUI/input/variants/TextInput.tsx

@@ -0,0 +1,68 @@
+import React from 'react';
+import {TextInput as RNTextInput, Platform} from 'react-native';
+
+interface TextInputVariantProps {
+  inputRef: React.Ref<any>;
+  value?: string | string[];
+  onChangeText?: (value: string | string[]) => void;
+  onFocus?: (e: any) => void;
+  onBlur?: (e: any) => void;
+  placeholder?: string;
+  disabled?: boolean;
+  style?: any;
+  placeholderTextColor?: string;
+  restProps?: Record<string, any>;
+}
+
+const TextInput = ({
+  inputRef,
+  value,
+  onChangeText,
+  onFocus,
+  onBlur,
+  placeholder,
+  disabled,
+  style,
+  placeholderTextColor,
+  restProps = {},
+}: TextInputVariantProps) => {
+  const handleChangeText = (text: string) => {
+    onChangeText?.(text);
+  };
+
+  const inputStyle =
+    Platform.OS === 'web'
+      ? [
+          style,
+          {
+            outline: 'none',
+            outlineWidth: 0,
+            outlineStyle: 'none',
+            boxShadow: 'none',
+          } as any,
+        ]
+      : [
+          style,
+          {
+            paddingVertical: 0,
+            textAlignVertical: 'center',
+          },
+        ];
+
+  return (
+    <RNTextInput
+      {...restProps}
+      ref={inputRef}
+      value={typeof value === 'string' ? value : ''}
+      onChangeText={handleChangeText}
+      onFocus={onFocus}
+      onBlur={onBlur}
+      style={inputStyle}
+      placeholder={placeholder}
+      placeholderTextColor={placeholderTextColor}
+      editable={!disabled}
+    />
+  );
+};
+
+export default TextInput;

package/src/SliceUI/layout/Box.tsx

@@ -0,0 +1,38 @@
+import React from 'react';
+import { View, ViewStyle } from 'react-native';
+
+// Example Usage:
+// <Box padding={10} bg="lightblue" margin={5}>
+//   <Text>Content inside a styled box</Text> {/* Box with padding, margin, and background */}
+// </Box>
+// <VStack>
+//   <Box flex={1} bg="gray">
+//     <Text>Fills available space</Text>
+//   </Box>
+// </VStack>
+
+interface BoxProps {
+  padding?: number; // Padding inside the box
+  margin?: number; // Margin outside the box
+  bg?: string; // Background color
+  flex?: number; // Flex value
+  children: React.ReactNode;
+}
+
+const Box: React.FC<BoxProps> = ({
+                                   padding = 0,
+                                   margin = 0,
+                                   bg,
+                                   flex,
+                                   children,
+                                 }) => {
+  const style: ViewStyle = {
+    padding,
+    margin,
+    backgroundColor: bg,
+    flex,
+  };
+  return <View style={style}>{children}</View>;
+};
+
+export default React.memo(Box);

package/src/SliceUI/layout/Center.tsx

@@ -0,0 +1,38 @@
+import React from 'react';
+import { View, ViewStyle } from 'react-native';
+
+// Example Usage:
+// <Box bg="lightgray" padding={20}>
+//   <Center> {/* Centers text both horizontally and vertically */}
+//     <Text>Centered Text</Text>
+//   </Center>
+// </Box>
+// <HStack>
+//   <Text>Left</Text>
+//   <Center horizontal={true} vertical={false}> {/* Centers horizontally only */}
+//     <Text>Middle</Text>
+//   </Center>
+//   <Text>Right</Text>
+// </HStack>
+
+interface CenterProps {
+  horizontal?: boolean; // Center horizontally
+  vertical?: boolean; // Center vertically
+  children: React.ReactNode;
+}
+
+const Center: React.FC<CenterProps> = ({
+                                         horizontal = true,
+                                         vertical = true,
+                                         children,
+                                       }) => {
+  const style: ViewStyle = {
+    ...(horizontal ? { alignItems: 'center' } : {}),
+    ...(vertical ? { justifyContent: 'center' } : {}),
+    flex: 1, // Ensures it takes available space
+  };
+
+  return <View style={style}>{children}</View>;
+};
+
+export default React.memo(Center);

package/src/SliceUI/layout/Divider.tsx

@@ -0,0 +1,37 @@
+import React from 'react';
+import { View, ViewStyle } from 'react-native';
+
+// Example Usage:
+// <VStack>
+//   <Text>Item 1</Text>
+//   <Divider color="gray" thickness={1} /> {/* Horizontal line between items */}
+//   <Text>Item 2</Text>
+// </VStack>
+// <HStack>
+//   <Text>Left</Text>
+//   <Divider orientation="vertical" color="black" thickness={2} /> {/* Vertical separator */}
+//   <Text>Right</Text>
+// </HStack>
+
+interface DividerProps {
+  orientation?: 'horizontal' | 'vertical'; // Direction of the line
+  color?: string; // Line color
+  thickness?: number; // Line thickness
+}
+
+const Divider: React.FC<DividerProps> = ({
+                                           orientation = 'horizontal',
+                                           color = 'gray',
+                                           thickness = 1,
+                                         }) => {
+  const style: ViewStyle = {
+    backgroundColor: color,
+    ...(orientation === 'horizontal'
+      ? { height: thickness, width: '100%' }
+      : { width: thickness, height: '100%' }),
+  };
+
+  return <View style={style} />;
+};
+
+export default React.memo(Divider);

package/src/SliceUI/layout/Grid.tsx

@@ -0,0 +1,75 @@
+import React from 'react';
+import {
+  View,
+  ViewStyle,
+  StyleProp,
+  ViewProps,
+  StyleSheet,
+} from 'react-native';
+
+interface GridProps extends ViewProps {
+  columns?: number; // Number of columns
+  gap?: number; // Spacing between items
+  children: React.ReactNode;
+  style?: StyleProp<ViewStyle>; // Container styles
+  itemStyle?: StyleProp<ViewStyle>; // Item styles
+}
+
+/**
+ * Grid is a flexible layout component for creating multi-column grids.
+ * It supports adjustable columns, spacing (gap), and custom styles.
+ *
+ * Example usage:
+ *
+ * // 3-column grid with spacing
+ * <Grid columns={3} gap={10}>
+ *   <Box bg="lightblue" padding={10}><Text>Box 1</Text></Box>
+ *   <Box bg="lightblue" padding={10}><Text>Box 2</Text></Box>
+ *   <Box bg="lightblue" padding={10}><Text>Box 3</Text></Box>
+ *   <Box bg="lightblue" padding={10}><Text>Box 4</Text></Box>
+ * </Grid>
+ *
+ * // 2-column grid with smaller gap
+ * <Grid columns={2} gap={5}>
+ *   <Text>Item 1</Text>
+ *   <Text>Item 2</Text>
+ *   <Text>Item 3</Text>
+ * </Grid>
+ *
+ * // Grid with custom container and item styles
+ * <Grid columns={2} gap={8} style={{ padding: 10 }} itemStyle={{ backgroundColor: '#eee' }}>
+ *   <Text>Styled 1</Text>
+ *   <Text>Styled 2</Text>
+ * </Grid>
+ */
+const Grid: React.FC<GridProps> = ({
+                                     columns = 2,
+                                     gap = 0,
+                                     children,
+                                     style,
+                                     itemStyle,
+                                     ...rest
+                                   }) => {
+  const gridStyle: ViewStyle = {
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+    gap,
+  };
+
+  const calculatedItemStyle: ViewStyle = {
+    width: `${100 / columns - (gap * (columns - 1)) / columns}%`,
+    marginBottom: gap,
+  };
+
+  return (
+    <View style={[gridStyle, style]} {...rest}>
+      {React.Children.map(children, (child, index) => (
+        <View key={`grid-item-${index}`} style={[calculatedItemStyle, itemStyle]}>
+          {child}
+        </View>
+      ))}
+    </View>
+  );
+};
+
+export default React.memo(Grid);

package/src/SliceUI/layout/PageContainer.tsx

@@ -0,0 +1,60 @@
+import React from 'react';
+import {
+  View,
+  ViewStyle,
+  StyleProp,
+  ViewProps,
+} from 'react-native';
+
+interface PageContainerProps extends ViewProps {
+  children: React.ReactNode;
+  style?: StyleProp<ViewStyle>;
+  maxWidth?: number;
+
+  // Padding options
+  padding?: number;
+  paddingTop?: number;
+  paddingBottom?: number;
+  paddingHorizontal?: number;
+  paddingVertical?: number;
+  paddingLeft?: number;
+  paddingRight?: number;
+}
+
+const PageContainer: React.FC<PageContainerProps> = ({
+                                                       children,
+                                                       style,
+                                                       maxWidth = 1024,
+                                                       padding,
+                                                       paddingTop,
+                                                       paddingBottom,
+                                                       paddingHorizontal,
+                                                       paddingVertical,
+                                                       paddingLeft,
+                                                       paddingRight,
+                                                       ...rest
+                                                     }) => {
+  const containerStyle: ViewStyle = {
+    flex: 1,
+    width: '100%',
+    alignSelf: 'center',
+    maxWidth,
+
+    // Apply padding props if provided
+    ...(padding !== undefined && { padding }),
+    ...(paddingTop !== undefined && { paddingTop }),
+    ...(paddingBottom !== undefined && { paddingBottom }),
+    ...(paddingHorizontal !== undefined && { paddingHorizontal }),
+    ...(paddingVertical !== undefined && { paddingVertical }),
+    ...(paddingLeft !== undefined && { paddingLeft }),
+    ...(paddingRight !== undefined && { paddingRight }),
+  };
+
+  return (
+    <View style={[containerStyle, style]} {...rest}>
+      {children}
+    </View>
+  );
+};
+
+export default React.memo(PageContainer);

package/src/SliceUI/layout/ScrollContainer.tsx

@@ -0,0 +1,72 @@
+import React from 'react';
+import {
+  DimensionValue,
+  ScrollView,
+  ScrollViewProps,
+  StyleSheet,
+  StyleProp,
+  ViewStyle,
+} from 'react-native';
+
+interface ScrollContainerProps extends ScrollViewProps {
+  direction?: 'horizontal' | 'vertical'; // Scroll direction
+  showsIndicators?: boolean; // Toggle scroll indicators
+  maxHeight?: DimensionValue; // Max height for vertical scroll
+  style?: StyleProp<ViewStyle>; // Additional styles
+}
+
+/**
+ * ScrollContainer provides a customizable scrollable wrapper.
+ * Supports both vertical and horizontal scrolling, with optional indicators and max height.
+ *
+ * Example usage:
+ *
+ * // Vertical scrollable list with max height
+ * <ScrollContainer direction="vertical" maxHeight={200} showsIndicators={false}>
+ *   <VStack gap={10}>
+ *     <Text>Item 1</Text>
+ *     <Text>Item 2</Text>
+ *     <Text>Item 3</Text>
+ *     <Text>Item 4</Text>
+ *   </VStack>
+ * </ScrollContainer>
+ *
+ * // Horizontal scrollable row
+ * <ScrollContainer direction="horizontal">
+ *   <HStack gap={10}>
+ *     <Box bg="lightblue" padding={10}><Text>Box 1</Text></Box>
+ *     <Box bg="lightblue" padding={10}><Text>Box 2</Text></Box>
+ *     <Box bg="lightblue" padding={10}><Text>Box 3</Text></Box>
+ *   </HStack>
+ * </ScrollContainer>
+ */
+const ScrollContainer: React.FC<ScrollContainerProps> = ({
+                                                           direction = 'vertical',
+                                                           showsIndicators = true,
+                                                           maxHeight,
+                                                           style,
+                                                           children,
+                                                           ...scrollViewProps
+                                                         }) => {
+  const isHorizontal = direction === 'horizontal';
+
+  return (
+    <ScrollView
+      horizontal={isHorizontal}
+      showsHorizontalScrollIndicator={isHorizontal ? showsIndicators : false}
+      showsVerticalScrollIndicator={!isHorizontal ? showsIndicators : false}
+      style={[styles.scroll, maxHeight ? { maxHeight } : {}, style]}
+      {...scrollViewProps}
+    >
+      {children}
+    </ScrollView>
+  );
+};
+
+const styles = StyleSheet.create({
+  scroll: {
+    flexGrow: 0, // Prevents scroll from expanding unnecessarily
+  },
+});
+
+export default React.memo(ScrollContainer);

package/src/SliceUI/layout/Spacer.tsx

@@ -0,0 +1,54 @@
+import React from 'react';
+import {
+  DimensionValue,
+  View,
+  ViewStyle,
+  ViewProps,
+  StyleProp,
+} from 'react-native';
+
+interface SpacerProps extends ViewProps {
+  width?: DimensionValue; // Fixed width or percentage
+  height?: DimensionValue; // Fixed height or percentage
+  flex?: number;           // Flex grow to fill space
+  style?: StyleProp<ViewStyle>; // Additional styles
+}
+
+/**
+ * Spacer is a utility component for adding space between elements.
+ * You can control its size with `width`, `height`, or `flex`.
+ *
+ * Example usage:
+ *
+ * // Horizontal space between two items
+ * <HStack>
+ *   <Text>Left</Text>
+ *   <Spacer width={20} />
+ *   <Text>Right</Text>
+ * </HStack>
+ *
+ * // Push content to the end using flex
+ * <HStack>
+ *   <Text>Left</Text>
+ *   <Spacer flex={1} />
+ *   <Text>Right</Text>
+ * </HStack>
+ *
+ * // Vertical spacing
+ * <VStack>
+ *   <Text>Top</Text>
+ *   <Spacer height={30} />
+ *   <Text>Bottom</Text>
+ * </VStack>
+ */
+const Spacer: React.FC<SpacerProps> = ({ width, height, flex, style, ...rest }) => {
+  const spacerStyle: ViewStyle = {
+    width,
+    height,
+    flex,
+  };
+
+  return <View style={[spacerStyle, style]} {...rest} />;
+};
+
+export default React.memo(Spacer);

package/src/SliceUI/layout/Stack.tsx

@@ -0,0 +1,97 @@
+import React from 'react';
+import {
+  View,
+  ViewStyle,
+  ViewProps,
+  StyleProp,
+} from 'react-native';
+
+interface StackProps extends ViewProps {
+  gap?: number; // Spacing between children
+  children: React.ReactNode;
+  style?: StyleProp<ViewStyle>; // Additional container styles
+  alignItems?: ViewStyle['alignItems']; // Alignment along cross axis
+  justifyContent?: ViewStyle['justifyContent']; // Alignment along main axis
+  flexWrap?: ViewStyle['flexWrap']; // Wrap children if needed
+}
+
+/**
+ * HStack arranges children in a horizontal row with optional spacing and alignment.
+ *
+ * Example usage:
+ *
+ * <HStack gap={10}>
+ *   <Text>Left</Text>
+ *   <Text>Right</Text>
+ * </HStack>
+ *
+ * <HStack gap={12} alignItems="center" justifyContent="space-between" style={{ padding: 10 }}>
+ *   <Text>Left</Text>
+ *   <Text>Right</Text>
+ * </HStack>
+ */
+const HStackComponent: React.FC<StackProps> = ({
+                                              gap = 0,
+                                              children,
+                                              style,
+                                              alignItems,
+                                              justifyContent,
+                                              flexWrap,
+                                              ...rest
+                                            }) => {
+  const combinedStyle: ViewStyle = {
+    flexDirection: 'row',
+    gap,
+    alignItems,
+    justifyContent,
+    flexWrap,
+  };
+
+  return (
+    <View style={[combinedStyle, style]} {...rest}>
+      {children}
+    </View>
+  );
+};
+
+/**
+ * VStack arranges children in a vertical column with optional spacing and alignment.
+ *
+ * Example usage:
+ *
+ * <VStack gap={15}>
+ *   <Text>Top</Text>
+ *   <Text>Bottom</Text>
+ * </VStack>
+ *
+ * <VStack gap={20} style={{ backgroundColor: '#f0f0f0' }} alignItems="center">
+ *   <Text>Centered 1</Text>
+ *   <Text>Centered 2</Text>
+ * </VStack>
+ */
+const VStackComponent: React.FC<StackProps> = ({
+                                              gap = 0,
+                                              children,
+                                              style,
+                                              alignItems,
+                                              justifyContent,
+                                              flexWrap,
+                                              ...rest
+                                            }) => {
+  const combinedStyle: ViewStyle = {
+    flexDirection: 'column',
+    gap,
+    alignItems,
+    justifyContent,
+    flexWrap,
+  };
+
+  return (
+    <View style={[combinedStyle, style]} {...rest}>
+      {children}
+    </View>
+  );
+};
+
+export const HStack = React.memo(HStackComponent);
+export const VStack = React.memo(VStackComponent);

package/src/SliceUI/layout/StickyHeader.tsx

@@ -0,0 +1,71 @@
+import React from 'react';
+import { View, ViewStyle, StyleProp } from 'react-native';
+
+// Example Usage:
+// <StickyHeader
+//   bg="#f0f0f0"
+//   position="top" {/* Default top positioning */}
+//   offset={10} {/* Adds 10 units from the top */}
+//   shadow={true} {/* Adds a subtle shadow */}
+//   opacity={0.9} {/* Slightly transparent */}
+//   style={{ borderBottomWidth: 1, borderColor: 'gray' }} {/* Custom styles */}
+// >
+//   <HStack gap={10} style={{ padding: 10 }}>
+//     <Text style={{ fontSize: 20 }}>John Doe</Text>
+//     <Spacer flex={1} />
+//     <Text>Settings</Text>
+//   </HStack>
+// </StickyHeader>
+// <StickyHeader
+//   bg="white"
+//   position="bottom" {/* Sticks to bottom */}
+//   shadow={false}
+//   zIndex={5}
+// >
+//   <HStack gap={5} style={{ padding: 5 }}>
+//     <Text>Footer Item</Text>
+//   </HStack>
+// </StickyHeader>
+
+interface StickyHeaderProps {
+  bg?: string; // Background color of the header
+  position?: 'top' | 'bottom'; // Where the header sticks (top or bottom)
+  offset?: number; // Distance from the edge (top or bottom)
+  shadow?: boolean; // Toggle shadow effect
+  opacity?: number; // Transparency level (0 to 1)
+  zIndex?: number; // Stacking order
+  style?: StyleProp<ViewStyle>; // Additional custom styles
+  children: React.ReactNode; // Content inside the header
+}
+
+const StickyHeader: React.FC<StickyHeaderProps> = ({
+                                                     bg = '#f0f0f0',
+                                                     position = 'top',
+                                                     offset = 0,
+                                                     shadow = false,
+                                                     opacity = 1,
+                                                     zIndex = 10,
+                                                     style,
+                                                     children,
+                                                   }) => {
+  const baseStyle: ViewStyle = {
+    position: 'absolute',
+    [position]: offset, // Dynamically set top or bottom based on position prop
+    left: 0,
+    right: 0,
+    backgroundColor: bg,
+    opacity,
+    zIndex,
+    ...(shadow && {
+      shadowColor: '#000',
+      shadowOffset: { width: 0, height: 2 },
+      shadowOpacity: 0.2,
+      shadowRadius: 4,
+      elevation: 5, // For Android shadow
+    }),
+  };
+
+  return <View style={[baseStyle, style]}>{children}</View>;
+};
+
+export default React.memo(StickyHeader);