@d3plus/docs 3.0.1 → 3.0.3

package/.storybook/main.js

@@ -13,19 +13,16 @@ module.exports = {
     "../packages/**/*.stories.@(mdx|js|jsx|ts|tsx)"
   ],
 
-  addons: [
-    getAbsolutePath("@storybook/addon-controls"), 
-    {
-      name: getAbsolutePath("@storybook/addon-docs"),
-      options: {
-        mdxPluginOptions: {
-          mdxCompileOptions: {
-            remarkPlugins: [remarkGfm],
-          },
+  addons: [{
+    name: getAbsolutePath("@storybook/addon-docs"),
+    options: {
+      mdxPluginOptions: {
+        mdxCompileOptions: {
+          remarkPlugins: [remarkGfm],
         },
       },
-    }
-  ],
+    },
+  }],
 
   framework: {
     name: getAbsolutePath("@storybook/nextjs"),
@@ -48,15 +45,19 @@ module.exports = {
     disableTelemetry: true, // 👈 Disables telemetry
     disableWhatsNewNotifications: true,
   },
-  
+
   webpackFinal: async (config) => {
     if (config.resolve) {
       
       const workspacePackages = glob.sync('../*/').reduce((aliases, folder) => {
         const name = path.basename(folder);
-        if (name !== "docs") aliases[`@d3plus/${name}`] = path.resolve(__dirname, "../", folder);
+        if (name !== "docs") {
+          const filename = name === "react" ? "index.jsx" : "index.js";
+          aliases[`@d3plus/${name}`] = path.resolve(__dirname, "../", folder, filename);
+        }
         return aliases;
       }, {});
+      console.log(workspacePackages);
 
       config.resolve.alias = {
         ...workspacePackages,

package/.storybook/manager.js

@@ -1,4 +1,4 @@
-import {addons} from "@storybook/manager-api";
+import {addons} from "storybook/manager-api";
 import theme from "./theme.js";
 
 addons.setConfig({

package/.storybook/preview-head.html

@@ -15,10 +15,6 @@
     padding: 2rem !important;
   }
 
-  .sbdocs-content {
-    max-width: calc(100% - 15rem) !important;
-  }
-
   /* kill margins */
   .docblock-argstable, /* control block */
   .sbdocs-preview { /* chart/code block */

package/.storybook/preview.jsx

@@ -1,5 +1,5 @@
 import React, {useContext, useMemo} from "react";
-import { Anchor, Canvas, Controls, Description, DocsContext, Subheading, Subtitle, Title } from '@storybook/blocks';
+import { Anchor, Canvas, Controls, Description, DocsContext, Subheading, Subtitle, Title } from '@storybook/addon-docs/blocks';
 import theme from "./theme.js";
 import stringify from "../helpers/stringify.js";
 import {D3plusContext} from "@d3plus/react";
@@ -15,7 +15,12 @@ const axisConfig = {
     stroke: gridColor
   },
   shapeConfig: {
-    fill: tickColor,
+    Circle: {
+      stroke: gridColor
+    },
+    Rect: {
+      fill: tickColor
+    },
     labelConfig: {
       fontColor: tickColor
     },

package/.storybook/theme.js

@@ -1,4 +1,4 @@
-import {create} from "@storybook/theming";
+import {create} from "storybook/theming";
 
 export default create({
 

package/docs/Accessibility.mdx

@@ -1,4 +1,4 @@
-import { Meta } from '@storybook/blocks';
+import { Meta } from '@storybook/addon-docs/blocks';
 
 <Meta title="Accessibility" />
 

package/docs/HomeChart.jsx

@@ -1,6 +1,6 @@
 import React from "react";
 import {Treemap} from "@d3plus/react";
-import {Source} from '@storybook/blocks';
+import {Source} from '@storybook/addon-docs/blocks';
 import stringify from "../helpers/stringify";
 
 const Logo = () => {
@@ -19,16 +19,27 @@ const Logo = () => {
 
   const code = `<Treemap config={${stringify(config)}} />`;
 
+  const mobile = window !== undefined && window.innerWidth <= 768;
+
+  const wrapperStyle = {
+    alignItems: "stretch",
+    display: "flex",
+    flexDirection: mobile ? "column" : "row",
+    height: mobile ? "auto" : "300px",
+    marginBottom: mobile ? "50px" : 0
+  };
+  const sourceStyle = {
+    marginRight: mobile ? 0 : "20px", 
+    width: mobile ? "100%" : "300px"
+  };
+  const vizStyle = {flex: `1 1 ${mobile ? "300px" : "auto"}`}
+
   return (
-    <div style={{
-      alignItems: "stretch",
-      display: "flex",
-      height: "300px"
-    }}>
-      <div style={{marginRight: "20px", width: "300px"}}>
+    <div style={wrapperStyle}>
+      <div style={sourceStyle}>
         <Source code={code} />
       </div>
-      <div style={{flex: "1 1 auto"}}>
+      <div style={vizStyle}>
         <Treemap config={config} />
       </div>
     </div>

package/docs/Introduction.mdx

@@ -1,4 +1,4 @@
-import {Meta} from '@storybook/blocks';
+import {Meta} from '@storybook/addon-docs/blocks';
 import Logo from "./Logo.jsx";
 import HomeChart from "./HomeChart.jsx";
 

package/docs/Logo-Frames.js

@@ -10,7 +10,8 @@ const threeColor = colors[1];
 const threeAccent = colorLegible(threeColor);
 const plusColor = colors[2];
 
-const height = 200;
+const mobile = window !== undefined && window.innerWidth <= 768;
+const height = mobile ? 150 : 200;
 const yAxisOffset = 35;
 const xAxisOffset = 46;
 const ySquares = 12;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@d3plus/docs",
-  "version": "3.0.1",
+  "version": "3.0.3",
   "description": "Documentation and examples for the d3plus visualization library.",
   "license": "MIT",
   "homepage": "https://d3plus.org",
@@ -12,19 +12,15 @@
   "keywords": [],
   "scripts": {
     "build": "storybook build --docs -o build",
-    "dev": "node ../../scripts/dev.js"
+    "dev": "node ../../scripts/dev.js",
+    "dev:local": "storybook dev --docs --ci --no-version-updates --port=4000"
   },
   "dependencies": {
-    "@d3plus/core": "3.0.1",
-    "@d3plus/dom": "3.0.1",
-    "@d3plus/format": "3.0.1",
-    "@d3plus/locales": "3.0.1",
-    "@d3plus/react": "3.0.1",
-    "@storybook/blocks": "^8.6.12",
-    "@storybook/components": "^8.6.12",
-    "@storybook/icons": "^1.4.0",
-    "@storybook/manager-api": "^8.6.12",
-    "@storybook/test": "^8.6.12",
+    "@d3plus/core": "3.0.3",
+    "@d3plus/dom": "3.0.3",
+    "@d3plus/format": "3.0.3",
+    "@d3plus/locales": "3.0.3",
+    "@d3plus/react": "3.0.3",
     "@types/react": "^19.1.0",
     "next": "^15.2.4",
     "react": "^18.2.0",
@@ -34,12 +30,10 @@
     "webpack": "^5.98.0"
   },
   "devDependencies": {
-    "@storybook/addon-controls": "^8.6.12",
-    "@storybook/addon-docs": "^8.6.12",
-    "@storybook/nextjs": "^8.6.12",
-    "@storybook/react": "^8.6.12",
-    "@storybook/theming": "^8.6.12",
+    "@storybook/addon-docs": "9.0.11",
+    "@storybook/nextjs": "9.0.11",
+    "eslint-plugin-storybook": "9.0.11",
     "remark-gfm": "^4.0.1",
-    "storybook": "^8.6.12"
+    "storybook": "9.0.11"
   }
 }