Add AutoComplete C. Story (hyochan#67)

* Add AutoComplete C. Story
  - add addon-ondevice-knobs D.

* Update Doc/AutoComplete/ Add Storybook in Readme

* Fix/AutoComplete/ lint error fixed

* Update/AutoComplete Storybook/ Wrapper Style

  - Add Wrapper Style change to Object from height number

package.json

@@ -41,15 +41,16 @@
     "@babel/preset-typescript": "^7.7.4",
     "@babel/runtime": "^7.7.4",
     "@dooboo/eslint-config": "^0.2.0",
-    "@storybook/addon-actions": "5.2.8",
-    "@storybook/addon-knobs": "5.2.8",
-    "@storybook/addon-links": "5.2.8",
-    "@storybook/addon-notes": "5.2.8",
-    "@storybook/addons": "5.2.8",
-    "@storybook/react-native": "5.2.8",
-    "@storybook/react-native-server": "5.2.8",
-    "@storybook/theming": "5.2.8",
-    "@testing-library/react-native": "^5.0.2",
+    "@storybook/addon-actions": "5.2.6",
+    "@storybook/addon-knobs": "5.2.6",
+    "@storybook/addon-links": "5.2.6",
+    "@storybook/addon-notes": "5.2.6",
+    "@storybook/addon-ondevice-knobs": "^5.2.8",
+    "@storybook/addons": "5.2.6",
+    "@storybook/react-native": "5.2.6",
+    "@storybook/react-native-server": "5.2.6",
+    "@storybook/theming": "5.2.6",
+    "@testing-library/react-native": "^5.0.1",
     "@types/jest": "^24.0.23",
     "@types/node": "^12.12.14",
     "@types/react": "^16.9.15",

src/components/shared/AutoComplete/README.md

@@ -25,3 +25,8 @@
 # Todo
 
 - fulfill the goals and requirements of each sub-components as written on [Issue #50](https://github.com/dooboolab/dooboo-ui-native/issues/50).
+
+# Storybook
+
+- in [\$PROJECT/App.js](https://github.com/marsinearth/dooboo-ui-native/blob/feat%2FautoComplete/App.js#L9), please enable storybook by `const STORYBOOK_START = true;` to see the AtutoComplete story.
+- You can change props value through kobs addon.

storybook/rn-addons.js

@@ -0,0 +1 @@
+import '@storybook/addon-ondevice-knobs/register';

storybook/stories/AutoComplete.stories.tsx

@@ -0,0 +1,33 @@
+import React, { useState } from 'react';
+import { number, object, text } from '@storybook/addon-knobs';
+
+import AutoComplete from '../../src/components/shared/AutoComplete';
+import { storiesOf } from '@storybook/react-native';
+import styled from 'styled-components/native';
+
+export const ContainerDeco = (storyFn): React.ReactElement => (
+  <Wrapper>{storyFn()}</Wrapper>
+);
+
+const Wrapper = styled.SafeAreaView`
+`;
+
+storiesOf('AutoComplete', module)
+  .addDecorator(ContainerDeco)
+  .add('default', () => (<Default />));
+
+function Default(): React.ReactElement {
+  const [value] = useState<string>();
+
+  return (
+    // if Wrapper Style height is 50?
+    <Wrapper style={object('wrapperStyle', { height: 300 }) }>
+      <AutoComplete
+        value={value}
+        style={object('inputStyle', { backgroundColor: '#f3f5f7' })}
+        debounceDelay={number('debounceDelay', 400)}
+        placeholderText={text('placeholder', 'Choose a country')}
+      />
+    </Wrapper>
+  );
+}

storybook/stories/index.js

@@ -4,3 +4,4 @@ import './Accordian.stories';
 import './ButtonGroup.stories';
 import './Button.stories';
 import './EditText.stories';
+import './AutoComplete.stories';