From 904ee3b834ae7deafd5c565a5cf8a0058ce60b58 Mon Sep 17 00:00:00 2001 From: Jane Chu <7559015+janechu@users.noreply.github.com> Date: Tue, 24 May 2022 09:17:07 -0700 Subject: [PATCH] Updated documentation for the Form and MessageSystem (#217) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit # Pull Request ## 📖 Description This change updates the documentation for the `Form` react component and the `MessageSystem` as well as adding supporting documentation for the data formats used by the `MessageSystem`. ## 👩💻 Reviewer Notes A few stylistic tweaks had to be made for the content to sit on the page correctly, these will be applied to the FAST CLI as well to maintain consistency. ## ✅ Checklist ### General - [ ] I have added tests for my changes. - [ ] I have tested my changes. - [x] I have updated the project documentation to reflect my changes. --- website/build/docs.js | 2 +- .../fast-tooling-react/2.x/components/form.md | 65 ++++++++++++++++- .../0.x/message-system/data-format.md | 49 ++++++++++++- .../0.x/message-system/introduction.md | 71 ++++++++++++++++++- website/docs/introduction.md | 6 +- website/docs/sidebar.js | 5 -- website/src/index.html | 7 +- website/src/templates/style/index.html | 14 +++- 8 files changed, 201 insertions(+), 18 deletions(-) diff --git a/website/build/docs.js b/website/build/docs.js index c0101ea..c0a5da0 100644 --- a/website/build/docs.js +++ b/website/build/docs.js @@ -225,7 +225,7 @@ function convertMarkdownDocumentation(category, template, isVersionDoc) { html: templateResolver(template)({ htmlWebpackPlugin: { options: { - content: templateResolver( + index: templateResolver( fs.readFileSync(categoryTemplate, "utf8") )({ items, diff --git a/website/docs/fast-tooling-react/2.x/components/form.md b/website/docs/fast-tooling-react/2.x/components/form.md index 7a58904..00feca9 100644 --- a/website/docs/fast-tooling-react/2.x/components/form.md +++ b/website/docs/fast-tooling-react/2.x/components/form.md @@ -1,2 +1,65 @@ # Form -TBD \ No newline at end of file + +The `Form` is a React component that generates fields based on the JSON Schema, so if a JSON Schema specifies a "type" of "string", a text input will appear. + +The component is pluggable and stylable, so if there is a requirement to replace any fields or change the styling to match the rest of your application, this is easy to do. + +## Usage + +The basic usage only requires the passing of the `MessageSystem`. The component will then register itself and begin sending and recieving data. + +```tsx +import { Form } from "@microsoft/fast-tooling-react"; + +
+``` + +### Modular Usage + +There are two exports for the `Form`, the default `Form` and `ModularForm`. The `ModularForm` is for use with any React component that may share a dependency on `react-dnd` such as the `Navigation` component, or the `Viewer`. It's safe to assume that if you are using more than one React component from the `@microsoft/fast-tooling-react` package you must use the `ModularForm`. + +```tsx +import { DndProvider } from "react-dnd"; +import HTML5Backend from "react-dnd-html5-backend"; +import { ModularForm } from "@microsoft/fast-tooling-react"; + +