@stevederico/skateboard-ui 2.3.1 → 2.5.0

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # CHANGELOG
 
+2.5.0
+
+  Add configurable LandingView constants
+  Add navLinks constant
+  Add pricing.title constant
+  Add pricing.extras constant
+  Add ctaHeading constant
+  Add footerLinks constant
+  Add copyrightText constant
+  Use stripeProducts features and interval
+  Conditionally render pricing section
+
+2.4.0
+
+  Add sidebarCollapsed constant
+
 2.3.1
 
   Remove sidebar rail hover border

package/README.md

@@ -123,6 +123,24 @@ const constants = {
     }
   ],
 
+  // Optional: Landing page customization
+  navLinks: [                                    // Override header nav links
+    { label: "Features", href: "#features" },
+    { label: "Pricing", href: "#pricing" },
+    { label: "Blog", href: "/blog" }
+  ],
+  pricing: {
+    title: "Simple Pricing",                     // Pricing section heading
+    extras: ["Priority Customer Support", "Cancel anytime"]  // Extra bullets after product features
+  },
+  ctaHeading: "Ready To Build?",                 // CTA section heading
+  footerLinks: [                                 // Override footer links
+    { label: "Privacy", href: "/privacy" },
+    { label: "Terms", href: "/terms" },
+    { label: "EULA", href: "/eula" }
+  ],
+  copyrightText: "All rights reserved.",         // Copyright suffix after "© {year} {companyName}."
+
   // Optional: Legal documents (plain text, supports _COMPANY_, _WEBSITE_, _EMAIL_ placeholders)
   termsOfService: "Terms of Service for _COMPANY_...",
   privacyPolicy: "Privacy Policy for _COMPANY_...",

package/layout/Layout.jsx

@@ -14,6 +14,9 @@ import { getState } from '../core/Context.jsx';
  * Set `constants.hideSidebarInsetRounding` to true to remove the
  * rounded corners on the main content area.
  *
+ * Set `constants.sidebarCollapsed` to true to start the sidebar
+ * in its collapsed (icon-only) state.
+ *
  * @param {Object} props
  * @param {React.ReactNode} [props.children] - Child content (unused, Outlet renders routes)
  * @returns {JSX.Element} Layout with sidebar, main content, and tab bar
@@ -37,10 +40,12 @@ export default function Layout({ children }) {
 
   return (
     <div className="min-h-screen flex flex-col pt-[env(safe-area-inset-top)] pb-[calc(5rem+env(safe-area-inset-bottom))] md:pb-[env(safe-area-inset-bottom)] pl-[env(safe-area-inset-left)] pr-[env(safe-area-inset-right)]">
-      <SidebarProvider style={{
-        '--sidebar-width': 'calc(var(--spacing) * 72)',
-        '--header-height': '3.5rem',
-      }}>
+      <SidebarProvider
+        defaultOpen={!constants.sidebarCollapsed}
+        style={{
+          '--sidebar-width': 'calc(var(--spacing) * 72)',
+          '--header-height': '3.5rem',
+        }}>
         {showSidebar && <Sidebar variant="inset" />}
         <SidebarInset className={constants.hideSidebarInsetRounding ? "md:peer-data-[variant=inset]:rounded-none" : ""}>
           <Outlet />

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@stevederico/skateboard-ui",
   "private": false,
-  "version": "2.3.1",
+  "version": "2.5.0",
   "type": "module",
   "exports": {
     "./Sidebar": {

package/views/LandingView.jsx

@@ -13,8 +13,8 @@ import { Separator } from '../shadcn/ui/separator.jsx';
  * Default landing page with hero section, features grid, pricing card,
  * CTA section, and footer.
  *
- * Reads app branding, tagline, features, and pricing from constants.
- * Uses shadcn defaults for all styling — no inline styles or custom animations.
+ * Reads app branding, tagline, features, pricing, and layout from constants.
+ * All sections are configurable via optional constants keys with sensible defaults.
  *
  * @returns {JSX.Element} Full landing page
  *
@@ -43,9 +43,13 @@ export default function LandingView() {
           </div>
 
           <div className="hidden md:flex gap-6">
-            <a href="#features" className="text-muted-foreground hover:text-foreground transition-colors font-semibold">Features</a>
-            <a href="#pricing" className="text-muted-foreground hover:text-foreground transition-colors font-semibold">Pricing</a>
-            <a href="/terms" className="text-muted-foreground hover:text-foreground transition-colors font-semibold">Terms</a>
+            {(constants.navLinks || [
+              { label: 'Features', href: '#features' },
+              ...(constants.stripeProducts?.length > 0 ? [{ label: 'Pricing', href: '#pricing' }] : []),
+              { label: 'Terms', href: '/terms' },
+            ]).map((link, index) => (
+              <a key={index} href={link.href} className="text-muted-foreground hover:text-foreground transition-colors font-semibold">{link.label}</a>
+            ))}
           </div>
 
           <div className="flex gap-3 items-center">
@@ -91,50 +95,50 @@ export default function LandingView() {
         </section>
 
         {/* Pricing Section */}
-        <section id="pricing" className="py-16 md:py-24">
-          <div className="max-w-7xl mx-auto px-6">
-            <h2 className="text-center text-4xl md:text-5xl font-bold mb-16">Pricing</h2>
-            <div className="max-w-md mx-auto">
-              <Card>
-                <CardHeader className="text-center">
-                  <CardTitle className="text-2xl font-bold">{constants.stripeProducts[0]?.title || 'Monthly Plan'}</CardTitle>
-                  <CardDescription>per month</CardDescription>
-                </CardHeader>
-                <CardContent className="text-center">
-                  <div className="text-5xl font-bold text-foreground mb-8">{constants.stripeProducts[0]?.price || '$5.00'}</div>
-                  <ul className="text-left space-y-4 mb-8">
-                    {(constants.features?.items || []).map((feature, index) => (
-                      <li key={index} className="flex items-center gap-2">
-                        <Check size={16} className="text-primary shrink-0" />
-                        {feature.title}
-                      </li>
-                    ))}
-                    <li className="flex items-center gap-2">
-                      <Check size={16} className="text-primary shrink-0" />
-                      Priority Customer Support
-                    </li>
-                    <li className="flex items-center gap-2">
-                      <Check size={16} className="text-primary shrink-0" />
-                      Cancel anytime
-                    </li>
-                  </ul>
-                </CardContent>
-                <CardFooter>
-                  <Button variant="default" size="cta" className="w-full" onClick={() => navigate('/app')}>
-                    {constants.cta}
-                  </Button>
-                </CardFooter>
-              </Card>
+        {constants.stripeProducts?.length > 0 && (
+          <section id="pricing" className="py-16 md:py-24">
+            <div className="max-w-7xl mx-auto px-6">
+              <h2 className="text-center text-4xl md:text-5xl font-bold mb-16">{constants.pricing?.title || 'Pricing'}</h2>
+              <div className="max-w-md mx-auto">
+                <Card>
+                  <CardHeader className="text-center">
+                    <CardTitle className="text-2xl font-bold">{constants.stripeProducts[0]?.title || 'Monthly Plan'}</CardTitle>
+                    <CardDescription>per {constants.stripeProducts[0]?.interval || 'month'}</CardDescription>
+                  </CardHeader>
+                  <CardContent className="text-center">
+                    <div className="text-5xl font-bold text-foreground mb-8">{constants.stripeProducts[0]?.price || '$5.00'}</div>
+                    <ul className="text-left space-y-4 mb-8">
+                      {(constants.stripeProducts[0]?.features || []).map((feature, index) => (
+                        <li key={index} className="flex items-center gap-2">
+                          <Check size={16} className="text-primary shrink-0" />
+                          {feature}
+                        </li>
+                      ))}
+                      {(constants.pricing?.extras || []).map((extra, index) => (
+                        <li key={`extra-${index}`} className="flex items-center gap-2">
+                          <Check size={16} className="text-primary shrink-0" />
+                          {extra}
+                        </li>
+                      ))}
+                    </ul>
+                  </CardContent>
+                  <CardFooter>
+                    <Button variant="default" size="cta" className="w-full" onClick={() => navigate('/app')}>
+                      {constants.cta}
+                    </Button>
+                  </CardFooter>
+                </Card>
+              </div>
             </div>
-          </div>
-        </section>
+          </section>
+        )}
 
         {/* CTA Section */}
         <section className="py-16 md:py-24">
           <div className="max-w-7xl mx-auto px-6">
             <Card className="bg-primary text-primary-foreground py-16 text-center">
               <CardContent>
-                <h2 className="text-4xl md:text-5xl font-bold mb-10">Ready To Build?</h2>
+                <h2 className="text-4xl md:text-5xl font-bold mb-10">{constants.ctaHeading || 'Ready To Build?'}</h2>
                 <Button variant="secondary" size="cta" onClick={() => navigate('/app')}>
                   {constants.cta}
                 </Button>
@@ -149,11 +153,15 @@ export default function LandingView() {
         <div className="max-w-7xl mx-auto px-6">
           <Separator className="mb-8" />
           <div className="flex justify-center gap-8 mb-6">
-            <a href="/privacy" className="text-muted-foreground hover:text-foreground transition-colors font-semibold">Privacy</a>
-            <a href="/terms" className="text-muted-foreground hover:text-foreground transition-colors font-semibold">Terms</a>
-            <a href="/eula" className="text-muted-foreground hover:text-foreground transition-colors font-semibold">EULA</a>
+            {(constants.footerLinks || [
+              ...(constants.privacyPolicy ? [{ label: 'Privacy', href: '/privacy' }] : []),
+              ...(constants.termsOfService ? [{ label: 'Terms', href: '/terms' }] : []),
+              ...(constants.EULA ? [{ label: 'EULA', href: '/eula' }] : []),
+            ]).map((link, index) => (
+              <a key={index} href={link.href} className="text-muted-foreground hover:text-foreground transition-colors font-semibold">{link.label}</a>
+            ))}
           </div>
-          <p className="text-center text-muted-foreground">&copy; {new Date().getFullYear()} {constants.companyName}. All rights reserved.</p>
+          <p className="text-center text-muted-foreground">&copy; {new Date().getFullYear()} {constants.companyName}. {constants.copyrightText || 'All rights reserved.'}</p>
         </div>
       </footer>
     </div>