@itcase/storybook-config 1.2.74 → 1.2.77

package/dist/cjs/decorators/withUiDecorator.js

@@ -1,15 +1,20 @@
 'use strict';
 
-var React = require('react');
+require('react');
 var Notification = require('@itcase/ui-web/components/Notification');
 var context = require('@itcase/ui-core/context');
+var jsxRuntime = require('react/jsx-runtime');
 
-function withUiDecorator(Story, _ref) {
-  var args = _ref.args,
-    parameters = _ref.parameters;
-  return /*#__PURE__*/React.createElement(context.UIProvider, null, /*#__PURE__*/React.createElement(context.NotificationsProvider, {
-    initialNotificationsList: parameters.initialNotificationsList || args.initialNotificationsList || []
-  }, /*#__PURE__*/React.createElement(Notification.NotificationWrapper, null), /*#__PURE__*/React.createElement(Story, null)));
+function withUiDecorator(Story, {
+  args,
+  parameters
+}) {
+  return /*#__PURE__*/jsxRuntime.jsx(context.UIProvider, {
+    children: /*#__PURE__*/jsxRuntime.jsxs(context.NotificationsProvider, {
+      initialNotificationsList: parameters.initialNotificationsList || args.initialNotificationsList || [],
+      children: [/*#__PURE__*/jsxRuntime.jsx(Notification.NotificationWrapper, {}), /*#__PURE__*/jsxRuntime.jsx(Story, {})]
+    })
+  });
 }
 
 exports.withUiDecorator = withUiDecorator;

package/dist/cjs/decorators.js

@@ -8,9 +8,9 @@ var withLayoutDecorator = require('./decorators/withLayoutDecorator.js');
 var withNextDecorator = require('./decorators/withNextDecorator.js');
 var withUiDecorator = require('./decorators/withUiDecorator.js');
 require('react');
-require('../_rollupPluginBabelHelpers-B1r4NF8e.js');
+require('react/jsx-runtime');
 require('../isArray-DJguRq_2.js');
-require('../FormSubmitWrapper-BaqE4w9q.js');
+require('../FormSubmitWrapper-_VeLgVir.js');
 require('@itcase/common');
 require('msw');
 require('final-form');

package/dist/components/EmailTemplatePreview.js

@@ -1,11 +1,12 @@
-import React, { useEffect } from 'react';
+import { useEffect } from 'react';
+import { jsx } from 'react/jsx-runtime';
 
-var BACKEND_URL = process.env.EMAIL_URL;
+let BACKEND_URL = process.env.EMAIL_URL;
 if (process.env.NODE_ENV === 'production' && process.env.REST_BASE_URL) {
-  BACKEND_URL = "".concat(process.env.REST_BASE_URL, "/storybook");
+  BACKEND_URL = `${process.env.REST_BASE_URL}/storybook`;
 }
 function EmailTemplatePreview(props) {
-  var style = {
+  const style = {
     width: '100%',
     height: '100%',
     border: '0',
@@ -18,24 +19,24 @@ function EmailTemplatePreview(props) {
     overflowX: 'hidden',
     overflowY: 'hidden'
   };
-  useEffect(function () {
-    var emailPreviewIframe = document.getElementById('emailPreview');
-    var loaded = function loaded() {
-      var email = emailPreviewIframe.getElementsByClassName('email-body').length;
+  useEffect(() => {
+    const emailPreviewIframe = document.getElementById('emailPreview');
+    const loaded = () => {
+      const email = emailPreviewIframe.getElementsByClassName('email-body').length;
       if (!email && process.env.EMAIL_URL && process.env.EMAIL_URL.includes('http://')) {
         alert('Need to run the backend server to display email templates, use: python manage.py runserver');
       }
     };
-    emailPreviewIframe === null || emailPreviewIframe === void 0 || emailPreviewIframe.addEventListener('load', loaded, true);
+    emailPreviewIframe?.addEventListener('load', loaded, true);
   });
   if (!BACKEND_URL) {
     return null;
   }
-  return /*#__PURE__*/React.createElement("iframe", {
+  return /*#__PURE__*/jsx("iframe", {
     id: "emailPreview",
     width: "100%",
     height: "100%",
-    src: "".concat(BACKEND_URL).concat(props.url),
+    src: `${BACKEND_URL}${props.url}`,
     style: style
   });
 }

package/dist/components/FormSubmitWrapper-B2tMQZu2.js

@@ -0,0 +1,211 @@
+import React, { useRef, useEffect } from 'react';
+
+const SUBMIT_POLL_MS = 50;
+function getStoryPreviewDocument() {
+  const previewIframe = document.getElementById('storybook-preview-iframe') ?? document.querySelector('iframe[data-is-storybook="true"]');
+  return previewIframe?.contentDocument ?? null;
+}
+function getMountRoot() {
+  const previewDocument = getStoryPreviewDocument();
+  if (previewDocument) {
+    return previewDocument.getElementById('storybook-root') ?? previewDocument.getElementById('root') ?? previewDocument.body;
+  }
+  return document.getElementById('storybook-root') ?? document.getElementById('root') ?? document.body;
+}
+function canSubmitFormApi(form) {
+  return typeof form?.submit === 'function' && typeof form.getRegisteredFields === 'function' && form.getRegisteredFields().length > 0;
+}
+function findSaveDraftButton(root) {
+  if (!root) {
+    return null;
+  }
+  const saveDraft = root.querySelector('[data-testid$="SaveDraftButton"]');
+  if (!saveDraft) {
+    return null;
+  }
+  return saveDraft.tagName === 'BUTTON' ? saveDraft : saveDraft.querySelector('button');
+}
+function findSubmitButton(root) {
+  if (!root) {
+    return null;
+  }
+  const byType = root.querySelector('button[type="submit"]');
+  if (byType) {
+    return byType;
+  }
+  const form = root.querySelector('form[data-testid], form');
+  if (!form) {
+    return null;
+  }
+  return form.querySelector('.form__button .form__button-item, .form__button-item') ?? null;
+}
+function touchFieldsBeforeSubmit(form) {
+  if (!canSubmitFormApi(form)) {
+    return;
+  }
+  for (const fieldName of form.getRegisteredFields()) {
+    if (!form.getFieldState(fieldName)?.touched) {
+      form.blur(fieldName);
+    }
+  }
+}
+function triggerFormSubmit({
+  form,
+  root,
+  submitButton
+}) {
+  const saveDraftButton = findSaveDraftButton(root ?? getMountRoot());
+  if (saveDraftButton) {
+    saveDraftButton.click();
+    return;
+  }
+  if (canSubmitFormApi(form)) {
+    touchFieldsBeforeSubmit(form);
+    form.submit();
+    return;
+  }
+  if (submitButton?.type === 'submit') {
+    submitButton.click();
+  }
+}
+async function autoSubmitForm(formRef, signal) {
+  if (formRef.__itcaseDidAutoSubmit) {
+    return;
+  }
+  while (!signal.aborted) {
+    const root = getMountRoot();
+    const form = formRef.current;
+    const submitButton = findSubmitButton(root);
+    const saveDraftButton = findSaveDraftButton(root);
+    const canSubmitViaFormApi = canSubmitFormApi(form);
+    const canClickNativeSubmit = submitButton?.type === 'submit';
+    const canClickSaveDraft = Boolean(saveDraftButton);
+
+    // primaryButtonHtmlType="button": ждём final-form API или кнопку черновика в DOM
+    if (!canSubmitViaFormApi && !canClickNativeSubmit && !canClickSaveDraft) {
+      await new Promise(resolve => {
+        setTimeout(resolve, SUBMIT_POLL_MS);
+      });
+      continue;
+    }
+    formRef.__itcaseDidAutoSubmit = true;
+    await new Promise(resolve => {
+      requestAnimationFrame(() => {
+        requestAnimationFrame(resolve);
+      });
+    });
+    if (signal.aborted) {
+      return;
+    }
+    triggerFormSubmit({
+      form: formRef.current,
+      root,
+      submitButton
+    });
+    return;
+  }
+}
+
+function wrapRender(component, render, formRef, defaultArgs = {}) {
+  if (typeof render !== 'function') {
+    return render;
+  }
+  return function renderWithRef(storyArgs) {
+    const args = {
+      ...defaultArgs,
+      ...(storyArgs ?? {})
+    };
+    delete args.ref;
+    delete args.errors;
+    if (!args.onSubmit && defaultArgs.onSubmit) {
+      args.onSubmit = defaultArgs.onSubmit;
+    }
+    const rendered = render(args);
+    if (/*#__PURE__*/React.isValidElement(rendered)) {
+      return /*#__PURE__*/React.cloneElement(rendered, {
+        ...rendered.props,
+        ...args,
+        ref: formRef
+      });
+    }
+    if (component) {
+      return /*#__PURE__*/React.createElement(component, {
+        ref: formRef,
+        ...args
+      });
+    }
+    return rendered;
+  };
+}
+function withFormRef(children, formRef, bindings) {
+  const {
+    component,
+    args,
+    render: storyRender,
+    allArgs,
+    context
+  } = bindings;
+  const storyArgs = args ?? context?.args ?? children?.props?.args ?? {};
+  const storyComponent = component ?? context?.component ?? children?.props?.component;
+  const storyRenderFn = storyRender ?? context?.render ?? children?.props?.render;
+  const boundRender = wrapRender(storyComponent, storyRenderFn, formRef, storyArgs);
+  const addRef = value => value ? {
+    ...value,
+    ref: formRef
+  } : value;
+  return /*#__PURE__*/React.cloneElement(children, {
+    component: storyComponent,
+    args: addRef(storyArgs),
+    render: boundRender,
+    allArgs: addRef(allArgs),
+    context: context ? {
+      ...context,
+      component: storyComponent,
+      args: addRef(context.args),
+      render: boundRender,
+      allArgs: addRef(context.allArgs)
+    } : context
+  });
+}
+
+/**
+ * Авто-submit для интерактивного Storybook (Require / Validation / ServerError).
+ * При primaryButtonHtmlType="button" — formRef.current.submit() (final-form API),
+ * при type="submit" — click по кнопке. В Vitest submit в play.
+ */
+function FormSubmitWrapper(props) {
+  const formRef = useRef(null);
+  const {
+    component,
+    args,
+    render,
+    allArgs,
+    context,
+    submit = true,
+    children
+  } = props;
+  const storyArgs = args ?? context?.args ?? children?.props?.args ?? {};
+  useEffect(() => {
+    if (!submit) {
+      return undefined;
+    }
+    delete formRef.__itcaseDidAutoSubmit;
+    const abortController = new AbortController();
+    autoSubmitForm(formRef, abortController.signal);
+    return () => {
+      abortController.abort();
+      delete formRef.__itcaseDidAutoSubmit;
+    };
+  }, [submit, storyArgs.errors]);
+
+  // eslint-disable-next-line react-hooks/refs -- ref уходит в cloneElement внутри bound render
+  return withFormRef(children, formRef, {
+    component,
+    args: storyArgs,
+    render,
+    allArgs,
+    context
+  });
+}
+
+export { FormSubmitWrapper as F };

package/dist/components/FormSubmitWrapper.js

@@ -1,3 +1,2 @@
-export { F as FormSubmitWrapper } from './FormSubmitWrapper-DoGZRTm5.js';
-import './_rollupPluginBabelHelpers-CEVa9ZMs.js';
+export { F as FormSubmitWrapper } from './FormSubmitWrapper-B2tMQZu2.js';
 import 'react';

package/dist/config/viewport/viewport.js

@@ -17,6 +17,13 @@ const VIEWPORTS = {
       height: '667px',
     },
   },
+  tablet: {
+    name: 'Tablet',
+    styles: {
+      width: '768px',
+      height: '1024px',
+    },
+  },
 }
 
 export { VIEWPORTS }

package/dist/decorators/withClearStoresDecorator.js

@@ -1,12 +1,23 @@
-import React, { useMemo } from 'react';
+import { useEffect } from 'react';
+import { jsx } from 'react/jsx-runtime';
 
-function withClearStoresDecorator(_ref) {
-  var clearStoreData = _ref.clearStoreData;
-  var Decorator = function Decorator(Story) {
-    useMemo(function () {
-      clearStoreData();
-    }, [Story]);
-    return /*#__PURE__*/React.createElement(Story, null);
+function ClearStoresWrapper({
+  clearStoreData,
+  Story
+}) {
+  useEffect(() => {
+    clearStoreData();
+  }, [Story, clearStoreData]);
+  return /*#__PURE__*/jsx(Story, {});
+}
+function withClearStoresDecorator({
+  clearStoreData
+}) {
+  const Decorator = Story => {
+    return /*#__PURE__*/jsx(ClearStoresWrapper, {
+      clearStoreData: clearStoreData,
+      Story: Story
+    });
   };
   return Decorator;
 }

package/dist/decorators/withExtraProviders.js

@@ -1,15 +1,20 @@
 import React from 'react';
+import { jsx } from 'react/jsx-runtime';
 
-function withExtraProviders() {
-  var providers = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
+function withExtraProviders(providers = []) {
   if (!Array.isArray(providers)) throw new Error('withExtraProviders requires an array of components');
-  return function (StoryFn, context) {
-    var currentStory = StoryFn(context);
-    for (var i = providers.length - 1; i >= 0; i--) {
-      var item = providers[i];
-      var Component = item.provider;
-      var props = item.props || {};
-      currentStory = /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Component, props, currentStory));
+  return (StoryFn, context) => {
+    let currentStory = StoryFn(context);
+    for (let i = providers.length - 1; i >= 0; i--) {
+      const item = providers[i];
+      const Component = item.provider;
+      const props = item.props || {};
+      currentStory = /*#__PURE__*/jsx(React.Fragment, {
+        children: /*#__PURE__*/jsx(Component, {
+          ...props,
+          children: currentStory
+        })
+      });
     }
     return currentStory;
   };

package/dist/decorators/withFigmaSourceLink.js

@@ -1,6 +1,6 @@
-import { d as _objectSpread2 } from '../components/_rollupPluginBabelHelpers-CEVa9ZMs.js';
-import React from 'react';
+import 'react';
 import { r as requireIsArray, g as getDefaultExportFromCjs } from '../components/isArray-CPoGkdXv.js';
+import { jsx } from 'react/jsx-runtime';
 
 var castArray_1;
 var hasRequiredCastArray;
@@ -59,17 +59,18 @@ var castArrayExports = requireCastArray();
 var castArray = /*@__PURE__*/getDefaultExportFromCjs(castArrayExports);
 
 function withFigmaSourceLink() {
-  var decorator = function decorator(Story, _ref) {
-    var parameters = _ref.parameters,
-      context = _ref.context;
-    var sourceLink = parameters.sourceLink || {};
+  const decorator = (Story, {
+    parameters,
+    context
+  }) => {
+    const sourceLink = parameters.sourceLink || {};
     if (parameters.design) {
-      var designList = castArray(parameters.design);
+      const designList = castArray(parameters.design);
       if (!sourceLink.links) {
         sourceLink.links = {};
       }
-      designList.forEach(function (design) {
-        var groupKey = "".concat(design.type).concat(design.name || '');
+      designList.forEach(design => {
+        const groupKey = `${design.type}${design.name || ''}`;
         sourceLink.links[groupKey] = {
           label: 'Figma — ' + context.title + (design.name ? ' / ' + design.name : ''),
           href: design.url,
@@ -77,12 +78,16 @@ function withFigmaSourceLink() {
         };
       });
     }
-    var updatedContext = _objectSpread2(_objectSpread2({}, context), {}, {
-      parameters: _objectSpread2(_objectSpread2({}, context.parameters), {}, {
+    const updatedContext = {
+      ...context,
+      parameters: {
+        ...context.parameters,
         sourceLink: sourceLink
-      })
+      }
+    };
+    return /*#__PURE__*/jsx(Story, {
+      ...updatedContext
     });
-    return /*#__PURE__*/React.createElement(Story, updatedContext);
   };
   return decorator;
 }

package/dist/decorators/withFormSubmitDecorator.js

@@ -1,10 +1,10 @@
-import { d as _objectSpread2 } from '../components/_rollupPluginBabelHelpers-CEVa9ZMs.js';
-import React from 'react';
-import { F as FormSubmitWrapper } from '../components/FormSubmitWrapper-DoGZRTm5.js';
+import 'react';
+import { F as FormSubmitWrapper } from '../components/FormSubmitWrapper-B2tMQZu2.js';
 import { c as commonjsGlobal, r as requireIsArray } from '../components/isArray-CPoGkdXv.js';
 import '@itcase/common';
 import 'msw';
 import 'final-form';
+import { jsx } from 'react/jsx-runtime';
 
 /** Detect free variable `global` from Node.js. */
 
@@ -1117,38 +1117,42 @@ function hasFormParameters(parameters) {
   return Boolean(parameters.require || parameters.validation || parameters.error || parameters.serverError || parameters.serverErrorData);
 }
 
-function isVitestEnvironment() {
-  var _import$meta$env;
-  return Boolean((_import$meta$env = import.meta.env) === null || _import$meta$env === void 0 ? void 0 : _import$meta$env.VITEST);
-}
-
 function getStoryArgs(storyContext) {
-  var _storyContext$context, _storyContext$initial, _baseContext$args, _storyContext$args;
-  var baseContext = (_storyContext$context = storyContext.context) !== null && _storyContext$context !== void 0 ? _storyContext$context : storyContext;
-  return _objectSpread2(_objectSpread2(_objectSpread2({}, (_storyContext$initial = storyContext.initialArgs) !== null && _storyContext$initial !== void 0 ? _storyContext$initial : {}), (_baseContext$args = baseContext.args) !== null && _baseContext$args !== void 0 ? _baseContext$args : {}), (_storyContext$args = storyContext.args) !== null && _storyContext$args !== void 0 ? _storyContext$args : {});
+  const baseContext = storyContext.context ?? storyContext;
+  return {
+    ...(storyContext.initialArgs ?? {}),
+    ...(baseContext.args ?? {}),
+    ...(storyContext.args ?? {})
+  };
 }
 function enhanceStoryContext(storyContext) {
-  var _storyContext$context2;
-  var baseContext = (_storyContext$context2 = storyContext.context) !== null && _storyContext$context2 !== void 0 ? _storyContext$context2 : storyContext;
-  var args = getStoryArgs(storyContext);
-  return _objectSpread2(_objectSpread2({}, baseContext), {}, {
-    args: args
-  });
+  const baseContext = storyContext.context ?? storyContext;
+  const args = getStoryArgs(storyContext);
+  return {
+    ...baseContext,
+    args
+  };
 }
 function withFormSubmitDecorator() {
-  var decorator = function decorator(Story, storyContext) {
-    var parameters = storyContext.parameters;
-    var context = enhanceStoryContext(storyContext);
-    if (isVitestEnvironment() || !hasFormParameters(parameters)) {
-      return /*#__PURE__*/React.createElement(Story, Object.assign({}, context, {
+  const decorator = (Story, storyContext) => {
+    const {
+      parameters
+    } = storyContext;
+    const context = enhanceStoryContext(storyContext);
+    if (!hasFormParameters(parameters)) {
+      return /*#__PURE__*/jsx(Story, {
+        ...context,
         parameters: parameters
-      }));
+      });
     }
-    return /*#__PURE__*/React.createElement(FormSubmitWrapper, Object.assign({}, context, {
-      parameters: parameters
-    }), /*#__PURE__*/React.createElement(Story, Object.assign({}, context, {
-      parameters: parameters
-    })));
+    return /*#__PURE__*/jsx(FormSubmitWrapper, {
+      ...context,
+      parameters: parameters,
+      children: /*#__PURE__*/jsx(Story, {
+        ...context,
+        parameters: parameters
+      })
+    });
   };
   return decorator;
 }

package/dist/decorators/withLayoutDecorator.js

@@ -1,9 +1,11 @@
-import React from 'react';
+import 'react';
+import { jsx } from 'react/jsx-runtime';
 
 function withLayoutDecorator() {
-  return function (Story, _ref) {
-    var parameters = _ref.parameters;
-    var layouts = {
+  return (Story, {
+    parameters
+  }) => {
+    const layouts = {
       top: 'sb-layout-top',
       right: 'sb-layout-right',
       bottom: 'sb-layout-bottom',
@@ -16,29 +18,33 @@ function withLayoutDecorator() {
       rightFull: 'sb-layout-right-full',
       topFull: 'sb-layout-top-full'
     };
-    var layoutClass = layouts[(parameters === null || parameters === void 0 ? void 0 : parameters.layout) || ''];
-    var maxWidthStyle = {
+    const layoutClass = layouts[parameters?.layout || ''];
+    const maxWidthStyle = {
       width: parameters.maxWidth && '100%',
-      maxWidth: parameters === null || parameters === void 0 ? void 0 : parameters.maxWidth
+      maxWidth: parameters?.maxWidth
     };
     if (!layoutClass && parameters.maxWidth) {
-      return /*#__PURE__*/React.createElement("div", {
-        style: maxWidthStyle
-      }, /*#__PURE__*/React.createElement(Story, null));
+      return /*#__PURE__*/jsx("div", {
+        style: maxWidthStyle,
+        children: /*#__PURE__*/jsx(Story, {})
+      });
     }
     if (layoutClass && !parameters.maxWidth) {
-      return /*#__PURE__*/React.createElement("div", {
-        className: layoutClass
-      }, /*#__PURE__*/React.createElement(Story, null));
+      return /*#__PURE__*/jsx("div", {
+        className: layoutClass,
+        children: /*#__PURE__*/jsx(Story, {})
+      });
     }
     if (layoutClass && parameters.maxWidth) {
-      return /*#__PURE__*/React.createElement("div", {
-        className: layoutClass
-      }, /*#__PURE__*/React.createElement("div", {
-        style: maxWidthStyle
-      }, /*#__PURE__*/React.createElement(Story, null)));
+      return /*#__PURE__*/jsx("div", {
+        className: layoutClass,
+        children: /*#__PURE__*/jsx("div", {
+          style: maxWidthStyle,
+          children: /*#__PURE__*/jsx(Story, {})
+        })
+      });
     }
-    return /*#__PURE__*/React.createElement(Story, null);
+    return /*#__PURE__*/jsx(Story, {});
   };
 }