Create - ActionWizard

[ddroid]

@todo

#1

• create action-wizard
  • @input 📦 from Hackmd Notes
  • @input 📦 from Figma Prototype
  • @input 📦 from Figma Designs
  • @output ❓from ThemeWidget v0.0.1

---

• create menu
  • @input 📦 from ThemeWidget v0.0.1
  • @output 📦 from ThemeWidget v0.0.2

---

• Added selected feature in menu
  • @input 📦 from ThemeWidget v0.0.2
  • @output 📦 from ThemeWidget v0.0.3

---

• Updated according to feedback
  • @input 📦 from ThemeWidget v0.0.3
  • @output 📦 from ThemeWidget v0.0.4

[ddroid]

Tasks

• Updated Notes - 20 min
• Created search-bar.js - 2hr20min
• Created Action-bar.js - 1hr30min
• Created Index.js - 40min
• debugging - 1hr
• research - 40min
• styling in index.js - 2hr
• created issue and recorded worklog 20 min
  • @output 📦 ThemeWidget v0.0.1
  • @output 📦 Webpage

Worklog

• worklog-02

FeedBack

• Have converted to standardJS and snake case.
• simplyfied the components by using template literals.
• Improved readability.

Proposal

• Upgrading search-bar and more styling

[serapath]

feedback 2025.01.20

1. thx, the preview page is now much better https://ddroid.github.io/ui-components/
   • it doesnt include a title for the "action bar" in front or on top of the displayed action bar
   • it does not yet include a menu for me to click and scroll to any of the shown components (currently of course there is only the action bar and placeholder for 3 more components)
     • e.g. using <a href='#${component_name}'>${component_name}</a> anchor tags
   • it does not show sub components standalone, e.g. action-bar/icons and action-bar/search-bar should probably become src/node_modules/icons.js and src/node_modules/search-bar.js and then you can use require('icons') and require('search-bar') instead and thus display icons and serach-bar separately on the preview page
   • it doesnt yet have a box drawn around each component with a way to resize it to allow somebody who views the components to resize and explore the responsiveness. I last time shared a code snippet how to approach that on discord in the worklog-2 thread:

   // web/index.js
      // ...
      const container = document.createElement('div')
      container.style = "border:1px solid black; resize:both; padding: 20px; overflow:auto;"
      container.append(fn())
      return container
      // ...

2. the rest is just mostly what was repeated earlier see discord

[ddroid]

Tasks

• Updated Existing code according to feedback - 20 min
• Created menu in web/index.js - 1hr20min
• Debugging - 15min
• Styling - 20min
• Research - 15min
• created issue and recorded worklog 20 min
  • @output 📦 ThemeWidget v0.0.2
  • @output 📦 Webpage

Worklog

• worklog-03

Proposal

• Adding states to searchbar and updating according to feedback

[serapath]

feedback 2025.24.01

Looks good in many ways. Cool to update the address bar with what component name is selected.

A few things I noticed:

0. other useful modules

like loadsvg and others you found in playproject code base.

Sadly - at the moment, these are not published to npm, but this is also not what we plan in the long run. These are also very small, so you might as well "copy" them and they could become part of e.g. your icon module ...

Once we are ready - which is hopefully soon, we will have a feature to be able to load modules, like loadsvg from the playproject page directly. This will work by loading/embedding an iframe to playproject website into our page and then just listing and downloading modules such as loadsavg from that iframe into our page and cache them in the "localStorage", so we dont need to do it again every time we load the page.

For now we dont have that yet, so in this transition phase we either have to skip using them or we improvise and add a comment to later do it the way i just tried to describe when we have that feature ready :-)

1. event listeners (already mentioned in last feedback)

all event listeners should use element.oneventname = oneventname

2. reset element content

if there is a need, it should always use element.replaceChildren() instead of element.innerHTML = ''

3. class names of elements (already mentioned in last feedback)

as said before, because of the closed shadow we use everywhere, there is no way to select and change an element from the outside.
Thus, it saves lines of code and execution time if we just hard code class names instead of storing them in a variable name just for the class name, which you or we already dont use in the get_theme function, so why bother elsewhere.

4. styles (already mentioned in last feedback)

I still see the <style> tag being used instead of .adoptedStyleSheets
So we do NOT create a style element and set its .textContent, but we create a CSSStyleSHeet and ....basically code snippet was given last time.

Lets go to the previous feedback comment and to the discord feedback discussion of the previous worklogs.

5. in web/index.js

you again could make way more use of template literal instead of manually creating all those elements. First a li element, then span, then input`, etc....
I mean, the menu did not exist yet in the previous feedback, but i already mentioned we should use template literals more instead of assembling all these elements with native calls, because that makes it really harder to quickly read than a snippet of html.

6. menu

the idea is to select the component box that displays the component instance and the component name hopefully. Those are all part of the preview page web/index.js and thus not hidden away inside of a shadow.

When we have many, a visitor might just want to scroll from top to bottom to watch them all.
The menu is interesting, but if we have 100 elements, i am unsure how to quickly navigate/jump to one. The idea was to always jump to a specific one quickly and scroll it into view.

1. Also, unselecting many might take a long time if we have plenty of components
2. Also, the resizing does not work yet

The "resizing" was already mentioned and a css code snippet was given during last feedback**

Now if in addition to jumping and focusing on a component by clicking its name, we can also make use of the "checkbox" to hide or present only specific components in general, that is a neat unplanned feature, but it could be useful, so we can keep that.

7. components (i think it was also mentioned in the last feedback about the menu)

you still dont have the "main components" listed (chat, graph, editor, actionbar), but each of them, for now just the acitonbar, consist of sub components and those should have a separate entry and should be shown as standalone component instances on the main page :-)

The funny thing is, that in your worklog video, you even show how to export the "search bar" component and you then display it on the main component presentation page, which is good, but what about the rest? :-) ...and why isnt it currently showing on the main page? :-)

Additionally: I think it would be great if the box that should be resizable and surroundes every component instance on the preview page, would also contain some sort of label so one would know the name of the actionbar, which is currently not being shown.

[ddroid]

Tasks

• Updated Existing code according to feedback - 25min
• Updated menu => Coding + Research + Debugging - 2hr 45min
• Styling - 1hr 10min
• created issue and recorded worklog 15min
  • @output 📦 ThemeWidget v0.0.3
  • @output 📦 Webpage

Worklog

• worklog-04

Proposal

• Updating the existing Action Bar using new wireframes and then add new features according to the wire frames.

[serapath]

feedback 2025.01.26`

Thank you. Great worklog. Gave all feedback on discord.

[ddroid]

Tasks

• Updated code according to feedback - 1hr 10min
• created issue and task logged - 10min
  • @output 📦 ThemeWidget v0.0.4
  • @output 📦 Webpage

Worklog/Feedback

• create action-wizard
  • Applied shadow dom in web/index.js
  • Utilized template literals inside the create list function
  • Removed spaces from element properties in template literals
  • Added the placeholder for searchbar in action_bar.js
  • Fixed the scroll on selecting so that the entry appears in middle
  • Changed the formatting of template literals

Proposal

• Utilizing the STATE module in the project.