@mmb-digital/ds-lilly 1.0.0-alpha.85 → 1.0.0-alpha.86

package/{dist/cjs → cjs}/ds-lilly.css

@@ -9475,7 +9475,7 @@ body.dark .u-fg--fgWhiteDefault {
 /* Slider */
 .slick-loading .slick-list
 {
-    background: #fff url('assets/230b9b07516f48e471c8.gif') center center no-repeat;
+    background: #fff url('assets/3fd7a89c57d9b0b6d591.gif') center center no-repeat;
 }
 
 /* Icons */
@@ -9485,8 +9485,8 @@ body.dark .u-fg--fgWhiteDefault {
     font-weight: normal;
     font-style: normal;
 
-    src: url('assets/474b17e51f73272880b6.eot');
-    src: url('assets/0cc3d14a986cdf616805.eot') format('embedded-opentype'), url('assets/071ab518b5e5834a0eb1.woff') format('woff'), url('assets/aaa9a2f6fe90efa5f9ed.ttf') format('truetype'), url('assets/a8234b3f2d37d611c62d.svg') format('svg');
+    src: url('assets/e30d3b43097527d12bad.eot');
+    src: url('assets/10656a8d012a85bc4614.eot') format('embedded-opentype'), url('assets/084c04b35b60fe39e643.woff') format('woff'), url('assets/4a798f4fa3ded315c84c.ttf') format('truetype'), url('assets/dd1d0a3c08d4f6a012de.svg') format('svg');
 }
 /* Arrows */
 .slick-prev,

package/{dist/ds-lilly.css → ds-lilly.css}

@@ -9475,7 +9475,7 @@ body.dark .u-fg--fgWhiteDefault {
 /* Slider */
 .slick-loading .slick-list
 {
-    background: #fff url('assets/4e82baec41060dccffb8.gif') center center no-repeat;
+    background: #fff url('assets/814373d1e35d643a5193.gif') center center no-repeat;
 }
 
 /* Icons */
@@ -9485,8 +9485,8 @@ body.dark .u-fg--fgWhiteDefault {
     font-weight: normal;
     font-style: normal;
 
-    src: url('assets/0b1e81641c9eeb993db6.eot');
-    src: url('assets/2b1592f1ceacaf11d459.eot') format('embedded-opentype'), url('assets/ef7d3e6aa089b5046577.woff') format('woff'), url('assets/9261a63c65dc95f8c06c.ttf') format('truetype'), url('assets/6cfc68ce9b51163ced00.svg') format('svg');
+    src: url('assets/29e8a5fa95e0169cafe4.eot');
+    src: url('assets/30da08b9e28b4d60da55.eot') format('embedded-opentype'), url('assets/9d88ef6a423d364179de.woff') format('woff'), url('assets/65e98713792bd8a5d2a4.ttf') format('truetype'), url('assets/fe53ae22a439e36e4669.svg') format('svg');
 }
 /* Arrows */
 .slick-prev,

package/package.json

@@ -1,38 +1,14 @@
 {
+  "main": "./cjs/index.js",
+  "module": "./index.js",
+  "typings": "./index.d.ts",
   "name": "@mmb-digital/ds-lilly",
-  "version": "1.0.0-alpha.85",
+  "version": "1.0.0-alpha.86",
   "description": "MMB LILLY design system",
   "license": "UNLICENSED",
   "sideEffects": [
     "**/*.css"
   ],
-  "main": "dist/cjs/index.js",
-  "module": "dist/index.js",
-  "typings": "dist/index.d.ts",
-  "scripts": {
-    "build": "rimraf dist && yarn && yarn generate && rollup -c && node ./scripts/generateDistPackage",
-    "check:c": "yarn lint:fix && git add -A",
-    "check:p": "yarn test:check",
-    "fixme": "node ./scripts/fixme.js",
-    "generate": "yarn generate:colors && yarn generate:icons && yarn generate:index",
-    "generate:colors": "node ./scripts/processColors",
-    "generate:comp": "plop --plopfile ./scripts/plopfile.js && yarn generate:index",
-    "generate:icons": "node ./scripts/processIcons.mjs && svgr -d src/components/Components/Avatar/_parts_/ dist/svg/ --typescript",
-    "generate:index": "node ./scripts/createIndex",
-    "lint": "yarn tslint && yarn stylelint",
-    "lint:fix": "yarn tslint --fix && yarn stylelint --fix",
-    "new:publish": "cd dist && yarn publish",
-    "prepare": "husky install",
-    "start": "yarn && yarn generate && yarn storybook",
-    "start:silent": "yarn generate && yarn storybook:ci",
-    "storybook": "storybook dev -p 6006",
-    "storybook:build": "storybook build",
-    "storybook:ci": "storybook dev -p 6006 --ci",
-    "stylelint": "stylelint \"**/*.scss\"",
-    "test": "cypress open --component",
-    "test:check": "cypress run --component",
-    "tslint": "tsc && eslint --ext .js,.jsx,.ts,.tsx . --cache --ignore-path .gitignore --max-warnings=0"
-  },
   "browserslist": [
     ">0.2% in CZ",
     "not dead",
@@ -40,23 +16,6 @@
     "not ie > 0",
     "not ie_mob > 0"
   ],
-  "eslintConfig": {
-    "extends": [
-      "react-app",
-      "react-app/jest",
-      "plugin:storybook/recommended"
-    ],
-    "overrides": [
-      {
-        "files": [
-          "**/*.stories.*"
-        ],
-        "rules": {
-          "import/no-anonymous-default-export": "off"
-        }
-      }
-    ]
-  },
   "dependencies": {
     "@storybook/addon-designs": "^8.0.0",
     "@types/react-datepicker": "^6.2.0",
@@ -83,102 +42,11 @@
     "slick-carousel": "^1.8.1",
     "text-mask-addons": "^3.8.0"
   },
-  "devDependencies": {
-    "@babel/preset-env": "^7.23.2",
-    "@babel/preset-react": "^7.22.15",
-    "@babel/preset-typescript": "^7.23.2",
-    "@cypress/vite-dev-server": "^5.0.7",
-    "@jest/globals": "^29.7.0",
-    "@namics/stylelint-bem": "^6.3.4",
-    "@rollup/plugin-commonjs": "^25.0.7",
-    "@rollup/plugin-dynamic-import-vars": "^2.1.0",
-    "@rollup/plugin-image": "^3.0.3",
-    "@rollup/plugin-node-resolve": "^15.2.3",
-    "@rollup/plugin-typescript": "^11.1.5",
-    "@rollup/plugin-url": "^8.0.2",
-    "@storybook/addon-a11y": "^8",
-    "@storybook/addon-docs": "^8",
-    "@storybook/addon-essentials": "^8",
-    "@storybook/addon-viewport": "^8.4.5",
-    "@storybook/blocks": "^8",
-    "@storybook/react": "^8",
-    "@storybook/react-vite": "^8",
-    "@storybook/theming": "^8",
-    "@svgr/cli": "^5.5.0",
-    "@svgr/rollup": "^8.1.0",
-    "@testing-library/jest-dom": "^5.12.0",
-    "@testing-library/react": "^11.2.7",
-    "@testing-library/user-event": "^13.1.9",
-    "@types/enzyme": "^3.10.8",
-    "@types/jest": "^26.0.23",
-    "@types/lodash.debounce": "^4.0.9",
-    "@types/node": "^20",
-    "@types/ramda": "^0.27.1",
-    "@types/react": "^17.0.6",
-    "@types/react-dom": "^17.0.5",
-    "@types/react-flatpickr": "^3.8.11",
-    "@types/react-router": "^5.1.4",
-    "@types/react-router-dom": "^5.1.5",
-    "@types/react-slick": "^0.23.10",
-    "@types/react-text-mask": "^5.4.14",
-    "@typescript-eslint/eslint-plugin": "^7.7.0",
-    "@typescript-eslint/parser": "^7.0.1",
-    "@vitejs/plugin-react": "^4.2.1",
-    "@wojtekmaj/enzyme-adapter-react-17": "^0.6.1",
-    "cypress": "^13.4.0",
-    "cypress-react-selector": "^3.0.0",
-    "enzyme": "^3.11.0",
-    "eslint": "^8.1.0",
-    "eslint-config-prettier": "^8.3.0",
-    "eslint-mdx": "^2.2.0",
-    "eslint-plugin-import": "^2.29.0",
-    "eslint-plugin-mdx": "^2.2.0",
-    "eslint-plugin-no-only-tests": "^2.6.0",
-    "eslint-plugin-prettier": "^5.1.3",
-    "eslint-plugin-react": "^7.33.2",
-    "eslint-plugin-react-hooks": "^4.3.0",
-    "eslint-plugin-simple-import-sort": "^7.0.0",
-    "eslint-plugin-sort-destructure-keys": "^1.3.5",
-    "eslint-plugin-sort-keys-fix": "^1.1.1",
-    "eslint-plugin-storybook": "^0.6.15",
-    "eslint-plugin-unused-imports": "^3",
-    "fixme": "^0.6.0",
-    "fs-extra": "^11.1.1",
-    "glob": "^10.3.10",
-    "husky": "^6.0.0",
-    "imagemin": "^8.0.1",
-    "imagemin-svgo": "^10.0.1",
-    "plop": "^4.0.1",
-    "postcss": "^8.4.33",
-    "postcss-url": "^10.1.3",
-    "prettier": "^3.2.4",
-    "react": "^17.0.2",
-    "react-docgen-typescript-loader": "^3.7.2",
-    "react-dom": "^17.0.2",
-    "react-powerplug": "^1.0.0",
-    "rollup": "^4.2.0",
-    "rollup-plugin-peer-deps-external": "^2.2.4",
-    "rollup-plugin-postcss": "^4.0.2",
-    "rollup-plugin-rename-node-modules": "^1.3.1",
-    "rollup-plugin-terser": "^7.0.2",
-    "rollup-plugin-visualizer": "^5.9.2",
-    "sass": "^1.69.5",
-    "sort-package-json": "^1.50.0",
-    "storybook": "^8",
-    "storybook-addon-css-user-preferences": "^0.0.3",
-    "storybook-dark-mode": "^4.0.2",
-    "stylelint": "^13.13.1",
-    "stylelint-config-sass-guidelines": "^8.0.0",
-    "svgo": "3.2.0",
-    "typescript": "^5.3.3",
-    "vite": "^5.2.9",
-    "vite-tsconfig-paths": "^4.3.2"
-  },
   "peerDependencies": {
     "history": "^4.10.1",
     "react": ">=17",
     "react-dom": ">=17",
     "react-router-dom": "5.1.2"
   },
-  "outputDir": "./dist"
+  "private": false
 }

package/.babelrc

@@ -1,7 +0,0 @@
-{
-  "presets": [
-    ["@babel/preset-env", { "targets": { "node": "current" } }],
-    "@babel/preset-react",
-    "@babel/preset-typescript"
-  ]
-}

package/.editorconfig

@@ -1,10 +0,0 @@
-# http://editorconfig.org
-
-root = true
-
-[*]
-charset = utf-8
-indent_style = space
-indent_size = 2
-end_of_line = lf
-trim_trailing_whitespace = true

package/.eslintrc

@@ -1,70 +0,0 @@
-{
-  "ignorePatterns": ["scripts/", "dist/", "src/components/Components/Avatar/_parts_"],
-  "parser": "@typescript-eslint/parser", // Specifies the ESLint parser
-  "extends": [
-    "plugin:react/recommended", // Uses the recommended rules from @eslint-plugin-react
-    "plugin:@typescript-eslint/recommended", // Uses the recommended rules from the @typescript-eslint/eslint-plugin
-    "plugin:prettier/recommended", // Enables eslint-plugin-prettier and eslint-config-prettier. This will display prettier errors as ESLint errors. Make sure this is always the last configuration in the extends array.
-    "plugin:mdx/recommended",
-    "plugin:react-hooks/recommended" // Enables checking rules of hooks
-  ],
-  "parserOptions": {
-    "ecmaVersion": 2020, // Allows for the parsing of modern ECMAScript features
-    "sourceType": "module" // Allows for the use of imports
-  },
-  "plugins": [
-    "simple-import-sort",
-    "unused-imports",
-    "sort-destructure-keys",
-    "sort-keys-fix",
-    "import",
-    "no-only-tests"
-  ],
-  "rules": {
-    "react/jsx-fragments": ["warn", "element"],
-    "react/jsx-key": "off",
-    "react/jsx-sort-props": [
-      "error",
-      {
-        "callbacksLast": true,
-        "shorthandFirst": true,
-        "shorthandLast": false,
-        "ignoreCase": false,
-        "noSortAlphabetically": false,
-        "reservedFirst": true
-      }
-    ],
-    "no-only-tests/no-only-tests": "error",
-    "simple-import-sort/imports": 1,
-    "sort-destructure-keys/sort-destructure-keys": 1,
-    "no-alert": "warn",
-    "no-console": "warn",
-    "import/no-duplicates": ["error", { "considerQueryString": true }],
-    "no-unused-vars": "off",
-    "no-unused-imports": "off",
-    "unused-imports/no-unused-imports": 2,
-    "unused-imports/no-unused-vars": 1,
-    "@typescript-eslint/explicit-function-return-type": "off",
-    "linebreak-style": ["warn", "unix"],
-    "@typescript-eslint/no-namespace": "off"
-  },
-  "overrides": [
-    {
-      "files": ["dist/types/**"],
-      "rules": {
-        "@typescript-eslint/no-explicit-any": "off"
-      }
-    },
-    {
-      "files": ["*.tsx"],
-      "rules": {
-        "mdx/no-unused-expressions": "off"
-      }
-    }
-  ],
-  "settings": {
-    "react": {
-      "version": "detect" // Tells eslint-plugin-react to automatically detect the version of React to use
-    }
-  }
-}

package/.huskyrc

@@ -1,5 +0,0 @@
-{
-  "hooks": {
-    "pre-commit": "yarn check:c"
-  }
-}

package/.nvmrc

@@ -1 +0,0 @@
-v20.12.2

package/.prettierrc.js

@@ -1,7 +0,0 @@
-module.exports = {
-    semi: false,
-    trailingComma: 'none',
-    singleQuote: true,
-    printWidth: 120,
-    tabWidth: 2,
-  }

package/.storybook/DocsContainer.tsx

@@ -1,25 +0,0 @@
-import React, { PropsWithChildren, useEffect, useState } from 'react'
-import { DocsContainer as BaseContainer, DocsContainerProps as BaseContainerProps } from '@storybook/blocks'
-import { themes } from '@storybook/theming'
-import { addons } from '@storybook/preview-api'
-
-const DARK_MODE_EVENT_NAME = 'DARK_MODE'
-
-export const DocsContainer = ({ children, ...props }: PropsWithChildren<BaseContainerProps>) => {
-  const [isDark, setIsDark] = useState(document.body.classList.contains('dark'))
-
-  useEffect(() => {
-    const chan = addons.getChannel()
-    chan.on(DARK_MODE_EVENT_NAME, setIsDark)
-    return () => chan.off(DARK_MODE_EVENT_NAME, setIsDark)
-  }, [])
-
-  return (
-    <BaseContainer
-      {...props}
-      theme={isDark ? themes.dark : themes.light}
-    >
-      {children}
-    </BaseContainer>
-  )
-}

package/.storybook/main.ts

@@ -1,26 +0,0 @@
-import type { StorybookConfig } from '@storybook/react-vite'
-import { mergeConfig } from 'vite'
-
-const config: StorybookConfig = {
-  framework: {
-    name: '@storybook/react-vite',
-    options: {}
-  },
-  stories: ['../docs/Intro.stories.tsx', '../docs/**/*.tsx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
-  staticDirs: ['../docs/assets'],
-  addons: [
-    '@storybook/addon-a11y',
-    '@storybook/addon-actions',
-    '@storybook/addon-links',
-    '@storybook/addon-essentials',
-    'storybook-dark-mode',
-    '@storybook/addon-designs'
-    // 'storybook-addon-css-user-preferences'
-  ],
-  docs: {
-    autodocs: true,
-    defaultName: 'Dokumentace',
-  }
-}
-
-export default config

package/.storybook/manager.ts

@@ -1,34 +0,0 @@
-import { addons } from '@storybook/manager-api'
-import { create } from '@storybook/theming/create'
-// import { themes } from '@storybook/theming'
-
-const lightTheme = create({
-  base: 'light',
-  brandTitle: 'moneta storybook',
-  brandImage: 'https://www.moneta.cz/documents/20143/3348658/moneta-logo.svg/bb49eb5a-eee0-77e1-32b9-fa93855af13b',
-  brandUrl: 'https://moneta.cz',
-  brandTarget: '_blank',
-  fontBase:
-    '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif',
-  fontCode: 'monospace'
-})
-
-const darkTheme = create({
-  base: 'dark',
-  brandTitle: 'moneta storybook',
-  brandImage: 'https://www.moneta.cz/documents/20143/3348658/moneta-logo.svg/bb49eb5a-eee0-77e1-32b9-fa93855af13b',
-  brandUrl: 'https://moneta.cz',
-  brandTarget: '_blank',
-  fontBase:
-    '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif',
-  fontCode: 'monospace',
-  appBg: 'black',
-  appContentBg: 'black'
-})
-
-// addons.setConfig({
-//   theme: lightTheme
-// })
-// addons.setConfig({
-//   theme: darkTheme
-// })

package/.storybook/preview.tsx

@@ -1,72 +0,0 @@
-import { INITIAL_VIEWPORTS } from '@storybook/addon-viewport'
-import { Controls, Description, Stories, Subtitle, Title } from '@storybook/blocks'
-import { ThemeProvider, ensure, themes } from '@storybook/theming'
-import { addons } from '@storybook/preview-api'
-
-import { Preview, StoryContext, StoryFn } from '@storybook/react'
-import React, { useEffect, useState } from 'react'
-import { useDarkMode } from 'storybook-dark-mode'
-import { BrowserRouter } from 'react-router-dom'
-import { DocsContainer } from './DocsContainer'
-
-const DARK_MODE_EVENT_NAME = 'DARK_MODE'
-
-const ThemeDecorator = (Story: StoryFn, context: StoryContext) => {
-  const [isDark, setIsDark] = useState(document.body.classList.contains('dark'))
-
-  useEffect(() => {
-    const chan = addons.getChannel()
-    chan.on(DARK_MODE_EVENT_NAME, setIsDark)
-    return () => chan.off(DARK_MODE_EVENT_NAME, setIsDark)
-  }, [])
-  const theme = ensure(isDark ? themes.dark : themes.light)
-  useEffect(() => {
-    document.getElementsByTagName('body')[0].style.backgroundColor = theme.background.app
-  }, [theme])
-
-  return (
-    <ThemeProvider theme={theme}>
-      <Story {...context} />
-    </ThemeProvider>
-  )
-}
-
-export const decorators = [
-  ThemeDecorator,
-  (Story) => (
-    <BrowserRouter>
-      <Story />
-    </BrowserRouter>
-  )
-]
-
-export const parameters: Preview['parameters'] = {
-  controls: {
-    matchers: {
-      color: /(background|color)$/i,
-      date: /Date$/,
-      boolean: /is.*$/
-    }
-  },
-  docs: {
-    container: DocsContainer,
-    page: () => (
-      <>
-        <Title />
-        <Subtitle />
-        <Description />
-        <Controls />
-        <Stories />
-      </>
-    )
-  },
-  darkMode: {
-    dark: { ...themes.dark },
-    light: { ...themes.light },
-    stylePreview: true,
-    darkClass: 'dark'
-  },
-  viewport: {
-    viewports: INITIAL_VIEWPORTS
-  }
-}

package/.stylelintrc

@@ -1,16 +0,0 @@
-{
-  'extends': 'stylelint-config-sass-guidelines',
-  'plugins': ['@namics/stylelint-bem'],
-  'rules':
-    {
-      'max-nesting-depth': null,
-      'property-no-vendor-prefix': null,
-      'scss/dollar-variable-pattern': null,
-      'selector-class-pattern': null,
-      'selector-no-qualifying-type': null,
-      'scss/at-mixin-pattern': null,
-      'order/order':
-        [['custom-properties', 'dollar-variables', 'declarations', 'rules']],
-    },
-  'ignoreFiles': ['src/scss/component/_dateTime.scss', 'src/scss/form/**'],
-}

package/.vscode/settings.json

@@ -1,14 +0,0 @@
-{
-  "typescript.tsdk": "node_modules/typescript/lib",
-  "editor.codeActionsOnSave": {
-    "source.fixAll.eslint": "explicit",
-    "source.fixAll.stylelint": "explicit"
-  },
-  "github.copilot.enable": {
-    "*": true,
-    "yaml": false,
-    "plaintext": false,
-    "markdown": false,
-    "scminput": false
-  }
-}

package/.yarnrc.yml

@@ -1 +0,0 @@
-nodeLinker: node-modules

package/README.md

@@ -1,10 +0,0 @@
-# Design system Lilly
-
-## How to versioning
-
-We are using [Semver](https://www.npmjs.com/package/semver) **MAJOR.MINOR.PATCH[-SUFFIX]**:
-
-* **MAJOR** - incompatible API changes
-* **MINOR** - add functionality (backwards-compatible)
-* **PATCH** - bug fixes (backwards-compatible)
-* **-SUFFIX** - pre-release or for testing purposes only

package/cypress/plugins/index.ts

@@ -1,30 +0,0 @@
-/// <reference types="cypress" />
-// ***********************************************************
-// This example plugins/index.js can be used to load plugins
-//
-// You can change the location of this file or turn off loading
-// the plugins file with the 'pluginsFile' configuration option.
-//
-// You can read more here:
-// https://on.cypress.io/plugins-guide
-// ***********************************************************
-
-// This function is called when a project is opened or re-opened (e.g. due to
-// the project's config changing)
-import { devServer } from '@cypress/vite-dev-server'
-import react from '@vitejs/plugin-react'
-
-module.exports = (on, config) => {
-  if (config.testingType === 'component') {
-    // eslint-disable-next-line
-    on('dev-server:start', (options: any) => {
-      return devServer({
-        ...options,
-        viteConfig: {
-          plugins: [react()]
-        },
-        framework: 'react'
-      })
-    })
-  }
-}

package/cypress/support/commands.ts

@@ -1,37 +0,0 @@
-/// <reference types="cypress" />
-// ***********************************************
-// This example commands.ts shows you how to
-// create various custom commands and overwrite
-// existing commands.
-//
-// For more comprehensive examples of custom
-// commands please read more here:
-// https://on.cypress.io/custom-commands
-// ***********************************************
-//
-//
-// -- This is a parent command --
-// Cypress.Commands.add('login', (email, password) => { ... })
-//
-//
-// -- This is a child command --
-// Cypress.Commands.add('drag', { prevSubject: 'element'}, (subject, options) => { ... })
-//
-//
-// -- This is a dual command --
-// Cypress.Commands.add('dismiss', { prevSubject: 'optional'}, (subject, options) => { ... })
-//
-//
-// -- This will overwrite an existing command --
-// Cypress.Commands.overwrite('visit', (originalFn, url, options) => { ... })
-//
-// declare global {
-//   namespace Cypress {
-//     interface Chainable {
-//       login(email: string, password: string): Chainable<void>
-//       drag(subject: string, options?: Partial<TypeOptions>): Chainable<Element>
-//       dismiss(subject: string, options?: Partial<TypeOptions>): Chainable<Element>
-//       visit(originalFn: CommandOriginalFn, url: string, options: Partial<VisitOptions>): Chainable<Element>
-//     }
-//   }
-// }

package/cypress/support/component-index.html

@@ -1,12 +0,0 @@
-<!DOCTYPE html>
-<html dir="ltr" lang="en-gb">
-  <head>
-    <meta charset="utf-8" />
-    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
-    <meta name="viewport" content="width=device-width,initial-scale=1.0" />
-    <title>test</title>
-  </head>
-  <body>
-    <div id="__cy_root" data-cy-root></div>
-  </body>
-</html>

package/cypress/support/component.ts

@@ -1,41 +0,0 @@
-// ***********************************************************
-// This example support/component.ts is processed and
-// loaded automatically before your test files.
-//
-// This is a great place to put global configuration and
-// behavior that modifies Cypress.
-//
-// You can change the location of this file or turn off
-// automatically serving support files with the
-// 'supportFile' configuration option.
-//
-// You can read more here:
-// https://on.cypress.io/configuration
-// ***********************************************************
-
-// Import commands.js using ES2015 syntax:
-import './commands'
-import 'cypress-react-selector'
-
-// Alternatively you can use CommonJS syntax:
-// require('./commands')
-import { mount } from 'cypress/react'
-
-// Augment the Cypress namespace to include type definitions for
-// your custom command.
-// Alternatively, can be defined in cypress/support/component.d.ts
-// with a <reference path="./component" /> at the top of your spec.
-declare global {
-  export namespace Cypress {
-    interface Chainable {
-      mount: typeof mount
-      // eslint-disable-next-line
-      react(component: string, props?: Record<string, any>, state?: Record<string, any>): Chainable<Element>
-    }
-  }
-}
-
-Cypress.Commands.add('mount', mount)
-
-// Example use:
-// cy.mount(<MyComponent />)