@itcase/storybook-config 1.0.18 → 1.0.20

package/dist/cjs/itcase-storybook-config/components/EmailTemplatePreview.js

@@ -0,0 +1,42 @@
+'use strict';
+
+var React = require('react');
+
+var BACKEND_URL = process.env.EMAIL_URL;
+if (process.env.NODE_ENV === 'production') {
+  BACKEND_URL = process.env.REST_BASE_URL + "/storybook";
+}
+function EmailTemplatePreview(props) {
+  var style = {
+    width: '100%',
+    height: '100%',
+    position: 'absolute',
+    top: '0',
+    right: '0',
+    bottom: '0',
+    left: '0',
+    overflow: 'hidden',
+    border: '0',
+    overflowX: 'hidden',
+    overflowY: 'hidden'
+  };
+  React.useEffect(function () {
+    var emailPreviewIframe = document.getElementById('emailPreview');
+    var loaded = function loaded() {
+      var email = emailPreviewIframe.getElementsByClassName('email-body').length;
+      if (!email) {
+        alert('Need to run the backend server to display email templates, use: python manage.py runserver');
+      }
+    };
+    emailPreviewIframe.addEventListener('load', loaded, true);
+  });
+  return /*#__PURE__*/React.createElement("iframe", {
+    width: "100%",
+    height: "100%",
+    id: "emailPreview",
+    src: "" + BACKEND_URL + props.url,
+    style: style
+  });
+}
+
+exports.EmailTemplatePreview = EmailTemplatePreview;

package/dist/cjs/itcase-storybook-config/components/FormSubmitWrapper.js

@@ -0,0 +1,17 @@
+'use strict';
+
+var React = require('react');
+
+function FormSubmitWrapper(props) {
+  var formRef = React.useRef();
+  React.useEffect(function () {
+    if (formRef != null && formRef.current) {
+      formRef.current.submit();
+    }
+  }, [formRef]);
+  return /*#__PURE__*/React.cloneElement(props.children, {
+    ref: formRef
+  });
+}
+
+exports.FormSubmitWrapper = FormSubmitWrapper;

package/dist/config/addonsNextJs.js

@@ -0,0 +1,10 @@
+const ADDONS_NEXTJS = [
+  '@storybook/addon-links',
+  '@storybook/addon-essentials',
+  '@storybook/addon-interactions',
+  '@itcase/storybook-addon-auth',
+  '@storybook/addon-designs',
+  'storybook-addon-source-link'
+]
+
+export { ADDONS_NEXTJS }

package/dist/config/addonsReact.js

@@ -0,0 +1,31 @@
+const ADDONS_REACT = [
+  '@storybook/addon-webpack5-compiler-swc',
+  '@storybook/addon-essentials',
+  '@storybook/addon-themes',
+  '@storybook/addon-interactions',
+  '@storybook/addon-designs',
+  'storybook-addon-source-link',
+  {
+    name: '@storybook/addon-styling-webpack',
+    options: {
+      rules: [
+        {
+          test: /\.css$/,
+          use: [
+            'style-loader',
+            {
+              loader: 'css-loader',
+              options: { importLoaders: 1 },
+            },
+            {
+              loader: 'postcss-loader',
+              options: { implementation: require.resolve('postcss') },
+            },
+          ],
+        },
+      ],
+    },
+  },
+]
+
+export { ADDONS_REACT }

package/dist/config/addonsReactVite.js

@@ -0,0 +1,9 @@
+const ADDONS_REACT_VITE = [
+  '@storybook/addon-links',
+  '@storybook/addon-essentials',
+  '@storybook/addon-interactions',
+  '@storybook/addon-designs',
+  'storybook-addon-source-link',
+]
+
+export { ADDONS_REACT_VITE }

package/dist/config/appearance.js

@@ -0,0 +1 @@
+import '../../../../src/config/appearance'

package/dist/config/authorization.js

@@ -0,0 +1,9 @@
+import { USERS } from './users'
+
+const AUTHORIZATION = {
+  profileUrl: `${process.env.REST_BASE_URL}/rest/profile/`,
+  signInUrl: `${process.env.REST_BASE_URL}/rest/sign-in/`,
+  values: USERS,
+}
+
+export { AUTHORIZATION }

package/dist/config/backgrounds.js

@@ -0,0 +1,16 @@
+const BACKGROUNDS = {
+  default: {
+    name: 'Default',
+    value: 'none',
+  },
+  light: {
+    name: 'Light',
+    value: '#fff',
+  },
+  dark: {
+    name: 'Dark',
+    value: '#000000',
+  },
+}
+
+export { BACKGROUNDS }

package/dist/config/frameworkNextJs.js

@@ -0,0 +1,5 @@
+const FRAMEWORK_NEXTJS = {
+  framework: '@storybook/nextjs',
+}
+
+export { FRAMEWORK_NEXTJS }

package/dist/config/frameworkReact.js

@@ -0,0 +1,21 @@
+const FRAMEWORK_REACT = {
+  framework: {
+    name: '@storybook/react-webpack5',
+    options: {
+      builder: {
+        useSWC: true,
+      },
+    },
+  },
+  swc: () => ({
+    jsc: {
+      transform: {
+        react: {
+          runtime: 'automatic',
+        },
+      },
+    },
+  }),
+}
+
+export { FRAMEWORK_REACT }

package/dist/config/frameworkReactVite.js

@@ -0,0 +1,5 @@
+const FRAMEWORK_REACT_VITE = {
+  framework: '@storybook/react-vite',
+}
+
+export { FRAMEWORK_REACT_VITE }

package/dist/config/index.js

@@ -0,0 +1,39 @@
+import { ADDONS_NEXTJS } from './addonsNextJs'
+import { ADDONS_REACT } from './addonsReact'
+import { ADDONS_REACT_VITE } from './addonsReactVite'
+import { AUTHORIZATION } from './authorization'
+import { BACKGROUNDS } from './backgrounds'
+import { FRAMEWORK_NEXTJS } from './frameworkNextJs'
+import { FRAMEWORK_REACT } from './frameworkReact'
+import { FRAMEWORK_REACT_VITE } from './frameworkReactVite'
+import { MAIN_CONFIG } from './mainConfig'
+import { MAIN_CONFIG_VITE } from './mainConfigVite'
+import { REFS } from './refs'
+import { SOURCELINK } from './sourceLink'
+import { STATIC_DIRS_NEXTJS } from './staticDirsNextJs'
+import { STATIC_DIRS_REACT } from './staticDirsReact'
+import { STATIC_DIRS_REACT_VITE } from './staticDirsReactVite'
+import { STORYSORT, STORYSORT_DOCUMENTATION, STORYSORT_ICONS } from './storySort'
+import { VIEWPORTS } from './viewports'
+
+export {
+  AUTHORIZATION,
+  ADDONS_NEXTJS,
+  STATIC_DIRS_REACT,
+  STATIC_DIRS_NEXTJS,
+  STATIC_DIRS_REACT_VITE,
+  FRAMEWORK_NEXTJS,
+  FRAMEWORK_REACT,
+  FRAMEWORK_REACT_VITE,
+  ADDONS_REACT,
+  SOURCELINK,
+  ADDONS_REACT_VITE,
+  BACKGROUNDS,
+  MAIN_CONFIG,
+  MAIN_CONFIG_VITE,
+  REFS,
+  VIEWPORTS,
+  STORYSORT,
+  STORYSORT_ICONS,
+  STORYSORT_DOCUMENTATION,
+}

package/dist/config/mainConfig.js

@@ -0,0 +1,29 @@
+const MAIN_CONFIG = {
+  core: {
+    disableTelemetry: true,
+    disableWhatsNewNotifications: true,
+  },
+  features: {
+    backgroundsStoryGlobals: true,
+    viewportStoryGlobals: true,
+  },
+  webpackFinal: async (config) => {
+    const imageRule = config.module?.rules?.find((rule) => {
+      const test = rule.test
+      if (!test) {
+        return false
+      }
+      return test.test('.svg')
+    })
+
+    imageRule.exclude = /\.svg$/
+
+    config.module?.rules?.push({
+      test: /\.svg$/,
+      use: ['@svgr/webpack'],
+    })
+    return config
+  },
+}
+
+export { MAIN_CONFIG }

package/dist/config/mainConfigVite.js

@@ -0,0 +1,11 @@
+const MAIN_CONFIG_VITE = {
+  core: {
+    disableTelemetry: true,
+  },
+  features: {
+    backgroundsStoryGlobals: true,
+    viewportStoryGlobals: true,
+  },
+}
+
+export { MAIN_CONFIG_VITE }

package/dist/config/preview.css

@@ -0,0 +1,68 @@
+.sb-main-centered {
+  & #storybook-root {
+    min-height: 100%;
+    align-items: center;
+  }
+}
+
+.sb-main-fullscreen {
+  height: auto;
+}
+
+#storybook-root {
+  width: 100%;
+  min-height: 100%;
+  display: flex;
+  justify-content: center;
+}
+
+.docs-story {
+  padding: 40px;
+  display: flex;
+  justify-content: center;
+}
+
+.icon-gallery {
+  &__block {
+    display: flex;
+    flex-direction: column;
+    gap: 20px;
+    &-title {
+      font-size: 20px;
+      font-weight: bold;
+      text-transform: capitalize;
+    }
+    &-group {
+      display: flex;
+      flex-flow: wrap;
+      &-link {
+        min-width: 120px;
+        margin: 0 10px 30px 0;
+        position: relative;
+        display: inline-flex;
+        flex: 0 1 calc(20% - 10px);
+        flex-direction: row;
+        align-items: center;
+        cursor: pointer;
+        &:hover {
+          ^^&-hint {
+            visibility: visible;
+          }
+        }
+      }
+      &-hint {
+        white-space: nowrap;
+        background: #fff;
+        padding: 4px 8px;
+        border-radius: 8px;
+        position: absolute;
+        visibility: hidden;
+        box-shadow: 0 4px 12px 0 rgba(0, 0, 0, 0.2);
+        left: 50%;
+        top: 80%;
+        z-index: 2;
+        transform: translate(-50%, 0%);
+      }
+    }
+  }
+}

package/dist/config/refs.js

@@ -0,0 +1,14 @@
+const REFS = {
+  'itcase-storybook': {
+    expanded: false,
+    title: 'Introduction',
+    url: 'https://itcase.pro/storybook/',
+  },
+  'itcase-ui': {
+    expanded: false,
+    title: 'ITCase UI',
+    url: 'https://itcase.pro/ui/',
+  },
+}
+
+export { REFS }

package/dist/config/sourceLink.js

@@ -0,0 +1,25 @@
+import { getFileUrl } from 'storybook-addon-source-link'
+
+const SOURCELINK = {
+  links: {
+    before: { label: '', href: '', order: 0, icon: '' },
+    'component-vscode': ({ importPath, rootPath }) => {
+      if (!rootPath) return undefined
+      const componentPath = importPath.replace(/\.stories\.(js|tsx)?$/, '.js')
+      const labelPath = 'Source — ' + importPath.replace(/\.stories\.(js|tsx)?$/, '')
+      const componentFileUrl = getFileUrl(rootPath, componentPath)
+      const href = `vscode://${componentFileUrl.href}`
+      return { label: labelPath, href, icon: 'VSCodeIcon' }
+    },
+    'story-vscode': ({ importPath, rootPath }) => {
+      if (!rootPath) return undefined
+      const fileUrl = getFileUrl(rootPath, importPath)
+      const labelPath = 'Story — ' + importPath.replace(/\.(js|tsx)?$/, '')
+      const href = `vscode://${fileUrl.href}`
+      return { label: labelPath, href, icon: 'StorybookIcon' }
+    },
+    'addon-powered-by': { label: '', href: '', order: 1000, icon: '' },
+  },
+}
+
+export { SOURCELINK }

package/dist/config/staticDirsNextJs.js

@@ -0,0 +1,6 @@
+const STATIC_DIRS_NEXTJS = [
+  { from: '../public', to: '/' },
+  { from: '../src/appearance/', to: 'src/appearance/' },
+  { from: '../public/img', to: 'img/' },
+]
+export { STATIC_DIRS_NEXTJS }

package/dist/config/staticDirsReact.js

@@ -0,0 +1,2 @@
+const STATIC_DIRS_REACT = [{ from: '../public', to: '/' }]
+export { STATIC_DIRS_REACT }

package/dist/config/staticDirsReactVite.js

@@ -0,0 +1,2 @@
+const STATIC_DIRS_REACT_VITE = [{ from: '../public', to: '/' }]
+export { STATIC_DIRS_REACT_VITE }

package/dist/config/storySort.js

@@ -0,0 +1,191 @@
+const defaultDocSort = [
+  'Introduction',
+  'Overview',
+  'Designer',
+  'Developer',
+  'Properties',
+  'Accessibility',
+]
+
+const defaultSortFirst = [
+  'Regular',
+  'All or Nothing',
+  'Mix',
+  'Tile',
+  'List',
+  'Item',
+  'Detail',
+  'Desktop',
+  'Mobile',
+  'Before',
+  'Header',
+  'Content',
+  'Item',
+  'Image',
+  'Data',
+]
+
+const defaultStateSort = ['Data', 'Verify', 'Error', 'Success']
+
+const defaultFormSort = [
+  'Default',
+  'Require',
+  'Required',
+  'Validation',
+  'Server Error',
+  'Filled',
+  'Error 400',
+  'Error 500',
+  'Loading',
+  'Response',
+  'Success',
+]
+
+const defaultSortLast = ['Footer', 'After']
+
+const STORYSORT = {
+  storySort: {
+    includeNames: true,
+    order: [
+      '*',
+      'Components',
+      [
+        ...defaultDocSort,
+        ...defaultSortFirst,
+        '*',
+        ...defaultSortLast,
+        [
+          ...defaultDocSort,
+          ...defaultSortFirst,
+          '*',
+          ...defaultSortLast,
+          [
+            ...defaultDocSort,
+            ...defaultSortFirst,
+            '*',
+            ...defaultSortLast,
+            [
+              ...defaultDocSort,
+              ...defaultSortFirst,
+              '*',
+              ...defaultSortLast,
+              [
+                ...defaultDocSort,
+                ...defaultSortFirst,
+                '*',
+                ...defaultSortLast,
+                [...defaultDocSort, ...defaultSortFirst, '*', ...defaultSortLast],
+                [
+                  'First',
+                  'First Bet',
+                  'Bet',
+                  'New Offer',
+                  'Wait',
+                  'Finished',
+                  'Stopped',
+                  'Canceled',
+                  'Need Confirm',
+                  'Confirmed',
+                  'Refused',
+                  '*',
+                ],
+                '*',
+                ...defaultSortLast,
+              ],
+            ],
+          ],
+        ],
+      ],
+      'Page Blocks',
+      [
+        ...defaultDocSort,
+        ...defaultSortFirst,
+        ...defaultStateSort,
+        '*',
+        ...defaultSortLast,
+        [
+          ...defaultDocSort,
+          ...defaultSortFirst,
+          ...defaultStateSort,
+          '*',
+          ...defaultSortLast,
+          [
+            ...defaultDocSort,
+            ...defaultSortFirst,
+            ...defaultStateSort,
+            '*',
+            ...defaultSortLast,
+            [...defaultDocSort, ...defaultSortFirst, ...defaultStateSort, '*', ...defaultSortLast],
+          ],
+        ],
+      ],
+      'Page Components',
+      [
+        ...defaultDocSort,
+        ...defaultSortFirst,
+        ...defaultStateSort,
+        '*',
+        ...defaultSortLast,
+        [
+          ...defaultDocSort,
+          ...defaultSortFirst,
+          ...defaultStateSort,
+          '*',
+          ...defaultSortLast,
+          [
+            ...defaultDocSort,
+            ...defaultSortFirst,
+            ...defaultStateSort,
+            '*',
+            ...defaultSortLast,
+            [...defaultDocSort, ...defaultSortFirst, ...defaultStateSort, '*', ...defaultSortLast],
+          ],
+        ],
+      ],
+      'Pages',
+      [...defaultDocSort, '*'],
+      'Forms',
+      [...defaultDocSort, ...defaultFormSort, '*'],
+      'Email',
+      [...defaultDocSort, '*'],
+    ],
+  },
+}
+
+const STORYSORT_DOCUMENTATION = {
+  storySort: {
+    includeNames: true,
+    order: [
+      '*',
+      [
+        'Introduction',
+        'Frontend',
+        [
+          'Overview',
+          'Structure',
+          'Packages',
+          'Pages',
+          'PageBlocks',
+          'PageComponents',
+          'Forms',
+          'Icons',
+        ],
+        'Backend',
+        'Design',
+        'Email',
+        'Storybook',
+        '*',
+        'FAQ',
+      ],
+    ],
+  },
+}
+
+const STORYSORT_ICONS = {
+  storySort: {
+    includeNames: true,
+    order: ['Overview', 'Usage', 'Default Icons', '*'],
+  },
+}
+
+export { STORYSORT, STORYSORT_DOCUMENTATION, STORYSORT_ICONS }

package/dist/config/users.js

@@ -0,0 +1,10 @@
+import { DEFAULT_USERS } from '@itcase/storybook-addon-auth/defaults'
+
+const USERS = {
+  user: { name: 'User', token: process.env.USER_AUTH_TOKEN, color: '#777777' },
+  manager: { name: 'Manager', token: process.env.MANAGER_AUTH_TOKEN, color: '#D80E4F' },
+  admin: { name: 'Admin', token: process.env.ADMIN_AUTH_TOKEN, color: '#1EA5FC' },
+  ...DEFAULT_USERS,
+}
+
+export { USERS }

package/dist/config/viewports.js

@@ -0,0 +1,22 @@
+import { INITIAL_VIEWPORTS, MINIMAL_VIEWPORTS } from '@storybook/addon-viewport'
+
+const VIEWPORTS = {
+  desktop: {
+    name: 'Desktop',
+    styles: {
+      width: '1440px',
+      height: '100%',
+    },
+  },
+  mobile: {
+    name: 'Mobile',
+    styles: {
+      width: '375px',
+      height: '667px',
+    },
+  },
+  ...INITIAL_VIEWPORTS,
+  ...MINIMAL_VIEWPORTS,
+}
+
+export { VIEWPORTS }

package/dist/itcase-storybook-config/components/EmailTemplatePreview.js

@@ -0,0 +1,40 @@
+import React, { useEffect } from 'react';
+
+var BACKEND_URL = process.env.EMAIL_URL;
+if (process.env.NODE_ENV === 'production') {
+  BACKEND_URL = process.env.REST_BASE_URL + "/storybook";
+}
+function EmailTemplatePreview(props) {
+  var style = {
+    width: '100%',
+    height: '100%',
+    position: 'absolute',
+    top: '0',
+    right: '0',
+    bottom: '0',
+    left: '0',
+    overflow: 'hidden',
+    border: '0',
+    overflowX: 'hidden',
+    overflowY: 'hidden'
+  };
+  useEffect(function () {
+    var emailPreviewIframe = document.getElementById('emailPreview');
+    var loaded = function loaded() {
+      var email = emailPreviewIframe.getElementsByClassName('email-body').length;
+      if (!email) {
+        alert('Need to run the backend server to display email templates, use: python manage.py runserver');
+      }
+    };
+    emailPreviewIframe.addEventListener('load', loaded, true);
+  });
+  return /*#__PURE__*/React.createElement("iframe", {
+    width: "100%",
+    height: "100%",
+    id: "emailPreview",
+    src: "" + BACKEND_URL + props.url,
+    style: style
+  });
+}
+
+export { EmailTemplatePreview };

package/dist/itcase-storybook-config/components/FormSubmitWrapper.js

@@ -0,0 +1,15 @@
+import React, { useRef, useEffect } from 'react';
+
+function FormSubmitWrapper(props) {
+  var formRef = useRef();
+  useEffect(function () {
+    if (formRef != null && formRef.current) {
+      formRef.current.submit();
+    }
+  }, [formRef]);
+  return /*#__PURE__*/React.cloneElement(props.children, {
+    ref: formRef
+  });
+}
+
+export { FormSubmitWrapper };

package/package.json

@@ -1,13 +1,16 @@
 {
   "name": "@itcase/storybook-config",
-  "version": "1.0.18",
+  "version": "1.0.20",
   "author": "ITCase",
   "description": "Code style linter configuration presets",
   "engines": {
     "node": ">=20.12.0"
   },
   "scripts": {
-    "prepare": "husky",
+    "build": "npm run build-js",
+    "build-js": "rm -rf dist && NODE_ENV=production rollup -c",
+    "prepare": "npx husky install",
+    "prepack": "npm run build",
     "storybook-react": "storybook dev -p 6006 --config-dir .storybook-react",
     "storybook-next-js": "storybook dev -p 6006 -c .storybook-next-js",
     "semantic-release": "semantic-release"
@@ -19,11 +22,22 @@
     "type": "git",
     "url": "https://github.com/ITCase/itcase-storybook-config.git"
   },
-  "main": "config/index.js",
+  "exports": {
+    "./components/*": {
+      "types": "./dist/types/components/*/index.d.ts",
+      "import": "./dist/components/*.js",
+      "require": "./dist/cjs/components/*.js"
+    },
+    "./comfig/*": {
+      "types": "./dist/types/config/*/index.d.ts",
+      "import": "./dist/config/*.js",
+      "require": "./dist/cjs/config/*.js"
+    }
+  },
   "files": [
     "README.md",
-    "components",
-    "config"
+    "config",
+    "dist"
   ],
   "publishConfig": {
     "access": "public",
@@ -34,15 +48,13 @@
   },
   "dependencies": {
     "@itcase/config": "^1.0.7",
-    "@storybook/addon-designs": "^8.2.0",
-    "storybook-addon-source-link": "^0.2.1",
     "@itcase/storybook-addon-auth": "^1.0.4",
     "@storybook/addon-actions": "^8.5.5",
     "@storybook/addon-controls": "^8.5.5",
+    "@storybook/addon-designs": "^8.2.0",
     "@storybook/addon-essentials": "^8.5.5",
     "@storybook/addon-interactions": "^8.5.5",
     "@storybook/addon-links": "^8.5.5",
-    "@storybook/react-vite": "^8.5.5",
     "@storybook/addon-styling-webpack": "^1.0.1",
     "@storybook/addon-themes": "^8.5.5",
     "@storybook/addon-viewport": "^8.5.5",
@@ -52,32 +64,41 @@
     "@storybook/nextjs": "^8.5.5",
     "@storybook/preview-api": "^8.5.5",
     "@storybook/react": "^8.5.5",
+    "@storybook/react-vite": "^8.5.5",
     "@storybook/react-webpack5": "^8.5.5",
     "@storybook/theming": "^8.5.5",
     "http-proxy-middleware": "^3.0.3",
     "msw": "^2.7.0",
     "msw-storybook-addon": "^2.0.4",
     "react-docgen": "^7.1.1",
-    "react-docgen-typescript-plugin": "^1.0.8"
+    "react-docgen-typescript-plugin": "^1.0.8",
+    "storybook-addon-source-link": "^0.2.1"
   },
   "devDependencies": {
-    "react": "^18",
-    "react-dom": "^18",
-    "@types/react": "^18",
-    "@types/react-dom": "^18",
     "@commitlint/cli": "^19.7.1",
     "@commitlint/config-conventional": "^19.7.1",
     "@itcase/common": "^1.2.17",
-    "@itcase/lint": "^1.0.40",
+    "@itcase/lint": "^1.0.41",
     "@itcase/ui": "^1.3.25",
+    "@rollup/plugin-babel": "^6.0.4",
+    "@rollup/plugin-commonjs": "^28.0.2",
+    "@rollup/plugin-node-resolve": "^16.0.0",
     "@semantic-release/changelog": "^6.0.3",
     "@semantic-release/git": "^10.0.1",
     "@semantic-release/release-notes-generator": "14.0.3",
+    "@types/react": "^18",
+    "@types/react-dom": "^18",
     "conventional-changelog-conventionalcommits": "^8.0.0",
     "eslint": "9.20.1",
+    "glob": "^11.0.1",
     "husky": "^9.1.7",
     "lint-staged": "^15.4.3",
     "prettier": "^3.5.0",
+    "react": "^18",
+    "react-dom": "^18",
+    "rollup": "^4.34.6",
+    "rollup-plugin-copy": "^3.5.0",
+    "rollup-plugin-peer-deps-external": "^2.2.4",
     "semantic-release": "^24.2.2",
     "storybook": "^8.5.5",
     "stylelint": "^16.14.1",

package/components/EmailTemplatePreview/index.js

@@ -1,50 +0,0 @@
-import React, { useEffect } from 'react'
-
-let BACKEND_URL = process.env.EMAIL_URL
-
-if (process.env.NODE_ENV === 'production') {
-  BACKEND_URL = `${process.env.REST_BASE_URL}/storybook`
-}
-
-function EmailTemplatePreview(props) {
-  const style = {
-    width: '100%',
-    height: '100%',
-    position: 'absolute',
-    top: '0',
-    right: '0',
-    bottom: '0',
-    left: '0',
-    overflow: 'hidden',
-    border: '0',
-    overflowX: 'hidden',
-    overflowY: 'hidden',
-  }
-
-  useEffect(() => {
-    const emailPreviewIframe = document.getElementById('emailPreview')
-    const loaded = () => {
-      const email = emailPreviewIframe.getElementsByClassName('email-body').length
-      if (!email) {
-        alert(
-          'Need to run the backend server to display email templates, use: python manage.py runserver',
-        )
-      }
-    }
-    emailPreviewIframe.addEventListener('load', loaded, true)
-  })
-
-  return (
-    <React.Fragment>
-      <iframe
-        width="100%"
-        height="100%"
-        id="emailPreview"
-        src={`${BACKEND_URL}${props.url}`}
-        style={style}
-      />
-    </React.Fragment>
-  )
-}
-
-export { EmailTemplatePreview }

package/components/FormSubmitWrapper/index.js

@@ -1,17 +0,0 @@
-import React, { useEffect, useRef } from 'react'
-
-function FormSubmitWrapper(props) {
-  const formRef = useRef()
-
-  useEffect(() => {
-    if (formRef?.current) {
-      formRef.current.submit()
-    }
-  }, [formRef])
-
-  return React.cloneElement(props.children, {
-    ref: formRef,
-  })
-}
-
-export { FormSubmitWrapper }