fontdue-js 0.1.0-alpha21 → 0.1.0-alpha24

package/dist/components/TypeTester/TypeTesterFloatingToolbar.js

@@ -0,0 +1,88 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _reactRelay = require("react-relay");
+
+var _ConfigContext = _interopRequireDefault(require("../ConfigContext"));
+
+var _TypeTesterContext = require("./TypeTesterContext");
+
+var _TypeTesterFeatures = _interopRequireDefault(require("./TypeTesterFeatures"));
+
+var _TypeTesterToolbar = _interopRequireDefault(require("./TypeTesterToolbar"));
+
+var _TypeTesterFloatingToolbar_testers;
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+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; }
+
+const TypeTesterFloatingToolbar = ({
+  testers: testersData,
+  features,
+  onToolbarOpenClose
+}) => {
+  var _testersData$find, _config$typeTester, _config$typeTester2;
+
+  const config = (0, _react.useContext)(_ConfigContext.default);
+  const {
+    testers
+  } = (0, _react.useContext)(_TypeTesterContext.TypeTesterContext);
+  const id = Object.keys(testers).find(id => testers[id].focused);
+  const [open, setOpen] = (0, _react.useState)(false); // when focus is lost, we lose the latest id, but we don't want to immediately
+  // un-render the toolbar for that id because there's a transition to hide the
+  // toolbar. so this keeps the tools rendered with the last non-null id
+
+  const [activeId, setActiveId] = (0, _react.useState)(id);
+  (0, _react.useEffect)(() => {
+    if (id) {
+      setActiveId(id);
+      setOpen(true); // always open if we get a new id
+    }
+  }, [id]);
+  (0, _react.useEffect)(() => {
+    let observer = new IntersectionObserver(entries => {
+      const entry = entries[0];
+      if (!entry.isIntersecting) setOpen(false);
+      if (entry.isIntersecting) setOpen(true);
+    });
+    const typeTesterElement = document.querySelector("[data-type-tester-id=\"".concat(activeId, "\"]"));
+    if (!typeTesterElement) return;
+    observer.observe(typeTesterElement);
+    return () => {
+      observer.disconnect();
+    };
+  }, [activeId]);
+  (0, _react.useEffect)(() => {
+    onToolbarOpenClose === null || onToolbarOpenClose === void 0 ? void 0 : onToolbarOpenClose(open);
+  }, [onToolbarOpenClose, open]);
+  const fontStyle = (_testersData$find = testersData.find(tester => tester.id === activeId)) === null || _testersData$find === void 0 ? void 0 : _testersData$find.fontStyle;
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: "type-tester__floating-toolbar",
+    onMouseDown: e => e.preventDefault(),
+    "data-open": activeId && open
+  }, activeId && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_TypeTesterToolbar.default, {
+    id: activeId,
+    features: features,
+    config: (_config$typeTester = config.typeTester) !== null && _config$typeTester !== void 0 ? _config$typeTester : {}
+  }), features && fontStyle && /*#__PURE__*/_react.default.createElement(_TypeTesterFeatures.default, {
+    id: activeId,
+    features: features,
+    fontStyle: fontStyle,
+    config: (_config$typeTester2 = config.typeTester) !== null && _config$typeTester2 !== void 0 ? _config$typeTester2 : {}
+  })));
+};
+
+var _default = (0, _reactRelay.createFragmentContainer)(TypeTesterFloatingToolbar, {
+  testers: _TypeTesterFloatingToolbar_testers !== void 0 ? _TypeTesterFloatingToolbar_testers : (_TypeTesterFloatingToolbar_testers = require("../../__generated__/TypeTesterFloatingToolbar_testers.graphql"), _TypeTesterFloatingToolbar_testers.hash && _TypeTesterFloatingToolbar_testers.hash !== "5554933cac70854b361575a5ed0af8ac" && console.error("The definition of 'TypeTesterFloatingToolbar_testers' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _TypeTesterFloatingToolbar_testers)
+});
+
+exports.default = _default;

package/dist/components/TypeTester/TypeTesterStandalone.d.ts

@@ -1,4 +1,5 @@
 import React from 'react';
+import { Alignment } from './types';
 interface TypeTesterStandalone {
     familyName: string;
     styleName: string;
@@ -7,7 +8,10 @@ interface TypeTesterStandalone {
     features?: string;
     content?: string;
     direction?: string;
+    alignment?: Alignment;
     autofit?: string;
+    onFocus?: () => void;
+    onBlur?: () => void;
 }
 declare const TypeTesterStandalone: React.FC<TypeTesterStandalone>;
 export default TypeTesterStandalone;

package/dist/components/TypeTester/TypeTesterStandalone.js

@@ -28,8 +28,11 @@ const TypeTesterStandalone = ({
   direction,
   features,
   lineHeight,
+  alignment,
   fontSize,
-  autofit
+  autofit,
+  onFocus,
+  onBlur
 }) => {
   const environment = (0, _reactRelay.useRelayEnvironment)();
   return /*#__PURE__*/_react.default.createElement(_reactRelay.QueryRenderer, {
@@ -46,19 +49,28 @@ const TypeTesterStandalone = ({
 
       return /*#__PURE__*/_react.default.createElement(_reactStaticContainer.default, {
         shouldUpdate: props
-      }, props && /*#__PURE__*/_react.default.createElement(_TypeTesterContext.default, null, /*#__PURE__*/_react.default.createElement(_index.default, {
+      }, props && /*#__PURE__*/_react.default.createElement(_TypeTesterContext.default, {
+        testers: {
+          standalone: {
+            content: content !== null && content !== void 0 ? content : 'The quick brown fox...',
+            autofit: parseBool(autofit),
+            size: fontSize ? parseFloat(fontSize) : 72,
+            lineHeight: lineHeight ? parseFloat(lineHeight) : 1,
+            alignment: alignment !== null && alignment !== void 0 ? alignment : 'left'
+          }
+        }
+      }, /*#__PURE__*/_react.default.createElement(_index.default, {
+        id: "standalone",
         fontStyleId: (_props$viewer$fontSty = (_props$viewer = props.viewer) === null || _props$viewer === void 0 ? void 0 : (_props$viewer$fontSty2 = _props$viewer.fontStyle) === null || _props$viewer$fontSty2 === void 0 ? void 0 : _props$viewer$fontSty2.id) !== null && _props$viewer$fontSty !== void 0 ? _props$viewer$fontSty : null,
         features: (_features$split = features === null || features === void 0 ? void 0 : features.split(',')) !== null && _features$split !== void 0 ? _features$split : [],
-        content: content !== null && content !== void 0 ? content : 'The quick brown fox...',
-        size: fontSize ? parseFloat(fontSize) : 72,
-        lineHeight: lineHeight ? parseFloat(lineHeight) : 1,
         direction: direction === 'rtl' ? 'rtl' : 'ltr',
-        autofit: parseBool(autofit),
         productId: "TODO",
         config: {
           groupEdit: false,
           buyButton: false
-        }
+        },
+        onFocus: onFocus,
+        onBlur: onBlur
       })));
     }
   });

package/dist/components/TypeTester/TypeTesterState.d.ts

@@ -1,9 +1,6 @@
-import { Content, Size, LineHeight } from './types';
+import { Content, Size, LineHeight, Alignment } from './types';
 interface TypeTesterStateProps {
-    autofit: boolean;
-    initialContent: string;
-    initialSize: Size;
-    initialLineHeight: LineHeight;
+    id: string;
 }
 interface TypeTesterState {
     autofit: boolean;
@@ -22,6 +19,8 @@ interface TypeTesterState {
     toggleFeature: (value: string) => void;
     featuresOpen: boolean;
     toggleFeaturesOpen: (value?: boolean) => void;
+    alignment: Alignment;
+    setAlignment: (value: Alignment) => void;
 }
 declare const useTypeTesterState: (props: TypeTesterStateProps) => TypeTesterState;
 export default useTypeTesterState;

package/dist/components/TypeTester/TypeTesterState.js

@@ -7,89 +7,73 @@ exports.default = void 0;
 
 var _react = require("react");
 
-var _draftJs = require("draft-js");
-
 var _TypeTesterContext = require("./TypeTesterContext");
 
+var _ConfigContext = _interopRequireDefault(require("../ConfigContext"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
 const useTypeTesterState = ({
-  autofit,
-  initialContent,
-  initialSize,
-  initialLineHeight
+  id
 }) => {
+  var _config$typeTester$to, _config$typeTester;
+
+  const config = (0, _react.useContext)(_ConfigContext.default);
   const {
-    content: groupContent,
-    size: groupSize,
-    features: groupFeatures,
-    mode,
+    testers,
+    globalFeaturesOpen,
     dispatch
   } = (0, _react.useContext)(_TypeTesterContext.TypeTesterContext);
-  const [content, setContent] = (0, _react.useState)(_draftJs.EditorState.createWithContent(_draftJs.ContentState.createFromText(initialContent)));
-  const [contentEdited, setContentEdited] = (0, _react.useState)(false);
-  const [autofitState, setAutofit] = (0, _react.useState)(autofit);
-  const [size, setSize] = (0, _react.useState)(initialSize);
-  const [lineHeight, setLineHeight] = (0, _react.useState)(initialLineHeight);
-  const [focused, setFocused] = (0, _react.useState)(false);
-  const [features, setFeatures] = (0, _react.useState)([]);
-  const [featuresOpen, setFeaturesOpen] = (0, _react.useState)(false);
-  (0, _react.useEffect)(() => {
-    if (!focused && groupSize) {
-      setSize(groupSize);
-    }
-  }, [groupSize, focused]);
-  (0, _react.useEffect)(() => {
-    if (!focused && groupContent) {
-      setContent(groupContent);
-    }
-  }, [groupContent, focused]);
-  (0, _react.useEffect)(() => {
-    if (!focused && groupFeatures) {
-      setFeatures(groupFeatures);
-    }
-  }, [groupFeatures, focused]);
+  const toolsPosition = (_config$typeTester$to = config === null || config === void 0 ? void 0 : (_config$typeTester = config.typeTester) === null || _config$typeTester === void 0 ? void 0 : _config$typeTester.toolsPosition) !== null && _config$typeTester$to !== void 0 ? _config$typeTester$to : 'inline';
+  const {
+    content,
+    contentEdited,
+    size,
+    features,
+    focused,
+    featuresOpen,
+    autofit,
+    lineHeight,
+    alignment
+  } = testers[id];
   return {
-    autofit: autofitState,
+    autofit,
     content,
     setContent: value => {
-      const newContent = value.getCurrentContent(); // prevent broadcasting changes if the content didn't change. without this,
-      // changes happen if the editor selection updates which is not desirable
-
-      if (content.getCurrentContent() !== newContent) {
-        setContentEdited(true);
-
-        const copy = _draftJs.EditorState.createWithContent(value.getCurrentContent());
-
-        dispatch({
-          type: 'SET_CONTENT',
-          value: mode === 'group' ? copy : null
-        });
-      }
-
-      setContent(value);
+      dispatch({
+        type: 'SET_CONTENT',
+        id,
+        value
+      });
     },
     contentEdited,
     size,
-    setSize: (value, options = {
-      auto: false
-    }) => {
+    setSize: value => {
       dispatch({
         type: 'SET_SIZE',
-        value: mode === 'group' ? value : null
+        value,
+        id
       });
-
-      if (options.auto === false) {
-        // auto here means the size was set automatically
-        setAutofit(false);
-      }
-
-      setSize(value);
     },
     lineHeight,
-    setLineHeight,
+    setLineHeight: value => dispatch({
+      type: 'SET_LINE_HEIGHT',
+      value,
+      id
+    }),
+    alignment,
+    setAlignment: value => dispatch({
+      type: 'SET_ALIGNMENT',
+      value,
+      id
+    }),
     focused,
     setFocused: value => {
-      if (value === false) setFeaturesOpen(false);
-      setFocused(value);
+      dispatch({
+        type: 'SET_FOCUSED',
+        value,
+        id
+      });
     },
     features,
     toggleFeature: feature => {
@@ -103,12 +87,24 @@ const useTypeTesterState = ({
 
       dispatch({
         type: 'SET_FEATURES',
-        value: mode === 'group' ? value : null
+        value,
+        id
       });
-      setFeatures(value);
     },
-    featuresOpen,
-    toggleFeaturesOpen: value => setFeaturesOpen(open => value !== null && value !== void 0 ? value : !open)
+    featuresOpen: toolsPosition === 'floating' ? globalFeaturesOpen : featuresOpen,
+    toggleFeaturesOpen: value => {
+      if (toolsPosition === 'floating') {
+        dispatch({
+          type: 'TOGGLE_GLOBAL_FEATURES_OPEN'
+        });
+      } else {
+        dispatch({
+          type: 'SET_FEATURES_OPEN',
+          value: value !== null && value !== void 0 ? value : !featuresOpen,
+          id
+        });
+      }
+    }
   };
 };
 

package/dist/components/TypeTester/TypeTesterStyleSelect.js

@@ -35,7 +35,8 @@ const TypeTesterStyleSelect = ({
   }, /*#__PURE__*/_react.default.createElement(_DownArrow.default, null), NBSP, selectedFamily.name), /*#__PURE__*/_react.default.createElement("select", {
     value: selectedFamily.id,
     onChange: e => onSelectFamilyId(e.target.value),
-    className: "type-tester-select__select"
+    className: "type-tester-select__select",
+    onClick: e => e.stopPropagation()
   }, families.map(({
     id,
     name
@@ -49,7 +50,8 @@ const TypeTesterStyleSelect = ({
   }, /*#__PURE__*/_react.default.createElement(_DownArrow.default, null), " ", selectedFontStyle.name), /*#__PURE__*/_react.default.createElement("select", {
     value: selectedFontStyleId,
     onChange: e => onSelectFontStyleId(e.target.value),
-    className: "type-tester-select__select"
+    className: "type-tester-select__select",
+    onClick: e => e.stopPropagation()
   }, selectedFamily.fontStyles.map(({
     id,
     name

package/dist/components/TypeTester/TypeTesterStyleSelectData.d.ts

@@ -3,7 +3,7 @@ import { TypeTesterStyleSelectData_viewer } from '../../__generated__/TypeTester
 import { TypeTesterConfig } from '.';
 interface TypeTesterStyleSelectDataProps {
     fontStyle: TypeTesterStyleSelectData_fontStyle;
-    viewer: TypeTesterStyleSelectData_viewer;
+    viewer: TypeTesterStyleSelectData_viewer | null;
     onSelectFontStyleId: (value: string) => void;
     config: TypeTesterConfig;
 }

package/dist/components/TypeTester/TypeTesterStyleSelectData.js

@@ -50,7 +50,9 @@ const TypeTesterStyleSelectData = ({
   onSelectFontStyleId,
   config
 }) => {
-  const familyData = viewer.families && viewer.families.edges && viewer.families.edges.map(edge => edge && edge.node).filter(_utils.notEmpty);
+  var _viewer$families, _viewer$families$edge;
+
+  const familyData = viewer === null || viewer === void 0 ? void 0 : (_viewer$families = viewer.families) === null || _viewer$families === void 0 ? void 0 : (_viewer$families$edge = _viewer$families.edges) === null || _viewer$families$edge === void 0 ? void 0 : _viewer$families$edge.map(edge => edge.node).filter(_utils.notEmpty);
   const handleSelectFamilyId = (0, _react.useCallback)(id => {
     const family = familyData && familyData.find(family => family.id === id);
     if (!family) return;

package/dist/components/TypeTester/TypeTesterToolbar.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import { TypeTesterConfig } from '.';
+interface TypeTesterToolbar_props {
+    id: string;
+    features: readonly string[] | null | undefined;
+    config: TypeTesterConfig;
+}
+declare const TypeTesterToolbar: React.FC<TypeTesterToolbar_props>;
+export default TypeTesterToolbar;

package/dist/components/TypeTester/TypeTesterToolbar.js

@@ -0,0 +1,57 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _TypeTesterFeaturesButton = _interopRequireDefault(require("./TypeTesterFeaturesButton"));
+
+var _TypeTesterEditAll = _interopRequireDefault(require("./TypeTesterEditAll"));
+
+var _TypeTesterSlider = _interopRequireDefault(require("./TypeTesterSlider"));
+
+var _TypeTesterInput = _interopRequireDefault(require("./TypeTesterInput"));
+
+var _TypeTesterState = _interopRequireDefault(require("./TypeTesterState"));
+
+var _TypeTesterAlignButtons = _interopRequireDefault(require("./TypeTesterAlignButtons"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+const TypeTesterToolbar = ({
+  id,
+  features,
+  config
+}) => {
+  var _config$min, _config$max, _config$min2, _config$max2;
+
+  const props = (0, _TypeTesterState.default)({
+    id
+  });
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: "type-tester__toolbar__tools",
+    onMouseDown: e => e.preventDefault()
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "type-tester__slider"
+  }, config.textInput && /*#__PURE__*/_react.default.createElement(_TypeTesterInput.default, {
+    min: (_config$min = config.min) !== null && _config$min !== void 0 ? _config$min : 10,
+    max: (_config$max = config.max) !== null && _config$max !== void 0 ? _config$max : 200,
+    value: props.size,
+    onChange: props.setSize
+  }), /*#__PURE__*/_react.default.createElement(_TypeTesterSlider.default, {
+    min: (_config$min2 = config.min) !== null && _config$min2 !== void 0 ? _config$min2 : 10,
+    max: (_config$max2 = config.max) !== null && _config$max2 !== void 0 ? _config$max2 : 200,
+    value: props.size,
+    onChange: props.setSize
+  })), Boolean(features === null || features === void 0 ? void 0 : features.length) && /*#__PURE__*/_react.default.createElement(_TypeTesterFeaturesButton.default, props), config.alignmentButtons && /*#__PURE__*/_react.default.createElement(_TypeTesterAlignButtons.default, props), config.groupEdit && /*#__PURE__*/_react.default.createElement(_TypeTesterEditAll.default, _extends({}, props, {
+    config: config
+  })));
+};
+
+var _default = TypeTesterToolbar;
+exports.default = _default;

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

@@ -1,4 +1,5 @@
 import React from 'react';
+import { Alignment } from './types';
 export interface TypeTesterConfig {
     min?: number;
     max?: number;
@@ -9,6 +10,7 @@ export interface TypeTesterConfig {
     initialMode?: 'group' | 'local';
     groupEdit?: boolean;
     shy?: false | true | 'hover' | 'focus';
+    toolsPosition?: 'inline' | 'floating';
     selectButtonStyle?: 'inline' | 'outlined';
     selectButtonLabel?: string;
     truncate?: boolean;
@@ -18,17 +20,18 @@ export interface TypeTesterConfig {
     openTypeFeatures?: {
         columns?: string[][];
     };
+    alignmentButtons?: boolean;
+    initialAlignment?: Alignment;
 }
 export interface TypeTesterBaseProps {
+    id: string;
     productId: string;
-    content: string;
-    size: number;
-    lineHeight: number;
     direction: 'ltr' | 'rtl';
     onSelectFontStyleId: (value: string) => void;
-    features: ReadonlyArray<string> | null;
-    autofit: boolean;
+    features?: readonly string[] | null;
     config?: TypeTesterConfig;
+    onFocus?: () => void;
+    onBlur?: () => void;
 }
 export interface TypeTesterWrapperProps extends Omit<TypeTesterBaseProps, 'onSelectFontStyleId'> {
     fontStyleId: string | null;