Add Storybook support #55

kentookura · 2022-12-23T11:12:44Z

When using ui-core as a dependency for a storybook, vite does not load the styles unless all import declarations are on top.

When using ui-core as a dependency for a storybook, vite complains about when imports are not on top of the file.

yoching · 2022-12-23T12:34:17Z

I’m not sure if it’s a good idea to put these into ui-core repository, as it will make dependency management complicated, especially because it introduces vite. I think it’s better to keep ui-core as simple as possible, preferably keeping the dependency only on Elm things.
Also, the storybook implementation is in its very early stage, I think it's too early to integrate here. A bit more exploration, such as adding more complicated components, will be necessary before deciding how to integrate it well.

yoching · 2022-12-23T12:36:37Z

On the other hand, it would be nice to merge the change in ui.css (moving @imports to the top of the file), if it doesn't break any other parts of the UI.

kentookura · 2022-12-23T13:30:34Z

I moved all the storybook stuff into its own directory with separate elm.json and package.json files. Vite is now a dependency for running storybook but since we use elm-git, we can use ui-core in local-ui without vite and storybook.

My code formatter reformatted elm.json but no real changes were made. Should we agree on a common formatting config for the javascript stuff?

kentookura · 2022-12-23T14:31:22Z

storybook/.storybook/main.js

+    // Automatically creates stories from .elm files
+    config.plugins.push(StorybookElmPlugin());
+    return mergeConfig(config, {
+      server: { fs: { allow: [".."] } },


This allows vite to load the required fonts. Any further configuration to the build process goes here

kentookura · 2022-12-23T14:32:48Z

storybook/elm.json

+{
+    "type": "application",
+    "source-directories": [
+        "../src",


Allows us to use ui-core without elm-git

yoching

It seems that components in elm-storybook directory are not used. What are those for?

yoching · 2022-12-30T14:16:46Z

storybook/src/Storybook/Story.elm

+stateless options =
+    Browser.element
+        { init = \() -> ( (), Cmd.none )
+        , update = \msg model -> ( model, Cmd.none )


I think it's nice to keep logAction here so that actions appear on the storybook UI.
https://github.com/yoching/unison-ui-core-storybook/blob/main/src/Storybook/Story.elm#L18

I added it again. I needed to add the keyword port to the module declaration to make it work

yoching · 2022-12-30T14:17:06Z

storybook/src/Storybook/Story.elm

+sandbox options =
+    Browser.element
+        { init = \() -> ( options.init, Cmd.none )
+        , update = \msg model -> ( options.update msg model, Cmd.none )


hojberg

Sorry for being super slow on this. Really awesome work! 🎉

Would it be possible to use webpack instead of vite here? We use webpack everywhere else, and I'm not sure I'm ready to take to time to switch.

hojberg · 2023-01-26T15:02:14Z

elm.json

+  },
+  "test-dependencies": {
+    "elm-explorations/test": "1.2.0 <= v < 2.0.0"
+  }


Can we "unformat" this file? Elm manages it and will re-format on the next elm install I believe, which will add a bit of commit noise

hojberg · 2023-01-26T15:02:38Z

src/css/ui.css

+@import "./ui/animations.css";
+@import "./ui/components.css";
+@import "./ui/page-layout.css";
+


hojberg · 2023-01-26T15:03:30Z

storybook/.storybook/storybook-elm/addon/register.js

+        paramKey: "elm-source",
+        render: ({ active, key }) => {
+            return (active)
+                ? React.createElement(StoryPanel, { className: "banana", key, api }, null)


whats "banana" for?

This comes from here

I'll have a closer look at what parts of the code are holdovers from the example

hojberg · 2023-01-26T15:04:16Z

storybook/.storybook/storybook-elm/plugin.js

+            }
+        }
+    }
+})


I think we want to run prettier on the js files.

hojberg · 2023-01-26T15:05:58Z

storybook/src/Util.elm

+
+col : List (Attribute msg) -> List (Html msg) -> Html msg
+col attrs children =
+    Html.div (Html.Attributes.class "col" :: attrs) children


I think this is useful enough to be added to either a new UI.Layout module or just as a function on the UI module.

kentookura · 2023-01-27T20:54:33Z

It's certainly possible. The example we used as reference uses the vite builder for storybook, see here
I'll try to get it to work with the webpack builder

yoching · 2023-01-31T11:58:33Z

I tried webpack first but didn't find a way to make it work.

hojberg · 2023-03-27T18:58:56Z

Closing this since we got the webpack version merged. Thank you so much both!

kentookura added 2 commits December 23, 2022 12:11

Move imports to top of file

2d0eb84

When using ui-core as a dependency for a storybook, vite complains about when imports are not on top of the file.

add storybook

cf306f5

kentookura changed the title ~~Move imports to top of file~~ Add Storybook support Dec 23, 2022

fix package.json (missing dependencies)

ee8422a

kentookura added 6 commits December 23, 2022 14:09

move storybook into dedicated directory

3249dce

remove images

6e68637

further cleanup

f0ad41a

further cleanup

c10db68

further cleanup

ecf9bf0

further cleanup

e1870c6

kentookura added 2 commits December 23, 2022 14:35

rename module to avoid name clashing

f974976

edit storybook config so that all fonts can be loaded

70cf545

kentookura commented Dec 23, 2022

View reviewed changes

storybook/elm.json

{

"type": "application",

"source-directories": [

"../src",

Copy link

Author

kentookura Dec 23, 2022

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Allows us to use ui-core without elm-git

yoching reviewed Dec 30, 2022

View reviewed changes

kentookura added 2 commits December 30, 2022 16:04

add logAction

36c862a

Merge branch 'unisonweb:main' into patch-1

7c49359

hojberg reviewed Jan 26, 2023

View reviewed changes

yoching mentioned this pull request Mar 13, 2023

Storybook integration using webpack #58

Merged

hojberg closed this Mar 27, 2023

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Add Storybook support #55

Add Storybook support #55

kentookura commented Dec 23, 2022 •

edited

Loading

yoching commented Dec 23, 2022

yoching commented Dec 23, 2022

kentookura commented Dec 23, 2022

kentookura Dec 23, 2022

kentookura Dec 23, 2022

yoching left a comment

yoching Dec 30, 2022

kentookura Dec 30, 2022

yoching Dec 30, 2022

hojberg left a comment •

edited

Loading

hojberg Jan 26, 2023

hojberg Jan 26, 2023

hojberg Jan 26, 2023

kentookura Jan 27, 2023

kentookura Jan 27, 2023

hojberg Jan 26, 2023

hojberg Jan 26, 2023

kentookura commented Jan 27, 2023

yoching commented Jan 31, 2023

hojberg commented Mar 27, 2023

Add Storybook support #55

Add Storybook support #55

Conversation

kentookura commented Dec 23, 2022 • edited Loading

yoching commented Dec 23, 2022

yoching commented Dec 23, 2022

kentookura commented Dec 23, 2022

Choose a reason for hiding this comment

Choose a reason for hiding this comment

yoching left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

hojberg left a comment • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

kentookura commented Jan 27, 2023

yoching commented Jan 31, 2023

hojberg commented Mar 27, 2023

kentookura commented Dec 23, 2022 •

edited

Loading

hojberg left a comment •

edited

Loading