react-broadcast-sync 1.6.0 → 1.8.0

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

@@ -1,42 +0,0 @@
-{
-  "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.1.3",
-    "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

@@ -1,277 +0,0 @@
-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

@@ -1,63 +0,0 @@
-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

@@ -1,61 +0,0 @@
-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

@@ -1,186 +0,0 @@
-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>
-  );
-};