feat: adding new UI scaffolding

[zklosko]

Description

With the official release of Vuetify 3 Beta, I'm restarting development of our new UI with Vue 3, the Composition API, and Vite. Typescript, Vue Router, Cypress, Vitest, and Storybook are also included. Most of it is boilerplate, and I'm hoping for assistance, same as before.

This code does not interact with the existing PHP UI, and is not copied to production folders during our install script.

The proposed URL nesting structure is as follows:

/ -- Microsite or splash page
/dashboard -- Base dashboard page template, requires login
   /calendar -- Dashboard UI pages, same as with the PHP UI
   /help -- etc...
/widgets -- delivery of widgets for embedding elsewhere
   /weeklyschedule -- weekly schedule widget
   /nowplaying -- etc...

Todo:

• Add documentation explaining how to develop the new UI
• Integrate Vue i18n
• Automate linting with Github Actions
• Remove Storybook.js
• Complete skeleton routing with Vue Router

Testing Notes

What I did:

This was created with

npm init vue@latest

How you can replicate my testing:

Enter the ui directory and run

yarn install
yarn dev

[jooola]

I think we should change the ui name to something less generic, like webapp or similar.

[zklosko]

The progress so far

[jooola]

I really would like to warn again that if we don't build blocks by blocks and adopt this strangler fig thing, it will be difficult to have this merged.

I don't think we should build the entire layout right now, we should build components/views that should replace particular views in the legacy code.

In addition you are already building parts that will probably be replaced in the near future, please be sure to follow or ask whether some parts should be build or not.

The ideal roadmap for this would be:

• to prepare a minimal app, with linting/testing/e2e
• pick a view we want to replace and work on that and only on that.

[zklosko]

That's fair. I'll take out the onboarding wizard but we still need the general layout and views.

Edit: The plan has been to make the new UI as similar to the old UI as we can. Basic design should be carried over into the new web app.

[paddatrapper]

Vuetify 3 is now out of beta - https://github.com/vuetifyjs/vuetify/releases/tag/v3.0.0

EDIT: change Vue to Vuetify

[jooola]

They are missing the datatables component, they should release it in 3.1 though.

[zklosko]

I know it's been a year... are we still planning to use Vue/Vuetify with Typescript, Vite, Storybook, Vue-i18n, etc.? Has there been any consideration of switching to React with Next.js or Svelte/Sveltekit?

[zklosko]

Starting again in a new PR. Closing this one.

[paddatrapper]

Apologies for not responding earlier, but, yes, the plan is still a Vue-based stack

[zklosko]

That's okay! I have the new stuff in a new PR.