experiment: trying other web ui kits

packages/spectrum/src/App.tsx

@@ -0,0 +1,24 @@
+import { Router } from '@reach/router';
+import { BaseProvider, createDarkTheme } from 'baseui';
+import { Client as Styletron } from 'styletron-engine-atomic';
+import { Provider as StyletronProvider } from 'styletron-react';
+import { Picker } from './pages/Picker';
+
+const engine = new Styletron();
+const theme = createDarkTheme({ primaryFontFamily: 'source-han-sans-japanese' });
+
+function App() {
+  return (
+    <>
+      <StyletronProvider value={engine}>
+        <BaseProvider theme={theme}>
+          <Router>
+            <Picker path="/s/:serverID" />
+          </Router>
+        </BaseProvider>
+      </StyletronProvider>
+    </>
+  );
+}
+
+export default App;

packages/spectrum/src/index.css

@@ -0,0 +1,4 @@
+body {
+  background-color: #141414;
+  font-family: source-han-sans-japanese, sans-serif;
+}

packages/spectrum/src/index.tsx

@@ -0,0 +1,17 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import App from './App';
+import './index.css';
+import reportWebVitals from './reportWebVitals';
+
+ReactDOM.render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>,
+  document.getElementById('root')
+);
+
+// If you want to start measuring performance in your app, pass a function
+// to log results (for example: reportWebVitals(console.log))
+// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
+reportWebVitals();

packages/spectrum/src/pages/Picker.tsx

@@ -0,0 +1,10 @@
+import { RouteComponentProps, useParams } from '@reach/router';
+import { Display1 } from 'baseui/typography';
+
+type PickerProps = RouteComponentProps;
+
+export const Picker = (props: PickerProps) => {
+  const { serverID } = useParams();
+
+  return <Display1>hello {serverID}</Display1>;
+};

packages/spectrum/src/react-app-env.d.ts

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

packages/spectrum/src/reportWebVitals.ts

@@ -0,0 +1,15 @@
+import { ReportHandler } from 'web-vitals';
+
+const reportWebVitals = (onPerfEntry?: ReportHandler) => {
+  if (onPerfEntry && onPerfEntry instanceof Function) {
+    import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {
+      getCLS(onPerfEntry);
+      getFID(onPerfEntry);
+      getFCP(onPerfEntry);
+      getLCP(onPerfEntry);
+      getTTFB(onPerfEntry);
+    });
+  }
+};
+
+export default reportWebVitals;

packages/spectrum/src/setupTests.ts

@@ -0,0 +1,5 @@
+// jest-dom adds custom jest matchers for asserting on DOM nodes.
+// allows you to do things like:
+// expect(element).toHaveTextContent(/react/i)
+// learn more: https://github.com/testing-library/jest-dom
+import '@testing-library/jest-dom';