refactor: Refactor modal stories, new modal prop portalElement (#731)

* refactor: Refactor modal stories, new modal prop portalElement
* Update CHANGELOG
* Update static build files

.gitignore

@@ -3,6 +3,7 @@
 node_modules
 .cache
 .eslintcache
+.env
 dist/
 es/
 lib/

.storybook/main.js

@@ -3,17 +3,20 @@ const customWebpack = require('./webpack.config.js')
 module.exports = {
     stories: ['../src/**/*.stories.@(tsx|mdx)', '../stories/**/*.stories.@(js|jsx|ts|tsx|mdx)'],
     siteUrl: 'https://github.com/Doist/reactist',
+    features: {
+        // See https://storybook.js.org/docs/react/writing-tests/interaction-testing
+        interactionsDebugger: true,
+    },
     addons: [
         '@storybook/addon-postcss',
         '@storybook/addon-actions',
         {
             name: '@storybook/addon-docs',
-            options: {
-                configureJSX: true,
-            },
+            options: { configureJSX: true },
         },
         '@storybook/addon-controls',
         '@geometricpanda/storybook-addon-badges',
+        '@storybook/addon-interactions',
     ],
     typescript: {
         check: true,

CHANGELOG.md

@@ -2,6 +2,10 @@
 
 Reactist follows [semantic versioning](https://semver.org/) and doesn't introduce breaking changes (API-wise) in minor or patch releases. However, the appearance of a component might change in a minor or patch release so keep an eye on redesigns and make sure your app still looks and feels like you expect it.
 
+# next
+
+-   [Feat] New `Modal` prop `portalElement`, to enable consumers of the `Modal` component to have some control on where the modal portal is rendered.
+
 # v17.7.0
 
 -   [Feat] Add `startIcon` support to `TextField`

docs/iframe.html

@@ -470,10 +470,10 @@
 
 
 
-            window['FEATURES'] = {"postcss":true,"emotionAlias":false,"warnOnLegacyHierarchySeparator":true,"buildStoriesJson":false,"storyStoreV7":false,"modernInlineRender":false,"breakingChangesV7":false,"interactionsDebugger":false,"babelModeV7":false,"argTypeTargetsV7":false,"previewMdx2":false};
+            window['FEATURES'] = {"postcss":true,"emotionAlias":false,"warnOnLegacyHierarchySeparator":true,"buildStoriesJson":false,"storyStoreV7":false,"modernInlineRender":false,"breakingChangesV7":false,"interactionsDebugger":true,"babelModeV7":false,"argTypeTargetsV7":false,"previewMdx2":false};
 
 
 
 
 
-            window['STORIES'] = [{"titlePrefix":"","directory":"./src","files":"**/*.stories.@(tsx|mdx)","importPathMatcher":"^\\.[\\\\/](?:src(?:\\/(?!\\.)(?:(?:(?!(?:^|\\/)\\.).)*?)\\/|\\/|$)(?!\\.)(?=.)[^/]*?\\.stories\\.(tsx|mdx))$"},{"titlePrefix":"","directory":"./stories","files":"**/*.stories.@(js|jsx|ts|tsx|mdx)","importPathMatcher":"^\\.[\\\\/](?:stories(?:\\/(?!\\.)(?:(?:(?!(?:^|\\/)\\.).)*?)\\/|\\/|$)(?!\\.)(?=.)[^/]*?\\.stories\\.(js|jsx|ts|tsx|mdx))$"}];</script><script src="runtime~main.ad83b813.iframe.bundle.js"></script><script src="vendors~main.853422c4.iframe.bundle.js"></script><script src="main.c21d7df6.iframe.bundle.js"></script></body></html>
+            window['STORIES'] = [{"titlePrefix":"","directory":"./src","files":"**/*.stories.@(tsx|mdx)","importPathMatcher":"^\\.[\\\\/](?:src(?:\\/(?!\\.)(?:(?:(?!(?:^|\\/)\\.).)*?)\\/|\\/|$)(?!\\.)(?=.)[^/]*?\\.stories\\.(tsx|mdx))$"},{"titlePrefix":"","directory":"./stories","files":"**/*.stories.@(js|jsx|ts|tsx|mdx)","importPathMatcher":"^\\.[\\\\/](?:stories(?:\\/(?!\\.)(?:(?:(?!(?:^|\\/)\\.).)*?)\\/|\\/|$)(?!\\.)(?=.)[^/]*?\\.stories\\.(js|jsx|ts|tsx|mdx))$"}];</script><script src="runtime~main.90d16f53.iframe.bundle.js"></script><script src="vendors~main.aa3d7dfc.iframe.bundle.js"></script><script src="main.28033de8.iframe.bundle.js"></script></body></html>

docs/index.html

@@ -48,12 +48,12 @@
 
 
 
-            window['FEATURES'] = {"postcss":true,"emotionAlias":false,"warnOnLegacyHierarchySeparator":true,"buildStoriesJson":false,"storyStoreV7":false,"modernInlineRender":false,"breakingChangesV7":false,"interactionsDebugger":false,"babelModeV7":false,"argTypeTargetsV7":false,"previewMdx2":false};
+            window['FEATURES'] = {"postcss":true,"emotionAlias":false,"warnOnLegacyHierarchySeparator":true,"buildStoriesJson":false,"storyStoreV7":false,"modernInlineRender":false,"breakingChangesV7":false,"interactionsDebugger":true,"babelModeV7":false,"argTypeTargetsV7":false,"previewMdx2":false};
 
 
 
 
 
 
 
-            window['DOCS_MODE'] = false;</script><script src="runtime~main.f123b7b40ad3b4f431b3.manager.bundle.js"></script><script src="vendors~main.112ab1ddbb7c3ba86e96.manager.bundle.js"></script><script src="main.2300ffaa729e0a28c3b2.manager.bundle.js"></script></body></html>
+            window['DOCS_MODE'] = false;</script><script src="runtime~main.1ddf0cb1fbc5a28dc85b.manager.bundle.js"></script><script src="vendors~main.fbe5cb2e7c42a5dde98b.manager.bundle.js"></script><script src="main.3a427fb1d7687254a3ff.manager.bundle.js"></script></body></html>

docs/project.json

@@ -1 +1 @@
-{"generatedAt":1672701268415,"builder":{"name":"webpack4"},"hasCustomBabel":false,"hasCustomWebpack":true,"hasStaticDirs":false,"hasStorybookEslint":false,"refCount":0,"packageManager":{"type":"npm","version":"8.19.2"},"typescriptOptions":{"check":true,"checkOptions":{},"reactDocgen":"react-docgen-typescript","reactDocgenTypescriptOptions":{"shouldExtractLiteralValuesFromEnum":true}},"storybookVersion":"^6.5.3","language":"typescript","storybookPackages":{"@storybook/addon-knobs":{"version":"6.3.1"},"@storybook/addon-links":{"version":"6.5.3"},"@storybook/addons":{"version":"6.5.3"},"@storybook/react":{"version":"6.5.3"}},"framework":{"name":"react"},"addons":{"@storybook/addon-postcss":{"version":"2.0.0"},"@storybook/addon-actions":{"version":"6.5.3"},"@storybook/addon-docs":{"options":{"configureJSX":true},"version":"6.5.3"},"@storybook/addon-controls":{"version":"6.5.3"},"@geometricpanda/storybook-addon-badges":{"version":"0.2.2"}}}
+{"generatedAt":1672749263754,"builder":{"name":"webpack4"},"hasCustomBabel":false,"hasCustomWebpack":true,"hasStaticDirs":false,"hasStorybookEslint":false,"refCount":0,"packageManager":{"type":"npm","version":"8.19.2"},"typescriptOptions":{"check":true,"checkOptions":{},"reactDocgen":"react-docgen-typescript","reactDocgenTypescriptOptions":{"shouldExtractLiteralValuesFromEnum":true}},"features":{"interactionsDebugger":true},"storybookVersion":"^6.5.3","language":"typescript","storybookPackages":{"@storybook/addon-knobs":{"version":"6.3.1"},"@storybook/addon-links":{"version":"6.5.3"},"@storybook/addons":{"version":"6.5.3"},"@storybook/jest":{"version":"0.0.10"},"@storybook/react":{"version":"6.5.3"},"@storybook/testing-library":{"version":"0.0.13"}},"framework":{"name":"react"},"addons":{"@storybook/addon-postcss":{"version":"2.0.0"},"@storybook/addon-actions":{"version":"6.5.3"},"@storybook/addon-docs":{"options":{"configureJSX":true},"version":"6.5.3"},"@storybook/addon-controls":{"version":"6.5.3"},"@geometricpanda/storybook-addon-badges":{"version":"0.2.2"},"@storybook/addon-interactions":{"version":"6.5.15"}}}