darekkay / dashboard Goto Github PK

The current Image widget requires the user to type in the full URL of an image:

It would be great to have a "Random image" button, so a) the user can see how the widget is supposed to work and b) getting a random image is a nice feature in itself.

Something like the Unsplash API could be used.

There are some related ideas for images to be considered when working on this:

• Upload a custom image instead of having to type a URL
• Have a random daily image - this can be either a standalone widget or made part of the existing Image widget

From #13:

Basically people use webhook to get the latest blog post, build status etc. So thinking of generalised panel for this, given it should be cachable. If it's okay for you , iwould try to add. But i am not expert on front-end side (espcially react)

A simple server webhook receiver endpoint should be easy to integrate, but:

a) There's currently no data persistence on the server-side (except a memory-only request cache).
b) Currently, the client would still need to poll the data, because there is no server-to-client push mechanism in place.
c) There's no user management right now. Any data received by the webhook would be available by everyone (not a big issue when self-hosted)

User data is being stored in the local storage using redux-persist.
If the user enters some data (e.g. within the Text widget) and immediately closes the page, the data might not be saved.

One solution is to explicitly persist the store by listening to the beforeunload event. This depends on whether this action can be executed reliably for all supported browsers.

An alternative is to display a warning message when a page is being closed (using the same beforeunload event) as long as there are unpersisted changes (similar to what Todoist is doing).

In the future, the user account feature is likely to be implemented, making it necessary to store the data on the server. Hence, using something like sendBeacon might be required.

After opening a modal (e.g. Settings or Widget Configuration), the headline should be focused (if one exists) for better accessibility. Additionally, the DOM order of the headline and close button should be reversed (while visually maintained using CSS order), so the modal close button is focused last.

• See also: WAI-ARIA Authoring Practices

Some widgets, like the Cryptocurrency or the GitHub widget, rely on up-to-date information. When the data is exported (settings menu) and imported later, it will contain outdated information. This should be solved by either:

• Excluding certain data from the export, or
• Excluding the data when it's being imported

A generic approach to define excluded paths per widget is required.

An alternative or addition is to mark outdated data somehow (e.g. an exlamation mark) or placing "last updated" label somewhere.

There are many widget ideas for the Dashboard. This task is a placeholder for people to find a new widget they would like to work on.

The existing withErrorHandling should be replaced with react-error-boundary, because it decouples the error state from the widget component (and provides some developer experience features).

• Blog post
• Testing Error Boundaries (paid)

React Testing Library encourages better, user-centered tests instead of the Enzyme way to test implementation details.

I've introduced a few tests using react-testing-library already, especially for custom hooks (which Enzyme doesn't handle well).

Subtasks

• Rewrite all enzyme tests with react-testing-library
• Remove enzyme
• Improve test coverage by writing more (useful) tests
• Include eslint-plugin-testing-library
• Fix all act warnings (probably solved automatically by removing enzyme tests)

Resources:

• Spectrum Community
• 9 React Testing Library tips and tricks

Instead of the row now being rendered at all, a 0 value should be displayed:

The reason is the usage of !! which is meant for missing values, but it handles 0 as well.

Please notice, there's a general issue of handling data while it's not available. Currently, nothing will be rendered at all when the data is being fetched, but some indicator would probably be good (can be handled in a separate issue).

I've stopped creating domains for projects that might not get traction. Instead I am now hosting most of my projects under a subdomain or subfolder of my main domain. Hence, this Dashboard project currently lives under dashboard.darekkay.com.

However, if this project becomes more popular, it should get a proper name and an own domain. So far, I didn't find a name that was great and not already taken. Any input is welcome 😃

Objective : link Todoist to the board and have a consolidate vision of the project we want / need.

Features :
1 - Link account to Todoist with oAuth2
2 - Add a panel with the upcoming task
3 - Add the possibility to close the task if completed or to open it as a target blank page for more changes.
4 - Add a panel with a custom query (project / date / filterId ...)

In the past I have evaluated a fluid typography design, i.e., the possibility for widgets to scale their font size based on the widget size. See my explanation for why I have abandoned this idea.

Instead, constant font sizes are used for all widgets and all breakpoints. While the user can use native browser zoom functionality, zoom in/out buttons in the header may improve the UX (especially for less tech-savvy people).

It is to be checked whether the header itself should be zoomed as well, or just the content.

One possible solution is using the CSS transform: scale(x) function.

Hi there,

You extracted storybook into a separate folder (which I am also trying to do). I have it fully working except for the coverage add-on. Were you able to get that working? It was working for me if storybook is in the same package.json as the app, but not if it is extracted.

Any help would be greatly appreciated.

Thanks!

Hello,

I made a quick overview of the tools that I knew (or not :)) used in big open source project.

I believe that I would go like this :

• Gitter to chat simply : No archive, no file sharing etc ...
• Slack if we need to go further :)

For the project, I guess we could just use a Github Project and make some card for extension. ;)

So let's try with gitter and start to know each other ;)