npm - @simple-auth-kit/cli - Versions diffs - 1.0.0 - Mend

@simple-auth-kit/cli 1.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (820) hide show

package/registry/admin-apps/react/variants/workspaces/src/index.css ADDED Viewed

@@ -0,0 +1,162 @@
+@import "tailwindcss";
+@import "@fontsource-variable/bricolage-grotesque";
+@import "tw-animate-css";
+@import "shadcn/tailwind.css";
+/* Our own `ThemeProvider` (`src/lib/theme.tsx`) toggles a `.dark` class on `<html>` — drive `dark:` from that instead of Tailwind v4's default `prefers-color-scheme` media query. */
+@custom-variant dark (&:is(.dark *));
+@theme inline {
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --color-muted: var(--muted);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-border: var(--border);
+  --color-primary: var(--primary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-destructive: var(--destructive);
+  --color-destructive-foreground: var(--destructive-foreground);
+  --color-card: var(--card);
+  --color-card-foreground: var(--card-foreground);
+  --font-heading: var(--font-sans);
+  --font-sans: var(--font-sans);
+  --color-sidebar-ring: var(--sidebar-ring);
+  --color-sidebar-border: var(--sidebar-border);
+  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+  --color-sidebar-accent: var(--sidebar-accent);
+  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+  --color-sidebar-primary: var(--sidebar-primary);
+  --color-sidebar-foreground: var(--sidebar-foreground);
+  --color-sidebar: var(--sidebar);
+  --color-chart-5: var(--chart-5);
+  --color-chart-4: var(--chart-4);
+  --color-chart-3: var(--chart-3);
+  --color-chart-2: var(--chart-2);
+  --color-chart-1: var(--chart-1);
+  --color-ring: var(--ring);
+  --color-input: var(--input);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-accent: var(--accent);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-secondary: var(--secondary);
+  --color-popover-foreground: var(--popover-foreground);
+  --color-popover: var(--popover);
+  --radius-sm: calc(var(--radius) * 0.6);
+  --radius-md: calc(var(--radius) * 0.8);
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) * 1.4);
+  --radius-2xl: calc(var(--radius) * 1.8);
+  --radius-3xl: calc(var(--radius) * 2.2);
+  --radius-4xl: calc(var(--radius) * 2.6);
+}
+:root {
+  --font-sans: "Bricolage Grotesque Variable", ui-sans-serif, system-ui, sans-serif;
+  --muted: oklch(0.967 0.001 286.375);
+  --muted-foreground: oklch(0.552 0.016 285.938);
+  --border: oklch(0.92 0.004 286.32);
+  --primary: oklch(0.21 0.006 285.885);
+  --primary-foreground: oklch(0.985 0 0);
+  --destructive: oklch(0.577 0.245 27.325);
+  --destructive-foreground: oklch(0.985 0 0);
+  --card: oklch(1 0 0);
+  --card-foreground: oklch(0.141 0.005 285.823);
+  --background: oklch(1 0 0);
+  --foreground: oklch(0.141 0.005 285.823);
+  --popover: oklch(1 0 0);
+  --popover-foreground: oklch(0.141 0.005 285.823);
+  --secondary: oklch(0.967 0.001 286.375);
+  --secondary-foreground: oklch(0.21 0.006 285.885);
+  --accent: oklch(0.967 0.001 286.375);
+  --accent-foreground: oklch(0.21 0.006 285.885);
+  --input: oklch(0.92 0.004 286.32);
+  --ring: oklch(0.705 0.015 286.067);
+  --chart-1: oklch(0.646 0.222 41.116);
+  --chart-2: oklch(0.6 0.118 184.704);
+  --chart-3: oklch(0.398 0.07 227.392);
+  --chart-4: oklch(0.828 0.189 84.429);
+  --chart-5: oklch(0.769 0.188 70.08);
+  --radius: 0.625rem;
+  --sidebar: oklch(0.985 0 0);
+  --sidebar-foreground: oklch(0.141 0.005 285.823);
+  --sidebar-primary: oklch(0.21 0.006 285.885);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.967 0.001 286.375);
+  --sidebar-accent-foreground: oklch(0.21 0.006 285.885);
+  --sidebar-border: oklch(0.92 0.004 286.32);
+  --sidebar-ring: oklch(0.705 0.015 286.067);
+}
+/* Applied by our own `ThemeProvider` (`src/lib/theme.tsx`) when the resolved theme (explicit
+   choice, or `system` following the OS) is dark. */
+.dark {
+    --background: oklch(0.141 0.005 285.823);
+    --foreground: oklch(0.985 0 0);
+    --card: oklch(0.21 0.006 285.885);
+    --card-foreground: oklch(0.985 0 0);
+    --popover: oklch(0.21 0.006 285.885);
+    --popover-foreground: oklch(0.985 0 0);
+    --primary: oklch(0.92 0.004 286.32);
+    --primary-foreground: oklch(0.21 0.006 285.885);
+    --secondary: oklch(0.274 0.006 286.033);
+    --secondary-foreground: oklch(0.985 0 0);
+    --muted: oklch(0.274 0.006 286.033);
+    --muted-foreground: oklch(0.705 0.015 286.067);
+    --accent: oklch(0.274 0.006 286.033);
+    --accent-foreground: oklch(0.985 0 0);
+    --destructive: oklch(0.704 0.191 22.216);
+    --destructive-foreground: oklch(0.985 0 0);
+    --border: oklch(1 0 0 / 10%);
+    --input: oklch(1 0 0 / 15%);
+    --ring: oklch(0.552 0.016 285.938);
+    --chart-1: oklch(0.488 0.243 264.376);
+    --chart-2: oklch(0.696 0.17 162.48);
+    --chart-3: oklch(0.769 0.188 70.08);
+    --chart-4: oklch(0.627 0.265 303.9);
+    --chart-5: oklch(0.645 0.246 16.439);
+    --sidebar: oklch(0.21 0.006 285.885);
+    --sidebar-foreground: oklch(0.985 0 0);
+    --sidebar-primary: oklch(0.488 0.243 264.376);
+    --sidebar-primary-foreground: oklch(0.985 0 0);
+    --sidebar-accent: oklch(0.274 0.006 286.033);
+    --sidebar-accent-foreground: oklch(0.985 0 0);
+    --sidebar-border: oklch(1 0 0 / 10%);
+    --sidebar-ring: oklch(0.552 0.016 285.938);
+}
+@theme {
+  --animate-caret-blink: caret-blink 1.25s ease-out infinite;
+  --animate-spin-slow: spin-slow 3s linear infinite;
+  --animate-spin-reverse: spin-reverse 1.5s linear infinite;
+  --animate-progress-indeterminate: progress-indeterminate 1.5s ease-in-out infinite;
+  @keyframes caret-blink {
+    0%, 70%, 100% { opacity: 1; }
+    20%, 50% { opacity: 0; }
+  }
+  @keyframes spin-slow {
+    from { transform: rotate(0deg); }
+    to { transform: rotate(360deg); }
+  }
+  @keyframes spin-reverse {
+    from { transform: rotate(360deg); }
+    to { transform: rotate(0deg); }
+  }
+  @keyframes progress-indeterminate {
+    0% { transform: translateX(-100%); }
+    100% { transform: translateX(400%); }
+  }
+}
+@layer base {
+  * {
+    @apply border-border outline-ring/50;
+  }
+  body {
+    @apply bg-background text-foreground;
+  }
+  html {
+    @apply font-sans;
+  }
+}

package/registry/admin-apps/react/variants/workspaces/src/lib/ability.ts ADDED Viewed

@@ -0,0 +1,78 @@
+import { AbilityBuilder, PureAbility } from "@casl/ability";
+import { createContextualCan } from "@casl/react";
+import type { CurrentUser } from "@simple-auth-kit/auth-client";
+import { createContext, useContext } from "react";
+/**
+ * The one place an `Ability` is constructed. Everything else in the app asks
+ * `ability.can(permission, "permission")` and never looks at `currentUser.permissions` itself,
+ * so the day the backend starts serving CASL rules directly this file is the only one that
+ * changes — see `abilityFor` below.
+ */
+export type AppAbility = PureAbility<[string, "permission"]>;
+/**
+ * The backend's permission catalog (`rbac.defaults.ts` in every combo), named here so a typo is
+ * a missing import rather than a silently-ungated button. Each key gates a real route: hiding
+ * an action the caller can't perform and getting a 403 if they call it anyway are the same
+ * rule, read from the same list.
+ */
+export const PERMISSIONS = {
+  usersRead: "users:read",
+  usersBlock: "users:block",
+  usersManage: "users:manage",
+  rolesManage: "roles:manage",
+  rolesAssign: "roles:assign",
+  permissionsGrant: "permissions:grant",
+  permissionsRead: "permissions:read",
+  permissionsDefine: "permissions:define",
+  auditLogRead: "audit-log:read",
+  membersManage: "members:manage",
+  customersRead: "customers:read",
+  customersManage: "customers:manage",
+  customersStatus: "customers:status",
+  countriesRead: "countries:read",
+  countriesManage: "countries:manage",
+  countriesStatus: "countries:status",
+  languagesRead: "languages:read",
+  languagesManage: "languages:manage",
+  languagesStatus: "languages:status",
+} as const;
+export type PermissionKey = (typeof PERMISSIONS)[keyof typeof PERMISSIONS];
+/**
+ * On this variant the answer is per workspace: the same user is an administrator of one and a
+ * plain member of another, and `GET /auth/me` reports the permissions of whichever workspace the
+ * request named. So the ability is rebuilt every time `currentUser` changes, which
+ * `WorkspaceStore` guarantees happens on every switch.
+ *
+ * `GET /auth/me` answers with a flat `permissions` array — one opaque `noun:verb` key per
+ * capability, not an action/subject pair — so each key becomes an allowed "action" on a single
+ * "permission" subject and `can(key, "permission")` is the only question this ability answers.
+ *
+ * **When `/auth/me` grows its `rules` field** (CASL rules serialized with `packRules` from
+ * `@casl/ability/extra`), replace the body of this function with
+ * `new PureAbility(unpackRules(user.rules))` and delete the builder loop. Nothing else in the
+ * app moves: call sites already ask this ability rather than reading `permissions`, and the
+ * `PERMISSIONS` keys above stay valid as the actions those rules carry. Until the field exists,
+ * `permissions` is the input.
+ */
+export function abilityFor(user: CurrentUser | null): AppAbility {
+  const { can, build } = new AbilityBuilder<AppAbility>(PureAbility);
+  for (const permission of user?.permissions ?? []) can(permission, "permission");
+  return build();
+}
+export const AbilityContext = createContext<AppAbility>(abilityFor(null));
+export const Can = createContextualCan(AbilityContext.Consumer);
+export function useAbility(): AppAbility {
+  return useContext(AbilityContext);
+}
+/** True when the ability carries at least one of `permissions` — the "can they open this page at all" question. */
+export function canAny(ability: AppAbility, permissions: readonly string[]): boolean {
+  return permissions.some((permission) => ability.can(permission, "permission"));
+}

package/registry/admin-apps/react/variants/workspaces/src/lib/auth-client.ts ADDED Viewed

@@ -0,0 +1,27 @@
+import { AuthClient, type WorkspaceIdResolver } from "@simple-auth-kit/auth-client";
+import { cookieTokenStorage } from "./token-storage";
+const baseUrl = import.meta.env["VITE_AUTH_API_URL"] ?? "http://localhost:3005";
+/**
+ * Where "which workspace am I in" lives is the app's business, not the client's, so the client
+ * is configured with a resolver and the store binds itself to it once at startup
+ * (`src/stores/store-context.tsx`). Every workspace-scoped call then reads the store's current
+ * answer at request time — a switch takes effect on the next call with no client re-creation
+ * and no stale copy of the id anywhere.
+ *
+ * The default until that binding happens is "no workspace", so a call made before the store has
+ * loaded sends no `X-Workspace-Id` and is rejected by the backend rather than acting in an
+ * arbitrary workspace.
+ */
+let resolveActiveWorkspace: WorkspaceIdResolver = () => null;
+export function bindActiveWorkspace(resolver: WorkspaceIdResolver): void {
+  resolveActiveWorkspace = resolver;
+}
+export const authClient = new AuthClient({
+  baseUrl,
+  storage: cookieTokenStorage,
+  workspaceId: () => resolveActiveWorkspace(),
+});

package/registry/admin-apps/react/variants/workspaces/src/lib/permission-groups.ts ADDED Viewed

@@ -0,0 +1,22 @@
+import type { PermissionSummary } from "@simple-auth-kit/auth-client";
+/** Distinct group names, in catalog order — feeds the group datalist on the permission forms. */
+export function deriveGroupNames(permissions: PermissionSummary[]): string[] {
+  const seen = new Set<string>();
+  for (const permission of permissions) seen.add(permission.group);
+  return Array.from(seen);
+}
+export function groupOrderFor(permissions: PermissionSummary[], group: string): number {
+  return permissions.find((p) => p.group === group)?.groupOrder ?? 0;
+}
+export function nextOrderInGroup(permissions: PermissionSummary[], group: string): number {
+  const maxOrder = permissions.filter((p) => p.group === group).reduce((max, p) => Math.max(max, p.order), -1);
+  return maxOrder + 1;
+}
+export function nextGroupOrder(permissions: PermissionSummary[]): number {
+  const maxGroupOrder = permissions.reduce((max, p) => Math.max(max, p.groupOrder), -1);
+  return maxGroupOrder + 1;
+}

package/registry/admin-apps/react/variants/workspaces/src/lib/theme.tsx ADDED Viewed

@@ -0,0 +1,64 @@
+import { createContext, useCallback, useContext, useEffect, useMemo, useState, type ReactNode } from "react";
+export type Theme = "light" | "dark" | "system";
+interface ThemeContextValue {
+  theme: Theme;
+  setTheme: (theme: Theme) => void;
+}
+const STORAGE_KEY = "theme";
+const ThemeContext = createContext<ThemeContextValue | null>(null);
+function readStoredTheme(): Theme {
+  if (typeof window === "undefined") return "system";
+  const stored = window.localStorage.getItem(STORAGE_KEY);
+  return stored === "light" || stored === "dark" || stored === "system" ? stored : "system";
+}
+function systemPrefersDark(): boolean {
+  return typeof window !== "undefined" && window.matchMedia("(prefers-color-scheme: dark)").matches;
+}
+function applyResolvedTheme(theme: Theme): void {
+  const resolvedDark = theme === "dark" || (theme === "system" && systemPrefersDark());
+  document.documentElement.classList.toggle("dark", resolvedDark);
+}
+/**
+ * Drop-in equivalent of `next-themes` for a Vite/React Router app: same three-state
+ * (`light`/`dark`/`system`) API, but implemented with plain React state, `localStorage`
+ * persistence, and a `.dark` class toggle on `<html>` instead of a Next-specific package.
+ */
+export function ThemeProvider({ children }: { children: ReactNode }) {
+  const [theme, setThemeState] = useState<Theme>(() => readStoredTheme());
+  useEffect(() => {
+    applyResolvedTheme(theme);
+  }, [theme]);
+  // Follow OS changes live while `theme === "system"`, same as `next-themes`.
+  useEffect(() => {
+    if (theme !== "system") return;
+    const media = window.matchMedia("(prefers-color-scheme: dark)");
+    const onChange = () => applyResolvedTheme("system");
+    media.addEventListener("change", onChange);
+    return () => media.removeEventListener("change", onChange);
+  }, [theme]);
+  const setTheme = useCallback((next: Theme) => {
+    window.localStorage.setItem(STORAGE_KEY, next);
+    setThemeState(next);
+  }, []);
+  const value = useMemo<ThemeContextValue>(() => ({ theme, setTheme }), [theme, setTheme]);
+  return <ThemeContext.Provider value={value}>{children}</ThemeContext.Provider>;
+}
+export function useTheme(): ThemeContextValue {
+  const ctx = useContext(ThemeContext);
+  if (!ctx) throw new Error("useTheme must be used within a ThemeProvider");
+  return ctx;
+}

package/registry/admin-apps/react/variants/workspaces/src/lib/token-storage.ts ADDED Viewed

@@ -0,0 +1,37 @@
+import { deleteCookie, getCookie, setCookie } from "cookies-next/client";
+import type { AuthTokens, TokenStorage } from "@simple-auth-kit/auth-client";
+// Distinct from apps/admin-react's cookie on purpose: browsers scope cookies by host and
+// ignore the port, so both consoles running on localhost share one cookie jar and a shared name
+// would mean signing into one signs you out of the other.
+const COOKIE_NAME = "simple-auth-kit-workspaces-tokens";
+/**
+ * Frontend-managed cookie storage for the shared AuthClient — per the project's resolved
+ * decision, this app caches tokens client-side in a (non-httpOnly) cookie rather than relying
+ * on backend-issued cookies. The backend's `Authorization: Bearer` contract is unchanged; this
+ * is purely where the SPA keeps the token between page loads/tabs.
+ */
+export const cookieTokenStorage: TokenStorage = {
+  async get(): Promise<AuthTokens | null> {
+    const raw = getCookie(COOKIE_NAME);
+    if (!raw || typeof raw !== "string") return null;
+    try {
+      return JSON.parse(raw) as AuthTokens;
+    } catch {
+      return null;
+    }
+  },
+  async set(tokens: AuthTokens): Promise<void> {
+    setCookie(COOKIE_NAME, JSON.stringify(tokens), {
+      path: "/",
+      maxAge: 60 * 60 * 24 * 30, // 30 days — refresh() rotates the actual token lifetimes server-side
+      sameSite: "lax",
+    });
+  },
+  async clear(): Promise<void> {
+    deleteCookie(COOKIE_NAME, { path: "/" });
+  },
+};

package/registry/admin-apps/react/variants/workspaces/src/lib/user-fields.ts ADDED Viewed

@@ -0,0 +1,13 @@
+export const GENDER_OPTIONS = [
+  { label: "Male", value: "male" },
+  { label: "Female", value: "female" },
+];
+/**
+ * The API serves full ISO 8601 timestamps for `dob`/`joinedDate` while the native date inputs the
+ * forms use want plain `yyyy-MM-dd` — which is also exactly what `CreateUserInput`/
+ * `UpdateUserInput` expect back, so no other date formatting exists in this app.
+ */
+export function toDateInputValue(iso: string | null | undefined): string {
+  return iso ? iso.slice(0, 10) : "";
+}

package/registry/admin-apps/react/variants/workspaces/src/main.tsx ADDED Viewed

@@ -0,0 +1,24 @@
+import { StrictMode } from "react";
+import { createRoot } from "react-dom/client";
+import { BrowserRouter } from "react-router-dom";
+import { App } from "./App";
+import { Toaster } from "./components/ui/sonner";
+import { QueryProvider } from "./lib/query-client";
+import { ThemeProvider } from "./lib/theme";
+import { StoreProvider } from "./stores/store-context";
+import "./index.css";
+createRoot(document.getElementById("root")!).render(
+  <StrictMode>
+    <ThemeProvider>
+      <BrowserRouter>
+        <QueryProvider>
+          <StoreProvider>
+            <App />
+          </StoreProvider>
+          <Toaster position="top-right" closeButton />
+        </QueryProvider>
+      </BrowserRouter>
+    </ThemeProvider>
+  </StrictMode>,
+);