main 🧊 add use cookies, add cli page

Author: debabin

packages/core/src/bundle/hooks/useCookies/useCookies.js

@@ -1,17 +1,32 @@
 import { useEffect, useState } from 'react';
-import { clearCookies, getCookies, removeCookie, setCookie } from '../useCookie/helpers';
-import { COOKIE_EVENT, dispatchCookieEvent } from '../useCookie/useCookie';
+import { COOKIE_EVENT, dispatchCookieEvent, removeCookie, setCookie } from '../useCookie/useCookie';
+export const getParsedCookies = () => Object.fromEntries(document.cookie.split('; ').map((cookie) => {
+    const [key, ...value] = cookie.split('=');
+    const decodedValue = decodeURIComponent(value.join('='));
+    try {
+        return [key, JSON.parse(decodedValue)];
+    }
+    catch {
+        return [key, decodedValue];
+    }
+}));
+export const clearCookies = () => {
+    document.cookie.split('; ').forEach((cookie) => {
+        const [name] = cookie.split('=');
+        removeCookie(name);
+    });
+};
 const setCookieItem = (key, value, options) => {
-  setCookie(key, value, options);
-  dispatchCookieEvent();
+    setCookie(key, value, options);
+    dispatchCookieEvent();
 };
 const removeCookieItem = (key, options) => {
-  removeCookie(key, options);
-  dispatchCookieEvent();
+    removeCookie(key, options);
+    dispatchCookieEvent();
 };
 const clearCookieItems = () => {
-  clearCookies();
-  dispatchCookieEvent();
+    clearCookies();
+    dispatchCookieEvent();
 };
 /**
  * @name useCookies
@@ -27,20 +42,21 @@ const clearCookieItems = () => {
  * const { value, set, remove, getAll, clear } = useCookies();
  */
 export const useCookies = () => {
-  const [value, setValue] = useState(typeof window !== 'undefined' ? getCookies(true) : {});
-  useEffect(() => {
-    const onChange = () => setValue(getCookies(true));
-    window.addEventListener(COOKIE_EVENT, onChange);
-    return () => {
-      window.removeEventListener(COOKIE_EVENT, onChange);
+    const [value, setValue] = useState(typeof window !== 'undefined' ? getParsedCookies() : {});
+    useEffect(() => {
+        const onChange = () => setValue(getParsedCookies());
+        window.addEventListener(COOKIE_EVENT, onChange);
+        return () => {
+            window.removeEventListener(COOKIE_EVENT, onChange);
+        };
+    }, []);
+    const set = (key, value, options) => {
+        if (value === null)
+            return removeCookieItem(key);
+        setCookieItem(key, value, options);
     };
-  }, []);
-  const set = (key, value, options) => {
-    if (value === null) return removeCookieItem(key);
-    setCookieItem(key, value, options);
-  };
-  const remove = (key, options) => removeCookieItem(key, options);
-  const getAll = () => getCookies(true);
-  const clear = () => clearCookieItems();
-  return { value, set, remove, getAll, clear };
+    const remove = (key, options) => removeCookieItem(key, options);
+    const getAll = () => getParsedCookies();
+    const clear = () => clearCookieItems();
+    return { value, set, remove, getAll, clear };
 };

packages/core/src/hooks/useCookies/useCookies.demo.tsx

@@ -0,0 +1,37 @@
+import { useCookie } from '../useCookie/useCookie';
+import { useCookies } from './useCookies';
+
+const POKEMONS = [
+    { name: 'Pikachu', index: 25 },
+    { name: 'Bulbasaur', index: 1 },
+    { name: 'Charmander', index: 4 },
+    { name: 'Squirtle', index: 7 },
+    { name: 'Jigglypuff', index: 39 },
+    { name: 'Gengar', index: 94 },
+    { name: 'Mewtwo', index: 150 },
+    { name: 'Mew', index: 151 },
+    { name: 'Charizard', index: 6 },
+    { name: 'Blastoise', index: 9 },
+    { name: 'Venusaur', index: 3 },
+];
+
+const Demo = () => {
+    const pokemonsCookie = useCookie('pokemon', POKEMONS[0]);
+    const cookies = useCookies<{ name: string, id: number }>();
+
+    return (
+        <div>
+            <div>Cookies</div>
+            <pre>{JSON.stringify(cookies.value, null, 2)}</pre>
+
+            <button onClick={() => pokemonsCookie.set(POKEMONS[Math.floor(Math.random() * POKEMONS.length)])}>
+                Change user
+            </button>
+            <button onClick={cookies.clear}>
+                Clear
+            </button>
+        </div>
+    );
+};
+
+export default Demo;

packages/core/src/hooks/useCookies/useCookies.ts

@@ -0,0 +1,79 @@
+import { useEffect, useState } from 'react';
+
+import type { RemoveCookieParams, SetCookieParams } from '../useCookie/useCookie';
+
+import { COOKIE_EVENT, dispatchCookieEvent, removeCookie, setCookie } from '../useCookie/useCookie';
+
+export const getParsedCookies = () =>
+  Object.fromEntries(
+    document.cookie.split('; ').map((cookie) => {
+      const [key, ...value] = cookie.split('=');
+      const decodedValue = decodeURIComponent(value.join('='));
+      try {
+        return [key, JSON.parse(decodedValue)];
+      } catch {
+        return [key, decodedValue];
+      }
+    })
+  );
+
+export const clearCookies = () => {
+  document.cookie.split('; ').forEach((cookie) => {
+    const [name] = cookie.split('=');
+    removeCookie(name);
+  });
+};
+
+const setCookieItem = (key: string, value: any, options?: SetCookieParams) => {
+  setCookie(key, value, options);
+  dispatchCookieEvent();
+};
+
+const removeCookieItem = (key: string, options?: RemoveCookieParams) => {
+  removeCookie(key, options);
+  dispatchCookieEvent();
+};
+
+const clearCookieItems = () => {
+  clearCookies();
+  dispatchCookieEvent();
+};
+
+/**
+ * @name useCookies
+ * @description - Hook that manages cookie values
+ * @category Browser
+ *
+ * @overload
+ * @template {object} Value The type of the cookie values
+ * @param {string} key The key of the cookie
+ * @returns {UseCookieReturn<Value>} The value and the set function
+ *
+ * @example
+ * const { value, set, remove, getAll, clear } = useCookies();
+ */
+export const useCookies = <Value>() => {
+  const [value, setValue] = useState<Value>(
+    typeof window !== 'undefined' ? (getParsedCookies() as Value) : ({} as Value)
+  );
+
+  useEffect(() => {
+    const onChange = () => setValue(getParsedCookies() as Value);
+
+    window.addEventListener(COOKIE_EVENT, onChange);
+    return () => {
+      window.removeEventListener(COOKIE_EVENT, onChange);
+    };
+  }, []);
+
+  const set = (key: string, value: Value, options?: SetCookieParams) => {
+    if (value === null) return removeCookieItem(key);
+    setCookieItem(key, value, options);
+  };
+
+  const remove = (key: string, options?: RemoveCookieParams) => removeCookieItem(key, options);
+  const getAll = () => getParsedCookies();
+  const clear = () => clearCookieItems();
+
+  return { value, set, remove, getAll, clear };
+};

packages/docs/app/.vitepress/config.mts

@@ -89,7 +89,7 @@ export default async () => {
             {
               text: 'Functions',
               items: [
-                { text: 'Get Started', link: '/getting-started' },
+                { text: 'Get Started', link: '/introduction' },
                 { text: 'Installation', link: '/installation' },
                 { text: 'Hooks', link: '/functions/hooks/useAsync.html' }
               ]
@@ -98,15 +98,12 @@ export default async () => {
           sidebar: [
             {
               text: 'Getting started',
-              link: '/getting-started'
-            },
-            {
-              text: 'Installation',
-              link: '/installation'
-            },
-            {
-              text: 'Cli',
-              link: '/cli'
+              items: [
+                { text: 'Introduction', link: '/introduction' },
+                { text: 'Installation', link: '/installation' },
+                { text: 'Config', link: '/config' },
+                { text: 'CLI', link: '/cli' }
+              ]
             },
             {
               text: 'Installation',

packages/docs/app/cli.md

@@ -1 +1,56 @@
-# 🚧 In progress
+# CLI
+
+Use the CLI to add hooks to your project with [useverse](https://www.npmjs.com/package/useverse).
+
+## init
+
+Use the `init` command to initialize configuration and dependencies for a new project.
+
+The `init` command installs dependencies, adds configures [`reactuse.json`](./config.html).
+
+```bash
+npx useverse@latest init
+```
+
+## add
+
+Use the `add` command to add hooks and dependencies to your project.
+
+```bash
+npx useverse@latest add [hook]
+```
+
+You will be presented with a list of hooks to choose from:
+
+```bash
+Which components would you like to add? › Space to select. A to toggle all.
+Enter to submit.
+
+◯  useActiveElement
+◯  useAsync
+◯  useBattery
+◯  useBluetooth
+◯  useBoolean
+◯  useBreakpoints
+◯  useBrowserLanguage
+◯  useClickOutside
+◯  useClipboard
+◯  useConst
+```
+
+### Options
+
+```bash
+Usage: useverse add [options] [hooks...]
+
+add a hook to your project
+
+Arguments:
+  components the components to add or a url to the component.
+
+Options:
+  -o, --overwrite    overwrite existing files. (default: false)
+  -c, --cwd          the working directory. defaults to the current directory.
+  -a, --all          add all available hooks. (default: false)
+  -h, --help         display help for command
+```

packages/docs/app/config.md

@@ -0,0 +1 @@
+# 🚧 In progress

packages/docs/app/index.md

@@ -9,7 +9,7 @@ hero:
   actions:
     - theme: brand
       text: Get Started
-      link: /getting-started
+      link: /introduction
     - theme: alt
       text: View on GitHub
       link: https://github.com/siberiacancode/reactuse

packages/docs/app/installation.md

@@ -30,7 +30,7 @@ bun add @siberiacancode/reactuse
 
 ## Inject code to your framework
 
-How to install dependencies and structure your app with [useverse](https://www.npmjs.com/package/useverse).
+How to install dependencies and structure your app with [cli](./cli.md) and [useverse](https://www.npmjs.com/package/useverse).
 
 <div class="flex flex-col gap-4 md:flex-row">
   <a href="./frameworks/vite" target="_blank" class="w-full !no-underline">