@shopify/create-hydrogen 4.3.13 → 5.0.0

package/dist/assets/hydrogen/virtual-routes/assets/styles.css

@@ -0,0 +1,238 @@
+@font-face {
+  font-family: 'Inter';
+  src: url('../assets/inter-variable-font.woff2') format('woff2-variations');
+}
+@font-face {
+  font-family: 'JetBrains Mono';
+  src: url('../assets/jetbrainsmono-variable-font.woff2')
+    format('woff2-variations');
+}
+
+* {
+  box-sizing: border-box;
+}
+
+h1,
+h2,
+p {
+  margin: 0;
+  padding: 0;
+}
+
+h1 {
+  font-size: 3rem;
+  line-height: 1.25;
+}
+
+h2 {
+  font-size: 1.2rem;
+  font-weight: 700;
+  line-height: 1.4;
+}
+
+p {
+  font-size: 1rem;
+  line-height: 1.4;
+  font-weight: 500;
+}
+
+body {
+  padding: 0;
+  margin: 0;
+  background: #fff;
+  font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI',
+    Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
+  -webkit-font-smoothing: antialiased;
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+}
+
+.hydrogen-virtual-route {
+  display: grid;
+  grid-template-rows: auto 1fr auto;
+  min-height: 100vh;
+}
+
+header {
+  display: flex;
+  flex-direction: row;
+  gap: 20px;
+  padding: 14px 20px;
+  width: 100%;
+  height: 48px;
+  background: #ffffff;
+  align-items: center;
+  color: #5c5f62;
+}
+
+header nav {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: 1rem;
+  margin-left: auto;
+}
+
+header h1 {
+  font-size: 0.75rem;
+}
+
+header p {
+  font-family: 'JetBrains Mono';
+  font-weight: 700;
+  font-size: 0.875rem;
+  border: 1.5px solid #d2d5d8;
+  border-radius: 4px;
+  padding: 1px;
+  white-space: nowrap;
+}
+
+main {
+  padding: 2rem;
+  max-width: 50rem;
+  margin: auto;
+}
+
+footer {
+  background: #f6f6f7;
+}
+
+footer div {
+  display: block;
+  max-width: 50rem;
+  padding: 2rem;
+  margin: auto;
+}
+
+footer a {
+  color: #5c5f62;
+  text-decoration: none;
+}
+
+main > h1 {
+  color: #202223;
+  font-weight: 900;
+  margin-bottom: 24px;
+}
+
+main > p {
+  margin-bottom: 16px;
+}
+
+main > section {
+  margin-bottom: 40px;
+}
+
+main a {
+  color: #475f91;
+  font-size: 1rem;
+  position: relative;
+  font-weight: 500;
+}
+
+main a::after {
+  content: url("data:image/svg+xml,%3Csvg width='18' height='24' viewBox='0 0 18 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4.45312 19.3828H13.9297C15.5703 19.3828 16.3828 18.5703 16.3828 16.9609V7.42188C16.3828 5.8125 15.5703 5 13.9297 5H4.45312C2.82031 5 2 5.80469 2 7.42188V16.9609C2 18.5781 2.82031 19.3828 4.45312 19.3828ZM4.46875 18.125C3.6875 18.125 3.25781 17.7109 3.25781 16.8984V7.48438C3.25781 6.67188 3.6875 6.25781 4.46875 6.25781H13.9141C14.6875 6.25781 15.125 6.67188 15.125 7.48438V16.8984C15.125 17.7109 14.6875 18.125 13.9141 18.125H4.46875ZM11.6406 14.1172C11.9844 14.1172 12.2188 13.8516 12.2188 13.4922V9.80469C12.2188 9.34375 11.9609 9.16406 11.5625 9.16406H7.85938C7.49219 9.16406 7.25781 9.39062 7.25781 9.73438C7.25781 10.0781 7.5 10.3047 7.875 10.3047H9.29688L10.4531 10.1797L9.23438 11.3125L6.35156 14.1953C6.24219 14.3047 6.17188 14.4609 6.17188 14.6172C6.17188 14.9688 6.39844 15.1953 6.74219 15.1953C6.92969 15.1953 7.07812 15.125 7.1875 15.0156L10.0625 12.1406L11.1875 10.9375L11.0703 12.1562V13.5078C11.0703 13.875 11.2969 14.1172 11.6406 14.1172Z' fill='%23475F91'/%3E%3C/svg%3E%0A");
+  vertical-align: middle;
+}
+
+main {
+  display: flex;
+  flex-direction: column;
+}
+
+.Links ul {
+  margin: 0;
+  padding: 0 0.5rem;
+  list-style: none;
+}
+
+.Links li {
+  margin-bottom: 1rem;
+}
+
+.Links li::before {
+  content: '\25fc';
+  color: #5c5f62;
+  display: inline-block;
+  vertical-align: text-bottom;
+  width: 1.2rem;
+  font-size: 0.8rem;
+}
+
+.Links h2 {
+  margin-bottom: 0.5rem;
+  font-size: 1.5rem;
+  color: #44474a;
+  font-weight: 700;
+}
+
+.Banner {
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  padding: 16px;
+  gap: 8px;
+  box-shadow: 0px 2px 0px rgba(0, 0, 0, 0.1);
+  border-radius: 8px;
+  font-style: normal;
+  font-size: 1rem;
+  line-height: 24px;
+  color: #5c5f62;
+  border: 1px solid #d2d5d8;
+  background: #fafbfb;
+}
+
+.Banner div {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: 16px;
+}
+
+.Banner p {
+  padding-left: 48px;
+}
+
+.Banner code {
+  background: #f6f6f7;
+  border: 1px solid #d2d5d8;
+  font-family: monospace;
+  border-radius: 4px;
+  padding: 2px;
+}
+
+.Banner h2 {
+  font-size: 1rem;
+  color: #202223;
+}
+
+.Banner.ErrorBanner {
+  color: #981c06;
+  border: 1px solid #fda9a5;
+  background: #fee9e8;
+}
+
+.Banner.ErrorBanner code {
+  background: #fef4f4;
+  border: 1px solid #fda9a5;
+  border-radius: 4px;
+  padding: 2px;
+  color: #74180c;
+}
+
+.Banner.ErrorBanner a {
+  color: #b92409;
+}
+
+.Banner.ErrorBanner a::after {
+  content: url("data:image/svg+xml,%3Csvg width='18' height='24' viewBox='0 0 18 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4.45312 19.3828H13.9297C15.5703 19.3828 16.3828 18.5703 16.3828 16.9609V7.42188C16.3828 5.8125 15.5703 5 13.9297 5H4.45312C2.82031 5 2 5.80469 2 7.42188V16.9609C2 18.5781 2.82031 19.3828 4.45312 19.3828ZM4.46875 18.125C3.6875 18.125 3.25781 17.7109 3.25781 16.8984V7.48438C3.25781 6.67188 3.6875 6.25781 4.46875 6.25781H13.9141C14.6875 6.25781 15.125 6.67188 15.125 7.48438V16.8984C15.125 17.7109 14.6875 18.125 13.9141 18.125H4.46875ZM11.6406 14.1172C11.9844 14.1172 12.2188 13.8516 12.2188 13.4922V9.80469C12.2188 9.34375 11.9609 9.16406 11.5625 9.16406H7.85938C7.49219 9.16406 7.25781 9.39062 7.25781 9.73438C7.25781 10.0781 7.5 10.3047 7.875 10.3047H9.29688L10.4531 10.1797L9.23438 11.3125L6.35156 14.1953C6.24219 14.3047 6.17188 14.4609 6.17188 14.6172C6.17188 14.9688 6.39844 15.1953 6.74219 15.1953C6.92969 15.1953 7.07812 15.125 7.1875 15.0156L10.0625 12.1406L11.1875 10.9375L11.0703 12.1562V13.5078C11.0703 13.875 11.2969 14.1172 11.6406 14.1172Z' fill='%23B92409'/%3E%3C/svg%3E%0A");
+  vertical-align: middle;
+  color: red;
+}
+
+.Banner.ErrorBanner > h2 {
+  font-size: 1rem;
+  color: #74180c;
+}

package/dist/assets/hydrogen/virtual-routes/components/FlameChartWrapper.jsx

@@ -0,0 +1,123 @@
+import { jsx } from "react/jsx-runtime";
+import { useCallback, useEffect, useRef } from "react";
+import _useResizeObserver from "use-resize-observer";
+const useResizeObserver = _useResizeObserver;
+const FlameChartWrapper = (props) => {
+  const boxRef = useRef(null);
+  const canvasRef = useRef(null);
+  const flameChart = useRef(null);
+  useResizeObserver({
+    ref: boxRef,
+    onResize: ({ width = 0, height = 0 }) => {
+      if (props.onResize) {
+        props.onResize(flameChart.current, width, height);
+      } else {
+        flameChart.current?.resize(width, height - 3);
+      }
+    }
+  });
+  const initialize = useCallback(() => {
+    const {
+      data,
+      marks,
+      waterfall,
+      timeseries,
+      settings,
+      colors,
+      plugins,
+      timeframeTimeseries
+    } = props;
+    if (canvasRef.current && boxRef.current) {
+      const { width = 0, height = 0 } = boxRef.current.getBoundingClientRect();
+      canvasRef.current.width = width;
+      canvasRef.current.height = height - 3;
+      flameChart.current = new flameChartJs.FlameChart({
+        canvas: canvasRef.current,
+        data,
+        marks,
+        waterfall,
+        timeseries,
+        timeframeTimeseries,
+        settings,
+        colors,
+        plugins
+      });
+    }
+  }, [props]);
+  const setBoxRef = useCallback(
+    (ref) => {
+      const isNewRef = ref !== boxRef.current;
+      boxRef.current = ref;
+      if (isNewRef) {
+        initialize();
+      }
+    },
+    [initialize]
+  );
+  const setCanvasRef = useCallback(
+    (ref) => {
+      const isNewRef = ref !== canvasRef.current;
+      canvasRef.current = ref;
+      if (isNewRef) {
+        initialize();
+      }
+    },
+    [initialize]
+  );
+  useEffect(() => {
+    if (props.data) {
+      flameChart.current?.setNodes(props.data);
+    }
+  }, [props.data]);
+  useEffect(() => {
+    if (props.marks) {
+      flameChart.current?.setMarks(props.marks);
+    }
+  }, [props.marks]);
+  useEffect(() => {
+    if (props.waterfall) {
+      flameChart.current?.setWaterfall(props.waterfall);
+    }
+  }, [props.waterfall]);
+  useEffect(() => {
+    if (props.timeseries) {
+      flameChart.current?.setTimeseries(props.timeseries);
+    }
+  }, [props.timeseries]);
+  useEffect(() => {
+    if (props.timeframeTimeseries) {
+      flameChart.current?.setTimeframeTimeseries(props.timeframeTimeseries);
+    }
+  }, [props.timeframeTimeseries]);
+  useEffect(() => {
+    if (props.settings && flameChart.current) {
+      flameChart.current.setSettings(props.settings);
+      flameChart.current.renderEngine.recalcChildrenSizes();
+      flameChart.current.render();
+    }
+  }, [props.settings]);
+  useEffect(() => {
+    if (props.position) {
+      flameChart.current?.setFlameChartPosition(props.position);
+    }
+  }, [props.position]);
+  useEffect(() => {
+    if (props.zoom) {
+      flameChart.current?.setZoom(props.zoom.start, props.zoom.end);
+    }
+  }, [props.zoom]);
+  useEffect(() => {
+    if (props.onSelect) {
+      flameChart.current?.on("select", props.onSelect);
+    }
+    return () => {
+      if (props.onSelect) {
+        flameChart.current?.removeListener("select", props.onSelect);
+      }
+    };
+  }, [props.onSelect]);
+  return /* @__PURE__ */ jsx("div", { style: { height: `100%` }, className: props.className, ref: setBoxRef, children: /* @__PURE__ */ jsx("canvas", { ref: setCanvasRef }) });
+};
+export {
+  FlameChartWrapper
+};

package/dist/assets/hydrogen/virtual-routes/components/HydrogenLogoBaseBW.jsx

@@ -0,0 +1,32 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+const HydrogenLogoBaseBW = (props) => /* @__PURE__ */ jsxs(
+  "svg",
+  {
+    width: 81,
+    height: 82,
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    ...props,
+    children: [
+      /* @__PURE__ */ jsx(
+        "path",
+        {
+          d: "M39.955 81.28 2.138 61.19l12.933-6.818 14.562 7.733 12.218-6.441L27.29 47.93l12.933-6.833L78.04 61.189l-12.934 6.817L51.35 60.7l-12.236 6.457 13.774 7.308-12.933 6.817Z",
+          fill: "#000"
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "path",
+        {
+          fillRule: "evenodd",
+          clipRule: "evenodd",
+          d: "m40.225 0 39.953 21.227-15.073 7.945-13.756-7.308-10.096 5.328 13.775 7.309-15.075 7.945L0 21.22l15.073-7.945 14.562 7.732 10.078-5.313-14.56-7.731L40.225 0ZM29.426 7.967l14.564 7.734L29.63 23.27 15.07 15.537l-10.794 5.69 35.68 18.956 10.793-5.688-13.773-7.307L51.352 19.6l13.757 7.308 10.794-5.69-35.68-18.956-10.797 5.704Z",
+          fill: "#000"
+        }
+      )
+    ]
+  }
+);
+export {
+  HydrogenLogoBaseBW
+};

package/dist/assets/hydrogen/virtual-routes/components/HydrogenLogoBaseColor.jsx

@@ -0,0 +1,47 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+const HydrogenLogoBaseColor = (props) => /* @__PURE__ */ jsxs(
+  "svg",
+  {
+    width: 76,
+    height: 81,
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    ...props,
+    children: [
+      /* @__PURE__ */ jsx(
+        "path",
+        {
+          d: "M37.817 80.149 0 60.057l12.934-6.817 14.561 7.733 12.218-6.441-14.561-7.733 12.933-6.833 37.818 20.091-12.934 6.817-13.757-7.307-12.236 6.457 13.775 7.308-12.934 6.817Z",
+          fill: "#000"
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "path",
+        {
+          d: "M37.818 40.183 0 20.092l12.934-6.818 14.562 7.733 12.218-6.441-14.562-7.733L38.086 0l37.817 20.091-12.934 6.817-13.756-7.307-12.236 6.457 13.774 7.308-12.933 6.817Z",
+          fill: "url(#a)"
+        }
+      ),
+      /* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsxs(
+        "linearGradient",
+        {
+          id: "a",
+          x1: 74.48,
+          y1: 21.654,
+          x2: 18.735,
+          y2: 51.694,
+          gradientUnits: "userSpaceOnUse",
+          children: [
+            /* @__PURE__ */ jsx("stop", { offset: 2e-3, stopColor: "#430470" }),
+            /* @__PURE__ */ jsx("stop", { offset: 0.385, stopColor: "#8E01F0" }),
+            /* @__PURE__ */ jsx("stop", { offset: 0.635, stopColor: "#354CF6" }),
+            /* @__PURE__ */ jsx("stop", { offset: 1, stopColor: "#01FFFF" })
+          ]
+        }
+      ) })
+    ]
+  }
+);
+export {
+  HydrogenLogoBaseColor
+};