lab49 / react-value-flash Goto Github PK

I'm using 0.1.7 from npm.

In package.json:

  "main": "dist/index.js",
  "module": "dist/index.modern.js",

These point to index.js & index.modern.js, which do not exist.

My app won't boot unless I hard-change these to dist/Flash.js.

  "main": "dist/Flash.js",
  "module": "dist/Flash.js",

I tried to create a PR on master, but it seems like this codebase is different from 0.1.7.

Right now, the user has no control over the DOM (simple as it is right now).

We could open up the ability for a user of this library to provide a render prop, and then the users of this library will have complete control over the structure of the DOM.

We could add the ability for users to subscribe to transition events in the UI, so that if you wanted to link together some callback and the state of the UI, you could accomplish that.

We'd likely need to listen to this event: https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/transitionend_event

As far as the API, I'm not entirely sure what the best option is. We may need to rely on React refs to accomplish this.

I've already created one play function for one of the stories, here's the relevant snipped from a recent commit:

I've also validated that we can run it locally (with npm run test-storybook) and in CI (which uses Chromatic to run the interaction tests).

Let's look into doing a few things:

1. Move all relevant tests out of standalone Jest and into Storybook play functions. This gives us the ability to rely on the existing stories that have been written to set up test cases, and also could (if we move all tests) allow us to simply drop all the testing dependencies.
2. Collect coverage stats and forward them on to Codecov.

Probably not something we want to do right away, but I've taken the first steps towards this. There's more documentation on this page: https://eslint.org/docs/latest/user-guide/configuring/configuration-files-new. Here's a screenshot as of this writing:

Right now, I do have the ESLINT_USE_FLAT_CONFIG env var set to false so that we can maintain compatibility with other tools. There's additional setup in the repo to keep things working, but should be cleaned up.

For example, we're needing to set these VS Code preferences to keep things functional: microsoft/vscode-eslint#1518 (comment)

I don't know what would be required or available in other IDEs.

Right now, the animation on flash is a simple CSS transition (defined here: https://github.com/lab49/react-value-flash/blob/main/src/Flash.tsx#L86).

We could add the ability for users to provide their own custom keyframe animations. You could likely do this already by writing your own CSS and using the selectors in the DOM, but perhaps there's an easier API that we could provide.

This could potentially be a bit of a tricky one... but, it's likely that you're going to use this component inside some kind of grid. In that case, you'll have many rows of data, and one or more columns in those rows with flashing numbers.

We could provide an option to pad the numbers such as that one column in a grid could be "radix aligned", or, aligned to the decimal point. For example, this is what this would look like now:

row1 | 123.45
row2 | 23.45
row3 | 1.45

...and this is what we'd want it to look like:

row1 | 123.45
row2 |  23.45
row3 |   1.45

This would make large grids of numbers much easier to scan. The catch is that this would really only work with fixed width numbers. I don't see any way to "enforce" that in this package, but we could simply document and provide screenshots to indicate that this is something a user would need to configure on their own.