From e9fac513e2d95e49bbece4ac893ca971966d760b Mon Sep 17 00:00:00 2001 From: yehuozhili <673632758@qq.com> Date: Sat, 4 Jul 2020 16:42:00 +0800 Subject: [PATCH] docs: update form page docs --- .storybook/preview.js | 2 + package.json | 2 +- src/components/Form/form.stories.mdx | 16 +++ src/components/Icon/icon.stories.mdx | 2 + src/components/Icon/icon.tsx | 6 +- src/hooks/useForm.stories.mdx | 15 +++ src/page/login.example.tsx | 105 +++++++++++++++++ src/page/login.stories.mdx | 123 ++++++++++++++++++++ src/page/register.example.tsx | 144 +++++++++++++++++++++++ src/page/register.stories.mdx | 164 +++++++++++++++++++++++++++ 10 files changed, 577 insertions(+), 2 deletions(-) create mode 100644 src/page/login.example.tsx create mode 100644 src/page/login.stories.mdx create mode 100644 src/page/register.example.tsx create mode 100644 src/page/register.stories.mdx diff --git a/.storybook/preview.js b/.storybook/preview.js index bfaba04..3329937 100644 --- 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 index 3366530..1deaa48 100644 --- 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 index 813b027..c61962f 100644 --- a/src/components/Form/form.stories.mdx +++ b/src/components/Form/form.stories.mdx @@ -18,6 +18,22 @@ Form组件就是个壳，需要结合useForm使用，useForm相比于传统封 +
+ +
+ + + + + ```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 index b6c9b89..b543b8c 100644 --- a/src/components/Icon/icon.stories.mdx +++ b/src/components/Icon/icon.stories.mdx @@ -105,6 +105,8 @@ library.add(faTimes); + + diff --git a/src/components/Icon/icon.tsx b/src/components/Icon/icon.tsx index 27df9f3..dad75c7 100644 --- 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 index 7f846ea..9a5a611 100644 --- a/src/hooks/useForm.stories.mdx +++ b/src/hooks/useForm.stories.mdx @@ -31,6 +31,21 @@ useForm有4个返回值： +
+ +
+ + + + ```jsx function FormExample(){ diff --git a/src/page/login.example.tsx b/src/page/login.example.tsx new file mode 100644 index 0000000..d1ba2e0 --- /dev/null +++ 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 ( + <> +
+ 用户登录 +
+ +
+
+ BIGBEAR-UI +
+ } + callback={(e) => callbackObj.username(e.target.value)} + onBlur={(e: React.FocusEvent) => { + blurObj.username(e.target.value); + }} + placeholder="用户名" + > +
+ {validate.username.map((v: string) => v)} +
+ } + type="password" + callback={(e) => callbackObj.password(e.target.value)} + onBlur={(e: React.FocusEvent) => { + blurObj.password(e.target.value); + }} + placeholder="密码" + > +
+ {validate.password.map((v: string, i: number) => ( +
{v}
+ ))} +
+ +
+ + +
+ + + ); +} +export default Login; diff --git a/src/page/login.stories.mdx b/src/page/login.stories.mdx new file mode 100644 index 0000000..218b273 --- /dev/null +++ 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'; + + + + +
+ +# Login Page 登录页 +
+ + +
+
+ +
+
+ + +```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 ( + <> +
+ 用户登录 +
+ +
+
+ BIGBEAR-UI +
+ } + callback={(e) => callbackObj.username(e.target.value)} + onBlur={(e: React.FocusEvent) => { + blurObj.username(e.target.value); + }} + placeholder="用户名" + > +
+ {validate.username.map((v: string) => v)} +
+ } + type="password" + callback={(e) => callbackObj.password(e.target.value)} + onBlur={(e: React.FocusEvent) => { + blurObj.password(e.target.value); + }} + placeholder="密码" + > +
+ {validate.password.map((v: string, i: number) => ( +
{v}
+ ))} +
+ +
+ + +
+ + + ); +} +export default Login; + + +``` \ No newline at end of file diff --git a/src/page/register.example.tsx b/src/page/register.example.tsx new file mode 100644 index 0000000..a126c02 --- /dev/null +++ b/src/page/register.example.tsx @@ -0,0 +1,144 @@ +import React, { useState } from "react"; +import { Form, Input, Button, message, Icon, useForm } from "../index"; +import { linkTo } from "@storybook/addon-links"; +function Register() { + const [state, setState] = useState(); + const [handleSubmit, callbackObj, validate, blurObj] = useForm([ + { + name: "username", + validate: [{ validate: (e) => e !== "", message: "用户名不能为空" }] + }, + { + name: "password", + validate: [ + { validate: (e) => e !== "", message: "密码不为空" }, + { + validate: (e) => { + setState(e); + return e.length > 2 && e.length < 7; + }, + message: "密码必须大于2位或者小于7位" + } + ] + }, + { + name: "confirmPassword", + validate: [ + { validate: (e) => e !== "", message: "确认密码不为空" }, + { + validate: (e) => e === state, + message: "确认密码与密码不一致" + } + ] + }, + { + name: "email", + validate: [ + { validate: (e) => e !== "", message: "邮箱不为空" }, + { + validate: (e) => + /^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/.exec(e) ? true : false, + message: "邮箱要满足邮箱格式" + } + ] + } + ]); + const onSubmit = (data: any) => { + if ( + validate.username.length === 0 && + validate.password.length === 0 && + data && + data.username && + data.password && + data.confirmPassword + ) { + console.log(data); + message.info("进入发送注册逻辑"); + } else { + message.danger("验证失败", {}); + } + }; + return ( + <> +
+ 用户注册 +
+
+ } + callback={(e) => callbackObj.username(e.target.value)} + onBlur={(e: React.FocusEvent) => { + blurObj.username(e.target.value); + }} + placeholder="用户名" + > +
+ {validate.username.map((v: string) => v)} +
+ } + type="password" + callback={(e) => callbackObj.password(e.target.value)} + onBlur={(e: React.FocusEvent) => { + blurObj.password(e.target.value); + }} + placeholder="密码" + > +
+ {validate.password.map((v: string, i: number) => ( +
{v}
+ ))} +
+ } + type="password" + callback={(e) => callbackObj.confirmPassword(e.target.value)} + onBlur={(e: React.FocusEvent) => { + blurObj.confirmPassword(e.target.value); + }} + placeholder="确认密码" + > +
+ {validate.confirmPassword.map((v: string, i: number) => ( +
{v}
+ ))} +
+ } + callback={(e) => callbackObj.email(e.target.value)} + onBlur={(e: React.FocusEvent) => { + blurObj.email(e.target.value); + }} + placeholder="邮箱" + > +
+ {validate.email.map((v: string, i) => ( +
{v}
+ ))} +
+
+ + +
+ + + ); +} +export default Register; diff --git a/src/page/register.stories.mdx b/src/page/register.stories.mdx new file mode 100644 index 0000000..8ccbe09 --- /dev/null +++ b/src/page/register.stories.mdx @@ -0,0 +1,164 @@ +import { Meta, Story, Props ,Preview } from '@storybook/addon-docs/blocks'; +import RegiterPage from './register.example'; + + + + +
+ +# Register Page 注册页 +
+ + + +
+
+ +
+
+ + + +```typescript +import React, { useState } from "react"; +import { Form, Input, Button, message, Icon, useForm } from "../index"; + +function Register() { + const [state, setState] = useState(); + const [handleSubmit, callbackObj, validate, blurObj] = useForm([ + { + name: "username", + validate: [{ validate: (e) => e !== "", message: "用户名不能为空" }] + }, + { + name: "password", + validate: [ + { validate: (e) => e !== "", message: "密码不为空" }, + { + validate: (e) => { + setState(e); + return e.length > 2 && e.length < 7; + }, + message: "密码必须大于2位或者小于7位" + } + ] + }, + { + name: "confirmPassword", + validate: [ + { validate: (e) => e !== "", message: "确认密码不为空" }, + { + validate: (e) => e === state, + message: "确认密码与密码不一致" + } + ] + }, + { + name: "email", + validate: [ + { validate: (e) => e !== "", message: "邮箱不为空" }, + { + validate: (e) => + /^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/.exec(e) ? true : false, + message: "邮箱要满足邮箱格式" + } + ] + } + ]); + const onSubmit = (data: any) => { + if ( + validate.username.length === 0 && + validate.password.length === 0 && + data && + data.username && + data.password && + data.confirmPassword + ) { + console.log(data); + message.info("进入发送注册逻辑"); + } else { + message.danger("验证失败", {}); + } + }; + return ( + <> +
+ 用户注册 +
+
+ } + callback={(e) => callbackObj.username(e.target.value)} + onBlur={(e: React.FocusEvent) => { + blurObj.username(e.target.value); + }} + placeholder="用户名" + > +
+ {validate.username.map((v: string) => v)} +
+ } + type="password" + callback={(e) => callbackObj.password(e.target.value)} + onBlur={(e: React.FocusEvent) => { + blurObj.password(e.target.value); + }} + placeholder="密码" + > +
+ {validate.password.map((v: string, i: number) => ( +
{v}
+ ))} +
+ } + type="password" + callback={(e) => callbackObj.confirmPassword(e.target.value)} + onBlur={(e: React.FocusEvent) => { + blurObj.confirmPassword(e.target.value); + }} + placeholder="确认密码" + > +
+ {validate.confirmPassword.map((v: string, i: number) => ( +
{v}
+ ))} +
+ } + callback={(e) => callbackObj.email(e.target.value)} + onBlur={(e: React.FocusEvent) => { + blurObj.email(e.target.value); + }} + placeholder="邮箱" + > +
+ {validate.email.map((v: string, i) => ( +
{v}
+ ))} +
+
+ + +
+ + + ); +} +export default Register; + +``` \ No newline at end of file