♻️ DateSelector - Refactor story and delete error color for placeholder

ZeroGachis · Jan 30, 2024 · 9604d03 · 9604d03
1 parent 6c6d2d0
commit 9604d03
Show file tree

Hide file tree

Showing 4 changed files with 12 additions and 56 deletions.
diff --git a/Storybook/components/DateSelector/DateSelector.stories.tsx b/Storybook/components/DateSelector/DateSelector.stories.tsx
@@ -1,28 +1,27 @@
-import React, { useState } from 'react';
-import { DateSelector } from '../../../src/components/dateSelector/DateSelector';
+import React from 'react';
+import { DateSelector } from '../../../src';
 import type { ComponentMeta, ComponentStory } from '@storybook/react-native';
 import { action } from '@storybook/addon-actions';
-import { StyleSheet, View, Text } from 'react-native';
+import { View } from 'react-native';
 
 export default {
     title: 'components/DateSelector',
     component: DateSelector,
     argTypes: {
         prefilled: { control: { type: 'date' } },
+        errorMessage: { control: { type: 'text' } },
     },
     args: {
         prefilled: new Date(2023, 0, 8),
         onUpdatedDate: (date: Date) => {
             action('onChange')(date.toDateString());
         },
+        errorMessage: undefined,
     },
     decorators: [
         (Story) => {
-            const styles = StyleSheet.create({
-                container: { paddingTop: 16 },
-            });
             return (
-                <View style={styles.container}>
+                <View style={{ paddingTop: 16 }}>
                     <Story />
                 </View>
             );
@@ -33,43 +32,3 @@ export default {
 export const Base: ComponentStory<typeof DateSelector> = (args) => {
     return <DateSelector {...args} />;
 };
-
-export const WithErrorMessage: ComponentStory<typeof DateSelector> = (args) => {
-    const [error, setError] = useState('');
-
-    const handleUpdatedDate = (date: Date) => {
-        const isGreaterThunberg = isGreaterThan2030(date);
-        if (isGreaterThunberg) {
-            setError('How dare you...');
-        } else {
-            setError('');
-        }
-
-        return !isGreaterThunberg;
-    };
-
-    const styles = getStyles();
-
-    return (
-        <View>
-            <Text style={styles.container}>
-                Enter a date greater than 2030 to be in error.
-            </Text>
-            <DateSelector
-                {...args}
-                onUpdatedDate={handleUpdatedDate}
-                errorMessage={error}
-            />
-        </View>
-    );
-
-    function getStyles() {
-        return StyleSheet.create({
-            container: { padding: 8 },
-        });
-    }
-};
-
-function isGreaterThan2030(date: Date): boolean {
-    return date.getFullYear() > 2030;
-}
diff --git a/src/__tests__/components/__snapshots__/DateField.test.tsx.snap b/src/__tests__/components/__snapshots__/DateField.test.tsx.snap
@@ -252,6 +252,7 @@ exports[`MODULE | DateField component renders correctly in error state 1`] = `
       onChangeText={[Function]}
       onFocus={[Function]}
       placeholder="01"
+      placeholderTextColor="#919EAB"
       selectTextOnFocus={true}
       selectionColor="#18A58629"
       style={

diff --git a/src/components/dateSelector/DateField.tsx b/src/components/dateSelector/DateField.tsx
@@ -103,15 +103,11 @@ function useDateFieldStyle(
     }
 
     function getPlaceholderColorsStyle(theme: Theme, state: State) {
-        let textColor: string | undefined = theme.sw.colors.neutral[500];
-        if (state === 'error') {
-            textColor = undefined;
-        }
-        if (state === 'empty-focused') {
-            textColor = theme.sw.colors.primary.main;
-        }
         return {
-            textColor,
+            textColor:
+                state === 'empty-focused'
+                    ? theme.sw.colors.primary.main
+                    : theme.sw.colors.neutral[500],
         };
     }
 

diff --git a/src/components/dateSelector/DateSelector.tsx b/src/components/dateSelector/DateSelector.tsx
@@ -13,7 +13,7 @@ import {
 type DateSelectorProps = WithTestID<{
     prefilled: Date;
     errorMessage?: string;
-    onUpdatedDate: (date: Date) => boolean;
+    onUpdatedDate: (date: Date) => void;
 }>;
 
 interface FieldsValues {