New docs (#57)

* more cases

* fix test

* use dumi

* docs

* typo

* finish docs build

* update CI config

* restore ci config

* adjust Node.js version for npm

Author: nighca

.github/workflows/ci.yml

@@ -17,7 +17,7 @@ jobs:
 
     strategy:
       matrix:
-        node-version: [12.x, 14.x, 16.x]
+        node-version: [16.x]
 
     steps:
     - uses: actions/checkout@v1

.github/workflows/doc.yml

@@ -15,11 +15,11 @@ jobs:
     - name: Use Node.js
       uses: actions/setup-node@v1
       with:
-        node-version: 12.x
+        node-version: 16.x
     - name: Generate and deploy document
       uses: JamesIves/[email protected]
       env:
         BRANCH: gh-pages
-        FOLDER: docs
+        FOLDER: dumi/dist
         BUILD_SCRIPT: npm ci && npm run build:doc
         ACCESS_TOKEN: ${{ secrets.ACCESS_TOKEN }}

.gitignore

@@ -1,6 +1,6 @@
 node_modules
-lib
-esm
-coverage
-docs
+/lib
+/esm
+/coverage
+.umi
 .vscode

.npmignore

@@ -1,3 +1,3 @@
-docs
+dumi
 jest.config.js
 tsconfig.json

dumi/.gitignore

@@ -0,0 +1,2 @@
+/src
+/dist

dumi/.umirc.ts

@@ -0,0 +1,31 @@
+import path from 'path'
+import { defineConfig } from 'dumi'
+
+const repo = 'formstate-x'
+
+export default defineConfig({
+  title: repo,
+  favicon:
+    'https://user-images.githubusercontent.com/9554297/83762004-a0761b00-a6a9-11ea-83b4-9c8ff721d4b8.png',
+  logo:
+    'https://user-images.githubusercontent.com/9554297/83762004-a0761b00-a6a9-11ea-83b4-9c8ff721d4b8.png',
+  outputPath: `dist/${repo}`,
+  mode: 'site',
+  hash: true,
+  // Because of using GitHub Pages
+  base: `/${repo}/`,
+  publicPath: `/${repo}/`,
+  navs: [
+    null,
+    {
+      title: 'GitHub',
+      path: 'https://github.com/qiniu/formstate-x',
+    },
+  ],
+  alias: {
+    'formstate-x': path.join(__dirname, 'src'),
+    'formstate-x/bindings/react': path.join(__dirname, 'src/bindings/react')
+  },
+  mfsu: {}
+  // more config: https://d.umijs.org/config
+})

dumi/docs/concepts/state/index.md

@@ -0,0 +1,7 @@
+---
+title: State
+order: 1
+toc: menu
+---
+
+TODO

dumi/docs/concepts/validator/index.md

@@ -0,0 +1,7 @@
+---
+title: Validator
+order: 2
+toc: menu
+---
+
+TODO

dumi/docs/guide/advanced/full-name-input/FullNameInput.tsx

@@ -0,0 +1,41 @@
+import React from 'react'
+import { observer } from 'mobx-react'
+import { FieldState, FormState, ProxyState } from 'formstate-x'
+import { TextField, Grid } from '@mui/material'
+import { bindTextField } from '../../../mui-binding'
+
+export function createState() {
+  const state = new FormState({
+    first: new FieldState('').validators(required),
+    last: new FieldState('').validators(required)
+  })
+  return new ProxyState(
+    state,
+    ({ first, last }) => `${first} ${last}`,
+    fullName => {
+      const [first, last] = fullName.split(' ')
+      return { first, last }
+    }
+  )
+}
+
+interface Props {
+  state: ReturnType<typeof createState>
+}
+
+export default observer(function FullNameInput({ state }: Props) {
+  return (
+    <Grid container spacing={2}>
+      <Grid item xs={12} sm={6}>
+        <TextField label="First Name" margin="normal" {...bindTextField(state.$.$.first)} />
+      </Grid>
+      <Grid item xs={12} sm={6}>
+        <TextField label="Last Name" margin="normal" {...bindTextField(state.$.$.last)} />
+      </Grid>
+    </Grid>
+  )
+})
+
+function required(v: string) {
+  if (!v) return 'Please input!'
+}

dumi/docs/guide/advanced/full-name-input/index.tsx

@@ -0,0 +1,44 @@
+import React, { FormEvent } from 'react'
+import { observer } from 'mobx-react'
+import { FieldState, FormState } from 'formstate-x'
+import { Button, TextField, Container } from '@mui/material'
+
+import { bindTextField } from '../../../mui-binding'
+import FullNameInput, { createState as createFullNameState } from './FullNameInput'
+
+const form = new FormState({
+  name: createFullNameState(),
+  email: new FieldState('').validators(validateEmail)
+})
+
+export default observer(function Demo() {
+
+  async function handleSubmit(e: FormEvent<HTMLFormElement>) {
+    e.preventDefault()
+    // trigger validation when user want to submit
+    const result = await form.validate()
+    // if error, do nothing (or maybe show a toast?)
+    if (result.hasError) return
+    // if no error, wo do next things, such as sending HTTP request
+    console.log('Submit with:', result.value)
+  }
+
+  return (
+    <Container component="form" noValidate onSubmit={handleSubmit} maxWidth="xs">
+      <FullNameInput state={form.$.name} />
+      <TextField
+        label="Email Address"
+        margin="normal"
+        fullWidth
+        {...bindTextField(form.$.email)}
+      />
+      <Button type="submit" fullWidth variant="contained" sx={{ mt: 3 }}>
+        Submit
+      </Button>
+    </Container>
+  )
+})
+
+function validateEmail(v: string) {
+  if (!v) return 'Please input your email!'
+}