Skip to content

Commit 0e71896

Browse files
OrionFableOrionFable
committed
Merge pull request #47 from g4rcez/release
2 parents 862d5ec + f0eca99 commit 0e71896

File tree

16 files changed

+2477
-51
lines changed

16 files changed

+2477
-51
lines changed

‎docs/package.json‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,8 @@
1010
},
1111
"dependencies": {
1212
"@radix-ui/react-icons": "1.3.0",
13-
"brouther": "4.4.4",
13+
"add": "2.0.6",
14+
"brouther": "4.5.0",
1415
"prism-react-renderer": "1.3.5",
1516
"react": "18.2.0",
1617
"react-dom": "18.2.0",

‎docs/pnpm-lock.yaml‎

Lines changed: 69 additions & 17 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎docs/src/components/anchor.tsx‎

Lines changed: 9 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,12 @@
11
import React from "react";
22
import { Link, LinkProps } from "brouther";
33

4-
export const Anchor = <TPath extends string>(props: LinkProps<TPath>) => {
5-
return (
6-
<Link
7-
{...props}
8-
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 ${
9-
props.className ?? ""
10-
}`}
11-
/>
12-
);
13-
};
4+
export const Anchor = <TPath extends string>(props: LinkProps<TPath>) => (
5+
<Link
6+
{...props}
7+
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 ${
8+
props.className ?? ""
9+
}`}
10+
/>
11+
);
12+

‎docs/src/components/document-page.tsx‎

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -67,8 +67,13 @@ export const DocumentPage = (props: React.PropsWithChildren<Props>) => {
6767
items: [
6868
{ title: "useNavigation", link: router.links.useNavigation },
6969
{ title: "usePage", link: router.links.usePage },
70+
{ title: "usePaths", link: router.links.usePaths },
7071
],
7172
},
73+
{
74+
title: "About",
75+
items: [{ title: "Decision Records", link: router.links.decisions }],
76+
},
7277
];
7378

7479
const allLinks: PageItems = pages.flatMap((x) => x.items);
@@ -90,7 +95,7 @@ export const DocumentPage = (props: React.PropsWithChildren<Props>) => {
9095
<button onClick={() => setMenu((p) => (p === "closed" ? "open" : "closed"))} className="w-full block border-b md:hidden">
9196
<h3 className="font-extrabold text-2xl mb-4">{nav?.current.title} +</h3>
9297
</button>
93-
<aside className="w-full max-w-[220px] border-r-slate-400 block sticky top-20">
98+
<aside className="w-full flex-1 max-w-[220px] border-r-slate-400 block sticky hover:overflow-y-scroll overflow-y-auto max-h-[80vh] top-20">
9499
<ul
95100
data-state={menu}
96101
className="transition-transform data-[state=closed]:h-0 data-[state=closed]:scale-0 data-[state=closed]:opacity-0 data-[state=open]:scale-100 origin-top duration-300 data-[state=open]:h-auto data-[state=open]:opacity-100 md:h-auto md-scale-100 md:opacity-100"
@@ -115,7 +120,7 @@ export const DocumentPage = (props: React.PropsWithChildren<Props>) => {
115120
))}
116121
</ul>
117122
</aside>
118-
<div className="gap-8 flex flex-col flex-nowrap w-full flex-shrink max-w-5xl container">
123+
<div className="gap-8 flex flex-col flex-nowrap w-full flex-shrink max-w-5xl container bg-white z-[2]">
119124
<header className="w-full">
120125
<h1 className="text-5xl font-extrabold">{props.title}</h1>
121126
</header>

‎docs/src/main.tsx‎

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -15,18 +15,18 @@ const NotFound = () => {
1515
);
1616
};
1717

18-
const Root = () => {
19-
return (
20-
<AppShell>
21-
<Outlet notFound={<p>Not found route...Outlet</p>} />
22-
</AppShell>
23-
);
24-
};
18+
const Root = () => (
19+
<AppShell>
20+
<Outlet notFound={<p>Not found route...Outlet</p>} />
21+
</AppShell>
22+
);
23+
24+
const flags = { openExternalLinksInNewTab: true };
2525

2626
ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render(
2727
<React.StrictMode>
2828
<React.Suspense fallback={<React.Fragment />}>
29-
<Brouther ErrorElement={<NotFound />} config={router.config}>
29+
<Brouther flags={flags} ErrorElement={<NotFound />} config={router.config}>
3030
<Scroll behavior="smooth">
3131
<Root />
3232
</Scroll>

‎docs/src/pages/decision-records.tsx‎

Lines changed: 47 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
1+
import { DocumentPage } from "../components/document-page";
2+
import { SubTitle } from "../components/subtitle";
3+
import { Code } from "../components/code";
4+
import { router } from "../router";
5+
import { Anchor } from "../components/anchor";
6+
import { InlineCode } from "../components/inline-code";
7+
8+
const code = `import { Link } from "brouther";
9+
10+
type YourQuery = { text: string[] };
11+
12+
const Component = <Link href="/?text=string[]" query={{ text: ["first line"] }}>Link</Link>;`;
13+
14+
export default function DecisionRecords() {
15+
return (
16+
<DocumentPage title="Decision Records">
17+
<p>
18+
At this page, all decision records will be documented. Here you can find the motivation of some decisions, like "Why types at
19+
query-string?" or "usePaths vs useParams".
20+
</p>
21+
<SubTitle>Why types at query string?</SubTitle>
22+
<p>
23+
If you need to use the URL as state, you will use query string. But without types you're lost. And brouther will recover you on that
24+
with URL types at query-string using Typescript primitives and Arrays.
25+
</p>
26+
<p>Look at this code below</p>
27+
<Code code={code} />
28+
<p>
29+
Every query string defined at your <Anchor href={router.links.linkComponent}>href</Anchor> or at{" "}
30+
<Anchor href={router.links.createRouter}>brouther config</Anchor> will be transformed into a type using the brouther{" "}
31+
<Anchor href="https://github.com/g4rcez/brouther/blob/6a44d3db1f6bca256d7989ddd6946bea5926066a/src/types/index.ts#L62">
32+
string parser
33+
</Anchor>
34+
. You can play with this type parser at <Anchor href="https://tsplay.dev/WPMKew">this playground</Anchor>
35+
</p>
36+
<SubTitle>Why usePaths instead useParams?</SubTitle>
37+
<p>
38+
You're familiar with <Anchor href="https://reactrouter.com/en/main">react-router</Anchor> or{" "}
39+
<Anchor href="https://tanstack.com/router">tanstack-router</Anchor> you should know the hook <InlineCode>useParams</InlineCode>.
40+
</p>
41+
<p>
42+
But why brouther doesn't have this hook? Ops...brouther does have. But the name is{" "}
43+
<Anchor href={router.links.usePaths}>usePaths</Anchor>
44+
</p>
45+
</DocumentPage>
46+
);
47+
}

‎docs/src/pages/hooks/use-paths.tsx‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
import { DocumentPage } from "../../components/document-page";
2+
import { Code } from "../../components/code";
3+
import { Callout } from "../../components/callout";
4+
import { InlineCode } from "../../components/inline-code";
5+
6+
const code = `import { usePaths } from "brouther";
7+
8+
export const App = () => {
9+
// access example.com/users/18
10+
const paths = usePaths();
11+
console.log(paths); // { id: 18 }
12+
};`;
13+
14+
export default function HookUsePage() {
15+
return (
16+
<DocumentPage title="usePaths">
17+
<p>
18+
usePaths it's the same of useParams in react-router ou tankstack-router. This hook will return the dynamic paths at your URL, like the pattern <InlineCode>/users/:id</InlineCode>.
19+
</p>
20+
<Code code={code} />
21+
<Callout type="info" title="Tips and tricks">
22+
Brouther adopt <InlineCode>usePaths</InlineCode> instead <InlineCode>useParams</InlineCode> to avoid confusion with{" "}
23+
<InlineCode>URLSearchParams</InlineCode>, that is a query string (part of URL after the ?).
24+
</Callout>
25+
</DocumentPage>
26+
);
27+
}

‎docs/src/router.tsx‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import { ErrorElementExample } from "./pages/routers/error-element";
44

55
export const router = createRecordRouter({
66
actions: { path: "/form/actions", element: asyncComponent(() => import("./pages/form/actions")) },
7-
decisions: { path: "/decision-records", element: <p>Decision Records</p> },
7+
decisions: { path: "/decision-records", element: asyncComponent(() => import("./pages/decision-records")) },
88
aliases: { path: "/route-alias", element: <Fragment /> },
99
basicSetup: { path: "/basic-setup", element: asyncComponent(() => import("./pages/basic-setup")) },
1010
brouther: { path: "/components/brouther", element: asyncComponent(() => import("./pages/brouther")) },
@@ -27,7 +27,8 @@ export const router = createRecordRouter({
2727
queryString: { path: "/query-string", element: <Fragment /> },
2828
tricksAndTips: { path: "/form/tricks-and-tips", element: asyncComponent(() => import("./pages/form/tricks")) },
2929
usePage: { path: "/hooks/use-page", element: asyncComponent(() => import("./pages/hooks/use-page")) },
30-
useNavigation: { path: "/hooks/use-navigation", element: asyncComponent(() => import("./pages/hooks/use-page")) },
30+
usePaths: { path: "/hooks/use-paths", element: asyncComponent(() => import("./pages/hooks/use-paths")) },
31+
useNavigation: { path: "/hooks/use-navigation", element: asyncComponent(() => import("./pages/hooks/use-navigation")) },
3132
errorElement: {
3233
path: "/routers/error-element",
3334
errorElement: <ErrorElementExample />,

‎package-lock.json‎

Lines changed: 2 additions & 2 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
{
22
"name": "brouther",
33
"type": "module",
4-
"version": "4.4.4",
4+
"version": "4.5.0",
55
"source": "./src/index.ts",
66
"types": "./dist/index.d.ts",
77
"main": "./dist/index.js",

0 commit comments

Comments
 (0)