chore : Storybook-addon-baseline : Added css in the addon directly, m…

…ade it configurable, improved docs (#103)

* Added css in the addon

* Cleanup and docs

* Typo

* ESM only note

* Add baseline addon as a dep of the react core UI

* formatting

---------

Co-authored-by: Julie Muzina <[email protected]>

packages/ds-react-core/package.json

@@ -32,6 +32,7 @@
     "storybook": "storybook dev -p 6006 --no-open --host 0.0.0.0"
   },
   "dependencies": {
+    "@canonical/storybook-addon-baseline-grid": "^0.4.1-experimental.0",
     "@canonical/styles": "^0.4.1-experimental.0",
     "react": "^19.0.0",
     "react-dom": "^19.0.0"

packages/ds-react-core/src/index.css

@@ -1 +1,6 @@
 @import url("@canonical/styles");
+
+:root {
+  --baseline-height: .5rem;
+  --baseline-grid-color: orange;
+}

packages/storybook-addon-baseline-grid/README.md

@@ -2,7 +2,45 @@
 
 Displays the baseline grid overlay in the Storybook preview.
 
-### Development scripts
+## Usage 
+
+### Installation
+
+```bash
+npm install @canonical/storybook-addon-baseline-grid
+```
+
+In your `.storybook/main.js` file, add the following:
+
+```js
+module.exports = {
+  addons: ['@canonical/storybook-addon-baseline-grid'],
+};
+```
+
+Please note that this addon does rely on ESM only and does not have a cjs build at all. This means you need a version of node >= 20 and a modern browser to use it.
+
+### Configuration
+
+By default the baseline uses defaults for the following css variables:
+
+```css
+:root {
+  --baseline-grid-color: rgba(255, 0, 0, 0.2);
+  --baseline-grid-height: .5rem;
+}
+```
+
+By providing yours in `:root` you can override these defaults, for instance 
+
+```css
+:root {
+  --baseline-grid-color: rgba(0, 0, 255, 0.2);
+  --baseline-grid-height: 1rem;
+}
+```
+
+## Development
 
 - `bun run start` runs babel in watch mode and starts Storybook
 - `bun run build` builds and packages the addon
@@ -12,15 +50,10 @@ Displays the baseline grid overlay in the Storybook preview.
 The addon logic lives mostly in following files:
 
 - `src/components/Tool.tsx` - component that renders the addon button in the toolbar and toggles the global variable that enables the baseline grid overlay
-- `src/withBaselineGrid.ts` - decorator that adds a `show-baseline-grid` CSS class name to the story based on global state
+- `src/withBaselineGrid.ts` - decorator that adds a `with-baseline-grid` CSS class name to the story based on global state The grid look is an internally defined css class that is added to the story preview iframe, and defined in this file.
 - `/src/manager.tsx` - registers the addon with Storybook manager and handles in what state of Storybook addon is enabled
 - `/src/preview.tsx` - registers the decorator with Storybook preview
 
-Current addon implementation relies on `show-baseline-grid` CSS class name being provided by the CSS (for example using our styles package).
-
-Current implementation lives in [`baseline-grid.css`](
-https://github.com/canonical/ds25/blob/main/packages/styles/src/baseline-grid.css). The size of the grid can be adjusted by changing the `--sp-unit` CSS variable.
-
 ### Storybook Addon Kit README
 
 This addon was created using the Storybook Addon Kit.

packages/storybook-addon-baseline-grid/src/preset.ts

@@ -1,3 +1,5 @@
+// This entry is a node-specific file, contrary to the other files in this folder which are made to be loaded in the browser.
+
 // You can use presets to augment the Storybook configuration
 // You rarely want to do this in addons,
 // so often you want to delete this file and remove the reference to it in package.json#exports and package.json#bunder.nodeEntries

packages/storybook-addon-baseline-grid/src/withBaselineGrid.ts

@@ -10,11 +10,53 @@ export const withBaselineGrid = (StoryFn: StoryFunction<Renderer>) => {
   const [globals] = useGlobals();
   const myAddon = globals[KEY];
 
+  const utilityClassName = "with-baseline-grid";
+  const utilityTagId = "baseline-grid-style";
+  const color = "rgba(255, 0, 0, 0.2)";
+  const defaultHeight = "0.5rem";
+
+  const styleElement = `
+  :root {
+    --addon-baseline-grid-color: var(--baseline-grid-color, ${color});
+    --addon-baseline-height: var(--baseline-height, ${defaultHeight});
+  }
+  .${utilityClassName} {
+    position: relative;
+  
+    &::after {
+      background: linear-gradient(
+        to top,
+        var(--addon-baseline-grid-color),
+        var(--addon-baseline-grid-color) 1px,
+        transparent 1px,
+        transparent
+      );
+      background-size: 100% var(--addon-baseline-height);
+      bottom: 0;
+      content: "";
+      display: block;
+      left: 0;
+      pointer-events: none;
+      position: absolute;
+      right: 0;
+      top: 0;
+      z-index: 200;
+    }
+  }
+  `;
+
   useEffect(() => {
+    const styleExists = global.document.getElementById(utilityTagId);
+    if (!styleExists) {
+      const style = global.document.createElement("style");
+      style.id = utilityTagId;
+      style.textContent = styleElement;
+      global.document.head.appendChild(style);
+    }
     if (myAddon) {
-      global.document.body.classList.add("show-baseline-grid");
+      global.document.body.classList.add(utilityClassName);
     } else {
-      global.document.body.classList.remove("show-baseline-grid");
+      global.document.body.classList.remove(utilityClassName);
     }
   }, [myAddon]);
 

packages/styles/src/index.css

@@ -8,6 +8,3 @@
 /* Foundations styling */
 @import url("./typography.css");
 @import url("./intents.css");
-
-/* Debugging utilities */
-@import url("./baseline-grid.css");