Feature/attempt to transpile

__mocks__/svg.js

@@ -0,0 +1,4 @@
+// eslint-disable-next-line import/no-anonymous-default-export
+const svgrURL = 'SvgrURL';
+const ReactComponent = 'div';
+module.exports = { svgrURL, ReactComponent };

babel.config.js

@@ -0,0 +1 @@
+module.exports = { presets: ["@babel/preset-env", '@babel/preset-react'] };

jest.config.ts

@@ -0,0 +1,20 @@
+import type {
+  Config
+} from 'jest';
+
+const config: Config = {
+  verbose: true,
+  moduleNameMapper: {
+    '\\.svg': '<rootDir>/__mocks__/svg.js',
+    '\\.(css|sass)$': '<rootDir>/__mocks__/svg.js'
+  },
+  transform: {
+    '^.+\\.(ts|tsx)?$': 'ts-jest',
+    '^.+\\.(js|jsx)$': 'babel-jest'
+  },
+  transformIgnorePatterns: [
+    '/node_modules/(?!(@mui/x-charts)/)'
+  ]
+};
+
+export default config;

package.json

@@ -3,23 +3,35 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "@emotion/react": "^11.11.3",
+    "@emotion/styled": "^11.11.0",
+    "@mui/material": "^5.15.2",
+    "@mui/styles": "^5.15.2",
+    "@mui/x-charts": "^6.18.4",
     "@testing-library/jest-dom": "^5.14.1",
     "@testing-library/react": "^13.0.0",
     "@testing-library/user-event": "^13.2.1",
-    "@types/jest": "^27.0.1",
+    "@types/jest": "^29.5.11",
     "@types/node": "^16.7.13",
     "@types/react": "^18.0.0",
     "@types/react-dom": "^18.0.0",
+    "jest": "^29.5.11",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-scripts": "5.0.1",
+    "ts-node": "^10.9.2",
     "typescript": "^4.4.2",
     "web-vitals": "^2.1.0"
   },
+  "devDependencies": {
+    "@babel/plugin-proposal-private-property-in-object": "7.21.11",
+    "@babel/preset-react": "^7.23.3",
+    "ts-jest": "^29.1.1"
+  },
   "scripts": {
     "start": "react-scripts start",
     "build": "react-scripts build",
-    "test": "react-scripts test",
+    "test": "jest",
     "eject": "react-scripts eject"
   },
   "eslintConfig": {
@@ -39,5 +51,6 @@
       "last 1 firefox version",
       "last 1 safari version"
     ]
-  }
-}
+  },
+  "license": "UNLICENSED"
+}

src/App.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import logo from './logo.svg';
 import './App.css';
+import TinyBarChart from './TinyBarChart';
 
 function App() {
   return (
@@ -18,6 +19,7 @@ function App() {
         >
           Learn React
         </a>
+        <TinyBarChart />
       </header>
     </div>
   );

src/TinyBarChart.tsx

@@ -0,0 +1,25 @@
+import { ChartContainer, BarPlot } from '@mui/x-charts';
+
+const uData = [4000, 3000, 2000, 2780, 1890, 2390, 3490];
+const xLabels = [
+    'Page A',
+    'Page B',
+    'Page C',
+    'Page D',
+    'Page E',
+    'Page F',
+    'Page G',
+];
+
+export default function TinyBarChart() {
+    return (
+        <ChartContainer
+            width={500}
+            height={300}
+            series={[{ data: uData, label: 'uv', type: 'bar' }]}
+            xAxis={[{ scaleType: 'band', data: xLabels }]}
+        >
+            <BarPlot />
+        </ChartContainer>
+    );
+}