@rubin-epo/epo-widget-lib 1.0.7 → 1.0.9

package/dist/widgets/SupernovaThreeVector/Skymap/index.js

@@ -1,26 +1,26 @@
 "use client";
 import { jsxs as g, jsx as e } from "react/jsx-runtime";
 import { useState as L } from "react";
-import { geoAitoff as N } from "d3-geo-projection";
-import { geoGraticule as R, geoPath as U } from "d3-geo";
+import { geoAitoff as E } from "d3-geo-projection";
+import { geoGraticule as N, geoPath as R } from "d3-geo";
 import { range as M } from "d3-array";
-import V from "../../../charts/Base/index.js";
-import q from "../../../charts/Tooltip/index.js";
-import z from "../../../atomic/ImageStack/index.js";
-import { Background as D, Graticule as F, ImageStackerWrapper as J, UserObject as K, LatLabel as Q, LongLabel as X, Outline as Y } from "./styles.js";
-const y = ({
-  className: v,
+import U from "../../../charts/Base/index.js";
+import V from "../../../charts/Tooltip/index.js";
+import q from "../../../atomic/ImageStack/index.js";
+import { Background as z, Graticule as D, ImageStackerWrapper as F, UserObject as J, LatLabel as K, LongLabel as Q, Outline as X } from "./styles.js";
+const Y = ({
+  className: y,
   objects: h = [],
-  images: w = [],
-  visibleImages: B = [],
-  describedById: O
+  images: v = [],
+  visibleImages: w = [],
+  describedById: B
 }) => {
-  const [W, j] = L(!1), [f, u] = L(), s = 600, l = 300, a = {
+  const [O, W] = L(!1), [f, u] = L(), s = 600, l = 300, a = {
     top: 20,
     right: 0,
     bottom: 20,
     left: 20
-  }, G = s + a.right + a.left, C = l + a.top + a.bottom, c = 15, d = 30, k = -90, x = 90, p = -180, b = 180, m = 2, i = N(), n = R();
+  }, j = s + a.right + a.left, G = l + a.top + a.bottom, c = 15, d = 30, k = -90, x = 90, p = -180, b = 180, m = 2, i = E(), n = N();
   n.step([d, c]), n.extent([
     [p, k],
     [b, x]
@@ -31,48 +31,48 @@ const y = ({
     ],
     n.outline()
   );
-  const H = M(k + c, x, c), P = M(p + d, b, d), T = U(i).pointRadius(6), r = (t) => T(t) || void 0, o = typeof f < "u" ? h[f] : void 0, S = (o ? i([o == null ? void 0 : o.long, o == null ? void 0 : o.lat]) : [0, 0]) || [0, 0];
-  return /* @__PURE__ */ g(V, { width: G, height: C, className: v, children: [
+  const C = M(k + c, x, c), H = M(p + d, b, d), P = R(i).pointRadius(6), r = (t) => P(t) || void 0, o = typeof f < "u" ? h[f] : void 0, S = (o ? i([o == null ? void 0 : o.long, o == null ? void 0 : o.lat]) : [0, 0]) || [0, 0];
+  return /* @__PURE__ */ g(U, { width: j, height: G, className: y, children: [
     /* @__PURE__ */ e("mask", { id: "imageMask", children: /* @__PURE__ */ e("path", { d: r(n.outline()), fill: "white" }) }),
-    /* @__PURE__ */ e(D, { d: r(n.outline()) }),
-    /* @__PURE__ */ e(F, { d: r(n()) }),
+    /* @__PURE__ */ e(z, { d: r(n.outline()) }),
+    /* @__PURE__ */ e(D, { d: r(n()) }),
     /* @__PURE__ */ e(
-      J,
+      F,
       {
-        style: { "--image-stack-opacity": W && 1 },
+        style: { "--image-stack-opacity": O && 1 },
         x: a.left,
         y: a.top,
         width: s - m,
         height: l,
         mask: "url(#imageMask)",
         children: /* @__PURE__ */ e(
-          z,
+          q,
           {
-            images: w,
-            describedById: O,
-            visible: B,
-            loadCallback: () => j(!0),
+            images: v,
+            describedById: B,
+            visible: w,
+            loadCallback: () => W(!0),
             showBackdrop: !1,
             showLoader: !1
           }
         )
       }
     ),
-    /* @__PURE__ */ e("g", { children: h.map(({ id: t, lat: $, long: A }, E) => /* @__PURE__ */ e(
-      K,
+    /* @__PURE__ */ e("g", { children: h.map(({ id: t, lat: T, long: $ }, A) => /* @__PURE__ */ e(
+      J,
       {
         d: r({
           type: "Point",
-          coordinates: [A, $]
+          coordinates: [$, T]
         }),
-        onMouseOver: () => u(E),
+        onMouseOver: () => u(A),
         onMouseOut: () => u(void 0)
       },
       t
     )) }),
-    /* @__PURE__ */ e("g", { "aria-hidden": "true", children: H.map(
+    /* @__PURE__ */ e("g", { "aria-hidden": "true", children: C.map(
       (t) => t === 0 ? null : /* @__PURE__ */ g(
-        Q,
+        K,
         {
           style: {
             dominantBaseline: t > 0 ? "text-after-edge" : "text-before-edge"
@@ -86,8 +86,8 @@ const y = ({
         t
       )
     ) }),
-    /* @__PURE__ */ e("g", { "aria-hidden": "true", children: P.map((t) => /* @__PURE__ */ g(
-      X,
+    /* @__PURE__ */ e("g", { "aria-hidden": "true", children: H.map((t) => /* @__PURE__ */ g(
+      Q,
       {
         transform: `translate(${i([t, 0])})`,
         children: [
@@ -98,14 +98,14 @@ const y = ({
       t
     )) }),
     /* @__PURE__ */ e(
-      Y,
+      X,
       {
         strokeWidth: m,
         d: r(n.outline())
       }
     ),
     /* @__PURE__ */ e(
-      q,
+      V,
       {
         visible: !!o,
         x: S[0],
@@ -115,8 +115,7 @@ const y = ({
     )
   ] });
 };
-y.displayName = "Widgets.SupernovaThreeVector.Skymap";
-const rt = y;
+Y.displayName = "Widgets.SupernovaThreeVector.Skymap";
 export {
-  rt as default
+  Y as default
 };

package/dist/widgets/SupernovaThreeVector/styles.cjs

@@ -1,38 +1,34 @@
-"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("styled-components"),t=require("@rubin-epo/epo-react-lib/styles"),i=require("../../layout/AspectRatio/index.cjs"),a=require("../../atomic/Button/patterns/Reset.cjs"),o=require("./Histogram/index.cjs"),s=require("./Skymap/index.cjs"),d=n=>n&&n.__esModule?n:{default:n},e=d(r),c=e.default(i.default)`
-  container-type: inline-size;
-`,l=e.default.div`
+"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const a=require("styled-components"),t=require("@rubin-epo/epo-react-lib/styles"),r=require("./Histogram/index.cjs"),n=require("./Skymap/index.cjs"),o=i=>i&&i.__esModule?i:{default:i},e=o(a),s=e.default.div`
   --three-vector-gap: calc(var(--PADDING_SMALL, 20px) / 2);
 
   display: grid;
   grid-template-columns: 1fr;
-  grid-template-rows: min-content 1fr min-content min-content;
+  grid-auto-rows: min-content;
   grid-template-areas:
     "skymap"
     "histogram"
-    "slider"
-    "reset";
+    "slider";
   gap: var(--three-vector-gap);
 
-  @container (min-width: ${t.token("BREAK_LARGE_TABLET")}) {
+  @media (orientation: landscape) {
     grid-template-columns: 1fr 1fr;
-    grid-template-rows: 1fr min-content min-content;
+    grid-template-rows: 1fr min-content;
     grid-template-areas:
       "histogram skymap"
-      "slider ."
-      "reset reset";
+      "slider .";
   }
 
   @container (min-width: ${t.token("BREAK_TABLET_MIN")}) {
     --three-vector-gap: var(--PADDING_SMALL, 20px);
     gap: var(--three-vector-gap);
   }
-`,m=e.default.div`
+`,d=e.default.div`
   display: flex;
   flex-direction: column;
   gap: var(--three-vector-gap);
   container-type: inline-size;
   grid-area: histogram;
-`,u=e.default(o.default)`
+`,l=e.default(r.default)`
   font-size: 0.75em;
 
   @container (
@@ -40,17 +36,15 @@
   ) {
     font-size: 1em;
   }
-`,p=e.default.div`
+`,c=e.default.div`
   grid-area: slider;
-`,f=e.default(a.default)`
-  grid-area: reset;
-`,g=e.default.div`
+`,m=e.default.div`
   display: flex;
   flex-direction: column;
   gap: var(--three-vector-gap);
   container-type: inline-size;
   grid-area: skymap;
-`,h=e.default(s.default)`
+`,p=e.default(n.default)`
   max-width: 100%;
   font-size: 2.25em;
 
@@ -71,6 +65,6 @@
 ) {
     font-size: 1em;
   }
-`,y=e.default.h4`
+`,g=e.default.h4`
   margin: 0;
-`;exports.ChartTitle=y;exports.Histogram=u;exports.HistogramContainer=m;exports.ResetButton=f;exports.Skymap=h;exports.SkymapContainer=g;exports.SliderContainer=p;exports.ThreeVectorContainer=c;exports.ThreeVectorLayout=l;
+`;exports.ChartTitle=g;exports.Histogram=l;exports.HistogramContainer=d;exports.Skymap=p;exports.SkymapContainer=m;exports.SliderContainer=c;exports.ThreeVectorLayout=s;

package/dist/widgets/SupernovaThreeVector/styles.js

@@ -1,45 +1,39 @@
 "use client";
 import e from "styled-components";
 import { token as t } from "@rubin-epo/epo-react-lib/styles";
-import r from "../../layout/AspectRatio/index.js";
-import i from "../../atomic/Button/patterns/Reset.js";
-import n from "./Histogram/index.js";
-import o from "./Skymap/index.js";
-const g = e(r)`
-  container-type: inline-size;
-`, l = e.div`
+import i from "./Histogram/index.js";
+import r from "./Skymap/index.js";
+const s = e.div`
   --three-vector-gap: calc(var(--PADDING_SMALL, 20px) / 2);
 
   display: grid;
   grid-template-columns: 1fr;
-  grid-template-rows: min-content 1fr min-content min-content;
+  grid-auto-rows: min-content;
   grid-template-areas:
     "skymap"
     "histogram"
-    "slider"
-    "reset";
+    "slider";
   gap: var(--three-vector-gap);
 
-  @container (min-width: ${t("BREAK_LARGE_TABLET")}) {
+  @media (orientation: landscape) {
     grid-template-columns: 1fr 1fr;
-    grid-template-rows: 1fr min-content min-content;
+    grid-template-rows: 1fr min-content;
     grid-template-areas:
       "histogram skymap"
-      "slider ."
-      "reset reset";
+      "slider .";
   }
 
   @container (min-width: ${t("BREAK_TABLET_MIN")}) {
     --three-vector-gap: var(--PADDING_SMALL, 20px);
     gap: var(--three-vector-gap);
   }
-`, f = e.div`
+`, c = e.div`
   display: flex;
   flex-direction: column;
   gap: var(--three-vector-gap);
   container-type: inline-size;
   grid-area: histogram;
-`, h = e(n)`
+`, p = e(i)`
   font-size: 0.75em;
 
   @container (
@@ -47,17 +41,15 @@ const g = e(r)`
   ) {
     font-size: 1em;
   }
-`, A = e.div`
+`, d = e.div`
   grid-area: slider;
-`, v = e(i)`
-  grid-area: reset;
-`, B = e.div`
+`, g = e.div`
   display: flex;
   flex-direction: column;
   gap: var(--three-vector-gap);
   container-type: inline-size;
   grid-area: skymap;
-`, y = e(o)`
+`, l = e(r)`
   max-width: 100%;
   font-size: 2.25em;
 
@@ -78,17 +70,15 @@ const g = e(r)`
 ) {
     font-size: 1em;
   }
-`, E = e.h4`
+`, f = e.h4`
   margin: 0;
 `;
 export {
-  E as ChartTitle,
-  h as Histogram,
-  f as HistogramContainer,
-  v as ResetButton,
-  y as Skymap,
-  B as SkymapContainer,
-  A as SliderContainer,
-  g as ThreeVectorContainer,
-  l as ThreeVectorLayout
+  f as ChartTitle,
+  p as Histogram,
+  c as HistogramContainer,
+  l as Skymap,
+  g as SkymapContainer,
+  d as SliderContainer,
+  s as ThreeVectorLayout
 };

package/package.json

@@ -1,18 +1,35 @@
 {
   "name": "@rubin-epo/epo-widget-lib",
-  "version": "1.0.7",
+  "version": "1.0.9",
   "description": "Rubin Observatory Education & Public Outreach team React scientific and educational widgets.",
   "author": "Rubin EPO",
   "license": "MIT",
   "homepage": "https://lsst-epo.github.io/epo-react-lib",
   "repository": {
     "type": "git",
-    "url": "https://github.com/lsst-epo/epo-react-lib"
+    "url": "git+https://github.com/lsst-epo/epo-react-lib.git"
+  },
+  "publishConfig": {
+    "access": "public",
+    "registry": "https://registry.npmjs.org/"
   },
   "supportedLocales": [
     "en",
     "es"
   ],
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc && vite build",
+    "fix-js": "prettier --write \"**/*.{js,jsx}\" && eslint -c .eslintrc.js \"**/*.{js,jsx,ts,tsx}\" --fix",
+    "lint-js": "prettier --check \"**/*.{js,jsx}\" & eslint -c .eslintrc.js \"**/*.{js,jsx,ts,tsx}\"",
+    "storybook": "storybook dev -p 6007",
+    "build-storybook": "storybook build",
+    "build-storybook:production": "yarn build-storybook -o ../../storybook-static/epo-widget-lib",
+    "test": "jest --max-workers=2",
+    "test:generate-output": "yarn test --json --outputFile=.jest-test-results.json || true",
+    "prepublishOnly": "yarn build",
+    "release": "semantic-release -e semantic-release-monorepo --debug"
+  },
   "files": [
     "README.md",
     "dist"
@@ -26,9 +43,51 @@
     },
     "./localeStrings": "./dist/localeStrings"
   },
-  "publishConfig": {
-    "access": "public",
-    "registry": "https://registry.npmjs.org/"
+  "devDependencies": {
+    "@babel/core": "^7.20.12",
+    "@rubin-epo/eslint-config-react": "^1.0.0-beta",
+    "@semantic-release/github": "^10.1.7",
+    "@semantic-release/npm": "^12.0.1",
+    "@semantic-release/release-notes-generator": "^14.0.1",
+    "@storybook/addon-a11y": "^7.6.20",
+    "@storybook/addon-actions": "7.6.20",
+    "@storybook/addon-essentials": "7.6.20",
+    "@storybook/addon-interactions": "7.6.20",
+    "@storybook/addon-jest": "7.6.20",
+    "@storybook/addon-links": "7.6.20",
+    "@storybook/cli": "7.6.20",
+    "@storybook/manager-api": "7.6.20",
+    "@storybook/react": "7.6.20",
+    "@storybook/react-vite": "7.6.20",
+    "@storybook/testing-library": "^0.2.2",
+    "@storybook/theming": "7.6.20",
+    "@testing-library/jest-dom": "^5.16.5",
+    "@testing-library/react": "^13.4.0",
+    "@testing-library/user-event": "^14.4.3",
+    "@types/d3-array": "^3.2.1",
+    "@types/d3-geo": "^3.1.0",
+    "@types/react": "^18.0.26",
+    "@types/react-dom": "^18.0.9",
+    "@vitejs/plugin-react": "^4",
+    "babel-loader": "^8.3.0",
+    "eslint-plugin-storybook": "^0.8.0",
+    "i18next": "23",
+    "i18next-browser-languagedetector": "^8.0.0",
+    "i18next-http-backend": "^2.5.2",
+    "jest": "^29.4.2",
+    "jest-canvas-mock": "^2.4.0",
+    "jest-environment-jsdom": "^29.4.2",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-i18next": "13",
+    "rollup-plugin-banner2": "^1.2.2",
+    "semantic-release": "^24.1.0",
+    "semantic-release-monorepo": "^8.0.2",
+    "storybook-react-i18next": "2.0.10",
+    "ts-jest": "^29.0.5",
+    "typescript": "5",
+    "vite": "^5.4.3",
+    "vite-plugin-dts": "^3.9.1"
   },
   "peerDependencies": {
     "i18next": "^22.0.0 || ^23.0.0",
@@ -45,7 +104,7 @@
     "d3-geo-projection": "^4.0.0",
     "lodash": "^4.17.21",
     "react-slider": "^2.0.6",
-    "skia-canvas": "^1.0.1",
+    "skia-canvas": "^1.0.2",
     "styled-components": "^6.1.1",
     "use-resize-observer": "^9.1.0"
   }