Add Stepper Component

[wwitzel3]

Add Stepper Component to Octant

• https://clarity.design/documentation/stepper

Deliverable

• Storybook entry that shows now this component will work with some mock data.
• An angular component.
• A Go component with a marshal/unmarshal implementation.

No server state, this is just the component.

[wwitzel3]

Storybook and Angular component are completed.

Left TODO:

• add the component to the content switcher ngFor
• implement the Go Marshal/Unmarshal.
• investigate why Props are not displaying for the stepper component in StoryBook

[wwitzel3]

@nanaasiedu pointed out that the Props are not rendering, this is something we will need to address as well.

[wwitzel3]

I'm struggling with Storybook and the component in general. Lots of console errors around the formBuilder. I am thinking I will revisit this using form templates instead? Maybe that will be a more friendly way in Angular to render a number of undetermined form elements from a config.

[wwitzel3]

I played with this some more yesterday, didn't make any direct headway, but I didn't find another project wanting to do something similar, essentially rendering form inputs on the fly.

I think, the trick is to stub out the formGroup sections with empty controls so it matches anything and then as we add elements we an add the control so it can match / validate.

[wwitzel3]

I managed to get the formGroup working by ensuring that config and items were both set before attempting to forLoop.
The only remaining issue is Props and Actions/Knobs on the story book pages are not displaying.

[wwitzel3]

I found why props were not displaying. Needed to be added to the compudoc tsconfig.
Final thing is figuring out what is causing the undefined error when using the Canvas.

vendors~main.87fc3cbf4a94149f9543.bundle.js:128046 ERROR TypeError: Cannot read property 'id' of undefined
    at StepperModel.push../node_modules/@clr/angular/fesm5/clr-angular.js.StepperModel.openFirstPanel (vendors~main.87fc3cbf4a94149f9543.bundle.js:124133)
    at StepperModel.push../node_modules/@clr/angular/fesm5/clr-angular.js.StepperModel.updatePanelOrder (vendors~main.87fc3cbf4a94149f9543.bundle.js:124075)
    at StepperService.push../node_modules/@clr/angular/fesm5/clr-angular.js.AccordionService.updatePanelOrder (vendors~main.87fc3cbf4a94149f9543.bundle.js:123622)
    at SafeSubscriber._next (vendors~main.87fc3cbf4a94149f9543.bundle.js:124476)
    at SafeSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.SafeSubscriber.__tryOrUnsub (vendors~main.87fc3cbf4a94149f9543.bundle.js:260151)
    at SafeSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.SafeSubscriber.next (vendors~main.87fc3cbf4a94149f9543.bundle.js:260089)
    at Subscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber._next (vendors~main.87fc3cbf4a94149f9543.bundle.js:260035)
    at Subscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber.next (vendors~main.87fc3cbf4a94149f9543.bundle.js:260012)
    at MergeMapSubscriber.push../node_modules/rxjs/_esm5/internal/operators/mergeMap.js.MergeMapSubscriber.notifyNext (vendors~main.87fc3cbf4a94149f9543.bundle.js:266093)
    at InnerSubscriber.push../node_modules/rxjs/_esm5/internal/InnerSubscriber.js.InnerSubscriber._next (vendors~main.87fc3cbf4a94149f9543.bundle.js:259225)

[nanaasiedu]

I dont get that exact error but I get this:
error: (5) ["Uncaught Error: Cannot find control with name: 'name'", "http://localhost:6006/vendors~main.48120a2af512e873cf20.bundle.js", 266721, 29, Error]
error: (2) ["ERROR", TypeError]
console: (2) ["%c./src/app/modules/shared/components/presentation/preferences/preferences.component.ts 112:50-61
"export 'Preferences' was not found in '../../../models/preference'
./src/app/modules/shared/components/presentation/preferences/preferences.component.ts 112:81-92
"export 'Preferences' was not found in '../../../models/preference'", "color: #999933;"]

Though I can edit the canvas and see the changes being applied

[wwitzel3]

I made some updates and pushed them up:

Still seeing the id error. The preference error is there on master, that's unrelated.
I think the name error is fixed now as well.

[mklanjsek]

The Cannot read property 'id' of undefined is most likely Storybook issue that shouldn't prevent merging this PR.

There is a whole class of similar storybook issues, for example this one:
storybookjs/storybook#7577

[wwitzel3]

thanks @mklanjsek I set the PR ready to review