From 98ee58d49e23bc075b00af4ca027572b3d7cbe44 Mon Sep 17 00:00:00 2001 From: Jannik Zschiesche Date: Tue, 7 May 2024 11:02:54 +0200 Subject: [PATCH 01/21] Add Dune overview --- docs/ts-scss/dune/index.mdx | 24 ++++++++++++++++++++++++ 1 file changed, 24 insertions(+) diff --git a/docs/ts-scss/dune/index.mdx b/docs/ts-scss/dune/index.mdx index 1229189..e89aaae 100644 --- a/docs/ts-scss/dune/index.mdx +++ b/docs/ts-scss/dune/index.mdx @@ -11,3 +11,27 @@ import {LinkList} from "../../../src/components/Link/LinkList"; It provides standalone functions, React components and Next.js-integrated components. + + +## Overview + +### Event Helpers + +- [`on()`](/docs/ts-scss/dune/dom#on) +- [`off()`](/docs/ts-scss/dune/dom#off) +- [`once()`](/docs/ts-scss/dune/dom#once) +- [`delegate()`](/docs/ts-scss/dune/dom#delegate) +- [`onOff()`](/docs/ts-scss/dune/dom#onoff) +- [`trigger()`](/docs/ts-scss/dune/dom#trigger) + + + +### DOM Traversal Helpers + +- [`findFirst()`](/docs/ts-scss/dune/dom#findfirst) +- [`find()`](/docs/ts-scss/dune/dom#find) +- [`children()`](/docs/ts-scss/dune/dom#children) +- [`prev()`](/docs/ts-scss/dune/dom#prev) +- [`next()`](/docs/ts-scss/dune/dom#next) +- [`closest()`](/docs/ts-scss/dune/dom#closest) +- [`isChildOf()`](/docs/ts-scss/dune/dom#ischildof) From 7f65c8523720b9f79c06c02789f9b2b17a99968a Mon Sep 17 00:00:00 2001 From: Jannik Zschiesche Date: Tue, 7 May 2024 11:05:29 +0200 Subject: [PATCH 02/21] Add toggle class helper --- docs/ts-scss/dune/dom.mdx | 13 +++++++++++++ docs/ts-scss/dune/index.mdx | 5 +++++ 2 files changed, 18 insertions(+) diff --git a/docs/ts-scss/dune/dom.mdx b/docs/ts-scss/dune/dom.mdx index 6b907e8..dadb736 100644 --- a/docs/ts-scss/dune/dom.mdx +++ b/docs/ts-scss/dune/dom.mdx @@ -4,6 +4,19 @@ The library contains several helper functions for working with the DOM. ## HTML Attributes +### `toggleClass()` + +```typescript +toggleClass(element, className, addClass) +``` + +A helper, where you can control via the `addClass` parameter whether to add or remove classes. + +- You can pass an array of elements as `element`. +- You can also pass multiple classes as array in `className`. + + + ## Events ### `on()` diff --git a/docs/ts-scss/dune/index.mdx b/docs/ts-scss/dune/index.mdx index e89aaae..394b558 100644 --- a/docs/ts-scss/dune/index.mdx +++ b/docs/ts-scss/dune/index.mdx @@ -15,6 +15,11 @@ It provides standalone functions, React components and Next.js-integrated compon ## Overview +### DOM Attribute Helpers + +- [`toggleClass()`](/docs/ts-scss/dune/dom#toggleclass) + + ### Event Helpers - [`on()`](/docs/ts-scss/dune/dom#on) From d3e80072eeb424619c2e6f7c0737b483ed571855 Mon Sep 17 00:00:00 2001 From: Jannik Zschiesche Date: Tue, 7 May 2024 11:10:31 +0200 Subject: [PATCH 03/21] Add tags in previous changelog entries --- blog/2024-05-06-symfony-libs.mdx | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/blog/2024-05-06-symfony-libs.mdx b/blog/2024-05-06-symfony-libs.mdx index 2940eef..92e7c5c 100644 --- a/blog/2024-05-06-symfony-libs.mdx +++ b/blog/2024-05-06-symfony-libs.mdx @@ -1,7 +1,11 @@ --- title: "Document Symfony + PHP Libs" authors: [jannik] -tags: [simple-normalizer] +tags: + - simple-normalizer + - task-manager + - html-builder + - dune --- A bunch of new docs were written: From 04d54390921052bbf2afff7ccc2f7e9de777ec1f Mon Sep 17 00:00:00 2001 From: Jannik Zschiesche Date: Tue, 7 May 2024 11:10:45 +0200 Subject: [PATCH 04/21] Add user centrics dune docs --- blog/2024-05-07-dune-docs.mdx | 15 +++++++++++ docs/ts-scss/dune/react/index.mdx | 1 + docs/ts-scss/dune/react/usercentrics.mdx | 33 ++++++++++++++++++++++++ 3 files changed, 49 insertions(+) create mode 100644 blog/2024-05-07-dune-docs.mdx create mode 100644 docs/ts-scss/dune/react/usercentrics.mdx diff --git a/blog/2024-05-07-dune-docs.mdx b/blog/2024-05-07-dune-docs.mdx new file mode 100644 index 0000000..39fe85a --- /dev/null +++ b/blog/2024-05-07-dune-docs.mdx @@ -0,0 +1,15 @@ +--- +title: "Finalize Dune Docs" +authors: [jannik] +tags: [dune] +--- + +The [Dune] docs were finalized: + +- [DOM Attribute helpers] are now documented. +- [Usercentrics] component and hooks is documented. + + +[Dune]: /docs/ts-scss/dune +[DOM Attribute helpers]: /docs/ts-scss/dune/dom#html-attributes +[Usercentrics]: /docs/ts-scss/dune/react/usercentrics diff --git a/docs/ts-scss/dune/react/index.mdx b/docs/ts-scss/dune/react/index.mdx index b0b6ef7..09c34aa 100644 --- a/docs/ts-scss/dune/react/index.mdx +++ b/docs/ts-scss/dune/react/index.mdx @@ -8,3 +8,4 @@ Some of these components are intended to be used in Next.js only, some can be us - [AnchorIntegration](./anchor-integration) - [ClientOnlyPortal](./client-only-portal) - [Cookiebot component and hooks](./cookiebot) +- [Usercentrics component and hooks](./usercentrics) diff --git a/docs/ts-scss/dune/react/usercentrics.mdx b/docs/ts-scss/dune/react/usercentrics.mdx new file mode 100644 index 0000000..7e5181c --- /dev/null +++ b/docs/ts-scss/dune/react/usercentrics.mdx @@ -0,0 +1,33 @@ +# Usercentrics + +There is a component for loading Usercentrics: + +```tsx +import {Usercentrics} from "@21torr/dune/next/components/Snippet/Usercentrics.js"; + + +``` + +There also is a hook to be able to interact with Usercentrics inside of pages: + +```tsx +import {useUsercentrics} from "@21torr/dune/react/hooks/usercentrics.js"; + +const cookiebot = useUsercentrics(); + +// check consent levels +console.log(true === cookiebot.consent.marketing); +console.log(true === cookiebot.consent.preferences); +console.log(true === cookiebot.consent.statistics); + +// true if any non-essential categories are selected +console.log(true === cookiebot.hasAnyConsent); + +// or open the consent manager + +``` From a3f093c9ed39f9164ae93452a259822daa92f6bc Mon Sep 17 00:00:00 2001 From: Jannik Zschiesche Date: Tue, 7 May 2024 11:27:33 +0200 Subject: [PATCH 05/21] =?UTF-8?q?Remove=20=E2=80=9C.js=E2=80=9D=20in=20imp?= =?UTF-8?q?orts?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- docs/ts-scss/dune/react/anchor-integration.mdx | 2 +- docs/ts-scss/dune/react/client-only-portal.mdx | 2 +- docs/ts-scss/dune/react/cookiebot.mdx | 4 ++-- docs/ts-scss/dune/react/usercentrics.mdx | 4 ++-- 4 files changed, 6 insertions(+), 6 deletions(-) diff --git a/docs/ts-scss/dune/react/anchor-integration.mdx b/docs/ts-scss/dune/react/anchor-integration.mdx index 74b3563..4f832b4 100644 --- a/docs/ts-scss/dune/react/anchor-integration.mdx +++ b/docs/ts-scss/dune/react/anchor-integration.mdx @@ -15,7 +15,7 @@ This element circumvents the issue, by waiting after the initial render (and the You should load this component once in your app. If you are using Next.js, a (fairly top-level) layout would be the correct place for it. ```tsx -import {AnchorIntegration} from "@21torr/dune/next/components/Structure/AnchorIntegration.js"; +import {AnchorIntegration} from "@21torr/dune/next/components/Structure/AnchorIntegration"; ``` diff --git a/docs/ts-scss/dune/react/client-only-portal.mdx b/docs/ts-scss/dune/react/client-only-portal.mdx index 219c6b8..5e895b2 100644 --- a/docs/ts-scss/dune/react/client-only-portal.mdx +++ b/docs/ts-scss/dune/react/client-only-portal.mdx @@ -4,7 +4,7 @@ The ClientOnlyPortal is a React portal, that is only rendered on the client. On the server it will render to `null`. ```tsx -import {ClientOnlyPortal} from "@21torr/dune/react/components/Structure/ClientOnlyPortal.js"; +import {ClientOnlyPortal} from "@21torr/dune/react/components/Structure/ClientOnlyPortal";
My content
diff --git a/docs/ts-scss/dune/react/cookiebot.mdx b/docs/ts-scss/dune/react/cookiebot.mdx index 05c6952..f066521 100644 --- a/docs/ts-scss/dune/react/cookiebot.mdx +++ b/docs/ts-scss/dune/react/cookiebot.mdx @@ -3,7 +3,7 @@ There is a component for loading Cookiebot: ```tsx -import {Cookiebot} from "@21torr/dune/next/components/Snippet/Cookiebot.js"; +import {Cookiebot} from "@21torr/dune/next/components/Snippet/Cookiebot"; ``` @@ -11,7 +11,7 @@ import {Cookiebot} from "@21torr/dune/next/components/Snippet/Cookiebot.js"; There also is a hook to be able to interact with Cookiebot inside of pages: ```tsx -import {useCookiebot} from "@21torr/dune/react/hooks/cookiebot.js"; +import {useCookiebot} from "@21torr/dune/react/hooks/cookiebot"; const cookiebot = useCookiebot(); diff --git a/docs/ts-scss/dune/react/usercentrics.mdx b/docs/ts-scss/dune/react/usercentrics.mdx index 7e5181c..89036a1 100644 --- a/docs/ts-scss/dune/react/usercentrics.mdx +++ b/docs/ts-scss/dune/react/usercentrics.mdx @@ -3,7 +3,7 @@ There is a component for loading Usercentrics: ```tsx -import {Usercentrics} from "@21torr/dune/next/components/Snippet/Usercentrics.js"; +import {Usercentrics} from "@21torr/dune/next/components/Snippet/Usercentrics"; ``` @@ -11,7 +11,7 @@ import {Usercentrics} from "@21torr/dune/next/components/Snippet/Usercentrics.js There also is a hook to be able to interact with Usercentrics inside of pages: ```tsx -import {useUsercentrics} from "@21torr/dune/react/hooks/usercentrics.js"; +import {useUsercentrics} from "@21torr/dune/react/hooks/usercentrics"; const cookiebot = useUsercentrics(); From 782b83a2397e72ae4b55699a6c741347332e7006 Mon Sep 17 00:00:00 2001 From: Jannik Zschiesche Date: Tue, 7 May 2024 11:28:17 +0200 Subject: [PATCH 06/21] Document http auth middleware integration --- blog/2024-05-07-dune-docs.mdx | 2 ++ docs/ts-scss/dune/react/http-auth.mdx | 29 ++++++++++++++++++ .../react/images/http-auth-response-text.png | Bin 0 -> 2751 bytes 3 files changed, 31 insertions(+) create mode 100644 docs/ts-scss/dune/react/http-auth.mdx create mode 100644 docs/ts-scss/dune/react/images/http-auth-response-text.png diff --git a/blog/2024-05-07-dune-docs.mdx b/blog/2024-05-07-dune-docs.mdx index 39fe85a..81a3c52 100644 --- a/blog/2024-05-07-dune-docs.mdx +++ b/blog/2024-05-07-dune-docs.mdx @@ -8,8 +8,10 @@ The [Dune] docs were finalized: - [DOM Attribute helpers] are now documented. - [Usercentrics] component and hooks is documented. +- [HTTP Basic Auth middleware] is documented. [Dune]: /docs/ts-scss/dune [DOM Attribute helpers]: /docs/ts-scss/dune/dom#html-attributes +[HTTP Basic Auth middleware]: /docs/ts-scss/dune/react/http-auth [Usercentrics]: /docs/ts-scss/dune/react/usercentrics diff --git a/docs/ts-scss/dune/react/http-auth.mdx b/docs/ts-scss/dune/react/http-auth.mdx new file mode 100644 index 0000000..433886f --- /dev/null +++ b/docs/ts-scss/dune/react/http-auth.mdx @@ -0,0 +1,29 @@ +# HTTP Auth Middleware + +A helper that integrates a HTTP Basic Auth into the Next.js Middleware. + +```typescript +import {handleHttpBasicAuth} from "@21torr/dune/next/middleware/http-auth"; + +const middleware: NextMiddleware = (request) => +{ + const authResponse = handleHttpBasicAuth( + request, + username, + password, + responseText = "Auth required", + realmLabel = "Secure Area", + ); + + if (authResponse) + { + return authResponse; + } + + // do you regular middleware work here +}; +``` + +The parameters `responseText` and `realmLabel` have defaults as written above. The response text is the text that is shown to the user if the authentication fails: + +![Example text](./images/http-auth-response-text.png) diff --git a/docs/ts-scss/dune/react/images/http-auth-response-text.png b/docs/ts-scss/dune/react/images/http-auth-response-text.png new file mode 100644 index 0000000000000000000000000000000000000000..35f44181ef2645486e1ca279159753cb4c27df14 GIT binary patch literal 2751 zcmV;w3PAOVP)Rnxf#Txgm6erXU|@QBdVYR>EiEldN=isbNO^gA zV`F1YO-+o9j59Mcjg5^%LqmIeduwZJ;o;$-p`pmg$j;8rfPjE=b91b$tfZu*w6wIp zzrS8yUQ|?6x3{-DJ3A^WD#gXchK7cGe0)JcL1<`b*4Eals;a`m!d+cmj*gDR#Kc-! zT0%lXva+&AM@Lv#SWiz+(b3V_+1Z_)ol8qg-{0T9zP{Vr+uhyWnwpw+c6PC`vD4Gj zRaI41R#sVASv@^HZf z+}xX+o2#p<%F4=WYHF94mx6+V-rn9oKtMh|K4D>D!NI|BaB!!mr;(A7h=_=on3#iu zgE%-ixVX59iHV}3qJ4dR$;rvPySp(lF^YsaV#t>oSdA? z%gdjipM`~mprD}C)YQ$*&1Pn1KR-W4Mn->se?><|5)u*@7Z(*3761SL@bK^=A|fOt zBvMjRb#-;~^Yird^yuj5{{H^^`}-Lg8Q|dH>+9?F_4WDr`5he{`uh6v^70@cAo%$B z6ciNw{r%_X=j!U}CnqPSrl$7x_Q%J^?Ck9A?d|F5>E`ClDe*dHGsCMG5u z8yky@i?+75?(Xi;(9nm6he=6EL_|cEw8h{600-|$L_t(|0qoR;0mLv2Ls45PQ(*sH zkC~xdy%D}a=zofrg#Kj|Y}_GZRDll~N3ka842h%}I>yF1xl^%#(;L<4?W6&k>FYnk_{JD}vqV6LqGN$8cxs$ahmXWmZoODzzr(4|CkG*j%y{ zSSF^^n+NrM=JFN3zhQQuqLs2OAh#K-DYp^bRBo}+RZz@lw)7<=S!A|_mDJ>HGs)(GCZ*< z-CmqL)Nz5idgn&9i_G25p1tNAcBp-2qV{`^RojZ?W*$40wR5qW#sRhBU|%2ghq^ls zj~5-F@W?J{;ixNRrufutM{0?qSTCwjC|MB{{gvdo^3Pi7)<>a;C!I;H81l{ovk zjswM2)q|vUJ4jV}$zB-NR5U&`YZBK$LE}Kkloa)7C3KnxWAAL^MdDiA6!&n z`Yu79a~aFILRY`PR-Bp!V2iATs9XWgZKKfwkl8`d?5i|wE{8VJGUXr?OA?QjvK4kp z9IFw!rN)$9WsGusU4Wgc{Dy-^%Z<%9RgdTR7R*z{8R`JA z`8F$+(>p!pJN9Qc^vFdv$Pr-U4I;;YEIAW|JJQO=yFi&}_hjSUySh|o&lz9~d*%RZ zBwi?T_wHR;`XjCtevQ)yikuI-h}07ln-~zatpM+?aZ4DO==n4 zmq<~bxCWfq%oTYGAz8^w>4#U648p2y@cLK`ZiseR-oV>O8F*Zjd2mMJBx-=7>>v2- z=04tkb_=IDyB$~7%fF}_9C4OBuXpO$tIm}Cb%f(B>TmI0wSj%+@lr9f*lreQW?6fn zZO+O?f0qleN2X7+tX#Cq$L?*gn+SqE8>;1XXs3vVKBr;sDoNteWp9iZ+Y;x1TwOa= zj{lH%kZ2_0pDNyS2Ql0`h(5+0Dh19nZ1%LUyx=eWDPu27gF`QQKBwFl-#!vKim*YVl5 zZQHhO+qP}ncbjb8C#f6MZqFa*QnzPw|KrS#e)0Q0r~Wl#U8C2%CfzfYvF`or42#ZU z$yjF!bv9PUI^+GbQ!H8ffDy47&<$DUeFVIRiBX*2 zGN2U@Z>!knTK)X_yT-#s?6R&dz%?ForMXi{S! z%lJHecm;9EKnllVl*@{a254jJYX|b@?;6_zmTh0a&A_M#(@~!ldB(B+sm2SPnda#M z&@zCo{aME8fFmBJGcbaeF)A9^M&MB^GOa@X{2gOE1G65V12koXrNCI9#~Bgp(3*{r z+kss?k7XQzOkRUyT$YnxzA=!#jl=Ti?-;|i4%u1Vaju^5^o&+O#=tUG?QWLOwy*95 z-0`yZVoNOJgznE-4y(-Gu?Z3OeB*<&o%PKwzRZezAZdBv7NXESs&2LV{m6*t5G zd*eBPCCrV>5hRZQ4$`$Li~R+87Py&2+WG=7lYmzQrjl&sgZ%kB#y Date: Tue, 7 May 2024 11:28:42 +0200 Subject: [PATCH 07/21] Add comment in react components --- docs/ts-scss/dune/react/index.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/ts-scss/dune/react/index.mdx b/docs/ts-scss/dune/react/index.mdx index 09c34aa..3f614b8 100644 --- a/docs/ts-scss/dune/react/index.mdx +++ b/docs/ts-scss/dune/react/index.mdx @@ -2,7 +2,7 @@ This is a list of all React components. -Some of these components are intended to be used in Next.js only, some can be used in a standalone React project. +Some of these components are intended to be used in Next.js only, some can be used in a standalone React project. Look at the imports of the implementation to see which is Next.js-only. - [AnchorIntegration](./anchor-integration) From 428f40275dfe2f592b3d8ee9b8084513e3974555 Mon Sep 17 00:00:00 2001 From: Jannik Zschiesche Date: Tue, 7 May 2024 12:05:09 +0200 Subject: [PATCH 08/21] Add media query hooks docs --- blog/2024-05-07-dune-docs.mdx | 2 ++ docs/ts-scss/dune/react/media-query.mdx | 25 +++++++++++++++++++++++++ 2 files changed, 27 insertions(+) create mode 100644 docs/ts-scss/dune/react/media-query.mdx diff --git a/blog/2024-05-07-dune-docs.mdx b/blog/2024-05-07-dune-docs.mdx index 81a3c52..af15e11 100644 --- a/blog/2024-05-07-dune-docs.mdx +++ b/blog/2024-05-07-dune-docs.mdx @@ -9,9 +9,11 @@ The [Dune] docs were finalized: - [DOM Attribute helpers] are now documented. - [Usercentrics] component and hooks is documented. - [HTTP Basic Auth middleware] is documented. +- [Media Query Hooks] are documented. [Dune]: /docs/ts-scss/dune [DOM Attribute helpers]: /docs/ts-scss/dune/dom#html-attributes [HTTP Basic Auth middleware]: /docs/ts-scss/dune/react/http-auth +[Media Query Hooks]: /docs/ts-scss/dune/react/media-query [Usercentrics]: /docs/ts-scss/dune/react/usercentrics diff --git a/docs/ts-scss/dune/react/media-query.mdx b/docs/ts-scss/dune/react/media-query.mdx new file mode 100644 index 0000000..bfc65d9 --- /dev/null +++ b/docs/ts-scss/dune/react/media-query.mdx @@ -0,0 +1,25 @@ +# Media Query Hooks + +A simple hook that integrates into media queries. + + +```typescript +const isLarge = useMediaQuery("(min-width: 1000px)"); +``` + +To avoid hydration issues, this hook will first render to `false` and on the client rerender with the actual media query. + +:::best-practice +Instead of using the hook in your components directly, you should create named media query hooks, that mirror the names of your CSS media queries: + +```typescript +// Create named hook +export function useIsLarge () : bool +{ + return useMediaQuery("(min-width: 1000px)"); +} + +// use the named hooks in your components +const isLarge = useIsLarge(); +``` +::: From 4e37e5fe72737d6ba5d1728311c15e49bd2d5f75 Mon Sep 17 00:00:00 2001 From: Jannik Zschiesche Date: Tue, 7 May 2024 12:08:59 +0200 Subject: [PATCH 09/21] Add headlines for usercentrics and cookiebot --- docs/ts-scss/dune/react/cookiebot.mdx | 5 +++++ docs/ts-scss/dune/react/usercentrics.mdx | 5 +++++ 2 files changed, 10 insertions(+) diff --git a/docs/ts-scss/dune/react/cookiebot.mdx b/docs/ts-scss/dune/react/cookiebot.mdx index f066521..f40106d 100644 --- a/docs/ts-scss/dune/react/cookiebot.mdx +++ b/docs/ts-scss/dune/react/cookiebot.mdx @@ -1,5 +1,7 @@ # Cookiebot +## Component + There is a component for loading Cookiebot: ```tsx @@ -8,6 +10,9 @@ import {Cookiebot} from "@21torr/dune/next/components/Snippet/Cookiebot"; ``` + +## Hook + There also is a hook to be able to interact with Cookiebot inside of pages: ```tsx diff --git a/docs/ts-scss/dune/react/usercentrics.mdx b/docs/ts-scss/dune/react/usercentrics.mdx index 89036a1..0857b64 100644 --- a/docs/ts-scss/dune/react/usercentrics.mdx +++ b/docs/ts-scss/dune/react/usercentrics.mdx @@ -1,5 +1,7 @@ # Usercentrics +## Component + There is a component for loading Usercentrics: ```tsx @@ -8,6 +10,9 @@ import {Usercentrics} from "@21torr/dune/next/components/Snippet/Usercentrics"; ``` + +## Hook + There also is a hook to be able to interact with Usercentrics inside of pages: ```tsx From c85f6326abbb13230f6d66b9c4821f6474678972 Mon Sep 17 00:00:00 2001 From: Jannik Zschiesche Date: Tue, 7 May 2024 12:09:10 +0200 Subject: [PATCH 10/21] Add everything to the Dune overview --- docs/ts-scss/dune/index.mdx | 19 +++++++++++++++++++ 1 file changed, 19 insertions(+) diff --git a/docs/ts-scss/dune/index.mdx b/docs/ts-scss/dune/index.mdx index 394b558..c815f4e 100644 --- a/docs/ts-scss/dune/index.mdx +++ b/docs/ts-scss/dune/index.mdx @@ -40,3 +40,22 @@ It provides standalone functions, React components and Next.js-integrated compon - [`next()`](/docs/ts-scss/dune/dom#next) - [`closest()`](/docs/ts-scss/dune/dom#closest) - [`isChildOf()`](/docs/ts-scss/dune/dom#ischildof) + + +### React Components + +- [``](/docs/ts-scss/dune/react/anchor-integration) +- [``](/docs/ts-scss/dune/react/client-only-portal) +- [``](/docs/ts-scss/dune/react/cookiebot#component) +- [``](/docs/ts-scss/dune/react/usercentrics#component) + +### React Hooks + +- [`useCookiebot()`](/docs/ts-scss/dune/react/cookiebot#hook) +- [`useMediaQuery()`](/docs/ts-scss/dune/react/media-query) +- [`useUsercentrics()`](/docs/ts-scss/dune/react/usercentrics#hook) + + +### Next.js Middleware Integrations + +- [`handleHttpBasicAuth()`](/docs/ts-scss/dune/react/http-auth) From 4427849f9bbe6c12d3a74f68d69be519e436c1a7 Mon Sep 17 00:00:00 2001 From: Jannik Zschiesche Date: Tue, 7 May 2024 12:17:24 +0200 Subject: [PATCH 11/21] Refactor react index page --- docs/ts-scss/dune/index.mdx | 6 +++++- docs/ts-scss/dune/react/index.mdx | 24 +++++++++++++++++------- 2 files changed, 22 insertions(+), 8 deletions(-) diff --git a/docs/ts-scss/dune/index.mdx b/docs/ts-scss/dune/index.mdx index c815f4e..d346e90 100644 --- a/docs/ts-scss/dune/index.mdx +++ b/docs/ts-scss/dune/index.mdx @@ -13,7 +13,7 @@ It provides standalone functions, React components and Next.js-integrated compon -## Overview +## DOM Helpers ### DOM Attribute Helpers @@ -41,6 +41,10 @@ It provides standalone functions, React components and Next.js-integrated compon - [`closest()`](/docs/ts-scss/dune/dom#closest) - [`isChildOf()`](/docs/ts-scss/dune/dom#ischildof) +## React Helpers + + +Some of these components / hooks are intended to be used in Next.js only, some can be used in a standalone React project. Look at the imports of the implementation to see which is Next.js-only. ### React Components diff --git a/docs/ts-scss/dune/react/index.mdx b/docs/ts-scss/dune/react/index.mdx index 3f614b8..e140aae 100644 --- a/docs/ts-scss/dune/react/index.mdx +++ b/docs/ts-scss/dune/react/index.mdx @@ -1,11 +1,21 @@ -# React Components +# React Helpers -This is a list of all React components. +Some of these components / hooks are intended to be used in Next.js only, some can be used in a standalone React project. Look at the imports of the implementation to see which is Next.js-only. -Some of these components are intended to be used in Next.js only, some can be used in a standalone React project. Look at the imports of the implementation to see which is Next.js-only. +### React Components +- [``](/docs/ts-scss/dune/react/anchor-integration) +- [``](/docs/ts-scss/dune/react/client-only-portal) +- [``](/docs/ts-scss/dune/react/cookiebot#component) +- [``](/docs/ts-scss/dune/react/usercentrics#component) -- [AnchorIntegration](./anchor-integration) -- [ClientOnlyPortal](./client-only-portal) -- [Cookiebot component and hooks](./cookiebot) -- [Usercentrics component and hooks](./usercentrics) +### React Hooks + +- [`useCookiebot()`](/docs/ts-scss/dune/react/cookiebot#hook) +- [`useMediaQuery()`](/docs/ts-scss/dune/react/media-query) +- [`useUsercentrics()`](/docs/ts-scss/dune/react/usercentrics#hook) + + +### Next.js Middleware Integrations + +- [`handleHttpBasicAuth()`](/docs/ts-scss/dune/react/http-auth) From f0959ac11b1f739d3bb9632813041227babd1015 Mon Sep 17 00:00:00 2001 From: Jannik Zschiesche Date: Tue, 7 May 2024 12:17:27 +0200 Subject: [PATCH 12/21] Add missing import --- docs/ts-scss/dune/react/media-query.mdx | 2 ++ 1 file changed, 2 insertions(+) diff --git a/docs/ts-scss/dune/react/media-query.mdx b/docs/ts-scss/dune/react/media-query.mdx index bfc65d9..4b779c6 100644 --- a/docs/ts-scss/dune/react/media-query.mdx +++ b/docs/ts-scss/dune/react/media-query.mdx @@ -4,6 +4,8 @@ A simple hook that integrates into media queries. ```typescript +import {useMediaQuery} from "@21torr/dune/react/hooks/media-query"; + const isLarge = useMediaQuery("(min-width: 1000px)"); ``` From 06e7b070b2af113c52d5b8b444c8d29d7ce8c4f5 Mon Sep 17 00:00:00 2001 From: Jannik Zschiesche Date: Tue, 7 May 2024 12:17:36 +0200 Subject: [PATCH 13/21] Document useDebounced() --- blog/2024-05-07-dune-docs.mdx | 2 ++ docs/ts-scss/dune/index.mdx | 1 + docs/ts-scss/dune/react/debounce.mdx | 19 +++++++++++++++++++ docs/ts-scss/dune/react/index.mdx | 1 + 4 files changed, 23 insertions(+) create mode 100644 docs/ts-scss/dune/react/debounce.mdx diff --git a/blog/2024-05-07-dune-docs.mdx b/blog/2024-05-07-dune-docs.mdx index af15e11..8e189c0 100644 --- a/blog/2024-05-07-dune-docs.mdx +++ b/blog/2024-05-07-dune-docs.mdx @@ -10,8 +10,10 @@ The [Dune] docs were finalized: - [Usercentrics] component and hooks is documented. - [HTTP Basic Auth middleware] is documented. - [Media Query Hooks] are documented. +- [Debounce Hook] is documented. +[Debounce Hook]: /docs/ts-scss/dune/react/debounce [Dune]: /docs/ts-scss/dune [DOM Attribute helpers]: /docs/ts-scss/dune/dom#html-attributes [HTTP Basic Auth middleware]: /docs/ts-scss/dune/react/http-auth diff --git a/docs/ts-scss/dune/index.mdx b/docs/ts-scss/dune/index.mdx index d346e90..3410034 100644 --- a/docs/ts-scss/dune/index.mdx +++ b/docs/ts-scss/dune/index.mdx @@ -56,6 +56,7 @@ Some of these components / hooks are intended to be used in Next.js only, some c ### React Hooks - [`useCookiebot()`](/docs/ts-scss/dune/react/cookiebot#hook) +- [`useDebounced()`](/docs/ts-scss/dune/react/debounce) - [`useMediaQuery()`](/docs/ts-scss/dune/react/media-query) - [`useUsercentrics()`](/docs/ts-scss/dune/react/usercentrics#hook) diff --git a/docs/ts-scss/dune/react/debounce.mdx b/docs/ts-scss/dune/react/debounce.mdx new file mode 100644 index 0000000..02b8757 --- /dev/null +++ b/docs/ts-scss/dune/react/debounce.mdx @@ -0,0 +1,19 @@ +# Debounce + +```typescript +useDebounced(value, delay, onSetCallback?) +``` + +The `useDebounce()` hook helps when integrating rapidly changing values: the debounced value is only ever updated if it didn't change in the last `delay` milliseconds. + + +```typescript +import {useDebounced} from "@21torr/dune/react/hooks/debounce"; + +const [actualValue, setActualValue] = useState("some value"); +const debouncedValue = useDebounced(actualValue, 500); +``` + +With the `onSetCallback` you can hook into the live update of the value, if you need the value directly instead of adding an effect that reacts on the debounced value. + +One of the prime use cases of this hook is a search input: you only ever want to search after the user stopped typing for a few ms. diff --git a/docs/ts-scss/dune/react/index.mdx b/docs/ts-scss/dune/react/index.mdx index e140aae..e02795e 100644 --- a/docs/ts-scss/dune/react/index.mdx +++ b/docs/ts-scss/dune/react/index.mdx @@ -12,6 +12,7 @@ Some of these components / hooks are intended to be used in Next.js only, some c ### React Hooks - [`useCookiebot()`](/docs/ts-scss/dune/react/cookiebot#hook) +- [`useDebounced()`](/docs/ts-scss/dune/react/debounce) - [`useMediaQuery()`](/docs/ts-scss/dune/react/media-query) - [`useUsercentrics()`](/docs/ts-scss/dune/react/usercentrics#hook) From f67045267bb3e1bb0b9849366f5d84cb805dd68f Mon Sep 17 00:00:00 2001 From: Jannik Zschiesche Date: Tue, 7 May 2024 12:32:46 +0200 Subject: [PATCH 14/21] Document JS helpers --- docs/ts-scss/dune/index.mdx | 63 ++++++++++++-------------- docs/ts-scss/dune/js.mdx | 88 +++++++++++++++++++++++++++++++++++++ 2 files changed, 115 insertions(+), 36 deletions(-) create mode 100644 docs/ts-scss/dune/js.mdx diff --git a/docs/ts-scss/dune/index.mdx b/docs/ts-scss/dune/index.mdx index 3410034..9a8e9a6 100644 --- a/docs/ts-scss/dune/index.mdx +++ b/docs/ts-scss/dune/index.mdx @@ -13,54 +13,45 @@ It provides standalone functions, React components and Next.js-integrated compon -## DOM Helpers +## DOM + JS Helpers -### DOM Attribute Helpers - -- [`toggleClass()`](/docs/ts-scss/dune/dom#toggleclass) - - -### Event Helpers - -- [`on()`](/docs/ts-scss/dune/dom#on) +- [`addConsecutiveClasses()`](/docs/ts-scss/dune/js#addconsecutiveclasses) +- [`children()`](/docs/ts-scss/dune/dom#children) +- [`closest()`](/docs/ts-scss/dune/dom#closest) +- [`delegate()`](/docs/ts-scss/dune/dom#delegate) +- [`find()`](/docs/ts-scss/dune/dom#find) +- [`findFirst()`](/docs/ts-scss/dune/dom#findfirst) +- [`isAbortError()`](/docs/ts-scss/dune/js#isaborterror) +- [`isChildOf()`](/docs/ts-scss/dune/dom#ischildof) +- [`next()`](/docs/ts-scss/dune/dom#next) - [`off()`](/docs/ts-scss/dune/dom#off) +- [`on()`](/docs/ts-scss/dune/dom#on) - [`once()`](/docs/ts-scss/dune/dom#once) -- [`delegate()`](/docs/ts-scss/dune/dom#delegate) - [`onOff()`](/docs/ts-scss/dune/dom#onoff) +- [`parseElementContentAsJson()`](/docs/ts-scss/dune/js#parseelementcontentasjson) +- [`prev()`](/docs/ts-scss/dune/dom#prev) +- [`safeParseJson()`](/docs/ts-scss/dune/js#safeparsejson) +- [`toggleClass()`](/docs/ts-scss/dune/dom#toggleclass) - [`trigger()`](/docs/ts-scss/dune/dom#trigger) -### DOM Traversal Helpers - -- [`findFirst()`](/docs/ts-scss/dune/dom#findfirst) -- [`find()`](/docs/ts-scss/dune/dom#find) -- [`children()`](/docs/ts-scss/dune/dom#children) -- [`prev()`](/docs/ts-scss/dune/dom#prev) -- [`next()`](/docs/ts-scss/dune/dom#next) -- [`closest()`](/docs/ts-scss/dune/dom#closest) -- [`isChildOf()`](/docs/ts-scss/dune/dom#ischildof) - ## React Helpers - Some of these components / hooks are intended to be used in Next.js only, some can be used in a standalone React project. Look at the imports of the implementation to see which is Next.js-only. -### React Components - -- [``](/docs/ts-scss/dune/react/anchor-integration) -- [``](/docs/ts-scss/dune/react/client-only-portal) -- [``](/docs/ts-scss/dune/react/cookiebot#component) -- [``](/docs/ts-scss/dune/react/usercentrics#component) - -### React Hooks - -- [`useCookiebot()`](/docs/ts-scss/dune/react/cookiebot#hook) -- [`useDebounced()`](/docs/ts-scss/dune/react/debounce) -- [`useMediaQuery()`](/docs/ts-scss/dune/react/media-query) -- [`useUsercentrics()`](/docs/ts-scss/dune/react/usercentrics#hook) +- **React Components** + - [``](/docs/ts-scss/dune/react/anchor-integration) + - [``](/docs/ts-scss/dune/react/client-only-portal) + - [``](/docs/ts-scss/dune/react/cookiebot#component) + - [``](/docs/ts-scss/dune/react/usercentrics#component) +- **React Hooks** + - [`useCookiebot()`](/docs/ts-scss/dune/react/cookiebot#hook) + - [`useDebounced()`](/docs/ts-scss/dune/react/debounce) + - [`useMediaQuery()`](/docs/ts-scss/dune/react/media-query) + - [`useUsercentrics()`](/docs/ts-scss/dune/react/usercentrics#hook) -### Next.js Middleware Integrations -- [`handleHttpBasicAuth()`](/docs/ts-scss/dune/react/http-auth) +- **Next.js Middleware Integrations** + - [`handleHttpBasicAuth()`](/docs/ts-scss/dune/react/http-auth) diff --git a/docs/ts-scss/dune/js.mdx b/docs/ts-scss/dune/js.mdx new file mode 100644 index 0000000..a505b84 --- /dev/null +++ b/docs/ts-scss/dune/js.mdx @@ -0,0 +1,88 @@ +# JS Helpers + +## Animation + +### `addConsecutiveClasses()` + +```typescript +addConsecutiveClasses(element, firstClass, secondClass, onUpdate?) +``` + +Adds the first classes in the next animation frame, and the second in the frame thereafter. + +Takes an optional callback that is called when the classes were updated, first with parameter `end = false` for the first class, then with `end = true` for the second class. + + +## JSON + +### `safeParseJson()` + +```typescript +safeParseJson(value) +``` + +Parses the given value as JSON and returns it cast as the `DataType`. + +:::caution +This function doesn't validate the data in any way. It is recommended to use zod to validate the schema. +::: + + +### `parseElementContentAsJson()` + +```typescript +parseElementContentAsJson(element) +``` + +Uses the text content of the given element, parses it as JSON and returns the parsed json. + +This is especially useful when hydrating `