feat: implemented input chip

Author: computools-anastasiia-nahaiska

README.md

@@ -2,6 +2,9 @@
 
 Computools react native material components package
 
+![Material desgin Figma](https://www.figma.com/design/MY4zoWhMQUMOMIfBGcgSpy/Material-3-Design-Kit-(Community)?node-id=47909-2&p=f&t=Fo0xFwhmWhLMqS8Z-0)
+![Material icons design Figma](https://www.figma.com/design/siKJo238QbcA9I2EqYMZ9y/Material-Design-Icons-(Community)?node-id=2402-2207&node-type=canvas&t=xqHD7AwdyHpKWsur-0)
+
 ## Installation
 
 1. ```yarn add @computools/react-native-material-components```

src/chips/base-chip/BaseChip.component.tsx

@@ -0,0 +1,25 @@
+import React, {type ReactNode} from 'react';
+import {TouchableOpacity, Text, type TouchableOpacityProps, type StyleProp, type TextStyle} from 'react-native';
+
+import {styles} from './base-chip.styles';
+import {useTypography} from '../../typography/useTypography.component';
+
+export interface BaseChipProps extends TouchableOpacityProps {
+  label: string;
+
+  leadingIcon?: ReactNode;
+  trailingIcon?: ReactNode;
+  labelStyle?: StyleProp<TextStyle>;
+}
+
+export const BaseChip: React.FC<BaseChipProps> = ({label, leadingIcon, trailingIcon, style, ...props}) => {
+  const {labelLarge} = useTypography();
+
+  return (
+    <TouchableOpacity style={[styles.container, style]} hitSlop={8} {...props}>
+      {leadingIcon}
+      <Text style={[[styles.label, labelLarge]]}>{label}</Text>
+      {trailingIcon}
+    </TouchableOpacity>
+  );
+};

src/chips/base-chip/base-chip.styles.ts

@@ -0,0 +1,16 @@
+import {StyleSheet} from 'react-native';
+
+export const styles = StyleSheet.create({
+  container: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 4,
+
+    borderRadius: 8,
+    paddingVertical: 6,
+    paddingHorizontal: 8,
+  },
+  label: {
+    paddingHorizontal: 4,
+  },
+});

src/chips/input-chip/InputChip.component.tsx

@@ -0,0 +1,57 @@
+import React, {useMemo} from 'react';
+import {Image, StyleSheet} from 'react-native';
+
+import {CloseIcon} from '../../icons';
+import {styles} from './input-chip.styles';
+import {useTheme} from '../../theme/useTheme.hook';
+import {type IconProps} from '../../icons/icon-props';
+import {BaseChip, type BaseChipProps} from '../base-chip/BaseChip.component';
+
+interface InputChipProps<T extends IconProps> extends BaseChipProps {
+  selected?: boolean;
+  imageUrl?: string;
+  LeadingIcon?: React.FC<T>;
+  leadingIconProps?: T;
+  hasTrailingIcon?: boolean;
+}
+
+export const InputChip = <T extends IconProps>({
+  selected = false,
+  LeadingIcon,
+  imageUrl,
+  hasTrailingIcon = true,
+  leadingIconProps = {} as T,
+  style,
+  ...props
+}: InputChipProps<T>) => {
+  const {surface, secondaryContainer, outline, primary} = useTheme();
+
+  const onContainerColor = selected ? secondaryContainer.text : surface.textVariant;
+
+  const dynamicStyles = useMemo(
+    () =>
+      StyleSheet.create({
+        container: {
+          borderWidth: Number(!selected),
+          borderColor: outline,
+          backgroundColor: selected ? secondaryContainer.background : 'transparent',
+        },
+        label: {
+          color: onContainerColor,
+        },
+      }),
+    [selected, onContainerColor]
+  );
+
+  const renderLeadingAvatar = () => (imageUrl ? <Image style={styles.leadingImage} source={{uri: imageUrl}} /> : null);
+
+  return (
+    <BaseChip
+      style={[dynamicStyles.container, imageUrl ? styles.chipWithAvatarContainer : [], style]}
+      labelStyle={dynamicStyles.label}
+      leadingIcon={LeadingIcon ? <LeadingIcon size={18} color={primary.background} {...leadingIconProps} /> : renderLeadingAvatar()}
+      trailingIcon={hasTrailingIcon ? <CloseIcon size={18} color={onContainerColor} /> : null}
+      {...props}
+    />
+  );
+};

src/chips/input-chip/input-chip.styles.ts

@@ -0,0 +1,14 @@
+import {StyleSheet} from 'react-native';
+
+export const styles = StyleSheet.create({
+  chipWithAvatarContainer: {
+    paddingStart: 4,
+    paddingVertical: 4,
+    borderRadius: 30,
+  },
+  leadingImage: {
+    width: 24,
+    height: 24,
+    borderRadius: 12,
+  },
+});

src/icons/attach-file-icon/AttachFileIcon.component.tsx

@@ -5,7 +5,7 @@ import {path} from './path.json';
 import type {IconProps} from '../icon-props';
 
 const DEFAULT_SIZE = 24;
-const DEFAULT_COLOR = '#ffffff';
+const DEFAULT_COLOR = '#000';
 
 export const AttachFileIcon: React.FC<IconProps> = ({color = DEFAULT_COLOR, size = DEFAULT_SIZE}) => (
   <Svg viewBox="0 0 24 24" width={size} height={size} fill={'none'}>

src/icons/check-small-icon/CheckSmallIcon.component.tsx

@@ -5,7 +5,7 @@ import {path} from './path.json';
 import type {IconProps} from '../icon-props';
 
 const DEFAULT_SIZE = 24;
-const DEFAULT_COLOR = '#ffffff';
+const DEFAULT_COLOR = '#000';
 
 export const CheckSmallIcon: React.FC<IconProps> = ({color = DEFAULT_COLOR, size = DEFAULT_SIZE}) => (
   <Svg viewBox="0 0 24 24" width={size} height={size} fill={'none'}>

src/icons/close-icon/CloseIcon.component.tsx

@@ -5,7 +5,7 @@ import {path} from './path.json';
 import type {IconProps} from '../icon-props';
 
 const DEFAULT_SIZE = 24;
-const DEFAULT_COLOR = '#ffffff';
+const DEFAULT_COLOR = '#000';
 
 export const CloseIcon: React.FC<IconProps> = ({color = DEFAULT_COLOR, size = DEFAULT_SIZE}) => (
   <Svg viewBox="0 0 24 24" width={size} height={size}>

src/icons/more-vert-icon/MoreVertIcon.component.tsx

@@ -5,7 +5,7 @@ import {path} from './path.json';
 import type {IconProps} from '../icon-props';
 
 const DEFAULT_SIZE = 24;
-const DEFAULT_COLOR = '#ffffff';
+const DEFAULT_COLOR = '#000';
 
 export const MoreVertIcon: React.FC<IconProps> = ({color = DEFAULT_COLOR, size = DEFAULT_SIZE}) => (
   <Svg viewBox="0 0 24 24" width={size} height={size} fill={'none'}>

src/icons/today-icon/TodayIcon.component.tsx

@@ -5,7 +5,7 @@ import {path} from './path.json';
 import type {IconProps} from '../icon-props';
 
 const DEFAULT_SIZE = 24;
-const DEFAULT_COLOR = '#ffffff';
+const DEFAULT_COLOR = '#000';
 
 export const TodayIcon: React.FC<IconProps> = ({color = DEFAULT_COLOR, size = DEFAULT_SIZE}) => (
   <Svg viewBox="0 0 24 24" width={size} height={size} fill={'none'}>