Create Steps Wizard

[MuhammadAzim01]

@todo

#7

• create first draft of steps-wizard
  • @input 📦 Ahmad's Logs Playlist
    from given
  • @input 📦 Figma Prototype from given
  • @input 📦 Figma Playlist from given
  • @input 📦 STATE component Guide from given
  • @output 📦 StepsWizard v0.0.1 from worklog comment
• Connect Components
  • @input 📦 StepsWizard v0.0.1
  • add Trigger Stepwizard by command
  • add number of Steps and current step on Action Bar
  • add cancel button action on steps wizard
  • @output 📦 StepsWizard v0.0.2 from worklog comment
• Confirm Button Functionality
  • @input 📦 StepsWizard v0.0.2
  • Add input bar above steps
  • connect input bar with steps wizard
  • Seperate Steps wizards and built a program component
  • On last step, prints output on console.
  • @output 📦 StepsWizard v0.0.3 from worklog comment
• Show Form at each step and confirm button at last step
  • @input 📦 StepsWizard v0.0.3
  • @input 📦 Feedback
  • Confirm Button Visible at completion of all steps
  • View Form of all steps.
  • Automatic Show Form at first active step
  • @output 📦 StepsWizard v0.0.4 from worklog comment
• Code Architecture Changes
  • @input 📦 StepsWizard v0.0.4
  • @input 📦 Archiecture Diagram
  • Introduce Steps wizard as subcomponent of quick actions
  • Create a manager.js file and restore protocol communication of existing flow
  • Adjust Program.js with its protocol(send actions data and print result with selected action)
  • Add Command List functionality based on actions loaded.
  • @output 📦 StepsWizard v0.0.5 from worklog comment
• Action Bar Architecture Changes
  • @input 📦 StepsWizard v0.0.5
  • Introduce Action as subcomponent of actions bar with clean code
  • Introduce Quick Action as subcomponent of actions bar with clean code
  • Introduce Steps Wizard as subcomponent of actions bar with clean code
  • Introduce Action bar as subcomponent of manager with clean code
  • Retain Form Input data
  • Retain Selected Action data
  • @output 📦 StepsWizard v0.0.6 from worklog comment
• Form Input Changes
  • @input 📦 StepsWizard v0.0.6
  • Fix Import forms from program in manger
  • Add Error display to steps in case of form gets incomplete
  • @output 📦 StepsWizard v0.0.7 from worklog comment
• UI Hover Arrow Changes
  • @input 📦 StepsWizard v0.0.7
  • Add horizontal scroll navigation arrows
  • Create fade edge indicators for overflow content
  • Setup JavaScript scroll detection and arrow visibility logic
  • Add smooth scrolling behavior and click handlers
  • @output 📦 StepsWizard v0.0.8 from worklog comment
• UI Step Button Changes
  • @input 📦 StepsWizard v0.0.8
  • Add horizontal scroll bar
  • Center the button on click
  • Text ellipses and show tooltip on hover
  • @output 📦 StepsWizard v0.0.9 from worklog comment
• UI Arrow Changes
  • @input 📦 StepsWizard v0.0.9
  • Add arrows css
  • Adjusted render-steps function - 30 min
  • removed old arrow bar code
  • @output 📦 StepsWizard v0.0.10 from worklog comment
  • @input 📦 StepsWizard v0.0.10
• State Module Admin upgrade
  • @input 📦 StepsWizard v0.0.10
  • Fix Admin import issue
  • Fix mapping issue
  • Disscussion at discord
  • @output 📦 StepsWizard v0.0.11 from worklog comment
• Step Wizard Fixes
  • @input 📦 ui-components 0.0.45
  • @input 📦 Worklog Video
  • Fixed Steps Wizard Flow & Form Input processing
  • @output 📦 StepsWizard v0.0.12.3 from worklog comment

[MuhammadAzim01]

Tasks

• watched ahmad worklog videos - 1hr
• Interacted With Figma Design and watch Figma playlist - 35 min
• Create Component - 2hr 30 min
• Discussion with Ahmad (STATE guide) - 1hr
• Debugging - 1hr 15 min
• Write the guide - 30 min
• Created issue and worklog video - 15 min
  • @output 📦 Steps Wizard Prototype v0.0.1
  • @output 📦 WebPage
  • @output 📦 guide

Worklog

Worklog-1

Proposal

• add command actions to open the steps_wizard
• Allowing other components trigger (change) the status to complete from the component.
• Storing the state of each step in local Storage

[serapath]

feedback 2025.06.21

So i already gave some feedback on discord.

Regarding proposals.

1. lets skip any guide for now - the one we have is more than needed, but lets add a README.md but highly minimal and focused on a code snippet how to create an instance and maybe focused on events/outputs ...etc...

• maybe with minimal description focused around the params or code snippet so people know how to use it for the steps process.
• maybe add screenshots and/or animated gif and/or link to short screencast video to see the component in action
• add a link to the github preview of the component, which is already basically a visual showcase

2. i would keep it minimal for now to just make our overall "theme widget" work so the component has to only do what is needed for that, so i think no other components should be able to trigger stuff, unless its needed to make things work, but then it should be explained architecturally why and how things work
3. storing state in localStorage should already be done automatically if you leverage the STATE library with sdb.drive, etc.. and sdb.watch(onbatch)

In general, PROPOSALS as the last worklog comment section should alwasy be written in the form of tasks with inputs and outputs, to know what is expected here :-)

[MuhammadAzim01]

Tasks

• watched Steps Wizard Part 2 video - 30 min
• Write subtasks for planning of step wizard - 30 min
• Discussion - 15min

Worklog

• In short, Commands trigger the steps wizard along with that command will be printed in action bar with the total steps and the user's current step. User can either cancel the steps wizard [by clicking the X on action ]and return back to commands or can confirm the current step and move on to the next step.

Proposal

Planning of Step Wizard

• Trigger Stepwizard by command
• Number of Steps and current step on Action Bar
• Cancel Button Function on Action Bar
• Confirm Button Function on Action Bar
• Status Bar above the Steps For backtrack steps

[MuhammadAzim01]

Tasks

• Connect Actions and Action Bar and update steps wizard - 2hr
• Created issue and worklog video - 15 min
  • @output 📦 Steps Wizard Code
  • @output 📦 WebPage

Worklog

Worklog-2-UI
Worklog-2-Code

Proposal

• Confirm Button Functionality
  • @input 📦 StepsWizard v0.0.2
  • Add input bar above steps
  • connect input bar with steps wizard
  • Seperate Steps wizards and built a program component
  • On last step, prints output on console.
  • @output 📦 StepsWizard v0.0.3

[serapath]

feedback 2025.06.28

ui

After checking the UI video tere is a problem here.
The confirm button on the action name bar is only for finishing the entire action after all steps have been filled out.

An individual form field just gets completed when all fields in a form have been filled out correctly.

The form for each step is a component defined in the steps json that describes the steps for a specific action.

I think defining a step without a form is invalid and if the form has nothing to fill out, then probably the step is immediately completed.

Thats why i said in order to try out the steps wizard, we need a steps json with some components to be loaded and instances to be made which have at least a single input field to type in.

But maybe you will do all of that in the next worklog.

---

code

looks alright. some formatting issues, meaning it has some semicolons and isnt standardx with snake_case compliant. if you could fix it, that would be cool.

Otherwise, looking forward to the next worklogs

[MuhammadAzim01]

Tasks

• @input 📦 StepsWizard v0.0.2
• Add input bar above steps - 1hr 30min
• Connect input bar with steps wizard - 30 min
• On last step, prints output on screen - 15 min
• Seperate Steps wizards and built a program component - 2hr 30min
• Discussion and planning - 30min
• Created issue and worklog video - 15 min
  • @output 📦 Steps Wizard Code
  • @output 📦 WebPage

Worklog

Worklog-3-UI
Worklog-3-Code(part 1)
Worklog-3-Code(part 2)

Proposal

• Status Bar Functionality
  • @input 📦 StepsWizard v0.0.3
  • @input 📦 Feedback
  • Confirm Button Visible at completion of all steps - 30min
  • View and restrict input Form of all steps. - 1hr 30 min
  • Automatic Show Form at first active step -5min
    • @output 📦 StepsWizard v0.0.4

[serapath]

feedback 2025.07.061

regarding ui

The UI interaction looks goood. Things i noticed:

1. you needed to click the first step to show the form, but the default active step1 should automatically also show the form immediately
2. you cant click step3, but every step should be clickable to preview, but it must be possible for a future step now allowing to fill out all forms, because maybe some inputs from earlier not filled out steps are still missing
3. when i am in a later step and go back into an earlier step, then i can e.g. delete some input field characters, which should make the field again invalid, etc... and later fields in later steps that have been filled out because of it should become errornous or indicate that they now also went bad.
4. the final "confirm" button should only become available when all required inputs in all steps have been filled out without errors.
5. it is good that a completed step gets a checkmark, but i think the step number is also still important to show as well.
6. when a step is currently actively focused, the immediate next and previous step should or might need to get an additional css class, so that themes have the options to give them a < and > arrow to indicate previous and next steps.
7. when there is loads of steps, like more than fit into the steps wizard bar ...maybe 10 or 20 ...the currently active step should maybe always scroll into the center?

---

regarding code

Trying to understand now, but will also share some coding conventions to "improve" the code, e.g.

const component_modules = {
  'form_input': form_input,
  'input_test': input_test,
}

could literally be

const component_modules = { form_input, input_test }

and it would be the same.

I have a question though: Hhow or where is component_modules being used?

1. It does not seem like it gets module.exported.
   You share how you updated fallbacks, but didnt show where you sue component_modules in the code in program.js or elsewhere.

2. In steps_wizard.js you show render_steps([...]), but havent define the steps in the js file, even though earlier you should steps defined in json files - so all this hasnt been explained in more detail - i wish it was :-)

3. You show steps_wizard can receive a message from the progrma file with steps to then render_steps(variables), which makes sense, but why was there an earlier initial render_steps call?

4. on each step button click steps_wizard sends steps data up to program, but in the end, isnt it enough to only send the data collected in all steps when the entire steps wizard is completed?

5. architecturally, there is a hierarchy problem here. A program.js should never instantiate or require the stepswizard, because programs are not aware of a steps wizard. A program should be communicated with by whatever component started the program ...basically exchanging messages... and one of the things each program MUST offer is a list of all it's possible API functions and forms components and validation functions, that can be used to collect the valid arguments for each of those API function calls. The steps wizard can then independently create form instances and collect data and when all data collection has completed, a message will be sent to the "program" to trigger a specific API function it offers and the collected data will be used as argument for that function call. So there must be a different component that coordinates between a running program and the steps wizard, because none of these components are supposed to really know about each other and should not have any direct dependency on each other, because a steps wizard can be used without programA and programA can run without using a steps wizard.

   • later this component will of course be our "theme widget task bar", but for now i think it is entirely okay if it is page.js or a function inside page.js or maybe some sort of dummy component that you create that requires both, program.js AND steps-wizard.js and then you just coordinate between instances of both :-)
   • 
   • Also this logic is what needs to be created in that "dummy" component and given that maybe we have a lot of steps with complex forms, its not even necessray to create all form element instances upfront, its also okay to listen to the steps click and only show the form that is currently being focused. When a different step gets selected, we can restore the form using the sid and it should restore all data from its internal drive.

This is great. ...but, what you describe as program should be the "coordintor" and program should just one more thing the "coordinator" coordinates between :-)

[MuhammadAzim01]

Tasks

• @input 📦 StepsWizard v0.0.3
• @input 📦 Feedback
• Confirm Button Visible at completion of all steps - 30min
• View and restrict input Form of all steps. - 1hr 30 min
• Automatic Show Form at first active step -5min
  • @output 📦 StepsWizard v0.0.4
  • @output 📦 WebPage

Worklog

Worklog 4

Proposal

• Architecture and Dependent Step Error Generation
  • @input 📦 StepsWizard v0.0.4
  • Follow Clean Architecture Code Fix
  • Add arrows at immediate steps
  • Show error if previous dependent step gets changed.
  • @output 📦 StepsWizard v0.0.5

[serapath]

feedback 2025.07.13

So the ui-components preview page has a menu where you can select the specific component(s) you worked on and that hides all the others and that will add some url params and you can share that url and use it in your worklog as output, so when i click it, it opens the preview page showing only the relevant components and not all. That would be helpful in the future :-)

Additionally, you have ignored the previous feedback of not using program.js to require the components and you still do

const quick_actions = require('quick_actions')
const actions = require('actions')
const form_input = require('form_input')
const steps_wizard = require('steps_wizard')
const input_test = require('input_test')

Can you please start changing the architecture to what was discussed on discord. Maybe copy or make yourself notes in a hackmd and link that as an output from here if you must https://discord.com/channels/859134561018839060/1391076260855418931/1392079025437937665 ...but otherwise, just directly start doing that architecture and if you dont understand some details or how to solve it, lets discuss further please.

I even added the diagrams as you requested, but you didnt even give any feedback on it or whether things are now clear or not, but instead you just continue and ignore it. I think communication has to improve a lot to talk about what is clear and what isnt and how can we improve and not ignore or maybe just forget to do specific things. Thats why we are supposed to take notes and follow the task management system to write down all tasks so we dont forget them.

Other than that, the UI and how it works and looks at the moment seems fine. Still, the program.js is now doing a lot of tasks that have nothing to do with the forms or program and are supposed to be handled by some sort of "manager" component (maybe that will be the job of the "taskbar" component.

[MuhammadAzim01]

Tasks

• @input 📦 StepsWizard v0.0.4
• @input 📦 Archiecture Diagram
• Introduce Steps wizard as subcomponent of quick actions - 1hr 15min
• Create a manager.js file and restore protocol communication of existing flow - 2hr 20 min
• Adjust Program.js with its protocol(send actions data and print result with selected action) -45 min
• Add Command List functionality based on actions loaded. - 30 min
• Add Worklog and Issue Comment - 15 min
  • @output 📦 StepsWizard v0.0.5
  • @output 📦 WebPage

Worklog

Worklog 5

Proposal

[serapath]

feedback 2025.07.23
Looks relatively okay, thank you.

Just the formatting isnt always compatible with standardjs + snake_case, so if you could npm install standardx --save-dev and use package.json to configure it to ignore camelCase so you can use "snake_case" naming, that would improve things a bit.

Also, here another minor example of how to improve the coding to be more in line to our best practices in general :-)

Instead you could do:

  // ...
  const on = { filter_actions, send_selected_action, load_actions }
  return el
  function onmessage ({ type, data }) { (on[type] || fail)(data, type) }
  function filter_actions (data, type) {
    // ... this function is renamed from `filter(...)`
  }
  function load_actions (data, type) {
    // ... this function is renamed from `handleLoadActions(...)`
  }
  function send_selected_action (data, type) {
    // ...this function already exists :-)
  }
  // ...

regarding architecture

It's supposed to be structured like this

• "manager"
  • program1
  • program2
  • program3
  • ...
  • actionbar
    • quickactions
    • commandlist
    • stepswizard

But i noticed, that the "manager" requires form_input and input_test directly.
Also it requires actions directly and quickactions ...but it should instead probably require actionbar, which internally has quickactions and actions :-)

The program defines what actions it supports and knows the forms it needs, so those forms should be part of the program component, e.g.

// program.js
const form_input = require('form-input')
const input_test = require('input-test')

program.form_input = form_input
program.input_test = input_test

module.exports = program

function program (sid) {
  // ...
}

So that "manager" can do

const program = require('program')


const { form_input, input_test } = program

// ...

const element = program(sid)

Also, the quick_actions is internally requiring the steps_wizard, but i do think that is not okay, because the actionbar component should reuqire steps_wizard and both, quick-actions and actions ...the action input field with the commandlist can trigger a step-wizard ...the "actionbar" is just the component which manages everything related to actions, thus:

• actions
• quick actions
• steps wizard
• commandlist
• ....

Also, inside the quick-actions component, there is an onmessage function and here the same feedback applies as above... in one case you uses a switch... statement and here you use the if/else list, but in both cases, you can do it like the code snippet i showed above, to make things a lot more concise and standardized to our best practices :-)

When everything gets updated, one super important test is to open a menu and fill things out and whatever is the state of things ...just in between RELOAD the page and make sure everything gets restored to the exact state from before the reload - if it doesnt, then some UI state and values were not properly saved and/or restored from the sdb and it needs fixing :-)

[MuhammadAzim01]

Tasks

• @input 📦 StepsWizard v0.0.5
• Introduce Action as subcomponent of actions bar with clean code - 1hr 10 min
• Introduce Quick Action as subcomponent of actions bar with clean code - 1hr 15 min
• Introduce Steps Wizard as subcomponent of actions bar with clean code - 1hr
• Introduce Action bar as subcomponent of manager with clean code - 1hr 30min
• Retain Form Input data - 30 min
• Retain Selected Action data - 45 min
• Add Worklog and Issue Comment - 15 min
  • @output 📦 StepsWizard v0.0.6
  • @output 📦 WebPage

Worklog

Worklog 6

Proposal

[serapath]

feedback 2025.07.26

Noticed, that if i delete some characters from the first step after it is marked as okay because it is longer than 11 characters, it does not go back to invalid or whatever... it just stays completed.

Also, another general styling issue is, that the actionbar should always be sticking to the bottom of the view and the forms open in the space above it - maybe a minor thing that could be fixed too.

---

Generally though, the preview does not show the error you described on discord, so it is hard for me to tell how to help or to debug it for real.

From the worklog video i can defintely say it is not okay for the "manager" to require the forms. The reason is maybe a bit abstract or difficult to understand for now, but basically, the user will be able to install all kinds of new apps at runtime - similar to how you install apps from an appstore on your phone and there is no way that our manager can know all programs with all forms out there and the ones peopel will only program in the future - that is why every app has to bring with them their own "form" components which it describes in its own "action json" - which is then used by our step wizard to trigger loading or showing the forms.

So we can't get around that and have to solve it.

[MuhammadAzim01]

Tasks

• @input 📦 StepsWizard v0.0.6
• Fix Import forms from program in manger - 30 min
• Add Error display to steps in case of form gets incomplete - 45 min
• Add Worklog and Issue Comment - 15 min
  • @output 📦 StepsWizard v0.0.7
  • @output 📦 WebPage

Worklog

Worklog 7

Proposal

[MuhammadAzim01]

Tasks

• @input 📦 StepsWizard v0.0.7
• Add horizontal scroll navigation arrows - 35 min
• Create fade edge indicators for overflow content - 20 min
• Setup JavaScript scroll detection and arrow visibility logic - 1hr 15min
• Add smooth scrolling behavior and click handlers - 30 min
• Add Worklog and Issue Comment - 15 min
  • @output 📦 StepsWizard v0.0.8
  • @output 📦 WebPage

Worklog

Worklog 8

Proposal