feat: add examples

Author: foryuki

examples/.storybook/config.js

@@ -1,12 +1,12 @@
 import { configure } from '@storybook/react'
-import { withOptions } from '@storybook/addon-options'
+import { setOptions } from '@storybook/addon-options'
 
-withOptions({
+setOptions({
   name: 'One React',
   url: 'https://github.com/one-react/input',
   goFullScreen: false,
-  showAddonPanel: true,
-  addonPanelInRight: true,
+  showAddonPanel: false,
+  addonPanelInRight: false,
 })
 
 // automatically import all files ending with *.story.tsx

examples/stories/example.tsx

@@ -1,28 +1,69 @@
-import { Input } from 'or-input'
 import React, { PureComponent } from 'react'
 
+import Input from 'or-input'
+
 export default class Example extends PureComponent<{}, {}> {
   state = {
+    mail: '',
     name: '',
-    age: ''
+    keywords: '',
+    age: '',
+    zipcode: ''
   }
 
   render() {
     return (
-      <div>
-        <Input
-          placeholder="name"
-          value={this.state.name}
-          maxlength={12}
-          onChange={this.handleChange('name')}
-        />
-        <Input
-          numericInput={true}
-          placeholder="age"
-          value={this.state.age}
-          maxlength={12}
-          onChange={this.handleChange('age')}
-        />
+      <div className="example-wrapper">
+        <div className="default-input">
+          <h1>default input:</h1>
+          <Input
+            placeholder="mail"
+            value={this.state.mail}
+            onChange={this.handleChange('mail')}
+          />
+        </div>
+        <div className="">
+          <h1>input with maxlength：</h1>
+          <div className="input-with-label">
+            <div className="input-label">Name:</div>
+            <Input
+              placeholder="name maxlength 10"
+              value={this.state.name}
+              maxlength={10}
+              onChange={this.handleChange('name')}
+            />
+          </div>
+          <div className="input-with-label">
+            <div className="input-label">Keywords:</div>
+            <Input
+              placeholder="keywords maxlength 12"
+              value={this.state.keywords}
+              maxlength={12}
+              onChange={this.handleChange('keywords')}
+            />
+          </div>
+        </div>
+        <div className="">
+          <h1>numeric input:</h1>
+          <Input
+            numericInput={true}
+            placeholder="age"
+            value={this.state.age}
+            maxlength={3}
+            onChange={this.handleChange('age')}
+          />
+        </div>
+        <div className="">
+          <h1>input value can be cleared:</h1>
+          <Input
+            canClear={false}
+            numericInput={true}
+            placeholder="zipcode"
+            value={this.state.zipcode}
+            maxlength={8}
+            onChange={this.handleChange('zipcode')}
+          />
+        </div>
       </div>
     )
   }

examples/stories/index.story.tsx

@@ -4,14 +4,16 @@ import React from 'react'
 
 import { previewCode } from './util'
 
+import Input from 'or-input'
 import Example from './example'
 
 import './styles.scss'
 
-storiesOf('or-sample', module)
+storiesOf('or-input', module)
   .addDecorator(
     withInfo({
       inline: true,
+      propTables: [Input],
       propTablesExclude: [Example],
       styles: {
         jsxInfoContent: {
@@ -21,7 +23,7 @@ storiesOf('or-sample', module)
       }
     })
   )
-  .add('sample', () => <Example />, {
+  .add('example', () => <Example />, {
     info: {
       source: false,
       text: previewCode(require('!!raw-loader!./example.tsx'))

examples/stories/styles.scss

@@ -1,4 +1,27 @@
-.or-btn {
-  margin-left: 20px;
-  margin-bottom: 20px;
+.example-wrapper {
+  h1 {
+    margin-top: 50px;
+  }
+
+  .default-input {
+    .or-input {
+      width: 160px;
+    }
+  }
+
+  .input-with-label {
+    display: flex;
+    align-items: center;
+    width: 280px;
+    margin-bottom: 20px;
+
+    .input-label {
+      flex: 1;
+    }
+
+    .or-input {
+      width: 200px;
+    }
+  }
 }
+

src/Input.tsx

@@ -3,26 +3,41 @@ import React, { PureComponent } from 'react'
 
 interface Props {
   /**
-   * additional classname for input
+   * additional classname
    */
   classname?: string
 
-  type?: 'text' | 'number'
-
+  /**
+   * whether the input box can only enter numbers
+   * @default false
+   */
   numericInput?: boolean
 
+  /**
+   * placeholder for input box
+   */
   placeholder?: string
 
+  /**
+   * value of the input box
+   */
   value: string
 
+  /**
+   * maxlength of the input box
+   */
   maxlength?: number
 
-  withClearIcon?: boolean
+  /**
+   * whether the value of the input box can be cleared by clicking the clear icon
+   * @default true
+   */
+  canClear?: boolean
 
   /**
    * callback triggered input's onchange event
    **/
-  onChange?: (value) => void
+  onChange: (value) => void
 }
 
 export class Input extends PureComponent<Props, {}> {
@@ -32,7 +47,7 @@ export class Input extends PureComponent<Props, {}> {
       placeholder,
       value,
       maxlength,
-      withClearIcon = true
+      canClear = true
     } = this.props
     const inputClass = clx(classname, 'or-input')
 
@@ -44,7 +59,7 @@ export class Input extends PureComponent<Props, {}> {
           maxLength={maxlength}
           onChange={this.handleChange}
         />
-        {withClearIcon && (
+        {canClear && (
           <div className="or-clear-icon" onClick={this.handleClear} />
         )}
       </div>

src/index.ts

@@ -1,2 +1,2 @@
 import './styles.scss'
-export { Input } from './Input'
+export { Input as default } from './Input'

src/styles.scss

@@ -5,11 +5,13 @@
   display: inline-block;
 
   input{
+    width: 100%;
     outline: none;
     line-height: 38px;
     height: 38px;
-    padding: 0 5px;
+    padding: 0 30px 0 5px;
     font-size: 14px;
+    box-sizing: border-box;
   }
 
   input::-webkit-outer-spin-button,