core-outline 1.1.0 → 1.1.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "core-outline",
-  "version": "1.1.0",
+  "version": "1.1.2",
   "description": "A React component for Core&Outline",
   "main": "dist/index.js",
   "module": "dist/index.es.js",
@@ -8,7 +8,9 @@
     "test": "echo \"Error: no test specified\" && exit 1",
     "storybook": "storybook dev -p 6006",
     "build-storybook": "storybook build",
-    "build-lib": "rollup -c"
+    "build-lib": "rollup -c",
+    "format": "prettier --write .",
+    "lint": "eslint . "
   },
   "keywords": [
     "Core",
@@ -25,6 +27,10 @@
     "@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",

package/rollup.config.js

@@ -1,35 +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(),
-    ]
-  }
-];
+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

@@ -1,45 +1,70 @@
-import React, { useEffect } from "react";
-import useRRWebRecorder from "./RWebRecorder";
-
-const CoreOutline = ({children}) =>{
-    const eventsRef = useRRWebRecorder();
-
-  useEffect(() => {
-    const events = eventsRef.current;
-    localStorage.setItem("rrweb-events", JSON.stringify(events));
-  }, []);
-
-  useEffect(() => {
-    return () => {
-      const events = eventsRef.current;
-      localStorage.setItem("rrweb-events", JSON.stringify(events));
-      const savedEvents = localStorage.getItem("rrweb-events");
-      // const jsonData = JSON.stringify(savedEvents);
-
-      const requestOptions = {
-        method: 'PUT',
-        headers: {
-          'Content-Type': 'application/json',
-        },
-        body: savedEvents,
-      };
-
-      let uploadURL = "";
-      fetch("http://localhost:8000/generate-s3-url")
-        .then(response => response.json())
-        .then(data => {
-          uploadURL = data.signed_url;
-          fetch(uploadURL, requestOptions).catch(error => {
-            console.error("Error uploading to S3:", error);
-          });
-        })
-        .catch(error => {
-          console.error("Error fetching S3 URL:", error);
-        });
-    };
-  }, []);
-
-  return <>{children}</>;
-};
-
-export default CoreOutline;
+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(JSON.stringify(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: JSON.stringify(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

@@ -1,26 +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;
+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

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

package/src/index.js

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

package/src/stories/Button.jsx

@@ -1,40 +0,0 @@
-import React from 'react';
-
-import PropTypes from 'prop-types';
-
-import './button.css';
-
-/** Primary UI component for user interaction */
-export const Button = ({ primary, backgroundColor, size, label, ...props }) => {
-  const mode = primary ? 'storybook-button--primary' : 'storybook-button--secondary';
-  return (
-    <button
-      type="button"
-      className={['storybook-button', `storybook-button--${size}`, mode].join(' ')}
-      style={backgroundColor && { backgroundColor }}
-      {...props}
-    >
-      {label}
-    </button>
-  );
-};
-
-Button.propTypes = {
-  /** Is this the principal call to action on the page? */
-  primary: PropTypes.bool,
-  /** What background color to use */
-  backgroundColor: PropTypes.string,
-  /** How large should the button be? */
-  size: PropTypes.oneOf(['small', 'medium', 'large']),
-  /** Button contents */
-  label: PropTypes.string.isRequired,
-  /** Optional click handler */
-  onClick: PropTypes.func,
-};
-
-Button.defaultProps = {
-  backgroundColor: null,
-  primary: false,
-  size: 'medium',
-  onClick: undefined,
-};

package/src/stories/Button.stories.js

@@ -1,49 +0,0 @@
-import { fn } from '@storybook/test';
-
-import { Button } from './Button';
-
-// More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export
-export default {
-  title: 'Example/Button',
-  component: Button,
-  parameters: {
-    // Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/configure/story-layout
-    layout: 'centered',
-  },
-  // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/writing-docs/autodocs
-  tags: ['autodocs'],
-  // More on argTypes: https://storybook.js.org/docs/api/argtypes
-  argTypes: {
-    backgroundColor: { control: 'color' },
-  },
-  // Use `fn` to spy on the onClick arg, which will appear in the actions panel once invoked: https://storybook.js.org/docs/essentials/actions#action-args
-  args: { onClick: fn() },
-};
-
-// More on writing stories with args: https://storybook.js.org/docs/writing-stories/args
-export const Primary = {
-  args: {
-    primary: true,
-    label: 'Button',
-  },
-};
-
-export const Secondary = {
-  args: {
-    label: 'Button',
-  },
-};
-
-export const Large = {
-  args: {
-    size: 'large',
-    label: 'Button',
-  },
-};
-
-export const Small = {
-  args: {
-    size: 'small',
-    label: 'Button',
-  },
-};