Skip to content

Commit bd8a3c4

Browse files
octoperoctoper
committed
wip
1 parent 643d82a commit bd8a3c4

File tree

20 files changed

+1048
-797
lines changed

20 files changed

+1048
-797
lines changed

‎package.json‎

Lines changed: 10 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -14,23 +14,23 @@
1414
},
1515
"devDependencies": {
1616
"@builder.io/qwik": "^1.0.0",
17-
"@storybook/addon-essentials": "7.0.7",
18-
"@storybook/addon-links": "7.0.7",
19-
"@storybook/blocks": "7.0.7",
20-
"@storybook/builder-vite": "7.0.7",
21-
"@storybook/html": "7.0.7",
22-
"@storybook/html-vite": "7.0.7",
17+
"@storybook/addon-essentials": "7.0.9",
18+
"@storybook/addon-links": "7.0.9",
19+
"@storybook/blocks": "7.0.9",
20+
"@storybook/builder-vite": "7.0.9",
21+
"@storybook/html": "7.0.9",
22+
"@storybook/html-vite": "7.0.9",
2323
"@types/jsdom": "^21.1.1",
24-
"eslint": "^8.39.0",
24+
"eslint": "^8.40.0",
2525
"esno": "^0.16.3",
2626
"prettier": "^2.8.8",
2727
"rimraf": "^5.0.0",
28-
"storybook": "7.0.7",
28+
"storybook": "7.0.9",
2929
"storybook-framework-qwik": "0.2.0",
3030
"turbo": "^1.9.3",
3131
"typescript": "^5.0.4",
32-
"vite": "^4.3.3",
32+
"vite": "^4.3.5",
3333
"vite-plugin-dts": "^2.3.0",
34-
"vitest": "^0.30.1"
34+
"vitest": "^0.31.0"
3535
}
3636
}

‎packages/hooks/package.json‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
{
22
"name": "@qwiky/hooks",
3+
"version": "0.0.0",
34
"main": "./dist/index.qwik.mjs",
45
"qwik": "./dits/index.qwik.mjs",
56
"types": "./dist/types/index.d.ts",
@@ -27,7 +28,7 @@
2728
"lint:fix": "pnpm run lint --fix"
2829
},
2930
"peerDependencies": {
30-
"@builder.io/qwik": "1.0.0"
31+
"@builder.io/qwik": ">=1.0.0"
3132
},
3233
"devDependencies": {
3334
"@types/eslint": "8.37.0",

‎packages/hooks/src/index.ts‎

Lines changed: 10 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,15 @@
11
export * from './useActiveElement'
2-
export * from './useNetwork'
3-
export * from './useWindowScroll'
4-
export * from './useWindowSize'
5-
export * from './useWindowFocus'
6-
export * from './useIdle'
2+
export * from './useDocumentVisibility'
73
export * from './useHover'
4+
export * from './useIdle'
5+
export * from './useIntersectionObserver'
86
export * from './useLastChanged'
9-
export * from './useDocumentVisibility'
10-
export * from './useTitle'
11-
export * from './useTextSelection'
127
export * from './useMediaQuery'
13-
export * from './useIntersectionObserver'
148
export * from './useMouse'
9+
export * from './useNetwork'
10+
export * from './useOnline'
11+
export * from './useTextSelection'
12+
export * from './useTitle'
13+
export * from './useWindowFocus'
14+
export * from './useWindowScroll'
15+
export * from './useWindowSize'

‎packages/hooks/src/useIntersectionObserver/demo/index.stories.tsx‎

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
import { component$, useStylesScoped$, useSignal } from "@builder.io/qwik";
2+
import { useIntersectionObserver } from '../index'
3+
4+
import styles from './styles.css?inline';
5+
6+
const Test = component$(() => {
7+
useStylesScoped$(styles);
8+
const targetRef = useSignal<HTMLElement>()
9+
const rootRef = useSignal<HTMLElement>()
10+
const entry = useIntersectionObserver(targetRef, {
11+
root: rootRef,
12+
threshold: 1,
13+
})
14+
return (
15+
<div>
16+
<button>
17+
Pause
18+
</button>
19+
<div ref={rootRef} class="root">
20+
<p class="notice">
21+
Scroll me down!
22+
</p>
23+
<div ref={targetRef} class="target">
24+
<p>Hello World!</p>
25+
</div>
26+
</div>
27+
<div>
28+
<p>Is visible: {entry.value?.isIntersecting ? 'yes' : 'no'}</p>
29+
</div>
30+
</div>
31+
)
32+
})
33+
34+
export default {
35+
title: "Hooks",
36+
component: Test,
37+
};
38+
39+
export const UseIntersectionObserver = {
40+
name: "useIntersectionObserver",
41+
};

‎packages/hooks/src/useIntersectionObserver/demo/styles.css‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
.root {
2+
border: 2px dashed #ccc;
3+
height: 200px;
4+
margin: 2rem 1rem;
5+
overflow-y: scroll;
6+
}
7+
.notice {
8+
text-align: center;
9+
padding: 2em 0;
10+
margin-bottom: 300px;
11+
font-style: italic;
12+
font-size: 1.2rem;
13+
opacity: 0.8;
14+
}
15+
.target {
16+
border: 2px dashed black;
17+
padding: 10px;
18+
max-height: 150px;
19+
margin: 0 2rem 400px;
20+
}

‎packages/hooks/src/useIntersectionObserver/index.stories.tsx‎

Lines changed: 0 additions & 14 deletions
This file was deleted.

‎packages/hooks/src/useLastChanged/index.stories.tsx‎

Lines changed: 15 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,20 @@
1-
import { component$ } from "@builder.io/qwik";
1+
import { component$, useSignal } from "@builder.io/qwik";
2+
import { useLastChanged } from ".";
23

34
const Test = component$(() => {
4-
return <>Hello</>
5+
const test = useSignal("Hello");
6+
const lastChanged = useLastChanged(test);
7+
return (
8+
<>
9+
<div class="">
10+
<input type="text" class="rounded" placeholder='Type something' bind:value={test} />
11+
12+
<div class="mt-2">
13+
Last changed: <strong>{lastChanged.value}</strong>
14+
</div>
15+
</div>
16+
</>
17+
)
518
});
619

720
export default {

‎packages/hooks/src/useMediaQuery/index.stories.tsx‎

Lines changed: 9 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,15 @@
11
import { component$ } from "@builder.io/qwik";
2+
import { useMediaQuery } from ".";
23

34
const Test = component$(() => {
4-
return <>Hello</>
5+
const isLargeScreen = useMediaQuery('(min-width: 1024px)')
6+
const isPreferredDark = useMediaQuery('(prefers-color-scheme: dark)')
7+
return (
8+
<>
9+
<p>isLargeScreen: {isLargeScreen.value ? 'true' : 'false'}</p>
10+
<p>prefersDark: {isPreferredDark.value ? 'true' : 'false'}</p>
11+
</>
12+
)
513
});
614

715
export default {

‎packages/hooks/src/useMouse/index.stories.tsx‎

Lines changed: 13 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,18 @@
1-
import { component$ } from "@builder.io/qwik";
1+
import { component$, useSignal } from "@builder.io/qwik";
2+
import { useMouse } from ".";
23

34
const Test = component$(() => {
4-
return <>Hello</>
5+
const boundRef = useSignal<HTMLElement>();
6+
const { x, y } = useMouse(boundRef);
7+
return (
8+
<div class="flex gap-x-4">
9+
<div class="h-96 w-96 bg-slate-300" ref={boundRef}></div>
10+
<div>
11+
<p>x: {x.value}</p>
12+
<p>y: {y.value}</p>
13+
</div>
14+
</div>
15+
)
516
});
617

718
export default {

‎packages/hooks/src/useNetwork/index.stories.tsx‎

Lines changed: 17 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,23 @@
11
import { component$ } from "@builder.io/qwik";
2+
import { useNetwork } from ".";
23

34
const Test = component$(() => {
4-
return <>Hello</>
5+
const network = useNetwork();
6+
return (
7+
<p>
8+
<p>isSupported: {network.isSupported.value ? 'true' : 'false'}</p>
9+
<p>isOnline: {network.isOnline.value ? 'true' : 'false'}</p>
10+
<p>saveData: {network.saveData.value ? 'true' : 'false'}</p>
11+
{network.isOnline.value ? (
12+
<p>onlineAt: {network.onlineAt.value}</p>
13+
): (
14+
<p>offlineAt: {network.offlineAt.value}</p>
15+
)}
16+
<p>downling: {network.downlink.value}</p>
17+
<p>effectiveType: {network.effectiveType.value}</p>
18+
<p>rtt: {network.rtt.value}</p>
19+
</p>
20+
)
521
});
622

723
export default {

0 commit comments

Comments
 (0)