core-outline 1.0.1 → 1.1.1

package/package.json

@@ -1,27 +1,51 @@
 {
   "name": "core-outline",
-  "version": "1.0.1",
-  "description": "Connect your React JS application to Core&Outline",
-  "main": "index.js",
+  "version": "1.1.1",
+  "description": "A React component for Core&Outline",
+  "main": "dist/index.js",
+  "module": "dist/index.es.js",
   "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1"
-  },
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/TomiTsuma/core-outline-npm.git"
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build",
+    "build-lib": "rollup -c",
+    "format": "prettier --write .",
+    "lint": "eslint . "
   },
   "keywords": [
-    "core",
-    "outline"
+    "Core",
+    "Outline"
   ],
-  "author": "Tsuma Thomas",
-  "license": "ISC",
-  "bugs": {
-    "url": "https://github.com/TomiTsuma/core-outline-npm/issues"
+  "author": "Core&Outline",
+  "license": "MIT",
+  "devDependencies": {
+    "@babel/core": "^7.12.10",
+    "@babel/preset-react": "^7.12.10",
+    "@rollup/plugin-node-resolve": "^11.1.1",
+    "@storybook/addon-actions": "^6.1.16",
+    "@storybook/addon-essentials": "^6.1.16",
+    "@storybook/addon-links": "^6.1.16",
+    "@storybook/react": "^6.1.16",
+    "babel-loader": "^8.2.2",
+    "eslint": "^9.17.0",
+    "eslint-config-prettier": "^9.1.0",
+    "eslint-plugin-react": "^7.37.3",
+    "prettier": "^3.4.2",
+    "react": "^17.0.1",
+    "react-dom": "^17.0.1",
+    "rollup": "^2.38.4",
+    "rollup-plugin-babel": "^4.4.0",
+    "rollup-plugin-peer-deps-external": "^2.2.4",
+    "rollup-plugin-postcss": "^4.0.0",
+    "rollup-plugin-terser": "^7.0.2"
+  },
+  "peerDependencies": {
+    "react": "^17.0.1",
+    "react-dom": "^17.0.1"
   },
-  "homepage": "https://github.com/TomiTsuma/core-outline-npm#readme",
   "dependencies": {
-    "axios": "^1.6.7",
-    "react-router-dom": "^6.22.1"
+    "react-error-boundary": "^5.0.0",
+    "react-tracking": "^9.3.2",
+    "rrweb": "^2.0.0-alpha.4"
   }
 }

package/rollup.config.js

@@ -0,0 +1,35 @@
+import babel from 'rollup-plugin-babel';
+import resolve from '@rollup/plugin-node-resolve';
+import external from 'rollup-plugin-peer-deps-external';
+import { terser } from 'rollup-plugin-terser';
+import postcss from 'rollup-plugin-postcss';
+
+export default [
+  {
+    input: './src/components/CoreOutline/CoreOutline.js',
+    output: [
+      {
+        file: 'dist/index.js',
+        format: 'cjs',
+      },
+      {
+        file: 'dist/index.es.js',
+        format: 'es',
+        exports: 'named',
+      },
+    ],
+    plugins: [
+      postcss({
+        plugins: [],
+        minimize: true,
+      }),
+      babel({
+        exclude: 'node_modules/**',
+        presets: ['@babel/preset-react'],
+      }),
+      external(),
+      resolve(),
+      // terser(),
+    ],
+  },
+];

package/src/components/CoreOutline/CoreOutline.js

@@ -0,0 +1,70 @@
+import React, { useEffect, useRef, useState } from 'react';
+import { record } from 'rrweb';
+
+const CoreOutline = ({ children }) => {
+  const [events, setEvents] = useState([]);
+  const recorderActive = useRef(false);
+  const [currentPage, setCurrentPage] = useState(window.location.href);
+
+  useEffect(() => {
+    console.log(currentPage);
+    const handleNavigation = () => {
+      setCurrentPage(window.location.href);
+      saveEvents(events);
+    };
+
+    window.addEventListener('popstate', handleNavigation);
+    const originalPushState = window.history.pushState;
+    window.history.pushState = function (...args) {
+      originalPushState.apply(this, args);
+      handleNavigation();
+    };
+
+    return () => {
+      window.removeEventListener('popstate', handleNavigation);
+      window.history.pushState = originalPushState;
+    };
+  }, [currentPage]);
+
+  useEffect(() => {
+    let stopFn;
+    if (!recorderActive.current) {
+      stopFn = record({
+        emit(event) {
+          setEvents((prevEvents) => [...prevEvents, event]);
+        },
+      });
+
+      recorderActive.current = true;
+    }
+
+    return () => {
+      if (stopFn) {
+        stopFn();
+
+        recorderActive.current = false;
+      }
+    };
+  }, []);
+
+  function saveEvents(events) {
+    const requestOptions = {
+      method: 'PUT',
+      headers: {
+        'Content-Type': 'application/json',
+      },
+      body: events,
+    };
+
+    fetch('http://localhost:8000/generate-s3-url')
+      .then((response) => response.json())
+      .then((data) => {
+        const uploadURL = data.signed_url;
+        return fetch(uploadURL, requestOptions);
+      });
+  }
+
+  return <div>{children}</div>;
+};
+
+export default CoreOutline;

package/src/components/CoreOutline/RWebRecorder.js

@@ -0,0 +1,26 @@
+import { useEffect, useRef } from 'react';
+import { record } from 'rrweb';
+
+const useRRWebRecorder = () => {
+  const eventsRef = useRef([]);
+
+  useEffect(() => {
+    const stopRecording = record({
+      emit(event) {
+        if (event) {
+          eventsRef.current.push(event);
+        }
+      },
+    });
+
+    return () => {
+      if (stopRecording) {
+        stopRecording();
+      }
+    };
+  }, []);
+
+  return eventsRef;
+};
+
+export default useRRWebRecorder;

package/src/components/CoreOutline/index.js

@@ -0,0 +1 @@
+export * from './CoreOutline';

package/src/index.js

@@ -0,0 +1 @@
+export * from './components/CoreOutline';

package/README.md

@@ -1,2 +0,0 @@
-# core-outline-npm
-This repo is an npm package for core and outline. It is compatible with node js

package/config/components/app.js

@@ -1,3 +0,0 @@
-const app_configs = {
-    BASE_URL: `https://api.coreoutline.com`,
-}

package/config/components/tracking.js

@@ -1,10 +0,0 @@
-const tracking_endpoints = {
-    START_SESSION: "/start-session",
-    END_SESSION: "/end-session",
-    UPDATE_PAGE: "/update-session",
-    TARGET_REACHED:"/update-target"
-}
-
-module.exports = {
-    tracking_endpoints,
-}

package/config/index.js

@@ -1,8 +0,0 @@
-const trackingConfigs = require('./components/tracking.js')
-const appConfigs = require('./components/app.js')
-
-
-module.exports = {
-    trackingConfigs,
-    appConfigs
-}

package/lib/index.js

@@ -1,5 +0,0 @@
-const { request } = require('axios/app.js')
-
-module.exports = {
-    request
-}

package/services/index.js

@@ -1,7 +0,0 @@
-const updatePage = require('./page/update-page.js')
-const startSession = require('./session/start-session.js')
-const endSession = require('./session/end-session.js')
-const targetReached = require('./target/update-target.js')
-
-
-module.exports = {updatePage, startSession, endSession, targetReached}

package/services/page/update-page.js

@@ -1,22 +0,0 @@
-const request = reqire('../../lib/index.js')
-const { trackingConfigs, appConfigs } = require('../../config/index.js')
-
-const updatePage = async(time_in, session_id, time_out) =>{
-    const res = await(
-        request({
-            url:  appConfigs.BASE_URL,
-            service: trackingConfigs.UPDATE_PAGE,
-            body: {
-                'session_id':session_id,
-                'time_in':time_in,
-                'time_out':time_out
-            },
-            method:'POST',
-            params:{
-                Authorization: `Bearer ${token}`
-            }
-        })
-    )
-}
-
-module.exports = updatePage

package/services/session/end-session.js

@@ -1,20 +0,0 @@
-const request = reqire('../../lib/index.js')
-const { trackingConfigs, appConfigs } = require('../../config/index.js')
-
-const endSession = async(session_id) =>{
-    const res = await(
-        request({
-            url:  appConfigs.BASE_URL,
-            service: trackingConfigs.END_SESSION,
-            body: {
-                'session_id':session_id
-            },
-            method:'POST',
-            params:{
-                Authorization: `Bearer ${token}`
-            }
-        })
-    )
-}
-
-module.exports = endSession

package/services/session/start-session.js

@@ -1,24 +0,0 @@
-const request = reqire('../../lib/index.js')
-const { trackingConfigs } = require('../../config/index.js')
-
-const startSession = async(device, browser, latitude, longitude) =>{
-    const res = await(
-        request({
-            url:`https://api.coreoutline.com`,
-            service: trackingConfigs.START_SESSION,
-            body: {
-                'device':device,
-                'browser':browser,
-                'latitude':latitude,
-                'longitude':longitude
-            },
-            method:'POST',
-            params:{
-                Authorization: `Bearer ${token}`
-            }
-        })
-    )
-}
-
-
-module.exports = startSession

package/services/target/update-target.js

@@ -1,20 +0,0 @@
-const request = reqire('../../lib/index.js')
-const { trackingConfigs, appConfigs } = require('../../config/index.js')
-
-const targetReached = async(session_id) =>{
-    const res = await(
-        request({
-            url:  appConfigs.BASE_URL,
-            service: trackingConfigs.TARGET_REACHED,
-            body: {
-                'session_id':session_id
-            },
-            method:'POST',
-            params:{
-                Authorization: `Bearer ${token}`
-            }
-        })
-    )
-}
-
-module.exports = targetReached