Headaches with migrating from v6 to v7

[VeniMitev]

This has been a very frustrating month after I finally decided to make the update to V7 from V6. I was worried about all of the breaking changes and with good reason.

v7 brings an unsustainable amount of breaking changes. It's almost like starting from the beginning when it comes to the overall design and functionality of the application. The codebase for the app in question is massive so it took a while to make all of the basic changes to the components. A shift in the entire concept of a UI library should be happening at a more gradual pace. Sure, small hobby-sized projects are not going to be affected, but larger enterprise-sized apps are going to feel it. This attempt at migration has cost us a lot, and we have had to push other projects to the side to try and concentrate on this migration.

Here are my two biggest issues at the moment:

1. Select component - Complete shift in the concept of it.

Our codebase relied heavily on using the ability to create data that does not exist with the "creatable" prop. Now we need to build an entirely new component just so we have a creatable Select. On top of that, we have to manually make it scrollable, searchable, implement custom components, and all of the things that were already prebuilt in v6. Then we have to test every custom Select component to make sure all of the edge cases are handled by our custom component, which already was handled more than perfectly.

2. NumberInput - Where do I get started with this one?

The main issue, and the reason why I'm considering giving up on v7, sticking to v6, and potentially migrating to something else, is that the NumberInput is missing "parser" and "formatter" props.

The app is a quoting system for interior design projects. Americans, as we all know, do not use the metric system and love their fractions. I had set up some really good functions, one for parsing and one for formatting the user input. In a NumberInput you could pass anything from "2.5", "2 1/2", "2 4/8", etc. and it will all work because of the parser, just like that. For the user, the value inside the NumberInput will show as 2.5" or 2 1/2" or 2 4/8" thanks to the formatter. When the value is saved in the DB, it will show as a float - 2.5, 2.625, etc. It is impossible to make this work now.

I've tried so many ways to make a custom component either with the Input or TextInput components. Those will lack the increment and decrement buttons that the NumberInput has. I've tried the new NumberInput as well. In the new one, you cannot add a space or a slash for the fractions like in the old one for something like: '2 1/4'. There is no way to make it work. I would add a step of '0.0625' (or 1/16), and the functions will display to the user a step of 2 1/16 -> 2 1/8 -> 2 3/16, etc.

Another one is for parsing and formatting currencies. It used to be (from v6 docs):

  parser={(val: any) => val.replace(/\$\s?|(,*)/g, '')}
  formatter={(val: any) =>
      !Number.isNaN(parseFloat(val))
          ? `$ ${val}`.replace(/\B(?=(\d{3})+(?!\d))/g, ',')
          : '$ '
  }

And now there is no mention of how to replicate this in v7 in the new docs. I guess the current way around it would be prefixes and suffixes, but I'm not sure they work the same way.

My first issue with the Select component is more of a rant, but my second is a plea for help. My question/discussion: Is there a reason why the parsers and formatters were removed from the NumberInput? Is there a specific way to implement them myself that I may be missing? Is this all a lost cause, and I have to tell my boss that fractions will never be possible again in our application, which will result in unhappy end users? The old way this was implemented in the app was one input for the whole number and one Select component for the fractions. Users were frustrated every time they had to use that method.

[VeniMitev]

User types this:

When the user presses enter or removes focus, the input becomes this:

Input is stored as 1.125 for width and 2.5 for height on the backend. This way later on the system can make the appropriate calculations

[rtivital]

Parser and formatter props were removed because NumberInput was migrated to react-number format. In cases like 1 1/8" it is better to use a TextInput component with a custom logic that implements parser/formatter.