2.x release

[TimboKZ]

Chonky 2.x release

• Code: https://github.com/TimboKZ/Chonky/tree/2.x
• Landing: https://chonky.io/
• Docs: https://chonky.io/docs/2.x/
• Storybook: https://chonky.io/storybook/2.x/

Remaining todos:

• [x] Move ChonkyIconFA into the (currently empty) chonky-icon-fontawesome package
• [x] Migrate List view file entry from SCSS to JSS
• [x] Fix drag & drop indicator when selection is dropped onto itself
• [x] Migrate 1.x documentation to Docz
• [x] Write docs for the new file action framework
• [x] Improve Noty popups in demos
• [x] Fix custom context menu handlers consuming events even when FileContextMenu component is not enabled
• [x] ~~Show file array validation error in the UI & console~~ Validation errors are only shown in console now for better UX.
• [x] Add keyboard shortcut integration to the new search component (Ctrl+F, Escape).
• [x] Fix default config applying default file view/sort actions twice.
• [x] Fix shift-click range selection working when disableSelection is set to true.
• [x] Fix dark mode version of the docs banner.
• [x] Add FullFileBrowser component.
• [x] Add a method for programatically requesting actions to the file browser handle.
• [x] Fix font size in live editor in Docz
• [x] Fix zoom and text overflow in search bar on mobile
• [x] Add built-in file actions API reference page

Stretch goals:

• [x] Add folderChainIcon field to FileData.
• [ ] Expand DnD documentation (namely describe what checks happen when files are dropped).
• [ ] Support custom toolbar/context menu ordering
• [ ] Global search support (toggling between global & local search)
• [ ] Action buttons support (Submit/Cancel)
• [ ] Support custom properties display (in addition to default file size/mod date)
• [ ] Support custom component classes (similar to Material UI)
• [x] Support dark mode
• [ ] Support JS theme overriding
• [ ] Improve folder structure for components
• [ ] Disable backdrop on context menu so people can click/right click other things without having to dismiss the menu explicitly.
• [ ] Improve file browser styling on mobile
• [ ] Polish the compact view
• [x] Support drag & drop into folder chain and opening files via drag & drop
• [ ] Add a way to highlight/style specific file entries
• [ ] Investigate Cannot have two HTML5 backends error on hot reload even when using external DnDProviders.
• [ ] Improve TypeDoc component in Docz.
• [ ] Add deprecation notices & links to 1.x documentation website.
• [ ] Rename action.fileFilter into aciton.selectionFilter (with backwards-compatible deprecation warning for fileFilter).
• [ ] Add action.option.fileFilter for hiding files (similar to built-in "Show hidden files" functionality).
• [x] Support localization.
• [ ] Decrease bundle size.

[rhummelmose]

I've been working a little bit more with your component now. It's really awesome!

[TimboKZ]

Small announcement:

I have just released Chonky v2.0.0, and updated the documentation website to reflect the most recent changes.

You can find it here: https://chonky.io/

[TheAksh]

Awesome work! What wasn't clear to me was how do I drag a file that is present inside a Folder out of it. Basically the opposite of dragging and dropping a file in a folder.

[AndreyVanyakin]

Great job, thanks a lot. Just curious - why did you decide to proceed with Redux? Did you encounter any critical Recoil pitfalls?

[TimboKZ]

Thanks @TheAksh! Moving files to the parent directory using drag & drop is not supported yet, but I'm planning to work on this soon. I'll use the mechanism suggested in #42.

Thanks @AndreyVanyakin, it's an interesting question!

I think Recoil is a great library and I definitely enjoyed using it. The main pitfall in my opinion is that it is still experimental - it's not very stable (as you might have seen from many console errors in Chonky 1.x), and the developers are keen on using experimental React features which forces library users to upgrade to the most recent version of React. They are doing some cool things under the hood so it's understandable, but I didn't want to force people to upgrade just because Chonky uses Recoil under the hood.

Recoil's experimental status was a nuisance but it was not the main driver for switching to Redux. I'd say there were 3 reasons for switching (in the descending order of importance):

1. Individual Recoil atoms were hard to maintain - they were initialised & updated in different files all around the place. They also had arbitrary cross-dependencies, and it was a nightmare to debug. I'm sure I could improve the file structure and abstraction to make it more centralised, but I felt like I would just be reinventing Redux.
2. As you know, file actions are probably the most important feature Chonky has, and I needed to find a way to represent state such that it could be easily changed from file action effects. I feel like Redux does the job reasonably well, and I'm not sure if this would even be possible with Recoil.
3. It's gonna sound weird, but I found Recoil to be too tightly coupled with React for my needs. Everything needed to be done using hooks, which meant your state logic had to be aware of React and React re-renders in some way. It's not a huge problem, but it's annoying.

In conclusion, I will repeat that I really enjoyed using Recoil and will definitely use it again in some smaller component libraries. There is virtually zero boilerplate in Recoil, but nowadays Redux boilerplate is not that annoying either (thanks Redux Toolkit!). I also wouldn't be surprised if over time Recoil would introduce more Redux-like features (or vice versa) to become the greatest state management library ever built.

P.S. I unknowingly re-invented createSlice from Redux Toolkit around a year ago. If I knew it was already a thing back then, Chonky would likely use Redux from the start.

[AndreyVanyakin]

Thanks for such a detailed response. I started a new project with Recoil and it felt awesome after all the overhead code Redux enforces. Hopefully, the team behind Recoil won't stop moving forward and I don't have to switch to Redux :)

[TheAksh]

Created an issue on the exact-trie that you own. Commenting it here, since that is a dependency of this library. As an Amazonian, you'd know the InfoSec restrictions considering the Licenses used. 😁

[TimboKZ]

Good catch @TheAksh! I have fixed the license issue and published a new version of Chonky (actually did that a few days ago, but forgot to comment, sorry!).

[TheAksh]

No probs! Yes noticed that..thank you for the prompt change!

[rhummelmose]

@TimboKZ any thoughts on localization?

[TimboKZ]

@rhummelmose I think it would be nice to have, just need to get around to adding it. I can't say it's at the top of my priority list though.

Do you need to translate Chonky into a specific language?

[rhummelmose]

Do you need to translate Chonky into a specific language?

Yes, for an admin panel though, so it isn't mission critical :)

[TimboKZ]

@rhummelmose I see. Have you done this with any other React libraries? Do you know if there are any good examples to follow?

[dragosrotaru]

@TimboKZ Is there any update on the Cannot have two HTML5 backends error? We are getting this in our project when navigating to and from a route containing chonky. Is there a way to circumvent this issue for the time being?

[TimboKZ]

@DragosRotaru does solution described on https://chonky.io/docs/2.x/basics/drag-n-drop#cannot-have-two-html5-backends not work for you?

[dragosrotaru]

@TimboKZ Ah I am sorry, I should have read the documentation more carefully. Thank you for your help and for making chonky!

[jitendra1604]

how can we change css can get any reference link please

[mrWindswept]

@TimboKZ , the library is awesome.. But getting a CSS issue.. The CSS for the folders and files is not getting loaded... Attaching a screenshot..

Can you please have an option to add the css file separately so that a developer can change the CSS properties on demand.

[paralin]

Everything looks great with this package but I think it's time to update it to a newer material-ui, is this still being maintained? @TimboKZ thanks!

[mrWindswept]

This working perfectly now (I have tested it both on react js and next js). Sorry for the delayed response