chore: Semantic UI React v3

[layershifter]

trafficstars

This PR tracks work Semantic UI React v3 🎉 This PR should not be merged.

---

• [ ] use React.forwardRef() in all components
  • [x] Form
  • [x] FormButton
  • [x] FormCheckbox
  • [ ] FormDropdown
  • [x] FormGroup
  • [ ] FormInput
  • [ ] FormRadio
  • [ ] FormSelect
  • [ ] FormTextArea
  • [ ] Select
• [x] BREAKING CHANGE remove Ref component #4286
• [x] BREAKING CHANGE remove Visibility component #4257
• [x] BREAKING CHANGE Input, Button & TextArea are forwarding refs to native elements
• [ ] BREAKING CHANGE Transition static props
• [ ] BREAKING CHANGE Event handling: remove eventStack
• [ ] remove .displayName in production
• [ ] update contributing guide
• [ ] update introduction to remove AutoControlledComponent mentions
• [ ] rename classname generators
• [ ] validateTrigger should handle forwardRef
• [ ] verify eventStack.sub() calls
• [ ] enable ESLint plugin for rules of hooks

[github-actions[bot]]

size-limit report

Path	Size
bundle-size/dist/Button.size.js	54.04 KB (-8.79% 🔽)
bundle-size/dist/Icon.size.js	27.35 KB (+7.85% 🔺)
bundle-size/dist/Image.size.js	49.6 KB (-8.74% 🔽)
bundle-size/dist/Modal.size.js	62.6 KB (-10.12% 🔽)
bundle-size/dist/Portal.size.js	37.17 KB (-9.29% 🔽)

[codecov-commenter]

Codecov Report

Base: 99.75% // Head: 99.51% // Decreases project coverage by -0.23% :warning:

Coverage data is based on head (88974b5) compared to base (80c4d82). Patch coverage: 99.05% of modified lines in pull request are covered.

Additional details and impacted files

@@            Coverage Diff             @@
##           master    #4233      +/-   ##
==========================================
- Coverage   99.75%   99.51%   -0.24%     
==========================================
  Files         180      186       +6     
  Lines        3248     3511     +263     
==========================================
+ Hits         3240     3494     +254     
- Misses          8       17       +9     

Impacted Files	Coverage Δ
src/lib/hooks/useClassNamesOnNode.js	100.00% <ø> (ø)
src/modules/Popup/lib/createReferenceProxy.js	57.14% <ø> (ø)
src/modules/Search/SearchCategoryLayout.js	100.00% <ø> (ø)
src/lib/hooks/useEventCallback.js	75.00% <75.00%> (ø)
src/modules/Dimmer/Dimmer.js	90.47% <88.23%> (-9.53%)	:arrow_down:
src/lib/hooks/useAutoControlledValue.js	91.66% <91.66%> (ø)
src/modules/Sticky/Sticky.js	94.64% <94.54%> (-4.44%)	:arrow_down:
src/modules/Modal/Modal.js	98.83% <98.52%> (-1.17%)	:arrow_down:
src/modules/Popup/Popup.js	98.94% <98.80%> (+0.01%)	:arrow_up:
src/addons/Confirm/Confirm.js	100.00% <100.00%> (ø)
... and 165 more

Help us with your feedback. Take ten seconds to tell us how you rate us. Have a feature suggestion? Share it here.

:umbrella: View full report at Codecov.
:loudspeaker: Do you have feedback about the report comment? Let us know in this issue.

[brianespinosa]

@layershifter this is a lot of work. Pretty exciting to see... I was not sure if this was even going to be possible to get done with everyone spending most of their time on day jobs.

Does this PR also resolve the warnings that come from React.StrictMode? If not, I wonder if we should consider looking at those in a different ticket that could be worked on after this comes in.

[layershifter]

Does this PR also resolve the warnings that come from React.StrictMode?

Yes, it should solve them all 😋

[emutanen]

It surely looks like a lot of effort is paid by the authors to have the current update in this PR :) well done!

I'm excited about the possibility to see findDOMNode warnings gone with React.StrictMode, too! Do you think v3 is out by the end of 2021?

[layershifter]

Do you think v3 is out by the end of 2021?

The plan is to release it till end of August/September 😋

[orjanb-ne]

Do you think v3 is out by the end of 2021?

The plan is to release it till end of August/September 😋

Any updates on estimated release?

[sunech]

Do you think v3 is out by the end of 2021?

The plan is to release it till end of August/September 😋

Any updates on estimated release?

I am a bit curious about the status as well? As totally new to React, this was by looks and features the absolutely most appealing UI framework I could find. Really love how easy it is to work with in React, great work done so far!

So I am really hoping this project hasn't halted development or is in the process of slowly dying. Would be a waste both great potential and all the good work committed so far :-)

[elee-mathieu-plasse]

Do you think v3 is out by the end of 2021?

The plan is to release it till end of August/September 😋

Any updates on estimated release?

I am a bit curious about the status as well? As totally new to React, this was by looks and features the absolutely most appealing UI framework I could find. Really love how easy it is to work with in React, great work done so far!

So I am really hoping this project hasn't halted development or is in the process of slowly dying. Would be a waste both great potential and all the good work committed so far :-)

Seems we are a lot on hold on this.

@layershifter : looking at your github activity, you seems focused on fluent-ui. DO you think you'll have time soon back for semantic-ui ?

[layershifter]

@layershifter : looking at your github activity, you seems focused on fluent-ui. DO you think you'll have time soon back for semantic-ui ?

The difference is that Fluent UI is my paid job while SUIR is my passion. It's hard to find balance especially during work from home time.

This PR requires around a week of full time work to get it finished and released. I don't want to give broken promises (I as previous estimate failed 😬), but I will try to allocate some time in December. Honestly, I want to get this released ASAP, but we can't go with partially working things.

[elee-mathieu-plasse]

@layershifter : looking at your github activity, you seems focused on fluent-ui. DO you think you'll have time soon back for semantic-ui ?

The difference is that Fluent UI is my paid job while SUIR is my passion. It's hard to find balance especially during work from home time.

This PR requires around a week of full time work to get it finished and released. I don't want to give broken promises (I as previous estimate failed 😬), but I will try to allocate some time in December. Honestly, I want to get this released ASAP, but we can't go with partially working things.

Thanks for those info, didn't know there is still that much work ! You do a good work on this, thanks for it.

[piksel]

@layershifter Is there any way to help out with this? I know too well how trying to release bigger changes to hobby projects tends to be overwhelming, and never takes the amount of time you think it will...

[layershifter]

@layershifter Is there any way to help out with this? I know too well how trying to release bigger changes to hobby projects tends to be overwhelming, and never takes the amount of time you think it will...

@piksel unfortunately I don't think so, as remaining components are hardest ones 🙄

---

Current update, for this week I to solve few more issues in 2.x, you can notice work happening in master. On next week I plan to rebase this PR and continue with it.

The really bad thing is that it cannot be chunked into smaller pieces as all components should be updated for v3 😥

[layershifter]

Minor update: hard components like Dropdown & Search are done. The next step is to finish all remaining and publish beta.

[bolivier]

@layershifter is this something you're interested in getting help with?

I'm a Semantic UI React user w/ a big interest in seeing a V3 :grinning:

[sunech]

Sincerely caring about the future of SUIR, I think it is crucial to get some traction on v3.

I cannot contribute with code unfortunately, but if we can donate or in any other way help, please let us know.

[layershifter]

Fortunately/unfortunately #4354 has higher priority now to at least unblock people with installing the package with React 18.

I will put effort to finish forwardRef() work on remaining components. It ~~should be trivial~~ as usually not. Once it will be done v3 will go to alpha for early adopters.

@layershifter is this something you're interested in getting help with?

The truth is that this PR does not scale 🤔 However, there are remaining items that will be transformed to issues once forwardRef() work will be done. There is a ton of work that is not described yet, I should fix that. And for sure, I appreciate any help then.

[bolivier]

@layershifter I'm totally happy to submit PRs for the forwardRef work if that's helpful.

[PerryRylance]

Following this for the ref updates...

[mfrtrifork]

Looking forward to this library using React.forwardRef() 👍

Any estimate on when this will be released ? :)

[bolivier]

@mfrtrifork I've had a good time contributing PRs here. If you have some time, it'll probably release faster with more help 😄

I think there's still some low hanging fruit in the unfinished input components.

[mfrtrifork]

@bolivier I am sorry but I am completely swamped at the moment. So unfortunately I will not be able to contribute right now.

But nevertheless I look forward to v3 regardless of the release date :)

[felixmosh]

How can I help? :]

[bolivier]

@felixmosh I submitted a few diffs adding ref forwarding to input components, and there's a few left. Most of them were pretty straightforward.

[malixsys]

How can I help? 👀

[tourman]

@layershifter where can I find that Form uses forwardRef? Here nothing reminds me about that you checked the Form checkbox. Isn't the branch the freshest tip?

[layershifter]

@layershifter where can I find that Form uses forwardRef? Here nothing reminds me about that you checked the Form checkbox. Isn't the branch the freshest tip?

~~Indeed, Form have not been updated yet. I unchecked it.~~ It's me doing bad rebases. It's in now.

How can I help? 👀

@malixsys submit PRs to this branch with transforms to remaining components, for example #4359.

All components should be using React.forwardRef, then we can proceed with beta release.

[felixmosh]

@layershifter, Do FormGroup, FormCheckbox, FormButton are converted as well? because i don't see the code of react.forwardRef in these files.

[layershifter]

@layershifter, Do FormGroup, FormCheckbox, FormButton are converted as well? because i don't see the code of react.forwardRef in these files.

Yeah, sorry. @bolivier made this changes, but I made a bad rebase. Now they are in, the list should be update to date.

[felixmosh]

@layershifter are these 2 PR's OK? https://github.com/Semantic-Org/Semantic-UI-React/pull/4404 https://github.com/Semantic-Org/Semantic-UI-React/pull/4406