@stevederico/skateboard-ui 0.5.0

package/AppSidebar.jsx

@@ -0,0 +1,110 @@
+import { useNavigate, useLocation } from "react-router-dom";
+import constants from "@/constants.json";
+import { DynamicIcon } from "./lucide-react/dynamic"; // Verify this import
+import {
+  Sidebar,
+  SidebarContent,
+  SidebarMenu,
+  SidebarRail,
+  SidebarFooter,
+  SidebarHeader,
+  useSidebar,
+} from "./shadcn/ui/sidebar";
+
+
+// Use this if your DynamicIcon import isn't working
+const DynamicIconComponent = DynamicIcon
+
+export default function AppSidebar() {
+  const { open, setOpen } = useSidebar();
+  const navigate = useNavigate();
+  const location = useLocation();
+  const currentPage = (location.pathname.split("/")[2] || "").toLowerCase();
+
+  const handleNavigation = (url) => {
+    navigate(url);
+  };
+
+  return (
+    <Sidebar collapsible="icon" className="min-w-[40px]">
+      <SidebarHeader className="p-0">
+        <SidebarMenu>
+          <div className={`flex flex-row m-2 mt-8 mb-8 items-center  ${open ? "ml-4" : "justify-center ml-2"}`}>
+            <div className="bg-app dark:border rounded-lg flex aspect-square size-10 items-center justify-center">
+              <DynamicIconComponent
+                name={constants.appIcon}
+                size={28}
+                color="white"
+                strokeWidth={2}
+              />
+            </div>
+            {open && <div className="font-semibold ml-2 text-xl">{constants.appName}</div>}
+          </div>
+        </SidebarMenu>
+      </SidebarHeader>
+      <SidebarContent>
+        <ul className={`flex flex-col gap-2 p-2 ${open ? "" : "items-center"}`}>
+          {constants.pages.map((item) => {
+            const isActive = currentPage === item.url.toLowerCase();
+            return (
+              <li key={item.title}>
+                <div
+                  className={`cursor-pointer items-center flex w-full p-2 rounded-lg ${open ? "h-10" : "h-10 w-8"} ${isActive ? "bg-sidebar-accent text-sidebar-accent-foreground" : "hover:bg-sidebar-accent  hover:text-sidebar-accent-foreground"}`}
+                  onClick={() => handleNavigation(`/app/${item.url.toLowerCase()}`)}
+                >
+                  <span className="flex  w-full">
+                    <DynamicIconComponent
+                      name={item.icon}
+                      size={24}
+                      strokeWidth={1.5}
+                      className={"!size-6"}
+                    />
+                    {open && <span className="ml-2">{item.title}</span>}
+                  </span>
+                </div>
+              </li>
+            );
+          })}
+        </ul>
+      </SidebarContent>
+      <SidebarFooter>
+        <ul className={`flex flex-col gap-1  ${open ? "" : "items-center"}`}>
+          <li>
+            <div
+              className={`cursor-pointer flex w-full p-2 ${open ? "h-10" : "h-10 w-8"}`}
+              onClick={() => setOpen(!open)}
+            >
+              <span className="flex w-full items-center">
+                <DynamicIconComponent
+                  name="panel-left-close"
+                  size={18}
+                  strokeWidth={1.5}
+                  className={"!size-5"}
+                />
+                {open && <span className="ml-2 text-sm">Collapse</span>}
+              </span>
+            </div>
+          </li>
+          <li>
+            <div
+              className={`cursor-pointer items-center rounded-lg flex w-full p-2 ${open ? "h-10" : "h-10 w-8"} 
+              ${location.pathname.toLowerCase().includes("settings") ? "bg-sidebar-accent text-sidebar-accent-foreground" : "hover:bg-sidebar-accent  hover:text-sidebar-accent-foreground"}`}
+              onClick={() => handleNavigation("/app/settings")}
+            >
+              <span className="flex  w-full items-center">
+                <DynamicIconComponent
+                  name="settings"
+                  size={18}
+                  strokeWidth={1.5}
+                  className={"!size-5 "}
+                />
+                {open && <span className="ml-2 text-sm">Settings</span>}
+              </span>
+            </div>
+          </li>
+        </ul>
+      </SidebarFooter>
+      <SidebarRail />
+    </Sidebar>
+  );
+}

package/Header.jsx

@@ -0,0 +1,17 @@
+function Header(props) {
+    return (
+      <div className="flex w-full bg-background  py-8 px-4 border-b ">
+        <span className="font-semibold text-4xl">{props.title}</span>
+        {typeof props.buttonTitle !== "undefined" && (
+          <button
+            className={`ml-auto bg-app text-white px-4 py-2 rounded mr-0 ${props.buttonClass || ''}`}
+            onClick={props.onButtonTitleClick}
+          >
+            {props.buttonTitle}
+          </button>
+        )}
+      </div>
+    );
+  }
+
+  export default Header;

package/LandingView.jsx

@@ -0,0 +1,35 @@
+import constants from "@/constants.json";
+
+import { DynamicIcon } from "./lucide-react/dynamic"; // Verify this import
+
+export default function LandingView() {
+  return (
+    <div className="flex flex-col bg-white h-screen">
+      <header className="py-2 ">
+        <div className="flex items-center m-2 mx-auto">
+            <div className="bg-app rounded-lg flex items-center justify-center ml-3 w-8 h-8">
+              <DynamicIcon name={constants.appIcon} size={18} color="white" strokeWidth={2} />
+            </div>
+            <div className="font-semibold ml-2 text-2xl text-gray-700">{constants.appName}</div>
+          </div>
+      </header>
+      <main className="py-24 md:py-48 bg-app">
+        <div className="flex flex-col items-center mb-6">
+          <h1 className="text-center tracking-tight font-bold text-5xl md:text-7xl mb-10 text-white">{constants.tagline}</h1>
+          <a href={'/app'} target="_blank" className="mx-auto bg-white font-medium text-app shadow-sm rounded-3xl px-4 md:px-8 py-4 cursor-pointer">
+            Get Started
+          </a>
+        </div>
+      </main>
+      <footer className="py-4 mx-3">
+        <div className="flex gap-3 text-gray-500 hover:text-gray-600 cursor-pointer">
+          <div className="mr-auto">&copy; {new Date().getFullYear()} {constants.companyName}</div>
+          <a href={'/privacy'} target="_blank">Privacy</a>
+          <a href={'/terms'} target="_blank">Terms</a>
+          <a href={'/eula'} target="_blank" className="mr-3">EULA</a>
+        </div>
+
+      </footer>
+    </div>
+  )
+}

package/Layout.jsx

@@ -0,0 +1,38 @@
+import { Outlet } from 'react-router-dom';
+import TabBar from './TabBar.jsx'
+import { SidebarProvider, SidebarTrigger } from "./shadcn/ui/sidebar"
+import AppSidebar from "./AppSidebar"
+import { useEffect } from 'react';
+
+export default function Layout({ children }) {
+
+  useEffect(() => {
+    const root = document.documentElement;
+    let theme = localStorage.getItem('theme')
+    if (theme === 'dark') {
+      root.classList.add('dark');
+    } else {
+      root.classList.remove('dark');
+    }
+    localStorage.setItem('theme', theme);
+  }, []);
+
+  return (
+    <div className="min-h-screen">
+      <div className="fixed inset-0 flex overflow-hidden pt-[env(safe-area-inset-top)] pb-[env(safe-area-inset-bottom)] pl-[env(safe-area-inset-left)] pr-[env(safe-area-inset-right)]">
+        <SidebarProvider>
+          <AppSidebar />
+          <main className="flex-1 relative overflow-y-auto scrollbar-hide">
+            <Outlet />
+          </main>
+        </SidebarProvider>
+      </div>
+      <TabBar className="md:hidden" />
+    </div>
+  );
+}
+
+
+
+
+

package/NotFound.jsx

@@ -0,0 +1,13 @@
+export default function NotFound() {
+
+  return (
+    <>
+      <div className="w-full py-6">
+        <h1 className="text-center font-bold leading-tight my-6 text-4xl">Page Not Found</h1>
+        <p className="text-center font-light leading-tight my-6 text-black text-xl">Are you sure you have the right URL?</p>
+      </div>
+    </>
+  )
+}
+
+

package/README.md

@@ -0,0 +1,22 @@
+# skateboard-ui
+
+skateboard-ui is the component library for the @stevederico/skatebaord react boilerplate. 
+
+
+0.5.0
+* added lucide-react
+0.4.2
+* removed sign out and billing from noLogin apps
+0.4.1
+- fixed subscribe on Settings
+0.4.0
+- fixed stripe showCheckout
+0.3.9
+- fixed token expiration
+0.3.8
+- updated cookie handling
+
+
+
+
+

package/SettingsView.jsx

@@ -0,0 +1,144 @@
+import { useNavigate } from 'react-router-dom';
+import { getState } from '@/context.jsx';
+import { useEffect, useState } from 'react';
+import { DynamicIcon } from "./lucide-react/dynamic"; // Verify this import
+import constants from "@/constants.json";
+import pkg from '@package';
+import { showCheckout } from './Utilities';
+import Header from './Header.jsx';
+
+export default function SettingsView() {
+  const navigate = useNavigate();
+  const { state, dispatch } = getState();
+
+  function signOutClicked() {
+    dispatch({ type: 'CLEAR_USER', payload: null });
+    navigate('/signin');
+  }
+
+  return (
+    <div className="h-full min-h-screen flex flex-col">
+      {/* Navbar */}
+      <div className="flex border-b w-full items-center">
+        <Header
+          buttonClass=""
+          title={"Settings"}
+        >
+        </Header>
+        <div className="ml-auto mr-5 pt-1">
+          <ThemeToggle />
+        </div>
+      </div>
+
+      {/* Main content */}
+      <div className="flex flex-col flex-1 items-center p-4 gap-6">
+               {(constants.noLogin == false  || typeof constants.noLogin === 'undefined') && (
+
+        <div className="w-full bg-accent p-6 rounded flex items-center justify-between">
+          <div className="w-10 h-10 bg-app dark:text-black text-white flex justify-center items-center rounded-full">
+            <span className="uppercase">{state.user?.name?.split(' ').map(word => word[0]).join('') || "NA"}</span>
+          </div>
+          <div className="ml-4">
+            <div className="text font-medium block mb-1 capitalize">{state.user?.name || "No User"}</div>
+            <div className="text-sm text-gray-500">{state.user?.email || "no@user.com"}</div>
+          </div>
+          <div className="ml-auto">
+            <button className="bg-sidebar-background text-center border-foreground border ml-2 px-3 py-2 rounded text-sm border cursor-pointer" onClick={() => {
+              signOutClicked()
+            }}>Sign Out</button>
+          </div>
+        </div>
+               )}
+
+        {/* SUPPORT */}
+        <div className="flex gap-6 w-full">
+          <div className="bg-accent p-6 rounded flex-1">
+            <div className="flex items-center">
+              <div>
+                <div className="mb-2 font-medium">Contact Support</div>
+                <div className="text-sm text-gray-500">How can we help you?</div>
+              </div>
+              <div className="ml-auto">
+                <div onClick={() => { window.location.href = `mailto:${constants.companyEmail}`; }} className="bg-sidebar-background text-center border-foreground border ml-2 px-3 py-2 rounded text-sm whitespace-nowrap cursor-pointer">Support</div>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        {/* BILLING */}
+        {(constants.noLogin == false  || typeof constants.noLogin === 'undefined') && (
+          <div className="flex gap-6 mb-10 w-full">
+            <div className="bg-accent p-6 rounded flex-1">
+              <div className="flex items-center">
+                <div>
+                  <div className="mb-2 font-medium">Billing</div>
+                  <div className="text-sm text-gray-500">
+                    {state.user?.subStatus === null || typeof state.user?.subStatus === 'undefined'
+                      ? "Your plan is free"
+                      : ["active", "canceled"].includes(state.user?.subStatus)
+                        ? `Your plan ${state.user?.subStatus === "active" ? "renews" : "ends"} ${new Date(state.user.expires * 1000).toLocaleDateString('en-US')}`
+                        : `Your plan is ${state.user?.subStatus}`
+                    }
+                  </div>
+                </div>
+
+                <div className="ml-auto">
+                  {state.user?.stripeID ? (
+                    <div onClick={() => { showManage(state.user?.stripeID) }} className="bg-sidebar-background border-foreground border ml-2 px-3 py-2 rounded text-sm whitespace-nowrap cursor-pointer text-center">Manage</div>
+                  ) : (
+                    <div onClick={() => { showCheckout(state.user?.email) }} className="bg-app text-white border-app border ml-2 px-3 py-2 rounded text-sm whitespace-nowrap cursor-pointer">Subscribe</div>
+                  )}
+                </div>
+
+              </div>
+            </div>
+          </div>
+        )}
+      </div>
+
+      {/* Footer Links */}
+      <div className="mt-auto text-center">
+        <div className="m-2 mb-4 block text-sm text-gray-500 pb-24 md:pb-0">v{pkg.version}</div>
+      </div>
+    </div>
+
+
+  );
+}
+
+
+const ThemeToggle = () => {
+  const [theme, setTheme] = useState(() => {
+    return localStorage.getItem('theme') || 'light';
+  });
+
+  useEffect(() => {
+    const root = document.documentElement;
+    if (theme === 'dark') {
+      root.classList.add('dark');
+    } else {
+      root.classList.remove('dark');
+    }
+    localStorage.setItem('theme', theme);
+  }, [theme]);
+
+
+  const toggleTheme = () => {
+    setTheme((prevTheme) => (prevTheme === 'dark' ? 'light' : 'dark'));
+  };
+
+  return (
+    <button onClick={toggleTheme} className="cursor-pointer">
+      {theme === 'dark' &&
+        <span className="text-gray-500">
+          <DynamicIcon name={'sun'} size={24} />
+        </span>
+      }
+      {theme !== 'dark' &&
+        <span className="text-gray-500">
+          <DynamicIcon name={'moon'} size={24} />
+        </span>
+      }
+    </button>
+  );
+};

package/Sheet.jsx

@@ -0,0 +1,36 @@
+import { useState, useRef, useImperativeHandle, forwardRef } from 'react';
+import {
+  Sheet,
+  SheetContent,
+  SheetHeader,
+  SheetTitle,
+} from "./shadcn/ui/sheet"
+
+const MySheet = forwardRef(function MySheet(props, ref) {
+  const { title = "", minHeight = "auto", children } = props;
+  const [isOpen, setIsOpen] = useState(false);
+  
+  useImperativeHandle(ref, () => ({
+    show: () => setIsOpen(true),
+    hide: () => setIsOpen(false),
+    open: () => setIsOpen(true),
+    close: () => setIsOpen(false),
+    toggle: () => setIsOpen(prev => !prev)
+  }));
+
+  return (
+    <Sheet open={isOpen} onOpenChange={setIsOpen}>
+      <SheetContent className="bg-background w-full overflow-y-auto" side="bottom" style={{ minHeight }}>
+        <SheetHeader className={"mb-0"}>
+          <SheetTitle>{title}</SheetTitle>
+        </SheetHeader>
+        <span className="mx-4 mb-4">{children}</span>
+
+        
+      </SheetContent>
+    </Sheet>
+  );
+});
+
+export default MySheet;
+

package/SignInView.jsx

@@ -0,0 +1,128 @@
+import { cn } from "./shadcn/lib/utils"
+import { Button } from "./shadcn/ui/button"
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "./shadcn/ui/card"
+import { Input } from "./shadcn/ui/input"
+import { Label } from "./shadcn/ui/label"
+import { DynamicIcon } from "./lucide-react/dynamic"; // Verify this import
+
+import { useState } from 'react';
+import { useNavigate } from 'react-router-dom';
+import { getState } from '@/context.jsx';
+import constants from "@/constants.json";
+import { getBackendURL } from './Utilities'
+
+export default function LoginForm({
+  className,
+  ...props
+}) {
+  const [email, setEmail] = useState('');
+  const [password, setPassword] = useState('');
+  const [isSubmitting, setIsSubmitting] = useState(false);
+  const navigate = useNavigate();
+  const { dispatch } = getState();
+
+  const [errorMessage, setErrorMessage] = useState('')
+
+  async function signInClicked(e) {
+    e.preventDefault();
+    if (isSubmitting) return;
+    setIsSubmitting(true);
+    try {
+      const uri = `${getBackendURL()}/signin`;
+      console.log("URI ", uri)
+      const response = await fetch(uri, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ email, password })
+      });
+
+      if (response.ok) {
+        const data = await response.json();
+        document.cookie = `token=${data.token}; path=/; Secure; SameSite=Strict; expires=${new Date(data.tokenExpires * 1000).toUTCString()}`;
+        delete data.token;
+        dispatch({ type: 'SET_USER', payload: data });
+        navigate('/app');
+      } else {
+        setErrorMessage('Invalid Credentials');
+      }
+    } catch (error) {
+      setErrorMessage('Server Error');
+    } finally {
+      setIsSubmitting(false);
+    }
+  }
+
+  return (
+    <div className={cn("flex flex-col gap-6 p-4 md:max-w-[50%] mx-auto", className)} {...props}>
+      <Card>
+        <CardHeader>
+          <div className="flex flex-row items-center m-2 mx-auto">
+            <div className="bg-app dark:border rounded-lg flex aspect-square size-10 items-center justify-center">
+              <DynamicIcon name={constants.appIcon} size={24} color="white" strokeWidth={2} />
+            </div>
+            <div className="font-semibold ml-2 text-4xl">{constants.appName}</div>
+          </div>
+          {errorMessage && (
+            <div className="text-red-500 text-center font-semibold rounded-xl py-2">
+              {errorMessage}
+            </div>
+          )}
+        </CardHeader>
+        <CardContent>
+          <form onSubmit={signInClicked}>
+            <div className="flex flex-col gap-6">
+              <div className="grid gap-3">
+                <Label htmlFor="email">Email</Label>
+                <Input 
+                  id="email" 
+                  type="email" 
+                  placeholder="mcfly@example.com" 
+                  required 
+                  value={email}
+                  onChange={(e) => {
+                    setEmail(e.target.value);
+                    setErrorMessage('');
+                  }} 
+                />
+              </div>
+              <div className="grid gap-3">
+                <div className="flex items-center">
+                  <Label htmlFor="password">Password</Label>
+                </div>
+                <Input 
+                  id="password" 
+                  type="password" 
+                  placeholder="password" 
+                  required 
+                  value={password} 
+                  onChange={(e) => setPassword(e.target.value)} 
+                />
+              </div>
+              <div className="flex flex-col gap-3">
+                <Button 
+                  type="submit" 
+                  className="w-full cursor-pointer py-6"
+                  disabled={isSubmitting}
+                >
+                  {isSubmitting ? "Signing in..." : "Sign In"}
+                </Button>
+              </div>
+            </div>
+            <div className="mt-6 text-center text-sm">
+              Don&apos;t have an account?{" "}
+              <span onClick={() => navigate('/signup')} className="underline underline-offset-4 cursor-pointer">
+                Sign Up
+              </span>
+            </div>
+          </form>
+        </CardContent>
+      </Card>
+    </div>
+  );
+}

package/SignUpView.jsx

@@ -0,0 +1,132 @@
+import { cn } from "./shadcn/lib/utils"
+import { Button } from "./shadcn/ui/button"
+import {
+  Card,
+  CardContent,
+  CardHeader,
+} from "./shadcn/ui/card"
+import { Input } from "./shadcn/ui/input"
+import { Label } from "./shadcn/ui/label"
+import { DynamicIcon } from "./lucide-react/dynamic"; // Verify this import
+import { useState } from 'react';
+import { useNavigate } from 'react-router-dom';
+import constants from "@/constants.json";
+import { getState } from '@/context.jsx';
+import { getBackendURL } from './Utilities'
+
+export default function LoginForm({
+  className,
+  ...props
+}) {
+  const [email, setEmail] = useState('');
+  const [password, setPassword] = useState('');
+  const [name, setName] = useState('');
+  const navigate = useNavigate();
+  const { state, dispatch } = getState();
+  const [errorMessage, setErrorMessage] = useState('')
+
+  async function signUpClicked() {
+    try {
+      console.log(`${getBackendURL()}/signup`);
+      console.log(`name: ${name}`);
+      const response = await fetch(`${getBackendURL()}/signup`, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ email, password, name })
+      });
+
+      if (response.ok) {
+        const data = await response.json();
+
+        const expireDate = new Date();
+        expireDate.setTime(expireDate.getTime() + 24 * 60 * 60 * 1000);
+        const tokenValue = encodeURIComponent(data.token);
+        const hostname = window.location.hostname; 
+        document.cookie = `token=${tokenValue}; path=/; domain=${hostname}; expires=${expireDate.toUTCString()}`;
+        
+        delete data.token
+        dispatch({ type: 'SET_USER', payload: data });
+        navigate('/app');
+      } else {
+        setErrorMessage('Invalid Credentials')
+        console.log("error with /signup")
+      }
+    } catch (error) {
+      console.error('Signup failed:', error);
+      setErrorMessage('Server Error')
+    }
+  }
+
+  return (
+    (<div className={cn("flex flex-col gap-6 p-4 md:max-w-[50%] mx-auto", className)} {...props}>
+      <Card>
+        <CardHeader>
+          <div className="flex flex-row items-center m-2 mx-auto">
+            <div className="bg-app dark:border rounded-lg flex aspect-square size-10 items-center justify-center">
+              <DynamicIcon name={constants.appIcon} size={24} color="white" strokeWidth={2} />
+            </div>
+            <div className="font-semibold ml-2 text-4xl">{constants.appName}</div>
+          </div>
+          {errorMessage !== '' && (
+            <div className=" text-red-500 text-center font-semibold  rounded-xl py-2">
+              {errorMessage}
+            </div>
+          )}
+        </CardHeader>
+        <CardContent>
+          <form>
+            <div className="flex flex-col gap-6">
+              <div className="grid gap-3">
+                <Label htmlFor="name">Name</Label>
+                <Input id="name" placeholder="John Smith" required value={name}
+                  onChange={(e) => {
+                    setName(e.target.value);
+                    setErrorMessage('');
+                  }} />
+              </div>
+              <div className="grid gap-3">
+                <Label htmlFor="email">Email</Label>
+                <Input id="email" type="email" placeholder="mcfly@example.com" required value={email}
+                  onChange={(e) => {
+                    setEmail(e.target.value);
+                    setErrorMessage('');
+                  }} />
+              </div>
+              <div className="grid gap-3">
+                <div className="flex items-center">
+                  <Label htmlFor="password">Password</Label>
+                </div>
+                <Input id="password" type="password" placeholder="password" required value={password} onChange={(e) => setPassword(e.target.value)} />
+              </div>
+              <div className="flex flex-col gap-3">
+                <Button onClick={(e) => { e.preventDefault(); signUpClicked() }} className="w-full cursor-pointer py-6">
+                  Sign Up
+                </Button>
+              </div>
+            </div>
+            <div className="mt-6 text-center text-sm">
+              Already have an account?{" "}
+              <span onClick={(e) => { e.preventDefault(); navigate('/signin'); }} className="underline underline-offset-4 cursor-pointer">
+                Sign In
+              </span>
+            </div>
+
+          </form>
+        </CardContent>
+      </Card>
+
+      <div className="mt-6 text-center text-sm">
+        By registering you agree to our
+        <span onClick={(e) => { e.preventDefault(); navigate('/terms'); }} className="ml-1 underline underline-offset-4 cursor-pointer">
+          Terms of Service
+        </span>,
+        <span onClick={(e) => { e.preventDefault(); navigate('/eula'); }} className="ml-1 underline underline-offset-4 cursor-pointer">
+          EULA
+        </span>,
+        <span onClick={(e) => { e.preventDefault(); navigate('/privacy'); }} className="ml-1 underline underline-offset-4 cursor-pointer">
+          Privacy Policy
+        </span>
+      </div>
+    </div>)
+  );
+}