docs: update form page docs

yehuozhili · Jul 4, 2020 · e9fac51 · e9fac51
1 parent a941327
commit e9fac51
Show file tree

Hide file tree

Showing 10 changed files with 577 additions and 2 deletions.
diff --git a/.storybook/preview.js b/.storybook/preview.js
@@ -55,6 +55,8 @@ const loaderFn = () => {
 		require("../src/components/Popconfirm/popconfirm.stories.mdx"),
 		require("../src/components/Message/message.stories.mdx"),
 		require("../src/components/I18n/i18n.stories.mdx"),
+		require("../src/page/login.stories.mdx"),
+		require("../src/page/register.stories.mdx"),
 		require("../src/components/Transition/transition.stories.mdx"),
 		require("../src/hooks/useForm.stories.mdx"),
 		require("../src/hooks/useClickOutside.stories.mdx"),

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "bigbear-ui",
-  "version": "0.2.7-1",
+  "version": "0.2.7",
   "description": "Neumorphic component library for React;基于React制作的拟物风格组件库",
   "keywords": [
     "component",

diff --git a/src/components/Form/form.stories.mdx b/src/components/Form/form.stories.mdx
@@ -18,6 +18,22 @@ Form组件就是个壳，需要结合useForm使用，useForm相比于传统封
 
 <Button onClick={linkTo('HOOKS|useForm 表单验证器', 'FormExample')}>跳转至useForm</Button>
 
+<br/>
+
+<br/>
+
+<Button	
+    onClick={linkTo("PAGE | Login Page 登录页", "default")}
+>
+Login example
+</Button>
+
+<Button	
+    onClick={linkTo("PAGE | Register Page 注册页", "default")}
+>
+Register example
+</Button>
+
 ```jsx
 function FormExample(){
     const [handleSubmit,callbackObj,validate,blurObj]=useForm([ 

diff --git a/src/components/Icon/icon.stories.mdx b/src/components/Icon/icon.stories.mdx
@@ -105,6 +105,8 @@ library.add(faTimes);
 <Icon icon='filter' ></Icon>
 <Icon icon='image' ></Icon>
 <Icon icon='file-alt' ></Icon>
+<Icon icon='lock' ></Icon>
+<Icon icon='envelope' ></Icon>
         </div>
   </Story>
 </Preview>

diff --git a/src/components/Icon/icon.tsx b/src/components/Icon/icon.tsx
@@ -32,6 +32,8 @@ import { faAtom } from "@fortawesome/free-solid-svg-icons/faAtom";
 import { faFilter } from "@fortawesome/free-solid-svg-icons/faFilter";
 import { faFileAlt } from "@fortawesome/free-solid-svg-icons/faFileAlt";
 import { faImage } from "@fortawesome/free-solid-svg-icons/faImage";
+import { faLock } from "@fortawesome/free-solid-svg-icons/faLock";
+import { faEnvelope } from "@fortawesome/free-solid-svg-icons/faEnvelope";
 
 library.add(
 	faCoffee,
@@ -63,7 +65,9 @@ library.add(
 	faAtom,
 	faFilter,
 	faFileAlt,
-	faImage
+	faImage,
+	faLock,
+	faEnvelope
 );
 
 export type ThemeProps =

diff --git a/src/hooks/useForm.stories.mdx b/src/hooks/useForm.stories.mdx
@@ -31,6 +31,21 @@ useForm有4个返回值：
 
 <Button onClick={linkTo('ENTRY|Form 表单', 'formexample')}>跳转至Form</Button>
 
+<br/>
+
+<br/>
+
+<Button	
+    onClick={linkTo("PAGE | Login Page 登录页", "default")}
+>
+Login example
+</Button>
+
+<Button	
+    onClick={linkTo("PAGE | Register Page 注册页", "default")}
+>
+Register example
+</Button>
 
 ```jsx
 function FormExample(){

diff --git a/src/page/login.example.tsx b/src/page/login.example.tsx
@@ -0,0 +1,105 @@
+import React from "react";
+import { Form, Input, Button, message, Icon, useForm } from "../index";
+import { linkTo } from "@storybook/addon-links";
+
+function Login() {
+	const [handleSubmit, callbackObj, validate, blurObj] = useForm([
+		{
+			name: "username",
+			validate: [{ validate: (e) => e !== "", message: "用户名不能为空" }]
+		},
+		{
+			name: "password",
+			validate: [
+				{ validate: (e) => e !== "", message: "密码不为空" },
+				{
+					validate: (e) => e.length > 2 && e.length < 7,
+					message: "密码必须大于2位或者小于7位"
+				}
+			]
+		}
+	]);
+	const onSubmit = (data: any) => {
+		if (
+			validate.username.length === 0 &&
+			validate.password.length === 0 &&
+			data &&
+			data.username &&
+			data.password
+		) {
+			console.log(data);
+			message.info("进入提交流程");
+		} else {
+			message.danger("验证失败", {});
+		}
+	};
+	return (
+		<>
+			<div
+				className="bigbear-layout-block-default"
+				style={{ textAlign: "center", fontWeight: 700, padding: "20px" }}
+			>
+				用户登录
+			</div>
+
+			<Form className="login-form bigbear-form">
+				<div
+					style={{
+						textAlign: "center",
+						padding: "20px",
+						marginBottom: "20px",
+						fontWeight: 700,
+						fontSize: "20px"
+					}}
+				>
+					BIGBEAR-UI
+				</div>
+				<Input
+					prepend={<Icon icon="user"></Icon>}
+					callback={(e) => callbackObj.username(e.target.value)}
+					onBlur={(e: React.FocusEvent<HTMLInputElement>) => {
+						blurObj.username(e.target.value);
+					}}
+					placeholder="用户名"
+				></Input>
+				<div className="bigbear-form-validate">
+					{validate.username.map((v: string) => v)}
+				</div>
+				<Input
+					prepend={<Icon icon="lock"></Icon>}
+					type="password"
+					callback={(e) => callbackObj.password(e.target.value)}
+					onBlur={(e: React.FocusEvent<HTMLInputElement>) => {
+						blurObj.password(e.target.value);
+					}}
+					placeholder="密码"
+				></Input>
+				<div className="bigbear-form-validate">
+					{validate.password.map((v: string, i: number) => (
+						<div key={i}>{v}</div>
+					))}
+				</div>
+
+				<div>
+					<Button
+						style={{ width: "100%", marginBottom: "20px" }}
+						btnType="info"
+						onClick={() => {
+							handleSubmit(onSubmit);
+						}}
+					>
+						提交
+					</Button>
+					<Button
+						style={{ width: "100%" }}
+						btnType="success"
+						onClick={linkTo("PAGE | Register Page 注册页", "default")}
+					>
+						马上注册
+					</Button>
+				</div>
+			</Form>
+		</>
+	);
+}
+export default Login;
diff --git a/src/page/login.stories.mdx b/src/page/login.stories.mdx
@@ -0,0 +1,123 @@
+import { Meta, Story, Props ,Preview } from '@storybook/addon-docs/blocks';
+import LoginPage from './login.example';
+
+
+<Meta title='PAGE | Login Page 登录页'  />
+
+<br/>
+
+# Login Page 登录页
+<br/>
+
+<Story name='default' >
+    <div style={{display:'flex',justifyContent:'center'}}>
+        <div style={{width:'320px'}} >
+            <LoginPage></LoginPage>
+        </div>
+    </div>
+</Story>
+
+```typescript
+import React from "react";
+import { Form, Input, Button, message, Icon, useForm } from "../index";
+
+function Login() {
+	const [handleSubmit, callbackObj, validate, blurObj] = useForm([
+		{
+			name: "username",
+			validate: [{ validate: (e) => e !== "", message: "用户名不能为空" }]
+		},
+		{
+			name: "password",
+			validate: [
+				{ validate: (e) => e !== "", message: "密码不为空" },
+				{
+					validate: (e) => e.length > 2 && e.length < 7,
+					message: "密码必须大于2位或者小于7位"
+				}
+			]
+		}
+	]);
+	const onSubmit = (data: any) => {
+		if (
+			validate.username.length === 0 &&
+			validate.password.length === 0 &&
+			data &&
+			data.username &&
+			data.password
+		) {
+			console.log(data);
+			message.info("进入提交流程");
+		} else {
+			message.danger("验证失败", {});
+		}
+	};
+	return (
+		<>
+			<div
+				className="bigbear-layout-block-default"
+				style={{ textAlign: "center", fontWeight: 700, padding: "20px" }}
+			>
+				用户登录
+			</div>
+
+			<Form className="login-form bigbear-form">
+				<div
+					style={{
+						textAlign: "center",
+						padding: "20px",
+						marginBottom: "20px",
+						fontWeight: 700,
+						fontSize: "20px"
+					}}
+				>
+					BIGBEAR-UI
+				</div>
+				<Input
+					prepend={<Icon icon="user"></Icon>}
+					callback={(e) => callbackObj.username(e.target.value)}
+					onBlur={(e: React.FocusEvent<HTMLInputElement>) => {
+						blurObj.username(e.target.value);
+					}}
+					placeholder="用户名"
+				></Input>
+				<div className="bigbear-form-validate">
+					{validate.username.map((v: string) => v)}
+				</div>
+				<Input
+					prepend={<Icon icon="lock"></Icon>}
+					type="password"
+					callback={(e) => callbackObj.password(e.target.value)}
+					onBlur={(e: React.FocusEvent<HTMLInputElement>) => {
+						blurObj.password(e.target.value);
+					}}
+					placeholder="密码"
+				></Input>
+				<div className="bigbear-form-validate">
+					{validate.password.map((v: string, i: number) => (
+						<div key={i}>{v}</div>
+					))}
+				</div>
+
+				<div>
+					<Button
+						style={{ width: "100%", marginBottom: "20px" }}
+						btnType="info"
+						onClick={() => {
+							handleSubmit(onSubmit);
+						}}
+					>
+						提交
+					</Button>
+					<Button style={{ width: "100%" }} btnType="success">
+						马上注册
+					</Button>
+				</div>
+			</Form>
+		</>
+	);
+}
+export default Login;
+
+
+```