Add storybook

[MikeTschudi]

A review-only PR for adding storybook.js to the repo created because components are rendered as text instead of components in the storybook.

It includes a component--arcgis-hub-input-color--copied exactly from hub-components because it contains a known working story. This story is rendered as

in this repo instead of

as it is rendered in the hub-components storybook.

Only one solutions-components component has a story at this time: solution-item-icon has a trivial story that works when the component is added to the hub-components repo on my computer.

Inside React, components in this repo are handled as HostText instead of HostComponent. As a result, they're added to the storybook as a text block:

All development of components and storybook in this repo has been done using Windows 10 computers. Volta was upgraded from 1.0.1 to the latest (1.0.5), and node/npm adjusted to use the latest LTS node and the npm that goes with it. The storybook material was copied from hub-components and modified, and there are library differences between the two repos since I also updated many libraries to their latest versions trying to get this to work.

Thank you, @ajturner & @jmhauck, for offering to look at this!

[ajturner]

Looking at this but no luck so far.

I think this is related to why the component isn't rendering in the Addon-Docs either

/cc @tomwayson @mjuniper

[tannerjt]

@MikeTschudi - I was able to get the preview to work by changing the compiler options in tsconfig-base.json to use es2017 instead of es2020:

{
  "compilerOptions": {
    "lib": ["dom", "es2017"],
    "target": "es2017"
  }
}

[MikeTschudi]

Thank you @tannerjt! @jmhauck, would you please try this change? It would be great to verify that this problem is only on my computer since that fix doesn't change my display.

[tannerjt]

@jmhauck -> For verifying, I tried to change back to es2020 to and build and it still worked... so I suspect the step for me that fixed this issue was probably related to changing my volta config in package.json. Here is what I had changed it to for testing (deleting node_modules and re-doing npm install). When I did this locally, I encountered an issue with npm run storybook, but for whatever reason, building the packages with the node/npm version below may have been what actually fixed the issue.

"volta": {
    "node": "14.17.0",
    "npm": "6.14.13"
  }

[jmhauck]

@tannerjt thanks for the suggestions...but I'm getting errors after npm install when building the storybook when I use this.

[MikeTschudi]

I deleted dist & .storybook-static in case caching is a factor, reset to es2017, node 14.17.0, & npm 6.14.13. Build fails with missing references, and so I installed @esri/arcgis-rest-service-admin, @esri/hub-common, & @esri/hub-sites. Finally, had to move arcgis-rest-js, calcite-components, hub.js, and solution.js from peerDependencies to dependencies.

And it works! Thank you, @tannerjt!

(The components continue to work, too! ;-) )

[tomwayson]

Seems like you should not have had to move them to from peerDependencies to dependencies if they were in devDependencies, so I'm surprised that's what made it work.

[tomwayson]

looks like most (if not all) of these are in dependencies, so leaving them here as well will only cause pain and suffering (mismatched versions). You only need them as devDependencies if they are peerDependencies.

[MikeTschudi]

I hadn't added the new packages to devDependencies; fixed

[tomwayson]

probably best not to use the dist-custom-elements-bundle here, see the changes I made to the Hub Storybook

[MikeTschudi]

Having trouble with these changes: nothing appears for arcgis-hub-input-color yet; tinkering

[mjuniper]

The only thought that comes to mind off the top of my head is that that component leans heavily on calcite-components.