Convert to TypeScript and use seatsio-types (#135)

* Add TypeScript

* Converted to TypeScript

* Move to typescript

* Fix tests after switching to TypeScript

* Simplify jest config

* Fix Embeddable typings

* Remove test file

* Remove global directive

* Update types package name

* Use @seatsio/seatsio-types

* Add local dependency on @seatsio/seatsio-types (to be replaced)

* Use published version of @seatsio/seatsio-types

* Make region a required prop, make chartJsUrl a module const

* Delete chart manager

* Remove deleted export

* Replace multiple uses of any

* Remove tests for deleted implementation

* Fix tests due to defaultProps not being correct

* Use published version of @seatsio/seatsio-types

* Add type predicates

* Use @seatsio/seatsio-types 0.3.0

* Add type predicates

* Update seatsio-types to 3.0.1

* seatsio-types upgraded to 0.3.2

* Convert playground app to TypeScript

* Add dark mode

* Use specific package versions

* Fix type issue

* Updated yarn lock

* Add types for react

* Build with TSC

* Convert tests to TypeScript and use TS-Jest

* Updated license copyright

* Use single bundle file output from TSC

* Use webpack to create commonjs bundle

* TSC build with ES6 modules

* Add return type on render

* Remove webpack remnants

LICENSE

@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2019 seats.io
+Copyright (c) 2019 - 2023 seats.io
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

jest.config.js

@@ -0,0 +1,5 @@
+/** @type {import('ts-jest').JestConfigWithTsJest} */
+module.exports = {
+  preset: 'ts-jest',
+  testEnvironment: 'jsdom',
+};

package.json

@@ -7,7 +7,8 @@
     "url": "https://github.com/seatsio/seatsio-react"
   },
   "scripts": {
-    "build": "webpack",
+    "prebuild": "rimraf ./build",
+    "build": "tsc",
     "test": "jest"
   },
   "author": {
@@ -21,25 +22,18 @@
     "react": ">=18.0.0"
   },
   "devDependencies": {
-    "webpack": "5.88.2",
-    "webpack-cli": "5.1.4",
-    "@babel/cli": "7.22.10",
-    "@babel/core": "7.23.0",
-    "babel-loader": "9.1.3",
-    "@babel/preset-react": "7.22.15",
-    "@babel/preset-env": "7.22.20",
-    "react": "18.2.0",
-    "react-dom": "18.2.0",
-    "@testing-library/react": "14.0.0",
+    "@seatsio/seatsio-types": "0.3.2",
     "@testing-library/jest-dom": "6.1.3",
+    "@testing-library/react": "14.0.0",
+    "@types/jest": "29.5.5",
+    "@types/react": "18.2.30",
+    "@types/react-dom": "18.2.14",
     "jest": "29.5.0",
-    "jest-environment-jsdom": "29.7.0"
-  },
-  "jest": {
-    "verbose": true,
-    "testEnvironment": "jsdom",
-    "testMatch": [
-      "<rootDir>/src/test/*.test.js"
-    ]
+    "jest-environment-jsdom": "29.7.0",
+    "react": "18.2.0",
+    "react-dom": "18.2.0",
+    "rimraf": "5.0.1",
+    "ts-jest": "29.1.1",
+    "typescript": "5.2.2"
   }
 }

playground/package.json

@@ -4,17 +4,34 @@
   "private": true,
   "dependencies": {
     "@seatsio/seatsio-react": "file:./..",
+    "@types/node": "16.18.59",
+    "@types/react": "18.2.30",
+    "@types/react-dom": "18.2.14",
     "react": "18.2.0",
     "react-dom": "18.2.0",
-    "react-scripts": "5.0.1"
+    "react-scripts": "5.0.1",
+    "typescript": "4.9.5"
   },
   "scripts": {
-    "start": "react-scripts start"
+    "start": "react-scripts start",
+    "build": "react-scripts build"
   },
   "eslintConfig": {
-    "extends": "react-app"
+    "extends": [
+      "react-app",
+      "react-app/jest"
+    ]
   },
-  "browserslist": [
-    "defaults"
-  ]
+  "browserslist": {
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
+  }
 }

playground/public/manifest.json

@@ -6,16 +6,6 @@
       "src": "favicon.ico",
       "sizes": "64x64 32x32 24x24 16x16",
       "type": "image/x-icon"
-    },
-    {
-      "src": "logo192.png",
-      "type": "image/png",
-      "sizes": "192x192"
-    },
-    {
-      "src": "logo512.png",
-      "type": "image/png",
-      "sizes": "512x512"
     }
   ],
   "start_url": ".",

playground/src/App.css

@@ -2,6 +2,28 @@
     text-align: center;
 }
 
+.container {
+  --background-color: #f4f4f4;
+  --text-color: #121212;
+
+  height: 100vh;
+  background: var(--background-color);
+}
+
+.container.dark {
+  --background-color: #121212;
+  --text-color: rgb(244, 244, 244);
+}
+
+h1 {
+  color: var(--text-color);
+}
+
+select {
+  background: var(--background-color);
+  color: var(--text-color);
+}
+
 #chart {
     height: 600px;
 }

playground/src/App.tsx

@@ -0,0 +1,37 @@
+import { SeatsioSeatingChart } from '@seatsio/seatsio-react';
+import React, { useState } from 'react';
+import './App.css';
+
+type ColorScheme = 'light' | 'dark'
+
+export const App = () => {
+  const [unusedState, setUnusedState] = useState(0)
+  const [colorScheme, setColorScheme] = useState<ColorScheme>('light')
+
+  return (
+    <div className={['container', colorScheme].join(' ')}>
+        <div className="App">
+            <select onChange={e => setColorScheme(e.target.value as ColorScheme)} value={colorScheme}>
+                <option value="light">Light</option>
+                <option value="dark">Dark</option>
+            </select>
+            <select onChange={e => setUnusedState(parseInt(e.target.value))} value={unusedState}>
+                <option>0</option>
+                <option>1</option>
+            </select>
+            <h1>Seats.io React playground</h1>
+            <div id="chart">
+                <SeatsioSeatingChart
+                    workspaceKey="publicDemoKey"
+                    event="smallTheatreEvent1"
+                    colorScheme={colorScheme}
+                    region="eu"
+                    chartJsUrl="https://cdn-staging-{region}.seatsio.net/chart.js"
+                />
+            </div>
+        </div>
+    </div>
+  )
+}
+
+export default App

playground/src/index.css

@@ -1,13 +1,13 @@
 body {
   margin: 0;
-  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
-    "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
+    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
     sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 }
 
 code {
-  font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
+  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
     monospace;
 }

playground/src/index.tsx

@@ -0,0 +1,13 @@
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import './index.css';
+import App from './App';
+
+const root = ReactDOM.createRoot(
+  document.getElementById('root') as HTMLElement
+);
+root.render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>
+);

playground/src/react-app-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="react-scripts" />

playground/tsconfig.json

@@ -0,0 +1,26 @@
+{
+  "compilerOptions": {
+    "target": "es5",
+    "lib": [
+      "dom",
+      "dom.iterable",
+      "esnext"
+    ],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "esModuleInterop": true,
+    "allowSyntheticDefaultImports": true,
+    "strict": true,
+    "forceConsistentCasingInFileNames": true,
+    "noFallthroughCasesInSwitch": true,
+    "module": "esnext",
+    "moduleResolution": "node",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "react-jsx"
+  },
+  "include": [
+    "src"
+  ]
+}