Merge remote-tracking branch 'origin/main'

IdoPesok · May 22, 2024 · 21f74a6 · 21f74a6
2 parents 35b5c9f + 7fc0115
commit 21f74a6
Show file tree

Hide file tree

Showing 16 changed files with 107 additions and 38 deletions.
diff --git a/.changeset/healthy-dots-hear.md b/.changeset/healthy-dots-hear.md
diff --git a/.changeset/poor-toes-teach.md b/.changeset/poor-toes-teach.md
diff --git a/examples/showcase/app/_components/outline.tsx b/examples/showcase/app/_components/outline.tsx
@@ -70,7 +70,7 @@ export function DocPageOutline({
   if (!headingElements || !headingElements.length) return null
 
   return (
-    <div className="flex-col gap-4 hidden xl:flex justify-start items-start fixed w-[220px] overflow-x-hidden truncate">
+    <div className="flex-col gap-4 hidden xl:flex justify-start items-start fixed w-[220px] overflow-x-hidden truncate mt-24">
       {[...headingElements].map((element) => {
         const id = element.id
         return (

diff --git a/examples/showcase/app/_components/side-nav-drawer.tsx b/examples/showcase/app/_components/side-nav-drawer.tsx
@@ -0,0 +1,44 @@
+
+
+import * as React from "react"
+import { Button } from "@/components/ui/button"
+import {
+    Drawer,
+    DrawerClose,
+    DrawerContent,
+    DrawerDescription,
+    DrawerFooter,
+    DrawerHeader,
+    DrawerTitle,
+    DrawerTrigger,
+} from "@/components/ui/drawer"
+import { Menu } from "lucide-react"
+import { getDocPosts } from "@/lib/docs"
+import SideNav from "./side-nav"
+import { useState } from "react"
+
+export default function SideNavDrawer({
+    docPosts,
+}: {
+    docPosts: ReturnType<typeof getDocPosts>
+}) {
+    const [open, setOpen] = useState(false);
+
+    return (
+        <Drawer open={open} onOpenChange={setOpen}>
+            <DrawerTrigger asChild className="flex sm:hidden">
+                <Button size={"icon"} variant={"outline"}>
+                    <Menu className="h-4 w-4" />
+                </Button>
+            </DrawerTrigger>
+            <DrawerContent >
+                <div className="mx-auto m-10 w-full max-w-sm">
+
+                    <div className="px-8 pb-0" onClick={() => setOpen(false)}>
+                        <SideNav docPosts={docPosts} className="relative contents py-20" />
+                    </div>
+                </div>
+            </DrawerContent>
+        </Drawer>
+    )
+}
diff --git a/examples/showcase/app/_components/side-nav.tsx b/examples/showcase/app/_components/side-nav.tsx
@@ -21,13 +21,13 @@ const SideNavLink = ({
   const pathname = usePathname()
 
   return (
-    <Link href={href}>
+    <Link href={href} >
       <Button
         variant={"ghost"}
         className={cn(
           "w-full justify-start gap-3 -ml-3 text-muted-foreground transition-colors duration-200",
           isActive(pathname, href) &&
-            "bg-foreground text-background hover:bg-foreground/80 hover:text-background"
+          "bg-foreground text-background hover:bg-foreground/80 hover:text-background"
         )}
         size={"sm"}
       >
@@ -39,8 +39,10 @@ const SideNavLink = ({
 
 export default function SideNav({
   docPosts,
+  className
 }: {
-  docPosts: ReturnType<typeof getDocPosts>
+  docPosts: ReturnType<typeof getDocPosts>,
+  className?: string
 }) {
   const pathname = usePathname()
   let lastSeenGroup = ""
@@ -68,7 +70,7 @@ export default function SideNav({
 
   return (
     <div
-      className="flex-none w-[200px] hidden fixed top-[122px] z-10 md:flex lg:flex flex-col gap-2 -ml-3 pl-3 overflow-y-auto"
+      className={cn("flex-none w-[200px] hidden fixed top-[122px] z-10 lg:flex flex-col gap-2 -ml-3 pl-3 overflow-y-auto", className)}
       style={{
         maxHeight: "calc(100vh - 180px)",
       }}

diff --git a/examples/showcase/app/_components/top-nav.tsx b/examples/showcase/app/_components/top-nav.tsx
@@ -7,6 +7,7 @@ import { cn } from "@/lib/utils"
 import { Clapperboard, Coffee, GithubIcon, Network, TwitterIcon } from "lucide-react"
 import Link from "next/link"
 import { usePathname } from "next/navigation"
+import SideNavDrawer from "./side-nav-drawer"
 
 export default function TopNav({
   docPosts,
@@ -16,13 +17,16 @@ export default function TopNav({
   const pathname = usePathname()
 
   return (
-    <div className="sticky h-fit top-0 bg-background/80 backdrop-blur z-20  overscroll-none">
-      <div className="border-b border-muted flex flex-row gap-10 items-center w-full px-10 max-w-screen py-4">
-        <h3 className="whitespace-nowrap font-bold flex gap-3 items-center">
-          <Network className="size-5" />
-          Zod Server Actions
-        </h3>
-        <div className="flex-1 flex-row gap-8 items-center px-4  text-sm font-medium">
+    <div className="fixed w-screen h-fit top-0 bg-background/80 backdrop-blur z-20  overscroll-none">
+      <div className="border-b border-muted flex flex-row gap-10 items-center w-full px-10 max-w-screen py-4 sm:justify-start justify-between">
+        <Link passHref href="/introduction">
+          <h3 className="whitespace-nowrap font-bold flex gap-3 items-center">
+            <Network className="size-5" />
+            ZSA
+          </h3>
+        </Link>
+
+        <div className="flex-1 flex-row gap-8 items-center px-4 text-sm font-medium hidden sm:flex">
           <Link
             href="/introduction"
             className={cn(
@@ -35,17 +39,19 @@ export default function TopNav({
           </Link>
         </div>
         <div className="flex justify-end gap-2 items-center">
+          <SideNavDrawer docPosts={docPosts} />
           <Link
             href="https://github.com/IdoPesok/zsa"
             passHref
             target="_blank"
             rel="noopener"
+            className="hidden sm:flex"
           >
             <Button size={"icon"} variant={"outline"}>
               <GithubIcon className="h-4 w-4" />
             </Button>
           </Link>
-          <ThemeToggle />
+          <ThemeToggle className="hidden sm:flex" />
         </div>
       </div>
     </div>

diff --git a/examples/showcase/app/layout.tsx b/examples/showcase/app/layout.tsx
@@ -13,7 +13,7 @@ import "./globals.css"
 const inter = Inter({ subsets: ["latin"] })
 
 export const metadata: Metadata = {
-  title: "Zod Server Actions",
+  title: "ZSA",
   description: "Build scalable, lightweight server actions.",
 }
 
@@ -39,11 +39,12 @@ export default function RootLayout({
             disableTransitionOnChange
           >
             <TooltipProvider delayDuration={0}>
-              <div className="flex flex-col gap-6">
+
+              <div className="flex flex-col gap-6 overflow-hidden">
                 <TopNav docPosts={docPosts} />
-                <div className="flex flex-row gap-10 mx-10 px-4 max-w-screen-xl w-full pt-2 pb-4">
+                <div className="flex flex-row gap-10 mx-2 sm:mx-10 px-4 max-w-screen-xl w-full pt-2 pb-4">
                   <SideNav docPosts={docPosts} />
-                  <div className="flex-1 overflow-hidden max-w-full lg:pl-[270px] md:pl-[270px] xl:flex flex-row gap-10 justify-end">
+                  <div className="flex-1 overflow-hidden max-w-full lg:pl-[270px] xl:flex flex-row gap-10 justify-end">
                     {children}
                   </div>
                 </div>

diff --git a/examples/showcase/components/markdown/markdown-container.tsx b/examples/showcase/components/markdown/markdown-container.tsx
@@ -108,7 +108,7 @@ export default function MarkdownContainer(props: MDXRemoteProps) {
   }
 
   return (
-    <div className="prose break-words leading-7 dark:prose-invert prose-p:leading-relaxed prose-pre:p-0 pb-10">
+    <div className="prose break-words leading-7 dark:prose-invert prose-p:leading-relaxed prose-pre:p-0 pb-10 mt-24">
       <MDXRemote {...props} components={components} />
     </div>
   )

diff --git a/examples/showcase/content/form-data.mdx b/examples/showcase/content/form-data.mdx
@@ -8,7 +8,7 @@ groupOrder: 100
 
 In some cases, you might want to handle `FormData` directly in your server actions, especially when working with forms in client-side components. `zsa` supports `FormData` as an input type, making it easy to integrate form submissions with your server actions.
 
-## Creating a Server Action with FormData
+## Server Action with FormData
 
 Here's an example of how to create a server action that accepts `FormData`:
 
@@ -35,7 +35,7 @@ export const myFormDataAction = createServerAction()
 
 In this example, the server action `myFormDataAction` is configured to accept `FormData` by specifying the `type: "formData"` option. The `input` schema defines the expected fields and their types.
 
-## Calling the Action from the Client
+## Form data client example
 
 To call this server action from a client component, you can use a standard HTML form with the `action` attribute set to the server action function:
 

diff --git a/examples/showcase/content/introduction.mdx b/examples/showcase/content/introduction.mdx
@@ -6,11 +6,11 @@ groupOrder: 0
 
 #### Welcome to `zsa`! 👋
 
-# Zod Server Actions
+# ZSA
 
-`zsa` is the best library for building typesafe server actions in NextJS. Built for a simple, scalable developer experience, some majors features include...
+`zsa` is the best library for building typesafe server actions in NextJS. Built for a simple, scalable developer experience. Some majors features include...
 
-- Validated inputs/outputs
+- Validated inputs/outputs with zod (hence the name *Zod Server Actions*)
 - Procedures (aka middleware) that pass context to your server actions
 - [React Query](https://tanstack.com/query/latest/docs/framework/react/overview) integration for querying server actions in client components
 

diff --git a/packages/zsa-react-query/CHANGELOG.md b/packages/zsa-react-query/CHANGELOG.md
@@ -1,5 +1,14 @@
 # server-actions-wrapper
 
+## 0.0.2
+
+### Patch Changes
+
+- b142dd6: Added README
+- Updated dependencies [b592762]
+- Updated dependencies [b142dd6]
+  - [email protected]
+
 ## 0.0.1
 
 ### Patch Changes

diff --git a/packages/zsa-react-query/package.json b/packages/zsa-react-query/package.json
@@ -1,6 +1,6 @@
 {
   "name": "zsa-react-query",
-  "version": "0.0.1",
+  "version": "0.0.2",
   "type": "module",
   "publishConfig": {
     "access": "public"

diff --git a/packages/zsa-react/CHANGELOG.md b/packages/zsa-react/CHANGELOG.md
@@ -4,6 +4,15 @@
 
 ### Patch Changes
 
+- b142dd6: Added README
+- Updated dependencies [b592762]
+- Updated dependencies [b142dd6]
+  - [email protected]
+
+## 0.0.1
+
+### Patch Changes
+
 - 0102ffe: Initial push
 - Updated dependencies [0102ffe]
   - [email protected]

diff --git a/packages/zsa-react/package.json b/packages/zsa-react/package.json
@@ -1,6 +1,6 @@
 {
   "name": "zsa-react",
-  "version": "0.0.0",
+  "version": "0.0.1",
   "type": "module",
   "publishConfig": {
     "access": "public"

diff --git a/packages/zsa/CHANGELOG.md b/packages/zsa/CHANGELOG.md
@@ -1,5 +1,15 @@
 # server-actions-wrapper
 
+## 0.1.0
+
+### Minor Changes
+
+- b592762: Added form data type to input
+
+### Patch Changes
+
+- b142dd6: Added README
+
 ## 0.0.1
 
 ### Patch Changes

diff --git a/packages/zsa/package.json b/packages/zsa/package.json
@@ -1,6 +1,6 @@
 {
   "name": "zsa",
-  "version": "0.0.1",
+  "version": "0.1.0",
   "publishConfig": {
     "access": "public"
   },