@geee-be/react-utils 1.0.1

package/.storybook/main.js

@@ -0,0 +1,18 @@
+/** @type { import('@storybook/react-vite').StorybookConfig } */
+const config = {
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+  addons: [
+    '@storybook/addon-links',
+    '@storybook/addon-essentials',
+    '@storybook/addon-onboarding',
+    '@storybook/addon-interactions',
+  ],
+  framework: {
+    name: '@storybook/react-vite',
+    options: {},
+  },
+  docs: {
+    autodocs: 'tag',
+  },
+};
+export default config;

package/.storybook/preview.js

@@ -0,0 +1,14 @@
+/** @type { import('@storybook/react').Preview } */
+const preview = {
+  parameters: {
+    actions: { argTypesRegex: '^on[A-Z].*' },
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/i,
+      },
+    },
+  },
+};
+
+export default preview;

package/CHANGELOG.md

@@ -0,0 +1,7 @@
+# @geee-be/react-utils
+
+## 1.0.1
+
+### Patch Changes
+
+- 68cdda9: Added some hooks for state management

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2022 geee-be
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/package.json

@@ -0,0 +1,43 @@
+{
+  "name": "@geee-be/react-utils",
+  "version": "1.0.1",
+  "description": "",
+  "keywords": [],
+  "license": "MIT",
+  "author": "Greg Bacchus",
+  "type": "module",
+  "main": "dist/index.js",
+  "types": "src/index.ts",
+  "devDependencies": {
+    "@storybook/addon-essentials": "^7.6.7",
+    "@storybook/addon-interactions": "^7.6.7",
+    "@storybook/addon-links": "^7.6.7",
+    "@storybook/addon-onboarding": "^1.0.10",
+    "@storybook/blocks": "^7.6.7",
+    "@storybook/react": "^7.6.7",
+    "@storybook/react-vite": "^7.6.7",
+    "@storybook/test": "^7.6.7",
+    "@types/react": "^18.2.0",
+    "@types/react-dom": "^18.2.0",
+    "prop-types": "^15.8.1",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "storybook": "^7.6.7"
+  },
+  "peerDependencies": {
+    "react": ">18",
+    "react-dom": ">18"
+  },
+  "scripts": {
+    "prebuild": "rimraf dist/*",
+    "build": "tsc",
+    "build-storybook": "storybook build",
+    "lint": "npm run lint:eslint && npm run lint:types && npm run lint:unused-exports",
+    "lint:eslint": "eslint src/ --ext .ts,.tsx",
+    "lint:types": "tsc --noEmit",
+    "lint:unused-exports": "ts-unused-exports tsconfig.unused-exports.json --excludePathsFromReport=src/index.ts",
+    "prestart:dev": "rimraf dist/*",
+    "start:dev": "tsc --watch",
+    "storybook": "storybook dev -p 6006"
+  }
+}

package/src/hooks/index.ts

@@ -0,0 +1,4 @@
+export * from './use-broadcast-channel.js';
+export * from './use-history-state.js';
+export * from './use-local-state.js';
+

package/src/hooks/state.util.ts

@@ -0,0 +1,26 @@
+export interface SerializationOptions<T, S> {
+  fromSerializable: (value: S) => T;
+  toSerializable: (value: T) => S;
+}
+
+export const deserialize = <T, S>(serialized: unknown, fromSerializable?: (value: S) => T): T | undefined => {
+  if (!serialized || typeof serialized !== 'string') return undefined;
+  try {
+    return fromSerializable ? fromSerializable(JSON.parse(serialized) as S) : (JSON.parse(serialized) as T);
+  } catch {
+    return undefined;
+  }
+};
+
+export const serialize = <T, S>(value: T, toSerializable?: (value: T) => S): string => {
+  try {
+    return JSON.stringify(toSerializable ? toSerializable(value) : value);
+  } catch {
+    return '';
+  }
+};
+
+export type InitialValue<T> = T | (() => T);
+
+export const getInitialValue = <T>(initialValue: InitialValue<T>): T =>
+  initialValue instanceof Function ? initialValue() : initialValue;

package/src/hooks/use-broadcast-channel.ts

@@ -0,0 +1,63 @@
+import { useCallback, useEffect, useMemo } from 'react';
+
+/**
+ * React hook to create and manage a Broadcast Channel across multiple browser windows.
+ *
+ * @param channelName Static name of channel used across the browser windows.
+ * @param handleMessage Callback to handle the event generated when `message` is received.
+ * @param handleMessageError [optional] Callback to handle the event generated when `error` is received.
+ * @returns A function to send/post message on the channel.
+ * @example
+ * ```tsx
+ * import {useBroadcastChannel} from 'react-broadcast-channel';
+ *
+ * function App () {
+ *   const postUserIdMessage = useBroadcastChannel('userId', (e) => alert(e.data));
+ *   return (<button onClick={() => postUserIdMessage('ABC123')}>Send UserId</button>);
+ * }
+ * ```
+ * ---
+ * Works in browser that support Broadcast Channel API natively. See [MDN](https://developer.mozilla.org/en-US/docs/Web/API/Broadcast_Channel_API#browser_compatibility).
+ * To support other browsers, install and use [broadcastchannel-polyfill](https://www.npmjs.com/package/broadcastchannel-polyfill).
+ */
+export const useBroadcastChannel = <T = string>(
+  channelName: string,
+  handleMessage?: (event: MessageEvent) => void,
+  handleMessageError?: (event: MessageEvent) => void,
+): ((data: T) => void) => {
+  const channel = useMemo(
+    () =>
+      typeof window !== 'undefined' && 'BroadcastChannel' in window
+        ? new BroadcastChannel(channelName + '-channel')
+        : null,
+    [channelName],
+  );
+
+  useChannelEventListener(channel, 'message', handleMessage);
+  useChannelEventListener(channel, 'messageerror', handleMessageError);
+
+  useEffect(() => () => channel?.close(), [channel]);
+
+  return useCallback(
+    (data: T) => {
+      channel?.postMessage(data);
+    },
+    [channel],
+  );
+};
+
+// Helpers
+
+/** Hook to subscribe/unsubscribe from channel events. */
+const useChannelEventListener = <K extends keyof BroadcastChannelEventMap>(
+  channel: BroadcastChannel | null,
+  event: K,
+  handler: (e: BroadcastChannelEventMap[K]) => void = () => {},
+): void => {
+  useEffect(() => {
+    if (!channel) return;
+
+    channel.addEventListener(event, handler);
+    return () => channel.removeEventListener(event, handler);
+  }, [channel, event, handler]);
+};

package/src/hooks/use-history-state.ts

@@ -0,0 +1,26 @@
+import type { Dispatch, SetStateAction } from 'react';
+import { useEffect, useState } from 'react';
+import type { InitialValue, SerializationOptions } from './state.util.js';
+import { deserialize, getInitialValue, serialize } from './state.util.js';
+
+export const useHistoryState = <T, S = T>(
+  key: string,
+  initialValue: InitialValue<T>,
+  replace = true,
+  options?: SerializationOptions<T, S>,
+): [T, Dispatch<SetStateAction<T>>] => {
+  const [value, setValue] = useState<T>(
+    // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
+    () => deserialize(history.state?.[key], options?.fromSerializable) ?? getInitialValue(initialValue),
+  );
+
+  useEffect(() => {
+    if (replace) {
+      history.replaceState({ ...history.state, [key]: serialize(value, options?.toSerializable) }, '');
+    } else {
+      history.pushState({ ...history.state, [key]: serialize(value, options?.toSerializable) }, '');
+    }
+  }, [key, value]);
+
+  return [value, setValue];
+};

package/src/hooks/use-local-state.stories.tsx

@@ -0,0 +1,22 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { useLocalState } from './use-local-state.js';
+
+const meta: Meta = {
+  title: 'hooks/useLocalState',
+};
+
+export default meta;
+type Story = StoryObj;
+
+export const Primary: Story = {
+  render: () => {
+    const [value, setValue] = useLocalState('story-use-local-state', { val: 1 });
+    console.log('render', value);
+    return (
+      <div>
+        {JSON.stringify(value)}
+        <button onClick={() => setValue((prev) => ({ val: prev.val + 1 ?? -2 }))}>Inc</button>
+      </div>
+    );
+  },
+};

package/src/hooks/use-local-state.ts

@@ -0,0 +1,45 @@
+import type { Dispatch, SetStateAction } from 'react';
+import { useCallback, useEffect, useState } from 'react';
+import type { InitialValue, SerializationOptions } from './state.util.js';
+import { deserialize, getInitialValue, serialize } from './state.util.js';
+
+type SetValue<T> = Dispatch<SetStateAction<T>>;
+
+// Provides hook that persist the state with local storage with sync'd updates
+// NOTE: this only syncs between different window contexts, it doesn't sync between components in the same window
+export const useLocalState = <T, S = T>(
+  key: string,
+  initialValue: InitialValue<T>,
+  options?: SerializationOptions<T, S>,
+): [T, SetValue<T>] => {
+  const readValue = useCallback((): T => {
+    const item = localStorage.getItem(key);
+    return deserialize<T, S>(item, options?.fromSerializable) ?? getInitialValue(initialValue);
+  }, [key, options?.fromSerializable, initialValue]);
+
+  const [storedValue, setStoredValue] = useState<T>(readValue);
+
+  const setValue: SetValue<T> = useCallback(
+    (value) => {
+      const newValue = value instanceof Function ? value(storedValue) : value;
+      setStoredValue(newValue);
+      localStorage.setItem(key, serialize<T, S>(newValue, options?.toSerializable));
+    },
+    [key, options?.toSerializable, storedValue],
+  );
+
+  const storageValueChanged = useCallback(
+    (ev: StorageEvent) => {
+      if (ev.storageArea !== localStorage || ev.key !== key) return;
+      setStoredValue(deserialize<T, S>(ev.newValue, options?.fromSerializable) ?? getInitialValue(initialValue));
+    },
+    [key, options?.fromSerializable, initialValue],
+  );
+
+  useEffect(() => {
+    window.addEventListener('storage', storageValueChanged);
+    return () => window.removeEventListener('storage', storageValueChanged);
+  }, [storageValueChanged]);
+
+  return [storedValue, setValue];
+};

package/src/index.ts

@@ -0,0 +1 @@
+export * from './hooks/index.js';

package/tsconfig.json

@@ -0,0 +1,7 @@
+{
+  "extends": "../create/tsconfig.web.json",
+  "compilerOptions": {
+    "outDir": "./dist"
+  },
+  "include": ["./src"]
+}

package/tsconfig.unused-exports.json

@@ -0,0 +1,4 @@
+{
+  "extends": "./tsconfig.json",
+  "exclude": ["**/*.stories.tsx"]
+}