chore/fixing PR comments

assets/translations/en.json

@@ -411,6 +411,9 @@
  "type_placeholder": "Please type text",
  "paragraph_placeholder": "Type in your answer here."
  },
+ "character_counter":{
+ "characters":"characters"
+ },
  "additional": {
  "server-error": "Server error occurred",
  "time-end": "Time is up!",

assets/translations/fr.json

@@ -399,6 +399,9 @@
  "type_placeholder": "Veuiller saisir du texte",
  "paragraph_placeholder": "Tapez votre réponse ici."
  },
+ "character_counter":{
+ "characters":"caractères"
+ },
  "language_screen": {
  "app_language": " Langue de l'application",
  "change_app_language": "Changer la langue",

src/shared/ui/survey/CharacterCounter.tsx → src/shared/ui/CharacterCounter.tsx

@@ -1,6 +1,11 @@
 import React, { FC } from 'react';
 
-import CharacterCounterText from '../CharacterCounterText';
+import { useTranslation } from 'react-i18next';
+
+import { CharacterCounterText } from '@shared/ui';
+
+import { colors } from '../lib';
+
 type Props = {
  limit: number | string;
  numberOfCharacters: number | string;
@@ -14,12 +19,16 @@ const CharacterCounter: FC<Props> = ({
  fontSize = 14,
  focused = false,
 }) => {
+ const { t } = useTranslation();
+
  return (
  <CharacterCounterText
- color={focused ? 'primary' : 'grey4'}
- fontSize={fontSize}
+ style={{
+ fontSize,
+ color: focused ? colors.primary : colors.grey4,
+ }}
  >
- {numberOfCharacters}/{limit} characters
+ {numberOfCharacters}/{limit} {t('character_counter:characters')}
  </CharacterCounterText>
  );
 };

src/shared/ui/CharacterCounterText.tsx

@@ -1,15 +1,12 @@
 import { Text } from 'react-native';
 
 import { setupReactNative, styled } from '@tamagui/core';
-import { focusableInputHOC } from '@tamagui/focusable';
-
-import { colors } from '../lib';
 
 setupReactNative({
  Text,
 });
 
-export const CharacterCounterText = styled(
+const CharacterCounterText = styled(
  Text,
  {
  name: 'CharacterCounterText',
@@ -24,19 +21,10 @@ export const CharacterCounterText = styled(
  style: {
  fontWeight: '400',
  },
-
- variants: {
- fontSize: (fontSize: number) => ({
- fontSize,
- }),
- color: (color: keyof typeof colors) => ({
- color: colors[color] || color,
- }),
- },
  },
  {
- inlineProps: new Set(['fontSize', 'color']),
+ inlineProps: new Set(['style']),
  },
 );
 
-export default focusableInputHOC(CharacterCounterText);
+export default CharacterCounterText;

src/shared/ui/index.tsx

@@ -1,6 +1,8 @@
 import CheckBox from '@react-native-community/checkbox';
 
 import Center from './Center';
+import CharacterCounter from './CharacterCounter';
+import CharacterCounterText from './CharacterCounterText';
 import Input from './Input';
 import KeyboardAvoidingView from './KeyboardAvoidingView';
 import Link from './Link';
@@ -48,6 +50,8 @@ export {
  KeyboardAvoidingView,
  Input,
  LongTextInput,
+ CharacterCounter,
+ CharacterCounterText,
  CheckBox,
  ScrollView,
  RowButton,

src/shared/ui/survey/ParagraphText.tsx

@@ -4,9 +4,7 @@ import { StyleSheet, TextInputProps, View } from 'react-native';
 import { useTranslation } from 'react-i18next';
 
 import { colors } from '@shared/lib';
-import { LongTextInput } from '@shared/ui';
-
-import CharacterCounter from './CharacterCounter';
+import { LongTextInput, CharacterCounter } from '@shared/ui';
 
 type Props = {
  onChange: (text: string) => void;

src/shared/ui/survey/tests/CharacterCounter.test.tsx → src/shared/ui/tests/CharacterCounter.test.tsx

@@ -3,12 +3,10 @@ import React from 'react';
 import renderer from 'react-test-renderer';
 
 import TamaguiProvider from '@app/app/ui/AppProvider/TamaguiProvider';
-
-import CharacterCounterText from '../../CharacterCounterText';
-import CharacterCounter from '../CharacterCounter';
+import { CharacterCounterText, CharacterCounter } from '@shared/ui';
 
 describe('CharacterCounter Component', () => {
- it('Should renders correctly with default props', () => {
+ it('Should render correctly with default props', () => {
  const tree = renderer
  .create(
  <TamaguiProvider>
@@ -28,7 +26,9 @@ describe('CharacterCounter Component', () => {
  );
 
  const textElement = tree.root.findByType(CharacterCounterText);
- expect(textElement.props.fontSize).toBe(20);
+ expect(textElement.props.style).toEqual(
+ expect.objectContaining({ color: '#72777F', fontSize: 20 }),
+ );
  });
 
  it('Should apply the primary color when focused', () => {
@@ -39,7 +39,9 @@ describe('CharacterCounter Component', () => {
  );
 
  const textElement = tree.root.findByType(CharacterCounterText);
- expect(textElement.props.color).toBe('primary');
+ expect(textElement.props.style).toEqual(
+ expect.objectContaining({ color: '#0067A0', fontSize: 14 }),
+ );
  });
 
  it('Should apply the grey color when not focused', () => {
@@ -50,7 +52,9 @@ describe('CharacterCounter Component', () => {
  );
 
  const textElement = tree.root.findByType(CharacterCounterText);
- expect(textElement.props.color).toBe('grey4');
+ expect(textElement.props.style).toEqual(
+ expect.objectContaining({ color: '#72777F', fontSize: 14 }),
+ );
  });
 
  it('Should display the correct character count', () => {
@@ -66,6 +70,6 @@ describe('CharacterCounter Component', () => {
  ? textElement.props.children.join('')
  : textElement.props.children;
 
- expect(characterCountText).toBe('150/200 characters');
+ expect(characterCountText).toBe('150/200 character_counter:characters');
  });
 });

src/shared/ui/tests/__snapshots__/CharacterCounter.test.tsx.snap

@@ -0,0 +1,70 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`CharacterCounter Component Should render correctly with default props 1`] = `
+<Text
+ focusable={true}
+ style={
+ [
+ {
+ "borderBottomWidth": 0,
+ "borderLeftWidth": 0,
+ "borderRightWidth": 0,
+ "borderStyle": "solid",
+ "borderTopWidth": 0,
+ "color": "#72777F",
+ "flex": 1,
+ "fontSize": 14,
+ "marginBottom": 2,
+ "marginLeft": 2,
+ "marginRight": 10,
+ "marginTop": 2,
+ "paddingBottom": 2,
+ "paddingLeft": 2,
+ "paddingRight": 2,
+ "paddingTop": 2,
+ },
+ ]
+ }
+>
+ 50
+ /
+ 100
+ 
+ character_counter:characters
+</Text>
+`;
+
+exports[`CharacterCounter Component Should renders correctly with default props 1`] = `
+<Text
+ color="grey4"
+ focusable={true}
+ fontSize={14}
+ style={
+ [
+ {
+ "borderBottomWidth": 0,
+ "borderLeftWidth": 0,
+ "borderRightWidth": 0,
+ "borderStyle": "solid",
+ "borderTopWidth": 0,
+ "flex": 1,
+ "fontWeight": "400",
+ "marginBottom": 2,
+ "marginLeft": 2,
+ "marginRight": 10,
+ "marginTop": 2,
+ "paddingBottom": 2,
+ "paddingLeft": 2,
+ "paddingRight": 2,
+ "paddingTop": 2,
+ },
+ ]
+ }
+>
+ 50
+ /
+ 100
+ 
+ character_counter:characters
+</Text>
+`;