status-im · felicio · Oct 10, 2022 · Jun 30, 2022 · Jun 30, 2022 · Jun 30, 2022
diff --git a/.eslintrc b/.eslintrc
@@ -34,6 +34,15 @@
     "plugin:react-hooks/recommended",
     "prettier"
   ],
+  "overrides": [
+    {
+      "files": ["examples/**/*.tsx"],
+      "rules": {
+        "react/jsx-uses-react": "off",
+        "react/react-in-jsx-scope": "off"
+      }
+    }
+  ],
   "rules": {
     "react/prop-types": 0,
     // "@typescript-eslint/consistent-type-definitions": ["error", "interface"],

diff --git a/.prettierignore b/.prettierignore
@@ -4,3 +4,4 @@
 .github
 **/protos
 **/coverage
+.next
diff --git a/examples/with-next/.env.example b/examples/with-next/.env.example
@@ -0,0 +1,2 @@
+NEXT_PUBLIC_PUBLIC_KEY=""
+NEXT_PUBLIC_ENVIRONMENT=""
diff --git a/examples/with-next/next-env.d.ts b/examples/with-next/next-env.d.ts
@@ -0,0 +1,5 @@
+/// <reference types="next" />
+/// <reference types="next/image-types/global" />
+
+// NOTE: This file should not be edited
+// see https://nextjs.org/docs/basic-features/typescript for more information.
diff --git a/examples/with-next/next.config.js b/examples/with-next/next.config.js
@@ -0,0 +1,9 @@
+/**
+ * @type {import('next/dist/server/config-shared').NextConfig}
+ */
+export default {
+  reactStrictMode: true,
+  experimental: {
+    esmExternals: true,
+  },
+}
diff --git a/examples/with-next/package.json b/examples/with-next/package.json
@@ -0,0 +1,26 @@
+{
+  "name": "with-next",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start",
+    "lint": "next lint"
+  },
+  "dependencies": {
+    "@status-im/react": "^0.1.1",
+    "next": "12.3.1",
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0"
+  },
+  "devDependencies": {
+    "@types/react": "^17.0.0",
+    "@types/react-dom": "^17.0.0",
+    "typescript": "^4.8.4"
+  },
+  "engines": {
+    "node": ">=16"
+  }
+}
diff --git a/examples/with-next/pages/_app.tsx b/examples/with-next/pages/_app.tsx
@@ -0,0 +1,9 @@
+import '../styles.css'
+
+import type { AppProps } from 'next/app'
+
+function App({ Component, pageProps }: AppProps) {
+  return <Component {...pageProps} />
+}
+
+export default App
diff --git a/examples/with-next/pages/_document.tsx b/examples/with-next/pages/_document.tsx
@@ -0,0 +1,23 @@
+import { Head, Html, Main, NextScript } from 'next/document'
+
+export default function Document() {
+  return (
+    <Html>
+      <Head>
+        <link rel="icon" type="image/png" href="/favicon.png" />
+        <link
+          href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap"
+          rel="stylesheet"
+        />
+        <link
+          rel="stylesheet"
+          href="https://unpkg.com/tailwindcss@3.0.0/src/css/preflight.css"
+        />
+      </Head>
+      <body>
+        <Main />
+        <NextScript />
+      </body>
+    </Html>
+  )
+}
diff --git a/examples/with-next/pages/index.tsx b/examples/with-next/pages/index.tsx
@@ -0,0 +1,33 @@
+import { MemoryRouter } from '@status-im/react'
+import dynamic from 'next/dynamic'
+
+const publicKey = process.env.NEXT_PUBLIC_PUBLIC_KEY
+
+if (!publicKey) {
+  throw new Error(
+    'Add NEXT_PUBLIC_PUBLIC_KEY to your environment variables (see .env.example)'
+  )
+}
+
+const environment = process.env.NEXT_PUBLIC_ENVIRONMENT as 'production' | 'test'
+
+/**
+ * For some reason the regular import fails with a server error:
+ * Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object.
+ * The error is caused by the react-content-loader package.
+ * The workaround *for now* is to use the dynamic import and render the component on the client.
+ */
+const Community = dynamic(
+  import('@status-im/react').then(({ Community }) => Community),
+  { ssr: false }
+)
+
+export default function Index() {
+  return (
+    <Community
+      publicKey={publicKey}
+      environment={environment}
+      router={MemoryRouter}
+    />
+  )
+}
diff --git a/examples/community/public/favicon.png → examples/with-next/public/favicon.png b/examples/community/public/favicon.png → examples/with-next/public/favicon.png
diff --git a/examples/with-next/styles.css b/examples/with-next/styles.css
@@ -0,0 +1,5 @@
+html,
+body,
+#__next {
+  height: 100%;
+}
diff --git a/examples/with-next/tsconfig.json b/examples/with-next/tsconfig.json
@@ -0,0 +1,20 @@
+{
+  "compilerOptions": {
+    "target": "ESNext",
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": false,
+    "forceConsistentCasingInFileNames": true,
+    "noEmit": true,
+    "incremental": true,
+    "esModuleInterop": true,
+    "module": "esnext",
+    "moduleResolution": "node",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "preserve"
+  },
+  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
+  "exclude": ["node_modules"]
+}
diff --git a/examples/community/.env.example → examples/with-vite/.env.example b/examples/community/.env.example → examples/with-vite/.env.example
diff --git a/examples/community/index.html → examples/with-vite/index.html b/examples/community/index.html → examples/with-vite/index.html
diff --git a/examples/community/package.json → examples/with-vite/package.json b/examples/community/package.json → examples/with-vite/package.json
@@ -1,26 +1,26 @@
 {
-  "private": true,
-  "name": "community",
+  "name": "with-vite",
   "type": "module",
+  "private": true,
   "version": "0.0.0",
-  "browserslist": "> 0.5%, last 2 versions, not dead, not ios_saf < 13",
   "scripts": {
     "dev": "vite",
-    "prebuild": "rm -rf dist",
-    "build": "vite build",
+    "build": "tsc && vite build",
     "start": "vite preview"
   },
   "dependencies": {
-    "@status-im/react": "0.1.1",
+    "@status-im/react": "^0.1.1",
     "react": "^17.0.0",
     "react-dom": "^17.0.0"
   },
   "devDependencies": {
     "@types/react": "^17.0.0",
     "@types/react-dom": "^17.0.0",
     "@vitejs/plugin-react": "^2.1.0",
-    "process": "^0.11.10",
-    "typescript": "^4.0.0",
-    "vite": "^3.1.0"
+    "typescript": "^4.8.4",
+    "vite": "^3.1.7"
+  },
+  "engines": {
+    "node": ">=16"
   }
 }
diff --git a/examples/with-vite/public/favicon.png b/examples/with-vite/public/favicon.png
diff --git a/examples/community/src/app.tsx → examples/with-vite/src/app.tsx b/examples/community/src/app.tsx → examples/with-vite/src/app.tsx
@@ -1,5 +1,3 @@
-import React from 'react'
-
 import { Community } from '@status-im/react'
 
 const publicKey = process.env.PUBLIC_KEY

diff --git a/examples/community/src/index.tsx → examples/with-vite/src/index.tsx b/examples/community/src/index.tsx → examples/with-vite/src/index.tsx
@@ -1,4 +1,4 @@
-import React, { StrictMode } from 'react'
+import { StrictMode } from 'react'
 import { render } from 'react-dom'
 
 import { App } from './app'

diff --git a/examples/with-vite/src/vite-env.d.ts b/examples/with-vite/src/vite-env.d.ts
@@ -0,0 +1 @@
+/// <reference types="vite/client" />
diff --git a/examples/community/styles.css → examples/with-vite/styles.css b/examples/community/styles.css → examples/with-vite/styles.css
diff --git a/examples/with-vite/tsconfig.json b/examples/with-vite/tsconfig.json
@@ -0,0 +1,19 @@
+{
+  "compilerOptions": {
+    "target": "ESNext",
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": false,
+    "forceConsistentCasingInFileNames": true,
+    "noEmit": true,
+    "incremental": true,
+    "esModuleInterop": true,
+    "module": "esnext",
+    "moduleResolution": "node",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "react-jsx"
+  },
+  "include": ["src"]
+}
diff --git a/examples/community/vite.config.ts → examples/with-vite/vite.config.ts b/examples/community/vite.config.ts → examples/with-vite/vite.config.ts
@@ -12,7 +12,7 @@ export default defineConfig(({ mode }) => {
     build: {
       target: 'es2020',
     },
-    plugins: [react()],
+    plugins: [react({})],
     define: {
       /**
        * Loads `.env` files and sets `process.env` varibales.
-Original file line number
+Diff line change
@@ Expand Up / @@ -4,3 +4,4 @@ @@
     .github
     **/protos
     **/coverage
+    .next
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,2 @@
		NEXT_PUBLIC_PUBLIC_KEY=""
		NEXT_PUBLIC_ENVIRONMENT=""