docs: Automated examples generation + hooks count.

Author: Blankeos

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

@@ -1,11 +1,29 @@
 ```tsx
 import { useClickOutside } from 'bagon-hooks';
 
-export function App() {
+import { createSignal, Show } from 'solid-js';
+
+export function UseClickOutsideExample() {
   const ref = useClickOutside(() => {
-    console.log('Clicked outside!');
+    setClicked(true);
+
+    setTimeout(() => {
+      setClicked(false);
+    }, 500);
   });
+  const [clicked, setClicked] = createSignal(false);
 
-  return <div ref={ref}>Click outside of me.</div>;
+  return (
+    <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>
+  );
 }
 ```

dev/components/examples/use-clipboard/use-clipboard.code.mdx

@@ -1,15 +1,31 @@
 ```tsx
-const { copied, copy, reset } = useClipboard();
+import { useClipboard } from 'bagon-hooks';
 
-return (
-    <div>
-        <button onClick={() => copy('Bagon is awesome!')}>
-            <Show
-                when={copied()}
-                fallback={<div>Copy</div>}
-                children={<div>Copied!</div>}
-            />
-        </button>
+import { Show } from 'solid-js';
+
+export function UseClipboardExample() {
+  const { copied, copy, reset } = useClipboard();
+
+  return (
+    <div class="flex h-full w-full flex-col items-center justify-center gap-3 rounded-md border p-3 py-10 text-center text-sm">
+      <span class="text-center">Bagon is awesome!</span>
+      <button class="transition active:scale-90" onClick={() => copy('Bagon is awesome!')}>
+        <Show
+          when={copied()}
+          fallback={
+            <div class="flex items-center gap-x-1">
+              <IconCopy class="h-8 w-8" />
+              Copy
+            </div>
+          }
+          children={
+            <div class="flex items-center gap-x-1 text-green-500">
+              <IconCheck class="h-8 w-8" /> Copied!
+            </div>
+          }
+        />
+      </button>
     </div>
-);
+  );
+}
 ```

dev/components/examples/use-color-scheme/use-color-scheme.code.mdx

@@ -1,5 +1,21 @@
 ```tsx
-const colorScheme = useColorScheme();
+import { useColorScheme } from 'bagon-hooks';
 
-return <>Your system color scheme is: {colorScheme()}</>;
+export function UseColorSchemeExample() {
+  const colorScheme = useColorScheme();
+
+  return (
+    <div class="flex h-full w-full items-center justify-center gap-x-1 rounded-md border p-3 py-10 text-center text-sm">
+      <div
+        class="rounded-md border px-4 py-2 text-sm"
+        style={{
+          background: colorScheme() === 'dark' ? '#000' : '#fff',
+          color: colorScheme() ? '#fff' : '#000',
+        }}
+      >
+        Your system color scheme is: {colorScheme()}
+      </div>
+    </div>
+  );
+}
 ```

dev/components/examples/use-counter/use-counter.code.mdx

@@ -1,15 +1,30 @@
 ```tsx
 import { useCounter } from 'bagon-hooks';
 
-export function App() {
+export function UseCounterExample() {
   const [count, { decrement, increment, reset, set }] = useCounter(5, { min: 1, max: 10 });
+
   return (
-    <div>
-      {count()}
-      <button onClick={decrement}>-</button>
-      <button onClick={increment}>+</button>
-      <button onClick={reset}>Reset</button>
-      <button onClick={() => set(Math.floor(Math.random() * 10))}>Set (To Random)</button>
+    <div class="flex h-full w-full flex-col items-center justify-center gap-5 gap-x-1 rounded-md border p-3 py-10 text-center">
+      <span>{count()}</span>
+
+      <div class="flex gap-x-2 text-sm">
+        <button class="rounded-md border p-1 px-1.5 transition active:scale-90" onClick={decrement}>
+          -
+        </button>
+        <button class="rounded-md border p-1 px-1.5 transition active:scale-90" onClick={increment}>
+          +
+        </button>
+        <button class="rounded-md border p-1 px-1.5 transition active:scale-90" onClick={reset}>
+          Reset
+        </button>
+        <button
+          class="rounded-md border p-1 px-1.5 transition active:scale-90"
+          onClick={() => set(Math.floor(Math.random() * 10))}
+        >
+          Set (To Random)
+        </button>
+      </div>
     </div>
   );
 }

dev/components/examples/use-debounced-callback/use-debounced-callback.code.mdx

@@ -1,26 +1,55 @@
 ```tsx
-const [search, setSearch] = createSignal('');
-const [searchResults, setSearchResults] = createSignal<{ id: number; title: string }[]>([]);
-const [loading, setLoading] = createSignal(false);
+import { useDebouncedCallback } from 'bagon-hooks';
 
-const debouncedSearch = useDebouncedCallback(async (query: string) => {
+import { createSignal, For, JSX, Show } from 'solid-js';
+
+function getSearchResults(query: string): Promise<{ id: number; title: string }[]> {
+  return new Promise(resolve => {
+    setTimeout(() => {
+      resolve(
+        query.trim() === ''
+          ? []
+          : Array(5)
+              .fill(0)
+              .map((_, index) => ({ id: index, title: `${query} ${index + 1}` })),
+      );
+    }, 1000);
+  });
+}
+
+export function UseDebouncedCallbackExample() {
+  const [search, setSearch] = createSignal('');
+  const [searchResults, setSearchResults] = createSignal<{ id: number; title: string }[]>([]);
+  const [loading, setLoading] = createSignal(false);
+
+  const debouncedSearch = useDebouncedCallback(async (query: string) => {
     setLoading(true);
     setSearchResults(await getSearchResults(query));
     setLoading(false);
-}, 500);
+  }, 500);
 
-const handleInput: JSX.EventHandler<HTMLInputElement, InputEvent> = event => {
+  const handleInput: JSX.EventHandler<HTMLInputElement, InputEvent> = event => {
     setSearch(event.currentTarget.value);
     debouncedSearch(event.currentTarget.value);
-};
+  };
+
+  return (
+    <div class="flex h-full w-full flex-col items-center justify-center gap-x-1 gap-y-2 rounded-md border p-3 py-10 text-center text-sm">
+      <input
+        value={search()}
+        onInput={handleInput}
+        class="rounded-md border p-2"
+        placeholder="Search..."
+      />
 
-return (
-    <div>
-        <input type="text" value={search} onInput={handleInput} />
-        <Show when={loading()}
-            children={<div>Loading...</div>}
-            fallback={<For each={searchResults()}>{result => <div>{result.title}</div>}</For>}
-        />
-    </div>;
-)
+      <Show
+        when={loading()}
+        children={<>Loading...</>}
+        fallback={
+          <For each={searchResults()}>{result => <div class="text-xs">{result.title}</div>}</For>
+        }
+      />
+    </div>
+  );
+}
 ```

dev/components/examples/use-debounced-signal/use-debounced-signal.code.mdx

@@ -1,9 +1,18 @@
 ```tsx
-const [signal, setSignal] = useDebouncedSignal('', 500);
-return (
-  <>
-    <input value={signal()} onInput={e => setSignal(e.currentTarget.value)} />
-    <span>State: {JSON.stringify(signal())}</span>
-  </>
-);
+import { useDebouncedSignal } from 'bagon-hooks';
+
+export function UseDebouncedSignalExample() {
+  const [signal, setSignal] = useDebouncedSignal('', 500);
+
+  return (
+    <div class="flex h-full w-full flex-col items-center justify-center gap-x-1 gap-y-2 rounded-md border p-3 py-10 text-center text-sm">
+      <input
+        value={signal()}
+        onInput={e => setSignal(e.currentTarget.value)}
+        class="rounded-md border p-2"
+      />
+      <span>State: {JSON.stringify(signal())}</span>
+    </div>
+  );
+}
 ```

dev/components/examples/use-debounced-value/use-debounced-value.code.mdx

@@ -1,9 +1,25 @@
 ```tsx
-const id = useId();
+import { useDebouncedValue } from 'bagon-hooks';
 
-return (
-    <div>
-        Random ID: {id()}
-    </div>;
-)
+import { createSignal } from 'solid-js';
+
+export function UseDebouncedValueExample() {
+  const [signal, setSignal] = createSignal('');
+  const [value, cancel] = useDebouncedValue(signal, 500);
+
+  return (
+    <div class="flex h-full w-full flex-col items-center justify-center gap-x-1 gap-y-2 rounded-md border p-3 py-10 text-center text-sm">
+      <input
+        value={signal()}
+        onInput={e => setSignal(e.currentTarget.value)}
+        class="rounded-md border p-2"
+      />
+      <div class="flex items-center gap-x-2">
+        <span>State: {JSON.stringify(signal())}</span>
+        <span>|</span>
+        <span>Value: {JSON.stringify(value())}</span>
+      </div>
+    </div>
+  );
+}
 ```

dev/components/examples/use-did-update/use-did-update.code.mdx

@@ -1,13 +1,30 @@
 ```tsx
-const [signal, setSignal] = createSignal(0);
+import { useDidUpdate } from 'bagon-hooks';
 
-useDidUpdate(() => {
+import { createSignal } from 'solid-js';
+
+export function UseDidUpdateExample() {
+  const [signal, setSignal] = createSignal(0);
+
+  useDidUpdate(() => {
     console.log('Did Update', signal());
-}, signal);
+  }, signal);
 
-return (
-    <div>
-        <button onClick={setSignal(prev => prev + 1)}>Simulate Update {signal()}</button>
-    </div>;
-)
+  return (
+    <div class="flex h-full w-full flex-col items-center justify-center gap-x-1 gap-y-2 rounded-md border p-3 py-10 text-center text-sm">
+      <p class="max-w-xs text-center text-xs">
+        This logs "Did Update {signal() === 0 ? 'X' : signal()}" to the console. Notice that it
+        doesn't log "Did Update 0" since it happens on mount.
+      </p>
+      <button
+        class="rounded-md bg-primary p-2 text-white transition active:scale-95"
+        onClick={() => {
+          setSignal(signal() + 1);
+        }}
+      >
+        Simulate an Update {signal()}
+      </button>
+    </div>
+  );
+}
 ```

dev/components/examples/use-disclosure/use-disclosure.code.mdx

@@ -0,0 +1,7 @@
+```tsx
+export function UseDisclosureExample() {
+  return (
+    <div class="flex h-full w-full items-center justify-center gap-x-1 rounded-md border p-3 py-10 text-center text-sm"></div>
+  );
+}
+```

dev/components/examples/use-disclosure/use-disclosure.example.tsx

@@ -0,0 +1,19 @@
+import { ExampleBase } from '../example-base';
+import Code from './use-disclosure.code.mdx';
+
+import { useMDXComponents } from 'solid-jsx';
+
+export function UseDisclosureExample() {
+  // @ts-ignore
+  const components: any = useMDXComponents();
+
+  return (
+    <ExampleBase
+      title="useDisclosure"
+      description="A hook to manage state for dialogs, modals, etc."
+      code={<Code components={components} />}
+    >
+            <div class="flex h-full w-full items-center justify-center gap-x-1 rounded-md border p-3 py-10 text-center text-sm"></div>
+    </ExampleBase>
+  );
+}