feat: move examples to vite since create-react-app is deprecated

accounts-js · Nov 23, 2023 · 7c05abf · 7c05abf
1 parent 5039b8d
commit 7c05abf
Show file tree

Hide file tree

Showing 64 changed files with 1,016 additions and 4,773 deletions.
diff --git a/examples/react-graphql-typescript/.eslintrc.cjs b/examples/react-graphql-typescript/.eslintrc.cjs
@@ -0,0 +1,18 @@
+module.exports = {
+  root: true,
+  env: { browser: true, es2020: true },
+  extends: [
+    'eslint:recommended',
+    'plugin:@typescript-eslint/recommended',
+    'plugin:react-hooks/recommended',
+  ],
+  ignorePatterns: ['dist', '.eslintrc.cjs'],
+  parser: '@typescript-eslint/parser',
+  plugins: ['react-refresh'],
+  rules: {
+    'react-refresh/only-export-components': [
+      'warn',
+      { allowConstantExport: true },
+    ],
+  },
+}
diff --git a/examples/react-graphql-typescript/.gitignore b/examples/react-graphql-typescript/.gitignore
@@ -1,23 +1,24 @@
-# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
-
-# dependencies
-/node_modules
-/.pnp
-.pnp.js
-
-# testing
-/coverage
-
-# production
-/build
-
-# misc
-.DS_Store
-.env.local
-.env.development.local
-.env.test.local
-.env.production.local
-
+# Logs
+logs
+*.log
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
diff --git a/examples/react-graphql-typescript/index.html b/examples/react-graphql-typescript/index.html
@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Vite + React + TS</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>
diff --git a/examples/react-graphql-typescript/package.json b/examples/react-graphql-typescript/package.json
@@ -1,31 +1,16 @@
 {
   "name": "@examples/react-graphql-typescript",
-  "version": "0.32.0",
   "private": true,
+  "version": "0.32.0",
+  "type": "module",
   "scripts": {
-    "start": "SKIP_PREFLIGHT_CHECK=true react-scripts start",
-    "build": "SKIP_PREFLIGHT_CHECK=true react-scripts build",
+    "dev": "vite --force",
+    "build": "tsc && vite build",
+    "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
+    "preview": "vite preview",
     "test": "yarn run build",
     "testonly": "yarn run build"
   },
-  "eslintConfig": {
-    "extends": [
-      "react-app",
-      "react-app/jest"
-    ]
-  },
-  "browserslist": {
-    "production": [
-      ">0.2%",
-      "not dead",
-      "not op_mini all"
-    ],
-    "development": [
-      "last 1 chrome version",
-      "last 1 firefox version",
-      "last 1 safari version"
-    ]
-  },
   "dependencies": {
     "@accounts/apollo-link": "^0.32.1",
     "@accounts/client": "^0.33.1",
@@ -39,21 +24,26 @@
     "graphql": "16.8.1",
     "graphql-tag": "2.12.6",
     "qrcode.react": "3.1.0",
-    "react": "18.2.0",
-    "react-dom": "18.2.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
     "react-router": "5.3.4",
-    "react-router-dom": "5.3.4",
-    "tslib": "2.6.2"
+    "react-router-dom": "5.3.4"
   },
   "devDependencies": {
+    "@levminer/speakeasy": "1.4.2",
     "@types/qrcode.react": "1.0.5",
-    "@types/react": "18.2.38",
-    "@types/react-dom": "18.2.17",
+    "@types/react": "^18.2.38",
+    "@types/react-dom": "^18.2.17",
     "@types/react-router": "5.1.20",
     "@types/react-router-dom": "5.3.3",
-    "eslint": "8.54.0",
-    "eslint-config-react-app": "7.0.1",
-    "react-scripts": "5.0.1",
+    "@typescript-eslint/eslint-plugin": "^6.12.0",
+    "@typescript-eslint/parser": "^6.12.0",
+    "@vitejs/plugin-react": "^4.2.0",
+    "eslint": "^8.54.0",
+    "eslint-plugin-react-hooks": "^4.6.0",
+    "eslint-plugin-react-refresh": "^0.4.4",
+    "typescript": "^5.3.2",
+    "vite": "^5.0.2",
     "web-vitals": "3.5.0"
   }
 }
diff --git a/examples/react-graphql-typescript/public/favicon.ico b/examples/react-graphql-typescript/public/favicon.ico
diff --git a/examples/react-graphql-typescript/public/index.html b/examples/react-graphql-typescript/public/index.html
diff --git a/examples/react-graphql-typescript/public/logo192.png b/examples/react-graphql-typescript/public/logo192.png
diff --git a/examples/react-graphql-typescript/public/logo512.png b/examples/react-graphql-typescript/public/logo512.png
diff --git a/examples/react-graphql-typescript/public/manifest.json b/examples/react-graphql-typescript/public/manifest.json
diff --git a/examples/react-graphql-typescript/public/robots.txt b/examples/react-graphql-typescript/public/robots.txt
diff --git a/examples/react-graphql-typescript/public/vite.svg b/examples/react-graphql-typescript/public/vite.svg
diff --git a/examples/react-graphql-typescript/src/App.tsx b/examples/react-graphql-typescript/src/App.tsx
@@ -0,0 +1,13 @@
+import { ApolloProvider } from '@apollo/client';
+import { apolloClient } from './utils/accounts';
+import Router from './Router';
+
+function App() {
+  return (
+    <ApolloProvider client={apolloClient}>
+      <Router />
+    </ApolloProvider>
+  );
+}
+
+export default App;
diff --git a/examples/react-graphql-typescript/src/Home.tsx b/examples/react-graphql-typescript/src/Home.tsx
@@ -1,4 +1,3 @@
-import React from 'react';
 import { RouteComponentProps, Link, Redirect } from 'react-router-dom';
 import { Button, Typography } from '@mui/material';
 import gql from 'graphql-tag';
@@ -21,7 +20,7 @@ const GET_USER_QUERY = gql`
   }
 `;
 
-const Home = ({ history }: RouteComponentProps<{}>) => {
+const Home = ({ history }: RouteComponentProps) => {
   const { loading, error, data } = useQuery(GET_USER_QUERY);
 
   const onResendEmail = async () => {

diff --git a/examples/react-graphql-typescript/src/Login.tsx b/examples/react-graphql-typescript/src/Login.tsx
@@ -13,14 +13,16 @@ const useStyles = makeStyles({
   },
 });
 
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
 const SignUpLink = React.forwardRef<Link, any>((props, ref) => (
   <Link to="/signup" {...props} ref={ref} />
 ));
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
 const ResetPasswordLink = React.forwardRef<Link, any>((props, ref) => (
   <Link to="/reset-password" {...props} ref={ref} />
 ));
 
-const Login = ({ history }: RouteComponentProps<{}>) => {
+const Login = ({ history }: RouteComponentProps) => {
   const classes = useStyles();
   const [email, setEmail] = useState('');
   const [password, setPassword] = useState('');

diff --git a/examples/react-graphql-typescript/src/ResetPassword.tsx b/examples/react-graphql-typescript/src/ResetPassword.tsx
@@ -13,7 +13,7 @@ const useStyles = makeStyles({
   },
 });
 
-const LogInLink = (props: any) => <Link to="/login" {...props} />;
+const LogInLink = (props: object) => <Link to="/login" {...props} />;
 
 interface RouteMatchProps {
   token: string;

diff --git a/examples/react-graphql-typescript/src/Router.tsx b/examples/react-graphql-typescript/src/Router.tsx
@@ -1,4 +1,3 @@
-import React from 'react';
 import { BrowserRouter, Route } from 'react-router-dom';
 import { CssBaseline, Grid, Paper } from '@mui/material';
 import { makeStyles } from '@mui/styles';

diff --git a/examples/react-graphql-typescript/src/Signup.tsx b/examples/react-graphql-typescript/src/Signup.tsx
@@ -13,6 +13,7 @@ const useStyles = makeStyles({
   },
 });
 
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
 const LogInLink = React.forwardRef<Link, any>((props, ref) => (
   <Link to="/login" {...props} ref={ref} />
 ));
@@ -24,7 +25,7 @@ interface UserForm {
   password: string;
 }
 
-const Signup = ({ history }: RouteComponentProps<{}>) => {
+const Signup = ({ history }: RouteComponentProps) => {
   const classes = useStyles();
   const [error, setError] = useState<string | null>(null);
   const [user, setUser] = useState<UserForm>({

diff --git a/examples/react-graphql-typescript/src/TwoFactor.tsx b/examples/react-graphql-typescript/src/TwoFactor.tsx
@@ -1,16 +1,20 @@
-import React, { useState, useEffect } from 'react';
+import { useState, useEffect } from 'react';
 import { Button, Typography, FormControl, InputLabel, Input } from '@mui/material';
 import QRCode from 'qrcode.react';
+import { type GeneratedSecret } from '@levminer/speakeasy';
+
+type WithRequired<T, K extends keyof T> = T & { [P in K]-?: T[P] };
 
 import { accountsGraphQL } from './utils/accounts';
 
 const TwoFactor = () => {
-  const [secret, setSecret] = useState<any>();
+  const [secret, setSecret] = useState<WithRequired<GeneratedSecret, 'otpauth_url'>>();
   const [oneTimeCode, setOneTimeCode] = useState('');
 
   const fetchTwoFactorSecret = async () => {
     const data = await accountsGraphQL.getTwoFactorSecret();
     if (data) {
+      // eslint-disable-next-line @typescript-eslint/no-unused-vars
       const { __typename, ...secretFields } = data;
       setSecret(secretFields);
     }

diff --git a/examples/react-graphql-typescript/src/VerifyEmail.tsx b/examples/react-graphql-typescript/src/VerifyEmail.tsx
@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from 'react';
+import { useState, useEffect } from 'react';
 import { RouteComponentProps, Link } from 'react-router-dom';
 import { Button, Typography } from '@mui/material';
 
@@ -9,7 +9,7 @@ interface RouteMatchProps {
   token: string;
 }
 
-const HomeLink = (props: any) => <Link to="/" {...props} />;
+const HomeLink = (props: object) => <Link to="/" {...props} />;
 
 const VerifyEmail = ({ match }: RouteComponentProps<RouteMatchProps>) => {
   const [success, setSuccess] = useState(false);

diff --git a/examples/react-graphql-typescript/src/components/FormError.tsx b/examples/react-graphql-typescript/src/components/FormError.tsx
@@ -1,4 +1,3 @@
-import * as React from 'react';
 import { Typography } from '@mui/material';
 import { makeStyles } from '@mui/styles';
 

diff --git a/...es/react-graphql-typescript/src/index.tsx → ...les/react-graphql-typescript/src/main.tsx b/...es/react-graphql-typescript/src/index.tsx → ...les/react-graphql-typescript/src/main.tsx
@@ -1,15 +1,12 @@
 import React from 'react';
-import ReactDOM from 'react-dom';
-import { ApolloProvider } from '@apollo/client';
-import { apolloClient } from './utils/accounts';
-import Router from './Router';
+import ReactDOM from 'react-dom/client';
+import App from './App.tsx';
 import reportWebVitals from './reportWebVitals';
 
-ReactDOM.render(
-  <ApolloProvider client={apolloClient}>
-    <Router />
-  </ApolloProvider>,
-  document.getElementById('root') as HTMLElement
+ReactDOM.createRoot(document.getElementById('root')!).render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>
 );
 
 // If you want to start measuring performance in your app, pass a function

diff --git a/examples/react-graphql-typescript/src/vite-env.d.ts b/examples/react-graphql-typescript/src/vite-env.d.ts
@@ -0,0 +1 @@
+/// <reference types="vite/client" />