feat: add next-example

examples/next-example/app/layout.tsx

@@ -1,6 +1,6 @@
-import './globals.css';
 import type { Metadata } from 'next';
 import { Inter } from 'next/font/google';
+import './globals.css';
 
 const inter = Inter({ subsets: ['latin'] });
 

examples/next-example/app/page.tsx

@@ -1,10 +1,54 @@
+'use client';
+
+import { useEffect, useState } from 'react';
+import { fetchGoodsList, GoodsRecord } from './service';
 
 export default function Home() {
+  const [mounted, setMounted] = useState(false);
+
+  useEffect(() => {
+    setMounted(true);
+  }, []);
+  const onAddToCart = (item: GoodsRecord) => {
+    console.log('onAddToCart', JSON.stringify(item));
+    // await reportTrack().select('reportAdapter').track('addCart', {
+    //   price: 25.99,
+    //   goodsId: '23432252',
+    //   goodsName: 'Long Chair',
+    //   count: 1,
+    // });
+  };
+
   return (
-    <main className="flex min-h-screen flex-col items-center justify-between p-24">
-      <div>
-Hello @hyperse/track
-        </div>
+    <main className="flex min-h-screen flex-col items-center justify-between gap-4">
+      {mounted &&
+        fetchGoodsList().map((item, index: number) => {
+          return (
+            <div
+              key={index}
+              className="flex h-80 w-4/5 max-w-md flex-col gap-1 rounded-2xl bg-gray-50 p-3"
+            >
+              <div className="h-48 rounded-xl bg-gray-700"></div>
+              <div className="flex flex-col gap-4">
+                <div className="flex flex-row justify-between">
+                  <div className="flex flex-col">
+                    <span className="text-xl font-bold text-gray-700">
+                      {item.goodsName}
+                    </span>
+                    <p className="text-xs text-gray-700">ID: {item.goodsId}</p>
+                  </div>
+                  <span className="font-bold  text-red-600">${item.price}</span>
+                </div>
+                <button
+                  className="rounded-md bg-sky-800 py-2 text-gray-50 hover:bg-sky-700"
+                  onClick={() => onAddToCart(item)}
+                >
+                  Add to cart
+                </button>
+              </div>
+            </div>
+          );
+        })}
     </main>
   );
 }

examples/next-example/app/service.ts

@@ -0,0 +1,20 @@
+import Mock from 'mockjs';
+
+export interface GoodsRecord {
+  goodsName: string;
+  goodsId: string;
+  price: number;
+}
+
+export const fetchGoodsList = (): GoodsRecord[] => {
+  const data = Mock.mock({
+    'list|10-20': [
+      {
+        goodsName: '@cword(3,5)',
+        goodsId: '@id()',
+        price: '@float(10, 100, 2, 2)',
+      },
+    ],
+  });
+  return data.list;
+};

examples/next-example/eslint.config.mjs

@@ -1,7 +1,7 @@
-import { base, defineConfig } from '@hyperse/eslint-config-hyperse';
+import { defineConfig, nextjs } from '@hyperse/eslint-config-hyperse';
 
 export default defineConfig([
-  ...base,
+  ...nextjs,
   {
     rules: {
       '@typescript-eslint/no-explicit-any': 'off',

examples/next-example/next.config.mjs

@@ -0,0 +1,11 @@
+/**
+ * Don't be scared of the generics here.
+ * All they do is to give us autocompletion when using this.
+ * @type {import("next").NextConfig}
+ */
+export default {
+  reactStrictMode: true,
+  eslint: {
+    ignoreDuringBuilds: true,
+  },
+};

examples/next-example/package.json

@@ -1,13 +1,15 @@
 {
-  "name": "next-example",
-  "version": "0.1.0",
+  "name": "@hyperse/track-next-example",
+  "version": "1.0.0",
   "private": true,
   "type": "module",
   "scripts": {
     "dev": "next dev -p 3001",
     "build": "next build",
     "start": "next start",
-    "lint": "next lint"
+    "lint": "eslint .",
+    "lint-fix": "yarn lint --fix",
+    "lint-staged-files": "lint-staged --allow-empty"
   },
   "repository": {
     "type": "git",
@@ -19,12 +21,13 @@
     }
   },
   "dependencies": {
+    "@hyperse/track": "latest",
     "@types/node": "20.6.2",
     "@types/react": "18.2.22",
     "@types/react-dom": "18.2.7",
     "autoprefixer": "10.4.15",
-    "eslint": "8.49.0",
-    "eslint-config-next": "13.5.1",
+    "eslint": "^9.8.0",
+    "eslint-config-next": "14.2.5",
     "next": "14.2.5",
     "postcss": "8.4.30",
     "react": "18.2.0",
@@ -33,6 +36,8 @@
     "typescript": "5.2.2"
   },
   "devDependencies": {
-    "@hyperse/eslint-config-hyperse": "1.1.3"
+    "@hyperse/eslint-config-hyperse": "1.1.3",
+    "@types/mockjs": "^1",
+    "mockjs": "^1.1.0"
   }
 }

examples/next-example/tailwind.config.cjs

@@ -5,9 +5,7 @@ module.exports = {
     // Avoid conflicts with antd
     preflight: false,
   },
-  content: [
-    './app/**/*.{js,tsx,md,mdx}',
-  ],
+  content: ['./app/**/*.{js,tsx,md,mdx}'],
   theme: {
     extend: {},
   },

examples/next-example/track/track.ts

@@ -0,0 +1 @@
+export const reportTrack = () => {};

examples/next-example/track/types.ts

@@ -0,0 +1,30 @@
+export type ReportAdapterOptions<Context, EventData> = {
+  setup?: <EventType extends keyof EventData>(
+    ctx: Context,
+    eventTYpe: EventType,
+    eventData: EventData[EventType]
+  ) => Promise<{
+    timeStamp: number;
+  }>;
+};
+
+export type ReportTrackData = {
+  env: 'prod' | 'uat';
+  platform: 'android' | 'ios';
+  ip: string;
+};
+
+export type ReportEventData = {
+  pv?: {
+    url: string;
+    timeStamp: number;
+    userName: string;
+    userId: string;
+  };
+  addCart?: {
+    price: number;
+    goodsId: string;
+    goodsName: string;
+    count: number;
+  };
+};

examples/next-example/tsconfig.json

@@ -1,6 +1,5 @@
 {
   "compilerOptions": {
-    "baseUrl": "./",
     "target": "es5",
     "lib": ["dom", "dom.iterable", "esnext"],
     "allowJs": true,

package.json

@@ -32,7 +32,7 @@
   ],
   "workspaces": [
     "website",
-    "examples/next-example",
+    "examples/*",
     "./"
   ],
   "scripts": {

src/helpers/index.ts

@@ -1,3 +1,4 @@
+export * from './helper-adapter-ctx.js';
 export * from './helper-adapter-track.js';
 export * from './helper-deep-clone.js';
 export * from './helper-deep-merge.js';

src/types/index.ts

@@ -1 +1,5 @@
+export * from './type-union-tuple.js';
+export * from './types-adapter.js';
+export * from './types-create.js';
+export * from './types-logger.js';
 export * from './types-track.js';

website/docusaurus.config.ts

@@ -131,9 +131,9 @@ const config: Config = {
       copyright: copyrightConfig,
     },
     algolia: {
-      apiKey: '441074cace987cbf4640c039ebed303c',
-      appId: 'J0EABTYI1A',
-      indexName: 'docusaurus-openapi',
+      apiKey: 'e337db95355de648d3a47a18aaee8e25',
+      appId: 'O6DZ543ZMD',
+      indexName: 'hyperse-ioio',
     },
     prism: {
       theme: themes.nightOwlLight,