@brightcove/components-embed-code-modal 1.1.0 → 1.1.2

package/__tests__/EmbedCode.test.tsx

@@ -1,51 +0,0 @@
-import React from 'react';
-import { render } from '@testing-library/react';
-import { ModalContainer } from '../src/js/components';
-import { EmbedCodeModalTypes } from '../src';
-import { QueryClientProvider, QueryClient } from 'react-query';
-
-const DEFAULT_MODAL_COMP = {
-  videoId: '123',
-  videoName: 'test video',
-  accountId: '456',
-  duration: 10,
-};
-
-const wrappedComponent = (children: React.ReactElement) => (
-  <QueryClientProvider client={new QueryClient()}>
-    {children}
-  </QueryClientProvider>
-);
-
-const handleSetComponentKey = jest.fn;
-const handleSetHasCreatedPlayer = jest.fn;
-
-test('does not render player with wrong information but right type', () => {
-  const { container } = render(
-    wrappedComponent(
-      <ModalContainer
-        handleSetComponentKey={handleSetComponentKey}
-        data={DEFAULT_MODAL_COMP}
-        hasCreatedPlayer={false}
-        handleSetHasCreatedPlayer={handleSetHasCreatedPlayer}
-        embedCodeModalType={EmbedCodeModalTypes.PLAYER}
-      />,
-    ),
-  );
-  expect(container.innerHTML).toBe('');
-});
-
-test('does not render project with wrong information but right type', () => {
-  const { container } = render(
-    wrappedComponent(
-      <ModalContainer
-        handleSetComponentKey={handleSetComponentKey}
-        data={DEFAULT_MODAL_COMP}
-        hasCreatedPlayer={false}
-        handleSetHasCreatedPlayer={handleSetHasCreatedPlayer}
-        embedCodeModalType={EmbedCodeModalTypes.PROJECT}
-      />,
-    ),
-  );
-  expect(container.innerHTML).toBe('');
-});

package/__tests__/InteractivityProject.test.tsx

@@ -1,50 +0,0 @@
-import React from 'react';
-import { QueryClientProvider, QueryClient } from 'react-query';
-import { render, screen } from '@testing-library/react';
-import { VideoPlayer } from 'js/components';
-import { EmbedCodeModalTypes } from 'js/types/EmbedCodeModalProps';
-import { PLAYER_LIST_FOR_SELECTION, PLAYERS } from 'js/constants/player';
-
-jest.mock('../src/js/utils/featureSwitches');
-
-const wrappedComponent = (children: React.ReactElement) => (
-  <QueryClientProvider client={new QueryClient()}>
-    {children}
-  </QueryClientProvider>
-);
-
-const DEFAULT_MODAL_COMP = {
-  videoId: '123',
-  videoName: 'test video',
-  interactivityProjectId: '9876',
-  interactivityProjectName: 'test project',
-  accountId: '456',
-  duration: 10,
-};
-
-test('renders EmbedCodeModal component with right information', () => {
-  render(
-    wrappedComponent(
-      <VideoPlayer
-        video={DEFAULT_MODAL_COMP}
-        embedCodeModalType={EmbedCodeModalTypes.PROJECT}
-        playerListForSelection={PLAYER_LIST_FOR_SELECTION}
-        players={PLAYERS}
-      />,
-    ),
-  );
-  expect(
-    screen.getByText(DEFAULT_MODAL_COMP.interactivityProjectId),
-  ).toBeInTheDocument();
-  expect(
-    screen.getByText(DEFAULT_MODAL_COMP.interactivityProjectName),
-  ).toBeInTheDocument();
-  expect(
-    screen.queryByText(DEFAULT_MODAL_COMP.videoId),
-  ).not.toBeInTheDocument();
-  expect(
-    screen.queryByText(DEFAULT_MODAL_COMP.videoName),
-  ).not.toBeInTheDocument();
-  expect(screen.getByRole('tab', { name: /javascript/i })).toBeInTheDocument();
-  expect(screen.getByRole('tab', { name: /IFrame/i })).toBeInTheDocument();
-});

package/__tests__/PlayerPreview.test.tsx

@@ -1,23 +0,0 @@
-import React from 'react';
-import { render, screen } from '@testing-library/react';
-import { PlayerPreview } from '../src/js/components';
-import { QueryClientProvider, QueryClient } from 'react-query';
-
-const DEFAULT_MODAL_COMP = {
-  id: 'default',
-  accountId: '456',
-};
-
-const wrappedComponent = (children: React.ReactElement) => (
-  <QueryClientProvider client={new QueryClient()}>
-    {children}
-  </QueryClientProvider>
-);
-
-test('renders PlayerPreview component with right information', () => {
-  render(wrappedComponent(<PlayerPreview {...DEFAULT_MODAL_COMP} />));
-  expect(screen.getByText('getURL')).toBeInTheDocument();
-  expect(screen.getByText('previewButton')).toBeInTheDocument();
-  expect(screen.getByRole('tab', { name: /javascript/i })).toBeInTheDocument();
-  expect(screen.getByRole('tab', { name: /IFrame/i })).toBeInTheDocument();
-});

package/__tests__/PrismPlayerPreview.test.tsx

@@ -1,168 +0,0 @@
-import React from 'react';
-import { fireEvent, render, screen, waitFor } from '@testing-library/react';
-import { PrismPlayerPreview } from '../src/js/components/prism/PrismPlayerPreview';
-import { shortenUrl } from '../src/js/services/url-shortener';
-
-jest.mock('../src/js/services/url-shortener');
-
-const mockedShortenUrl = shortenUrl as jest.MockedFunction<typeof shortenUrl>;
-
-const PREVIEW_URL =
-  'https://players.brightcove.net/456/default_default/index.html?videoId=123&livePlaybackToken=abc';
-const SHORT_URL = 'https://bcove.video/4whTWpq';
-
-const DEFAULT_PROPS = {
-  accountId: '456',
-  playerId: 'default',
-  videoId: '123',
-  previewUrl: PREVIEW_URL,
-};
-
-const toaster = {
-  success: jest.fn(),
-  error: jest.fn(),
-};
-
-beforeEach(() => {
-  Object.assign(window, { brightcove: { Toaster: toaster } });
-  Object.assign(navigator, {
-    clipboard: {
-      writeText: jest.fn(() => Promise.resolve()),
-      write: jest.fn(() => Promise.reject(new Error('unsupported'))),
-    },
-  });
-});
-
-afterEach(() => {
-  jest.clearAllMocks();
-});
-
-const openCopyUrlMenu = () => {
-  fireEvent.click(screen.getByRole('button', { name: /prism.copyURL/ }));
-};
-
-test('offers both a short and a full URL option', () => {
-  render(<PrismPlayerPreview {...DEFAULT_PROPS} />);
-
-  openCopyUrlMenu();
-
-  expect(screen.getByText('prism.shortURL')).toBeInTheDocument();
-  expect(screen.getByText('prism.fullURL')).toBeInTheDocument();
-});
-
-test('copies the full URL as-is without shortening it', async () => {
-  render(<PrismPlayerPreview {...DEFAULT_PROPS} />);
-
-  openCopyUrlMenu();
-  fireEvent.click(screen.getByText('prism.fullURL'));
-
-  expect(navigator.clipboard.writeText).toHaveBeenCalledWith(PREVIEW_URL);
-  expect(mockedShortenUrl).not.toHaveBeenCalled();
-  await waitFor(() => expect(screen.getByText('prism.copied')));
-});
-
-test('copies the shortened URL when the short URL option is picked', async () => {
-  mockedShortenUrl.mockResolvedValue(SHORT_URL);
-  render(<PrismPlayerPreview {...DEFAULT_PROPS} />);
-
-  openCopyUrlMenu();
-  fireEvent.click(screen.getByText('prism.shortURL'));
-
-  await waitFor(() =>
-    expect(mockedShortenUrl).toHaveBeenCalledWith({ longUrl: PREVIEW_URL }),
-  );
-  await waitFor(() =>
-    expect(navigator.clipboard.writeText).toHaveBeenCalledWith(SHORT_URL),
-  );
-});
-
-test('reports progress on the button while the URL is being shortened', async () => {
-  let resolveShortening: (value: string) => void = (value) => {
-    throw new Error(`shortening resolved before it started: ${value}`);
-  };
-  mockedShortenUrl.mockReturnValue(
-    new Promise<string>((resolve) => {
-      resolveShortening = resolve;
-    }),
-  );
-  render(<PrismPlayerPreview {...DEFAULT_PROPS} />);
-
-  openCopyUrlMenu();
-  fireEvent.click(screen.getByText('prism.shortURL'));
-
-  await waitFor(() => expect(screen.getByText('prism.copying')));
-
-  resolveShortening(SHORT_URL);
-
-  await waitFor(() => expect(screen.getByText('prism.copied')));
-  expect(toaster.success).not.toHaveBeenCalled();
-});
-
-test('surfaces an error toast when the shortening service fails', async () => {
-  mockedShortenUrl.mockRejectedValue(new Error('invalid URL'));
-  render(<PrismPlayerPreview {...DEFAULT_PROPS} />);
-
-  openCopyUrlMenu();
-  fireEvent.click(screen.getByText('prism.shortURL'));
-
-  await waitFor(() =>
-    expect(toaster.error).toHaveBeenCalledWith({
-      message: 'toasterGetURLError',
-    }),
-  );
-  expect(navigator.clipboard.writeText).not.toHaveBeenCalled();
-  expect(toaster.success).not.toHaveBeenCalled();
-});
-
-test('ignores a shortening result that lands after the preview URL changed', async () => {
-  let resolveShortening: (value: string) => void = (value) => {
-    throw new Error(`shortening resolved before it started: ${value}`);
-  };
-  mockedShortenUrl.mockReturnValue(
-    new Promise<string>((resolve) => {
-      resolveShortening = resolve;
-    }),
-  );
-  const { rerender } = render(<PrismPlayerPreview {...DEFAULT_PROPS} />);
-
-  openCopyUrlMenu();
-  fireEvent.click(screen.getByText('prism.shortURL'));
-  await waitFor(() => expect(screen.getByText('prism.copying')));
-
-  rerender(
-    <PrismPlayerPreview
-      {...DEFAULT_PROPS}
-      previewUrl={`${PREVIEW_URL}&playerId=other`}
-    />,
-  );
-  resolveShortening(SHORT_URL);
-
-  await waitFor(() => expect(screen.getByText('prism.copyURL')));
-  expect(screen.queryByText('prism.copied')).not.toBeInTheDocument();
-});
-
-test('drops the copied state as soon as the preview URL changes', async () => {
-  const { rerender } = render(<PrismPlayerPreview {...DEFAULT_PROPS} />);
-
-  openCopyUrlMenu();
-  fireEvent.click(screen.getByText('prism.fullURL'));
-  await waitFor(() => expect(screen.getByText('prism.copied')));
-
-  rerender(
-    <PrismPlayerPreview
-      {...DEFAULT_PROPS}
-      previewUrl={`${PREVIEW_URL}&playerId=other`}
-    />,
-  );
-
-  expect(screen.getByText('prism.copyURL')).toBeInTheDocument();
-  expect(
-    screen.getByRole('button', { name: /prism.copyURL/ }),
-  ).not.toBeDisabled();
-});
-
-test('disables the copy URL button while no player is selected', () => {
-  render(<PrismPlayerPreview {...DEFAULT_PROPS} previewUrl='' />);
-
-  expect(screen.getByRole('button', { name: /prism.copyURL/ })).toBeDisabled();
-});

package/__tests__/TabsHeader.test.tsx

@@ -1,19 +0,0 @@
-import React from 'react';
-import { act, fireEvent, render } from '@testing-library/react';
-import { TabsHeader } from '../src/js/components';
-
-const DEFAULT_MODAL_COMP = {
-  currentTab: 'iframe',
-  handleTabChange: jest.fn(),
-  iframeLabel: 'iframe',
-  jsLabel: 'js',
-};
-
-test('renders TabsHeader clickeable tabs', async () => {
-  const { getByRole } = render(<TabsHeader {...DEFAULT_MODAL_COMP} />);
-  const jsBtn = getByRole('tab', { name: DEFAULT_MODAL_COMP.jsLabel });
-  act(() => {
-    fireEvent.click(jsBtn);
-  });
-  expect(DEFAULT_MODAL_COMP.handleTabChange).toBeCalled();
-});

package/__tests__/TabsSection.test.tsx

@@ -1,46 +0,0 @@
-import React from 'react';
-import { act, fireEvent, render } from '@testing-library/react';
-import { TabsSection } from 'js/components';
-
-const DEFAULT_MODAL_COMP = {
-  playerId: 'default',
-  videoId: '1234',
-  accountId: 'default',
-  isBcMapTracking: false,
-};
-
-test('renders TabsSection clickeable tabs', async () => {
-  const { getByRole, getByText } = render(
-    <TabsSection {...DEFAULT_MODAL_COMP} isCampaign isViewerIdSource={false} />,
-  );
-  const jsBtn = getByRole('tab', { name: /javascript/i });
-  act(() => {
-    fireEvent.click(jsBtn);
-  });
-  expect(getByText(/data-video-id/i)).toBeInTheDocument();
-});
-
-test('renders helper text for campaign players', async () => {
-  const { getByText } = render(
-    <TabsSection {...DEFAULT_MODAL_COMP} isCampaign isViewerIdSource={false} />,
-  );
-  expect(getByText('tabs.helperTextWarning')).toBeInTheDocument();
-});
-
-test('renders helper text for viewer id source players', async () => {
-  const { getByText } = render(
-    <TabsSection {...DEFAULT_MODAL_COMP} isCampaign={false} isViewerIdSource />,
-  );
-  expect(getByText('tabs.viewerIdTextWarning')).toBeInTheDocument();
-});
-
-test('renders iframe content if it is not campaign or viewer id', async () => {
-  const { getByText } = render(
-    <TabsSection
-      {...DEFAULT_MODAL_COMP}
-      isCampaign={false}
-      isViewerIdSource={false}
-    />,
-  );
-  expect(getByText(/allowfullscreen/i)).toBeInTheDocument();
-});

package/__tests__/TitleWithTooltip.test.tsx

@@ -1,45 +0,0 @@
-import React from 'react';
-import { render, screen } from '@testing-library/react';
-import { TitleWithTooltip } from '../src/js/components';
-import { truncateVideoTitle } from '../src/js/utils/util';
-
-const DEFAULT_VIDEO_COMP = {
-  videoId: '123',
-  videoName:
-    'The cat is a domestic species of small carnivorous mammal. It is the only domesticated species in the family Felidae and is often referred to as the domestic cat to distinguish it from the wild members of the family. ',
-  accountId: '456',
-  duration: 10,
-};
-
-const DEFAULT_PROJECT_COMP = {
-  videoId: '456',
-  interactivityProjectId: '987',
-  interactivityProjectName:
-    "The dog is a domesticated descendant of the wolf. Also called the domestic dog, it is derived from the extinct Pleistocene wolf, and the modern wolf is the dog's nearest living relative. ",
-  accountId: '456',
-  duration: 10,
-};
-
-test('renders TitleWithTooltip for Video with truncated title if its too long', () => {
-  const truncatedTitle = truncateVideoTitle(DEFAULT_VIDEO_COMP.videoName);
-  render(
-    <TitleWithTooltip
-      name={DEFAULT_VIDEO_COMP.videoName}
-      id={DEFAULT_VIDEO_COMP.videoId}
-    />,
-  );
-  expect(screen.getByText(truncatedTitle)).toBeInTheDocument();
-});
-
-test('renders TitleWithTooltip for Project with truncated title if its too long', () => {
-  const truncatedTitle = truncateVideoTitle(
-    DEFAULT_PROJECT_COMP.interactivityProjectName,
-  );
-  render(
-    <TitleWithTooltip
-      name={DEFAULT_PROJECT_COMP.interactivityProjectName}
-      id={DEFAULT_PROJECT_COMP.videoId}
-    />,
-  );
-  expect(screen.getByText(truncatedTitle)).toBeInTheDocument();
-});

package/__tests__/VideoPlayer.test.tsx

@@ -1,38 +0,0 @@
-import React from 'react';
-import { QueryClientProvider, QueryClient } from 'react-query';
-import { render, screen } from '@testing-library/react';
-import { VideoPlayer } from '../src/js/components/VideoPlayer';
-import { EmbedCodeModalTypes } from '../src/js/types/EmbedCodeModalProps';
-import { PLAYER_LIST_FOR_SELECTION, PLAYERS } from '../src/js/constants/player';
-
-jest.mock('../src/js/utils/featureSwitches');
-
-const wrappedComponent = (children: React.ReactElement) => (
-  <QueryClientProvider client={new QueryClient()}>
-    {children}
-  </QueryClientProvider>
-);
-
-const DEFAULT_MODAL_COMP = {
-  videoId: '123',
-  videoName: 'test video',
-  accountId: '456',
-  duration: 10,
-};
-
-test('renders EmbedCodeModal component with right information', () => {
-  render(
-    wrappedComponent(
-      <VideoPlayer
-        video={DEFAULT_MODAL_COMP}
-        embedCodeModalType={EmbedCodeModalTypes.VIDEO}
-        playerListForSelection={PLAYER_LIST_FOR_SELECTION}
-        players={PLAYERS}
-      />,
-    ),
-  );
-  expect(screen.getByText(DEFAULT_MODAL_COMP.videoId)).toBeInTheDocument();
-  expect(screen.getByText(DEFAULT_MODAL_COMP.videoName)).toBeInTheDocument();
-  expect(screen.getByRole('tab', { name: /javascript/i })).toBeInTheDocument();
-  expect(screen.getByRole('tab', { name: /IFrame/i })).toBeInTheDocument();
-});

package/__tests__/embedCodeGenerator.test.ts

@@ -1,111 +0,0 @@
-import {
-  formatEmbedSnippet,
-  generateEmbedCode,
-} from '../src/js/utils/embedCodeGenerator';
-import {
-  EmbedCodeAspectRatio,
-  EmbedCodeProperties,
-  EmbedCodeUnits,
-} from '../src/js/types/EmbedCodeModalProps';
-
-test('formats iframe snippet with one attribute per line', () => {
-  const input =
-    '<iframe src="https://players.brightcove.net/x/index.html?videoId=1" allowfullscreen="" allow="encrypted-media" width="960" height="540"></iframe>';
-  const expected = `<iframe
-  src="https://players.brightcove.net/x/index.html?videoId=1"
-  allowfullscreen=""
-  allow="encrypted-media"
-  width="960"
-  height="540"></iframe>`;
-  expect(formatEmbedSnippet(input)).toBe(expected);
-});
-
-test('formats javascript snippet by breaking video-js attrs and isolating <script>', () => {
-  const input =
-    '<video-js data-video-id="1" data-account="2" data-player="3" data-embed="default" controls=""></video-js><script src="https://players.brightcove.net/2/3_default/index.min.js"></script>';
-  const expected = `<video-js
-  data-video-id="1"
-  data-account="2"
-  data-player="3"
-  data-embed="default"
-  controls=""></video-js>
-<script
-  src="https://players.brightcove.net/2/3_default/index.min.js"></script>`;
-  expect(formatEmbedSnippet(input)).toBe(expected);
-});
-
-test('preserves spaces inside attribute values', () => {
-  const input =
-    '<iframe src="https://x?a=foo bar&b=baz qux" allowfullscreen=""></iframe>';
-  const expected = `<iframe
-  src="https://x?a=foo bar&b=baz qux"
-  allowfullscreen=""></iframe>`;
-  expect(formatEmbedSnippet(input)).toBe(expected);
-});
-
-describe('generateEmbedCode', () => {
-  const buildEmbedProperties = (
-    overrides: Partial<EmbedCodeProperties> = {},
-  ): EmbedCodeProperties => ({
-    width: 540,
-    height: 540,
-    units: EmbedCodeUnits.PX,
-    responsive: false,
-    aspectRatio: EmbedCodeAspectRatio.SIXTEEN_NINE,
-    ...overrides,
-  });
-
-  test('does not throw when aspectRatio is CUSTOM and produces fluid embed code', () => {
-    expect(() =>
-      generateEmbedCode({
-        accountId: 'acc-1',
-        playerId: 'player-1',
-        videoId: 'video-1',
-        embedProperties: buildEmbedProperties({
-          aspectRatio: EmbedCodeAspectRatio.CUSTOM,
-        }),
-      }),
-    ).not.toThrow();
-
-    const { embedCode, embedCodeJS } = generateEmbedCode({
-      accountId: 'acc-1',
-      playerId: 'player-1',
-      videoId: 'video-1',
-      embedProperties: buildEmbedProperties({
-        aspectRatio: EmbedCodeAspectRatio.CUSTOM,
-        responsive: true,
-      }),
-    });
-
-    expect(typeof embedCode).toBe('string');
-    expect(typeof embedCodeJS).toBe('string');
-    expect(embedCode.length).toBeGreaterThan(0);
-    expect(embedCodeJS).toContain('vjs-fluid');
-  });
-
-  test('does not mutate the caller-provided embedProperties', () => {
-    const props = buildEmbedProperties({
-      aspectRatio: EmbedCodeAspectRatio.CUSTOM,
-    });
-    generateEmbedCode({
-      accountId: 'acc-1',
-      playerId: 'player-1',
-      videoId: 'video-1',
-      embedProperties: props,
-    });
-    expect(props.aspectRatio).toBe(EmbedCodeAspectRatio.CUSTOM);
-  });
-
-  test('forwards known aspectRatio values unchanged', () => {
-    const { embedCodeJS } = generateEmbedCode({
-      accountId: 'acc-1',
-      playerId: 'player-1',
-      videoId: 'video-1',
-      embedProperties: buildEmbedProperties({
-        aspectRatio: EmbedCodeAspectRatio.SIXTEEN_NINE,
-        responsive: true,
-      }),
-    });
-    expect(embedCodeJS).toContain('vjs-16-9');
-  });
-});

package/__tests__/util.test.ts

@@ -1,89 +0,0 @@
-import {
-  getVideoPreviewLink,
-  sortAsc,
-  truncateVideoTitle,
-} from '../src/js/utils/util';
-
-test('sorting working as expected', () => {
-  const data = [
-    { value: '6B9lFzOYe', label: '#1212' },
-    { value: 'BKCEJEm0L', label: 'other 2' },
-    { value: 'WbMYTw0lh', label: '&^qwe' },
-    { value: 'ZLJg8MzKS', label: '123' },
-    { value: 'default', label: 'Brightcove' },
-  ];
-  const expected = [
-    { value: 'WbMYTw0lh', label: '&^qwe' },
-    { value: '6B9lFzOYe', label: '#1212' },
-    { value: 'ZLJg8MzKS', label: '123' },
-    { value: 'default', label: 'Brightcove' },
-    { value: 'BKCEJEm0L', label: 'other 2' },
-  ];
-  expect(sortAsc(data)).toEqual(expected);
-});
-
-test('video preview url created correctly', () => {
-  const video = {
-    videoId: 'test',
-    videoName: 'test',
-    accountId: 'test',
-    posterUrl: 'test',
-    duration: 10,
-  };
-  const expected =
-    'https://players.qa.brightcove.net/test/default_default/index.html?videoId=test';
-  expect(
-    getVideoPreviewLink({
-      accountId: video.accountId,
-      videoId: video.videoId,
-      playerId: 'default',
-    }),
-  ).toBe(expected);
-});
-
-test('interactivity project preview url created correctly', () => {
-  const video = {
-    interactivityProjectId: 'test',
-    accountId: 'test',
-    posterUrl: 'test',
-    duration: 10,
-  };
-  const expected =
-    'https://players.qa.brightcove.net/test/default_default/index.html?interactivityProjectId=test';
-  expect(
-    getVideoPreviewLink({
-      accountId: video.accountId,
-      interactivityProjectId: video.interactivityProjectId,
-      playerId: 'default',
-    }),
-  ).toBe(expected);
-});
-
-test('long video titles are truncated properly', () => {
-  const video = {
-    videoId: 'test',
-    videoName:
-      'The cat is a domestic species of small carnivorous mammal. It is the only domesticated species in the family Felidae and is often referred to as the domestic cat to distinguish it from the wild members of the family. ',
-    accountId: 'test',
-    posterUrl: 'test',
-    duration: 10,
-  };
-  const expected =
-    'The cat is a domestic species of small carnivorous mammal. I...';
-  const truncatedTitle = truncateVideoTitle(video.videoName);
-
-  expect(expected).toEqual(truncatedTitle);
-});
-
-test('short video titles are truncated properly', () => {
-  const video = {
-    videoId: 'test',
-    videoName: 'This is a normal video title',
-    accountId: 'test',
-    posterUrl: 'test',
-    duration: 10,
-  };
-  const truncatedTitle = truncateVideoTitle(video.videoName);
-
-  expect(video.videoName).toEqual(truncatedTitle);
-});

package/babel.config.json

@@ -1,17 +0,0 @@
-{
-  "presets": [
-    [
-      "@babel/preset-env",
-      {
-        "useBuiltIns": "entry",
-        "corejs": 3
-      }
-    ],
-    "@babel/preset-typescript",
-    "@babel/preset-react"
-  ],
-  "plugins": [
-    "@babel/proposal-class-properties",
-    "@babel/plugin-transform-runtime"
-  ]
-}