feat: scroll feature completed

OrionFable · OrionFable · commit fa1dac811f3e · 2023-09-03T09:50:01.000-03:00
diff --git a/docs/package.json b/docs/package.json
@@ -10,7 +10,7 @@
   },
   "dependencies": {
     "@radix-ui/react-icons": "1.3.0",
-    "brouther": "4.3.3",
+    "brouther": "4.4.0",
     "prism-react-renderer": "1.3.5",
     "react": "18.2.0",
     "react-dom": "18.2.0",
diff --git a/docs/pnpm-lock.yaml b/docs/pnpm-lock.yaml
diff --git a/docs/src/components/anchor.tsx b/docs/src/components/anchor.tsx
@@ -1,12 +1,9 @@
-type Props<C extends React.ElementType> = {
-    as?: C;
-    children: React.ReactNode;
-} & React.ComponentPropsWithoutRef<C>;
+import React from "react";
+import { Link, LinkProps } from "brouther";
 
-export const Anchor = <AS extends React.ElementType = "a">({ as, ...props }: Props<AS>) => {
-    const Component = as || "a";
+export const Anchor = <TPath extends string>(props: LinkProps<TPath>) => {
     return (
-        <Component
+        <Link
             {...props}
             className={`text-transparent m-0 p-0 font-extrabold tracking-wide bg-clip-text bg-gradient-to-r from-indigo-400 to-violet-500 inline-block border-b border-transparent link:border-b-indigo-400 transition-colors duration-300 ${
                 props.className ?? ""
diff --git a/docs/src/components/document-page.tsx b/docs/src/components/document-page.tsx
@@ -49,6 +49,7 @@ export const DocumentPage = (props: React.PropsWithChildren<Props>) => {
             items: [
                 { title: "<Brouther />", link: router.links.brouther },
                 { title: "<Link />", link: router.links.linkComponent },
+                { title: "<Scroll />", link: router.links.scroll },
             ],
         },
         {
@@ -97,7 +98,7 @@ export const DocumentPage = (props: React.PropsWithChildren<Props>) => {
                                 {x.items.map((y) => (
                                     <li key={y.title} className="my-1 ml-4">
                                         {y.link === currentPage ? (
-                                            <Anchor as={Link} href={y.link}>
+                                            <Anchor href={y.link}>
                                                 {y.title}
                                             </Anchor>
                                         ) : (
diff --git a/docs/src/components/footer.tsx b/docs/src/components/footer.tsx
@@ -1,13 +1,12 @@
 import React from "react";
 import { Anchor } from "./anchor";
 import { GitHubLogoIcon } from "@radix-ui/react-icons";
-import { Link } from "brouther";
 
 export const Footer = () => {
     return (
         <footer className="w-full bg-slate-950 py-8 text-white text-center mt-auto">
             <section className="flex justify-center items-center">
-                <Anchor href="https://github.com/g4rcez/brouther" target="_blank" as={Link}>
+                <Anchor href="https://github.com/g4rcez/brouther" target="_blank">
                     <GitHubLogoIcon className="text-white inline-block mr-1 mb-0.5" />
                     Github
                 </Anchor>
diff --git a/docs/src/pages/basic-setup.tsx b/docs/src/pages/basic-setup.tsx
@@ -2,7 +2,6 @@ import { DocumentPage } from "../components/document-page";
 import { Code } from "../components/code";
 import { SubTitle } from "../components/subtitle";
 import { Anchor } from "../components/anchor";
-import { Link } from "brouther";
 import { router } from "../router";
 
 const code = `import { createMappedRouter, usePage } from "brouther";
@@ -47,14 +46,10 @@ export default function BasicSetup() {
                 </p>
                 <ul className="my-4">
                     <li className="my-2">
-                        <Anchor href={router.links.createRouter} as={Link}>
-                            createRouter
-                        </Anchor>
+                        <Anchor href={router.links.createRouter}>createRouter</Anchor>
                     </li>
                     <li className="my-2">
-                        <Anchor href={router.links.createMappedRouter} as={Link}>
-                            createMappedRouter
-                        </Anchor>
+                        <Anchor href={router.links.createMappedRouter}>createMappedRouter</Anchor>
                     </li>
                 </ul>
                 <p>You will see more about API's at this document, but first you need to focus on routers.</p>
diff --git a/docs/src/pages/brouther.tsx b/docs/src/pages/brouther.tsx
@@ -69,7 +69,7 @@ export default function BroutherPage() {
                 <InlineCode>{"<Brouther />"}</InlineCode> it's the entrypoint for your config. This is the library{" "}
                 <Anchor href="https://react.dev/learn/passing-data-deeply-with-context#step-3-provide-the-context">context provider</Anchor> and using
                 this enable all brouther features, like{" "}
-                <Anchor as={Link} href={router.links.linkComponent}>
+                <Anchor  href={router.links.linkComponent}>
                     Link
                 </Anchor>{" "}
                 component and hooks. You just need to provide the <InlineCode>router.config</InlineCode> from your createRouter or createMappedRouter.
diff --git a/docs/src/pages/form/form.tsx b/docs/src/pages/form/form.tsx
@@ -18,7 +18,7 @@ export default function FormPage() {
         <DocumentPage title="Form">
             <p>
                 This component make you able to use the{" "}
-                <Anchor as={Link} href={router.links.actions}>
+                <Anchor  href={router.links.actions}>
                     actions
                 </Anchor>{" "}
                 and the special behaviour to submit forms using JSON notation, inspired by{" "}
diff --git a/docs/src/pages/form/tricks.tsx b/docs/src/pages/form/tricks.tsx
@@ -50,11 +50,11 @@ export default function TricksPage() {
         <DocumentPage title="Tricks and Tips">
             <p>
                 When you using{" "}
-                <Anchor as={Link} href={router.links.actions}>
+                <Anchor  href={router.links.actions}>
                     actions
                 </Anchor>{" "}
                 and{" "}
-                <Anchor as={Link} href={router.links.loaders}>
+                <Anchor  href={router.links.loaders}>
                     loaders
                 </Anchor>
                 , you may need to apply a code splitting properly. To help you, brouther has some utility functions. These utility functions help you
diff --git a/docs/src/pages/index.tsx b/docs/src/pages/index.tsx
@@ -21,7 +21,7 @@ const features = [
     <Fragment>Utility to create URLs</Fragment>,
     <Fragment>Simple API, less effort to remember things</Fragment>,
     <Fragment>
-        Lightweight - <Anchor href="https://bundlephobia.com/package/brouther@latest">Less than 8Kb</Anchor>
+        Scroll control and restoration
     </Fragment>,
 ];
 
@@ -50,7 +50,7 @@ export default function IndexPage() {
                 <Card title="Next Level DX" Icon={MagicWandIcon}>
                     <p>
                         Using a fully connected type system, you can track all of your{" "}
-                        <Anchor href={router.links.aliases} as={Link}>
+                        <Anchor href={router.links.aliases} >
                             routes using aliases
                         </Anchor>
                         . You will never need to write strings in your code, just use the alias and see the magic of your new router
@@ -60,7 +60,7 @@ export default function IndexPage() {
                     <p>
                         You need to change basename? Easy. You have feature flags feature on your app? Brouther can take care. You need full control
                         of your routes? Just use{" "}
-                        <Anchor href={router.links.hooks} as={Link}>
+                        <Anchor href={router.links.hooks} >
                             Brouther hooks
                         </Anchor>{" "}
                         and you will have full power over pages, errors and URL state.
@@ -69,11 +69,11 @@ export default function IndexPage() {
                 <Card title="Want more?" Icon={MagnifyingGlassIcon}>
                     <p>
                         Just this? You can check all features and benefits of Brouther. You can read at{" "}
-                        <Anchor href={router.links.hooks} as={Link}>
+                        <Anchor href={router.links.hooks} >
                             Brouther features
                         </Anchor>{" "}
                         or you can do your own app using Brouther. Don't know how? Check on{" "}
-                        <Anchor href={router.links.examples} as={Link}>
+                        <Anchor href={router.links.examples} >
                             Examples section
                         </Anchor>
                         .
diff --git a/docs/src/pages/routers/create-mapped-router.tsx b/docs/src/pages/routers/create-mapped-router.tsx
@@ -19,7 +19,7 @@ export default function CreateRouterPage() {
             <Code code={code} />
             <p>
                 The{" "}
-                <Anchor as={Link} href={router.links.createRouter}>
+                <Anchor  href={router.links.createRouter}>
                     return type
                 </Anchor>{" "}
                 is the same of createRouter. This method was create just as an alternative to choose array or object in your config. You can also use{" "}
diff --git a/docs/src/pages/routers/create-router.tsx b/docs/src/pages/routers/create-router.tsx
@@ -73,7 +73,7 @@ export default function CreateRouterPage() {
                     </Anchor>{" "}
                     and split the actions in http methods. You can export an object with <i>post</i>,<i>put</i>, <i>patch</i> and <i>delete</i> with
                     the specific logic. This is just possible because our{" "}
-                    <Anchor as={Link} href={router.links.form}>
+                    <Anchor  href={router.links.form}>
                         Form
                     </Anchor>{" "}
                     component and your special behaviour.
@@ -107,7 +107,7 @@ export default function CreateRouterPage() {
             <SubTitle as="h3">config</SubTitle>
             <p>
                 This is an internal object for brouther. You shouldn't use this object in any place, except for{" "}
-                <Anchor href={router.links.brouther} as={Link}>
+                <Anchor href={router.links.brouther} >
                     Brouther
                 </Anchor>
                 . It's won't cover the semver and will be only for internal configuration.
@@ -150,11 +150,11 @@ export default function CreateRouterPage() {
             <SubTitle as="h3">link</SubTitle>
             <p>
                 A special function that takes a <InlineCode>router.links</InlineCode> property and create your URL. If you need to pass{" "}
-                <Anchor as={Link} href={router.links.queryString}>
+                <Anchor  href={router.links.queryString}>
                     query-string
                 </Anchor>{" "}
                 or{" "}
-                <Anchor as={Link} href={router.links.paths}>
+                <Anchor  href={router.links.paths}>
                     dynamic paths
                 </Anchor>
                 . By according your routes, this function will require different parameters. Check it out.
diff --git a/docs/src/pages/scroll.tsx b/docs/src/pages/scroll.tsx
@@ -0,0 +1,72 @@
+import { DocumentPage } from "../components/document-page";
+import { InlineCode } from "../components/inline-code";
+
+const code = `import { createMappedRouter, usePage, Scroll, useScroll } from "brouther";
+
+export const router = createMappedRouter({
+    index: { path: "/", element: <App /> }
+} as const);
+
+
+const Root = () => {
+    const page = usePage();
+    return <div> {page} </div>;
+};
+
+ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render(
+    <React.StrictMode>
+        <React.Suspense fallback={<React.Fragment />}>
+            <Brouther config={router.config}>
+                <Root />
+            </Brouther>
+        </React.Suspense>
+    </React.StrictMode>
+);`;
+
+const withFilter = `import { createMappedRouter, usePage } from "brouther";
+
+export const router = createMappedRouter({
+    index: { path: "/", element: <App /> }
+} as const);
+
+
+const Root = () => {
+    const page = usePage();
+    return <div>{page}</div>;
+};
+
+const Entry = () => {
+      const config = useBackendConfig();
+      
+      const filter = useCallback((route: ConfiguredRoute) => {
+        const result = config.validate(route.data.feature);
+        return result === "approved";
+      }, [response]);
+      
+      return (
+        <React.StrictMode>
+            <React.Suspense fallback={<React.Fragment />}>
+                <Brouther config={router.config} filter={filter}>
+                    <Root />
+                </Brouther>
+            </React.Suspense>
+        </React.StrictMode>
+      );
+
+};
+
+ReactDOM
+  .createRoot(document.getElementById("root") as HTMLElement)
+  .render(<Entry />);`;
+
+export default function BroutherPage() {
+    return (
+        <DocumentPage title="Brouther">
+            <p>
+                If you need to restore the scroll between page transitions, you can use the <InlineCode>{"<Scroll />"}</InlineCode> component. This
+                component enable you to restore the scroll position, based in the last position of screen.
+            </p>
+            <p>This component also enable the scroll based in anchors.</p>
+        </DocumentPage>
+    );
+}
diff --git a/docs/src/router.tsx b/docs/src/router.tsx
@@ -31,4 +31,5 @@ export const router = createRecordRouter({
         errorElement: <ErrorElementExample />,
         element: asyncComponent(() => import("./pages/routers/error-element")),
     },
+    scroll: { path: "/components/scroll", element: asyncComponent(() => import("./pages/scroll")) },
 } as const);
diff --git a/playground/src/main.tsx b/playground/src/main.tsx
@@ -1,10 +1,9 @@
 import React from "react";
 import ReactDOM from "react-dom/client";
 import App from "./App";
-import { Brouther } from "../../src";
+import { Brouther, Scroll } from "../../src";
 import { router } from "./routes";
 import "./index.css";
-import { Scroll } from "../../src/brouther/scroll";
 
 ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render(
     <React.StrictMode>
diff --git a/playground/src/pages/root.tsx b/playground/src/pages/root.tsx
@@ -1,7 +1,6 @@
-import { ActionProps, createFormPath, Form, jsonResponse, LoaderProps, redirectResponse, useDataLoader, useLoadingState } from "../../../src";
+import { ActionProps, createFormPath, Form, useScroll, jsonResponse, LoaderProps, redirectResponse, useDataLoader, useLoadingState } from "../../../src";
 import { useEffect, useState } from "react";
 import { Input } from "../components/input";
-import { useScroll } from "../../../src/brouther/scroll";
 
 type Route = "/?firstName=string&lastName=string&date=Date";
 
diff --git a/src/router/link.tsx b/src/router/link.tsx
@@ -9,10 +9,13 @@ const isLeftClick = (e: React.MouseEvent) => e.button === 0;
 
 const isMod = (event: React.MouseEvent): boolean => event.metaKey || event.altKey || event.ctrlKey || event.shiftKey;
 
-export type LinkProps<Path extends string> = Omit<
-    React.DetailedHTMLProps<React.AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>,
-    "href"
-> & { href: Path; state?: AnyJson; replace?: boolean } & (Paths.Parse<Paths.Pathname<Path>> extends null
+type AnchorProps = React.DetailedHTMLProps<React.AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>;
+
+export type LinkProps<Path extends string> = AnchorProps & {
+    href: Path;
+    state?: AnyJson;
+    replace?: boolean;
+} & (Paths.Parse<Paths.Pathname<Path>> extends null
         ? { paths?: undefined }
         : Omit<Path, string> extends string
         ? { paths: Paths.Parse<Paths.Pathname<Path>> }
