Merge pull request #97 from UW-Macrostrat/story-github-links

Storybook quality-of-life improvements

Author: davenquinn

.storybook/main.ts

@@ -3,16 +3,18 @@ import type { StorybookConfig } from "@storybook/react-vite";
 export default {
   // vite
   stories: [
-    "../stories/**/*.@(mdx|js|jsx|ts|tsx)",
+    "../stories/**/*.mdx",
+    "../stories/**/*.stories.@(mdx|js|jsx|ts|tsx)",
     "../packages/*/src/**/*.mdx",
-    "../packages/*/stories/*.mdx",
+    "../packages/*/stories/**/*.mdx",
     "../packages/**/*.stories.@(mdx|js|jsx|ts|tsx)",
   ],
   addons: [
     "@storybook/addon-links",
     "@storybook/addon-essentials",
     "@storybook/addon-viewport",
     "storybook-dark-mode",
+    "@kemuridama/storybook-addon-github",
   ],
   framework: "@storybook/react-vite",
   docs: {},

.storybook/manager-head.html

@@ -1 +1,23 @@
 <meta name="darkreader-lock" />
+<link rel="shortcut icon" href="/favicon.ico" />
+<link rel="icon" type="image/png" href="/favicon-32x32.png" sizes="32x32" />
+<link
+  href="https://fonts.googleapis.com/css?family=Maven+Pro&text=Macrostrat"
+  rel="stylesheet"
+  type="text/css"
+/>
+<style type="text/css">
+  .page-title {
+    font-family: "Maven Pro", sans-serif;
+    font-size: 2em;
+    font-weight: 600;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    gap: 0.5em;
+  }
+
+  a[title="GitHub"] {
+    color: inherit;
+  }
+</style>

.storybook/preview.ts

@@ -39,6 +39,7 @@ export const parameters = {
       storySort: {
         order: [
           "Web components",
+          "Example story",
           "Map interface",
           "Column views",
           "Timescale",
@@ -47,6 +48,10 @@ export const parameters = {
       },
     },
   },
+  github: {
+    repository: "UW-Macrostrat/web-components",
+    branch: "main",
+  },
 };
 
 export const decorators = [
@@ -64,7 +69,7 @@ export const tags = ["autodocs"];
 function PatternProvider({ children }) {
   return h(GeologicPatternProvider, {
     resolvePattern(id: string) {
-      return `https://dev2.macrostrat.org/assets/geologic-patterns/svg/${id}.svg`;
+      return `https://dev.macrostrat.org/assets/geologic-patterns/svg/${id}.svg`;
     },
     children,
   });

.storybook/theme.ts

@@ -2,7 +2,7 @@ import { create } from "@storybook/theming";
 
 export default create({
   base: "light",
-  brandTitle: `<img src="https://macrostrat.org/img/logo_red.png" width="16px" height="16px"/>&nbsp;Macrostrat`,
+  brandTitle: `<h1 class="page-title"><img src="https://storage.macrostrat.org/assets/web/macrostrat-icons/macrostrat-icon.svg" width="36px" height="36px"/><span>Macrostrat</span></h1>`,
   brandUrl: "https://macrostrat.org",
   brandTarget: "_self",
 });

package.json

@@ -75,6 +75,7 @@
   ],
   "packageManager": "[email protected]",
   "devDependencies": {
+    "@kemuridama/storybook-addon-github": "^1.4.0",
     "@parcel/packager-ts": "^2.14.4",
     "@types/d3-array": "^3.2.1",
     "@types/underscore": "^1.13.0",

public/favicon-32x32.png

@@ -1,4 +1,4 @@
-import pkg from "../packages/map-interface/package.json";
+import { PackageInfo } from "./package-info";
 
 # Macrostrat web components
 
@@ -8,4 +8,4 @@ rendering geologic information. They are heavily used in
 [Rockd](https://rockd.org), and other applications for authoring and exploring
 information about the Earth's crust.
 
-<code>{pkg.name}</code>: <code>{pkg.version}</code>
+<PackageInfo></PackageInfo>

public/favicon.ico

@@ -0,0 +1,54 @@
+import h from "@macrostrat/hyper";
+
+const packages = [
+  "ui-components",
+  "map-interface",
+  "timescale",
+  "api-types",
+  "color-utils",
+  "column-components",
+  "column-creator",
+  "column-views",
+  "cross-section-utils",
+  "data-components",
+  "data-sheet",
+  "feedback-components",
+  "form-components",
+  "map-styles",
+  "mapbox-react",
+  "mapbox-utils",
+  "stratigraphy-utils",
+  "style-system",
+  "svg-map-components",
+];
+
+export function PackageInfo() {
+  return h(
+    "ul.package-info",
+    packages.map((pkg) => {
+      return h("li.package-info-item", [
+        h("code.bp5-code.package-name", "@macrostrat/" + pkg),
+        " ",
+        h("span.links", [
+          h(
+            "a",
+            {
+              href: `https://github.com/UW-Macrostrat/web-components/blob/main/packages/${pkg}`,
+              target: "_blank",
+            },
+            "Github"
+          ),
+          ", ",
+          h(
+            "a",
+            {
+              href: `https://npmjs.org/package/@macrostrat/${pkg}`,
+              target: "_blank",
+            },
+            "NPM"
+          ),
+        ]),
+      ]);
+    })
+  );
+}

stories/Web components.mdx

@@ -2117,6 +2117,18 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@kemuridama/storybook-addon-github@npm:^1.4.0":
+  version: 1.4.0
+  resolution: "@kemuridama/storybook-addon-github@npm:1.4.0"
+  peerDependencies:
+    "@storybook/components": ^7 || ^8
+    "@storybook/icons": ^1
+    "@storybook/manager-api": ^7 || ^8
+    react: ^17 || ^18 || ^19
+  checksum: 10c0/ab27a3c7ba8edc7baadf7ecab2ab1f54d47d66f02941b55eb5a52dca514f844369b5ee296874e73b8bb369c4e134d52571d83ab40a2ad0e358c1d7878d4df087
+  languageName: node
+  linkType: hard
+
 "@lezer/common@npm:^1.0.0":
   version: 1.2.3
   resolution: "@lezer/common@npm:1.2.3"
@@ -2626,6 +2638,7 @@ __metadata:
     "@babel/preset-env": "npm:^7.21.4"
     "@babel/preset-typescript": "npm:^7.21.4"
     "@blueprintjs/core": "npm:^5.10.2"
+    "@kemuridama/storybook-addon-github": "npm:^1.4.0"
     "@macrostrat/hyper": "npm:^3.0.6"
     "@parcel/bundler-library": "npm:^2.14.4"
     "@parcel/config-default": "npm:^2.14.4"