Feat: Add Hooks and partial stories

Author: jeffreybernadas

package-lock.json

@@ -71,14 +71,17 @@
     "@radix-ui/react-toggle-group": "^1.1.2",
     "@radix-ui/react-tooltip": "^1.1.8",
     "@tailwindcss/postcss": "^4.0.12",
-    "react": "^19.0.0",
     "cmdk": "^1.1.1",
+    "copy-to-clipboard": "^3.3.3",
     "embla-carousel-react": "^8.5.2",
     "input-otp": "^1.4.2",
+    "js-cookie": "^3.0.5",
+    "react": "^19.0.0",
     "react-day-picker": "^9.6.2",
     "react-dom": "^19.0.0",
     "react-hook-form": "^7.54.2",
     "react-resizable-panels": "^2.1.7",
+    "screenfull": "^6.0.2",
     "vaul": "^1.1.2"
   },
   "devDependencies": {
@@ -111,6 +114,7 @@
     "@testing-library/react": "^16.0.1",
     "@testing-library/user-event": "^14.4.3",
     "@types/jest": "^29.5.0",
+    "@types/js-cookie": "^3.0.6",
     "@types/react": "^19.0.10",
     "@types/react-dom": "^19.0.4",
     "autoprefixer": "^10.4.20",
@@ -163,10 +167,10 @@
   "dependencies": {
     "@babel/runtime": "^7.26.0",
     "@hookform/resolvers": "^4.1.3",
-    "@radix-ui/react-accordion": "^1.2.3",
-    "@radix-ui/react-alert-dialog": "^1.1.6",
-    "@radix-ui/react-aspect-ratio": "^1.1.2",
-    "@radix-ui/react-avatar": "^1.1.3",
+    "@radix-ui/react-accordion": "^1.2.1",
+    "@radix-ui/react-alert-dialog": "^1.1.2",
+    "@radix-ui/react-aspect-ratio": "^1.1.0",
+    "@radix-ui/react-avatar": "^1.1.1",
     "@radix-ui/react-checkbox": "^1.1.4",
     "@radix-ui/react-collapsible": "^1.1.3",
     "@radix-ui/react-context-menu": "^2.2.6",
@@ -183,24 +187,27 @@
     "@radix-ui/react-select": "^2.1.6",
     "@radix-ui/react-separator": "^1.1.2",
     "@radix-ui/react-slider": "^1.2.3",
-    "@radix-ui/react-slot": "^1.1.2",
+    "@radix-ui/react-slot": "^1.1.0",
     "@radix-ui/react-switch": "^1.1.3",
     "@radix-ui/react-tabs": "^1.1.3",
     "@radix-ui/react-toast": "^1.2.6",
     "@radix-ui/react-toggle": "^1.1.2",
     "@radix-ui/react-toggle-group": "^1.1.2",
     "@radix-ui/react-tooltip": "^1.1.8",
-    "cmdk": "^1.0.0",
+    "cmdk": "^1.1.1",
+    "copy-to-clipboard": "^3.3.3",
     "date-fns": "^4.1.0",
-    "embla-carousel-react": "^7.1.0",
+    "embla-carousel-react": "^8.5.2",
     "input-otp": "^1.4.2",
+    "js-cookie": "^3.0.5",
     "next-themes": "^0.4.5",
     "react": "^19.0.0",
-    "react-day-picker": "^8.10.1",
+    "react-day-picker": "^9.6.2",
     "react-dom": "^19.0.0",
     "react-hook-form": "^7.54.2",
     "react-resizable-panels": "^2.1.7",
     "recharts": "^2.15.1",
+    "screenfull": "^6.0.2",
     "sonner": "^2.0.1",
     "vaul": "^1.1.2",
     "zod": "^3.24.2"
@@ -267,4 +274,4 @@
       ]
     }
   }
-}
+}

package.json

@@ -0,0 +1,39 @@
+import { useEffect, useMemo, useState } from "react";
+import { isBrowser, off, on } from "../misc/util";
+
+const createBreakpoint =
+  (
+    breakpoints: { [name: string]: number } = {
+      laptopL: 1440,
+      laptop: 1024,
+      tablet: 768,
+    },
+  ) =>
+  () => {
+    const [screen, setScreen] = useState(isBrowser ? window.innerWidth : 0);
+
+    useEffect(() => {
+      const setSideScreen = (): void => {
+        setScreen(window.innerWidth);
+      };
+      setSideScreen();
+      on(window, "resize", setSideScreen);
+      return () => {
+        off(window, "resize", setSideScreen);
+      };
+    });
+    const sortedBreakpoints = useMemo(
+      () => Object.entries(breakpoints).sort((a, b) => (a[1] >= b[1] ? 1 : -1)),
+      [breakpoints],
+    );
+    const result = sortedBreakpoints.reduce((acc, [name, width]) => {
+      if (screen >= width) {
+        return name;
+      } else {
+        return acc;
+      }
+    }, sortedBreakpoints[0][0]);
+    return result;
+  };
+
+export default createBreakpoint;

src/hooks/factory/createBreakpoint.ts

@@ -0,0 +1,50 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import { useState } from "react";
+import {
+  IHookStateInitAction,
+  IHookStateSetAction,
+  resolveHookState,
+} from "../misc/hookState";
+import useEffectOnce from "../useEffectOnce";
+import useIsomorphicLayoutEffect from "../useIsomorphicLayoutEffect";
+
+export function createGlobalState<S = any>(
+  initialState: IHookStateInitAction<S>,
+): () => [S, (state: IHookStateSetAction<S>) => void];
+export function createGlobalState<S = undefined>(): () => [
+  S,
+  (state: IHookStateSetAction<S>) => void,
+];
+
+export function createGlobalState<S>(initialState?: S) {
+  const store: {
+    state: S;
+    setState: (state: IHookStateSetAction<S>) => void;
+    setters: any[];
+  } = {
+    state: initialState instanceof Function ? initialState() : initialState,
+    setState(nextState: IHookStateSetAction<S>) {
+      store.state = resolveHookState(nextState, store.state);
+      store.setters.forEach((setter) => setter(store.state));
+    },
+    setters: [],
+  };
+
+  return () => {
+    const [globalState, stateSetter] = useState<S | undefined>(store.state);
+
+    useEffectOnce(() => () => {
+      store.setters = store.setters.filter((setter) => setter !== stateSetter);
+    });
+
+    useIsomorphicLayoutEffect(() => {
+      if (!store.setters.includes(stateSetter)) {
+        store.setters.push(stateSetter);
+      }
+    });
+
+    return [globalState, store.setState];
+  };
+}
+
+export default createGlobalState;