From 4154bf0da96ae0edd73634511233b9245e03f55e Mon Sep 17 00:00:00 2001 From: Drew Hoover Date: Mon, 30 Dec 2024 11:40:02 -0500 Subject: [PATCH] docs: update readme (#106) * update readme * remove lorem ipsum from storybook --- README.md | 84 +++++++------------------ src/stories/Configure.mdx | 125 +------------------------------------- 2 files changed, 24 insertions(+), 185 deletions(-) diff --git a/README.md b/README.md index 8901ed0..7e0f86b 100644 --- a/README.md +++ b/README.md @@ -3,21 +3,12 @@ # Ant Design Renderers for `jsonforms` [jsonforms](jsonforms.io) is "a declarative framework for efficiently building form-based web UIs." `jsonforms` has multiple renderer packages for different frameworks and component libraries, and this is one such package. - -## Storybook - -This package includes a storybook to help you see the different renderers in action. To run the storybook: - -```bash -$ pnpm storybook -``` - -To view the published storybook, visit [https://great-expectations.github.io/jsonforms-antd-renderers/](https://great-expectations.github.io/jsonforms-antd-renderers/) +You can preview the renderers via storybook [here](https://great-expectations.github.io/jsonforms-antd-renderers/). ## Getting started ```bash -$ npm install @great-expectations/jsonforms-antd-renderers +npm install @great-expectations/jsonforms-antd-renderers ``` ### Using AntD Renderers @@ -31,9 +22,10 @@ import { cellRegistryEntries, } from "@great-expectations/jsonforms-antd-renderers" -function MyForm() { +function MyForm({ data }: { data: Record }) { return ( = { type: "VerticalLayout", @@ -64,68 +62,28 @@ const uischema: UISchema = { { type: "Control", scope: "#/properties/password", - // properties like type: "password" here are unique to this renderer package. This allows you more declarative control over how your forms - // render. In this case, the password field will be rendered with AntD's password input component + // Properties like type: "password" here are unique to this renderer package. + // This allows you more declarative control over how your forms render. + // In this case, the password field will be rendered with AntD's password input component. options: { type: "password" }, }, ], } -function MyForm() { - return ( - - ) -} -``` - -### Form Validation & Submission - -Here's a somewhat minimal example showing how to validate & save a form on form submission - -```tsx -import { useCallback, useState } from "react" -import { Form, Button } from "antd" -import { JsonForms } from "@jsonforms/react" -import { - rendererRegistryEntries, - cellRegistryEntries, -} from "@great-expectations/jsonforms-antd-renderers" - function MyForm() { const [data, setData] = useState>({}) - const [form] = Form.useForm() - const onSubmit = useCallback(async () => { - const formValidationResult = await form - .validateFields() - .then((values: Record) => values) - .catch((errorInfo: { errorFields: unknown[] }) => errorInfo) - - if ("errorFields" in formValidationResult) { - return // nothing to do; validateFields will have already rendered error messages on form fields - } - // api call to save form data goes here, e.g. - await yourApiCall(data) - }, [form, data]) return ( -
+ myApiCall(data)}> setData(result.data as Record)} schema={schema} uischema={uischema} renderers={rendererRegistryEntries} - cells={cellRegistryEntries} /> - + ) @@ -160,8 +118,8 @@ function MyForm() { - We use [semantic release](https://github.com/semantic-release/semantic-release) to version & release our package, so make sure your commits adhere to the [conventional commit format](https://semantic-release.gitbook.io/semantic-release#commit-message-format) -### Testing package locally +### Testing the package locally -- Run pack: `pnpm pack` -- If you previously installed the package, you may need to remove it first: `yarn remove @great-expectations/jsonforms-antd-renderers` and clear cache: `yarn cache clean` -- Install the package in your project: `yarn add /path/to/jsonforms-antd-renderers-0.0.0-semantic-release.tgz` +- Create an installable tarball file from this directory: `pnpm pack` +- If you previously installed the package, you may need to remove it first: `npm uninstall @great-expectations/jsonforms-antd-renderers` and possibly clear your package manager's cache +- Install the package in your project: `npm install /path/to/jsonforms-antd-renderers-0.0.0-semantic-release.tgz` diff --git a/src/stories/Configure.mdx b/src/stories/Configure.mdx index eefbd55..5dd810e 100644 --- a/src/stories/Configure.mdx +++ b/src/stories/Configure.mdx @@ -22,131 +22,12 @@ export const RightArrow = () => (
- # Getting Started - - lorem ipsum - -
-
-
-

Add styling and CSS

-
+ # @great-expectations/jsonforms-antd-renderers + You can check out the different control and layout components in the sidebar to the left, + and note that the jsonschemas and uischemas are editable in case you'd like to experiment!
-
- # Do more with Storybook - - Now that you know the basics, let's explore other parts of Storybook that will improve your experience. This list is just to get you started. You can customise Storybook in many ways to fit your needs. - -
- -
-
-
-

Autodocs

-

Auto-generate living, - interactive reference documentation from your components and stories.

- Learn more -
-
-

Publish to Chromatic

-

Publish your Storybook to review and collaborate with your entire team.

- Learn more -
-
-

Figma Plugin

-

Embed your stories into Figma to cross-reference the design and live - implementation in one place.

- Learn more -
-
-

Testing

-

Use stories to test a component in all its variations, no matter how - complex.

- Learn more -
-
-

Accessibility

-

Automatically test your components for a11y issues as you develop.

- Learn more -
-
-

Theming

-

Theme Storybook's UI to personalize it to your project.

- Learn more -
-
-
-
-
-
-

Addons

-

Integrate your tools with Storybook to connect workflows.

- Discover all addons -
-
-
-
- -
-
- Join our contributors building the future of UI development. - - Star on GitHub -
-
-
- Get support and chat with frontend developers. - - Join Discord server -
-
-
-
- Watch tutorials, feature previews and interviews. - - Watch on YouTube -
-
-
-

Follow guided walkthroughs on for key workflows.

- - Discover tutorials -