Release 0.0.44

Divided stories into sub dir for better maintenance.
hyochan · Feb 5, 2021 · 8dfdcc7 · 8dfdcc7
1 parent 87e1f0e
commit 8dfdcc7
Show file tree

Hide file tree

Showing 10 changed files with 606 additions and 415 deletions.
diff --git a/CHANGELOGS.md b/CHANGELOGS.md
@@ -1,6 +1,15 @@
 ## Changelogs
 
-## 0.0.43
+## 0.0.44
+
+[EditText]
+
+- Added missing callBack props `onSubmitEditing`.
+- Set default `placeholderTextColor`.
+- Added `labelColor`.
+- Dark mode example in story.
+
+- ## 0.0.43
 
 [EditText]
 

diff --git a/lib/package.json b/lib/package.json
@@ -1,6 +1,6 @@
 {
   "name": "dooboo-ui",
-  "version": "0.0.43",
+  "version": "0.0.44",
   "main": "index.js",
   "types": "index.d.ts",
   "author": "dooboolab",

diff --git a/main/EditText.tsx b/main/EditText.tsx
@@ -43,6 +43,7 @@ export type EditTextProps = {
   hoverColor?: string;
   errorColor?: string;
   disableColor?: string;
+  labelColor?: string;
   type?: 'row' | 'column';
 };
 
@@ -56,26 +57,27 @@ const Component: FC<EditTextProps & {theme: Theme}> = ({
   errorText = '',
   value = '',
   placeholder,
-  placeholderTextColor,
   onChange,
   onChangeText,
   onFocus,
   onBlur,
+  onSubmitEditing,
   autoCapitalize = 'none',
   secureTextEntry = false,
   editable = true,
+  placeholderTextColor = theme.placeholder,
   focusColor = theme.primary,
   hoverColor = theme.primaryDark,
   errorColor = theme.negative,
   disableColor = theme.disabled,
+  labelColor = theme.secondaryText,
   type = 'row',
 }) => {
   const [focused, setFocused] = useState(false);
   const ref = useRef<View>(null);
   const hovered = useHover(ref);
 
   const borderColor = disableColor;
-  const labelColor = disableColor;
   const hoveredColor = theme.primary;
   const textColor = theme.text;
 
@@ -257,6 +259,7 @@ const Component: FC<EditTextProps & {theme: Theme}> = ({
           placeholderTextColor={placeholderTextColor}
           onChange={onChange}
           onChangeText={onChangeText}
+          onSubmitEditing={onSubmitEditing}
         />
       </View>
       {errorText ? (

diff --git a/main/__tests__/__snapshots__/EditText.test.tsx.snap b/main/__tests__/__snapshots__/EditText.test.tsx.snap
@@ -40,6 +40,7 @@ exports[`[EditText] interactions Type: [column] renders custom styles without cr
       editable={true}
       onBlur={[Function]}
       onFocus={[Function]}
+      placeholderTextColor="#CFCED0"
       rejectResponderTermination={true}
       secureTextEntry={false}
       style={
@@ -104,6 +105,7 @@ exports[`[EditText] interactions Type: [column] renders without crashing 1`] = `
       editable={true}
       onBlur={[Function]}
       onFocus={[Function]}
+      placeholderTextColor="#CFCED0"
       rejectResponderTermination={true}
       secureTextEntry={false}
       style={
@@ -169,6 +171,7 @@ exports[`[EditText] interactions Type: [row] - default should render without cra
       editable={true}
       onBlur={[Function]}
       onFocus={[Function]}
+      placeholderTextColor="#CFCED0"
       rejectResponderTermination={true}
       secureTextEntry={false}
       style={
@@ -235,6 +238,7 @@ exports[`[EditText] interactions web renders without crashing 1`] = `
       editable={true}
       onBlur={[Function]}
       onFocus={[Function]}
+      placeholderTextColor="#CFCED0"
       rejectResponderTermination={true}
       secureTextEntry={false}
       style={

diff --git a/stories/dooboo-ui/Button.stories.tsx b/stories/dooboo-ui/Button.stories.tsx
@@ -1,145 +1,10 @@
-import 'react-native-get-random-values';
+import React, {ReactElement} from 'react';
 
-import {IC_FACEBOOK, IC_GOOGLE} from '../Icon';
-import {Image, View} from 'react-native';
-import React, {ReactElement, useState} from 'react';
-import {ThemeType, light} from '../../main/theme';
-
-import {Button} from '../../main';
+import ButtonDefault from './ButtonStories/ButtonDefaultStory';
 import {ContainerDeco} from '../../storybook/decorators';
 import {ThemeProvider} from '../../main/theme/ThemeProvider';
-import {action} from '@storybook/addon-actions';
+import {ThemeType} from '../../main/theme';
 import {storiesOf} from '@storybook/react-native';
-import styled from 'styled-components/native';
-import {text} from '@storybook/addon-knobs';
-
-const ScrollContainer = styled.ScrollView`
-  width: 100%;
-`;
-
-const Container = styled.View`
-  background-color: transparent;
-  align-items: center;
-  justify-content: center;
-  width: 100%;
-  margin-top: 20px;
-  margin-bottom: 20px;
-  flex-direction: column;
-`;
-
-function Default(): React.ReactElement {
-  const [facebookLoading, setFacebookLoading] = useState<boolean>(false);
-  const [googleLoading, setGoogleLoading] = useState<boolean>(false);
-
-  return (
-    <ScrollContainer>
-      <Container>
-        <Button
-          loading={false}
-          text="😀 😎 👍 💯"
-          onPress={action('Clicked')}
-          style={{marginVertical: 40}}
-          styles={{
-            container: {
-              borderRadius: 20,
-              borderWidth: 0.5,
-              backgroundColor: 'white',
-            },
-          }}
-        />
-        <Button
-          styles={{
-            container: {
-              borderRadius: 20,
-              paddingVertical: 11,
-              paddingHorizontal: 52,
-            },
-            text: {
-              fontSize: 16,
-            },
-          }}
-          onPress={action('Clicked')}
-          text={'Hovered button in web'}
-        />
-
-        <Button
-          style={{marginVertical: 40}}
-          styles={{
-            container: {
-              borderWidth: 0.5,
-            },
-          }}
-          onPress={action('Clicked')}
-          text={'Outlined button'}
-        />
-        <Button
-          disabled={true}
-          text={text('button text', 'this is disabled')}
-        />
-        <Button
-          leftElement={
-            <View style={{marginRight: 12}}>
-              <Image style={{width: 20, height: 20}} source={IC_GOOGLE} />
-            </View>
-          }
-          loading={googleLoading}
-          style={{marginBottom: 20, marginTop: 30}}
-          styles={{
-            container: {
-              height: 52,
-              width: 300,
-              borderWidth: 0.5,
-              borderColor: light.dialog,
-              borderRadius: 40,
-              backgroundColor: light.googleBackground,
-            },
-          }}
-          onPress={(): void => {
-            setGoogleLoading(true);
-
-            const timeout = setTimeout(() => {
-              setGoogleLoading(false);
-              clearTimeout(timeout);
-            }, 2000);
-          }}
-          text="GOOGLE SIGN IN"
-        />
-        <Button
-          testID="btnFacebook"
-          leftElement={
-            <View
-              style={{
-                position: 'absolute',
-                left: 24,
-              }}>
-              <Image style={{width: 15, height: 28}} source={IC_FACEBOOK} />
-            </View>
-          }
-          loading={facebookLoading}
-          styles={{
-            container: {
-              height: 52,
-              width: 300,
-              borderWidth: 0.5,
-              borderColor: light.dialog,
-              borderRadius: 40,
-              backgroundColor: light.secondary,
-            },
-          }}
-          onPress={(): void => {
-            setFacebookLoading(true);
-
-            const timeout = setTimeout(() => {
-              setFacebookLoading(false);
-              clearTimeout(timeout);
-            }, 2000);
-          }}
-          text="FACEBOOK SIGN IN"
-        />
-      </Container>
-    </ScrollContainer>
-  );
-}
 
 /**
  * Below are stories for web
@@ -148,7 +13,7 @@ export default {
   title: 'Button',
 };
 
-export const toStorybook = (): ReactElement => <Default />;
+export const toStorybook = (): ReactElement => <ButtonDefault />;
 
 toStorybook.story = {
   name: 'default',
@@ -161,11 +26,11 @@ storiesOf('Button', module)
   .addDecorator(ContainerDeco)
   .add('default', () => (
     <>
-      <Default />
+      <ButtonDefault />
     </>
   ))
   .add('with dark theme', () => (
     <ThemeProvider initialThemeType={ThemeType.DARK}>
-      <Default />
+      <ButtonDefault />
     </ThemeProvider>
   ));