fontdue-js 2.8.1 → 2.8.2

package/CHANGELOG.md

@@ -1,3 +1,11 @@
+## 2.8.2
+
+- Fixed hydration issue with the test mode banner
+
+## 2.8.1
+
+- Fixed broken build
+
 ## 2.8.0
 
 - Adds support for new "limit licenses" option on collections

package/dist/__generated__/TestModeBannerQuery.graphql.d.ts

@@ -1,5 +1,5 @@
 /**
- * @generated SignedSource<<f6cfa46ddcfb4ef0838d894753924f32>>
+ * @generated SignedSource<<ffdc64bc9c520bed1ab130ee6260cba2>>
  * @lightSyntaxTransform
  * @nogrep
  */
@@ -7,12 +7,8 @@ import { ConcreteRequest } from 'relay-runtime';
 export type TestModeBannerQuery$variables = Record<PropertyKey, never>;
 export type TestModeBannerQuery$data = {
     readonly viewer: {
-        readonly adminUser: {
-            readonly name: string | null;
-        } | null;
         readonly testMode: {
             readonly isActive: boolean;
-            readonly switchUrl: string;
         };
     };
 };

package/dist/__generated__/TestModeBannerQuery.graphql.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 /**
- * @generated SignedSource<<f6cfa46ddcfb4ef0838d894753924f32>>
+ * @generated SignedSource<<ffdc64bc9c520bed1ab130ee6260cba2>>
  * @lightSyntaxTransform
  * @nogrep
  */
@@ -16,43 +16,21 @@ exports.default = void 0;
 
 const node = function () {
   var v0 = {
+    "alias": null,
+    "args": null,
+    "concreteType": "TestMode",
+    "kind": "LinkedField",
+    "name": "testMode",
+    "plural": false,
+    "selections": [{
       "alias": null,
       "args": null,
-      "concreteType": "TestMode",
-      "kind": "LinkedField",
-      "name": "testMode",
-      "plural": false,
-      "selections": [{
-        "alias": null,
-        "args": null,
-        "kind": "ScalarField",
-        "name": "isActive",
-        "storageKey": null
-      }, {
-        "alias": null,
-        "args": null,
-        "kind": "ScalarField",
-        "name": "switchUrl",
-        "storageKey": null
-      }],
-      "storageKey": null
-    },
-    v1 = {
-      "alias": null,
-      "args": null,
-      "concreteType": "User",
-      "kind": "LinkedField",
-      "name": "adminUser",
-      "plural": false,
-      "selections": [{
-        "alias": null,
-        "args": null,
-        "kind": "ScalarField",
-        "name": "name",
-        "storageKey": null
-      }],
+      "kind": "ScalarField",
+      "name": "isActive",
       "storageKey": null
-    };
+    }],
+    "storageKey": null
+  };
   return {
     "fragment": {
       "argumentDefinitions": [],
@@ -66,7 +44,7 @@ const node = function () {
         "kind": "LinkedField",
         "name": "viewer",
         "plural": false,
-        "selections": [v0 /*: any*/, v1 /*: any*/],
+        "selections": [v0 /*: any*/],
         "storageKey": null
       }],
       "type": "RootQueryType",
@@ -84,7 +62,7 @@ const node = function () {
         "kind": "LinkedField",
         "name": "viewer",
         "plural": false,
-        "selections": [v0 /*: any*/, v1 /*: any*/, {
+        "selections": [v0 /*: any*/, {
           "alias": null,
           "args": null,
           "kind": "ScalarField",
@@ -95,15 +73,15 @@ const node = function () {
       }]
     },
     "params": {
-      "cacheID": "734dcbb0302bfd117e64314cb94029d8",
+      "cacheID": "2cb9255aeee9b1b3edd823ee2f62d8cc",
       "id": null,
       "metadata": {},
       "name": "TestModeBannerQuery",
       "operationKind": "query",
-      "text": "query TestModeBannerQuery {\n  viewer {\n    testMode {\n      isActive\n      switchUrl\n    }\n    adminUser {\n      name\n    }\n    id\n  }\n}\n"
+      "text": "query TestModeBannerQuery {\n  viewer {\n    testMode {\n      isActive\n    }\n    id\n  }\n}\n"
     }
   };
 }();
-node.hash = "82e974c3c8bdef284e02f896ed1680c1";
+node.hash = "60ad67ee88ec6b74dd04bdf5572e7faf";
 var _default = node;
 exports.default = _default;

package/dist/components/CharacterViewer/StyleSelect.d.ts

@@ -0,0 +1,29 @@
+import React from 'react';
+import { VariableSettings } from '../../utils';
+interface StyleSelect_props {
+    collections: {
+        name: string;
+        isVariableFont: boolean;
+        fontStyles: readonly {
+            id: string;
+            name: string;
+            variableInstances: readonly {
+                name: string;
+                coordinates: readonly {
+                    axis: string;
+                    value: number;
+                }[];
+            }[] | null;
+        }[] | null;
+    }[];
+    value: {
+        fontStyleId: string | null;
+        variableSettings?: VariableSettings;
+    };
+    onChange: (value: {
+        fontStyleId: string;
+        variableSettings?: VariableSettings;
+    }) => void;
+}
+export default function StyleSelect({ collections, value, onChange }: StyleSelect_props): React.JSX.Element;
+export {};

package/dist/components/CharacterViewer/StyleSelect.js

@@ -0,0 +1,71 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = StyleSelect;
+var _react = _interopRequireDefault(require("react"));
+var _Select = _interopRequireDefault(require("../Select"));
+var _utils = require("../../utils");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function StyleSelect(_ref) {
+  let {
+    collections,
+    value,
+    onChange
+  } = _ref;
+  const handleChange = e => {
+    const value = e.target.value;
+    if (value.includes(':::')) {
+      var _fontStyle$variableIn;
+      const [fontStyleId, variableInstanceName] = value.split(':::');
+      const fontStyle = collections.flatMap(coll => coll.fontStyles).find(style => style.id === fontStyleId);
+      const instance = fontStyle === null || fontStyle === void 0 ? void 0 : (_fontStyle$variableIn = fontStyle.variableInstances) === null || _fontStyle$variableIn === void 0 ? void 0 : _fontStyle$variableIn.find(_ref2 => {
+        let {
+          name
+        } = _ref2;
+        return name === variableInstanceName;
+      });
+      let variableSettings;
+      if (instance) variableSettings = (0, _utils.variableInstanceSettings)(instance);
+      onChange({
+        fontStyleId,
+        variableSettings
+      });
+    } else {
+      onChange({
+        fontStyleId: value
+      });
+    }
+  };
+  let selectValue = value.fontStyleId;
+  if (value.variableSettings) {
+    var _fontStyle$variableIn2;
+    const fontStyle = collections.flatMap(coll => coll.fontStyles).find(style => style.id === value.fontStyleId);
+    const instance = fontStyle === null || fontStyle === void 0 ? void 0 : (_fontStyle$variableIn2 = fontStyle.variableInstances) === null || _fontStyle$variableIn2 === void 0 ? void 0 : _fontStyle$variableIn2.find(instance => (0, _utils.compareVariableSettings)(instance, value.variableSettings));
+    if (instance) {
+      selectValue = `${value.fontStyleId}:::${instance.name}`;
+    }
+  }
+  return /*#__PURE__*/_react.default.createElement(_Select.default, {
+    options: collections.flatMap(coll => {
+      var _coll$fontStyles2;
+      if (coll.isVariableFont) {
+        var _coll$fontStyles;
+        return ((_coll$fontStyles = coll.fontStyles) === null || _coll$fontStyles === void 0 ? void 0 : _coll$fontStyles.flatMap(style => {
+          var _style$variableInstan;
+          return (_style$variableInstan = style.variableInstances) === null || _style$variableInstan === void 0 ? void 0 : _style$variableInstan.map(instance => ({
+            value: `${style.id}:::${instance.name}`,
+            text: `${coll.name} ${instance.name}`
+          })).filter(_utils.notEmpty);
+        }).filter(_utils.notEmpty)) ?? [];
+      }
+      return ((_coll$fontStyles2 = coll.fontStyles) === null || _coll$fontStyles2 === void 0 ? void 0 : _coll$fontStyles2.map(style => ({
+        value: style.id,
+        text: `${coll.name} ${style.name}`
+      })).filter(_utils.notEmpty)) ?? [];
+    }),
+    value: selectValue,
+    onChange: handleChange
+  });
+}

package/dist/components/FontdueProvider/index.server.js

@@ -12,8 +12,8 @@ Object.defineProperty(exports, "FontdueProvider_props", {
 exports.default = FontdueProvider;
 var _react = _interopRequireDefault(require("react"));
 var _Stylesheet = require("../Stylesheet");
-var _index = _interopRequireDefault(require("../TestModeBanner/index.server"));
-var _index2 = _interopRequireDefault(require("../ThemeConfig/index.server"));
+var _TestModeBanner = _interopRequireDefault(require("../TestModeBanner"));
+var _index = _interopRequireDefault(require("../ThemeConfig/index.server"));
 var _FontdueProviderClientComponent = _interopRequireWildcard(require("./FontdueProviderClientComponent"));
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
@@ -23,5 +23,5 @@ async function FontdueProvider(_ref) {
     children,
     ...rest
   } = _ref;
-  return /*#__PURE__*/_react.default.createElement(_FontdueProviderClientComponent.default, rest, /*#__PURE__*/_react.default.createElement(_Stylesheet.StylesheetContainer, null), /*#__PURE__*/_react.default.createElement(_index.default, null), /*#__PURE__*/_react.default.createElement(_index2.default, null), children);
+  return /*#__PURE__*/_react.default.createElement(_FontdueProviderClientComponent.default, rest, /*#__PURE__*/_react.default.createElement(_Stylesheet.StylesheetContainer, null), /*#__PURE__*/_react.default.createElement(_TestModeBanner.default, null), /*#__PURE__*/_react.default.createElement(_index.default, null), children);
 }

package/dist/components/Switch/index.d.ts

@@ -0,0 +1 @@
+export default function Switch(): void;

package/dist/components/Switch/index.js

@@ -0,0 +1,7 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = Switch;
+function Switch() {}

package/dist/components/TestModeBanner/index.d.ts

@@ -1,7 +1,2 @@
 import React from 'react';
-import { TestModeBannerQuery } from '../../__generated__/TestModeBannerQuery.graphql';
-import { SerializablePreloadedQuery } from '../../relay/loadSerializableQuery';
-export declare function TestModeBannerPreloadedQueryRenderer({ preloadedQuery, }: {
-    preloadedQuery: SerializablePreloadedQuery<TestModeBannerQuery>;
-}): React.JSX.Element;
 export default function TestModeBanner(): React.JSX.Element;

package/dist/components/TestModeBanner/index.js

@@ -4,30 +4,21 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.TestModeBannerPreloadedQueryRenderer = TestModeBannerPreloadedQueryRenderer;
 exports.default = TestModeBanner;
 var _TestModeBannerQuery2 = _interopRequireDefault(require("../../__generated__/TestModeBannerQuery.graphql"));
 var _react = _interopRequireDefault(require("react"));
 var _reactRelay = require("react-relay");
-var _useSerializablePreloadedQuery = _interopRequireDefault(require("../../relay/useSerializablePreloadedQuery"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-const getSwitchable = switchUrl => new URL(switchUrl).hostname === location.hostname;
 function TestModeBannerComponent(_ref) {
-  var _data$viewer;
   let {
     data
   } = _ref;
-  if (!((_data$viewer = data.viewer) !== null && _data$viewer !== void 0 && _data$viewer.adminUser)) return null;
   const {
-    isActive,
-    switchUrl
+    isActive
   } = data.viewer.testMode;
-  const switchable = getSwitchable(switchUrl);
 
-  // current host !== the tenant switchUrl implies that this site is running
-  // as a 'standalone' app. we don't know the location of the test app, so this
-  // link doesn't work. let's hide the banner completely if we're in live mode
-  if (!isActive && !switchable) return null;
+  // hide the banner completely if we're in live mode
+  if (!isActive) return null;
   return /*#__PURE__*/_react.default.createElement("div", {
     className: "test-mode-banner__banner",
     "data-test-mode": isActive
@@ -35,23 +26,9 @@ function TestModeBannerComponent(_ref) {
     className: "test-mode-banner__content"
   }, /*#__PURE__*/_react.default.createElement("div", {
     className: "test-mode-banner__title"
-  }, "Viewing ", isActive ? 'test data' : 'live data'), /*#__PURE__*/_react.default.createElement("div", {
-    className: "test-mode-banner__rest"
-  }, switchable && /*#__PURE__*/_react.default.createElement("a", {
-    href: switchUrl
-  }, "Switch to ", isActive ? 'live' : 'test', " data"))));
-}
-const query = (_TestModeBannerQuery2.default.hash && _TestModeBannerQuery2.default.hash !== "82e974c3c8bdef284e02f896ed1680c1" && console.error("The definition of 'TestModeBannerQuery' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _TestModeBannerQuery2.default);
-function TestModeBannerPreloadedQueryRenderer(_ref2) {
-  let {
-    preloadedQuery
-  } = _ref2;
-  const queryRef = (0, _useSerializablePreloadedQuery.default)(preloadedQuery);
-  const data = (0, _reactRelay.usePreloadedQuery)(query, queryRef);
-  return /*#__PURE__*/_react.default.createElement(TestModeBannerComponent, {
-    data: data
-  });
+  }, "Viewing test data")));
 }
+const query = (_TestModeBannerQuery2.default.hash && _TestModeBannerQuery2.default.hash !== "60ad67ee88ec6b74dd04bdf5572e7faf" && console.error("The definition of 'TestModeBannerQuery' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _TestModeBannerQuery2.default);
 function TestModeBanner() {
   const data = (0, _reactRelay.useLazyLoadQuery)(query, {});
   return /*#__PURE__*/_react.default.createElement(TestModeBannerComponent, {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "fontdue-js",
-  "version": "2.8.1",
+  "version": "2.8.2",
   "scripts": {
     "build": "npm run relay && run-p build-js build-css build-ts-declarations",
     "build-js": "babel src --out-dir dist --extensions .ts,.tsx,.js,.jsx",