Integrating Storybook

[mrmchughes]

I've installed Storybook on my fork, and will start work on the Storybook tutorial. Is there a specific small component or something similar that we need converted over that would make for a good starting point?

[thadk]

Thanks Michael. Let's talk to the UX team for wishlist on Storybook to understand how they'd imagine it.

As a starting point any of the pieces of the design could be a good test component.

We have some components already in the components/ui/heat folder I think but they’re not very intricate yet state-wise, the situation where Storybook becomes pretty helpful . An ideal test could have some detailed state. Maybe a row of the table they’ve designed. Welcome to chat or ask the UX/design team for ideas.

[thadk]

I got it running with npm run storybook

I also ran npm run build-storybook and it put a static version into the heat-stack/storybook-static folder. Maybe as an enhancement you could change the target of this so it goes into public/heat-stack/storybook-static and make sure we're running that build command in the Dockerfile after the main build. Then when we merge this, we'll get Storybook at https://heat-stack.fly.io/storybook-static .

[mrmchughes]

Figuring the wishlist out with the UX team sounds great. Still working on the tutorial, I want to make sure I understand the fundamentals before I start working on our more complex compents.

[thadk]

Please try to get the storybook-static working as described above before converting to full non-draft PR.

[mrmchughes]

Hi Thad, I think I may have made some progress on this, but also running into a bug. When I run npm run build-storybook, I get an error in my terminal Error: Cannot copy './public' to a subdirectory of itself, './public/heat-stack/storybook-static/'.. It does seem to make a directory within public like you wanted though, so I'm not sure.

[mrmchughes]

I'm also getting an error from ESLint when I push a commit, I'm not sure why. This is what I've been using CLI options

[thadk]

Ah sorry @mrmchughes , I made a typo. public folder is inside heat-stack.

Please add your storybook-static folder to .eslintignore to solve the linter error on the autogenerated files: https://github.com/codeforboston/home-energy-analysis-tool/blob/main/heat-stack/.eslintignore

[mrmchughes]

I solved the Linter issue. I'm confused on how to get storybook-build pointed at the directory you want, since whenever I attempt to run the command with the -o modifier it seems to not work as intended. CLI Options

I have also attempted to modify the staticDirs in .storybook/main.ts, and this did not work.

[thadk]

@mrmchughes Good start. I saw the warning you mentioned.

Once I changed the staticDirs: [] in .storybook/main.ts, npm run build-storybook seems to work without any warnings now. Can you please update the PR with that change ~and also resolve the broken test~?

When I did a local git rebase main (don't forget to pull the latest main before you do it), the conflict issue with package.json and package-lock were resolved without further input from me. Hopefully you find the same.

We must all use http://localhost:3000/storybook-static/index.html , explicitly adding index.html as it does not get forwarded to that automatically.

``` home-energy-analysis-tool/heat-stack on  mrmchughes-main [$!?] via ⬢ v20.11.0 ➜ npm run build-storybook > build-storybook > storybook build -o public/storybook-static @storybook/cli v7.6.10 info => Cleaning outputDir: /public/storybook-static info => Loading presets info => Building manager.. info => Manager built (157 ms) info => Building preview.. info => Copying static files: /Users/thadk/gitrepos/home-energy-analysis-tool/heat-stack/node_modules/@storybook/manager/static at /Users/thadk/gitrepos/home-energy-analysis-tool/heat-stack/public/storybook-static/sb-common-assets The CJS build of Vite's Node API is deprecated. See https://vitejs.dev/guide/troubleshooting.html#vite-cjs-node-api-deprecated for more details. vite v5.0.4 building for production... ./sb-common-assets/fonts.css doesn't exist at build time, it will remain unchanged to be resolved at runtime node_modules/telejson/dist/index.mjs (1413:15) Use of eval in "node_modules/telejson/dist/index.mjs" is strongly discouraged as it poses security risks and may cause issues with minification. node_modules/telejson/dist/index.mjs (1416:18) Use of eval in "node_modules/telejson/dist/index.mjs" is strongly discouraged as it poses security risks and may cause issues with minification. ✓ 585 modules transformed. (!) The public directory feature may not work correctly. outDir /Users/thadk/gitrepos/home-energy-analysis-tool/heat-stack/public/storybook-static and publicDir /Users/thadk/gitrepos/home-energy-analysis-tool/heat-stack/public are not separate folders. public/storybook-static/assets/context-tKiKnkuP.png 6.12 kB public/storybook-static/assets/styling-ZOs40c1G.png 7.24 kB public/storybook-static/iframe.html 12.77 kB │ gzip: 3.59 kB public/storybook-static/assets/docs-Pvr7BWzI.png 27.88 kB public/storybook-static/assets/share-xgPlHEHy.png 40.77 kB public/storybook-static/assets/accessibility-Fv4dmnDm.png 42.34 kB public/storybook-static/assets/figma-plugin-h9oRC4jr.png 44.25 kB public/storybook-static/assets/theming--liSzaFj.png 44.37 kB public/storybook-static/assets/testing-HG80fZfa.png 49.31 kB public/storybook-static/assets/addon-library-VlAgJsjc.png 467.37 kB public/storybook-static/assets/Header-Yyx952jD.css 0.51 kB │ gzip: 0.30 kB public/storybook-static/assets/Button-X8hm4PDT.css 0.52 kB │ gzip: 0.29 kB public/storybook-static/assets/Page-fZ7a-HXz.css 0.93 kB │ gzip: 0.40 kB public/storybook-static/assets/preview-mEb2NEJf.js 0.15 kB │ gzip: 0.15 kB public/storybook-static/assets/index-guxbp9UN.js 0.21 kB │ gzip: 0.17 kB public/storybook-static/assets/_commonjsHelpers-5-cIlDoe.js 0.24 kB │ gzip: 0.18 kB public/storybook-static/assets/WithTooltip-V3YHNWJZ-GwSZL96B.js 0.36 kB │ gzip: 0.22 kB public/storybook-static/assets/syntaxhighlighter-V7JZZA35-WPBhCczG.js 0.38 kB │ gzip: 0.24 kB public/storybook-static/assets/index-I8O4U1tp.js 0.49 kB │ gzip: 0.31 kB public/storybook-static/assets/react-18-sFOusbzT.js 0.55 kB │ gzip: 0.34 kB public/storybook-static/assets/preview-VI2eoWmp.js 0.64 kB │ gzip: 0.44 kB public/storybook-static/assets/Button.stories-0iga8zI1.js 0.68 kB │ gzip: 0.42 kB public/storybook-static/assets/preview-FeMd6tr7.js 0.71 kB │ gzip: 0.41 kB public/storybook-static/assets/index-PPLHz8o0.js 0.77 kB │ gzip: 0.47 kB public/storybook-static/assets/Header.stories-hb6q8xUr.js 0.84 kB │ gzip: 0.44 kB public/storybook-static/assets/preview-bEa2SesL.js 0.86 kB │ gzip: 0.55 kB public/storybook-static/assets/jsx-runtime-FAfywPN3.js 0.97 kB │ gzip: 0.61 kB public/storybook-static/assets/entry-preview-PSo23f1w.js 1.15 kB │ gzip: 0.67 kB public/storybook-static/assets/Button-Uo63IcyS.js 1.45 kB │ gzip: 0.62 kB public/storybook-static/assets/DocsRenderer-NNNQARDV-k_y9uV3O.js 1.45 kB │ gzip: 0.76 kB public/storybook-static/assets/Header-OOaRiEC9.js 1.52 kB │ gzip: 0.72 kB public/storybook-static/assets/index-ogXoivrg.js 2.59 kB │ gzip: 1.26 kB public/storybook-static/assets/preview-wm7zCcxo.js 3.21 kB │ gzip: 1.37 kB public/storybook-static/assets/iframe-qppWRlR7.js 4.71 kB │ gzip: 1.82 kB public/storybook-static/assets/preview-OnO0tzRj.js 5.23 kB │ gzip: 2.41 kB public/storybook-static/assets/index-XiNr8FW2.js 7.16 kB │ gzip: 2.91 kB public/storybook-static/assets/preview-u8M_OEO2.js 7.62 kB │ gzip: 1.55 kB public/storybook-static/assets/preview-MdQXpms2.js 8.28 kB │ gzip: 3.17 kB public/storybook-static/assets/Configure-WbjAQq7r.js 25.43 kB │ gzip: 11.05 kB public/storybook-static/assets/Color-6VNJS4EI-7giFKZTh.js 30.98 kB │ gzip: 11.71 kB public/storybook-static/assets/preview-37XjEtlT.js 72.07 kB │ gzip: 24.41 kB public/storybook-static/assets/index-mLPG47JP.js 78.40 kB │ gzip: 23.55 kB public/storybook-static/assets/index-9vG4XYWr.js 134.05 kB │ gzip: 43.21 kB public/storybook-static/assets/entry-preview-docs-Zsivb1kh.js 322.56 kB │ gzip: 100.03 kB public/storybook-static/assets/index-dzAlpN1l.js 537.60 kB │ gzip: 175.90 kB public/storybook-static/assets/Page.stories-CM5N41JH.js 563.10 kB │ gzip: 149.73 kB public/storybook-static/assets/formatter-SWP5E3XI-nxg7nF0h.js 601.56 kB │ gzip: 186.20 kB (!) Some chunks are larger than 500 kB after minification. Consider: - Using dynamic import() to code-split the application - Use build.rollupOptions.output.manualChunks to improve chunking: https://rollupjs.org/configuration-options/#output-manualchunks - Adjust chunk size limit for this warning via build.chunkSizeWarningLimit. ✓ built in 6.74s info => Preview built (7.28 s) info => Output directory: /Users/thadk/gitrepos/home-energy-analysis-tool/heat-stack/public/storybook-static ```