react-broadcast-sync 1.0.0 → 1.1.0

package/demo/react-broadcast-sync-demo/package.json

@@ -0,0 +1,42 @@
+{
+  "name": "react-broadcast-sync-demo",
+  "private": true,
+  "version": "0.1.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc && vite build",
+    "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
+    "preview": "vite preview",
+    "format": "prettier --write \"src/**/*.{ts,tsx,js,jsx,json,css,scss,md}\"",
+    "format:check": "prettier --check \"src/**/*.{ts,tsx,js,jsx,json,css,scss,md}\""
+  },
+  "files": [
+    "dist",
+    "README.md"
+  ],
+  "dependencies": {
+    "@emotion/react": "^11.11.3",
+    "@emotion/styled": "^11.11.0",
+    "@mui/icons-material": "^5.15.10",
+    "@mui/material": "^5.15.10",
+    "framer-motion": "^11.0.5",
+    "react": "^18.2.0",
+    "react-broadcast-sync": "1.0.0",
+    "react-dom": "^18.2.0"
+  },
+  "devDependencies": {
+    "@types/node": "^22.15.29",
+    "@types/react": "^18.2.55",
+    "@types/react-dom": "^18.2.19",
+    "@typescript-eslint/eslint-plugin": "^6.21.0",
+    "@typescript-eslint/parser": "^6.21.0",
+    "@vitejs/plugin-react": "^4.2.1",
+    "eslint": "^8.56.0",
+    "eslint-plugin-react-hooks": "^4.6.0",
+    "eslint-plugin-react-refresh": "^0.4.5",
+    "prettier": "^3.5.3",
+    "typescript": "^5.2.2",
+    "vite": "^5.1.0"
+  }
+}

package/demo/react-broadcast-sync-demo/src/App.tsx

@@ -0,0 +1,277 @@
+import { ThemeProvider } from '@mui/material/styles';
+import {
+  CssBaseline,
+  Container,
+  Box,
+  Typography,
+  Grid,
+  Link,
+  IconButton,
+  useMediaQuery,
+} from '@mui/material';
+import { motion } from 'framer-motion';
+import GitHubIcon from '@mui/icons-material/GitHub';
+import LinkedInIcon from '@mui/icons-material/LinkedIn';
+import CodeIcon from '@mui/icons-material/Code';
+import OpenInNewIcon from '@mui/icons-material/OpenInNew';
+import { theme } from './theme';
+import { Counter } from './components/Counter';
+import { TextSync } from './components/TextSync';
+import { TodoList } from './components/TodoList';
+
+const App = () => {
+  const isMobile = useMediaQuery(theme.breakpoints.down('sm'));
+
+  return (
+    <ThemeProvider theme={theme}>
+      <CssBaseline />
+      <Box
+        sx={{
+          minHeight: '100vh',
+          bgcolor: 'background.default',
+          display: 'flex',
+          flexDirection: 'column',
+          overflow: 'hidden',
+          position: 'relative',
+          '&::before': {
+            content: '""',
+            position: 'absolute',
+            top: 0,
+            left: 0,
+            right: 0,
+            height: '40vh',
+            background: `linear-gradient(180deg, ${theme.palette.primary.main}15 0%, ${theme.palette.background.default} 100%)`,
+            zIndex: 0,
+          },
+        }}
+      >
+        <Container maxWidth="lg" sx={{ flex: 1, py: 2, position: 'relative', zIndex: 1 }}>
+          <motion.div
+            initial={{ opacity: 0 }}
+            animate={{ opacity: 1 }}
+            transition={{ duration: 0.5 }}
+          >
+            <Box
+              sx={{
+                display: 'flex',
+                flexDirection: 'column',
+                alignItems: 'center',
+                mb: { xs: 2, md: 3 },
+              }}
+            >
+              <motion.img
+                src="/assets/react-broadcast-sync-logo.png"
+                alt="React Broadcast Sync Logo"
+                style={{
+                  width: isMobile ? '60px' : '130px',
+                  height: 'auto',
+                  marginBottom: '12px',
+                }}
+                initial={{ scale: 0, opacity: 0, y: -100 }}
+                animate={{ scale: 1, opacity: 1, y: 0 }}
+                transition={{
+                  duration: 0.6,
+                  type: 'spring',
+                  stiffness: 200,
+                  damping: 15,
+                }}
+                whileHover={{
+                  scale: 1.1,
+                  filter: 'brightness(1.2)',
+                  transition: {
+                    type: 'spring',
+                    stiffness: 400,
+                    damping: 10,
+                  },
+                }}
+              />
+              <motion.div
+                initial={{ opacity: 0, y: 20 }}
+                animate={{ opacity: 1, y: 0 }}
+                transition={{ duration: 0.5, delay: 0.4 }}
+              >
+                <Typography
+                  variant="h3"
+                  component="h1"
+                  align="center"
+                  gutterBottom
+                  sx={{
+                    mb: 0.25,
+                    color: 'white',
+                    textShadow: '0 2px 4px rgba(0,0,0,0.2)',
+                  }}
+                >
+                  React Broadcast Sync Demo
+                </Typography>
+              </motion.div>
+              <motion.div
+                initial={{ opacity: 0, y: 20 }}
+                animate={{ opacity: 1, y: 0 }}
+                transition={{ duration: 0.5, delay: 0.6 }}
+              >
+                <Typography
+                  variant="h6"
+                  align="center"
+                  color="text.secondary"
+                  paragraph
+                  sx={{ mb: 1 }}
+                >
+                  Real-time state synchronization across browser tabs
+                </Typography>
+                <Box
+                  sx={{
+                    display: 'flex',
+                    alignItems: 'center',
+                    justifyContent: 'center',
+                    gap: 1,
+                    mb: 1,
+                  }}
+                >
+                  <Typography
+                    variant="body2"
+                    color="text.secondary"
+                    sx={{ display: 'flex', alignItems: 'center' }}
+                  >
+                    Open a new tab to see the synchronization in action
+                  </Typography>
+                  <motion.div whileHover={{ scale: 1.1 }} whileTap={{ scale: 0.95 }}>
+                    <IconButton
+                      onClick={() => window.open(window.location.href, '_blank')}
+                      color="primary"
+                      size="small"
+                    >
+                      <OpenInNewIcon />
+                    </IconButton>
+                  </motion.div>
+                </Box>
+              </motion.div>
+            </Box>
+            <Grid container spacing={{ xs: 2, md: 3 }}>
+              <Grid item xs={12} md={4}>
+                <motion.div
+                  initial={{ scale: 0.8, opacity: 0, y: 20 }}
+                  animate={{ scale: 1, opacity: 1, y: 0 }}
+                  transition={{
+                    type: 'spring',
+                    stiffness: 300,
+                    damping: 20,
+                    delay: 0.8,
+                  }}
+                  style={{ height: '100%' }}
+                >
+                  <Counter />
+                </motion.div>
+              </Grid>
+              <Grid item xs={12} md={4}>
+                <motion.div
+                  initial={{ scale: 0.8, opacity: 0, y: 20 }}
+                  animate={{ scale: 1, opacity: 1, y: 0 }}
+                  transition={{
+                    type: 'spring',
+                    stiffness: 300,
+                    damping: 20,
+                    delay: 0.9,
+                  }}
+                  style={{ height: '100%' }}
+                >
+                  <TextSync />
+                </motion.div>
+              </Grid>
+              <Grid item xs={12} md={4}>
+                <motion.div
+                  initial={{ scale: 0.8, opacity: 0, y: 20 }}
+                  animate={{ scale: 1, opacity: 1, y: 0 }}
+                  transition={{
+                    type: 'spring',
+                    stiffness: 300,
+                    damping: 20,
+                    delay: 1.0,
+                  }}
+                  style={{ height: '100%' }}
+                >
+                  <TodoList />
+                </motion.div>
+              </Grid>
+            </Grid>
+          </motion.div>
+        </Container>
+
+        <motion.div
+          initial={{ opacity: 0, y: 20 }}
+          animate={{ opacity: 1, y: 0 }}
+          transition={{ duration: 0.5, delay: 1.2 }}
+        >
+          <Box
+            component="footer"
+            sx={{
+              py: { xs: 1, md: 1.5 },
+              px: { xs: 1, md: 1.5 },
+              backgroundColor: 'background.paper',
+              borderTop: 1,
+              borderColor: 'divider',
+              mt: 'auto',
+            }}
+          >
+            <Container maxWidth="lg">
+              <Box
+                sx={{
+                  display: 'flex',
+                  flexDirection: 'column',
+                  alignItems: 'center',
+                  gap: { xs: 1, md: 1.5 },
+                }}
+              >
+                <Typography variant="subtitle1" color="text.secondary" gutterBottom sx={{ mb: 0 }}>
+                  Connect with us
+                </Typography>
+                <Box sx={{ display: 'flex', gap: { xs: 1, md: 1.5 } }}>
+                  <motion.div whileHover={{ scale: 1.1 }} whileTap={{ scale: 0.95 }}>
+                    <IconButton
+                      component={Link}
+                      href="https://github.com/IdanShalem/react-broadcast-sync"
+                      target="_blank"
+                      rel="noopener noreferrer"
+                      color="primary"
+                      size="large"
+                    >
+                      <GitHubIcon fontSize="large" />
+                    </IconButton>
+                  </motion.div>
+                  <motion.div whileHover={{ scale: 1.1 }} whileTap={{ scale: 0.95 }}>
+                    <IconButton
+                      component={Link}
+                      href="https://www.npmjs.com/package/react-broadcast-sync"
+                      target="_blank"
+                      rel="noopener noreferrer"
+                      color="secondary"
+                      size="large"
+                    >
+                      <CodeIcon fontSize="large" />
+                    </IconButton>
+                  </motion.div>
+                  <motion.div whileHover={{ scale: 1.1 }} whileTap={{ scale: 0.95 }}>
+                    <IconButton
+                      component={Link}
+                      href="https://www.linkedin.com/in/idan-shalem-3a1781169/"
+                      target="_blank"
+                      rel="noopener noreferrer"
+                      color="primary"
+                      size="large"
+                    >
+                      <LinkedInIcon fontSize="large" />
+                    </IconButton>
+                  </motion.div>
+                </Box>
+                <Typography variant="caption" color="text.secondary" sx={{ mt: 0.5 }}>
+                  © {new Date().getFullYear()} Idan Shalem. All rights reserved.
+                </Typography>
+              </Box>
+            </Container>
+          </Box>
+        </motion.div>
+      </Box>
+    </ThemeProvider>
+  );
+};
+
+export default App;

package/demo/react-broadcast-sync-demo/src/components/Counter.tsx

@@ -0,0 +1,63 @@
+import { Box, Typography, Paper, IconButton } from '@mui/material';
+import AddIcon from '@mui/icons-material/Add';
+import RemoveIcon from '@mui/icons-material/Remove';
+import { useCounterBroadcast } from '../hooks/useCounterBroadcast';
+
+export const Counter = () => {
+  const { count, increment, decrement } = useCounterBroadcast();
+
+  return (
+    <Paper
+      elevation={3}
+      sx={{
+        p: 2,
+        height: '300px',
+        display: 'flex',
+        flexDirection: 'column',
+        alignItems: 'center',
+        justifyContent: 'start',
+        background: 'linear-gradient(145deg, rgba(76, 175, 80, 0.1), rgba(76, 175, 80, 0.05))',
+      }}
+    >
+      <Typography
+        variant="h6"
+        gutterBottom
+        sx={{
+          color: 'white',
+          textShadow: '0 2px 4px rgba(0,0,0,0.2)',
+        }}
+      >
+        Counter
+      </Typography>
+      <Box sx={{ display: 'flex', alignItems: 'center', gap: 2 }}>
+        <IconButton
+          onClick={decrement}
+          sx={{
+            bgcolor: 'primary.main',
+            color: 'white',
+            '&:hover': {
+              bgcolor: 'primary.dark',
+            },
+          }}
+        >
+          <RemoveIcon />
+        </IconButton>
+        <Typography variant="h3" component="div" sx={{ minWidth: '80px', textAlign: 'center' }}>
+          {count}
+        </Typography>
+        <IconButton
+          onClick={increment}
+          sx={{
+            bgcolor: 'primary.main',
+            color: 'white',
+            '&:hover': {
+              bgcolor: 'primary.dark',
+            },
+          }}
+        >
+          <AddIcon />
+        </IconButton>
+      </Box>
+    </Paper>
+  );
+};

package/demo/react-broadcast-sync-demo/src/components/TextSync.tsx

@@ -0,0 +1,61 @@
+import { Box, Typography, TextField, Paper } from '@mui/material';
+import { useTextBroadcast } from '../hooks/useTextBroadcast';
+
+export const TextSync = () => {
+  const { localText, handleChange } = useTextBroadcast();
+
+  return (
+    <Paper
+      elevation={3}
+      sx={{
+        p: 2,
+        height: '300px',
+        display: 'flex',
+        flexDirection: 'column',
+        position: 'relative',
+        background: 'linear-gradient(145deg, rgba(76, 175, 80, 0.1), rgba(76, 175, 80, 0.05))',
+      }}
+    >
+      <Typography
+        variant="h6"
+        gutterBottom
+        sx={{
+          color: 'white',
+          textShadow: '0 2px 4px rgba(0,0,0,0.2)',
+        }}
+      >
+        Text Synchronization
+      </Typography>
+      <Box
+        sx={{
+          flex: 1,
+          display: 'flex',
+          flexDirection: 'column',
+          gap: 1,
+          pt: 1,
+          paddingTop: 0,
+        }}
+      >
+        <TextField
+          fullWidth
+          value={localText}
+          onChange={handleChange}
+          placeholder="Type something..."
+          variant="outlined"
+          size="small"
+          sx={{
+            '& .MuiOutlinedInput-root': {
+              height: '80px',
+              '& textarea': {
+                height: '100% !important',
+                padding: '8px 12px',
+              },
+            },
+          }}
+          multiline
+          rows={3}
+        />
+      </Box>
+    </Paper>
+  );
+};

package/demo/react-broadcast-sync-demo/src/components/TodoList.tsx

@@ -0,0 +1,186 @@
+import {
+  Box,
+  Typography,
+  TextField,
+  Paper,
+  List,
+  ListItem,
+  IconButton,
+  Checkbox,
+  Fade,
+  CircularProgress,
+} from '@mui/material';
+import DeleteIcon from '@mui/icons-material/Delete';
+import CheckCircleIcon from '@mui/icons-material/CheckCircle';
+import { useTodoBroadcast } from '../hooks/useTodoBroadcast';
+import { useTheme } from '@mui/material/styles';
+
+interface Todo {
+  id: string;
+  text: string;
+  completed: boolean;
+}
+
+export const TodoList = () => {
+  const {
+    todos,
+    newTodo,
+    handleNewTodoChange,
+    handleAddTodo,
+    handleToggleTodo,
+    handleDeleteTodo,
+    handleScrollSync,
+    hoveredTodoId,
+    scrollContainerRef,
+    handleTodoMouseEnter,
+    handleTodoMouseLeave,
+    isSyncing,
+    showCheckmark,
+  } = useTodoBroadcast();
+  const theme = useTheme();
+
+  return (
+    <Paper
+      elevation={3}
+      sx={{
+        p: 2,
+        height: '300px',
+        display: 'flex',
+        flexDirection: 'column',
+        position: 'relative',
+        background: 'linear-gradient(145deg, rgba(94, 193, 61, 0.1), rgba(63, 173, 58, 0.05))',
+      }}
+    >
+      <Typography
+        variant="h6"
+        gutterBottom
+        sx={{
+          color: theme.palette.text.primary,
+          textShadow: '0 2px 4px rgba(0,0,0,0.2)',
+        }}
+      >
+        Todo List
+      </Typography>
+      <Box
+        component="form"
+        onSubmit={handleAddTodo}
+        sx={{
+          display: 'flex',
+          gap: 1,
+          mb: 1,
+        }}
+      >
+        <TextField
+          fullWidth
+          value={newTodo}
+          onChange={handleNewTodoChange}
+          placeholder="Add a new todo..."
+          variant="outlined"
+          size="small"
+          InputProps={{
+            style: {
+              color: theme.palette.text.primary,
+            },
+          }}
+        />
+      </Box>
+      <Box
+        ref={scrollContainerRef}
+        onScroll={handleScrollSync}
+        sx={{
+          flex: 1,
+          overflow: 'auto',
+          position: 'relative',
+          '&::-webkit-scrollbar': {
+            width: '8px',
+          },
+          '&::-webkit-scrollbar-track': {
+            background: 'transparent',
+          },
+          '&::-webkit-scrollbar-thumb': {
+            background: 'rgba(255, 255, 255, 0.08)',
+            borderRadius: '4px',
+          },
+        }}
+      >
+        <List>
+          {todos.map((todo: Todo) => (
+            <ListItem
+              key={todo.id}
+              onMouseEnter={() => handleTodoMouseEnter(todo.id)}
+              onMouseLeave={handleTodoMouseLeave}
+              sx={{
+                opacity: hoveredTodoId === todo.id ? 0.7 : 1,
+                transition: 'opacity 0.2s',
+              }}
+              secondaryAction={
+                <IconButton
+                  edge="end"
+                  onClick={() => handleDeleteTodo(todo.id)}
+                  size="small"
+                  sx={{ color: theme.palette.primary.main }}
+                >
+                  <DeleteIcon />
+                </IconButton>
+              }
+            >
+              <Checkbox
+                checked={todo.completed}
+                onChange={() => handleToggleTodo(todo.id)}
+                size="small"
+                sx={{
+                  color: theme.palette.primary.main,
+                  '&.Mui-checked': {
+                    color: theme.palette.primary.main,
+                  },
+                }}
+              />
+              <Typography
+                sx={{
+                  textDecoration: todo.completed ? 'line-through' : 'none',
+                  color: todo.completed ? theme.palette.text.secondary : theme.palette.text.primary,
+                }}
+              >
+                {todo.text}
+              </Typography>
+            </ListItem>
+          ))}
+        </List>
+      </Box>
+      {/* Sync Indicator */}
+      <Fade in={isSyncing || showCheckmark}>
+        <Box
+          sx={{
+            position: 'absolute',
+            top: 8,
+            right: 8,
+            display: 'flex',
+            alignItems: 'center',
+            gap: 1,
+            bgcolor: 'background.paper',
+            borderRadius: 1,
+            px: 1.5,
+            py: 0.5,
+            boxShadow: 1,
+          }}
+        >
+          {isSyncing ? (
+            <>
+              <CircularProgress size={16} thickness={4} />
+              <Typography variant="caption" color="text.secondary">
+                Syncing...
+              </Typography>
+            </>
+          ) : showCheckmark ? (
+            <CheckCircleIcon
+              sx={{
+                color: theme.palette.success.main,
+                fontSize: 20,
+              }}
+            />
+          ) : null}
+        </Box>
+      </Fade>
+    </Paper>
+  );
+};