main 🧊 add to index

Author: debabin

Diff for: packages/core/src/bundle/hooks/index.js

@@ -10,6 +10,7 @@ export * from './useClipboard/useClipboard';
 export * from './useConst/useConst';
 export * from './useConst/useConst';
 export * from './useCookie/useCookie';
+export * from './useCookies/useCookies';
 export * from './useCounter/useCounter';
 export * from './useCssVar/useCssVar';
 export * from './useDebounceCallback/useDebounceCallback';

Diff for: packages/core/src/bundle/hooks/usePaint/helpers/Paint.js

@@ -1,88 +1,88 @@
 export class Pointer {
-    x;
-    y;
-    constructor(x, y) {
-        this.x = x;
-        this.y = y;
-    }
-    update(point) {
-        this.x = point.x;
-        this.y = point.y;
-    }
-    getDifferenceTo(point) {
-        return new Pointer(this.x - point.x, this.y - point.y);
-    }
-    getDistanceTo(point) {
-        const diff = this.getDifferenceTo(point);
-        return Math.sqrt(diff.x ** 2 + diff.y ** 2);
-    }
-    getAngleTo(point) {
-        const diff = this.getDifferenceTo(point);
-        return Math.atan2(diff.y, diff.x);
-    }
-    equalsTo(point) {
-        return this.x === point.x && this.y === point.y;
-    }
-    moveByAngle(
+  x;
+  y;
+  constructor(x, y) {
+    this.x = x;
+    this.y = y;
+  }
+  update(point) {
+    this.x = point.x;
+    this.y = point.y;
+  }
+  getDifferenceTo(point) {
+    return new Pointer(this.x - point.x, this.y - point.y);
+  }
+  getDistanceTo(point) {
+    const diff = this.getDifferenceTo(point);
+    return Math.sqrt(diff.x ** 2 + diff.y ** 2);
+  }
+  getAngleTo(point) {
+    const diff = this.getDifferenceTo(point);
+    return Math.atan2(diff.y, diff.x);
+  }
+  equalsTo(point) {
+    return this.x === point.x && this.y === point.y;
+  }
+  moveByAngle(
     // The angle in radians
-    angle, 
+    angle,
     // How much the point should be moved
-    distance) {
-        // Rotate the angle based on the browser coordinate system ([0,0] in the top left)
-        const angleRotated = angle + Math.PI / 2;
-        this.x += Math.sin(angleRotated) * distance;
-        this.y -= Math.cos(angleRotated) * distance;
-        return this;
-    }
+    distance
+  ) {
+    // Rotate the angle based on the browser coordinate system ([0,0] in the top left)
+    const angleRotated = angle + Math.PI / 2;
+    this.x += Math.sin(angleRotated) * distance;
+    this.y -= Math.cos(angleRotated) * distance;
+    return this;
+  }
 }
 export class Paint {
-    pointer;
-    brush;
-    radius;
-    smooth = false;
-    points = [];
-    lines = [];
-    constructor({ x, y, radius, smooth }) {
-        this.smooth = smooth;
-        this.pointer = new Pointer(x, y);
-        this.brush = new Pointer(x, y);
-        this.radius = radius;
-        this.points = [];
-        this.lines = [];
-    }
-    getBrushCoordinates() {
-        return {
-            x: this.brush.x,
-            y: this.brush.y
-        };
-    }
-    getPointerCoordinates() {
-        return {
-            x: this.pointer.x,
-            y: this.pointer.y
-        };
+  pointer;
+  brush;
+  radius;
+  smooth = false;
+  points = [];
+  lines = [];
+  constructor({ x, y, radius, smooth }) {
+    this.smooth = smooth;
+    this.pointer = new Pointer(x, y);
+    this.brush = new Pointer(x, y);
+    this.radius = radius;
+    this.points = [];
+    this.lines = [];
+  }
+  getBrushCoordinates() {
+    return {
+      x: this.brush.x,
+      y: this.brush.y
+    };
+  }
+  getPointerCoordinates() {
+    return {
+      x: this.pointer.x,
+      y: this.pointer.y
+    };
+  }
+  update(point) {
+    if (this.pointer.equalsTo(point)) return false;
+    this.pointer.update(point);
+    if (!this.smooth) {
+      this.brush.update(point);
+      this.points.push(this.getBrushCoordinates());
+      return true;
     }
-    update(point) {
-        if (this.pointer.equalsTo(point))
-            return false;
-        this.pointer.update(point);
-        if (!this.smooth) {
-            this.brush.update(point);
-            this.points.push(this.getBrushCoordinates());
-            return true;
-        }
-        const distance = this.pointer.getDistanceTo(this.brush);
-        const angle = this.pointer.getAngleTo(this.brush);
-        const isOutside = Math.round((distance - this.radius) * 10) / 10 > 0;
-        if (isOutside) {
-            const angleRotated = angle + Math.PI / 2;
-            this.brush.update({
-                x: this.brush.x + Math.sin(angleRotated) * (distance - this.radius),
-                y: this.brush.y - Math.cos(angleRotated) * (distance - this.radius)
-            });
-            this.points.push(this.getBrushCoordinates());
-            return true;
-        }
-        return false;
+    const distance = this.pointer.getDistanceTo(this.brush);
+    const angle = this.pointer.getAngleTo(this.brush);
+    const isOutside = Math.round((distance - this.radius) * 10) / 10 > 0;
+    if (isOutside) {
+      const angleRotated = angle + Math.PI / 2;
+      this.brush.update({
+        x: this.brush.x + Math.sin(angleRotated) * (distance - this.radius),
+        y: this.brush.y - Math.cos(angleRotated) * (distance - this.radius)
+      });
+      this.points.push(this.getBrushCoordinates());
+      return true;
     }
+    return false;
+  }
 }

Diff for: packages/core/src/bundle/utils/helpers/cookie.js

@@ -1,26 +1,22 @@
-export const getCookies = () => Object.fromEntries(document.cookie.split('; ').map((cookie) => {
-    const [key, ...value] = cookie.split('=');
-    const decodedValue = decodeURIComponent(value.join('='));
-    return [key, decodedValue];
-}));
+export const getCookies = () =>
+  Object.fromEntries(
+    document.cookie.split('; ').map((cookie) => {
+      const [key, ...value] = cookie.split('=');
+      const decodedValue = decodeURIComponent(value.join('='));
+      return [key, decodedValue];
+    })
+  );
 export const removeCookie = (key, options = {}) => {
-    document.cookie = `${encodeURIComponent(key)}=; expires=Thu, 01 Jan 1970 00:00:00 GMT${options.path ? `; path=${options.path}` : ''}${options.domain ? `; domain=${options.domain}` : ''}${options.maxAge ? `; max-age=0` : ''}${options.expires ? `; expires=Thu, 01 Jan 1970 00:00:00 GMT` : ''}${options.secure ? `; secure` : ''}${options.sameSite ? `; samesite=${options.sameSite}` : ''}`;
+  document.cookie = `${encodeURIComponent(key)}=; expires=Thu, 01 Jan 1970 00:00:00 GMT${options.path ? `; path=${options.path}` : ''}${options.domain ? `; domain=${options.domain}` : ''}${options.maxAge ? `; max-age=0` : ''}${options.expires ? `; expires=Thu, 01 Jan 1970 00:00:00 GMT` : ''}${options.secure ? `; secure` : ''}${options.sameSite ? `; samesite=${options.sameSite}` : ''}`;
 };
 export const setCookie = (key, value, options = {}) => {
-    const cookie = [`${encodeURIComponent(key)}=${encodeURIComponent(value)}`];
-    if (options.path)
-        cookie.push(`path=${options.path}`);
-    if (options.domain)
-        cookie.push(`domain=${options.domain}`);
-    if (typeof options.maxAge === 'number')
-        cookie.push(`max-age=${options.maxAge}`);
-    if (options.expires)
-        cookie.push(`expires=${options.expires.toUTCString()}`);
-    if (options.secure)
-        cookie.push(`secure`);
-    if (options.httpOnly)
-        cookie.push(`httpOnly`);
-    if (options.sameSite)
-        cookie.push(`samesite=${options.sameSite}`);
-    document.cookie = cookie.join('; ');
+  const cookie = [`${encodeURIComponent(key)}=${encodeURIComponent(value)}`];
+  if (options.path) cookie.push(`path=${options.path}`);
+  if (options.domain) cookie.push(`domain=${options.domain}`);
+  if (typeof options.maxAge === 'number') cookie.push(`max-age=${options.maxAge}`);
+  if (options.expires) cookie.push(`expires=${options.expires.toUTCString()}`);
+  if (options.secure) cookie.push(`secure`);
+  if (options.httpOnly) cookie.push(`httpOnly`);
+  if (options.sameSite) cookie.push(`samesite=${options.sameSite}`);
+  document.cookie = cookie.join('; ');
 };

Diff for: packages/core/src/hooks/index.ts

@@ -10,6 +10,7 @@ export * from './useClipboard/useClipboard';
 export * from './useConst/useConst';
 export * from './useConst/useConst';
 export * from './useCookie/useCookie';
+export * from './useCookies/useCookies';
 export * from './useCounter/useCounter';
 export * from './useCssVar/useCssVar';
 export * from './useDebounceCallback/useDebounceCallback';

Diff for: packages/core/src/hooks/useBluetooth/useBluetooth.demo.tsx

@@ -45,7 +45,7 @@ const Demo = () => {
       </button>
       {error && (
         <p>
-          Errors: <code className='block p-5 whitespace-pre'>{error}</code>
+          Errors: <code className='block whitespace-pre p-5'>{error}</code>
         </p>
       )}
     </>

Diff for: packages/core/src/hooks/useCookies/useCookies.demo.tsx

@@ -2,36 +2,36 @@ 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 },
+  { 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 }>();
+  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>
+  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>
-    );
+      <button
+        onClick={() => pokemonsCookie.set(POKEMONS[Math.floor(Math.random() * POKEMONS.length)])}
+      >
+        Change user
+      </button>
+      <button onClick={cookies.clear}>Clear</button>
+    </div>
+  );
 };
 
-export default Demo;
+export default Demo;

Diff for: packages/core/src/hooks/usePointerLock/usePointerLock.demo.tsx

@@ -36,9 +36,9 @@ const Demo = () => {
   );
 
   return (
-    <div className='flex h-32 items-center justify-center perspective-normal'>
+    <div className='perspective-normal flex h-32 items-center justify-center'>
       <div
-        className='relative h-[100px] w-[100px] cursor-all-scroll transform-3d'
+        className='transform-3d relative h-[100px] w-[100px] cursor-all-scroll'
         style={{ transform: `rotateY(calc(-45 * 1deg))` }}
         onMouseDownCapture={lock}
         onMouseUpCapture={unlock}

Diff for: packages/core/src/hooks/useScroll/useScroll.demo.tsx

@@ -21,11 +21,11 @@ const Demo = () => {
       <div className='flex gap-10'>
         <div ref={scrollRef} className='h-[300px] w-full overflow-scroll rounded-lg bg-zinc-800'>
           <div className='relative h-[400px] w-[500px]'>
-            <div className='absolute top-0 left-0 bg-zinc-600 p-1'>TopLeft</div>
+            <div className='absolute left-0 top-0 bg-zinc-600 p-1'>TopLeft</div>
             <div className='absolute bottom-0 left-0 bg-zinc-600 p-1'>BottomLeft</div>
-            <div className='absolute top-0 right-0 bg-zinc-600 p-1'>TopRight</div>
-            <div className='absolute right-0 bottom-0 bg-zinc-600 p-1'>BottomRight</div>
-            <div className='absolute top-1/3 left-1/3 bg-zinc-600 p-1'>Scroll Me</div>
+            <div className='absolute right-0 top-0 bg-zinc-600 p-1'>TopRight</div>
+            <div className='absolute bottom-0 right-0 bg-zinc-600 p-1'>BottomRight</div>
+            <div className='absolute left-1/3 top-1/3 bg-zinc-600 p-1'>Scroll Me</div>
           </div>
         </div>
 

Diff for: packages/core/src/hooks/useScrollIntoView/useScrollIntoView.demo.tsx

@@ -6,7 +6,7 @@ const Demo = () => {
   return (
     <div
       ref={scrollIntoView.ref}
-      className='m-2 w-full rounded-md border border-gray-300 p-15 text-center'
+      className='p-15 m-2 w-full rounded-md border border-gray-300 text-center'
     >
       <p>Scroll into view block</p>
       <p>

Diff for: packages/docs/app/.vitepress/theme/global.css

@@ -1,14 +1,13 @@
 @import 'tailwindcss';
 @custom-variant dark (&:where(.dark, .dark *));
 
-
 :root {
   --vp-home-hero-name-color: transparent;
-  --vp-home-hero-name-background: -webkit-linear-gradient(120deg, #61DAFB, #205DAE);
-  
+  --vp-home-hero-name-background: -webkit-linear-gradient(120deg, #61dafb, #205dae);
+
   --vp-c-bg: #ffffff;
 
-  --vp-c-brand-1: #61DAFB;
+  --vp-c-brand-1: #61dafb;
   --vp-c-brand-2: #4ca8c6;
   --vp-c-brand-3: #5fc6e9;
 }

Diff for: packages/docs/src/components/api.vue

@@ -38,7 +38,9 @@ props.apiParameters.forEach((parameter, index) => {
 
 <template>
   <div v-for="group in groups" :key="group.id">
-    <h3 v-if="group.parameters.length">Parameters</h3>
+    <h3 v-if="group.parameters.length">
+      Parameters
+    </h3>
     <table v-if="group.parameters.length">
       <thead>
         <tr>

Diff for: packages/docs/src/components/demo.vue

@@ -30,7 +30,7 @@ onUnmounted(() => {
 
 <template>
   <div class="relative mb-2 rounded-lg bg-[var(--vp-code-block-bg)] p-6">
-    <p class="absolute top-0 right-2 text-xs font-medium transition-colors">
+    <p class="absolute right-2 top-0 text-xs font-medium transition-colors">
       <a :href="sourceLink" target="_blank">source</a>
     </p>
     <div ref="demoRef" />