Enable antd (ant-design) support by delyanr · Pull Request #1561 · rjsf-team/react-jsonschema-form

delyanr · 2019-12-29T13:27:57Z

Reasons for making this change

Implement antd (ant-design) theme, fields and widgets as separate sub-package. Usage is as simple as importing the Form component from the package.

Pending to-dos:

Add README.md file.
Enable playground. Deps: Combine all themes into a single playground #1539
Remove withTheme HOC. Deps: add forwardRef to withTheme #1498
Publish package to npm repository

Regarding the last to-do, could you let me know what needs to be done to publish the package (I've never used lerna before)?

Checklist

I'm updating documentation
- I've checked the rendering of the Markdown text I've added
I'm adding or updating code
- I've added and/or updated tests
- I've updated docs if needed
I'm adding a new feature
- I've updated the playground with an example use of the feature

delyanr · 2020-01-08T10:52:09Z

Hi. I've added a README.md file. I believe this can already be merged without the playground and especially without the withTheme dependencies, so people can start testing it. Once these dependent pull requests are merged, I can update my code as well. @epicfaace, let me know what you think?

epicfaace

Thanks! This will be a great addition to the library.

I'm going to focus on getting the playground (#1539) done before merging additional themes, so it will be easier to test and preview what's going on.

epicfaace · 2020-01-11T19:38:10Z

packages/antd/package.json

+    "less-loader": "^5.0.0",
+    "react": "^16.8.6",
+    "react-dom": "^16.8.6",
+    "react-jsonschema-form": "^2.0.0-alpha.1",


I think you can move some of these (react, react-dom, react-jsonschema-form) to devDependencies.

epicfaace · 2020-01-11T19:38:30Z

packages/antd/package.json

@@ -0,0 +1,79 @@
+{
+  "name": "@react-jsonschema-form/antd",


Suggested change

"name": "@react-jsonschema-form/antd",

"name": "@rjsf/antd",

This is the name under which the package will be published. Can you rename to the above? Once this PR is merged, I can publish it under the rjsf npm organization.

Also please replace other occurrences in the readme.

Just to double-check, will the core package remain react-jsonschema-form, or will that also migrate to the rjsf npm organization?

I'm leaning more towards keeping it called react-jsonschema-form. It would be easier to upgrade that way; and that way, if someone installs the @latest version of it, they won't get the v2.0.0-alpha.1 alpha version.

Hey, just to let you know, I've updated this -- changed the name back to @rjsf/core for the core package -- it seemed best to keep all rjsf packages under the @rjsf organization to maintain a clear separation between org-owned packages and other community packages. We can still keep this called @rjsf/antd though.

epicfaace · 2020-01-11T19:39:32Z

packages/antd/README.md

+
+### Prerequisites
+
+- `antd == 3` (not tested yet with version 4)


Do you envision having to make a separate theme to support antd 4, or can one theme support both?

Unfortunately, antd 4 introduced breaking changes related to the Form component. I haven't looked into the details yet, but I think we need to fix a period of time where we support two themes, and then slowly deprecate antd 3.

epicfaace · 2020-01-11T19:39:42Z

packages/antd/README.md

+- `react-jsonschema-form >= 1.6.0`
+
+```sh
+npm install antd @react-jsonschema-form/core


Suggested change

npm install antd @react-jsonschema-form/core

npm install antd react-jsonschema-form

jeremypeters · 2020-02-13T11:36:46Z

Hi. I'm using Ant Design and would like to use react-jsonschema-form. I need to settle on an approach very shortly, and I was just wondering if there is a rough ETA for this merge?

delyanr · 2020-03-01T13:48:31Z

@jeremypeters Just saw that the dependencies from OP are now merged. So I will have a look and finalise this pull request in the next week or so. I'm very busy at the moment, unfortunately, but will get to it.

jeremypeters · 2020-03-01T19:09:55Z

Thanks @delyanr . No worries at all - totally understand. I'll just use the Ant Design CSS for the time-being 👍

delyanr · 2020-03-10T14:21:43Z

@epicfaace Almost at the finish line now with this pull request. Seems like the checks are failing because the @rjsf/antd must be published first; otherwise the playground cannot find the dependency. Is that something you can do?

Finally, I spent a decent amount of time getting the antd styles to work in the playground but failed miserably. Any help to get that one, so we can finally merge would be greatly appreciated. Any ideas why that might not be working correctly? Thanks!

erikhofer · 2020-04-14T10:01:04Z

Hey! Any update on this? :)

wenerme · 2020-04-15T10:53:36Z

Base on previous work, I created a workable antd 4.0 with 2.0.0 rjsf, storybook here https://apis.wener.me/storybook/?path=/story/rjsf-demo--playground ,not pub to npm yet, consider to make a pr, but for now, anyone want to use antd, just copy and paste https://github.com/wenerme/apis/tree/master/packages/ui/stories/rjsf/antd. then, everything should just works!

delyanr · 2020-04-15T12:20:59Z

@erikhofer I'm going through an internal update to v4 this week, so will have a look at this during the weekend to try and finalise it (and maybe split into v3 and v4 versions). In the meantime, what @wenerme pointed to should work. Thanks

wenerme · 2020-04-15T15:02:56Z

Current antd rjsf is followed the bootstrap style, but should not follow every style, antd's component can be more expressive,like the title and description, reorder should also support dnd, can support more input widgets.

epicfaace · 2020-04-16T22:23:27Z

@delyanr thanks for your help! Now that we have the infrastructure for tests / etc. for material-ui ready, we should be able to merge this in soon.

Could you add some simple snapshot tests such as the ones in material-ui (https://github.com/rjsf-team/react-jsonschema-form/tree/master/packages/material-ui/test)?

delyanr · 2020-04-30T20:11:46Z

@epicfaace In the interest of getting this merged ASAP, I implemented the alternative date pickers, even though I'm still not sure why we need them. I've also fixed the popups for the native pickers not aligning with the fields. I believe we should be merging this now, thanks.

cdussud · 2020-06-01T21:43:21Z

packages/antd/src/widgets/SelectWidget/index.js

+        <Select.Option
+          disabled={enumDisabled && enumDisabled.indexOf(value) !== -1}
+          key={String(optionValue)}
+          value={String(optionValue)}


shouldn't this just be value={optionValue}? OptionValue can be a number

I did this a while ago now, but I remember I had some issues with boolean values. Playing around with the latest Antd version, I see that they work well, but are not part of the typescript props, so prefer to still pass through strings to be honest.

cdussud · 2020-06-01T21:43:59Z

packages/antd/src/widgets/SelectWidget/index.js

+      getPopupContainer={getPopupContainer}
+      id={id}
+      mode={typeof multiple !== 'undefined' ? 'multiple' : undefined}
+      name={id}


I don't think name is one of the Antd Select props -- any reason this is here?

There have been issues raised around the name attribute for the Select component, e.g. ant-design/ant-design#12612. Generally agree that this should be part of the Select component. However, for the purposes of RJSF we don't need it, so happy to remove. Any reason we should not leave it though?

epicfaace

This looks really good -- thanks for your work on this. Can you address the license issue -- and then we can merge?

Some things which we should fix (but need not block this merge):

When I update the value of altdatewidget / alttimewidget, it doesn't call onChange properly -- the formData isn't updating on the playground.
When I change the name of the key in additionalProperties and focus out, the key name changes, but then the textbox for the key becomes blank (when it should actually still have the same value as before).
It would be nice to (later) convert this source to typescript and use tsdx instead of webpack for building, so we have some kind of unified build process for all themes (the hope is that we can do this with @rjsf/core eventually, too).
If someone has already imported the antd css in their project, is there a way to still use @rjsf/antd without causing duplicate imports (as it stands, I believe we will end up having this css duplicated)?

packages/antd/package.json

delyanr · 2020-06-14T18:47:19Z

This looks really good -- thanks for your work on this. Can you address the license issue -- and then we can merge?

Some things which we should fix (but need not block this merge):

When I update the value of altdatewidget / alttimewidget, it doesn't call onChange properly -- the formData isn't updating on the playground.

When I change the name of the key in additionalProperties and focus out, the key name changes, but then the textbox for the key becomes blank (when it should actually still have the same value as before).

It would be nice to (later) convert this source to typescript and use tsdx instead of webpack for building, so we have some kind of unified build process for all themes (the hope is that we can do this with @rjsf/core eventually, too).

If someone has already imported the antd css in their project, is there a way to still use @rjsf/antd without causing duplicate imports (as it stands, I believe we will end up having this css duplicated)?

I've fixed the first two points. Not sure I have the time to address the other two at this time, sorry. Once this is merged, others are free to contribute, etc. Thanks

epicfaace · 2020-06-14T18:58:21Z

packages/antd/src/widgets/SelectWidget/index.js


  const { enumOptions, enumDisabled } = options;

-  const emptyValue = multiple ? [] : '';


Why remove this? I think this is required for multiple select support?

I thought so too, but seems like Ant Design component handles it just fine. Having the emptyValue however breaks the placeholder, so that's a bug there, and hence why I removed it. You can try it in the playground.

epicfaace · 2020-06-14T23:30:30Z

For some reason the deploy preview (https://deploy-preview-1561--rjsf.netlify.app/) is not working. Looking into it...

epicfaace

@delyanr can you explain what antd-dayjs-webpack-plugin is for and why it's a peer dependency? If someone uses another non-webpack build system, they won't need it, right?

epicfaace · 2020-06-22T21:55:12Z

@delyanr is there an alternative way that lets us not include the index.less file? This is because index.less already includes the default antd theme -- how would a user use a custom theme in this case? Is there an easy way to do this when the less file is already included?

Additionally, adding index.less seems to make the entire playground automatically have the antd style applied to it:

versus regular playground:

epicfaace · 2020-06-22T22:28:43Z

Looks like we may need to do this for the above problem: https://ant.design/docs/react/customize-theme#How-to-avoid-modifying-global-styles -- or maybe we could try lazy-loading antd into the playground iframe somehow

* Enable antd (ant-design) support * Change name of package in local package.json for consistency * Add local readme file * Tidy the package dependencies * Change README.md references to rjsf npm organisation * Update package.json an dimports to reflect the new rjsf organization * Deprecate antd custom withTheme as core now has forwardRef * Ensure Theme is not default export for consistency * Add scripts for building dist and lib in package.json * Fix test to use non-default import * Add babel-plugin-import to ensure styles are imported on demand * Add rjsf-antd theme to the playground * Migrate rjsf-antd code to antd v4 support * Implement EmailWidget and URLWidget for rjsf-antd * Reimplement rjsf-antd tests based on latest * Enable rjsf-antd support in the playground * Finalise rjsf-antd packages files * Remove useless build:lib script * Enable support for additionalProperties schemas * Update the test snapshots * Fix minor styling issues with descriptions * Ensure popups are rendered next to fields (even when used with iframes) * Implement AltDate/AltDateTimeWidgets for antd theme * update package-lock * Fix SelectWidget placeholder never being shown * Fix issue with the alternative date pickers * Fix issue with additionalProperties blanking out * Change license for consistency * Add semicolon * build cjs, es, and umd * antd - switch to new build process, fix global styles Co-authored-by: Ashwin Ramaswami <aramaswamis@gmail.com>

- Ensure the root field is always wrapped in Form.Item The original ternary expression has existed since the antd theme was added in rjsf-team#1561. I am not familiar enough with antd to know what, if any, undesirable effects this change could cause.

delyanr added 3 commits December 29, 2019 13:20

Enable antd (ant-design) support

7798592

Change name of package in local package.json for consistency

b03bf8d

Add local readme file

da11880

epicfaace approved these changes Jan 11, 2020

View reviewed changes

delyanr added 2 commits January 13, 2020 17:21

Tidy the package dependencies

35f73ef

Change README.md references to rjsf npm organisation

b6c4101

delyanr added 8 commits March 10, 2020 10:09

Merge branch 'master' into enable-antd

8859799

Update package.json an dimports to reflect the new rjsf organization

7a2be3b

Deprecate antd custom withTheme as core now has forwardRef

bce09ef

Ensure Theme is not default export for consistency

830ed8a

Add scripts for building dist and lib in package.json

fd69ba1

Fix test to use non-default import

ee6e1ac

Add babel-plugin-import to ensure styles are imported on demand

939c485

Add rjsf-antd theme to the playground

320ee70

epicfaace mentioned this pull request Mar 10, 2020

Setup material-ui tests #1641

Merged

delyanr added 5 commits April 25, 2020 11:22

Merge branch 'master' into enable-antd

09aba00

Migrate rjsf-antd code to antd v4 support

fe61e8f

Implement EmailWidget and URLWidget for rjsf-antd

23cb8e1

Reimplement rjsf-antd tests based on latest

9829ee8

Enable rjsf-antd support in the playground

0082350

delyanr added 2 commits April 30, 2020 21:08

Ensure popups are rendered next to fields (even when used with iframes)

066df5e

Implement AltDate/AltDateTimeWidgets for antd theme

8dab55b

delyanr requested a review from epicfaace April 30, 2020 20:11

cdussud reviewed Jun 1, 2020

View reviewed changes

epicfaace added 2 commits June 3, 2020 21:51

Merge branch 'master' into delyanr-enable-antd

03eb7f6

update package-lock

fcb8c5d

epicfaace approved these changes Jun 4, 2020

View reviewed changes

packages/antd/package.json Outdated Show resolved Hide resolved

delyanr added 4 commits June 14, 2020 19:42

Fix SelectWidget placeholder never being shown

c3ebba1

Fix issue with the alternative date pickers

1b55960

Fix issue with additionalProperties blanking out

3284d20

Change license for consistency

64e080f

delyanr requested a review from agustin107 as a code owner June 14, 2020 18:45

epicfaace reviewed Jun 14, 2020

View reviewed changes

Merge branch 'master' into enable-antd

699b291

epicfaace added the ready for merge label Jun 14, 2020

Add semicolon

7695801

epicfaace reviewed Jun 22, 2020

View reviewed changes

build cjs, es, and umd

6c9e7d5

epicfaace added 2 commits June 22, 2020 21:22

antd - switch to new build process, fix global styles

4b8ae25

Merge branch 'master' into enable-antd

65f9880

epicfaace merged commit 959f9b3 into rjsf-team:master Jun 23, 2020

nickgros mentioned this pull request Apr 22, 2023

Fix #3608 by removing ternary and ensuring AntD FieldTemplate wraps root in Form.Item #3621

Merged

8 tasks


		### Prerequisites

		- `antd == 3` (not tested yet with version 4)

	npm install antd @react-jsonschema-form/core
	npm install antd react-jsonschema-form


		const { enumOptions, enumDisabled } = options;

		const emptyValue = multiple ? [] : '';

Uh oh!

Conversation

delyanr commented Dec 29, 2019 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Reasons for making this change

Checklist

Uh oh!

delyanr commented Jan 8, 2020

Uh oh!

epicfaace left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

jeremypeters commented Feb 13, 2020

Uh oh!

delyanr commented Mar 1, 2020

Uh oh!

jeremypeters commented Mar 1, 2020

Uh oh!

delyanr commented Mar 10, 2020

Uh oh!

erikhofer commented Apr 14, 2020

Uh oh!

wenerme commented Apr 15, 2020

Uh oh!

delyanr commented Apr 15, 2020

Uh oh!

wenerme commented Apr 15, 2020

Uh oh!

epicfaace commented Apr 16, 2020

Uh oh!

delyanr commented Apr 30, 2020

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

epicfaace left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

delyanr commented Jun 14, 2020

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

epicfaace commented Jun 14, 2020

Uh oh!

epicfaace left a comment

Choose a reason for hiding this comment

Uh oh!

epicfaace commented Jun 22, 2020 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

epicfaace commented Jun 22, 2020 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

delyanr commented Dec 29, 2019 •

edited

Loading

epicfaace commented Jun 22, 2020 •

edited

Loading

epicfaace commented Jun 22, 2020 •

edited

Loading