📎 Add storybook helper components and improve current stories

frontend/src/app/main/ui/ds.cljs

@@ -17,4 +17,6 @@
        ;; meta / misc
        :meta #js {:icons icon-list :svgs raw-svg-list}
        :storybook #js {:StoryGrid sb/story-grid*
+                       :StoryGridCell sb/story-grid-cell*
+                       :StoryHeader sb/story-header*
                        :StoryWrapper sb/story-wrapper*}})

frontend/src/app/main/ui/ds/foundations/icon.stories.jsx

@@ -2,7 +2,8 @@ import * as React from "react";
 import Components from "@target/components";
 
 const { Icon } = Components;
-const { StoryWrapper, StoryGrid } = Components.storybook;
+const { StoryWrapper, StoryGrid, StoryGridCell, StoryHeader } =
+  Components.storybook;
 const { icons } = Components.meta;
 
 export default {
@@ -17,23 +18,32 @@ const iconList = Object.entries(icons)
 export const AllIcons = {
   render: () => (
     <StoryWrapper theme="default">
-      <h1>All Icons</h1>
+      <StoryHeader>
-      <p>Hover on an icon to see its ID</p>
+        <h1>All Icons</h1>
+        <p>Hover on an icon to see its ID</p>
+      </StoryHeader>
       <StoryGrid>
         {iconList.map((iconId) => (
-          <div title={iconId} key={iconId}>
+          <StoryGridCell
+            title={iconId}
+            key={iconId}
+            style={{ color: "var(--color-accent-primary)" }}
+          >
             <Icon icon={iconId} />
-          </div>
+          </StoryGridCell>
         ))}
       </StoryGrid>
     </StoryWrapper>
   ),
+  parameters: {
+    backgrounds: { disable: true },
+  },
 };
 
 export const Default = {
   render: () => (
     <StoryWrapper theme="default">
-      <Icon icon="pin" />
+      <Icon icon={icons.Pin} />
     </StoryWrapper>
   ),
 };
@@ -41,7 +51,7 @@ export const Default = {
 export const Small = {
   render: () => (
     <StoryWrapper theme="default">
-      <Icon icon="pin" size="s" />
+      <Icon icon={icons.Pin} size="s" />
     </StoryWrapper>
   ),
 };

frontend/src/app/main/ui/ds/foundations/raw_svg.stories.jsx

@@ -2,7 +2,8 @@ import * as React from "react";
 import Components from "@target/components";
 
 const { RawSvg } = Components;
-const { StoryWrapper, StoryGrid } = Components.storybook;
+const { StoryWrapper, StoryGrid, StoryGridCell, StoryHeader } =
+  Components.storybook;
 const { svgs } = Components.meta;
 
 export default {
@@ -16,28 +17,30 @@ const assetList = Object.entries(svgs)
 
 export const AllAssets = {
   render: () => (
-    <StoryWrapper theme="default">
+    <StoryWrapper theme="light">
-      <h1>All assets</h1>
+      <StoryHeader>
-      <p>Hover on a asset to see its id.</p>
+        <h1>All assets</h1>
+        <p>Hover on a asset to see its id.</p>
+      </StoryHeader>
 
       <StoryGrid size="200">
-        {assetList.map(x => (
+        {assetList.map((x) => (
-          <div key={x} title={x}>
+          <StoryGridCell key={x} title={x}>
-            <RawSvg asset={x} style={{maxWidth: "100%"}} />
+            <RawSvg asset={x} style={{ maxWidth: "100%" }} />
-          </div>
+          </StoryGridCell>
         ))}
       </StoryGrid>
     </StoryWrapper>
   ),
   parameters: {
-    backgrounds: { default: "debug" }
+    backgrounds: { values: [{ name: "debug", value: "#ccc" }] },
-  }
+  },
-}
+};
 
 export const Default = {
   render: () => (
     <StoryWrapper theme="default">
-      <RawSvg asset="brand-gitlab" width="200" />
+      <RawSvg asset={svgs.BrandGitlab} width="200" />
     </StoryWrapper>
   ),
-}
+};

frontend/src/app/main/ui/ds/storybook.cljs

@@ -24,6 +24,24 @@
 
 (mf/defc story-grid*
   {::mf/props :obj}
-  [{:keys [children size]}]
+  [{:keys [children size style] :rest other}]
-  [:article {:class (stl/css :story-grid)
+  (let [class (stl/css :story-grid)
-             :style (when (some? size) #js {"--component-grid-size" (dm/str size "px")})} children])
+        size (or size 16)
+        style (or style {})
+        style (mf/spread style :--component-grid-size (dm/str size "px"))
+        props (mf/spread-props other {:class class :style style})]
+    [:> "article" props children]))
+
+(mf/defc story-grid-cell*
+  {::mf/props :obj}
+  [{:keys [children] :rest other}]
+  (let [class (stl/css :story-grid-cell)
+        props (mf/spread-props other {:class class})]
+    [:> "article" props children]))
+
+(mf/defc story-header*
+  {::mf/props :obj}
+  [{:keys [children] :rest other}]
+  (let [class (stl/css :story-header)
+        props (mf/spread-props other {:class class})]
+    [:> "header" props children]))

frontend/src/app/main/ui/ds/storybook.scss

@@ -10,8 +10,12 @@
   grid-template-columns: repeat(auto-fit, var(--component-grid-size, 16px));
   gap: 1rem;
   color: var(--color-foreground-primary);
-
+}
-  & > * {
+
-    max-width: 100%;
+.story-grid-cell {
-  }
+  max-width: 100%;
+}
+
+.story-header {
+  color: var(--color-foreground-primary);
 }