✨ Storybook - add date field to storybook

ZeroGachis · Dec 18, 2023 · 94f5ef4 · 94f5ef4
1 parent 9d3058f
commit 94f5ef4
Show file tree

Hide file tree

Showing 3 changed files with 50 additions and 8 deletions.
diff --git a/Storybook/.ondevice/storybook.requires.js b/Storybook/.ondevice/storybook.requires.js
@@ -54,6 +54,7 @@ const getStories = () => {
     "./components/BottomSheet/BottomSheet.stories.tsx": require("../components/BottomSheet/BottomSheet.stories.tsx"),
     "./components/Button/Button.stories.tsx": require("../components/Button/Button.stories.tsx"),
     "./components/Card/Card.stories.tsx": require("../components/Card/Card.stories.tsx"),
+    "./components/DatePicker/DateField.stories.tsx": require("../components/DatePicker/DateField.stories.tsx"),
     "./components/Dialog/Dialog.stories.tsx": require("../components/Dialog/Dialog.stories.tsx"),
     "./components/Divider/Divider.stories.tsx": require("../components/Divider/Divider.stories.tsx"),
     "./components/DropDown/DropDown.stories.tsx": require("../components/DropDown/DropDown.stories.tsx"),

diff --git a/Storybook/components/DatePicker/DateField.stories.tsx b/Storybook/components/DatePicker/DateField.stories.tsx
@@ -0,0 +1,35 @@
+import React, { useState } from 'react';
+import { ComponentMeta } from '@storybook/react';
+import { StyleSheet, View } from 'react-native';
+import { DateField } from '../../../src';
+import { DateFieldProps } from '../../../src/components/datePicker/DateField';
+
+export default {
+    title: 'components/DateField',
+    component: DateField,
+    argTypes: {
+        placeholder: { control: { type: 'text' }, defaultValue: '01' },
+        hasError: { control: { type: 'boolean' }, defaultValue: false },
+    },
+    decorators: [
+        (Story) => {
+            const styles = StyleSheet.create({
+                container: {
+                    alignItems: 'center',
+                    justifyContent: 'center',
+                    flex: 1,
+                },
+            });
+            return (
+                <View style={styles.container}>
+                    <Story />
+                </View>
+            );
+        },
+    ],
+} as ComponentMeta<typeof DateField>;
+
+export const Default = (args: DateFieldProps) => {
+    const [value, setValue] = useState('');
+    return <DateField value={value} {...args} onChangeText={setValue} />;
+};
diff --git a/src/components/datePicker/DateField.tsx b/src/components/datePicker/DateField.tsx
@@ -20,7 +20,7 @@ export interface DateFieldProps extends TextInputProps {
     hasError?: boolean;
 }
 
-function GetColorsStyle(theme: Theme, state: State) {
+function getColorsStyle(theme: Theme, state: State) {
     let backgroundColor, borderColor, textColor;
 
     switch (state) {
@@ -55,7 +55,7 @@ function GetColorsStyle(theme: Theme, state: State) {
 }
 
 function getStyle(theme: Theme, state: State) {
-    const { backgroundColor, borderColor, textColor } = GetColorsStyle(
+    const { backgroundColor, borderColor, textColor } = getColorsStyle(
         theme,
         state,
     );
@@ -70,7 +70,7 @@ function getStyle(theme: Theme, state: State) {
             color: textColor,
             fontFamily: 'PublicSans-Bold',
             fontSize: 20,
-            lineHeight: 48,
+            lineHeight: 23.5,
             backgroundColor: backgroundColor,
             paddingVertical: 0,
             marginVertical: 0,
@@ -144,15 +144,21 @@ function getState(
 ): State {
     if (hasError) {
         return 'error';
-    } else if (!isFocused && value === '') {
+    }
+
+    if (!isFocused && value === '') {
         return 'empty';
-    } else if (isFocused && value === '') {
+    }
+
+    if (isFocused && value === '') {
         return 'empty-focused';
-    } else if (!isFocused) {
+    }
+
+    if (!isFocused) {
         return 'filled';
-    } else {
-        return 'filled-focused';
     }
+
+    return 'filled-focused';
 }
 
 function removeNonNumeric(str: string): string {