@stevederico/skateboard-ui 3.0.2 → 3.6.0

package/MIGRATION.md

@@ -1,230 +0,0 @@
-# Migration Guide
-
-## Upgrading from 1.4.x to 2.0.x
-
-### Breaking Changes
-
-#### 1. `noProtectedRoutes` renamed to `authOverlay`
-
-```diff
- const constants = {
--  noProtectedRoutes: true,
-+  authOverlay: true,
- };
-```
-
-If you were using `noProtectedRoutes` to allow unauthenticated access to `/app` routes, rename it to `authOverlay`.
-
-#### 2. `Toast` replaced by Sonner `Toaster`
-
-If you imported `Toast` directly:
-
-```diff
-- import Toast from '@stevederico/skateboard-ui/Toast';
-```
-
-Remove it. `createSkateboardApp` now renders `<Toaster />` from [sonner](https://sonner.emilkowal.dev/) automatically. Use `toast()` from sonner directly:
-
-```javascript
-import { toast } from 'sonner';
-
-toast.success('Saved!');
-toast.error('Something went wrong');
-```
-
-#### 3. `SkeletonLoader` removed
-
-```diff
-- import SkeletonLoader from '@stevederico/skateboard-ui/SkeletonLoader';
-```
-
-Use the shadcn `Skeleton` component instead:
-
-```javascript
-import { Skeleton } from '@stevederico/skateboard-ui/shadcn/ui/skeleton';
-
-<Skeleton className="h-4 w-[200px]" />
-```
-
-#### 4. `AppSidebar` renamed to `Sidebar`
-
-```diff
-- import AppSidebar from '@stevederico/skateboard-ui/AppSidebar';
-+ import Sidebar from '@stevederico/skateboard-ui/Sidebar';
-```
-
-Most apps don't import this directly (Layout handles it), but update if you do.
-
-#### 5. `LandingViewSimple` removed
-
-```diff
-- import LandingViewSimple from '@stevederico/skateboard-ui/LandingViewSimple';
-```
-
-Use the `landingPage` parameter on `createSkateboardApp` to provide a custom landing page instead:
-
-```javascript
-createSkateboardApp({
-  constants,
-  appRoutes,
-  landingPage: <MyCustomLanding />,
-});
-```
-
-### New Features
-
-#### AuthOverlay and useAuthGate (1.5.0+)
-
-Gate actions behind authentication without redirecting:
-
-```javascript
-import { useAuthGate } from '@stevederico/skateboard-ui/useAuthGate';
-
-function SaveButton() {
-  const requireAuth = useAuthGate();
-
-  return (
-    <button onClick={() => requireAuth(() => saveThing())}>
-      Save
-    </button>
-  );
-}
-```
-
-Enable by setting `authOverlay: true` in constants. The overlay renders automatically.
-
-#### Custom Landing Page (1.4.1+)
-
-```javascript
-createSkateboardApp({
-  constants,
-  appRoutes,
-  landingPage: <MyLandingPage />,
-});
-```
-
-#### Sidebar Visibility Control (1.2.5+)
-
-```javascript
-import { hideSidebar, showSidebar, hideTabBar, showTabBar } from '@stevederico/skateboard-ui/Utilities';
-
-hideSidebar();
-showTabBar();
-```
-
-Or via constants:
-
-```javascript
-const constants = {
-  hideSidebar: true,
-  hideTabBar: true,
-};
-```
-
-### Full Upgrade Steps
-
-1. Update the package:
-   ```bash
-   deno install npm:@stevederico/skateboard-ui@latest
-   ```
-
-2. Search your codebase for removed imports:
-   ```
-   Toast, SkeletonLoader, AppSidebar, LandingViewSimple, noProtectedRoutes
-   ```
-
-3. Replace any direct `Toast` usage with `sonner`:
-   ```javascript
-   import { toast } from 'sonner';
-   ```
-
-4. Replace `SkeletonLoader` with shadcn `Skeleton`.
-
-5. Rename `noProtectedRoutes` to `authOverlay` in your constants.
-
-6. Run the app and verify routing, auth, sidebar, and toasts.
-
----
-
-## Upgrading from 2.0.x to 2.1.x+
-
-### No Breaking Changes
-
-All consumer import paths are unchanged. This release reorganized the internal file structure but the `exports` map in `package.json` keeps every public import stable:
-
-```javascript
-// These all still work exactly the same
-import { createSkateboardApp } from '@stevederico/skateboard-ui/App';
-import { getState } from '@stevederico/skateboard-ui/Context';
-import { apiRequest } from '@stevederico/skateboard-ui/Utilities';
-import Layout from '@stevederico/skateboard-ui/Layout';
-import Sidebar from '@stevederico/skateboard-ui/Sidebar';
-import { Button } from '@stevederico/skateboard-ui/shadcn/ui/button';
-```
-
-### What Changed Internally
-
-Files were reorganized into folders:
-
-| Before (2.0.x) | After (2.1.x+) |
-|-----------------|-----------------|
-| `Context.jsx` | `core/Context.jsx` |
-| `Utilities.js` | `core/Utilities.js` |
-| `DynamicIcon.jsx` | `core/DynamicIcon.jsx` |
-| `Layout.jsx` | `layout/Layout.jsx` |
-| `Sidebar.jsx` | `layout/Sidebar.jsx` |
-| `TabBar.jsx` | `layout/TabBar.jsx` |
-| `Header.jsx` | `layout/Header.jsx` |
-| `LandingView.jsx` | `views/LandingView.jsx` |
-| `SignInView.jsx` | `views/SignInView.jsx` |
-| `SignUpView.jsx` | `views/SignUpView.jsx` |
-| `SignOutView.jsx` | `views/SignOutView.jsx` |
-| `SettingsView.jsx` | `views/SettingsView.jsx` |
-| `PaymentView.jsx` | `views/PaymentView.jsx` |
-| `TextView.jsx` | `views/TextView.jsx` |
-| `NotFound.jsx` | `views/NotFound.jsx` |
-| `ThemeToggle.jsx` | `components/ThemeToggle.jsx` |
-| `Sheet.jsx` | `components/Sheet.jsx` |
-| `UpgradeSheet.jsx` | `components/UpgradeSheet.jsx` |
-| `ErrorBoundary.jsx` | `components/ErrorBoundary.jsx` |
-| `AuthOverlay.jsx` | `components/AuthOverlay.jsx` |
-| `ProtectedRoute.jsx` | `components/ProtectedRoute.jsx` |
-| `useAuthGate.js` | `hooks/useAuthGate.js` |
-
-### Cleanup
-
-- `AppSidebar.jsx` deleted (was dead code since 2.1.0)
-- `LandingViewSimple` export removed (file never existed on disk)
-
-### New: View Overrides (2.1.x+)
-
-Override built-in views without forking:
-
-```javascript
-createSkateboardApp({
-  constants,
-  appRoutes,
-  overrides: {
-    settings: MySettingsView,
-    signIn: MySignInView,
-    signUp: MySignUpView,
-    signOut: MySignOutView,
-    payment: MyPaymentView,
-    notFound: MyNotFoundView,
-    layout: MyLayout,
-  },
-});
-```
-
-### Upgrade Steps
-
-1. Update the package:
-   ```bash
-   deno install npm:@stevederico/skateboard-ui@latest
-   ```
-
-2. No code changes required. All imports resolve the same way.
-
-3. If you were importing `LandingViewSimple`, it was already broken (file didn't exist). Remove the import.
-
-4. Run the app and confirm everything works.

package/shadcn/ui/carousel.jsx

@@ -1,195 +0,0 @@
-"use client";
-import * as React from "react"
-import useEmblaCarousel from "embla-carousel-react";
-
-import { cn } from "../lib/utils.js"
-import { Button } from "./button.jsx"
-import { ChevronLeftIcon, ChevronRightIcon } from "../../icons"
-
-const CarouselContext = React.createContext(null)
-
-function useCarousel() {
-  const context = React.useContext(CarouselContext)
-
-  if (!context) {
-    throw new Error("useCarousel must be used within a <Carousel />")
-  }
-
-  return context
-}
-
-function Carousel({
-  orientation = "horizontal",
-  opts,
-  setApi,
-  plugins,
-  className,
-  children,
-  ...props
-}) {
-  const [carouselRef, api] = useEmblaCarousel({
-    ...opts,
-    axis: orientation === "horizontal" ? "x" : "y",
-  }, plugins)
-  const [canScrollPrev, setCanScrollPrev] = React.useState(false)
-  const [canScrollNext, setCanScrollNext] = React.useState(false)
-
-  const onSelect = React.useCallback((api) => {
-    if (!api) return
-    setCanScrollPrev(api.canScrollPrev())
-    setCanScrollNext(api.canScrollNext())
-  }, [])
-
-  const scrollPrev = React.useCallback(() => {
-    api?.scrollPrev()
-  }, [api])
-
-  const scrollNext = React.useCallback(() => {
-    api?.scrollNext()
-  }, [api])
-
-  const handleKeyDown = React.useCallback((event) => {
-    if (event.key === "ArrowLeft") {
-      event.preventDefault()
-      scrollPrev()
-    } else if (event.key === "ArrowRight") {
-      event.preventDefault()
-      scrollNext()
-    }
-  }, [scrollPrev, scrollNext])
-
-  React.useEffect(() => {
-    if (!api || !setApi) return
-    setApi(api)
-  }, [api, setApi])
-
-  React.useEffect(() => {
-    if (!api) return
-    onSelect(api)
-    api.on("reInit", onSelect)
-    api.on("select", onSelect)
-
-    return () => {
-      api?.off("select", onSelect)
-    };
-  }, [api, onSelect])
-
-  return (
-    <CarouselContext.Provider
-      value={{
-        carouselRef,
-        api: api,
-        opts,
-        orientation:
-          orientation || (opts?.axis === "y" ? "vertical" : "horizontal"),
-        scrollPrev,
-        scrollNext,
-        canScrollPrev,
-        canScrollNext,
-      }}>
-      <div
-        onKeyDownCapture={handleKeyDown}
-        className={cn("relative", className)}
-        role="region"
-        aria-roledescription="carousel"
-        data-slot="carousel"
-        {...props}>
-        {children}
-      </div>
-    </CarouselContext.Provider>
-  );
-}
-
-function CarouselContent({
-  className,
-  ...props
-}) {
-  const { carouselRef, orientation } = useCarousel()
-
-  return (
-    <div
-      ref={carouselRef}
-      className="overflow-hidden"
-      data-slot="carousel-content">
-      <div
-        className={cn(
-          "flex",
-          orientation === "horizontal" ? "-ml-4" : "-mt-4 flex-col",
-          className
-        )}
-        {...props} />
-    </div>
-  );
-}
-
-function CarouselItem({
-  className,
-  ...props
-}) {
-  const { orientation } = useCarousel()
-
-  return (
-    <div
-      role="group"
-      aria-roledescription="slide"
-      data-slot="carousel-item"
-      className={cn(
-        "min-w-0 shrink-0 grow-0 basis-full",
-        orientation === "horizontal" ? "pl-4" : "pt-4",
-        className
-      )}
-      {...props} />
-  );
-}
-
-function CarouselPrevious({
-  className,
-  variant = "outline",
-  size = "icon-sm",
-  ...props
-}) {
-  const { orientation, scrollPrev, canScrollPrev } = useCarousel()
-
-  return (
-    <Button
-      data-slot="carousel-previous"
-      variant={variant}
-      size={size}
-      className={cn("rounded-full absolute touch-manipulation", orientation === "horizontal"
-        ? "top-1/2 -left-12 -translate-y-1/2"
-        : "-top-12 left-1/2 -translate-x-1/2 rotate-90", className)}
-      disabled={!canScrollPrev}
-      onClick={scrollPrev}
-      {...props}>
-      <ChevronLeftIcon />
-      <span className="sr-only">Previous slide</span>
-    </Button>
-  );
-}
-
-function CarouselNext({
-  className,
-  variant = "outline",
-  size = "icon-sm",
-  ...props
-}) {
-  const { orientation, scrollNext, canScrollNext } = useCarousel()
-
-  return (
-    <Button
-      data-slot="carousel-next"
-      variant={variant}
-      size={size}
-      className={cn("rounded-full absolute touch-manipulation", orientation === "horizontal"
-        ? "top-1/2 -right-12 -translate-y-1/2"
-        : "-bottom-12 left-1/2 -translate-x-1/2 rotate-90", className)}
-      disabled={!canScrollNext}
-      onClick={scrollNext}
-      {...props}>
-      <ChevronRightIcon />
-      <span className="sr-only">Next slide</span>
-    </Button>
-  );
-}
-
-export { Carousel, CarouselContent, CarouselItem, CarouselPrevious, CarouselNext, useCarousel };