feat: Finished many examples for each hooks + code examples.

Author: Blankeos

.prettierrc

@@ -3,6 +3,7 @@
   "tabWidth": 2,
   "printWidth": 100,
   "semi": true,
+  "plugins": ["prettier-plugin-tailwindcss"],
   "singleQuote": true,
   "useTabs": false,
   "arrowParens": "avoid",

bun.lockb

@@ -0,0 +1,41 @@
+import { IconCode } from 'dev/icons';
+import { createSignal, FlowProps, JSX, Show } from 'solid-js';
+
+type ExampleBaseProps = {
+  title: JSX.Element;
+  description: string;
+  class?: string;
+  code?: JSX.Element;
+};
+
+export function ExampleBase(props: FlowProps<ExampleBaseProps>) {
+  const [viewing, setViewing] = createSignal<'code' | 'result'>('result');
+
+  return (
+    <div class="flex h-full max-h-[500px] w-full flex-col items-start gap-y-5 overflow-hidden rounded-xl border bg-white p-5">
+      <div class="flex w-full items-center justify-between">
+        <h2 class="text-2xl font-bold">{props.title}</h2>
+        <button
+          class="rounded-md border p-2 transition active:scale-95"
+          onClick={() => {
+            setViewing(viewing() === 'code' ? 'result' : 'code');
+          }}
+        >
+          <IconCode class="h-5 w-5" />
+        </button>
+      </div>
+      <p>{props.description}</p>
+
+      <Show when={viewing() === 'result'}>
+        <div class="w-full flex-1 rounded-md">{props.children}</div>
+      </Show>
+
+      <div
+        style={{ display: viewing() === 'code' ? 'block' : 'none' }}
+        class="w-full flex-1 overflow-hidden rounded-md border bg-[#1c1e28] p-3 text-white"
+      >
+        {props.code}
+      </div>
+    </div>
+  );
+}

dev/app.css

@@ -0,0 +1,10 @@
+```tsx
+const ref = useClickOutside(() => {
+    console.log('Clicked outside!');
+});
+
+return (
+    <div ref={ref}>
+    </div>;
+)
+```

dev/components/examples/example-base.tsx

@@ -0,0 +1,39 @@
+import { useClickOutside } from 'src';
+import { ExampleBase } from '../example-base';
+import Code from './use-click-outside.code.mdx';
+
+import { useMDXComponents } from 'solid-jsx';
+import { createSignal, Show } from 'solid-js';
+
+export function UseClickOutsideExample() {
+  const ref = useClickOutside(() => {
+    setClicked(true);
+
+    setTimeout(() => {
+      setClicked(false);
+    }, 500);
+  });
+  const [clicked, setClicked] = createSignal(false);
+
+  // @ts-ignore
+  const components: any = useMDXComponents();
+
+  return (
+    <ExampleBase
+      title="useClickOutside"
+      description="Detects clicks outside a ref"
+      code={<Code components={components} />}
+    >
+      <div class="flex h-full w-full flex-1 items-center justify-center rounded-md border p-3 py-10">
+        <div
+          class={`select-none rounded-full border bg-neutral-50 p-2 text-xs transition ${clicked() ? 'scale-95' : ''}`}
+          ref={ref}
+        >
+          <Show when={clicked()} fallback={'No detections'}>
+            You clicked outside!
+          </Show>
+        </div>
+      </div>
+    </ExampleBase>
+  );
+}

dev/components/examples/use-click-outside/use-click-outside.code.mdx

@@ -0,0 +1,9 @@
+```tsx
+const [ref, rectStore] = useElementSize();
+
+return (
+    <textarea ref={ref}>
+        {JSON.stringify(rectStore, null, 2)}
+    </textarea>;
+)
+```

dev/components/examples/use-click-outside/use-click-outside.example.tsx

@@ -0,0 +1,34 @@
+import { useElementSize, useIdle, useNetwork, useOs, useResizeObserver } from 'src';
+import { ExampleBase } from '../example-base';
+import Code from './use-element-size.code.mdx';
+
+import { useMDXComponents } from 'solid-jsx';
+
+export function UseElementSizeExample() {
+  const { ref, height, width } = useElementSize();
+
+  // @ts-ignore
+  const components: any = useMDXComponents();
+
+  return (
+    <ExampleBase
+      title="useElementSize"
+      description="Returns width and height of a resizable element. An abstraction over useResizeObserver."
+      code={<Code components={components} />}
+    >
+      <div class="flex h-full w-full flex-col items-center justify-center gap-3 rounded-md border p-3 py-10 text-start">
+        <div class="flex flex-col items-center">
+          <span>Width: {width().toFixed(2)}</span>
+          <span>Height: {height().toFixed(2)}</span>
+        </div>
+
+        <div class="relative grid flex-1 place-items-center overflow-hidden">
+          <textarea ref={ref} class="h-20 w-20 resize rounded-md border"></textarea>
+          <div class="pointer-events-none absolute inset-0 grid place-items-center truncate text-center text-xs text-neutral-400">
+            Resize Me
+          </div>
+        </div>
+      </div>
+    </ExampleBase>
+  );
+}

dev/components/examples/use-element-size/use-element-size.code.mdx

@@ -0,0 +1,7 @@
+```tsx
+useHotkeys([
+  ['mod+a', () => alert('Ctrl+Shift+A pressed')],
+  ['mod+Enter', () => alert('Alt+Shift+A pressed')],
+  ['shift+g', () => alert('Alt+A pressed')],
+]);
+```

dev/components/examples/use-element-size/use-element-size.example.tsx

@@ -0,0 +1,63 @@
+import { useHotkeys, useOs } from 'src';
+import { ExampleBase } from '../example-base';
+import Code from './use-hotkeys.code.mdx';
+
+import { useMDXComponents } from 'solid-jsx';
+import { createSignal, FlowProps, VoidProps } from 'solid-js';
+
+export function UseHotkeysExample() {
+  const [activatedHotkey, setActivatedHotkey] = createSignal<-1 | 0 | 1 | 2>(-1);
+
+  let timeout: ReturnType<typeof window.setTimeout>;
+
+  function handleKeyPress(index: ReturnType<typeof activatedHotkey>) {
+    if (timeout) clearTimeout(timeout);
+
+    setActivatedHotkey(index);
+
+    timeout = setTimeout(() => {
+      setActivatedHotkey(-1);
+    }, 400);
+  }
+
+  useHotkeys([
+    ['mod+a', () => handleKeyPress(0)],
+    ['mod+Enter', () => handleKeyPress(1)],
+    ['shift+g', () => handleKeyPress(2)],
+  ]);
+
+  const os = useOs();
+
+  // @ts-ignore
+  const components: any = useMDXComponents();
+
+  return (
+    <ExampleBase
+      title="useHotkeys"
+      description="Handle hotkeys easily"
+      code={<Code components={components} />}
+    >
+      <div class="flex h-full w-full flex-wrap items-center justify-center gap-3 rounded-md border p-3 py-10 text-center">
+        <Key activated={activatedHotkey() === 0}>{os() === 'macos' ? 'cmd' : 'ctrl'} + a</Key>
+        <Key activated={activatedHotkey() === 1}>{os() === 'macos' ? 'cmd' : 'ctrl'} + Enter</Key>
+        <Key activated={activatedHotkey() === 2}>shift + g</Key>
+      </div>
+    </ExampleBase>
+  );
+}
+
+function Key(props: FlowProps<{ activated: boolean }>) {
+  return (
+    <div class="relative text-xs">
+      <div class="absolute inset-0 rounded-md bg-neutral-200 transition"></div>
+      <div
+        class="relative rounded-md border bg-neutral-50 px-2 py-1.5"
+        style={{
+          translate: props.activated ? '0px 0px' : '0px -5px',
+        }}
+      >
+        {props.children}
+      </div>
+    </div>
+  );
+}