@d3plus/docs 3.0.0-alpha.3

package/.storybook/main.js

@@ -0,0 +1,51 @@
+import remarkGfm from "remark-gfm";
+import path from "node:path";
+
+// monorepo fix
+// https://storybook.js.org/docs/faq#how-do-i-fix-module-resolution-in-special-environments
+const getAbsolutePath = packageName =>
+  path.dirname(require.resolve(path.join(packageName, 'package.json')));
+
+module.exports = {
+  stories: [
+    "../docs/**/*.mdx", 
+    "../packages/**/*.stories.@(mdx|js|jsx|ts|tsx)"
+  ],
+
+  addons: [
+    getAbsolutePath("@storybook/addon-controls"), 
+    {
+      name: getAbsolutePath("@storybook/addon-docs"),
+      options: {
+        mdxPluginOptions: {
+          mdxCompileOptions: {
+            remarkPlugins: [remarkGfm],
+          },
+        },
+      },
+    }
+  ],
+
+  framework: {
+    name: getAbsolutePath("@storybook/nextjs"),
+    options: {
+      builder: {useSWC: true}
+    }
+  },
+
+  docs: {
+    defaultName: "D3plus"
+  },
+
+  staticDirs: ["../static"],
+
+  typescript: {
+    reactDocgen: "react-docgen-typescript"
+  },
+
+  core: {
+    disableTelemetry: true, // 👈 Disables telemetry
+    disableWhatsNewNotifications: true,
+  }
+
+};

package/.storybook/manager-head.html

@@ -0,0 +1,46 @@
+<title>D3plus Documentation</title>
+<meta name="description" content="Data visualization made easy. A javascript library that extends the popular D3.js to enable fast and beautiful visualizations."/>
+
+<link rel="shortcut icon" type="image/png" href="/images/favicon.ico?v=3">
+<link rel="apple-touch-icon" sizes="256x256" href="/images/touchicon.png?v=3">
+
+<!-- Inter -->
+<link rel="preconnect" href="https://fonts.googleapis.com">
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+<link href="https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap" rel="stylesheet">
+
+<style>
+
+  /* styles logo text */
+  .sidebar-header a {
+    font-size: 24px;
+    font-weight: 400;
+    letter-spacing: 0;
+  }
+
+  .sb-bar {
+    display: none;
+  }
+
+</style>
+
+<script id="storybook-mod-expand-all-folders" type="text/javascript">
+  var clickCollapsedItemsUntilNoneLeft = () => {
+    setTimeout(() => {
+      try {
+        var itemsLeftToClick = Array.from(
+          document.querySelectorAll('#storybook-explorer-tree button#core-charts[aria-expanded="false"]')
+        );
+        if (itemsLeftToClick.length > 0) {
+          itemsLeftToClick.forEach(item => item.click());
+          clickCollapsedItemsUntilNoneLeft();
+        }
+      } catch (e) {
+        console.error(e);
+      }
+    }, 200);
+  };
+
+  window.removeEventListener('load', clickCollapsedItemsUntilNoneLeft);
+  window.addEventListener('load', clickCollapsedItemsUntilNoneLeft);
+</script>

package/.storybook/manager.js

@@ -0,0 +1,10 @@
+import {addons} from "@storybook/manager-api";
+import theme from "./theme.js";
+
+addons.setConfig({
+  navSize: 250,
+  sidebar: {
+    collapsedRoots: ["color"],
+  },
+  theme
+});

package/.storybook/preview-head.html

@@ -0,0 +1,69 @@
+<title>D3plus</title>
+
+<!-- Inter -->
+<link rel="preconnect" href="https://fonts.googleapis.com">
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+<link href="https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap" rel="stylesheet">
+
+<style>
+
+  pre {
+    font-family: ui-monospace, monospace !important;
+  }
+
+  .sbdocs-wrapper {
+    padding: 2rem !important;
+  }
+
+  .sbdocs-content {
+    max-width: calc(100% - 15rem) !important;
+  }
+
+  /* kill margins */
+  .docblock-argstable, /* control block */
+  .sbdocs-preview { /* chart/code block */
+    margin: 0 !important;
+  }
+
+  /* kill paddings */
+  .docs-story > div:first-child { /* viz container */
+    padding: 10px !important;
+  }
+
+  /* move hide/show code button */
+  .docs-story > div:last-child {
+    background: none !important;
+    left: 0px !important;
+    right: auto !important;
+  }
+  .docblock-code-toggle {
+    border-left-color: initial !important;
+    border-right-color: rgba(38, 85, 115, 0.15) !important;
+    border-radius: 0px 4px 0px !important;
+    border-style: solid solid none none !important;
+    border-width: 1px 1px 0px 0px !important;
+  }
+
+  /* removes inner viz padding */
+  .innerZoomElementWrapper > div:first-child {
+    border: none !important;
+  }
+  .viz > svg {
+    display: block;
+  }
+
+  .d3plus-logo .d3plus-plot-x-axis .bar,
+  .d3plus-logo .d3plus-plot-y-axis .bar {
+    transition: opacity 0.2s;
+  }
+
+</style>
+<!-- Google tag (gtag.js) -->
+<script async src="https://www.googletagmanager.com/gtag/js?id=UA-46067436-1"></script>
+<script>
+  window.dataLayer = window.dataLayer || [];
+  function gtag(){dataLayer.push(arguments);}
+  gtag('js', new Date());
+
+  gtag('config', 'UA-46067436-1');
+</script>

package/.storybook/preview.jsx

@@ -0,0 +1,134 @@
+import React, {useContext, useMemo} from "react";
+import { Anchor, Canvas, Controls, Description, DocsContext, Subheading, Subtitle, Title } from '@storybook/blocks';
+import theme from "./theme.js";
+import stringify from "../helpers/stringify.js";
+import {D3plusContext} from "@d3plus/react";
+const darkMode = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;
+const tickColor = darkMode ? "#dee2e6" : "#495057";
+const gridColor = darkMode ? "#495057" : "#dee2e6";
+
+const axisConfig = {
+  barConfig: {
+    stroke: tickColor
+  },
+  gridConfig: {
+    stroke: gridColor
+  },
+  shapeConfig: {
+    fill: tickColor,
+    labelConfig: {
+      fontColor: tickColor
+    },
+    stroke: tickColor
+  },
+  titleConfig: {
+    fontColor: tickColor
+  }
+};
+const globalConfig = {
+  axisConfig,
+  colorScaleConfig: {
+    axisConfig: {
+      barConfig: {
+        stroke: tickColor
+      },
+      gridConfig: {
+        stroke: gridColor
+      },
+      shapeConfig: {
+        labelConfig: {
+          fontColor: tickColor
+        },
+        stroke: tickColor
+      },
+      titleConfig: {
+        fontColor: tickColor
+      }
+    }
+  },
+  columnConfig: axisConfig,
+  fontColor: tickColor,
+  legendConfig: {
+    shapeConfig: {
+      labelConfig: {
+        fontColor: tickColor
+      }
+    }
+  },
+  rowConfig: axisConfig,
+  xConfig: axisConfig,
+  x2Config: axisConfig,
+  yConfig: axisConfig,
+  y2Config: axisConfig
+};
+
+const preview = {
+  decorators: [
+    (Story) => (
+      <D3plusContext.Provider value={globalConfig}>
+        <Story />
+      </D3plusContext.Provider>
+    )
+  ],
+  parameters: {
+    docs: {
+      page: () => {
+        const {componentStories} = useContext(DocsContext);
+        const stories = componentStories();
+        return (
+          <>
+            <Title />
+            <Subtitle />
+            <Description />
+            {stories.map(story => {
+              const {component, moduleExport} = story;
+              const stringifiedArgs = stringify(moduleExport.args);
+              const compName = component.__docgenInfo.displayName.replace(/_args_[A-z]+/g, "");
+              const code = useMemo(() => {
+                return `import {${compName}} from "@d3plus/react";
+${stringifiedArgs.includes("formatAbbreviate") ? `import {formatAbbreviate} from "@d3plus/format";\n` : ""}
+<${component.name} config={${stringifiedArgs}} />`;
+              }, [stringifiedArgs]);
+              return (
+                <Anchor storyId={story.id}>
+                  <Subheading>{story.name}</Subheading>
+                  <Canvas
+                    of={moduleExport}
+                    withToolbar={false}
+                    story={{height: `${moduleExport.args.height || 350}px`}}
+                    source={{
+                      code,
+                      language: "jsx"
+                    }}
+                    sourceState="shown"
+                  />
+                  {story.parameters.controls ? <Controls of={moduleExport} /> : null}
+                  <p>Full documentation for all available <strong>{compName}</strong> methods can be found <a href={`https://github.com/d3plus/d3plus/tree/main/packages/core#${compName}`} target="_blank">here</a>.</p>
+                  <br />
+                  <br />
+                </Anchor>
+              );
+            })}
+          </>
+        );
+      },
+      theme: theme,
+      toc: true
+    },
+    options: {
+      storySort: {
+        method: "alphabetical",
+        order: [
+          "Introduction", 
+          "Installation", 
+          "*", 
+          "Core", 
+          "Advanced"
+        ]
+      }
+    }
+  },
+  tags: ["autodocs"]
+}
+
+export default preview;

package/.storybook/theme.js

@@ -0,0 +1,16 @@
+import {create} from "@storybook/theming";
+
+export default create({
+
+  colorPrimary: "rgb(36, 114, 200)",
+  colorSecondary: "rgb(36, 114, 200)",
+
+  // Typography
+  fontBase: "'Inter', 'Helvetica Neue', 'HelveticaNeue', 'Helvetica', 'Arial', sans-serif",
+  fontCode: "ui-monospace, monospace",
+
+  brandTitle: "<span class=\"logo-d3\">D3</span>plus",
+  brandUrl: "https://d3plus.org",
+  brandTarget: '_self'
+
+});

package/README.md

@@ -0,0 +1 @@
+# d3plus-storybook

package/args/color/colorAdd.args.jsx

@@ -0,0 +1,71 @@
+// WARNING: do not edit this file directly, it is generated dynamically from
+// the source JSDOC comments using the npm run docs script.
+
+import React from "react";
+
+
+
+export const argTypes = {
+  c1: {
+    control: {
+      type: "text"
+    },
+    description: "The first color, a valid CSS color string.",
+    table: {
+      defaultValue: {
+        summary: "undefined"
+      }
+    },
+    type: {
+      required: true,
+      summary: "string"
+    }
+  },
+  c2: {
+    control: {
+      type: "text"
+    },
+    description: "The second color, also a valid CSS color string.",
+    table: {
+      defaultValue: {
+        summary: "undefined"
+      }
+    },
+    type: {
+      required: true,
+      summary: "string"
+    }
+  },
+  o1: {
+    control: {
+      type: "text"
+    },
+    defaultValue: 1,
+    description: "Value from 0 to 1 of the first color's opacity.",
+    table: {
+      defaultValue: {
+        summary: 1
+      }
+    },
+    type: {
+      required: false,
+      summary: "string"
+    }
+  },
+  o2: {
+    control: {
+      type: "text"
+    },
+    defaultValue: 1,
+    description: "Value from 0 to 1 of the first color's opacity.",
+    table: {
+      defaultValue: {
+        summary: 1
+      }
+    },
+    type: {
+      required: false,
+      summary: "string"
+    }
+  }
+};

package/args/color/colorAssign.args.jsx

@@ -0,0 +1,40 @@
+// WARNING: do not edit this file directly, it is generated dynamically from
+// the source JSDOC comments using the npm run docs script.
+
+import React from "react";
+
+
+
+export const argTypes = {
+  c: {
+    control: {
+      type: "text"
+    },
+    description: "A valid CSS color string.",
+    table: {
+      defaultValue: {
+        summary: "undefined"
+      }
+    },
+    type: {
+      required: true,
+      summary: "string"
+    }
+  },
+  u: {
+    control: {
+      type: "object"
+    },
+    defaultValue: "defaults",
+    description: "An object containing overrides of the default colors.",
+    table: {
+      defaultValue: {
+        summary: "defaults"
+      }
+    },
+    type: {
+      required: false,
+      summary: "object"
+    }
+  }
+};

package/args/color/colorContrast.args.jsx

@@ -0,0 +1,40 @@
+// WARNING: do not edit this file directly, it is generated dynamically from
+// the source JSDOC comments using the npm run docs script.
+
+import React from "react";
+
+
+
+export const argTypes = {
+  c: {
+    control: {
+      type: "text"
+    },
+    description: "A valid CSS color string.",
+    table: {
+      defaultValue: {
+        summary: "undefined"
+      }
+    },
+    type: {
+      required: true,
+      summary: "string"
+    }
+  },
+  u: {
+    control: {
+      type: "object"
+    },
+    defaultValue: "defaults",
+    description: "An object containing overrides of the default colors.",
+    table: {
+      defaultValue: {
+        summary: "defaults"
+      }
+    },
+    type: {
+      required: false,
+      summary: "object"
+    }
+  }
+};

package/args/color/colorDefaults.args.jsx

@@ -0,0 +1,8 @@
+// WARNING: do not edit this file directly, it is generated dynamically from
+// the source JSDOC comments using the npm run docs script.
+
+import React from "react";
+
+
+
+export const argTypes = {};

package/args/color/colorLegible.args.jsx

@@ -0,0 +1,24 @@
+// WARNING: do not edit this file directly, it is generated dynamically from
+// the source JSDOC comments using the npm run docs script.
+
+import React from "react";
+
+
+
+export const argTypes = {
+  c: {
+    control: {
+      type: "text"
+    },
+    description: "A valid CSS color string.",
+    table: {
+      defaultValue: {
+        summary: "undefined"
+      }
+    },
+    type: {
+      required: true,
+      summary: "string"
+    }
+  }
+};

package/args/color/colorLighter.args.jsx

@@ -0,0 +1,40 @@
+// WARNING: do not edit this file directly, it is generated dynamically from
+// the source JSDOC comments using the npm run docs script.
+
+import React from "react";
+
+
+
+export const argTypes = {
+  c: {
+    control: {
+      type: "text"
+    },
+    description: "A valid CSS color string.",
+    table: {
+      defaultValue: {
+        summary: "undefined"
+      }
+    },
+    type: {
+      required: true,
+      summary: "string"
+    }
+  },
+  i: {
+    control: {
+      type: "text"
+    },
+    defaultValue: 0.5,
+    description: "A value from 0 to 1 dictating the strength of the function.",
+    table: {
+      defaultValue: {
+        summary: 0.5
+      }
+    },
+    type: {
+      required: false,
+      summary: "string"
+    }
+  }
+};

package/args/color/colorSubtract.args.jsx

@@ -0,0 +1,71 @@
+// WARNING: do not edit this file directly, it is generated dynamically from
+// the source JSDOC comments using the npm run docs script.
+
+import React from "react";
+
+
+
+export const argTypes = {
+  c1: {
+    control: {
+      type: "text"
+    },
+    description: "The base color, a valid CSS color string.",
+    table: {
+      defaultValue: {
+        summary: "undefined"
+      }
+    },
+    type: {
+      required: true,
+      summary: "string"
+    }
+  },
+  c2: {
+    control: {
+      type: "text"
+    },
+    description: "The color to remove from the base color, also a valid CSS color string.",
+    table: {
+      defaultValue: {
+        summary: "undefined"
+      }
+    },
+    type: {
+      required: true,
+      summary: "string"
+    }
+  },
+  o1: {
+    control: {
+      type: "text"
+    },
+    defaultValue: 1,
+    description: "Value from 0 to 1 of the first color's opacity.",
+    table: {
+      defaultValue: {
+        summary: 1
+      }
+    },
+    type: {
+      required: false,
+      summary: "string"
+    }
+  },
+  o2: {
+    control: {
+      type: "text"
+    },
+    defaultValue: 1,
+    description: "Value from 0 to 1 of the first color's opacity.",
+    table: {
+      defaultValue: {
+        summary: 1
+      }
+    },
+    type: {
+      required: false,
+      summary: "string"
+    }
+  }
+};

package/args/core/charts/AreaPlot.args.jsx

@@ -0,0 +1,72 @@
+// WARNING: do not edit this file directly, it is generated dynamically from
+// the source JSDOC comments using the npm run docs script.
+
+import React from "react";
+import {argTypes as plotArgTypes} from "./Plot.args.jsx";
+import {assign} from "@d3plus/dom";
+
+import {AreaPlot as D3plusAreaPlot} from "@d3plus/react";
+export const AreaPlot = ({ config }) => <D3plusAreaPlot config={config} />;
+
+export const argTypes = assign(
+
+  /**
+   * Filters out unused argTypes from the Plot primitive and
+   * overrides any defaults that have been changed in AreaPlot
+   */
+  Object.keys(plotArgTypes)
+    .filter(k => !k.match(/^(shape|zoom.*)$/))
+    .reduce((obj, k) => (obj[k] = plotArgTypes[k], obj), {}),
+
+  /**
+   * AreaPlot-specific methods
+   */
+  
+  {
+    baseline: {
+      control: {
+        type: "number"
+      },
+      defaultValue: 0,
+      table: {
+        defaultValue: {
+          summary: 0
+        }
+      },
+      type: {
+        required: true,
+        summary: "number"
+      }
+    },
+    discrete: {
+      control: {
+        type: "text"
+      },
+      defaultValue: "x",
+      table: {
+        defaultValue: {
+          summary: "x"
+        }
+      },
+      type: {
+        required: false,
+        summary: "string"
+      }
+    },
+    shape: {
+      control: {
+        type: "text"
+      },
+      defaultValue: "Area",
+      table: {
+        defaultValue: {
+          summary: "Area"
+        }
+      },
+      type: {
+        required: false,
+        summary: "function | string"
+      }
+    }
+  }
+);