nitro-web 0.0.20 → 0.0.22

package/_example/components/partials/layouts.tsx

@@ -1,10 +1,52 @@
-import { Layout1 as L1, Layout2 as L2 } from 'nitro-web'
-import Logo from '../../client/imgs/logo/logo.svg'
 import { Config } from 'types'
+import { Outlet } from 'react-router-dom'
+import { Message, Sidebar } from 'nitro-web'
+import Logo from '../../client/imgs/logo/logo.svg'
+
+// Dashboard, app screens (only the <Outlet/> receives `params` and `location`)
+export function Layout1() {
+  return (
+    <div class="bg-[#F3F3F3]">
+      <Message />
+      <div class="flex-1">
+        <div class="max-w-[1800px] mx-auto lg:flex min-h-[100%] w-[100%] bg-[#FDFDFD] shadow-[0_0_40px_0_rgb(237_237_237)]">
+          <Sidebar Logo={Logo} />
+          <div class="py-10 px-14 flex-1">
+            <Outlet />
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+// Signin, reset password, etc
+export function Layout2({ config }: { config: Config }) {
+  return (
+    <div class="bg-[#F3F3F3]">
+      <Message />
+      <div class="max-w-[1800px] mx-auto bg-[#FDFDFD] shadow-[0_0_40px_0_rgb(237_237_237)] flex flex-col min-h-full w-full">
+        <div class="max-w-[700px] mx-auto flex-1 w-full px-5 py-10">
+          <div class="border-b mb-6">
+            <Link to="/signin" class="logo relative block -ml-1 -mt-1 p-1">
+              <Logo width="60" />
+            </Link>
+          </div>
+          <Outlet />
+        </div>
 
-const links = [
-  { name: 'Nitro on Github', to: 'https://github.com/boycce/nitro-web', initial: 'G' },
-]
+        <div class="max-w-[700px] mx-auto w-full px-5 pb-4 flex items-center text-sm text-[#1F1F1F]">
+          <ul class="flex-1 flex gap-4 list-style-none">
+            <li><Link class="underline1" to="/">Home</Link></li>
+            <li><Link class="underline1" to="/about">About</Link></li>
+            <li><Link class="underline1" to="/support">Support</Link></li>
+          </ul>
+          <div>
+            2025 © {config?.name || 'Nitro'}
+          </div>
+        </div>
 
-export const Layout1 = ({ config }: { config: Config }) => { return <L1 Logo={Logo} links={links} config={config} /> }
-export const Layout2 = ({ config }: { config: Config }) => { return <L2 Logo={Logo} config={config} /> }
+      </div>
+    </div>
+  )
+}

package/client/app.tsx

@@ -30,7 +30,7 @@ type Route = {
   redirect?: string
 }
 
-export async function setupApp(config: Config, layouts: React.FC[]) {
+export async function setupApp(config: Config, layouts: React.FC<LayoutProps>[]) {
   // Fetch state and init app
   const settings: Settings = {
     beforeApp: config.beforeApp || beforeApp,

package/client/index.ts

@@ -45,10 +45,6 @@ export { Location } from '../components/partials/form/location'
 export { Select, getSelectStyle } from '../components/partials/form/select'
 export { Toggle } from '../components/partials/form/toggle'
 
-// Component Layouts
-export { Layout1 } from '../components/partials/layout/layout1'
-export { Layout2 } from '../components/partials/layout/layout2'
-
 // Component Other
 export { IsFirstRender } from '../components/partials/is-first-render'
 

package/components/partials/element/sidebar.tsx

@@ -2,7 +2,6 @@
 import { Dialog, DialogBackdrop, DialogPanel, TransitionChild } from '@headlessui/react'
 import avatarImg from 'nitro-web/client/imgs/avatar.jpg'
 import { isDemo } from 'nitro-web'
-import { Config } from 'types'
 import {
   Bars3Icon,
   HomeIcon,
@@ -14,17 +13,16 @@ import {
 const sidebarWidth = 'lg:w-80'
 
 export type SidebarProps = {
-  Logo: React.FC<{ width?: string, height?: string, alt?: string }>;
+  Logo?: React.FC<{ width?: string, height?: string }>;
   menu?: { name: string; to: string; Icon: React.FC<{ className?: string }> }[]
   links?: { name: string; to: string; initial: string }[]
-  config?: Config
 }
 
 function classNames(...classes: string[]) {
   return classes.filter(Boolean).join(' ')
 }
 
-export function Sidebar({ Logo, menu, links, config }: SidebarProps) {
+export function Sidebar({ Logo, menu, links }: SidebarProps) {
   const [sidebarOpen, setSidebarOpen] = useState(false)
   return (
     <>
@@ -47,14 +45,14 @@ export function Sidebar({ Logo, menu, links, config }: SidebarProps) {
                 </button>
               </div>
             </TransitionChild>
-            <SidebarContents Logo={Logo} menu={menu} links={links} config={config} />
+            <SidebarContents Logo={Logo} menu={menu} links={links} />
           </DialogPanel>
         </div>
       </Dialog>
 
       {/* Static sidebar for desktop */}
       <div className={`hidden lg:fixed lg:inset-y-0 lg:z-50 lg:flex lg:flex-col ${sidebarWidth}`}>
-        <SidebarContents Logo={Logo} menu={menu} links={links} config={config} />
+        <SidebarContents Logo={Logo} menu={menu} links={links} />
       </div>
       
       {/* mobile sidebar closed */}
@@ -73,7 +71,7 @@ export function Sidebar({ Logo, menu, links, config }: SidebarProps) {
   )
 }
 
-function SidebarContents ({ Logo, menu, links, config }: SidebarProps) {
+function SidebarContents ({ Logo, menu, links }: SidebarProps) {
   const location = useLocation()
   const [store] = useTracked()
   const user = store.user
@@ -92,18 +90,19 @@ function SidebarContents ({ Logo, menu, links, config }: SidebarProps) {
   ]
 
   const _links = links || [
-    { name: 'Team 1', to: '#', initial: 'T' },
-    { name: 'Team 2', to: '#', initial: 'H' },
+    { name: 'Nitro on Github', to: 'https://github.com/boycce/nitro-web', initial: 'G' },
   ]
 
   // Sidebar component, swap this element with another sidebar if you like
   return (
     <div className="flex grow flex-col gap-y-8 overflow-y-auto bg-white py-5 px-10 lg:border-r lg:border-gray-200">
-      <div className="flex h-16 shrink-0 items-center">
-        <Link to="/">
-          <Logo alt={config?.name || 'Nitro'} width="70" height={undefined} />
-        </Link>
-      </div>
+      {Logo && (
+        <div className="flex h-16 shrink-0 items-center">
+          <Link to="/">
+            <Logo width="70" height={undefined} />
+          </Link>
+        </div>
+      )}
       <nav className="flex flex-1 flex-col">
         <ul role="list" className="flex flex-1 flex-col gap-y-7">
           <li>

package/package.json

@@ -3,7 +3,7 @@
   "description": "Nitro is a battle-tested, modular base project to turbocharge your projects, styled using Tailwind 🚀",
   "repository": "github:boycce/nitro-web",
   "homepage": "https://boycce.github.io/nitro-web/",
-  "version": "0.0.20",
+  "version": "0.0.22",
   "main": "./client/index.ts",
   "type": "module",
   "keywords": [

package/readme.md

@@ -11,7 +11,7 @@ npm i nitro-web
 ### Install
 
 1. Copy ./_example into your project
-2. In package.json, replace `"nitro-web": "file:.."` with `"nitro-web": "~0.0.20"`
+2. In package.json, replace `"nitro-web": "file:.."` with `"nitro-web": "~0.0.22"`
 3. In package.json, replace `"../.eslintrc.json"` with `"./node_modules/nitro-web/.eslintrc.json"`
 4. Run `npm i`
 

package/types.ts

@@ -44,4 +44,6 @@ export type Store = {
   message?: MessageObject | string | null
   user?: User | null,
   apiAvailable?: boolean
-}
+}
+
+export type Svg = React.FC<React.SVGProps<SVGElement>>

package/components/partials/layout/layout1.tsx

@@ -1,29 +0,0 @@
-import { css } from 'twin.macro'
-import { Outlet } from 'react-router-dom'
-import { Message, Sidebar, SidebarProps } from 'nitro-web'
-
-export function Layout1({ Logo, menu, links, config }: SidebarProps) {
-  // Dashboard, app screens (only the <Outlet/> receives `params` and `location`)
-  return (
-    <div css={style} class="bg-[#F3F3F3]">
-      <Message />
-      <div class="flex-1">
-        <div class="wrapper lg:flex min-h-[100%] w-[100%] bg-[#FDFDFD] shadow-[0_0_40px_0_rgb(237_237_237)]">
-          <Sidebar Logo={Logo} menu={menu} links={links} config={config} />
-          <div class="py-10 px-14 flex-1">
-            <Outlet />
-          </div>
-        </div>
-      </div>
-    </div>
-  )
-}
-
-const style = css`
-  .wrapper {
-    position: relative;
-    max-width: 1800px;
-    margin: 0 auto;
-  }
-`
-

package/components/partials/layout/layout2.tsx

@@ -1,48 +0,0 @@
-import { css } from 'twin.macro'
-import { Outlet } from 'react-router-dom'
-import { Message } from 'nitro-web'
-import { Config } from 'types'
-
-// Signin, reset password, etc
-export function Layout2({ Logo, config }: { Logo: React.ComponentType<{ alt: string; width: string }>, config: Config }) {
-  return (
-    <div css={style} class="bg-[#F3F3F3]">
-      <Message />
-      <div class="wrapper bg-[#FDFDFD] shadow-[0_0_40px_0_rgb(237_237_237)] flex flex-col min-h-full w-full">
-        <div class="flex-1 w-full wrapper-2 px-5 py-10">
-          <div class="border-b mb-6">
-            <Link to="/signin" class="logo relative block -ml-1 -mt-1 p-1">
-              <Logo alt={config?.name || 'Nitro'} width="60" />
-            </Link>
-          </div>
-          <Outlet />
-        </div>
-
-        <div class="wrapper-2 w-full px-5 pb-4 flex items-center text-sm text-[#1F1F1F]">
-          <ul class="flex-1 flex gap-4 list-style-none">
-            <li><Link class="underline1" to="/">Home</Link></li>
-            <li><Link class="underline1" to="/about">About</Link></li>
-            <li><Link class="underline1" to="/support">Support</Link></li>
-          </ul>
-          <div>
-            2025 © {config?.name || 'Nitro'}
-          </div>
-        </div>
-
-      </div>
-    </div>
-  )
-}
-
-const style = css`
-  .wrapper {
-    position: relative;
-    max-width: 1800px;
-    margin: 0 auto;
-  }
-  .wrapper-2 {
-    max-width: 700px;
-    margin: 0 auto;
-    box-sizing: border-box;
-  }
-`