@wix/motion 1.659.0 → 2.0.0-rc.2

package/dist/cjs/playground/animationsMotionScroll.stories.js

@@ -1,270 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-exports.__esModule = true;
-exports.default = exports.Scroll = void 0;
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-var _react = _interopRequireDefault(require("react"));
-var _fizban = require("fizban");
-var _effectsKit = require("@wix/effects-kit");
-var _controls = require("./controls");
-var _playgroundModule = _interopRequireDefault(require("./playground.module.scss"));
-var _playgroundCommon = require("./playground-common");
-var _motion = require("../motion");
-var _scroll = require("../library/scroll");
-var _jsxFileName = "/home/builduser/work/5a10c7a05f300a84/packages/motion/dist/cjs/playground/animationsMotionScroll.stories.tsx";
-var _default = exports.default = {
-  title: 'Animation Playground/Scroll'
-};
-const Scroll = () => {
-  var _animations;
-  const compRef = _react.default.useRef(null);
-  const stageRef = _react.default.useRef(null);
-  const animationScene = _react.default.useRef();
-  const animationGroup = _react.default.useRef();
-  const scroll = _react.default.useRef();
-  const [schemaEditor, setSchemaEditor] = _react.default.useState('responsive');
-  const [selectedRange, setSelectedRange] = _react.default.useState('in');
-  const animations = Object.fromEntries((0, _effectsKit.getPresets)(_effectsKit.CONFIG[_playgroundCommon.schemaMapper[schemaEditor]][_playgroundCommon.rangeMapper[selectedRange]]).map(preset => [preset.name, {
-    schema: preset.schema,
-    range: preset.range
-  }]));
-  const implementedAnimations = Object.keys(_scroll.scrollAnimations).filter(animationName => animations[animationName]);
-  const [animName, setAnimName] = _react.default.useState(implementedAnimations[0]);
-  const [rotation, setRotation] = _react.default.useState(0);
-  const schema = animations[animName].schema || {};
-  const [attachment, setAttachment] = _react.default.useState('scroll');
-  const [data, setData] = _react.default.useState((0, _playgroundCommon.mapSchemaToDefaultData)(schema));
-  _react.default.useEffect(() => {
-    setData((0, _playgroundCommon.mapSchemaToDefaultData)(animations[animName].schema, schemaEditor));
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [schemaEditor, selectedRange]);
-  _react.default.useEffect(() => {
-    var _compRef$current;
-    (_compRef$current = compRef.current) == null || _compRef$current.getAnimations().forEach(a => {
-      a.cancel();
-    }); // removing all previously selected animations
-    if (compRef.current) {
-      animateText(compRef.current, animName, data);
-    }
-
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [data, animName, rotation, animationGroup]);
-  console.log('animation', animations[animName]);
-  console.log('data', data);
-  function toggleAttachment() {
-    // Change value of CSS variable
-    attachment === 'fixed' ? setAttachment('scroll') : setAttachment('fixed');
-  }
-  function animateText(el, name, {
-    duration = 1000,
-    delay = 0,
-    start = 0,
-    end = 100,
-    range = selectedRange,
-    easing = '',
-    ...params
-  }) {
-    const animationInstanceParams = [el.id, {
-      id: '',
-      easing,
-      namedEffect: {
-        id: '',
-        type: name,
-        range,
-        ...params
-      },
-      fill: 'both',
-      iterations: 1,
-      startOffset: {
-        name: 'cover',
-        offset: {
-          value: start,
-          type: 'percentage'
-        }
-      },
-      endOffset: {
-        name: 'cover',
-        offset: {
-          value: end,
-          type: 'percentage'
-        }
-      }
-    }, {
-      trigger: 'view-progress',
-      componentId: el.id,
-      element: el,
-      id: ''
-    }];
-    if (window.ViewTimeline) {
-      var _animationGroup$curre;
-      // Clear
-      (_animationGroup$curre = animationGroup.current) == null || _animationGroup$curre.cancel();
-      // Animate
-      animationGroup.current = (0, _motion.getWebAnimation)(...animationInstanceParams);
-    } else {
-      var _scroll$current;
-      // Create Scene
-      animationScene.current = (0, _motion.getScrubScene)(...animationInstanceParams);
-      console.log(start, end, params);
-
-      // Clear
-      (_scroll$current = scroll.current) == null || _scroll$current.destroy();
-
-      // Animate
-      scroll.current = new _fizban.Scroll({
-        root: stageRef.current,
-        observeViewportEntry: false,
-        // observeViewportResize: false,
-        scenes: [animationScene.current]
-      });
-      scroll.current.start();
-    }
-  }
-  function handleControlChange(name, value) {
-    setData(currentData => ({
-      ...currentData,
-      [name]: value
-    }));
-  }
-  return /*#__PURE__*/_react.default.createElement("div", {
-    className: `${_playgroundModule.default.stage} ${_playgroundModule.default.scrollStage}`,
-    ref: stageRef,
-    __self: void 0,
-    __source: {
-      fileName: _jsxFileName,
-      lineNumber: 201,
-      columnNumber: 5
-    }
-  }, /*#__PURE__*/_react.default.createElement("button", {
-    className: `${_playgroundModule.default.attachButton}`,
-    onClick: toggleAttachment,
-    __self: void 0,
-    __source: {
-      fileName: _jsxFileName,
-      lineNumber: 202,
-      columnNumber: 7
-    }
-  }, "Toggle Attachment"), /*#__PURE__*/_react.default.createElement("div", {
-    className: _playgroundModule.default.components,
-    style: {
-      '--attachment': attachment
-    },
-    __self: void 0,
-    __source: {
-      fileName: _jsxFileName,
-      lineNumber: 205,
-      columnNumber: 7
-    }
-  }, /*#__PURE__*/_react.default.createElement("div", {
-    id: "comp1",
-    className: _playgroundModule.default.component,
-    ref: compRef,
-    style: {
-      '--comp-rotate-z': `${rotation}deg`,
-      background: 'MediumVioletRed'
-    },
-    __self: void 0,
-    __source: {
-      fileName: _jsxFileName,
-      lineNumber: 209,
-      columnNumber: 9
-    }
-  }, "Scroll")), /*#__PURE__*/_react.default.createElement("div", {
-    className: _playgroundModule.default.panels,
-    __self: void 0,
-    __source: {
-      fileName: _jsxFileName,
-      lineNumber: 223,
-      columnNumber: 7
-    }
-  }, /*#__PURE__*/_react.default.createElement("div", {
-    className: _playgroundModule.default.globalControls,
-    __self: void 0,
-    __source: {
-      fileName: _jsxFileName,
-      lineNumber: 224,
-      columnNumber: 9
-    }
-  }, /*#__PURE__*/_react.default.createElement(_controls.NumberInput, {
-    label: "Rotation",
-    value: rotation,
-    min: 0,
-    max: 360,
-    step: 1,
-    onChange: event => setRotation(event.target.valueAsNumber),
-    __self: void 0,
-    __source: {
-      fileName: _jsxFileName,
-      lineNumber: 225,
-      columnNumber: 11
-    }
-  }), /*#__PURE__*/_react.default.createElement(_controls.SelectInput, {
-    onChange: event => {
-      const value = event.target.value;
-      setSchemaEditor(value);
-      // Reset "power" when changing editor
-      // handleControlChange('power', undefined);
-    },
-    value: schemaEditor,
-    options: ['desktop', 'mobile', 'responsive'],
-    className: _playgroundModule.default.mainSelect,
-    __self: void 0,
-    __source: {
-      fileName: _jsxFileName,
-      lineNumber: 233,
-      columnNumber: 11
-    }
-  }), /*#__PURE__*/_react.default.createElement(_controls.SelectInput, {
-    onChange: event => {
-      const value = event.target.value;
-      setSelectedRange(value);
-    },
-    value: selectedRange,
-    options: (_animations = animations[animName]) == null || (_animations = _animations.range) == null ? void 0 : _animations.enum,
-    className: _playgroundModule.default.mainSelect,
-    __self: void 0,
-    __source: {
-      fileName: _jsxFileName,
-      lineNumber: 244,
-      columnNumber: 11
-    }
-  }), /*#__PURE__*/_react.default.createElement(_controls.SelectInput, {
-    onChange: event => {
-      const value = event.target.value;
-      setAnimName(value);
-      setData((0, _playgroundCommon.mapSchemaToDefaultData)(animations[value].schema || {}, schemaEditor));
-    },
-    value: animName,
-    options: Object.keys(animations).map(name => [name, implementedAnimations.includes(name)]),
-    className: _playgroundModule.default.mainSelect,
-    __self: void 0,
-    __source: {
-      fileName: _jsxFileName,
-      lineNumber: 256,
-      columnNumber: 11
-    }
-  })), /*#__PURE__*/_react.default.createElement("div", {
-    className: _playgroundModule.default.controls,
-    __self: void 0,
-    __source: {
-      fileName: _jsxFileName,
-      lineNumber: 278,
-      columnNumber: 9
-    }
-  }, Object.entries(schema).filter(([name]) => !['duration', 'delay', 'allowReplay'].includes(name)).map(([name, controlProps], i) => /*#__PURE__*/_react.default.createElement(_controls.Control, (0, _extends2.default)({
-    key: `key-control-${i}`
-  }, controlProps, {
-    value: data[name],
-    label: name,
-    onChange: (_e, value) => handleControlChange(name, value),
-    __self: void 0,
-    __source: {
-      fileName: _jsxFileName,
-      lineNumber: 306,
-      columnNumber: 15
-    }
-  }))))));
-};
-exports.Scroll = Scroll;
-//# sourceMappingURL=animationsMotionScroll.stories.js.map

package/dist/cjs/playground/animationsMotionScroll.stories.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["_react","_interopRequireDefault","require","_fizban","_effectsKit","_controls","_playgroundModule","_playgroundCommon","_motion","_scroll","_jsxFileName","_default","exports","default","title","Scroll","_animations","compRef","React","useRef","stageRef","animationScene","animationGroup","scroll","schemaEditor","setSchemaEditor","useState","selectedRange","setSelectedRange","animations","Object","fromEntries","getPresets","CONFIG","schemaMapper","rangeMapper","map","preset","name","schema","range","implementedAnimations","keys","defs","filter","animationName","animName","setAnimName","rotation","setRotation","attachment","setAttachment","data","setData","mapSchemaToDefaultData","useEffect","_compRef$current","current","getAnimations","forEach","a","cancel","animateText","console","log","toggleAttachment","el","duration","delay","start","end","easing","params","animationInstanceParams","id","namedEffect","type","fill","iterations","startOffset","offset","value","endOffset","trigger","componentId","element","window","ViewTimeline","_animationGroup$curre","getWebAnimation","_scroll$current","getScrubScene","destroy","ScrollLib","root","observeViewportEntry","scenes","handleControlChange","currentData","createElement","className","styles","stage","scrollStage","ref","__self","__source","fileName","lineNumber","columnNumber","attachButton","onClick","components","style","component","background","panels","globalControls","NumberInput","label","min","max","step","onChange","event","target","valueAsNumber","SelectInput","options","mainSelect","enum","includes","controls","entries","controlProps","i","Control","_extends2","key","_e"],"sources":["../../../src/playground/animationsMotionScroll.stories.tsx"],"sourcesContent":["import React from 'react';\nimport { Scroll as ScrollLib } from 'fizban';\n\nimport { getPresets, CONFIG } from '@wix/effects-kit';\n\nimport { Control, NumberInput, SelectInput } from './controls';\nimport styles from './playground.module.scss';\nimport {\n  mapSchemaToDefaultData,\n  schemaMapper,\n  rangeMapper,\n} from './playground-common';\nimport { AnimationGroup, getScrubScene, getWebAnimation } from '../motion';\nimport { scrollAnimations as defs } from '../library/scroll';\n\nimport type { SchemaEditor } from './playground-common';\nimport type { CSSProperties } from 'react';\nimport type { Meta } from '@wix/yoshi-storybook-dependencies';\nimport type {\n  EffectConfig,\n  ScrollEffectConfig,\n  EffectPreset,\n  OneOfScrollEffects,\n  AllEffectsNames,\n  OneOfEffects,\n} from '@wix/effects-kit';\nimport type {\n  AnimationOptions,\n  EffectScrollRange,\n  ScrollAnimation,\n  TriggerVariant,\n} from '../types';\n\nexport default {\n  title: 'Animation Playground/Scroll',\n} as Meta;\n\nexport const Scroll: React.FC<any> = () => {\n  const compRef = React.useRef<HTMLDivElement>(null);\n  const stageRef = React.useRef<HTMLDivElement>(null);\n  const animationScene = React.useRef<ReturnType<typeof getScrubScene>>();\n  const animationGroup = React.useRef<AnimationGroup>();\n  const scroll = React.useRef<typeof ScrollLib>();\n\n  const [schemaEditor, setSchemaEditor] =\n    React.useState<SchemaEditor>('responsive');\n\n  const [selectedRange, setSelectedRange] =\n    React.useState<EffectScrollRange>('in');\n\n  const animations = Object.fromEntries(\n    getPresets(\n      CONFIG[schemaMapper[schemaEditor]][rangeMapper[selectedRange]],\n    ).map((preset: EffectPreset) => [\n      preset.name,\n      {\n        schema: preset.schema,\n        range: (preset as ScrollEffectConfig<OneOfScrollEffects>).range,\n      },\n    ]),\n  ) as Record<AllEffectsNames, ScrollEffectConfig<OneOfScrollEffects>>;\n\n  const implementedAnimations = Object.keys(defs).filter(\n    (animationName) => animations[animationName as AllEffectsNames],\n  ) as AllEffectsNames[];\n\n  const [animName, setAnimName] = React.useState<AllEffectsNames>(\n    implementedAnimations[0],\n  );\n\n  const [rotation, setRotation] = React.useState<number>(0);\n\n  const schema = (animations[animName].schema ||\n    {}) as EffectConfig<OneOfEffects>['schema'];\n  const [attachment, setAttachment] = React.useState<string>('scroll');\n\n  const [data, setData] = React.useState<Record<string, any>>(\n    mapSchemaToDefaultData(schema),\n  );\n\n  React.useEffect(() => {\n    setData(\n      mapSchemaToDefaultData(\n        animations[animName as AllEffectsNames]\n          .schema as EffectConfig<OneOfEffects>['schema'],\n        schemaEditor,\n      ),\n    );\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [schemaEditor, selectedRange]);\n\n  React.useEffect(() => {\n    compRef.current?.getAnimations().forEach((a) => {\n      a.cancel();\n    }); // removing all previously selected animations\n    if (compRef.current) {\n      animateText(compRef.current, animName, data);\n    }\n\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [data, animName, rotation, animationGroup]);\n\n  console.log('animation', animations[animName]);\n  console.log('data', data);\n\n  function toggleAttachment() {\n    // Change value of CSS variable\n    attachment === 'fixed' ? setAttachment('scroll') : setAttachment('fixed');\n  }\n\n  function animateText(\n    el: HTMLElement,\n    name: string,\n    {\n      duration = 1000,\n      delay = 0,\n      start = 0,\n      end = 100,\n      range = selectedRange,\n      easing = '',\n      ...params\n    }: {\n      duration?: number;\n      delay?: number;\n      start?: number;\n      end?: number;\n      easing?: string;\n      range?: EffectScrollRange;\n    },\n  ) {\n    const animationInstanceParams: [\n      string,\n      AnimationOptions,\n      TriggerVariant & { element?: HTMLElement },\n    ] = [\n      el.id,\n      {\n        id: '',\n        easing,\n        namedEffect: {\n          id: '',\n          type: name,\n          range,\n          ...params,\n        } as ScrollAnimation,\n        fill: 'both',\n        iterations: 1,\n        startOffset: {\n          name: 'cover',\n          offset: {\n            value: start,\n            type: 'percentage',\n          },\n        },\n        endOffset: {\n          name: 'cover',\n          offset: {\n            value: end,\n            type: 'percentage',\n          },\n        },\n      },\n      { trigger: 'view-progress', componentId: el.id, element: el, id: '' },\n    ];\n\n    if (window.ViewTimeline) {\n      // Clear\n      animationGroup.current?.cancel();\n      // Animate\n      animationGroup.current = getWebAnimation(\n        ...animationInstanceParams,\n      ) as AnimationGroup;\n    } else {\n      // Create Scene\n      animationScene.current = getScrubScene(...animationInstanceParams);\n\n      console.log(start, end, params);\n\n      // Clear\n      scroll.current?.destroy();\n\n      // Animate\n      scroll.current = new ScrollLib({\n        root: stageRef.current,\n        observeViewportEntry: false,\n        // observeViewportResize: false,\n        scenes: [animationScene.current],\n      });\n      scroll.current.start();\n    }\n  }\n\n  function handleControlChange(name: string, value: any) {\n    setData((currentData) => ({\n      ...currentData,\n      [name]: value,\n    }));\n  }\n\n  return (\n    <div className={`${styles.stage} ${styles.scrollStage}`} ref={stageRef}>\n      <button className={`${styles.attachButton}`} onClick={toggleAttachment}>\n        Toggle Attachment\n      </button>\n      <div\n        className={styles.components}\n        style={{ '--attachment': attachment } as CSSProperties}\n      >\n        <div\n          id=\"comp1\"\n          className={styles.component}\n          ref={compRef}\n          style={\n            {\n              '--comp-rotate-z': `${rotation}deg`,\n              background: 'MediumVioletRed',\n            } as CSSProperties\n          }\n        >\n          Scroll\n        </div>\n      </div>\n      <div className={styles.panels}>\n        <div className={styles.globalControls}>\n          <NumberInput\n            label=\"Rotation\"\n            value={rotation}\n            min={0}\n            max={360}\n            step={1}\n            onChange={(event) => setRotation(event.target.valueAsNumber)}\n          />\n          <SelectInput\n            onChange={(event) => {\n              const value: SchemaEditor = event.target.value;\n              setSchemaEditor(value);\n              // Reset \"power\" when changing editor\n              // handleControlChange('power', undefined);\n            }}\n            value={schemaEditor}\n            options={['desktop', 'mobile', 'responsive']}\n            className={styles.mainSelect}\n          />\n          <SelectInput\n            onChange={(event) => {\n              const value: EffectScrollRange = event.target.value;\n              setSelectedRange(value);\n            }}\n            value={selectedRange}\n            options={\n              animations[animName as AllEffectsNames]?.range\n                ?.enum as EffectScrollRange[]\n            }\n            className={styles.mainSelect}\n          />\n          <SelectInput\n            onChange={(event) => {\n              const value: AllEffectsNames = event.target.value;\n              setAnimName(value);\n              setData(\n                mapSchemaToDefaultData(\n                  (animations[value].schema ||\n                    {}) as EffectConfig<OneOfEffects>['schema'],\n                  schemaEditor,\n                ),\n              );\n            }}\n            value={animName}\n            options={\n              Object.keys(animations).map((name) => [\n                name,\n                implementedAnimations.includes(name as AllEffectsNames),\n              ]) as [string, boolean][]\n            }\n            className={styles.mainSelect}\n          />\n        </div>\n        <div className={styles.controls}>\n          {/* <Control\n            default=\"in\"\n            type=\"string\"\n            label=\"type\"\n            enum={['in', 'out', 'continuous']}\n            value={data.range}\n            onChange={(_e, value) =>\n              handleControlChange('range', value as EffectRangeAll)\n            }\n          /> */}\n          {/* {data.range !== 'continuous' && (\n            <Control\n              default={50}\n              type=\"number\"\n              label={offsetType}\n              min={0}\n              max={100}\n              step={1}\n              value={data[offsetType]}\n              onChange={(_e, value) => handleControlChange(offsetType, value)}\n            />\n          )} */}\n          {Object.entries(schema)\n            .filter(\n              ([name]) => !['duration', 'delay', 'allowReplay'].includes(name),\n            )\n            .map(([name, controlProps], i) => (\n              <Control\n                key={`key-control-${i}`}\n                {...controlProps}\n                value={data[name]}\n                label={name}\n                onChange={(_e, value) => handleControlChange(name, value)}\n              />\n            ))}\n        </div>\n      </div>\n    </div>\n  );\n};\n"],"mappings":"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","ignoreList":[]}

package/dist/cjs/playground/controls.js

@@ -1,334 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-exports.__esModule = true;
-exports.SelectInput = exports.NumberWithUnitsInput = exports.NumberInput = exports.Control = exports.BooleanInput = void 0;
-var _react = _interopRequireDefault(require("react"));
-var _playgroundModule = _interopRequireDefault(require("./playground.module.scss"));
-var _jsxFileName = "/home/builduser/work/5a10c7a05f300a84/packages/motion/dist/cjs/playground/controls.tsx";
-const NumberInput = props => {
-  const {
-    value,
-    min,
-    max,
-    step,
-    onChange
-  } = props;
-  return /*#__PURE__*/_react.default.createElement("label", {
-    className: [_playgroundModule.default.label, props.className].filter(v => v).join(' '),
-    __self: void 0,
-    __source: {
-      fileName: _jsxFileName,
-      lineNumber: 34,
-      columnNumber: 5
-    }
-  }, props.label && /*#__PURE__*/_react.default.createElement("h3", {
-    __self: void 0,
-    __source: {
-      fileName: _jsxFileName,
-      lineNumber: 37,
-      columnNumber: 23
-    }
-  }, props.label), /*#__PURE__*/_react.default.createElement("div", {
-    className: _playgroundModule.default.range,
-    __self: void 0,
-    __source: {
-      fileName: _jsxFileName,
-      lineNumber: 38,
-      columnNumber: 7
-    }
-  }, /*#__PURE__*/_react.default.createElement("input", {
-    type: "range",
-    value,
-    min,
-    max,
-    step,
-    onChange,
-    __self: void 0,
-    __source: {
-      fileName: _jsxFileName,
-      lineNumber: 39,
-      columnNumber: 9
-    }
-  }), /*#__PURE__*/_react.default.createElement("input", {
-    type: "number",
-    value,
-    min,
-    max,
-    step,
-    onChange,
-    __self: void 0,
-    __source: {
-      fileName: _jsxFileName,
-      lineNumber: 40,
-      columnNumber: 9
-    }
-  })));
-};
-exports.NumberInput = NumberInput;
-const NumberWithUnitsInput = props => {
-  const {
-    value,
-    min,
-    max,
-    step,
-    onChange,
-    onUnitChange
-  } = props;
-  return /*#__PURE__*/_react.default.createElement("label", {
-    className: [_playgroundModule.default.label, props.className].filter(v => v).join(' '),
-    __self: void 0,
-    __source: {
-      fileName: _jsxFileName,
-      lineNumber: 60,
-      columnNumber: 5
-    }
-  }, props.label && /*#__PURE__*/_react.default.createElement("h3", {
-    __self: void 0,
-    __source: {
-      fileName: _jsxFileName,
-      lineNumber: 63,
-      columnNumber: 23
-    }
-  }, props.label), /*#__PURE__*/_react.default.createElement("div", {
-    className: _playgroundModule.default.rangeUnit,
-    __self: void 0,
-    __source: {
-      fileName: _jsxFileName,
-      lineNumber: 64,
-      columnNumber: 7
-    }
-  }, /*#__PURE__*/_react.default.createElement("input", {
-    type: "range",
-    value,
-    min,
-    max,
-    step,
-    onChange,
-    __self: void 0,
-    __source: {
-      fileName: _jsxFileName,
-      lineNumber: 65,
-      columnNumber: 9
-    }
-  }), /*#__PURE__*/_react.default.createElement("input", {
-    type: "number",
-    value,
-    min,
-    max,
-    step,
-    onChange,
-    __self: void 0,
-    __source: {
-      fileName: _jsxFileName,
-      lineNumber: 66,
-      columnNumber: 9
-    }
-  }), /*#__PURE__*/_react.default.createElement("select", {
-    value: props.unit,
-    onChange: onUnitChange,
-    __self: void 0,
-    __source: {
-      fileName: _jsxFileName,
-      lineNumber: 67,
-      columnNumber: 9
-    }
-  }, props.units.map(u => /*#__PURE__*/_react.default.createElement("option", {
-    value: u,
-    key: props.label + u,
-    __self: void 0,
-    __source: {
-      fileName: _jsxFileName,
-      lineNumber: 69,
-      columnNumber: 13
-    }
-  }, u === 'percentage' ? '%' : u)))));
-};
-exports.NumberWithUnitsInput = NumberWithUnitsInput;
-const SelectInput = props => /*#__PURE__*/_react.default.createElement("label", {
-  className: [_playgroundModule.default.label, props.className].filter(v => v).join(' '),
-  __self: void 0,
-  __source: {
-    fileName: _jsxFileName,
-    lineNumber: 87,
-    columnNumber: 3
-  }
-}, props.label && /*#__PURE__*/_react.default.createElement("h3", {
-  __self: void 0,
-  __source: {
-    fileName: _jsxFileName,
-    lineNumber: 88,
-    columnNumber: 21
-  }
-}, props.label), /*#__PURE__*/_react.default.createElement("select", {
-  value: props.value,
-  onChange: props.onChange,
-  disabled: props.disabled,
-  __self: void 0,
-  __source: {
-    fileName: _jsxFileName,
-    lineNumber: 89,
-    columnNumber: 5
-  }
-}, props.options.map((val, i) => /*#__PURE__*/_react.default.createElement("option", {
-  key: `key${i}`,
-  value: Array.isArray(val) ? val[0] : val,
-  disabled: Array.isArray(val) ? !val[1] : false,
-  __self: void 0,
-  __source: {
-    fileName: _jsxFileName,
-    lineNumber: 95,
-    columnNumber: 9
-  }
-}, Array.isArray(val) ? val[0] : val))));
-exports.SelectInput = SelectInput;
-const BooleanInput = props => /*#__PURE__*/_react.default.createElement("label", {
-  className: [_playgroundModule.default.label, _playgroundModule.default.labelBool, props.className].filter(v => v).join(' '),
-  __self: void 0,
-  __source: {
-    fileName: _jsxFileName,
-    lineNumber: 117,
-    columnNumber: 3
-  }
-}, props.label && /*#__PURE__*/_react.default.createElement("span", {
-  __self: void 0,
-  __source: {
-    fileName: _jsxFileName,
-    lineNumber: 122,
-    columnNumber: 21
-  }
-}, props.label), /*#__PURE__*/_react.default.createElement("input", {
-  type: "checkbox",
-  checked: props.value,
-  onChange: props.onChange,
-  __self: void 0,
-  __source: {
-    fileName: _jsxFileName,
-    lineNumber: 123,
-    columnNumber: 5
-  }
-}));
-exports.BooleanInput = BooleanInput;
-const Control = props => {
-  const {
-    label,
-    value = props.default,
-    min = 0,
-    max = 10,
-    step = 0.1,
-    enum: options,
-    units,
-    onChange: onChangeGlobal,
-    className
-  } = props;
-  const onChange = e => {
-    let newValue;
-    if (props.type === 'number-with-unit') {
-      newValue = {
-        value: typeof e.target.valueAsNumber === 'number' ? e.target.valueAsNumber : props.value.value,
-        type: typeof e.target.valueAsNumber === 'number' ? props.value.type : e.target.value
-      };
-    } else if (props.type === 'boolean') {
-      newValue = e.target.checked;
-    } else if (props.type === 'number' && e.target.valueAsNumber) {
-      newValue = e.target.valueAsNumber;
-    } else {
-      newValue = e.target.value;
-    }
-    onChangeGlobal == null || onChangeGlobal(e, newValue);
-  };
-  if (props.type === 'number') {
-    if (options) {
-      return /*#__PURE__*/_react.default.createElement(SelectInput, {
-        label,
-        value: value,
-        options,
-        onChange,
-        className,
-        disabled: options.length < 2,
-        __self: void 0,
-        __source: {
-          fileName: _jsxFileName,
-          lineNumber: 164,
-          columnNumber: 9
-        }
-      });
-    } else {
-      return /*#__PURE__*/_react.default.createElement(NumberInput, {
-        label,
-        value: +value,
-        min: +min,
-        max: +max,
-        step: +step,
-        onChange,
-        className,
-        __self: void 0,
-        __source: {
-          fileName: _jsxFileName,
-          lineNumber: 177,
-          columnNumber: 9
-        }
-      });
-    }
-  }
-  if (props.type === 'number-with-unit') {
-    return /*#__PURE__*/_react.default.createElement(NumberWithUnitsInput, {
-      label,
-      value: +value.value,
-      unit: value.type,
-      min: +min,
-      max: +max,
-      step: +step,
-      units,
-      onChange,
-      onUnitChange: onChange,
-      className,
-      __self: void 0,
-      __source: {
-        fileName: _jsxFileName,
-        lineNumber: 194,
-        columnNumber: 7
-      }
-    });
-  }
-  if (props.type === 'boolean') {
-    return /*#__PURE__*/_react.default.createElement(BooleanInput, {
-      label,
-      value: !!value,
-      onChange,
-      className,
-      __self: void 0,
-      __source: {
-        fileName: _jsxFileName,
-        lineNumber: 213,
-        columnNumber: 7
-      }
-    });
-  }
-  if (props.type === 'string') {
-    return options ? /*#__PURE__*/_react.default.createElement(SelectInput, {
-      label,
-      value: value,
-      options,
-      onChange,
-      className,
-      disabled: options.length < 2,
-      __self: void 0,
-      __source: {
-        fileName: _jsxFileName,
-        lineNumber: 225,
-        columnNumber: 7
-      }
-    }) : null;
-  }
-  return /*#__PURE__*/_react.default.createElement("p", {
-    __self: void 0,
-    __source: {
-      fileName: _jsxFileName,
-      lineNumber: 239,
-      columnNumber: 5
-    }
-  }, "Unknown input ", label, " ", value);
-};
-exports.Control = Control;
-//# sourceMappingURL=controls.js.map

package/dist/cjs/playground/controls.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["_react","_interopRequireDefault","require","_playgroundModule","_jsxFileName","NumberInput","props","value","min","max","step","onChange","default","createElement","className","styles","label","filter","v","join","__self","__source","fileName","lineNumber","columnNumber","range","type","exports","NumberWithUnitsInput","onUnitChange","rangeUnit","unit","units","map","u","key","SelectInput","disabled","options","val","i","Array","isArray","BooleanInput","labelBool","checked","Control","enum","onChangeGlobal","e","newValue","target","valueAsNumber","length"],"sources":["../../../src/playground/controls.tsx"],"sourcesContent":["import type { UnitLengthPercentage } from '../types';\nimport React, { ChangeEvent } from 'react';\nimport styles from './playground.module.scss';\n\nexport interface ControlProps {\n  default: string | number | boolean | UnitLengthPercentage;\n  type: 'number' | 'string' | 'boolean' | 'number-with-unit';\n  label?: string;\n  value?: string | number | boolean | UnitLengthPercentage;\n  min?: number;\n  max?: number;\n  step?: number;\n  enum?: readonly string[] | readonly number[];\n  units?: readonly string[];\n  onChange?: (\n    event: ChangeEvent<HTMLInputElement | HTMLSelectElement>,\n    value: string | number | boolean | UnitLengthPercentage,\n  ) => void;\n  className?: string;\n  hidden?: boolean;\n}\n\nexport const NumberInput = (props: {\n  label?: string;\n  value: number;\n  min: number;\n  max: number;\n  step: number;\n  onChange?: (event: any) => void;\n  className?: string;\n}) => {\n  const { value, min, max, step, onChange } = props;\n  return (\n    <label\n      className={[styles.label, props.className].filter((v) => v).join(' ')}\n    >\n      {props.label && <h3>{props.label}</h3>}\n      <div className={styles.range}>\n        <input type=\"range\" {...{ value, min, max, step, onChange }} />\n        <input type=\"number\" {...{ value, min, max, step, onChange }} />\n      </div>\n    </label>\n  );\n};\n\nexport const NumberWithUnitsInput = (props: {\n  label?: string;\n  value: number;\n  unit: string;\n  min: number;\n  max: number;\n  step: number;\n  units?: readonly string[];\n  onChange?: (event: any) => void;\n  onUnitChange?: (event: any) => void;\n  className?: string;\n}) => {\n  const { value, min, max, step, onChange, onUnitChange } = props;\n  return (\n    <label\n      className={[styles.label, props.className].filter((v) => v).join(' ')}\n    >\n      {props.label && <h3>{props.label}</h3>}\n      <div className={styles.rangeUnit}>\n        <input type=\"range\" {...{ value, min, max, step, onChange }} />\n        <input type=\"number\" {...{ value, min, max, step, onChange }} />\n        <select value={props.unit} onChange={onUnitChange}>\n          {props.units!.map((u) => (\n            <option value={u} key={props.label + u}>\n              {u === 'percentage' ? '%' : u}\n            </option>\n          ))}\n        </select>\n      </div>\n    </label>\n  );\n};\n\nexport const SelectInput = (props: {\n  label?: string;\n  value: string | number;\n  options: readonly string[] | readonly number[] | readonly [string, boolean][];\n  onChange?: (event: any) => void;\n  className?: string;\n  disabled?: boolean;\n}) => (\n  <label className={[styles.label, props.className].filter((v) => v).join(' ')}>\n    {props.label && <h3>{props.label}</h3>}\n    <select\n      value={props.value}\n      onChange={props.onChange}\n      disabled={props.disabled}\n    >\n      {props.options.map((val, i) => (\n        <option\n          key={`key${i}`}\n          value={\n            Array.isArray(val)\n              ? (val as [string, boolean])[0]\n              : (val as string | number)\n          }\n          disabled={Array.isArray(val) ? !(val as [string, boolean])[1] : false}\n        >\n          {Array.isArray(val) ? (val as [string, boolean])[0] : val}\n        </option>\n      ))}\n    </select>\n  </label>\n);\n\nexport const BooleanInput = (props: {\n  label?: string;\n  value: boolean;\n  onChange?: (event: any) => void;\n  className?: string;\n}) => (\n  <label\n    className={[styles.label, styles.labelBool, props.className]\n      .filter((v) => v)\n      .join(' ')}\n  >\n    {props.label && <span>{props.label}</span>}\n    <input type=\"checkbox\" checked={props.value} onChange={props.onChange} />\n  </label>\n);\n\nexport const Control: React.FC<ControlProps> = (props) => {\n  const {\n    label,\n    value = props.default,\n    min = 0,\n    max = 10,\n    step = 0.1,\n    enum: options,\n    units,\n    onChange: onChangeGlobal,\n    className,\n  } = props;\n  const onChange = (e: ChangeEvent<HTMLInputElement>) => {\n    let newValue;\n    if (props.type === 'number-with-unit') {\n      newValue = {\n        value:\n          typeof e.target.valueAsNumber === 'number'\n            ? e.target.valueAsNumber\n            : (props.value as UnitLengthPercentage).value,\n        type:\n          typeof e.target.valueAsNumber === 'number'\n            ? (props.value as UnitLengthPercentage).type\n            : e.target.value,\n      } as UnitLengthPercentage;\n    } else if (props.type === 'boolean') {\n      newValue = e.target.checked;\n    } else if (props.type === 'number' && e.target.valueAsNumber) {\n      newValue = e.target.valueAsNumber;\n    } else {\n      newValue = e.target.value;\n    }\n    onChangeGlobal?.(e, newValue);\n  };\n  if (props.type === 'number') {\n    if (options) {\n      return (\n        <SelectInput\n          {...{\n            label,\n            value: value as number,\n            options,\n            onChange,\n            className,\n            disabled: options.length < 2,\n          }}\n        />\n      );\n    } else {\n      return (\n        <NumberInput\n          {...{\n            label,\n            value: +value as number,\n            min: +min,\n            max: +max,\n            step: +step,\n            onChange,\n            className,\n          }}\n        />\n      );\n    }\n  }\n\n  if (props.type === 'number-with-unit') {\n    return (\n      <NumberWithUnitsInput\n        {...{\n          label,\n          value: +(value as UnitLengthPercentage).value as number,\n          unit: (value as UnitLengthPercentage).type,\n          min: +min,\n          max: +max,\n          step: +step,\n          units,\n          onChange,\n          onUnitChange: onChange,\n          className,\n        }}\n      />\n    );\n  }\n\n  if (props.type === 'boolean') {\n    return (\n      <BooleanInput\n        {...{\n          label,\n          value: !!value,\n          onChange,\n          className,\n        }}\n      />\n    );\n  }\n  if (props.type === 'string') {\n    return options ? (\n      <SelectInput\n        {...{\n          label,\n          value: value as string,\n          options,\n          onChange,\n          className,\n          disabled: options.length < 2,\n        }}\n      />\n    ) : null;\n  }\n\n  return (\n    <p>\n      Unknown input {label} {value}\n    </p>\n  );\n};\n"],"mappings":"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","ignoreList":[]}